Modul Ajar Web Fase F Ok
Diunggah oleh
olegaming93Modul Ajar Web Fase F Ok
Diunggah oleh
olegaming93A.
IDENTITAS MODUL
STRUKTUR KODE DESKRIPSI
BIDANG KEAHLIAN : 4. Teknologi Informasi
PROGRAM KEAHLIAN : 4.1 Pengembangan Perangkat Lunak dan Gim
KONSENTRASI : 4.1.1 Rekayasa Perangkat Lunak
KEAHLIAN
INSTITUSI : SMKS NU KEJAJAR
FASE / KELAS : FASE – F / XI
SEMESTER : I (Ganjil)
ALOKASI WAKTU : 36 JP X 45 Menit ( 1 - 6 Pertemuan )
TAHUN PELAJARAN : 2022 / 2023
Judul Elemen : 1. Pemrograman Web
Nama Penyusun : Wicaksono Budi Raharjo, S.Kom
B. KOMPETENSI AWAL / PRASYARAT
1. Awali setiap aktivitas dengan doa, semoga berkah dan mendapat kemudahan. Pahami tujuan, dasar teori, dan
latihan-latihan praktikum dengan baik dan benar.
2. Mampu melakukan instalasi aplikasi Database dan mampu melakukan pengecekan aplikasi
3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur.
4. Tanyakan kepada Tutor Sejawat/Guru apabila ada hal-hal yang kurang jelas. 5. Mampu menggunakan
command-line di windows
C. PROFIL PELAJAR PANCASILA
- Beriman dan bertaqwa kepada tuhan YME dan berakhlak mulia
- Mandiri
- Bernalar kritis
- Gotong royong
- Berani berekspresi dan menjadi pelopor bagi teman sejawat
D. SARANA DAN PRASARANA
Media Web Browser(Firefox,Chrome,dll) ,Web Server(Xampp,AppServ,dll),Text
Editor(Notepad,sublime,dreamweaver,dll)
Peralatan Laptop/PC, Whiteboard,
Sumber Belajar Modul ajar, Buku Basis Data Kelas XI
© SMKS NU KEJAJAR 2023 1
E. TARGET PESERTA DIDIK
• Peserta didik Reguler
• Peserta didik dengan capaian Tinggi
• Peserta didik dengan kesulitan belajar
F. MODEL PEMBELAJARAN
Model pembelajaran Discovery Learning dengan pendekatan saintifik konsep 6S
Pelaksanaan Pembelajaran Tatap Muka
Metode Direct Instruction
G. TUJUAN PEMBELAJARAN
▪ Memahami konsep dasar pengunaan perintah Data Definition Language
Mampu memanfaatkan command-line (client) dan juga penggunaan query SQL yang dipadukan
dengan Bahasa pemrograman tertentu
H. DASAR TEORI
1. HTML dan XHTML
HTML (HyperText Markup Language) merupakan sebuah bahasa markup, bukan bahasa
pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan
teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar
yang digunakan untuk mendesain halaman web.
Pada awal tahun 2000, konsorsium W3C (World Wide Web Consortium) membuat perubahan
besar melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalam upaya
meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan
ekstensibilitas XML (eXtensible Markup Language) ke HTML.
Perkembangan HTML semakin pesat seiring diperkenalkannya HTML5 pada tahun
2009.HTML5 dibangun oleh konsorsium W3C untuk dimasukkan sebagai perubahan besar
berikutnya pada standar HTML. Atas dasar ini, maka penting sekali untuk mengenal dan
memahami HTML5 dengan baik.
2. Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag <html>dan diakhiri dengan komplemennya,
yakni tag</html> tag. Dokumen HTML juga menyertakan tiga pasang tag.
• Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai
dokumen HTML.
• Tag <title> dan </title>: digunakan untuk menambahkan title di title bar
browser.
© SMKS NU KEJAJAR 2023 2
• Tag <body> dan </body>: digunakan untuk melingkupi semua teks yang terdapat di
halaman HTML.
Bentuk struktur dokumen HTML yang standar sebelum versi HTML5 diperlihatkan sebagai
berikut:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Ini baris komentar, tidak diproses -->
<title>Ini judul dokumen HTML4</title>
</head>
<body>
Ini adalah teks di body </body>
</html>
Pada HTML5, struktur penulisan lebih diringkas dengan bentuk sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Ini baris komentar, tidak diproses -->
<title>Ini judul dokumen HTML5</title>
</head>
<body>
Ini adalah teks di body </body>
</html>
Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan
di dalam dokumen HTML. Salah satu elemen yang perlu diperhatikan adalah untuk penulisan
komentar. Di HTML, komentar dinyatakan dengan tag <! — dan diakhiri dengan tag —>.
Bagaimanapun, praktikum ini menuntut adanya standardisasi yang baik
benar. Selain itu, penulisan dokumen HTML merujuk pada spesifikasi
HTML5.
3. Persiapan Kebutuhan
Pada praktikum awal ini, meskipun dokumen HTML bisa ditampilkan tanpa menggunakan
web server, namun di sini diwajibkan tetap menggunakan. Selain itu, praktikum ini juga
menuntut pembuatan kode-kode yang baik, benar, dan valid.Berikut ini adalah kebutuhan-
kebutuhan yang minimal diperlukan:
© SMKS NU KEJAJAR 2023 3
a. XAMPP/WampServer
Paket web server Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini
dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman.
b. Web Browser
Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk
pembanding, sebaiknya juga memanfaatkan browser lain.
c. Editor Teks
Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web (tidak
diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).
© SMKS NU KEJAJAR 2023 4
A. LATIHAN
1. Membuat Dokumen HTML
Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header
dan bodi. Di mana header mendefinisikan informasi mengenai dokumen,
sedangkan bodi mendefinisikan tubuh atau isi dokumen.
Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
<! DOCTYPE html>
<html lang="en">
<head>
<! - - I ni bar is kom e nt ar , t i dak di pr os e a -- >
<title>Ini judul dokumen</title>
</head>
<body>
Ini adalah teks di
body </body>
</html>
3. Simpan dokumen HTML dengan nama latihanl.l.html dan letakkan di
lokasi direktori web (C:\wamp\www atau C:\xampp\htdocs) Perhatikan,
wwwdan htdocsmerupakan direktori web dan sebaiknya buat subdirektori
di dalamnya.
<html>
< head>
<!— Ini baris komentar, tidak diproses
<title>Ini judul dokumen<©title>
</head>
C/html> v/ Ini judul dokumen - Mozilla Firefox
File Edit View History Bookmarks Tools help
Ini adalah teks di body
Gambar 1. Struktur Dokumen HTML
Bagaimanapun, dokumen HTML memang bisa ditampilkan dengan mengklik
ganda di mana pun lokasinya. Namun perlu diperhatikan, langkah ini bukanlah
© SMKS NU KEJAJAR 2023 5
cara untuk menjalankan halaman web di server lokal.
© SMKS NU KEJAJAR 2023 6
2. Publikasi Halaman Web
Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik
secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang
efisien, khususnya ketika aplikasi masih dalam tahap pengembangan.
Langkah yang diperlukan untuk publikasi ini sangat sederhana.
1. Pastikan bahwafile dokumen sudah diletakkan di direktori web, misalnya
untuk WampServer lokasi defaultnya adalah www. Untuk paket web
server lainnya, termasuk Apache (versi tunggal) adalah htdocs.
2. Pastikan bahwa web server sudah dijalankan.
3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke
lokasi dokumen. Perhatikan contohnya seperti Gambar 2.
Gambar 2. Mengakses halaman web dari server lokal
3. Format Teks
HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk
pemformatan teks.
■ Heading
Heading merupakan salah satu elemen penting di dalam dokumen HTML.
Heading didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di
mana n menyatakan tipe dengan nilai 1-6.
Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di
bawah ini. Perhatikan, kode HTML ini sengaja diringkas guna memudahkan
penulisan. Jadi, dalam implementasinya harus mendeklarasikan semua
elemen-elemen dasar.
© SMKS NU KEJAJAR 2023 7
<body>
<hl>Heading l</hl>
<h2>Heading 2</h2>
<hl>Heading 3</hl>
<h2>Heading 4</h2>
<hl>Heading 5</hl>
<h2>Heading 6</h2>
</body>
Gambar 3. Tampilan heading 1-6
Elemen heading menyediakan atribut align yang dapat digunakan untuk
mengaturposisi teks.
<body>
<hl align="right">Heading l</hl>
<h2 align="left”>Heading 2</h2>
<h3 align="center">Heading 3</h3
</body>
Gambar 4. Mengatur posisi heading
■ Paragraf
Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari
kumpulan paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui
tag <p>. Tag <p> sebenarnya merupakan tag pasangan, meski dalam
© SMKS NU KEJAJAR 2023 8
implementasinya kerap kali diabaikan
<body>
<P>
Ini paragraf pertama <P>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<p>
Ini paragraf ketiga
</body>
Gambar 5. Menggunakan paragraf
Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan
memanfaatkan atribut align. Sebagai contoh, dokumen berikut akan menghasilkan
paragraf rata tengah, kiri kanan, dan kanan.
<! DOCTYPE html>
<html lang="en">
<head>
<title>Demo Paragraf</title>
</head>
<body>
<p align="center">
Ini paragraf rata tengah
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<p align="right">
Ini paragraf rata kanan
</body>
</html>
© SMKS NU KEJAJAR 2023 9
Gambar 6. Mengatur posisi paragraf
Secara normal, baris baru akan ditambahkan di antara dua paragraf.
Adapun jika kita hanya ingin membuat baru, kita tidak harus menggunakan
paragraf. Sebagai gantinya, gunakan tag line break <br />.
<body>
Membuat baris baru <br />
Membuat baris baru <br />
<p>
<!— break di dalam paragraf —>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</body>
Gambar 7. Membuat baris
baru
■ Fontase
HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk
mengatur font, seperti huruf tebal, huruf miring, garis bawah, dan masih
banyak lagi.
Sebagai tambahan, di sini juga akan dijelaskan mengenai cara mencetak tag.
Seperti diketahui, tag <p> di dokumen secara otomatis akan diterjemahkan
sebagai paragraf. Adapun untuk mencetak karakter <p> di layar, kita perlu
menggunakan nama entitas. Sebagai contoh, karakter < dinyatakan dengan
nama entitas < dan karakter > dinyatakan dengan >.
<body>
<b>Menggunakan tag <b> . . .</b></b><br />
© SMKS NU KEJAJAR 2023 10
<strong>Menggunakan tag
<strong>...</strong></strong>
<br />
<i>Menggunakan tag <i> . . .</i></ixbr /> <em>Menggunakan
tag <em>...</em></em><br /> <u>Menggunakan tag <u> . .
.</u></uxbr /> <strike>Menggunakan tag
< strike>. . . </strike></strikexbr />
</body
Gambar 8. Menggunakan style
font
■ Karakter Khusus
Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan
memanfaatkan nama entitas. Tabel berikut memperlihatkan beberapa jenis
karakter khusus yang dapat digunakan beserta nama entitasnya.
Karakter Deskripsi Nama Entitas
0 Cent ¢
£ Pound £
¥ Yen ¥
€ Euro €
© Copyright ©
® Registered ®
Trademark ™
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Karakter KhususC/1itle> </head>
<body>
spound; Pound <br /> seuro; Euro <br /> scopy; Copyright <br />
® Registered <br />
™ Trademark <br />
</body>
</html>
© SMKS NU KEJAJAR 2023 11
Gambar 9. Karakter-karakter khusus
4. Garis Horizontal
Di HTML, garis horizontal direpresentasikan melalui tag <hr />. Meskipun
kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit
berbeda, namun pada hakekatnya mencerminkan sebuah bentuk garis horizontal.
<body>
Membuat garis horizontal <hr />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<hr />
</body>
Gambar 10. Garis horizontal
5. Menggunakan List
HTML mendukung list dalam bentuk terurut (ordered), tak terurut
(unordered), dan definisi (definition). Untuk setiap bentuk list ini, terdapat list
item—dinyatakan melalui tag <li> berpasangan—yang merepresentasikan
item-item list.
<body>
Ordered List <ol>
<li>Satu</li>
<li>Dua</li>
</ol>
<hr />
© SMKS NU KEJAJAR 2023 12
Unordered List <ul>
<li>Satu</li>
<li>Dua</li>
</ul>
<hr />
Definition List <dl>
<dt>Satu</dt> <dd>Satu Satu</dd> <dt>Dua</dt> <dd>Dua Dua</dd>
</dl>
</body>
Gambar 11. Menggunakan list
6. Pewarnaan
Untuk memberikan warna background, HTML menyediakan atribut bgcolor
di tag <body>. Atribut ini dapat diisi dengan nama warna—misalnya red—
atau kode heksadesimal—misalnya #FFFFFF.
Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang
memungkinkan kita melakukan pewarnaan. Sama seperti bgcolor, nilai
atribut ini juga dapat berupa nama warna atau kode heksadesimal.
<!— memberi warna aqua di body —> <body bgcolor="aqua">
<h3 align="center">Heading 3</h3>
<font color="red">Font berwarna merah</fontxbr /> <font color="#FF0000">
Font berwarna merah (menggunakan nilai heksa) </font> </body>
© SMKS NU KEJAJAR 2023 13
Gambar 12. Menambahkan warna di halaman web
7. Bekerja dengan Gambar
Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen
HTML. Untuk keperluan ini, HTML menyediakan tag <img> yang didukung
dengan sejumlah atribut.
<body>
<P>
<!— menggunakan path relative —>
<img src="kucing.jpg" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<hr />
<P>
<!—menggunakan path absolute -->
<img src="http://localhost/web01/01/kucing.jpg" align="right"
/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</body>
Gambar 13. Menyisipkan gambar
8. Menggunakan Link
Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen; kita
dapat menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink
© SMKS NU KEJAJAR 2023 14
merupakan teks yang memungkinkan kita untuk melakukan navigasi dari satu
halaman ke halaman lainnya.
■ Menciptakan Link
HTML menyediakan tag <a> (atau disebut anchor) untuk mendefinisikan
sebuah link. Dalam implementasinya, pembuatan link memerlukan atribut
href yang menyatakan lokasi tujuan. Lokasi ini bisa berupa alamat lengkap
(absolut) atau singkat (relatif).
Untuk mengetahui cara membuat dan mengaitkan dokumen, ikuti langkah-
langkah berikut:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
<!DOCTYPE html>
Chtml lang="en">
<head>
<title>Demo Link</title>
</head>
<body>
<a href="link2 . html">Klik di sini</a>
</body>
</html>
3. Simpan dokumen HTML dengan nama link1.html dan letakkan di lokasi
direktori web.
4. Langkah selanjutnya, buat halaman kedua (link2.html) yang nantinya
akan dikaitkan.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="linkl.html">Klik di sini</a>
</body>
</html>
5. Simpan dengan nama link2.html.
6. Untuk menguji hasilnya, buka browser dan arahkan ke alamat link1.html.
7. Klik link yang ada secara bergantian.
■ Atribut Link
Elemen anchor menyediakan sejumlah atribut guna mendukung
fungsionalitasnya, dua di antaranya yang kerap digunakan adalah target dan
title. Atribut target digunakan untuk mengatur apakah link akan di buka
di window yang sama (default) atau di window (atau tab) baru. Di sisi lain,
title berfungsi untuk menampilkan teks manakala kursor mouse berada di
atas link.
© SMKS NU KEJAJAR 2023 15
<!DOCTYPE html>
Chtml lang="en">
<head>
<title>Demo Atribut Link</title>
</head>
<body>
<a href="link2.html" target=" blank" title="Title link">Klik di
sini</a>
</body>
</html>
■ Link Internal
Elemen anchor juga memungkinkan kita untuk melakukan navigasi di dalam
satu dokumen (layaknya bookmark). Untuk mengimplementasikan hal ini,
kita memerlukan atribut id.
Langkah pertama untuk mengimplementasikan link internal adalah dengan
mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah
berikutnya adalah menetapkan nilai atribut id di blok yang akan dituju, di
mana nilainya sama dengan href namun tanpa prefiks #. Untuk lebih
jelasnya, perhatikan dokumen berikut
<! DOCTYPE html>
<html>
<head>
<title>Demo Link Internal</title>
</head>
<body>
Menu
<ul>
<li><a href =" #pendahuluan" >Pendahuluan</a></li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p> |
Lorem ip3um dolor 3it amet, con3ectetur adipisicing elit,
3ed do eiusmod tempor incididunt ut labore et dolore magna aliqua. j
Ut enim ad minim veniam, quis nostrud exercitation ullamco labori3 j
nisi ut aliquip ex ea commodo consequat.
<h3 id="pembahasan">Pembahasan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ;
Dt enim ad minim veniam, quis nostrud exercitation ullamco iabori3
!
nisi ut aliquip ex ea commodo consequat.
<h3 id="kesimpulan">FTes 1 mpulan</h3>
<p>
Lorem ip3um dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. !
Ot enim ad minim veniam, quis nostrud exercitation ullamco laboris
!
nisi ut aliquip ex ea commodo consequat.
</body>
</html>
Perlu diperhatikan, nilai atribut id tidak boleh sama atau harus unik di dalam
lingkupnya.
■ Link Email
© SMKS NU KEJAJAR 2023 16
Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk
menunjuk ke suatu alamat email. Adapun dalam implementasinya, kita
tinggal mengubah alamat URL dengan alamat email—yang terlebih dahulu
diberi prefiks mailto.
<!DOCTYPE html>
<html lang="en”>
<head>
<title>Demo Link Email</title>
</head> <body>
I
<a href="mailto:[email protected]" >didiJc at um dot ac dot id</a>
</body>
</html>
■ Link Gambar
Link tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa
gambar. Langkah pembuatan link gambar pun sangat sederhana, cukup
mengapit tag <img> di antara tag <a>.
<!DOCTYPE html>
<html lang="en"> !
<head>
<title>Demo Link Gainbar</title>
</head>
<body>
<a href="http://google.co.id" title="Search with Google">
<iing src="google . jpg" border="0" />
</a>
</body> !
</html>
Gambar 14. Link gambar
9. Tabel
© SMKS NU KEJAJAR 2023 17
Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam
bentuk baris dan kolom. Perpotongan baris dan kolom di dalam tabel disebut
sebagai sel.
Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan
data di dalam tabel secara atraktif. Artinya, tak hanya sebatas pada data
tabular saja, namun juga mengizinkan kita melakukan pemformatan.
■ Menciptakan Tabel
Pada prinsipnya, pembuatan tabel sangat sederhana sekali, hanya
masalah pengorganisasian. Semua tabel harus diawali dengan tag <table>,
kemudian ada tiga tag dasar yang mengikutinya, meliputi:
• Tag <th> atau table heading yang berfungsi mendefinisikan header.
• Tag <tr> atau table row yang berfungsi mendefinisikan baris.
• Tag <td> atau table data yang berfungsi mendefinisikan sel.
Struktur pembentuk tabel dapat dilihat seperti pada Gambar 15.
Table Heading
No Nama Alamat
1 Ibnu Jl. Jombang
Table Row
N Wati Jl. Jakarta
Table Data
Gambar 15. Struktur tabel
Contoh pembuatan tabel diperlihatkan sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Tabel</title>
</head>
<body>
<table border=l>
<caption>Label dari tabel</caption>
<!— Header —>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<!— Baris data pertama —>
<tr>
<td>l</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</body>
</html>
© SMKS NU KEJAJAR 2023 18
Gambar 16. Hasil pembuatan tabel
■ Pemformatan Tabel
Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk
memformat visualisasi tabel. Tiga atribut pertama yang sering digunakan adalah
align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel)
dan cellpadding (untuk mengatur spasi antara border sel dengan isinya).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Spasi Tabel</title>
</head>
<body>
<table border=l align="center" cellspacing=0 cellpadding=10> <!—
Header —>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<!— Bari3 data pertama —>
<tr>
<td>l</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</table>
</body>
Gambar 17. Mengatur spasi tabel
Atribut lain yang juga cukup penting adalah width (untuk menentukan lebar tabel
atau sel).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Ukuran Tabel</title>
</head>
© SMKS NU KEJAJAR 2023 19
<body>
<table border=l align="center" cell3pacing=0 cellpadding=5>
<tr>
<!— Mengatur lebar kolom —>
<th width="50">No</th>
<th width="150">Naina</th>
<th width="200">Alamat</th>
</tr>
<!— Baris data pertama —>
<tr>
<td>l</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</table>
</body>
</html>
Perhatikan, pengaturan lebar sel tidak perlu dilakukan untuk semua baris, tetapi
cukup salah satu saja. Bagaimanapun, lebar sel akan selalu sama antara satu
dengan lainnya.
Gambar 18. Mengatur lebar sel
■ Desain Tabel
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap
baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan
penggabungan (merge) sel. Dalam konteks elemen tabel, penggabungan sel dapat
dilakukan berdasar baris (rowspan) atau kolom
(colspan).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Span/Merge Sel</title>
</head>
<body>
<table border=l align="center" cellspacing=0 cellpadding=5>
<tr>
<th width="50">No</th>
<7— Gabung kolom nama dan alamat —>
<th width="350" colspan=2>Span Nama dan Alamat</th>
© SMKS NU KEJAJAR 2023 20
</tr>
<!— Baris data pertama —>
<tr>
<!— Gabung baris 1 dan 2 —>
<td rowspan=2>Span baris 1 dan 2</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</— Baris data kedua —>
<tr>
<td>Vita</td>
<td>Jl. Jakarta</td>
</tr>
</table>
</body>
</htrol>
Gambar 19. Menggabung sel
Fitur lain yang ada pada tabel adalah pengelompokan sel berdasarkan kolom
maupun baris. Untuk pengelompokan kolom menggunakan elemen COLGROUP
sedangkan pada baris memanfaatkan TBODY.
© SMKS NU KEJAJAR 2023 21
B. STUDI KASUS
1. Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Di
mana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis tepi
(border), dan halaman utama dengan latar belakang gambar sembarang. Contoh tampilannya
diperlihatkan seperti Gambar 20.
Gambar 20. Kombinasi elemen-elemen HTML
Mengetahui Verifikator Kejajar, 17 Juni 2023
Kepala SMK NU Kejajar Wakasek kurikulum Guru Mata Pelajaran
Susmiyati,S.E Rakhmat Biyono, S.Pd.I Wicaksono Budi R,S.Kom
© SMKS NU KEJAJAR 2023 22
Anda mungkin juga menyukai
- Laporan Praktikum Pemrograman Web: A.Mika Ilhami 0701202064Belum ada peringkatLaporan Praktikum Pemrograman Web: A.Mika Ilhami 070120206419 halaman
- Laporan6 A1g021015 Jesicha AnastasiaBelum ada peringkatLaporan6 A1g021015 Jesicha Anastasia18 halaman
- RPP Pemrogweb Dan Perangkat Bergerak Kelas Xi RPLBelum ada peringkatRPP Pemrogweb Dan Perangkat Bergerak Kelas Xi RPL13 halaman
- Makalah Tes Tutor - Syiffa Putri MeillaniBelum ada peringkatMakalah Tes Tutor - Syiffa Putri Meillani23 halaman
- Pemrograman Web Dan Perangkat BergerakBelum ada peringkatPemrograman Web Dan Perangkat Bergerak23 halaman
- Pengenalan HTML: Platform As A Services (SMK Negeri 1 Kalikajar) TAHUN 2023Belum ada peringkatPengenalan HTML: Platform As A Services (SMK Negeri 1 Kalikajar) TAHUN 202347 halaman
- Belajar Membuat Website Profil Menggunakan HTML DasarBelum ada peringkatBelajar Membuat Website Profil Menggunakan HTML Dasar47 halaman
- Modul Pemrograman Dasar Web Dan InternetBelum ada peringkatModul Pemrograman Dasar Web Dan Internet8 halaman
- Modul 1 Pengantar Data Science Dasar Dasar Data Sains100% (1)Modul 1 Pengantar Data Science Dasar Dasar Data Sains37 halaman
- Pemograman Berbasis Web Dalam Materi Dasar Dasar HTMLBelum ada peringkatPemograman Berbasis Web Dalam Materi Dasar Dasar HTML14 halaman
