Lanjutan .....
MODUL TIK 8

 
Elemen dasar – Paragraph (p)
Menampilkan teks dalam bentuk paragraf. contoh: <body>
<h3>Salam Kenal</h3>
<p>
Saya dari peunaron
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
outputnya:

Salam Kenal

Saya dari peunaron
Siapa ya yang mo kenalan dengan saya.

 
Elemen dasar – list item (li)
Unordered list <ul>: List item tidak berurutan (bullet)
contoh:
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>
outputnya:

Nama-nama buah

  • Mangga
  • Duren
  • Sirsak
 
Ordered list <ol>: List item berurutan.
contoh:
<body>
<P>Daftar jurusan di Sekolahku:</P>
<ol start="1" type=“1">
<li>IPA</li>
<li>IPS</li>
<li>Bahasa</li>
</ol>
<body>
outputnya:
Daftar jurusan di Sekolahku:
  1.IPA
  2.IPS
  3.Bahasa
 
Tipe-tipe pada list item - ordered list <ol>:
"A" : A, B, C, …
"a" : a, b, c, …
"I" : I, II, III, …
"i" : i, ii, iii, …
"1" : 1, 2, 3, …
 
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen html.
Attribut dari <hr> adalah:
Position: menetukan posisi dari <hr>, dengan nilai : center | right | left.
Width: untuk menentukan panjang <hr>. Nilai default 100%.
Size: untuk menentukan tebal dari <hr> dalam pixel.
Noshad: Efek bayangan.
Contoh:
<hr position="center" width=90% size=3 noshad>
 
Pemformatan Page
Break : memulai baris baru, tagnya adalah :
Font : menentukan format tampilan font
contoh:
<font color="#9966FF" size="5" face="arial"> Belajar Web </font>

Color : attribute dgn 3 kategori warna (RGB)
#RRGGBB, misal #FF0000 adalah Red
 
Pemformatan Page – Cont. 1
Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan di Sekolahku</P>
Format Text :
A. Physical Format
   Bold Text: <b>...</b>
   italic Text: <i>...</i>
   Underline Text: <u>...</u>
   BIG Text: <BIG>...</BIG>
   SMALL Text: <SMALL>...</SMALL>
   STRIKE Text(coret text): <STRIKE>...</STRIKE>
   superscript Text: <SUP>...</SUP>
   subscript Text: <SUB>...</SUB>
   center Text: <CENTER>...</CENTER>
B. Logical Format
   italic text: <EM>...</EM>
   bold Text: <STRONG>...</STRONG>
   mencoret Text: <DEL>...</DEL>
   underline Text: <INS>...</INS>
C. Preformatted Text :
   menampilkan text spt aslinya. : <pre>...</pre>

 
Pemformatan Page – Cont. 2
Contoh :
<html>
<head>
<title>Welcome to my School</title>
</head>
<body>
<B><P align="center">Lab di sekolahku</P></B>
di sekolahku ada 3 lab, diantaranya <br/>
<font color="#9966FF" size="3" face="arial">
1. Lab. Komputer </font> <br/>
2. Lab. IPA <br/>
3. Lab. Bahasa <br/>
</body>
</html>
</span>
 
Elemen dasar – hyperlink <a>
Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href="http://adahtml.pas.sch.id"> Aplikasi Web adaHTML </a>
Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:
<A name="pertama"> Halaman1 </A>
<A href="pertama"> menuju topik halaman 1 </A>
 
Pembuatan Tabel
Untuk membuat tabel menggunakan tag: <table>
Cell-nya dengan tag : <td>
Untuk membuat baris cell dengan tag : <tr>
Untuk judul tabel dengan tag: <caption>
contoh:
<html>
<head>
<title>membuat tabel sederhana<title>
<head>
<body>
<table border="1">
<caption>Creating Table</caption>
<tr> <td>cell 1a</td>
<td>cell 1b</td>
</tr>
<tr> <td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>
</html>
 
Pemformatan Tabel
Perataan tabel :
   1. align (center, justify, left, right).
   2. valign (baseline, top, middle, bottom)
Lebar tabel : width="25%"
Warna cell : bgcolor="red"
Spasi tabel :
cellspacing untuk memberi spasi antar sel
cellpadding untuk spasi dari border ke text dalam cell
 
contoh pembuatan tabel dengan warna
<html>
<head>
<title>membuat tabel sederhana
<head>
<body>
<table border="1" cellspacing=5 cellpading=10>
<caption>Creating Table</caption>
<tr align="left" valign="top">
<td width="25%" bgcolor=red>cell 1a</td>
<td width="25%" bgcolor=yellow >cell 1b</td>
</tr>
<tr align="center" valign="baseline" >
<td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>
</html>
 
daftar pustaka:
http://lecturer.eepis-its.edu/~zenhadi/kuliah/bi_dasar/
 
Kehalaman Selanjutnya