Pak MOEN

Install Xampp di WIndows

<div style="font-family: Verdana,sans-serif;">
</div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: justify;">
<span style="font-size: x-small;">Sebelum melakukan instalasi Local
Server XAMPP, Anda harus memiliki file xampp-win32-1.6.3-installer, atau versi
terbarunya. Anda dapat mendownloadnya disini atau kunjungi <a href="http://www.apachefriends.org/"><span style="color: blue;">www.apachefriends.org</span></a>
GRATIS. Kalo Anda tidak mau susah-susah download, minta aja pada temen....:-)</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;"><br />
Setalah file tersebut Anda miliki, segera lakukan langkah-langkah berikut ini:<br />
- Double klik file xampp-win32-1.6.3-installer</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;"> - Anda akan diminta untuk
memilih bahasa</span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4bvdSk9Gnneqa0YO6eyyhkp4Ew5UEP61Ahd_tNqrovjGMjrXtD-xZi0JpHbGdZLZkrPnoq6AQ98uBXQw5hLbROG_MREokCWAzCp3IluTytuC-sC0TZlOodJLUww2_H05iG3sGOqD5rNU/s1600/Bahasa.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="176" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image001.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;">   klik OK<br />
- Selanjutnya Anda bisa memulai instalsi, yang harus Anda lakukan adalah klik <b>Next</b></span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZWGfzR9p9Qu83oluX17-9oxuhcoB4dHIeNkLS5HkVpPiMhKISn5Plmy6GFPjxY_4qSIQWnplBsDoplsoM3rhwCe0t_eHDc72AqHzl7w6fJ9ZGhEZkF1_wzCp24BIXNPzm-PKS52LU5g/s1600/mulai.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="250" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image002.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;">- Anda akan diminta untuk menentukan
folder instalasi. Saya sarankan untuk meilih defaultnya yaitu c:/xampp</span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCOibvcPhtGCS-aoK1Em092Gn4wLPPUQF-g3yTksZsREUIfdsGcvEoiSISbdtFTfFwCfccSlbEGlwevH-OARU7wLSM4Z3CkPrJu6WVFLbvjlHPFQMVe5VrmG0X7TzT3Ss_glGiNKV68hU/s1600/pilih+dir.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="250" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image003.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;">   klik <b>Next</b><br />
- Pilih (centang) 3 kotak pada Service Section untuk Install Apache as service,
Install MySQL as service, dan Install Filezilla as service.Lalu klik <b>Install</b></span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3JVY218tTrK4zwZFbF__6LoR6bA0UF8KNP8UjAwn4vzyVvBS1n5W1WN67Xz0e87d4Yv0BE6xL2lLEncS41jFTzLgufYWBNqdEoEF4qBlYW7QVmRu4inOgqvWxQjeSHb2GLK2HDRhZ4Is/s1600/option.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="250" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image004.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;">- Proses instalasi akan berlangsung,
tunggu beberapa saat hingga proses instalasi selasai</span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QcZ6sgOR2FgivF1_OF4ZkbagXJ9PRzsDr5MFQW4wt2aXDikVpWv6Xvo4eoFmOnLAOnLtXR54eE-h2hgQskePEybWMh4S-2zGya-kCo4ZOTQdLGr7U-by6M2rXww_O1LpN7L_AmIYL44/s1600/proses.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="250" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image005.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;">- Jika proses instalasi telah
selesai, pilih <b>Finish</b></span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiprkdfDgjqz9ZEwv2N5W7wpM-5SZytQYXt8w6UFAkMm1IuZP6-3rRBQTL0tN1cnfiNAcb1eWcFjYlEWj0_Y0VQoftT7FA7Ev3-XkIlyEsuO6DGYquUNPZx77S04DTNC_VHAD6XOi81iOI/s1600/finish.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="249" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image006.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;">Jangan lupa untuk memastikan ketiga
service berjalan, double klik icon xampp pada pojok kiri bawah.</span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHbi61uRPLvOkvjESIkfEbmBAPPbH3sGXRT6grOrfUE7GQLNRfa4hAWxGB5tcab0dcgHV1nGJMt4OLgYeGchrzOyFrgwyV8XOBh9UCqnD0B6hIIhVi7Bcl76Y8YUHExLF2mIzQe5OYIE/s1600/cpanel.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="258" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image007.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<span style="font-size: x-small;">Untuk memeriksa apakah hasil
instalasi berhasil, silahkan buka web browser, kemudian pada address bar
ketikkan <b>localhost</b>. jika tampil seperti berikut, intalasi berhasil jika
tidak silahkan ulangi lagi....</span></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyqWE-YPd93aeZ6YmvqsTrNvUo9P6E-qdPuP9KRSsuLJmQOOuP-PM8DNzvCb3r8s_bO4JxmP8JT4Zd9iUOQygmPbpVfbDsGD8IBW8wRZY_ccDZ1naoV_fAyYDWIEVpZQ4fdR3eZDwsFw/s1600/localhost.JPG"><span style="color: blue; text-decoration: none;"><img border="0" height="216" src="file:///C:%5CUsers%5CBAAK3%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_image008.jpg" width="320" /></span></a></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<br /></div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: x-small;">SELAMAT
MENCOBA</span></div>

