2 Programação HTML 2
13 pág.

2 Programação HTML 2

Disciplina:Análise Textual6.546 materiais161.455 seguidores
Pré-visualização3 páginas
Programação Web - HTML

1

AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO – AEVSF
FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA – FACAPE

CURSO DE CIÊNCIA DA COMPUTAÇÃO
PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO

APOSTILA DE PROGRAMAÇÃO WEB

HTML (HyperText Markup Language)

Petrolina-PE, 2008

 Programação Web - HTML

2

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

TECNOLOGIAS

As tecnologias cliente adotadas para esta disciplina são:
− HTML (HyperText Markup Language – Linguagem de Marcação de Hipertextos) corresponde a

uma linguagem utilizada para a construção de documentos/páginas para Web (Web Sites). Ela
é composta por tags (comando cercado pelos caracteres “<” e “>”) e cada tag pode conter de
nenhum a mais de um atributo. A versão adotada será o HTML 4.0.

− CSS (Cascading Style Sheets – Folha de Estilos em Cascata) corresponde a documentos de
formatação de Web Sites. O CSS foi criado e padronizado no final de 1996 pela World Wide
Web Consortium (W3C). a versão adotada será CSS 2.0.

− Javascript corresponde a uma linguagem de scripts desenvolvidos pela Netscape para gerar
aplicativos web entrelaçando seu código com o HTML.

ESTRUTURA BÁSICA DO DOCUMENTO HTML

<HTML>...</HTML>
Todo documento HTML começa com a tag “<HTML>” e termina com a tag “</HTML>”. Entre

estas tags está o código fonte do documento web que é composto por duas seções:
− Cabeçalho, que usa as tags <HEAD>...</HEAD>;
− Corpo, que usa as tags <BODY>...</BODY>.

O mais básico documento HTML é:
<HTML>

<HEAD>

</HEAD>
<BODY >

</BODY>
</HTML>

O código acima não mostra nada, mas contém as tags necessárias para um documento
HTML.

<HEAD>…</HEAD>
A tag <HEAD> corresponde à seção que é formada pelo cabeçalho do documento HTML e

que contém informações necessárias para o navegador ou servidor processar este documento. Estas
informações são título, dados para mecanismo de busca, âncora e o que for necessário para ser lido
pelo navegador antes do documento ser mostrado na tela. As duas tags da seção HEAD são: TITLE e
META.

 Programação Web - HTML

3

<TITLE>…</TITLE>
Esta tag identifica o título do documento. Ela não contém nenhum atributo e só aparece uma

vez em cada documento.

<HTML>

<HEAD>

<TITLE>Testando ...</TITLE>
</HEAD>
<BODY >
</BODY>
</HTML>

Testando …

Navegador

<META …>
Esta tag tem a função de servir informações para o servidor para serem analisados. Ela tem

dois atributos: “HTTP-EQUIV” e “CONTENT”. O atributo “HTTP-EQUIV” corresponde ao nome, ao
rótulo de uma determinada informação ao servidor. O atributo “CONTENT” corresponde à própria
informação analisada pelo servidor.

<META HTTP-EQUIV=”Keywords” CONTENT=”Palavras separadas por vírgulas”>

A tag acima informa palavras que serão utilizadas pelos mecanismos de busca para a
identificação do documento.

<META HTTP-EQUIV=”Refresh” CONTENT=”10”>

Esta tag tem a função de atualizar o mesmo documento a cada 10 segundos.

<META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=’documento.html’”>

Esta tag tem a função de carregar o documento HTML indicado no atributo URL após 5
segundos.

<BODY...>...</BODY>
A tag <BODY> corresponde à seção que é formada pelo corpo do documento. É nela que se

encontra a parte visual e auditiva do documento, o texto, formulário, tabela, imagem, links, etc. Os
principais atributos da tag <BODY> correspondem a plano de fundo, margens, links e textos.

Os atributos que se referem a plano de fundo são: “BACKGROUND” e “BGCOLOR”. O
“BACKGROUND” contém o nome do arquivo de imagem ou URL completo até chegar a esta imagem
que será utilizada como plano de fundo.
<BODY BACKGROUND=”Caminho/até/chegar/em/arquivo/de/imagem”>

O atributo “BGCOLOR” contém a cor que será usada como plano de fundo do documento. A
cor poderá ser identificada pelo seu nome (em inglês) ou pelo código hexadecimal, que é formado
pelo caractere “#”, seguido de seis dígitos. Destes, os dois primeiros correspondem à cor vermelha,
os dois do meio correspondem à cor verde e os dois últimos correspondem à cor azul. Enquanto 00
corresponde ao preto, FF corresponde ao branco.

 Programação Web - HTML

