HTML

PENGENALAN HTML
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 sistem
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.
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.
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>
Modul Mata Kuliah E-Commerce – Hal. 1

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>
Kalau skrip html tersebut dijalankan dalam sebuah browser, maka akan
menghasilkan dokumen html seperti berikut :
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
TAG PENGATURAN TEKS
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 :
Tag Awal Tag Akhir Kegunaan

<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>
</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>
</body>
</html>

Script tadi akan menghasilkan tampilan web seperti gambar berikut :

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>
</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>
Hasil yang terlihat di browser adalah :

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>
</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>

Hasil tampilan script diatas :

TAG PEMBUATAN TABEL
Untuk membuat suatu tabel dalam suatu halaman web site, maka tag yang dipakai
adalah <table> dan </table>, <tr> dan </tr> yang terarti table row, <td> dan </td> yang
berarti table data.
Bentuk dari tabel adalah seperti berikut :
Row
Cellpadding
Cellspacing
Border
Data
Untuk membuat sebuah tabel, maka skrip yang harus ditulis adalah sebagai berikut
:
<html>
<head>
</head>
<body>
<table border=4 cellspacing=10 cellpadding=5>
<tr><td>Kiri Atas</td><td>Kanan Atas</td></tr>
<tr><td>Kiri Bawah</td><td>Kanan Bawah</td></tr>
</table>
</body>
</html
Skrip tersebut menghasilkan tampilan di browser sebagai berikut :

TAG GAMBAR
Untuk memperbagus tampilan html, maka kadang diperlukan gambar baik gambar
yang tetap atau yang animasi. Tag yang dipakai untuk menampilkan gambar adalah tab
<img>. Beberapa atribut yang sering digunakan dalam tag ini adalah :
1. src : menunjukan lokasi file gambar
2. border : tebal bingkai gambar
3. width : lebar gambar
4. height : tinggi gambar
5. align : peletakan gambar
Contoh :
<html>
<head>
<title>IMAGE HTML</title>
</head>
<body>
<p><img border=3 src="admin/images/php.gif" width="120" height="64" align="middle">Image
dengan border 3 dengan align middle< /p>
<p><img src="admin/images/php.gif" width="120" height="64" align="right">Image dengan
tanpa border dengan align right,
gambar ini merupakan gambar resmi simbol dari php.</p>
<p><img src="admin/images/php.gif" width="120" height="64" align="left">Image dengan
tanpa border dengan align left,
gambar ini merupakan gambar resmi simbol dari php.</p>
</body>
</html>
Script d iatas akan menghasilkan tampilan seperti gambar berikut :

TAG LINK HTML
Kelebihan utama dokumen HTML adalah kemampuannya untuk memberikan link
dari satu teks dan atau gambar menuju ke dokumenatau bagian lain dalam suatu
dokumen. Browser akan menyorot (highlight) teks atau gambar yang diidentifikasi
sebagai link dengan warna dan atau garis bawah untuk menunjukkan bahwa itu adalah
hperteks link.
Untuk membuat sebuah link, maka tag yang dipakai adalah tag <a> dan </a>.
Atribut-atribut dari tag ini adalah :
1. href : lokasi yang dituju, bisa alamat internet, file atau folder
2. target : lokasi link tersebut ditampilkan. Gunakan _blank jika ingin
menampilkan link yang dituju di browser baru/lain.
Contoh script :
<html>
<head>
<title>IMAGE HTML</title>
</head>
<body>
<p>Home page ini menyediakan beberapa link ke search engine :</p>
<p><a href="http://www.yahoo.com" target="_blank">www.yahoo.com</a></p>
<p><a href="http://www.altavista.com" target="_blank">altavista</a></p>
<p><a href="http://www.google.com" target="_blank">google</a></p>
<p><a href="http://www.php.net"><img border=3 src="admin/images/php.gif" width="120"
height="64" align="middle"></a> link dengan gambar</p>
<p><a href="http://www.mysql.com"><img border=0 src="admin/images/mysql.gif" width="167"
height="87" align="middle"></a> link dengan gambar tanpa border</p>
</html>
Skrip html diatas menghasilkan tampilan seperti berikut :

