2º Semestre 2023/24
Sumário 1
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ Atributos
➢ HTML 5
➢ Validar HTML e Encoding
O que é o HTML? 2
➢ HTML = HyperText Markup Language
➢ Linguagem utilizada nas Páginas WWW
▪ dá indicações ao Web browser como mostrar as páginas
➢ Um ficheiro HTML é constituído por texto (ASCII ou Unicode) que contém TAGS, destinado
a ser lido e interpretado por um browser.
➢ Um browser é um programa capaz de ler o HTML e interpretar as tags, que funcionam
como indicações para a estrutura do documento e ordens para a sua formatação e
apresentação.
➢ Aprender a linguagem HTML implica conhecer as TAGS e as ordens que lhes estão
associadas.
▪ As TAGS estão limitadas por < > e podem conter vários atributos
▪ Os valores dos atributos vão entre " "
O que é o HTML? 3
Cont…
➢ O HTML define sobre o documento:
❑ A sua estrutura;
❑ As suas propriedades;
❑ O seu conteúdo;
❑ A sua formatação.
Datas mais importantes 4
❖ 1950 (antes do WWW) – foi inventada por Ted Nelson
❖ 1999 – foi lançada a versão HTML 4.01
❖ 2000 – foi lançada a versão XHTML 1.0
❖ 2006 – foi lançada a versão XHTML 1.1
❖ Desde 2007 – foi lançada a versão XHTML 5 draft
Sumário 5
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ Atributos
➢ HTML 5
➢ Validar HTML e Encoding
Estrutura de um documento HTML 6
Documento HTML
8 – bit Unicode transformation format
Estrutura de um documento HTML 7
Tipo de documento(Neste
caso é HTML5)
Cabeçalho
Não Visível
Corpo
Visível
Codificação dos caracteres
(importante por causa dos acentos)
Sumário 8
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ Atributos
➢ HTML 5
➢ Validar HTML e Encoding
Atributos de HEAD 9
➢ A lista abaixo mostra algumas TAGS que podem ser usadas dentro do HEAD
Tag Descrição
<title></title> Título do documento. Aparece na tab do browser
<style></style> Permite a definição de um stylesheet
<script></script> Permite definir código Java Script
<meta> Permite introduzir o nome do autor e keywords
para os motores de pesquisa
<link> Permite referenciar um documento css externo
Sumário 10
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ Atributos
➢ HTML 5
➢ Validar HTML e Encoding
Exemplo de página HTML 11
Sumário 12
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ Atributos
➢ HTML 5
➢ Validar HTML e Encoding
Tags HTML 13
➢ Rodeadas por < e > e incluem o nome do elemento
❑ Exemplos:
▪ <title>
▪ </h1>
▪ <hr style=“color: red” />
➢ Salvo algumas excepções vêm sempre aos pares:
❑ A primeira marca o inicio do elemento e pode conter atributos
❑ Exemplo:
▪ <hr style=“color:red” />
➢ A última marca o fim do elemento
➢ O que está entre as duas marcas é o conteúdo do elemento, podendo conter outras
marcas
➢ Exemplo: <title> Universidade ISPTEC</title>
Tags HTML 14
Cont…
➢ Nem todos os elementos têm marca de fim
➢ Exemplos:
❑ Imagem: <img src=“[Link]” />
❑ Mudança de linha:
▪ <br />
➢ Devem estar sempre em minúsculas (regra do XHTML)
➢ Podem conter atributos sem ordem fixa que permitem configurar informação adicional
❑ Vêm sempre em pares do tipo nome=“valor”
❑ Quando existem, são sempre adicionados à marca de inicio
❑ Exemplo:
▪ <img src=“[Link]” /> (o nome do ficheiro da imagem)
Ordem das Tags 15
➢ Cuidado: as tags devem ser fechadas pela ordem inversa
Sumário 16
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ Atributos
➢ HTML 5
➢ Validar HTML E Encoding
Tags básicas 17
➢ Comentário: <!-- -->
➢ Níveis hierárquicos (headers): <h1> </h1>, <h2> </h2>, ... , <h6> </h6>
➢ Fim de linha (carriage return): <br/>
➢ Parágrafo: <p> </p>
➢ Manter a formatação original do texto: <pre></pre>
➢ Itálico: <em></em>
➢ Bold: <strong></strong>
➢ Separador horizontal: <hr />
➢ Para forçar espaços em branco usa-se o código especial   (Nonbreakink Spaces):
▪ há mais para os vários símbolos (ver em
[Link]
Tags básicas 18
Cont…
➢ Link <a href="[Link] para o Sapo</a>
➢ Imagem <img src="[Link]" alt="[Link]" />
➢ Cor:
▪ color="green“ ou color="#00FF00“ (RGB);
➢ Lista de valores:
❑ <ol></ol> - Ordered list;
❑ <ul></ul> - Unordered list;
❑ <li></li> - Elemento da lista;
Tags básicas 19
Cont…
➢ <span>Pedaço de HTML</span>
➢ <div>Seção de Layout</div>
➢ A evitar…
➢ <b>Texto a negrito</b>
➢ <i>Texto itálico</i>
Elementos block e inline 20
➢ Elementos block: os elementos block por padrão aparecem numa nova linha num
documento HTML
❑ Exemplos:
▪ <div>
▪ <h1>-<h6>
▪ <p>
▪ <form>
➢ Elementos inline: os elementos inline por padrão não aparecem numa nova linha
num documento HTML
❑ Exemplos:
▪ <span>
▪ <a>
▪ <img>
Hiperligações 21
➢ Permitem ligar uma página a:
❑ Outras páginas do próprio site e de outros sites
❑ Outros documentos do próprio site e de outros sites
▪ Exemplo:
▪ Imagens
▪ Sons
▪ Vídeos
▪ PDF
❑ Outros pontos do próprio documento
❑ Exemplo: ir para o topo da página
❑ Páginas e serviços acessíveis via outros protocolo
❑ Exemplo: FTP, SMTP
Tag a (Âncora) 22
➢ Define o início e/ou final de uma hiperligação
➢ Pode ser qualquer recurso na Web
❑ Página HTML, Imagem, Som, Filme,…
➢ Exemplo
<a href=“caminho do alvo”> texto a clicar </a>
➢ O caminho do alvo pode ser absoluto ou relativo!
Tipos de caminhos (URLs) 23
(Uniform Resource Locator)
➢ Absoluto
➢ Localiza de forma absoluta um documento em relação a toda a internet
❑ para isso o site tem que estar publicado na internet!
▪ <a href=[Link]
➢ Relativo
➢ Localiza em relação ao documento(origem) onde está o link
➢ <a href=“imagens/fotos/[Link]”>Servidor</a>
Atributos da Tag a (Âncora) 24
➢ Target pode ter os seguintes valores:
➢ _blank
➢ _self
Os valores acima especificam onde será aberto o documento linkado
Sumário 25
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ Atributos
➢ HTML 5
➢ Validar HTML e Encoding
Atributos 26
➢ São informações especificas que damos a uma TAG.
➢ Vêm em pares do tipo nome=“valor”
➢ Quando existem, são sempre adicionados à tag de inicio
➢ Alguns dos atributos que mais se utilizam são estes:
❑ id
❑ width
❑ title
❑ height
❑ class
❑ href
❑ Style
❑ src
Atributos 27
id
➢ É o identificador único do elemento. Somente deve ser declarado
um id por elemento.
Atributos 28
title
➢ O valor do atributo vai ser apresentado como uma tooltip
➢ Resultado no browser ao fazer mouse over
Atributos 29
class
➢ Determina uma ou mais classes para o elemento
Atributos 30
Style
➢ Determina propriedades CSS directamente no elemento
<tag style=“propriedade: valor;”>
HTML 5 31
➢ Funcionalidades novas
❑ Marca canvas para desenhar
❑ Marcas para tocar vídeo e áudio sem ser preciso aplicações externas
❑ Novas marcas para estruturar as áreas do documento:
▪ article
▪ footer
▪ header
▪ nav
▪ section
➢ Novos controlos para formulários
Sumário 36
➢ O que é o HTML
➢ Estrutura de um documento HTML;
➢ Atributos do HEAD
➢ Exemplo de página HTML
➢ Tags HTML
➢ Tags básicas
➢ HTML 5
➢ Validar HTML e Encoding
Porquê validar o HTML? 32
➢ É fácil errar no HTML: TAG em falta ou fora de ordem;
➢ Os browsers são flexíveis e tolerantes a erros do HTML o que provoca:
▪ Formatação da página fora do esperado;
▪ Diferentes formatações em diferentes browsers;
➢ Torna-se por isso importante analisar o HTML e verificar até que ponto está de acordo com a
norma.
➢ O validador de HTML garante que o HTML está de acordo com a norma;
➢ Qual das normas? HTML, XHTML, XML, …
➢ A linguagem HTML segue uma norma, que pode ser consultada no site: [Link]
➢ No site referido acima encontram-se os seguintes utilitários para validar o HTML:
• [Link]
• [Link]
Porquê validar o HTML? 33
Cont…
➢ Há variantes à norma HTML de acordo com o tipo de conteúdo que vai ser colocado.
➢ No início da página HTML é normal colocar um comentário que informa o browser e
o validador sobre tipo de conteúdo de HTML que vai ser usado na página:
➢ Declarações mais comuns
➢ O validador usará essa referência para analisar as tags HTML do nosso documento de
acordo com a norma.
Encoding da página 34
➢ Nas tags META é também frequente a inclusão de informação sobre o tipo de
character set em que a página HTML foi escrita:
➢ Exemplos de valores possíveis para charset são:
▪ windows-1251
▪ iso-8859-1
▪ iso-8859-15
▪ utf-8
➢ O browser usará esse valor para mostrar os caracteres de acordo com essa
codificação.
Dúvidas 35