0% menganggap dokumen ini bermanfaat (0 suara)

8 tayangan94 halaman

Modul WEB I 2022

Dokumen ini adalah modul praktikum pemrograman web yang menjelaskan dasar-dasar HTML, termasuk pengertian, fungsi, dan struktur tag HTML. Modul ini juga mencakup cara memilih text editor, membuat elemen seperti heading, paragraf, tabel, dan hyperlink, serta format teks dalam HTML. Praktikum yang disertakan memberikan contoh kode untuk membantu pemahaman tentang penerapan HTML dalam pembuatan halaman web.

Diunggah oleh

ladalle936

Hak Cipta

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

0% menganggap dokumen ini bermanfaat (0 suara)

8 tayangan94 halaman

Modul WEB I 2022

Diunggah oleh

ladalle936

Hak Cipta

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/ 94

MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 1
Pengertian HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa Mark Up yang digunakan untuk
membuat sebuah halaman website. di dalam dunia pemrograman berbasis website(Web
Programming) html menjadi pondasi dasar pada halaman website. sebuah file HTML di di simpan
dengan ekstensi .html (dot html) dan dapat di eksekusi atau diakses menggunakan web
browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah di
jelaskan HTML adalah dasar dari sebuah website. untuk membuat sebuah website tidak cukup
hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat
sebuah website yang dinamis. jika halaman website dibuat hanya menggunakan HTML saja maka
halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi
yang dapat mengelola website. tentu developer akan sangat di sibukkan dengan harus mengubah
lagi file HTML setiap ingin mengupdate artikel.
HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya masing-
masing. seperti tag heading, paragraf, pembuatan form, tombol, list, membuat hyperlink atau link
yang menghubungkan antar halaman website.
Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di lakukan dengan
HTML adalah sebagai berikut :
• Membungkus element-element tertentu sesuai kebutuhan
• Membuat heading atau format judul
• Membuat Tabel
• Membuat List
• Membuat Paragraf
• Membuat Form
• Membuat Tombol
• Membuat Garis
• Membuat huruf tebal
• Membuat huruf miring
• Menampilkan gambar
• Menampilkan video

1
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 2
Memilih Text Editor
Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode program, disini
khususnya untuk penulisan kode program HTML itu sendiri. Text editor sendiri sangatlah banyak
yang bisa digunakan untuk penulisan kode HTML, seperti Nodepad yang disediakan oleh sistem
operasi windows, TextEdit yang disediakan oleh sistem operasi Mac dan Nano yang disediakan
oleh sistem operasi linux. Text editor berbeda dengan Word Processor (Microsoft Word, King
Soft, WordPerfect). Itu dikarenakan text editor tidak bisa digunakan untuk mengatur format
document serta tidak disediakan fitur-fitur yang bisa digunakan untuk desktop publishing.
Browser merupakan aplikasi yang akan kita gunakan untuk menjalankan code program html yang
sudah kita tulis. browser ini ialah syarat yang harus anda penuhi jika anda belajar web programing.
untuk browser itu sendiri bisa digunakan yang sudah disediakan oleh sistem operasi langsung
ataupun bisa juga digunakan aplikasi browser yang lain misalnya Mozilla Firefox, Opera, Chrome
dan sebagainya.
Memilih Text Editor
Sublime text

2
MODUL PRAKTIKUM PEMROGRAMAN WEB I

notepad++

Atom

Visual Studio Code

3
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 3
Mengenal Tag, Element, Atribut HTML
Tag HTML
Tag merupakan kode yang digunakan untuk memperkenalkan pada web brawser untuk apa text
HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya
kepada web browser baik text itu berupa list, paragraf, link dan sebagainya.
<tag>Objek yang diisi</tag>
perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung sudut
pembuka, tag yang dimaksud, dan diakhiri dengan kurung sudut penutup. sedangkan pada penutup
tag itu diawali dengan kurung sudut pembuka, backslash, tag yang dimaksud, dan diakhiri dengan
penutup kurung sudut.
Jenis Tag Yang Sering Digunakan Dalam Html
Tag Fungsi

<!– ….–> Digunakan untuk memberi sebuah komentar atau keterangan

<!DOCTYPE
digunakan untuk Mendefinisikan tipe document
<html>

Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu

<a>
dokumen HTML ke dokumen HTML yang lain

<b> membuat teks menjadi tebal

<p> membuat pargraf

<h1> membuat heading satu

<h2> membuat heading dua

<body> mendefinisikan body/isi dokument html

<head> mendefinisikan bagian kepala dokumen html

<title> memdefiniskan judul halaman

<div> mendefinisikan halaman

<link> mendefinisikan hubungan antar dokumen

<script> Mendefinisikan client-side script

4
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<table> mendefinisikan tabel

<th> Mendefinisikan sel header di dalam sebuah tabel

<td> Mendefinisikan sel di dalam sebuah tabel

<tr> Membuat baris di dalam sebuah tabel

<ul> Mendefinisikan daftar dalam format bullet

<li> mendefinisikan list

Element HTML
Element pada HTML merupakan isi atau objek yang berada tag. maksudnya, isi yang ada diantara
tag pembuka dan tag penutup (termasuk jenis itu sendiri)

Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>

Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. informasi ini bisa
berupa instruksi untuk memberikan efek warni, ketebalan, dll. atribut bisanya memiliki 2 bagian
yaitu nama dan nilai, dapat ditulis name=”value”. penulisan nilai/value diapit oleh dua tanda kutip
(bisa digunakan kutip satu atau kutip dua).
penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan
element dari tag itu sendiri

5
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Praktikum 2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>

• <h2> adalah tag heading 2

• align adalah nama dari atribut
• center adalah nilai dari atribut
• pengenalan atribut HTML adalah element dari tag h2

6
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 4
Heading Pada HTML
Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting
pada halaman web. element tag heading ini memiliki enam tingkatan tyang berurutan yaitu
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman
web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag/element <h1>
lebih besar dari element/tag <h2> dan seterusnya.
penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing
tag/element heading yang sering digunakan pada pengolahan halaman web :
1. <h1> heading yang digunakan untuk penulisan judul utama dari dokument
2. <h2> heading yang digunaakan sebagai sub <h1>
3. <h3> heading yang digunakan sebagai sub <h2>
4. untuk penggunaan <h4><h4><h5><h6> tergantung programer sendiri untuk memperindah
halaman web.

Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
</body>
</html>

Praktikum 2
<!DOCTYPE html>
<html>
<head>

7
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
</body>
</html>

8
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 5
Format Text Pada HTML
Format text bold (tebal). untuk membuat teks menjadi tebal pada tampilan halaman web
menggunakan tag <b>
<b>ini text tebal</b>
Format text italic (miring). untuk membuat teks miring pada HTML menggunakan tag <i>
<i>ini text miring</i>
Format text underline (garis bawah), untuk membuat teks underline/garis bawah pada HTML
menggunakan tag <u>
<u>ini text underline</u>

Tag Description

<b> format text bold/tebal

<i> format text italic/miring

<u> format text underline/garis bawah

<small> format text kecil

<strong> format text yang hampir sama dengan format bold

<sub> format subscripted teks

<sup> format superscripted teks

<ins> format text garis bawah

<del> format text dengan garis di tengah

<mark> format text yang berwarna

Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>

9
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
<sub>ini format text sub</sub><br/>
<sup>ini format text sup</sup><br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>

10
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 6
Membuat Paragraf Pada HTML
HTML mengunakan tag kusus untuk membuat paragraf yaitu <p>.

Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
ini adalah paragraf pertama
ini adalah paragraf kedua
</body>
</html>

Praktikum 2
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p>ini merupakan penulisan paragraf pertama dalam dokument HTML</p>
<p>ini merupakan penulisan paragraf kedua dalam dokument HTML</p>
</body>
</html>

Jenis Paragraf
Paragraf rata kiri
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>

11
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Paragraf rata kanan

<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
Paragraf rata tengah
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument
HTML</P>
Paragraf rata kiri kanan
<p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam document
html</P>

Praktikum 3
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument
HTML</p>
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument
HTML</p>
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument
HTML</p>
<p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam
dokument HTML</p>
</body>
</html>

Penulisan paragraf <br>

Praktikum 4
<!DOCTYPE html>
<html>

12
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<head>
<title>belajar membuat paragraf</title>
</head>
<body>
ini merupakan penulisan paragrah pertama </br>
ini merupakan penulisan paragrah kedua
</body>
</html>

13
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 7
Membuat Tabel Pada HTML
tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan
kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> utuk membuat table, <tr>
untuk membuat baris dan <td> untuk membuat kolom.
1. <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table>
ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.
2. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris
dalam table HTML
3. <td> atau dikenal dengan table data merpakan tag yang digunakan untuk membuat kolom
dalam baris dan untuk menampilkan data dalam table
4. <th> untuk membuat table head atau bagian kepala pada table.
5.
Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td>baris 1 / kolom 1</td>
<td>baris 1 / kolom 2</td>
<td>baris 1 / kolom 3</td>
</tr>
<tr>
<td>baris 2 / kolom 1</td>
<td>baris 2 / kolom 2</td>
<td>baris 2 / kolom 3</td>

