TIB22 – PERANCANGAN
PEMROGRAMAN WEB
Capaian Pembelajaran Mata Kuliah
1. Mahasiswa mampu menjelaskan teori, konsep dasar
hypertext, dan konsep desain halaman website (C2,
A2)
2. Mahasiswa mampu membuat dan menggunakan
berbagai element HTML5, CSS, PHP, dan basis data
untuk mengembangkan suatu proyek website (C3,
A3)
3. Mahasiswa mampu merancang dan mengembangkan
proyek website yang dinamis di berbagai proses
bisnis dunia industri (C4, A4)
DASAR PEMROGRAMAN WEB
Pertemuan ke-1 dan 2
Diadopsi dari sumber :
1 2
Diadopsi dari sumber :
No Judul Pengarang Penerbit Edisi Kota Tahun Jenis
PT Elex
7 in 1 Pemrograman
1 Rohi Abdulloh Media 1 Jakarta 2018 Utama
Web untuk Pemula
Komputindo
Yudho Yudhanto PT Elex
Mudah Menguasai
2 dan Helmi Adi Media 1 Jakarta 2019 Utama
Framework Laravel
Prasetyo Komputindo
Sub-CPMK
Mahasiswa mampu menjelaskan konsep dasar
pemrograman web dan struktur dasar HTML5 (C2, A2)
Materi
1. Pengertian Website
2. Bahasa Pemrograman Web
3. Aplikasi Pengembang Web
4. Unsur HTML5
5. Struktur Dasar HTML5
6. Pemformatan Paragraf dan Teks
1. Pengertian Website
1.1 Pengertian Website
• Website dapat diartikan sebagai kumpulan
halaman yang berisi informasi data digital
baik berupa teks, gambar, animasi, suara dan
video atau gabungan dari semuanya yang
disediakan melalui jalur koneksi internet
sehingga dapat diakses dan dilihat oleh semua
orang di seluruh dunia.
1.2 Jenis Website
• Secara umum, website dibagai menjadi 3 jenis
a. Website Statis
b. Website Dinamis
c. Website Interaktif
1.2.1 Website Statis
• Website statis yaitu jenis website yang isinya
tidak diperbaruhi secara berkala, sehingga
isinya dari waktu ke waktu akan selalu tetap.
• Website jenis ini biasanya digunakan untuk
menampilkan profil dari pemilik website
seperti profil perusahaan atau organisasi.
1.2.1 Website Statis
(Lanj..)
[Link]
1.2.2 Website Dinamis
• Website dinamis yaitu jenis website yang
isinya terus diperbaruhi secara berkala oleh
pengola web atau pemilik website.
• Website jenis ini banyak dimiliki oleh
perusahaan atau perorangan yang aktivitas
bisnisnya memang berkaitan dengan internet.
1.2.2 Website Dinamis
(Lanj..)
[Link]
1.2.3 Website Interaktif
• Website interaktif termasuk dalam kategori
website dinamis, dimana isi informasinya
selalu diperbaruhi dari waktu ke waktu.
• Isi informasi website interaktif tidak hanya
diubah oleh pengelola website tetapi lebih
banyak dilakukan oleh pengguna website itu
sendiri.
1.2.3 Website Interaktif
(Lanj..)
[Link]
2. Bahasa Pemrograman Web
2.1 Bahasa
Pemrograman Web
• Bahasa Pemrograman Web terdiri dari
beberapa unsur bahasa.
• Terdapat 5 bahasa utama yang biasa
digunakan dalam membuat website, dimana
masing-masing memiliki perannya sendiri.
HTML PHP
CSS SQL
JavaScript
2.2 HTML
• HTML (Hypertext Markup Language) adalah
bahasa markup utama yang digunakan untuk
menampilkan halaman web di internet.
• HTML berperan sebagai pembentuk struktur
halaman website yang menempatkan setiap
elemen website sesuai layout yang diinginkan.
2.3 CSS
• CSS (Cascading Style Sheets) berperan sebagai
pembentuk desain website dengan mengatur
setiap elemen HTML agar tampil menarik
pada browser.
• CSS biasanya disimpan dalam sebuah file
berekstensi .css
2.4 JavaScript
• JavaScript berperan sebagai bahasa yang
memproses data pada sisi client serta dapat
memanipulasi HTML dan CSS secara dinamis.
• JavaScript biasanya disimpan dalam sebuah
file berekstensi .js
2.5 PHP
• PHP (Hypertext Preprocessor) berperan
sebagai pemroses data pada sisi server sesuai
yang diminta oleh client menjadi informasi
yang siap ditampilkan, dan sebagai
penghubung aplikasi web dengan database.
• PHP biasanya disimpan dalam sebuah file
berekstensi .php
2.6 SQL
• SQL (Structured Query Language) berperan
sebagai bahasa yang mengatur transaksi data
antara aplikasi dengan database sebagai
tempat penyimpanan data.
• Database yang biasa digunakan diantaranya
MySQL, Oracle, SQL Server.
• SQL biasanya disimpan dengan ekstensi .sql
3. Aplikasi Pengembang Web
3.1 Text Editor
• Text editor memiliki fungsi sebagai tempat
pengetikan skrip program, namun untuk
menampilkan hasilnya memerlukan web
browser.
• Text editor lebih ringan dan lisensinya
kebanyakan open source.
• Contoh text editor yakni Notepad,
Notepad++, Sublime Text, Bracket, dan
sebagainya.
3.2 Web Browser
• Web browser digunakan untuk menampilkan
dan mengetes hasil program.
• Contoh web browser yakni Google Chrome,
Firefox, Microsoft edge, Internet Explorer dan
lain sebagainya.
3.3 Web Server
• Web server merupakan perangkat lunak yang
berfungsi untuk menerima permintaan (request)
melalui protokol HTTP (Hypertext Transfer
Protocol) dari client kemudian mengirimkan
kembali dalam bentuk halaman-halaman web.
• Contoh yang termasuk web server adalah
Apache.
• Dalam penggunaannya, biasanya satu paket
dengan PHP dan MySQL, contohnya XAMPP,
AppServ dan lain sebagainya.
4. Unsur HTML5
4.1 Mengenal HTML5
• HTML biasanya disimpan dalam sebuah file
berekstensi .html
• HTML terdiri atas unsur-unsur yang
membentuk struktur skrip HTML yaitu:
– Tag
– Atribut
– Elemen
4.2 Tag
• Tag adalah simbol khusus (markup) berupa dua
karakter “<” dan “>” yang mengapit suatu teks
sebagai nama tag.
• Contohnya <html> adalah tag dengan nama html.
• Sebagian besar tag memiliki tag pembuka dan tag
penutup yang membatasi pengaruh dari tag
tersebut.
• Penutup tag ditambah simbol “/” setelah tanda “<”,
misalnya </html> yang merupakan penutup tag
<html>
4.3 Element
• Sepasang tag yaitu tag pembuka dan tag
penutup serta konten yang berada
diantaranya secara keseluruhan dikenal
sebagai element.
4.4 Atribut
• Atribut yaitu property yang mengatur bagaimana
elemen dari suatu tag akan ditampilkan.
• Atribut ditulis di dalam simbol tag setelah nama
tag dengan dipisahkan oleh spasi.
• Atribut ada yang memiliki nilai dan ada yang
tidak memiliki nilai.
• Nilai suatu atribut ditulis di dalam tanda petik
(“…”) dan dipisahkan dengan simbol sama
dengan (=) dari nama atribut.
4.4 Atribut (Lanj..)
• Karakteristik atribut pada HTML:
– Atribut hanya ditulis pada tag pembuka
– Setiap tag memiliki atribut yang berbeda-beda yang dapat
diterapkan pada tag tersebut
– Beberapa atribut ada yang dapat diterapkan ke semua tag
yang disebut global attribute. Misalnya: class, id, style, dan
lain sebagainya.
– Sebuah tag dapat ditulis dengan satu atribut, banyak
atribut, atau tanpa atribut sama sekali.
– Jika tag ditulis dengan banyak atribut, masing-masing
atribut dipisahkan oleh spasi.
4.4 Atribut (Lanj..)
• Bentuk Umum:
<namaTag atribut=“nilai”> … </namaTag>
• Contoh:
5. Struktur Dasar HTML5
5.1 Struktur Dasar
HTML5
• Struktur artikel di situs web berita mirip
dengan struktur artikel di koran.
• Setiap artikel terdiri dari judul, paragraph teks,
dan beberapa gambar. (Kadang-kadang
gambar mungkin digantikan oleh video.)
5.1 Struktur Dasar
HTML5 (Lanj..)
6. Pemformatan Paragraf dan Teks
6.1 Paragraf
• Paragraf dibuat dengan tag <p> … </p>
• Atribut yang sering digunakan dalam tag ini
adalah align.
• Nilai yang dapat diberikan pada atribut align
antara lain left, center, right, dan
justify.
• Setiap penggunaan tag <p> akan berganti ke
baris baru. Jika ingin pindah baris tanpa memulai
tag <p>, dapat menggunakan tag <br>
6.1 Paragraf (Lanj..)
6.2 Judul
• Judul dalam HTML dibuat menggunakan tag
<h1> sampai <h6>.
• Tag <h1> menghasilkan judul dengan ukuran
huruf paling besar.
• Tag <h6> menghasilkan judul dengan ukuran
paling kecil.
6.2 Judul (Lanj..)
Code Output
6.3 Style Teks
Tag Kegunaan
<b> . . . </b> Membuat teks tebal
<i> . . . </i> Menjadikan teks miring
<u> . . . </u> Membuat teks bergaris bawah
<strike> . . . </strike> Membuat teks bergaris tengah
<strong> . . . </strong> Menunjukkan teks penting dengan teks dicetak tebal.
<em> . . . </em> Menunjukkan teks penting dengan teks dicetak miring.
<small> . . . </small> Membuat teks lebih kecil dari umumnya
<mark> . . . </mark> Membuat teks dengan background kuning, seperti teks yang
ditandai.
<del> . . . </del> Menunjukkan teks yang dihapus dengan teks dicoret tengah
<ins> . . . </ins> Menunjukkan teks yang disisipkan dengan teks bergaris
bawah
6.3 Style Teks (Lanj..)
6.4 Subscript dan Superscript
• Dalam penulisan rumus matematika, sering
ditemui penulisan huruf yang ditulis lebih
kecil dan posisinya lebih ke atas yang biasa
disebut superscript (<sup>).
• Sedangkan penulisan huruf yang ditulis lebih
kecil dan posisinya lebih ke bawah yang
biasanya disebut subscript (<sub>).
6.4 Subscript dan Superscript
(Lanj..)
Code Output
6.5 Simbol Khusus
• Setiap simbol memiliki kode nama dan kode
nomor.
• Untuk menambahkan simbol-simbol tertentu
pada HTML dapat dilakukan dengan
menuliskan kode nama atau kode nomor dari
simbol tersebut.
6.5 Simbol Khusus
(Lanj..)
• Berikut daftar kode nama dan kode nomor simbol
yang sering digunakan dalam HTML
Kode Nomor Kode Nama
Simbol Deskripsi
HTML HTML
“ Kutip ganda " "
& Simbol dan & &
± Simbol lebih kurang ± &pkusmn
≠ Simbol sama dengan dicoret ≠ &ne
© Simbol copyright © ©
Simbol registered trademark ® ®
®
Non-breaking space    
6.5 Simbol Khusus
(Lanj..)
Code Output
6.6 Teks Komentar
• Komentar adalah baris text yang tidak
ditampilkan dalam halaman website.
• Fungsinya untuk memberi keterangan pada
skrip.
• Untuk menandai sebuah komentar
menggunakan tag <!-- . . . -->
6.6 Teks Komentar
(Lanj..)
Code Output
Ringkasan
• Website dibagai menjadi 3 jenis yakni website
statis, website dinamis, dan website interaktif.
• HTML adalah bahasa markup utama yang
digunakan untuk menampilkan halaman web di
internet.
• HTML biasanya disimpan dalam sebuah file
berekstensi .html
• HTML terdiri atas unsur-unsur yang membentuk
struktur skrip HTML yaitu tag, atribut, dan
elemen.
Terima Kasih