O HTML é a linguagem de marcação padrão para criar páginas da web. Browsers como Chrome, Edge e FireFox interpretam o HTML e renderizam páginas da internet.
HTML significa Hyper Text Markup Language
HTML descreve a estrutura de uma página da Web
HTML consiste em uma série de elementos os quais chamamos de tag
Os elementos HTML informam ao browser como exibir o conteúdo
Os elementos HTML rotulam partes do conteúdo como "este é um cabeçalho", "este é um parágrafo", "este é um link" etc.
O HTML está na versão 5 e está será a versão abordada neste curso
Um simples código HTML
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Cabeçalho</h1>
<p>Parágrafo.</p>
</body>
</html>Exemplo explicado
A declaração <! DOCTYPE html> define que este documento é um documento HTML5
O elemento <html> é o elemento raiz de uma página HTML
O elemento <head> contém meta informações sobre a página HTML
O elemento <title> especifica um título para a página HTML (que é mostrada na barra de título do browser ou na guia da página)
O elemento <body> define o corpo do documento e é um contêiner para todo o conteúdo visível, como títulos, parágrafos, imagens, hiperlinks, tabelas, listas, etc.
O elemento <h1> define um cabeçalho grande
O elemento <p> define um parágrafo
Hands On
Confuso até agora? Vamos ver na prática como isso funciona!
Abra o vscode
Dê dois clique em qualquer parte da área marcada, uma aba nova será criada. Copie o código do exemplo acima e cole-o no vscode
Clique no canto inferior direito onde está escrito "Plain text". Uma caixa de texto no canto superior irá abrir. Digite HTML nela.
O "Plain Text" significa que o arquivo será salvo com extensão .txt como estamos trabalhando com HTML temos que salvar o arquivo com extensão .html
Pressione Ctrl + s para salvar o aquivo. Uma janela irá se abrir para que você informe o nome do arquivo e a localização onde o mesmo deverá ser salvo.
Este é o arquivo que acabamos de salvar. Ele está com o ícone do Chrome, pois este é o meu browser padrão.
Clique duas vezes sobre o arquivo para executar o mesmo
Observe que o conteúdo que escrevemos no arquivo foi exibido no browser.
Onde normalmente se exibe a url de um site está sendo exibido o caminho onde o arquivo foi salvo.
O texto está todo mal formatado.
Corrigindo formatação
Este é um erro clássico de encode. E ele acontece devido os acentos presentes na nossa língua portuguesa.
Para corrigir isso basta adicionar esta linha código ao seu arquivo HTML
<meta charset="utf-8" />
Após adicionar o código acima salve o arquivo e dê um refresh no browser para ver o conteúdo atualizado do mesmo.
Tudo agora está funcionando conforme o esperado!
Parabéns pela iniciativa!
Quarta-feira tem mais! Qualquer dúvida estou à disposição!
Boa