LAPORAN PRAKTIKUM SIG BERBASIS WEB

HTML (Hyper Text Markup Language)

Dosen Pengampu: Hidayat Panuntun, S.T., M.Eng., D.Sc.

Disusun Oleh:
PUPUT PURWANTI NINGSIH
17/415778/SV/13643

PROGRAM STUDI DIII TEKNIK GEOMATIKA

DEPARTEMEN TEKNOLOGI KEBUMIAN
SEKOLAH VOKASI
UNIVERSITAS GADJAH MADA
YOGYAKARTA
2019
I. Pendahuluan
Dalam dunia industri yang maju sangat pesat ini, tidak menutup
kemungkinan dari hasil karya sekumpulan manusia yang mempuyai suatu tujuan.
Di masa yang sudah canggih ini kita sering menggunakan Web (website atau situs)
dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks,
data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari
semuanya, baik yang bersifat statis maupun dinamisyang membentuk satu
rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan
dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi
website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik
website. Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi
informasinya interaktif dua arah berasal dari pemilik serta pengguna website.
Contoh website statis adalah berisi profil perusahaan, sedangkan website dinamis
adalah seperti Friendster, Multiply, dll. Dalam sisi pengembangannya, website
statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa
diupdate oleh pengguna maupun pemilik.
Website ini digunakan untuk mencari tahu informasi yang kita butuhkan,
bahkan kita bisa berkomunikasi dengan orang lain pun lewat jejaring sosial. Di
dalam kita berselancar didunia maya kita memerlukan browser untuk mencari
informasi apa yang kita inginkan didunia maya. Lewat browser terdapat
script – script yang di mengerti oleh computer.

II. Dasar Teori

HTML merupakan singkatan dari Hypertext Markup Language. HTML
digunakan untuk membangun halaman web. HTML digunakan untuk melakukan
mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan
untuk menentukan format atau style dari teks yang ditandai halaman web
dibangun oleh kode-kode HTML.
HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML
disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web dengan
HTML dapat dilakukam dengan mudah dan cepat. Dokumen web dapat tersaji
dengan cepat ke banyak pembaca diseluruh dunia sekaligus. HTML mudah
melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar,
suara, animasi maupun video.
 HTML berupa kode-kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang
merupakan file HTML dapat dibuka dengan menggunakan web browser seperti
Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh
aplikasi pembuka email ataupun dari PDA dan program lainyang memiliki
kemampuan browser .
Hypertext Markup Language merupakan standar bahasa yang di gunakan
untuk menampilkan document web, yang bisa anda lakukan dengan HTML
yaitu :
1. Mengontrol tampilan dari web page dan kontennya.
2. Mempublikasikan document secara online sehingga bisa di akses dari seluruh
dunia.
3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
4. Menambahkan object-object seperti image, audio, video dan juga java applet
dalam document HTML

Fungsi HTML
HTML seperti yang dijelaskan sebelumnya merupakan bahasa pemrograman
berbahasa markup yang digunakan untuk menampilkan halaman website melalui
browser. Namun tentu bukan hal iu saja yang dapat dilakukan HTML. Berikut ini
fungsi dari HTML:
1. Membuat, mendesain, dan mengontrol tampilan dari web page (Halaman Web)
dan isinya.
2. Mempublikasikan document secara online sehingga bisa di akses, dilihat dan
ditampilkan dari dan ke seluruh dunia.3.
3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
4. Menambahkan object-object seperti image, audio, video dan juga java applet
(aplikasi javaseperti java game dll) dalam document HTML.
5. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
 Berikut adalah struktur HTML :
A. Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Contonya untuk menampilkan judul dokumen HTML pada web
browser digunakan elemen title, dimana:<title> ini adalah tag pembuka
judul dokumen HTML
B. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh
<body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang
terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/ " setelah
karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen
HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
C. Atribut
Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang
terdiri atas nama dan nilai.

III. Tujuan
1. Memahami dan mengetahui fungsi HTML pada pemograman berbasis web
2. Memahami dan mengetahui struktur HTML pada pemograman berbasis web
3. Dapat membuat dokumen HTML dengan menggunakan permainan warna dan
berbagai jenis tampilan teks.

IV. Alat dan Bahan

