Finalmente um curso completo de HTML onde você vai aprender a criar seus próprios sites, é fácil de aprender, é divertido, essencial para quem trabalha na WEB, e você vai adorar as aulas.
Introdução ao HTML
Mas o que é HTML, para que ele serve?
HTML é a linguagem de marcação padrão para criar páginas na WEB, todo site que você acessa é renderizado nessa linguagem. O HTML não é exatamente uma linguagem de programação, seu significado é: Hyper Text Markup Laguage (Linguagem de Marcação de HiperTexto). O HTML descreve a estrutura da página usando marcação através de alguns elementos, esses elementos são blocos de construção e são representados por tags. As tags HTML classificam partes do conteúdo como: titulo, parágrafo, tabela, imagem etc. Os navegadores não exibem as tags HTML, mas as usam para renderizar o conteúdo da página, e o que você vê quando acessa um site, é o resultado dessa codificação de tags HTML. Veja um exemplo simples de um documento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
RESULTADO
Meu primeiro título
Meu primeiro parágrafo.
Explicando tudo:
- A <!DOCTYPE html> declaração que define este documento como HTML5;
- O <html> é o elemento raiz de uma página HTML;
- O <head> elemento que contém informações destinada ao navegador, como título e/ou arquivos que devem ser incluídos no documento, dentre outros;
- O <title> elemento que especifica um título para o documento;
- O <body> elemento contém o conteúdo da página visível, aqui vai tudo que é mostrado na tela;
- O <h1> elemento define um cabeçalho grande;
- O <p> elemento define um parágrafo.
Essas são algumas das tags HTML, elas são nomes de elementos entre colchetes angulares. Ex: <nomedatag> conteúdo vai aqui… </nomedatag>
As tags HTML normalmente vêm em pares como <p> e </p> onde a primeira está indicando o início ou abertura e a segunda o fim ou fechamento, a diferença entre elas é a barra (/) que diz para os interpretadores que aquela é o fechamento da tag. Seria mais ou menos como escrever algo entre parênteses () ou colchetes [].
As tags HTML são interpretadas e renderizadas pelos navegadores da web (chrome, IE, Firefox, Safari etc), isso significa que os navegadores irão ler documentos HTML e exibi-los. O navegador não exibe as tags, mas utiliza para determinar como deve ser exibido o documento.
Obs.: Apenas o conteúdo dentro da seção <body> (área marcada acima) é exibido em um navegador.
A declaração <DOCTYPE html> representa o tipo de documento e ajuda os navegadores a exibir corretamente as páginas web, mas lembre-se, ela deve aparecer apenas uma vez e no topo da página, é a primeira tag a ser escrita.
Apesar de não fazer diferença entre maiúscula ou minúscula, a W3C recomenda, como uso de boas práticas, que essa tag seja escrita em letras maiúsculas: <!DOCTYPE html>. Ao pé da letra, o que você está dizendo para o navegador é: “Esse é um documento HTML5”.
Versões do HTML
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
Para começar a escrever tags HTML não é necessário nenhum programa especial, você pode usar o Notepad (PC) ou o TextEdit (Mac). No entanto, eu recomendo um editor não tão simples assim, o <a>Sublime Text</a>. A versão atual é a 3 e você pode baixar gratuitamente em https://www.sublimetext.com/3. O Sublime é um editor de texto que vai melhorar o entendimento das tags HTML, ele diferencia cores de tags, atributos etc, tem suporte a várias linguagens, inclusive HTML5. A codificação HTML se torna muito mais interessante com Sublime, vai por mim.
Depois de baixar e instalar o Sublime, crie seu primeiro documento HTML seguindo os passos abaixo:
Passo 1: Abra o Sublime (pode ser o Bloco e Notas se você quiser);
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
<p>Meu segundo parágrafo.</p>
</body>
</html>
Passo 3: Salve o arquivo na sua pasta do projeto, ex. Documentos/Aprendendo HTML5/index.html
Não se esqueça de salvar o documento com a extensão .html, caso o contrário o navegador não irá interpretar como um documento HTML.
Passo 4: Dê 2 cliques no arquivo salvo, ele irá abrir com seu navegador padrão e mostrar seu código renderizado.
PARABÉNS, você criou sua primeira página HTML.