14
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</tr>
<tr>
<td>baris 3/ kolom 1</td>
<td>baris 3/ kolom 2</td>
<td>baris 3/ kolom 3</td>
</tr>
<tr>
<td>baris 4/ kolom 1</td>
<td>baris 4/ kolom 2</td>
<td>baris 4/ kolom 3</td>
</tr>
</table>
</body>
</html>

Praktikum 2
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Badrul</td>

15
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<td>Sumedang</td>
</tr>
<tr>
<td>2</td>
<td>Andi</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Budi</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>

16
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 8
Membuat Hyperlink Pada HTML
hyperlink yang sering di kenal dengan link yaitu menghubungkan antara satu dokument dengan
dokumen yang lain pada HTML. Tujuan dari hyperlink ini membuat sebuah teks atau gambar yang
ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan hyperlink
tersebut.
hyperlink sendiri ditulis dengan <a> atau yang kita kenal dengan anchor (jangkar). <a> ini selalu
diikiti oleh atribut href, dimana didalam href (hypertext reference) ini lah yang akan diisikan
alamat yang dituju ketika text atau gambar diklik
<a href="amikasoppeng">klik disini</a>

Jenis Hyperlink Pada HTML

alamat absolute yaitu penulisa alamat file yang disertai dengan alamat website
Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>belajar memubuat hyperlink</title>
</head>
<body>
ini adalah contoh alamat absolute <a
href="https://www.amika.com/category/html/">klik disini</a>
</body>
</html>

dari contoh diatas merupakan hyperlink menggunakan alamat absolute. dimana akan mengakses
file html yang berada di amika.com/category
alamat alternatif merupakan penulisan alamat file yang akan di panggil berada dalam aplikasi
yang sama, jadi sebelum memanggil file yang diperlikan tidak udah menggunakan nama dari
websitenya

17
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Praktikum 2
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat hyperlink</title>
</head>
<body>
ini adalah contoh alamat alternatif <a href="part1.html">klik disini</a>
</body>
</html>

18
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 9
Membuat List Pada HTML
list atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan
untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan
tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan
yaitu ordered list dan unordered list.
1. ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag
yang digunakan dalam ordered list ini yaitu <ol>
2. unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di
awalnya. tag yang diguanakan untuk membuat unordered list yaitu <ul>

Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<li>belajar HTML</li>
<li>belajar PHP</li>
</body>
</html>

Ordered List <ol>

Menampilkan daftar list dan diawali dengan huruf atau angka
Praktikum 2
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>

19
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<body>
<ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ol>
</body>
</html>

Unordered list <ul>

berikut contoh unordered list pada HTML
Praktikum 3
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>

20
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 10
Membuat Form Pada HTML
Form merupakan tempat penginputan data sebelum diproses oleh sistem. Salah satunya adalah
form login, form comment, form data user, dan lain sebagainya. untuk proses penginputan data
dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan untuk
membuat form ini adalah <form> yang didalamnya bisa berupa <input>, <textarea>,<option>
dan <select>.

Tag <form>
Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan
biasanya nilai yang dikirim berupa alamat dari sebuah halaman untuk memproses data inputan.
dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan
dikirim oleh web browser. nilai dari method ini biasnya get atau post
<form action="proses.php" method="post">
.....isikan dengan .....
</form>

Tag <input>
Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki
banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radiobutton,
sampai dengan tombol submit berada dalam tag <input>.
berikut beberapa bentuk dalam keluarga tag <input> yang dikategorikan berdasarkan atribut :
1. <input type=’text’> textbox yang bisa menerima inputan text misalkan username atau
berupa inputan text yang pendek.
2. <input type=’password’> textbox yang menerima inputan text, akan tetapi text yang
diinput akan di tampilkan sebagai tanda bintang atau titik, textbox ini biasanya digunakan
untuk inputan password.
3. <input type=’submit’> inputan ini berupa tombol (button) untuk memproses data inputan
dari form.
4. <input type=’checkbox’> inputan berupa checkbox yang dapat di ceklis oleh user.

21
MODUL PRAKTIKUM PEMROGRAMAN WEB I

5. <input type=’radio’> inputan yang berupa radio grup, dimana user dapat memilih salah
satu dari pilihan yang disediakan. salah satu contoh penggunaan dari radio ini adalah jenis
kelamain.

Tag <textarea>
<textarea> merupakan tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini
dapat diisikan dengan lebih banyak teks didalamnya. untuk mengatur panjang dan banyak baris
pada textarea ini dapat menggunakan CSS.
<textarea>
isika pesan anda
</textarea>

Tag <select>
<select> merupakan tag yang digunakan untuk user memilih data yang sudah disediakan. Dalam
penggunakan <select> selelau diikuti oleh <option> yng digunakan untuk membuat pilihan.
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>

Atribut name
Atribut name merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh
web server
nama : <input type="text" name="nama"><br/>
alamat : <input type="text" name="alamat"></br/>
password : <input type="password" name="pass"><br/>

Praktikum 1
<!DOCTYPE html>
<html>
<head>

22
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<title>Belajar Membuat Form pada HTML</title>

</head>
<body>
<form>
nama : <input type="text" name="nama"><br/>
alamat : <input type="text" name="alamat"></br/>
password : <input type="password" name="pass"><br/>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jk" value="perempuan" />
Perempuan
<br/>
bahas pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
<br/>
kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
<br/>
pesan anda :
<textarea> </textarea>
<br/>
<input type="submit" value="proses">
</form>
</body>
</html>

23
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Atribut Form pada HTML

Dalam pembuatan form pada HTML tentu saja terdapat beberapa atribut yang akan digunakan
nantinya pada saat memproses data dengan di webserver
atribut value. atribut ini merupakan nilai awal yang akan ditampilkan pada saat menjalankan di
browser.
Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama"><br/>
Nama Belakang : <input type="text">
</form>

</body>
</html>

Atribut readonly. jika menggunakan atribut ini maka nilai value tidak bisa di ubah
Praktikum 2
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" readonly><br/>
Nama Belakang : <input type="text">

24
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</form>
</body>
</html>

Atribut disabled. atribut ini digunakan untuk menonaktifkan inputan. maksudnya elemen
disabled bisa digunakan akan tetapi tidak bisa di gantI atau di edit.
Praktikum 3
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" disabled><br/>
Nama Belakang : <input type="text">
</form>
</body>
</html>

Atribut size. atribut ini mengatur lebar kotak inputan.

Praktikum 4
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" size="50"><br/>
Nama Belakang : <input type="text">

25
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</form>
</body>
</html>

Atribut maxlength. atribut ini digunakan untuk menentukan jumlah inputan teks yang di batasi.
Praktikum 5
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
Nama Depan :<input type="text" value="nama" maxlength="10"><br/>
Nama Belakang : <input type="text">
</form>
</body>
</html>

Atribut list. atribut ini untuk menampilkan list pada form inputan
Praktikum 6
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
<input list="browser" name="internet">
<datalist id="browser">
<option value="chrome">

26
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</body>
</html>

Atribut min dan max. Min dan maks atribut menentukan nilai minimum dan maksimum untuk
elemen<input>. Atribut min dan maks digunakan untuk jenis inputan seperti : nomor, kisaran,
tanggal,datetime, datetime-lokal, bulan, waktu, dan minggu.
Praktikum 7
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
<input type="date" name="day" max="1979-12-31">
<input type="date" name="day" min="2000-01-02">
</form>
</body>
</html>

Placeholder Attribute. atribut ini digunakan untuk sebagai pengganti dari label field.
Praktikum 8
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut Form pada html</title>

27
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</head>
<body>
<form>
<input type="text" name="nama" placeholder="masukkan nama">
</form>
</body>
</html>

28
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 11
Menampilkan Gambar Pada HTML
HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag HTML
yang berfungsi untuk menampilkan gambar adalah tag ” <img> “. tag <img> di gunakan untuk
menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico dan
lain-lain.
Untuk menampilkan gambar dengan HTML anda bisa menggunakan tag <img>. kemudian
masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file
gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar. jika file
gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka
kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut
src ini. tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan
gambar maka anda bisa menambahkan nama folder nya seperti misalnya
“nama_folder/filegambar”. dan jika file gambar berada di luar folder file html yang menampilkan
gambar maka anda bisa menambahkan perintah “../”.

Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML </h1>
<img src="namafile.extensi">
</body>
</html>

Atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk
menentukan lebar gambar yang tampil.

29
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Praktikum 2
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML</h1>
<img src="namafile.jpg" height="300px" width="500px">
</body>
</html>

Tetapi cara ini sangat tidak di rekomendasikan karena anda harus memberikan atribut height dan
width pada semua gambar yang anda tampilkan. jadi cara untuk mengatur ukuran gambar yang
benar anda bisa menambahkan class atau id pada tag <img> dan kemudian mengatur tinggi dan
lebarnya menggunakan CSS.

Praktikum 3
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Menampilkan gambar pada HTML </h1>
<img class="gambar" src="amikasoppeng.png">
</body>
</html>

30
MODUL PRAKTIKUM PEMROGRAMAN WEB I

File css (style.css)

.gambar{
height: 300px;
width: 500px;
}

