Introdução
O que dizer sobre HTML? Basicamente é a fonte de toda a visualização na web. Toda a programação que envolve a web tem a necessidade de se ter uma estrutura baseada em HTML em seu front-end. Pois os navegadores fazem a leitura e trazem a resposta para que você possa enxergar. A sigla já diz muito sobre seu significado: “HyperText Markup Language”, ou no bom português: Linguagem de Marcação de Hipertexto.
O que o HTML Faz?
Toda estrutura HTML é baseada em ‘TAGS’, e essas marcações são feitas para posicionar elementos de acordo com a sua necessidade. Ao contrário de linguagens dinâmicas como por exemplo (PHP, JavaScript, jquery…) que ‘geram’ o conteúdo e apresentam , a função do HTML é apenas mostrar os resultados de forma com que o navegador (Mozilla, Opera, Safari, Chrome e etc..) possa ler em resultados de textos. Embora o que muitos que estão iniciando na programação pensam, HTML não é considerada uma linguagem de programação, apenas uma estrutura que apresenta e imprime o conteúdo.
O que são TAGS?
Toda a modelagem na web é baseada em padrões, as principais normas devem ser seguidas para que possam ter um melhor aproveitamento dos recursos utilizados. (Html por exemplo baseado nos padrões do W3C).
A declaração é a primeira coisa que deve ser acrescentada ao código de seu documento, antes da tag. Ela é responsável a dizer ao navegador qual é a especificação do HTML ou XTML. Então sempre que for escrever um código HTML, lembre-se de inserir, logo de inicio:
Abaixo um exemplo do que são as tags usadas por uma estrutura HTML e de como elas devem ser montadas.
<html>
<head><!-- Head do português "cabeça", é onde você vai inserir informações para os navegadores e buscadores -->
<meta charset="utf-8" /> <!-- Aqui é um padrão de caracteres, geralmente usamos o utf-8, mas pode usar outros dependendo o padrão que utilizar -->
<meta name="description" content="a descrição do seu site em no máximo 90 caracteres">
<meta name="keywords" content="escreva palavras-chaves curtas, máximo 150 caracteres">
<title>Título do Documento</title> <!-- Aqui como próprio nome diz, você insere o nome do seu site ou projeto -->
</head> <!-- Fechamento da Tag Head -->
<body> <!-- Corpo, aqui vem todo o conteúdo e tags do projeto -->
<div> div é o elemento que usamos para declarar classes e identificadores para usarmos como estilos ou funções de javascript
</div>
</body><!-- Fechamento da tag body -->
</html>
Informações relevantes
A estrutura acima é o mínimo necessário para se ter um código HTML funcionando em um navegador. Existem diversas outras TAGS que podem ser usadas em seus projetos. É importante salientar que cada TAG aberta precisa ser fechada, caso não o faça, pode desestruturar todo o restante do seu projeto. Para fechar uma tag basta apenas colocar uma barra invertida / após o simbolo de menor <.
Ex.:
ou mesmo
<p> conteudo </p>
Você pode visualizar e pegar todos as tags usadas pelo HTML diretamente no site da W3C
Na próxima parte do post, darei ênfase ao CSS trabalhando com as divs (id e class) para que possamos fazer alguns exemplos e também explicar como podemos fazer um site usando apenas html e css.
UPDATE: Clique aqui para ver a parte 2
