X/HTML - CSS - Javascript

Presentasi berjudul: "X/HTML - CSS - Javascript"— Transcript presentasi:

1 X/HTML - CSS - Javascript
web dasar Model Web Standar X/HTML - CSS - Javascript Fakultas Ilmu Komputer Universitas Dian Nuswantoro Semarang 2008

2 Mengapa dipisah? web dasar Web dibangun atas 3 standar utama web : HTML(XHTML), CSS, dan Javascript X/HTML : menentukan konten dan struktur dokumen CSS : mengatur bagaimana elemen-elemen halaman web ditampilkan Javascript : menyediakan fungsi dinamis, menambahkan fungsi-fungsi dasar dan sifat interaktif halaman web Ide dasar standar web adalah memisahkan struktur dan isi dokumen dengan format tampilan dokumen, serta menggunakan Javascript untuk memberikan sifat interaktif Mengapa harus dipisah ? Padahal dengan elemen font dan tabel HTML pun kita bisa mengatur format tampilan halaman web ? 2008

3 Alasan mengapa dipisah
web dasar Efisiensi kode : format style dan layout membuat ukuran file HTML menjadi besar -> download lebih lama. Dengan dipisah, setiap dokumen HTML menjadi ramping. Dokumen HTML mengincludekan file CSS jika perlu format style dan layout Perawatan mudah : proses update tampilan hanya dilakukan pada file CSS saja. Accessibility : dokumen HTML yg “bersih” lebih mudah dibaca software screen reader untuk orang buta. Device compatibility : perbedaan device (mis, ukuran layar) dapat diatasi dengan mudah menggunakan alternatif style sheet Ranking dlm Search engine : dokumen HTML lebih mudah dibaca oleh search engine, meningkatkan ranking web page dalam hasil pencarian mesin pencari. Kebiasaan yg baik : berdasarkan pengalaman pengembang web profesional, pemisahan konten, style, dan behaviour adalah cara terbaik pengembangan aplikasi 2008

4 HTML atau XHTML ? web dasar HTML dan XHTML adalah bahasa bertanda (markup) yang terdiri dari elemen-elemen (body, font, table, dsb) dengan atribut-atributnya (align, width, face, size, dsb) Elemen menandai berbagai tipe berbeda dari konten dokumen (heading, paragrap, tabel, bullet list, dsb) Elemen mendefinisikan tipe konten sedangkan atribut mendefinisikan informasi tambahan tentang elemen tersebut. Jika HTML dengan XHTML sama-sama bahasa bertanda, lalu apa bedanya ? Mana yang harus digunakan ? Huruf “X” dalam XHTML berarti “extensible”. Perbedaan mendasar antara HTML dan XHTML adalah strukturnya. 2008

