HTML

1
Prof. Tc. Gerson James
COMPUMASTER INFORMTICA
WEBDESIGN
Introduo ao HTML Hyper Text Markup Language

2
Linguagem usada nas pginas da web Documentos escritos em ASCII- texto Cada pgina um ficheiro que tem a extenso .htm ou .html O nome do ficheiro tem de ser em minsculas, sem acentos e sem espaos.
HTML
3
Um elemento HTML constitudo preferencialmente por 3 partes Marca(tags) de inicio <p>html</p> Contedo Marca(tags) de fim
Marcas
4
Marca de inicio composta por
Marca de inicio
<tag atributo1=valor atributo2=valor2>

Os atributos podem ser obrigatrios ou opcionais Usar sempre minsculas na escrita das marcas
5
Contedo
Contedo basicamente o texto que aparece nas pginas pode ser escrito em portugus, com maisculas, minsculas, acentos e espaos
6
A marca de fim serve exclusivamente para indicar 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 tm a primeira Marca de inicio
Marcas
<br> <img src=imagem.gif>
8
Estrutura de uma pgina

DOCTYPE define a verso do HTML que estamos a trabalhar
Por defeito pomos a ltima mais usada <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Definio de inicio e fim de uma pgina HTML - <html></html> Dentro da pgina temos duas seces: Cabealho: <head></head> Corpo ou Contedo: <body></body>
9
Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <p>Primeira pgina</p>
</body> </html>
10
Titulo que aparece em cima - <title></title> Tipo de contedos e de linguagem Autor Descrio da pgina Keywords
Cabealho
As Metas do informaes das mais variadas espcies
<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>Tecnologia das Mdias</TITLE> <META NAME="Author" CONTENT=Gerson James"> <META NAME="Description" CONTENT=Pgina da disciplina HTML"> <META NAME="KeyWords" CONTENT=informatica,computadores"> </HEAD>
11
Elementos do Corpo
Paragrafo e quebra de linha
Pargrafos: delimitam blocos de informao - <p></p> Quebra de linha: <br> - Elemento que no precisa de marca do fim
<p>Em TM temos trs reas: Informtica, Fotografia e Vdeo. A disciplina tem 11 horas semanais.<br> Dividida em 6 para Informtica e 2,5 para as restantes.</p>
Resultado
Em TM temos trs reas: Informtica, Fotografia e Vdeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informtica e 2,5 para as restantes.
12
Paragrafo e quebra de linha

Exemplo:
<p> Para inserir<br>um break<br>num<br>paragrafo,<br>usa-se a marca br. </p>
Elementos do Corpo
Para inserir
Resultado
um break num paragrafo usa-se uma marca br.
13
Elementos do Corpo
Cabealhos
Existem 6 nveis de cabealhos , 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
14
Elementos do Corpo
Cabealhos
Exemplo:
<h1 align="center">Este o cabealho 1</h1> <p>Este cabealho est centrado em relao ao tamanho da pgina.</p>
Resultado
Este o cabealho 1
Este cabealho est centrado em relao ao tamanho de pgina
15
Elementos do Corpo
Negrito ou bold - <b></b> Italico - <i></i> Sublinhado - <u></u>
Formatao do texto
<p>Em TM temos trs reas: <b>Informtica, Fotografia e Vdeo.</b> A disciplina tem <i> 11 horas semanais.</i><br> Dividida em 6 para <u>Informtica</u> e 2,5 para as restantes.</p>
Resultado
Em TM temos trs reas: Informtica, Fotografia e Vdeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informtica e 2,5 para as restantes.
16
Elementos do Corpo
Formatao 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
17
Elementos do Corpo
Lista - <ol></ol>
Listas Numeradas
Elemento de uma lista <li></li> Exemplo:

<ol> <li>Informtica</li> <li>Fotografia</li> <li>Video</li> </ol>
Resultado
1. 2. 3.
Informatica Fotografia Video
18
Elementos do Corpo
Exemplo:
Listas Numeradas
<font size=1> <h4>Lista numeradas:</h4> <ol> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com letras:</h4> <ol type="A"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com letras minusculas:</h4> <ol type="a"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>RLista com numeros romanos:</h4> <ol type="I"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com numeros romanos minusculos:</h4> <ol type="i"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> </font>
19
Exemplo:
<font size=1> <h4>Lista numeradas:</h4>
<h4>Lista com letras:</h4>
<ol> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <ol type="A"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com letras minusculas:</h4> <ol type="a"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>RLista com numeros romanos:</h4> <ol type="I"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol>
<h4>Lista com numeros romanos minusculos:</h4>

