HTML

Sérgio Nunes

Comunicações Digitais e Internet

Ciências da Comunicação, U.Porto 2011/12
Visão Geral

• Os navegadores web enviam pedidos aos servidores web, que por sua vez
produzem e devolvem documentos em formato HTML para os navegadores
processarem e apresentarem.

1. Pedido HTTP

2. Resposta HTTP + Documento HTML

Visão Geral

• O desenvolvimento de documentos web está dividido em duas grandes

áreas: desenvolvimento no cliente e desenvolvimento no servidor.

• O desenvolvimento no cliente é focado nas tecnologias que são executadas

pelo navegador web, em particular HTML, CSS e JavaScript.

• O desenvolvimento no servidor engloba todas as tecnologias que permitem

aceder aos sistemas de informação e implementar os programas que
controlam o funcionamento dos sistemas web.

• Na disciplina de CDI abordamos apenas as tecnologias do cliente.

Tecnologias Web Cliente

• Existem três tecnologias web principais do lado do cliente (i.e. navegadores).

• HTML — Conteúdo e estrutura dos documentos web.

• CSS — Desenho e apresentação dos documentos web.

• JavaScript — Comportamentos e interação com o utilizador.

• HTML é sempre necessário para criar documentos web.

CSS e JavaScript são opcionais.

• As três tecnologias podem ser combinadas num único documento ou usadas

em separado (melhor). Apenas JavaScript é uma linguagem de programação.
HyperText Markup Language

• HTML é uma linguagem que permite estruturar documentos hipertexto.

• HTML é o acrónimo de HyperText Markup Language.

• Um documento HTML permite disponibilizar e interligar informação.

• Um documento HTML é simplesmente um ficheiro de texto com anotações

feitas usando os marcadores definidos pela linguagem HTML.

<p>Isto é um parágrafo em HTML.</p>

Origens da Linguagem HTML

• A linguagem HTML foi criada por Tim Berners-Lee e Robert Caillau no CERN
no final dos anos 80 do século passado.

• O principal objetivo era ultrapassar as dificuldades de partilha de informação

devido à incompatibilidade de formatos para representação de documentos.
O HTML seria o formato universal para partilha de documentos.

• Em 1993, o CERN colocou no domínio público a especificação da linguagem,

o primeiro navegador e o primeiro servidor. Esta decisão fez com que a web
se tornasse a principal plataforma para a consulta e publicação de
informação sobre a Internet.

• A partir de 1994 a gestão da linguagem HTML foi transferida para o W3C.

Web Wide Web (1993)
W3C

• O World Wide Web Consortium (W3C) foi criado para garantir a

compatibilidade e entendimento entre empresas no desenvolvimento e
adoção de tecnologias web.

• O consórcio é composto por organizações membro que, em conjunto,

trabalham no desenvolvimento e aperfeiçoamento das tecnologias web.
A W3C tem mais de 300 membros.

• Novas tecnologias são propostas por membros. Estas tecnologias são

desenvolvidas por Grupos de Trabalho até atingirem o estado de
Recomendação W3C.

• Tim Berners-Lee é o diretor do W3C desde a sua fundação em 1994.

Especificações W3C

• HTML 4.01 Specification

http://www.w3.org/TR/html401/

• HTML5 Working Draft

http://www.w3.org/TR/html5/

• CSS 2.1 Specification

http://www.w3.org/TR/CSS2/

• O W3C é responsável por dezenas de normas: XML, SVG, Acessibilidade,

Internacionalização, etc.

• O W3C oferece serviços automáticos de avaliação da conformidade do

código produzido — http://validator.w3.org/
Versões da Linguagem HTML

• HTML 2.0 (1995) — primeira versão reconhecida oficialmente.

• HTML 3.2 (1997) — primeira versão desenvolvida exclusivamente pelo W3C.

• HTML 4.01 (1999) — introdução de tabelas, suporte de CSS, scripts, etc.

• Depois da versão 4.01, a W3C apostou no desenvolvimento da linguagem

XHTML, uma versão mais formal da linguagem HTML. A adoção desta nova
linguagem fui muito limitada e o desenvolvimento do XHTML foi abandonado.

• HTML5 é a versão atualmente em desenvolvimento.

Documento HTML
Ver Código Fonte
Atividades

