APLIKASI BERBASIS WEB 1

HTML

PERTEMUAN 2

TRINUGI WIRA H
Pada pertemuan ini, materi yang akan dibahas adalah :

1. Pengenalan dan Sejarah Perkembangan HTML

2. Kegunaan dari HTML

3. Tools yang diperlukan dalam pengembangan HTML

4. Dasar-dasar Tag HTML

5. Aturan Penulisan Tag HTML

6. Menggunakan Tag HTML untuk membuat halaman web sederhana :

 Penggunaan tag paragraph <p>
 Penggunaan tag heading <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
 Penggunaan tag <font> dan atribut tambahan dalam tag <font>
 Penggunaan tag tambahan untuk mengcustomize teks
Pengenalan HTML

• Proses pembuatan website tidak terlepas dari penggunaan HTML.

• HTML bukan merupakan bahasa pemrograman, karena ada beberapa syarat yang
tidak dipenuhi HTML jika ingin dikatakan sebagai sebuah bahasa pemrograman.

• Walaupun banyak juga buku-buku maupun referensi di internet yang mengatakan bahwa
HTML merupakan bahasa pemrograman.

• HTML merupakan bahasa markup (penanda) berupa kode-kode penanda (tag) untuk
menginstruksikan pada browser untuk menampilkan apa yang diinginkan oleh web
developer atau web programmer.
• Dengan HTML anda bisa mengatur tampilan dari halaman web dan content-content didalamnya.

• HTML juga merupakan bahasa standar yang digunakan untuk membuat web interface terutama
untuk web-web statis.

• Standar-standar HTML ditetapkan oleh suatu badan atau konsorsium yang dikenal dengan nama
W3C (World Wide Web Consortium). Walaupun W3C tidak hanya mengurusi tentang HTML
saja melainkan semua hal yang berkaitan dengan standar untuk browser dan yang berkaitan
dengan teknologi web.
Sejarah dan Perkembangan HTML

• Akar utama dari HTML bermula dari akhir tahun 1980an dan awal 1990an, dimana Tim
Berners-Lee pertama kali mengembangkan HTML untuk menghasilkan cara yang lebih
sederhana bagi para ilmuwan dan peneliti di CERN (Laboratorium di Genewa, Swiss)
untuk menampilkan laporan perkembangan dan hasil penelitian di web.

• Pada awal tahun 1990an, kekuatan dan penggunaan dari WWW mulai dikenal luas dan
CERN merilis HTML agar dapat digunakan dengan bebas oleh masyarakat umum.

• Versi-versi HTML urut dari versi yang pertama :

HTML 2.0 disetujui sebagai standar pada tanggal 22 September 1995.

HTML 3.2 dirilis pada tanggal 14 Januari 1996.
HTML 4.0 dirilis pada tanggal 18 Desember 1997.
ISO/IEC 15445:2000 “ISO HTML” yaitu HTML versi 4.01 Strict, 15 Mei 2000.
HTML 5 (masih dalam tahap pengembangan)
Kegunaan dari HTML

• Banyak hal yang dapat kita lakukan dengan HTML untuk memodifikasi halaman web kita
sehingga lebih menarik bagi pengunjung web.

 Menentukan format teks (font) yang akan ditampilkan.

 Membuat link yang dapat mengarahkan pengunjung pada halaman-halaman
tertentu maupun halaman yang sama dalam website.
 Menyisipkan image atau gambar pada halaman web.
 Menyisipkan suara atau sound pada halaman web.
 Membuat form online, dll.
Tools-tools yang diperlukan dalam pengembangan HTML

• Kapanpun jika anda ingin membangun sebuah website dengan HTML, anda akan
memerlukan 3 komponen dasar berikut :

 HTML Editor, yang akan anda gunakan untuk membuat dan menyimpan
dokumen-dokumen HTML.
 Web Browser, yang akan anda gunakan untuk menguji dan menampilkan
dokumen HTML yang telah anda buat.
 Validator, yang akan anda gunakan untuk mengecek apakah struktur dokumen
HTML yang anda buat telah benar, sesuai dan memenuhi standar dari yang
ditetapkan W3C.
Sedangkan untuk pengembangan situs dengan kompleksitas yang tinggi, maka alangkah baiknya
anda menggunakan tools-tools berikut :

 HTML Editor yang memiliki fitur WYSIWYG (What You See Is What You Get).
Contoh : Adobe Dreamweaver CS4.
 Software Grafis seperti produk dari Adobe : Adobe Photoshop, Adobe
