Modul 7 STMIK IKMI CIREBON Oleh Dita rizki amalia.

Presentasi berjudul: "Modul 7 STMIK IKMI CIREBON Oleh Dita rizki amalia."— Transcript presentasi:

1 Modul 7 STMIK IKMI CIREBON Oleh Dita rizki amalia

2 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

3 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

4 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

5 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

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

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

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

9 3)CSS list Contoh Kegiatan Belajar

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

11 4)CSS link Contoh : Kegiatan Belajar

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

13 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

14 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

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

16 6. Kunci Jawaban tes formatif

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

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