HTML - Parte I

Programao Internet
Prof. Marcio Momberger
O QUE HTML?
HTML a abreviatura de HyperText Markup
Language, ou seja Linguagem de Marcao
(Formata0) de Hipertexto. uma linguagem
simples
composta
de
marcaes
de
formatao
e
diagramao
de
hipertexto/hipermdia (informaes em texto,
imagens, sons e aes ligadas umas s outras
de uma forma complexa e no-sequencial
atravs de chaves relacionadas).
HTML
a linguagem da WWW (World Wide Web),
justamente por essa capacidade de formatao
e diagramao de hipertexto/hipermdia.
O HTML, que interpretada por todos os
navegadores (browsers) disponveis (Internet
Explorer, Chrome, FireFox, etc...). Isto garante a
portabilidade
independente
do
sistema
operacional:
Windows, Mac, Linux, Unix,
Android, etc...
Criando um pgina
HTML
Uma pgina HTML pode ser criada em
qualquer editor de texto (Bloco de Notas,
WordPad, etc), desde que seja salvo no
formato ASCII (American Standard Code for
Information Interchange - cdigo utilizado
para representar textos quando h
computadores envolvidos), isto , como texto
puro, sem formatao ou caracteres de
controle.
Criando um pgina
HTML
Por exemplo: Se voc criar um documento
usando Bloco de Notas, deve salv-lo no

formato.txt.
Ao
salv-lo
modifique
a
extenso.txtpara.htmou.html. Se seu
documento,
no
formato.txtse
chama
Index.txtaltere-o
paraIndex.htmouIndex.html.
Porm,
lembre-se que o documento somente pode ser
considerado HTML se nele houver a estrutura
bsicada linguagem HTML.
TAGS HTML
TAGs so os "comandos" do HTML. Um
documento HTML composto de TAGs que faro
com que o browser monte a pgina de acordo
com a formatao definida pelos comando HTML.
Um TAG sempre precedido de um caracter "<"

(menor que) e seguido por um caracter ">"
(maior que).
Exemplo de TAG: <HTML>
TAGS HTML
Na maioria dos casos, um TAG deve ter um
correspondente, chamado de TAG de fechamento. Ou

seja, um TAG indica onde comea sua rea de influncia,
enquanto o seu correspondente TAG de fechamento indica
onde termina a rea de influncia.
Um TAG de fechamento tem o mesmo nome do TAG de
abertura, precedido do caracter "/".

Exemplo de TAG de fechamento: </HTML>
TAGs podem ser escritas em minsculas ou maiscula,
mas nunca podem haver espaos em branco dentro de

TAGs, exceto entre atributos e entre aspas.|
Exemplo : <HTML>, <html>, <HtMl>, <Html>, ...
Estrutura Bsica
HTML
A pgina HTML inicia e termina com a tag <html>
e dividida em 2 partes cabealho <head> e
corpo <body >
<html>
<head>
<title>
Aqui entra o Ttulo do documento
</title>
</head>
<body>
Aqui entra todo o contedo que ser exposto pelo Browser...
</body>
</html>
Cabealho
<HEAD>
O cabealho do documento deve
conter as informaes mais
essenciais da pgina.
Coloca-se no cabealho o Ttulo
do documento, scripts a serem
utilizados, a descrio, palavras
chaves e comentrios
Elementos
Cabealho <HEAD>
TITLE <title>...</title>
Contm o ttulo do documento. Muitos browsers

utilizam o ttulo como forma de referenciar a pgina
em uma lista de Favoritos. Alm disso, exibem o
ttulo como nome da janela em que a pgina
visualizada. O Ttulo obrigatrio.
Exemplo:
<title>
XYZ Informtica
</title>
Elementos
Cabealho <HEAD>
SCRIPT <script>...</script>
utilizado para insero de cdigo script (ex.: java

Script, VB Script, etc.) dentro do documento
HTML.
Exemplo:
<script>
...cdigo em alguma linguagem script reconhecida
pelo browser...
</script>
Elementos
Cabealho <HEAD>
META <meta>
Define valores especiais. os valores so definidos como pares "name/content"

