HTML Completo

A linguagem
Hyper Text Markup Language (HTML)

O que é?
• Linguagem para a descrição de documentos contendo texto,
imagens, hyperlinks, etc
• Definida pelo Word Wide Web Consortium (W3C) –
www.w3c.org
Documento HTML
• Um documento HTML é constituído por elementos e texto
• Cada elemento é caracterizado por:
- nome
- conjunto de atributos
• Cada atributo é constituído por um nome e por um valor
- conjunto de elementos internos, também designados de filhos
- texto interno
• Um elemento é representado num ficheiro .html por:
- Uma marca de início, contendo o nome do elemento e os seus atributos
- O conjunto de elementos e texto internos
- Uma marca de fim, contendo o nome do elemento
Estrutura básica dum documento HTML
• Um documento html é constituído html
pelo elemento html, designado por
elemento raíz
head body
• Este elemento deve conter dois
elementos filhos:
- head: cabeçalho do documento, title Corpo do
contendo informação sobre este. Ex: documento
• título do documente (elemento título
title)
- body: definição da componente
visível do documento
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>O título </title>
</head>
html
<body>
<p>
Estrutura básica de head body
um documento html
</p> title p
</body>
</html> Estrutura básica
O título de um documento
html
Marcas (tags) - Meta
• As meta tags são marcadores de texto que indicam aos

motores de busca como o Google o conteúdo de uma
página.
• As meta tags são colocadas dentro da tag <head>
</head>
• Exemplos:
<meta name="author" content="Patricia Silva">
<meta name="description" content="Meta Tags - O que são e como utilizá-las">
<meta name="keywords" content="sites, web, técnico de multimédia">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
https://www.infowester.com/metatags.php
tags
• Uma tag é delimitada pelos caracteres < e >
• Uma tag final possui o carácter / a seguir ao delimitador inicial
• Exemplo: consideremos um elemento de nome p (utilizado para
representar parágrafos de texto) contendo o texto “Hello Web”.
A sua representação é:
Elemento p <p> Hello Web </p>

O resultado no browser é:
Texto interno
marca inicial marca final
Nome do elemento
Elementos dentro de elementos
• Os elementos podem conter internamente outros elementos.
Exemplo:
<p> Hello <em>Web</em></p>

O resultado no browser é:
Elemento p Conteúdo do Elemento em

elemento p Conteúdo do
elemento em
O elemento em ( abreviatura de emphasis) é utilizado para dar ênfase a blocos de texto. A

maior parte dos browsers coloca estes blocos em itálico.
Indentação
• A linguagem html ignora os espaços e mudanças de linha,
interpretando-os apenas como separadores de palavras
• Esta propriedade permite a reescrita do exemplo seguinte, sem
alteração do resultado final
• A indentação (afastamento do texto em relação à
<p>
Hello margem) reflecte as relações de inclusão
<em> • O texto “Hello” e o elemento em estão
Web contidos dentro do elemento p, pelo que a
</em> sua indentação é superior à de p
</p> • O texto “Web” está contido dentro do
elemento em, pelo que a sua indentação é
interior de p interior de em superior à de em
• A indentação não é significativa para o browser. Apenas é utilizada para
facilitar a leitura por um humano.
Atributos
• Em todos os exemplos anteriores os elementos não possuem
atributos. Vejamos de seguida como estes são representados
... • O elemento img serve para
<body> apresentar imagens
<img src = “esct.svg" /> • O ficheiro com a imagem é
</body> indicado através do atributo src
...
Nome do atributo : src Valor do atributo :
esct.svg
• O elemento img não possui elementos ou texto
internos, pelo que a sua representação é feita de forma
especial: em vez da marca de fim, a marca de inicio é
terminada por /
• O conjunto de atributos possíveis depende do
elemento a que se aplicam
Imagens
• Como vimos anteriormente, a inserção de imagens é realizada
através do elemento img. Os atributos mais usados neste
elemento são:
- src (obrigatório): localização do ficheiro com a imagem
- alt (obrigatório): texto que deve ser apresentado no caso do browser não
conseguir apresentar a imagem
- height (opcional): altura da imagem
- width (opcional): largura da imagem
...
<img src=" esct.svg "
alt="Logotipo do ESCT“
100 %
width="30%" height="100%"/>
...
30 %
Headings
• Os elementos hn, com n entre 1 e 6 (inclusive), definem níveis
de secção (headings)
...
<body>
<h1>
Heading de nível 1
</h1>
<h2>
Heading de nível 2
</h2>
<h3>
Heading de nível 3
</h3>
<h4>
Heading de nível 4
</h4>
<h5>
Heading de nível 5
</51>
<h6>
Heading de nível 6
</h6>
</body>
...
Hyperlinks
• Designa-se por hyperlink a ligação entre uma zona de um
documento html e outro documento. Exemplo:
Zona de origem
Destino do hyperlink
• Os hyperlinks são criados através de elementos a (de anchor):

