Verizal Bahan Ajar Tugas Akhir

TUGAS AKHIR
MENGEMBANGKAN PERANGKAT PEMBELAJARAN
BAHAN AJAR
OLEH
NAMA : VERIZAL
NOMOR PESERTA : 19086252410025
UNIT KERJA : SMK Negeri 2 Padang Panjang
PENDIDIKAN PROFESI GURU DALAM JABATAN

TEKNOLOGI KOMPUTER DAN INFORMATIKA
UNIVERSITAS NEGERI PADANG
2019
Bahan Ajar Pemrograman Web dan Perangkat Bergerak KD.3.2 Verizal, S.Kom, M.Kom 1
Lampiran 1. Materi pembelajaran
BAHAN AJAR
Satuan Pendidikan : SMK Negeri 2 Padang Panjang

Mata Pelajaran : Pemrograman Web dan Perangkat Bergerak
Kompetensi Keahlian : Rekayasa Perangkat Lunak
Kelas/Semester : XI / 1
Materi Pokok : Menerapkan Format Teks pada Halaman Web
Pertemuan ke : 1 s/d 4
Alokasi Waktu : 4 Pertemuan x 4 jam x 45Menit
A. Tujuan Pembelajaran:
1. Pengetahuan
a. Produk
1) Setelah pelajaran ini berakhir, secara mandiri dan tanpa membuka
bahan ajar siswa dapat menganalisi konsep anatomi dokumen
web dengan mengerjakan soal terkait di LP 3: Produk sesuai kunci
jawaban minimal sama dengan nilai KKM.
2) Setelah pelajaran ini berakhir secara mandiri dan tanpa membuka
bahan ajar, siswa dapat menjelaskan konsep pemformatan teks dan
paragrapah dengan mengerjakan soal terkait di LP 3: Produk
sesuai kunci jawaban minimal sama dengan nilai KKM.
3) Setelah pelajaran ini berakhir secara mandiri dan tanpa membuka
bahan ajar, siswa dapat menjelaskan Pembuatan list minimal
dengan mengerjakan soal terkait di LP 3: Produk sesuai kunci
jawaban minimal sama dengan nilai KKM.
b. Proses
Siswa dapat menjelaskan list kombinasi dan minimal dengan
menjawab rincian tugas kinerja proses pada lembar penilaian LP 4 :
Assesment kinerja proses
2. Keterampilan
Dengan menggunakan komputer, siswa dapat membuat kode html
untuk menampilkan teks dalam format tertentu pada halaman web
dan membuat laporan tentang pembuatan list minimal dan kombinasi
B. Kompetensi Dasar
3.2 Menerapkan format teks pada halaman web
4.2 Membuat kode html untuk menampilkan teks dalam format tertentu
pada halaman web keberlanjutan
C. Indikator Pencapaian Kompetensi

1. Indikator KD pada KI pengetahuan
 Meganalisis konsep anatomi dokumen web
 Menjelaskan konsep pemformatan teks dan paragrapah
 Menggunakan list kombinasi dan minimal
2. Indikator KD pada KI keterampilan
 Mengidentifikasi informasi tentang anatomi dokumen web
 Menyajikan hasil kesimpulan anatomi dokumen web
 Mendemontrasikan hasil kesimpulan tentang anatomi dokumen web
 Membuat hasil kesimpulan tentang pembuatan list minimal dan
kombinasi
D. Uraian Materi Ajar

Penggalan Materi 1
1. Anatomi Dokumen Web
a. Struktur dasar HTML;
 HTML (HyperText Markup Language) adalah salah satu bahasa
pemprograman web design dan juga biasa di sebut script untuk
menyusun dokumen-dokumen Web.
 Dokumen HTML disimpan dalam format teks reguler dan mengandung
tag-tag yang memerintahkan web browser untuk mengeksekusi
perintah-perintah yang dispesifikasikan.
 Struktur dasar HTML
 Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a) Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">",
sebagai contoh <body> adalah tag dengan nama body.
Tag harus ditulis secara berpasangan, yang terdiri atas
 tag pembuka
 tag penutup (ditambahkan karakter "/" setelah karakter "<")
Sebagai contoh <body> ini adalah tag pembuka isi dokumen
HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
b) Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag
penutup. Sebagai contoh untuk menampilkan judul dokumen HTML
pada web browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen HTML

Judul Dokumen HTML ini adalah isi judul dari dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML,

tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar
Catatan : Jika penulisan script salah, maka script tidak terbaca

sempurna (ERROR) sehingga dapat mengganggu penampilan dan
dinamika web itu sendiri
c) Attribute
Attribute mendefinisikan property dari suatu element HTML, yang
terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
Secara umum nilai attribute harus berada dalam tanda petik satu atau
dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan
latarbelakang halaman web menjadi hitam, penulisannya adalah
<body bgcolor="black"
text="yellow">
b. Versi HTML;
1) Versi HTML1
Ini adalah versi awal html, pada masa ini html hanya bisa digunakan
untuk membuat:
 heading,
 hypertext,
 cetak tebal (bold),
 cetak miring (italic),
 list
 dan paragraph.
Pada versi ini sebuah web hanya bisa berisi satu atau dua gambar saja.
Karena minimnya penggunaan gambar maka biasanya website dahulu
hanya berisi teks saja.
2) Versi HTML2
HTML2 dirilis pada tanggal 14 Januari 1996 dengan beberapa
penambahan fitur baru salah satunya adalah fitur form. Versi HTML ini
dapat dikatakan sebagai awal untuk membuat sebuah web interaktif.
3) Versi HTML3
Dirilis pada tanggal 18 Desember 1997 dengan tetap konsisten
menambahkan fitur terbarunya salah satu fitur yang terkenal pada masa
ini adalah fitur tabel didalam paragraph.
HTML3 dikenal juga dengan HTML+ karena banyak penambahan fitur
yang lebih fleksibel untuk membuat web yang intraktif.
4) HTML3.2
Merupakan perkembangan dari HTML3 yang menambahkan sedikit
kekurangan atau kesalahan pada HTML3.
5) HTML4
Dirilis pada tahun 1999 tepatnya tanggal 24 Desember. Dengan
menambahkan fitur seperti
 imagemaps,
 link
 dan sebagainya.
Pada masa ini web sudah semakin interaktif dan lebih mementingkan
tampilan yang menarik serta nyaman kepada pengguna.
6) HTML5
Ini adalah versi html yang diperbaharui hingga sekarang yang secara
resmi dirilis pada tahun 2009 yang menjadi standar terbaru sebuah web
saat ini. HTML5 merupakan proyek kerjasama antara W3C (World Wide
Web Consurtium) dan WHATG (Web Hypertext Application Technology
Group).
c. HTML, head, tittle, body;

1) Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah
HTML.
Sintaks:
<html>
</html>
2) Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head>
terletak di antara tag <html> dan tag </html>.
Sintaks:
<head>
</head>
3) Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela
browser. Tag <title> dan tag </title> terletak di antara tag <head>
dan tag </head>.
Sintaks:
<title>
</title>
4) Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag
</body> terletak di bawah tag <head> dan tag </head>. Element BODY
mempunyai attribute-attribute yang menspesifikasikan khususnya warna
dan latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w" background="uri" link="x"
alink="y" vlink="z">
</body>
text : memberikan warna pada teks

bgcolor : memberikan warna pada latarbelakang dokumen HTML
background : memberikan latarbelakang dokumen HTML dalam
bentuk gambar
link : memberikan warna untuk link
alink : memberikan warna untuk link yang sedang aktif
vlink : memberikan warna untuk link yang telah dikunjungi.
d. Tag, syntax, option;

a) Tag
Teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh
<body> adalah tag dengan nama body.
b) Syntax
Perintah khusus untuk
c) Option
Pilihan
e. Fungsi berbagai tag dalam HTML;

