Criação de sites com HTML5

______________________________________________________________________________________________
Curso Técnico em Informática 1 Criação de sites
ESCOLA TÉCNICA ESTADUAL
MONTEIRO LOBATO
Criação de Sites
Curso Técnico em Informática

______________________________________________________________________________________________
1 HTML............................................................................................................................................5
1.1 Introdução. ......................................................................................................................5
1.1.1 O HTML5 ...........................................................................................................5
1.1.2 Requisitos para o desenvolvimento de uma página WEB .................................5
1.1.3 Tags HTML.........................................................................................................5
1.1.4 Navegadores......................................................................................................6
1.2 Editor...............................................................................................................................6
1.2.1 Adobe Dreamweaver .........................................................................................6
1.2.2 Notepad++ .........................................................................................................7
1.2.3 IDEs – Muito além do HTML..............................................................................7
1.2.3.1 Eclipse..................................................................................................7
1.2.3.2 Aptana ..................................................................................................7
1.2.3.3 Netbeans..............................................................................................7
1.3 Fundamentos do HTML...................................................................................................8
1.3.1 Etiqueta..............................................................................................................8
1.3.2 Elemento............................................................................................................8
1.3.3 Atributo e valor...................................................................................................9
1.3.3.1 Convenções .......................................................................................10
1.4 Estruturas ....................................................................................................................10
1.4.1 Textos .............................................................................................................. 11
1.4.1.1 Parágrafo e quebra de linha............................................................... 11
1.4.1.2 Atributo align.......................................................................................12
1.4.1.3 Texto pré-formatado ...........................................................................14
1.4.1.4 Cabeçalho e linha horizontal ..............................................................15
1.4.1.4.1 Cabeçalho.............................................................................15
1.4.1.4.2 Linha horizontal ....................................................................15
1.4.1.5 Formatação de texto (estilo físico x estilo lógico) ...............................16
1.4.1.6 Fonte ..................................................................................................18
1.4.1.6.1 Face......................................................................................18
Sumário

______________________________________________________________________________________________
1.4.1.6.2 Size.......................................................................................19
1.4.1.6.3 Color .....................................................................................20
1.4.1.7 Cor .....................................................................................................21
1.4.1.8 Alinhamento e recuo...........................................................................22
1.4.1.8.1 Alinhamento (DIV).................................................................22
1.4.1.8.2 Recuo (BLOCKQUOTE) .......................................................22
1.4.1.9 Caracteres especiais e comentários ..................................................23
1.4.1.9.1 Caracteres especiais ............................................................23
1.4.1.9.2 Comentários .........................................................................24
1.4.2 Links ................................................................................................................25
1.4.2.1 O atributo target .................................................................................25
1.4.2.2 Imagem como Link .............................................................................25
1.4.2.3 Criar um marcador .............................................................................25
1.4.3 Imagens...........................................................................................................26
1.4.3.1 Imagem no documento HTML............................................................26
1.4.3.2 Tipos de imagem ................................................................................26
1.4.3.3 Atributos do elemento IMG.................................................................26
1.4.3.3.1 Src, border, alt ......................................................................26
1.4.3.3.2 Width, height.........................................................................27
1.4.3.3.3 Align......................................................................................28
1.4.3.4 Imagem de fundo ...............................................................................30
1.4.4 Vídeos..............................................................................................................30
1.4.5 Listas ...............................................................................................................31
1.4.5.1 Lista ordenada e lista não-ordenada..................................................31
1.4.5.2 Atributos do elemento OL...................................................................32
1.4.5.3 Atributos do elemento UL ...................................................................33
1.4.5.4 Lista de definição ...............................................................................34
1.4.5.5 Aninhando de listas ............................................................................34
1.4.6 Tabelas ............................................................................................................36
1.4.6.1 Linha de tabela: TR ............................................................................38
1.4.6.2 Título e legenda: CAPTION................................................................39
1.5 Formulários..................................................................................................................41
1.5.1 Elementos do formulário ..................................................................................41
1.5.1.1 O elemento <form> ............................................................................41
1.5.1.2 O elemento <input>............................................................................41

______________________________________________________________________________________________
1.5.1.3 O elemento <select> ..........................................................................41
1.5.1.4 O elemento <option>..........................................................................42
1.5.1.5 O elemento <textarea>.......................................................................42
1.5.1.6 O elemento <button>..........................................................................42
1.5.1.7 Elemento <datalist>............................................................................42
1.5.1.8 Elemento <keygen> ...........................................................................43
1.5.1.9 Elemento <output> .............................................................................43
1.5.2 Atributos .....................................................................................................................44

______________________________________________________________________________________________
1.1 Introdução
O HiperText Markup Language ou simplesmente HTML, continua trazendo grandes
contribuições para o advento da internet, pois é o tipo de conteúdo que mais trafega pela rede
mundial de computadores. Apesar da enorme importância para o mundo da informação o HTML
estancou na versão 4.0.1 desde 1999 e não acompanhou as dinâmicas mudanças que ocorreram
nos últimos anos e para atender as necessidades careceu utilizar plugins externos como o flash
player e outros. Mas felizmente, isso são coisas do passado, pois a W3C (World Wide Web
Consortium) e a WHATWG (Web Hypertext Application Technology Working Group)
disponibilizaram uma versão de teste que provavelmente será a nova cara do HTML. Esse artigo
mostra as novas características dessa versão que, inclusive, já tem suporte para algumas
funcionalidades nos mais conceituados navegadores e brevemente será oficializado por definitivo
como o HTML 5.
1.1.1 O HTML5
Surgido a partir de um consórcio entre a W3C (World Wide Web Consortium) e a WHATWG
(Web Hypertext Application Technology Working Group), o HTML5 será o novo padrão para a
estruturação e apresentação de conteúdo na Word Wide Web trazendo melhorias significativas com
novas funcionalidades de semântica e acessibilidade, além de melhorar o suporte aos mais
recentes conteúdos multimídias.
As principais mudanças que a nova versão proporcionará aos usuários são: Melhor
tratamento de exceção, mais tags para substituir scripts, independência de plataforma e redução
da necessidade de plugins externos.
1.1.2 Requisitos para o desenvolvimento de uma página WEB
Para desenvolver uma página Web é necessário conhecer a linguagem HTML para escrever
o código fonte de sua página. Como ferramenta é utilizado um editor de textos para gerar o seu
código fonte (bloco de notas, Front Page, Dremweaver, entre outros). Para exibição de uma página
Web é necessário um navegador de internet (browser) para visualizar as páginas (Internet Explorer,
Mozilla, Chrome, Netscape, etc).
1.1.3 Tags HTML
Tags HTML são palavras-chave (nomes de tag) cercadas por colchetes angulares:
< tagname > conteúdo < / tagname >
 Tags HTML normalmente vêm em pares como <p> e </ p>;
 A primeira tag em um par é a marca inicial, a segunda tag é a tag final;
 A marca final é escrita como a marca inicial, mas com uma barra antes do nome do
tag.
HTML 1

______________________________________________________________________________________________
Exemplo de um pequeno documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Titulo da página</title>
</head>
<body>
<h1>Título</h1>
<p>Paragrafo</p>
</body>
</html>
Exemplo Explicado:
 A declaração DOCTYPE define o tipo de documento HTML;
 O texto entre <html> e </ html> descreve um documento HTML;
 O texto entre <head> e </ head> fornece informações sobre o documento;
 O texto entre <title> e </ title> fornece um título para o documento;
 O texto entre <body> e </ body> descreve o conteúdo da página visível;
 O texto entre <h1> e </ h1> descreve um título;
 O texto entre <p> e </ p> descreve um parágrafo.
Usando esta descrição, um navegador pode exibir um documento com um título e um parágrafo. A
marca de início é muitas vezes chamada de tag de abertura. A marca final é muitas vezes
chamada a marca de fechamento.
1.1.4 Navegadores
A finalidade de um navegador (Chrome, IE, Firefox, Safari) é ler documentos HTML e exibi-
los.
O navegador não exibe as tags HTML, mas usa elas para determinar como exibir o
documento:
1.2 Editor
Um bom editor de códigos pode agilizar e facilitar muito a vida do WebDesigner, eles pos-
suem recursos que facilitam muito a fase de criação e codificação das páginas, aumentando a
produtividade e reduzindo os erros.
Existem no mercado diversos software que fazem essa função, cada um com suas caracte-
rísticas. Cabe ao profissional analisar qual se encaixa melhor no seu perfil e necessidades e então
definir qual é o melhor editor HTML para ele.
Segue abaixo, alguns dos principais editores do mercado, com suas principais característi-
cas, para que você possa fazer a melhor escolha.
1.2.1 Adobe Dreamweaver
Essa é uma das ferramentas mais completas do mercado, traz funcionalidades de auto-
completamento de código, coloração especifica das tags, ótima integração com todas as outras

______________________________________________________________________________________________
ferramentas da Adobe e várias outras funções que facilitam muito o trabalho do WebDesigner. Ele
traz a possibilidade de se criar uma página Web em dois modos, o modo Código, aonde você vai
realmente codificar a página, e o modo Design que é uma opção visual aonde você vai “desenhar”
a página e o próprio Dreamweaver irá criar o código no background. Se por um lado ele é uma
excelente opção para profissionais, não é uma boa para quem está aprendendo, pois, as funções
que facilitam a codificação provavelmente irão inibir o aprendizado do HTML e CSS em si.
1.2.2 Notepad++
O Notepad++ é um dos melhores editores HTML para quem está começando e aprendendo,
além de ser a opção de muitos desenvolvedores “hardcore”. Ele é um editor de código que irá
facilitar a leitura e a codificação, através de definição de cores e espaçamentos no código, possui
também algumas funções de auto-completamento, mas não tão complexas quanto o Dreamweaver.
1.2.3 IDEs – Muito além do HTML
Ambientes Integrados de Desenvolvimento (Integrated Development Environment – IDE) são
programas que agilizam o desenvolvimento em diversas linguagens de programação, sem com isso
poluir o código ou interferir no trabalho do programador. Existem diversas IDEs de código aberto
melhores que o Dreamweaver.
1.2.3.1 Eclipse
Com uma grande e ativa comunidade de desenvolvedores e parceiros, o IDE Eclipse é uma
das melhores ferramentas de desenvolvimento que existem. Leve e flexível, ele possui diversos
tutoriais que podem auxiliar os iniciantes. É possível personalizar a interface gráfica da maneira
que você se sentir mais confortável por meio das Views e Perspectives, gerenciar atividades
complexas por meio de projetos, codificar com toda liberdade através do autocompletar, abrir
diversos arquivos ao mesmo tempo através de abas e muito mais. A partir da instalação de plugins
é possível codificar em diversas linguagens de programação.
1.2.3.2 Aptana
O Aptana é um IDE baseado no Eclipse que possui suporte nativo a HTML, CSS, JavaScript,
XML, Ruby entre outras. Alguns dos interessantes recursos que ele oferece são:
 Assistente de código – sugere as tags ou códigos a serem utilizados, além de mostrar
