Modul Web Programming - Pertemuan 1
Diunggah oleh
cloud.085730102088Modul Web Programming - Pertemuan 1
Diunggah oleh
cloud.085730102088Modul Pertemuan 1
Pengenalan HTML
Tujuan
1. Siswa dapat memahami atribut HTML
2. Siswa dapat membuat desain Web menggunakan HTML.
3. 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
Contoh struktur HTML :
<DTD>
<html>
<head>
<!—Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai pendukung seperti
title, meta dokumen, CSS, Java Script -->
</head>
<body>
<!—Terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan web -->
</body>
</html>
1.1 DTD (Document Type Declaration) / DOCTYPE
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">
<!DOCTYPE html>
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, layout, ataupun
inisialisasi proses seperti refresh.
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">
Modul Web Programming - Pertemuan 1.docx 1
1.3 Elemen HTML
Elemen pada HTML adalah susunan dari tag pembuka sampai tag penutup, elemen html didefinisikan oleh tag
pembuka, lalu di lanjutkan oleh kontent lalu di akhiri oleh tag penutup. Contoh :
Tag Pembuka Isi / Konten Elemen Tag Penutup
<nama_tag> Isi dari konten </nama_tag>
<nama_tag/> - -
Tabel 1.1 Konsep Elemen HTML
Tag Pembuka Isi / Konten Elemen Tag Penutup
<h1> Isi dari konten heading </h1>
<title> Judul web / header browser </title>
<form> Isi form </form>
<p> Isi dari paragraf </p>
<table> Isi tabel </table>
<img /> - -
<input /> - -
Tabel 1.2 Contoh penulisan konten HTML
Secara umum penulisan tag pada html itu berpasang- pasangan dimulai dengan <tag_pembuka> Isi dari
konten </tag_penutup>. Jadi yang dimaksud dengan pengertian elemen pada HTML adalah satu blok code yang
dimulai dari tag pembuka hingga tag penutup, namun ada juga tag yang dalam penulisannya berdiri sendiri
seperti <nama_tag/> tag tersebut merupakan contoh dari elemen HTML yang tidak memiliki tag penutup atau
disebut dengan Void Element. Jenis – jenis elemen yang akan ditampilkan pada halaman web seperti Form, Text,
Image, Table, Dropbox, Button, dan lainnya. Berikut contohnya :
• Title
<title>Pemrograman Web - IT MANSDA</title>
• Text
<h1>Selamat Datang Di Website Kami!</h1>
<h2>Web ini dibuat untuk pembelajaran pemrograman web</h2>
<h3>Praktikum Pemrograman Web</h3>
<p>
<a href="http://uin-malang.ac.id"> Pengembang IT MAN SIDOARJO </a> link for
your success way
</p>
Modul Web Programming - Pertemuan 1.docx 2
• Image
<img src="https://www.mansidoarjo.sch.id/wp-content/uploads/2019/11/IMG_3283.jpg"
alt="Upacara MANSDA">
• Form
<form method="POST" action="response2.jsp" enctype="multipart/form-data">
• Dropbox / Dropdown
<select name="jalur_ppdb_mansda">
<option value="PA">Prestasi Akademik</option>
<option value="PN">Prestasi Non Akademik</option>
<option value="TH">Tahfidz</option>
<option value="MH">Ma'had</option>
<option value="RG">Reguler</option>
</select>
Modul Web Programming - Pertemuan 1.docx 3
• File Input / Browser
<input type="file" name="upload" value="" width="200" />
• 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>
Modul Web Programming - Pertemuan 1.docx 4
• Blockquote
Berikut ini contoh elemen blockquote :
<blockquote cite="https://www.mansidoarjo.sch.id/">
Madrasah Aliyah Negeri Sidoarjo adalah sebuah madrasah dibawah kementerian
agama yang mencakup pengetahuan dan agama. MAN Sidoarjo memiliki program kerjasama
TIK dengan ITS yakni program PRODISTIK dimana pada program ini siswa akan diajarkan
berbagai macam keterampilan dalam bidang TIK dimana program ini memiliki sertifikat
langsung dari ITS Surabaya
</blockquote>
1.4 Instruksi Praktik
• Buat file latihan.html kemudian ketikkan kode berikut ini :
Modul Web Programming - Pertemuan 1.docx 5
<!DOCTYPE html>
<html>
<head>
<title>Hello World, Latihan Membuat Halaman (title)</title>
</head>
<body>
<header>Pemrograman Web Statis (header) </header>
<nav>
<ul>
<li><a href="https://www.mansidoarjo.sch.id/">Website Utama (li)</a></li>
<li><a href="https://ppdb.mansidoarjo.sch.id/">Website PPDB (li)</a></li>
<li><a href="https://perpustakaan.mansidoarjo.sch.id/">Perpustakaan Digital (li)</a></li>
</ul>
</nav>
<article>
<header>
<h1>
Artikel Ke-1 (h1)
</h1>
<br />
<br />
</header>
<section>
#Artikel Pertama, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
</section>
</article>
<br />
<br />
Modul Web Programming - Pertemuan 1.docx 6
<article>
<header>
<hgroup>
<h1>Pemrograman Web Statis (h1) </h1>
<h2>Menggunakan HTML5 Tingkat Dasar (h2) </h2>
<h3>Oleh Muhammad Andy (h3) </h3>
</hgroup>
<br />
<br />
</header>
<section>
#Artikel Kedua, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula
(section)
</section>
<br />
<br />
<p>
#Ini Paragraph pertama, dummy text dummy text dummy text dummy text dummy text
dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text.
(p)
</p>
<br />
<br />
<p>
#Ini Paragraph kedua, dummy text dummy text dummy text dummy text dummy text dummy
text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text.
(p)
</p>
<br />
<br />
<aside>Rekomendasi Artikel Terkait "Sejarah HTML5" (aside)</aside>
<aside>Rekomendasi Artikel Terkait "Pengembang HTML5" (aside)</aside>
</article>
<br />
<br />
<figure>
<center>
<img width="150" height="150"
src="https://ppdb.mansidoarjo.sch.id/image/logomansda.webp" alt="ini logo MAN Sidoarjo" />
<figcaption>
Ini merupakan Icon Web MAN Sidoarjo (figcaption)
</figcaption>
</center>
</figure>
<br />
<br />
<br />
<br />
<footer># footer -- Copyright <a href="https://www.mansidoarjo.sch.id/">MAN SIDOARJO</a>
2023 - All Right Reserved</footer>
</body>
</html>
Modul Web Programming - Pertemuan 1.docx 7
• Buka file html yang telah disimpan menggunakan browser kemudian amati apa yang ditampilkan pada web
browser.
• Tambahkan beberapa elemen form sebelum tag <footer> seperti pada kode berikut ini, kemudian amati
perubahan yang terjadi pada browser anda.
Modul Web Programming - Pertemuan 1.docx 8
<fieldset>
<form>
<!-- Contoh Input Form -->
<label for="namalengkap">Nama Lengkap:</label><br>
<input type="text" id="namalengkap" name="namalengkap"><br>
<br>
<!-- Contoh radio button -->
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
<br>
<!-- Contoh checkbox -->
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
<br>
<!-- Contoh select / dropdown -->
<select name="jalur_ppdb_mansda">
<option value="PA">Prestasi Akademik</option>
<option value="PN">Prestasi Non Akademik</option>
<option value="TH">Tahfidz</option>
<option value="MH">Ma'had</option>
<option value="RG">Reguler</option>
</select>
<br>
<!-- Contoh textarea -->
<textarea name="alamat" id="alamat" cols="30" rows="10"></textarea>
<br>
<!-- Button submit form dengan type submmit -->
<button type="button" onclick="alert('Hello World! Iam Programmer !')">Click Me! </button>
</form>
</fieldset>
• Tambahkan elemen tabel seperti kode berikut ini setelah tag </fieldset> dan sebelum tag <footer> :
Modul Web Programming - Pertemuan 1.docx 9
<br>
<hr>
<table>
<thead>
<th>NO</th>
<th>NAMA LENGKAP</th>
<th>ALAMAT</th>
<th>NOMOR TELFON</th>
<th>EMAIL</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SOKRAN</td>
<td>SIDOARJO</td>
<td>6287876543212</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>BASMAN</td>
<td>CANDI</td>
<td>62123456789</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<br><br>
<hr>
1.5 Post Test
A. Lakukanlah perubahan pada kode HTML sesuai dengan keinginan anda, pernahkah terjadi error ? Bagaimana
anda menyelesaikannya ?
B.
Cobalah berikan value / nilai pada meta refresh menjadi 10, apa yang terjadi ?
C. Jelaskan fungsi tag HTML pada table : thead, tbody, tr, th, td, tfoot !
1.6 Tugas 1
Dengan menggunakan HTML buatlah desain form HTML, sebagai berikut :
Modul Web Programming - Pertemuan 1.docx 10
Modul Web Programming - Pertemuan 1.docx 11