Install Xampp di WIndows

Sebelum melakukan instalasi Local Server XAMPP, Anda harus memiliki file xampp-win32-1.6.3-installer, atau versi terbarunya. Anda dapat m...

Tabel HTML

<div style="font-family: Verdana,sans-serif;">

</div>
<div class="style3" style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>OBJEKTIF:</b><br />
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan
element-element untuk pembuatan tabel.</span></div>
<div class="style3" style="font-family: Verdana,sans-serif;">
<br /></div>
<div class="style3" style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>MATERI:</b><br />
Element TABLE, Element CAPTION, Element TH(table header), Element TR(table
row), Element TD(table data)<br /><br /><br /><b>ELEMENT TABLE</b></span>

<span style="font-size: x-small;"><br />
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas
kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor,
border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak
antara sel), width(lebar tabel), height(tinggi tabel). Element TABLE berisikan
element CAPTION, TH, TR dan TD.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<table<br />
   align="left"|"center"|"right"<br />
   bgcolor="color"<br />
   border="pixel"<br />
   cellpadding="pixel"<br />
   cellspacing="pixel"<br />
   width="pixel"|"%"<br />
   height="pixel"|"%" ><br />
........................<br />
</table><br /><br /><br /><b>ELEMENT CAPTION </b></span>

<span style="font-size: x-small;"><br />
Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini
harus berada di dalam element TABLE dan mempunyai attribute align dengan
nilai top(judul terletak di atas tabel), dan bottom(judul terletak di
bawah tabel).<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<caption  align="top"|"bottom"><br />
      ..........................<br />
</caption><br /><br /><br /><b>ELEMENT TR (Table Row)</b></span>

<span style="font-size: x-small;"><br />
Element TR mendefinisikan baris pada tabel dan element ini harus berada di
dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute
yang terdapat pada element ini adalah align, valign(posisi vertikal), dan
bgcolor.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<tr<br />
   align="left"|"center"|"right"<br />
   valign="top"|"middle"|"bottom"<br />
   bgcolor="color"><br />
      ..........................<br />
</tr><br /><br /><br /><b>ELEMENT TH (Table Header) dan TD (Table Data)</b></span>

<span style="font-size: x-small;"><br />
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi
sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan
dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam
element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan,
rowspan <br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<th <br />
   align="left"|"center"|"right"<br />
   valign="top"|"middle"|"bottom"<br />
   bgcolor="color"<br />
   colspan="number"<br />
   rowspan="number"><br />
      ..........................<br />
</th><br /><br />
<td </span>
<span style="font-size: x-small;"><br />
   align="left"|"center"|"right"<br />
   valign="top"|"middle"|"bottom"<br />
   bgcolor="color"<br />
   colspan="number"<br />
   rowspan="number"><br />
      ..........................<br />
</td></span></div>
<div align="center" class="MsoNormal" style="color: black; font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: small;"><b>LATIHAN</b><span></span></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><i><span>Gunakan
teks editor misalkan <b>"Notepad"</b> untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah
file tersebut dengan menggunakan web browser atau gunakan editor yang telah
tersedia pada modul ini dengan mengklik <b>menu Editor</b>.<br />
<br />
<br />
</span></i><b><span style="color: #6666cc;">Latihan 1:</span></b><span><br />
Buat tabel untuk teks di bawah ini:<br />
<br />
     <b>Tabel 1.1<br />