• Observar o código HTML de alguns sítios web com a função "View Source".
Por exemplo: Google, Facebook, Público P3, JPN, etc.

• Usar a ferramenta de validação do W3C para verificar alguns destes sítios

web. http://validator.w3.org

• Criar um documento HTML novo usando o Notepad++ e gravar com o nome

primeiro.html. Abrir documento num navegador web. Validar no W3C.
Documento HTML

<!DOCTYPE html>

<html>
<head>
<title>Título do Documento</title>
</head>

<body>
<h1>Título</h1>
<p>Texto principal.</q>
</body>
</html>
HyperText Markup Language

• HTML é o acrónimo de HyperText Markup Language.

Em português Linguagem de Marcação de Hipertexto.

• HTML é a linguagem usada para escrever documentos web.

Existem três aspetos centrais da linguagem HTML:

• Permite definir o conteúdo dos documentos web.

• Permite definir a estrutura do conteúdo dos documentos web.

• Permite definir como se interligam os documentos web.

 Documentos HTML

• Um documento HTML é armazenado como um simples ficheiro de texto,

tipicamente com a extensão .html.

• O texto existente num documento web é estruturado com recurso a marcas

ou marcadores, do inglês tags.

Os Lusíadas <h1>Os Lusíadas</h1> Os Lusíadas

As armas e os barões assinalados, <p>As armas e os barões assinalados, As armas e os barões assinalados,
Que da ocidental praia Lusitana, Que da ocidental praia Lusitana, Que da ocidental praia Lusitana,
Por mares nunca de antes navegados, Por mares nunca de antes navegados, Por mares nunca de antes navegados,
Passaram ainda além da Taprobana, Passaram ainda além da Taprobana, Passaram ainda além da Taprobana,
Em perigos e guerras esforçados, Em perigos e guerras esforçados, Em perigos e guerras esforçados,
Mais do que prometia a força humana, Mais do que prometia a força humana, Mais do que prometia a força humana,
E entre gente remota edificaram E entre gente remota edificaram E entre gente remota edificaram
Novo Reino, que tanto sublimaram; Novo Reino, que tanto sublimaram;</p> Novo Reino, que tanto sublimaram;

Texto simples Texto anotado Texto apresentado

Elementos HTML

• Um documento HTML é composto por elementos HTML.

• Os elementos HTML são utilizados para estruturar o texto e cada elemento

tem um significado semântico associado. Por exemplo: título, parágrafo,
destaque.

• Cada elemento HTML é constituído por três partes: a marca de início,

o conteúdo, e a marca de fim. A marca de fim é idêntica à marca de início
mas precedida de uma barra para a direita ( / ).
Elementos HTML

<p> World Wide Web </p>

marca de início conteúdo marca de fim

<h1 class="principal"> Comunicação </h1>

atributo
Sintaxe de um Elemento HTML

<elemento atributo1="valor1" atributo2="valor2" ...> ... conteúdo ... </elemento>

• As marcas que compõem um elemento podem ser escritas em maiúsculas ou

minúsculas. O conteúdo não.

• A marca de início de um elemento pode ter vários atributos associados.

Há atributos que são obrigatórios e atributos opcionais.

• Num documento HTML, múltiplos espaços em branco consecutivos são

convertidos num espaço apenas. "Por exemplo" é apresentado no navegador
da mesma forma que "Por exemplo".
Tipos de Elementos

• Há dois tipos de elementos HTML, elementos vazios e elementos não vazios.

• Os elementos não vazios têm conteúdo:

• <h1>cabeçalho</h1>

• <strong>texto em destaque</strong>

• Os elementos vazios não têm conteúdo nem marca de fim.

• <img src="fotografia.gif"> — imagem.

Encaixe de Elementos

• Os elementos HTML podem ser encaixados dentro de outros elementos.

Não podem ser intercalados com outros elementos.

• Correto: <p>Parágrafo com <strong>destaque</strong>.</p>

• Incorreto: <p>Parágrafo com <strong>destaque</p>.</strong>

<p> Texto com <strong> destaque </strong>. </p> <p> Texto com <strong> destaque </p> . </strong>

Correto Incorreto
Estrutura de um Documento HTML

• A primeira linha de qualquer documento HTML deve indicar o tipo de

documento, o designado document type ou DOCTYPE.

