You are on page 1of 46

Escola Tcnica Informtica-Dili 2012

Hyper Text Markup Language (HTML). Basic & Intermediate Module



Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

1

PARTE I
HTML BSICO
Definio
HTML significa Hyper Text Markup Language e a linguagem de marcao de
hipertexto, ou seja, a linguagem na qual so escritas as pginas da Web, interpretada pelo
navegador. As informaes esto ligadas na forma de pginas ligadas entre si. A pgina
transferida de um computador remoto para o usurio, onde o browser faz o trabalho de
interpretar os cdigos naquele documento e mostra a pgina que o usurio v. A Web est
estruturada em dois princpios bsicos: HTTP (Hyper Text Transfer Protocol) e HTML
(Hyper Text Markup Language). HTTP o protocolo de transferncia de hipertexto, ou
seja, o protocolo que permite a navegao na Web, com o simples clicar do mouse sobre
o texto (ou imagem) que esteja associado a outro link.

Requisitos para o desenvolvimento de uma pgina WEB

Conhecer a linguagem HTML para escrever o cdigo fonte de sua pgina;
Editor de texto para gerar o seu cdigo fonte (bloco de notas, Front Page,
Dremweaver, entre outros);
Um navegador de internet (browser) para visualizar as suas pginas (Internet
Explorer, Mozilla Firefox, Opera, Netscape, etc).
TAGs

Os comandos HTML so chamados de TAGs, compreendem de marcas padres que so
utilizadas para fazer indicaes a um browser. Assim como em outras linguagens, os
comandos tm uma sintaxe prpria, e seguem algumas regras:

As TAGs aparecem sempre entre sinais de menor que (<) e maior que (>);
Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de um
comando qualquer finalizada com a precedncia de uma barra (/).
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

2

Exemplos:

TAG nico: <br>
TAG duplo : <center> Dionisio de Jesus Ximenes </center>

1.1 Iniciando um documento

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Uma
pgina HTML possui trs partes bsicas: estrutura principal, um cabealho e um corpo de
pgina.









<HTML> </HTML>
So usados para delimitar os comandos HTML, indicam o incio e o fim de um documento

<HEAD> ... </HEAD>
Usado para indicar parmetros de configurao do documento, tambm utilizado para
exibir o ttulo na barra de ttulos do browser.
<TITLE> ... </TITLE>
Indica o ttulo do documento para o browser. Esta TAG deve estar sempre dentro das
TAGs <HEAD> </HEAD>.

<BODY> ... </BODY>
Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page.
HTML
CABEALHO

CORPO DE PGINA

Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

3

Opcionalmente podemos indicar uma cor para o fundo da pgina, usando a opo
BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opo
BACKGROUND

Iniciaremos a nossa primeira pgina editando o cdigo no Bloco de Notas ou Notepad.

<html>
<head>
<title>Escola Tcnica Informtica</title>
</head>
<body>
Corpo da pgina HTML Escola Tecnica Informatica.
</body>
</html>
















Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

4

Segundo pgina
Utilizando TAG nico: <br>

<html>
<head>
<title>Exemplo II</title>
</head>
<body>
Nome : Dionisio Miguel de Jesus Ximenes,B.Gi<br>
Nacionalidade : Timorense<br>
Naturalidade : Dili<br>
Data de Nascimento : 15 de Junho de 1987<br>
Morada : Rua No.6 de Setembro Akadiru-Hun Dili,
Timor-Leste<br>
No. Telemovel : (+670) 738 5765<br>
E-mail : dimarsoft@yahoo.com
</body>
</html>

Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

5

1.2 Trabalhando com textos
No corpo do documento onde estar localizado o ttulo e subttulos, texto, imagens,
ligaes com outras pginas, etc. Nesta seo veremos como trabalhar com os textos.

1.2.1 Ttulos e Subttulos
Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6), juntamente com a
opo CENTER. Texto inserido entre <H3><CENTER> e </CENTER></H3>

Texto inserido entre <H1> e </H1>:


Texto inserido entre <H2> e </H2>:


Texto inserido entre <H3> e </H3>:

Crie um novo arquivo chamado ExemploTitulo.html e insira o cdigo abaixo.

<html>
<head>
<title>Escola Tcnica Informtica</title>
</head>
<body>
<H1>Ttulo com H1: Escola Tcnica Informtica</H1>
<H2>Ttulo com H2: Escola Tcnica Informtica</H2>
<H3>Ttulo com H3: Escola Tcnica Informtica</H3>
<H4>Ttulo com H4: Escola Tcnica Informtica</H4>
<H5>Ttulo com H5: Escola Tcnica Informtica</H5>
<H6>Ttulo com H5: Escola Tcnica Informtica</H6>
<H3><CENTER> Ttulo com H6 centralizado: Escola
Tcnica Informtica</CENTER></H3>
</body>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

