HtmlParte4

<!--Vamos aprender agora o que cada documento html possue de básico-->

<!DOCTYPE html> <!--Serve para especificar que vamos usar a versao html5(mais recente)-->
<html lang="pt"> <!--Serve para indicar o começo e final do nosso documento html-->
<!--A etiqueta html junto com lang serve para especificar o idioma da
nossa página-->
<head> <!--Head é a cabeça do documento, é onde irá geralmente coisa que
o usuário não irá interagir-->
<style>
/*Podemos usar código css externo usando a tag
<link rel ="stylesheet" href = ""/> onde href é o lugar do cumputador onde está o seu código css  */
header{  /*Em css para editar um etiqueta é só escrever o nome e usar {}*/
background-color:  red;
}
nav{
background-color: yellow;
}
aside{
background-color:blue;
}
section{
background-color: coral;
height: 100px;   /* Se vc não mudar o height, não irá ver a parte section , já que ele está
embaixo de article */

}
article{
background-color: blueviolet;
}

footer{
background-color: aquamarine
}
</style>
<meta charset = "UTF-8"/> <!--Para acentuação grafica no nosso documento
isso dependendo do idioma muda-->
<meta name = "keywords" content="HTML,aprendizagem"/><!--Serve para que os
buscadores saibam do que se trata nossa página keywords=palavras chaves
o usuário não ira ver isso-->
<meta name="description" content="Página sobre html5"/><!--Mesma coisa que
está encima, mas agora é descrição, existem mais tags do tipo meta name
aqui vamos ver apenas essas duas-->
<title>Página sobre html</title><!--Título da nossa página ou seja o texto
que é exibido na aba-->
</head>
<body><!--Body ou corpo é a parte onde vamos colocar tudo o que o usuário
pode interagir ou visualizar-->
<header> <!--Cabeçalho da nossa página-->
<hgroup> <!--Hgroup é usado para agrupar várias tags h em html, quando temos
vários titulos como abaixo é recomendado usar o hgroup-->
<h1>Página sobre html5</h1><!--Serve para colocar um título, vai de h1 até h6-->
<h2>Subtitulo página html</h2>
<h3>Segundo subtitulo página html</h3>
</hgroup>
</header>
<nav><!--Barra de navegação-->
<ol> <!--Usado para criar lista com ordens-->
<li>Item 1</li> <!--Li serve para adicionar um item as nossas listas-->
<li>Item 2</li>
</ol>
<ul><!--Usado para criar listas sem ordem-->
<li>TIem 3</li>
<li>Item 4</li>
</ul>
</nav>
<aside><!--Como um menu que fica ao lado da nossa página-->
<p>Exemplo normal</p> <!--Serve para fazer um parrágrafo na nossa página-->
<p><strong>Texto em negrito</strong></p><!--Strong serve para colocar texto em negrito-->
<p><em>Texto em italico</em></p><!--Em para texto em itálico-->
<p><small>Texto pequeno</small></p><!--Small texto pequeno-->
<p><address>Texto estilo para endereços</address></p><!--Texto para endereços-->
<p><mark>Texto marcado</mark></p><!--Serve para destacar textos-->
<p><cite>Texto usado para citacões</cite></p><!--Texto para citações-->
</aside>
<section><!--Uma seção da nossa página-->
<article><!--Outra estrutura que geralmente usamos dentro de section, podemos pensar
aricles como um conjunto denoticias, posts de blog etc.-->
<time datetime="26-03-2019" pubtime>Dia : 26-03-2019</time><!--Usado para
indicar datas em html, pubtime significa data de publicação do artigo-->
<blockquote cite="www.wikpedia.com"><!--Usado para citações, a diferença
entre blockquote e cite é que blockquote incluimos o site,url-->
Citação livro da wikpedia
</blockquote>
</article>
</section>
<footer>Direito reservados</footer> <!--O rodapé da página-->
</body>
</html>