HTML

Srgio Nunes Comunicaes Digitais e Internet Cincias da Comunicao, U.Porto 2012/13

Objetivos
Possuir uma viso geral sobre as tecnologias web. Conhecer as origens e os objetivos da linguagem HTML. Conhecer a estrutura geral de um documento HTML. Conhecer os principais elementos estruturais da linguagem HTML. Ser capaz de produzir um documentos HTML.

Introduo

Viso 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

Viso 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 so executadas pelo navegador web, em particular HTML, CSS e JavaScript. O desenvolvimento no servidor engloba todas as tecnologias que permitem aceder aos sistemas de informao 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 trs tecnologias web principais do lado do cliente (i.e. navegadores). HyperText Markup Language (HTML) Contedo e estrutura dos documentos web. Cascading Style Sheets (CSS) Desenho e apresentao dos documentos web. JavaScript Comportamentos e interao com o utilizador. HTML sempre necessrio para criar documentos web. CSS e JavaScript so opcionais. As trs tecnologias podem ser combinadas num nico documento ou usadas em separado (melhor). Apenas JavaScript uma linguagem de programao.

HyperText Markup Language

HTML uma linguagem que permite estruturar documentos hipertexto. HTML o acrnimo de HyperText Markup Language. Um documento HTML permite disponibilizar e interligar informao. Um documento HTML simplesmente um cheiro de texto com anotaes feitas usando os marcadores denidos pela linguagem HTML.

<p>Isto um pargrafo em HTML.</p>

Origens da Linguagem HTML

A linguagem HTML foi criada por Tim Berners-Lee e Robert Caillau no CERN no nal dos anos 80 do sculo passado. O principal objetivo era ultrapassar as diculdades de partilha de informao devido incompatibilidade de formatos para representao de documentos. O HTML seria o formato universal para partilha de documentos. Em 1993, o CERN colocou no domnio pblico a especicao da linguagem, o primeiro navegador e o primeiro servidor. Esta deciso fez com que a web se tornasse a principal plataforma para a consulta e publicao de informao sobre a Internet. A partir de 1994 a gesto da linguagem HTML foi transferida para o W3C.

Web Wide Web (1993)

NCSA Mosaic (1993)

10

W3C
O World Wide Web Consortium (W3C) foi criado para garantir a compatibilidade e entendimento entre empresas no desenvolvimento e adoo de tecnologias web. O consrcio composto por organizaes membro que, em conjunto, trabalham no desenvolvimento e aperfeioamento das tecnologias web. A W3C tem mais de 300 membros. Novas tecnologias so propostas por membros. Estas tecnologias so desenvolvidas por Grupos de Trabalho at atingirem o estado de Recomendao W3C. Tim Berners-Lee o diretor do W3C desde a sua fundao em 1994.

11

Especicaes W3C
HTML 4.01 Specication http://www.w3.org/TR/html401/ HTML5 Working Draft http://www.w3.org/TR/html5/ CSS 2.1 Specication http://www.w3.org/TR/CSS2/ O W3C responsvel por dezenas de normas: XML, SVG, Acessibilidade, Internacionalizao, etc. O W3C oferece servios automticos de avaliao da conformidade do cdigo produzido http://validator.w3.org/

12

Verses da Linguagem HTML

HTML 2.0 (1995) primeira verso reconhecida ocialmente. HTML 3.2 (1997) primeira verso desenvolvida exclusivamente pelo W3C. HTML 4.01 (1999) introduo de tabelas, suporte de CSS, scripts, etc. Depois da verso 4.01, a W3C apostou no desenvolvimento da linguagem XHTML, uma verso mais formal da linguagem HTML. A adoo desta nova linguagem fui muito limitada e o desenvolvimento do XHTML foi abandonado. HTML5 a verso atualmente em desenvolvimento.

13

Documento HTML

14

Ver Cdigo Fonte

15

Atividades
Observar o cdigo HTML de alguns stios web com a funo "View Source". Por exemplo: Google, Facebook, Pblico P3, JPN, etc. Usar a ferramenta de validao do W3C para vericar alguns destes stios 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.

16

Documento HTML

<!DOCTYPE html> <html> <head> <title>Ttulo do Documento</title> </head> <body> <h1>Ttulo</h1> <p>Texto principal.</q> </body> </html>

17

Linguagem HTML

18

HyperText Markup Language

HTML o acrnimo de HyperText Markup Language. Em portugus Linguagem de Marcao de Hipertexto. HTML a linguagem usada para escrever documentos web. Existem trs aspetos centrais da linguagem HTML: Permite denir o contedo dos documentos web. Permite denir a estrutura do contedo dos documentos web. Permite denir como se interligam os documentos web.

19

