HTML5 - 01 Aprendendo a escrever páginas web
Para aprender HTML5 é necessário apenas ter um navegador atualizado e ter em seu computador um editor de textos como o bloco de notas, Notepad++ ou Sublime Text.
Arquivos HTML devem ser salvos com a extensão .html e o nome do arquivo não deve conter acentos, caracteres especiais, espaços. A página inicial de um site por padrão deve se chamar index.html e as demais podem levar o nome que você achar melhor, mas não se esqueça das regras...
Os códigos HTML são escritos dentro dos sinais < e > exemplo: <br>
Outro fato interessante na linguagem HTML é que esses códigos são chamados de TAG, e algumas tags necessitam ser iniciadas e terminadas.
Vamos ver tudo isso na prática então escrevendo o nossa primeira página web.
A estrutura a seguir é a estrutura base para a criação de uma página web.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Primeira página web
</body>
</html>
Entendendo o código acima:
- <!DOCTYPE html> indica a linguagem que estamos usando e esse doctype foi adotado no HTML5, antes disso essa linha era muito maior e mais difícil de decorar. Essa tag não necessita ser fechada pois indica apenas a linguagem que esta sendo utilizada.
- <html> essa linha é o inicio do código HTML e essa sim deve ser finalizada. Para fechar uma tag, basta reescreve-la utilizando-se do sinal / antes do seu nome, então, para fechar a tag <html> usamos </html>
- <head> é a tag que indica o cabeçalho da página web e tudo que estiver dentro das tags <head> e </head> será lido antes do corpo da página.
- <title> é a tag para escrever título que ficará na barra de títulos do navegador.
- <body> é a tag do corpo da página, ou seja, tudo que for escrito aqui estará na tela do navegador, é no body que será escrito os conteúdos da página, imagens, menus... Essa tag é finalizada com o </body>
A página que escrevemos terá o seguinte resultado:
Agora vamos ver como fica se utilizando os cabeçalhos, heading tag que é utilizada para escrever os títulos e subtítulos da sua página web. A tag que estamos falando é o grupo de h1 a h6 e sua escrita fica assim:
<h1> Meu texto, cabeçalho 1</h1>
<h2> Meu texto, cabeçalho 2</h2>
<h3> Meu texto, cabeçalho 3</h3>
<h4> Meu texto, cabeçalho 4</h4>
<h5> Meu texto, cabeçalho 5</h5>
<h6> Meu texto, cabeçalho 6</h6>
Uma coisa bacana de se saber é que trabalhar de forma correta com os heading tags ajuda no SEO da sua página, ou seja, aumenta as chances de seu site aparecer nos buscadores.
<h1> Meu texto, cabeçalho 1</h1>
<h2> Meu texto, cabeçalho 2</h2>
<h3> Meu texto, cabeçalho 3</h3>
<h4> Meu texto, cabeçalho 4</h4>
<h5> Meu texto, cabeçalho 5</h5>
<h6> Meu texto, cabeçalho 6</h6>
Uma coisa bacana de se saber é que trabalhar de forma correta com os heading tags ajuda no SEO da sua página, ou seja, aumenta as chances de seu site aparecer nos buscadores.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Primeira página web </h1>
<h2>Agora estamos utilizando H2</h2>
<h3>Agora estamos utilizando H3</h3>
<h4>Agora estamos utilizando H4</h4>
aproveite e faça um teste com os demais heading tags
</body>
</html>
Resultado:
Legal, mas quanto utilizar o H1 ou H2... saiba que a escolha não influencia apenas no tamanho a letra na tela não! Então ai vão algumas dicas:
- h1 - título da ideia principal da página. Deve-se ter apenas um H1 por página!
- h2 - esse é para um subtítulo dentro do assunto do título h1, pode-se ter mais de um h2. Fique atento para mantes uma certa coerência ao colocar por exemplo um H6 e depois um h3, depois um h2 e volta pro h5 para não deixar a página bagunçada.
- h3 - algo relevante dentro do h2 ...
- h4 - algo relevante dentro do h3...
- assim por diante até o h6.
Exemplo:
<h1> História da informática </h1>
<h2> Como surgiu o primeiro computador? </h2>
<h3>Curiosidades sobre o funcionamento do primeiro computador.</h3>
<h3>Como foi possível criar o primeiro algoritmo?</h3>
Lembre-se de sempre manter sua página em uma coerência para seus títulos.
Uma dica bacana e ver o código de páginas e ver como estão dispostos os títulos dessa página.
Para ver o código HTML de uma página, abra a página no seu navegador, clique com o botão direito do mouse na tela dessa página, clique na opção Exibir código fonte da página e estude os headings tags.
Nenhum comentário:
Postar um comentário