(Macromedia) Fireworks, Adobe Illustrator, Corel Paint Shop Pro, GIMP.
 Software Multimedia, contoh : Adobe (Macromedia) Flash, Apple Quick Time,
Microsoft Windows Movie Maker, Adobe After Affects, Sony Sound Forge,
Audacity.
 Browser, contoh : Internet Explorer (versi sekarang dan 2 versi terakhir),
Mozilla Firefox, Opera, Netscape, Safari.
 Aplikasi FTP (File Transfer Protocol), contoh : Filezilla, CuteFTP, Fetch (untuk
pengguna Mac OS X),
 Aplikasi terminal bagi para pengguna UNIX dan LINUX, contoh : Putty. Untuk pengguna
Windows bisa menggunakan emulator Cygwin.
HTML Editor

• Untuk dapat membuat dokumen HTML anda memerlukan teks editor untuk menulis tag-
tag HTML yang ingin anda tampilkan pada halaman website anda nanti.

• HTML tidak memerlukan editor khusus seperti IDE, karena dengan menggunakan editor
Notepad pun anda bisa menulis tag-tag HTML. Namun untuk pembuatan website yang
lebih kompleks sangat tidak disarankan menggunakan notepad karena banyaknya
kekurangan dan tidak adanya fasilitas tambahan apapun dalam notepad.

• Anda lebih disarankan menggunakan editor yang menggunakan konsep WYSIWYG

(What You See Is What You Get) seperti Adobe Dreamweaver CS4 (saat slide materi
ini dibuat), BBEdit untuk pengguna Mac.
Web Browser

• Apa jadinya sebuah web tanpa browser ?.

• Browser memiliki peranan yang sangat penting, baik dalam menguji halaman web yang
telah anda buat dan juga menampilkannya pada pengunjung.

• Banyaknya browser yang bermunculan di pasaran membuat para developer harus

mencermatinya, karena setiap browser memiliki karakteristiknya masing-masing dan
dukungan terhadap kode HTML yang berbeda-beda pula.

• Hal ini dikarenakan kompabilitas dan karakteristik browser itu sendiri.

• Jangan pernah menguji halaman situs yang telah anda buat hanya pada 1 browser saja,
karena INGAT !!! Pengunjung bisa membuka website anda dari browser apapun dan
anda tidak bisa memaksa pengunjung menggunakan browser tertentu.
Validator

• Tools validator digunakan untuk memeriksa apakah kode dari tag HTML yang anda tulis
telah memenuhi standar dari W3C dan penulisan dari kode HTML telah sesuai dengan
aturan yang telah ditetapkan oleh W3C.

• Tools validator tidak hanya digunakan untuk memeriksa kode HTML saja tapi juga dapat
digunakan untuk memeriksa style sheet (CSS) yang digunakan.
Dasar-dasar TAG HTML

• Dokumen HTML terdiri dari teks-teks (isi dari halaman web) dan tag-tag yang disisipkan
kedalamnya.

• Tag-tag yang akan selalu ada pada setiap dokumen HTML dan tag-tag HTML ini boleh
dikatakan sebagai tag dasar yang akan membentuk struktur dari dokumen HTML :

 <html>…</html>
 <head>…</head>
 <body>…</body>

• Setiap dokumen atau file HTML akan diawali dengan tag <html> dan diakhiri dengan tag
</html>. Hal tersebut dimaksudkan agar browser mengenali file tersebut sebagai file
HTML yang akan ditampilkan di browser.
• Tag <head> digunakan untuk membuat judul dokumen HTML, menjembatani hubungan antar
dokumen HTML, memberitahu pada browser untuk membuat form pencarian, menyediakan
metode untuk mengirim tipe pesan pada browser.

• Elemen tag yang mungkin dapat digunakan pada tag <head> adalah :
 Tag <title>, digunakan untuk memberikan judul halaman html. Judul dokumen disini
berarti judul akan ditampilkan pada title bar web browser dan bukan pada badan browser.
Contoh penulisannya : <title>…</title>. Tag title harus diletakkan pada bagian tag
<head>…/head>.
 Tag <base>, digunakan untuk menentukan basis dari URL sebuah dokumen. Contoh
penulisannya : <base a href=“//www.detik.com/news”>.
 Tag <meta>, digunakan untuk menampilkan informasi yang spesifik mengenai dokumen
HTML. Contoh : <meta name=“keywords”>.

