BAB 9 FORM DAN DIV. Tujuan Instruksional
|
|
- Hendra Iskandar
- 7 tahun lalu
- Tontonan:
Transkripsi
1 BAB 9 FORM DAN DIV Form merupakan interface atau penghubung antara aplikasi dengan penggunanya. Demikian pula pada aplikasi berbasis web, terutama pada web dinamis. Oleh karena itu, form harus didesain dengan baik agar tidak terjadi kesalahpahaman ketika pengguna menggunakannya. Untuk membuat form yang menarik dapat digunakan Cascading Style Sheet (CSS). Tujuan Instruksional Mahasiswa memahami penggunaan tag div dan form, serta elemen yang ada di dalam form.
2 9.1 Form Form merupakan bagian dari aplikasi web yang digunakan oleh pengguna untuk memberikan informasi ataupun memberikan respon tertentu pengguna kepada website. Sebuah form sangat penting dalam sebuah aplikasi web, terutama pada aplikasi web dinamis. Mengetahui bagaimana membuat form pada HTML dengan benar merupakan merupakan hal penting untuk memastikan tidak terdapat kesalahpahaman pada pengguna ketika menggunakan form yang disediakan Praktek Pembuatan Form 1. Praktek bertujuan untuk membuat form dengan mockup berikut. 2. Buka Aplikasi Adobe Dreamweaver 3. Klik menu Klik File New Category : Basic, Basic page : HTML bagian Create. Setelah itu akan tampil lembar kerja document baru. 257
3 4. Klik menu Insert Form Form. 5. Buat tabel dengan spesifikasi berikut. Width Table : 700 pixels Column : 3 Rows : Ketik teks pada setiap baris, mulai dari Nama sampai dengan Pada baris Nama, masukkan textfield. Pada panel insert, aktifkan tab forms dan klik tools Textfield. 8. Selanjutnya baris Alamat, masukkan elemen textarea. 9. Pada baris Tempat, Tgl. Lahir masukkan textfield, setelah itu untuk tanggal, bulan dan tahun masukkan List/Menu. Bila kotak dialog tampil, klik OK. 10. Tambahkan Textfield untuk Tempat. Kemudian pada baris Tgl. Lahir tanggal, bulan dan tahun tambahkan elemen List/Menu ( ). Bila kotak dialog tampil, klik OK. 258
4 11. List masih dalam keadaan aktif. Pada properties inspector, klik tombol list values. Lanjutkan dengan pengisian data, seperti berikut. 12. Ketikan Tanggal di bawah Ite Label, kemudian klik tanda ( ) untuk menambah item label, lalu ketik angka 1, klik tanda ( ), ketik angka 2, dan seterusnya sampai dengan angka Lakukan langkah 11 dan 12 untuk membuat pilihan bulan dan tahun. 14. Pada baris Status, tambahkan elemen Radio Group ( ). Pada kotak dialog Radio Grup ubahlah : Name = Status, pada kolom label Radio = Belum Nikah, Radio = Nikah, value radio=bn, radio=n. 259
5 Sehingga berubah menjadi : 15. Untuk Hobby tambahkan Checkbox ( ). Pada kotak dialog Input Tag isikan label = Membaca. Buatlah checkbox berikutnya untuk pilihan hobby lainnya. 16. Pada baris Telepon dan masukkan textfield. 17. Buat Tombol simpan dengan menggunakan elemen Button. Ketika muncul kotak dialog Input Tag klik OK. Kemudian pada properties inspector ubah Action = Submit form, Value = Simpan, Button name = tbsimpan. 260
6 18. Lanjutkan dengan memasukkan button kembali pada tempat yang sama. Ubah Action = Reset form, Value = Batal, Button name = tbbatal. 19. Agar tampilan form terlihat bagus, maka lakukan pengaturan teks dan Background. 1. Jenis Font : Comic Sans MS, Chiller 2. Font Color : #FFFFFF 3. Font Size : 14 px 4. Background Color : #6666FF 20. Tekan tombol Ctrl + Shift + S, kemudian simpan nama Form Biodata. Jalankan dengan menekan tombol F12, sehingga dihasilkan halaman web berikut. 261
7 9.1.2 Tugas Praktek Buatlah halaman web Form Biodata Donatur dengan bentuk sebagai berikut. 262
8 9.2 Layer dan Div Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, dapat dibuat suatu halaman web yang tampilannya lebih fleksibel. Layer digunakan untuk menampilkan objek dengan posisi yang dapat diatur-atur secara bebas, tanpa terbatas pada pandangan baris-demi-baris. Analoginya, layer diumpamakan sebagai plastik transparan yang dapat diletakkan dimana saja di atas kertas. Antara satu layer dengan layer lainnya dapat saling bertumpuk, selain itu layer dapat diisi dengan text ataupun image. Untuk beberapa browser yang tidak mendukung adanya layer, maka disediakan juga fasilitas untuk menkonversi dari layer menjadi tabel Praktek Penggunaan Layer 1. Jalankan Adobe Dreamweaver 2. Buka file Form Biodata Donatur yang sudah dibuat pada modul sebelumnya. 3. Pastikan anda memiliki file-file gambar yang akan ditambahkan pada halaman web tersebut. 4. Untuk membuat layer bisa memilih menu : Insert layout object Layer atau dengan cara termudah memanfaatkan insert bar untuk layout : 5. Tambahkan layer pada pada Form Biodata Donatur seperti ditampilkan pada gambar berikut. 263
9 Layer 6. Untuk melihat daftar layer-layer yang telah dibuat, maka bisa dengan membuka layer panel, (jika layer panel belum terlihat, maka bisa dibuka dengan memilih menu Windows layer atau dengan menekan F2). 7. Prevent overlaps jika dicentang maka akan mencegah layer saling bertumpuk. 8. Pada Properties Inspector perhatikan : 9. Name adalah nama layer, sedangkan z adalah valensi atau tingkatan layer, semakin besar angkanya maka posisinya akan berada di atas yang lain (jika kondisi layer bertumpuk), apabila 264
10 diinginkan angka ini bisa dirubah urutannya. Bg Image untuk menetapkan gamba ryang akan ditampilkan pada layer. 10. Untuk posisi L = Left, T= Top, untuk : ukuran W=width dan H=height Praktek Penggunaan Div 1. Jalankan dreamweaver, kemudian pilih HTML. 2. Setelah masuk ke dalam tempat coding, letakkan kursor berada pada sebelah kanan <body>, klik Menu Insert Layout Objects Div tag. Sehingga tampil kotak dialog Insert Div Tag berikut. Posisi Cursor 3. Klik tombol New CSS Rule, kemudian ketikan Content sebagai nama selector dan akhiri dengan menekan tombol OK. 265
11 4. Pada kotak dialog CSS Rule Definition for Content, pada Category : Background diubah jadi warna abu-abu; Positioning : Position=Static, Width=1300, Height=500, kemudian akhiri dengan menekan tombol OK. 266
12 5. Tekan OK kembali pada kotak berikut. 6. Selanjutnya membuat Div untuk SideBar. Pada bagian Coding tempatkan cursor di depan Div Content. Posisi Cursor 7. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div SideBar dengan pengaturan pada kotak dialog CSS Rule Definition for SideBar, pada Category : Background diubah jadi warna Kuning (#FF0); Box : Width=200, Height=500, dan Float:Left; kemudian akhiri dengan menekan tombol OK. Hasil akhirnya : 267
13 8. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div Header dengan pengaturan pada kotak dialog CSS Rule Definition for Header, pada Category : Background diubah jadi warna Biru (#06F); Positioning : Position=Static, Width=200, dan Height=1300, kemudian akhiri dengan menekan tombol OK. Hasil akhirnya : 9. Selanjutnya membuat Div untuk Container. Pada bagian Coding tempatkan cursor di depan <Body>. 10. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div Container dengan pengaturan pada kotak dialog CSS Rule Definition for Container, pada Category : Background diubah jadi warna Hijau (#0C0); Positioning : Position=Static, Width=1300, dan Height=30, kemudian akhiri dengan menekan tombol OK. 268
14 Hasil akhirnya : Tugas Praktek Silakan isi layout yang telah dibuat sesaui dengan tema masingmasing, baik content maupun desainnya. 269
15 9.3 Rangkuman Form perlu dibuat sebagai interface antara pengguna dengan aplikasi. Form bisa dibuat dengan menggunakan objek form dan elemennya yang sesuai dengan data yang akan dimasukkan. Tabel dapat digunakan untuk mengatur tata letak penempatan elemen-elemen form. Layer digunakan untuk menempatkan objek dalam form secara lebih fleksibel. Div digunakan untuk membagi-bagi area form menjadi bagian-bagian yang dapat ditempati oleh objek form, sehingga tercipta pengaturan layout yang baik. 270
16 9.4 Daftar Pustaka Heffernan, Brandon., Dreamweaver CS5 : Advanced, ACA Edition, Axzo Press, Adobe, Using ADOBE DREAMWEAVER CS5 & CS5.5, Adobe, ADOBE DREAMWEAVER : Help and tutorials, 2013 California State University, Creating Accessibles Websites Using Dreamweaver CS5.5 and CSULA Web Templates,
17 BAB 10 CSS (CASCADING STYLE SHEET) Cascading Style Sheet (CSS) memungkinkan Anda membuat pengaturan secara spesifik bagaimana content seharusnya ditampilkan dalam sebuah halaman web. Pengaturan secara spesifik dapat dilakukan terhadap properties halaman web, teks, gambar, dan elemen lainnya dalam halaman web. Tujuan Instruksional Mahasiswa memahami fungsi CSS untuk memformat berbagai macam objek yang diperlukan dalam website. 272
18 10.1 Cascading Style Sheet (CSS) Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari documents HTML yang menggunakanya. Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan ditampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser, karena CSS telah di standard-kan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser Deklarasi dan Aturan Penulisan Pengaturan tampilan halaman web yang dilakukan melalui CSS (Cascading Style Sheets) sangat tergantung pada kemampuan web browser yang akan digunakan untuk mengaksesnya. Setiap web 273
19 browser memiliki kemampuan yang berbeda ketika menerjemahkan script CSS. Keuntungan dengan menggunakan CSS adalah : 1. Mempersingkat waktu pembuatan web. Salah satu sifat CSS adalah reuseable, yaitu setelah CSS dibuat maka dapat kembali digunakan pada halaman web yang lainnya. Semakin banyak CSS yang dibuat, maka pembuatan web dapat dilakukan dalam waktu yang lebih singkat. 2. Meningkatkan kecepatan akses halaman web. Dengan pengaturan yang dibuat melalui CSS, maka tidak perlu dilakukan pengaturan pada seluruh halaman web, sehingga script/code yang dibuat jauh akan lebih sedikit. Dengan demikian web browser tidak perlu melakukan banyak perintah, akibatnya halaman web dapat diakses dengan cepat. 3. Memepercepat modifikasi source code. Perubahan source code yang bersifat global cukup menggantinya di satu tempat maka akan mempengaruhi semua dokumen HTML. 4. Superior dibanding HTML, yaitu CSS memiliki pilihan yang lebih luas dibandingkan dengan atribut HTML. 5. Standard Global, yaitu saat ini atribut-atribut dalam HTML telah diperkecil fungsinya dan penggunaan CSS sangat dianjurkan. Sintaks CSS adalah element { property:value; property:value } 274
20 Penulisan CSS dapat dilakukan dengan tiga cara, yaitu : Terdapat 3 cara untuk memasukkan CSS, yaitu : 1. Inline Style Sheet, yaitu memasukkan CSS dalam attribut elemen HTML secara langsung. Cara ini dapat digunakan apabila dengan pertimbangan tertentu diperlukan penambahan style pada sebuah element html. Inline Style Sheet dilakukan dengan memasukkan CSS-nya ke dalam attribut CSS, dengan menambahkan attribut 'style'. Contoh : <h1 style="color:blue">this is a Blue Heading</h1> 2. Internal Style Sheet. Cara ini sebaiknya digunakan apabila memiliki satu dokumen yang memiliki style yang unik yang artinya tidak terdapat pada dokumen lain. Internal Style Sheet dideklaras ikan pada bagian <head> sebuah dokumen HTML dengan menggunakan tag <style>. Internal Style Sheet akan mempengaruhi semua elemen di bawahnya sesuai dengan isi dari deklarasi style-nya. <!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>this is a heading</h1> <p>this is a paragraph.</p> </body> </html> 275
21 3. External Style Sheet, yaitu digunakan untuk banyak dokumen atau dokumen dinamis yang memiliki style yang sama. Dengan demikian, External Style Sheet cukup dengan sekali mengubah maka dapat merubah seluruh halaman web yang memanggil CSS tersebut. Tag <link> diletakkan di dalam bagian <head> pada dokumen HTML. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>this is a heading</h1> <p>this is a paragraph.</p> </body> </html> Komentar pada CSS dibuat dengan menggunakan tanda /* dan diakhiri dengan */ 276
22 10.3 Selector Terdapat 3 buah Selector, yaitu ID Selector, class Selector dan Tag Selector. ID Selector, semua elemen yang memiliki ID yang sama dengan nama style id yang dideklarasikan, maka akan memiliki style yang sama sesuai dengan id tersebut. Contoh : #var1 { text-align:center; color:red; } class Selector, digunakan untuk mengspesifikasikan suatu style untuk sebuah grup pada elemen..center {text-align:center;} Tag HTML Selector, memberikan style langsung pada sebuah tag HTML, caranya cukup dengan menuliskan tag dan CSS-nya saja p { text-align:center; color:black; font-family:arial; } Konstekstual, adalah penerapan style yang hanya diterapkan jika suatu kondisi tertentu terpenuhi, contoh h1 i {color: navy} hanya berlaku untuk elemen yang dilingkupi tag <h1> dan <i>, jadi akan terpenuhi jika terdapat 2 kondisi yaitu ada tag <h1> dan <i>. 277
23 10.4 CSS Styling CSS yang digunakan untuk mengatur syle tampilan web diantaranya meliputi : Styling Background CSS background digunakan untuk mengubah background dari elemen HTML. Properties dari CSS Background : background-color, background-image, background-repeat, background-attachment, background-position. Background-Color background-color merincikan warna background dari sebuah elemen HTML. Sintaks : h2 {background-color:red;} Dalam CSS, sebuah warna/color dirincikan dalam bentuk : 1. Nilai HEX, seperti : "#33FF00". 2. Nilai RGB, seperti : "rgb(0,0.255)". 3. Nama warna, seperti : "blue". 278
24 Contoh : <!DOCTYPE html> <html> <head> <style> h1 { background-color:#6495ed; } p { background-color:#e0ffff; } div { background-color:#b0c4de; } </style> </head> <body> <h1>css background-color example!</h1> <div> This is a text inside a div element. <p>this paragraph has its own background color.</p> We are still in the div element. </div> </body> </html> Background-Image background-image merincikan gambar sebagai background sebuah elemen HTML. Secara default gambar/image akan diulang-ulang menutupi seluruh bagian elemen. body{background-image:url("pattern.gif");} 279
25 Contoh : <!DOCTYPE html> <html> <head> <style> body {background-image:url('paper.gif');} </style> </head> <body> <h1>hello World!</h1> </body> </html> background-image dapat diulang secara vertikal atau horizontal, dan tidak boleh diulang <!DOCTYPE html> <html> <head> <style> body {background-image:url('paper.gif');} </style> </head> <body> <h1>hello World!</h1> </body> </html> Styling Text Styling Text adalah kegiatan untuk menambahkan suatu style pada elemen-elemen yang memiliki konten teks. Styling Text terdiri atas beberapa macam manipulasi style seperti Text Color, Text Alignment, Text Decoration, dan Text Color. Dalam CSS, sebuah warna/color dirincikan dalam bentuk : 1. Nilai HEX, seperti : "#33FF00". 280
26 2. Nilai RGB, seperti : "rgb(0,0.255)". 3. Nama warna, seperti : "blue" Contoh : <!DOCTYPE html> <html> <head> <style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>this is heading 1</h1> <p>this is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">this is a paragraph with class="ex". This text is blue.</p> </body> </html> Text Alignment Text alignment digunakan untuk mensejajarkan barisan teks. Teks di html bisa disejajarkan ke sebelah kanan, tengah maupun kiri. Ketika text-align di set sebagai "justify" maka setiap baris tulisan memiliki lebar yang sama dan margin kanan dan kiri sama-sama lurus (seperti tulisan-tulisan di dalam koran dan majalah). Contohnya : 281
27 <!DOCTYPE html> <html> <head> <style> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>css text-align Example</h1> <p class="date">may, 2009</p> <p class="main">in my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> <p><b>note:</b> Resize the browser window to see how the value "justify" works.</p> </body> </html> Text Decoration Text decoration umumnya digunakan untuk menghilangkan garis bawah pada link-link di dokumen HTML. Contohnya : 282
28 <!DOCTYPE html> <html> <head> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> </body> </html> Styling Font Styling font adalah kegiatan untuk menambahkan style pada konten font disebuah teks. Font Family Anda bisa mengubah jenis-jenis font yang ingin anda pakai ketika anda membuat website. Font family sebaiknya mengandung banyak jenis font, hal ini berguna bila browser tidak mendukung font yang pertama maka akan berpindah ke font yang berikutnya secara otomatis. Contohnya : 283
29 <!DOCTYPE html> <html> <head> <style> p.serif{font-family:"times New Roman",Times,serif;} p.sansserif{font-family:arial,helvetica,sans-serif;} </style> </head> <body> <h1>css font-family</h1> <p class="serif">this is a paragraph, shown in the Times New Roman font.</p> <p class="sansserif">this is a paragraph, shown in the Arial font.</p> </body> </html> Font Style Properti ini memiliki 3 nilai : 1. Normal 2. Italic 3. Oblique Contohnya: 284
30 <!DOCTYPE html> <html> <head> <style> p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} </style> </head> <body> <p class="normal">this is a paragraph, normal.</p> <p class="italic">this is a paragraph, italic.</p> <p class="oblique">this is a paragraph, oblique.</p> </body> </html> Font Size Anda bisa mengatur besar ukuran font di CSS. <!DOCTYPE html> <html> <head> <style> h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} </style> </head> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <p>this is a paragraph.</p> <p>specifying the font-size in px allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.</p> <p><b>note:</b> This example does not work in IE, prior version 9.</p> </body> </html> 285
31 10.5 Praktek 1. Praktek Format Text <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> p {color : green; letter-spacing: 0.5cm} h4 {letter-spacing: -2px} </STYLE> </HEAD> <BODY> <p>pengaturan Spasi Pada Paragraph </p> <h4> Header 4</h4> </BODY> </HTML> <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </STYLE> </HEAD> <BODY> <h1>header 1,Di tengah</h1> <h2>header 2, Di kiri</h2> <h3>header 3,Di kanan</h3> </BODY> 286
32 <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> em {text-decoration : overline} h2 {text-decoration: blink} h3 {text-decoration: underline} a {text-decoration: none} </STYLE> </HEAD> <BODY> <em>bentuk Overline</em> <h2>header 2, Bentuk Line-through</h2> <h3>header 3,Bentuk Underline</h3> <p> <a href=" Penggunaan Dalam Link,Nilai NONE</a></p> </BODY> <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> p.besar {text-transform: uppercase} p.kecil {text-transform: lowercase} </STYLE> </HEAD> <BODY> <p class="besar"> pengubahan kedalam hurup Besar </p> <p class="kecil"> PENGUBAHAN KEDALAM HURUF KECIL </p> </BODY> 287
33 2. Praktek Pengaturan Font <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE ="text/css"> p.italic { font-size :200 % ; font-style: italic; } p.normal{ font-family : verdana ; font-style: normal; } p.oblique {font-style: oblique} </STYLE> </HEAD> <BODY> <P class="italic">menggunakan Style Italic</P> <P class="normal">menggunakan Style Normal </P> <P class="oblique">menggunakan Style Oblieque</P> </BODY> </HTML> <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE ="text/css"> p.normal { font-family : verdana ; font-weight: normal; } p.thick { font-family : verdana ; font-weight: bold; } p.thicker { font-family : times ; font-weight: 900; } 288
34 </STYLE> </HEAD> <BODY> <p class="normal"> This is a paragraph</p> <p class="thick"> This is a paragraph</p> <p class="thicker"> This is a paragraph</p> </BODY> </HTML> 3. Praktek Pengaturan Tabel <HTML> <HEAD> <TITLE>Pengaturan Padding Table</TITLE> <style type="text/css"> td.kiri{ padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; padding-left: 2cm ; background-color : #F0F8FF; } </style> </HEAD> <BODY> <TABLE BORDER="1"> <TR> <TD class="kiri">pading dengan jarak 2cm dari kiri,atas,kanan,dan bawah</td> <TD>Tanpa jarak </TD> </TR> </TABLE> </BODY> </HTML> 289
35 10.5 Rangkuman Cascading Style Sheet (CSS) dibuat dengan tujuan untuk melakukan pengaturan tampilan halaman web secara efektif dan efisien dan dapat meningkatkan kulitas halaman web, baik dalam tampilan maupun dalam pengaksesannya. Pengaturan yang dapat dilakukan meliputi : mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. 290
36 10.6 Daftar Pustaka Duckett, Jon., HTML & CSS : Design and Build Websites, John Wiley & Sons, Inc., Henick, Ben., HTML & CSS: The Good Parts, O Reilly Media, Inc., Lemay, Laura., Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days Fourth Edition, Sams Publishing, Tutorials Point (I) Pvt. Ltd., Cascading Style Sheet (CSS),
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
Lebih terperinciWEB 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
Lebih terperinciCSS 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
Lebih terperinciCSS 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
Lebih terperinciDAFTAR 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
Lebih terperinciMODUL 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
Lebih terperinciAPLIKASI 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
Lebih terperinciXHTML 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
Lebih terperinciMODUL 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
Lebih terperinciMultiple 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
Lebih terperinciDASAR-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
Lebih terperinciMODUL 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
Lebih terperinciCSS (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
Lebih terperinciCara 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
Lebih terperinci{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
Lebih terperinciModul 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
Lebih terperinciCSS. 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
Lebih terperinciCSS 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
Lebih terperinciTeks 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
Lebih terperinciSIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan
Lebih terperinciKeuntungan 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
Lebih terperinciBAB 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
Lebih terperinciIntroduksi. 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
Lebih terperinciCara 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.
Lebih terperinci[ 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
Lebih terperinciMATERI 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
Lebih terperinciCSS. 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
Lebih terperinciCara Mengelola Isi Halaman Web
Cara Mengelola Isi Halaman Web MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru : - Pada tampilan windows, pilih menu File > New. Untuk membuka file HTML yang sudah ada : -
Lebih terperinciPemrograman 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
Lebih terperinciMendesain 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
Lebih terperinci1. 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
Lebih terperinci2011 Ahmad Amarullah
1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini
Lebih terperinciAuthor : 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
Lebih terperinciBAB 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
Lebih terperinciContoh 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
Lebih terperinciPerancangan 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,
Lebih terperinciMembangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE
Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE Langkah-langkah membuat web statis 1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for
Lebih terperinciSMH2D3 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
Lebih terperinciC. Ms Powerpoint D. Notepad E. Ms Acces
1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:
Lebih terperinciFLASH, FRAME, BEHAVIOR
FLASH, FRAME, BEHAVIOR 1. Flash Menyisipkan Flash Button a. Pilih menu : insert image interactive flash button b. Tentukan property : Style : pilih bentuk / jenis tombol flash Button text : tulis label
Lebih terperinci-Sejarah Dreamweaver-
-Sejarah Dreamweaver- SEJARAH Pada Jaman Dahulu Kala Hiduplah seorang Programmer yg bernama Mr.MX dia adalah Programmer bhs C++ yg Pintar dan akhirnya dia disuruh oleh Raja di Negerinya untuk membuatkan
Lebih terperinciPengenalan 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
Lebih terperinci1. 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
Lebih terperinciPEMROGRAMAN 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
Lebih terperinciKomunikasi Multimedia
Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id
Lebih terperinciHTML (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
Lebih terperinciArea kerja. Gambar 1. Tampilan awal MS FrontPage
Microsoft FrontPage I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain, dan mengedit halaman World Wide Web seperti menambahkan text, images,
Lebih terperinciIankee.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
Lebih terperinciMacromedia Dreamweaver. Tatik Retno Murniasih, S.Si., M.Pd.
Tatik Retno Murniasih, S.Si., M.Pd. Merupakan software web design yang berguna untuk merancang web dan layout halaman web. Dalam merancang web bisa dilakukan dengan cara mendesain dan memprogram. Untuk
Lebih terperinciPengenalan 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
Lebih terperinciCascading 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)
Lebih terperinciModul 5 Macromedia Dreamweaver 8
Laporan Praktikum Modul 5 Macromedia Dreamweaver 8 Mata kuliah : CF 1310 Pengantar Teknologi Informasi Disusun oleh : Nama Route Gemilang 5208 100 073 Semester Ganjil 2008/2009 Jurusan Sistem Informasi
Lebih terperinciBAB 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
Lebih terperinciPemrograman 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,
Lebih terperinciMACROMEDIA DREAMWEAVER 8
MACROMEDIA DREAMWEAVER 8 Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan
Lebih terperinciSOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA
SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA 1. HTML adalah kepanjangan dari. A. Hyper Text Multiple Language B. Hiper Text Multiple Language C. Hipo Text Multiple Language D. Hyper Text Multiple Land E.
Lebih terperinciCSS (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
Lebih terperinciDesain 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:
Lebih terperinciPEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE Oleh: Asyti Febliza I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain,
Lebih terperinciNilainya 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
Lebih terperinciBab 5. Cascading Style Sheet (CSS)
Bab 5. Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan
Lebih terperinciMODUL 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
Lebih terperinciModul 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
Lebih terperinciMateri. 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
Lebih terperinciMODUL 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
Lebih terperinci6. 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
Lebih terperinciCascading 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
Lebih terperinciMengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency
Mengelola isi halaman web Memeriksa informasi untuk Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat
Lebih terperinciSTMIK DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA.
STMIK SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 PENDAHULUAN Dreamweaver adalah sebuah program website editor yang berfungsi untuk membuat dan
Lebih terperinciPENGENALAN HTML - 3. Gambar 1. Layer Toolbar
PENGENALAN HTML - 3 A. Layer Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, kita dapat membuat halaman HTML yang tampilannya lebih fleksibel. Layer
Lebih terperinciAplikasi 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
Lebih terperinci- Hingga Muncul tampilan dan editor Frontpage sebagai berikut : Area Kerja. Menu Formatting. Layer Kerja
MS. Frontpage adalah salah satu software buatan Microsoft yang digunakan untuk membuat halaman-halaman situs (website) yang sangat populer, selain mudah digunakan MS. Frontpage juga mempunyai fitur-fitur
Lebih terperinciIntroduksi. 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
Lebih terperinciBAB 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
Lebih terperinciDaftar 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
Lebih terperinciGambar 1.1 Desain halaman web
DESAIN HALAMAN WEB DENGAN DREAMWEAVER 8.0 Oleh: Heri Istiyanto Untuk dapat mengikuti tutorial ini, diharapkan Anda menggunakan Macromedia Dreamwever versi 8. Jika Anda menggunakan versi di atasnya, misalnya
Lebih terperinciCara membuat HTML dasar
Cara membuat HTML dasar Oleh : Ronaldo Fantoni 11 IPA /12 1. Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
Lebih terperincipengayaan dan penomoran PENGAYAAN (STYLE)
pengayaan dan penomoran PENGAYAAN (STYLE) Pada umumnya orang menyusun dokumen berdasarkan atribut fisik. Sebagai contoh, jenis huruf, ukuran huruf, dan ketebalan (misalnya Times New Roman 12 pt, italic).
Lebih terperinciStandar 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
Lebih terperinciCascading 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
Lebih terperinciFaa 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
Lebih terperinciMetode 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
Lebih terperinciMODUL 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
Lebih terperinciModul Praktikum 2 Dasar-Dasar Teknologi Informasi dan Komunikasi. Mengolah Kata Dengan Microsoft Word (1)
A. Mengenal Microsoft Word Mengolah Kata Dengan Microsoft Word (1) Microsoft Word (MS Word) merupakan program untuk mengolah kata. Program ini bisa digunakan untuk menulis dokumen misalnya karya tulis,
Lebih terperinci[ KP215 - Otomasi Perkantoran ]
[ KP215 - Otomasi Perkantoran ] Pengayaan dan Penomoran [KP215 - Otomasi Perkantoran] Pengayaan dan Penomoran Chapter 2 3.1 PENGAYAAN (STYLE) Pada umumnya orang menyusun dokumen berdasarkan atribut fisik.
Lebih terperinciSecara 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,
Lebih terperinciMEMBUAT TEMPLATE LIBREOFFICE WRITER
MEMBUAT TEMPLATE LIBREOFFICE WRITER Membuat Page Style 1. Buka file baru pada Libreoffice. 2. Pada menu bar, pilih Format > Styles and Formatting (F11) 3. Pada dialog box Styles and Formatting yang telah
Lebih terperinciCSS? 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
Lebih terperinciMencari Text 2) 3) KTI A : Week 02 (Pembuatan Dokumen)
1 Mencari Text Untuk mencari sebuah text secara cepat, gunakan fasilitas Find and Replace, yang dapat dipanggil melalui menu Edit Find atau Ctrl+F. Hasilnya adalah : 4) Mencari untuk Highlight : menandai
Lebih terperinciMembuat Button Dengan CSS
Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple
Lebih terperinciKETERAMPILAN KOMPUTER 2B** (IT :S1-SA) PERTEMUAN 3
KETERAMPILAN KOMPUTER 2B** (IT-061208:S1-SA) PERTEMUAN 3 Ahmad hidayat BAHASAN MATERI PERTEMUAN 2 Pengolahan file pada MS Office WORD Pengaturan Teks, paragraf, penampilan halaman & pencetakan dokumen
Lebih terperinciDESAIN WEB STATIS DAN HTML. Dahlan Abdullah Website :http://dahlan.unimal.ac.id
DESAIN WEB STATIS DAN HTML Dahlan Abdullah Email : dahlanrpl@yahoo.com Website :http://dahlan.unimal.ac.id HALAMAN WEB KONSEP DASAR DAN TEKNOLOGI WEB World Wide Web secara luas lebih dikenal dengan istilah
Lebih terperinciPemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur dokumen HTML Contoh HTML
Lebih terperinciMEMBUAT WEBSITE PERSONAL
MEMBUAT WEBSITE PERSONAL dengan Microsoft FrontPage UNTUK KALANGAN SENDIRI Dilarang menyalin sebagian atau seluruh bagian modul ini tanpa ijin dari penyusun Modul Workshop : Membuat Website Personal 1
Lebih terperinciPENGANTAR KOMPUTER DAN TI 2C
PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 4 Peg. Komp & TI 2C M4 HyperText Markup Language (HTML) Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di
Lebih terperinciCascading 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
Lebih terperinciPRAKTIKUM SISTEM INFORMASI MANAJEMEN
MODUL V DREAMWEAVER 5.1 Tujuan Praktikum Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu : 1. Mengenal komponen aplikasi Macromedia Dreamweaver 2. Membuat template website offline sederhana
Lebih terperinciCSS 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
Lebih terperinciRuang Kerja DREAMWEAVER MX 2004 :
1.1 Pengertian Macromedia Dreamweaver : merupakan sebuah HTML editor Profesional untuk mendesain secara visual dan mengelola situs web beserta halaman- web. 1.2 Spesifikasi PC untuk menjalankan DREAMWEAVER
Lebih terperinciMODUL 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
Lebih terperinci