Scribd
Cargar
804 vistas

Modul HTML Tetum

Este documento proporciona una introducción a los conceptos básicos de HTML. Explica las definiciones de HTML y las etiquetas, y describe la estructura básica de un documento HTML, incluyendo las etiquetas <html>, <head>, <title> y <body>. También presenta ejemplos de cómo usar etiquetas comunes como <p>, <h1>-<h6>, <b>, <i>, <img>, <ol> y <ul> para formato de texto, encabezados, énfasis, imágenes y listas.

Cargado por

Joshua Sawyer
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
804 vistas

Modul HTML Tetum

Este documento proporciona una introducción a los conceptos básicos de HTML. Explica las definiciones de HTML y las etiquetas, y describe la estructura básica de un documento HTML, incluyendo las etiquetas <html>, <head>, <title> y <body>. También presenta ejemplos de cómo usar etiquetas comunes como <p>, <h1>-<h6>, <b>, <i>, <img>, <ol> y <ul> para formato de texto, encabezados, énfasis, imágenes y listas.

Cargado por

Joshua Sawyer
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 42

MATERIA HTML

I. Conyesemento ba HTML
1.1 Definisaun HTML
HTML habadak husi Hyper Text Markup Language. Dokuemntu HTML nudar
file text ida nebe bele halo ho kualker editor text. Dokumento nee konyesidu
hanesan web page no hamosu husi web browser. Dokumento nee
geralmente iha informasaun no mos aplikasaun iha internet.
1.2 Definisaun Tag
Atu fo sinal ba element hotu nebe iha dokumento html ita uja Tag.
Geralmente element ida iha dokumentu html bele hakerek hanesan tuir mai
nee:
<narantag>..</narantag>

Ezemplu:
<h1>.</h1>

1. Elemen HTML
HTML iha criteria hodi hakerek mak hanesan tuir mai nee:
<html>
<head> ..informasaun konaba dokumentu HTML..</head>
<body>
..informasaun nebe sei mosu iha pajina web .
</body>
<html>

Informasaun:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

a. Cada pajina html sei comesa ho tag <html> no sei hakotu ho tag
</html>.
b. Tag <head> no </head> hanesan informasaun konaba pajina web
nian.
c. Tag <body> no </body> nahesan informasaun nebe sei mosu iha pajina
web nia laran.
2. Ezemplu 1 Conyesementu HTML
i. Cria dokumentu html foun uja Adove Dreamweaver ho maneira hanesan:
loke programa Dreamweaver, klik iha menu File New hili Page Type
HTML.

Informsaun :
- Antes atu hakerek script, diak liu hapaga uluk script nebe otomatikamente iha
tiha ona.
- Halo tuir maneira nebe temi iha leten antes atu haketek script html foun. Ba
ezersicio tuir mai sei la esplika tan konaba oinsa halo dokumentu html foun.

ii. Hakerek script html henesan tuir mai nee:


File : ezersicio_1.html
<html>
<head>
<title>Conyesemento HTML</title>
</head>
<body>
Conyesemento ba dala uluk konaba HTML
</body>
</html>

iii. Tuir mai loke browser no bele hare nia resultado ou hanehan button F12:
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

II. TAG-TAG HTML


1. Tag HTML
Tag ida nee nudar tag importante iha stutura hakerek programa html. Tag
ida nee mak sei hahu script html.
<html> iha script primeiro no </html> iha script ikus.
2. Tag Head
Nudar tag ida depois tag <html>. Tag ida nee hodi fo informasaun konaba
web nebe ita halo.
<head> iha uluk depois <html>, dan <head> iha ikus .
Ezemplu:
<html>
<head> .informasaun Web</head>
<html>
3. Tag Title
Nudar tag ida nebe ho nia funsaung hanesan fo informasaun/topiku ba
pajina web. Tag ida sei tau entre tag <head>.
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

Ezemplu:
<html>
<head>
<title> Topiku Pajina Web</title>
</head>
</html>
4. Tag Body
Hanesan secsaun infortante iha dokumento web nia laran nebe sei hamosu
informasaun hotu nebe iha.
Ezemplu: 4_body.html
<html>
<head>
<title>Ezersicio ba Body</title>
</head>
<body>
Informasaun nebe sei mosu iha pajina web
</body>
</html>
Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