TAG FORM
Kadang-kadang ketika kita berjalan-jalan / surfing, kita diminta untuk mengisikan
suatu data yang akan dikirim ke penyedia web site. Data-data tersebut bisa berupa data
nama, alamat, no kartu kredit, gambar, atau file.
Untuk membuat suatu form yang dapat berinteraksi dengan visitor, maka
pengembang web harus membuat suatu form dalam dokumen html-nya. Untuk membuat
suatu form dalam dokumen html, tag yang digunakan adalah <form> </form>. Di antara
kedua tag tersebut, elemen-elemen form dituliskan.
Perintah umum tag form adalah
<form name=”namaform” method="jenismethod" action="fileeksekusi">
disinilah elemen-elemen form ditulis
</form>
Atribut name diisi dengan nama dari form tersebut.

Atribut method diisi dengan GET atau POST
Atribut action diisi dengan nama file yang akan dieksekusi ketika tombol submit
ditekan.
Ada beberapa jenis elemen form yang dapat digunakan diantaranya :

JENIS TYPE KEGUNAAN GAMBAR
Cara pakai :
<input type=”namatipe” name=namaelemen value=”tulisan”>
Text Box text Memasukan 1 baris teks
Radio radio Pilihan yang hanya bisa dipilih 1
Button dari beberapa option
Check checkbox Pemilihan dimana boleh
Box memilih lebih dari satu option
Submit submit Tombol untuk melakukan proses
Reset reset Tombol untuk me-reset form ke
kondisi sebelum adanya
pengisian data
Button button Tombol biasa
File file Untuk pemilihan file yang akan
Upload di upload ke server
TextArea, digunakan untuk menampilkan teks yang
ukurannya besar. cara pakainya adalah :
<textarea name=”namatextarea” rows=”banyakbaris”
cols=”banyakkolom” size=”banyakitemditampilkan”>
isi teks diisi disini
</textarea>
Select, digunakan untuk menampilkan pilihan yang telah

disediakan. Cara pakainya adalah :
<select name=namaoption>
<option value=”Bandung” selected>Bandung</option>
<option value=”Jakarta” >Jakarta</option>
<option value=”Surabaya”>Surabaya</option>
</select>

Contoh script :
<html>
<head>
<title>FORM HTML</title>
</head>
<body>
<form method="POST" action="isemg.php">
<p>Text Box <input type="text" name="T1" size="20"></p>
<p>Radio Button <input type="radio" value="V1" checked name="R1">Pilihan</p>
<p><input type="checkbox" name="C1" value="ON">Pilihan 1</p>
<p><input type="file" name="F1" size="7"></p>
<p><select size="1" name="D1">
<option selected value="Bandung">Bandung</option>
<option value="Jakarta">Jakarta</option>
<option>Surabaya</option>
</select></p>
<p><textarea rows="5" name="S1" cols="27">Disini saya bisa ditulis dalam beberapa
paragraf. Saya bisa menampung teks dengan banyak. </textarea></p>
<input type="Submit" value="Submit" name="B1">
<input type="button" value="Button" name="B2"> <input type="reset" value="Reset"
name="B3">
</form>
</html>
Script di atas akan menghasilkan tampilan berikut di browser.

HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGENALAN HTML

HTML (Hyper Text Markup Language)

ELEMEN DASAR HTML

Modul Mata Kuliah E-Commerce – Hal. 1

Modul Mata Kuliah E-Commerce – Hal. 2

Tag Awal Tag Akhir Kegunaan

Modul Mata Kuliah E-Commerce – Hal. 3

Modul Mata Kuliah E-Commerce – Hal. 4

Hasil yang terlihat di browser adalah :

Modul Mata Kuliah E-Commerce – Hal. 5

Bentuk umum untuk membuat list bernomor adalah :

Bentuk umum untuk membuat list bernomor adalah :

Untuk list definisi, bentuk umumnya adalah :

Modul Mata Kuliah E-Commerce – Hal. 6

Modul Mata Kuliah E-Commerce – Hal. 7

Modul Mata Kuliah E-Commerce – Hal. 8

Skrip tersebut menghasilkan tampilan di browser sebagai berikut :

Modul Mata Kuliah E-Commerce – Hal. 9

Script d iatas akan menghasilkan tampilan seperti gambar berikut :

Modul Mata Kuliah E-Commerce – Hal. 10

Skrip html diatas menghasilkan tampilan seperti berikut :

Modul Mata Kuliah E-Commerce – Hal. 11

Atribut name diisi dengan nama dari form tersebut.

Ada beberapa jenis elemen form yang dapat digunakan diantaranya :

Select, digunakan untuk menampilkan pilihan yang telah

Modul Mata Kuliah E-Commerce – Hal. 12

Script di atas akan menghasilkan tampilan berikut di browser.

Modul Mata Kuliah E-Commerce – Hal. 13

Anda mungkin juga menyukai