</b><br />
<b>No.   Nama</b><br />
1.      Rina Hastuti<br />
2.      Ali Amran<br />
3.      Rahmat<br />
                     
    <br />
<br />
<b><i>Nama file: latihan4_1.html</i></b></span></span></div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="background: none repeat scroll 0% 0% rgb(204, 204, 255); font-family: Verdana,sans-serif; width: 465px;">
 <tbody>
<tr>
  <td style="padding: 1.5pt;">
  <div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><b><span style="color: #330099;"><html><br />
  <head><br />
  <title>Latihan4-1</title><br />
  </head><br />
  <body><br />
  <table align="center" border="2"
  bgcolor="cyan" cellpadding="5" cellspacing="0"
  ><br />
  <caption align="top"><b>Tabel
  1.1</b></caption><br />
  <tr><br />
      <th>No.</th><br />
      <th>Nama</th><br />
  </tr><br />
  <tr><br />
      <td>1.</td><br />
      <td>Rina Hastuti</td><br />
  </tr><br />
  <tr><br />
      <td>2.</td><br />
      <td>Ali Amran</td>    <br />
  </tr><br />
  <tr><br />
      <td>3.</td><br />
      <td>Rahmat</td>    <br />
  </tr><br />
  </table><br />
  </body><br />
  </html></span></b><span></span></span></div>
</td>
 </tr>
</tbody></table>

Tabel HTML

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan tabel. MATERI: ...

List Item HTML (Urutan)

<div style="font-family: Verdana,sans-serif;">
</div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><b>OBJEKTIF:</b><br />
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan
element-element untuk pembuatan daftar urutan.</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 12pt;">
<br /></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 12pt;">
<span style="font-size: x-small;"><b>MATERI:</b><br />
Element OL(ordered list), Element UL(unordered list), Element LI(list item).<br /><br /><br />
<b>ELEMENT OL (Orderd List)</b></span><b>

</b><span style="font-size: x-small;"><br />
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai
attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan
nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk
daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I
untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal
(default: start="1" type="1" ). Dalam element OL harus
terdapat beberapa element LI.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<ol start="number"
type="A"|"a"|"I"|"i"|"1"><br />
........................<br />
</ol><br /><br /><br />
<b>ELEMENT UL (Unordered List)</b></span><b>

</b><span style="font-size: x-small;"><br />
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format
bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi
untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini
adalah "circle", "square" dan "disc" . Dalam
element UL harus terdapat beberapa element LI.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<ul  type="circle"|"square"|"disc"><br />
      ..........................<br />
</ul><br /><br /><br />
<b>ELEMENT LI (List Item)</b></span><b>

</b><span style="font-size: x-small;"><br />
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam
element OL atau UL. Element ini mempunyai attribute type dan value. Nilai
attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value
berisikan nilai nomor urutan dari attribute type.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<li
type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc"><br />
      ..........................<br />
</li></span>

</div>
<div align="center" class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt; text-align: center;">
<span style="font-size: small;"><b>LATIHAN</b></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;">Gunakan teks editor misalkan "Notepad" untuk
menyunting dan menyimpan script latihan di bawah ini. Untuk melihat
hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan
editor yang telah tersedia pada modul ini dengan mengklik menu Editor.<br /><br /><br />
Latihan 1:</span>

<span style="font-size: x-small;"><br />
Menampilkan teks dengan daftar urut (element OL):</span>
<span style="font-size: x-small;">
               
           Matakuliah TKJ Semester 1:<br />
                     
     1. Bahasa Inggris  1<br />
                     
     2. Matematika 1<br />
                     
     3. Jaringan Komputer 1<br />
                     
     4. Konsep Teknologi Informasi<br />
                     
     5. Keterampilan Komputer dan Pengelolaan Informasi<br />
                     
     6. Perangkat Keras Komputer<br />
                     
     7. Sistem Operasi<br />
                     
    <br /><br />
Nama file: latihan3_1.html</span>
</div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="background: none repeat scroll 0% 0% rgb(204, 204, 255); font-family: Verdana,sans-serif; width: 465px;">
 <tbody>
