2

Perkembangan Teknologi Antarmuka Web

dan Pengenalan Dasar HTML

KODE MODUL
20201003-2-2.0
Modul Praktikum Desain Antarmuka Pengguna
PENYUSUN Program Studi Pendidikan Teknologi Informasi
Retno Indah Rokhmawati, S.Pd., M.Pd. Jurusan Sistem Informasi
Hanifah Muslim Az-Zahra S.Sn., M.Ds Fakultas Ilmu Komputer
Kharis Alfian Universitas Brawijaya
Nabila Leksana Putri © 2020
 “Niscaya manusia akan binasa, kecuali yang berilmu;
semua yang berilmu akan binasa, kecuali yang beramal;
semua yang beramal akan binasa, kecuali yang ikhlas.”
(Imam Al-Ghazali)

2
 Perkembangan Teknologi
Antarmuka Web

A. Pengembangan Antarmuka Lintas Platform

Dengan semakin berkembangnya teknologi pengembangan sebuah aplikasi dan
tersedianya berbagai macam platform baik dari segi perangkat lunak maupun perangkat
keras. Saat ini, untuk mengembangkan sebuah antarmuka dan aplikasi dapat
menggunakan satu kali penulisan kode dan menghasilkan beberapa keluaran kompilasi
ke dalam berbagai jenis ekstensi untuk dijalankan di platform tertentu. Aplikasi jenis
tersebut dikenal dengan sebutan Hybrid Application yang dikembangkan berdasarkan
web application.

Gambar 1 Ilustrasi Aplikasi Lintas Platform

