Modul ini membahas tentang membuat tampilan halaman web sederhana menggunakan HTML. Peserta didik diajak untuk mengimplementasikan tag dan elemen HTML yang telah dipelajari sebelumnya dengan membuat tampilan halaman profil sekolah sebagai contohnya. Tugas akhir adalah membuat tampilan halaman web sederhana dengan tema bebas dalam waktu 1 hari.

1. PENGANTAR HTML
PEMROGRAMAN WEB DAN PERANGKAT BERGERAK
KELAS XI – REKAYASA PERANGKAT LUNAK
TEDI MULYADI, S.T
PERTEMUAN PERTAMA

2. KOMPETENSI DASAR
• Menerapkan format teks pada halaman web
• Membuat kode html untuk menampilkan teks dalam format tertentu pada halaman web
INDIKATOR PENCAPAIAN KOMPETENSI
3.2.1 Menjelaskan struktur dasar pemrograman web dengan html.
3.2.2 Menjelaskan berbagai versi dari html.
3.2.3 Menjelaskan tata cara penulisan script html dengan berbagai editor.
3.2.4 Menjelaskan parameter parameter dalam html.
3.2.5 Menjelaskan tag-tag dalam html.
3.2.6 Menjelaskan berbagai tag html untuk memformat teks.
3.2.7 Menerapkan format teks dalam script html.
4.2.1 Merancang program tampilan format teks dalam halaman web
4.2.2 Membuat program halaman web yang menampilkan teks dengan berbagai format.
4.2.3 Menguji hasil tampilan halaman web dengan berbagai format teks.
PERTEMUAN 1
PERTEMUAN 2
PERTEMUAN 3

3. TUJUAN PEMBELAJARAN
1. Menjelaskan berbagai tag HTML untuk tampilan web secara percaya diri
2. Menentukan versi HTML yang akan digunakan dengan percaya diri
3. Mendiagnosis parameter-parameter dalam HTML dengan teliti
4. Merancang tampilan format teks dalama halaman web secara mandiri
5. Menguji hasil tampilan halaman web dengan berbagai format teks secara
mandiri

4. PENDAHULUAN
• Internet merupakan jaringan global yang menghubungkan suatu
network dengan network lainya di seluruh dunia.
• TCP/IP menjadi protocol penghubung antara jaringan-jaringan
yang beragam di seluruh dunia untuk dapat berkomunikasi.
• World Wide Web (WWW) merupakan bagian dari internet yang
paling cepat berkembang dan paling populer.

5. WWW bekerja merdasarkan pada tiga mekanisme berikut:
• Protocol standard aturan yang di gunakan untuk berkomunikasi pada
computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol
untuk WWW.
• Address WWW memiliki aturan penamaan alamat web yaitu:
URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat
internet.
• HTML digunakan untuk membuat document yang bisa di akses melalui
web.

6. MENGENAL HTML
• HTML atau Hypertext Markup Language mulai dirancang pada tahun 1989 oleh seorang
ilmuwan dari Iggris, yaitu Tim Berners-Lee yang pada saat itu masih bekerja di CERN. Apa itu
CERN? CERN merupakan singkatan dari bahasa perancis, yaitu Consiel Europeen pour la
Recherche Nucleare, jika di terjemahkan artinya Dewan Eropa Untuk Riset Nuklir. Lokasi
CERN terletak di sebuah perbatasan Swiss dan Perancis, yang dibentuk pada tahun 1954 dan
dijadikan sebagai sebuah lembaga penelitian fisika nuklir untuk negara negara di eropa. Pada
saat itu Tim Berners-Lee ingin membantu para ilmuwan CERN untuk berbagi Informasi, karena
pada saat itu banyak sekali ilmuwan CERN yang berada diluar negeri, sehingga menyulitkan
untuk memberikan atau menerima sebuah informasi.
• Sehingga pada akhir tahun 1991 Tim Berners-Lee berhasil membuat dan mempublikasikan
sebuah dokumen yang HTML Tags dimana di dalam dokumen tersebut berisikan 18 macam
elemen yang didasarkan pada sebuah konsep bahasa markup, yaitu SGML (Standard
Generalized Markup Language)

7. VERSI HTML

