Modul 4 STMIK IKMI CIREBON Oleh Dita rizki amalia

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

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

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

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

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

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

1) Image Contoh 1 (Image size) Kegiatan Belajar

1) Image Contoh 2 (Image align) Kegiatan Belajar

1) Image Contoh 3 (Image Border) Kegiatan Belajar

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

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

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

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

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

2) Link a) Link Relatif Output Kegiatan Belajar

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 www.yahoo.co.id yang berarti menampilkan homepage Yahoo yaitu ditulis : <a href=”http://www.yahoo.co.id”>Website Yahoo</a>. Kegiatan Belajar

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

2) Link c) Link Halaman Contoh Kegiatan Belajar

2) Link c) Link Halaman Output Kegiatan Belajar

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

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

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

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

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

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

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

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

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

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

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

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 layout link dan image dengan html dan css Kegiatan Belajar

6. Kunci Jawaban tes formatif

6. Kunci Jawaban tes formatif

6. Kunci Jawaban tes formatif

6. Kunci Jawaban tes formatif

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