6

</html>


1.2.2 Estilos de texto

<B>...</B> (Bold)
Aplica o estilo negrito.

<I>...</I> (Italic)
Aplica o estilo itlico.
<U>...</U> (Underline)
Aplica o estilo sublinhado (nem todos os browser o reconhecem).

<SUP>...</SUP>
Faz com que o texto fique sobrescrito
.

<SUB>...</SUB>
Faz com que o texto fique subscrito
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

7

<P>
A TAG responsvel pela quebra de pargrafos a <P> que finaliza o pargrafo e
insere automaticamente uma linha em branco entre pargrafos.

<P align=posio> Texto do pargrafo.
Posio pode ser:
Left: alinhamento esquerda.
Center: centralizado
Right: alinhamento direita

Exemplo:
<html>
<head>
<title> Escola Tcnica Informtica</title>
</head>
<body>
<B>Estilo negrito.</B> <br>
<I>Estilo itlico.</I> <br>
<U>estilo sublinhado.</U> <br>
<SUP>Texto sobrescrito.</SUP><br>
<SUB>Texto subscrito.</SUB><br>
<p align="center"> Este um exemplo do primeiro
pargrafo centralizado.</p>
<p> Este um exemplo do segundo pargrafo.</p>
</body>
</html>





Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

8















1.2.3 Fontes
Para inserir em sua pgina um texto com fontes de tamanhos, cores e tipos diferentes
utilizamos a TAG <FONT> ... </FONT>.
Sintaxe do comando:
<FONT size=n face=nome color=cor> TEXTO </FONT>
Onde:
SIZE=n : n varia de 1 a 7 e o valor padro da maioria dos navegadores;
FACE=nome : nome da fonte a ser utilizada (Arial, Tahoma, etc);
COLOR=cor : cor da fonte definida em hexadecimal, ou atravs de um nome pr-
definido de cores.
Exemplo:
Crie um arquivo chamado Fontes.html e insira o cdigo abaixo:

<html>
<head>
<title>Escola Tcnica Informtica</title>
</head>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

9

<body>
<FONT size="1" face="Tahoma" color="red"> Texto com cor
vermelha</FONT><br>
<FONT size="2" face="Arial" color="green"> Texto com cor
verde </FONT><br>
<FONT size="3" face="Tahoma" color="blue"> Texto com cor
azul</FONT><br>
<FONT size="4" face="Tahoma" color="orange"> Texto com cor
laranja</FONT><br>
<FONT size="5" face="Tahoma" color="pink"> Texto com cor
pink</FONT><br>
<FONT size="6" face="Tahoma" color="#4F2F4F"> Texto com cor
violeta</FONT><br>
<FONT size="7" face="Tahoma" color="#FF00FF"> Texto com cor
magenta</FONT><br>
</body>
</html>












Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

10

1.2.4 Linhas Horizontais
Desenha uma linha horizontal no documento. No precisa ser finalizada com
</HR>.
Sintaxe:
<HR width=n% align=posio size=n color=#cornoshade>
Atributos:
SIZE: Define a espessura, em pixels, da linha.
WIDTH: Define a largura da linha, o que pode ser feito em pixels (nmero
absoluto) ou em percentual da tela (com o smbolo de %)
ALIGN: Alinhamento, como o que tem sido usado, pode ser LEFT, RIGHT
e CENTER, ou seja, esquerda, direita e ao centro, respectivamente.
NOSHADE: Linha sem sombra. O padro a linha sombreada, utilizando
esse atributo temos uma linha sem sombra.

Exemplo:
Crie um arquivo chamado LinhaHorizontal.html e insira o cdigo abaixo:

<html>
<head>
<title>Escola Tcnica Informtica</title> </head>
<body>
Primeiro exemplo com a linha horizontal
<HR width="100%" align="left" size="2" color="silver" ><br>
<center>Segundo exemplo com a linha horizontal</center>
<HR width="70%" align="center" size="3" color="blue" ><br>
Terceiro exemplo com a linha horizontal
<HR width="30%" align="center" size="5" color="red"
noshade><br>
</body>
</html>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

11



1.2.5 Corpo do Documento
Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page.
Opcionalmente podemos indicar uma cor para o fundo da pgina, usando a opo
BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opo
BACKGROUND.

Exemplo com cor de fundo na pgina
<html>
<head>
<title>Biografia</title>
</head>
<body bgcolor="green" >
Nome : Maria Ribeiro Guterres<br>
Nacionalidade : Timorense<br>
Naturalidade : Baguia<br>
Data de Nascimento : 15 de Junho de 1987<br>
Morada : Fatuhada Dili, Timor-Leste<br>
No. Telemovel : (+670) 738 5765<br>
E-mail : dimarsoft@yahoo.com

Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

