Dasar-Dasar HTML dan Format Pada Dokumen HTML
Modul Makalah - Dasar-Dasar HTML dan Format Pada Dokumen HTML - HTML merupakan singkatan dari HyperText MarkUp Language. HTML dapat dibuat pada sembarang editor, meski ada software-software khusus yang dimaksudkan untuk memudahkan pekerjaan. Adapun editor-editor yang dimaksud adalah NotePad, WordPad, MS Word, Excel dan lain-lain.
Pembuatan teks HTML hampir sama dengan pembuatan teks-teks lainnya seperti pada MS Word. Pemberian format pada suatu teks dalam sebuah dokumen akan bisa langsung terlihat hasilnya. Contohnya, jika Anda ingin membuat sebuah dokumen pada MS Word dan memformatnya sehingga salah satu kata/kalimat ingin diberikan format huruf tebal (Bold), miring (Italic), atau Garis bawah pada teks (UnderLine), maka hasilnya segera dapat dilihat pada dokumen tersebut. Berbeda dengan dokumen HTML, format-format yang diberikan pada suatu teks tidak bisa dilihat langsung hasilnya, tetapi harus menggunakan program khusus, yaitu “Web Browser” atau “Browser”
Perbedaan yang lebih mendasar terhadap dokumen-dokumen lainnya yaitu, dokumen HTML bisa mengandung Link/hubungan kebagian lain dari sebuah dokumen atau dokumen lain dari situs Web, baik dalam server Web yang dama ataupun ke Server Web lainnya. Ciri adanya unsur link ini pada sebuah dokumen HTML, biasanya suatu teks ditandai dengan warna biru dan garis bawah. Apabila pointer mouse diarahkan ke link tersebut, maka pointer mouse akan berubah menjadi gambar telapak tangan.
1.2. Persiapan Awal
Beberapa hal yang perlu dipersiapkan sebelum mulai membuat dokumen HTML, diantaranya adalah persiapan software editor dan software Web Browser. Editor HTML yang akan digunakan pada buku ini adalah editor NotePad (walaupun dapat digunakan editor apapun). Sedangkan Web Browser yang digunakan adalah Mozilla Firefox dan Internet Explorer (IE).
Ada beberapa tips khusus dalam penggunaan software-software di atas, seperti misalnya dalam penggunaan editor HTML sebaiknya gunakan editor yang tidak terlalu banyak menyita memory komputer, Dan yang paling terpenting adalah software tersebut compatibel dengan sistem komputer yang dimiliki.
1.3. Tag-tag Dasar HTML
Bentuk umum penulisan dokumen HTML adalah sebagai berikut :
Berikut ini adalah penjelasan kode pada bentuk umum penulisan dokumen HTML :
1.4. Aturan-aturan Dasar HTML
Ada beberapa aturan-aturan dasar yang berlaku dalam penulisan tag-tag pada HTML :
Setiap tag HTML harus diapit oleh tanda lebih kecil dan lebih besar <……..>
Tag yang dituliskan dapat berupa huruf kecil ataupun huruf kapital. Penulisan huruf kecil atau kapital akan memberikan hasil yang sama. Meskipun demikian, sebaiknya penulisan tag dituliskan dalam huruf kapital.
Hampir semua tag adalah tag yang berpasangan. Ciri dari tag yang berpasangan adalah selalu mempunyai tag awal dan tag akhir. Tag awal ditandai dengan <…..> dan tag akhir diikuti dengan tag slash-nya </…..>.
Contoh tag berpasangan :
Browser akan mengabaikan spasi atau baris baru pada teks yang diapit oleh tag. Contoh di bawah ini akan menampilkan hasil yang sama pada browser :
File dokumen HTML harus disimpan sebagai file teks murni, dengan menggunakan ekstensi html atau htm.
1.5. Struktur Dasar Dokumen HTML
Struktur dasar dokumen HTML seperti yang telah dijelaskan pada sub-bab 1.3, contohnya adalah :
FILE : coba.htm
1.6. Menyusun Heading dan Sub-Heading
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :
Nilai x = 1, 2, 3, 4, 5, 6
FILE : heading.htm
1.6.1. Atribut pada Heading
Heading mempunyai atribut ALIGN dengan value/nilainya adalah center, left, right. Contoh beriut ini adalah format penulisan atribut Align pada tag <Hx> :
FILE : athead.htm
1.7. Membuat Horizontal Rule
Horizontal Rule atau biasa yang disebut dengan garis horisontal, sering dipakai dalam pembuatan disain website. Tag yang digunakan untuk membuat garis horisontal adalah tag <HR>. Tag ini bukanlah merupakan tag yan berpasangan, oleh sebab itu tag ini tidak perlu diakhiri dengan tag slash-nya </HR>. Panjang garis horisontal yang terbentuk adalah panjangnya sama dengan panjang jendela browsernya. Kendati demikian, tag <HR> mempunyai beberapa atribut yang dapat menentukan panjang garis, lebar garis, warna garis, posisi garis, dan efek bayang-bayang tiga dimensi.
FILE : hr.htm
1.7.1. Atribut pada <HR>
Atribut yang terdapat pada <HR> adalah width, length, dan color. Penggunaan atribut-atribut pada <HR> adalah sebagai berikut :
FILE : athr.htm
1.8. Fungsi Break
Line Break <BR> adalah tag yang berguna untuk membuat baris baru pada sebuah dokumen HTML. Tag ini secara otomatis akan membuat baris baru tanpa memberi baris kosong dan akan memotong sebarisan teks pada tempat dimana tag <BR> tersebut diletakkan/disisipkan.
FILE : br.htm
1.9. FORMAT TEKS
Format teks pada dokumen HTML dapat menampilkan berbagai jenis font, ukuran font, dan warna font pada layar. Atribut-atribut yang digunakan pada <FONT> adalah SIZE, FACE, dan COLOR. Tag <FONT> ini merupakan tag berpasangan, oleh sebab itu harus diakhiri dengan tag slash-nya </FONT>.
Ukuran font (SIZE) dapat diperbesar dan diperkecil dari nilai 1 sampai dengan 7 (default font adalah 3). Sedangkan untuk jenis huruf digunakan atribut FACE yang mempunyai nilai atau jenis huruf yang lazim pada pengolah kata (Misalnya pada MS. WORD) yaitu Comic Sans MS, Arial, Courier, dll). Penulisan jenis font ini harus sesuai dengan font yang sudah lazim digunakan.
Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai pada atribut tersebut. Ada dua bentuk pemberian nilai warna yang bisa dipakai pada atribut COLOR ini, yaitu yang pertama dengan menggunakan nama warna itu sendiri, contohnya blue, red, dan green. Sedangkan yang kedua adalah dengan menggunakan kode RGB suatu warna seperti, #000000 = Black, #0000FF.
Selain itu, format teks dapat dilakukan secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk huruf tebal (bold) menggunakan <B>teks</B>, miring (italic) menggunakan <I>teks</I>, digaris bawahi (underline) menggunakan <U>teks</U>, subscript menggunakan <SUB>teks</SUB>, superscript menggunakan <SUP>teks</SUP>, dan semacamnya.
Beberapa Contoh Warna :
FILE : font.htm
1.10. Pewarnaan Background
Web site yang dibuat, kurang menarik jika belum disisipkan warna pada latar belakang dari sebuah dokumennya. Pewarnaan pada latar belakang dokumen dapat digunakan atribut pada <BODY>, yaitu atribut BGCOLOR. Adapaun warna yang dapat digunakan bisa dilihat pada tabel 1.1 di atas. Pembuatan warna background haruslah disesuaikan dengan warna teksnya. Jangan sampai Web site yang dibuat, nantinya akan menampilkan tulisan-tulisan yang tidak dapat dibaca.
FILE : warna.htm
Daftar Pustaka
Pembuatan teks HTML hampir sama dengan pembuatan teks-teks lainnya seperti pada MS Word. Pemberian format pada suatu teks dalam sebuah dokumen akan bisa langsung terlihat hasilnya. Contohnya, jika Anda ingin membuat sebuah dokumen pada MS Word dan memformatnya sehingga salah satu kata/kalimat ingin diberikan format huruf tebal (Bold), miring (Italic), atau Garis bawah pada teks (UnderLine), maka hasilnya segera dapat dilihat pada dokumen tersebut. Berbeda dengan dokumen HTML, format-format yang diberikan pada suatu teks tidak bisa dilihat langsung hasilnya, tetapi harus menggunakan program khusus, yaitu “Web Browser” atau “Browser”
 |
