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

---

. Penulisan nama tag boleh kombinasi antara huruf kapital dan huruf kecil. Ada banyak jenis tag yang diharuskan berpasangan. Tag yang berpasangan diawali dengan dan kemudian di bagian akhir ditutup dengan . Contoh <marquee> Ini teks yang berjalan , elemen tersebut merupakan perintah untuk membuat suatu teks yaitu teks “ini teks yang berjalan” agar berjalan. Tag yang tidak berpasangan diantaranya perintah

---

yaitu untuk membuat garis vertikal (horizontal rule),
yaitu untuk pindah baris.

ELEMEN DASAR HTML Elemen-elemen dasar yang digunakan untuk membuat suatu dokumen HTML adalah tag dan , tag dan , dan tag dan . Struktur dasar dari dokumen HTML adalah sebagai berikut : pengenalan/informasi tentang dokumen HTML disinilah semua teks dan yang lainnya ditulis.

Modul Mata Kuliah E-Commerce – Hal. 1

Elemen dan merupakan suatu tag yang menunjukan bahwa dokumen tersebut merupakan dokumen HTML. Elemen dan merupakan yang berisi pengenalan/informasi tentang dokumen tersebut. Diantara tag inilah kita menulis judul (title) dari dokumen web. Elemen dan 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 : Disinilah isi dokumen html ditulis

Kalau skrip html tersebut dijalankan dalam sebuah browser, maka akan menghasilkan dokumen html seperti berikut :

Tag 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.

Modul Mata Kuliah E-Commerce – Hal. 2

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 <small> <strong> <sup> <sub>

Tag Akhir






Kegunaan Menebalkan (bold) teks yang berada di dalamnya Memiringkan (italic) teks yang berada di dalamnya Menggarisbawahi teks yang berada di dalamnya Memperbesar teks sebesar 1 tingkat Memperkecil teks sebesar 1 tingkat Memberikan efek tebal Menuliskan teks sebagai teks superscript Menuliskan teks sebagai teks subscript Menuliskan teks sebagai heading (judul) topik. X diisi dengan nomor dari 1 sampai dengan 6.

merupakan heading dengan font yang paling besar. Menuliskan teks seperti tulisan pada mesin tik (monospace) Pindah ke baris berikutnya (break rule) Mengatur tampilan teks dengan menentukan nama font dan besarnya

Contoh : Ini teks tebal
Ini teks digaris bawah
Ini teks dimiringkan
teks ini ditebalkan dan dimiringkan
Ini gaya tulisan mesin tik
Contoh superscript : f(x)=2x<sup>2+5x+3
Contoh sub script :D=X<sub>1+X<sub>2
Ini Tulisan Normal ini diperbesar 2 kali normal lagi khan?
Ini Tulisan Normal <small><small>ini diperbesar 2 kali normal lagi khan?
Ini Juga Normal tapi yang ini <strong>dipertebal
Ini teks berfont VERDANA dengan besar 5

Ini Header 1

Ini Header 2

Ini Header 3

Ini Header 4

Ini Header 5

Ini Header 6

Modul Mata Kuliah E-Commerce – Hal. 3

Script tadi akan menghasilkan tampilan web seperti gambar berikut :

Modul Mata Kuliah E-Commerce – Hal. 4

TAG PENGATURAN PARAGRAF Untuk mengatur paragraf, digunakan tag

dan

. Tag ini mempunyai atribut align yang boleh terisi dengan center, left, right dan justify. Contoh :

Rata Kiri PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis

Rata Tengah PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis

Rata Kanan PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis

Rata Kiri-Kanan PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis

Hasil yang terlihat di browser adalah :

Modul Mata Kuliah E-Commerce – Hal. 5

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

dan diakhiri dengan

2. List tidak bernomor (unordered list) , tag yang dipakai adalah

dan

3. List definisi (definition list), tag yang dipakai adalah

dan

Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak bernomor adalah dengan perintah

