Laporan pratikum 1

LAPORAN PRATIKUM 1
PRAKTIKUM PEMROGRAMAN BERBASIS WEB
HTML
Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web yang
dibimbing oleh Bapak Didik Dwi Prasetya
Oleh :
GISRA RAHMADHITA
130533608259
S1 PTI 2013 Offering B
UNIVERSITAS NEGERI MALANG
FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
JANUARI 2015

HTML
A. KOMPETENSI DASAR
Memahami struktur dasar dokumen HTML dan HTML5
Mampu membuat dokumen HTML yang baik dan benar.
Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.
B. ALOKASI WAKTU
4 JS (4 x 50 menit)
C. PETUNJUK
D. DASAR TEORI
1. HTML dan XHTML
HTML (HyperText Markup Language) merupakan sebuah bahasa markup, bukan
bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang
mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan
dokumen standar yang digunakan untuk mendesain halaman web.
Pada awal tahun 2000, konsorsium W3C (World Wide Web Consortium) membuat
perubahan besar melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya,
dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan
ekstensibilitas XML (eXtensible Markup Language) ke HTML.
Perkembangan HTML semakin pesat seiring diperkenalkannya HTML5 pada tahun
2009.HTML5 dibangun oleh konsorsium W3C untuk dimasukkan sebagai perubahan besar
berikutnya pada standar HTML. Atas dasar ini, maka penting sekali untuk mengenal dan
memahami HTML5 dengan baik.
2. Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag <html>dan diakhiri dengan komplemennya,
yakni tag</html> tag. Dokumen HTML juga menyertakan tiga pasang tag.
 Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai dokumen
HTML.
 Tag <title> dan </title>: digunakan untuk menambahkan title di title bar browser.
 Tag <body> dan </body>: digunakan untuk melingkupi semua teks yang terdapat di
halaman HTML.
Bentuk struktur dokumen HTML yang standar sebelum versi HTML5 diperlihatkan sebagai
berikut:

Pada HTML5, struktur penulisan lebih diringkas dengan bentuk sebagai berikut:
Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan
di dalam dokumen HTML. Salah satu elemen yang perlu diperhatikan adalah untuk penulisan
komentar. Di HTML, komentar dinyatakan dengan tag .
3. Persiapan Kebutuhan
Pada praktikum awal ini, meskipun dokumen HTML bisa ditampilkan tanpa
menggunakan web server, namun di sini diwajibkan tetap menggunakan. Selain itu,
praktikum ini juga menuntut pembuatan kode-kode yang baik, benar, dan valid.Berikut ini
adalah kebutuhan-kebutuhan yang minimal diperlukan:
a. XAMPP/WampServer
Paket web server Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini
dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman.
b. Web Browser
Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk pembanding,
sebaiknya juga memanfaatkan browser lain.

c. Editor Teks
Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web (tidak
diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).
1. Membuat Dokumen HTML
Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header dan bodi.
Di mana header mendefinisikan informasi mengenai dokumen, sedangkan bodi
mendefinisikan tubuh atau isi dokumen. Langkah-langkah pembuatan dokumen HTML
diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
3. Simpan dokumen HTML dengan nama latihan1.1.html dan letakkan di lokasi direktori
web (C:wampwww atau C:xampphtdocs) Perhatikan, wwwdan htdocsmerupakan
direktori web dan sebaiknya buat subdirektori di dalamnya.
Bagaimanapun, dokumen HTML memang bisa ditampilkan dengan mengklik ganda di mana
pun lokasinya. Namun perlu diperhatikan, langkah ini bukanlah cara untuk menjalankan
halaman web di server lokal.
2. Publikasi Halaman Web
Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara
lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya
ketika aplikasi masih dalam tahap pengembangan. Langkah yang diperlukan untuk publikasi
ini sangat sederhana.
1. Pastikan bahwafile dokumen sudah diletakkan di direktori web, misalnya untuk
WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya, termasuk
Apache (versi tunggal) adalah htdocs.
2. Pastikan bahwa web server sudah dijalankan.
3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen.
3. Format Teks
HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.
Heading
Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading
didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana n menyatakan
tipe dengan nilai 1-6.
Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini.
Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam
implementasinya harus mendeklarasikan semua elemen-elemen dasar.
Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks.

 Paragraf
Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari kumpulan
paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag <p>. Tag <p>
sebenarnya merupakan tag pasangan, meski dalam implementasinya kerap kali diabaikan.
Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan
atribut align. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata tengah, kiri
kanan, dan kanan.
Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika kita
hanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya,
gunakan tag line break <br />.

 Fontase
HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk mengatur font,
seperti huruf tebal, huruf miring, garis bawah, dan masih banyak lagi. Sebagai tambahan, di
sini juga akan dijelaskan mengenai cara mencetak tag. Seperti diketahui, tag <p> di dokumen
secara otomatis akan diterjemahkan sebagai paragraf. Adapun untuk mencetak karakter <p>
di layar, kita perlu menggunakan nama entitas. Sebagai contoh, karakter < dinyatakan dengan
nama entitas < dan karakter > dinyatakan dengan >.
 Karakter Khusus
Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan
memanfaatkan nama entitas. Tabel berikut memperlihatkan beberapa jenis karakter khusus
yang dapat digunakan beserta nama entitasnya.
4. Garis Horizontal
Di HTML, garis horizontal direpresentasikan melalui tag <hr />. Meskipun
kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit berbeda, namun
pada hakekatnya mencerminkan sebuah bentuk garis horizontal.
5. Menggunakan List
HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered), dan
definisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakan melalui tag
<li> berpasangan—yang merepresentasikan item-item list.
6. Pewarnaan
Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag
<body>. Atribut ini dapat diisi dengan nama warna—misalnya red—atau kode
heksadesimal—misalnya #FFFFFF.
Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang memungkinkan
kita melakukan pewarnaan. Sama seperti bgcolor, nilai atribut ini juga dapat berupa nama
warna atau kode heksadesimal.
7. Bekerja dengan Gambar
Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk
keperluan ini, HTML menyediakan tag <img> yang didukung dengan sejumlah atribut.
8. Menggunakan Link

Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen; kita dapat
menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink merupakan teks yang
memungkinkan kita untuk melakukan navigasi dari satu halaman ke halaman lainnya.
 Menciptakan Link
HTML menyediakan tag <a> (atau disebut anchor) untuk mendefinisikan sebuah link. Dalam
implementasinya, pembuatan link memerlukan atribut href yang menyatakan lokasi tujuan.
Lokasi ini bisa berupa alamat lengkap (absolut) atau singkat (relatif).
Untuk mengetahui cara membuat dan mengaitkan dokumen, ikuti langkah-langkah berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
3. Simpan dokumen HTML dengan nama link1.html dan letakkan di lokasi direktori web.
4. Langkah selanjutnya, buat halaman kedua (link2.html) yang nantinya akan dikaitkan.
5. Simpan dengan nama link2.html.
6. Untuk menguji hasilnya, buka browser dan arahkan ke alamat link1.html.
7. Klik link yang ada secara bergantian.

 Atribut Link
Elemen anchor menyediakan sejumlah atribut guna mendukung fungsionalitasnya, dua
di antaranya yang kerap digunakan adalah target dan title. Atribut target digunakan untuk
mengatur apakah link akan di buka di window yang sama (default) atau di window (atau tab)
baru. Di sisi lain, title berfungsi untuk menampilkan teks manakala kursor mouse berada di
atas link.

Link Internal
Elemen anchor juga memungkinkan kita untuk melakukan navigasi di dalam satu
dokumen (layaknya bookmark). Untuk mengimplementasikan hal ini, kita memerlukan atribut
id.
Langkah pertama untuk mengimplementasikan link internal adalah dengan
mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah berikutnya adalah
menetapkan nilai atribut id di blok yang akan dituju, di mana nilainya sama dengan href
namun tanpa prefiks #. Perlu diperhatikan, nilai atribut id tidak boleh sama atau harus unik di
dalam lingkupnya.
 Link Email
Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk menunjuk ke
suatu alamat email. Adapun dalam implementasinya, kita tinggal mengubah alamat URL
dengan alamat email—yang terlebih dahulu diberi prefiks mailto.

Link Gambar
Link tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa gambar.
Langkah pembuatan link gambar pun sangat sederhana, cukup mengapit tag <img> di antara tag
<a>.
9. Tabel
Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris
dan kolom. Perpotongan baris dan kolom di dalam tabel disebut sebagai sel.
Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan data di
dalam tabel secara atraktif. Artinya, tak hanya sebatas pada data tabular saja, namun juga
mengizinkan kita melakukan pemformatan.

Pada prinsipnya, pembuatan tabel sangat sederhana sekali, hanya masalah pengorganisasian.
Semua tabel harus diawali dengan tag <table>, kemudian ada tiga tag dasar yang
mengikutinya, meliputi:
 Tag <th> atau table heading yang berfungsi mendefinisikan header.
 Tag <tr> atau table row yang berfungsi mendefinisikan baris.
 Tag <td> atau table data yang berfungsi mendefinisikan sel.
Struktur pembentuk tabel dapat dilihat seperti pada Gambar 15.

Pemformatan Tabel
Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat
visualisasi tabel. Tiga atribut pertama yang sering digunakan adalah align (untuk mengatur
posisi), cellspacing (untuk mengatur spasi antarsel) dan cellpadding (untuk
mengatur spasi antara border sel dengan isinya).Atribut lain yang juga cukup penting adalah
width (untuk menentukan lebar tabel atau sel).Perhatikan, pengaturan lebar sel tidak perlu
dilakukan untuk semua baris, tetapi cukup salah satu saja. Bagaimanapun, lebar sel akan
selalu sama antara satu dengan lainnya.
Desain Tabel
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris
ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan penggabungan (merge)
sel. Dalam konteks elemen tabel, penggabungan sel dapat dilakukan berdasar baris
(rowspan) atau kolom (colspan).
Fitur lain yang ada pada tabel adalah pengelompokan sel berdasarkan kolom maupun baris.
Untuk pengelompokan kolom menggunakan elemen COLGROUP sedangkan pada baris
memanfaatkan TBODY.
E. LATIHAN
2.1. Latihan 1
Sorce Code
<!DOCTYPE html>
<html lang="en">
<head>