5. Tag Paragraf
Tag ida nee sei uja hodi hakerek informasaun ba iha paragraph. Cada
paragraph sei hahu ho tag <p> no sei hakotu ho tag </p>.
Ezemplu: 5_paragrafu.html
<html>
<head>
<title> Halo Paragraf </title>
</head>
<body>
<p>Nee hanesan paragraf ida. Nee hanesan paragraf ida. Nee
hanesan paragraf ida. Nee hanesan paragraf ida. Nee hanesan
paragraf ida. Nee hanesan paragraf ida. Nee hanesan paragraf ida.
</p>
<p>Nee hanesan paragraf ida. Nee hanesan paragraf ida. Nee
hanesan paragraf ida. Nee hanesan paragraf ida. Nee hanesan
paragraf ida. Nee hanesan paragraf ida. Nee hanesan paragraf ida.
</p>
</body>
</html>
Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

6. Tag Line Break


Tag nee uja hodi hamosu informasaun iha linha foun iha paragraph ida. Tag
nebe uja hodi hakerek mak tag <br>.
Ezemplu: 6_Line-Break.html
<html>
<head>
<title> Uja Line Break</title>
</head>
<body>
<p>Nee hanesan paragraf ida. Nee hanesan paragraf ida. Nee hanesan
paragraf ida. Nee hanesan paragraf ida. <br> Nee hanesan paragraf ida.
Nee hanesan paragraf ida. Nee hanesan paragraf ida. </p>
</body>
</html>

Nb: Tag <br> lahanesan ho tag sira seluk nebe iha tag ikus (end tag).
Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

7. Tag Heading
Tag ida nee geralmente uja hodi hakerek topiku husi informasaun ida. Iha 6
modelu heading iha html hanesan <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>.
Ezemplu: 7_Heading.html
<html>
<head>
<title> Kria Heading </title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

8. Maneja Posisaun Heading


Tag heading iha atributu nebe uja hodi maneja posisaun heading iha tekstu
(align). Alignment heading:
- karuk left
- klaran center
- los right
Ezemplu: 8_Heading_Align.html
<html>
<head>
<title> Maneja Posisaun Heading </title>
</head>
<body>
<h1 align=left>Heading 1 iha sorin kiri </h1>
<h2 align=center>Heading 2 iha klaran</h2>
<h3 align=right>Heading 3 iha sorin los</h3>
</body>
</html>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

Screenshot:

9. Regua (hr)
Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan
sebagai pemisah antar bagian atau peragraf. Tag <hr> disisipkan pada
tempat garis akan disisipkan.
Ezemplu: 9_regua.html
<html>
<head>
<title> Kria Regua </title>
</head>
<body>
<p>Tag hr uja hodi identifika regua <i>(pengaris)</i> </p>
<hr>
<h1 align=left>Heading 1 iha sorin karuk</h1>
<hr>
<h2 align=center>Heading 2 iha klaran</h2>
<hr>
<h3 align=right>Heading 3 iha sorin los</h3>
</body>
</html>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

Screenshot:

10. Hamahar Letra (Bold)


Atu hamahar letra iha pajina web sei uja tab <b> no tag <strong>. Tag rua
nee nia funsau hanesan.
Ezemplu: 10_Bold.html
<html>
<head>
<title> Hamahar Letra </title>
</head>
<body>
<b>Letra nee mahar</b><br>
<strong>Letra nee mos mahar</strong>
</body>
</html>

Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

11. Letra Halis (Italic)


Iha dokumento html ida it abele halo letra nebe halis (miring). Tag nebe uja
mak <i>.
Ezemplu: 11_Italic.html
<html>
<head>
<title> Halo Halis Letra </title>
</head>
<body>
<i>letra nee halis</i>
</body>
</html>
Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

12. Ezersicio geral ba Tag-Tag HTML