(nome/valor).
DESCRIO
O cabealho do documento deve conter uma descrio da pgina. Sobre o que ela trata
e o que tem a oferecer.
Por exemplo: minha pgina trata de HTML. A notao para minha pgina a seguinte:
<meta name="description" content=Primeira Pgina HTML">
PALAVRAS CHAVES
As palavras chaves tambm serviro para a busca de sua home page.

<meta name="keywords"content="palavras chaves">
A notao acima para minha pgina :
<meta name="keywords"content="HTML, tutorial, gif, homepage">
obrigatrio a presena do atributo "NAME" ou do atributo "HTTP-EQUIV".
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1>
Outro exemplo: <meta http-equiv="Content-Language" content="pt-br">
Elementos
Cabealho <HEAD>
COMENTRIOS
Voc pode inserir comentrios adicionais na cabea do seu

documento usando a marcao<! -- ... -->
Portanto o cabealho de um documento HTML ficaria assim:
<head>(incio da cabea)
<title>Como Fazer uma Home Page</title>
<meta name="description" content="dicas de linguagem HTML, endereos de imagens gifs, download
de editores HTML.">
<meta name="keywords"content="home page, html, barras, gifs,programao">

</head>(final de cabea)
Corpo <BODY>
O corpo do documento a parte
que aparece na Home Page. O texto
de algumas tags colocadas nesta
sesso do documento no so
visualizados na tela, mas sim os
seus efeitos. o caso, por exemplo,
das tags de padro de fundo, cor de
texto e cores de link, vlink e alink.
Atributos <Body>
BACKGROUND
Define uma imagem que ser utilizada como "fundo" da pgina.
Caso a imagem tenha um tamanho inferior ao da pgina ela ser
repetida diversas vezes de forma a cobrir o fundo do documento.
Pode ser utilizadas imagens .gif e .jpg.
Exemplo:
<body background="images/fundo.gif">
...diversos TAGs, textos etc...
</body>
Esta notao indica fundos com textura. Se o arquivo gif estiver
no mesmo servidor, mas em outro diretrio, deve ser indicado o
seu caminho path/name. Se estiver em outro servidor, sua URL
deve ser indicada
Atributos <Body>
BGCOLOR
Define a cor de fundo da pgina. Os nomes padronizados de cores so: aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white e yellow
Exemplo:
<body bgcolor="white">
ou
<body bgcolor="#rrggbb">
Esta notao indica fundos no padro RGB. Usa-se um cdigo no formato hexadecimal
precedido por #.
Consulte uma tabela de cores em http://www.ufpa.br/dicas/htm/htm-cor2.htm
TEXT
Define a cor do texto da pgina
Exemplo:
<body text="black">
Atributos <Body>
LINK
Define a cor dos links ainda no visitados
Exemplo:
<body link="blue">
VLINK
Define a cor dos links j visitados nos ltimos x dias onde x um valor
definido pelo usurio em seu browser.
Exemplo:
<body vlink="purple">
ALINK
Define a cor dos links no instante em que so clicados pelo usurio.
Exemplo:
<body alink="red>
Atributos <Body>
BGPROPERTIES (Microsoft Internet Explorer)
Deve ter o valor "fixed". Indica que o fundo da pgina fixo, isto , no "rola" junto
com o contedo da pgina.
Exemplo:
<body background="images/fundo.gif" bgproperties="fixed">
LEFTMARGIN (Microsoft Internet Explorer)

Especifica uma quantidade de espao (em pixels) a ser deixada como margem
esquerda do documento.
Exemplo:
<body leftmargin="20">
TOPMARGIN (Microsoft Internet Explorer)

Especifica uma quantidade de espao (em pixels) a ser deixada como margem
superior do documento.
Exemplo:
<body toptmargin="20">
Exemplo de Body
<html>
<head>
<title>XYZ Informtica</title>
</head>
<body background="images/fundo.gif" link="blue" vlink="purple"

alink="red" bgproperties="fixed" bgcolor="white " text="black"
topmargin="20" leftmargin="20">
<p><a href="http://www.xyz.com.br">Oi! Eu sou um link!</a></p>
</body>
</html>
Ttulos/Subttulos
<hn>...</hn>
Hn <hn>...</hn>
Indica que o texto influenciado uma "HEADER" (cabealho). Os

