Belajar Kilat Dasar Pemograman HTML

Pemograman HTML
1 / 119
Table of contents
Belajar Kilat Dasar Pmograman HTML ..................................................................................... 3

Daftar Isi ........................................................................................................................................ 4
Kata Pengantar ............................................................................................................................ 6
Tentang Penulis ............................................................................................................................ 7
Dasar-Dasar ................................................................................................................................. 8
1.1 Pengenalan ....................................................................................................................... 8
1.2 Persiapan .......................................................................................................................... 9
1.3 Dasar-Dasar Html .......................................................................................................... 10
1.4 Elemen Html ................................................................................................................... 14
1.5 Atribut HTML ................................................................................................................... 17
1.6 Html Headings ................................................................................................................ 19
1.7 Paragrap HTML ............................................................................................................. 23
1.8 Html Formating ............................................................................................................... 26
1.9 Html Style ........................................................................................................................ 28
1.10 Html Link ...................................................................................................................... 32
1.11 Html Image .................................................................................................................... 35
1.12 Html Table ..................................................................................................................... 37
1.13 Html Form ..................................................................................................................... 42
1.14 Html List ........................................................................................................................ 53
1.15 Html Frames ................................................................................................................. 60
1.16 HTML Meta ................................................................................................................... 68
1.17 HTML Entitas ............................................................................................................... 71
1.18 HTML Iframes ............................................................................................................... 72
1.19 HTML Editor ................................................................................................................. 74
1.20 HTML Block .................................................................................................................. 75
1.21 HTML Colors ................................................................................................................ 76
1.22 HTML Nama Colors ..................................................................................................... 80
Tingkat Lanjut ............................................................................................................................. 87
2.1 HTML Layout ................................................................................................................... 87
2.2 URL ................................................................................................................................. 90
2.3 Mengapa menggunakan HTML 4.0 .............................................................................. 92
2.4 Web Server ..................................................................................................................... 93
2.5 Url Encoding ................................................................................................................... 95
2.6 HTML Script .................................................................................................................... 95
HTML Media ............................................................................................................................... 99
3.1 HTML Audio .................................................................................................................. 102
3.2 HTML Object ................................................................................................................. 107
3.3 HTML Video ................................................................................................................. 110
3.4 HTML Youtube .............................................................................................................. 112
HTML XHTML .......................................................................................................................... 113
4.1 XHTML SYNTAX .......................................................................................................... 115
4.2 XHTML Doctype ........................................................................................................... 117
2 / 119
Belajar Kilat Dasar Pmograman HTML
BELAJAR KILAT MEMBUAT WEB DENGAN HTML ( disertai contoh-contoh

yang sudah jadi )
oleh : Harry RIdwan Ramadan
............................................................................
Penerbit : Ideotechnology
Tanggal Terbit : 2 juni 2012
Created with the Personal Edition of HelpNDoc: Free iPhone documentation generator
3 / 119
Daftar Isi
Kata Pengantar
Tentang Penulis
Bab 1 Dasar-Dasar
1.1 Pegenalan
1.2 Persiapan
1.3 Dasar-Dasar HTML
1.4 Element HTML
1.5 Atribut HTML
1.6 HTML Headings
1.7 Paragrap HTML
1.8 HTML formating
1.9 HTML Style
1.10 HTML Link
1.11 HTML Image
1.12 HTML Table
1.13 HTML Form
1.14 HTML List
1.15 HTML Frames
1.16 HML Meta
1.17 HTML Entitas
1.18 HTML Iframes
1.19 HTML Editor
1.20 HTML Block
1.21 HTML Colors
1.22 HTML Nama Colors
Bab 2 Tingkat Lanjut
2.1 HTML Layout
2.2 URL
2.3 Mengapa Menggunakan HTML 4.0
2.4 Web Server
2.5 Url Encoding
2.6 HTML Script
Bab 3 HTML Media
3.1 HTML Audio
3.2 HTML Object
3.3 HTML Video
3.4 HTML Youtube
4 / 119
Bab 4 HTML XHTML
4.1 XHTML Syntax
4.2 XHTML Doctype
Created with the Personal Edition of HelpNDoc: Easy EBook and documentation generator
5 / 119
Kata Pengantar
Syukur alhamdulilah saya ucapkan kehadirat Allah SWT, yang dengan izinnya-lah buku edisi pertama ini
dapat terujud.
Kemajuan teknologi internet/intranet dewasa ini semakin cepat , karena itu sebagai bagian dari masyarakat
IT indonesia. perlu kiranya kami sebagai penulis untuk membantu percepatan perkembangan ini. walaupun
demikian, kami tidak menutup mata tentu saja buku ini masih banyak kekurangan. karena itu sebagai
penulis kami membutuhkan masukan dari rekan-rekan , pelajar , ataupun mahasiswa yang tertarik untuk
mempelajari IT khususnya mengenai web.
mudah-mudah2an dengan adanya buku ini , akan lebih banyak lagi perkembangan dalam implementasi
aplikasi berbasis WEB di Indonesia. tidak lupa kami ucapkan terima kasih pada keluarga saya khususnya
orang tua saya yang telah mensuport saya dalam menulis buku ini.
Created with the Personal Edition of HelpNDoc: Single source CHM, PDF, DOC and HTML Help creation
6 / 119
Tentang Penulis
Harry Ridwan Ramadan pernah bekerja di perusahaan konsultan IT di antaranya PT. Softindo Computech,
dan PT Wina Guna pada tahun 2010-2012 , dan penulis juga pernah juga bekerja di perusahaan percetakan
Execom sebagai operator designer , penulis orang yang menyukai hal-hal yang berbau komputer penulis
juga sangat hoby membuat design-design, maupun membuat sebuah program aplikasi dan menulis , buku
ini adalah buku karyaku yang pertama.
Nama Lengkap : Harry Ridwan Ramadan

Email : harryridwanramadan@gmail.com
Phone : 08987962916
Faceook : https://www.facebook.com/ideotechnology
Created with the Personal Edition of HelpNDoc: Easily create Web Help sites
7 / 119
Dasar-Dasar
Created with the Personal Edition of HelpNDoc: Produce electronic books easily
1.1 Pengenalan
Dengan HTML Anda dapat membuat situs Web Anda sendiri. Tutorial ini mengajarkan Anda segala sesuatu
tentang HTML. HTML mudah dipelajari - Anda akan menikmatinya.
Apa Itu HTML?
HTML adalah bahasa untuk mendeskripsikan halaman web.
· HTML singkatan dari hyper text markup language
· HTML bukanlah sebuah bahasa pemrograman, itu adalah bahasa markup
· Sebuah bahasa markup adalah serangkaian tag markup
· HTML menggunakan tag markup untuk menjelaskan halaman web
Tag HTML
tag markup HTML biasanya disebut tag HTML
· tag HTML adalah kata kunci dikelilingi oleh sudut kurung seperti <html>
· tag HTML biasanya datang dalam pasangan seperti <b> dan </ b>
· Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
· Mulai dan tag akhir juga disebut tag pembuka dan tag penutup
Dokumen HTML = Halaman Web
· dokumen HTML mendeskripsikan halaman web
· dokumen HTML berisi tag HTML dan plain teks
· dokumen HTML juga disebut halaman web
Tujuan dari web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan
menampilkan mereka sebagai halaman web. Browser tidak menampilkan tag HTML, tapi menggunakan tag
untuk menafsirkan isi dari halaman tersebut:
8 / 119
pertama.html
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Hasil :
Contoh Dijelaskan
· Teks antara <html> dan </ html> menjelaskan halaman web
· Teks antara <body> dan </ body> adalah isi halaman yang terlihat
· Teks antara <h1> dan </ h1> ditampilkan sebagai judul kepala
· Teks antara <p> dan </ p> ditampilkan sebagai paragraf
Created with the Personal Edition of HelpNDoc: Easily create Help documents
1.2 Persiapan
Apa Yang Anda Perlukan
9 / 119
Anda memerlukan alat untuk belajar HTML.
· Text editor seperti notepade, php designer
· Macromedia dreamweaver.
Edit HTML
Dalam tutorial ini kami menggunakan editor teks biasa (seperti Notepad) untuk mengedit HTML. Kami
percaya ini adalah cara terbaik untuk mempelajari HTML. Namun, pengembang web profesional biasanya
lebih memilih editor HTML seperti FrontPage atau Dreamweaver, bukan menulis teks biasa.
Gunakan Web Test Anda Untuk Belajar
Kami menyarankan Anda bereksperimen dengan segala sesuatu yang Anda pelajari di tutorial ini dengan
mengedit file web Anda dengan editor teks (seperti Notepad).
Catatan: Jika web pengujian berisi markup tag HTML Anda belum belajar, jangan panik. Anda akan
mempelajari semua tentang hal itu dalam bab-bab berikutnya.
HTM Atau. Extension. HTML File?
Ketika Anda menyimpan file HTML, Anda dapat menggunakan baik. Htm atau html ekstensi file... Kami
menggunakan htm dalam contoh kita. Ini adalah kebiasaan dari masa lalu, ketika perangkat lunak hanya
diizinkan tiga huruf ekstensi file. Dengan perangkat lunak baru itu benar-benar aman digunakan. Html.
Created with the Personal Edition of HelpNDoc: Write eBooks for the Kindle
1.3 Dasar-Dasar Html

Jangan khawatir jika contoh menggunakan tag Anda belum belajar. Anda akan belajar tentang tag html
dalam bab-bab berikutnya.
HTML Head
Head HTML didefinisikan dengan tag <h1> untuk <h6>.
Heading.html
<html>
<body>
<h1>This is heading 1</h1>
10 / 119
</body>
</html>
Hasil :
HTML Paragraf
paragraf HTML didefinisikan dengan tag <p>.
paragraph.html
<html>
<body>
11 / 119
<p>ini adalah sebuah paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Hasil :
HTML Link
link HTML didefinisikan dengan tag <a>.
link.html
<html>
<body>
<a href="http://www.w3schools.com">
ini adalah sebuah link</a>
</body>
12 / 119
</html>
Hasil :
Catatan: link Alamat ditetapkan dalam atribut href. (Anda akan belajar tentang atribut dalam bab selanjutnya
dari tutorial ini).
Gambar HTML
gambar HTML didefinisikan dengan tag <img>.
Images.html
<html>
<body>
<img src="cover.jpg" width="104" height="142" />
</body>
</html>
Hasil :
13 / 119
1.4 Elemen Html

Dokumen HTML didefinisikan oleh elemen-elemen HTML.
Elemen HTML
Sebuah elemen HTML adalah segalanya dari tag mulai hingga akhir tag:
Start tag * Element content End tag *

