Dokumen ini menjelaskan tentang pemrograman web dan perangkat bergerak, mencakup proses pembuatan website, aplikasi, dan software. Di dalamnya terdapat penjelasan mengenai tahapan pemrograman, jenis website, istilah-istilah penting dalam pengembangan web, serta penggunaan HTML dan berbagai tag untuk mendefinisikan elemen dalam web. Selain itu, dokumen ini juga memberikan contoh penggunaan tabel, daftar, link, dan form dalam HTML.

1. PEMROGRAMAN WEB
dan
PERANGKAT BERGERAK
H T M L

2. Pemrograman adalah proses membuat program
di komputer. Pembuatan program ini bisa
berupa website, software, aplikasi android, dan
sebagainya. Pemrograman dimulai melalui
beberapa tahapan, seperti tulis menulis,
menguji, merevisi, mengevaluasi, serta
pengujian kembali. Tahapan-tahapan tersebut
dilakukan terus menerus sampai program jadi
sesuai yang di inginkan.
Apa itu Pemrograman ? ?

3. Website merupakan kumpulan halaman digital
yang berisi informasi berupa teks, animasi,
gambar, suara dan video atau gabungan dari
semuanya yang terkoneksi oleh internet,
sehingga dapat dilihat oleh seluruh siapapun
yang terkoneksi jaringan internet.
Apa itu W E B ? ? ?

4. Pemrograman web adalah pembuatan aplikasi
program dengan bahasa skrip yang akan
menghasilkan sebuah aplikasi yang diakses pada
web browser.
Apa itu Pemrograman Web? ? ?

5. Jenis Kategori Website:
a. Web Statis : Merupakan website yang mempunyai
halaman yang tidak berubah. Perubahan suatu
halaman dilakukan
secara manual dengan mengedit code yang menjadi
stuktur dari website tersebut.
Contoh web statis adalah website pribadi, situs konten
berita, profil perusahaan.
b. Web Dinamis : Merupakan website yang secara terstruktur
diperuntukan untuk diupdate sesering mungkin.
Biasanya disediakan halaman backend untuk
melakukan perubahan konten dari website tersebut.
Contoh web dinamis adalah website toko online, website
berita, website forum.

6. Istilah-Istilah dalam Pemrograman Web
Ada beberapa istilah yang sering digunakan apabila
kita mempelajari pemrograman web ini
diantaranya yaitu:
1. Internet
Internet berarti rangkaian komputer yang
terhubung menjadi beberapa rangkaian jaringan.
2. World Wide Web (WWW)
WWW merupakan kumpulan web server
diseluruh dunia yang dapat menyediakan data
dan informasi untuk dapat digunakan secara
massal.

7. 3. Website
Website merupakan istilah yang merujuk kepada suatu
nama halaman web yang dapat diakses jika terkoneksi
dengan internet. Untuk mengakses sebuah website,
selain terkoneksi dengan internet, anda pun harus
membukanya dalam sebuah aplikasi web browser.
4. Web Server
Web Server merupakan perangkat lunak yang
digunakan untuk menerima permintaan melalui
Protokol HTTP atau HTTPS dari client, kemudian
dikirimkan kembali dalam bentuk halaman-halaman
web.
• Contoh web server : Xampp, Apache2Triad, dll.

8. 5. URL (Universal Resource Locator)
URL merupakan suatu alamat yang menunjukkan
sebuah halaman
tertentu internet. Contoh URL adalah:
http://www.google.com
6. HTTP (Hypertext Transfer Protocol)
HTTP merupakan bagian dari URL digunakan
untuk mengidentifikasikan lokasi web, dan
digunakan dalam protokol HTML.

9. 7. DNS (Domain Name System)
DNS merupakan sistem database terdistribusi
yang tidak banyak dipengaruhi oleh
bertambanhnya database. DNS menjamin
informasi host terbaru akan disebarkan ke
jaringan bila diperlukan.
8. IP (Internet Protocol)
IP (Internet Protocol) merupakan protokol yang
digunakan dalam internet, secara teknis
bermakna suatu bentuk pengisian dan
pengalamatan data-data dan informasi yang akan
dikirim melalui internet.

