Pemrogaman WEB dengan HTML, Pengenalan HTML, Apa itu Dokumen HTML, Penamaan Dokumen, Definisi Elemen, Definisi Tag, Elemen HTML yang Dibutuhkan, Apa saja yang Dibutuhkan Untuk Belajar, Penjelasan Contoh, Petunjuk untuk Menggunakan Tag, Atribut Tag, Tips: Belajar HTML Lewat Source HTML Lain
Apa itu Dokumen HTML
HTML kependekan dari Hyper text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai web page. Dokumen HYML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi didalam internet.
Ada dua cara untuk membuat sebuah web page: dengan HTML editor atau dengan editor text biasa (misalnya notepad). Untuk latihan atau mencoba materi pada tulisan ini sebaiknya menggunakan notepad, setelah itu pada bagian mendekati akhirdapat menggunakan editor HTML, hal ini dimaksudkan agar anda memahami dan terbiasa secara primitive membuat dokumen web.
Penamaan Dokumen
Pilih suatu nama, sembarang nama, kemudian tambahkan sebuah ekstensi “.htm” atau “.html” (tanda petik ganda tidak perlu dituliskan karena digunakan sebagai penjelas saja).
Catatan:
Ekstensi dokumen HTML yang menggunakan 3 karakter, awalnya adalah untuk mengakomodasikan system penemaan yang ada dalam system operasi DOS. Nama dokumen pada beberapa system operasi bersifat case sensitive. Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen.html akan berbeda dengan DOKUMEN.html. kasus case sensitive akan dijumpai pada dokumen web yang dihosting didalam server yang berbasis *nix (keluarga system operasi unix).
Definisi Elemen
Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen adalah: head, body, table, paragraph, dan list. Elemen dapat berupa text murni, atau bukan text, atau keduanya.
Definisi Tag
Untuk menendai bebagai elemen dalam suatu dokumen HTML, kita mengguanakan tag. Tag HTML terdiri dari atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya <h1>dengan </h1>, tag yangh menjadi pasangan selalu diawali dengan karakter garing (/, garis miring). Tag yang pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen.
Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen didalam dokumen HTML ahrus ditandai dengan penulisan tagnya yang berpasangan, ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, elemen tersebut diantaranya adalah:
ü Paragraph dengan tag <p>
ü Ganti baris – line break dengan tag <br>
ü Garis datar – horizontal rule dengan tag <hr>
ü List item dengan tag <li>
Secara umum suatu elemen dalam komponen HTML yang dinyatakan dengan tagnya dituliskan:
<nama tag> … </nama tag>
Daftar tag secara lengkap dapat dilihat pada bagian lampiran.
Catatan:
Untuk tag-tag yang tidak mengharuskan pasangannya (tag akhirnya) dituliskan sebaiknya dituliskan juga oleh pemrogram web, untuk mendisiplinkan. Dampak kedepan adalah untuk mengantisipasi standar rekomendasi HTML generasi mendatang. Sehingga pada saat kita misalnya menyusun paragraph dengan tag <p> selalu diakhiri dengan </p>.
Penulisan penamaan tag bebas, dapat menggunakan huruf besar (capital), huruf kecil, ataupun campuran ( tidak case sensitive ). Tetapi untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag dengan menggunakan huruf kecil semuanya.
Tag markup ini digunakan sebenarnya member browser web bagaimana memperlakukan atau menampilkan (memformat) halaman dokumen tersebut dalam browser.
Elemen HTML yang Dibutuhkan
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>, <head>, <body> berikut tag-tag pasangnannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tenteng dokumen tersebut, dan elemen body berisi text yang sebenarnya yang tersusun dari link, grafis, paragraph, dan elemen lainnya.
Secara umum dokumen web dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen html harus mempunyai pola dasar sebagai berikut:
<html>
<head>
… informasi tentang dokumen html
</head>
<body>
… informasi yang ditampilkan dalam browser web
</body>
</html>
Setiap dokumen html harus diawali dengan menuliskan tag <html> dan tag </html> diakhir dokumen. Tag ini menandai elemen html, yang berarti dokumen ini adalah dokumen HTML. Dalam dokumen hanya ada satu dokumen html.
Section atau elemen head ditandai dengan tag <head> diawal, dan tag </head> di akhir. Section ini berisi tentang informasi tentang dokumen htmlnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, ditandai dengan menggunakan tag <title> dan diakhiri dengan </title>.
Section atau elemen body ditandai dengan tag <body>di awal, dan tag </body> di akhir.
Section body merupakan elemen terbesar di dalam dokumen html. Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraph, grafik, link, table, dan sebagainya.
Apa saja yang Dibutuhkan Untuk Belajar
ü Sebuah computer yang siap web. Computer dengan windows 95/98/NT, Mac, UNIX atau yang lebih baru.
ü Editor teks , notepad atau yang lainnya
ü Koneksi ke server web (kalau mungkin koneksi ke internet)
ü Browser web, direkomendasikan Internet Explorer (4.0 atau yang terbaru) atau Netscape Navigator (4.0, atau yang terbaru)
ü Langkah berikutnya adalah surfing internet, melihat-lihat website untuk mendapatkan dan membangun ide dari apa yang dilihat
Mencoba adlah kunci dari cara belajar HTML ini untuk mengetahui langsung apa yang dihasilkan dari setiap tag yang digunakan untuk membuat.
Buat direktori kerja di drive C anda dengan nama latihan, kemudian buiat lagi subdirektori dibawahnya dengan nama html. Jalankan notepad.
Tuliskan ke dalamnya teks seperti berikut:
<!—contoh.htmlà
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Ini adalah Home Page pertamaku.
<b> Ini sekedar tekslainnya</b>
</body>
</html>
Penjelasan Contoh
Tag pertama pada dokumen html anda adalah <html>. Tag ini member tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah </html>. Tag ini member tahu browser anda bahwa ini adalah akhir dari dokumen HTML.
Teks antara <head> dan </head> adalah informasi header. Informasi header tidak ditanpilkan pada window browser. Hanya teks yang berada di antara tag <body> dan </body> yang akan ditampilkan pada browser anda.
Teks di antara tag <title> dan </title> adalah judul dokumen anda. Judul ditampilkan pada window caption anda.
Petunjuk untuk Menggunakan Tag
- Tag HTML diapit dengan dua karakter kurung bersudut (angle bracket) < dan >.
- Tag HTML secara normal selalu berpasangan seperti <b> dan </b>.
- Tag pertama pada suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.
- Tag HTML tidak ‘case sensitive’. <b> berarti sama dengan <B>.
- Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurut. Misalnya <b><I> Huruf Tebal dan Miring </I></b>.
Gunakan tag dengan huruf kecil (lowercase).
Tag HTML tidak case sensitive: sebagai contoh <B> berarti sama dengan <b>. Jika anda melakukan surfing dalam web, anda akan mencatat kebanyakan tutorial HTML menggunakan tag HTML dengan huruf besar (uppercase) pada contoh-contohnya. Pada contoh kita menggunakan huruf kecil. Mengapa?
Karena:
- Untuk menyiapkan anda menggunakan HTML pada generasi berikutnya.
- W3C merekomendasikan menggunakan tag dengan huruf kecil pada rekomendasi html 4.0 dan XHTML cenderung menggunakan tag dengan huruf kecil.
Atribut Tag
Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.
Tag berikut tidak mempunya atribut: <body>. Tag <body> tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna dasar putih.
Tag berikut mempunyai atribut: <body bgcolor=”red”>. Tag <body> ini menggunakan atribut bgcolor dengan nilai “red”., maka dokumen yang ditampilkan akan mempunyai warna background merah.
Tag berikut tidak mempunyai atribut: <table>. Tag tanpa atribut ini menyebabkan table ditampilkan dengan menggunakan garis batas (border).
Tag berikut mempunyai atribut: <table border=”1”>. Atribut ini akan menyebabkan table ditampilkan dengan menggunakan garis batas (border) pada tabel yang ditampilkannya.
Secara umum tag dengan atributnya adalah sebagai berikut: <nametag atrl=”nilai-atrl” atrl2=”nilai-atrl2”…>…</nametag>
Atribut setiap tag akan berbeda-beda.
Catatan:
(Berlaku apabila telah menggunakan standar HTML 4.0) Walaupun setiap tag mempunyai atribut, tidak dianjurkan pemrogram web untuk menggunakan atribut ini untuk mengubah default dari suatu tag. Karena pemrogram HTML harus menggunakan style sheet. à lihat penjelasan dan latihan tentang style sheet.
Tips: Belajar HTML Lewat Source HTML Lain
Belajar HTML akan lebih efektif jika kita sering berlatih dan melihat bagaimana programmer web lain melakukannya.
Pernahkah anda melihat suatu web page dan terkagum melihatnya: “Bagaimana Mereka membuatnya?”.
Untuk mengetahuinya, mudah saja: klik menu view pada menu bar, kemudian pilih source atau page source.
Ini kan akan membuat sebuah window baru yang memperlihatkan HTML sebenarnya dari page tersebut.
Dengan melihat source ini diharapkan anda dapat melihat dan mempelajari teknik untuk menghasilkan halaman web yang anda kagumi tadi.
Menu diatas tidak sama antar browser. Pada intinya anda dapat menggunakan menu atau pilihan yang ada di menu untuk menampilkan source dari web page tersebut.