<title>Ini judul dokumen</title>
</head>

<body>
ini adalah teks di body
</body>
</html>
Printscreen
Penjelasan
Dalam penulisan bahasa pemrograman web Hyper Text Markup Language
(HTML) harus dimulai dengan menggunakan tag <html> .... </html>. Dalam
bahasa HTML terdapat dua bagian utama yaitu head dan body yang pada
penulisan HTML ditulis dengan menggunakan tag
<head> .... </head>
<body> .... </body>
Dalam bagian head dapat menuliskan judul halaman yang kita buat dengan
menggunakan tag <title> .... </title>. Pada penulisan title pada page di atas
menggunakan penulisan judul
<title>Ini judul dokumen</title>
Sehingga ketika halaman tersebut dijalankan di web browser dengan
menggunakan localhost maka judul halam yang akan terlihat dalam browser
adalah Ini judul dokumen.
Dalam bagian body dapat dituliskan kata atau kalimat atau elemen-elemen lain
yang dapat dibuat dalam bagian body html. Dalam page yang telah dibuat di atas
bagian body ditulis dengan
<body>Ini adalah teks di body</body>
Sehingga ketika dijalankan pada web browser akan menampilkan kalimat berupa
text yaitu Ini adalah teks di body.
2.2. Latihan 2
Source Code
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Printscreen
Penjelasan
Dalam HTML terdapat elemen pembuatan heading yang dapat digunakan dalam
bagian body html. Heading dideklarasikan dengan menggunakan tag <hn> ....
</hn> dimana n adalah bilangan 1 hingga 6 yang menunjukkan ukuran heading
dan (...) dapat diisi dengan teks. Heading 1 (h1) memiliki ukuran yang paling
besar jika dibandingkan dengan heading yang lain sedangkan heading yang
terkecil yaitu heading 6 (h6).
2.3. Latihan 3
Source Code
<body>
<h1 align="right">Heading 1</h1>
<h2 align="left">Heading 2</h2>
<h3 align="center">Heading 3</h3>
</body>
Printscreen

Penjelasan
Dalam pembuatan halaman di atas untuk mengatur posisi Heading menjadi rata
kanan, rata kiri, dan rata tengah menggunakan
<h1 align = "right">Heading 1</h1>
<h2 align = "left">Heading 2</h2>
<h3 align = "center">Heading 3</h3>
Sehingga untuk heading 1 (h1) menggunakan align right sehingga heading text
Heading 1 akan rata kanan. Sedangkan untuk heading 2 (h2) menggunakan align
left sehingga heading text Heading 2 akan rata kiri. Serta untuk heading 3 (h3)
karena menggunakan align center maka heading text Heading 3 akan rata tengah.
2.4. Latihan 4
Source Code
<body>
<p>
Ini Paragraf Pertama
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do euismod tempor incididunt ut labore et dolore
magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
nisi ut aliquip es ea commodo consequat.
<p>
Ini Pargraf Ketiga
</body>
Printscreen
Penjelasan
Dalam halaman diatas dibuat tiga paragraf dengan menggunakan html. Setiap
paragraf harus dimulai dengan memberi tag <p> sedangkan di akhir paragraf tidak
diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak

didefinisikan mempunyai tag akhir. Setiap pergantian paragraf harus dimulai
dengan tag <p> kembali seperti pada pembuatan paragraf pada halaman di atas.
Setiap pembuatan paragraf baru selalu diawali dengan menggunakan tag <p>
seperti berikut ini.
<p>
Ini paragraf pertama
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
<p>
Ini paragraf Ketiga
Setiap akan membuat paragraf baru maka selalu menuliskan tag <p> untuk
menandakan pembuatan paragraf.
2.5. Latihan 5
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Paragraf</title>
</head>
<body>
<p align="center">
Ini Pargraf rata tengah
<p align="justify">
Lorem ipsum dolor sit amet , consectetur adipisicing
elit,sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<p align="right">
ini paragraf rata kanan
</body>
</html>
Printscreen

Penjelasan
Penggunaan pengaturan posisi text juga diterapkan dalam mengatur posisi atau
alignment dari sebuah paragraf. Sebelumnya untuk membuat sebuah paragraf
harus menuliskan tag <p> dan untuk mengatur alignment paragraf maka dapat
diatur alignnya dengan menuliskannya pada tag <p> tersebut. Pada penulisan page
di atas menggunakan tag <p align=””> ... seperti berikut
<p align = "center"> Ini paragraf rata tengah
<p> Lorem ipsum ... commodo consequat.
<p align = "right"> Ini paragraf rata kanan
Sehingga ketika dijalankan maka paragraf yang dibuat akan mengikuti
alignment yang diterapkan.
2.6. Latihan 6
Source Code
<body>
Membuat baris baru <br />
Membuat baris baru <br />
<p>