• Tag <body>, digunakan untuk menandai awal dan akhir dari isi dokumen HTML. Contoh
penulisannya : <body>…</body>.
• Contoh kode HTML sederhana dari struktur dokumen HTML :

(simpan file dengan nama : dasarhtml.html)

<html>
<head>
<title>Halaman Pertama Web dengan HTML</title>
</head>
<body>
Selamat datang di halaman website pertama saya
</body>
</html>

• Tampilan output file dasarhtml.html pada browser :

Aturan Penulisan tag HTML

• Setiap menulis tag pada html diawali dengan tanda lebih kecil dari (<) dan lebih besar
dari (>). Contoh : <html>.

• Hampir semua tag-tag html harus diakhiri dengan menambahkan slash “/” didalam tag
penutup. Contoh : tag awal <p> dan diakhiri dengan tag </p>, perbedaan tag awal dan
tag akhir hanyalah adanya penambahan slash didalam tag penutup.

• Penulisan atribut tambahan dalam tag awal harus dipisahkan dengan menggunakan spasi,
sedangkan tag penutup tidak perlu diberikan atribut tambahan didalamnya. Contoh : <h2
align>Halaman Berita Utama</h2>.

• Penulisan nilai dari atribut tambahan dalam tag awal dapat ditambahkan kedalam atribut
dengan menggunakan tanda sama dengan (=) dan juga tanda kutip ganda (“). Contoh :
<h2 align=“center”>Halaman Berita Utama</h2>.
• Penulisan tag tanpa adanya atribut tambahan tidak boleh mengandung spasi baik pada tag awal
dan tag penutup.
 Contoh penulisan tag yang benar = <p>Tag Paragraph</p>.
 Contoh penulisan tag yang salah = < p>Tag Paragraph</p>.

• Penulisan tag-tag html dapat dikombinasikan dengan menggunakan huruf kecil dan huruf besar,
namun ada baiknya menggunakan huruf kecil saja atau huruf besar saja. Hal ini dimaksudkan
agar user melihat bahwa kode HTML yang dibuat menjadi lebih rapi dan menjaga konsistensi.
 Contoh variasi penulisan tag HTML = <HeaD>…</head>.
 Contoh variasi penulisan tag HTML = <TITLE>…</TITLE>.
 Contoh variasi penulisan tag HTML = <html>…</html>.
Menggunakan Tag HTML Untuk Membuat Halaman Web Sederhana

• Pada bagian slide sebelumnya telah dijelaskan mengenai tag-tag dasar HTML dan aturan
penulisan yang baik dan sesuai standar yang ditetapkan oleh W3C.

• Pada bagian ini kita akan membahas berbagai macam tag-tag yang dapat digunakan
untuk membuat sebuah halaman web menjadi lebih berisi.

• Tag <p> digunakan untuk membuat paragraph. Contoh penggunaan tag <p> dalam
dokumen HTML : (simpan file dengan nama : paragraph.html)
<html>
<head>
<title>Halaman Pertama Web dengan HTML</title>
</head>
<body>
<p>Membuat halaman website dengan menggunakan HTML sangatlah menyenangkan,
karena dengan HTML kita bisa bebas berkreasi untuk mengcustomize setiap halaman web yang akan
ditampilkan pada user di layar browser.</p>
</body>
</html>
• Tampilan output file paragraph.html pada layar browser :

• Untuk menambahkan atribut dan nilainya pada tag <p>, maka tag <p> akan menjadi seperti
berikut ini : <p align=“right”>teks yang akan ditampilkan</p>.
Menggunakan tag Heading

• Tag heading digunakan untuk menapilkan judul dokumen yang akan tampil pada badan
browser.

• Terdapat 6 macam tag heading yang dapat anda gunakan, yaitu :

<h1>Menggunakan tag heading 1</h1>

<h2>Menggunakan tag heading 2</h2>
<h3>Menggunakan tag heading 3</h3>
<h4>Menggunakan tag heading 4</h4>
<h5>Menggunakan tag heading 5</h5>
<h6>Menggunakan tag heading 6</h6>
• Contoh dokumen HTML dengan menggunakan tag heading :

(simpan file HTML dengan nama : heading.html)

<html>
<head>
<title>Menggunakan Tag Heading</title>
</head>
<body>
<h1>Menggunakan Tag Heading 1</h1>
<h2>Menggunakan Tag Heading 2</h2>
<h3>Menggunakan Tag Heading 3</h3>
<h4>Menggunakan Tag Heading 4</h4>
<h5>Menggunakan Tag Heading 5</h5>
<h6>Menggunakan Tag Heading 3</h6>
</body>
</html>

