chapter1.

md 2/16/2023

Modul Ajar 1
Konsep arsitektur web, Konsep Dasar Pengembangan Web dengan HTML, CSS, dan JavaScript, Menjalankan
Halaman Pertama PHP
Tujuan
Mahasiswa Mampu menjelaskan konsep dasar pengembangan web dengan HTML, CSS, JavaScript, dan
PHP (C2)
1. Pengembangan Pemrograman Web
Road Map Web Developer : https://roadmap.sh/
Roadmap web developer merupakan panduan yang menunjukkan tahapan yang harus dilalui oleh seorang web
developer dalam meningkatkan keterampilannya. Ini dapat berbeda untuk setiap individu, tetapi umumnya
meliputi beberapa tahap sebagai berikut:
. Belajar dasar-dasar web development: Mempelajari HTML, CSS, dan JavaScript sebagai dasar untuk
membuat halaman web yang dinamis.
. Belajar JavaScript: Mempelajari framework JavaScript seperti jQuery, React, AngularJS, dan VueJS untuk
membuat halaman web yang lebih interaktif.
. Belajar backend development: Mempelajari bahasa pemrograman seperti Python, Ruby, PHP atau
NodeJS, dan framework seperti Ruby on Rails, ExpressJS dan Laravel untuk mengembangkan aplikasi
web.
. Belajar database management: Mempelajari SQL dan database management systems seperti MySQL,
PostgreSQL, dan MongoDB untuk mengelola data dalam aplikasi web.
. Belajar Git dan development workflow: Mempelajari Git, Github, dan development workflow seperti
Scrum dan Agile untuk bekerja secara efektif dalam tim.
. Belajar security: Mempelajari cara untuk menjaga aplikasi web aman dari serangan seperti SQL injection,
cross-site scripting, dan cross-site request forgery.
. Belajar SEO dan web optimization: Mempelajari cara untuk meningkatkan peringkat website di mesin
pencari dan meningkatkan performa website.
. Belajar Cloud hosting: Mempelajari cloud hosting seperti AWS, Azure, dan Google Cloud Platform untuk
mengembangkan dan mengelola aplikasi web.
. Belajar DevOps: Mempelajari cara untuk mengelola infrastruktur dan aplikasi secara otomatis melalui
pipeline deployment dan continous integration
. Belajar Mobile Development: Mempelajari cara untuk mengembangkan aplikasi mobile dengan teknologi
seperti React Native, Ionic, dan Xamarin.

1 / 12
chapter1.md 2/16/2023

Note : Tahap-tahap diatas bisa saja berbeda pada setiap individu dan tiap-tiap perusahaan, dan bahkan juga
bisa berubah-ubah sesuai dengan perkembangan teknologi dan industri. Namun, tahap-tahap diatas dapat
memberikan gambaran umum tentang apa yang harus dipelajari oleh seorang web developer.
1.1 Membuat Web Native dengan menggunakan komponen HTML, CSS, Javascript dan PHP.
Dalam membangun Web Native / Web Prosedular kita mememerlukan komponen Standar meliput HTML, CSS,
Javascript dan PHP. Fungsi dan Penjesalan komponen-komponen tersebut :
. HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk mendefinisikan
struktur dan konten dari sebuah halaman web. HTML digunakan untuk menentukan elemen seperti judul,
paragraf, gambar, dll.
. CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendefinisikan tampilan dari
elemen-elemen yang ditentukan dalam HTML. CSS digunakan untuk menentukan warna, ukuran, posisi,
dll. dari elemen-elemen HTML.
. JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaksi dan dinamika
pada halaman web. JavaScript digunakan untuk menambahkan event listener, mengubah konten
halaman, dll.
. PHP (Hypertext Preprocessor) adalah bahasa pemrograman yang digunakan untuk membuat aplikasi
web dinamis dan digunakan untuk mengolah data yang diterima dari form HTML, membuat aplikasi yang
berinteraksi dengan database, dll. PHP digunakan pada server-side, sehingga dapat memproses data
sebelum dikirimkan ke browser.
Semua bahasa ini digunakan secara bersama-sama dalam pengembangan web. HTML digunakan untuk
menentukan struktur dan konten dari halaman web, CSS digunakan untuk menentukan tampilan dari elemen-
elemen HTML, JavaScript digunakan untuk menambahkan interaksi dan dinamika pada halaman web, dan PHP
digunakan untuk mengolah data yang diterima dari form HTML dan berinteraksi dengan database.
1.2 Struktur Dasar HTML (Hypertext Markup Language)
1.2.1 Pengertian Tag, Atribut dan Element HTML
Pengertian Tag
Tag dalam HTML membantu memberikan petunjuk kepada web browser bagaimana sebuah teks seharusnya
ditampilkan. File HTML hanyalah file teks biasa seperti yang kita pelajari. Web browserlah yang akan
memproses file tersebut dan menampilkan hasilnya sebagai sebuah situs web.
Pengertian Atribut
Atribut adalah informasi tambahan yang ditulis di dalam tag pembuka. Fungsi dari atribut bervariasi tergantung
pada nilai dan tag mana yang digunakan. Ada atribut yang umum dan bisa digunakan pada semua tag (disebut
sebagai atribut global), namun kebanyakan hanya berlaku untuk tag tertentu saja. Atribut terdiri dari nama
atribut dan nilai atribut yang berpasangan. Sebagai contoh, jika ingin menambahkan atribut class dengan nilai
pertama pada tag <p>, maka cara penulisannya adalah seperti ini:

