1

O HTML
Um documento HTML um arquivo de texto contendo tags de marcao que informam ao
browser como exibir a pgina. Dessa forma, ao contrrio de outras linguagens estruturadas,
o HTML utiliza etiquetas (marcaes), conhecidos como tags, que consistem em breves
instrues com uma marca de incio (<) e outra de final (>), que determinam a estrutura do
contedo (blocos de texto, ttulos, pargrafos, listas, imagens, links, etc.). Existem tambm
tags para formatao (fonte, alinhamento, etc.), mas que foram depreciadas com uso do
CSS (alm dos atributos de aparncia).
Os tags tm a seguinte construo:
<nome_do_tag *atributo="valor">
...
</nome_do_tag>
Podem ser escritos tanto em letras minsculas quanto em maisculas, mas o W3C
recomenda que o cdigo sempre seja escrito em letras minsculas. A maioria dos tags
HTML possui um tag que indica o seu fechamento, sendo que sua sintaxe
</nomedotag>.
Os tags HTML podem ser usados dentro de outros tags, ou seja, pode-se aninhar tags para
causar um efeito desejado. Por exemplo, se deseja colocar tambm em itlico uma palavra
que est dentro de uma frase j em negrito:
<strong>Conhea tudo sobre<em>Internet</em></strong>
O tag strong vm de forte = visualmente negrito e o tag em de enfatizado = itlico.

O Padro HTML
Desde o seu incio o HTML demonstrou ser uma eficiente linguagem para se padronizar
informaes. Os documentos que a princpio utilizavam essa linguagem provinham de
instituies de ensino e tinham fins cientficos.
Com o desenvolvimento da Internet comercial, os elementos que antes eram utilizados de
maneira bem simples e padronizadas (pargrafos, listas, ttulos, tabelas, etc.) passaram
por grandes distores para viabilizar uma criatividade emergente.
Essas modificaes tornaram os documentos antes universais em peas de exposio
restrita a navegadores que entendessem um maior nmero de formataes aninhadas.
Dessa forma, com a criao da linguagem CSS (Cascading Style Sheets) e a evoluo da
linguagem, muitos tags foram eliminados (especialmente tags relacionados a aparncia,
que fica a cargo da linguagem CSS) e outros tags foram sendo criados, para suprir
necessidades especficas.

rea de influncia
Deve-se sempre lembrar de fechar primeiro os ltimos tags abertos e depois ir fechando
os demais. Esta ordem de fechamento importante, e chamada de ordem LIFO (Last In
First Out): ltimo a entrar, primeiro a sair.
<p>Conhea tudo sobre<em>Internet</em></p>
No exemplo acima, o primeiro tag fechado foi o ltimo aberto = foi fechado primeiro o
</em> e depois o </p>, seguindo a recomendao LIFO.

Atributos do HTML
Nem todos os tags possuem atributos. Eles so normalmente usados para identificar um
tag ou para complementar sua funo, como por exemplo.
<div id=logo></div>
<a href=http://www.infnet.edu.br>Infnet</a>

Os atributos devem ficar sempre entre aspas.

Cada tag tem o seu conjunto especfico de atributos, e estes podem ser includos
somente na tag de abertura. Portanto, nenhum tag de fechamento possui atributos.
* Conforme a recomendao do W3C e a aplicao dos webstandards (separao entre
estrutura e forma), os atributos de aparncia dos tags no devem ser utilizados e a
aparncia deve ser definida atravs de CSS, modificando a aparncia em todos os
lugares que ocorrer, facilitando o desenvolvimento e a manuteno do contedo. Caso
seja uma aplicao isolada, devem ser utilizadas as classes CSS.

Os textos exibidos em uma pgina HTML no se comportam como os textos de um editor

