A maior rede de estudos do Brasil

Grátis
31 pág.
Linguagem HTML 33

Pré-visualização | Página 1 de 2

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>Lista