<tr>
  <td style="padding: 1.5pt;"><div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><html><br />
  <head><br />
  <title>Latihan3-1</title><br />
  </head><br />
  <body><br />
  Matakuliah TKJ Semester 1:<br />
  <ol><br />
       <li>Bahasa Inggris 1</li><br />
       <li>Matematika 1</li><br />
       <li>Jaringan Komputer 1</li><br />
       <li>Konsep Teknologi Informasi</li><br />
       <li>Keterampilan Komputer dan Pengelolaan
  Informasi</li><br />
       <li>Perangkat Keras Komputer</li><br />
       <li>Sistem Operasi</li><br />
  </ol><br />
  </body><br />
  </html></span></div>
</td>
 </tr>
</tbody></table>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><br /><br />
Latihan 2:</span>
<span style="font-size: x-small;"><br />
Menampilkan teks dengan daftar urut (element OL):</span>
<span style="font-size: x-small;">
               
           Matakuliah TKJ Semester 1:<br />
                     
     a. Bahasa Inggris  1<br />
                     
     b. Matematika 1<br />
                     
     c. Jaringan Komputer 1<br />
                     
     d. Konsep Teknologi Informasi<br />
                     
     e. Keterampilan Komputer dan Pengelolaan Informasi<br />
                     
     f. Perangkat Keras Komputer<br />
                     
     g. Sistem Operasi<br />
                     
    <br /><br />
Nama file: latihan3_2.html</span>
</div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="background: none repeat scroll 0% 0% rgb(204, 204, 255); font-family: Verdana,sans-serif; width: 465px;">
 <tbody>
<tr>
  <td style="padding: 1.5pt;"><div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><html><br />
  <head><br />
  <title>Latihan3-2</title><br />
  </head><br />
  <body><br />
  Matakuliah TKJ Semester 1:<br />
  <ol start="1" type="a"><br />
       <li>Bahasa Inggris 1</li><br />
       <li>Matematika 1</li><br />
       <li>Jaringan Komputer 1</li><br />
       <li>Konsep Teknologi Informasi</li><br />
       <li>Keterampilan Komputer dan Pengelolaan
  Informasi</li><br />
       <li>Perangkat Keras Komputer</li><br />
       <li>Sistem Operasi</li><br />
  </ol><br />
  </body><br />
  </html></span></div>
</td>
 </tr>
</tbody></table>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><br />
Latihan 3:<br />
Menampilkan teks dengan daftar urut (element OL):</span>
<span style="font-size: x-small;">
               
       I. Matakuliah TKJ Semester 1:<br />
                     
     a. Bahasa Inggris  1<br />
                     
     b. Matematika 1<br />
                     
     c. Jaringan Komputer 1<br />
                     
     d. Konsep Teknologi Informasi<br />
                     
     e. Keterampilan Komputer dan Pengelolaan Informasi<br />
                     
     f. Perangkat Keras Komputer<br />
                     
     g. Sistem Operasi<br />
                     
    <br /><br />
Nama file: latihan3_3.html</span>
</div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="background: none repeat scroll 0% 0% rgb(204, 204, 255); font-family: Verdana,sans-serif; width: 465px;">
 <tbody>
<tr>
  <td style="padding: 1.5pt;"><div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><html><br />
  <head><br />
  <title>Latihan3-3</title><br />
  </head><br />
  <body><br />
  <ol start="1" type="I"><br />
  <li>Matakuliah TKJ Semester 1:</li><br />
       <ol start="1" type="a"><br />
          <li>Bahasa Inggris 1</li><br />
          <li>Matematika 1</li><br />
          <li>Jaringan Komputer 1</li><br />
          <li>Konsep Teknologi Informasi</li><br />
          <li>Keterampilan Komputer dan Pengelolaan
  Informasi</li><br />
          <li>Perangkat Keras Komputer</li><br />
          <li>Sistem Operasi</li><br />
       </ol><br />
  </ol><br />
  </body><br />
  </html></span></div>
</td>
 </tr>
</tbody></table>

List Item HTML (Urutan)

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan. MA...

Daftar TAG HTML

