Escolar Documentos
Profissional Documentos
Cultura Documentos
TAG
1
1.0
DESCRIO 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>
[--]
<body></body>
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 <!-- 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" /> <!--nome do autor--> <meta name="description" content="Homepage with simple contents" /> <!--descrio da pgina--> _ [--]
<title></title>
browser
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
<meta name="Keywords" content="programao, xhtml, ricardo silva" /> <!--palavras-chave--> <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: [--] [--] [--]
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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" /> <!--ligao a estilo externo-->
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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>
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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) ]
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>
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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.
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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")
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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.
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
(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" />
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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" />
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
HTML e
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;
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010
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
Escola Secundria Quinta das Palmeiras - Covilh | Curso Tcnico/a de Multimdia - Nvel III | Mdulo: XHTML | Formador: Ricardo Silva | 2010