Modul

Desain Web 2014

Table of Contents
1. Introduction
2. Persiapan
3. Mengenal HTML
4. Membuat Halaman Web Pertama dengan HTML
5. Menambahkan Teks dalam Dokumen HTML
6. Menambahkan List kedalam Dokumen HTML
7. Menambahkan Tautan ke dalam Dokumen HTML
8. Membuat Tabel ke dalam Dokumen HTML

2
Modul Desain Web 2014

Pendahuluan
Modul ini merupakan modul untuk praktikum mata kuliah Desain Web bagi mahasiswa Departemen Pendidikan Ilmu
Komputer angkatan 2014. Melalui praktikum ini, mahasiswa diharapkan mampu membuat halaman web yang interaktif dan
menarik. Praktikum akan dilaksanakan dalam 10 pertemuan yang berlangsung selama semester ganjil tahun 2015.

Membuat halaman web yang interaktif dan menarik bukanlah pekerjaan mudah. Namun dengan latihan yang rutin, semua
bisa dilakukan. Kami berharap modul ini dapat membantu mahasiswa dalam belajar membuat halaman web dan
mengaplikasikan pengetahuan yang didapat dari kelas teori.

Introduction 3
Modul Desain Web 2014

Persiapan
Sebelum mulai belajar membuat halaman dengan HTML dan CSS, kita memerlukan beberapa peralatan. Peralatan ini
akan membantu kita dalam proses pembuatan halaman web. Peralatan yang kita perlukan adalah:

Text Editor
Agar terbantu dalam proses penulisan kode HTML, kita memerlukan aplikasi khusus bernama text editor. Kita bisa saja
menulis kode HTML dengan aplikasi seperti Microsoft Word. Namun menulis kode HTML menggunakan aplikasi text editor
khusus akan membuat pekerjaan lebih mudah karena memiliki fitur-fitur seperti syntax highlighting, code folding, auto
complete, auto indent, line number, dll.

Beberapa text editor yang kami sarankan adalah:

Sublime Text

Sublime Text adalah text editor yang cukup populer yang merupakan aplikasi berbayar namun memiliki versi gratis yang
dapat digunakan tanpa batasan waktu. Fitur-fitur Sublime Text versi gratis pun sama dengan versi berbayarnya. Hanya
saja apabila menggunakan versi gratis, akan muncul iklan yang mengajak kita untuk membeli versi lengkapnya. Sublime
Text dapat diunduh melalui situsnya di www.sublimetext.com.

Selain untuk desain web Sublime Text juga dapat digunakan untuk menulis kode Python, C, Java, Pascal, dan berbagai
bahasa pemrograman lainnya.

Brackets

Adobe tidak hanya membuat aplikasi grafis seperti Photoshop atau Illustrator. Adobe juga membuat aplikasi text editor
open source bernama Brackets. Berbeda dengan Sublime Text, Aplikasi ini dibuat oleh Adobe khusus untuk mendesain
halaman web. Brackets dapat diunduh melalui situs brackets.io.

Persiapan 4
Modul Desain Web 2014

Atom

Aplikasi text editor selanjutnya adalah Atom. Tersedia gratis melalui situs atom.io, text editor ini dapat diatur sesuai dengan
keinginan penggunanya melalui ribuan plugin yang tersedia.

Komodo Edit

Komodo Edit dikembangkan oleh perusahaan bernama Active State yang turut mengembangkan aplikasi Komodo IDE.
Aplikasi Komodo Edit merupakan aplikasi open source yang tersedia secara gratis di komodoide.com/.

Persiapan 5
Modul Desain Web 2014

Masih banyak aplikasi text editor lain yang dapat digunakan. Anda bebas memilih sesuai dengan selera masing-masing.

Web Browser
Peralatan berikutnya yang tak kalah penting adalah web browser atau dalam Bahasa Indonesia disebut peramban web.
Kode yang kita buat dengan text editor akan diproses dan ditampilkan oleh web browser. Beberapa aplikasi web browser
yang disarankan adalah Google Chrome, Mozilla Firefox, Opera, dan Safari.

Persiapan 6
Modul Desain Web 2014

Persiapan 7
Modul Desain Web 2014

Mengenal HTML
Tak kenal maka tak sayang.

Sebelum mendalami HTML, kita harus mengenal terlebih dahulu apa itu HTML, siapa yang membuatnya, kapan HTML
dibuat, dll. Apabila mengenalnya dengan baik, mudah-mudahan proses dalam mempelajarinya akan lebih mudah.

