Pengantar Pemrograman Web GEMBONG EDHI SETYAWAN

Transkripsi

1 Pengantar Pemrograman Web GEMBONG EDHI SETYAWAN 1

2 HTML HyperText Markup Language Gembong Edhi Setyawan 2

3 HTML TUJUAN: Mampu membuat halaman web dengan HTML Struktur HTML Tag-tag Dasar HTML Atribut Dasar HTML 3

4 TENTANG HTML HTML : format standar untuk membuat dokumen web W3C (World Wide Web Consortium) Organisasi yang mengendalikan standar internasional untuk WWW HTML merupakan bahasa (markup) bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus File HTML berupa file teks (plain text file), sehingga dapat dibuat menggunakan editor teks biasa File HTML dapat dibuka dengan web browser (IE, Mozilla firefox, Opera, Google Chrome, dll) 4

5 EVOLUSI HTML Markup Language Dikembangkan pertama kali oleh IBM GML (Generalized Markup Language) 1980 ISO 8879 Markup language sebagai standar untuk pembuatan dokumen SGML (Standard Generalized Markup Language) 1986 HTML 1 diciptakan 1990 Diciptakan oleh Tim Berners Lee dari CERN Digunakan sebagai format standar untuk kolaborasi para fisikawan Berdasarkan pada struktur SGML HTML menambahkan hyperlink, sehingga menjadi halaman web 5

6 EVOLUSI HTML HTML 2.0 Disetujui sebagai standard pada 22 September 1995 HTML 3.2 dipublikasikan atas rekomendasi W3C Januari 1997 HTML 4.0 dipublikasikan atas rekomendasi W3C Desember 1997 Mendukung stylesheet Adanya tag <object> untuk multimedia dan menyisipkan objek HTML 5.0 Mei, 2008 draft Mei, 2011 versi stabil 6

7 Apa Kelebihan HTML 5 Tujuan utama untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin Fitur baru: Unsur kanvas untuk menggambar Video dan elemen audio untuk media pemutaran Dukungan yang lebih baik untuk penyimpanan secara offline Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section Bentuk kontrol form seperti kalender, tanggal, waktu, , url, search Geolocation Drag and drop 7

8 Skema Dasar Dokumen HTML <HTML> <HEAD> <TITLE>Judul dokumen</title> </HEAD> <BODY> Isi dokumen </BODY> </HTML> HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian header dokumen HTML TITLE: memberi judul pada dokumen HTML BODY: menandai awal dan akhir isi dokumen (yang ditampilkan) 8

9 Contoh Isi Dokumen HTML <html> <head> <title>homepage saya</title> </head> <body> <h1>saya</h1> <h2>perkenalan</h2> <p>perkenalkan, nama saya... Ini adalah <i>homepage</i> <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b><i>homepage</i></b>. </p> </body> </html>  9

10 Daftar Tag <html> Dokumen <head> Header <title> Judul dokumen <body> Isi dokumen <h1> <h6> Judul paragraf <p> Paragraf <b>,<i>,<u>,<sup>,<sub> Atribut <br> Ganti baris <font> Font <li>,<ol>,<ul> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan/rujukan) <table> Tabel  Komentar <frame>,<frameset>,<iframe> Frame (bingkai) <form> Formulir isian <input>,<textarea>,<select> Komponen isian pada formulir <map> Link berdasar area pada gambar <span>,<div> Pengelompokan elemen dokumen 10

11 Tag Judul (Heading) <hn>judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf <h1>judul 1</h1> <h2>judul 2</h2> <h3>judul 3</h3> <h4>judul 4</h4> <h5>judul 5</h5> <h6>judul 6</h6> Tingkat Judul Tingkat 1 Tingkat Judul Tingkat 2 Tingkat Judul Tingkat 3 Tingkat Judul Tingkat 4 Tingkat Judul Tingkat 5 Judul Tingkat 6 Tingkat 11

12 Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. <p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. </p> <p>homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p><p>saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. 12

