Exemplos básicos de HTML
Neste capítulo mostraremos alguns exemplos básicos de HTML.
Não se preocupe se usarmos tags que você ainda não conhece.
Documentos HTML
Todos os documentos HTML devem começar com uma declaração de tipo de documento: <!DOCTYPE html>.
O próprio documento HTML começa <html>e termina com </html>.
A parte visível do documento HTML está entre <body>e </body>.
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A Declaração <!DOCTYPE>
A <!DOCTYPE>declaração representa o tipo de documento e ajuda os navegadores a exibir as páginas da Web corretamente.
Ele deve aparecer apenas uma vez, no topo da página (antes de qualquer tag HTML).
A <!DOCTYPE>declaração não diferencia maiúsculas de minúsculas.
A <!DOCTYPE>declaração para HTML5 é:
<!DOCTYPE html>
Títulos HTML
Os cabeçalhos HTML são definidos com as tags <h1>to .<h6>
<h1>define o título mais importante. <h6>define o título menos importante:
Exemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Parágrafos HTML
Os parágrafos HTML são definidos com a <p>tag:
Exemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Links HTML
Os links HTML são definidos com a <a>tag:
Exemplo
<a href="https://www.w3schools.com">This is a link</a>
O destino do link é especificado no hrefatributo.
Os atributos são usados para fornecer informações adicionais sobre elementos HTML.
Você aprenderá mais sobre atributos em um capítulo posterior.
Imagens HTML
As imagens HTML são definidas com a <img>tag.
O arquivo de origem ( src), o texto alternativo ( alt),
widthe heightsão fornecidos como atributos:
Exemplo
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Como visualizar o código-fonte HTML?
Você já viu uma página da Web e se perguntou "Ei! Como eles fizeram isso?"
Veja o código-fonte HTML:
Clique com o botão direito do mouse em uma página HTML e selecione "Exibir código-fonte da página" (no Chrome) ou "Exibir código-fonte" (no Edge) ou similar em outros navegadores. Isso abrirá uma janela contendo o código-fonte HTML da página.
Inspecione um elemento HTML:
Clique com o botão direito do mouse em um elemento (ou em uma área em branco) e escolha "Inspecionar" ou "Inspecionar Elemento" para ver de que elementos são compostos (você verá o HTML e o CSS). Você também pode editar o HTML ou CSS dinamicamente no painel Elementos ou Estilos que é aberto.