Scribd
Unggah
4 tayangan36 halaman

Struktur dan Fungsi Dasar HTML

Dokumen ini menjelaskan tentang HTML (HyperText Markup Language) sebagai dasar pengembangan web, termasuk sejarah, struktur dokumen, dan penggunaan tag. HTML5 adalah versi terbaru yang memungkinkan pengembangan web yang lebih cepat dan kuat. Selain itu, dokumen ini juga membahas berbagai elemen HTML seperti heading, paragraf, format teks, dan daftar.

Diunggah oleh

botroo82
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
4 tayangan36 halaman

Struktur dan Fungsi Dasar HTML

Dokumen ini menjelaskan tentang HTML (HyperText Markup Language) sebagai dasar pengembangan web, termasuk sejarah, struktur dokumen, dan penggunaan tag. HTML5 adalah versi terbaru yang memungkinkan pengembangan web yang lebih cepat dan kuat. Selain itu, dokumen ini juga membahas berbagai elemen HTML seperti heading, paragraf, format teks, dan daftar.

Diunggah oleh

botroo82
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

IMT01303202-BA

Pemrograman Web

Sesi 02
HTML

Dr. Andreas, [Link]., [Link]., MTA, CDM, CIoTA

1
Pemrograman Web
HTML

HTML merupakan singkatan dari HyperText Markup Language. HTML bisa diibaratkan
sebagai blok dasar dari suatu bangunan yang disebut World Wide Web.
Apa yang dimaksud dengan hypertext? Hypertext adalah teks yang ditampilkan di
komputer atau perangkat elektronik lainnya dengan referensi ke teks lain yang dapat
langsung diakses pengguna, biasanya dengan klik mouse atau menekan tombol. Selain teks,
hypertext dapat berisi tabel, daftar, formulir, gambar, dan elemen presentasi lainnya.
Hypertext adalah format yang mudah digunakan dan fleksibel untuk berbagi informasi melalui
Internet. HTML sebagai bahasa markup menggunakan serangkaian tag markup yang berfungsi
untuk memberikan instruksi kepada web browser mengenai bagaimana elemen-elemen dari
dokumen HTML seharusnya ditampilkan.
HTML awalnya dikembangkan oleh Sir Timothy
John Berners-Lee pada tahun 1990. Ia juga dikenal sebagai
bapak web. Pada tahun 1996, World Wide Web Consortium
(W3C) menjadi otoritas untuk mempertahankan spesifikasi
HTML. HTML juga menjadi standar internasional (ISO) pada
tahun 2000. HTML5 adalah versi terbaru dari HTML. HTML5
memberikan pendekatan yang lebih cepat dan lebih kuat
untuk pengembangan web.
Jika ditanya, “Apa yang bisa kita lakukan dengan HTML?” Maka ada banyak sekali hal
yan gbisa kita lakukan menggunakan HTML, Berikut ini adalah sebagian dari kemampuan
HTML:
• Kita bisa menampilkan dokumen yang berisi teks, gambar, daftar, tabel, dan lain-lain
secara online.
• Kita bisa mengakses sumber daya web seperti gambar, video, atau dokumen HTML lainnya
melalui hyperlink.
• Kita bisa membuat formulir untuk mendapatkan input dari pengguna seperti nama, alamat
email, komentar, dan sebagainya.
• Kita bisa menyertakan gambar, video, klip suara, animasi, aplikasi, dan dokumen HTML
lainnya secara langsung di dalam dokumen HTML.
• Kita bisa membuat versi offline dari suatu situs web sehingga dapat ditampilkan kembali
tanpa internet.

2
Pemrograman Web
HTML

• Kita bisa menyimpan data di browser web pengguna dan mengaksesnya nanti.
• Kita bisa menemukan lokasi pengunjung situs web kita saat ini.
• Dan lain-lain.

1. Struktur Dokumen HTML

Pada tahun 1994, World Wide Web Consortium (W3C) mengemukakan bahwa setiap
dokumen HTML harus diawali dengan tag <html> dan diakhiri oleh tag </html>. Hal ini ingin
menunjukkan bahwa jika ada karakter yang dituliskan sebelum tag <html> dan sesudah tag
</html>, maka karakter ini bukanlah kode HTML.
Di samping itu, dikatakan juga bahwa dokumen HTML terbagi menjadi dua bagian,
yaitu bagian head dan body. Bagian head berada di atas bagian body. Bagian head dituliskan
di antara tag <head> dan </head>, sedangkan bagian body dituliskan di antara tag <body>
dan </body>.

