OLEH :

ARIF FATAHILLAH, S.Pd, M.Si

Buku Ajar Mata Kuliah : Pemrograman Berbasis Web
Judul Buku

Arif Fatahillah, S.Pd, M.Si

Pengarang

PS Pendidikan Matematika FKIP Universitas Jember

 Kata Pengantar

Puji Syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa karena
atas karunia dan rahmat-Nya maka penulis dapat menyelesaikan penulisan
modul dengan judul “Pemrograman Berbasis Web” ini, yang dapat dibuat
sebagai pedoman dan juga bahan ajar bagi mahasiswa khususnya program studi
pendidikan matematika. Buku ini dibuat sebagai panduan bagi mahasiswa yang
menempuh mata kuliah pemrograman berbasis web.
Buku ini didesain sesederhana mungkin yang diharapkan agar para
pembaca dapat lebih mudah memahami materinya. Buku ini juga berisi tentang
dasar-dasar HTML, CSS, Javascript beserta hasil running program tersebut,
sehingga memudahkan bagi para pembaca untuk mencoba sendiri sebagai
bahan pengembangan web.
Penulis menyadari banyak kekurangan yang terdapat dalam buku ini, oleh
karena itu kritik dan saran yang membangun sangat penulis harapkan demi
perbaikan buku ini untuk selanjutnya. Atas perhatian dan kerjasamanya
disampaikan banyak terimakasih

Jember, Nopember 2020

Penulis
 BAB 1
HTML (HYPERTEXT MARKUP LANGUAGE)

A. Pengertian HTML
HTML adalah singkatan dari Hypertext Markup Language yaitu sebuah
bahasa pemrograman yang dirancang untuk mengembangkan sebuah halaman
website yang dapat diakses atau menggunakan suatu halaman browser untuk
menampilkannya. Hal ini dapat dibantu dengan bahasa pemrograman lain seperti
Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript dan
VBScript. HTML sendiri diciptakan oleh seorang ahli fisika dan juga seorang
kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) yang bernama Tim
Berners-Lee pada tahun 1989 sebagai cara sederhana namun efektif untuk
mengkodekan dokumen elektronik. Bahkan, tujuan awal dari web browser adalah
untuk melayani pembaca untuk membuka dokumen berformat HTML.
HTML telah mengalami berbagai perkembangan dari tiap-tiap versinya.
Berikut adalah versi-versi dari perkembangan HTML tersebut :
• HTML Versi 1.0
Merupakan pionir yang di dalamnya masih terdapat banyak sekali kelemahan
sehingga HTML versi 1.0 ini antara lain heading, paragraf, hypertext, list, serta
cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image
pada dokumennya tanpa memperbolehkan teks di sekelilingnya (wraping)
• HTML Versi 2.0
Pada HTML Versi ini, penambahan kualitas HTML terletak pada kemampuannya
untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, kita
dapat memasukkan nama, alamat, serta saran dan kritik.
• HTML Versi 3.0
Versi ini menambahkan beberapa fasilitas baru seperti FIGURE yang merupakan
perkembangan dari IMAGE untuk meletakkan gambar dan tabel. Selain itu,
HTML ini juga mendukung adanya rumus-rumus matematika dalam
dokumennya. Versi ini yang disebut HTML+- tidak bertahan lama dan segera
digantikan dengan versi 3.2.
• HTML Versi 3.2
HTML versi ini merupakan HTML yang sering digunakan. Di dalamnya terdapat
suatu teknologi untuk meletakkan teks di sekeliling gambar, gambar sebagai latar
belakang, tabel, frame, style sheet dan lain-lain. Selain itu pada HTML versi ini
Kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML kita
tersebut, seperti Javascript, VBScript dan lain-lain.
• HTML Versi 4
HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya yaitu
HTML 3.2. Perubahan ini hampir terjadi di segala perintah HTML seperti tabel,
image, link, text, meta, imagemaps, form dan lain-lain.
• HTML Versi 4.01
HTML versi 4.01 merupakan revisi dari HTML 4.0. Versi terbaru ini memperbaiki
kesalahan-kesalahan kecil (minor errors) pada versi terdahulunya. HTML 4.01 ini
juga menjadi standarisasi untuk elemen dan atribut dari script XHTML 1.0.
• HTML Versi 5.0
Teknologi ini mulai diluncurkan pada tahun 2009, tetapi pada tanggal 4 Maret
2010 terdapat sebuah informasi bahwa W3C (World Wide Web Consortium) dan
IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani
HTML sejak versi 2.0 telah mengmbangkan versi HTML terbaru, yaitu versi 5.0.
HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan
penggabungan antara CSS, HTML itu sendiri dengan JavaScript (Sumber :
Indosmartdigital).

B. Browser
Web browser adalah sebuah aplikasi yang bisa digunakan untuk menjelajahi,
menyajikan atau mengambil konten dari berbagai sumber yang ada di internet.
Kita mungkin sudah sering menggunakan berbagai macam browser diantaranya
adalah : Google Chrome, UC Browser, Mozilla Firefox, Opera Mini, Opera,
Samsung Internet Browser, dan Internet Explorer.
C. Aplikasi Editor HTML
Sebelum memulai belajar Bahasa pemrograman HTML kita juga harus
memilih aplikasi untuk editor HTML tersebut, diantaranya adalah :

• Notepad++

Notepad++ adalah sebuah penyunting teks dan penyunting kode yang berjalan
di sistem operasi Windows. Notepad++ menggunakan komponen Scintilla untuk
dapat menampilkan dan menyunting teks atau kode dari berbagai bahasa
pemrograman. Notepad++ didistribusikan sebagai perangkat lunak bebas.
Beberapa keunggulan dari text editor tipe ini adalah :
❖ Antarmuka bebas gangguan
❖ Fitur pelengkapan otomatis
❖ Opsi plugin untuk fungsionalitas yang diperluas.
Sedangkan beberapa kelemahannya adalah :
❖ Mungkin sulit untuk membiasakannya bagi pemula
❖ Tidak ada dukungan untuk Mac.

