2 BAB II BASIC HTML5 ELEMENT 21 IDENTITAS Kajian Web Design menggunakan HTML5 dan CSS3 Topik Teknik dasar scripting HTML5 Kompetensi Utama 1 Mengetahui penggunaan script HTML5 dan CSS3 2 Penggunaan Link dan Image HTML Lama Kegiatan Praktikum 1 Pertemuan Terbimbing : 2 x 20 menit 2 Kegiatan Mandiri : 2 x 100 menit Parameter Penilaian 1 Jurnal Pengamatan 2 Tugas Akhir Referensi Tambahan 1 Learning Web Design 5 th Edition, Jennifer Niederst Robbins H a l 13
22 PERTANYAAN PENDAHULUAN Kerjakan tugas pendahuluan ini diawal proses praktikum Waktu pengerjaan maksimal 10 menit 1 Sebutkan 10 Tag HTML yang Anda ketahui beserta kegunaannya? 2 Sebutkan 8 Attibute & value HTML yang Anda ketahui, dan berikan contoh penggunaanya? H a l 14
23 PRAKTIK 231 Exercise 1: HTML Text Element Latihan ini berguna untuk membimbing Anda mengetahui penggunaan element HTML untuk kebutuhan mark up TEXT Fitur ini sangat penting karena hampir keseluruhan dari konten web menyajikan informasi dalam bentuk text atau tulisan Sebelum praktikum dimulai, Anda harus sudah memiliki buku referensi yang diwajibkan dikelas yaitu Learning Web Design 5th edition, Jennifer Niederst Robbins Beberapa element formatting text yang umum digunakan adalah sebagai berikut, a Paragraph Element ini umum digunakan untuk memasukkan konten text berupa narasi pada tampilan web Cara penggunaan tag ini sama seperti penggunaan paragraph pada penulisan text Syntaks : <p>serif typefaces have small slabs at the ends of letter strokes In general, serif fonts can make large amounts of text easier to read</p> Contoh Atribut tag paragraf adalah : align : mengatur perataan teks b Heading Element Heading digunakan sama seperti pada formatting teks, yaitu untuk membuat format heading Missal pada bagian judul, sub judul, item judul dan seterusnya Pada umumnya bentuk format teks heading lebih besar dan tebal dari format teks biasa Syntaks : <h1>judul Tulisan</h1> <h2>sub Judul Paragraf</h2> <h3>sub Item Paragraf</h3> Contoh Atribut tag paragraf adalah : align : mengatur perataan teks c List & Numbering Pengunaan list sangat dibutuhkan untuk menyajikan informasi data secara berurutan Pada penggunaan formatting text terdapat 2 jenis list yaitu yang menggunakan urutan angka atau abjad (tag <ol>) dan list bullet (tag <ul>) Syntaks : <ol> <li>d4 Sistem Multimedia</li> <li>d3 Komputerisasi Akuntansi</li> <li>d3 Teknik Komputer</li> <li>d3 Perhotelan</li> </ol> H a l 15
Contoh penyajian informasi dalam bentuk List, <ol> dan <ul> d Div & Span Element Khusus untuk beberapa element tag ini umumnya digunakan untuk mempermudah pengaturan layout pada formatting text Berikut ini beberapa tag yang umum digunakan - <div> - <span> - <hr> - <pre> e Text Style konten Pada penggunaan script HTML5 dikenal beberapa tag tambahan untuk pengaturan konten pada halaman web Hal ini merupakan standar baru yang digunakan untuk mempermudah mesin pencari pada web mengenali bagian informasi text pada halaman web Berikut ini beberapa tag yang bisa digunakan, - <header> - <section> - <article> - <aside> - <nav> H a l 16
2311 Soal, Langkah Penyelesaian dan Solusi Lengkap Permasalahan/Soal Contoh diatas adalah tampilan layout web yang menggunakan penerapan formating text memudahkan penyajian informasi Anda bisa mengamati bagaimana informasi disajikan dengan tata tulis yang rapih dan teratur, sehingga memudahkan pembaca untuk memahami konten dari informasi tersebut Buatlah tampilan semirip mungkin dengan layout konten Wikipedia tersebut (tanpa menggunakan CSS) Perhatikan penggunaan beberapa tag berikut ini, - Heading - Horizontal line - Paragraph - Bold element - List numbering/ordered Silahkan buat halaman html tersebut dengan nama, wiki-samplehtml H a l 17
232 Exercise 2: Penggunaan Link dan Image Pada bagian ini akan dibahas mengenai penggunaan link page pada halaman web, dan penggunaan image pada tampilan web sederhana a HTML script Image - Sediakan file gambar di dalam folder Modul 1, beri nama gambarjpg - Buka Notepad++ - Tuliskan syntaks berikut diantara tag BODY : <img src="gambarjpg" border= 2 width="50" height="50" align="left" />Gambar di samping kiri<br> Gambar di tengah <img src="gambarjpg" width="50" height="50" align="middle" /> Gambar di tengah<br> <img src="gambarjpg" width="50" height="50" align="right" />Gambar di samping kanan - Simpan file sebagai imagehtml - Buka file menggunakan browser - Hasilnya : b HTML script Hyperlink Bagian ini akan membuat 2 (dua) buah file, dan dibaca dengan teliti - Buka Notepad++ - Tuliskan syntaks berikut diantara tag BODY : <a href="hyperlink2html" target="_top">menuju halaman 2</a> H a l 18
- Simpan file sebagai hyperlink1html - Buka kembali Notepad++, tuliskan syntaks berikut diantara tag BODY : SMH2D3 Web Programming <a href="hyperlink1html" target="_top"> Kembali ke halaman 1</a> - Simpan file sebagai hyperlink2html - Buka file hyperlink1html kemudian klik teks pada dokumen - Hasilnya : H a l 19
2321 Soal, Langkah Penyelesaian dan Solusi Lengkap Permasalahan/Soal A Hyperlink antar Page Buatlah direktori pada computer Anda dengan hirarki seperti gambar berikut ini, Kemudian buatlah tampilan web untuk 4 halaman web berikut ini, - Indexhtml - Introhtml - Foodhtml - Moneyhtml Langkah berikutnya Anda diminta untuk membuat link pada setiap halaman web yang telah dibuat diatas, agar setiap halaman web tersebut dapat saling terhubung Gunakan teknik relative path pada penggunaan link tersebut Dan jangan lupa untuk melakukan settingan target link, dengan menggunakan attribute target B Image HTML Langkah berikutnya Anda diminta untuk membuat 2 image dengan format png pada direktori images Kemudian tampilan image tersebut pada page Foodhtml dan Introhtml Perhatikan penggunaan attribute image berikut ini: src, alt, width, height, title, dan usemap Gunakan teknik relative path untuk menyajikan source dari image tersebut H a l 20
2322 Pengamatan Dari hasil percobaan pada Latihan kedua diatas, Anda akan menngamati lebih rinci penerapan dari teknik Penggunaan Link page dan Image pada halaman web Anda perlu untuk memperhatikan kembali berbagai attribute pada kedua fungsionalitas tersebut 24 TUGAS AKHIR 1 Jelaskan minimal 20 Tag HTML yang Anda ketahui berkaitan dengan formatting text dan element page untuk link atau image Untuk masing-masing Tag yang Anda jelaskan tersebut silahkan berikan contoh penerapan dan contoh pengunaan minimal 2 Attribute 2 Buatlah tampilan web sederhana dengan mencontek dari tampilan web berita pada referensi web berikut, a Detikcom b Kompascom c Cnnindonesiacom d Republikacoid Anda diminta untuk menerapkan minimal 10 Tag HTML pada formatting tulisan yang Anda buat, dan sertakan juga penggunaan Image pada tampilan tulisan tersebut 25 RESUME 1 Mahasiswa diharapkan telah memahami teknik pengembangan web page sederhana 2 Mahasiswa dapat mengimplementasikan Penggunaan Tag HTML5 yang berkaitan dengan pengembangan Text, link dan Image 3 Memahami penggunaan Tag Sederhana pada halaman web HTML5 251 Jurnal Pengamatan Selesaikan contoh kasus, kemudian jawablah pertanyaan dan diskusi yang terdapat pada bagian pengamatan dan tugas Akhir H a l 21