Apa Itu HTML ?

Wed, 07 Sep 2011 16:46:29 +0100

mmm... Saya sudah posting mengenai post ini, karena ini halamannya khusus, jadi saya posting juga disini, biar lebih gampang. hehhe.. :D, oke check it out !

Apa itu HTML? ini adalah pertanyaan yang bagus, karena untuk menjadi seorang Bloger, Webmaster, Bahkan Programmer dibidang Internet harus mempunyai dasarnya ini dulu yaitu HTML.

HTML kependekan dari "Hyper Text Markup Language", menurut singkatannya berarti HTML adalah Hyper teks yang bahasanya bertanda(mark). iya tanda, karena setiap elemen dari HTML harus diawali dengan tanda.
misalkan anda ingin membuat teks miring. maka anda tidak dapat membuat teks miring senyaman di microsoft word yang tinggal mengklik iconnya saja, tapi kalo html anda harus memberikan tanda(atau biasa disebut TAG). berikut contohnya:
<i>tulisan ini berbentuk miring</i>

Dokumen HTML dapat dibuat dari editor teks yang paling sederhana sekali pun seperti Notepad. Beberapa Editor lain yang bisa digunakan diantaranya macromedia dreamweaver, microsoft frontpage, edit plus, dan masih banyak lagi.

Untuk bisa mengakses dokumen html diperlukan web browser, seperti mozila firefox, internet explorer, opera mini, google chrome, dll.

Dokumen HTML disusun oleh elemen-elemen pembentuknya. Contoh elemen html adalah
-head
-body
-table
-html
-dan masih banyak lagi.

Oke, mungkin teman-teman masih bingung. coba buka Mozila Firefoxnya, lalu buka sebuah website kemudian lakukan hal berikut:
-Klik kanan
-Klik View page Open source
-nah disitu muncul semua kode-kode html dari website tersebut, yang sebenarnya website itu hanya kumpulan kode-kode html, css, dll. yang di olah oleh Browser menjadi tampilan yang cantik.

Setiap elemen html ditandai dengan tag, yang penulisannya diantara tanda < (kurang dari) dan tanda > (lebih dari). Setiap tag mempunyai pasangan, jika kita sebut pasangan tag ini pembuka dan tag penutup. maka perbedaan antara tag pembuka dan tag penutup adalah penambahan tanda / (garis miring) setelah tanda < (kurang dari) pada tag PENUTUP.

Misal : <body>... </body> (baca: tag pembuka <body> berpasangan dengan tag penutup </body>).

Tidak semua tag dalam dokumen html mempunyai pasangan, ada beberapa tag di dokumen html yang tidak mempunya pasangan. yaitu :
<br> yang digunakan untuk line break (baris baru)
<hr> yang digunakan untuk garis horizontal (horizontal rule).

Oke, sampai disini saja semoga mengerti. untuk penjelasan lain mengenai html, teman bisa melihat pada menu html di blog ini. terima kasih.

Dasar-dasar HTML

Tue, 06 Sep 2011 04:46:14 +0100

Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.
HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan
memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C,
C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak
dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.
Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang
relevan.
Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.

Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan
>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.
Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan
tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang
berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.

Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini
sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.

Struktur

Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan
Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih
baik
mempraktekan langsung struktur ini sbg perancangan halaman web kita.
Listing 1 menunjukkan struktur suatu halaman HTML sederhana:

Listing 1

<!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>

<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<!–halaman CONTENT dimulai –>
<B>Yang ditampilkan di browser, cuma tulisan ini.
</BODY>
</HTML>

Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?

Listing 2

<B>Untuk menampilkan tulisan cetak tebal</B><BR>

<I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>

<U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>

<BR> digunakan untuk menampilkan baris baru.

Listing 3

<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.
</P>

Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup
tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.

Listing 4

Bekerja dengan Heading
Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai
tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:
<H1>Level – 1 </H1>
<H2>Level – 2 </H2>
<H3>Level – 3 </H3>
<H4>Level – 4 </H4>
<H5>Level – 5 </H5>

Listing 5

Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.
sebagai berikut

o Ordered List
o Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan
Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.
Cobalah kode di bawah ini:

kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita
menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>
sebagai di bawah ini:

Listing 6

Listing 7
Penerapan Definisi List

Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>
dan <DT> seperti ditunjukkan listing 7 dibawah ini.

<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>

Listing 8
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara
otomatis dari kiri ke kanan. Cobalah contoh berikut :

<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>

Membuat Links

Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling
berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,
pada browser secara otomatis Kita ke halaman web itu .
Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks

Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan
tag </a> dan itu mewakili anchor.

Listing 9

<A href =â€œhttp://www.rumahweb.comâ€>Rumahweb </A>

href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili
Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan
bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,
kode berikut memanggil lokasi Rumahweb.com didalam suatu jendela browser baru
ketika seseorang mengklik teks.

Listing 10

<A href = http://www.rumahweb.com target = â€œ_blankâ€>Rumahweb </A>

Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html atau htm.