Warning: Parameter 1 to modMainMenuHelper::buildXML() expected to be a reference, value given in /home/shisnorg/public_html/libraries/joomla/cache/handler/callback.php on line 99
We have 7 guests online
Members : 21
Content : 138
Web Links : 17
Content View Hits : 29212

Apa itu HTML? PDF
Programming
Written by Shin Himura   
Wednesday, 02 December 2009 09:37

Coba klik kanan di tempat kosong pada halaman web ini, lalu pilih "view page source". Tada... buat yang ngerti ya ngerti la, buat yang ngga, mantra apakah gerangan ini? Yang kalian lihat barusan adalah bahasa html, bahasa yang wajib digunakan jika mau bikin website. Yang pengen belajar klik read more!

Bahasa html bisa dibilang adalah bahasa pemrograman yang paling sederhana, kalau uda jago, website apapun bisa dibuat cukup dengan notepad. Itu kalau uda jago, kalau belum, belajar dulu di Shisen garden :p

Pertama, kita bahas dulu dasar-dasar html. Untuk bisa membuat halaman web, harus bisa membuat halaman web, untuk bisa membuat halaman web, harus bisa menuliskannya dalam bahasa html, untuk bisa bahasa html, harus mengerti struktur dan perintah-perintahnya lebih dulu.

Struktur HTML

Tadi aku bilang bikin halaman web bisa lewat notepad. Nah, kenapa bisa tulisan-tulisan di notepad kita berubah jadi halaman web? Dan kenapa pula coret2an lainnya tetep aja coret2an geje? Karena untuk bisa jadi halaman web, mesti memenuhi syarat seperti ini:
1. Filenya berekstensi html atau htm
2. Di dalamnya terdapat perintah-perintah (tag) html
Kalau dua syarat tersebut dipenuhi, hasil save-an notepad kalian sudah bisa dibilang webpage, oleh browser sudah dianggap demikian, tapi tentu saja aku ga bilang itu uda jadi webpage yg bagus dan enak dilihat.

Syarat pertama mestinya gampang, ga perlu kujelaskan di sini. Lalu syarat kedua, kita bahas dikit di sini. Sisanya di kelas aja.

Ok, aku langsung saja ajarin cara buat webpagenya. Buka notepad kalian. Perintah (tag) html yang paling pertama harus kalian ketikkan adalah ini
<html>
Satu hal yang harus kalian ingat baik2 adalah, setiap perintah html dijepit dengan tanda kurung siku, dan setiap perintah harus ditutup. Cara nutupnya? Yaitu dengan mengulangi perintahnya, tapi ditambah garis miring di depannya, seperti ini
</html>
Bagi yang sering main di forum mestinya mengerti jelas soal ini, karena prinsipnya sama saja dengan forum code.

Nah, uda mulai penasaran apa saja tag-tag (perintah) yang bisa dimasukin?
Sekarang coba ketik ini dulu:

<html>
<head>
<title>Webpage pertamaku! Diajarin ama Shisen garden</title>
</head>
<body>
<h1>Judul : Ini namanya webpage</h1>
<br/>
<div>Mulai hari ini lebih semangatlah dalam membuat website.</div>
</body>
</html>

Aku bisa baca pikiran kalian, ya uda, copy paste aja ke notepad. Terus save dengan nama index.html.

Sudah? Buka di browser seperti mozilla. Tada.. buat yang belum pernah buat website, inilah webpage pertama kalian. Kosong? Emang, namanya juga pertama.

Ok, biar sip aku kasi penjelasan dikit mengenai perintah2 yang telah kalian copypaste tadi.

<html> uda jelas, semua file html harus dimulai dengan perintah ini, supaya browser bisa membaca perintah2 html yang dituliskan setelahnya. Dengan kata lain, wajib.

<head> artinya kepala (ya iya la). Maksudnya gini, tag ini fungsinya seperti label pada suatu barang. Karena label, otomatis bukan isi. Jadi di label ini kita bisa isikan beberapa informasi yang tidak akan muncul di halaman utama browser. Contohnya judul. Masih banyak manfaat lainnya dari header, tapi aku akan pelit-pelit dulu, beri tahunya dikit-dikit...

<title> sesuai namanya, tag ini untuk memberi judul pada halaman webpage.

<body> nah, semua tulisan dan perintah yang dijepit tag ini akan muncul di halaman utama browser. Di sini lah kalian akan banyak bekerja nantinya.

<h1> sebenarnya bisa kalian ganti dari h1 sampai h6. Fungsinya untuk mengganti ukuran tulisan. h1 paling besar, h6paling kecil. Biasanya untuk format judul artikel dll.

<br/> Nah lho, tadi katanya setiap perintah mesti ditutup, kok ini ngga? Haha, perintah ini uda ditutup kok, liat aja tuh garis miringnya uda ada. Ini namanya break, fungsinya sama seperti menekan tombol enter kalau sedang mengetik di MS Word. Karena fungsinya yang sama saja dengan menambahkan karakter atau huruf, maka tidak dibutuhkan buka tutup segala, karena ngga perlu menjepit apa-apa di dalamnya. Selain break masih ada beberapa lainnya, misalnya horisontal rule <hr/> yang digunakan untuk membuat garis sepanjang paragraf. Harap diingat, menekan enter di notepad tidak akan dimunculkan sebagai spasi paragraf di browser, ingat untuk menggunakan break supaya tulisanmu ngga lengket-lengket seperti mi.

<div> apa ini? Kok kayaknya ngga ada efek? Bukan ngga ada efek, div digunakan untuk membuat paragraf tersendiri. Setiap kata yang dijepit oleh div akan dianggap paragraf tersendiri yang langsung punya spasi sebelum dan sesudah paragraf. Sama saja dengan memasukkan dua break di awal dan akhir paragraf. Hanya itu saja? Ya ngga la. Dengan div kalian juga bisa memformat paragraf seperti memberikan warna dasar, tata letak, alignment, warna serta ukuran huruf dan sebagainya. Bekerja dengan div malah lebih gampang karena bisa langsung dihubungkan dengan css. Apa itu css, nanti saja la...

Sisanya tinggal menutup body dan htmlnya. Selesai. Apa tadi ada yang nanya, kenapa aku nyebut-nyebutnya webpage melulu? Ngga sekalian aja website biar enak didengar? Ga bisa, karena beda. Yang kalian buat barusan adalah webpage (halaman web), yang artinya ya.. memang cuma satu halaman. Kalau mau disebut sebagai website (situs web), paling tidak buatlah satu atau dua halaman web lagi, terus dihubungkan pakai "link". Nah lho, apaan pula itu link. Hehe, kali ini aku lagi pelit, pertemuan selanjutnya saja ya..

Cukup sampai sini dulu, kalau ada pertanyaan klik sini.
Last Updated on Friday, 04 December 2009 15:11
 
Valid XHTML and CSS.