a compatibilidade com diferentes navegadores.
 Outline – Exibe as principais tags estruturadas hierarquicamente para facilitar a
pesquisa.
 FTP – Oferece a possibilidade de realizar o download ou upload dos arquivos direto
para o servidor.
1.2.3.3 Netbeans
O NetBeans é um IDE gratuito e de código aberto para desenvolvedores de software nas
linguagens Java, C, C++, PHP, Groovy, Ruby, entre outras. O IDE é executado em muitas
plataformas, como Windows, Linux, Solaris e MacOS. O NetBeans IDE oferece aos
desenvolvedores ferramentas necessárias para criar aplicativos profissionais de desktop,
empresariais web e móveis multiplataformas. Entre os seus recursos podemos destacar:
 Suporte a HTML5: Suporte para Browsers do Android e IOS, suporte de edição para
linguagens de folhas de estilo SASS e LESS, network monitor.

______________________________________________________________________________________________
 JavaScript: Suporte aos Frameworks AngularJS, Knockout e ExtJS, navegador e
código em arquivos JSON, excelente autocompletar.
 PHP: Recursos de HTML5 nas aplicações PHP, Suporte a Nette Framework e Zend
Framework, suporte a análise de código estático.
 Outros Recursos: Novos painéis de tarefas e janelas de notificações, modo offiline do
Bugzilla, avanços em controle de versão, melhorias para bancos de dados.
1.3 Fundamentos do HTML
1.3.1 Etiqueta
Observe as diferenças entre estas duas frases:
HTML é uma linguagem.
HTML é uma linguagem.
As diferenças entre as frases estão na forma com que o texto é apresentado. Na segunda frase, a
palavra "HTML" aparece em itálico e "linguagem " aparece em negrito. Para marcar essa forma-
tação de texto na linguagem HTML, utiliza-se o seguinte código:
<I>HTML</I> é uma <B>linguagem de marcação</B>
A formatação do texto é obtida com o uso de etiquetas1 - símbolos da linguagem HTML identifica-
dos pelos sinais "< >" (se for a etiqueta inicial) ou pelos sinais "</ >" (se for a etiqueta final).
A etiqueta <I> no código acima marca o início do texto a ser apresentado em itálico, e a eti-
queta </I> marca o fim da formatação em itálico. Portanto, tudo o que estiver entre este par de
etiquetas <I> e </I> será ficará em itálico. Assim também funcionam as etiquetas <B> e </B>, que
marcam o início e o fim do texto a ser exibido em negrito (Bold).
1.3.2 Elemento
A linguagem HTML especifica elementos2 para construir estruturas como: textos formata-
dos, parágrafos, listas, tabelas, etc. Cada elemento, em geral, é composto por três partes: eti-
queta inicial + conteúdo + etiqueta final. O elemento itálico exemplifica esta estrutura genérica:
Alguns elementos permitem omitir a etiqueta final. Por exemplo, para construir um parágrafo basta
explicitar a etiqueta inicial <P>.
Exemplo utilizando o elemento P:
<P>Primeiro parágrafo. <P>Segundo parágrafo.
1 Etiqueta é a tradução aqui adotada para o termo tag (que é o termo original utilizado nas especificações da linguagem
HTML). Alguns autores adotam outras traduções como marcador, rótulo, comando ou mesmo o termo original tag.
2 Elemento de conteúdo e elemento vazio são classificações para os elementos. "Elemento de conteúdo" é aquele
que possui conteúdo (como Itálico ou Parágrafo) enquanto "elemento vazio" é o que não possui conteúdo (como a
Linha Horizontal).

______________________________________________________________________________________________
Resultado:
Primeiro parágrafo.
Segundo parágrafo.
Casos como o elemento P (parágrafo), a etiqueta final é opcional - pode ou não ser declarada.
Portanto, o código anterior também poderia ser escrito desta maneira:
<P>Primeiro parágrafo.</P> <P>Segundo parágrafo.</P>
Alguns tipos de elementos não possuem conteúdo nem etiqueta final. Por exemplo, o elemento HR
(Horizontal Rule) desenha uma linha horizontal - não possui conteúdo nem etiqueta final; a linha é
construída com uma única etiqueta.
Exemplo utilizando o elemento HR:
<P>Observe o elemento a seguir:</P>
<HR>
<P>A linha horizontal é construída com o elemento vazio HR.</P>
Resultado:
1.3.3 Atributo e valor
Exemplo de código:
<P>
Navegadores antigos tinham uma frase gloriosa: <I>"Navegar é preciso;
viver não é preciso."</I> Quero para mim o espírito desta frase,
transformada a forma para a casar com o que eu sou: Viver não é
necessário; o que é necessário é <B>criar</B>.
</P>
<P align="right">(Fernando Pessoa)</P>
Resultado:
Observe, no exemplo acima, que o alinhamento do segundo parágrafo é à direita da página.
Na etiqueta inicial do segundo parágrafo (<P align="right">), o "alinhamento do parágrafo" corres-
ponde ao atributo "align"; e "à direita" corresponde ao valor "right".
Um atributo é uma característica associada ao elemento. Cada atributo recebe um va-
lor que configura a característica. Cada elemento pode ter associado alguns pares atributo="va-
lor" dentro de sua etiqueta inicial.

______________________________________________________________________________________________
O estudo da linguagem HTML consiste, principalmente, na investigação dos elementos, eti-
quetas, atributos e valores que compõem esta linguagem. A figura abaixo (correspondente ao fra-
gmento de código do segundo parágrafo do exemplo acima) identifica estes conceitos fundamentais
para a compreensão de um código escrito em HTML.
1.3.3.1 Convenções
As etiquetas, os atributos e valores podem ser escritos tanto em maiúsculo como em
minúsculo, e até misturado. Desta forma, <HTML> <html> ou <HtmL> representam a mesma
etiqueta.
1.4 Estruturas
Observe o exemplo a seguir:
<HTML>
<HEAD>
<TITLE>Citação de Fernando Pessoa</TITLE>
</HEAD>
<BODY>
<P>
Navegadores antigos tinham uma frase gloriosa: <I>"Navegar é preciso;
viver não é preciso.</I>" Quero para mim o espírito desta frase,
transformada a forma para a casar com o que eu sou: Viver não é
necessário; o que é necessário é <B>criar</B>.
</P>
<P align="right">(Fernando Pessoa)</P>
</BODY>
</HTML>
Um típico documento escrito em HTML possui três partes: a estrutura principal, o cabeçalho e o
corpo.
A estrutura principal deve iniciar com a etiqueta <HTML> e terminar com a etiqueta </HTML>. O
cabeçalho, delimitado pelas etiquetas <HEAD> e </HEAD>, destina-se a conter informações sobre

______________________________________________________________________________________________
o documento - por exemplo, o título do documento (que é construído com o elemento TITLE e
aparece no título da janela do navegador). O corpo do documento, delimitado pelas etiquetas
<BODY> e </BODY>, destina-se ao conteúdo da página.
1.4.1 Textos
1.4.1.1 Parágrafo e quebra de linha
Na linguagem HTML, um parágrafo é construído com o elemento de conteúdo P (Paragraph).
Exemplo de código utilizando elemento P:
<P>O navegador, ao apresentar uma página HTML, ignora o formato com que
o código original da página foi escrito - ou seja, espaços em branco,
linhas quebradas com a tecla ENTER, ou mesmo linhas em branco, são
formatações ignoradas.</P>
<P>O elemento P é utilizado para construir parágrafos. Sempre que sua
etiqueta inicial aparecer, um novo parágrafo será construído - o texto
prossegue na segunda linha após o final do parágrafo anterior (uma
linha em branco é apresentada entre os parágrafos).</P>
<P>Mesmo que a etiqueta inicial apareça no meio
<P>de uma linha contínua (do código original), um novo parágrafo será
criado naquele ponto.</P>
Resultado:
O navegador, ao apresentar uma página HTML, ignora o formato com que o código original da
página foi escrito - ou seja, espaços em branco, linhas quebradas com a tecla ENTER, ou mesmo
linhas em branco, são formatações ignoradas.
O elemento P é utilizado para construir parágrafos. Sempre que sua etiqueta inicial aparecer, um
novo parágrafo será construído - o texto prossegue na segunda linha após o final do parágrafo
anterior (uma linha em branco é apresentada entre os parágrafos).
Mesmo que a etiqueta inicial apareça no meio
de uma linha contínua (do código original), um novo parágrafo será criado naquele ponto.
Para forçar uma quebra de linha dentro do parágrafo, utilize o elemento vazio BR (BReak). Ele
também pode ser utilizado para construir linhas em branco, basta adicionar várias etiquetas <BR>
consecutivas entre um parágrafo e outro.
Exemplo de código utilizando o elemento BR:
<P>Utilize o elemento P para organizar o texto em diversos parágrafos.
Um parágrafo define um bloco de texto contínuo.</P>
<P>

