fajar pradana s.st., m - hermantolle.com · tag atribut 2 (superscript, subscript) bagian yang...
TRANSCRIPT
Fajar Pradana S.ST., M.Eng
2/26/2013 s1 / TI / semester 4 / 3 sks / reguler 1
HTML Tujuan
Mahasiswa mampu memahami konsep web secara umum
Struktur HTML
Tag-tag Dasar HTML
Atribut Dasar HTML
2
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
<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 -->
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 <frame>,<frameset>,<iframe> Frame (bingkai) <form> Formulir isian <input>,<textarea>,<select> Komponen isian pada formulir <map> Link berdasar area pada gambar <span>,<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
<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) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris
kosong sebelum dan sesudahnya.
<p>
Ini adalah homepage pertama
saya, karena saya baru
belajar
tentang cara membuat
homepage.
</p>
<p>Homepage ini masih dalam
tahap pengembangan, oleh karena
itu
tampilannya 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.
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>
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. <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 = x1
2 + x22 + 2x1x2
2H2 + O2 = 2 H2O
Tag Ganti Baris (Break line) <br> Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br />
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
<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>
Tag Font (size) Memformat suatu bagian kalimat dengan ukuran,
jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color
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>
<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)
Tag Font (face) Memformat suatu bagian kalimat dengan ukuran,
jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color
<font face="nama font"> kalimat </font>
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
<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>
Tag Font (color) Memformat suatu bagian kalimat dengan ukuran,
jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color
Red
Maroon
Lime
Green
Blue
Navy
Yellow
Fuschia
Aqua
<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)
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>
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 Budaya Sektor tersebut merupakan … Fasilitas penginapan di Indonesia: 1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel
o Hotel melati o Hotel berbintang
Perkembangan dalam ...
Tag Garis Mendatar (Horizontal Line)
<hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr />
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" />
<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 Tabel (Table) - data
<table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td>
<table border="1">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</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>
Tag Tabel (Table) - layout
Untuk menata letak (layout) isi dokumen
Desain/Layout Halaman
Navigasi
Logo
Navigasi
Navigasi
Navigasi
Logo
Navigasi
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 dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya
ingin
langsung 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> Homepage
detik.com.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagian
akhir.</a>
hal1.html
form Sebuah dokumen interaktif dapat menangani input dari user Analoginya : bahwa dokumen adalah sebuah formulir isian Sebuah dokumen dapat mengandung satu atau beberapa form Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa,
dll) Setiap form dapat menghimpun satu atau beberapa elemen input Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data
input Di setiap form harus ditentukan nama program (di sisi server) yang akan
menangani data isian yang dikirim (di-submit) Skema dasar dokumen form : <form method="POST" action="namaprogram">
bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian
dengan susunan sejumlah elemen input berbagai jenis
</form>
Contoh sebuah form sederhana untuk meminta nama user : <form method="POST" action="proses.php">
<label for="nama">Ketikkan nama Anda:</label><br>
<input type="text" name="nama" id="nama"><br>
<input type="submit" value="Kirim">
</form>
Karakteristik data input Teks satu baris (single-line text)
<input type="text">
Teks banyak baris (multi-line text) <textarea></textarea>
Teks rahasia (password) <input type="password">
Pilihan tunggal (single selection) <input type="radio">, <select></select>
Pilihan majemuk (multiple selections) <select multiple></select>
Centang (on/off) <input type="checkbox">
Data bawaan/tersembunyi (hidden) <input type="hidden">
File <input type="file">
Koordinat 2D dalam sebuah bidang gambar <input type="image">
Aksi user melalui penekanan tombol <input type="submit">, <input type="reset">, <input type="button">, <button></button>
Tag input <input type="jenis" name="nama" id="id" value="nilai"
disabled>
type : text, password, radio, checkbox, image, submit, reset, button, hidden, file
name : identifier untuk sisi server
id : identifier untuk sisi browser
value : nilai default
disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)
<input type="[text|password]" name="nama" readonly
size="m" maxlength="n">
readonly : jika disebutkan maka elemen tidak bisa diubah nilainya
size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS)
maxlength : banyaknya karakter maksimal yang dapat dimasukkan user
<input type="[radio|checkbox]" name="nama" checked>
checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih
<input type="image" src="gambar" name="nama"
alt="alternatif">
src : nama file gambar
alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar
Tag textarea, select, button <textarea name="nama" rows="b" cols="k">nilai</textarea>
nilai : nilai default
rows : banyaknya baris yang ditampilkan (tinggi)
cols : banyaknya kolom/karakter yang ditampilkan (lebar)
<select name="nama" multiple size="r">
<option value="nilai1" selected>teks1</option>
<option value="nilai2">teks2</option>
…
</select>
multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)
size : banyaknya baris pilihan yang ditampilkan (default=1)
selected : jika disebutkan maka defaultnya dalam keadaan terpilih
<button type="jenis" name="name" value="nilai">
tampilan
</button>
type : submit, reset, button
tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol
Contoh form (1) <form method="POST" action="proses.php">
Silahkan isi data Anda
<input type="hidden" name="halaman" value="1">
<table border="1">
<tr>
<td><label for="nama">Nama lengkap:</label></td>
<td><input type="text" name="nama" id="nama" maxlength="40" size="20"></td>
</tr>
<tr>
<td><label for="pass">Password:</label></td>
<td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td>
</tr>
<tr>
<td><label for="jenkel">Jenis kelamin:</label></td>
<td><input type="radio" name="jenkel" id="jenkel" value="L">Laki-laki<br>
<input type="radio" name="jenkel" id="jenkel" value="P">Perempuan</td>
</tr>
<tr>
<td><label for="alamat">Alamat:</label></td>
<td><textarea rows="3" cols="30"
name="alamat" id="alamat"></textarea></td>
</tr>
<tr>
<td><label for="bayar">Sudah bayar?</label></td>
<td><input type="checkbox"
name="bayar" id="bayar">Sudah</td>
</tr>
</table>
<input type="submit" value=" Kirim ">
<input type="reset" value="Reset">
</form>
Contoh form (2) <form method="POST" action="proses.php" enctype="multipart/form-data">
<input type="hidden" name="halaman" value="2">
<table border="1">
<tr>
<td><label for="kota">Kota:</label></td>
<td><select name="kota" id="kota">
<option value="">pilih kota...</option><option value="bdg">Bandung</option>
<option value="jkt">Jakarta</option><option value="sby">Surabaya</option>
</select></td></tr>
<tr>
<td><label for="kerja">Pekerjaan:</label></td>
<td><select name="kerja" id="kerja" size="4">
<option value="a">Mahasiswa</option><option value="b">Pegawai swasta</option>
<option value="c">Pegawai negeri</option><option value="d">Wiraswasta</option>
</select></td></tr>
<tr>
<td><label for="bahasa">Bahasa:</label><br>(bisa lebih dari satu)</td>
<td><select name="bahasa" id="bahasa" size="4" multiple>
<option value="id">Indonesia</option>
<option value="en">Inggris</option>
<option value="ch">Cina</option>
<option value="fr">Prancis</option>
</select></td></tr>
<tr>
<td>Hobi:<br>(bisa lebih dari satu)</td>
<td><input type="checkbox" name="hobi" value="1">Berenang<br>
<input type="checkbox" name="hobi" value="2">Nonton film<br>
<input type="checkbox" name="hobi" value="3">Musik</td>
</tr><tr>
<td><label for="foto">Foto:</label></td>
<td><input type="file" name="foto" id="foto" size="10"></td></tr>
</table>
<button type="submit">Kirim <img src="smiley.gif"></button>
<button type="reset">Reset <img src="tanya.gif"></button>
</form>
Contoh form (3)
<form method="POST" action="proses.php">
<table border="1">
<tr>
<td><label for="kode">Kode:</label></td>
<td><input type="text" name="kode" id="kode" maxlength="3" size="3"></td>
</tr>
<tr>
<td><label for="jenis">Jenis:</label></td>
<td><select name="jenis" id="jenis" size="4">
<option value="pat">Kapal patroli</option>
<option value="per">Kapal perusak</option>
<option value="pud">Pangkalan udara</option>
<option value="mar">Markas</option>
<option value="log">Logistik</option>
</select></td>
<tr>
<td colspan="2">Tunjuk lokasi penempatan :<br>
<input type="image" src="peta1.gif"></td>
</tr>
</table>
</form>