Hyper Text Markup Language

Hyper Text Markup Language Hyper Text Markup Language atau disingkat HTML adalah bahasa atau cara penulisan informasi dalam pembuatan suatu homepage. HTML digunakan untuk memformat informasi – heading, paragraph, list, table, image dan lain sebagainya – sehingga bisa dikenali oleh web browser (Internet Explore, Firefox, Netscape, Operan dan yang lainnya). Pada bab ini akan dijelaskan mengenai formatting yang ada pada html beserta propertiproperti yang dimiliki.

1.1 HTML Headings Heading didefinisikan dengan tag

sampai

, dimana

adalah heading terbesar dan

adalah heading terkecil. HTML akan menambahkan baris kosong sebelum dan sesudah heading. Source Output

Ini adalah heading H1

Ini adalah heading H1

Ini adalah heading H2

Ini adalah heading H2

Ini adalah heading H3

Ini adalah heading H3

Ini adalah heading H4

Ini adalah heading H4

Ini adalah heading H5

Ini adalah heading H6

Ini adalah heading H5 Ini adalah heading H6

1.2 HTML Paragraphs Paragraphs didefinisikan dengan tag

. HTML akan menambahkan baris kosong sebelum dan sesudah paragraphs. Source Output

Ini adalah paragraph

Ini adalah paragraph yang lain

Ini adalah paragraph Ini adalah paragraph yang lain

1.3 HTML Line Breaks Tag
digunakan untuk ketika ingin berpindah baris, tetapi tidak ingin membuat paragraphs baru. Source Output

Ini
adalah para
graph dengan line breaks

Ini adalah para graph dengan line breaks

1.4 HTML Comments Tag comments digunakan untuk memasukkan komentar ke dalam html, tag comments ini akan diabaikan oleh browser. Comments bisa digunakan untuk memberikan penjelasan suatu bagian dari html, sehingga mempermudah dalam proses modifikasi nantinya. Source Output

1.5 HTML Horizontal Rule Tag

---

digunakan untuk menambahkan horizontal rule. HTML akan menambahkan baris kosong sebelum dan sesudah heading.

Bambang Herlandi

1 of 10

Hyper Text Markup Language

Source

Output

Ini adalah beberapa tulisan.

---

Ini juga bebeberap tulisan.

Ini adalah beberapa tulisan Ini juga bebeberap tulisan

1.6 HTML Text Formatting Tag digunakan untuk membuat tulisan menjadi tebal. Tag digunakan untuk membuat tulisan menjadi miring. Tag digunakan untuk membuat tulisan bergaris bawah. Tag <sub> digunakan untuk membuat tulisan subscript (di bawah). Tag <sup> digunakan untuk membuat tulisan superscript (di atas). Tag <del> digunakan untuk membuat tulisan tercoret. Tag <pre> digunakan untuk menampilkan tulisan apa adanya. Source Output Tulisan tebal
Tulisan tebal Tulisan miring
Tulisan miring Tulisan bergaris bawah
Tulisan bergaris bawah Tulisan mengandung Tulisan mengandung subscript <sub>subscript
Tulisan mengandung Tulisan mengandung superscript <sup>superscript
Tulisan tercoret Tulisan <del>tercoret
Tulisan <pre>Tulisan apa adanya apa adanya tidak perlu menambahkan break line tidak perlu menambahkan break line

1.7 HTML Character Entities Ada beberapa karakter yang tidak bisa dituliskan secara langsung pada html dikarena merupakan karakter kunci atau dipakai oleh html itu sendiri. Oleh karena itu untuk menuliskan karakter tersebut digunakan karakter entities sebagai gantinya. Karakter Keterangan Entity Name Entity Number spasi (non-breaking space)     < kurang dari < < > lebih dari > > & dan & & “” petik dua " " ‘ petik tunggal ' (kecuali IE) '

1.8 HTML Links/Anchor HTML menggunakan tag (anchor) untuk membuat link ke dokumen lain (bisa berupa halaman html, gambar, suara, file, email dan lain sebagainya). Properti Nilai Keterangan href URL Target URL dari link name Nama dari pada Anchor, digunakan untuk membuat bookmark pada Dokumen target _blank Dimana link akan membuka URL. _parent _blank – buka URL di browser baru _self _parent – buka URL di parent-frame dimana Anchor berada _top _self – buka URL di frame yang sama dimana Anchor berada _top – buka URL di browser yang sama dan meniadakan frame

Bambang Herlandi

2 of 10

Hyper Text Markup Language

Source: Membuka url di browser baru dan di browser yang sama Click here to open url in same browser.
Click here to open url in new browser. Source: Gambar sebagai link Click gambar untuk link ke google. Source: Link berupa mail Hindrawan Aris Source: Link ke lokasi lain pada halaman yang sama Menuju seksi 4
Seksi 1
Seksi 2
Seksi 3
Seksi 4
Seksi 5