Tampilan output file heading.html pada browser

Menggunakan Font dengan HTML

• Tag <font> digunakan untuk menampilkan tipe font yang akan digunakan bersama
dengan teks yang akan ditampilkan pada layar browser. Penggunaan tag <font> tanpa
disertai dengan tipe font yang ingin digunakan, tidak akan menimbulkan efek apapun dari
teks yang ingin ditampilkan pada browser.

• Oleh karena itu, anda harus memberikan nilai font sebagai atribut tambahan.

• Hal penting yang harus anda mengerti tentang penggunaan font dalam HTML adalah
bahwa anda tidak perlu memikirkan font yang ingin di lihat oleh user, melainkan tugas
browser untuk menampilkan font tersebut.

• Contoh penggunaan tag <font> : <font face=“Arial” size=“10”>Teks</font>.

• Contoh penulisan tag <font> beserta nilai atributnya :

<font face =“Arial”></font>

<font face =“Arial, Tahoma, Times New Roman”></font>

• Penjelasan singkat mengenai penulisan tag <font> diatas :

 Cara pertama digunakan jika anda hanya ingin memberikan 1 pilihan saja pada browser
untuk menampilkan gaya penulisan teks. Pilihan font tentu saja bergantung pada pilihan
font yang disediakan oleh setiap komputer user/client.
 Cara kedua lebih bersifat dinamis karena jika pada pilihan font pertama, browser tidak
memiliki font tersebut maka browser akan melanjutkan pada pilihan kedua dan
seterusnya.
 Jika user tidak memiliki satu pun pilihan font yang disediakan, maka browser akan
menggunakan jenis font apapun yang telah terinstall pada komputer sebagai font default.
Memberikan Nilai Besaran (Size) Ukuran Font

• Penggunaan tag <font>, selain dapat di kombinasikan dengan gaya penulisan font
tersebut tapi juga kita dapat mengatur nilai dari ukuran font yang ingin ditampilkan.

• Contoh penulisan tag <font> beserta tipe font dan ukuran font :

<font face =“Arial, Tahoma, Times New Roman” size=“+2”></font>

• Contoh penggunan tag font beserta atributnya dalam file HTML :

(simpan file dengan nama : font.html)

<html>
<head>
<title>Menggunakan Tag Font</title>
</head>
<body>
<p align=“justify”><font face="Arial, Tahoma, Monotype Corsiva" size="+1">
Teks yang akan ditampilkan pada layar browser anda menggunakan font : Arial, jika pada komputer
anda tidak terisntall font arial maka browser akan menampilkan font dengan pilihan ke-2 yaitu :
• Lanjutan file HTML font.html : (bagian 2)

Tahoma dan jika pada komputer anda tidak terisntall font Tahoma maka browser akan menampilkan
teks dengan gaya penulisan Monotype Corsiva. Jika pilihan font terakhir ini juga tidak ada pada
komputer anda maka browser akan secara otomatis menampilkan tulisan dengan pilihan font yang ada
pada komputer anda.</font></p>
</body>
</html>

• Tampilan output dari font.html pada browser :

• Penggunaan tag <font> tanpa adanya atribut tambahan berupa ukuran font akan menghasilkan
ukuran font standar yang akan diberikan oleh browser.

• Selain menggunakan tag <font> dan atribut tambahan dari tag <font>, kita juga dapat
menambahkan beberapa tag lain untuk mengcustomize teks seperti membuat teks tebal
(bold), bergaya miring (italic) maupun teks dengan garis bawah (underline).

• Dalam HTML kita menyebut bentuk-bentuk teks tersebut dengan nama : physical styles
(bentuk fisik teks).

• Contoh file HTML dengan menggunakan tag variasi untuk menampilkan teks :

Tag <b>…</b>, digunakan untuk mencetak teks bergaya tebal

Tag <i>…</i>, digunakan untuk mencetak teks bergaya miring
Tag <u>…</u>, digunakan untuk mencetak teks dengan garis bawah
Tag <s>…</s>, digunakan untuk mencetak teks dengan garis ditengah teks
• Contoh file HTML dengan menggunakan tag variasi untuk menampilkan teks :

(simpan file HTML anda dengan nama : variasifont.html)

