Latihan HTML Lanjut

1
Web Design HTML

Web Desain adalah istilah umum yang digunakan untuk mencakup bagaimana isi web
konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke
pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau
perangkat lunak berbasis web.
Web Design adalah jenis desain grafis yang ditujukan untuk pengembangan dan
styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen
high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dari
pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi
web sebagai semacam desain grafis.
Tujuan Web Design untuk membuat situs web atau dokumen elektronik dan aplikasi
yang berada pada web server dan menampilkan konten dan fitur antarmuka interaktif
kepada pengguna akhir dalam bentuk halaman Web. Seperti unsur-unsur teks, gambar (gif,
jpeg) untuk ditempatkan pada halaman menggunakan HTML / XHTML / tag XML.
Menampilkan media yang lebih kompleks (vektor grafis, animasi, video, suara)
membutuhkan plug-in seperti Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in
juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag XHTML.
Perbaikan sesuai browser dengan standar W3C diminta penerimaan luas dan
penggunaan XHTML / XML bersama dengan Cascading Style Sheets (CSS) untuk posisi
dan memanipulasi unsur-unsur halaman web dan objek. Kemampuan browser untuk
mengirimkan berbagai konten dan pilihan aksesibilitas kepada klien tanpa menggunakan
plug-in.
Dengan spesialisasi yang tumbuh di bidang teknologi informasi ada kecenderungan
kuat untuk membedakan antara desain web (web design) dan pengembangan web (web
development).
Cara Membuat Form di HTML
1. Atribut di dalam Form HTML
HTML element tag <form> merupakan tag pada HTML yang digunakan untuk
menciptakan formulir bagi isian input dari pengguna. HTML element tag <form> adalah
wadah dan kontainer untuk menempatkan HTML elemen tag lainnya yang terkait
dengan formulir seperti input type[text], input type[password], input type[radio], input
type[checkbox], textarea, button dan lainnya.
HTML element tag <form> memiliki berbagai atribut yang dapat digunakan untuk
membantu bagaimana data akan dikirimkan menuju server. Berikut ini atribut khusus
pada elemen <form> :
 name
Menetapkan nama elemen <form> (deprecated)
 action
Menetapkan URL tujuan tempat dimana data akan diproses setelah tombol submit
ditekan.
Nilai = URL
 method
Memberitahukan browser, bagaimana cara mengirim data ke server.
2
Nilai :
o post, mengirimkan data dalam bentuk HTTP POST. Merupakan jenis pengiriman
data melalui body halaman HTML secara langsung.
o get, mengirimkan data dalam bentuk HTTP GET. Merupakan jenis pengiriman
data dengan melewatkan parameter data melalui URL.
 target
Menentukan konteks pada browser, bagaimana respon browser saat data dikirimkan
ke server.
Nilai : _blank | _self | _parent | _top
 enctype
Menentukan jenis MIME type yang digunakan untuk mengirimkan data ke server.
Berlaku jika mengirim data dalam bentuk method post.
Nilai :
o application/x-www-form-urlencoded, nilai default
o multipart/form-data, jika mengirimkan/menyertakan input berjenis file.
o teks/plain
 onSubmit
Menjalankan script saat tombol submit ditekan.
 onReset
Menjalankan script saat tombol reset ditekan.
Form HTML dapat kita buat menggunakan tag <form> dan penutup </form>. Contoh
Penulisan tag form adalah sebagai berikut:
Untuk lebih jelasnya silahkan ketik kode berikut kemudian simpan dengan nama
Coba_01.html.
Source code:
<html>
<head>
<title>Belajar HTML - Membuat Form</title>
</head>
<body>
<form action="#" method="GET">
<label for="name">Nama</label>
<input name="nama" id="nama"><br>
<br>
<label for="email">Email</label>
<input name="email" id="email">
<input type="submit" value="kirim">
</form>
</body>
</html>
Hasilnya:
3
2. Tag <label> Pada HTML

