html
2
ELEMEN HTML
Tujuan Instruksional :
- Mahasiswa memahami apa yang dimaksud dengan tag HTML
- Mahasiswa memahami apa yang dimaksud dengan elemen HTML
- Mahasiswa memahami apa yang dimaksud dengan atribut tag HTML
- Tag HTML digunakan untuk menandai elemen HTML
- Tag HTML ditandai dengan penggunaan karakter kurung siku, yaitu < dan >
- Tag HTML umumnya selalu berpasangan, misalnya <b> dan </b>
- Tag pertama adalah tag awal, dan tag kedua adalah tag akhir yang ditandai dengan digunakannya karakter garis miring (/)
- Teks yang berada di antara tag awal dan tag akhir disebut isi elemen
- Tag HTML tidak bersifat “case sensitive”, maksudnya <b> bermakna sama dengan <B>
Perhatikan kembali contoh latihan sebelumnya.
|
<html> <head> <title>Judul Halaman</title> </head> <body> Ini file percobaan HTML. <b>Teks ini tebal.</b> </body> </html> |
|
<b>Teks ini tebal.</b> |
- Elemen HTML dibuka dengan tag awal : <b>
- Isi elemen HTML adalah : Teks ini tebal.
- Elemen HTML ditutup dengan tag akhir : </b>
- Maksud dari tag <b> adalah untuk mendefinisikan bahwa isi elemen HTML tersebut ditampilkan dengan huruf tebal.
|
<body> Ini file percobaan HTML. <b>Teks ini tebal.</b> </body> |
- Elemen HTML dibuka dengan tag awal : <body>
- Dan ditutup dengan tag akhir : </body>
- Isi elemen HTML adalah : Ini file percobaan HTML. <b>Teks ini tebal. </b>
- Maksud dari tag <body> adalah untuk mendefinisikan bahwa elemen HTML ini adalah isi dari dokumen HTML tersebut.
Tag HTML dapat memiliki atribut.
- Atribut ini berisi informasi tambahan mengenai elemen HTML.
- Atribut selalu ditulis dengan format nama atribut=”nilai atribut”
- Atribut selalu ditulis pada tag awal sebuah elemen HTML
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
|
<html> <head> <title>Judul Halaman</title> </head> <body bgcolor="red"> Ini file percobaan HTML. <b>Teks ini tebal.</b> </body> </html> |
- Simpan file di My Document sebagai “coba2-1.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik “coba2-1.html” pada bagian File name, klik tombol Save.
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba2-1.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba2-1.html), lalu klik OK.
- Tag <body> digunakan untuk mendefinisikan isi dari dokumen HTML. Tambahan atribut “bgcolor” seperti pada contoh di atas akan memerintahkan web browser untuk menampilkan warna latar belakang pada halaman web.
- Sehingga tag <body bgcolor=”red”> akan menampilkan halaman web dengan latar belakang berwarna merah.
- Secara default web browser akan menampilkan halaman web dengan warna putih sebagai latar belakang.
3
TAG HTML DASAR
Tujuan Instruksional :
- Mahasiswa mengetahui tag-tag dasar pada HTML
- Mahasiswa dapat memformat dokumen HTML dengan tag-tag HTML dasar
- Mahasiswa dapat menyisipkan baris komentar pada dokumen HTML
Tag HTML yang penting adalah tag yang mendefinisikan heading, paragraf, dan line breaks.
Heading
Heading ditandai dengan penggunaan tag <h1> sampai <h6>. Tag <h1> akan menampilkan heading paling besar, sedangkan tag <h6> akan menampilkan heading terkecil.
|
<h1>Ini adalah heading 1</h1> <h2>Ini adalah heading 2</h2> <h3>Ini adalah heading 3</h3> <h4>Ini adalah heading 4</h4> <h5>Ini adalah heading 5</h5> <h6>Ini adalah heading 6</h6> |
Paragraf ditandai dengan digunakannya tag <p>.
|
<p>Ini adalah paragraf</p> <p>Ini adalah paragraf lainnya</p> |
Tag <br> digunakan untuk menandai perpindahan baris (line breaks), yaitu bila ingin berpindah ke baris baru tetapi tidak ingin membuat paragraf baru.
| <p>Ini <br> adalah contoh para<br>graf dengan tag line breaks</p> |
Tag komentar digunakan untuk menyisipkan komentar pada kode HTML. Baris komentar akan diabaikan oleh web browser dan tidak akan ditampilkan. Baris komentar digunakan untuk memudahkan menjelaskan dan menelusuri kode HTML yang dibuat bila suatu saat ingin diedit kembali.
Penulisan baris komentar adalah sebagai berikut :
| <!– Ini adalah baris komentar –> |
HTML menyediakan tag khusus untuk membuat garis horizontal, yaitu dengan menggunakan tag <hr>. Garis horizontal dapat digunakan untuk memisahkan bagian-bagian pada halaman HTML yang ingin ditampilkan.
Penulisan garis horizontal adalah sebagai berikut :
| Garis horizontal memisahkan bagian halaman di atas ini <hr> dengan bagian halaman yang ada di bawah |
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
| <html> <body> Isi dari elemen body ditampilkan di web browser. </body> </html> |
- Simpan file di My Document sebagai “coba3-1.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik “coba3-1.html” pada bagian File name, klik tombol Save.
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba3-1.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba3-1.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana teks yang terdapat di dalam elemen body ditampilkan pada web browser.
8 Latihan 2 : Paragraf Sederhana
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
| <html> <body> <p>Ini adalah paragraf.</p> <p>Ini adalah paragraf.</p> <p>Elemen paragraf ditandai dengan tag p.</p> </body> </html> |
- Simpan file sebagai “coba3-2.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba3-2.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba3-2.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana teks yang terdapat di dalam elemen paragraf ditampilkan pada web browser.
8 Latihan 3 : Heading Sederhana
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
| <html> <body> <h1>Ini adalah judul</h1> <p>Ini adalah isi.</p> </body> </html> |
- Simpan file sebagai “coba3-3.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba3-3.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba3-3.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana teks yang terdapat di dalam elemen heading ditampilkan pada web browser. Heading akan ditulis dengan huruf besar dan tebal, sementara paragraf akan ditampilkan seperti teks biasa.
8 Latihan 4 : Baris Komentar dan Garis Horizontal
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
| <html> <body> <!– Baris komentar ini tidak akan ditampilkan di web browser –> <p>Ini adalah contoh penggunaan baris horizontal :</p> <hr> <p>Ini adalah baris paragraf.</p> <hr> <p>Ini adalah baris paragraf.</p> </body> </html> |
- Simpan file sebagai “coba3-4.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba3-4.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba3-4.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana baris komentar yang ada pada kode HTML tidak ditampilkan di web browser. Garis horizontal yang ditampilkan berfungsi sebagai pembatas antara baris-baris paragraf pada halaman HTML.
4 Ringkasan Tag HTML Dasar
| Tag | Keterangan |
| <html> | Menjelaskan dokumen HTML |
| <body> | Menjelaskan isi dokumen HTML |
| <h1> s/d <h6> | Menjelaskan heading1 s/d heading6 |
| <p> | Menjelaskan paragraf |
| <br> | Menjelaskan pergantian baris |
| <hr> | Menjelaskan garis horizontal |
| <!–> | Menjelaskan baris komentar |
4
FORMAT TEKS HTML
Tujuan Instruksional :
- Mahasiswa mengetahui tag-tag untuk format teks pada HTML
- Mahasiswa dapat membuat teks kutipan pada dokumen HTML
- Mahasiswa dapat membuat daftar/list pada dokumen HTML
Ada beberapa tag HTML yang digunakan untuk mengatur format teks, seperti misalnya teks miring dan teks tebal. Latihan-latihan berikut akan menjelaskan format teks yang tersedia pada kode HTML.
8 Latihan 1 : Format Teks
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
|
<html> <body><b>Teks ini tebal</b> <br> <strong>Teks ini juga tebal</strong> <br> <big>Teks ini besar</big> <br> <small>Teks ini kecil</small> <br> <u>Teks ini bergaris bawah</u> <br> <em>Teks ini mendapat penekanan</em> <br> <i>Teks ini miring</i> <br> Teks ini berisi <sub>subscript</sub> <br> Teks ini berisi <sup>superscript</sup> </body> </html> |
- Simpan file di My Document sebagai “coba4-1.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik “coba4-1.html” pada bagian File name, klik tombol Save.
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-1.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-1.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana teks yang terdapat di dalam elemen body ditampilkan pada web browser sesuai format tag HTML yang diberikan :
<b></b> dan <strong></strong> membuat format teks tebal
<big></big> membuat format teks besar
<small></small> membuat format teks kecil
<u></u> membuat teks bergaris bawah
<em></em> membuat format teks penekanan
<i></i> membuat format teks miring
<sub></sub> membuat format teks subscript (huruf kecil di bawah)
<sup></sup> membuat format teks superscript (huruf kecil di atas)
8 Latihan 2 : Teks Preformat
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
|
<html> <body><pre> Ini adalah Teks yang tidak diformat. Hal ini membuat baik spasi dan pergantian baris tidak berubah. </pre> <p>Preformat digunakan untuk penulisan kode program:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> |
- Simpan file sebagai “coba4-2.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-2.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-2.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana teks yang berada di dalam tag <pre></pre> tidak akan diformat oleh web browser, dan akan ditampilkan apa adanya sesuai dengan apa yang dituliskan.
Spasi dan pergantian baris akan diabaikan oleh web browser. Seperti pada contoh, spasi dan pergantian baris akan ditampilkan persis seperti yang dituliskan pada kode HTML.
8 Latihan 3 : Teks Kutipan
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
|
<html> <body>Ini adalah teks kutipan panjang: <blockquote>Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang.</blockquote> Ini adalah teks kutipan pendek: <q>Ini adalah teks kutipan pendek</q> </body> </html> |
- Simpan file sebagai “coba4-3.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-3.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-3.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana teks kutipan ditampilkan pada web browser. Ada dua format teks kutipan dalam HTML :
· Teks kutipan panjang dengan tag <blockquote></blockquote>
· Teks kutipan pendek dengan tag <q></q>
Dengan tag <blockquote> pergantian baris dan batas margin (indent) untuk teks akan secara otomatis diformat oleh web browser. Sedangkan untuk teks kutipan pendek dengan tag <q> teks tidak mengalami format apapun.
8 Latihan 4 : Teks List
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
|
<html> <body><ul>Ini adalah contoh unordered list <li> apple <li> banana <li> citrus </ul> <ol>Ini adalah contoh ordered list <li> satu <li> dua <li> tiga </ol> </body> </html> |
- Simpan file sebagai “coba4-4.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-4.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-4.html), lalu klik OK.
Contoh latihan di atas mendemonstrasikan bagaimana membuat list (daftar) teks pada HTML. Ada dua jenis list yang dapat dibuat :
· Unordered list (list menggunakan bullet) dengan tag <ul>
· Ordered list (list menggunakan angka) dengan tag <ol>
Kemudian untuk masing-masing teks list digunakan tag <li>
4 Ringkasan Format Teks HTML
|
Tag |
Keterangan |
| <b> | Menjelaskan teks tebal |
| <strong> | Menjelaskan teks tebal |
| <big> | Menjelaskan teks besar |
| <small> | Menjelaskan teks kecil |
| <u> | Menjelaskan teks bergaris bawah |
| <em> | Menjelaskan teks penekanan |
| <i> | Menjelaskan teks miring |
| <strong> | Menjelaskan teks tebal |
| <sub> | Menjelaskan teks kecil di bawah |
| <sup> | Menjelaskan teks kecil di atas |
| <blockquote> | Menjelaskan teks kutipan panjang |
| <q> | Menjelaskan teks kutipan pendek |
| <ul> | Menjelaskan list teks unordered |
| <ol> | Menjelaskan list teks ordered |
| <li> | Menjelaskan list teks |
