apresentacao aula1

21
Introdução ao HTML - Hélder Oliveira Concepção de Websites Introdução ao HTML

Upload: helder-oliveira

Post on 09-Jul-2015

50 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Apresentacao aula1

Introdução ao HTML - Hélder Oliveira

Concepção de Websites

Introdução ao HTML

Page 2: Apresentacao aula1

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

Page 3: Apresentacao aula1

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/>

Page 4: Apresentacao aula1

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>

Page 5: Apresentacao aula1

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>

Page 6: Apresentacao aula1

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/>

Page 7: Apresentacao aula1

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

&gt; >

&#62; >

&eacute; é

&ccedil; ç

Page 8: Apresentacao aula1

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>

Page 9: Apresentacao aula1

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>

Page 10: Apresentacao aula1

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>

Page 11: Apresentacao aula1

Introdução ao HTML - Hélder Oliveira

Listas

• Ordenadas

• Desordenadas

• Definições

Page 12: Apresentacao aula1

Introdução ao HTML - Hélder Oliveira

Listas Ordenadas

<ol><li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

Page 13: Apresentacao aula1

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>

Page 14: Apresentacao aula1

Introdução ao HTML - Hélder Oliveira

Listas Desordenadas

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Page 15: Apresentacao aula1

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>

Page 16: Apresentacao aula1

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>

Page 17: Apresentacao aula1

Introdução ao HTML - Hélder Oliveira

Fundo da Página

• Cor

<body bgcolor="#999999">

• Imagem<body background="fundo.jpg">

Page 18: Apresentacao aula1

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

Page 19: Apresentacao aula1

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>

Page 20: Apresentacao aula1

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>-->

Page 21: Apresentacao aula1

Introdução ao HTML - Hélder OliveiraFIM