Usando um esqueleto HTML
Um esqueleto é a estrutura de suporte de um organismo.
Normalmente é feito de algo duro, para proteger um corpo mais vulnerável.
Enciclopédia
Todo desenvolvedor Web deve ter um esqueleto HTML.
Deve ser mantido no bolso e usado para todos os trabalhos:
Exemplo
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
Clique no botão "Experimente você mesmo" para ver como funciona!
Tente alterar o texto "Este é um título" para "Este é meu casamento".
Você fez isso?
Parabéns! Agora você sabe como editar HTML.
Esqueleto HTML explicado
O DOCTYPE deve estar presente. Informa ao navegador que este é um documento HTML:
<!DOCTYPE html>
Uma tag inicial html e uma tag final html definem o início e o fim de um documento HTML.
O idioma é o inglês:
<html lang="en">
</html>
Uma meta charset tag define o conjunto de caracteres (UTF-8):
A página HTML não tem tags de cabeçalho. As tags de cabeçalho não são necessárias em HTML.
Em HTML, tudo antes da tag body é considerado parte da cabeça.
<meta charset="UTF-8">
O padrão HTML requer um título de página adequado:
<title>Page Title</title>
Uma meta tag viewport faz com que a página fique bem em todos os tamanhos de tela (laptop, mobile):
<meta name="viewport" content="width=device-width,initial-scale=1">
A tag de link vincula a uma folha de estilo:
<link rel="stylesheet" href="name">
A tag inicial e a tag final envolvem o estilo CSS futuro:
<style>
</style>
A tag de script vincula a um script:
<script src="name"></script>
A tag inicial e a tag final circundam o corpo visível do documento HTML:
<body>
</body>
As tags de imagem definem imagens HTML:
<img src="img_la.jpg" alt="LA" style="width:100%">
Crie o hábito de "empacotar" seções HTML em elementos div.
Prepare-se para dar a cada seção um nome de classe:
<div class="class name">
</div>
As tags de cabeçalho definem os cabeçalhos HTML:
<h1>This is a Heading</h1>
As tags de parágrafo definem parágrafos HTML:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>