Apa itu HTML ???

HTML atau yang merupakan singkatan dari Hypertext Mark Up Language adalah bahasa standar pemrograman untuk membuat suatu website yang bisa diakses dengan internet.

Dengan kata lain halaman website yang kita lihat dan kita baca disusun dengan menggunakan bahasa ini dan kemudian diterjemahkan oleh komputer agar dapat dipahami oleh penggunanya. Html merupakan standar pembuatan website secara luas agar laman website dapat ditampilkan pada layar komputer.

Html disusun dengan kode dan simbol tertentu yang dimasukkan ke dalam sebuah file atau dokumen. Jadi setiap Anda membuka website apapun dengan menggunakan browser maka web tersebut dibuat dengan menggunakan html.

Dari singkatan hypertext markup language itu sendiri kita bisa mengetahui makna dari html. Hypertext adalah suatu metode yang digunakan untuk berpindah laman web ke laman yang lain dengan mengklik suatu tulisan atau simbol pada laman website.

Istilah markup pada html sendiri diartikan sebagai suatu hal yang dilakukan tag html terhadap teks yang berada didalamnya, misal jika mengetik suatu teks dengan tanda tag <b> maka teks tersebut akan muncul sebagai teks dengan huruf tebal atau bold pada suatu laman website.

Simbol atau tag html tersebut ditulis pada laman html yang sudah disediakan pada dashboard website pada umumnya. Sementara language dalam html adalah bahasa pemrograman atau script yang disusun dari tag-tag tertentu yang nantinya akan diterjemahkan kedalam teks atau visual yang dapat dilihat pada website.

Membuat Ordered List

Untuk membuat ordered list, pada prinsipnya sama dengan unordered list. Perbedaannya hanyalah pada tag pembukanya. Pada ordered list tag pembukanya adalah <ol> dan diakhiri dengan <ol/>;. Sedangkan penulisan itemnya sama dengan unordered list. Biasanya ordered list digunakan untuk membuat urutan langkah-langkah suatu proses. Sebagai tips, misalkan anda ingin menulis sebuah item dengan baris berjumlah lebih dari satu, baik pada ordered list maupun unordered list, anda dapat menambahkan tag <br/>.

Contoh Script

<!DOCTYPE>
<html>
<head>
<meta charset=”UTF-8″>
<title> Ordered List </title>
</head>
<body>
<h1> Cara Memasak Mie Instan </h1>
<ol>
<li>Masukkan 2 gelas belimbing air ke dalam panci</li>
<br/>
(2 gelas belimbing = 200 cc)
<li>Masukkan mie instan ke dalam panci</li>
<li>Rebus mie instan selama kurang lebih 3 menit</li>
<li>Masukkan bumbu dan minyak</li>
<li>Siapkan mangkuk</li>
<li>Tuangkan mie ke dalam mangkuk</li>
</ol>
</body>
</html>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah kita dapat membuat ordered list dengan tag pembukanya adalah <ol> dan diakhiri dengan  <ol/>, jika list yang dibuat banyak bisa menggunakan tag <br/>.

Membuat Nested List

Maksud dari istilah nested list adalah dalam sebuah list terdapat list lain atau list di dalam list.

Contoh Script

<!DOCTYPE>
<html>
<head>
<meta charset=”UTF-8″>
<title> Ordered List </title>
</head>
<body>
<h1> Cara Memasak Mie Instan </h1>
<ol>
<li>Masukkan 2 gelas belimbing air ke dalam panci</li>
<li>Masukkan mie instan ke dalam panci</li>
<ul>
<li>Anda dapat memasukkan telur jika mau</li>
<li>Sebelum mie dimasukkan, pastikan air telah agak mendidih</li>
<li>Sebaiknya mie dipotong-potong dahulu, supaya mie tidak terlalu panjang</li>
</ul>
</li>
<li>Rebus mie instan selama kurang lebih 3 menit</li>
<li>Masukkan bumbu dan minyak</li>
<li>Siapkan mangkuk</li>
<li>Tuangkan mie ke dalam mangkuk</li>
</ol>
</body>
</html>

Hasil

Kesimpulan

Jadi kesimpulan yang didapat dari latihan diatas adalah kita dapat memberikan penomoran dalam sebuah list, kemudian pada salah satu dari bagian poin diberikan list juga yag berupa tanda/simbol.

Membuat Nested List (2)

Maksud dari istilah nested list adalah dalam sebuah list terdapat list lain atau list di dalam list.

Contoh Script

