CSS (Cascading Style Sheets)
|
|
|
- Hendri Gunawan
- 7 tahun lalu
- Tontonan:
Transkripsi
1 KAJIAN 2 CSS (Cascading Style Sheets) Modul 5 Pengantar CSS Modul 6 Layout dan Display Modul 7 Font, Text, Color, Background Modul 8 Layer dan Hyperlink Modul 9 Layout Website Sederhana 40
2 KAJIAN 2 CSS (Cascading Style Sheets) MODUL 5 Pengantar CSS Kompetensi Dasar : Mampu merancang antarmuka berbasis website statis 5.1. TUJUAN Mengetahui dan memahami dasar dasar CSS serta peran CSS dalam sebuah perancangan halaman website LANDASAN TEORI CSS (Cascading Style Sheets) merupakan cara untuk memisahkan isi dengan layout dalam halaman halaman web. CSS memperkenalkan template berupa style untuk membuat dan mempermudah penulisan dari halaman halaman yang dirancang. CSS dapat menciptakan halaman yang tampak sama dengan resolusi layar dari pengunjung yang berbeda tanpa memerlukan suatu tabel.designer web akan lebih mudah melakukan setting tampilan keseluruhan web hanya dengan menggantikan atribut atribut atau perintah dalam style CSS dengan atribut yang diinginkan tanpa harus mengubah satu per satu atribut tiap elemen yang ada dalam situs. 1. Cara Kerja CSS CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format format lain untuk memformat atribut sebuah halaman web yang dibuat. Tiap style mempunyai 2 elemen dasar, yaitu selector dan declarator. Selector merupakan tag HTML atau tag yang dinamai sendiri oleh designer, sedangkan declarator adalah atribut/perintah CSS yang menunjukkan tipe bentuk yang diaplikasikan pada selector. Declarator berada di dalam tanda kurung kurawal {. Terdapat 2 jenis selector, yaitu ID dan CLASS Selector ID (diawalai tanda #)digunakan untuk menentukan style bagian unik dari HTML, artinya satu nama ID hanya bisa digunakan satu kali pada sebuah halaman web. Selector CLASS (diawali tanda. )digunakan untuk menentukan style dari sebuah group elemen, bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen elemen yang ada pada sebuah halaman web. 41
3 2. Memanggil CSS Selector dan declarator yang sudah dibuat dalam CSS kemudian dipanggil ke dalam HTML agar layout yang dibuat diterapkan pada isi dalam dokumen HTML. Selector ID dan Class memiliki pemanggilan yang berbeda, perhatikan gambar berikut : 3. Pewarisan (Inheritance) Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance adalah: tag tersebut harus berada di dalam tag lainnya. Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag <body>. Perhatikan syntaks berikut : <div><p>saya sedang belajar <b>inheritance</b> CSS</p></div> Dari contoh diatas, tag <p> berada di dalam tag <div>, sehingga dapat dikatakan tag <div> adalah induk (parent) dari tag <p>. Sedangkan tag <b> yang berada di dalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>. Jika ada syntaks CSS berikut : div { color:green; Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag <div> akan berwarna hijau, walapun di dalam tag <div> juga terdapat tag tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <b>. 42
4 4. Penempatan CSS dalam HTML Menempatkan style CSS dalam dokumen HTML dapat dilakukan dalam beberapa cara : 1. Inline Style Style CSS dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. 2. Internal Style Style CSS diletakkan di dalam dokumen HTML, terletak di antara tag <head> dan </head>. Aturan aturan dalam style diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs. 3. Eksternal Style Style CSS dibuat terpisah/diluar dokumen HTML dengan ekstensi.css, kemudian dipanggil oleh dokumen HTML menggunakan perintah link rel ALAT DAN BAHAN 1. PC (Personal Computer) 2. Web Browser 3. Notepad LANGKAH PRAKTIKUM 1. Praktikum 5.1. Inline Style Buka Notepad++. Tuliskan syntaks berikut pada halaman yang kosong : <html> <head> </head> <body> <font style='font-family:arial; font-size:20px; background-color:skyblue'> Inline Style dalam CSS </font> </body> </html> Simpan file sebagai inline style.html. Hasilnya : 43
5 2. Praktikum 5.2. Internal Style Buka Notepad++. Tuliskan syntaks berikut pada halaman yang kosong : <html> <head> <style> h1 { color: blue; margin-left: 30px; </style> </head> <body> <h1>this is a heading. This style is built by CSS Internal Style</h1> </body> </html> Simpan file sebagai eksternal style.html. Hasilnya : 44
6 3. Praktikum 5.3. Eksternal Style Buka Notepad++. Tuliskan syntaks berikut pada halaman yang kosong : h1 { color: blue; margin-left: 30px; #par1{ text-align:center; color:red; Simpan file sebagai style.css. Buka kembali Notepad ++, selanjutnya tulis syntaks berikut pada halaman yang kosong : <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>this is Heading</h1> <p id="par1">this is Paragraph</p> </body> </html> Simpan file sebagai eksternal style.html. Buka file eksternal style.html dan hasilnya : 45
7 KAJIAN 2 CSS (Cascading Style Sheets) MODUL 6 Layout dan Display Kompetensi Dasar : Mampu merancang antarmuka berbasis website statis 6.1. TUJUAN Mengetahui dan memahami tag tag serta atribut yang digunakan dalam membuat layout dan display menggunakan CSS 6.2. LANDASAN TEORI Layout 1. Border Property border digunakan untuk membuat garis batas luar yang lebih spesifik seperti bentuk, lebar dan warna dari border tersebut. a. Border style Digunakan untuk menentukan bentuk border. Terdapat beberapa bentuk border yang dapat ditampilkan menggunakan CSS : Dotted, border titik titik Dashed, border putus putus Solid, garis border solid/utuh Double, garis border ganda Groove, border berlekuk SD Ridge, border bergerigi 3D Inset, border efek inset 3D Outset, border efek outset 3D None, tidak ada border Hidden, border teresembunyi b. Border width Digunakan untuk mengatur lebar border, dapat diatur dengan satuan tertentu (dalam px, pt, cm, em, dll) atau menggunakan salah satu dari 3 (tiga) nilai yang sudah ditentukan yaitu thin, medium, atau thick. c. Border color Digunakan untuk mengatur warna border, dapat diatur dalam beberapa cara : Nama warna misal red, green, blue Hexadesimal, misal #FF0000 Nilai RGB, misal rgb(255,0,0) Transparan atau tidak ada warna d. Border radius Digunakan untuk membuat sudut border membulat. Nilai dari property borderradius adalah px (piksel). 46
8 2. Margin Property margin digunakan untuk memberikan ruang di luar border di sekeliling atas, kanan, bawah dan kiri isi/elemen. Property margin dapat ditulis langsung dengan cara disingkat (Shorthand) untuk keempat sisi tersebut, atau bisa satu per satu (Individual Sides) yang dibagi menjadi margin top, margin right, margin bottom, dan margin left. Penulisan shorthand pada margin terkadang dapat ditulis dalam 4 nilai, 3 nilai, 2 nilai, atau 1 nilai saja. Perhatikan tabel berikut : Margin Margintorighbottoleft Margin Margin Margin 10px 5px 20px 15px; 10px 5px 20px 15px 10px 5px 20px 10px 5px 20px 0px 10px 5px 10px 5px 10px 5px 10px 10px 10px 10px 10px Sedangkan nilai property margin dapat diatur berdasarkan : Auto, browser mengkalkulasikan otomatis keempat sisi margin Lenght, diatur dalam px, pt, cm, dll. %, diatur dalam % dari lebar elemen 3. Padding Property padding digunakan untuk memberikan ruang di dalam border di sekeliling atas, kanan, bawah dan kiri isi/elemen. Seperti halnya margin, property padding dapat ditulis langsung dengan cara disingkat (Shorthand) untuk keempat sisi tersebut, atau bisa satu per satu (Individual Sides) yang dibagi menjadi margin top, margin right, margin bottom, dan margin left. Penulisan nilai pada padding sama seperti dengan margin, dapat dituliskan langsung 4 nilai, 3 nilai, 2 nilai, atau hanya 1 nilai saja. Serta pengertian untuk masing masing sisi juga sama halnya seperti margin. 4. Float dan Clear Property float digunakan untuk mengatur element agar melayang atau tidak. Secara default, tanpa property float jika setiap element baru dibuat maka akan diletakkan ke bawah dari element sebelumnya. Oleh karena itu, dengan property float, 2 atau lebih element dapat diletakkan sejajar. Nilai dari float berupa left, right, atau none (default). Sedangkan property clear digunakan untuk mengendalikan element yang melayang oleh float. Setelah sebuah elemen menggunakan property float, maka ruang disekitar element tersebut dapat diisi oleh elmeent selanjutnya, jika tidak ingin demikian atau untuk membersihkan area melayang, dapat menggunakan property clear. 47
9 Display Display merupakan property CSS yang paling penting untuk mengendalikan layout. Property display menentukan bagaimana element element dalam layout akan ditampilkan. 1. Block Level Elements Merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada pada baris barunya sendiri ketika dituliskan. Contoh element element ini adalah : <div> <h1> - <h6> <p> <form> <header> <footer> <section> 2. Inline Elements Merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh elemen elemen ini adalah : <span> <a> <img> 6.3. ALAT DAN BAHAN 1. PC (Personal Computer) 2. Web Browser 3. Notepad LANGKAH PRAKTIKUM 1. Praktikum 6.1. Border Buka Notepad++ Tuliskan syntaks berikut pada halaman yang kosong : <html> <head> <style> p.dotted {border-style: dotted; p.dashed {border-style: dashed; p.solid {border-style: solid; p.double {border-style: double; p.groove {border-style: groove; p.ridge {border-style: ridge; 48
10 p.inset {border-style: inset; p.outset {border-style: outset; p.none {border-style: none; </style> </head> <body> <h2>macam-macam style border</h2> <p class="dotted">a dotted border.</p> <p class="dashed">a dashed border.</p> <p class="solid">a solid border.</p> <p class="double">a double border.</p> <p class="groove">a groove border.</p> <p class="ridge">a ridge border.</p> <p class="inset">an inset border.</p> <p class="outset">an outset border.</p> <p class="none">no border.</p> </body> </html> Simpan file sebagai border.html. Hasilnya : 49
11 2. Praktikum 6.2 Margin Buka Notepad++ Tuliskan syntaks berikut pada halaman kosong : <html> <head> <style> div { border: 1px solid black; margin: 40px 50px 60px 30px; background-color: lightblue; </style> </head> <body> <div>elemen ini memiliki margin atas 40px, kanan 50px, bawah 60px, dan kiri 30px.</div> </body> </html> Simpan file sebagai margin.html. Hasilnya : 3. Praktikum 6.3 Padding Buka Notepad++ Tuliskan syntaks berikut pada halaman kososng : <html> <head> <style> 50
12 div { border: 1px solid black; padding: 40px; background-color: lightblue; </style> </head> <body> <div>elemen ini memiliki padding atas, kanan, bawah, dan kiri 40px.</div> </body> </html> Simpan file sebagai padding.html. Hasilnya : 4. Praktikum 6.4 Float Buka Notepad++ Tuliskan syntaks berikut pada halaman kosong : <html> <head> <style> div{ border:1px solid black; margin:5px; height:50px; width:100px; background:lightblue.kiri { height:50px; 51
13 width:100px; float:left; background: lightblue;.kanan { height:50px; width:100px; float:right; background: lightblue; </style> </head> <body> <div>elemen tanpa float.</div> <div class="kiri">elemen dengan float kiri.</div> <div class="kanan">elemen dengan float kanan.</div> </body> </html> Simpan file sebagai float.html. Hasilnya : 5. Praktikum 6.5 Display Buka Notepad++ Tuliskan syntaks berikut pada halaman kosong : <html> <head> <style> div{ border:1px solid; 52
14 margin:0 auto; height:100px; width:500px; background:skyblue; span{ display:block; background:red; </style> </head> <body> <div> Ini adalah elemen pertama menggunakan DIV <div> Ini DIV di dalam DIV namun membuat elemen blok baru <span>ini SPAN di dalam DIV tidak membuat elemen blok baru</span> </div> </div> </body> </html> Simpan file sebagai display.html. Hasilnya : 53
15 6.5. LATIHAN Buatlah tampilan layout menggunakan HTML dan CSS sehingga tampilannya seperti berikut : 54
16 KAJIAN 2 CSS (Cascading Style Sheets) MODUL 7 Teks, Font, Color, Background Kompetensi Dasar : Mampu merancang antarmuka berbasis website statis 7.1. TUJUAN Memahami penggunaan property Font, Text, Color, dan Background pada CSS dalam membuat layout desain web statis LANDASAN TEORI Teks CSS menyediakan beberapa atribut dalam mengatur tulisan atau teks, diantaranya : 1. Color, digunakan untuk mengatur warna teks. Nilai atribut dapat dituliskan berdasarkan nama warna, hexadecimal, atau nilai RGB. 2. Text align, digunakan untuk mengatur perataan teks secara horizontal. Nilai atribut ini adalah left (rata kiri), center (rata tengah), right (rata kanan) dan justify (rata kanan kiri). 3. Text decoration, digunakan untuk mengatur dan menghilangkan decorasi pada teks. Nilai yang dapat diinputkan adalah none (menghilangkan garis bawah pada hyperlink), overline (garis di atas teks), line through (garis di tengah teks), dan underline (garis bawah). 4. Text transform, digunakan untuk mengatur besar kecilnya teks. Nilai yang dapat diinputkan adalah uppercase (huruf kapital), lowercase (huruf kecil), dan capitalize (huruf besar di awal kata) 5. Text indent, digunakan untuk memberi jarak ruang indent pada baris pertama teks. Biasa digunakan pada paragraf baru. 6. Letter spacing, digunakan untuk mengatur jarak antar karakter dalam teks. 7. Line height, digunakan untuk mengatur jarak antar baris teks. 8. Direction, digunakan untuk mengatur arah teks dari sebuah elemen. 9. Word spacing, digunakan untuk mengatur jarak antar kata dalam teks. 10. Text shadow, digunakan untuk memberi bayangan pada teks Font Beberapa atribut yang dapat digunakan dalam pengaturan font antara lain : 1. Font family, digunakan untuk mengatur bentuk font dan mencari jenis font yang nampak sama jika font yang diinginkan tidak didukung oleh browser. Nilai pada atrbut font family haruslah terdiri dari beberapa nama font sebagai fallback, jika browser tidak mendukung font pertama maka akan mencoba font berikutnya, dan seterusnya. 2. Font style, biasa digunakan untuk membuat teks miring (italic). Nilai yang dapat dipakai adalah normal, italic, dan oblique. 3. Font size, digunakan untuk mengatur ukuran teks. Nilai yang diinputkan berupa angka dengan satuan px, em, dan %. 55
17 4. Font weight, digunakan untuk mengatur ketebalan teks. Nilai yang dipakai berupa normal, lighter (lebih tipis), atau bold (tebal). 5. Font variant, digunakan untuk mengatur apakah teks akan ditampilkan dalam ukuran kapital kecil, maksudnya adalah jika nilainya adalah small caps maka semua huruf akan diubah ke huruf besar, namun dengan ukuran yang lebih kecil layaknya huruf kecil Warna CSS dalam pemilihan warna seringkali menggunakan 3 jenis nilai berikut : 1. Nawa Warna, yaitu dengan menyebutkan nama warna dalam bahasa inggris, misal red, blue, green. Penulisan nama warna adalah tidak case sensitive yaitu besar kecilnya huruf tidak berpengaruh, dimana red sama dengan Red sama dengan RED. HTML dan CSS mendukung 140 nama warna standar. Beberapa coontoh diantaranya : : red : green : blue : orange : yellow : cyan : black 2. RGB (Red, Green, Blue), yaitu dengan menggunakan kombinasi parameter intensitas antara warna merah, hijau, dan biru. Masing masing warna memiliki intensitas nilai antara Contoh penulisan untuk nilai ini adalah RGB(red,green,blue), misal rgb(255,0,0) untuk warna merah. : rgb(255,0,0) : rgb(0,255,0) : rgb(0,0,255) : rgb(255,165,0) : rgb(255,255,0) : rgb(0,255,255) : rgb(0,0,0) 3. Hexadecimal, yaitu dengan menggunakan kombinasi warna red, green, blue dalam bentuk bilangan heksadesimal antara 00 dan FF (sama halnya 0 255), dengan format : #RRGGBB. Misal #FF0000 untuk warna merah. : #FF0000 : #00FF00 : #0000FF : #FFA500 : #FFFF00 : #00FFFF : #
18 Background Digunakan untuk memberikan efek untuk latar belakang sebuah elemen. 1. Background color, untuk memberikan warna latar belakang. 2. Background image, untuk memebrikan latar belakang berupa gambar. 3. Background repeat, untuk mengatur penggandaan gambar jika container lebih besar dari gambar. 4. Background attachment, untuk mengatur letak dimana gambar akan fixed (tidak ikut scroll halaman). 5. Background position, untuk menentukan letak/posisi gambar sesuai yang diinginkan ALAT DAN BAHAN 1. PC (Personal Computer) 2. Web Browser 3. Notepad LANGKAH PRAKTIKUM 1. Praktikum 7.1. Teks dan Font Buka Notepad++. Tuliskan syntaks berikut ada halaman yang kosong : <html> <head> <style> body{ background-image:url("gambar.jpg"); background-position:right top; background-repeat:no-repeat h1{ text-shadow:5px 2px red p{ text-indent:30px; color:red; text-align:justify i{letter-spacing:-1px ul{line-height:0.8; a{ font-size:12px; font-weight:bold; font-family:arial, Times New Roman; text-decoration:none; text-transform:lowercase </style> </head> <body> 57
19 <h1>css</h1> <p> CSS <i>(cascading Style Sheets) </i>merupakan cara untuk memisahkan isi dengan layout dalam halaman-halaman web. CSS memperkenalkan template berupa style untuk membuat dan mempermudah penulisan dari halaman-halaman yang dirancang. CSS dapat menciptakan halaman yang tampak sama dengan resolusi layar dari pengunjung yang berbeda tanpa memerlukan suatu tabel.designer web akan lebih mudah melakukan setting tampilan keseluruhan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS dengan atribut yang diinginkan tanpa harus mengubah satu per satu atribut tiap elemen yang ada dalam situs.</p> Referensi : <ul> <li><a href=""> <li><a href=""> </ol> </body> </html> Simpan file sebagai modul7.html. Hasilnya : 58
20 7.5. LATIHAN Buatlah sebuah elemen header sederhana seperti pada gambar di bawah dengan ketentuan berikut : Gunakan gambar sebagai background tanpa penggandaan. Nama judul terdapat bayangan dengan warna sesuai gambar. Judul terletak di sisi kanan atas, sedangkan deskripsi di sisi kiri bawah. Jarak antar kata pada deskripsi lebih jauh. 59
21 KAJIAN 2 CSS (Cascading Style Sheets) MODUL 8 Layer dan Hyperlink Kompetensi Dasar : Mampu merancang antarmuka berbasis website statis 8.1. TUJUAN Mengetahui dan memahami penggunaan property property yang digunakan dalam mengatur layer dan hyperlink pada CSS dalam membuat halaman website statis LANDASAN TEORI Position Property ini dapat digunakan untuk mengatur posisi sebuah elemen. Elemen elemen diposisikan menggunakan nilai top, bottom, left, dan right, namun harus mengatur nilai untuk posisi elemen tersebut. Beberapa nilai untuk mengatur property position : 1. Static, elemen diposisikan statis atau default. Posisi static tidak dipengaruhi oleh property top, bottom, left, dan right. 2. Relative, elemen diposisikan relatif ke posisi normal (default). Memiliki sifat yang sama dengan position:static yang mengalir, akan tetapi perbedaannya position:relative ini bisa mengatur posisinya dengan bantuan property top, left, right, bottom. 3. Absolute, jenis posisi yang fungsinya paling powerful. Berbeda dengan position:static dan position:relative yang terus mengalir, position:absolute ini cenderung tidak mengisi ruangan seperti 2 position lainnya, dan diam ditempat jika beberapa tag dengan position:absolute ini berbarengan. Position:absolute ini dibarengi dengan property 4 arah (top, left, right, bottom). Akan tetapi bedanya kalau di position relative titik 0px nya adalah item itu sendiri, sedangkan di position:absolute ini titik 0px nya adalah layer yang bersifat container yang ada di parentnya, atau kalau tidak ada layer container sama sekali, maka pojokkan browser sendiri lah yang menjadi titik 0px nya. 4. Fixed, Memposisikan elemen secara permanen di suatu titik yang tetap diam sekalipun ngescroll halaman sampe manapun Z index Property ini digunakan untuk mengatur tumpukan (layer) elemen, semakin besar nilai z index maka akan ditempatkan paling depan. Z index dapat digabungkan dengan property posisition dengan nilai relative, absolute, dan fixed Hyperlink CSS menyediakan property untuk mengatur hyperlink dengan bermacam cara diantaranya : 1. Link Style, digunakan untuk mengatur state hyperlink, terdiri dari : A:link state normal, link belum dikunjungi. A:visited link sudah dikunjungi user. 60
22 A:hover state saat user melewatkan pointer di atas link. A:active state saat link diklik oleh user. 2. Text decoration, seringkali digunakan untuk menghilangkan garis bawah pada link. 3. Background color, digunakan untuk memebrikan barna latar pada link. 4. Link button, dengan mengkombinasikan beberapa property CSS, dapat membuat tombol untuk link sesuai keinginan ALAT DAN BAHAN 1. PC (Personal Computer) 2. Web Browser 3. Notepad LANGKAH PRAKTIKUM 1. Praktikum 8.1. Poition Buka Notepad++. Tuliskan syntaks berikut pada halaman yang kosong : <html> <head> <style>.static{ left:100px; position:static; width:300; height:1000; background:red.relative{ left:100px; position:relative; width:400; height:200; background:blue.absolute{ left:350px; top:150px; position:absolute; width:300; height:100; background:lightgreen.fixed{ 61
23 left:300px; top:50px; position:fixed; width:200px; height:100px; background:lightblue </style> </head> <body> <div class="static">ini elemen Position:static.<br>Nilai left:100px tidak berpengaruh</div> <div class="relative">ini elemen Position:relative<br>Nilai left:100px berpengaruh, tetap mengikuti alur</div> <div class="absolute">ini elemen Position:absolute<br>Bisa diletakkan dimana saja</div> <div class="fixed">ini elemen Position:fixed<br>Posisi tetap walau discroll</div> </body> </html> Simpan file sebagai position.html. Hasilnya : 62
24 2. Praktikum 8.2. Z index Buka Notepad++. Tuliskan syntaks berikut pada halaman yang kosong : <html> <head> <style>.satu{ position:absolute; margin:0 20px; height:200px; width:400; background:red; z-index:1.dua{ position:absolute; margin:100px 0; height:150px; width:300; background:lightblue; z-index:2.tiga{ position:absolute; margin:20px 150px; height:200px; width:200; background:yellow; z-index:3 </style> </head> <body> <div class="satu">layer 1</div> <div class="dua">layer 2</div> <div class="tiga">layer 3</div> </body> </html> Simpan file sebagai z index.html. Hasilnya : 63
25 3. Praktikum 8.3. Hyperlink Buka Notepad++. Tuliskan syntaks berikut pada halaman yang kosong : <html> <head> <style> a:link, a:visited { background-color: blue; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; a:hover, a:active { background-color: skyblue; </style> </head> <body> <a href=" </body> </html> Simpan file sebagai hyperlink.html. 64
26 Hasilnya : 8.5. LATIHAN Buatlah sebuah tampilan navigasi (menu) yang terdiri dari tombol tombol yang terbuat dari tag list di sisi kiri, dan tombol tombol icon social media di sisi kanan, sehingga tampak pada gambar berikut : 65
27 KAJIAN 2 CSS (Cascading Style Sheets) MODUL 9 Layout Website Sederhana Kompetensi Dasar : Mampu merancang antarmuka berbasis website statis 9.1. TUJUAN Memahami dan mengetahui bagaimana cara membuat layout website sederhana yang terdiri dari elemen header, menu, sidebar, konten, dan footer LANDASAN TEORI Layout website bisa diartikan sebagai tata letak elmeen elemen dari sebuah halaman website. Sebuah layout website yang paling sederhana terdiri dari elemen elemen berikut : 1. Header, merupakan elemen yang berisi judul dan sub judul (deskripsi) website. Biasanya header di bagian atas. 2. Menu, elemen yang berisi tombol tombol navigasi yang berguna mengarahkan user ke halaman tertentu. 3. Konten, merupakan elemen utama website, yang berisi informasi utama yang dibahas dalam halaman website tersebut. 4. Sidebar, merupakan elemen yang berisi informasi informasi pendukung dari konten website. 5. Footer, elemen yang biasanya berisi informasi tentang pembuatan atau hak cipta website tersebut. Biasanya elemen ini diletakkan paling bawah ALAT DAN BAHAN 1. PC (Personal Computer) 2. Web Browser 3. Notepad++ 4. File gambar (sebagai header) berukuran 730px X 300px. 5. File gambar lain berukuran bebas LANGKAH PRAKTIKUM 1. Membuat layout HTML Siapkan 2 file gambar, dengan nama logo.jpg dan gambar1.jpg. Buka Notepad++ Tuliskan syntaks berikut pada halaman kosong : <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>desain Web</title> 66
28 </head> <body> <div id="wrap"> <div id="kiri"> <br><center><img src="images/logo.jpg" height="200" width="200"> </center><br> <h2>artikel Populer</h2> <ul> <li><a href="#">desain Web</a></li> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">lain-lain</a></li> </ul> </div> <div id="header"> <div id='judul'> <a href="#">belajar Layout Website</a></div> <div class="desc"> Menggunakan HTML dan CSS </div> </div> <div id="menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">tentang</a></li> <li><a href="#">galeri</a> <ul> <li><a href="#">video</a></li> <li><a href="#">photo</a> <ul> <li><a href="#">pribadi</a></li> <li><a href="#">umum</a></li> </ul> </li> </ul> </li> <li><a href="#">kontak</a></li> <li><a href="#">daftar ISI</a></li> <li><a href="#">buku TAMU</a></li> </ul> </div> <div id="konten"> <div class="posttitle">selamat Datang</div> <div class="post"> 67
29 <p>belajar Membuat Layout Desain Web menggunakan HTML dan CSS dengan mudah.</p> <p>untuk belajar HTML klik halaman <b><a href="#">html</a></b> dan belajar CSS ke halaman <b><a href="#">css</a></b>.</p> </div> <div class="posttitle">galeri</div> <div class="post"> <img src="images/gambar1.jpg"> <img src="images/gambar1.jpg"> <img src="images/gambar1.jpg"> </div> </div> <div id="footer"> © Copyright All Right Reserved</br> Fakultas Ilmu Terapan Universitas Telkom</div> </div> </body> </html>. Simpan file sebagai index.html. 2. Membuat Style Siapkan file gambar berukuran 730px X 300px dengan nama header.jpg. Buka Notepad++. Tuliskan syntaks berikut pada halaman kosong : #wrap { width:1000px; height:800px; margin:0 auto; background-color:white #header{ background-image:url(images/header.jpg); border-bottom-right-radius:50px; width:730px; height:300px; margin:auto; box-shadow:0 0 10px rgba(0,0,0,.25); float:right #judul { 68
30 font-size:50px; text-align:right; padding:200px 40px 0 0 #judul a { color:white; text-decoration:none #judul a:hover { color:grey.desc { font-size:30px; color:white; text-align:right; padding: 0 40px 0 0 #menu ul { float:right; background: darkblue; padding:0 0px; position:relative; box-shadow:0 0 10px rgba(0,0,0,.25); list-style:none; width:730px #menu ul:after { content:""; clear:both; display:block #menu ul li { float:left #menu ul li:hover { background:blue #menu ul li a { display:block; color:white; padding:10px 20px; text-decoration:none #menu ul li:hover a { color: white #menu ul li:hover > ul { display:block #menu ul ul { background:darkblue; position:absolute; padding:0; top:100%; display:none; width:auto #menu ul ul li { float:none; position:relative #menu ul ul li a { padding:10px 30px; color:white #menu ul ul li a:hover { background:blue; color:white #menu ul ul ul {position: absolute; left: 100%; top:0 69
31 #kiri { border-top-left-radius:50px; background-color:white; width:250px; height:auto; margin:0 0 20px; float:left; list-style:none; box-shadow:0 0 10px rgba(0,0,0,.25); float:left #kiri ul { margin:0 0 20px 20px;padding:0; liststyle:none;width:200px #kiri li { width:100%; margin:0;padding:0; liststyle:none #kiri h2 { margin:0px 0 0px 0; padding:5px 12px; color:white; font-size:20px; background: darkblue #kiri a { display:block; padding:3px 10px; text-decoration:none; color:black; border-bottom:1px dotted blue #kiri a:hover { background:blue; color:white #konten { background-color:white; width:690px; height:auto; margin:0 0 20px; padding:20px 20px 20px 20px; float:right; box-shadow:0 0 10px rgba(0,0,0,.25).posttitle { text-decoration:none; font-size:30px; font-family:arial; color:blue; 70
32 .posttitle a { text-decoration:none.post{ margin:0 20px 0 20px; text-align:justify b a { color:blue; text-decoration:none img { width:200; height:200 #footer { background-color:darkblue; padding: 20px 0 0 0; width:1000px; height:90px; clear:both; margin:20 0; text-align:center; color:white; border-top-left-radius:50px; border-bottom-right-radius:50px; Simpan file sebahai style.css. Lihat hasilnya dengan membuka file index.html l, sebagai berikut : 71
33 9.5. LATIHAN Buatlah halaman web untuk TENTANG, GALERI, dan BUKU TAMU beserta isinya sehingga total terdapat 4 halaman yang saling terhubung menggunakan hyperlink. 72
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
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
XHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
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
{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
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
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 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. 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
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
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
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
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
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
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
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
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.
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
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
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
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:
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
CSS Layouting. Antonius RC Pemrograman Web
CSS Layouting Antonius RC Pemrograman Web CSS Selector Tambahan Tanda > artinya select child element Contoh: ul > li Maka akan terambil 2 elemen li CSS Selector Tambahan Tanda + artinya select adjecent
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
CSS dan Tata Letak Pemrograman Internet (TKE ) Program Studi Teknik Elektro, Unsoed
CSS dan Tata Letak Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed Iwan Setiawan Tahun Ajaran 2011/2012 a, a:visited { text-decoration:none; } a:hover { text-decoration:underline;
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
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
BAB 6 CSS 6.1. CSS SYNTAX. Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi.
BAB 6 CSS 6.1. CSS SYNTAX Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi. Selector berupa tag HTML dan pendeklarasian Class dan Id. Selector berfungsi untuk menentukan bagian mana pada
Nilainya berupa nama font yang diinginkan dan. Memasukkan nilai dari beberapa font sekaligus dengan pemisah tanda koma (,):
A. Font 1. Font-Family Nilainya berupa nama font yang diinginkan dan generic font Memasukkan nilai dari beberapa font sekaligus dengan pemisah tanda koma (,): Nilai Nama font Generic font Contoh Font-family:verdana
LAYER DAN HYPERLINK. B. Kegunaan Layer: 1. Layer
1. Layer A. Dasar Layer Untuk membuat layer, yang harus anda butuhkan adalah menentukan atribut posisi untuk style anda. Posisi tersebut dapat sebagai posisi absolute atau posisi relative Posisi diatas
NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS.
PRAKTIKUM : Borders NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS. B. DASAR TEORI Border jika diartikan adalah
CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS
PERTEMUAN 4 CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi
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 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
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 (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
/* 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
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
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 6 CSS For Layout Tujuan: Mahasiswa mengenal komponen-komponen CSS yang dapat digunakan untuk mengatur tata letak element HTML dalam membangun website
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-5 (CSS) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan CSS? Contoh sederhana Selector Mekanisme mengaplikasikan
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
CSS Lanjut Pertemuan - 5
CSS Lanjut Pertemuan - 5 Semester Ganjil 2009/2010 CSS Lanjut Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value: auto Nilai / Value ukuran
Cascading Style Sheet (CSS) Didik Dwi Prasetya
Cascading Style Sheet (CSS) Didik Dwi Prasetya didikdwi@gmail.com CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)
Percobaan 1 : Mengatur Width Dan Height Hasil :
Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color
[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.
![[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.](/thumbs/60/44614476.jpg "[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.")
[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.KOM STMIK TASIKMALAYA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
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
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 18. Lebih Dalam Bekerja dengan CSS 1 Bagian
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,
Cara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
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
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;
CSS BOXES. Langkah Kerja. Percobaan
Tugas : Percobaan Praktikum 8 Materi : CSS Boxes Nama : Dwi Setiya Ningsih NRP : 2103157025 Langkah Kerja CSS BOXES Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan
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. Auriza Akbar 1 Juni 2012
CSS Auriza Akbar auriza.akbar@gmail.com 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/
A. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
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
KARTU BIMBINGAN TUGAS AKHIR MAHASISWA
DEPARTEMEN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) JL. BIOTEKNOLOGI NO. 1 KAMPUS USU Telp. (061) 82144290 MEDAN 20155 KARTU BIMBINGAN TUGAS
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
Perancangan Web. Perancangan Web. Oleh : Moh. Sulhan. By : MOH.SULHAN
Oleh : Moh. Sulhan 1 Apa itu CSS? - Merupakan bahasa style sheet yang digunakan untuk mengatur tampilan dokumen - Sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color,
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan
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
Triswansyah Yuliano
Mendesain Menu dengan CSS Triswansyah Yuliano triswansyah_yuliano@yahoo.com http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
TUGAS BOXES. 1. Percobaan 1
TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 19. Membuat Halaman Website Minimalis 1 Bagian
Cascading Style Sheets (CSS)
Pertemuan ke 4 Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah
Tutorial Lengkap Memahami CSS Position
Tutorial Lengkap Memahami CSS Position Oleh: Christian Rosandhy Salah satu property CSS yang masih bisa bikin kita bingung dan salah langkah itu adalah POSITION. Kapan kita harus pakai position static,
Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya
Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar Memahami perkembangan HTML5.
WEB DEVELOPMENT by Hestiasari Rante-Pasila. Week 3 Cascading Style Sheets (CSS) Part 1
WEB DEVELOPMENT by Hestiasari Rante-Pasila Week 3 Cascading Style Sheets (CSS) Part 1 WHAT IS CSS? CSS: Cascading Style Sheets Styles ini mendeskripsikan bagaimana menampilkan elemen-elemen HTML Styles
MODUL 3 STYLE SHEET RINGKASAN
MODUL 3 STYLE SHEET RINGKASAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tiba saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk keperluan tersebut, Anda
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
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
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) Instruktur: Arif Nurwidyantoro Intro Cascading Style Sheets (CSS) digunakan untuk mendefinisikan bagaimana sebuah elemen HTML ditampilkan. Sebuah elemen HTML dapat ditampilkan
Membuat Layout Header Diam di Tempat (Fix Header)
Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout
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
CSS Eksternal. Instruktur: Arif Nurwidyantoro
CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan
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) 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
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
MODUL I PENGENALAN HTML. a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2.
MODUL I PENGENALAN HTML A. MAKSUD DAN TUJUAN 1. Maksud a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2. Tujuan a. Mahasiswa dapat membuat
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
Desain Grafis. RAHMADY LIYANTANTO liyantanto.wordpress.com
Desain Grafis RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Apa Desain Grafis..? Desain Grafis dapat diartikan sebagai proses pemikiran yang diwujudkan dalam gambar. >> Ruang Lingkup:
Tutorial Lengkap Memahami CSS Display
Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak
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
SImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
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
A. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
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
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,
Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS
Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Oleh: Rahmat Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab
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
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
Cascading Style Sheet (CSS) pada HTML
Cascading Style Sheet (CSS) pada HTML Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola. Di dalamnya terdapat
Pengenalan HTML dan CSS
Pengenalan HTML dan CSS Pengenalan HTML dan CSS Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO Pengenalan HTML dan CSS Jubilee Enterprise 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi
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
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
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Pengertian CSS CSS singkatan dari Cascading Style Sheets, yaitu bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus CSS menggambarkan bagaimana elemen-elemen
Iankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com
Cascading Style Sheet
Cascading Style Sheet Manfaat: Memperindah tampilan halaman website. Mempermudah mengubah secara keseluruhan warna dan tampilan. Memformat ulang situs Anda secara cepat. Menghemat kode dan waktu dalam
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