Download - Apostila de XHTML
-
8/14/2019 Apostila de XHTML
1/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 1 de 38
AAppoossttiillaa ddee
XXHHTTMMLL(( CCuurrssoo IInnttrroodduuttrriioo))
VVeerrssoo 00..333300 ddee AAggoossttoo ddee 22000077
PPrrooff.. LLuuiiss RRooddrriiggoo ddee OO.. GGoonnaallvveess
lluuiissrrooddrriiggoooogg @@ yyaahhoooo..ccoomm..bbrr
http://www.lncc.br/~lrodrigo/
-
8/14/2019 Apostila de XHTML
2/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 2 de 38
Introduo
Quando o W3C definiu os parmetros da quarta verso do HTML (HyperText Markup Language) em
1997, os profissionais ficaram satisfeitos com o resultado final e o adotaram sem problemas como a base
definitiva de programao para a criao de pginas na Web. Depois de trs anos, a linguagem sofre o queparece ser sua maior evoluo com a adio de aplicaes da meta-linguagem XML (EXtensible Markup
Language). Nasce ento o XHTML 1.0, a nova linguagem-base para criao de pginas Webque rene
todas as qualidades do HTML com os recursos do XML, destinado para substituir, aos poucos, o HyperText
4.0.
A juno das duas linguagens resultou no XHTML (EXtensible HyperText Markup Language), uma
linguagem quase igual ao HTML original, o que facilita muito aos programadores, que esto acostumados
com todas as tags e cdigos desde que foi criada, mas que capaz de apresentar a "flexibilidade" da
linguagem XML de levar seu contedo registrado nela para outras plataformas.
Todas as linguagens de marcao da weberam baseadas em SGML, uma metalinguagem complexa
e complicada projetada para mquinas com a finalidade de servir de base para criao de outras
linguagens. O SGML foi usado para criar o XML (Extensible Markup Language), tambm uma
metalinguagem, porm bem mais simples.
Com XML voc cria suas prprias tagse atributos para escrever seu documento web. Isto significa
que voc quem cria sua linguagem de marcao. XHTML foi criado dentro deste conceito e por isso
uma aplicao XML. As tagse atributos do XHTML foram criadas ("inventadas") aproveitando-se as nossas
conhecidas tagse atributos do HTML 4.01 e suas regras.
Graas proximidade do XHTML 1.0com seu antecessor, o HTML 4.0, os elementos XML podem
ser inseridos nas pginas HTML j existentes, adicionando as novas tagse elementos originados da nova
linguagem, gerando infinitas possibilidades para o futuro da Web, em termos de divulgao de contedo e
de aperfeioamento da programao.
Logo o XHTML, que uma aplicao XML, tem por objetivo substituir o HTML, tornando as pginas
mais limpas, j que pode ser considerada um HTML "puro, claro e limpo".
Dentre as vantagens do XML destacam-se:
1) compatibilidade da linguagem XHTML com as futuras aplicaes de usurios,
garantindo desde j que as criaes XHTML conservar-se-o estveis por longos anos.
A tendncia que futuras verses de browserse agentes de usurios em geral, deixem
de suportar elementos e atributos j em desuso ("deprecated") segundo as
recomendaes da W3C, bem assim como antigos e ultrapassados esquemas eesboos do HTML.
-
8/14/2019 Apostila de XHTML
3/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 3 de 38
2) a linguagem da web do futuro, que j est a disposio de projetistas e
desenvolvedores web. Ela gera um cdigo consistente que dispensa uso de "truques"
e "hacks"para contornar "bugs". Editar um cdigo existente uma tarefa bem simples
por se tratar de uma escrita limpa e evidente. O tempo de carga de uma pgina XHTML
menor, pois os browsersinterpretam uma pgina limpa.
3) Uma pgina XHTML mais acessvel aos browsers e aplicaes de usurio padro
incrementando a interoperabilidade e a portabilidade dos documentos web. Uma pginaXHTML totalmente compatvel com as aplicaes antigas e j ultrapassadas escritas
em HTML.
A XHTML 1.0 uma recomendao da W3Ce sua verso atual data de 26 de janeiro de 2000. Isto
significa que se trata de uma linguagem estvel, oficialmente especificada, tendo sido projetada e revisada
pelos seus membros. Desta forma a linguagem uma Web Standard.
-
8/14/2019 Apostila de XHTML
4/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 4 de 38
2) Regras Bsicas do XHTMLO XML s funciona quando todas as tagsestiverem bem fechadas, no HTML diferente, s vezes
deixamos tagsabertas, e ele funcionava normalmente. Para se fazer um XHTML vlido, devemos:
Fechar todas as tags:No deve esquecer-se de fechar todas as tags:
, , etc... Eno devemos esquecer, de forma alguma, de fechar as tags nicas, ou seja, ao invs de
,deve ser escrito
, ou na forma simplificada:
.Use letras minsculas: Um documento XHTML deve ter TODAS as tags e seus respectivosatributos escritos com letra minscula, mas quem nunca viu um cdigo fonte de um documentoHTML escrito assim:
No se esquea das "aspas": Esta regra bem simples. Todos os atributos XHTML devemconter "ASPAS".
Atributo name:O antigo atributo NAMEfoi substitudo pelo atributo ID. Como os clientes, aindautilizam antigos browsers, voc pode utilizar as duas formas juntas. Por exemplo:
Atributos sem valor:Se deve esquecer os atributos sem valor, por exemplo:
ERRADO:
CERTO:
-
8/14/2019 Apostila de XHTML
5/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 5 de 38
Pode-se afirmar que um documento esta bem formado quando foi estruturado de acordo com as
regras definidas nas recomendaes para XML 1.0 [XML]. Todos os elementos XHTML devem estar
corretamente aninhados dentro do elemento raiz . A estrutura bsica do documento deve ser
conforme abaixo:
...
...
O atributo lang:Use o atributo langpara definir a lngua em que foi escrito o documento. J o
atributo xml:langpara definir a verso do XML.
-
8/14/2019 Apostila de XHTML
6/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 6 de 38
3) XHTML - Conceitos Bsicos
Todos os documentos XHTML podem ser divididos em duas partes bsicas: o cabealho e o corpo. O
cabealho possui informaes sobre o documento em si, seus principais componentes so:
Elemento Descrio Obrigatrio
Deve ser o primeiro elemento do cabealho, informao texto que aparece na barra de ttulo do navegador; S
Possui informaes sobre o contedo do documento; N
Realizar a ligao entre os documentos e aspginas contendo as folhas de estilo; N
Informaes sobre as folhas de estilo usadas em umdeterminado documento; N
Espao utilizado para insero de cdigo, por
exemplo: java script; N
Especifica o endereo do documento XHMTL N
A declarao de verso da linguagem XML utilizada na descrio do documento, tambm faz parte
do cabealho; a funo da tag determinar com ser o processo de codificao do texto (encoding). Esta
pode ser semelhante aquela apresentada abaixo:
A declarao do tipo do documento (DOCTYPE), que informa a DTDe que deve ser utilizada para
validar o documento apresentado outra declarao que integra o cabealho. A seguir h um exemplo
desta linha:
-
8/14/2019 Apostila de XHTML
7/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 7 de 38
Para que o documento possa ser validado, o Doctype (Document Type Definition, vulgo DTD) deve
sera primeira linha de um arquivo XHTML. Existem 3 tipos bsicos de DTDs:
- Strict: sado quando se deseja um cdigo100% XHTML e sem erros:
- Transitional: o modo mais usado, pois aquele utilizado na migrao do HTML para o
XHTML:
- Frameset: usado quando se utiliza FRAMES em um site:
A segunda e principal parte do documento o corpo, nele so inseridos os elementos de marcao,
os principais elementos do corpo do documento so descritos a prxima seo.
-
8/14/2019 Apostila de XHTML
8/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 8 de 38
2.1) Elementos bsicos do corpo
Como j foi dito, o corpo do texto formado pelas tagsde formatao, utilizadas na estruturao
das informaes a serem exibidas, destes elementos de marcao podemos destacar os elementos de
bloco, destinados tanto a estruturao quanto ao estilo da pgina:
Elementos de Blocos
Nome Marcador Descrio
Pargrafo
um dos marcadores mais utilizados, suarepresentao depende do navegador, mas normalmente representado por um espao antes e depois dopargrafo;
Diviso Utilizado com folhas de estilo na especificao deblocos e texto;
Ttulos Introduzem ttulos no documento, podem ser de seis
nveis (1 at 6), seu tamanho de fonte varia de 24 10ptos;
Blockquete
Utilizados para criao de citaes, que inserem umalinha antes e depois do texto, assim como um nvel deendentao;
Preserve Utilizado para preservar a formatao do texto, nointerpretando seu contedo
Exemplo 01:
XHTML : Testando os elementos Hn
Nivel 1 Nivel 2
Nivel 3 Nivel 4 Nivel 5 Nivel 6
-
8/14/2019 Apostila de XHTML
9/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 9 de 38
Exemplo 02:
XHTML : Exemplo 02
Isto um pargrafo
Esta a primeira div J esta a segunda E finalmente esta a ultimaE outro pargrafo
"Este agora um bloco de citao, pequeno mais"
-
8/14/2019 Apostila de XHTML
10/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 10 de 38
Exemplo 03:
Outro conjunto de elementos so os descritivos de linha:
Elementos Descritivos de Linha
Nome Marcador Descrio
Citao Fonte em itlico
Cdigo
Fonte mono-espaada
Definio Fonte em itlico e negrito
nfase Fonte em itlico
Span Usado para dimensionar parte do texto, normalmente
est relacionado com algum estilo de uma folha de estilo;
Forte Fonte em negrito
XHTML : Exemplo 02
Este um pargrafo com
mais de uma linha,contudo parece ser tudo em uma !!!
Este um pargrafo commais de uma linha,que exibido corretamente !!!
-
8/14/2019 Apostila de XHTML
11/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 11 de 38
Exemplo 04:
XTHML : Exemplo 04 Exemplo de uma citcao .Exemplo de um codigo Exemplo de um texto com emfase .Exemplo de de um span Exemplo de de um texto forte.
J os elementos de estilo de linha permitem introduzir estilos somente nas mdias visuais, como
navegadores. Sendo desaconselhado seu uso, quando se busca compatibilidade com outras mdias. Seus
exemplares bsicos so:
Elementos de Estilo de Linha
Nome Marcador Descrio
Grande Fonte maior que o padro
Small
Fonte menor que o padro
Negrito Texto em negrito
Itlico Texto em itlico
Riscado Texto riscado ao meio
Subscrito Texto subscrito
Sobrescrito Texto sobrescrito
Sublinhado Texto Sublinhado
Teclado
Texto nono-espaado, como se tivesse sido escrito
na mquina de escreverTrue-Type Texto nono-espaado
-
8/14/2019 Apostila de XHTML
12/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 12 de 38
Exemplo 05:
Alm destes podemos utilizar outros dois elementos de estilo, o primeiro o
utilizado parainserir uma quebra de linha, e o segundo o utilizado para inserir uma linha horizontal na
apresentao do documento;
XTHML : Exemplo 05
Texto em negrito . Texto maior que o padrao . Texto em italico . Texto da maquina de escrever . Texto sublinhado . Texto Riscado. Texto menor que o padrao . Texto subscrito. Texto sobrescrito . Texto em true-type .
-
8/14/2019 Apostila de XHTML
13/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 13 de 38
2.2 Elementos de Listas
O XHTML d suporte a trs tipos de listas: ordenadas, no ordenadas e de definio.
As listas no ordenadas so criadas fazendo-se uso do marcador , e dos elementos
. Este tipo de lista pode atravs do atributo type, apresentar trs tipos de marcadores: um circulo
vazio (circle), um circulo cheio (disc) e um quadrado (square). Assim como pode possuir vrios nveis, ou
seja, uma lista dentro da outra. Logo abaixo temos um exemplo da utilizao destes marcadores.
As listas ordenadas possuem elementos que so numerados, o marcador utilizado o
e para definio de cada sub-elemento o . O tipo de numerao pode ser alterado com o uso do
atributo type, o qual pode assumir os valores: 1 (arbico), a, A (alfabtico), ie I(romano). No Exemplo
07, podemos ter uma idia de seu uso.
J as listas de definio podem ser utilizadas na definio de termos, o marcador geral o
, o que identifica o texto a ser definido o e a definio dos termos feita atravs do
.
-
8/14/2019 Apostila de XHTML
14/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 14 de 38
Exemplo06:
XHTML Exemplo 04
Exemplo de uso de Listas no ordenadas
Primeira Lista
Primeiro Item Segundo Item
Segunda ListaPrimeiro Item Segundo Item
Terceira Lista
Primeiro Item Segundo Item
Quarta Lista
Item 1
Item 1.1 Item 1.2
Item 2
Item 2.1 Item 2.2
Item 3
-
8/14/2019 Apostila de XHTML
15/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 15 de 38
Exemplo 07:
XHTML Exemplo 07
Exemplo de uso de Listas ordenadas
Primeira Lista
Primeiro Item Segundo Item
Segunda Lista
Primeiro Item Segundo Item
Terceira Lista
Primeiro Item Segundo Item
Quarta Lista
Item 1
Item 1.1 Item 1.2
Item 2
Item 2.1 Item 2.2
Item 3
-
8/14/2019 Apostila de XHTML
16/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 16 de 38
Exemplo 08:
XHTML Exemplo 08
Exemplo de uso de Listas de Definio
Hardware : Parte Fisica do computador Software : Parte Lgica do computador
-
8/14/2019 Apostila de XHTML
17/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 17 de 38
2.3) Atributos
Os atributos so utilizados para complementar a personalizao dos componentes, seja com relao
a seu comportamento ou quanto a sua apresentao. Estes atributos so inseridos sempre nos marcadores
de abertura e os valores atribudos a eles devem estar entre aspas duplas.
Dentre os atributos podemos destacar os atributos universais, os quais podem ser utilizados por
qualquer marcador existente na linguagem.
Atributos Universais
Atributo Descrio
id Identifica unicamente os elementos dentro dos documentos XHTML;
class Especifica a classe a que um elemento pertence;
title Especifica um ttulo que pode ser utilizados para nomear o elemento;
style
Especifica o estilo de exibio do elemento. Sua sintaxe :
style: [propriedade1]:[valor1];
[propriedade2:[valor2];
....
Outra famlia de atributos a de apresentao, cuja maioria das opes foi migrada para as folhas
de estilo, e cujo uso direto no documento XHTML deve ser evitado:
Atributos de Apresentao
Elemento Atributo Descrio
--- align alinhamento horizontal, pode assumir osseguintes valores:left, right e center
div
color cor da fonte
font-size tamanho da fonte
font-family tipo da fonte
backgound-color cor de fundo do texto
margin margem a ser inserida em toda volta do texto
body
backgound imagem de fundo;
bgcolor cor de fundo;
-
8/14/2019 Apostila de XHTML
18/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 18 de 38
text cor do texto da pgina;
link cor dos textos dos links no visitados;
vlink cor dos textos dos links j visitados;
alinkcor dos textos dos links que esto sendo
chamados.
hr
align alinhamento com relao ao documento, assumeos valores:left, right e center;
noshade impede o uso de sombra na linha;
size espessura da linha;
width largura da linha em relao a pgina
font
size assume valores de 1 5
color cor da fonte
face fonte a ser utilizada
basefont -mesmas propriedades do elemento font, mas
cujos valores especificam a formatao de todos oselementos da pgina.
-
8/14/2019 Apostila de XHTML
19/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 19 de 38
2.4) Ligaes
As ligaes hipertexto so figuras ou trechos de textos que quando clicados, ou acionados, re-
direcionam o navegador ou leitor XHML um outro documento, ou a outro ponto do documento atual. Neste
contexto h o conceito de pgina de origem, na qual existe a ligao, e a pgina destino, para a qual a
ligao aponta.
Em XHTML existem as ligaes absolutas, normalmente utilizadas para documentos em outros
servidores, e as ligaes relativas, utilizadas para referenciar pginas que esto hospedadas no mesmo
servidor que a pgina de origem.
O elemento utilizado para criar as ligaes nos documentos, que so feitas atravs do uso
do atributo href, cujo valor o endereo de destino da ligao :
texto da ligao
Uma ligao relativa pode se parecer com:
Notas de aulas
... e uma ligao absoluta:
Notas de aulas
onde: http:// o nome do protocolo utilizado, que poderia ser substitudo por ftp://ou mailto:dependendo da necessidade;
lrodrigo.lncc.br o endereo do servidor a ser acessado;
/estacio/aulas.xhtml o endereo da pgina, dentro do servidor.
Outro atributo que pode ser utilizado pelo elemento o name, utilizado na criao de ancoras
dentro do mesmo documento.
Texto da ancora
Para referenciar um ancora no mesmo documento pode usar:
Texto da ligao
-
8/14/2019 Apostila de XHTML
20/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 20 de 38
Para referenciar um ancora em outro documento:
Texto da ligao
Uma opo ao atributo name, mas que s funciona nos navegadores mais recentes o atributo id
presente na maioria dos elementos do XHTML, por exemplo:
Ambiente Internet
Para definir uma ligao no mesmo documento para este elemento poderamos utilizar:
Material das aulas
Exemplo de uso:
XHTML Exemplo 09
Exemplo de uso de Ligaes Hipertexto
Menu :
[-] Links teis
[-] Sites de Busca
[-] Referencias
Links teis :
| http://www.ig.com.br
| http://www.bol.com.br| http://www.gmail.com| http://www.hotmail.com |
Sites de Busca :
| http://www.google.com.br
| http://www.yahoo.com.br| http://www.altavista.com.br| http://www.cade.com.br |
Referencias :
| Open Office
| Debian Linux| SuSe Linux |
-
8/14/2019 Apostila de XHTML
21/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 21 de 38
-
8/14/2019 Apostila de XHTML
22/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 22 de 38
2.5) Manipulando Imagens
Atualmente os navegadores aceitam trs formatos de figuras: GIF, JPEG e PNG, que podem ser
includas nas pginas atravs do elemento . Este elemento possui o atributo alt, que deve ser
utilizado para fornecer um texto alternativo quando a imagem no puder ser visualizada, j o atributo src
deve ser utilizado para indicar a localizao da figura. Por exemplo:
Alm destes, o elemento ing possui os seguintes atributos:
Atributos
Atributo Valor Descrio
longdec ------ aponta para um arquivo texto, que possui umadescrio para a imagem.
width pixels,percentagem define o comprimento da imagem
height pixels,percentagem define o altura da imagem
vspace(descontinuado)
pixels,percentagem espao vertical a ser deixado ao redor da imagem
hspace(descontinuado)
pixels,percentagem espao horizontal a ser deixado ao redor da imagem
align(descontinuado)
right, left, top,middle, botton posiciona a figura da pgina.
border(descontinuado)
pixels define a espessura da borda
-
8/14/2019 Apostila de XHTML
23/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 23 de 38
Exemplo de uso:
XHTML Exemplo 10
Exemplo de uso de Figuras
Figura com alinhamento padro: ,"middle" ,"texttop" .
Borda = 0 ,
borda = 1 ,borda = 2 .
-
8/14/2019 Apostila de XHTML
24/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 24 de 38
2.6) Manipulando Tabelas
O elemento o responsvel pela manuteno das tabelas nesta linguagem. Na
construo de uma tabela podemos utilizar os seguintes elementos para definir suas partes:
Atributos
Elemento Descrio
delimita o tabela e seus elementos
elemento opcional que indica o ttulo da tabela
delimita o cabealho da tabela
delimita o roda-p da tabela
delimita o corpo da tabela
delimita as linhas da tabela
delimita as colunas da tabela
Uma clula pode se estender por mais de uma coluna, para isto deve ser utilizado o atributo
colspanseguido do nmero de colunas que a clula deve se expandir. Caso a clula tenha de ocupar
mais de uma linha o atributo a ser utilizado o rowspan, ambos os atributos devem ser inseridos dentro
de uma declarao .
Uma tabela possui alguns atributos importantes dos quais podemos destacar:
Atributos
Atributo Valor Descrio
border pixels espessura da linha do desenho da borda databela
framevoid, above, below, lhs, rhs,hsides, vsides, box, border
informa qual rea deve ser desenhada emtorno da tabela.
rules none, all, groups, row, cols informa como as linhas entre as clulassero desenhadas
cellspacing pixels espaamento entre asclulas
cellpading pixels espaamento entre o contedo da clula esua borda
bgcolornome da cor,
cdigo hexadecimaldefine a cor de fundo da tabela, da linha ouda clula
align left, right define o alinhamento da tabela dentro dodocumento
-
8/14/2019 Apostila de XHTML
25/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 25 de 38
Exemplo de uso de tabelas :
XHTML Exemplo 11 Exemplo de uso de Tabelas
Ttulo da Tabela Cabealho da Tabela
Linha 1 Coluna 1Linha 1 Coluna 2
Linha 1 Coluna 3
Linha 2 Coluna 1Linha 2 Coluna 2Linha 2 Coluna 3
Linha 3 Coluna 1Linha 3 Coluna 2Linha 3 Coluna 3
Rodap da tabela
-
8/14/2019 Apostila de XHTML
26/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 26 de 38
Exemplo de uso de tabelas com unio de clulas:
XHTML Exemplo 12 Exemplo de uso de Tabelas
Ttulo da Tabela
Cabealho da Tabela
Linha 1 Coluna 1Linha 1 Coluna 3
Linha 2 Coluna 1Linha 2 Coluna 2Linha 2 Coluna 3
Linha 3 Coluna 1Linha 3 Coluna 2
Rodap da tabela
-
8/14/2019 Apostila de XHTML
27/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 27 de 38
Exemplo de uso de alguns dos atributos das tabelas:
XHTML Exemplo 13 Exemplo de uso de Tabelas
Ttulo da Tabela
Cabealho da Tabela
Linha 1 Coluna 1Linha 1 Coluna 3
Linha 2 Coluna 1Linha 2 Coluna 2Linha 2 Coluna 3
Linha 3 Coluna 1Linha 3 Coluna 2
Rodap da tabela
-
8/14/2019 Apostila de XHTML
28/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 28 de 38
2.7) Trabalhando com Frames
Os frames, ou quadros, permitem que uma pgina possa ser dividida em vrias partes, cada uma
carregando outra. Mesmo no tendo seu uso indicado no XHTML, j que dependendo da resoluo domonitor, o cliente pode ter problemas em visualizar uma pgina. Mesmo assim eles continuam sendo
largamente empregados.
Para a criao de uma pgina com frames devemos utilizar dois elementos:
e o , o primeiro define as sesses do documento e o segundo o contedo de cada
sesso.
O elemento framesetpossui os seguintes atributos:
Atributos
Atributo Valor Descrio
colspixels, relaes e
percentagem,coringa
informa a quantidade e o tamanho das colunas
rowspixels, relaes e
percentagem,coringa
informa a quantidade e o tamanho das linhas
O elemento framepossui os seguintes atributos:
Atributos
Atributo Valor Descrio
src endereo informa a localizao do arquivo XHTML a sercarregado
id nomeinforma o nome do frame, a ser utilizado pelo atributotargetde uma ligao
scrolling yes, no informa se deve ser includa as barras de rolagemquando a pgina no cabe por inteiro no frame
frameborder pixels especifica a espessura da borda do frame
noresize noresize impede que o usurio redimensione um frame
marginheight pixels espao a ser deixado entre a parte superior e inferiordo frame
margintwidth pixels
espao a ser deixado entre o lado esquerdo e direito
do frame
-
8/14/2019 Apostila de XHTML
29/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 29 de 38
Para um melhor uso dos frames, podemos utilizar as ligaes para alterar o seu contedo medida
que o usurio clica nos hiperlinks, para tal deve-se definir onde a ligao deve abrir o documento, isto feito
atravs do atributo target. Os possveis valores para este atributo so:
Atributos
Valor Descrio
_self a nova pgina ser carregada no frame atual
_blank a nova pgina ser carregada em uma nova janela
_parent a nova pgina ser carregada no frame pai
_top a nova pgina ser carregada nesta janela,substituindo a pgina atual que usa frames
nome
informa o nome do frame no qual a pgina deve ser
carregada
Exemplo de uma pgina com a definio do frameset:
XHTML Exemplo 14
-
8/14/2019 Apostila de XHTML
30/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 30 de 38
Exemplo de uma pgina com do frame topo :
XHTML Exemplo 14
[ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ]
Exemplo de uma pgina com do frame esq :
XHTML Exemplo 14
Exemplo de uma pgina com do frame dir :
XHTML Exemplo 14
-
8/14/2019 Apostila de XHTML
31/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 31 de 38
Resultado obtido no navegador
Contudo a forma indicada de se trabalhar com frames no XHTML atravs do uso dos iframes,
os quais no necessitam da declarao dos frameset. Eles so normalmente conhecidos como frames de
linha e possuem a sintaxe:
Texto a ser apresentado caso o browser no seja compatvel
-
8/14/2019 Apostila de XHTML
32/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 32 de 38
Exemplo de uso:
XHTML Exemplo 15
Texto a ser utilizado por navegadores que no suportam iframe[ Pessoal ] [ Mestrado ] [ Artigos ] [ Linux ] [ Segurana ]
-
8/14/2019 Apostila de XHTML
33/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 33 de 38
2.8) Trabalhando com Formulrios
Os formulrios so utilizados para o envio de informaes ao servidor ou para a interao da pgina
com o usurio atravs do uso de javaScripts. Os dados do formulrio sero tratados somente quando
ocorrer sua submisso, que pode ser realizada atravs do boto de submit. Os valores inseridos nosformulrios so retornados em pares, onde a primeira parte o nome do elemento e a segunda o valor
atribudo, sendo que eles so separados uns dos outros pelo sinal de igual (=)
Os dados podem ser submetidos atravs de dois mtodos GETe POST. No mtodo GETos dados
sero anexados URL e enviados ao servidor, j o mtodo POST envia os dados junto com as demais
informaes contidas no cabealho do HTTP. Ao contrrio do POST que pode manipula qualquer
quantidade de informaes, o GETfica limitado pelo tamanho mximo permitido para uma URL, alm disto,
o GET menos seguro, mas seu uso permite o reenvio de um formulrio sem que o mesmo seja re-digitado
Para a construo dos formulrios devemos fazer uso do elemento , que possui os
seguintes atributos:
Atributos
Atributo Valor Descrio
action endereo
Informa o endereo da pgina que ir tratar asinformaes do formulrio. O endereo no precisa
ser uma pgina, pode ser um endereo de e-mail(mailto:[email protected])
method GET, POST especifica o mtodo de envio das informaes
name nome especifica o nome do formulrio, uma pgina podepossuir mais de um formulrio
target frame informa o nome do frame que tratar os dados doformulrio
enctype text/plain informa o mtodo de codificao utilizado no enviodos dados
-
8/14/2019 Apostila de XHTML
34/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 34 de 38
Para armazenar as informaes fornecidas pelo usurio podemos fazer uso do elemento , que
possui os seguintes atributos:
Atributos
Atributo Valor Descrio
name nome especifica o nome do elemento
value valor especifica o contedo inicial do elemento
disabled disabled informa que um elemento no pode ser manipuladopelo usurio
type tipo informa o tipo do elemento
Os principais tipos do elemento inputso :
input
text caixa que pode ser utilizada para insero deinformaes [texto]
password caixa utilizada para digitao de senhas, ou camposque no devem ser lidos por terceiros[texto]
filecaixa para digitao do nome de um arquivo, contaainda como um boto para realizar a busca doelemento[texto]
submit cria um boto que ao ser clicado submete o contedodo formulrio[boto]
reset cria um boto que ao ser clicado restaura os camposao seu valor default[boto]
button cria um boto que pode ser associado a umjavaScript
image insere uma imagem [boto]
checkbox insere uma caixa de seleo, que permite a seleode mais de uma elemento ao mesmo tempo[seleo]
radio inserida uma caixa de seleo, que no permiteselees mltiplas[seleo]
hiddeninsere campos ocultos, que no so exibidos, masque podem ser utilizados para o armazenamentotemporrio de informaes
-
8/14/2019 Apostila de XHTML
35/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 35 de 38
O elemento INPUT do tipo text, possui os atributos:
Atributos
Atributo Valor Descrio
width numeral quantidade mxima de caracteres
maxlenght numeral largura mxima do elemento
readonly readonly o contedo da caixa no pode ser alterada
O elemento INPUT do tipo button, possui o atributo:
Atributos
Atributo Valor Descrio
disabled true utilizado para desabilitar um determinado boto
O elemento INPUT do tipo seleo, possui o atributo:
Atributos
Atributo Valor Descrio
checked checked especifica quais elementos esto marcados comoselecionado
Outro elemento de insero de informao o textarea( ), ele permite a
digitao de vrias linhas e possui os atributos:
Atributos
Atributo Valor Descrio
cols numeral quantidade de caracteres por linha
rows numeral quantidade de linha na caixa
id nome identificao do elemento
Para a criao de uma lista para seleo (combo box) devemos utilizar o elemento select(
), que delimita a lista, e o elemento option( ) utilizado na
definio de cada item da lista.
-
8/14/2019 Apostila de XHTML
36/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 36 de 38
Exemplo de Uso de formulrios:
XHTML Exemplo 16
Exemplo de uso de formulrios: Nome......:
Endereo:
E-mail....:
Telefone.:
Senha.....:
Curriculo:
Idade .....: Maior de Idade | Menor de Idade
Sistema Operacional: Linux | BSD | AIX | Solaris |
MacOS | Outro
Estado Civil :
Casado Solteiro
-
8/14/2019 Apostila de XHTML
37/38
Prof. Lus Rodrigo de Oliveira Gonalves [email protected] http://www.lncc.br/~lrodrigo/ Pgina 37 de 38
-
8/14/2019 Apostila de XHTML
38/38
Referncias
[1] Referncia de XHTML 1.0 (www.w3schools.com/xhtml/xhtml_reference.asp);
[2] Tutorial da W3C (www.w3schools.com/w3c);
[3] W3Schools (www.w3schools.com/default.asp);
[4] .WebSemntica (www.comciencia.br/reportagens/internet/net08.htm).
[5] Manual e XHTML em ingls (http://www.htmlstaff.org/xhtmlmanual/Cover.html)
[6] Apostila XHTML, Prof. Jos Celso Freire Junior, Universidade Estadual Paulista, Ano de 2003
Ferramentas
[1] Para saber se seu documento XHTML vlido: http://validator.w3.org
[2] TIDY: http://tidy.sourceforge.net ou www.w3.org/People/Raggett/tidy.