HTML (Hyper Text Markup Language)


2.1 Definisi HTML

HTML (Hyper Text Markup Languange) adalah bahasa pengkodeaan untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. HTML terlihat seperti bahasa pengkodean lama, yang di awali dan diakhiri dengan kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan pada sebuah web browser.


2.2 Program Editor HTML

Untuk membuat aplikasi web, dalam hal ini menggunakan HTML , maka kita membutuhkan suatu editor guna mengetikkan,mengedit atau menyimpan dokumen-dokumen HTML. Editor untuk memdesain suatu web dibagi 2 yaitu yang bersifat text murni dan yang WYSIWYG (Graphic) Editor untuk text, anatara lain Notepad dan Ultra Edit. Sedang editor WYSIWYG adalah Netscape dan Front Page.






























Gambar 6.1 Editor HTML (Ultra edit dan Front Page)


2.3 Struktur Dasar HTML

Seperti umumnya dokumen lain, dokumen HTML terdiri dari teks-teks dan bahkan lebih dari dari itu. Dokumen HTML juga dapat mengandung suatu gambar, suara, ataupun video. Satu hal yang membedakan dokumen HTML dengan dokumen-dokumen lainnya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag HTML berfungsi untuk menformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga untuk menentukan struktur bagian tersebut dalam dokumen HTML. Elemen dan Tag inilah yang merupakan ciri utama dari suatu dokumen HTML. Secara garis besar, untuk menulisakn sebuah dokumen HTML dibutuhkan kerangka penulisan dengan tag-tag dasar sebagai berikut HTML, HEAD,TITLE dan BODY.

Sebagai contoh berikut ini adalah penulisan HTML minimal yang menggunakan tag-tag dasar tersebut

Judul dokumen


data-data yang akan di tampilkan

TAG

FUNGSI

HTML

Untuk penenda bahwa dokumen yang dibuat adalah dokumen web

HEAD

Untuk bagian judul, boleh ada atau tidak

TITLE

Judul untuk masing-masing halaman, ditampilkan diatas browser

BODY

Informasi yang ingin dimunculkan diletakkan di bagian ini


2.4 Elemen dan Tag HTML

Dua komponen utama pembentuk dokumen HTML adalah Elemen dan Tag Dengan adanya dua komponen ini, maka kita dapat membuat dokumen HTML dengan baik


2.4.1 Elemen

Dalam dokumen HTML, elemen dibagi menjadi dua kategori utama, yaitu elemen-elemen yang berikan informasi tentang dokumen tersebut, seperti judul dokumen astau hubungannya dengan dokumen lain. Elemen-elemen yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftra), tabel dan lain-lain. Di dalam elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut.


2.4.2 Tag

Pada saat web browser menampilkan suatu web page, browser tersebut akan membaca teks-teks pada dokumen HTML, dan mencari kode khusus yang disebut tag. Tag diapit oleh tanda <>. Tag biasanya merupakan pasangan, yang disebut tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk sedang tag akhir dinyatakan dalam bentuk .

Format umum suatu tag berpasangan adalah :

Teks yang akan ditampilkan

Catatan :

§ HTML tidak membedakan penulisan huruf besar dan huruf kecil pada penulisan elemen maupun tag. Penulisan dan dianggap sama, campuran antara huruf besar dan kecil pun tidak berpengaruh text

§ Tidak semua tag didukung oleh semua browser. Jika suatu browser tidak mengenali suatu tag tertentu, browser tersebut akan mengabaikan tag yang tidak dikenalnya dan menuliskan isi di dalam tag tersebut sebagai teks biasa.

Sebagai contoh untuk menampilkan teks dalam format miring digunakan elemen I (italic), seperti contoh di bawah ini:

Teks ini akan tercetak miring bila dilihat di browser

Penulisan program yang baik adalah secara terstruktur. Artinya antara tag pertama dan tag berikutnya tidak saling tumpang tindih.

Penulisan tag yang tumpang tindih :

Penulisan tag yang benar :

teks tag1

teks tag 2

teks tag1

teks tag 2

Kemungkinan kesalahan yang terjadi adalah lupa memberi tag awal atau tag akhir sehingga web page yang dihasilkan akan terlihat lain dari yang diinginkan.

Tidak semua tag mengikuti aturan seperti diatas, terdapat beberapa macam bentuk tag yang dikenal oleh HTML, di mana umumnya tag-tag dalam HTML muncul dalam bentuk seperti berikut :

teks

teks

Sebagai contoh :

Home Page Irawan


http://www.unikom.ac.id/>WebSite UNIKOM

