bintang jatuh

Minggu, 29 Maret 2015

Membuat Table Pada HTML


Assalamualaikum Wr. Wb... teman teman saya Cahyu datang lagi dengan tema yang berbeda yaitu, cara membuat table pada HTML. Semoga apa yang saya jelas kan bermanfaat bagi teman teman semua. Dalam pembuatan table disini kita masih menggunakan tag pembuka dan tag penutup HTML. Masih ingat kan tag pembuka dan tag penutup nya, jika sudah lupa disini saya akan memberitahu kembali:
* Tag pembuka diantara lain yaitu: <html>
                                                    <head>
                                                    <title></title>
                                                    <body>
* Dan untuk Tag penutup diantara nya yaitu: </body>
                                                                   </head>
                                                                   </html>

1. Membuat Table Sederhana   
      Baik lah sekarang saat nya belajar bagaimana memebuat table pada HTML. Kita mulai dulu dengan table yang sederhana dulu sehingga menuju table yang lebih rumit dan ruwet nanti nya. Sebelum saya teruskan, saya menyarankan untuk membuat table hanya untuk tabel. Jangan gunakan table sebagai layout web.
Ada 3 kompenen utama dalam pembuatan table yaitu :
1. Penenda Table <table>
2. Penenda Baris <tr>
3. Penanda Kolom <td>

Membuat table dengan  tag HTML maka diperlukan beberapa tag untuk membentuknya seperti dibawah ini yang selalu di gunakan jika membuat table menggunakan HTML.
*Tag <table> </table> digunakan untuk membuka dan menutup table,
*Tag <tr> </tr> dugunakan untuk membentuk baris dalam sebuah table,
*Tag <td> </td> fungsi nya untuk membentuk kolom dalam table.

Dan ini adalah serangkaian contoh membuat table sederhana dengan 3 kolom dan 2 baris:

<html>
<head>
<title>TABEL SAYA</title>
</head>
<body>
<p>Ini<strong>tabel saya</strong> yang sudah jadi</p>
<table>
<tr>
<td>kolom pertama baris ke 1</td>
<td>kolom kedua baris ke 1</td>
<td>kolom ketiga baris ke 1</td>
</tr>
<tr>
<td>kolom 1 baris kedua</td>
<td>kolom 2 baris kedua</td>
<td>kolom 3 baris kedua</td>
</tr>
</table>
</body>
</html>

Maka hasilnya akan menjadi seperti di bawah ini :

gambar 1.1











Bagaimana mudah bukan cara membuat nya,,,

2. Membuat Table Secara Kompleks
       Dan selanjutnya kita akan mempelajari cara membuat table secara kompleks. Kompleks disini adalah sebuah tabel yang akan menggabungkan beberapa cell sesuai kebutuhanCELL yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. Contohnya seperti ini:
Rumus rumus  untuk membuat kode rumit diatas adalah seperti ini:
   1. Buat dulu tag table
    <table>
    </table>

   2. Ditengah nya kita masukkan beberapa baris table yang inggin kita buat. Misalnya kita membuat 3 baris
    <table>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    </table>
 
  3. Sekarang kita membuat kolom nya. Dibaris pertama, kolom pertama, kolomnya 
     turun hingga baris ke-2 . Berarti ada dua baris yang digabungkan . Maka 
     atributnya ROWSPAN="2" .Sehingga jadi seperti ini.

    <table>
    <tr>
    <td rowspan="2"></td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    </table>
 
   4. Kolom kedua baris pertama mengabungkan 4 kolom. Maka atributnya COLSPAN="4"
      Sehingga jadi nya seperti ini.
 
    <table>
    <tr>
    <td rowspan="2"></td>
    <td colspan="4"></td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    </table>
  
   5. Berikut nya langsung saja ke kolom ke dua ke tiga ke empat dan ke lima.
      Jadinya seperti ini:
    <table>
    <tr>
    <td rowspan="2"></td>
    <td colspan="4"></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    </tr>
    </table>
Lihat kan? Saya cuma menambahkan 4 kolom saja di baris 2 karena kolom 1 
kan sudah diambil oleh baris pertama sehingga kita hanya perlu menambah 
kekurangannya saja.
 
6. Baris ketiga karna tidak diambil alih, berarti tetap 5 kolom yang kita pasang.
   Jadinya:
    <table>
    <tr>
    <td rowspan="2"></td>
    <td colspan="4"></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
 
7. Sekarang tinggal mengisi saja kolom kolom nya dengan text sesuka hati anda.
   Dan ini lah hasil akhir nya. 
 
<html>
<head>
<title>Table Arisan</title>
</style>
</head>
<body>
<p>ini table arisan pengajian ibu'-ibu' di dendang</p>
<table>
<tr>
<td rowspan="2" style="text-align:center; vertical-align:middle;">Nama ibu'-ibu'</td>
<td colspan="4" style="text-align:center; vertical-align:middle;">Bulan</td>
</tr>
<tr>
<td>Muharom</td>
<td>safar</td>
<td>robiul awal</td>
<td>robiul akhir</td>
</tr>
<tr>
<td>Cahyu</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>Yani</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>sari</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
</table>
</body>
</html>

