DAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya...

Ukuran: px

Mulai penontonan dengan halaman:

Download "DAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya..."

Ari Gunawan
6 tahun lalu
Tontonan:

1 DAFTAR ISI COVER DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya... 3 BAB II PEMBAHASAN Pengertian CSS Format Text pada WEB Pengaturan Hyperlink dan Tombol yang menarik Menggunakan Atribut CLASS BAB III PENUTUP Kesimpulan DAFTAR PUSTAKA

2 KATA PENGANTAR Assalamuallaikum Wr. Wb Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha Penyayang, atas segala rahmatnya sehingga makalah ini dapat disusun hingga selesai. Tidak lupa juga kami ucapkan banya terima kasih atas bantuan dari pihak yang telah berkontribusi dengan memberikan sumbangan baik materi maupun pikiran. Dan harapan kami semoga makalah CSS Lanjut ini dapat menambah pengetahuan dan pengalaman bagi para pembaca, terlepas dari semua itu, Kami menyadari sepenuhnya bahwa masih ada kekurangan baik dari segi susunan kalimat maupun tata Bahasanya. Oleh karena itu dengan tangan terbuka kami menerima segala saran dan kritik dari pembaca agar untuk kedepannya dapat kami perbaiki baik susunan kalimat maupun tata bahasanya. Akhir kata kami ucapkan terima kasih, semoga makalah ini dapat bermanfaat untuk kita semuanya. Tangerang Selatan, 08 Maret 2017 kelompok 8 2

3 BAB I PENDAHULUAN 1.1 Latar Belakang Dalam Era globalisasi perkembangan teknologi, kini banyak orang mengakses suatu website menggunakan smartphone, maka tampilan websitepun harus responsive dan menarik dilihat, kenapa demikian? karena website yang responsive mudah di akses menggunakan smartphone yang memiliki ukuran layar lebih kecil dari laptop maupun pc, maka website yang memiliki bentuk responsive akan mengikuti atau menyesuaikan bentuknya pada saat dia diakses menggunakan perngkat yang berbeda-beda bentuknya. selain responsive website yang ringan atau cepat dalam akses juga factor penting untuk membuat pengunjung website senang. Maka untuk membuat website yang demikian kita membutuhkan bahasa pemrograman CSS ( Cascanding Style Sheets ), CSS merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan suatu keharusan dalam membuat web, akan tetapi menggunakan CSS akan memiliki kelebihan sendiri. Dalam materi kali ini kita akan mempelajari CSS lanjut, dan beberapa materi CSS dasar akan sedikit kita bahas kembali. 1.2 Rumusan Masalah - Definisi atau pengertian CSS - Pengertian Format text CSS dalam HTML - Cara membuat hyperlink dan tombol yang menarik - Mengenal Atribut CLASS 1.3 Tujuannya - Mengetahui pengertian dari CSS terhadap HTML - Mengerti Format text CSS - Latihan mengenal Bahasa pemrograman CSS - Mengenal Atribut CLASS yang benar pada CSS 3

BAB II PEMBAHASAN 2.1 Pengertian CSS a. Definisi CSS (Cascading Style Sheets) suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada.

4 BAB II PEMBAHASAN 2.1 Pengertian CSS a. Definisi CSS (Cascading Style Sheets) suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaimana tampilan documents HTML yang menggunakannya. Anda juga bias menyebutnya sebagai template dari documents HTML yang menggunakannya/ Anda Juga bias membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bias membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. b. Mengapa Gunakan CSS? CSS digunakan untuk menentukan gaya untuk halaman web Anda, termasuk desain, tata letak dan variasi tampilan untuk perangkat yang berbeda dan ukuran layar. Penggunaan CSS juga merupakan standar untuk web-web modem(web 2.0). sebagian pembca mungkin sudah tau bahwa implementasi CSS, Table Less dan semantic tapi tidak Divitis(maniak div) merupakan standarisasi web yang baik. c. Sintaks CSS ( Cascading Style Sheets) sintaks CSS dibuat atas 3bagian, yaitu : slector, propertdan value Pemilih poin ke elemen HTML Anda ingin bergaya. Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma. Setiap deklarasi termasuk CSS nama properti dan nilai, 4

5 yang dipisahkan oleh titik dua. Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal. Pada contoh berikut semua <p> elemen akan pusat-blok, dengan warna teks merah Format Text pada WEB Propertis Value Keterangan Pengaturan Warna Color Green, dll Pengaturan spasi (jarak antar karakter) Letter-spacing Normal Length Ukuran standart HTML,ukuran panjang (cm,px) Perataan Text Text-align Text-decoration Left Right Center Justify None Underline Overline Line-trought Blink Pengaturan text indentasi Text-indent Length % Pengubahan Bentuk Karakter Text-transform Capitaliz Uppercase Lowercase none Bentuk standart Bergaris bawah Bergaris atas Text dicoret Text berkedip Dengan, cm, px Dengan persentase 5

6 Contoh 1 : <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE ="text/css"> p.italic { font-size :200 % ; font-style: italic; p.normal{ font-family : verdana ; font-style: normal; p.oblique { font-style: oblique </STYLE> </HEAD> <BODY> <P class="italic">menggunakan Style Italic</P> <P class="normal">menggunakan Style Normal </P> <P class="oblique">menggunakan Style Oblieque</P> </BODY> </HTML> 6

7 2.3. Pengaturan hyperlink dan tombol yang menarik Syntax penulisan pada CSS : a:link {property : value Selector a:link a:visited a:active a:hover Keterangan Keadaan awal pemicu link aktif Keadaan pemicu link setelah dikunjungi Keadaan pemicu yang sedangaktif Kejadian pada pemicu link pada saat mouse digerakkan diatasnya Contoh 1 : <!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; a:hover, a:active { background-color: red; </style> 7

8 </head> <body> <a href="default.asp" target="_blank">this is a link</a> </body> </html> Contoh 2 : <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; li { float: left; li a { display: block; color: white; text-align: center; 8

9 padding: 14px 16px; text-decoration: none; li a:hover:not(.active) { background-color: #111;.active { background-color: #4CAF50; </style> </head> <body> <ul> <li><a class="active" href="#home">home</a></li> <li><a href="#news">news</a></li> <li><a href="#contact">contact</a></li> <li><a href="#about">about</a></li> </ul> </body> </html> 9

10 2.4. Mengunakan Atribut CLASS CLASS dapat digunakan untuk membuat bermacam-macam variasi pada definisi style dari suatu elemen. Misalnya, paragraph tebal dengan identasi 15pt dan paragraph miring dengan identasi 45pt, maka definisi style tersebut: P.tebal { font-family : Arial; font-weight : bold; text-indent : 15pt; P.miring { font-family : Arial; font-weight: italic; text-indent: 45pt; Contoh : <html> <head> <title>style SHEET</title> <style> <! - - P.tebal { font-family : Arial; font-weight : bold; text-indent : 15pt; P.miring { font-family : Arial; font-weight: italic; text-indent: 45pt; - -> </style> </head> <body> <p class= tebal >Teks dalam paragraph ini terlihat tebal dengan identiasi 15 pt. <p class= miring > Teks dalam paragraph ini terlihat tebal dengan identiasi 45 pt. </body> </html> 10

11 BAB III KESIMPULAN Jadi kesimpulan dari materi makalah CSS lanjut adalah penulisan syntac dalam css itu terdiri dari 3 bagian, yaitu : class, properties, value. Dan fungsi dari css sendiri adalah sebagai bahasa pemrograman yang di gunakan untuk membuat suatu web terlihat menarik dan lebih cepat dalam pengerjaan tampilannya. 11

12 BAB IV PENUTUP 4.1. Daftar Pustaka diakses 08 maret diakses 16 maret diakses 17 maret roy.darmawan50@yahoo.com Website : 12

dokumen-dokumen yang mirip

MATERI II CASCADING STYLE SHEETS (CSS) LANJUT

MATERI II CASCADING STYLE SHEETS (CSS) LANJUT Tujuan : 1. Memformat text pada web 2. Memahami pengaturan bentuk font 3. Membuat pengaturan tabel dan pewarnaannya 4. Membuat hyperlink dan tombol yang menarik