______________________________________________________________________________________________
Utilize o elemento BR para forçar a quebra <BR> das linhas <BR> de um
mesmo <BR> parágrafo.
</P>
Resultado:
Utilize o elemento P para organizar o texto em diversos parágrafos. Um parágrafo define um
bloco de texto contínuo.
Utilize o elemento BR para forçar a quebra
das linhas
de um mesmo
parágrafo.
1.4.1.2 Atributo align
O atributo align (alinhamento) especifica a disposição do texto dentro do parágrafo.
Exemplo de código utilizando alinhamento de parágrafo:
<P align="center">
AUTOPSICOGRAFIA<BR> (Fernando Pessoa)
</P>
<P align="left">
O poeta é um fingidor.<BR> Finge tão completamente<BR> Que chega a
fingir que é dor<BR> A dor que deveras sente.
</P>
<P align="center">
E os que lêem o que escreve,<BR> Na dor lida sentem bem,<BR> Não as
duas que ele teve,<BR> Mas só a que eles não têm.
</P>
<P align="right">
E assim nas calhas de roda<BR> Gira, a entreter a razão,<BR> Esse
comboio de corda<BR> Que se chama coração.
</P>
<HR>
<P align="justify">Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja
obra, por sua complexidade e beleza, deu novo sentido e novo peso à
literatura de língua portuguesa. Falar desse poeta e dessa obra
equivale a mergulhar num atordoante labirinto de espelhos. O que é
previsível, quando se lê o que ele mesmo disse em carta a João Gaspar
Simões: "O estudo a meu respeito, que peca só por se basear, como
verdadeiros, em dados que são falsos por eu, artisticamente, não saber
senão mentir" (...)
<P align="right">
(Fragmento do artigo "A Razão Poética", de Ferreira Gullar.<BR> Folha
de São Paulo, Caderno Mais!, 10 nov. 1996)
</P>

______________________________________________________________________________________________
Resultado:
AUTOPSICOGRAFIA
(Fernando Pessoa)
O poeta é um fingidor.
Finge tão completamente
Que chega a fingir que é dor
A dor que deveras sente.
E os que lêem o que escreve,
Na dor lida sentem bem,
Não as duas que ele teve,
Mas só a que eles não têm.
E assim nas calhas de roda
Gira, a entreter a razão,
Esse comboio de corda
Que se chama coração.
Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja obra, por sua complexidade e beleza, deu
novo sentido e novo peso à literatura de língua portuguesa. Falar desse poeta e dessa obra equi-
vale a mergulhar num atordoante labirinto de espelhos. O que é previsível, quando se lê o que ele
mesmo disse em carta a João Gaspar Simões: "O estudo a meu respeito, que peca só por se ba-
sear, como verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão mentir"
(...)
(Fragmento do artigo "A Razão Poética", de Ferreira Gullar.
Folha de São Paulo, Caderno Mais!, 10 nov. 1996)
Conforme ilustrado no exemplo acima, a linguagem HTML permite quatro possíveis valores
para o atributo align: left (à esquerda), center (centralizado), right (à direita) e justify (justificado).
Se o atributo align não for especificado na etiqueta inicial do elemento P, o parágrafo é alinhado à
esquerda (valor padrão).

______________________________________________________________________________________________
Atributos do elemento P para alinhamento:
align= "left" (à esquerda)
"center" (centralizado)
"right" (à direita)
"justify" (justificado)
1.4.1.3 Texto pré-formatado
O texto pré-formatado, construído com o elemento PRE, apresenta o texto exatamente
como digitado no código original da página HTML - ao contrário do que ocorre com o elemento P
(parágrafo) que ignora espaços em branco e as quebras de linha.
A vantagem de se utilizar o elemento PRE é que a formatação do texto torna-se bastante
simples; a desvantagem é que torna-se simples demais. Como o texto é apresentado exatamente
como digitado, ignora-se o tamanho da janela em que o texto é visualizado. Experimente redimen-
sionar a janela em que o exemplo acima é visualizado. Se a janela for menor do que o espaço
necessário para apresentar o texto pré-formatado, o texto ficará parcialmente oculto (aparece barra
de rolagem horizontal); se a janela for muito grande, o texto poderá ficar com um enquadrado inde-
sejável. Quando o texto é formatado com os outros elementos da linguagem HTML (sem utilizar o
elemento PRE), é possível levar em consideração o tamanho da janela - desta forma, quando a
janela for redimensionada, o texto será automaticamente reajustado.
Exemplo de código utilizando texto pré-formatado:
<PRE>
AUTOPSICOGRAFIA
(Fernando Pessoa)
</PRE>

______________________________________________________________________________________________
Resultado:
AUTOPSICOGRAFIA
(Fernando Pessoa)
1.4.1.4 Cabeçalho e linha horizontal
1.4.1.4.1 Cabeçalho
Um texto geralmente é organizado em capítulos, seções, tópicos etc. O elemento H (Heading
= cabeçalho) pode ser utilizado para construir os cabeçalhos das seções de um texto. Existem seis
níveis de cabeçalhos, de H1 (o primeiro e mais importante nível) a H6 (o último e menos impor-
tante). O cabeçalho, assim como o parágrafo, também admite o atributo align.
Exemplo de código utilizando cabeçalho:
<H1>Cabeçalho H1</H1>
<H3 align="center">Cabeçalho H3</H3>
<H5 align="right">Cabeçalho H5</H5>
Resultado:
Cabeçalho H1
Cabeçalho H2
Cabeçalho H3
Cabeçalho H4
Cabeçalho H5
Cabeçalho H6
1.4.1.4.2 Linha horizontal
O elemento HR (Horizontal Rule) insere uma linha horizontal. Seu uso é indicado para criar
uma divisão na página, separando-a em tópicos e assuntos relacionados.
Exemplo de código utilizando o elemento HR:
<H1 align="center">Heterônimos de Fernando Pessoa</H1>

______________________________________________________________________________________________
<HR>
<P>Fernando Pessoa projetou personagens para pensar e escrever. Entre os
principais heterônimos: Ricardo Reis, Álvaro de Campos, e Alberto
Caeiro.</P>
<P>
"Se as coisas são estilhaços<BR> Do saber do universo,<BR> Seja eu os
meus pedaços,<BR> Impreciso e diverso.<BR> Eles foram e não foram".
</P>
<P>(Fernando Pessoa)</P>
Resultado:
Heterônimos de Fernando Pessoa
Fernando Pessoa projetou personagens para pensar e escrever. Entre os principais heterônimos:
Ricardo Reis, Álvaro de Campos, e Alberto Caeiro.
"Se as coisas são estilhaços
Do saber do universo,
Seja eu os meus pedaços,
Impreciso e diverso.
Eles foram e não foram".
(Fernando Pessoa)
1.4.1.5 Formatação de texto (estilo físico x estilo lógico)
Existem vários elementos para a formatação do texto:
B Negrito (Bold)
I Itálico
U Sublinhado (Underlined)
STRIKE Riscado
SUP . Sobrescrito
SUB . Subscrito
BIG Grande
SMALL Pequeno
TT Fonte Monoespaçada (TeleType text)
Todos estes elementos são do tipo "elemento de conteúdo" - ou seja, é preciso especificar a eti-
queta inicial e etiqueta final para marcar o início e o fim da formatação. As formatações podem ser
utilizadas em conjunto. Por exemplo, para obter um texto formatado em negrito e em itálico:
<B><I>...texto...</I></B>

______________________________________________________________________________________________
Observe que o elemento I (itálico) encontra-se aninhado pelo elemento B (negrito).
Exemplo de código utilizando os elementos de formatação de texto:
<P>
Para ser <BIG>grande</BIG>, sê inteiro: nada<BR> Teu exagera ou <STRIKE>ex-
clui</STRIKE>.<BR>
<B><I>Sê todo em cada coisa</I></B>. Põe quanto és<BR> No <SMALL>mí-
nimo</SMALL>
que fazes.<BR> Assim em cada lago a lua toda<BR> Brilha, porque
<SUP>alta</SUP>
vive.
</P>
<P align="right">
<TT>(Do poema "Para Ser Grande" - Ricardo Reis)</TT>
</P>
Resultado:
Para ser grande, sê inteiro: nada
Teu exagera ou exclui.
Sê todo em cada coisa. Põe quanto és
No mínimo que fazes.
Assim em cada lago a lua toda
Brilha, porque alta vive.
(Do poema "Para Ser Grande" - Ricardo Reis)
Os elementos acima são conhecidos como estilos físicos pois determinam o aspecto físico do
texto, a aparência das letras. Os estilos lógicos (ou "elementos de frase"), por sua vez, relacio-
nam-se com a "lógica da informação", com o tipo de informação que um determinado fragmento de
texto representa.
Elementos de formatação de texto estilo lógico:
EM Ênfase (EMphasis)
STRONG Ênfase forte
CITE Citação ou referência
DFN Definição
SAMP Exemplo (SAMPle)
CODE Fragmento de código (de programa de computador)
KBD Entrada de texto pelo teclado (KeyBorD)
VAR Instância de variável (VARiable)
ABBR Abreviação
ACRONYM Acrônimo
Exemplo de código utilizando os elementos de formatação de texto do estilo lógico:
<P>
Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja obra, por sua
complexidade e beleza, deu novo sentido e novo peso à literatura de

______________________________________________________________________________________________
língua portuguesa. Falar desse poeta e dessa obra equivale a mergulhar
num atordoante labirinto de espelhos. O que é previsível, quando se lê
o que ele mesmo disse em carta a João Gaspar Simões: <CITE>"O estudo a
meu respeito, que peca só por se basear, como verdadeiros, em dados
que são falsos por eu, artisticamente, não saber senão mentir"</CITE>(...)
<P align="right">
(Fragmento do artigo "A Razão Poética", de Ferreira Gullar.<BR> Folha
de São Paulo, Caderno Mais!, 10 nov. 1996)
</P>
Resultado:
Há 61 anos morria, em Lisboa, Fernando Pessoa, cuja obra, por sua complexidade e beleza, deu
novo sentido e novo peso à literatura de língua portuguesa. Falar desse poeta e dessa obra equi-
vale a mergulhar num atordoante labirinto de espelhos. O que é previsível, quando se lê o que ele
mesmo disse em carta a João Gaspar Simões: "O estudo a meu respeito, que peca só por se ba-
sear, como verdadeiros, em dados que são falsos por eu, artisticamente, não saber senão men-
tir"(...)
(Fragmento do artigo "A Razão Poética", de Ferreira Gullar.
Folha de São Paulo, Caderno Mais!, 10 nov. 1996)
No exemplo acima, a frase "O estudo a meu respeito, que peca só por se basear, como verdadeiros,
em dados que são falsos por eu, artisticamente, não saber senão mentir" é uma citação dentro do
artigo de Ferreira Gullar. O elemento CITE (citação) foi utilizado para diferenciar esta citação do
resto do texto. Observe que a formatação, neste caso, relaciona-se com o tipo de informação (cita-
ção), e não necessariamente com a aparência do texto.
1.4.1.6 Fonte
O elemento FONT possibilita modificar o tipo, o tamanho e a cor da fonte.
1.4.1.6.1 Face
O atributo face (do elemento FONT) especifica o nome da fonte a ser utilizada para escrever
o texto - determina a tipografia do texto; a forma das letras. Observe alguns exemplos:
O problema em utilizar um determinado tipo de fonte é que ela poderá não existir no computador
de quem irá ler a página HTML. Para minimizar este problema, especifica-se várias fontes (nomes
alternativos) no atributo face. Se no computador em que a página estiver sendo visualizada não
existir a primeira fonte, será utilizada a segunda fonte; se a segunda fonte não existir, será utilizada

______________________________________________________________________________________________
a terceira fonte; e assim por diante.
<FONT face="Verdana, Arial">...texto...</FONT>
Se não for encontrada nenhuma das fontes especificadas neste atributo, será utilizada a fonte pa-
drão do navegador (em geral, "Times New Roman").
Dica: Utilize fontes sem serifa
Serifa é aquele pequeno traço que pode ser identificado nas extremidades de alguns tipos de fonte.
Serifas são bonitas no papel pois são impressas com alta resolução. Na tela do computador, que
não possui uma resolução muito alta, as fontes mais quadradas e sem serifa, em geral, são mais
nítidas e, por isto, mais adequadas. Uma boa dica é utilizar a fonte "Verdana" ou "Arial", pois não
possuem serifa e estão presentes na maioria dos computadores.
1.4.1.6.2 Size
O atributo size especifica o tamanho da fonte. A fonte pode ter tamanho entre 1 (menor
tamanho) e 7 (maior tamanho). Este atributo pode ser especificado de forma absoluta (p. ex.:
<FONT size="3">), ou de forma relativa (p. ex.: <FONT size="+2">).
Exemplo de código utilizando o atributo size:
<P>Tamanho de fonte padrão</P>
<P>
<FONT size="1">Tamanho de fonte 1</FONT><BR> <FONT size="2">Tamanho de
fonte 2</FONT><BR> <FONT size="3">Tamanho de fonte 3</FONT><BR> <FONT
size="4">Tamanho de fonte 4</FONT><BR> <FONT size="5">Tamanho de fonte
5</FONT><BR> <FONT size="6">Tamanho de fonte 6</FONT><BR> <FONT
size="7">Tamanho de fonte 7</FONT>
</P>
<P>
<FONT size="3">Tamanho de fonte 3, <FONT size="+2">agora acrescido de
2,</FONT> <FONT size="-1">reduzido de 1,</FONT> e normal novamente.
</FONT>
</P>
Resultado:
Tamanho de fonte padrão
Tamanho de fonte 1
Tamanho de fonte 2
Tamanho de fonte 3
Tamanho de fonte 4
Tamanho de fonte 5

______________________________________________________________________________________________
Tamanho de fonte 6
Tamanho de fonte 7
Tamanho de fonte 3, agora acrescido de 2, reduzido de 1, e normal novamente.
1.4.1.6.3 Color
O atributo color especifica a cor da fonte. O valor deste atributo pode ser especificado atra-
vés do nome da cor ou através de um código.
Todos os três atributos do elemento FONT (face, size e color) podem ser usados concomi-
tantemente.
face=nome_fonte Nome da fonte.
size=número Tamanho da fonte; valor entre 1 e 7.
color=cor Cor da fonte.
Exemplo de código utilizando o atributo color:
<P>
<B> <FONT color="black">Preto</FONT><BR> <FONT color="gray">Cinza-es-
curo</FONT><BR>
<FONT color="silver">Cinza-Claro</FONT><BR> <FONT co-
lor="white">Branco</FONT><BR>
<FONT color="red">Vermelho</FONT><BR> <FONT color="maroon">Verme-
lho-escuro</FONT><BR>
<FONT color="yellow">Amarelo</FONT><BR> <FONT color="olive">Ama-
relo-escuro</FONT><BR>
<FONT color="lime">Verde</FONT><BR> <FONT color="green">Verde-es-
curo</FONT><BR>
<FONT color="aqua">Ciano</FONT><BR> <FONT color="teal">Ciano-es-
curo</FONT><BR>
<FONT color="blue">Azul</FONT><BR> <FONT color="navy">Azul-es-
curo</FONT><BR>
<FONT color="fuchsia">Magenta</FONT><BR> <FONT color="purple">Ma-
genta-escuro</P></FONT><BR>
Resultado:
Preto
Cinza-escuro
Cinza-Claro
Branco
Vermelho
Vermelho-escuro
Amarelo

______________________________________________________________________________________________
Amarelo-escuro
Verde
Verde-escuro
Ciano
Ciano-escuro
Azul
Azul-escuro
Magenta
Magenta-escuro
1.4.1.7 Cor
Uma cor pode ser especificada através de seu nome, ou de seu código, conforme ilustra a
imagem abaixo.
Exemplo de código utilizando a especificação da cor para o fundo da página e outra para a fonte
do texto. Observe a especificação através do nome da cor e através de seu código.
<HTML>
<BODY bgcolor="teal">
<P>
Para especificar o valor da cor,<BR> <FONT color="lime">utilize o
nome</FONT><BR>
<FONT color="#00FF00">ou o código da cor.</FONT>
</P>
</BODY>
</HTML>
Resultado:
Para especificar o valor da cor,
utilize o nome
ou o código da cor.
Utilizar o nome da cor é mais compreensível do que utilizar o seu código. Contudo, ao utilizar
o nome da cor, a escolha fica restrita aos 16 nomes de cores predefinidos na linguagem HTML.
Com o uso de código, é possível escolher uma entre 16 milhões de cores (mais precisamente,
16.777.216 cores). O código da cor em HTML é composto pelo símbolo "#" seguido da intensidade
(entre 0 e 255) de cada uma das cores do sistema RGB. A intensidade da cor não é representada

______________________________________________________________________________________________
na base decimal, mas sim, na base hexadecimal (o que resulta num número de 2 dígitos).
1.4.1.8 Alinhamento e recuo
1.4.1.8.1 Alinhamento (DIV)
O elemento DIV define o alinhamento para vários blocos de elementos: parágrafos, listas,
tabelas, imagens etc. Por exemplo, utilizando o elemento DIV não é necessário especificar o
alinhamento dentro de cada parágrafo. O tipo de alinhamento é especificado no atributo align.
Exemplo de código utilizando DIV:
<DIV align="center">
<P>
</P>
<P>
</P>
<P>
</P>
<P>
</P>
</DIV>
Resultado:
AUTOPSICOGRAFIA
(Fernando Pessoa)
1.4.1.8.2 Recuo (BLOCKQUOTE)
O elemento BLOCKQUOTE define um recuo (afastamento da margem) de blocos de
elementos.
Exemplo de código utilizando o recuo blockquote:
<P>

______________________________________________________________________________________________
</P>
<BLOCKQUOTE>
<P>
</P>
<P>
</P>
<P>
</P>
</BLOCKQUOTE>
Resultado:
AUTOPSICOGRAFIA
(Fernando Pessoa)
1.4.1.9 Caracteres especiais e comentários
1.4.1.9.1 Caracteres especiais
Observe que no código a seguir existem certos símbolos (como " ") que são
convertidos em caracteres quando a página é visualizada:
<P>"Etiquetas da linguagem HTML"</P>
<P>
    <P> parágrafo<BR>    
<BR> quebra de linha<BR>     <PRE>
parágrafo pré-formatado<BR>     <H1>
cabeçalho ...
</P>
Estes "símbolos estranhos" são os caracteres especiais. São precedidos pelo símbolo &

______________________________________________________________________________________________
("e" comercial) e terminados pelo símbolo; (ponto-e-vírgula). Os caracteres especiais são úteis para
incluir espaços em branco e alguns símbolos que fazem parte da sintaxe da linguagem HTML:
< <
> >
& &
" "
  (espaço em branco)
Caracteres acentuados também podem ser escritos através de símbolos. Se o computador
estiver configurado para o idioma Português, estes caracteres podem ser digitados diretamente
através do teclado e serão vistos normalmente pelo navegador. A necessidade de utilizar caracteres
especiais surge quando o público alvo da página não tiver o computador configurado para o idioma
Português (por exemplo, uma página a ser consultada internacionalmente).
á á Á Á é é ó é
ã ã Ã Ã õ õ
â â Â Â ê ê ô ô
à à À À è è ò ò
ç ç Ç Ç
ü ¨ Ü ¨
Existe uma lógica para a elaboração destes símbolos que representam letras acentuadas. Cada
acento possui uma abreviatura: acute (acento agudo), tilde (acento til), circ (acento circunflêxo),
grave (acento grave). O caractere especial é obtido pela composição do símbolo "&", mais a vogal
a ser acentuada (em maiúsculo ou minúsculo), mais a abreviação do acento, mais o símbolo ";"
(ponto-e-vírgula).
1.4.1.9.2 Comentários
Um comentário começa com o símbolo ""; qualquer informação
contida entre estes dois símbolos não será apresentada pelo navegador.
Exemplo de código utilizando comentários:

<P>
Comentários servem para documentar o código, registrar lembretes,
observações etc. Comentários

não são vistos quando a página é apresentada pelo navegador.
</P>

______________________________________________________________________________________________
Resultado:
Comentários servem para documentar o código, registrar lembretes, observações etc. Comentá-
rios não são vistos quando a página é apresentada pelo navegador.
1.4.2 Links
Links são encontrados em quase todas as páginas da web. As hiperligações permitem aos
usuários clicarem em um link e serem direcionados para outra página.
Em HTML, os links são definidos com a tag <a> :
<a href="url">Texto do link </a>
O atributo href especifica o endereço de destino do link. O texto do link é a parte de texto que
ficará visível para que o usuário clique em cima. Clicando no texto do link o usuário será direcio-
nado para o endereço especificado.
1.4.2.1 O atributo target
O atributo de target (destino) especifica onde abrir o documento vinculado.
O atributo de destino pode ter um dos seguintes valores:
 _blank - Abre o documento em uma nova janela ou guia
 _self - Abre o documento na mesma janela / guia onde ele foi clicado (isso é padrão)
 _parent - Abre o documento no quadro principal
 _top - Abre o documento no topo da janela
 Framename - Abre o documento em frame com nome