1.9 HTML Frames Tag digunakan untuk membagi jendela/browser menjadi frame-frame, pembagian frame bisa berdasarkan baris, kolom atau gabungan keduanya. Pada tag nilai yang dimasukkan pada properti rows/columns menentukan luas/besar area tiap-tiap frame. Tag digunakan untuk menentukan file HTML pada tiap-tiap frame. Tag <iframe> digunakan untuk membuat frame yang berada di dalam halaman HTML. Tag properti Properti Nilai cols [nilai]pixel / [nilai] [nilai]% * rows [nilai]pixel / [nilai] [nilai]% * Tag properti Properti Nilai frameborder 0 1 Name [nama_frame] noresize noresize scrolling

src

Bambang Herlandi

yes no auto URL

Keterangan Menentukan berapa jumlah kolom pada frameset dan berapa luas masing-masing kolom pada frameset tersebut Menentukan berapa jumlah baris pada frameset dan berapa luas masing-masing baris pada frameset tersebut

Keterangan Menentukan apakah border/batas frame ditampilkan disekitar frame Nama dari pada frame Jika diberi nilai noresize maka frame tidak bisa dirubah luas/ukurannya Mengatus scrollbar pada frame

URL file yang akan ditampilkan pada frame

3 of 10

Hyper Text Markup Language

Tag <iframe> properti Properti Nilai align left right top middle bottom name [nama_frame] frameborder 0 1 height [nilai]pixel/[nilai] [nilai]% scrolling yes no auto src URL width nilai]pixel/[nilai] [nilai]%

Keterangan Mengatur posisi tulisan yang ada pada iframe

Nama dari pada frame Menentukan apakah border/batas frame ditampilkan disekitar frame Tinggi iframe Mengatus scrollbar pada frame

URL file yang akan ditampilkan pada frame Lebar iframe

Source: Frameset terdiri dari 3 frame kolom Source: Frameset terdiri dari 3 frame baris Source: Frameset terdiri dari 3 frame gabungan frame baris dan kolom Source: Navigasi pada frame Frame a
Frame b
Frame c

Bambang Herlandi

4 of 10

Hyper Text Markup Language

Source: Iframe <iframe src="frame_a.htm" width=”400” height=”400”>

Beberapa browser versi lama tidak mendukung iframe

Jika memang demikian maka iframe tidak akan muncul

1.10 HTML Tables HTML menggunakan tag untuk membuat table. Table terdiri dari baris-baris (menggunakan tag ), dimana baris terdiri dari kolom-kolom (menggunakan tag

). HTML juga menyediakan tag