13 Tag Atribut 1 (Bold, Italic, Underline) <b>kalimat yang dicetak tebal</b> <i>kalimat yang dicetak miring</i> <u>kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi. <p>kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p> Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal 13

14 Tag Atribut 2 (Superscript, Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia. <p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p> <p>2h<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O (x1 + x2)2 = x12 + x22 + 2x1x2 2H2 + O2 = 2 H2O 14

15 Tag Ganti Baris (Break line) <br> Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : Ganti baris <br /> <p>perkenalkan,<br /> nama saya... Ini adalah<br />homepage pertama saya,<br /> karena saya baru belajar tentang cara<br /> membuat homepage.</p> <p>homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p> Perkenalkan, nama saya... Ini adalah homepage pertama saya, Paragraf karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, Paragraf oleh karena itu tampilannya masih terlalu sederhana. 15

16 Tag Font (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color <font size="n"> kalimat </font> <font size="m"> kalimat </font> n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf) m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf) Ukuran <font size="1">satu,</font> <font size="2">dua,</font> <font Ukuran size="3">tiga,</font> <font size="4">empat,</font> <font size="5">lima,</font> <font size="6">enam,</font> <font size="7">tujuh</font> satu, dua, tiga, empat, lima, enam, tujuh 16

17 Tag Font (face) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color <font face="nama font"> kalimat </font> nama font = Times New Roman, Arial, Courier New, Verdana, dll. <font face="times New Roman">Homepage ini masih dalam tahap pengembangan</font><br /> <font face="arial">homepage ini masih dalam tahap pengembangan</font><br /> <font face="courier New">Homepage ini masih dalam tahap pengembangan</font><br /> <font face="verdana">homepage ini masih dalam tahap pengembangan</font> Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan 17