Este exemplo abrirá o documento em uma nova janela / guia do navegador:
<a href="exemplo.html” target="_blank">Olá visitante!</a>
1.4.2.2 Imagem como Link
É comum usar imagens como links:
Exemplo de código utilizando imagem como link:
<a href="exemplo.html"> <img src="ola.gif" alt="olá"
style="width: 42px; height: 42px; border: 0;">
</a>
1.4.2.3 Criar um marcador
Marcadores HTML são usados para permitir que os leitores saltem para partes específicas
de uma página da Web.
Marcadores podem ser úteis se sua página da web for muito longa. Para criar um marcador,
primeiro você deve criar o marcador e, em seguida, adicionar um link para ele. Quando o link é
clicado, a página rola para o local com o marcador.
Primeiro, crie um marcador com o atributo id:
<h2 id="tipo">tipo de seção </h2>
Em seguida, adicione um link para o marcador, a partir de dentro da mesma página:
<a href="#tipo">tipo de seção </a>

______________________________________________________________________________________________
1.4.3 Imagens
1.4.3.1 Imagem no documento HTML
Para inserir uma imagem no documento HTML, é primeiro necessário que a imagem já exista
no computador. No computador, uma imagem é um arquivo de um tipo específico. Uma vez que a
imagem já existe, para incluí-la no documento HTML utiliza-se o elemento IMG. O valor do atri-
buto src (source = origem) aponta para o endereço URI da imagem.
<IMG src="uri">
Exemplos de código inserindo imagem no documento HTML:
<P align=center>
<IMG src="poesia.gif"><BR> Poesia de Ricardo Reis (heterônimo de
Fernando Pessoa)
</P>
Resultado:
Poesia de Ricardo Reis (heterônimo de Fernando Pessoa)
1.4.3.2 Tipos de imagem
No computador, as imagens são armazenadas em arquivos de um tipo específico. Cada tipo
de imagem (ou formato de imagem) possui características próprias relacionadas ao número de
cores, ao tamanho do arquivo, entre outras características.
Exemplos de tipos de imagem:
BMP, GIF, JPEG, TIFF, PCX etc.
Nem todos os tipos de imagem podem ser visualizados pelos navegadores - em geral, as
imagens para Web são do tipo GIF ou JPEG. O formato GIF é mais adequado para imagens com
fronteiras nítidas e com poucas cores (logotipos, ícones, esquemas etc.) enquanto o formato JPEG
é mais adequado para imagens com muitas cores e sem fronteiras nítidas (geralmente, fotografias).
1.4.3.3 Atributos do elemento IMG
1.4.3.3.1 Src, border, alt
O atributo src (resource) aponta para o endereço URI do arquivo de imagem. Este é o único
atributo obrigatório do elemento IMG - não há imagem sem especificar este atributo. O atributo bor-
der especifica a espessura da borda que irá envolver a imagem.

______________________________________________________________________________________________
Exemplo utilizando o atributo border:
O atributo alt (alternate text) especifica o texto que é apresentado quando o usuário fica com o
mouse parado sobre a imagem.
1.4.3.3.2 Width, height
Os atributos width e height especificam a largura e a altura da imagem (valores em pixels).
Quando não são especificados, a imagem é apresentada com o seu tamanho original.
Exemplo de código utilizando os atributos width e height:
<P>
<IMG src="rosa.gif"> <IMG src="rosa.gif" width="113" height="220"> <IMG
src="rosa.gif" width="77" height="121"> <IMG src="rosa.gif" width="48"
height="75"> <IMG src="rosa.gif" width="77" height="36">
</P>
Resultado:

______________________________________________________________________________________________
1.4.3.3.3 Align
O atributo align especifica o alinhamento da imagem. Quando align="top", a imagem fica
alinhada no topo da linha em que é inserida; quando align="middle", a imagem fica alinhada no
meio da linha em que é inserida; e quando align="bottom", fica alinhada na base da linha. Observe
o esquema:
Dois outros valores também podem ser especificados para o atributo align: "left" e "right". Estes
dois valores modificam o comportamento da imagem. Em geral, a imagem é inserida na linha em
que o elemento IMG é declarado. Contudo, se um destes dois valores for especificado ("left" ou
"right"), a imagem ficará flutuando na margem (esquerda ou direita) da página. Observe o esquema:
Todos os atributos do elemento IMG podem ser especificados ao mesmo tempo - o que possibilita
maior controle sobre a apresentação da imagem.
Exemplo de código utilizando todos os elementos do atributo IMG:
<H1 align="center">Fernando Pessoa</H1>
<P>1888 - Nasce em Lisboa, em 13 de junho, Fernando Antônio Nogueira
Pessoa.</P>
<P>
<IMG src="fp1908.jpg" border="1" align="top" width="85" height="100"
alt="1908"> 1906 - Matricula-se no Curso Superior de Letras.
</P>
<P>1907 - Abandona o curso.</P>
<P>
<IMG src="fp1914.jpg" border="1" align="middle" width="85" height="100"

______________________________________________________________________________________________
alt="1914"> 1914 - Escreve poemas dos três heterônimos.
</P>
<P>1934 - "Mensagem", seu único livro publicado.</P>
<P>
<IMG src="fp1935.jpg" border="1" align="top" width="85" height="100"
alt="1935"> 1935 - Em 30 de novembro, morre em Lisboa, aos 47 anos
</P>
<P>
<IMG src="rosa.gif" border=0 align="left" width="77" height="121"
alt="Circunda-te de rosas..."> "(...)Morre! Tudo é tão pouco!<BR> Nada
se sabe, tudo se imagina.<BR> Circunda-te de rosas, ama, bebe<BR> E
cala. O mais é nada."
<P>
<P>(Ricardo Reis)</P>
<P>
<IMG src="fpcaricatura.gif" border=0 align="right" width="80"
height="100" alt="Caricatura, por Almada Negreiros"> "Tenho
pensamentos que, se pudesse revelá-los e fazê-los viver, acrescentariam
nova luminosidade às estrelas, nova beleza ao mundo e maior amor ao
coração dos homens."
</P>
<P align="right">(Fernando Pessoa, em "O Eu Profundo")</P>
Resultado:
Fernando Pessoa
1888 - Nasce em Lisboa, em 13 de junho, Fernando Antônio Nogueira Pessoa.
1906 - Matricula-se no Curso Superior de Letras.
1907 - Abandona o curso.
1914 - Escreve poemas dos três heterônimos.
1934 - "Mensagem", seu único livro publicado.

______________________________________________________________________________________________
1935 - Em 30 de novembro, morre em Lisboa, aos 47 anos
"(...)Morre! Tudo é tão pouco!
Nada se sabe, tudo se imagina.
Circunda-te de rosas, ama, bebe
E cala. O mais é nada."
(Ricardo Reis)
"Tenho pensamentos que, se pudesse revelá-los e fazê-los viver, acrescentariam
nova luminosidade às estrelas, nova beleza ao mundo e maior amor ao coração dos
homens."
(Fernando Pessoa, em "O Eu Profundo")
1.4.3.4 Imagem de fundo
Para adicionar uma imagem de fundo, basta especificar na etiqueta inicial do elemento
BODY, o atributo background contendo o endereço URI da imagem.
Exemplo de código utilizando o atributo background:
<HTML>
<HEAD>
<TITLE>"Segue o teu destino" - Ricardo Reis</TITLE>
</HEAD>
<BODY background="fundo.gif">
<P align="right">
Segue o teu destino<BR> Rega as tuas plantas,<BR> Ama as tuas ro-
sas.<BR>
O resto é sombra<BR> De árvores alheias.
</P>
<P align="right">(Ricardo Reis)</P>
<P align="right">
<IMG src="rosa.gif" width="77" height="121">
</P>
</BODY>
</HTML>
1.4.4 Vídeos
O atributo controls adiciona controles de vídeo, como reprodução, pausa e volume. É sem-
pre bom especificar a altura e a largura não estiverem definidas.
O elemento <source> permite que você especifique arquivos de vídeo alternativos que o
navegador pode escolher. O navegador usará o primeiro formato reconhecido.
Para mostrar um vídeo em HTML, use o elemento <video>:
Exemplo de código utilizando o elemento vídeo:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">

______________________________________________________________________________________________
<source src="movie.ogg" type="video/ogg">
Olá
</video>
Para iniciar um vídeo automaticamente utiliza-se o atributo autoplay
Exemplo de código utilizando o elemento autoplay:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Olá
</video>
Tags de vídeo:
<video> Defines um vídeo
<source>
Define vários recursos de mídia como
<video> e <audio>
<track>
Define faixas de texto em players de mídia.
1.4.5 Listas
Listas são mecanismos úteis para organizar informações. Este capítulo objetiva discutir os
três principais tipos de listas construídos com a linguagem HTML: lista ordenada, lista não-
ordenada e lista de definição.
1.4.5.1 Lista ordenada e lista não-ordenada
A principal diferença entre a lista ordenada e a lista não-ordenada está na maneira com que
os itens de cada lista são apresentados - a lista ordenada enumera os elementos; a lista não-
ordenada coloca marcadores antes de cada elemento.
Exemplo de código de uma lista ordenada:
<OL>
<LI>Item número um.</LI>
<LI>Item número dois.</LI>
<LI>Item número três.</LI>
</OL>
Resultado:
1. Item número um.
2. Item número dois.
3. Item número três.
Uma lista ordenada é delimitada pelas etiquetas <OL> e </OL> (Ordered List). Cada item da lista
é delimitado pelas etiquetas <LI> e </LI> (List Item).

______________________________________________________________________________________________
Exemplo de código de uma lista não ordenada:
<UL>
<LI>Primeiro item.</LI>
<LI>Segundo item.</LI>
<LI>Terceiro item.</LI>
</UL>
Resultado:
 Primeiro item.
 Segundo item.
 Terceiro item.