8. HTML (HYPER TEXT MARKUP LANGUAGE
• HTML  standard bahasa yang digunakan untuk menampilkan
document web.
• Mengontrol tampilan dari web page dan contentnya.
• Mempublikasikan document secara online sehingga bisa di akses.
• Membuat online form yang bisa di gunakan untuk menangani
pendaftaran, transaksi secara online.
• Menambahkan object-object seperti image, audio, video dan juga java
applet dalam document HTML.

9. BROWSER DAN EDITOR
• Browser: Browser merupakan software yang di install di mesin
client yang berfungsi untuk menterjemahkan tag-tag HTML
menjadi halaman web. Browser yang sering di gunakan biasanya
Chrome, Internet Explorer, Netscape Navigator, Opera, Mozilla dan
masih banyak yang lainya.
• Editor: Program yang di gunakan untuk membuat document
HTML, ada banyak HTML editor yang bisa anda gunakan
diantaranya: Notepad++, Microsoft FrontPage, Adobe
Dreamweaver, Sublime Text dan lain-lain.

10. MENGENAL TAG-TAG HTML
• Kalo pada bahasa pemrograman kita mengenal code,
maka pada HTML kita mengenal yang namanya tag.
• Contoh tag html adalah <head>, <title>, <body>, <html>,
<img>, dan lain-lain.
• Tag html tidak bersifat case sensitive  <body> sama
dengan <BODY>

11. TAG-TAG HTML
 Bentuk umum penulisan tag html adalah:
<ELEMENT ATTRIBUTE = value>
Dimana:
• Element - nama tag
• Attribute - atribut dari tag
• Value - nilai dari atribut.
 Contoh:
<BODY BGCOLOR=lavender>

12. STRUKTUR HTML
<html> ... </html> : merupakan tag pembuka dari dokumen html.
<head> ... </head> :
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.
 Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>

13. LATIHAN SOAL
1. WWW Bekerja dengan beberapa mekanisme, coba anda jelaskan!
2. Tim Berners-Lee yang pada saat itu masih bekerja di CERN merupakan seorang ilmuwan dari
inggris. Apa itu CERN?
3. Apa yang anda ketahui tentang SGML !
4. Untuk membuat sebuah code HTML, ada tools yang diperlukan. Coba anda jelaskan!
5. Coba gambarkan struktur HTML yang anda ketahui!

14. TERIMA KASIH

15. TAG-TAG DALAM HTML
PEMROGRAMAN WEB DAN PERANGKAT BERGERAK
KELAS XI – REKAYASA PERANGKAT LUNAK
TEDI MULYADI, S.T
PERTEMUAN KEDUA

16. PENGANTAR
Sebelumnya kita telah mempelajari bagaimana bekerja dengan HTML. Bagian ini akan membahas
lebih dalam mengenai struktur dari Body HTML.
Pada dasarnya elemen HTML ada 2 kategori :
1. Elemen berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut.
2. Elemen berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser.

17. STRUKTUR HTML
 Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
<html> ... </html> : merupakan tag pembuka dari dokumen html.
<head> ... </head> :
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.

18. SUSUNAN HTML
Homepage
Kepala
<head>
Tubuh
<body>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>

19. TAG HTML
 Setiap document HTML harus di awali dan di tutup
dengan tag HTML  <html> …… </html>
 Tag <html> memberi tahu browser bahwa yang di dalam
kedua tag tersebut adalah document HTML.

20. TAG HEAD
 Bagian header dari document HTML di apit oleh tag <head></head>.
 Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan judul dari
halaman web.
<head>
<title>Welcome to WEBKU</title>
</head>

21. TAG BODY
 Tag <body> di gunakan untuk menampilkan text, image link dan semua yang
akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to WEBKU</title>
</head>
<body bgcolor="lavender">
<p>Latihan belajar HTML</p>
</body>
</html>

22. ATRIBUT PADA TAG BODY
1. BACKGROUND
Atribut ini digunakan untuk mengeset gambar untuk digunakan sebagai latar belakang pada sebuah
halaman. Kita cukup menggunakan atribut berikut untuk memilih sebuah gambar untuk dijadikan
latar belakang. Letakkan sebuah gambar dengan nama gambar.jpg satu folder dengan file html ini.
Lalu untuk memberikan background gambar penulisannya adalah sebagi berikut:

23. 2. BG COLOR
Bgcolor menentukan warna latar belakang dari halaman web. Misalnya, untuk mengatur warna latar
belakang halaman agar berwarna merah, kita dapat menggunakan tag berikut :

24. 3. TEXT
Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada halaman tersebut.

25. 4. LINK
Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang ada pada halaman tersebut
sebelum di-klik.

26. 5. VLINK
Berguna untuk menentukan warna standar dari tautan (link) yang ada pada halaman tersebut ketika telah
di-klik.

27. 6. ALINK
Berguna untuk menentukan warna standar dari tautan (link) pada halaman tersebut ketika kursor berada
diatasnya.

28. 7. MARGIN
TOPMARGIN dan LEFTMARGIN digunakan untuk menentukan jarak atas dan tepian pada halaman. Tag ini akan
terbaca pada browser Internet Explorer, sedangkan untuk browser Netscape tag yang digunakan adalah
MARGINHEIGHT dan MARGINWIDTH.

29. ELEMEN DASAR BLOCK LEVEL
 Block level element terdapat 6 tingkatan, yaitu H1 sampai H6.
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>

30. ELEMEN DASAR PARAGRAPH
 Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan Rekayasa Perangkat Lunak.
Siapa ya yang mo kenalan dengan saya.
</p>
<body>

31. ELEMEN DASAR – LIST ITEM (LI)
 Unordered list <ul> List item tidak berurutan (bullet)
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>

32.  Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Jurusan</P>
<ol start="1" type=“1">
<li>TKJ</li>
<li>RPL</li>
<li>MM</li>
<li>DKV</li>
</ol>
<body>

33. LIST ITEM
 Tipe-tipe pada list item - ordered list <ol> :
• “A” : A, B, C, …
• ”a” : a, b, c, …
• ”I” : I, II, III, …
• ”i” : i, ii, iii, …
• ”1” : 1, 2, 3, …

34. ELEMEN DASAR – HORIZONTAL RULES <HR>
 Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
dokumen html.
 Attribut dari <hr> adalah:
• Position: menetukan posisi dari <hr>, dengan nilai : center | right | left.
• Width: untuk menentukan panjang <hr>. Nilai default 100%.
• Size: untuk menentukan tebal dari <hr> dalam pixel.
• Noshad: Efek bayangan.
 Contoh:
<hr position=“center” width=90% size=3 noshad>

35. PEMFORMATAN PAGE
 Break : memulai baris baru
tag : <br>
 Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>

36.  Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan SMK Farmako Medika Plus</P>
 Format Text :
A. Physical Format B. Logical Format
C. Preformatted Text : menampilkan text seperti aslinya.
<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre>

37. ELEMEN DASAR – HYPERLINK <A>
 Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://webku.com/halaman”> Halaman Webku
</a>
 Untuk membuat link ke bagian tertentu dalam dokumen.
Contoh:

38. LATIHAN
• Buat kelompok diskusi untuk mengimplementasikan beberapa percobaan penggunaan atribut
dan elemen pada HTML.
• Masing-masing kelompok membuat pertanyaan terkait penggunaan atibut dan elemen
HTML.
• Setiap kelompok harus melakukan percobaan penggunaan atribut dan elemen dengan tema
bebas.
• Setiap kelompok harus mempresentasikan hasil dari percobaan penggunaan atribut dan
elemen HTML.

39. TERIMA KASIH

40. MEMBUAT HALAMAN WEB
PEMROGRAMAN WEB DAN PERANGKAT BERGERAK
KELAS XI – REKAYASA PERANGKAT LUNAK
TEDI MULYADI, S.T
PERTEMUAN KETIGA

41. PENGANTAR
Setelah anda mempelajari pertemuan sebelumnya, dan melakukan percobaan
penggunaan atribut dan elemen pada HTML. Selanjutnya kita akan coba
membuat tampilan halaman website sederhana dengan referensi modul yang
sudah kalian pelajari.

42. TARGET
• Peserta didik mampu menggunakan tag HTML
• Peserta didik mampu menggunakan elemen dan atribut HTML
• Peserta didik mampu berkreasi membuat tampilan halaman website
sederhana

43. PERSIAPAN
• Sebelumnya kita siapkan terlebih dahulu tools pendukung untuk
mengimplementasikan code HTML, yaitu :
• Sublime Text / Notepad++ / Text Editor lainnya.
• Browser untuk menguji hasil tampilan web.

44. IMPLEMENTASI HTML
Pada tahap ini sangat diperlukan kreatifitas anda dalam memanfaatkan code HTML mejadi sebuah tampilan yang
menarik, dengan konten-konten yang akan kita tampilkan pada halaman website. Namun karena pada modul ini
kita hanya membuat tampilan sederhana untuk merefleksikan modul yang sebelumnya sudah dipelajari. Sebagai
Contoh layout dibawah ini :

45. TUGAS INDIVIDU
• Silahkan anda membuat tampilan halaman website yang menarik, dengan Tema Profil Sekolah.
• Buat beberapa link sebagai pembagi halaman pada setiap konten menu-nya
• Proses pembuatan website hanya 1 hari setelah materi ini di sampaikan.
• Tugas dapat di kirim melalui google drive / LMS Mitra Sekolah