Modul Praktikum Desain Web
advertisement
Modul Praktikum Desain Web 2015 MODUL 1 DASAR-DASAR HTML A. TUJUAN PRAKTIKUM Melalui praktikum Dasar-dasar HTML, diharapkan mahasiswa dapat memiliki kompetensi, antara lain: 1. Memahami struktur dasar dokumen HTML. 2. Membuat dokumen HTML yang baik dan benar. 3. Mengaplikasikan elemen-elemen dasar untuk menampilkan informasi secara kreatif. B. ALOKASI WAKTU PRAKTIKUM 3 SKS (3x50 menit) C. ALAT DAN BAHAN Persiapkan PC/laptop yang digunakan untuk praktikum. Pastikan software aplikasi text editor atau code editor (notepad++, sublime, dll) sudah terinstall dan siap digunakan. D. DASAR TEORI 1. HTML, XHTML, dan HTML5 HTML (Hypertext Markup Language) merupakan sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web. Pada awal tahun 2000, W3C (World Wide Web Consortium) membuat perubahan besar melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan ekstensibilitas XML (eXtensible Markup Language) ke HTML. HTML versi terbaru adalah HTML5. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. 2. Struktur Dokumen HTML Sebuah dokumen HTML memiliki empat bagian, antara lain: a. Diawali dengan tag <html> dan diakhiri dengan komplemennya, yakni tag </html> tag. b. Dalam tag <html> … </html>, terdapat tag <head> dan </head> yang digunakan untuk menyatakan informasi mengenai dokumen HTML. c. Dalam tag <html> … </html>, terdapat tag <body> dan </body>: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML. 1 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 d. Dalam tag <head> … </head>, tag <title> dan </title>: digunakan untuk menambahkan title di title bar browser. Selain itu, perlu diperhatikan adalah untuk penulisan komentar. Di HTML, komentar dinyatakan dengan tag <!-- dan diakhiri dengan tag -->. E. LATIHAN 1. Membuat Dokumen HTML Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut: a. Buka editor teks. b. Ketikkan teks (kode-kode HTML) berikut: c. Simpan dokumen HTML dengan nama COBA1.html dan letakkan di lokasi direktori web, misal C:\xampp\htdocs. Perhatikan, www merupakan direktori web dan sebaiknya buat subdirektori di dalamnya. Cara ini berguna ketika web Anda merupakan file PHP, sebagai latihan, prosedur ini perlu dilakukan. Sebenarnya file HTML bisa disimpan dimana saja. d. Untuk mengetahui hasil pembuatan dokumen HTML, klik ganda file yang telah Anda buat. Hasilnya akan terlihat seperti Gambar 1. Gambar 1. Tampilan halam web 2 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 2. Format Teks HTML menyediakan berbagai elemen yang dapat dimanfaatkan pemformatan teks. a. Heading Heading didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana n menyatakan tipe dengan nilai 1-6. Cobalah semua jenis heading berikut ini untuk mengetahui perbedaannya. Gambar 2. Tampilan heading 1-6 Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks. <body> <h1 align="right">Heading 1</h1> <h2 align="left">Heading 2</h2> <h3 align="center">Heading 3</h3> </body> 3 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 Gambar 2. Jenis pengaturan heading b. Paragraf Dalam konteks HTML, paragraf direpresentasikan melalui tag <p>. Tag <p> sebenarnya merupakan tag pasangan, meski dalam implementasinya kerap kali diabaikan. 4 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 Gambar 3.Penggunaan paragraf c. Preformatted Text Kita bisa memanfaatkan keberadaan tag <pre>. Tag ini akan menampilkan teks dengan font Courier dan tetap mempertahankan spasi serta baris baru. 5 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 Gambar 4.Penggunaan Preformatted Text Untuk melihat perbedaannya, hilangkan tag <pre> kemudian perhatikan hasilnya. d. Garis Horizontal Di HTML, garis horizontal direpresentasikan melalui tag <hr />. Meskipun kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit berbeda, namun pada hakekatnya mencerminkan sebuah bentuk garis horizontal. 6 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 Gambar 5.Menggunakan garis horizontal e. Menggunakan List HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered), dan definisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakan melalui tag <li> berpasangan—yang merepresentasikan item-item list. 7 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 Gambar 6.Menggunakan list f. Pewarnaan Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag <body>. Atribut ini dapat diisi dengan nama warna—misalnya red— atau kode heksadesimal—misalnya #FFFFFF. Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang memungkinkan kita melakukan pewarnaan. Sama seperti bgcolor, nilai atribut ini juga dapat berupa nama warna atau kode heksadesimal. 8 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 Gambar 7. Warna pada background dan font g. Menyisipkan Gambar Selain teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk keperluan ini, HTML menyediakan tag <img> yang didukung dengan sejumlah atribut. 9 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA Modul Praktikum Desain Web 2015 Gambar 8. Penggunaan gambar pada HTML F. TUGAS PRAKTIKUM Buatlah halaman HTML yang menggabungkan 7 komponen dasar HTML (Heading, Paragraf, Preformatted Text, Garis Horizontal, List, Warna, Gambar) dalam satu halaman file HTML. Be creative 10 Retno Indah R.,S.Pd.,M.Pd. | FILKOM, UNIVERSITAS BRAWIJAYA