31
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 12
Tag Iframe Pada HTML
Iframe merupakan sebuah tag html yang berfungsi untuk menampilkan halaman website tanpa
harus membuka website tersebut. jadi apabila anda ingin menampilkan website lain dalam halaman
web anda maka anda bisa menggunakan tag <iframe> untuk menampilkannya. caranya dengan
menambahkan atribut src=”” pada tag pembuka <iframe> untuk meletakkan link url dari website
yang ingin anda tampilkan. Cara penulisan tag iframe di awali dengan tag iframe pembuka
“<iframe>” dan di akhiri dengan tag iframe penutup </iframe>.
Praktikum 1
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Tag Iframe Pada HTML</title>
</head>
<body>
<h1>Belajar HTML Tag Iframe Pada HTML</h1>
<iframe src="www.amika.com" height="500px" width="1000px"></iframe>
</body>
</html>

untuk membuat atau menggunakan tag <iframe> untuk menampilkan halaman website pada
halaman web anda anda bisa menggunakan tag <iframe> dan kemudian memberikan atribut src=””
untuk meletakkan url dari halaman website yang ingin anda tampilkan.

32
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 13
Menghubungkan HTML dan CSS
Untuk Cara menghubungkan HTML dengan CSS caranya sangat mudah. gunakan tag <link>
untuk menghubungkan html dengan css. tag link di letakkan pada bagian element head pada
struktur HTML.
Praktikum 1
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>
</html>

Simpan file dengan nama style.css

h1{
color: orange;
font-family: sans-serif;
text-align: center;
}

33
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 14
Class dan ID Pada HTML
Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan
tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada kelebihan di
sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di panggil
sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id
hanya bisa di berikan pada satu element saja.
Praktikum 1
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Class dan Id pada HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/></h1>

<div class="kotak">kotak 1</div>
<div class="kotak">kotak 2</div>
<div class="kotak">kotak 3</div>

<div id="kotak">Kotak 4</div>
</body>
</html>

Simpan file dengan nama style.css

h1{
color: orange;
font-family: sans-serif;
text-align: center;

34
MODUL PRAKTIKUM PEMROGRAMAN WEB I

}
.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: orange;
}

#kotak{
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}

35
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 15
Membuat Simbol Pada HTML
Untuk membuat symbol html anda bisa menggunakan kode yang berbentuk number atau entity.

Symbol Number Entity

∀ ∀ ∀

∂ ∂ ∂

∃ ∃ ∃

∅ ∅ ∅

∇ ∇ ∇

∈ ∈ ∈

∉ ∉ ∉

∋ ∋ &ni;

∏ ∏ ∏

∑ ∑ ∑

Α Α Α

Β Β Β

Γ Γ Γ

Δ Δ Δ

Ε Ε Ε

Ζ Ζ Ζ

® ® ®

€ € €

™ ™ ™

← ← ←

36
MODUL PRAKTIKUM PEMROGRAMAN WEB I

↑ ↑ ↑

→ → →

↓ ↓ ↓

♠ ♠ &spades;

♣ ♣ &clubs;

♥ ♥ &hearts;

♦ ♦ &diams;

Praktikum 1
<!DOCTYPE html>
<html>
<head>
<title>Membuat symbol pada HTML | AMIKA Soppeng</title>
</head>
<body>
<h1>Membuat symbol pada HTML<br/>AMIKA Soppeng</h1>
<p>♠</p>
<a href="#">Simbol panah →</a><br/>
<a href="#">Simbol panah →</a><br/>
∀<br/>
∇<br/>
∏<br/>
® <br/>
♥<br/>
→<br/>
↑<br/>
←<br/>
™<br/>
</body>
</html>

37
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 16
Defenisi CSS
Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheet. Jika diterjemahkan dalam bahas Indonesia
secara harfiah CSS berarti “Lembar Penataan Menurun”. Namun secara konteks Cascading Style
Sheet adalah kumpulan perintah yang digunakan untuk mengatur tampilan sebuah halaman web.
Aturan penulisan CSS
Dalam penulisan CSS ada aturan yang digunakan, pada CSS ada komponen utama dalam
penulisannya yaitu Selektor dan Deklarator.
Contoh dasar penulisan CSS dibawah ini :
Selektor { Deklarator};
Selektor merupakan Tag dari penulisan HTML semisal H1,H2,p,b dll
Deklarator adalah yang memerintahkan browser untuk membuat tampilan pada selector sesuai
dengan perintah yang ada pada deklarator. Sedangkan deklarator terdiri dari Property dan Value
Contoh :
Pada penulisan artikel banyak digunakan Tag <p> atau paragraph, jika anda ingin merubah
penulisan font dari artikel pada paragraph, pada CSS penulisannya adalah sebagai berikut :
p {font-family: verdana};
Merupakan selektor dari paragraph dan yang berada dalam kurung kurawal adalah deklaratornya
yang memerintahkan browser untuk menampilkan artikel paragraph dengan font verdana.
Sedangkan font-family adalah Property dan verdana adalah Value
Detailnya sebagai berikut ini :
Selektor {Property : value};

Selektor ID dan Selektor Class

Selektor ID
Fungsi dari selektor ID adalah untuk memberi tanda supaya pada tag HTML yang sudah diberi
ID bisa di beri format lain. Sebagai contoh Penulisan pada Tag HTML
<p id=”toc”>disini anda menulis artikel </p>
<p>Tulisan artikel anda yang lain</p>
Selektor ID diberi nama toc, dan pada CSS anda bisa memberi code sebagai berikut :

38
MODUL PRAKTIKUM PEMROGRAMAN WEB I

p{
font-family:Times New Roman;
}
#toc{
font-family:arial;
}
Praktikum :
<!DOCTYPE html>
<html>
<head>
<title>Selector ID</title>
<style>
p{
font-family:Times New Roman;
}
#toc{
font-family:arial;
}
</style>
</head>
<body>
<p id="toc">disini anda menulis artikel </p>
<p>Tulisan artikel anda yang lain</p>
</body>
</html>

Pada selector ID penulisan ID ditandai menggunakan tanda ‘ # ’ Yang berarti artikel pada p yang
sudah diberi ID akan dibaca font menjadi arial sedangkan sedangkan p yang lain dibaca
menggunakan font verdana.

39
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Selektor Class
Untuk selektor Class fungsinya sama dengan selektor ID namun pada selektor Class kita bisa
memberi lebih dari satu selector class tetapi pada selektor ID anda tidak bisa memberi nama ID
yang sama. Contoh penulisan Selektor Class : Pada Tag HTML
<p class=”media”>artikel anda disini</p>

Pada CSS :
.media{
font-family:Calibri;
}
Pada selektor Class penulisan Class ditandai menggunakan tanda ‘ . ’
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Selector Class</title>
<style>
.media{
font-family:Calibri;
}
</style>
</head>
<body>
<p class="media">artikel anda disini</p>
</body>
</html>

Kesimpulannya adalah : Pada kedua selektor ini fungsinya sama, namun yang membedakan adalah
pada selektor ID tidak bisa membuat lebih dari satu dengan kata lain selector ID digunakan untuk

40
MODUL PRAKTIKUM PEMROGRAMAN WEB I

yang spesifik. Sedangkan selektor class bisa menaruh Selektor Class pada Tag HTML lebih dari
satu.

Cara menggabungkan HTML dengan CSS

1. Inline Style
Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Inline Style</title>
</head>
<body>
<p>
<h2 style="color:#FFCC00">Contoh untuk Inline Style</h2>
</p>
</body>
</html>

2. Embedded Style
Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page )
dan penulisan file CSS sebelum …. </head>
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Embedded Style</title>
<style>
h2{
color:#FFCC00;
background:#CC0000;

41
MODUL PRAKTIKUM PEMROGRAMAN WEB I

}
</style>
</head>
<body>
<p>
<h2>Contoh untuk Embedded Style</h2>
</p>
</body>
</html>

3. Link Style
Untuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan
file CSS dan kita tinggal memasang link saja, dan pemasangan Link di antara
<head>….</head>. Untuk cara Link Style ini yang banyak dipakai oleh para Web Design
atau programmer karena cara Link Style adalah cukup satu kali penulisan file CSS yang
nantinya dipakai oleh seluruh halaman Website.
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Link Style</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
<h2>Contoh untuk Link Style</h2>
</p>
</body>
</html>

File css disimpan dengan ekstensi .css dengan nama style.css

42
MODUL PRAKTIKUM PEMROGRAMAN WEB I

h2{
color:#FFCC00;
background:#CC0000;
}

Komponen Property yang digunakan

