apresentacao aula1
TRANSCRIPT
Introdução ao HTML - Hélder Oliveira
Concepção de Websites
Introdução ao HTML
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
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/>
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>
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>
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/>
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
> >
> >
é é
ç ç
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>
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>
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>
Introdução ao HTML - Hélder Oliveira
Listas
• Ordenadas
• Desordenadas
• Definições
Introdução ao HTML - Hélder Oliveira
Listas Ordenadas
<ol><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
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>
Introdução ao HTML - Hélder Oliveira
Listas Desordenadas
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
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>
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>
Introdução ao HTML - Hélder Oliveira
Fundo da Página
• Cor
<body bgcolor="#999999">
• Imagem<body background="fundo.jpg">
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
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>
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>-->
Introdução ao HTML - Hélder OliveiraFIM