Onde encontro HTML5? – Especial

Você talvez esteja se perguntando: Onde eu encontro sites que usaram o HTML agora? Todos os sites usam. Aqui vamos detalhar como verificar a estrutura de cada site.

Onde encontro HTML5? – Especial

Você talvez esteja se perguntando: Onde eu encontro sites que usaram o que eu estava usando agora? E a respostas é simples: Todos os sites são assim.

Talvez usem vesões mais antigas do HTML ou talvez usem outras tags que você ainda não conhece. Mas todos estão em HTML.

Para exemplificar, veja uma busca muito construtiva que realizei no google:

Comecando pelo word Desembaraçando a web parte 1

Você consegue entender quais das tags que já vimos estão sendo usadas aqui? Não precisa saber todas, como a barra de busca que ainda não vimos como fazer.

Você usa todas as tags que vimos no seu dia-a-dia da internet. No facebook, no google, youtube, site do seu banco, site da sua escola ou qualquer outro site que venha a acessar.

Vamos dissecar aquela imagem acima:

O link azul (ou roxo, para já visitados) é uma tag a. O texto verde com a URL do site, poderia ser uma tag p. E o texto abaixo poderia ser outra tag p.

Se você for dar uma olhada de verdade no código, verá que não são exatamente estas tags, e que além dessas existem muitas outras tags div com vários escritos estranhos. Nada disso você precisa entender no momento, mas saiba que elas existem.

Vendo a Matrix

Para dar uma olhada nesse código fonte que estou dizendo, aperte com o botão direito do mouse em qualquer lugar de uma site e clique em “Inspecionar Elemento” (Esse texto pode variar de um Navegador para outro, mas a palavra “Inspecionar” é comum a todos que conheço).

Uma nova janelinha deve ter se aberto em sua frente, parecida com esta:

Comecando pelo word Desembaraçando a web parte 1

Essa janelinha se chama: “Developer Tools”, ou, Ferramentas de Desenvolvedor. O estilo e as cores dessa janelinha muda de acordo com o Navegador, mas o funcionamento é bem parecido em todos.

Ela também pode estar na parte debaixo ou ao lado de sua tela.

Procure por este botão marcado na próxima imagem que parece uma setinha, costuma ficar no canto superior esquerdo da Developer Tools.

Comecando pelo word Desembaraçando a web parte 1

Passando o mouse pro cima daqueles links do google, você poderá ver a estrutura do site. A caixa azul demarca o quanto da tela o elemento que você está passando o mouse por cima ocupa na página. No balãozinho acima, mostra o nome da tag e quantos pixels estão sendo usados, neste caso está escrito “div 600×203.13”, ou seja, a tag é uma div e ele ocupa 600px de largura e 203.13px de altura.

Comecando pelo word Desembaraçando a web parte 1

Algumas tags, como as que envolvem textos, podem ter ainda mais informações neste balãozinho.

Comecando pelo word Desembaraçando a web parte 1

Developer Tools te dá super poderes, momentâneos

Não só para analisar páginas serve esta ferramenta. Você pode trocar as estilizações do CSS da página. Não sabe o que é CSS? Veja a postagem Desembaraçando a Web: Dando Vida e Cor a sua página (Em Breve)

Com aquela mesma setinha que escolhemos mais cedo, clique em um dos Links que está na sua tela.

Comecando pelo word Desembaraçando a web parte 1

Veja que ao lado todos os estilos do que selecionamos estão descritos um a um. Perceba que a estilização parece desorganizada, várias classes com nomes estranhos, que parecem mais com códigos.

E na verdade são isso mesmo, essa é uma técnica mais avançada de estilização que, simplificando, divide os estilos em blocos que são chamados só quando necessários e recebem estes códigos para que o servidor, ou a tecnologia que estiver sendo usada, saiba o que chamar e quando.

Não se preocupe com isso agora, como estamos fazendo páginas simples e direto no HTML/CSS, não precisamos entrar nessas tecnologias ainda. E mesmo em sites mais complexos, nem todos usam essa técnica . É opcional e vai depender da sua necessidade e os problemas que seu site esteja enfrentando.

Voltando, você pode não só ver quais os estilos ativos e quais foram sobrescritos (texto cortado ao meio). Você pode alterar seus valores, como alterar o tamanho da fonte de 20px para 50px:

Comecando pelo word Desembaraçando a web parte 1

Como também, retirar valores e adicionar outros:

Comecando pelo word Desembaraçando a web parte 1

Para retirar um valor, clique na caixinha que apontei com a setinha e para colocar novos valores é só clicar logo após o último item de estilo e antes do colchetes fechando.

Comecando pelo word Desembaraçando a web parte 1

Meu deus, eu estraguei o site do google?

Não! Calma, como eu disse, são poderes momentâneos. Essas mudanças só tem efeito nessa aba que está aberta. Se você abrir o mesmo site em uma nova aba ou recarregar a página nesta aba, tudas as mudanças irão embora.

Isso é tudo pessoal

Agora você já sabe como o HTML/CSS são usados em páginas reais e como analisar esse código. Viu também como testar um estilo CSS antes de implementar e para entender como outras pessoas usam esses estilos.

Eu recomendo que você abra essa janelinha em todos os sites que você conhecer para dar uma olhada na estrutura e ir se familiarizando com novas tags. O google por exemplo, usa as tags div, cite, span que você talvez não conheça ainda, mas que podem ser muito úteis para você.

Nos vemos em outra postagem, abraços!

Posts Recomendados em seguida

Comentários