12

</body>
</html>


Exemplo com imagem de fundo na pgina:
<html>
<head>
<title>Biografia</title>
</head>
<body background="deo.jpg" >
Nome : Maria Ribeiro Guterres<br>
Nacionalidade : Timorense<br>
Naturalidade : Baguia<br>
Data de Nascimento : 15 de Junho de 1987<br>
Morada : Fatuhada Dili, Timor-Leste<br>
No. Telemovel : (+670) 738 5765<br>
E-mail : dimarsoft@yahoo.com

</body>
</html>

Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

13


Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

14

PARTE II
CARACTERES ESPECIAIS

Character Entity
Number
Entity
Name
&#34; &quot;
&#39; &apos;
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;
&#161; &iexcl;
&#162; &cent;
&#163; &pound;
&#164; &curren;
&#165; &yen;
&#166; &brvbar;
&#167; &sect;
&#168; &uml;
&#169; &copy;
&#170; &ordf;
&#171; &laquo;
&#172; &not;
&#174; &reg;
&#175; &macr;
&#176; &deg;
&#177; &plusmn;
&#178; &sup2;
&#179; &sup3;
&#180; &acute;
&#181; &micro;
&#182; &para;
&#185; &sup1;
&#186; &ordm;
&#187; &raquo;
&#188; &frac14;
&#189; &frac12;
&#190; &frac34;
&#191; &iquest;
&#215; &times;
&#247; &divide;
&#192; &Agrave;
&#193; &Aacute;
&#194; &Acirc;
&#195; &Atilde;
&#196; &Auml;
&#197; &Aring;
&#198; &AElig;
&#199; &Ccedil;
&#200; &Egrave;
&#201; &Eacute;
&#202; &Ecirc;
&#203; &Euml;
&#204; &Igrave;
&#205; &Iacute;
&#206; &Icirc;
&#207; &Iuml;
&#208; &ETH;
&#209; &Ntilde;
&#210; &Ograve;
&#211; &Oacute;
&#212; &Ocirc;
&#213; &Otilde;
&#214; &Ouml;
&#216; &Oslash;
&#217; &Ugrave;
&#218; &Uacute;
&#219; &Ucirc;
&#220; &Uuml;
&#221; &Yacute;
&#222; &THORN;
&#223; &szlig;
&#224; &agrave;
&#225; &aacute;
&#226; &acirc;
&#227; &atilde;
&#228; &auml;
&#229; &aring;
&#230; &aelig;
&#231; &ccedil;
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

15

&#232; &egrave;
&#233; &eacute;
&#234; &ecirc;
&#235; &euml;
&#236; &igrave;
&#237; &iacute;
&#238; &icirc;
&#239; &iuml;
&#240; &eth;
&#241; &ntilde;
&#242; &ograve;
&#243; &oacute;
&#244; &ocirc;
&#245; &otilde;
&#246; &ouml;
&#248; &oslash;
&#249; &ugrave;
&#250; &uacute;
&#251; &ucirc;
&#252; &uuml;
&#253; &yacute;
&#254; &thorn;
&#255; &yuml;
D E O





















Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

16

PARTE III
IMAGENS
Para inserir uma imagem em uma pgina web utilizamos o comando, tag, <img
src> e seus atributos. Os formatos mais usados so o GIF e o JPG, ambos com
compactao de pixels.

Sintaxe:
<IMG SRC="endereo da imagem WIDTH=n% HEIGHT=n% ALIGN=posio
ALT=texto>
Atributos:

WIDTH: Define a largura da imagem, o que pode ser feito em pixels (nmero
absoluto) ou em percentual da tela (com o smbolo de %).
HEIGHT: Define a altura da linha, o que pode ser feito em pixels (nmero absoluto)
ou em percentual da tela (com o smbolo de %).
ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER, ou seja,
esquerda, direita e ao centro, respectivamente.
ALT: texto que ir aparecer ao passar o mouse sobre a imagem ou texto que surgir
caso a imagem no possa ser visualizada.
BORDER: Especificao da largura da borda da imagem. Valor em pixel.
VSPACE: Para especificar o espao que deve ser deixado acima e abaixo da imagem.
Valor em pixel.
HSPACE: Especifica o espao que deve ser deixado nas laterais da imagem. Valor
em pixel

O nico obrigatrio o src.
Exemplo.:
Crie um arquivo chamado Imagem.html e insira o cdigo abaixo:

<html>
<head>
<title>Hau Nia Imagen</title></title>
<body>
<h2>Minha Imagen</h2>
<IMG SRC="dionisio.jpg">
</body>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

17

</html>


Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

18