Berikut ini saya akan menyebutkan berbagai macam kode HTML dasar yang
perlu diketahui.
1. <br> Turun satu baris kebawah(enter) / Kursor dan
kalimat dibelakangnya turun 1 baris kebawah
2. <big>isi Membuat tulisan menjadi sedikit lebih besar
tulisan</big>
3. <font color=”warna Mewarnai tulisan. Ganti warna tulisan dengan
tulisan“>isi salah satu
tulisan</font> pilihan yang ada : red, blue, yellow, green,
brown, gold,
purple
4. Menambah 1 spasi karena ada kemungkinan
penggunaan 2 spasi tidak akan terbaca pada
beberapa engine blog
5. <font size=”ukuran Mengganti ukuran tulisan. Bisa digunakan
tulisan“>isi apabila kode
tulisan</font> pada no. 2 tidak sesuai dengan keinginan kita
6. <strong>isi Mengganti ukuran tulisan. Bisa digunakan
tulisan</strong> apabila kode pada no. 2 tidak sesuai dengan
atau <b>isi keinginan kita
tulisan</b>
7. <p> Kursor dan kalimat dibelakangnya turun satu
setengah
baris kebawah
8. <u>isi tulisan</u> Membuat garis bawah tulisan
9. <small>isi Membuat tulisan menjadi sedikit lebih kecil
tulisan</small>
10. <s>isi tulisan</s> Membuat garis mencoret pada tulisan
11. <pre>isi Membuat tulisan tetap pada keadaan yang kita
tulisan</pre> inginkan, misalnya untuk urutan berjejer
kebawah
12. <center>isi Membuat tulisan berada di tengah halaman
tulisan</center>
13. <blink>isi Membuat tulisan tampak berkedip
tulisan</blink>
f. Format teks dalam HTML;

Nama Tag Keterangan / Kegunaan
Basic
<!DOCTYPE> Tag untuk menentukan tipe dokumen
<html> Tag untuk membuat sebuah dokumen HTML
<title> Tag untuk membuat judul dari sebuah halaman
<body> Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6> Tag untuk membuat heading
<p> Tag untuk membuat paragraf
<br> Memasukan satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
 Tag untuk membuat komentar
Formatting
<acronym> Tag untuk membuat sebuah akronim (tidak disupport
lagi di HTML5)
<abbr> Tag untuk membuat sebuah singkatan
<address> Tag untuk membuat kontak alamat
<b> Tag untuk membuat huruf bercetak tebal
<bdi> Mengisolasi bagian dari teks yang dapat diformat dalam
arah yang berbeda dari teks lain di luarnya (tag baru
HTML5)
<bdo> Mengganti arah teks
<big> Tag untuk membuat text berhuruf besar (tidak disupport
lagi di HTML5)
<blockquote> Tag untuk membuat sebuah bagian text yang dikutip dari
sumber lain
<center> Tag untuk membuat jajaran teks menjadi ditengah (tidak
disupport lagi di HTML5)
<cite> Tag untuk membuat judul karya
<code> Tag untuk membuat potongan kode komputer di antara
text
<del> Tag untuk membuat teks yang telah dihapus dari
dokumen
<dfn> Tag untuk membuat sebuah istilah definisi
<em> Tag untuk membuat penekanan teks (tidak disupport lagi
di HTML5)
<font> Tag untuk membuat font, warna, dan ukuran untuk
teks (tidak disupport lagi di HTML5)
<i> Tag untuk membuat sebuah bagian dari teks yang
disesuaikan dengan mood
<ins> Tag untuk membuat teks yang telah dimasukkan ke
dalam dokumen
<kbd> Tag untuk membuat input keyboard
<mark> Tag untuk membuat teks yang disorot / ditandai (tag
baru HTML5)
<meter> Tag untuk membuat pengukuran skalar
<pre> Tag untuk membuat teks terformat
<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)
<q> Tag untuk membuat kutipan pendek
<rp> Tag untuk membuat apa yang harus ditampilkan di
browser yang tidak mendukung penjelasan ruby (tag
baru HTML5)
<rt> Tag untuk membuat sebuah anotasi / pengucapan
karakter (untuk tipografi Asia Timur)
<ruby> Tag untuk membuat sebuah anotasi ruby (untuk tipografi
Asia Timur) (tag baru HTML5)
<s> Tag untuk membuat teks yang tidak lagi benar
<samp> Tag untuk membuat contoh keluaran dari program
komputer
<small> Tag untuk membuat teks kecil
<strike> Tag untuk membuat teks yang di coret tengah (tidak
<strong> Tag untuk membuat teks penting
<sub> Tag untuk membuat teks subskrip (seperti dalam
penulisan Jat Kimia)
<sup> Tag untuk membuat teks superscripted (seperti dalam
penulisan akar kuadrat)
<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)
<tt> Tag untuk membuat teks teletype (tidak disupport lagi di
HTML5)
<u> Tag untuk membuat teks yang memiliki Gaya yang
berbeda dari teks biasa lainnya
<var> Tag untuk membuat sebuah variabel
<wbr> Tag untuk membuat kemungkinan garis-putus
Forms
Tag untuk membuat sebuah form HTML untuk input
<form> pengguna
<input> Tag untuk membuat sebuah kontrol input
Tag untuk membuat sebuah kontrol input multibaris (text
<textarea> area)
<button> Tag untuk membuat sebuah tombol yang dapat diklik
<select> Tag untuk membuat sebuah daftar drop-down
Tag untuk membuat sebuah kelompok pilihan yang
<optgroup> terkait dalam daftar drop-down
<option> Tag untuk membuat pilihan dalam daftar drop-down
Tag untuk membuat sebuah label untuk sebuah elemen
<label> <input>
<fieldset> Grup unsur terkait dalam bentuk
Tag untuk membuat sebuah caption untuk sebuah
<legend> elemen <fieldset>, < figure>, atau <details>
Menentukan daftar pilihan yang telah ditetapkan untuk
<datalist> kontrol input (tag baru HTML5)
Tag untuk membuat key-pair generator kolom input (tag
<keygen> baru HTML5)
Tag untuk membuat hasil penghitungan (tag baru
<output> HTML5)
Frames
<frame> Tag untuk membuat sebuah window (bingkai) dalam
sebuah frameset (tidak disupport lagi di HTML5)
<frameset> Tag untuk membuat satu set bingkai (tidak disupport lagi
di HTML5)
<noframes> Tag untuk membuat sebuah konten alternatif untuk
pengguna yang tidak mendukung frame (tidak disupport
lagi di HTML5)
<iframe> Tag untuk membuat sebuah bingkai
Images
<img> Tag untuk membuat gambar
<map> Tag untuk membuat gambar-peta
<area> Tag untuk membuat area dalam gambar-peta
<canvas> Digunakan untuk menggambar grafik, melalui scripting
(JavaScript ) (tag baru HTML5)
<figcaption> Tag untuk membuat sebuah caption untuk elemen
<figure> (tag baru HTML5)
<figure> Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio> Tag untuk membuat isi suara (tag baru HTML5)
<source> Tag untuk membuat sumber beberapa media untuk
elemen media (<video> dan <audio>) (tag baru HTML5)
<track> Tag untuk membuat trek teks untuk elemen media
(<video> dan <audio>) (tag baru HTML5)
<video> Tag untuk membuat sebuah video atau film (tag baru
HTML5)
Links
<a> Tag untuk membuat hyperlink
<link> Tag untuk membuat hubungan antara dokumen dan
Bahan Ajar Pemrograman Web dan Perangkat Bergerak KD.3.2 Verizal, S.Kom, M.Kom
10
sumber daya eksternal (paling sering digunakan untuk
link ke style sheet)
<nav> Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul> Tag untuk membuat daftar dengan selain nomor
<ol> Tag untuk membuat daftar dengan nomor
<li> Tag untuk membuat sebuah item daftar
<dir> Tag untuk membuat sebuah daftar direktori (tidak
<dl> Tag untuk membuat sebuah daftar definisi
<dt> Tag untuk membuat istilah (item) dalam daftar definisi
<dd> Defines a description of an item in a definition list
<menu> Tag untuk membuat deskripsi dari item dalam daftar
definisi
<command> Tag untuk membuat sebuah tombol perintah bahwa
seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table> Tag untuk membuat tabel
<caption> Tag untuk membuat sebuah caption tabel
<th> Tag untuk membuat sebuah sel header tabel
<tr> Tag untuk membuat baris dalam sebuah tabel
<td> Tag untuk membuat sel dalam sebuah tabel
<thead> Mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokanisi tubuh dalam sebuah tabel
<tfoot> Mengelompokan isi footer dalam sebuah tabel
Menentukan properti kolom untuk setiap kolom dalam
<col> elemen <colgroup>
Menentukan kelompok dari satu atau lebih kolom dalam
<colgroup> sebuah tabel untuk diformat
Style/Sections
<style> Tag untuk membuat informasi style untuk dokumen
<div> Tag untuk membuat sebuah bagian dalam dokumen
<span> Tag untuk membuat sebuah bagian dalam dokumen
Tag untuk membuat sebuah header untuk dokumen atau
<header> bagian (tag baru HTML5)
Tag untuk membuat footer untuk dokumen atau
<footer> bagian (tag baru HTML5)
Pengelompokan elemen heading (<h1> sampai
<hgroup> <h6>) (tag baru HTML5)
Tag untuk membuat bagian dalam dokumen (tag baru
<section> HTML5)
<article> Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside> Tag untuk membuat konten lain selain dari konten
11
halaman (tag baru HTML5)
Tag untuk membuat rincian tambahan yang pengguna
<details> dapat lihat atau sembunyikan (tag baru HTML5)
Tag untuk membuat sebuah kotak dialog atau
<dialog> jendela (tag baru HTML5)
Tag untuk membuat sebuah judul terlihat untuk elemen
<summary> <detil> (tag baru HTML5)
Meta Info
<head> Tag untuk membuat informasi tentang dokumen
<meta> Tag untuk membuat metadata tentang dokumen HTML
Menentukan URL dasar / target untuk semua URL relatif
<base> dalam dokumen
Menentukan standar warna, ukuran, dan font untuk
semua teks dalam dokumen (tidak disupport lagi di
<basefont> HTML5)
Programming
<script> Tag untuk membuat script di sisi klien
Tag untuk membuat sebuah konten alternatif bagi
<noscript> pengguna yang tidak mendukung script di sisi klien
Tag untuk membuat sebuah java applet yang
<applet> ditanam (tidak disupport lagi di HTML5)
Tag untuk membuat sebuah wadah untuk aplikasi
<embed> eksternal (non-HTML) (tag baru HTML5)
<object> Tag untuk membuat sebuah objek yang ditanam
<param> Tag untuk membuat sebuah parameter untuk objek
b. Pemformatan Teks dan Paragraf Web

Pemformatan adalah penambahan sentuhan pada teks untuk
membuat teks mudah dibaca dan lebih menarik. Pemformatan teks pada
halaman web dapat dilakukan dengan berbagai cara. bentuk huruf yang
ditampilkan di halaman web. Dalam pemformatan teks dipelajari
penggunaan dari beberapa tag yang digunakan dalam melakukan
pemformatan tampilan halaman web supaya lebih sesuai dengan keinginan
atau agar lebih rapi dan terstruktur.
Perhatikan beberapa daftar tag di bawah ini, serta kegunaan utamanya

dalam sebuah halaman HTML. Beberapa diantaranya telah dihilangkan dari
daftar tag HTML standar, namun masih memungkinkan untuk ditampilkan
pada beberapa browser tertentu atau browser lama.Pada pemformatan teks
menggunakan beberapa tag dasar yang mengatur teks. Pada tulisan ini
dibahas sedikit mengenai pemformatan teks dan pemformatan paragraf.
12
1. Pemformatan Teks
Teks dalam dokumen web dapat diformat secara khusus untuk
menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari
teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring,
digarisbawahi,dan lain sebagainya seperti contoh di bawah ini.
Tag Deskripsi Contoh

Mendefinisikan <b>contoh</b>
<b>
teks tebal hasil contoh
Mendefinisikan <em>contoh</em>
<em>
teks menekankan hasil contoh
Mendefinisikan <i>contoh</i>
<i>
teks miring hasil contoh
Mendefinisikan <small>contoh></small>
<small>
teks kecil hasil contoh
Mendefinisikan <strong>contoh</strong>
<strong>
teks penting hasil contoh
Mendefinisikan
<sub>contoh</sub>
<sub> teks di bawah
hasil contoh
garis
Mendefinisikan <sup>contoh</sup>
<sup>
teks di atas garis hasil contoh
Mendefinisikan <ins>contoh</ins>
<ins>
teks sisipan hasil contoh
Mendefinisikan <del>contoh</del>
<del>
teks dicoret hasil contoh
Mendefinisikan <mark>contoh</mark>
<mark>
teks ditandai hasil contoh
Tag HTML “keluaran computer”
Tag Deskripsi
<code> Mendefinisikan teks code computer
<kbd> Mendefinisekan teks keyboard
<samp> Mendefinisikan teks contoh code
<var> Mendefinisikan teks variable
<pre> Mendefinisikan teks terformat
13
HTML Citations, Quotations, and Definition Tags
Tag Deskripsi
<abbr> Mendefinisikan sebuah singkatan
<address> Mendefinisikan alamat atau kontak informasi
<bdo> Mendefinisikan arah teks
Mendefinisikan sebuah bagian yang dikutip dari
<blockquote>
sumber lain
<q> Mendefinisikan sebuah kutipan pendek
<cite> Mendefinisikan judul karya
<dfn> Mendefinisikan sebuah istilah definisi
Contoh Blockquote (pengaturan dalam template)
Patih Pranggulang menghunus pedangnya. Dengan cepat ia mengayunkan

pedang itu ke tubuh Tunjungsekar. tapi, aneh sebeleum menyentuh tubuh
Tunjungsekar, pedang itu jatuh ke tanah. Patih Pranggulang memungut
pedang itu dan membacokkan lagi ke tubuh Tunjungsekar. Tiga kali Patih
Pranggulang melakukan hal itu, Akan tetapi, semuanya gagal.
2. Pemformatan Paragraf
Paragraf atau alinea merupakan sekumpulan kalimat yang saling
berkaitan antara kalimat yang satu dengan kalimat yang lain. Agar
tampilan paragraf dalam halaman web terlihat rapi dapat menggunakan
pemformatan sebagai berikut.
1. Untuk mengelompokan teks dalam suatu paragraf gunakan tag
paragraf <p>teks</p>
2. Untuk mengatur perataan suatu paragraf gunakan tag paragraf dengan
fungsi align left <p align="left">untuk rata kiri</p>, align right <p
14
align="right">untuk rata kanan</p>, align center <p
align="center">untuk rata tengah<p>, dan align justify <p
align="justify">untuk rata kiri kanan</p>
3. Text-indent digunakan untuk memberikan indentifikasi ke dalam
terhadap teks. Nilai negatif tidak diperbolehkan. Pada contoh di bawah
menggunakan text-indent sebesar 25px.
Contoh :
1. Rata Tengah
Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar
lesu. Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan
rumah. Lalu bawahan suaminya beserta istri-istri mereka pada keluar
rumah untuk menyongsong. Tuan Hasan memapah istrinya yang sakit.
Sementara bawahan tuan Hasan berlomba menyambut kedatangan
nyonya Marta.
2. Rata Kiri
nyonya Marta.
3. Rata kanan
Kemudian mobil meluncur kembali, Nyonya Marta tampak bersandar lesu.
Tangannya dibalut dan terikat di leher. Mobil itu berhenti didepan
nyonya Marta.
4. Rata Kiri dan Kanan

nyonya Marta.
15
5. Text Indent
Kemudian mobil meluncur kembali, Nyonya Marta tampak
bersandar lesu. Tangannya dibalut dan terikat di leher. Mobil itu
berhenti didepan rumah. Lalu bawahan suaminya beserta istri-istri
mereka pada keluar rumah untuk menyongsong. Tuan Hasan
memapah istrinya yang sakit. Sementara bawahan tuan Hasan
berlomba menyambut kedatangan nyonya Marta.
Penggalan Materi 2
a. Menyajikan Hasil Pembuatan List Minimal dan Kombinasi
List adalah bagian teks di dalam dokumen yang berisi daftar item dari
suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang
bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta
harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari
suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari
langkah pertama sampai langkah terakhir.
1. Tipe Daftar dalam Dokumen HTML
Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu daftar
berurutan, tidak berurutan, dan daftar definisi.
1) Daftar berurutan (ordered list).