<p> ini adalah sebuah paragrap </p>
<a href="default.htm" > ini adlah sebuah link </a>
<br /> ini adalah sebuah baris baru
* Tag awal adalah sering disebut tag pembuka.
Elemen HTML Sintaks
· Sebuah elemen HTML dimulai dengan tag awal / pembuka tag
· Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup
· Isi elemen adalah segalanya antara awal dan tag akhir
· Beberapa elemen HTML memiliki konten kosong
14 / 119
· elemen Kosong ditutup pada tag mulai
· Sebagian besar elemen HTML dapat memiliki atribut
Tip: Anda akan belajar tentang atribut pada bab selanjutnya dari tutorial ini.
Elemen HTML bersarang
Sebagian besar HTML elemen dapat bersarang (dapat berisi unsur lain HTML). dokumen HTML terdiri dari
elemen HTML bersarang.
Contoh Dokumen HTML
dokumen.html
<html>
<body>
<p>Ini adalah paragrap pertama saya.</p>
</body>
</html>
Hasil
Contoh di atas memiliki 3 elemen HTML.
15 / 119
Contoh HTML Dijelaskan
Unsur <p>:
<p>Ini adalah paragrap saya.</p>
Unsur <p> mendefinisikan sebuah paragraf dalam dokumen HTML. elemen ini memiliki <p> start tag dan
<tag akhir / p>. Isi elemen adalah: Ini adalah paragraf pertama saya.
Unsur <body>:
<body>
<p>ini adalah paragrap saya.</p>
</body>
Unsur <body> mendefinisikan tubuh dokumen HTML. elemen ini memiliki <body> start tag dan <tag akhir /
body>. Isi elemen adalah elemen HTML lain (elemen ap).
Unsur <html>:
<html>
<body>
<p>ini adalah paragrap saya.</p>
</body>
</html>
Unsur <html> mendefinisikan seluruh dokumen HTML. elemen ini memiliki <html> start tag dan <tag akhir /
html>. Isi elemen adalah elemen HTML lain (elemen body).
Jangan Lupakan Tag Akhir
Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa dengan tag akhir:
<p>This is a paragraph
Contoh di atas akan bekerja di hampir semua browser, tapi jangan bergantung padanya. Melupakan tag
akhir dapat menghasilkan hasil yang tidak diharapkan atau kesalahan. Catatan: Masa Depan Versi HTML
tidak akan memungkinkan Anda untuk melewatkan akhir tag.
Elemen HTML Kosong
16 / 119
elemen HTML dengan konten tidak disebut elemen kosong. Kosong elemen dapat ditutup pada tag mulai.
<br> adalah elemen kosong tanpa tag penutup (tag <br> mendefinisikan satu baris). Dalam XHTML, XML,
dan versi masa depan dari HTML, semua elemen harus ditutup. Menambahkan garis miring dengan tag
mulai, seperti /> <br, adalah cara yang tepat untuk menutup elemen kosong, diterima oleh HTML, XHTML
dan XML. Bahkan jika <br> bekerja di semua browser, menulis /> <br bukan bukti lebih masa depan.
HTML Tip: Gunakan Tag Huruf Kecil
Tag HTML tidak sensitif huruf: <P> berarti sama dengan <p>. Banyak situs web menggunakan tag HTML
huruf besar. menggunakan tag huruf kecil W3Schools karena World Wide Web Consortium (W3C)
merekomendasikan huruf kecil dalam HTML 4, dan tuntutan tag huruf kecil dalam versi masa depan (X)
HTML.
Created with the Personal Edition of HelpNDoc: Easy EPub and documentation editor
1.5 Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML.
Atribut Html
· Elemen HTML dapat memiliki atribut
· Atribut memberikan informasi tambahan tentang suatu elemen
· Atribut selalu ditentukan pada tag mulai
· Atribut datang dengan nama / nilai berpasangan seperti: nama = "nilai"
Contoh Atribut
link HTML didefinisikan dengan tag <a>. Alamat link yang ditetapkan dalam atribut href:
link.html
<html>
<body>
<a href="http://www.w3schools.com">
Ini Adalah Sebuah Link</a>
17 / 119
</body>
</html>
Hasil :
Atribut Selalu Memakai Tanda Kutip
Nilai Atribut harus selalu ditutup dengan tanda kutip. Double mengutip gaya yang paling umum, namun gaya
tanda kutip tunggal juga diperbolehkan.
Tip: Dalam beberapa situasi langka, ketika nilai atribut itu sendiri berisi tanda kutip, perlu menggunakan
tanda kutip tunggal: name = 'John "Shotgun" Nelson'.
Tips HTML: Gunakan Huruf Kecil Untuk Atribut
Atribut nama-nama dan nilai atribut bersifat case-insensitive. Namun, World Wide Web Consortium (W3C)
merekomendasikan atribut huruf kecil / atribut nilai dalam rekomendasi HTML 4 mereka. Versi yang lebih
baru dari (X) HTML akan menuntut atribut huruf kecil.
Referensi Atribut HTML
Daftar lengkap atribut hukum untuk setiap elemen HTML yang tercantum dalam:
Referensi HTML Lengkap
18 / 119
Di bawah ini adalah daftar dari beberapa atribut yang standar untuk elemen HTML:
Attribute Value Description

class classname Classname untuk menetapkan suatu elemen
id id Menentukan sebuah id unik untuk elemen
style style_definition Menentukan gaya inline untuk elemen
title tooltip_text Menentukan informasi tambahan mengenai unsur
(ditampilkan sebagai tool tip)
Created with the Personal Edition of HelpNDoc: Free PDF documentation generator
1.6 Html Headings

Head penting dalam dokumen HTML.
HTML Heading
Head didefinisikan dengan tag <h1> untuk <h6>. <h1> mendefinisikan head terbesar. <h6> mendefinisikan
terkecil head.
Contoh
heading1.html
<html>
<body>
<h1>ini adalah heading 1</h1>
</body>
</html>
19 / 119
Hasil :
Catatan: Browser secara otomatis menambahkan baris kosong sebelum dan sesudah sebuah heading.
Head Apakah Penting ?
Gunakan HTML head untuk judul saja. Jangan menggunakan head untuk membuat teks besar atau tebal.
Mesin pencari menggunakan head Anda ke indeks struktur dan isi halaman web Anda. Karena pengguna
dapat skim halaman Anda dengan judul tersebut, penting untuk menggunakan head untuk menunjukkan
struktur dokumen. H1 head harus digunakan sebagai head utama, diikuti dengan head H2, maka H3 head
penting kurang, dan sebagainya.
HTML Lines
Tag <hr> menciptakan garis horizontal dalam sebuah halaman HTML. Unsur jam dapat digunakan untuk
konten terpisah:
line.html
<html>
<body>
<p>tag hr mendefinisikan garis horizontal:</p>
20 / 119
<hr />
<p>ini adalah sebuah paragraf</p>
<hr />
<p>ini adalah sebuah paragrap</p>
<hr />
<p>ini adalah sebuah paragrap</p>
</body>
</html>
Hasil :
HTML Komentar
Komentar dapat disisipkan ke dalam kode HTML untuk membuatnya lebih mudah dibaca dan dimengerti.
Komentar akan diabaikan oleh browser dan tidak ditampilkan.
Komentar ditulis seperti ini:
21 / 119
Contoh
komentar.html
<html>
<body>

<p>ini adalah sebuah paragrap reguler</p>
</body>
</html>
Hasil :
Catatan: Ada tanda seru setelah tanda kurung pembukaan, tetapi tidak sebelum kurung penutup.
HTML Tips - Cara Lihat Sumber HTML
Apakah Anda pernah melihat suatu halaman Web dan bertanya-tanya "Hei! Bagaimana mereka melakukan
itu?" Untuk mengetahui, klik kanan pada halaman dan pilih "View Source" (IE) atau "View Page
22 / 119
Source" (Firefox), atau serupa untuk browser lainnya. Ini akan membuka jendela yang berisi kode HTML dari
halaman tersebut.
Created with the Personal Edition of HelpNDoc: Full-featured EBook editor
1.7 Paragrap HTML

Dokumen HTML terbagi ke dalam paragraf.
HTML Paragraf
Paragraf didefinisikan dengan tag <p>.
Contoh
paragraph.html
<html>
<body>
<p>ini adalah sebuah paragrap.</p>
</body>
</html>
Hasil :
23 / 119
Catatan: Browser secara otomatis menambahkan baris kosong sebelum dan sesudah paragraf.
Jangan Lupakan Tag Akhir
Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa dengan tag akhir:
Contoh
paragrap2.html
<html>
<body>
<p>ini adalah sebuah paragrap
<p>ini adalah sebuah paragrap.
<p>ini adalah sebuah paragrap.
<p>jangan lupa untuk menutup tag HTML!</p>
</body>
</html>
Hasil :
24 / 119
Contoh di atas akan bekerja di hampir semua browser, tapi jangan bergantung padanya. Melupakan tag
akhir dapat menghasilkan hasil yang tidak diharapkan atau kesalahan. Catatan: Masa Depan Versi HTML
tidak akan memungkinkan Anda untuk melewatkan akhir tag.
HTML Line Breaks
Gunakan tag <br/> jika Anda ingin menambah baris (baris baru) tanpa memulai sebuah paragraf baru:
Contoh
barisbaru.html
<html>
<body>
<p>Ini adalah<br />sebuah para<br />graph dengan baris baru</p>
</body>
</html>
Unsur <br> adalah elemen HTML yang kosong. Tidak memiliki tag akhir.
<br> Atau <br />
Dalam XHTML, XML, dan versi masa depan dari HTML, elemen HTML tanpa tag akhir (tag penutup) tidak
25 / 119
diperbolehkan. Bahkan jika <br> bekerja di semua browser, menulis <br/> bukan bukti lebih masa depan.
HTML Output - Tips Berguna
Anda tidak bisa yakin bagaimana HTML akan ditampilkan. layar besar atau kecil, dan jendela ukurannya
akan menciptakan hasil yang berbeda. Dengan HTML, Anda tidak dapat mengubah output dengan
menambahkan spasi ekstra atau baris ekstra dalam kode HTML Anda. Browser akan menghapus spasi dan
garis ekstra saat halaman ditampilkan. Setiap jumlah baris dihitung sebagaii satu baris, dan sejumlah ruang
dihitung sebagai satu spasi.
1.8 Html Formating

formatting.html
<html>
<body>
<p><b>Ini adalah sebuah tek tebal</b></p>
<p><big>ini adalah sebuah teks besar</big></p>
<p><i>ini adalah sebuah teks miring</i></p>
<p><code>ini adalah sebuah komputer output</code></p>
<p>ini adalah<sub> subscript</sub> dan <sup>superscript</sup></p>
</body>
</html>
Hasil :
26 / 119
Format HTML Tag
HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring. Tag
HTML disebut tag format. HTML Text Formatting Tags
Tag Description
<b> Mendefinisikan teks tebal
<big> Mendefinisikan teks besar
<em> Mendefinisikan teks menekankan
<i> Mendefinisikan teks miring
<small> Mendefinisikan teks kecil
<strong> Mendefinisikan teks yang kuat
<sub> Mendefinisikan teks subscript
<sup> Mendefinisikan teks superscripted
<ins> Mendefinisikan teks yang disisipkan
<del> Mendefinisikan teks yang dihapus
HTML "Computer Output" Tags
Tag Description
<code> Mendefinisikan kode teks komputer
<kbd> Mendefinisikan teks keyboard
27 / 119
<samp> Mendefinisikan sampel kode komputer
<tt> Mendefinisikan teks teletype
<var> Mendefinisikan variabel
<pre> Mendefinisikan teks terformat
HTML Citations, Quotations, and Definition Tags
Tag Description
<abbr> Mendefinisikan singkatan
<acronym> Mendefinisikan akronim
<address> Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
<bdo> Mendefinisikan teks arah
<blockquote> Mendefinisikan kutipan panjang
<q> Mendefinisikan kutipan pendek
<cite> Mendefinisikan kutipan
<dfn> Mendefinisikan istilah definisi
1.9 Html Style

