(X)HTML.

(1)

(2)

(X)HTML

(3)

(4)

(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 é definido 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.

(5)

(X)HTML

conceitos introdutórios

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...).

(6)

(X)HTML

(7)

(X)HTML

conceitos introdutórios

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,

form, img, etc...)

•

um conteúdo

•

marcador (tags) de fim

<p>

html

</p>

conteúdo

</marcador de fim>

(8)

(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 fim>

(9)

(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

(10)

(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>

(11)

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

(12)

exemplo da estrutura base de um documento HTML: <html> <head> ... </head> <body> ... </body> </html>

(X)HTML

estrutura da página

cabeçalho corpo

(13)

à 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> .... </head> <body> .... </body> </html>

(X)HTML

estrutura da página

cabeçalho corpo

(14)

DOCTYPE – O tipo de DTD (document type definition) 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

(15)

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 define 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

(16)

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 identificar e catalogar os documentos encontrados.

•

keywords (palavras chave para os motores de busca)

•

tipo de conteúdos e de linguagem

•

tipo de codificação dos caracteres

•

autor

•

descrição da página

•

tempo de atualização automática

•

entre outros...

(X)HTML

(17)

<head>

<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

(18)

é ainda nesta zona que se definem os links para os ficheiros externos. <head>

<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

(19)

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

(20)

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

(21)

títulos (cabeçalhos)

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

o nível de importância é definido 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

(22)

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 fim)

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

(23)

o elemento hr permite definir 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

(24)

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

(25)

e agora estarão a pensar: e como se formata o tipo de letra, tamanho, cor, etc.? >> CSS (mais adiante).

(X)HTML

(26)

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

(27)

imagem

<img src=“caminho e nome da imagem com a

extensão” [alt=”texto alternativo”] [width=”largura”]

[height=”altura”] />

nota: ter em atenção que o caminho e o nome do ficheiro

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 ficheiro. 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

(28)

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 especificar 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

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

(X)HTML

(29)

imagem

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

<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

(30)

lista

elemento de uma lista

<li>…</li> Ex. <ol> <li>Informatica</li> <li>Fotografia</li> <li>Video</li> </ol>

(X)HTML

(31)

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

(32)

Ex.

<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

(33)

Ex.

<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

(34)

lista

elemento de uma lista

<li>…</li> Ex. <ul> <li>Informatica</li> <li>Fotografia</li> <li>Video</li> </ul>

(X)HTML

(35)

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.

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

(X)HTML

(36)

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

(37)

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 especificar 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, especificando apenas o nome do

documento, faremos com que o browser recarregue a página.

(X)HTML

(38)

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

(39)

hiperligação (link)

faz a ligação a outros documentos

Ex.

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

Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\tm\teorica \ficheiro2.htm

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

(X)HTML

(40)

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

(41)

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

(42)

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

(43)

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

(44)

(X)HTML

embeber conteúdos externos

| widgets sociais

http://developers.facebook.com/docs/plugins/ http://web.appstorm.net/how-to/social-media-how-to/6-tools-to-create-a-google-plus-profile-widget-for-your-site/ youtube.com twitter.com/about/ resources/widgets/

(45)

(X)HTML

validação do código escrito

(46)

(X)HTML

(47)

(X)HTML

estrutura da página

| formulários

(48)

•

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

(49)

•

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

•

A tag form tem as seguintes propriedades:

•

action - ficheiro 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 / ficheiro (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

(50)

•

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

(51)

•

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

(52)

•

As tags <input type=”hidden”> criam um campo cujo valor é definido 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

(53)

•

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 predefinida, deverá adicionar a propriedade

checked com o valor checked

•

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

(X)HTML

(54)

•

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 predefinida, 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

(55)

•

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

(56)

•

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

•

A única diferença entre eles é apenas o fim 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

(57)

•

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

(58)

•

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

•

rows - número de linhas que a caixa terá

•

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

!! ao contrário das outras caixas de input, esta tag necessita ser fechada!

(X)HTML

(59)

•

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

(60)

•

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

(61)

•

cheat sheet de HTML:

http://elearning.esev.ipv.pt/moodle1112/file.php/613/html/html-cheat-sheet.pdf

(X)HTML

(62)

•

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/

(X)HTML

referências

(63)

(64)

HTML5

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

CSS3

(X)HTML.

(X)HTML

(X)HTML

conceitos introdutórios

(X)HTML

conceitos introdutórios

•

•

•

•

(X)HTML

(X)HTML

conceitos introdutórios

•

•

•

<p>

html

</p>

<marcador de início>

conteúdo

</marcador de fim>

(X)HTML

conceitos introdutórios

| marca de início

<a>

<p>

<a

href=”

index.htm

”

> <img

src=”

test.jpg

”

> <div

id=”

intro

”

>

<marcador de início

atributo=””

>

conteúdo

</marcador de fim>

(X)HTML

conceitos introdutórios

| conteúdo

(X)HTML

conceitos introdutórios

| marca de fim

</p>

</table>

•

•

•

•

(X)HTML

(X)HTML

estrutura da página

(X)HTML

estrutura da página

(X)HTML

(X)HTML

•

•

•

•

•

•

•

(X)HTML

(X)HTML

(X)HTML

(X)HTML

(X)HTML

(X)HTML

(X)HTML

(X)HTML

(X)HTML