<div style="font-family: Verdana,sans-serif;">
</div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;">Berikut ini adalah tabel tag-tag HTML dan fungsinya: </span></div>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Tag Utama</b></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Tag </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Atribut </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Deskripsi </b></span></div>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><html></html> </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Baris paling atas dari setiap file HTML </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><head></head> </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Informasi umum dari sebuah halaman web </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><title></title> </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Judul halaman. Terdapat pada head </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><body></body> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Background, bgcolor, bgsound, font, link, alink, vlink, topmargin,
  leftmargin, marginheight, marginwidth </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Settingan atribut untuk seluruh dokumen </span></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Modifikasi Teks</b></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Tag </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Deskripsi </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Contoh </b></span></div>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><b></b> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Teks tebal </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><b>Teks tebal </b></span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><i> </i> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Teks miring </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><i>Teks miring </i></span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><u> </u> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Teks garis bawah </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Teks garis bawah </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><pre></pre> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Preformatted teks </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Contoh teks </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><h1></h1> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Header 1 </span></td>
  <td style="padding: 0in;" valign="top"><h1>

<span style="font-size: large;"><b>Header 1 </b></span></h1>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><h2></h2> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Header 2 </span></td>
  <td style="padding: 0in;" valign="top"><h2>

<span style="font-size: small;"><b>Header 2 </b></span></h2>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><h3> </h3> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Header 3 </span></td>
  <td style="padding: 0in;" valign="top"><h3>

<span style="font-size: x-small;"><b>Header 3 </b></span></h3>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><h4></h4> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Header 4 </span></td>
  <td style="padding: 0in;" valign="top"><h4>

<span style="font-size: xx-small;"><b>Header 4 </b></span></h4>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><h5></h5> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Header 5 </span></td>
  <td style="padding: 0in;" valign="top"><h5>

<span style="font-size: xx-small;"><b><span style="font-weight: normal;">Header 5 </span></b></span></h5>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><h6></h6> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Header 6 </span></td>
  <td style="padding: 0in;" valign="top"><h6>

<span style="font-size: x-small;"><b><span style="font-weight: normal;"><span style="font-size: xx-small;">Header 6</span> </span></b></span></h6>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><sub></sub> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Subscript </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><sub>Sub</sub><b>script</b></span> </td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><sup></sup> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Superscript </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><sup>Super</sup><b>script </b></span></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Font </b></span></div>
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Tag </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">          Atribut </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Deskripsi </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><font></font> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">          Color, size, name            </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Mengubah gaya suatu huruf </span></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Links </b></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Tag </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Atribut </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Deskripsi </b></span></div>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><a> </a> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Href, target, style, class, name, id </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Membuat link ke dokumen atau situs lainnya </span></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Gambar</b></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><b>Tag </b></span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><b>Atribut </b></span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><b>Deskripsi </b></span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><img> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Src, alt, name, border, height, width </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Menampilkan sebuah gambar </span></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Formatting </b></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Tag </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Deskripsi </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Contoh </b></span></div>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><blockquote></blockquote> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Digunakan untuk mengatur text dan gambar dalam suatu tag </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Contoh text in a block quote format ( “ “ ) </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><ol></ol> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Ordered List (digunakan dengan <li>) </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">1. Item 1 </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><ul></ul> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Unordered List (digunakan dengan <li>) </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">• Item 1 </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><li> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Elemen List </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><dd></dd> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Definition List </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><dt> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Definition Term </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><dd> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Definition Description </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><p></p> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Paragraf </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><br> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Ganti baris </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><hr> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Garis horizonta </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><center></center> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Menengahkan elemen </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Tabel</b></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Tag </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Deskripsi </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Contoh </b></span></div>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><table></table> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor,
  background, align, valign </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Mengatur semua elemen table </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><tr></tr> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Height, bgcolor, background, align, valign, title </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Membuat baris baru </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><td></td> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Height, width, bgcolor, background, align, valign, title, colspan, rowspan
  </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Membuat kolom </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><th></th> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Height, width, bgcolor, background, align, valign, title, colspan, rowspan
  </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Header(kepala tabel). Otomatis ke tengah dan tebal </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><tbody></tbody> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Height, width, align, valign, bgcolor, background </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Format yang berlaku bagi cell yang diapit tag </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><colgroup></colgroup> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Height, width, align, valign, bgcolor, background, colspan </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Format yang berlaku bagi kolom </span></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<br /></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>Form</b></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Tag </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Deskripsi </b></span></div>
