apresentacao aula1
TRANSCRIPT
![Page 1: Apresentacao aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/1.jpg)
Introdução ao HTML - Hélder Oliveira
Concepção de Websites
Introdução ao HTML
![Page 2: Apresentacao aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/7.jpg)
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
> >
> >
é é
ç ç
![Page 8: Apresentacao aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/11.jpg)
Introdução ao HTML - Hélder Oliveira
Listas
• Ordenadas
• Desordenadas
• Definições
![Page 12: Apresentacao aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/17.jpg)
Introdução ao HTML - Hélder Oliveira
Fundo da Página
• Cor
<body bgcolor="#999999">
• Imagem<body background="fundo.jpg">
![Page 18: Apresentacao aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/18.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
![Page 19: Apresentacao aula1](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052311/559e4cf31a28abd5588b4654/html5/thumbnails/21.jpg)
Introdução ao HTML - Hélder OliveiraFIM