Modul HTML

UNIVERSITAS KRISTEN DUTA WACANA
Praktikum Pemrograman
Web 2018
Modul I - Pengenalan HTML Dasar
Tim Asisten
Praktikum Pemrograman Web 2018
Tujuan Pembelajaran
Praktikum kali ini di fokuskan untuk pengenalan HTML. Melalui praktikum ini,
diharapkan Anda diharapkan dapat :
 Mengenal elemen-elemen dan cara pemakaiannya di HTML
 Membuat sebuah halaman web yang valid terhadap standar dokumen
web
Prasyarat
Sebelum mempelajari modul ini diharapkan Anda telah memenuhi beberapa
prasyarat seperti dibawah :
 Familiar dengan teks editor

 Mengetahui cara membuka halaman web melalui web browser
 Mengetahui istilah ‘website' , ‘halaman web' , ‘URL' ,' Elemen' , ‘Atribut'
,'tag'
Pengantar / Pendahuluan / Skenario

Dalam praktikum ini, Anda akan melakukan beberapa hal sebagai berikut :
 Membuat dokumen HTML sederhana
 Mengenal elemen dan atribut HTML dan cara penggunaannya
 Membuat tugas studi kasus
Hal-hal khusus yang harus diamati/dianalisa :
 Terdiri dari elemen apa sajakah dokumen HTML standar

 Bagaimana cara menambahkan elemen yang valid dalam dokumen
HTML
 Bagaimana cara menuliskan atribut yang valid dalam elemen HTML
Dalam praktikum ini, Anda tidak diperbolehkan untuk :
 Mengganggu jalannya praktikum (jalan-jalan/ribut dsb.) kecuali pada

waktu yang sudah disediakan.
 Membuka layanan internet yang tidak berhubungan dengan aktivitas
praktikum.
Beberapa Tool dan Software yang nantinya akan digunakan dalam

mendukung praktikum ini adalah :
 Web browser (Ex : Mozilla FF, Chrome, IE dll.)

Teks Editor (Ex : Notepad, Notepad++, Sublime, Komodo Edit dll.)
1
Teori Pendukung
HTML ( Hypertext Markup Language )
HTML adalah bahasa yang digunakan untuk mendeskripsikan struktur sebuah

halaman website. Halaman website juga dikenal dengan istilah dokumen HTML.
HTML bukan merupakan bahasa pemrograman(ex : C,JAVA,VB, dll) melainkan
berupa bahasa markup. Dokumen HTML terdiri dari tag-tag yang dapat
diterjemahkan oleh web browser( ex: Mozilla, Chrome, IE, Safari, dll) sehingga
halaman web dapat ditampilkan sesuai deskripsi yang diinginkan pembuat.
Tidak seperti bahasa pemrograman(ex : C,JAVA,VB, dll) yang membutuhkan

IDE khusus untuk membuatnya, HTML dapat dibuat dengan banyak text editor,
misalnya Notepad, Notepad++, Sublime Text, Comodo Editor dll.
Tag HTML
Beberapa hal yang perlu kita ketahui tentang tag HTML adalah :
Tag HTML selalu diapit oleh tanda "<" dan ">", misalnya <html> , <p> dll.
Pada umumnya setiap tag selalu memiliki pasangan untuk pembuka dan
penutupnya, <b> contoh tag </b>. Namun ada juga tag-tag yang tidak
berpasangan. Tag seperti ini dinamakan tag kosong, misal <hr/> , <img/>
dll.
Tag HTML tidak akan ditampilkan oleh web browser saat halaman web
dibuka.
Tag HTML bersifat non-case sensitive. Artinya penulisan <B> ataupun <b>
sama saja (kecuali pada XHTML). Namun, biasakan menuliskan tag dalam
huruf kecil (lowercase).
Struktur Dasar Dokumen HTML 5