- O valor do atributo href define o destino do hyperlink
- A zona de origem do hyperlink é definida pelo conteúdo do elemento a
<p>
Se premir a palavra
<a href="https://esct.pt/">
ESCT
</a>
o browser mostra a sua
página principal
</p>
Imagens como hyperlinks
• Não é obrigatório que a zona de origem dum hyperlink seja
texto
Zonas de origem
<a href="https://esct.pt/">
<img src="esct.jpg" alt="Logotipo da
ESCT" />
</a>
<p>
Escola Secundária de Caldas das Taipas
</p>
<a href=" https://www.aetaipas.pt/ ">
<img src="aet.jpg" alt="Logotipo do
AETAIPAS"/>
</a>
<p>
Escola Básica de Caldas das Taipas
</p>
Âncoras
• Por omissão, o destino dum hyperlink é o início da página referida no
atributo href.
• O elemento a permite definir zonas de destino diferentes, designadas por
âncoras, através do atributo name.
• O exemplo seguinte coloca um hyperlink, situado no início da página, para
uma âncora localizada no fim da página.
...
<body>
<a href="#unique-id ">
Ir para o fim da página
</a>
<p> Linha 1 </p>
<p> Linha 2 </p>
...
<p> Linha 15 </p>
<a name="unique-id"> • O carácter # figura antes do nome para
Fim da página
</a>
indicar que o destino é uma âncora e não
</body> uma outra página
...
Âncoras
• O destino dum link também pode ser uma âncora localizada
noutro documento. Neste caso o valor do atributo href deve
ser constituído por: localização do documento; caracter # e
nome da âncora.
• Consideremos o seguinte exemplo:
href=“<a href="estrutura_completa2.html#unique-id"> vou para a
página 2</a>”
Localização do documento
Âncora dentro do documento

Tabelas
• Uma tabela é constituída por:
• um elemento table
• vários elementos tr (table row) internos ao
elemento table
• vários elementos th (table heading) ou td
(table data), internos aos elementos tr
table
tr tr tr tr
table tr (table row)

th th th td td td ... td td td
td (table data) th (table heading)
P. 8
P.
Nome Sala email 6 Pereira
Félix
diana@esct.pt apolo@esct.pt
Tabelas
• th: células de cabeçalho ...
<body>
• td: células de dados <h1>Tabela de contactos:</h1>
• A única diferença entre os elementos th <table border="1" cellpadding="10%">
e td é a forma de representação <tr>
<th>Nome</th>
(normalmente os elementos th <th>Sala</th>
aparecem a negrito) <th>email</th>
• O atributo border especifica o tipo de </tr>
<tr>
moldura da tabela <td>Diana</td>
• Além de texto, os elementos th e td <td>6</td>
<td>diana@esct.pt</td>
admitem internamente outros elementos, </tr>
tais como: <tr>
• imagens (img) ...
<tr>
• links e âncoras (a) <td>Apolo</td>
<td>8</td>
<td>apolo@esct.pt</td>
</tr>
</table>
</body>
...
Listas
• As listas são definidas através dos elementos:
- ul - unordered list
- ol - ordered list
• Os itens das listas são definidos através do elemento li (list item)
• Os elementos li podem possuir internamente outras listas
...
<body>
<ol>
<li>Item A</li>
<li>Item B
<ol>
<li>Sub-item C</li>
<li>Sub-item C</li>
</ol>
</li>
<li>Item D
<ul>
<li>Sub-item E</li>
<li>Sub-item E</li>
<li>Sub-item E</li>
</ul>
</li>
</ol>
</body>
...
Elementos estruturais
html Documento html
head Cabeçalho do documento
title Título do documento
body Corpo do documento
p Parágrafo
img Imagem
a Hyperlink ou âncora
table tabela
tr Linha da tabela
th Célula da tabela (cabeçalho)
td Célula da tabela (dados)
hn Headings
ul Lista não ordenada
ol Lista ordenada
li Item duma lista
hr Linha horizontal (horizontal rule)
Elementos estruturais (troços de texto)
em Ênfase
strong Ênfase forte
cite Citação
dfn Definição
code Troço de código
samp Amostra
kbd Texto a ser inserido pelo utilizador
var Variável ou argumento dum programa
abbr Forma abreviada
acronym Acrónimo
Caracteres especiais
• A inclusão de caracteres especiais em blocos de texto é

realizado através de entidades (entities).
• Uma entidade é representada por:
- carácter &
- nome da entidade ou carácter # seguido do código unicode
do carácter especial
- carácter;
• Exemplos:
Entidade Carácter
© 
nome da entidade
™ ™
código unicode
Mais caracteres
• Sugestão: realize o ficheiro HTML que produza

como resultado a página apresentada
• Para mais informações / códigos consulte:

https://www.w3schools.com/html/ht
ml_symbols.asp

HTML Completo

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Completo

Enviado por

Direitos autorais:

Formatos disponíveis

A linguagem

Hyper Text Markup Language (HTML)

• As meta tags são marcadores de texto que indicam aos

Elemento p <p> Hello Web </p>

<p> Hello <em>Web</em></p>

Elemento p Conteúdo do Elemento em

O elemento em ( abreviatura de emphasis) é utilizado para dar ênfase a blocos de texto. A

• Os hyperlinks são criados através de elementos a (de anchor):

Âncora dentro do documento

table tr (table row)

• A inclusão de caracteres especiais em blocos de texto é

• Sugestão: realize o ficheiro HTML que produza

• Para mais informações / códigos consulte:

Você também pode gostar