Tutorial HTML

Bab 1


Internet dan WWW
Isi
• Pengantar
• Apa itu Internet?
• Apa itu WWW?
• Sejarah dari WWW
• URL
• ISP dan Jenis Koneksi
• Email

Pengantar
Selamat datang di Internet dan WWW
Subyek ini bertujuan untuk memperkenalkan kepada siswa latar belakang umum
dan sejarah singkat dari Internet dan World Wide Web, beberapa teknologi
asosiasi Internet, dan membuat dan menerbitkan halaman web, menggunakan:
• HyperText Markup Language (HTML)
• Cascading Style Sheets (CSS)
• eXtensible Markup Language (XML)
• eXtensible Styesheet Language (XSL)

Apa Itu Internet?
Internet dapat didefinisikan sebagai kelompok yang sangat besar dari jaringan
komputer yang saling berhubungan, semua dapat berkomunikasi satu sama lain
menggunakan protokol yang umum. Pada tahun 1973, Defense Advanced
Research Projects Agency (DARPA) Amerika Serikat menciptakan ARPANET,
jaringan komputer pertama. Sebelumnya, komputer tidak dapat saling memahami,
kekurangan cara standar untuk mengirim informasi. Komputer yang terhubung ke
ARPANET “berbicara” satu sama lain menggunakan TCP/IP Protocol Suite.

Jadi apa protokol? Protokol didefinisikan sebagai serangkaian aturan komunikasi
dimana komputer setuju untuk mengirimkan informasi mereka satu sama lain.
DARPA mengembangkan protokol untuk memungkinkan komputer
berkomunikasi dalam cara yang standar. Dasar protokol tingkat rendah yang
digunakan untuk mencapai komunikasi ini adalah:
• Transmission Control Protokol (TCP)

• Internet Protocol (IP)

Bersama-sama mereka membentuk TCP/IP Protocol Suite.
Protokol tingkat rendah adalah bagaimana komputer saling mengerti satu sama
lain, tetapi orang menemukan seperti protokol sulit dimengerti. Komputer
menggunakan protokol tingkat tinggi untuk berkomunikasi jika diperlukan bagi
orang untuk memahami apa yang sedang terjadi. Protokol tingkat tinggi termasuk
HyperText Transfer Protocol (HTTP), File Transfer Protocol (FTP), dan Simple
Mail Transfer Protocol (SMTP).

Setelah ARPANET, sejumlah tambahan jaringan TCP/IP dibentuk oleh lembaga
Amerika Serikat lainnya, termasuk:
• National Aeronautics and Space Administration (NASA)
• National Science Foundation (NSF)
• Department of Energy

Jaringan Eropa, seperti NORDUNET (The Nordic University Network) dan
HEPNET (diciptakan oleh CERN), juga diciptakan sekitar waktu yang sama.
Selama tahun 1980-an dan 1990-an, komputer menjadi cukup murah untuk
digunakan di rumah. Booming komputer rumah menjadi tempat akses ke Internet.

Akses yang tersedia melalui Internet Service Provider (ISP), perusahaanperusahaan
komersial menyediakan akses Internet kepada siapa pun dengan
sebuah komputer, saluran telepon dan modem. Modem adalah perangkat yang
mampu menerjemahkan informasi komputer ke bentuk yang dapat disalurkan
melalui saluran telepon.

Apa itu World Wide Web?
World Wide Web (WWW) biasanya didefinisikan sebagai kumpulan besar dari
dokumen yang saling berhubungan dan multimedia yang berada di komputer
yang terhubung ke Internet di seluruh dunia. Perhatikan perbedaan antara dua
istilah: Internet dapat dianggap sebagai pipa dan pompa dari sistem pipa,
sedangkan World Wide Web adalah air dibawa oleh sistem pipa.

Dokumen-dokumen dan media yang terdiri dari WWW cenderung diformat
sebagai halaman web. Halaman Web saling berhubungan melalui hyperlink pada
halaman, bagian teks aktif atau gambar yang dapat diklik untuk membawa user ke
halaman web lain. Teks aktif atau “panas” semacam ini disebut sebagai hypertext.

