1. HTML (Hyper Text Markup Language)
HTML merupakan kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen HTML ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web. Dokumen ini umumnya berupa informasi yang disajikan di internet.
Umumnya file HTML berekstensi .htm atau .html. Nama file / dokumen HTML boleh kombinasi antara huruf kecil dan huruf besar. Tetapi umumnya, di internet suatu file HTML ditulis dengan menggunakan huruf kecil. Ini dikarenakan ada beberapa system operasi yang membedakan antara huruf kecil dan huruf besar.
Dokumen HTML disusun oleh elemen-elemen. Elemen ini merupakan istilah bagi komponen-komponen dasar pembantuk dokumen HTML. Beberapa contoh elemen adalah : head, body, table, paragraf, dan list.
2. TAG HTML
Setiap penandaan elemen dari dokumen html menggunakan tag. Tag HTML diawali dengan sebuah tanda lebih kecil (<), nama tag dan diakhiri dengan tanda lebih besar (>) contoh <hr>. Penulisan nama tag boleh kombinasi antara huruf kapital dan huruf kecil. Ada banyak jenis tag yang diharuskan berpasangan. Tag yang berpasangan diawali dengan <nama tag> dan kemudian di bagian akhir ditutup dengan </nama tag>.
Contoh
<marquee> Ini teks yang berjalan </marquee>, elemen tersebut merupakan perintah
untuk membuat suatu teks yaitu teks “ini teks yang berjalan” agar berjalan.
Tag yang tidak berpasangan diantaranya perintah <hr> yaitu untuk membuat garis
vertikal (horizontal rule), <br> yaitu untuk pindah baris.
3. ELEMEN DASAR HTML
Elemen-elemen dasar yang digunakan untuk membuat suatu dokumen HTML adalah tag <html> dan </html>, tag <head> dan </head>, dan tag <body> dan </body>. Struktur dasar dari dokumen HTML adalah sebagai berikut :
<html>
<head>
pengenalan/informasi tentang dokumen HTML
</head>
<body>
disinilah semua teks dan yang lainnya ditulis.
</body>
</html>
Elemen <html> dan </html> merupakan suatu tag yang menunjukan bahwa dokumen tersebut merupakan dokumen HTML. Elemen <head> dan </head> merupakan yang berisi pengenalan/informasi tentang dokumen tersebut. Diantara tag inilah kita menulis judul (title) dari dokumen web.
Elemen <body> dan </body> merupakan tag yang menandakan awal dan akhir dari badan dari dokumen html. Dalam bagian inilah (diantara awal dan akhirnya) isi dokumentasikan ditulis.
Contoh sederhana adalah seperti berikut :
<html>
<head>
<title>Ini Judul, OK</title>
</head>
<body>Disinilah isi dokumen html ditulis
</body>
</html>
Tag <title> dan </title> digunakan untuk menuliskan judul di bagian atas (caption) dari web browser. Jika tag title tidak ditulis, maka yang tertulis di dalam caption web browser adalah alamat dan nama file yang sedang dibrowse.
Untuk menampilkan dokumen supaya bisa terlihat lebih baik, maka ada beberapa tag yang perlu diketahui. Tag-tag tersebut diantaranya berguna untuk mempertebal tulisan (bold), meng-italic-an tulisan, menggarisbawahi tulisan, pengaturan paragraf dan lain-lain. Tag-tag tersebut diantaranya :
<b> </b> Menebalkan (bold) teks yang berada di dalamnya
<i> </i> Memiringkan (italic) teks yang berada di dalamnya
<u> </u> Menggarisbawahi teks yang berada di dalamnya
<big> </big> Memperbesar teks sebesar 1 tingkat
<small> </small> Memperkecil teks sebesar 1 tingkat
<strong> </strong> Memberikan efek tebal
<sup> </sup> Menuliskan teks sebagai teks superscript
<sub> </sub> Menuliskan teks sebagai teks subscript
<hx> </hx> Menuliskan teks sebagai heading (judul) topik. X diisi dengan nomor dari 1 sampai dengan 6. <h1> merupakan heading dengan font yang paling besar.
<tt> </tt> Menuliskan teks seperti tulisan pada mesin tik (monospace)
<br> - Pindah ke baris berikutnya (break rule)
<font> </font> Mengatur tampilan teks dengan menentukan nama font dan besarnya
Contoh :
<html>
<head>
<title>Ini Judul, OK</title>
</head>
<body>
<b>Ini teks tebal</b><Br>
<u>Ini teks digaris bawah</u><br>
<i>Ini teks dimiringkan</i><br>
<b><i>teks ini ditebalkan dan dimiringkan</i></b><br>
<tt>Ini gaya tulisan mesin tik</tt><br>
Contoh superscript : f(x)=2x<sup>2</sup>+5x+3<Br>
Contoh sub script :D=X<sub>1</sub>+X<sub>2</sub><br>
Ini Tulisan Normal <big><big>ini diperbesar 2 kali</big></big> normal lagi khan?<br>
Ini Tulisan Normal <small><small>ini diperbesar 2 kali</small></small> normal lagi
khan?<br>
Ini Juga Normal tapi yang ini <strong>dipertebal</strong><br>
<font face=”verdana” size=5>Ini teks berfont VERDANA dengan besar 5</font>
<h1>Ini Header 1</h1>
<h2>Ini Header 2</h2>
<h3>Ini Header 3</h3>
<h4>Ini Header 4</h4>
<h5>Ini Header 5</h5>
<h6>Ini Header 6</h6>
</body>
</html>
b. TAG PENGATURAN PARAGRAF
Untuk mengatur paragraf, digunakan tag <p> dan </p>. Tag ini mempunyai atribut align yang boleh terisi dengan center, left, right dan justify.
Contoh :
<html>
<head>
<title>Ini Judul, OK</title>
</head>
<body>
<p align=left><b>Rata Kiri</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=center><b>Rata Tengah</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=right><b>Rata Kanan</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi
di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=justify><b>Rata Kiri-Kanan</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p>
</body>
</html>
c. TAG LIST
Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa jenis list yang dikenal oleh HTML yaitu :
1. List bernomor (ordered list), tag yang dipakai adalah <ol> dan diakhiri dengan </ol>
2. List tidak bernomor (unordered list) , tag yang dipakai adalah <ul> dan </ul>
3. List definisi (definition list), tag yang dipakai adalah <dl> dan </dl>
Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak bernomor adalah dengan perintah <li> dan ditutup dengan </li>. Sedangkan untuk list definisi, <dt> dan </dt> sebagai definisi term dan <dd> dan </dd> sebagai definisi description (keterangan dari definisi term).
Bentuk umum untuk membuat list bernomor adalah :
<ol type=”tipenomor”>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
Untuk tipenomor, nilai yang bisa diisikan adalah 1 (angka), A (huruf besar), a (huruf kecil), I (romawi kapital), i (romawi kecil).
Bentuk umum untuk membuat list bernomor adalah :
<ul type=”tipebullet”>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Untuk tipenomor, nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran),
square (segiempat).
Untuk list definisi, bentuk umumnya adalah :
<dl>
<dt>Term 1</dt><dd>Keterangan lengkap mengenai Term 1</dd>
<dt>Term 2</dt><dd>Keterangan lengkap mengenai Term 2</dd>
<dt>Term 3</dt><dd>Keterangan lengkap mengenai Term 3</dd>
</dl>
Contoh script adalah :
<html>
<head>
<title>FORM HTML</title>
</head>
<body>
<p>Kota-Kota Besar Di Pulau Jawa (memakai angka)</p>
<ol type="1">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ol>
<p>Kota-Kota Besar Di Pulau Jawa (memakai huruf kapital)</p>
<ol type="A">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ol>
<p>Kota-Kota Besar Di Pulau Jawa (memakai bulatan)</p>
<ul type="disk">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ul>
<p>Kota-Kota Besar Di Pulau Jawa (memakai segiempat)</p>
<ul type="square">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ul>
<p>Kota-Kota Besar Di Pulau Jawa (dalam bentuk seperti daftar pustaka)</p>
<dl>
<dt><b>Bandung</b></dt><dd>Bandung adalah ibukota Jawa Barat</dd>
<dt><b>Jakarta</b></dt><dd>Jakarta adalah ibukota DKI Jakarta</dd>
<dt><b>Surabaya</b></dt><dd>Surabaya adalah ibukota Jawa Timur</dd>
</dl>
</html>
Sumber
HTML merupakan kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen HTML ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web. Dokumen ini umumnya berupa informasi yang disajikan di internet.
Umumnya file HTML berekstensi .htm atau .html. Nama file / dokumen HTML boleh kombinasi antara huruf kecil dan huruf besar. Tetapi umumnya, di internet suatu file HTML ditulis dengan menggunakan huruf kecil. Ini dikarenakan ada beberapa system operasi yang membedakan antara huruf kecil dan huruf besar.
Dokumen HTML disusun oleh elemen-elemen. Elemen ini merupakan istilah bagi komponen-komponen dasar pembantuk dokumen HTML. Beberapa contoh elemen adalah : head, body, table, paragraf, dan list.
2. TAG HTML
Setiap penandaan elemen dari dokumen html menggunakan tag. Tag HTML diawali dengan sebuah tanda lebih kecil (<), nama tag dan diakhiri dengan tanda lebih besar (>) contoh <hr>. Penulisan nama tag boleh kombinasi antara huruf kapital dan huruf kecil. Ada banyak jenis tag yang diharuskan berpasangan. Tag yang berpasangan diawali dengan <nama tag> dan kemudian di bagian akhir ditutup dengan </nama tag>.
Contoh
<marquee> Ini teks yang berjalan </marquee>, elemen tersebut merupakan perintah
untuk membuat suatu teks yaitu teks “ini teks yang berjalan” agar berjalan.
Tag yang tidak berpasangan diantaranya perintah <hr> yaitu untuk membuat garis
vertikal (horizontal rule), <br> yaitu untuk pindah baris.
3. ELEMEN DASAR HTML
Elemen-elemen dasar yang digunakan untuk membuat suatu dokumen HTML adalah tag <html> dan </html>, tag <head> dan </head>, dan tag <body> dan </body>. Struktur dasar dari dokumen HTML adalah sebagai berikut :
<html>
<head>
pengenalan/informasi tentang dokumen HTML
</head>
<body>
disinilah semua teks dan yang lainnya ditulis.
</body>
</html>
Elemen <html> dan </html> merupakan suatu tag yang menunjukan bahwa dokumen tersebut merupakan dokumen HTML. Elemen <head> dan </head> merupakan yang berisi pengenalan/informasi tentang dokumen tersebut. Diantara tag inilah kita menulis judul (title) dari dokumen web.
Elemen <body> dan </body> merupakan tag yang menandakan awal dan akhir dari badan dari dokumen html. Dalam bagian inilah (diantara awal dan akhirnya) isi dokumentasikan ditulis.
Contoh sederhana adalah seperti berikut :
<html>
<head>
<title>Ini Judul, OK</title>
</head>
<body>Disinilah isi dokumen html ditulis
</body>
</html>
Tag <title> dan </title> digunakan untuk menuliskan judul di bagian atas (caption) dari web browser. Jika tag title tidak ditulis, maka yang tertulis di dalam caption web browser adalah alamat dan nama file yang sedang dibrowse.
PENGATURAN TAMPILAN WEBSITE
a. TAG PENGATURAN TEKSUntuk menampilkan dokumen supaya bisa terlihat lebih baik, maka ada beberapa tag yang perlu diketahui. Tag-tag tersebut diantaranya berguna untuk mempertebal tulisan (bold), meng-italic-an tulisan, menggarisbawahi tulisan, pengaturan paragraf dan lain-lain. Tag-tag tersebut diantaranya :
<b> </b> Menebalkan (bold) teks yang berada di dalamnya
<i> </i> Memiringkan (italic) teks yang berada di dalamnya
<u> </u> Menggarisbawahi teks yang berada di dalamnya
<big> </big> Memperbesar teks sebesar 1 tingkat
<small> </small> Memperkecil teks sebesar 1 tingkat
<strong> </strong> Memberikan efek tebal
<sup> </sup> Menuliskan teks sebagai teks superscript
<sub> </sub> Menuliskan teks sebagai teks subscript
<hx> </hx> Menuliskan teks sebagai heading (judul) topik. X diisi dengan nomor dari 1 sampai dengan 6. <h1> merupakan heading dengan font yang paling besar.
<tt> </tt> Menuliskan teks seperti tulisan pada mesin tik (monospace)
<br> - Pindah ke baris berikutnya (break rule)
<font> </font> Mengatur tampilan teks dengan menentukan nama font dan besarnya
Contoh :
<html>
<head>
<title>Ini Judul, OK</title>
</head>
<body>
<b>Ini teks tebal</b><Br>
<u>Ini teks digaris bawah</u><br>
<i>Ini teks dimiringkan</i><br>
<b><i>teks ini ditebalkan dan dimiringkan</i></b><br>
<tt>Ini gaya tulisan mesin tik</tt><br>
Contoh superscript : f(x)=2x<sup>2</sup>+5x+3<Br>
Contoh sub script :D=X<sub>1</sub>+X<sub>2</sub><br>
Ini Tulisan Normal <big><big>ini diperbesar 2 kali</big></big> normal lagi khan?<br>
Ini Tulisan Normal <small><small>ini diperbesar 2 kali</small></small> normal lagi
khan?<br>
Ini Juga Normal tapi yang ini <strong>dipertebal</strong><br>
<font face=”verdana” size=5>Ini teks berfont VERDANA dengan besar 5</font>
<h1>Ini Header 1</h1>
<h2>Ini Header 2</h2>
<h3>Ini Header 3</h3>
<h4>Ini Header 4</h4>
<h5>Ini Header 5</h5>
<h6>Ini Header 6</h6>
</body>
</html>
b. TAG PENGATURAN PARAGRAF
Untuk mengatur paragraf, digunakan tag <p> dan </p>. Tag ini mempunyai atribut align yang boleh terisi dengan center, left, right dan justify.
Contoh :
<html>
<head>
<title>Ini Judul, OK</title>
</head>
<body>
<p align=left><b>Rata Kiri</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=center><b>Rata Tengah</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=right><b>Rata Kanan</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi
di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=justify><b>Rata Kiri-Kanan</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p>
</body>
</html>
c. TAG LIST
Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa jenis list yang dikenal oleh HTML yaitu :
1. List bernomor (ordered list), tag yang dipakai adalah <ol> dan diakhiri dengan </ol>
2. List tidak bernomor (unordered list) , tag yang dipakai adalah <ul> dan </ul>
3. List definisi (definition list), tag yang dipakai adalah <dl> dan </dl>
Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak bernomor adalah dengan perintah <li> dan ditutup dengan </li>. Sedangkan untuk list definisi, <dt> dan </dt> sebagai definisi term dan <dd> dan </dd> sebagai definisi description (keterangan dari definisi term).
Bentuk umum untuk membuat list bernomor adalah :
<ol type=”tipenomor”>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
Untuk tipenomor, nilai yang bisa diisikan adalah 1 (angka), A (huruf besar), a (huruf kecil), I (romawi kapital), i (romawi kecil).
Bentuk umum untuk membuat list bernomor adalah :
<ul type=”tipebullet”>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Untuk tipenomor, nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran),
square (segiempat).
Untuk list definisi, bentuk umumnya adalah :
<dl>
<dt>Term 1</dt><dd>Keterangan lengkap mengenai Term 1</dd>
<dt>Term 2</dt><dd>Keterangan lengkap mengenai Term 2</dd>
<dt>Term 3</dt><dd>Keterangan lengkap mengenai Term 3</dd>
</dl>
Contoh script adalah :
<html>
<head>
<title>FORM HTML</title>
</head>
<body>
<p>Kota-Kota Besar Di Pulau Jawa (memakai angka)</p>
<ol type="1">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ol>
<p>Kota-Kota Besar Di Pulau Jawa (memakai huruf kapital)</p>
<ol type="A">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ol>
<p>Kota-Kota Besar Di Pulau Jawa (memakai bulatan)</p>
<ul type="disk">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ul>
<p>Kota-Kota Besar Di Pulau Jawa (memakai segiempat)</p>
<ul type="square">
<li>Bandung</li>
<li>Jakarta</li>
<li>Surabaya</li>
</ul>
<p>Kota-Kota Besar Di Pulau Jawa (dalam bentuk seperti daftar pustaka)</p>
<dl>
<dt><b>Bandung</b></dt><dd>Bandung adalah ibukota Jawa Barat</dd>
<dt><b>Jakarta</b></dt><dd>Jakarta adalah ibukota DKI Jakarta</dd>
<dt><b>Surabaya</b></dt><dd>Surabaya adalah ibukota Jawa Timur</dd>
</dl>
</html>
Sumber
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon