Apostila HTML

7.3 ELEMENTOS DA LINGUAGEM ................................................................... 34 
7.3.1 VARIÁVEIS ......................................................................................... 34 
7.3.2 EXPRESSÕES e OPERADORES................................................................ 35 
7.3.3 DECLARAÇÕES .................................................................................. 35 
7.4 JAVASCRIPT BÁSICO.............................................................................. 36 
7.4.1 EMBUTINDO O CÓDIGO JavaScript......................................................... 36 
7.4.2 CARREGANDO UM ARQUIVO EXTERNO.................................................... 37 
7.4.3 EXTENSÕES JavaScript PARA A LINGUAGEM HTML ................................... 37 
7.5 ELEMENTOS ESSENCIAIS DO JAVASCRIPT ................................................... 38 
7.5.1 O OBJETO DOCUMENT.......................................................................... 38 
7.5.2 MANIPULAÇÃO E ALTERAÇÃO DO VALOR DE UMA PROPRIEDADE................ 38 
7.6 EVENTOS ............................................................................................. 39 
7.6.1 onBlur................................................................................................ 40 
7.6.2 onChange........................................................................................... 40 
7.6.3 onClick............................................................................................... 40 
7.6.4 onFocus ............................................................................................. 42 
7.6.5 onLoad............................................................................................... 42 
7.6.6 onUnLoad........................................................................................... 43 
7.6.7 onMouseOver...................................................................................... 43 
7.6.8 onSubmit ........................................................................................... 44 
7.6.9 onSelect............................................................................................. 44 
7.6.10 onMouseDown ................................................................................... 45 
7.7 OUTROS EXEMPLOS............................................................................... 45 
PROPRIEDADES PARA FOLHAS DE ESTILOS CSS............................................... 48 
TABELA DE REFERÊNCIA HTML ......................................................................... 52 
01 – O Básico 
HTML – Lucilia Ribeiro 4
 
O Básico 
 
 
 
“O pior dos problemas da gente é que ninguém tem nada com isso” 
(Mário Quintana) 
 
1.1 PÁGINAS HTML 
Uma home page, conhecida como página Web ou página HTML, é um arquivo texto 
criado com um editor de textos qualquer, como o bloco de notas e gravado com a 
extensão .HTM ou .HTML cujo conteúdo é composto basicamente de textos e códigos 
especiais chamados tags que possibilitam a exibição deste arquivo na Web (Word Wide 
Web) através de um programa especial chamado navegador ou browser. 
Além de texto, este documento pode conter referências para imagens, sons, 
animações e até mesmo vídeos. Pode conter ligações ou links para outras páginas 
armazenadas no micro ou em qualquer outro lugar da internet. Uma página HTML é 
também conhecida como home page quando nos referimos à pagina inicial ou principal 
de um site. 
A linguagem HTML (Hiper Text Makup Language) é bastante simples e tem como 
finalidade básica formatar o texto exibido e criar ligações entre as páginas Web, criando 
assim documentos com o conceito de hipertexto. 
1.2 TAGS 
As tags normalmente são especificadas em pares, delimitando um texto que sofrerá 
algum tipo de formatação. Mas existem várias tags individuais que executam uma ação 
independente de um texto-alvo que sofrerá formatação. 
As tags são identificadas por serem envolvidas pelos sinais de menor e maior “< >”. 
Entre tais sinais são especificados os comandos propriamente ditos. No caso de tags que 
necessitam envolver um texto, a sua finalização deve ser feita usando a barra de divisão 
/, indicando que a tag está finalizando a marcação de um texto. 
1.3 ESTRUTURA BÁSICA DO HTML 
Para que um navegador interprete corretamente o programa, ele deve possuir alguns 
comandos básicos que sempre deverão estar presentes. Um programa HTML possui três 
partes básicas: a estrutura principal, o cabeçalho e o corpo do programa: 
 
<HTML> 
 <HEAD> 
 <TITLE>Minha Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 Já acabou !!!! 
 </BODY> 
</HTML> 
 
1.4 MARCAÇÕES BÁSICAS 
Em um editor de textos convencional, você insere uma quebra ou avança de linha 
toda vez que pressiona a tecla ENTER. Em um programa HTML é necessário colocar um 
comando específico para que o navegador entenda que você deseja mudar de linha, 
começar um novo parágrafo, colocar o texto em negrito, etc. 
Veremos agora algumas marcações tags básicas: 
 
1 
01 – O Básico 
HTML – Lucilia Ribeiro 5
1.4.1 TÍTULOS 
Esse é o texto que aparece na barra de título do seu navegador. Fica dentro do 
cabeçalho no programa HTML. 
 
<TITLE>Minha Primeira Página </TITLE> 
1.4.2 CABEÇALHOS 
"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página. 
Existem seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior 
destaque. Cabeçalhos são exibidos em letras maiores e em negrito. O comando para 
inserção do cabeçalho é o <Hn>, onde n pode ser um número de 1 a 6. O atributo align 
pode assumir os valores center (centralizado), right (alinhado à direita), left (alinhado 
à esquerda) e justify (alinhado pelas duas margens): 
 
<Hn align = alinhamento>Texto do Parágrafo</Hn> 
 
EX01.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Minha Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 <H1>Este é o maior de todos</H1> 
 <H2 align=center>Agora vai diminuindo,</H2> 
 <H3 align=right>diminuindo...</H3> 
 <H4 align=left>diminuindo...</H4> 
 <H5>até ficar</H5> 
 <H6>bem pequenininho.</H6> 
 </BODY> 
</HTML> 
1.4.3 PARÁGRAFOS 
A marcação <P> é utilizada para definir o início de um novo parágrafo, deixando 
uma linha em branco entre cada parágrafo. A linguagem HTML não reconhece o caracter 
de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os 
clientes Web só reconhecem o início de um novo parágrafo mediante a marcação 
apropriada. Podemos incluir o atributo align da mesma forma como utilizado nos 
cabeçalhos. 
1.4.4 QUEBRAS DE LINHA 
A marcação <BR> faz uma quebra de linha sem acrescentar espaço extra entre as 
linhas. Veja a diferença do uso de <P> e <BR> no exemplo a seguir: 
 
EX02.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Minha Primeira Página </TITLE> 
 </HEAD> 
 <BODY> 
 <H1>Utilizando p</H1> 
 Vamos separar esta sentença com marcação de parágrafo.<p> Para ver a diferença. 
 <H1>Utilizando br</H1> 
 Diferença quando separamos duas linhas utilizando<br> a marcação de quebra de 
linha<br> Deu pra notar? 
 <P align=right>Parágrafo alinhado à direita 
 </BODY> 
</HTML> 
01 – O Básico 
HTML – Lucilia Ribeiro 6
1.5. COMANDOS DE ESTILO 
Assim como no editor de textos, você pode criar uma série de efeitos no texto, 
alterando a forma ou tipo de fonte. Todos os comandos que alteram o estilo do texto são 
do tipo contêiner ou liga-desliga, ou seja, precisam ser especificados em pares, 
marcando o início e o fim do texto que sofrerá a formatação. 
 
EX03.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Testando Estilos de Texto</TITLE> 
 </HEAD> 
 <BODY> 
 Texto em <B>Negrito</B><BR> 
 Texto em <I>Itálico</I><BR> 
 Texto em <B><I>Negrito e Itálico</I></B><P> 
 Texto <U>Sublinhado</U><BR> 
 Texto em estilo <STRONG>Strong</STRONG><BR> 
 Texto em estilo <TT>Typewriter</TT><P>