Aula 07

Semântica em HTML
● As tags - header, section, asside e footer - são
tags novas do HTML5.
● Antigamente, teríamos criado apenas três div,
uma para cada parte da página, e talvez
colocado ids diferentes pra cada uma.

Semântica em HTML
● Qual a diferença entre colocar div e essas novas tags do
HTML5? Visualmente e funcionalmente, nenhuma. A única
diferença é o nome da tag e o significado que elas carregam.
E isso é bastante importante.
● Dizemos que a função do HTML é fazer a marcação do
conteúdo da página, representar sua estrutura da informação.
Não é papel do HTML, por exemplo, cuidar da apresentação
final e dos detalhes de design - isso é papel do CSS. O HTML
precisa ser claro e limpo, focado em marcar o conteúdo.

Semântica em HTML
● As novas tags do HTML5 trazem novos significados
semânticos para usarmos em elementos HTML. Em vez
de simplesmente agrupar os elementos do cabeçalho em
um div genérico e sem significado, usamos uma tag
header que carrega em si o significado de representar
um cabeçalho.
● Com isso, temos um HTML com estrutura baseada no
significado de seu conteúdo, o que traz uma série de
benefícios, como a facilidade de manutenção e
compreensão do documento.

Layout
● Tag Header:
– Define onde será a parte de cima do nosso site,
onde ficará o menu, que contera os links para
navegar nas outras paginas, baners, figuras etc.
<header>
</header>
OBS: não confunda o <header> com o <head>

Layout
● Tag aside:
– Local não obrigatorio que ficará conteudos extra da
nossa pagina em uma das laterais.
<aside>
</aside>

Layout
● Tag section:
– Parte do nosso site que ficará o conteudo da
pagina. Podemos adicionar texto, figuras, videos
etc.
<section>
</section>

Layout
● Tag Footer:
– Parete onde ficará o rodapé da nossa pagina.
Podemos alocar links, informações do
desenvolvedor etc.
<footer>
</footer>

TAG DIV
● A tag <div> serve para alterar o estilo em partes
específicas da página e posionar objetos.
● Devemos iniciar pela tag <div> e terminar com a
tag </div>
● A tag <div> deve sempre ser estilizada por um
arquivo .css, mas para isso é preciso definirmos
um id ou class para ele
– <div id= “ corpo ”>

Css
● Cascading Style Sheets (CSS) é uma
linguagem de folhas de estilo utilizada para
definir a apresentação de documentos escritos
em uma linguagem de marcação, como HTML
ou XML.
● O seu principal benefício é a separação entre o
formato e o conteúdo de um documento.

Css
● CSS define como serão exibidos os elementos
contidos no código de uma página da internet e
sua maior vantagem é efetuar a separação
entre o formato e o conteúdo de um
documento.

Por que o CSS foi criado?
● Com a evolução dos recursos de programação
as páginas da internet estavam adotando cada
vez mais estilos e variações para deixá-las
mais elegantes e atrativas para os usuários.
Com isto, linguagens de marcação simples
como o HTML, que era destinada para
apresentar os conteúdos também precisou ser
aprimorada.

● Foram criadas novas tags e atributos de estilo
para o HTML e em resumo ele passou a exercer
tanto a função de estruturar o conteúdo quanto de
apresentá-lo para o usuário final. Entretanto, isto
começou a trazer um problema para os
desenvolvedores, pois não havia uma forma de
definir, por exemplo, um padrão para todos os
cabeçalhos ou conteúdos em diversas páginas.
Ou seja, as alterações teriam que ser feitas
manualmente, uma a uma.

● A partir destas complicações, nasceu o CSS.
Primariamente, foi desenvolvido para habilitar a separação
do conteúdo e formato de um documento (na linguagem de
formatação utilizada) de sua apresentação, incluindo
elementos como cores, formatos de fontes e layout. Esta
separação proporcionou uma maior flexibilidade e controle
na especificação de como as características serão exibidas,
permitiu um compartilhamento de formato e reduziu a
repetição no conteúdo estrutural de uma página.

TAG link
● Link, em inglês, significa ligação, elo ou
conexão.
● E é isso que os links fazem em HTML, eles
conectam uma página da internet até outra,
eles levam o usuário de um local a outro.
● Um link pode ser um uma página HTML, uma
imagem, um e-mail, um endereço de FTP etc.

TAG link
● No caso da tag link gera uma ligação entre o
meu arquivo HTML ao meu arquivo CSS.

Tag link
● Atributos da Tag Link
– Rel = ”stylesheet ” → folha de estilo
– Type = “ text/css”
– Href = “css/stilo.css ” (href → Hypertext Reference)

TAG NAV
● A tag nav vai fazer uma referencia ao menu de
navagação do nesso site.
● Geralmente ela fica no Header do site.

OBS: posições
● Relativa:
– Posição do objeto com relação ao seu conteiner, no
caso do menu em relação ao seu nav
● Absoluta:
– Posição do objeto com relação ao site inteiro

Hover
● Efeito que vai ser aplicado quando o mouse
passar por cima de um objeto

transition
● Funciona para monitorar a transição de um
houver.

Aula 07

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula 07

Mais de Jorge Ávila Miranda

Último

Aula 07