Atribut sytle digunakan untuk elemen sytle HTML.
Atribut HTML Style
Tujuan dari atribut sytle adalah:
Untuk menyediakan cara umum untuk semua gaya elemen HTML. style diperkenalkan dengan
HTML 4, sebagai pilihan dan cara baru untuk elemen style HTML . Dengan style HTML,style dapat
ditambahkan ke elemen HTML secara langsung dengan menggunakan atribut style, atau tidak langsung
dalam style sheet terpisah (CSS file). Dalam kami tutorial HTML kita akan menggunakan atribut style untuk
memperkenalkan Anda ke sytle HTML.
Tag Usang dan Atribut
Dalam HTML 4, beberapa tag dan atribut usang. Usang berarti bahwa mereka tidak akan didukung dalam
versi masa depan dari HTML dan XHTML. Pesan ini sangat jelas: Hindari menggunakan tag usang dan
atribut!
Tag dan atribut harus dihindari:
Tags Description
28 / 119
<center> Mendefinisikan berpusat konten
<font> and <basefont> HTML Mendefinisikan font
<s> and <strike> Mendefinisikan strikethrough teks
<u> Mendefinisikan teks yang digarisbawahi
Attributes Description
align Mendefinisikan penyelarasan teks
bgcolor Mendefinisikan warna latar belakang
color Mendefinisikan teks warna
Untuk semua di atas: Gunakan style sebagai gantinya!
Contoh HTML style - Warna Latar Belakang
Properti background-color menentukan warna latar belakang untuk elemen:
sytle_background.html
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">ini adalah sebuah heading</h2>
<p style="background-color:green">ini adalah sebuah paragrap.</p>
</body>
</html>
Hasil :
29 / 119
Contoh HTML sytle - Font, Warna dan Ukuran
Font-falimy, color, dan font-size mendefinisikan, warna, dan ukuran teks dalam suatu elemen:
font.html
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Hasil :
30 / 119
Atribut gaya membuat tag <font> usang.
Contoh HTML style - Alignment Teks
text-align properti menentukan horizontal alignment teks dalam suatu elemen:
align.html
<html>
<body>
<h1 style="text-align:center">ini adalah sebuah heading</h1>
<p>di atas adalah sebuah heading dengan align center.</p>
</body>
</html>
Hasil :
31 / 119
Created with the Personal Edition of HelpNDoc: Easily create Help documents
1.10 Html Link

Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik cara
mereka dari halaman ke halaman.
HTML Hyperlink (Link)
Sebuah hyperlink (atau link) adalah sebuah kata, kelompok kata, atau gambar yang dapat Anda klik untuk
melompat ke dokumen baru atau bagian baru di dalam dokumen ini. Bila Anda memindahkan kursor di atas
link di halaman Web, panah akan berubah menjadi sebuah tangan kecil. Link yang ditentukan dalam HTML
menggunakan tag <a>..
Tag <a> dapat digunakan dalam dua cara:
1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut href
2. Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut name
Link HTML Sintaks
Kode HTML untuk link sederhana. Ini terlihat seperti ini:
32 / 119
<a href="url">Text Link</a>
Atribut href menentukan tujuan link.
Contoh
<a href="http://www.w3schools.com/">Kunjungi W3Schools</a>
Tip: Teks Link tidak harus berupa teks. Anda dapat membuat link dari gambar atau elemen HTML lainnya.
HTML Link - Target Atribut
Atribut target menentukan mana untuk membuka dokumen terkait. Contoh berikut akan membuka dokumen
terkait di jendela browser baru :
linkbaru.html
<html>
<body>
<a href="http://www.w3schools.com" target="_blank">Kunjungi W3Schools.com!</a>
<p>Jika Anda mengatur atribut target "_blank", link tersebut akan terbuka di jendela browser baru.</p>
</body>
</html>
Hasil :
33 / 119
HTML Link - Nama Atribut
Atribut name menentukan nama anchor. Atribut name digunakan untuk membuat bookmark dalam dokumen
HTML. Bookmarks tidak ditampilkan dengan cara khusus. Mereka tidak terlihat oleh pembaca.
Contoh
Bernama anchor di dalam dokumen HTML:
<a name="tips">Tips Bagian Berguna </a>
Buat link ke "Tips Bagian Berguna" dalam dokumen yang sama:
<a href="#tips">Visit the Useful Tips Section</a>
Atau, membuat link ke "Tips Bagian Berguna " dari halaman lain:
<a href="http://www.w3schools.com/html_links.htm#tips">
Kunjungi Bagian Tips Berguna</a>
linkanchor.html
<html>
<body>
<p>
<a href="#C4">lihat juga bagian 4.</a>
</p>
34 / 119
<h2>bagian 1</h2>
<p>bagian ba bla bla</p>
<h2>bagian 2</h2>
<h2>bagian 3</h2>
<h2><a name="C4">bagian 4</a></h2>

</body>
</html>
Hasil :
Catatan Dasar - Tips Berguna
Catatan: Selalu menambahkan slash tambahan untuk referensi subfolder. Jika Anda link seperti ini:
href = "http://www.w3schools.com/html", Anda akan menghasilkan dua permintaan ke server, server akan
menambahkan slash pertama ke alamat, dan kemudian membuat permintaan baru seperti ini : href = "http://
www.w3schools.com/html/".
Created with the Personal Edition of HelpNDoc: Free Kindle producer
1.11 Html Image
35 / 119
HTML Tag <img> dan Atribut Src
Dalam HTML, gambar didefinisikan dengan tag <img>. Tag <img> kosong, yang berarti bahwa
hanya berisi atribut, dan tidak memiliki tag penutup. Untuk menampilkan gambar pada halaman, Anda perlu
menggunakan atribut src. Src singkatan dari "source" Nilai dari atribut src adalah URL gambar yang ingin
ditampilkan.
Sintaks untuk mendefinisikan gambar:
<img src="url" alt="some_text"/>
URL yang menunjuk ke lokasi di mana foto tersebut disimpan. Suatu citra yang bernama "boat.gif",
terletak di "gambar" pada direktori "www.w3schools.com" memiliki URL: http://ww w.w3schools.com/
images/boat.gif . Browser akan menampilkan gambar dimana tag <img> terjadi dalam dokumen. Jika Anda
memasukkan tag gambar antara dua paragraf, browser menampilkan paragraf pertama, kemudian gambar,
dan kemudian paragraf kedua.
HTML Atribut Alt
Atribut alt diperlukan menentukan sebuah teks alternatif bagi gambar, jika gambar tidak dapat ditampilkan.
Nilai atribut alt-didefinisikan adalah penulis teks:
<img src="boat.gif" alt="Big Boat" />
Atribut alt memberikan informasi alternatif untuk foto jika pengguna untuk beberapa alasan tidak bisa
melihatnya (karena koneksi yang lambat, kesalahan pada atribut src, atau jika pengguna menggunakan
pembaca layar).
Catatan: Jika file HTML berisi sepuluh gambar - file sebelas diperlukan untuk menampilkan halaman
yang tepat. Loading mengambil gambar waktu, jadi saran saya yang terbaik adalah: Gunakan gambar
dengan hati-hati.
Catatan: Bila sebuah halaman web di-load, maka browser, pada saat itu, yang benar-benar
mendapatkan gambar dari server web dan menyisipkan ke dalam halaman,. Oleh karena itu pastikan bahwa
gambar yang benar-benar tinggal di tempat yang sama sehubungan dengan halaman web, dinyatakan
pengunjung Anda akan mendapatkan ikon link rusak. Ikon link rusak ditampilkan jika browser tidak dapat
menemukan gambar.
Created with the Personal Edition of HelpNDoc: iPhone web sites made easy
36 / 119
1.12 Html Table
Tabel HTML
Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap
baris dibagi menjadi sel-sel data (dengan tag <td>). td singkatan untuk "tabel data," dan memegang isi sel
data. Tag <td> dapat berisi teks, link, gambar, daftar, form, tabel lain, dll.
Tabel Contoh
table1.html
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Bagaimana kode HTML di atas tampak dalam browser:
37 / 119
HTML Tabel dan Atribut Border
Jika Anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas. Kadang-kadang ini dapat
berguna, tetapi sebagian besar waktu, kita ingin menunjukkan batas. Untuk menampilkan tabel dengan
perbatasan, menentukan atribut border:
table2.html
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Hasil :
38 / 119
HTML Tabel Header
Informasi header dalam sebuah tabel didefinisikan dengan tag <th>. Teks dalam elemen th akan tebal dan
berada di tengah.
table3.html
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
39 / 119
thead_body_footer.html
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>
<table border="1">
<thead>
40 / 119
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
41 / 119
Hasil :
1.13 Html Form

form HTML digunakan untuk memilih berbagai jenis input pengguna.
Form HTML
HTML form digunakan untuk melewatkan data ke server. form dapat berisi unsur-unsur input seperti
text field, checksboxes, radio-button, button submit dan banyak lagi. Form juga dapat berisi select list,
textarea, fieldset, legenda, dan elemen label.
Tag <form> digunakan untuk membuat bentuk HTML:
<form>
.
input elements
.
</form>
42 / 119
HTML Form - Unsur Input
Unsur yang paling penting adalah elemen input. Elemen masukan digunakan untuk memilih
informasi pengguna. Sebuah elemen input dapat berbeda dalam banyak hal, tergantung pada tipe atribut.
Sebuah elemen input dapat field text, checkboxes, password, radio button, button submit, dan banyak lagi.
Jenis input yang paling banyak digunakan dijelaskan di bawah ini.
Teks Fields
<input type="text" /> mendefinisikan sebuah baris input field yang pengguna dapat memasukkan teks :
form1.html
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
Catatan: Bentuk itu sendiri tidak terlihat. Juga catat bahwa lebar default kolom teks adalah 20 karakter.
Password Fields
43 / 119
<input type="password" /> mendefinisikan password:
password.html
<form>
Password: <input type="password" name="pwd" />
</form>
Catatan: charakter dalam field password (ditampilkan sebagai tanda bintang atau lingkaran).
Radio Button
<input type="radio" /> mendefinisikan sebuah tombol radio. tombol Radio membiarkan user HANYA SATU
pilih salah satu dari sejumlah pilihan:
radio.html
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
44 / 119
Checkboxes
<input type="checkbox" /> mendefinisikan sebuah kotak centang. Kotak centang membiarkan user pilih
SATU atau LEBIH pilihan dari sejumlah pilihan terbatas.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
45 / 119
Submit Button
<input type="submit" /> mendefinisikan tombol kirim. Sebuah tombol submit digunakan untuk
mengirim data formulir ke server. Data dikirim ke halaman yang ditentukan dalam aksi atribut formulir. File
didefinisikan dalam atribut action biasanya melakukan sesuatu dengan masukan yang diterima:
<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
46 / 119
Jika Anda mengetik beberapa karakter dalam kotak teks di atas, dan klik tombol "Kirim", browser akan
mengirimkan masukan Anda ke halaman yang disebut "html_form_action.asp".
drop-downlist.html
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Hasil :
47 / 119
textarea.html
<html>
<body>
<textarea cols=”10” rows=”30”>
dadadassad
</textarea>
</body>
</html>
Hasil :
48 / 119
button.html
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
Hasil :
49 / 119
fieldset.html
<html>
<body>
<form action="">
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
Hasil :
50 / 119
fieldsubmit.html
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</
p>
</body>
</html>
Hasil :
51 / 119
sendemail.html
<html>
<body>
<h3>Send e-mail to someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
Comment:<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Hasil :
52 / 119
Created with the Personal Edition of HelpNDoc: Easily create Web Help sites
1.14 Html List

List paling umum dari html adalah list ordered dan list unordered:
An ordered list: An unordered list:
1. The first list item · List item
2. The second list item · List item
3. The third list item · List item
List Unordered HTML
List unordered dimulai dengan tag <ul>. Setiap item list dimulai dengan tag <li>. Daftar item ditandai
dengan peluru (hitam lingkaran kecil biasanya).
list1.html
<ul>
<li>Coffee</li>
53 / 119
<li>Milk</li>
</ul>
Definisi list HTML
Sebuah definisi list adalah list item, dengan deskripsi setiap item. Tag <dl> mendefinisikan list i.
Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan item dalam list ) dan <dd>
(menggambarkan item dalam list):
list1.html
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
54 / 119
Tip: Di dalam list item Anda dapat memasukkan teks, jeda baris, gambar, link, list lainnya, dll.
listordered.html
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
55 / 119
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
56 / 119
<li>Oranges</li>
</ol>
</body>
</html>
Hasil :
listunordered.html
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
57 / 119
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Hasil :
58 / 119
htmlnested.html
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
59 / 119
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Hasil :
Created with the Personal Edition of HelpNDoc: Free iPhone documentation generator
1.15 Html Frames