File : ezersicio_HTML-geral.html
<html>
<head>
<title> Ezersicio geral ba Tag-Tag HTML </title>
</head>
<body>
<h1>Introdusaun</h1>
<hr>
<p>Nudar sidadaun <b>Timor oan</b>, hau hare relasaun social iha
Timor Leste forti teb-tebes iha parte hotu-hotu especial liu relasaun
social husi povu iha rai ida nee nian.
<br> Maske ho relasaun ida nebe forte, <i>maibe la ses husi
diferensiasaun husi ideas no moris lor-loron nian nebe povu muda husi
tempo ida ba tempo seluk principal liu mak maneira moris povu nian
nebe <strong> muda an husi tempo pasado la hanesan ho tempo
agora</strong></i>, nunee mos tempo aban bainrua muda an nudar

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

misterio. <br>Iha relasaun social inklui mos husi parte ekonokia no


kultura

neebe

ita

infrrenta

iha

ita

nia

moris

lor-loron.

Husi

diferensiamento hirak nee sei fahe ba tempo pasado, presente no


future mak hanesan tur mai nee:</p>
<hr>
<h5 align=center>Obrigado</h3>
</body>
</html>
Screenshot:

III. LINK no LIST HTML


1. LINK HTML
Link nia fungsaun mak atu halo ligasaun entre pajina ida ba pajina seluk husi
tekstu ou imagen. HTML uja tag <a href=file_naran> no </a> iha ikus.
Ezemplu: link.html

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

<html>
<head>
<title> Halo Link </title>
</head>
<body>
<a href="ezersicio_12.html">Link ba pajina ezersicio_12.html</a>
</body>
</html>
Screenshot:

2. LIST HTML
List hanesan modelu nebe geralmente uja hodi mensiona buatruma.
-

List uja numeru

List la uja numeru

Atu halo list uja numeru ou Ordered List :


-

Komesa ho tag loke <ol>

Hakerek item sira ho tag <li> no hakutu ho </li>

Repete fali etapa iha lete hodi hakerek item tuir mai.

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

Hakotu ho tag </ol>.

Atu halo lis nebe la uja numeru ou unordered list, tag <ol> sei troka ba <ul>
Ezemplu: list.html
<html>
<head>
<title>Kria List</title>
</head>
<body>
Ezemplu Ordered List ou list uja numeru
<ol>
<li>Kafe</li>
<li>Sha</li>
<li>Susuben</li>
</ol>
<br />

Ezemplu Unordered List ou list la uja numeru


<ul>
<li>Kafe</li>
<li>Sha</li>
<li>Susuben</li>
</ul>
</body>
</html>

Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

IV : IMAGE / GAMBAR
4.1 Hatama Imagen
Atu hatama imagen/foto tuma ba iha pajina web, sei uja tag <img
src=file_imagen>. File_imagen hanesan URL husi file imagen nian.
Ezemplu: imagen.html
<html>
<head>
<title>hatama imagen ba pajina web</title>
</head>
<body>
Imagen
<img src="Forest.jpg" width="400px" height="300px">
</body>
</html>

screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

4.2 Alignment Image


Ezemplu nee atu esplika oinsa bele maneja aling image ho liafuan.
Ezemplu: align_image.html
<html>
<head>
<title>Alignment image</title>
</head>
<body>
<p>Posisaun liafuan iha leten.
<img src="Forest.jpg" width="100px" height="100px" valign="top"> imagen</p>
<p>Posisaun liafuan iha klaran
<img

src="Forest.jpg"

width="100px"

height="100px"

valign="middle">

imagen</p>
<p>Posisaun liafuan iha okon
<img src="Forest.jpg" width="100px" height="100px"> imagen</p>
</body>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

</html>

Screenshot:

4.3 Floating Image


Ezemplu ne sei esplika oinsa imagen ida bele tau iha parte karuk no los husi
paragraph.
Ezemplu: floating_image.html
<html>
<head>
<title>Floating Image</title>
</head>
<body>
<p><img

src="Forest.jpg"

width="100px"

height="80px"

align="left">Nee

hanesan paragraph ida. Nee hanesan paragraph ida. Nee hanesan


