BAB I

KONSEP DASAR WEB

Deskripsi
Membahas mengenai konsep dasar pemrograman web, istilah-istilah dalam
pemrograman web, menggunakan text editor, mengenal dan
mengimplementasikan struktur navigasi
Tujuan Pembelajaran :
1. Mampu memahami konsep dasar Pemrograman Web
2. Mampu memahami istilah-istilah yang ada dalam pemrograman web
3. Mampu menggunakan text editor
4. Mampu mengimplementasikan Struktur Navigasi

1.1. Pengertian Website

Website merupakan kumpulan halaman digital yang berisi informasi
berupa teks, animasi, gambar, suara dan video atau gabungan dari semuanya
yang terkoneksi oleh internet, sehingga dapat dilihat oleh seluruh siapapun
yang terkoneksi jaringan internet. Jenis Kategori Website:
a. Web Statis
Merupakan website yang mempunyai halaman yang tidak berubah.
Perubahan suatu halaman dilakukan secara manual dengan mengedit
code yang menjadi stuktur dari website tersebut.
b. Web Dinamis
Merupakan website yang secara terstruktur diperuntukan untuk
diupdate sesering mungkin. Biasanya disediakan halaman backend
untuk melakukan perubahan konten dari website tersebut.
Contohnya : web portal, web berita, dll.
c. Web Interaktif
Merupakan website yang berinteraksi antara penggunanya. Biasanya
berupa forum diskusi maupun blog. Dimana adanya moderator
sebagai pengatur alur diskusi.

1.2. Pengertian Pemrograman Web

Pemrograman web adalah pembuatan aplikasi program dengan
bahasa skrip yang akan menghasilkan sebuah aplikasi yang diakses pada
web browser.

1.3. Bahasa Skrip Pemrograman Web

Dalam mempelajari pemrograman web, perlu diketahui pemahaman
beberapa bahasa skrip yang dibutuhkan dalam pembuatan 1 halaman
website, yaitu :
a. HTML
b. PHP
c. CSS
d. JAVASCRIPT

1.4 Istilah-Istilah dalam Pemrograman Web

Ada beberapa istilah yang sering digunakan apabila anda
mempelajari pemrograman web ini diantaranya yaitu:
1. Internet
Internet berarti rangkaian komputer yang terhubung menjadi beberapa
rangkaian jaringan. Sistem komputer terhubung secara global dan
menggunakan TCP/IP sebagai protocol. Melalui internet pertukaran
informasi dapat dilakukan tanpa batas asalkan kedua pihak terhubung
kedalam jaringan yang sama.
 2. World Wide Web (WWW)
WWW merupakan kumpulan web server diseluruh dunia yang dapat
menyediakan data dan informasi untuk dapat digunakan secara massal.
3. Website
Website merupakan istilah yang merujuk kepada suatu nama halaman
web yang dapat diakses jika terkoneksi dengan internet. Untuk
mengakses sebuah website, selain terkoneksi dengan internet, anda
pun harus membukanya dalam sebuah aplikasi web browser.
4. Web Server
Web Server merupakan perangkat lunak yang digunakan untuk
menerima permintaan melalui Protokol HTTP atau HTTPS dari client,
kemudian dikirimkan kembali dalam bentuk halaman-halaman web.
Contoh web server : Xampp, Apache2Triad, dll.
5. URL (Universal Resource Locator)
URL merupakan suatu alamat yang menunjukkan sebuah halaman
tertentu internet. Contoh URL adalah: http://www.google.com
6. HTTP (Hypertext Transfer Protocol)
HTTP merupakan bagian dari URL digunakan untuk
mengidentifikasikan lokasi web, dan digunakan dalam protokol
HTML.
7. DNS (Domain Name System)
DNS merupakan sistem database terdistribusi yang tidak banyak
dipengaruhi oleh bertambanhnya database. DNS menjamin informasi
host terbaru akan disebarkan ke jaringan bila diperlukan.
8. IP (Internet Protocol)
IP (Internet Protocol) merupakan protokol yang digunakan dalam
internet, secara teknis bermakna suatu bentuk pengisian dan
 pengalamatan data-data dan informasi yang akan dikirim melalui
