P. 1
HTML

HTML

|Views: 9|Likes:
Published by Nurlaely Ramdani K

More info:

Published by: Nurlaely Ramdani K on May 25, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPT, PDF, TXT or read online from Scribd
See more
See less

09/24/2013

pdf

text

original

HTML

Tentang HTML
• HTML : format standar untuk membuat dokumen web • Spesifikasi HTML standar (HTML 4.01 ) : http://www.w3.org/TR/html4 • HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus • File HTML berupa file teks (plain text file), bukan binary file, sehingga dapat dibuat menggunakan editor teks biasa

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)

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> <!-- akhir dokumen HTML -->

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

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

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

Tag Atribut 1 (Bold. dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p> Kata dapat dicetak tebal. <b>tebal <i>miring</i></b>. tebal miring. <i>miring</i>. <p>Kata dapat dicetak <b>tebal</b>. dan kombinasi di tengah huruf normal . dan/atau digarisbawahi. miring. garis bawah. 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. <u>garis bawah</u>. miring. Italic.

Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah.Tag Atribut 2 (Superscript. 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 .

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

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

Tag Font (face) Memformat suatu bagian kalimat dengan ukuran. Tag : font Parameter : size. Courier New. dll. Verdana. Arial. jenis huruf. color <font face="nama font"> kalimat </font> nama font = Times New Roman. atau warna tertentu. face. <font <font <font <font face="Times New Roman">Homepage ini masih dalam tahap pengembangan</font><br /> face="Arial">Homepage ini masih dalam tahap pengembangan</font><br /> face="Courier New">Homepage ini masih dalam tahap pengembangan</font><br /> 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 .

Tag Font (color) Memformat suatu bagian kalimat dengan ukuran. face. jenis huruf. color <font color="#RRGGBB"> kalimat </font> RR = 00 . Tag : font Parameter : size.. atau warna tertentu. FF (intensitas warna merah dalam heksadesimal) GG = 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 .. FF (intensitas warna hijau dalam heksadesimal) BB = 00 .

. apitlah dengan tag <ol> </ol> Ada beberapa sektor potensial: <li>Pariwisata</li> <li>Seni</li> <li>Budaya</li><br /> Sektor tersebut merupakan . . Untuk menomori enumerasi dengan nomor urut (1. Ada beberapa sektor potensial:  Pariwisata  Seni  Budaya Sektor tersebut merupakan … Fasilitas penginapan di Indonesia: 1.. diawali dengan simbol • (bullet) Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Ordered List) Untuk menandai suatu item dari daftar (enumerasi).2... Unordered List.. <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 . Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel o Hotel melati o Hotel berbintang Perkembangan dalam .Tag Enumerasi <li>item</li> (List..3).

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

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

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> .Tag Tabel (Table) .

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> .

Desain/Layout Halaman Logo Nav igasi Nav igasi Logo Nav igasi Nav igasi Nav igasi .

<br />Ini bagian tengah.html .<br /><a name="#akhir">Ini bagian akhir.detik.html#bawah">bagian bawah pada halaman selanjutnya</a>.</a> hal1.gif" /></a> Homepage detik. Saya ingin langsung menuju ke <a href="#akhir">bagian akhir</a>.<br /> <a href="http://www. Saya ingin menuju ke <a href="hal2.com.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.com"><img src="gambar. Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>.

Struktur Link .

frame & frameset • • • • • • Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan Setiap dokumen ditampilkan dalam sebuah frame Sebuah frameset menentukan tata letak.. dan banyaknya frame yang akan ditampilkan Di dalam frameset boleh ada frameset lain (beranak) Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. ukuran.dst (atau frameset yang lain) <noframes> bagian ini ditampilkan jika browser tidak mendukung frame </noframes> </frameset> </html> .. 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"> .

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

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> .

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. Sebagian besar waktu hidupku sampai saat ini dihabiskan untuk sekolah.html' frameborder='0'> <a href="smp. Inilah sebagian kisah-kisahku di sekolah. </body> </html> Contoh inline frame .html">Kisah SD</a> </iframe> &nbsp.<html> <head> <title>Kisah Sekolah</title> </head> <body> <h1>Kisah-kisah di sekolah</h1> Masa sekolah adalah masa yang menyenangkan bagiku.html">Kisah SMP</a> </iframe> &nbsp. dan aku sangat menikmati saat-saat itu.<p> <iframe width='200' height='179' src='sd.html'> <a href="sd. <iframe width='200' height='179' src='smp. <iframe width='200' height='179' src='smu.

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> . mengisi biodata.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. memilih bahasa.

<input type="reset">. <button></button> .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="button">.

button. image. 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 . checkbox. submit. password. radio. reset.Tag input • <input type="jenis" name="nama" id="id" value="nilai" disabled> type : text.

select. reset. 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. button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol .Tag textarea.

<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> Contoh form (1) .

gif"></button> </form> Contoh form (2) .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..<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.<form method="POST" action="proses.gif"></td> </tr> </table> </form> Contoh form (3) .

Server koordinat tadi dicocokkan dengan defenisi daerah yang ada. jika kooordinat yg diklik tersebut berada pada defenisi daerah yang mempunyai link maka secara otomatis server akan memberikan web page baru sesuai dengan defenisi link pada koordinat tersebut. .Image Map Definisi daerah di dalam daerah gambar (peta)dinyatakan dalam bentuk objek : Titik (POINT) Poligon (POLY) Persegi panjang (RECT) Lingkaran/elips (CIRCLE) Informasi dan pemrosesan link yang didefenisikan dengan map ini dibedakan menjadi 2 macam : 1. Server Side – server side image map menyimpan defenisi map di dalam server (jika daerah dlm gambar yg mempunyai image map diklik ) Browser mengirimkan koordinat daerah gambar yg diklik.

Client Side • Client side image map menyertakan defenisi map dari daerah gambar yang dapat diklik ke dalam dokumen web yang dikirimkan dan disajikan pada browser web.2. • . Surfer dapat melihat secara langsung link atau web page yang akan disajikan. pada saat pointer mouse berada di atas gambar.

.y1.y1. poly coords : koordinat.x2.x3. </map> src : nama file gambar usemap : nama definisi peta yang digunakan shape : default.r poly : x1. dengan format : default : x1.y2 circle : x. circle. rect.y.yn href : URL yang dituju bila area di-klik .x2.y3.y2.x2.y2 rect : x1.…..Link pada bidang gambar • • Link dapat didefinisikan pada satu atau beberapa area pada sebuah bidang gambar Skema : <img src="gambar" usemap="#peta"> <map name="peta"> <area shape="bentuk1" coords="koordinat1" href="url1" alt="teks1"> <area shape="bentuk2" coords="koordinat2" href="url2" alt="teks2"> .y1.xn.

52.198.105.355.137.86.224.161.html" alt="Titi Kamal"> <area shape="rect" coords="172.86" href="dian.273.172.224.259.jpg" usemap="#aadc" border="0"> <map name="aadc"> <area shape="circle" coords="131.248.311.103.Klik pada wajah untuk melihat biodata<br> <img src="aadc.html" alt="Adinia"> <area shape="poly" coords="300.273.210.219.82.html" alt="Dian Sastro"> <area shape="rect" coords="314.238.129" href="adinia.239.306.html" alt="Sissy Priscillia"> <area shape="default" nohref> </map> Klik pada wajah untuk melihat biodata Contoh penggunaan map .308.213.127.295.170" href="ladya" alt="Ladya Cheryl"> <area shape="circle" coords="387.37" href="titi.85.134.30" href="sissy.

Tubagus Ismail XI/5</span> </div> <div id="mhs02" class="mhs"> <span class="nama">Dewi Purnama</span><br> <span class="alamat">Jl. tabel.. dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen Pengelompokkan ada dua jenis : – – inline (alur.nama {font: bold 20 Arial} .. margin-bottom: 10.mhs {border: black solid 1. . paragraf. gambar. flow) : <span> </span> block (blok) : <div> </div> • • <span> dan <div> biasanya digunakan dengan parameter id dan class Struktur lojik ini dapat digunakan untuk : – – mempermudah menginterpretasi isi dokumen memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS • Contoh : <div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> <span class="alamat">Jl.Pengelompokan elemen dokumen • • Beberapa elemen dokumen (teks. Cisitu Lama 24</span> </div> <style type="text/css"> .alamat {font-style: italic} </style> <div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> . padding: 10} .

Cascading Style Sheets (CSS) • Konsep dasar CSS • CSS properties .

.Definisi • Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs). • CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser. dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs kita sekaligus memformat ulang situs kita.

Keuntungan CSS • Dapat di-update dengan cepat dan mudah. karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen HTML pada halaman situs kita. • Ukuran dan kompleksitas document code dapat diperkecil. • User yang berbeda dapat mempunyai stylesheet yang berbeda pula. .

U { color:red } Rules B { color:green.). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (. Masing-masing deklarasi terdiri dari property. font-family:Arial } Selector Declaration blok </STYLE> . Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). text-decoration:underline. • Contoh: <STYLE TYPE=“text/css”> I.Sebuah style sheet terdiri dari beberapa aturan (rules). titik dua (:) dan nilai (value).

} – – Selector dalam CSS adalah elemen yang akan didefenisikan dalam style CSS.Kerangka CSS 1. Selector – – adalah nama-nama yang diberikan untuk style-style yang berbeda. . sedangkan elemen ini dapat berupa tag HTML maupun Class. Penulisan sintaknya terbagi 3 bagian yaitu Selector. dan Value Selector {Property : Value. Property dalam CSS adalah atribut yang berfungsi untuk mendefinisikan Selector. property.

} --> </style> </head> <body> <p> penggunaan HTML Selector dalam CSS</p> </body> </html> .• Value adalah nilai atau harga dari sebuah Property. <html> <head> <title>HTML Selector</title> <style type="text/CSS"> <!-p {font-family: verdana.

font-size:15px.besar {color:red.family:arial. font.• • • • • • • • • • • <html> <head> <style type="text/css"> B. } </style> </head> <body> <b>ini adalah huruf besar dengan html</b><br> <b class="besar">ini adalah huruf besar dengan CSS</b> </body> </html> .

Class Selector – Penulisan class dengan menggunakan tanda titik atau dot. – Mengenal Class Selector dimana dalam elemen yang sama kita dapat menerapkan lebih dari satu style.2. .

} f.} .} --> /style> </head> <body> <f class="times"> Ini adalah Contoh penggunaan class sebagai selector. setiap huruf memiliki huruf verdana</f><br> <f class="courier"> Ini adalah Contoh penggunaan class sebagai selector.verdana {font-family: verdana.times {font-family: times. setiap huruf memiliki huruf courier</f> </body> </html> .courier {font-family: "courier".<html> <head> <title>Class Selector</title> <style type="text/CSS"> <!-f. setiap huruf memiliki huruf times new roman</f><br> <f class="verdana"> Ini adalah Contoh penggunaan class sebagai selector.

.

Id Selector – – – menentukan style yang berhubungan dengan objek-objek dengan sebuah ID yang unik. Id selector menggunakan tag #(kres) sebelum menggunakan nama selector. Menggunakan atribut span ataupun div #helvetica {font-family: Helvetica.3.} <span id="helvetica">Ini adalah huruf helvetica</span> Atau <div id=”helvetica”>Ini adalah huruf helvetica</div> .

} --> </style> </head> <body> <div id="times"> Ini adalah Contoh penggunaan id sebagai selector. setiap huruf memiliki huruf courier</div> </body> </html> .} #verdana {font-family: verdana.<html> <head> <title>ID Selector</title> <style type="text/CSS"> <!-#times {font-family: times. setiap huruf memiliki huruf times new roman</div><br> <div id="verdana"> Ini adalah Contoh penggunaan id sebagai selector.} #courier {font-family: "courier". setiap huruf memiliki huruf verdana</div><br> <div id="courier"> Ini adalah Contoh penggunaan id sebagai selector.

.

4. tetap akan mempengaruhi huruf yang ada didalam kurungan CSS. • Setiap aturan yang tidak ada dalam format huruf yang dibuat dengan HTML atau ingin menggantikannya dengan aturan CSS. . Inheritance (pewarisan) • pewarisan atau inheritance disini adalah satu kondisi dimana bagian-bagian HTML dalam dokumen kita yang kekurangan dalam spesifikasi aturan CSS dapat mengikuti atau dibuat menurut aturan CSS yang menutupinya.

<br> hanya dengan program notepad pun jadi. </B> </body> </html> .} </style> </head> <body> <B> belajar membuat web dengan <font size="+1"><em>CSS</em></font> sangatlah mudah.<html> <head><title>inheritance</title> <style type="text/css"> B {background-color : green. color : white.

color: white. } </style> </head> <body> <b> belajar membuat web dengan <em>CSS</em> sangatlah mudah <br> </b> <em>hanya dengan program notepad pun jadi</em> </body> </html> .5. background: blue. <html> <head> <title>selector kontekstual</title> <style type="text/css"> b em {font-family: verdana. Selector kontekstual/Contextual-selector Selektor Kontekstual dalam CSS hampir sama dengan pernyataan-pernyataan kondisional dimana deklarasi dalam Style-Sheet CSS yang ada akan berpengaruh jika menemui kondisi atau keadaan tertentu.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->