5 Beda struktur HTML dan XHTML
web dasar HTML XHTML Elemen dan atribut bersifat case insensitive <h1> sama dengan <H1> Case sensitive, semua ditulis dalam huruf kecil Elemen tertentu tidak memerlukan tag penutup (mis., <p>), sementara elemen lain tidak memperbolehkan tag penutup (mis., <img>) Semua elemen harus menggunakan tag penutup. Untuk tag tunggal ditambah slash (mis., <hr> menjadi </hr> atau <hr /> Nilai atribut boleh tidak diapit tanda petik Harus diapit tanda petik Beberapa atribut dapat ditulis singkat (mis., <option selected>) Semua atribut harus ditulis lengkap (<option selected=“selected”>) Server kirim HTML menggunakan tipe media text/html XHTML menggunakan application/xhtml+xml atau application/xml, text/xml 2008

6 Style dengan CSS web dasar CSS digunakan untuk mengatur format dan layout dokumen HTML. Ada 3 cara penerapan style CSS : Mendefinisikan ulang sebuah tag Cara elemen HTML menampilkan sesuatu dapat diubah dengan style CSS. Mis., jika ingin semua parapgrap berspasi ganda dan berwarna hijau, kode CSSnya : P { line-height : 2; color: green } Style ini akan berlaku pada semua elemen paragrap dalam dokumen HTML. 2008

7 Style dengan CSS web dasar Menggunakan ID Atribut id digunakan pada suatu elemen, yang akan mengidentifikasikan elemen secara unik pada suatu halaman web. Merupakan cara yang lebih baik. Ex. : <p id=“hijau”>isi paragrap</p> Kemudian, tulis aturan CSSnya : #hijau { line-height : 2; color : green } Style ini akan berlaku pada elemen paragrap yang menggunakan atribut id dengan nilai “hijau” 2008

8 Style dengan CSS web dasar Menggunakan class Class sama seperti id kecuali dalam satu halaman web boleh terdapat lebih dari satu class yang sama. Ex. : <p class=“hijau”>isi paragrap pertama</p> <p class=“hijau”>isi paragrap kedua</p> Kemudian, tulis aturan CSSnya : .hijau { line-height : 2; color : green } 2008

9 Javascript web dasar Javascript adalah bahasa script yang digunakan untuk menambah fungsi dinamis kedalam halaman web, al : menambah validasi untuk data form, menambah fungsi drag and drop, membuat animasi menu, menangani fungsi tombol, dsb. 2008

10 Contoh Webpage standar
web dasar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang"en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>References</title> <style type="text/css"> @import url("styles.css"); </style> </head> 2008

11 Contoh Webpage standar
web dasar <body> <div id="bggraphic"></div> <div id="header"> <h1>References</h1> </div> <div id="references"> <cite class="article">Adams, J. R. (2008). The Benefits of Valid Markup: A Post-Modernistic Approach to Developing Web Sites. <em>The Journal of Awesome Web Standards, 15:7,</em> </cite> <cite class="book">Baker, S. (2006). <em>Validate Your Pages.... Or Else!.</em> Detroit, MI: Are you out of your mind publishers.</cite> <cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like so <em>The Journal that Publishes Genius, 1:2, </em> </cite> <cite class="website">Smith, J. Q. (2005). <em>Web Standards and You.</em> Retrieved May 3, 2007 from Web standards and you.</cite> 2008

12 Contoh Webpage standar
web dasar <div id="footer"> <p>The content of this page is copyright © 2007 <a Lane</a></p> </div> </body> </html> 2008

13 Penjelasan contoh web dasar Baris pertama disebut document type declaration atau doctype. Dalam hal ini, halaman tersebut adalah XHTML 1.0 Transitional. Doctype menentukan satu set aturan yang harus diikuti oleh dokumen web. Baris 5 s/d 7 mengimport file CSS ke dalam halaman web. Style dalam file ini akan digunakan oleh berbagai elemen dalam halaman web tersebut. Sedangkan isi file CSSnya adalah sbb : 2008

14 Style.css Penjelasan contoh body {
web dasar Style.css body { background: #fff url('images/gradbg.jpg') top left repeat-x; color: #000; margin: 0; padding:0; border: 0; font-family: Verdana, Arial, sans-serif; font-size: 1em; } div { width: 800px; margin: 0 auto; 2008

15 Penjelasan contoh #bggraphic {
web dasar #bggraphic { background: url('images/pen.png') top left no-repeat; height: 278px; width: 362px; position: absolute; left: 50%; z-index: -100; } h1 { text-align: center; text-transform: uppercase; font-size: 1.5em; margin-bottom: 30px; background: url('images/headbg.png') top left repeat; padding: 10px 0; 2008

16 Penjelasan contoh #references cite { margin: 1em 0 0 3em;
web dasar #references cite { margin: 1em 0 0 3em; text-indent: -3em; display: block; font-style: normal; padding-right: 3px; } .website { border-right: 5px solid blue; .book { border-right: 5px solid red; .article { border-right: 5px solid green; 2008

17 border-top: 1px solid #000; margin-top: 20px; } #footer a {
Penjelasan contoh web dasar #footer { font-size: 0.5em; border-top: 1px solid #000; margin-top: 20px; } #footer a { color: #000; text-decoration: none; #footer a:hover{ text-decoration: underline; 2008

18 Penjelasan contoh web dasar Baris pertama menetapkan beberapa default untuk dokumen, seperti warna teks dan background, lebar (width) border disekitar teks, dll. Baris berikutnya menetapkan lebar halaman web 800 piksel (tidak menggunakan prosentase untuk memastikan halaman web tampil ditengah-tengah layar). Dst… 2008

19 web dasar The End quit 2008