Loream ipsum dolor sit amet, consectetur adipisicing
elit,
<br />
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
<br />
ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
</body>
Printscreen

Penjelasan
Untuk mengganti baris dalam bahasa HTML dapat dengan menggunakan tag
<br>. Karena tag <br> tidak harus didefinisikan elemennya maka tag akhirnya
tidak harus disertakan dalam bahasa HTML cukup dengan memberikan / (slash)
setelah tag <br> sehingga menjadi <br/>.
2.7. Latihan 7
Source Code
<body>
<b>menggunakan tag <b>...</b></b><br />
<strong>menggunakan tag
<strong>...</strong></strong>
<br />
<i>menggunakan tag <i>...</i></i><br />
<em>menggunakan tag <em>...</em></em><br />
<u>menggunakan tag <u>...</u></u><br />
<strike>menggunakan tag
<strike>...</strike></strike><br />
</body>
Printscreen
Penjelasan
HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk
mengatur font, seperti huruf tebal, huruf miring, garis bawah, dan masih banyak

lagi dengan menggunakan tag. Pada halaman di atas terdapat 6 macam pengaturan
font yaitu:
a. Tag <b> ... </b>, berfungsi mengatur agar font dicetak tebal.
b. Tag <strong> ... </strong>, berfungsi mengatur agar font dicetak tebal dan
lebih tebal jika dibandingkan dengan tag <b>.
c. Tag <i> ... </i>, berfungsi mengatur agar font dicetak miring.
d. Tag <em> ... </em>, berfungsi mengatur agar font dicetak miring dan lebih
miring jika dibandingkan dengan tag <i>.
e. Tag <u> ... </u>, berfungsi mengatur agar font dicetak dengan garis bawah.
f. Tag <strike> ... </strike>, berfungsi mengatur agar font dicetak tercoret.
Karena karakter < dan > dibaca langsung oleh bahasa HTML dengan awal dan
akhir dari sebuah tag, maka perlu ditambahkan dengan “<” untuk karakter <
dan “&gt” untuk karakter >. Sehingga ketika dijalankan < serta > tidak
dianggap sebuah tag oleh bahasa HTML.
2.8. Latihan 8
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo karakter khusus</title>
</head>
<body>
£ Pound <br />
€ Euro <br />
&copy: Copyright <br />
&reg: Registered <br />
™ Trademark <br />
</body>
</html>
Printscreen

Penjelasan
Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan
memanfaatkan nama entitas dari karakter khusus tersebut. Sama halnya dengan
karakter < dan > yang memiliki entitas > serta <, karakter khusus juga
memiliki entitasnya masing-masing. Pada halaman yang telah dibuat diatas,
entitas dari karakter khusus di atas adalah:
a. Pound  &pound
b. Euro  &euro
c. Copyright  &copy
d. Registered  &reg
e. Trademark  &trade
2.9. Latihan 9
Source Code
<body>
Membuat Garis horizontal <hr />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
<br />
magna aliqua.
<br />
ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
<hr />
</body>
Printscreen
Penjelasan
Untuk membuat sebuah garis horizontal dalam bahasa HTML dapat dibuat
dengan menggunakan tag <hr>. Sama dengan tag <br>, karena tag <hr> tidak
harus didefinisikan elemennya maka tag akhirnya tidak harus disertakan dalam
bahasa HTML cukup dengan memberikan / (slash) setelah tag <hr> sehingga

menjadi <hr/>. Sehingga untuk membuat sebuah garis horizontal dalam bahasa
HTML dengan menyisipkan tag <hr/>.
2.10. Latihan 10
Source Code
<body>
Ordered List
<ol>
<li>satu</li>
<li>dua</li>
</ol>
<ht />
unordered list
<ul>
<li>satu</li>
<li>dua</li>
</ul>
<hr />
Definition List
<dl>
<dt>satu</dt>
<dd>satu satu</dd>
<dt>dua</dt>
<dd>dua dua</dd>
</dl>
</body>
Printscreen

Penjelasan
HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered),
dan definisi (definition). Jika dibuat list dalam bentuk Ordered List dan Unordered
list membutuhkan list item untuk menampilkan list yang digunakan dengan
menggunakan tag <li>. Perbedaan unordered dan ordered list terletak pada
pengurutan listnya. Pada ordered list, list yang diinputkan akan terurut sedangkan
pada unordered list tidak terurut. Tag yang digunakan dalam ordered list adalah
tag <ol> sedangkan untuk unordered list menggunakan tag <ul>. Sedangkan
Definition list, list akan ditampilkan dengan menyediakan keterangan (definition)
pada setiap list.
2.11. Latihan 11
Source Code

