Mendesain halaman Web

Transkripsi

1 Mendesain halaman Web dengan CSS

2 ABOUT CSS Styles sheets define How HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external.css files. External style sheets enable you to change the appearance and layout of all the pages in your we, just by editing one single CSS document CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a web developer you can define a style for each HTML element and apply it to as many web pages as you want. To make a global change, simple change the style, and all elements in the Web are updated automatically Mamoun Nawahdah

3 CSS SYNTAX Syntax CSS dibentuk dari tiga bagian: selector, property dan value selector {property: value} selector : tag/element HTML yang ingin didefinisikan. property : atribut yang ingin diubah dan case sensitive. value : nilai dari atribut. Property dan value biasanya dipisahkan oleh titik dua dan diapit oleh kurung kurawal. Contoh: body {color: black}

4 Jika value terdiri dari dua kata atau lebih, gunakan tanda petik dua ( ) p { font-family : Times New Roman } Jika Anda ingin menentukan lebih dari satu property, Anda harus memisahkan tiap-tiap property dengan titik koma. p { text-align: center; color : red} Penulisan di atas dapat juga ditulis dalam bentuk yang mudah dibaca seperti berikut. p { font-family: calibri; text-align: center; color : red }

5 Grouping Anda dapat mengelompokkan beberapa selector dengan property dan value yang sama. Tiap-tiap selector dipisahkan oleh koma. h1, h2, h3, h4 { color: green } The class selector Dengan class selector, anda dapat mendefinisikan style yang berbeda untuk tipe yang sama dari elemen HTML. Anggap Anda ingin mempunyai dua tipe paragraf dalam halaman web Anda: paragraf rata-kanan dan paragraf ratatengah, berikut contoh mendefinisikannya.

6 p.kanan {text-align: right} p.tengah {text-align: center} Dalam dokumen HTML Anda menuliskan sebagai berikut: <p class= kanan >Paragraf ini menggunakan rata kanan</p> <p class= tengah >Paragraf ini menggunakan rata tengah</p id selector Anda dapat mendefinisikan style untuk elemen HTML dengan id selector. Id selector didefinisikan dengan menggunakan tanda #. Contoh: #merah {color: red}

7 Memberikan Komentar Komentar digunakan untuk memberi keterangan/penjelasan dari kode yang Anda buat. Komentar ini membantu Anda dalam mengedit kode yang Anda buat. Untuk membuat komentar dimulai dengan tanda /* dan diakhiri dengan tanda */ Contoh: /* mengatur tag p pada HTML */ P { text-align: center; /* mengatur warna */ color: red; font-family: arial }

8 Aturan Penulisan CSS Ada tiga jenis penulisan CSS, yaitu: 1. External Style Sheet CSS ditulis diluar file HTML. File yang terbuat disimpan dalam format.css contoh: <head> <link rel= stylesheet type= text/css href= desain.css /> </head> 2. Internal Style Sheet Ditulis didalam file HTML. Internal style sheet seharusnya digunakan dalam dokumen tunggal yang mempunyai style yang unik. Didefinisikan diantara tag <head></head>

9 Contoh: <head> <style type= text/css > hr {color: red} p {margin-left: 20px} body {background-image: url(images/gambar.gif )} </style> </head> </head> 3. Inline Styles Kode CSS ditulis langsung dalam tag HTML. Contoh: <p style= color: red; margin-left : 20px > teks HTML yang akan ditampilkan </p>

