Algoritma, Struktur Data, dan Pemrograman: Bab 1. Pemrograman Internet

Saturday, December 24, 2016

Bab 1. Pemrograman Internet

XHTML

1.1 Pengantar

Selamat datang di dunia pemrograman web. Internet telah berusia empat dekade, tetapi popularitasnya mulai dikenal pada awal tahun 1990an. Perkembangan pemrograman web hampir terjadi tiap hari, dengan langkah inovasi yang selalu berkembang secara eksponensial. Pada bab ini, Anda akan mengembangkan halaman-halaman web Anda sendiri. Anda akan semakin takjub akan betapa menariknya dan betapa tangguhnya pemrograman web ini.

Bab ini akan diawali dengan mendiskusikan tentang perkembangan aplikasi berbasis-web menggunakan XHTML (Extensive HyperText Markup Language). Di akhir bab ini, akan dikenalkan beberapa teknik XHTML seperti internal linking untuk memudahkan navigasi halaman, form untuk mengumpulkan informasi dari pengunjung halaman web, dan table yang berguna untuk menstrukturisasi informasi. Pada bab berikutnya, akan didiskusikan sebuah teknologi yang dikenal dengan CSS (Cascading Style Sheets), yang membuat halaman web lebih menarik secara visual.

1.2 Mengedit XHTML

Pada bab ini, Anda akan menuliskan XHTML pada format kode-sumber. Anda menciptakan dokumen XHTML dengan mengetikkannya pada sebuah editor teks (seperti Notepad, TextEdit, Notepad++, dan lainnya) dan menyimpannya dengan memberikan ekstensi .htm atau .html pada nama file. Anda hanya perlu menempatkan dokumen XHTML pada komputer Anda dan membukanya secara lokal menggunakan penjelajah web (web browser) seperti Internet Explorer, Firefox, atau Google Chrome.

1.3 Contoh XHTML Pertama

Gambar 1.1 merupakan sebuah dokumen XHTML yang dinamai dengan utama.hml. Contoh pertama ini akan menampilkan pesan “Selamat Datang ke XHTML!” pada penjelajah. Baris kunci pada program berada pada baris 13, yang memberitahu penjelajah web untuk menampilkan “Selamat Datang ke XHTML!”. Sekarang akan didiskusikan tiap baris pada program.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!—Contoh XHTML yang pertama.-->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Selamat Datang</title>

</head>

<body>

<p>Selamat Datang ke XHTML!</p>

</body>

</html>

Gambar 1.1 Contoh XHTML yang pertama

Baris 1-3 diperlukan pada dokumen XHTML untuk memastikan kesesuaian dengan sintaks XHTML yang benar. Untuk saat ini, Anda hanya perlua menyalin ketiga baris tersebut ke dalam setiap dokumen XHTML yang Anda ciptakan.

Baris 5-6 merupakan komentar XHTML. Pencipta dokumen XHTML menyisipkan komentar untuk memperbaiki keterbacaan skrip dan untuk menjelaskan isinya. Komentar juga untuk membantu orang lain dalam membaca dan memahami sebuah dokumen XHTML. Komentar tidak menyebabkan penjelajah web untuk melakukan aksi apapun. Dokumen XHTML selalu diawali dengan <! – dan diakhiri dengan -->. Setiap contoh XHTML pada buku ini akan mencantumkan komentar untuk menjelaskan nomor gambar dan nama file dan memberikan deskripsi singkat dari skrip.

Markup XHTML memuat teks yang merepresentasikan isi sebuah dokumen dan elemen-elemen yang menetapkan struktur dokumen. Beberapa elemen penting pada sebuah dokumen XHTML adalah elemen html, elemen head, dan elemen body. Elemen html mengapit bagian kepala (yang direpresentasikan oleh elemen head). Bagian kepala memuat informasi tentang dokumen XHTML, seperti title. Bagian kepala juga dapat memuat dokumen khusus yang memformat instruksi-instruksi yang dikenal dengan style sheets dan program-program sisi-klien yang dikenal dengan script untuk menciptakan halaman web dinamis.

Dokumen XHTML memuat elemen pembatas awal (tag awal) dan elemen pembatas akhir (tag akhir). Tag awal memuat nama elemen di dalam kurung siku (seperti, <html>). Tag akhir memuat nama elemen yang diawali dengan slash maju (/) di dalam kurung siku (seperti, </html>). Pada contoh ini, baris 7 dan 15 mendefinisikan awal dan akhir dari elemen html. Perhatikan bahwa tag akhir pada baris 15 memiliki nama sama dengan tag awal, tetapi diawali dengan sebuah / di dalam kurung siku. Tag awal dapat memiliki atribut untuk memberikan informasi tambahan tentang sebuah elemen. Penjelajah web dapat menggunakan informasi tambahan ini untuk menentukan bagaimana memproses sebuah elemen. Setiap atribut memiliki nama dan nilai yang dipisahkan oleh suatu tanda sama dengan (=). Baris 7 menetapkan atribut (xmlns) dan nilai (http://www.w3.org/1999/xhtml) untuk elemen html pada sebuah dokumen XHTML. Untuk saat ini, Anda cukup menyalin tag awal elemen html pada baris 7 ke dalam dokumen XHTML.

Dokumen XHTML membagi elemen html ke dalam dua bagian, yaitu kepala dan tubuh. Baris 8-10 mendefinisikan bagian kepala dengan elemen head. Baris 9 menetapkan elemen title. Ini dikenal dengan elemen bersarang karena ia (elemen title) diapit di dalam tag awal dan tag akhir dari elemen head. Elemen head juga merupakan elemen bersarang karena ia diapit di dalam tag awal dan tag akhir dari elemen html. Elemen title menjelaskan halaman web. Judul akan muncul pada batang judul (title bar) di sisi atas jendela penjelajah web.

Baris 12 memulai elemen body pada dokumen. Bagian tubuh dari sebuah dokumen XHTML menetapkan isi dokumen, yang dapat mencantumkan teks dan elemen-elemen.

Beberapa elemen, seperti elemen paragraf (ditandai dengan <p> dan </p>) pada baris 13, menandai teks yang akan ditampilkan pada penjelajah web. Semua teks yang ditempatkan di antara tag <p> dan tag </p> akan membentuk sebuah paragraf. Ketika penjelajah membaca sebuah paragraf, sebuah baris kosong biasanya ditempatkan sebelum dan sesudah teks paragraf terkait.

Dokumen ini diakhiri dengan dua tag akhir (baris 14-15). Kedua tag ini menutup elemen body dan elemen html. Tag </html> pada dokumen XHTML menginformasikan penjelajah web bahwa markup XHTML telah utuh.

1.4 Layanan Validasi XHTML W3C

Pemrograman berbasis-web bisa menjadi kompleks dan dokumen XHTML harus ditulis secara benar untuk memastikan bahwa penjelajah web dapat memprosesnya dengan tepat. Untuk mempromosikan dokumen yang ditulis secara benar, W3C (World Wide Web Consortium) menyediakan sebuah layanan validasi (validator.w3.org) untuk memeriksa sintaks sebuah dokumen. Dokumen dapat divalidasi dengan menyediakan sebuah URL yang menetapkan lokasi file, dengan mengupload file tersebut ke validator. Halaman web W3C mengindikasikan bahwa nama layanan yang diberikan adalah MarkUp Validation Service dan bahwa layanan validasi dipakai untuk memvalidasi sintaks dari dokumen XHTML. Semua contoh pada buku ini telah berhasil divalidasi menggunakan validator.w3.org.

1.5 Elemen Kepala

Sebagian teks pada sebuah dokumen XHTML bisa jadi lebih penting dari bagian teks lainnya. Sebagai contoh, teks pada bagian ini dipandang lebih penting dari sebuah catatan kaki. XHTML menyediakan enam elemen kepala untuk mengindikasikan level kepentingan dari informasi. Gambar 1.2 mendemonstrasikan elemen-elemen ini (elemen h1 sampai elemen h6). Elemen h1 (baris 13) dipandang sebagai elemen kepala yang paling penting dan secara umum dituliskan menggunakan huruf berukuran lebih besar dari lima elemen kepala yang lain (baris 14-18). Setiap elemen kepala yang lain (h2 sampai h6) ditulis dengan font yang lebih kecil.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Elemen-Elemen Kepala</title>

</head>

<body>

<h1>Kepala Level 1</h1>

<h2>Kepala Level 2</h2>

<h3>Kepala Level 3</h3>

<h4>Kepala Level 4</h4>

<h5>Kepala Level 5</h5>

<h6>Kepala Level 6</h6>

</body>

</html>

Gambar 1.2 Elemen-elemen kepala h1 sampai h6

1.6 Hyperlink

Salah satu fitur XHTML yang paling penting adalah hyperlink, yang mereferensi sumberdaya lain, seperti dokumen XHTML dan citra. Ketika pengguna mengklik sebuah hyperlink, penjelajah web akan mencoba mengeksekusi sebuah aksi yang berkaitan dengannya (seperti menavigasi ke sebuah URL, membuka sebuah email, dan lainnya). Pada XHTML, baik teks maupun citra dapat berperan sebagai hyperlink. Penjelajah web secara umum akan membubuhkan garis-bawah dan akan mewarnainya dengan biru, sehingga pengguna dapat membedakan antara hyperlink dengan teks biasa. Pada Gambar 1.3, Anda menciptakan hyperlink teks untuk menuju ke empat situs web yang berbeda.

Baris 14 mengenalkan elemen strong, yang mengindikasikan bahwa isinya mempunyai tingkat kebergunaan yang tinggi. Penjelajah web umumnya menampilkan teks semacam itu dengan huruf tebal.

Link diciptakan menggunakan sebuah elemen a (anchor). Baris 17 mendefinisikan sebuah hyperlink untuk mereferensi sebuah URL yang ditugaskan kepada atribut href, yang menetapkan lokasi dari sumberdaya yang terhubung, seperti halaman web, sebuah file atau alamat e-mail. Elemen ini

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Empat link</title>

</head>

<body>

<h1>Berikut adalah beberapa situs favorit saya</h1>

<p><strong>Klik sebuah nama untuk pergi ke halaman tersebut.</strong></p>

<p><a href = "http://www.kompas.com">Kompas</a></p>

<p><a href = "http://www.detik.com">Detik</a></p>

<p><a href = "http://www.yahoo.com">Yahoo!</a></p>

<p><a href = "http://www.usatoday.com">USA Today</a></p>

</body>

</html>

Gambar 1.3 Menghubungkan ke beberapa situs web lain

Hyperlink ke Alamat e-mail

Elemen anchor dapat menghubungkan ke alamat e-mail menggunakan mailto: URL. Ketika seseorang mengkliknya, penjelajah web akan menjalankan program e-mail (seperti Microsoft Outlook atau Mozilla Thunderbird) agar pengguna dapat menuliskan pesan e-mail kepada alamat yang dituju. Gambar 1.4 mendemonstrasikan elemen achor ini. Baris 15-17 memuat sebuah link e-mail. Format dari sebuah achor e-mail adalah <a href = “mailto: alamanEmail”>...</a>. Pada kasus ini, Anda menghubungkan ke alamat email rismon_siantar@yahoo.co.uk.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Halaman Kontak</title>

</head>

<body>

<p>

Alamat email saya adalah

<a href = "mailto:rismon_siantar@yahoo.co.uk">

rismon_siantar@yahoo.co.uk

</a>

. Klik alamat ini dan email default Anda

akan membuka pesan e-mail dan mengalamatkannya pada saya.

</p>

</body>

</html>

Gambar 1.4 Menghubungkan ke sebuah alamat e-mail

1.7 Citra

Semua contoh yang telah didiskusikan sejauh ini hanya mendemonstrasikan bagaiamana dokumen XHTML dapat memuat teks. Namun, hampir semua halaman web memuat baik teks maupun citra. Kenyataannya, citra sama pentingnya dengan teks dan merupakan bagian dari perancangan halaman web. Tiga format citra yang populer digunakan oleh para pengembang web adalah GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts), dan PNG (Portable Network Graphics). Pengguna dapat menciptakan citra menggunakan perangkat-lunak khusus seperti Adobe Photoshop (www.adobe.com), atau perangkat-lunak lainnya. Citra juga dapat diperoleh dari pelbagai situs web. Gambar 1.5 mendemonstrasikan bagaimana menginkorporasikan citra ke dalam halaman web.

