List dan Image pada HTML 1/13/2019 Cascading Style Sheet PK&TI 2C (Minggu ke-12) Rr. Artiana Krestianti 1/13/2019 SAP PK&TI 2C Artiana Krestianti
List dan Image pada HTML 1/13/2019 Pendahuluan Pada saat kita ingin menampilkan beberapa tulisan dengan jenis huruf yang sama atau dengan warna yang sama di beberapa tempat, maka kita harus menuliskan tag html yaitu <font> secara berulang-ulang di beberapa tempat. Hal tersebut merupakan pekerjaan yang melelahkan. 1/13/2019 SAP PK&TI 2C Artiana Krestianti
Pendahuluan (lanjutan) List dan Image pada HTML 1/13/2019 Pendahuluan (lanjutan) CSS (Cascading Style Sheet) dapat digunakan untuk menghindari pekerjaan berulang-ulang seperti di atas. Cukup dengan menuliskan aturan isi atributnya satu kali saja, untuk kemudian dipakai berkali-kali. Sebuah file CSS terdiri atas berbagai macam aturan style yang dapat digunakan untuk mengatur tampilan web. File CSS disimpan dengan format file ”..... .css” dan dapat dipanggil untuk kemudian dipakai dalam web. 1/13/2019 SAP PK&TI 2C Artiana Krestianti
List dan Image pada HTML 1/13/2019 Aturan Style Dalam membuat aturan style, terdapat dua cara : Menuliskannya langsung dalam dokumen HTML Caranya dengan menambahkan tag <style> di antara tag <head> dan tag </head>. Kemudian tulisan aturan stylenya di dalam tag <style> tadi. Tapi cara ini sudah jarang dilakukan. Memisahkan dalam sebuah file khusus yang berekstensi ”..... .css” Sebuah aturan style terdiri atas selector serta beberapa atribut dan isi dari atribut tersebut (parameternya). Untuk membuat aturan style dapat mengikuti tata cara penulisan (syntax) sebagai berikut : 1/13/2019 SAP PK&TI 2C Artiana Krestianti
Aturan Style (lanjutan) List dan Image pada HTML 1/13/2019 Aturan Style (lanjutan) NamaSelector { Atribut1 : ParameterAtribut1; Atribut2 : ParameterAtribut2; Atribut3 : ParameterAtribut3 } Keterangan : NamaSelector = dapat berupa nama sebuah tag atau nama yang ditentukan secara bebas. Atribut = banyak sekali atribut yang bisa digunakan. Seperti color, font-size, font-style, dll. Akan dijelaskan berikutnya. Parameter = adalah isi dari atribut yang dipakai. Contohnya color : blue; font-size : 12pt; font-style : italic. Akan dijelaskan berikutnya. 1/13/2019 SAP PK&TI 2C Artiana Krestianti
Contoh penggunaan tag sebagai nama selector List dan Image pada HTML 1/13/2019 Contoh penggunaan tag sebagai nama selector Jika menggunakan nama tag sebagai NamaSelector, maka aturan style secara otomatis akan langsung berlaku dan diaplikasikan dalam tag yang dimaksud. Pada contoh di atas setiap teks yang ada di dalam tag <p> akan menjadi berwarna biru dan memiliki ukuran huruf 12pt. P { color : blue; font-size : 12pt } 1/13/2019 SAP PK&TI 2C Artiana Krestianti
Contoh penggunaan nama selector secara bebas List dan Image pada HTML 1/13/2019 Contoh penggunaan nama selector secara bebas .paragrafku { color : blue; font-size : 12pt } Jika menggunakan NamaSelector secara bebas, harus me-nambahkan karakter ”.” atau ”#” di depan NamaSelector. Para pembuat web biasanya menggunakan karakter ”.” Kemudian bila ingin mengaplikasikan style tadi terhadap suatu tag, maka harus memanggilnya menggunakan atribut class dari tag yang akan dipengaruhinya. Perhati-kan contoh penulisan berikut : <P class=paragrafku>ini teksnya</p> 1/13/2019 SAP PK&TI 2C Artiana Krestianti
Beberapa atribut dalam aturan style List dan Image pada HTML 1/13/2019 Beberapa atribut dalam aturan style Ada banyak sekali atribut yng dapat digunakan ketika membuat sebuah aturan style. Pada slide sebelumnya, terdapat sebuah aturan style bernama .paragrafku yang menggunakan dua atribut yaitu color dan font-size. Kedua atribut tersebut digunakan untuk mengatur warna dan besar huruf pada teks. Berikut ini beberapa atribut yang sering digunakan, beserta parameter yang dapat diisikan dan keterangannya : 1/13/2019 SAP PK&TI 2C Artiana Krestianti
Beberapa atribut dalam aturan style Parameter Keterangan background-color Bisa berupa teks yang menunjukkan warna, yaitu aqua, blue, black fuchsia,gray,green,red, lime,maroon,navy,teal, olive,purple,silver,white dan yellow. Atau bisa juga berupa kombinasi 6 angka 0,1,2,3,4,5,6, 7,8,9,a,b,c,d,e,f, yang diawali karakter “#”, contoh #00eeff. Mengatur warna latar belakang. 1/13/2019 SAP PK&TI 2C
Beberapa atribut dalam aturan style Color Sama dengan back-ground-color. Mengatur warna teks. font-size Menggunakan angka di sertai satuannya, biasasanya meng-gunakan satuan pt. Contoh: 12 Mengatur tinggi huruf. font-style Normal, italics atau oblique. Mengatur kenampak-an huruf, misal tercetak miring, dsb. font-weight Bold, 100, 200, 300, 400, 500, 600, 700, 800 dan 900. Mengatur tebal huruf. text-align Left, center, right atau justify. Mengatur perataan teks Text-decoration Underline, Overline, line-through, blink atau none. Mengatur teks bergaris bawah, bergaris atas tercoret atau ber kedip. 1/13/2019 SAP PK&TI 2C
Beberapa atribut dalam aturan style border-bottom-width Bisa menggunakan tu-lisan thin, medium atau thick. Bisa juga berupa angka yang menunjukkan ketebal-an yang diinginkan, misalnya 5px. Mengatur ketebalan bingkai bagian bawah border-color Sama dengan back- ground-color. Mengatur warna bingkai. border-left-width Sama dengan border-bottom-width. Mengatur ketebalan bingkai bagian kiri. border-right-width Mengatur ketebalan bingkai bagiankanan. 1/13/2019 SAP PK&TI 2C
Beberapa atribut dalam aturan style border-style None, dotted, dashed, solid, double, groove, ridge, inset, outset. Mengatur kenam-pakan dari bingkai. Biasanya untuk membuat bingkai menjadi putus-putus atau bingkai ganda. border-top-width Sama dengan border-bottom-width. Mengatur ketebalan bingkai bagian atas. width Bisa berupa panjang dalam satuan pixel atau satuan persen. Misalnya 300px atau 60%. Mengatur lebar sel atau lebar kotak sel. 1/13/2019 SAP PK&TI 2C
Memanggil dan mengunakan file CSS Setelah membuat beberapa aturan style dalam file CSS yang terpisah, file CSS tersebut dapat dipanggil dan digunakan dalam halaman html. Tag <link> yang terdapat diantara tag < head> dan tag </head> dapat digunakan untuk memanggil file CSS yang akan digunakan. Atribut rel, href dan type dari tag <link> dapat digunakan untuk memanggil file CSS. Atribut rel diisi dengan kata stylesheet, atribut href diisi dengan nama file CSS yang akan dipanggil, dan atribut type diisi dengan “text/css”. 1/13/2019 SAP PK&TI 2C
Contoh file CSS 1/13/2019 SAP PK&TI 2C
Contoh file html memanggil file CSS 1/13/2019 SAP PK&TI 2C
Contoh tampilan pemanggilan file CSS 1/13/2019 SAP PK&TI 2C
List dan Image pada HTML 1/13/2019 TERIMA KASIH 1/13/2019 SAP PK&TI 2C Artiana Krestianti