O documento introduz os conceitos básicos de HTML, incluindo (1) sua definição como linguagem de marcação para formatar informações na web, (2) sua estrutura básica de tags como <tag>conteúdo</tag>, e (3) exemplos comuns de tags como <b> negrito </b> e <img> para imagens.
1. Introdução ao HTML - Hélder Oliveira
Concepção de Websites
Introdução ao HTML
2. Introdução ao HTML - Hélder Oliveira
O que é o HTML?
• HyperText Markup Language
• Definido por Tim Berners-Lee em
1990, no CERN (Suiça)
• Permite a formatação de informação
partilhada na Internet
• Linguagem intimamente ligada às
origens da Web
Tim Berners-Lee
3. Introdução ao HTML - Hélder Oliveira
As bases do HTML
• É um formato interpretado pelo Browser
• Baseado em documentos de extensão .htm ou .html
• Comandos baseados em tag’s (marcas):
• Exemplos:
<tag>conteúdo</tag> ou <tag/>
<b>Conteúdo a Negrito</b>
<img src=“ola.jpg”/>
<br/>
4. Introdução ao HTML - Hélder Oliveira
Estrutura de uma Página HTML
<html>
<head>
[Instruções do Cabeçalho]
</head>
<body>
[Instruções para formatação dos conteúdos]
</body>
</html>
5. Introdução ao HTML - Hélder Oliveira
Estrutura de uma Página HTML
(Exemplo)
<html>
<head>
<title>11.º C</title>
</head>
<body>
Bem-vindo ao 11.º C!
</body>
</html>
6. Introdução ao HTML - Hélder Oliveira
Atributos
• Permite configurar propriedades de cada tag
• São sempre incluídos na tag de abertura
• Exemplos:
– <a href=“pagina.htm” class=normalLink>Link</a>
– <img src=“imagem.jpg” border=0/>
7. Introdução ao HTML - Hélder Oliveira
Character Entities
• Técnica para
representação de:
– Caracteres reservados ao
código HTML
– Símbolos e caracteres de
outras culturas
• Sintaxe:
&[NOME];
Ou
&#[NUMERO];
• Exemplos:
Código Caracter
> >
> >
é é
ç ç
8. Introdução ao HTML - Hélder Oliveira
Tags elementares
• Cabeçalhos
– H1, H2,H3…H6
– Exemplo:
<h1>Um titulo grande</h1>
<h3>Um titulo mais pequeno</h3>
• Parágrafos
– Tag p
– Exemplo:
<p>Isto é um parágrafo</p>
<p>Isto é o parágrafo seguinte</p>
9. Introdução ao HTML - Hélder Oliveira
Tags elementares
• Quebras de linha
– Tag br
– Exemplo:
<p>Isto é um
parágrafo<br/>que
continua aqui</p>
10. Introdução ao HTML - Hélder Oliveira
Tags elementares
• Divisões de conteúdos
– Tag hr
– Permite os atributos:
• Align
• Noshade
• Size
• Width
– Exemplo:
<p>Conteúdo antes da divisão</p>
<hr>
<p>Conteúdo depois da divisão</p>
<hr size=5 width=200 align=right>
<p>Conteúdo depois da divisão</p>
11. Introdução ao HTML - Hélder Oliveira
Listas
• Ordenadas
• Desordenadas
• Definições
12. Introdução ao HTML - Hélder Oliveira
Listas Ordenadas
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
13. Introdução ao HTML - Hélder Oliveira
Listas Ordenadas
• Atributo Type
– type=“a”
– type=“i”
– type=“1”
– Type=“I”
• Exemplo:
<ol type="I">
<li>Conseno</li>
<li>Seno</li>
<li>Tangente</li>
</ol>
14. Introdução ao HTML - Hélder Oliveira
Listas Desordenadas
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
15. Introdução ao HTML - Hélder Oliveira
Listas Desordenadas
• Atributo Type
– type=“disc”
– type=“square”
– Type=“circle”
• Exemplo:
<ul type="square">
<li>Conseno</li>
<li>Seno</li>
<li>Tangente</li>
</ul>
16. Introdução ao HTML - Hélder Oliveira
Listas de Definições
<dl>
<dt>Item 1</dt>
<dd>Texto de definição do Item 1</dd>
<dt>Item 2</dt>
<dd>Texto de definição do Item 2</dd>
<dt>Item 3</dt>
<dd>Texto de definição do Item 3</dd>
</dl>
17. Introdução ao HTML - Hélder Oliveira
Fundo da Página
• Cor
<body bgcolor="#999999">
• Imagem
<body background="fundo.jpg">
18. Introdução ao HTML - Hélder Oliveira
Formatação de Texto
• Tags para formatação
Tag Formatação
<b> Texto a negrito
<big> Texto grande
<em> Texto a Itálico Sombreado
<i> Texto Itálico
<small> Texto Pequeno
Texto Grande a Negrito
<sub> Texto Inferior à Linha
<sup> Texto Superior à Linha
<ins> ou <u> Texto Sublinhado
<del> Texto Rasurado
19. Introdução ao HTML - Hélder Oliveira
Formatação de Texto
• A tag Font
– Permite configurar
propriedades do
texto como:
• A cor
• A Fonte
• O tamanho
• Exemplo
<font size=1>Texto pequeno</font><br/>
<font color=“blue”>Texto Azul</font><br/>
<font face=“Arial”>Tipo de letra Arial</font>
<font face=“sans-serif” color=“red”
size=5>Texto não serifado, de cor vermelha
e tamanho grande</font>
20. Introdução ao HTML - Hélder Oliveira
Comentários
• Início de Comentário
<!--
• Fim de Comentário
-->
• Exemplo:
<p>Código não comentado</p>
<!--<p>Código comentado</p>-->