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


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)


Contoh Isi Dokumen HTML

5

<html> <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. </body></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 Paragraf,,,, Atribut Ganti baris 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,<div> Pengelompokan elemen dokumen


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


Tag Paragraf (Paragraph)paragrafUntuk menandai suatu paragraf.

Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

8

 Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.

Homepage ini masih dalam tahap pengembangan, oleh karena itutampilannya masih terlalu sederhana.Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.

 Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.

Homepage ini masih dalam tahap pengembangan, oleh karena itutampilannya masih terlalu sederhana.Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.

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.


9

Tag Atribut 1 (Bold, Italic, Underline)

Kalimat yang dicetak tebalKalimat yang dicetak miringKalimat yang digarisbawahi

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

Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal

Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal


Tag Atribut 2 (Superscript, Subscript)

bagian yang dicetak tinggibagian yang dicetak rendah

Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.

10

(x1 + x2)2 = x12 + x22 + 2x1x2

2H2 + O2 = 2 H2O

(x1 + x2)2 = x12 + x22 + 2x1x2

2H2 + O2 = 2 H2O

(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) Untuk pindah ke baris berikutnya.Bentuk penulisan lain yang dianjurkan (XML style) : 

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

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.

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 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

Ukuransatu,dua,tiga,empat,lima,enam,tujuh

Ukuransatu,dua,tiga,empat,lima,enam,tujuh

 kalimat kalimat n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)

Ukuran


Tag Font (face)Memformat suatu bagian kalimat dengan ukuran, jenis

huruf, atau warna tertentu.Tag : font Parameter : size, face, color

13

Jenis huruf

 kalimat 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

Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan

Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan


Tag Font (color)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

14

Warna

RedMaroonLimeGreenBlueNavyYellowFuschiaAqua

Red Maroon Lime Green Blue Navy Yellow Fuchsia Aqua

Red Maroon Lime Green Blue Navy Yellow Fuchsia Aqua

 kalimat RR = 00 .. FF (intensitas warna merah dalam heksadesimal)GG = 00 .. FF (intensitas warna hijau dalam heksadesimal)BB = 00 .. FF (intensitas warna biru dalam heksadesimal)


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> Sektor tersebut merupakan ...Fasilitas penginapan di Indonesia:<ol> <li>Losmen</li> 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> Sektor tersebut merupakan ...Fasilitas penginapan di Indonesia:<ol> <li>Losmen</li> 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.


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.


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>. <a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepagedetik.com. Ini bagian tengah. <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>. <a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepagedetik.com. Ini bagian tengah. <a name="#akhir">Ini bagianakhir.</a>


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>


Desain/Layout Halaman

20

Navigasi

Logo

Navigasi

Navigasi

Navigasi

Logo

Navigasi


Let’s Play


Finally

HTML Dasar

Education