Documentos HTML
Um documento HTML armazenado como um simples cheiro de texto, tipicamente com a extenso .html. O texto existente num documento web estruturado com recurso a marcas ou marcadores, do ingls tags.
Os Lusadas As armas e os bares assinalados, Que da ocidental praia Lusitana, Por mares nunca de antes navegados, Passaram ainda alm da Taprobana, Em perigos e guerras esforados, Mais do que prometia a fora humana, E entre gente remota edicaram Novo Reino, que tanto sublimaram; <h1>Os Lusadas</h1> <p>As armas e os bares assinalados, Que da ocidental praia Lusitana, Por mares nunca de antes navegados, Passaram ainda alm da Taprobana, Em perigos e guerras esforados, Mais do que prometia a fora humana, E entre gente remota edicaram Novo Reino, que tanto sublimaram;</p>

Os Lusadas
As armas e os bares assinalados, Que da ocidental praia Lusitana, Por mares nunca de antes navegados, Passaram ainda alm da Taprobana, Em perigos e guerras esforados, Mais do que prometia a fora humana, E entre gente remota edicaram Novo Reino, que tanto sublimaram;

Texto simples

Texto anotado

Texto apresentado

20

Elementos HTML
Um documento HTML composto por elementos HTML. Os elementos HTML so utilizados para estruturar o texto e cada elemento tem um signicado semntico associado. Por exemplo: ttulo, pargrafo, destaque. Cada elemento HTML constitudo por trs partes: a marca de incio, o contedo, e a marca de m. A marca de m idntica marca de incio mas precedida de uma barra para a direita ( / ).

21

Elementos HTML

<p> World Wide Web </p>

marca de incio contedo marca de m

<h1 class="principal"> Comunicao </h1>

atributo

22

Sintaxe de um Elemento HTML

<elemento atributo1="valor1" atributo2="valor2" ...> ... contedo ... </elemento>

As marcas que compem um elemento podem ser escritas em maisculas ou minsculas. O contedo no. A marca de incio de um elemento pode ter vrios atributos associados. H atributos que so obrigatrios e atributos opcionais. Num documento HTML, mltiplos espaos em branco consecutivos so convertidos num espao apenas. "Por exemplo" apresentado no navegador da mesma forma que "Por exemplo".

23

Tipos de Elementos
H dois tipos de elementos HTML, elementos vazios e elementos no vazios. Os elementos no vazios tm contedo: <h1>cabealho</h1> <strong>texto em destaque</strong> Os elementos vazios no tm contedo nem marca de m. <img src="fotograa.gif"> imagem.

24

Encaixe de Elementos
Os elementos HTML podem ser encaixados dentro de outros elementos. No podem ser intercalados com outros elementos. Correto: <p>Pargrafo com <strong>destaque</strong>.</p> Incorreto: <p>Pargrafo com <strong>destaque</p>.</strong>

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

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

Correto

Incorreto

25

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 dene o inicio e o m de um documento HTML. No interior do elemento html existem obrigatoriamente duas seces, o cabealho e o corpo. O cabealho delimitado pelo elemento head. O corpo delimitado pelo elemento body.

26

Estrutura de um Documento HTML

DocType

<!DOCTYPE html> <html> <head>

Cabealho

<title> Ttulo do documento </title> </head> <body> <p> Corpo do documento. </p> </body> </html>

Documento HTML

Corpo

27

Principais Elementos HTML

28

Cabealho
O cabealho de um documento HTML, denido pelo elemento head, contm informaes sobre o prprio documento. Estas informaes so usadas pelo navegador web para processar e apresentar o documento. O cabealho deve conter obrigatoriamente um elemento title, este elemento permite denir o ttulo do documento. Este ttulo habitualmente apresentado no topo da janela do navegador. Existem outros elementos optativos que so habitualmente includos no cabealho, por exemplo o elemento meta e o elemento link. O elemento meta permite especicar informao sobre o documento. O elemento link permite estabelecer uma ligao entre o documento e outros recursos, por exemplo com folhas de estilo.

29

Ttulos
Existem seis nveis de ttulos em HTML. Os ttulos mais importantes, de primeiro nvel, so denidos com o elemento h1. Os ttulos menos importantes denem-se com o elemento h6. Os navegadores web tm estilos denidos por omisso para cada um destes elementos. <h1>Ttulo principal</h1> <h2>Ttulo de segundo nvel</h2> <h6>Ttulo menos importante</h6>.

30

Pargrafos, Destaques, e Quebras de Linha

Os pargrafos permitem delimitar blocos de informao, textual ou no, e denem-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 ) possvel introduzir quebras de linha. Exemplo: <p>A licenciatura em <strong>Cincias da Comunicao</ strong> tem por base um protocolo assinado entre a<br><em>FLUP, FEUP, FBAUP, e FEP</em>.</p>

31