Apa itu HTML?

Hyper Text Markup Language (HTML) merupakan bahasa markup yang digunakan untuk membuat halaman web. Dengan
menggunakan HTML kita bisa membuat halaman web yang dapat menampilkan teks, gambar, suara, maupun video.

Dokumen HTML dibuat dengan menggunakan aplikasi text editor dan dibuka oleh aplikasi web browser. Kita bebas
memilih aplikasi text editor yang ingin digunakan. Namun jika masih bingung, silahkan cek bagian persiapan untuk melihat
beberapa aplikasi text editor yang disarankan untuk digunakan.

HTML bukan bahasa pemrograman. Sesuai dengan namanya, Hyper Text Markup Language, HTML adalah bahasa
Markup terstruktur yang menyusun suatu halaman web.

Sejarah HTML
HTML dibuat oleh seorang peneliti CERN bernama Tim Berners-Lee pada tahun 1989. Pada awalnya HTML dibuat untuk
mempublikasikan penelitian-penelitiannya dalam bentuk digital.

Sejak awal tahun 1990, HTML terus dikembangkan. Setiap pengembangannya HTML selalu memiliki fitur-fitur baru agar
para pengguna dapat berselancar dengan nyaman. Saat tulisan ini dibuat, terdapat lima versi utama HTML. Kelima versi
tersebut adalah:

HTML 1.0

Versi ini merupakan versi pertama HTML yang dirilis ke publik. Pada versi pertamanya, HTML memiliki fitur yang sangat
sedikit. Meskipun sangat terbatas fitur-fiturnya, versi inilah yang akan berevolusi menjadi bahasa utama dalam membuat
halaman web.

HTML 2.0

Diversi kedua, HTML mendapatkan penambahan fitur yaitu kemampuan untuk menambahkan form. Dengan demikian kita
dapat membuat halaman pendaftaran, halaman login, serta halaman-halaman lainnya yang interaktif.

HTML 3.0

HTML versi 3.0 dikenal juga sebagai HTML+ merupakan versi perbaikan dari HTML 2.0. Pada saat HTML mencapai versi
3.0, perusahaan teknologi bernama Netscape merupakan perusahaan yang terdepan dalam pengembangan aplikasi web
browser. Aplikasi web browser buatan Netscape ini diberi nama Netscape Navigator. Aplikasi inilah yang nantinya akan
menjadi Mozilla Firefox.

Fitur baru yang ditambahkan ke HTML 3.0 adalah kemampuan untuk membuat tabel. Dengan kemampuan ini kita dapat
menampilkan data berupa tabel dengan HTML. Tak berapa lama, HTML 3.0 kembali mengalami perbaikan hingga dirilis
HTML 3.2.

Mengenal HTML 8
Modul Desain Web 2014

HTML 4.0

Versi keempat dari HTML ini merupakan versi yang paling revolusioner. Versi 4.0 memiliki penambahan-penambahan fitur
yang makin lengkap dan membuat halaman web menjadi lebih interaktif.

HTML5

Inilah HTML generasi terbaru yang menyusun hampir setiap halaman web situs-situs modern yang terkenal seperti
Facebook, Twitter, ataupun YouTube. HTML5 memiliki penambahan fitur yang cukup penting seperti Audio, Video, dan
Canvas. Berkat HTML5 pula teknologi Flash mulai ditinggalkan. Versi inilah yang akan kita pelajari di modul ini.

Mengenal HTML 9
Modul Desain Web 2014

Membuat Halaman Web Pertama dengan HTML

Sebelum mulai membuat halaman web pertama kita menggunakan HTML, kita harus mengenal terlebih dahulu beberapa
istilah yang akan sering ditemui.

Istilah-istilah HTML

Elemen

Elemen adalah kode yang menetapkan struktur halaman web. Jenis elemen dapat kita lihat dari penggunaan tanda '<' dan
'>' yang mengelilingi nama elemen. Contoh elemen HTML adalah:

<h1>

Tag

Apabila elemen adalah kode yang diapit oleh tanda '<' dan '>', maka Tag merupakan nama yang diberikan pada tanda '<'
dan '>' beserta elemen didalamnya. Tag biasanya muncul berpasangan meskipun ada beberapa yang berdiri sendiri.

Tag yang berpasangan terdiri atas opening tag dan closing tag. Opening tag terdiri atas tanda '<', diikuti dengan nama
elemen, dan tanda '>'.

<html>

Closing tag terdiri atas tanda '<', diikuti dengan tanda '/', diikuti dengan nama elemen, dan tanda '>'.

<html>
......
</html>

Atribut

Atribut merupakan informasi tambahan mengenai elemen yang menggunakannya. Sebagai contoh, untuk menambahkan
gambar kita menggunakan tag <img> . Tag <img> memerlukan informasi berupa alamat dimana kita menyimpan gambar
tersebut. Untuk itu kita perlu memberikan informasi alamat penyimpanan gambar yang diinginkan dengan atribut 'src'.

<img src="http://cs.upi.edu/gambar.png" />

Atribut didefinisikan didalam opening tag setelah nama elemen. Pada umumnya atribut terdiri atas nama atribut dan
nilainya. Pada contoh diatas tag <img> memiliki atribut 'src' dengan nilai berupa alamat gambar di
http://cs.upi.edu/gambar.png.

Berikut ini ringkasan istilah pada HTML.

Membuat Halaman Web Pertama dengan HTML 10

Modul Desain Web 2014

Struktur Dokumen HTML

Semua dokumen HTML yang dibuat harus disimpan dalam suatu berkas dengan akhiran .html. Akhiran ini untuk memberi
tahu web browser bahwa dokumen yang kita tulis merupakan dokumen HTML. Dokumen HTML yang baik terdiri atas
sedikitnya 4 tag yaitu <!DOCTYPE html>, <html>, <head> , dan <body> .

<!DOCTYPE html> adalah deklarasi versi HTML yang akan dilakukan. Tag ini menginformasikan HTML versi berapa yang

akan diproses oleh web browser. Karena kita akan menggunakan versi terakhir dari HTML (HTML5), maka deklarasi versi
cukup dengan satu baris kode <!DOCTYPE html> . Mengikuti deklarasi versi HTML ini, tag <html> akan menunjukkan awal
dari dokumen HTML yang kita buat.

Didalam elemen <html> terdapat elemen <head> . Elemen ini akan mengandung semua informasi seputar halaman yang
bersangkutan. Informasi itu dapat berupa judul, nama pembuat, tanggal dibuat, tautan ke dokumen lain, kata kunci, dan
informasi lainnya.

Dibawah elemen <head> terdapat elemen <body> yang mengandung isi dari halaman web yang kita buat yang akan
terlihat di web browser. Berikut ini struktur dasar sebuah halaman web.

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
Isi halaman web yang akan ditampilkan oleh web browser.
</body>
</html>

Membuat Halaman Web Pertama dengan HTML 11

Modul Desain Web 2014

Menulis Komentar dalam Dokumen HTML

Saat dokumen HTML menjadi begitu besar dan mengandung ratusan, mungkin ribuan baris kode, maka akan menjadi
semakin sulit bagi kita membacanya. Oleh karena itu, menambahkan komentar dibagian-bagian penting dokumen HTML
akan sangat membantu saat kita ingin menambahkan sesuatu atau mengubah struktur dari dokumen HTML yang telah kita
buat.

Menulis komentar didalam dokumen HTML dimulai dengan <!-- dan diakhiri dengan --> .

<!DOCTYPE html>
<html>
<head>
<title>Komentar di halaman web</title>
</head>
<body>
<!-- Awal dokumen. Komentar ini tidak akan ditampilkan -->
Isi halaman web yang akan ditampilkan oleh web browser.
</body>
</html>

Membuat Halaman Web Pertama dengan HTML 12

Modul Desain Web 2014

Membuat Halaman Web Pertama dengan HTML 13

Modul Desain Web 2014

Menambahkan Teks dalam Dokumen HTML

Teks merupakan unsur utama dalam setiap halaman web. Pada umumnya halaman web memiliki judul halaman, subjudul,
dan paragraf-paragraf.

Menambahkan Judul dan Subjudul

Judul atau Subjudul dapat ditambahkan kedalam dokumen HTML dengan menggunakan tag <h1> hingga <h6> . <h1>
akan memiliki ukuran paling besar. <h2> hingga <h6> akan memiliki ukuran yang terus mengecil.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Judul dan Subjudul</title>
</head>
<body>
<h1>Paling besar</h1>
<h2>Besar</h2>
<h3>Sedang</h3>
<h4>Kecil</h4>
<h5>Lebih kecil</h5>
<h6>Paling kecil</h6>
</body>
</html>

Menambahkan Paragraf
Paragraf didalam dokumen HTML ditambahkan dengan menggunakan tag <p> . Setiap paragraf ditampilkan dengan
adanya baris baru yang memisahkan setiap paragraf.

Menambahkan Teks dalam Dokumen HTML 14

Modul Desain Web 2014

<!DOCTYPE html>
<html>
<head>
<title>Menambahkan Paragraf</title>
</head>
<body>
<h1>Departemen Pendidikan Ilmu Komputer</h1>
<p>Departemen Pendidikan Ilmu Komputer merupakan salah satu departemen yang berada di lingkungan Fakultas Pendidikan Matematika
<p>Departemen Pendidikan Ilmu Komputer terdiri atas dua program studi yaitu program studi Ilmu Komputer dan program studi Pendi
</body>
</html>

Menambahkan Baris Baru

Baris baru yang kita tambahkan didalam dokumen HTML tidak berpengaruh terhadap hasil yang ditampilkan oleh web
browser. Perhatikan hasil dari kode berikut ini.

<!DOCTYPE html>
<html>
<head>
<title>Menambahkan Baris Baru</title>
</head>
<body>
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Ilmu Pengetahuan Alam
Universitas Pendidikan Indonesia
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 15

Modul Desain Web 2014

Meskipun kita telah menuliskannya pada baris-baris yang berbeda, namun web browser akan tetap menampilkan baris-
baris tersebut dalam satu baris yang sama. Untuk memberitahu web browser bahwa kita ingin menampilkannya dalam
baris-baris yang berbeda maka kita memerlukan tag <br/> .

<!DOCTYPE html>
<html>
<head>
<title>Menambahkan Baris Baru</title>
</head>
<body>
Departemen Pendidikan Ilmu Komputer <br/>
Fakultas Pendidikan Matematika dan Ilmu Pengetahuan Alam <br/>
Universitas Pendidikan Indonesia <br/>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 16

Modul Desain Web 2014

Menambahkan Garis Horizontal

Selain menambahkan baris baru, kita juga dapat menggunakan garis horizontal untuk memisahkan isi halaman web yang
kita buat. Garis horizontal ini dapat ditambahkan dengan tag <hr /> . Seperti halnya <br/> , <hr/> juga merupakan tag
yang tidak memiliki pasangan.

