3

KATA PENGANTAR

Puji syukur alhamdulillah penulis ucapkan kehadirat Allah SWT atas segala rahmat-
Nya sehingga penulis dapat menyelesaikan modul penunjang pembelajaran TEFA produk
jasa WEB developer jurusan TJKT SMK Negeri 2 Kudus tahun pelajaran 2022/2023.
Modul ini berisi tentang format text HTML yang penulis harapkan dapat dilaksanakan
selama melaksanakan tugas sesuai tugas pokok dan fungsi sebagai guru mata pelajaran TJKT
SMK Negeri 2 Kudus tahun pelajaran 2022/2023. Modul ini dirancang berdasarkan
Kurikulum Prototipe guna memperkuat kompetensi peserta didik dari sisi pengetahuan,
ketrampilan, dan sikap secara utuh
Penulis mengucapkan terima kasih kepada Kepala SMK Negeri 2 Kudus yang telah
mengizinkan penulis membuat modul penunjang pembelajaran ini, kepada rekan-rekan guru
yang telah memberikan bantuan kepada penulis sehingga modul ini dapat diselesaikan.
Modul penunjang pembelajaran ini masih jauh dari sempurna. Oleh karena itu, saran
dan kritik yang membangun penulis harapkan demi penyempurnaan Modul ini di hari yang
akan datang.

Kudus, Juli 2022

Penulis
 DAFTAR ISI

Halaman Judul ...................................................................................................... i

Kata Pengantar ...................................................................................................... ii
Daftar Isi ............................................................................................................... iii
Tujuan Penggunaan Modul ................................................................................... vi
BAB I Pengantar HTML .................................................................................... 1
A. Tujuan Pembelajaran ......................................................................... 1
B. Uraian Materi ..................................................................................... 1
C. Tugas .................................................................................................. 4
D. Tes Formatif ....................................................................................... 4
BAB II Implementasi Format Text HTML ........................................................ 6
A. Tujuan Pembelajaran ......................................................................... 6
B. Uraian materi...................................................................................... 6
C. Tugas .................................................................................................. 10
D. Tes Formatif ....................................................................................... 10
BAB III Studi Kasus Format Text HTML ........................................................... 12
A. Soal Praktek ....................................................................................... 12
B. Tugas .................................................................................................. 12
Daftar Pustaka ....................................................................................................... 13
 TUJUAN PENGGUNAAN MODUL

Modul ini berisi tentang format text HTML merupakan ringkasan materi yang
disusun untuk memudahkan siswa dalam mempelajari teori pendukung dalam membangun
website yang menjadi salah satu produk teaching factory TKJT SMK N 2 Kudus. Modul ini
bertujuan memberi bekal dasar kepada siswa tentang membuat sebuah website.
Modul ini disusun karena keterbatasan buku praktis penunjang yang dimiliki siswa.
Siswa rata-rata mendapatkan referensi dari internet dan buku paket penunjang dari
perpustakaan yang jumlahnya tidak sebanding dengan jumlah siswa dan kurang spesifik
dalam implementasinya.
Kompetensi yang harus dicapai dalam materi ini, siswa memahami format text
HTML. Modul ini disusun berdasarkan kurikulum Prototipe, dimana kurikulum Prototipe
mempunyai ciri khusus yaitu memberi kemerdekaan dalam belajar. Modul ini menggunakan
sistem pendidikan berbasis kompetensi. Pendidikan berbasis kompetensi adalah pendidikan
yang memperhatikan kemampuan, keterampilan dan sikap. Salah satu karakter yang paling
penting adalah penguasaan terhadap pengetahuan dan keterampilan secara nyata.
Setiap siswa diharapkan mampu memahami isi dari Modul ini. Setelah selesai
mempelajari modul ini dalam setiap kompetensi, siswa diberikan tugas untuk
mengembangkan diri. Kemudian untuk melihat tingkat pemahaman kompetensi, siswa diuji
dengan mengerjakan tes formatif.
Setelah siswa mempelajari dan memahami isi modul ini, dengan melalui proses
evaluasi diharapkan siswa kompeten dalam memahami materi format text HTML.
 BAB I
FORMAT TEXT HTML

A. Tujuan Pembelajaran
Setelah mempelajari format text HTML, diharapkan siswa mampu :
- Memahami Format Text HTML
- Melakukan text formatting