cabealhos tm seis nveis de importncia, sendo o nvel "1" o
mais importante e o nvel "6" o menos.
Exemplo:
<h1>Este
<h2>Este
<h3>Este
<h4>Este
<h5>Este
<h6>Este
o
o
o
o
o
o
cabealho
cabealho
cabealho
cabealho
cabealho
cabealho
de
de
de
de
de
de
nvel
nvel
nvel
nvel
nvel
nvel
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Nota:
Veja os nveis de cabealho e o equivalente aos tamanhos da fonte.
(h1 - 24 pt / h2 - 18 pt / h3 - 14 pt / h4 - 12 pt / h5 - 10 pt / h6 - 8 pt).
Ttulos/Subttulos
<hn>...</hn>
Atributos de Hn
ALIGN
Indica se o cabealho ser alinhado a esquerda (padro),
centralizado ou a direita, usando-se, respectivamente, as
palavras "LEFT", "CENTER" e "RIGHT".
Exemplo:
<h1 align="left">Texto Um</h1>
<h2 align="center">Texto Dois</h2>
<h3 align="right">Texto Trs</h3>
Controles de
Formatao de Texto
Itlico
I <i>...</i> ou EM <em>...</em>
Indica que o texto deve ser apresentado em itlico.

Exemplo: <i>Este texto est em itlico</i>
Exemplo: <em>Este texto tambm est em itlico</em>
Negrito
B <b>...</b> ou STRONG <strong>...</strong>
Indica que o texto deve ser apresentado em negrito.

Exemplo: <b>Este texto est em negrito</b>
Exemplo: <strong>Este texto tambm est em negrito</strong>
Controles de
Formatao de Texto
Sublinhado
U <u>...</u>
Indica que o texto deve ser apresentado sublinhado.
Exemplo: <u>Este texto est sublinhado</u>
Taxado
STRIKE <strike>...</strike>
Indica que o texto deve ser apresentado com um trao cortando-o.

Exemplo: <strike>Este texto est strike !</strike>
Controles de
Formatao de Texto
Subscrito
SUB <sub>...</sub>
Indica que o texto deve ser apresentado em subscrito.

Exemplo: <sub>Este texto est subscrito</sub>
Sobrescrito
SUP <sup>...</sup>
Indica que o texto deve ser apresentado em sobrescrito.

Exemplo: <sup> Este texto est sobrescrito </sup>
Controles de
Fontes
FONT <font>...</font>
Existem 7 tamanhos de fonte em HTML, numeradas de

1 a 7. O tamanho padro 3.
As cores so definidas atravs de um valor hexadecimal
de 6 algarismos, ou atravs de seus nomes.
Caso o usurio no possua nenhuma das fontes
listadas, ser usada uma fonte padro. Usualmente a
fonte padro a Times New Roman.
Exemplo:
<font face="Times New Roman" size="5" color="#000000">
Texto</font>
Controles de
Fontes
Atributos de FONT
SIZE
Indica qual o tamanho de fonte que deve ser usado dentro de sua rea de influncia.
Exemplo: <font size="5">Texto</font>
COLOR
Indica qual a cor da fonte dentro de sua rea de influncia
Exemplo: <font color="#000000">Texto</font> ou <font color="black">Texto</font>
FACE
Determina a fonte (tipo de letra) a ser utilizada.
Exemplo: <font face="Times New Roman">Texto</font>
Controles de
Fontes
BASEFONT <basefont>
Determina o tamanho base de fonte para uma pgina. O TAG deve ser usado
no incio do documento, logo aps <body>.
Exemplo:
<body>
<basefont size="3">
<p>Texto</p>
<p><font face="Arial" color="#FF0000">Texto</font></p>
</body>
Formatao de
Pargrafos
P <p>...</p>
Indica que o texto influenciado um pargrafo, e possui um alinhamento prprio. Os

