Modul 9 Praktukum Pengantar Teknologi Informasi

Dasar pemrograman Web

A. TUJUAN

1. Memahami dasar pemrograman web

A. PERALATAN DAN BAHAN

1. Komputer/Smart Phone
2. Google Colab

C. TEORI dan PRAKTIKUM

1. Dasar Pemrograman Web
HTML (HyperText Markup Language):

 HTML adalah bahasa markup yang digunakan untuk membangun struktur dan konten
dasar dari halaman web.
 HTML terdiri dari tag-tag yang menggambarkan elemen-elemen dalam halaman web.
 Tag HTML digunakan untuk mengatur judul, paragraf, gambar, tautan, tabel, formulir,
dan elemen-elemen lainnya.
 HTML menggunakan struktur pohon atau struktur hierarki yang disebut DOM
(Document Object Model) untuk merepresentasikan halaman web.

CSS (Cascading Style Sheets):

 CSS digunakan untuk mengatur tampilan dan gaya visual dari elemen-elemen dalam
halaman web.
 Dengan CSS, Anda dapat mengubah warna, ukuran, tata letak, jenis font, dan gaya lainnya
dalam halaman web.
 CSS bekerja dengan prinsip kaskade, di mana Anda dapat menerapkan gaya yang berbeda
untuk elemen-elemen berdasarkan hierarki dan selektor.
JavaScript:

 JavaScript adalah bahasa pemrograman yang digunakan untuk memberikan interaktivitas

dan fungsionalitas dinamis pada halaman web.
 JavaScript dapat digunakan untuk memanipulasi elemen HTML, menangani peristiwa
(event), mengambil input pengguna, dan berinteraksi dengan server melalui AJAX
(Asynchronous JavaScript and XML).
 JavaScript juga dapat digunakan untuk memvalidasi formulir, mengatur animasi,
membuat perhitungan matematika, dan banyak lagi.

DOM (Document Object Model):

 DOM adalah representasi struktur objek dari dokumen HTML yang dapat diakses dan
dimanipulasi melalui JavaScript.
 Dengan menggunakan DOM, Anda dapat mengubah konten, gaya, dan perilaku elemen-
elemen dalam halaman web secara dinamis.
 DOM memungkinkan Anda menambahkan, menghapus, atau memodifikasi elemen,
atribut, dan konten dalam halaman web.

Pengembangan Responsif (Responsive Web Development):

 Responsif Web Development adalah pendekatan dalam desain web yang membuat
halaman web dapat menyesuaikan diri dengan berbagai perangkat dan ukuran layar.
 Dalam Responsif Web Development, Anda menggunakan media query dan teknik desain
tata letak yang fleksibel untuk mengatur tampilan dan tata letak elemen dalam halaman
web.
 Tujuan dari Responsif Web Development adalah memberikan pengalaman pengguna yang
optimal, baik pada desktop, tablet, maupun perangkat mobile.

HTTP (Hypertext Transfer Protocol):

 HTTP adalah protokol komunikasi yang digunakan untuk mengirimkan data antara server
web dan klien (browser).
 HTTP menggunakan metode (GET, POST, PUT, DELETE) untuk mengatur tindakan yang
dilakukan pada sumber daya web.
 Ketika klien melakukan permintaan (request) ke server, server akan memberikan respons
(response) yang berisi status, header, dan konten yang diminta.

Web Development Tools:

 Ada berbagai alat dan lingkungan pengembangan web yang dapat membantu dalam
proses pengembangan aplikasi web.
 Contohnya adalah editor kode seperti Visual Studio Code, Sublime Text,.
Latihan 1
Simpan dengan nama login.html
Latihan 2
Simpan dengan file home.html
Latihan 3
Simpan dengan profile.html
Latihan 4
Simpan dengan animations.html
Latihan 5
Simpan dengan nama logout.html

Setelah anda menyimpan kelima file diatas silahkan buka file login.html
Silahkan login dengan akun berikut
Username : admin
Password : 123456
Jika anda salah dalam menginput username dan password maka aka nada pesan
username dan password salah. Dan jika berhasil akan masuk ke halaman home
seperti gambar dibawah ini
Pada halaman home terdapat empat menu, (1) home, (2) profile, (3) animations,
dan (4) logout. Silahkan coba klik profile maka akan tampil gambar sebagai
berikut

Silahkan coba klik menu animations maka akan tampil sebagai berikut

Silahkan klik logout maka akan tampil halaman sebagai berikut

Dalam beberapa detik kemudian halaman akan berubah ke halaman login kembali

E. TUGAS
1. Belajar lah lebih giat lagi