A estrutura da lista não-ordenada é semelhante à da lista ordenada - porém, ao invés de ser
construída com o elemento OL, é construída com o elemento UL (Unordered List).
1.4.5.2 Atributos do elemento OL
A aparência de uma lista ordenada pode ser modificada com o uso dos atributos type e start.
O atributo type é utilizado para modificar o estilo da numeração (os números que aparecem à
esquerda de cada item). Os seguintes valores são aceitos:
valor estilo de numeração
1 algarismos arábicos 1, 2, 3, 4,
...
A letras em caixa alta A, B, C, D,
...
a letras maiúsculas a, b, c, d,
...
V algarismos romanos em letra maiúscula I, II, III, IV,
...
i algarismos romanos em letra minúscula i, ii, iii, iv,
...
O atributo start possibilita que a lista comece em qualquer valor e não apenas a partir da primeira
unidade de sua numeração.
O quadro abaixo resume os principais atributos do elemento OL:
type=estilo_nu-
meração
Modifica o estilo da numeração.
Valores = "1" (1,2,3,4 ...)
"A" (A,B,C,D ...)
"a" (a,b,c,d ...)
"V" (I,II,III,IV...)
"v" (i,ii,iii,iv...)
start=número Número inicial do primeiro elemento da lista

______________________________________________________________________________________________
Exemplo de código utilizando atributos do elemento OL:
<OL type="i" start=3>
</OL>
Resultado:
iii. Item número um.
iv. Item número dois.
v. Item número três.
1.4.5.3 Atributos do elemento UL
A aparência de uma lista não-ordenada pode ser modificada com o atributo type, utilizado
para especificar um tipo de marcador para os itens da lista. Os seguintes valores são aceitos:
valor tipo de marcador
disc círculo cheio

circle círculo vazio
o
square quadrados cheios

O quadro abaixo resume este atributo:
type=estilo_de_marcador Estilo do marcador dos itens da lista.
Valores="disc"
"circle"
"square"
Exemplo de código utilizando os atributos do elemento UL:
<UL type="square">
</UL>
Resultado:

______________________________________________________________________________________________
 Item número um.
 Item número dois.
 Item número três.
1.4.5.4 Lista de definição
A lista de definição foi originalmente concebida para possibilitar uma listagem de termos e
definições. Glossários e catálogos de produtos são típicos exemplos deste tipo de lista. Uma lista
de definição é construída com o elemento DL (Definition List). Cada termo de definição é constru-
ído com o elemento DT (Definition Term) e cada descrição de definição é construída com o ele-
mento DD (Definition Description).
Exemplo de código utilizando lista de definição:
Tipos de Listas:
<DL>
<DT>Lista ordenada</DT>
<DD>Apresenta itens enumerados.</DD>
<DT>Lista não-ordenada</DT>
<DD>Apresenta itens com marcadores.</DD>
<DT>Lista de definição</DT>
<DD>Listagem de termos e definições.</DD>
</DL>
Resultado:
Tipos de Listas:
Lista ordenada
Apresenta itens enumerados.
Lista não-ordenada
Apresenta itens com marcadores.
Lista de definição
Listagem de termos e definições.
1.4.5.5 Aninhando de listas
É possível aninhar listas - colocar uma lista dentro de outra podendo, inclusive, misturar listas
ordenadas e não-ordenadas. Dependendo da estrutura de lista que se deseja construir, podem
existir diversos níveis de aninhamento. Uma boa estratégia para aninhar listas é pensar isolada-
mente cada parte (ou nível) da lista, para depois juntar as partes (aninhar).
Exemplo de código utilizando listas aninhadas:
<P>
<B>Sumário</B>
<OL type="I">
<LI>Introdução
<OL>
<LI>HTML: uma linguagem para Web</LI>
<LI>HTML: uma linguagem de hipertexto</LI>
<LI>HTML: uma linguagem de marcação</LI>
<LI>Navegadores de HTML</LI>
<LI>Editores de HTML</LI>
<LI>Fundamentos da linguagem HTML</LI>

______________________________________________________________________________________________
<LI>A estrutura do documento HTML</LI>
<LI>Resumo</LI>
</OL>
<LI>Textos
<OL>
<LI>Parágrafo e quebra de linha</LI>
<LI>Texto pré-formatado</LI>
<LI>Cabeçalho e linha horizontal</LI>
<LI>Formatação de texto</LI>
<LI>Fonte</LI>
<LI>Cor (da fonte e do fundo da página)</LI>
<LI>Alinhamento e recuo</LI>
<LI>Caracteres especiais e comentários</LI>
<LI>Resumo</LI>
</OL>
<LI>Listas
<OL>
<LI>Lista ordenada e lista não-ordenada</LI>
<UL type="disc">
<LI>Atributos do elemento OL</LI>
<LI>Atributo do elemento UL</LI>
</UL>
<LI>Lista de definição</LI>
<LI>Aninhando listas</LI>
<LI>Resumo</LI>
</OL>
<LI>...
</OL>
Resultado:
Sumário
I. Introdução
1. HTML: uma linguagem para Web
2. HTML: uma linguagem de hipertexto
3. HTML: uma linguagem de marcação
4. Navegadores de HTML
5. Editores de HTML
6. Fundamentos da linguagem HTML
7. A estrutura do documento HTML
8. Resumo
II. Textos
1. Parágrafo e quebra de linha
2. Texto pré-formatado

______________________________________________________________________________________________
3. Cabeçalho e linha horizontal
4. Formatação de texto
5. Fonte
6. Cor (da fonte e do fundo da página)
7. Alinhamento e recuo
8. Caracteres especiais e comentários
9. Resumo
III. Listas
1. Lista ordenada e lista não-ordenada
2. Atributos do elemento OL
3. Atributo do elemento UL
4. Lista de definição
5. Aninhando listas
6. Resumo
IV. ...
1.4.6 Tabelas
O elemento TABLE é utilizado para marcar o início e o fim de uma tabela. Numa tabela
podem ser definidas várias linhas - cada linha da tabela é construída com o elemento TR (Table
Row). Dentro de cada linha são definidas as células da tabela. Cada célula pode ser uma "célula
de cabeçalho" (construída com o elemento TH - Table Header) ou uma "célula de dado" (construída
com o elemento TD - Table Date). Um título, construído com o elemento CAPTION, pode estar
associado à tabela para possibilitar uma breve descrição - o seu uso é opcional.
Exemplo de código utilizando o elemento TABLE:
<TABLE border="1">
<CAPTION>Boletim</CAPTION>
<TR>
<TH>Aluno</TH>
<TH>Nota</TH>
<TH>Situação</TH>
</TR>
<TR>
<TD>Beltrano</TD>
<TD>8.5</TD>
<TD>Aprovado</TD>
</TR>
<TR>
<TD>Ciclano</TD>
<TD>4.0</TD>
<TD>Reprovado</TD>
</TR>
<TR>
<TD>Fulano</TD>
<TD>9.0</TD>
<TD>Aprovado</TD>

______________________________________________________________________________________________
</TR>
</TABLE>
Resultado:
O atributo border especifica a espessura da borda ao redor da tabela. O atributo cellpad-
ding especifica o espaço entre a moldura da célula e seu conteúdo. O atributo cellspacing espe-
cifica o espaço entre as células e a borda da tabela (como também o espaço das células entre si).
O atributo bgcolor especifica a cor de fundo da tabela. O atributo valign especifica o alinhamento
vertical do conteúdo da célula.
Por padrão, uma tabela ocupa o espaço necessário para mostrar os dados de suas células.
Ao especificar o atributo width ou height é possível modificar este comportamento (ajuste automá-
tico ao conteúdo). O atributo width especifica a largura da tabela. O atributo height especifica a
altura da tabela. Se os valores destes atributos são definidos em porcentagem, então o tamanho
da tabela será definido em relação ao tamanho total da janela. Por exemplo, experimente redimen-
sionar a janela onde o exemplo anterior é visualizado. Observe que a tabela também é redimensi-
onada para ocupar 50% da largura total da janela. Observe, ainda no exemplo anterior, que a altura
da tabela permanece constante em 100 pontos - o atributo height foi definido de forma absoluta
(medida em pontos), independentemente do tamanho da janela.
Principais atributos dos elementos TH e TD (todos os atributos são válidos para os dois
elementos):
bgcolor=cor Cor de fundo da célula.
align=alinhamento_horizontal Alinhamento horizontal do conteúdo da célula.
Valores = "left" (à esquerda)
"center" (no centro)

______________________________________________________________________________________________
valign=alinhamento_vertical Alinhamento vertical do conteúdo da célula.
Valores = "top" (no topo)
"bottom" (na base)
width=número Largura de célula - o número define a largura absoluta
(em pontos) ou a largura relativa ao tamanho da tabela
(em porcentagem).
height=número Altura de célula - o número define a altura absoluta (em
pontos) ou em relação à altura da tabela (em porcentagem).
colspan=número Expande a célula para ocupar um número de células à
direita de sua coluna.
border=número Espessura da borda da tabela (em pontos).
cellspacing=número Espaço entre as células da tabela (em pontos).
1.4.6.1 Linha de tabela: TR
Uma tabela, na linguagem HTML, é construída através de uma sequência de linhas onde
cada linha (construída com o elemento TR - Table Row) contém uma sequência de células.
Cada célula pode ser uma "célula de cabeçalho" (elemento TH - Table Header) ou uma
"célula de dado" (elemento TD - Table Date).
Exemplo de código utilizando o elemento TR:
<table border="1">
<tr>
<td>linha 1 - célula 1</td>
</tr>
<tr>

______________________________________________________________________________________________
</tr>
<tr>
</tr>
</table>
Resultado:
linha 1 - célula 1 linha 1 - célula 2 linha 1 - célula 3
linha 2 - célula 1
linha 3 - célula 1 linha 3 - célula 2
Principais atributos do elemento TR:
bgcolor=cor Cor de fundo das células da linha.
align=alinhamento_horizontal Alinhamento horizontal do conteúdo das células da linha.
Valores = "left" (à esquerda)
valign=alinhamento_vertical Alinhamento vertical do conteúdo das células da linha.
Valores = "top" (no topo)
"bottom" (na base)
1.4.6.2 Título e legenda: CAPTION
O elemento CAPTION possibilita a construção de um título ou de uma legenda para a tabela
quando presente, deve fornecer uma breve descrição da natureza da tabela.
O atributo align especifica a posição: se align="top",o elemento CAPTION é apresentado
como título da tabela; se align="bottom", o elemento CAPTION é apresentado como legenda da
tabela.
Atributos de CAPTION:
align=alinha-
mento
Posição do conteúdo de CAPTION:

______________________________________________________________________________________________
Valores = "top" (no
topo =
título da
tabela)
"bottom" (na base = legenda da tabela)
Exemplo de código utilizando elementos para construção de tabelas:
<DIV align="center">
<CENTER>
<TABLE border="1">
<CAPTION align="top">Boletim</CAPTION>
<TR>
<TH>Aluno</TH>
<TH>Nota</TH>
<TH>Situação</TH>
</TR>
<TR>
<TD>Fábio</TD>
<TD>9.5</TD>
<TD>Aprovado</TD>
</TR>
<TR>
<TD>Mariano</TD>
<TD>9.0</TD>
<TD>Aprovado</TD>
</TR>
</TABLE>
<P>
<HR>
</P>
<TABLE border="1">
<CAPTION align="bottom">Dados sobre as turmas do curso de
HTML</CAPTION>
<TR>
<TH></TH>
<TH>inscritos</TH>
<TH>selecionados</TH>
<TH>aprovados</TH>
</TR>
<TR>
<TH>01/2000</TH>
<TD>105</TD>
<TD>26</TD>
<TD>21</TD>
</TR>
<TR>
<TH>03/2000</TH>

______________________________________________________________________________________________
<TD>97</TD>
<TD>26</TD>
<TD>23</TD>
</TR>
</TABLE>
</CENTER>
</DIV>
Resultado:
Boletim
Aluno Nota Situação
Fábio 9.5 Aprovado
Mariano 9.0 Aprovado
inscritos selecionados aprovados
01/2000 105 26 21
03/2000 97 26 23
Dados sobre as turmas do curso de HTML
1.5 Formulários
1.5.1 Elementos do formulário
1.5.1.1 O elemento <form>
O elemento HTML <form> define um formulário que é usado para coletar entrada do usuá-
rio. Existem vários tipos de elementos de formulário, como campos de texto, caixas de seleção,
botões de opção, botões de envio e muito mais.
1.5.1.2 O elemento <input>
O elemento <input> é o elemento de formulário mais importante. O elemento <input> pode
ser exibido de várias maneiras, dependendo do atributo type.
Tipo Descrição
<Input type = "text"> Campo de entrada de texto em uma linha
<Input type = "radio"> Botão de opção (para selecionar uma de muitas
opções)
<Input type =
"submit">
Botão Enviar (para enviar o formulário)
1.5.1.3 O elemento <select>
O elemento select permite uma ou mais opções em um menu onde cada opção é
representada por um elemento option.
Exemplo de código utilizando o elemento select:

______________________________________________________________________________________________
<select name="carros">
<option value="volvo">Volvo</option>
<option value=fFord">Ford</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Resultado:
1.5.1.4 O elemento <option>
É utilizado para criar uma opção que pode ser selecionada. Por padrão, o primeiro item na
lista fica selecionado. Para definir qual o elemento deve ficar pré-selecionado, adicione o atributo
selected.
Exemplo de código do elemento option:
<option value="fiat" selected>Fiat</option>
Resultado:
Fiat
Enviar
1.5.1.5 O elemento <textarea>
O elemento <textarea> define um campo de entrada de texto com várias linhas (uma área
de texto):
<textarea name="message" rows="10" cols="30">
Olá mundo.
</textarea>
O atributo rows especifica o número visível de linhas em uma área de texto.
O atributo cols especifica a largura visível de uma área de texto.
1.5.1.6 O elemento <button>
Define um botão clicável:
<button type="button" >Click aqui!</button>
1.5.1.7 Elemento <datalist>
O elemento datalist, novo no HTML 5, mostra uma lista de elementos predefinidos como
opção para um caixa de entrada de texto. Caso o browser não suporte este componente, ele
pode exibir os elementos que compõem o datalist em forma de texto simples.

______________________________________________________________________________________________
Exemplo de código utilizando o elemento datalist:
<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
Esse código HTML é renderizado assim no Firefox 4:
1.5.1.8 Elemento <keygen>
O objetivo do elemento <keygen> é fornecer uma maneira segura de autenticar usuários. O
elemento <keygen> especifica um campo gerador de par de chaves em um formulário. Quando o
formulário é enviado, duas chaves são geradas, uma privada e uma pública. A chave privada é
armazenada localmente e a chave pública é enviada para o servidor. A chave pública pode ser
usada para gerar um certificado de cliente para autenticar o usuário no futuro.
Exemplo de código utilizando o elemento keygen:
<form action="/action_page.php">
Usuario: <input type="text" name="user"> Criptografia:
<keygen name="security">
<input type="submit">
</form>
1.5.1.9 Elemento <output>
Representa o resultado de um cálculo (como um executado por um script).
Exemplo de código utilizando o elemento <output>:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0 <input type="range" id="a" name="a" value="50"> 100 + <input
type="number" id="b" name="b" value="50"> =
<output name="x" for="a b"></output>
<br>
<br> <input type="submit">
</form>
</body>
</html>

______________________________________________________________________________________________
Resultado:
1.5.2 Atributos
Exemplo de código para o atributo text:
<form>
First name:<br> <input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
Resultado:
Isto é como ficará em um navegador:
Primeiro nome:
Último nome:
Exemplo de código para o atributo rádio:
<form>
<input type="radio" name="gender" value="male" checked> Masculino<br> <input
type="radio" name="gender" value="female"> Feminino<br> <input
type="radio" name="gender" value="other"> De outros
</form>
Resultado:
Masculino
Fêmea
De outros
Exemplo de código para o atributo submit:
<form action="/action_page.php">
Primeiro Nome:<br> <input type="text" name="primeiro_nome" value="Maria"><br>
Ultimo nome:<br> <input type="text" name="ultimo_nome" value="Felipeta"><br>
<br> <input type="submit" value="enviar">
</form>
Resultado:

______________________________________________________________________________________________
Primeiro nome:
Mickey
Último nome:
Mouse
Enviar
<input type = "submit"> é utilizado como botão para enviar os dados do formulário para uma
página que irá manipula-los . Um manipulador de formulários normalmente é uma página de servi-
dor com um script para processamento de dados de entrada. Este manipulador é especificado no
atributo de ação.
Exemplo de código para o atributo Password:
<input type="password" name="senha">
Resultado:
Obs: Será abordado nesta apostila, a seguir sobre o tratamento de formulários. É assim que
o código HTML acima será exibido em um navegador:
Exemplo de código para o atributo Checkbox:
As caixas de seleção permitem que um usuário selecione opções zero ou mais de um
número limitado de opções.
<form>
<input type="checkbox" name=”lapis" value="Lapis"> Eu tenho um lápis<br>
<input type="checkbox" name="caneta" value="Caneta"> Eu tenho uma caneta
</form>
Resultado:
eu tenho uma bicicleta
Eu tenho um carro
Exemplo de código para o atributo color:
O <input type = "color"> é usado para campos de entrada que devem conter uma cor.
Dependendo do suporte do navegador, um seletor de cores pode aparecer no campo de entrada.
<form>
Selecione sua cor favorita: <input type="color" name="cor_favorita ">
</form>
Resultado:
Selecione sua cor favorita:

______________________________________________________________________________________________
Exemplo de código para o atributo date:
O <input type = "date"> é usado para campos de entrada que devem conter uma data.
Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de entrada.
<form>
Selecione a data do seu aniversário: <input type="date" name=”aniversario">
</form>
Resultado:
Selecione a data do seu aniversário:
Exemplo de código para o atributo datetime-local:
O <input type = "datetime-local"> especifica um campo de entrada de data e hora, sem fuso
horário. Dependendo do suporte do navegador, um seletor de data pode aparecer no campo de
entrada.
<form>
Data de nascimento (date e hora): <input type="datetime-local" name="data_nasci-
mento">
</form>
Exemplo de código para o atributo email:
O <input type = "email"> é usado para campos de entrada que devem conter um endereço
de e-mail. Dependendo do suporte do navegador, o endereço de e-mail pode ser validado
automaticamente quando enviado. Alguns smartphones reconhecem o tipo de e-mail e adicionam
".com" ao teclado para corresponder à entrada de e-mail.
<form>
E-mail: <input type="email" name="email">
</form>
Resultado:
E-mail:
Exemplo de código para o atributo month:
<form>
Data de nascimento (mês e ano): <input type="month" name="aniversario">
</form>

______________________________________________________________________________________________
Resultado:
Data de nascimento (mês e ano):
Exemplo de código utilizando o atributo number:
O <input type = "number"> define um campo de entrada numérico. Você também pode de-
finir restrições sobre quais números são aceitos. O exemplo a seguir exibe um campo de entrada
numérico, onde você pode inserir um valor de 1 a 5:
<form>
Quantidade (entre 1 e 5) <input type="number" name="quantidade" min="1"
max="5">
</form>
Exemplo de código utilizando o atributo range:
O <input type = "range"> define um controle para inserir um número cujo valor exato não é
importante (como um controle deslizante). O intervalo padrão é 0 a 100. No entanto, você pode
definir restrições sobre quais números são aceitos com os atributos min, max e step:
<form>
<input type="range" name="pontos" min="0" max="10">
</form>
Resultado:
Pontos:
Exemplo de código utilizando o atributo search:
O <input type = "search"> é usado para campos de pesquisa (um campo de pesquisa se
comporta como um campo de texto normal).
<form>
Pesquisar no Google: <input type="search" name="googlesearch">
</form>
Resultado:
Pesquisar no Google:
Exemplo de código utilizando o atributo tel:
O <input type = "tel"> é usado para campos de entrada que devem conter um número de
telefone.
<form>