Maka kode kode di atas hasilnya akan menjadi seperti di bawah ini:


gambar 1.1

Selamat Mencoba teman....!!

3. Membuat Table Dengan Heading
    Sering kali dalam membuat table, kita gunakan sebagai judul kolom. Dan baris baris dibawah nya.Dan biasa nya baris pertama tabel ini secara visual di bedakan dengan baris dibawahnya agar tampak lebih menarik. Untuk keperluan ini tag HTML memiliki tag khusus yang bisa di gunakan, yaitu tag th singkatan dari table head.
Contoh penggunaan tag th pada html:
 <html>
<head>
<title>tabel kompleks</title>
</head>
<body>
<h2>ini tabel yang telah menggunakan heading</h2>
<table>
<tr>
<th>nomer induk siswa</th>
<th>nama siswa</th>
</tr>
<tr>
<td>9977973950</td>
<td>cahyu astuti</td>
</tr>
</table>
</body>
</html>

Maka hasilnya akan menjadi seperti di bawah ini:

gambar 1.1







4. Membuat Table Formulir Isian
    Selanjutnya kita akan membuat table formulir isian pada html. Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan, Misalnya untuk buku tamu,login ,regitrasi, dan lain sebagai nya. Dibandingkan skill pelajaran html lain nya seperti membuat paragraf, atau memasukkan gambar. Membuat formulir isian lebih sulit
Dibawah ini adalah contoh sebuah form atau borang dengan berbagai macam jenis input:

gambar 1.1
.

















Diatas adalah contoh dari form isian yang akan kalian pelajari disini, sekarang siap kan bahan bahan nya yaitu <form> <input> <option> dan <select>. Sekarang kalian perhatiakan di atas tiap baris mempunyai jenis input yang berbeda beda. Apa itu input? input adalah sesuatu yang dimaksudkan oleh pembaca halaman web kalian misalnya
*Text
*Password
*checkbox
*Radio
*Select
*Textarea

Langkah untuk membuat formullir isian:

1. Buka tag pembuka html
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>

2. Kemudian masukkan kode form dan penanda baris pertama
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>

3. Selanjutnya masukkan kode penanda baris kedua beserta penanda kolom, penanda kolom disini kita masukkan kata "NIM" .Penanda baris ketiga beserta penanda kolom nya, pada kolom pertama baris ketiga kita isikan dengan kta "Nama" , selanjutnya kolom ke dua baris ke tiga kita masukkan input type text. Kemudian kita masukkan input type text untuk baris kedua kolom kedua:
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>

4. Setelah itu,kita akan lanjutkan kepenanda baris ke empat, pada penanda baris ke empat masukkan juga penanda kolom. Kolom pertama baris ke empat isikan dengan "Jenis Kelamin". Sedangkan untuk penanda kolom pertama, baris ke empat masuk kode "input type radio", input type radio berguna untuk memilh salah satu pilihan yang tersedia. Contoh nya seperti dibawah ini:
 <html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>

5. Dan selanjutnya kepenanda baris ke lima, pada penanda baris ke lima kolom pertama isikan dengan kata
" Hobby"  sedangklan untuk penanda kolom peretama baris kelima masukkan kode "input type checkbox", guna nya untuk memilih lebih dari satu. Contoh nya seperti dibawah ini:
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>

6.Selanjutnya kita akan membuat penanda kolom dan baris berikutnya. Pada penanda kolom pertama kita isikan dengan kata"Fakultas". Dan pada penanda kolom pertama baris ke enam kita menggunakan kode option banyak data. Contoh nya seperti di bawah ini:
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="simpan">
<input type="reset" value="Reset">
<input type="button" value="keluar">
</td>
</tr>
</table>
</form>
</body>
</html>

7. Maka pada penanda kolom dan penanda baris selanjut nya,pada penanda kolom pertama kita isikan dengan kata "Motto"  dan pada penanda baris nya kita isikan dengan menggunaka kode textarea dengan rows=3 dan cols=25. Dan jangan lupa untuk memberi tag pembuka dan tag penutup textarea.
Contoh nya seperti dibawah ini:
 <td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>

8. Dan untuk tahap akhir kita akan menggunakan rata tengah denga kode "align=center" dan diberi colspan=2 untuk penanda kolom nya, setelah itu kita akan memberi kode input type= button, reset,
Maka hasil akhir nya akan menjadi seperti ini:
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
<form>
<table width="55%" height="60%" border="1"align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="simpan">
<input type="reset" value="Reset">
<input type="button" value="keluar">
</td>
</tr>
</table>
</form>
</body>
</html>

Gimana walau pun lumayan sulit, semoga kalian semua bisa mencobanya...!!

5. Mewarnai Table Pada HTML
    Selanjut nya dalam pembuatan table terakihir disini kita akan mempelajari tentang mewarnai table.
Warna merupakan sesuatu yang sangat penting dalam kehidupan sehari hari tidak dapat dibayangkan jika tidak ada warna di dunia ini. Begitu juga dengan pembuatan table juga membutuhkan warna, supaya table yang kita buat agar terlihat lebih cantik dan menarik.Dalam pemilihan warna kita dapat melihat di HTML COLOR CODES
Dan ini lah langkah langkah untuk membuat table:
1. Buat tag pembuka html
<html>
<head>
<title>table dengan warna</title>
<body>

