Daftar Isi
Dokumen HTML (Hyper TextMarkup Language)
Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digaris bawahi,dll.
HTML singkatan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser.
Ada dua cara untuk membuat web page, dengan HTML editor atau editor text biasa (misal : notepad). Untuk latihan buku ini kita menggunakan Macromedia Dreamweaver.
Penamaan Dokumen
Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ".htm" atau ".html"
Definisi Elemen
Dokumen HTML disusun elemen-elemen atau komponen dasar pembentuk HTML. Contoh dari elemen dokumen HTML adalah : head, body, table, paragraf, list.
Definisi Tag
Tag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar.
Tag umumnya berpasangan, sebagai contoh <h1> Dengan </h1>. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <namatag> - </namatag>
Elemen HTML yang diperlukan
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>,<head>, dan <body>. Setiap dokumen terdiri atas tag head dan body. Elemen Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser.
Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :
<html> <head> -- Selamat Datang di Kuliah Pemrograman Web -- </head> <body> -- Mari kita belajar Pemrograman Web dengan HTML -- </body> </html>
Setiap dokumen html harus diawali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html.
Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir. Section ini berisi informasi tentang dokumen HTML, misalnya informasi judul html yang ditandai dengan tag <title> dan diakhiri dengan tag </title>.
Section body ditandai dengan tag <body> dan diakhiri dengan tag </body>. Section body merupakan isi dokumen yang akan ditampilkan pada browser.
Contoh 1 : .html
<html> <head> <title>BeIajar Pemrograman Web</title> </head> <body> Menggunakan bahasa HTML </body> </html>
Penjelasan Contoh
- Tag pertama pada dokumen html adalah <html>. Tag ini memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah </html>. Tag ini memberi tahu browser bahwa ini adalah akhir dari dokumen HTML.
- Teks antara <head> dan </head> adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada diantara <body> dan </body> yang akan ditampilkan pada browser.
- Teks diantara <title> dan </title> adalah judul dokumen yang akan ditampilakn pada window caption.
Penggunaan Tag
- Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.
- Tag HTML secara normal selalu berpasangan seperti <h1> dengan </h1>
- Tag HTML tidak 'case sensitive', berarti <H1> sama dengan <h1>
Atribut Tag
Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.
Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih.
Tag berikut mempunyai atribut : <body bgcolor=”red">. Tag <body> ini mempunyai atribut bgcolor dengan nilai ”reď. Sehingga background akan menampilkan warna merah.
1. Tag HTML
Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen HTML.Tag <html> sebagai pembuka dokumen HTML dan tag </html> sebagai penutup dokumen HTML.
Contoh:
<html> ........................ </html>
2. Tag Head
Merupakan tag setelah <html> untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser.
Contoh:
<head> <title>BeIajar Pemrograman Web</title> </head>
3. Title
Merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser.
Contoh:
<title>BeIajar Pemrograman Web Dengan HTML</titIe>
Output:
4. Body
Merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser.
Contoh:
<html> <head> <title>BeIajar Pemrograman Web</title> </head> <body> Mari kita belajar Pemrograman Web dengan HTML </body> </html>
Output:
5. Paragraf
Setiap paragraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak didefinisikan mempunyai tag akhir.
Setiap paragraf harus dimulai dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>.
Contoh 1:
<html> <head> <title>Tag Paragraf</title> </head> <body> <p>berikut ini adalah paragraf 1</p> <p>berikut ini adalah paragraf 2</p> <p>berikut ini adalah paragraf 3</p> </body> </html>
Output:
Contoh 2:
<html> <head> <title>Paragraf</title> </head> <body> <p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke-1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke public.</p> <p>Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah Amerika</p> </body> </html>
Output:
6. Line Break
Kita dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.
Contoh:
<html> <head> <title>Pindah Baris</title> </head> <body> Baris ini adalah baris ke 1<br> Baris ini adalah baris ke 2<br> Baris ini adalah baris ke 3<br> Baris ini adalah baris ke 4<br> Baris ini adalah baris ke 5<br> </body> </html>
Output:
7. Heading
Tag heading akan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan.
Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar.
Contoh:
<html> <head> <title>Heading</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
Output:
8. Garis Pembatas
Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr>
| No | Atribut | Keterangan |
|---|---|---|
| 1 | Align | Menentukan letak garis : center,left atau right |
| 2 | Color | Menentukan warna garis |
| 3 | Size | Menentukan ukuran garis |
| 4 | Width | Menentukan tebal garis |
<html> <head> <title>Horizontal Rule</title> </head> <body> <p align="center">Paragraf pertama</p> <hr align="center" color="#0000FF" size="3" width="90%"> <p align="center">Paragraf kedua</p> </body> </html>
Output:
9. Komentar
Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag:
<!-- sebagai awal dan tag --> sebagai akhir komentar.
Contoh:
<html> <head> <title>Horizontal Rule</title> </head> <body> <!--Komentar tidak ditampilkan pada browser--> <p>Tulisan akan ditampilkan pada browser</p> </body> </html>
Toolbar Dreamweaver untuk dasar HTML
Macromedia Dreamweaver sebagai salah satu aplikasi untuk membuat dan mengembangkan web menyediakan toolbar untuk semua tag dasar HTML. Perhatikan gambar 1 dan gambar 2 yang menunjukan toolbar untuk dasar HTML.
 |