HTML element tag <label> merupakan tag pada HTML yang digunakan untuk
memberikan label dalam bentuk teks dan tulisan terhadap HTML elemen lainnya seperti
element <input>, <textarea>, <select> ataupun <progress>. HTML element tag
<label> berguna untuk memberitahukan kepada pengguna mengenai data yang akan
dimasukkan pada suatu formulir. HTML element tag <label> akan memperjelas data
yang akan dimasukkan sehingga kesalahan input oleh pengguna dalam memasukkan
data akan terhindari.
Metode Penulisan Tag <label>:
 Pertama:
Penggunaan HTML element tag <label> yang baik dapat menyertakan atribut for.
Atribut ini merupakan deskripsi bagi elemen <input> yang akan dipasangkan. Atribut
FOR adalah rujukan bagi atribut ID pada elemen <input>. Jadi, nilai atribut FOR
pada <label> dan atribut ID pada <input> harus sama.
<p>
<label for="nama">Masukkan Nama Anda : </label>
<input type="text" name="nama">
</p>
<p>
<label for="password">Masukkan Password Anda : </label>
<input type="password" name="password">
</p>
 Kedua:
Pada metoda penulisan kedua ini atribut for tidak disertakan. Metode yang
digunakan adalah dengan membungkus HTML elemen <input> secara langsung. Ini
artinya HTML element tag <label> merupakan kontainer bagi HTML element
<input>.
<p>
<label>Masukkan Nama Anda : <input type="text" name="nama" ></label>
</p>
<p>
<label>Masukkan Password Anda : <input type="password"
name="password"></label>
4
</p>
Berikut ini contoh penggunaan <label> pada HTML :
Coba_02.html.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag LABEL</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag LABEL</h1>
<form action="#" method="Get">
<p>
<label for="nama">Masukkan Nama Anda : </label>
<input type="text" name="nama">
</p>
<p>
<label for="password">Masukkan Password Anda : </label>
<input type="password" name="password">
</p>
<p>
<input type="reset" value="Reset">
<input type="submit" value="Kirim">
</p>
</form>
</body>
</html>
Hasilnya:
3. Tag <input> Pada HTML

5
HTML elemen tag <input> merupakan tag pada HTML yang digunakan untuk
menciptakan bidang formulir yang memungkinkan pengguna dalam memasukkan entry
data. HTML elemen tag <input> memiliki jenis dan bentuk yang bervariasi sesuai
dengan kebutuhan dan nilai data yang terkandung di dalamnya.
Atribut Khusus Pada Elemen Tag <input>
 name
Menetapkan nama kontrol inputan yang akan dikirim ke server.
 value
Menetapkan nilai / isi data dari kontrol inputan yang akan dikirim ke server.
 autofocus
Menentukan elemen input agar tersorot pertama kali saat browser dimuat. Nilai :
autofocus
 autocomplete
Menentukan elemen input agar otomatis dilengkapi dengan kata yang sebelumnya
pernah dituliskan di bilah input tersebut.
Nilai : on | off
 maxlength
Menetapkan jumlah maksimal karakter yang harus diisikan di bilah inputan, jika
melebihi jumlah maksimalnya, bilah input tersebut tidak dapat diisikan karakter lagi.
Nilai : number (angka)
 minlength
Menetapkan jumlah minimal karakter yang harus diisikan di bilah inputan, jika jumlah
karakter kurang dari jumlah minimalnya, akan muncul pesan pop-up yang berisi
pesan jumlah karakter tidak sesuai dengan nilai minimal karakter.
Nilai : number (angka)
 max
Menetapkan nilai angka terbesar ataupun tanggal terbesar dari input control dengan
input type number dan input type date.
Nilai : number (angka) | date (tanggal)
 min
Menetapkan nilai angka terkecil ataupun tanggal terkecil dari input control dengan
input type number dan input type date.
Nilai : number (angka) | date (tanggal)
 size
Menentukan lebar input control dalam piksel.
 width
Menentukan lebar input control pada input type image dalam piksel.
 height
Menentukan tinggi input control pada input type image dalam piksel.
 checked