Property Text Style
Property Text Style bisa anda gunakan untuk membuat gaya tulisan anda pada web.
Adapun komponen Text Style atau yang berhubungan dengan model atau gaya tulisan/font
dari CSS adalah sebagai berikut ini :
1. color
Property ini mengontrol warna dari text penulisannya Selektor {color:#000000} Value
bisa warna Hexadesimal bisa hanya tulisan misalnya untuk kuning menggunakan
Yellow.
2. font-weight
Property ini mengontrol tebal dari text penulisannya Selektor { font-weight:100} Value
bisa anda tulis dengan angka mulai dari seratus dan dilanjutkan dengan kelipatannya
atau bisa anda tulis dengan kata ‘Bold’ atau yang lain.
3. font-family
Property ini untuk mengatur font yang anda pakai Selektor{font-family:Arial,
Helvetica, sans-serif} Untuk jenis font sebaiknya menggunakan standard bawaan
Windows,jika ingin terbaca oleh seluruh user.
4. font-size
Property ini untuk mengatur ukuran font yang akan dipakai Selektor{ font-size:12px}
Untuk ukuran font anda bisa menggunakan ukuran… px,…em atau
small,medium,large dll.
5. font-variant

43
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Property ini untuk mengatur font yang akan muncul apakah menggunakan huruf kecil
atau small caps Selektor{ font-variant:small-caps} atau anda bisa menggunakan
normal.
6. font-style
Property ini untuk mengatur style font yang akan digunakan pada text Selektor{ font-
style:italic} pilihan value lain normal, oblique
7. text-decoration
Property ini untuk mengatur style font lanjutan dari font style. Selektor{text-
decoration:underline} atau value lain : line through, none, blink, overline
8. text-transform
Property ini untuk mengatur capital font Selektor{ text-transform:lowercase} value
lain: uppercase, capitalize
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Property Text Style</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="color">Property Color Value = Blue</div>
<div class="weight">Property font Weight Value = 900</div>
<div class="family">Property Font Family Value = Trebuchet MS</div>
<div class="size">Property Font Style Value = x-large</dic>
<div class="variant">Properti Font Variant Value = small-caps</div>
<div class="style">Property Font Style Value = italic</div>
<div class="decoration">Property Text Decoration Value = underline</div>
<div class="transform">Property Text Transform Value = capitalize</div>
</body>
</html>

44
MODUL PRAKTIKUM PEMROGRAMAN WEB I

File css disimpan dengan ekstensi .css dengan nama style.css

.color{
color: blue;
}
.weight{
font-weight:900;
}
.family{
font-family: Trebuchet MS;
}
.size{
font-size: x-large;
}
.variant{
font-variant: small-caps;
}
.style{
font-style: italic;
}
.decoration{
text-decoration: underline;
}
.transform{
text-transform: capitalize;
}

Property Text Layout

Property Text Layout ini berfungsi untuk mengatur bagaimana efek dari suatu layout suatu tulisan
pada halaman website. Property ini lebih berfokus pada penempatan dan tampilan yang
ditempatkan pada halaman web. Kita bisa mengkombinasikan antara tampilan page layout dan text

45
MODUL PRAKTIKUM PEMROGRAMAN WEB I

layout supaya tampilan website anda lebih elegant dan sesuai dengan keinginan anda tentunya dan
itu yang jelas tidak bisa anda dapatkan pada HTML.
1. letter-spacing
Property ini untuk mengontrol jarak space antar karakter Selektor{letter-
spacing:normal} untuk value normal maka akan diatur oleh browser sebagai justify
text.
2. word-spacing
Property ini untuk mengontrol jarak space antar text atau kata Selektor{ word-
spacing:normal}
3. line-height
Property ini untuk mengatur jarak line atau garis Selektor{ line-height:normal} value
lain : …em, …px atau persentase …%
4. text-indent
Property ini untuk mengatur dari baris pertama yang masuk biasanya untuk awal
paragraph. Selektor{ text-indent:50px}
5. text-align
Property ini untuk mengatur posisi dari text Selektor{ text-align:justify} Value lain :
left, right, center
6. vertical-align
Property ini untuk mengontrol jarak space antar text atau kata Selektor{ vertical-
align:top} value lain: text-top,text-bottom, bottom, middle, baseline, sub, super.
7. direction
Property ini untuk mengatur dan menentukan arah dari suatu tulisan pada website
Selektor{ direction:ltr} Value lain : rtl
Keterangan :
ltr =Tulisan yang terbaca dari kiri ke kanan
rtl =Tulisan yang terbaca dari kanan ke kiri
8. unicode-bidi
Property ini untuk mengontrol dan mengarahkan pada tulisan unicode Selektor{
unicode-bidi:bidi-override} Value lain : normal, embed

46
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Property text Layout</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="letterspacing">Property text Layout</div>
<div class="wordspacing">Property text Layout</div>
<div class="lineheight">Property text Layout</div>
<div class="textindent">Property text Layout</div>
<div class="textalign">Property text Layout</div>
<div class="verticalalign">Property text Layout</div>
<div class="direction">Property text Layout</div>
<div class="unicodebidi">Property text Layout</div>
</body>
</html>

File css disimpan dengan ekstensi .css dengan nama style.css

.letterspacing{
letter-spacing: 1cm;
}
.wordspacing{
word-spacing: 2cm;
}
.lineheight{
line-height: 2cm;
}
.textindent{
text-indent: 2cm;

47
MODUL PRAKTIKUM PEMROGRAMAN WEB I

}
.textalign{
text-align: right;
}
.verticalalign{
vertical-align:text-top;
}
.direction{
direction:rtl;
}
.unicodebidi{
direction:rtl;
unicode-bidi: bidi-override;
}

Property Border
Property ini adalah untuk mengatur elemen yang mempunyai garis dengan berbagai variasi
lebar,warna serta gaya suatu tampilan. Kita bisa membuat suatu garis antara kiri-kanan-atas-bawah
dengan berbeda style.
1. Border
Property ini untuk mengatur border secara keseluruhan Selektor{border:normal} Value
lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
2. Border-width
Property ini untuk mengatur lebar border secara keseluruhan Selektor{ border-width:thin}
Value lain : thick, medium
3. Border-top-width
Property ini untuk mengatur lebar border top Selektor{ border-top-width:thin} Value lain
: thick, medium
4. Border-right-width
Property ini untuk mengatur lebar border right Selektor{ border-right-width:thin} Value
lain : thick, medium
5. Border-bottom-width
Property ini untuk mengatur lebar border bottom Selektor{ border-bottom-width:thin}
Value lain : thick, medium
6. Border-left-width

48
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Property ini untuk mengatur lebar border left Selektor{ border-left-width:normal} Value
lain : thick, medium
7. Border-color
Property ini untuk mengatur warna dari border Selektor{ border-color:#333333} Value lain
: anda bisa gunakan warna hexadecimal yang awalnya dimulai dengan tanda #
8. Border-style
Property ini untuk mengatur style dari border Selektor{ border-style:normal} Value lain :
thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
9. Border-top
Property ini untuk mengatur border top Selektor{ border-top:normal} Value lain : thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
10. Border-right
Property ini untuk mengatur border right Selektor{ border-right:normal} Value lain : thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
11. Border-bottom
Property ini untuk mengatur border bottom Selektor{ border-bottom:normal} Value lain :
thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
12. Border-left
Property ini untuk mengatur border left Selektor{ border-left:normal} Value lain : thin,
thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Property Border</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="border">Border</div>
<br><div class="borderwidth">Border width</div>
<br><div class="bordertopwidth">Border Top Width</div>
<br><div class="borderrightwidth">Border Right Width</div>
<br><div class="borderbottomwidth">Border Bottom Width</div>
<br><div class="borderleftwidth">Bottom Left Width</div>
<br><div class="bordercolor">Border Color</div>
<br><div class="borderstyle">Border Style</div>

49
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<br><div class="bordertop">Border Top</div>

<br><div class="borderright">Border Right</div>
<br><div class="borderbottom">Border Bottom</div>
<br><div class="borderleft">Border Left</div>
</body>
</html>

File css disimpan dengan ekstensi .css dengan nama style.css

.border {
border:solid;
}
.borderwidth{
border:solid;
border-width: 5px;
}
.bordertopwidth{
border:solid;
border-top-width:20px;
}
.borderrightwidth{
border:solid;
border-right-width:20px;
}
.borderbottomwidth{
border:solid;
border-bottom-width:20px;
}
.borderleftwidth{
border:solid;
border-left-width:20px;

50
MODUL PRAKTIKUM PEMROGRAMAN WEB I

}
.bordercolor{
border:solid;
border-color: blue;
}
.borderstyle{
border:solid;
border-style:dashed;
}
.bordertop{
border:solid;
border-top:dashed;
}
.borderright{
border:solid;
border-right:dashed;
}
.borderbottom{
border:solid;
border-bottom:dashed;
}
.borderleft{
border:solid;
border-left:dashed;
}

Property Margin
Property Margin ini untuk mengatur ruang atau jarak batasan antar elemen, misalnya antara elemen
atas dan bawah, atau antara kiri dan bawah dll.
1. Margin

51
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Property ini untuk mengatur jarak meliputi secara keseluruhan antar elemen Selektor{
margin:auto} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
2. Margin-top
Property ini untuk mengatur jarak top dengan elemen Selektor{ margin-top:auto} Value
lain bisa ukuran …px,…em atau persentase misalnya 25%
3. Margin-left
Property ini untuk mengatur jarak left dengan elemen Selektor{ margin-left:auto} Value
lain bisa ukuran …px,…em atau persentase misalnya 25%
4. Margin-right
Property ini untuk mengatur jarak right dengan elemen Selektor{ margin-right:auto} Value
lain bisa ukuran …px,…em atau persentase misalnya 25%
5. Margin-bottom
Property ini untuk mengatur jarak bottom dengan elemen Selektor{ margin-bottom:auto}
Value lain bisa ukuran …px,…em atau persentase misalnya 25%
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Property Margin</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="margin">Margin</div>
<br><div class="margintop">Margin Top</div>
<br><div class="marginright">Margin Right</div>
<br><div class="marginbottom">Margin Bottom</div>
<br><div class="marginleft">Margin Left</div>
</body>
</html>

File css disimpan dengan ekstensi .css dengan nama style.css

.margin{
border: solid;
margin:50px;

52
MODUL PRAKTIKUM PEMROGRAMAN WEB I

}
.margintop{
border: solid;
margin-top: 70px;
}
.marginright{
border: solid;
margin-right: 100px;
}
.marginbottom{
border: solid;
margin-bottom: 100px;
}
.marginleft{
border: solid;
margin-left: 100px;
}

Property Padding
Property padding adalah untuk mengatur ruang antara elemen dan konten.
1. Padding
Property ini untuk mengatur ruang elemen dengan konten secara global Selektor{
padding:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
2. Padding-top
Property ini untuk mengatur ruang elemen top dengan konten Selektor{ padding-top:7px}
Value lain bisa ukuran …px,…em atau persentase misalnya 25%
3. Padding-left
Property ini untuk mengatur ruang elemen left dengan konten Selektor{ padding-left:7px}
Value lain bisa ukuran …px,…em atau persentase misalnya 25%
4. Padding-right
Property ini untuk mengatur ruang elemen right dengan konten Selektor{ padding-
right:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
5. Padding-bottom

53
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Property ini untuk mengatur ruang elemen bottom dengan konten Selektor{ padding-
bottom:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25%

Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Property Padding</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="padding">Padding</div>
<br><div class="paddingtop">Padding Top</div>
<br><div class="paddingright">Padding Right</div>
<br><div class="paddingbottom">Padding Bottom</div>
<br><div class="paddingleft">Padding Left</div>
</body>
</html>

File css disimpan dengan ekstensi .css dengan nama style.css

.padding{
border:solid;
padding:100px;
}
.paddingtop{
border:solid;
padding-top: 70px;
}
.paddingright{
border:solid;

54
MODUL PRAKTIKUM PEMROGRAMAN WEB I

padding-right: 100px;
}
.paddingbottom{
border:solid;
padding-bottom: 100px;
}
.paddingleft{
border:solid;
padding-left: 500px;
}

Property Page Layout

Property Page Layout adalah untuk mendesain suatu layout pada halaman web, ini property
penting yang harus dikuasai karena dengan menguasai property ini maka anda bisa membuat suatu
halaman web yang bagus dan tentunya harus didukung akan kreatifitas seseorang. Pada HTML
tidak mendukung akan tampilan layout sebaik CSS, dengan menguasai Property ini kita juga bisa
merubah pada themes atau template pada script CMS yang ada sekarang ini.
1. Position
Property ini untuk menentukan dimana elemen akan ditempatkan juga untuk menempatkan
elemen induk. Selektor{ position:absolute} Value lain : fixed,relative, static, top, bottom,
left, right
2. Top
Property ini untuk menentukan bagian atas dari suatu elemen ditempatkan. Selektor{
top:absolute} Value lain : fixed,relative, static,auto
3. Left
Property ini untuk menentukan bagian kiri dari suatu elemen ditempatkan. Selektor{
left:absolute} Value lain : fixed,relative, static,auto
4. Bottom
Property ini untuk menentukan bagian bawah dari suatu elemen ditempatkan. Selektor{
bottom:absolute} Value lain : fixed,relative, static,auto
5. Right
Property ini untuk menentukan bagian kanan dari suatu elemen ditempatkan. Selektor{
right:absolute} Value lain : fixed,relative, static,auto
6. Width
Property ini untuk menentukan lebar dari suatu elemen Selektor{width:50%} value lain:
…px,…em,auto

55
MODUL PRAKTIKUM PEMROGRAMAN WEB I

7. Min-width
Property ini untuk menentukan lebar minimal dari suatu elemen Selektor{ min-width:50%}
value lain: …px,…em,auto,none
8. Max-width
Property ini untuk menentukan lebar maximal dari suatu elemen Selektor{ max-
width:50%} value lain: …px,…em,auto,none
9. Height
Property ini untuk menentukan tinggi dari suatu elemen Selektor{ height:50%} value lain:
…px,…em,auto,none
10. Min-height
Property ini untuk menentukan tinggi minimal dari suatu elemen Selektor{ min-
height:50%} value lain: …px,…em,auto,none
11. Max-height
Property ini untuk menentukan tinggi maximal dari suatu elemen Selektor{ max-
height:50%} value lain: …px,…em,auto,none
12. Z-index
Property ini untuk mengatur beberpa elemen yang terjadi overlap Selektor{z-index:auto}
value lain mengunakan bilangan bulat ( integer)
13. Visibility
Property ini untuk mengatur elemen apakah ditampilkan pada browser atau tidak. Selektor{
visibility:hidden} Value lain : visible, collapse

14. Overflow
Property ini untuk mengatur menampilkan konten yang tidak bisa ditampung oleh elemen
Selektor{ overflow:auto} Value Lain : hidden, scroll, visible
15. Float
Property ini membuat efek elemen yang keluar dari flow dan ditempatkan disisi kiri atau
kanan suatu elemen Selektor(float:left} Value lain : None, right
16. Clear
Property ini digunakan bersama dengan float dan disini ditentukan apakah elemen bisa
menerima suatu float atau tidak. Selektor{ clear:both} Value lain : left, right, none
17. Clip
Property ini untuk mengatur cupilkan kecil suatu elemen untuk ditampilkan. Selektor{
clip:rect('top', 'right', 'bottom', 'left')} Value lain : both

Property Background
Property ini berguna untuk mengatur tampilan background atau halaman belakang suatu web serta
pengaturan suatu background yang lainnya misalnya background dari font.
1. Background
Property ini untuk mengatur background secara luas Selektor{ background:bottom} Untuk
value lain bisa : url, none, center, left, right, top, no-reapet, reapet, reapet-x, reapet-y, fixed,

56
MODUL PRAKTIKUM PEMROGRAMAN WEB I

scroll Untuk contoh penggunaaan value url :

Selektor(background:url(http://rudydevianto.com/background.png) fixed no-reapet top
left}
2. Background-color
Property ini untuk mengatur warna dari background Selektor {background-color:#000033}
Value lain anda bisa gunakan pewarnaan hexadecimal.
3. Background-image
Property ini untuk mengatur background gambar dari suatu table , halaman atau elemen
yang lain Selektor(background:url(http://rudydevianto.com/logo.png)} atau value none
untuk tidak menampilkan gambar.
4. Background-attachment
Property ini untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll
atau tetap Selektor{ background-attachment:scroll} Value lain : fixed
5. Background-repeat
Property ini untuk membuat perintah pada image yang ada pada background untuk
perulangan karena disebabkan gambar yang ukuran kecil Selektor{ background-
repeat:repeat} Value lain: no repeat, reapet-x, reapeat-y
6. Background-position
Property ini untuk mengatur posisi dari gambar background pada halaman. Selektor{
background-position:top} Value lain : left, right, bottom, center
Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Property Background</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<br><div class="bg">Background</div>
<br><div class="bgcolor">Background Color</div>
<br><div class="bgimage">Background image</div>
<br><div class="bgattachment">Background Attachment</div>
<br><div class="bgrepeat">Background repeat</div>
<br><div class="bgposition">Background Position</div>
</body>
</html>

57
MODUL PRAKTIKUM PEMROGRAMAN WEB I

File css disimpan dengan ekstensi .css dengan nama style.css

.bg{
background: tomato;
width : 1000px;
height : 200px;
}
.bgcolor{
background-color: yellow;
width : 1000px;
height : 200px;
}
.bgimage{
background-image:url(../Gambar/ypls.png);
width : 1000px;
height : 200px;
}
.bgattachment{
background-image:url(../Gambar/ypls.png);
background-attachment: fixed;
width : 1000px;
height : 200px;
}
.bgrepeat{
background-image:url(../Gambar/ypls.png);
background-repeat: no-repeat;
width : 1000px;
height : 200px;
}
.bgposition{
background-image:url(../Gambar/ypls.png);
background-position: bottom;

58
MODUL PRAKTIKUM PEMROGRAMAN WEB I

background-repeat: no-repeat;
width : 1000px;
height : 200px;
}

Property Interface
Property ini untuk mengatur tampilan pada web untuk membuat tampilan yang ditujukan untuk
pengguna .
1. Cursor
Property ini untuk mengatur tampilan cursor yang kan dipakai user pada browser
Selektor{cursor:auto} Value lain : url , crosshair, default, e-resize, help, move, ne-resize,
n-resize, nw-resize, pointer, se-resize, sw-resize, text, wait, w-resize
2. Outline
Property ini mengatur garis tepi dari elemen secara global Selektor{outline:#333333}
untuk warna bisa menggunakan warna hexadecimal lain atau value lain : dashed, dotted,
double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick
3. Outline-color
Properti ini mengatur warna dari garis tepi suatu elemen Selektor{outline:#333333} untuk
warna bisa menggunakan warna hexadecimal lain
4. Outline-style
Property ini untuk mengatur style dari garis tepi suatu elemen Selektor{outline:dashed}
value lain : dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin,
thick
5. Outline-width
Property ini untuk mengatur sebeapa lebar garis tepi suatu elemen Selektor{ outline-
width:medium} Value lain : thick, thin
Praktikum

<!DOCTYPE html>
<html>
<head>
<title>Property Interface</title>
<link a href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<br><div class="crs">Property Cursor</div>

59
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<br><div class="outline">Property Ouline</div>

<br><div class="outlinecolor">Property Outline Color</div>
<br><div class="outlinestyle">Property Outline Style</div>
<br><div class="outlinewidth">Property Outline Width</div>
</body>
</html>

File css disimpan dengan ekstensi .css dengan nama style.css

.crs{
cursor: wait;
}
.outline{
outline: dotted;
}
.outlinecolor{
outline: dotted;
outline-color: #FFCC00;
}
.outlinestyle{
outline-style: dashed;
}
.outlinewidth{
outline: dotted;
outline-width: 5px;
}

60
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 17
Mengatur Hypelink dengan CSS
Hyperlink merupakan link yang dibuat untuk mengalihkan halaman saat di klik. hyperlink atau
link dibuat dengan menggunakan tag <a> dan di akhiri dengan tag </a> di HTML.
Ada empat status yang di miliki oleh hyperlink html dan bisa di manipulasi dengan menggunakan
css. yaitu :
• link . merupakan link aktif biasa.
• visited. merupakan status sebuah link yang telah di kunjungi.
• hover. merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
• active. merupakan status sebuah link atau hyperlink pada saat sudah di klik.
untuk penggunaan atau pemanggilan hyperlink menurut statusnya dapat di tulis dengan syntax:
• a:link = untuk link biasa
• a:visited = merupakan status sebuah link yang telah di kunjungi.
• a:hover = merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
• a:active = merupakan status sebuah link atau hyperlink pada saat sudah di klik.
berikut ini adalah contoh mengatur hyperlink dengan css
Praktikum
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="link" href="http://www.malasngoding.com">Klik di sini</a>
</body>
</html>

Simpan file dengan nama style.css

.link{

61
MODUL PRAKTIKUM PEMROGRAMAN WEB I

font-size: 20pt;
}
.link:hover{
color: red;
}
.link:link{
color: blue;
}

62
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 18
Mengatur Format Teks dengan CSS
Praktikum
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_satu">Mengatur format text dengan CSS</p>
<p class="tulisan_dua">Mengatur format text dengan CSS</p>
<p class="tulisan_tiga">Mengatur format text dengan CSS</p>
<p class="tulisan_empat">
Belajar tutorial CSS
Mengatur format text dengan CSS.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Simpan file dengan nama style.css

.tulisan_satu{
color: blue;
text-decoration: underline;
}

63
MODUL PRAKTIKUM PEMROGRAMAN WEB I

.tulisan_dua{
text-align: right;
text-transform: capitalize;
text-decoration: overline;
}

.tulisan_tiga{
text-align: center;
text-transform: lowercase;
text-decoration: line-through;
word-spacing: 10px;
}

.tulisan_empat{
text-transform: uppercase;
text-indent: 30px;
line-height: 30px;
letter-spacing: 5px;
}

64
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 19
Positioning pada CSS
Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML. Terkadang kita ingin
membuat atau menetapkan posisi sebuah element dengan element yang lain. Maka dengan
menggunakan property position CSS ini kita dapat menentukan posisi sebuah element HTML
sesuai dengan yang kita inginkan. belajar css mengenal position css.
Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi sebuah element
HTML adalah :
• static
• relative
• fixed
• absolute
Secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti
menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk menetapan posisi
sebuah element. tetapi property tersebut tidak akan bekerja jika position belum di atur terlebih
dahulu. karena property lain tergantung dengan position yang di tetapkan.
Static
Position static digunakan untuk mengatur element menjadi statis secara default. Element akan
mengikuti posisi normal secara default.
Praktikum
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial mengenal position css</div>
</body>
</html>

65
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Simpan file dengan nama style.css

.kotak{
background: blue;
position: static;
}

Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.
Praktikum
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial position css di www.malasngoding.com</div>
</body>
</html>

Simpan file dengan nama style.css

.kotak{
background: blue;
position: relative;
left: 40px;
padding: 10px;
}

66
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Fixed
Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap. tanpa ada
perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top dan right
pada position fixed.
Praktikum
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial position css di www.malasngoding.com</div>
</body>
</html>

Simpan file dengan nama style.css

.kotak{
background: blue;
position: fixed;
left: 40px;
padding: 10px;
}

Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain. position
adalah salah satu property position css yang sangat berguna. salah satunya adalah untuk membuat
menu dropdown dengan HTML dan CSS.

67
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 20
Mengubah List dengan CSS
Untuk mengubah list HTML dengan CSS perhatikan contoh berikut ini.
Praktikum
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengubah list dengan CSS</h1>

<ul class="makanan">
<li>Bakso</li>
<li>Mie Goreng</li>
<li>Sate Padang</li>
<li>Rujak</li>
</ul>
<ul class="minuman">
<li>Soft drink</li>
<li>Teh manis</li>
<li>Kopi</li>
<li>Jus jeruk</li>
<li>Susu</li>
</ul>

68
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<li>Jawa Timur</li>
<li>Jawa Barat</li>
<li>Jakarta</li>
</ol>
<ol class="mobil">
<li>Sedan</li>
<li>Mini Bus</li>
<li>Truk</li>
<li>Pick Up</li>
</ol>
</body>
</html>

Simpan file dengan nama style.css

h1{
text-align: center;
}
ul.makanan{
list-style-type: square; /* list dengan bentuk square */
}
ul.minuman{
list-style-type: circle; /* list dengan bentuk lingkaran */
}
ol.alamat{
list-style-type: upper-alpha; /* list dengan bentuk alpha */
}
ol.mobil{
list-style-type: upper-roman; /* list dengan bentuk romawi */
}

69
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 21
Desain Tabel dengan CSS
Praktikum 1
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Design Table Dengan CSS</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>
<td>24</td>

70
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</tr>
<tr>
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>

Simpan file dengan nama style.css

.table1 {
font-family: sans-serif;
color: #232323;
border-collapse: collapse;
}
.table1, th, td {
border: 1px solid #999;

71
MODUL PRAKTIKUM PEMROGRAMAN WEB I

padding: 8px 20px;

}

Praktikum 2
Simpan file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>

72
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>

Simpan file dengan nama style.css

.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 50%;
border: 1px solid #f2f5f7;

73
MODUL PRAKTIKUM PEMROGRAMAN WEB I

.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.table1, th, td {
padding: 8px 20px;
text-align: center;
}
.table1 tr:hover {
background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}

74
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 22
Pengenalan Javascript
Apa Itu Javascript
Javascript adalah bahasa script yang biasa jalan di browser, orang-orang biasa bilang client side
programming. Client di sini adalah browser, seperti: Internet Explorer, Firefox, Safari dan
sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML.
Di mana saya bisa menulis kode javascript? Anda bisa menulis kode javascript di teks editor
seperti notepad dan sebagainya.
Apakah saya butuh compiler untuk menjalankan javascript? Tidak perlu, anda cukup menjalankan
javascript menggunakan browser. Semua browser mempunyai engine yang menginterpretasikan
kode javascript kita.
Sintaks Javascript
Sintaks javascript mirip-mirip bahasa C atau java. Javascript bersifat case sensitive, artinya huruf
kecil dan huruf besar adalah berbeda.
Setiap baris kode javascript dipisahkan baris baru atau bisa juga titik koma (;)
Komentar dalam javascript di awali dengan // atau ditulis diantara /* dan */
Variabel
Variabel di javascript bisa ditulis dengan diawalai huruf atau underscore ( _ ) atau tanda dollar
($).
Contoh : jumlah_hits , _nama
Deklarasi variable

• Anda bisa mendeklarasi dengan menggunakan var, contoh: var x = 5, ini bersifat local dan
global (bisa di akses oleh semua fungsi)
• Atau langsung deklarasikan tanpa var, x = 5
Contoh:
<script>
var x = 5;
var nama = “Desrizal”;
document.write(nama);
</script>

75
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 23
Penanganan Event
Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi event atau
kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses
jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double klik,
menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan sebagainya.
Sintaknya:
nama_event=”kode javascript”
Contoh:
<html>
<body>
<a href=”http://www.google.com” onclick=”alert(‘hello’)”>google</a>
</body>
</html>
Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka akan dieksekusi kode
javascript alert(‘hello’)
Ada macam-macam event yang bisa terjadi pada halaman web atau objek HTML, yaitu sebagai
berikut:
• onblur
• onchange
• onclick
• ondblclick
• onerror
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout

76
MODUL PRAKTIKUM PEMROGRAMAN WEB I

• onmouseover
• onmouseup
• onreset
• onresize
• onselect
• onsubmit
• onunload

Contoh Penanganan Event

onclick
Pada contoh dibawah kita membuat tombol, yang kalau diklik akan muncul window alert
<script>
function inform(){
alert("Hai anda mengklik saya")
}
</script>

Pada contoh berikut jika kita mengklik radio button akan mengubah warna latar halaman web
<html>
<body>
<form name="go">
<input type="radio" name="C1" onclick="document.bgColor='lightblue'">
<input type="radio" name="C1" onclick="document.bgColor='lightyellow'">
<input type="radio" name="C1" onclick="document.bgColor='lightgreen'">
</form>
</body>
</html>

77
MODUL PRAKTIKUM PEMROGRAMAN WEB I

onload
Event onload akan dieksekusi jika suatu objek telah diload, pada contoh berikut kita menaruh
event onload di tag <body>, artinya jika halaman web sudah diload semua, maka dieksekusi kode
javascript
<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('Halaman ini telah selesai di loading')">
Welcome to my page
</body>
</html>

onmouseover dan onmouseout

Onmouseover berguna untuk mendeteksi apakah pointer mouse berada di atas suatu objek HTML,
onmouseout berguna untuk mendeteksi apakah pointer mouse keluar dari objek HTML,
contoh:
<html>
<body>
<table>
<tr onmouseover="this.bgColor='lightblue'"
onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Baris pertama</td>
</tr>
<tr>
<td>Baris kedua</td>
</tr>
</table>
</body>
</html>

78
MODUL PRAKTIKUM PEMROGRAMAN WEB I

onunload
Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup suatu halaman web
<html>
<body onunload="alert('Thank you. Please come back to this site and visit us
soon, ok?')">
<h1>Welcome</h1>
</body>
</html>

79
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 24
Objek String
Memformat teks dengan Javascript
Untuk membantu melakukan formatting terhadap teks secara programming, javascript
menyediakan beberapa metode formatting menggunakan javascript.
Propety Deskripsi
length Menghasilkan jumlah karakter dari suatu string atau teks

Metode Deskripsi
anchor(nama) Menghasilkan string dengan diapit tag <A name="nama">
big() Menghasilkan string dengan diapit tag <BIG>.
blink() Menghasilkan string dengan diapit tag <BLINK>
bold() Menghasilkan string dengan diapit tag <B>
fixed() Menghasilkan string dengan diapit tag <TT> surrounding it.
fontcolor(warna) Menghasilkan string dengan diapit tag <FONT color="warna">
fontsize(size) Menghasilkan string dengan diapit tag <FONT size="size">
italics() Menghasilkan string dengan diapit tag <I>
link(url) Menghasilkan string dengan diapit tag <A href="url">
small() Menghasilkan string dengan diapit tag <SMALL>
strike() Menghasilkan string dengan diapit tag <STRIKE>
sub() Menghasilkan string dengan diapit tag <SUB>
sup() Menghasilkan string dengan diapit tag <SUP>
toLowerCase() Mengubah string menjadi huruf kecil semua
toUpperCase() Mengubah string menjadu huruf besar semua

Contoh 1:
<script>
var teks = "Desrizal"
panjang = teks.length;
alert(panjang);

80
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</script>

Contoh 2:
<script>
var message="Welcome to our site!"
document.write(message)
</script>

Contoh 3:
<form name="wordcount">
<textarea rows="12" name="wordcount2" cols="38"
wrap="virtual"></textarea><br>
<input type="button" value="Hitung kata" onClick="hitung()"> <input
type="text" name="wordcount3" size="20">
</form>
<script type="text/javascript">
function hitung(){
var formcontent=document.wordcount.wordcount2.value
isi=formcontent.split(" ")
document.wordcount.wordcount3.value=isi.length
}
</script>

81
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 25
Objek Window
Membuka Window di Javascript
Untuk membuka window di javascript adalah dengan metode open()
Sintaks:
window.open(url, nama_window, konfigurasi)

Contoh:
window.open(“http://www.google.com”,”windowku”,”width=300,height=200”);

Untuk konfigurasi yang bisa diset sebagai berikut:

Konfigurasi Deskripsi Nilai
width Lebar window Lebar window dalam pixel
height Tinggi window Tinggi window dalam pixel
toolbar Menampilkan toolbar browser 1 atau 0
menubar Menampilkan menu bar 1 atau 0
browser
scrollbars Apakah menampilkan 1 atau 0
scrollbars
resizable Set apakah bisa window 1 atau 0
diubah-ubah ukurannya

Contoh:
<html>
<body>
<script>
function bukawindow(){
window.open("http://www.google.com","google","width=400,height=300,toolbar=1");
}
</script>
<input type="button" onclick="bukawindow()" value="buka">

82
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</body>
</html>

Mereload, Menutup, Meloading Halaman Baru, Print

Untuk mereload window adalah dengan cara:
window.location.reload()
Untuk menutup window adalah dengan cara:
window.close()
Untuk meloading halaman baru adalah:
window.location="urlkamu.com"
kode di atas akan sama jika anda mengklik suatu link:
<a href=”urlkamu.com”>urlkamu</a>
Untuk mengeprint halaman web
window.print()

Komunikasi Antar Window

Adakalanya ketika kita membuka window baru, kita bisa melakukan komunikasi data ke window
parent-nya, atau bisa mengakses dan memanipulasi objek di window parent.
Untuk mengakses window parent gunakan window.opener
Contoh:
Induk.html
<html>
<head>
<title>Test</title>
<script language="javascript">
function buka(){
var x = window.open('anak.html', 'newWindow', 'height=300,width=300');
}
</script>
</head>
<body>

83
MODUL PRAKTIKUM PEMROGRAMAN WEB I

anak.html
<html>
<head>
<title>testing</title>
<script language=javascript>
function setInduk(){
window.opener.document.getElementById("kotak").value =
document.getElementById("inputan").value;
}
</script>
</head>
<body>
<form name=myForm>
<input type=text name="inputan" id="inputan">
<input type=button value="Click Me" onClick="setInduk();">
</form>
</body>
</html>

Alert, Confirm dan Prompt

alert digunakan untuk menampilkan window alert
Contoh:
<script>
alert(“Hellow World!!”);

84
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</script>

cofirm, digunakan untuk memunculkan window konfirmasi atau semacam pertanyaan yang
jawabannya antara OK atau Cancel
Contoh:
<script type="text/javascript">
var x=window.confirm("Apakah anda baik-baik saja?")
if (x)
window.alert("Good!")
else
window.alert("Too bad")
</script>

prompt, digunakan untuk meminta inputan melalui window

Contoh:
<script type="text/javascript">
var y=window.prompt("Masukkan nama anda")
window.alert(y)
</script>

85
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 26
Dynamic HTML
Mengakses dan Manipulasi Objek HTML
Untuk mengakses objek HTML, kita bisa menggunakan document.getElementById(”id_objek”)
atau document.getElementsByName(“nama_objek”)
Contoh:
<html>
<head>
<script type="text/javascript">
function getElement(){
var x=document.getElementById("myHeader")
alert("Ini adalah elemen " + x.tagName)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">
Klik saya untuk lihat nama tag saya</h1>
</body>
</html>

Berikut metode-metode untuk memanipulasi objek HTML

innerHTML
Fungsi: untuk mendapatkan isi teks atau html suatu objek atau tag HTML
Contoh:
<html>
<head>
<script type="text/javascript">
function lihatisi(){
isi = document.getElementById("kepala").innerHTML;

86
MODUL PRAKTIKUM PEMROGRAMAN WEB I

alert(isi);
}

function tukarisi(){
document.getElementById("kepala").innerHTML = "Tulisan Ini diganti";
}
</script>
</head>
<body>
<h1 id="kepala">Selamat Datang user!!</h1>
<input type="button" onclick="lihatisi()" value="Lihat isi H1">
<input type="button" onclick="tukarisi()" value="Tukar isi H1">
</body>
</html>

value
Fungsi: untuk mengambil atau memanipulasi nilai suatu input form
Contoh:
<html>
<head>
<script type="text/javascript">
function lihatisi(){
isi = document.getElementById("teks").value;
alert(isi);
}
function tukarisi(){
document.getElementById("teks").value = "Tulisan Ini diganti";
}
</script>
</head>
<body>

87
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Ketik tulisan di form di bawah:<br>

Memanipulasi Style atau CSS Objek HTML

Untuk memanipulasi style atau CSS suatu objek, adalah dengan cara:
objekHTML.style.namaStyle = “style yang diset”
objekHTML.namaStyle = “style yang diset”
atau
document.getElementById(“namaid”).style.namaStyle = “style yang diset”
document.getElementById(“namaid”).namaStyle = “style yang diset”
Mengubah warna latar TD
<html>
<head>
</head>
<body>
<table border=1 width=500 bgcolor="yellow">
<tr>
<td onmouseover="this.bgColor='red'"
onmouseout="this.bgColor='yellow'">Desrizal</td>
</tr>
<tr>
<td onmouseover="this.bgColor='red'" onmouseout="this.bgColor='yellow'">Nurmi
Yulita rahmi</td>
</tr>
</body>
</html>

88
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Mengubah warna latar halaman web

<html>
<head>
<script>
function ubah(){
document.bgColor = "lightblue";
}
</script>
</head>
<body>
<input type="button" onclick="ubah()" value="ubah">
</body>
</html>

Mengubah posisi objek

<html>
<head>
<script>
function ubah(){
document.getElementById("kotak").style.top = 300;
document.getElementById("kotak").style.left = 300;
}
</script>
</head>
<body>
<input type="button" onclick="ubah()" value="ubah">
<div id="kotak" style="position:absolute;top:50;left:50;background-
color:yellow;width:50;height:50">
</div>
</body>
</html>

89
MODUL PRAKTIKUM PEMROGRAMAN WEB I

PART 27
Penanganan Form
Penanganan CheckBox di javascript
Deteksi apakah checkbox sudah dicek
checkboxObject.checked=true|false
Contoh:
<html>
<head>
<script type="text/javascript">
function check(){
document.getElementById("myCheck").checked=true
}

function uncheck(){
document.getElementById("myCheck").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()"
value="Check Checkbox" />
<input type="button" onclick="uncheck()"
value="Uncheck Checkbox" />
</form>
</body>
</html>

90
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Mengambil Nilai checkbox

<html>
<head>
<script type="text/javascript">
function createOrder(){
coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i){
if (coffee[i].checked){
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="You ordered a coffee with " + txt
}
</script>
</head>
<body>
<p>How would you like your coffee?</p>
<form>
<input type="checkbox" name="coffee" value="cream">With cream<br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br />
<br />
<input type="button" onclick="createOrder()" value="Send order">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>

91
MODUL PRAKTIKUM PEMROGRAMAN WEB I

Penanganan Input Radio di Javascript

<html>
<head>
<script type="text/javascript">
function setkelamin(jenis){
document.getElementById("kelaminmu").value = jenis;
}
</script>
</head>
<body>
jenis Kelamin:
<br>
<input type=radio value="Laki-laki" name="kelamin"
onclick="setkelamin(this.value)">Laki-laki<br>
<input type=radio value="Perempuan" name="kelamin"
onclick="setkelamin(this.value)">Perempuan<br>
<input type=text id="kelaminmu">
</body>
</html>

Penanganan Select Box di Javacsript

Mengambil nilai select box
<html>
<head>
<script type="text/javascript">
function favBrowser(){
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex
].text
}
</script>

92
MODUL PRAKTIKUM PEMROGRAMAN WEB I

</head>
<body>
<form>
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>Your favorite browser is: <input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>

Mendelete option dari dropdown list

<html>
<head>
<script type="text/javascript">
function removeOption(){
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>

<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>

93
MODUL PRAKTIKUM PEMROGRAMAN WEB I

<option>Orange</option>
<option>Melon</option>
</select>
<input type="button" onclick="removeOption()" value="Remove option">
</form>
</body>
</html>

Anda mungkin juga menyukai

Modul Pemrograman Web I RPL
Belum ada peringkat
Modul Pemrograman Web I RPL
89 halaman
Modul HTML SMK
Belum ada peringkat
Modul HTML SMK
40 halaman
Modul Pemweb Dasar
Belum ada peringkat
Modul Pemweb Dasar
25 halaman
Modul Web Kelas XL - RPL
Belum ada peringkat
Modul Web Kelas XL - RPL
50 halaman
1 HTML+Javascript
Belum ada peringkat
1 HTML+Javascript
116 halaman
Modul Pemrograman Web New 2018
Belum ada peringkat
Modul Pemrograman Web New 2018
104 halaman
Modul Aplikasi Berbasis Web - HTML
Belum ada peringkat
Modul Aplikasi Berbasis Web - HTML
29 halaman
Open Modul1
Belum ada peringkat
Open Modul1
92 halaman
Modul Web Dasar
Belum ada peringkat
Modul Web Dasar
50 halaman
Dasar Pemrograman HTML
Belum ada peringkat
Dasar Pemrograman HTML
30 halaman
ModulDasarHTML 2
Belum ada peringkat
ModulDasarHTML 2
10 halaman
Modul Praktikum HTML - Modul1-HTML
Belum ada peringkat
Modul Praktikum HTML - Modul1-HTML
20 halaman
Prak PWC
Belum ada peringkat
Prak PWC
74 halaman
Modul I
Belum ada peringkat
Modul I
10 halaman
MATERI PEMROGRAMAN DASAR - Unknown - Unknown
Belum ada peringkat
MATERI PEMROGRAMAN DASAR - Unknown - Unknown
12 halaman
MODUL Pemrograman Web
Belum ada peringkat
MODUL Pemrograman Web
86 halaman
TUTOR
Belum ada peringkat
TUTOR
32 halaman
Modul Prak Web I Dina Pert 2
Belum ada peringkat
Modul Prak Web I Dina Pert 2
27 halaman
Sena
Belum ada peringkat
Sena
7 halaman
HTML p1
Belum ada peringkat
HTML p1
30 halaman
Pertemuan 1 - Pendahuluan Dan Dasar HTML
Belum ada peringkat
Pertemuan 1 - Pendahuluan Dan Dasar HTML
52 halaman
Modul HTML 5 Programming
Belum ada peringkat
Modul HTML 5 Programming
29 halaman
Modul Praktikum
Belum ada peringkat
Modul Praktikum
78 halaman
Modul Interaksi Manusia Dan Komputer
Belum ada peringkat
Modul Interaksi Manusia Dan Komputer
49 halaman
Yayan Adrianova Eka Tuah-Jobsheet-Pemrograman-Web-1
Belum ada peringkat
Yayan Adrianova Eka Tuah-Jobsheet-Pemrograman-Web-1
9 halaman
Pengertian HTML Dengan Format Penulisan
100% (1)
Pengertian HTML Dengan Format Penulisan
24 halaman
Modul Desain Website
Belum ada peringkat
Modul Desain Website
98 halaman
HTML - Ricky Septiandy v2
Belum ada peringkat
HTML - Ricky Septiandy v2
47 halaman
HTML Anatomy
Belum ada peringkat
HTML Anatomy
29 halaman
Belajar HTML
Belum ada peringkat
Belajar HTML
13 halaman
Modul - Pemrograman Web - 1
Belum ada peringkat
Modul - Pemrograman Web - 1
10 halaman
Modul I
Belum ada peringkat
Modul I
16 halaman
Modul Prak Web 2016
Belum ada peringkat
Modul Prak Web 2016
58 halaman
Praktikum Web 1: Muharir M.Kom
Belum ada peringkat
Praktikum Web 1: Muharir M.Kom
22 halaman
Materi I HTML
Belum ada peringkat
Materi I HTML
10 halaman
Modul Web Programming I - Esty Purwaningsih - 2
Belum ada peringkat
Modul Web Programming I - Esty Purwaningsih - 2
47 halaman
Materi 2 - HTML
Belum ada peringkat
Materi 2 - HTML
9 halaman
Modul Praktikum Desain Web
Belum ada peringkat
Modul Praktikum Desain Web
47 halaman
Modul 6
Belum ada peringkat
Modul 6
8 halaman
Modul Praktikum HTML
Belum ada peringkat
Modul Praktikum HTML
20 halaman
Materi-1 Pembelajaranhtml
Belum ada peringkat
Materi-1 Pembelajaranhtml
21 halaman
Pemograman WEB
Belum ada peringkat
Pemograman WEB
11 halaman
Modul Desain Web Pak Yasin
Belum ada peringkat
Modul Desain Web Pak Yasin
45 halaman
Modul 1 Pengenalan HTML
Belum ada peringkat
Modul 1 Pengenalan HTML
7 halaman
HTML Dasar
Belum ada peringkat
HTML Dasar
15 halaman
LKPD Web
Belum ada peringkat
LKPD Web
7 halaman
Bahasa Pemrograman HTML & JS - Modul 2
Belum ada peringkat
Bahasa Pemrograman HTML & JS - Modul 2
25 halaman
Pertemuan 2 HTML Dan Format Text
Belum ada peringkat
Pertemuan 2 HTML Dan Format Text
16 halaman
Konsep Dasar HTML
Belum ada peringkat
Konsep Dasar HTML
27 halaman
Laporan Praktikum Pemrograman Web 1
Belum ada peringkat
Laporan Praktikum Pemrograman Web 1
8 halaman
HTML Siske
Belum ada peringkat
HTML Siske
6 halaman
Belajar HTML Gratis
Belum ada peringkat
Belajar HTML Gratis
62 halaman
Tag Dasar HTML PDF
Belum ada peringkat
Tag Dasar HTML PDF
8 halaman
Laporan Praktikum Pengenalan HTML
100% (1)
Laporan Praktikum Pengenalan HTML
12 halaman
Belajar HTML
Belum ada peringkat
Belajar HTML
15 halaman
Modul 1 Pemrograman Web
Belum ada peringkat
Modul 1 Pemrograman Web
5 halaman
Jobsheet Pemrograman Web 1
Belum ada peringkat
Jobsheet Pemrograman Web 1
8 halaman
Modul 2 Menerapkan Format Pada Teks Pada Halaman Web PDF
Belum ada peringkat
Modul 2 Menerapkan Format Pada Teks Pada Halaman Web PDF
3 halaman
Manajemen Hosting Berbasis WHM/cPanel
Dari Everand
Manajemen Hosting Berbasis WHM/cPanel
Fajar Mukharom
3.5/5 (6)
Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
Dari Everand
Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
Risal
4/5 (16)