Web diktat html

493 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
493
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web diktat html

  1. 1. BAB I PENGENALAN HTML HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi ataupun interface aplikasi di dalam Internet. Ada 2 (dua) cara untuk membuat sebuah web page dengan HTML editor atau dengan editor teks biasa (misal : notepad). 1.1 Definisi Elemen Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen adalah : head, body, table, paragraph, dan list. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya. 1.2 Definisi Tag Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag html terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya <h1> dengan </h1> atau bisa ditulis dengan <H1> dengan </H1>). Jadi nama tag bisa ditulis dengan huruf kecil atau huruf besar. Tag yang menjadi pasangan selalu diawali dengan karakter garing (/,garis miring). Tag yang pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen. Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen di dalam dokumen HTML harus ditandai dengan penulisan tagnya yang berpasangan. Ada beberapa elemen yang tidak mengharuskan tagnya berpasangan, diantaranya adalah : • Paragraph dengan tag <p> • Ganti baris – line break dengan tag <br> • Garis datar – horizontal rule dengan tag <hr> • List item dengan tag <li> Ket. : tag sebaiknya ditulis berpasangan. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, ditulis : <nametag> - </nametag> 1.3 Elemen HTML yang dibutuhkan Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>, <head>, <body> berikut pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya terdiri dari link, grafik, paragraph, dan elemen lainnya. 1
  2. 2. Secara umum dokumen web dibagi menjadi 2(dua) section (bagian), yaitu section head dan section body. Sehingga setiap dokumen html harus mempunyai pola dasar sebagai berikut : <html> <head> …informasi tentang dokumen HTML </head> <body> …informasi yg ditampilkan dalam browser web </body> </html> Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Dalam satu dokumen/file hanya ada 1(satu) elemen html. Contoh program html : <!—contoh.html --> <html> <head> <title>Judul Halaman</title> </head> <body> Ini program html pertamaku </body> </html> 1.4 Atribut Tag Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Contoh : 1. <body>, tag tanpa atribut, <body bgcolor=”red”> artinya tag body mempunyai atribut bgcolor dengan nilai “red”, maka dokumen yang ditampilkan dengan warna background merah. 2. <table>, tag tanpa atribut, <table border=”1”>, artinya table ditampilkan dengan menggunakan garis batas (border) tunggal. Secara umum tag dengan atributnya adalah sebagai berikut : <nametag atr1=”nilai-atr1” atr2=”nilai-atr2” ….> ….. </nametag> 2
  3. 3. BAB II TAG-TAG DASAR HTML Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan terdiri dari teks informasi. Judul atau topic utama dokumen disimpan dalam section/elemen head, disimpan dalam elemen title, dengan tag <title>…..</title>. Title ini akan ditampilkan pada bagian caption dari windows browser web. Hanya elemen title saja dari elemen head yang ditampilkan di browser. Teks informasi ini akan disimpan dalam section/elemen body – di dalam tag <body> ….</body>. Teks disusun dalam paragraph-2 tag <p>. Teks juga mempunyai judul-judul yang menunjukkan topik-topik atau bagian-bagian dalam dokumen – judul disebut heading. Heading dalam HTML mempunyai 6 level, yaitu level 1 s/d level 6, dinyatakan dengan tag <h1> s/d <h6>, dan pasangannya </h1> s/d </h6>. Contoh-contoh program HTML Contoh 1 : <!—latih1.htm  <html> <head> <title>latihan pertamaku</title> </head> <body> <p><font color="blue">Selamat Datang di Program HTML</p> Selamat mencoba program ini <br>Semoga sukses</br> </body> </html> Output latih1.htm : Contoh 2 (menggunakan paragraph pada HTML) : <!-- paragraf.html --> <html> <head> <title>latihan pakai paragraf</title> </head> <body> <p>Ini adalah paragraf 1</p> <p>Ini adalah paragraf 2</p> <p>Ini adalah paragraf 3</p> </body> </html> 3
  4. 4. Output paragraf.html : Contoh 3 (menggunakan header (H1 s/d H6) dalam HTML): <!-- latih2.html --> <html> <head> <title>latihan kedua html</title> </head> <body> <h1 align=center>Ini Header Pertama</h1> <h2 align=right>Ini Header Kedua</h2> <h3>Ini Header Ketiga</h3> <h4>Ini Header Keempat</h4> <h5>Ini Header Kelima</h5> <h6>Ini Header Keenam</h6> </body> </html> Output latih2.htm : 4
  5. 5. BAB III LINK HTML Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan /atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot (‘highlight’) teks atau gambar yang diidentifikasi sebagai link dengan warna dan/atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (disebut hyperlink atau link). HTML menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web dan diikuti dengan href untuk mendefinisikan lokasi link. <a href=”nama file/alamat file”>…………</a> 3.1 Link Relatif Dibuat untuk link ke page lain pada computer yang sama. Contoh : <a href=”latih1.html”>Lanjut ya</a> <a href=”c:my documentlatih2.html”>Lanjutkan</a> 3.2 Link Absolut Dibuat untuk link ke web page lain yang berada pada website di Internet. Contoh : <a href=http://www.kaligrafi-tegal.com>Toko Kaligrafi Tegal</a> 3.3 Link untuk Window Baru Link ini untuk melakukan link ke page lain dengan membukanya pada window baru, sehingga pengunjung tidak harus meninggalkan web site kita. Contoh : <html> <body> <a href="latih1.htm" target="_blank">Latih1</a> <p> Membuka window baru </p> </body> </html> 3.4 Link kebagian lain dalam satu dokumen Link jenis ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser web mengharuskan kita melakukan scroll layar ber-ulang-2. Bentuk : <a href=”#namabagian”>Nama</a> Contoh : <!-- Nama file : linkbagian.htm --> <html> <head> <title>Link ke Bagian Lain</title> </head> <body> <h2>Daftar Isi Naskah Nusantara Kuno</h2> <a name="top"> <a href="#B3">Lihat Bab 3</a></a> <p>BAB 1 <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera isi dari naskah ini adalah bla...bla.. bla.... <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera 5
  6. 6. isi dari naskah ini adalah bla...bla.. bla.... <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera isi dari naskah ini adalah bla...bla.. bla.... <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera isi dari naskah ini adalah bla...bla.. bla.... <p>BAB 2 <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera isi dari naskah ini adalah bla...bla.. bla.... <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera isi dari naskah ini adalah bla...bla.. bla.... <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera isi dari naskah ini adalah bla...bla.. bla.... <br>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Sumatera isi dari naskah ini adalah bla...bla.. bla.... <br>Jangan salahkan saya kalau anda tidak tahu apa-apa yach....! </p> <a name="B3">Bab 3</a> <p>Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawa isi dari naskah ini adalah bla...bla.. bla.... <br> Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawa isi dari naskah ini adalah bla...bla.. bla.... <br> Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawa isi dari naskah ini adalah bla...bla.. bla.... <br> Bab ini berisi kumpulan naskah-naskah kuno dari Pulau Jawa isi dari naskah ini adalah bla...bla.. bla.... </p> <a href="#top">Kembali ke atas</a> </body> </html> 6
  7. 7. BAB IV LIST HTML List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu. HTML mengenal bermacam list, yaitu : • List dengan nomor (Ordered List) • List tanpa nomor (Unordered List) • List definisi (Definition List) List dengan nomor adalah model daftar yang setiap itemnya diberi nomor, seperti angka latin, romawi, huruf. Sedangkan list tanpa nomor yang menggunakan daftar itemnya tanpa nomor, seperti bullet (tanda bulat). List definisi adalah list untuk memberi uraian terhadap suatu item dalam daftar. Nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list Type I Arti Ditampilkan dengan angka romawi huruf besar i Ditampilkan dengan angka romawi huruf kecil A Ditampilkan dengan abjad huruf besar a Ditampilkan dengan abjad huruf kecil Contoh 1 : (Program list berurut dengan nomor) <html> <head> <title>Daftar Siswa Web</title> </head> <body> <h2>Daftar siswa pemrograman web</h2> <ol type=”I”> <li>Suhadi</li> <li>Amelia</li> <li>Puspitasari</li> <li>Heru Hendarto</li> <li>M. Soleh</li> <li>Damayanti</li> </ol> </body> </html> <html> <head> <title>Daftar Siswa Web</title> </head> <body> <h2>Daftar siswa pemrograman web</h2> <ol type=A> <li>Suhadi</li> <li>Amelia</li> <li>Puspitasari</li> <li>Heru Hendarto</li> <li>M. Soleh</li> <li>Damayanti</li> </ol> </body> </html> Output : 7
  8. 8. Contoh 2 : (list berurut tanpa nomor) Contoh 3 : (Program definisi list) <html> <head> <title>Program List tanpa nomor</title> </head> <body> <h2>Daftar Buah-Buahan</h2> <ul> <li>Apel</li> <li>Jeruk</li> <li>Pisang</li> <li>Anggur</li> <li>Mangga</li> </ul> </body> </html> <html> <head> <title>Daftar Minuman di Cafe</title> </head> <body> <h3>Daftar minuman</h3> <dl> <dt>Coffee</dt> <dd>Black Hot Drink</dd> <dd>White coffee Drink</dd> <dt>Milk</dt> <dd>White Cold Drink</dd> </dl> </body> </html> 8
  9. 9. BAB V IMAGE HTML Sebuah gambar berbicara seribu kata, karena gambar bisa berbicara lebih baik dari penjelasan yang panjang dan lebar. Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung suatu website. Umumnya website dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu website. Umumnya browser web dapat menampilkan inline image (gambar yang disajikan bersamaan dengan teks) yang mempunyai format BMP, GIF, JPEG/JPG. Format-format gambar lain juga ada yang digabungkan ke dalam browser web, misal format PNG (Portable Network Graphic). Setiap gambar akan membutuhkan waktu tambahan untuk didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Karena itu hati-hati memilih gambar dan menyertakannya ke dalam suatu dokumen. Bentuk format perintah menampilkan gambar pada HTML adalah : <img src=”nama-image”> Contoh program menampilkan gambar <!—nama file : gambar1.htm -> <html> <body> <p> Ini gambar ke 1<img src="55297.jpg"> </p> <p> Ini gambar ke 2 <img src="anim-html.gif"> </p> </body> </html> <!—nama file : gambar2.htm -> <html> <body> <p> Ini Gambarku <img src="anim-html.gif" align=bottom> yaitu gambar ke 1 </p> <p> Ini gambarku juga <img src="kucing2.bmp" width=300 height=200 align=top> yaitu gambar ke 2 </p> </body> </html> Output gambar2.htm 9
  10. 10. BAB VI TABEL HTML Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Elemen <table> …. </table> <caption> ……….. </caption> Penjelasan Mendefinisikan table dalam html. Mendefinisikan tulisan untuk judul table. Posisi default ada ditengah (align=”center”). Align=”left -> posisi dikiri, align=”right” -> <tr> …………. </tr> <th> ………… </th> posisi ditengah Menspesifikasikan baris pada table Mendefinisikan sel header table. Posisi <td> ………….. </td> default ditengah dan huruf tebal. Menspesifikasikan kolom pada table atau mendefinisikan sel data tabel Contoh 1 : <!-- file name : coba_tabel.htm -- > <html> <body> <p>Setiap tabel dimulai dengan tag table. Setiap baris dimulai dengan tag tr. Setiap data dimulai dengan tag td. </p> <h4>Satu baris dan satu kolom : </h4> <table border=1> <tr> <td>100</td> </tr> </table> <h4>Satu baris dan tiga kolom : </h4> <table border=2> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Dua baris dan dua kolom : </h4> <table border=4> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> </body> </html> 10
  11. 11. Output : Contoh 2 : <!-- file tabel dengan caption --> <html> <head> <title>Daftar Siswa Web</title> </head> <body> <h2 align=center>Daftar siswa pemrograman web</h2> <table border=1 bgcolor="99aaff"> <caption>Tabelku</caption> <tr align=center ><th>NAMA</th><th>UMUR</th></tr> <tr><td>Suhadi</td><td align=center>25 th</td></tr> <tr><td>Amelia</td><td align=right>20 th</td></tr> <tr><td>Puspitasari</td><td>22 th</td></tr> <tr><td>Heru Hendarto</td><td>21 th</td></tr> <tr><td>M. Soleh</li></td><td>23 th</td></tr> <tr><td>Damayanti</td><td>25 th</td></tr> </table> </body> </html> Output : BAB VII FRAME HTML 11
  12. 12. Elemen dalam HTML digunakan untuk membangun web page yang memungkinkan penampilan beberapa web page ditampilkan dalam satu window browser. Window dalam browser dibagi menjadi beberapa windows yang disebut frame. Model ini sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu ditampilkan. Sintaks : <frameset border=# {[rows/cols]}={#,[#,#]}> <frame src=”file-name” name=”nama-frame”> </frameset> Ada beberapa macam bentuk frame pada HTML, yaitu : frame baris, frame kolom, frame campuran, frame navigasi & frame Inline. Contoh 1 (frame kolom) : <html> <frameset cols="25%,50%,25%"> <frame src="latih2.htm"> <frame src="latih4.htm"> <frame src="latih3.htm"> </frameset> </html> Output frame baris : Contoh 2 (frame baris) : <html> <frameset rows="25%,50%,25%"> <frame src="latih2.htm"> <frame src="latih4.htm"> <frame src="latih3.htm"> </frameset> </html> Contoh 3 (frame campuran) : 12
  13. 13. <! Nama file : framemix.html <html> <frameset rows=”50%,50%”> <frame src=”latih1.html”> <frameset cols=”25%,75%”> <frame src=”latih2.html”> <frame src=”latih3.html”> </frameset> </frameset> </html> Output frame campuran : Contoh 4 (frame navigasi) : <! Nama file : framenav.html  <html> <frameset cols=”120,*” frameborder=1> <frame src=”latih1.html”> <frame src=”latih2.html” name=”showframe”> </frameset> </html> Output frame navigasi : 13
  14. 14. Contoh 5 (frame Inline, yaitu frame dalam page HTML) <! Nama file : frameinline.html  <html> <iframe src=”latih4.htm”> </iframe> </html> Output : BAB VIII FORM DAN INPUT HTML Tag Form dan input adalah elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. 8.1 Jenis Masukkan dalam Form Jenis masukkan dalam satu dokumen dibedakan menjadi : • Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka ataupun teks. • Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih. 14
  15. 15. • Check box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih. • List, menyediakan pilihan dalam bentuk list. • Image, digunakan sebagai pengganti button, berupa button yang berbentuk gambar. • Text Area, digunakan untuk memasukkan data dalam bentuk teks berupa memo. • Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form, diantaranya : o Submit, digunakan untuk memanggil Url/File, setelah input selesai dimasukkan. o Reset, digunakan untuk menginisialisasi setiap elemen form. o Button, digunakan untuk membuat form lebih interaktif untuk memanggil script yang ada didalam dokumen html. Setiap jenis masukkan dalam form mempunyai tag-tag sendiri dengan masing-masing atributnya. a. Tag Text <input type=”text” name=”var1” size=# maxlength=#> Keterangan : - Value pada atribut size menunjukkan besar text box - Value pada atribut maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung b. Tag Radio <input type=”radio”> pilihan 1 <input type=”radio”> pilihan 2 <input type=”radio”> pilihan 3 c. Tag Checkbox <input type=”checkbox”> pilihan 1 <input type=” checkbox”> pilihan 2 <input type=” checkbox”> pilihan 3 d. Tag Select <select size=2> <Option> pilihan 1 <Option> pilihan 2 <Option> pilihan 3 </select> Keterangan : Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari satu. Default adalah satu pilihan, secara otomatis maka list berupa list box, yang dapat berlaku seperti drop down list box. e. Tag Button <Input type=”submit”> <Input type=”reset”> f. Tag Image <input type="image" src="url_image"> g. Text Area <textarea cols=”50” rows=”5”></textarea> Pada setiap elemen dapat diberikan nama, dengan memberikan atribut Name, dengan value berupa string yang mendefinisikan nama elemen. Dalam pemrograman sering disebut sebagai nama variable. Nama variable sebaiknya mencerminkan fungsi dari variable tersebut. Contoh penggunaan Tag Text <! File name : tagtex1.html <html> <body> <form> Nama : <input type=”text” name=”nama” size=15 maxlength=15> <br> Alamat : <input type=”text” name=”alamat” size=25 maxlength=20> </form> 15
  16. 16. </body> </html> Output : <! File name : tagtex2.html <html> <body> <form> Nama : <input type=”text” name=”nama” maxlength=20> <br> Alamat : <input type=”text” name=”alamat” maxlength=25> <br><br> <input type=Reset value=Submit> </form> </body> </html> Output : Contoh penggunaan Tag Checkbox <! File name : cekbox.html <html> <body> Saya suka artis : <form> <input type=checkbox name=”Wilson”>Chaterine Wilson <br> <input type=checkbox name=”Luna”>Luna Maya <p> <input type=reset value=Ulangi> </p> </form> </body> </html> 16
  17. 17. Output : Contoh 1 (penggunaan Tag Radio) <! File name : radio1.html <html> <body> <form> <input type=radio name=”Sex”>Laki-Laki <br> <input type=radio name=”Sex”>Perempuan <p> <input type=reset value=Ulangi> </p> </form> </body> </html> Contoh 2 <! File name : radio2.html <html> <body> <form> <input type=radio name=”Sex” checked>Laki-Laki <br> <input type=radio name=”Sex”>Perempuan <br> <input type=radio name=”usia” checked>Dewasa <br> <input type=radio name=”usia”>Anak-Anak <p> <input type=Reset value=Ulangi> </p> </form> </body> </html> Output Radio2.html 17
  18. 18. Contoh penggunaan tag SELECT <! File name : seleksi.html <html> <body> <font size=4 face="Verdana">Pilih Merk Mobil yang anda suka</font> <form> <select name=mobil> <option value=mobil1>Mercedes Benz <option value=mobil2>BMW <option value=mobil3>Honda <option value=mobil4>Toyota </select> <input type=Reset value=Ulangi> </form> </body> </html> Output : Contoh penggunaan tag Text Area <! File name : textarea.html <html> <body> <form> Masukkan Komenter anda : <br> <textarea rows=10 cols=16> </textarea> <br><br> <input type=Reset value="Lagi ya...!"> </form> </body> </html> 18
  19. 19. 19

×