Scribd
Unggah
22 tayangan9 halaman

Modul 8 Prak PTI

Diunggah oleh

exozai26
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
22 tayangan9 halaman

Modul 8 Prak PTI

Diunggah oleh

exozai26
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

Modul 8 Praktukum Pengantar Teknologi Informasi

Dasar pemrograman Web

A. TUJUAN

1. Memahami dasar pemrograman python


2. Memahami loop control flow

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 index.html


 <!DOCTYPE html>: Mendefinisikan tipe dokumen sebagai HTML.
 <html lang="en">: Mengawali elemen utama dari halaman web.
 <head>: Bagian ini berisi informasi tentang halaman web seperti karakter
encoding, viewport, judul halaman, dan CSS styling.
 <meta charset="UTF-8">: Mendefinisikan karakter encoding yang digunakan oleh
halaman web.
 <meta name="viewport" content="width=device-width, initial-scale=1.0">:
Mengatur tampilan responsif halaman web pada berbagai perangkat dengan lebar
yang berbeda.
 <title>Contoh Halaman Web</title>: Menentukan judul halaman web yang akan
ditampilkan pada tab browser.
 <style>: Bagian ini digunakan untuk menulis CSS styling untuk mengatur tampilan
halaman web.
 <body>: Bagian utama yang berisi konten yang akan ditampilkan pada halaman
web.
 <header>: Elemen ini digunakan untuk menyajikan bagian kepala halaman web,
biasanya berisi judul atau logo.
 <h1>Selamat Datang di Halaman Web</h1>: Heading level 1 yang menampilkan
judul halaman web.
 <nav>: Elemen ini digunakan untuk menyajikan navigasi situs web, biasanya
berupa daftar tautan.
 <ul> dan <li>: Digunakan untuk membuat daftar tak-berurutan (unordered list)
yang berisi tautan ke halaman lain.
 <section>: Elemen ini digunakan untuk membagi halaman menjadi bagian-bagian
yang terpisah dan memiliki konten yang terkait.
 <!-- Konten halaman utama -->: Komentar HTML yang memberikan penjelasan
tentang konten pada bagian tersebut.
 <h2>Selamat Datang di Halaman Utama</h2>: Heading level 2 yang menampilkan
judul untuk konten halaman utama.
 <p>Ini adalah halaman utama dari contoh halaman web.</p>: Paragraf teks yang
menjelaskan tentang konten halaman utama.
 <footer>: Bagian ini berisi informasi yang umumnya ditempatkan di bagian bawah
halaman web, seperti hak cipta atau tautan ke halaman lain.
Setelah anda menyimpan file tersebut silahkan buka file tersebut

Latihan 2
Simpan dengan tentang.html
Latihan 3

Simpan dengan layanan.html


Latihan 4
Simpan dengan nama kontak.html

E. TUGAS

1. Buatlah tautan (link) baru di dalam navigasi untuk halaman "Portofolio"


dengan file terpisah "portofolio.html".
2. Tambahkan sebuah gambar logo di dalam elemen <header> pada halaman
web tersebut.

Anda mungkin juga menyukai