<body bgcolor="aqua">
<h3 align="center">Heading 3</h3>
<font color="red">Font berwarna merah</font><br />
<font color="#FF0000">
Font berwarna merah (menggunakan nilai heksa)</font>
</body>
Printscreen
Penjelasan
Untuk memberikan warna background dapat dilakukan pada HTML pada atribut
bgcolor di tag <body>. Dalam halaman yang dibuat di atas menggunakan bgcolor
aqua. Tidak hanya atribut background saja yang dapat dilakukan pewarnaan,
namun atribut-atribut lain seperti font dapat dilakukan pewarnaan. Aturan
pewarnaan menggunakan heksadesimal warna RGB. Sehingga untuk membuat
font berwarna merah maka font colornya dapat diset menjadi #FF0000.
2.12. Latihan 12
Source Code

<body>
<p>

<img src="haha.jpg" width="20%" />
lorem ipsum dolor sit amet , consectetur adipisicing
elit,
magna aliqua.
<hr />
<p>

<img src="http://localhost/pratikum1/haha.jpg"
width="20%" align="right" />
Lorem ipsum dolor sit amet,consectetur adipisicing elit,
magna aliqua.
</body>
Printscreen
Penjelasan
Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML.
Untuk keperluan ini, HTML menyediakan tag <img> yang didukung dengan
sejumlah atribut untuk pengolahan gambar dalam sebuah halaman web. Ada dua
macam penyisipan gambar dalam sebuah halaman web yaitu menggunakan path
relative dan menggunakan path absolute. Perbedaan path relative dan path
absolute terdapat pada letak direktori gambar. Ketika menggunakan path relative
maka nama gambar yang diinputkan harus ada dalam direktori page yang telah
dibuat sedangkan untuk absolute path lokasi gambarnya jelas karena absolute path
menunjukkan letak direktori gambar tersebut. Dalam HTML juga dilengkapi

dengan elemen-elemen untuk mengolah gambar seperti mengatur lebar dan tinggi
gambar serta dapat mengatur border pada gambar yang telah disisipkan dalam
suatu halaman web tertentu.
2.13. Latihan 13
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link</title>
</head>
<body>
<a href-"link2.html">klik disini</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
untuk kembali ke halaman pertama
<a href-"linkl.html">klik disini</a>
</body>
</html>
Printscreen
Penjelasan

Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen; kita dapat
menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink merupakan teks
yang memungkinkan kita untuk melakukan navigasi dari satu halaman ke halaman
lainnya. Di dalam HTML menyediakan tag <a> (atau disebut anchor) untuk
mendefinisikan sebuah link. Dalam implementasinya, pembuatan link
memerlukan atribut href yang menyatakan lokasi tujuan. Lokasi ini bisa berupa
alamat lengkap (absolut) atau singkat (relatif) seperti yang telah dijelaskan dalam
saat penyisipan gambar.
Seperti yang telah dijelaskan sebelumnya untuk membuat sebuah link ke suatu
halaman web digunakan tag <a href=”lokasi halaman web link”> Teks </a>. Jika
digunakan nama relatif maka nama web yang dituju dapat kita tuliskan secara
langsung namun ketika akan menggunakan absolute path maka alamat halaman
yang dituju harus lengkap sehingga dalam melakukan link dapat berpindah dari
halaman satu ke halaman lain yang dituju.
2.14. Latihan 14
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Atribut Link</title>
</head>
<body>
<a href-"link2.html" target-"_blank" title-"Title
link">klik disini</a>
</body>
</html>
Printscreen
Penjelasan
Elemen anchor menyediakan sejumlah atribut guna mendukung
fungsionalitasnya, dua di antaranya yang kerap digunakan adalah target dan title.
Atribut target digunakan untuk mengatur apakah link akan di buka di window
yang sama (default) atau di window (atau tab) baru. Di sisi lain, title berfungsi

untuk menampilkan teks manakala kursor mouse berada di atas link. Karena
dalam halaman web di atas menggunakan target blank maka ketika diklik link
yang telah dibuat maka akan membukanya pada tab baru dalam satu windows
seperti pada gambar di atas.
2.15. Latihan 15
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link Internal</title>
</head>
<body>
menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></li>
<li><a href="#pembahassan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsicing elit,
magna aliqua.
Ut enim ad minim venim, quis nostrud exercitation ullamco
laboris
nisi ut aliquin ex ae commodo consequat.
<h3 id="pembahasan">Pembahasan</h3>
<p>
magna aliqua.
laboris
<h3 id="kesimpulan">Kesimpulan</h3>
<p>
magna aliqua.
laboris
</body>
</html>