Jadi, halaman web juga dikenal sebagai dokumen hypertext. Ada miliaran halaman
web di WWW saat ini: Google, salah satu mesin pencarian web teratas, telah
mengindeks lebih dari 8 miliar halaman, dan ini hanya sebagian kecil dari jumlah
total.
HyperText Markup Language (HTML) adalah bahasa yang digunakan untuk
kode dokumen hypertext atau halaman web. Hal ini digunakan untuk memformat
isi halaman web dengan cara yang pembacaan halaman web, atau browser, dapat
mengerti. Browser adalah aplikasi perangkat lunak (program komputer) yang
dirancang untuk menampilkan halaman web.

Sejarah World Wide Web
Pada tahun 1989, Tim Berners-Lee mengusulkan World Wide Web terdiri dari
dokumen hypertext. Berners-Lee adalah pengembang utama HTML dan protokol
yang digunakan untuk komunikasi dokumen-dokumen antar komputer –
HyperText Transfer Protocol (HTTP).

Pada tahun 1993, US National Center for Supercomputer Applications (NCSA)
merilis browser Mosaic, browser grafis paling awal untuk Web.
http://www.ncsa.uiuc.edu/Divisions/Communications/MosaicHistory/history.html
Pada tahun 1994, Marc Andreessen, pengembang utama Mosaic, meninggalkan
NCSA untuk membentuk sebuah perusahaan bernama Netscape. Browser mereka,
Netscape Navigator (NN), mendominasi browser untuk beberapa tahun.
Pada tahun 1995, Microsoft merilis browser Internet Explorer (IE).