<ol type="i"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> </font>
20
Lista - <ul></ul>
Listas no numeradas e sub listas
Elementos do Corpo
Elemento de uma lista <li></li> Exemplo:

<ul><li>Informtica</li> <ul><li>Terica</li> <li>Prtica</li></ul> <li>Fotografia</li> <li>Video</li> </ul>
Resultado
Informtica Terica Prtica Fotografia Vdeo
21
Exemplo:
Listas no numeradas e sub listas
Elementos do Corpo
<h4>Lista com discos:</h4> <ul type="disc"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul> <h4>Lista com circulos:</h4> <ul type="circle"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul> <h4>Lista com quadrados;</h4> <ul type="square"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul>
22
Elementos do Corpo
Fazem a ligao a outros documentos <a href=documento.extenso ou endereo web></a>
Hiperligaes
Exemplo:
http://www.google.com.br; http://maps.google.com; http://www.youtube.com; http://app.google.com; http://docs.google.com
Resultado
A Google umas das maiores empresas em solues para WEB. So algumas de suas solues: GoogleMaps; Youtube; GoogleApp; GoogleDocs entre outros.
23
Elementos do Corpo
Hiperligaes internas
Quando queremos fazer ligaes a outros ficheiros no mesmo sitio. Exemplo:
Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\ficheiro2.htm <a href=ficheiro2.htm></a> Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\teorica\ficheiro2.htm <a href=teorica/ficheiro2.htm></a> Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\hj\ficheiro2.htm <a href=../hj/ficheiro2.htm></a>
24
Elementos do Corpo
Hiperligaes internas
Exemplo:
<a href="lastpage.htm"> Este texto</a> um link para uma pgina chamada lastpage.htm. </p> <p> <a href="http://www.google.com/"> Este texto</a> um link para a pgina do google </p> Resultado: Este texto um link para uma pgina chamada lastpage.htm.. Este texto um link para a pgina do google
25
Elementos do Corpo
Imagens
Imagem - <img src=caminho e nome da imagem com a extenso> Exemplo:
<img src=R01.jpg>
Ter em ateno 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 hiperligaes Usar minsculas, no usar acentos e espaos nos nomes das imagens
Resultado
26
Elementos do Corpo
Exemplo:
Imagens
<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 src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="48" height="48"> </p> <p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="148" height="48"> </p>
Elementos do Corpo
Tabelas
Muitas vezes usada para estruturar a informao Tabela <table></table> Linha <tr></tr> Celula <td></td>
<table border=2> <tr> <td>Clula da 1 linha <td>Clula da 1 linha </tr> <tr> <td>Clula da 2 linha <td>Clula da 2 linha </tr> </table>
Exemplo:
Resultado
e 1 Coluna</td> e 2 Coluna</td> e 1 Coluna</td> e 2 Coluna</td>
Clula da 1 linha e 1 Coluna Clula da 2 linha e 1 Coluna Clula da 1 linha e 2 Coluna Clula da 2 linha e 2 Coluna
27
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
28
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 clulas
primeira segunda
linha linha
29
30
Estrutura dos elementos

O elementos tm uma estrutura de encaixe hierrquico, mas no podem ser intercalados Correcto
<p>Paragrafo com texto <b>tipo bold</b> texto normal novamente</p>
Incorrecto
<p>Texto que no <b> aparece</p> correctamente</b>
Referencias
HTML pgina de consulta W3C HTML Home Page, W3C Especificao da HyperText Markup Language 4.01, W3C Lista de elementos HTML, W3C Lista de atributos HTML, W3C HyperText Markup Language, WaSP
31

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

1

Prof. Tc. Gerson James

Introduo ao HTML Hyper Text Markup Language

Marca de inicio composta por

<tag atributo1=valor atributo2=valor2>

Existem elementos HTML que s tm a primeira Marca de inicio

<br> <img src=imagem.gif>

Estrutura de uma pgina

As Metas do informaes das mais variadas espcies

Paragrafo e quebra de linha

um break num paragrafo usa-se uma marca br.

Exemplo: <h1>Mais importante</h1> <h2>2 mais importante</h2> <h6>ltimo </h6>

Este cabealho est centrado em relao ao tamanho de pgina

Elemento de uma lista <li></li> Exemplo:

Informatica Fotografia Video

Prof. Tc. Gerson James

<h4>Lista com numeros romanos minusculos:</h4>

Listas no numeradas e sub listas

Elemento de uma lista <li></li> Exemplo:

Listas no numeradas e sub listas

100 200 300 400 500 600

Estrutura dos elementos

Potrebbero piacerti anche