Threaded Mode | Linear Mode

***digimaster*** · 07 April 2007, 22:34

Sebagai persyaratan utama buat belajar PHP atau ngga buat yang baru mulai belajar web design, kita belajar tentang HTML dulu. Kalau mau nanya, silakan dan jangan malu-malu. Big Grin

Oke, pertama-tama bagi anda yang menggunakan Internet Explorer buat browsing silahkan klik kanan dan pilih View Source, nanti bakal muncul kumpulan kode aneh di sebuah Notepad. Untuk pengguna Firefox, silahkan klik kanan dan pilih View Page Source, dan akan muncul juga kode-kode aneh di window lain. Untuk pengguna Opera, silahkan klik kanan dan pilih Source, kemudian juga bakal keluar kode yang aneh di tab baru. Untuk browser yang lain, coba cari aja yang namanya Source, biasanya ada hubungannya ama View atau klik kanan. Wink

Next, yang kalian liat setelah yang gue tulis di atas adalah kode HTML alias HyperText Markup Language. HTML ditandai dengan tanda <...> atau </...>. Forum yang sedang kalian ikuti ini sebenernya terdiri dari semua HTML itu.

Untuk baris pertama dari HTML nya, akan keliatan

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

nah itu adalah tag penanda kalau formatnya merupakan standar HTML dari W3C alias World Wide Web Consortium. Tapi kalau ga pake ini buat HTML juga ga jadi masalah.

Baris kedua dari HTML nya, adalah tag

Code:

<html lang="en">

Itu adalah tag pembuka dari seluruh HTML yang ada di halaman ini. lang yang ada di dalam tag itu adalah property dari tag html. Tanpa properti lang itu, tag html juga dapat berjalan dengan baik.

Sekarang scrool halaman source itu ke baris paling bawah dan kalian akan nemuin

Code:

</html>

Itu adalah tag penutup dari tag html. Tag penutup selalu ditandai dengan /.

Scrool ke atas lagi dan kita liat apa arti setiap tag.

<head> sampai </head> merupakan tag header (kepala) yang umumnya berisi informasi yang ga ditampilkan di layar browser secara langsung.
<title> sampai </title> merupakan tag judul. Kalau diliat di source yang kalian lihat, tulisan yang berada di antara tag itu merupakan judul dari halaman yang anda buka.
<meta> merupakan tag yang berisi data dasar dari halaman yang anda buka. Tag ini ga perlu tag penutup.
< script> sampai </script > merupakan tag yang berisi bahasa pemrograman web client side. Umumnya isinya merupakan kode JavaScript. Terkadang isinya cuma link ke suatu file yang isinya kode pemrograman itu. JavaScript akan dibahas suatu waktu.
<link> merupakan tag yang berisi alamat-alamat link yang khusus, seperti link ke style, gambar, RSS atau syndication. Tag ini ga punya tag penutup.
merupakan tag comment. Tag ini ga akan dieksekusi atau dibaca oleh browser dan hanya merupakan komentar saja.
<style> sampai </style> merupakan tag yang berisi style CSS (Cascading Style Sheet) untuk memperindah halaman web. Style CSS akan dibahas suatu waktu.
<body> sampai </body> merupakan tag utama yang membentuk gambar di layar browser.
<a> sampai </a> merupakan tag yang kepanjangannya anchor atau jangkar. Tag ini dapat digunakan untuk menghubungkan halaman lain dengan properti href. Contoh :<a href="http://forum.smabhk.com">Ke halaman utama</a>
Contoh di atas akan menghasilkan tulisan Ke halaman utama dimana akan terdapat link ke alamat http://forum.smabhk.com
<div> sampai </div> merupakan tag untuk suatu container atau isi. Biasanya tag ini dipadukan dengan style CSS agar lebih rapi.
<img> merupakan tag untuk melakukan link pada gambar. Misalnya
<img src="http://forum.smabhk.com/images/logo_beta.gif">
Contoh di atas akan menampilkan sebuah gambar yang terdapat di alamat http://forum.smabhk.com/images/logo_beta.gif
<ul> sampai </ul> merupakan tag untuk membuat daftar atau list. Umumnya digabung dengan tag <li> sampai </li> untuk membuat daftarnya. Setiap <li> sampai </li> akan memberikan satu poin list.
<br /> atau <br> merupakan tag untuk memberikan spasi ke bawah. Sama seperti menggunakan Enter di Microsoft Word atau program lain.
<table> sampai </table> merupakan tag untuk membuat table. Di dalam <table></table> terdapat tag <tr></tr> sebagai definisi sebuah baris. Di dalam <tr></tr> terdapat tag <td></td> sebagai definisi sebuah kolom. Urutan ini adalah mutlak. Sehingga susunannya adalah

Code:

<table> <tr> <td>Ini untuk baris 1 kolom 1</td> <td>ini untuk baris 1 kolom 2</td> </tr> <tr> <td>Ini untuk baris 2 kolom 1</td> <td>ini untuk baris 2 kolom 2</td> </tr> </table>
<form> sampai </form> merupakan tag untuk membentuk suatu form atau formulir pengisian. Di dalam tag <form></form> umumnya terdapat beberapa tag input berupa <input>, <option></option>, <textarea></textarea> dan <label></label> sesuai dengan input yang diinginkan.

Itu semua merupakan tag-tag yang umum dipakai. Masih terdapat banyak tag HTML yang belum disebutkan. Ada baiknya bila ingin menanyakan suatu tag lainnya, tag itu dicoba-coba terlebih dahulu. Big Grin

Untuk CSS dan JavaScript akan terdapat di thread terpisah. Wink

**Realmz** · 08 April 2007, 18:35