internet.
9. Hyperlink
Hyperlink atau disebut link merupakan sebuah tools yang berperan
dalam mempopulerkan penggunaan internet, hyperlink dapat
mereferensikan sebuah teks atau gambar ke alamat lain di internet.
10. Web Browser
Menggunakan web browser mudah, yang diperlukan hanyalah Anda
harus memiliki alamat web yang akan dibuka. Alamat ini biasa disebut
dengan Uniform Resource Locator (URL). Jika menggunakan sistem
operasi Windows terdapat program web browser bawaan, yaitu
Internet Explorer. Terdapat banyak program alternative web browser
yang sebagian besar bersifat gratis, seperti Firefox, Opera, Safari,
chrome dan seterusnya.

1.6 Struktur Navigasi

Struktur Navigasi adalah bagan hirarki dari suatu website yang
menggambarkan isi dari setiap halaman dan link. Struktur Navigasi dapat
dikatakan sebagai gambaran dari hubungan atau rantai kerja dari seluruh
elemen yang akan digunakan dalam aplikasi.
Kriteria-kriteria yang digunakan dalam pengelompokan dari struktur
navigasi adalah sebagai berikut: kebutuhan akan objek, kemudahan
pemakaian, interaktif, dan kemudahan membuatnya yang berpengaruh
terhadap waktu pembuatan suatu websites. Dalam penggambarannya
Struktur Navigasi terbagi kedalam 4 Struktur yang berbeda yaitu: Linier,
Non Linier, Hierarchical (Hirarki) dan Composit (Campuran).
Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan
dalam proses pembuatan aplikasi web, yaitu:
1. Struktur Navigasi Linier
Pada Struktur navigasi linier merupakan rangkaian urutan tampilan
dari sebuah halaman website yang ditampilkan secara berurut menurut
urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah
satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua
halaman sebelumnya atau dua halaman sesudahnya.

Gambar 1.1. Struktur Navigasi Linier

Contoh :

Gambar 1.2 Contoh Struktur Navigasi Linier

2. Struktur Navigasi Hirarki

Pada Struktur navigasi hirarki merupakan suatu struktur yang
mengandalkan percabangan untuk menampilkan data berdasarkan kriteria
tertentu. Jika digambarkan, maka struktur navigasi hirarki ada halaman web
yang disebut sebagai Master Page (halaman utama pertama). Pada halaman
utama ini mempunyai halaman percabangan yang disebut Slave
Page (halaman pendukung). Dan jika halaman pendukung diklik, maka dia
akan berubah menjadi Master Page dan kemudian memiliki percabangan
halaman pendukung lainnya, dan seterusnya. Dalam struktur navigasi ini
tidak diperbolehkan adanya tampilan secara linier.
 Gambar 1.3. Struktur Navigasi Hirarki
Contoh :

Gambar 1.4 Contoh Struktur Navigasi Hirarki

3. Struktur Navigasi Non-Linier
Struktur navigasi non-linier atau struktur tidak berurut merupakan
pengembangan dari struktur navigasi linier. Pada struktur
ini diperkenankan membuat navigasi bercabang. Percabangan yang ada
pada struktur nonlinier ini berbeda dengan percabangan yang ada pada
struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat
percabangan, tetapi tiap-tiap tampilan mempunyai tingkatan yang sama
yaitu tidak ada Master Page(halaman utama website) dan Slave
Page(halaman pendukung website).

Gambar 1.5. Struktur Navigasi Non-Linier

Contoh :

Gambar 1.6. Contoh Struktur Navigasi Non-Linier

4. Struktur Navigasi Campuran
Struktur navigasi campuran disebut struktur navigasi bebas. Dimana
didalamnya terdapat beberapa gabungan dari struktur navigasi lainnya.
Struktur navigasi campuran ini banyak digunakan dalam membuat website,
karena struktur ini dapat memberikan tingkat interaksi yang lebih tinggi.
Dan keterikatan dalam halaman website dapat dibuat lebih efisien dan
menarik.

Gambar 1.7. Struktur Navigasi Campuran

Contoh :

Gambar 1.8. Contoh Struktur Navigasi Campuran

1.3 Text Editor