Baris 14-15 menggunakan sebuah elemen img untuk menyisipkan sebuah citra ke dalam dokumen XHTML. Lokasi dari file citra ditetapkan dengan atribut src dari elemen img. Citra ini ditempatkan di dalam direktori yang sama dengan dokumen XHTML, jadi hanya nama file citra yang diperlukan. Atribut opsional width dan height menetapkan lebar dan tinggi citra. Anda dapat menskala sebuah citra dengan menambah atau mengurangi nilai dari atribut width dan height. Jike kedua atribut ini diabaikan, penjelajah web akan menggunakan ukuran lebar dan tinggi aktual dari citra. Citra diukur dalam piksel, yang merepresentasikan titik-titik warna pada layar. Citra pada Gambar 1.5 berukuran 92 piksel lebar dan 120 piksel tinggi.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Citra</title>

</head>

<body>

<p>

<img src = "kanji.gif" width = "92" height = "120"

alt = "Tulisan Kanji China" />

<img src = "kanji2.gif" width = "92" height = "120"

alt = "Tulisan Kanji Jepang" />

</p>

</body>

</html>

Gambar 1.5 Citra pada dokumen XHTML

Setiap elemen img pada dokumen XHTML harus memiliki atribut alt. Jika penjelajah web tidak dapat membaca citra terkait, maka ia akan menampilkan nilai dari atribut alt. Gambar 1.5 menunjukkan bahwa Internet Explorer menunjukkan simbol x dan menampilkan nilai dari atribut alt, yang menandakan bahwa citra terkait (kanji2.gif) tidak dapat ditemukan.

Beberapa elemen XHTML (disebut dengan elemen kosong) hanya memuat atribut dan tidak memuat teks (yaitu, teks tidak ditempatkan di antara tag awal dan tag akhir). Elemen kosong (misalnya, img) harus diterminasi, menggunakan karakter slash maju (/) di dalam kurung siku kanan (>) dari tag awal atau menggunakan tag akhir. Ketika menggunakan karakter slash maju, Anda menambahkan sebuah spasi (yang berada sebelum karakter slash tersebut) untuk memperbaiki keterbacaan dokumen (seperti ditunjukkan pada akhir baris 15 dan 17). Baris 16-17 dapat pula ditulis-ulang dengan sebuah tag akhir </img> sebagai berikut:

<img src = "kanji2.gif" width = "92" height = "120"

alt = "Tulisan Kanji Jepang"></img>

Menggunakan Citra sebagai Hyperlink

Dengan menggunakan citra sebagai hyperlink, para pengembang web dapat menciptakan halaman web secara grafikal yang menguhubungkan ke sumberdaya lain. Pada Gambar 1.6, Anda menciptakan enam hyperlink citra.

Baris 14-17 menciptakan sebuah hyperlink citra menggunakan sebuah elemen img bersarang di dalam sebuah elemen anchor (a). Nilai dari atribut src (dari elemen img) menetapkan bahwa citra ini (link.html) berada di dalam sebuah direktori yang bernama tombol. Direktori tombol dan dokumen XHTML berada di dalam direktori yang sama. Citra dari dokumen lain dapat pula direferensi dengan menetapkan atribut src menjadi nama nama dan lokasi citra tersebut. Dengan mengklik hyperlink citra tertentu akan membawa pengguna ke halaman web yang ditetapkan oleh atribut href dari elemen anchor terkait.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Navigasi dengan Citra</title>

</head>

<body>

<p>

<a href = "link.html">

<img src = "tombol/link.jpg" width = "65"

height = "50" alt = "Halaman Link" />

</a>

<a href = "list.html">

<img src = "tombol/list.jpg" width = "65"

height = "50" alt = "Halaman Contoh List" />

</a>

<a href = "kontak.html">

<img src = "tombol/kontak.jpg" width = "65"

height = "50" alt = "Halaman Kontak" />

</a>

<a href = "tabel1.html">

<img src = "tombol/tabel.jpg" width = "65"

height = "50" alt = "Halaman Tabel" />

</a>

<a href = "formulir.html">

<img src = "tombol/formulir.jpg" width = "65"

height = "50" alt = "Halaman Umpan-Balik" />

</a>

</p>

</body>

</html>

1.8 Karakter Spesial dan Aturan Horisontal

Papanketik tertentu tidak menyediakan beberapa karakter atau simbol (seperti <), atau keberadaan simbol-simbol ini dapat menyebabkan error sintaks. Sebagai contoh,

<p>jika x < 10 maka x diinkremen sebesar 1</p>

akan menyebabkan error sintaks karena ia menggunakan karakter <, yang dicadangkan untuk tag awal dan tag akhir (seperti <p> dan </p>). XHTML menyediakan referensi entitas karakter (dalam format &kode) untuk merepresentasikan karakter-karakter spesial. Anda dapat memperbaiki baris skrip tersebut dengan menuliskan

<p>jika x < 10 maka x diinkremen sebesar 1</p>

yang menggukanan referensi entitas karakter < untuk simbol <.

Gambar 1.7 mendemonstrasikan bagaimana menggunakan beberapa karakter spesial pada dokumen XHTML. Baris 24-25 memuat beberapa karakter spesial, yang dapat diekspresikan sebagai referensi entitas karakter (dikodekan menggunakan singkatan seperti & untuk simbol @ dan © untuk simbol ©) atau dapat pula diekspresikan sebagai referensi karakter numerik (desimal atau heksadesimal). Sebagai contoh, karakter & direpresentasikan dalam notasi desimal dan heksadesimal sebagai & dan &.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Halaman Kontak</title>

</head>

<body>

<p>

Klik

<a href = "mailto:rismon_siantar@yahoo.co.uk">di sini</a>

untuk membukan pesan e-mail yang dialamatkan ke

rismon_siantar@yahoo.co.uk.

</p>

<hr />

<p>Semua informasi pada situs ini adalah <strong>©

Rismon & Rekan, Inc. 2013.</strong></p>

<p><del>Anda dapat mengunduh sebanyak 3.14 x 10<sup>2</sup>

karakter dari situs ini.</del>

Hanya <sub>satu</sub> unduhan per jam yang diijinkan.</p>

<p><em>Perhatikan: < ¼ dari informasi

yang disajikan di sini diperbarui tiap harinya.</em></p>

</body>

</html>

Pada baris 31-33, dikenalkan empat elemen baru. Hampir semua penjelajah web mengenali elemen del sebagai teks tercoret. Dengan format ini, pengguna dapat mengindikasikan revisi dokumen. Untuk mensuperskrip teks (menaikkan teks dan mengurangi ukuran huruf) atau mensubskrip teks (menurunkan teks dan mengurangi ukuran huruf), Anda bisa menggunakan elemen sup atau sub. Paragraf pada baris 34-35 memuat sebuah elemen em, yang mengindikasikan bahwa isinya perlu ditekankan. Penjelajah web biasanya menampilkan teks pada elemen em dengan huruf miring. Anda juga menggunakan referensi entitas karakter < untuk tanda kurang-dari dan ¼ untuk menampilkan angka ¼ (baris 34).

Selain karakter spesial, dokumen ini juga mengenalkan aturan horisontal, yang diindikasikan oleh tag <hr/> pada baris 20. Hampir semua penjelajah web menginterpretasikan aturan horisontal sebagai suatu baris horisontal dengan sebuah baris kosong di atas dan di bawahnya.

Gambar 1.7 Menyisipkan karakter spesial

1.9 List

Sampai sejauh ini, Anda telah mempelajari beberapa elemen dasar dari XHTML dan atributnya, menciptakan kepala, menggunakan karakter spesial, dan memanfaatkan citra pada dokumen XHTML. Pada bagian ini, akan didiskusikan bagaimana mengorganisir informasi pada sebuah halaman web menggunakan list. Pada bagian selanjutnya, akan dikenalkan fitur lain untuk mengorganisi informasi, yang dinamakan dengan tabel. Gambar 1.8 menampilkan teks dengan list atau daftar tak-terurut. Elemen list tak-terurut ul menciptakan sebuah list dimana di dalamnya setiap item diawali dengan simbol peluru. Setiap entri pada list tak-terurut (elemen ul pada baris 17) merupakan sebuah elemen li (list item) pada baris 19-22. Hampir semua penjelajah web menginterpretasikan setiap elemen li pada sebuah baris baru dengan simbol peluru diindentasi dengan jarak tertentu.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Link-Link</title>

</head>

<body>

<h1>Berikut adalah beberapa situs favorit saya</h1>

<p><strong>Klik salah satu nama untuk pergi ke halaman tersebut.</strong></p>

<ul>

<li><a href = "http://www.kompas.com">Kompas</a></li>

<li><a href = "http://www.w3.org">W3C</a></li>

<li><a href = "http://www.yahoo.com">Yahoo!</a></li>

<li><a href = "http://www.cnn.com">CNN</a></li>

</ul>

</body>

</html>

Gambar 1.8 Daftar tak-terurut yang memuat beberapa hyperlink

List Bersarang

List dapat dibuat bersarang untuk merepresentasikan relasi hierarkis. Gambar 1.9 mendemonstrasikan list bersarang dan list terurut. Elemen list terurut ol menciptakan sebuah list (daftar) dimana di dalamnya setiap item diawali dengan sebuah angka.

Penjelajah web akan mengindentasi setiap list bersarang untuk mengindikasikan relasi hierarkis. List terurut pertama diawali pada baris 30. Item-item pada sebuah list terurut dienumerasi menjadi satu, dua, tiga, dan seterusnya. List terurut bersarang dienumerasi dengan cara yang sama. Item-item pada list tak-terurut terluar (baris 16) diawali bulatan hitam. Item-item list yang bersarang di dalam list tak-terurut pada baris 16 diawali dengan bulatan kosong.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Beberapa List</title>

</head>

<body>

<h1>Fitur-Fitur Terbaik dari Internet</h1>

<ul>

<li>Anda dapat menemui orang baru dari negara-negara

di dunia.</li>

<li>

Anda dapat mengakses media baru yang telah menjadi publik:

<ul>

<li>Permainan-Permainan Baru</li>

<li>Aplikasi-aplikasi baru

<ol>

<li>Untuk bisnis</li>

<li>Untuk kesenangan</li>

</ol>

</li>

<li>Berita selama dua puluh empat jam sehari</li>

<li>Mesin pencari</li>

<li>Belanja</li>

<li>Pemrograman

<ol>

<li>XML</li>

<li>Java</li>

<li>XHTML</li>

<li>Skrip</li>