Printscreen
Penjelasan
Langkah pertamaa yang digunakan dalam membuat sebuah link internal adalah
dengan mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah
berikutnya adalah menetapkan nilai atribut id di blok yang akan dituju, di mana
nilainya sama dengan href namun tanpa prefiks #. Contohnya seperti berikut:
<li><a href="#pendahuluan">Pendahuluan</a></li>
...........
<h3 id="pendahuluan">Pendahuluan</h3>
Maka atribut a href yang diberikan prefix #pendahuluan akan melakukan link
terhadap target yang dituju oleh atribut link tersebut ke id pendahuluan.
2.16. Latihan 16
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link Email</title>
</head>
<body>
<a href="mailto;didik@um.ac.id">didik at um dot ac dot
id</a>
</body>
</html>
Printscreen

Penjelasan
Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk
menunjuk ke suatu alamat email. Adapun dalam implementasinya, untuk
membuat link pada sebuah e-mail hanya tinggal mengubah alamat URL dengan
alamat email yang harus terlebih dahulu diberi prefiks mailto. Dalam halaman di
atas atribut link yang digunakan adalah sebagai berikut:
<a href="mailto:didik@um.ac.id">didik at um dot ac dot id</a>
Atribut link di atas menunjukkan link ke alamat e-mail didik@um.ac.id
dimana teks yang tertulis pada halaman web tersebut adalah didik at um dot ac dot
id.
2.17. Latihan 17
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link Gambar</title>
</head>
<body>
<a href="http://google.co.id"title-"Search with Googlr">
<img src="haha.jpg"border="0" />
</body>
</html>
Printscreen
Penjelasan

Link tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa
gambar. Langkah pembuatan link gambar pun sangat sederhana, cukup mengapit
tag <img> di antara tag <a> seperti pada halaman web di atas.
<a href="http://google.co.id"title"Search with Google">
<img src="Google.jpg" border="0" width="200" heighth="250"/>
Langkah yang dilakukan yaitu membuat sebuah link ke google.co.id dengan
menggunakan title Search with Google dan kemudian menyisipkan sebuah
gambar untuk disisipi link ke google.co.id tersebut.
2.18. Latihan 18
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Tabel</title>
</head>
<body>
<table border=1>
<caption>Label dari table</caption>

<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>

<tr>
<td>1</td>
<td>gisra</td>
<td>banten dalam 44a</td>
</tr>
Printscreen
Penjelasan
Dalam HTML juga disediakan layanan pembuatan sebuah tabel untuk keperluan
mempresentasikan sebuah data dalam bentuk tabel. Dalam pembuatan tabel

menggunakan tag <table> dimana juga menambahkan caption dengan
menambahkan tag <caption> pada table. Dalam pengisian data tabular dalam tabel
terdapat beberapa tag dasar sebagai berikut:
 Tag <th> atau table heading yang berfungsi mendefinisikan header dari tabel.
 Tag <tr> atau table row yang berfungsi mendefinisikan baris.
 Tag <td> atau table data yang berfungsi mendefinisikan sel.
2.19. Latihan 19
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo spasi Tabel</title>
</head>
<body>
<table border=1 align="center" cellspacing=0
cellpadding=10>

<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>gisra</td>
</tr>
</table>
</body>
Printscreen
Penjelasan
Dalam HTML juga disediakan layanan pemformatan atribut tabel sehingga
dapat dilakukan pemformatan pada tabel. Atribut utama dalam pemformatan tabel

yaitu align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel)
dan cellpadding (untuk mengatur spasi antara border sel dengan isinya).
2.20. Latihan 20
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo ukuran Tabel</title>
</head>
<body>
cellpadding=5>
<tr>

<th width="50">No</th>
<th width="150">Nama</th>
<th width="200">Alamat</th>
</tr>
<tr>
<td>1</td>
<td>gisra</td>
</tr>
</table>
</body>
</html>
Printscreen
Penjelasan
Selain dilakukan pemformatan pada tiga atribut utama sebelumnya juga
terdapat satu pemformatan atribut tabel yaitu atribut width atau lebar dari sebuah
tabel yang dideklarasikan pada tabelheader <th> dari sebuah header pada suatu
halaman web. Pengaturan lebar sel tidak perlu dilakukan untuk semua baris, tetapi
cukup salah satu saja. Bagaimanapun, lebar sel akan selalu sama antara satu
dengan lainnya.

2.21. Latihan 21
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Span/Marge</title>
</head>
<body>
cellpadding=5>
<tr>
<th width="50">No</th>

<th width="350" colspan=2>Span Nama dan Almat</th>
</tr>
<tr>

<td rowspan=2>Span baris 1 dan 2</td>
<td>gisra</td>
</tr>

<tr>
<td>gisra</td>
</tr>
</table>
</body>
</html>
Printscreen
Penjelasan
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama
dalam setiap baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu
melakukan penggabungan (merge) sel. Dalam konteks elemen tabel,
penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan).
Fitur lain yang ada pada tabel adalah pengelompokan sel berdasarkan kolom
maupun baris. Untuk pengelompokan kolom menggunakan elemen COLGROUP
sedangkan pada baris memanfaatkan TBODY.

