Apostila Criação de Sites I

______________________________________________________________________________________________
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
Vol. 1

______________________________________________________________________________________________
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 ....................................................................16
1.4.1.5 Formatação de texto (estilo físico x estilo lógico) ...............................17
1.4.1.6 Fonte ..................................................................................................19
1.4.1.6.1 Face......................................................................................19
Sumário

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

______________________________________________________________________________________________
1.5.1.3 O elemento <select> ..........................................................................46
1.5.1.4 O elemento <option>..........................................................................47
1.5.1.5 O elemento <textarea>.......................................................................47
1.5.1.6 O elemento <button>..........................................................................47
1.5.1.7 Elemento <datalist>............................................................................47
1.5.1.8 Elemento <keygen> ...........................................................................48
1.5.1.9 Elemento <output> .............................................................................48
1.5.2 Atributos .....................................................................................................................49

______________________________________________________________________________________________
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 de 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. Esta
apostila 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 softwares que fazem essa função, cada um com suas carac-
terí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 Tag
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 tags - símbolos da linguagem HTML identificados
pelos sinais "< >" (se for a tag inicial) ou pelos sinais "</ >" (se for a tag final).
A tag <I> no código acima marca o início do texto a ser apresentado em itálico, e a
tag </I> marca o fim da formatação em itálico. Portanto, tudo o que estiver entre este par de tags
<I> e </I> ficará em itálico. Assim também funcionam as tags <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 elementos1
para construir estruturas como: textos formata-
dos, parágrafos, listas, tabelas, etc. Cada elemento, em geral, é composto por três partes:
tag inicial + conteúdo + tag final. O elemento itálico exemplifica esta estrutura genérica:
1
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).

______________________________________________________________________________________________
Alguns elementos permitem omitir a tag final. Por exemplo, para construir um parágrafo basta ex-
plicitar a etiqueta inicial <P>.
Exemplo utilizando o elemento P:
<P>Primeiro parágrafo. <P>Segundo parágrafo.
Resultado:
Primeiro parágrafo.
Segundo parágrafo.
Casos como o elemento P (parágrafo), a tag 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 tag final. Por exemplo, o elemento HR
(Horizontal Rule) desenha uma linha horizontal - não possui conteúdo nem tag 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:
Observe o elemento a seguir
_________________________________________________
A linha horizontal é construída com o elemento vazio HR.
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:
Navegadores antigos tinham uma frase gloriosa: “navegar é preciso; viver não é preciso. ” 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 é criar.
(Fernando Pessoa)
Observe, no exemplo acima, que o alinhamento do segundo parágrafo é à direita da pági-
na. Na tag 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 valor que configura a característica. Cada elemento pode ter associado alguns pa-
res atributo="valor" dentro de sua tag inicial.
O estudo da linguagem HTML consiste, principalmente, na investigação
dos elementos, tags, atributos e valores que compõem esta linguagem. A figura abaixo (corres-
pondente ao fragmento de código do segundo parágrafo do exemplo acima) identifica estes con-
ceitos fundamentais para a compreensão de um código escrito em HTML.
1.3.3.1 Convenções
As tags, 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 tag.
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 tag </HTML>. O cabe-
çalho, delimitado pelas tags <HEAD> e </HEAD>, destina-se a conter informações sobre o docu-
mento - 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 tags <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 tags <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 blo-
co 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 tag 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 se torna bastante
simples; a desvantagem é que se torna simples demais. Como o texto é apresentado exatamente
como digitado, ignora-se o tamanho da janela em que o texto é visualizado. Experimente redi-
mensionar 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 enquadra-
do indesejá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 (Hea-
ding = cabeçalho) pode ser utilizado para construir os cabeçalhos das seções de um texto. Exis-
tem seis níveis de cabeçalhos, de H1 (o primeiro e mais importante nível) a H6 (o último e menos
importante). 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 tag
inicial e tag 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 <STRI-
KE>exclui</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 verdadei-
ros, em dados que são falsos por eu, artisticamente, não saber senão mentir" é uma citação den-
tro 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
padrã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 fon-
te. 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
atravé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-
escuro</FONT><BR>
<FONT color="silver">Cinza-Claro</FONT><BR> <FONT co-
lor="white">Branco</FONT><BR>
<FONT color="red">Vermelho</FONT><BR> <FONT co-
lor="maroon">Vermelho-escuro</FONT><BR>
<FONT color="yellow">Amarelo</FONT><BR> <FONT co-
lor="olive">Amarelo-escuro</FONT><BR>
<FONT color="lime">Verde</FONT><BR> <FONT color="green">Verde-
escuro</FONT><BR>
<FONT color="aqua">Ciano</FONT><BR> <FONT color="teal">Ciano-
escuro</FONT><BR>
<FONT color="blue">Azul</FONT><BR> <FONT color="navy">Azul-
escuro</FONT><BR>