• O elemento html designa-se por elemento raiz e define o inicio e o fim de um

documento HTML.

• No interior do elemento html existem obrigatoriamente duas secções, o

cabeçalho e o corpo. O cabeçalho é delimitado pelo elemento head. O corpo
é delimitado pelo elemento body.
Estrutura de um Documento HTML

DocType <!DOCTYPE html>

<html>
<head>
Cabeçalho <title> Título do documento </title>
</head>
Documento HTML
<body>
Corpo <p> Corpo do documento. </p>
</body>
</html>
Cabeçalho

• O cabeçalho de um documento HTML, definido pelo elemento head, contém

informações sobre o próprio documento. Estas informações são usadas pelo
navegador web para processar e apresentar o documento.

• O cabeçalho deve conter obrigatoriamente um elemento title, este elemento

permite definir o título do documento. Este título é habitualmente apresentado no
topo da janela do navegador.

• Existem outros elementos optativos que são habitualmente incluídos no

cabeçalho, por exemplo o elemento meta e o elemento link.

• O elemento meta permite especificar informação sobre o documento.

• O elemento link permite estabelecer uma ligação entre o documento e outros

recursos, por exemplo com folhas de estilo.
Títulos

• Existem seis níveis de títulos em HTML.

• Os títulos mais importantes, de primeiro nível, são definidos com o

elemento h1. Os títulos menos importantes definem-se com o elemento h6.

• Os navegadores web têm estilos definidos por omissão para

cada um destes elementos.

• <h1>Título principal</h1>

• <h2>Título de segundo nível</h2>

• <h6>Título menos importante</h6>.

Parágrafos, Destaques, e Quebras de Linha

• Os parágrafos permitem delimitar blocos de informação, textual ou não, e

definem-se com o elemento p ( paragraph ).

• Os elementos strong ( forte ) e em ( ênfase ) permitem destacar texto. O

elemento strong representa um destaque mais forte do que o em.

• Com o elemento br ( break ) é possível introduzir quebras de linha.

• Exemplo: <p>A licenciatura em <strong>Ciências da Comunicação</

strong> tem por base um protocolo assinado entre a<br><em>FLUP, FEUP,
FBAUP, e FEP</em>.</p>
Listas

• Com a linguagem HTML é possível definir listas de elementos. Existem dois tipos
de listas possíveis, listas ordenadas e listas não ordenadas.

• As listas ordenadas devem ser usadas para representar listas de itens onde a
ordem é importante. As listas não ordenadas devem ser usadas quando não existe
uma ordem implícita entre os vários itens.

• A definição de uma lista em HTML requer a utilização de dois tipos de elementos,

um elemento que define e delimita a lista e um conjunto de elementos que define
cada item da lista.

• A definição de listas ordenadas é feita com o elemento ol ( ordered list ). A

definição de listas não ordenadas é feita com o elemento ul ( unordered list ).

• Cada item é definido com o elemento li ( list item ).

Listas

<ul>
<li>Primeiro item da lista.</li> • Primeiro item da lista.
<li>Segundo item.</li> • Segundo item.
<li>Lista <strong>não ordenada</strong>.</li> • Lista não ordenada.
</ul>

<ol>
<li>Primeiro item da lista.</li> 1. Primeiro item da lista.
<li>Segundo item.</li> 2. Segundo item.
<li>Lista <strong>ordenada</strong>.</li> 3. Lista ordenada.
</ol>
Tabelas

• Na linguagem HTML é possível estruturar o conteúdo numa forma tabular.

• Existem quatro elementos associados à construção de tabelas.

• O elemento table é usado para delimitar a tabela.

• O elemento tr ( table row ) é usado para delimitar cada uma das linhas.

• O elemento th ( table header ) permite definir células do tipo cabeçalho.

• O elemento td ( table division ) permite delimitar cada uma das células individuais.

• É possível agrupar células na vertical ou horizontal com

os atributos rowspan e colspan.
Tabelas

<table>
<tr>
<th>Coluna A</th>
<th>Coluna B</th>
</tr>

<tr> Coluna A Coluna B

<td>Elemento 1.</td>
<td>Elemento 2.</td> Elemento 1 Elemento 2
</tr>
Elemento 3 Elemento 4
<tr>
<td>Elemento 3.</td>
<td>Elemento 4.</td>
</tr>
</table>
Elementos Estruturais

