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.