</td>
  <td style="padding: 0in;" valign="top"><div align="center" style="text-align: center;">
<span style="font-size: x-small;"><b>Contoh </b></span></div>
</td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><form></form> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Method, action, name, enctype </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Mengatur elemen dari form </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><input type=> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Text, password, hidden, radio, checkbox, submit, image, reset </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Variasi dari tipe elemen input dalam form </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><select></select> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Name, size </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Membuat combo-box. Digunakan bersama dengan option </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><option> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Selected, name, value </span></td>
  <td style="padding: 0in;" valign="top"><br /></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;"><textarea></textarea> </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Name, rows, cols, wrap </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Membuat Text Area untuk input text dengan length yang lebih besar dari
  input text. </span></td>
 </tr>
<tr>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">wrap </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">Off</span><br />
<span style="font-size: x-small;">virtual </span><br />
<span style="font-size: x-small;">physical </span></td>
  <td style="padding: 0in;" valign="top"><span style="font-size: x-small;">no wrap </span><br />
<span style="font-size: x-small;">word wrap, sent as one line </span><br />
<span style="font-size: x-small;">word wrap, sent with breaks </span></td>
 </tr>
</tbody></table>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;">Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah
pecah!. Cukup hafalkan yang penting-penting saja seperti
<table><form><input><ul>. Tidak hafal pun tidak apa-apa
kan kita bisa melihat daftar kalau lupa, yang penting kita paham.</span></div>

Daftar TAG HTML

Berikut ini adalah tabel tag-tag HTML dan fungsinya: Tag Utama Tag Atribut Deskripsi <html></html&g...

Pengenalan HTML

<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;">Sebelum belajar HTML, alangkah lebih
baik jika kita memahami konsep dasar HTML terlebih dahulu.</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><b>Pengertian HTML</b></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;">HTML adalah suatu bahasa yang
dipergunakan untuk mendeskripsikan halaman web.</span></div>
<ul style="font-family: Verdana,sans-serif;" type="disc">
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML merupakan singkatan dari <b>H</b>yper <b>T</b>ext <b>M</b>arkup
     <b>L</b>anguage.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML bukan merupakan bahasa pemrograman, HTML adalah
     suatu <b>markup language</b> (bahasa markah).</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">Suatu markup language berupa serangkaian <b>markup tags</b>.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML menggunakan <b>markup tags</b> untuk
     mendeskripsikan halaman web.</span></li>
</ul>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;">

</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><b>HTML Tags</b></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;">HTML markup tags biasa disebut HTML
tags.</span></div>
<ul style="font-family: Verdana,sans-serif;" type="disc">
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML tags berupa keywords atau kata kunci yang diapit
     oleh tanda kurung seperti <html>.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML tags biasanya dipakai berpasangan seperti
     <b> dan </b>.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">Tag pertama dalam pasangan html tags adalah <b>start
     tag</b> atau tag awal, sedang tag kedua adalah <b>end tag</b> atau tag
     akhir.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">Start tags dan end tags biasa juga disebut opening tags
     dan closing tags.</span></li>
</ul>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><b>HTML Documents = Web Pages</b></span></div>
<ul style="font-family: Verdana,sans-serif;" type="disc">
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML documents atau dokumen HTML mendeskripsikan suatu
     web pages atau halaman web.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML documents berisi HTML tags dan plain text atau
     text biasa.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">HTML documents atau dokumen HTML juga biasa disebut web
     pages atau halaman web.</span></li>
</ul>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;">Tujuan dari sebuah web browser
(seperti Internet Explorer, Firefox, Opera, Safari atau Google Chrome) adalah
untuk membaca HTML documents kemudian menampilkannya sebagai halaman web.
Browser tidak menampilkan HTML tags, tetapi menggunakan tag tersebut untuk
menterjemahkan isi dari halaman web.</span></div>
<table border="0" cellpadding="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif;">
 <tbody>