Dengan frame, beberapa halaman Web dapat ditampilkan di jendela browser yang sama.
framevertikal.html
60 / 119
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
Hasil :
horizontalframe.html
<html>
<frameset rows="25%,50%,25%">
</frameset>
</html>
Hasil :
61 / 119
HTML Frames
Dengan frame, Anda dapat menampilkan lebih dari satu dokumen HTML di jendela browser yang sama.
Setiap dokumen HTML disebut frame, dan setiap frame tidak tergantung pada yang lain.
Kelemahan dari menggunakan frame adalah:
· Pengembang web harus melacak dokumen HTML lebih
· Sulit untuk mencetak seluruh halaman
Elemen frameset HTML
Elemen frameset memiliki unsur-unsur dua atau lebih frame. Setiap elemen frame memegang
dokumen terpisah. Elemen frameset menyatakan hanya BERAPA kolom atau baris akan ada dalam
frameset tersebut.
Elemen HTML frame
Tag <frame> mendefinisikan satu jendela tertentu (frame) dalam sebuah frameset. Dalam contoh di
bawah ini kami memiliki frameset dengan dua kolom. Kolom pertama diatur ke 25% dari lebar jendela
browser. Kolom kedua diatur sampai 75% dari lebar jendela browser. Dokumen "frame_a.htm" yang
dimasukkan ke dalam kolom pertama, dan dokumen "frame_b.htm" yang dimasukkan ke dalam kolom
kedua:
<frameset cols="25%,75%">
</frameset>
Catatan: Ukuran kolom frameset juga dapat diatur dalam pixel (cols = "200500"), dan salah satu kolom
dapat diatur untuk menggunakan ruang yang tersisa, dengan tanda bintang (cols = "25 %,*").
Tip: Jika bingkai memiliki batas terlihat, pengguna dapat mengubah ukurannya dengan menyeret
perbatasan. Untuk mencegah pengguna melakukan ini, Anda dapat menambahkan noresize = "noresize"
dengan tag <frame>.
Catatan: Tambahkan tag <noframes> untuk browser yang tidak mendukung frame. Penting: Anda
tidak dapat menggunakan tag <body> </body> bersama-sama dengan tag<frameset></frameset>! Namun,
jika Anda menambahkan tag <noframes> berisi beberapa teks untuk browser yang tidak mendukung frame,
62 / 119
Anda harus menyertakan teks dalam tag <body></body>! Lihat bagaimana hal itu dilakukan dalam contoh
pertama di bawah ini.
Framesets Bersarang
Cara membuat frameset dengan tiga dokumen, dan bagaimana campuran mereka dalam baris-baris dan
kolom. Contoh
noframe.html
<html>
<frameset rows="50%,50%">
</frameset>
</frameset>
</html>
Hasil
Frameset dengan noresize = "noresize"
63 / 119
Cara menggunakan atribut noresize. Gerakkan mouse pada batas antara frame dan perhatikan bahwa Anda
tidak dapat memindahkan perbatasan. Contoh
noresize.html
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm" />
<frame noresize="noresize" src="frame_b.htm" />
</frameset>
</html>
Hasil :
Navigasi frame
Cara membuat frame navigasi. Bingkai navigasi berisi daftar link dengan frame kedua sebagai target. File ini
disebut "tryhtml_contents.htm" berisi tiga link. Kode sumber link:
<a ="frame_a.htm" href target ="showframe"> Frame a </ a> <br>
<a ="frame_b.htm" href target ="showframe"> Frame b </ a> <br>
<a ="frame_c.htm" href target ="showframe"> Frame c </ a>
Bingkai kedua akan menampilkan dokumen terkait.
navigasiframe.html
64 / 119
<html>
<frameset cols="120,*">
<frame src="frame_b.htm" name="showframe" />
</frameset>
</html>
Hasil :
Inline bingkai
Cara membuat frame inline (bingkai di dalam halaman HTML).
inlineframe.html
<html>
<body>
<iframe src="http://ideotechshop.com"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Hasil :
65 / 119
Langsung ke Bagian Tertentu dalam Frame
Dua frame. Salah satu frame memiliki sumber ke bagian tertentu dalam file. Bagian yang diberikan tidak
dibuat dengan name="C10"> <a di link.htm "" file.
framebagian.html
<html>
<frame src="link.htm#C10" />
</frameset>
</html>
Hasil :
66 / 119
Langsung ke Bagian Tertentu dengan Navigasi Frame
Dua frame. Bingkai navigasi (content.htm) ke kiri berisi daftar link dengan frame kedua (link.htm)
sebagai target. Kerangka kedua menunjukkan dokumen terkait. Salah satu link dalam rangka navigasi
dihubungkan ke bagian tertentu dalam file target. Kode HTML dalam file "content.htm" terlihat seperti ini: <a
="link.htm" href sasaran Link ="showframe"> tanpa Anchor </ a href = "<br>> link.htm a <# C10 "target ="
showframe "> Link dengan Anchor </ a>.
framenavigasi.html
<html>
<frameset cols="180,*">
<frame src="content.htm" />
<frame src="link.htm" name="showframe" />
</frameset>
</html>
Hasil :
67 / 119
1.16 HTML Meta

Dokumen Deskripsi
Gunakan elemen meta untuk menggambarkan dokumen.
meta1.html
<html>
<head>
<meta name="author" content="Hege Refsnes" />
<meta name="revised" content="2010/06/20" />
</head>
<body>
<p>The meta elements on this page identifis the author and the revise date.</p>
</body>
</html>
68 / 119
Hasil :
Dokumen Keyword
Gunakan elemen meta untuk menentukan kata kunci dari sebuah dokumen.
katakunci.html
<html>
<head>
<meta name="description" content="Free Web tutorials on HTML, CSS, XML">
<meta name="keywords" content="HTML, CSS, XML">
</head>
<body>
<p>The meta elements on this page defines a description of the page, and its keywords.</p>
</body>
</html>
Hasil :
69 / 119
Redirect Pengguna
Bagaimana mengarahkan pengguna ke alamat web baru.
redirect.html
<html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.w3schools.com" />
</head>
<body>
<h1>Sorry! We have moved!</h1>
<h2>The new URL is: <a href="http://www.w3schools.com">http://www.w3schools.com</a></h2>
<p>You will be redirected to the new address in five seconds.</p>
<p>If you see this message for more than 5 seconds, please click on the link above!</p>
</body>
</html>
70 / 119
Elemen HTML meta
Metadata adalah informasi tentang data. Tag <meta> menyediakan metadata tentang dokumen
HTML. Metadata tidak akan ditampilkan pada halaman, tetapi akan mesin parsable. Meta elemen biasanya
digunakan untuk menetapkan halaman deskripsi, kata kunci, penulis dokumen tersebut, terakhir diubah,
dan metadata lainnya.
Tag <meta> selalu dalam elemen head. metadata ini dapat digunakan oleh browser (bagaimana
menampilkan konten atau reload halaman), mesin pencari (kata kunci), atau layanan web lainnya.
Kata kunci untuk Search Engine
Beberapa mesin pencari akan menggunakan nama dan atribut isi elemen meta untuk mengindeks halaman
Anda. Elemen meta berikut mendefinisikan deskripsi halaman:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
Elemen meta berikut mendefinisikan kata kunci untuk halaman:
<meta name="keywords" content="HTML, CSS, XML" />
Maksud nama dan atribut konten adalah untuk menjelaskan konten halaman.
Catatan: Banyak webmaster telah menggunakan tag <meta> untuk spamming, seperti mengulang kata
kunci (atau menggunakan kata kunci yang salah) untuk peringkat lebih tinggi. Oleh karena itu, kebanyakan
mesin pencari telah berhenti menggunakan tag <meta> ke indeks / peringkat halaman.
Created with the Personal Edition of HelpNDoc: Create HTML Help, DOC, PDF and print manuals from 1 single
source
1.17 HTML Entitas

Hakcipta / reserved karakter dalam HTML harus diganti dengan entitas karakter.
Entitas HTML
Beberapa karakter reserved/hakcipta dalam HTML. Hal ini tidak mungkin untuk menggunakan
kurang dari (<) atau lebih besar dari (>) tanda-tanda dalam teks Anda, karena browser akan campuran
mereka dengan tag. Untuk benar-benar menampilkan reserved karakter, kita harus menggunakan entitas
karakter dalam kode sumber HTML.
71 / 119
Sebuah entitas karakter terlihat seperti ini:
&entity_name;
atau
&#entity_number;
Untuk menampilkan kurang dari tanda kita harus menulis: < atau <
Tip: Keuntungan dari menggunakan nama entitas, bukan nomor, adalah bahwa nama lebih mudah untuk
diingat. Namun, kelemahan adalah bahwa browser mungkin tidak mendukung nama entitas semua
(dukungan untuk nomor entitas sangat baik).
Non-breaking Space
Sebuah entitas karakter yang umum digunakan dalam HTML adalah non-breaking space ().Browser
selalu akan memotong spasi dalam halaman HTML. Jika Anda menulis 10 spasi pada teks Anda, browser
akan menghapus 9 dari mereka, sebelum menampilkan halaman. Untuk menambahkan spasi pada teks
Anda, Anda dapat menggunakan entitas karakter.
Entitas Karakter HTML Berguna
Catatan: nama Badan bersifat case sensitive!
Result Description Entity Name Entity Number

non-breaking space
< kurang dari < <
> Lebih dari > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® Merek dagang terdaftar ® ®
™ Merek dagang ™ ™
Created with the Personal Edition of HelpNDoc: Free HTML Help documentation generator
1.18 HTML Iframes

iframe digunakan untuk menampilkan sebuah halaman web didalam sebuah web.
syntax untuk menambahkan iframe.
72 / 119
<iframe src=""></iframe>
url menunjukan ke lokasi dari url yang terpisah.
Iframe - Mengatur Tinggi dan Lebar

attribute height dan width digunakan untuk menentukan tinggi dan lebar iframe.nilai attribute yang di
tetapkan dalam pixel secara default tetapi bisa juga di dalam persen seperti ( 80% ).
iframe.html
<html>
<body>
<iframe src="http://ideotechshop.com" width="200" height="200"></iframe>
<p>beberapa browser lama tidan support iframes.</p>

<p>jika tidak, iframe tidak akan terlihat.</p>
</body>
</html>
Hasil :
73 / 119
Created with the Personal Edition of HelpNDoc: Easily create EBooks
1.19 HTML Editor

Menulis HTML Menggunakan Notepad atau TextEdit
HTML dapat diedit dengan menggunakan editor HTML profesional seperti:
· Adobe Dreamweaver
· Microsoft Expression Web
· CoffeeCup HTML Editor
Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac). Kami percaya
menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML.
Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.
Langkah 1: Menggunakan Notepad
Untuk memulai Notepad buka :

- Start
- All Programs
- Accessories
- Notepad
Langkah 2: Edit HTML Anda dengan Notepad

Ketik kode HTML pada Notepad Anda:
Langkah 3: Simpan HTML Anda
74 / 119
Pilih Simpan sebagai .. dalam menu file Notepad tersebut.
Bila Anda menyimpan file HTML, Anda dapat menggunakan baik htm atau html. File.. Tidak ada perbedaan,
itu sepenuhnya terserah Anda.
Simpan file di folder yang mudah diingat, seperti W3Schools.
Langkah 4: Jalankan HTML di Browser Anda
Mulai browser web Anda dan buka file html Anda dari file , Buka menu, atau hanya browsing folder dan
double-klik file HTML Anda.
Hasilnya akan terlihat seperti ini:
Created with the Personal Edition of HelpNDoc: Write eBooks for the Kindle
1.20 HTML Block

Elemen HTML dapat dikelompokkan bersama-sama dengan <div> dan <span>
HTML Blok Elemen

Sebagian besar unsur HTML didefinisikan sebagai level blok elemen atau sebagai inline elemen.Blok
elemen tingkat biasanya mulai (dan akhir) dengan baris baru ketika ditampilkan di browser. Contoh: <h1>,
75 / 119
<p>, <ul>, <table>
HTML Inline Elemen
Elemen inline biasanya ditampilkan tanpa memulai baris baru.