Dalam membuat sebuah halaman web dibutuhkan text editor. Text
editor yang dapat dipergunakan dalam pembelajaran pemrograman web ini
dapat menggunakan pilihan sebagai berikut :
1. Notepad
Notepad adalah aplikasi text editor yang sudah ada didalam instalasi
os windows anda masing-masing. Yang perlu diperhatikan jika
menggunakan notepad sebagai text editor, yakni extension type file
dituliskan langsung dan pemilihan save as type adalah All Files
2. Notepad++
Notepad++ adalah sebuah penyunting teks dan penyunting kode
sumber yang berjalan di sistem operasi Windows. Notepad++
menggunakan komponen Scintilla untuk dapat menampilkan dan
menyuntingan teks dan berkas kode sumber berbagai bahasa
pemrograman.
3. Sublime Text
Text editor yang terbilang masih baru yang sangat mudah
digunakan, penampilan simple namun enak dipandang. Sublime text
adalah aplikasi berbayar tapi anda dapat mendownload versi demo-
nya (meskipun versi demo tapi tidak ada batasan dalam
penggunaannya).
4. Atom
Atom adalah teks editor gratis dan terbuka untuk macOS, Linux, dan
Microsoft Windows dengan dukungan untuk plug-in yang ditulis
dalam Node.js, dan tertanam Kontrol Git, yang dikembangkan oleh
GitHub.
 BAB II
PENGENALAN HTML

Deskripsi :
Mampu mengenal skrip html, menggunakan ragam tag dan pendeklarasian
tabel beserta atributnya, mampu menuliskan skrip dalam html
Tujuan Pembelajaran :
1. Memahami skrip html
2. Mampu menggunakan skrip html
3. Mampu menggunakan tag dalam penulisan skrip html
4. Mampu menggunakan tabel, penggunaan cell padding, dan cell span

2.1 Pengertian Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML) adalah bahasa pemrograman
yang digunakan untuk menampilkan sebuah website. HTML termasuk
dalam bahasa pemrograman gratis, artinya tidak dimiliki oleh siapapun,
pengembangannya dilakukan oleh banyak orang di banyak negara dan bisa
dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara
global.
Dokumen HTML adalah dokumen teks yang dapat diedit oleh editor
teks apapun. Dan disimpan dengan file extension .html . Dokumen HTML
punya beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan
symbol “ < ” dan berakhir dengan sebuah symbol “ > ”.

2.2. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi
elemen dan tag akhir. Tag berakhir termasuk simbol / diikuti oleh tipe
elemen, misalnya </HEAD>. Sebuah elemen HTML dapat bersarang di
dalam elemen lainnya. Sebuah dokumen HTML standar terlihat seperti ini :
 <html>
<head>
<title> Judul Web </title>
</head>
<body>

</body>
</html>

Keterangan :
1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan
</HTML>.
2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag
kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam
tag ini berisi tag <META> dan <TITLE>. Tag <META> merupakan
informasi atau header suatu dokumen HTML. Atribut yang dimiliki oleh
tag ini antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen
HTML secara otomatis dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML
yang akan dipanggil.
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag
<META> dalam suatu document HTML boleh ada maupun tidak.
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman
web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> …
</TITLE>. Judul ini akan muncul dalam titlebar dari browser.
4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu
halaman web.
Contoh penggunaan script HTML
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini.
Simpan dengan nama Contoh01.html
<html>
<head>
<title>Contoh 01 </title>
</head>
<body>
Halo... <br>
ini script HTML pertamaku
</body>
</html>
Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\buat folder
baru untuk menyimpan file di dalam folder htdocs. Simpan file dengan
nama contoh01.html. Pembuatan nama file pada saat penyimpanan harus
diakhiri dengan extention “.html”

Cara penyimpanan dengan Notepad, perhatikan cara berikut :

Untuk melihat hasil dari file di atas dapat menggunakan browser
Mozilla, google chrome, internet explorer atau jenis browser lain. Ketikkan
pada address bar “Localhost\Nama Folder Penyimpanan\”, kemudian pilih
file contoh01.html
Sebelum di ketikkan alamat file tersebut, pastikan anda telah menjalankan
Module Apache pada Xampp Control Panel.
Lihat gambar di bawah ini :
 Gambar 2.1 Simpan File dengan Notepad

