AULA 02 e 03

HTML 5
• O HTML5 modifica a forma de como

escrevemos código e organizamos a
informação na página.
Criando documentos em HTML 5
• Assim como em outras linguagens, o HTML possui uma
sintaxe própria e que devem seguir algumas regras.
• Esses comandos são denominados de TAGs e nada
mais são do que marcas padrões, utilizadas para fazer
indicações a um browser.
• As TAGs aparecem sempre entre sinais de “menor que”
(<) e “maior que” (>);
• Geralmente são utilizadas aos pares, onde a TAG de
finalização de um comando qualquer é finalizada com a
precedência de uma barra (/). Por exemplo:
• <html> e
• </html>
• Qualquer documento HTML é construído
através da utilização das TAGs, seguindo a
estrutura abaixo.
<Nome_da_TAG Atributo_1=“valor_1”
Atributo_2=valor_2”>.....
</Nome_da_TAG>
Ex.:
• Tudo que se encontra entre a tag (…..), seja um
texto, imagem ou outro elemento qualquer,
receberá a formatação definida pela tag e seu(s)
atributo(s).
• Os símbolos <> indicam que a tag foi “aberta”, ou
seja, o efeito de marcação desta tag atuará até
que a mesma seja “fechada” com os símbolos
</>. É importante ressaltar que algumas tags não
necessitam de “fechamento”, porém isso pode
ser resolvido colocando a “/” dentro da tag de
abertura, ao final do nome: <br />.
OBSERVAÇÃO
• As tags HTML não são case sensitive, ou seja,
não diferenciam letras maiúsculas de
minúsculas.
• Portanto, tanto faz você escrever
<html></html> como <HTML></HTML>
porém, por boas práticas de conduta, é
indicado que tudo seja escrito em caixa baixa
(letra minúscula).
O que é necessário para iniciar?
• Ter um navegador.
O que é necessário para iniciar?
• Você precisa de um editor de texto simples.
• Você não precisa estar conectado à Internet,
para construir seus sites.
• Você pode fazer o site no disco rígido do seu
computador e enviá-lo para a Internet quando
ele for concluído.
Utilizando algumas TAGs básicas
• Tags são etiquetas que utiliza para marcar o início
e o fim de um elemento. Todas as marcas têm o
mesmo formato: começam com um sinal de
menor "<" e terminam com um sinal de maior
que ">“.
• De um modo geral, existem dois tipos de tags -
tags de abertura: <html> e tags de fechamento:
</ html>.
A única diferença entre uma tag de abertura e uma
tag de fechamento é a barra "/". Você rotular
conteúdo, colocando-o entre uma tag de abertura e
uma tag de fechamento.
TAG Básica
• <html> </html>: a tag html é utilizada para
definir o início e o fim de um arquivo do tipo
HTML, ou seja, ela é a primeira tag a ser “aberta”
e a última a ser “fechada”.
• <head> </head>: a tag head é utilizada para
definir o cabeçalho do documento html, é dentro
da delimitação desta tag que inserimos
informações como título da página web, tipo de
codificação (quando necessário) e indicação de
documentos importados.
TAG Básica
• <title> </title>: a tag title é utilizada para
definir o nome da página web, ou seja, seu
título, que aparecerá nas abas dos
navegadores. Esta tag deve ser inserida dentro
da delimitação da tag head, pois faz parte do
cabeçalho do documento html.
• <body> </body>: a tag body é utilizada para
definir o “corpo” da página html, ou seja, é
onde estará contido todo o conteúdo da
página web.
•DOCTYPE,
language e
charset.
DOCTYPE
• O Doctype deve ser a primeira linha de código
do documento, ou seja, antes da tag html, ele
indica para o navegador e para outros meios
qual a especificação de código utilizar.
• O Doctype é uma “tag especial” do HTML, mas
uma instrução para que o browser tenha
informações sobre qual versão de código a
marcação foi escrita. Em HTML 5 o novo modo
de declarar o doctype é:
<!DOCTYPE html>
Exemplo
Metatag CHARSET
• Para definirmos qual codificação de
caracteres utilizaremos em nossa página web,
usamos a tag meta com seus atributos, dentre
os quais o principal é o charset. Vejamos a
nova maneira de definir a codificação de
caracteres em HTML 5:
<meta charset="utf-8">
Praticando!
• Exercício 1.1: Agora exercitaremos o que
aprendemos até o momento, para isso utilizaremos
um editor de texto simples onde digitaremos as
seguintes linhas de código:
<!DOCTYPE html>
<html lang=“pt-br”>
<head>
<title>Primeira Página HTML </title>
<meta charset=“utf-8”>
</head>
<body>
Minha Primeira Página HTMl
</body>
</html>
Comentários em HTML.
• Os comentários são de extrema importância em
um código HTML, pois com eles entendemos o
que cada trecho/linha de código está fazendo.
Obviamente tudo que é descrito em forma de
comentário não aparece na página web,
podendo ser visualizado apenas no código
fonte da página web.
• Em seu código HTML tudo que estiver entre as
marcações  será compreendido como
comentário.
Exemplo
Conhecendo outras TAGs
• Trabalhando com textos: Tags - <Hn>, <P>,
<BR> e &nbsp.
• Primeiramente aprenderemos a criar diversos
níveis de cabeçalhos que podem ser usados
para criar títulos para textos que se
encontram no corpo de sua página web, ou
seja, dentro da tag body.
Faça o teste no seu dispositivo
• <h2> é subtítulo de <h1>, <h3> é subtítulo de <h2> e
de <h1> e assim sucessivamente.
• No “novo” HTML5, existe uma maneira semântica de
agrupar esses títulos, utilizando a nova tag chamada
<hgroup>.
• Perceba que visualmente ela não alterará nada pois
essa tag atua na semântica da escrita do código. Como
se pode perceber, os títulos têm algo em comum e
todos vêm escritos de forma seguida, portanto, eles
devem ser “agrupados”.
• Perceba também, que podemos utilizar mais de um
cabeçalho de mesmo nível e não há necessidade que
eles tenham numeração seguidas.
Exemplo
<body>
<hgroup>
<h1> Projeto e-Jovem </h1>
<h1> Módulo II </h1>
<h5> Des. Web I </h5>
<h3> Html e CSS</h3>
</hgroup>
</body>
Parágrafo <p> </p>
• Para o HTML, o “enter” e a tecla de espaço do
seu teclado, não funciona. Veremos agora, como
resolver sempre que precisarmos dar “enters” ou
vários espaços em nossas páginas: A tag p é
responsável por inserir quebra de linha entre um
parágrafo e outro. Veja o exemplo:
<body>
<p> Insira aqui o seu texto</p>
</body>
Quebra de linha <br>
• Até então a quebra de linha em nossa página HTML é
feita pelo próprio browser, porém é interessante que
tenhamos controle sobre isso, uma vez que, em
algumas situações precisamos definir como ocorrerá a
quebra de linha. Para isso, utilizamos a tag <br>.
Vejamos um exemplo:
<body>
Primeira linha do texto.<br>
Segunda linha do texto.<br>
Terceira linha do texto.
</body>
• O caractere especial conhecido por &nbsp é o
responsável por atuar como a tecla de espaço do seu
computador. Cada &nbsp aplicado, significa um espaço
dado:
<body>
Primeira palavra.

