HIPER TEXT MARKUP LANGUAGE (HTML) 1. PENGERTIAN HTML Bicara mengenai HTML, kita juga harus bicara mengenal HTTP (hypertext transfer protokol). HTTP adalah protokol yang digunakan untuk mentransfer dokumen antara web server ke browser. HTML sebenarnya adalah file text ASCI, yang terdiri dari dua hal penting yaitu pertama adalah isi dan kedua adalah tag. Isi adalah pesan-pesan atau tulisan yang akan kita tampilkan. Tag adalah kumpulan beberapa karakter yang diawali dengan simbol lebihkecil (<) dan di akhir dengan simbol lebih-besar (>). Sebagai contoh adalah <HTML>; dan yang lain misalnya <TITLE>. 2. APLIKASI UNTUK MEMBANGUN HTML Pada Dasarnya kita dapat membuat situs menggunakan HTML dengan 2 cara : 1. "NotePad" yang secara default bisa kita temukan dalam kelompok 'accessories'-nya Windows. 2. Menggunakan Software Bantu misalnya : Microsoft FontPage, Macromedia Dreamwever, Adobe GoLive. Kelebihannya tanpa kita menghapal tag-tag kita dapat menghasilkan file-file HTML (web page), tapi bukan sekedar itu saja, banyak fitur yang dikemas kedalam aplikasi-aplikasi tersebut. Salah satu fitur tersebut misalnya fasilitas upload file ke server. 3. STRUKTUR DOKUMEN HTML Struktur Dasar Berikut ini adalah struktur dasar dari sebuah dokumen HTML.... isi head... isi body TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 1
Sebagai catatan, tag-tag HTML tidak case sensitif, jadi penulisan tag... akan sama hasilnya dengan <BODY>... <BODY>. Sebuah dokumen HTML terbagi dalam 2 bagian utama yaitu bagianhead dan bagian-body. Setiap masing-masing bagian mempunyai tag tersendiri, bagian-head menggunakan tag... dan bagianbody menggunakan tag.... Bagian-head berisi element yang bisanya berupa "prolog" untuk keseluruhan dokumen tersebut. Informasi semacam judul, nama penulis, versi, revisi dan informasi awal lainnya diletakan di bagian-head ini. Bagian kedua, yaitu body yang di apit dengan tag... berisi bagian utama dari dokumen HTML, seperti text atau tulisan, gambar, kontrol. Jadi apapun yang kita buat dan ciptakan di sebuah halaman web, harus diletakkan di antara tag dan. 4. TAG-TAG DASAR DALAM HTML Yang dimaksudkan tag dasar disini adalah tag-tag yang umum di gunakan, bahkan untuk suatu lembar halaman HTML yang paling sederhana. Title berfungsi untuk memberikan judul bagi halaman web tersebut. Perlu diingat, judul tidak sama dengan nama file. Biasanya, judul akan di tampilkan pada title bar sebuah browser. Tag yang digunakan untuk menampilkan judul adalah <title>... </title>. listing_01.html <title>belajar HTML</title>... isi body Note : Tag <title> dan </title> selalu di letakan pada bagian-head. Komentar Komentar adalah bagian yang tidak ditampilkan pada browser. Pada HTML, komentar diawali dan diakhiri dengan dua karakter dash (--) dan harus diletakan antara tag pembuka (<!) dan tag penutup (>), Untuk lebih lebih jelas mengenai komentar ini, kita bisa lihat listing dibawah ini : TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 2
listing_02.html <title>belajar HTML yuk..? </title> <!-- Komentar ini tidak akan ditampilkan --> Hallo, apa khabar...? Note : Alternatif lain, jika kita ingin membuat komentar multi-line maka bisa digunakan tag <comment>... </comment>. Headings Ada 6 (enam) level heading yang terdapat pada HTML. Heading biasanya digunakan untuk menandai bagian atau section di dalam dokumen, seperti Judul MODUL atau bagian tertentu yang di anggap sebagai suatu topic. listing_03.html <title>belajar HTML yuk..?</title> <H1>Ini adalah Heading level H1</H1> <H2>Ini adalah Heading level H2</H2> <H3>Ini adalah Heading level H3</H3> <H4>Ini adalah Heading level H4</H4> <H5>Ini adalah Heading level H5</H5> <H6>Ini adalah Heading level H6</H6> Jika di jalankan maka pada browser akan terlihat seperti berikut : TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 3
Selain itu kita bisa menggunakan atribut 'align' pada tag heading ini, yang gunanya adalah untuk pengaturan justifikasi (perataan). Nilai yang valid untuk atribut 'align' ini adalah left, center, right atau justify. listing_04.html <title>belajar HTML</title> <H2 align="left">ini Heading yang perataan kiri</h2><br> <H3 align="right">ini Heading yang perataan kanan</h3><br> <H4 align="justify">rata kiri-kanan, ber-efek pd text yg panjang</h4><br> <H5 align="center">ini Heading yang rata tengah</h5> Jika di jalankan maka pada browser akan terlihat seperti berikut : Line Break Kalo kita perhatian pada listing_04.html maka akan terlihat tag <br>. Tag ini berguna untuk membuat baris baru, tapi masih dalam lingkup paragrap yang sama. Tag <br> ini, merupakan tag yang tidak berpasangan. Paragaraph Tag <p> umumnya dipakai untuk menandai suatu paragraf baru. Namun pemakaian tag <p> terutama digunakan untuk membuat group paragraf dengan formating style tertentu. TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 4
Tag <p> ini memiliki Atribut 'align', yaitu untuk perataan kelompok teks dalam suatu paragrap. Atribut 'align' ini bisa di isi dengan nilai left, center, right atau justify. Background/Warna Latar Tag mendapatkan attribute BGCOLOR yang menentukan warna latar belakang dokumen. Warna juga bias dituliskan dengan bilangan Hexadecimal misal(#ffffffatau ##000000) atau nama secara langsung ( blue, yellow ). listing_05.html <title>belajar HTML yuk..?</title> <body bgcolor= yellow > <p align="center"> halaman web statis <p align="justify"> Halo! ini adalah rumah kecil saya di Internet. Saya membuatnya sendiri <p align="right"> Supaya orang tahu tentang saya Supaya mendapat banyak teman Supaya mendapat tempat di Internet <p align="left"> Tulisan ini akan saya pake berulang-ulang ketika belajar HTML Untuk menghemat waktu, jadi tinggal dipaste Jika di jalankan maka pada browser akan terlihat seperti berikut : 5. BERURUSAN DENGAN FONT Tag <font>... </font> Font atau biasa juga di sebut 'huruf' memegang peran penting dalam suatu design grafis, termasuk juga didalamnya adalah design web. Bagus tidaknya suatu halaman web juga sangat ditentukan oleh pengaturan font ini. Untuk mengatur huruf pada HTML kita dapat menggunakan pasangan tag <font> dan tag penutupnya </font>. Yang mana mempunyai 3 buah atribut yaitu face, size dan color. Detailnya bisa kita lihat di bawah ini. Atribut face, pilih jenis font Jenis font itu misalnya Arial, Helvetica, Time New Roman, Verdana, Comic Sans MS, Tahoma dan lain sebagainya. Cara penulisan tag-nya adalah <font face="nama_font">... </font>. Atau bisa juga ditulis <font face="nama_font_1, nama_font_2, nama_font_3">... </font>. Contoh pengaturan jenis font, bisa ditulis seperti ini ; <font face="verdana, Tahoma, Arial">... </font> TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 5
Yang perlu diperhatikan, font atau hurup yang kita pilih saat proses design harus ada juga pada komputer client (orang yang membaca halaman web kita). Jika font pilihan pertama tidak ada, maka komputer selanjutnya akan mencari font kedua, jika ketiga font tersebut tidak ada pada komputer client maka selanjunya akan ditampilkan font default. Atribut size, tentukan ukuran font Atribut untuk ukuran font bernilai terkecil 1 (ukuran terkecil) sampai dengan yang terbesar yaitu 7, tergantung kepada <basefont>. Contoh pengaturan ukuran font, bisa ditulis seperti ini ; <font size="2">... </font> Atribut color, pilih warna font Untuk pengaturan warna font (tulisan / hurup), maka cara penulisan tagnya adalah sebagai berikut <font color="kode_warna/nama_warna">. Untuk pengaturan warna bisa kita tulis <font color="#rrggbb">... </font>, dimana color=#rrggbb, adalah kombinasi warna dalam format RGB, yang ditulis dalam bilangan hexadesimal yang menunjukan kombinasi warna merah (RR), hijau (GG), dan biru (BB). Sebagai contoh nilai "#FFFFFF" adalah warna putih, #000000 adalah warna hitam, #0000FF adalah biru, #FF0000 adalah merah, dan seterusnya. Alternatif lain untuk pengaturan warna font, atribut color ini bisa juga diisi dengan nilai konstanta yang sudah terdefenisi. Untuk lengkapnya, simak daftar untuk pengaturan nilai warna font. black white green maroon olive navy purple gray yellow lime aqua fuchsia silver red blue teal Contoh pengaturan warna font, bisa ditulis seperti ini ; <font color="#ff0000">... </font> atau <font color="red">... </font> TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 6
Tag untuk pengaturan Sytle Tag yang di gunakan <b>... </b> <i>... </i> <u>... </u> <strike>... </strike> <sup>... </sup> <sub>... </sub> <big> </big> <small> </small> Hasil yang di tampilkan Tebalkan hurup / bold Membuat hurup miring / italic Menggaris bawahi text Mencoret text Text Normal Text superscript Text Normal Text subscript Akan menampilkan ukuran huruf yang lebih besar Akan menampilkan ukuran huruf yang lebih kecil Tag untuk pengaturan Garis Horisontal Tag <HR> digunakan untuk membuat garis horizontal, sekaligus membuat baris baru. Tag ini memiliki beberapa atribut seperti : Attribute ALIGN WIDTH SIZE NOSHADE COLOR Fungsi Posisi garis Horisontal, nilainya adalah LEFT, RIGHT, CENTER Lebar dari garis Horisontal Tebal dari garis Horisontal Menonaktifkan efek tiga dimensi Menentukan warna garis Horisontal listing_06.html <title>belajar HTML yuk..?</title> <h3><center>halaman web statis</center></h3> <hr size=2 width=500 align=center> <font size=2 color= blue face= arial,helvetica > <p> <b>halo!</b> saya siswa Sedes Bedono, dan ini adalah <i>rumah kecil</i> saya di Internet. </p> <p><u>saya membuatnya sendiri </u></p> <br><strike>supaya orang tahu tentang saya</strike> <br><sup>supaya mendapat banyak teman</sup> <br><sub>supaya mendapat nilai tambah dari guru</sub> <br><big>supaya mendapat tempat di Internet</big> <br><small>tulisan ini akan saya pake berulang-ulang ketika belajar HTML</small> Untuk menghemat waktu, jadi tinggal dipaste. </font> Jika di jalankan maka pada browser akan terlihat seperti berikut : TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 7
6. TAG MEMBUAT DAFTAR TIDAK BERNOMOR DAN BERNOMOR listing_07.html <title>belajar HTML?</title> <p align="center"> halaman web statis <p><br>halo! saya siswa Sedes Bedono, dan ini adalah rumah kecil saya di Internet.</p> <br>saya membuatnya sendiri <ul> <li>supaya orang tahu tentang saya <li>supaya mendapat banyak teman <li>supaya mendapat nilai tambah dari guru <li>supaya mendapat tempat di Internet <br>tulisan ini akan saya pake berulang-ulang ketika belajar HTML <br>untuk menghemat waktu, jadi tinggal copy paste </ul> Note : Tag <UL>..</UL> akan menampilkan daftar tak bernomor sedangkan Tag <OL> </OL> akan menampilkan daftar bernomor. Tag <LI> diperlukan keduanya untuk mendefinisikan setiap daftar item. 7. TAG UNTUK MEMBUAT TABEL - Tag TABLE ini memiliki beberapa attribute seperti BORDER (untuk TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 8
menentukan bingkai table), WIDTH (untuk menetukan lebar table), HEIGHT (untuk menentukan tinggi table) - tag <TABLE>.</TABLE> digunakan untuk mendefinisikan sebuah table, tag<tr> </TR> untuk mendefinisikan baris table. dan Tag <TD> untuk mendefinisikan isi tiap kolom. Tag tersebut harus dirangkai sedemikian rupa sehingga membentuk sebuah table seperti contoh berikut : listing_08.html <title>belajar HTML yuk..?</title> <table border=2> <tr> <td>baris 1 KOLOM 1</td> <td>baris 1 KOLOM 2</td> </tr> <tr> <td>baris 2 KOLOM 1</td> <td>baris 2 KOLOM 2</td> </tr> </table> Jika di jalankan maka pada browser akan terlihat seperti berikut : 8. MENYISIPKAN GAMBAR Tag yang dipakai <IMG SRC= gambar.gif WIDTH=130 HEIGHT=175 BORDER=2> Yang artinya menambahkan gambar dengan file bernama gambar.gif, memiliki lebar 130 pixel, tinggi 175 pixel dan border 2. Note : agar gambar bisa tampil, haruslah dalam folder yang sama dengan penyimpanan listing programnya. TIK XII Modul_HTML_SMA Sedes Sapientiae Bedono 9
Menampilkan Teks pengganti Gambar Tag yang dipakai <IMG SRC= gambar.gif WIDTH=130 HEIGHT=175 BORDER=2 ALT= ini gambar > artinya atribut ALT digunakan untuk menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan. listing_09.html <title>belajar HTML yuk..? </title> <center>halaman web statis</center> <img src="gambar.gif"width=78 height=102 border=2 alt="gambarku"> <p> Mencoba memasukkan gambar<p> Note : - untuk memposisikan gambar dengan teks agar terlihat lebih manis, coba tambahkan ALIGN=LEFT pada tag. Sehingga menjadi <img src= gambar.gif WIDTH=130 HEIGHT=175 BORDER=2 ALT= gambarku ALIGN=LEFT > Yang artinya atribut ALIGN akan memposisikan teks di sekitar gambar nilainya adalah TOP, MIDDLE, BOTTOM, LEFT, RIGHT. - Penambahan atribut VSPACE untuk menentukan jarak antara gambar dengan teks secara vertical dan atribut HSPACE untuk menentukan jarak antara gambar dengan teks secara horisontal, sehingga membuat design lebih tertata. Bentuk Script setelah ditambahkan, menjadi <img src= gambar.gif WIDTH=130 HEIGHT=175 BORDER=2 ALT= gambarku ALIGN=LEFT VSPACE=10 HSPACE=15> TIK XII 10 Modul_HTML_SMA Sedes Sapientiae Bedono
9. MEMBUAT LINK Yang akan kita pelajari ada 3 macam Link, yaitu a. membuat link ke dokumen HTML lain misal : <A HREF= hobi.html >hobi</a> b. membuat link ke Web site lain misal : <A HREF= http://www.google.com >www.google.com</a> c. membuat link ke E-mail misal : <A HREF= mailto:hexactinel_h6000fb@yahoo.co.id > hexactinel_h6000fb@yahoo.co.id </A> Note : atribut LINK digunakan untuk menentukan warna dari link yang belum dikunjungi, sedangkan VLINK menentukan warna dari link yang telah dikunjungi. Cara peletakkannya yaitu pada tag BODY, misalkan : <BODY BGCOLOR= yellow LINK= magenta VLINK= lime > <title>belajar HTML </title> <center>halaman web statis</center> <img src= gambar.gif WIDTH=130 HEIGHT=175 BORDER=2 ALT= gambarku ALIGN=LEFT VSPACE=10 HSPACE=15> <p> Ini sebenarnya gambar asal aja, karena kami baru belajar HTML </p> <pre> TIK XII 11 Modul_HTML_SMA Sedes Sapientiae Bedono