Exemplo Segundo :
<html>
<head>
<title>Dionisio Ximenes,B.Gi</title>
</head>
<body>
<IMG SRC="dionisio.jpg" ALIGN="left" ALT="Chefe Departamento
Linguagem de Programao Dionisio Miguel de Jesus Ximenes,B.Gi"> <font size="3"
face="arial" color="blue">Esta a minha imagem inserida.</font>
</body>
</html>


















Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

19

PARTE IV
LINKS
O principal poder do HTML vem da capacidade de interligar partes de um texto,
imagens a outros documentos.
A interligao entre documentos no se restringe somente s ligaes com outras pginas.
Em pginas muito longas onde um assunto tem vrios tpicos, podemos utilizar ndices
onde os links tm a funo de interligar os tpicos de um texto e que com apenas um
clique em um dos tpicos do ndice, o item exibido.

4.1 Links para o mesmo diretrio

Voc s precisa especificar o nome do arquivo que ser chamado e a sua extenso.

Sintaxe:

<A HREF = nomeDoArquivo.extenso>
Texto ou imagem
</A>
Onde:
A: abertura da TAG de link;
HREF=nomeDoArquivo.extenso: deve ser informado o nome
completo do arquivo que ser acessado;
Texto ou imagem: que servir como link;
/A: encerra a TAG de link.

<html>
<head>
<title>Aprende Link</title>
</head>
<body >
<h1><font face="arial"color="orange">MENU</font></h1>
<HR width="100%" align="left" size="2" color="silver" >
<A HREF = "EstiloTexto.html">Estilo de Texto</A>
<br>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

20

<A HREF = "ExemploTitulo.html">Ttulos e
Subttulos</A>
<br>
<A HREF = "index5.html">LinhaHorizontal</A>
<br>
<A HREF = "Fontes.html">Fontes</A>
<br>
<A HREF = "Imagem.html">Imagem</A>
</body>
</html>


4.2 Links para outro diretrio
Para criar links para uma pgina localizada em outros diretrios necessrio
indicar o caminho completo do arquivo.
Exemplo :
<html>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

21

<head>
<title>Aprende Link</title>
</head>
<body >
<h1><font face="arial"color="aqua">MENU</font></h1>
<HR width="100%" align="left" size="2" color="orange" >
<a href="E:\arquivos TL\historia.html">Historia</a><br>
<a href="E:\dokumentos\historia.html">Profile</a><br>
<a href="E:\Musika\dimarsoft.html">muzika</a>

</body>
</html>




Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

22

PARTE V
LISTAS
5.1 - Criando listas ordenadas.

Listas ordenadas so tambm denominadas listas numeradas, pois, quando um
navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item
utilizando nmeros, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas so iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finalmente, </OL>.

Sintaxe:

<OL TYPE=formato START=n>
<LI> Tpico 1
<LI> Tpico 2
<LI> Tpico n
</OL>

Onde:
<OL>: incio da lista numerada;
TYPE=formato: o formato da numerao pode ser:
1: lista numrica (no necessrio ser definido);
A: lista alfabtica com letras maisculas;
A: lista alfabtica com letras minsculas;
I: Lista numrica com nmeros romanos maisculos;
I: lista numrica com nmeros romanos minsculos;
START=n: o valor inicial de uma lista numerada;
<LI>: tpicos da lista;
</OL>: fim da lista numerada;


Exemplo:
Crie um arquivo chamado Listas.html e insira o cdigo abaixo:

<html>
<head>
<title>Listas Ordenadas</title>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

23

</head>
<body>
<center><h1>Listas Ordenadas</h1></center>
<h3>Escola Tecnica Informatica Classe 3<u>&deg;
Ano</u> Turma B</h3>
<OL>
<LI>Crhistina Silveira
<LI>Angela dos Santos
<LI>Sonia A. dos Soantos
<Li>Nidio dos Santos
<LI>Adeoliziana da Silva
</OL>
</body>
</html>


5.2 - Criando listas no ordenadas
Listas no ordenadas so muito parecidas com as ordenadas. A nica diferena o
fato de elas no definirem explicitamente uma ordem, como no caso as numeradas. Eles
so formados por smbolos, que podem ser bola, quadrado, e uma bola vazia. Elas so
iniciadas com a TAG <UL> e so respectivamente terminadas com </UL>. E seus
elementos so que nem as numeradas: com <LI>.

Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

24

Sintaxe:

<UL TYPE=formato>
<LI> Tpico 1
<LI> Tpico 2
<LI> Tpico 3
</UL>

Exemplo :
Acrescente o cdigo abaixo no arquivo Listas.html:
<html>
<head>
<title>Listas No Ordenadas</title>
</head>
<body>
<center><h1>Listas No Ordenadas</h1></center>
<h3>Os Meus Irmos</h3>
<UL>
<LI>Jonito R. de Jesus
<LI>Aquelino F. de Jesus
<LI>Kdony M. de Jesus
<LI>Angelino de Jesus
</UL>
</body>
</html>







Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

