Rótulos HTML e Elementos

Prévia do material em texto

DIGICAD Informática e Consultoria Ltda. 
Av. Lucas Nogueira Garcez,990 - Jd. do Mar - SBC - FONE : 4121-6166 
 E-mail ABC: cursos@digicad.com.br 
Home Page: www.digicad.com.br 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DIREITOS AUTORAIS ADQUIRIDOS PELA DIGICAD INFORMÁTICA E 
CONSULTORIA LTDA. PROIBIDA A REPRODUÇÃO DOS TEXTOS 
ORIGINAIS, MESMO PARCIAL, POR QUALQUER PROCESSO, SEM 
PRÉVIA AUTORIZAÇÃO DA DIGICAD INFORMÁTICA E 
CONSUTORIA LTDA 
Elaboração: Flávio Campos Marques 
Revisão: Marcelo Lorenzão
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 1 
 
INDICE 
 
O que são rótulos HTML? .................................................................................. 2 
O Elemento ......................................................................................... 3 
O Elemento ......................................................................................... 4 
O Elemento ......................................................................................... 5 
Acentuação ........................................................................................................ 9 
Listas Descritivas ............................................................................................. 11 
Rótulos para alinhamento do texto com a imagem ......................................... 14 
O rótulo de uma imagem ou cor de fundo é: .................................................... 15 
Ligações entre os Documentos e Informações - LINKS................................... 16 
Ponteiros para a Internet .................................................................................. 18 
Âncoras para a Internet em HTML ................................................................... 20 
Exercício 1........................................................................................................ 22 
FRAMES .......................................................................................................... 24 
Exercício........................................................................................................... 27 
Formulários (FORM) ........................................................................................ 28 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 2 
 
O que são rótulos HTML? 
 
Para um browser apresentar uma página ele deve ler um arquivo texto (.html, 
.htm) 
e procurar por códigos especiais ("tags") que são marcados entre os símbolos 
(). 
Esses elementos são os comandos de formatação da linguagem. A maioria das 
tags têm sua abertura e fechamento. O formato geral para uma rótulo HTML é: 
 
 ... 
 
Isso é necessário porque as tags servem para definir a formatação de uma 
porção de texto, e assim marcamos onde começa e termina o texto com a 
formatação especificada pela etiqueta. 
 
A estrutura geral de um documento HTML apresenta os seguintes elementos: 
 
 
Título do Documento 
 
texto, 
imagem, 
links, 
... 
 
 
 
As tags HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever 
, , , , ... 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 3 
 
O Elemento 
 
 contém informações sobre o documento; o elemento define 
um título, que é mostrado no alto da janela do browser, por exemplo: 
 
Digicad Informática Home-Page 
 
 
Todo documento WWW deve ter um título; esse título é referenciado em 
buscas pela rede, dando uma identidade ao documento. 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 4 
 
O Elemento 
 
O Elemento META pode ser usado para descrever as propriedades do 
documento (ex: autor, data de expiração, lista de chaves, etc.) e designar 
valores para essas propriedades. 
 
Esse elemento não tem normas definidas, isto é, dependendo do browser 
usado ele pode ter outras características além do padrão. 
 
Alguns exemplos: 
 
 
 