browsers, habitualmente, deixam um espao vertical em branco de cerca de "uma
linha" antes de cada pargrafo.
Exemplo: <p>Esta a minha Home Page. E este um exemplo de pargrafo.</p>
Atributos de P
ALIGN
Indica se o pargrafo ser alinhado a esquerda (padro), centralizado, a direita ou
justificado usando-se, respectivamente, as palavras "LEFT", "CENTER", "RIGHT" e
"JUSTIFY".
Exemplo:
<p align="center">Esta a minha Home. E este um exemplo de pargrafo
centralizado.</p>
Formatao Texto
QUEBRA DE LINHA (Break)
BR <br>
Passa para a prxima linha.

Exemplo:
<p>Este texto ficar
na mesma linha.<br>
E este em outra linha.</p>
Blockquote <blockquote>...</blockquote>
Faz a margem comear mais dentro da pgina. O efeito deste TAG pode ser
acumulado, obtendo assim margens maiores.
Exemplo:
<blockquote>Esta a minha Home Page. E este um exemplo de margem
visualizada pelo Browser.</blockquote>
Formatao Texto
DIVISO
DIV <div>...</div>
Indica que o texto influenciado uma diviso, e possui portanto um alinhamento

prprio.
Atributos de DIV
ALIGN
Indica se a diviso ser alinhado a esquerda (padro), centralizado, a direita ou
justificado usando-se, respectivamente, as palavras "LEFT", "CENTER", "RIGHT" e
"JUSTIFY". utilizado no lugar do TAG <p>, quando se deseja modificar o
alinhamento sem, no entanto, inserir-se espao vertical em branco.
Exemplo:
<div align="right">Esta a minha Home Page . E esta a minha diviso.</div>
Formatao Texto
TEXTO PR-FORMATADO
PRE <pre>...</pre>
Usualmente o browser ignora os espaos em branco e as quebras de linha

existentes no documento fonte, formatando o texto de acordo com o tamanho
de sua janela. Com a utilizao deste TAG os espaos e as quebras de linha so
honrados. O browser exibe o contedo de <pre> usando uma fonte diferente da
usual.
Exemplo:
<pre>
Esta a Home Page da XYZ Informtica.
Aqui nos veremos:Treinamento
Consultoria
Representaes
Solues Web
</pre>
Formatao Texto
CENTRO <center>...</center>
Centraliza o texto influenciado. o TAG <center> foi criado quando no havia outras
formas de se centralizar os elementos na tela. Hoje faz parte da definio do HTML para
que seja mantida a compatibilidade com pginas escritas no passado.
Exemplo:
<center>
Esta a minha Home Page. Este texto ser centralizado.
</center>
SEM QUEBRA <nobr>...</nobr>
Impede que o texto em sua rea de influncia seja "quebrado", isto , dividido em mais
de uma linha. Deve-se usar este TAG de forma cuidadosa. Normalmente o usurio no
deseja ser obrigado a empregar a "scroll bar" para ler o contedo de uma pgina.
Exemplo:
<nobr>Este texto ficar
na mesma linha
ao visualiza-lo no browser.<nobr>
Listas
Listas Ordenadas OL <ol>...</ol>
Indica o incio e o final de uma lista ordenada (numerada).

Exemplo:
<ol>
<li> Treinamento </li>
<li> Consultoria </li>
<li> Desenvolvimento </li>
<li> Manuteno </li>
</ol>
Listas
Atributos de OL (Lista Ordenada)
START
Especifica o nmero do primeiro elemento da lista.
Exemplo:
<ol start="10">
<li> Manuteno </li>
</ol>
TYPE
Define o tipo de numerao empregada na lista. Pode assumir os valores "1 (1, 2, 3, 4, etc) ", "I"
(I, II, III, IV, etc), "i" (i, ii, iii, iv, etc), "A" (A,B, ..., Z) ou "a" (a, b, ..., z).
Exemplo:
<ol type="A">
<li> Manuteno </li>
</ol>
Listas
Elementos LI <li>. . . </li>
Demarca os elementos de listas ordenadas e no ordenadas.