25

PARTE VI
TABELAS
Tabelas correspondem a um timo formato para originar informaes, e por essa razo
que eles foram acrescentados linguagem HTML.

6.1 - Construindo tabelas com o elemento TABLE

A TAG <TABLE> utilizada para a representao de dados tabulares. A estrutura e o
contedo da tabela devem ficar dentro das TAGs <TABLE> </TABLE>

6.1.1 - O ttulo da tabela (elemento CAPTION)

A TAG <CAPTION> especifica o ttulo de uma tabela. Por exemplo:

<CAPTION>Notas da primeira avaliao</CAPTION>

6.1.2 - TABLE HEADINGS (elemento TH)
A TAG <TH> usada para especificar as clulas de cabealho da tabela. Essas
clulas so diferentes das outras, pois seu contedo aparece geralmente em negrito. O
elemento TH pode ser apresentado sem contedo algum: isso corresponde a uma clula em
branco. As tabelas podem ainda conter mais de um TH para uma dada coluna, ou linha, ou
simplesmente no conter nenhum elemento TH, isto , no conter em nenhuma clula em
destaque. O TAG dela :

<TH>texto em destaque</TH>

Observaes: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.

6.1.3 - TABLE DATA (elemento TD)
A TAG <TD> especifica a clulas de dados de uma tabela. Por se tratar de dados comuns (e
no cabealhos), essas clulas possuem seu contedo escrito em fonte normal, sem nenhum
destaque e alinhamento esquerda. Assim como o TH, pode-se construir clulas em
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

26

branco, usando o elemento TD, como no exemplo a seguir:
<TD>Clulas de dados</TD>

6.1.4 - END OF TABLE ROW (elemento TR)
A TAG <TR> indica o incio de uma linha na tabela. Cada linha da tabela pode conter
vrias clulas, e, portanto, necessrio que se faa uso de uma marcao que indique
exatamente o ponto de quebra de uma linha e incio de outra. Toda linha deve terminar com
um </TR>.

6.2 - Atributos para a tabela
As marcaes das tabelas podem apresentar resultados diferentes, se acompanhadas de
alguns atributos. Os principais so:

6.2.1 - Border
Um atributo opcional para ser usado com TABLE o atributo BORDER. Se ele
estiver presente, a tabela ser formatada com linhas de borda.

Exemplo :

<html>
<head>
<title>Dionisio M. J. Ximenes</title>
</head>
<body>
<TABLE>
<CAPTION> Nota da primeira avaliao </CAPTION>
<tr>
<th>No</th>
<th>Nome</th>
<th>Valor</th>
<th>Observacao</th>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

27

</tr>
<tr>
<td>0120101</td>
<td>Maria Ribeiro Guterres</td>
<td>7.5</td>
<td>Aprovado</td>
</tr>
<tr>
<td>0120102</td>
<td>Aquelino Fernandes de Jesus</td>
<td>8.5</td>
<td>Aprovado</td>
</tr>
<tr>
<td>0120103</td>
<td>Fernando de Jesus</td>
<td>4.5</td>
<td>Reprovado</td>
</TABLE>
</body>
</html>


Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

28

O atributo BORDER pode tambm receber um valor que vai estabelecer qual a espessura
(alm da existncia) da linha de borda da tabela (BORDER="valor"). Se o valor atribudo
for 0 (zero), o BORDER funciona exatamente como o caso padro, sem o BORDER. Dessa
maneira, possvel colocar tabelas em maior destaque, atribuindo um valor maior que 1
para o BORDER.

Exemplo :
<html>
<head>
<title>Dionisio M. J. Ximenes</title>
</head>
<body>
<Table Border=5>
<CAPTION>Pessoais Multimedia</CAPTION>
<tr>
<th>Nome</th>
<th>E-mail</th>
</tr>
<tr>
<td>Dionisio Ximenes</td>
<td>dimarsoft@yahoo.com</td>
</tr>
<tr>
<td>Maria Ribeiro Guterres</td>
<td>mery.baguia@yahoo.com</td>
</tr>
<tr>
<td>Nolasco Montalvao</td>
<td>ano.malaga@gmail.com</td>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

29

</tr>
</body>
</html>


6.2.2 - ALIGN
Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto dentro
de uma clula, com relao as bordas laterais. Quando aplicado a TR, ele define o
alinhamento de toda uma linha da tabela.
O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT,
para alinhar esquerda, centralizar ou alinhar direita, respectivamente