F. STUDI KASUS
Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Di mana
terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis tepi (border), dan
halaman utama dengan latar belakang gambar sembarang.
Source Code
IDENTITAS
<!DOCTYPE html>
<html lang="en">

<head>

<title>STUDI KASUS</title>
</head>
<body>


<body background="merah.jpg">


<table border=0 align="center" cellspacing=0 cellpadding=0>
<tr> 


<th colspan="4"height="50"background="merah2.jpg">

<font color="white"><h1>GISRA RAHMADHITA</h1></font></th></tr>

<th width="200" height="50"bgcolor="purple">


<h3 align="center"><a href="foto.html">Foto</h3></a></th>

<th width="200" height="50"bgcolor="red">

<h3 align="center"><a href="identitas.html">Identitas</h3></a></th>

<th width="200" height="50"bgcolor="blue">

<h3 align="center"><a href="corat-coret.html">Corat-Coret</h3></a></th>

<th width="200" height="50"bgcolor="green">

<h3 align="center"><a href="sosmed.html">Social Media</h3></a></th>
</tr>
<tr> 


<th colspan="4"width="800"height="500"bgcolor="pink"><h2>
Nama : GISRA RAHMADHITA</br> 
NIM : 130533608259</br> 
TTL : Padang, 21 Agustus 1994</br> 
Alamat : Komp.Villa Permata Putri Edelwis No.11 </br>

Prodi : S1 PTI 2013 Offering B </br> 
No. Hp : 085791929285 </br> 
<ol> 
Riwayat Pendidikan : </br> 
<li>TK Telkom Shandy Putra (2000-2001) </li> 
<li>SDN 27 Sawahan Dalam (2001-2007) </li> 
<li>SMPN 9 Padang (2007-2010) </li> 
<li>SMA Semen Padang (2010-2013) </li> 
<li>Universitas Negeri Malang (2013-sekarang) </li> 
</h2></th></tr>
</table>
</body>
</html>
CORET-CORET
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<body background="1.jpg">

<th colspan="4"height="50"background="biru2.jpg">
<h3><font color="white"><a href="foto.html">Foto</font></h3></a></th>
<h3><a href="identitas.html">Identitas</h3></a></th>
<h3><a href="corat-coret.html">Corat-Coret</h3></a></th>
<h3><a href="sosmed.html">Social Media</h3></a></th>
</tr> 

<th colspan="4"width="800"height="500"bgcolor="sky blue"><h2>

<p align="center">
Pada saat seperti ini izinkan aku mempertanyakan,</br> 
Dimana engkau letakkan aku? </br> 
Adakah aku seberharga cincin </br> 
yang melingkar manis di jarimu? </br> 
Ataukah aku senyaman sepatu tuamu, </br> 
yang tak terasa lagi bila dipakai? </br> 
Akankah kau pertahankan aku, </br> 
selayaknya nyawamu sendiri? </br> 
Ataukah namaku hanya akan melintas sekilas </br> 
di detik-detik terakhirmu? </br> 
Untuk kemudian meyublim seperti arwah tersedot surga </br> 
Karena itulah aku ingin hidup nyata </br> 
</br></p>
<p align="right"> 
<em>#dikutip dari Novel Supernova </em></br>
<em>GISRA RAHMADHITA </em></br>
</p></th></tr></table></body></html>
SOSMED
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<body background="hijau.jpg">

<th colspan="4"height="50"background="hijau2.jpg">
<h3 align="center"><a href="foto.html">Foto</h3></a></th>
<h3 align="center"><a href="identitas.html">Identitas</h3></a></th>
<h3 align="center"><a href="corat-coret.html">Corat-Coret</h3></a></th>
<h3 align="center"><a href="sosmed.html">Social Media</h3></a></th>
</tr>

<th colspan="4"width="800"height="500"bgcolor="blue sky">
<ul> 

<h2><li><a href="www.facebook.com/GisraRahmadhita">Facebook</h2></li></a>

<h2><li><a href="www.twitter.com/GisraRahmadhita">Twitter</h2></li></a>
</ul></th></tr>
</table>
</body>
</html>
FOTO
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<body background="ungu.jpg">

<tr> 


<th colspan="4"height="50"background="ungu2.jpg">

<tr> 

<th width="200" height="50"bgcolor="purple"><h3 align="center">
<font color="white"><a href="foto.html">Foto</font></h3></a></th>

<th width="200" height="50"bgcolor="red"><h3 align="center">
<a href="identitas.html">Identitas</h3></a></th>

<th width="200" height="50"bgcolor="blue"><h3 align="center">
<a href="corat-coret.html">Corat-Coret</h3></a></th>

<th width="200" height="50"bgcolor="green"><h3 align="center">

<a href="sosmed.html">Social Media</h3></a></th>
</tr>


<tr> 


<th colspan="4"width="800"height="500"bgcolor="violet">

<img src ="dita.jpg"></th></tr>
</table>
</body>
</html>

