Referencial XHTML

XHTML
TAG
1
1.0
Referencial das principais Marcas (tags) e Atributos
DESCRIO DA TAG
ATRIBUTOS PRINCIPAIS DA TAG
BASE <! DOCTYPE> Define o tipo de documento XHTML Exemplo para XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html></html>
Define e delimita um documento XHTML completo Define o corpo do documento
[--]
<body></body>
Text , title, topmargin , leftmargin , style, bgcolor ,
1
2
- tag a evitar ser usada, em vez utilizar declaraes em CSS | - a tag suporta os atributos centrais (ver Descrio de Atributos). - smbolo que identifica os atributos que devem ser evitados e substitudos por declaraes em folhas de estilo (CSS).
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
background , link , alink , vlink Exemplo: <body text="green" bgcolor="#90EE90" background="webpage/imagens/corn.jpg"> <head></head> Define informaes sobre o documento (pode incluir outras tags, tais como <base>, <link>, <meta>, <object>, <script>, <style> e <title>) Define o ttulo do documento <title>MyHomepage</title>  Define um comentrio  <meta /> Define os metadados sobre um documento HTML, til para a descrio do documento e facilidade de pesquisa por um Exemplo: <meta name="autor" content="Ricardo Silva" />  <meta name="description" content="Homepage with simple contents" />  _ [--]
<title></title>
browser
<meta name="Keywords" content="programao, xhtml, ricardo silva" />  <base /> Define o endereo padro ou um Exemplo: destino padro para todos os links <base href=http://www.ionline.pt target=_blank numa pgina ( uma tag de relacionamento) (aparece apenas dentro da tag <head>)
FORMATAO <b></b> Define o texto em negrito (bold) <b> texto a negrito</b> <i></i> Define o texto em itlico <i> texto a itlico</i> <strong></strong> Define texto forte (similar a bold) <strong> texto </strong> <style></style> Permite criar propriedades de uma Folha de Estilo (CSS), controlando o contedo das principais caractersticas do contedo de Exemplo [ver referencial CSS]: <head> <style type=text/css> h1 { font-family: gautami; font-weight: bolder; color: [--] [--] [--]
corpo da pgina (<body>). Define informaes de CSS para um documento XHTML.
#7fff00 } p { font-family: gautami; font-size: 72pt; color: #7fff00 } </style> </head>
Obrigatrio ser colocada dentro da Exemplo 2: marca <head>. <head> <style type=text/css> body {font-family: arial, Helvetica,sans-serif; color: black} /* comentrio */ </style> </head> <br /> um controlador de fluxo de contedo. Efectua uma quebra de linha Efectua um pargrafo de texto <p>escrevo um pargrafo</p> <div></div> Exemplo: <p align ="left(defeito)center|right"> escrevo um pargrafo</p> _
<p></p>
Exemplo: Divide o texto em seces individuais num documento <div align ="left(defeito)center|right"> (controlador de alinhamento e fluxo de contedo). Permite agrupar
mltiplos elementos. IMAGENS <img /> Permite inserir uma imagem no corpo do documento XHTML
<p>centrado</p></div>
align , border, alt, height, width, hspace, vspace, src Exemplo: <img src ="exemplo2.jpg" alt=texto />
LIGAES <a></a> Define uma ncora. Permite efectuar uma hiperligao href, target, type, rel Exemplo: <a href=http://www.google.com></a>
<link />
href, rel, type, media Define a relao entre um documento e um recurso externo Exemplo: (ex: o documento XHTML e uma Folha de Estilo - CSS) <link rel="stylesheet" type="text/css" href="style1.css" /> 
SCRIPT <script></script> Insere um script no documento XHTML

src, type
Exemplo (JavaScript): <script type=text/javascript> function alerta() { alert(alerta); } </script>
LISTAS <li> </li> Define um elemento nos tipos de lista (ordenada ou no ordenada) Define uma lista no ordenada
<ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul>
<ul> </ul>
<ol> </ol>
Define uma lista ordenada
<ol> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ol>
- Lista de atributos centrais

[na tabela acima, o smbolo
(comuns maioria das tags):
identifica as marcas em que TODOS os seguintes atributos podem ser associados ]
class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title - Descrio de ATRIBUTOS
(alguns exemplos)
[ quer na tabela acima e na lista seguinte, o smbolo declaraes em folhas de estilo (CSS) ]
identifica os atributos que devem ser evitados e substitudos por
align : alinhamento do contedo de uma marca (este atributo deve ser evitado, substituido por folhas de estilo). Valores: center | left (por defeito) | right | justify (para a marca <p>) Exemplo: <p align=center>este pargrafo est alinha ao centro</p>
No caso da marca <img>, este atributo considera os seguintes valores: left | right | center | top | middle | bottom
bottom - A imagem coloca-se esquerda do texto. O texto tem incio na linha nivelada com o canto inferior direito da imagem. Este o padro, portanto no precisa ser especificado. Exemplo: <img src="imagem.gif" />texto.
left - A imagem coloca-se esquerda da pgina. O texto tem incio na linha nivelada com o canto superior direito da imagem, contornando-a. Exemplo: <img src="imagem.gif" align="left" />texto.
right - A imagem coloca-se direita da pgina. O texto tem incio na linha nivelada com o canto superior esquerdo da imagem, contornando-a. Exemplo: <img src="imagem.gif" align="right" />texto.
top - A imagem coloca-se esquerda do texto. O texto tem incio na linha nivelada com o canto superior direito da imagem. Apenas uma linha fica ao lado da imagem, sendo que o resto do texto passa a fluir por baixo a partir da margem esquerda da pgina. de se notar que esse tipo de alinhamento mais til com pouco texto.
Exemplo: <img src="img.gif" align="top" />texto.
middle - A imagem coloca-se esquerda do texto. O texto tem incio na linha nivelada com o ponto central da imagem (sentido vertical). Apenas uma linha fica ao lado da imagem, e o resto do texto passa a fluir por baixo a partir da margem esquerda da pgina. Tal como em top, esse alinhamento tambm mais til com pouco texto. Exemplo: <img src="imagem.gif" align="middle">texto.
border: remove ou acrescenta um contorno (por exemplo, numa imagem). Valores: 0 (por exemplo: <img src=imagem1.jpg border=0 (sem contorno) | 8 (elevado contorno) /> href: especifica o destino de uma ligao / o alvo da hiperligao (cujos valores podem um endereo de uma pgina web, uma directoria, um ficheiro e uma ncora na pgina) <a href="http://www.google.com">motor de busca </a> Os valores possveis:

Um URL absoluto - aponta para outro site (como href="http://www.publico.pt") Um URL relativo - aponta para um arquivo dentro de um site web (como o href="default.htm") Uma ncora URL - aponta para uma ncora dentro de uma pgina (como a href="#topo")
Name : especifica o nome de uma ncora, ou seja, cria um marcador no documento (deve-se usar o atributo id) <a name="C4">Canal 4</a> target: especifica onde abrir o documento da ligao; <a target="valor"> _blank: abre o documento da ligao numa nova janela; _top: abre o documento da ligao no corpo da janela. rel: especifica o relacionamento entre o documento actual e o documento da ligao. Exemplo: <link rel="stylesheet type="text/css" href="style1.css" /> Faz a ligao a uma ficheiro de folha de estilo externo, e o atributo rel indica a relao do ficheiro alvo. src: Especifica a fonte (source) do URL da imagem a ser exibida. Exemplo: <img src=imagem1.jpg />
height: Define a altura (por exemplo, de uma imagem) Valores: percentagem (%) ou valores absolutos em pixels. Exemplo: <img src=imagem1.jpg height=600 /> width: Define o comprimento (por exemplo, de uma imagem) Valores: percentagem (%) ou valores absolutos em pixels.
Exemplo: <img src=imagem1.jpg width=50% height=600 /> bgcolor
(como atributo de <body>): Define uma cor de fundo para a pgina. Pode-se usar o nome da cor, o cdigo
hexadecimal no formato #rrggbb ou o cdigo decimal no formato rgb(x,x,x). Neste ltimo formato, x pode ser um nmero de 0 a 255 ou um percentual de 0% a 100%. Exemplos: <body bgcolor="blue"> <body bgcolor="#0000FF"> <body bgcolor="rgb(0,0,255)"> <body bgcolor="rgb(0%,0%,100%)"> Nota: o smbolo # no incio do cdigo hexadecimal obrigatrio. background
(como atributo de <body>): Define uma imagem como fundo de uma pgina. Se a imagem de nome
"imagem1.jpg" estiver no mesmo directrio onde se encontra a pgina. Exemplo: <body background="imagem1.jpg">.
hspace (como atributo de <img>): define as margens esquerda e direita (sentido horizontal), em pixels. No possvel definir margem esquerda diferente da margem direita. Exemplo: <img src="imagem.jpg" hspace="20" />
vspace (como atributo de <img>): define as margens superiores e inferiores (sentido vertical). Muito teis para distanciar o texto da extremidade da imagem. Exemplo: <img src="imagem.jpg" hspace="20" vspace="10" /> Da mesma forma, no possvel definir margem de cima diferente da margem de baixo. alt (como atributo de <img>): Especifica um texto que aparecer dentro do retngulo da imagem at que ela seja completamente descarregada no browser. Observe que alt vem de alternative (texto alternativo). importante para que o visitante saiba de qual imagem se trata, antes de ela ser exibida, ou mesmo depois. Exemplo: <img src="imagem1.jpg" alt="fotografia da cidade da covilh" />
ANEXOS Sintaxe XHTML

(Exemplo de um elemento)
HTML e
XHTML (Principais diferenas):
Todas as tags tm que ser fechadas, e devem ser fechadas antes de > (e ser deixado um espao antes de / )
Tags sem necessidade de serem fechadas em HTML 4.01 [XHTML 1.0 requer SEMPRE o fecho destas marcas (e de qualquer outra)]:
<area> | <base> |<basefont> | <br> | <col> | <frame> | <hr> | <img> | <input> | <isindex> | <link> |<meta> <param> Exemplo: <br />
Usar SEMPRE letra minscula; Os valores de atributos tm que estar entre "aspas; obrigatrio a declarao do DOCTYPE;
No possvel cruzar marcas, isto , fechar marcas encadeadas pela ordem inversa pela qual foram abertas ( ex: <p> <b> texto a negrito </p> <b> )
XHTML Contedo/Estrutura
Exemplo
Cabealhos Tamanho dos cabealhos Pargrafo Cor do texto do pargrafo Uma imagem (ex: fotografia) Uma imagem (ex: textura para fundo)
CSS Apresentao
XHTML ou CSS?
XHTML CSS XHTML CSS XHTML CSS

Referencial XHTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Referencial XHTML

Transféré par

Droits d'auteur :

Formats disponibles

XHTML

Referencial das principais Marcas (tags) e Atributos

ATRIBUTOS PRINCIPAIS DA TAG

Define e delimita um documento XHTML completo Define o corpo do documento

Text , title, topmargin , leftmargin , style, bgcolor ,

corpo da pgina (<body>). Define informaes de CSS para um documento XHTML.

#7fff00 } p { font-family: gautami; font-size: 72pt; color: #7fff00 } </style> </head>

SCRIPT <script></script> Insere um script no documento XHTML

Exemplo (JavaScript): <script type=text/javascript> function alerta() { alert(alerta); } </script>

Define uma lista ordenada

<ol> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ol>

- Lista de atributos centrais

(comuns maioria das tags):

identifica as marcas em que TODOS os seguintes atributos podem ser associados ]

identifica os atributos que devem ser evitados e substitudos por

Exemplo: <img src="img.gif" align="top" />texto.

Exemplo: <img src=imagem1.jpg width=50% height=600 /> bgcolor

ANEXOS Sintaxe XHTML

XHTML (Principais diferenas):

Vous aimerez peut-être aussi