Criação de páginas Web
Tags HTML
UFCD – 9949
Formador – Manuel Moreira
2. Linguagem HTML – elaboração de um site
Tags HTML
2
2. Linguagem HTML – estrutura de um site
Estrutura HTML - Tags:
❑ Todo o documento HTML é formado por Tags – etiquetas
❑ As etiquetas são delimitadas pelos símbolos “<“ e “>”, por exemplo <etiqueta> e
</etiqueta>
❑ <etiqueta> marca o início da tag e </etiqueta> o fim
❑ MAS há Tags sem início e fim, ou seja, “únicas”. Exemplos: <br>, <hr>,
<img>, <meta> <link>, <input>……..
3
2. Linguagem HTML – estrutura de um site
Estrutura HTML - Tags:
❑ Uma Tag simples é formada assim:
<h1>Texto da tag</h1>
• <h1> é o início da tag
• “Texto da tag” é o seu conteúdo
• </h1> é o fecho da tag
4
2. Linguagem HTML – estrutura de um site
Estrutura HTML - Tags:
❑ Uma Tag mais complete é formada por comandos, atributos e
valores, por exemplo:
<h2 tittle=“Isto é um link”>Texto da tag</h2>
• Comando é “h2”
• Atributo é “tittle” e o valor do atributo é “isto é um link
• Valor é “texto da tag”
5
2. Linguagem HTML – elaboração de um site
Tags básicas:
<!DOCTYPE> Define o tipo de documento
<html> Define o documento como sendo de HTML
<head> Contém metadata e informação acerca do documento
<title> Define o título de um documento
<body> Define o início do corpo do documento
<h1> to <h6> Define os cabeçalhos numa página
<p> Define um parágrafo
<br> Insere uma quebra de linha
<hr> Define uma linha horizontal
<!--...--> Define um comentário
6
2. Linguagem HTML – elaboração de um site
Exemplo de uso das tags básicas:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Olá a todos</h1>
<p>primeiro parágrafo</p>
<! - - Isto é um comentário - - >
<br>
<! - - Agora uma linha horizontal - - >
<hr>
</body>
</html>
7
2. Linguagem HTML – elaboração de um site
Tags de formatação:
<b> Colocar texto a negrito
<strong> Definir texto como importante (mesmo que negrito)
<u> Sublinhar o texto
<i> ou <em> Colocar texto a itálico
<s> Marcar texto como incorrecto
<small> Define o texto como mais pequeno
<center> Não suportado em HTML5. Usar CSS
8
2. Linguagem HTML – elaboração de um site
Exemplo de uso das tags de formatação:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<p>Neste <strong>parágrafo</strong> vamos
<i>estilizar</i> algumas <s>palavras</s></p>
<p><small>Mas não todas</small></p>
</body>
</html>
9
2. Linguagem HTML – elaboração de um site
Tags de links:
<a> Define uma hiperligação num conteúdo HTML
<nav> Define o local onde se colocam os links de navegação
Sintaxe habitual: <a href=“http://www.site.com”> Texto do link </a>
10
2. Linguagem HTML – elaboração de um site
Tags de links, algumas notas:
❑ Atributo “href” é a localização do ficheiro para onde aponta o link
❑ Atributo opcional “target”
❑ Os links podem ser internos ou externos
❑ Links dentro da mesma página:
<a href="#example">Example headline</a> (o link)
<h5 id="example">Example headline</h5> (o destino do link)
11
2. Linguagem HTML – elaboração de um site
Exemplo de uso das tags de links:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<p>Isto é uma frase com um link pelo meio. Esta é
a <a href=“https://google.pt”>ligação</a></p>
</body>
</html>
12
2. Linguagem HTML – elaboração de um site
Tags de imagens:
<img> Permite inserir uma imagem num documento HTML
Sintaxe habitual: <img src=“http://www.site.com/imagem.jpg”>
13
2. Linguagem HTML – elaboração de um site
Exemplo de uso das tags de imagem:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<img src=“http://www.site.com/imagem.jpg”>
</body>
</html>
14
2. Linguagem HTML – elaboração de um site
Tags de imagem, algumas notas:
❑ Atributo “src” é a localização da imagem
❑ A imagem já tem de estar na Internet
❑ Devemos colocar o link complete para a imagem: http://www.site.com/imagem.jpg
❑ Há locais onde podem colocar as vossas próprias imagens sem terem um
servidor: https://postimages.org/
❑ Há atributos que se devem definir numa imagem: alt, width e height
(legenda da imagem, largura e altura)
❑ Definir por exemplo largura e altura: width=“250” height=“150” (podem usar
números ou percentagens)
15
2. Linguagem HTML – elaboração de um site
Tags de listas não ordenadas:
<ul> Define uma lista não ordenada
<li> Define um item de uma lista
Sintaxe habitual: <ul>
<li>item 1</li>
<li>item 2</li>
</ul>
16
2. Linguagem HTML – elaboração de um site
Exemplo de uso das tags de listas não ordenadas:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</body>
</html>
17
2. Linguagem HTML – elaboração de um site
Tags de listas ordenadas:
<ol> Define uma lista ordenada
<li> Define um item de uma lista
Sintaxe habitual: <ol>
<li>item 1</li>
<li>item 2</li>
</ol>
18
2. Linguagem HTML – elaboração de um site
Exemplo de uso das tags de listas ordenadas:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
</body>
</html>
19
2. Linguagem HTML – elaboração de um site
Algumas notas acerca de listas
Estilizar listas <ul> ou <ol>:
Uma lista não ordenada pode estilizar-se com a propriedade “list-style” nos estilos
Valores:
Listas não ordenadas: disc, circle, square
Listas ordenadas: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, inside, outside,
<url>, none
20
2. Linguagem HTML – elaboração de um site
Tags e metatags:
<head> Contém metadata e informação acerca do documento
<meta> Define meta-informação de um documento HTML
<base> Define o endereço de base de todos os urls relaticos de um documento
<title> Define o título de um documento
Sintaxe habitual: <head>
<meta name=“description” …>
<title>Título da página</title>
</head> 21
2. Linguagem HTML – elaboração de um site
Exemplo de uso das tags de listas ordenadas:
<!DOCTYPE html>
<html>
<head>
<meta name=“description” content=“texto…”>
<meta charset=“utf-8”>
<title>Título da página</title>
<link type=“image/x-icon” href=“http:www….”>
</head>
<body>
</body>
</html>
22