<html>
<head>
<title>Menggunakan tag untuk mengcustomize teks</title>
</head>
<body>
<p align="justify"><font face="Arial, Tahoma, Monotype Corsiva" size="-1">
<b>Teks berikut akan ditampilkan dengan cetak tebal</b>
dan teks ini ditampilkan tanpa cetak tebal<br />
<i>Teks ini akan ditampilkan dengan gaya miring</i><br />
<u>Teks ini akan ditampilkan dengan menggunakan garis bawah</u>
</font></p>
</body>
</html>
• Tampilan output file HTML variasifont.html pada browser :

• Penggunaan tag physical styles dapat digabung penggunaannya, misalnya anda ingin
menampilkan teks bergaya tebal sekaligus bergaya miring. Maka perhatikan contoh
penggunaannya berikut dan lihat hasilnya pada browser anda :

<b><i>Teks ini akan ditampilkan dengan gaya cetak tebal dan miring</i></b>
Menggunakan warna dalam menampilkan teks

• HTML membuat anda sebagai web developer bebas berkreasi dengan tampilan dari
halaman web yang ingin anda tampilkan dalam browser.

• Pada bahasan beberapa slide sebelumnya, ada beberapa hal yang dapat kita lakukan
untuk mengcustomize teks yang ingin kita tampilkan :
 Gaya penulisan (font) teks
 Ukuran (size) dari teks
 Variasi teks yang ingin di tampilkan

• Hal berikutnya yang dapat kita lakukan untuk mengcustom teks yang ingin kita tampilkan
ke dalam browser adalah memberikan warna sehingga teks menjadi lebih menarik dan
serasi dengan isi dari content web yang ditampilkan.
• Dalam HTML, penggunaan warna teks dapat menggunakan notasi hexadecimal (dituliskan
dengan 6 kode karakter yang merupakan kombinasi dari perpaduan warna merah, hijau dan
biru) karena merupakan cara yang umum dan banyak digunakan untuk web desainer
professional.

• Terdapat beberapa cara untuk menuliskan warna font teks, yaitu dengan atau tanpa
menggunakan tag <font> dan atribut color di dalam tag <font> tersebut.

<font face="monospace" color="#FF0000">

<font color="#FF0000“>
<font color="Magenta">

• Cara pertama, atribut color digunakan bersama dengan gaya font dari tag <font>.

• Cara kedua, hanya atribut color dengan nilai notasi hexadesimal yang ditambahkan ke dalam
tag <font> tanpa rincian gaya dari tag <font> yang digunakan.

• Cara ketida, memberikan atribut color dengan nilai notasi hexadesimal pada tag <font> dan
men-set nilai warna sesuai dengan nama warna yang menjadi pilihan anda.
• Contoh file HTML untuk menampilkan warna pada teks :

(simpan file HTML dengan nama : warnafont.html)

<html>
<head>
<title>Menggunakan atribut warna pada tag font</title>
</head>
<body>
<font face="monospace" color="#0000FF">
Menggunakan warna teks biru
</font><br />

<font face="monospace" color="#FF0000">

Menggunakan warna teks merah
</font><br />

<font face="monospace" color="#FFFF00">

Menggunakan warna teks kuning
</font><br />

warnafont.html – bagian 1
• Lanjutan kode HTML warnafont.html : (bagian 2 – selesai)

<font face="monospace" color="#00FF00">

Menggunakan warna teks hijau
</font><br />

<font face="monospace" color="Magenta">

Menggunakan warna teks merah muda
</font>
</body>
</html>

• Tampilan output file HTML warnafont.html pada browser :

• Tabel warna standar dalam notasi hexadesimal dan nilai RGB :
Latihan Soal

1. Berikanlah contoh (minimal 4) tag-tag HTML yang tidak memerlukan tag akhir dalam
setiap penggunaannya !.

2. Berikanlah penjelasan tentang apa yang anda ketahui tentang :

 Browser
 Komentar
 Tag

3. Sebutkan dan berikan contoh variasi tag untuk menampilkan teks selain dari materi yang
telah diberikan dalam slide ini, berikanlah sedikit penjelasan tentang tag-tag tersebut
(minimal 3 tag) !.
• ADA PERTANYAAN ??

• SELESAI, TERIMA KASIH

• SAMPAI BERTEMU KEMBALI PADA PERTEMUAN SELANJUTNYA

Credit for this slide :

• “Learning Web Design – A Beginner’s Guide to HTML, XHTML, Style Sheet and
Web Graphics 3rd Edition”, Jennifer Niederst Robbins.

• “Pemrograman Web – HTML Dasar”, Fajar Saptono, ST.

• “HTML in 10 Simple Steps or Less”, Robert G. Fuller and Laurie Ann Ulrich.