Usado para definir o nome do autor e a localidade de acordo com a RFC1766 
(ftp://ds.internic.net/rfc/rfc1766.txt). 
 
 
 
Usado para redirecionar uma página, por exemplo, a página da Digicad 
Informática estava localizada em http://www.nutecnet.com.br/digicad e foi 
mudada para http://www.digicad.com.br . 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 5 
 
O Elemento 
 
O texto contido em é mostrado na janela principal do browser, 
contendo o texto que será apresentado ao leitor. 
 
 pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros 
documentos, e imagens. 
 
Obs.: Também faz parte do corpo (body) dos documentos HTML, comentários 
do autor da(s) página(s), como seu nome, data da última atualização, tópicos 
que serão integrados futuramente, etc. 
 
A sintaxe é como segue: 
 
 
 
Exemplo: 
 
 
 
Como exemplo de rótulos, o título desta seção usa um header (cabeçalho) que 
é como o seguinte: 
 
 Digicad Informática Home-Page 
 
 
Este rótulo diz a um browser WWW para apresentar o texto "O que são rótulos 
HTML?" no estilo do cabeçalho de nível 3 (h3). Rótulos HTML podem dizer a 
um browser para dar características visuais a um texto, como negrito, itálico, 
transformá-lo em um cabeçalho; ou para criar ligações para outros 
documentos. É importante notar que o rótulo de término, , 
contém o caracter / "barra", indicando que é o término de um atributo. Muitos 
rótulos possuem pares desta forma. Se você esquecer da barra ou do rótulo de 
término como um todo, o browser continuará usando o atributo pelo resto do 
texto no documento, produzindo resultados indesejáveis. 
 
 
Agora que já vimos alguns conceitos de HTML vamos abrir o FrontPage para 
criar nossa primeira página. 
Quebra de Parágrafo 
 
O browser ignora os Carriage Return/Line Feeds digitados no editor de texto. 
Mas, sempre que o browser vê um rótulo de parágrafo, ele insere uma linha em 
branco e inicia um novo parágrafo. O código HTML para forçar uma quebra 
destas é: 
 
Este rótulo é especial e não requer um rótulo de terminação; você não usa: 
 
 
Você pode usar as seguintes opções de alinhamento: 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 6 
 
 
 - Centralizado 
 - à direita 
 - à esquerda 
 
OBS: Esses alinhamentos também podem ser usados na tag 
Horizontal Rule (Régua Horizontal) 
 
Para separar seções principais de uma página WWW, use a Régua Horizontal 
ou seja, o rótulo HR. Isto inserirá uma linha reta, horizontal. O formato HTML 
para o Horizontal Rule é: 
 
 
 
A Régua Horizontal pode ser utilizada com alguns atributos: 
 
 
 
Onde a largura pode ser definida em pixels (width=100 por exemplo) ou em 
porcentagem do tamanho horizontal da tela (width=30% por exemplo). 
 
Exemplo: 
 
 
 
Uma linha mais sólida pode ser criada usando o atributo noshade junto com o 
hr, como no exemplo: 
 
 
 
Textos preformatados 
 
O tipo de caracter, o espaço, o tab e o return podem influenciar a apresentação 
de uma página ou de parte dela. A solução é a pré-formatação. 
 
Nós já vimos que, por default, um browser WWW ignora espaços extras e 
caracteres de retorno de carro (CR). Entretanto, existem instâncias onde é 
importante controlar estes aspectos de layout de página. Nesta lição, o 
exemplo será a inclusäo de uma tabela de texto com alinhamento por colunas. 
Orótulo de preformato instrui seu browser para apresentar o texto exatamente 
como escrito no documento HTML, incluindo espaços e retornos de carro. Os 
browsers normalmente apresentam tal texto como espaço simples. Um 
exemplo de rótulo preformatado: 
 
 
 
 Este texto está identado em 5 espaços. 
 Usando Carriage Return para saltar 
 para 
 uma 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 7 
 
 nova 
 linha. 
 
 Aqui nós 
 usamos 
 espaços para 
 criar uma 
 tabela texto. 
 
 
Sem os rótulos e , o mesmo HTML produziria: 
 
 
 Este texto está identado em 5 espaços. Usando Carriage Return para saltar 
para uma nova linha. Aqui nós usamos 
 espaços para criar uma tabela texto. 
 
 
Com o rótudo , é interessante se o editor de texto que você usa pode 
apresentar o texto em uma fonte mono-espaçada (tal como "courier"); se não 
você terá que contar os espaços e caracteres para alinhar textos em colunas. 
 Ex : 
 
 
 Cidade Distância (Km) 
 -------- -------------- 
 São Paulo 535 
 Curitiba 135 
 S. Francisco do Sul 45 
 Ubatuba 57 
 Enseada 63 
 Barra do Sul 40 
 Barra Velha 45 
 Piçarras 60 
 Itajaí 88 
 Blumenau 130 
 Bal. Camboriú 92 
 Itapema 102 
 Lages 337 
 Itapoá 80 
 São Joaquim 458 
 Imbituba 270 
 Laguna 300 
 Caxias do Sul 568 
 Porto Alegre 700 
 São Bento do Sul 75 
 Rio Negrinho 90 
 Campo Alegre 60 
 Jaraguá do Sul 51 
 Florianópolis 184 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 8 
 
 Brusque 117 
 Pomerode 71 
 Assunção 1135 
 Montevidéo 1550 
 Buenos Aires 1950 
 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 9 
 
Acentuação 
 
Devemos observar que nem todos os computadores do mundo estão 
configurados para o padrão de acentuação portuguesa, sendo assim, um 
documento feito no Brasil pode não ser visto corretamente por alguém no 
Canadá pois as letras acentuadas s serão substituídas por outros caracteres. 
 
Por exemplo: 
 
A palavra Não pode ficar assim Nγo . 
 
 
O conjunto de caracteres definido pela ISO chamado Latin 1 é o padrão 
utilizado pelo WWW para acentuação e caracteres além-ASCII. ASCII, como se 
sabe, é um padrão de codificação de caracteres de 7 bits, o que não permite 
apresentar todos os caracteres necessários para a língua portuguesa. O 
padrão ISO Latin 1 (ISO IS-8859-1) é um 
padrão de 8 bits, o que aumenta a capacidade de representação de caracteres. 
 
Estes caracteres especiais e acentos são marcados em HTML como: 
 
 &xxxx; 
 
onde XXXX é o nome do código para o caractere especial que se deseja 
apresentar. 
 
O HTML permite que caracteres especiais sejam representados por sequências 
de escape, indicadas por três partes: um “&” inicial, um número ou cadeia de 
caracteres correspondente ao caracter desejado, e um “;” (ponto-e-vírgula) 
final. 
 
 
Por exemplo, a palavra História deverá ser escrita assim: 
 
 História 
 
Onde ó representa o caracter "o", minúsculo, acentuado com o acento 
agudo ("acute"). Desta forma, todos os acentos e caracteres especiais que são 
extra-ASCII devem ser construídos baseados neste esquema. Veja outros 
exemplos: 
 
 
Entidade Caracter Entidade Caracter 
 
á á Á Á 
â â Â Â 
à à À À 
ã ã Ã Ã 
ç ç Ç Ç 
é é É É 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 10 
 
ê ê Ê Ê 
í í Í Í 
ó ó Ó Ó 
ô ô Ô Ô 
õ õ Õ Õ 
ú ú Ú Ú 
ü ü Ü Ü 
 
 
Como vemos, as sequências de escape são sensíveis à caixa. 
 
Na World-Wide Web, os acentos da Língua Portuguesa chegam a travar os 
browsers de usuários em outros países, que usam um conjunto de caracteres 
diferentes do ISO Latin 1 - apesar do ISO Latin 1 ser padrão na WWW. 
A última versão do Netscape permite que se escolha a codificação adequada 
ao conjunto de caracteres relativo aos documentos a serem recuperados. Mas 
para garantir a interpretação apropriada de um documento, pode-se inserir uma 
indicação do esquema de codificação, através do campo: 
 
 
 
A referência completa dos caracteres ISO Latin 1 pode ser encontrada em 
"http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html". Uma referência 
local, não completa, dos caracteres ISO está aqui. 
 
Seqüências de Escape HTML 
 
As marcações de acentuação são exemplos de uma classe geral de códigos 
que são chamados de Seqüências de Escape. Na digitação de HTML, você 
pode ter se perguntado: O que fazer se eu preciso usar os caracteres (maior que)? 
Estes dois caracteres, mais o & (ampersand/e-comercial) tem significados 
especiais em HTML e não podem ser usados como caracteres comuns de 
texto. Ao invés, devem ser usadas seqüências de escape para consegui-los: 
 
Entidade Caracter 
 
< 
& & 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 11 
 
Listas Descritivas 
 
 
Diferentemente dos outros tipos de listas, a lista descritiva constrói suas 
entidades com um padrão de identificação, ao invés de usar números ou 
bullets. 
 
A sintaxe do rótulo de uma lista descritiva é: 
 
 
 título1 
 descrição do título1 
 título2 
 descrição do título2 
 : 
 : 
 : 
 títuloN 
 descrição do títuloN 
 
 
 
Os rótulos .... ; incluem pares alternativos de títulos de descrição 
e descrições destes títulos . Um browser WWW irá gerar a lista com cada 
descrição de título identada para deslocar ela de seu respectivo título. 
 
Desta forma, o exemplo acima irá ser assim interpretado por um browser 
WWW: 
 
 título1 
 descrição do título1 
 título2 
 descrição do título2 
 : 
 : 
 títuloN 
 descrição do títuloN 
 
 
O Formato Gráfico do WWW 
 
Existem muitos diferentes formatos de arquivos para gráficos em computador. 
O modo que browsers WWW trabalham é que os códigos HTML indicam a 
localização de um arquivo gráfico em um formato que pode ser interpretado por 
diferentes tipos de computadores. 
O principal formato gráfico que uma página WWW pode apresentar dentro de 
um documento é o GIF (Graphics Interchange Format). Um arquivo GIF contém 
a informação sobre a imagem de modo compactado (reduz o tamanho do 
arquivo). 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 12 
 
Vários programas gráficos possuem internamente as facilidades de salvar 
arquivos de imagens no formato GIF. Além disso, diversos programas 
shareware permitem converter de outro formato para GIF e vice-versa. 
Atualmente, os browsers também suportam o formato JPEG (JointPhotographic Experts Group), que é um mecanismo de compressão de 
imagens padronizado e, apesar de perder qualidade no processo de 
compressão/descompressão, é bem mais compacto do que o formato GIF. 
Outro ponto a favor do JPEG é que a Unisys, proprietária da patente intelectual 
do algoritmo de compactação embutido no padrão GIF, está ameaçando cobrar 
royalties pelo uso do mesmo, enquanto JPEG é um padrão de comitê. No 
ambiente DOS, pelas suas limitações o JPEG é escrito como JPG. 
 
Pontos a considerar quando se usa gráficos 
 
Logo que se começa a desenvolver páginas WWW, se torna necessário 
trabalhar com diversos programas gráficos, com funções distintas: criação, 
manipulação, conversão, etc. Se seus documentos incluem gráficos, mantenha 
estes pontos em mente: 
 Grandes e numerosas imagens podem parecer ótimas em um computador 
topo de linha e ligados a redes de alta velocidade, mas poderá frustar usuários 
que irão esperar por imagens sendo enviadas através de linhas lentas e serem 
apresentados em monitores com pouca resolução e poucas cores. Manter as 
imagens pequenas (arquivos menores que150 Kb, p.ex.) é, então, uma boa 
idéia. 
Ao invés de apresentar todas as imagens em uma página WWW, mantenha-as 
lincadas como imagens externas que são carregadas se e quando o usuário 
clicar em um item do hipertexto. 
 Uma única imagem pode aparecer várias vezes em um documento WWW 
com pouco delay adicional cada vez que você usa aquela mesma imagem. 
 
Rótulos HTML para Gráficos Embutidos 
 
Uma imagem "inline" é aquela que aparece junto com o texto de uma página 
WWW. O formato HTML para o rótulo de uma imagem embutida é: 
 
 
 
onde nome_arq é o nome de um arquivo GIF/JPG no mesmo diretório do seu 
documento HTML. Por "embutida" ou "inline" entende-se que o browser 
apresentará a imagem juntamente com o texto. 
Para forçar uma imagem para aparecer em uma linha separada, simplesmente 
insira um rótulo de parágrafo antes do rótulo de imagem: 
 
 
 
Também é possível controlar como o texto adjascente à imagem se alinha à 
figura, pela inclusão do modificador aling. Reduza e expanda a janela do seu 
browser para ver o que acontece com a linha de texto em relação à figura. 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 13 
 
 Insira uma imagem e escreva um texto descrevendo essa imagem, 
mude as propriedades e verifique as mudanças na guia “Preview” e o HTML 
fonte na guia “HTML” 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 14 
 
Rótulos para alinhamento do texto com a imagem 
 
 
 
 
 
 
 
 
 
 
 
 exemplo teste 
 
 
Imagem ou Cor de Fundo 
 
Uma imagem de fundo (background) é aquela que aparece por trás do texto e 
das demais imagens de uma página WWW. Dependendo das cores principais 
das imagens inline existentes na página, e da própria cor dos caracteres de 
texto, a escolha pode variar entre backgrounds de diferentes tonalidades. 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 15 
 
O rótulo de uma imagem ou cor de fundo é: 
 
 
 
onde nome_arq é o nome de um arquivo GIF/JPG no mesmo diretório do seu 
documento HTML. 
 
 
 . . . 
 
Onde rr (red), gg (green) e bb (blue) são valores em hexadecimal (de 00 até 
FF) que definem uma cor. 
 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 16 
 
Ligações entre os Documentos e Informações - LINKS 
 
 
O poder do WWW é a habilidade de criar links (ligações) hipertexto para outras 
informações. Estas outras informações podem ser outras páginas WWW, 
gráficos, sons, cargas de programas, conteúdo de servidores diversos, 
iniciação de uma conexão de login com um computador remoto, conexão a um 
site de ftp anônimo etc. O WWW usa um esquema de endereçamento 
conhecido como URL, ou Uniform Resource Locator (Localizador Uniforme de 
Recurso), para indicar a localização de ítens de informação (recursos) 
unicamente por toda a Internet. Estes links hipertexto, que são sublinhados em 
azul pela maioria dos browsers, são conhecidos como Âncoras. 
 
Links para arquivos locais 
 
Neste primeiro passo de "ancoramento" será criado um link hipertexto para um 
segundo documento HTML. Estes links são chamados "locais" porque eles 
residem no mesmo diretório do documento de trabalho. 
A âncora mais simples é aquela que abre outro arquivo HTML que reside no 
mesmo diretório que o presentemente sendo apresentado no browser. 
A rótulo HTML para fazer isto é: 
 
 texto que corresponde ao link 
 
O nome_arq deve ser um arquivo texto HTML. O texto que aparece após o 
primeiro > e antes dos símbolos de fechamento serão o ponto de ligação 
entre textos (hipertexto) que aparece (normalmente) sublinhado e em azul. 
Com um rótulo de âncora, você pode também criar um link para um arquivo 
gráfico que aparecerá em uma janela externa. Os gráficos podem ser de 
diversos formatos como GIF, TIFF, JPEG, ou outros. Quando uma âncora é 
selecionada, o arquivo gráfico será carregado e o seu browser poderá ou 
apresentar a imagem ele mesmo (se ele "souber como" tratar aquele padrão de 
imagem - GIF e JPEG, p.ex.) ou lançar (disparar) uma aplicação externa (que 
saiba tratar o arquivo) que pode apresentar a imagem em uma janela externa. 
A âncora mais simples é para um arquivo no mesmo diretório do documento 
que está sendo apresentado. O formato para criar um link hipertexto para um 
gráfico é o mesmo do apresentado acima para linkar um documento HTML: 
 
 texto que corresponde ao link 
 
onde nome_arq_de_imagem é o nome de um arquivo de uma imagem 
GIF/JPG/TIFF etc. 
 
Links para sub-diretórios 
 
Os rótulos de âncoras podem também linkar para um documento HTML ou 
arquivo gráfico em um sub-diretório diferente daquele onde está o arquivo que 
contém a âncora. Por exemplo, alguém pode querer manter todas as imagens 
em um diretório especial chamado imagens. 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 17 
 
 
Para tanto, basta alterar os rótulos de âncora para refletir esta situação, como 
por exemplo: 
 
 Estrada Bonita 
 
Outros links 
 
É possível acrescentar links de qualquer parte do texto de um documento 
HTML para outros arquivos. O link pode aparecer dentro de listas ordenadas e 
não ordenadas, nos cabeçalhos de todos os níveis, em textos em negrito, 
itálico, e outros formatos, enfim, não há problemas para incluir links por toda a 
parte do texto. 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 18 
 
Ponteiros para a Internet 
 
Agora é a hora de incluir links para informação disponível na Internet usando o 
esquema de endereçamento criado pelo WWW para escrever rótulos de 
âncoras HTML 
O Uniform Resource Locator (URL)/Localizador Uniforme de Recursos é o que 
o WWW usa para encontrar a localização de arquivos e documentos (e outras 
coisas) nos computadores da Internet. Os browsers apresentam a URL dos 
documentos que estão sendo mostrados na tela. O URL inclui: 
 
um identificador para o tipo de servidor/protocolo 
um endereço Internet; e 
uma rota (path) para o item de interesse. 
 
O URL é o que você precisa para construir um link para o documento HTML 
que você está criando para conectar com alguma outra peça de informação 
disponível na Internet (que são chamadas Recursos/resources). 
 
A estrutura de um URL é simples: 
 
 http://www.digicad.com.br/cursos/FrontPage.html 
 
 ou 
 
 protocolo://nome_do_servidor/caminho/nome_do_arquivoO protocolo ou "esquema" indica o tipo de servidor Internet que está sendo 
acessado, e, por conseqüência, o protocolo que será utilizado neste acesso: 
 
http: Servidor World Wide Web que provê documentos HTML e outros tipos de 
arquivos e informações. "HTTP" é a sigla de HyperText Transfer Protocol 
(Protocolo de Transferência de HiperTexto). 
 
gopher: Um servidor de informações dirigido por menus hierárquicos, que 
representam diretórios e arquivos. 
 
ftp: O Protocolo de Transferência de Arquivos (ftp) da Internet. 
 
telnet: Inicia uma sessão Telnet para logar remotamente em outro 
computador. O browser lança um programa externo de Telnet que tenta se 
conectar ao sítio especificado. 
 
WAIS: Wide Area Information Server - Servidor de Informações indexado, que 
faz busca de documentos por assunto/palavras-chave. 
 
File: Indica um arquivo no seu computador local (winchester, disquete ou 
servidor de rede) 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 19 
 
News: Indica um servidor de Usenet News que pode ser acessado 
remotamente. News provê um sistema para discussão em grupos mundiais 
sobre todos os assuntos, técnicos, científicos ou não. 
 
O protocolo é sempre seguido por :// e o endereço Internet de um computador 
remoto (exceção para file). O endereço pode ser o nome da máquina como ela 
é conhecida pelo DNS ou o número IP da mesma. Então os dois URL's abaixo 
são equivalentes: 
 
 http://www.digicad.com.br 
 
 http://200.240.7.3/ 
 
Se o URL indica um recurso que está na raiz do host especificado, ela pode ou 
não ser terminada por uma barra "/" (alguns servidores exigem esta barra, 
outros não). Se você está apontando para um subdiretório ou para um arquivo, 
deve ser acrescentada a rota (path) exata para aquele item. 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 20 
 
Âncoras para a Internet em HTML 
 
O estabelecimento de um Link para um sítio na Internet combina o que foi 
trabalhado anteriormente nas lições Links para arquivos locais com o que nós 
aprendemos sobre URLs ). O formato HTML completo de um link para um ítem 
na Internet e: 
 
 Texto do link 
 
