MS Intro HTML.pptx

“Introdução ao HTML".
Tecnologias de Informação e comunicação.
Tiago Mota
Escola Básica e Secundária Quinta das Flores

2
 Linguagem usada nas páginas da web
 Documentos escritos em ASCII- texto
 Cada página é um ficheiro que tem a
extensão .htm ou .html
 O nome do ficheiro tem de ser em
minúsculas, sem acentos e sem
espaços.
HTML

3
 Um elemento HTML é constituído preferencialmente
por 3 partes
 Marca (tags) de inicio
 Conteúdo
 Marca (tags) de fim
Marcas
<p>html</p>

4
 Marca de inicio é composta por
Marca de inicio
<elemento atributo1=“algo” atributo2=“algo2”>
Os atributos podem ser obrigatórios ou
opcionais
Usar sempre minúsculas na escrita das marcas

5
 Conteúdo é basicamente o texto que aparece nas
páginas
 pode ser escrito em português, com maiúsculas,
minúsculas, acentos e espaços
Conteúdo

6
 A marca de fim serve exclusivamente para indicar
que o fim do elemento que estamos a utilizar
 Usa-se o sinal /
 Por exemplo:
Marca de fim
</p>
</table>

7
 Existem elementos HTML que só têm a primeira
 Marca de inicio
Marcas
<br>
<img src=“imagem.gif”>

8
Estrutura de uma página
Definição de inicio e fim de uma página HTML - <html>…</html>
Dentro da página temos duas secções:
Cabeçalho: <head>…</head>
Corpo ou Conteúdo: <body>…</body>

9
Exemplo
<html>
<head>
</head>
<body>
<p>Primeira página</p>
</body>
</html>

10
Elementos do Corpo
Paragrafo e quebra de linha
Parágrafos: delimitam blocos de informação - <p>…</p>
Quebra de linha: <br> - Elemento que não precisa de marca do fim
Exemplo:
<p> Em TM temos três áreas: Informática, Fotografia e Vídeo.
A disciplina tem 11 horas semanais.<br> Dividida em 6 para
Informática e 2,5 para as restantes.</p>
Resultado
Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11
horas semanais.
Dividida em 6 para Informática e 2,5 para as restantes.

Elementos do Corpo
Paragrafo e quebra de linha
Exemplo:
<p> Para inserir<br>uma quebra de
linha<br>num<br>paragrafo,<br>usa-se a marca br. </p>
Resultado
Para inserir
Uma quebra de linha
num
paragrafo
usa-se uma marca br.

12
Elementos do Corpo
Cabeçalhos
Existem 6 níveis de cabeçalhos , desde o mais importante <h1> até
ao menos <h6>.
Exemplo:
<h1>Mais importante</h1>
<h2>2º mais importante</h2>
<h6>Último </h6>
Resultado
Mais Importante
2º mais importante
Último

13
Elementos do Corpo
Cabeçalhos
Exemplo:
<h1 align="center">Este é o
cabeçalho 1</h1> <p>Este cabeçalho
está centrado em relação ao tamanho
da página.</p>
Resultado
Este é o cabeçalho 1
Este cabeçalho está centrado em relação ao
tamanho de página

14
Elementos do Corpo
Formatação do texto
Negrito ou bold - <b>…</b>
Italico - <i>…</i>
Sublinhado - <u>…</u>
Exemplo:
<p> Em TM temos três áreas: <b>Informática, Fotografia e
Vídeo</b>. A disciplina tem <i>11 horas semanais</i>.<br> Dividida
em 6 para <u>Informática</u> e 2,5 para as restantes.</p>
Resultado
Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11
horas semanais.
Dividida em 6 para Informática e 2,5 para as restantes.

15
Elementos do Corpo
Formatação do texto
Exemplo:
<b>Este texto está em bold</b> <br> <i> Este texto está em italico
</i> <br> <small> Este texto mais pequeno </small>
Resultado
Este texto está em bold
Este texto está em italico
Este texto mais pequeno

16
Elementos do Corpo
Listas Numeradas
Lista - <ol>…</ol>
Elemento de uma lista <li>…</li>
Exemplo:
<ol><li>Informatica</li>
<li>Fotografia</li>
<li>Video</li>
</ol>
Resultado
1. Informática
2. Fotografia
3. Vídeo

17
Elementos do Corpo
Listas Numeradas
Exemplo:
<font size=1> <h4>Lista numeradas:</h4>
<ol> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
<h4>Lista com letras:</h4>
<ol type="A"> <li>Maças</li> <li>Bananas</li> <li>Limões</li>
<li>Laranjas</li> </ol>
<h4>Lista com letras minusculas:</h4>
<ol type="a"> <li>Maças</li> <li>Bananas</li> <li>Limões</li>
<h4>RLista com numeros romanos:</h4>
<ol type="I"> <li>Maças</li> <li>Bananas</li> <li>Limões</li>
<h4>Lista com numeros romanos minusculos:</h4>
<ol type="i"> <li>Maças</li> <li>Bananas</li> <li>Limões</li>
</font>