2. Selanjut nya, kita akan membuat ukuran table dan ukuran border nya dengan menggunakan kode seperti di bawah ini:
<html>
<head>
<title>table dengan warna</title>
<body>

<table width="500" border="1" cellspacing="0" cellpadding="3">

3. Disini kita akan menggunakan heading (th) . Pada kolom pertama baris pertama  kita isi kan dengan kata rowspan 3. Dan kita dapat menyisipkan warna dalam kolom pertama dengan menggunakan "bgcolor" warna dapat sesuakan dengan kemauan. Kode nya seperti dibawah ini:
 <html>
<head>
<title>table dengan warna</title>
<body>

<table width="500" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="53" rowspan="3" bgcolor="#00CCCC">rowspan 3</th>

4.Untuk baris pertama  kita isi kan dengan Nama, Alamat, Telepon, dan Clospan 2. Namun disini kita menggunakan rumus rumus yang berbeda. Pada Nama, Alamat, dan Telepon kita menggunakan width untuk ukuran kolom nya, disini kita juga dapat menyisipkan warna pada table nya. Dan untuk clospan 2  kita tidak menggunaka width, namun menggunakan clospan="2" . Dan jangan lupa untuk memberi tag pembuka th dan tag penutup th. Ooh ya satu lagi pada Nama, Alamat, Telepon, dan Clospan 2 kita menggunakan kolom yang berbeda beda.  Kode nya dapat dilihat dibawah ini:
<html>
<head>
<title>table dengan warna</title>
<body>

<table width="500" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="53" rowspan="3" bgcolor="#00CCCC">rowspan 3</th>
<th widht="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">clospan 2</th>
</tr>

5. Dan selanjut nya baris kedua kita. Dibaris kedua ini kita tinggal mengisikan Nama, Alamat, Telepon kita . Pada colspan 2 nya kita memberi width dan nbsp. Jika dibaris pertama kita menggunakan th atau heading, namun dibaris ini kita menggunkan td atau penanda kolom: Dan kode dapat dilihat dibawah ini:
<html>
<head>
<title>table dengan warna</title>
<body>

<table width="500" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="53" rowspan="3" bgcolor="#00CCCC">rowspan 3</th>
<th widht="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">clospan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">Cahyu</td>
<td align="center" bgcolor="#99CC66">Sidomukti</td>
<td bgcolor="#9966FF">082280718268</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>

6. Dan untuk tahap akhir kita tinggal memberi kode penutup nya:
</table>
</body>
</html>


Maka ini lah hasil akhir nya yang sudah saya buat:
<html>
<head>
<title>table dengan warna</title>
<body>

<table width="500" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="53" rowspan="3" bgcolor="#00CCCC">rowspan 3</th>
<th widht="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">clospan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">Cahyu</td>
<td align="center" bgcolor="#99CC66">Sidomukti</td>
<td bgcolor="#9966FF">082280718268</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
</table>
</body>
</html>

Jika kita luncur kan maka hasil nya akan menjadi seperti di bawah ini:

gambar 1.1






Nahh,,,,!! Berakhir sudah penjelasan kita dalam pembuatan table saat ini, semoga apa yang saya jelaskan dapat bermanfaat bagi teman teman semua. Dan selamat mencoba,,,,!!!!





Minggu, 15 Maret 2015

Rangkuman Pembelajaran HTML

        Assalumualaikum teman teman,,saya Cahyu datang lagi ingin membagi tips bagaimana cara membuat HTML.Disini saya belajar HTML waktu saya PKL di POS METRO JAMBI. Semoga apa yang saya jelas kan bermanfaat bagi kita semua.
Sebelum nya kita akan  pengenalan HTML terlebih dahulu, Udah pada tahu belum HTML itu apa,,??

1. Pengenalan HTML
       HTML(Hyper Text Markup Language) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelasan web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASC11 normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).Keunggulan nya HTML adalah mengintergrasikan gambar dengan tulisan, membuat pranala, mengintergrasikan berkas suara dan rekaman gambar hidup,dan membuat form iteraktif. Untuk membuat file HTML sangat mudah, Anda cukup menuliskan beberapa baris kata yang ingin anda tampilkan dan simpan file nya dengan ekstensi html.
Dan untuk penyimpan html kita  menggunakan dot html atau misal gambar.html dan save as type kita ganti menjadi ALL FILES.

2. HTML Pertamaku
        Sekarang mari kita coba menulis kode HTML pertama kita, untuk mengedit file kita menggunakan notepad.disini saya menyarankan anda untuk menggunakan notepad. Cara untuk memanggil notepad adalah tekan windows+R. 
       Sebelumnya HTML menggunakan tag pembuka dan tag penutub. Diantara lain adalah:
* Tag pembuka diantara lain yaitu: <html>
                                                    <head>
                                                    <title></title>
                                                    <body>