<li>Bahasa pemrograman yang baru</li>

</ol>

</li>

</ul>

</li>

<li>Link-link</li>

<li>Tetap berhubungan dengan kawan lama</li>

<li>Teknologi masa depan!</li>

</ul>

</body>

</html>

Gambar 1.9 List bersarang dan terurut

1.10 Tabel

Tabel seringkali dipakai untuk mengorganisir data ke dalam baris dan kolom. Contoh pertama (Gambar 1.0) menciptakan sebuah tabel dengan enam baris dan dua kolom untuk menampilkan informasi harga buah.

Tabel didefinisikan dengan elemen table (baris 15-62). Baris 15-17 menetapkan tag awal untuk sebuah elemen table yang memiliki beberapa atribut. Atribut border menetapkan lebar batas tabel dalam piksel. Untuk menciptakan sebuah tabel tanpa batas, Anda bisa menetapkan border menjadi “0”. Contoh ini menugaskan nilai “40%” kepada atribut width untuk menetapkan lebar tabel menjadi 40% dari lebar penjelajah. Pengembang web dapat pula menetapkan atribut width menjadi angka tertentu (merepresentasikan jumlah piksel). Anda dapat mencoba mengubah ukuran jendela penjelajah untuk melihat bagaimana lebar jendela mempengaruhi lebar tabel.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Sebuah tabel XHTML sederhana</title>

</head>

<body>

<table border = "1" width = "40%"

summary = "Tabel ini menyediakan informasi seputar

harga buah">

<caption><strong>Harga Buah</strong></caption>

<thead>

<tr>

<th>Harga</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Total</th>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

<td>Oranye</td>

</tr>

<tr>

<td>Pisang</td>

</tr>

<tr>

<td>Nenas</td>

</tr>

</tbody>

</table>

</body>

</html>

Gambar 1.10 Menciptakan sebuah tabel sederhana

Seperti yang diimplikasikan oleh namanya, atribut summary (baris 16-17) menjelaskan isi tabel. Perangkat alat bantu suara menggunakan atribut ini untuk membuat tabel lebih mudah diakses bagi yang memiliki kekurangan dalam penglihatan. Elemen caption (baris 21) menjelaskan isi tabel dan menolong penjelajah berbasis-teks dalam menginterpretasikan data tabel. Teks di dalam tag <caption> diinterpretasikan dan ditempatkan di atas tabel oleh penjelajah web. Atribut summary dan elemen caption merupakan dua fitur XHTML yang membuat halaman web lebih mudah diakses bagi penyandang kekurangan.

Sebuah tabel memiliki tiga bagian yang berbeda, yaitu head, body, dan foot. Bagian kepala (sel kepala) didefinisikan di dalam sebuah elemen thead (baris 25-30), yang memuat informasi kepala seperti nama kolom. Setiap elemen tr (baris 26-29) mendefinisikan sebuah baris tabel. Setiap kolom pada bagian kepala didefinisikan dengan elemen th. Penjelajah web menyejajarkan ke tengah teks yang diformat dengan elemen th dan menampilkannya dengan huruf tebal. Elemen kepala tabel bersarang di dalam elemen-elemen baris tabel (baris 27-28).

Bagian tubuh, atau tubuh tabel, memuat data utama dari tabel. Tubuh tabel (baris 43-60) didefinisikan di dalam elemen tbody. Di dalam tubuh, setiap elemen tr menetapkan satu baris. Sel-sel data memuat potongan-potongan data dan didefinisikan dengan elemen td (data tabel) pada tiap baris.

Bagian kaki (baris 34-39) didefinisikan dengan sebuah elemen tfoot (kaki tabel). Teks yang ditempatkan di dalam kaki umumnya memuat hasil perhitungan dan catatan kaki. Sama seperti bagian lain, bagian kaki memuat baris-baris tabel, dan tiap baris dapat memuat beberapa sel. Sama seperti bagian kepala, sel-sel pada bagian kaki diciptakan menggunakan elemen th, bukan elemen td seperti yang digunakan di dalam tubuh tabel. Perhatikan bahwa kaki tabel harus berada di atas bagian tubuh di dalam kode, tetapi kaki tabel ditampilkan di bagian bawah tabel.

Menggunakan rowspan dan colspan

Gambar 1.10 mengeksplorasi struktur sebuah tabel. Gambar 1.11 menyajikan satu contoh tabel lain dan mengintroduksi dua atribut baru yang memampukan Anda untuk membangun tabel yang lebih kompleks.

Tabel diawali pada baris 15. Sel-sel tabel ditetapkan agar data dapat dimuat di dalamnya. Pembuat dokumen dapat menciptakan sel-sel data yang lebih besar menggunakan atribut rowspan dan colspan. Nilai-nilai yang ditugaskan kepada kedua atribut ini menetapkan jumlah baris dan jumlah kolom yang ditempati oleh sebuah sel. Elemen th pada baris 23-26 menggunakan atribut rowspan = “2” untuk memampukan sel agar dapat memuat sebuah gambar unta. Elemen th pada baris 29-32 memuat atribut colspan = “4” untuk memperlebar sel kepala (memuat Perbandingan unta dan Tanggal perbandingan 11/2013) yang menempati empat sel.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Table</title>

</head>

<body>

<h1>Halaman Contoh Tabel</h1>

<table border = "1">

<caption>Berikut adalah tabel contoh yang lebih kompleks.</caption>

<thead>

<tr>

<th rowspan = "2">

<img src = "unta.gif" width = "205"

height = "167" alt = "Gambar seekor unta" />

</th>

<th colspan = "4">

<h1>Perbandingan unta</h1>

<p>Tanggal perbandingan 11/2013</p>

</th>

</tr>

<tr>

<th># Gundukan</th>

<th>Daerah asal</th>

<th>Meludah?</th>

