Modul 7 STMIK IKMI CIREBON Oleh Dita rizki amalia

Navigasi menggunakan Markup <ul> <li> <a> Materi Pokok 1. Materi Pokok Navigasi menggunakan Markup <ul> <li> <a> Styling pada markup <ul> <li> <a> untuk menghasilkan navigasi yang menarik

2. Pengantar a. Dalam HTML terdapat tag untuk membuat list, baik berupa unordered list maupun ordered list. Maksud ordered list yaitu list yang setiap itemnya terdapat huruf atau angka yang terurut. Sedangkan unordered list merupakan list yan g tidak terurut, biasanya berupa bulleted list (list dengan simbol tertentu). b. Satu diantara dua tag yang 80%-nya digunakan dalam setiap halaman web adalah <a> selain tag <img>. Tag ini digunakan untuk melompat ke halaman html lain, baik yang berada dalam server bersangkutan maupun di server lain. Segala sesuatu (teks atau gambar) yang diapit dengan tag ini apabila diklik akan membawa user ke halaman lain sesuai attribut href yang digunakan dalam tag tersebut. Pengantar

3. Capaian Pembelajaran Mata Kuliah Kemampuan mengkontruksi Link Navigasi dengan menggunakan markup <ul> <li> <a> Kemampuan mengimplementasikan styling pada markup <ul> <li> <a> menggunakan css Capaian Pembelajaran

4. Kemampuan Akhir Mahasiswa mampu mengkontruksi Link Navigasi dengan menggunakan markup <ul> <li> <a> Mahasiswa mampu mengimplementasikan styling pada markup <ul> <li> <a> menggunakan css Kemampuan Akhir

5. Kegiatan Belajar a. Uraian dan Contoh 1) List Penggunaan ordered list Contoh Kegiatan Belajar

1) List Berikut adalah script untuk menggunakan Unordered List 1) List Berikut adalah script untuk menggunakan Unordered List. Contoh penggunaan Unordered List. Kegiatan Belajar

2)Link Contoh penggunaan tag link <a>: Kegiatan Belajar

3)CSS list Contoh Kegiatan Belajar

3)CSS list Contoh CSS styling pada elemen list : Kegiatan Belajar

4)CSS link Contoh : Kegiatan Belajar

Tuliskan source code dari tampilan berikut: b. Latihan Tuliskan source code dari tampilan berikut: Kegiatan Belajar

c. Rangkuman Untuk membuat halaman web yang lebih baik kita bisa menggunakan kolaborasi dengan css. Dan Untuk menambahkan elemen tersebut maka di bagian styling maka styling untuk link dan list bisa ditambahkan. Kegiatan Belajar

Dengan menggunakan css buatlah script untuk tampilan html berikut ini: d. Tes formatif Dengan menggunakan css buatlah script untuk tampilan html berikut ini: Kegiatan Belajar

e. Umpan Balik dan Tindak Lanjut Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang list dan link baik itu dengan html dan css. Kegiatan Belajar

6. Kunci Jawaban tes formatif

6. Kunci Jawaban tes formatif Contoh CSS styling pada elemen list :

7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT 7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, 2012. [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi