HTML Beserta Contohnya

HTML HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah bahasa untuk membentuk sebuah halaman web dan html bukan sebuah bahasa pemrograman melainkan bahasa markup (markup language). Markup language terdiri dari sekumpulan markups tag. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ) yang biasa disebut tag.

1. Penamaan Dokumen HTML

Untuk membuat program aplikasi yang berjalan di atas web, Anda harus terlebih dahulu menguasai HTML. Saat ini telah banyak terdapat paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG (What You See Is What You Get) seperti Microsoft FrontPage, Macromedia DreamWeaver, Netscape Composer dan sebagainya, yang memudahkan Anda untuk merancang suatu halaman web tanpa harus menguasai tag-tag HTML. Akan tetapi untuk menjadikan halaman web Anda lebih dinamis dan lebih interaktif, penguasaan terhadap terhadap tag-tag HTML akan sangat diperlukan. Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak jelas adalah ekstensi filenya, yaitu .htm atau .html. Format ekstensi berformat .htm awalnya hanyalah mengakomodasi penggunaan html dalam operasi DOS. Dalam pemberian nama sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama r.html akan berbeda dengan dokumen R.html. Kasus case sensitive akan di jumpai pada dokumen web yang di hosting di dalam server yang berbasis *nix (keluarga sistem operasi Unix).

2. Definisi Elemen dan Tag HTML

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya. Untuk menandai sebuah elemen dalam suatu dokumen HTML di sebut tag. Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa harus berpasangan. Diantaranya:

Image ( )

Ganti Baris – Break (
)

Horizontal Rule (

---

)

Input Field ( )

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 2

Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.

Struktur Element

3. Penggunaan Tag dan Atribut Tag

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag HTML, memiliki syarat penulisan yaitu:

Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )

Tag HTML secara normal selalu berpasangan misal (...)

Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.

Tag html tidak case sensitive. Ini artinya sama dengan

Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya ..Tebal dan Miring..

4. Struktur Dasar HTML

latihan1.html

....konten yang di tampilkan

pada halaman browser.....

Output di Browser Title Nama File Body PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 3

5. Tag-Tag Dasar HTML

5.1 HTML

Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag seperti berikut ini : pada awal dokumen dan

pada akhir dokumen

5.2 Head

Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Penulisan tag seperti berikut ini : di awal setelah dan

di akhir section head. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :

Menyediakan judul dokumen

Menjembatani hubungan antar dokumen

Memberitahu browser untuk membuat form pencarian

Menyediakan metode untuk mengirim pesan ke tipe browser

Elemen yang mungkin terdapat pada bagian head :

Tag

Tag , digunakan untuk menentukan basis URL sebuah dokumen. Contoh

penggunaannya adalah sebagai berikut berikut :

Tag , digunakan untuk menunjukkan relasi antar dokumen HTML.

Tag ini mempunyai beberapa atribut : PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 4

Contoh penggunaannya adalah sebagai berikut:

Tag , digunakan untuk mendefinisikan informasi-informasi di luar HTML

Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas

yang belum didukung oleh HTML. Tag mempunyai atribut : Untuk lebih memperjelas penggunaan atribut tag perhatikan contoh berikut ini : Perintah diatas akan diterjemahkan oleh browser sebagai refresh dokumen setiap “50 detik”, jadi setara dengan mengklik tombol Refresh / Reload pada browser. Penggunaan elemen yang paling populer adalah penggunaan properti Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja search engine. Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut.

5.3 BODY

Bagian body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan di atas, bagian body diawali oleh tag dan ditutup

. Atributnya: PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 5

latihan2.html Kode Warna

link="yellow">

Ini adalah contoh penggunaan body.

Dan ini adalah sebuah link.

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 6

5.4 Heading

