HTML(HyperText Markup Language) adalah bahasa markah/kode yang digunakan untuk menampilkan objek atau data di halaman web. HTML merupakan salah satu bahasa pemrograman client side dan digunakan untuk membuat web baik statis maupun dinamis. Dalam pembuatan web dinamis, HTML harus dilengkapi PHP yang merupakan script untuk mengolah datanya.
Saat
ini, versi html sudah mencapai pada versi HTML 5 yang distandarkan pada 2008.
Versi sebelumnya adalah HTML, HTML 2.0(22 september 1995), HTML 3.2(14 Januari
1996), HTML 4.0(18 Desember 1997), HTML 4.01(24 Desember 1999), ISO HTML (15
Mei 2000).
Setiap
peng-update-an versi pada html ditambahkan tag-tag baru untuk memperlengkap
objek dalam halaman web yang dibuat. Perkembangan HTML ini tentu saja sangat
erat kaitannya dengan perkembangan Browser karena pada dasarnya browserlah yang
menerjemahkan perintah-perintah dari kode-kode html menjadi objek yang
diinginkan.
Kode
HTML terdiri dari tag (atau disebut juga dengan markup tag atau HTML tag) dan
tagnya itu sendiri terdiri dari kata kunci yang terdapat dalam braket sudut.
Sebagian besar tag HTML dimulai dengan tag pembuka dan diakhiri dengan tag
penutup. Dokumen HTML terdiri dari 2 bagian: Head (informasi tentang halaman
itu, apa yang anda tulis di bagian ini tidak akan ditampilkan atau terlihat
pada browser komputer anda) dan Body
(informasi yang membentuk sebuah halaman, apa yang anda letakkan/ tulis di
bagian ini akan ditampilkan pada browser).
Masih bingung? Baiklah, mari kita praktek saja. Praktek mampu membuat anda jauh lebih mengerti dengan cepat dari pada hanya sekedar teori. Mari kita mulai...
Buka Notepad, copy dan paste kode HTML di bawah ini pada Notepad tersebut:
<html>
<head>
<title>Ini adalah website pertamaku!</title>
</head>
<body>
<p><b>Ini kalimat kesatu</b></p>
<p><i>Ini kalimat kedua</i></p>
<p><U>Ini kalimat ketiga</u></p>
</body>
</html>
Simpan Notepadnya dan beri dengan nama apa saja tapi diakhiri dengan “.htm” seperti halamanku.htm atau fileku.htm. Jangan lupa pilih “All Files” jika tidak anda akan menyimpannya dalam bentuk text dokumen dan bukan dokumen HTML.
Masih bingung? Baiklah, mari kita praktek saja. Praktek mampu membuat anda jauh lebih mengerti dengan cepat dari pada hanya sekedar teori. Mari kita mulai...
Buka Notepad, copy dan paste kode HTML di bawah ini pada Notepad tersebut:
<html>
<head>
<title>Ini adalah website pertamaku!</title>
</head>
<body>
<p><b>Ini kalimat kesatu</b></p>
<p><i>Ini kalimat kedua</i></p>
<p><U>Ini kalimat ketiga</u></p>
</body>
</html>
Simpan Notepadnya dan beri dengan nama apa saja tapi diakhiri dengan “.htm” seperti halamanku.htm atau fileku.htm. Jangan lupa pilih “All Files” jika tidak anda akan menyimpannya dalam bentuk text dokumen dan bukan dokumen HTML.
“.htm”
dari nama akhir file tersebut mengartikan bahwa itu adalah dokumen HTML, anda
juga bisa mengakhiri dengan nama “.html”, hasilnya akan sama. Setelah disimpan,
cobalah buka file tersebut dengan double-klik filenya. Lihat dan perhatikan apa
yang terjadi pada ketiga kalimat tersebut, perintah tag yang berlainan akan
menghasilkan efek yang berbeda kepada tiap teks tersebut.
Berikut adalah kode basic HTML umum lainnya:
Berikut adalah kode basic HTML umum lainnya:
<HTML> </HTML>
|
Untuk membuat halaman Web. Semua halaman Web
mengandung perintah tag ini.
|
<HEAD> </HEAD>
|
Semua elemen head diletakkan disini, apa yang
anda tulis di area ini tidak akan ditampilkan atau terlihat. Elemen di dalam
head tag termasuk script, meta informasi, memerintahkan browser dimana untuk
menemukan style sheet dan lain- lain.
|
<TITLE> </TITLE>
|
Menampilkan judul di title bar. |
<BODY> </BODY>
|
Apa yang anda tulis disini akan terlihat dan ditampilkan pada browser. |
<B> </B> atau <strong>
</strong>
|
Menebalkan huruf atau teks
|
<I> </I> atau <em> </em> |
Memiringkan huruf atau teks dalam model
Italics
|
<u> </u>
|
Menggaris bawahi teks.
|
<strike> </strike>
|
|
<CENTER> </CENTER>
|
Meletakkan atau memposisikan sesuatu di tengah
halaman.
|
<H1> </H1>
|
Heading 1
|
<H2> </H2>
|
Heading 2
|
<H3> </H3>
|
Heading 3
|
<H4> </H4>
|
Heading 4
|
<H5> </H5>
|
Heading 5
|
<H6> </H6>
|
Heading 6
|
<BR>
|
Line baru. Membuat sebuah spasi diantara lines (contohnya dua kalimat ini). |
<P> </p>
|
Paragraph baru. Membuat double spasi diantara lines, paragraphs (contohnya dua kalimat ini). |
|
Spasi.
|
<HR>
|
Membuat garis horizontal pada dokumen. |
<ul>
<li>Daftar list</li> <li>Daftar list lain</li> </ul> |
·
Daftar list informasi
·
Daftar list informasi
lain
|
<ol>
<li>List pertama</li> <li>List kedua</li> </ol> |
1. List informasi pertama
2. List informasi kedua
|
<b> artinya "bold"
<i> artinya "italics"
<em> artinya "emphasis"
<u> artinya "underline"
<h1> artinya "heading 1"
<br> artinya "break"
<p> artinya "paragraph"
<hr> artinya "horizontal"
<ul> artinya "unordered list"
<ol> artinya "ordered list"
Tidak akan berpengaruh jika anda mengetik perintah tagnya dalam huruf kecil atau huruf besar, hasilnya akan sama.
Apa itu attribute dalam dunia HTML?
Attribute adalah perintah tambahan terhadap elemen yang ditulis setelah tag pembuka dan biasanya berupa sepasang nama/value seperti: name=”value”. Value tersebut biasanya terdapat diantara tanda kutip.
Berikut contoh- contoh attribute:
Attribute adalah perintah tambahan terhadap elemen yang ditulis setelah tag pembuka dan biasanya berupa sepasang nama/value seperti: name=”value”. Value tersebut biasanya terdapat diantara tanda kutip.
Berikut contoh- contoh attribute:
<h3 style="background-color:red;">
</h3>
|
Text H3 dengan background warna merah. |
<body style="background-color:yellow;"> |
Membuat warna background kuning. |
<FONT COLOR="Lime">
</FONT>
|
Merubah warna font menjadi "lime".
|
<FONT SIZE=5> </FONT>
|
Menyetel ukuran font.
|
<A HREF="URL"> </A>
|
Membuat link ke halaman Web lain.
|
<a href="page2.htm">
</a>
|
Untuk nge-link ke halaman Web lain pada
website yang sama.
|
<a href="Subfolder/page2.htm">
</a>
|
Untuk ngelink ke halaman Web lain dalam
subfolder pada website yang sama.
|
<a href="../page2.htm">
</a>
|
Kebalikannya dalam contoh diatas.
|
<h1 id="heading1"> </h1>
|
Untuk memberi tanda pada elemen dimana anda
akan ngelink dalam halaman yang sama.
|
<a href="#heading1">
</a>
|
Untuk nge-lnk pada elemen yang telah anda
tandai sebelumnya pada halaman yang sama.
|
<A
HREF="MAILTO:fuadhanif48@gmail.com"> </A>
|
Membuat link menuju email address.
|
<a
href="http://www.digitalparameter.blogspot.com/" title="Kunjungi
blog saya :)"> </a>
|
Untuk membuat title pada link, seperti ini: Anda bisa meletakkan cursor anda pada link ini.
|
<p align="right"> </p> |
Untuk merubah posisi ke kanan halaman.
|
<FONT FACE=”Courier new, arial,
helvetica”> </FONT>
|
Untuk memilih jenis font yang akan digunakan. |
<img src="image url ">
|
Untuk memasukkan gambar atau image. |
Untuk memasang gambar, ada 3 jenis tipe gambar yang bisa diterima dan dipasang pada halaman web anda yaitu:
·
PNG (Portable Network Graphics)
·
JPG / JPEG (Joint Photographic
Experts Group)
·
GIF (Graphics Interchange Format)
0 komentar:
Posting Komentar