de textos. Por exemplo: so ignoradas quebras de linha do cdigo e somente um espao
em branco aparece entre cada palavra, mesmo inserindo-se mais espaos.
Quando for necessrio inserir quebras de linhas em textos de nossas pginas HTML,
necessrio indic-las, para que sejam interpretadas pelo browser no momento em que o
texto for exibido. Para isso, usado o tag <br>.
Quando um texto for colocado em uma pgina HTML sem a indicao de quebra de linha
(sem o tag <br>), ele ser exibido em uma s linha. Isso ocorre pois para o HTML
quebras de linhas somente existem quando indicadas pelo tag <br>.
Da mesma forma, quando se est trabalhando no cdigo-fonte de um arquivo HTML e
forem inseridos mais espaos em branco, o browser faz o colapso do cdigo, isto ,
exibe o contedo com somente um espao em branco, suprimindo os demais. O mesmo
ocorre quando o Enter teclado uma ou mais vezes no cdigo-fonte: ser(o)
interpretado(s) como um espao em branco.
Se for necessrio inserir mais de um espao em branco, deve-se trabalhar com a
codificao de caracteres especiais (abordados mais adiante). No caso do espao em
branco, o cdigo &nbsp;
E caso um tag seja escrito de forma incorreta, ou at mesmo inventado pelo usurio, o
browser ignora-o e o texto que estiver aps esse tag ser apresentado normalmente.
Portanto, no h mensagens de erro para tags incorretos.

Nomenclatura dos arquivos

Recomenda-se a utilizao da extenso .html, pois atualmente todos os servidores so
compatveis com 4 caracteres na extenso.
Alm disso, importante seguir algumas recomendaes na nomenclatura de arquivos:
Todas as letras minsculas: questo de organizao, e porque alguns
servidores podem ter dificuldades em ler MAISCULAS.
No acentue as palavras nem utilize ou , , etc: use apenas letras ou
nmeros e mais nenhum carcter especial.
Para separar palavrar, pode usar: o til (~), sublinhado (_), hfen(-).
Nunca use espao em qualquer nome de pgina HTML.
Mantenha nomes de arquivos to curtos quanto possvel
Os tags bsicos
Os tags <html> e </html> tm como objetivo indicar o incio e o final de uma pgina
HTML. Entre estes tags esto os tags que iro indicar o cabealho e o corpo da pgina.
O cabealho est contido na rea de influncia de <head> e </head>, onde estaro
relacionadas tags que tero finalidades especficas, tais como de levar informaes para
o servidor (na Internet), para o navegador e outras.
O contedo visvel da pgina HTML aquele que estar contido na rea de influncia de
<body> e </body>.

Tags bsicos: <head>

na rea de cabealho que definido o ttulo de nossa pgina, usando o tag <title>.
Este tag no deve ser omitido, pois o ttulo de uma pgina aparece na barra do
navegador, contendo uma breve referncia ao contedo da pgina. muito importante
incluir o ttulo em todas as pginas, devendo isso tornar-se um hbito. Isso deve-se ao
fato de que muitas vezes, as pginas ficam com nomes iguais, sem nomes (Untitled)
ou com nomes que no significam nada.
Quando uma pgina marcada para ser adicionada aos Bookmarks ou Favoritos, o
browser guarda, alm do endereo, o ttulo da pgina (dados que esto entre os tags
<title> e </title>).Caso esse nome no identifique corretamente o contedo da
pgina, com certeza os usurios ficaro perdidos ao procurar esta pgina posteriormente
em Favoritos, podendo com isso nunca mais acess-la.
Alm disso, com a implementao de abas nas ltimas verses dos principais browsers
(as pginas so abertas em novas abas e no novas janelas), sem um ttulo adequado,
o usurio no ir identificar a pgina aberta naquela aba. Algumas pessoas confundem
ttulo com nome de arquivo. Observa-se, no entanto, que o nome do arquivo aquele que
adicionamos a extenso .html para identific-lo fisicamente (comentado no slide
anterior).
Por fim, o Google utiliza o ttulo para apresentar a pgina nos resultados de busca, sendo
portanto importante um ttulo com semntica clara.

O tag <meta>
Para definir o tipo de contedo da pgina e o tipo de codificao de caracteres, usa-se:
<meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/>.