18 Tag Font (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color <font color="#rrggbb"> kalimat </font> RR = 00.. FF (intensitas warna merah dalam heksadesimal) GG = 00.. FF (intensitas warna hijau dalam heksadesimal) BB = 00.. FF (intensitas warna biru dalam heksadesimal) <b><font color="#ff0000">red</font><br /> <font color="#800000">maroon</font><br /> <font color="#00ff00">lime</font><br /> <font color="#008000">green</font><br /> <font color="#0000ff">blue</font><br /> <font color="#000080">navy</font><br /> <font color="#ffff00">yellow</font><br /> <font color="#ff00ff">fuchsia</font><br /> <font color="#00ffff">aqua</font></b> Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua 18

19 Tag Enumerasi (List, Unordered List, Ordered List) <li>item</li> Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol (bullet) Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol> Ada beberapa sektor potensial: <li>pariwisata</li> <li>seni</li> <li>budaya</li><br /> Sektor tersebut merupakan... <p>fasilitas penginapan di Indonesia: <ol> <li>losmen</li><br /> Losmen merupakan tempat penginapan yang berskala kecil <li>hotel</li> <ul> <li>hotel melati</li> <li>hotel berbintang</li> </ul> </ol> Perkembangan dalam... Ada beberapa sektor potensial: Pariwisata Seni Budaya Sektor tersebut merupakan Fasilitas penginapan di Indonesia: 1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel o Hotel melati o Hotel berbintang Perkembangan dalam... 19

20 Tag Garis Mendatar (Horizontal Line) <hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr /> Perkenalkan, nama saya... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.<hr /> Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Perkenalkan, nama saya... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. 20

21 Tag Gambar (Image) <img src="namafilegambar"> NamaFileGambar = file gambar yang mempunyai ekstensi.gif,.jpg, atau.png. Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan (XML style) : <img src="namafilegambar" /> <img src="cover.jpg" align="left" /> Perkenalkan, nama saya... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu <img src="logo.gif" alt="logo" /> sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Perkenalkan, nama saya... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. 21

22 Tag Tabel (Table) - data <table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td> <table border="1"> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> </tr> </table> 22

23 Tag Tabel (Table) - layout Untuk menata letak (layout) isi dokumen <table border="1" width="500"> <tr> <td>header kiri</td> <td align="center" width="50%">header tengah</td> <td align="right">header kanan</td> </tr> <tr> <td valign="top" rowspan="2">menu kiri</td> <td align="center" colspan="2" height="200">bagian Isi</td> </tr> <tr> <td align="center">footer tengah</td> <td align="right">footer kanan</td> </tr> </table>

24 Desain/Layout Halaman Logo Navigasi Navigasi Logo Navigasi Navigasi Navigasi 24

25 Tag Link (Anchor) <a href="link">kata yang di-click</a> <a name="#acuan">kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya ingin langsung menuju ke <a href="#akhir">bagian akhir</a>. Saya ingin menuju ke <a href="hal2.html#bawah">bagian bawah pada halaman selanjutnya</a>.<br /> <a href=" src="gambar.gif" /></a> Homepage detik.com.<br />Ini bagian tengah.<br /><a name="#akhir">ini bagian akhir.</a> hal1.html 25

26 Frame & Frameset Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan Setiap dokumen ditampilkan dalam sebuah frame Sebuah frameset menentukan tata letak, ukuran, dan banyaknya frame yang akan ditampilkan Di dalam frameset boleh ada frameset lain (beranak) Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen tersebut tidak mempunyai isi dokumen (tidak ada <body> </body>) Skema dasar dokumen frameset : <html> <head> <title>judul dokumen</title> </head> <frameset> <frame src="namafile1"> <frame src="namafile2">...dst (atau frameset yang lain) <noframes> bagian ini ditampilkan jika browser tidak mendukung frame </noframes> </frameset> </html> 26

27 Contoh Dokumen Frameset <html> <head> <title>document Frameset</title> </head> <frameset cols="33%,43%,23%" frameborder="1"> <frameset rows="*,200"> <frame src="page1.html" name="satu" scrolling="no" frameborder="0"> <frame src="page2.html" name="dua" scrolling="yes" noresize> </frameset> <frame src="page3.html" name="tiga" frameborder="0"> <frame src="page4.html" name="empat" frameborder="1"> <noframes> Ada 4 halaman : <ol> <li><a href="page1.html">halaman 1</a></li> <li><a href="page2.html">halaman 2</a></li> <li><a href="page3.html">halaman 3</a></li> <li><a href="page4.html">halaman 4</a></li> </ol> </noframes> </frameset> </html> 27

28 iframe (inline frame) Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain (anak) Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen Skema dasar dokumen dengan iframe : <html> <head> <title>judul dokumen</title> </head> <body> isi dokumen <iframe src="namafile"> bagian ini ditampilkan jika browser tidak mendukung frame </iframe> isi dokumen </body> </html> 28

29 <html> <head> <title>kisah Sekolah</title> </head> <body> <h1>kisah-kisah di sekolah</h1> Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku sampai saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu. Inilah sebagian kisah-kisahku di sekolah.<p> <iframe width='200' height='179' src='sd.html'> <a href="sd.html">kisah SD</a> </iframe> <iframe width='200' height='179' src='smp.html' frameborder='0'> <a href="smp.html">kisah SMP</a> </iframe> <iframe width='200' height='179' src='smu.html' scrolling='no'> <a href="smu.html">kisah SMU</a> </iframe> <p>semua pengalaman dan teman-teman yang kudapat sungguh sangat mewarnai hidupku dan memberikan pengaruh besar terhadap diriku. </body> </html> Contoh inline frame 29

30 form Sebuah dokumen interaktif dapat menangani input dari user Analoginya : bahwa dokumen adalah sebuah formulir isian Sebuah dokumen dapat mengandung satu atau beberapa form Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) Setiap form dapat menghimpun satu atau beberapa elemen input Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit) Skema dasar dokumen form : <form method="post" action="namaprogram"> bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian dengan susunan sejumlah elemen input berbagai jenis </form> Contoh sebuah form sederhana untuk meminta nama user : <form method="post" action="proses.php"> <label for="nama">ketikkan nama Anda:</label><br> <input type="text" name="nama" id="nama"><br> <input type="submit" value="kirim"> </form> 30

