Scribd
Unggah
44 tayangan4 halaman

Modul 1 Pemograman Web

Diunggah oleh

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

Modul 1 Pemograman Web

Diunggah oleh

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

MODUL 1

HTML
Tujuan
1. Siswa dapat membuat desain Web menggunakan HTML
2. Siswa dapat mengerti dasar dari pemrograman Web.

HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup
Language) yang digunakan sebagai standar tampilan dari halaman Web. HTML dapat diterima
sebagai tampilan halaman Web setelah melalui proses interpretasi dari Web browser. Selain itu
HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap kesalahan.
Standar Minimum elemen HTML:
 Document Type Declaration (DTD)
 Head
 Body

<html>
<head>
<!—Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai pendukung
ingkungan seperti title, meta dokumen, CSS, Java Script -->
</head>
<body>
<!—Terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan web -->
</body>
</html>

1.1. DTD
Sebagai standar versi dokumen W3C yang digunakan sebagai representasi setiap elemen pada
dokumenWeb,
Contoh:
· <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1 - transitional.dtd">
Standar tipe dokumen tersebut dapat digunakan untuk validasi elemen halaman
Web.

1.2. Meta Dokumen


Elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari owner, keywords, l a y
o u t, ataupun inisialisasi proses seperti r e f r e s h.
Contoh:
· <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
· <meta name="owners" content="myWeb" />
. <meta name="keywords" content="Sistem Informasi, Jurnal, Publikasi Ilmiah" />
· <meta name="layout" content="main" />
· <meta HTTP-EQUIV="REFRESH" content="0; url=/myweb/myurl">
1.3. Elemen HTML
Jenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti:
Form, Text, Image, Table, Drop-Box, Button dan lainnya.
Contoh:
· Title,
Ditampilkan pada header browser
<title>Praktikum Pemrograman Web</title>
Text
<h1>Selamat Datang Di Website Kami!</h1>
<h2>Web Ini Adalah Tutorial Pemrograman Web</h2>
<h3>Praktikum Pemrograman Web</h3>
<p> <a href="http://uin-malang.ac.id"> Teknik Informatika
UIN Malang </a> </span> link for your success way </p>

Image
<img src="images/myphoto.jpg" width="180" height="200" alt="photo"/>

Form
<form method="POST" action="response2.jsp" enctype="multipart/form-data">

Drop-Box
<select name="My Lab">
<option value=’CC’>Lab. Praktikum Computer Vision</option>
<option value=’SI’> Lab. Sistem Informasi </option>
<option value=’CAI’> Lab. Computing & AI </option>
</select>

File Browser
<input type="file" name="upload" value="" width="200" />
Table
<table border="1" width="10">
<thead>
<tr>
<th>NIM</th>
<th>Siswa</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Ani Rahmawati </td>
</tr>
<tr>
<td>124</td>
<td>Budi Susilo</td>
</tr>
</tbody>
</table>
2. List
Bidang Minat:
<ol>
<li>Sistem Informasi
<ul>
<li>Data Warehousing </li>
<li>Enterprise Architecture </li>
</ul>
</li>
<li>Multimedia
<ul>
<li>Komputer Grafik </li>
<li>Machinema </li>
</ul>
</li>
</ol>
1.4. Instruksi Praktek

Buat file form1.html


Kopikan setiap kode script html sebagaimana diatas Amati yang terjadi pada browser dengan
melakukan refresh pada setiap perubahan kode Aktifkan plugin firebug pada browser Mozilla atau
chrome, kemudian lakukan inspeksi sambil melakukan perubahan-perubahan kode HTML

1.5. Jawablah pertanyaan berikut:


1. Lakukanlah perubahan pada kode HTML sesuai keinginan anda, Pernakah terjadi error ketika
adakesalahan kode?

2. Cobalah ubah nilai meta refresh <meta HTTP-EQUIV="REFRESH"


content="5; url=http://google.co.id"> apa yang terjadi?, maka jelaskan apa diantara kegunaan meta
dokumen?

3. Jelaskan fungsi tag HTML pada Table: thead, tbody, tr, th serta td!
1.6. Tugas I
Dengan menggunakan HTML buatlah desain form HTML, sebagai berikut:

Anda mungkin juga menyukai