Modul Praktikum Desain Web 2015

Ukuran: px

Mulai penontonan dengan halaman:

Download "Modul Praktikum Desain Web 2015"

Glenna Tan
6 tahun lalu
Tontonan:

1 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 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.

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.

2 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 . 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

Cobalah semua jenis heading berikut ini untuk mengetahui perbedaannya. Gambar 2.

3 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

4 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

5 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

6 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

terurut (unordered), dan definisi (definition).

7 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

Atribut ini dapat diisi dengan nama warna misalnya red atau kode heksadesimal misalnya #FFFFFF.

8 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

9 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

10 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

dokumen-dokumen yang mirip

BAB I DASAR-DASAR HTML

BAB I DASAR-DASAR HTML A. KOMPETENSI DASAR Memahami struktur dasar dokumen HTML dan HTML5 Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.