Linguagem HTML 33
31 pág.

Linguagem HTML 33


DisciplinaAnálise Textual9.462 materiais293.872 seguidores
Pré-visualização2 páginas
Linguagem 
HTML
Ivanethe Carvalho Rocha.
Linguagem HTML 
\u2022 Abreviação para Hyper Text
Markup Language, traduzindo
Linguagem de Marcação de
HiperTexto
\u2022 Desenvolvida com objetivos de
divulgação, depois ganhou status
público
\u2022 Definida formalmente na década de
1990
\u2022 Sua versão mais atual está centrada
no desenvolvimento do XHTML ,
uma junção com XML.
Linguagem HTML 
\u2022 HyperTexto
\u2022 É 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
\u2022 Tags (Etiquetas)
\u25ab Os documentos escritos em HTML 
são marcados por etiquetas, mais 
conhecidas com tags.
\u25ab São palavras ou caracteres entre os 
sinais de <>.
\u25ab Elas informam ao browser a 
estrutura e o significado do texto.
\u25ab São usadas para dizer qual texto é 
título, parágrafo e assim por diante. 
\u25ab Ex:
\uf096 quebra de linha: é um exemplo de 
elemento solitário: <br>
\uf096 - localização centralizada do texto: é 
um exemplo de elemento que deve 
ser encerrado: <center> ... 
</center>
Linguagem HTML
\u2022 Estrutura de documento HTML
\u25ab 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:
\u25ab <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>.
\u25ab <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
\u2022 Estrutura de documento HTML
\u25ab <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.
\u25ab <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
\u2022 Estrutura de documento HTML
\u2022 Exemplo: Assim, a estrutura básica de 
uma página, em ordem de comandos 
obrigatórios é: 
\u25ab
<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
\u2022Exemplo \u2013 Código Fonte
\u25ab <html> 
\u25ab <head> 
\u25ab <title>Bar Use a Cabeça</title> 
\u25ab </head> 
\u25ab <body> 
\u25ab <h1>Bem-vindos ao Bar Use a Cabeça</h1> 
\u25ab <img src=&quot;drinks.gif&quot;> 
\u25ab <p> 
\u25ab Junte-se a nós qualquer noite dessas para beber 
<a ref=\u201dbebidas/ 
\u25ab elixir.html\u201d>elixires</a> refrescantes, ter um 
bom papo 
\u25ab e talvez algumas partidas de <em>Dance Dance
Revolution</em>. 
\u25ab O acesso wireless está sempre disponível; 
\u25ab TSPSW (Traga Seu Próprio Servidor Web). 
\u25ab </p> 
\u25ab <h2>Como chegar</h2> 
\u25ab <p> 
\u25ab Você nos encontrará bem no centro da cidade 
\u25ab de Weblândia. Junte-se a nós! 
\u25ab </p> 
\u25ab </body> 
\u25ab </html>
Estrutura de documento 
HTML
\u2022 Corpo: dentro do corpo podemos encontrar
outras várias etiquetas que irão moldar a
página.
\u25ab <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)
\u25ab <p>: novo parágrafo.
\u25ab <br>: quebra de linha.
\u25ab <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>.)
\u25ab <div>: determina uma divisão na página a qual pode 
possuir variadas formatações.
\u25ab <font>: altera a formatação (fonte, cor e tamanho) de um 
trecho do texto.
\u25ab <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, 
respectivamente.
\u25ab <img>: imagem.
\u25ab <a>: hiper-ligação para um outro local, seja uma página, 
um e-mail ou outro serviço.
\u25ab <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.
\u25ab <acronym>: acrônimo (sigla)
\u25ab <cite>: citação
\u25ab <address>: endereço
Estrutura de documento 
HTML
\u2022 A seção BODY
\u25ab 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.
\u25ab 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\u2019água). Assim temos:
Estrutura de documento 
HTML
\u2022 A seção BODY
\u2022 <BODY BGCOLOR=&quot;#rrggbb&quot; TEXT=&quot;#rrggbb&quot; 
LINK=&quot;#rrggbb&quot; ALINK=&quot;#rrggbb&quot; 
VLINK=&quot;#rrggbb&quot; BACKGROUND=&quot;URL&quot;>
\u2022 Onde:
\u2022 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) 
\u2022 TEXT: cor dos textos da página (padrão: preto) 
\u2022 LINK: cor dos links (padrão: azul) 
\u2022 ALINK: cor dos links, quando acionados (padrão: 
vermelho) 
\u2022 VLINK: cor dos links, depois de visitados (padrão: 
azul escuro ou roxo) 
\u2022 BACKGROUND indica o URL da imagem a ser 
replicada no fundo da página, como uma marca 
d\u2019água.
Estrutura de documento 
HTML
\u2022 Alinhamento de cabeçalhos
\u25ab Os cabeçalhos têm atributos de 
alinhamento:
\uf096 <H2 ALIGN=CENTER>Cabeçalho 
centralizado</H2> 
Cabeçalho centralizado
\u25ab <H3 ALIGN=RIGHT>Cabeçalho alinhado à 
direita</H3> 
Cabeçalho alinhado à direita.
\u25ab <H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda 
(default)</H4> 
Cabeçalho alinhado à esquerda (default)
Estrutura de documento 
HTML
\u2022 Separadores
\u25ab 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.
\u25ab Quebra de linha
\uf096 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
\u2022 Separadores
\u25ab Parágrafos
\uf096 Para separar blocos de texto, usamos 
o elemento <P>.
\uf096 Os parágrafos também possuem 
alinhamentos, assim temos:
\u25ab <P ALIGN=CENTER>
\u25ab <P ALIGN=RIGHT>
\u25ab <P ALIGN=LEFT>
Estrutura de documento 
HTML
\u2022 Separadores
\u25ab Linha Horizontal
\uf096 <HR> insere uma linha horizontal: 
\uf096 Essa linha tem diversos atributos, 
oferecendo resultados diversos.
\uf096 <HR SIZE=7> insere uma linha de largura 7 
(pixels);
\uf096 <HR WIDTH=50%> insere uma linha que 
ocupa 50% do espaço horizontal disponível.
\uf096 <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
\u2022 Listas em HTML
\u25ab Listas de definição: também 
chamadas de listas de glossário. 
\u25ab Possuem a seguinte estrutura.
\uf096 <DL>
\uf096 <DT>Termo a ser definido
\uf096 <DD> Definição
\uf096 </DL>
\u2022 Ex:
\u2022 <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
\u2022 Listas em HTML
\u25ab Listas não ordenadas: semelhantes
a listas com marcadores.
\u25ab Possuem a seguinte estrutura.
\uf096 <UL>
\uf096 <LI>Termo a ser definido
\uf096 <LI> Definição
\uf096 </UL>
\u2022 Ex: 
<ul> 
<li>Banco de dados</li> 
<li>Redes</li> 
</ul>
\uf096 Resultado
\uf096 Banco de dados
\uf096 Redes
Estrutura de documento 
HTML
\u2022 Listas em HTML
\u25ab Listas ordenadas: é também uma lista
de itens.
\u25ab Possuem a seguinte estrutura.
\uf096 <OL>
\uf096 <LI>Item1
\uf096 <LI> Item2
\uf096 </OL>
\u2022 Ex: 
<ul> 
<li>Banco de dados</li> 
<li>Redes</li> 
</ul>
\uf096 Resultado
1 Banco de dados
2 Redes
Estrutura de documento 
HTML
\u2022 Exemplos de listas ordenadas
\u2022 <h4>Lista