paragraph ida. Nee hanesan paragraph ida. Nee hanesan paragraph ida.
Nee hanesan paragraph ida. Nee hanesan paragraph ida. Nee hanesan
paragraph ida. Nee hanesan paragraph ida. </p>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

<p><img src="Forest.jpg" width="100px" height="80px" align="right"> Nee


hanesan paragraph ida. Nee hanesan paragraph ida. Nee hanesan
paragraph ida. Nee hanesan paragraph ida. Nee hanesan paragraph ida.
Nee hanesan paragraph ida. Nee hanesan paragraph ida. Nee hanesan
paragraph ida. Nee hanesan paragraph ida. </p>
</body>
</html>

Screenshot:

4.4 Image Link


Ezemplo : iamge_link.html
<html>
<head>
<title>Halo Image Link</title>
</head>
<body>
Ita bele uja imajen ida sai link ida hodi loke pajina seluk:<br>
<a
href="latihan-image_2.html"><img
src="Forest.jpg"
height="150px"></a>
<br>
Klik ida imajen tuir mai hodi loke imajen. <br>
<a
href="Forest.jpg"><img
src="Forest.jpg"
height="150px"></a>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

width="150px"

width="150px"

</body>
</html>

Screenshot:

BAB V : TABLE HTML


5.1 Element-element table
- <table></table> hanesan definisaun table iha html. Sekarik border iha
valor maka browser sei hamosu table border.
- <tr></tr> hanesan definisaun ba row iha table ni laran.
- <th></th> hanesan column header table. Basikamente tag <th> sei
tau iha tag <tr> nia laran.
- <td></td> hanesan column iha table ida. Posisaun tag nee hanesan
ho tag <th> nebe sei tau entre tag <tr> ho </tr>.

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

5.2 Atributu Tabel


- Align = {left | center | right} atributu nee uja hodi tau liafuan ho
horizontal iha sel ida nia laran.
- Valign = {top | middle | bottom} atributu nee uja hodi tau liafuan ho
vertical iha sel ida nia laran.
- Colspan = n atributu nee uja hodi halo merge iha sel (kolom). Total n
nudar sel nebe halo luan.
- Rowspan = n atributu nee uja hodi halo merge iha row (baris). total n
hanesan row nebe halo boot.
Ezemplu: tabela.html
<html>
<head>
<title>Kria Tabela</title>
</head>
<body>
<p>Tabela hotu nee hahu ho tab table. <br />
Cada linha (baris) sei hahu ho tag tr. <br />
Cada column (kolom) ou sel sei hahu ho tag td. </p>
<table border="1">
<tr>
<td>Real Madrid</td>
<td>Manchester United</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Chelsea</td>
<td>Arsenal</td>
<td>Liverpool</td>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

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

Screenshot:

5.3 Header Tabel


Ezemplu: header_tabel.html
<html>
<head>
<title>Kria header ba Tabela</title>
</head>
<body>
<h3>Header Tabela</h3>
<table border="1">
<tr>
<th>No</th>
<th>Naran</th>
<th>Hela Fatin</th>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

</tr>
<tr>
<td>1.</td>
<td>Jaime Soares</td>
<td>Perumnas</td>
</tr>
<tr>
<td>2.</td>
<td>Joel Dillak</td>
<td>Lurumata</td>
</tr>
<tr>
<td>3.</td>
<td>Eny Jeronimo</td>
<td>Delta II</td>
</tr>
</table>
</body>
</html>

Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

5.4 Colspan no Rowspan


Ezemplu: cols_rowspan.html
<html>
<head>
<title>Colspas no Rowspan</title>
</head>
<body>
<h3>Halo colspan </h3>
<table border="1">
<tr>
<th>No</th>
<th>Naran</th>
<th colspan="2">No. Telefone</th>
</tr>
<tr>
<td>1.</td>
<td>Fredy Soares</td>
<td>7812754</td>
<td>3123322</td>
</tr>
<tr>
<td>2.</td>
<td>Jaime Soares</td>
<td>7407649</td>
<td>3313060</td>
</tr>
<tr>
<td>3.</td>
<td>Joel Dillak</td>
<td colspan="2">7252222</td>
</tr>
</table>
<h3>Halo rowspan</h3>
<table border="1">
<tr>
<th>Naran</th>
<td>Tiago Fernandes</td>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

