Curso de XHTML

(X)HTML
http://www.w3schools.com/html/default.asp

(X)HTML
conceitos introdutórios
atualmente um documento HTML é composto por uma série de elementos
formatados por CSS.

Em HTML (normalmente referimos como HTML o que é XHTML) existe uma clara
distinção entre estrutura e forma.

O XHTML é uma versão mais restrita e limpa do HTML e é deﬁnido como uma
aplicação XML. O XHTML é uma combinação de HTML com XML, uma depuração
do HTML tendo em conta a organização estrutural do XML.

(X)HTML
além disso, o XHTML

• é uma linguagem de “marcação” / markup (e não programação!) usada nas
páginas da web;

• os documentos são escritos apenas com texto;
• cada página é um ficheiro que tem a extensão .htm (ou .html);
• o nome do ficheiro tem de ser em minúsculas, sem acentos e sem espaços
(tal como todos os ficheiros utilizados no projeto web tais como imagens,
scripts, pastas, etc...).

(X)HTML
conceitos introdutórios | identação do código

(X)HTML
um elemento HTML é constituído
preferencialmente por 3 partes

• marcador / etiquetas (tags) de
inicio constituída pelos símbolos <
e > e uma palavra reservada (p, elemento
form, img, etc...)

• um conteúdo
<p> html </p>
• marcador (tags) de ﬁm

<marcador de início> conteúdo </marcador de ﬁm>

(X)HTML
conceitos introdutórios | marca de início
como foi referido anteriormente, o marcador de inicio é constituída pelos símbolos
< e > e uma palavra reservada.

exemplo:
<a>
<p>

No entanto, alguns têm ainda atributos que o personalizam ou complementam e
que podem ser obrigatórios ou opcionais. O seu valor é colocado entre aspas.

exemplos:
<a href=”index.htm”> <img src=”test.jpg”> <div id=”intro”>

<marcador de início atributo=””> conteúdo </marcador de ﬁm>

(X)HTML
conceitos introdutórios | conteúdo
conteúdo é basicamente o texto que aparece nas páginas;
Pode ser escrito em português, com maiúsculas, minúsculas, acentos e espaços


(X)HTML
conceitos introdutórios | marca de fim
a marca de fim serve exclusivamente para indicar que o fim do elemento que
estamos a utilizar

Usa-se o sinal /

Por exemplo:

</p>
</table>


(X)HTML
conceitos introdutórios | características do XHTML
o XHTML exige uma sintaxe limpa e apresenta as seguintes características:

• Os elementos têm que ser claramente aninhados (nested) da seguinte forma:
<b><i> Isto é um texto a bold e itálico </i></b>
e não desta
<b><i> Este é um texto a bod e itálico </b></i>

• Os seus elementos devem ser sempre fechados
<p>Isto é um parágrafo</p>

• Os elementos vazios, também, devem ser fechados e com um espaço extra
antes da barra
<br /> <hr /> <img src="imagem.jpg" />

• Os seus elementos devem ser sempre em minúsculas

(X)HTML
estrutura da página
exemplo da estrutura base de um documento HTML:

<html>

<head>
... cabeçalho
</head>

<body>
corpo
...

</body>

</html>

(X)HTML
estrutura da página
à luz do XHTML, um documento vazio teria então o seguinte aspeto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"www.w3.org—xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/
xhtml">

<head>
.... cabeçalho
</head>

<body>
.... corpo
</body>

</html>

(X)HTML
estrutura da página | deﬁnição do DTD
DOCTYPE – O tipo de DTD (document type deﬁnition) indica ao browser qual o
tipo de marcação que está a ser usada e um link para o documento.

Por defeito pomos a última mais usada:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"www.w3.org—xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/
xhtml">

(X)HTML
estrutura da página | o cabeçalho | title
o cabeçalho do documento contém diversas informações importantes para o
correto funcionamento e formatação do conteúdo do documento (pode ser
entendido como os bastidores do palco principal).

Por exemplo, é nesta área que se deﬁne o titulo que aparece na barra superior do
navegador (ou mais recentemente, no separador). De que forma? Recorrendo à
etiqueta <title>

Ex.
<title> atelier de multimédia </title>

(X)HTML
estrutura da página | o cabeçalho | meta
o elemento <meta> é usado para conter meta-informação sobre os conteúdos do
documento, de forma a que os mecanismos de pesquisa possam mais facilmente
identiﬁcar e catalogar os documentos encontrados.

• keywords (palavras chave para os motores de busca)
• tipo de conteúdos e de linguagem
• tipo de codiﬁcação dos caracteres
• autor
• descrição da página
• tempo de atualização automática
• entre outros...