<tr>
  <td style="padding: 0.75pt;"><div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">1</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">2</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">3</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">4</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">5</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">6</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">7</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">8</span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;">9</span></div>
</td>
  <td style="padding: 0.75pt;"><div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"><html></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"><body></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"><h1>Judul Pertama</h1></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"><p>Paragraf pertama</p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"></body></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">
<span style="font-size: x-small;"></html></span></div>
</td>
 </tr>
</tbody></table>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;">Coba contoh HTML diatas dengan <span style="color: blue;">Notepad</span>.</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><b>Penjelasan Contoh</b></span></div>
<ul style="font-family: Verdana,sans-serif;" type="disc">
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">Teks di antara <html> dan </html> mendeskripsikan
     web page.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">Teks di antara <body> dan </body> adalah
     konten halaman web yang akan tertampil.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">Teks di antara <h1> dan </h1> digunakan
     untuk menampilkan judul.</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: x-small;">Teks di antara <p> dan </p> digunakan untuk
     menampilkan paragraf.</span></li>
</ul>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><br /></span></div>
<div style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;">

</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal;">
<span style="font-size: x-small;"><br /></span></div>

Pengenalan HTML

Sebelum belajar HTML, alangkah lebih baik jika kita memahami konsep dasar HTML terlebih dahulu. Pengertian HTML HTML adalah suatu b...

Dasar HTML

<div style="font-family: Verdana,sans-serif; text-align: justify;">
</div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; text-align: justify;">
<span style="font-size: x-small;"><b>OBJEKTIF:</b><br />
Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar
dari dokumen HTML.</span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; text-align: justify;">
<br />
<span style="font-size: x-small;"><b>MATERI:</b><br />
Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element
HEAD, Element TITLE, Element BODY.<br /><br /><br />
<b>STRUKTUR DASAR DOKUMEN HTML</b></span><b>

</b><span style="font-size: x-small;"><br />
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk
menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler
dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah
yang dispesifikasikan.<br /><br />
Struktur dasar dokumen HTML adalah sebagai berikut:</span>
</div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif; margin-left: 0px; margin-right: 0px; text-align: left; width: 277px;">
 <tbody>
<tr>
  <td style="background: none repeat scroll 0% 0% rgb(204, 204, 255); padding: 1.5pt;"><div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><html><br />
  <head><br />
  <title>Disini Judul Dokumen HTML</title><br />
  </head><br />
  <body><br />
          Disini penulisan informasi Web<br />
  </body><br />
  </html></span></div>
</td>
 </tr>
</tbody></table>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; text-align: justify;">
<span style="font-size: x-small;">Dari struktur dasar HTML di atas dapat dijelaskan sebagai
berikut:<br /><br />
<b>a. Tag</b></span><b>
</b><span style="font-size: x-small;"><br />
Adalah teks khusus (markup) berupa dua karakter "<" dan ">",
 sebagai contoh <body> adalah tag dengan nama body.<br />
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka
dan tag penutup (ditambahkan karakter "/" setelah karakter "<"),
sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body>
ini adalah tag penutup isi dokumen HTML. <br /><br />
<b>b. Element</b></span><b>
</b><span style="font-size: x-small;"><br />
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Sebagai contoh untuk menampilkan judul dokumen HTML pada web
browser digunakan element title, dimana:<br /><br />
<title> ini adalah tag pembuka judul dokumen HTML</span>
<span style="font-size: x-small;"><br />
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML<br />
</title> ini adalah tag penutup judul dokumen HTML<br /><br />
Tag-tag yang ditulis secara berpasangan pada suatu element HTML,  tidak
boleh saling tumpang tindih dengan pasangan tag-tag lainnya.</span>
<span style="font-size: x-small;"><br />
Contoh penulisan tag-tag yang benar</span></div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif; margin-left: 0px; margin-right: 0px; text-align: left; width: 161px;">
 <tbody>
<tr>
  <td style="background: none repeat scroll 0% 0% rgb(204, 204, 255); padding: 1.5pt;"><div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><p><br />
      <b><br />
          ................<br />
      </b><br />
  </p></span></div>
</td>
 </tr>
</tbody></table>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; text-align: justify;">
<span style="font-size: x-small;"><br />
Contoh penulisan tag-tag yang salah</span></div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif; margin-left: 0px; margin-right: 0px; text-align: left; width: 162px;">
 <tbody>