______________________________________________________________________________________________
Telefone: <input type="tel" name="telefone">
</form>
Resultado:
Telefone:
Exemplo de código utilizando o atributo time:
O <input type = "time"> permite que o usuário selecione uma hora (sem fuso horário).
Dependendo do suporte do navegador, um seletor de tempo pode aparecer no campo de entrada.
<form>
Selecione uma hora: <input type="time" name="hora">
</form>
Resultado:
Selecione uma hora:
Exemplo de código utilizando o atributo url:
O <input type = "url"> é usado para campos de entrada que devem conter um endereço URL.
Dependendo do suporte do navegador, o campo url pode ser validado automaticamente quando
enviado. Alguns smartphones reconhecem o tipo de url e adicionam ".com" ao teclado para
corresponder à entrada do URL.
<form>
Adiciona uma nova página: <input type="url" name="nova_pagina">
</form>
Existem outros tipos de atributos como:
Atributo Especificação
value Especifica o valor inicial para um campo de
entrada.
readonly Especifica que o campo de entrada é somente
leitura (não pode ser alterado).
disabled Especifica que o campo de entrada está
desativado. Um campo de entrada desativado
é inutilizável e não pode ser clicado, e seu valor
não será enviado ao enviar o formulário.
size Especifica o tamanho (em caracteres) para o
campo de entrada.
maxlength Especifica o comprimento máximo permitido
para o campo de entrada.
autocomplete="on" Quando ativado, o navegador completará
automaticamente os valores de entrada com
base nos valores que o usuário inseriu
anteriormente.
novalidate Especifica que os dados do formulário não
devem ser validados no envio.
week Permite ao usuário selecionar uma semana e
um ano

______________________________________________________________________________________________
autofocus Especifica que o campo de entrada deve
automaticamente obter foco quando a página é
carregada.
form Especifica um ou mais formulários a que
pertence um elemento <input>.
formaction Especifica a URL de um arquivo que
processará o controle de entrada quando o
formulário for enviado. O atributo formaction
substitui o atributo action do elemento <form>.
formenctype Especifica como os dados do formulário devem
ser codificados quando enviados (somente
para formulários com method = "post").
formmethod Define o método HTTP para enviar dados de
formulário para o URL de ação.
formnovalidate Define um formulário com dois botões de envio
(com e sem validação).
formtarget Especifica um nome ou uma palavra-chave que
indica onde exibir a resposta que é recebida
após o envio do formulário. O atributo
formtarget substitui o atributo de destino do
elemento <form>
list Refere-se a um elemento <datalist> que
contém opções pré-definidas para um elemento
<input>.
min e max Especificam os valores mínimo e máximo para
um elemento <input>.
multiple Especifica que o usuário tem permissão para
inserir mais de um valor no elemento <input>.
pattern Especifica uma expressão regular que o valor
do elemento <input> é verificado.
placeholder Especifica uma dica que descreve o valor
esperado de um campo de entrada (um valor
de amostra ou uma breve descrição do
formato).
required Especifica que um campo de entrada deve ser
preenchido antes de enviar o formulário.
step Especifica os intervalos de número para um
elemento <input>.
1.6 Elementos semânticos HTML5
Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada
uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas
as situações, e criando seus próprios padrões de nomenclaturas através dos atributos id ou class.
No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos
estão sendo inseridos em cada uma das divisões da página, organizando e padronizando o desen-
volvimento.

______________________________________________________________________________________________
1.6.1.1 Cabeçalho com o elemento <header>
O novo elemento <header> do HTML5 é usado para definir o cabeçalho de uma página ou
seção, e pode conter logo, títulos, menu de navegação, campo de busca, etc.
<header>
<img alt="logo" src="/img/logo.png">
<h1>Entendo a estrutura e semântica do HTML5</h1>
</header>
1.6.1.2 Elemento <nav>
O novo elemento <nav> do HTML5 serve para agrupar uma lista de links para outras par-
tes do site, seja essa lista de navegação local ou global. Esses blocos de links podem estar em
diferentes partes do layout, como no cabeçalho ou no rodapé.
<nav>
<ul class="menu">
<li><a href="inicio.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
1.6.1.3 Elemento <section>
Enquanto as divs servem para dividir o conteúdo em diferentes seções, que podem conter
elementos como <header> e outros, o <section>divide o conteúdo sem finalidade especifica.
1.6.1.4 Elemento <article>
Serve para identificar um conteúdo independente e de maior relevância dentro da página. O
elemento <article> pode conter outros elementos como <header> ou <footer>.
1.6.1.5 Elemento <aside>
Serve para mostrar conteúdos que fazem referência ao conteúdo principal à sua volta, como
informações, blocos de navegação ou até mesmo publicidade.

______________________________________________________________________________________________
1.6.1.6 Elemento <footer>
Representa o rodapé de um documento ou de uma seção específica do mesmo, podendo
conter informações relacionadas ao autor e ao copyright, blocos de navegação ou links
relacionados.
2. CSS
2.1 Fundamentos do CSS
2.2 Sintaxes css
Um conjunto de regras CSS consiste em um seletor e um bloco de declaração:
O seletor aponta para o elemento HTML que você deseja criar. O bloco de declaração contém uma
ou mais declarações separadas por ponto e vírgula. Cada declaração inclui um nome de proprie-
dade CSS e um valor, separados por dois-pontos. Uma declaração CSS sempre termina com um
ponto-e-vírgula, e os blocos de declaração são rodeados por chaves.
2.2.1 Seletores CSS
Os seletores CSS são usados para "localizar" (ou selecionar) elementos HTML baseados
em seu nome de elemento, id, classe, atributo e muito mais.
2.2.2 O seletor de elementos
O seletor de elementos seleciona elementos com base no nome do elemento.
Você pode selecionar todos os elementos <p> em uma página como esta (neste caso, todos os
elementos <p> serão alinhados no centro, com uma cor de texto vermelha):
p {
text-align: center;
color: red;
}
2.2.3 O seletor de identificação
O seletor de identificação usa o atributo id de um elemento HTML para selecionar um
elemento específico.
O id de um elemento deve ser exclusivo dentro de uma página, de modo que o seletor de
identificação é usado para selecionar um único elemento!
Para selecionar um elemento com um id específico, escreva um caractere de hash (#),
seguido do id do elemento.
A regra de estilo abaixo será aplicada ao elemento HTML com id = "exemplo1":
#exemplo1 {
text-align: center;
color: blue;
}

______________________________________________________________________________________________
Obs: Um nome de id não pode começar com um número!
2.2.4 O seletor de classe
O seletor de classe seleciona elementos com um atributo de classe específico. Para
selecionar elementos com uma classe específica, escreva um caractere de ponto (.), seguido do
nome da classe.
No exemplo abaixo, todos os elementos HTML com class = "center" serão vermelhos e alinhados
no centro:
.center {
text-align: center;
color: red;
}
Você também pode especificar que somente elementos HTML específicos devem ser afetados por
uma classe.
No exemplo abaixo, apenas elementos <p> com class = "center" serão alinhados no centro:
p.center {
text-align: center;
color: red;
}
Os elementos HTML também podem se referir a mais de uma classe. No exemplo abaixo, o
elemento <p> será denominado de acordo com class = "center" e class = "large":
<p class="center large">Parágrafo utilizando duas classes.</p>
2.2.5 Seletores de Agrupamento
Se você tiver elementos com as mesmas definições de estilo, como este:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Será melhor agrupar os seletores, para minimizar o código. Para agrupar seletores, separe cada
seletor com uma vírgula.
No exemplo abaixo agrupamos os seletores do código acima:
h1, h2, p {
text-align: center;

______________________________________________________________________________________________
color: red;
}
2.3 Comentários CSS
Comentários são usados para explicar o código e podem ajudar quando você editar o código
fonte em uma data posterior.
Os comentários são ignorados pelos navegadores.
Um comentário CSS começa com / * e termina com * /. Os comentários também podem abranger
várias linhas:
p {
color: red;
/* Comentário de uma linha */
text-align: center;
}
/* Comentário
de múltiplas
linhas */
2.4 Folha de estilos externa
Com uma folha de estilo externa, você pode alterar a aparência de um site inteiro alterando
apenas um arquivo!
Cada página deve incluir uma referência ao arquivo de planilha de estilo externo dentro do elemento
<link>. O elemento <link> vai dentro da seção <head>:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter
tags html. O arquivo de folha de estilos deve ser salvo com uma extensão .css.
Aqui está como o "style.css" parece:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2.4.1 Folha de estilos interna
Uma folha de estilo interna pode ser usada se uma única página tiver um estilo exclusivo.
Os estilos internos são definidos dentro do elemento <style>, dentro da seção <head> de uma
página HTML:
<head>
<style>

______________________________________________________________________________________________
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
2.4.2 Estilos Inline
Um estilo inline pode ser usado para aplicar um estilo exclusivo para um único elemento.
Para usar estilos em linha, adicione o atributo de estilo ao elemento relevante. O atributo de estilo
pode conter qualquer propriedade CSS.
O exemplo abaixo mostra como alterar a cor ea margem esquerda de um elemento <h1>:
<h1 style="color:blue;margin-left:30px;">Exemplo de Css em linha</h1>
2.5 Cores
Cores em CSS são mais frequentemente especificados por:
 Um nome de cor válido - como "vermelho", porém em inglês
 Um valor RGB - como "rgb (255, 0, 0)"
 Um valor HEX - como "# ff0000"
2.5.1 Nomes de cores
Cores definidas usando nomes de cores:
Exemplo:
Color Nome
Red
Green
Blue
Orange
Yellow
Cyan
Black
2.5.2 RGB (vermelho, verde, azul)
Os valores de cor RGB podem ser especificados usando esta fórmula: rgb (vermelho, verde,
azul).
Cada parâmetro (vermelho, verde, azul) define a intensidade da cor entre 0 e 255.
Por exemplo, rgb (255,0,0) é exibido como vermelho, porque vermelho é definido como seu valor

______________________________________________________________________________________________
mais alto (255) e os outros são definidos como 0. Experimente misturando os valores RGB abaixo:
Exemplo:
Cor RGB
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,165,0)
rgb(255,255,0)
rgb(0,255,255)
2.5.3 Cores hexadecimais
Os valores RGB também podem ser especificados usando valores de cor hexadecimais na
forma: # RRGGBB ,onde RR (vermelho), GG (verde) e BB (azul) são valores hexadecimais entre
00 e FF (mesmo que decimal 0-255).
Por exemplo, #FF0000 é apresentado como vermelho, porque vermelho é definido para o
seu valor mais alto (FF) e os outros são definidos para o valor mais baixo (00). Nota: Os valores
HEX não diferenciam maiúsculas de minúsculas: "# ff0000" é o mesmo que "FF0000".
Exemplo:
Cor HEX
#FF0000
#00FF00
#0000FF
#FFA500

Criação de sites com HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Criação de sites com HTML5

Semelhante a Criação de sites com HTML5 (20)

Mais de info_cimol

Mais de info_cimol (20)

Criação de sites com HTML5