| image source: |
baca juga: Memahami Dokumen HTML Dalam Pembuatan Website
Perbedaan yang lebih mendasar terhadap dokumen-dokumen lainnya yaitu, dokumen HTML bisa mengandung Link/hubungan kebagian lain dari sebuah dokumen atau dokumen lain dari situs Web, baik dalam server Web yang dama ataupun ke Server Web lainnya. Ciri adanya unsur link ini pada sebuah dokumen HTML, biasanya suatu teks ditandai dengan warna biru dan garis bawah. Apabila pointer mouse diarahkan ke link tersebut, maka pointer mouse akan berubah menjadi gambar telapak tangan.
1.2. Persiapan Awal
Beberapa hal yang perlu dipersiapkan sebelum mulai membuat dokumen HTML, diantaranya adalah persiapan software editor dan software Web Browser. Editor HTML yang akan digunakan pada buku ini adalah editor NotePad (walaupun dapat digunakan editor apapun). Sedangkan Web Browser yang digunakan adalah Mozilla Firefox dan Internet Explorer (IE).
Ada beberapa tips khusus dalam penggunaan software-software di atas, seperti misalnya dalam penggunaan editor HTML sebaiknya gunakan editor yang tidak terlalu banyak menyita memory komputer, Dan yang paling terpenting adalah software tersebut compatibel dengan sistem komputer yang dimiliki.
1.3. Tag-tag Dasar HTML
Bentuk umum penulisan dokumen HTML adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> Teks Judul </TITLE> </HEAD>
<BODY> Isi Dokumen
</BODY>
</HTML>
Berikut ini adalah penjelasan kode pada bentuk umum penulisan dokumen HTML :
- Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menterjemahkan sebagai dokumen HTML.
- Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas kepala dan badan
- Bagian Kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>. Pada Bagian ini, bisa ditentukan judul dokumen HTML yang dituliskan dengan pasangan <TITLE> dan </TITLE>.
- Bagian badan ditandai dengan <BODY> dan </BODY>. Di dalam bagian inilah dapat dituliskan teks-teks, penyisipan gambar, Link, atau pembuatan tabel.
1.4. Aturan-aturan Dasar HTML
Ada beberapa aturan-aturan dasar yang berlaku dalam penulisan tag-tag pada HTML :
Setiap tag HTML harus diapit oleh tanda lebih kecil dan lebih besar <……..>
Tag yang dituliskan dapat berupa huruf kecil ataupun huruf kapital. Penulisan huruf kecil atau kapital akan memberikan hasil yang sama. Meskipun demikian, sebaiknya penulisan tag dituliskan dalam huruf kapital.
Hampir semua tag adalah tag yang berpasangan. Ciri dari tag yang berpasangan adalah selalu mempunyai tag awal dan tag akhir. Tag awal ditandai dengan <…..> dan tag akhir diikuti dengan tag slash-nya </…..>.
Contoh tag berpasangan :
<HTML>………</HTML>
<BODY>………</BODY>
<HEAD>………</HEAD>
Browser akan mengabaikan spasi atau baris baru pada teks yang diapit oleh tag. Contoh di bawah ini akan menampilkan hasil yang sama pada browser :
<BODY> Isi dokumen </BODY>atau
<BODY>
Isi dokumen
</BODY>
File dokumen HTML harus disimpan sebagai file teks murni, dengan menggunakan ekstensi html atau htm.
1.5. Struktur Dasar Dokumen HTML
Struktur dasar dokumen HTML seperti yang telah dijelaskan pada sub-bab 1.3, contohnya adalah :
FILE : coba.htm
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
Selamat Datang
</BODY>
</HTML>
 |
