際際滷

際際滷Share a Scribd company logo

pertemuan-2-html-hypertext-markup-language.ppt

Download as PPT, PDF
Fatoni Pinocchio
Fatoni Pinocchio

Dokumen tersebut membahas tentang pengenalan HTML (Hypertext Markup Language) sebagai bahasa markup standar untuk mengembangkan halaman web. Terdapat penjelasan mengenai tag, elemen, atribut HTML, serta contoh kode untuk mengatur format teks, warna latar belakang, heading, paragraf, daftar, gambar, dan tautan hyperlink.

1 of 23
Pertemuan 2 1
Bahasa yang digunakan untuk menampilkan informasi pd halaman web. bahasa ini menggunakan tanda (markup) untuk menandai perintah- perintahnya menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan: Text editor sederhana. Contoh: Windows: Notepad Linux: gEdit, mcedit Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, dan Firefox Linux: Firefox dan Conqueror. 2
3 Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil < (tag awal) dan tanda lebih besar > (tag akhir). <namatag> ..... </namatag> Element Jenis-jenis dari tag. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Contoh : <title> ini adalah tag pembuka judul dokumen HTML Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML </title> ini adalah tag penutup judul dokumen HTML Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.
4 <html> <! untuk menyatakan suatu dokumen HTML --> <head> <!-- memberikan informasi mengenai dokumen HTML > </head> <body> <!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML > </body> </html>
5 <html> <head> <title> Belajar HTML </title> </head> <body> Kami sedang mulai belajar HTML </body> </html>
6 Format: <! -- > Fungsi: Memberi nama aplikasi Mendeskripsikan tujuan pengkodean tertentu di dalam file Memberi nama pengarang Memberi tanggal pembuatan Memberi nomer versi Memberi informasi hak cipta
7 Untuk warna latar belakang Untuk heading Untuk paragraf Untuk preformatted text Untuk blockquote Untuk break Untuk font Untuk format dokumen Untuk garis pemisah horisontal Untuk list/daftar Untuk memuat gambar Untuk hypertext link Dan lain-lain
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z"> .............. </body> - Attribute text memberikan warna pada teks, - bgcolor memberikan warna pada latarbelakang dokumen HTML, - background memberikan latarbelakang dokumen HTML dalam bentuk gambar - link memberikan nilai warna untuk link, - alink memberikan warna untuk link yang sedang aktif, - vlink memberikan warna untuk link yang telah dikunjungi. Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan. 8
9 Menggunakan warna <body text = #nnnnnn bgcolor=#nnnnnn> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Warna </title> </head> <body text="red" bgcolor="cyan"> Kami sedang mulai belajar Pemrograman Web </body> </html> Tampilan:
10 Menggunakan gambar <body background=nama_file_gambar> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Gambar </title> </head> <body background="./gambar/picture01.jpg"> Kami sedang mulai belajar Pemrograman Basis Data Berbasis Web </body> </html> Tampilan:
11 Untuk judul atau sub judul dalam dokumen HTML <h1 [align=left|center|right]> . . . </h1> <h2 [align=left|center|right]> . . . </h2> . . <h6 [align=left|center|right]> . . . </h6> Script: <html> <head> <title> Heading </title> </head> <body> <h1 align="center"> Heading 1: Materi HTML </h1> <h2 align="center"> Heading 2: Materi HTML </h2> <h3 align="center"> Heading 3: Materi HTML </h3> <h4 align="center"> Heading 4: Materi HTML </h4> <h5 align="center"> Heading 5: Materi HTML </h5> <h6 align="center"> Heading 6: Materi HTML </h6> </body> </html> Tampilan:
12 Paragraf yang bisa diatur perataannya (kiri, tengah, kanan): <p [align=left|center|right]> . . . </p> Script: <html> <head> <title> Paragraf </title> </head> <body> <h2 align="center"> Materi HTML </h2> <p align="right">Kami sedang mulai belajar Pemrograman Basis Data Berbasis Web. Pada awal materi kami diperkenalkan pada konsep dasar Web </p> <p align="left">Saat ini masuk ke materi Dasar-dasar HTML </p> </body> </html> Tampilan:
13 Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML: <pre> . . . </pre>
14 Untuk menulis kutipan teks: <blockquote> . . . </ blockquote > <HTML><BODY> Ini adalah paragraf normal <BLOCKQUOTE> <P>Ini paragraf yang agak masuk ke dalam. <P align="justify">Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa <b>semua baris</b> dalam paragraf ini letaknya agak masuk ke dalam. <i>Sama rata sama jauhnya</i>. </BLOCKQUOTE> <P>Nah, paragraf ini kembali normal, karena tag <i>blockquote</i> sudah berlalu alias sudah ditutup di atas. Ngerti, kan? </HTML></BODY>
15
16 Untuk menulis teks pada baris berikutnya: <br>
17 Ukuran font <font size=n> . . . </font> Jenis font <font size=n face=jenis_font> . . . </font> Warna font <font size=n face=jenis_font color=warna> . . . </font>
18 Bold: <b> . . .</b> Italic: <i> . . . </i> Superscript: <sup> . . .</sup> Subscripted: <sub> . . . </sub> Struck trough: <del> . . . </del>
19 Garis horisontal untuk memisahkan teks dengan teks lain. <hr [align=left|center|right] [size=n] [width=nnn] [noshade]> </hr>
20 Unordered lists <UL>: daftar item dengan tanda bullet. <ul [type=disc|square|circle] > . . . </ul> Ordered Lists <OL>: untuk membuat daftar item yang terurut. <ol [type=1|a|A|I|i"] [start=n] > . . . </ol> Definition Lists <DL>: untuk menjelaskan istilah-istilah. <dl> . . . </dl> <dt> . . . </dt> <dd> . . . [</dd>] Menu List: menampilkan item-item yang mempunyai link ke page lain. <menu> . . . </menu> Directory List (DIR): untuk daftar item yang pendek atau kurang dari 20 karakter. <dir> . . . </dir>
21 Memuat gambar ke dalam halamanWeb <img src=/slideshow/pertemuan2htmlhypertextmarkuplanguageppt/259809187/URL|name height=n width=n align=top|center|bottom] /> Script: <html> <head> <title> Insert Gambar </title> </head> <body> <b> Aloooo ... </b> <img src="./TFR2A.gif" > </body> </html> Tampilan:
22 Format: <a href=address > . . . </a> Link ke dokumen lain <a href=nama_dokumen > . . . </a> Link ke bagian tertentu dalam dokumen yang sama <a href=#target > . . . </a> <a href=target > . . . </a> Link ke alamat URL atauWebSite <a href=alamat_URL > . . . </a> Link ke alamat Email <a href=mailto:alamat_email > . . . </a> Link File yang akan didownload <a href=nama_file > . . . </a>
Chris Bates [2006]. Web Programming: Building Internet Applications,Third Edition, JohnWiley & Sons Ltd, England. Husni [2007]. Pemrograman Database Berbasis Web, Graha Ilmu,Yogyakarta. Sebesta, R.W. [2002], Programming the World Wide Web, AddisonWesley. Sutarman, S.Kom [2003]. Membangun Aplikasi Web dengan PHP dan MySQL, Graha Ilmu,Yogyakarta 23