Daftar yang berurutan biasanya ditandai dengan penggunaan
penomoran tertentu. Penomoran ini bias menggunakan angka (1, 2,
3,…) maupun karakter alphabet tertentu (a, b, c,… atau i, ii, iii,…).
Daftar yang berurutan umumnya dipakai untuk item-item yang saling
berhubungan satu sama lain, atau untuk menuliskan langkah-langkah
atau prosedur dari kegiatan terntentu yang tidak dapat dilakukan
secara acak. Contoh daftar yang berurutan adalah pada cara membuat
dokumen HTML, misalnya :
Langkah-langkah membuat dokumen HTML :
Jalankan aplikasi Text Editor
1. Isikan kode HTML ke dalam Text Editor
2. Simpan file dengan ekstension .htm atau .html
3. Jalankan file HTML menggunakan aplikasi Web browser untuk
menampilkan hasilnya
Untuk membuat suatu daftar yang berurutan dalam dokumen HTML,

digunakan tag <ol> (ordered list), yang berpasangan dengan tag
</ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan
tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar
tersebut sudah berakhir. Masing-masing item di dalam daftar harus
dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup
dengan tag </li>. Contoh penulisan adalah sebagai berikut :
<ol>
<li>Urutan Pertama</li>
16
<li>Urutan Kedua</li>
</ol>
Maka hasilnya akan seperti di bawah ini.
1. Urutan Pertama
2. Urutan Kedua
Adapun atribut untuk tag <ol> adalah “type” yang menunjukan
jenis penomorannnya. Secara standart, tipenya adalah menggunakan
penomoran 1, 2, 3, 4 dst. Selain tipe default, tipe lain yang dapat
digunakan untuk keperluan penomoran dalam suatu list adalah :
1. A Membuat list dengan penomoran berupa karakter A, B, C, dst
2. a Membuat list dengan penomoran berupa karakter a, b, c, dst
3. I Membuat list dengan penomoran berupa karakter I, II, III, dst
4. i Membuat list dengan penomoran berupa karakter i, ii, iii, dst
2) Daftar Tidak Berututan (unordered list)

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat
diubah posisinya secara acak. Daftar seperti ni tidak menggunakan
penomoran seperti di atas, melainkan hanya dengan menggunakan
tanda atau symbol tertentu, misalnya gambar kotak atau bulat (bullet).
Contoh :
Daftar buah :
 Mangga
 Jambu
 Semangka
 Rambutan
 Jeruk
