Desenvolvimento de Aplicações WEB
1 HTML
INTRODUÇÃO
Nesta primeira parte da apostila falaremos sobre a linguagem HTML. Podemos dizer que o HTML é a
linguagem mãe. É importante aprendermos o HTML, para poder trabalhar com outras linguagens. O HTML
é responsável pela parte ‘pesada’ do site.
Hoje, existe o XHTML, que veio para substituir o HTML.Você deve se perguntar, por que então eu vou
aprender HTML em vez de aprender logo XHTML? É importante que você aprenda o básico primeiro, a
linguagem XHTML não é tão diferente do HTML, mas é melhor que você conheça o HTML primeiro que
tudo vai ficar mais fácil depois para aprender o XHTML, que é praticamente o HTML modificado, com
maneiras diferentes de fechar as tags etc.
Então, aprenda primeiro pelo HTML e depois faça a comparação e veja as diferenças. Será muito mais fácil
entender o XHTML depois de ter visto o HTML.
Dois termos importantes:
- Client Side: É uma expressão em inglês que traduzida significa Lado Cliente. O Client side é usado para
designar uma aplicação (site, software, plugin, etc) que é executada no computador do usuário e não no
servidor que hospeda a aplicação. Exemplos de algumas tecnologias que são executadas no cliente:
•
•
•
•
•
HTML;
CSS;
Javascript;
Flash;
ActiveX.
- Server Side: É uma expressão em inglês que traduzida significa Lado Servidor. O Server Side é usado
para designar que uma aplicação roda no servidor e não no computador do usuário.
Exemplos de aplicações que são executadas no servidor:
•
•
•
•
Bancos de dados: SQL Server, MySQL, Oracle, etc;
ASP / ASP.NET;
PHP;
JSP;
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
1
1 HTML
HTML não é uma linguagem de programação e sim uma linguagem de marcação de textos (Hyper Text
Markup Language) que é usada na construção de página para a web. A estrutura do HTML é baseada em
tags (marcações).
O que são tags em HTML?
Tags são marcações e são usadas para trabalhar com os diversos conteúdos, como textos, imagens, links,
entre outros.
<p>A tag p é usada para criar parágrafos de textos </p>
<img src=”foto.jpg” />
<a href =”www.colegiotecnicoopcao.com.br”> Colégio Técnico Opção </a>
Nos exemplos acima usamos a tag <p> </p> para criar um parágrafo, <img> para inserir uma imagem e
<a> </a> para criar um link.
HTML é uma linguagem de programação?
Não. HTML não é uma linguagem de programação e sim uma linguagem de marcação de textos.
Qual a diferença entre HTML e XHTML?
O XHTML é uma nova versão do HTML, ele é resultado da mistura entre HTML e XML. Basicamente ele
contém as tags do HTML e as regras do XML.
Quais os pré-requisitos para aprender HTML?
Basta ter navegado na internet e ter usado algum editor de texto. Para um conhecimento mais aprofundado
seria interessante conhecer um pouco de conjunto de caracteres, padrões de internet e funcionamento dos
navegadores.
Quais são os melhores editores para HTML?
Dreamweaver, Expression web e Visual Web Developer para quem gosta de usar um ambiente visual.
Bloco de notas e editores de texto puro para aqueles que gostam de trabalhar com código puro.
Todos os sites usam HTML?
Sim. O HTML é base para qualquer site.
Posso criar um site usando apenas HTML?
Pode, mas não deve. O HTML é responsável pela estruturação da página, isto é, as tags e o conteúdo. O
aspecto visual da página é feito em CSS, logo se você usar apenas HTML seu site funcionará, mas ficará
com um layout não muito agradável e não estará seguindo as regras atuais de desenvolvimento de sites.
Quais as versões do HTML?
Existem diversas versões do HTML. Atualmente as mais usadas são a 4.01 e o XHTML 1.0.
Quem padroniza e controla as versões do HTML?
É um órgão chamado W3C (http://www.w3.org). Este órgão é formado por algumas universidades (MIT nos
EUA, ERCIM na França e Keio no Japão) e empresas privadas, sendo a maioria delas de tecnologia.
O que o HTML tem a ver com os navegadores?
Tudo. O HTML é executado no navegador. Quando você acessa um site qualquer é o seu navegador que
vai buscar o HTML para exibi-lo. Alguns recursos podem não funcionar corretamente em determinados
navegadores.
1.1 Estrutura básica de um documento HTML
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
2
Todo o documento HTML fica contido entre as TAGS: <HTML> e </HTML> e duas seções básicas:
•
•
HEAD: Contém parâmetros de configuração do documento.
BODY: Contém o documento em si.
Exemplo
<html> é a tag de abertura do html.
<head> cabeçalho da página. contém informações adicionais.
<title> é a tag de abertura do título da janela.
</title> tag de fechamento do título da janela.
</head> tag de fechamento do cabeçalho.
<body> corpo da página. aqui ficará a parte principal do seu site.
</body> tag de fechamento do corpo da página.
</html> tag de fechamento do html.
1.1.1 Informações adicionais contidas no cabeçalho: Head
As META TAGS são usadas para colocar informações adicionais em páginas WEB para uso por parte dos
indexadores de paginas (Ex: Google, Yahoo, Altavista, etc). Estas informações podem ser sobre o autor, o
conteúdo, ou como indexar e seguir os links. As META TAGS devem ser colocadas no cabeçalho entre o
<HEAD> e o </HEAD>.
Exemplo:
<html>
<head>
<meta name="robots" content="follow,index">
<meta name="description" content="Esta pagina é um exemplo de Site.">
<title> Minha Página </title>
</head>
</html>
Aqui vamos dar alguns exemplos de META TAGS para uso na criação de páginas. Substitua os textos
entre aspas, após a palavra CONTENT, conforme o caso.
•
INDEXAÇÃO: <meta name="robots" content="[NO]INDEX, [NO]FOLLOW">
A intenção desta tag é informar ao robô de indexação se a página pode ou não ser indexada e se
pode ou não seguir os links nela contidas.
•
DESCRIÇÃO: <meta name="description" content="Bob's personal page">
A intenção desta tag é para que o serviço de indexação possa fornecer ao solicitante uma breve
descrição da pagina (ao invés das primeiras linhas da página).
•
AUTOR: <meta name="author" content="Robert Rice Brandt">
Indicação do autor da página.
•
PALAVRAS CHAVE: <meta name="keywords" content="Professor, Engenharia Eletrica">
Indicação de palavras chave da página.
•
NÃO FAZER CACHE: <meta http-equiv="Pragma" content="no-cache">
Indicação de não colocar no cache do browser, ou seja sempre vai buscar nova página.
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
3
•
FAZER REFRESH AUTOMATICO: <meta http-equiv="Refresh" content="10">
Indicação para fazer refresh da pagina a cada 10 segundos.
•
FAZER REDIRECIONAMENTO AUTOMATICO:
<meta http-equiv="REFRESH" content="3;URL=www.uol.com.br">
Indicação para ficar 3 segundos na pagina atual, depois redirecionar para a pagina indicada.
1.1.2 Informações adicionais contidas no cabeçalho: Body
1.1.2.1 Cores e padrões de Fundo
Algumas propriedades da TAG <Body> </Body>
•
bgcolor=" #FFFFFF ” – Define a cor de fundo da página HTML (fundo branco);
•
background="fundo.jpg" – Define uma figura como fundo da página HTML;
•
text="#CC0000" – Define a cor do texto que aparecerá na página HTML (letras vermelho);
•
link="#0033CC" – Define a cor dos links (azul);
•
vlink="#FFFF00" – Define a cor dos links já visitados pelo usuário (amarelo);
•
alink="#00CC00" – Define a cor dos links ativos (verde);
•
marginwidth="2" – Define a largura da margem da página;
•
marginheight="2" – Define a altura da margem da página;
•
leftmargin="2" - Define a distância da margem esquerda da página;
•
rightmargin="2" - Define a distância da margem direita da página;
•
topmargin="2" - Define a distância da margem superior da página;
•
bottommargin="2" - Define a distância da margem inferior da página;
Exemplo:
<body bgcolor="#FFFFFF" text="#CC0000" link="#0033CC" vlink="#FFFF00" alink="#00CC00"
background="fundo.jpg" marginwidth="2" marginheight="2" leftmargin="1" topmargin="2" rightmargin="3" bottommargin="4">
…
…
…
</body>
1.2 Parágrafos e Quebras de Linha
1.2.1 Tag <P>
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
4
Para forçar o inicio de um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na
segunda linha após o final do parágrafo anterior. O Browser vai sempre avançar uma linha em branco,
posicionando-se na segunda linha seguinte ao comando.
Pode aparecer individualmente <P> ou em par <P> </P>.
Exemplo:
<p> Aqui vai a primeira linha </p>
<p> Aqui vai a segunda linha </p>
<p> Esta linha utiliza apenas a tag individualmente.
<p> E aqui mais uma linha de parágrafo.
A Tag <P> pode utilizar os parâmetros de alinhamento (Align) que pode receber os seguintes valores.
• Left : Alinhamento à esquerda;
• Right: Alinhamento à direita;
• Center: Centralizado;
• Justify : Texto justificado.
Exemplo:
<p align=’center’> Aqui vai a primeira linha centralizada!</p>
<p align=’right’> Aqui vai a segunda linha alinhada à direita</p>
1.2.2 Tag <BR>
O comando <BR> tem como função avançar (quebrar) para a linha imediatamente após aquela em que se
encontra, sem contudo deixar uma linha em branco adicional
Exemplo:
<HTML>
<head> <title> Exemplo com BR </title> </head>
<body>
Aqui está o meu texto na primeira linha <BR>
E aqui o meu texto na segunda linha.
<BR>
Aqui o texto na terceira linha, sem deixar uma linha adicional em branco.
</body>
</HTML>
1.2.3 Tag <HR>
O comando <HR> tem a função de inserir uma linha divisória na posição que foi especificado.
Serve p/ separar assuntos ou tópicos distintos.
Exemplo:
<HTML>
<head> <title> Exemplo com HR </title> </head>
<body>
Texto mostrado na primeira linha
<HR>
Texto mostrado na Segunda linha.
</body>
</HTML>
1.2.4 Aplicando Estilos de Texto
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
5
Você pode criar uma série de efeitos no texto, alterando a forma ou o tipo de fonte. Todos os comandos
que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares,
marcando o inicio e fim do texto que sofrerá a formatação.
As principais tags:
•
•
•
•
•
•
•
•
•
•
Negrito: <b> Texto </b>
Itálico: <i> Texto </i>
Sublinhado: <u> Texto </u>
Strong (similar ao negrito): <Strong> texto </Strong>
Pulsante: <blink> Texto </blink>
TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento regular
BIG <big>texto</big> Aumenta a fonte e aplica negrito
SMALL <small>texto</small> Reduz e altera a fonte
SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo
SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo
Exemplo
<HTML>
<head> <title> Exemplo aplicando estilos de Textos </title> </head>
<body>
<b> Aqui está o meu texto na primeira linha em negrito </b><BR>
<i> E aqui o meu texto na segunda linha em itálico. </i>
<BR>
<u> Aqui o texto sublinhado na terceira linha, sem deixar uma linha
adicional em branco.</u>
<hr>
<b><i>E agora? Negrito e Sublinhado!</i></b>
</body>
</HTML>
1.2.5 Cabeçalhos
Outra forma muito usada para mudar o tamanho da letra e aplicar um efeito como negrito em um texto é o
uso dos comandos <H>. O HTML possui seis comandos, de <H1> até <H6>, que aplicam um tamanho de
fonte diferenciado para o texto que envolver.
Exemplo :
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Texto </H1> maior
Texto </H2>
Texto </H3>
Texto </H4>
Texto </H5>
Texto </H6> menor
A Tag <H> pode utilizar os parâmetros de alinhamento (Align) que pode receber os seguintes valores.
• Left : Alinhamento à esquerda;
• Right: Alinhamento à direita;
• Center: Centralizado;
• Justify : Texto justificado.
Exemplo
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
6
<HTML>
<head> <title> Exemplo aplicando estilos de Textos </title> </head>
<body>
<h1> Aqui... Cabeçalho H1 </h1>
<br>
<h2> E aqui o meu cabeçalho H2 </h2>
<br>
</body>
</HTML>
1.2.6 Exibição de Textos Pré-formatados
Através do comando <PRE> </PRE> você pode incluir um texto que foi editado por outro editor de texto e
preservar sua formatação original, como as marcas de tabulação, fim de linha gerado pela tecla Enter e etc.
Exemplo:
<PRE>
Texto da linha 1
Texto da linha 2 .....
Texto na linha 3
</PRE>
1.2.7 Alinhamento do conteúdo
Como padrão, os textos inseridos são alinhados pela margem esquerda. Para centralizar um cabeçalho,
parágrafo, imagem, tabela e etc, deve ser usado o comando <CENTER> </CENTER>.
Exemplo:
<center>
O texto daqui vai aparecer centralizado na tela
</center>
<left>
O texto daqui vai aparecer alinhado à esquerda da tela
</left>
<right>
O texto daqui vai aparecer alinhado à direita da tela
</ right >
1.2.8 Alinhando o Texto com o comando <DIV>
Introduzido na versão 3 da linguagem HTML, o comando <DIV> </DIV> envolve uma área do texto oi
DIVsão que pode receber parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o
texto.
•
•
•
•
<DIV ALIGN=”center”>
<DIV ALIGN=”left”>
<DIV ALIGN=”right”>
<DIV ALIGN=”justify”>
</DIV> - conteúdo centralizado
</DIV> - conteúdo alinhado à esquerda
</DIV> - conteúdo alinhado à direita
</DIV> - conteúdo justificado
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
7
Exemplo:
<DIV align=”center”>
<H1> Texto utiliando a TAG DIV </H1>
Todo o texto dentro destas TAGS aparecerá centralizado!
</DIV>
1.2.9 Tamanho da fonte, cor e tipo
<FONT> </FONT> permite alterar as propriedades de tamanho, cor e tipo de fonte do texto exibido.
Exemplo:
<font size=”n”
face=”Nome_da_fonte” color=”Cor_da_fonte”>
Texto </font>
Parâmetros:
Size - especifica o tamano da Fonte
Face - especifica o nome da fonte. Podem ser especificadas várias fontes, de maneira que se o sistema
não possuir a primeira opção, a segunda é carregada e assim por diante.
Color – especifica a cor do texto, pode ser em hexadecimal ou pelo nome predefinido de cores.
Exemplo:
<font color=”#FF0000” face=”Arial,Verdana” size=”12” >
Todo o texto em vermelho tipo arial e tamanho 12.
</font>
<font color=”#FF0000” face=”Verdana” size=”12” >
Todo o texto em vermelho tipo arial e tamanho 12.
</font>
<font color=”#FF0000” face=”Arial,Verdana,Helvetica” size=”12” >
Todo o texto em vermelho tipo arial e tamanho 12.
</font>
1.2.10 Imagens
Incluir uma imagem em uma página html é uma tarefa bem simples e que requer alguns requisitos básicos.
A imagem deve estar disponível nos formatos .GIF ou JPG.
A tag IMG insere uma imagem no documento.
Exemplo: <IMG SRC=”foto.jpg”>
Parâmetros:
SRC = “URL” - é o nome da figura, se estiver no mesmo diretório do programa ou o seu caminho completo
(URL).
ALT = “texto” – Exibe o texto quando o browser não encontra a imagem ou uma legenda quando o cursor
passa sobre ele mostrando o texto especificado.
ALIGN = “TOP” “MIDDLE” “BOTTOM” “LEFT” “RIGHT” “CENTER” – Define o alinhamento da imagem no
documento.
BORDER = “numero” – Especifica em pixels a largura da borda da imagem. O remove a borda
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
8
WIDTH = “numero ou %” – Especifica a largura da imagem, independente do seu tamanho físico.
HEIGHT=”numero ou %” – Especifica a altura da imagem, independente do seu tamanho físico.
Exemplo
<HTML>
<head> <title> Exemplo com Imgem </title> </head>
<body>
<h1> Insere uma imagem </h1>
<br>
<img src=”foto.jpg” border=”0” alt=”Texto sobre a Foto”>
</body>
</HTML>
1.2.11 Criando Links
Fazer a ligação de um texto com uma página local é uma tarefa bem simples. Você precisa somente
especificar o nome completo do arquivo (ou URL) que será chamado, utilizando a TAG <A> </A> de
âncora.
Principais parâmetros:
HREF = ‘URL” - especifica o endereço da URL ou arquivo.
NAME = ‘String” – Especifica o nome da seção de um documento que é referida por um link de hipertexto.
TARGET = “Tipo” - A função do atributo target () basicamente é indicar o nome de um frame na página
onde um documento deve ser aberto. Outro controle que você pode ter com ele é se o hyperlink deve ser
aberto na própria janela ou no próprio frame (target:”_self”) onde o próprio link se encontra ou se a URL do
link deve ser aberta em outra janela (target=”_blank”) do seu browser.
Exemplo:
<a href="slide.html" target="_self">slide 1.</a>
<a href="slide.html" target="_blank">slide 2.</a>
<a href="slide2.html" target="MeuFrame">slide 3.</a>
<a href="www.hotmail.com" target="_blank">Meu email</a>
<a href="www.google.com”
target="_self">Google</a>
O parâmetro HREF especifica a localização do arquivo. O Texto que fica envolvido pelos dois comandos
<A> </A> aparecerá sublinhado e na cor Azul, indicando que é um Link.
Exemplo
<HTML>
<head> <title> Exemplo de link </title> </head>
<body>
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
9
<h1> Insere um Link </h1>
<br>
<a href=”http://www.google.com”> Ir para o Site do Google </a>
</body>
</HTML>
1.2.12 Criando uma Âncora:
Para interligar partes de uma página, você precisa criar uma âncora no inicio de casa seção que será
referida por um link. Uma âncora é um ponto de referência que será acessado por um link. Uma âncora é
usada dentro de um documento para marcar o inicio de uma seção do documento. Essa âncora recebe um
nome que será mencionado pelo link que a acessará.
Exemplo:
<!-- Criei um ponto de referência chamado Ancora_1. -->
<A NAME=”Ancora_1”> </A>
1.2.12.1 Criando um link para Âncora
Para criar um link para uma âncora, você deve usar o comando <A HREF> especificando o nome da
âncora que deseja acessar.
Exemplo:
<A HREF=”index.htm#Âncora_1”>
1 </a>
Clique para acessar o Ponto que possui a Âncora
O símbolo # avisa o browser para procurar o link no documento atual.
Exemplo:
<html>
<head>
<title> Exemplo de Âncora </title>
</head>
<body>
<p align="Center">
Informações sobre a Grécia
</p>
<hr>
<p align="Left">
<A HREF="#Geo"> **** Geografia **** </a> <br>
<A HREF="#Historia"> **** História **** </a> <br>
<A HREF="#Fotos"> **** Fotos **** </a> <br>
</p>
<hr>
<br>
<A Name="Geo"></A>
<center>
<H1>Geografia </H1>
</center>
<p>
Aqui vai o texto contendo informações da geográfica Grega!
</p>
<hr>
<a Name="Historia"></A>
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
10
<center>
<H1>História da Grécia</H1>
</center>
<p>
Aqui vai o texto contendo informações da história Grega!
</p>
<htr>
<hr>
<A Name="Fotos"></A>
<center>
<H1>Fotos da Grécia</H1>
</center>
<p>
Aqui vai ser colocado Fotos da Grécia!
</p>
<hr>
</body>
</html>
1.2.13 Listas
Uma outra forma de estruturar um documento HTML é utilizando listas. Existem basicamente 2 tipos de
listas. As não ordenadas, que contém uma série de itens sem numerá-los e as listas ordenadas, que
atribuem um número para cada elemento da lista. Trabalhar com listas é uma tarefa muito simples e usa-se
as TAGS <UL> </UL> para listas não ordenadas e <OL> </OL> para listas ordenadas.
1.2.13.1 Tag <UL>
Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é
mostrada a seguir. O comando que gera a lista não ordenada (Unordered List) é o comando <UL>, que
deve envolver o primeiro e o ultimo item da lista. Cada item da lista deve ser precedido do comando <LI>
(Line Item).
Exemplo:
<UL>
<LI> Texto do Item um. </LI>
<LI> Texto do Item dois. </LI>
</UL>
1.2.13.2 Tag <OL>
Para criar uma lista ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a
seguir. O comando que gera a lista ordenada (Ordered List) é o comando <OL>, que deve envolver o
primeiro e o último item da lista. Cada item da lista deve ser precedido do comando <LI> (Line Item).
Exemplo:
<OL>
<li> Texto do Item um. </li>
<li> Texto do Item dois. </li>
</OL>
1.2.13.3 Aninhando listas não ordenadas
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
11
É possível adicionar listas não ordenadas, dentro de listas não ordenadas, criando assim sub-listas. Veja o
exemplo.
Exemplo:
<html>
<head>
<title>Exemplo de Listas Aninhadas</title>
</head>
<body>
<ul>
<li>Este é o primeiro item da lista principal
<li>Este é o segundo item da lista principal
<ul>
<li>Este é o primeiro item da SUB-LISTA principal
<li>Este é o segundo item da SUB-LISTA principal
</ul>
<li>Aqui termina a Lista principal</li>
</ul>
</body>
</html>
Você pode combinar também, listas não ordenadas com listas ordenadas e vice-versa.
Exemplo: Lista Não Ordenada e uma Sub-Lista Ordenada.
<html>
<head>
<title>Exemplo de Listas Aninhadas</title>
</head>
<body>
<ul>
<li>Este é o primeiro item da lista principal
<li>Este é o segundo item da lista principal
<ol>
<li>Este é o primeiro item da SUB-LISTA principal
<li>Este é o segundo item da SUB-LISTA principal
</ol>
<li>Aqui termina a Lista principal</li>
</ul>
</body>
</html>
Exemplo2: Lista Ordenada e uma sub-lista Não Ordenada.
<html>
<head>
<title>Exemplo de Listas Aninhadas</title>
</head>
<body>
<OL>
<li>Este é o primeiro item da lista principal
<li>Este é o segundo item da lista principal
<Ul>
<li>Este é o primeiro item da SUB-LISTA principal
<li>Este é o segundo item da SUB-LISTA principal
</Ul>
<li>Aqui termina a Lista principal</li>
</OL>
</body>
</html>
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
12
1.2.13.4 Alterando numeração e marcadores
Até agora, vimos como criar listas ordenadas e não ordenadas usando os marcadores e numeração padrão
dos comandos <OL> E <UL>. Veremos então como alterar as características básicas das listas, como a
numeração e os marcadores.
Modificando os marcadores das listas Não Ordenadas.
A opção Type= do comando <UL> permite que sejam especificadas variações para o marcador utilizado na
lista. Os valores possíveis de se atribuir ao TYPE são:
• SQUARE : marcador quadrado;
• CIRCLE: marcador como um círculo sem preenchimento (vazio);
• DISC: marcador como um círculo com preenchimento.
Exemplo:
<ul type="circle">
<li>Primeiro item da Lista</li>
<li>Segundo item da Lista</li>
<li>Terceiro item da Lista</li>
</ul>
As listas numeradas possibilitam maiores oportunidades de modificações. Seu padrão é sempre iniciar a
lista pelo numero 1. Você pode mudar o numero inicial e o tipo de numeração da lista usando o parâmetro
TYPE e o parâmetro START.
Os valores permitidos para Type são:
•
•
•
•
•
Type = 1 - Cria uma lista numérica normal (é o padrão e não precisa ser especificado)
Type = A - Cria uma lista alfabética com letras maiúsculas começando pelo A.
Type = a - Cria uma lista alfabética com letras minúsculas começando pelo a.
Type = I - Cria uma lista numérica com números romanos maiúsculas começando pelo I.
Type = i - Cria uma lista numérica com números romanos minúsculas começando pelo i.
O START permite mudar o número inicial.
START = 10 - inicia no numero 10.
Exemplo:
<OL Type=1 Start=10>
<li> Item que começa no numero 10 </li>
<li> Item 11 da lista </li>
</OL>
1.2.14 Tabelas
O uso de tabelas melhora muita a aparência de uma página, pois permite o alinhamento de textos e
imagens, além de ordenar as informações de uma forma padronizada.
Uma tabela é criada pelas TAGS <Table> </Table> e consiste em linhas e colunas. A interseção de uma
linha com uma coluna é chamada de célula.
As linhas de uma tabela são criadas pelo comando <TR> </TR>. As colunas de uma tabela são criadas
pelo comando <TD> </TD>.
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
13
A TAG <Table> possui alguns parâmetros, como por exemplo, para definir a borda, a cor da borda, largura
e altura da tabela e etc.
Vejamos alguns deles:
• Border = N - onde N é a largura da borda, e 0 diz que é sem bordas.
• Align = left | center | right – Define o alinhamento da tabela na página.
• Bgcolor = Especifica a cor de fundo de toda a tabela.
• Bordercolor = Especifica a cor da borda de toda a tabela.
• Width = Especifica a largura da tabela em pixels ou em percentagem relativa à largura da janela.
• Cellspacing = Especifica o espaçamento em pixels entre as células.
• Cellpadding = Especifica o espaçamento entre o conteúdo e a borda de célula.
Exemplo:
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0"
bordercolor="#FF0000" bgcolor="#CCCCCC">
<tr>
<td> 1ª linha e 1ª coluna </td>
<td> 1ª linha e 2ª coluna </td>
</tr>
<tr>
<td>2ª linha e 1ª coluna </td>
<td>2ª linha e 2ª coluna </td>
</tr>
</table>
1.2.14 .1 <TR> Table Row
Define uma linha da tabela. Para cada linha em uma tabela, de ser especificado um par destas Tags, onde,
dentro delas, devem ser especificados os comandos <TD> </TD> para crias as células de dados daquela
linha. As linhas de uma tabela não precisam ter necessariamente o mesmo numero de células.
Sintaxe:
<TR bgcolor= ” COR ” background= “ Nome da Figura .gif ou .jpg “> </TR>
1.2.14 .2 <TD> Table Data
Define o conteúdo de uma célula da linha de uma tabela. Cada célula de uma linha precisa ser especificada
por meio deste comando.
Sintaxe:
<TD ALIGN = ’CENTER
HEIGHT=’’> </TD>
|
LEFT
|
RIGHT
’
COLSPAN=
’’
ROWSPAN=’’
WIDTH=’’
Parâmetros:
ALIGN = “LEFT | Center | Right | justify “ - Especifica o alinhamento horizontal do conteúdo da célula.
VALIGN = “TOP | MIDDLE | BOTTOM | BASELINE” – Especifica o alinhamento vertical do conteúdo da
célula.
COLSPAN = “numero” – Indica o numero de colunas que esta célula deverá ocupar.
ROWSPAN=”Numero” - Indica o numero de linhas que esta célula deverá ocupar.
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
14
WIDTH = “numero | numero%” – Especifica a largura da coluna em pixels ou em porcentagem relativa à
largura da janela.
HEIGHT = “numero | numero%” – Especifica a altura da coluna em pixels ou em porcentagem relativa à
largura da janela.
BGCOLOR = “cor” – Especifica a cor de fundo da célula.
Dentro de cada célula você pode colocar qualquer elemento aceito em uma página HTML, como um texto
ou figuras.
Você pode adicionar tabelas dentro de tabelas (aninhamento), mas fique atento com o fechamento correto
das Tags.
1.2.14 .3 Expandindo uma célula pelas colunas
Uma vez definida a estrutura básica de uma tabela, ou seja, o numero de linhas e colunas, podemos
‘apagar’ a divisão entre células vizinhas de maneira a aumentar a largura ou a altura de uma célula e criar
tabelas mais bem definidas.
O exemplo abaixo mostra o uso da opção COLSPAN para aumentar o tamanho de uma célula e fazer com
que ela ocupe colunas adjacentes.
Exemplo de uma tabela contendo 2 linhas e 4 colunas.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Linha 1 - Coluna 1</td>
<td>Linha 1 - Coluna 2</td>
<td>Linha 1 - Coluna 3</td>
<td>Linha 1 - Coluna 4</td>
</tr>
<tr>
<td>Linha 2 - Coluna 1</td>
<td>Linha 2 - Coluna 2</td>
<td>Linha 2 - Coluna 3</td>
<td>Linha 2 - Coluna 4</td>
</tr>
</table>
Agora a mesma tabela com 2 colunas unidas pelo comando COLSPAN.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align=’center’ >Linha 1 - Coluna e Coluna 2</td>
<td>Linha 1 - Coluna 3</td>
<td>Linha 1 - Coluna 4</td>
</tr>
<tr>
<td>Linha 2 - Coluna 1</td>
<td>Linha 2 - Coluna 2</td>
<td>Linha 2 - Coluna 3</td>
<td>Linha 2 - Coluna 4</td>
</tr>
</table>
Agora um exemplo com o comando ROWSPAN
<table width="100%" border="0" cellspacing="0" cellpadding="0">
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
15
<tr>
<td rowspan="2">Linha 1 e Linha 2 - Coluna 1</td>
<td>Linha 1 - Coluna 2</td>
<td>Linha 1 - Coluna 3</td>
<td>Linha 1 - Coluna 4</td>
</tr>
<tr>
<td>Linha 2 - Coluna 2</td>
<td>Linha 2 - Coluna 3</td>
<td>Linha 2 - Coluna 4</td>
</tr>
</table>
1.2.15 Formulários
Um dos recursos mais interessantes da linguagem HTML é a possibilidade de criar formulários eletrônicos.
Usando um formulário eletrônico o usuário pode interagir com o servidor, enviando dados que serão
processados no servidor e posteriormente devolvidos ao cliente.
Esses comandos são os principais responsáveis pela viabilização da troca de informações entre o cliente e
o servidor.
Algumas utilizações de formulários.
•
•
•
•
Uma loja virtual;
Um site de busca;
Uma agência de empregos, onde os candidatos fazem o cadastro de currículos;
Qualquer site que necessite que o usuário entre com alguma informação que será enviada e/ou
processada pelo servidor, que pode ou não retornar alguma informação de volta para o cliente.
1.2.15.1 Definindo um FORM
A tag <FORM>
Esta Tag especifica o destino (URL) que receberá os dados do formulário e defini a forma ou método como
os dados serão enviados.
A tag <Form> usa os seguintes parâmetros:
ACTION = ”URL” – Especifica o local (URL) do servidor e/ou do Script ou CGI que vai processar os dados
do formulário.
METHOD = ”Método” – Especifica o método usado pelo servidor para receber o form. As opções possíveis
para esse parâmetro são GET e POST.
O método POST é o mais utilizado e transmite toda a informação do form imediatamente após a URL.
Porém, separado de sua especificação, ou seja, uma vez que o servidor recebeu uma requisição de um
formulário usando o método POST, ele continua a receber os demais dados.
O método GET faz com que o conteúdo do formulário seja anexado ao endereço da URL.
Exemplos:
Usando o metodo POST, mais recomendado.
<form method=”POST”
action=http://www.meuservidor.com/cadastro.php>
ou usando o método GET
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
16
<form method=”GET”
action=http://www.meuservidor.com/cadastro.php>
1.2.15.2 Definindo os Campos de um formulário
A tag <INPUT> define um campo de entrada de dados onde o usuário digita as informações do formulário.
Cada campo de um formulário atribui o seu conteúdo para uma variável que possui nome e tipo especifico.
Muitos elementos de um formulário html são definidos pela tag <input>. Cada tipo de elemento possui
parâmetros próprios, mas todos possuem pelo menos dois parâmetros em comum: type, que define o tipo
de elemento, e name, que como já foi dito define o nome daquele elemento.
1.2.15.3 Campo de Texto
O campo mais comum em formulários. Exibe na tela um campo para entrada de texto com apenas uma
linha.
Parâmetros:
Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada;
Size - O tamanho do elemento na tela, em caracteres;
Maxlength - O tamanho máximo do texto contido no elemento, em caracteres;
Exemplo
<input type="text" name="Valor_1" value="" size="" maxlength="">
1.2.15.4 Campo para Senha - campo de texto com máscara
Campo semelhante ao anterior, com a diferença que neste caso os dados digitados são substituídos por
asteriscos, e por isso são os mais recomendados para campos que devam conter senhas. É importante
salientar que nenhuma criptografia é utilizada. Apenas não aparece na tela o que está sendo digitado.
Parâmetros:
Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada;
Size - O tamanho do elemento na tela, em caracteres;
Maxlength - O tamanho máximo do texto contido no elemento, em caracteres;
Exemplo:
<input type="password" name="Senha" value="" size="8" maxlength="8">
1.2.15.5 Checkbox
Utilizado para campos de múltipla escolha, onde o usuário pode marcar mais de uma opção.
Parâmetros:
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
17
Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar
marcado
Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado;
Exemplo:
<input type="checkbox" name="Nome_Checkbox" value="valor" checked>
1.2.15.6 Radio Button
Utilizado para campos de múltipla escolha, onde o usuário pode marcar apenas uma opção. Para agrupar
vários elementos deste tipo, fazendo com que eles sejam exclusivos, basta atribuir o mesmo nome a todos
elementos do grupo.
Parâmetros:
Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar
marcado
Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado;
Exemplo:
<input type="radio" name="Sexo" value="M" checked> Masculino
<input type="radio" name="Sexo" value="F"> Feminino
1.2.15.7 Submit Button
Utilizado para enviar os dados do formulário para o script descrito na seção "action" da definição do
formulário
Parâmetros:
Name – nome do botão.
Value - o texto que aparecerá no corpo do botão.
Exemplo:
<input type="submit" name="botao1" value="Enviar Dados">
1.2.15.8 Reset Button
Utilizado para fazer todos os campos do formulário retornem ao valor original, quando a página foi
carregada. Bastante utilizado como botão "limpar", mas na realidade só limpa os campos se todos eles têm
como valor uma string vazia.
Parâmetros:
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
18
Name – nome do botão.
Value - o texto que aparecerá no corpo do botão.
Exemplo
<input type="reset" name="botao2" value="Limpar">
1.2.15.9 Button
Utilizado normalmente para ativar funções de scripts client-side (JavaScript, por exemplo). Sem essa
utilização, não produz efeito algum.
Parâmetros:
Name – nome do botão.
Value - o texto que aparecerá no corpo do botão.
Exemplo:
<input type="button" name="" value="">
1.2.15.10 TextArea
Exibe na tela uma caixa de texto, com o tamanho definido pelos parâmetros "cols" e "rows".
Parâmetros:
Cols - número de colunas do campo, em caracteres;
Rows - número de linhas do campo, em caracteres;
Wrap - Maneira como são tratadas as quebras de linha automáticas. O valor soft faz com que o texto
"quebre" somente na tela, sendo enviado para o servidor o texto da maneira como foi digitado; O valor
"hard" faz com que seja enviado para o servidor da maneira como o texto aparece na tela, com todas as
quebras de linhas inseridas automaticamente; o valor "off" faz com que o texto não quebre na tela e nem
quando enviado ao servidor.
Value - O elemento do tipo textarea não possui o parâmetro "value". O valor pré-definido do campo é o
texto que fica entre as tags <textarea> e </textarea>.
Exemplo:
<textarea cols="" rows="" name="" wrap="">texto</textarea>
1.2.15.11 Select
Se o parâmetro "size" tiver o valor 1 e não houver o parâmetro "multiple", exibe na tela uma "combo box".
Caso contrário, exibe na tela uma "select list".
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
19
Parâmetros:
Size - número de linhas exibidas. Default: 1;
Multiple - parâmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, através das
teclas Control ou Shift;
option - Cada item do tipo "option" acrescenta uma linha ao select;
value - Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item;
text - valor a ser exibido para aquele item. Não é definido por um parâmetro, mas pelo texto que fica entre
as tags <option> e </option>
Exemplo:
<select name="Sexo" size="1" >
<option value="M">Masculino </option>
<option value="F">Feminino </option>
</select>
1.2.15.12 Upload de arquivos
Exibe na tela do browser um campo de texto e um botão, que ao clicado abre uma janela para localizar um
arquivo no disco. Para utilizar este tipo de componente, o formulário deverá utilizar o método "POST" e ter
o parâmetro "enctype" com o valor "multipart/form-data".
Parâmetros:
Size - O tamanho do campo de texto exibido.
<input type="file" name="" size="">
1.2.15.13 Hidden
Essa TAG serve para colocar informações escondidas do usuário (isto é: o usuário não vê tais TAGs). São
utilizadas para diversas funções num FORM, tais como colocar um valor fixo que deseja enviar junto com
as demais informações que o usuário preencher no formulário.
Exemplo
<INPUT TYPE="hidden" NAME="subject" VALUE="MEU PRIMEIRO FORM">
1.2.15.14 Exemplo completo com todas as tags de formulário
<html>
<head>
<title>Exemplo de formulário</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="Formulario" method="post" action="./recebe_dados.php">
Exemplos de Objetos de Formulario:<br>
<br>
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
20
Digite seu Nome:
<input name="Nome" type="text" size="40" maxlength="50">
<br>
<br>
Digite sua Senha:
<input name="Senha" type="password" size="15" maxlength="15">
<br>
<br>
Exemplo de TextArea: <br>
<textarea name="Text_Area" cols="45" rows="5"></textarea>
<br>
<br>
Exemplo de Combo Box:<br>
Sexo :
<select name="Sexo">
<option value="M" selected>Masculino</option>
<option value="F">Feminino</option>
</select>
<br>
<br>
Ano Nascimento :
<select name="Ano" id="Ano">
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000" selected>2000</option>
</select>
<br>
<br>
<input type="checkbox" name="Checado" value="Sim">
Exemplo de Check Box <br>
<input type="checkbox" name="Checado2" value="Sim">
Outro Exemplo de Check Box
<br>
<br>
<input name="Radio" type="radio" value="Sim" checked>
Exemplo de Botao de Radio (valor Sim)<br>
<input type="radio" name="Radio" value="Nao">
Exemplo de Botao de Radio (valor Nao)<br>
<br>
<input type="hidden" name="Campo_oculto" value="Valor oculto">
<br>
<br>
<input type="submit" name="Submit" value="Enviar os Dados">
<input type="reset" name="Submit" value="Limpar os Campos">
</form>
</body>
</html>
1.2.16 Frames
O uso de frames permite que diferentes arquivos HTML componham a mesma página, permitindo dividir o
espaço da janela do navegador em colunas e/ou linhas e controlar o seu tamanho, determinando quantas
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
21
serão as subdivisões e qual será sua distribuição na tela. É importante ressaltar que cada uma destas
"partes da tela" é ocupada por arquivos diferentes, totalmente independentes.
Portanto, o uso dos frames possibilita apresentar mais de uma página em cada tela. Por exemplo, um
índice em uma parte pequena dela e os textos relacionados ao índice em outra parte.
<html>
<head>
<title>Página com Frame</title>
</head>
<frameset cols = 40,*>
<frame src = esquerda.htm>
<frame src = direita.htm name = direita>
</frameset>
<body>
</body>
</html>
1.2.16.1 Criando frames
<frameset>
Esta tag, seguida de um argumento é a que define o frame da página.
<frameset cols>
O argumento cols indica que a divisão deve ser vertical, em colunas.
<frameset rows>
O argumento rows indica que a divisão deve ser horizontal, em linhas.
<frameset cols = 40,*>
O valor após o sinal de igual, define a largura da coluna (cols = 40), ou da linha (rows = 40). O valor
especificado (40) indica a largura do primeiro frame, enquanto o asterisco (*) indica que o segundo frame
terá a largura igual ao espaço que estiver sobrando na tela. Para dividir a página em dois frames do mesmo
tamanho, basta utilizar dois asteriscos.
1.2.16.2 Definindo o conteúdo dos frames
Para definir o conteúdo da cada divisão, usa-se a tag <frame>. Enquanto a tag <frameset> define as
divisões da página, a tag <frame> indica o que será carregado em cada uma dessas divisões.
O número de tags <frame> deve equivaler-se ao número de tags <frameset>, pois se dividirmos nossa
página em 2 frames, deveremos então carregar 2 páginas, uma em cada frame.
Para utilizar a tag <frame>, você deve indicar a página que deseja carregar, usando o argumento src
(source), que indica o nome do documento html.
1.2.16.3 Definindo o frame da esquerda
No exemplo a seguir, uma página chamada esquerda.htm será carregada no primeiro frame da página
principal (frame da esquerda):
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
22
<frame src = esquerda.htm>
1.2.16.4 Definindo o frame da direita
No segundo frame (frame da direita), uma página chamada direita.htm é que será carregada:
<frame src="direita.htm" name="direita">
1.2.16.5 Apelidando os frames
Note que este exemplo possui mais argumento que o primeiro. A expressão name é um recurso para
nomear o frame (nomear, apelidar), facilitando a identificação do frame. Caso você tivesse uma página com
4 frames, poderia apelidá-los de frame da "esquerda", "direita", "acima", "abaixo".
1.2.16.6 Carregando as páginas nos frames
Para indicar ao browser em qual frame você deseja carregar uma página, utilize no link correspondente a
expressão target (alvo). Suponhamos que você deseje colocar um link no frame esquerdo, que, ao ser
clicado, carregue uma página no frame direito. Para fazer isto coloque na página esquerda.htm a sintaxe a
seguir:
<a href="direita.htm" target=direita>Direita</a>
1.2.16.7 Carregando as páginas em uma nova janela
Se desejar carregar uma página em uma nova janela, ao invés de carregá-la no frame, use a expressão
_blank, no lugar do nome do frame.
<a href="direita.htm" target="_blank">Direita</a>
1.2.16.8 Carregando a página na tela inteira do browser
Se desejar carregar uma página na tela inteira do browser, e não mais em um dos frames, use a palavra
_top no argumento target como no exemplo a seguir:
<a href="direita.htm" target="_top">Direita</a>
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
23
1.2.16.9 Carregando a página no frame pai
Use esta tag para carregar a página no "frame-pai" do frame que contém o link. A página será carregada
sem apresentar divisões.
<a href="direita.htm" target="_parent">Direita</a>
1.2.16.10 Carregando a página no mesmo frame que contém o link
Use esta tag para carregar a página no mesmo frame que contém o link.
<a href="direita.htm" target="_self">Direita</a>
1.2.16.11 Ocultando a barra de rolagem
Os frames são divididos por uma barra de rolagem entre eles, porém esta barra pode ficar oculta usandose a tag <scrolling="no">
Para exibí-la use <scrolling="yes">
1.2.16.12 Impedir o redimensionamento do frame
Para impedir que um frame seja redimensionado use a tag <noresize>
1.2.16.13 Browser que não reconhecem frames
Existem navegadores que não reconhecem frames, por isso, você deve colocar uma mensagem para o
usuário, usando a tag <noframes></noframes>
Exemplo:
<noframes>
Esta página usa frames, mas seu navegador não suporta este recurso.
</noframes>
1.2.16.14 Exemplo completo de uma página com frames
<html>
<head>
<title>Página com Frame</title>
</head>
<frameset rows="64,*">
<frame name="acima" scrolling="no" noresize target="esquerda"
src="pagina1.htm">
<frameset cols="150,*">
<frame name="esquerda" target="direita" src="pagina2.htm">
<frame name="direita" src="pagina3.htm">
</frameset>
<noframes>
<body>
<p> Esta página usa frames, mas seu navegador não suporta este recurso.</p>
</body>
</noframes>
</html>
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
24
1.2.17 Introdução ao XHTML
XHTML é uma reformulação da linguagem HTML baseada na XML. Em termos de sintaxe, a XHTML não é
tão tolerante como a HTML, pois utiliza as rígidas regras de marcação da XML.
1.2.17.1 O que é o DOC TYPE?
O Doctype (Document Type Definition) é a primeira coisa que se deve escrever em um arquivo XHTML, ele
vai na primeira linha do seu documento, se você quiser ter um XML válido, não devemos esquecê-lo, ele
serve para informar ao browser que tipo de documento será visualizado.
Existem 3 tipos:
•
Strict: Este tipo é usado quando você fez um código 100% XHTML e deve ser escrito assim:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
•
Transitional: Este é o modo mais usado, você o usa quando está começando a migrar do nosso
amigo HTML para o poderoso XHTML, sua sintaxe é:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
•
Frameset: É usado quando você está utilizando FRAMES em seu site, se escreve assim:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Veja o exemplo abaixo:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title></title>
</head>
<body>
…
…
</body>
</html>
1.2.17.3 Feche TODAS as tags
Quem já escreveu algum XML sabe que ele não funciona até que TODAS as tags estiverem bem fechadas,
no HTML era diferente, muitas vezes deixávamos tags abertas, e ele funcionava que era uma beleza.
Dicas
•
Para se fazer um XHTML válido, devemos fechar TODAS as tags.
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
25
•
Não podemos esquecer de fechar as tags que já conhecemos. <p></p>, <b></b>, etc.
•
E não devemos esquecer de forma alguma de fechar as tags “solitárias”, assim, ao invés de <br>
escrevemos <br> </br>, ou na forma simplificada: <br />.
•
Descobriram que fechando tags desta forma <br/>, não se sabe porque estava causando um
problema no Netscape, mas apenas colocando um espaço antes da / o problema é solucionado.
•
Não esqueça das “ASPAS”
•
Esta regra é bem simples. Todos os atributos XHTML devem conter as “ASPAS”.
•
Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra
minúscula!
1.2.17.4 Use letras minúsculas
Quem nunca viu um código fonte de um documento HTML escrito assim:
<A href=”http://tags.com.letras.minúsculas/” TARGET=”_BLANK”> </A>
1.2.17.5 Atributo NAME
O antigo atributo NAME foi substituído pelo atributo ID. Se seus usuários, clientes, etc, utilizam ainda
antigos browsers, você pode sem problema nenhum utilizar as duas formas juntas durante neste período
em que estamos migrando:
<img src=”imagem.gif” id=”imagem” name=”imagem” />
1.2.17.6 Atributos sem valor
Não devemos esquecer também os atributos que escrevemos sem valor, por exemplo:
ERRADO:
<option selected>
<frame noresize>
<input checked>
<input readonly>
CERTO:
<option selected=”selected”>
<frame noresize=”noresize”>
<input checked=”checked”>
<input readonly=”readonly”>
1.2.17.7 Quer mais uma dica?
Se você estiver migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha.
O TIDY é uma ferramenta para validar e consertar códigos HTML. Permite escolher qual a versão do HTML
você quer validar e uma dessas opções é a XHTML. Se você já está escrevendo um XHTML e quer que
seu código fique livre de todos os erros, o TIDY arruma para você.
Colégio Técnico Opção – Curso Técnico em Informática – Prof Diogo Chadud Milagros – Coord. Alexandre Lamm
26