MODUL 2 KONSEP DASAR HTML

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

  1. Hypertext Markup Language (HTML)
  • Aturan-aturan penulisan HTML
  • Istilah-istilah penting HTML

Hypertext Markup Language (HTML) merupakan konsep dasar yang harus dipahamioleh seseorang yang belajar pemrograman web.

2.1 Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language yaitu sebuah bahasa markup yang memberi nilai tambah/kemampuan lebih dari sebuah teks untuk ditampilkan pada halaman browser dengan kata lain, HTML merupakan sebuah standar yang digunakan untuk menampilkan dokumen web. Misalnya sebuah teks ”My WEB” kemudian dengan HTML diberi tanda <b>My WEB</b>, maka dengan pemberian tanda <b> menyebabkan teks My WEB tercetak tebal dihalaman browser, begitu juga dengan pemberian tanda-tanda (tag) lainnya, sehingga dengan tanda-tanda yang dimiliki oleh HTML membuat teks dapat tampil sesuai keinginan.

HTML bukanlah bahasa pemrograman murni, disebut bahasa Markup atau semi bahasa pemrograman web. Dikatakan bukan bahasa pemrograman murni karena dalam HTML tidak terdapat konsep-konsep utama yang harus dimiliki oleh sebuah bahasa pemrograman, seperti :

  • Tidak tersedianya Struktur Perulangan (Looping), seperti for, do, while dan lain-lain
  • Tidak tersedianya Struktur Pengambil Keputusan (Decision Structure), seperti if, switch, case dan lain-lain.

Walaupun HTML bukanlah bahasa pemrograman, namun HTML adalah tulang punggung dari sebuah situs web, karena walau bagaimanapun canggihnya sebuah

halaman web tetap menggunakan script HTML, script bahasa pemrograman web hanyalah menyisipkan kode-kodenya kedalam script HTML itu sendiri. Oleh karena itu, penguasaan tentang HTML wajib dimiliki jika Anda akan mempelajari bahasa pemrograman web. Beberapa contoh bahasa pemrograman web adalah PHP, JSP, ASP, Perl dan lainnya.

2.2 Sejarah HTML

Seperti telah dibahas pada modul 1, bahwa penemu konsep HTML ini adalah Sir Timothy Berners Lee, diawali dengan penemuan konsep WWW dan kemudian baru diciptakan HTML. Berikut ini sejarah perkembangan HTML :

Tahun Versi Keterangan
     
1989   Titik awal penemuan HTML
     
1992 HTML 1.0 Proposal pertamaTim Berners-Lee
     
1993 HTML+ Perbaikan tampilan HTML 1.0
     
1994 HTML 2.0 Jadi standar bahasa web
     
1995 HTML 3.0 Rilis resmi HTML versi 3.0
     
Jan 1997 HTML 3.2 Fitur  baru,  seperti  fonts,  tables,  applets,  superscripts,
    subscripts dan lainnya. (direkomendasikan oleh W3C)
     
Des 1997 HTML 4.0 Rilis, fitur yang menonjol pada versi ini adalah dukungan
    terhadap bahasa CSS.
     
Apr 1998 HTML 4.0 Direkomendasi menggantikan versi sebelumnya
     
Des 1999 HTML 4.1 Perbaikan kelemahan dari versi 4.0
     
Jan 2008 HTML 5.0 Masih  dalam  bentuk  Draft.  Beberapa  fungsi  baru  yang
    ditambahkan pada versi ini adalah embedding audio, video,
    graphics, client-side data storage, dan interactive dokumens
     
Agt 2009 HTML 5.0 Draft terakhir, masih belum direkomendasikan
     
2012 HTML 5.0 Kandidat untuk direkomendasikan
     
Akhir HTML 5.0 Rencana untuk direkomendasikan
2014    
     

2.3 Konsep Dasar HTML

Sebelum membahas HTML lebih jauh, perlu diketahui beberapa istilah terkait dengan

HTML :

  1. Tag adalah spesial teks markup yang dibatasi oleh tanda < dan >. Terdapat duamodel tag, yaitu start tag/tag pembuka dengan simbol < tagname > dan end tag/tag penutup dengan simbol </tagname>. Contoh <p> dibaca tag P atau tagdengan nama P. <p> disebut sebagai tag pembuka dan pasangannya </p> disebut sebagai tag penutup.
  • Elements, adalah bagian-bagian dari sebuah halaman HTML, diawali olehstarttag dan diakhiri oleh end tag. Sebuah elements terdiri atas tiga bagian, yaitu Start tag/Tag Pembuka,Kontendan End tag/Tag PenutupPerhatikan contohberikut :

Lebih jelasnya perhatikan contoh berikut :

Start tag Konten End tag
     
<p> Ini paragraf </p>
     
<h1> My web </h1>
     
<img src=me.jpg />    
     
<br />    
     