Untuk HTML Programming secara General bisa melihat ke http://www.w3schools.com/html/default.asp
Tetapi kalau untuk mengembangkan lebih lanjut lebih baik di coba-coba sendiri, atau bertanya sama yang suda ahli seperti Om DiGi Big Grin

.
Gw ampe sekarang aja belum bisa bedain Link di Tag Anchor < a > tuh sebenernya ada berapa jenis sih T_T bingung2. dpt tugas menggunakan semua jenis link yg ada pada tag anchor ituuuu ga bisaaa T_T

***digimaster*** · 08 April 2007, 21:14

Maksudnya link itu gimana? Klo yang diisi di dalam property href sih bisa lokal atau ke halaman lain. Yang lokal itu pake tanda kres (#) n biasa dihubungin ama properti name. Contohnya

Code:

<a href="#main_content">Ke main content</a>

.

.

.

<a name="main_content"></a>Ini main content nya.

Jadi kalau kita klik "Ke main content", halamannya bakal diarahin ke anchor bernama "main_content" yang ada di halaman itu sendiri.

Trus satu lagi anchor biasa ke halaman lain.

Code:

<a href="index.html">Kembali</a>

Kalau "Kembali" diklik, maka halaman index.html bakal ditampilin di halaman itu.

Trus ada lagi anchor gabungan.

Code:

<a href="index.html#maincontent">Klik di sini untuk ke maincontent di index</a>

Kalau "Klik di sini untuk ke maincontent di index" diklik, maka halaman index.html akan ditampilin, dan akan langsung diarahkan ke anchor bernama "maincontent".

Ga tau apakah yang u maksud itu yang ini. Smile

**Realmz** · 08 April 2007, 22:05

Sebenernya gw juga kurang jelas sih dosen kuw cuma bilang Buat link yang menggunakan semua tipe link di Tag Anchor ... Tapi mungkin yang seperti kk DiGi bilang kali yah. Y udalah. Makasi KK DiGi!!!

**korompis** · 09 April 2007, 13:59

Bisakah kalian menjelaskannya dengan bahasa yang lebih mudah dimengerti????

***digimaster*** · 09 April 2007, 14:33

Kayanya ini malah bahasa yang paling mudah dimengerti. Sekarang gue tanya yang mana yang susah dimengerti? Kalau misalnya ga dicoba gue rasa memang ga mungkin dimengerti.

Sebagai tambahan, program yang gue saranin buat coding HTML itu lebih baik pake Notepad++ yang bisa didownload di http://notepad-plus.sourceforge.net

Trus untuk rancangan layout, bisa pake Nvu (baca : En-View) di http://www.nvu.com

Itu program open source.. Big Grin

Tapi bagi kalian yang anti open-source, silahkan pake Macromedia Dreamweaver. Big Grin

Trus buka bagian Code.

Bagi kalian yang belum punya apapun dan males download program, bisa pake Notepad biasa. Wink

Coba copy paste coding yang ada di bawah setelah kalian ikuti instruksi di atas:

Code:

<html>

<head>

<title>Ini halaman percobaan</title>

</head>

<body>

<div align="center">

    <h1>Selamat Datang di website saya</h1><br />

    <a href="http://forum.smabhk.com/">Klik di sini untuk ke halaman forum</a><br />

    <table>

        <tr>

            <td>Keterangan</td>

            <td>Isi</td>

            <td>Tambahan</td>

        </tr>

        <tr>

            <td><b>Nama saya :</b></td>

            <td>The one</td>

            <td>This is the name of the chosen one</td>

        </tr>

        <tr>

            <td><b>Umur saya:</b></td>

            <td>10010 tahun</td>

            <td>This is my age in binary number</td>

        </tr>

        <tr>

            <td><b>Status saya:</b></td>

            <td>Single linked list</td>

            <td>This is my status if I wrote it in programming language</td>

        </tr>

    </table>

    <br />

    <small>Copyright &copy; 2007</small>

</div>

</body>

</html>

Trus kalau udah, coding itu disave sebagai coba.html. Perhatian : Jangan langsung save sebagai coba, apalagi anda menggunakan notepad atau Notepad++ sebagai editornya, soalnya biasa disave jadi coba.txt atau coba aja.

Terus buka file yang udah disave itu pake browser anda, Internet Explorer atau Mozilla Firefox atau Opera.
Terus analisislah apa maksud dari tag-tag itu. Wink

Kalau mau sih silakan tambah atau kurangin tulisan yang ada. Smile

**vine** · 19 June 2007, 16:14

korompis Wrote:Bisakah kalian menjelaskannya dengan bahasa yang lebih mudah dimengerti????

ini bhs HTML gampang kog... lu liet baik2.. dr awal tag bukanya (<html>) per tutup tagnya (</html>)

sbnernye nih bhs adl bhs termudah kedua stl Visual BAsic.. so baca dl plan2.. lama2 ngarti d.. krn ini ngedeketin bhs manusia BGT seh..

neko-neko^_^ · 22 August 2007, 20:03

Digi.... susah banget sih...g agak dudul2 dkt negh... Confused

sebnrna g pengen iktan web tuh cm na kdg g ada lab jd ga bs... dah gt anggota na jg dkt jd ga semangt d.... Sad

ivantoar · 22 September 2007, 20:54

lmayan.. kasi image aj biar jelas kli yawh.. Itung2 bantu yg mw bljr

***digimaster*** · 22 September 2007, 21:04

Sebenernya kalau pake image justru malah bakal bikin ga reliable. Napa? Soalnya tampilan yang dibikin di gambarnya belum tentu sama antara satu browser dengan browser lainnya. Terutama (that damned) Internet Explorer. Jadi sebagai pengganti image, lebih baik copy paste aja tuh kode HTML ke Notepad trus save n jalanin kodenya lewat browser.