HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link.
Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view - source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.
STRUKTUR DOKUMEN HTML
Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>.
Standar penulisannya adalah:
<HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
CONTOH:
<HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>
Untuk melihat hasilnya, silakan jalankan browser favorit Anda, seperti contoh di bawah ini digunakan Microsoft Internet Explorer. TAG HTML
1. HEADING
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
2. PARAGRAF
Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
<P ALIGN="center">
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia
<P ALIGN="left">
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke pemakaman. Dengan demikian, yang berhak memperoleh harta yang banyak itu hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber humor, kisah dan pepatah
</P>
</BODY>
</HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
<P ALIGN="center">
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia
<P ALIGN="left">
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke pemakaman. Dengan demikian, yang berhak memperoleh harta yang banyak itu hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber humor, kisah dan pepatah
</P>
</BODY>
</HTML>
3. BLOCKQUOTE
Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf miring.Contoh:
<HTML><HEAD><TITLE>BLOCKQUOTE</TITLE></HEAD><BODY><H3>Sesuatu yang tidak perlu dicoba</H3><BLOCKQUOTE>Sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali-kali mencoba jika tidak ingin membuat masalah baru</BLOCKQUOTE></BODY></HTML>
4. PREFORMATTED TEXT
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Contoh:
<HTML><HEAD><TITLE>Preformatted Text</TITLE></HEAD><BODY><PRE>Edisi yang lalu dibahas tentang membuat billing system untuk warnet yang dapat langsung mencetak tagihan.Kali ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa diperoleh beberapa laporan secara periodik.</PRE></BODY></HTML>
5. BEGIN ROW (BR)
Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya.Contoh:
<HTML><HEAD><TITLE>Begin Row</TITLE></HEAD><BODY><P>Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu:<BR>Instalasi melalui FTP<BR>Instalasi melalui CDROM<BR>Instalasi melalui partisi DOS</BODY></HTML>6. UKURAN FONT
Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:<HTML><HEAD><TITLE>Ukuran font</TITLE></HEAD><BODY><FONT SIZE=1>Ukuran font 1</FONT><FONT SIZE=2>Ukuran font 2</FONT><FONT SIZE=3>Ukuran font 3</FONT><FONT SIZE=4>Ukuran font 4</FONT><FONT SIZE=5>Ukuran font 5</FONT><FONT SIZE=6>Ukuran font 6</FONT><FONT SIZE=7>Ukuran font 7</FONT></BODY></HTML>7. JENIS FONT
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:<HTML><HEAD><TITLE>Jenis Font</TITLE></HEAD><BODY><FONT SIZE=5><FONT FACE = "Arial">Arial, contoh AC Milan <P><FONT FACE = "Verdana">Verdana , contoh Persebaya <P><FONT FACE = "Times New Roman">Times New Roman, contoh Indonesia <P></BODY></HTML>8. WARNA FONT
Atribut
COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara
1. Dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll.
2. Cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya
FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.Contoh:
<HTML><HEAD><TITLE>Warna Font</TITLE></HEAD><BODY><FONT SIZE=5><FONT COLOR = "red">PSM Makassar<P><FONT COLOR = "#FF0000">tetap PSM Makassar kan?<P><FONT COLOR = "#00FF00">Ini baru Persebaya<P></BODY></HTML>
.
9. LINK
Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>.Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut
NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.Contoh:
<HTML><HEAD><TITLE>Link</TITLE></HEAD><BODY><A NAME="lengkap">Pemain-pemain AC Milan menurut abjad</A><BLOCKQUOTE><P>Abbiati ,<A HREF="#abbiati">info lengkap</A><P>Ayala<P>Ambrosini<P>Albertini<P>Boban<P><A HREF="linktujuan.html">kalo mau tahu lagi klik disini</A></BLOCKQUOTE><P><A NAME="abbiati">Abbiati</A><BLOCKQUOTE><P>Kiper ketiga timnas Italia runner up Euro 2000<BR>Kiper utama U-21 juara Piala Eropa U-21<BR>Kiper utama AC Milan juara Seri-A 1998-1999</BLOCKQUOTE><P><A HREF="#lengkap">kembali ke atas</A></BODY></HTML>
<HTML><HEAD><TITLE>Link tujuan</TITLE></HEAD><BODY><P ALIGN="center"> Maaf, hanya sedikit<BR>Chamot<BR>Dida<BR>Shevchenko<BR><A HREF="contohlink.html">kembali</A></BODY></HTML>
10. Marquee
Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen
Agar lebih jelas akan saya sertakan contohnya :
Contoh marquee dari gerakan :
<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%"> marquee dari kanan ke kiri </MARQUEE> hasilnya :
ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .
Contoh marquee dari perilaku gerakan :
<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate"> marquee menurut perilaku
</MARQUEE> Contoh marquee dengan variasi hurup dan warna latar belakang :
<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate"> </MARQUEE></b></FONT></div> hasilnya :
Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.
Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini
</marquee> hasilnya :
Contoh marquee yang di dalam nya terdapat link :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>
<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>
<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>
</marquee> hasilnya :
11. Images
Pertengahan tahun 90'an website-website yang ada tidak memiliki gambar, karena browser yang ada tidak memiliki kemampuan untuk menampilkan gambar. Tetapi sekarang website tanpa gambar akan terlihat membosankan, tetapi website dengan banyak gambar akan terlihat menyebalkan, nah lo. Jadi gunakan gambar seperlunya, keluarkan semua imajinasi dan nilai seni anda untuk dapat membuat website yang nyaman dilihat. Saya tidak akan mengajarkan bagaimana cara membuat gambar disini, ada kategori lain diwebsite ini untuk belajar mendesain, anda dapat belajar menggunakan Photoshop. Gambar yang dipasang di website disarankan menggunakan bertipe file gif atau jpg. Untuk memasang image anda memerlukan tag
<img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini:<img src="images/artikel/introhtml_02.gif" width="313" height="43"
alt="Contoh Gambar">
Hasil:
Atribut
src disini sama dengan atribut href pada tag <a> yang berisi alamat posisi gambar. Pada contoh kode diatas anda memiliki gambar introhtml_02.gif yang berada pada folder images. Jika anda tidak memiliki file tersebut maka gambar tidak ditampilkan. Atribut width dan heightmerupakan opsional, tapi saya sarankan untuk mencantumkannya agar browser mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut alt berguna untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar dengan menambahkan atribut border<a href="http:// fairytail.wikia.com/wiki/Natsu_Dragneel">
<img border="1" src="images/introhtml_02.gif" width="313"
height="43"></a>
Hasil: 
12. Tabel
Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini :
- <TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel.
- <TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris.
- <TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
- <TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.
Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini:
Contoh:
<table border="1" width="60%">
<tr>
<td>Contoh Table</td>
</tr>
</table>
Hasilnya:
Contoh Tabel |
Tabel diawali dengan tag <table> dan biasanya memiliki atribut border. Jika border="0"maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk memberi jarak antara kolom. Coba kode berikut ini:
<table border="1" width="200" cellpadding="4" cellspacing="5">
<tr>
<td width="100">Cell 1</td>
<td width="100">Cell 2</td>
</tr>
</table>
Hasil:
Cell 1 | Cell 2 |
Coba anda ubah nilai dari atribut cellpadding dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.
Setiap tabel memiliki baris dengan menggunakan tag <tr>. Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Untuk lebih jelasnya cobalah kode berikut ini:
<table border="1" width="200" cellpadding="2">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> /
</tr>
<tr>
<td width="100">cell 1</td>
<td width="100">cell 2</td>
</tr>
<tr>
<td width="100">cell 3</td>
<td width="100">cell 4</td> /
</tr>
</table>
Hasil:
Header | Header |
cell 1 | cell 2 |
cell 3 | cell 4 |
Bagaimana anda mengerti maksudnya kode diatas, coba anda pahami dulu. Pada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Didalam kolom<td> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <table>didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya:
<table border="1" width="200" cellpadding="2">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td width="100" rowspan="2" valign="top">cell 1</td>
<td width="100">cell 2</td>
</tr>
<tr>
<td width="100">cell 4</td>
</tr>
</table>
Hasilnya:
Header | Header |
cell 1 | cell 2 |
cell 4 |
Anda lihat ada atribut rowspan="2" ini berguna untuk menggabungkan 2 baris menjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus. Jika sudah coba anda pahami kode berikut ini:
<table border="0" width="200" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td width="100" valign="top" bgcolor="#CCCCCC" align="left">Left</td>
<td width="100" bgcolor="#CCCCCC" align="right">Right</td>
</tr>
<tr>
<td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center">
Table is cool</td>
</tr>
<tr>
<td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center">
But it's not easy</td>
</tr>
</table>
Hasil:
Header | Header |
Left | Right |
Table is cool | |
But it's not easy | |
Anda sudah mengetahui dasar-dasar HTML. Masih banyak lagi tag-tag HTML lainnya sepertiframes dan form. Saya akan mengajarkan frames diartikel lainnya, tetapi frames harus dihindari dalam membuat website, alasan utama apa yang ada didalam frames tidak terbaca oleh Search Engine. Tag form hanya dibutuhkan apabila anda membuat website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP.
Kira-kira seperti itu, ok anda telah mempelajari HTML, sekarang anda tinggal turun gunung dan mempraktekkan apa yang sudah dipelajari. Teruslah mencoba agar anda semakin ahli.
Suka dengan artikel ini? Sebarkan keseluruh dunia melalui Jejaring Sosial berikut ini:
Categories:
cool! (y)