Atributos de LI
TYPE
Deve ser usado somente em listas no numeradas. Indica qual o smbolo a ser
usado para demarcar o elemento.
Exemplo:
<ul type="square">
<li type="disc"> Consultoria </li>
<li> Manuteno </li>
</ul>
Listas
VALUE
Deve ser usado somente em listas numeradas. Altera a seqncia da
numerao.
Exemplo:
<ol>
<li value="15"> Desenvolvimento </li>
<li> Manuteno </li>
</ol>
Nota:
Este TAG deve estar presente somente na rea de influncia dos TAGs <OL> (Listas
Ordenadas) ou <UL> (Listas No Ordenadas).
O texto presente em cada item da lista pode ser formatado normalmente. No
entanto, no so permitidos "headers" (H1, H2, H3 etc.).
Listas
VALUE
Deve ser usado somente em listas numeradas. Altera a seqncia da
numerao.
Exemplo:
<ol>
<li value="15"> Desenvolvimento </li>
<li> Manuteno </li>
</ol>
Nota:
Este TAG deve estar presente somente na rea de influncia dos TAGs <OL> (Listas
Ordenadas) ou <UL> (Listas No Ordenadas).
O texto presente em cada item da lista pode ser formatado normalmente. No
entanto, no so permitidos "headers" (H1, H2, H3 etc.).
Listas
Listas No Ordenadas
UL <ul>...</ul>
Indica o incio e o final de uma lista no numerada

Exemplo:
<ul>
<li> Manuteno </li>
</ul>
Listas
Atributo de UL (Listas No Ordenadas)
TYPE
Indica qual o smbolo deve ser usado para demarcar cada elemento
da lista. Pode ser os valores "disc" (), "circle" () ou "square"().
Exemplo:
<ul type="circle">
<li> Manuteno </li>
</ul>
Listas
Listas de Definio <dl>...</dl>

Exemplo:
<dl>
<dt> Treinamento </dt>
<dd> um departamento da XYZ Informtica. </dd>
<dt> Consultoria </dt>
<dd> um outro departamento! </dd>
</dl>
Listas
Listas de Definio <dl>...</dl>

Exemplo:
<dl>
</dl>
Nota:
So muito teis para estruturas do tipo "dicionrio", onde um termo citado e
ento explicado. Na Web muito utilizada para listas de URLs e seus respectivos
comentrios.
Listas
DT <dt>
Representa o termo definido, a ser explicado em <DD>.

Exemplo:
<dl>
</dl>
Nota:
No devem conter TAGs referentes a: HEADER, Pargrafo, Listas, Texto PrFormatado, Diviso, CENTER, BLOCKQUOTE, Formulrio, ISINDEX, Linha Horizontal
ou Tabela.
Listas
DD <dd>
Representa a definio do termo presente em <DT>. No deve

conter HEADERs.
Exemplo:
<dl>
</dl>
Links
Os pontos que ligam os hipertextos so chamados de hyperlinks,

links ou ncoras de hipertexto.
O TAG que indica a regio a ser tratada como um hyperlink o par

<A> e </A> - "A" (anchor). Dentro desse TAG, na forma de atributo,
colocada a referncia ao arquivo ligado. A referncia indica a URL
do documento. Quando o usurio clicar sobre o trecho realado pela
ncora de hipertexto, o arquivo ligado ser requisitado ao servidor e
mostrado na janela do navegador.
Geralmente o Browser apresenta os links em azul e sublinhados, mas

como j vimos possvel alterar isso atravs dos parmetros
opcionais do elemento <BODY>.
Links
A <a>...</a>
Indica a regio a ser tratada como hyperlink

Exemplo: <a href="http://www.xyz.com.br">XYZ Informtica</a>
Atributos de A
HREF
Define que sua rea de influncia um link.
Exemplo:
<p> Clique em <a href="http://www.xyz.com.br/cursos.htm">Cursos</a>
para acessar a pgina dos Descritivos dos Cursos.</p>
Links
Existem quatro formas de se especificar um link:
1. Links para dentro da prpria pgina
O local precisa ter um "nome". Este "nome" definido da seguinte forma:
Exemplo:
<a href="#nome">Link para o Nome</a>
.
.
.
<a name="nome"><a>
Links
2. Para outras pginas de um mesmo Site
Exemplo: <a href="nome.htm">Link para o Nome</a>
Nesse caso, assumiu-se que o arquivo nome.htm estava

