Linguagem HTML 33

•

ESTÁCIO

0

leonardo

23.12.2012

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 31 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 31 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 31 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Análise Textual

13.829 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Linguagem 
HTML
Ivanethe Carvalho Rocha.
Linguagem HTML 
• Abreviação para Hyper Text
Markup Language, traduzindo
Linguagem de Marcação de
HiperTexto
• Desenvolvida com objetivos de
divulgação, depois ganhou status
público
• Definida formalmente na década de
1990
• Sua versão mais atual está centrada
no desenvolvimento do XHTML ,
uma junção com XML.
Linguagem HTML 
• HyperTexto
• É o termo que remete a um texto em 
formato digital, ao qual agrega-se 
outros conjuntos de informação na 
forma de blocos de textos, palavras, 
imagens ou sons, cujo acesso se dá 
através de referências específicas 
denominadas hiperlinks, ou 
simplesmente links. 
Linguagem HTML
• Tags (Etiquetas)
▫ Os documentos escritos em HTML 
são marcados por etiquetas, mais 
conhecidas com tags.
▫ São palavras ou caracteres entre os 
sinais de <>.
▫ Elas informam ao browser a 
estrutura e o significado do texto.
▫ São usadas para dizer qual texto é 
título, parágrafo e assim por diante. 
▫ Ex:
 quebra de linha: é um exemplo de 
elemento solitário: <br>
 - localização centralizada do texto: é 
um exemplo de elemento que deve 
ser encerrado: <center> ... 
</center>
Linguagem HTML
• Estrutura de documento HTML
▫ Todo arquivo HTML obrigatoriamente
contém alguns comandos que identificam
aquele texto como uma home page para o
navegador. Assim, as páginas em HTML
possuem uma anatomia fixa, devendo
conter obrigatoriamente os seguintes tags:
▫ <html> e </html> - Determinam início
e fim do documento HTML. <html> diz ao
browser para iniciar um novo documento
HTML cujo conteúdo se encontra definido
entre esse local e a etiqueta de fim do
documento, que é </html>.
▫ <head> e </head> - Definem o
cabeçalho. Esta informação não é
apresentada graficamente mas dá
indicações importantes a respeito daquilo
que a página contém e sobre a forma como
ela deve ser apresentada.
Linguagem HTML
• Estrutura de documento HTML
▫ <title> e </title> - Contém o título da
página, ou seja, o nome da janela que irá
aparecer na barra superior do navegador.
▫ <body> e </body> - Define tudo aquilo que
o navegador deve apresentar graficamente.
Todos os arquivos, textos, sons deverão estar
entre estes elementos.
Linguagem HTML
• Estrutura de documento HTML
• Exemplo: Assim, a estrutura básica de 
uma página, em ordem de comandos 
obrigatórios é: 
▫
<html>
<head>
<title>
Entre <title> e </title> deve ser 
digitado o título da página.
</title> 
</head> 
<body>
Entre <body> e </body> devem ser 
colocados todos os textos, figuras e sons 
da página.
</body> 
</html> 
Linguagem HTML
•Exemplo – Código Fonte
▫ <html> 
▫ <head> 
▫ <title>Bar Use a Cabeça</title> 
▫ </head> 
▫ <body> 
▫ <h1>Bem-vindos ao Bar Use a Cabeça</h1> 
▫ <img src="drinks.gif"> 
▫ <p> 
▫ Junte-se a nós qualquer noite dessas para beber 
<a ref=”bebidas/ 
▫ elixir.html”>elixires</a> refrescantes, ter um 
bom papo 
▫ e talvez algumas partidas de <em>Dance Dance
Revolution</em>. 
▫ O acesso wireless está sempre disponível; 
▫ TSPSW (Traga Seu Próprio Servidor Web). 
▫ </p> 
▫ <h2>Como chegar</h2> 
▫ <p> 
▫ Você nos encontrará bem no centro da cidade 
▫ de Weblândia. Junte-se a nós! 
▫ </p> 
▫ </body> 
▫ </html>
Estrutura de documento 
HTML
• Corpo: dentro do corpo podemos encontrar
outras várias etiquetas que irão moldar a
página.
▫ <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento 
em diversos tamanhos. (quanto menor for o número, 
maior sera o tamanho da letra)
▫ <p>: novo parágrafo.
▫ <br>: quebra de linha.
▫ <table>: cria uma tabela (linhas são criadas com <TR> e 
novas células com <TD>. Já os cabeçalhos de coluna são 
criados com a etiqueta <TH>.)
▫ <div>: determina uma divisão na página a qual pode 
possuir variadas formatações.
▫ <font>: altera a formatação (fonte, cor e tamanho) de um 
trecho do texto.
▫ <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, 
respectivamente.
▫ <img>: imagem.
▫ <a>: hiper-ligação para um outro local, seja uma página, 
um e-mail ou outro serviço.
▫ <textarea>: caixa de texto (com mais de uma linha); estas 
caixas de texto são muito usadas em blogs, elas podem ser 
auto selecionáveis e conter outros códigos a serem 
distribuídos.
▫ <acronym>: acrônimo (sigla)
▫ <cite>: citação
▫ <address>: endereço
Estrutura de documento 
HTML
• A seção BODY
▫ Tudo que estiver contido em <BODY> será
mostrado na janela principal do browser, sendo
apresentado ao leitor. <BODY> pode conter
cabeçalhos, parágrafos, listas, tabelas, links para
outros documentos, imagens, formulários,
animações, vídeos, sons e scripts embutidos.
▫ Através de atributos de <BODY>, podemos
definir cores para os textos, links e para o fundo
das páginas, bem como uma imagem de fundo
(marca d’água). Assim temos:
Estrutura de documento 
HTML
• A seção BODY
• <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" 
LINK="#rrggbb" ALINK="#rrggbb" 
VLINK="#rrggbb" BACKGROUND="URL">
• Onde:
• BGCOLOR cor de fundo (quando não é indicada, o 
browser irá mostrar uma cor padrão, geralmente o 
cinza ou branco; alguns editores poderão 
estabelecer o branco para o fundo da página) 
• TEXT: cor dos textos da página (padrão: preto) 
• LINK: cor dos links (padrão: azul) 
• ALINK: cor dos links, quando acionados (padrão: 
vermelho) 
• VLINK: cor dos links, depois de visitados (padrão: 
azul escuro ou roxo) 
• BACKGROUND indica o URL da imagem a ser 
replicada no fundo da página, como uma marca 
d’água.
Estrutura de documento 
HTML
• Alinhamento de cabeçalhos
▫ Os cabeçalhos têm atributos de 
alinhamento:
 <H2 ALIGN=CENTER>Cabeçalho 