<html>
<head>
<title>Dionisio M. J. Ximenes</title>
</head>
<body>
<table border=1>
<caption>Exemplo ALIGN</caption>
<tr>
<td>Primeira Exemplo</td>
<td>Segunda Exemplo</td>
<td>Terceira Exemplo</td>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

30

</tr>
<tr>
<td align="center">Centro</td>
<td align="left">Esquerda</td>
<td align="right">Direita</td>
</tr>
</table>
</body>
</html>

6.2.3 VALIGN

Pode ser aplicado a TH e TD e define o alinhamento do texto em relao s bordas superior
e inferior. Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no
meio e na parte de baixo, respectivamente

Exemplo:
<html>
<head>
<title>VALIGN</title>
</head>
<body>
<TABLE BORDER height="109">
<caption>EXMPLO VALIGN</caption>
<TD>Teste de alinhamento</TD>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

31

<TD VALIGN="TOP">TOP</TD>
<TD VALIGN="middle">MIDDLE</TD>
<TD VALIGN="bottom">BOTTOM</TD>
</TABLE>
</body>
</html>


6.2.4 CELLPADDING

Este atributo utilizado para formatar o espao entre o contedo de uma clula e suas
bordas em todos os sentidos. aplicado dentro da TAG <TABLE>.

Exemplo:
Acrescente o cdigo abaixo no arquivo Table.html:

<html>
<head>
<title>CELLSPACING</title>
</head>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

32

<body>
<h3>Exemplo com CELLSPACING</h3>
<TABLE BORDER="1" WIDTH="80%" ALIGN="center"
cellpadding="5">
<TR>
<TD WIDTH="33%"ALIGN="center"> Aluno </TD>
<TD WIDTH="33%"ALIGN="center"> Professores
</TD>
<TD WIDTH="33%"ALIGN="center"> Tcnico
Administrativo</TD>
</TR>
</TABLE
</body>
</html>







6.2.5 ROWSPAN
Define quantas linhas uma mesma clula pode abranger. Por padro, na maioria dos
navegadores de Internet cada clula adicionada em uma tabela corresponde a uma linha.
Pode ser aplicado em TH ou TD, proporcionando o mesmo efeito.

Exemplo:
Acrescente o cdigo abaixo no arquivo rowspan.html

<html>
<head>
<title>Vamos Aprender Rowspan</title>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

33

</head>
<body>
<table border="1" width="49%">
<h1><caption>APRENDER ROWSPAN</caption></h1>
<tr>
<th width="59" rowspan="6">ETI</th>
<th>Classe I</th>
<th>Classe II</th>
<th>Classe III</th>
<th>Organizasaun Estudantes</th>
</tr>
<tr>
<td>Ano</td>
<td>Aquin</td>
<td>Ammy</td>
<td>Ataty</td>
</tr>
<tr>
<td>Amanu Bodan</td>
<td>Justy Malaga</td>
<td>Quito Malaga</td>
<td>Ambony</td>
</tr>
<tr>
<td>Tome</td>
<td>Anto</td>
<td>Estanis</td>
<td>Kera Fonso</td>
</tr>
<tr>
<td>Nhata Achon</td>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

34

<td>Oka</td>
<td>Andre</td>
<td>Atoby</td>
</tr>
<tr>
<td>Ananias</td>
<td>Mau Qarta</td>
<td>Kdeo</td>
<td>Kdony</td>
</tr>
</table>
</body>
</html>








Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

35


6.2.6 COLSPAN
Este atributo define quantas colunas uma clula pode abranger. Por padro, na maioria dos
navegadores de Internet cada clula adicionada em uma tabela corresponde a uma coluna.
Pode ser aplicado em TH ou TD, proporcionando a mesma abrangncia.

<html>
<head>
<title>Vamos Aprender Colspan</title>
</head>
<body>
<table border="1" width="54%">
<caption>APRENDER COLSPAN</caption>
<tr>
<td colspan="5">
<p align="center">ESCOLA TCNICA
INFORMTICA</font></td>
</tr>
<tr>
<th>No</th>
<th>Nome</th>
<th>Morada</th>
<th>No. Telemovel</th>
<th>e-mail</th>
</tr>
<tr>
<td>1</td>
<td>Dionisio Migeul de Jesus Ximenes,B.Gi</td>
<td>Aikadiru-Hun</td>
<td>+670 738 5765</td>
<td>dimarsoft@yahoo.com</td>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

36

</tr>
<tr>
<td>2</td>
<td>Jonito Ronaldo de Jesus</td>
<td>Fomento</td>
<td>+670 784 8371</td>
<td>rakli_fm@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Aquelino Fernandes de Jesus</td>
<td>Aipelo</td>
<td>+670 774 0524</td>
<td>pereiragimata@gmail.com</a> </td>
</tr>
<tr>
<td>4</td>
<td>Nolasco Montalvo</td>
<td>Beto-Leste</td>
<td>+670 754 5233</td>
<td>ano.malaga@yahoo.com</td>
</tr>
<tr>
<td>5</td>
<td>Maria Ribeiro Guterres</td>
<td>Fatuhada</td>
<td>+670 742 8881</td>
<td>mery.baguia@yahoo.com</td>
</tr>
</table>
</body>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