18
Elementos do Corpo
Listas não numeradas e sub listas
Lista - <ul>…</ul>
Elemento de uma lista <li>…</li>
Exemplo:
<ul><li>Informática</li>
<ul><li>Teórica</li>
<li>Prática</li></ul>
<li>Fotografia</li>
<li>Video</li>
</ul>
Resultado
• Informática
• Teórica
• Prática
• Fotografia
• Vídeo

19
Elementos do Corpo
Listas não numeradas e sub listas
Exemplo:
<h4>Lista com discos:</h4>
<ul type="disc"> <li>Maças</li> <li>Bananas</li>
<li>Limões</li> <li>Laranjas</li> </ul>
<h4>Lista com circulos:</h4>
<ul type="circle"> <li>Maças</li> <li>Bananas</li>
<h4>Lista com quadrados;</h4>
<ul type="square"> <li>Maças</li> <li>Bananas</li>

20
Elementos do Corpo
Hiperligações
Fazem a ligação a outros documentos
<a href=”documento”>…</a>
Exemplo:
<p>O site da disciplina Tm na área de informática é <a
href=http://moodle.fe.up.pt>no moodle da feup</a></p>
Resultado
O site da disciplina Tm na área de informática é moodle da feup

21
Elementos do Corpo
Hiperligações internas
Quando queremos fazer ligações a outros ficheiros no mesmo sitio.
Exemplo:
•Ligação de um ficheiro que está em w:tmficheiro1.htm para um que está
em w:tmficheiro2.htm
•<a href=“ficheiro2.htm>…</a>
em w:tmteoricaficheiro2.htm
•<a href=“teorica/ficheiro2.htm>…</a>
em w:hjficheiro2.htm
•<a href=“../hj/ficheiro2.htm>…</a>

22
Elementos do Corpo
Hiperligações internas
Exemplo:
•<a href="lastpage.htm"> Este texto</a> é um link para uma página
chamada lastpage.htm. </p> <p> <a href="http://www.google.com/"> Este
texto</a> é um link para a página do google </p>
Resultado:
Este texto é um link para uma página chamada lastpage.htm..
Este texto é um link para a página do google

23
Elementos do Corpo
Imagens
Imagem - <img src=“caminho e nome da imagem com a extensão”>
Exemplo:
<img src=“R01.jpg”>
Resultado
Ter em atenção que o caminho e o nome
do ficheiro da imagem tem de ser escrito
partindo do ponto de partida do documento
Ou seja se a imagem estiver na directoria
do documento HTML só se escreve o nome
do ficheiro.
Se estiver noutra directoria temos de seguir
os mesmo cuidados que nas hiperligações
Usar minúsculas, não usar acentos
e espaços nos nomes das imagens

24
Elementos do Corpo
Imagens
Exemplo:
<p> Uma imagem com o tamanho real: <img
src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg
" > </p>
<p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura
<img
" width="48" height="48"> </p>
<p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura
<img
" width="148" height="48"> </p>

25
Elementos do Corpo
Tabelas
Muitas vezes é usada para estruturar a informação
Tabela <table>…</table>
Linha <tr>…</tr>
Celula <td>…</td>
Exemplo:
<table border=“2”>
<tr>
<td>Célula da 1ª linha e 1ª Coluna</td>
</tr>
<tr>
</tr>
</table>
Resultado
Célula da 1ª linha e 1ª
Coluna
Coluna
Coluna
Coluna

26
Elementos do Corpo
Tabelas
Exemplo:
<h4> Esta tabela tem legenda e borda
de 6: </h4>
<table border="6">
<caption>Legenda</caption>
<tr> <td>100</td>
<td>200</td>
<td>300</td> </tr>
<tr> <td>400</td>
<td>500</td>
<td>600</td>
</tr> </table>
Resultado
Esta tabela tem legenda e borda de 6:
Legenda
100 200 300
400 500 600

27
Elementos do Corpo
Tabelas
Exemplo:
<h4>Esta tabela tem fundo nas
celulas</h4>
<table border="1">
<tr> <td
bgcolor="red">primeira</td>
<td>linha</td> </tr>
<tr> <td background="3dm-
overall.gif"> segunda</td>
<td bgcolor="yellow">linha</td>
</tr> </table>
Resultado
Esta tabela tem fundo nas células
primeira linha
segunda linha

28
Estrutura dos elementos
O elementos têm uma estrutura de encaixe hierárquico,
mas não podem ser intercalados
<p>Paragrafo com texto <b>tipo bold</b> texto normal novamente</p>
Correcto
Incorrecto
<p>Texto que não <b> aparece</p> correctamente</b>

29
Referencias
HTML página de consulta
W3C HTML Home Page, W3C
Especificação da HyperText Markup Language 4.01, W3C
Lista de elementos HTML, W3C
Lista de atributos HTML, W3C
HyperText Markup Language, WaSP

MS Intro HTML.pptx

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a MS Intro HTML.pptx

Semelhante a MS Intro HTML.pptx (20)

Último

Último (20)

MS Intro HTML.pptx