onde URL é a URL completa ou o endereço para o ítem que o texto está 
apontando. Texto do Link é o hipertexto que aparecerá sublinhado (geralmente 
em azul) em seu browser WWW. Quando um usuário clica no hipertexto, o 
browser WWW irá apontar para o sítio Internet indicado pelo URL. Lembre-se 
que um URL pode ser um link para outro servidor WWW, para um servidor 
Gopher, um sítio FTP ou qualquer arquivo de texto, gráfico, som ou vídeo em 
um servidor. 
 
Âncora Nomeada 
 
Uma âncora nomeada é um marcador de referência invisível para uma seção 
particular em um documento HTML. Ela pode ser usada para fazer um link para 
uma seção diferente dentro da mesma página ou para uma seção marcada em 
outra página. 
Por exemplo, pode-se criar uma marca invisível, chamada "Autocad", que 
referencia o cabeçalho "Cursos de Autocad". Então escrevemos um link que 
conecta com esta seção do documento. Quando você clicar sobre este link 
para aquela âncora nomeada, o seu browser WWW irá deslocar a página, de 
modo que o cabeçalho anteriormente referenciado fique no topo da tela do 
browser. 
 
O rótulo para criar uma âncora nomeada é: 
 
 Texto que será referenciado 
 
Se você quiser criar um link hipertexto. Para criar uma âncora nomeada, use 
esta sintaxe: 
 
 Texto para atuar como hipertexto 
 