bagian head

bagian body

Gambar 1. Struktur dasar dokumen HTML.

Bagian head akan diisi dengan sesuatu yang disebut dengan metadata, yaitu data
tentang dokumen HTML ini. Meta data bisa berupa judul dokumen, jenis karakter, gaya

3
Pemrograman Web
HTML

tampilan (style), skrip program (script), dan informasi lainnya. Satu hal yang perlu diingat
bahwa semua yang dituliskan dalam bagian head ini tidak akan ditampikan pada browser. Jika
ingin ditampilkan, maka elemen tersebut harus dituliskan di dalam bagian body. Seperti yang
tampak pada Gambar 1, bahwa dalam satu dokumen HTML hanya terdapat satu bagian head.
Bagian body akan menentukan isi dari halaman web, sehingga semua elemen yang
ingin ditampilkan dalam halaman browser harus diketikkan di bagian ini. Sama dengan head,
bahwa dalam satu dokumen HTML hanya ada satu bagian body.
Saat ini HTML sudah mencapai versi 5.2 dengan berbagai peningkatan kemampuan.
Untuk menandai bahwa suatu dokumen HTML merupakan dokumen HTML versi 5, atau yang
disingkat dengan HTML5, maka di awal dokumen harus dituliskan:
<!DOCTYPE html>
sehingga secara keseluruhan struktur dari dokumen HTML menjadi:

Skrip 2. Struktur dokumen HTML5.