| Gambar 1.1 Hasil coba.htm |
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :
<Hx>……………</Hx>dimana :
Nilai x = 1, 2, 3, 4, 5, 6
FILE : heading.htm
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1>
<H2>Belajar HTML</H2>
<H3>Belajar HTML</H3>
<H4>Belajar HTML</H4>
<H5>Belajar HTML</H5>
<H6>Belajar HTML</H6>
</BODY>
</HTML>
 |
| Gambar 1.2 Hasil heading.htm |
1.6.1. Atribut pada Heading
Heading mempunyai atribut ALIGN dengan value/nilainya adalah center, left, right. Contoh beriut ini adalah format penulisan atribut Align pada tag <Hx> :
<Hx ALIGN=”[left, center, right]”> Teks Judul <Hx>Dimana :
- Left : Untuk mengatur teks rata kiri
- Center : Untuk mengatur teks rata tengah
- Right : Untuk mengatur teks rata kanan
FILE : athead.htm
<HTML>
<HEAD>
<TITLE> Membuat Atribut Judul </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Belajar HTML</H1>
<H2 ALIGN="right">Belajar HTML</H2>
<H3 ALIGN="left">Belajar HTML</H3>
<H4 ALIGN="center">Belajar HTML</H4>
<H5 ALIGN="right">Belajar HTML</H5>
<H6 ALIGN="left">Belajar HTML</H6>
</BODY>
</HTML>
 |