<!DOCTYPE>
<html>
<head>
<meta charset=”UTF-8″>
<title> Ordered List </title>
</head>
<body>
<h1> Cara Memasak Mie Instan </h1>
<ul>
<li>Masukkan 2 gelas belimbing air ke dalam panci</li>
<li>Masukkan mie instan ke dalam panci</li>
<ul>
<li>Anda dapat memasukkan telur jika mau</li>
<li>Sebelum mie dimasukkan, pastikan air telah agak mendidih</li>
<li>Sebaiknya mie dipotong-potong dahulu, supaya mie tidak terlalu panjang</li>
</ul>
<li>Rebus mie instan selama kurang lebih 3 menit</li>
<li>Masukkan bumbu dan minyak</li>
<li>Siapkan mangkuk</li>
<li>Tuangkan mie ke dalam mangkuk</li>
</ul>
</body>
</html>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah membuat list yang berada dalam list utama dengan menggunakan tag <ul> dan diakhiri </ul>.

Membuat Urutan List

Untuk ordered list, penomoran item tidak selalu dimulai dengan angka 1. Anda dapat memulai penomoran dengan angka 2 atau yang lain. Cara untuk menentukan angka awal penomoran item adalah dengan menambahkan atribut start=”n” pada tag &lt;ol&gt; dengan n adalah angka awal penomoran yang diinginkan.

 

Contoh Script

<!DOCTYPE>
<html>
<head>
<meta charset=”UTF-8″>
<title> Ordered List </title>
</head>
<body>
<h1> Cara Memasak Mie Instan </h1>
<ol start=”3″>
<li>Masukkan 2 gelas belimbing air ke dalam panci</li>
<li>Masukkan mie instan ke dalam panci</li>
<li>Rebus mie instan selama kurang lebih 3 menit</li>
<li>Masukkan bumbu dan minyak</li>
<li>Siapkan mangkuk</li>
<li>Tuangkan mie ke dalam mangkuk</li>
</ol>
</body>
</html>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah kita bisa membuat urutan list yang dimulai dari nomor 3, dengan menggunakan tag <ol start=”3″>.

Membuat Tabel

Memformat tabel berarti mengedit sebuah tabel, sama seperti sebelumnya yaitu membuat tabel dengan membutuhkan setidaknya 3 tag,yaitu tag <table>, tag <tr>, dan tag <td>:
1. Tag <table> digunakan untuk memulai tabel
2. Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
3. Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi<br/>sebesar 1 pixel.
Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

Contoh Script

<body>
<h1>Harga Buah</h1>
<table>
<tr>
<th>Nama Buah</th>
<th>Harga/Kg</th>
</tr>
<tr>
<td>Apel</td><td>Rp. 8.000,-</td>
</tr>
<tr>
<td>Jeruk</td><td>Rp. 7.500,-</td>
</tr>
<tr>
<td>Kelengkeng</td><td>Rp. 10.000,-</td>
</tr>
<tr>
<td>Anggur</td><td>Rp. 12.000,-</td>
</tr>
</table>
</body>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah dapat dilihat jika hasilnya setelah ada berbagai atribut yang telah tertulis di script menghasilkan tampilan seperti di dalam tabel, walaupun tidak terdapat garisnya.

Memformat Tabel

Memformat tabel berarti mengedit sebuah tabel, sama seperti sebelumnya yaitu membuat tabel dengan membutuhkan setidaknya 3 tag,yaitu tag <table>, tag <tr>, dan tag <td>:
1. Tag <table> digunakan untuk memulai tabel
2. Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
3. Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi<br/>sebesar 1 pixel.
Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

Contoh Script

<h1>Harga Buah</h1>
<table border=”2″ align=”center” width=”40%”>
<tr bgcolor=”#b2dfdb”>
<th>Nama Buah</th>
<th>Harga/Kg</th>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Apel</td>
<td bgcolor=”#eeeeee”>Rp. 8.000,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Jeruk</td>
<td bgcolor=”#eeeeee”>Rp. 7.500,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Kelengkeng</td>
<td bgcolor=”#eeeeee”>Rp. 10.000,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Anggur</td>
<td bgcolor=”#eeeeee”>Rp. 12.000,-</td>
</tr>
</table>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah kita bisa membuat sebuah tabel dalam html dengan menggunakan berbagai tag seperti tag <table>, tag <tr>, dan tag <td>. ditambah dengan berbagai atribut border, align dan width.

Menggabung Cell