31 Karakteristik data input Teks satu baris (single-line text) <input type="text"> Teks banyak baris (multi-line text) <textarea></textarea> Teks rahasia (password) <input type="password"> Pilihan tunggal (single selection) <input type="radio">, <select></select> Pilihan majemuk (multiple selections) <select multiple></select> Centang (on/off) <input type="checkbox"> Data bawaan/tersembunyi (hidden) <input type="hidden"> File <input type="file"> Koordinat 2D dalam sebuah bidang gambar <input type="image"> Aksi user melalui penekanan tombol <input type="submit">, <input type="reset">, <input type="button">, <button></button> 31

32 Tag input <input type="jenis" name="nama" id="id" value="nilai" disabled> type : text, password, radio, checkbox, image, submit, reset, button, hidden, file name : identifier untuk sisi server id : identifier untuk sisi browser value : nilai default disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan) <input type="[text password]" name="nama" readonly size="m" maxlength="n"> readonly : jika disebutkan maka elemen tidak bisa diubah nilainya size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS) maxlength : banyaknya karakter maksimal yang dapat dimasukkan user <input type="[radio checkbox]" name="nama" checked> checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih <input type="image" src="gambar" name="nama" alt="alternatif"> src : nama file gambar alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar 32

33 Tag textarea, select, button <textarea name="nama" rows="b" cols="k">nilai</textarea> nilai : nilai default rows : banyaknya baris yang ditampilkan (tinggi) cols : banyaknya kolom/karakter yang ditampilkan (lebar) <select name="nama" multiple size="r"> <option value="nilai1" selected>teks1</option> <option value="nilai2">teks2</option> </select> multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl) size : banyaknya baris pilihan yang ditampilkan (default=1) selected : jika disebutkan maka defaultnya dalam keadaan terpilih <button type="jenis" name="name" value="nilai"> tampilan </button> type : submit, reset, button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol 33

34 Contoh form (1) <form method="post" action="proses.php"> Silahkan isi data Anda <input type="hidden" name="halaman" value="1"> <table border="1"> <tr> <td><label for="nama">nama lengkap:</label></td> <td><input type="text" name="nama" id="nama" maxlength="40" size="20"></td> </tr> <tr> <td><label for="pass">password:</label></td> <td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td> </tr> <tr> <td><label for="jenkel">jenis kelamin:</label></td> <td><input type="radio" name="jenkel" id="jenkel" value="l">laki-laki<br> <input type="radio" name="jenkel" id="jenkel" value="p">perempuan</td> </tr> <tr> <td><label for="alamat">alamat:</label></td> <td><textarea rows="3" cols="30" name="alamat" id="alamat"></textarea></td> </tr> <tr> <td><label for="bayar">sudah bayar?</label></td> <td><input type="checkbox" name="bayar" id="bayar">sudah</td> </tr> </table> <input type="submit" value=" Kirim "> <input type="reset" value="reset"> </form> 34