37

</html>




6.2.7 Cor de fundo das clulas

Outro atributo que podemos ter nas tabelas mudar a sua cor de fundo, isto se torna
particularmente til quando se quer dar destaque a uma clula em especial.
<html>
<head>
<title>Cor de fundo das clulas</title>
</head>
<body>
<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

38

</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
</body>
</html>













Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

39

PARTE VII
FORMULRIOS

A linguagem HTML tambm permite que o cliente (navegador) interaja com o
servidor, preenchendo campos, clicando em botes e passando informaes. O element
FORM, da linguagem HTML, justamente o responsvel por tal interao. Ele prov uma
maneira agradvel e familiar para coletar dados do usurio atravs da criao de
formulrios com janelas de entrada de textos, botes, etc.

7.1 - Construindo formulrios com o FORM
Para fazer formulrio, voc tem que colocar as TAGs <FORM> </FORM>. Todos os
outros comandos, devem ficar dentro dessas TAGs.

7.2 - Atributos para FORM
O elemento FORM pode conter dois atributos que determinaram para onde sera mandada a
entrada do FORM. Vejam como eles so:

7.2.1 GET
Os dados entrados fazem parte do URL associado consulta enviado para o servidor e
suporta at 128 caracteres.

7.2.2 POST
o mais utilizado, pois envia cada informao de forma separada da URL. Com este
mtodo POST os dados entrados fazem parte do corpo da mensagem enviada para o
servidor e transfere grande quantidade de dados.

7.2.3 INPUT
A TAG <INPUT> especifica uma variedade de campos editveis dentro de um
formulrio. Ele pode receber diversos atributos que definem o tipo de mecanismo de
entrada (botes, janelas de texto, etc.), o nome da varivel associada com o dado da
entrada, o alinhamento e o campo do valor mostrado. O atributo mais importante do
INPUT o NAME. Ele associa o valor da entrada do elemento. Por exemplo, quando voc
for receber os dados, j, processados, ir vir o name: = resposta dada pelo visitante. Outro
atributo importante o TYPE. Ele determina o campo de entradas de dados. Veja como se
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

40

usa este atributo:
<INPUT TYPE="TEXT" NAME="nome">

Para mudar o tamanho, da janela padro, voc tem que colocar o comando SIZE. Por
exemplo:

<INPUT TYPE "TEXT" NAME="nome" SIZE=35>(ou nmero desejado)




7.2.3.1 - Tipos de elementos TYPE

Voc pode fazer vrias coisas com o elemento TYPE. Por exemplo, para ser um campo de
senha, que quando digitado, aparea o smbolo "*", ao invs das letras, voc deve escrever
o seguinte:

<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>

7.2.3.1.1 - TYPE="RADIO"

Quando o usurio deve escolher uma resposta em uma nica alternativa, de um
conjunto, utiliza-se o RADIO Buttons. Um exemplo tpico do uso de tais botes cuja
resposta pode ser SIM ou NO. preciso que todos os rdios buttons de um mesmo grupo,
ou seja, referentes mesma pergunta, tenham o mesmo atributo NAME. Para esse tipo de
entrada, os atributos NAME e VALUE, so necessrios. Veja a seguir :

<INPUT TYPE="RADIO" NAME="voc gostou dessa home page?"
ALUE="sim">sim<p>
<INPUT TYPE="RADIO" NAME="voc gostou dessa home page?"
VALUE="nao">no<p>

Repare:




Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

41

7.2.3.1.2 - TYPE="PASSWORD"

Este comando serve para fazer um campo de senhas! Quando a pessoa digitar, aparecer o
sinal de "*" O comando :

<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>



7.2.3.1.3 - TYPE="CHECKBOX"

Esse comando vlido quando apenas uma resposta, esperada. Mas nem sempre esta a
situao...O tipo CHECKBOX prov outros botes atravs dos quais mais de uma
alternativa, pode ser escolhida.

Definio dos checkboxs:

<INPUT TYPE="CHECKBOX" VALUE="Eti">Escola Tecnica Informatica-Dili<p>
<INPUT TYPE="CHECKBOX" VALUE="Baucau">Escola Tecnica Informatica-aucau<p>
<INPUT TYPE="CHECKBOX" vALUE="IOBP">Institute Of Business-Praia dos
Coqueiros<P>
<INPUT TYPE="CHECKBOX" VALUE="IOBF">Institute Of Business- Fomento II<P>











Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