• A linguagem HTML inclui elementos que permitem definir a estrutura de alto

nível de um documento web.

• O elemento header permite delimitar o cabeçalho.

• O elemento footer permite delimitar o rodapé.

• O elemento nav permite definir a estrutura de navegação.

• O elemento article permite delimitar blocos de informação bem definidos.

• O elemento section permite estruturar o documento em secções.

Elementos Estruturais
…

… <section>
<article>
<body> <h2>Título A</h2>
<header> <p> … </p>
<h1>Elementos Estruturais</h1> </article>
</header>
<article>
<nav> <h2>Título B</h2>
<ul> <p> … </p>
<li>Início</li> </article>
<li>Sobre</li> </section>
</ul>
</nav> <footer>
<p>Out 2011.</p>
… </footer>

…
Elemento DIV

• O elemento div ( division ) é um elemento estrutural genérico, sem significado

semântico associado, que permite agrupar elementos do documento web.

• Este elemento é frequentemente usado em conjunto com CSS para definir

áreas ou zonas nos documentos web.

• O atributo id é usado para distinguir os vários div de um documento.

<div id="cabecalho">
<h1>Elemento DIV</h1>
<p>Aqui está o cabeçalho.</p>
</div>

<div id="zona1">
<p>Um parágrafo.</p>
<p>Outro parágrafo no mesmo div.</p>
</div>
Imagens

• É possível inserir imagens num determinado ponto de um documento HTML com recurso
ao elemento img ( image ).

• O elemento img tem um o atributo src ( source ) como obrigatório. Este atributo permite
indicar o local da imagem em relação ao documento.

• <img src="fotografia.jpg">

• <img src="pasta/logotipo.gif">

• Existem três formatos de imagens dominantes na web: GIF, JPEG e PNG.

Como regra base, o formato JPEG deve ser usado para imagens fotográficas onde a
transição entre cores é suave, e o formato PNG deve ser usado para imagens do tipo
vetorial, onde existem formas bem definidas.

• Um erro frequente é o uso do formato JPEG para imagens do tipo vetorial.

Ligações

• A possibilidade de estabelecer ligações entre documentos representam um dos

aspetos centrais da linguagem HTML.

• O elemento a ( anchor ) permite indicar que ligações existem a partir do documento

atual para outros recursos na web (documentos, imagens, etc).

• O atributo href ( hyper reference ) do elemento a permite indicar qual o recurso destino
da hiperligação.

• As ligações podem ser absolutas ou relativas. No caso das ligações relativas, o

endereço do destino é obtido tendo como ponto de partida o local do documento
HTML de origem. Nas ligações absolutas, o destino é indicado de forma independente
do local do documento HTML de origem.

• Exemplo de uma indicação absoluta: Rua da Boavista.

Exemplo de uma indicação relativa: primeira à direita, depois em frente.
Ligações

<p>A licenciatura em <a href="http://www.icicom.up.pt">Ciências da

Comunicação</a> é um curso da <a href="http://www.up.pt">Universidade
do Porto</a>.</p>

A licenciatura em Ciências da Comunicação é

um curso da Universidade do Porto.

<p>Ligações a partir de imagens: <a href="http://www.google.com"><img

src="http://www.google.com/images/logo.gif"></a>.</p>
Ligações Relativas

• No caso das ligações relativas, a indicação do endereço de destino é feita

tendo como ponto de partida o próprio documento web.

• Para fazer uma ligação para um outro documento situado na mesma pasta,
basta indicar o nome do documento destino.
Por exemplo: <a href="destino.html">destino</a>.

• Para fazer uma ligação para um outro documento situado numa sub-pasta da
atual, basta indicar o nome da sub-pasta e o documento destino.
Por exemplo: <a href="subpasta/destino.html">destino</a>.

• Para fazer uma ligação para um outro documento situado na pasta anterior,
usa-se ".." para retroceder para a pasta anterior.
Por exemplo: <a href="../destino.html">destino</a>.
Comentários

• É possível inserir comentários no código HTML de um documento web.

• Os comentários são ignorados pelos navegadores na apresentação da

página. São úteis para documentar o código, estruturar o documento, ou
simplesmente para definir anotações.

• Os comentários são definidos usando a estrutura <!-- comentário -->.

