MODUL 1

PENGENALAN PENGGUNAAN SOFTWARE

A. TUJUAN PRAKTIKUM
a. Mahasiswa mampu menginstall software / perangkat lunak untuk desain web
b. Mahasiswa mampu menulis kode elemen dasar web
c. Mahasiswa mampu mengaplikasikan elemen dasar untuk menampilkan informasi
secara kreatif.

B. ALOKASI WAKTU 1 x 50 menit

C. DASAR TEORI
Sekilas Tentang WEB
World Wide Web yang kemudian lebih dikenal dengan WEB saja, adalah salah satu teknologi yang
digunakan dalam internet. Saking terkenalnya kebanyakan orang mengira internet = WEB. Tak
disangkal kehadiran WEB membuat internet semakin menarik dan berperan besar dalam mengubah
paradigma penyebaran informasi. Tahun 1990 World Wide Web mulai dikembangkan oleh CERN
(Laboratorium Fisika Partikel di Swiss) berdasarkan proposal yang dibuat oleh Tim Berners-Lee.
Namun demikian, WWW browser yang bernama baru lahir dua tahun kemudian, tepatnya pada
tahun 1992 dengan nama Viola. Viola diluncurkan oleh Pei Wei dan didistribusikan bersama CERN
WWW.

Mekanisme kerja WEB

Terdapat 2 komponen utama:

1. Web server merupakan sebuah aplikasi perangkat lunak. Aplikasi web server ini dijalankan
pada sebuah komputer yang disebut dengan server. Web server adalah salah satu jenis
perangkat lunak yang menyediakan layanan halaman (dokumen) web yang dapat diakses
diseluruh dunia melalui internet. Web server akan melayani permintaan akses halaman web
dengan bantuan protokol-protokol komunikasi terutama HTTP. Beberapa contoh aplikasi web
server yang terkenal misalnya Ms. Internet Information Server (IIS) yang memiliki platform
Windows dan Apache yang memiliki multiplatform.
2. Web Browser adalah perangkat lunak (software) yang digunakan untuk menampilkan dokumen
HTML. Perangkat lunak ini dioperasikan pada komputer pengguna diseluruh dunia. Web
browser akan membantu pengguna mengakses halaman web yang disediakan oleh sebuah web
server serta membantu pengguna dalam hal navigasi. Pada saat ini ada beberapa browser yang
 dikembangkan oleh berbagai vendor, antara lain Internet Explorer yang dikembangkan oleh
Microsoft dan Navigator yang dikembangkan oleh Netscape.

Protokol Komunikasi Client- Server

Protokol merupakan aturan tata cara yang diimplementasikan di dalam mekanisme komunikasi di
dalam suatu jaringan komputer. Aturan ini diperlukan supaya proses komunikasi yang terjadi dapat
teratur dan sistematis sehingga dapat di rancang suatu model komunikasi untuk berbagai keperluan.
Pada saat ini telah tercipta beberapa protocol yang digunakan dalam rangka berkomunikasi melalui
jaringan komputer. Berikut ini adalah beberapa protokol yang ada.

1. Transmission Control Protocol (TCP). Mengatur tata cara pemaketan data dari pengirim dan
pembukaan data pada komputer penerima.
2. Internet Protocol (IP) Mengatur mekanisme pengiriman data dari komputer pengirim hingga
komputer penerima.
3. HyperText Transfer Protocol (HTTP) Mengatur mekanisme transfer dan penampilan halaman
web.
4. File Transfer Protocol Mengatur mekanisme transfer file di dalam jaringan komputer.
5. EMail Protocol Mengatur mekanisme pengiriman dan penerimaan email.
Hypertext Transfer Protocol (HTTP) merupakan salah satu protokol yang digunakan untuk
mengatur mekanisme transfer serta penampilan halaman (dokumen) web. Protokol ini pertama kali
ditemukan oleh Tim Berners Lee dan masih terus dikembangkan hingga saat ini. Protokol ini akan
mengatur mekanisme komunikasi antara web server sebagai penyedia informasi (halaman web)
dengan web browser. Mekanisme komunikasi yang mungkin terjadi misalnya pengambilan
dokumen, peletakan resource pada web server .

Uniform Resource Locator (URL) merupakan sebuah sistem pemberian alamat yang dilakukan
pada dunia internet. Alamat di internet dapat dianalogikan dengan alamat. Sebagai contoh, sebuah
alamat rumah secara umum akan memiliki nama jalan, nomor rumah, kalurahan, kecamatan dan
seterusnya. Alamat di internet juga memiliki sebuah pola yang diatur dengan URL ini.

Contoh: htth://www.uns.ac.id/fkip/ptik/nilai.html

http://www → protocol yang digunakan

uns → nama server

ac.id → nama domain

 fkip/ptik → path informasi

nilai.html → file yang diakses

Secara teknis, web adalah sebuah sistem dimana informasi dalam bentuk teks, gambar, suara, dan
lain-lain yang tersimpan dalam sebuah internet webserver dipresentasikan dalam bentuk hypertext.
Informasi di web dalam bentuk teks umumnya ditulis dalam format HTML (Hypertext Markup
Language). Informasi lainnya disajikan dalam bentuk grafis (dalam format GIF, JPG, PNG), suara
(dalam format AU, WAV), dan objek multimedia lainnya (seperti MIDI, Shockwave, Quicktime
Movie, 3D World).

Web dapat diakses oleh perangkat lunak web client yang secara populer disebut sebagai browser.
Browser membaca halaman-halaman web yang tersimpan dalam webserver melalui protokol yang
disebut HTTP (Hypertext Transfer Protocol).

Sebagai dokumen hypertext, dokumen-dokumen di web dapat memiliki link (sambungan) dengan
dokumen lain, baik yang tersimpan dalam webserver yang sama maupun di webserver lainnya.
Link memudahkan para pengakses web berpindah dari satu halaman ke halaman lainnya, dan
"berkelana" dari satu server ke server lain. Kegiatan penelusuran halaman web ini biasa diistilahkan
sebagai browsing, ada juga yang menyebutnya sebagai surfing (berselancar).

Mekanisme kerja WEB

Berkaitan dengan bahasan materi matakuliah ini, yaitu Desain WEB. Yang lebih tepat

D. LANGKAH-LANGKAH
a. Notepad++
1. Download notepad++ melalui link berikut https://notepad-plus-plus.org/
2. Pilih bahasa yang akan digunakan, kemudian klik OK
3. Setelah itu akan muncul panduan instalasi, kemudian klik next untuk
melanjutkan

4. Kemudian akan muncul License Agreement, klik I Agree

5. Pilih lokasi penyimpanan file instalasi,untuk memilih lokasi klik tombol

Browse, kemudian klik next
6. Terakhir pilih komponen atau fitur yang akan digunakan dengan cara memberi
tanda checklist atau centang. Klik install dan tunggu proses install selesai.

7. Setelah itu klik finish, maka Notepad++ sudah terinstal

b. Sublime
1. Download Sublime 3 melalui link berikut https://www.sublimetext.com/3
2. Jalankan setup dan klik next

3. Pilih lokasi penyimpanan file instalasi,untuk memilih lokasi klik tombol

Browse, kemudian klik next

4. Centang “add to explorer context menu” jika menghendaki ada menu sublime
pada context menu Windows. Lanjutkan klik next
5. Klik install untuk memulai instalasi. Tunggu sampai selesai
 6. Tampilan Sublime

c. Inspect Element
1. Inspect element adalah salah satu fitur dari web browser untuk melihat bagian
kode di dalam sebuah tampilan halaman web. Dapat digunakan di chrome atau
firefox.
2. Pada chrome, klik pada icon tiga titik di pojok kanan atas lalu pilih more tools
→ developer tools
3. Inspect element muncul pada bagian bawah browser

4. Pada firefox, klik pada icon tiga garis di pojok kanan atas lalu pilih more tools
→ web developer → toogle tools
5. Inspect element muncul pada bagian bawah browser

6. Segala perubahan yang dilakukan pada element HTML di inspect element

hanya bersifat sementara.