______________________________________________________________________________________________
<FONT color="fuchsia">Magenta</FONT><BR> <FONT co-
lor="purple">Magenta-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 no-
me</FONT><BR>
<FONT color="#00FF00">ou o código da cor.</FONT>
</P>
</BODY>
</HTML>

______________________________________________________________________________________________
Resultado:
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)
Para especificar o valor da cor,
utilize o nome
ou o código da cor.

______________________________________________________________________________________________
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 marca-
dor, 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
atributo 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. Ca-
da 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 níti-
das e com poucas cores (logotipos, ícones, esquemas etc.) enquanto o formato JPEG é mais
adequado para imagens com muitas cores e sem muita nitidez (geralmente, fotografias).
O atributo src (resource) aponta para o endereço URI do arquivo de imagem. Este é o úni-
co atributo obrigatório do elemento IMG - não há imagem sem especificar este atributo. O atribu-
to border especifica a espessura da borda que irá envolver a imagem.
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 esque-
ma:
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 tag 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. É
sempre 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> Define 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 tags <OL> e </OL> (Ordered List). Cada item da lista é
delimitado pelas tags <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 altas 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_numeraçã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 é cons-
truído com o elemento DT (Definition Term) e cada descrição de definição é construída com o
elemento 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 Aninhamento de listas
É possível aninhar listas - colocar uma lista dentro de outra podendo, inclusive, misturar lis-
tas ordenadas e não-ordenadas. Dependendo da estrutura de lista que se deseja construir, po-
dem existir diversos níveis de aninhamento. Uma boa estratégia para aninhar listas é pensar iso-
ladamente 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 cellpadding especifica o espaço entre a moldura da célula e seu conteúdo.
 O atributo cellspacing especifica 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 redi-
mensionar a janela onde o exemplo anterior é visualizado. Observe que a tabela também é redi-
mensionada 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=alinhamento
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="mensagem" 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>

______________________________________________________________________________________________
Resultado:
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_pagina.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_pagina.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>
Nome:<br> <input type="text" name="nome"><br>
Sobrenome:<br> <input type="text" name="sobrenome">
</form>
Resultado:
Isto é como ficará em um navegador:
Nome:
Sobrenome:
Exemplo de código para o atributo rádio:
<form>
<input type="radio" name="genero" value="masculino" checked> Masculino<br> <input
type="radio" name="genero" value="feminino"> Feminino<br> <input
type="radio" name="genero" value="outros"> Outros
</form>
Resultado:
Masculino
Feminino
Outros
Exemplo de código para o atributo submit:
<form action="/action_pagina.php">
Nome:<br> <input type="text" name="nome" value="Maria"><br>
Sobrenome:<br> <input type="text" name="sobrenome" value="Felipeta"><br>
<br> <input type="submit" value="enviar">

______________________________________________________________________________________________
</form>
Resultado:
<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: A seguir nesta apostila, será abordado 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 (data e hora): <input type="datetime-local" na-
me="data_nascimento">
</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="pesquisagoogle">
</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 atribu-
tos id ou class.
No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais con-
teúdos estão sendo inseridos em cada uma das divisões da página, organizando e padronizando
o desenvolvimento.
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 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
propriedade 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 e a 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:
Cor Nome
Vermelho Red
Verde Green
Azul Blue
Laranja Orange
Amarelo Yellow
Ciano Cyan
Preto 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 Nome
Vermelho rgb(255,0,0)
Verde rgb(0,255,0)
Azul rgb(0,0,255)
Laranja rgb(255,165,0)
Amarelo rgb(255,255,0)

Apostila Criação de Sites I

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to Apostila Criação de Sites I

Similar to Apostila Criação de Sites I (20)

More from info_cimol

More from info_cimol (20)

Apostila Criação de Sites I