Html e Css para iniciantes | O que é HTML? (parte 1)

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:

<!DOCTYPE html>

Abaixo um exemplo do que são as tags usadas por uma estrutura HTML e de como elas devem ser montadas.

<!DOCTYPE html>
<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 <.

</div>

Ex.:

 <div> conteudo </div>
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

About Rubens Junior 18 Articles
Programador Sênior na empresa Hositec, Front-end e Backend; Conhecimento em: Java, PHP, Android, Mysql, HTML, CSS, SASS, LESS, Type Script, Jquery, Webservice, JavaScript... e eterno estudante de outras linguagens também.