(X)HTML
estrutura da página | o cabeçalho | exemplo de meta info.
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>atelier de multimédia</title>
<meta name="author" content=“marco pinheiro">
<meta name="description" content=“página da uc">
<meta name="keywords" content=“palavras chave, separadas, por, virgulas">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" />
<script type="text/javascript" src="javascriptﬁle.js"></script>

</head>

(X)HTML
estrutura da página | o cabeçalho | ex. de links declarados
é ainda nesta zona que se definem os links para os ficheiros externos.

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>atelier de multimédia</title>
<meta name="author" content=“marco pinheiro">
<meta name="description" content=“página da uc">
<meta name="keywords" content=“palavras chave, separadas, por, virgulas">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" />
<script type="text/javascript" src="javascriptfile.js"></script>

</head>

(X)HTML
estrutura da página | o corpo (body)
o elemento body contêm todos os elementos, atributos e informação que a página
deve apresentar ao leitor.

O elemento body deve ser composto depois do elemento head e antes da tag de
fecho do elemento html:

...
<body>
Todos os conteúdos do documento
XHTML.
</body>
...

(X)HTML
estrutura da página | os comentários
o elemento  permite-nos inserir comentários no código HTML. Os
comentários não são lidos pelo browser, embora sejam visíveis na source do
documento.

<!—Isto é um comentário num doc. XHTML -->

(X)HTML
estrutura da página | elementos do corpo | <h1> ... <h6>
títulos (cabeçalhos)

existem 6 níveis de títulos (headings).

o nível de importância é deﬁnido por um
número entre 1 e 6.

o mais importante será o <h1> e o menos
importante o <h6>. Esta importância

Ex.

<h1>Mais importante</h1>

<h2>2º mais importante</h2>

<h6>Último</h6>

(X)HTML
estrutura da página | elementos do corpo | <p>; <br />
parágrafo e quebra de linha

parágrafos: delimitam blocos de
informação
<p> conteúdo do parágrafo </p>

quebra de linha:
<br />
(elemento que não precisa de
marca do ﬁm)

Ex.

<p> Em OM temos três áreas: HTML, CSS
e Drupal. A UC tem 60 horas. <br /> O
docente é o Marco Pinheiro, quer gostem
quer não!</p>

(X)HTML
estrutura da página | as réguas horizontais hr
o elemento hr permite deﬁnir réguas
horizontais que podem ser usadas para
quebrar textos longos ou para estruturar
melhor um documento.

o elemento hr é um elemento vazio, logo,
não tem tag de fecho, devendo ser fechado
na tag de abertura, precedida de um espaço.

<p>Textos muito longos podem ser divididos em
secções com headings ou, em alternativa,
réguas horizontais</p> <hr /> <h3>Um heading
também quebra o texto.</h3> <p>Podendo um novo
texto começar imediatamente a seguir.</p>

As réguas são formatadas por defeito a toda
a largura da janela do documento, com
sombreado.

(X)HTML
estrutura da página | elementos do corpo | formatação txt
negrito
<b>…</b>
<strong> ... </strong>

itálico
<i>…</i>
<em> ... </em>

sublinhado (underline)
<u>…</u>

Ex.

<p> Em OM temos três áreas: <b>HTML,
CSS e Drupal</b>. A <i>UC</i> tem 60
horas. <br /> O docente é o <u>Marco
Pinheiro</u>, quer gostem quer não!</p>

(X)HTML
estrutura da página | elementos do corpo | formatação txt
e agora estarão a pensar: e como se formata o tipo
de letra, tamanho, cor, etc.? >> CSS (mais adiante).

(X)HTML
estrutura da página | elementos do corpo | imagens
As imagens são normalmente usadas inline, ie, inseridas num bloco de texto.
O elemento img é sempre usado com o atributo src (source) que aponta para a url
da imagem, no servidor que aloja o documento html ou outro e com o atributo alt,
que fornece uma descrição em texto da imagem. O elemento img é um elemento
vazio, devendo portanto ser sempre fechado com />.

O atributo alt permite que os browsers possam apresentar texto em lugar da
imagem caso o suporte de imagens esteja desligado, o browser apenas suporte
texto, enquanto a imagem é carregada, ou se a imagem estiver, por alguma razão,
inacessível.

As imagens são dimensionadas automaticamente pelo browser quando carregadas.
Contudo, em documentos complexos, por vezes é recomendável utilizar também os
atributos width e height para indicar ao browser a dimensão das mesmas, de forma
a que a página possa ser formatada mesmo que estas estejam inacessíveis ou
demorem mais tempo a carregar.