* Dan untuk Tag penutup diantara nya yaitu: </body>
                                                                   </head>
                                                                   </html>

       Disini kita bisa memanipulasi tampilan tulisan teks sehingga tulisan nya tampak keren dan cantik cantik seperti di website website pada umumnya. Kita akan memenipulasi teks sesuai keinginan, seperti menebalkan huruf, memiringkan, memberi garis bawah, mencoret huruf, membuat huruf keyboard, membuat huruf subscripted, dan membuat huruf superscripted.  Dan rumus rumus nya yaitu antaralain seperti dibawah ini:
<strong> menebalkan huruf
<em> memiringkan huruf
<ins> menggarisbawahi huruf
<del> mencoret huur
<kbd> membuat huruf keyboard
<sub> membuat huruf subscripted
<sup> membuat huruf superscripted.
      * Sekarang kita coba memanggil notepad, untuk membuat huruf huruf seperti diatas:
Disini misal nya kita menggunakan kalimat seperti dibawah, dan kemudian kita ketikkan rumus nya:
<html>
<head>
<title>saya</title>
<body>
<strong>mos</strong>
<em>saya</em>
<ins>pos</ins>
<del>dibentak </ins>
<sub>setalah pos pertama</sub>
<sup>orang</sup>
</body>
</head>
</html>
        Dan Hasil nya akan seperti dibawah ini:

   

* Dan untuk membuat paragraf kita bisa menggunakan rumus:<P ALIGN="LEFT"> dan ditutup oleh paragraf penutup </P>
contoh nya seperti ini:
 <html>
<head>
<title>pengalaman ku</title>
 </head>
<body>
<P ALIGN="LEFT">Baik lah teman – teman  saya Cahyu Astuti dari SMKN 5 Tanjung Jabung Timur, ingin menceritakan  pengalam saya waktu Masa Orientasi Siswa (MOS).Walau pun kurang menyenangkan waktu MOS nya tapi berkesan banget bagi saya , dan tak kan pernah terlupakan. Pada Tahun 2013 saya mendaftarkan diri di Sekolah Menegah Kejuruan (SMK), yang bertempat di Jalan Sultan Thaha </P>
 </body>
</head>
</html>
     Dan hasil nya akan seperti di bawah ini:


3. Memasukkan Gambar Dan Memberi Bingkai
         Untuk memasukkan lokasi gambar adalah folder dimana gambar itu diletakkan berdasarkan letak file html.Misal nya file html nya diletak kan di folder z dan nama folder untuk mengisi gambar nya harus jelas, dan mudah diingat. Dan nama gambar yang akan kita masukkan harus jelas juga,  misal nya nama fordernya gambar dan nama gambar yang akan kita masukkan nama nya huawei.

* Kode kode untuk memasukkan gambar yaitu:
<img src="gambar/huawei.jpg" alt="gambar pecah"/>

*Dan kode kode untuk memasukkan dan memberi bingkai yaitu:
 <img class="caption"src="gambar/huawei.jpg"border="4" alt="gambar pecah"title="huawei"style="float:left"widht="200"height"200"/>

          Seperti contoh contoh di atas,jika kita ingin memasukkan gambar pada html kita harus menggunakan tag pembuka dan tag penutup.Kata HAWEI diatas adalah nama gambar yang akan masukkan.  Dan disini saya membuat gambar berada di sebelah kiri, jika anda ingin mengubahnya menjadi sebelah kanana atau berada ditengah anda tinggal mengganti Left nya.
Dan contoh gambar nya seperti dibawah ini:

gambar 1.1






















4.Macam Macam Heading

 HTML juga mempunyai heading, ada heading 1 hingga heading 6. Bagi anda yang belum paham apa itu heading silah kan baca baca  buku apa saja khususnya buku non fiksi. Di dalam pembuatan web, anda harus meletakkan heading dalam halaman web anda. Gunanya agar Search engine mampu mengenali tema dan materi yang sedang anda sampaikan di halaman web tersebut..Dengan begitu,mereka tidak akan salah persepsi, misalnya:
*Ini lah kode untuk membuat heading:
<h1>300 kelompok arisan emas </h1>
<h2>yamaha perkenalkan New Mio M3 Blue Core</h2>
<h3>Awalnya Sulit Pasarkan versa Board</h3>
<h4>Tendangan Alvin Terbaca kiper</h4>
<h5>Giliran Koran Jerman Diserang</h5>
<h6>Walikota Jambi Hadiri Maulid Nabi di Lapas</h6>
<h7>Hayat Boumeddiene Diduga di Suriah</h7>

Dan hasih heading nya akan menjadi seperti di bawah ini:













 5. Formulir Isian
   Sekarang kita akan belajar membuat formulir isian.Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat form relatif lebih sulit.Tag form memiliki setidaknya 2 atribut.Yaitu  
1. action:
yaitu  yang menunjukkan file untuk memproses formulir. Biasanya sebuah file php.
2. Method.
Ada 2 macam method yaitu POST dan GET.
    *Method POST dipakai untuk pengiriman data formulir yang cukup besar. Misalnya buku tamu, threat forum, input artikel baru.
    * Method GET dipakai untuk pengiriman data yang sangat kecil. Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
semua input data harus diletakkan diantara tag <form action="" method="post"> dan </form>. Jika anda meletakkan diluar tag tersebut, maka data itu tidak akan dikirimkan ke file pemroses.
Contohnya seperti ini:
form action="" method="post">
     <!-- Isi formulir disini -->
</form>

6. Form Input Data
      Kita lanjutkan pembahasan soal form. Tag pertama untuk memasukkan data adalah INPUT. Tag ini sudah sering kita jumpai di search engine, form opt-in subscriber atau formulir-formulir online lainnya. Biasanya dipakai untuk memasukkan data yang hanya 1 baris saja seperti nama, email, alamat rumah, dll.
Karena tag ini tidak memiliki tutup, maka kita tutup di bagian akhirnya dengan tanda />. Atribut berikutnya adalah name. Atribut ini dipakai untuk mengenali data apa yang sedang dimasukkan.
Cara membuat input ini pun gampang.

*Kode HTML-nya seperti ini:
 <input type="text" name="NAMA_FIELD" size="30" />

Atribut type dipakai untuk menentukan jenis input-nya. Ada beberapa macam type yaitu:
Dalam pembuatan input data kita masih menggunakan tag pembuka dan tag penutup html, Dan itu jangan jangan lupa .
  1. button = input berbentuk tombol
  2. checkbox = input berbentuk tanda centang, dipakai untuk memilih lebih dari 1 opsi
  3. file = input file utk diupload
  4. hidden = input data tersembunyi, biasanya data default
  5. image = input berbentuk gambar, biasanya dipakai menggantikan tombol submit dengan gambar
  6. password = input untuk password. Kalau diketik, tulisannya berubah jadi *****
  7. radio = input bulatan, dipakai untuk memilih satu dari beberapa opsi
  8. reset = tombol reset untuk menghapus semua isian form
  9. submit = tombol untuk mengirimkan data
  10. text = input berbentuk kotak untuk mengisikan data
* Dan ini lah contoh nya jika anda ingin membuat form input data:
<form action="" method="post">
<input type="button" name="NAMA_FIELD" size="30"/></p>
<input type="checkbox" name="NAMA_FIELD" size="30"/></p>
<input type="file" name="NAMA_FIELD" size="30"/></p>
<input type="hidden" name="NAMA_FIELD" size="30"/></p>
<input type="image" name="NAMA_FIELD" size="30"/></p>
<input type="password" name="NAMA_FIELD" size="30"/></p>
<input type="radio" name="NAMA_FIELD" size="30"/></p>
<input type="reset" name="NAMA_FIELD" size="30"/></p>
<input type="submit" name="NAMA_FIELD" size="30"/></p>
Dan hasilnya akan menjadi seperti ini:

















 7. Penggunaan Atribut Href Pada Tag HTML
       Attribut href pada html biasanya digunakan untuk membuat link namun fungsinya tidak hanya itu. Kali ini kita akan membahas apa saja yang bisa kita buat menggunakan attribut href ini.      
Membuat link menuju halaman lain
Untuk fungsi yang ini tentu sudah banyak yang tahu.
kode html:
<a href="Masukan link disini">tulisan</a>Pengertian Link - Definisi Link (atau di sebut juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertex) ke dokumen yang lain atau sumber lain. seperti hal nya suatu kutipan di dalam literatur. dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan. Pengertian link atau dalam bahasa Indonesia disebut dengan tautan adalah tulisan atau gambar yang apabila di klik akan menuju halaman tertentu sesuai dengan yang di tentukan oleh pembuat link. Dalam pembuatan link tag pembuka di awali dengan <A HREF Dan ditutup oleh tad </a>. Misal nya seperti ini, <a href="tebal.html">contoh pembuatan huruf tebal pada html</a
       Sebelumnya kita harus membuat link tersebut secara satu persatu, misalnya seperti ini, disini kita masih menggunakan tag pembuka dan tag penutup html:
<a href="tebal.html">contoh pembuatan huruf tebal pada html</a>.
      Dan seterusnya akan seperti itu, setelah selesai kita gabungkan menjadi satu nama folder. Hasilnya akan seperti ini:

<p><a href="tebal.html">contoh pembuatan huruf tebal pada html</a></p>
<p><a href="miring.html">contoh pembuatan huruf miring pada html</a></p>
<p><a href="garis bawah.html">contoh pembuatan huruf bergaris bawah pada html</a></p>
<p><a href="sub.html">contoh pembuatan huruf subscripted pada html</a></p>
<p><a href="mencoret.html">contoh pembuatan huruf mencoret pada html</a></p>
<p><a href="sup.html">contoh pembuatan huruf superscrited</a></p>

Dan hasil nya akan menjadi seperti ini:
 
 Dan jika kita klik salah satu contoh diatas, maka akan keluar kata kata yang kita ketik kan tadi,
mudah bukan cara membuat nya,,!!!

8. Mebuat Optional
     Sekarang kita masuk dalam pembelajaran membuat optional. Di HTML, ada beberapa macam cara untuk menampilkan optional.Dan inilah beberapa cara untuk menampilkan opsi kepada pengunjung.Ada kalanya kita ingin memberikan beberapa opsi bagi pengunjung saat mereka mengisikan formulir. Di HTML, ada beberapa macam cara untuk menampilkan optional. Dan kita akan membahasnya disini. Disini saya akan memberi tiga contoh dalam pembuatan nya>