<!DOCTYPE html>
<html>
<head>
<title>Garis Horizontal</title>
</head>
<body>
<p>Saat ini kota Bandung sedang mengalami musim hujan. Tapi UPI masih belum diguyur hingga hari ini :(.</p>
<hr/>
<p>Kosan kalian sudah kena hujan belum?</p>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 17

Modul Desain Web 2014

Spasi Kosong
Setiap spasi kosong berapapun banyaknya akan tetap ditampilkan dalam satu spasi oleh web browser, sama halnya
dengan baris baru dipembahasan sebelumnya yang juga ditampilkan dalam satu spasi. Penyatuan spasi ini dikenal dengan
istilah white space collapsing.

<!DOCTYPE html>
<html>
<head>
<title>Spasi Kosong</title>
</head>
<body>
Departemen Pendidikan Ilmu Komputer <br/>
Fakultas Pendidikan Matematika dan Ilmu Pengetahuan Alam <br/>
Universitas Pendidikan Indonesia <br/>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 18

Modul Desain Web 2014

Membuat Teks Tebal, Miring, dan Bergaris Bawah

Adakalanya kita ingin menebalkan teks untuk memberikan penekanan terhadap teks tersebut, memberikan garis miring,
atau menambahkan garis bawah. Ketiga hal ini dapat kita lakukan dengan HTML, bahkan menggabungkan ketiga elemen
tersebut kedalam satu teks yang sama.

Tag yang bisa gunakan untuk menebalkan teks adalah <b> atau <strong> .

<!DOCTYPE html>
<html>
<head>
<title>Membuat Teks Tebal</title>
</head>
<body>
Belajar HTML itu <b>penting</b> bagi mahasiswa <strong>Departemen Pendidikan Ilmu Komputer</strong>.
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 19

Modul Desain Web 2014

Selain dapat menebalkan teks, kita juga dapat memiringkan teks pada halaman web dengan tag <i> atau <em> .

<!DOCTYPE html>
<html>
<head>
<title>Membuat Teks Miring</title>
</head>
<body>
<p>
<i>Learn by doing</i> adalah istilah untuk belajar sambil mempraktekan apa yang dipelajari.
</p>
<p>
Belajar <em>coding</em> dengan HTML.
</p>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 20

Modul Desain Web 2014

Untuk menambahkan garis bawah pada setiap teks yang kita buat, tag <u> lah yang akan kita gunakan.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Teks Bergaris Bawah</title>
</head>
<body>
<p>
<i>Social media</i> yang populer di Indonesia adalah <u>Facebook</u>, <u>Twitter</u>, <u>Path</u>, dan <u>Instagram</u>.
</p>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 21

Modul Desain Web 2014

Superscript dan Subscript

Elemen <sup> digunakan apabila akan menambahkan pangkat pada suatu komponen halaman web. Contohnya ialah
menuliskan rumus $$E=mc^2$$.

<!DOCTYPE html>
<html>
<head>
<title>Superscript</title>
</head>
<body>
<p>
Ada yang tahu rumus E=mc² itu rumus apa?
</p>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 22

Modul Desain Web 2014

Elemen <sub> digunakan apabila akan menambahkan karakter 2 pada rumus $$ H_2O $$.

Menambahkan Teks dalam Dokumen HTML 23

Modul Desain Web 2014

Membuat Kutipan
Saat kita perlu mengutip perkataan seseorang kita dapat menggunakan tag <blockquote> atau <q> . Perbedaan dua jenis
kutipan ini terletak pada jenis kutipan. Tag <blockquote> digunakan untuk mengutip kutipan yang panjangnya hingga satu
paragraf. Sedangkan tag <q> digunakan untuk kutipan yang lebih pendek dan berada di dalam suatu paragraf.

<!DOCTYPE html>
<html>
<head>
<title>Blockquote dan Quote</title>
</head>
<body>
<blockquote>
Tak apa kawan. Aku mungkin hanya bintang laut yang jelek. Lebih baik aku pergi dari Bikini Bottom. Ini, ambil saja barang-b
</blockquote>
<p>
Patrick bertanya kepada Spongebob, <q>Taukah kamu apa yg lbh lucu dari 23?</q>, Spongebob balik bertanya, <q>Apakah itu?</q
</p>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 24

Modul Desain Web 2014

Membuat Singkatan
Tag <abbr> digunakan untuk membuat singkatan didalam dokumen HTML. Atribut title merupakan kepanjangan dari
singkatan yang akan dijelaskan. Penjelasan ini akan muncul saat kita menyorot singkatan yang dipilih.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Singkatan</title>
</head>
<body>
<p>
Mahasiswa <abbr title="Pendidikan Ilmu Komputer">Pilkom</abbr> akan menjadi guru.
Mahasiswa <abbr title="Ilmu Komputer">Ilkom</abbr> akan menjadi programmer.
</p>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 25

Modul Desain Web 2014

Alamat
Untuk menjelaskan suatu alamat seperti alamat rumah atau alamat kantor, tag <address> yang akan digunakan.

<!DOCTYPE html>
<html>
<head>
<title>Address</title>
</head>
<body>
<address>
<p>Jl. Dr. Setiabudi No. 229, Bandung, Jawa Barat, 40154.</p>
</address>
</body>
</html>

Menambahkan Teks dalam Dokumen HTML 26

Modul Desain Web 2014

Latihan Membuat Halaman Web Sederhana

Buatlah sebuah halaman web sederhana menggunakan tag-tag yang telah dipelajari sehingga akan menampilkan teks
seperti pada gambar dibawah ini.

Menambahkan Teks dalam Dokumen HTML 27

Modul Desain Web 2014

Menambahkan Teks dalam Dokumen HTML 28

Modul Desain Web 2014

Menambahkan List ke dalam Dokumen HTML

Pernah disuruh membeli sayuran ke pasar? Atau disuruh membuat soal sendiri? Kita bisa menuliskannya kedalam HTML
menggunakan list. Ada dua jenis list yaitu unordered list dan ordered list.

Unordered list
Untuk menuliskan daftar belanjaan biasaanya kita menggunakan tanda '-'. Daftar ini bisanya menggunakan unordered list
karena susunan pada daftar ini tidak berpengaruh jika dibolak balik.

Membuat unordered list dengan menggunakan HTML memakai tag <ul> . Didalam tag <ul> kita mendefinisikan satu

Menambahkan List kedalam Dokumen HTML 29

Modul Desain Web 2014

persatu daftar tersebut kedalam tag <li> .

<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h1>Daftar Belanjaan</h1>
<ul>
<li>Beras 1/2 KG</li>
<li>Minyak Sayur 6 KG</li>
<li>Sabun mandi 2 Bungkus</li>
<li>Cabai 1/4 KG</li>
</ul>
</body>
</html>

Ordered list
Ordered list digunakan jika daftar yang kita tulis berpengaruh urutannya. Langkah pembuatan mie goreng merupakan
contoh yang cook. Ordered list menggunakan tag <ol> yang dilengkapi dengan tag <li> didalamnya.

<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1>Membuat Mie Goreng</h1>
<ol>
<li>Hidupkan Kompor</li>
<li>Panaskan air dalam panci</li>
<li>Masukkan mie kedalam panci saat air telah mendidih</li>
<li>Aduk merata selama tiga menit</li>
<li>Sambil menunggu tiga menit berlalu, tuangkan bumbu-bumbu kedalam piring.</li>
<li>Tiriskan mie yang telah direbus selama tiga menit keatas piring</li>
<li>Aduk mie agar bumbu-bumbu meresap</li>

Menambahkan List kedalam Dokumen HTML 30

Modul Desain Web 2014

<li>Mie siap disantap</li>

</ol>
</body>
</html>

Latihan List Bersarang

Kita menambahkan ordered list didalam unordered list maupun sebaliknya dengan menyusun tag-tag HTML kedalam
susunan yang benar. Tulislah dokumen HTML sehingga menampilkan hasil seperti pada gambar.

Menambahkan List kedalam Dokumen HTML 31

Modul Desain Web 2014

Menambahkan List kedalam Dokumen HTML 32

Modul Desain Web 2014

Menambahkan Tautan ke dalam Dokumen HTML

Link yang dalam bahasa Indonesia disebut dengan tautan merupakan fitur HTML yang memungkinkan kita untuk berpindah
dari satu dokumen kedokumen yang lainnya. Tag yang kita gunakan untuk menambahkan tautan kedalam dokumen HTML
adalah <a> . Tag <a> memiliki atribut href. Atribut ini nantinya akan diisi dengan alamat tujuan dimana pengguna akan
dibawa saat mengklik tautan yang kita buat.

<!DOCTYPE html>
<html>
<head>
<title>Daftar Situs Jual Beli</title>
</head>
<body>
<h1>Daftar situs jual beli</h1>
<ul>
<li><a href="www.lazada.com">Lazada</a></li>
<li><a href="www.blibli.com">Blibli</a></li>
<li><a href="www.kaskus.com/fjb">Kaskus FJB</a></li>
<li><a href="https://www.facebook.com/groups/260858127363092/">Niaga Ilkom UPI</a></li>
</ul>
</body>
</html>

Menambahkan Tautan ke dalam Dokumen HTML 33

Modul Desain Web 2014

Apabila ingin agar tautan dibuka dijendela baru, tambahkan atribut target="_blank" setelah atribut href .

Menambahkan Tautan ke dalam Dokumen HTML 34

Modul Desain Web 2014

Membuat Tabel ke dalam Dokumen HTML

Banyak hal yang bisa kita tampilkan dalam bentuk tabel. Diantaranya daftar nilai, daftar gaji, daftar mahasiswa, dan daftar
harga. Menampilkan data dengan tabel HTML bisa kita lakukan dengan menggunakan tag <table> .

<!DOCTYPE html>
<html>
<head>
<title>Matriks</title>
</head>
<body>
<h1>Matriks</h1>
<table>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<tr>

Membuat Tabel ke dalam Dokumen HTML 35

Modul Desain Web 2014

<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>

Tabel yang dibuat dengan HTML tidak menampilkan garis pembatas secara otomatis. Jika ingin menambahkannya,
tambahkan atribut border .

<!DOCTYPE html>
<html>
<head>
<title>Matriks</title>
</head>
<body>
<h1>Matriks</h1>
<table border="1">
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>1</td>

Membuat Tabel ke dalam Dokumen HTML 36

Modul Desain Web 2014

<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>

Latihan Membuat Tabel

Buatlah tabel seperti pada gambar menggunakan tag <table> . Gunakan atribut rowspan untuk menggabungkan baris dan
colspan untuk menggabungkan kolom.

Membuat Tabel ke dalam Dokumen HTML 37

Modul Desain Web 2014

Membuat Tabel ke dalam Dokumen HTML 38