| Gambar 1 Toolbar Text |
- h1 : heading 1
- h2 : heading 2
- h3 : heading 3
- br : line break
- p(dibalik): paragraf
 |
| Gambar 2 Toolbar tab Comment |
Pemformatan Teks
- Menebalkan huruf (bold)
- Memiringkan huruf (italic)
- Digaris bawahi
- Mengecilkan huruf
- Superscript
- Subscript
<html> <head> <title>Format Teks</title> </head> <body> <p><b>TuIisan ini ditebalkan (bold) </b></p> <p><strong>TuIisan ini ditebalkan (strong) </strong> </p> <p><em>Tu1isan ini miring (emphasize) </em></p> <p><big>Tu1isan ini besar (big) </big></p> <p><i>Tu1isan ini miring (italic) </i></p> <p>Tu1isan ini <sub>subscript</sub> </p> <p>TuIisan ini <sup>superscript</sup></p> </body> </html>
Output:
Teks Preformat
Tag <pre> dan </pre> dapat kita gunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks.
Contoh: pre.html
<html> <head> <title>Tag Preformatted</title> </head> <body> <pre> This section provides a brief overview of the menus in Dreamweaver. The File menu and Edit menu contain the standard menu items for File and Edit. menus, such as New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo </pre> <pre> Ini adalah preformatted text. Menampilkan spasi Dan line break apa adanya </pre> <p>Tag PRE cocok digunakan untuk menarnpilkan kode bahasa pemrograman komputer :</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>
Output:
Quotation
Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. Kebanyakan browser umumnya menggunakan margin untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya.
Contoh: quotation.html
<html> <head> <title>quotation</title> </head> <body> tulisan ini BUKAN quotation <blockquote> tulisan ini adalah quotation <br> tulisan ini adalah quotation <br> tulisan ini adalah quotation <br> </blockquote> </body> </html>
Output:
Tag-tag Pemformatan
| No | Tag Awal | Keterangan |
|---|---|---|
| 1 | <b > | Mendefinisikan teks yang ditebalkan |
| 2 | <big > | Mendefinisikan teks yang besar ukurannya |
| 3 | <em> | Mendefinisikan teks yang ditekankan |
| 4 | <i> | Mendefinisikan teks yang dimirinkan - italic |
| 5 | <small> | Mendefinisikan teks yang dikecilkan ukurannya |
| 6 | <strong> | Mendefinisikan teks yan ditebalkan |
| 7 | <sub> | Mendefinisikan teks yang dijadikan subscript |
| 8 | <sup> | Mendefinisikan teks yang superscript |
| 9 | <pre> | Mendefinisikan teks reformatted |
| 10 | <blockquote> | Mendefinisikan quotation yang panjang |
Latihan
1. Membuat garis horizontal <hr>
Source code
<html> <head> <title>Atribut horizontal</title> </head> <body> <h1>KEBUN PESONA</h1> <hr size = "10" noshade> Jl. Solo Km 14<br> Surabaya<br> Indonesia<br> </hr> </body> </html>
Output:
2. Menggunakan tag <div>
Untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama
Source code
<html> <head> <title>Tag DIV</title> </head> <body> <div align = "right"> <h1><u>TK UTY</u></h1> <h2>Jl. Siliwangi</h2> <h2>Yogyakarta</h2> </div> <hr> </body> </html>
Output:
3. Penggunaan sintaks HTML, bagian-bagian HTML, penggunaan komentar dan tag <br> untuk ganti baris
Source code
<html> <head> <title>Latihan HTML</title> </head> <!-- Ini merupakan suatu komentar --> <body> Selamat Belajar HTML<br> Semoga Sukses ! </body> </html>
Output:
4. Penggunaan <pre>
Untuk menmpilkan teks apa adanya
Source code:
<html> <head> <title>Praformat</title> </head> <body> <h2>Daftar Harga keladi:</h2> <pre> Red Flash........35.000 Red Fire.........60.000 Fannie Munson....60.000 </pre> Harga sewaktu-waktu bisa berubah. </body> </html>
Output:
5. Pengaturan Font: Face (untuk jenis font), Size (untuk ukuran font), Color (untuk warna)
Source code
<html> <head> <title>Jenis Font</title> </head> <body> Normal: 012345ABCD<br> <font color="blue" face="arial" size="5">Arial: 012345ABCD</font> <br> <font color="green" face="courier" size="5">Courier: 012345ABCD</font> <br> </body> </html>
Output:
6. Pengaturan warna background: bgcolor
Source code
<html> <head> <title>Warna - Bagian 2</title> </head> <body bgcolor="black" text="gray"> Normal<br> <font Color="blue">Warna Biru</font><br> <font Color="green">Warna Hijau</font><br> <font Color="red">Warna Merahu</font><br> <font Color="yellow">Warna Kuning</font><br> </body> </html>
Output:
Tugas
- Buatlah tulisan menggunakan tag <p> untuk membuat paragraph; tag judul <h1> s/d <h6> untuk pembesaran huruf.
- Cobalah menghilangkan tag <pre> pada Latihan 1 dan lihat apa bedanya.