(X)HTML
imagem
<img src=“caminho e nome da imagem com a
extensão” [alt=”texto alternativo”] [width=”largura”]
[height=”altura”] />

<img src=“logotipo.jpg” />

nota: ter em atenção que o caminho e o nome do ﬁcheiro
da imagem têm de ser escritos partindo do ponto de partida
do documento; ou seja, se a imagem estiver na directoria
do documento HTML só se escreve o nome do ﬁcheiro. Se
estiver noutra directoria temos de seguir os mesmo
cuidados que nas hiperligações

mais uma vez: usar minúsculas, não usar acentos e
espaços nos nomes das imagens!

(X)HTML
imagem
<img src=“caminho e nome da imagem com a extensão” />

<p> Uma imagem com o tamanho real: <img src="http://meusregistros.pbwiki.com/f/
grav_criancas_sala_de_aula2.jpg" /> </p>

no caso de se pretender apresentar a imagem com dimensões diferentes do
original, poderão ser utilizadas as propriedades width (largura) e height
(altura) e especiﬁcar a medida (em píxeis).

<p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura
<img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg"
width="48" height="48" /> </p>

<p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura
<img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg"
width="148" height="48" /> </p>

(nota: caso não se especiﬁque uma destas duas propriedades, o redimensionamento será
feito de forma proporcional, o que é bastante útil)

(X)HTML
estrutura da página | elementos do corpo | image maps
imagem
<img src=“caminho e nome da imagem com a extensão” />

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sol" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercúrio" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Vénus" />
</map>

uma vez que a tarefa pode tornar-se demorada, existem diversas ferramentas que
ajudam a fazer esta tarefa:

• http://www.maschek.hu/imagemap/imgmap
• editores de html (dreamweaver, kompozer, etc.)

(X)HTML
estrutura da página | elementos do corpo | listas numeradas
lista
<ol>…</ol>

elemento de uma lista
<li>…</li>

Ex.

<ol>
<li>Informatica</li>
<li>Fotograﬁa</li>
<li>Video</li>
</ol>

(X)HTML
Ex.
<font size=1>
<h4>Lista numeradas:</h4>

<ol>
<li>Maças</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>

<h4>Lista com letras:</h4>

<ol type="A">
<li>Maças</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>

...

(X)HTML
Ex.
<font size=1>
<h4>Lista com letras minusculas:</h4>

<ol type="a">
<li>Maças</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>

<h4>Lista com numeros romanos:</h4>

<ol type="I">
<li>Maças</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>

...

(X)HTML
Ex.
<font size=1>
<h4>Lista com numeros romanos minusculos:</h4>

<ol type="i">
<li>Maças</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>

</font>

(X)HTML
estrutura da página | elementos do corpo | listas n/ numeradas
lista
<ul>…</ul>

elemento de uma lista
<li>…</li>

Ex.

<ul>
<li>Informatica</li>
<li>Fotograﬁa</li>
<li>Video</li>
</ul>

(X)HTML
estrutura da página | elementos do corpo | âncoras
O elemento a (anchor) deﬁne ligações relativas ou absolutas. Ao contrário da maior
parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo
name.

<a href=”documento”> descrição </a>
<a name=”zona1”> descrição </a>

(X)HTML
estrutura da página | elementos do corpo | âncoras (internas)
O elemento a (anchor) define ligações relativas ou absolutas. Ao contrário da maior
parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo
name.

O atributo name permite que secções de um documento XHTML sejam rotuladas
com uma referência específica. O atributo name permite criar links para uma
secção específica dentro do documento. Assim, se tivermos um documento longo
podemos criar dentro do documento um link para o topo, por exemplo.

A utilização deste elemento apenas com o atributo name não resulta na criação de
um link visível mas sim na marcação de um alvo para criação de links.

(X)HTML
estrutura da página | elementos do corpo | âncoras (internas)
Assim, o link

<a href="#topo">Topo</a>

remete-nos para o topo desta página. Quando os links são feitos dentro de um
mesmo documento, devemos sempre especiﬁcar o name com #,

<a name=”topo”> bla bla bla </a>

mesmo quando queremos linkar ao topo do documento (e neste caso deveremos
criar um name no topo), caso contrário, especiﬁcando apenas o nome do
documento, faremos com que o browser recarregue a página.

(X)HTML
estrutura da página | elementos do corpo | âncoras (externas)
hiperligação (link)
faz a ligação a outros documentos

<a href=”documento”> descrição </a>

Ex.

<p>Já passaste pelo <a href="http://
elearning.esev.ipv.pt/moodle1112/course/view.php?
id=613">Moodle de OM</a>? É bastante útil!</p>