B. Uraian Materi
1. Formating Paragraf
Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan
menyajikan informasi-informasi yang diperlukan. HTML juga mendefinisikan elemen
khusus, untuk mendefinisikan teks dengan makna khusus.
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti
teks tebal atau miring.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:
• teks tebal : menggunakan tag <b>
• teks penting : menggunakan tag <strong>
• teks miring : menggunakan tag <i>
• teks menekankan : menggunakan tag <em>
• teks menandai : menggunakan tag <mark>
• teks kecil : menggunakan tag <small>
• teks menghapus : menggunakan tag <del>
• teks memasukkan : menggunakan tag <ins>
• subscript / pangkat dibawah : menggunakan tag <sub>
• superscripts / pangkat di atas : menggunakan tag <sup>

2. Line Break
Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu
tidak berlaku dalam penulisan dokumen HTML. Seberapa banyak kita memencet
tombol Enter, maka tidak kan dianggap 1 pun.
Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru
layaknya fungsi tombol Enter pada keyboard. Line break menggunakan tag <br>
3. Preformatted Text
Jarak antar kata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu
spasi. Agar browser web menampilkan sesuai dengan dokumen web tersebut di dalam
editor teks, maka teks yang bersangkutan harus di beri tanda tag <pre> di awalnya dan
</pre> di akhir teks. Dengan tag <pre>, yang mempunyai kepanjangan "preformatted"
teks akan di tampilkan dalam browser dengan ukuran font dengan lebar - fix. Tag ini
juga akan menjaga spasi, baris baru, dan tap sesuai dengan aslinya pada saat di
tampilkan dalam browser.

4. Properti dari Font

Saat proses koding, ada kalanya kita harus melakukan pewarnaan, atau bahkan
menentukan jenis huruf dari font yang kita pakai dengan alasan tertentu, mungkin
karena info penting agar lebih bisa diperhatikan dll. Kita dapat menggunakan tag
style=" property : value " untuk mengubah style property dari font. Gunakan atribut
style untuk elemen styling HTML
 background-color untuk warna latar belakang
 color untuk warna teks
 font-family untuk font teks
 font-size untuk ukuran teks
 text-align untuk perataan teks

5. Garis Horizontal
Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara
visual. Tag yang digunakan adalah <hr>. Beberapa atributnya adalah ALIGN, SIZE,
dan WIDTH . Tag hr seperti halnya tag br (<br>) adalah tag yang beridiri sendiri.
Jadi tidak perlu ditutup dengan tag penutup

6. Format Teks
Format teks pada dokumen HTML dapat menampilkan berbagai jenis font,
ukuran font, dan warna font pada layar. Atribut-atribut yang digunakan pada <FONT>
adalah SIZE, FACE, dan COLOR. Tag <FONT> ini merupakan tag berpasangan, oleh
sebab itu harus diakhiri dengan tag slash-nya </FONT>.
 <FONT SIZE=”x” FACE=”y” COLOR=”z”> teks </FONT>

Dimana :
- x = ukuran font (1-7)
- y = jenis font (Comic Sans MS, Arial, Courier, dll)
- z = warna font (red, blue, green)

Ukuran font (SIZE) dapat diperbesar dan diperkecil dari nilai 1 sampai dengan
7 (default font adalah 3). Sedangkan untuk jenis huruf digunakan atribut FACE yang
mempunyai nilai atau jenis huruf yang lazim pada pengolah kata (Misalnya pada MS.
WORD) yaitu Comic Sans MS, Arial, Courier, dll). Penulisan jenis font ini harus
sesuai dengan font yang sudah lazim digunakan.
Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai
pada atribut tersebut. Ada dua bentuk pemberian nilai warna yang bisa dipakai pada
atribut COLOR ini, yaitu yang pertama dengan menggunakan nama warna itu sendiri,
contohnya blue, red, dan green. Sedangkan yang kedua adalah dengan menggunakan
kode RGB suatu warna seperti, #000000 = Black, #0000FF. Berikut adalah contoh
beberapa warna :

7. Pewarnaan Background
Website yang dibuat, kurang menarik jika belum disisipkan warna pada latar
belakang dari sebuah dokumennya. Pewarnaan pada latar belakang dokumen dapat
digunakan atribut pada <BODY>, yaitu atribut BGCOLOR. Pembuatan warna
background haruslah disesuaikan dengan warna teksnya. Jangan sampai Web site
yang dibuat, nantinya akan menampilkan tulisan-tulisan yang tidak dapat dibaca.
C. TUGAS
Jawablah pertanyaan berikut ini dengan jelas dan benar!
1. Sebutkan tag-tag yang kalian tau, beserta fungsinya?
2. Sebutkan atribut style HTML!

