HTML

24 01 2010

Ini adalah sebuah perkenalan singkat menganai bagaimana menulis HTML. Apakah HTML itu? HTML adalah sebuah jenis teks dokumen khusus yang digunakan oleh Web browser untuk mempresentasikan teks dan gambar. Di dalam teks tersebut terdapat tag markup seperti <p> untuk menandakan awal dari sebuah paragraf, dan </p> untuk menandakan akhir dari sebuah paragraf. Dokumen HTML sering disebut sebagai ”halaman Web”. Browser mengambil halaman Web dari Web server dan karena adanya Internet, halaman tersebut bisa berada di manapun di dunia.

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,

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 http://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>


Aksi

Information

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s




%d blogger menyukai ini: