Your SlideShare is downloading. ×
0
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
HTML Dasar
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML Dasar

1,442

Published on

Materi meliputi pengenalan tag-tag standar dalam HTML beserta contohnya. Enjoy..

Materi meliputi pengenalan tag-tag standar dalam HTML beserta contohnya. Enjoy..

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,442
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
244
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Pemrograman Web
  • Pemrograman Web
  • Pemrograman Web
  • Transcript

    • 1. HTML Hyper Text Mark Up Language Pemograman Web (2010/2011) - Feb 24, 2011 Teknik Informatika, Universitas Islam Indonesia Follow Hari Setiaji on Twitter
    • 2. Agenda Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 3. Tentang HTML <ul><li>HTML : format standar untuk membuat dokumen web </li></ul><ul><li>Spesifikasi HTML standar (HTML 4.01 ) : http://www.w3.org/TR/html4 </li></ul><ul><li>HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus </li></ul><ul><li>File HTML berupa file teks ( plain text file ), bukan binary file , sehingga dapat dibuat menggunakan editor teks biasa </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 4. Skema Dasar Dokumen HTML <ul><li>&lt;html&gt; </li></ul><ul><li> &lt;head&gt; </li></ul><ul><li>&lt;title&gt;Judul dokumen&lt;/title&gt; </li></ul><ul><li> &lt;/head&gt; </li></ul><ul><li> &lt;body&gt; </li></ul><ul><li>Isi dokumen </li></ul><ul><li> &lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul><ul><li>HTML: menandai awal dan akhir dokumen HTML </li></ul><ul><li>HEAD: menandai bagian header dokumen HTML </li></ul><ul><li>TITLE: memberi judul pada dokumen HTML </li></ul><ul><li>BODY: menandai awal dan akhir isi dokumen (yang </li></ul><ul><li>ditampilkan) </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 5. Contoh Isi Dokumen HTML &lt;html&gt; &lt;head&gt; &lt;title&gt;Homepage saya&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Saya&lt;/h1&gt; &lt;h2&gt;Perkenalan&lt;/h2&gt; &lt;p&gt;Perkenalkan, nama saya ..... Ini adalah &lt;i&gt;homepage&lt;/i&gt; &lt;b&gt;pertama&lt;/b&gt; saya, karena saya baru belajar tentang cara membuat &lt;b&gt;&lt;i&gt;homepage&lt;/i&gt;&lt;/b&gt;. &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; &lt;!-- akhir dokumen HTML --&gt; Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 6. Daftar Tag <ul><li>&lt;html&gt; Dokumen </li></ul><ul><li>&lt;head&gt; Header </li></ul><ul><li>&lt;title&gt; Judul dokumen </li></ul><ul><li>&lt;body&gt; Isi dokumen </li></ul><ul><li>&lt;h1&gt;…&lt;h6&gt; Judul paragraf </li></ul><ul><li>&lt;p&gt; Paragraf </li></ul><ul><li>&lt;b&gt;,&lt;i&gt;,&lt;u&gt;,&lt;sup&gt;,&lt;sub&gt; Atribut </li></ul><ul><li>&lt;br&gt; Ganti baris </li></ul><ul><li>&lt;font&gt; Font </li></ul><ul><li>&lt;li&gt;,&lt;ol&gt;,&lt;ul&gt; Enumerasi </li></ul><ul><li>&lt;hr&gt; Garis mendatar </li></ul><ul><li>&lt;img&gt; Gambar </li></ul><ul><li>&lt;a&gt; Link (kaitan/rujukan) </li></ul><ul><li>&lt;table&gt; Tabel </li></ul><ul><li>&lt;!-- --&gt; Komentar </li></ul><ul><li>&lt;form&gt; Formulir isian </li></ul><ul><li>&lt;input&gt;,&lt;textarea&gt;,&lt;select&gt; Komponen isian pada formulir </li></ul><ul><li>&lt;map&gt; Link berdasar area pada gambar </li></ul><ul><li>&lt;span&gt;,&lt;div&gt; Pengelompokan elemen dokumen </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 7. Tag Judul ( Heading ) <ul><li>&lt;h n &gt; Judul paragraf &lt;/h n &gt; </li></ul><ul><li>n = 1,2,3,4,5,6 (tingkat judul) </li></ul><ul><li>Untuk menuliskan judul suatu paragraf </li></ul>&lt;h1&gt; Judul Tingkat 1 &lt;/h1&gt; &lt;h2&gt; Judul Tingkat 2 &lt;/h2&gt; &lt;h3&gt; Judul Tingkat 3 &lt;/h3&gt; &lt;h4&gt; Judul Tingkat 4 &lt;/h4&gt; &lt;h5&gt; Judul Tingkat 5 &lt;/h5&gt; &lt;h6&gt; Judul Tingkat 6 &lt;/h6&gt; Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 8. Tag Paragraf ( Paragraph ) <ul><li>&lt;p&gt; paragraf &lt;/p&gt; </li></ul><ul><li>Untuk menandai suatu paragraf. </li></ul><ul><li>Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. </li></ul>&lt;p&gt; Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. &lt;/p&gt; &lt;p&gt; Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. &lt;/p&gt;&lt;p&gt; Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. &lt;/p&gt; 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. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 9. Tag Atribut 1 ( Bold, Italic, Underline ) &lt;b&gt; Kalimat yang dicetak tebal &lt;/b&gt; &lt;i&gt; Kalimat yang dicetak miring &lt;/i&gt; &lt;u&gt; Kalimat yang digarisbawahi &lt;/u&gt; Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi . Kata dapat dicetak tebal, miring , garis bawah , tebal miring , dan kombinasi di tengah huruf normal &lt;p&gt;Kata dapat dicetak &lt;b&gt; tebal &lt;/b&gt; , &lt;i&gt; miring &lt;/i&gt; , &lt;u&gt; garis bawah &lt;/u&gt; , &lt;b&gt; tebal &lt;i&gt; miring &lt;/i&gt;&lt;/b&gt; , dan &lt;b&gt;&lt;i&gt;&lt;u&gt; kombinasi &lt;/u&gt;&lt;/i&gt;&lt;/b&gt; di tengah huruf normal&lt;/p&gt; Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 10. Tag Atribut 2 ( Superscript, Subscript ) <ul><li>&lt;sup&gt; bagian yang dicetak tinggi &lt;/sup&gt; </li></ul><ul><li>&lt;sub&gt; bagian yang dicetak rendah &lt;/sub&gt; </li></ul><ul><li>Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia. </li></ul>&lt;p&gt;(x &lt;sub&gt; 1 &lt;/sub&gt; + x &lt;sub&gt; 2 &lt;/sub&gt; ) &lt;sup&gt; 2 &lt;/sup&gt; = x &lt;sub&gt; 1 &lt;/sub&gt;&lt;sup&gt; 2 &lt;/sup&gt; + x &lt;sub&gt; 2 &lt;/sub&gt;&lt;sup&gt; 2 &lt;/sup&gt; + 2x &lt;sub&gt; 1 &lt;/sub&gt; x &lt;sub&gt; 2 &lt;/sub&gt; &lt;/p&gt; &lt;p&gt;2H &lt;sub&gt; 2 &lt;/sub&gt; + O &lt;sub&gt; 2 &lt;/sub&gt; = 2 H &lt;sub&gt; 2 &lt;/sub&gt; O (x 1 + x 2 ) 2 = x 1 2 + x 2 2 + 2x 1 x 2 2H 2 + O 2 = 2 H 2 O Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 11. Tag Ganti Baris (Break line) <ul><li>&lt;br&gt; </li></ul><ul><li>Untuk pindah ke baris berikutnya. </li></ul><ul><li>Bentuk penulisan lain yang dianjurkan ( XML style ) : </li></ul><ul><li>&lt;br /&gt; </li></ul>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. Paragraf Paragraf Ganti baris &lt;p&gt;Perkenalkan, &lt;br /&gt; nama saya ..... Ini adalah &lt;br /&gt; homepage pertama saya, &lt;br /&gt; karena saya baru belajar tentang cara &lt;br /&gt; membuat homepage.&lt;/p&gt; &lt;p&gt;Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.&lt;/p&gt; Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 12. Tag Font (size) <ul><li>Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. </li></ul><ul><li>Tag : font Parameter : size , face, color </li></ul>Ukuran satu, dua, tiga, empat, lima, enam , tujuh Ukuran &lt;font size=&amp;quot;1&amp;quot;&gt; satu, &lt;/font&gt; &lt;font size=&amp;quot;2&amp;quot;&gt; dua, &lt;/font&gt; &lt;font size=&amp;quot;3&amp;quot;&gt; tiga, &lt;/font&gt; &lt;font size=&amp;quot;4&amp;quot;&gt; empat, &lt;/font&gt; &lt;font size=&amp;quot;5&amp;quot;&gt; lima, &lt;/font&gt; &lt;font size=&amp;quot;6&amp;quot;&gt; enam, &lt;/font&gt; &lt;font size=&amp;quot;7&amp;quot;&gt; tujuh &lt;/font&gt; &lt;font size=&amp;quot; n&amp;quot; &gt; kalimat &lt;/font&gt; &lt;font size=&amp;quot; m&amp;quot; &gt; kalimat &lt;/font&gt; n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf) m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf) Ukuran Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 13. Tag Font (face) <ul><li>Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. </li></ul><ul><li>Tag : font Parameter : size, face , color </li></ul>Jenis huruf &lt;font face=&amp;quot; nama font&amp;quot; &gt; kalimat &lt;/font&gt; nama font = Times New Roman , Arial, Courier New , Verdana, dll. Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan &lt;font face=&amp;quot;Times New Roman&amp;quot;&gt; Homepage ini masih dalam tahap pengembangan &lt;/font&gt; &lt;br /&gt; &lt;font face=&amp;quot;Arial&amp;quot;&gt; Homepage ini masih dalam tahap pengembangan &lt;/font&gt; &lt;br /&gt; &lt;font face=&amp;quot;Courier New&amp;quot;&gt; Homepage ini masih dalam tahap pengembangan &lt;/font&gt; &lt;br /&gt; &lt;font face=&amp;quot;Verdana&amp;quot;&gt; Homepage ini masih dalam tahap pengembangan &lt;/font&gt; Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 14. Tag Font (color) <ul><li>Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. </li></ul><ul><li>Tag : font Parameter : size, face, color </li></ul>Warna Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua &lt;b&gt; &lt;font color=&amp;quot;#FF0000&amp;quot;&gt; Red &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#800000&amp;quot;&gt; Maroon &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#00FF00&amp;quot;&gt; Lime &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#008000&amp;quot;&gt; Green &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#0000FF&amp;quot;&gt; Blue &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#000080&amp;quot;&gt; Navy &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#FFFF00&amp;quot;&gt; Yellow &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#FF00FF&amp;quot;&gt; Fuchsia &lt;/font&gt; &lt;br /&gt; &lt;font color=&amp;quot;#00FFFF&amp;quot;&gt; Aqua &lt;/font&gt; &lt;/b&gt; &lt;font color=&amp;quot;# RRGGBB&amp;quot; &gt; kalimat &lt;/font&gt; RR = 00 .. FF (intensitas warna merah dalam heksadesimal) GG = 00 .. FF (intensitas warna hijau dalam heksadesimal) BB = 00 .. FF (intensitas warna biru dalam heksadesimal) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 15. Tag Enumerasi ( List, Unordered List, Ordered List ) <ul><li>&lt;li&gt; item &lt;/li&gt; </li></ul><ul><li>Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • ( bullet ) </li></ul><ul><li>Kelompok item harus diapit oleh tag &lt;ul&gt; &lt;/ul&gt; dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag &lt;ol&gt; &lt;/ol&gt; </li></ul>Ada beberapa sektor potensial: &lt;li&gt; Pariwisata &lt;/li&gt; &lt;li&gt; Seni &lt;/li&gt; &lt;li&gt; Budaya &lt;/li&gt; &lt;br /&gt; Sektor tersebut merupakan ... &lt;p&gt;Fasilitas penginapan di Indonesia: &lt;ol&gt; &lt;li&gt; Losmen &lt;/li&gt; &lt;br /&gt; Losmen merupakan tempat penginapan yang berskala kecil &lt;li&gt; Hotel &lt;/li&gt; &lt;ul&gt; &lt;li&gt; Hotel melati &lt;/li&gt; &lt;li&gt; Hotel berbintang &lt;/li&gt; &lt;/ul&gt; &lt;/ol&gt; Perkembangan dalam ... <ul><li>Ada beberapa sektor potensial: </li></ul><ul><li> Pariwisata </li></ul><ul><li> Seni </li></ul><ul><li> Budaya </li></ul><ul><li>Sektor tersebut merupakan … </li></ul><ul><li>Fasilitas penginapan di Indonesia: </li></ul><ul><li>1. Losmen </li></ul><ul><li>Losmen merupakan tempat penginapan </li></ul><ul><li>yang berskala kecil </li></ul><ul><li>2. Hotel </li></ul><ul><ul><ul><li>Hotel melati </li></ul></ul></ul><ul><ul><ul><li>Hotel berbintang </li></ul></ul></ul><ul><li>Perkembangan dalam ... </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 16. Tag Garis Mendatar ( Horizontal Line ) <ul><li>&lt;hr&gt; </li></ul><ul><li>membentuk garis pemisah mendatar. </li></ul><ul><li>Bentuk penulisan lain yang dianjurkan ( XML style ) : </li></ul><ul><li>&lt;hr /&gt; </li></ul>Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. &lt;hr /&gt; Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom 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.
    • 17. Tag Gambar ( Image ) <ul><li>&lt;img src =&amp;quot; NamaFileGambar&amp;quot; &gt; </li></ul><ul><li>NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG. Untuk menampilkan sebuah file gambar. </li></ul><ul><li>Bentuk penulisan lain yang dianjurkan ( XML style ) : </li></ul><ul><li>&lt;img src =&amp;quot; NamaFileGambar&amp;quot; / &gt; </li></ul>&lt;img src=&amp;quot;cover.jpg&amp;quot; align=&amp;quot;left&amp;quot; /&gt; 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 &lt;img src=&amp;quot;logo.gif&amp;quot; alt=&amp;quot;Logo&amp;quot; /&gt; sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom 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.
    • 18. Tag Link (Anchor) <ul><li>&lt;a href=&amp;quot; Link &amp;quot;&gt; Kata yang di-click &lt;/a&gt; </li></ul><ul><li>&lt;a name=&amp;quot;# Acuan &amp;quot;&gt; Kata yang dituju &lt;/a&gt; </li></ul><ul><li>Link = Alamat URL atau nama file dan/atau acuan yang dituju </li></ul><ul><li>Acuan = Kata sembarang sebagai penanda (bookmark) </li></ul><ul><li>membentuk link ke URL/file/bagian dokumen lain. </li></ul>Saya ingin melihat &lt;a href=&amp;quot;hal2.html&amp;quot;&gt; halaman selanjutnya &lt;/a&gt; . Saya ingin langsung menuju ke &lt;a href=&amp;quot;#akhir&amp;quot;&gt; bagian akhir &lt;/a&gt; . Saya ingin menuju ke &lt;a href=&amp;quot;hal2.html#bawah&amp;quot;&gt; bagian bawah pada halaman selanjutnya &lt;/a&gt; .&lt;br /&gt; &lt;a href=&amp;quot;http://www.detik.com&amp;quot;&gt; &lt;img src=&amp;quot;gambar.gif&amp;quot; /&gt; &lt;/a&gt; Homepage detik.com.&lt;br /&gt;Ini bagian tengah.&lt;br /&gt; &lt;a name=&amp;quot;#akhir&amp;quot;&gt; Ini bagian akhir. &lt;/a&gt; Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 19. Tag Tabel ( Table ) - layout <ul><li>&lt;table border=&amp;quot;1&amp;quot; width=&amp;quot;500&amp;quot;&gt; </li></ul><ul><li>&lt;tr&gt; </li></ul><ul><li>&lt;td&gt;Header kiri&lt;/td&gt; </li></ul><ul><li>&lt;td align=&amp;quot;center&amp;quot; width=&amp;quot;50%&amp;quot;&gt;Header tengah&lt;/td&gt; </li></ul><ul><li>&lt;td align=&amp;quot;right&amp;quot;&gt;Header kanan&lt;/td&gt; </li></ul><ul><li>&lt;/tr&gt; </li></ul><ul><li>&lt;tr&gt; </li></ul><ul><li>&lt;td valign=&amp;quot;top&amp;quot; rowspan=&amp;quot;2&amp;quot;&gt;Menu kiri&lt;/td&gt; </li></ul><ul><li>&lt;td align=&amp;quot;center&amp;quot; colspan=&amp;quot;2&amp;quot; height=&amp;quot;200&amp;quot;&gt;Bagian Isi&lt;/td&gt; </li></ul><ul><li>&lt;/tr&gt; </li></ul><ul><li>&lt;tr&gt; </li></ul><ul><li>&lt;td align=&amp;quot;center&amp;quot;&gt;Footer tengah&lt;/td&gt; </li></ul><ul><li>&lt;td align=&amp;quot;right&amp;quot;&gt;Footer kanan&lt;/td&gt; </li></ul><ul><li>&lt;/tr&gt; </li></ul><ul><li>&lt;/table&gt; </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 20. Desain/Layout Halaman Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 21. Let’s Play Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    • 22. Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

    ×