Scribd
Carregar
51 visualizações22 páginas

2 - Tags HTML

Enviado por

carlosmcmariano
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
51 visualizações22 páginas

2 - Tags HTML

Enviado por

carlosmcmariano
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 22

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

Você também pode gostar