Menentukan elemen input akan diberi nilai atau di centang pada input type checkbox
dan input type radio saat halaman pertama kali dimuat.
Nilai : checked
 required
Menentukan elemen input harus diisi sebelum data dikirim ke server saat tombol
submit ditekan.
Nilai : required
 alt
Menentukan teks alternatif untuk gambar, atribut ini berlaku untuk input type image.
6
 placeholder
Menentukan petunjuk singkat (hint) pada elemen input. Jika elemen tersebut disorot,
teks petujuk singkat tersebut akan menghilang.
Nilai : teks
 readonly
Menetapkan elemen input tersebut hanya dapat dibaca, tidak untuk diedit. Nilai :
readonly
 disabled
Menetapkan elemen input menjadi nonaktif dan tidak bisa dipilih atau disorot. Nilai :
disabled
 pattern
Menentukan pola regular expression pada elemen input, untuk membatasi karakter,
huruf, kata yang bisa diinputkan pada bilah input tersebut.
 accept
Menentukan jenis file yang dapat dimasukkan pada elemen input, misalnya *.txt,
*.png, *.jpeg maka hanya file-file tersebut yang bisa pilih saat menu pop-up pilihan
file ditampilkan. Atribut ini hanya berlaku untuk input type file.
 formaction
Menetapkan URL tujuan saat data pada form dikirim ke server, hanya berlaku bagi
elemen input pada input type button dan input type image.
 formenctype
Menentukan jenis MIME type yang digunakan untuk mengirimkan data ke server.
Berlaku jika mengirim data dalam bentuk method post, dan hanya berlaku bagi
elemen input pada input type button dan input type image.
Nilai :
o application/x-www-form-urlencoded, merupakan nilai default.
o multipart/form-data, jika mengirimkan/menyertakan input berjenis file.
o teks/plain
 formmethod
Memberitahukan browser, bagaimana cara mengirim data ke server. Hanya berlaku
bagi elemen input pada input type button dan input type image
Nilai :
o post, mengirimkan data dalam bentuk HTTP POST. Merupakan jenis
pengiriman data melalui body halaman HTML secara langsung.
o get, mengirimkan data dalam bentuk HTTP GET. Merupakan jenis pengiriman
data dengan melewatkan parameter data melalui URL.
 formtarget
Menentukan konteks pada browser, bagaimana respon browser saat data dikirimkan
ke server. Hanya berlaku bagi elemen input pada input type button dan input type
image
Nilai : _blank | _self | _parent | _top
 type
Menentukan jenis / type inputan. Inputan ini memiliki berbagai jenis yang digunakan
sesuai dengan keperluannya.
Nilai :
o button, membuat tombol yang bisa diklik, biasanya untuk mengeksekusi perintah
pada javascript.
o submit, membuat tombol jenis submit, digunakan untuk mengeksekusi form
untuk dikirim ke server.
o reset, membuat tombol jenis reset, digunakan untuk menyetel ulang isian
kembali ke semula.
7
o text (nilai default), menentukan jenis isian berupa angka, huruf dan printable atau
non-printable character pada input.
o email, menentukan jenis isian dalam format email. Jika yang dimasukkan bukan
dalam format email, formulir tidak bisa di kirim ke server.
o number, menentukan jenis isian dalam format angka (0-9). Jika yang
dimasukkan selain angka formulir tidak bisa di kirim ke server.
o password, membuat jenis isian dalam format password dan character yang
dimasukkan disamarkan dengan tanda * (asteric).
o tel, menentukan jenis isian dalam format telpon.
o url, menentukan jenis isian dalam format URL.
o radio, menentukan isian dalam bentuk single opsi / pilihan yang dapat dipilih
oleh pengguna.
o checkbox, menentukan isian dalam bentuk multiple opsi / pilihan yang dapat
dipilih oleh pengguna.
o image, menentukan isian dalam bentuk gambar, jika pengguna mengklik titik
tertentu pada gambar, maka titik tersebutlah yang akan dikirim ke server.
o file, menentukan isian dalam bentuk file. Semua jenis file dapat dikirim lewat type
ini.
o hidden, menyertakan input yang diperuntukkan bagi programmer. Input ini tidak
bisa dilihat oleh pengguna secara visual, namun sangat berguna untuk
menyisipkan berbagai data misalnya dengan script tertentu dapat mengetahui
jenis browser yang dipakai, koordinat pengguna, ataupun jenis smartphone yang
dipakai pengguna untuk dikirim ke server tanpa terdeteksi pengguna.
o range, membuat tombol dalam bentuk slide yang bisa digeser kanan kiri. Nilai
ditentukan oleh atribut min dan atribut max dalam bentuk angka. Angka ini yang
akan dijadikan sebagai data.
o color, menentukan isian dalam bentuk warna (color).
o date, menentukan isian dalam bentuk tanggal (tanggal-bulan-tahun).
o time, menentukan isian dalam bentuk waktu (jam:menit:detik).
o week, menentukan isian dalam bentuk urutan minggu, misal : minggu pertama =
01, minggu ke-10 : 10, dst. Tidak semua browser support dengan type ini.
o month, menentukan isian dalam bentuk bulan (bulan-tahun). Tidak semua
browser support dengan type ini.
Berikut ini contoh lengkap penggunaan tag <input> pada HTML :
Coba_03.html.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag INPUT</title>
</head>
<body>
<h2>Formulir Pendaftaran Mahasiswa</h2>
<form action="#" method="Post">
<p>
<label for="nama">Nama Lengkap :</label>
8
<input type="text" name="nama" id="nama" required autocomplete

minlength="3" size="60">
</p>
<p>
<label for="email">Email :</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label for="alamat">Alamat :</label>
<input type="text" name="alamat" id="alamat" required>
</p>
<p>
<label for="no_telp">No Telp :</label>
<input type="tel" name="no_telp" id="no_telp" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
</p>
<p>
<label for="gender">Jenis Kelamin:</label>
<input type="radio" name="gender" value="laki-laki" checked> Laki-laki
<input type="radio" name="gender" value="perempuan"> Perempuan
</p>
<p>
<label for="hoby">Hoby :</label>
<input type="checkbox" name="hoby_1" Value="membaca"> Membaca
<input type="checkbox" name="hoby_2" Value="olahraga"> Olahraga
<input type="checkbox" name="hoby_3" Value="melukis"> Melukis
</p>
<p>
<label> Asal Kota: </label>
<select name="kota">
<option selected="select">-= Pilih =-</option>
<option value="semarang"> Semarang</option>
<option value="tegal"> Tegal</option>
<option value="kudus"> Kudus</option>
<option value="magelang"> Magelang</option>
<option value="pekalongan"> Pekalongan</option>
</select>
</p>
<p>
<label for="tanggal">Tanggal Lahir :</label>
<input type="date" name="tanggal" id=tanggal" required />
</p>
<p>
9
<label> Pas Foto: </label>

<input type="file" name="file" accept="image/png,image/jpg,image/jpeg" /><br
/>
</p>
<p>
<label> Isi Komentar: </label><br>
<textarea name="komentar" rows="4" cols="50" ></textarea> <br /><br />
</p>
<p>
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
Hasilnya:
4. Latihan buatkan Form Buku Tamu dengan isian pada gambar berikut ini dengan
nama file : buku_tamu.html.
10
Keterangan : Label Mengetahui Web Ini dari: Option Value : Web Udinus, Surat
Kabar, Teman/Kerabat, Browsing Internet.
11
Cara Membuat Tabel di HTML

Tabel sering digunakan pada halaman web untuk menampilkan data yang tersusun
dalam bentuk kolom dan baris seperti laporan, daftar pembukuan, dan sejenisnya.
Komponen utama tabel adalah baris, kolom, sel dan border (garis).
Baris adalah bagian tabel yang mendatar. Pada contoh gambar di atas, tabel tersebut
terdiri dari 5 baris. Kolom adalah bagian tabel yang vertikal (atas ke bawah). Pada contoh
gambar di atas, tabel tersebut terdiri dari 6 kolom. Sel adalah kotak-kotak yang ada pada
tabel. Pada gambar di atas, tabel tersebut memiliki 30 sel. Border adalah garis yang
membentuk tabel.
1. Tag untuk Membuat Tabel di HTML
 Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:
o Tag <table> untuk membungkus tabelnya
o Tag <thead> untuk membungkus bagian kepala tabel
o Tag <tbody> untuk membungkus bagian body dari tabel
o Tag <tr> (tabel row) untuk membuat baris
o Tag <td> (table data) untuk membuat sel
o Tag <th> (table head) untuk membuat judul pada header
 Atribut-atribut HTML untuk Tabel
o Border untuk membuat batas tepi tabel.
o Width untuk mengatur lebar tabel
o Align untuk mengatur perataan horizontal data dalam tabel (left, center, right)
o Valign untuk mengatur perataan vertikal data dalam tabel (top, middle, bottom)
o Cellspacing untuk menentukan jumlah spasi antar sel.
o Cellpadding : untuk menentukan jumlah spasi yang terdapat diantara border sel
dengan isi dalam sel.
o Rowspan : untuk menggabungkan sel-sel dalam baris.
o Colspan : untuk menggabungkan sel-sel dalam kolom.
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara
tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak. Untuk lebih
jelasnya silahkan ketik kode berikut kemudian simpan dengan nama Coba_05.html.
Source code:
<!DOCTYPE html>
<html>
<head>
12
<title>Tabel di HTML</title>
</head>
<body>
<p>Contoh tabel HTML</p>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasilnya:
Penjelasan: Jika kita buka kode di atas pada web browser, tampilan tabel yang
dihasilkan dari kode tersebut tidak berbentuk seperti tabel. Biasanya tabel memiliki
border sedangkan pada percobaan di atas tidak. Itu dikarenakan border secara default
tidak ditampilkan.
 Atribut border dalam tabel HTML
Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari
tabel. Jika atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa
garis tepi.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda
memberikan nilai border=”1″, maka web browser akan menampilkan garis tepi
13
sebesar 1 pixel pada sisi atas, bawah, kiri dan kanan tabel.
Untuk lebih jelasnya contoh penggunaan atribut border dalam tag table HTML, silahkan
ketik kode berikut kemudian simpan dengan nama Coba_06.html.
Source code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Belajar atribut border dalam Tabel HTML</p>
<table border="0">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<br>
<table border="1">
<tr>
</tr>
<tr>
</tr>
<tr>
14
</tr>
</table>
</body>
</html>
Hasilnya:
 Atribut cellpadding dalam tabel HTML

Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel
dengan isi text tabel itu sendiri.
memberikan nilai cellpadding=”2″, maka web browser akan membuat jarak sebesar 2
pixel dari border sisi dalam tabel dengan isi text tabel.
Untuk lebih jelasnya contoh penggunaan atribut cellpadding dalam tag table HTML,
silahkan ketik kode berikut kemudian simpan dengan nama Coba_07.html.
Source code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Belajar atribut cellpadding dalam Tabel</p>
<table border="1" cellpadding="0">
<tr>
</tr>
<tr>
15

</tr>
<tr>
</tr>
</table>
<br>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasilnya:
16
 Atribut cellspacing dalam tabel HTML

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border)
bagian dalam dan luar.
memberikan nilai cellspacing=”7″, maka web browser akan menampilkan jarak
sebesar 7 pixel diantara garis border tabel.
Untuk lebih jelasnya contoh penggunaan atribut cellspacing dalam tag table HTML,
silahkan ketik kode berikut kemudian simpan dengan nama Coba_08.html.
Source code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Belajar atribut cellspacing dalam Tabel HTML</p>
<table border="1" cellspacing="0">
<tr>
</tr>
<tr>
</tr>
<tr>
17

</tr>
</table>
<br>
<table border="1" cellspacing="10">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasilnya:
2. Tag <th> pada Tabel HTML

