Pengantar Pemrograman Web GEMBONG EDHI SETYAWAN
1
HTML
HyperText Markup Language Gembong Edhi Setyawan
2
HTML TUJUAN: Mampu membuat halaman web dengan HTML • Struktur HTML • Tag-tag Dasar HTML • Atribut Dasar HTML
3
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
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
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
untuk multimedia dan menyisipkan objekHomepage saya Saya Perkenalan Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage
9 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<br />
<br />
Tag Judul (Heading) <hn>Judul paragraf</hn><br />
<br />
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><br />
<br />
Tingkat<br />
<br />
Judul Tingkat 1<br />
<br />
Tingkat<br />
<br />
Judul Tingkat 2<br />
<br />
Tingkat<br />
<br />
Judul Tingkat 3<br />
<br />
Tingkat<br />
<br />
Judul Tingkat 4<br />
<br />
Tingkat<br />
<br />
Judul Tingkat 5 Judul Tingkat 6<br />
<br />
Tingkat 11<br />
<br />
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><br />
<br />
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<br />
<br />
Tag Atribut 1 (Bold, Italic, Underline) <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u><br />
<br />
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><br />
<br />
Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal 13<br />
<br />
Tag Atribut 2 (Superscript, Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub><br />
<br />
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<br />
<br />
(x1 + x2)2 = x12 + x22 + 2x1x2 2H2 + O2 = 2 H2O<br />
<br />
14<br />
<br />
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><br />
<br />
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.<br />
<br />
15<br />
<br />
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><br />
<br />
satu,<br />
<br />
dua,<br />
<br />
tiga, empat, lima,<br />
<br />
enam,<br />
<br />
tujuh 16<br />
<br />
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><br />
<br />
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<br />
<br />
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)<br />
<br />
<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><br />
<br />
Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua 18<br />
<br />
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 ...<br />
<br />
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 ...<br />
<br />
19<br />
<br />
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.<br />
<br />
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<br />
<br />
Tag Gambar (Image) <img src="NamaFileGambar"> NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.<br />
<br />
Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan (XML style) :<br />
<br />
<img src="NamaFileGambar" /><br />
<br />
<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.<br />
<br />
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<br />
<br />
masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.<br />
<br />
21<br />
<br />
Tag Tabel (Table) - data <table> definisi tabel </table> Menampilkan data dalam bentuk tabel<br />
<br />
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<br />
<br />
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><br />
<br />
Desain/Layout Halaman Logo<br />
<br />
Navigasi<br />
<br />
Navigasi<br />
<br />
Logo<br />
<br />
Navigasi Navigasi<br />
<br />
Navigasi<br />
<br />
24<br />
<br />
Tag Link (Anchor) <a href="Link" rel="nofollow">Kata yang di-click</a> <a name="#Acuan" rel="nofollow">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" rel="nofollow">halaman selanjutnya</a>. Saya ingin langsung menuju ke <a href="#akhir" rel="nofollow">bagian akhir</a>. Saya ingin menuju ke <a href="hal2.html#bawah" rel="nofollow">bagian bawah pada halaman selanjutnya</a>.<br /> <a href="http://www.detik.com" rel="nofollow"><img src="gambar.gif" /></a> Homepage detik.com.<br />Ini bagian tengah.<br /><a name="#akhir" rel="nofollow">Ini bagian akhir.</a><br />
<br />
hal1.html<br />
<br />
25<br />
<br />
Frame & Frameset • • • • • •<br />
<br />
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><br />
<br />
<head> <title>Judul dokumen 26Document Frameset Halaman 1 Halaman 2 Halaman 3 Halaman 4 Judul dokumen …isi dokumen… <iframe src="namafile"> bagian ini ditampilkan jika browser tidak mendukung frame …isi dokumen… 28Kisah Sekolah Kisah-kisah di sekolah 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. <iframe width='200' height='179' src='sd.html'> Kisah SD <iframe width='200' height='179' src='smp.html' frameborder='0'> Kisah SMP <iframe width='200' height='179' src='smu.html' scrolling='no'> Kisah SMU
Semua pengalaman dan teman-teman yang kudapat sungguh sangat mewarnai hidupku dan memberikan pengaruh besar terhadap diriku.
teks1 teks2 … 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 tampilan type : submit, reset, button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombolContoh css inline .. menjadi pengatur warna Tag .. memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan. =under line Dan tag = italic Diberi efek baru, yaitu warna merah hurufnya Tag = bold, diberi efek warna hijau akan dilekatkan efek warna, jenis huruf dan gaya huruf Perintahnya CSS-style nya B { color:lime; text-decoration: underline; font-family:Arial } dan tag yang didefinisikan dalam STYLE di file global.css
pada semua dokumen HTML. Contoh :
tulisan ini akan berwarna merah
ini anggota div dengan nama kelas : "namakelas"
dan tag
dan tag ini anggota div dengan nama id unik : "idunik"