10. 9. Hyperlink
Hyperlink atau disebut link merupakan sebuah tools yang berperan
dalam mempopulerkan penggunaan internet, hyperlink dapat
mereferensikan sebuah teks atau gambar ke alamat lain di
internet.
10. Web Browser
Menggunakan web browser mudah, yang diperlukan hanyalah
Anda
harus memiliki alamat web yang akan dibuka. Alamat ini biasa
disebut
dengan Uniform Resource Locator (URL). Jika menggunakan sistem
operasi Windows terdapat program web browser bawaan, yaitu
Internet Explorer. Terdapat banyak program alternative web
browser yang sebagian besar bersifat gratis, seperti Firefox, Opera,
Safari, chrome dan seterusnya.

11. Pengenalan HTML
• Hypertext Markup Language (HTML) adalah bahasa
standard yang digunakan untuk menampilkan
halaman web.
• Yang bisa dilakukan dengan HTML yaitu :
 Mengatur tampilan dari halaman web dan isinya.
 Membuat tabel dalam halaman web
 Mempublikasikan halaman web secara online
 Membuat form, objek-objek seperti citra, audio,
video, animasi java applet dalam halaman web.
 Menampilkan area gambar (canvas) di browser

12. Tag dan Elemen HTML
• Penanda perintah di dalam HTML biasanya
disebut TAG.
• TAG digunakan untuk menentukan tampilan
dari dokumen HTML
• Contoh tag berpasangan dengan format berikut
<BEGIN TAG> Isi dokumen </END TAG>

13. Contoh tag:
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Hai apa kabar?
selamat memulai latihan pertama.
</body>
</html>

14. TABEL
• Tabel sering digunakan dalam website
• Misalnya dalam menampilkan data
mahasiswa, sekap keuangan dan sebagainya.
• Dengan tabel biasanya tampilan data akan
terlihat lebih rapi.
• Tampilan data yang berasal dari database pun
akan lebih nyaman dilihat jika ditampilkan
dalam bentuk table.

15. Lanjut Tabel
• HTML menyediakan tag-tag untuk membuat
sebuah tabel, yaitu :
 Tag <TABLE> : untuk mendefinisikan sebuah
tabel
 Tag <TR> : untuk mendefinisikan baris tabel
 Tag <TH> : untuk mendefinisikan judul pada sel
dalam tabel
 Tag <TD> : untuk mendefinisikan isi tiap sel
dalam tabel

16. Contoh Tabel
<html>
<head>
<title>Menggunakan Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td colspan="2">cell 1a & cell 1b</td>
<td rowspan="2">cell 1c & cell 2c</td>
</tr>
<tr>
<td align="center">cell 2a</td>
<td>cell 2b</td>
</tr>
</table>

17. List
• Untuk menampilkan daftar dalam web, HTML
memiliki tag khusus untuk itu.
• Jika daftar tersebut tidak terurut (tampil
menggunakan bullet), maka tag yang dugunakan
adalah <UL> yang berarti unordered list atau list
yang tak terurut.
• Namun jika daftar tersebut adalah penting urutannya,
maka tag yang digunakan adalah <OL> yang berari
ordered list atau disebut list yang terurut.

18. Contoh List
<html>
<head>
<title>Contoh Latihan List</title>
</head>
<body>
<h1 align="center">Tugas Akhir</h1>
<h1 align="center">Pengembangan SMK POPAYATO</h1>
<UL>
<li>Pendahuluan</li>
<OL>
<li>Latar Belakang</li>
<li>Rumusan Masalah</li>
<li>Manfaat dan Tujuan</li>
<li>Batasan Masalah</li>
</OL>
<li>Daftar Pustaka</li>
</UL>
</body>
</html>

19. Lanjut contoh list :
<html>
<head>
<title>Ordered List dengan Atribut
Type</title>
</head>
<body>
<h3>List dengan type Alfabet</h3>
<ol type='a'>
<li>Tutorial List di Html</li>
<li>Tutorial Link di Html</li>
<li>Tutorial List di Html</li>
</ol>
<h3>List dengan type Alfabet Kapital</h3>
<ol type='A'>
<li>Tutorial List di Html</li>
<li>Tutorial Link di Html</li>
<li>Tutorial List di Html</li>
</ol>
<h3>List dengan type Romawi</h3>
<ol type='i'>
<li>Tutorial List di Html</li>
<li>Tutorial Link di Html</li>
<li>Tutorial List di Html</li>
</ol>
<h3>List dengan type Romawi
Kapital</h3>
<ol type='I'>
<li>Tutorial List di Html</li>
<li>Tutorial Link di Html</li>
<li>Tutorial List di Html</li>
</ol>
</html>