Berikut ini struktur dasar dokumen HTML 5 beserta penjelasannya :
1
HTML <!DOCTYPE>
Deklarasi doctype harus diletakkan paling pertama dalam dokumen HTML,

sebelum tag <html>. Doctype bukan merupakan tag HTML melainkan intruksi
kepada web browser mengenai versi dari bahasa markup yang di pakai (Pada
contoh diatas versi HTML yang dipakai adalah HTML 5). Deklarasi doctype
mengacu pada Document Type Definition (DTD) yang merupakan aturan-aturan
yang harus dipatuhi oleh browser untuk menampilkan halaman web.
Berbagai Doctype
HTML 4.01 Strict
Berisi semua elemen dan atribut HTML kecuali elemen-elemen yang sudah di
depresiasi. Frameset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Berisi semua elemen dan atribut HTML dan juga elemen-elemen yang sudah di
depresiasi. Frameset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Mirip dengan Transitional hanya saja menyertakan Frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
HTML
Tag HTML adalah tag yang digunakan untuk membungkus seluruh bagian halaman
web yang akan dibuat. Di dalam tag HTML ini, terdapat dua tag yang lain yaitu
<head> dan <body>. <head> berfungsi untuk meletakkan hal-hal yang harus diproses
terlebih dahulu misalkan judul halaman, lokasi css dll. Beberapa tag yang biasanya
diletakkan pada head adalah <base>, <link>, <meta>, <script>, <style>, dan
<title>. Sedangkan di dalam <body> terdapat struktur dokumen yang akan
ditampilkan pada browser ( misalkan paragraf berita, gambar, tabel dll ).
1
Demo :
Bukalah teks editor favorit anda, bukalah lembar kerja baru lalu ketikkan struktur
dasar HTML 5 diatas. Simpan lembar kerja dengan nama file "demo.html".
Kemudian buka file "demo.html" dengan browser favorit anda! Apa yang muncul ?
Sekarang masukkan kalimat "I Know HTML!!!" di antara tag <body> menjadi <body>I
Know HTML!!!</body>. Bukalah melalui browser dan lihat perbedaannya!
URL web page
Elemen dan Atribut HTML
Elemen
Elemen adalah satu kesatuan pasangan tag beserta isinya. Misalkan elemen <body>
I KNOW HTML </body>. Berikut beberapa elemen umum HTML :
a - Anchor meta - Metadata
b - Bold text noscript - Alternate script content
body - Document body object - Object
br - Line break ol - Ordered list
button - Button optgroup - Option group
col - Table column option - Menu option
div - Generic block-level container p - Paragraph
em - Emphasis pre - Preformatted text
form - Interactive form script - Client-side script
h1 - Level-one heading select - Option selector
h2 - Level-two heading span - Generic inline container
h3 - Level-three heading strong - Strong emphasis
h4 - Level-four heading style - Embedded style sheet
h5 - Level-five heading sub - Subscript
h6 - Level-six heading sup - Superscript
head - Document head table - Table
hr - Horizontal rule tbody - Table body
html - HTML document td - Table data cell
i - Italic text textarea - Multi-line text input
img - Inline image th - Table header cell
input - Form input title - Document title
label - Form field label tr - Table row
li - List item ul - Unordered list
link - Document relationship
Sumber referensi : www.w3school.com
Pada versi HTML 5, terdapat elemen-elemen tambahan antara lain canvas, audio,
video, article dsb.
1
Atribut HTML
Elemen HTML dapat memiliki atribut, atribut merupakan tambahan informasi

bagi browser untuk menampilkan/memproses elemen HTML. Atribut di letakkan
pada tag pembuka dan harus merupakan pasangan nama dan nilai, seperti:
<p align = "justify" >Ini adalah paragraf satu yang memiliki rata kanan
dan kiri.</p>. Elemen p(paragraph) di atas memiliki atribut "align" yang memiliki
nilai "justify" artinya isi paragraf akan rata kanan kiri. Format penulisan atribut adalah
namaatribut = "nilai" atau namaatribut = ‘nilai'
Satu elemen HTML dapat memiliki lebih dari satu elemen. Contoh dibawah
merupakan elemen gambar yang memiliki atribut src, title dan alt.
<img src = "www.example.com/example.jpg" alt = "ini contoh gambar"