42

7 .2.3.1.4 - TYPE="SUBMIT"

Esse o boto que submete os dados do formulrio quando pressionados, ou seja,
possibilitam, o envio, dos dados para o script que vai trat-los. Veja como se adiciona o
boto:
<INPUT TYPE="SUB MIT" VALUE="enviar">


Veja como ficar:

7.2.3.1.5 - TYPE="RESET"

No caso dos botes RESET, quando o boto clicado, ele automaticamente limpa
todos os campos j preenchidos no formulrio, voltando situao inicial.

<INPUT TYPE="RESET" VALUE="Limpar">

Veja como ficar:



7.2.4 TEXTAREA
Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos
COLS e ROWS que especificam, respectivamente, o nmero de colunas e linhas que se
deseja mostrar para o usurio. O atributo NAME obrigatrio, e especifica o nome da
varivel, que ser associada entrada do cliente (navegador). O atributo VALUE no
aceito nesse elemento, mas voc pode colocar j um texto da seguinte maneira. Veja como
ele colocado:

<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>






7.2.5 SELECT

Permite definir uma lista de opes, com barra de rolagem ou fixa na tela do navegador.
uma TAG que deve ser iniciada com <SELECT> e finalizada com </SELECT>.


Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

43


Sintaxe:
<SELECT MULTIPLE NAME=nomeDaLista>
<OPTION SELECTED VALUE=valor de retorno>
Valor Visualizado
<OPTION VALUE=Valor de retorno>
Valor Visualizado 2
</SELECT>

Onde:
NAME: obrigatrio, serve para a identificao da lista;
OPTION: item da lista;
MULTIPLE: com este atributo a lista aparecer sempre aberta;
SELECTED: indica o valor padro da lista;
VALUE: valor a ser retornado ao servidor.

Exemplo:
<SELECT MULTIPLE NAME="Estados" size="1">
<OPTION SELECTED VALUE="1"> So Paulo
<OPTION VALUE="2"> Rio de Janeiro
<OPTION VALUE="3"> Minas Gerais
<OPTION VALUE="4"> Esprito Santo
</SELECT>



7.2.6 Exemplo completo de formulrio

<html>
<head>
<title>www.etiregister.com</title>
</head>
<body>
<h3 align=center>Aprender Desenha Form</h3>
<FORM NAME="form_conselho" METHOD="POST">
<h4>Identidade Pessoal</h4>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

44

<table width="79%">
<tr>
<td>Nome</td>
<td><input type="text" name="nome" size="80"></td>
</tr>
<tr>
<td>Genero</td>
<td>
<select name="sexo" size="1">
<option>
<option>Masculino</option>
<option>Femenino</option>
</select></td>
</tr>
<tr>
<td>Lugar do Nascimento</td>
<td><input type="text" name="lugar_nascimento"
size="24"></td>
</tr>
<tr>
<td>Data do Nascimento</td>
<td><input type="text" name="data" size="6">
<select name="mes" size="1">
<option >
<option value="1">Janeiro
<option value="2">Febereiro
<option value="3">Marco
<option value="4">Abril
<option value="5">Maio
<option value="6">Junho
<option value="7">Julho
<option value="8">Agusto
<option value="9">Setembro
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

45

<option value="10">Outobro
<option value="11">Novembro
<option value="12">Desembro
</select><input type="text" name="ano" size="4"></td>
</tr>
<tr>
<td>Nascionalidade</td>
<td><input type="text" name="nascionalidade"
size="27"></td>
</tr>
</table>

<h4>ID e Senha</h4>
<table width="79%">
<tr>
<td>Id</td>
<td><input type="text" name="id"size="23">@eti.com<br>
Ex. pereiragimaga@eti.com</td>
</tr>
<tr>
<td>Senha</td>
<td><INPUT TYPE="PASSWORD"NAME="SENHA"
MAXLENGHT=6></td>
</tr>
<tr>
<td>Perguntas</td>
<td>
<select name="pergunta" size="1">
<option >
<option value="1">Como se-chama a tua mae?</option>
<option value="2">Onde Mora ?</option>
</option>
</select>
Escola Tcnica Informtica-Dili 2012
Hyper Text Markup Language (HTML). Basic & Intermediate Module

Compose by : Dionisio Miguel de Jesus Ximenes,B.Gi
http://marnisioinformasi.blogspot.com email : dimarsoft@yahoo.com Phone : +670 738 5765

46

</td>
</tr>
<tr>
<td>Resposta</td>
<td>
<input type="text" name="resposta" size="33"></td>
</tr>
</table>
<p align=center>
<INPUT TYPE="submit" VALUE="Concorda"></p>
</FORM>
</body>
</html>

You might also like