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

2 Programação HTML 2


DisciplinaAlgoritmos14.458 materiais168.399 seguidores
Pré-visualização3 páginas
Programação Web - HTML 
 
 
1
AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO \u2013 AEVSF 
FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA \u2013 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: 
\u2212 HTML (HyperText Markup Language \u2013 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 \u201c<\u201d e \u201c>\u201d) e cada tag pode conter de 
nenhum a mais de um atributo. A versão adotada será o HTML 4.0. 
\u2212 CSS (Cascading Style Sheets \u2013 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. 
\u2212 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 \u201c<HTML>\u201d e termina com a tag \u201c</HTML>\u201d. Entre 
estas tags está o código fonte do documento web que é composto por duas seções: 
\u2212 Cabeçalho, que usa as tags <HEAD>...</HEAD>; 
\u2212 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>\u2026</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>\u2026</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 \u2026 
 
Navegador 
 
<META \u2026> 
Esta tag tem a função de servir informações para o servidor para serem analisados. Ela tem 
dois atributos: \u201cHTTP-EQUIV\u201d e \u201cCONTENT\u201d. O atributo \u201cHTTP-EQUIV\u201d corresponde ao nome, ao 
rótulo de uma determinada informação ao servidor. O atributo \u201cCONTENT\u201d corresponde à própria 
informação analisada pelo servidor. 
 
<META HTTP-EQUIV=\u201dKeywords\u201d CONTENT=\u201dPalavras separadas por vírgulas\u201d> 
A tag acima informa palavras que serão utilizadas pelos mecanismos de busca para a 
identificação do documento. 
 
<META HTTP-EQUIV=\u201dRefresh\u201d CONTENT=\u201d10\u201d> 
Esta tag tem a função de atualizar o mesmo documento a cada 10 segundos. 
 
<META HTTP-EQUIV=\u201dRefresh\u201d CONTENT=\u201d5;URL=\u2019documento.html\u2019\u201d> 
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: \u201cBACKGROUND\u201d e \u201cBGCOLOR\u201d. O 
\u201cBACKGROUND\u201d 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=\u201dCaminho/até/chegar/em/arquivo/de/imagem\u201d> 
 
O atributo \u201cBGCOLOR\u201d 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 \u201c#\u201d, 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=&quot;Gray&quot;> - Cinza 
<BODY BGCOLOR=&quot;#FFFFFF&quot;> - Branco 
<BODY BGCOLOR=&quot;#000000&quot;> - Preto 
<BODY BGCOLOR=&quot;#FF0000&quot;> - Vermelho. 
<BODY BGCOLOR=&quot;#00FF00&quot;> - Verde. 
<BODY BGCOLOR=&quot;#0000FF&quot;> - Azul. 
 
Os atributos que tratam das margens são: \u201cTOPMARGIN\u201d e \u201cLEFTMARGIN\u201d, que atendem ao 
Internet Explorer; e \u201cMARGINWIDTH\u201d e \u201cMARGINHEIGHT\u201d, que atendem aos demais navegadores. 
Os atributos \u201cTOPMARGIN\u201d e \u201cMARGINWIDTH\u201d correspondem à margem superior e \u201cLEFTMARGIN\u201d 
e \u201cMARGINHEIGHT\u201d 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>\u2026</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=\u201dCENTER\u201d WIDTH=\u201d100%\u201d SIZE=\u201d2\u201d NOSHADE> 
 
<FONT>\u2026</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=\u201dVerdana\u201d SIZE=\u201d3\u201d COLOR=\u201d#000080\u201d>...</FONT> 
 
<BR> 
Esta tag corresponde à quebra de linha. 
 
<I>\u2026</I> 
Esta tag coloca o texto, a qual cerca, em itálico. 
 
<U>\u2026</U> 
Esta tag coloca o texto, a qual cerca, sublinhado. 
 
<B>\u2026</B> 
Esta tag coloca o texto, a qual cerca, em negrito. 
 
<S>\u2026</S> 
Esta tag coloca o texto, a qual cerca, riscado. 
 
<BLOCKQUOTE>\u2026</BLOCKQUOTE> 
Esta tag gera um espaçamento no conteúdo. 
 
<CENTER>\u2026</CENTER> 
Esta tag coloca o texto, a qual cerca, centralizado. 
 
<BIG>\u2026</BIG> 
Esta tag aumenta o texto. Quanto mais tags inserir, maior ficará o texto. 
 
 Programação Web - HTML 
 
 
6
<SMALL>\u2026</SMALL> 
Esta tag diminui o texto. Quanto mais tags inserir, menor ficará o texto. 
 
<ADDRESS>\u2026</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>\u2026</MARQUEE> 
Esta tag permite aplicar um efeito conhecido como \u201cletreiro eletrônico\u201d, onde o texto que fica 
entre as tags desliza de um lado para outro do monitor. 
 
<PRE>\u2026</PRE> 
Estas tags mantêm a formatação e o espaçamento original do texto que se encontra entre 
elas. 
 
<!-- COMENTÁRIO --> 
Esta