</tr>
<tr>
<th rowspan="2">Telefone</th>
<td>728393</td>
</tr>
<tr>
<td>378473</td>
</tr>
</table>
</body>
</html>

Screenshot:

5.5 Background Tabela


Ezemplu: background_tabela.html
<html>
<head>
<title>Background Tabela</title>
</head>
<body>
<h3>Backgorund Tabela</h3>
<table border="1" bgcolor="#FF0000">
<tr>
<th>No</th>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

<th>Naran</th>
<th>Hela Fatin</th>
</tr>
<tr>
<td>1.</td>
<td>Jaime Soares</td>
<td>Perumnas</td>
</tr>
<tr>
<td>2.</td>
<td>Joel Dillak</td>
<td>Lurumata</td>
</tr>
<tr>
<td>3.</td>
<td>Eny Jeronimo</td>
<td>Delta II</td>
</tr>
</body>
</html>

Screenshot:

5.6 Background Sel Table


Ezemplu: backgournd_sel_tabela.html
<html>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

<head>
<title>Background Sel Tabela</title>
</head>
<body>
<h3>Backgorund Sel Tabel </h3>
<table border="1">
<tr bgcolor="#006600">
<th>No</th>
<th>Naran</th>
<th>Hela Fatin</th>
</tr>
<tr bgcolor="#333399">
<td>1.</td>
<td>Jaime Soares</td>
<td bgcolor="#00FF66">Perumnas</td>
</tr>
<tr bgcolor="#333399">
<td bgcolor="#006666">2.</td>
<td>Joel Dillak</td>
<td>Lurumata</td>
</tr>
<tr bgcolor="#333399">
<td>3.</td>
<td bgcolor="#666600">Eny Jeronimo</td>
<td>Delta II</td>
</tr>
</body>
</html>
Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

5.7 Tabela nia Luan (Table Width)


Tuir mai hanesan ezemplu ida oinsa determina tabela ida nia luan nebe uja
valor Pixel (px) no Percentagen (%).
Ezemplu: width_tabel.html
<html>
<head>
<title>Determina Tabela nia Luan</title>
</head>
<body>
<h3> Determina Tabela nia Luan uja valor Pixel (px)</h3>
<table border="1" width="400px">
<tr><th>No</th>
<th>Name</th>
<th colspan="2">No. Telefone</th></tr>
<tr><td>1.</td>
<td>Fredy Soares</td>
<td>7812754</td>
<td>3123322</td></tr>
<tr><td>2.</td>
<td>Jaime Soares</td>
<td>7407649</td>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

<td>3313060</td></tr>
<tr><td>3.</td>
<td>Joel Dillak</td>
<td colspan="2">7252222</td></tr>
</table>
<h3>Determina tabela nia luan ho valor Percento (%)</h3>
<table border="1" width="50%">
<tr><th>Naran</th>
<td>Neia Lemos</td></tr>
<tr><th rowspan="2">Telefone</th>
<td>728393</td></tr>
<tr><td>378473</td></tr>
<tr><th rowspan="2">Hela Fatin</th>
<td>Vila Verde</td></tr>
<tr><td>Bauoli-Baucau</td></tr>
</table>
</body>
</html>

Screenshot:

5.8 Alignment column


Tuir mai nee ezemplu oinsa utulija atributu align hodi maneja column/sel.
Ezemplu: alignment_sel.html
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

<html>
<head>
<title>Colspas ho Rowspan</title>
</head>
<body>
<h3>Halo colspan </h3>
<table border="1" width="400px">
<tr> <th align="center">No</th>
<th align="left">Naran</th>
<th colspan="2" align="center">No. Telefone</th></tr>
<tr> <td align="center">1.</td>
<td align="left">Fredy Soares</td>
<td align="right">7812754</td>
<td align="right">3123322</td></tr>
<tr> <td align="center">2.</td>
<td align="left">Jaime Soares</td>
<td align="right">7407649</td>
<td align="right">3313060</td></tr>
<tr> <td align="center">3.</td>
<td align="left">Joel Dillak</td>
<td colspan="2" align="center">7252222</td></tr>
</table>
<h3>Halo rowspan</h3>
<table border="1" width="50%">
<tr> <th align="center">Naran</th>
<td align="left">Neia Lemos</td></tr>
<tr> <th rowspan="2" valign="middle">Telefone</th>
<td align="right">728393</td></tr>
<tr> <td align="right">378473</td></tr>
<tr> <th rowspan="2" valign="top">Hela fatin</th>
<td align="left">Vila Verde</td></tr>
<tr> <td>Bauoli-Baucau</td></tr>
</table>
</body>
</html>

Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

VI : FORM (Formulariu) no INPUT HTML


Sintaks hakerek Formulario:
<form name=naran_form method=get/post action=naran_file>
Informasaun:
-

Atributu Name nudar naran ba formulario/form.

Atributu Action nudar fatin determina URL nebe uja hodi proesa ba
field input form.

6.1 Mehtod
Atributu nee uja hodi determina oinsa input ruma nebe mai husi form bele
haruka ba iha servedor.
6.2 Modelo Input Form

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

Modelo input iha formulario ida bele fahe ba:


Tag Text box / Text Field
<input

type="text"

name="naran_input"

size="numero"

maxlength="numero">.
Tag Radio
<input type="radio" name="radio" value="radio" /> Kriteria 1
<input type="radio" name="radio" value="radio" /> Kriteria 2
<input type="radio" name="radio" value="radio" /> Kriteria 3
Tag Checkbox
<input name="" type="checkbox"/> Kriteria 1
<input name="" type="checkbox"/> Kriteria 2
<input name="" type="checkbox"/> Kriteria 3
Tag Select
<select name="select">
<option> Kriteria 1</option>
<option> Kriteria 2</option>
<option> Kriteria 3</option>
</select>
Tag Button
<input type="submit" />
<input type="reset" />
Tag Text Area
<textarea name="naran_input" cols="40" rows="5"></textarea>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

6.3 Ezemplu Input


6.3.1 Text box / Text Field
File : textbox.html
<html>
<head>
<title>Kria Text Box</title>
</head>
<body>
<h3>Kria Text Box</h3>
<form>
Naran : <input type="text" name="naran" /><br />
Hela fatin : <input type="text" name="hela_fatin" />
</form>
</body>
</html>

Screenshot:

6.3.2 Button Radio


File : radio_button.html
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

<html>
<head>
<title>Kria Button Radio</title>
</head>
<body>
<h3>Kria Button Radio</h3>
<form>
<input type="radio" name="sex" checked>Mane<br>
<input type="radio" name="sex" />Feto
</form>
</body>
</html>

Screenshot:

6.3.3 Checkbox
File : checkbox.html
<html>
<head>
<title>Kria Checkbox</title>
</head>
<body>
<h3>Kria Checkbox</h3>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

<form>
<input type="checkbox" name="tomate">Tomate<br>
<input type="checkbox" name="apel" />Apel
</form>
</body>
</html>

Screenshot

6.3.4 List
File : list.html
<html>
<head>
<title>Kria DropDwon List</title>
</head>
<body>
<h3>Kria DropDwon List</h3>
<strong>Naran Aifuan</strong>
<form>
<select name="aifuan">
<option>Apel</option>
<option>Has</option>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

<option>Nuu</option>
</select>
</form>
</body>
</html>

Screenshot

6.3.5 Text Area


File : textarea.html
<html>
<head>
<title>Kria Text Area</title>
</head>
<body>
<h3>Kria Text Area</h3>
<strong>Komentario</strong>
<form>
<textarea name="komentario" cols="40" rows="3">
</textarea>
</form>
</body>
</html>

Screenshot:
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