D. Tes Formatif
Pilihlah salah satu jawaban a, b, c, d, atau e yang dianggap paling benar!
1. Manakah tag untuk membuat baris baru?
a. <pre>
b. <div>
c. <br>
d. <hr>
e. <font>
2. Manakah tag untuk garis baru?
a. <pre>
b. <div>
c. <br>
d. <hr>
e. <font>
3. Apa fungsinya tag <pre>?
a. Memberi efek warna keren pada HTML
b. Membuat paragraph pada HTML
c. Membuat garis baru
d. Membuat baris baru
e. Menampilkan sebuah paragraph sesuai kode HTML
4. Apa fungsi dari tag <sup> dan <sub>?
a. <sup> pangkat dibawah <sub> pangkat diatas
b. <sup> pangkat diatas <sub> pangkat diatas
c. <sup> pangkat diatas <sub> pangkat dibawah
d. <sup> pangkat dibawah <sub> pangkat dibawah
e. <sup> pangkat dibawah <sub> pangkat ditengah
5. Apa fungsinya tag <em>?
a. Cetak miring
b. Garis bawah
c. Cetak tebal
d. Memberi warna
e. Garis bawah
 BAB II
IMPLEMENTASI FORMAT TEXT HTML

A. Tujuan Pembelajaran
Setelah mempelajari format text HTML, diharapkan siswa mampu :
- Melakukan text formatting
- Membuat dokumen HTML dan melakukan formatting terhadap dokumen tersebut

B. Uraian Materi
1. Memformat bentuk tulisan dalam HTML
a. (penebalan, penulisan miring, dan garis bawah pada font)
Simpan dengan nama “latihan2.html” di dalam folder latihan_html

Hasilnya :
 b. (superscript dan subscript)
Simpan dengan nama “latihan3.html” di dalam folder latihan_html

Hasilnya:

2. Penggunaan Line Break dalam HTML

Simpan dengan nama “latihan4.html” di dalam folder latihan_html
Hasilnya:

3. Penggunaan Pre dalam HTML

Simpan dengan nama “latihan5.html” di dalam folder latihan_html

Hasilnya:

4. Mengolah Property text

Simpan dengan nama “latihan6.html” di dalam folder latihan_html
Hasilnya:

5. Menambahkan garis horizontal pada HTML

Simpan dengan nama “latihan7.html” di dalam folder latihan_html
Hasilnya:

C. TUGAS
Jawablah pertanyaan berikut ini dengan jelas dan benar!
1. Apakah fungsi atribut ALIGN dalam teks HTML?
2. Bagaimana cara memberi warna pada teks?

D. Tes Formatif
Pilihlah salah satu jawaban a, b, c, d, atau e yang dianggap paling benar!
1. Menggunakan apakah tag untuk membuat komentar?
a. <scr>
b. <!-- -->
c. <k></k>
d. <pre></pre>
e. <div></div>
2. Apa itu komentar pada HTML?
a. Sebuah elemen HTML yang tampil di web browser
b. Sebuah elemen HTML yang tidak akan tampil di web browser
c. Sebuah elemen HTML untuk membuat komentar pada web browser
d. Sebuah elemen HTML untuk menampilkan font HTML
e. Semua benar
3. Coba perhatikan source coding dibawah ini!
<!—membuat komentar <h1>komentar</h1>--> pada source coding diatas apakah
akan tampil di website atau tidak?
a. Iya
b. Tidak
c. Hanya komentar saja
d. Hanya heading saja
e. Hanya membuat komentar saja
4. Dalam atribut style property yang digunakan untuk menentukan jenis huruf adalah?
a. Font-size
 b. Font-family
c. Text-align
d. Background-color
e. Font
5. Sintak yang benar untuk menambah warna latar belakang adalah?
a. <body=’background:green’>
b. <body color=’green’>
c. <background>green</background>
d. <body style=’background-color:green’>
e. <body=’background=green’>
 BAB III
STUDI KASUS FORMAT TEXT HTML

A. Soal Praktek
Buatlah file HTML seperti dibawah ini:

B. Tugas
- Simpan tugas diatas dengan nama “tugas2.html” dan simpan pada folder “Tugas”
 DAFTAR PUSTAKA

Rudyanto Arief. 2011. Pemrograman Web Dinamis Menggunakan PHP dan MySQL.
Yogyakarta: Penerbit Andi.