Contoh: <b>, <td>, <a>, <img>
Elemen HTML <div>
Unsur <div> HTML adalah tingkat blok elemen yang dapat digunakan sebagai wadah untuk
mengelompokkan elemen HTML lainnya.Unsur <div> tidak memiliki arti khusus. Kecuali itu, karena
merupakan elemen tingkat blok, browser akan menampilkan satu baris sebelum dan sesudahnya.Ketika
digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengatur gaya atribut blok besar
konten.Lain yang umum digunakan dari elemen <div>, adalah untuk layout dokumen. Ini menggantikan
"cara lama" untuk mendefinisikan layoutmenggunakan tabel. Menggunakan tabel tidak penggunaan yang
benar dari elemen table. Tujuan dari elemen table adalah untuk menampilkan data tabular.
HTML <span> Elemen
Elemen HTML <span> merupakan elemen inline yang dapat digunakan sebagai wadah untuk teks.Unsur
<span> tidak memiliki arti khusus.Ketika digunakan bersama dengan CSS, elemen <span> dapat
digunakan untuk mengatur atribut style pada bagian-bagian teks.
Created with the Personal Edition of HelpNDoc: Free EPub and documentation generator
1.21 HTML Colors

Warna yang ditampilkan menggabungkan MERAH, HIJAU, BIRU dan cahaya.
Nilai Warna
Warna HTML didefinisikan menggunakan notasi heksadesimal (HEX) untuk kombinasi dari Red, Green, dan
nilai warna Blue (RGB). Nilai terendah yang dapat diberikan kepada salah satu sumber cahaya adalah 0
(dalam Hex: 00). Nilai tertinggi adalah 255 (dalam Hex: FF). Nilai HEX ditetapkan sebagai 3 pasang dari dua
digit angka, dimulai dengan tanda #.
76 / 119
16 juta warna berbeda
Kombinasi Merah, Hijau, Biru dan nilai-nilai dari 0 sampai 255, memberikan lebih dari 16 juta warna yang
berbeda (256 x 256 x 256).
Jika Anda melihat tabel warna di bawah ini, Anda akan melihat hasil dari berbagai lampu merah dari 0
sampai 255, sekaligus menjaga lampu hijau dan biru dari nol.
Untuk melihat daftar lengkap dari warna campuran ketika RED bervariasi dari 0 hingga 255, klik pada salah
satu HEX atau nilai-nilai RGB di bawah ini.
77 / 119
Nuansa Gray
Warna abu-abu diciptakan dengan menggunakan jumlah yang sama daya ke semua sumber cahaya. Untuk
membuatnya lebih mudah bagi Anda untuk memilih warna yang benar, kami telah membuat tabel warna
abu-abu untuk Anda:
78 / 119
Warna Aman Web?
Beberapa tahun lalu, ketika komputer didukung maks 256 warna yang berbeda, daftar 216 "Warna Safe
Web" diusulkan sebagai standar Web, sisakan 40 warna sistem tetap.
The 216 lintas-browser palet warna diciptakan untuk memastikan bahwa semua komputer akan
menampilkan warna dengan benar ketika menjalankan sebuah palet warna 256.
Ini tidak penting hari ini, karena kebanyakan komputer dapat menampilkan jutaan warna berbeda. Anyway,
di sini adalah daftar:
79 / 119
Created with the Personal Edition of HelpNDoc: Full-featured EPub generator
1.22 HTML Nama Colors
80 / 119
Warna Nama Didukung oleh Semua Browser
147 nama warna didefinisikan dalam HTML dan CSS warna spesifikasi (16 nama warna dasar ditambah 130
lebih). Tabel di bawah menguraikan mereka semua, bersama dengan nilai-nilai heksadesimal mereka.
Tip: The 16 basic color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow.
Klik pada nama warna (atau nilai hex) untuk melihat warna sebagai warna background-bersama dengan
warna teks yang berbeda:
81 / 119
82 / 119
83 / 119
84 / 119
85 / 119
source
86 / 119
Tingkat Lanjut
source
2.1 HTML Layout

Tata letak halaman web ini sangat penting untuk membuat website Anda terlihat baik.
Situs web Layouts

Kebanyakan website telah menempatkan konten mereka di beberapa kolom (diformat seperti majalah atau
koran).
Beberapa kolom diciptakan dengan menggunakan tag table atau <div>. Beberapa CSS biasanya juga
ditambahkan ke posisi elemen, atau untuk membuat latar belakang atau warna-warni tampilan untuk
halaman.
HTML Layouts - Menggunakan Tabel
Cara paling mudah untuk menciptakan layout adalah dengan menggunakan tag table HTML.
Contoh berikut menggunakan tabel dengan 3 baris dan 2 kolom - baris pertama dan terakhir meliputi kedua
kolom menggunakan atribut colspan:
table_layout.html
<html>
<body>
<table width="500" border="0">

<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
87 / 119
CSS<br />
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>
</body>
</html>
Hasil :
Catatan: Meskipun ada kemungkinan untuk membuat layout yang bagus dengan tabel HTML, tabel
88 / 119
dirancang untuk menyajikan data tabular - TIDAK sebagai alat layout!
HTML Layouts - Menggunakan Elemen Div

Elemen div adalah tingkat level elemen yang digunakan untuk mengelompokkan elemen HTML.
Contoh berikut ini menggunakan lima elemen div untuk membuat tata letak kolom ganda, menciptakan hasil
yang sama seperti pada contoh sebelumnya:
layout_div.html
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Copyright © 2011 W3Schools.com</div>
</div>
</body>
</html>
kode di ataas akan menghasilkan
89 / 119
HTML Layout - Tips Berguna
Tip: Keuntungan terbesar menggunakan CSS adalah bahwa, jika Anda menempatkan kode CSS dalam
sebuah style sheet eksternal, situs Anda menjadi Jauh Lebih Mudah untuk mempertahankan. Anda dapat
mengubah layout semua halaman Anda dengan mengedit satu file. Untuk mempelajari lebih lanjut tentang
CSS, kita mempelajari tutorial CSS .
Tip: Karena layout canggih membutuhkan waktu untuk membuat, pilihan yang lebih cepat adalah dengan
menggunakan template. Pencarian Google untuk website template gratis (ini adalah layout situs pre-built
Anda dapat menggunakan dan menyesuaikan).
HTML Tags Tata Letak
<table> Mendefinisikan sebuah tabel
<div> Mendefinisikan sebuah bagian dalam sebuah

