Modul 4 STMIK IKMI CIREBON Oleh Dita rizki amalia.

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

1 Modul 4 STMIK IKMI CIREBON Oleh Dita rizki amalia

2 Penjelasan tentang markup anchor < a href>
Materi Pokok 1. Materi Pokok Penjelasan tentang markup anchor < a href> Penjelasan tentang markup image <img> Implementasi Styling pada anchor dan images tags menggunakan CSS Studi Kasus

3 2. Pengantar Image disini diartikan citra atau gambar, yang digunakan pada suatu homepage untuk mempercantik tampilan sehingga apabila homepage di tampilkan akan banyak menarik pengunjung untuk melihatnya. Suatu image memang memang mempunyai “seribu satu” makna yang setiap orang mempunyai kata yang berbeda dalam menafsirkan suatu citra. Kebanyakan image mempengaruhi proses terbukanya suatu homepage. Oleh sebab itu dibutuhkan image yang mempunyai ukuran kecil, yaitu menggunakan teknik kompresi, sehingga citra dapat dimampatkan sedemikian sehingga menjadi lebih kecil ukuran bytenya dari sebelum dilakukan kompresi. Pengantar

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

5 3. Capaian Pembelajaran Mata Kuliah
Kemampuan mengkonstruksi anchor dan image tag menggunakan HTML 5 Kemampuan melakukan berbagai macam styling pada anchor dan images tag . Capaian Pembelajaran

6 4. Kemampuan Akhir Mahasiswa mampu mengkonstruksi anchor dan image tag menggunakan HTML 5 Mahasiswa mampu Melakukan berbagai macam styling pada anchor dan images tag Kemampuan Akhir

7 5. Kegiatan Belajar a. Uraian dan Contoh 1) Image
Untuk dapat menampilkan image maka digunakan tag <img> diikuti dengan attribut src diikuti nama file image yang akan ditampilkan, selain attribut src, tag <img> memiliki beberapa attribut lain, diantaranya : Mengatur posisi image : align=”bottom | center | top | left | right” Mengatur tinggi image : height=”angka pixel | persen” Mengatur lebar image : width=”angka pixel | persen” Mengatur bingkai image : border=”angka” Menampilkan teks alternatif : bordercolor=”warna” Kegiatan Belajar

8 1) Image Contoh 1 (Image size) Kegiatan Belajar

9 1) Image Contoh 2 (Image align) Kegiatan Belajar

10 1) Image Contoh 3 (Image Border) Kegiatan Belajar

11 1) Image Contoh 4 (Image and Body Background) Kegiatan Belajar

12 1) Image Contoh 5 (Image sebagai Link) Kegiatan Belajar

13 2) Link Link terdiri atas tiga macam: Link Relatif Link Absolut
Link Halaman a) Link Relatif 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. Kegiatan Belajar

14 2) Link a) Link Relatif Contoh : Link 1 Kegiatan Belajar

15 2) Link a) Link Relatif Contoh : Link 2 Kegiatan Belajar

16 2) Link a) Link Relatif Output Kegiatan Belajar

17 2) Link b) Link Absolut Hampir sama dengan link alamat relatif di atas, perbedaannya hanyalah pada alamat yang digunakan, yaitu menggunakan alamat URL. (Uniform Resources Locator), contohnya yang berarti menampilkan homepage Yahoo yaitu ditulis : <a href=” Yahoo</a>. Kegiatan Belajar

18 2) Link c) Link Halaman Berbeda dengan link yang dilakukan di atas, yaitu melompat pada halaman lain selain halamannya sendiri. Berikut ini link dilakukan pada halaman yang sama, dengan syarat bahwa bagian yang akan dilompati melebihi dari satu jendela browser. Kegiatan Belajar

19 2) Link c) Link Halaman Contoh Kegiatan Belajar

20 2) Link c) Link Halaman Output Kegiatan Belajar

21 3) Implementasi Styling pada anchor dan images tags menggunakan CSS
a) Css Image Property “background-image” digunakan untuk menjadikan sebuah file gambar (image) menjadi latar belakang pada sebuah elemen HTML. Sintaks-nya : background-image: url(‘url-file-gambar’); Keterangan : File gambar yang digunakan bisa berupa file *.jpg, *.png ataupun *.gif. Secara default, gambar yang dijadikan background akan ditampilkan berulang, secara horizontal dan vertikal. Url file gambar bisa menggunakan relative path ataupun absolute url. Kegiatan Belajar

22 3) Implementasi Styling pada anchor dan images tags menggunakan CSS a) Css Image Contoh : Edit Declaration untuk Selector “body” pada file CSS, sehingga menjadi seperti berikut : body { background-color:rgb(153,204,255); background-image : url(wallpaper.jpg); } Note : file “wallpaper.jpg” berada dalam folder yang sama dengan file “index.html”, dengan ukuran file 200 x 200 pixel. Kegiatan Belajar

23 3) Implementasi Styling pada anchor dan images tags menggunakan CSS a) Css Image Output:
Kegiatan Belajar

24 3) Implementasi Styling pada anchor dan images tags menggunakan CSS
b) Css Link Link Properties: A:link A:hover A:active Definisi style link: A:link  memberikan efek pada saat normal (unlink) A:hover  memberikan efek pada saat mouse pointer diatas object A:active  memberikan efek setelah event click Kegiatan Belajar

25 3) Implementasi Styling pada anchor dan images tags menggunakan CSS b) Css Link Contoh 1
Kegiatan Belajar

26 3) Implementasi Styling pada anchor dan images tags menggunakan CSS b) Css Link Output
Kegiatan Belajar

27 3) Implementasi Styling pada anchor dan images tags menggunakan CSS b) Css Link Contoh 2
Kegiatan Belajar

28 3) Implementasi Styling pada anchor dan images tags menggunakan CSS b) Css Link Output
Kegiatan Belajar

29 b. Latihan Buatlah Homepage pribadi Anda, dengan menggunakan tag-tag yang sudah Anda pelajari. Minimal terdiri dari 6 (enam) buah file html, termasuk file index atau menu utamanya. Contoh menu : Home, Profil, Galery, Cerita² dan lain sebagainya. Kegiatan Belajar

30 c. Rangkuman Image memiliki beberapa pengaturan yang biasa digunakan yaitu: 1) Image size 2) Image Align 3) Image Border 4) Image Background 5) Image Link Sedangkan pada css nya menjadi: body { background-color:rgb(153,204,255); background-image : url(wallpaper.jpg); } Kegiatan Belajar

31 c. Rangkuman Link terdiri dari tiga jenis yaitu: a) Link Relatif b) Link Absolut c) Link Halaman Sedangkan pada css nya memiliki properti tambahan 1) A:link 2) A:hover 3) A:active Kegiatan Belajar

32 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

33 e. Umpan Balik dan Tindak Lanjut
Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang layout link dan image dengan html dan css Kegiatan Belajar

34 6. Kunci Jawaban tes formatif

35 6. Kunci Jawaban tes formatif

36 6. Kunci Jawaban tes formatif

37 6. Kunci Jawaban tes formatif

38 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