<th>Menghasilkan Wool?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Unta (bactrian)</th>

<td>Afrika/Asia</td>

</tr>

<tr>

<th>Llamas</th>

<td>Pegunungan Andes</td>

</tr>

</tbody>

</table>

</body>

</html>

Gambar 1.11 Tabel XHTML yang lebih kompleks

1.11 Formulir

Ketika menjelajah situs web, pengguna sering memerlukan informasi seperti katakunci pencarian, alamat e-mail, atau kode pos. XHTML menyediakan sebuah mekanisme, yang disebut dengan formulir (form), untuk mengumpulkan data dari seorang pengguna.

Data yang dimasukkan pengguna pada sebuah halaman web biasanya dikirim ke web server yang menyediakan akses terhadap sumberdaya situs (misalnya, dokumen XHTML, citra, dan lainnya). Sumberdaya ini ditempatkan pada mesin yang sama dengan web server atau pada sebuah mesin yang dapat diakses web server melalui jaringan. Ketika penjelajah web meminta halaman web atau file yang berada pada sebuah server, server tersebut akan memproses permintaan tersebut dan memberika sumberdaya yang diminta. Permintaan itu memuat nama dan lintasan (path) dari sumberdaya dan metode komunikasi yang diperlukan (dikenal dengan protokol). Dokumen XHTML menggunakan HTTP (Hypertext Transfer Protocol).

Gambar 1.12 merupakan sebuah formulir sederhana yang mengirimkan data ke web server, yang melewatkan data formulir ke program. Program kemudian memproses data yang diterima dari web server dan memberikan informasi kepada web server. Web server kemudian mengirimkan informasi tersebut sebuah dokumen XHTML kepada penjelajah web.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Formulir</title>

</head>

<body>

<h1>Formulir Umpan-Balik</h1>

<p>Silahkan mengisi formulir ini untuk

membantu kami dalam memperbaiki situs ini.</p>

<form method = "post" action = "">

<p>

<input type = "hidden" name = "recipient"

value = "rismon@rismon.com" />

<input type = "hidden" name = "subject"

value = "Formulir Umpan-Balik" />

<input type = "hidden" name = "redirect"

value = "utama.html" />

</p>

<p><label>Nama:

<input name = "name" type = "text" size = "25"

maxlength = "30" />

</label></p>

<p>

</p>

</form>

</body>

</html>

Gambar 1.12 Formulir dengan bidang-bidang teks tersembunyi dan sebuah kotak teks

Formulir dapat memuat komponen visual dan komponen tak-visual. Komponen visual mencakup tombol dan komponen GUI lain yang dapat dipakai pengguna dalam berinteraksi. Komponen tak-visual, yang dikenal dengan masukan tersembunyi, menyimpan sembarang data yang Anda tetapkan, seperti alamat e-mail dan nama file dokumen XHTML yang berperan sebagai hyperlink. Formulir didefinisikan pada baris 21-46 menggunakan sebuah elemen form.

Atribut method (baris 21) menetapkan bagaimana data formulir dikirim ke web server. Penggunaan method = “post” akan menempelkan data formulir pada permintaan penjelajah web, yang memuat HTTP dan URL dari sumberdaya yang diminta. Metode pelewatan data kepada server ini disebut dengan pelewatan transparan, dimana pengguna tidak dapat melihat data setelah formulir diserahkan. Nilai lain yang mungkin diberikan, method = “get”, menempelkan data formulir secara langsung di akhir URL dari skrip, dimana data tersebut masih dapat terlihat pada bidang Address.

Atribut action di dalam tag <form> pada baris 21 menetapkan URL dari sebuah skrip pada web server yang akan dipanggil untuk memproses data formulir.

Baris 25-44 mendefinisikan enam elemen input yang menetapkan data untuk disediakan bagi skrip yang memproses formulir (juga dikenal dengan form handler). Ada beberapa tipe elemen masukan. Tipe masukan ditentukan oleh atribut type. Formulir ini menggunakan masukan text, masukan submit, masukan reset, dan tiga masukan hidden.

Masukan text pada baris 35-36 menyisipkan sebuah kotak teks pada formulir. Pengguna dapat mengetikkan data pada kotak teks tersebut. Elemen label (baris 34-37) menyediakan informasi seputar tujuan elemen input. Atribut size dari elemen input menetapkan jumlah karakter yang terlihat pada kotak teks. Atribut opsional, maxlength, membatasi jumlah karakter yang dimasukkan ke dalam kotak teks. Pada kasus ini, pengguna tidak diijinkan untuk mengetikkan lebih dari 30 karakter.

Dua elemen input pada baris 43-44 menciptakan dua tombol. Elemen masukan submit merupakan sebuah tombol. Ketika tombol submit ditekan, pengguna dikirim ke lokasi yang ditetapkan pada atribut action dari elemen form. Atribut value menetapkan teks yang akan ditampilkan pada tombol. Elemen masukan reset mengijinkan pengguna untuk menetapkan-ulang semua elemen form menjadi nilai defaultnya. Atribut value dari elemen masukan reset menetapkan teks yang akan ditampilkan pada tombol (nilai defaultnya adalah Reset jika Anda mengabaikan atribut value).

Tiga elemen input pada baris 25-30 memiliki tipe atribut hidden, yang memampukan Anda dalam mengirim data formulir yang tidak dimasukkan oleh seorang pengguna. Tiga masukan tersembunyi tersebut adalah alamat e-mail (tujuan pengiriman data), baris judul e-mail, dan sebuah URL untuk dibuka penjelajah web setelah formulir diserahkan. Dua atribut masukan yang lain adalah name, yang mengidentifikasi elemen input, dan value, yang menyediakan nilai yang akan dikirim ke web server.

Elemen-Elemen Formulir yang lain

