Bahasan yang aku posting kali ini mengenai HTML. Sebenarnya udah aku pelajari di Semester 1 matakuliah Praktikum Internet. Berhubung karena waktu itu leptop aku virusan, jadi semua data Semester 1 hilang. Aku hanya sekedar mengulang pelajaran yang dulu pernah aku pelajari, sekalian mengingat kembali apa itu HTML.
Aku ambil materi ini dari buku : “Mudah dan Cepat Menguasai Pemrograman WEB”
Penulis : Bernard Renaldy Suteja, Agus Prijono dan Rusdy Agustaf.
Penerbit : Informatika bandung
Tahun Terbit : 2005
Semoga bermanfaat bagi kalian :)
Teori Dasar HTML
HTML (Hypertext Markup Language) adalah bahasa dasar untuk web scripting bersifat client side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga untuk menghubungkan antar tampilan web page (hyperlink).
Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah-perintah HTML. Anda dapat mempergunakan Notepad, Edit Plus ataupun editor lainnya yang berbasis GUI (Graphical User Interface) seperti Microsoft Frontpage, Macromedia Dreamweaver, Adobe GoLive dan sebagainya (dengan program-program ini anda tidak perlu mengetik kode HTMLnya, semua perintahnya diwujudkan secara icon base). Tetapi bagi seorang pengembang aplikasi web maka kemampuan penguasaan terhadap kode-kode HTML sangat diperlukan, sehingga sangatlah disarankan untuk menguasai kode perintah HTML pergunakanlah editor teks (misalnya Notepad).
Aturan penulisan HTML , struktur minimal dari dokumen HTML adalah sebagi berikut :
<HTML>
<HEAD>
<TITLE>Judul Web page</TITLE>
</HEAD>
<BODY>
Isi dokumen disini
</BODY>
</HTML>
- Body
Di dalam TAG <BODY> terdapat beberapa atribut, atribut tag berada di dalam tanda tag tersebut. Atribut tersebut ada yang memiliki nilai tetapi juga ada yang tidak. TAG <BODY> memiliki atribut :
<BODY bgcolor=”#......” background=”........”>
Dalam HTML nilai warna yang dapat diberikan pada atribut bgcolor adalah dengan menggunakan aturan komposisi RGB(Red-Green-Blue) dengan angka hexadecimal maksimal adalah FF (setara dengan 255 decimal) tiap komposisinya. Sebagai contoh bila diinginkan untuk memberikan warna merah(red) maka nilainya adalah “#FF0000”, warnah hijau(green) nilainya adalah “#00FF00” dan warna biru(blue) nilainya adalah “#0000FF”. Atau dapat juga menggunakan pre-define color seperti red, green, blue, yellow, cyam, magenta dan sebagainya. Sedangkan untuk nilai atribut background adalah nilai file gambar lengkap dengan lokasi folder dan ekstensi filenya. Format file gambar yang didukung oleh HTML antara lain adalah JPG, PNG, dan GIF.
- Heading
Heading digunakan untuk menampilkan format huruf yang besar dan dicetak tebal, misalnya digunakan untuk judul atau topik utama dari sebuah paragraf, ukurannya dari terbesar <H1> sampai terkecil <H6>, sedangkan untuk mengatur heading digunakan atribut “align”contoh adalah<H1 align=”..................”> ditutup dengan </H1> yang nilai atributnya dapat diisi nilai left untuk rata kiri, right untuk rata kanan, dan center untuk rata tengah.
- Paragraf
Untuk memformat paragraf agar dapat rata kiri, kanan, tengah dan justify digunakan tag pembuka <P align=”................”> dan penutup </P>, isi dari atribut “align” adalah left untuk rata kiri, right untuk rata kanan, center untuk tata tengah dan justify untuk rata kiri dan kanan. Antara paragraf dalam HTML akan dibatasi secara otomatis oleh sebuah jeda baris.
- Breaking Now
Tag <BR> inidigunakan untuk berpindah ke baris baru dalam isi dokumen. Ini adalah salah satu tag HTML yang tidak memiliki tag penutup.
- Horizontal Ruler
Tag yang digunakan untuk membuat garis horizontal adalah <HR>, adapun atribut yang dimiliki oleh “align” untuk perataan, “size” untk mengatur ketebalan garisnya(dalam pixel), dan “width” untuk mengatur lebar garisnya(dalam pixel atau persen). Penggunaan satuan persen memiliki arti bahwa ukuran garis herizontal akan diambil presentase terhadap width dari tampilan jendelanya. Tag HR inijuga tidak memiliki tag penutup.
- Preformat
Untuk memformat dokumen HTML dengan menggunakan fasilitas Preformat. Dengan fasilitas ini tampilan yang akan diformat sama persis dengan isi yang ada di dalam tag <PRE>isi</PRE>. Di dalam tag <pre> tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan.
- Bold, Italic, Under Line, Subscript, Superscript, Stripe
- Huruf tebal (bold) : <b>cetak tebal</b>
- Huruf miring (italic) : <i>cetak miring</i>
- Huruf garis bawah (underline) : <u>garis bawah</u>
- Efek huruf Subscript : <sub>cetak subscript</sub>
- Efek huruf Superscript : <sup>cetak Superscript</sup>
- List
Dalam dokumen HTML dapat menampilkan daftar list seperti Bullet dan Numbering pada aplikasi program Microsoft Word. Ada dua macam list, yaitu UnorderList (mirip Bullets) dan OrderedList(mirip numbering).
Pada Unorderlist digunakan tag <UL> sebagai pembuka dan tag </UL> sebagai tag penutup, untuk item-item list yang ada didalamnya digunakan tag <LI> untuk mengawalinya. Unordered List mempunyai atribut “type” yaitu bentuk dari bulletnya, ada beberapa jenis type yaitu disc(default) untuk lingkaran tidak berlubang, circle untuk bentuk lingkaran berlubang, square untuk kotak. Ordered List juga memiliki atribut tipe untuk menentukan tipe penomorannya, tipe-tipenya adalah :
- 1 untuk penomoran 1, 2, 3...
- A untuk penomoran A, B, C...
- I untuk penomoran I, II, III...
- A untuk penomoran a, b, c...
- I untuk penomoran i, ii, iii...
Bila anda tidak mmendefinisikan tipenya, maka secara default Ordered List akan memberikan penomoran angka (1, 2, 3,...).
- Komentar dalam HTML
Seperti bahasa pemrograman lainnya, HTML jugamemiliki komentar yang diatur oleh tanda <!-- sebagai pembuka dan tanda --> untuk penutup. Komentar tidak akan diinterpreter oleh web browser, hanya menjadi keterangan saja.
- Karakter khusus dalam HTML
Untuk spasi dalam HTML digunakan perintah (non breaking space).
Contoh Latihan :
- Untuk menampilkan background kosong berwarna :
<HTML>
<BODY bgcolor=”#FF0000”>
</BODY>
</HTML>
- Untuk menampilkan background berupa gambar :
<HTML>
<BODY background=”namafile.jpg”>
</BODY>
</HTML>
- Latihan : menggunakan tag Heading.
<HTML>
<BODY bgcolor=”green”>
<H1 align=”left”>Heading rata kiri</H1>
<H2 align=”right”>
Heading rata kanan
</H2>
<H3 align=”center”>
Heading rata tengah
</H3>
</BODY>
</HTML>
Tampilan latihan 3 :
- Latihan : menggunakan <HR> Horizontal Ruler (garis horizontal)
<HTML>
<BODY>
<HR size=10>
Berarti tebal garis 10 pixel <BR>
<HR width=”75%” align=”center”
Berarti lebar garis 75% dari lebar layar browser dan perataannya rata tengah.
</BODY>
</HTML>
Tampilan latihan 4 :
- Latihan : menggunakan tag <PRE> Preformat (tampilan yang akan diformat sama persis dengan isi yang ada di dalam tag).
<HTML>
<BODY>
<PRE>
Tampilan ini akan ditampilkan sesuai format aslinya :
------------------------------------------------------
1. Belajar HTML
2. Belajar Javascript
3. Belajar ASP
+++++++++++++++++++++++++++++++
</PRE>
</BODY>
</HTML>
Tampilan latihan 5 :
- Latihan : menggunakan tag <UL> untuk menampilkan daftar list.
<HTML>
<BODY>
Penyanyi idola saya :
<UL type =”circle”>
<LI>Bruno Mars
<LI>Taylor Swift
<LI>Jessie J
<LI>Greyson Chance
</UL>
</BODY>
</HTML>
Tampilan latihan 6 :
HTML Lanjut
Teori dasar
a. Fontasi
Untuk memodifikasi font digunakan tag<FONT> sebagai pembuka daan tag </FONT> sebagai penutup. Tag ini mempunyai beberapa atribut, diantaranya adalah atribut “size” untuk menentukan besar ukuran huruf, atribut “color” untuk menentukan warnanya. Nilai warna dapat menggunakan aturan RGB atau dengan pre-define color serta atribut “face” untuk menentukan jenis hurufnya. Untuk nilai atribut face dapat juga diberikan alternatif type font pengganti dengan dibatasi dengan tanda koma, contoh : <FONT color=”#FF0000” size=”7” face =”verdana, arial”>. Di dalam tag font ini dapat diberikan juga tag untuk mengatur efek cetak huruf seperti tag <B>, <I>, <U> dan sebagainya.
b. Image
Untuk menampilkan gambar pada dokumen HTML, maka digunakan tag <IMG SRC=”nama file gambar”>. Tag ini mempunyai beberapa atribut diantaranya :
- Width : digunakan untuk menentukan lebar gambar.
- Height : digunakan untuk menentukan tinggi gambar.
- Border : digunakan untukmemberikan bingkai pada gambar.
- Hspace : digunakan untuk memberi ruang kosong di sebelah kanan dan kiri gambar.
- Vspace : digunakan untuk memberi ruang kosong di sebelah atas dan bawah gambar.
- Align : digunakan untuk menentukan perataan gambar, ditengah, kiri, kanan, atas, bawah dari layar.
- Alt : untuk memberi komentar bila pointer mouse berada di atas gambar.
Jika gambar tidak berhasil ditampilkan maka cobalah untuk memindahkan letak file gambar yang hendak ditampilkan ke folder dimana file .htm atau .html berada. TAG <IMAGE> ini juga tidak memiliki penutup.
c. Hyperlink
Hyperlink atau sering disebut anchor digunakan untuk menghubungkan (link) antara satu halaman web dengan halaman web lainnya, dengan satu web site ataupun antar web site atau juga dapat digunakan untuk berpindah ke suatu posisi dalam halaman web site. Tag ini memiliki sifat link, visited, dan active. Dalam sifat tersebut anda dapat memberikan nilai warna. Deskripsi dari sifat tersebut adalah :
1. Link, saat hyperlink belum dikunjungi
2. Visited, hyperlink telah dikunjungi
3. Active, hyperlink dalam keadaan in focus atau terpilih
Sifat-sifat tag ini dapat diatur melalui atribut dalam body bukan atribut dalam tag hyperlink, yaitu dengan cara sebagai berikut :
<BODY link=”#.....” vlink=”#.....” alink=”#.....”>
Sedangkan tag yang digunakan untuk membuat hyperlink adalah tag <A HREF=”tujuan”> sebagai pembuka dan tag </A> sebagai penutup.
Hyperlink dapat berupa kata atau kalimat yang diketikan di antara tag <A HREF=”tujuan”>...... </A> pada tampilan browsernya akan digaris bawahi kata atau kalimat tersebut. Dapat juga suatu hyperlink berupa gambar, jadi susunan tagnya menjadi <A HREF=”tujuan”> <IMG SRC=”....”> </A> Setiap hyperlink bila didekatkan kursor mouse di atasnya maka kursor mouse tersebut akan berubah menjadi bentuk jari, jika meng-klik-nya maka akan dihubungkan (link) ke alamat tujuan.
Selain beberapa cara yang sudah diuraikan sebelumnya masih terdapat sebuah cara berpindah yaitu dengan menggunakan atribut target pada hyperlink. Atribut target dapat menampilkan link halaman pada posisi tampilan tertentu.
- Nilai target : _blank (link dokumen ke jemdela baru)
- Nilai target : _top (link dokumen ke jendela yang sama)
- Nilai target : _parent (link document ke frameset parentnya)
- Nilai target: _self (link dokumen ke frame yang bersangkutan /aktif )
Contoh :
<a href="http://google.com"> target=”_blank”>Click</a>
Ket : Web site Google akan muncul dalam jendela baru, pada saat hyperlink dijalankan.
Contoh soal :
1. Latihan : menggunakan tag <FONT>
<HTML>
<BODY>
<FONT size=”16” color=”green” face “georgia”> Tulisan ini berwarna hijau, berukuran 16, dan jenisnya Georgia </FONT>
</BODY>
</HTML>
Tampilan latihan 1 :
2. Latihan : menggunakan tag <IMG> untuk menampilkan gambar.
<HTML>
<BODY>
Contoh penggunaan atribut HSPACE dan VSPACE : <BR>
Jarak tengah kiri
<IMG SRC=”harry.jpg” width=”150” height=”115” align=”middle” hspace=”100” vspace=”50”> Jarak bagian kanan <BR>
Jarak Bagian bawah <BR> <BR>
Contoh penggunaan atribut Border dan Alt : <BR>
<IMG SRC=”harry.jpg” align=”left” border=”3” alt =”Harry Styles”>
</BODY>
</HTML>
Tampilan latihan 2 :
3. Latihan : menggunakan tag <A HREF> Hyperlink
<HTML>
<BODY><B>Contoh membuat link antar web site. </B> <BR>
Berbagai alamat Web Server Gratis : <BR>
<a href=”http://www.geocities.com”> Geocities </a><BR>
<a href=”http://www.freeserver.com”> Free Server </a>
<BR><a href=”http://www.brinkster.com”> Brinkster </a><BR>
<B>Contoh membuat link antar halaman damam satu web sites. </B><BR>
Mau ke halaman mana? : <BR>
<a href=”Latihan 2-1.html”> Tampilan Format Font </a><BR>
<a href=”Latihan 2-2.html”> Menampilkan Gambar </a><BR>
<a href=”Latihan 2-13.html”> Membuat List Hyperlink </a><BR>
</BODY>
</HTML>
Tampilan latihan 3 :