Gambar 2.2 Menjalankan Apache via Xampp Control

Gambar 2.3 Lihat Isi modul_web1

Hasilnya :

Gambar 2.4 Hasil dari contoh01.html

2.3 TAG
Kode-kode dalam HTML biasanya disebut TAG. Tag dalam HTML
dituliskan diapit oleh tanda lebih kecil ( < ), tanda lebih besar ( > ), dan
garis miring ( / ). Tag dituliskan berpasangan, jika tidak menggunakan tanda
garis miring( / ) setelah penulisan namanya, disebut sebagai tag pembuka.
Namun, jika menggunakan tanda garis miring ( / ) sebelum nama tag, maka
disebut sebagai tag penutup. Tag bersifat incasesensitiv yang dimana
penulisan dengan huruf besar, huruf kecil dan campuran tidak masalah.
Namun, untuk standarisasinya tag di tuliskan dalam huruf kecil.
Jenis – jenis tag dalam HTML :
Beberapa jenis tag yang dapat di pergunakan dalam penulisan skrip
html, antara lain sebagai berikut :
Tag Kegunaan
Untuk mendefinisikan sebuah dokumen
<html>
HTML
Mendefinisikan body atau isi sebuah
<body>
dokumen
Mendefinisikan heading 1 sampai 6, ukuran
<h1>…</h1> s/d
fontsize judul yang besar sampai yang
<h6>…</h6>
terkecil
<p>….</p> Mendefinisikan sebuah paragraph
<br> Mendefinisikan break line / baris baru
Mendefinisikan horizontal rule pemisah
<hr>
antar bagian atau paragraph
<ol>…..</ol> Mendefinisikan pembuatan order
 list/penomoran dengan angka/huruf
Mendefinisikan pembuatan unorder
<ul>…..</ul>
list/penomoran dengan bullets
<li>……</li> Mendefinisikan isi data dalam list
<i>……</i> Mendefinisikan format italic/huruf miring
<b>……</b> Mendefinisikan format bold/huruf tebal
Mendefinisikan format underline/huruf
<u>……</u>
bergaris bawah
_….. Mendefinisikan teks subscript
^….. Mendefinisikan teks superscript
<img>…….</img> Mendefinisikan tampilkan gambar
<marquee>….</marquee> Mendefinisikan tulisan bergerak
<table> ……………</table. Mendefinisikan pembuatan tabel

Contoh script penggunaan Tag HTML

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini.
Simpan dengan nama Contoh02.html

<html>
<head>
<title>Contoh 02</title>
</head>
<body bgcolor="#00CCFF" text="#FF0000">
<p> Ini adalah contoh penggunaan formating TAG dalam HTML <br>
masing-masing TAG memiliki atribut masing-masing<br> </p>
<font color="#000000">Ini juga termasuk contoh penggunaan formating
TAG<br></font>
<h1><marquee width="50%" bgcolor="#000099">Ini juga salah satu
penggunaan Tag</marquee> </h1>
</body>
</html>

Hasil Tampilan di browser

 Gambar 2.5 Hasil tampilan contoh02.html
Latihan Tag
Simpan dengan nama LatihanTag.html

<html>
<body>
<body bgcolor="magenta">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna magenta. </p>
<h1> Ini adalah heading 1 </h1>
<h2> Ini adalah heading 2 </h2>
<h3> Ini adalah heading 3 </h3>
<h4> Ini adalah heading 4 </h4>
<h5> Ini adalah heading 5 </h5>
<h6> Ini adalah heading 6 </h6>
<p> Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan
tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk
keperluan itu. </p>
<h1 align="center">Ini adalah heading 1</h1>
<p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>
</body>
</html>

Hasil tampilan di web browser :

 Gambar 2.6 Hasil tampilan LatihanTag.html

2.4 Pembuatan Tabel Menggunakan HTML

Tabel penting peranannya dalam halaman Web, selain untuk
menampilkan teks atau gambar dalam format lajur dan kolom bias juga
menggunakan tabel untuk membantu me-layout tampilan halaman.
Tabel merupakan sebuah kotak yang terdiri atas baris/row dan
kolom.column. Untuk membuat tabel, anda menggunakan tag <table> dan
menutupnya dengan tag </table>. Anda bisa juga menambahkan atribut lain
di tag <table> pembuka. Misalnya menentukan warna, border, dan
sebagainya.
Di dalam tag <table> ada beberapa tag lain yang perlu dipahami,
yaitu :
a. Tag <tr>
Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari
Table Row.
b. Tag <td>
 Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td>
ada di dalam tag <tr>. TD singkatan dari Table Data.
c. Tag <th>
Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk
header tabel. TH singkatan dari Table Header.

Menggabungkan sel
Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama.
Jika kita ingin membuat sebuah sel memiliki lebar atau tinggi yang berbeda
dari sel-sel lainnya, maka satu-satunya cara yang bisa kita lakukan adalah
dengan menggabungkan beberapa sel menjadi satu. Cara ini disebut merge
atau penggabungan sel.
Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan
atau colspan. Atribut rowspan digunakan untuk menggabungkan sel-sel
tabel pada kolom yang sama. Atribut colspan untuk menggabungkan sel-sel
tabel pada baris yang sama.
Berikut contoh penggabungan kedua jenis :
1. Secara Vertikal (Rowspan)
Tabel dengan kode HTML dibawah ini sel-sel kolom pertama akan
digabung:

<table>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
</table>
 Gambar 2.7 tabel sebelum di gabung kolom

Setelah digabung maka kondisi kode HTML menjadi seperti berikut:

<table>
<tr>
<td rowspan=”3”>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
</table>

Gambar 2.8 tabel setelah di gabung kolom

2. Secara Horisontal (Colspan)

Tabel dengan kode HTML dibawah ini sel-sel baris pertama akan
digabung:
<table>
<tr>
<td>……….
</td>
<td>……….
</td>
</tr>
<tr>
<td>……….
</td>
<td>……….
 Gambar 2.9 tabel sebelum di gabung baris
Setelah digabung maka kondisi kode HTML menjadi seperti berikut:

Gambar 2.10 tabel setelah di gabung baris

<table>
<tr>
<td colspan=2>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
</table>

Contoh script pembuatan tabel

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini.
Simpan dengan nama Contoh03.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Contoh 03 - Penggunaan Tabel</title>
</head>
<body>
<h1>Tabel Data Siswa</h1>
<table border="1" bgcolor="pink">
<tr>
<th>Nim</th>
<th>Nama</th>
<th>Alamat</th>
<th>Tempat, Tanggal Lahir</th>
<th>Jurusan</th>
</tr>
<tr>
<td>12110001</td>
<td>Anita</td>
<td>Cengkareng</td>
<td>Jakarta, 20 Agustus 1990</td>
<td>Sistem Informasi</td>
</tr>
<tr>
<td>12110002</td>
<td>Aditya</td>
<td>Tangerang</td>
<td>Semarang, 01 Januari 1989</td>
<td>Sistem Informasi</td>
</tr>
<tr>
<td>12110003</td>
<td>Firman</td>
<td>Bogor</td>
<td>Jakarta, 18 September 1988</td>
<td>Sistem Informasi</td>
</tr>
</table>
</body>
</html>

Jika dilihat di browser, maka terlihat sebagai berikut :

 Gambar 2.11 Hasil contoh03.html

Penggunaan Cellpadding dan Cellspacing

Cellpadding merupakan atribut dari tag <table> digunakan untuk
mengatur jarak border bagian dalam dengan isi dalam tabel. Sedangkan
cellspacing dipergunakan untuk mengatur jarak border bagian dalam dan
luar. Satuan angka yang digunakan adalah pixel. Contoh <table cellspacing
=”2”> maka artinya pengaturan jarak border bagian dalam dan luar
sebanyak 2 pixel.
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini.
Simpan dengan nama tabelcell.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut Cellpadding dan cellspacing dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellpadding & cellspacing dalam Tabel</h3>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<br />
 <table border="1" cellspacing="3" cellpadding="5">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>

Hasil di browser :

Gambar 2.12 Hasil dari tabelcell.html