dan ditutup dengan

. Sedangkan untuk list definisi,

dan

sebagai definisi term dan

dan

sebagai definisi description (keterangan dari definisi term). Bentuk umum untuk membuat list bernomor adalah :

1. item 1
2. item 2
3. item 3

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 :

• item 1
• item 2
• item 3

Untuk tipenomor, nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran), square (segiempat). Untuk list definisi, bentuk umumnya adalah :

Term 1

Keterangan lengkap mengenai Term 1

Term 2

Keterangan lengkap mengenai Term 2

Term 3

Keterangan lengkap mengenai Term 3

Modul Mata Kuliah E-Commerce – Hal. 6

Contoh script adalah :

Kota-Kota Besar Di Pulau Jawa (memakai angka)

1. Bandung
2. Jakarta
3. Surabaya

Kota-Kota Besar Di Pulau Jawa (memakai huruf kapital)

1. Bandung
2. Jakarta
3. Surabaya

Kota-Kota Besar Di Pulau Jawa (memakai bulatan)

• Bandung
• Jakarta
• Surabaya

Kota-Kota Besar Di Pulau Jawa (memakai segiempat)

• Bandung
• Jakarta
• Surabaya

Kota-Kota Besar Di Pulau Jawa (dalam bentuk seperti daftar pustaka)

Bandung

Bandung adalah ibukota Jawa Barat

Jakarta

Jakarta adalah ibukota DKI Jakarta

Surabaya

Surabaya adalah ibukota Jawa Timur

Modul Mata Kuliah E-Commerce – Hal. 7

Hasil tampilan script diatas :

Modul Mata Kuliah E-Commerce – Hal. 8

TAG PEMBUATAN TABEL Untuk membuat suatu tabel dalam suatu halaman web site, maka tag yang dipakai adalah dan , dan yang terarti table row, dan 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 :

Kiri Atas	Kanan Atas
Kiri Bawah	Kanan Bawah

Skrip tersebut menghasilkan tampilan di browser sebagai berikut :

Modul Mata Kuliah E-Commerce – Hal. 9

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 . 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 :

Image dengan border 3 dengan align middle< /p>

Image dengan tanpa border dengan align right, gambar ini merupakan gambar resmi simbol dari php.

Image dengan tanpa border dengan align left, gambar ini merupakan gambar resmi simbol dari php.

Script d iatas akan menghasilkan tampilan seperti gambar berikut :

Modul Mata Kuliah E-Commerce – Hal. 10

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 dan . 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 :

Home page ini menyediakan beberapa link ke search engine :

www.yahoo.com

altavista

google

link dengan gambar

link dengan gambar tanpa border

Skrip html diatas menghasilkan tampilan seperti berikut :

Modul Mata Kuliah E-Commerce – Hal. 11

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

. Di antara kedua tag tersebut, elemen-elemen form dituliskan. Perintah umum tag form adalah

disinilah elemen-elemen form ditulis

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 :

Text Box Radio Button Check Box Submit

text

Memasukan 1 baris teks

radio

Pilihan yang hanya bisa dipilih 1 dari beberapa option checkbox Pemilihan dimana boleh memilih lebih dari satu option submit Tombol untuk melakukan proses

Reset

reset

Button

button

Tombol untuk me-reset form ke kondisi sebelum adanya pengisian data 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 : isi teks diisi disini

Select, digunakan untuk menampilkan pilihan yang telah disediakan. Cara pakainya adalah : <select name=namaoption> Bandung Jakarta Surabaya

Modul Mata Kuliah E-Commerce – Hal. 12

Contoh script :

Text Box

Radio Button Pilihan

Pilihan 1

<select size="1" name="D1"> Bandung Jakarta Surabaya

Disini saya bisa ditulis dalam beberapa paragraf. Saya bisa menampung teks dengan banyak.

Script di atas akan menghasilkan tampilan berikut di browser.

Modul Mata Kuliah E-Commerce – Hal. 13