20. Contoh Unordered List
<html>
<head>
<title>Membuat Unordered List</title>
</head>
<body>
<h1>Bahasa Pemrograman untuk di pelajari :</h1>
<ul>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</html>

21. Lanjut Contoh UL
<html>
<head>
<title>Membuat Unordered List</title>
</head>
<body>
<h3>Bahasa Pemrograman untuk di pelajari :</h1>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h3>Framework untuk di pelajari :</h1>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
<h3>Tools untuk di pelajari :</h1>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>
<h3>Pelajari juga :</h1>
<ul type="disc">
<li>JSON</li>
<li>XML</li>
<li>Markdown</li>
</ul>
</html>

22. Buat kode HTML menggunakan tag OL dan
UL untuk menampilkan :

23. Link
• Link menjadi penghubung antara satu halaman
dengan halaman lainnya.
• Link merupakan suatu gambar atau teks yang
terkait dengan suatu alamat tertentu.
• jika link diklik maka dokumen HTML akan
menuju ke alamat tersebut.
• Link ditandai dengan Achor, yaitu tag <A>

24. Jenis-Jenis Link
HTML membedakan jenis link berdasarkan lokasi
dokumen yang akan diakses. Adapun jenis-jenis
Tersebut adalah :
 Link Absolut
 Link Relatif
 Link dalam dokumen yang sama

25. Contoh link
<html>
<head>
<title>Target Link</title>
</head>
<body>
<h1 align="center">belajar
menggunakan link</h1>
</body>
</html>
Simpan dengan nama : targetlink.html

26. Lanjut contoh link :
<html>
<head>
<title>Penggunaan Link</title>
</head>
<body>
<a href="targetlink.html">Klik disini</a>
untuk menuju target link yang di tuju.<br>
</a>
</body>
</html>
Simpan dengan nama : latihan5link.html

27. Form
• Tag Form
• Tag <form> adalah tag yang digunakan untuk
mendefinisikan sebuah form. Jadi, sebuah
form dibentuk oleh pasangan tag <form> …..
</form>. Pada tag <form> terdapat dua atribut
yaitu atribut method dan action yang
mempunyai fungsi sebagai berikut:

28. Atribut Fungsi Method Digunakan untuk
menentukan cara mengirimkan data yang
dimasukkan user ke web server (metode
pengolahan form). Dimana terdapat dua metode
yaitu GET dan POST. Metode POST mengirimkan
seluruh data dari form yang terpisah dari URL.
Sedangkan, metode GET mengirimkan data pada
server dengan meletakkannya pada bagian akhir
URL. Action Digunakan untuk menentukan lokasi
atau URL dari file yang akan digunakan untuk
mengolah form tersebut. Berikut contoh dari
penggunaan tag <form> :

29. Atribut Fungsi
name Mendefinisikan nama pada elemen input. Atribut ini harus
Anda tulis pada semua elemen kecuali elemen tipe clear dan
submit.
maxlength Menentukan jumlah karakter maksimal yang dapat
dimasukkan pada suatu elemen input.
value Menyatakan nilai default pada suatu elemen input. Untuk
textbox, menentukan teks yang tertulis. Untuk checkbox atau
radio, menentukan nilai item yang dipilih yang akan dikirim ke
server. Sedangkan, untuk button submit dan reset, atribut ini
digunakan menentukan teks yang ditulis pada button.
size Menentukan lebar dari elemen input dalam pixel dimana
ukuran defaultnya adalah 20 pixel.
checked Hanya digunakan pada tipe checkbox dan radio untuk
menyatakan suatu item dipilih atau tidak (Penjelasan
mengenai atribut checked akan dibahas pada materi
berikutnya).
type Menentukan tipe input yang akan digunakan seperti text,
radio dan yang lainnya.

30. <html>
<head>
<title>Penggunaan Form di HTML</title>
</head>
<body>
<h4>Isilah formulir dibawah ini dengan baik dan benar ! </h4>
<hr>
<form action ="proses_input.php" method="get">
NIS : <input type="text" name="nim" size="11px" maxlength="9"> <br><br>
Alamat Rumah : <input type="text" name="alamat_rumah" size="40px">
<br><br>
Email : <input type="text" name="email"> <br><br>
No.Telepon : <input type="text" name="nomor_telepon"> <br><br>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</form>
</body>
</html>