Pada contoh di atas, kita dapat mengubah/mengacak secara bebas

urutan dari masing-masing item yang ada. Hal ini disebabkan karena
setiap item yang ada tidak memiliki keterkaitan satu sama lain dengan
item lainnya, berbeda dengan suatu urutan langkah tertentu yang
harus ditulis secara berurutan.
Untuk membuat suatu daftar yang tidak berurutan dalam dokumen
HTML, digunakan tag <ul> (unordered list), yang berpasangan dengan
tag </ul>. Tag <ul> digunakan untuk memulai suatu daftar berurutan
tertentu, sedangkan </ul> berfungsi untuk menandakan bahwa daftar
17
tersebut sudah berakhir. Masing-masing item di dalam daftar harus
dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup
dengan tag </li>. Contoh penulisan adalah sebagai berikut :
<ul>
<li>Item satu</li>
<li>Item dua</li>
</ul>
Maka Hasilnya sebagai berikut.
 Item satu
 Item dua
Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis
tanda untuk setiap item berupa tanda bulatan untuk defaultnya.. Selain
tipe default, tipe lain yang dapat digunakan untuk keperluan unordered
list adalah :
 Disk Tanda bulatan hitam <ul type=”disk”>
 Circle Tanda bulatan putih <ul type=”circle”>
 Square Tanda kotak <ul type=”square”>