sebagai penunjuk kolom header (tulisan pada kolom header menjadi tebal). Tag properti Properti Nilai align left center right background [gambar] bgcolor rgb(x,x,x) #xxxxxx [color_name] border [nilai]pixels/[nilai] cellpadding cellspacing width [nilai]pixel/[nilai] [nilai]% [nilai]pixel/[nilai] [nilai]% nilai]pixel/[nilai] [nilai]% Tag properti Properti Nilai align left center right justify background [gambar] bgcolor rgb(x,x,x) #xxxxxx [color_name] valign top middle bottom baseline Tag properti Properti Nilai align left center right justify Bambang Herlandi Keterangan Mengatur rata/posisi tulisan pada tabel Mengatur gambar latar/background daripada tabel Mengatur warna latar/background daripada tabel Menentukan lebar border/garis batas. Tip: pergunakan border=“0“ untuk membuat tabel tanpa border Menentukan jarak antara tulisan dengan pingir cell Menentukan jarak antara cell Menentukan lebar dari tabel Keterangan Mengatur rata/posisi horisontal tulisan pada baris Mengatur gambar latar/background daripada baris Mengatur warna latar/background daripada baris Mengatur rata/posisi vertikal tulisan pada baris Keterangan Mengatur rata/posisi horisontal tulisan pada kolom 5 of 10 Hyper Text Markup Language background bgcolor colspan height rowspan valign width [gambar] rgb(x,x,x) #xxxxxx [color_name] [jumlah] Mengatur gambar latar/background daripada kolom Mengatur warna latar/background daripada kolom Menentukan berapa kolom yang digabung dalam kolom tersebut nilai]pixel/[nilai] Menentukan tinggi dari kolom [nilai]% [jumlah] Menentukan berapa baris yang harus digabung dalam kolom tersebut top Mengatur rata/posisi vertikal tulisan pada baris middle bottom baseline nilai]pixel/[nilai] Menentukan lebar dari kolom [nilai]% Source: Simpel table 1.1 1.2 2.1 2.2 Source: Tabel dengan cellpadding 1.1 1.2 2.1 2.2 Source: Tabel dengan cellspacing 1.1 1.2 2.1 2.2 Source: Tabel dengan colspan 1.1 1.2 2.1 2.2a 2.2b Source: Tabel dengan rowspan 1.1 1.2 2.1 2a.2 2b.2 Bambang Herlandi 6 of 10 Hyper Text Markup Language Source: Tabel dengan background 1.1 1.2 2.1 2.2 1.11 HTML Lists HTML menyediakan list terurut dan tidak terurut, untuk list yang terurut menggunakan tag sedangkan untuk list tidak terurut menggunakan tag . Untuk list item baik ordered maupun unordered menggunakan tag . Tag properti Properti Nilai start [nomor_permulaan] type 1(nilai default) A a I i Tag properti Properti Nilai type disc (nilai default) square circle Tag properti Properti Nilai type A a I i 1 disc square circle Source: Ordered list Satu Dua Tiga Empat Lima Satu Dua Bambang Herlandi Keterangan Menentukan nomor awal untuk list Menentukan tipe dari ordered list Keterangan Menentukan tipe dari unordered list Keterangan Menentukan tipe dari list item 1. Satu B. Dua c. Tiga IV. Empat v. Lima 1. Satu 2. Dua 3. Tiga 7 of 10 Hyper Text Markup Language Tiga Empat Lima 4. Empat 5. Lima Source: Unordered list Satu Dua Tiga Source: List di dalam list Satu Dua Dua A Dua B Tiga • o ƒ • • Satu Dua Tiga Satu Dua o o • Dua A Dua B Tiga 1.12 HTML Forms HTML forms biasa digunakan untuk meminta masukkan data dari pengguna/user pada homepage. Didalam form bisa terdapat beberapa form elements (text field, textarea, dropdown menus, radio buttons, checkbox dan lainnya). Form elements inilah yang bisa digunakan oleh user untuk memasukkan data untuk kemudian diolah pada homepage. Pada HTML, form didefinisikan dengan tag . Tag properti Properti Nilai action [URL] enctype [mimetype] method get post name target [form_name] _blank _self _parent _top Bambang Herlandi Keterangan URL yang dituju ketika user men-submit data pada form Tipe mime yang digunakan untuk meng-encode isi dari form Jenis method HTTP yang digunakan dalam mengirim data dari form ke action URL GET: data pada form dikirimkan melalui URL POST: data pada form dikirimkan melalui body request Nama dari form Dimana form akan membuka action URL. _blank – buka URL di browser baru _parent – buka URL di parent-frame dimana form berada _self – buka URL di frame yang sama dimana form berada _top – buka URL di browser yang sama dan meniadakan frame 8 of 10 Hyper Text Markup Language Tag properti Properti Nilai checked checked disabled disabled maxlenght [number] name readonly [form_name] readonly size type [jumlah_karakter] button checkbox file hidden image password radio reset submit text (nilai default) [value] value Keterangan Menyatakan bahwa input elemen harus di-select ketika HTML di load pertama kali NOTE: hanya digunakan pada input type=”checkbox” dan type=”radio” Men-disable input waktu pertama di load, sehingga user tidak bisa men-select dan memasukkan mengisinya Jumlah karakter maksimum yang diijinkan di text field NOTE: hanya digunakan pada input type=”text” Nama dari input Menyatakan kalo nilai/value pada input tidak bisa dirubah NOTE: hanya digunakan pada input type=”text” Menyatakan ukuran dari input fields Menyatakan tipe dari input Button, reset dan submit: tulisan pada button Checkbox dan radio: nilai yang dikirim ketika user mensubmit data pada form Hidden, password dan text: nilai default yang ditampilkan Source: Text fields, password field and submit button Username : Password : Source: Radio buttons Pria Wanita Bambang Herlandi 9 of 10 Hyper Text Markup Language Source: Checkboxs Motor Mobil Source: Drop-down box <select name="motor"> Honda Yamaha Suzuki Kawasaki 1.13 HTML Image Menggunakan tag , HTML image berfungsi untuk menampilkan/menambahkan gambar pada dokumen HTML. Tag properti Properti Nilai alt [tulisan] url align hspace [URL] top bottom middle left right [nilai]pixel/[nilai] [nilai]pixel/ [nilai]% [nilai]pixel/[nilai] vspace [nilai]pixel/[nilai] width [nilai]pixel/ [nilai]% border height Keterangan Tulisan yang muncul jika kita mengarahkan mouse di atas gambar URL dari gambar yang ingin ditampilkan Menyatakan bagaimana gambar akan di-align berdasarkan tulisan yang berada disekitar gambar. Menentukan tebal border disekitar gambar Menyatakan tinggi dari pada gambar Menyatakan jarak spasi di sebelah kanan dan kiri gambar. Menyatakan jarak spasi di sebelah atas dan bawah gambar. Menyatakan lebar dari pada gambar Source: Image dan propertinya Logo google. Bambang Herlandi Logo google. 10 of 10 × Report "Ini adalah heading H1 Ini adalah heading H2 ini adalah heading H3" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close