More Related Content

pertemuan-2-html-hypertext-markup-language.ppt

  • 2. Bahasa yang digunakan untuk menampilkan informasi pd halaman web. bahasa ini menggunakan tanda (markup) untuk menandai perintah- perintahnya menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan: Text editor sederhana. Contoh: Windows: Notepad Linux: gEdit, mcedit Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, dan Firefox Linux: Firefox dan Conqueror. 2
  • 3. 3 Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil < (tag awal) dan tanda lebih besar > (tag akhir). <namatag> ..... </namatag> Element Jenis-jenis dari tag. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Contoh : <title> ini adalah tag pembuka judul dokumen HTML Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML </title> ini adalah tag penutup judul dokumen HTML Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.
  • 4. 4 <html> <! untuk menyatakan suatu dokumen HTML --> <head> <!-- memberikan informasi mengenai dokumen HTML > </head> <body> <!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML > </body> </html>
  • 5. 5 <html> <head> <title> Belajar HTML </title> </head> <body> Kami sedang mulai belajar HTML </body> </html>
  • 6. 6 Format: <! -- > Fungsi: Memberi nama aplikasi Mendeskripsikan tujuan pengkodean tertentu di dalam file Memberi nama pengarang Memberi tanggal pembuatan Memberi nomer versi Memberi informasi hak cipta
  • 7. 7 Untuk warna latar belakang Untuk heading Untuk paragraf Untuk preformatted text Untuk blockquote Untuk break Untuk font Untuk format dokumen Untuk garis pemisah horisontal Untuk list/daftar Untuk memuat gambar Untuk hypertext link Dan lain-lain
  • 8. <body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z"> .............. </body> - Attribute text memberikan warna pada teks, - bgcolor memberikan warna pada latarbelakang dokumen HTML, - background memberikan latarbelakang dokumen HTML dalam bentuk gambar - link memberikan nilai warna untuk link, - alink memberikan warna untuk link yang sedang aktif, - vlink memberikan warna untuk link yang telah dikunjungi. Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan. 8
  • 9. 9 Menggunakan warna <body text = #nnnnnn bgcolor=#nnnnnn> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Warna </title> </head> <body text="red" bgcolor="cyan"> Kami sedang mulai belajar Pemrograman Web </body> </html> Tampilan:
  • 10. 10 Menggunakan gambar <body background=nama_file_gambar> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Gambar </title> </head> <body background="./gambar/picture01.jpg"> Kami sedang mulai belajar Pemrograman Basis Data Berbasis Web </body> </html> Tampilan:
  • 11. 11 Untuk judul atau sub judul dalam dokumen HTML <h1 [align=left|center|right]> . . . </h1> <h2 [align=left|center|right]> . . . </h2> . . <h6 [align=left|center|right]> . . . </h6> Script: <html> <head> <title> Heading </title> </head> <body> <h1 align="center"> Heading 1: Materi HTML </h1> <h2 align="center"> Heading 2: Materi HTML </h2> <h3 align="center"> Heading 3: Materi HTML </h3> <h4 align="center"> Heading 4: Materi HTML </h4> <h5 align="center"> Heading 5: Materi HTML </h5> <h6 align="center"> Heading 6: Materi HTML </h6> </body> </html> Tampilan:
  • 12. 12 Paragraf yang bisa diatur perataannya (kiri, tengah, kanan): <p [align=left|center|right]> . . . </p> Script: <html> <head> <title> Paragraf </title> </head> <body> <h2 align="center"> Materi HTML </h2> <p align="right">Kami sedang mulai belajar Pemrograman Basis Data Berbasis Web. Pada awal materi kami diperkenalkan pada konsep dasar Web </p> <p align="left">Saat ini masuk ke materi Dasar-dasar HTML </p> </body> </html> Tampilan:
  • 13. 13 Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML: <pre> . . . </pre>
  • 14. 14 Untuk menulis kutipan teks: <blockquote> . . . </ blockquote > <HTML><BODY> Ini adalah paragraf normal <BLOCKQUOTE> <P>Ini paragraf yang agak masuk ke dalam. <P align="justify">Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa <b>semua baris</b> dalam paragraf ini letaknya agak masuk ke dalam. <i>Sama rata sama jauhnya</i>. </BLOCKQUOTE> <P>Nah, paragraf ini kembali normal, karena tag <i>blockquote</i> sudah berlalu alias sudah ditutup di atas. Ngerti, kan? </HTML></BODY>
  • 15. 15
  • 16. 16 Untuk menulis teks pada baris berikutnya: <br>
  • 17. 17 Ukuran font <font size=n> . . . </font> Jenis font <font size=n face=jenis_font> . . . </font> Warna font <font size=n face=jenis_font color=warna> . . . </font>
  • 18. 18 Bold: <b> . . .</b> Italic: <i> . . . </i> Superscript: <sup> . . .</sup> Subscripted: <sub> . . . </sub> Struck trough: <del> . . . </del>
  • 19. 19 Garis horisontal untuk memisahkan teks dengan teks lain. <hr [align=left|center|right] [size=n] [width=nnn] [noshade]> </hr>
  • 20. 20 Unordered lists <UL>: daftar item dengan tanda bullet. <ul [type=disc|square|circle] > . . . </ul> Ordered Lists <OL>: untuk membuat daftar item yang terurut. <ol [type=1|a|A|I|i"] [start=n] > . . . </ol> Definition Lists <DL>: untuk menjelaskan istilah-istilah. <dl> . . . </dl> <dt> . . . </dt> <dd> . . . [</dd>] Menu List: menampilkan item-item yang mempunyai link ke page lain. <menu> . . . </menu> Directory List (DIR): untuk daftar item yang pendek atau kurang dari 20 karakter. <dir> . . . </dir>
  • 21. 21 Memuat gambar ke dalam halamanWeb <img src=/slideshow/pertemuan2htmlhypertextmarkuplanguageppt/259809187/URL|name height=n width=n align=top|center|bottom] /> Script: <html> <head> <title> Insert Gambar </title> </head> <body> <b> Aloooo ... </b> <img src="./TFR2A.gif" > </body> </html> Tampilan:
  • 22. 22 Format: <a href=address > . . . </a> Link ke dokumen lain <a href=nama_dokumen > . . . </a> Link ke bagian tertentu dalam dokumen yang sama <a href=#target > . . . </a> <a href=target > . . . </a> Link ke alamat URL atauWebSite <a href=alamat_URL > . . . </a> Link ke alamat Email <a href=mailto:alamat_email > . . . </a> Link File yang akan didownload <a href=nama_file > . . . </a>
  • 23. Chris Bates [2006]. Web Programming: Building Internet Applications,Third Edition, JohnWiley & Sons Ltd, England. Husni [2007]. Pemrograman Database Berbasis Web, Graha Ilmu,Yogyakarta. Sebesta, R.W. [2002], Programming the World Wide Web, AddisonWesley. Sutarman, S.Kom [2003]. Membangun Aplikasi Web dengan PHP dan MySQL, Graha Ilmu,Yogyakarta 23