HTML5 adalah versi HTML terakhir yang direkomendasikan oleh W3C. Spesifikasi yang
saat ini berlaku dikenal sebagai HTML Living Standard ([Link]
Spesifikasi ini dikelola oleh Web Hypertext Application Technology Working Group
(WHATWG) yang merupakan suatu konsorsium dari beberapa browser utama, yaitu Apple,
Microsoft, Google, dan Mozilla.

4
Pemrograman Web
HTML

2. Tag
Tag pada dokumen HTML dapat didefinisikan sebagai teks yang ditanamkan ke dalam
kode HTML untuk memberi instruksi kepada web browser guna menampilkan elemen web.
Karena adanya tag ini maka browser dapat mengetahui seperti apa harus menampilkan
elemen web di halamannya. Contoh, apakah suatu teks akan ditampilkan dengan huruf cetak
tebal, cetak miring, atau apakah suatu gambar akan ditampikan dengan ukuran normalnya,
atau diperbesar, atau diperkecil, dan sebagainya.

Skrip 3. Contoh penggunaan tag pada dokumen HTML.

Jika skrip tersebut dijalankan atau ditampilkan dalam browser akan tampak sebagai berikut:

2 1
3

Gambar 1. Contoh halaman web sederhana.

5
Pemrograman Web
HTML

Tag memiliki syntax dasar sebagai berikut:

<nama_tag> isi </nama_tag>

awal tag akhir tag

Contoh:
<title> My Website </title>
<h1> Hello World! </h1>
<p> How great a web application is? </p>

Agar tampilan elemen web pada halaman browser dapat berikan variasi, maka kita
bisa menambahkan atribut pada tag sehingga syntax-nya menjadi seperti di bawah ini:

<nama_tag nama_atribut=“nilai”> isi </nama_tag>

Contoh:
<h1 align=“center”> Hello World! </h1>
<p style=“color: grey;”> How great a web application is? </p>

Berdasarkan fungsi dan format penulisannya, tag dibedakan menjadi beberapa jenis,
yaitu:
• Berdasarkan fungsi:
o Structure tag
Structure tag adalah tag yang berfungsi untuk menentukan struktur dari dokumen
HTML. Hanya ada beberapa tag jenis ini, yaitu <html>, <head>, dan <body>.
o Style tag
Style tag adalah tag yang berfungsi untuk menampilkan elemen web pada jendela
browser dan menentukan seperti apa suatu elemen web tersebut akan ditampilkan.
• Berdasarkan format penulisan:
o Singular tag
Singular tag adalah tag yang berdiri sendiri. Tag ini tidak memiliki pasangan sebagai
penutupnya. Tag jenis ini juga disebut sebagai self-closed tag.
o Paired tag
Kebalikan dari singular tag adalah paired tag, di mana tag ini memiliki tag pembuka

6
Pemrograman Web
HTML

(awal tag) dan tag penutup (akhir tag). Nama tag di bagian pembuka dan penutup
adalah sama, hanya saja yang di bagian penutup diberi awalan karakter garis miring
(slash).
Berikut ini adalah tata cara penulisan tag HTML:
• Tag HTML bersifat case-insensitive, artinya dapat dituliskan baik dengan huruf kecil, huruf
besar, maupun gabungannya.
• Satu elemen web yang terdiri dari tag dan isinya dapat dituliskan baik secara vertikal
maupun horisontal, bahkan kita bisa menuliskan semua tag hanya dalam satu baris. Yang
terpenting dari susunan penulisan dokumen HTML adalah kemudahan dalam
membacanya.

Skrip 4. Contoh cara penulisan tag HTML.

Terkadang kita ingin memberikan catatan pada kode program kita, atau yang biasa
disebut dengan comment atau remark. Untuk memberikan comment (komentar) di dokumen
HTML kita bisa menggunakan cara berikut ini:

<!-- komentar satu baris -->

atau:

<!--
komentar yang terdiri dari beberapa baris
-->

7
Pemrograman Web
HTML

Skrip 5. Pemberian baris komentar pada dokument HTML.

3. Bagian Head
Bagian head merupakan bagian pertama dari dokumen HTML. Pada bagian ini akan
diisi dengan informasi mengenai halaman web yang bersangkutan. Selain itu, pada bagian
head ini juga akan diisi dengan tautan (link) ke dokumen lain yang digunakan pada halaman
web tersebut, seperti kode CSS dan JavaScript. Karena hanya berupa informasi, maka semua
yang diketikkan di bagian head ini tidak akan ditampilkan pada halaman browser.
Ada beberapa tag yang biasanya digunakan di bagian head ini, yaitu:
• <title>
Tag title digunakan untuk memberikan judul bagi halaman web ini. Judul ini akan
ditampilkan pada tab dari jendela browser. Title ini juga yang akan digunakan sebagai nilai
default bagi nama web jika ingin kita simpan dalam daftar bookmark.
• <style>
Tag style digunakan untuk menuliskan kode CSS yang dituliskan secara internal.
• <meta>
Tag meta biasanya digunakan untuk menyediakan metadata terstruktur seperti kata kunci
dokumen, deskripsi, nama penulis, pengkodean karakter, dan metadata lainnya.
• <link>
Tag style digunakan untuk menghubungkan dokumen HTML dengan dokumen CSS yang
dituliskan secara eksternal.
• <script>
Tag script digunakan untuk menghubungkan dokumen HTML dengan dokumen JavaScript

8
Pemrograman Web
HTML

yang dituliskan secara eksternal.


• <base>
Tag base digunakan untuk mendefinisikan URL dasar dan target umum untuk semua URL
relatif yang terdapat dalam dokumen. Tidak boleh ada lebih dari satu tag base per
dokumen.

4. Heading
Yang dimaksud dengan heading adalah judul dan sub judul dari suatu artikel pada
halaman web. HTML menyediakan 6 level heading, mulai dari level 1 untuk judul utama,
kemudian level 2 untuk sub judul pertama, level 3 dan seterusnya hingga level 6. Heading
level 1 memiliki ukuran huruf yang paling besar, sedangkan heading level 6 memiliki ukuran
huruf yang terkecil.

Skrip 6. Heading level 1 hingga 6.

Gambar 2. Perbedaan ukuran pada masing-masing level heading.

9
Pemrograman Web
HTML

Jika diperhatikan, pada Gambar 2 tampak terlihat bahwa tag heading ini akan
memberikan beberapa efek otomatis terhadap teks yang dijadikan heading, yaitu:
• Heading ditampilkan pada baris baru;
• Teks heading ditampilkan dengan huruf cetak tebal; dan
• Ada jarak (spasi) pada sebelum dan sesudah baris heading tersebut.
Untuk mengubah perataan (alignment) pada tampilan heading, kita bisa
menggunakan atribut align. Atribut ini memiliki tiga pilihan nilai, yaitu left (perataan kiri),
center (perataan tengah), dan right (perataan kanan). Contoh:

Skrip 7. Penggunaan atribut align pada tag heading.

Gambar 3. Heading dengan perataan yang berbeda.

Khusus untuk perataan tengah (center alignment), kita juga bisa menggunakan tag
<center>, terutama jika ada lebih dari satu elemen yang ingin diratakan tengah. Contoh:

Skrip 8. Tag center untuk perataan tengah.

10
Pemrograman Web
HTML

Gambar 4. Tiga buah heading yang ditampilkan dengan perataan tengah.

5. Paragraf
Paragraf atau alenia dalam HTML bisa ditampilkan dengan menggunakan tag <p>.
Hampir sama dengan heading, setiap paragraf akan ditampilkan pada baris baru dan secara
otomatis akan diberikan jarak pada sebelum dan sesudah paragraf. Contoh:

Skrip 9. Penggunaan tag <p> untuk membentuk suatu paragraf.

Gambar 5. Tampilan dua buah paragraf.

11
Pemrograman Web
HTML

Sama dengan heading, paragraf juga dapat diatur perataannya melalui atribut align.
Nilai yang bisa digunakan yaitu left untuk perataan kiri, center untuk perataan tengah, right
untuk perataan kanan, dan justify untuk perataan di sisi kiri dan kanannya. Contoh:

Skrip 10. Pengaturan perataan teks pada paragraf.

Gambar 6. Paragraf yang ditampilkan dalam empat model perataan.

Dari Skrip 10 dapat terlihat bahwa kode HTML pada paragraf keempat diketikkan
dalam lima baris, tetapi pada saat ditampilkan di browser hanya menjadi tiga baris. Bahkan

12
Pemrograman Web
HTML

pada saat jendela browser diubah ukurannya (resized), maka teks tersebut juga akan berubah
mengikuti lebar dari jendela browser-nya. Hal ini dikarenakan HTML tidak mengenal
penggunaan (penekanan tombol) enter. Sebanyak apapun karakter enter akan diabaikan oleh
browser. Lalu bagaimana jika kita menginginkan ada teks pada satu paragraf yang ditampilkan
pada baris yang berbeda? Untuk itu kita bisa menggunakan tag <br> atau break. Tag break ini
merupakan singular tag.

Skrip 11. Penggunaan tag break untuk memaksa ganti baris di dalam paragraf.

Gambar 7. Ganti baris menggunakan tag break.

6. Format Teks
Seringkali kita membutuhkan efek khusus pada teks yang ditampilkan pada layar
browser, seperti cetak tebal, cetak miring, dan dengan garis bawah. Karakter yang dicetak
tebal disebut dengan bold dan dapat ditampilkan dengan menggunakan tag <b> di HTML.

13
Pemrograman Web
HTML

Selain menggunakan tag <b>, karakter dengan cetak tebal juga dapat ditampilkan
menggunakan tag <strong>. Bedanya adalah tag <strong> digunakan untuk memberikan
kesan bahwa teks tersebut adalah teks yang sangat penting pada halaman web tersebut.
Karakter dengan cetak miring disebut juga dengan italics. Karakter italics ini di HTML
dapat ditampilkan menggunakan tag <i>. Selain menggunakan tag <i>, karakter italics di HTML
juga dapat ditampilkan menggunakan tag <em> yang berarti emphasized. Ada perbedaan
makna antara tag <i> dan <em>, di mana tag <em> digunakan untuk memberikan kesan
bahwa ada penekanan ketika orang membaca teks tersebut.
Karakter dengan garis bawah disebut underline. Karakter ini dapat ditampilkan
menggunakan tag <u>. Karakter dengan garis bawah mewakili beberapa teks yang tidak
diartikulasikan dan memiliki gaya yang berbeda dari teks normal, seperti kata yang salah eja
atau nama yang tepat dalam teks berbahasa Mandarin. Harap hati-hati dalam menggunakan
efek garis bawah ini agar tidak rancu dengan tautan (hyperlink).

Skrip 12. Penggunaan formatting tag.

Gambar 8. Tampilan teks menggunakan berbagai macam formatting tag.

14
Pemrograman Web
HTML

7. Daftar
Elemen lain yang sering dijumpai di halaman web adalah daftar (list). Seperti pada
umumnya, kita mengenal ada dua macam list, yaitu unordered list dan ordered list.
Unordered list biasanya digunakan untuk daftar yang tidak membutuhkan nomor urut,
sedangkan ordered list untuk keperluan sebaliknya.
Unordered list di HTML dibentuk dengan menggunakan tag <ul>, sedangkan setiap isi
dari daftar tersebut dibentuk dengan tag <li>.

Skrip 13. Pembentukan daftar yang termasuk dalam unordered list.

Gambar 9. Tampilan unordered list standar.

Ada beberapa model bullets pada unordered list ini. Untuk mengganti model bullets
bisa menggunakan atribut style. Model yang tersedia adalah hollow, circle, dan square, di
mana hollow merupakan nilai default-nya.

Skrip 13. Pembentukan daftar yang termasuk dalam unordered list.

15
Pemrograman Web
HTML

Gambar 10. Tampilan unordered list dengan square bullets.

Jika diinginkan adanya daftar bersarang (nested list), di mana di dalam suatu list bisa
terdapat list yang lain, maka pada tag <li> yang dimaksud dapat disusun lagi struktur list yang
baru.

Skrip 14. Unordered list bersarang.

Gambar 11. Tampilan nested unordered list.

16
Pemrograman Web
HTML

Sama dengan unordered list, kita juga bisa membentuk struktur ordered list
menggunakan tag <ol> dan setiap anggota daftarnya tetap menggunakan tag <li>. Jadi antara
unordered list dan ordered list hanya terdapat perbedaan pada tag yang digunakan.

Skrip 15. Pembentukan daftar yang termasuk dalam ordered list.

Gambar 12. Tampilan ordered list standar.

Jika unordered list memiliki beberapa bentuk bullets, maka pada ordered list kita juga
bisa menggunakan model penomoran yang lain dengan menggunakan atribut style dengan
nilai 1, I, i, A, dan a, dimana 1 merupakan default-nya. Berikut ini adalah contoh
penggunaannya:

Skrip 16. Beberapa model dalam ordered list.

17
Pemrograman Web
HTML

Gambar 13. Tampilan ordered list dengan model A.

Hal yang sama juga berlaku pada nested ordered list.

Skrip 17. Nested ordered list.

Gambar 14. Tampilan nested ordered list.

Jika ada nested list, baik unordered list maupun ordered list, maka kedua jenis list ini
bisa saling digabungkan. Jadi dalam satu struktur list yang lengkap bisa terdiri dari unordered
list dan ordered list sekaligus.

18
Pemrograman Web
HTML

8. Gambar
Salah satu elemen yang terpenting pada suatu website adalah multimedia. Yang
dimaksud dengan multimedia di sini adalah gambar diam (still image), gambar bergerak
(animasi), suara (sound), dan film (video).
Untuk menampilkan gambar di halaman web bisa digunakan tag image yaitu <img>.
Tag image ini merupakan singular tag. Pada tag ini dibutuhkan atribut src untuk menentukan
lokasi dan nama file gambar yang ingin ditampilkan. Berikut ini adalah contoh untuk
menampilkan file gambar dengan nama [Link] ke dalam browser.

Skrip 18. Tag img untuk menampilkan gambar di halaman web.

Gambar 15. File gambar [Link] ditampilkan di halaman web.

Ada beberapa atribut lain selain src yang bisa digunakan untuk memanipulasi tampilan
gambar di halaman web, yaitu:
• alt: untuk menentukan teks apa yang akan ditampilkan sebagai pengganti jika gambar
tersebut tidak ingin ditampilkan.

19
Pemrograman Web
HTML

• width dan height untuk menentukan ukuran lebar dan tinggi dari gambar yang akan
ditampilkan.
• title untuk menampilkan teks jika pointer mouse berada di atas gambar tersebut.
Berikut ini adalah contoh penggunaan tag <img> beserta atributnya.

Skrip 19. Penggunaan atribut pada tag image.

Gambar 16. Perbedaan dua gambar [Link] yang ditampilkan sesuai ukuran aslinya dan
yang mengalami pengaturan lebar dan tingginya.

Perhatikan bahwa pada Skrip 19 terdapat perbedaan nilai pada atribut src jika
dibandingkan dengan Skrip 18. Pada Skrip 19, nilai atribut src adalah images/[Link] di
mana images adalah sub directory di mana file gambar tersebut berada.
Cara lain untuk menampilkan gambar adalah dengan menggunakan tag <picture>. Tag
<picture> ini ada sejak HTML5. Mengapa kita perlu menggunakan tag <picture> ini? Karena

20
Pemrograman Web
HTML

dengan menggunakan tag <picture> maka kita bisa menentukan gambar mana dan ukuran
berapa yang akan ditampilkan di layar browser, terutama jika browser tersebut bekerja di
PC/laptop, tablet, atau smartphone. Hal ini untuk menghindari penampilan gambar yang
terpotong karena ukuran layar yang tidak mencukupi.

Skrip 20. Penggunaan tag picture untuk menampilkan gambar.

Maksud dari Skrip 20 adalah sebagai berikut:


• Jika lebar dari resolusi layar browser melebihi 640 pixels, maka pada halaman tersebut
akan ditampilkan file [Link];
• Tetapi jika lebar dari resolusi layar browser tidak sampai 640 pixels tetapi lebih dari 420
pixels, maka di halaman web akan ditampilkan file [Link];
• Dan jika lebar dari resolusi layar browser tidak mencapai 420 pixels, maka akan ditampilkan
file [Link]

9. Audio
Tag <audio> digunakan untuk memutar file suara di web browser. Ada beberapa
format file yang telah didukung oleh tag ini, yaitu MP3, WAV, dan OGG. Tidak semua format
file ini bisa diputar pada browser. Tabel 1 menunjukkan dukungan file suara di setiap browser.

Tabel 1. Dukungan file suara di setiap web browser.


Browser MP3 WAV OGG
Edge / IE Ya Ya* Ya*
Chrome Ya Ya Ya
Firefox Ya Ya Ya
Safari Ya Ya Tidak
Opera Ya Ya Ya
* Mulai Edge 79

21
Pemrograman Web
HTML

Berikut ini adalah attribute yang dapat digunakan pada tag <audio>, yaitu:
• controls untuk menampilkan tombol pengaturan file di web browser.
• autoplay untuk memainkan file suara secara otomatis begitu selesai di load ke browser.
• loop untuk menentukan apakah file suara ini akan diputar berulang kali atau tidak.
• muted untuk menon-aktifkan suara setelah di-load ke browser, sehingga file tetap diputar
tetapi tidak bersuara.
Sedangkan tag lain yang berhubungan dengan tag <audio> adalah tag <source>
dengan atribut sebagai berikut:
• src untuk menentukan nama dan lokasi file audio yang akan diputar.
• type untuk memberikan informasi kepada browser mengenai tipe file yang dimuat.

Skrip 21. Penggunaan tag audio untuk memainkan file suara di halaman web.

Gambar 17. Menampilkan file audio di halaman web.

10. Video
Selain file audio, HTML juga bisa memuat file video di halaman web. Pemuatan file
video di halaman web dilakukan dengan menggunakan tag <video>. Hampir sama dengan tag

22
Pemrograman Web
HTML

<audio>, tag <video> ini juga memiliki beberapa format file, yaitu MP4, WebM, dan OGG.
Tabel 2 menunjukkan dukungan masing-masing browser terhadap file video.

Tabel 2. Dukungan web browser terhadap format file video.


Browser MP4 WebM OGG
Edge Ya Ya Ya
Chrome Ya Ya Ya
Firefox Ya Ya Ya
Safari Ya Ya Tidak
Opera Ya Ya Ya

Berikut ini adalah attribute yang dapat digunakan pada tag <video>, yaitu:
• controls untuk menampilkan tombol pengaturan file di web browser.
• autoplay untuk memainkan file suara secara otomatis begitu selesai di load ke browser.
• loop untuk menentukan apakah file suara ini akan diputar berulang kali atau tidak.
• muted untuk menon-aktifkan suara setelah di-load ke browser, sehingga file tetap diputar
tetapi tidak bersuara.
• width untuk menentukan lebar dari video yang diputar.
• height untuk menentukaan tinggi dari video yang diputar.
• poster untuk menentukan gambar apa yang akan ditampilkan selama file ini masih diunduh
atau user belum menekan tombol play.
Sama dengan tag <audio>, tag <video> ini juga dilengkapi dengan tag <source> yang
memiliki atribut sebagai berikut:
• src untuk menentukan nama dan lokasi file video yang akan diputar.
• type untuk memberikan informasi kepada browser mengenai tipe file yang dimuat.

Skrip 22. Penggunaan tag video untuk memainkan file film di halaman web.

23
Pemrograman Web
HTML

Gambar 18. Menampilkan file video di halaman web.

11. Tautan
Tautan atau anchor (hyperlink atau link) di HTML digunakan untuk menghubungkan
halaman web yang satu dengan yang lainnya. Tidak hanya itu saja, dengan tautan ini kita bisa
berpindah dari situs yang satu ke situs lainnya, juga bisa untuk mengirim email, atau menuju
ke lokasi atau file tertentu yang ada di server.
Secara umum, anchor selalu memiliki titik asal dari tautan tersebut dan tujuannya.
Elemen apa saja yang dapat menjadi titik asal dan tujuan dari suatu anchor? Normalnya ada
dua elemen yang dapat digunakan sebagai titik awal suatu anchor, yaitu teks dan gambar.
Sedangkan untuk tujuannya bisa berupa alamat website (URL = Uniform Resource Locator),
nama file lain (baik untuk dibuka, dijalankan, maupun diunduh), alamat email sebagai tujuan
pengiriman surel, dan sebagainya.
Anchor di dokumen HTML dibentuk dengan menggunakan tag <a>. Atribut yang
terpenting adalah href. Berikut ini adalah daftar atribut yang biasa digunakan:
• href untuk menentukan tujuan dari suatu achor.
• target untuk menentukan lokasi di mana tujuan anchor tersebut akan dibuka.
• download untuk menentukan file yang akan diunduh jika anchor diklik.
• type untuk menentukan jenis dari media yang akan dituju.
Jika tujuan dari anchor dituliskan pada atribut href, maka titik asal dari anchor ini akan
dituliskan di antara tag pembuka <a> dan penutupnya </a>.

24
Pemrograman Web
HTML

Skrip 23. Tujuan anchor sama, tetapi titik asalnya berbeda.

Gambar 19. Tampilan anchor yang berupa teks dan gambar.

Untuk atribut target bisa diisi dengan beberapa nilai, yaitu:


• _self jika yang menjadi tujuan akan ditampilkan pada jendela atau tab yang sama.
• _blank jika yang menjadi tujuan akan ditampilkan pada jendela atau tab browser yang
baru.
• _parent jika yang menjadi tujuan akan ditampilkan di frame sebelumnya (parent).
• _top jika yang menjadi tujuan akan ditampilkan secara penuh.
Nilai default untuk atribut target ini adalah _self.
Secara default, anchor di semua browser akan ditampilkan dengan format sebagai
berikut:
• unvisited link jika tujuan dari anchor ini belum pernah dikunjungi. Unvisited link akan
ditampilkan dengan teks yang berwarna biru dan menggunakan garis bawah.

25
Pemrograman Web
HTML

• visited link jika tujuan dari anchor ini sudah pernah dikunjungi. Visited link akan
ditampilkan dengan teks yang berwarna ungu dan menggunakan garis bawah.
• active link jika anchor ini diaktivkan dengan cara diklik. Active link akan ditampilkan dengan
teks berwarna merah dan menggunakan garis bawah.

12. Tabel
Secara umum, tabel di HTML memungkinkan kita untuk menampilkan data dalam
format baris dan kolom. Selain itu, ada fungsi lain dari tabel di HTML, yaitu untuk mengatur
tata letak atau tampilan elemen web. Hal ini dikenal dengan istilah formatting.
Tag dasar untuk pembentukkan tabel di HTML adalah:
• <table> untuk membentuk tabel.
• <th> untuk mendefinisikan header atau judul kolom.
• <tr> untuk mendefinisikan baris dari tabel.
• <td> untuk mendefinisikan detail atau kolom dari tabel.
Perpotongan antara baris dan kolom disebut dengan sel (cell).

Skrip 24. Pembentukan tabel di HTML.

26
Pemrograman Web
HTML

Gambar 20. Tampilan tabel di halaman web.

Jika kita perhatikan Gambar 20, maka dapat terlihat bahwa tabel itu sudah terbentuk,
hanya saja belum nampak garis-garis pada tabelnya. Untuk itu maka kita bisa melengkapi tag
<table> tadi dengan beberapa atribut berikut ini:
• border untuk menentukan ketebalan dari garis tepi tabel. Nilai default untuk atribut ini
adalah 0. Oleh karena itu maka secara default garis pada tabel tidak ditampilkan. Jika nilai
atribut border ini diganti dengan 1, maka garis-garis pada tabel itu akan ditampilkan. Tetapi
jika nilai atribut border ini diganti menjadi 5, maka yang menjadi tebal hanya garis tepi
tabel, sedangkan garis vertikal dan horisontal yang ada di dalam tabel tetap berukuran 1
(tidak mengalami perubahan).
• width untuk menentukan lebar dari tabel. Nilai dari atribut ini bisa diisi dengan ukuran
pixel atau persentase. Jika diisi dengan pixel maka lebarnya menjadi tetap sebesar yang
ditentukan. Tetapi jika diisi dengan persentase, maka lebarnya akan proporsional
mengikuti lokasi di mana tabel tersebut diletakkan.
• height untuk menentukan tinggi dari tabel. Untuk penjelasannya sama dengan atribut
width di atas.
• cellspacing untuk menentukan jarak antara garis tepi sel dengan elemen lain yang ada di
luarnya.
• cellpadding untuk menentukan jarak antara garis tepi sel dengan isi (yang ada di bagian
dalam) dari sel tersebut.
• bordercolor untuk menentukan warna dari garis border-nya.

27
Pemrograman Web
HTML

Skrip 25. Penggunaan beberapa atribut pada tag <table>.

Gambar 21. Tampilan tabel dengan beberapa atribut.

Sejak HTML5, masing-masing bagian dari elemen tabel biasanya dikelompokkan


menggunakan beberapa tag berikut ini:
• <caption> untuk mendefinisikan judul dari tabel (biasanya diletakkan di bagian atas).
• <thead> untuk mendefinisikan kelompok header tabel.
• <tbody> untuk mendefinisikan kelompok isi tabel.
• <tfoot> untuk mendefinisikan bagian bawah tabel.

28
Pemrograman Web
HTML

Skrip 26. Pengelompokan bagian-bagian tabel.

Gambar 22. Tampilan tabel dengan tag pengelompokan.

29
Pemrograman Web
HTML

Ada kalanya kita juga perlu mengatur konten yang berada di dalam setiap sel. Untuk
itu kita bisa menggunakan beberapa atribut berikut ini baik pada tag <tr>, <th>, maupun <td>.
Atribut tersebut antara lain:
• align untuk mendefinisikan perataan isi sel secara horisontal.
• valign untuk mendefinisikan perataan isi sel secara vertikal.
• bordercolor untuk mendefinisikan warna dari garis tepi sel.
• bgcolor untuk mendefinisikan warna latar belakang sel.

Skrip 27. Penggunaan atribut pada baris dan kolom tabel.

Gambar 23. Tampilan tabel di mana terdapat pengaturan pada baris dan kolomnya.

30
Pemrograman Web
HTML

Jika diperhatikan, pada tag <tr> yang pertama diberi atribut align=“center”. Hal ini
akan mengakibatkan semua isi sel pada baris pertama akan diratakan tengah. Secara default
nilai dari atribut align ini adalah left. Kemudian pada tag <tr> kedua diberi atribut valign=“top”
yang akan mengakibatkan semua isi sel pada baris kedua ditampilkan dengan perataan di atas
secara vertikal. Berikutnya pada tag <tr> yang ketiga diberi atribut bgcolor=“yellow” yang
mengakibatkan semua sel pada baris ketiga akan memiliki warna latar belakang kuning.
Meskipun demikian, ada hal-hal khusus yang berlaku di sini, yaitu jika pada tag <td>
diatur menggunakan atribut yang sama, maka nilai dari atribut pada tag <td> ini yang akan
berlaku. Contohnya adalah pada baris pertama, di mana pada tag <td> ketiga diberi atribut
align=“right” yang mengakibatkan khusus untuk sel tersebut akan ditampilkan dengan
perataan kanan. Demikian juga dengan atribut lain yang diletakkan di tag <td>. Jadi intinya
adalah bahwa atribut yang diletakan di tag <tr> akan mengatur keseluruhan sel yang berada
di baris tersebut. Sedangkan jika atribut tersebut diletakkan di tag <td>, maka pengaturannya
hanya akan berlaku pada sel tersebut.
Pada tabel biasanya dibutuhkan adanya penggabungkan beberapa sel, bisa secara
baris maupun kolom. Untuk melakukan penggabungan secara baris kita bisa gunakan atribut
rowspan, sedangkan untuk penggabungan secara kolom digunakan atribut colspan. Nilai yang
diberikan baik pada rowspan maupun colspan akan menunjukkan jumlah baris atau kolom
yang akan digabungkan. Perhatikan bahwa jika ada penggabungan sel, baik secara baris
maupun kolom, berarti akan ada baris atau kolom yang hilang. Untuk jelasnya bisa
diperhatikan Skrip 28 dan 29 serta Gambar 24 dan 25.

31
Pemrograman Web
HTML

Skrip 28. Struktur tabel mula-mula.

Gambar 24. Tampilan tabel mula-mula.

32
Pemrograman Web
HTML

Skrip 29. Struktur tabel dengan penggabungan beberapa baris dan kolom.

Gambar 25. Tampilan tabel dengan penggabungan beberapa sel.

33
Pemrograman Web
HTML

SOAL LATIHAN

Buatlah kode HTML untuk tampilan berikut ini:

Berikut ini adalah keterangannya:


1. Ukuran keseluruhan adalah:

800 pixels
15%

500 pixels
75%

25%

34
Pemrograman Web
HTML

2. Keterangan perbagian:

a. Judul pada tab browser

b. Judul pada halaman web

• Huruf: Arial

c. Menu (navigasi)
→ [Link]
→ link ke halaman LinkedIn kita sendiri
→ [Link]
→ [Link]

d. Konten
30%

e. Footer

3. Untuk tampilan lainnya bisa melihat pada hasil output pada soal.

35
Universitas Ciputra
CitraLand CBD Boulevard
Surabaya, Jawa Timur
60219 [Link]

Anda mungkin juga menyukai