Pada contoh sebelumnya, Anda telah melihat elemen-elemen dasar dari sebuah formulir XHTML. Setelah Anda mengetahui struktur umum sebuh formulir, pada Anda akan dikenalkan elemen-elemen dan atribut-atribut untuk menciptakan formulir yang lebih kompleks. Gambar 1.13 memuat sebuah formulir yang meminta pengguna untuk memberikan umpan-balik seputar sebuah situs web.

Pada baris 32, dikenalkan elemen br, yang diinterpretasikan penjelajah sebagai line break. Sembarang markup atau teks yang mengikuti sebuah elemen br akan diinterpretasikan pada baris berikutnya. Sama seperti elemen img, br merupakan contoh lain dari sebuah elemen kosong yang diterminasi dengan slash maju. Anda dapat menambahkan spasi sebelum slash maju untuk meningkatkan keterbacaan skrip.

Elemen textarea (baris 33-34) menyisipkan sebuah kotak teks baris-jamak, yang dinamakan dengan area teks (text area), ke dalam formulir. Jumlah baris ditetapkan dengan atribut rows, dan jumlah kolom (karakter per baris) ditetapkan dengan atribut cols. Pada contoh ini, textarea berukuran empat baris tinggi dan 36 karakter lebar. Untuk menampilkan teks default pada area teks, Anda bisa menempatkan teks di antara tag <textarea> dan tag </textarea>. Teks default dapat ditetapkan di dalam tipe input lain, seperti kotak teks, menggunakan atribut value.

Masukan password pada baris 41 menyisipkan sebuah kotak katakunci dengan size (jumlah karakter maksimum yang diijinkan) terspesifikasi. Kotak katakunci memampukan pengguna untuk memasukkan informasi sensitif, seperti nomor kartu kredit dan katakunci, dengan “menyamarkan” informasi tersebut menggunakan asterisk. Masukan nilai aktual, bukan karakter-karakter yang menyamarkan masukan, dikirim ke web server.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Formulir Lebih Kompleks</title>

</head>

<body>

<h1>Formulir Umpan-Balik</h1>

<p>Silahkan isi formulir ini untuk membantu

kami dalam memperbaiki situs ini.</p>

<form method = "post" action = "">

<p>

<input type = "hidden" name = "recipient"

value = "rismon@rismon.com" />

<input type = "hidden" name = "subject"

value = "Formulir Umpan-Balik" />

<input type = "hidden" name = "redirect"

value = "utama.html" />

</p>

<p><label>Nama:

<input name = "name" type = "text" size = "25" />

</label></p>

<p><label>Komentar:<br />

<textarea name = "comments"

rows = "4" cols = "36">Masukkan komentar di sini.</textarea>

</label></p>

<p><label>Alamat E-mail:

<input name = "email" type = "password" size = "25" />

</label></p>

<p>

<strong>Hal-hal yang Anda suka:</strong><br />

<label>Perancangan situs

<input name = "suka" type = "checkbox"

value = "Perancangan" /></label>

<label>Link-Link

<input name = "suka" type = "checkbox"

value = "Link" /></label>

<label>Kemudahan penggunaan

<input name = "suka" type = "checkbox"

value = "Mudah" /></label>

<label>Citra

<input name = "suka" type = "checkbox"

value = "Citra" /></label>

<label>Kode sumber

<input name = "suka" type = "checkbox"

value = "Kode" /></label>

</p>

<p>

<strong>Bagaimana Anda menemukan situs kami?:</strong><br />

<label>Mesin pencari

<input name = "carisitus" type = "radio"

value = "mesin pencari" checked = "checked" /></label>

<label>Link dari situs lain

<input name = "carisitus" type = "radio"

value = "link" /></label>

<label>Situs Rismon.com

<input name = "carisitus" type = "radio"

value = "rismon.com" /></label>

<label>Referensi pada buku

<input name = "carisitus" type = "radio"

value = "buku" /></label>

<label>Lainnya

<input name = "carisitus" type = "radio"

value = "lain" /></label>

</p>

<p>

<label>Beri Nilai Situs Kami:

<select name = "nilai">

<option selected = "selected">Menakjubkan</option>

<option>10</option>

<option>9</option>

<option>8</option>

<option>7</option>

<option>6</option>

<option>5</option>

<option>4</option>

<option>3</option>

<option>2</option>

<option>1</option>

<option>Memalukan</option>

</select>

</label>

</p>

<p>

<input type = "submit" value = "Serahkan" />

<input type = "reset" value = "Hapus" />

</p>

</form>

</body>

</html>

Gambar 1.13 Formulir menggunakan pelbagai komponen

Baris 47-61 mengenalkan elemen form, checkbox. Kotak periksa memampukan pengguna untuk menyeleksi dari beberapa opsi. Ketika pengguna menyeleksi sebuah kotak periksa, tanda periksa (centang) akan muncul di dalamnya. Setiap masukan “checkbox” menciptakan sebuah kotak periksa yang baru. Kotak periksa dapat dipakai secara individual atau dalam grup. Kotak-kotak periksa yang berada pada suatu grup ditugasi name sama (pada kasus ini, “suka”).

Selain kotak periksa, disajikan pula dua cara dalam memampukan pengguna untuk membuat pilihan-pilihan. Pada contoh ini, dikenalkan dua tipe masukan yang baru. Tipe pertama adalah tombol radio (baris 71-85) yang ditetapkan dengan tipe “radio”. Tombol radio mirip dengan kotak periksa, kecuali bahwa hanya satu tombol radio pada suatu grup yang dapat diseleksi. Tombol-tombol radio pada sebuah grup memiliki atribut name yang sama dan dikenali dengan atribut value masing-masing. Pasangan atribut-nilai checked = “checked” (baris 73) mengindikasikan tombol radio yang diseleksi pada kondisi awal. Atribut checked juga dapat diterapkan pada kotak periksa.