6.3.6 Button
File : button.html
<html>
<head>
<title>Halo Text Area</title>
</head>
<body>
<h3>Halo Text Area</h3>
<strong>Komentario</strong>
<form>
<input type="button" value="Button 1"><br><br>
<input type="submit" value="Save"><input type="reset">
</form>
</body>
</html>

Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

6.4

Ezersicio Form no Tabela


Iha ezersicio nee ita sei halo formulario ba indentidade nebe sei uja mos
tabela no form.
File : ezercisio-form-tabela.html
<html>
<head>
<title>Formulirio ba Identidade</title>
</head>
<body bgcolor="#FFFF66">
<h3>Formulario Identidade</h3>
<form>
<table width="70%" border="1">
<tr>
<th width="21%" align="right">Naran</th>
<td width="6%" align="center">:</td>
<td width="73%"><input type="text" name="textfield" id="textfield"></td>
</tr>
<tr>
<th align="right">Fatin Moris</th>
<td align="center">:</td>
<td><input type="text" name="textfield2" id="textfield2"></td>
</tr>
<tr>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

<th align="right">Data Moris</th>


<td align="center">:</td>
<td>
<strong> Loron </strong> <select name="loron">
<option>1</option><option>2</option><option>3</option><option>4</optio
n><option>5</option><option>6</option><option>7</option><option>8</op
tion><option>9</option><option>10</option><option>11</option><option>1
2</option><option>13</option><option>14</option><option>15</option><o
ption>16</option></select>
<strong> Fulan </strong> <select name="fulan">
<option>Janeiro</option><option>Fevereiro</option><option>Marcho</opti
on><option>Abril</option><option>Maio</option><option>Junho</option><
option>Julho</option><option>Agosto</option><option>Setembro</option>
<option>Outubro</option><option>Novembro</option><option>Dezembro<
/option></select>
<strong> Tinan </strong> <select name="tinan">
<option>1980</option><option>1981</option><option>1982</option><op
tion>1983</option><option>1984</option><option>1985</option><option>19
86</option><option>1987</option><option>1988</option><option>1989</op
tion><option>1990</option></select> </td>
</tr>
<tr>
<th align="right">Hela Fatin</th>
<td align="center">:</td>
<td><input type="text" name="textfield3" id="textfield3"></td>
</tr>
<tr>
<th align="right">Sexo</th>
<td align="center">:</td>
<td><input type="radio" name="sexo">Mane | <input type="radio"
name="sexo">Feto</td>
</tr>
<tr>
<th align="right">Hobby</th>
<td align="center">:</td>
<td><input type="checkbox" name="han">Han | <input type="checkbox"
name="fotebol">Futebol | <input type="checkbox" name="musica">Rona
Musica | <input type="checkbox" name="film">Badiu</td>
</tr>
Preparado pelo Frederico Soares Cabral, S.Kom
Dosente da Dep. da Informtica, FECT, UNTL

<tr>
<td colspan="2"></td>
<td><input type="submit" value="Haruka"><input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>

Screenshot

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

VII : HALO LAYOUT UJA TABELA


Imajen tuir mai hanesan layout nebe sei halo uja tabela:
HEADER

MENU

Content

FOOTER

Atu fahe layout hanesan imajen nebe iha leten it abele halo uja tabela,
hanesan tuir mai nee:
File : layout_tabela.html
<html>
<head>
<title>Halo Layout Uja Tabela</title>
</head>
<body>
<table width="80%" align="center" border="0">
<tr bgcolor="#669933">
<td colspan="2" align="center" width="80%"
height="80px"><h1>HEADER</h1></td>
</tr>
<tr>
<td width="20%" bgcolor="#99CC66"
align="center"><h1>Menu</h1></td>
<td width="60%" bgcolor="#CCCC99" align="center"
valign="middle"><h1>Content</h1>
<h3>Ezemplu halo layout uja tabela </h3></td>
</tr>

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

<tr>
<td colspan="2" height="50px" align="center"
bgcolor="#FF9933"><h2>FOOTER</h2></td>
</tr>
</table>
</body>
</html>

Screenshot:

Preparado pelo Frederico Soares Cabral, S.Kom


Dosente da Dep. da Informtica, FECT, UNTL

También podría gustarte