<tr>
  <td style="background: none repeat scroll 0% 0% rgb(204, 204, 255); padding: 1.5pt;"><div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><p><br />
      <b><br />
          ................<br />
      </p><br />
  </b></span></div>
</td>
 </tr>
</tbody></table>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; text-align: justify;">
<span style="font-size: x-small;"><br />
<b>c. Attribute</b><br />
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas
nama dan nilai. Penulisannya adalah sebagai berikut:</span></div>
<table border="1" cellpadding="0" class="MsoNormalTable" style="font-family: Verdana,sans-serif; margin-left: 0px; margin-right: 0px; text-align: left; width: 229px;">
 <tbody>
<tr>
  <td style="background: none repeat scroll 0% 0% rgb(204, 204, 255); padding: 1.5pt;"><div class="MsoNormal" style="line-height: normal;">
<span style="font-size: x-small;"><TAG<br />
     nama-attr="nilai-attr"<br />
     nama-attr="nilai-attr"<br />
     ...><br />
     .................<br /><br />
  </TAG></span>
  </div>
</td>
 </tr>
</tbody></table>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; text-align: justify;">
<span style="font-size: x-small;">Secara umum nilai attribute harus berada dalam tanda petik
satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan
latarbelakang halaman web menjadi hitam, penulisannya adalah <body
bgcolor="black" text="yellow"></span></div>
<div class="MsoNormal" style="font-family: Verdana,sans-serif; line-height: normal; text-align: justify;">
<br />
<span style="font-size: x-small;"><b>d. Element HTML</b><br />
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<html><br />
..........<br />
</html><br /><br />
<b>e. Element HEAD</b></span><b>
</b><span style="font-size: x-small;"><br />
Merupakan kepala dari dokumen HTML. Tag <head> dan
tag </head> terletak di antara tag <html> dan tag
</html>.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<head><br />
...........<br />
</head><br /><br />
<b>f. Element TITLE</b></span><b>
</b><span style="font-size: x-small;"><br />
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser.
Tag <title> dan tag </title> terletak di antara tag <head>
dan tag </head>.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<title><br />
.........<br />
</title><br /><br />
<b>g. Element BODY</b></span><b>
</b><span style="font-size: x-small;"><br />
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag
</body> terletak di bawah tag <head> dan tag </head>.<br />
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya
warna dan latarbelakang dokumen yang akan ditampilkan pada browser.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<body text="v" bgcolor="w" background="uri"
link="x" alink="y" vlink="z"><br />
..............<br />
</body><br /><br />
Attribute text memberikan warna pada teks, bgcolor memberikan warna pada
latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML
dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan
warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang
telah dikunjungi. </span>
<span style="font-size: x-small;"><br />
Jika attribute bgcolor dan background keduanya dispesifikasikan
maka attribute background yang akan digunakan, akan tetapi jika nilai
attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute
bgcolor yang akan digunakan.</span></div>

Dasar HTML

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML. MATERI: Struktur dasar dok...

Membuat Buku Tamu

Masih dalam perbaikan

Hyperlink HTML

</div>
<div class="style3" style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>OBJEKTIF:</b><br />
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan
element-element untuk menghubungkan ke internal atau eksternal halaman web.</span></div>
<div class="style3" style="font-family: Verdana,sans-serif;">
<br /></div>
<div class="style3" style="font-family: Verdana,sans-serif;">
<span style="font-size: x-small;"><b>MATERI:</b><br />
Element A<br /><br /><br /><b>ELEMENT A</b></span>

<span style="font-size: x-small;"><br />
Element A befungsi untuk menghubungkan ke internal ataupun eksternal
halaman web. Element ini mempunyai attribute href, name, dan target. 
Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI
(uniform resource identifier) yang akan menghubungkan ke eksternal halaman web.
Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web
(anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu
jendela frame atau jendela baru.<br /><br />
Sintaks:</span>
<span style="font-size: x-small;"><br />
<a href="url" name="name"
target="_blank"|"parent"|"_top"|"_self"><br />
   ...........................<br />
</a></span></div>

Hyperlink HTML

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk menghubungkan ke internal ata...