[Música] fala pessoal jancer aqui no vídeo de hoje nós vamos fazer uma aula aqui né pra gente explorar um pouco mais as tags aqui do HTML na aula passada a gente falou aí sobre o que que é o HTML né como que ele é estruturado e algumas tags que a gente usa bastante né E nessa aula aqui e a gente vai falar mais sobre essas tags né porque se a gente D um olhada aí melhor eh o HTML em si ele tem mais de 100 tags diferentes né então tem muita tag diferente muita coisa interessante e nessa aula aqui Eu pretendo fazer ela a gente passando a isso por essas tags né criando algumas tags vendo como elas ficam ali no no Browser e explorando o mínimo possível porque futuramente a gente vai ter aulas específicas falando sobre essas tags tá então essa aula aqui vai ser bem geral mesmo é só pra gente explorar um pouco e se habituar um pouco mais aí com com algumas tags e entender algumas coisas aí bem básicas do HTML Tá certo então vindo aqui no nosso código né E isso aqui é o código da aula passada Então o que eu vou fazer aqui é criar uma nova pasta né vou chamar aqui de dois na verdade essa essa essa esses números aqui estão errados né porque na verdade essa é a aula três né então aqui deveria ser três porque na aula um não teve código né então nessa aula aqui como a gente vai falar mais sobre as tags básicas né eu vou chamar isso aqui de tags a a pasta né tags básicas e aqui dentro eu vou criar um arquivo index P HTML beleza com arquivo HTML aqui é um atalho um snip que a gente tem aqui no próprio vs code do HTML e e a gente o que que é snip né basicamente um pedaço de código que um padrão que se repete muito tá então a gente usa o snippet para meio que E vai colar esse esse pedaço de código no aqui onde eu estou editando e me economizar aí alguns segundos de digitação tá então se eu digitao HTML aqui no vs code nós temos aqui esse Nip que HTML 5 2. 5 né E se eu clico ele já cria uma estrutura parecida com o que a gente criou na aula passada a diferença é que aqui tem algumas tags meta né como a gente não falou nada sobre elas e por por enquanto isso aqui não vai ter Impacto nenhum a gente pode apagar elas tá e tem esse atributo leng aqui que é meio que é meio não é a linguagem descrevendo em qual linguagem esse meu documento HTML está né mas nesse caso aqui como a gente não não tá usando não chegou ainda nisso né vamos Apagar tudo para deixar a estrutura parecido com o que nós temos aqui que foi criado na aula passada tá o título desse documento aqui vai ser o quê vai ser tags básicas certo vou salvar aqui ele já formatou aqui para mim né Essa formatação automática é feita pelo prier né que foi uma extensão que eu falei para vocês aí lá na primeira aula tá certo e falando aqui mais da do dos Tópicos da aula né vamos voltar aqui no notion a gente vai est falando do header a tag header né a tag nave a tag a as tags H1 né div parágrafos enfim vai ter muito várias tags aqui que a gente vai est explorando um pouco e vendo ali como que elas são criadas no HTML Tá então vamos começar aqui pelo header e falando de do header né dessa tag aqui e não só o header mas nós temos algumas outras tags que se comporta como ela é que o que eu quero tá falando aqui é que quando a gente tá criando e um documento HTML tem uma coisa que a gente se preocupa bastante que é com a gente chama de search Engine optimization que é basicamente eh nós otimizarmos o nosso código o nosso documento HTML pros motores de busca que estão aí na internet tá e o que que isso quer dizer que basicamente quando essa nossa página e quando alguém pesquisar alguma coisa e vai haver uma indexação entre o que é pesquisado e o conteúdo da minha página de forma que de forma a facilitar que essa nossa página seja encontrada por esses motores de busca tá e não só isso mas também tem também a questão de acessibilidade da página os screen readers né que são os leitores de tela que eles interpretam essa nossa estrutura HTML para eh prover a acessibilidade aí pro usuário então a tag header por exemplo ela indica e diferente da tag head né que a tag head como foi falado na aula passada é uma tag que que indica dados do documento e indica que a gente define informações sobre o documento HTML a tag header em si ela basicamente indica o cabeçalho da nossa página tá e o que que eu posso dar de exemplo de cabeçário né Vamos aqui no Google e deixa eu pesquisar aqui na aula passada né e na aula passada a gente pesquisou aqui sobre o visual Studio code né na aula passada não né na primeira aula mas se a gente entra aqui no site do visual Studio code Deixa eu só fechar aqui aceitar essa questão dos cooks eh O que que é o header tá o header seria essa parte superior aqui onde ele nos dá uma uma parte aqui de navegação né que se eu clico aqui nesses botões eu sou navegado para lugares diferentes do app tem aqui uma barra de busca tem aqui o ícone né do visual Studio code Então isso é um cabeçalho né E aquela tag header ela indica esse cabeçalho a gente já pode até inspecionar essa esse documento aqui do do site do visual Studio code para ver se eles têm aqui a tag header né e não né eles não têm eles TM a tag Neve né que indica uma barra de navegação tá mas aquela tag header ela vai nos indicar que existe ali um cabeçalho né um outro exemplo que a gente tem aqui ó no próprio site do vscode a gente já consegui enxergar aqui que é o footer né a Tech footer que indica o roda pé né dessa página então nós temos as tag a tag header e a tag footer que é usada meio meio que só para marcar mesmo o que que é o que né O que que é o cabeçalho o que que é o rodapé Desse nosso documento tá então eu vou deixar aqui a tag header vou deixar aqui a tag footer eh e dentro do header né Vamos já vamos ir entrando aqui em outros puxando outras tags né porque como a gente viu lá no cabeçalho nós temos navegação né então ícones que serão usados como navegação tá então dentro da tag header eu posso usar a tag Neve né para indicar que eu vou criar uma uma barra de navegação ou que existe algo ali relacionado a navegar o usuário de um lugar para o outro tá então por exemplo na na tag Neve nós temos também outra tag que é a tag a a tag Neve também a gente pode pensar nela como a tag header né que tá US tá sendo usada ali só para demarcar um espaço né para indicar que aquilo é alguma coisa então a tag Neve vai indicar esse espaço pra navegação e nós temos a tag a né que essa tag a ela já é um elemento um elemento mais robusto né um elemento mais mais visual em si que a tag a ela cria um hiperlink né é o anchor ela meio que cria uma Ancora ali que é basicamente a forma da gente criar links tá então se eu se eu clicar nesse elemento eu vou ser navegado paraa outra página se eu clicar ali eh eu vou abrir um link né e ir para outro site ou então Navegar dentro do próprio site né E para partes diferentes da nossa aplicação então na tag a eu posso escrever que por exemplo Google e a tag a ela tem um parâmetro né E essa questão de parâmetro a gente não entrou muito a fundo né parâmetro atributo né pode ser a gente no HTML se a gente fala atributo né Tá pelo menos na maioria das documentações é atributo ou seja um atributo da tag a é o atributo href ou seja para onde que eu irei Navegar quando eu clicar nesse meu nesse meu elemento né nesse elemento que eu tô escrever no Google posso escrever aqui por exemplo https 2 p bar google. com tá se eu salvo isso aqui é vamos rodar aqui esse site né Vamos clicar aqui no em go Live né usando a nossa extensão Live server ele vai abrir aqui no Browser e tá aqui ó escrito Google tá se eu inspeciona esse elemento ele é a tag a né a tag encor Que Nós criamos E se eu clico nele olha lá ó sou navegado pro site do Google né pra home aqui do Google google.
com tá então vou voltar aqui e dessa forma que nó nós podemos criar links de navegação externo ou interna nesse caso aqui a gente tá navegando externo para outro site Mas e no futuro a gente vai estar usando essas tags a para navegar dentro do próprio Website né sair de uma página do nosso Website e ir pra outra Beleza então outra coisa que tem aqui sobre a tag a já que a gente tá usando aqui um atributo o HF né para ir para outro para onde esse esse hiperlink aponta né lendo aqui a descrição é tem outro atributo aqui que é o target que é também bem usado que por padrão se você vi Se você prestar atenção aqui ó quando eu cliquei no link Ele abriu a página do Google nessa mesma aba né e com a com o atributo target se eu passo aqui o target Blank é por padrão né ele já abre na mesma página que eu cliquei mas com o target Blank ele vai abrir uma nova aba Olha lá criou uma nova aba aqui com o site da Google e o nosso Website ficou aqui na aba anterior Tá certo então interessante também saber desse atributo aqui target Beleza então com o com esse hiperlink né nós conseguimos criar dessa forma que o nosso HTML tá estruturado né Nós temos uma barra de navegação e essa barra de navegação tem eh nós temos um um cabeçalho né o cabeçalho tem dentro de uma barra de navegação e essa barra de navegação tem links para serem clicados tá eu posso até eh replicar aqui esses links eu vou deixar tudo Google mesmo só paraa gente ter mais de um Tá certo tem mais coisas que a gente vai tá entrando a fundo na questão de estrutura mesmo desse header mas por enquanto vamos deixar assim dessa forma que tá beleza então voltando aqui vamos ver aqui os nossos tópicos né nós falamos aqui do header falamos do footer Falamos também do nev e falamos do ancor né do da tag a do hiperlink Então vamos falar aqui agora dos HS né H1 até o h6 certo vamos vir aqui no código e na aula passada a gente até usou a tag H1 né para indicar com digitar com Hello a gente volta lá no Browser tem temos aqui né escrito Hello eu vou diminuir aqui o Dev Tools tá nós temos aqui um H1 escrito Hello e esses h1s né esses HS na verdade essas tags headings ela indica algum tipo de título alum algum tipo de texto a ser destacado um um texto eh que vem vem bem dessa ideia de título mesmo tá um título que vai descrever alguma coisa e que precisa de uma certa atenção diferente do resto do texto da página então é bem pensando nessa ideia de título mesmo né na aula passada nós falamos também da nós usamos né a tag P que fala que é basicamente um parágrafo então por exemplo eu tenho um um bloco lá no meu código onde o título O um bloco de texto né que fala sobre JavaScript e o título desse bloco de texto é JavaScript né Tipo eu tenho escrito aqui JavaScript e um parágrafo falando sobre JavaScript tá então esse H1 é um texto diferente é um texto a receber um certo nível de atenção diferente do resto tá eh e dentro das tags de heading né Nós temos não só o H1 mas nós temos outros HS né que vai do um até o se então H1 H2 H3 4 5 e 6 né Deixa eu só refatorar aqui H2 H3 H4 h5 e h6 tá se eu salb isso aqui tá tudo escrito JavaScript mesmo né pode deixar assim mesmo não tem problema se a gente olha aqui no código eh a gente pode ver que nós temos por padrão já né pelo o próprio browser ele já aplica um estilo diferente nessas tags HS né Ou seja a H1 ela tá com a fonte maior H2 já tá um pouco menor a H3 um pouco menor e assim sucessivamente então É aquela ideia de hierarquia né o a tag H1 ela vai ter sempre um peso maior do que a tag H2 e H3 4 5 se vai vai reduzindo esse peso entre aspas né que esse peso seria basicamente é nível de importância mesmo tá então quando a gente tá escrevendo o código puxando também naquela ideia da semântica né a gente usa diferentes HS H1 2 3 eh para descrever e diferentes tipos de títulos que a gente teria ali na página com diferentes tipos de importância tá importância é uma palavra bem chata acho que não não seria a palavra correta é mais a gente pensando na questão da hierarquia na importância daquele texto Dentro da nossa página Tá certo então temos os H os HS né vamos voltar aqui nos tópicos falamos aqui do H1 até o h6 e Falamos também do parágrafo né só que vamos falar aqui antes da div tá e a div o que o que seria essa div né Eh a tag div vem com essa ideia de divisória né ou divisão que é basicamente eh o a gente vai pegar um um bloco de código nosso e quer dividir ele de outro bloco tá e ou até pensando na ideia de componentes tá por exemplo a gente tem uma componente de formulário tá E logo abaixo desse formulário nós temos por exemplo uma galeria de fotos Ali do produto então a gente consegue dividir essa página em duas coisas em um formulário e uma galeria então o formulário a gente pode dividir falando de dividir agora no dentro do HT ml a gente criaria uma divisão usando a div né E dentro dela ficaria o formulário depois a gente criaria outra div para ficar eh ali a galeria então o div em si ela é um elemento que não tem nenhum Impacto visual né olha lá eu vou eu vou fazer o seguinte Na verdade eu vou tirar o zoom aqui dessa página pra gente conseguir ver ela um pouco melhor e a div ó aqui no no inspecionar né Eh a div ela tá presente aqui no na estrutura né no HTML C nós temos aqui os HS o parágrafo né H1 até o h6 a div ela tá logo aqui embaixo tá até aparecendo o popup aqui e onde tá o meu mouse né só que visualmente não tem nada dentro dela tá então ela por padrão ela é um elemento vazio um elemento que é branco né não tem nada a ser exibido nela ela é basicamente um um contêiner né a gente usa ela para criar essas divisórias então por exemplo um exemplo bom aqui a gente poderia colocar os os nossos HS né do H1 até o h6 dentro de uma div né dentro dessa divisória e deixa eu só apagar aqui e formatar onde essa di aqui ela estaria dividindo esse meu código mas visualmente não teve mudança nenhuma tá e a gente usa até bastante a com o junto com o CSS para aplicar um para aplicar algum visual a estilizar né blocos de código então todos esses HS aqui o H1 até o h6 eu poderia estilizar todos eles partindo da minha div né usando CSS então a gente usa bastante a div também para criar eh marcadores ali dentro do HTML para que eu venha com o CSS e aplique os estilos e no nos nos elementos filhos dessa minha div né Eu já falei aí sobre ess esse conceito de elemento pai e elemento filho e nesse caso aqui a div seria um elemento pai e a div seria um elemento pai e os HS né e o p aqui também seria elementos filhos tá então partindo aqui temos a div e nós temos também eh agora vamos voltar aqui no tópicos né falamos da div nós já falamos da tag P né mas nós temos aqui a tag BR a tag b a tag i a tag u que é basicamente são basicamente tags para pra gente usar para trabalhar com texto tá o o spam também entraria aqui né que deixa até colocar ele aqui que a gente vai estar fazendo o uso aí dessas tags para Eh demarcar aí e até estilizar o nosso texto tá então vamos vir aqui no no código no HTML e eu vou colocar aqui a tag P ã e aqui dentro eu vou digitar sobre o o título da aula né Eh estamos trabalhando com as tags básicas né não é bem o título mas enfim é um texto é um um parágrafo ali tá então se a gente volta aqui no nosso browser tem aqui né o parágrafo que nós digitamos né a tag P estamos trabalhando com as tags básicas e esse texto eu posso por exemplo querer que o a o o a palavra trabalhando fique em tá então eu consigo fazer isso usando por exemplo a tag B tá que vem de bold né ou seja se eu deixo trabalhando né envolvido aqui com a tag B se a gente olha aqui no código ele já ficou tá e eu posso querer deixar também em Itálico né com o i e olha lá ficou ficou em Itálico né Nós temos também a tag u né que deixa sublinhado tá e nós temos também o spam tá que o spam não tem alteração visual nenhuma Beleza então essas tags a b u i são tags que puxa lá também da ideia do semântico né então são coisas que vai deixar a gente vai estar fazendo são tags que a gente vai est fazendo uso para deixar o nosso HTML mais semântico de forma que eh fique claro que aquele texto ele é ele está em né e por por que que eu falo isso de fique claro porque a gente consegue fazer isso muito facilmente usando o CSS né então a gente não precisaria daquela tag ali dessa tag aqui para conseguir estilizar esse texto né então a tag u a i e a l u não u i e a tag B né Elas T essa esse peso semântico a tag spam não tem alteração nenhuma mas a gente usa bastante a tag spam para pegar partes do texto e aplicar Estilos diferentes tá então lá no CSS se eu quiser deixar essa fonte maior se eu quiser deixar ela é numa posição diferente enfim a gente se a gente quiser fazer várias coisas dentro dessa string aqui eu usaria o spam para conseguir eh aplicar o estilo diretamente no que está dentro dele né então o essas tags em si e a gente faz o uso delas dessa forma tá para essa finalidade e tem também o BR né tag BR pá quebrando tudo aqui a tag BR né Ela é uma tag self Close tá então tá até errado aqui que na verdade eu coloquei essa barra errado não consegui quebrar aqui a estrutura na verdade aqui é um P né quebrando aqui a estrutura do do das chaves né abrindo e fechando mas a tag BR ele até formatou aqui mas esse aqui vem de break né Break Line que é um Line Breaker né e basicamente ele quebra a linha né como se desse um enter Então o texto meu que tava em uma linha só ficou agora estamos trabalhando com as quebrou a linha e se a gente olha aqui no HTML na estrutura o BR tá aqui né olha ele aqui ó então a gente usa ele para tá fazendo esse essa quebra de linha aí não só em texto mas em outras ocasiões também a gente pode tá usando essa tag tá então na nas próximas aulas a gente vai estar falando sobre os elementos em line e os elementos em bloco né para entender um pouco a diferença e até entender mais sobre esse BR mas não vai ser agora tá certo então vamos aqui no notion vamos pegar aqui os nossos tópicos nós falamos né dessas tags aqui vamos falar agora das listas né e a gente pode né a gente tem a possibilidade de criar listas aqui no HTML e basicamente as listas né ela a gente pode criar elas usando duas tags né diferentes tá né É bem que duas tags mas na verdade a gente pode usar várias tags Mas enfim o que o que eu quero dizer aqui é que nós temos dois tipos diferentes de lista tá nós temos a listas listas ordenadas e listas não ordenadas tá então nós temos aqui por exemplo a tag ol tá que isso aqui significa ordered list né lista ordenada tá nós temos a tag também o l né que é unordered list que seria lista não ordenada tá e tem a tag também li que seria um list item né É Um item daquela minha lista tá então por exemplo nós podemos ter aqui ó vou criar três itens café em português né Hã o item café o item chá e o item café chá e leite tô lendo aqui do exemplo que eu tenho aqui né E então as duas listas né a lista ordenada e a lista não ordenada tá com esses três itens aqui se eu salvo isso aqui e a gente olha aqui no Browser olha lá ó a lista ordenada por por padrão né o browser já colocou aqui para mim o o o numerador né aqui 1 2 e 3 numerando essa já que a lista ela é ordenada né significa que a ordem dela importa né e a lista não ordenada ele colocou aqui uns bullets né uns pontinhos para indicar cada item da lista né então agora dessa forma que a gente criou eh essa questão aqui dos números 1 2 e 3 ou as bolinhas a gente consegue tirar isso com o CSS tá isso aqui é tudo personalizar tudo que você tá vendo aqui a gente consegue alterar com o CSS né Mas a questão eh a gente volta na semântica né porque então já que a lista se comporta da mesma forma usando o l ou usando o ol né se a lista é ordenada ou não ordenada eh a questão a importância de dessa diferença é de semântica né pensando no search Engine né no seo e pensando também na acessibilidade tá então nós temos aí esses dois tipos essas duas formas diferentes de criar listas Tá certo então voltando aqui nos tópicos né a lista já foi temos aqui a tag IMG né que é a tag aí bem interessante que a gente usa muito que é imagem né então ah se eu quero colocar uma imagem no meu site né o que que eu faço nós temos a tag aqui e MG que essa tag ela é self Close né lembra lá do self Close que falei nas aulas anteriores o IMG é o exemplo de uma o o BR também né é uma tag self Close Tá mas no IMG aqui nós precisamos de atributos né porque eu vou falar que esse elemento eu vou renderizar o elemento IMG eu vou renderizar uma imagem mas eu tenho que passar aqui alguns atributos para indicar o que é essa imagem né então por exemplo esse MG ela tem um source o o um dos atributos né src que seria o Source que é basicamente a fonte dessa imagem né de onde ela vem e nós temos também o out tá que é o texto alternativo ou seja se eu não conseguir carregar a imagem eu vou exibir esse texto alternativo que descreve a imagem né então no sorce aqui da imagem eu vou passar o seguinte https 2 p bar Barra source. unsplash.