Tag heading digunakan untuk memformat heading (judul dan sub judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.Ada enam buah heading yang dikenal HTML, yaitu dari

sampai dengan

. Tag heading mempunyai atribut: [ left | center | right ] default left.Sebagai latihan, ketiklah latihan berikut dan jalankan dibrowser Anda.

latihan3.html

Ini Heading 1

Ini Heading 2

Ini Heading 3

Ini Heading 4

Ini Heading 5

Ini Heading 6

5.5 Horisontal Ruler

Tag Horisontal ruler

---

berfungsi untuk menampilkan garis horizontal tiga dimensi didalam halaman web Anda. Tag horizontal ruler juga tidak memerlukan elemen penutup . Atribut elemen horisontal ruler : align : [ left | center | right ] default center size : pixel ( tebal garis, default 2 ) width : panjang ( lebar garis, pixel atau persen, default 100%) noshade ( garis solid )

latihan4.html

::- TOKO ELEKTRONIK ARDAVA -::

---

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 7

5.6 Paragraf

Tag paragraph berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Dalam elemen paragraf terdapat atribut : align=[ left | center | right ] yang berfungsi sebagai pengatur perataan paragraf, jadi Anda cukup memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan tutup, dan defaultnya adalah left. Anda dapat memilih perataan kiri, tengah dan kanan. Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan5.html.

latihan5.html

::- TOKO ELEKTRONIK ARDAVA -::

---

Kategori :

Gadget, HP & Accessories

Handphone

5.7 Line Break

Tag Line Break
berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web Anda. Tag break tidak memerlukan tag penutup break. Bukalah latihan5.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan6.html.

latihan6.html

::- TOKO ELEKTRONIK ARDAVA -::

---

Kategori :

Gadget, HP & Accessories

Handphone
Smartphone
Tablet
Baterai
charger

Electronic & Home App

Alat Kebersihan
Mesin Cuci
Freezer
Air Conditioner
Peralatan Dapur

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 8

5.8 Komentar

Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri. Catatan/komentar dalam dokumen ini tidak di tampilkan dalam browser. Teks yang berfungsi sebagai komentar di simpan dalam dokumen di tandai dengan tag sebagai akhir tag. Khusus untuk tag komentar ini, tag penutup tidak menggunakan tanda garis miring.

latihan7.html

Rajin pangkal pandai

6. Memformat Karakter

Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk membuat sebuah dokumen menjadi menarik dan informatif.

6.1 Logical Format

Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai berikut:

, digunakan untuk menandai suatu kutipan (citation).

, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa

C.

, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis.

, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user

melalui keyboard.

, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.

, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu

teks.

, digunakan untuk menampilkan nama variabel.

, digunakan untuk menandai sebuah subdefinisidari daftar definisi.

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 9

latihan8.html

Ir.Soekarno adalah Presiden pertama republik indonesia.

Untuk menampilkan data array di pemrograman PHP adalah echo "$namaarray[]";

Saya berkata, "Jangan di pegang nanti rubuh."

Untuk mengunjungi website amikom, ketikkan pada url amikom.ac.id

Pada abjad terdapat 5 huruf vokal, yaitu AEIUO.

Katakan tidak untuk Narkoba

Kode program tersebut diiterasi sebanyak N kali.

Ayam adalah hewan berkaki dua.

6.2 Physical Format

Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag penutup. Tag-tag yang termasuk physical format adalah sebagai berikut :

, untuk menampilkan huruf tebal.

, untuk menampilkan huruf miring.

, untuk menampilkan garis bawah pada teks.

, untuk menampilkan huruf seperti huruf mesin ketik.

, untuk menampilkan garis horizontal pada bagian tengah huruf.

, untuk menampilkan ukuran huruf yang lebih besar.

, untuk menampilkan ukuran huruf yang lebih kecil.

, untuk menampilkan subscript.

, untuk menampilkan superscript.

Catatan : Semua tag tersebut memerlukan tag penutupnya masing-masing. PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 10

latihan9.html

Kalimat ini akan dicetak tebal

Kalimat ini akan dicetak miring

Kalimat ini akan bergaris bawah

Kalimat ini akan bergaris tengah

Menampilkan huruf seperti huruf mesin ketik.

H₂O

2³=8

7. Format Teks

7.1 Preformatted Text

Preformatted text

digunakan untuk menampilakan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampilkan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang ditampilkan oleh aplikasi berbasiskan teks.

latihan10.html

void Node::Remove()

{

if (prev)

prev->next = next;

else if (parent)

parent->SetContent(null);

if (next)

next->prev = prev;

parent = null;

}

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 11

7.2 Quotation / Identasi

Suatu kutipan teks lazim ada dalam suatu dokumen, ada dua macam kutipan:

Kutipan pendek – tag

Kutipan panjang – tag

Tag

digunakan untuk membuat sebagian teks yang di kutip sebagai blok sendiri. Dengan perintah

browser akan menampilkan teks menjorok ke dalam (mengindentasi teks) atau menampilkan teks. Tag tidak melakukan sesuatu yang khusus, tetapi dengan kita telah mendefinisikan sebagai kutipan, kemudian kita menggunakan style sheet maka kutipan ini bisa di atur pemformatannya dengna menggunakn style sheet.

latihan11.html

Berikut adalah teks dengan quotation yang panjang:

Toko Elektronik Online, Belanja Elektronik Murah, led murah, beli led, blackberry, laptop, cicil.

Berikut adalah teks dengan quotation yang pendek:

Isi quotation pendek

Dengan elemen blockquote, browser menyisipkan line break dan margin baru, tetapi elemen q tidak melakukan sesuatu yang khusus.

8. List HTML

List item merupakan perintah yang di gunakan dalam HTML untuk membuat daftar atau pengelompokkan kata [list]. Ada beberapa jenis-jenis list dalam HTML: HTML menyediakan lima cara untuk membuat daftar atau list , yaitu :

Ordered List

Unordered List

Directory List

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 12

Menu List

Definition List

Untuk modul ini, hanya ordered list dan unordered list yang dibahas.

8.1 Ordered List ( Numbering )

Ordered list digunakan untuk membuat daftar dimana setiap bagiannya memiliki nomor secara terurut. Ordered list dimulai dengan tag

dan diakhiri dengan

. Untuk menyatakan tiap bagiannya digunakan tag

dan tidak diperlukan tag penutup. Atribut elemen list ,yaitu : TYPE = [ 1 | a | A | i | I ] ( default 1 ) Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan12.html.

latihan12.html

::- TOKO ELEKTRONIK ARDAVA -::

---

Kategori :

Gadget, HP & Accessories

Computer & Accessories

Camera & Accessories

Audio Visual Appliance

Electronic & Home App.

8.2 Unordered List ( Bullet )

Berbeda dengan ordered list, dalam ordered list tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Untuk membuat daftar dengan tanda ini digunakan tag awal

dan tag penutup

dan untuk tiap bagiannya digunakan tag

tanpa tag penutup. Atribut elemen list ,yaitu : TYPE = [ disc | squre | circle ] ( default disc ) PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 13

Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan13.html.

latihan13.html

::- TOKO ELEKTRONIK ARDAVA -::

---

Kategori :

Gadget, HP & Accessories

Computer & Accessories

Camera & Accessories

Audio Visual Appliance

Electronic & Home App.

9. Entitas Karakter HTML

Beberapa karakter khusus mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Jika kita mengingkan browser untuk menampilkan karakter-karakter tersebut, kita harus menyisipkan entitas karakter ke dalam source HTML. Entitas karakter mempunyai 3 bagian: sebuah ampersand (&), sebuah nama entitas atau sebuah # dan nomor entitas, dan terakhir adalah sebuah tanda titik koma (; /semicolon). Untuk menampilkan tanda lebih kecil dalam sebuah HTML maka kita harus menuliskannya : < atau < Kelebihan dengan menggunakan nama dibanding dengan nomor adalah nama lebih mudah di ingat. Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru, sedangkan dukungan untuk nomor entitas hampir ada pada setiap browser. PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 14

Entitas karakter yang sering digunakan adalah sebagai berikut:

latihan14.html

Copyright ©

Registered trademark ®

Trademark ™

Non breaking space

Ampersand &

Angle quotion mark (left) «

Angle quotion mark (right) »

Tanda kutip "

Tanda lebih kecil <

Tanda lebih besar >

Tanda kali ×

Tanda bagi ÷

PENGENALAN PERANCANGAN WEB - Pengenalan Perancangan Web – S1 Sistem Informasi 15

REFERENSI Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset. Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya Edisi Revisi Keempat. Bandung: Informatika. Rajif Agung Yunmar, S.Kom. 2011. Modul Pemrograman Web HTML & CSS. STMIK AMIKOM Yogyakarta