Penggunaan CSS dalam Perancangan Web
|
|
|
- Veronika Hardja
- 9 tahun lalu
- Tontonan:
Transkripsi
1 Pendahuluan Penggunaan CSS dalam Perancangan Web CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu. Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World Wide Web Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C mengembangkan CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih terus diperbarui lagi. Namun pada saat ini, hanya CSS2 yang masih didukung oleh kebanyakan web browser, tapi tidak demikian halnya untuk CSS3. Masih sedikit web browser yang mendukung CSS3. Oleh karena itu pada tutorial ini hanya akan dibahas mengenai CSS2 saja. Keuntungan Penggunaan CSS Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk mengatur style elemen dalam halaman web Anda. Sebagai contoh, misalnya untuk mengatur style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixel dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan. Perhatikan contoh berikut ini : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> h1 { color: red; font-family: "arial"; </style> </head> <body> <h1>ini adalah heading 1</h1> <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> <h1>ini adalah heading 1</h1> 1
2 <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> <h1>ini adalah heading 1</h1> <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> </body> </html> Code di atas akan menghasilkan tampilan sebagai berikut. Perhatikan code sebelumnya! Untuk mengatur style elemen heading 1 (h1) cukup menuliskannya pada CSS sekali saja. Bandingkan apabila Anda tidak menggunakan CSS, maka codenya akan berbentuk seperti berikut untuk mendapatkan hasil yang sama. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> </head> <body> <h1><font face="arial" color="red">ini adalah heading 1</font></h1> <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> <h1><font face="arial" color="red">ini adalah heading 1</font></h1> <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> <h1><font face="arial" color="red">ini adalah heading 1</font></h1> <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> </body> </html> 2
3 Anda akan menuliskan style pada setiap elemen heading 1 yang dibuat. Tentu hal ini akan merepotkan. Apalagi suatu saat Anda bermaksud untuk mengubah stylenya, maka Anda akan mengubahnya satu-persatu. Sangat-sangat merepotkan. Selain itu, dengan CSS akan diperoleh suatu kekonsistenan style. Anda tentu dapat merasakan keuntungan ini, dibandingkan dengan tanpa adanya CSS yang kemungkinan besar ketidakkonsistenan akan terjadi. Hal ini dikarenakan style hanya dituliskan sekali, tidak seperti dengan tanpa CSS yang ditulis style berulang kali. Meskipun Anda masih bisa mengandalkan copy and paste masih saja ada peluang terjadinya ketidakkonsistenan. Struktur Style Style pada CSS memiliki struktur sebagai berikut Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan. Selector dapat berupa nama id elemen atau nama class. Bagian deklarasi menerangkan style yang akan dibuat. Bagian ini terdiri dari properti dan value. Properti dapat diisi dengan jenis warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai dari propertinya, misalnya red untuk warna dll. Setiap akhir penulisan properti dan value harus diakhiri dengan tanda titik koma (semicolon). Tanda ini juga digunakan sebagai pemisah antar satu properti dengan properti lain. Apabila Anda lupa memberikan tanda titik koma, maka style tersebut tidak akan dijalankan oleh browser. Mungkin Anda bertanya, bagaimana jika kita akan membuat style untuk beberapa elemen yang berbeda namun stylenya sama? Misalkan kita akan membuat style untuk elemen h1, h2, h3 namun memiliki style yang sama. Berikut ini adalah sintaksnya: h1, h2, h3 { properti1 : value1; properti2 : value2; properti3 : value3;.. 3
4 Selector Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p { color: red; em { color: green; </style> </head> <body> <h1>ini adalah heading 1</h1> <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. <em>ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> <h1><em>ini adalah heading 1</em></h1> <p>ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. <em>ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> </body> </html> Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan untuk emphasize atau <em> (cetak miring seperti halnya italic). Perhatikan apa yang terjadi dengan tampilannya di browser 4
5 Dengan Anda mendeklarasikan style warna hijau untuk elemen <em>, maka style tersebut akan berlaku untuk setiap elemen tersebut (termasuk pada bagian heading). Tentu saja hal ini membuat tampilan halaman web tidak bagus, karena style heading menjadi tidak konsisten (terdapat heading yang berwarna hijau). Lantas bagaimana cara mengatur style supaya warna hijau hanya berlaku untuk emphasize yang terletak di dalam paragraf saja? Untuk itu Anda harus mengubah deklarasi stylenya menjadi seperti berikut <style type="text/css"> P { color: red; p em { color: green; </style> Maksud dari code yang bercetak merah tersebut adalah bahwa style warna hijau diterapkan pada elemen emphasize <em> yang berada di dalam elemen paragraf <p>. Hasil tampilan setelah menggunakan style yang telah dimodifikasi tersebut adalah: Selector Dengan Class dan Nama ID Class dapat digunakan untuk mengelompokkan beberapa elemen supaya memiliki style sama. Secara umum sintaks style untuk class tertentu adalah sbb:.namakelas { properti1 : value1; properti2 : value2; 5
6 Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css">.inputtext { color: #FFFFFF; font-family: arial; background: #FF0000; /* membuat background merah */ font-weight: bold; /* membuat text bold */ </style> </head> <body> <form name="form1"> Nama Anda <br /> <input type="text" name="alamat" class="inputtext" /><br /><br /> Alamat Anda <br /> <textarea class="inputtext"></textarea><br /><br /> <input type="submit" name="submit" value="submit" /> </form> </body> </html> Hasilnya adalah sebagai berikut: Style juga dapat digunakan untuk mengatur tampilan elemen dengan id tertentu. Berikut ini adalah contohnya: 6
7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p { color: #FFFFFF; /* membuat warna text putih */ font-family: arial; background: #FF0000; /* membuat background merah */ font-weight: bold; p.group { color: #FF0000; /* membuat warna text putih */ font-family: arial; background: #FFFFFF; /* membuat background putih */ p#one { color: blue; font-family: "times new roman"; </style> </head> <body> <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="group">ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <p class="group" id="one">ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p> </body> </html> Perhatikan hasil tampilan dari code di atas berikut ini 7
8 Pada tampilan di atas, tampak bahwa perintah p {... digunakan untuk mengatur style pada elemen <p>. Sedangkan perintah p.group {... digunakan untuk mengatur style hanya pada <p> yang memiliki class bernama group dan perintah p#one {... berfungsi untuk mengatur style pada <p> yang memiliki id bernama one. Meskipun pada contoh ini, terdapat elemen <p class="group" id="one">, namun style pada elemen ini mengikuti p#one, bukannya p.group karena nama id lebih diprioritaskan daripada class. Lantas bagaimana dengan tampilan dengan style berikut ini <style type="text/css"> p { color: black; p.group { color: red;.group { color: blue; #group { color: green; </style> yang diterapkan pada tag berikut? <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="group">ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <div class="group">ini adalah paragraf 3. Ini adalah paragraf 3. In adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </div> <div id="group">ini adalah paragraf 4. Ini adalah paragraf 4. Ini adalah paragraf 4. Ini adalah paragraf 4. Ini adalah paragraf 4. </div> Apabila Anda dapat menjawab pertanyaan di atas, maka Anda sudah menguasai dasar-dasar CSS awal ini khususnya pada masalah selector. Menurut analisis saya, untuk paragraf pertama akan memiliki warna hitam, paragraf ke dua berwarna merah, paragraf ke tiga akan berwarna biru dan paragraf ke empat akan berwarna hijau. Mari kita lihat hasil tampilannya: 8
9 Berikut ini penjelasannya: Style berikut akan diterapkan pada elemen <p> p { color: black; Sedangkan style berikut hanya akan diterapkan pada elemen <p> yang memiliki class bernama group. p.group { color: red; Selanjutnya untuk style berikut ini akan diterapkan pada elemen yang memiliki class bernama group..group { color: blue; Perhatikan tampilan gambar di atas, bahwa untuk <p class="group"> tidak akan terpengaruh karena elemen tersebut sudah memiliki style sendiri yaitu p.group. Apabila style p.group tidak ada, maka elemen <p class="group"> akan terpengaruh style.group (text akan menjadi merah) Suatu style juga dapat ditulis sebagai berikut #group { color: green; Style tersebut hanya akan mengatur tampilan pada elemen yang memiliki id bernama group. 9
10 Lebih Lanjut Tentang Value Pada bab ini akan dijelaskan lebih lanjut tentang aturan penulisan value dari properti yang diberikan. Terdapat beberapa jenis value yang dapat berikan pada properti style, antara lain berupa predefined value, bilangan, prosentase, url, dan juga warna. Predefined Value Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini dapat dipilih dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined value ini adalah pada style berikut h1 { font-style : italic; Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini value italic merupakan predefined value. Untuk properti font-style terdapat pilihan value yang telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique. Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik. Bilangan Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini contohnya: p { line-height : 2; Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari ukuran fontnya. Panjang, Besar dan Prosentase Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px (pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini beberapa contohnya URL h1 { hr { font-size : 20px; /* membuat ukuran font 20 pixel */ width : 20%; /* membuat garis horizontal dengan panjang 20% terhadap lebar jendela browser /* Sebuah value juga dapat berupa URL. Berikut ini contohnya body { background : url(img/image.jpg); Style di atas untuk memberi background image pada body yang diambil dari folder img dengan nama file image.jpg. 10
11 Warna Untuk memberi value berupa warna pada properti, ada beberapa cara yang dapat dilakukan yaitu dengan menuliskan secara eksplisit warna yang diinginkan, misal (red, green, yellow, dll) atau dengan menuliskannya dalam kode hexadesimal. Berikut ini contohnya p { p { color : red; color : #FF0000; /* identik dengan warna merah (hexadesimal) Membuat CSS Eksternal Pada contoh-contoh sebelumnya, jenis CSS yang dibuat adalah CSS internal karena ditulis jadi satu dengan code (X)HTML nya. Perhatikan kembali contoh berikut ini <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p { color: #FFFFFF; font-family: arial; background: #FF0000; font-weight: bold; p.group { color: #FF0000; /* membuat warna text putih */ font-family: arial; background: #FFFFFF; /* membuat background putih */ p#one { color: blue; font-family: "times new roman"; </style> </head> <body> <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="group">ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <p class="group" id="one">ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3.</p> </body> </html> Anda dapat menaruh CSS yang ada dalam code di atas ke dalam file tertentu, dengan harapan file CSS itu dapat digunakan oleh halaman web yang lain. File CSS inilah yang disebut CSS eksternal yang memiliki file extension.css Sebagai contoh, misalnya style di atas kita simpan ke dalam file style.css 11
12 style.css p { color: #FFFFFF; font-family: arial; background: #FF0000; font-weight: bold; p.group { color: #FF0000; /* membuat warna text putih */ font-family: arial; background: #FFFFFF; /* membuat background putih */ p#one { color: blue; font-family: "times new roman"; Lantas bagaimana cara mengintegrasikan style.css tersebut ke halaman web yang kita buat? Caranya adalah dengan memberikan perintah <link rel="stylesheet" type="text/css" href="style.css" /> pada bagian header halaman web. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="group">ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <p class="group" id="one">ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3.</p> </body> </html> Dengan konsep ini, Anda dapat menggunakan CSS eksternal yang berasal dari situs web lain untuk mengatur style halaman web Anda, dengan cara menambahkan URL secara lengkap pada atribut href nya. <link rel="stylesheet" type="text/css" href=" /> Style Untuk Font Family Font family digunakan untuk menentukan jenis huruf/font pada suatu tampilan teks. Berikut ini adalah nama properti dan penulisan valuenya: font-family: name; dengan name adalah jenis font yang Anda inginkan. Contoh: p { font-family: arial; 12
13 Anda juga dapat memberikan jenis font lebih dari satu yang dipisahkan dengan koma. Contoh: p { font-family : "arial black", arial, "Times New Roman"; Maksud dari style di atas adalah bahwa jenis font arial black akan diprioritaskan untuk digunakan. Namun apabila font tersebut tidak disupport oleh browser maka yang digunakan arial, begitu seterusnya. Sebagai catatan, untuk jenis font yang terdiri dari lebih satu kata harus diapit dengan tanda petik ganda (double quotes). Membuat Teks Italic Membuat teks italic dapat pula dilakukan melalui style. Berikut ini cara penulisannya font-style : italic; Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p { font-family: arial; font-style: italic; </style> </head> <body> <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> </body> </html> Style di atas akan menghasilkan teks paragraf yang berjenis font arial dan italic. 13
14 Membuat Teks Tebal (Bold) Untuk membuat teks tebal atau bold, properti yang digunakan adalah font-weight : bold; Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p { font-family: arial; font-style: italic; font-weight: bold; </style> </head> <body> <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> </body> </html> Tampilannya diperoleh berikut ini: Mengatur Ukuran Font Pengaturan ukuran font dapat dilakukan dengan style yang menggunakan properti font-size : size; dengan size diisi angka yang menyatakan ukuran disertai satuannya. Contoh: 14
15 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p.styled { font-size: 20px; /* membuat font berukuran 15 pixel */ </style> </head> <body> <p class="styled">ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p>ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </body> </html> Pada contoh di atas, paragraf pertama berukuran 20 pixel sedangkan paragraf kedua berukuran normal (default). Sebagai catatan, teks berukuran 16px secara dafault. Hasilnya tampak berikut ini Mengatur Jarak Baris Dalam Paragraf Anda dapat mengatur jarak baris teks dalam suatu paragraf dengan menggunakan CSS. Berikut ini adalah nama properti nya line-height : size; dengan size diisi angka yang menyatakan ukuran disertai satuannya. Contoh: 15
16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p.styled { line-height: 30px; </style> </head> <body> <p class="styled">ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Iniadalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p>ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </body> </html> Paragraf pertama diberikan style untuk mengatur jarak antar baris sebesar 30 pixel, sedangkan paragraf kedua memiliki jarak baris default. Perhatikan perbedaannya pada tampilan berikut ini Mengubah Warna Text Untuk mengubah warna font, propertinya adalah: color : warna; dengan value warna diisikan dengan warna yang diinginkan, dapat berupa kode hexadesimalnya, maupun nama eksplisitnya. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 16
17 <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p.styled1 { font-family: "Palatino Linotype"; font-size: 20px; color: #FF0000; p.styled2 { color: green; </style> </head> <body> <p class="styled1">ini adalah paragraf 1. Ini adalah paragraf 1. Ini Adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p class="styled2">ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </body> </html> Paragraf pertama pada contoh di atas akan diberikan style text berwarna merah (#FF0000) sedangkan paragraf kedua berwarna hijau (green). Mengubah Warna Background Text Apabila Anda ingin mengubah warna background text, maka berikut ini adalah propertinya: background : warna; cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit warna yang diinginkan maupun kode hexadesimalnya. Contoh: 17
18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> body { background : green; p.styled { font-family: "Palatino Linotype"; font-size: 20px; color: #FF0000; background: #FFFFFF; /* warna putih */ p { color: orange; font-weight: bold; background: #000000; /* warna hitam */ </style> </head> <body> <p class="styled">ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p>ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </body> </html> Pada contoh di atas, bagian body diberi warna background (seluruh halaman), namun perkecualian untuk bagian paragraf. Paragraf pertama diberi warna background putih sedangkan paragraf kedua diberi warna hitam. Berikut ini tampilan di browser: 18
19 Mengatur Jarak Spasi Antar Text Perhatikan contoh tampilan berikut ini: Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak tersebut diatur dengan menggunakan properti sbb: word-spacing : jarak; letter-spacing : jarak; Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang kedua untuk mengatur jarak antar huruf. Sebagai contoh, berikut ini code yang menghasilkan tampilan di atas. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> h1 { word-spacing: 20px; letter-spacing: 15px; </style> </head> <body> <h1>ini Judul Heading</h1> <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p>ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </body> </html> 19
20 Membuat Text Indent Pada bagian awal paragraf biasanya terdapat text indent atau teks yang agak menjorok ke dalam paragraf dalam jarak tertentu. Berikut ini adalah properti yang digunakan untuk mengaturnya: text-indent : jarak; Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p { text-indent : 40px; </style> </head> <body> <h1>ini Judul Heading</h1> <p>ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p>ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </body> </html> Dalam contoh di atas, awal paragraf dibuat text indent berjarak 40 pixel. Perataan Teks (Text Alignment) Anda dapat mengatur perataan teks dengan menggunakan properti 20
21 text-align : jenis; dengan value jenis dapat digantikan dengan left, center, right dan justify. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> #p1 { text-align : center; #p2 { text-align : justify; #p3 { text-align : right; </style> </head> <body> <h1>ini Judul Heading</h1> <p id="p1">ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p id="p2">ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <p id="p3">ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p> </body> </html> 21
22 Jenis perataan yang digunakan pada contoh di atas adalah rata tengah untuk paragraf pertama, rata kanan kiri (justify) untuk paragraf kedua dan rata kanan untuk paragraf ketiga. Mengubah Text Case Dengan CSS, Anda dapat pula mengubah suatu teks menjadi huruf kecil semua (lowercase), besar semua (uppercase), atau capitalize (hanya huruf pertama dari kata yang dibuat besar). Hal ini dilakukan dengan menggunakan properti text-transform : option; dengan option dapat diganti dengan lowercase, uppercase, atau capitalize. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> #heading1 { text-transform : uppercase; #heading2 { text-transform : lowercase; #heading3 { text-transform : capitalize; </style> </head> <body> <h1 id="heading1">ini Judul Heading 1</h1> <h1 id="heading2">ini Judul Heading 2</h1> <h1 id="heading3">ini Judul Heading 3</h1> </body> </html> Hasil tampilan code di atas dapat dilihat pada gambar berikut. 22
23 Membuat Drop Cap Ingin mempercantik tampilan paragraf dengan menambahkan drop cap pada huruf pertamanya? Berikut ini contoh penulisan style untuk membuat hal tersebut. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> p.styleku:first-letter { float: left; font-family: "Lucida Grande"; font-size: 80px; p { text-align : justify; </style> </head> <body> <h1 id="heading1">ini Judul Heading 1</h1> <p class="styleku">bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. </p> </body> </html> Adapun tampilan dari code di atas adalah sebagai berikut. p.styleku:first-letter { float: left; font-family: "Lucida Grande"; font-size: 80px; Code style di atas hanya akan berlaku untuk huruf pertama dari paragraf yang memiliki class styleku, dalam hal ini adalah huruf B. Sedangkan properti float digunakan untuk mengatur posisi huruf B 23
24 tersebut, apakah di sebelah kiri atau kanan, sehingga valuenya adalah left. Apabila value yang dipilih adalah right, maka berikut ini tampilannya: sungguh jelek sekali bukan Membuat Text Decoration Anda dapat membuat text decoration seperti underline, overline, line-trough, maupun blink dengan properti text-decoration : option; dengan option dapat diganti dengan underliner, overline, line-trough atau blink. Untuk melihat perbedaannya, perhatikan contoh berikut. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>css Guide</title> <style type="text/css"> #heading1 { text-decoration : blink; /* membuat teks berkelap kelip */ #heading2 { text-decoration : line-through; /* membuat garis ditengah text/ dicoret */ #heading3 {text-decoration : underline; /* membuat garis bawah */ #heading4 {text-decoration : overline; /* membuat garis di atas text */ </style> </head> <body> <h1 id="heading1">ini Judul Heading 1</h1> <h1 id="heading2">ini Judul Heading 2</h1> <h1 id="heading3">ini Judul Heading 3</h1> <h1 id="heading4">ini Judul Heading 4</h1> 24
25 </body> </html> Tampilan dari code di atas adalah sebagai berikut, akan tetapi untuk efek blink pada heading 1 tidak kelihatan ketika di screen shot. Membuat Layout dengan CSS (Sample 1) Pada bagian ini, Anda akan dipandu bagaimana membuat layout desain halaman web dengan memanfaatkan CSS. Dengan CSS, Anda tidak membutuhkan tabel dalam menata layoutnya. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama. Untuk membuat layout dengan CSS hal terpenting yang harus dilakukan adalah membagi elemen halaman ke dalam division-division tertentu. Berikut ini adalah code halaman web yang belum dilayout tampilannya. <html> <head> <title>dasar-dasar layout</title> </head> <body> <div id="header"> <h1>welcome to my site</h1> </div> <div id="navigasi"> <h3>menu Navigasi</h3> <ul> <li><a href="link1.htm">link 1</a></li> <li><a href="link2.htm">link 2</a></li> <li><a href="link3.htm">link 3</a></li> <li><a href="link4.htm">link 4</a></li> <li><a href="link5.htm">link 5</a></li> 25
26 <li><a href="link6.htm">link 6</a></li> </ul> </div> <div id="isi"> <img src="sunset.jpg" /> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> </div> <div id="footer"> <p>copyright 2007 by rosihanari</p> </div> </body> </html> Tampilan code di atas tampak pada gambar berikut ini. Pada contoh ini, kita akan membuat layout sbb: 26
27 Perhatikan desain di atas, terdapat 4 bagian sel yang akan kita buat. Sebaiknya untuk nama id pada masing-masing division diberi nama sesuai desain supaya mudah dipahami. Untuk yang pertama, kita akan membuat sel untuk bagian header. Berikut ini style untuk bagian header yang saya buat. #header { padding:10px; /* jarak teks dari tepi kotak */ border:1px solid #000000; /* membuat garis tepi 1 pixel */ background-color:#cccccc; /* membuat warna latar */ Dengan style di atas, tampilan header sudah agak lebih bagus (lihat tampilan berikut) Properti padding menyatakan jarak antara tepi sel dengan elemen yang ada di dalamnya. Berikut contoh style lain dengan padding nya 40 pixel dan juga tipe garis bordernya putus-putus (dashed). #header { padding:40px; border:3px dashed #000000; /* garis tepi putus-putus */ background-color:#cccccc; Hasilnya adalah: 27
28 Kita kembalikan ke style yang header awal saja ya, karena contoh di atas hanya untuk menjelaskan penggunaan padding dan dashed. Style header yang kita gunakan adalah #header { padding:10px; border:1px solid #000000; background-color:#cccccc; Sedangkan style untuk footernya dapat ditulis sebagai berikut: #footer { padding:10px; border:1px solid #000000; background-color:#cccccc; Hasil tampilannya adalah : Selanjutnya kita buat style untuk bagian isi. #isi { padding:10px; border:1px solid #000; 28
29 Untuk bagian navigasi, karena bagian tersebut ingin diletakkan di sebelah kanan, maka berikan properti float: right. Perhatikan style berikut #navigasi { float:right; padding:10px; border:1px solid #000; background: yellow; Efek penggunaan properti float: right dapat dilihat pada tampilan berikut ini. 29
30 Meskipun sudah diletakkan di sebelah kanan, ternyata bagian isi masih belum seperti yang diinginkan sesuai desain layout. Oleh karena itu kita atur lebar sel untuk bagian isi dengan properti width dan juga kita beri jarak sedikit antara sel isi dan footer dengan properti margin-bottom. Perhatikan style berikut: #isi { width: 830px; /* lebar elemen */ margin-bottom:10px; padding:10px; border:1px solid #000; Efek modifikasi style pada bagian isi dapat dilihat pada gambar berikut ini. Pada gambar di atas tampak, bahwa bagian isi sudah memiliki sel sendiri selebar 830 pixel dan ada sedikit jarak (10 pixel) dari footer. Ada baiknya kita tambahkan sedikit jarak antar bagian navigasi dengan header, begitu pula dengan bagian isi. Untuk keperluan ini, gunakan properti margin-top. Supaya seimbang dengan yang lain, kita beri jarak 10 pixel. #navigasi { float:right; padding:10px; margin-top: 10px; border:1px solid #000; background: yellow; #isi { width: 810px; margin-top: 10px; margin-bottom:10px; 30
31 padding:10px; border:1px solid #000; Hasil perubahan style tersebut tampak pada gambar berikut. Langkah selanjutnya kita bermain-main sedikit dengan layout image nya. Masih ada space kosong yang besar di sebelah kanan image. Bagaimana jika kita meletakkan paragrafnya di sebelah kanannya. OK that a a good idea Untuk keperluan ini, sebaiknya kita buat class untuk imagenya. Kenapa? Hal ini dilakukan supaya memudahkan pengaturan image-image yang lain. Seandainya terdapat lebih satu image yang disisipkan ke halaman web tersebut, maka kita tidak perlu repot-repot mengatur semuanya, melainkan tinggal memanggil class nya saja. Nama class untuk image pada contoh ini, misalnya gambar. <img src="sunset.jpg" class="gambar" /> Selanjutnya kita buat style pada class tersebut.gambar { float: left; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; Pada style tersebut, properti float: left diberikan karena kita ingin gambar berada di sebelah kiri elemen yang mengikutinya (dalam hal ini adalah paragraf). Sedangkan properti margin digunakan untuk mengatur posisi gambar terhadap elemen di sekitarnya. Sebagai contoh, margin-right menyatakan jarak 31
32 antara tepi kanan image dengan teks paragraf di sebelah kananya. Margin-bottom menyatakan jarak antara tepi bawah image dengan teks di bawahnya. Perhatikan, meskipun margin-left diberi nilai 0px, tapi masih ada jarak antara tepi kiri image dengan garis border bagian isi. Hal ini dikarenakan efek dari properti padding: 10px dari style untuk isi sebelumnya. Begitu pula margin-top nya. Apabila kita ingin membuat teks paragraf bagian isi memiliki alignment justify, maka dapat kita buat sylenya. #isi p { text-align: justify; line-height: 22px; Properti line-height digunakan untuk mengatur jarak antar baris teks paragraf. Perhatikan efek penggunaan style tersebut dalam gambar berikut 32
33 Lho, kok gambarnya akan menyembul ke atas terhadap teks paragrafnya? OK kita modifikasi lagi style gambarnya. Kita ingin supaya paragrafnya dinaikkan sedikit supaya sejajar dengan image. #isi p { margin-top: 0px; text-align: justify; line-height: 20px; Hasilnya dapat dilihat pada tampilan berikut. OK that s better. Tampilan gambar berikut ini menunjukkan manfaat penggunaan class pada bagian paragraf dan image apabila terdapat beberapa image dan paragraf dalam bagian isi. Gambar menunjukkan bahwa setiap image dan paragraf akan memiliki style yang sama. 33
34 Membuat Layout dengan CSS (Sample 2) Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat Bagian background (warna abu-abu) akan kita beri image. Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulumenggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya. 34
35 <body> <div id="content"> <div id="header"> <h1>welcome to my site</h1> </div> <div id="menu"> <div class="navigasi"> <h3>menu Navigasi A</h3> <ul> <li><a href="link1.htm">link 1</a></li> <li><a href="link2.htm">link 2</a></li> <li><a href="link3.htm">link 3</a></li> <li><a href="link4.htm">link 4</a></li> </ul> </div> <div class="navigasi"> <h3>menu Navigasi B</h3> <ul> <li><a href="link1.htm">link 1</a></li> <li><a href="link2.htm">link 2</a></li> <li><a href="link3.htm">link 3</a></li> <li><a href="link4.htm">link 4</a></li> </ul> </div> </div> <div id="isi"> <img src="sunset.jpg" class="gambar" /> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> <p>ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. </p> </div> <div id="footer"> <p>copyright 2007 by rosihanari</p> </div> </div> </body> Seperti yang kita lihat pada code di atas, bahwa semua sel (header, isi, footer dan navigasi) merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian content? Hal ini dikarenakan kita akan membuat style untuk bagian tersebut, misalnya meletakkan di tengah halaman dan juga mengatur lebar bagian content nya. OK let s get to the point Kita akan membuat style untuk body nya terlebih dahulu. Karena kita akan menambahkan efek background image pada seluruh halaman, maka berikut ini adalah stylenya body { background: url(background.jpg); 35
36 dan hasilnya adalah: Selanjutnya kita akan membuat style untuk bagian content dengan mengatur lebarnya adalah 750 pixel dan berada di tengah halaman. #content { width: 750px; margin: auto; /* membuat posisi di tengah */ hasilnya adalah 36
37 Saat nya memodifikasi bagian header. Kita akan membuat blok untuk headernya dengan menambahkan style berikut. #header { border:1px solid #000000; background-color:#000000; padding: 10px h1 { color: #FFFFFF; font-size: 40px; Adapun efek tampilan dari style di atas adalah berikut ini : Apabila Anda merasa space antara text heading dengan tepi blok bawah dan atas terlalu lebar, dapat menggunakan line-height untuk mengaturnya. Semakin kecil nilai line-height maka akan semakin kecil spacenya. h1 { color: #FFFFFF; font-size: 40px; line-height: 5px; Berikut ini perubahannya: Selanjutnya kita akan membuat style untuk bagian footer beserta teks pada footernya. #footer { padding:10px; border:1px solid #000000; background-color:#cccccc; #footer p { text-align: justify; font-weight: bold; 37
38 Berikutnya, untuk bagian navigasi, bisa kita buat stylenya seperti di bawah ini. #menu { float:right; Sedangkan untuk setiap class navigasi, kita buat style sebagai berikut:.navigasi { border:1px dashed #000; margin-top: 10px; padding: 10px; background: yellow; Perhatikan efek perubahan dari penggunaan style di atas pada gambar berikut ini. Sekarang saatnya membuat style untuk bagian isi. #isi { width:550px; margin-top: 10px; margin-bottom:10px; padding:10px; border:1px solid #000; background: white; Lihat hasil style pada bagian isi pada gambar berikut ini. 38
39 Hmmm sudah mulai kelihatan cantik. Berikutnya style untuk image.gambar { float: left; margin-top: 0px; margin-right: 10px; margin-bottom: 20px; margin-left: 0px; border: 1px solid #000000; 39
40 Gambar di atas adalah hasil menggambarkan posisi image setelah diberi efek style. Sedangkan berikut ini adalah style untuk mengatur paragraf dalam bagian isi. #isi p { text-align: justify; line-height: 18px; margin-top: 0px; OK. Selesai sudah kita membuat layout dengan CSS. Sebuah layout tanpa menggunakan tabel berhasil kita buat. Perhatikan hasil akhir layout kita pada gambar berikut. Anda dapat berkreasi sendiri untuk membuat layout yang lain, misalnya layout yang memiliki kolom 3 buah atau yang lain. Jangan lupa untuk tetap menggunakan CSS. 40
CSS Tutorial. rosihanari.net. Lebih Lanjut Tentang Selector
rosihanarinet Lebih Lanjut Tentang Selector Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik Untuk lebih jelasnya perhatikan contoh berikut ini
Modul 3 CSS CASCADE STYLE SHEET
Modul 3 CSS CASCADE STYLE SHEET Fungsi: Mengatur style elemen yang ada di halaman web, mulai dari memformat text dan format layout. Mengatur kekonsistenan style pada elemen tertentu Keuntungan CSS: Ukuran
Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
Cara Value keterangan
Pertemuan 11 Pengaturan property CSS Style Sheet adalah rangkaian suatu perintah yang disebut juga dengan statement. Setiap statement mempunyai 2 (dua) buah komponen utama yaitu, selector dan deklarator.
Introduksi. Team Training SMK-TI I-58
Introduksi Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web anda. Bila anda telah terbiasa menggunakan Microsoft Word, anda dapat melihat bahwa konsep Style Sheet mirip
Metode Penulisan Dasar CSS
Metode Penulisan Dasar CSS Pada pembahasan kali ini, kita akan menelusuri pemograman CSS lebih dalam lagi. Ada beberapa penulisan dasar dalam CSS yang wajib kita ketahui. Beberapa penulisan itu terdiri
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style
XHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: [email protected] Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
APLIKASI WEB DAY 3. (Cascading Style Sheets)
APLIKASI WEB DAY 3 (Cascading Style Sheets) VII. Pengenalan Style Sheet Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat
MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR)
MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MATERI KULIAH SEMESTER 3 D3 TEKNIK INFORMATIKA STMIK AMIKOM YOGYAKARTA 2009 Disusun Oleh : ANGGIT DWI HARTANTO, S.KOM MODUL II CASCADING STYLE SHEET (CSS) I. PENGERTIAN
CSS. Auriza Akbar 1 Juni 2012
CSS Auriza Akbar [email protected] 1 Juni 2012 Apa itu CSS? CSS = Cascading Style Sheets Mekanisme sederhana untuk menambahkan style (seperti font, warna, spasi) ke dalam dokumen web http://www.w3.org/style/css/
Pemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml
PRAKTIKUM 3 CSS TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml MATERI Sintaks CSS, cara memakai CSS, jenis-jenis selektor, satuan ukuran, satuan warna, properti
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website
Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
Introduksi. Team Training SMK-TI I-58
Introduksi Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web anda. Bila anda telah terbiasa menggunakan Microsoft Word, anda dapat melihat bahwa konsep Style Sheet mirip
MATERI II CASCADING STYLE SHEETS (CSS) DASAR
MATERI II CASCADING STYLE SHEETS (CSS) DASAR Tujuan : 1. Memahami tentang konsep CSS 2. Memahami aturan penulisan pada CSS 3. Memahami selector sebagai pengontrol design 4. Memahami pembuatan background
DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
Multiple Style akan meng-cascade kedalam Style Lain
CSS Pendahuluan Apakah CSS? CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen Styles umumnya disimpan dalam Style Sheets Styles ditambahkan pada HTML 4.0 untuk
SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3
4 BAB IV WEB DESIGN CSS3 41 IDENTITAS Kajian Web Design menggunakan HTML5 dan CSS3 Topik Penggunaan CSS3 untuk Design dan Layout Web Kompetensi Utama 1 Mengetahui penggunaan script HTML5 dan CSS3 2 Penggunaan
Contoh Syntax: Contoh di atas menunjukkan. S e l e c t o r : h 1. P r o p e r t y : c o l o r. V a l u e : r e d. (red).
Apa Itu CSS? PENGENALAN CSS CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke
CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM
CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM CSS Cascading Style Sheet Bahasa yang digunakan untuk mengatur tampilan dan format dari dokumen markup (HTML) CSS didesain untuk memisahkan antara dokumen yang mendeskripsikan
CSS (Cascade Style Sheet)
CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa
MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR
MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR PENDAHULUAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman Web dalam perkuliahan sebelumnya, kini tiba saatnya untuk membuat halaman web Anda tampil
Keuntungan Memisahkan presentation sebuah dokumen dari content document itu sendiri Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen w
Tentang CSS Adalah standart pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text dan table menjadi lebih ringkas sehingga
{CSS} Cascading Style Sheet
{CSS} Cascading Style Sheet mekanisme sederhana yang mengatur gaya / style (cth: warna, ukuran, posisi, dll) pada halaman web. http://www.w3.org/style/css sebelum CSS sebelum CSS sebelum CSS sebelum
CSS. Cascading Style Sheet. Spesifikasi lengkap di :
CSS Cascading Style Sheet Spesifikasi lengkap di : http://www.w3..org/tr/css2 Mengubah Text Mengubah Warna Mengubah Posisi Mengubah Ukuran Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada
BAB IV CASCADING STYLE SHEET (CSS)
BAB IV CASCADING STYLE SHEET (CSS) A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk
PEMROGRAMAN WEB 1 CSS
PEMROGRAMAN WEB 1 CSS RIO ANDRIYAT KRISDIAWAN, M.KOM Definisi CSS CSS adalah kepanjangan dari Cascading Style Sheet dan digunakan para web designer untuk mengatur style elemen yang ada didalam halaman
Author : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
DAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya...
DAFTAR ISI COVER DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN... 3 1.1 Latar Belakang... 3 1.2 Rumusan Masalah... 3 1.3 Tujuannya... 3 BAB II PEMBAHASAN... 4 2.1 Pengertian CSS... 4 2.2 Format
BAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Pengenalan Script. Definisi HTML
1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML
BAB III CASCADING STYLE SHEET
BAB III CASCADING STYLE SHEET A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan
MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 4 Cascading Style Sheets Tujuan: Mahasiswa mengenal komponen CSS sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04A Cascading Style Sheets
Daftar isi. West PoinT edu
Daftar isi 1.font-weight...2 2.Font-style...2 3.Font-family...2 4.font-size...2 5.color...3 6.text-align...3 7.vertical-align...3 8.text-decoration...4 9.text-transform...4 10.text-shadow...4 11.word-spacing...5
MODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami struktur dasar dokumen HTML. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi. B. PETUNJUK
Tutorial Membuat Template Joomla 1.5
Tutorial Membuat Template Joomla 1.5 Tempate joomla sebenarnya sangat sederhana, tidak rumit sama sekali. Satu file layout html bisa kita konversi langsung menjadi template joomla 1.5 yang valid. Tutorial
Teks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
Cara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara [email protected] Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
Membuat Template Website Menggunakan Teknik Layer ala CSS
Membuat Template Website Menggunakan Teknik Layer ala CSS Bila Anda mendengar istilah template website, hampir dapat dipastikan kalau skrip yang digunakannya adalah CSS. CSS atau Cascading Style Sheet
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI
LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI 4103131060 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
Panduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono
Panduan HTML dan CSS bagian 2 A. Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggunakan HTML para programer website sering menggunakan
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
Komponen CSS Nilai Properti
BAB 5 Komponen CSS Nilai Properti Secara sekilas, setiap properti yang telah kita pelajari diatas akan memberikan nilai yang berbeda-beda pada setiap properti yang ada. Nilai-nilai yang sering muncul pada
MODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami jenis dan struktur dasar dokumen CSS. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman
MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi
CSS. inheritance (pewarisan)
{CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css
PRAKTIKUM 3 Pengenalan CSS
Tujuan: - - - PRAKTIKUM 3 Pengenalan CSS Mahasiswa mampu memahami konsep dasar CSS Mahasiswa mampu memahami struktur dasar syntax CSS Mahasiswa mampu memahami penerapan warna pada CSS Dasar Teori CSS merupakan
Pemrograman Web. Cascading Style Sheets. Created by : Rifqi Sambas Khairurrohman
Pemrograman Web Cascading Style Sheets Created by : Rifqi Sambas Khairurrohman Home Page Anatomi CSS Macam Selector Cara Kerja Anatomi CSS CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,
/* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center;}
II CSS INTRO CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen dan elemen pada suatu dokumen ditampilkan oleh browser. File CSS memiliki ekstensi.css SYNTAX SYNTAX
KAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung
DAFTAR ISI Bab 1 Mengenal Teknologi Internet dan Web... 1 Bab 2 Tentang CSS... 9
DAFTAR ISI Kata Pengantar... vii Daftar Isi... ix Bab 1 Mengenal Teknologi Internet dan Web... 1 1.1 Sejarah Internet...1 1.2 Web dan Browser...3 1.3 Mengenal Teknologi Web...4 1.4 Sekilas Tentang HTML...5
Syntax HTML. Biasanya digunakan untuk menulis komentar, tidak akan timbul dihalaman web.
Syntax HTML Pada tulisan Saya kali ini, Saya memberikannya beserta contoh kode dan gambar, ada beberapa yang Saya tidak beri kode dan gambar, kode, dan gambar sekalipun karena beberapa alasan : Kurangnya
Materi. I. Pengenalan HTML II. Basic Tag HTML III. Table IV. Image
Pengenalan HTML Materi I. Pengenalan HTML II. Basic Tag HTML III. Table IV. Image I. Pengenalan HTML WWW HTML Browser dan Editor I. PENGENALAN HTML World Wide Web Internet merupakan jaringan global yang
6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.
TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;
Cara Mudah Mengedit Cascading Style Sheet (CSS)
Cara Mudah Mengedit Cascading Style Sheet (CSS) Riska Islaminati [email protected] :: http://www.komputeran.com/2012/04/cara-mudahmengedit-cascading-style.html Abstrak CSS salah satu teknik
LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :
LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka
TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER
1 TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuat dokumen XHTML dan CSS sebagai style library external. Rencana
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
LAPORAN PRAKTIKUM 4 PENGENALAN CSS
LAPORAN PRAKTIKUM 4 PENGENALAN CSS Dosen Pembimbing : Dwi Susanto S.ST, MT Oleh : Noer Rhiannah A ( 4103131052 ) PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK
Pemrograman WEB PERTEMUAN KE-1
Pemrograman WEB PERTEMUAN KE-1 Pengertian HTML HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya,
Cascading Style Sheet (CSS) Didik Dwi Prasetya
Cascading Style Sheet (CSS) Didik Dwi Prasetya [email protected] CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)
4. Berikut ini termasuk tag tag yang biasanya diletakkan di dalam kelompok tag Body, kecuali. a. bgcolor c. link b. font d. meta
LATIHAN SOAL HTML DASAR 1 1. Singkatan HTML adalah. a. Hyper Text Markup Language b. Hygher Text Markup Language c. Hyper Terminal Markup Language d. Hyper Text Make Language 2. Dibawah ini merupakan tag
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website
Modul 10 DreamWeaver MX Suendri, S.Kom
Modul 10 DreamWeaver MX 2004 Suendri, S.Kom -- Untuk Indonesia Tanah Air Tercinta -- Suendri, S.Kom 2 Lisensi Dokumen Seluruh isi dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara luas
Yayan Mulyana
Yayan Mulyana CSS merupakan materi yang WAJIB kita kuasai sebagai web Designer, karena dengan CSS kita bisa membangun sebuah website dengan rancangan desain yang efektif dan fleksibel
Pemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
Chapter 1. Pengenalan HTML
Chapter 1. Pengenalan HTML 1.1. Pengenalan HTML HTML atau HyperText Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. HTML adalah
Modul 1 : HTML dan CSS
Modul 1 : HTML dan CSS Tujuan Praktikum - Praktikan mampu membuat halaman web dengan menggunakan HTML dan CSS. Pengantar HyperText Markup Language atau lebih dikenal HTML merupakan markup language yang
1. HTML DASAR Struktur dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY
--------------------------------------------------------------------------------------------------------- BELAJAR HTML DASAR LENGKAP SINGKAT JELAS PADAT (Disertai Study Kasus) (www.infomugi.blogspot.com)
Triswansyah Yuliano
Mendesain Menu dengan CSS Triswansyah Yuliano [email protected] http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com
Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO [email protected] liyantanto.wordpress.com Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat
Faa Akmal-Tugas-Pemrograman-web-Bab-4- halaman-159s/d164
08018244-Faa Akmal-Tugas-Pemrograman-web-Bab-4- halaman-159s/d164 CHAPTER 4 - CSS Salah satu tantangan bagi anda saat membuat halaman Web adalah saat mengatur letak posisi elemen. Sebuah halaman Web tidak
PRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL PRAKTIKUM :
PRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami penggunaan groupping, class dan id pada CSS. 2. Siswa dapat mengimplementasikan groupping, class
Memodifikasi Tampilan Gambar (Image) dengan CSS
Memodifikasi Tampilan Gambar (Image) dengan CSS Sebuah file gambar (image) yang disisipkan pada dokumen HTML akan tampil tanpa dekorasi apapun pada saat dilihat di browser. Kita dapat memberi garis pembatas
Penulis :
Daftar Isi Dasar-Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 Heading dan Cara Menyimpan dengan Ekstensi HTML 4 Basic HTML Code 6 Style 11 Formating 18 Dasar Dasar HTML Cara Membuka Notepad
Tampilan di website (Tidak Tampil karena hanya memberi informasi bagi pembuat )
MEMBUAT WEBSITE DENGAN HTML Dibuat oleh : Dea Arri Rajasa, SE., S.Kom HTML (Hyper Text Markup Language) STRUKTUR HTML Judul Website ditulis disini Kode kode HTML
1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.
A SOAL PILIHAN GANDA 1 Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah A ikan Badut (Clownfish) B ikan Badut (Clownfish) C
Artikel HTML Dasar. World Wide Web ( WWW ) yang biasa disebut web merupakan suatu kumpulan
Universitas Muhammadiyah Sukabumi Artikel HTML Dasar Oleh : Baden Badru Jaman Artikel HTML Dasar Artikel HTML PENGERTIAN WEB & HTML World Wide Web ( WWW ) yang biasa disebut web merupakan suatu kumpulan
Mendesain halaman Web
Mendesain halaman Web dengan CSS 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
STRUKTUR DASAR HTML. Presented by: Moh. Sulhan 2009
STRUKTUR DASAR HTML Presented by: Moh. Sulhan : [email protected] @ 2009 Stuktur Dasar HTML Ekstensi / nama ahiran dari file adalah :.html /.htm Tag HTML tidak bersifat case sensitive Struktur dasar
Aplikasi Komputer. Pengenalan tentang Ms. Word 2010 serta fungsi-fungsi dasarnya (1) Ita Novita, S.Kom, M.T.I. Modul ke: Fakultas Ilmu Komputer
Modul ke: Aplikasi Komputer Pengenalan tentang Ms. Word 2010 serta fungsi-fungsi dasarnya (1) Fakultas Ilmu Komputer Ita Novita, S.Kom, M.T.I Program Studi Informatika www.mercubuana.ac.id Pengenalan Microsoft
[email protected] PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) [email protected] PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) [email protected]
Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata
Dasar Pemrograman Web Pemrograman Web Adam Hendra Brata Konsep Dasar Desain Web HTML CSS HTML HTML (HyperText Markup Language) Bahasa standar yang digunakan untuk menampilkan document web. Mengontrol tampilan
CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa
CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa Pembahasan Pengertian CSS CSS (FONT, TEXT, COLOR) CSS - Image PENGERTIAN CSS Singkatan dari Cascading Style Sheet Digunakan dalam kode HTML untuk menciptakan
Design Web Dengan 2 Kolom
Design Web Dengan 2 Kolom Muh Hasan Tanjung [email protected] Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
1. Pengenalan HTML. 2. Tag Dasar HTML
1. Pengenalan HTML 1.1. Sejarah Singkat HTML HTML dibuat oleh Tim Bernels-Lee seorang ahli Fisika ketika masih bekerja untuk CERN (organisasi Eropa untuk riset nuklir) dan dipopulerkan pertama kali oleh
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML (HYPERTEXT MARKUP LANGUAGE) HTML merupakan Script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri terdiri dari tag-tag yang fungsinya untuk membuat dokumen
BAB 2 Teks dan Paragraph
BAB 2 Teks dan Paragraph Pada Bab ini anda akan mempelajari cara: Memilih tampilan untuk bekerja dalam dokumen Memotong, menyalin dan menempelkan teks Mengubah tampilan teks Menambahkan efek pada teks
Standar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML
Pengenalan CSS Standar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML Indikator Hasil Belajar Dapat menjelaskan pengertian CSS. Dapat