Banyak orang masih menulis HTML secara manual menggunakan perangkat lunak seperti NotePad pada Windows, atau TextEdit pada Mac. Petunjuk ini akan membuat anda membantu anda memahami dan membuatnya sendiri. Dan bila anda tidak ingin mengedit HTML secara manual dan ingin menggunakan HTML editor seperti Netscape Composer, atau W3C Amaya, petunjuk ini akan membuat anda mengerti, cukup untuk membuat anda mampu menggunakan perangkat tersebut lebih baik dan membuat dokumen HTML anda dapat di akses oleh berbagai macam browser. Begitu anda merasa nyaman dengan konsep dasar pembuatan HTML, anda mungkin ingin belajar bagaimana menambahkan style menggunakan CSS, dan lanjut dengan fitur yang dibahas pada halaman saya di HTML lanjutan.
catatan. sebauah cara yang baik untuk belajar ialah dengan melihat bagaimana orang lain menulis halaman HTML mereka sendiri. Untuk melakukan hal ini, click pada menu "View" lalu pada "Source". Pada beberapa browser, anda perlu mengklik pada menu "File" dan kemudian pada "View Source". Cobalah pada halaman ini untuk melihat bagaimana saya menerapkan beberapa ide yang saya jelaskan dibawah. Anda akan menyadari bahwa anda mengembangkan kemampuan untuk melihat kesalahan kesalahan yang dibuat karena banyak halaman terlihat bagus sumbernya sebenarnya berantakan!
Untuk pengguna Mac, sebelum anda dapat dapat menyimpan file dengan akhiran (extention) ".html", anda harus memastikan bahwa dokumen anda di ketik dalam bentuk plain text. Untuk TextEdit, anda dapat membuatnya dengan opsi "Make Plain Text" dari menu "Format".
Halaman ini akan mengajarkan anda bagaimana:
- mulai dengan sebuah judul
- mulai menambah heading dan paragraf
- menambah emphasis pada teks
- menambah gambar
- menambah link ke halaman lain
- menggunakan berbagai macam list (daftar)
Mulai dengan sebuah judul
Tiap dokumen HTML membutuhkan sebuah judul. Anda perlu mengetiknya sebagai berikut:<title>Dokumen HTML saya yang pertama</title>Ganti teks tersebut "Dokumen HTML saya yang pertama" sesuai kebutuhan anda. Teks judul tersebut diawali dengan tag pembuka <title> dan diakhiri dengan tag penutup yang sesuai </title>. Judul ini harus ditempatkan diawal dokumen anda.
Untuk mencoba hal ini, ketik hal diatas dalam sebuah teks editor dan simpan file tersebut sebagai "test.html", dan lihat dengan sebuah web browser. Bila akhiran file tersebut adalah ".html" or ".htm" maka browser akan mengenalinya sebagai HTML. Kebanyakan browser muncul di menunjukkan judul di bagian caption bar dari browser. Dengan hanya sebuah title, browser akan menunjukkan sebuah halaman kosong. Jangan khawatir. Bagian berikut akan menunjukkan bagaimana menambahkan konten yang dapat di lihat.
Menambah heading dan paragraf
Bila anda pernah menggunakan Microsoft Word, anda akan terbiasa dengan style yang ada untuk heading dengan tingkat kepentingan yang berbeda. Pada HTML ada enam tingkatan heading. H1 adalah yang paling penting, H2 lebih sedikit kurang penting, seterusnya hingga H6, yang paling tidak penting.Berikut adalah cara menambah sebuah heading yang penting:
<h1>Sebuah heading yang penting</h1>dan beikut sebuah heading yang kurang begitu penting:
<h2>Sebuah heading yang sedikit kurang penting</h2>Setiap paragraf yang anda tulis harus diawali dengan tag <p>. Tag </p> merupakan opsi, tidak seperti end tag untuk elemen seperti heading. Sebagai contoh:
<p>Ini adalah paragraf pertama.</p> <p>Ini adalah paragraf kedua.</p>
Menambahkan sedikit of emphasis
Anda dapat menambahkan tekanan (emphasis) pada satu atau dua buat kata dengan tag <em>, sebagai contoh:Topic ini adalah topik yang sangat <em>menarik</em>!
Menambahkan perhatian pada halaman dengan gambar - gambar
Gambar-gambar dapat digunakan untuk membuat halaman Web anda berbeda dengan yang lain dan sangat membantu anda dalam menyampaikan pesan anda. Cara mudah untuk menambahkan gambar adalah dengan menggunakan tag <img>. Mari assumsikan bahwa anda memiliki sebuah gambar dengan bernama "peter.jpg" di folder/directory file HTML anda. Gambar tersebut tingginya 200 pixel dan lebar 150 pixel.<img src="peter.jpg" width="200" height="150">Attribut src anda beri nama file gambar tersebut. Width dan height tidak diwajibkan tetapi membantu mempercepat tampilannya di halaman Web anda. Sesuatu masih kurang! Orang yang tidak dapat melihat gambar membutuhkan deskripsi yang mereka bisa baca sebagai penggantinya. Anda bisa menambahkan penjelasan singkat sebagai berikut:
<img src="peter.jpg" width="200" height="150" alt="Teman saya Peter">Atribut alt digunakan untuk memberikan deskripsi singkat, dalam hal ini "My friend Peter". Untuk gambar yang kompleks, anda mungkin perlu menambahkan deskripsi yang lebih panjang. Dengan asumsi bahwa hal ini telah tertulis pada file "peter.html", anda dapat menambahkan hal berikut menggunakan atribut longdesc:
<img src="peter.jpg" width="200" height="150" alt="Teman saya Peter" longdesc="peter.html">Anda dapat membuat gambar dengan berbagai cara, sebagai contoh dengan sebuah digital kamera, dengan mengscan sebuah gambar, atau membuatnya dengan menggunakan program untuk menggambar atau melukis. Kebanyakan browser mengerti format gambar GIF dan JPEG, browser baru juga mengerti format gambar PNG. Untuk menghindari waktu yang lama ketika gambar tersebut di download melewati jaringan, anda sebaiknya menghindari penggunaan file gambar yang besar.
Secara umum, JPEG paling baik digunakan untuk photo dan gambar lain yang sejenis, segankan GIF dan PNG baik untuk gambar seni yang melibatkan warna yang datar, garis dan tulisan. Ketiga format mendukung opsi untuk di render secara bertahap (progressive rendering) dimana gambar kasarnya diperlihatkan dahulu lalu secara perlahan di haluskan.
Menambahkan link ke halaman lain.
Apa yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah klik dapat membawa anda langsung ke seberang dunia!Link didefinisikan dengan tag <a>. Mari membuat sebuah link pada file "peter.html" di folder/direktori yang sama dengan file HTML yang sedang anda edit::
Ini adalah link ke <a href="peter.html">halamannya Peter</a>.Teks antara <a> dan </a> digunakan sebagai keterangan dari link. Adalah hal yang umum bagi keterangan tersebut untuk diberi garis bawah berwarna biru.
Bila file yang anda link adalah direktori asal (parent directory), anda perlu menambahkan "../" sebelumnya, sebagai contoh:
<a href="../mary.html">halamannya Mary</a>Bila file yang dilink adalah sebuah sub direktori, anda perlu memberikan nama dari subdirektori tersebut diikuti sebuah "/" setelahnya, sebagai contoh:
<a href="friends/sue.html">halamannya Sue</a>Penggunaan relative path memungkinkan anda melink sebuah file dengan pergi naik atau turun direktori sesuai kebutuhan, sebagai contoh":
<a href="../college/friends/john.html">halamannya John</a>Di mana pertama kali akan dicari pada direktori asal, dari sebuah direktori lain bernama "college", dan kemudian sebuah subdirektori dengan nama "friends" untuk sebuah file dengan nama "john.html".
Untuk melink ke sebuah halaman atau situs Web lain anda perlu memberikan alamat lengkap Web (umumnya dinamakan URL), sebagai contoh untuk melink ke www.w3.org anda perlu menuliskan:
Ini adalah sebuah link menuju<a href="http://www.w3.org/">W3C</a>.Anda dapat mengubah sebuah gambar menjadi sebuah link hypertext, sebagai contoh, berikut ini memungkinkan anda untuk mengklik pada logo perusahaan untuk pergi ke halaman utama / depan:
<a href="/"><img src="logo.gif" alt="home page"></a>Contoh ini menggunakan "/" untuk menghubungi direktori asal, yang mana adalah home page.
Tiga jenis daftar
HTML mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet (bulletted list), atau sering disebut unordered list. Yang menggunakan tag <ul> dan <li>, sebagai contoh:<ul> <li>list item pertama</li> <li>list item kedua</li> <li>list item ketiga</li> </ul>Catatan bahwa anda perlu mengakhiri daftar dengan tag </ul>, tetapi tag </li> merupakan opsi dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga disebut ordered list. Hal tersebut menggunakan tag <ol> dan <li>. Sebagai contoh:
<ol> <li>list item pertama</li> <li>list item kedua</li> <li>list item ketiga</li> </ol>Seperti juga bulletted lists, anda perlu mengakhiri daftar dengan tag </ol>, tetapi tag penutup </li> merupakan opsi dan dapat di hiraukan.
Yang ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan anda untuk membuat daftar suatu hal dan penjelasannya. Daftar ini diawali dengan sebuah tag <dl> dan diakhiri dengan </dl> Tiap hal diawali dengan sebuah tag <dt> dan tiap penjelasannya diawali dengan sebuah tag <dd>. Sebagai contoh:
<dl> <dt>hal pertama</dt> <dd>penjelasannya</dd> <dt>hal kedua</dt> <dd>penjelasannya</dd> <dt>hal ketiga</dt> <dd>penjelasannya</dd> </dl>Tag penutup </dt> dan </dd> merupakan opsi dan dapat diabaikan. Perlu dicatat bahwa daftar ini bisa saling disisipkan, satu diantari yang lain. Sebagai contoh:
<ol>
<li>list item pertama</li>
<li>
list item kedua
<ul>
<li>list pertama yang disisipkan</li>
<li>list kedua yang disisipkan</li>
</ul>
</li>
<li>list item ketiga</li>
</ol>Anda juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang lebih panjang..HTML memiliki sebuah head dan body
Bila anda menggunakan fitur view source dari web browser anda (lihat menu View atau File) anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya dimulai dengan sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian diawali dengan sebuah tag <html> dikuti dengan tag <head> dan diakhiri dengan </html>. Tag <html> ... </html> berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> ... </head> mengandung judul, dan informasi style dan script, sementara <body> ... </body> mengandung markup dari isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy dan paste ke text editor untuk menciptakan halaman anda sendiri:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> ganti dengan judul dokumen anda </title>
</head>
<body>
ganti dengan isi dokumen anda
</body>
</html>
Merapikan markup anda
Sebuah cara yang tepat untuk memperbaiki markup secara otomatis adalah dengan menggunakan HTML Tidy yang juga merapikan markup agar dapat dibaca dengan baik dan lebih mudah di edit. Saya sarankan agar anda menggunakan Tidy pada tiap markup yang anda edit. Tidy sangat efektif untuk membersihkan markup yang dibuat oleh peralatan yang memiliki kebiasaan buruk. Tidy tersedia untuk berbagai macam sistem operasi dari TidyLib Sourceforge site, dan juga telah di integrasikan dengan berbagai macam peralatan mengedit HTML.Mendapatkan Informasi Lebih Lanjut
Bila anda ingin belajar lebih jauh, saya telah menyiapkan beberapa materi penunjangmengenai HTML lanjutan dan menambahkan sedikit style.Rekomendasi W3C tentang HTML 4.0 adalah spesifikasi yang sifatnya mutlak untuk HTML. Tetapi, hal tersebut adalah sebuah spesifikasi teknis. Untuk sebuah informasi yang bersifat lebih kurang teknis anda mungkin ingin membeli salah satu dari sekian banyak buku mengenai HTML, sebagai contoh "Raggett on HTML 4", yang diterbitkan 1998 oleh Addison Wesley. Sekarang XHTML 1.0 adalah Rekomendasi W3C.
Semoga beruntung dan mulailah menulis!
Dave Raggett <dsr@w3.org>
Tidak ada komentar:
Posting Komentar