Loading...Loading...
423

Agrupando e Dividindo as Tags HTML

By Pedro Ladeira

Last update at 04/09/2021

Na seção de Aprendizado, iremos aprender a dividir nosso código para que fique cada vez mais legível. Na seção Caminhada, iremos ver que escrever códigos vai além de sentar atrás de uma tela. Por fim, temos a nossa seção de exercícios e desafios para você treinar.
Eu decidi fazer esse briefing logo de início, porque essa issue fica mais bonitinha na página inicial da Pingback e mais gente pode vim parar aqui. 🙃
Falando nisso, se você ainda não conhece a Pingback, eu recomendo fortemente que vá na página inicial e olhe os conteúdos disponíveis. Muitas novas pessoas estão produzindo conteúdo aqui e, provavelmente, deve ter algo que você goste. Para acessar é só clicar aqui.
Como virou um costume, antes de começarmos, sempre irei indicar algum conteúdo que irá te ajudar nessa caminhada. Dessa vez, eu acredito que seja um oportunidade surreal para você se aprofundar nesse mundo. A recomendação da vez é o evento da Rocketseat que irá do dia 3 a 9 de agosto. O evento já teve diversas edições e essa será a minha quarta vez participando. Para deixar claro que não ganho nada com isso. Eu estou recomendando, porque sei que é ótimo. Enfim, vou deixar o link da inscrição aqui para você dar uma olhada. 
Bom, se você caiu de paraquedas nesse episódio, aqui falamos sobre programação e estamos bem no início. Caso queira ler os episódios anteriores é só entrar aqui. Garanto que irá gostar!  😊
Caso você queira fazer parte da nossa comunidade, criei um Grupo no Telegram para todos que queiram compartilhar projetos, dúvidas e conhecimentos.  A ideia é que todos se ajudem. Caso queira entrar, é só clicar aqui. Te vejo lá!
Já se prepara aí e vamos codar! 💻

<div> Aprendizado </div>

Essa seção é sempre uma continuação dos episódios anteriores. Por isso, caso você não saiba o que é HTML, recomendo que leia o meu segundo episódio: Rumo ao Júnior - 02: Primeiros Passos com HTML, Processo de Aprendizado e Construindo uma Página. Acredito que irá te dar uma baita noção.

<div> Tag

Uma das HTML Tags mais famosas é a <div>. Essa Tag é, na verdade, uma abreviação de division. Assim, ela é utilizada para dividir nossa página em partes que serão úteis para agrupar outras Tags e deixar nosso código mais legível.
As <div>s podem conter qualquer outra HTML Tag dentro dela. Não há limites para isso. Vale ressaltar que ela será sempre um parent element e como vimos no episódio anterior, lembre-se de adicionar os dois espaços.
Ainda está meio confuso, né? Vou pegar um site como exemplo e te mostrar que ele é separado em <div>s
Quando a pessoa que fez esse site escreveu os códigos, ela não foi escrevendo <img>, <h1> e <p> juntinhas. Antes de escrever ela deu um passo para trás e pensou na estrutura do site como um todo.
Analisando a estrutura, percebe-se que podemos dividir esse site em <div>s. Por exemplo, poderia ter uma <div> dedicada para aquela primeira marcação que fiz, pensando que aquilo é uma parte do site. Em seguida, podemos ter uma outra <div> dedicada em ter o texto da notícia. 
Deu para entender? Somente mais um exemplo para entender de vez.
Você percebeu como essa nossa seção Aprendizado começou?  Eu coloquei o Aprendizado dentro da Tag <div>, porque todo esse conteúdo pertence a um tópico em específico. Perceba também que quando for mudar de seção, irei começar uma outra <div>. Os conteúdos do Aprendizado não irão entrar na Caminhada e nem vice-versa, pois cada um tem seus códigos específicos.

Attributes

Attributes são conteúdos adicionados em uma Opening Tag e são usados de diversas maneiras diferentes, desde fornecer informações até alterar estilo com CSS.
Attributes são escritos em duas partes: 
  • O nome do attribute
  • O valor do attribute
No episódio de hoje, iremos falar de dois: id e class. Porém, você já usou um attribute e talvez nem sabia o que era. Na Tag <a>, o href era o nome e o URL que você passou era o valor desse attribute.

id

Um attribute bastante comum é o id. Ele é utilizado para diferenciar conteúdos. Pense nele como a identidade de um elemento. Sendo assim, somente aquele elemento terá aquele id em específico.
Usar ids tem vários propósitos, mas por enquanto, iremos ver como eles podem nos ajudar a identificar o conteúdo da nossa página. Qualquer HTML Tag pode ter um id attribute.
O id deve estar sempre na Opening Tag
Perceba que ao usar id="intro" eu consigo saber que todo o conteúdo que está dentro dessa tag faz parte da "intro" da minha página.
Naquele exemplo que usei da Startupi, podemos pensar que todo o texto (<p>) da notícia pode estar dentro de uma div com o id="content" ou id="notícia". O valor desse attribute é você quem escolhe, porém dê preferência em usar inglês.

class

Outro attribute bastante comum é o class. Diferente do id, você pode usar a mesma class em diversos HTML Tags.
Esse era um assunto que iria abordar somente em CSS, mas decidi trazer de uma vez, já que falei de id ali. Ambos são utilizados para identificarem elementos que serão aplicados CSS.
Vou te mostrar um exemplo, só para você ter uma noção básica, porém fique tranquilo que irei aprofundar mais em id e class quando formos para o CSS.
Esse foi o fim da nossa seção Aprendizado e também posso falar que a nossa <div> Aprendizado iria acabar aqui, também. 
E aí? O que achou? Em cada episódio eu tenho procurado escrever da maneira mais simplificada possível e com vários exemplos para que você consiga entender de forma tranquila.
Se puder me dar esse feedback na comunidade do Telegram eu iria ficar muito feliz com isso. Se você ainda não está lá, basta clicar aqui e entrar. Lá é um espaço para você compartilhar o que quiser relacionado com programação. 
Qualquer feedback, desde que seja construtivo, será muito aceito!
Vai lá e me conta!

<div> Caminhada </div>

Apesar dessa seção não possuir um conteúdo técnico, eu acredito ser a minha favorita, pois consigo trazer reflexões sobre a minha semana que, provavelmente, poderão ser úteis para você.
Essa reflexão que irei fazer aqui veio de um livro que li durante essa semana. Irei deixar para falar dele no próximo episódio na parte que recomendo conteúdos extras para você. Caso queira ler o livro, não perca o episódio da próxima semana, hein!
Enfim, hoje em dia qualquer um pode se inscrever em um bootcamp de programação e aprender em semanas/meses. Além disso, existem diversos livros e cursos que também te ensinam a programar. 
A ideia aqui é que escrever códigos não é mais a parte difícil. Basta dedicar algumas horas por dia e você irá conseguir. Entretanto, como se diferenciar nesse mundão?
Há uma coisa que é rara de se ver e aqueles que possuem tal característica irão ser os diferentões
Caso queira se diferenciar, você precisa ter uma visão de negócios e como a sua empresa atual funciona. Na maioria das vezes, um desenvolvedor se esconde atrás de uma tela e nem sabe o verdadeiro problema do usuário que está resolvendo. Saber esse lado das coisas pode te ajudar com suas tarefas diárias.
Com essa característica, você irá:
  • Ganhar tempo
  • Escrever códigos mais simples
  • Saber o que priorizar
Lembre-se: uma pessoa que sabe programar é poderosa, porém uma pessoa que sabe programar e entende de negócios é imparável.

<div> Exercícios / Desafios </div>

Para colocar em prática tudo o que você leu, irei passar alguns exercícios e um pequeno desafio para você.
Porém, irei passar o gabarito da semana passada para você conferir
  • D
  • D
  • D
  • B
  • C
Teve dúvida em alguma? Eu vou tirar todas elas na comunidade  do Telegram. Está esperando o que para entrar?

Exercícios

 As respostas só irão ser disponibilizadas no episódio da próxima semana. Entretanto, vou postar amanhã as respostas na comunidade do Telegram. Se você quer saber se acertou essas respostas, entra  lá.
1)Por que incluir o DOCTYPE em todos arquivos HTML?
a) Sem ele, qualquer código HTML é inválido.
b) Sem ele, seu site não será permitido na internet.
c) Para especificar o padrão HTML que está sendo usado no seu código.
d) Para especificar qual conteúdo será disponibilizado.
2) <h1 id=title>Eu falhei na missão</h1>. Este código possui algum erro. Por que?
a)O attribute id só deve ser utilizado em <div>
b)O attribute id deve ser colocado em uma Closing Tag
c) Não posso usar id em <h1>
d)Está faltando que o title fique entre aspas
3) Qual o diferencial do attribute class em relação ao id?
a) Ele é o responsável por estilizar as coisas no CSS
b) Ele só pode ser utilizado uma vez, sendo exclusivo
c) A mesma class pode estar em mais de um elemento
4) Por que utilizar <div> nos códigos?
a) Para mudar como os elementos ficam visíveis no site
b) Para que o código no arquivo HTML fique mais organizado
c) Para ter certeza que o navegador irá interpretar de forma correta o código
5) <div> Algo está errado aqui <div>. Este código era para criar uma <div>. Qual o erro?
a) Não há nenhum child element dentro da <div>
b) O conteúdo dentro da <div> deve estar entre aspas
c) Está faltando um id attribute para identificação
d) Está faltando uma barra na closing tag

Desafio

Eu perguntei no meu instagram o que vocês estavam achando dos desafios e muita gente achou fácil/médio. Acredito que devo aumentar o nível, não é mesmo?
Porém, eu ainda irei pegar leve no de hoje e semana que vem eu dou um jeito de deixar isso mais difícil.
Para hoje eu tenho duas funções para você:
  • Organizar o código dos dois últimos desafios usando <div> e identificando elas.
  • Na página do último desafio, o Filé Mignon, eu quero que você adicione um botão no final da página para direcionar o usuário para o Google.
Eu te ensinei a colocar o botão e redirecionar o usuário? Não. Por isso, boa sorte!

</article>

Realmente espero que goste e caso sinta que está faltando algo ou que preciso melhorar, me dê um feedback. Isso me ajuda muito!
Para conseguir produzir ainda mais conteúdos de qualidade, há a opção de você se tornar um membro pago deste canal. Assim, você não só estará ajudando na produção de conteúdo, mas também irá fazer com que isso chegue em ainda mais pessoas. Portanto, se você vê sentido no que falei, considere-se tornar um membro mensal ou anual.
Além disso, também há opção de você apoiar de formas mais pontuais com a compra de cafézinhos. Basta clicar no cafézinho que está bem a sua esquerda e escolher o valor que gostaria de contribuir. Saiba que qualquer ajuda é sempre muito bem-vinda :)
Caso tenha gostado, o que acha de compartilhar com algum amigo ou amiga? É só você enviar esse link: pedro.pingback.com
Muito obrigado por você que chegou até o final. Fico feliz em saber que você está realmente interessado.
Beijos na bunda e até segunda!