* Radio button:
      Radio button adalah opsi berbentuk bulatan dimana pengunjung harus memilih salah satu dari beberapa opsi yang ada. Misalnya untuk toko garmen, opsi ini bisa dipakai untuk memilih ukuran pakaian yang diinginkan. Contohnya seperti ini:
1. <p>apa lambang hewan pada twitter?<br/>
<input type="radio" name="hewan" value="burung"/> burung<br/>
<input type="radio" name="hewan" value="kambing"/> kambing<br/>
<input type="radio" name="hewan" value="kelinci"/> kelinci<br/>
<input type="radio" name="hewan" value="kucing"/> kucing<br/>
<input type="radio" name="hewan" value="cicak"/> cicak<br/>

2. <p>siapa saja yang mendirikan twitter?<br/>
<input type="radio" name="orang" value="johan arifin, cristoper colombus"/> Johan Arifin,Cristoper Colombus<br/>
<input type="radio" name="orang" value="Muhammad Ahsan, Taufiq Hidayat"/> Muhammad Ahsan, Taufiq Hidayat<br/>
<input type="radio" name="orang" value="Jack Dorsey, BizStone, Evan Williams"/> Jack Dorsey, BizStone, Evan Williams<br/>
<input type="radio" name="orang" value="Johan Arifin, Taufiq Hidayat"/> Johan Arifin, Taufiq Hidayat<br/>
<input type="radio" name="orang" value="Jack Dorsey, Muhammad Ahsan"/> Jack Dorsey, Muhammad Ahsan<br/>

3.<p> twitter didirikan pada tahun dan bulan berapa?<br/>
<input type="radio" name="tahun" value="bulan Maret tahun 2006"/> bulan Maret tahun 2006<br/>
<input type="radio" name="tahun" value="bulan Agustus tahun 2010"/> bulan Agustus tahun 2010<br/>
<input type="radio" name="tahun" value="bulan Januari tahun 2002"/> bulan Januari tahun 2002<br/>
<input type="radio" name="tahun" value="bulan Oktober tahun 1997"/> bulan Oktober 1997<br/>
<input type="radio" name="tahun" value="bulan Maret tahun 2002"/> bulan Maret 2002<br/>

Kode kode di atas akan menghasilkan seperti ini.:

gambar 1.1









gambar 1.2










gambar 1.3










Sangat mudah bukan, sekarang kita akan melanjutkan membuat optional yang lain nya,, ???


* Checkbox
      Prinsipnya hampir sama dengan radio button, hanya saja di opsi ini, pengunjung bisa memilih lebih dari 1 pilihan. Biasanya dipakai di form subscribe yang memiliki lebih dari 1 berita.
Contoh nya seprti ini:
1. <h1>apa lambang hewan pada twitter?</h1>
<form method="post" action="#">
<input type="checkbox" name="hewan" value="burung"/>burung<br/>
<input type="checkbox" name="hewan" value="kambing"/>kambing<br/>
<input type="checkbox" name="hewan" value="kelinci"/>kelinci<br/>
<input type="checkbox" name="hewan" value="kucing"/>kucing<br/>
<input type="checkbox" name="hewan" value="cicak"/>cicak<br/>
<input type="submit" name="submit" value="tiggal kirim saja"/>

2. <h1>siapa saja yang mendirikan twitter?</h1>
<form method="post" action="#">
<input type="checkbox" name="orang" value="johan arifin, cristoper colombus"/>johan arifin, cristoper colombus<br/>
<input type="checkbox" name="orang" value="muhammad ahsan, taufiq hidayat"/>muhammad ahsan, taufiq hidayat<br/>
<input type="checkbox" name="orang" value="jack dorsey, bizstone, evan williams"/>jack dorsey, bizstone, evan williams<br/>
<input type="checkbox" name="orang" value="johan arifin, taufiq hidayat"/>johan arifin, taufiq hidayat<br/>
<input type="checkbox" name="orang" value="jack dorsey, muhammad ahsan"/>jack dorsey, muhammad ahsan<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>

3. <h1>twitter didirikan pada tahun berapa?</h1>
<form method="post" action="#">
<input type="checkbox" name="tahun" value="bulan Maret tahun 2006"/> bulan Maret tahun 2006<br/>
<input type="checkbox" name="tahun" value="bulan Agustus tahun 2010"/> bulan Agustus tahun 2010<br/>
<input type="checkbox" name="tahun" value="bulan Januari tahun 2002"/> bulan Januari tahun 2002<br/>
<input type="checkbox" name="tahun" value="bulan Oktober tahun 1997"/> bulan Oktober 1997<br/>
<input type="checkbox" name="tahun" value="bulan Maret tahun 2002"/> bulan Maret 2002<br/>
<input type="submit" name="submit" value="tinngal kirim saja"/>

Kode kode diatas akan menghasilkan seperti dibawah ini:

gambar 1.1








 
gambar 1.2