• Sublime Text Editor

Sublime Text 3 merupakan editor text yang paling popular karena gratis dan juga
menawarkan dukungan lintas platform untuk pengguna Windows, Mac, dan
Linux.
Pada editor text ini memiliki banyak keunggulan, diantaranya :
❖ Dapat disesuaikan dengan mudah
❖ Ramah bagi pemula
❖ Skema warna yang menyenangkan untuk dipilih.
Selain itu juga memiliki beberapa kelemahan, diantaranya :
❖ Tidak dapat mencetak dokumen atau kode
❖ Tidak ada toolbar atau dasbor yang tersedia.

D. Dasar HTML

Nama Fungsi
<! DOCTYPE html> Deklarasi untuk mendefinisikan dokumen menjadi HTML
<html> Tag pembuka untuk membuat dokumen HTML
<head> Informasi meta tentang dokumen
<title> Membuat judul halaman yang nantinya akan ditampilkan di browser
<body> Tempat dibuatnya semua konten website menggunakan HTML
<p> HTML <p> element menunjukkan sebuah Paragraph, atau paragraf
sebuah teks
<br> HTML element br menunjukkan sebuah line break (garis baru).
Elemen br ini sebaiknya digunakan hanya untuk garis baru yang
benar-benar merupakan bagian dari sebuah konten, seperti
digunakan pada baris syair, puisi dan alamat.
<h1> s/d <h6> Membuat judul atau heading
<hr> Memisahkan konten (biasanya ditampilkan garis pembatas)
 <b> Membuat teks tebal
<strong> Membuat teks penting
<i> Membuat teks miring
<em> Membuat teks ditekankan
<mark> Membuat teks ditandai
<small> Membuat teks kecil
<del> Membuat teks dihapus
<ins> Membuat teks dimasukkan
<sub> Teks subscript
<sup> Teks superscript

E. Konstruksi Dasar Halaman HTML

Tag ini harus ditempatkan di bawah satu sama lain di bagian atas setiap
halaman HTML yang akan kita buat.

<!DOCTYPE html> → Tag ini menentukan bahasa yang akan Anda tulis di
halaman. Dalam hal ini, bahasanya adalah HTML 5.
<html> → Tag ini menandakan bahwa mulai sekarang kita akan menulis dalam
kode HTML.
<head> → informasi yang berisi tentang halaman bukan isi browser, biasanya
ditujukan untuk mesin telusur dan program komputer lainnya.
<body> → Disini berisi letak konten halaman yang akan ditampilkan.
• Tag Lebih Lanjut
Di dalam tag <head>, ada satu tag yang biasanya selalu disertakan yaitu tag
<title> yang sama pentingnya.
<title> → Disinilah anda memasukkan nama halaman karena akan muncul di
bagian atas jendela browser atau tab.
<meta> → Disinilah informasi tentang dokumen disimpan: pengkodean karakter,
nama (konteks halaman), deskripsi.
• Menambahkan Konten
Selanjutnya kita akan membuat <body> tag.
HTML <body> adalah tempat kita untuk menambahkan konten yang dirancang
untuk dilihat oleh mata manusia. Ini termasuk teks, gambar, tabel, formulir, dan
segala sesuatu yang biasa kita lihat di web.
Contoh sederhana :

Preview :
F. TAG JUDUL
Dalam HTML, judul (headings) ditulis dalam elemen berikut:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1>dan <h2> seharusnya digunakan untuk judul yang paling penting,
sementara tag yang tersisa harus digunakan untuk sub-judul dan teks yang
kurang penting. Bot mesin pencari (Search Engine) menggunakan urutan ini saat
menguraikan informasi mana yang paling penting pada suatu halaman.
Contoh sederhana :

Preview :
G. TAG FORMATING
Tag ini berisi tentang perintah pengaturan / konfigurasi pada teks yang akan
dijadikan isi dari sebuah halaman web. Pengaturan tersebut akan terlihat secara
real, sehingga apa yang diinputkan pada dokumen HTML akan diperlihatkan oleh
web browser.
<b> Membuat teks tebal
<u> Membuat teks bergaris bawah
<strong> Membuat teks penting
<i> Membuat teks miring
<em> Membuat teks ditekankan
<mark> Membuat teks ditandai
<big> Membuat teks besar
<small> Membuat teks kecil
<del> Teks dihapus
<ins> Teks dimasukan
<sub> Teks subscript
<sup> Teks superscript
<strike> Untuk menempatkan garis horizontal di seluruh teks
<li> Untuk menampilkan data secara berurutan kebawah

Contoh sederhana :
Preview :

H. TAG STYLE
HTML <style> digunakan untuk menyisipkan kode style atau CSS ke dalam
sebuah dokumen web (HTML). Tag <style> ditulis di dalam element <head>..
</head> yang merupakan bagian kepala sebuah dokumen HTML.
style Atribut untuk elemen styling pada HTML
background-color Memberikan warna latar belakang
color Memberi warna pada teks
font-family Mengubah font pada teks
font-size Mengatur ukuran font
text-align Mengatur perataan teks

I. TAG WARNA
 Untuk mengatur warna pada html yaitu dengan menggunakan tag <font
color="nama_warna"> diawal tulisan yang akan diberikan warna dan diakhiri
dengan tag </font>. Ada beberapa contoh warna pada html seperti black (hitam),
red (merah), green (hijau), yellow (kuning), blue (biru), violet (ungu), silver (abu-
abu) dan lain-lain.
Contoh sederhana :

Preview :