Dalam membuat sebuah tabel terkadang membutuhkan beberapa baris satu dengan baris lainnya yang berbeda dan kolom satu dengan kolom yang lainnya  yang berbeda pula. Untuk memenuhi kebutuhan tersebut maka perlu dilakukan penggabungan antar sel dalam sebuah tabel. Dalam HTML sendiri terdapat atribut yang digunakan untuk menggabungkan sebuah sel dalam tabel dengan tabel lainnya. Atribut tersebut adalah Colspan dan Rowspan. Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping”. Sehingga satu unit kolom ini menjadi lebih lebar. Untuk membuat kolom menjadi lebih besar dari yang normal, kita akan menggunakan atribut colspan. Atribut Colspan ini kita akan tulis di dalam tag &lt;td&gt;, misalkan sobat menuliskan <td colspan=”2″> itu berarti sobat menggabungkan 2 buah kolom.

 

Contoh Script

<h1>Harga Buah</h1>
<table border=”2″ align=”center” width=”40%”>
<tr bgcolor=”#b2dfdb”>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td colspan=”2″>Baris 2, Kolom 2 dan 3 digabung</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah kita bisa menggabungkan baris dan kolom dari sebuah tabel seperti contoh script diatas dan hasilnya.

Valign & Align

Atribut align pada tabel digunakan untuk mengatur bentuk perataan data pada tabel secara horizontal.
Atribut align dapat digunakan di tag <table> yang akan menentukan posisi tabel atau di tag
<tr>, <th> atau <td> yang akan menentukan posisi isi tabel (data) di dalam tabel secara horizontal.
Di tag <table>, nilai yang dapat diterapkan pada atribut align yaitu :
1. Left untuk membuat posisi tabel di kiri (default).
2. Right untuk membuat posisi tabel di kanan.
3. Center untuk membuat posisi tabel di tengah.
Atribut valign pada tabel digunakan untuk mengatur perataan pada tabel secara vertikal.
Atribut valign ditulis pada tag <tr>, <th> atau <td> yang akan menentukan posisi isi tabel (data) di dalam tabel secara vertikal.<br/>
Ada empat nilai yang dapat diterapkan di atribut valign yaitu :
1. top = Membuat isi sel rata atas dengan sel
2. bottom = Membuat isi sel rata bawah dengan sel
3. middle = Membuat isi sel berada di tengah sel
4. baseline = Membuat isi sel berada pada posisi teks pertama yang diketik dalam sel

 

Contoh Script

<body>
<h1>Harga Buah</h1>
<table border=”2″ align=”center” width=”40%”>
<tr>
<td rowspan=”3″ valign=”top”>Ini adalah Tabel</td>
<td>Hypertext Markup Language</td>
</tr>
<tr>
<td align=”right”>HTML</td>
</tr>
<tr>
<td>Perintah dan tahapan Web dasar</td>
</tr>
</table>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah kita bisa mengatur tata letak data didalam tabel menggunakan valign dan align. Valign untuk horizontal
dan align untuk vertikal.

Membuat Form Text Box

Form dalam desain web merupakan hal vital yang mutlak harus ada untuk membuat keinteraktifan dengan
pengunjung. Dengan adanya form kita dapat membuat aplikasi buku tamu, online shopping, forum dll.
Untuk keperluan interaksi dengan pengunjung, form tidak dapat berdiri sendiri, harus diintegrasikan dengan
pemrograman web, misalnya javascript, PHP, ASP, Perl dll. Ada beberapa komponen form, salah satunya yang
akan dibahas adalah Text Box. Text Box dibuat dengan menuliskan tag <input type=”text” name=”namakomponen” />. Dengan atribut nama diisi komponen yang sesuai dengan data isian. Nama komponen mutlak dituliskan karena akan digunakan pada script pengolah data. Tombol submit adalah tombol yang digunakan untuk mengirim data ke script pengolah data. Tombol ini sifatnya tidak wajib. Meskipun dengan tombol ini, kita masih bisa mengirim data dengan menekan ENTER. Penulisannya seperti contoh dalam script dibawah. Atribut size berarti menyatakan lebar field. Atribut value=”nilai” digunakan untuk menampilkan nilai ke dalam text box

Contoh Script

<body>
<form method=”post” action=”form.html”>
First name:
<br/>
<input type=”text” name=”firstname” value=”Mickey”>
<br />
Last name:
<br/>
<input type=”text” name=”lastname” value=”Mouse”>
<br/>
<br />
<input type=”submit” value=”Submit”>
</form>
<p>
Jika anda submit data melalui tombol submit maka data akan
ditampilkan pada halaman “form.html”.
</p>
</body>

Hasil

Kesimpulan

Jadi kesimpulan dari latihan diatas adalah kita dapat membuat form didalam html yang merupakan hal mutlak yang harus ada dengan menggunakan berbagai atribut yang telah dijelaskan diatas.