gambar 1.3







  

Nahh,,!! Sangat mudah bukan membuat nya...???


9. Menyisipkan  Gambar Pada Pembuatan Optional Data 
        Gambar sangat penting dalam sebuah penjelasan. Gambar mempunyai tugas meneruskan maksud dari perancang dengan tepat kepada orang-orang yang bersangkutan, kepada perencanaan proses, pembuatan, pemeriksaan, perakitan, dan penyimpanan dan penggunaan keterangan. Disini saya akan menjelaskan bagai mana cara menyisipkan gambar pada tag html. Contoh nya dalah sebagai berikut. Disini kita menggunakan kode kode yang hampir sama dengan membuat optional, disini kita menambah kan kode untuk menyisipkan gambar, yaitu:
Contohnya yaitu sebagai berikut ini:

1. <h1>lihat lah gambar dibawah ini, apa lambang hewan pada twitter?</h1>
<img class="caption"src="gambar/satu.jpg"border="3" alt="gambar pecah"title="burung"style="float:center"width="600"height="200"/>
<form method="post" action="#">
<input type="radio" name="hewan" value="burung"/> burung<br/>
<input type="radio" name="hewan" value="kambing"/> kambing<br/>
<input type="radio" name="hewan" value="kelinci"/> kelinci<br/>
<input type="radio" name="hewan" value="kucing"/> kucing<br/>
<input type="radio" name="hewan" value="cicak"/> cicak<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>

2. <h1>lihat lah gambar di bawah ini, twitter dikenal juga dengan sebutan?</h1>
<img class="caption"src="gambar/tiga.jpg"border="3" alt="gambar pecah"title="kicauan"style="float:center"width="600"height="200"/>
<form method="post" action="#">
<input type="radio" name="juga" value="ocehan"/> ocehan<br/>
<input type="radio" name="juga" value="kicauan"/> kicauan<br/>
<input type="radio" name="juga" value="cerita"/> cerita<br/>
<input type="radio" name="juga" value="kumupulan"/> kumpulan<br/>
<input type="radio" name="juga" value="layanan"/> layanan<br/>
<input type="submit" name="submit" value="tinggal kirim saja"/>

Dan hasil kode kode diatas adalah seperti dibawah ini:

gambar 1.1










 
gambar 1.2










10.Membuat Optional Data Dari Banyak Pilihan
      Pada artikel sebelumnya tentang membuat optional  kita hanya bisa menggunakan sedikit data saja. Paling 3-4 data aja sudah tergolong banyak nantinya. Bagaimana kalau pilihannya ada banyak, misalnya propinsi atau nama negara .Maka kita memerlukan optional dalam bentuk drop down.Kita menggunakan tag select untuk membuat dropdown option. Dan untuk menampilkan opsi-opsinya, kita menggunakan tag option.VALUE-1 sampai  VALUE-4dan seterusnya kita pakai untuk memberi isi datanya jika pengguna memilih label tersebut. Misalnya pengguna memilih LABEL -4, maka data yang dikirimkan adalah VALUE-4. VALUE dan LABEL bisa dibuat sama atau berbeda-beda terserah anda. HTML menyediakan tag untuk menampilkan optional dalam bentuk dropdown dengan format seperti ini:
 
<select name="NAMA_FIELD" multiple="multiple" size="2">
  <option value="VALUE-1">LABEL-1</option>
  <option value="VALUE-2">LABEL-2</option>
  <option value="VALUE-3">LABEL-3</option>
  <option value="VALUE-4">LABEL-4</option>
  ......
</select>
 
Pada kode di atas saya menambahkan dua atribut baru yaitu multiple="multiple" 
size="2" .Multipe dipakai untuk menunjukkan bahwa opsi ini bisa dipilih lebih dari
satu. Atribut size adalah jumlah opsi yang dimunculkan 
Nahh,, disini saya akan memberikian contoh nya bagaimana membuat optional dari
banyak data :
  
* Multiple Banyak Data
1. <h3>berikut nama dan kerabat dekat saya</h3>
<select name="NAMA_FIELD">
<option value="VALUE-1">deviorina aqilla raisya</option>
<option value="VALUE-2">diana mafnawati</option>
<option value="VALUE-3">fatma dwi santika</option>
<option value="VALUE-4">kuslan</option>
<option value="VALUE-5">maisaroh</option>
<option value="VALUE-6">naura yasmin</option>
<option value="VALUE-7">ria surtiasih</option>
<option value="VALUE-8">sabil wirayuda</option>
<option value="VALUE-9">samiran</option>
<option value="VALUE-10">siti syarifah</option>
<option value="VALUE-11">situn</option>
<option value="VALUE-12">suci lupita sari</option>
<option value="VALUE-13">sugioarto</option>
<option value="VALUE-14">suroso</option>
<option value="VALUE-15">suryadi</option>
<option value="VALUE-16">suryanto</option>
<OPTION value="VALUE-17">try nuryani</option>
<option value="VALUE-18">udi laksono</option>
<option value="VALUE-19">wiwit srirahayu</option>
<option value="VALUE-20">yulia ningsih</option>
 