Browser Statistics
Tahun/Browser NN IE Firefox Opera Mozilla*
1996 (Des) 78.3% 15.3% 6.4% (semua browser lain)
2004 (Mei) 2.0% 82.4% 15.6% (semua browser lain)
2005 (Jan) 1.4% 69.9% 16.6% 1.9% 3.4%
2006 (Nov) 0.2% 59.9% 29.9% 1.5% 2.5%
* Mozilla Suite termasuk Safari, Konqueror, dan Gecko.
Sumber: W3Schools (http://www.w3schools.com)

HTML pada awalnya digunakan untuk mark up judul, daftar, tebal, miring, titik
paragraf, link dan link anchors dalam dokumen hypertext. Pertengahan tahun
90an, halaman web dinamis dan interaktif dibutuhkan; HTML diperluas untuk
mencakup bentuk, bingkai, media konten, dan sebagainya. Masing-masing
browser mengembangkan feature mark up mereka sendiri; halaman web akan
menampilkan berbeda di browser yang berbeda dan pembangunan menjadi
problematis.

"The World Wide Web Consortium (W3C) mengembangkan teknologi
interoperable (spesifikasi, pedoman, perangkat lunak, dan alat-alat) untuk
memimpin Web secara maksimal. W3C adalah forum untuk informasi,
perdagangan, komunikasi, dan pemahaman kolektif. "

W3C didirikan pada tahun 1994, bagian dari misi adalah untuk mengatur
pelaksanaan dan evolusi dari HTML. Validasi alat-alat online yang tersedia di
W3C menentukan apakah suatu halaman web HTML memenuhi spesifikasi yang
tepat dan akan muncul dengan benar pada browser.

Beberapa fakta menyenangkan tentang penggunaan komputer dan Web:
• Email telah lama ada sebelum World Wide Web
• Lynx salah satu browser awal sejak tahun 1992. Digunakan untuk navigasi
berbasis teks
• Banner iklan pertama muncul pada 1994
• Rata-rata pengguna komputer berkedip 7 kali per menit
Sumber: ButlerWebs.com (http://www.butlerwebs.com)

URL
Hyperlinks terhubung ke halaman web lain dengan menggunakan alamat web.
Alamat tersebut secara teknis dikenal sebagai Uniform Resource Locator
(URL). URL adalah subset dari teknologi formal pengalamatan Web - Uniform
Resource Indicator (URI). Ini adalah string pendek yang mengidentifikasi file di
Web. URL A juga dapat diketik ke dalam Address Bar browser (seperti IE) untuk
mengakses halaman web.

Beberapa format alamat:
• Uniform Resource Identifier (URI): set generik dari semua nama/alamat
dengan string pendek yang mengacu pada sumbernya
• Uniform Resource Locator (URL): istilah informal (tidak lagi digunakan
dalam spesifikasi teknis) terkait dengan skema URI populer: http, ftp,
mailto, dan lain-lain
• Uniform Resource Name (URN):
- URL memiliki komitmen kelembagaan untuk kegigihan, ketersediaan,
dan lain-lain. Catatan bahwa URI mungkin juga URL
- Skema tertentu, ditentukan oleh RFC2141 dan dokumen terkait,
dimaksudkan untuk melayani sebagai persistent, lokasi independen,
pengidentifikasi sumber
• Protocol: Setiap alamat diawali oleh sebuah protokol seperti:
- http:// (HyperText Transfer Protocol)
- ftp:// (File Transfer Protocol)
• Domain name of the server – terdiri dari:
- Domain (kadang opsional dan kadang lebih dari satu)
http://www.stekom.ac.id
protocol domain
jenis organisasi
negara

- Perusahaan atau nama organisasi
- Jenis perusahaan atau organisasi
- Dan setiap Negara, kecuali Amerika Serikat, akhiran negara
• File path:
- Lokasi sebenarnya dari file pada server dalam struktur direktorinya

ISP dan Jenis Koneksi
Internet Service Provider (ISP) adalah perusahaan yang menghubungkan
komputer ke Internet. Selama sepuluh tahun terakhir telah terjadi ledakan ISP
menyediakan akses Internet berbayar dan gratis. Ada ratusan ISP yang
menawarkan banyak rencana yang berbeda, dan semakin semakin sulit untuk
mengetahui yang mana untuk memilih. Kondisi dan biaya tambahan merupakan
isu penting untuk dipertimbangkan.

Hal utama yang harus Anda cari dan pertimbangkan ketika memilih ISP yang baru
adalah:
• Biaya koneksi bulanan atau tahunan, dan biaya telepon per menit jika Anda
menggunakan layanan ISP gratis
• Biaya dukungan (panggilan telepon per menit) jika anda mendapatkan
masalah ketika mencoba untuk membuat account pada ISP
• Pelayanan yang disediakan oleh ISP, seperti kecepatan koneksi dan
keandalan ketika terhubung
• Dukungan dan layanan online seperti account email yang ditawarkan
• Coba penggunaan bulanan untuk memeriksa kualitas layanan ISP.
Jenis koneksi (baik dial-up dan broadband) adalah fisik link ISP dimana informasi
dapat dipindahkan, termasuk:
• Dial-up: pada dasarnya dering komputer rumah Anda ke komputer lain
melalui modem dial-up and berbagi informasi melalui saluran telepon
• Digital Subscriber Line (DSL): istilah generic untuk berbagai skema
transmisi jalur layanan digital; menggunakan beberapa saluran telepon yang
didedikasikan untuk koneksi Internet untuk mengirimkan informasi dengan
kecepatan tinggi melalui DSL Access Multiplexer (DSLAM)
• Asymmetrical Digital Subscriber Lines (ADSL, ADSL2, dan ADSL2+):
varian dari DSL, disebut demikian karena kecepatan “upload” berbeda dari
kecepatan “download”, kecepatan lalu lintas “asimetris”; murah diterapkan
daripada kabel.
• Integrated Services Digital Network (IDSN): varian lain teknologi DSL;
membutuhkan modifikasi saluran telepon.
• Cable: menggunakan jaringan kabel optic di daerah metropolitan dan
pinggiran kota untuk televise kabel; dapat mengirim dan menerima
informasi signifikan lebih cepat, tapi jauh lebih mahal.

Menurut Australian Bureau of Statistics (ABS), pada tahun 2006, 60% rumah
tangga Australia memiliki akses Internet dan 70% memiliki akses ke komputer
rumah. Rumah tangga dengan akses Internet, 51% memiliki koneksi dial-up,
sedangkan 48% memiliki koneksi broadband. Jumlah koneksi broadband hampir
dua kali lipat pada periode 2005-2006. DSL menyumbang 83% dari koneksi
broadband. (Sumber: ABS, http://www.abs.gov.au/)

Email
Internet hanya sebuah saluran (pipa) untuk memberikan informasi; ini termasuk
email. Email sendiri sangat mirip dengan surat kertas tradisional, sehingga
membutuhkan alamat dan subjek. Hal ini memiliki beberapa keuntungan:
• Beberapa tembusan untuk orang berbeda
• Lampiran file

Saat ini, miliaran email dikirim setiap hari, lebih banyak dari surat kertas
tradisional. Email sendiri sangat mudah digunakan dan metode yang sangat
nyaman ditemukan untuk memberikan memo, pengumuman luas atau pesan
pribadi di perusahaan.



Bab 2


HTML
Apa itu HTML?
“HTML merupakan lingua franca untuk publikasi hypertext pada World Wide
Web. Ini adalah format non-eksklusif berdasarkan SGML, dan dapat dibuat dan
diproses oleh berbagai macam alat, dari editor teks biasa yang sederhana – Anda
ketik dari awal – untuk authoring tools canggih WYSIWYG. HTML menggunakan
tag seperti <h1> dan </ h1> untuk struktur teks ke judul, paragraf, daftar, link
hypertext, dll.”

- Definisi teknis diambil dari W3C
HTML singkatan dari HyperText Markup Language. Lingua franca kira-kira
berarti “bahasa umum”. HTML adalah bahasa yang didirikan untuk membuat
halaman web (dengan hyperlink) yang dapat ditampilkan oleh browser. HTML
tidak “dimiliki” oleh setiap perusahaan atau badan tertentu.

Standard Generalized Markup Language (SGML) adalah bahasa standar yang
sangat kompleks, dengan banyak fitur, dari HTML berasal, bersama dengan
sejumlah bahasa mark-up lainnya.

HTML dianggap sebagai bahasa markup ringan; sebagian besar itu berkaitan
dengan tampilan halaman HTML.

Halaman Web HTML ditransfer antar komputer di Internet melalui protokol yang
dikenal sebagai HTTP, yang merupakan singkatan dari HyperText Transfer
Protocol.

Ini adalah protokol standar tingkat tinggi – satu set aturan komunikasi – yang
terhubung ke komputer menggunakan Internet untuk berkomunikasi satu sama
lain dalam rangka untuk mentransfer dokumen hypertext. Hal ini membutuhkan
suatu program HTTP client pada salah satu ujungnya, dan program server HTTP
di ujung lainnya. HTTP adalah protokol paling penting yang digunakan dalam
World Wide Web.

Contoh permintaan HTTP:
GET / HTTP/1.1
Connection: Keep-Alive
User-Agent: Mozilla/5.0 (compatible; Konqueror/2.2-11; Linux)
Accept: text/*, image/jpeg, image/png, image/*, */*
Accept-encoding: x-gzip, gzip, identity
Accept-Charset: Any, utf-8, *
Accept-Language: en, en_US
Host: www.stekom.ac.id



Web client, atau browser, adalah program yang berjalan pada komputer pribadi
dan permintaan halaman web dari server sebagai pengguna meminta untuk
mereka. Ketika halaman sudah diterima, kemudian klien menjadikan itu untuk
ditampilkan.

Web server adalah program yang berjalan pada komputer yang tujuannya adalah
untuk memberikan dokumen ke komputer lain berdasarkan permintaan. Sebuah
web server berjalan terus menerus, menunggu untuk permintaan baru.

Protokol tingkat tinggi lainnya yang digunakan di Internet:
• File Transfer Protocol (FTP): protokol yang digunakan pada Internet
untuk bertukar file.
• Simple Mail Transfer Protocol (SMTP): protokol digunakan untuk
mengirim email pada Internet; SMTP adalah satu set aturan tentang interaksi
antara program mengirim email dan menerima email.
• Network News Transfer Protocol (NNTP): protokol yang digunakan
untuk mengirim, mendistribusikan, dan mengambil pesan USENET
(jaringan berita), juga digunakan untuk komunikasi antar program pembaca
berita dan server newsgroup.

Struktur Dokumen HTML
Kita akan membuat halaman HTML menggunakan Notepad, editor teks biasa
yang digunakan dalam semua versi Windows. Notepad dapat dibuka dengan
tombol Start Windows, pilih Program | Accessories | Notepad.

Setelah Anda telah membuka Notepad, Anda dapat mengetikkan isi dari halaman
HTML Anda, menambahkan format tag untuk konten Anda dan menyimpan
dokumen Anda dengan ekstensi “.html” di komputer Anda. Sekarang Anda
memiliki dokumen HTML. Untuk melihat halaman dalam browser, Anda dapat
menggunakan sebagai berikut:

• Untuk IE pada panel navigasi atas, pilih File> Buka ... > Browse ke file
Anda> OK.
• Drag and drop file dari Windows Explorer ke jendela IE yang terbuka.
• Pada Windows Explorer, klik kanan pada file> Open With > Pilih Program>
(IE mungkin diatur sebagai pilihan untuk file HTML).
Pada umumnya ada struktur yang disetujui untuk pengkodean halaman web;
setiap dokumen HTML harus mengikuti itu. Kecerobohan dalam pengkodean
HTML tidak disebabkan oleh alasan berikut:
• Belajar coding tepat disini akan membantu dengan bahasa komputer lain.
Komputer tidak mengerti apa yang Anda maksud, hanya yang Anda ketik.
• Dalam pemrograman, Anda harus mengikuti aturan bahasa atau program
tidak dapat dijalankan.
• Browser yang telah diprogram untuk mengatasi kecerobohan kode HTML
benar-benar memakan waktu lebih lama untuk menampilkan halaman
HTML yang buruk (misalnya, Internet Explorer).
• Browser yang belum diprogram untuk mengatasi kecerobohan kode HTML
tidak akan menampilkan halaman Anda dengan benar (misalnya, Netscape).
• Hal ini dimungkinkan untuk meng-upgrade halaman Anda ke versi lain atau
bahasa mark-up dan jika halaman Anda tidak benar kodenya itu jauh lebih
sulit untuk dilakukan.
• Hal ini sangat sulit untuk merawat kode buruk halaman HTML.

Contoh Halaman HTML:
Elemen dan Atribut HTML
Elemen HTML, atau tag adalah bagaimana presentasi mark-up dapat
ditambahkan ke halaman HTML. Sebuah elemen dengan data, muncul sebagai
berikut:


<element>data</element>
Sebuah elemen kosong muncul sebagai berikut (perhatikan spasi sebelum garis
miring “/”):

<element />
Browser tahu bagaimana menampilkan presentasi yang terkait dengan unsur-unsur
tersebut. Misalnya, pada contoh sebelumnya, menggunakan elemen <br />.
Browser tahu bahwa ini berarti untuk memasukkan jeda baris ke dalam halaman
HTML pada saat itu.

Elemen HTML yang digunakan sebagai pasangan buka-tutup, jika berisi data,
atau berdiri sendiri sebagai elemen kosong, jika tidak berisi data. Dalam kasus
pasangan buka-tutup, tag menutup atau tag mengakhiri terlihat sama dengan tag
terbuka, tetapi diawali dengan garis miring “/”, sebagai berikut:

<h1>Headline Koran</h1>
Elemen <h1> menunjukkan presentasi sebuah “heading ukuran 1”. Untuk elemen
kosong, tag berdiri sendiri seringkali berakhir dengan sebuah garis miring “/”:

<hr />
Elemen HTML dapat berisi atribut dalam tag terbuka. Atribut hanyalah sebuah
sarana pemberian browser lebih banyak data format tentang elemen. Setiap atribut
disajikan sebagai name=value pair. Sebuah elemen dapat memiliki banyak atribut
yang diperlukan.

Nilai Atribut biasanya ditempatkan dalam sepasang tanda kutip ganda. Ini
menunjukkan pada browser bahwa semua data dalam tanda kutip ganda dapat
dianggap sebagai bagian dari nilai yang sama.

<img src=”kitten.jpg” width=”198” height=”219” alt=”My Kitten” />
Standard dan Definisi Jenis Dokumen
HTML memiliki beberapa versi yang berbeda; dalam setiap versi HTML,
spesifikasi yang ditulis oleh W3C menunjukkan set tertentu dari unsur-unsur yang
dianggap tepat untuk digunakan dalam pengkodean halaman web.

Untuk memastikan suatu kode halaman web untuk spesifikasi HTML tertentu,
informasi tentang versi HTML terdaftar dalam Document Type Definition
(DTD) di bagian atas halaman web. Setelah DTD yang sah ada di bagian atas
<a href=”url”>A link</a>
name
value


halaman web Anda, halaman tersebut dapat dibandingkan dengan spesifikasi yang
terletak di W3C, menggunakan HTML Validator. Ini adalah proses untuk
memvalidasi halaman web dengan standar formal.

Halaman web divalidasi lebih baik digunakan pada World Wide Web, karena:
• Kode HTML valid akan membuat lebih cepat dibanding dengan kode
dengan kesalahan.
• Kode HTML valid akan membuat lebih baik dibanding kode tidak valid.
• Browser menjadi lebih sesuai dan menjadi semakin diperlukan untuk
penulisan valid dan yang memenuhi standar HTML.

Dalam hal ini, DTD yang berbeda diperkenalkan dan diperiksa untuk
membiasakan Anda dengan konsep ini. Kita melihat HTML dan XHTML DTD.
XHTML singkatan dari eXtensible HyperText Markup Language. Tapi apa yang
terjadi sebenarnya? Dari definisi W3C XHTML:

"Ini adalah reformulasi dari tiga tipe dokumen HTML 4 sebagai aplikasi XML
1.0. [XML] Hal ini dimaksudkan untuk digunakan sebagai bahasa untuk konten
yang bersifat XML – sesuai dan, jika beberapa petunjuk sederhana yang diikuti,
beroperasi di HTML 4 conforming user agents. Pengembang yang bermigrasi ke
konten XHTML 1.0 akan menyadari manfaat sebagai berikut:
• Dokumen XHTML sesuai XML. Dengan demikian, dapat dilihat, diedit, dan
disahkan dengan alat standar XML.
• Dokumen XHTML dapat ditulis untuk operasi yang baik atau lebih baik
daripada sebelumnya dalam HTML 4-conforming user agents yang baru,
XHTML 1.0 conforming user agents.
• Dokumen XHTML dapat menggunakan aplikasi (misal script dan applet)
yang mengandalkan HTML Document Object Model atau XML Document
Object Model [DOM].
• Sebagai keluarga HTML, dokumen yang sesuai dengan XHTML 1.0 akan
cenderung beroperasi didalam dan diantara berbagai macam lingkungan
XHTML.
Keluarga XHTML merupakan langkah berikutnya dalam evolusi internet. Hari ini
dengan bermigrasi ke XHTML, pengembang konten dapat memasuki dunia XML
dengan segala manfaatnya, sementara masih tersisa percaya diri dalam isinya
mundur dan kompatibilitas di masa depan.”

Pada XHTML 1.0, prinsip-prinsip berikut harus diikuti:
• Semua elemen dan atribut harus ditulis dalam huruf kecil.
• Semua elemen harus memiliki tag akhir.
• Elemen kosong ditutup dengan spasi dan garis miring.
• Semua atribut harus memiliki nilai yang ditugaskan kepada mereka.
• Nilai atribut harus diapit tanda kutip dan tidak dapat diminimalkan.
• Semua elemen harus benar sarangnya.
• Dokumen XHTML harus terstruktur dengan baik.

• Sebuah DTD harus dideklarasikan.

HTML 4.01 Definisi Tipe Dokumen


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

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

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Definisi Tipe Dokumen


XHTML 1.0 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/ xhtml1/xhtml1-strict.dtd”>

XHTML 1.0 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C// DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/ xhtml1/ xhtml1-transitional.dtd”>

XHTML 1.0 Frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/ xhtml1/ xhtml1-frameset.dtd”>

Mode Quirks dan Standards-Compliant
Definisi tipe dokumen sangat penting untuk rendering yang tepat dan fungsi dari
dokumen web browser seperti Mozilla, IE5 pada Macintosh, dan IE 6 pada
Windows.

Sebuah DTD yang berisi URL mutlak (yaitu, alamat web penuh) memberitahu
browser tersebut untuk membuat halaman Anda dalam mode standar-compliant,
mengobati bagaimana mereka harus ditampilkan menurut kode (X)HTML dan
CSS.

Definisi Tipe Dokumen Win | IE6 Win | IE5 Mac | IE5
HTML 4.01 Transitional – missing DTD Quirks Quirks Quirks
HTML 4.01 Transitional – missing URL
from DTD
Quirks Quirks Quirks
HTML 4.01 Transitional – full DTD Standards Standards Standards
XHTML 1.0 Transitional – missing DTD Quirks Quirks Standards

Teknologi Internet @ STEKOM Semarang
XHTML 1.0 Transitional – missing URL
from DTD
Quirks Quirks Standards
XHTML 1.0 Transitional – full DTD Quirks Quirks Standards
XHTML 1.0 Transitional – missing XML
declaration
Standards Standards Standards
XHTML 1.0 Transitional – missing XML
declaration and URL
Standards Standards Standards
Character Encoding

Jika browser tidak dapat mendeteksi character encoding yang digunakan dalam
dokumen web, pengguna dapat menyajikan dengan teks terbaca.
Penting untuk secara jelas membedakan antara konsep character set dan
character encoding.

Character set terdiri dari set karakter mungkin digunakan orang dengan tujuan
tertentu – baik yang dibutuhkan untuk mendukung bahasa-bahasa Eropa Barat di
komputer, atau pengajaran di sekolah kelas ketiga (tidak ada hubungannya dengan
komputer).

Coded Character Set adalah seperangkat karakter untuk nomor yang unik yang
telah ditetapkan untuk setiap karakter.

Character encoding mencerminkan cara karakter abstrak yang dipetakan ke byte
untuk manipulasi di komputer. Contoh pengkodean termasuk ISO-8859-1, UTF-8,
UTF-16, and UTF-32.

Contoh Character Encoding digunakan pada elemen <meta>:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8: />
Elemen Umum – Struktural
Elemen Penjelasan
Elemen Header:
<h1> … </h1> Heading 1: tetapan huruf “Times New Roman”, ukuran
24px, dan tebal.
<h2> … </h2> Heading 2: tetapan huruf “Times New Roman”, ukuran
18px, dan tebal.
<h3> … </h3> Heading 3: tetapan huruf “Times New Roman”, ukuran
14px, dan tebal.
<h4> … </h4> Heading 4: tetapan huruf “Times New Roman”, ukuran
12px, dan tebal.
<h5> … </h5> Heading 5: tetapan huruf “Times New Roman”, ukuran
10px, dan tebal.

<h6> … </h6> Heading 6: tetapan huruf “Times New Roman”, ukuran 8px,
dan tebal.
Separators:
<p> … </p> Elemen paragraf.
<br /> Elemen baris kosong.
<hr /> Elemen pengaturan horizontal.
Unordered Lists:
<ul> Elemen list tanpa nomor. Jenis tampilan atribut control
berupa point lingkaran.
<li> … Elemen list.
</ul>
Ordered Lists:
<ol> Elemen list dengan nomor. Jenis tampilan atribut berupa
nomor.
<li> … Elemen list.
</ol>
Definition Lists:
<dl> Elemen list definisi.
<dt> … </dt> Elemen istilah definisi.
<dd> … </dd>
</dl>
Elemen penjelasan definisi. Lebih dari satu definisi dapat
diberikan untuk setiap istilah.
Preformatted Text:
<pre> Tampilan teks seperti format pada editor teks.
…
</pre>
Ingat dalam HTML 4.01 Transitional, elemen kosong seperti <br> dan <hr> tidak
perlu penutup dan garis miring.
Elemen Umum – Prensentasi
Elemen Penjelasan
Elemen Ukuran:
<big> … </big> Teks ditampilkan lebih besar 1 ukuran
<small> … </small> Teks ditampilkan lebih kecil 1 ukuran
Elemen Pengganti Teks:
_… Teks ditampilkan sebagai subscript (muncul lebih
rendah daripada sisa teks).
^… Teks ditampilkan sebagai superscript (muncul lebih
tinggi daripada sisa teks).
<ins> … </ins> Teks ditampilkan sebagai insertion (muncul garis
bawah).
<del> … </del> Teks ditampilkan deleted (muncul dengan garis
horizontal yang digambar).

Elemen Presentasi baik untuk digunakan saat pengkodean script HTML
sederhana, tetapi ada pendekatan yang lebih kuat digunakan untuk mengontrol
presentasi di halaman web. Cascading Style Sheets (CSS) adalah salah satu
pendekatan tersebut.

Elemen Fromat vs Logika
Unsur-unsur logis memiliki makna di balik nama elemen mereka. Sementara
elemen format, seperti <b>, hanya memiliki satu arti, elemen logika dapat
diartikan berbeda oleh browser yang berbeda. Misalnya, <strong> dapat diartikan
oleh browser audio mengucapkan kata-kata dengan nada keras.

Contoh perbandingan Elemen Format dan Logika:
Elemen Format Elemen Logika Penjelasan
<i> … </i> <em> … </em> Tampilan teks miring atau
emphasized.
<b> … </b> <strong> … </strong> Tampilan teks tebal atau sangat
ditekankan.
<tt> … </tt> <code> … </code> Tampilan teks dalam huruf
monospace, seperti kode sumber.

Elemen Bersarang
Elemen HTML dapat bersarang didalamnya satu sama lain. Hal ini
memungkinkan elemen format ganda untuk mempengaruhi data yang sama.
Elemen harus bersarang pada urutan yang tetap untuk menjaga halaman web tetap
valid.
Contoh:
<h1>
< a href=”http://www.google.com.au”>
Google Search Engine
</a>
</h1>
Contoh format teks diatas dalam ukuran huruf besar d an dapat membuat
hyperlink.

Karakter Khusus
Karakter tertentu, seperti kurung siku kiri (<), tanda kutip ganda (") dan kurung
siku kanan (>) disediakan oleh bahasa HTML untuk mewakili atribut khusus.
Selain itu, beberapa simbol yang tidak tersedia pada keyboard standar untuk
dimasukkan ke dalam dokumen HTML. Karakter khusus sebagai acuan untuk
menunjukkan simbol-simbol dalam HTML.


Sebuah karakter khusus ini juga dikenal secara resmi sebagai character entity.
Pada HTML, karakter khusus dapat ditulis dalam dua cara:
1. Symbolic reference: tidak semua browser mendukung referensi simbolik
2. Numeric reference: kebanyakan browser mendukung referensi numerik
Referensi simbolik dimulai dengan ampersand, berisi singkatan teks untuk
ekspresi simbolik, dan diakhiri dengan tanda titik koma.

Contoh: &copy; untuk ©
Referensi numerik juga dimulai dengan ampersand dan diakhiri dengan, tetapi
antara nomor diawali dengan tanda pagar (#).
Contoh: &#169; untuk ©
Beberapa karakter khusus umum:
Tampilan: Simbol: Numerik: Penjelasan:
< &lt; &#60; Less than
> &gt; &#62; Greater than
“ &quot; &#34; Double quotes
&nbsp; &#160; Non-breaking space
& &amp; &#38; Ampersand
© &copy; &#169; Copyright
® &reg; &#174; Registered
™ &trade; &#8482; Trademark
Editor WYSIWYG
WYSIWYG singkatan dari “What You See Is What You Get”.

Dalam kasus editor WYSIWYG untuk HTML, itu berarti bahwa Anda dapat
mengetik dalam dokumen Anda dan format sebagai HTML jika Anda
menggunakan Microsoft Word atau beberapa aplikasi edit dokumen yang sama.
Anda menyorot teks dan tekan tombol B untuk membuatnya tebal, gunakan
pilihan menu untuk menyisipkan tabel, gambar, dll. Editor akan benar-benar
menghasilkan HTML untuk Anda.

Beberapa contoh dari editor WYSIWYG populer untuk HTML adalah
Macromedia Dreamweaver (digunakan secara luas dalam industri) atau Microsoft
FrontPage (digunakan secara luas oleh pengguna rumah) yang dilengkapi dengan
berbagai produk Microsoft. Menggunakan editor WYSIWYG sebenarnya jauh
lebih mudah dan lebih cepat daripada coding HTML dari awal.

Namun, Anda belajar bagaimana kode HTML dari nol dalam mata kuliah ini
karena Anda harus tahu bagaimana HTML bekerja dan kemampuannya. Bahkan
editor WYSIWYG terbaik tidak melakukan semuanya, dan mereka mungkin tidak
menghasilkan HTML dalam gaya yang Anda butuhkan untuk pekerjaan tertentu.


Lebih penting lagi, mungkin ketika Anda ingin menyisipkan bagian kode
pemrograman ke halaman Anda atau menulis script yang menghasilkan HTML
dan anda perlu mengetahui bagaimana tag bekerja untuk mendapatkan kode
HTML yang benar. Editor WYSIWYG adalah alat yang berguna tetapi tidak dapat
berpikir atau memecahkan masalah. Jika Anda tidak tahu bagaimana kode HTML
itu sendiri, Anda akan selalu terbatas pada apa alat-alat tersebut dapat dilakukan.

Catatan: kita tidak menggunakan WYSIWYG editor dalam kuliah ini. Jika Anda
menggunakan editor WYSIWYG untuk menyelesaikan tugas atau latihan-latihan
laboratorium selama kuliah ini, Anda akan gagal secara otomatis.