Listas
Com a linguagem HTML possvel denir listas de elementos. Existem dois tipos de listas possveis, listas ordenadas e listas no ordenadas. As listas ordenadas devem ser usadas para representar listas de itens onde a ordem importante. As listas no ordenadas devem ser usadas quando no existe uma ordem implcita entre os vrios itens. A denio de uma lista em HTML requer a utilizao de dois tipos de elementos, um elemento que dene e delimita a lista e um conjunto de elementos que dene cada item da lista. A denio de listas ordenadas feita com o elemento ol ( ordered list ). A denio de listas no ordenadas feita com o elemento ul ( unordered list ). Cada item denido com o elemento li ( list item ).

32

Listas
<ul> <li>Primeiro item da lista.</li> <li>Segundo item.</li> <li>Lista <strong>no ordenada</strong>.</li> </ul>

Primeiro item da lista. Segundo item. Lista no ordenada.

<ol> <li>Primeiro item da lista.</li> <li>Segundo item.</li> <li>Lista <strong>ordenada</strong>.</li> </ol>

1. Primeiro item da lista. 2. Segundo item. 3. Lista ordenada.

33

Tabelas
Na linguagem HTML possvel estruturar o contedo numa forma tabular. Existem quatro elementos associados construo 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 denir clulas do tipo cabealho. O elemento td ( table division ) permite delimitar cada uma das clulas individuais. possvel agrupar clulas na vertical ou horizontal com os atributos rowspan e colspan.

34

Tabelas
<table> <tr> <th>Coluna A</th> <th>Coluna B</th> </tr> <tr> <td>Elemento 1.</td> <td>Elemento 2.</td> </tr> <tr> <td>Elemento 3.</td> <td>Elemento 4.</td> </tr> </table>

Coluna A Elemento 1 Elemento 3

Coluna B Elemento 2 Elemento 4

35

Elementos Estruturais
A linguagem HTML inclui elementos que permitem denir a estrutura de alto nvel de um documento web. O elemento header permite delimitar o cabealho. O elemento footer permite delimitar o rodap. O elemento nav permite denir a estrutura de navegao. O elemento article permite delimitar blocos de informao bem denidos. O elemento section permite estruturar o documento em seces.

36

Elementos Estruturais
<body> <header> <h1>Elementos Estruturais</h1> </header> <nav> <ul> <li>Incio</li> <li>Sobre</li> </ul> </nav> <section> <article> <h2>Ttulo A</h2> <p> </p> </article> <article> <h2>Ttulo B</h2> <p> </p> </article> </section> <footer> <p>Out 2011.</p> </footer>
37

Elemento DIV
O elemento div ( division ) um elemento estrutural genrico, sem signicado semntico associado, que permite agrupar elementos do documento web. Este elemento frequentemente usado em conjunto com CSS para denir reas ou zonas nos documentos web. O atributo id usado para distinguir os vrios div de um documento.
<div id="cabecalho"> <h1>Elemento DIV</h1> <p>Aqui est o cabealho.</p> </div> <div id="zona1"> <p>Um pargrafo.</p> <p>Outro pargrafo no mesmo div.</p> </div>
38

Imagens
possvel 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 obrigatrio. Este atributo permite indicar o local da imagem em relao ao documento. <img src="fotograa.jpg"> <img src="pasta/logotipo.gif"> Existem trs formatos de imagens dominantes na web: GIF, JPEG e PNG. Como regra base, o formato JPEG deve ser usado para imagens fotogrcas onde a transio entre cores suave, e o formato PNG deve ser usado para imagens do tipo vetorial, onde existem formas bem denidas. Um erro frequente o uso do formato JPEG para imagens do tipo vetorial.

39

Ligaes
A possibilidade de estabelecer ligaes entre documentos representam um dos aspetos centrais da linguagem HTML. O elemento a ( anchor ) permite indicar que ligaes 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 hiperligao. As ligaes podem ser absolutas ou relativas. No caso das ligaes relativas, o endereo do destino obtido tendo como ponto de partida o local do documento HTML de origem. Nas ligaes absolutas, o destino indicado de forma independente do local do documento HTML de origem. Exemplo de uma indicao absoluta: Rua da Boavista. Exemplo de uma indicao relativa: primeira direita, depois em frente.

40

Ligaes
<p>A licenciatura em <a href="http://www.icicom.up.pt">Cincias da Comunicao</a> um curso da <a href="http://www.up.pt">Universidade do Porto</a>.</p> A licenciatura em Cincias da Comunicao um curso da Universidade do Porto.

<p>Ligaes a partir de imagens: <a href="http://www.google.com"><img src="http://www.google.com/images/logo.gif"></a>.</p>

41

Ligaes Relativas
No caso das ligaes relativas, a indicao do endereo de destino feita tendo como ponto de partida o prprio documento web. Para fazer uma ligao 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 ligao 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 ligao para um outro documento situado na pasta anterior, usa-se ".." para retroceder para a pasta anterior. Por exemplo: <a href="../destino.html">destino</a>.