Segunda
palavra
</body>
Aula 03
Novos Elementos Estruturais
• No HTML5, como existe uma importância

semântica (ESCRITA) muito grande, existem
tags especiais para organizar a estrutura da
criação do layout de uma página.
• HEADER: Como o próprio nome pode sugerir,
ela que vai encabeçar uma região de seu site.
Cuidado para não confundir com a tag
<head>, que serve para informar
características da página.
• O que existe no <header> será, de fato,
exibido no seu site.
• NAV: O elemento nav representa uma seção da
página que contém links para outras partes do
website.
• Nem todos os grupos de links devem ser
elementos nav, apenas aqueles grupos que
contém links importantes. Isso pode ser aplicado
naqueles blocos de links que geralmente são
colocados no Rodapé e também para compor o
menu principal do site.
EXEMPLO
<aside> - a parte, de lado
• Define um conteúdo reservado do resto
do conteúdo da página. Se for removida,
o conteúdo restante ainda fazem sentido.
• SECTION: A tag section define uma nova seção
genérica no documento.
• Por exemplo, a página inicial de um website
pode ser dividida em diversas seções:
introdução ou destaque, novidades,
informação de contato e chamadas para
conteúdo interno.
<article> - artigo
• Define que pode existir de forma
independente do resto do conteúdo. Esta Tag
poderia ser um post no fórum, um artigo de
revista ou jornal, uma entrada de log da
Web, um comentário enviado pelo usuário, ou
qualquer outro item independente
do conteúdo.
• FOOTER: O elemento footer representa
literalmente o rodapé da página. Seria o
último elemento antes de fechar a tag HTML.
O footer não precisa aparecer
necessariamente no final de uma seção.
rodapé
Novos Elementos Estruturais
ATIVIDADE REVISÃO
• Faça uma pagina html inserindo as tags a
seguir, inclua nessa página parágrafos, títulos,
use as tags <br>, <h1>, <p> para formatar os
textos, coloque textos de pelo menos cinco
parágrafos.
• 02. Para que serve a tag <header>, <nav>,
<footer>, coloque também um exemplo de
uso.

AULA 02 e 03

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

AULA 02 e 03

Enviado por

Direitos autorais:

Formatos disponíveis

HTML 5

• O HTML5 modifica a forma de como

• No HTML5, como existe uma importância

Você também pode gostar