Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com
Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.
Sejarah Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.
Struktur HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>belajar HTML</title> <meta http-equiv="content-type"content="text/html; charset=utf-8" /> </head> <body> <h1>mengenal HTML</h1> <p>belajar html ternyata mudah nich...</p> </body> </html>
Struktur Terpenting 1. HTML <html>...</html> 2. Head <head>...</head> 3. Body <body>...</body>
Pembahasan Tag HTML 1. DOCTYPE Tag <!DOCTYPE> dideklarasikan pada awal dokumen sebelum <html>. Tag ini memberitahukan kepada browser tipe dokumen HTML apakah XHTML. Tag ini sifatnya optional, boleh ada atau tidak. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> (http://www.w3schools.com/tags/tag_doctype.asp)
<!DOCTYPE> dari HTML ada tiga model yaitu: Strict--> pengecekan tag yg lebih teliti, gunakan tipe ini bersama dengan CSS. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Transitional--> gunakan tipe ini jika browser tidak dukung CSS. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Frameset--> gunakan tipe ini jika ada frame di dalam dokumen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/tr/ html4/frameset.dtd">
2. HEAD Tag <head> berisi informasi mengenai judul/ title, tentang penulis, kata kunci, dll. Didalam <head> terdapat tag child, antara lain yang sering dipakai adalah: <TITLE> Untuk menampilkan judul halaman web <title>belajar HTML</title>
<META> Digunakan untuk memberikan informasi tentang isi dari suatu halaman web yang akan ditampilakn oleh pengunjung. <meta name="description" content="free Web tutorials on HTML, CSS, XML, and XHTML" /> <meta name="keywords" content="html, DHTML, CSS, XML, XHTML, JavaScript, VBScript" /> <meta http-equiv="refresh" content="5" /> (http://www.w3schools.com/tags/tag_meta.asp)
<LINK> Digunakan untuk merelasikan file ke dalam dokumen. <link rel="stylesheet" type="text/css" href="theme.css" /> <STYLE> Digunakan untuk mendefinisikan cascading style sheets (CSS) di dalam dokumen. <SCRIPT> Digunakan untuk mendefinisikan skrip seperti JavaScript atau VBScript. <script type="text/javascript"> document.write("hello World!") </script>
3. BODY HEADING Tag yang digunakan untuk membuat judul yang tebal, tag heading mempunyai beberapa level yaitu: <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>, <h6></h6> <h1>belajar HTML</h1> <BR> Tag line break digunakan untuk ganti baris. HTML<br>CSS
<p> / paragraph Tag <p> digunakan untuk membuat paragraf <p>belajar HTML</p> LINK Tag anchor <a> digunakan untuk link ke halaman web tertentu. <a href= home.html >Home</a> IMG Tag <img> digunakan untuk memasukkan image/ gambar <img src="angry.gif" alt="angry" > FONT Tag <font> digunakan untuk properti huruf <font size="3" color="red"> This is some text! </font>
TABLE Tag <table> digunakan untuk membuat tabel biasanya diikuti oleh tag <tr> dan <td>. <caption>..</caption> : untuk membuat judul tabel <th>...</th> : untuk membuat judul sel. <tr>...</tr> : untuk membuat baris. <td>...</td>: untuk membuat kolom.
FORM dan INPUT Tag form dan input digunakan secara bersama-sama untuk meminta masukan dari user untuk kemudian dikirim ke server. Tag <FORM> membuat kerangkanya sedangkan tag <INPUT> menyediakan elemen atar muka dengan user. <FORM METHOD= POST GET ACTION= URL >... </FORM> POST mengirimkan data secara terpisah GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk
Tag <INPUT> memiliki beberapa tipe yaitu: <input type="button" > <input type="image" > <input type="submit" > <input type="reset" > CENTER Tag <center> digunakan untuk mengetengahkan text <center>html</center> Tag Komentar Untuk memberi komentar kita menggunakan tag <!--... --> <!-- Ini Komentar HTML --> NOSCRIPT Digunakan untuk mengantisipasi jika JavaScript atau VBScript disable / mati.contoh: <noscript>wah JavaScript Mati Neh!!!</noscript>
<tt> <i> <b> <big> <small> tags <tt> membuat huruf mono teks <i> membuat huruf miring <b> membuat huruf tebal <big> membuat huruf lebih besar <small> membuat huruf lebih kecil UL, OL, LI UL (Unorder List) digunakan untuk membuat list tidak bernomer OL (Order list) digunakan untuk membuat list ber-nomer LI list
FRAME Digunakan untuk memberikan frame pada dokumen. Frame adalah area yang berisi halam web lain. DIV <html> <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /> </frameset> </html> Digunakan untuk membuat area/ layout tertentu <div>hallo world</div>
Aturan Penulisan tag HTML Didalam penulisan tag HTML ada beberapa ketentuan yaitu: Tag terbagi menjadi dua yaitu tag tunggal dan tag berpasang Tag berpasang harus ditutup oleh pasangannya. Contoh: <p>...</p>,<h1>...</h1> Tag tuggal tidak boleh ditutup. Contoh: <br>, <input>, <img> Tag HTML bersifat Case-Insensitif (Ditulis kapital atau kecil sama saja). Penulisan tag HTML boleh satu baris atau beberapa baris dengan konsekuensi jika ditulis satu baris besar ukuran file lebih kecil, namun sulit dibaca. Sedangkan ditulis dengan beberapa baris memakan ukuran file lebih besar, namun enak dibaca.
Penulisan simbol khusus diawali dengan huruf & dan ditutup dengan huruf ; seperti " & &
Terima Kasih Referensi: http://www.ilmuwebsite.com http://www.ilmukomputer.com http://www.good-tutorials.com http://www.google.com