Pode-se dizer que a meta tag mais importante, sempre deve ser usada. No HTML5
pode ser utilizado apenas <meta charset=utf-8>
Para declarar o idioma dos conte;udos do documento usa-se <meta httpequiv="content-language" content="pt-br" />. Pode ser usado pelos
motores de busca para categorizar por idioma. No HTML 5 isso inserido direto na tag
HTML: <html lang=pt-br>

10

Tags bsicos: <body>

O <body> e seu fechamento </body> so os tags que definem o corpo da pgina, ou
seja, entre estes tags que desenvolve-se a criao das pginas HTML.
Todo o contedo das pginas que aparece no browser, ou seja, textos, links, imagens,
tabelas e demais formataes estaro dentro da rea de influncia de <body> e
</body>, e tudo o que nele estiver contido ser visualizado na janela do navegador.
Deve-se observar que sistemas operacionais em lnguas no latinas no exibem acentos
e caracteres especiais da lngua latina se no for informada a codificao utf-8.
Portanto, nestes casos, deve-se utilizar a codificao dos caracteres especiais do HTML.

11

Existem caracteres que no podem ser obtidos atravs do teclado e devem ser inseridos na
pgina atravs de uma codificao especial que o browser capaz de interpretar. Pode-se
usar a entidade do HTML e/ou a ISO-Latin1, que usa um cdigo composto pelo caracter &
seguido do smbolo # mais uma combinao de nmeros. O HTML usa o caracter & seguido
de uma combinao de letras. A representao do caracter (copyright): &#169; - ISO
Latin-1 e &copy; - Entidade do HTML.
Podemos usar esses caracteres especiais para representar os tags em nossa pgina sem que
eles sejam interpretados: &lt;body&gt; - &lt; representa o caracter "<" ,e &gt; o ">.
Ento teremos exibido pelo browser o seguinte resultado : <body>
Acentuao
A Web global e alguns pases no possuem acentos em seus alfabetos. Digitar os acentos
diretamente no cdigo das pginas pode causar transtornos aos usurios que no possuem
suporte nossa lngua. Por esse motivo, devem ser usadas definies especiais para
representar esses caracteres. Por exemplo a palavra, acentuao deve ser escrita desse
forma no cdigo: acentua&ccedil;&atilde;o
Automatizao
As entidades HTML &ccedil; () e &atilde; () garantem que a acentuao ser vista
por qualquer browser em qualquer parte do mundo. Algumas ferramentas de desenvolvimento
de pginas HTML ajudam no processo de criao dos cdigos e as ferramentas WYSIWYG
traduzem automaticamente os caracteres acentuados para os respectivos cdigos.
* Com a codificao UTF-8 no necessrio utilizar cdigos de acentuao e automatizao.

12

Tags de estrutura = ttulos <h1>..<h6>

Existem seis tags usados para exibir frases como Headings (cabealhos/ttulos de texto)
em pginas HTML. A diferena entre eles o tamanho. O primeiro nvel <h1> o que
exibe o cabealho em maior tamanho e o ltimo nvel <h6> exibe no menor.
Todos os tags de headings (ttulos) possuem tag de fechamento.
No se deve confundir os tags de cabealhos de texto, que servem para exibir um texto
qualquer no corpo de sua pgina HTML, com o tag <head>, que serve para definir uma
rea de cabealho para o documento HTML. O <head> no exibe nenhuma informao
na pgina, s define uma rea onde ficaro algumas informaes de configurao e
informao da pgina para o browser.
Os tags de ttulo provocam 3 efeitos:
Alteram o tamanho da fonte (para maior ou menor que a fonte padro);
Colocam o texto em negrito;
Do o efeito de pargrafo, isto , inserem uma quebra de linha.
Os tags de heading so muito usados em conjunto com a linguagem CSS, sendo que com
os estilos podemos modificar e melhorar a aparncia dos ttulos.

13

O HTML necessita de um tag que indique a quebra de linha quando necessrio, sendo
que o tag <br> tem essa funo. No existe um tag de fechamento para o <br> e podese usar quantos tags <br> seguidos forem necessrios para colocar linhas em branco na
pgina. O HTML tem a caracterstica de moldar-se rea til do navegador e, para isso,
ele insere naturalmente quebras de linha quando a mesma j preencheu todo o espao da
tela. O tag <nobr> poderia ser usado para impedir a quebra, mas no entanto esse tag foi
depreciado e no mais aplicado.
Quando necessita-se inserir uma quebra de linha com inteno de se mudar de pargrafo,
o tag apropriado o <p>. Muitos cdigos podem ser encontrados sem o tag de
fechamento </p>. No entanto, conforme recomendao do W3C, todos os tags devem
utilizar o tag de fechamento, pois isso influenciar no uso da codificao de estilos
chamada CSS Cascading Style Sheets, vistos adiante.
A quebra de linha do tag <p> insere mais uma linha horizontal vazia, proporcionando um
maior espaamento entrelinhas.
Os tags <div> e </div> podem ser utilizados para o efeito de pargrafo, mas
recomenda-se sua aplicao em blocos de contedo que sero posteriormente
formatados por CSS. O tag <div> tambm utilizado em DHTML para dividir a
visualizao em camadas.
Os tags <p> e <div> possuem o atributo align para alinhar o texto ao centro, esquerda,
direita ou justificado (center, left, right ou justify). Esse mesmo atributo align tambm
pode ser utilizado nas tags de heading para alinh-las. Entretanto, assim como os demais
atributos que se referem aparncia do contedo, recomendado uso do CSS.

14

Texto pr-formatado e texto monoespaado

Quando necessrio exibir um texto em uma pgina HTML exatamente como ele foi
digitado, ou seja, respeitando os espaos e quebras de linha, colocamos este texto entre
os tag <pre> e </pre>.
Ao interpretar a formatao fsica, o browser substitui a fonte do texto para uma fonte
mono-espaada (fonte onde todas as letras possuem a mesma altura e largura), para
garantir a formatao do texto. A fonte usada normalmente a Courier New. O texto
pr-formatado muito usado quando preciso exibir, por exemplo, o cdigo fonte de
programas ou alinhar colunas de nmeros.

15

Tags de comentrios HTML

Muitas vezes necessrio comentar uma parte do cdigo para que no futuro possa-se
entender o que foi feito, ou at mesmo para documentar as pginas. Os comentrios
no so apresentado na tela, ou seja, todo o texto que estiver entre as marcaes de
comentrio <!-- --> no ser exibido pelo browser. Exemplo:
<body>
<!- Este comentrio no aparece na pgina-->
<p>O HTML a linguagem para codificao de pginas web.</p>
</body>
</html>
Aparecer na pgina:
O HTML a linguagem para codificao de pginas web.

Listas
Listas no-ordenadas:
<ul> ... </ul> - apresentam uma srie de itens sem numer-los.
Listas ordenadas
<ol> ... </ol> - atribuem nmeros em seqncia para cada item.
Listas de definio:
<dl> ... </dl> - sem nenhum tipo de marcador, endentam o texto permitindo a
criao de uma ou mais definies para cada item.

16

Lista no-ordenada: <ul>

O tag <ul> define o incio de uma lista no-ordenada.
O tag <li> define cada item da lista.
Pode-se modificar o smbolo utilizado para demarcar cada item da lista no-ordenada
usando o atributo* type.
O atributo type indica qual o smbolo ser usado em cada item:
<ul type=disc> Crculo cheio
<ul type=circle> Crculo vazado
<ul type=square> Quadrado
O atributo type tambm pode ser aplicado na tag <li>, diferenciando os itens entre si.
* Como os atributos referem-se aparncia do contedo, ao seguir os web standards,
deve-se realizar esta formatao atravs de CSS.

17

Lista ordenada: <ol>

Pode-se modificar a seqncia e o tipo de numerao de todos os itens de uma lista
ordenada usando os atributos* start e type.
O atributo start indica em que ponto a lista iniciar sua contagem.
<ol start="5"> Indica que a lista iniciar a partir de 5.
O atributo type indica qual o tipo de seqncia ser usada: letras maisculas ou
minsculas, nmeros ou algarismos romanos maisculos ou minsculos.
<ol
<ol
<ol
<ol
<ol

type="A">
type="a">
type="I">
type="i">
type="1">

Letras maisculas
Letras minsculas
Algarismos romanos
Algarismos romanos (minsculos)
Nmeros arbicos (padro)

* Como os atributos referem-se aparncia do contedo, ao seguir os web standards, deve-se

realizar esta formatao atravs de CSS.

18

Este tipo de lista usado para endentar o texto

quando necessrio, como por exemplo, em um
glossrio ou lista de termos.
O tag <dl> inicia uma lista de definio.
O tag <dt> indica o item da lista.
O tag <dd> inicia a descrio para cada item.

19

20

Tags de formatao do texto*: <font> e <basefont> - apenas para conhecimento

Os tags <font> e <basefont> permitem personalizar o tipo, tamanho e cor da fonte.
Todo o texto, palavra, frase ou letra que estiver na rea de influncia do tag <font> ter
as caractersticas definidas por ele. J o tag <basefont> determina os padres usados
em toda a pgina, sendo que pode aparecer em qualquer parte da pgina, mas
geralmente definido no cabealho, entre os tags <head> e </head>.
O uso do atributo face deve ser limitado s fontes mais comuns, pois o computador
cliente precisa ter instalada a fonte em questo para que ela seja exibida. No atributo
face, coloca-se normalmente mais de uma opo de fonte para controlar ao mximo as
possibilidades de fontes que podem ser visualizadas. Por exemplo: <font face=Arial,
Helvetica, Verdana, Tahoma>

Os valores permitidos para o atributo size variam de 1 a 7, sendo que o valor 3

padro. No entanto, pode-se trabalhar com +1, +2, -1, -2 e assim sucessivamente at +7
e 7. Em relao s cores (color), estas podem ser definidas em formato hexadecimal
ou pelo nome. As 16 cores padro que podem ser usadas nos tags HTML so:
aqua
blue

gray
lime

navy
purple

silver
yellow

black
fuchsia

green
maroon

olive
red

teal
white

Os trs atributos podem ser utilizados em conjunto ou isoladamente, sendo que a tag no
ocorre sem o uso de ao menos um dos atributos.
* Como estas tags esto depreciadas, pois a aparncia fica misturada estrutura, dificultando a
manuteno e aumentando o tamanho dos arquivos, toda a formatao do contedo deve ser feita
com o uso de CSS.

21

Tags de formatao do texto

Pode-se colocar o texto ou frase em negrito ou itlico usando os tags <b> e <i>, sendo
recomendada a utilizao de strong e em pois tem relao com a acessibilidade. Todo
o texto entre o incio e o fechamento do tag ser exibido em negrito ou itlico dependendo
do tag usado, sendo que tambm podem ser utilizadas em conjunto.
<b>Negrito</b> ou <strong>Negrito</strong> = Negrito
<i>Itlico</i> ou <em>Itlico</em> = Itlico
<b><i>Negrito e itlico </i></b> = Negrito e itlico
Para colocar um texto em modo subscrito usa-se o tag _e.
LOG₁₀ 8 = LOG108
Para colocar um texto em modo sobrescrito usamos o tag ^e.
x²+10 = x2 + 10
Para manter histrico de dados atualizados, foram criados os tags <ins> e <del>
Para marcar um texto que seria deletado, foi substitudo por uma nova informao, deve
ser utilizado o tag <del> e </del>.
<del> Texto deletado </del> = Texto deletado
Para marcar um texto inserido no lugar do deletado, deve ser utilizado o tag <ins> e
</ins>.
<ins> Texto inserido </ins> = Texto inserido

22

Tags de formatao do texto

No HTML5 foram criados tags especficos para as regies mais comuns das pginas
Web. Estes tags substituram o uso massio das divs para marcar estas regies, com ids
especficos.
Assim, ao pesquisarem qual o id mais utilizado, este id tornou-se um tag especfico, que
pode ser utilizado em outros locais que tenham o mesmo significado (semntica).
Para a regio do cabealho

23