dokumen
Created with the Personal Edition of HelpNDoc: Full-featured EPub generator
2.2 URL
90 / 119
URL adalah kata lain untuk suatu alamat web. URL dapat terdiri dari kata-kata, seperti
"w3schools.com", atau Internet Protocol (IP) alamat: 192.68.20.50. Kebanyakan orang masukkan nama
website ketika berselancar, karena nama yang mudah diingat daripada nomor.
URL - Uniform Resource Locator
Ketika Anda mengklik link dalam halaman HTML, tag <a> poin mendasar ke alamat di world wide web. A
Uniform Resource Locator (URL) digunakan untuk alamat dokumen (atau data lain) di world wide web.
scheme://host.domain:port/path/filename
Penjelasan:
· scheme - mendefinisikan jenis layanan Internet. Yang jenis yang paling umum adalah http.
· host - mendefinisikan host domain (host default untuk http www).
· domain - mendefinisikan nama domain Internet, seperti w3schools.com.
· : Port - mendefinisikan nomor port di host (port default http nomor 80).
· path - mendefinisikan path di server (Jika dihilangkan, dokumen tersebut harus disimpan pada
direktori root dari situs web.
· filename - mendefinisikan nama dokumen / sumber daya
situs umum mulai dengan http://. page dimulai dengan http:// tidak dienkripsi, sehingga semua informasi
yang dipertukarkan antara komputer Anda dan internet dapat "dilihat" oleh hacker. Secure website dimulai
dengan https: / /. S "" singkatan dari "aman". Di sini, informasi yang dipertukarkan akan dienkripsi,
sehingga berguna untuk hacker.
URL Skema Common
Tabel di bawah ini daftar beberapa skema umum:
Scheme Short for.... Which pages will the scheme be used for...
http HyperText Transfer Protocol halaman web umum dimulai dengan http://. Tidak
dienkripsi. Bijaksana untuk memasukkan informasi
pribadi di halaman http://
https Secure HyperText Transfer Protocol Keaaman website. Semua informasi yang
dipertukarkan akan dienkripsi, tidak dapat dibaca
oleh hacker
91 / 119
ftp File Transfer Protocol Untuk men-download atau upload file ke sebuah
situs web. Berguna untuk pemeliharaan domain
file Sebuah file di komputer Anda
gopher Sebuah dokumen atau menu Gopher
news Sebuah newsgroup
WAIS Wide Area Information Search Database atau dokumen pada database WAIS
Created with the Personal Edition of HelpNDoc: Full-featured Kindle eBooks generator
2.3 Mengapa menggunakan HTML 4.0

HTML 3.2 Apakah Sangat Salah!
HTML asli tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen. tag HTML
tersebut dimaksudkan untuk menentukan isi dokumen, seperti ini:
<p> Ini adalah sebuah paragraf </.> p
<h1> Ini adalah judul </ h1>
Ketika tag <font> dan atribut seperti warna yang ditambahkan dengan spesifikasi 3,2 HTML, itu
memulai sebuah mimpi buruk bagi pengembang web! Pengembangan dan pemeliharaan situs web di mana
warna font dan informasi di mana ditambahkan untuk setiap elemen HTML tunggal, menjadi proses yang
panjang dan mahal.
Apa yang Begitu Besar Tentang HTML 4,0?
Pada HTML 4.0 memformat semua dapat dihapus dari dokumen HTML, dan disimpan dalam
sebuah style sheet. Karena HTML 4.0 memisahkan tata letak dari struktur dokumen, kami memiliki apa
yang kita selalu dibutuhkan: kontrol Total tata letak, tanpa mengacaukan konten dokumen.
Apa yang Harus Anda Lakukan Tentang itu
· JANGAN gunakan atribut presentasi di dalam elemen HTML Anda.
· Mulai menggunakan style! Silahkan baca CSS tutorial untuk belajar tentang style sheet.
· JANGAN gunakan tag usang. Kunjungi kami HTML 4.01 Referensi untuk melihat mana tag dan
atribut yang ditinggalkan
· Validasi halaman HTML Anda
92 / 119
Validasi File HTML Anda
Untuk memvalidasi dokumen HTML, sebuah deklarasi DOCTYPE harus ditambahkan. Deklarasi
DOCTYPE bukanlah tag HTML, yang merupakan instruksi untuk web browser tentang apa versi bahasa
markup halaman ditulis masuk. Deklarasi DOCTYPE mengacu pada Definisi Jenis Dokumen (DTD). DTD
menetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten dengan benar.
Deklarasi DOCTYPE harus menjadi hal pertama yang sangat penting dalam dokumen HTML, sebelum tag
<html>.
HTML 4.01 Strict
DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK atau usang elemen presentasi
(seperti font). Framesets tidak diperbolehkan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK dan usang elemen presentasi (seperti font).
Framesets tidak diperbolehkan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Ini sama dengan DTD HTML 4.01 Transitional, namun memungkinkan penggunaan isi frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
2.4 Web Server
Pengertian Web Server
Web server merupakan software yang memberikan layanan data yang berfungsi menerima
93 / 119
permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali
hasilnya dalam bentuk halaman - halaman web yang umumnya berbentuk dokumen HTML
Macam - Macam Web Server diantanya:
Apache Web Server - The HTTP Web Server
1.Apache Tomcat
2.Microsoft windows Server 2003 Internet Information Services (IIS)
3.Lighttpd
4.Sun Java System Web Server
5.Xitami Web Server
6.Zeus Web Server
Namun web yang terkenal dan yang sering digunakan adalah Apache dan Microsoft Internet Information
Service (IIS).
Cara kerja web server :
1. Cara kerja Web Server Web server merupakan mesin dimana tempat aplikasi atau software beroperasi
dalam medistribusikan web page ke user, tentu saja sesuai dengan permintaan user.
2. Hubungan antara Web Server dan Browser Internet merupakan gabungan atau jaringan Komputer yg ada
di seluruh dunia. Setelah terhubung secara fisik, Protocol TCP/IP (networking protocol) yg memungkinkan
semua komputer dapat berkomunikasi satu dengan yg lainnya. Pada saat browser meminta data web page
ke server maka instruksi permintaan data oleh browser tersebut di kemas di dalam TCP yg merupakan
protocol transport dan dikirim ke alamat yg dalam hal ini merupakan protocol berikutnya yaitu Hyper Text
Transfer Protocol (HTTP).
HTTP ini merupakan protocol yg digunakan dalam World Wide Web (WWW) antar komputer yg
terhubung dalam jaringan di dunia ini. Untuk mengenal protocol ini jelas sangan mudah sekali dimana setiap
kali anda mengetik http://… anda telah menggunakannya, dan membawa anda ke dunia internet. Data yg di
passing dari browser ke Web server disebut sebagai HTTP request yg meminta web page dan kemudian
web server akan mencari data HTML yg ada dan di kemas dalam TCP protocol dan di kirim kembali ke
browser. Data yg dikirim dari server ke browser disebut sebagai HTTP response. Jika data yg diminta oleh
browser tidak ditemukan oleh si Web server maka akan meninbulkan error yg sering anda lihat di web page
yaitu Error : 404 Page Not Found.
Created with the Personal Edition of HelpNDoc: Easy CHM and documentation editor
94 / 119
2.5 Url Encoding
Karakter URL Unicode mengkonversi ke dalam format yang dapat dengan aman ditransmisikan melalui
Internet.
URL - Uniform Resource Locator
Web browser meminta halaman web dari server dengan menggunakan URL. URL adalah alamat halaman
web seperti: http://www.w3schools.com.
URL Encoding
URL hanya dapat dikirim melalui Internet dengan menggunakan karakter ASCII-set . Sejak URL
sering mengandung karakter diluar ASCII set, URL harus diubah menjadi format ASCII valid. menggantikan
URL encoding karakter ASCII yang tidak aman dengan "%" diikuti oleh dua digit heksadesimal sesuai
dengan nilai-nilai karakter di --8859-1 set karakter ISO . URL tidak boleh berisi spasi. URL encoding
biasanya menggantikan spasi dengan tanda +.
Contoh URL Encoding
Character URL-encoding
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
Â %C2
Ã %C3
Ä %C4
Å %C5
2.6 HTML Script

javascript membuat halaan web lebih interaktif dan dinamis.
Contoh
cara memasukan script kedalam dokumen HTML
javascript.html
<!DOCTYPE html>
<html>
<body>
95 / 119
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Hasil :
bagaimana menangani browser yang tidak mendukung scriptting, atau script di nonaktifkan.
noscript.html
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text in the noscript element.</p>
</body>
</html>
Hasil :
96 / 119
Elemen HTML Script
Tag <script> digunakan untuk mendefinisikan script sisi klien, seperti JavaScript a.
Elemen script baik berisi pernyataan scripting atau menunjuk ke sebuah file skrip eksternal melalui atribut
src.
Jenis atribut yang dibutuhkan menetapkan tipe MIME dari script.
Umum digunakan untuk JavaScript adalah manipulasi gambar, validasi form, dan perubahan dinamis dari
konten.
HTML noscript Elemen
Tag <noscript> digunakan untuk menyediakan konten alternatif untuk pengguna yang telah menonaktifkan
script pada browser mereka atau memiliki browser yang tidak mendukung client-side scripting.
Unsur noscript dapat berisi semua elemen yang dapat Anda temukan di dalam elemen body dari halaman
HTML biasa.
Isi di dalam elemen noscript hanya akan ditampilkan jika script tidak didukung, atau dinonaktifkan dalam
browser pengguna:
97 / 119
Created with the Personal Edition of HelpNDoc: Easily create iPhone documentation
98 / 119
HTML Media
Multimedia di web adalah suara, musik, video, dan animasi. Web browser modern mendukung banyak
format multimedia.
Apa itu Multimedia?

Multimedia datang dalam berbagai format. Hal ini dapat hampir apapun yang Anda dapat mendengar atau
melihat seperti teks, gambar, musik, suara, video, catatan, film, animasi, dan banyak lagi.
Di Internet Anda dapat sering menemukan elemen multimedia tertanam di halaman web, dan web browser
modern mendukung beberapa format multimedia.
Dalam tutorial ini Anda akan belajar tentang format multimedia yang berbeda dan bagaimana
menggunakannya dalam halaman web Anda.
Browser Dukungan
Browser Internet pertama mendapat dukungan untuk teks saja, dan bahkan dukungan teks terbatas pada
font tunggal dalam satu warna. Kemudian datang browser dengan dukungan untuk warna, font dan gaya
teks, dan dukungan untuk gambar ditambahkan.
Dukungan untuk suara, animasi dan video ditangani dengan cara yang berbeda oleh browser yang berbeda.
Beberapa elemen dapat ditangani inline, dan beberapa membutuhkan program pembantu tambahan (plug-in)
.
Anda akan belajar lebih lanjut tentang plug-in dalam bab-bab berikutnya.
Multimedia Format
Elemen multimedia (seperti suara atau video) disimpan dalam file media.
Cara yang paling umum untuk menemukan jenis media adalah dengan melihat ekstensi file. Ketika browser
melihat ekstensi file. Htm atau. Html, maka akan diasumsikan bahwa file tersebut adalah halaman HTML.
Perpanjangan. Xml menunjukkan file XML, dan ekstensi. Css menunjukkan style sheet. Format gambar
diakui oleh ekstensi seperti gif dan.. Jpg.
Elemen multimedia juga memiliki format sendiri file dengan ekstensi yang berbeda seperti. Swf, wmv,. Mp3,.
Dan. Mp4.
Video Format
Format MP4 adalah format baru dan mendatang untuk video internet. Hal ini didukung oleh YouTube, Flash
player dan HTML5.
Format Ber Deskripsi
99 / 119
kas
Avi .avi AVI (Audio Video Interleave) format dikembangkan oleh Microsoft. Format AVI
didukung oleh semua komputer yang menjalankan Windows, dan oleh semua
browser web yang paling populer. Ini adalah format yang sangat umum di Internet,
namun tidak selalu memungkinkan untuk bermain di komputer non-Windows.
WMV .wm Windows Media Format dikembangkan oleh Microsoft. Windows Media adalah
v format umum pada Internet, tetapi Windows Media film tidak dapat dimainkan
pada komputer non-Windows tanpa komponen (gratis) tambahan diinstal.
Beberapa Windows Media film kemudian tidak bisa bermain sama sekali pada
komputer non-Windows karena tidak ada pemain yang tersedia
MPEG .Mp MPEG (Moving Pictures Expert Group) Format adalah format yang paling populer
g di Internet. Ini adalah cross-platform, dan didukung oleh semua browser web yang
.mp paling populer.
eg
QuickTime .mo Format QuickTime yang dikembangkan oleh Apple. QuickTime adalah format
v umum pada Internet, tetapi QuickTime film tidak dapat dimainkan pada komputer
Windows tanpa komponen (gratis) tambahan diinstal.
RealVideo Rm. Format RealVideo dikembangkan untuk Internet oleh Real Media. Format ini
. memungkinkan streaming video (video on-line, Internet TV) dengan bandwidth
ram rendah. Karena prioritas bandwidth yang rendah, kualitasnya juga dikurangi.
Flash Swf. The Flash (Shockwave) format dikembangkan oleh Macromedia. Format
. flv Shockwave memerlukan suatu komponen ekstra untuk bermain. Tapi komponen
ini datang terinstal dengan web browser seperti Firefox dan Internet Explorer.
MPEG-4 . MPEG-4 (dengan kompresi video H.264) adalah format baru untuk internet.
Mp4 Bahkan, YouTube merekomendasikan menggunakan MP4. YouTube menerima
berbagai format, dan kemudian mengubah mereka semua ke flv atau. Mp4 untuk
distribusi.. Penerbit video lebih dan lebih online bergerak ke MP4 sebagai format
internet sharing untuk kedua pemain Flash dan HTML5.
Format Suara
Format Berkas Deskripsi
MIDI .mid .midi MIDI (Musical Instrument Digital

Interface) adalah format untuk
perangkat musik elektronik
seperti synthesizer dan kartu
suara PC. File MIDI tidak berisi
suara, tetapi intruksi musik
digital (catatan) yang dapat
dimainkan oleh elektronik (seperti
kartu suara PC Anda).
Klik disini untuk bermain The

Beatles .
Sejak format MIDI hanya berisi
instruksi (catatan), file MIDI
sangat kecil. Contoh di atas
hanya 23K dalam ukuran tetapi
bermain untuk hampir 5 menit.
MIDI didukung oleh banyak
sistem perangkat lunak atas
100 / 119
berbagai macam platform. MIDI
didukung oleh semua browser
internet terkenal.
RealAudio .rm .ram Format RealAudio dikembangkan

untuk Internet oleh Real Media.
Format ini juga mendukung video.
Format ini memungkinkan
streaming audio (music online,
internet) dengan bandwidth
rendah. Karena prioritas
bandwidth yang rendah,
kualitasnya juga dikurangi.
wave .wav The Wave (gelombang) format

dikembangkan oleh IBM dan
Microsoft. Hal ini didukung oleh
semua komputer yang
menjalankan Windows, dan oleh
semua browser web yang paling
populer (kecuali Google Chrome).
WMA .wma Format WMA (Windows Media

Audio), membandingkan dengan
kualitas MP3, dan kompatibel
dengan sebagian besar pemain,
kecuali iPod. File WMA dapat
disampaikan sebagai aliran data
yang berkelanjutan, yang
membuatnya praktis untuk
digunakan dalam radio internet
atau on-line musik.
MP3 .Mp3 .mpga File MP3 sebenarnya merupakan

bagian suara dari file MPEG.
Format MPEG pada awalnya
dikembangkan untuk video oleh
Kelompok Ahli Gambar Bergerak.
MP3 adalah salah satu format
suara yang paling populer untuk
musik. Sistem pengkodean
mengcompress (mengecilkan
ukuran) file dengan kualitas
tinggi. Mengharapkan sistem
perangkat lunak masa depan
untuk mendukungnya.
Apa Format Untuk Gunakan?

WAVE adalah yang paling populer terkompresi format suara di Internet, dan didukung oleh semua browser
populer. Jika Anda ingin suara terkompresi (musik atau pidato) akan tersedia untuk semua pengunjung,
Anda harus menggunakan format WAVE.
Format MP3 adalah format terbaru untuk kompresi rekaman musik. MP3 jangka telah menjadi identik
dengan musik digital. Jika situs Web Anda tentang rekaman musik, format MP3 adalah pilihan.
101 / 119
Created with the Personal Edition of HelpNDoc: Full-featured Kindle eBooks generator
3.1 HTML Audio

Suara dapat dimainkan dalam HTML dengan metode yang berbeda.
Masalah dan Solusi

Menampilkan audio dalam HTML adalah tidak mudah!
Anda harus menambahkan banyak trik untuk memastikan file audio Anda akan bermain di semua browser
(Internet Explorer, Chrome, Firefox, Safari, Opera) dan pada semua perangkat keras (PC, Mac, iPad,
iPhone).
Dalam W3Schools merangkum bab masalah dan solusi.
Cara termudah untuk Tambah Audio untuk Situs Anda

Cara termudah untuk menambahkan audio ke halaman web Anda?
Yahoo Media Player (dijelaskan di bagian bawah halaman ini) jelas merupakan favorit.
Hal ini memainkan mp3 dan berbagai format lainnya. Anda dapat menambahkannya ke halaman Anda (atau
blog) dengan satu baris kode, dan dengan mudah mengubah halaman HTML Anda ke dalam daftar putar
profesional.
audio1.html
<html>
<body>
<p><a href="song.mp3">Play Song</a></p>

<p><a href="liar.wav">Play Text</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>
Hasil :
102 / 119
Menggunakan Plugin
Plugin adalah program komputer kecil yang memperluas fungsionalitas standar web browser. Plugin dapat
digunakan untuk berbagai tujuan. Mereka dapat digunakan untuk menampilkan musik, peta layar, pastikan
id bank Anda, mengontrol masukan Anda, dan banyak lagi.
Plugin dapat ditambahkan ke halaman HTML menggunakan tag <object> atau <embed>.
Bermain Audio dalam HTML
audio1.html
<audio controls="controls" height="50px" width="100px">

<source src="duke.mp3" type="audio/mpeg" />
<source src="duke.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="duke.mp3" />
</audio>
Hasil :
103 / 119
Menggunakan Elemen <embed>
Tujuan dari tag <embed> adalah untuk menanamkan elemen multimedia dalam halaman HTML.
Fragmen kode berikut menampilkan file MP3 tertanam dalam halaman web.
<embed height="50px" width="100px" src="song.mp3" />
Masalah:
· Tag <embed> tidak diketahui ke HTML 4. Halaman Anda tidak akan memvalidasi dengan benar.
· Jika browser Anda tidak mendukung format file, audio Anda tidak akan bermain.
· Jika Anda mengkonversi file Anda ke format lain, itu akan tetap tidak bermain di semua browse
Menggunakan Elemen <object>

Tujuan dari tag <object> adalah untuk menanamkan elemen multimedia dalam halaman HTML.
Fragmen kode berikut menampilkan file MP3 tertanam dalam halaman web.
<object height="50px" width="100px" data="song.mp3" />
Masalah:
· Jika browser Anda tidak mendukung format file, audio Anda tidak akan bermain.
· Jika Anda mengkonversi file Anda ke format lain, itu akan tetap tidak bermain di semua browser.
Menggunakan Elemen <audio>

Unsur <audio> adalah elemen HTML 5, tidak diketahui HTML 4, tetapi bekerja di browser baru.
audio3.html
104 / 119
<audio controls="controls">
<source src="duke.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio
</audio>
Hasil :
Contoh di atas menggunakan file Ogg, untuk membuatnya bekerja di Firefox, Opera dan Chrome. Untuk
membuat karya audio di Internet Explorer dan Safari, file MP3 dari jenis ditambahkan.
Saat ini, ada 3 format utama untuk elemen audio: Ogg Vorbis, MP3, dan Wav.
Masalah:
· Anda harus mengkonversi file audio Anda ke format yang berbeda.

· Unsur <audio> tidak bekerja di browser lama.
· Unsur <audio> tidak memvalidasi dalam HTML 4 dan XHTML.
<audio controls="controls" height="50px" width="100px">

<source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="song.mp3" />
</audio>
Contoh di atas menggunakan 4 format audio yang berbeda. Elemen HTML 5 <audio> mencoba untuk
memutar video baik sebagai ogg atau mp3. Jika gagal, kode "jatuh kembali" untuk mencoba elemen
<embed>. Jika ini juga gagal, ini akan menampilkan kesalahan.
Masalah:
· Anda harus mengkonversi video ke format yang berbeda.

· Unsur <audio> tidak memvalidasi dalam HTML 4 dan XHTML.
· Unsur <embed> tidak memvalidasi dalam HTML 4 dan XHTML.
CATATAN: Menggunakan <DOCTYPE html> memecahkan masalah validasi.
105 / 119
Menggunakan Yahoo Media Player
Menggunakan Yahoo Media Player adalah pendekatan yang berbeda. Anda hanya membiarkan Yahoo
melakukan pekerjaan memainkan lagu-lagu Anda.
<a href="song.mp3">Play Song</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Menggunakan pemutar Yahoo adalah gratis. Untuk menggunakannya Anda memasukkan sepotong
JavaScript di bagian bawah halaman web Anda: Internet Lahan src="http://mediaplayer.yahoo.com/js"> </
script>
Lalu Anda cukup link ke file MP3 Anda dalam HTML, dan kode JavaScript secara otomatis membuat tombol
putar untuk setiap lagu: href="song1.mp3"> <a Putar Lagu 1 </ a> <a href = "song2.mp3 "> Putar Lagu 2 </
a> ... ... ...
Yahoo Media Player menyajikan pembaca Anda dengan tombol putar kecil bukan pemain penuh. Namun,
ketika Anda mengklik tombol, pemain penuh muncul. Catatan bahwa pemain selalu merapat dan siap di
bagian bawah jendela. Cukup klik di atasnya untuk geser keluar.
Menggunakan Google
audio4.html
<a href="song.mp3">Play Song</a>
<embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/

ui/3523697345-audio-player.swf?audioUrl=song.mp3" height="27" width="320"></embed>
Hasil :
Menggunakan Hyperlink
106 / 119
Jika halaman web mencakup hyperlink ke file media, kebanyakan browser akan menggunakan "aplikasi
pembantu" untuk memutar file tersebut.
Fragmen kode berikut menampilkan link ke file MP3. Jika pengguna mengklik pada link, browser akan
meluncurkan aplikasi pembantu untuk memutar file tersebut:
<a href="song.mp3">Play the song</a>
Inline Suara
Bila suara disertakan dalam suatu halaman web, atau sebagai bagian dari suatu halaman web, hal itu
disebut suara inline.
Jika Anda berencana untuk menggunakan suara inline dalam aplikasi web Anda, harus menyadari bahwa
banyak orang menemukan suara inline menjengkelkan. Perlu diketahui juga bahwa beberapa pengguna
mungkin telah mematikan pilihan suara inline di browser mereka.
Saran kami terbaik adalah untuk memasukkan suara inline hanya di halaman web di mana pengguna
mengharapkan untuk mendengar suara. Contoh dari ini adalah halaman yang akan terbuka setelah
pengguna mengklik link untuk mendengar rekaman.
source
3.2 HTML Object

Tujuan dari elemen <object> adalah untuk mendukung pembantu HTML (Plug-Ins)
HTML Pembantu (Plug-Ins)
Sebuah aplikasi pembantu adalah sebuah program yang dapat diluncurkan dengan browser untuk
"membantu". Aplikasi pembantu juga disebut Plug-Ins. aplikasi Helper dapat digunakan untuk memutar
audio dan video (dan banyak lagi). Aplikasi pembantu yang diluncurkan menggunakan tag <object>. Satu
keuntungan dari menggunakan aplikasi pembantu untuk memutar video dan audio, adalah bahwa Anda
dapat membiarkan beberapa (atau semua) pengaturan pemain dikendalikan oleh pengguna. aplikasi
pembantu Kebanyakan memungkinkan manual ( atau terprogram) kendali atas pengaturan volume dan
memainkan fungsi seperti mundur, berhenti, berhenti dan bermain.
Cara Terbaik Bermain Video di HTML?

Untuk cara umum terbaik untuk memasukkan video dalam HTML, lihat bab berikutnya.
Bermain Wave Audio Menggunakan QuickTime
plugin.html
<object width="420" height="360"

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
107 / 119
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav" />
<param name="controller" value="true" />
</object>
Bermain Video MP4 Menggunakan QuickTime

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>
Bermain Video SWF Menggunakan Flash

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
Hasil :
108 / 119
Bermain Film WMV Menggunakan Windows Media Player
Contoh di bawah ini menunjukkan kode yang disarankan digunakan untuk menampilkan file Windows
Media.
<object width="100%" height="100%"

type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true"
showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
Plug-Ins
Plug-Ins dapat digunakan dalam HTML untuk berbagai tujuan. Mereka dapat digunakan untuk menampilkan
peta, pastikan id bank Anda, mengontrol masukan Anda, dan banyak lagi. Pembatasan sedikit.
Masalah:

· Unsur <video> tidak bekerja di browser lama.
· Unsur <video> tidak memvalidasi dalam HTML 4 dan XHTML.
Solusi HTML Terbaik
<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
Your browser does not support video
</embed>
</object>
</video>
Contoh di atas menggunakan 4 format video yang berbeda. Elemen HTML 5 <video> mencoba untuk
memutar video baik dalam mp4, ogg, atau format WebM. Jika gagal, kode "jatuh kembali" untuk mencoba
elemen <object>. Jika ini juga gagal, ia "jatuh kembali" ke elemen <embed>.
Masalah:

· Unsur <video> tidak memvalidasi dalam HTML 4 dan XHTML.
· Unsur <embed> tidak memvalidasi dalam HTML 4 dan XHTML.
109 / 119
CATATAN: Menggunakan <DOCTYPE html> memecahkan masalah validasi.
YouTube Solusi
Cara termudah untuk menampilkan video dalam HTML adalah dengan menggunakan YouTube (lihat bab
berikutnya).
Menggunakan Hyperlink
Jika halaman web mencakup hyperlink ke file media, kebanyakan browser akan menggunakan "aplikasi
pembantu" untuk memutar file tersebut.
Fragmen kode berikut menampilkan link ke sebuah video Flash. Jika pengguna mengklik pada link, browser
akan meluncurkan aplikasi pembantu, seperti Windows Media Player untuk memutar file AVI:
<a href="intro.swf">Play a video file</a>
Sebuah Catatan Tentang Inline Video
Ketika video disertakan dalam suatu halaman web itu disebut video inline.
Jika Anda berencana untuk menggunakan video inline dalam aplikasi web Anda, harus menyadari bahwa
banyak orang menemukan video inline menjengkelkan. Perlu diketahui juga bahwa beberapa pengguna
mungkin telah mematikan pilihan video inline di browser mereka.
Saran kami terbaik adalah untuk memasukkan video inline hanya di halaman web di mana pengguna
mengharapkan untuk melihat video. Contoh dari ini adalah halaman yang akan terbuka setelah pengguna
mengklik link untuk melihat video.
Created with the Personal Edition of HelpNDoc: Free HTML Help documentation generator
3.3 HTML Video

Video dapat dimainkan dalam HTML dengan metode yang berbeda.
Bermain Video di HTML
<!DOCTYPE HTML>
<html>
<body>

<object width="320" height="240" src="movie.mp4">
<embed width="320" height="240" src="movie.swf">
Your browser does not support video
</embed>
</object>
</video>
</body>
110 / 119
</html>
Masalah, Masalah, dan Solusi
Menampilkan video dalam HTML adalah tidak mudah!
Anda harus menambahkan banyak trik untuk memastikan video Anda akan bermain di semua browser
(Internet Explorer, Chrome, Firefox, Safari, Opera) dan pada semua perangkat keras (PC, Mac, iPad,
iPhone).
Dalam W3Schools bab merangkum masalah dan solusi.
Tag <embed>
Tujuan dari tag <embed> adalah untuk menanamkan elemen multimedia dalam halaman HTML.
Fragmen HTML berikut menampilkan video Flash tertanam di halaman web:
<embed src="intro.swf" height="200" width="200"/>
Masalah
· Tag <embed> tidak diketahui ke HTML 4. Halaman Anda tidak akan memvalidasi dengan benar.
· Jika browser tidak mendukung Flash, video Anda tidak akan bermain.
· iPad dan iPhone tidak dapat menampilkan video Flash.
· Jika Anda mengkonversi video ke format lain, itu akan tetap tidak bermain di semua browser.
Menggunakan Tag <object>

Tujuan dari tag <object> adalah untuk menanamkan elemen multimedia dalam halaman HTML.
Fragmen HTML berikut menampilkan video Flash tertanam di halaman web:
<object data="intro.swf" height="200" width="200"/>
Masalah:
· Jika browser tidak mendukung Flash, video Anda tidak akan bermain.
· iPad dan iPhone tidak dapat menampilkan video Flash.
· Jika Anda mengkonversi video ke format lain, itu akan tetap tidak bermain di semua browser.
Menggunakan Tag <video>

Unsur <video> baru dalam HTML 5.
Tujuan dari tag <video> adalah untuk menanamkan video elemen dalam halaman HTML.
Fragmen HTML berikut menampilkan video dalam ogg, mp4, atau format WebM tertanam di halaman web:
111 / 119
Your browser does not support the video tag.
</video>
source
3.4 HTML Youtube

The easiest way to display videos (others or your own) in HTML is to use YouTube.
Playing a YouTube Video in HTML

If you want to display a video in a web page, you can upload the video to YouTube and insert HTML code to
display the video in your web page.
<iframe width="420" height="345"

src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
112 / 119
HTML XHTML
XHTML merupakan versi yang lebih ketat dan bersih dari HTML.
Apakah XHTML?
· XHTML singkatan dari Extensible HyperText Markup Language
· XHTML hampir identik dengan HTML 4.01
· XHTML merupakan versi yang lebih ketat dan bersih dari HTML
· XHTML HTML didefinisikan sebagai aplikasi XML
· XHTML adalah Rekomendasi W3C dari Januari 2000 .
· XHTML didukung oleh semua browser utama.
Mengapa XHTML?
Banyak halaman di internet berisi "buruk" HTML.
Kode HTML berikut akan bekerja dengan baik jika Anda melihatnya dalam browser (bahkan jika itu TIDAK
mengikuti aturan HTML):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
XHTML adalah HTML 4.01 didesain ulang sebagai XML.
XML adalah bahasa markup dokumen mana harus ditandai dengan benar dan "well-formed".
Jika Anda ingin belajar XML, Baca tutorial XML kami .
Pasar saat ini terdiri dari teknologi browser yang berbeda. Beberapa browser berjalan pada komputer, dan
beberapa browser berjalan di ponsel atau perangkat kecil lainnya. Perangkat yang lebih kecil sering tidak
memiliki sumber daya atau kekuatan untuk menafsirkan "buruk" bahasa markup.
Oleh karena itu - dengan menggabungkan kekuatan dari HTML dan XML, XHTML dikembangkan.
Yang Paling Penting Perbedaan dari HTML:
· Elemen XHTML harus benar bersarang

· Elemen XHTML harus selalu ditutup
· Elemen XHTML harus dalam huruf kecil
· Dokumen XHTML harus memiliki satu elemen root
Elemen XHTML Harus Benar Bersarang

Dalam HTML, beberapa elemen dapat tidak benar bersarang dalam satu sama lain, seperti ini:
<b><i>This text is bold and italic</b></i>
113 / 119
Dalam XHTML, semua elemen harus benar bersarang dalam satu sama lain, seperti ini:
<b><i>This text is bold and italic</i></b>
Catatan: Kesalahan umum dengan daftar bersarang, adalah melupakan bahwa daftar dalam harus berada
dalam <li> dan </ li> tag.
Ini adalah salah:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
Ini benar:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Perhatikan bahwa kita telah memasukkan tag </ li> setelah tag </ ul> dalam contoh "benar" kode.
Elemen XHTML Selalu Harus Ditutup

Tidak kosong elemen harus memiliki tag penutup.
Ini adalah salah:
<p>This is another paragraph
Ini benar:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Elemen kosong Juga Harus Ditutup
114 / 119
Ini adalah salah:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
Ini benar:
A break: <br />

A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
Elemen XHTML Harus Dalam Kasus Bawah
Tag nama dan atribut harus dalam huruf kecil.
Ini adalah salah:
<BODY>
<P>This is a paragraph</P>
</BODY>
Ini benar:
<body>
<p>This is a paragraph</p>
</body>
Dokumen XHTML Harus Memiliki Satu Elemen Akar

Semua elemen XHTML harus bersarang di dalam elemen root <html>. Elemen anak harus berpasangan dan
benar bersarang dalam elemen induknya.
Struktur dokumen dasar adalah:
<html>
<head> ... </head>
<body> ... </body>
</html>
Created with the Personal Edition of HelpNDoc: Create iPhone web-based documentation
4.1 XHTML SYNTAX

Lebih XHTML Sintaks Aturan
· Nama atribut harus dalam huruf kecil
· Nilai Atribut harus dikutip
· Minimisasi atribut dilarang
115 / 119
· DTD XHTML mendefinisikan wajib elemen
Nama Atribut Harus Dalam Kasus Bawah

Ini adalah salah:
<table WIDTH="100%">
Ini benar:
<table width="100%">
Nilai Atribut Harus Dikutip

Ini adalah salah:
<table width=100%>
Ini benar:
<table width="100%">
Meminimalkan Atribut Apakah Terlarang

Ini adalah salah:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
Ini benar:
<input checked="checked" />

<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
Para Lang Atribut
Atribut lang berlaku untuk hampir setiap elemen XHTML. Ini menentukan bahasa dari konten dalam sebuah
elemen.
Jika anda menggunakan atribut lang dalam sebuah elemen, Anda juga harus menambahkan xml: lang
atribut, seperti ini:
<div lang="it" xml:lang="it">Ciao bella!</div>
Wajib XHTML Elemen

Sebuah dokumen XHTML harus memiliki deklarasi DOCTYPE.
116 / 119
Html, kepala, judul, dan elemen tubuh juga harus hadir.
Created with the Personal Edition of HelpNDoc: Full-featured Help generator
4.2 XHTML Doctype

<DOCTYPE> Apakah Wajib
Sebuah dokumen XHTML terdiri dari tiga bagian utama:
· deklarasi DOCTYPE
· bagian <head>
· bagian <body>
Struktur dokumen dasar adalah:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
Catatan: Para <DOCTYPE> deklarasi mengacu pada Document Type Definition (DTD). Sebuah DTD
menetapkan aturan untuk bahasa markup, sehingga browser membuat konten dengan benar.
Sebuah XHTML Contoh
Contoh di bawah menunjukkan sebuah dokumen XHTML dengan minimal tag yang diperlukan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
</body>
</html>
Catatan: Atribut xmlns di <html>, menentukan namespace xml untuk dokumen, dan diperlukan dalam
dokumen XHTML.
117 / 119
XHTML berbeda Doctypes
Para <DOCTYPE> deklarasi adalah hal pertama dalam sebuah dokumen XHTML, sebelum tag <html>.
Deklarasi bukanlah tag XHTML <DOCTYPE>, melainkan instruksi untuk web browser tentang apa versi
bahasa markup halaman yang ditulis masuk
Para <DOCTYPE> deklarasi mengacu pada Document Type Definition (DTD). DTD menetapkan aturan
untuk bahasa markup, sehingga browser membuat konten dengan benar.
XHTML Strict 1.0
DTD ini berisi semua elemen HTML dan atribut, tetapi TIDAK TERMASUK elemen presentasi atau (seperti
font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
XHTML 1.0 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasi dan (seperti font).
Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
XHTML 1.0 Frameset
DTD ini sama dengan XHTML 1.0 Transitional, namun memungkinkan penggunaan konten frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-frameset.dtd">
XHTML 1.1
DTD ini sama dengan XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul (misalnya
untuk memberikan dukungan ruby untuk bahasa Asia Timur).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/
xhtml11.dtd">
XHTML HowTo
Langkah-langkah berikut menunjukkan bagaimana sebuah website dapat dikonversi dari HTML ke XHTML
dalam 6 langkah sederhana:
1. Tambahkan <DOCTYPE>
Tambahkan XHTML <DOCTYPE> ke baris pertama dari setiap halaman:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tip: halaman Anda harus memiliki deklarasi DOCTYPE jika Anda ingin mereka untuk memvalidasi sebagai
XHTML.
2. Tambahkan Atribut xmlns
Tambahkan atribut xmlns ke elemen html dari setiap halaman:

<html xmlns="http://www.w3.org/1999/xhtml">
Catatan: Atribut xmlns menentukan namespace xml untuk dokumen, dan diperlukan dalam dokumen
XHTML.
3. Ubah Tags Dan Nama Atribut untuk Huruf Kecil
Sebuah umum "menemukan-dan-menggantikan" fungsi dieksekusi untuk mengganti semua tag dengan tag
huruf besar huruf kecil. Hal yang sama dilakukan untuk nama atribut.
4. Kutip Semua Nilai Atribut
118 / 119
Periksa setiap halaman untuk melihat bahwa nilai atribut yang dikutip.
5. Tutup semua Tags Kosong
Tag kosong tidak diperbolehkan dalam XHTML. Tag <hr> dan <br> harus diganti dengan <hr /> dan <br />.
Sebuah umum "menemukan-dan-menggantikan" fungsi dieksekusi untuk swap tag.
Tutup tag <img> dengan /> akhir tag.
Created with the Personal Edition of HelpNDoc: Create iPhone web-based documentation
119 / 119

Belajar Kilat Dasar Pemograman HTML

Diunggah oleh

Informasi Dokumen

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

Belajar Kilat Dasar Pemograman HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemograman HTML

Belajar Kilat Dasar Pmograman HTML ..................................................................................... 3

BELAJAR KILAT MEMBUAT WEB DENGAN HTML ( disertai contoh-contoh

Nama Lengkap : Harry Ridwan Ramadan

Apa Itu HTML?

HTML adalah bahasa untuk mendeskripsikan halaman web.

· HTML singkatan dari hyper text markup language

· HTML bukanlah sebuah bahasa pemrograman, itu adalah bahasa markup

· Sebuah bahasa markup adalah serangkaian tag markup

· HTML menggunakan tag markup untuk menjelaskan halaman web

tag markup HTML biasanya disebut tag HTML

Dokumen HTML = Halaman Web

· dokumen HTML mendeskripsikan halaman web

· dokumen HTML berisi tag HTML dan plain teks

· dokumen HTML juga disebut halaman web

· Teks antara <p> dan </ p> ditampilkan sebagai paragraf

· Text editor seperti notepade, php designer

Gunakan Web Test Anda Untuk Belajar

HTM Atau. Extension. HTML File?

1.3 Dasar-Dasar Html

Head HTML didefinisikan dengan tag <h1> untuk <h6>.

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

paragraf HTML didefinisikan dengan tag <p>.

link HTML didefinisikan dengan tag <a>.

ini adalah sebuah link</a>

gambar HTML didefinisikan dengan tag <img>.

<img src="cover.jpg" width="104" height="142" />

1.4 Elemen Html

Start tag * Element content End tag *

* Tag awal adalah sering disebut tag pembuka.

Elemen HTML Sintaks

· Sebuah elemen HTML dimulai dengan tag awal / pembuka tag

· Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup

· Isi elemen adalah segalanya antara awal dan tag akhir

· Beberapa elemen HTML memiliki konten kosong

· Sebagian besar elemen HTML dapat memiliki atribut

Elemen HTML bersarang

Contoh Dokumen HTML

Contoh di atas memiliki 3 elemen HTML.

<p>Ini adalah paragrap saya.</p>

Jangan Lupakan Tag Akhir

Elemen HTML Kosong

HTML Tip: Gunakan Tag Huruf Kecil

1.5 Atribut HTML

· Elemen HTML dapat memiliki atribut

· Atribut memberikan informasi tambahan tentang suatu elemen

· Atribut selalu ditentukan pada tag mulai

· Atribut datang dengan nama / nilai berpasangan seperti: nama = "nilai"

Ini Adalah Sebuah Link</a>

Atribut Selalu Memakai Tanda Kutip

Tips HTML: Gunakan Huruf Kecil Untuk Atribut

Referensi Atribut HTML

Referensi HTML Lengkap

Attribute Value Description

1.6 Html Headings

<h1>ini adalah heading 1</h1>

<h2>ini adalah heading 2</h2>

<h3>ini adalah heading 3</h3>

<h4>ini adalah heading 4</h4>

<h5>ini adalah heading 5</h5>