Modul HTML #2 : Konsep Dasar HTML

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

2.1 Pengertian HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website (Web Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file HTML disimpan dengan ekstensi .html (dot html) dan dapat dieksekusi atau diakses menggunakan web browser (Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain).

Seperti yang sudah dijelaskan, HTML adalah dasar dari sebuah website, untuk membuat sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis. Jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut disebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website. Hal ini akan menyebabkan developer akan sangat disibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.

HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya masing-masing, seperti tag heading, paragraf, form, tombol, list,  hyperlink atau link yang menghubungkan antar halaman website dan banyak lagi lainnya.

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 ”Ini Web Ku” kemudian dengan HTML diberi tanda <b>Ini Web Ku</b>, maka dengan pemberian tanda <b> menyebabkan teks Ini Web Ku tercetak tebal di halaman 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 kita 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 :

Beberapa contoh bahasa pemrograman web adalah PHP, JSP, ASP, Perl dan lainnya.

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 dua model tag, yaitu start tag/tag pembuka dengan simbol < tagname > dan end tag/tag penutup dengan simbol </tagname>. Contoh <p> dibaca tag P atau tag dengan nama P. <p> disebut sebagai tag pembuka dan pasangannya </p> disebut sebagai tag
2. Elements, adalah bagian-bagian dari sebuah halaman HTML, diawali oleh start tag dan diakhiri oleh end tag. Sebuah elements terdiri atas tiga bagian, yaitu Start tag/Tag Pembuka, Konten dan End tag/Tag Penutup Perhatikan contoh berikut :

   <b> teks ini akan tercetak tebal </b>

Keterangan :

Lebih jelasnya perhatikan contoh berikut :

Terlihat dari tabel diatas, bahwa :

• • Sebuah element HTML diawali dengan start tag atau disebut juga dengan tag
  • 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=“logo.jpg”>, oleh karena itu end tag nya disisipkan pada start tag dengan cara menambahkan karakter / sebelum tanda >. Sehingga penulisan yang benar menjadi <img src=“ logo.jpg />.
  • Kebanyakan element HTML memiliki attribut, seperti contoh : <a href=”https://agussuratna.net”>Web Ku</a>. href merupakan sebuah attribute dari tag <a>.

3. Element HTML Bercabang, yaitu sebuah element HTML dalam element HTML lainnya. Perhatikan contoh berikut :

   <p>Ini kalimat <b>pertama saya </b>pada materi HTML </p>

   Penjelasan :

Pada contoh diatas terdapat 2 Element HTML, yaitu :

• • Element: <b> </b>

• • Element <p> </p>

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 :

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

Jadi untuk penulisan end tag adalah bila jadi start tag pertama maka end tag nya yang terakhir, start tag kedua maka end tag nya yang kedua terakhir.

<b>
    <i>
        <u>
            Konten
        </u>
    </i>
</b>

• • Attribute adalah informasi tambahan yang dimiliki oleh sebuah tag. Sebuah attribut 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 :

• • Komentar, yaitu informasi tambahan pada dokumen HTML yang tidak akan diproses 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 tulisan contoh komentar -->

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 :

<!DOCTYPE html>

<html>
    <head>
        <title>Modul HTML | Modul 2</title>
    </head>

    <body>
        Ini paragraf konten tag body yang akan tampil di halaman web
    </body>
</html>

PRAKTIKUM MODUL 2

Dalam praktikum modul 2, Peserta Didik 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>, dalam tag <head> terdapat tag turunan, yaitu :

• • Tag <title>, berguna untuk memberikan judul dari dokumen web. Judul tersebut akan tampil di bagian atas dari browser. Praktekanlah script berikut, simpan dengan nama modul2_title di dalam folder Modul_2 :

    <!DOCTYPE html>
    
    <html>    
        <head>            
            <title>
                Tutorial HTML
            </title>
        </head>
        
        <body>
            Halaman ini berisi tutorial HTML      
        </body>
    </html>

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 lain-lain. Praktekan script berikut :

    <!DOCTYPE html>
    
    <html>
        <head>
            <title>Modul 2 | Belajar Tag Meta</title>
            <meta charset="utf-8" />
            <meta http-equiv="refresh" content="3" />
            <meta name="keywords" content="belajar meta tag html, belajar html dasar" />
            <meta name="description" content="google akan menampilkan kalimat ini" />
        </head>
    
        <body>
            Halaman ini menggunakan tag meta
        </body>
    </html>

    Hasilnya menjadi : Informasi-informasi yang ditulis pada tag <meta> tidak akan terlihat pada halaman web sewaktu dieksekusi.

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

    <!DOCTYPE html>
    
    <html>
        <head>
            <title>Modul 2 | Belajar Tag Meta</title>
            <link rel="stylesheet" type="text/css" href="css/style.css" />
        </head>
    
        <body>
            Halaman ini menggunakan tag link yang terhubung ke file style.css
        </body>
    </html>

    Hasilnya : Pada script diatas, terdapat pemanggilan terhadap file style.css yang terdapat pada folder CSS. Pembahasan CSS akan dilakukan pada modul khusus tentang CSS.

• • Tag <base>, digunakan untuk menentukan URL dasar untuk semua URL relative halaman web. Misalnya, sebuah domain web beralamat di www.agussuratna.net. Praktekan script di bawah ini, sebelumnya buat dulu folder gambar dan file dengan nama html di dalam folder Modul_2, dalam folder gambar tersebut simpan satu file gambar, misal sepeda.jpg : Hasilnya : Setelah sebuah tag <base> didefinisikan, maka penggunaannya dalam tag <body> tidak lagi mengikutkan konten dari base URL tersebut. Perhatikan baris 11, jika tidak menggunakan tag <base> maka harus ditulis <img src=”gambar/sepeda.jpg”>.

• • 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. Untuk prakteknya kita buat satu file dengan nama html dalam folder Modul_2 dan tuliskan script berikut : Terlihat pada gambar diatas, didefinisikan style khusus menggunakan selector p dengan property color dengan value blue, dan span dengan property color dengan value red. Jika dieksekusi, maka hasilnya akan seperti gembar berikut :

• • Tag <script>, digunakan untuk menambahkan file script eksternal atau mendefinisikan script khusus ke dokumen web saat ini. Biasanya digunakan untuk menyisipkan bahasa pemrograman javascript. Untuk praktek kita buat dulu file dengan nama html, selanjutnya ketikan script di bawah ini : Hasilnya : Terlihat pada script di atas, didefinisikan sebuah fungsi dengan nama alert(), jika fungsi ini dipanggil akan menampilkan “Hello World!!”, fungsi ini dipanggil pada saat halaman modul2_script.html diakses. Pada saat tombol OK di klik akan tampil :

2. 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 :

• • Komentar satu baris :

    <!-- tulis komentar disini -->

    Perhatikan script pada pembahasan tag <meta> diatas.

• • omentar lebih dari satu baris :

    <!--
          Komentar anda Disini
    -->

    Untuk praktikum buat file baru dengan nama modul2_komentar.html di dalam folder Modul_2, tuliskan script di bawah ini : Maka hasilnya :

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.

Untuk Praktikum buat satu file dengan nama modul2_br.html di dalam folder Modul_2, tuliskan script seperti di bawah ini :  Maka hasilnya akan menjadi :

4. Tag <hr />, horizontal line

Tag ini digunakan untuk membuat garis pembatas secara mendatar (horizontal). Untuk pratikum buat satu file dengan nama modul2_hr.html di dalam folder Modul_2, ketikan script seperti di bawah ini :  Maka hasilnya akan menjadi :

5. Tag <pre>, pre formatted

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

Kita dapat mengetikan apa saja dalam tag <pre>, maka akan ditampilkan apa adanya, namun tidak boleh menggunakan symbol < >, karena akan dianggap sebuah tag nantinya.

Untuk praktikum buat file baru dengan file name modul2_pre.html di dalam folder Modul_2, ketikan script seperti di bawah ini :  Maka hasilnya :

Daftar Pustaka :

• https://www.apacara.com/category/html/
• http://en.wikipedia.org/wiki/Html5
• http://www.w3schools.com/html/html_head.asp
• http://www.comptechdoc.org/independent/web/html/guide/htmlhead.html