HTML HYPERTEXT MARKUP LANGUAGE
Pengenalan HTML (1) HTML singkatan dari HyperText Markup Language Markup Language terdiri dari sekumpulan markup tags. Sebuah dokumen HTML dideskripsikan dengan Tag HTML. Masing-masing Tag HTML mendeskripsikan konten dokumen yang berbeda.
Pengenalan HTML (2) Dokumen HTML Sederhana <!DOCTYPE html> <body> Ini teks biasa <h1> ini teks heading <h1> <p> ini paragraph </p> </body> </html>
<namaTag> Isi </namaTag> Pengenalan HTML (3) Standar Tag HTML <namaTag> Isi </namaTag> Biasanya Tag HTML dituliskan berpasangan seperti <p> dan </p>. Tapi ada juga Tag HTML yang tidak berpasangan seperti <input /> Tag pertama pada Tag HTML disebut start tag atau Tag Pembuka, lalu Tag kedua adalah end tag atau Tag Penutup. Tag Penutup harus selalu diberi tanda “/” (slash) sebelum nama Tag.
Pengenalan HTML (4) Definisi Element HTML element adalah sesuatu yang dimulai dari Tag Pembuka hingga Tag Penutup termasuk isi diantara Tag Tersebut. Contoh : <p> Isi </p> Definisi Attribute HTML Attribute adalah informasi tambahan yang dimiliki oleh HTML Element. HTML Attribute dispesifikasikan pada Tag Pembuka. HTML Attribute memiliki name dan value. Contoh : <input type=“text” />
Pengenalan HTML (5) Komentar pada HTML Tag Dasar : Headings, Paragraphs, Links, Images Tag formatting : Bold, Strong, italic, small, marked, deleted, subscripted, superscripted, blockquote. Tag Table : th, caption Table Attribute : rowspan, colspan, border, padding, spacing, valign Bullet and number : ul, ol Tag Form : Textfield, Radio Button, Checkbox, Combo/List Box, Multiple Select, Textarea Button, Submit Button. Form Attribute : action, method, size, maxlength, readonly, disabled, selected, checked
Komentar pada HTML Tag komentar digunakan untuk memberikan komentar terhadap suatu kode/script pada halaman HTML. Tag komentar tidak akan diterjemahkan, diproses atau ditampilkan dalam bentuk apapun di browser. Untuk membuat sebuah komentar, gunakan Tag pembuka <!-- dan Tag penutup --> Contoh : <!-- Sebuah Komentar pada Dokumen HTML -->
Headings Tag Heading digunakan untuk membuat sebuah teks dalam format header. Tag Heading memiliki berbagai ukuran. Tag Heading yang sering digunakan h1 s/d h6. <h1></h1> <h2></h2> … <h6></h6> Contoh : <h1>Halo ini Headings</h1>
Paragraphs Tag Paragraph digunakan untuk membuat sebuah paragraph pada dokumen HTML. Menggunakan Tag pembuka <p> dan tag penutup </p> <p></p> Contoh : <p>Halo selamat pagi, ini paragraf berita yang berada di dalam tag p</p>
<a href=“halaman html tujuan”> label/teks pada tautan </a> Links Tag Link digunakan untuk membuat sebuah tautan (link) pada halaman lain. Standart Tag Links adalah sbb : <a href=“halaman html tujuan”> label/teks pada tautan </a> Contoh : <a href=“html_links2.html”> Klik Bro </a> <a href=“html_links2.html” target=“_blank”> Klik Lagi Lah Bro </a>
<img href=“path gambar”/> Images Tag Image digunakan untuk menampilkan sebuah gambar pada halaman HTML. Standart Tag Image adalah sbb : <img href=“path gambar”/> Contoh : <img src=“gambar/mukeloe.png”/> <img src=“gambar/mukeloe.png” width=“100px”/> <img src=“gambar/mukeloe.png” height=“150px”/> <img src=“gambar/mukeloe.png” width=“100px” height=“150px”/>
Formatting (1) Bold <b> Tebal </b> Strong <strong> Kuat Bro </strong> Italic <i> Miring Bro </i> Small <small> Nape Punya Ane Kecil Gini Bro </small>
Formatting (2) Marked <mark> Eh ditandai </mark> Deleted <del> Busyet ane Dicoret </del> Subscripted Hihihi Ente <sub> Pendek </sub> Superscripted Wow Ente kok <sup> Tinggi </sup>
Formatting (3) Blockquote <blockquote> Eh Geser Bareng </blockquote>
Tabel (1) <table border="1"> <tr> <td>Halo</td> <td>Ini</td> <td>Tabel</td> </tr> <td>Buatan</td> <td>Saya</td> <td>Sendiri</td> </table>
Tabel (2) <table border="1" width="200px"> <tr> <th>No</th> <th>Nama</th> </tr> <td>1</td> <td>Nama Mahasiswa</td> </table> *Perhatikan Pengaruh Tag <th> disamping
Tabel (3) <table border="1" cellpadding="40"> <tr> <td>Cell Padding</td> </tr> </table> *Cellpadding akan memberi jarak antara batas sebuah cell (border) dengan tulisan/teks yang ada di dalamnya
Tabel (4) <table border="1" cellspacing="20"> <tr> <td>Cell Spacing</td> </tr> </table> *Cellspacing akan memberi jarak antar cell yang seolah-olah menambah ketebalan dari border sebuah tabel
Tabel (5) <table border="1" width="200"> <tr> <td colspan="2">Ini Colspan</td> </tr> <td>Kolom 1</td> <td>Kolom 2</td> </table> *Colspan akan menggabungkan dua buah kolom dalam satu baris
Tabel (6) <table border="1" width="200"> <tr> <td rowspan="2">Ini Rowspan</td> <td>Baris 1 Kolom 2</td> </tr> <td>Baris 2 Kolom 2</td> </table> *Rowspan akan menggabungkan dua buah baris dalam satu kolom
Tabel (7) <table border="1" width="200"> <caption><b>Data Mahasiswa</b></caption> <tr> <th>No</th> <th>Nama</th> </tr> <td>1</td> <td>Nama Saya</td> </table> *Caption akan menampilkan Judul pada Sebuah Tabel
Tabel (8) <table border="1" width="200"> <tr> <td rowspan="2" valign="top">Ini Rowspan yang di valign</td> <td>Baris 1 Kolom 2</td> </tr> <td>Baris 2 Kolom 2</td> </table> *Valign akan menentukan posisi sebuah teks pada kolom. Nilai pada Attribute Valign adalah “top”, “middle” dan “bottom”
Bullet and Number (1) Bullet atau unorder list adalah sebuah list yang diawali dengan simbol seperti kotak. Contoh Bullet: <ul> <li> item satu </li> <li> item dua </li> </ul> Akan menghasilkan : Item satu Item dua
Bullet and Number (2) Number atau order list adalah sebuah list yang diawali dengan angka atau huruf. Contoh Bullet: <ol> <li> item satu </li> <li> item dua </li> </ol> Akan menghasilkan : Item satu Item dua