title = "klik untuk memperbesar"/>
Komentar Pada HTML
Kita dapat memberikan komentar pada dokumen HTML kita. Komentar yang kita
berikan tidak akan ditampilkan pada browser. Format komentar pada dokumen
HTML adalah :

Pada dokumen HTML, setiap komentar yang kita tuliskan tidak akan ditampilkan
dalam bentuk apapun.
Pengenalan Elemen dan Atribut HTML
Berdasarkan isi elemennya, elemen HTML dibedakan menjadi dua, yaitu elemen
kosong dan elemen tidak kosong.
Format penulisan elemen tidak kosong adalah sebagai berikut :
<namatagpembuka namaatribut1='isiatribut1' namaatribut2='isiatribut2'>

isi elemen </namatagpenutup>
Contoh:
<p align ='center'> Hello world </p>
Isi elemen HTML dapat berupa teks atau elemen HTML yang lainnya.
<namatagpembuka namaatribut1='isiatribut1'/>
Lain halnya dengan elemen tidak kosong, elemen kosong tidak memiliki isi dan tag
penutup. Contoh elemen-elemen kosong tersebut adalah img, br, hr dsb.
1
Title
Elemen title digunakan untuk memberikan judul pada halaman web. Judul halaman
web akan ditampilkan pada tab web browser atau window web browser. Elemen
title diletakkan dalam elemen head. Format penulisan elemen title adalah :
<title> judul halaman web </title>
Paragraph
Elemen paragraf biasa digunakan dalam penulisan berita, biografi, lirik dsb.
Bisasanya elemen paragraf di letakkan pada elemen <body>. Dengan
mengelompokkan kalimat-kalimat dalam elemen paragraf, nantinya akan
mempermudah pengeditan halaman. Format pembuatan paragraf pada HTML
adalah sebagai berikut :
Atribut
Pasan
gan
Tag
Dalam isi paragraf, Anda juga dapat menambahkan tag-tag font style sepertipada
word editor. Beberapa tag yang bisa anda pakai adalah :
<b> untuk bold, <strong> huruf tebal, <sup> untuk superskrip, <em> untuk
emphasis dll.
Contoh cara pemakaian font-style tersebut adalah :
Pada paragraf diatas, elemen paragraf diberikan atribut "align" yang mengatur
alignment paragraf. Atribut tersebut memiliki value "justify" sehingga alignment
paragraf menjadi rata kanan kiri. Terdapat empat pengaturan kerataan paragraf
yakni, right, left, center dan justify.
1
Hal yang perlu Anda perhatikan adalah bahwa berapa banyakpun spasi atau enter
yang Anda letakkan antara dua kata, HTML akan tetap memprosesnya sebagai satu
spasi saja. Sehingga apabila Anda ingin membuat spasi lebih dari satu, Anda dapat
menambahkan syntax yang berarti non-breaking space.
Pre
Pre adalah elemen yang membuat setiap teks di tampilkan apa adanya dalam
browser, kecuali tag yang termasuk dalam elemen HTML. Contoh pemakaian
elemen pre adalah seperti dibawah :
Header
Elemen header digunakan untuk memberi heading pada HTML. Terdapat enam
tingkat header, yaitu h1, h2, h3, h4, h5, dan h6.
Tingkatan heading menyatakan seberapa penting kata tersebut daripada kata yang
lain. Biasanya, heading digunakan untuk memberikan judul. Semakin tinggi heading,
<h1> paling tinggi, semakin penting suatu kata. Contoh dibawah memperlihatkan
tingkatan heading pada HTML.
1
Image
Elemen Image digunakan untuk menampilkan gambar