4

Nome Código Nome Código

 Red FF0000 Maroon 800000

 Lime 00FF00 Green 008000

 Blue 0000FF Navy 000080

 Yellow FFFF00 Olive 808000

 Aqua 00FFFF Teal 008080

 Fuchsia FF00FF Purple 800080

 White FFFFFF Silver C0C0C0

 Black 000000 Gray 808080

<BODY BGCOLOR="Gray"> - Cinza

<BODY BGCOLOR="#FFFFFF"> - Branco

<BODY BGCOLOR="#000000"> - Preto

<BODY BGCOLOR="#FF0000"> - Vermelho.

<BODY BGCOLOR="#00FF00"> - Verde.

<BODY BGCOLOR="#0000FF"> - Azul.

Os atributos que tratam das margens são: “TOPMARGIN” e “LEFTMARGIN”, que atendem ao
Internet Explorer; e “MARGINWIDTH” e “MARGINHEIGHT”, que atendem aos demais navegadores.
Os atributos “TOPMARGIN” e “MARGINWIDTH” correspondem à margem superior e “LEFTMARGIN”
e “MARGINHEIGHT” correspondem à margem esquerda.

Os atributos que tratam dos links e textos são: LINK, VLINK, ALINK, TEXT. O atributo LINK
corresponde a cor de todos os links de um documento que ainda não foram acessados, VLINK
corresponde a cor dos links que já foram acessados, ALINK afeta a cor do link ativo, que está sendo
acessado e TEXT afeta a cor do texto.

ESTRUTURA BÁSICA DO CORPO DO DOCUMENTO HTML

<P>…</P>
Esta tag cerca um parágrafo do documento. O atributo ALIGN corresponde ao alinhamento

deste parágrafo. As opções são: LEFT, RIGHT, CENTER e JUSTIFY, sendo o padrão a opção LEFT.

<H?>...</H?>
Esta tag corresponde à identificação de um determinado texto como título. A interrogação

acima corresponde, na verdade, a um número entre 1 e 6, sendo 1, o texto maior e 6, o menor. As
tags são assim: <H1>...</H1>, <H2>...</H2>, <H3>...</H3>, <H4>...</H4>, <H5>...</H5> e
<H6>...</H6>.

 Programação Web - HTML

5

<HR>
Esta tag corresponde a uma linha horizontal. Os seus atributos são ALIGN: que corresponde

ao alinhamento; WIDTH, que corresponde à largura, podendo ser em porcentagem ou pixels; SIZE,
que corresponde à espessura em pixels; e NOSHADE, que cria uma linha sem efeito 3D.
<HR ALIGN=”CENTER” WIDTH=”100%” SIZE=”2” NOSHADE>

<FONT>…</FONT>
A tag <FONT> corresponde a configuração do texto no que se refere ao tipo de fonte, cor e

tamanho. Os atributos desta tag são: FACE, que corresponde ao nome da fonte; SIZE, que
corresponde ao tamanho do texto, variando de 1 a 7; e COLOR, que corresponde a cor do texto,
podendo ser o nome da cor ou em código hexadecimal.
<FONT FACE=”Verdana” SIZE=”3” COLOR=”#000080”>...</FONT>

<BR>
Esta tag corresponde à quebra de linha.

<I>…</I>
Esta tag coloca o texto, a qual cerca, em itálico.

<U>…</U>
Esta tag coloca o texto, a qual cerca, sublinhado.

<B>…</B>
Esta tag coloca o texto, a qual cerca, em negrito.

<S>…</S>
Esta tag coloca o texto, a qual cerca, riscado.

<BLOCKQUOTE>…</BLOCKQUOTE>
Esta tag gera um espaçamento no conteúdo.

<CENTER>…</CENTER>
Esta tag coloca o texto, a qual cerca, centralizado.

<BIG>…</BIG>
Esta tag aumenta o texto. Quanto mais tags inserir, maior ficará o texto.

 Programação Web - HTML

6

<SMALL>…</SMALL>
Esta tag diminui o texto. Quanto mais tags inserir, menor ficará o texto.

<ADDRESS>…</ADDRESS>
Esta tag serve para referenciar o autor (créditos). Ao visualizar o resultado da tag, o texto

torna-se semelhante ao resultado das tags <I>...</i>.

<MARQUEE>…</MARQUEE>
Esta tag permite aplicar um efeito conhecido como “letreiro eletrônico”, onde o texto que fica

entre as tags desliza de um lado para outro do monitor.

<PRE>…</PRE>
Estas tags mantêm a formatação e o espaçamento original do texto que se encontra entre

elas.

<!-- COMENTÁRIO -->
Esta