2 / 12
chapter1.md 2/16/2023

<p class="pertama">Ini adalah paragraf pertama</p>

Nilai dari atribut bisa ditulis menggunakan tanda petik dua (“) seperti yang ditunjukkan sebelumnya, atau bisa
juga menggunakan tanda petik satu (‘) seperti contoh berikut:

<p class="pertama">Ini adalah paragraf pertama</p>

<p class="pertama">Ini adalah paragraf pertama</p>

Menulis nilai atribut tanpa tanda petik tidak salah dan masih valid dalam HTML. Namun, jika nilai atribut terdiri
dari 2 kata atau lebih, maka harus menggunakan tanda petik, seperti yang ditunjukkan dalam contoh berikut:

<p class="pertama penting">Ini adalah paragraf pertama dan penting</p>

Pengertian Elemen
Elemen adalah kesatuan dalam HTML yang terdiri dari tag, atribut, dan seluruh teks yang terletak antara tag
pembuka dan penutup. Supaya lebih mudah dipahami, bisa dilihat dalam gambar yang disediakan.

Gambar 1. Element HTML

Dari gambar diatas kita dapat melihat bahwa element mencakup tag, atribut dan seluruh isi dari tag tersebut,
termasuk jika didalamnya juga terdapat tag lain.
1.2.2 Struktur Dasar HTML

3 / 12
chapter1.md 2/16/2023

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
</head>
<body></body>
</html>

Tag <!DOCTYPE> digunakan untuk memperjelas jenis versi dari HTML yang digunakan dalam sebuah halaman
web. Ini membantu browser untuk mengetahui bagaimana halaman web harus diproses dan ditampilkan. Tag
<!DOCTYPE html> adalah deklarasi DOCTYPE untuk HTML5, yaitu versi terbaru dari HTML.

Tag <html> menandakan bahwa sebuah dokumen adalah file HTML. Atribut lang="en" menentukan bahwa
bahasa default dari dokumen tersebut adalah bahasa Inggris ("en"). Atribut ini sangat berguna bagi mesin
pencari dan teknologi pengaksesan untuk mengetahui bahasa yang digunakan dalam dokumen HTML dan
membantu dalam pencarian dan pengaksesan informasi yang lebih baik.
<meta charset="UTF-8"> adalah tag HTML yang digunakan untuk menentukan jenis set karakter
(character set) yang digunakan oleh dokumen HTML. UTF-8 adalah salah satu jenis set karakter yang paling
umum digunakan dan memungkinkan untuk menampilkan karakter dari seluruh dunia, termasuk simbol dan
karakter non-Latin. Tag <meta charset="UTF-8"> harus berada di bagian atas dokumen HTML, sebelum
tag <head> lainnya.
Tag <meta name="viewport" content="width=device-width, initial-scale=1.0">
digunakan untuk mengatur bagaimana sebuah halaman web akan ditampilkan pada perangkat mobile. content
attribute menentukan bagaimana viewport dikonfigurasi, di sini width=device-width menandakan bahwa lebar
viewport harus sama dengan lebar perangkat, dan initial-scale=1.0 berarti skala awal halaman web adalah
100%. Ini membantu mengatur tampilan halaman web pada berbagai ukuran layar dan perangkat agar terlihat
optimal.
<head> adalah tag HTML yang berisi informasi mengenai dokumen HTML yang tidak ditampilkan pada
halaman web, tetapi berguna bagi browser dan mesin pencari untuk memahami isi dan struktur dari halaman
tersebut. Informasi yang disimpan dalam tag <head> antara lain: informasi mengenai dokumen seperti judul,
deskripsi, dan kata kunci (<meta> tags), stil tampilan (<style> tags), dan skrip (<script> tags). Bagian ini
ditempatkan sebelum bagian <body> dan harus selalu ada pada setiap dokumen HTML.
1.2.3 Mengenal HTML Tree / Document Object Model (DOM)
HTML Tree atau Document Object Model (DOM) adalah sebuah model struktur data yang menggambarkan
halaman web sebagai sebuah pohon. Setiap elemen HTML pada halaman web akan mewakili sebuah node atau
cabang dalam pohon ini, dan setiap tag, atribut, dan teks pada halaman web akan dikelompokkan menjadi
node-node tertentu.