1. Personal Computer (PC)
2. Notepad++
3. Browser
V. Langkah Kerja
1. Buka Notepad++
2. Buatlah script pada notepad++ sesuai dokumen html yang akan dibuat seperti
berikut ini:
<html>
<head>
<title>Puput Purwanti Ningsih</title>
</head>
<body style="background-color:lightgray;">
<center>
<h1>Biodata Pribadi</h1>
<img src="Puput Purwanti.jpg" width="151" height="227">
</center>
<p
style="text-align:justify;font-family:consolas;font-size:12;background-color:l
ightblue;text-indent:0.5in;">Nama saya adalah <b><i>Puput Purwanti
Ningsih</b></i>. Saya adalah anak ke <b><i>2</b></i> dari
<b><i>3</b></i> bersaudara. Nama Ayah saya adalah <b><i>Agus
Purwanto</b></i> sedangkan Ibu saya bernama <b><i>Marsiyah</b></i>.
Saya lahir di <b><i>Bantul</b></i> pada tanggal <b><i>7</b></i> bulan
<b><i>Januari</b></i> tahun <b><i>1999</b></i>. Saat ini saya tinggal di
<b><i>Tamanan Kulon, Tamanan, Banguntapan, Bantul</b></i>. Hobi saya
adalah <b><i>membaca dan mendaki gunung</b></i>. Sekarang saya sedang
menempuh pendidikan di <b><i>Universitas Gadjah Mada</b></i>. Jurusan
<b><i>Teknik Geomatika</b></i>. Kalau sudah lulus nanti, saya ingin
menjadi <b><i>seorang surveyor</b></i>.</p>
<div style="border-bottom:1px dashed;"></div>
<p
style="text-align:justify;font-family:Verdana;font-size:13;background-color:
Yellow;">Saya lulus SD tahun <b><i>2011</b></i>. Kemudian setelah lulus
dilanjutkan dengan sekolah di <b><i>SMP Negeri 1 Bangntapan</b></i>
dan lulus pada tahun <b><i>2014</b></i>. Saya sekolah di <b><i>SMK
Negeri 2 Yogyakarta</b></i> dan lulus pada tahun <b><i>2017</b></i>.
Kemudian melanjutkan kuliah di <b><i>Universitas Gadjah Mada</b></i>
 pada tahun <b><i>2017</b></i>. Saya berharap bisa lulus dari
<b><i>Universitas Gadjah Mada</b></i> pada tahun <b><i>2020</b></i>.
</body>
</html>
3. Jika sudah selesai simpan script dalam format .html
4. Untuk melihat script yang telah dibuat dalam bentuk halaman web buka
dengan menggunakan browser.

VI. Hasil dan Pembahasan

1. Tuliskan definisi tag yang digunakan dalam script HTML berikut:

Tag Deskripsi
<a> Tag untuk membuat hyperlink
<b> Tag untuk membut teks tebal
<br> Tag untuk ganti baris
<del> Tag untuk membuat teks yang telah dihapus dari dokumen
<font> Mengubah gaya suatu huruf (jenis huruf, warna, ukuran)
<form> Tag untuk membuat sebuah form HTML untuk input
pengguna
<hr> Untuk membuat garis horizontal
<img> Tag untuk menampilkan sebuah gambar
<i> Tag yang digunakan untuk membuat teks miring
<li> Tag untuk membuat sebuah item daftar
<mark> Tag untuk membuat teks yang disorot/ditandai
<ol> Tag untuk membuat daftar dengan nomor (digunakan dengan
<li>)
<p> Tag untuk membuat paragraf
<q> Tag untuk membuat kutipan pendek
<small> Tag untuk membuat teks kecil
<style> Tag untuk membuat informasi style untuk dokumen
<u> Tag untuk membuat teks garis bawah
<ul> Tag untuk membuat daftar dengan selain nomor (digunakan
dengan <li>)
2. Hasil pembuatan halaman web yang berisi biodata pribadi

Pembahasan:
a. <html>...</html> baris paling atas dari setiap file html
b. <head>...</head> informasi umum dari setiap halaman web. Di dalamnya
terdapat <title>Puput Purwanti Ningsih</title> yang berarti judul
halaman web nya adalah Puput Purwanti Ningsih.

c. <body>...</body> settingan atribut untuk seluruh dokumen. Di dalam

body terdapat:
1) Background color untuk body menggunakan warna lightgray

2) Judul dari halaman web adalah Biodata Pribadi dan dibawahnya

terdapat foto dengan lebar 151 px dan tinggi 227 px. Judul dan foto
tersebut terletak center.
3) Terdapat dua paragraf di dalam body tersebut.
Paragraf 1 menggunakan rata kanan kiri, jenis huruf consolas, ukuran
font 12, background color lightblue, awal paragraf menjorok dengan
jarak 0.5 in. Pada informasi penting terdapat tag <b>...</b> dan
<i>...</i> yang artinya teks tebal dan miring. Berikut script dan
tampilan halaman webnya

4) Diantara paragraf 1 dan paragraf 2 terdapat garis horizontal

5) Paragraf 2 menggunakan rata kanan kiri, jenis huruf verdana, ukuran

font 13, bacground color yellow, awal paragraf menjorok dengan
jarak 0.5 in. Pada informasi penting terdapat tag <b>...</b> dan
<i>...</i> yang artinya teks tebal dan miring. Berikut script dan
tampilan halaman webnya
VII. Kesimpulan
1. HTML berfungsi untuk membuat, mendesain, dan mengontrol tampilan
dari web page (halaman web) dan isinya.
2. Struktur HTML yaitu element (header dan body), tag, dan atribut.
3. Membuat dokumen html dengan menggunakan permainan warna dan
berbagai jenis tampilan teks menggunakan tag dan atribut.