Neste post irei apresentar algumas das tags HTML que, no meu ponto de vista, são usadas com mais frequência.
Caso não tenha ficado claro no post anterior um elemento HTML é definido abrindo uma tag, colocando um conteúdo e depois fechando esta mesma tag
<nomeDaTag>Um conteúdo qualquer</nomeDaTag>O <> indica que você está começando uma nova tag e o </> indica que a mesma está sendo encerrada.
Algumas tags como <br> (usada para quebra de linha) não possuem conteúdo. Portanto, não é necessário usar </> para indicar que a tag foi encerrada.
HTML Tags
Html
<html></html> Indica que o documento é do tipo HTML todas as outras tags ficam dentro desta.
Title
<title></title> Indica o título do documento. É o escrito que aparece nas abas do browser
Head
<head></head> É um container onde as meta informações da página ficam como por exemplo a tag title
Body
<body></body> É o corpo da sua página onde são inseridos os conteúdos que serão exibidos no browser
Div
<div></div> Funciona como um container onde agrupamos conteúdos diversos. Portanto, é possível usar diferentes elementos HTML dentro
Ul
<ul><li></li></ul> É o elemento usado para criar listas ele é utilizado em conjunto com a tag <li>
H1 - H6
<h1></h1> - <h6></h6> Usado para criar cabeçalhos de diferentes tamanhos vai do tamanho 1 ao 6
P
<p></p> É usado para criar um parágrafo.
A
<a></a> Esta tag é usada para criar links para outros sites ou até mesmo outras páginas dentro do mesmo site. Esta tag tem um atributo chamado href que é onde informamos o link de destino
Img
<img/> É usada para inserir uma imagem dentro de um documento HTML. Esta tag possui o atribuito src que é onde informamos onde a imagem está
<html>
<head>
<title>Oi sou um title</title>
</head>
<body>
<div>Oi eu sou uma div</div>
<br>
<ul>
<li>Oi eu sou o um li dentro de um ul</li>
<li>Oi eu sou outro li dentro do mesmo ul</li>
</ul>
<h1>Oi eu sou um h1</h1>
<h2>Oi eu sou um h2</h2>
<h3>Oi eu sou um h3</h3>
<h4>Oi eu sou um h4</h4>
<h5>Oi eu sou um h5</h5>
<h6>Oi eu sou um h6</h6>
<p>Eu sou um p</p>
<a href="http://www.google.com" target="_blank">Eu sou um link que aponta para o google</a>
<br>
<img src="https://picsum.photos/200" />
</body>
</html>Copie e cole o código acima no seu vscode, dê um nome de sua preferência e salve o arquivo com extensão .html
Não fique apenas copiando e colando! Tire um tempo para analisar o código pois é isto que fará com que você entenda a tecnologia!
Esta deverá ser a saída do código acima
Exercício
Baseado no que foi explicado até o momento escreva um código HTML em que o resultado seja igual ao da seguinte imagem
Curtir!
Fiquei com dúvida na tag: target="_blank".