3) Daftar Definisi (definition list)
Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari
suatu istilah tertentu, misalnya daftar definisi istilah HTML.
b. Menyajikan Pembuatan List Kombinasi

Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan
daftar tidak berurutan. Untuk membuat daftar diatas pada dokumen HTML
maka cukup menggabungkan <ol> dangan <ul>. Perhatikan
penggabungan <ol> dengan <ul> berikut ini :
<ol>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ol>
Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag
tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh
browser akan ditampilkan secara otomatis menjadi daftar bullet. Tidak
demikian dengan daftar berurutan <ol>, maka agar tipenya sama dengan
daftar berurutan sebelumnya, kita harus memberikan atribut tipe yang
sama dengan daftar berurutan sebelumnya. Contoh :
18
<ul>
<li> </li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
<li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
</li>
<li>
</li>
</ul>
Contoh :
Tipe-tipe Tulisan Sandi
1. Sandi Abjad/Sandi Balik

2. Sandi Koordinat
3. Sandi Angka
4. Sandi Napoleon
5. Sandi Morse
1. Sandi Rumput
2. Sandi Bangun (Bentuk)
3. Sandi Kimia
4. Sandi Morse
5. Sandi Semahore
6. Sandi Jam
7. Sandi Nomor
8. Sandi Geser
9. Sandi Naik Turun Tingkat
Contoh yang lainnya adalah :
1. Landasan Hukum/Legal Operasional

2. Aspek Institusional
3. Aspek teknis dan Teknologi
1. Tempat Penampungan Sementara (TPS)
2. Tempat Pemrosesan AKhir (TPA)
4. Peran serta Masyarakat dan Jender dalam Pengelolaan sampah
5. Permasalahan dalam pengelolaan Sampah
19
Memulai Dengan Nomor Tertentu
Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan
1 (nomor/huruf awal), maka kita harus mendefinisikan dengan atribut
“start” pada elemen tag <ol>. Misalnya contoh berikut :
<ol start="17">
<li>Blok huruf dengan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up .</li>
</ol>
Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya
18 dan 19
17. Blok huruf dengan text tool
18. Klik tab karakter
19. Pilih jenis huruf pada menu pop-up .
Demikian juga apabila :