(Sumber: http://codepolitan.com /apa-bedanya-aplikasi-native-hybrid-dan-web)

3
B. Perkembangan dan Sejarah Web
Gopher adalah sistem pengambilan informasi yang digunakan pada awal tahun 1990,
memberikan suatu metode penyampaian menu link ke file, sumber daya komputer dan
menu lainnya. Menu-menu ini bisa melintasi batas-batas dari komputer dan
menggunakan Internet untuk mengambil menu dari sistem lain. Sistem ini sangat
populer pada saat banyak universitas yang sedang mencari sistem yang dapat
memberikan informasi ke seluruh kampus dan organisasi besar yang mencari sistem
untuk memusatkan penyimpanan dan manajemen dokumen.

Gopher diciptakan oleh University of Minnesota. Pada bulan Februari 1993, mereka
mengumumkan akan menarik biaya lisensi penggunaan referensi implementasi server
Gopher. Akibatnya, banyak organisasi mulai mencari alternatif untuk Gopher.
Dewan Eropa untuk Riset Nuklir ( CERN ) di Swiss memiliki alternatif tersebut. Tim
Berners - Lee membuat suatu sistem informasi manajemen, di mana teks bisa berisi link
dan referensi ke dokumen lain yang memungkinkan pembaca untuk cepat melompat dari
satu dokumen ke dokumen. Dia telah menciptakan server untuk penerbitan dokumen
dengan corak ini (disebut hypertext) serta program untuk membacanya, yang dia sebut
WorldWideWeb. Perangkat lunak ini pertama kali dirilis pada tahun 1991. Dan kelak, akan
terjadi dua peristiwa menyebabkan popularitas sistem ini meledak dan akhirnya
menggantikan Gopher.

Pada tanggal 30 April 1993 CERN merilis kode sumber WorldWideWeb ke domain publik,
sehingga siapa pun bisa menggunakan atau membangun perangkat lunak tanpa biaya.
Pada tahun yang sama, NCSA merilis sebuah program yang merupakan gabungan
browser web dan klien Gopher, disebut Mosaic. Awalnya hanya tersedia pada mesin Unix
dan dalam bentuk kode sumber, tetapi pada bulan Desember 1993, Mosaic menyediakan
versi baru dengan installer untuk Apple Macintosh dan Microsoft Windows. Mosaic cepat
meningkat popularitasnya, dan menyeret popularitas Web. Jumlah browser web yang
tersedia meningkat secara dramatis, banyak yang dibuat oleh proyek-proyek penelitian
di universitas dan perusahaan, seperti Telenor (sebuah perusahaan komunikasi
Norwegia), yang menciptakan versi pertama dari browser Opera pada tahun 1994.

4
 Kebutuhan Alat dan
Perangkat Lunak Praktikum

Dalam praktikum desain antarmuka pengguna ini terdapat beberapa perangkat lunak yang
dibutuhkan antara lain, yaitu : Web Browser dan Teks Editor.

• Web Browser
Web browser digunakan untuk menampilkan dan mengakses halaman web. Peserta
praktikum bebas untuk menggunakan web browser bawaan sistem operasi atau yang
lainnya. Akan tetapi dalam praktikum ini disarankan untuk menggunakan web browser
Google Chrome dengan versi terbaru dan gratis. Berikut daftar beberapa web browser
beserta link untuk mendownload dan cara install :

Web Browser Engine Download

Google Chrome Webkit https://www.google.com/intl/id_ALL/chrome/
Mozila Firefox Gecko https://www.mozilla.org/id/firefox/new/
Opera Presto https://www.opera.com/id/download
dll

Setiap web browser memiliki engine web tersendiri, sehingga terkadang terjadi
masalah kompabilitas dan perbedaan tampilan web di beberapa web browser
mesikpun dengan syntax HTML dan CSS yang sama.

5
• Teks Editor
Teks Editor dalam praktikum ini digunakan untuk membuat tampilan sebuah web.
Peserta dibebaskan untuk memilih teks editor atau IDE, disarankan untuk menggunakan
teks editor atau IDE yang gratis dan bersifat open source.

Text Editor Download

Visual Studio Code https://code.visualstudio.com/
Notepad++ https://notepad-plus-plus.org/downloads/
dll

• Web Server (disarankan)

Walaupun dokumen html bisa dijalankan tanpa web server, akan tetapi sangat
disarankan untuk melakukan installasi web server atau bisa juga menginstall paket
bundling seperti XAMPP/LAMPP atau WAMPP.

Bundle Installation Download

XAMPP https://www.apachefriends.org/download.html
dll

6
 Latihan dan Percobaan

1. Buatlah satu artikel minimun 600 kata di medium mengenai teknologi Progressive Web
Apps (PWA) dan contoh aplikasinya atau mengenai cara kerja web atau ulasan mengenai
plugin (minimal 5) yang dapat digunakan oleh pengembang antarmuka web yang
terdapat di visual studio code!

7
 Pengenalan HTML

A. HTML
Hypertext Markup Language atau yang dikenal dengan sebutan HTML, merupakan sebuah
Bahasa markup yang digunakan untuk membuat sebuah web ataupun antarmuka di
platform lain. Sebagai sebuah Bahasa markup, HTML bertugas memberikan informasi
mengenai isi dari konten tanpa memiliki informasi mengenai style tampilan dari konten
tersebut. HTML hanya bertugas untuk memberitahukan kepada web browser bahwa
bagian tertentu dari sebuah tulisan merupakan sebuah kutipan atau sesuai dengan
elemennya.

HTML (Hypertext Markup Language) merupakan bahasa markup, bukan merupakan

Bahasa pemrograman.

B. Sejarah dan Perkembangan HTML

Awal mula sejarah HTML diawali pada tahun 1990 dan berkembang menjadi HTML4
pada akhir tahun 1998. Hingga saat ini versi terbaru yaitu HTML5 dan akan terus
berkembang. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi
HTML agar mendukung teknologi multimedia terbaru dan mengurangi penggunaan
plugin dari pihak ke tiga agar dapat mempercepat pengaksesan web, mudah dibaca oleh
manusia dan juga mudah dimengerti oleh mesin,

HTML5 merupakan salah satu karya W3C (World Wide Web Consortium) untuk
meningkatkan kompabilitas dokumen HTML dengan cara menambahkan struktur dan
ekstensibilitas yang terdapat pada XML (eXtensible Markup Language) dan merupakan

8
 jawaban atas pengembangan HTML4 dan XHTML 1.1 yang selama ini berjalan secara
terpisah dan diimplementasikan secara berbeda-beda oleh banyak Perangkat lunak.

Perkembangan versi HTML :

Versi Tahun
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.0.1 1999
XHTML 2000
HTML5 2012
HTML5.2 2017

C. Komponen Dasar HTML

Sintaks HTML pada dasarnya terdiri dari tiga komponen dasar, yaitu : Elemen, tag dan
attribut.

o Elemen

Elemen merupakan komponen yang menetapkan peran sebuah objek dalam HTML,
termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML
ialah p ataupun b. Elemen-elemen populer lain dalam HTML misalnya a, h1, div,
span, em, ataupun strong.

o Tag
Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan
elemen tersebut dimulai, dan tag penutup menandakan akhir dari sebuah elemen.
Terdapat juga tag tag yang tidak memerlukan penutup seperti tag <br> dan tag
<hr>.Tag pembuka direpresentasikan dengan nama elemen yang diapit simbol “<>”,
contohnya <a>. Tag penutup dituliskan dengan menambahkan garis miring (“/”)
setelah simbol “<”. Misalnya, tag penutup untuk elemen a adalah </a>.
Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:

<a>Ini adalah sebuah link</a>

Tag bersifat tidak case sensitive, sehingga apabila terdapat tag <HTML> atau <html>
keduanya akan menghasilkan output yang sama.
Bentuk dari tag HTML sebagai berikut :

<ELEMENT ATTRIBUTE = value>

Contoh :

<body bgcolor=”yellow”>

9
 o Attribut
Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah
elemen. Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat
beberapa atribut standar yang dapat digunakan oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas
digunakan untuk elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk
menampilkan gambar, terdapat atribut untuk menentukan di mana sumber gambar
yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan berguna untuk
elemen p, yang hanya menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang
umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk
identifikasi elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib
elemen tersebut (href):

<a href=”http://ub.ac.id”>Website UB</a>

Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini
berguna untuk memberikan referensi hyperlink dari sebuah elemen (karenanya
namanya “href” - hyperlink reference). Atribut-atribut yang dimiliki oleh tiap-tiap
elemen akan dibahas lebih lanjut di modul selanjutnya.

D. Struktur Dokumen HTML5

Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi, struktur minimal
HTML5 dapat dilihat pada kode dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>

Gambar 2 Struktur Dasar Dokumen HTML

10
 Berikut adalah penjelasan dari struktur dokumen HTML :
o <!DOCTYPE html>
Tag doctype digunakan untuk memberikan informasi kepada browser mengenai versi
HTML yang digunakan. Pada contoh diatas versi yang digunakan adalah versi
HTML5.

o <html>…..</html>
Tag html digunakan untuk menampung semua yang terdapat pada dokumen HTML
dan sebagai penanda awal dan akhir dari dokumen HTML.

o <head>….</head>
Tag head digunakan untuk menyimpan informasi - informasi mengenai dokumen
HTML, seperti meta data, judul dokumen, dan tautan dokumen ke berkas – berkas
eksternal seperti css dan javascript.

o <title>…..</title>
Tag title digunakan untuk menambahkan judul dokumen web yang ditampilkan pada
title bar atau tab yang ada pada browser.

o <body>….</body>
Tag body digunakan untuk menampung semua teks yang terdapat di halaman HTML.

E. Semantik HTML5
Semantik dalam konteks HTML dapat dideskripsikan sebagai pemberian makna dan
struktur terhadap konten yang ada didalam dokumen HTML. Makna yang diberikan
Semantik yaitu nilai dari konten pada sebuah dokumen. Misalnya, teks yang berada
dalam tag h1 memiliki nilai lebih tinggi, karena tag tersebut merupakan penanda dari
judul utama dari sebuah dokumen. Contoh yang lain teks yang berada pada tag strong
merupakan teks yang ditekankan atau ingin ditonjolkan oleh penulis dokumen.

Fungsi Semantik sendiri yaitu dapat memudahkan dibaca oleh manusia dan
memudahkan utuk dimengerti oleh mesin, selain itu juga bermanfaat di sisi optimasi
mesin pencari (SEO).

Secara mudah, Semantik dari sisi pengembang dapat diartikan penggunaan tag
HTML sesuai dengan konteks dan fungsinya.

F. Menjalankan HTML5 pada Browser Lama

Untuk meningkatkan kompabilitas dan menjalankan HTML5 pada browser lama seperti
Internet Exploler dapat menggunakan HTML5Shiv dan Modernizr, salah satunya dengan
cara menyisipkan kode berikut ke dalam dokumen HTML.
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script

11
 Latihan dan Percobaan

1. Buatlah satu dokumen HTML dengan Judul Dokumen “Nama Lengkap - NIM”
contoh:

2. Kirimkan kode dokumen HTML dan tangkapan layar hasil di browser pada tempat
pengumpulan tugas atau kelas maya dengan format nim_nama_percobaan_1.pdf

12
 Pemformatan Teks
HTML

A. Heading
Heading merupakan salah satu elemen yang digunakan untuk membuat penjudulan dan
memberikan hirarki teks dalam dokumen HTML. Pada heading terdapat enam tingkatan
hirarki yaitu h1 sampai dengan h6. Untuk melakukan format teks menjadi sebuah
heading dalam HTML, menggunakan tag <hn> dan diakhiri dengan </hn> , dimana n
menyatakan tipe judul dengan nilai 1-6.

Contoh implementasi dari Heading :

<h1>Bab 3: HTML dan CSS Dasar</h1>
<h2>3.1 Elemen, Tag, dan Atribut</h2>
<h3>3.1.1 Elemen</h3>
<h3>3.1.2 Tag</h3>
<h3>3.1.3 Atribut</h3>
<h2>3.2 Struktur dan Dokumen HTML</h2>
<h2>3.3 Dasar CSS</h2>
<h3>3.3.1 Selector</h3>
<h3>3.3.2 Property</h3>
<h3>3.3.3 Value</h3>
<h3>3.3.4 Sintaks CSS</h3>
<h2>3.4 Mengimplementasikan CSS pada HTML</h2>

Hasil tampilan di browser :

13
 Selain untuk memberikan hirarki, heading juga membantu mesin pencarian
dalam membangun indeks, dengan menentukan kepentingan konten dari
tingkatan heading.

B. Paragraf
Paragraf dalam HTML dibuat menggunakan tag <p>…</p>.

Contoh implementasi dari paragraf :

<h1>Demo Paragraf</h1>
<p>
Nisi sit ultrices cum, vel! Et arcu augue rhoncus dignissim?
Mus amet, proin facilisis aenean eu, diam mattis, arcu sed.
</p>

<p>
Et, nisi in eu. Tincidunt! Nisi ridiculus tempor,
lacus dis placerat arcu sed ac massa dolor ut ultricies ut.
</p>

Hasil tampilan di browser :

14
C. Alignment
Align merupakan attribut yang bisa digunakan untuk membuat perataan teks pada
elemen p, heading, dst.

Attribut align memiliki value berupa : center, left, right, justify.

Contoh :

<p align=”center”>Curriculum Vitae</p>

D. Penekanan Teks
Seringkali dibutuhkan penekanan terhadap kata-kata atau bagian tertentu dari teks.
Dalam komunikasi verbal seperti berbicara, dapat dilakukan penekanan dengan
mempertinggi suara, atau dengan memperlambat pembacaan kata. Dalam teks, teknik
yang biasanya digunakan untuk memberikan penekanan ialah dengan memiringkan atau
mempertebal tulisan.

HTML menyediakan dua buah elemen untuk memberikan penekanan, yaitu em dan
strong. Elemen em (emphasize) digunakan sebagai media penekanan konten. Elemen
strong, di sisi lain, digunakan untuk menandakan bahwa teks di dalamnya merupakan
teks yang sangat penting.

Contoh implementasi em dan strong :

<p>
HTML menyediakan dua buah elemen untuk memberikan penekanan,
yaitu em dan strong Elemen em digunakan sebagai media
<em>penekanan</em> konten.
Elemen strong, di sisi lain, digunakan untuk menandakan bahwa teks di
dalamnya
merupakan teks yang <strong>sangat penting</strong>.
</p>

Hasil tampilan di browser :

15
E. Tebal dan Miring
Untuk mencetak huruf tebal pada HTML dapat menggunakan tag <b>, sedangkan untuk
mencetak huruf miring dapat menggunakan tag <i>.

Contoh implementasi tebal dan miring :

<p>
<b>Scala</b> (yang adalah kepanjangan dari "<i>Scalable
Language</i>")
merupakan sebuah bahasa pemrograman yang dirancang untuk digunakan
dalam
berbagai lingkungan, mulai dari <i>script</i> sederhana sampai
dengan
sebuah sistem yang besar dan rumit. Istilah kerennya, <b>Scala</b>
adalah sebuah <i>general purpose programming language</i>.
</p>

Hasil tampilan di browser :

Walaupun secara tampilan elemen em sama dengan elemen i dan elemen

strong sama dengan tampilan elemen b, keduanya berbeda dalam sisi
penggunaan dan sisi semantik. Secara mudah, elemen b memberikan tanda
bahwa teks tersebut bermanfaat tetapi belum tentu penting. Contoh
penggunaannya seperti di : abstrak sebuah dokumen, nama produk dalam review,
kata-kata yang dapat digunakan untuk berinteraksi dalam dokumen interaktif,
atau kata pembuka. Sedangkan elemen I memberikan tanda untuk menunjukkan
perbedaan sebuah frase dengan teks pada umumnya, misalnya penunjukan
taksonomi, istilah teknis, frase idiom dari bahasa lain.

Keyword: Structural Markup dan Semantic Markup

F. Garis Bawah dan Mencoret Teks

Untuk menggaris bawahi sebuah teks pada HTML dapat menggunakan tag <u> dan
diakhiri dengan tag </u> atau tag <ins> diakhiri </ins>, sedangkan untuk mencoret
suatu teks pada HTML dapat menggunakan tag <strike> diakhiri dengan tag </strike>
atau tag <del> diakhiri </del>.

Contoh implementasi garis bawah dan strike :

<u>Pendidikan Teknologi Informasi</u>
<ins> Pendidikan Teknologi Informasi</ins>
<strike>Pendidikan Teknologi Informasia</strike>
<del>Pendidikan Teknologi Informasia</del>

16
 Hasil tampilan di browser :

Walaupun terlihat sama, keduanya berbeda. Lihat kembali fungsi semantik.

formatting text, pada dasarnya terbagi menjadi dua, yaitu: logical formatting
(elemen : strong, em, ins, del) dan physical formatting (elemen : b, I , u, strike).

Elemen ins merepresentasikan sebuah teks yang dimasukkan atau disisipkan

(inserted text) dalam sebuah dokumen. <ins> ditulis beriringan dengan element
<del> yang biasanya digunakan untuk memperbaharui (update) teks atau konten
tertentu, <del> menunjukkan konten yang dihapus (ditandai dengan tulisan yang
dicoret) sedangkan <ins> menunjukkan konten baru yang dimasukkan, sebagai
pembaharuan dari konten lama yang dihapus tersebut

G. Preformatted Text
Untuk menampilkan teks secara apa adanya pada html dapat menggunakan tag <pre>
dan diakhiri dengan tag </pre>. Teks yang ada didalam elemen pre akan dimunculkan
dengan font courier new dan tetap menghitung spasi dan baris baru.

Contoh implementasi preformatted text :

<pre>
+----+--------------------+--------------------------+
|No | Nama | TTL |
+----+--------------------+--------------------------+
|1 | Kharis Alfian | Surabaya, 10 Oktober 2020|
+----+--------------------+--------------------------+
</pre>

H. Garis Horizontal dan Baris Baru

Untuk membuat garis horizontal (horizontal rule) dapat menggunakan <hr> sedangkan
baris baru dapat menggunakan <br> (break), keduanya tidak memerlukan tag penutup.

Contoh implementasi garis horizontal dan baris baru :

<p>
Pendidikan Teknologi Informasi<br>
Sistem Informasi<br>
Fakultas Ilmu Komputer<br>
Universitas Brawijaya<hr>
</p>

17
I. Pemformatan Teks Lainnya
Elemen Fungsi
<big>…</big> membersarkan ukuran teks
<small>…</small> mengecilkan ukuran teks
_… membuat teks subscript
^… membuat teks superscript
<mark>…</mark> membuat teks yang di highlight
<tt>..</tt> Memnampilkan teks dalam format typewriter

J. Karakter Khusus
Untuk mendefinisikan karakter atau simbol dan tanda- tanda tertentu dalam HTML perlu
penanganan khusus untuk menampilkannya. Tabel berikut menampilkan beberapa
simbol dan karakter khusus yang sering digunakan :

Karakter Deskripsi Nama Entitas

Spasi &nbsp;
< Kurang dari &lt;
> Lebih dari &gt;
& Dan / Ampersand &amp;
“ Tanda petik / kutipan &quot;
‘ Petik 1 / Apostrophe &#39;
¢ Cent &cent;
£ Pound &pound;
¥ Yen &yen;
§ Section &sect;
© Copyright &copy;
® Registered &reg;
™ Trademark &trade;
× Multiplication &times;
÷ Division &divide;

18
 Latihan dan Percobaan

1. Buatlah satu dokumen HTML dengan Judul Dokumen “Nama Lengkap - Pemformatan
Teks” dan penerapan pemformatan teks seperti berikut:

2. Kirimkan kode dokumen HTML dan tangkapan layar hasil di browser pada tempat
pengumpulan tugas atau kelas maya dengan format nim_nama_percobaan_2.pdf

19