(X)HTML
hiperligação (link)
faz a ligação a outros documentos

Ex.

Ligação de um ficheiro que está em w:tmficheiro1.htm para um que está em w:tmficheiro2.htm
<a href=“ficheiro2.htm>…</a>

Ligação de um ficheiro que está em w:tmficheiro1.htm para um que está em w:tmteorica
ficheiro2.htm
<a href=“teorica/ficheiro2.htm>…</a>

Ligação de um ficheiro que está em w:tmficheiro1.htm para um que está em w:hjficheiro2.htm
<a href=“../hj/ficheiro2.htm>…</a>

(X)HTML
a nova página abre na janela atual do navegador. Se
desejarmos abrir uma nova janela em cima da já
aberta, utilizar o atributo target=”_BLANK”

<a href=”documento” target=”_BLANK”> descrição </a>

pode e deve ainda ser adicionada descrição à
hiperligação recorrendo ao atributo title

<a href=”documento” target=”_BLANK” title=”clique para
aceder à nossa unidade curricular”> descrição </a>

(X)HTML
estrutura da página | elementos do corpo | as tabelas
muitas vezes é usada para estruturar a informação

tabela
<table>…</table>

linha (table row)
<tr>…</tr>
célula (table data)
<td>…</td> (no caso de ser a primeira linha: <th> ... </th> - cabeçalho)

<table border=“2”>
<tr>
<th>título 1</th>
<th>título 2</th>
</tr>
<tr>
<td>Célula da 2ª linha e 1ª Coluna</td>
<td>Célula da 2ª linha e 2ª Coluna</td>
</tr>
</table>

(X)HTML
estrutura da página | elementos do corpo | as tabelas
também pode ser adicionada uma legenda à tabela
<caption>Legenda</caption>
Ex.

<h4> Esta tabela tem legenda e borda de 6: </h4>

<table border="6">
<caption>Legenda da tabela...</caption>
<tr>
<th>tit1</th>
<th>tit2</th>
<th>tit3</th>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

(X)HTML
estrutura da página | elementos do corpo | iframes
as iframes servem para abrir
uma janela para outro local (ou
documento) dentro do próprio
documento. É como que uma
“janela” para outro local!

<iframe src="URL"></iframe>

Ex.

<iframe src="demo_iframe.htm"
width="200" height="200"></
iframe>

(X)HTML
embeber conteúdos externos | widgets sociais

youtube.com

twitter.com/about/
resources/widgets/

http://web.appstorm.net/how-to/social-media-how-to/6-
tools-to-create-a-google-plus-proﬁle-widget-for-your-site/

http://developers.facebook.com/docs/plugins/

(X)HTML
validação do código escrito
http://validator.w3.org

(X)HTML
estrutura da página | formulários

(X)HTML
estrutura da página | formulários

http://www.w3schools.com/html/html_forms.asp

(X)HTML
estrutura da página | formulários | tags essenciais

• Dentro do grupo dos formulários, o HTML oferece os seguintes elementos:

• Input

• text fields (caixa de input de uma linha)
• file fields
• checkbox (liga/desliga)
• buttons (submit / reset)
• radio (caixa de opção)
• hidden fields (campos oculos)

• textareas (áreas de texto)

• select (caixas de combinação / listagem)

• fieldset’s (delimitação e agrupamento de campos)

(X)HTML
estrutura da página | formulários | tags essenciais | form

• Qualquer formulário criado em HTML é delimitado com as tags <form> (e </form>...)

• A tag form tem as seguintes propriedades:

• action - ﬁcheiro que irá receber / processar os dados

• method - tipo de envio (GET ou POST)

• enctype - tipo de dados a ser enviado pode ser de dois tipos:

• application/x-www-form-urlencoded - envio apenas de texto

• multipart/form-data - envio de texto / ﬁcheiro (binário)
Ex. upload de uma foto, documento, etc.

• Ex. <form action="formProcessa.php" method="post" enctype="application/x-www-form-urlencoded"
name=”formulario”>

(X)HTML
estrutura da página | formulários | tags essenciais | input

• A tag <input type=”text”> desenha uma caixa de texto

• Tem a seguinte propriedade:

• size - número de caracteres que mostrará antes de desaparecerem

• Ex. <input type="text" size="45" name="nome">

(X)HTML

• A tag <input type=”password”> desenha uma caixa de texto

• Tem a seguinte propriedade:

• size - número de caracteres que mostrará antes de desaparecerem

• Ex. <input type="password" name="passwd" size="45">

(X)HTML