<ol type=”A” start="17">
<li>Blok huruf dengan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up .</li>
</ol>
Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya
R, dan S. Penggunaan daftar bernomor yang tidak dimulai dengan nomor
awal, biasanya diperlukan apabila daftar yang kita buat sudah diselingi
beberapa paragraph, sehingga ketika dibuat daftar bernomor, secara
default akan dimulai dari awal, padahal harusnya melanjutkan nomor
sebelumnya. Maka digunakanlah atribut “start=” tersebut.
Penggalan Materi 3
Buatlah kelompok 3-4 orang satu kelompok lalu kerjakan
Untuk membuat dokumen HTML dengan Text Editor paling tidak ada 4 tahap:
 Buka Text Editor/HTML Editor
 Ketikkan dokumen HTML
 Simpan dengan format *.html
 Buka hasilnya/dokumen html dengan web browser
Buatlah beberapa dokumen HTML berikut ini. :
a. HTML Heading
<!DOCTYPE html>
<html>
<head>
<title>Heading</title>
</head>
<body>
20
<h1>This is heading 1</h1>
</body>
</html>
Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang elemen Heading?
E. Rujukan
1. From Zero To A Pro: Membuat Aplikasi Web Dengan PHP + Database
MySQL, Abdul Kadir, Penerbit Andi, 2010
2. Buku Pintar Pemrograman Web, Adhi Prasetyo, Penerbit Mediakita, 2012
3. Pemrograman Web (HTML, PHP & MySQL) Edisi Revisi, Budi Rahardjo,
Imam Heryanto, Enjang RK, Penerbit Modula Bandung, Juni 2012
4. Learning PHP, MySQL, and JavaScript, Robin Nixon, Penerbit O'Reilly
Media, Inc., 2009
5. http://artha073.blogspot.com/2016/01/anatomidokumen-web-1.html
6. https://berilit.blogspot.com/2016/04/memahami-web-dan-anatomi-
web.html
7. http://www.mikirbae.com/2016/08/pemformatan-teks-dan-paragraf-
web.html
8. http://www.mikirbae.com/2016/08/menyajikan-hasil-pembuatan-list-
minimal.html
21

Verizal Bahan Ajar Tugas Akhir

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Verizal Bahan Ajar Tugas Akhir

Diunggah oleh

Hak Cipta:

Format Tersedia

TUGAS AKHIR

MENGEMBANGKAN PERANGKAT PEMBELAJARAN

PENDIDIKAN PROFESI GURU DALAM JABATAN

Satuan Pendidikan : SMK Negeri 2 Padang Panjang

pada halaman web keberlanjutan

C. Indikator Pencapaian Kompetensi

D. Uraian Materi Ajar

<title> ini adalah tag pembuka judul dokumen HTML

Tag-tag yang ditulis secara berpasangan pada suatu element HTML,

Contoh penulisan tag-tag yang benar

Catatan : Jika penulisan script salah, maka script tidak terbaca

c. HTML, head, tittle, body;

text : memberikan warna pada teks

d. Tag, syntax, option;

e. Fungsi berbagai tag dalam HTML;

f. Format teks dalam HTML;

b. Pemformatan Teks dan Paragraf Web

Perhatikan beberapa daftar tag di bawah ini, serta kegunaan utamanya

Tag Deskripsi Contoh

Tag HTML “keluaran computer”

Contoh Blockquote (pengaturan dalam template)

Patih Pranggulang menghunus pedangnya. Dengan cepat ia mengayunkan

4. Rata Kiri dan Kanan

1) Daftar berurutan (ordered list).

Untuk membuat suatu daftar yang berurutan dalam dokumen HTML,

2) Daftar Tidak Berututan (unordered list)

Pada contoh di atas, kita dapat mengubah/mengacak secara bebas

Maka Hasilnya sebagai berikut.

b. Menyajikan Pembuatan List Kombinasi

1. Sandi Abjad/Sandi Balik

Contoh yang lainnya adalah :

1. Landasan Hukum/Legal Operasional

Demikian juga apabila :

Anda mungkin juga menyukai