Anotações sobre tópico de HTML do Curso "Introdução a criação de web sites com HTML5 e CSS3"

22/06/2022 10:23

José Sampaio

José Sampaio

Brasil

Anotações sobre tópico de HTML do Curso "Introdução a criação de web sites com HTML5 e CSS3"
  • #HTML

Introdução a criação de web sites com HTML5 e CSS3

SEMÂNTICA

Os elementos dentro do HTML possuem significados, os principais são:

  • h1 - h6 → títulos
  • section → sessão gerérica
  • header → cabeçalho
  • aside → conteudo relacional
  • article → conteudo relevante
  • footer → rodapé

Estrutura básica HTML

<!DOCTYPE html> //diz ao navegador o que esá escrevendo
<html>
	<head> // informações ao navegador
		<meta charset = "UTF-8"> 
		<title></title>
	</head>
	<body>
	</body>
</html>

Exemplo adcionando elementos semanticos :

<!DOCTYPE html> 
<html>
	<head> // informações ao navegador
		<meta charset = "UTF-8"> 
		<title></title>
	</head>
	<body>
<header>
	<h2> Ruan Sampaio </h2>
<header>	
<section>
	<article>
		<header> 
			<h3> </h3>
		</header>
</article>
</section>
	</body>
</html>

Textos e links

usa-se tags

  • <p></p> → para paragrafos e até outros elementos

para links:

a tag “a” é uma ancora que liga vários elementos.

  • <a>link</a>
  • exemplos:
  • <a href=”link”>Nome link </a> → hiperlik para um outro site.
  • <a href=”mailto:sampaioruan02@gmail.com”>Nome link </a>
  • <a target = “_blank”> link </a> → indica como o link será aberto. neste caso o _black abre o linkl em um nova aba.

IMAGENS

Para inserir imagens usaos a seguinte tag: img. e ela tem epnas 2 atributos próprios.

<img src=”caminhodaimagem.jpg”>

<img alt=” descrisão da imagem”>

obs: site “tynepng” ele diminui o tamanho das imagens.

LISTAS

Existem dois tipos de listas no html:

  • <ul> aqui a ordem não importa.
  • <ol> ordem importa, os items da listas são enumerados.
  • <li> item da lista

Exemplo com ul:

<ul>
	<li> item da lista</li>
</ul>

Exemplo com ol:

<ol>
	<li> 1. item da lista</li>
	<li> 2. item da lista</li>

<ol>

Faça parte da nossa comunidade!

Domine as tecnologias utilizadas pelas empresas mais inovadoras do mundo e encare seu novo desafio profissional, evoluindo em comunidade com os melhores experts.

0

Certificado

Artigo relacionado

Comentários

    Nenhum comentário