| Gambar 1.3 Hasil athead.htm |
Horizontal Rule atau biasa yang disebut dengan garis horisontal, sering dipakai dalam pembuatan disain website. Tag yang digunakan untuk membuat garis horisontal adalah tag <HR>. Tag ini bukanlah merupakan tag yan berpasangan, oleh sebab itu tag ini tidak perlu diakhiri dengan tag slash-nya </HR>. Panjang garis horisontal yang terbentuk adalah panjangnya sama dengan panjang jendela browsernya. Kendati demikian, tag <HR> mempunyai beberapa atribut yang dapat menentukan panjang garis, lebar garis, warna garis, posisi garis, dan efek bayang-bayang tiga dimensi.
FILE : hr.htm
<HTML>
<HEAD>
<TITLE> Membuat horozontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal
<HR>
</BODY>
</HTML>
 |
| Gambar 1.4 Hasil hr.htm |
Atribut yang terdapat pada <HR> adalah width, length, dan color. Penggunaan atribut-atribut pada <HR> adalah sebagai berikut :
<HR ALIGN=”a” WIDTH=”x” SIZE=”y” COLOR = “z” NOSHADE>Dimana :
- a = posisi garis (left, center, right)
- x = panjang garis (satuan pixel)
- y = tinggi garis (satuan pixel)
- z = warna garis
- NOSHADE = Garis tampil tanpa bayang-bayang tiga dimensi -
FILE : athr.htm
<HTML>
<HEAD>
<TITLE> Membuat atribut horizontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal dengan berbagai atribut<BR>
<HR ALIGN="left" WIDTH="300" SIZE="5" COLOR="blue" NOSHADE>
<HR ALIGN="center" WIDTH="400" SIZE="10" COLOR="green">
<HR ALIGN="right" WIDTH="150" SIZE="5" COLOR="pink" NOSHADE>
</BODY>
</HTML>
 |
| Gambar 1.5 Hasil athr.htm |
Line Break <BR> adalah tag yang berguna untuk membuat baris baru pada sebuah dokumen HTML. Tag ini secara otomatis akan membuat baris baru tanpa memberi baris kosong dan akan memotong sebarisan teks pada tempat dimana tag <BR> tersebut diletakkan/disisipkan.
FILE : br.htm
<HTML>
<HEAD>
<TITLE>
Membuat baris baru </TITLE>
</HEAD>
<BODY>
Bunga Nusa Indah <BR>
Berwarna <BR> Merah
</BODY>
</HTML>
 |