centralizado</H2> 
Cabeçalho centralizado
▫ <H3 ALIGN=RIGHT>Cabeçalho alinhado à 
direita</H3> 
Cabeçalho alinhado à direita.
▫ <H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda 
(default)</H4> 
Cabeçalho alinhado à esquerda (default)
Estrutura de documento 
HTML
• Separadores
▫ As quebras de linha do texto fonte não são
significativas na apresentação de documentos
em HTML. Para organizar os textos, precisamos
de separadores.
▫ Quebra de linha
 Quando queremos mudar de linha, usamos o
elemento <BR>. Isso só é necessário quando
queremos uma quebra de linha em determinado
ponto, pois os browsers já quebram as linhas
automaticamente para apresentar os textos.
Estrutura de documento 
HTML
• Separadores
▫ Parágrafos
 Para separar blocos de texto, usamos 
o elemento <P>.
 Os parágrafos também possuem 
alinhamentos, assim temos:
▫ <P ALIGN=CENTER>
▫ <P ALIGN=RIGHT>
▫ <P ALIGN=LEFT>
Estrutura de documento 
HTML
• Separadores
▫ Linha Horizontal
 <HR> insere uma linha horizontal: 
 Essa linha tem diversos atributos, 
oferecendo resultados diversos.
 <HR SIZE=7> insere uma linha de largura 7 
(pixels);
 <HR WIDTH=50%> insere uma linha que 
ocupa 50% do espaço horizontal disponível.
 <HR WIDTH=30% ALIGN=RIGHT 
NOSHADE> insere uma linha de 
comprimento 30% (do espaço horizontal 
disponível), alinhada à direita, sem efeito 
tridimensional: 
Estrutura de documento 
HTML
• Listas em HTML
▫ Listas de definição: também 
chamadas de listas de glossário. 
▫ Possuem a seguinte estrutura.
 <DL>
 <DT>Termo a ser definido
 <DD> Definição
 </DL>
• Ex:
• <dl> 
<dt>Banco de dados</dt> 
<dd>Conjunto de resgistros dispostos de 
maneira regular </dd> 
<dt>Redes de computadores</dt> 
<dd>Dois ou mais dispositivos conectados 
entre si</dd> </dl>
Estrutura de documento 
HTML
• Listas em HTML
▫ Listas não ordenadas: semelhantes
a listas com marcadores.
▫ Possuem a seguinte estrutura.
 <UL>
 <LI>Termo a ser definido
 <LI> Definição
 </UL>
• Ex: 
<ul> 
<li>Banco de dados</li> 
<li>Redes</li> 
</ul>
 Resultado
 Banco de dados
 Redes
Estrutura de documento 
HTML
• Listas em HTML
▫ Listas ordenadas: é também uma lista
de itens.
▫ Possuem a seguinte estrutura.
 <OL>
 <LI>Item1
 <LI> Item2
 </OL>
• Ex: 
<ul> 
<li>Banco de dados</li> 
<li>Redes</li> 
</ul>
 Resultado
1 Banco de dados
2 Redes
Estrutura de documento 
HTML
• Exemplos de listas ordenadas
• <h4>Listanumerada:</h4>
<ol>
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol> 
• <h4>Lista com letras:</h4>
<ol type="A">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol> 
Estrutura de documento 
HTML• Exemplos de listas ordenadas
<h4>Lista com letras minúsculas:</h4>
 <ol type="a">
 <li>Maçãs</li>
 <li>Bananas</li>
 <li>Limões</li>
 <li>Laranjas</li>
 </ol> 
• <h4>Lista com números romanos:</h4>
 <ol type="I">
 <li>Maçãs</li>
 <li>Bananas</li>
 <li>Limões</li>
 <li>Laranjas</li>
 </ol> 
• <h4>Lista com números romanos minúsculos:</h4>
 <ol type="i">
 <li>Maçãs</li>
 <li>Bananas</li>
 <li>Limões</li>
 <li>Laranjas</li>
 </ol> 
Estrutura de documento 
HTML
• Exemplos de listas não ordenadas
• <h4>Lista de bullets de disco:</h4>
<ul type="disc">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ul> 
• <h4>Lista de bullets de círculo:</h4>
<ul type="circle">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ul> 
• <h4>Lista de bullets de quadrado:</h4>
<ul type="square">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ul> 
Estrutura de documento 
HTML
• Formatação de textos 
• Blocos de texto são permitidas as 
seguintes tags:
• <PRE>
▫ Apresenta o texto na mesma 
maneira em que foi digitado, 
mantendo quebras de linha e 
tabulações.
▫ Ex: 
▫ <pre>uma linha aqui, 
outra ali, 
etc.</pre>
Estrutura de documento 
HTML
• Formatação de textos 
• <BLOCKQUOTE>
▫ É usado para citações longas.
▫ Ex: 
▫ <blockquote>A massa do Sol arqueia 
o espaço-tempo de tal maneira que, 
ainda que a Terra siga uma trajetória 
reta no espaço-tempo 
quadridimensional, parece-nos que 
se desloca em órbita circular no 
espaço 
tridimensional.</blockquote> 
(Stephen W. Hawking, “Uma Breve 
História do Tempo”)
Estrutura de documento 
HTML
• Formatação de textos 
• <ADDRESS>
• Usado para formatar endereços e-
mail e referências a autores de 
documentos.
• Ex:
Envie críticas e sugestões para 
<address>algumacoisa@aaa.bbb.br
</address>
Estrutura de documento 
HTML
• CORES
• As cores são introduzidas através do 
elemento <FONT>, usando o 
sistema RGB para cores (da mesma 
forma que vimos para cores de 
documentos):
• Ex.: 
• <FONT 
COLOR="#rrggbb">Texto</FON
T>
Estrutura de documento 
HTML
• Tamanho
• A formatação 
• <FONT 
SIZE=tamanho_da_letra>Texto</FON
T> 
• O tamanho básico é 3.
• Ex: 
 <FONT SIZE=+2>Letra 
maior</FONT> 
<FONT SIZE=-2>Letra 
menor</FONT>
• Fontes
• <FONT 
FACE="fonte_da_letra">Texto</FONT
>
Estrutura de documento 
HTML
• Fontes
• <FONT 
FACE="fonte_da_letra">Texto</FONT
>
• Ex.:
• <FONT FACE="Verdana" 
COLOR="#0000AA">Fonte Verdana azul</FONT>
Fonte Verdana azul 
• <FONT FACE="Arial" COLOR="#00AA00">Fonte 
Arial verde</FONT>
Fonte Arial verde 
• <FONT FACE="Courier New" 
COLOR="#AA0000">Fonte Courier New 
vermelha</FONT>
Fonte Courier New vermelha 
Links
• Possibilidade de fazer ligações de
uma região de texto (ou imagem) a
um outro documento.
• O browser destaca essas regiões e
imagens do texto, indicando que
são ligações de hipertexto -
também chamadas hypertext links
ou hiperlinks ou simplesmente
links.
• Para inserir um link em um
documento, utilizamos a etiqueta
<A>, da seguinte forma:
• <A HREF =
"arq_destino">âncora</A>
Links
• Para inserir um link em um
documento, utilizamos a etiqueta
<A>, da seguinte forma:
• <A HREF =
"arq_destino">âncora</A>
• Onde:
▫ arq_destino é o URL do 
documento de destino; 
▫ âncora é o texto ou imagem que 
servirá de ligação hipertexto do 
documento sendo apresentado para o 
documento de destino. 
Links
• Ex: Link para outra página html
• <p>
Junte-se a nós em qualquer noite dessas para
beber <a
href="beverages/elixir.html">elixires</a>
refrescantes, ter um bom papo e talvez algumas
partidas de Dance Dance Revolution. O acesso
wireless está sempre disponível; TSPSW (Traga
Seu Próprio Servidor Web).</p>
Links
• Ex: Link com uma imagem para 
outra página html
• <a href="beverages/elixir.html" 
<img src="images/drinks.gif">
</a>