localizado no mesmo diretrio da pgina que referncia.
Caso o arquivo nome.htm esteja em outro diretrio,
pode-se utilizar a "URL relativa" pgina de destino.
Exemplo:
<a href="/treinamento/cursos/pgina.htm">Link para a
Pgina</a>
Links
Pode-se, ainda, referenciar uma pgina utilizando-se a
navegao em diretrios, semelhante ao que se faz no DOS,
lanando mo do operador "..".
Se na pgina
http://www.xyz.com.br/treinamento/cursos.htm existir um
link que aponta para o endereo:
http://www.xyz.com.br/consultoria/desenvolvimento.htm,
este pode ser representado da seguinte maneira:
Exemplo:
<a href="../consultoria/desenvolvimento.htm">Link para o
Desenvolvimento</a>
Links
3. Links para outros Sites
Deve-se usar a URL completa da pgina

destino.
Exemplo:
<a
href="http://www.xyz.com.br/treinamento/cursos.ht
m">Link para outro Site</a>
Links
4. Link especial: "mailto"
Existe um tipo de link chamado de "mailto:". Se,

quando o link for definido, o protocolo utilizado for
"mailto:" ao invs de "http://", o link abrir uma
janela especial para que se possa enviar um e-mail
(correio eletrnico) para o endereo especfico.
Exemplo:
Mande um<a href="mailto:XYZ@XYZ.com.br">email</a>para a XYZ.

HTML - Parte I

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML - Parte I

Enviado por

Direitos autorais:

Formatos disponíveis

Programao Internet

Prof. Marcio Momberger

usando Bloco de Notas, deve salv-lo no

Um TAG sempre precedido de um caracter "<"

correspondente, chamado de TAG de fechamento. Ou

Um TAG de fechamento tem o mesmo nome do TAG de

abertura, precedido do caracter "/".

TAGs podem ser escritas em minsculas ou maiscula,

mas nunca podem haver espaos em branco dentro de

Contm o ttulo do documento. Muitos browsers

utilizado para insero de cdigo script (ex.: java

Define valores especiais. os valores so definidos como pares "name/content"

As palavras chaves tambm serviro para a busca de sua home page.

Voc pode inserir comentrios adicionais na cabea do seu

LEFTMARGIN (Microsoft Internet Explorer)

TOPMARGIN (Microsoft Internet Explorer)

<body background="images/fundo.gif" link="blue" vlink="purple"

<p><a href="http://www.xyz.com.br">Oi! Eu sou um link!</a></p>

Indica que o texto influenciado uma "HEADER" (cabealho). Os

Indica que o texto deve ser apresentado em itlico.

Indica que o texto deve ser apresentado em negrito.

Indica que o texto deve ser apresentado com um trao cortando-o.

Indica que o texto deve ser apresentado em subscrito.

Indica que o texto deve ser apresentado em sobrescrito.

Existem 7 tamanhos de fonte em HTML, numeradas de

Indica que o texto influenciado um pargrafo, e possui um alinhamento prprio. Os

Passa para a prxima linha.

Indica que o texto influenciado uma diviso, e possui portanto um alinhamento

Usualmente o browser ignora os espaos em branco e as quebras de linha

SEM QUEBRA <nobr>...</nobr>

Indica o incio e o final de uma lista ordenada (numerada).

Demarca os elementos de listas ordenadas e no ordenadas.

Indica o incio e o final de uma lista no numerada

Demarca os elementos de listas ordenadas e no ordenadas.

Demarca os elementos de listas ordenadas e no ordenadas.

Representa o termo definido, a ser explicado em <DD>.

Representa a definio do termo presente em <DT>. No deve

Os pontos que ligam os hipertextos so chamados de hyperlinks,

O TAG que indica a regio a ser tratada como um hyperlink o par

Geralmente o Browser apresenta os links em azul e sublinhados, mas

Indica a regio a ser tratada como hyperlink

1. Links para dentro da prpria pgina

O local precisa ter um "nome". Este "nome" definido da seguinte forma:

Exemplo: <a href="nome.htm">Link para o Nome</a>

Nesse caso, assumiu-se que o arquivo nome.htm estava

Deve-se usar a URL completa da pgina

Existe um tipo de link chamado de "mailto:". Se,

Você também pode gostar