Tag <th> digunakan untuk mendefinisikan sel header pada tabel. Fungsinya mirip
dengan tag <td> yaitu membentuk sel dan berada di dalam elemen <tr>. Untuk lebih
jelasnya berikut contoh kode HTML untuk penggunaan tag <th>:
18
Coba_09.html.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Tag < th > pada Tabel HTML</title>
</head>
<body>
<p>Daftar Mahasiswa</p>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
<tr>
<td align="center">1</td>
<td>Abi manyu dwi</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>Hanna herwida oktavia</td>
<td>Teknik Industri</td>
</tr>
<tr>
<td>Christopherus jesper</td>
<td>Teknik Komputer</td>
</tr>
</table>
</body>
</html>
Hasilnya:
19
Penjelasan kode: Baris di Underline menggunakan tag <th> untuk mendefinisikan

header pada tabel tersebut. Secara default, perbedaan antara tag <th> dan tag <td>
adalah pada teks didalamnya. Tag <th> secara default menebalkan teks yang ada
didalamnya sedangkan tag <td> tidak.
 Atribut rowspan pada Tabel HTML
Atribut rowspan digunakan untuk menggabungkan beberapa baris dalam 1 kolom.
Atribut ini adalah atribut khusus untuk tag <td> dan <th>. Value dari atribut ini adalah
jumlah baris yang ingin digabungkan, berupa angka.
Coba_10.html.
Source code:
.<!DOCTYPE html>
<html>
<head>
</head>
<body>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Jurusan</th>
<th>Status</th>
</tr>
<tr>
<td rowspan="3">Aktif</td>
</tr>
<tr>
20
<td>Sistem Informasi</td>
</tr>
<tr>
<td>Ilmu Komunikasi</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Penjelasan kode: Pada baris di Underline menggunakan rowspan=”3″ artinya baris

yang ingin digabungkan ada 3. Rowspan diletakkan di baris pertama karena kita
menggabungkan dari baris 1 hingga 3.
 Atribut colspan pada Tabel HTML
Atribut colspan digunakan untuk menggabungkan beberapa kolom dalam 1 baris.
Atribut ini juga untuk tag <td> dan <th>. Sama seperti rowspan, value untuk atribut ini
adalah berupa jumlah kolom yang ingin digabung.
Coba_11.html.
Source code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Jurusan</th>
21
<th>Status</th>
</tr>
<tr>
<td rowspan="3">Aktif</td>
</tr>
<tr>
<td>Sistem Informasi</td>
</tr>
<tr>
<td>Ilmu Komunikasi</td>
</tr>
<tr>
<td>Jumlah Mahasiswa</td>
<td colspan="3">3</td>
</tr>
</table>
</body>
</html>
Hasilnya:
Penjelasan kode: Pada baris di Underline menggunakan atribut colspan untuk

menggabungkan 3 kolom dari kolom 2 hingga kolom 4.
3. Latihan buatkan Artikel dengan Format Isi Tugas berikut ini dengan nama file :
artikel.html.
<judul pengalaman>
22
<uraian pengalaman min 2 paragraf>

Daftar Materi Praktek Paling Favorit
1. Merakit PC Secara Virtual (Cisco)
2. Penulisan Ilmiah
3. Mailing List
4. Fungsi-fungsi Excel
5. Menampilkan Grafik Dengan Excel
6. Teknik Presentasi
7. Pengenalan HTML
8. Dll.
Daftar Dosen Praktek:
o Abc
o Cde
Foto Kegiatan Praktek :
<foto kegiatan>
Daftar Peserta Praktek
No. Nama Lengkap Jenis Kelamin Alamat Asal Sekolah
1.
2.
3.
Cara Membuat Link untuk Menghubungkan Halaman Web