42

Comentrios
possvel inserir comentrios no cdigo HTML de um documento web. Os comentrios so ignorados pelos navegadores na apresentao da pgina. So teis para documentar o cdigo, estruturar o documento, ou simplesmente para denir anotaes. Os comentrios so denidos usando a estrutura <!-- comentrio -->. Podem incluir vrias linhas.

<p>Um pargrafo!</p> <!-- Um comentrio ignorado pelo navegador web. --> <p>Outro pargrafo</p>

<p>Um pargrafo!</p> <!-- Isto tambm um comentrio --> <p>Outro pargrafo</p>

43

Organizao de Stios Web

44

Stio Web
Um stio web corresponde ao conjunto de documentos e recursos necessrios para apresentar o stio. Esses recursos incluem documentos HTML, CSS, JavaScript, imagens, vdeos, etc.

index.html

estudar.html

entrada.html

internacional.html

sobre.html

45

Anatomia de uma Pgina Web

Documento HTML

Documentos CSS

Imagens individuais
46

Nomeao de Ficheiros
O endereo de um documento web, habitualmente designado URL, corresponde a uma referncia para uma pasta e um cheiro num servidor. As designaes usadas para nomear os cheiros tero uma correspondncia direta no endereo do documento. Ao nomear cheiros evitar carateres especiais, acentos ou espaos. Estabelecer uma conveno em relao ao uso de maisculas e ser consistente em todas as pginas do stio web. Bons exemplos: sobre.html, seccao.html, ultimas-noticias.html. A evitar: sobre.htm, Sobre.htm, seco.html, ultimas noticias.html. O cheiro base de um stio web deve ter o nome index.html.

47

Organizao de Ficheiros
Um stio web corresponde a um conjunto de pginas web relacionadas, focadas num determinado tpico, e produzidas de forma integrada. A organizao dos cheiros (ou pginas) de um stio web deve reetir a estrutura do prprio stio web. Algumas recomendaes prticas: Manter uma pasta independente para recursos multimdia: imagens, vdeos, etc. Usar nomes sugestivos para os cheiros, por exemplo: sobre.html, contactos.html. Criar pastas associadas a cada seco do stio web, por exemplo: noticias, produtos, servicos. No caso de stios web pequenos (menos de 20 pginas) poder ser mais simples manter todos os documentos web numa nica pasta. Evitar: imagem1.jpg, imagem2.jpg, newdocument.html, new.html, blank.html.

48

Desenho de URLs
O uso de bons nomes para as pastas e cheiros ter como resultado bons endereos das pginas (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

49

Ferramentas de Anlise e Desenvolvimento Web

50

Escrita de Documentos Web

Apesar de podermos utilizar um simples editor de texto para produzir documentos HTML ou CSS, existem ferramentas especcas para este tipo de formatos. Estas ferramentas tm como principais vantagens: o reconhecimento da sintaxe HTML ou CSS, interfaces amigveis e simplicao de procedimentos. Comerciais: Adobe Dreamweaver, Microsoft Expression Web. Gratuitas: Notepad++, NVU, Amaya, KompoZer. Aprender uma ferramenta ou aprender a linguagem?

51

Dreamweaver

52

Ferramentas para Desenvolvimento Web

Existem muitas ferramentas desenhadas para auxiliar o desenvolvimento de documentos web. Estas ferramentas permitem, por exemplo: Editar e inspecionar o cdigo HTML e CSS. Ajudar no posicionamento e formatao visual dos elementos. Monitorizar a atividade de rede para otimizao dos tempos de consulta. Identicar e corrigir erros complexos.

53

Firebug
O Firebug uma extenso para o Firefox concebida para facilitar o desenvolvimento e anlise de pginas web. http://getrebug.com

54

Chrome Developer Tools

O Chrome inclui um painel de ferramentas chamado Developer Tools.

55

Bookmarklets
Uma bookmarklet corresponde a um conjunto de instrues em JavaScript armazenadas sob a forma de uma bookmark. A instalao requer apenas a denio de um novo atalho ou bookmark no navegador web. Existe uma grande diversidade de bookmarklets. Alguns exemplos: http://www.readability.com/bookmarklets http://getrebug.com/rebuglite http://www.westciv.com/xray/

56

Readability
Esta bookmarklet identica automaticamente o texto relevante e produz uma verso limpa e acessvel da pgina atual.

57

XRAY
Esta bookmarklet permite examinar e observar detalhadamente os elementos de uma pgina web.

58

XRAY

59

Referncias
Web Design and Applications W3C http://www.w3.org/standards/webdesign/ Mozilla Developer Network https://developer.mozilla.org/ HTML Dog http://htmldog.com/

60