Penjelasan
 Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk
keperluan ini, HTML menyediakan tag <img> yang didukung dengan sejumlah atribut
untuk pengolahan gambar dalam sebuah halaman web. Ada dua macam penyisipan
gambar dalam sebuah halaman web yaitu menggunakan path relative dan menggunakan
path absolute. Perbedaan path relative dan path absolute terdapat pada letak direktori
gambar. Ketika menggunakan path relative maka nama gambar yang diinputkan harus

ada dalam direktori page yang telah dibuat sedangkan untuk absolute path lokasi
gambarnya jelas karena absolute path menunjukkan letak direktori gambar tersebut.
Dalam HTML juga dilengkapi dengan elemen-elemen untuk mengolah gambar seperti
mengatur lebar dan tinggi gambar serta dapat mengatur border pada gambar yang telah
disisipkan dalam suatu halaman web tertentu.
 Untuk memberikan warna background dapat dilakukan pada HTML pada atribut bgcolor
di tag <body>. Dalam halaman yang dibuat di atas menggunakan bgcolor
pink,biru,hijau,ungu. Tidak hanya atribut background saja yang dapat dilakukan
pewarnaan, namun atribut-atribut lain seperti font dapat dilakukan pewarnaan. Aturan
pewarnaan menggunakan heksadesimal warna RGB.
 Penggunaan pengaturan posisi text juga diterapkan dalam mengatur posisi atau alignment
dari sebuah paragraf. Sebelumnya untuk membuat sebuah paragraf harus menuliskan tag
<p> dan untuk mengatur alignment paragraf maka dapat diatur alignnya dengan
menuliskannya pada tag <p> tersebut. Pada penulisan page di atas menggunakan tag <p
align=””> ... seperti berikut
o <p align = "center"> Ini paragraf rata tengah
o <p> Pada saat seperti ini izinkan aku mempertanyakan.
o <p align = "right"> Ini paragraf rata kanan
o <p>#dikutip dari Novel Supernova
o Sehingga ketika dijalankan maka paragraf yang dibuat akan mengikuti
alignment yang diterapkan.
G. KESIMPULAN
 HTML (HyperText Markup Language) adalah salah satu dari beberapa bahasa
pemrograman web yang menyediakan layanan dalam pengedit halaman web.
 Dalam HTML terdapat tag-tag yang mempunyai fungsi-fungsi tersendiri sesuai
dengan keperluan.
 Dalam penulisan bahasa HTML dibagi menjadi 2 bagian yaitu bagian head yang
mempunyai tag <head> ... </head> dan body yang mempunyai tag </body>.
 Untuk membuat lay out sebuah halaman dapat menggunakan table namun seiring
dengan adanya bahasa CSS (Cascading Style Sheet) pembuatan layout dengan table
sebaiknya dihindari.
 Setiap dokumen HTML harus diawali dengan tag <html>dan diakhiri dengan
komplemennya, yakni tag</html> tag. Dokumen HTML juga menyertakan tiga
pasang tag.

 Kebutuhan minimal yang diperlukan xampp/WampServer, web browser dan editor
text
 Struktur dokumen HTML terdiri dari 2 bagian : header dan body
 HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk
pemformatan teks (heading, paragraph, fontase, karakter khusus)
 Di HTML, garis horizontal direpresentasikan melalui tag <hr />.
 HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered),
dan definisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakan
melalui tag <li> berpasangan—yang merepresentasikan item-item list.
 Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag
<body>. Atribut ini dapat diisi dengan nama warna—misalnya red—atau kode
heksadesimal—misalnya #FFFFFF.
 Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML.
Untuk keperluan ini, HTML menyediakan tag <img> yang didukung dengan
sejumlah atribut.
 HTML menyediakan tag <a> (atau disebut anchor) untuk mendefinisikan
sebuah link. Dalam implementasinya, pembuatan link memerlukan atribut href
yang menyatakan lokasi tujuan. Lokasi ini bisa berupa alamat lengkap (absolut)
atau singkat (relatif).
 Pada prinsipnya, pembuatan tabel sangat sederhana sekali, hanya masalah
pengorganisasian. Semua tabel harus diawali dengan tag <table>, kemudian ada tiga
tag dasar yang mengikutinya, meliputi:
 Tag <th> atau table heading yang berfungsi mendefinisikan header.
 Tag <tr> atau table row yang berfungsi mendefinisikan baris.
 Tag <td> atau table data yang berfungsi mendefinisikan sel.
H. DAFTAR PUSTAKA
 Modul I (HTML) Praktikum Pemrograman Berbasis WEB. Pendidikan Teknik
Informatika — Teknik Elektro — Universitas Negeri Malang — 2015.

Laporan pratikum 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Laporan pratikum 1

Similar to Laporan pratikum 1 (20)

More from rahmi wahyuni

More from rahmi wahyuni (16)

Recently uploaded

Recently uploaded (10)

Laporan pratikum 1