Podem incluir várias linhas.

<p>Um parágrafo!</p>
<p>Um parágrafo!</p> <!-- Isto
<!-- Um comentário ignorado pelo navegador web. --> também é um
<p>Outro parágrafo</p> comentário -->
<p>Outro parágrafo</p>
Nomeação de Ficheiros

• O endereço de um documento web, habitualmente designado URL,

corresponde a uma referência para uma pasta e um ficheiro num servidor.
As designações usadas para nomear os ficheiros terão uma correspondência
direta no endereço do documento.

• Ao nomear ficheiros evitar carateres especiais, acentos ou espaços.

Estabelecer uma convenção em relação ao uso de maiúsculas e ser
consistente em todas as páginas do sítio web.

• Bons exemplos: sobre.html, seccao.html, ultimas-noticias.html.

• A evitar: sobre.htm, Sobre.htm, secção.html, ultimas noticias.html.

• O ficheiro base de um sítio web deve ter o nome index.html.

Organização de Ficheiros

• Um sítio web corresponde a um conjunto de páginas web relacionadas, focadas num

determinado tópico, e produzidas de forma integrada.

• A organização dos ficheiros (ou páginas) de um sítio web deve refletir a estrutura
do próprio sítio web. Algumas recomendações práticas:

• Manter uma pasta independente para recursos multimédia: imagens, vídeos, etc.

• Usar nomes sugestivos para os ficheiros, por exemplo: sobre.html, contactos.html.

• Criar pastas associadas a cada secção do sítio web, por exemplo: noticias,
produtos, servicos. No caso de sítios web pequenos (menos de 20 páginas)
poderá ser mais simples manter todos os documentos web numa única pasta.

• Evitar: imagem1.jpg, imagem2.jpg, newdocument.html, new.html, blank.html.

Desenho de URLs

• O uso de bons nomes para as pastas e ficheiros terá como resultado bons
endereços das páginas (URLs).

• Bons exemplos:

• http://www.google.com/images/logo.gif

• http://tsf.pt/programas

• Maus exemplos:

• http://sigarra.up.pt/up/web_base.gera_pagina?p_pagina=2436

• http://www.mota-engil.pt/AreaHome.aspx?areaId=73&contentId=73
Escrita de Documentos Web

• Apesar de podermos utilizar um simples editor de texto para produzir

documentos HTML ou CSS, existem ferramentas específicas para este tipo
de formatos.

• Estas ferramentas têm como principais vantagens: o reconhecimento da

sintaxe HTML ou CSS, interfaces amigáveis e simplificação de
procedimentos.

• Comerciais: Adobe Dreamweaver, Microsoft Expression Web.

• Gratuitas: Notepad++, NVU, Amaya, KompoZer.

• Aprender uma ferramenta ou aprender a linguagem?

Dreamweaver
Ferramentas para Desenvolvimento Web

• Existem muitas ferramentas desenhadas para auxiliar o

desenvolvimento de documentos web.

• Estas ferramentas permitem, por exemplo:

• Editar e inspecionar o código HTML e CSS.

• Ajudar no posicionamento e formatação visual dos elementos.

• Monitorizar a atividade de rede para otimização dos tempos de consulta.

• Identificar e corrigir erros complexos.

Firebug

• O Firebug é uma extensão para o Firefox concebida para facilitar o

desenvolvimento e análise de páginas web. http://getfirebug.com
Chrome Developer Tools

• O Chrome inclui um painel de ferramentas chamado Developer Tools.

Bookmarklets

• Uma bookmarklet corresponde a um conjunto de instruções em JavaScript

armazenadas sob a forma de uma bookmark. A instalação requer apenas a
definição de um novo atalho ou bookmark no navegador web.

• Existe uma grande diversidade de bookmarklets.

Alguns exemplos:

• http://www.readability.com/bookmarklets

• http://getfirebug.com/firebuglite

• http://www.westciv.com/xray/
Readability

• Esta bookmarklet identifica automaticamente o texto relevante e produz uma

versão limpa e acessível da página atual.
XRAY

• Esta bookmarklet permite examinar e observar detalhadamente

os elementos de uma página web.
XRAY
Referências

• Web Design and Applications — W3C

http://www.w3.org/standards/webdesign/

• HTML Dog
http://htmldog.com/