pada halaman. Elemen ini termasuk elemen kosong.
Format dasar penulisan elemen image pada HTML adalah
<img src = "namafilegambar"/>
1
Berikut ini terdapat contoh penambahan gambar pada dokumen HTML.
Pada contoh diatas, terdapat sebuah gambar dengan nama "mylo xyloto.jpg" yang
terdapat dalam folder yang sama dengan file HTML bernama ‘demo.html'. Elemen
image memiliki atribut yang harus ada yaitu "src" atau source yang memiliki value
alamat gambar bertipe ‘string'.
Dalam mengatur direktori website, ada baiknya untuk memisahkan file-file gambar
kedalam folder khusus terpisah dengan dokumen HTML. Misalkan folder
"images".
Maka cara mengakses alamat gambar yang berada dalam folder "images" adalah :
Lalu bagaimana jika gambar yang akan ditampilkan berada di luar folder file
HTML Anda?
1
Dibawah ini terdapat beberapa atribut yang dapat ditambahkan dalam elemen img :
List
Terdapat 3 macam list pada HTML, Unordered List, Ordered List dan Definition List.
Unordered list digunakan untuk menyajikan daftar yang isinya tidak diberi
penomoran sebagai urutan.Format penulisan unordered list adalah sebagai berikut :
<ul>
<li>isi pertama</li>
<li>isi selanjutnya...</li>
</ul>
Atribut opsional unordered list :
1
Ordered list digunakan untuk menyajikan daftar yang isinya diberi penomoran
sebagai urutan.Format penulisan ordered list adalah sebagai berikut :
<ol>
<li>isi pertama</li>
<li>isi selanjutnya...</li>
</ol>
Atribut optsional ordered list :
Definition list digunakan untuk menyajikan daftar yang memiliki pasangan judul dan
deskripsi. Format penulisan Definition list adalah sebagai berikut :
<dl>
<dt>judul daftar 1</dt>
<dd>deskripsi daftar 1</dd>
<dt>judul daftar seterusnya</dt>
<dd>deskripsi daftar seterusnya </dd>
</dl>
1
Anchor
Elemen a (Anchor) berfungsi untuk menambahkan fungsi hyperlink pada isi HTML.
Hyperlink dapat dilakukan ke dalam dokumen yang sama ataupun ke luar dokumen
yang berbeda. Pada praktikum ini akan diperlihatkan cara hyperlink ke dokumen
HTML atau website yang berbeda.
Format penulisan elemen anchor pada HTML adalah sebagai berikut :
<a href="halamantarget">isi elemen</a>

Atribut yang harus ada pada elemen a adalah "href" yang berisi target halaman.
Contoh penggunaan elemen ini adalah seperti dibawah :
Apabila link tersebut di klik ..
".
1
Table
Elemen table digunakan untuk menyajikan data tabular. Tabel terdiri dari header
dan body yang masing-masing tersusun oleh kolom dan baris. Pertemuan kolom
dan baris pada tabel dinamakan cell.
Format penulisan elemen table adalah sebagai berikut :
Tabel dibuka tag <table> dan ditutup tag </table>. Elemen thead berfungsi untuk
header tabel. Elemen tbody menyatakan badan tabel. Elemen tr menyatakan table
row. Satu elemen tr menyatakan satu baris tabel. Elemen td menyatakan data
tabel. Banyaknya elemen td dalam satu elemen tr menyatakan banyak kolom
dalam satu baris.
Table rowspan dan table colspan
Anda dapat menyatukan beberapa kolom tabel menjadi satu kolom atau beberapa
baris tabel menjadi satu.
1
KOLOM
column
BARIS
ROW
Rowspan akan menggabungkan beberapa baris menjadi satu. Format penulisan

rowspan adalah :
<td rowspan = "banyakbaris"> ... </td>