HTML Links atau Hyperlinks memungkinkan user untuk dapat berpindah ke halaman
web lain atau bagian dari halaman tertentu maupun halaman web lain pada bagian tertentu
 Jenis-jenis Link pada HTML
Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua kelompok:
● Internal Link: adalah link yang menuju ke domain atau halaman web itu sendiri;
23
● External Link: adalah link yang menuju domain lain.
Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan
yang lainnya dalam satu website atau domain.
Sementara untuk eksternal link, digunakan untuk membuka web atau domain lain.
Misalnya seperti: membuka halaman facebook, membuka chat whatsapp, membuka
youtube, dan sebagainya.
Intinya:
Selama link itu membuka web lain, maka ia adalah external. Tapi kalau tetap membuka
web itu sendiri maka itu internal.
Biar lebih jelas, mari kita coba membuatnya di HTML:
1. Contoh Internal Link
Buatlah file baru bernama index.html kemudian isi dengan kode berikut:
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<h1>Selamat Datang di Beranda</h1>
<p>
<a href="index.html" >Home</a> |
<a href="contact.html" >Contact</a> |
<a href="about.html" >About</a>
</p>
<hr>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda. Semua
link di atas adalah internal link.
</p>
<hr>
Copyright © 2022 by Udinus Oke
24
</body>
</html>
Hasilnya
Kemudian buat lagi file baru bernama contact.html dengan isi sebagai berikut:
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Contact</h1>
<p>
</p>
<hr>
<p>
Kamu bisa menghubungi saya melalui nomer WA: 085225111111
atau juga alamat email: mail@gmail.com.
</p>
<hr>
</body>
</html>
Hasilnya
25
Terakhir, buat file about.html dengan isi sebagai berikut:

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>About</h1>
<p>
</p>
<hr>
<p>
Ini adalah halaman <strong>about</strong> dari website saya.
Jadi ini adalah contoh cara membuat link internal di HTML.
</p>
<hr>
</body>
</html>
Hasilnya
26
Pastikan semua file ini disimpan dalam satu folder.
2. Contoh External Link

Cara membuat eksternal link sebenarnya sama saja seperti internal link.
Perbedaanya terletak pada alamt URL yang diberikan.
Sebagai contoh.. ini adalah eksternal link CTA (call to action) untuk whatsapp.
Silahkan buka file contact.html kemudian ubah kodenya menjadi seperti ini:
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Contact</h1>
<p>
</p>
<hr>
<p>
Kamu bisa menghubungi saya melalui nomer WA:
<a
href="https://api.whatsapp.com/send?phone=086225086123&text=Hi">+086225
086123</a>
atau juga alamat email: mail@gmail.com.
</p>
<hr>
</body>
</html>
27
Hasilnya
Contoh lainnya :
<p>
Saya sedang belajar di <a href=”https://dinus.ac.id/” target =”_blank” > Udinus</a>
dan akan terbuka pada tab baru.
</p>
Menggunakan Atribut target
Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa
target yang biasanya digunakan:
 _blank akan membuka link pada jendela atau tab baru;
 _self akan membuka link pada halaman itu sendiri (default target);
 _top menuju bagian paling atas pada halaman;
 _parent membuka link pada frame induk;
 nama-frame akan membuka link pada <iframe> dengan nama tertentu;
3. Membuat Link Anchor

Sudah disinggung sedikit sebelumnya bahwa link anchor adalah link yang akan
membawa kita ke lokasi tertentu pada dokumen HTML itu sendiri. Dinamakan link
ancor atau jangkar karena cara kerjanya persis dengan jangkar kapal. Ketika jangkar
dikaitkan otomatis kita akan ikut terbawa ke arah sana.
Untuk membuat link jangkar ini kita memerlukan tanda pagar (#) ditambah nilai dari
atribut id untuk menetapkan elemen mana yang nantinya akan dituju.
Silahkan buka file index.html kemudian ubah kodenya menjadi seperti ini:
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
28
<body>
<h1>Selamat Datang di Beranda</h1>
<p>
</p>
<hr>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda. Semua
link di atas adalah internal link.
</p>
<hr>
<h2>Daftar Isi</h2>
<ol>
<li><a href="#sub-1">Mengenal Link di HTML</a></li>
<li><a href="#sub-2">Membuat Link di HTML</a></li>
<li><a href="#sub-3">Mengenal Jenis-Jenis Link Pada
HTML</a></li>
</ol>
<h2 id="sub-1">Mengenal Link di HTML</h2>

<p>
Hyperlink atau link merupakan elemen HTML yang sering
digunakan untuk menghubungkan suatu halaman website ke halaman yang
lain. Elemen yang menjadi link atau tautan nantinya dapat diklik dan
selanjutnya akan mengarahkan kita ke halaman yang sudah ditentukan.
</p>
<h2 id="sub-2">Membuat Link di HTML</h2>

<p>
Untuk membuat link di HTML kita perlu yang namanya tag <a>
singkatan dari anchor. Tag <a> mempunyai atribut khusus yaitu href. Atribut ini
digunakan untuk mendefinisikan alamat yang akan dituju. Kepanjangan dari
href adalah Hypertext Reference.
</p>
<h2 id="sub-3">Mengenal Jenis-Jenis Link Pada HTML</h2>

<p>
Mengapa alamat URL pada atribut href di atas dinamai dengan
nama filenya? Bukankah kita harus menulis alamat URL-nya secara lengkap
menggunakan http://.......? <br>
Hal ini karena pada contoh kasus di atas halaman tentang.html
merupakan internal link terlebih lagi file tentang.html masih dalam satu folder
dengan file tautan.html.<br>
Penulisan alamat secara lengkap ini biasa juga disebut dengan
penulisan alamat absolut. Yaitu penulisan suatu alamat file dengan disertai
nama websitenya.
</p>
29
<a href="#top">Kembali ke atas</a>

<br>
</body>
</html>
Hasilnya
Klik : 3.Mengenal jenis-jenis Link Pada HTML

Hasilnya:
Klik : Kembali ke atas.

30
4. Latihan HTML Links

Buatlah menu link html seperti pada gambar di atas yang terdiri dari:
 Beranda: sebagai halaman awal (buat file baru)
 Profil: isi deskripsi diri & foto anda(buat file baru)
 Artikel: isi dengan pengalaman Praktek yang sudah dibuat.
 Buku Tamu: isi dengan buku tamu yang sudah dibuat
Halaman Beranda
 Tambahkan image gambar sebagai header di atas judul
 Setelah menu dapat diisi dengan tentang Dinus Student Blog, sertakan 1 foto
dan 1 paragraph
 Tambahkan footer pada bagian paling bawah dan link ke atas

Latihan HTML Lanjut

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

Latihan HTML Lanjut

Diunggah oleh

Hak Cipta:

Format Tersedia

1

Web Design HTML

2. Tag <label> Pada HTML

3. Tag <input> Pada HTML

<input type="text" name="nama" id="nama" required autocomplete

<label> Pas Foto: </label>

Cara Membuat Tabel di HTML

 Atribut cellpadding dalam tabel HTML

<td>Baris 2, Kolom 2</td>

 Atribut cellspacing dalam tabel HTML

<td>Baris 3, Kolom 3</td>

2. Tag <th> pada Tabel HTML

Penjelasan kode: Baris di Underline menggunakan tag <th> untuk mendefinisikan

Penjelasan kode: Pada baris di Underline menggunakan rowspan=”3″ artinya baris

Penjelasan kode: Pada baris di Underline menggunakan atribut colspan untuk

<uraian pengalaman min 2 paragraf>

Cara Membuat Link untuk Menghubungkan Halaman Web

● External Link: adalah link yang menuju domain lain.

Terakhir, buat file about.html dengan isi sebagai berikut:

Pastikan semua file ini disimpan dalam satu folder.

2. Contoh External Link

3. Membuat Link Anchor

<h2 id="sub-1">Mengenal Link di HTML</h2>

<h2 id="sub-2">Membuat Link di HTML</h2>

<h2 id="sub-3">Mengenal Jenis-Jenis Link Pada HTML</h2>

<a href="#top">Kembali ke atas</a>

Klik : 3.Mengenal jenis-jenis Link Pada HTML

Klik : Kembali ke atas.

4. Latihan HTML Links

Anda mungkin juga menyukai