35 Contoh form (2) <form method="post" action="proses.php" enctype="multipart/form-data"> <input type="hidden" name="halaman" value="2"> <table border="1"> <tr> <td><label for="kota">kota:</label></td> <td><select name="kota" id="kota"> <option value="">pilih kota...</option><option value="bdg">bandung</option> <option value="jkt">jakarta</option><option value="sby">surabaya</option> </select></td></tr> <tr> <td><label for="kerja">pekerjaan:</label></td> <td><select name="kerja" id="kerja" size="4"> <option value="a">mahasiswa</option><option value="b">pegawai swasta</option> <option value="c">pegawai negeri</option><option value="d">wiraswasta</option> </select></td></tr> <tr> <td><label for="bahasa">bahasa:</label><br>(bisa lebih dari satu)</td> <td><select name="bahasa" id="bahasa" size="4" multiple> <option value="id">indonesia</option> <option value="en">inggris</option> <option value="ch">cina</option> <option value="fr">prancis</option> </select></td></tr> <tr> <td>hobi:<br>(bisa lebih dari satu)</td> <td><input type="checkbox" name="hobi" value="1">berenang<br> <input type="checkbox" name="hobi" value="2">nonton film<br> <input type="checkbox" name="hobi" value="3">musik</td> </tr><tr> <td><label for="foto">foto:</label></td> <td><input type="file" name="foto" id="foto" size="10"></td></tr> </table> <button type="submit">kirim <img src="smiley.gif"></button> <button type="reset">reset <img src="tanya.gif"></button> </form> 35

36 Contoh form (3) <form method="post" action="proses.php"> <table border="1"> <tr> <td><label for="kode">kode:</label></td> <td><input type="text" name="kode" id="kode" maxlength="3" size="3"></td> </tr> <tr> <td><label for="jenis">jenis:</label></td> <td><select name="jenis" id="jenis" size="4"> <option value="pat">kapal patroli</option> <option value="per">kapal perusak</option> <option value="pud">pangkalan udara</option> <option value="mar">markas</option> <option value="log">logistik</option> </select></td> <tr> <td colspan="2">tunjuk lokasi penempatan :<br> <input type="image" src="peta1.gif"></td> </tr> </table> </form> 36

37 CSS Cascading Style Sheet Spesifikasi lengkap di :

38 Mengubah Text

39 Mengubah Warna

40 Mengubah Posisi

41 Mengubah Ukuran

42 Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada tag HTML-nya ) Embedded ( Menempel pada tag <head> ) External ( File lain / biasanya file dengan extensi.css )

43 Inline CSS <body> <h1 style="color:red;">contoh css inline </h1> </body>

44 Embedded CSS <head> <style type="text/css"> p{ color:red; } </style> </head> <body>... </body>

45 Contoh efek <U>..</U> menjadi pengatur warna Tag <U>..</U> memiliki tugas baru disamping tugas lama, yaitu warna tulisan. Hasilnya sama dengan kode berikut :

46 Efek yang sama pada dua kode I dan U Tag <U> =under line Dan tag <I> = italic Diberi efek baru, yaitu warna merah hurufnya Tag <B> = bold, diberi efek warna hijau

47 Beberapa efek pada satu kode B Misalkan pada tag <B> akan dilekatkan efek warna, jenis huruf dan gaya huruf Perintahnya CSS-style nya B { color:lime; text-decoration: underline; font-family:arial } 47

48 External CSS: tag link (bagus) <head> <link rel="stylesheet" href="css_ku.css"> </head> <body>... </body>

49 2. CSS-GLOBAL :Sekali Tulis, pakai bersama Kita dapat mendefinisikan suatu file *.css yang berisi kode-kode CSS File tersebut dapat diacu oleh setiap HTML Jika file HTML akan mengacu file CSS tersebut ditulis : <HEAD> <LINK REL="stylesheet" HREF="global.css" TYPE="text/css"> </HEAD> File : global.css B {color: red; text-decoration: underline; font-family: Arial } I {color:blue; font-family:"monotype Corsiva"; font-size:20} Digunakan oleh Dan Digunakan oleh Css_global.html Css_global2.html

50 Selanjutnya 2 file html digabung dalam 1 frame Klik lihat hasil Terlihat : Efek dari tag <B> dan tag <I> yang didefinisikan dalam STYLE di file global.css

51 Bagaimana format / cara kerja CSS? Ada 3 bagian penting css : 1.Selector 2.Properties 3.Value / nilai

52 1. Selector Pemilihan elemen contoh : p { color : red; }

53 2. Properties Bagian apa yg ingin diubah contoh : p { color : red; }

54 3. Values / Nilai Isi dari perubahan, contoh : p { color : red; } dengan kata lain css ini melakukan perubahan warna (color) merah (red) pada tag <p>

55 Aturan penulisan CSS

56 Sintaks CSS 1. Selector 2. Deklarasi 3. Cascade

57 1. Selector ( sebelum kurung kurawal ) Cara melakukan seleksi : 1. Element 2. Class 3. Id 4. Posisi dokument

58 1. Selector ( sebelum kurung kurawal ) Cara melakukan seleksi : 1.Element Contoh : p { color : red; } Pilih semua element <p> pada semua dokumen HTML. Contoh : <body> <p>tulisan ini akan berwarna merah</p> </body>

59 1. Selector ( sebelum kurung kurawal ) Cara melakukan seleksi : 2. Class Contoh :.namakelas { color : red; } Pilih semua element yang memiliki nama class "namakelas" pada semua dokumen HTML. Contoh : <body> <div class="namakelas"> <p> ini anggota div dengan nama kelas : "namakelas" </p> </div>

60 Contoh class (untuk ubah warna) Klik lihat hasil Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat diinset pada tag <P> dan tag <b>

61 Contoh class (untuk ubah ukuran huruf) Klik lihat hasil Font-size : xx-small, xsmall, small, medium, large, x-large, xx-large

62 Contoh class (untuk ubah warna) Klik lihat hasil Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat diinset pada tag <P> dan tag <b>

63 1. Selector ( sebelum kurung kurawal ) Cara melakukan seleksi : 3. Id Contoh : #idunik { color : red; } Pilih semua element yang memiliki nama id "idunik" pada semua dokumen HTML. Contoh : <body> <div id="idunik"> <p> ini anggota div dengan nama id unik : "idunik" </p> </div>

64 1. Selector ( sebelum kurung kurawal ) Cara melakukan seleksi : 4. Posisi di Dokumen Pilih semua elemen p yang diturunkan dari elemen dengan id yang sama dengan #about

65 1. Selector ( sebelum kurung kurawal ) Contoh-contoh lain

66 2. Deklarasi ( properties dan value ) CSS mendeklarasikan sesuatu yang isinya bisa kita ubah, contoh : font color background-color border (Kata diatas adalah properties)

67 2. Deklarasi ( properties dan value ) Setiap properties memiliki nilai (values) yang bisa kita aplikasikan, contoh :

68 2. Deklarasi ( properties dan value ) Properti bisa granular, contoh properties "border" :

69 2. Deklarasi ( properties dan value )

70 2. Deklarasi ( properties dan value ) Properties granular bisa juga disingkat atau disebut shorthand

71 2. Deklarasi ( properties dan value ) UNIT : unit adalah satuan yang digunakan untuk mengukur sesuatu ( font, border, padding dll ) Unit ada 2 macam yaitu Absolut dan Relatif Contoh absolut adalah px ( pixel ) Contoh relatf adalah em dan % (persen)

72 2. Deklarasi ( properties dan value )

73 3. Cascade Secara kata, cascade berarti mengalir kebawah. Pengertian cascade disini adalah : Menentukan deklarasi yang manakah, yang akan diaplikasikan kedalam elemen HTML Contoh : p { color : red; } p { color : blue; } maka yang menang adalah warna biru, karena biru adalah yang terakhir diaplikasikan.

74 3. Cascade Jadi bisa dikatakan, deklarasi terakhirlah yang menang. Tetapi sebenarnya pemenangnya adalah : Deklarasi yang paling akhir DAN paling spesifik

75 3. Cascade

76 Layout 1.Model Box 2.Display 3.Position 4.Float

77 1. Box Model terdiri dari : Content / isi Padding Border Margin

78 TUGAS 3 Buatlah subdomain pada domain yang telah Anda buat. Didalam subdomain tersebut buatlah halaman web yang berisi : HTML (wajib) CSS eksternal (wajib) Java script, JSON, VBScript, dll Sediakan link untuk download sourcecode anda 78