Pada contoh diatas banyak baris yang dirowspan ada 3. Maka syntax HTML untuk
melakukan rowpan diatas adalah :
<td rowspan = "3"> ... </td>

Dengan penggabungan 3 baris, Anda perlu menghilangkan 2 baris yang ada pada
kolom yang sama pada tabel.
1
Colspan akan menggabungkan beberapa kolom menjadi satu. Format penulisan

colspan adalah :
<td colspan = "banyakkolom"> ... </td>

Pada contoh diatas banyak kolom yang dirowspan ada 3. Maka syntax HTML untuk
melakukan colspan diatas adalah :
<td colspan = "3"> ... </td>

Dengan penggabungan 3 baris, Anda perlu menghilangkan 2 kolom yang ada pada
baris yang sama pada tabel.
1
STUDI KASUS
Buatlah dokumen HTML bernama "demo1.html" dan tampilkan Halaman seperti

dibawah! Ubahlah judul halaman menjadi "Korean Drama" !
Klu :
Garis horisontal dapat dibuat dengan menambahkan elemen <hr/>
Penampilan gambar album dan deskripsi disamping kanannya menggunakan tabel
Referensi :
http://www.w3schools.com/html/default.asp
http://en.wikipedia.org/wiki/Doctor_Stranger

Modul HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Modul HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS KRISTEN DUTA WACANA

 Familiar dengan teks editor

Pengantar / Pendahuluan / Skenario

Hal-hal khusus yang harus diamati/dianalisa :

 Terdiri dari elemen apa sajakah dokumen HTML standar

Dalam praktikum ini, Anda tidak diperbolehkan untuk :

 Mengganggu jalannya praktikum (jalan-jalan/ribut dsb.) kecuali pada

Beberapa Tool dan Software yang nantinya akan digunakan dalam

 Web browser (Ex : Mozilla FF, Chrome, IE dll.)

HTML ( Hypertext Markup Language )

HTML adalah bahasa yang digunakan untuk mendeskripsikan struktur sebuah

Tidak seperti bahasa pemrograman(ex : C,JAVA,VB, dll) yang membutuhkan

Struktur Dasar Dokumen HTML 5

Deklarasi doctype harus diletakkan paling pertama dalam dokumen HTML,

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

HTML 4.01 Frameset

Mirip dengan Transitional hanya saja menyertakan Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

URL web page

Elemen dan Atribut HTML

Elemen HTML dapat memiliki atribut, atribut merupakan tambahan informasi

namaatribut = "nilai" atau namaatribut = ‘nilai'

<img src = "www.example.com/example.jpg" alt = "ini contoh gambar"

Komentar Pada HTML

Pengenalan Elemen dan Atribut HTML

Format penulisan elemen tidak kosong adalah sebagai berikut :

<namatagpembuka namaatribut1='isiatribut1' namaatribut2='isiatribut2'>

<title> judul halaman web </title>

Contoh cara pemakaian font-style tersebut adalah :

Elemen Image digunakan untuk menampilkan gambar

Format dasar penulisan elemen image pada HTML adalah

<img src = "namafilegambar"/>

Berikut ini terdapat contoh penambahan gambar pada dokumen HTML.

Atribut opsional unordered list :

Atribut optsional ordered list :

Format penulisan elemen anchor pada HTML adalah sebagai berikut :

<a href="halamantarget">isi elemen</a>

Apabila link tersebut di klik ..

Format penulisan elemen table adalah sebagai berikut :

Table rowspan dan table colspan

Rowspan akan menggabungkan beberapa baris menjadi satu. Format penulisan

<td rowspan = "banyakbaris"> ... </td>

<td rowspan = "3"> ... </td>

Colspan akan menggabungkan beberapa kolom menjadi satu. Format penulisan

<td colspan = "banyakkolom"> ... </td>

<td colspan = "3"> ... </td>

Buatlah dokumen HTML bernama "demo1.html" dan tampilkan Halaman seperti

Anda mungkin juga menyukai