Transcrições
1. Nossas boas-vindas ao curso!: Bem-vindo ao Full Stack Web Development para iniciantes. Neste curso, os designs levam você de um iniciante a um desenvolvedor web capaz de construir as únicas interfaces de usuário front-end, mas também como projetar e construir o backend para interagir com ele também. Então, quem eu? Meu nome é Chris e serei seu instrutor ao longo deste curso. Eu sou um desenvolvedor web e também o produtor de muitos tutoriais ensinando milhares de alunos as habilidades que eles precisam para construir sites e aplicativos. Esta é a primeira parte da série completa, onde começaremos do início ensinando como HTML, CSS e web design responsivo para lhe dar
as habilidades que você precisa para construir sites funcionais com ótima aparência, que parecem ótimo em qualquer dispositivo lateral. Este curso contém mais de cinco horas de treinamento de alta qualidade. Começamos com HTML, cobrindo tudo o que você precisa saber, desde a configuração e estruturação em páginas da Web, elementos e atributos, ocultando formulários e entradas, vinculação de páginas da Web, imagens e muito mais. Tudo isso é aprendido em uma mão na abordagem baseada em projeto, onde você construir este site completamente a partir do zero, enquanto aplica todas as técnicas que você aprende. Em seguida, estilizamos isso usando CSS, e vamos cobrir tudo que você precisa saber, como seletores, fontes, margem, preenchimento, o modelo de caixa, posicionamento
flutuante junto com muito, muito mais, inclui algumas dicas e truques CSS úteis ao longo do caminho. Em seguida, arredondamos isso tornando o site totalmente responsivo para fazer com que ele altere layouts e responda a dispositivos de todos os tamanhos. Você aprenderá tudo sobre unidades escaláveis, layout fluido, consultas de
mídia, imagens responsivas, tudo isso enquanto aplica isso a um projeto. Espero que você esteja animado e vamos começar a aprender todos os fundamentos do desenvolvimento web na primeira parte deste curso.
2. O que você precisa para este curso (primeiros passos): Para este curso, você só precisará de algumas coisas para começar a funcionar. Primeiro, precisamos de um editor de texto. Você pode já ter uma preferência ou uma que você já usa. Para este curso, usarei o Visual Studio Code, que é ideal para codificação JavaScript, e também possui um terminal interno, que podemos usar mais tarde no curso. Você pode usar o que quiser. Mas aqui estão algumas opções populares do editor de texto, como Atom, Brackets, WebStorm e, claro, Visual Studio Code. Se você já tem um desses e um navegador da web, sinta-se à vontade para passar para o próximo vídeo. Caso contrário, eu recomendaria que você vá para code.visualstudio.com e siga as instruções de download para sua plataforma. Finalmente, você também precisará de um navegador da web. Eu recomendaria o Chrome do Google, mas você pode usar qualquer que você preferir. Durante o curso, usaremos as ferramentas de desenvolvedor dentro do Chrome, mas outros navegadores também têm essas ferramentas integradas. Pode parecer um pouco diferente do que estou fazendo. Isto é tudo o que precisamos para entrar. Em seguida, vamos dar uma pequena olhada no que HTML realmente é.
3. Entendendo o HTML (primeiros passos): Antes de começarmos a adicionar HTML às nossas páginas web, eu só quero ter certeza de que entendemos exatamente o que HTML é e o que ele faz. Eu não vou ir muito fundo e técnico ainda. Mas entender por que o usamos e por que
surgiu , em primeiro lugar, realmente nos beneficiará quando chegarmos a codificá-los. Primeiro de tudo, o que exatamente é HTML? HTML significa HyperText Markup Language. Pode parecer um pouco estranho no começo, mas veremos o que tudo isso significa em breve. HTML é uma linguagem de marcação padrão para a criação de sites e aplicativos. HTML está em todos os lugares na web. A maioria dos sites são construídos usando isso e todos os navegadores sabem ler e exibi-lo corretamente. Como todas as linguagens de programação e a maioria das coisas na vida, as coisas mudam e evoluem. Atualmente, possuímos a versão cinco do HTML. Como todas as novas versões, as coisas são adicionadas ou removidas quando uma nova versão sai, o que não é muitas vezes, não
é algo para se preocupar. Tudo o que já sabemos geralmente ainda se aplica. Muitas vezes, é um caso de melhorias e novos recursos à medida que a tecnologia avança. Abordaremos muitos dos novos recursos HTML5 durante este curso. HTML é usado para formatar um documento da Web. Um navegador da Web sabe como exibi-lo corretamente. Como já dissemos antes, é uma linguagem de marcação padrão da web, todos os navegadores da web saibam como manipular e exibir documentos HTML corretamente. O HTML aplica a formatação necessária para instruir o navegador o que fazer. HTML foi inventado por um físico chamado Tim Berners-Lee. O desenvolvimento ocorreu em torno de 1989-1990, onde memorandos ou propostas de HTML que são introduzidas. A ideia por trás do HTML era criar uma maneira de os pesquisadores enviarem e receberem documentos uns aos outros eletronicamente. Para entender por que HTML foi criado, primeiro, vamos dar uma olhada no problema. Esta é uma imagem tirada do site da Wikipédia. Mas imagine que este era um documento de texto que precisava ser enviado para departamentos individuais. Ao enviar este texto, não
há como descrever a formatação. O cabeçalho HTML na parte superior é maior e também negrito. Há uma linha abaixo dela e, em seguida, alguns textos padrão. Além disso, o início do parágrafo também é negrito e o texto também contém uma série de links que você deseja conectar a outros documentos. Este é um problema que os pesquisadores estavam enfrentando. Para começar a resolver esse problema, um dos primeiros passos é a idéia de marcar o texto. Ao trabalhar com manuscritos ou documentos escritos à mão, tipógrafos ou editores costumavam escrever ou marcar o texto nas margens do papel. Isso incluiria informações como o estilo e o tamanho
do texto para cada seção antes de ser transmitido para configuração de fonte. A ideia desta marca influenciou claramente a forma como o HTML é projetado. Olhe em nosso texto aqui antes e um equivalente HTML básico à esquerda. Do topo, marcamos o cabeçalho HTML ao envolvê-lo nesta tags h1. Vamos olhar mais de perto em todos esses momentos durante o curso. Mas este h1 descreve o conteúdo como sendo o mais importante e também sendo exibido como o maior título. Agora temos uma maneira de descrever como os textos serão parecidos para o leitor de documentos, como um navegador da web. O mesmo para abaixo, temos uma tag hr para descrever onde queremos que uma regra horizontal apareça. Esta é uma tag autônoma e não precisa de qualquer conteúdo de texto para formatar, eles abaixo deste parágrafo padrão de texto e incluídos com as tags p. Nós também temos tags fortes também para dizer ao navegador que este texto tem grande importância, e também para exibir em negrito. Claro, há muito mais dessas tags para cobrir, mas este exemplo básico agora deve lhe dar uma melhor compreensão de como as coisas funcionam. Também queremos uma maneira para estes links em azul para ser capaz de conectar todos os links a outros documentos. Isso nos leva ao hipertexto. Hypertext é outra dessas palavras que compõe HTML. Este é basicamente o texto na tela que são referências a outros textos ou documentos. Documentos de hipertexto são vinculados pelo que chamamos de hiperlinks. Vemos isso na maioria das páginas que visitamos todos os dias. Muitas vezes, isso é uma navegação superior com links ou hiperlinks para outras páginas. Essas páginas da Web geralmente separam documentos como você vê aqui. Agora sabemos que os textos em uma página da Web geralmente são cercados, todos marcados com tags, assim como vimos alguns slides atrás, e também essas tags p na parte inferior. Essas tags completas com o conteúdo no meio é chamado de elemento. Elementos podem ser pensados como os blocos de construção de uma página web. Você terá muita prática escrevendo esses elementos durante o curso. A última coisa que vamos ver neste vídeo são atributos. Os atributos são adicionados aos elementos para fornecer algumas informações adicionais. Por exemplo, podemos definir a cor do texto, podemos dizer ao navegador para qual página o link se ele for clicado, ou como você pode ver no exemplo aqui, podemos definir um ID exclusivo para os elementos. Se tudo isso é novo para você e muito para absorver, não se preocupe, está aqui. Enquanto história e fundo é bom saber, principal coisa a entender é como fazer essas tags para criar elementos e você terá muito mais prática à medida que você progride ao longo deste curso.
4. Configurando um projeto web (início do HTML): Durante as próximas seções, aprenderemos sobre os conceitos básicos de HTML e CSS. Também aplicaremos essas técnicas a um projeto à medida que você
as aprende para mostrar como todas elas se aplicam a um site real. O projeto para ser uma Tech Store exibir alguns produtos e também como algumas áreas diferentes, como cabeçalhos, rodapés e também barra lateral. Ele só terá funcionalidade básica, como clicar em um item para ver os produtos completos. Isso nos dará uma boa chance de obter alguma prática HTML e CSS. Ao iniciar qualquer novo projeto web, primeiro
precisamos criar uma pasta do projeto para armazenar todos os arquivos, pastas, imagens e quaisquer outros ativos relacionados ao projeto. Para começar, vamos para a área de trabalho e criar
uma nova pasta clicando com o botão direito do mouse e, em seguida, Nova pasta. Vou chamar isso de nome do nosso projeto, que é Tech-Store. Você pode, claro, criar esta pasta em qualquer lugar no seu computador que você preferir. Então eu vou abrir o Visual Studio Code, que é o editor de texto que eu vou usar para o resto deste curso. Abra isso, todo o seu editor de texto preferido e você pode arrastar a pasta para dentro. Abra isso e verá o nome em uma barra lateral à esquerda. Ou você pode ir para o arquivo e, em seguida, abri-lo e selecioná-lo a partir daí. Agora precisa criar nossos primeiros documentos web ou nosso arquivo. Novamente, dependendo do seu editor de texto, pode haver algumas maneiras de fazer isso. No código do Visual Studio, você pode usar Command e N em um Mac para abrir um novo arquivo. Ou no Windows pode ser Control plus N. Também a maioria dos editores de texto tem uma opção novamente, de ir para o arquivo e, em seguida, Novo arquivo no topo lá. Eu vou clicar em “Novo arquivo” a partir daí e então eu vou
chamar isso de index.html. Todas as páginas HTML precisam ter a extensão this.HTML no final. Então o navegador sabe que este é um arquivo HTML. Aperte “Enter”. Podemos nomear este arquivo o que quisermos, e vamos criar vários arquivos HTML para este primeiro projeto. Mas índice é um nome comum para o padrão do site ou página inicial. Então certifique-se que isso está dentro
do projeto da Tech Store e depois vamos para a área de edição à direita. Se escrevermos alguns textos, como, olá, obter isso salvo. Então, se abrirmos nossa pasta do projeto e, em seguida, clique duas vezes na página index.html abra isso dentro do navegador, e lá vemos nosso texto de, Olá, dentro do navegador. Claro, sabemos desde a última seção que precisamos cercar este texto com tags P para que ele seja válido. Mas, por enquanto, nosso projeto está configurado e pronto para passar agora para a estrutura em nossa página de índice.
5. Estruturando uma página web (início do HTML): Com a pasta do projeto agora configurada, podemos agora começar a adicionar alguma estrutura à nossa página de índice. Antes de começar a adicionar nossos elementos HTML, para adicionar conteúdo à nossa página, há alguma estrutura básica que primeiro precisamos adicionar. Vou começar removendo esse texto de saudação do último vídeo, e a primeira coisa que precisamos adicionar no topo de cada página é uma declaração DOCTYPE, que se parece com isso. Se você abrir e fechar os colchetes angulares, adicione um ponto de exclamação e digite DOCTYPE de HTML. Declarações DOCTYPE são uma maneira de declarar qual versão do HTML estamos usando. Este é um DOCTYPE para HTML versão 5. As versões anteriores eram muito mais longas e mais complicadas. Bem, HTML5 torna as coisas agradáveis e simples para nós. A palavra DOCTYPE não diferencia maiúsculas de minúsculas, mas eu gosto de digitar meu em maiúsculas de qualquer maneira. Em seguida, adicionamos as tags de elemento HTML principal ou raiz. Então, logo abaixo do DOCTYPE, abra e feche os colchetes angulares, digite HTML e, em seguida, quando isso fechar, novamente, abra e feche seus colchetes angulares, adicione uma barra e HTML. Com este sendo o elemento raiz, todo o resto deve ser adicionado entre essas tags. Este tipo superior no topo é a única exceção a isso. Dentro da tag HTML de abertura, vou adicionar um atributo. Falamos brevemente sobre atributos na última seção. Os atributos são apenas uma maneira de fornecermos algumas informações adicionais que precisamos adicionar à tag de abertura. Para a tag HTML, podemos fornecer os atributos de idioma com lang. Isso informa aos navegadores e mecanismos de busca o idioma da página da web que estamos criando. Vou criar este site em inglês, então o código é igual a en, dentro destas citações. Uma pesquisa rápida do Google por códigos de idioma HTML irá trazer uma lista de códigos de país, se você quiser usar um idioma diferente. Dentro desses elementos HTML, há dois elementos principais que agora podemos adicionar, chamados de cabeça e corpo. Então, logo abaixo dessa etiqueta de abertura, podemos abrir os suportes novamente e digitar a cabeça e fechar isso. Você pode ver que o código do Visual Studio é concluído automaticamente da seguinte maneira. Se o editor de texto não fizer isso, basta ir em frente e digitar a tag de fechamento com a barra. Depois disso, podemos adicionar o corpo. Isso novamente tem uma abertura e uma tag de fechamento também. Esta seção principal no topo contém dados sobre o site, muitas vezes chamados metadados. O conteúdo que adicionamos à cabeça geralmente não é exibido na página dentro do navegador, ele, no entanto, fornece algumas informações importantes sobre o documento HTML, como o título do site, informações de pesquisa motores. Nós também podemos vinculá-lo a todos os arquivos também, e vamos olhar para isso durante o início. O primeiro elemento que vou adicionar à seção head é uma meta tag. As meta tags basicamente fornecem informações sobre o site e é a primeira tag de fechamento automático que vimos até agora. Isso significa que ele não tem uma tag de fechamento. Ele não precisa de um porque nós não adicionamos nenhum conteúdo dentro, nós simplesmente adicionamos um atributo a ele. Existem muitas metatags diferentes disponíveis para fornecer informações sobre a descrição do site, a oferta do site. Nós também podemos usá-lo para adicionar palavras-chave também. Para este, porém, tudo o que eu vou fazer é adicionar um conjunto de caracteres, usado para o site, com os atributos charset. Então vamos criar nossa meta tag, M-E-T-A, fechar, e então podemos adicionar nossos atributos de conjunto de caracteres e isso será igual a UTF hífen 8. Definir uma codificação de caracteres pode parecer complicado, mas estamos simplesmente declarando quais caracteres estamos usando nesta página. O personagem tem sido em números, letras e também quaisquer símbolos de caracteres que você vai encontrar em seu teclado, como o símbolo at e também símbolos positivos e negativos, ou até mesmo colchetes. UTF-8 é um padrão HTML5, requer quase todos os caracteres disponíveis no mundo. Em seguida, logo abaixo desta meta tag, vou adicionar o título. Então, no título está abrindo e fechando tags. Vou ligar para a minha loja de tecnologia e temos de adicionar isto entre as duas etiquetas. Então, sob n assim. Se darmos um salvamento e, em seguida, abrir o navegador com index.html aberto, dar uma atualização, e podemos ver que temos loja de tecnologia no topo do navegador, apenas lá. Vamos adicionar a esta seção principal ao longo deste projeto, e também mais tarde neste curso. Isso agora nos deixa com essa seção do corpo. O corpo é onde adicionamos todo o conteúdo que aparecerá na página. Se formos em frente e digitar nosso “olá “novamente, logo abaixo do corpo assim. Dê um salvamento e, em seguida, recarregue o navegador. Vemos o texto agora aparecer novamente na página. Ótimo. Nossa estrutura HTML está agora no lugar, e agora podemos passar a olhar para mais
alguns elementos HTML que vamos adicionar a esta seção corpo.
6. Cabeçalhos HTML (início do HTML): Nos últimos vídeos, nos concentramos na criação um projeto de site junto com a adição da estrutura básica para nossa página de índice. Embora tudo isso seja essencial para um projeto de site, tenho certeza que você está todo interessado em obter alguma exibição de conteúdo real dentro do navegador. Quando olhamos para HTML nos slides recentes, demos uma breve olhada nos cabeçalhos HTML. Os cabeçalhos são usados para estruturar o conteúdo da página do mais para o menos importante, e são numerados h1 até h6. Usamos h1 para os títulos mais importantes ou principais, h2 o pouco menos importante e assim por diante. h1 também é o maior, até h6 sendo o menor por padrão. Os cabeçalhos são usados por mecanismos de pesquisa como o Google para determinar qual conteúdo é mais importante. Neste exemplo, o texto HTML em negrito grande
na parte superior aqui é marcado usando uma marca de cabeçalho de h1. Isso faz sentido, pois é o assunto principal da página. Podemos ver isso em ação visitando a página da Wikipédia da qual foi tirada. Se nos dirigirmos para o Google e, em seguida, vamos procurar a Wikipédia, HTML e selecionar o link superior apenas lá. Usando as ferramentas de desenvolvedor do Google Chrome, que usamos bastante neste curso, podemos provar que este é um título de nível um. Dentro de um Chrome, se escrevermos ou controlarmos o clique e, em seguida, descermos para inspecionar, isso abrirá as ferramentas do desenvolvedor. Não se preocupe muito com o que vemos aqui só por agora. Vamos olhar para isso com mais detalhes ao longo do curso. Por enquanto, porém, se formos para o inspetor, que é seta no canto, clique sobre isso. Então, se eu passar o mouse sobre o HTML e eu clicar nisso, podemos ver dentro do código aqui, a linha azul que é destacada é um h1. Não se preocupe com nada que está acontecendo aqui ainda. A principal coisa a saber é que selecionamos o texto HTML. Podemos ver que este é apenas um elemento h1 com alguns atributos dentro, como o ID, a classe, e também a linguagem que já vimos antes. Não é nada que não tenhamos visto até agora. Agora vamos dar uma chance a nós mesmos. Se fecharmos as ferramentas do desenvolvedor e
voltarmos para o editor de texto, já sabemos que o conteúdo que queremos mostrar
no navegador é colocado entre as tags body. Podemos adicionar nossos títulos dentro de lá. É na verdade na seção inferior antes e começar a criar alguns títulos. Primeiro h1 e vamos adicionar algum texto dentro daqui, simplesmente do título um. Na próxima linha vamos adicionar o nosso h2 com o texto do título dois. Próxima linha h3, h4, subtítulo de
texto quatro e mais dois para ir. h5 para os pequenos. A nossa posição cinco e, finalmente, a última é a seis. Digite tudo isso, dê um salvamento e depois vá para o navegador. Certifique-se de que a página index.html está aberta de antes. Caso contrário, volte para o arquivo e, em seguida, abra, dê uma recarga. Podemos ver claramente a diferença entre os tamanhos de cabeçalho. Mas não devemos ser tentados a usá-los apenas de lado o texto ou fazê-los parecer mais ousados. Lembre-se que os títulos são importantes. Se voltarmos ao nosso site finalizado, que
analisamos antes, temos alguns casos em que poderíamos usar títulos. Temos o título do site principal da loja de tecnologia no topo, o que pode ser um bom caso de uso para h1. Nós também temos o texto da loja por e todos os itens no topo de cada seção. Estes dois são títulos de Nível Dois,
em seguida, o título da barra lateral da categoria e também o preço será bom caso de uso para h3. Vamos colocar isso em prática aplicando-os ao nosso projeto. Vamos voltar para a nossa página index.html e dentro do corpo, vamos remover h2 direto para h6 deixando h1 entre a seção do corpo. Este h1 como acabamos de ver dentro da versão final, podemos adicionar um texto de loja de tecnologia, salvar isso. Recarregue o navegador, e há o título do nosso site. Voltar para a versão final. Movendo-se para baixo a barra lateral tinha o texto h2 de loja por e, em seguida, tivemos os títulos de categoria e preço. Vamos adicionar isso agora. Logo abaixo do título da loja de tecnologia, vamos adicionar o nosso h2 e entre estes tempos podemos adicionar o texto da loja por. Ficando com a seção barra de design abaixo da qual podemos adicionar nossos dois títulos Nível Três. O primeiro foi o texto da categoria. Feche isso. O texto da categoria. Então logo abaixo disso, havia também um h3, que era pelo preço. Eu só tenho um cólon depois da loja por lá. Dê um salvamento e vamos ver como a barra lateral está olhando agora. Ok, bom. Eu só adiciono a moeda entre os colchetes. Adicione um símbolo de moeda dentro disso. Agora este é o texto da barra lateral no lugar. Finalmente, podemos adicionar todos os itens que foram para a seção diferente do lado direito aqui. Este é também um cabeçalho h2 assim como loja por. Podemos adicionar isso logo abaixo. Vamos adicionar h2 e um texto de todos os itens, seguido dos dois pontos. Guarde isso. Agora vemos isso na página também. As coisas não parecem muito boas no momento, mas lembre-se, HTML é apenas para o conteúdo. As coisas começarão a parecer muito melhor quando mergulharmos em CSS para modelar e também colocar esses textos. Em seguida, vamos dar uma olhada em como seção ou
agrupar conteúdo relacionado usando tags div.
7. Tags div e span (início do HTML): Agora temos algum conteúdo na tela dentro do navegador. Mas, no momento, não está bem organizado. Acabamos de adicionar algum conteúdo basicamente de cima para baixo, embora não possa fazer muito estilo e posição desses cabeçalhos, até chegarmos à seção CSS, podemos começar a agrupar nosso conteúdo relacionado. Se olharmos novamente para o site finalizado, olhando aqui para a página inicial, mesmo alguém completamente novo para construir sites
provavelmente poderia descobrir quais seções provavelmente devem ser agrupadas. Temos um cabeçalho no topo, que seria uma área. No lado esquerdo, temos a barra lateral. Temos também uma área de produtos exibindo todos os nossos produtos da nossa loja. Temos informações individuais do produto, como esta seção aqui e na parte inferior, também
temos uma área de rodapé. Agrupar conteúdo é bastante simples. Só precisamos cercar o conteúdo em um recipiente chamado div. A div é um elemento e tem uma tag de abertura e fechamento. É diminutivo de divisão. De volta ao arquivo html índice, podemos adicionar alguns elementos div ao nosso site. Vamos fechar isto e voltar para a nossa página de índice. O texto que estão na parte superior, que era o cabeçalho, vai estar dentro do grupo de cabeçalho. Vamos criar nossa tag div. Uma etiqueta de abertura e a etiqueta de fechamento também. Mantenha isso organizado e vá em frente para adicioná-los em sua própria linha. Então eu vou cortar o h1 de antes. Agora coloque isso dentro desta seção div. Agora tem uma seção de cabeçalho. Se fizermos isso salvar e depois recarregar o navegador, não
veremos nenhuma alteração. Isso ocorre porque um div é apenas um recipiente geral. No entanto, eles são realmente importantes e usados muito. Veremos a importância mais tarde, quando entrarmos na seção CSS. Porque, por exemplo, poderíamos agrupar todo
o conteúdo do cabeçalho e aplicar uma determinada cor da fonte ou cor de fundo à seção completa. Ou podemos definir uma div para ser posicionada à esquerda da página, e outra div no lado direito. Vamos voltar e adicionar mais dois contêineres. O primeiro contêiner será para a barra lateral, que tem os três títulos aqui. Exploda a div. Vamos adicionar uma segunda div, e então podemos cortar todos esses três títulos e colá-los aqui dentro. Finalmente a nossa terceira e última div logo abaixo destes dois. Feche isso e então podemos colar no h2 de todos os itens. À medida que você avança nesta seção também irá adicionar mais conteúdo a esta seção principal, como os produtos. Mas, por enquanto, só temos o cabeçalho de todos os itens, dar que salvar e, em seguida, recarregar. Ainda não vemos mudanças, mas isso é bom por enquanto. Há também outro elemento usado também como um recipiente. Isso é chamado de elementos span. Para mostrar a diferença entre div e span. Primeiro, vamos imaginar que queríamos aplicar algum estilo especial para o símbolo de sinal $, que temos apenas aqui. Mas não o preço. Poderíamos cercar este símbolo $ com um tipo div. Vamos fazer isso agora. Corte esta seção e cole-a. Se salvarmos isso e depois recarregarmos o navegador, vemos algo estranho acontece. A div empurra o símbolo $ para uma nova linha. Isso ocorre porque um div é chamado de elemento de nível de bloco. Elementos são principalmente agrupados em qualquer ser um nível de bloco ou um elementos inline. Elementos de nível de bloco ocupam a largura total disponível
do navegador e também começa em uma nova linha. Além disso, todos os títulos que usamos até agora, logo acima e abaixo também são blocos de nível dois. É por isso que os vemos empilhados um em cima do outro, cada um começando em uma nova linha. Elementos em linha, no entanto, como podem soar, não começam em sua própria linha. Se houver espaço disponível, eles se alinharão em toda a página. A elementos span que mencionamos antes. Tem um recipiente alternativo para div é um elementos inline. Isso significa que podemos voltar e mudar div para ser span. Alterar a tag de abertura e fechamento dar que um salvamento e se atualizarmos, o navegador vemos agora os colchetes e $ símbolo em linha com o texto do preço. É assim que poderíamos usar elementos div e span para conter ou segmentar uma parte do nosso código. Eles se tornarão ainda mais úteis mais tarde no
grupo de seções para aplicar estilo e layout.
8. Adicionando parágrafos e texto (início do HTML): Agora é hora de olhar para adicionar texto ao nosso site. Tecnicamente, já temos textos sob a forma de títulos, mas também nos é fornecido com o elemento P para texto padrão. P significa parágrafo, embora seja usado para qualquer quantidade de texto de uma única letra ou palavra, até um parágrafo. Olhando para o produto para ver na versão final, há algum bloco para o texto que podemos adicionar, como a descrição, que é apenas aqui, o preço nesta linha aqui, e também o título de cada produto. Vamos para o editor de texto e começar a adicionar isso. Então, vamos fechar isso de volta para a página index.html. Primeiro em um é criar nova div logo abaixo de todos os itens. Vamos criar uma nova div aqui. Certifique-se de que isto ainda está aninhado dentro desta div principal. Mais uma vez, este vai ser o recipiente para todos esses produtos seção. Então teremos o título no topo. Então esta div vai ser o recipiente para um produto individual. Então, dentro deste tubo terá uma imagem do produto, um título, a descrição, e assim por diante. Primeiro podemos empreender o título, preço e descrição. Então abra as tags PP, dentro podemos ter o texto do Game Controller, que é o primeiro produto. Dizendo logo abaixo, podemos adicionar um preço, digamos $79.95. Em seguida, uma terceira linha com uma descrição. Então, uma vez que eu também controle de jogo para Xbox, salve isso. Vá até o navegador e, em seguida, atualize. E há nossas três linhas de texto no fundo. Uma das coisas que você vai notar aqui é que cada elemento P está em sua própria linha, assim como vimos no último vídeo. Isto significa que é um elemento de nível de bloco, que é ideal porque você quer que eles sejam empilhados, como vemos aqui. Se o texto dentro dos tempos P fica um pouco longo, também
podemos adicionar uma quebra de linha que deve permanecer no texto em uma nova linha. Fazemos isso com uma quebra elementos. Então, se a descrição era um pouco longa, poderíamos ir além e acrescenta pr, colocar uma quebra elementos. tempo de pausa não precisa de um tempo de fechamento porque não há conteúdo adicionado dentro, é simplesmente colocar lugar onde queremos que uma nova linha apareça. Diga isso, atualize o navegador e agora as palavras para Xbox aparecem na própria linha separada. Eu acho que seu título de produto também de controlador de jogo será melhor dentro de uma tag título, como um H4. Vamos fazer essa pequena mudança. Então, novamente controlador, podemos excluir P e em H-4, mesmo para a tag de fechamento, Salvar e, em seguida, atualizar. Então o título não parece muito diferente, mas há uma pequena diferença sutil nele. Você pode ver que é um pouco mais ousado. Então este é um agora para adicionar texto. Em seguida, veremos como podemos adicionar algum estilo básico ao nosso texto.
9. Ênfase, importância e formatação do texto (início do HTML): A maior parte do estilo que adicionamos dois sites é feito com CSS. No entanto, existem alguns pequenos elementos HTML disponíveis para nós que também fornecem alguma formatação de texto também. Tudo o que precisamos fazer é cercar algumas tags ao redor do texto que você deseja aplicar. Primeiro, vamos dar uma olhada em fazer um texto em negrito com as tags p. Voltar aos nossos produtos. Se formos até a descrição, se quiséssemos tornar a palavra incrível um pouco mais escura ou um pouco mais ousada. Podemos embrulhar isto. Primeiro vamos cortar isso. Podemos criar as tags p. Então podemos ver que temos uma abertura e um fechamento na etiqueta dois. Aqui dentro você pode colar em nossa palavra de incrível novamente. Guarde isso e recarregue o navegador. Agora temos a palavra incrível como uma cor mais escura e ousada. Embora o tipo p é válido para usar, é recomendável nerds que usamos um tags fortes em vez disso. Então vamos substituir b, pela palavra forte. Salve e atualize. O texto não tem a mesma aparência, mas a marca forte define texto importante e geralmente também é exibida em negrito. Também podemos tornar o texto em itálico também,
que, como você pode imaginar, são as tags I. Então vamos substituir forte por I, recarregar. Então temos algum texto em itálico no lugar. Assim como o elemento B no entanto, o elemento I está em torno de um longo tempo. Agora é recomendado usar os elementos M no lugar,
sempre que possível, uma vez que mais semântica ou descritiva. Então, em vez de eu, que muitas vezes pode ver, nós agora geralmente usamos M, que é cair ênfase. Salve isso, e atualizar, e é usado para dar ênfase extra ao texto, enquanto o elemento I é mais para um efeitos visuais metálicos, em vez de destacar qualquer importância extra. Nós também temos a capacidade de excluir texto com o elemento delete também. Isto representa textos que foi removido do documento, adicionando uma linha fluidos. Então vamos dar uma olhada em como isso é usado para atender M. Em seguida, adicionar em DEL, que é abreviação para excluir. Guarde isso. Vamos dar uma olhada nisso. Downward impressionante tem uma linha de fluidos apagados. Também podemos fazer o contrário, adicionando texto ao documento. Então, se quiséssemos remover a palavra também, assim como fizemos aqui e substituir por fantástico. Nós usaríamos o elemento de inserção para inserir uma palavra. Após a exclusão, vamos incluir o INS, que é a abreviação de inserção. Entre estes podemos adicionar palavra fantástica, Espaço lá, Dê que salvar. Há a palavra apagada de incrível e a palavra sublinhada inserida de fantástico. Em seguida, eu quero olhar para o uso de uma marca elementos. Esses elementos representam o texto destacado. Este é um efeito semelhante, o que vemos quando procuramos uma palavra em um site. Por exemplo, vamos para o site da Mozilla. Este é o desenvolvedor dot mozilla.org. Vá para qualquer seção que como dentro de um cromo, foi para selecionar comando e F para abrir a pesquisa. Então, se procurarmos por uma palavra como desenvolvedores, exatamente assim, podemos ver que ela está destacada em amarelo na página. Para adicionar esse efeito, podemos cercar o texto com elementos Mark. Vamos tentar isso em vez de excluir. Vamos adicionar Mark lá dentro. Eu também posso me livrar desses textos inseridos. Não precisamos mais disso. Em seguida, volte para a página de índice e atualize. Agora como o destaque amarelo que vimos antes, o elemento final que eu quero cobrir é pequeno. Isso faz o que parece. Torna o tamanho da fonte menor. Podemos simplesmente substituir marca pela palavra pequeno. Assim como temos quatro exemplos. Isso funcionou perfeitamente bem, ou podemos combiná-los ambos por nidificação. torno desta pequena seção aqui, podemos adicionar os elementos de marca também. Pouco antes que ele permite adicionar marca, e meu editor de texto automaticamente completar isso. Vá em vez disso, queremos adicionar isso no final. De dentro temos a palavra impressionante, envolvente agradável, temos pequeno. Em torno pequeno temos marca no exterior. O aninhamento é muito simples de fazer. Nós só precisamos ter cuidado para organizar os tipos corretamente de dentro para fora. Todos esses elementos que analisamos também podem ser aninhados. Na verdade, já estragamos todos esses exemplos até agora. Dentro destes elementos p no exterior. Também todos esses elementos p e aninhados dentro deste div. Então dê-lhes o mesmo e vamos ver estes dois juntos. Outro texto menor e também o realce amarelo no fundo também. Agora vou removê-los do projeto é que não precisamos deles. Vamos remover pequenos não marcados antes e também depois do texto. Diga isso e depois atualize. Agora voltamos ao normal. Apesar de não precisarmos desses elementos para este projeto em particular, é importante saber se você precisar deles.
10. Listas no HTML (início do HTML): Agora vamos dar uma olhada nas listas HTML. Listas como um som, é usado para exibir uma lista de itens. Olhando para esta versão final do projeto aqui, vamos fazer uso de listas em várias áreas. Nós os temos em uma barra lateral sobre o lado esquerdo para exibir uma lista de categorias. Também para as faixas de preço abaixo também. Além disso, nós os usamos para o menu dentro do cabeçalho e rodapé. Para esses links na parte superior, o menu pode não parecer uma lista à primeira vista, mas a maioria dos menus são criados com uma lista e, em seguida, estilizados ou alterados para serem alinhados usando CSS. Então vamos dar uma olhada em como podemos usá-los criando nossa lista de cabeçalho, com os três links de casa, loja e entre em contato conosco. De volta ao nosso editor de texto. Primeiro definimos o tipo de lista que queremos usar. Vou começar com uma lista desordenada, que usa as tags UL. Então abra a parte de cima, dentro desta primeira div, eu vou criar uma lista desordenada, abaixo da loja de tecnologia. Então abra as tags UL, que é novamente abrindo e fechando tags. Listas não ordenadas são basicamente uma lista com marcadores. Então, vemos uma bala preta ou círculo à esquerda de cada item por padrão. Este marcador pode ser alterado ou removido muito dentro do CSS e veremos como fazer isso mais tarde. Em seguida, adicionamos nossos itens de lista entre tags LI. Vamos adicionar o nosso primeiro item da lista, que é a casa. Então, logo abaixo disso, também podemos adicionar um segundo item de lista e este é para a loja e, em seguida, o terceiro na parte inferior é para entrar em contato conosco. Então, há nossos três itens de lista e certifique-se de que todos os três itens estão aninhados dentro dessas tags UL. Uma vez feito isso, podemos salvar isso e depois testar isso
no navegador e há nossos três links no topo. Você também pode ver as três balas do lado esquerdo, que eu mencionei antes. Também podemos criar uma lista numerada, alterando UL para ser OL. Então vamos mudar U para ser O. Dê que um salvar, recarregar
e, por padrão, ter os números 1, 2 e 3, e assim por diante para cada item da lista. Não estamos limitados a apenas números, embora ao usar listas, podemos adicionar um atributo de tipo para alterar as coisas ao redor. Dentro da tag OL de abertura. Podemos adicionar um tipo e definir isso igual a vários caracteres. Então, primeiro de tudo, nós mudamos isso para uma minúscula a, salve isso, atualize, agora temos letras minúsculas de a, b e c. Se isso fosse maiúsculas e minúsculas a, essas três letras agora seriam maiúsculas também. Nós também podemos aplicar algarismos romanos com um i. Dê que um salvar, recarregar, e ter os algarismos romanos minúsculos no lado esquerdo. Também podemos fazer o mesmo se quisermos que esses algarismos
romanos sejam maiúsculos desta vez com um I. maiúsculo vamos ver como isso está parecendo. Agora estão todas em maiúsculas. Nós também temos o número um também, mas este é um padrão, como vimos logo no início de 1, 2 e 3. Então não precisamos adicionar isso. As listas também podem ser aninhadas. Por exemplo, se quisermos adicionar alguns itens de lista definidos sob nosso link de loja, podemos adicionar uma nova UL ou lista ordenada dentro, assim como esta. Então logo abaixo da nossa loja, na verdade vamos remover o tipo primeiro e, logo abaixo da nossa loja, vamos criar uma nova lista não ordenada, exatamente como fizemos antes. Então as tags de abertura e fechamento. Então eu estou listando itens. Então vamos dizer item aninhado e, em seguida, mais um, item
aninhado dois, dar um salvamento, clique atualização e agora podemos ver nossa nova mensagem de itens aninhados logo abaixo deste link de loja. É assim que podemos adicionar lista aos nossos sites. Em seguida, adicionaremos o resto da lista ao nosso projeto em um pequeno desafio.
11. Hora de prática — crie as listas do projeto (início do HTML): Agora sabemos como criar listas. Eu gostaria que você fosse em frente e adicionar o resto das listas para o nosso projeto. Como guia, todos eles precisam estar em todas as listas. Já temos os itens de cabeçalho no lugar de casa, compre e entre em contato conosco. Nós só precisamos mudar isso de volta para uma lista desordenada e ter certeza que temos apenas esses três links que vemos aqui, vez do aninhado que adicionamos no último vídeo. Então teremos mais duas listas na barra lateral do lugar sob os títulos que já temos. Esta seção aqui é uma lista e, em seguida, abaixo, temos uma lista dos preços também. Finalmente, na parte inferior, temos um menu de rodapé também. Isso é exatamente o mesmo que o que adicionamos para o cabeçalho. Dê uma chance. É uma ótima maneira de aprender repetindo e praticando um pouco. Se você ainda não se sente confiante o suficiente para nos dar uma chance por si só, tudo bem. Apenas me acompanhe, e agora faremos isso juntos. Vamos fechar isso e voltar para o Visual Studio. Primeiro faz com que o nosso menu de cabeçalho está de volta a uma lista desordenada. Dê esse troco. Também temos esta lista não ordenada aninhada no meio, remova isso. Em seguida, temos a lista que vimos antes abaixo do cabeçalho da categoria. Primeiro vou em frente e adicionar uma linha horizontal. Podemos fazer isso com um elemento HR. Esta é também uma tag de fechamento automático, que significa que nenhuma tag de fechamento é necessária. Olhando para o projeto acabado mais uma vez, vá para a barra lateral, a linha horizontal é apenas esta que vemos aqui, que separa o cabeçalho dos itens da lista e o mesmo para o preço também. Vamos dar uma olhada e passar para a categoria, que é tag h3 aqui. Então podemos adicionar o nosso HR. Abaixo, podemos começar a construir nossa própria lista ordenada. Aqui dentro, eu vou primeiro listar o item que temos, é todos os itens e isso pode ser qualquer coisa que você preferir. Isso realmente não importa. Lembre-se que tudo isso é só para praticar. Então câmeras, laptops,
depois laptops, depois laptops temos telefones, acessórios, e o último foi para outro. Guarde isso, vá para o navegador e atualize. Nosso menu superior está agora de volta como deveria ser e abaixo categoria, temos a nossa linha que se espalha a largura total da página por enquanto, mas isso não é nada para se preocupar. Abaixo disso, temos nossos itens de lista em uma lista não ordenada. Então temos a segunda lista da barra lateral para as faixas de preços, que vamos adicionar apenas soprar este título de preço aqui. Voltando para o editor de texto, vamos adicionar estes abaixo deste h3, o preço. Certifique-se de que esta lista não ordenada novamente ainda está entre esta seção div. Lembre-se que este é o recipiente completo para a nossa barra lateral. Todo o conteúdo da barra lateral precisa ir entre as tags de abertura e fechamento. Vamos começar de novo com a nossa regra horizontal e, em seguida, a nossa lista não ordenada. Dentro aqui, vou listar itens, você pode adicionar o preço, digamos 1-9, a segunda faixa de preço foi 10-29, então continue indo 30-59, digamos 60-99, e a parte inferior pode ser 100 mais. Em seguida, salve, recarregue e, em seguida, temos a nossa segunda lista desordenada abaixo do preço. Isso está parecendo bem agora. Finalmente temos o menu de rodapé. Primeiro precisamos criar uma seção div rodapé para adicioná-los dentro. Lembre-se que temos a seção div para o nosso cabeçalho. Temos a seção div aqui para nossa barra lateral e, em seguida, na parte inferior, temos esta seção div para o nosso conteúdo principal, que inclui os produtos. Logo após esta seção e ainda entre as tags do corpo, vamos adicionar uma nova div e isso é para a seção de fotos. Tudo o que precisamos fazer é adicionar uma nova lista não ordenada com uma nova lista de itens. Isso é exatamente o mesmo que a seção de cabeçalho. Então temos casa, temos loja e finalmente temos contato conosco. Com isso no lugar, dê um salvamento. Para ver isso no navegador, vamos atualizar. Agora vemos isso no fundo. Terei essas listas no lugar. próximo passo para dar uma olhada na adição de imagens.
12. Trabalhando com imagens (início do HTML): Temos trabalhado principalmente com elementos baseados em texto até agora. Agora é hora de adicionar algumas imagens ao nosso site. Eu forneci as mesmas imagens que estou usando como um download gratuito para uso ou você pode, claro, baixar o seu próprio, se você preferir. E eu tenho essas imagens pasta na área de trabalho, que eu vou arrastar para a pasta do projeto. Ele simplesmente contém seis imagens que vamos usar para o projeto. Então tudo o que vou fazer é abrir o projeto têxtil. Dentro de lá eu vou arrastar nesta pasta de imagens. Então, tudo o que deseja ter agora é o index.HTML ao lado da pasta de imagens. Primeiro, precisamos ir para a página de índice e adicionar os elementos da imagem. Isso não tem conteúdo dentro dele, então ele não tem uma tag de fechamento. Então vamos fazer isso dentro do nosso produtivo, que é apenas aqui. Então vamos entrar lá, logo acima do título do controlador de jogo. Vamos adicionar a imagem sem a tag de fechamento. Dentro daqui podemos adicionar um atributo fonte para especificar a localização da imagem. Existem algumas maneiras pelas quais você pode fazer isso. Primeiro, quero ver a inclusão de imagens de outros sites. Então, se formos para o navegador da web e, em seguida, ir para o Google, se você procurar por Wikimedia Commons. Vamos para este link de topo aqui. O site da Wikimedia Commons geralmente tem uma foto do dia. Então você também parece um pouco diferente disso. Tudo o que precisamos fazer se formos para clicar com o botão direito e ir para copiar endereço da
imagem e, em seguida, passar para a nossa fonte e colar isso entre as citações. Simplesmente assim. Dê um salvamento a isso. Se voltarmos para nossa página de índice no navegador, clique em Atualizar, agora temos uma imagem dentro desta seção do produto. Então, embora isso funcione perfeitamente bem, link para imagens em outros sites geralmente não é recomendado. Em primeiro lugar, a localização da imagem não está sob seu controle. Assim, o proprietário do site poderia movê-lo ou removê-lo. Além disso, este método, que é conhecido como hot linking, só
deve ser feito se eu tiver permissão para fazê-lo do proprietário do site. Uma maneira melhor de fazer isso é usar nossas próprias imagens. Portanto, estamos no controle da localização. Nós já adicionamos essas imagens à nossa pasta do projeto, dentro desta pasta de imagens também. Então, em vez disso, se voltarmos ao molho e depois removermos as longitudes adicionadas. Dentro daqui, especificamos um caminho de arquivo. Então estamos dentro da página de índice agora, então precisamos ir para dentro da pasta de imagens. Então é imagens barra para frente. Dentro da pasta de imagens, especificamos o nome da imagem que você deseja adicionar. Então, porque estamos criando um produto para um controlador de jogo, e vamos adicionar a imagem, que é controlador com extensão the.jpg. Então isso precisa ser exatamente o mesmo que o nome aqui dentro. Caso contrário, não vai funcionar. outra extrema. jpg é um tipo de arquivo, e isso também é importante. Se você estiver usando suas próprias imagens com tipos de arquivo diferentes, como as.png, você precisará alterar isso para refletir isso. Também assista arquivos jpg alfa para os quais é salvo como JPEG assim. Então, certifique-se de que está salvo. Então vá para o navegador. Existe a imagem do nosso controle Xbox. O elemento de imagem também tem alguns outros atributos que podemos usar também. Um atributo importante é alt. Então para trás. No final, também
podemos adicionar a tag alt. Dentro daqui, podemos definir alguns textos. Isso é importante porque podemos definir uma alternativa de texto para usar se a imagem não puder ser carregada por qualquer motivo específico ou para pessoas com deficiência
visual usando software de leitura de tela para visualizar sua página. Então, em vez da imagem, se houver um problema com o tipo no texto da imagem do controlador de jogo, apenas como um exemplo. Também podemos definir a largura e altura da imagem também. Então, fora das citações. Vamos definir a altura. Então as alturas, vamos definir isso para 300 e também a largura igual a 300 também. Assim, ele só irá definir um desses locais, como a largura ou a altura. A imagem será dimensionada proporcionalmente, mantendo a proporção de tamanho e largura iguais à que
está atualmente e tanto a largura quanto a altura, podem fazer com que a imagem pareça um pouco fora de proporção. Então salve e atualize. Agora vemos que são 300 pixels por 300 pixels, que faz com que a imagem pareça um pouco esmagada. Então, em vez disso, vou deixar a largura no lugar, remover a altura. Se atualizarmos a imagem agora permanece na proporção. Então é assim que podemos adicionar imagens. Em seguida, veremos como adicionar hiperlinks a todos os projetos.
13. Links (início do HTML): No início do curso, quando estamos olhando para HTML e os problemas que ele resolve. Mencionamos, o hipertexto é o texto exibido em um computador que liga a outros textos ou documentos. Esses links são chamados de hiperlinks. Nós já temos nossos itens de menu, assim como o exemplo aqui. Mas precisamos de uma maneira de mudá-los para os links para outras páginas. Para fazer isso, temos um elemento que representa âncora. Podemos usá-lo para vincular a outras páginas, locais
diferentes na mesma página, ou até mesmo outros sites também. Vamos começar a trabalhar adicionando links para nossos itens de menu. Vamos para a página de índice, e vamos para o nosso cabeçalho, no topo. Estes três links aqui, primeiro links adiciona o um elemento em torno do que queremos vincular. No nosso caso, queremos vincular o texto aqui. Eu só vou cortar isso fora e então abrir o um elemento que está abrindo e fechando. No meio aqui podemos colar em nosso link de casa mais uma vez. Isto significa que o nosso texto vai ser clicável. Em seguida, adicionamos o local ao qual queremos vincular, adicionando o atributo href, que significa referência de hiperlink. Dentro da abertura uma etiqueta, href, apenas H-R-E-F. Então, dentro deste href, podemos adicionar um link. Vamos ligar para um site aleatório, digamos o site da Mozilla que visitamos anteriormente, então http://developer.mozilla.org, e salve isso, ao
longo do navegador, atualize. Em seguida, faça backup para a parte superior da página. Podemos ver instantaneamente que há uma mudança com o link inicial. Se passarmos o mouse sobre ele, veremos agora um cursor diferente. Também é uma cor diferente com o sublinhado, que mostra que é um link. Vamos clicar nisso e ver o que acontece. Em seguida, ligamos para este site developer.mozilla.org, que está tudo funcionando bem. Nós apertamos o botão Voltar foram levados de volta para a nossa página de índice. Este é um link externo porque estamos ligando longe de nosso próprio site. Nós também podemos criar um link interno para vincular a outra página em nosso projeto também. Vamos criar mais algumas páginas da web para vincular. De volta ao projeto. Vamos para o bloco de texto, certifique-se de que você não está clicando na pasta de imagens. Vamos clicar fora disso e, em seguida, clicar em novo arquivo. Certifique-se de que este novo arquivo esteja fora da pasta de imagens e junto com este index.html. Então vamos salvar esse contato com a extensão HTML ponto, assim como a página de índice. Então vamos apenas adicionar um texto simples da página de contato conosco, salve isso. Então vamos fazer mais um, novo arquivo. Então vamos chamar isso de detalhe do produto. Novamente com uma extensão HTML de ponto. Basta adicionar algum texto ou página de detalhes do produto. Esta será a página que irá vincular, ou clicar em um dos produtos individuais para obter mais algumas informações sobre esse produto individual. Agora vamos ter nossas novas páginas, vamos voltar para o index.html. Em vez deste link externo, podemos remover isso. Vamos criar um link interno para vincular essas duas novas páginas que você criou. O primeiro que eu quero fazer é um link para a página index.html. Como este é o link inicial, queremos que este link de volta para esta página de índice. Você salva isso e depois clicamos nisso. podemos ver nada muda porque ainda está link para esta página de índice, e é claro que ainda tomamos esta página de índice. Agora, para a loja. Se cortarmos os textos da loja olhando como o link com a tag, e colar isso no meio. Ainda não temos uma página de loja, então podemos deixar um atributo href vazio. Isso significa que ele ainda terá o mesmo estilo que o resto dos links. Mas ele simplesmente não vai ligar em nenhum lugar quando clicarmos nele. Em seguida, a página entre em contato conosco, que é uma das páginas que acabamos de criar. Vamos abrir as etiquetas. Colar entre em contato conosco dentro do meio, o atributo href. Desta vez é contact.html. Salve isso, assim como quando se trabalha com imagens, este caminho de arquivo é relativo. Isso significa que é relativo ao local atual. Estamos atualmente na página index.html. A página de detalhes do contato e do produto está ao lado desta página na estrutura da pasta. Portanto, podemos apenas adicionar o nome do arquivo. Se ele tem um desses arquivos dentro de uma pasta, também
precisaria adicionar o nome da pasta logo antes, como este. Mas nós não, então podemos simplesmente deixá-lo como contact.html. Você pode salvar isso e vamos tentar isso. Atualizar, podemos tentar a loja e não
temos um link para qualquer lugar, então isso é apenas ficar na página atual. Temos um link para a página de contato,
então, uma vez que clicamos sobre
isso, ele levará a esta página de contato conosco. Também podemos ver no topo, estamos atualmente no contact.html. Se clicarmos no botão Voltar no navegador, então somos levados de volta a esta página de índice. Outro tipo de link que podemos usar é um link para diferentes partes na mesma página. Para fazer isso, precisamos adicionar algum conteúdo mais temporário a esta página. Podemos clicar em um link e rolar para baixo até a parte que queremos. Vou copiar a imagem e colá-la na parte inferior, para criar mais conteúdo. Vamos procurar as imagens que adicionamos antes. Isto, vamos copiá-lo e tudo o que vamos fazer é continuar copiando e colando isto. Basta dar-nos um conteúdo mais na página e dar um salvamento. Então, se atualizarmos o navegador, agora
temos algum conteúdo para o qual podemos rolar para baixo. Isso nos permitirá clicar em um link e seguida, a página irá rolar para baixo até a seção da mesma página. Isso é possível adicionando um ID, então vamos adicionar um ID a um desses produtos. No início, um ID é apenas um atributo como já vimos antes. Vamos chamar isso de identificação do link. Podemos então rolar para baixo até a seção quando clicamos no botão de início. Vamos substituir o href aqui de índice ou html com o valor de uma hashtag e, em seguida, link. O hash é usado para trabalhar com IDs e veremos isso muito mais tarde no curso ou trabalhando com CSS e JavaScript. Agora dê um salvamento, em seguida, atualizar e agora, se clicar em casa, você vê a página agora pula para baixo para o primeiro produto aqui, que é o que adicionamos o ID para. Além disso, ele pode vincular a outras páginas quando um usuário clica em uma dessas imagens. Primeiro, vamos restabelecer o site de como era. Vamos remover este link aqui e voltar para index.html. Se rolarmos para baixo, isso deve remover este atributo ID. Então também podemos remover todas as imagens extras que adicionamos para nos dar a altura extra. Remova todas essas imagens extras, deixando apenas a primeira que tínhamos originalmente. Agora podemos começar a trabalhar na vinculação quando um usuário clica nesta imagem. Para isso, podemos vincular as imagens do produto a este novo arquivo
product-detail.html que criamos. Tudo o que precisamos fazer é cercar esta imagem com as etiquetas A. Vamos abrir as etiquetas a. Em seguida, dentro colamos no conteúdo, como a imagem que você deseja vincular. Então, dentro do lado de abertura, adicionamos os atributos href familiares, que se vincularão ao product-detail.html. Product-detail.html e dar que salvar. Nós também podemos remover este atributo width também, vamos dimensionar isso mais tarde usando CSS. Remova isso e guarde. Agora, para o navegador, podemos recarregar e agora podemos ver quando passamos o mouse sobre a imagem,
o cursor muda para mostrar que este é um link, e clique sobre isso, e então vamos levar para a página de detalhes do produto que você criou aqui. É assim que podemos adicionar links para o nosso site. A última coisa que eu quero fazer antes de terminar é
copiar esses três links da seção de cabeçalho. Lembre-se que estes são os mesmos links que estão para baixo no rodapé. Basta copiar estes, e, em seguida, podemos substituir estes três itens de lista no rodapé com aqueles que são links. Dê isso um salvamento, atualização, na verdade, precisamos voltar para o index.html. Em seguida, para baixo, podemos ver a seção de rodapé agora tem três links também. É assim que podemos usar links dentro de nossas páginas web. Eles são outras partes realmente úteis e importantes da construção de sites, como você pode ver. Vamos usá-los muito à medida que progredirmos ao longo deste curso.
14. Hora de prática — vinculando às páginas (início do HTML): Agora, é a hora de praticar mais por conta própria. Se você se sentir confortável fazendo isso. Desta vez com links. Se você acessar o navegador, temos essa imagem do produto, vinculando à página de detalhes do produto, que criamos. O que eu gostaria que você fizesse neste vídeo é também transformar o título do produto do controlador de jogo em um link também, que vincula a mesma página de detalhes do produto. Além disso, se olharmos para a versão final, gostaria que você criasse os links Mais Informações e Adicionar ao Carrinho. Lembre-se, nós só temos este produto até agora, então apenas começar isso sob o único produto é bom. Tudo que você precisa fazer é adicionar esses dois links usando o elemento A que você descobriu com algum texto entre abertura e fechamento tag. Embora esses textos pareçam botões, é tudo apenas um caso de adicionar alguns CSS, o que faremos mais tarde. Tudo o que eu estou esperando é um texto simples que é um link quando clicado. O botão Mais informações também pode vincular à mesma página de detalhes do produto, assim como fizemos para a imagem e também para o título. No entanto, você pode deixar um atributo href vazio para este botão Adicionar ao carrinho, pois não temos nenhuma página para vincular no momento. Vá em frente e dê uma chance ou se você ainda um pouco inseguro, eu vou em frente e fazer isso agora. Vamos voltar ao Visual Studio Code e começar com o título do produto. Vamos localizar o nosso produto, que está apenas aqui em todos os itens. Vamos começar com o título do produto do controlador de jogo. Vamos copiar e copiar para o nosso lugar e então podemos adicionar nossas tags âncora. Em seguida, entre abertura, fechamento tag, podemos colar em um título de controlador de jogo, em
seguida, vá em frente e adicione os atributos href dentro da tag de abertura e isso vai ligar para a página product-detail.html. Em seguida, podemos adicionar os dois links para Mais informações e Adicionar ao carrinho e eu vou fazer isso logo após a descrição aqui. Vamos fazer algum espaço e na primeira tag
A e isso vai ser com os textos de Mais Informações. Isso também está vinculando à mesma página de detalhes do produto, então também podemos adicionar o atributo href. Nosso product-detail.html. Em seguida, o nosso segundo link logo abaixo e este é para Adicionar ao carrinho. Nós também podemos adicionar os atributos href, mas como eu mencionei antes, isso vai ser apenas uma string vazia por enquanto, como nós não temos nenhuma página HTML voltando para. Vou dar o salvamento do navegador. Primeiro, vamos clicar no controle do jogo e ele nos leva para a página de detalhes do produto. Role para baixo, temos Mais informações, que também nos leva para a mesma página de detalhes do produto e Adicionar ao carrinho, que ainda nos mantém na página index.html. É isso agora para o desafio, espero que você conseguiu e eu vou vê-lo em seguida, onde vamos dar uma olhada em elementos semânticos.
15. O que são elementos semânticos? (início do HTML): Agora eu quero dar um passo atrás da adição a este site e tomar um momento para olhar para o que chamamos de elementos semânticos. Elementos semânticos são simplesmente elementos que descrevem claramente o seu conteúdo, não só para dizer ao navegador de internet, mas também outros desenvolvedores também olhando para o seu código também. Este é um diagrama de um site típico. O corpo contém todo o conteúdo que vemos na tela, como já sabemos. Aqui, vemos algumas seções típicas de um site. Cada seção tem um elemento div. Uma div é uma seção ou divisão usada para agrupar conteúdo. Já fizemos isso em nosso projeto agrupando a seção de cabeçalho, a barra lateral e cada produto. É assim que as coisas têm sido feitas no web design por um longo tempo e ainda são. Os elementos Div são perfeitamente bons para usar. Na verdade, vamos usá-los bastante durante este curso. Muitas vezes você verá um atributo Id adicionado a cada uma dessas divs. Isso permite que você selecione uma determinada div, queremos aplicar estilo ou layout para usar o CSS. Aqui também adicionamos mais alguns elementos div, desta vez aninhados dentro dos existentes. Novamente, isso é bom e muito comum. Nós já fizemos isso no projeto por ter uma div pai circundante para todo o conteúdo principal, em
seguida, ninho em uma div dentro de cada produto dentro desta div principal. Desde a versão 5 do HTML, agora
temos alguns elementos alternativos que podemos usar como você pode ver aqui. Ao invés de usar um div genérico, agora
podemos usar um semântico ou elementos mais descritivos. Tanto o div quanto todos esses novos elementos que vemos aqui, ainda têm uma tag de abertura e fechamento para cercar o conteúdo também. Temos elementos de cabeçalho que podemos adicionar ao nosso projeto no
lugar da div em torno do título do nosso site e menu de navegação. Há também principal, que contém o conteúdo principal do site. Isso não deve ser usado para qualquer conteúdo que é repetido em outras páginas, como barras laterais. Por exemplo, os elementos laterais que vemos à direita são frequentemente usados para barras laterais e geralmente são repetidos em todo o site. Portanto, é melhor ser mantido separado do conteúdo principal. Também temos um rodapé de barra lateral, para que possamos fazer uso de todos esses novos elementos aqui dentro do nosso projeto. Este é o exemplo que vimos anteriormente, bem desta vez com os elementos mais novos e mais semânticos. Aqui você pode ver um elemento de artigo que é ideal para usos como uma postagem de blog ou um widget que tem conteúdo auto-suficiente. Há também um elemento de seção abaixo de dois. Isto como parece, define uma seção de nossos documentos web. Isso é para agrupar conteúdo relacionado. Nós também temos agora o elemento nav, que você pode usar para cercar nossos links de navegação. Não precisamos adicioná-los a todas as áreas de navegação do nosso site. Ele só se destina a ser usado para blocos principais ou links de navegação. Observe que colocamos isso dentro do cabeçalho para este exemplo. No entanto, isso não é necessário. Ele pode ser colocado dentro ou fora do cabeçalho ou mesmo aninhado dentro sobre as áreas dois. Também podemos levar as coisas ainda mais longe, reutilizando elementos como o cabeçalho ou rodapé para definir a seção de cabeçalho ou rodapé de um artigo, por exemplo, ou até mesmo reproduzir seções dentro de outros elementos, como a barra lateral. Lembre-se, embora esta é apenas uma maneira comum de usá-los. Você não é forçado a usar de nenhuma maneira particular. Seu uso também será diferente dependendo do estilo do site que você está construindo. Agora sabemos o que está disponível para nós. Agora podemos seguir em frente e estes para o nosso projeto.
16. Adicionando elementos semânticos no nosso projeto (início do HTML): Todos nós acabamos de aprender sobre elementos HTML semânticos. Agora podemos aplicá-los ao nosso projeto. Como é, isso não vai mudar a aparência dentro do navegador, mas em vez disso, ele irá adicionar alguma estrutura significativa para a nossa página web, que é ótimo para o navegador e sobre desenvolvedor também. Na página index.html. Vamos começar a partir do topo adicionando os elementos de cabeçalho no lugar desta div circundante. Tag de abertura basta colocar o texto de H1, pode ser substituído por cabeçalho. Então, na parte inferior desta seção, logo abaixo da lista não ordenada, podemos então fechar esta seção de cabeçalho 2. Agora, um navegador web ou desenvolvedor pode ver claramente que esta é a seção pesada, em vez de apenas um contêiner div genérico. Se pudéssemos salvar isso e depois recarregar, não
vemos nenhuma diferença dentro do navegador. O mesmo vale para a barra lateral. Podemos substituir o elemento div com os elementos de lado, que vimos antes. Role para baixo abaixo do cabeçalho, acima da compra da loja, podemos substituir esta div com lado, e depois para baixo na parte inferior, abaixo da lista não ordenada para as mudanças de preços também com lado. Dentro desta seção de lado, também
temos duas seções ao lado do lado. Um para esta lista de categorias, que é esta seção apenas aqui e, em seguida, uma seção para os preços. Eu vou separar estes rodeando cada um com uma seção elementos. Logo abaixo loja por vamos adicionar uma seção elementos. Então vamos copiar o título de nível três da categoria. Na verdade, vamos parar com isso. Todo o caminho até o fim da lista não ordenada. Comando ou Controle X para cortar isso e então vamos colar isso dentro desta seção. Esta é a nossa primeira seção aqui para as categorias. Então, abaixo disso, vamos adicionar uma segunda seção, que será para os preços. vez, podemos copiar o Nível 3 indo até o final dos preços em nossa lista, Command ou Control x para cortar isso. Agora cole isso dentro da seção. Agora temos nossas duas seções dentro da barra lateral. Dê esse salvamento, e verifique se tudo está bem no navegador. Não vemos diferença, então parece tudo bem. Essas seções que acabamos de criar geralmente contêm um cabeçalho. Já temos estas três rubricas aqui. Então pode ser por isso movendo-se para fora da barra lateral. Então vamos abaixo divulgar e separar a seção. Os produtos serão a seção principal do nosso último vídeo. Temos também estes elementos principais que podemos acrescentar. Isto irá substituir este elemento div circundante que vai em torno do único produto que já temos. Assim, o interior aberto de div vem substituído por principal. Em seguida, na parte inferior, feche a seção principal. Na parte inferior da página, também
podemos fazer uso do elemento rodapé 2. Esta é a última seção div e página que é o rodapé. Vamos simplesmente mudar isso para ser os novos elementos de rodapé HTML-5, e dar um salvamento e mais para a recarga do navegador. Não vemos nenhuma diferença, mas agora temos as tags semânticas no lugar. Também dissemos no último vídeo, há agora um elemento nav. Isso é usado para representar as principais áreas de navegação. Nossos links de menu de cabeçalho e rodapé para outras páginas em nosso site. Este pode ser um bom caso de uso para os elementos de navegação. Primeiro, vamos adicionar isso ao redor da área do rodapé. Logo após a tag de abertura do rodapé, você pode adicionar nosso nav de abertura e tag de fechamento. Vamos cortar isso um pouco, e depois colar no navegador de fechamento. Certifique-se de que o seu fique assim. Temos a área do rodapé. Em seguida, temos o nav, e então temos nossa lista desordenada com nossos links gratuitos. Então também podemos repetir isso para a seção de cabeçalho 2 do topo. Logo após a loja de tecnologia, podemos abrir o navegador. Em seguida, podemos cortar a tag de fechamento, que foi automaticamente adicionada em pharos neste sob a lista não ordenada. Também podemos ajustar isso um pouco para que seja mais legível. Salvar e apenas atualizar e verificar que tudo está olhando bem, que tudo parece ser nós ainda temos nossos links no lugar e nada parece diferente, mas agora temos elementos mais descritivos ou semânticos. Agora, estrutura em nossa página web.
17. Hora de prática — adicionando mais produtos (início do HTML): Nós agora cobrimos muitos dos conceitos básicos de HTML, eu gostaria que você agora vá em frente e obter alguma prática conta própria adicionando mais alguns produtos. Claro, produtos extras serão exatamente como este que temos
aqui sem qualquer um dos CSS styling ainda, mas o importante, é obter o conteúdo na tela. Se passarmos para a versão final aqui, você pode ver seis produtos diferentes. Isto é o que eu gostaria que você fizesse. Você pode adicionar ainda mais se quiser. Não tem que ser seis, mas eu forneci seis imagens no total que você pode usar. Nós já temos este primeiro item do controlador de jogo, então você pode basear o resto deste e apenas mudar a imagem e também o texto do título e também a descrição. Certifique-se de que cada produto também tem um GIF circundante também, assim como o que já temos. Você poderia, é claro, copiar e colar neste já existente que já temos. Você poderia copiar a seção de div completa e colar em mais cinco vezes. Mas se você é novo em HTML, eu recomendaria que você pelo menos tente digitar alguns, para dar-lhe um pouco mais de prática. Eu sugiro que você pause o vídeo
na versão final para ver todas as imagens e texto. Não te preocupes em estragar as coisas. Vou rever isto no próximo vídeo.
18. Solução — adicionando mais produtos (início do HTML): Espero que você tenha conseguido completar o resto do produto e obter um pouco mais de prática, adicione um HTML ao seu site. Vou rapidamente executar e adicionar esses cinco produtos extras no meu projeto. Voltar para o índice ou HTML. Vamos rolar para baixo até o nosso produto dentro da seção principal. Esta seção div aqui é a que contém todas as informações do produto. Eu só vou copiar isso e colar isso logo abaixo. Vou realmente remover este link para os detalhes do produto e deixar isso na primeira forma. Vamos remover isso e alinhar tudo isso. O primeiro foi o controlador do produto. O segundo vai ser para os fones de ouvido. As imagens eram fones de ouvido dot jpg. O “alt “foi a imagem dos auscultadores. Em seguida, o texto de fones de ouvido brancos, eo preço que podemos adicionar qualquer preço que você quiser, digamos 54.95 para isso. Vamos chamar esses fones de ouvido brancos incríveis. Há quebra tag lá apenas para adicionar estes em duas linhas diferentes. Adicione ao carrinho e mais informações podem permanecer também, mas vamos remover o link para esses dois. Você não tem que fazer isso, mas eu vou apenas remover isso para o meu. Então podemos copiar isso novamente e colar, ter
certeza que está tudo alinhado. O terceiro item era para a câmera, que era a câmera dot jpg. A descrição da foto da câmera era para a câmera Canon. Também vamos remover este link aqui, de fato isso nos fones de ouvido também, para que a imagem com o texto alternativo, o título, o preço, seja um pouco mais. Digamos 649.95. A descrição, câmera
incrível por Canon. Copie e vamos colar isso de novo. Depois que a câmera foi o microfone. Microfone dot jpg, o texto antigo, um título para isso, este é um microfone Yeti. O preço, 119,95 por isso. Inscrição, digamos incrível microfone azul Yeti. Abaixo disso, apenas a linha é para cima e são os mesmos. Estes são os nossos cabos. Em vez de câmera, isso vai ser cabos. Imagem de cabos. O título. Preço, 10,95 e economize para cabos. Descrição, cabos impressionantes disponíveis em diferentes comprimentos. Você pode adicionar qualquer coisa aqui que você preferir, isso realmente não importa. O ponto principal é apenas obter mais alguma prática de escrever código HTML. Depois dos cabos, temos o último que é para as lentes. Digamos que lentes de câmera 99,95 e digamos lentes de câmera incríveis. Um, dois, três, quatro, cinco, seis. Há os nossos seis produtos agora na página de índice. Dê que salvar e, em seguida, atualizar. Do topo temos o nosso primeiro produto, nossos auscultadores, a câmara, os cabos do
microfone e também as lentes. Espero que você consiga completar isso, se não, não se preocupe, você terá tido alguma prática mais valiosa de qualquer maneira. Eu vou vê-lo agora no próximo vídeo onde vamos dar uma olhada nos comentários HTML.
19. Comentários HTML (início do HTML): Eu só quero ter um momento rápido, dar uma olhada no uso de comentários HTML. Este só vai ser um pequeno vídeo para comentários e realmente importante para conhecer e usar. Um comentário é basicamente uma área onde podemos digitar alguns comentários ou notas para nós mesmos, ou outros desenvolvedores que você pode ler no código. Isso se torna mais importante em projetos maiores. Podemos entender melhor o que está acontecendo dentro de nosso código ou para refrescar nossa memória se voltarmos alguns meses ou mesmo anos depois. Para outros comentários, precisamos incluir a seguinte sintaxe em nosso arquivo HTML. Digamos que acima desta seção principal, abrimos os colchetes angulares, assim como um elemento HTML, em
seguida, adicionamos um ponto de exclamação e em seguida, dois traços e você já pode ver que toda essa seção depois é alterada de cor. Em seguida, fechamos isso adicionando mais dois traços e fechamos os colchetes. Dentro daqui podemos adicionar nosso texto para fazer um comentário, digamos seção principal para exibir produtos. Então podemos salvar isso. Agora, se atualizarmos o navegador, e se formos para a seção principal, que é esta seção “Todos os itens” aqui, vemos que o texto não é renderizado para a tela, como o resto do HTML. Também os comentários podem ser sobre várias linhas para. Então, em vez de ter tudo isso em uma linha, podemos fazer algo como: vamos para o topo aqui, ou vamos começar com o corpo. Podemos abrir nossos comentários e fechar isso da mesma forma. Talvez possamos fazer uma lista temporária para fazer. Digamos o número um, crie a página shop.HTML. Número dois, adicione estilo CSS. Podemos passar por várias linhas. Novamente, ao salvar e atualizar, podemos ver que esses comentários não estão na parte superior da página. Comentários também são úteis para remover linhas de código 2. Por exemplo, se você quiser mudar uma imagem de produto, então se nós descermos para o primeiro produto, que é este controlador de jogo aqui, nós poderíamos apenas adicionar um comentário como este, pouco antes dos elementos da imagem. O mesmo de antes. Abra o colchete, adicione exclamação e dois traços e você pode ver instantaneamente que não fechamos isso, que todo o código restante depois é comentado. Então, basta dar um salvar e atualizar, e então podemos ver qualquer coisa depois que a imagem foi removida do nosso site. Mas só queremos comentar esta imagem. Vamos fechar isso logo após os elementos da imagem. Salve e depois desça. Assim, todo o nosso conteúdo é adicionado empacotamento, exceto esta imagem para o controlador do jogo. Eu só vou desfazer essas mudanças e adicionar a imagem de volta. Nós salvamos e atualizamos e há nossa imagem de volta no lugar. Esta sintaxe que usamos aqui dos colchetes angulares, o ponto de exclamação, e também os dois traços só é usado quando o comentário em nosso código HTML ou ao usar arquivos HTML. Em idiomas, use uma sintaxe diferente, mas funciona exatamente da mesma maneira. Vamos olhar para como os comentários funcionam para mais idiomas mais tarde. Mas, por enquanto, vamos passar a olhar para entidades HTML e símbolos.
20. Entidades e símbolos (início do HTML): Quero mostrar-lhe uma maneira de adicionar alguns símbolos visuais agradáveis aos nossos sites e como exibir certos caracteres reservados usando entidades HTML. Antes de olharmos para entidades HTML, vamos dar uma olhada em por que elas são necessárias adicionando a uma das descrições do produto. Por exemplo, se descermos para, digamos a câmera, e vamos para a descrição. Na verdade, vamos até as lentes no fundo. Dentro das descrições, se você quiser estender isso e talvez adicionar algumas informações adicionais dentro dos colchetes. Digamos que para modelos Canon menos de 2017. Você pode ver imediatamente que o editor de texto é alterado a cor do símbolo menor que aqui, indicado que há um problema. Isso ocorre porque o maior e menor que símbolos, uma classe tem caracteres reservados em HTML. Esses particulares são reservados porque um navegador pode
confundi-los com essas tags HTML de abertura e fechamento, que temos aqui. Isso pode ser substituído por uma entidade HTML. Todas as entidades HTML começam com um comercial e terminam com o ponto e vírgula com um determinado código no meio. Parece exatamente com isso. Se removermos o símbolo menor que, podemos adicionar o e comercial, que é este caractere aqui. Menos do que usa o LT
e, em seguida, um ponto-e-vírgula no final. Agora, como você muda de vermelho para ser da mesma cor que o resto dos elementos. Isso tudo deve estar funcionando bem. Salve isso, recarregue e se descermos para a imagem, até a parte inferior das lentes da câmera e como a nossa descrição. Os modelos Canon menos de 2017, então símbolo está agora sendo exibido no navegador. Vamos dar uma olhada em mais alguns só para demonstração. Maior do que, use o gt, atualizar, você pode ver os colchetes angulares é agora aponta para a direita. Se você queria exibir este comercial, que temos aqui, este é AMP, que é show de e-comercial, recarregar e há símbolo exatamente isso. Outra entidade que poderíamos usar é para a cotação. Em vez disso amp, poderíamos usar QUOT, que você mostra a cotação,
salvar e, em seguida, recarregar. Agora tem a citação de tupla no lugar. Há também muitas outras entidades que você pode encontrar com uma pesquisa rápida do Google se você mais interessado. Entidades também são úteis para exibir símbolos que não estão em um teclado padrão. Vamos dar uma olhada em alguns desses, começando com o símbolo de direitos autorais. O símbolo de direitos autorais é simplesmente copiar. Faz você ter o e comercial e o ponto e vírgula no final também. Há símbolo de direitos autorais apenas lá, vamos rolar em. Só para ver isso um pouco melhor. Vamos dar uma olhada em uma marca registrada que é reg. Atualizar, e agora tem o R no círculo e também pequeno, como uma moeda. Vamos dar uma olhada no iene. Guarde essa e recarregue. Agora tem um símbolo de iene que não está no meu teclado. É assim que podemos usá-los e, claro, você pode Google isso e encontrar muito mais que você pode usar. Há centenas de diferentes, então basta procurar por qualquer um em particular que você possa precisar adicionar. Eu só vou remover esta seção extra que nós adicionamos e dizer isso, bem
como encontrar mais deles on-line com uma pesquisa do Google. Há um site com [inaudível] chamado unicode table.com. Se tivéssemos todos os dias de hoje, você vai encontrar uma enorme variedade de símbolos que você pode usar em seu projeto. Há os mais populares no topo ou você pode percorrer um enorme conjunto de ícones abaixo. Vamos fazer uma pesquisa usando a barra de pesquisa na parte superior. Vamos procurar o jogo. Na verdade, procuramos por videogame e, em seguida, clicamos em busca. Agora temos um símbolo de controlador de videogame. Se clicarmos sobre isso, vemos que temos dois números diferentes, temos um número unicode e também código HTML. Este código HTML começa com o e comercial, assim como usamos antes, e termina em ponto e vírgula. Vamos usar o código HTML, então vamos copiar este código que nos é dado. Volte para o projeto e, em seguida, vamos rolar para cima até os produtos de controle de jogo. Aqui está o título. Depois vamos colar isso dentro e sobre o nosso projeto e recarregar. Role de volta para o controle do jogo e lá vamos nós. Há uma pequena imagem que é adicionada. Está sublinhado porque ainda está dentro do link. Vamos cortar isso e colar isso fora dessa tag “a”, então apenas assim e depois recarregar. Agora não vemos o sublinhado para o link. Agora temos um ícone de controlador bonito ao lado do título do produto e como você pode ver pela tabela unicode, com literalmente centenas e milhares de modos
diferentes que podemos usar em nossos projetos. Tenho certeza que você vai encontrar muitos bons usos para isso à medida que você progride.
21. Hora de prática — página de detalhes do produto (início do HTML): Agora é uma grande chance de ir em frente e construir sua própria página HTML. Nós já criamos os detalhes do produto em nossa página HTML apenas aqui, mas ainda não adicionamos conteúdo. Se passarmos para a versão final aqui e clicar na imagem do produto, o primeiro item. Este é o detalhe final do produto para a página HTML, que eu gostaria que você tentasse copiar. Lembre-se, só precisamos adicionar o conteúdo. Eu não espero que o seu se pareça com este, versão
concluída até que nós adicionamos no CSS. Você pode deixar esta mesa na parte inferior. Vou só por agora, vamos adicionar este quando chegarmos à palestra das mesas. Já temos todo o conteúdo que precisamos para criar isso, já
temos a seção de cabeçalho, já
temos a barra lateral, já
temos a seção de rodapé e também temos um desses produtos. Portanto, só precisamos replicar a página de índice, mas desta vez só temos um produto, que é esse controlador. É claro que você pode Copiar a página de índice completa e Colá-la
no arquivo de detalhes do produto e, em seguida, remover os produtos de arquivo extra, mas se você é novo em tudo isso, você pode querer digitá-lo para um pouco mais de prática. Se você ainda não tem certeza, não se preocupe. Vou em frente e fazer isso agora. De volta ao Visual Studio. Vou para o index.html,
pressione Command ou Control A para selecionar todo o código e, em seguida, vou para Command ou Control C para copiar. Para a página de detalhes do produto, vamos excluir esse texto e, em seguida, Colar no mesmo código da página de índice. Se você subir até o topo, esfregue este texto ou também podemos adicionar ao final dele para o detalhe e nos dar salvar. Então, se deslocarmos para baixo até os produtos, por isso temos a barra lateral que é bom e, em seguida, todos os itens. Esta primeira div é a que queremos manter para o controlador. Vamos remover todos os itens extras, então dois itens extras lá,
o microfone, os cabos e, finalmente, as lentes. Para mover isso e, em seguida, mover o backup do site principal. Temos apenas um produto dentro desta seção principal, juntamente com o cabeçalho de todos os itens. Na verdade, podemos alterar isso para detalhes do produto e, em seguida, dar-nos salvar, ir para o navegador, clicar em Atualizar. Mas vamos para os nossos projetos. Atualize isso e, em seguida, se selecionarmos o controlador Jogo, seguida, levará para a página de detalhes do produto. Temos o título, temos a barra lateral
e, em seguida, a seção de detalhes do produto, que é um produto,
e, em seguida, a área do rodapé para baixo na parte inferior. O seu agora deve ficar assim. Temos todo o conteúdo que vimos da versão final, exceto a tabela, que veremos na próxima seção.
22. Tabelas no HTML (formulários, tabelas e iFrames): Agora passamos para tabelas HTML. Tabelas como um som, são usadas para exibir uma tabela de dados. Usamos uma tabela aqui na página de detalhes do produto para traçar linhas de dados sobre quaisquer descontos disponíveis para compra em massa. Tabelas podem ser usadas para basicamente qualquer tipo de dados que você deseja organizar em linhas e colunas. No passado, as tabelas estavam sendo usadas para colocar um site. Por exemplo, podemos organizar todo o nosso conteúdo que vemos nesta página em colunas e linhas. Isso agora é desencorajado, pois há mais alternativas CSS disponíveis agora, especialmente desde grid e flexbox, que abordaremos neste curso. Tabelas sempre têm um lugar valioso e agora é um dados de exibição, como texto ou números, ou até mesmo imagens de uma forma estruturada. Vamos dar uma olhada nos detalhes do produto para um arquivo HTML, então volte para o editor de texto e, em seguida, vamos abrir este arquivo. Vamos descer para os produtos, então fora da barra lateral e para a área principal. Tais como fazer um pouco de espaço logo após o produto, mas ninguém é seção principal aqui. Em seguida, podemos abrir nossos elementos de tabela, que tem a tag de abertura e fechamento, e é assim que criamos a tabela. Se olharmos para esta tabela a partir da versão final, apenas aqui em baixo, temos duas linhas de dados. Linhas podem ser criadas usando tags precisa TR, que significa linha da tabela. Vamos em frente e adicionar estes dentro da nossa mesa. No nosso caso são TR. Então vamos adicionar uma segunda linha da tabela logo abaixo. Cada item ou cada célula para cada linha é cercado pelas tags TD, que significa dados de tabela. Em nossa primeira linha, tivemos quantidade 1, 2-3, 5-10, ou 10 mais. Você pode adicionar isso dentro da primeira linha. Temos TD. O primeiro foi quantidade, depois vendido na primeira linha da tabela, adicionar algumas novas tags TD de uma. Então 2-3, 5-10, e finalmente, 10 mais, aperte que “Salvar”. Agora vamos para o navegador e garantir que abrimos nosso próprio projeto. Eu vou para a nossa pasta de projeto aqui, e então nós podemos abrir estes índices ou HTML. Claro que o nosso parece muito diferente porque ainda não adicionamos nenhum CSS. Mas ainda podemos clicar nos links. Vamos até o controle do jogo para abrir esta página de detalhes do produto. Aqui está a nossa primeira fileira, basta explodir os produtos. Voltar para o editor de texto. Podemos fazer isso mais uma vez para a linha de preço. Logo abaixo do primeiro TR, podemos adicionar pequenas tags TD. Desta vez, o primeiro foi o preço, então 7995, e este um pouco mais barato, digamos 7895. Cada um destes corresponderá com o número ajustável. TD novamente, digamos 7695. Poderíamos adicionar 7495 lá dentro, apertar “Salvar”. Voltar para o navegador e recarregar, e agora tem duas linhas e dados. É HTML com adicionado para o conteúdo do site, é exatamente o mesmo tanto para a nossa versão até agora e também para a versão final que vimos antes. O estilo CSS realmente desempenha um grande papel em um olhar e sentir sites. Muitos atributos de tabela, como align na cor do plano de fundo. Mas sendo obsoleto em HTML 5, que agora famoso estilo com CSS. Costumávamos fazer coisas como adicionar bordas e alinhar texto dentro da tabela, assim como esta. Quando eu adiciono atributos de uma placa, configurá-lo com um pixel de largura, poderíamos alinhar o texto dentro do centro, salvar isso, e recarregar. Mesmo que seja atualmente funciona no meu navegador, novamente, é recomendado fazer styling usando CSS. Também podemos substituir TD por TH. Isto é para o cabeçalho da tabela que faz um conteúdo negrito. Isso é útil para a linha superior desta tabela, que é a quantidade. Vamos em frente e substituir a linha de cima por TH. Estas trocas TDs para ser TH. Faça isso em todos eles, que cresceu além disso um por um e substituir TDs por THs, e um para fazer agora nos dar salvar e vamos ver o efeito que isso tem. Agora temos a linha superior como sendo ousado porque este é um título de tabela. Esta é a configuração básica da tabela. Mas podemos ir ainda mais longe e adicionar um pouco mais de estrutura a esta tabela se dermos uma olhada na versão final. Vamos para os detalhes do produto e abrir uma nova guia. Se olharmos para esta tabela aqui, assim como documentos HTML, podemos dividi-lo em um cabeçalho, um corpo e uma seção de rodapé. A linha superior com a quantidade pode ser usada para o cabeçalho. Os dados de preço podem então ser o corpo. Nós não temos um bom uso para as tags de rodapé em seu exemplo, mas eles estão lá se precisarmos deles. Também trabalhando em uma legenda no topo da tabela, que adicionamos aqui, compramos em massa e economizamos. Vamos ao projeto e dar uma chance a isso. Primeiro, podemos ter os títulos da tabela com cabeça T. torno desta linha da tabela, podemos adicionar um novo elemento da cabeça T. Então podemos revestir nossa primeira fila de mesa,
sobre isso, e colá-la de volta dentro da seção da cabeça da mesa dele. Então podemos cercar os preços com corpo T para esta seção de corpo. Nosso corpo T lá dentro, e copie esta linha da tabela e cole-a na seção do corpo. Poderíamos adicionar mais linhas para, se necessário, ou até mesmo uma área de rodapé com um pé T, ambos. Agora vamos manter isso salvar e recarregar o navegador. Não vemos nenhuma alteração no conteúdo. Mas agora nossa tabela tem uma estrutura mais descritiva, assim como quando olhamos para elementos semânticos no início. Agora para a legenda, que funciona como um cabeçalho para a tabela, que é este texto apenas aqui. Vamos voltar para o topo da tabela, logo abaixo dos elementos da tabela de abertura. Nós podemos adicionar nossa legenda aqui dentro, e então ele adiciona textos exatamente como fazemos com as tags T. Compre em massa e economize. Em seguida, volte para a página de detalhes e recarregue. Agora, como nosso texto na parte superior, você pode ver que este texto está centralizado na tabela por padrão. A última coisa que quero mostrar a vocês por enquanto, com tabelas são os atributos colspan. Podemos adicionar isso a uma célula como TD ou
TH para fazer essa célula particular a largura de dois ou mais. Se você estiver familiarizado com o Microsoft Excel, isso é o mesmo que mesclar células em uma linha. Vamos dar a isso um ir dentro da seção de cabeçalho, para começar fazendo uma extensão de quantidade em duas células. A quantidade TH, podemos ter os atributos colspan, e chateado é igual a dois. Atualize e agora a quantidade abrange a largura das duas células abaixo. Poderíamos fazer o mesmo dentro do corpo pelo preço. Adicionar colspan é igual a dois. Agora, o preço também ocupa a largura de duas células também. Vou remover rapidamente o que não precisamos para este projeto. Não precisamos destes gin Colspan. Podemos precisar da mesa padrão por enquanto. Remova esses dois. Nós também não precisamos dessa borda, e as propriedades de alinhamento também, é
isso agora, mas eu vou primeiro olhar para tabelas HTML. Em seguida, passaremos para a captura de formas de onda de entrada do usuário.
23. Formulários no HTML (formulários, tabelas e iFrames): Neste vídeo, vamos olhar para uma parte importante dos sites que são formas. Vocês provavelmente já usaram algo assim, o que vocês vêem aqui. Se você for para a versão final e clique na página entre em contato conosco. Este é um formulário que é usado para obter a entrada de um usuário, como coletar informações para registrar ou enviar uma mensagem. Os dados inseridos geralmente são enviados para um servidor web e vamos olhar para este lado das coisas mais tarde no curso. Por enquanto, porém, estamos apenas focando neste lado HTML, que é usado para exibir o formulário na tela. Vamos começar a trabalhar na página de contato conosco para que possamos começar a adicionar nosso formulário. Nós já adicionamos um arquivo HTML ponto de contato apenas aqui. Podemos começar a adicionar nossa forma a isso. Podemos começar adicionando nossa estrutura. Vou começar copiando o conteúdo dos detalhes do produto para um HTML. Copie e, em seguida, cole isso no lugar do texto que vamos adicioná-lo aqui. Você pode, claro, digitar isso para mais prática, se preferir. Mas eu só vou colar isso para fazer as coisas se moverem em formulários. Para manter o nosso site consistente, podemos reutilizar o mesmo cabeçalho e barra lateral. Este cabeçalho pode ficar, e toda a seção lateral pode ficar também, mas eu vou remover a maior parte da seção principal além deste cabeçalho. Vamos até o fundo da mesa. Em vez de detalhes do produto para o título de nível dois, vou adicionar um título de contato conosco. Agora, temos esta seção principal clara para adicionar um formulário. Vamos tentar e salvar isso. Se voltarmos para o navegador dentro de nossos projetos, vamos tentar clicar em entrar em contato conosco. Agora, estamos neste ponto de contatos HTML. Ainda temos o título e também a barra lateral, mas nenhum outro conteúdo principal. Dentro desta seção principal, podemos adicionar o nosso formulário. O formulário está contido dentro de um elemento de formulário. Vamos adicionar isso aí. Muitas vezes, você verá alguns atributos dentro desta tag de abertura de formulário, como ação. Assim mesmo, e também método. Voltaremos a eles mais tarde no curso, pois eles estão relacionados à forma como enviamos nossos dados de formulário para o servidor. Mas eu só queria que você estivesse ciente deles se você os encontrar em qualquer documentação. Ação é usado para definir o local onde o formulário deve ser enviado para. Nós adicionamos um caminho de arquivo dentro de lá, e método define qual método HTTP queremos usar para enviar um formulário. Podemos enviar como um get ou um pedido post, mas mais sobre isso mais tarde. Por enquanto, eu quero me concentrar em obter algumas entradas na tela. As entradas são as entradas do usuário de captura de som, como texto, que é inserido, ou uma caixa de seleção quando o usuário clica nele. Vamos começar com uma entrada de texto para o nome do usuário. Podemos adicionar um elemento de entrada. Assim, existem muitos tipos diferentes de entradas e nós os definimos usando os atributos de tipo. Vamos adicionar o primeiro de texto e vamos para os nossos projetos e, em seguida, atualizar. Há o nosso texto de contato na parte inferior e uma entrada de texto. Esta é apenas uma caixa simples onde você pode inserir qualquer tipo de texto que queremos. Na verdade, não estamos restritos a apenas texto, podemos até digitar números e caracteres diferentes também. Podemos adicionar algum texto antes ou depois dele também, para que o usuário saiba o que inserir, como seu nome. Vamos fazer isso agora. Pouco antes de eu vou adicionar o texto do nome,
em seguida, recarregar e há o nosso texto na tela como esperado. Se dermos uma olhada, porém, nesta versão final, podemos ver dentro da entrada de texto que temos algumas instruções de texto fracas. Isso é removido quando o usuário clica na caixa de texto e começamos a digitar. Esse texto é adicionado com os atributos de espaço reservado. Vamos voltar para as nossas entradas. Logo após os atributos de tipo, podemos adicionar um espaço reservado e, em seguida, podemos adicionar o nosso texto para lá de, digite seu nome e esse é o nosso texto dentro de lá. Em seguida, queremos que o usuário insira seu endereço de e-mail, que é apenas aqui. Nós lidamos com isso da mesma maneira, mas desta vez a entrada tem um tipo de e-mail. Sob uma nova linha, podemos adicionar e-mail
e, em seguida, adicionar nossas entradas. Desta vez com um tipo de e-mail. Isso também pode levar o atributo de espaço reservado de inserir seu e-mail. Dê isso um salvamento, e depois atualize e há o nosso para formar elementos lado a lado. O próximo tipo de entrada é a área de texto. Isso é usado quando queremos que uma caixa maior digite mais texto para áreas como uma mensagem. Vamos adicionar isso em uma nova linha. Primeiro de tudo, os textos da mensagem, e então desta vez em vez das entradas, usamos a área de texto. Isso tem tags de abertura e fechamento, ao contrário dessas entradas. Aqui dentro também podemos adicionar alguns atributos extras para este também. Podemos definir o número inicial de colunas de largura que queremos que a caixa seja. Vamos adicionar os atributos de chamadas e eu vou definir o meu para ser 30. Também o número de linhas também para a altura. Vou definir o meu valor inicial para cinco. Áreas de texto muitas vezes podem ser arrastadas maiores e menores com uma pequena seção de arrastar no canto. Atualize o navegador e há nossa área de texto maior, na
qual podemos adicionar várias linhas de texto. Como eu mencionei antes, também podemos clicar na seção
no canto e torná-la maior ou menor. Lembre-se anteriormente no curso que mencionamos podemos categorizar a maioria dos elementos em nível inline ou bloco. Podemos ver claramente que aqui os elementos do formulário estão alinhados. Se você quiser que eles vão em sua própria linha, empilhados em cima do outro, podemos cercá-los em uma div, que é um bloco elementos nível e isso nos
dá o efeito que vemos na versão final aqui. Dentro do formulário, vamos adicionar alguns elementos div. Isso tem o nome, vou colar isso. Segunda div para o e-mail e , finalmente, uma terceira para a mensagem, cole isso. Em seguida, recarregue e agora, todas as três entradas em sua própria linha separada. Este é um bom começo para a nossa forma e continuará no próximo vídeo.
24. Rótulos, nome e id (formulários, tabelas e iFrames): No último vídeo, adicionamos alguns elementos básicos de formulário à página. Além disso, adicionamos o texto de Nome, E-mail e Mensagem à esquerda de cada entrada. Informe ao usuário quais informações devem ser inseridas. Este é apenas texto simples sem outros elementos HTML, como uma tag p, que você pode ver aqui. Também não há como o navegador saber que esses textos estão relacionados a essas entradas. Podemos corrigir isso adicionando um rótulo. Um rótulo é apenas uma forma de adicionar uma legenda de textos a cada entrada como esta. Vamos primeiro cortar este texto, e depois podemos adicionar o nosso rótulo aqui dentro. Entre aberto e fechado e horários que agora podemos colar nosso texto de volta, dar que salvar e recarregar o navegador. Podemos ver instantaneamente que se olharmos para esta primeira entrada, parece praticamente o mesmo de antes. No entanto, o navegador agora sabe que esta é uma legenda para um elementos de formulário. Mas como ele sabe que este rótulo é para essas entradas em particular e não para o E-mail ou Mensagem? Bem, nós podemos vinculá-los adicionando um atributo id. Esta primeira entrada, apenas fora do espaço reservado, podemos adicionar um atributo id e isso pode ser um nome de nossa escolha. Eu quero nomear este Nome, para mantê-lo simples. Em seguida, no rótulo, dentro da tag de abertura, podemos adicionar os quatro atributos e vinculá-lo ao id com o mesmo nome. Este atributo id não é apenas para uso com um rótulo, é importante para direcionar esses elementos individuais com JavaScript e CSS, também. Vamos agora fazer o mesmo para o Email. Logo após o espaço reservado, o ID de e-mail, eu vou sair em um rótulo. Recorte o texto
e, em seguida, cole-o novamente. Em seguida, podemos adicionar o atributo for dentro aqui de e-mail. Então, por último, podemos adicionar isso à área de texto também. Logo após as linhas, adicione o id e novamente poderia ser o nome de sua escolha, mas eu vou chamar minha Mensagem. Recorte o texto e, em seguida, adicione como rótulo. Finalmente, o atributo for, e esta é a Mensagem Dois, e salve isso. É importante não ter o mesmo nome de ID mais de uma vez em documentos da Web. Nós temos cluster este propósito e vamos cobrir isso em mais detalhes em breve, então certifique-se, ele é salvo e, em seguida, sobre o navegador, recarregar e,
claro, não vemos diferença, mas estes todos agora ligados também nos bastidores para o navegador da web. Uma outra vantagem de usar um rótulo é que o rótulo também é clicável. Em vez de antes, quando só podíamos clicar nesta entrada para tornar ativo, se clicarmos fora, também podemos clicar no nome também. Isso também torna a entrada ativa, para que o usuário possa começar a digitar. Outro atributo que você verá normalmente é um nome atributos. Vamos passar para o nosso editor de texto e dentro desta primeira entrada, podemos adicionar um nome e vamos chamar este Nome. mesmo para o e-mail, nome = e-mail e também a área de texto da mensagem. Podemos ser confundidos primeiro, por que temos esse nome e também os atributos id e isso é compreensível. Eu não vou entrar em muitos detalhes ainda, como muito disso pode não ficar claro até que nos familiarizemos com scripts java e também processando formulários no servidor. O atributo id que adicionamos primeiro, geralmente
é usado para referenciar os elementos, no nosso caso as entradas. É uma maneira de agarrar o elemento com JavaScript ou CSS. O atributo Name, no entanto, é mais útil quando enviado formulário para o Servidor Web. Este nome é usado para fazer referência aos dados que o usuário
inseriu dentro dos campos de entrada apenas aqui. É uma maneira de tirar esses dados de lá. Se isso ainda não fizer sentido, não se
preocupe, veremos muito mais à medida que passarmos por este curso. No entanto, por enquanto, continuaremos a analisar mais tipos de entrada no próximo vídeo.
25. Caixas de seleção e botões de rádio (formulários, tabelas e iFrames): Outro tipo de entrada comum que você provavelmente já usa antes é uma caixa de seleção. Checkbox, assim como temos aqui, permite que o usuário marque mais de uma caixa por vez. Aqui permitimos que um usuário assine ofertas por newsletter, e-mail ou postagem, então vamos ver como podemos fazer isso em um editor de texto. Assim como antes, eu vou adicionar um envolvente
uma tag div e ter certeza que isso ainda está dentro deste formulário elementos aqui. Abra as tags div para tornar este nível de bloco. Então nós podemos adicionar algumas tags p para o texto na parte superior e o texto vai ser exatamente o que dizemos aqui de assinar ofertas futuras comprar. Em seguida, um cólon no final. Também podemos usar um rótulo para esta caixa de seleção, então adicione-os primeiro. Logo abaixo do p, vamos adicionar nosso rótulo e assim como antes, adicionamos os quatro atributos. Vou chamar isto de boletim informativo, que podemos ligar para a identificação em breve. Em seguida, adicione a newsletter dentro da tag de abertura e fechamento. Logo depois disso, podemos adicionar nossa entrada, como vimos anteriormente. Esta entrada tem o tipo de caixa de seleção. Em seguida, nós damos a ele o ID para vincular a este boletim apenas aqui. Dê esse salvamento e teste dentro do navegador
indo para a nossa página de contato e, em seguida, atualize. Há o nosso texto entre as tags, p logo no topo. Em seguida, ter o rótulo da newsletter, e você também pode ver que podemos clicar nesta caixa de seleção e também desclicar. Agora temos uma caixa de seleção que você pode clicar e desligar. Agora podemos adicionar isso em mais duas vezes para as opções de e-mail e postagem. Vamos fazer exatamente o mesmo. Primeiro, podemos adicionar um rótulo e o rótulo para, vamos chamar isso para e-mail. O nome do e-mail e a entrada com um tipo novamente de caixa de seleção, o ID de e-mail e fecha. Em seguida, o nosso terceiro e último, este vai ser rótulo para postar. Desliga com o rótulo de texto da postagem dois e a entrada final da caixa de seleção. Tipo de caixa de seleção e um ID de post, em seguida, eu fechar. Vá para o navegador e como nosso boletim informativo, e-mail e post. Há também mais alguns atributos que devemos adicionar também. No momento, essas caixas de seleção gratuitas estão próximas umas das outras na página, ambas não relacionadas. Podemos efetivamente ligar se quisermos, dando-lhes todos os mesmos atributos de nome. Este é um atributo de nome que vimos no último vídeo, que foram adicionados apenas aqui. Vamos fazer o mesmo para a nossa entrada com um tipo de caixa de seleção. O nome, eu vou chamar isso de assinatura. Vou copiar isto e adicionar o mesmo mais duas vezes. Este nome atributos, como mencionado no último vídeo, significa que quando enviamos este formulário para o servidor, esses valores da entrada também serão passados. Com caixas de seleção, não podemos digitar um valor como poderíamos com o texto ou entrada de e-mail, então podemos adicionar um valor atributos em exatamente como este. O valor, e este pode ser o boletim informativo. Este é um dado que é passado para o servidor uma vez que ele envia, modo que o valor para o segundo, de e-mail e também o valor de post. Cada vez que o formulário é enviado, o servidor receberá o valor de boletim informativo, e-mail ou postagem, qualquer que seja clicado. Uma das principais coisas a saber está aqui, é que você pode verificar quantos quiser. Podemos clicar dentro e fora de qualquer um desses. Esta é uma diferença fundamental entre caixas de seleção e botões de opção, que vamos analisar a seguir. Se formos todos para a versão final, já
fizemos essas caixas de seleção gratuitas que vemos aqui. Mas logo abaixo disso temos : “Como você gostaria que nós respondêssemos?” Você pode ver esses botões de rádio, mas só podemos clicar em
um de cada vez e essa é a principal diferença entre rádio e caixas de seleção. As entradas de rádio são adicionadas de forma semelhante a essas caixas de seleção. Vou adicionar um div circundante. Novamente, verifique se isso ainda está dentro do formulário. Então aqui dentro, o p vezes no topo para o texto de como você gostaria que nós respondêssemos, com um ponto de interrogação no final. Então podemos ir em frente e adicionar nossos rótulos. Isso também tem os quatro atributos, para que possamos vinculá-lo. Quero chamar este de resposta telefônica, fechá-lo e adicionar o rótulo do telefone. Então vamos em frente e adicionamos nossas entradas. Desta vez com o tipo de rádio e também o ID da resposta do telefone, para coincidir com isso. Adicione isso também e eu fecho isso. Então só precisamos de mais um para o e-mail. Primeiro de tudo, o rótulo e desta vez pode ser resposta de e-mail. Isso é mantê-lo consistente com a resposta do telefone acima. Feche isso e pergunte o rótulo do e-mail, em seguida, entradas, tipo de rádio e estes ID de resposta de e-mail. Feche isso, bom. Eu usei resposta telefônica e resposta de e-mail aqui em vez de telefone ou e-mail, porque já temos ID de e-mail em sua página, que vamos usar logo acima. Lembro-me que dissemos antes que os IDs deveriam ser únicos e usados apenas uma vez na página, então vamos dar que salvar e testar dentro do navegador, volta ao nosso projeto atual e recarregar. Assim como dois botões de rádio na parte superior. Mas uma coisa que você percebe é que se
clicarmos neles, podemos ver que ambos não podem ser verificados ao mesmo tempo, então este é um comportamento diferente do que esperávamos, do que vimos antes na versão final. Parece que conseguimos selecionar ambos os botões de rádio ao mesmo tempo. Isso ocorre porque, assim como caixas de seleção, precisamos também agrupar estes com um atributo de nome, então vamos adicionar o nome em cada entrada, então vamos chamar essa resposta e o segundo nome de entrada é igual a resposta. Agora está ligado entre si. Vamos testar isso atualizando e tentar os dois. Agora só podemos selecionar um valor de cada vez porque aqui está um grupo juntos. Finalmente, podemos adicionar um valor atributos para também enviar para o servidor também. O valor desta vez pode ser telefone, e o valor para o segundo será e-mail. Você também pode ver caixas de seleção com um valor de true e false também. Se houver apenas duas opções, como uma entrada de assinatura, que é um simples sim ou não. Então um verdadeiro ou falso pode ser um bom caso de uso para isso. Em seguida, vamos passar para outro tipo importante de entrada, que é select.
26. Selecione a entrada (formulários, tabelas e iFrames): O próximo tipo de entrada que eu quero mostrar, é a caixa de seleção. Esta entrada basicamente permite uma lista suspensa e várias opções, que o usuário pode selecionar, e podemos ver isso apenas aqui. Se descermos até o Assunto aqui, podemos clicar sobre isso. Serei presenteado com vários diferentes. Agora este é um tipo ligeiramente diferente de caixa de seleção, que vamos olhar agora, mas vamos começar neste tipo em breve. Primeiro de tudo, eu só vou arrumar as coisas um pouco dentro de todas as formas e separar nossas seções para que elas fiquem mais claras. Vamos ter nossa seção de nomes e adicionar algum espaço entre cada div, agora podemos fechar a caixa de seleção também. Todos eles agrupados assim, e então vamos agrupar nossa seção de resposta de e-mail e telefone. Agora estes são todos os grupos, vou adicionar a nossa seleção logo abaixo da área de mensagem. Esta é a nossa área de mensagens aqui, então vamos criar algum espaço e também criar nossa seção div para isso. Desta vez, use o elemento select em vez de uma entrada. Adicione a seleção assim. O seleto, assim como todos os outros. Eu vou dar uma identificação, e vamos chamar isso de assunto. A caixa de seleção vai adicionar uma lista de opções que o usuário pode selecionar como assunto da mensagem, bem
como a seleção, nós também podemos adicionar um rótulo também. Porque temos o atributo ID, também
podemos adicionar o atributo for de assunto
e, em seguida, um texto dentro do assunto também. Dentro daqui, cada item na lista suspensa é encapsulado em um elemento de opção, e isso vai entre as tags selecionadas. Antes de fazermos isso, vamos verificar isso no navegador. Diz nosso rótulo de Assunto, e você pode ver que temos a entrada aqui. Se clicarmos nele, ainda não temos nenhuma opção para selecionar, então vamos adicioná-las com nossos elementos de opção. Vamos adicionar o primeiro aqui,
e dentro aqui podemos adicionar o nosso texto que aparecerá dentro da caixa de seleção. O primeiro pode ser retorna, vamos ver isso em ação, diz retorna apenas lá. Também podemos adicionar um valor. Este atributo de valor nos permitirá passar um valor de seleção com o formulário quando o enviarmos. O valor deste pode ser retornos, e então vamos apenas copiar e colar isso em mais algumas vezes. Este pode ser item defeituoso, e um valor de opções de item defeituoso, e eu vou usar um sublinhado apenas em vez de ter um espaço aqui. O próximo para informações de entrega e o valor da entrega. Este pode ser para rastreamento de pedidos. Em seguida, uma opção de conselho. Então, finalmente, vamos adicionar mais um e isso pode ser outro. Guarde isso e vamos entrar no navegador. Recarga e, em seguida, clique em nossa seleção. Aqui somos apresentados com uma lista de todas as opções que adicionamos dentro do Select. Por padrão, só podemos selecionar um desses valores de cada vez. Assim que clicamos nisso, o Select é então recolhido. Se quisermos selecionar mais de um, podemos adicionar um atributo múltiplo para a tag de seleção de abertura. Logo após o ID, podemos adicionar vários, e então vamos passar por cima, recarrega, e podemos pressionar Command ou Control para selecionar mais de um valor. Vou remover isto por enquanto, já que não precisamos disto dentro do nosso projecto. Mas é útil saber que está lá. Também podemos agrupar todas as opções relacionadas. Em vez de ter apenas uma longa lista, podemos usar o elemento optgroup para agrupar certos assuntos relacionados. Devoluções e item defeituoso, vou agrupar juntos. Eu vou cortar ambos os valores para fora,
e, em seguida, usar o elemento optgroup e, em seguida, eu posso colar estes de volta dentro. Precisamos então dar a este optgroup um rótulo, e este é o texto que aparecerá na tela acima
de ambas as seções de grupos e você verá isso mais claramente em apenas um momento. Vou adicionar o texto dos problemas do produto e salvar isso. Vamos ver como isso parece. Se expandirmos, vemos no texto fraco na parte superior que temos problemas de produto, que é o rótulo que adicionamos, e então ligeiramente deslocado para a direita, temos nossos dois itens agrupados aqui. Em seguida, temos informações de entrega e rastreamento. Estes podem ser agrupados em entrega. Vamos cortar essas duas opções e adicionar nosso grupo de opções
e, em seguida, colá-los novamente. O rótulo de texto para este pode ser Entrega. Em seguida, na parte inferior, podemos agrupar conselhos e outros em um grupo Outro. Mais um optgroup, cole estes dois últimos em,
e, em seguida, o nosso rótulo simplesmente de Outro. Agora temos todos os três grupos de opções separados, eles devem agora ser exibidos no navegador. Recarregar, abrir isso, e agora temos três grupos diferentes ao todo. Observe que também não é possível clicar nesta etiqueta em Problemas de Entrega, Outros e Produtos. Isso é simplesmente lá para obter informações. Agora temos a nossa caixa de seleção no lugar. Agora vamos olhar para uma edição mais recente para formulários html, que é a lista de dados, e vamos dar uma olhada nisso a seguir.
27. Lista de dados e envio (formulários, tabelas e iFrames): Quero agora mostrar-lhe o datalista. Datalist é um dos elementos de formulário mais recentes disponíveis. Devido a isso, portas de navegadores estão presentes é um pouco mais limitado no momento da gravação. Podemos ver isso indo para um site chamado caniuse.com. Tudo o que preciso fazer é digitar o datalista no topo aqui. Em seguida, role para baixo e você pode ver uma lista dos navegadores suportados. Podemos ver pela cor que as versões posteriores do Chrome são verdes e é totalmente suportado. No entanto, algumas das versões anteriores do Safari e também Safari no iOS, ele não é suportado. Se dermos uma olhada no Internet Explorer e também Edge e Firefox também, podemos ver que a luz verde indica alguns pontos parciais. Portanto, precisamos ter cuidado ao usar datalist. No entanto, é útil saber como será uma boa opção para usar uma vez que o ponto do navegador alcança. Os datalistas podem ser usados no lugar de uma caixa de seleção do último vídeo, onde a caixa de seleção é uma lista suspensa para selecionar uma opção. Datalist é mais uma caixa de texto onde o usuário pode digitar em. Então podemos ver algumas sugestões abaixo. Se formos para a versão final e para a página de contato, este é um datalista aqui. Se clicarmos no menu suspenso, ainda
temos todas as opções que vimos no último vídeo que você pode selecionar. Ou podemos usar isso como uma caixa de pesquisa. Podemos filtrar se você tiver muitas opções diferentes. Vamos começar de novo no Visual Studio Code. Vou comentar esta div completa que criamos no último vídeo. Esta é uma div que envolve toda a caixa de seleção. Se você estiver usando o Visual Studio Code, você deve simplesmente ser capaz de realçar e pressionar “Command or control”, pressionar “Forward barra” e isso irá comentar as fotos da seção. Caso contrário, só precisamos digitar manualmente
a seção de abertura e a seção de fechamento abaixo dela. Então vamos em frente e construir nossa div, assim como fizemos antes. Então podemos adicionar um rótulo. Etiqueta novamente vai ter os quatro atributos de assuntos,
e, em seguida, assunto dentro aqui. Estamos basicamente construindo a mesma coisa que fizemos para a caixa de seleção. Desta vez, adicionamos uma entrada com o tipo de textos. A razão pela qual estamos adicionando uma entrada de texto é para exibir a seção aqui, o usuário pode digitar nela. Vamos dar a isso um ID de assuntos novamente para muito esses atributos aqui. Em seguida, o espaço reservado no final do insira seus assuntos e feche. Esta é apenas uma entrada de texto simples para começar. O usuário tem uma caixa de texto para digitar. Em seguida, abaixo disso, podemos adicionar nossa lista de dados com tags de abertura e fechamento para esses elementos. Então podemos adicionar uma opção aqui dentro. Isso só tem a tag de abertura, e também adicionaremos um valor atributos de retornos. Então vamos copiar e colar o mesmo mais algumas vezes. Em seguida, podemos adicionar o item defeituoso. Item defeituoso e, em seguida, o terceiro é a entrega, antes de quatro foi pedido caminhão. O quinto foi um conselho e o último foi outro. Para o navegador. Ele recarrega e vai até os sujeitos. Vamos começar a adicionar algum texto aqui dentro. Se digitarmos dentro das entradas, não
vemos nenhuma das opções aparecendo abaixo, como vimos na versão final. Isso ocorre porque temos uma entrada de texto simples e também temos uma lista de texto abaixo dele, mas ainda não os vinculamos juntos. Para vinculá-los, primeiro precisa adicionar um ID à lista de dados. Assim como todas as identidades ficam abertas por dentro. Vamos chamar isso de assuntos. Em seguida, entradas de texto acima, que listas se conecta com os atributos da lista. Claro que isso precisa ser assuntos corresponde ID abaixo. Dê um salvar e deixe testar isso. Aperte “Atualizar” e também vemos essa seta suspensa aparecendo, parece que está funcionando enquanto eu tento deixar conselhos e que tudo parece funcionar. É assim que usamos a lista de dados. Novamente, tenha cuidado ao usar uma verificação de compatibilidade do navegador. Se você estivesse procurando incluir isso dentro de um projeto. Ambos coisa desconhecida, é uma forma agradável elementos são especialmente úteis, para filtrar um grande grupo de opções. Estas são todas as entradas de formulário agora em exibição em nosso site. Nós só precisamos de uma maneira de enviar este formulário e, como você pode imaginar, fazemos isso com um botão de enviar. Submeter também é uma entrada, mas desta vez pedimos o tipo de envio. Vamos adicionar isso no final do nosso formulário. Logo acima da tag do formulário de divulgação. Podemos escrever isso em uma div 2, em
seguida, adicionar nossas entradas com o tipo de enviar. Guarde isso e vamos checar isso. Claro que isso está bem na parte inferior temos o nosso botão de enviar apenas aqui. Esta é uma bomba que irá realmente enviar os dados no formulário para o servidor. Lembre-se de tudo isso não vai funcionar no momento porque HTML apenas exibir o conteúdo. Mas voltaremos para enviar formulários mais tarde no curso, quando estivermos mais familiarizados com o desenvolvimento web back-end. Mas uma coisa que você vai notar quando clicarmos no botão “Enviar” antes, nós vamos levá-lo de volta para a mesma página. Se você olhar para os fins deste URL, temos nome igual a não branco, e e-mail é igual a nenhum valor e mensagem é igual a nenhum valor. Isso ocorre porque adicionamos o nome do nome, e-mail e mensagem no HTML. Isto estava aqui, nome, e-mail e mensagem. É por isso que somos adicionados o atributo name antes, e estes são os dados que serão enviados para o servidor. Vamos fazer um julgamento rápido, se adicionarmos Chris. Em seguida, test@test.com, em seguida, mensagem aqui, se descermos e clicar em “Enviar”, então
verá esta informação está agora na barra superior. Nosso nome é Chris, e-mail é igual a teste e mensagem é igual ao nosso texto, qual usuário o adicionou. Vamos deixar isso por enquanto e, claro, voltaremos a isso mais tarde. O que sabemos mais sobre como funciona o desenvolvimento de back-end. Nós também poderia substituir este botão por um HTML elementos botão. Isso também leva um tipo igual a enviar. Lá no fundo. Vou pôr isto aqui. Vamos apenas comentar isso. Em seguida, podemos adicionar aos elementos de botão apenas como que com o tipo de enviar. Isso é algo que você verá muitas vezes. Uma vez que tem o tipo de enviar, também
irá enviar o formulário assim como esta entrada vai fazer acima. Foi o mesmo e confira isto no navegador. Parece uma pequena diferença. Só temos um botão simples sem mensagens. Não vemos nenhum texto de envia isso porque como sobre elementos com uma tag de abertura e fechamento, precisamos adicionar nosso texto dentro. Entre estes podemos adicionar um texto todos enviar. Agora vou ver o texto dentro do botão. Esta é, na verdade, uma das principais diferenças ao usar uma entrada ou um botão desta forma, entradas têm texto padrão de enviar, mas nossos botões, você está no controle ou o texto dentro do botão. Então pode ser qualquer coisa que você quiser. Chat tem enviar mensagem e você verá isso refletido no navegador. Por agora eu vou comentar esses botões e manter no lugar as entradas que você tinha a partir do formulário. Novamente com comando ou controle e uma barra para fora de dados comuns. Você também pode se deparar com um botão de reinicialização, colocado ao lado do envio, como este. Em vez do tipo de envio. Você também pode ver o tipo de redefinições e isso é usado para limpar qualquer um dos textos das entradas que adicionamos. Tínhamos uma mensagem aqui dentro. Você pode clicar em “Redefinir”. Isso limpará todas as entradas de formulário de volta para como estavam. Este é o conteúdo do nosso formulário agora preenchido. Mas no próximo vídeo, quero mostrar mais alguns tipos úteis de entradas.
28. Outros elementos úteis de formulário (formulários, tabelas e iFrames): Embora o nosso formulário agora está completo para esses projetos, eles ainda alguns outros tipos de entrada úteis que você deseja mostrar-lhe. Eu vou adicionar estes como um novo formulário elementos, para mantê-los separados do que vamos manter do resto do projeto. Vamos até o nosso site de fechamento e formulários aqui e, em seguida, vamos abrir um novo conjunto de elementos de formulário aqui. Assim, alguns outros tipos de entrada úteis incluem número. Isto tem os elementos de entrada e desta vez eu vou adicionar um tipo de número. Um dos benefícios de usar o número, se atualizarmos, vemos que aparece aqui, é que ele restringe a entrada do usuário a esses números. Se clicarmos sobre isso e tentarmos adicionar algumas letras ou palavras aqui dentro, estes não estão tendo nenhum efeito, mas podemos, claro, adicionar alguns números, que você pode ver aqui. Há também o para cima e para baixo do lado direito, que podemos usar para subir e descer através dos números. Em seguida, se você quiser pedir a senha do usuário, faz sentido fazer isso com uma entrada com o tipo de senha. Isso tem os benefícios de olhar para fora a senha. Se escrevermos a nossa palavra-passe aqui dentro, vemos que não conseguimos ver nenhum dos caracteres que introduziu. Isso é útil para se alguém estiver atrás de você, ou passar, para que ninguém mais possa ver a senha que você digita. Há também um tipo de entrada de datas, que também temos acesso e como você esperaria, este é o tipo de entrada de data e isso é obviamente para todos os campos de data. Vamos dar uma olhada nisso em ação. Isso pode ser usado para quando pedir o aniversário de um usuário, ou, por exemplo, selecionar as datas, queremos ficar em um hotel, em um site de viagens. Se clicarmos nisso, temos as datas, o mês do ano. Também podemos controlar isso com o teclado, digitando para cima e para baixo, adicionar guia também alterna entre o dia, o mês e o ano. Também podemos clicar nesta seta suspensa e temos um campo de data onde podemos selecionar diferentes meses do ano. Então tudo o que precisamos fazer é clicar em uma das datas e o campo é preenchido automaticamente com a data em que clicamos. [ inaudível] essas entradas, é um pouco mais também que você pode olhar para cima on-line, mas eu vou mostrar-lhe mais alguns dos comuns, como cor. Altere o tipo para ser cor. Você provavelmente já viu este antes em vários sites, onde temos um seletor de cores. Se atualizarmos, veremos que a cor preta é padrão. Isso parece diferente em navegadores diferentes, então se você estiver usando algo como Edge ou Firefox, você pode ter um pouco diferente olhando no tipo de entradas aqui. Se clicarmos sobre isso temos um bom seletor de cores, este é claro, é o de maçã e o seu pode parecer um pouco de diferença. Nós clicamos em vários valores diferentes e escolhemos nossa cor a partir disso. Outro útil é o alcance. Então entradas com o tipo de intervalo, de
volta para o navegador. Range nos dá um controle deslizante, que um usuário pode mover através clicando nele e arrastando-o para a esquerda e direita. Por padrão, o controle deslizante está no meio, mas também há alguns atributos que podemos adicionar para alterar as coisas, podemos alterar o mínimo e também máximo. Então, se definirmos o mínimo para ser um e o máximo para 10, isso nos dá um intervalo de 1-10, que podemos arrastar entre eles. Agora podemos controlar a posição inicial do controle deslizante. Atualmente, como dissemos antes, ele começa no centro, mas podemos mudar a posição inicial definindo os atributos de valor. Então, se definirmos isso para ser um, apareceria no início. Vamos dar uma chance e agora vemos o círculo logo no início, se mudarmos isso para ser um valor de 10, ele apareceria bem no final e este é um tipo de entrada útil, particularmente quando começamos a aprender sobre JavaScript. Podemos usá-lo para coisas como definir o volume em um player de música. Então ele vai para cima e para baixo como o usuário de arrasta. O tipo de entrada final que quero mostrar neste vídeo é pesquisar. Tenho certeza que todos vocês já o usaram antes para procurar itens em um site. Isto é algo que poderia ser usado em nosso site, na seção de cabeçalho. Se você olhar para o site final aqui, olhar para o topo, nós temos um campo de pesquisa apenas aqui, eu vou agora remover o segundo formulário, que eu tenho andado brincando com ele e
trazê-lo de volta para cima e então podemos adicionar uma pesquisa para o cabeçalho. Então, se nós rolar de volta para o topo da página e para esta seção de cabeçalho, podemos adicionar isso logo após a nossa navegação. Temos um tipo de entrada igual a Pesquisa e também podemos adicionar um atributo de espaço reservado à Pesquisa, em seguida, fechar. Uma das diferenças entre esta e uma entrada de texto normal é que, depois de digitarmos algo, há um x que aparece para excluir o termo de pesquisa. Então eu vou mostrar o nosso principal agora, se nós atualizarmos, seguida, voltar para o topo, em
seguida,
começamos a digitar , vemos este x no lado direito, para limpar as entradas do formulário. Além disso, como acontece com outros elementos de formulário, o HTML fornece apenas uma caixa de pesquisa visual. Procurar por qualquer coisa no momento não funcionará, apenas com HTML sozinho. Também precisamos adicionar a caixa de pesquisa ao cabeçalho, na página de índice 2 e também os detalhes do produto. Se clicarmos na casa, não
vemos isso adicionado dentro daqui. Vamos copiar essas entradas da página de contato, primeiro vamos atualizar os detalhes do produto exatamente no mesmo local, perto o suficiente. Então, se abrirmos nossa barra lateral e entrarmos no index.html, podemos fazer o mesmo aqui. Vamos tentar isto. No Início, o Fale Conosco e também para clicar em um dos produtos, como o controlador de jogo. Vimos os detalhes do produto também terá a barra de pesquisa lá. Então agora devemos ter uma boa idéia, das diferentes maneiras que podemos coletar informações usando formulários e entradas. Espero que você tenha achado isso útil e eu vou vê-lo no próximo vídeo.
29. Iframes (formulários, tabelas e iFrames): Agora temos que nos afastar dos formulários e dar uma olhada no uso de iframes. O elemento iframe é usado para incorporar outra página HTML em um documento da Web. Como você vê aqui nesta página finalizada Contacte-nos. Também podemos incorporar uma página de outro provedor, como Google Maps, como fizemos aqui. Pode parecer um pouco estranho, mas eles ficarão mais claros quando os virmos em ação. Vamos ver isso na página contact.html. Vou adicionar um iframe dentro daqui. Vou acrescentar isto logo após a nossa secção de formulários. Vamos rolar para baixo e para a direita no final do nosso formulário, mas ainda dentro desta seção principal, podemos adicionar ao elemento iframe. Se dermos que Salvar e, em seguida, atualizar o navegador dentro do nosso projeto. Na verdade, precisamos ir para a página Fale conosco e, em seguida, role para baixo. Vemos um elemento iframe vazio na parte inferior. Para que isso mostre algo, precisamos adicionar um atributo fonte, assim como fizemos quando trabalhamos com imagens. O atributo de origem apontará para a página web que queremos incorporar. Isso pode ser tão simples quanto exibir em uma de nossas próprias páginas da web, como dados do produto. Vamos adicionar a fonte dentro daqui e link para o nosso product-detail.html. Vou dar o Save e vamos ver como está. Há nossa página de detalhes do produto dentro deste iframe ou dentro desta janela. Agora podemos rolar para cima, para baixo, para a esquerda e para a direita. Este iframe é um pouco pequeno demais para o conteúdo. Você também pode usar um atributo height e width para redimensionar o iframe. Vamos começar com a largura. Vamos para 800 e uma altura de 600. Esse valor está em pixels, então é um iframe de 800 por 600 pixels. Agora temos o iframe um pouco maior na tela lá. O iframe também pode ser usado para vincular a um site externo, mas somente se o proprietário do site permitir isso. Atualmente, a Wikipédia permite isso, e podemos ver digitando a fonte,
então, em vez de productdetail.html, vamos digitar o URL completo de https://wikipedia.org, e então dar um salvamento. Para o navegador, e podemos ver o site da Wikipédia incorporado. No momento, o Google não nos permite fazer isso. Vamos criar um link para google.com, atualizar e vemos apenas um iframe vazio. Precisamos ter cuidado com quais sites estamos vinculando e
certificar-nos de que isso é permitido. Também podemos adicionar algum conteúdo de fallback se o conteúdo incorporado não puder ser exibido. Isso pode ser adicionado entre a tag de abertura e fechamento do iframe. Vamos adicionar nosso tipo p a algum texto. Digamos que seu navegador não suporta iframes. Voltar aos nossos projetos, e recarregar. Não vemos nada diferente porque isso só é exibido se iframes estiverem desabilitados ou se for exibido em um dispositivo de leitura de tela para pessoas com deficiência visual. Também podemos incorporar conteúdo de outros sites se eles permitirem. O YouTube é um dos sites que nos permite incorporar um iframe em nossos projetos. Para fazer isso, podemos ir para youtube.com. Então tudo o que precisamos fazer é encontrar qualquer vídeo que queremos adicionar. Vamos fazer uma busca rápida por qualquer coisa. Eu quero procurar Elon Musk e clicar em qualquer um desses vídeos. Então o que precisamos fazer é clicar em Compartilhar. Se fores até aqui, há um botão de partilha. Clique sobre isso e, em seguida, clique em incorporar. Então podemos copiar este iframe que nos é fornecido. Podemos ver o fechamento e o iframe de abertura. Vamos copiar toda essa seção, voltar, e podemos adicionar isso no lugar do nosso iframe atual. Vamos remover isso e colar a versão do YouTube em vez disso. Dê isso um Salvar e agora de volta ao nosso projeto, clique em Recarregar e agora temos um vídeo incorporado no YouTube e controles de botão de reprodução na parte inferior. Este iframe também tem alguns atributos que ainda não vimos. Se rolar para a direita, vemos que temos Permitir tela cheia. Há também borda quadro, que tem um valor de zero ou um. Zero significa nenhuma borda e um meio para adicionar uma borda. Isso permite tela cheia como soa. Se removermos o atributo e, em seguida, passar por cima e reproduzir o vídeo, então clique em reproduzir, e se tentarmos clicar em tela cheia, podemos ver que tela cheia não está disponível. No entanto, a embalagem dos advogados nos permitirá fazer o vídeo em tela cheia mais uma vez. Nós jogamos e lá vamos nós então agora é um tamanho completo da nossa tela. Agora sabemos um pouco mais sobre iframes. No próximo vídeo, podemos usá-los para adicionar o Google Maps aos nossos projetos.
30. Adicionando Google maps (formulários, tabelas e iFrames): Se formos até a página “Fale Conosco” finalizada e rolar para baixo, você não terá desperdício. Em sua versão final, temos um mapa de localização nesta página “Fale Conosco”. Isso é fornecido pelo Google, acessando a API do Maps. Nós abordaremos as APIs em detalhes mais adiante neste curso, incluindo a criação de nossas próprias, mas por enquanto, saiba que a API do Maps
permitirá que nosso site se comunique com as informações do mapa do Google. Você pode estar se perguntando o que tudo isso tem a ver com a seção HTML do curso,
bem, esta API está incluída dentro de um iframe, também é muito fácil de implementar. Vamos começar indo para o Google,
e vamos fazer uma pesquisa pela API do Google Maps, e normalmente para ir para o é developers.google.com//maps, então selecione isso, e primeiro vamos clicar no botão “Começar”, que é apenas aqui, e então vamos rolar para baixo. O que precisamos é a API de incorporação do Google Maps, então vamos rolar para baixo, e isso está sob a seção Web API, então clique em “Google”, e estamos na API de incorporação do Google Maps. Em seguida, selecione mapas, e podemos ver isso integra mapas baseados em plantas interiores para o nosso site, então clique neste link aqui. Isso é muito simples de começar. Tudo o que precisamos fazer no início, é copiar esta seção do iframe, que você obtê-lo aqui. Copie isso, e então podemos ir para a nossa página contacts.html, e substituir a nossa versão do YouTube por uma que acabamos de copiar. Agora vamos para o navegador, e vemos nossa página “Fale Conosco”, apertamos “Recarregar” e podemos ver um problema. A chave de API fornecida é inválida,
portanto, como diz a mensagem de erro, precisamos de uma chave de API. É assim que o Google pode acompanhar quem está acessando seus dados de mapa. Podemos obter uma chave API a partir do menu, de
volta no site do Google, no lado esquerdo é uma opção para obter uma chave API. Antes de irmos mais longe, porém, eu só quero salientar, que sites como este, muitas vezes mudam layouts ao longo do tempo,
por isso, se sua versão parece um pouco diferente, geralmente é apenas um caso de NavigationLink foi movido, mas você ainda deve ser capaz de encontrar o seu caminho. Então precisamos ir para baixo e selecionar “Obter uma chave”. Se você ainda não estiver conectado,
precisamos fazer login no Google, então vou fazer o login, depois clique em “Avançar” e, em seguida, precisamos adicionar nossa senha. Ok, bom. Agora que estamos logados, podemos clicar em “obter uma chave API” novamente. Primeiro precisa criar um projeto, então eu vou criar um novo projeto. Clique neste link “Criar novo projeto” e o nome de usuário de “Tech Store” e clique em “Avançar”. Isto deve então dar-nos a nossa chave API, que podemos copiar clicando neste ícone aqui. Vá até o nosso projeto, e então se dermos uma olhada neste iframe, que copiamos antes, precisamos rolar para a seção que diz “chave igual a”, e então onde ele diz “Sua chave API”, exclua esses três palavras aqui e, em seguida, cole na chave de API, que você acabou de copiar. Guarde isso, e agora, se voltarmos para nossa página de contato e
atualizarmos, devemos ver agora que somos apresentados com esta imagem do Google Maps, em vez da mensagem de erro. Agora teremos uma conexão com a API do Google Maps. Agora só precisamos que este mapa esteja no local do nosso negócio. Se voltarmos para o site do Google, e eu clicar em “Concluído”, podemos ver um Quickstart no menu, que está bem no topo, então clique sobre isso. Aqui podemos construir nosso próprio mapa personalizado. Podemos procurar lugares ou uma cidade. Digamos que Nova York, então clique nisso, e então role para baixo, podemos ver que Nova York aparece no mapa lá. Também podemos procurar o endereço da Apple, por exemplo, então vamos procurar por “loop infinito”, que está aqui
e, em seguida, role para baixo, e podemos ver o novo local aqui. Nós já temos nossa chave API para construir este mapa, então nós poderíamos apenas colar isso dentro daqui, e então uma vez que você fez isso, você clica em “Concluído”, e então nós somos fornecidos com um iframe, que nós podemos copiar, e isso tem este novo local, que procuramos antes, então vamos copiar isto. Então, se formos para o projeto e substituirmos nosso iframe por aquele que você acabou de copiar, e então se voltarmos para nossa página de contato, pressionar “Atualizar”, e agora somos levados para o endereço que adicionamos antes, então, é claro, você precisaria mudar isso para a localização do seu negócio, e é assim que fazemos isso. Agora, integramos com sucesso o Google Maps em nosso projeto. Isto é agora para as seções HTML deste curso. Muito bem por chegar até aqui. Agora podemos passar a aprender tudo sobre CSS.
31. Entendendo o CSS (início do CSS): Nas seções HTML que abordamos até agora, nos referimos ao site finalizado para mostrar o que vamos adicionar aos nossos projetos. Neste momento, nosso próprio projeto que criamos contém exatamente o mesmo conteúdo HTML de uma versão finalizada. Mas, como sabemos, eles parecem muito diferentes. A diferença é o CSS. CSS significa folhas de estilo em cascata. É uma linguagem de folha de estilo usada para descrever a aparência e formatação de um documento escrito em uma linguagem de marcação, como HTML. Esta é uma descrição formal, mas você pode pensar no CSS como uma forma de estilizar, posicionar e colocar elementos em nossos sites. Podemos usá-lo para adicionar cores, bordas,
alinhamento, tamanho do texto, cores de fundo e muito mais. uso de CSS mantém nosso estilo separado do conteúdo HTML. Essa separação mantém todos os arquivos menores e mais fáceis de manter. Ainda podemos misturar estilos em nosso arquivo HTML, e veremos algumas maneiras de fazer isso. Bem, qualquer coisa diferente de um pequeno site geralmente terá HTML em um arquivo, com a extensão a.html e, em seguida, CSS em um arquivo separado com extensão a.css. Ter um arquivo CSS separado também permite que os mesmos estilos sejam reutilizados em vários arquivos HTML. CSS3 é a versão mais recente. Ele nos permite fazer ainda mais com novos recursos como transformações,
animações, gradientes, imagens corporais, cantos
arredondados e consultas de mídia. Iremos, naturalmente, abordá-los em mais pormenores em breve. Então, o que o CSS se parece? Bem, na tela aqui estão alguns exemplos. Primeiro, podemos selecionar um elemento pelo seu nome, como h1. Há muitas maneiras de selecionar um elemento. Vou olhar para estes em breve também. Em seguida, adicionamos algumas chaves para conter as regras de estilo que queremos aplicar a este h1. Mesmo com o cabeçalho logo abaixo, este cabeçalho terá uma largura de 70 por cento com um fundo branco. Agora sabemos um pouco sobre o que é CSS. Agora vamos seguir em frente para automatizar nossos projetos.
32. Estilos inline e adicionando cores (início do CSS): Vou começar olhando para uma maneira de adicionar estilos, que é adicioná-los na linha. Na linha basicamente significa que adicioná-los dentro de cada elemento HTML. Esta versão final tem uma cor de fundo cinza para o cabeçalho e também o rodapé para baixo na parte inferior. Vamos começar adicionando uma cor de fundo ao index.html. Vamos para o elemento principal, index.html, vamos para o topo da página. Aqui temos nossos elementos de cabeçalho. Alpha pode usar os atributos de estilo para adicionar estilo embutido aqui dentro. Podemos então selecionar a propriedade de fundo para adicionar uma cor, adicionar dois pontos. Podemos usar um nome de coolers para a maioria dos valores, como vermelho, azul ou amarelo. Vamos começar com vermelho. Cada propriedade CSS precisa terminar com um ponto-e-vírgula e nos dar salvar. Em seguida, recarregue o navegador, vá para o index.html. Há um olhar terrível no cabeçalho vermelho, mas a propriedade estrela agora entrou em vigor. Também podemos usar cores em outros formatos, vez de apenas digitar o nome, como RGBA e hexadecimal. Se formos para o Google e se você procurar por um seletor de cores, é várias ferramentas on-line que podemos usar para um seletor de cores, eu vou usar a versão W3Schools, que é o link superior aqui. Aqui podemos selecionar uma cor desta imagem à esquerda. Vamos deixar qualquer cor por enquanto. Vamos para o azul. Se rolarmos para baixo, podemos ver que este é um formato diferente aqui. O primeiro tem um hash e este é um valor hexágono. Hex significa cor hexadecimal e tem um prefixo hash, é composto de seis dígitos. Os dois primeiros são vermelhos, os dois segundos são verdes e, finalmente, os dois valores azuis no final. A combinação de cores sextavadas que escolhi para o cabeçalho é 333A40. Vamos passar por cima e substituir este valor vermelho. Vamos adicionar o hash, então o valor de 333A40 e nos dar salvar. Vamos dar uma olhada nisso. Agora eu tenho a mesma cor escura que você vê na versão final apenas aqui. Se voltarmos para o site W3Schools e, em seguida, atualizar, este também um valor RGB logo abaixo dentro dos colchetes nós adicionamos o valor de vermelho, verde
e, em seguida, azul como um número variando de zero a 255, zero sendo o menos intenso e 255 sendo o mais intenso. Se quiséssemos uma cor vermelha, assim como vemos aqui, vemos o primeiro valor dos vermelhos como 255, zero para o verde e também zero para o azul, o que faz sentido. Então, abaixo da cor torna-se mais laranja. Este terceiro, por exemplo, vemos que podemos adicionar mais verde. 255 para o vermelho, 128 para o verde e zero para o azul. Você também pode ver um quarto valor também, que é chamado de RGBA. Se também fizermos uma pesquisa do Google para RGBA. Mais uma vez, eu vou para este site W3Schools, para este link aqui. Aqui podemos ver o valor RGBA e os quatro valores dentro dos colchetes também, isso é como uma cor RGB, mas com um quarto valor de alfa. Alpha é usado para definir a opacidade e é um valor entre zero e um. Zero É totalmente transparente e um é uma cor sólida. Se voltarmos para a nossa página index.html, a cor do texto padrão que vemos na página aqui é essa cor preta escura. Essa cor de texto também pode ser alterada usando a propriedade color como esta. Nós logo após o ponto-e-vírgula, também
podemos adicionar a cor que se aplica ao texto. Vamos mudar para ser branco, e também o ponto-e-vírgula no final. Isso também pode ser um nome de coluna e um valor RGBA ou hexadecimal. Ambos vão mantê-lo simples como branco e, em seguida, atualizar. Agora temos esta cor branca na parte superior do cabeçalho. Você vai notar que estes links de navegação livre e a luz, isso é porque estes são links. Precisamos apontar o elemento A para que isso entre em vigor. A mesma cor de fundo também pode ser aplicada ao 42. Tudo o que precisamos fazer é pegar esses atributos de estilo e, em seguida, copiar, e rolar para a direita para a parte inferior da página, só
precisamos adicionar isso dentro da tag de rodapé de abertura. Então, se descermos até a parte inferior e
apertamos a atualização, agora obtemos as mesmas cores aplicadas ao rodapé. É assim que podemos adicionar estilos em linha. Eles podem ser úteis para adicionar rapidamente um estilo a um elemento específico. Mas você provavelmente já pode ver algumas desvantagens já. Tal como, mesmo nesta fase inicial, já estamos duplicando o mesmo código, que geralmente não é uma boa idéia. Além disso, mas um momento em que adicionar estilos a todos os elementos em sua página pode começar a olhar realmente confuso. Outra grande desvantagem é se decidirmos mudar algo, como uma cor de fonte em uma data posterior, então
teremos que olhar através de cada elemento de texto em cada página HTML e alterá-los todos individualmente. Felizmente, existem algumas abordagens melhores, e vamos olhar para uma delas no próximo vídeo.
33. Folhas de estilo internas (início do CSS): O próximo tipo de folha de estilo que podemos adicionar são folhas de estilo internas. Esta é uma maneira de adicionar todos os estilos que queremos aplicar a uma única página web. Para fazer isso, podemos adicionar as tags de estilo na seção de cabeça. Então vamos rolar para o topo da nossa página de índice, e logo após o título, vamos adicionar as tags de estilo. Vamos adicionar a tag de abertura e fechamento dentro desta seção de cabeça. Então, assim como vimos nos slides no início da seção, podemos então adicionar o nome dos elementos que queremos que os estilos se apliquem. Vou começar com esta área de cabeçalho, seguido pelas chaves de abertura e fechamento. Dentro dessas chaves, podemos adicionar os mesmos estilos de antes. Então, adicionamos o plano de fundo, os dois pontos, e tivemos o valor de código hexadecimal de 333a40. Ao usar esses estilos, também precisamos terminar cada propriedade com o ponto-e-vírgula. Então também temos a cor que se aplica ao texto que era branco. Então, se descermos e remover os estilos inline que já estão antes para os elementos de cabeça, como você move isso. Em seguida, também em vez de duplicar códigos, esses estilos podem ser aplicados a vários elementos separando-se com uma vírgula, então separe-o com uma vírgula. Também podemos adicionar o rodapé dentro de lá também. Então, é claro, precisamos ir para baixo e remover esses estilos da área do rodapé. Bem na parte inferior, vamos remover esta seção de estilo inline assim. Em seguida, dê um salvamento, e então se formos para o navegador e depois atualizar, podemos ver que os estilos que foram adicionados são exatamente os mesmos de antes, mas desta vez nós os temos em uma seção na parte superior da cabeça. Nós também podemos adicionar algum estilo para os elementos HTML raiz e também a seção corpo também. De volta às tags de estilo no topo, mais
uma vez com os elementos HTML, vamos adicionar uma cor de fundo. Adicione o valor de código hexadecimal de f7f7f7. Eu adicionei este elementos HTML na parte superior, pois é um elemento raiz. Então dar que um salvar, em seguida, atualizar, e este é pequeno, mas sutil fundos diferença. Agora com o corpo, que eu vou adicionar logo após o HTML. Vamos adicionar um fundo de branco. Destaca-se com este fundo de HTML. A largura máxima da seção do corpo, eu vou mudar isso para ser 1.000 pixels, e então nós queremos adicionar margem zero e, em seguida, auto. Margem é o valor do espaçamento que adicionamos fora dos elementos. O primeiro valor de zero representa nenhum espaçamento na parte superior e inferior, e o segundo valor é para a esquerda e a direita. Envie o valor para auto, espaçamento
médio será automaticamente aplicado igualmente a ambos os lados, centralizando
efetivamente o corpo para o meio da página. Este é um truque comum e aprenderemos mais sobre marging em um vídeo posterior. Não se preocupe se não fizer sentido no momento. Você provavelmente pode ver isso em ação melhor se salvarmos e depois atualizar. Você pode ver imediatamente que o corpo é agora um pouco mais estreito. Você pode ver esta cor HTML que adicionamos no fundo, é ligeiramente diferente dos brancos que foram adicionados ao corpo. A seção do corpo é essa seção de 1.000 pixels de largura, que vai desta borda esquerda aqui para o lado direito aqui. O corpo agora está restrito a 1.000 pixels de largura e centralizado
no meio porque adicionamos margem igual ao lado esquerdo e direito. Qualquer espaço extra que esteja disponível após essa
largura de 1.000 pixels será aplicado automaticamente à esquerda e também à direita. Isso ocorre porque adicionamos uma folha de estilo interna a esta página index.html. folhas de estilo internas funcionam muito bem, mas só são úteis para estilizar esta página que você já fez. Por exemplo, se selecionarmos o link Contato no menu na parte superior, que é este terceiro, clique nele, e o estilo no qual adicionamos não terá efeito nesta página. Este geralmente não é o comportamento que queremos porque queremos estilo
consistente para cores e também esta seção de cabeçalho e rodapé também. vez isso é algo que pode ser facilmente resolvido usando nosso terceiro e último tipo de folhas de estilo, que vamos cobrir a seguir.
34. Folhas de estilo externas (início do CSS): Nós cobrimos até agora a adição de estilos em linha e também usando folhas de estilo internas. O terceiro e último tipo é um folhas de estilo externas. Vemos no último vídeo, que uma limitação do uso de folhas de estilo internas, é que eles só se aplicam a uma página web. Não queremos repetir os estilos de cabeçalho e rodapé para cada página. Você pode adicioná-los a uma folha de estilo externa em vez de aplicar apenas à nossa página de índice, que você vê nossa presença. Podemos fazer isso criando um novo arquivo dentro da pasta do nosso projeto. Vou clicar neste ícone aqui para abrir a barra lateral. Vou criar um novo arquivo clicando neste ícone aqui. Eu vou chamar isso de “styles.css” Os nomes de [inaudível], mas ele deve ter a extensão “.css” e, em seguida, clicar em “Enter”. Vou guardar isto nas raízes da pasta do nosso projecto. Junto com este índice e todas as outras páginas HTML. Também podemos adicionar uma pasta CSS se você tiver vários arquivos de folha de estilo, então podemos passar para a página de índice e estilos que você já tem. Então vamos rolar para baixo e tudo, desde o cabeçalho e
rodapé, até o HTML. Então pare com isso. Mas eu vou apenas deixar essas tags de estilo no lugar e depois colá-las
no arquivo styles.css que acabamos de criar, pressione “salvar”. Se formos para o navegador e, em seguida, clicar em “atualizar”, vemos que nenhum estilo é aplicado em tudo agora. Isso é porque precisamos vincular este novo arquivo CSS para os arquivos HTML que queremos que ele se aplique. Então vamos em frente e fazer isso agora. Sobre o index.html, podemos remover as tags de estilo, e no lugar eu vou adicionar os elementos de link. O link não tem tag de fechamento e podemos adicionar dois atributos. O primeiro é rel, e adicionamos folhas de estilo iguais. Rel equals stylesheet descreve a relação dos documentos vinculados com o chromo. Estamos ligando as folhas de estilo. Em seguida, o atributo href, que você deve estar familiarizado com a partir de quando olhamos para links. Este é o caminho para o arquivo CSS que você acabou de criar. Misses no mesmo diretório é a página de índice. Então, podemos apenas adicionar o nome de styles.css. Se tivéssemos em um arquivo CSS, precisaríamos adicionar CSS como um caminho de arquivo antes do arquivo. Então vamos remover isso e nos salvar. Agora refrescante deve introduzir nossos estilos de volta na página. Nós ainda devemos ver Se vamos até mais páginas como contato, que nenhum desses estilos ainda se aplicam. Podemos alterar isso vinculando a todas as páginas usando o mesmo link aqui. Então eu vou apenas copiar isso e, em seguida, adicionar isso ao contact.html. Vai estar bem no topo também? Logo depois do título? Então o mesmo para os detalhes do produto. Bem no topo abaixo do título. Cole isto. Agora, se vamos para [inaudível] sobre páginas HTML no navegador. Então temos nossa página inicial. vamos tentar entrar em contato com a página e nossos estilos ainda se aplicam lá. Parece um pouco menor se nós apenas ampliado e com o navegador lá. Então homepage está trabalhando na página entre em contato conosco, e ainda teremos os estilos para o cabeçalho e o rodapé. Finalmente, vamos voltar para a página inteira e selecionar os dados do produto. Nossos estilos também se aplicam a esta página. É assim que podemos adicionar folhas de estilo externas aos nossos projetos. Em seguida, vamos olhar em fontes do Google.
35. Fontes (início do CSS): Agora, abordamos como aplicar folhas de estilo de diferentes maneiras. Agora, vamos passar para o uso de fontes. Adicionar tipos de fonte aos nossos sites é muito importante para definir a aparência. Se dermos uma olhada aqui, eu estou sobre o site W3Schools em uma seção chamada fontes CSS. Se olharmos aqui, há dois tipos de fonte principais. Um chamado Serif e outro chamado Sans-Serif. As fontes Sans-serif à esquerda são muito mais simples e têm bordas quadradas mais retas. As fontes Serif, por outro lado, têm esses detalhes extras
na borda que você pode ver destacados em vermelho apenas aqui. Um pouco mais abaixo podemos ver que existem dois tipos de famílias de fontes. À esquerda da mesa vemos que temos Serif, temos Sans-Serif e também Monospace. Estes são todos exemplos de uma família de fontes genéricas. Cada um desses grupos genéricos também tem muitas famílias de fontes. Aqui vemos no topo temos Times New Roman e Georgia e estes são os dois tipos da família Serif. Então abaixo temos Arial e Verdana que são famílias de fontes com um tipo de Sans-serif. Nós geralmente queremos adicionar tanto a família de fontes para o nosso CSS juntamente com uma família genérica como Sans-Serif que atua como um fallback se nossa primeira escolha não é suportada pelo navegador. Para evitar fontes que não são comumente suportadas, podemos usar o que é chamado de fontes seguras para a Web. Vamos até o Google e fazer uma busca rápida por essas fontes seguras da web. Agora, vamos para o site da W3Schools aqui. Temos as versões Serif e rolagem mais para baixo temos as fontes Sans-Serif também. Isto tem uma lista de combinações de fontes comuns que são descontroladamente avistadas. A maioria tem uma pilha de três fontes como você pode ver aqui. Temos a nossa primeira escolha como exemplo, temos Arial. Nossa segunda escolha de Helvetica e isso é usado se o Arial não é suportado. Então, no final, temos uma família de fontes genéricas, como Sans ou Sans-Serif. Isso é usado se nenhum dos outros estiver disponível ou suportado. Nomes de família de fontes semelhantes aqui com espaços entre eles estão entre aspas, assim como você pode ver aqui. Isso é recomendado, mas não é necessário. Vou em frente e copiar uma dessas fontes, pilhas. Digamos que Comic Sans. Vamos copiar esta seção do site. Então vamos voltar ao nosso arquivo styles.css e podemos adicionar uma família de fontes ao nosso projeto. Vamos fechar a barra lateral e abrir o styles.css. Podemos adicionar isso ao corpo uma vez que todo o conteúdo HTML está dentro do nosso corpo de texto. Vamos até o corpo e adicionar nossa família de fontes e então poderíamos colar em nossos três valores que acabamos de copiar antes com um ponto-e-vírgula no final. Salve isso e, em seguida, volte para o projeto no navegador e, em seguida, atualize e você pode ver todo o tipo de fonte mudou para ser esta versão Comic. Outra maneira de incluir fontes é incluir uma biblioteca de fontes, como fontes do Google. Vamos fazer uma pesquisa por fontes
do Google e o que precisamos é fonts.google.com. Vamos abrir isto. Podemos ver imediatamente que há muitas fontes diferentes para escolher. Podemos até filtrar no lado direito
pelos diferentes tipos, como Serif ou Sans-Serif. Você pode até olhar e escolher uma dessas fontes na tela inicial, se preferir. Quero fazer uma busca e escolher aquele chamado Barlow. Então, sob a barra de pesquisa e este é o que eu vou usar no lado esquerdo. Se quisermos adicionar isso, basta clicar no símbolo de adição aqui. Então podemos ir até o fundo e expandir a família selecionada. É assim que obtemos as instruções sobre como adicionar isso aos nossos projetos. Primeiro de tudo, no topo temos um link que é exatamente como o link que usamos em nossas próprias folhas de estilo, mas desta vez ele links para as folhas de estilo que o Google forneceu. Vamos copiar este link, passar para o projeto e no índice ou HTML, podemos adicionar isso logo abaixo do nosso título. Este link também precisa ser adicionado a todas as páginas HTML também, então vamos adicioná-lo aos detalhes do produto logo abaixo do título e também à página Fale Conosco. Certifique-se de salvá-los. A colocação deste arquivo também é importante. Devemos ter nosso próprio arquivo CSS personalizado por último. Isso garante que todas as alterações feitas como um estilo personalizado sejam carregadas por último e substituirão qualquer um dos padrões. Vamos olhar para isso com mais detalhes mais tarde,
porém, de volta para fontes do Google por enquanto. Em seguida, precisamos ir para baixo e copiar a família da fonte. Então copie esta linha do CSS e, em seguida, de volta para o nosso styles.css e em vez de uma seção que
adicionamos antes, podemos colar em nossa nova versão do Barlow e clicar em “Salvar” de volta para o projeto e, em seguida, atualizar. Agora, todas as fontes entraram em vigor na página e devemos vê-los sendo consistentes através de todas as nossas páginas diferentes. Todos esses formulários visivelmente parecem diferentes, podemos confirmar se ele está funcionando indo para as ferramentas de desenvolvedor. Clique com o botão direito do mouse em “Inspecionar” e, em seguida, sobre o lado direito sob o corpo, podemos ver Barlow que você escolheu. Se desmarcarmos isso, podemos ver uma mudança com a família de fontes na tela como ele volta para o padrão. Podemos ver claramente que essas fontes do Google estão funcionando agora. Eu vou vê-lo agora no próximo vídeo, vamos dar uma olhada nas aulas e IDs.
36. Classes e id (início do CSS): Classes e IDs é algo que vai usar o tempo todo na construção de sites. Eles são maneira de selecionar ou para conectar alguns elementos em nossa página para que possamos aplicar nosso CSS a ele. Nós também os usaremos mais tarde no curso para, ao trabalhar com JavaScript, vamos primeiro começar com ID. Podemos adicionar um atributo ID a qualquer elemento, em seguida, alvo é elemento usando CSS. Se formos até a página contact.html, já
usamos IDs nesta seção,
então, dando uma olhada no nome no topo e se você rolar para a direita, aqui temos um nome de ID. Também tínhamos uma identificação de e-mail e mensagem. Uma coisa importante a observar com IDs é que eles devem ser únicos. Devemos usar apenas um nome de ID em cada página. Em seguida, fazer este ID no arquivo CSS com um prefixo de hash, para adicionar algum estilo a este nome irá para o style.css, e então aqui abaixo, usando um prefixo de hash, poderíamos direcionar o nome. Então poderíamos fazer coisas como adicionar uma cor de fundo. Vamos mudar o fundo para vermelho, e depois nos salvar. Para o nosso navegador da web, e precisamos ir para a página de contato conosco. Rolando para baixo e agora temos um fundo vermelho para esta seção de nomes. É importante saber que as identificações não devem começar com um número dois. Se fôssemos passar para o CSS e, em seguida, adicionar um número como este, o editor de texto o transforma em vermelho para sinalizar um problema. Vamos descer, salvar. Este é um ID que usamos para selecionar um único elemento em uma página, mas e se quiséssemos que os mesmos estilos se aplicassem a várias áreas, como nossos produtos. Para este caso, podemos usar uma classe, adicionando o mesmo nome de classe a todas as nossas tags produtivas nos
permitirá escrever alguns estilos que serão aplicados a todos eles. Se formos para o index.html, e então ele localizará nosso primeiro produto, que é o controlador. Para a div circundante, que está aqui logo acima do link, podemos adicionar um atributo de classe do produto. Como podemos usar isso mais de uma vez, vamos copiá-lo e adicioná-lo a todos os seis produtos. O segundo, o terceiro, o quarto e se você tem mais de seis, adicione-os em cada um, e isso é todos os seis, então nos dá economia. Também temos um produto dentro da página de detalhes do produto dois. Podemos adicionar isso ao nosso produto dentro de lá. Role para baixo até a seção principal e novamente dentro da div de abertura para o produto. Isso garantirá que os mesmos estilos que aplicamos
no CSS também serão aplicados a este produto. Desta vez, em vez do prefixo hash e se formos para o CSS, usamos um ponto para indicar que estamos direcionando uma classe. Em seguida, insira o nome dos produtos, e agora podemos adicionar alguns estilos dentro dessas chaves. Esta classe, juntamente com o ID que usamos antes e também esses nomes de elementos logo acima são todos chamados seletores. Eles também pequenos avançados gostam destes dois, e vamos dar uma olhada neles mais tarde no curso. Vamos em frente e adicionar uma borda ao nosso produtivo de um pixel de largura, uma linha sólida e a cor de cinza. Em seguida, podemos definir a largura de cada produto para ser 200 pixels de largura, o ponto-e-vírgula e vamos ver como isso está olhando sobre a página de índice. Dá a nossa recarga e ir para baixo para produtos de escritório, podemos ver a fronteira se olharmos para baixo aqui e também isso parece cerca de 200 pixels de largura. No entanto, esta imagem acima é muito grande para caber dentro deste recipiente. As outras poucas maneiras que você pode fazer isso, nós poderíamos definir a propriedade overflow para ser oculta, apenas assim e salvar isso e, em seguida, recarregar. Agora podemos ver a imagem está dentro do recipiente de 200 pixels. Isso não é ideal porque isso esconde o resto da imagem, que não parece muito grande. Uma solução melhor para isso será definir
a propriedade de largura máxima em vez do overflow, vamos remover esse overflow
e, em seguida, abaixo disso, podemos direcionar o seletor de imagem. Em seguida, use a propriedade CSS max-width, responder isso seria 100 por cento, dar que salvar e, em seguida, recarregar. Isso garante que a imagem não se estica mais do que o contêiner circundante. Isso parece muito melhor. Isto é mais como o que queremos. No entanto, o produto ainda é empilhado em cima um do outro, porque mencionamos anteriormente, div elementos de nível de bloco e começar em uma nova linha. Mas, isso está tudo bem por enquanto e em seguida vamos passar para margem e preenchimento.
37. Margem e padding (início do CSS): Margem e preenchimento são propriedades CSS realmente importantes para entender. Ambos são basicamente uma forma de criar espaço. Se olharmos para este diagrama aqui, imagine que este era um dos nossos produtos. Provavelmente queremos que apareça algo como isto, com um pouco de espaço em torno dele, inválido embora seja assim que ele apareceria por padrão. Colocado no canto superior sem espaçamento. Vemos isso em ação em nosso projeto atual, onde o padrão do produto está no canto superior esquerdo do espaço disponível. Para corrigir isso, podemos aplicar margem para o exterior de um elemento para criar algum espaçamento. margem pode ser aplicada para ser a mesma em cada lado, ou você pode adicionar uma quantidade diferente em cada lado, se necessário. A mesma coisa acontece quando adicionamos elementos dentro deste produtivo. O elemento, como esta imagem ou mesmo qualquer texto, é colocado no canto superior. Assim como antes, talvez não queiramos que a imagem seja amarrada ao canto superior. Para esta situação, temos o que é chamado de preenchimento. O preenchimento também adiciona espaçamento, mas desta vez, dentro dos elementos. A margem está fora dos elementos e o preenchimento é aplicado ao interior dos elementos. A borda verde mais escura destaca o que o preenchimento realmente faz. Ele age como uma almofada, mantendo as coisas longe dos lados. Também podemos definir isso igualmente em todos os lados ou ter valores diferentes em cada lado. Como vemos aqui, tanto a margem quanto o preenchimento podem ser definidos para cada lado individualmente definindo os valores superior, direito, inferior e esquerdo. Felizmente, existem algumas versões abreviadas também. Dando uma olhada nesses dois exemplos à esquerda, podemos definir margem ou preenchimento com quatro valores. Estes quatro valores são no sentido horário, começando no topo. Então, em cima, direita, em baixo e depois à esquerda. Aqui temos ambos os valores superior e inferior definidos para dez pixels,
em seguida, os valores esquerdo e direito,
os mesmos dois são cinco pixels. Para este caso, também podemos mostrar isso ainda mais. Como vemos no lado direito. O primeiro valor está na parte superior e inferior, e o segundo é à esquerda e à direita. Nós já vimos isso em nosso projeto quando centramos nosso site usando margem zero auto. Zero diz aos navegadores para não adicionar margem à parte superior e inferior da seção do corpo. Em seguida, o espaço adicional à esquerda e à direita pode ser dividido igualmente, deixando a seção do corpo centrada na página. Chega dessa teoria, vamos dar a isso uma entrada no nosso projeto. Começando com a margem. Se passarmos para o styles.css e até o produto, podemos adicionar alguma margem a esta seção de produto de cinco pixels. Como adicionamos apenas um valor, isso se aplicará a todos os lados do produto. Vamos ver isso com uma recarga. Agora podemos ver cinco pixels de espaço e isso apareceu em todos os lados do produto. Em seguida, vá em frente e adicione algum preenchimento também, também um cinco pixels, e depois atualize. Agora temos uma almofada de cinco pixels no interior da div. Além disso, outra coisa importante a observar são os valores padrão frequentemente aplicados de
um navegador de margem e preenchimento também. Isso significa que às vezes ele pode querer redefinir os valores de volta para zero e lista não ordenada é comum, que é muitas vezes se aplica a. Vamos passar para o CSS, e podemos redefinir esses valores. Se formos logo abaixo do cabeçalho e rodapé, vamos marcar na UL. Então poderíamos definir a margem de volta para zero. Se atentarmos para isso quando atualizarmos, veremos tudo subir à medida que uma margem padrão foi removida. Também podemos fazer o mesmo para remover qualquer preenchimento padrão. Mais uma vez, de volta à lista desordenada. Então podemos redefinir o preenchimento de volta para zero. Se mantivermos um olho atento para mim quando
atualizarmos, veremos que todas as listas não ordenadas são movidas para o lado esquerdo. Isto é algo a ter em mente se você está se perguntando por que algo parece um pouco diferente do esperado devido ao navegador adicionar alguns valores padrão. Além disso, apenas para tornar as coisas ainda mais confusas, diferentes navegadores muitas vezes têm valores diferentes também. No entanto, alguns recursos para nos ajudar com os padrões do navegador. Se formos para o Google e, em seguida, fazer uma pesquisa para redefinições CSS. O principal elo que quero é Meyerweb. Clique nisto. Esta é uma folha de estilo. Se descermos, podemos ver o código aqui. Podemos usar isso dentro do nosso projeto para efetivamente remover qualquer estilo padrão fornecido pelos navegadores. Isto dá-nos uma tela em branco para começar. Alternativamente, podemos usar outro arquivo CSS chamado Normalize. Novamente, vamos fazer uma pesquisa do Google para CSS Normalize. Seu elo principal é o que eu preciso. Clique nisto. Normalize o trabalho um pouco diferente para redefinir. Em vez de remover os padrões do navegador, você fornece estilos para que nossos sites sejam exibidos de forma mais consistente em navegadores organizados. Você acabou de decidir agora, no entanto, e algo que você pode achar útil para incluir isso em nossos projetos. Tudo o que você precisa fazer é baixar o arquivo e adicioná-lo aos nossos projetos, assim como fizemos com nossa própria folha de estilo personalizada. Isto é agora para margem e preenchimento. Em seguida, vamos mergulhar no uso de diferentes tipos de exibição.
38. Block, inline e inline-block (Beginning CSS): Nós já discutimos brevemente a maioria dos elementos caindo para ser inline ou bloco nível elementos. Vemos na tela aqui alguns elementos de imagem em linha. Isso tem o efeito de cada elemento estar na mesma linha se ele vai caber. Há uma coisa, porém, para estar ciente ao usar elementos inline, podemos adicionar margem e preenchimento à esquerda e à direita, como vemos aqui, mas não podemos adicioná-lo à parte superior e inferior. Isso ocorre porque o conteúdo adicionado com elementos
embutidos destina-se a fluir pela página e, em seguida, para a próxima linha. Adicionar qualquer altura extra iria perturbar este fluxo. Além disso, estamos habilitados para definir a largura e altura também. Elementos de nível de bloco, por outro lado, começam em uma nova linha e ocupam toda a largura disponível, como div ou texto ao usar o elemento p. Eles também nos permitem definir qualquer margem e preenchimento também sem quaisquer restrições, ao contrário do que acabamos de ver com elementos inline. Há uma maneira de ter esse comportamento inline enquanto também ser capaz de definir a margem e preenchimento e isso é definir o elemento para ser inline-block. Inline-block é comumente usado em navegações. Por padrão, listar itens ou elementos em nível de bloco. Alguém vai fazer uma lista que vai empilhar um em cima do outro. Nós comumente vemos links nav como inline ou inline-block, como vemos aqui. Inline-block permite que os itens fluam pela página, mas ainda nos dá a flexibilidade para controlar os valores de preenchimento e margem. Não é possível alterar nenhum tipo de exibição padrão de elementos usando a propriedade de exibição CSS para substituí-la. Vamos dar uma chance a isso agora. Mais no CSS começando com o elemento li. Basta soprar esta lista desordenada dentro
do li e, em seguida, definir o tipo de exibição para ser inline. Dê isso um salvamento e de volta ao nosso projeto, atualize e agora nossos links aparecem em linha em toda a página. Isto funciona como pretendido, os itens da lista de cabeçalho são inline, colocar o alvo em todos os elementos li como este, também incluem estes itens da lista da barra lateral também. Se você quiser apenas segmentar esses itens de lista de cabeçalho, podemos ser mais específicos. Se passarmos para o CSS, em vez de apenas segmentar o li, podemos adicionar cabeçalho, li, dar que um salvar, e para o navegador e atualizar. Agora podemos ver que isso só seleciona quaisquer itens da lista que estão dentro do cabeçalho, os da barra lateral são intocados. Podemos ir ainda mais longe com esta seção de cabeçalho também, tornando o título do site e também esses links nav inline também. Na verdade, podemos fazer esses blocos inline-, então ainda podemos controlar a altura também. Definindo-os como bloco inline-irá garantir que este título apareça no lado esquerdo. Em seguida, no lado direito, vamos obter os links de navegação, que é cercado no elemento nav, então de volta para o CSS. Podemos segmentar o título deste site. Temos cabeçalho, h1,
em seguida, separados por vírgula. Nós também podemos direcionar o elemento nav também. Defina a exibição, desta vez como bloco embutido e, em seguida, atualize. Agora eu tenho a navegação e o título do site alinhados em todo o cabeçalho. Inline-block também é uma boa maneira de alinhar os produtos também. Vamos dar a isso uma entrada dentro do produto div aqui. Vamos alterar o tipo de exibição novamente para ser inline-block, no navegador, e dentro da página de índice, vamos rolar para baixo. Agora temos nossos produtos alinhados em toda a página 2. Esta propriedade inline-block pode até ser usada para ter a barra lateral, que está atualmente aqui, e também esses produtos lado a lado. Lembre-se que a barra lateral estava
nos elementos de lado e todos esses produtos estavam contidos na seção principal. Vamos primeiro passar para o CSS e podemos definir a largura da seção principal e a parte de lado. Vou adicionar isso logo abaixo do cabeçalho,
h1, e seção de navegação. Vamos primeiro começar com a seção principal e definir a largura para ser 680 pixels. Em seguida, podemos garantir que a barra lateral também se encaixa em toda a linha definindo a largura de lado para ser 270 pixels. Selecionei estes dois valores aqui. Quando combinados, ambos são menores que a largura do corpo de 1.000 pixels, que tínhamos anteriormente. Portanto, colocar o lado e principal para esses tamanhos irá certificar-se de que ambos se encaixam em toda a página e também permitir alguma margem e preenchimento também. Vamos ver como isso está olhando, recarregar e agora podemos ver a barra lateral é um pouco mais larga. Se dermos uma olhada na largura desta linha aqui e também a seção de produtos foi restrita a esta parte aqui. Agora vamos passar por cima e definir o tipo de exibição para ser inline-block. Primeiro o principal, exibir o tipo de bloco
inline-e, em seguida, também para a barra lateral. Então espero que, se salvarmos isso e agora passar por cima, agora
podemos ver isso lado a lado, uma vez que o lado e a seção principal são ambos inline-block. As coisas estão começando a ficar melhor agora, mas os itens da barra lateral aqui embaixo estão no fundo. Para corrigir isso ao trabalhar com elementos inline, ou mesmo inline-block, que age muito como inline, temos acesso a uma propriedade CSS chamada vertical align. Se passarmos para a barra lateral, logo abaixo da exibição, também
podemos definir o alinhamento vertical e colocar o texto na parte superior. Esperemos que ele agora empurre nosso texto para o topo da barra lateral, o que ele faz. Essa propriedade de alinhamento vertical pode ser usada para alinhar embutidos ou itens dentro das células da tabela. Nós mencionamos nos slides anteriormente que ao usar elementos embutidos, não
podemos adicionar margem e preenchimento à esquerda e à direita, mas podemos enviá-lo para a parte superior e inferior. Isso pode ser visto com nossos links de produtos de Mais Informações e Adicionar ao Carrinho. Vamos em frente e adicionar um pouco de preenchimento para ver o que acontece. Primeiro, precisamos dar a eles uma aula na página de índice. Vou dar a isto uma classe de botão. Primeiro, vamos para o produto superior e procurar esses dois links. Em seguida, podemos ir em frente e adicionar um nome de classe de botão, assim classe é igual botão. Então precisamos adicionar isso a todo o nosso produto, então eu vou copiar isso e adicioná-lo ao segundo link também. Em seguida, vá para o nosso segundo produto e podemos
adicioná-lo a todos estes para manter este estilo consistente. São os nossos quatro produtos. Os quatro produtos e o último também. Podemos usar esta classe botão mais na folha de estilo. Na parte inferior, o número de classes usa um ponto, coloque o nome de um botão, algum preenchimento de 10 pixels da fonte, salve isso, e agora na página de índice e atualize. Podemos ver o preenchimento adicionou algum espaço entre os botões, mas não há altura extra. Lembre-se que só adicionamos um valor de 10 pixels. Normalmente, isso se aplicaria a todos os quatro lados, mas só vemos isso à esquerda e à direita. Isso ocorre porque, como já sabemos, não
podemos afetar a altura com margem e preenchimento em elementos inline, mas podemos desbloquear e inline-block. Portanto, se passarmos para o CSS e alterar o tipo de exibição do botão para ser inline-block, podemos ver o efeito que isso tem no navegador. Assim que atualizamos, agora vemos alguma altura extra adicionada a cada um desses botões. Aqui nós olhamos para a propriedade de exibição. Como você pode ver, é muito importante ao colocar nosso site. Pode parecer um pouco complicado de entender no início, mas você pode ver com este exemplo como ele é eficaz, mesmo adicionando apenas algumas linhas de código em nosso CSS.
39. O modelo de caixa (início do CSS): Neste vídeo, vamos estar olhando para o CSS Box Model. O modelo de caixa é uma daquelas coisas em que, uma vez que você sabe, é realmente fácil de entender. Mas se você não estiver ciente do que é, isso pode causar problemas ao tentar encaixar elementos em uma página. Como exemplo, se formos para o nosso CSS e
mudarmos largura do produto dentro desta classe de produto aqui, digamos 210 pixels. Se salvarmos isso e recarregar o navegador, agora
queremos ter que esses produtos caber em nossa linha. Agora vamos voltar ao nosso CSS e investigar. Se olharmos para o nosso produto, definimos este valor para 210 pixels de largura. Se olharmos acima, definimos esta seção principal para 608 pixels. Nossos três produtos abaixo chegam a 630 pixels no total. Até agora, ainda estamos dentro do invólucro de 608 pixels para a seção principal, mas então você pode estar pensando corretamente que temos algum espaço ao redor dos produtos. Nós adicionamos cinco pixels de margem para todos os lados. Esses cinco pixels extras por lado significariam que cada produto ocupa 220 pixels cada um e um total de 660. Novamente, ainda dentro deste 680 pixels, seção principal. O preenchimento está dentro dos elementos, então você pode pensar que isso é irrelevante. Nós adicionamos cinco pixels de preenchimento também aqui em baixo. Bem, na verdade, está incluído também. Vamos passar para as ferramentas de desenvolvedor do navegador e ver como isso parece. Todos os navegadores têm sua própria versão de ferramentas de desenvolvedor. Se você não estiver usando o Chrome, poderá acessar as ferramentas de desenvolvedor acessando o menu, mas eu recomendaria usar o Chrome para esse caso. Tudo o que precisamos fazer é clicar com o botão direito do mouse e depois descer para inspecionar. Uma vez que ele aparece, podemos clicar no ícone de inspetor no canto superior esquerdo. Clique nesta seta lá e, em seguida, podemos passar o mouse sobre nossos produtos e, em seguida, clique na div com a classe de produtos. Isso nos permite ver o HTML no lado esquerdo. Aqui podemos ver que destacamos nossa primeira classe div de produtos e também o CSS que aplica este produto no lado direito. Nosso div produto é aqui colocar a borda, largura, margem, preenchimento e o tipo de exibição do bloco em linha. Se rolarmos para baixo até a parte inferior da seção CSS, podemos ver uma caixa. Esta imagem aqui em baixo representa o modelo da caixa. No meio, temos nossos elementos, que agora definimos para 210 pixels de largura, como vemos aqui. Então, além disso, temos cinco pixels de preenchimento em cada lado. Temos um valor de borda de um pixel também e, em seguida, do lado de fora, temos cinco pixels de margem. É importante entender que esses valores extras de preenchimento, borda e margem adicionados a esses elementos tornando-o maior no geral. Definimos a largura do produto para 210 pixels de largura. Mas, na realidade, cada produto ocupa uma largura de 232 pixels uma vez que adicionamos todos esses extras. É por isso que, no navegador, todos os três produtos não cabem na mesma linha. Mas há uma maneira de mudá-lo. Podemos usar uma propriedade CSS de box-sizing. Se voltarmos para os produtos dentro do CSS, podemos adicionar a propriedade box-sizing e definir isso para ser border-box. Coloque uma coluna no final. Definir isto para border-box irá certificar-se de que a largura que declaramos é uma largura total. Embora tenhamos base demo sobre a largura, tudo isso também se aplica quando se trabalha com altura também. Isso é uma coisa a ter em mente. Agora, com o tamanho da caixa definido para border-box, ele irá para o navegador e, em seguida, recarregar e apenas encolher as ferramentas do desenvolvedor. Agora vemos que temos três produtos em cada linha. Se voltarmos para as ferramentas do desenvolvedor, na verdade precisaremos atualizar primeiro e depois arrastar isso para cima. Ainda dentro do nosso primeiro produto aqui, se agora rolarmos para baixo até o nosso modelo de caixa, podemos ver instantaneamente que o elemento no centro agora tem um valor de 198 para essa largura de elemento. Isso foi reduzido para acomodar o preenchimento e também os valores de borda também, para então ser igual a 210 pixels. Então ainda temos essa margem de cinco pixels ao redor do lado de fora, assim como fizemos originalmente. É assim que funciona o modelo de caixa. Nós ainda precisamos levar em conta qualquer valor extra, como borda, preenchimento e margem também ou podemos aplicar a propriedade CSS de border-box.
40. Estilo de lista (início do CSS): Olhando para o nosso projeto até agora, existem algumas questões relacionadas com os itens da lista que precisamos abordar. Esta lista de à esquerda dentro da barra lateral. Ainda tem as balas do lado esquerdo. Nós também podemos olhar para adicionar um pouco mais de espaçamento para esses itens também. Primeiro vamos começar a trabalhar no arquivo CSS. Podemos fazer coisas como mudar essa bala para ser um círculo usando a propriedade list-style. Aplicamos isso ao nosso item Li. Vamos até a lista desordenada e depois podemos tentar pegar o Li. Em seguida, depois de adicionar a propriedade de estilo lista,
e, em seguida, podemos alterar o valor para ser círculo. Dê um salvamento, e depois recarregue o navegador, e agora essas balas pretas no lado esquerdo agora são círculos vazios. Atualmente, o círculo está fora do piso do conteúdo e esta é uma configuração padrão. Se fizermos o navegador um pouco mais largo, podemos ver que esta é a borda da seção do corpo e os círculos fora disso. Isso pode ser alterado para estar dentro do documento adicionando o valor interno. Logo após círculo, podemos adicionar dentro, e depois ir para o navegador. Isso agora empurra nossos itens de lista para agora incluir um círculo dentro do corpo. Há também a opção quadrada também. Vamos mudar o círculo para ser quadrado. Isto dará um quadrado à esquerda de cada item da lista. Há também muitos mais, mas muitos deles e não são usados com freqüência. Você pode, claro, confira estes com pesquisa
rápida do Google Se você estiver interessado em saber mais. Podemos até adicionar nosso próprio ícone ou nossa própria imagem no lugar deste quadrado também adicionando o URL da imagem. Então vamos remover o quadrado e logo após o interior, vamos adicionar o URL, e então dentro do colchete podemos adicionar o caminho do arquivo à nossa imagem. Podemos ir para uma de nossas imagens existentes dentro da pasta de imagens. Vamos para cables.jpeg, e vamos ver como isso está parecendo. Então ele está parecendo um pouco de uma bagunça no minuto porque o tamanho da nossa imagem. Obviamente esta imagem é muito grande, mas você pode ver como isso pode ser usado se for um ícone pequeno em vez disso, e isso é repetido para cada item da lista. As regras internas e externas ainda se aplicam. Então, se fôssemos remover o interior
e, em seguida, substituí-la por fora, nossas imagens agora se moveriam para fora do chão do documento. Não podemos ver sem diminuir o zoom. Lá vamos nós, diz nossos cabos à esquerda de cada item da lista. Este é um comportamento que tivemos logo no início este vídeo no início com as balas. Tudo o que eu quero fazer para este projeto é remover completamente esses mercados. Isso pode ser feito adicionando o valor de none, s em vez desta imagem. Nós também podemos remover o exterior e isso simplesmente muda para ser nenhum. Então temos apenas um conjunto padrão de itens da lista no lado esquerdo. Em seguida, o espaçamento do item entre esses links na parte superior e inferior, podemos aumentar a altura da linha. Então, dentro do item da lista, podemos ir em frente e adicionar a altura da linha. O valor depende de nós, mas eu vou definir o meu para ser trinta pixels, e ver como andar isso está olhando. Bom agora aumentou a altura da linha para trinta pixels, o que adicionou um pouco mais de espaçamento entre cada item. A última coisa que eu quero fazer é adicionar algum espaçamento para manter o texto longe da borda deste recipiente. Isso pode ser feito facilmente com um pouco de preenchimento na seção de lado. Então, vá para a seção de lado do CSS, e então vá em frente e adicione um pouco de preenchimento de 10 pixels, em seguida, atualize. Ótimo, então o espaçamento agora foi aplicado na seção de lado. Mas neste preenchimento também fez com que uma loja por seção fosse agora menor do que todos esses itens seção à direita. Para tornar isso ainda mais, só precisamos adicionar o valor de preenchimento para a seção principal também. Logo acima, poderíamos fazer o mesmo com o preenchimento de 10 pixels, e vamos ver como isso está olhando. Ótimo, então agora a loja por, e todos os itens seção agora alinham melhor com algum preenchimento ao redor do lado de fora. Em seguida, vamos passar para links de estilo e pseudo classes.
41. Estilizando links e pseudo classes (início do CSS): Como já podemos ver em nosso projeto, por padrão, links não parecem muito bons. Eles têm uma seção sublinhado, que você pode ver apenas aqui e também na seção de cabeçalho, você pode precisar ampliar embora. Sublinhar é algo que queremos remover. Também por padrão, as cores não são muito atraentes. Vamos começar removendo seu sublinhado dos links. Podemos fazer isso se formos para o nosso CSS. Em seguida, logo abaixo dos itens da lista, vamos adicionar a tag A. Para remover isso, podemos definir a decoração do texto para ser um valor de non. Em seguida, até o navegador, isso agora deve remover os links padrão
da seção de cabeçalho e também dos títulos também. Isso cuida do sublinhado, mas ainda precisamos mudar a cor do texto dos links também, ambos estes produtos e também a seção de cabeçalho e rodapé para baixo na parte inferior. Poderíamos fazer isso adicionando classes individuais a cada item e certamente propriedades de cores CSS individuais. Ou podemos ir em frente e fazer algo um pouco mais simples. Primeiro, vou passar para a seção proto e definir a cor do texto padrão com a propriedade color, definindo um valor RGB de 49 para o vermelho, o verde 46 e 46 para o azul também. Dê um salvamento e se formos para o navegador e atualizar, agora
vemos uma cor cinza ligeiramente mais clara. De volta aos links. Se formos para a seção A, em vez de definir um valor como uma cor RGB ou hexadecimal, eu vou ir em frente e definir a cor para ser herdada e dar-nos salvar. A palavra-chave herdar especifica uma propriedade deve herdar seu valor do elemento pai. Os links do produto herdarão essa cor para a seção do corpo e também os links de cabeçalho e rodapé herdarão o valor da cor da seção aqui. Vamos ver como isso fica no navegador. Bom. Agora temos os links de cabeçalho, a cor branca. Podemos ver os produtos têm esta cor cinza mais escura que corresponde
ao corpo e, em seguida, na parte inferior, temos os links brancos para a área do rodapé também. Podemos ver exatamente o que está acontecendo se entrarmos nas ferramentas div. Clique com o botão direito e inspecione Primeiro, vamos selecionar um de nossos produtos. No lado direito, e começamos a rolar para baixo. Podemos ver que herdamos da seção do corpo dele, e herdamos a família de fontes e também essa cor cinza que adicionamos. Clique nos selecionados mais e eu vou até os links de cabeçalho. Aqui podemos ver que herdamos do cabeçalho esta cor de branco. Podemos ligar e desligar isto e ver o efeito que isto tem. Feche as ferramentas div e agora com esses links atendidos, eu quero agora passar para o que é chamado pseudo-classes. Pseudo-classes são como uma extensão para um seletor CSS. Por exemplo, ainda podemos selecionar links com este seletor A, o que já fizemos aqui. Bem, por exemplo, apenas quando um mouse passa sobre eles ou se eles já foram visitados. Ou podemos selecionar um item de lista com li, assim como fizemos aqui. Mas apenas selecione o terceiro item em uma lista. Existem muitas pseudo-classes disponíveis, mas vamos dar uma olhada em algumas das mais comuns, começando com o pairar. Se descermos para o nosso elemento A para os nossos links e logo abaixo é uma seção, podemos adicionar um novo elemento A. Separados por dois pontos podemos adicionar o nome da nossa pseudo-classe. Para este caso eu vou usar o hover. Isso selecionará todos os elementos A quando o mouse passar sobre eles. Poderíamos fazer algumas coisas, como definir uma cor e adicionar valor hexadecimal de 0e69e9. Claro que isso pode ser qualquer cor que você está escolhendo. Vamos testar isso no navegador. Agora, para recargas e passar o mouse sobre qualquer um dos nossos links, agora
vemos esta cor azul que são válidos. Também os suprimentos, o produto também, e também a área do rodapé também na parte inferior. Se agora vamos para o nosso protocolo dentro do nosso index.html, vamos rolar para o nosso primeiro produto, que é apenas aqui. Aqui temos dois conjuntos de elementos p. Um para o preço e depois um para a descrição logo depois. Podemos usar uma pseudo-classe primeiro do tipo para selecionar o primeiro neste grupo, que será o nosso preço. Voltar para o styles.css. Assim como fizemos com os links, podemos primeiro selecionar nossos elementos adicionar dois pontos, e depois o nome da nossa pseudo-classe, que é o primeiro do tipo. Para este, também podemos definir a cor e vermelho ficará bem. Vá para o navegador, atualizar e agora podemos ver o primeiro conjunto de elementos p em cada seção agora foi definido como vermelho. No nosso caso, este é o preço e isso é repetido para todos os elementos também. Há também último do tipo também. Vamos mudar isso para ser o último do tipo. A cor vermelha também é boa e você provavelmente pode imaginar que
isso irá selecionar a descrição uma vez que atualizarmos, porque este é o último conjunto de tags P dentro do seu grupo. Isso também funciona para outros elementos, como nossos itens de lista. Por exemplo, podemos mudar p para ser li e isso irá selecionar o último item da lista em cada grupo. Por exemplo, o contato conosco para baixo na parte inferior, o mesmo para o cabeçalho, e também para cada grupo em uma barra lateral também. Não só podemos selecionar o primeiro ou o último elemento, podemos realmente selecionar qualquer um usando o enésimo tipo. Se quiséssemos o terceiro item da lista, poderíamos usar nth tipo que é N-T-H. Então vamos adicionar os colchetes logo após isso e se quisermos segmentar o terceiro item da lista no grupo, adicionamos o número 3, dar um salvamento. Ir para o navegador e agora fora terceiro item da lista em cada grupo agora está selecionado. Este número pode ser qualquer de nossa escolha. Eu só vou excluir este exemplo aqui e salvar isso e restaurar o projeto de volta para como ele era. Se falarmos da versão final do têxtil, vou lançar uma segunda guia. Se dermos uma olhada em nossas seções de produtos acabados
aqui, na parte inferior temos os links de mais informações e também adicionar ao carrinho. Usando esses pseudo-seletores, é assim que temos os botões como estilos diferentes. Adicionamos um CSS diferente para o último tipo. Vamos fazer isso na nossa versão. Se voltarmos para o CSS, desta vez na parte inferior, também
podemos direcionar o botão, os dois pontos, e depois último do tipo. Desta vez vamos aplicá-lo ao último botão de cada grupo. Vamos mudar a cor de fundo para o tipo azul que já vimos antes, que tem um valor hexadecimal de 0e69e9. Então, finalmente, uma cor para o botão de branco. Em seguida, vá para o navegador. Agora temos alguns links mais bonitos na parte inferior de cada produto. Esta é uma primeira olhada nas pseudo-classes e você pode ver como
elas são úteis para segmentar determinados elementos dependendo de seus estados.
42. Propriedade float e clear (início do CSS): Bem-vindos de volta a todos. Vamos dar uma olhada nos carros alegóricos e claro neste vídeo. Flutuadores são uma maneira de posicionar nossos elementos em uma página. Por exemplo, podemos flutuar uma imagem para a esquerda
e, em seguida, o resto do conteúdo será contornado no resto do espaço disponível. Isso provavelmente é melhor visto para entender melhor exatamente o que ele faz. Então, nesta página inicial, se você clicar em um Game Controller, e então vamos passar para os detalhes do produto. Quero que esta imagem que está aqui apareça no lado esquerdo. Temos todos estes textos de produtos e as informações no lado direito da imagem. Já vimos que isso pode ser alcançado usando tipos de exibição inline e inline-block, mas vamos nos concentrar em flutuadores neste vídeo. Se formos para o arquivo, que é o productdetail.html, vou adicionar uma nova classe ao produto para que possamos selecionar isso em CSS. Então, logo após a classe de produto, podemos adicionar uma segunda classe aqui dentro, e digamos detalhes do produto, e depois novamente no CSS, os seguintes estilos são aplicados especificamente a esta página Detalhes do produto. Então vamos adicionar um comentário. Então, um comentário CSS é uma barra, uma estrela, então nosso texto. Digamos que a página de detalhes do produto. Vou fechar isso com uma estrela e uma barra de frente de novo. Então eu vou fazer o produto div um pouco mais largo para que ele se encaixa a imagem e também o texto lado a lado. Vamos direcionar esta
classe de detalhes do hífen do produto e, em seguida, podemos definir a largura para ser 660 pixels. Então vamos economizar e ver como isso está parecendo. Recarregar. Ok, então a imagem é um pouco grande por enquanto, mas agora temos o contêiner definido para 660 pixels. Agora para flutuar. Queremos que a imagem flutue para o lado esquerdo, ou na verdade, podemos flutuá-la para ambos os lados. Mas no meu caso, eu quero que ele fique no lado esquerdo, e depois o texto sobre o lado direito. Então, portanto, podemos selecionar a imagem de detalhe do produto dentro do CSS com detalhes do produto e, em seguida, imagem. Então, para começar, vamos definir a largura máxima da imagem para 50 por cento, e isso é 50 por cento do contêiner. Então podemos flutuar isto para estar à esquerda. Na verdade, antes de fazermos isso, vamos deixar isso vazio e refrescar. Agora, você pode ver por padrão, temos a imagem e, em seguida, o texto que é nível de bloco em sua própria linha separada. Se seguirmos em frente e adicionarmos um flutuador e flutuarmos a imagem para a esquerda, vamos ver o efeito que isso tem. Ok, bom. Então, agora restringimos essa imagem a 50% ou metade da largura do contêiner e,
em seguida, flutuamos a imagem para a esquerda de todo o resto do conteúdo. Isso significa que o texto agora ocupa o espaço restante no lado direito. Agora, eu vou adicionar um pouco mais de texto a este produto para mostrar completamente o efeito que o flutuador tem. Se formos até a página Detalhes do produto
e, em seguida, na parte inferior do Adicionar ao carrinho, isso apenas abriu as tags p para adicionar algum texto. Se você estiver usando o código do Visual Studio como eu estou, podemos simplesmente digitar em lorem e, em seguida, clicar em “Tab”
e, em seguida, recebemos algum texto de exemplo que irá entre essas tags p. Caso contrário, você pode simplesmente escrever qualquer conteúdo que desejar. Solicite uma pesquisa no Google para Lorem Ipsum, que são estas duas palavras aqui, e então você poderá copiar e colar algum texto de amostra. Clique em “Salvar”, recarregar, e podemos ver imediatamente que agora há mais texto disponível. Podemos ver muito melhor agora a imagem está flutuando para a esquerda do resto do conteúdo, e então o texto restante está contornando o resto do espaço. Nós também podemos flutuar isso para a direita em vez de para a esquerda. Então vamos dar uma chance a isso. Refresque. Então o mesmo acontece, mas do outro lado. Também podemos definir isso como “Nenhum”. Agora, estamos de volta para onde começamos sem flutuação ocorrendo, e então o texto em nível de bloco aparecerá na próxima linha. Então os carros alegóricos são realmente úteis para esse tipo de coisa. Mas, como a maioria das coisas, há algumas desvantagens. Antes de muito mais recentemente, outras técnicas foram criadas, os carros alegóricos eram e às vezes ainda são usados para criar uma página web completa. Muitas vezes você veria o flutuador de conteúdo principal é
à esquerda e também uma barra lateral à direita. Isso funciona, mas quando usamos esses carros alegóricos, algo estranho pode parecer acontecer. Para mostrar isso mais claramente, vou configurar uma div simples logo acima do rodapé. Temos uma imagem e um texto lá dentro. Então vamos para os detalhes do produto
e, em seguida, para a área do rodapé. Apenas rolando para baixo. Então, apenas entre este principal e rodapé, vamos configurar uma div simples. Em primeiro lugar, com uma imagem e a fonte. Isso pode ser qualquer imagem [inaudível] usar um da pasta de imagens. Agora, digamos que o controller.jpg. Em seguida, o texto nas tags p de 'Olá'. Então, vamos até a página Detalhes do produto no navegador e, em seguida, atualizar, e há nossa imagem e o texto lá na parte inferior. Então isso parece como esperaríamos dentro do navegador. Então vamos voltar para o editor de texto e adicionar um flutuador a esta imagem. Então inline é bom. Para este exemplo, vamos definir o flutuador para estar à esquerda. Agora, vamos ver como isso fica quando atualizarmos. Assim podemos ver imediatamente que algo estranho aconteceu. O conteúdo abaixo, que foi uma div para esta área de rodapé, agora se move ao lado de nossa imagem. Mas queremos que isto seja bem no final da página, pois é um rodapé. Se formos para as ferramentas do desenvolvedor, clique com o botão direito do mouse e “Inspecionar”. Vamos dar uma olhada e ver o que está acontecendo. Se formos em frente e clicar na seta e, em seguida, selecionar a div pai, e esta é a div que adicionamos para a imagem eo texto de 'olá'. Então vamos para a imagem, e esta é a div pai aqui. Podemos ver se passarmos por cima desta div aparecendo aqui, vemos algumas dimensões. Então a div tem 1.000 pixels de largura por 19,2. Então isso mostra a div como tendo apenas a mesma altura o texto deste texto 'Olá' aqui dentro do recipiente. Não parece levar em conta a altura da imagem. Isso ocorre porque os itens flutuados não afetam a altura do contêiner pai. Isso significa que essa área de rodapé abaixo basicamente ignora essa imagem e é empurrada até a altura do texto 'hello'. Podemos corrigir isso definindo o estouro para ser automático no contêiner. Então vamos para a nossa div e podemos definir o “Estilo”, e depois adicionar o estouro de auto, voltar e atualizar, e rolar para baixo. Agora, nosso rodapé está de volta ao fundo. Se você voltar para essas DevTools e descer para a div, que já vimos antes, dê um clique. Agora podemos ver na tela, vamos rolar para cima, que a altura da div é agora 425 pixels, que também é responsável pela altura desta imagem também. A solução para este problema flutuante é chamada de clearfix. Esta propriedade de estouro irá corrigir o problema na maioria dos navegadores. Você também pode fazer uma pesquisa do Google para o micro clearfix e você vai encontrar pequenas soluções CSS para este problema. Isso também se tornará menos um problema para você quando começarmos a
olhar para o CSS Grid e Flexbox mais tarde no curso, vez de usar apenas float para layout. Então vamos fechar isto. Só para recapitular, quando usamos um elemento flutuante, assim como esta imagem, a altura não é levada em conta, é por isso
que esta área de rodapé foi empurrada para cima abaixo deste texto aqui, que não foi flutuada. Então isso é algo que é realmente fundamental para entender quando se usa carros alegóricos. Também quando se trabalha com flutuadores também, há também outra propriedade CSS a ser ciente,
e isso é chamado de claro. Mais uma vez, isso é provavelmente melhor visto na prática para entender. Primeiro vou modificar este exemplo para ter um elemento flutuado à esquerda e também à direita. Então, no momento, temos a imagem que é flutuada para a esquerda. Agora, vamos em frente, abrir as tags p e flutuar isto para a direita. Então Style, flutue para a direita, ponto-e-vírgula no final. Então vamos adicionar um terceiro elemento que não é flutuado. Assim, alguns textos simples servirão para isso. Então, digamos que não flutuou e “Salvar” que, vá para o navegador e, em seguida, atualize. Então, no momento, temos a imagem que é flutuada para a esquerda, o texto à direita e um [inaudível] apenas para tornar isso mais simples. Vamos adicionar “Flutuado” lá. Então temos a imagem flutuada à esquerda. Temos o texto flutuado à direita. Em seguida, o texto não flutuado no centro. Este texto não flutuado está ao lado da imagem, e também na mesma linha que o texto flutuado. Limpar vamos especificar este elemento não flutuado pode ser colocado ao lado destes flutuados ou não. Se voltarmos para as tags p e, em seguida, também adicionar uma propriedade style. Vamos dizer, limpar o flutuador esquerdo, sobre o navegador e atualizar. O texto não flutuado agora aparece abaixo. Isto é porque estamos basicamente dizendo que este elemento não flutuado não é permitido para ser colocado ao lado desta imagem que é flutuado para a esquerda. Também podemos declarar que não queremos que ele seja posicionado ao lado do elemento flutuado direito também. Podemos mudar isso limpando a direita. Agora está ao lado do texto flutuado ambos na próxima linha. Então isso diz ao navegador para não colocar isso ao lado de quaisquer elementos flutuados à direita. É por isso que ele aparece abaixo em sua própria linha separada, ou podemos ir em frente e limpar a esquerda e a direita juntos
definindo esse valor claro para ser ambos e, em seguida, atualizar. Agora, o texto está abaixo dos elementos flutuados esquerdo e direito. Então agora eu vou para ir em frente e remover essas seções div extra como nós não precisamos disso dentro do projeto e, em seguida, “Salvar” isso. Também podemos garantir que a imagem de detalhes do produto seja flutuada para a esquerda
e, em seguida, nosso projeto está de volta ao normal. Além disso, podemos remover este texto Lorem Ipsum extra. Então vamos voltar para o produto e remover esta longa seção do texto, e lá vamos nós. Então é assim que podemos usar float e clear. Pode ser um pouco difícil se você não viu isso antes. Mas esta é apenas uma das peculiaridades que você vai encontrar ao construir sites.
43. A propriedade de posição (início do CSS): Agora sabemos como usar carros alegóricos para flutuar nossos elementos para a esquerda ou para a direita. Outra propriedade CSS importante que podemos usar para
posicionar nossos elementos é a propriedade position. Isso nos dá vários métodos de colocação ou ajuste onde queremos que um elemento apareça na página. Existem cinco valores de posição que podemos usar chamados; estático, relativo, absoluto, fixo e pegajoso. Para demonstrar isso, precisamos de um elemento para trabalhar. Qualquer elemento em nosso HTML será bom, então eu vou passar para o detalhe do nosso produto
e, em seguida, selecionar um elemento. Na verdade, vamos para o índice onde há mais produtos
e, em seguida, vamos selecionar elementos como este botão na parte inferior. Vamos até aqui e adicionar uma identificação a este botão, e qualquer nome está bem. Vou chamar esta posição, e depois guardar isso. Então, se formos para o CSS como de costume, podemos ir para baixo e alvo isso com o hash, e então o nome que vamos posicionar. O valor padrão para posição é estático. Isto significa simplesmente que os elementos serão colocados onde normalmente estariam no fluxo, ou os documentos. Isso pode estar no canto superior esquerdo, como vimos anteriormente, com elementos bloqueados, ou a próxima posição na linha se for um elemento Inline. Definir propriedades CSS, como superior, inferior, direita ou esquerda, não tem efeito em compensar esses elementos. Vamos dar uma chance a isso. Vamos adicionar 10 pixels ao topo, e também a página de índice. Podemos ver este botão Adicionar ao carrinho não se moveu em tudo, porque ele só ocupa a posição em que normalmente estaria. Se quiséssemos que essas compensações se aplicassem, poderíamos mudar a posição para ser relativa. Essa é a nossa oposição de parente logo acima disso. Agora, salvamos e voltamos para o navegador e depois atualizamos. Agora, o botão foi empurrado para baixo a partir do topo por 10 pixels. posicionamento relativo coloca os elementos onde normalmente estariam, como era antes. Mas também leva em conta quaisquer valores superior, inferior ,
direita ou esquerda para compensar os elementos. Você também pode ver que mover esses elementos não
afetará a posição de nenhum dos nossos elementos circundantes. Em seguida, temos absolutos, então mudar relativo para ser absoluto. Depois, para o navegador, vamos vê-lo salta para a nossa casa. Agora está no topo da página web, absoluto fará com que os dois últimos valores que olhamos. Tiraremos os elementos do fluxo normal do documento. Isso significa que você não será colocado no próximo espaço disponível. Na verdade, não há espaço criado para isso. É por isso que está no topo acima de outros elementos. Atualmente, o valor superior de dez pixels entra em vigor, se for passar por cima e adicionar um novo valor, então vamos adicionar a esquerda, também 10 pixels, atualizar. Agora, ele acabou de colocar dez pixels do topo e dez pixels da esquerda. Esta posição tem como padrão ser referenciado na parte externa da página da Web, ou para o mais preciso, os elementos de contêiner HTML. Também podemos alterar os elementos que é referenciado, se não queremos usar os elementos HTML. Tudo o que precisamos fazer é definir a posição de outros elementos pai para ser relativa. Se quiséssemos que o botão fosse referenciado a partir deste contêiner principal, por exemplo, ao redor dos produtos, poderíamos ir até o tanque principal na página de índice, e então poderíamos adicionar uma propriedade de estilo CSS. Aqui, podemos definir a posição para ser relativa, e ver como isso a afeta com uma atualização. Agora, isso é referenciado 10 pixels da parte superior e esquerda do contêiner relativo principal, ou se quiséssemos que ele fosse referenciado a partir deste primeiro produtivo, poderíamos fazer exatamente o mesmo aqui. Em vez de administrar domínio, poderíamos remover isso e, em seguida, adicioná-lo à div com a classe de produtos, atualizar. Agora, isto é referência ao canto superior esquerdo deste primeiro produtivo. Eu só vou remover este estilo inline e depois economizar. Esse valor absoluto nos dá muita flexibilidade, mas precisamos ter cuidado também,
pois as coisas também podem se mover à medida que o navegador é esticado. Isso significa que precisamos ter muito cuidado ao usar absoluto. Agora, vamos passar para a posição fixa. Em vez de absoluto, altere isso para ser corrigido. Agora, podemos oscilar o canto superior esquerdo, são cinco agora. Se salvarmos e passar para o navegador, não
vemos nada parece diferente no início. Quando este botão foi referenciado a partir do HTML, vemos que o elemento também é removido do fluxo dos documentos, assim como era com absoluto. Além disso, podemos ver os valores superior e esquerdo ainda entram em vigor. Para ver exatamente o que ele faz, podemos precisar de um pouco mais de conteúdo na página. Vou copiar nossos seis produtos. A primeira div da classe de produtos
e, em seguida, role para a direita até o último, que é pouco antes da tag principal aqui. Copie isso e cole-os mais uma vez. Agora temos 12 produtos e, em seguida, atualizar. Então, se formos em frente e rolar para baixo
a página, o botão permanece em sua posição fixa no canto superior. Muitas vezes, você pode encontrar isso para coisas como uma caixa de inscrição de e-mail, que você costuma ver no canto inferior. Finalmente, também temos a opção pegajosa. Podemos alterar a posição para ser pegajoso, ou qualquer style.css. Mas desta vez vamos segmentar o lado, salvar, e depois para o navegador e atualizar. Agora, à primeira vista, nossa página olha para trás ao normal. Parece não ser nada diferente do que era originalmente. Mas se formos em frente e rolar para baixo, em vez de a barra lateral ser movida para cima com o resto dos produtos, ele permanece no lugar à esquerda da tela. Muitas vezes, você verá essas quatro navegações ou menus. Eles são sempre visíveis para o usuário. Vou remover esta seção de lado, e depois dar um salvamento. Também podemos remover o resto desses produtos que você adicionou. Só vou desfazer isso, deixando os seis produtos originais. Bom. É assim que usamos a propriedade position para ter um melhor controle de colocar nossos elementos na tela.
44. Estilizando formulários e tags de inputs (início do CSS): Quero agora passar para a página Fale Conosco para adicionar um estilo específico a este formulário. Esta é a nossa versão atual aqui, mas se
formos para a página Fale Conosco na versão final, podemos ver que parece um pouco diferente, mas ele gerencia o caso de adicionar algum espaçamento e alinhamento. Você pode, é claro, ir em frente e fazer isso sozinho se você se sentir confiante fazendo isso, mas se não, apenas acompanhe comigo. Vamos começar passando para o style.css e agora podemos ir em frente e fazer um comentário. Aqui dentro podemos adicionar o Fale Conosco e agora podemos ir em frente e segmentar nosso formulário. Podemos adicionar alguns estilos básicos, como preenchimento. Assim, um preenchimento de dez pixels, que naturalmente aparecerá dentro do elemento de formulário. Em seguida, para adicionar algum espaçamento na parte superior e inferior do formulário. Podemos adicionar alguma margem. Dez pixels na parte superior e inferior, e zero na esquerda e na direita. Também podemos tornar isso um pouco mais amplo, então digamos 600 pixels. Dê um salvamento e, em seguida, atualize. Agora temos alguns estilos básicos para a nossa forma. As coisas também pareciam muito melhor se essas quatro primeiras entradas também estivessem alinhadas. No momento, as quatro áreas de entrada são todas empurradas até a borda do texto no rótulo, de fato. Para fazer isso, vou adicionar uma classe personalizada, essas quatro primeiras seções div. Sobre o Fale Conosco ou contact.html. Vamos dar uma olhada nas primeiras quatro divs que começam com o nome. Vamos adicionar uma classe de inline. Então vamos copiar isso e colá-lo para o e-mail, também para a mensagem e então nós também temos o assunto, que é esta seção aqui, então para a div de abertura para a seção dois, certifique-se de que nós salvamos isso e então nós podemos direcione isso no CSS, começando com a definição da largura do rótulo de texto,
como.inline para a classe
e, em seguida, selecione o rótulo. A largura pode ser qualquer valor de nossa escolha, mas eu vou
para 100 pixels. Dê um salvamento a isso. Em primeiro lugar, se nos
atualizarmos, podemos ver que não há mudança. Isso ocorre porque, como já
mencionamos, podemos definir a largura para elementos inline e por padrão, Rótulo é inline. Então eu vou passar para o CSS e alterações para ser bloco inline para que ele possa afetar a largura. Bom. Isto é mais parecido com ele. Temos agora um rótulo mais amplo que alinha essas entradas à direita. Mas essas entradas também ficaria melhor sendo um pouco mais amplo. Podemos marcar certas entradas com base no nosso tipo de entrada. Primeiro de tudo, se nós definir as entradas e, em seguida, abrir os colchetes, nós podemos então marcar apenas o tipo de texto e, em seguida, separados por vírgula, nós também podemos marcar as entradas com o tipo de e-mail também, e vamos abrir as chaves como normalmente fazem. Para estes dois primeiros, vamos adicionar o preenchimento de 10 pixels, e então podemos torná-los um pouco mais largos, então vamos para 400 pixels, sobre o navegador. Bom. Isto parece um pouco melhor, mas podemos ver esta área de texto ainda é menor do que as outras entradas. Temos algumas opções aqui. Poderíamos voltar para o código HTML e adicionar mais colunas, uma vez que temos as colunas e linhas atributos
na área de texto ou podemos substituí-los em CSS, também direcionando a área de texto. Agora, se recarregarmos todas as entradas são agora a mesma largura. Apenas para embrulhar isso, vamos adicionar alguma margem também em torno de cada um desses elementos div apenas para adicionar algum espaçamento para a parte superior e inferior. Podemos fazer isso selecionando o formulário e, em seguida, cada div que se segue. Vamos definir a margem para 10 pixels na parte superior e inferior, e zero à esquerda e à direita. Lembre-se que isso vai amarrar todos os elementos div que são um filho direto da Forma. Então recarregue e agora tenha algum espaçamento na parte superior e inferior de cada seção div. Bom. Este formulário agora parece muito melhor com um espaçamento mais uniforme. Em seguida, é a sua chance de obter um pouco mais de prática adicionando os estilos finais a este projeto.
45. Hora da prática: estilo final do projeto (início do CSS): Percorremos um longo caminho na seção e agora, espero que você sinta muito mais confiança ao usar CSS. Gostaria agora que você vá em frente e adicione alguns estilos finais e toques finais a este projeto. Em particular, eu gostaria que você adicionasse um pouco mais de altura a este cabeçalho e também a área de rodapé na parte inferior. Além disso, se alinharmos os links de cabeçalho, estes aqui, e também a caixa de pesquisa para o lado direito, assim como se você visitar a versão final aqui. Empurre tudo para o lado direito. Além disso, se definirmos os alinhamentos de texto nos produtos para o centro, assim como você vê aqui. [ inaudível] são alinhados à esquerda. Finalmente, na página de detalhes do produto, você clicaria neste “Game Controller”. Um pouco de estilo também para esta mesa na parte inferior. Ainda não abordamos Tabelas de Estilo, mas você pode usar todas as mesmas técnicas que já conhece, como adicionar margens e preenchimento aos elementos individuais da tabela. Isto é o que eu gostaria que você fizesse. Lembre-se, não há caminho certo ou errado. Ambos eu vou ser executado através deste
no próximo vídeo para mostrar como eu cheguei a esta versão final.
46. Solução: estilo do projeto final (início do CSS): Espero que todos tenham conseguido completar o projeto final. Desafio de estilo. Lembre-se, embora não haja uma maneira certa ou errada de fazer isso. Boots agora vai correr através dos estilos finais para a minha versão, começando com a adição de um pouco mais de altura para o “Cabeçalho” e o “Rodapé”. Então vamos para o styles.css, e se formos para o topo, já
estamos direcionando a área “Cabeçalho” e “Rodapé”. Então, tudo o que precisamos fazer é adicionar um pequeno estofamento, para acolher o interior das dibs. Então 20 pixels na parte superior e inferior, e 10 pixels na esquerda e direita “Atualizar” e agora temos um pequeno preenchimento dentro do “Cabeçalho” e a área “Rodapé” na parte inferior. Em seguida, podemos fazer este título do site no topo, ocupar 70 por cento do peso para o cabeçalho, que irá então empurrar sobre os links na caixa de pesquisa para o lado direito. Então vamos descer para o cabeçalho h1, então vá para o cabeçalho li, o cabeçalho h1 aqui. Em seguida, vamos para o título h1 cabeçalho
e, em seguida, definir a largura para ser 70 por cento. Vamos ver como isso está parecendo. Ótimo, então isso faz com que os links e a caixa de pesquisa se movam para a direita. Se você abrir as ferramentas de desenvolvedor e, em seguida, destacar a seção, podemos ver o efeito do que acabamos de fazer. Isso agora leva 70 por cento para o cabeçalho, empurrando todo o resto para a direita. Então esta técnica trabalha com esses projetos, mas mais tarde vamos olhar para soluções mais elegantes, quando começarmos a olhar para a flexbox e a grade. Esse tipo de soluções permitirá que esse layout também
funcione em diferentes tamanhos de tela também. Em seguida, se passarmos para definir o texto do produto a ser alinhado no centro da div. Nós já temos um produto div aqui. Então vamos adicionar mais uma propriedade CSS do centro text-align. Lá vamos nós. Agora, no estilo para a tabela, também
podemos segmentar a tabela com os elementos da tabela, assim como estamos fazendo com os elementos anteriores. Então vamos em frente e adicionar um comentário, então adicione “Tabela” dentro de lá. Então, vamos começar selecionando os “elementos da tabela” e torná-lo um pouco mais amplo. Então eu vou para 400 pixels, definir a linha de texto para estar à esquerda de cada célula. Em seguida, adicione também alguma margem para a parte superior e inferior. Então 20 pixels na parte superior e inferior e zero à esquerda e à direita. Vamos ver como isso está olhando, selecione o “Controlador de jogo”. Então agora temos alguma margem no topo e no fundo. Se selecionarmos o desenvolvedor “Ferramentas”, então destaque nossas células da tabela, podemos ver por esta seção azul, todo o texto está alinhado à esquerda. Vamos fechá-lo e então podemos passar para esta área de legenda no topo. Apenas para dar-lhe um pouco mais de estilo e também algum preenchimento na parte inferior para mantê-lo longe da mesa. Então temos o seletor de legendas. Então vamos começar definindo o peso da fonte para ser negrito. Podemos definir isso para ser itálico com o estilo da fonte. Então vamos definir isso para ser itálico, então podemos adicionar uma borda. Então, anteriormente, usamos fronteiras em torno de nossos produtos, e estes, por padrão, se aplicam a todos os quatro lados. Podemos adicionar lados individuais, então se quiséssemos uma linha logo abaixo deste texto aqui, poderíamos adicionar uma borda inferior. Então, em vez de borda, podemos adicionar borda inferior. Então, um limite de um pixel e sólido. Na verdade, vai fazer isso pontilhado para este exemplo,
e, em seguida, algum preenchimento de 10 pixels para dar algum espaçamento do navegador, “Atualizar”. Existe a nossa linha pontilhada, e agora o pequeno espaçamento adicionando 10 pixels de preenchimento. Então estamos quase lá agora com a tabela, tudo o que queremos fazer é também adicionar algum preenchimento a esses valores de célula. Lembre-se que temos o cabeçalho da tabela, que é o th tags, e então os dados têm as tags td. Então, podemos ir em frente e selecionar ambos no CSS. Nós temos th, td e, em seguida, preenchimento 10 pixels, “Refresh” e apenas para terminar esta tabela fora, eu vou também adicionar um estado de foco com uma pseudo-classe. Assim, cada vez que passarmos o mouse sobre uma dessas linhas, a cor de fundo será destacada. Então, vamos selecionar a “Linha da tabela” e, em seguida, adicionar a pseudo-classe hover. Então, cada vez que passar o mouse sobre a linha, podemos alterar a cor de fundo para ser um valor x de F5-F5-F5. “ Recarregar” e é tão cor de fundo. Então, se ampliarmos, seremos capazes de ver isso um pouco melhor. Este é agora para todos os estilos que são adicionados a este projeto. Espero que você tenha conseguido adicionar alguns deles você mesmo e fazer o seu parecer ainda melhor do que o meu. Em seguida, vamos para o vídeo final nesta seção, onde vai olhar para a cascata e herança.
47. Especificidade e a cascata (início do CSS): Nós vamos terminar esta seção CSS olhando algo que tropeçar um monte de novos desenvolvedores. Esta é a cascata e a especificidade. Vamos começar com a cascata. Em última análise, a cascata determina quais estilos CSS são aplicados a um elemento. Isso é baseado em uma série de fatores que veremos neste vídeo. Por exemplo, se você tiver vários seletores CSS, todos direcionando elementos H1, ou se você tiver mais de uma folha de estilo, também com algumas regras para os elementos H1, qual deles acabará por ganhar? A resposta é a mais específica, os rils vão em cascata desde
o mínimo ou o mais geral até o rill mais específico para os elementos. Provavelmente a maneira mais geral e simples de decidir é a ordem de origem. Se você tiver mais de um seletor apontando para os mesmos elementos, o último em nosso código-fonte irá substituir é antes dele. Vamos passar para o nosso CSS e ver isso em ação. Vamos direcionar os elementos H1, que é o título do site. Defina a cor para ser qualquer valor, como vermelho, e adicione uma segunda propriedade CSS. Em seguida, defina a decoração do texto para ser sublinhada. Então, sob isso, também podemos adicionar um segundo rill H1. Selecione qualquer cor ou roxo. Agora temos dois seletores CSS, ambos direcionados para o H1. Vamos recarregar o navegador e ver qual deles tem efeito. Podemos ver que temos esta cor roxa e também o sublinhado. Isso ocorre porque o código é vermelho de cima para baixo, que
significa que esta decoração de texto daqui ainda será usada. Ambos os valores de cor de vermelho serão então substituídos com seu valor de roxo, que aparece depois dele. Nós também podemos ver como isso funciona ao longo de uma necessidade ferramentas de desenvolvedor. Se clicar com o botão direito do mouse e, em seguida, inspecionar,
e, em seguida, se selecionar este cabeçalho na parte superior de H1. No lado direito podemos ver os estilos que se aplicam. Os seletores à direita estão todos se aplicando a este H1. Vamos olhar para a ordem em que ele está se candidatando em breve. Mas a coisa a notar aqui é que esta cor vermelha está sendo riscada. Em seguida, a cor roxa é então feita efeito. Esta ordem de origem também se aplica quando estamos executando várias folhas de estilo. Se formos para o nosso index.HTML
e, em seguida, até a seção superior. A folha de estilo inferior sempre substituirá qualquer folha de estilo acima. Esta é a razão pela qual nós geralmente queremos colocar nossas próprias folhas de estilo personalizadas para baixo, possamos adicionar estilos personalizados que substituirão qualquer um de cima. A próxima coisa a afetar a cascata é a especificidade. Este é o quão específico um seletor é. Se voltarmos para o nosso styles.CSS em nosso exemplo aqui. Ambos os seletores são H1,
portanto, eles são igualmente específicos. Quando isso acontecer, como acabamos de ver, ordem de
origem terá prioridade. Vamos dar uma olhada em como calculamos como os seletores são específicos. À esquerda, temos alguns exemplos de um seletor. Em seguida, no lado direito, vemos quantos pontos responderam por seletor. O primeiro exemplo na primeira linha, vemos que H1 ou P, que é um elemento padrão, tem um ponto e isso é um ponto por seletor. Atualmente nosso H1 só vale um ponto. Na segunda linha, uma classe ou um atributo, ou mesmo uma pseudo-classe, que já vimos, conta para 10 pontos. Na terceira linha, vemos que um seletor de ID, como o ID do produto que você já usou, vale 100 pontos. Então vemos na parte inferior 1.000 pontos é para os estilos inline. Isto é quando adicionamos o atributo de estilo aos elementos HTML. Podemos ver a partir desta tabela aqui que o H1 apenas tem um único ponto. Isso é o que estamos direcionando atualmente no CSS. Na segunda linha temos recipiente ponto, H1. Nós ainda temos o nosso ponto único com o título de nível um, que está aqui, nós também vamos obter 10 pontos para esta classe. Isso é mais específico do que H1 porque agora temos 11 pontos. Logo abaixo disso que já vimos antes, isso é uma identificação, tem 100 pontos. Então, como mencionamos, um seletor CSS normal, como P, é um único ponto. Este centro foi um 101 pontos, tornando-o mais valioso do que os dois primeiros. Nós também mencionamos que, como pseudo-classe, como pairar, se olharmos para o primeiro slide vale 10 pontos. Temos nossos 10 pontos aqui para a pseudo-classe, e então temos dois seletores, que é o LI e depois o A, deixando um valor total de 12. Voltar ao nosso CSS. Vamos adicionar alguns comandos ao topo de cada um
deles e descobrir quantos pontos só podemos ter. Aqui é onde se não há centenas, nem dezenas, nem milhares. Este é atualmente um único ponto, copie este e, em seguida, cole este abaixo. Temos dois elementos iguais, ambos valem pontos únicos. Podemos ser mais específicos adicionando um cabeçalho. Vamos adicionar cabeçalho H1 para o primeiro seletor. Agora temos dois elementos. Isso agora equivale a dois pontos no total. Agora isso é mais específico. Agora devemos ter uma cor de vermelho com o pontual. Vamos atualizar, e lá está a nossa cor vermelha do cabeçalho. Se voltarmos a fazer o jogo adicionando um cabeçalho para o segundo elemento, este é agora também temos dois pontos,
e, portanto, a ordem fonte irá então declarar roxo o vencedor. Refresque-se, e lá vamos nós. Vamos tentar outra coisa. Se passarmos para o nosso index.HTML e, em seguida, descer para o cabeçalho. Vamos adicionar uma classe a este cabeçalho, e cabeçalho é bom. Então podemos mudar o CSS. O primeiro para adicionar o ponto e fazer disso uma classe. Nós ainda temos o seletor de elementos únicos aqui, que vale um ponto. Mas desta vez também temos uma classe que vale 10 pontos iguais a 11. Agora temos 11 pontos para o primeiro. Devemos esperar que a cor vermelha ganhe novamente. Guarde isso, atualize, e veremos que o vermelho ganha. Como seria de esperar, mudar ambos para ser uma classe com os pontos também fará com que este 11 pontos e, em seguida, voltar para a ordem fonte, o significa que a cor será roxa. Era sobre a identificação. Vamos passar para o índice HTML em vez de uma classe. Podemos mudar isso para ser uma identificação e depois para as folhas de estilo. Primeiro de tudo, em vez de um ponto, podemos adicionar um áspero porque este é um ID, e agora teríamos um total. Isso nos dá um total de 101, obtemos um 100 pontos para uma ID e um para um único seletor. Guarde isso, atualize, e agora o vermelho ganha. Esperemos que isto comece a fazer sentido agora à medida que olhamos para mais exemplos. Também vimos nos slides que estilos embutidos contam para 1.000 pontos. Este deve ser o mais específico e vencer. Vamos passar para o H1, com
o qual estamos trabalhando como um estilo embutido. Desta vez vamos definir a propriedade color para ser azul. Isso agora vale 1.000 pontos. Isto vale um 101. Agora a cor azul deve vencer. Embora isso valha a maior parte dos pontos e vitórias, há uma coisa ainda mais dominante, e esta é a declaração importante. Mesmo que tenhamos esse estilo embutido no HTML, podemos adicionar essas declarações importantes
no CSS para indicar que queremos que o estilo ganhe. Após os vermelhos, podemos adicionar um ponto de exclamação e, em seguida, responder a tag importante. Poupe isso, e agora temos o vencedor como vermelhos. Mesmo que o valor de pontos é ainda menor, então a espera de ordem, é esta declaração importante primeiro, em
seguida, segundo é quão específico este seletor i e, em seguida, finalmente, a ordem de origem. A única maneira de realmente substituir esta declaração importante é adicioná-la novamente na ordem de origem. Vamos remover o estilo daqui, e nós também podemos remover essa idéia de cabeçalho dois, salvar esse arquivo. Então também podemos ir para dois títulos de nível um, e também remover os comentários. Agora, esses valores acima de igual. Se agora formos em frente e adicionar a declaração importante para ambos os seletores, a ordem fonte deve ganhar. Vá para o navegador e atualize, e agora estamos de volta para o H1 roxo. Também é recomendado usar apenas importante como último recurso. Devemos usar seletores mais específicos sempre que possível. Isso ocorre porque muda a forma como a cascata funciona. A depuração geralmente pode ser mais difícil, especialmente em projetos maiores. Agora vamos remover esses dois títulos de nível 1 e, em seguida, salvar esse arquivo, e restaurar nosso projeto de volta ao normal. Então estes são os fatores que determinam quais CSS rills finalmente entram no navegador para o usuário ver. Pode parecer bastante complicado, mas realmente é apenas um caso de entender quanto peso cada seletor carrega.
48. O que é um design responsivo? (Design responsivo): Ao construir nosso projeto até agora, não
pensamos muito em como isso ficaria em diferentes tamanhos de tela. Aqui vemos um exemplo onde temos a área de conteúdo principal com uma barra lateral. Isso é comum para visualizar sites em desktops em dispositivos de tela maior. Mas e quanto a tablets móveis ou pequenos? Se tivermos apenas um tamanho de tela pequeno, todos esses itens lado a lado, como este podem não fazer sentido. Se tivermos menos espaço disponível, talvez
queiramos que esses itens sejam a largura total
do contêiner ou, como você pode ver aqui em tamanhos menores, muitas vezes
você verá as seções empilhadas umas sobre as outras. Aqui vemos agora apenas os itens empilhados, mas também temos as seções de cabeçalho, principal e rodapé preso também. Isso geralmente proporciona a um usuário de celular ou tablet uma melhor experiência, pois o conteúdo é otimizado para o tamanho da tela. Uma maneira de fazer isso é criar um site como já fizemos para desktops. Em seguida, crie também uma versão dedicada para dispositivos móveis e tablets. Outra maneira popular é o que é chamado de web design responsivo. Como ele soa, web design responsivo é uma abordagem que permite que um design para mudar ou responder não apenas ao tamanho da tela, mas também à orientação e tipo de dispositivo. Isso significa que podemos usar o mesmo código, mas com alguns ajustes baseados no dispositivo em que ele foi visualizado. Podemos ver o problema se voltarmos ao nosso projeto e, em seguida, redimensionar o navegador. Se clicarmos no canto do navegador e, em seguida, arrastá-lo através, vemos alguma capacidade de resposta porque definimos a barra lateral
à esquerda e a seção principal aqui para ser bloco in-line. Se tornarmos o navegador ainda menor, começamos a ver que
os produtos começam a ser empurrados para fora da borda da viewport ou da área visível. O Google Chrome também tem outra ferramenta para ajudarmos. Se clicar com o botão direito e ir para inspecionar, no canto superior esquerdo ao lado deste inspetor que temos usado também temos a barra de ferramentas do dispositivo. Dê um clique a isto. Se você não estiver usando o Chrome, isso não é um problema. Você pode reduzir o navegador para um tamanho menor como este ou se seu navegador tem um visualizador semelhante, vá em frente e abra isso. Isso nos dará uma lista de dispositivos populares para visualizar nossos designs ou como coisas como iPhones, iPods e também alguns dispositivos Android. Se vai olhar através de alguns dos dispositivos fora basicamente parece uma versão ampliada do site desktop. Vamos tentar uma tela maior, como um iPod. Tudo o que estamos fazendo aqui é apenas diminuir o zoom para caber todo o conteúdo na tela. Não vemos nenhum conteúdo ajustando ou preso como vimos nos slides. Isso ocorre porque ainda não tomamos quaisquer medidas para tornar o site responsivo, mas isso é algo que vamos começar
a fazer no próximo vídeo quando dermos uma olhada na meta tag viewport.
49. A meta tag viewport (Design responsivo): No último vídeo, demos uma olhada nas Ferramentas
do desenvolvedor do Chrome e como podemos visualizar nosso site em dispositivos de tamanhos diferentes. Atualmente, se você der uma olhada em nosso site em um tamanho menor de smartphone, podemos ver o que parece apenas com uma visualização normal de desktop. Mas reduziu o zoom para caber todo o conteúdo na tela. Quando cobrimos a estrutura básica de uma página web no início do curso, falamos sobre o uso de meta tags. Que podemos adicionar na seção de cabeça para adicionar algumas informações adicionais sobre nossos sites. Neste vídeo, veremos uma nova tag chamada meta tag viewport. Isso é importante para o design responsivo. Se você não tiver essa meta tag viewport no lugar, como vimos no último vídeo, e agora mesmo, dispositivos
menores renderizarão nossa página no tamanho da área de trabalho, mas serão dimensionados para caber na tela. Isso significa que os usuários não precisam continuar rolando pela página para ver todo o conteúdo. Esta tag viewport nos dá controle de como queremos que nossas páginas apareçam. Nós adicionamos exatamente como qualquer um de um metatag que nós usamos. Logo abaixo deste primeiro metatag, podemos abrir um novo, mas desta vez dar-lhe um nome igual viewport, e depois fechar fora. Se dermos a isso um Salvar e, em seguida, passar para o navegador e atualizar, vemos que nossa visualização não parece diferente do que era antes de adicionar esta tag. Para que quaisquer alterações entrem em vigor, precisamos definir a largura que queremos que nosso conteúdo seja. Vamos ao nosso metatag e adicionar os atributos de conteúdo. Em seguida, podemos definir a largura para ser igual em digamos 300 pixels. Agora, se guardarmos isso e depois recarregarmos. Podemos ver por esta seção branca do navegador da esquerda para esta parte direita que este conteúdo está agora definido para 300 pixels. Podemos também ver que, após este lado direito, estes produtos fora desta largura. Porque eles têm um tamanho fixo e eles não podem esticar ou encolher dependendo do tamanho da tela. O navegador ainda precisará diminuir o zoom para caber em todos esses produtos. Tamanho científico como este geralmente é desencorajado devido às muitas variantes em tamanhos de tela. Portanto, podemos voltar para o metatag e, em seguida, mudar isso. Em vez de ter uma largura igual a um tamanho fixo, podemos definir isso para ser igual
à largura do dispositivo e certifique-se de que todos estes entre as cotações. Fazer isso não só faz com que quatro tamanhos de tela diferentes, mas também caiam quando um dispositivo é girado para. Além disso, se não queremos que o navegador para diminuir o
zoom para ver o resto dos produtos que vai voar. Podemos definir a escala inicial para ser igual a um. Ainda entre uma citação, você pode adicionar uma vírgula e, em seguida, definir a escala inicial para ser igual a um, dar que um Salvar. Recarregue o navegador e, se você não vir quaisquer alterações, talvez seja necessário fechar as Ferramentas
do desenvolvedor para baixo e, em seguida, voltar para este efeito take. Lá vamos nós. Agora, o conteúdo é cortado na borda porque o navegador não está mais ampliando para exibir todo o conteúdo. Além disso, como nota lateral, alguns telefones manterão a mesma largura ao girar e diminuir o zoom, em vez de permitir que o conteúdo flua novamente para o novo tamanho. De repente escala inicial também vai ajudar isso, é definido nível de zoom quando a página é carregada pela primeira vez. Mas ainda permitiremos que o usuário amplie, se necessário. A principal coisa a lembrar é que devemos sempre incluir essa tag em nossos projetos. Isso ocorre porque se não definir a largura de consentimento mais do nosso navegador, vai assumir que você tem um tamanho de tela de desktop em algum lugar em torno de 980 pixels de largura. Dependendo do dispositivo e que você deseja que a página inteira seja exibida. Vamos aumentar o zoom fazendo as coisas parecerem muito pequenas. metatag de ponto de vista inclusivo também permitirá que nossas consultas de mídia funcionem corretamente para mais tarde nesta seção. Ainda temos esse problema da célula do produto porque o [inaudível] usando tamanhos de pixel. Que é um tamanho fixo, o significa que eles são cortados fora da borda da tela. Mas começaremos a olhar para os tamanhos relativos no próximo vídeo, que ajudará com isso.
50. Unidades escaláveis (Design responsivo): Descobrimos o problema de usar tamanhos fixos no vídeo anterior. Aqui vemos que os produtos têm uma largura fixa em pixels, que não caberá neste dispositivo de visualização, que é um iPhone oito. pixels têm o seu lugar e há muitos bons casos de uso para eles. Mas ao trabalhar com layouts responsivos, queremos usar uma unidade de medida diferente, que é mais flexível. I. e, queremos que o tamanho seja capaz de esticar quando há mais espaço ou encolher em dispositivos de tela menores. É aqui que as unidades relativas ou escaláveis entram em jogo. Se passarmos para o nosso estilo dot css e apenas rolar para cima um pouco para a nossa imagem, que você pode ver aqui. Já demo