Elemen select (baris 94-107) menyediakan sebuah menu drop-down yang dapat diseleksi oleh pengguna. Atribut name mengidentifikasi menu tersebut. Elemen-elemen option (baris 95-106) menambahkan item-item pada menu itu. Atribut selected dari elemen option menetapkan item mana yang awalnya ditampilkan sebagai item terseleksi. Jika tidak ada elemen option yang ditandai sebagai selected, penjelajah web akan menyeleksi option pertama secara default.

1.12 Link Internal

Pada awal bab ini, telah didiskusikan bagaimana melakukan hyperlink dari satu halaman web ke halaman web lain. Gambar 1.14 mengenalkan link internal, sebuah mekanisme yang memampukan pengguna untuk melompat di antara lokasi-lokasi pada dokumen yang sama. Link internal berguna untuk dokumen panjang yang memuat banyak bagian. Pengklikan link internal akan memampukan pengguna untuk menemukan sebuah bagian tanpa perlu menggeser batang penggeser.

Baris 14 memuat sebuah tag dengan atribut id (ditetapkan menjadi “fitur”) untuk hyperlink internal. Untuk melakukan link ke sebuah tag dengan atribut ini di dalam halaman web yang sama, atribut href dari sebuah elemen achor harus memuat nilai atribut id yang diawali dengan tanda pagar (seperti pada #fitur). Baris 56 memuat sebuah hyperlink dengan id fitur sebagai targetnya. Dengan menyeleksi hyperlink ini, penjelajah web akan menggeser jendela penjelajah ke tag h1 pada baris 14.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Link-link Internal</title>

</head>

<body>

<h1 id = "fitur">Fitur-Fitur Terbaik dari Internet</h1>

<p><a href = "#serangga">Pergi ke <em>Serangga Favorit</em></a></p>

<ul>

<li>Anda dapat menemui orang baru dari negara-negara

di dunia.</li>

<li>Anda dapat mengakses media baru yang telah menjadi publik:

<ul>

<li>Permainan-Permainan Baru</li>

<li>Aplikasi-aplikasi baru

<ul>

<li>Untuk bisnis</li>

<li>Untuk kesenangan</li>

</ul>

</li>

<li>Berita selama dua puluh empat jam sehari</li>

<li>Mesin pencari</li>

<li>Belanja</li>

<li>Pemrograman

<ul>

<li>XHTML</li>

<li>Skrip</li>

<li>Bahasa pemrograman yang baru</li>

</ul>

</li>

</ul>

</li>

<li>Tetap berhubungan dengan kawan lama</li>

<li>Teknologi masa depan!</li>

</ul>

<h1 id = "serangga">Tiga Serangga Favoritku</h1>

<p>

<a href = "#fitur">Pergi ke <em>Fitur-Fitur Favorit</em></a>

</p>

<ol>

<li>Nyamuk</li>

<li>Kecoa</li>

</ol>

</body>

</html>

Gambar 1.14 Hyperlink internal untuk membuat halaman web lebih mudah dinavigasi

1.13 Elemen meta

Mesin pencari biasanya melakukan katalogisasi terhadap situs-situs dengan menjejak link dari halaman ke halaman dan menyimpan informasi identifikasi dan klasifikasi untuk tiap halaman. Salah satu cara mesin pencari dalam melakukan katalogisasi halaman adalah dengan membaca isi dari elemen-elemen meta pada tiap halaman, yang memuat informasi tentang sebuah dokumen.

Dua atribut penting dari elemen meta adalah name, yang mengidentifikasi tipe dari elemen meta, dan content, yang menyediakan informasi yang dapat dipakai oleh mesin pencari dalam mengkatalogisasi halaman. Gambar 1.15 mengenalkan elemen meta.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Selamat Datang</title>

<meta name = "keywords" content = "halaman web, perancangan,

XHTML, tutorial, personal, help, index, form,

kontak, umpan balik, list, rismon, javascript" />

<meta name = "description" content = "Situs web ini akan

membantu Anda belajat dasar-dasar XHTML dan perancangan halaman web

melalui penggunaan contoh-contoh interaktif dan

instruktif." />

</head>

<body>

<h1>Selamat Datang ke Situs kami!</h1>

<p>Anda telah merancang situs ini untuk menjelaskan tentang keindahan

dari <strong><em>XHTML</em></strong>. <em>XHTML</em> lebih baik

daripada <em>HTML</em> dalam menyajikan data kompleks

pada internet. <em>XHTML</em> menerapkan sintaks

ketat dari XML untuk memastikan kevalidan skrip. Anda akan

mengetahui banyak fitur menakjubkan dari

<em>XHTML.</em></p>

<p>Selamat menikmati situs kami!</p>

</body>

</html>

Gambar 1.15 Elemen-elemen meta menyediakan katakunci dan deskripsi sebuah halaman

Baris 13-15 mendemontrasikan elemen meta, “keywords”. Atribut content dari sebuah elemen meta semacam itu menyediakan daftar katakunci yang menjelaskan sebuah halaman. Setiap katakunci ini akan dibandingkan pada saat permintaan pencarian dilakukan. Jadi, pencantuman elemen meta dan informasi contentnya dapat mengarahkan pembaca ke situs Anda.

Baris 16-19 mendemonstrasikan elemen meta, “description”. Atribut content dari elemen meta semacam itu menyediakan tiga sampai empat baris penjelasan tentang sebuah situs, yang dituliskan dalam format kalimat. Mesin pencari juga menggunakan deskripsi ini untuk mengkatalogisasi situs Anda dan (kadangkala) menampilkan informasi ini sebagai bagian dari hasil pencarian.

Algoritma, Struktur Data, dan Pemrograman

Menu

Saturday, December 24, 2016

Bab 1. Pemrograman Internet

No comments:

Post a Comment