O símbolo "#" instrui o browser WWW para que ele procure por uma âncora 
nomeada chamada "xxxxx" através do documento HTML. Quando você 
seleciona ou clica sobre o hipertexto, o browser trás a parte do documento que 
contém a âncora nomeada para o topo da tela. 
 
 
Adicionando Links para uma Âncora Nomeada em Outro Documento 
 
Você pode criar um link que aponta para uma seção em outro documento 
HTML, marcado por uma âncora nomeada. 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 21 
 
A rótulo é: 
 
 Texto do link 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 22 
 
Exercício 1 
 
 
 
 
 
Criando uma tabela 
 
A formatação de tabelas faz parte a partir da versão 3.0 da linguagem HTML. 
 
O elemento delimita uma tabela e a espessura de sua 
borda: 
 ... 
 
Dentro dessa formatação, inserimos as linhas e elementos da tabela: 
 
 ... 
 define um cabeçalho para a tabela 
 ... 
 delimita uma linha 
 ... 
 delimita um elemento da tabela 
 
 
Coluna 1Coluna 2 
linha1, coluna 1 linha 1, coluna 2 
linha 2, coluna 1linha 2, coluna 2 
 
 
 
Linha1, Coluna1 Linha1, Coluna2 
Linha2, Coluna1 Linha2, Coluna2 
 
