Modul HTML Tetum

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:
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>.
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:

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:

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:

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:

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>
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>
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:

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:

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

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

<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.

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:

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:

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>

</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>

<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>

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>.

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>
</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>
</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:

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>7407649</td>
<td>3313060</td>
</tr>
<tr>
<td>3.</td>
<td colspan="2">7252222</td>
</tr>
</table>
<h3>Halo rowspan</h3>
<table border="1">
<tr>
<th>Naran</th>
<td>Tiago Fernandes</td>
</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>

<th>Naran</th>
<th>Hela Fatin</th>
</tr>
<tr>
<td>1.</td>
<td>Perumnas</td>
</tr>
<tr>
<td>2.</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>
<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>
<td>1.</td>
<td bgcolor="#00FF66">Perumnas</td>
</tr>
<td bgcolor="#006666">2.</td>
<td>Lurumata</td>
</tr>
<td>3.</td>
<td bgcolor="#666600">Eny Jeronimo</td>
<td>Delta II</td>
</tr>
</body>
</html>
Screenshot:

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>7407649</td>
<td>3313060</td></tr>
<tr><td>3.</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
<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>
<td align="left">Jaime Soares</td>
<td align="right">7407649</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>
<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:

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

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
Tag Checkbox
<input name="" type="checkbox"/> Kriteria 1
Tag Select
<select name="select">
<option> Kriteria 1</option>
</select>
Tag Button
<input type="submit" />
<input type="reset" />
Tag Text Area
<textarea name="naran_input" cols="40" rows="5"></textarea>

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
<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>

<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>

<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:
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:

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>

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

<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><input type="text" name="textfield3" id="textfield3"></td>
</tr>
<tr>
<th align="right">Sexo</th>
<td><input type="radio" name="sexo">Mane | <input type="radio"
name="sexo">Feto</td>
</tr>
<tr>
<th align="right">Hobby</th>
<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>
<tr>
<td colspan="2"></td>
<td><input type="submit" value="Haruka"><input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>
Screenshot

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">
<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>

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


Modul HTML Tetum

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Modul HTML Tetum

Hochgeladen von

Copyright:

Verfügbare Formate

MATERIA HTML

Preparado pelo Frederico Soares Cabral, S.Kom

ii. Hakerek script html henesan tuir mai nee:

II. TAG-TAG HTML

Preparado pelo Frederico Soares Cabral, S.Kom

Preparado pelo Frederico Soares Cabral, S.Kom

6. Tag Line Break

Preparado pelo Frederico Soares Cabral, S.Kom

Preparado pelo Frederico Soares Cabral, S.Kom

8. Maneja Posisaun Heading

10. Hamahar Letra (Bold)

Preparado pelo Frederico Soares Cabral, S.Kom

11. Letra Halis (Italic)

Preparado pelo Frederico Soares Cabral, S.Kom

12. Ezersicio geral ba Tag-Tag HTML

Preparado pelo Frederico Soares Cabral, S.Kom

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

diferensiamento hirak nee sei fahe ba tempo pasado, presente no

III. LINK no LIST HTML

Preparado pelo Frederico Soares Cabral, S.Kom

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>

Preparado pelo Frederico Soares Cabral, S.Kom

Hakotu ho tag </ol>.

Ezemplu Unordered List ou list la uja numeru

Preparado pelo Frederico Soares Cabral, S.Kom

Preparado pelo Frederico Soares Cabral, S.Kom

4.2 Alignment Image

Preparado pelo Frederico Soares Cabral, S.Kom

4.3 Floating Image

hanesan paragraph ida. Nee hanesan paragraph ida. Nee hanesan

Preparado pelo Frederico Soares Cabral, S.Kom

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

4.4 Image Link

Preparado pelo Frederico Soares Cabral, S.Kom

BAB V : TABLE HTML

Preparado pelo Frederico Soares Cabral, S.Kom

5.2 Atributu Tabel

5.3 Header Tabel

Preparado pelo Frederico Soares Cabral, S.Kom

5.4 Colspan no Rowspan

5.5 Background Tabela

Preparado pelo Frederico Soares Cabral, S.Kom

5.6 Background Sel Table

Preparado pelo Frederico Soares Cabral, S.Kom

5.7 Tabela nia Luan (Table Width)

5.8 Alignment column

Preparado pelo Frederico Soares Cabral, S.Kom

VI : FORM (Formulariu) no INPUT HTML

Atributu Name nudar naran ba formulario/form.

Preparado pelo Frederico Soares Cabral, S.Kom

Modelo input iha formulario ida bele fahe ba:

Preparado pelo Frederico Soares Cabral, S.Kom

6.3 Ezemplu Input

6.3.2 Button Radio

Preparado pelo Frederico Soares Cabral, S.Kom

Preparado pelo Frederico Soares Cabral, S.Kom

6.3.5 Text Area

Preparado pelo Frederico Soares Cabral, S.Kom

Ezersicio Form no Tabela

Preparado pelo Frederico Soares Cabral, S.Kom