10 efek.css Body { background: #125084; color: white; } H1 { color: #00ff00; } p.versi2 { color: #e2ff5a; font-family: calibri; font-size: 24px; } EKSTERNAL STYLE SHEET Latihan1.html <HTML> <HEAD> <TITLE>Desain Web Dengan CSS</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>MEMPERINDAH TAMPILAN DENGAN CSS</H1> <P>Latihan Desain Web Dengan CSS. <br> Paragraf ini merupakan paragraf biasa. Perhatikan bahwa warna tulisan adalah putih. <br> Secara default untuk halaman web ini warnanya diatur sesuai dengan selector body pada file efek.css</p> <p class="versi2">paragraf ini adalah paragraf dengan class "versi2" yang diatur oleh file efek.css.</p> </BODY> </HTML>

11 Latihan2.html (Internal Style Sheet) <HTML> <HEAD> <TITLE>Mendesain Web dengan CSS</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>BROWSER</H1> <P>Browser adalah aplikasi untuk mengakses halaman web.</p> Halaman ini didesain dengan menggunakan CSS. </BODY> </HTML>

12 Latihan3.html (Inline Style Sheet) <HTML> <HEAD> <TITLE>Desain Web</TITLE> </HEAD> <BODY style="color: white; background: green; font-family : arial;" > <H1 style="color: yellow;">browser</h1> <P style="color: red; font-family: calibri; font-size: 24px;">Tulisan ini menggunakan CSS dengan gaya penulisan inline style sheet</p> paragraf ini menggunakan property yang didefinisikan di dalam tag body. </BODY> </HTML>

13 1. BACKGROUND WARNA LATIHAN4.HTML MEMBUAT BACKGROUND PADA CSS <HTML> <HEAD> <TITLE>Menggunakan Background Warna</TITLE> <STYLE type="text/css"> body {background-color : #99CCFF} h2 {background : green} h3 {background-color : transparent} p {background : rgb(240,248,255)} </STYLE> </HEAD> <BODY> <h2>header 2, Background Hijau</h2> <h3>header 3, Bakground Transparan</h3> <p>background pada paragraph</p> </BODY> </HTML>

14 MEMBUAT BACKGROUND PADA CSS 2. Background gambar Properties Value Keterangan background-image url Alamat gambar yang dituju background-repeat Background-position repeat repeat-x repeat-y no-repeat top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos Diulang dalam halaman Diulang sumbu x Diulang sumbu y Tampil 1 gambar Atas kiri halaman Atas tengah halaman Atas kanan halaman tengah kiri halaman Pusat halaman tengah kanan halaman bawah kiri halaman bawah tengah halaman bawah kanan halaman Pakai nilai %

15 MEMBUAT BACKGROUND IMAGE PADA CSS Latihan5.html <HTML> <HEAD> <TITLE>Menggunakan Background Gambar</TITLE> <STYLE type ="text/css"> BODY { background-image: url( bg.jpg"); background-repeat: repeat-x; } </STYLE> </HEAD> <BODY> Background Berulang pada Sumbu X </BODY> </HTML>

16 Latihan6.html MEMBUAT BACKGROUND IMAGE PADA CSS <HTML> <HEAD> <TITLE>Menggunakan Background Gambar</TITLE> <STYLE type = "text/css"> BODY {background-image:url ( logo.jpg"); background-repeat: no-repeat; background-position: center center; } </STYLE> </HEAD> <BODY> Background di Pusat Halaman </BODY> </HTML>

17 Margin Properties Property Description CSS margin Sets all the margin properties in one declaration 1 margin-bottom Sets the bottom margin of an element 1 margin-left Sets the left margin of an element 1 margin-right Sets the right margin of an element 1 margin-top Sets the top margin of an element 1 Padding Properties Property Description CSS padding Sets all the padding properties in one declaration 1 padding-bottom Sets the bottom padding of an element 1 padding-left Sets the left padding of an element 1 padding-right Sets the right padding of an element 1 padding-top Sets the top padding of an element 1

18 PENGATURAN HALAMAN MENGGUNAKAN MARGIN Latihan7.html <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE type="text/css"> BODY { margin-top : 1cm; margin-right : 2cm; margin-bottom : 1cm; margin-left : 2cm; } </STYLE> </HEAD> <BODY> Pengaturan Batas Halaman (atas 1cm, kanan 2cm,bawah 1cm, kiri 2cm) </BODY> </HTML>

19 Latihan8.html PENGATURAN HALAMAN MENGGUNAKAN PADDING <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE type="text/css"> BODY { padding-top : 10%; padding-right : 20%; padding-bottom : 40%; padding-left: 20%; } </STYLE> </HEAD> <BODY> Text ini berada di tengah halaman, karena di lakukan pengaturan halaman dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%. </BODY> </HTML>

20 FORMAT TEKS Properties Value Keterangan Pengaturan warna color green, dll Pengaturan Spasi (jarak antar karakter) letter-spacing Normal Length Ukuran standar HTML Ukuran panjang (cm,px) Perataan Text text-align Left, right, center, justify text-decoration none underline overline line-through blink Pengaturan text indentasi text-indent length % Pengubahan Bentuk Karakter text-transform Capitalize, uppercase, lowercase, none Bentuk standar Bergaris bawah Bergaris atas Text dicoret Text berkedip Dengan cm, px Dengan persentase

21 Latihan9.html <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE type ="text/css"> p {color : green; letter-spacing: 0.5cm} h1 {letter-spacing: -2px} h2 {text-align: center} h3 {text-align: left} h4 {text-align: right} </STYLE> </HEAD> <BODY> <p>pengaturan Spasi Pada Paragraph </p> <h1>header 1</h1> <h2>header 2, Di tengah</h2> <h3>header 3, Di kiri</h3> <h4>header 4, Di kanan</h4> </BODY> </HTML>

22 Latihan10.html <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE type="text/css"> em {text-decoration : overline} h2 {text-decoration: blink} h3 {text-decoration: underline} a {text-decoration: none} </STYLE> </HEAD> <BODY> <em>bentuk Overline</em> <h2>header 2, Bentuk Line-through</h2> <h3>header 3, Bentuk Underline</h3> <p><a href="coba.htm">penggunaan Dalam Link</a></p> </BODY> </HTML>

23 Latihan11.html <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE type="text/css"> p.besar {text-transform: uppercase} p.kecil {text-transform: lowercase} </STYLE> </HEAD> <BODY> <p class="besar"> pengubahan kedalam huruf besar </p> <p class="kecil"> PENGUBAHAN KEDALAM HURUF KECIL </p> </BODY> </HTML>

24 PENGATURAN FONT Properties Value Keterangan Jenis Font font-family Ukuran Huruf Font-size arial, dll Small Medium Large Length % Pengaturan gaya pada font font-style normal italic oblique Ketebalan huruf font-weight normal bold 100 ~ 900 Kecil Menengah Besar Besar font (pt,px) Persentase

25 Latihan12.html <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE type="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>

26 Latihan13.html <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE type="text/css"> p.normal { font-family : verdana ; font-weight: normal;} p.thick { font-family : verdana ; font-weight: bold;} p.thicker { font-family : times ; font-weight: 900;} </STYLE> </HEAD> <BODY> <p class="normal"> Desain Web </p> <p class="thick"> Desain Web </p> <p class="thicker"> Desain Web </p> </BODY> </HTML>

27 PENGATURAN TABEL Latihan14.html <HTML> <HEAD> <TITLE>Pengaturan Table spec</title> <STYLE type="text/css"> TH { color : #FFFFFF; background-color : #336699; border-width: 1px ; border-style:solid; border-color :red ; font-size: 9pt;} TD { color : red; background-color : #E6E6FA; border-width: 1px ; border-style:solid; border-color :blue ; font-size: 9pt;} </STYLE> </HEAD>

28 <BODY> <table width="468" border="0" cellpadding="5" cellspacing="0"> <tr> <th width="112"> Nama </th> <th width="91"> No Test </th> <th width="96"> Nilai </th> <th width="137 > Keterangan </th> </tr> <tr> <td> Ali </td> <td> 001 </td> <td> 78 </td> <td> Lulus </td> </tr> <tr> <td> Amir </td> <td> 002 </td> <td> 43 </td> <td> Mengulang </td> </tr> <tr> <td> Adi </td> <td> 003 </td> <td> 85 </td> <td> Lulus </td> </tr> </table></body></html>

29 HYPERLINK Selector a:link a:visited a:active a:hover Keterangan Keadaan awal pemicu link aktif Keadaan pemicu link setelah dikunjungi Keadaan pemicu yang sedang aktif Kejadian pada pemicu link saat mouse digerakkan diatasnya <HTML> <HEAD> <TITLE>Pengaturan Hyperlink</TITLE> <STYLE type="text/css"> a:link {text-decoration: none} a:visited {text-decoration: none} a:active {text-decoration: none} a:hover {font-weight:none; color:red; background-color:blue;} </STYLE> </HEAD> <BODY> <a href="coba.htm">klik disini</a> </BODY> </HTML>

30 TUGAS Buatlah web pribadi anda menggunakan css. Lengkapi dengan tombol fasilitas menu: 1. HOME : Informasi sekilas tentang diri anda. 2. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan training yang pernah diikuti. 3. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas. 4. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau di luar. 5. Tambahkan menu atau informasi lain, untuk menambah nilai anda.

31 Referensi: [1]. Mamoun Nawahdah. CSS Tutorial. W3School.com [2]. Jeffrey Veen The Art & Science of Web Design. USA

32 Sekian Terima Kasih Semoga Bermanfaat