4 / 12
chapter1.md 2/16/2023

DOM memungkinkan program untuk memproses dan memanipulasi halaman web seperti sebuah dokumen,
membuat halaman web dinamis dan interaktif. Dengan menggunakan JavaScript, kita bisa mengubah element
HTML, memasukkan elemen baru, menghapus elemen, atau memanipulasi elemen lainnya pada halaman web,
dan membuat halaman web tersebut menjadi lebih dinamis.

Gambar 2. Struktur DOM halaman html

Gambar di atas menunjukkan bagaimana susunan DOM (Dokumen Objek Model) dari kode HTML. Tag <html>,
yaitu tag paling atas, disebut sebagai tag "akar" karena semua kode HTML lain harus berada di dalamnya.
Konsep susunan DOM sangat penting untuk dipahami, terutama sebagai dasar untuk belajar JavaScript.
Gambar tersebut bisa dilihat seperti gambar keluarga. Misalnya, tag <head> dan tag <body> berada tepat di
bawah tag , sehingga tag <head> dan tag <body> disebut sebagai "anak" dari tag <html>, dan tag <html>
disebut sebagai "induk". Begitu juga dengan tag <h1> dan <p> yang merupakan anak dari tag <body>.
Gambar DOM yang kita bahas di sini adalah versi sederhana dari kode HTML yang sebenarnya. Untuk halaman
yang lebih kompleks, gambar bisa mencapai 10 tingkatan atau lebih.
Membuat Komentar
Untuk membuat komentar, kadang-kadang kita membutuhkan untuk menambahkan catatan di dalam kode
program kita, seperti tanggal dan waktu program dibuat atau apa tujuannya. Keterangan ini disebut komentar.
Dalam HTML, komentar dibuat menggunakan tag . Semua teks antara kedua tag ini akan dianggap sebagai
komentar dan tidak akan diproses atau ditampilkan oleh browser web.

<!DOCTYPE html>
<!--
Author: Arif Wicaksono Septyanto
Author URL: http://www.codelearn.com
Version: xxxx
License: GNU General Public License v2 or later
-->
<html>
<!-- start head section -->

<head>
<meta charset="UTF-8" />

5 / 12
chapter1.md 2/16/2023

<title>Belajar HTML</title>
</head>
<!-- start body section -->

<body>
<!-- main article -->
<h1>Belajar HTML</h1>
<p>paragraf pertama</p>
</body>
</html>

Perbedaan utama antara web statis dan dinamis adalah bagaimana konten dari situs web diterbitkan dan
ditampilkan kepada pengguna.
Web statis memiliki halaman yang tidak berubah seiring waktu dan konten dari halaman tersebut diterbitkan
seperti apa adanya. Jika ingin memperbarui konten, maka harus dilakukan manual oleh pemilik situs web.
Sementara itu, web dinamis memiliki halaman yang dapat berubah secara real-time sesuai dengan interaksi
yang dilakukan oleh pengguna. Konten dari halaman web dinamis diterbitkan oleh aplikasi server yang berjalan
di latar belakang dan memberikan hasil yang berbeda untuk setiap pengguna yang mengakses halaman.
!!! {} Dengan kata lain, web statis memberikan tampilan yang sama untuk setiap pengguna, sementara web
dinamis memiliki tampilan yang berbeda-beda sesuai dengan interaksi pengguna.
Aturan dasar penulisan bahasa HTML
Berikut adalah aturan dalam penulisan bahasa HTML:
. Semua tag HTML harus ditulis dengan huruf kecil.
. Setiap tag harus dibuka dan ditutup dengan tanda "<" dan ">".
. Beberapa tag harus memiliki tag penutup, meskipun ada beberapa tag yang tidak memerlukannya
(seperti tag "br" atau "hr").
. Tag harus dalam urutan yang benar untuk memastikan halaman web ditampilkan dengan benar.
. Atribut tag harus ditulis dengan nama yang tepat dan nilai harus dalam tanda kutip.
. Gunakan tag semantik seperti "header", "nav", "main", "article", "section", "aside", dan "footer" untuk
memberikan makna pada konten halaman web.
. Gunakan tag headings (h1-h6) untuk membuat tajuk dan sub-tajuk dalam halaman web.
. Gunakan tag paragraf "p" untuk membuat paragraf teks dan tag "br" untuk membuat baris baru.
. Gunakan tag list untuk membuat daftar dan tag link "a" untuk membuat tautan ke halaman web lain.
. Gunakan tag image "img" untuk memasukkan gambar dan tag table "table" untuk membuat tabel.
Whitespace
Whitespace merupakan terminologi yang mengacu pada karakter spasi yang tidak terlihat pada layar, seperti
spasi, tab, dan karakter enter (juga dikenal sebagai carriage returns). Dalam HTML, whitespace diabaikan,
bahkan jika ditempatkan di dalam teks. Misalnya, kedua kode HTML di bawah ini akan menghasilkan tampilan
yang sama.

6 / 12
chapter1.md 2/16/2023

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Jangan diganggu! lagi serius belajar.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Sedang belajar bahasa HTML</p>
</body>
</html>

Walaupun whitespace tidak akan diproses, menyisipkan spasi dan tab ke dalam kode HTML akan membuatnya
lebih mudah dibaca.
Membuat Komentar
Untuk membuat komentar dalam HTML, gunakan tag komentar "". Semua teks yang berada di antara tag ini
akan diabaikan oleh browser dan tidak akan tampil pada halaman web. Berikut adalah contoh penggunaan
komentar:

<!-- Ini adalah komentar dalam HTML -->

Komentar ini berguna untuk memberikan catatan atau deskripsi dalam kode Anda sehingga mudah dipahami
oleh orang lain atau oleh Anda sendiri ketika membuka kembali kode tersebut.

<!DOCTYPE html>
<!--
Author: Arif Wicaksono S
Author URL: http://www.SCI- Indonesia.com
Version: V2
License: GNU General Public License v2 or later
-->
<html>
7 / 12
chapter1.md 2/16/2023

<!-- start head section -->

<head>
<meta charset="UTF-8" />
<title>Belajar HTML</title>
</head>
<!-- start body section -->
<body>
<!-- main article -->
<h1>Belajar HTML</h1>
<p>Paragraf Pertama</p>
</body>
</html>

Head Element
Head element pada HTML memiliki fungsi sebagai berikut:
. Menyimpan metadata: Head element menyimpan informasi metadata tentang halaman web, seperti judul
halaman, deskripsi halaman, dan kata kunci halaman.
. Link ke file eksternal: Head element juga digunakan untuk menautkan file eksternal seperti CSS dan
JavaScript yang digunakan untuk mengatur tampilan dan perilaku halaman web
. Mendefinisikan relasi: Head element juga digunakan untuk membuat relasi antar halaman web, seperti
membuat tautan ke halaman lain atau menentukan icon halaman.
. Memberikan instruksi browser: Head element juga menyimpan instruksi untuk browser seperti karakter
set halaman web, mode rendering, dan header HTTP.
. Secara umum, head element bertanggung jawab untuk menyimpan informasi yang penting bagi halaman
web tetapi tidak tampil pada halaman web itu sendiri.
contoh penerapannya dapat dilihat sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="author" content="Duniailkom" />
<meta
name="keywords"
content="Tutorial HTML, Tutorial CSS,
Tutorial JavaScript, Tutorial PHP, Tutorial MySQL"
/>
<meta name="description" content="Situs Belajar Web Programming" />
<meta http-equiv="refresh" content="60" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>

8 / 12
chapter1.md 2/16/2023

Mohon <strong>jangan diganggu</strong>, lagi serius belajar

<em>HTML</em>
</p>
</body>
</html>

Link Element
Link element pada HTML berfungsi untuk menautkan file eksternal seperti CSS dan JavaScript ke halaman web.
Ini memungkinkan browser untuk mengambil file eksternal dan memuatnya bersama dengan halaman web
untuk membuat tampilan dan perilaku halaman web.
Berikut adalah contoh penggunaan link element untuk menautkan file CSS ke halaman web:

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Di sini, "rel" adalah atribut yang menentukan relasi antara file CSS dan halaman web, "type" adalah atribut yang
menentukan jenis file, dan "href" adalah atribut yang menentukan lokasi file CSS.
Link element juga bisa digunakan untuk menautkan halaman web lain, icon halaman, feed RSS, dan banyak lagi.
Link element sangat penting bagi halaman web karena memungkinkan halaman web untuk terhubung dengan
file dan halaman web lain.
Membuat Favicon
Untuk membuat favicon (icon situs) dalam HTML, pertama-tama Anda perlu membuat atau menemukan ikon
yang diinginkan. Ukuran yang umum digunakan adalah 16x16 px atau 32x32 px. Ikon tersebut harus disimpan
sebagai format .ico atau .png.
Kemudian, tambahkan link element berikut ke head element halaman web Anda:

<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

atau

<link rel="icon" type="image/png" href="path/to/favicon.png" />

Atribut "rel" menentukan bahwa file yang ditautkan adalah icon situs, atribut "type" menentukan jenis file, dan
atribut "href" menentukan lokasi file ikon.
Script Element
9 / 12
chapter1.md 2/16/2023

Untuk membuat script element pada HTML, tambahkan tag <script> di dalam tag <body> atau <head> dari
halaman HTML Anda. Di dalam tag <script> tambahkan kode JavaScript Anda. Berikut adalah contoh dasar
menambahkan script pada halaman HTML:

<html>
<head>
<title>Halaman Saya</title>
</head>
<body>
<h1>Halaman Saya</h1>
<p>Ini adalah halaman saya.</p>
<script>
// kode JavaScript Anda di sini
alert("Selamat Datang!");
</script>
</body>
</html>

Anda juga dapat memasukkan script dari file eksternal dengan menambahkan atribut src pada tag <script>.
Berikut adalah contoh menambahkan script dari file eksternal:

<html>
<head>
<title>Halaman Saya</title>
<script src="script.js"></script>
</head>
<body>
<h1>Halaman Saya</h1>
<p>Ini adalah halaman saya.</p>
</body>
</html>

Perhatikan bahwa lokasi file script.js harus ditentukan dengan benar agar script dapat berfungsi.
Title Element
Untuk membuat title element pada HTML, tambahkan tag <title> di dalam tag <head> dari halaman HTML
Anda. Title element memberikan judul halaman yang akan ditampilkan di tab browser. Berikut adalah contoh
dasar menambahkan title pada halaman HTML:

<html>
<head>
<title>Halaman Saya</title>
</head>
<body>
<h1>Halaman Saya</h1>
<p>Ini adalah halaman saya.</p>

10 / 12
chapter1.md 2/16/2023

</body>
</html>

Judul yang ditentukan dalam tag <title> akan ditampilkan di tab browser dan juga sebagai judul untuk
halaman saat ditemukan oleh mesin pencari. Pastikan untuk memilih judul yang informatif dan representatif
untuk halaman web Anda.
Penutup: Elemen Head
Dalam bab ini, kita telah membahas beberapa hal tentang elemen atau tag HTML yang biasanya ditemukan di
bagian <head> dari sebuah halaman web. Sebagai penutup, saya akan menunjukkan file index.html dengan
semua tag yang sudah kita pelajari sejauh ini. Berikut adalah kode HTML lengkapnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="author" content="Duniailkom" />
<meta
name="keywords"
content="Tutorial HTML, Tutorial CSS, Tutorial JavaScript, Tutorial
PHP, Tutorial MySQL"
/>
<meta name="description" content="Situs Belajar Web Programming" />
<meta http-equiv="refresh" content="60" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<link href="style.css" type="text/css" rel="stylesheet" media="all" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
<script
type="text/javascript"

src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"
></script>
<![endif]-->
<script src="javascript.js"></script>
<title>Belajar Head Element HTML</title>
<style media="all">
/* kode CSS disini*/
</style>
</head>
<body>
<h1>Belajar Head Element HTML</h1>
<p>
Mohon <strong>jangan diganggu</strong>, lagi serius belajar
<em>HTML</em>
</p>
</body>
</html>
11 / 12
chapter1.md 2/16/2023

Sampai disini kita telah membahas sebagian besar tag beserta atribut yang sering muncul di bagian <head>
dari sebuah file HTML.

12 / 12