Dan hasilnya akan menjadi seperti dibawah ini. Jika kita klik maka akan keluar 
semua nama nama provinsi di Indonesia.
 
 
gambar 1.1
 
 
 
 
 
 
 
 
*Multiple Optional
 Dan ini lah kode untuk multiple optional:
 
2. <h3>berikut nama dan kerabat dekat saya</h3>
<select name="NAMA_FIELD" multiple="multiple" size="2">
<option value="VALUE-1">deviorina aqilla raisya</option>
<option value="VALUE-2">diana mafnawati</option>
<option value="VALUE-3">fatma dwi santika</option>
<option value="VALUE-4">kuslan</option>
<option value="VALUE-5">maisaroh</option>
<option value="VALUE-6">naura yasmin</option>
<option value="VALUE-7">ria surtiasih</option>
<option value="VALUE-8">sabil wirayuda</option>
<option value="VALUE-9">samiran</option>
<option value="VALUE-10">siti syarifah</option>
<option value="VALUE-11">situn</option>
<option value="VALUE-12">suci lupita sari</option>
<option value="VALUE-13">sugioarto</option>
<option value="VALUE-14">suroso</option>
<option value="VALUE-15">suryadi</option>
<option value="VALUE-16">suryanto</option>
<OPTION value="VALUE-17">try nuryani</option>
<option value="VALUE-18">udi laksono</option>
<option value="VALUE-19">wiwit srirahayu</option>
<option value="VALUE-20">yulia ningsih</option>
 
 Hasilnya akan menjadi seperti di bawah ini:
 
gambar 1.2

 
 
 
 
 
 


Gimana tidak susah bukan untuk membuat optional dari banyak data,,,,????


11. Membuat Text area 
     Kini kita akan memasukkan satu elemen form yang juga sangat sering dipakai yaitu textarea. Textarea ini adalah kotak untuk memasukkan data berupa artikel atau tulisan yang cukup panjang. Biasanya untuk form komentar, iklan baris, pengisian artikel, dll.
* Cara membuat textarea sangat mudah. Berikut ini adalah kodenya:
 
<textarea name="NAMA_FIELD" cols="LEBAR_KOLOM" rows="TINGGI_KOTAK"></textarea>

NAMA_FIELD = nama data yang dimasukkan
LEBAR_KOLOM = berisi angka yang menunjukkan berapa karakter lebar kotaknya
TINGGI_KOTAK = berisi angka yang menunjukkan berapa karakter tinggi kotaknya


Ada beberapa script untuk membuat textarea menjadi lebih berfariasi, adalah sebagai berikut:

*Script Pertama
<textarea align="center">silahkan beri komentar anda yang sopan dan berbobot</textarea>

Dan hasil akan menjadi seperti ini:
gambar 1.1






*Script Kedua
<textarea align="center" style="background-color: #6699cc; height:50px; width:50px;">komentar ini biasa saja namun mengandung warna kebiruan</textarea>
</body>

Dan hasilnya menjadi seperti ini
gambar 1.2











*Script Ketiga
<textarea align="center" style="border-radius: 6px 6px 6px 6px; border:2px solid rgb(204, 204, 204) ; height: 100px; width: 100px;">
textarea dengan style garis tepi rounded corner
</textarea>

 Dan hasilnya akan seperti ini:
gambar 1.3








 *Script Keempat
<textarea align="center" style="background-color: #ff6633; border-radius: 8px 8px 8px 8px; border: 1px solid rgb(204, 204, 204); height:200px; width: 200px;">kolom komentar ini di buat dengan style garis bersudut tumput dengan warna orange
</textarea>

Dan hasilnya akan seperti ini :

gambar 1.4














 Ada catatan kode #ff6633 dan #6699cc dapat diganti dengan selera warna kebutuhan anda.

12.Membuat Tombol Reset Dan Submit
     Sampailah kita pada bagian akhir pembuatan form dengan HTML. Apalagi kalau bukan tombol
submit dan reset
*Untuk membuat tombol submit, kita menggunakan kode seperti ini:
 
<input type="submit" value="Kirimkan"/>
.
*Sedangkan untuk tombol reset, kita menggunakan kode:

<input type="reset" value="Hapus Form"/>
 
Kata-kata Kirimkan dan Hapus Form bisa anda ganti dengan kata-kata yang lainnya
sesuka hati 
Dan saya akan mencontohkan bagaimana cara membuat nya, dengan menggunakan kode kode berikut ini:

*Contoh submit
 <input type="submit" value="Kirimkan"/>
Maka hasilnya akan menjadi seperti ini:
gambar 1.1




*Contoh Reset
<input type="reset" value="Hapus Form"/>
Maka hasilnya akan seperti ini:
gambar 1.2




 *Submit Menggunakan Gambar
<input type="image" src="gambar/EMPAT.jpg" width="20" height="20"/>
Maka hasilnya akan seperti ini:
gambar 1.3




Nah, dengan berakhirnya artikel tentang tombol submit ini, maka berakhir jugalah rangkaian pelajaran tentang membuat form. Semoga pembelajaran ini bermanfaat bagi kita semua.

DAN SELAMAT MENCOBA FRIEND'S