Terlihat dari tabel diatas, bahwa :

  • Sebuah element HTML diawali dengan start tag atau disebut juga dengan tag pembuka.
  • Sebuah element HTML diakhiri dengan end tag atau tag penutup, namun terdapat beberapa tag pembuka yang tidak memiliki tag penutup. Misalnya <br>, <hr> dan <img>. Agar kaidah penulisan HTML menjadi benar, maka penulisan start tag tersebut ditambahkan karakter / sebelum tanda >, seperti contoh : <br />
  • Segala sesuatu yang terdapat antara start tag dan end tag disebut dengan konten/element konten.
  • Beberapa element HTML ada yang tidak memiliki konten, seperti <img src=“me.jpg>, oleh karena itu, end tag nya disisipkan pada start tag dengan cara menambahkan karakter / sebelum tanda >. Sehingga penulisan yang benar menjadi <img src=“me.jpg />.
  • Kebanyakan element HTML memiliki attribut, seperti contoh : <a href=”http://ephi.web.id”>My Web</a>. href merupakan sebuah attribute dari tag <a>.
  • Element HTML Bercabang, yaitu sebuah element HTML dalam elementHTML lainnya. Perhatikan contoh berikut :

<p>Ini merupakan <b>pelajaran pertama saya </b>pada materi HTML </p>

Penjelasan :

Pada contoh diatas terdapat 2 Element HTML, yaitu :

1. Element: <b> </b>

Start tag Konten End tag    
           
<b> pelajaran pertama saya </b>    
           
2. Element <p> </p>      
           
Start tag   Konten     End tag
       
<p>   Ini merupakan <b>pelajaran pertama saya </p>
    </b>pada materi HTML  
           

Tidak ada batasan element HTML Bercabang ini, yang perlu diperhatikan adalah urutan pemberian end tag-nya.

Contoh end tag yang salah :

<b><i><u>teks ini akan tercetak tebal, miring dan bergaris bawah</b></i></u>

Penulisan end tag yang benar adalah :

<i>

<u>

Konten

</u>

</i>

</b>

  • Attribute adalah informasi tambahan yang dimiliki oleh sebuah tag. Sebuahattribut telah mempunyai nilai default, sehingga kebanyakan attribut dari sebuah tag bersifat pilihan, artinya boleh digunakan dan boleh tidak. Attribut ini di tulis pada bagian start tag, perhatikan sintak berikut :

<tagname attributname=”value”>

Contoh :

<p align=”right”>konten</p>

Maka ’align’ adalah atribut dari tag <p>. Tag <p> digunakan untuk membuat sebuah paragraf, secara default setiap paragraf akan rata kiri, namun dengan penambahan atribut align=right akan membuat paragraf menjadi rata kanan.

Dapat saja sebuah element HTML mempunyai lebih dari satu attribut, misalnya tag body. Perhatikan contoh berikut :

<body bgcolor=”red” text=”yellow> konten </body>

Antara satu attribut dengan attribut berikunya dipisahkan oleh spasi.

  • Karakter Khusus, dalam kondisi tertentu, kita perlu menampilkan simbol <, >” ” atau simbol-simbol lainnya yang secara default digunakan oleh element HTML. Oleh karena itu, HTML menyediakan karakter-karekter khusus untuk menampilkan simbol-simbol tersebut. Perhatikan tabel berikut :