| Gambar 1.6 Hasil br.htm |
Format teks pada dokumen HTML dapat menampilkan berbagai jenis font, ukuran font, dan warna font pada layar. Atribut-atribut yang digunakan pada <FONT> adalah SIZE, FACE, dan COLOR. Tag <FONT> ini merupakan tag berpasangan, oleh sebab itu harus diakhiri dengan tag slash-nya </FONT>.
<FONT SIZE=”x” FACE=”y” COLOR=”z”> teks </FONT>Dimana :
- x = ukuran font (1-7)
- y = jenis font (Comic Sans MS, Arial, Courier, dll)
- z = warna font (red, blue, green)
Ukuran font (SIZE) dapat diperbesar dan diperkecil dari nilai 1 sampai dengan 7 (default font adalah 3). Sedangkan untuk jenis huruf digunakan atribut FACE yang mempunyai nilai atau jenis huruf yang lazim pada pengolah kata (Misalnya pada MS. WORD) yaitu Comic Sans MS, Arial, Courier, dll). Penulisan jenis font ini harus sesuai dengan font yang sudah lazim digunakan.
Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai pada atribut tersebut. Ada dua bentuk pemberian nilai warna yang bisa dipakai pada atribut COLOR ini, yaitu yang pertama dengan menggunakan nama warna itu sendiri, contohnya blue, red, dan green. Sedangkan yang kedua adalah dengan menggunakan kode RGB suatu warna seperti, #000000 = Black, #0000FF.
Selain itu, format teks dapat dilakukan secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk huruf tebal (bold) menggunakan <B>teks</B>, miring (italic) menggunakan <I>teks</I>, digaris bawahi (underline) menggunakan <U>teks</U>, subscript menggunakan <SUB>teks</SUB>, superscript menggunakan <SUP>teks</SUP>, dan semacamnya.
Beberapa Contoh Warna :
| Nama Warna | Heksa | Nama Warna | Heksa |
|---|---|---|---|
| Antiquewhite | FAEBD7 | Gold | FFD700 |
| Aqua | 00FFFF | Gray | 808080 |
| Black | 000000 | Green | 008000 |
| Blue | 0000FF | Greenyellow | ADFF2F |
| Brown | A52A2A | Honeydew | FOFFFO |
| Coral | FF7F50 | Magenta | FF00FF |
| Cyan | 00FFFF | Orange | FFA500 |
| Darkgreen | 006400 | Skyblue | 87CEEB |
FILE : font.htm
<HTML>
<HEAD>
<TITLE> Format Teks </TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" FACE="Courir" COLOR="red">Bunga Nusa Indah </FONT><BR>
Berwarna <BR> Merah
</BODY>
</HTML>
 |
| Gambar 1.7 Hasil font.htm |
Web site yang dibuat, kurang menarik jika belum disisipkan warna pada latar belakang dari sebuah dokumennya. Pewarnaan pada latar belakang dokumen dapat digunakan atribut pada <BODY>, yaitu atribut BGCOLOR. Adapaun warna yang dapat digunakan bisa dilihat pada tabel 1.1 di atas. Pembuatan warna background haruslah disesuaikan dengan warna teksnya. Jangan sampai Web site yang dibuat, nantinya akan menampilkan tulisan-tulisan yang tidak dapat dibaca.
FILE : warna.htm
<HTML>
<HEAD>
<TITLE> Pemberian Warna background</TITLE>
</HEAD>
<BODY BGCOLOR=”honeydew”>
<FONT SIZE="3" FACE="Courier” Color="magenta">Teks dengan warna magenta dan menggunakan warna background honeydew </FONT><BR>
</BODY>
</HTML>
 |
| Gambar 1.8 Hasil warna.htm |
- Alan Denis, Barbara Haley Wixon, David Tagerden, System Analys and Design : an Object – Oriented Approach with UML 2.0, John Willey and Sons, 2005
- Henry C. Lucas Jr., The Analysis, Design and Implementation of Information Systems 4th, McGraw Hill, 1992
- Satzinger, Jackson, Burd, Object-Oriented Analysis and Design with the Unified Process, Course Technology, 2005
- Simon Bennet, Steve McRobb and Ray Farmer, Object-Oriented System Analysis and Design Using UML, McGraw Hill, 2006
- Wendy and Michael Boggs, UML with Rational Rose 2002, Sibex Inc., 2002
Posting Komentar untuk "Dasar-Dasar HTML dan Format Pada Dokumen HTML"
Tata tertib berkomentar
1. Komentar harus relevan dengan konten yang dibaca
2. Gunakan bahasa yang sopan
3. Tidak mengandung unsur SARA or Bullying.
4. Dilarang SPAM.
5. Dilarang menyisipkan link aktif pada isi komentar.
Berlakulah dengan bijak dalam menggunakan sarana publik ini. Baca dan pahami isinya terlebih dahulu, barulah Berkomentar. Terimakasih.