Download - HTML Dasar
HTMLHyper Text Mark Up Language
Pemograman Web (2010/2011) - Feb 24, 2011 Teknik Informatika, Universitas Islam Indonesia
1
Follow Hari Setiaji on Twitter
Agenda
2Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
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
3Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
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)
4Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh Isi Dokumen HTML
5
<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 -->
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Daftar Tag<html> Dokumen<head> Header<title> 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<form> Formulir isian<input>,<textarea>,<select> Komponen isian pada formulir<map> Link berdasar area pada gambar<span>,<div> Pengelompokan elemen dokumen
6Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Judul (Heading)<hn>Judul paragraf</hn>
n = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu paragraf
7
<h1>Judul Tingkat 1</h1><h2>Judul Tingkat 2</h2><h3>Judul Tingkat 3</h3><h4>Judul Tingkat 4</h4><h5>Judul Tingkat 5</h5><h6>Judul Tingkat 6</h6>
<h1>Judul Tingkat 1</h1><h2>Judul Tingkat 2</h2><h3>Judul Tingkat 3</h3><h4>Judul Tingkat 4</h4><h5>Judul Tingkat 5</h5><h6>Judul Tingkat 6</h6>
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.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Paragraf (Paragraph)<p>paragraf</p>Untuk menandai suatu paragraf.
Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.
8
<p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.</p>
<p>Homepage ini masih dalam tahap pengembangan, oleh karena itutampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p>
<p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.</p>
<p>Homepage ini masih dalam tahap pengembangan, oleh karena itutampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p>
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.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
9
Tag Atribut 1 (Bold, Italic, 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, miring, dan/atau digarisbawahi.
Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal
<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>
<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>
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Atribut 2 (Superscript, Subscript)
<sup>bagian yang dicetak tinggi</sup><sub>bagian yang dicetak rendah</sub>
Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.
10
<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
<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 + x2
2 + 2x1x2
2H2 + O2 = 2 H2OPemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Ganti Baris (Break line)<br>Untuk pindah ke baris berikutnya.Bentuk penulisan lain yang dianjurkan (XML style) :<br />
11
Perkenalkan,nama saya ..... Ini adalahhomepage pertama saya,karena saya baru belajar tentang caramembuat homepage.
Homepage ini masih dalam tahap pengembangan,oleh karena itu tampilannya masih terlalu sederhana.
Paragraf
Paragraf
Ganti baris
<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>
<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> Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Font (size)Memformat suatu bagian kalimat dengan ukuran, jenis huruf,
atau warna tertentu.Tag : font Parameter : size, face, color
12
Ukuran satu, dua, tiga, empat, lima, enam, tujuh
Ukuran<font size="1">satu,</font><font size="2">dua,</font><font size="3">tiga,</font><font size="4">empat,</font><font size="5">lima,</font><font size="6">enam,</font><font size="7">tujuh</font>
Ukuran<font size="1">satu,</font><font size="2">dua,</font><font size="3">tiga,</font><font size="4">empat,</font><font size="5">lima,</font><font size="6">enam,</font><font size="7">tujuh</font>
<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
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Font (face)Memformat suatu bagian kalimat dengan ukuran, jenis
huruf, atau warna tertentu.Tag : font Parameter : size, face, color
13
Jenis huruf
<font face="nama font"> kalimat </font>nama font = Times New Roman, Arial,
Courier New, Verdana, dll.
Homepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembangan
<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>
<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>
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Font (color)
Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.
Tag : font Parameter : size, face, color
14
Warna
RedMaroonLimeGreenBlueNavyYellowFuschiaAqua
<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>
<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>
<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)
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
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>
15
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 ...
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 ...
Ada beberapa sektor potensial: Pariwisata Seni BudayaSektor tersebut merupakan …
Fasilitas penginapan di Indonesia:
1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel
o Hotel melatio Hotel berbintang
Perkembangan dalam ...Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Garis Mendatar (Horizontal Line)
<hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) :<hr />
16
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.
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.
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.
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Gambar (Image)<img src="NamaFileGambar">
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG. Untuk menampilkan sebuah file gambar.Bentuk penulisan lain yang dianjurkan (XML style) :
<img src="NamaFileGambar" />
17
<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.
<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.
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.
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
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 ditujuAcuan = Kata sembarang sebagai penanda (bookmark)
membentuk link ke URL/file/bagian dokumen lain.
18
Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya inginlangsung menuju ke <a href="#akhir">bagian akhir</a>. Saya ingin menuju ke<a href="hal2.html#bawah">bagian bawah pada halaman selanjutnya</a>.<br /><a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepagedetik.com.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagianakhir.</a>
Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya inginlangsung menuju ke <a href="#akhir">bagian akhir</a>. Saya ingin menuju ke<a href="hal2.html#bawah">bagian bawah pada halaman selanjutnya</a>.<br /><a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepagedetik.com.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagianakhir.</a>
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Tag Tabel (Table) - layout<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>
<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>
19Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Desain/Layout Halaman
20
Navigasi
Logo
Navigasi
Navigasi
Navigasi
Logo
Navigasi
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Let’s Play
21Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Finally
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom