Scribd
Unggah
215 tayangan

BAB 3 HTML, CSS, Dan JavaScript

Modul ini membahas HTML, CSS, dan JavaScript. HTML digunakan untuk membuat struktur dasar halaman web, CSS untuk mengatur tampilan, dan JavaScript untuk interaktivitas. Modul ini berdurasi 170 menit yang terdiri atas pengenalan materi, latihan koding, dan pengayaan. Tujuannya agar mahasiswa memahami konsep ketiga bahasa pemrograman web ini dan menerapkannya dalam membuat halaman web.

Diunggah oleh

Brigita Bowaire
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
215 tayangan

BAB 3 HTML, CSS, Dan JavaScript

Modul ini membahas HTML, CSS, dan JavaScript. HTML digunakan untuk membuat struktur dasar halaman web, CSS untuk mengatur tampilan, dan JavaScript untuk interaktivitas. Modul ini berdurasi 170 menit yang terdiri atas pengenalan materi, latihan koding, dan pengayaan. Tujuannya agar mahasiswa memahami konsep ketiga bahasa pemrograman web ini dan menerapkannya dalam membuat halaman web.

Diunggah oleh

Brigita Bowaire
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Modul 3 : HTML, CSS, dan JavaScript

3.1 Waktu Pelaksanaan Praktikum

Durasi kegiatan praktikum adalah 170 menit, dengan rincian sebagai berikut.
a. 15 menit untuk pengerjaan tes awal atau wawancara tugas pendahuluan
b. 60 menit untuk penyampaian materi
c. 45 menit untuk pengerjaan jurnal, tes akhir, atau tugas
d. 50 menit pengayaan

3.2 Tujuan

Setelah mengikuti praktikum ini, mahasiswa diharapkan dapat:

1. Memahami konsep dasar HTML.


2. Memahami kerangka dokumen HTML.
3. Memahami fungsi tag-tag HTML.
4. Mengaplikasikan CSS dalam dokumen HTML.
5. Memahami konsep JavaScript.
6. Menerapkan JavaScript di halaman web.

3.3 Dasar Teori

HTML

HTML atau Hypertext Markup Language adalah sebuah bahasa markup yang digunakan untuk membuat
sebuah halaman web. Meskipun sering diartikan sebagai bahasa pemrograman dasar yang digunakan
untuk membuat sebuah web, HTML pada dasarnya adalah bahasa markup (penanda) berbasis teks atau
bisa juga disebut sebagai formatting language (bahasa untuk memformat). HTML menjadi dasar dalam
pembuatan website statis.

Modul Praktikum Pemrograman Web 1


Gambar 3.1 Struktur dasar dokumen HTML

Sintaks kode HTML diatur dan disusun dengan menggunakan tag. Berikut ini contoh kerangka HTML
sederhana.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Judul Web</title>
5 </head>
6 <body>
7 // Teks (isi web) diletakkan di dalam tag body
8 </body>
9 </html>

Ada berbagai tag HTML yang dapat digunakan untuk membangun halaman HTML. Tiap-tiap tag HTML
memiliki kegunaan yang berbeda-beda.

HTML5

HTML5 adalah versi terbaru dari HTML. Versi terakhir HTML sebelum HTML versi 5 adalah HTML 4.01 dan
XHTML 1.1. HTML5 menawarkan elemen-elemen baru yang dapat digunakan untuk pengembangan web.
Kini, HTML5 telah diperbarui lagi menjadi HTML versi 5.1.

HTML5 memiliki keunggulan sebagai berikut.

1. Fitur baru yang didasarkan pada integrasi HTML, CSS, DOM, dan JavaScript.
2. Mengurangi kebutuhan untuk plugin eksternal (seperti Adobe Flash).
3. Penanganan kesalahan yang lebih baik.
4. Lebih banyak markup element yang dapat digunakan untuk menggantikan scripting.
5. HTML5 dimungkinkan menjadi perangkat mandiri.

Modul Praktikum Pemrograman Web 2


Salah satu keunggulan HTML5 adalah merevolusi cara penulisan tag-tag dalam versi HTML sebelumnya
menjadi lebih sederhana secara semantik. Selain itu penulisan tag-tag dengan menggunakan pola
penulisan HTML4 masih dapat dilakukan dalam HTML5.

HTML4 HTML5

Gambar 3.2 Perbandingan HTML4 dan HTML5

CSS

CSS atau Cascading Style Sheet adalah standar pembuatan dan pemakaian style untuk dokumen HTML.
CSS merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna
tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar
teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. Versi CSS terbaru untuk saat ini adalah CSS3.

Berikut ini merupakan contoh sintaks dasar penulisan CSS.

1 h1 {
2 color: #0789de;
3 }

Bagian pertama sebelum tanda “{}” disebut selector, sedangkan yang diapit oleh tanda “{}” disebut
declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah
h1, sedangkan color adalah property, dan #0789de adalah value.

Ada 3 cara penulisan CSS, yaitu:

1. Inline Style Sheet


Mengetikkan langsung dalam tag html sebagai atribut.
2. Embedded Style Sheet
Menggunakan tag style di dalam tag head

Modul Praktikum Pemrograman Web 3


3. Linked/External Style Sheet
Menyimpan informasi style ke dalam sebuah file dengan ekstensi .css dan memanggil file CSS
dalam HTML dengan tag <link> yang diletakkan dalam tag <head>.

JavaScript

JavaScript adalah bahasa pemograman web yang merupakan client-side programming language.
JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi
JavaScript berjalan di sisi client (browser). Pada awalnya, JavaScript dibuat untuk melakukan operasi-
operasi kecil untuk membantu server memproses data. Namun seiring perkembangannya, JavaScript
menjadi bahasa pemrograman web yang tidak bisa terpisahkan dengan web modern. JavaScript bahkan
dikembangkan menjadi bahasa pemrograman yang independen. Kode JavaScript ditulis di dalam tag
<script> seperti contoh berikut.

1 <script type="text/javascript">
2 alert("Hello world!");
3 </script>

Seperti CSS, JavaScript juga memiliki 3 mode penulisan dalam dokumen HTML, yaitu:

1. Inline JavaScript
Mengetikkan JavaScript di dalam tag <body>. Skrip ini dieksekusi ketika halaman dimuat sampai
di bagian <body>. Ketika menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript
dijadikan satu bagian.
2. Embedded JavaScript
Penulisan dengan meletakkan JavaScript pada tag <head>. Skrip ini akan dieksekusi ketika
dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu.
Peletakan skrip di <head> akan menjamin skrip dimuat terlebih dahulu sebelum dipanggil.
3. Linked/External Javascript
Menyimpan skrip JavaScript ke dalam sebuah file dengan ekstensi/type file .js dan memanggil file
js dalam HTML dengan menggunakan atribut src pada tag <script> pada halaman HTML-nya.

3.4 Prosedur Praktikum

Latihan 1

Tulis kode di bawah ini.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Hello World</title>
6 </head>
7 <body>
8 <h1>Hello World</h1>

Modul Praktikum Pemrograman Web 4


9 <p>Belajar HTML</p>
10 </body>
11 </html>

Jalankan kode di atas tanpa menggunakan server. Apa yang terjadi? Kemudian hapus tag <body>. Amati
apa yang terjadi lalu simpulkan.

------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------

Latihan 2

Tulis kode di bawah ini.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Hello World</title>
6 <style type="text/css">
7 h1 {
8 color:orange;
9 text-align:center;
10 }
11 p {
12 font-family:"Times New Roman";
13 font-size:40px;
14 }
15 </style>
16 </head>
17 <body>
18 <h1>Hello World</h1>
19 <p>Belajar HTML<p>
20 </body>
21 </html>

a. Jalankan kode tersebut kemudian amati yang terjadi. Apakah ada perbedaan daripada
sebelumnya? Beri penjelasan.
b. Termasuk cara apakah penulisan CSS pada kode di atas?
c. Ubah cara penulisan CSS ini dalam tipe linked (external) style sheet.

------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------

Modul Praktikum Pemrograman Web 5


------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------

Latihan 3

Tulis kode di bawah ini.

1 <!DOCTYPE html>
2 <html lang=”en”>
3 <body>
4 <h1>Operasi JS</h1>
5 <p id="demo"></p>
6 <script>
7 var x = 5;
8 var y = 2;
9 var z = x + y;
10 document.getElementById("demo").innerHTML = z;
11 </script>
12 </body>
13 </html>

Jalankan kode tersebut dan amati apa yang terjadi. Apa fungsi dari baris ke-10?

------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------

Latihan 4

Tulis kode berikut ini.

1 <!DOCTYPE html>
2 <html lang=”en”>
3 <head>
4 <script>
5 function convert(degree) {
6 if (degree == ‘C’) {
7 F = document.getElementById(‘c’).value * 9 / 5 + 32;
8 document.getElementById(‘f’).value = Math.round(F);
9 } else {
10 C = (document.getElementById(‘f’).value -32) * 5 / 9;
11 document.getElementById(‘c’).value = Math.round(C);
12 }
13 }
14 </script>
15 </head>
16 <body>
17 <p>Masukkan angka pada masukan berikut:</p>
18 <input id="c" onkeyup="convert('C')"> derajat Celcius <br> equals<br>

Modul Praktikum Pemrograman Web 6


19 <input id="f" onkeyup="convert('F')"> derajat Fahrenheit
20 </body>
21 </html>

a. Jalankan kode di atas dengan server dan amati apa hasil dari kode di atas.
b. Kemudian jalankan kembali kode diatas tanpa menggunakan server. Amati apakah ada perbedaan
dengan sebelumnya?
c. Simpulkan bagaimana sebenarnya prinsip kerja dari JavaScript.

------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------

Latihan 5

Buatlah beberapa fungsi pemrograman sederhana dengan menggunakan JavaScript atas perintah asisten.

Modul Praktikum Pemrograman Web 7

Anda mungkin juga menyukai