<!– /* Font Definitions */ @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-469750017 -1073732485 9 0 511 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:””; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:11.0pt; font-family:”Times New Roman”,”serif”; mso-fareast-font-family:”Times New Roman”; mso-fareast-theme-font:minor-fareast;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-fareast-font-family:”Times New Roman”; mso-fareast-theme-font:minor-fareast;} @page WordSection1 {size:595.0pt 841.9pt; margin:72.0pt 65.3pt 3.15pt 72.0pt; mso-header-margin:0cm; mso-footer-margin:0cm; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} @page WordSection2 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection2 {page:WordSection2;} /* List Definitions */ @list l0 {mso-list-id:524872353; mso-list-type:hybrid; mso-list-template-ids:192193226 -1002504338 -944448852 1996914180 -256979964 1417680858 1661358188 -1710326670 -1730369864 -2066158548;} @list l0:level1 {mso-level-start-at:6; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level2 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level3 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level4 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level5 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level6 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level7 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level8 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level9 {mso-level-start-at:0; mso-level-text:””; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} –>
&                                         &

 
 
6.      Komentar, yaitu informasi tambahan pada dokumen HTML yang tidak akandiproses oleh browser. Biasanya digunakan untuk memberikan penjelasan atas bagian tertentu dari dokumen HTML. Sebuah pesan komentar diawali oleh tanda <!– dan diakhiri dengan –>, perhatikan contoh berikut :
 
<!– ini hanya contoh –>
 
 
2.4 Format Dasar Dokumen HTML
 
Dokumen HTML adalah seluruh item yang terdapat pada element HTML <html> konten </html>. Karena itulah seluruh tag-tag HTML dimulai dengan <html> dan diakhiri oleh </html>. Perhatikan struktur dasar HTML berikut :
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
 
</html>
 
Contoh :

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tag
Keterangan
 
 


 
<!DOCTYPE html>

 
<html>

 
<head>

 
<title>


 
 
Tag ini berfungsi untuk mendefinisikan jenis dokumen dan versi HTML

 
Menandakan awal dari dokumen HTML

 
Berfungsi untuk menyatakan header dari dokumen HTML

 
Berfungsi  untuk  memberikan  judul  dari  dokumn  Simbol
Karakter Khusus
   
&lt;
   
&gt;
   
&quot;
   
Spasi &nbsp;
   

PRAKTIKUM

Dalam praktikum modul 2, praktikan akan belajar penggunaan tag-tag dasar dari HTML.

  1. Tag <head>

Tag <head> digunakan untuk memberikan informasi tentang dokumen web yang sedang dibuat. Tag <head> diletakkan setelah tag <html>. Tidak boleh terbalik. Dalam tag <head> terdapat tag turunan, yaitu : Tag <title>, berguna untuk memberikan judul dari dokumen web. Judul tersebut akan tampil dibagian atas dari browser Praktekanlah script berikut :

Maka hasilnya akan menjadi :

  • Tag <meta>, berguna untuk menyediakan metadata dari dokumen web yang terdiri atas informasi singkat halaman web (description), kata kunci (keywords), author dan lainnya. Praktekan script berikut :

Informasi-informasi yang ditulis pada tag <meta> tidak akan terlihat pada halaman web sewaktu di eksekusi.

  • Tag <link>, digunakan untuk menghubungkan dokumen web dengan sumber lain, misalnya dengan file css. Praktekan script berikut :

Pada script diatas, terdapat pemanggilan terhadap file style.css yang terdapat pada http://www/ephi.web.id/css/style.css. Pembasahan CSS akan dilakukan pada modul khusus.

  • Tag <base>, digunakan untuk menentukan URL dasar untuk semua URL relative halaman web. Misalnya, sebuah domain web beralamat di www.ephi.web.id. Praktekan scrip berikut :

Setelah sebuah tag <base> didefinisikan, maka penggunaannya dalam tag <body> tidak lagi mengikutkan konten dari base URL tersebut.

Perhatikan baris 7, jika tidak menggunakan tag <base> maka harus ditulis <img src=”http://www.ephi.web.id/images/header.png”

  • Tag <style>, digunakan untuk menentukan style sheet dari dokumen saat ini. Artinya kita dapat membuat fungsi sendiri pada halaman web dan berfungsi hanya untuk halaman web itu saja. Praktekan script berikut :

Terlihat pada gambar diatas, didefinisikan style khusus dengan nama myclass dengan aturan warnak background akan berwarna merah dan texberwarna putih (#fff) serta berjarak 10px dari pinggir.

  • Tag <script>, digunakan untuk menambahkan file script eksternal atau mendefinisikan script khusus ke dokumen web saat ini. Biasanya digunakan untuk menyisipkan bahasa pemrograman javascript. Praktekan contoh berikut :

Terlihat pada gambar diatas, didefinisikan sebuah fungsi dengan nama Hello, jika fungsi ini dipanggil akan menampilkan “Hello, Saya Yuhefizar”. Lalu pada baris 12, fungsi ini dipanggil melalui sebuah tombol (button). Jika dijalankan, maka pertama kali akan tampil sebuah halaman web dengan sebuah tombol OK

  1. Komentar

Seperti script pemrograman yang lainnya, pada script HTML juga dapat disisipkan komentar agar memudahkan dalam mengelola dan memahami script pemrograman. Sebuah komentar tentu tidak akan diproses/diterjemahkan oleh browser. Cara memberikan komentar pada HTML adalah :

2. Komentar satu baris : <!– tulis komentar disini –>. Perhatikan script pada pembahasan tag <meta> diatas.

  • Komentar lebih dari satu baris :

<!–

Komentar anda Disini

–>

3.Tag <br / >, line break

Tag ini digunakan untuk berpindah satu baris kebawah. Ini merupakan salah satu tag yang tidak mempunyai tag penutup, oleh karena itu penulisannya menjadi <br / >. Sesudah dan sebelum tanda slash diberi jarak 1 spasi.

Maka hasilnya akan menjadi :

4. Tag <hr />, horizontal line

Tag ini digunakan untuk membuat garis pembatas secara mendatar (horizontal).

5. Tag <pre>, pre formatted

Tag ini digunakan untuk menampilkan teks apa adanya pada halaman browser sesuai dengan yang ditulis pada script HTML.

Anda dapat mengetikan apa saja dalam tag <pre>, maka akan ditampilkan apa

adanya, namun tidak boleh menggunakan symbol < >, karena akan dianggap sebuah tag nantinya.

Selamat belajar,

REFERENSI LANJUTAN :

  1. http://en.wikipedia.org/wiki/Html5
  2. http://www.w3schools.com/html/html_head.asp
  3. http://www.comptechdoc.org/independent/web/html/guide/htmlhead.html