• As tags <input type=”hidden”> criam um campo cujo valor é deﬁnido apenas no código html e como tal,
nunca aparecerá desenhado junto dos outros campos.

• Obs. se o utilizador tiver curiosidade e for ver o código fonte da página, terá acesso ao valor declarado no
mesmo!

• Ex. <input type="hidden" name="escondido" value="192.168.1.1">

(X)HTML

• A tag <input type=”checkbox”> criam uma caixa cujo valor será de uma lógica booleana, ou seja, sim ou
não

• Caso o utilizador active esta caixa, será enviado para o servidor o valor atribuido à mesma (value). Caso
contrário, a variável é passada para o servidor com valor nulo

• Caso o programador queira ter a caixa activada de forma predeﬁnida, deverá adicionar a propriedade
checked com o valor checked

• Ex. <input type="checkbox" name="aceita" value="sim" checked="checked">

(X)HTML

• A tag <input type=”radio”> criam uma caixa cujo valor será de uma lógica booleana, ou seja, sim ou não

• Caso o programador queira ter a caixa activada de forma predeﬁnida, deverá adicionar a propriedade
checked.

Nota importante: Se for dado o mesmo nome às tags (neste caso - prato), o utilizador pode apenas
escolher uma opção! Caso contrário, poderia activar diversas tags radio.

• Exemplos:

<label>Peixe<input type="radio" name="prato" value="Peixe" checked></label>
<label>Carne<input type="radio" name="prato" value="Carne"></label>
<label>Salada<input type="radio" name="prato" value="Salada"></label>

(X)HTML

• A tag <input type=”file”> desenha uma caixa que permite seleccionar um ficheiro do computador do
cliente (que mais tarde será enviado para o servidor)

• Ex. <input type="file" name="foto" >

(X)HTML

• As tags <input type=”submit”> e <input type=”reset”> desenham um botão no formulário

• A única diferença entre eles é apenas o ﬁm a que se destinam.

• reset - limpa todos os campos que constam do formulário

• submit - envia os dados do formulário para o servidor para ser processado

• Ex. <input type="submit" name=”bt_encomenda” value=”Encomendar”>

• Ex. <input type="reset" name=”bt_reseta” value=”Limpar campos”>

(X)HTML
estrutura da página | formulários | tags essenciais | select

• A tag <select> criam uma caixa se listagem capaz de mostrar diversos valores sempre que o utilizar clicar
na mesma.

• Só será enviado para o servidor a opção seleccionada pelo utilizador.

• Exemplo:

<select name="sexo">
<option value="Masc" selected>M</option>
<option value="Fem">F</option>
<option value="Hibrido">H</option>
</select>

(X)HTML
estrutura da página | formulários | tags essenciais | textarea

• Ao contrário da tag <input type=”text”> que cria uma caixa de uma só linha, a tag <textarea> permite que
o utilizador tenha uma caixa de introdução de dados mas desta feita com várias linhas ao seu dispor.

• Tem as seguintes propriedades:

• cols - número de caracteres que mostrará em largura
!! ao contrário das outras caixas
de input, esta tag necessita ser
• rows - número de linhas que a caixa terá
fechada!

• Ex. <textarea cols="50" rows="5" name="mensagem"> </textarea>

(X)HTML
estrutura da página | formulários | tags essenciais | label

• A tag <label> cria um rótulo para o campo de input de forma a que o utilizador tenha conhecimento do que se
pretende com o mesmo.

• Ex.

<label>
nome do utilizador <input type="text" name="nomeUser">
</label>

(X)HTML
estrutura da página | formulários | tags essenciais | fieldset

• A tag <fieldset> desenha uma moldura em volta de um ou vários campos do formulário de forma a
agrupá-los visualmente com uma moldura em torno dos mesmos;

• Acrescenta ainda uma pequena legenda que descreve o “tema” a que os campos se referem.

• Ex. <fieldset><legend>dados profissionais</legend> ... (campos aqui!) ... </fieldset>

(X)HTML
referências
• cheat sheet de HTML:
http://elearning.esev.ipv.pt/moodle1112/ﬁle.php/613/html/html-cheat-sheet.pdf

(X)HTML
referências
• http://www.w3schools.com/html
• http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf
• tutoriais vídeo:
• http://www.guanabara.info/category/lp/html/

HTML5
http://www.w3schools.com/html5/html5_reference.asp

CSS3
http://html5-showcase.com/

Curso de XHTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Curso de XHTML

Semelhante a Curso de XHTML (20)

Mais de Marco Pinheiro

Mais de Marco Pinheiro (16)

Último

Último (20)

Curso de XHTML