É possível dividir colunas e linhas, através dos atributos colspan (para colunas) 
e rowspan (para linhas): 
 
 
 
 Colunas 1 e 2 
 
 
 linha1, coluna 1 
 linha 1, coluna 2 
 
 
 linha 2, coluna 1 
 linha 2, coluna 2 
 
 
 3 linhas 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 23 
 
 uma linha 
 
 
 duas linhas 
 
 
 tres linhas 
 
 
 
Neste exemplo, temos que o cabeçalho Colunas 1 e 2 compreende duas 
colunas (colspan=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas 
(rowspan=3): 
 
Colunas 1 e 2 
Linha 1 Coluna 
1 
Linha 1 Coluna 2 
Linha 2 Coluna 
1 
Linha 2 Coluna 2 
Uma linha 
Duas linhas 
Tr
es
 
Li
nh
as
 
Três linhas 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 24 
 
FRAMES 
 
Rótulo: 
 
Frames dividem a página Web em múltiplas regiões roláveis, permitindo que 
diferentes documentos HTML sejam mostrados em uma única janela. Frames 
podem ser apontados por outros URLs na mesma página, compartilhar dados, 
mostrar tabelas de conteúdo e informações de copyright, etc. 
O código HTML que inicializa uma página baseada em frames é bem pequeno, 
seu único propósito vem ser o de dividir a página em regiões e ler documentos 
nestas áreas. Dois tags distintos são necessários: 
 
, usado para especificar exatamente como os frames vão 
aparecer na página Web. 
 
, que define os vários aspectos de cada frame, incluindo qual URL 
ler. 
 
Um parâmetro COLS= "parâmetro" colocado junto com o tag 
divide a página verticalmente, enquanto um comando ROWS="parâmetro" 
quebra a página horizontalmente. Por exemplo, para dividir a página em duas 
metades iguais (um frame à esquerda e um à direita) você pode entrar o tag 
. 
Frames, por padrão, são vazios e infuncionais. Você deve apontar cada frame 
para um documento usando o identificador . O frame 
físico referenciado pelo comando SRC depende da localização do tag 
 corrente. Por exemplo, se o segundo FRAME SRC com um 
 aponta para uma determinada URL, então esta URL deve ser 
lida no segundo frame. 
 Para uma lista completa de atributos disponíveis para ambos os tags 
 e , veja abaixo. Note que um documento HTML de 
frame não tem BODY, e não tem tags normalmente associados com o 
identificador , que aparece antes de . 
 
Sumário de comandos sobre FRAMES 
 
 Dados do frame Divide a 
página em frames, onde dados do frame guarda os tags e 
, enquanto parâmetro é um dos de seguintes: 
 
ROWS "lista dos valores da altura" - específica o número e altura das linhas 
de frame (horizontal) que dividirão a página. 
 
COLS "lista dosvalores da largura" - indica o número e largura das colunas 
de frame (vertical) que dividirão a página. 
 
A lista do valores da altura e largura seguem a mesma sintaxe: uma lista 
separada por vírgulas, com o número total de itens indicando o número 
desejado de linhas e colunas de frame. O formato de cada ítem na lista é o 
seguinte: 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 25 
 
 
Valor inteiro: Indica o tamanho, em pixels, do frame (se não for usado em 
conjunto com os valores abaixo, o Browser irá sobrepor este valor para forçar o 
frame a preencher toda a janela). 
Valor percentual: Indica o tamanho percentual do frame (se a percentagem 
total não for igual a 100%, o Browser irá forçar os frames a preencher toda a 
janela). 
 
Por exemplo: divide a página em dois 
frames mesmo tamanho, um à esquerda e um à direita. 
 
 
 
 
 
Valor relativo: Implícito com o *, valores relativos especificam o tamanho de 
cada frame em relação aos itens restantes na lista. Por exemplo: 
 
 cria uma fração total de 3 (1+1+1), dividindo a 
página igualmente em três linhas cada uma tomando 1/3 do espaço: um frame 
no topo, um no meio e um embaixo. 
 cria uma fração total de 3 (2+1), dando 2/3 do 
espaço para o frame do topo e 1/3 para o de baixo. 
 cria uma fração total de 7 (3+1+2+1), dando 
3/7 para a linha do topo, 1/7 para a segunda, 2/7 para a terceira e 1/7 para a 
mais de baixo. 
 
Em geral, é fácil usar percentagens. Misturar os três tipos de valores também é 
permitido. Por exemplo: 
 
 destina 100 pixels para a coluna mais a 
esquerda e 100 para a mais a direita, enquanto o restante do espaço fica para 
coluna do meio. 
 destina 20% do espaço para o frame da 
esquerda e dá o espaço restante para o da direita. Um valor igual a 80% 
colocado no lugar do * é equivalente. 
 
: Define os atributos de documento para cada frame, 
onde parâmetros são: 
 
SRC "URL" especifíca o documento/URL a ser carregado neste frame. Sem 
SRC, o frame é branco (e não será funcional). 
NAME " nome da janela " indica o nome deste frame, assim ele pode ser 
apontado por outros documentos em frames separados, através do 
atributo TARGET. 
MARGINWIDTH " valor " controla a largura da margem do frame em pixels. 
SCROLLING " yes/no/auto " define tanto se o frame deve ter uma barra de 
rolagem ou não. Auto instrui o Browser a colocar barras de rolagem se 
necessário. 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 26 
 
NORESIZE se presente, indica que o frame não pode ser redimensionado 
pelo usuário. Util na implementação de um frame escondido. 
 
 Código HTML alternativo : O tag NOFRAME 
provê um conteúdo alternativo visível por clientes que não são capazes de 
mostrar frames (Internet Explorer 2, Netscape 1 etc) . O Browser irá ignorar 
todos os tags e dados contidos entre o início e o fim dos. 
 
Referenciado frames 
 
Frames podem ser referenciados usando o comando TARGET. Colocando 
TARGET="nome_da_janela" na âncora que será lido no frame chamado 
nome_da_janela. 
Outro importante objeto de documento JavaScript útil para frames é 
location.href, que deixa você alterar dinamicamente a localização da janela ou 
frame atual. Um uso particularmente poderoso deste objeto é fazer o frame 
apontar para si mesmo, permitindo ao código JavaScript gerar uma página 
diferente várias vezes. Isto é feito simplesmente digitando 
location.href=location.href. Quando encontrado, isto provoca a recarga e 
reexecução da página. O problema é, todos os dados na página serão 
resetados todas as vezes que o URL recarregar. Obviamente, se você planeja 
manter um rastro de variáveis entre os frame sets, um esquema diferente deve 
ser usado. 
 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 27 
 
Exercício 
 
 Criar página com dois frames no segunte formato: 
 
 
 
 
 Do lado esquerdo deve conter um menu com os tópicos principais da 
página, e ao se clicar em um desses tópicos, ele será carregado do lado direito. 
 
Arquivos que deverão ser criados: 
 
Frameset.html arquivo de definição dos frames 
Frame_esquerdo.html arquivo do Frame do lado Esquerdo. 
Página1.html 1° arquivo a ser carregado no frame direito 
Página2.html 2° arquivo a ser carregado no frame direito 
Página3.html 3° arquivo a ser carregado no frame direito 
Página4.html 4° arquivo a ser carregado no frame direito 
Página5.html 5° arquivo a ser carregado no frame direito 
Página6.html 6° arquivo a ser carregado no frame direito 
 
Link para página 1 
Link para página 2 
Link para página 3 
Link para página 4 
Link para página 5 
Link para página 6 
 
Conteúdo de uma das páginas 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 28 
 
Formulários (FORM) 
 
Um FORM é uma GUI (Graphical User Interface) com campos texto, áreas de 
edição, botões, checkboxes, menus pull-down, listas que permitem a rolagem, 
etc... 
 Os FORMS são o recurso que faz com que as páginas WWW fiquem 
interativas. As páginas podem ser lindas e glamorosas mas, sem FORMS, 
apenas servem para uma simples leitura. Através dos FORMS o usuário pode 
lhe enviar uma resposta seguida por um comentário pessoal, pode especificar 
critérios de pesquisa em base de dados ou ainda fazer uma escolha entre 
várias alternativas. 
Páginas interativas são criadas através da combinação de campos de entrada 
de dados com parágrafos, textos pré-formatados, tabelas e listas. Estes 
recursos combinados fornecem uma grande flexibilidade na hora de construir 
nossas páginas interativas. 
 
O HTML suporta os seguintes tipos de campos: 
 
Campos de texto simples 
Campos de texto multi-line (edição de várias linhas de texto) 
Campos para entrada de senhas 
Botões de Rádio (Radio buttons) 
Checkboxes 
Menus de escolha única 
Menus de múltipla escolha 
Botões de "limpeza" (Reset) para resetar os campos do FORM para seus 
valores iniciais 
Botões de submissão (Submit) para enviar o conteúdo do FORM 
Campos invisíveis para manter informações 
 
Como eu obtenho os dados do FORM ? 
 
Existem dois métodos (GET e POST) que podem ser usados para acessar os 
dados de seus FORMs. Dependendo de qual método você usar, você irá 
receber os resultados codificados dos FORMs de maneiras diferentes. 
 
Método GET 
 
 A informação de um FORM que usa o método GET é concatenada no final 
do URL especificada na cláusula ACTION. O seu programa CGI irá receber as 
informações codificadas da entrada do FORM na variável de ambiente 
QUERY_STRING. 
 
Método POST 
 
 Este método transmite toda as informações de entrada do FORM para o 
script CGI através da entrada padrão, ao invés de usar variável de ambiente. 
Este método é o mais usado e nós o recomendamos. 
 
Como eu decodifico os dados dos FORMs ? 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 29 
 
 
Quando você escreve um FORM, cada item de entrada de dados possui um 
rótulo NAME, ao qual associamos o nome do item ou campo de entrada. 
Quando o usuário entra com dados em um destes campos, estes dados são 
atrelados ao nome do campo. A cada resposta do usuário a um item de entrada 
dá-se o nome de "valor". 
Os dados de um FORM são formados por uma coleção de pares nome=valor, 
separados pelo caracter "&"; onde nome é o nome do campo e valor é a 
informação que foi digitada ou selecionada pelo usuário. Cada um destes pares 
são codificados (URL encoded), de forma que espaços são substituídos por 
sinal de "+" e alguns caracteres são codificados em 
hexadecimal, para permitir a transmissão sem problemas de interpretação 
indevida de caracteres. 
Como se torna inconveniente tratar com os dados codificados,vários 
programas foram desenvolvidos para extrair os dados de interesse de sua 
forma codificada. Existem programas deste tipo para as mais variadas 
linguagens usadas para construir scripts. 
 
Definindo FORMS 
 
A sintaxe para a inicialização de um FORM é: 
 
 
 
 METHOD Indica o modo que os dados serão fornecidos ao servidor. 
Existem dois modos para acessar seus FORMs (GET e POST). Dependendo 
qual modo você usar, você irá receber os resultados codificados de formas 
diferentes. 
 
 ACTION Informa o URL que será chamado pelo FORM. Este URL quase 
sempre apontará para um script CGI, que irá tratar das informações do FORM. 
 
Tipos de FORMs 
 
 
Campos de Texto Simples 
 
 Os campos de texto simples são usados para entrada de pequenos 
strings, como nomes de pessoas, números e datas. 
 
A sintaxe para a criação de uma entrada de dados simples é: 
 
 
 
onde: 
 
 TYPE Define o tipo da entrada ("string" no caso acima) 
 NAME Define a variável onde será armazenado o texto digitado 
 SIZE Define o tamanho do campo. 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 30 
 
A sintaxe para a criação de uma entrada de dados com valor inicial e 
tamanho máximo definido é: 
 
 
 
onde: 
 MAXLENGTH Define o número máximo de caracteres do campo. Este 
atributo pode ser utilizado em qualquer tipo de entrada de dados. 
VALUE Define o valor inicial do campo 
 
 
Campos de Texto Multi-Line 
 
Campos de texto multi-line são usados para entrada de cadeias de strings. 
Neste tipo de campo podemos definir o tamanho da região de edição que o 
usuário poderá usar. 
 
A sintaxe para a criação deste tipo de FORM é: 
 
 
 
onde: 
 
NAME Define a variável onde será armazenado o texto digitado 
COLS Define o número de colunas da região de edição que serão visíveis 
na tela 
ROWS Define o número de linhas da região de edição que serão visíveis na 
tela 
 
 
texto inicial 
 
onde: 
 
texto inicial define o texto que aparecerá na região de edição inicialmente 
 
 
Campos para Entrada de Senhas 
 
 Este campo é igual ao campo de entrada de texto simples, exceto que 
os caracteres digitados não serão ecoados na tela. Ao invés de aparecerem na 
tela os caracteres digitados, serão mostrados asteriscos no lugar. 
 
 
 
 A sintaxe para a criação de uma entrada de senhas é: 
 
 
 
 onde: 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 31 
 
 
 TYPE Define o tipo da entrada ("password" no caso acima) 
 NAME Define a variável onde será armazenado o texto digitado 
 SIZE Define o tamanho do campo. 
 MAXLENGTH Define o número máximo de caracteres do campo. 
 
 
Botões de Rádio (Radio Buttons) 
 
Este tipo de entrada é usada para podermos selecionar uma opção, dentre 
várias disponíveis. Neste caso, apenas uma opção pode ser selecionada. 
Todos os radio buttons do mesmo grupo devem ter um nome de variável 
(NAME) comum. 
Sempre é necessário especificar uma dupla NAME/VALUE para um radio 
button. 
 
 A sintaxe para a criação deste tipo de FORM é: 
 
 descrição 
 
onde: 
 
NAME Define a variável que armazenará o valor da opção selecionada. 
VALUE Define o valor que será adicionado a variável NAME quando esta 
opção for selecionada 
descrição Define o texto que aparecerá ao lado do radio button. 
 
 
 descrição 
 
onde: 
 
CHECKED Inicializa o radio button com o estado selecionado 
 
 
 
Checkboxes 
 
Este tipo de campo pode ser usado com atributos que podem assumir vários 
valores ao mesmo tempo. Neste caso, usa-se um checkbox para cada valor 
opcional, com o nome da variável comum a todos. Um checkbox possui dois 
estados: selecionado e não-selecionado. As opções não selecionadas não 
aparecerão nos dados do FORM. 
 
A sintaxe para a criação deste tipo de FORM é: 
 
 descrição 
 
onde: 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 32 
 
TYPE Define o tipo da entrada. ("checkbox") 
NAME Define a variável que armazenará o valor das opções selecionadas 
VALUE Define o valor que será adicionado a variável NAME quando esta 
opção for selecionada 
descrição - Define o texto que aparecerá ao lado da opção do checkbox. 
 
 
 
 
 descrição 
 
onde: 
 
CHECKED Inicializa a opção como selecionada. 
 
 
 
Menus de Escolha Única 
 
Do mesmo modo que o Radio Button, este tipo de entrada serve para 
selecionar uma opção dentre várias. A diferença básica esta na forma de 
apresentar as opções na tela, mais compacta no caso de menus. 
 
A sintaxe para a criação deste tipo de FORM é: 
 
 
 Item1 
 Item2 
 : : 
 ItemN 
 
 
onde: 
 
NAME Define a variável que conterá o item selecionado da lista. 
OPTION Define os ítens da lista. 
 
 
 
 Item1 
 Item2 
 : : 
 ItemN 
 
 
onde: 
 
SELECTED Define o item que será mostrado de início 
 
 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 33 
 
Menus de Múltiplas Escolhas 
 
Do mesmo modo que o Checkbutton, este tipo de entrada serve para 
selecionar várias entradas de uma lista de opções. Novamente, a diferença 
básica esta na forma de apresentar as opções na tela, mais compacta no caso 
de menus. 
 
A sintaxe para a criação deste tipo de FORM é: 
 
 
 Item1 
 Item2 
 : : 
 ItemN 
 
onde: 
 
NAME Define a variável que conterá o item selecionado no menu 
OPTION Define os ítens do menu 
SIZE Define a quantidade de opções do menu visíveis na janela (se o valor 
de SIZE for menor que o número de ítens do menu, uma barra de rolamento 
aparecerá ao lado da janela). 
MULTIPLE Define que o menu será de múltipla escolha. 
 
 
 
 Item1 
 Item2 
 : : 
 ItemN 
 
 
onde: 
 
 SELECTED Define que o item estará selecionado de início. 
 
 
 
Botão de Limpeza (Reset) 
 
 Este botão, ao ser clicado, permite que todos os campos do FORM 
assumam seus valores iniciais. 
 
A sintaxe para a criação deste tipo de botão é: 
 
 
 
onde: 
 
TYPE Define o tipo de botão a ser utilizado 
Digicad Informática HTML 
Fone: 4121-6166 Reprodução Proibida Pág. 34 
 
VALUE Define o rótulo do botão. 
 
 
Botão de Submissão (Submit) 
 
Este botão, ao ser clicado, permite que todos os dados dos campos do FORM 
sejam enviados para o script CGI especificado pela opção ACTION (do FORM). 
 
A sintaxe para a criação deste tipo de botão é: 
 
 
 
onde: 
 
TYPE Define o tipo de botão a ser utilizado 
VALUE Define o rótulo do botão.