2.5 Desain HTML

Untuk mempermudah pemahaman diberikan contoh dalam bentuk file HTML

Modul Pengantar Ilmu Komputer

Klasifikasi dan Kegunaan Komputer

Komputer berasal dari kata to compute yaitu menghitung.Jadi pada awalnya komputer hanya digunakan sebagai alat hitung, namun perbedaan yang mendasar dengan kalkulator adalah bahwa komputer mempunyai perkembangan zaman, komputer digunakan manusia untuk memproses pemecahan masalah.


Untuk lebih jelas tentang kegunaan komputer, komputer dibagi dalam beberapa klasifikasi, yaitu :

  • Berdasarkan Jenis Data Yang Diolah
  • Berdasarkan Kemampuan Komputer


  • Untuk menampilkan hasilnya, kita buka internet explorer dan buka file html tersebut.

















    Gambar 6.2 Browse Halaman Web


    Penjelasan dari elemen dan tag html yang digunakan untuk program diatas :

    1. Perintah HTML digunakan sebagai awalan untuk suatu dokumen html.
    2. Perintah HEAD digunakan untuk menunjukkan bagian judul dokumen. Sifatnya opsional (boleh ditulis/tidak)
    3. PerintahTITLE digunakan untuk memberikan judul pada masing.masing dokumen. Judul ini akan ditampilkan dibagian atas web browser.
    4. Perintah BODY menunjukkan bagian isi dari dokumen html tersebut.
    5. Perintah H1 digunakan untuk penetapan besar huruf (heading). Apabila angka yang menyertai huruf H semakin besar, maka huruf semakin kecil.
    6. Perintah HR digunakan untuk membuat garis
    7. Perintah OL digunakan untuk membuat daftar. LI untuk isi daftar.
    8. Perintah A HREF digunakan untuk membuat link.

    2.6 Elemen Dasar HTML

    HTML tidak hanya menyediakan teks saja dalam dokumennya, tetapi juga mampu menampilkan objek-objek multimedia seperti gambar, suara, video, dan bahkan telah merambah lebih jauh dengan adanya VRML serta applet-applet Java. Untuk informasi yang berupa teks, HTML telah menyediakan bermacam-macam elemen, seperti :

    • PARAGRAPH untuk membuat suatu paragraf
    • BLOCKQUOTE untuk membuat suatu kutipan teks
    • PREFORMATTED TEXTuntuk menampilkan teks seperti yang dituliskan
    • DIVIDER digunakan untuk mengelompokkan suatu teks tertentu

    2.6.1 Paragraf

    Elemen

    ………..

    digunakan untuk menandai sekumpulan teks sebagai suatu paragraf.Tag

    untuk awal paragraf dan tag

    digunakan untuk mengakhiri paragraf.

    Tag paragraf memiliki atribut yang dapat dipakai sebagai tambahan untuk pemformatan paragraf

    Atribut

    Argumen

    Keterangan

    Align

    Right

    Center

    Left

    Justify

    Digunakan untuk perataan suatu paragraf, apakah rata kiri,kanan, tengah ataupun rata kiri/kanan (justify)

    Berikut, diberikan contoh-contoh kode HTML untuk menampilkan paragraf

    Paragraf satu.

    Paragraf dua.

    Paragraf tiga.

    Elemen paragraf didefinisikan dengan menggunakan tag P.

    Contoh kode HTML dengan tambahan atribut :

    Paragraf dengan perataan kanan.

    Paragraf dengan rata tengah.

    Paragraf tiga.

    Paragraf dengan perataan justify.

    Hasil dapat dilihat pada browser sebagai berikut :

















    Gambar 6.3 Contoh Tag Paragraf


















    Gambar 6.4 Contoh Tag paragraf dengan Perataan


    2.6.2 Blockqoute

    Tag

    digunakan untuk menuliskan suatu kutipan teks. Browser biasanya menampilkan kutipan teks dengan mengidentifikasikan teks tersebut atau dengan mengabaikan spasi dalam teks seperti tag paragraf . kutipan teks dinyatakan dengan indentasi yang menjorok ke dalam dan berbeda dalam satu paragraf.

    Berikut ini, contoh dokumen HTML yang menggunakan tag blockquote :

    Teknologi Universal Serial Bus (USB)

    Pada awal tahun 1977 tepatnya komputer dengan prosesor Pentium, beberapakomputer sudah mempunyai piranti baru untuk memudahkan pengguna komputer dalam menangani masalah kabel yang bayak.

    Teknologi baru tersebut dinamalan Universal Serial Bus atau yang lebih

    dikenal dengan USB. Memang masih bayak yang tidak mengetahui apa dan

    fungsi teknologi ini. Oleh sebab itu bab ini akan memperkenalkan apa yang

    dimaksud dengan USB dan kegunaannya.

    Disadur dari Buku " Pengantar Sistem Komputer" Hal:134















    Gambar 6.5 Contoh Blockquote


    2.6.3 Preformatted Text

    Pada tag paragraf, penekanan tombol ENTER, Tab, Spasi tidak memberikan pengaruh pada web page yang kita buat. Bagaimana jika misalnya kita betul-betul ingin menambahkan spasi dan enter pada teks dalam web page kita. Masalah ini dapat dipecahkan dengan menggunakan tag

    …..
    . Sehingga teks yang berada di dalam tag pre akan mengikuti sesuai dengan pengetikan yang kita lakukan. Berikut ini adalah contoh dokumen HTML yang menggunakan Tag

    CONTOH PENGGUNAAN TAG PRE

    Teks ini menggunakan s p a s i dan ENTER

    untuk berpindah ke baris ini.

    Tag pre juga sangat cocok untuk menampilkan baris-baris kode program

    seperti dibawah ini

    for i = 1 to 10

    print i

    next i

    Kita Juga dapat membuat gambar dengan format teks seperti berikut :

    /\_/\

    ( o o )

    - meooongg........

    Dari program diatas akan dihasilkan dokumen yang tampak seperti di browser


















    Gambar 6.6 Contoh Tag Pre

    Bandingkan hasilnya jika tag pre dihilangkan.










    Gambar 6.7 Tag Pre Dihilangkan


    2.6.4 Divider dan Center

    Elemen DIV digunakan untuk membagi-bagi dokumen HTML dalam suatu hieraki yang terstruktur. Teks yang dikelilingi oleh tag

    ……..
    akan diformat menurut nilai atribut ALIGN yang ditentukan di dalamnya. Nilai atribut ALIGN yaitu, Left, Center dan Right.

    Penggunaan DIV dengan Align=”center” dapat diganti dengan tag

    ….
    . Keduanya menghasilkan hasil yang sama

    Teks rata kiri dalam tag DIV

    Teks rata kanan dalam tag DIV

    Teks rata tengah dalam tag DIV


    teks ini menggunakan perintah center sebagai pengganti align center pada div

    Hasilnya dapat dilihat pada browser dibawah ini :













    Gambar 6.8 Tag DIV dan CENTER


    2.6.5 Karakter Spesial

    Karakter-karakter spesial adalah karakter-karakter yang penggunaannya dalam HTML harus menggunakan kode-kode tertentu. Tanda <> adalah salah satu contoh dari karakter spesial. Karakter-karakter ini merupakan karakter khusus yang digunakan untuk menandai suatu tag HTML. Untuk menampilkan karakter-karakter ini dalam suatu web page diperlukan suatu kode khusus yang disebut entity . Terdapat dua macam entity dalam HTML, yaitu karakter entity dan numerik entity yang menggunakan suatu kode angka untuk mewakili suatu karakter spesial.

    Karakter entity menggunakan suatu nama tertentu sebagai ganti karakter spesial dan diawali dengan tanda & serta diakhiri dengan tanda ;. Beberapa contoh karakter entity adalah :

    <

    Mewakili karakter <

    >

    Mewakili karakter >

    ©

    Mewakili karakter ©


    Numerik entity menggunakan suatu kode angka untuk mewakili suatu karakter spesial dan diawali dengan tanda &# dan diakhiri dengan tanda ;. Salah satu contoh numerik entity adalah &#187 yang mewakili karakter >>. Berikut ini adalah contoh penggunaan karakter-karakter spesial dalam HTML.

    Contoh Penggunaan Karakter Spesial


    » Tag<I> digunakan untuk memiringkan teks

    » Kurt Gödel adalah seorang ahli matematika Jerman

    » Menggunakan karakter Spesial

    ¹ &copy; untuk membuat tanda ©

    ² &reg; untuk membuat tanda ®

    ³ &trade untuk membuat tanda ™

    Adapun hasil dari program diatas dapat dilihat pada browser dibawah ini :
















    Gambar 6.9 Contoh Penggunaan Karakter Spesial


    2.6.6 Komentar

    Komentar digunakan untuk memberikan suatu penjelasan perintah HTML yang tidak akan ditampilkan di dalam browser. Untuk membuat komentar suatu teks diapit oleh tanda .

    Sebagai contoh dapat dilihat pada dokumen HTML berikut :

    Contoh penulisan teks biasa



    0 komentar: