HTML. Amir Ar Razzaaq. Sekolah Tinggi Agama Islam Darunnajah

(1)

HTML

Amir Ar Razzaaq

(2)

Tentang HTML

• HTML : HyperText Markup Language adalah bahasa

yang digunakan untuk membuat sebuah halaman web,

menampilkan berbagai informasi di dalam sebuah

penjelajahan web Internet dan formating hypertext

sederhana yang ditulis kedalam berkas format ASCII agar

dapat menghasilkan tampilan wujud yang terintegerasi.

• Kegunaan

Mengintegerasikan gambar dengan tulisan.

Mengintegerasikan berkas suara dan rekaman gambar

hidup.

(3)

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

(4)

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

(5)

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>

(6)

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

(7)

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.

(8)

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>

(9)

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

(x

₁

+ x

₂

)

2 = x

₁

2 + x

₂

2 + 2x

₁

x

₂

2H

₂

+ O

₂

= 2 H

₂

O

(10)

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>

(11)

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)

(12)

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

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

(13)

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

<font color="#800000">Maroon</font><br />

<font color="#008000">Green</font><br />

<font color="#FFFF00">Yellow</font><br />

<font color="#FF00FF">Fuchsia</font><br />

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

(14)

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

(15)

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.

(16)

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"

/

>

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.

(17)

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>

(18)

Tag Tabel (

Table

) - layout

Untuk menata letak

(layout)

isi dokumen

<td>Header kiri</td>

<td align="center" width="50%">Header tengah</td> <td align="right">Header kanan</td>

</tr> <tr>

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

(19)

Desain/Layout Halaman

Navigasi Logo Navigasi Navigasi Navigasi Logo Navigasi

(20)

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>

(21)

(22)

frame & frameset

• Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan

• Setiap dokumen ditampilkan dalam sebuah

frame

• Sebuah

frameset

menentukan tata letak, ukuran, dan banyaknya

frame

yang akan

ditampilkan

• Di dalam

frameset

boleh ada

frameset

lain (beranak)

• Dibutuhkan satu dokumen tersendiri yang berisi definisi

frameset

. Dokumen tersebut

tidak mempunyai isi dokumen (tidak ada <body> </body>)

• Skema dasar dokumen

frameset

:

<html> <head> <title>Judul dokumen</title> </head> <frameset> <frame src="namafile1"> <frame src="namafile2"> ...dst (atau frameset yang lain) <noframes>

bagian ini ditampilkan jika browser tidak mendukung frame </noframes>

</frameset> </html>

(23)

<title>Document Frameset</title> </head>

</frameset>

Ada 4 halaman : <ol>

<li><a href="page1.html">Halaman 1</a></li> <li><a href="page2.html">Halaman 2</a></li> <li><a href="page3.html">Halaman 3</a></li> <li><a href="page4.html">Halaman 4</a></li> </ol>

</noframes> </frameset> </html>

(24)

iframe (inline frame)

• Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen

lain (anak)

• Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah

iframe

• Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen

• Skema dasar dokumen dengan

iframe

:

<html> <head> <title>Judul dokumen</title> </head> <body> …isi dokumen… <iframe src="namafile">

bagian ini ditampilkan jika browser tidak mendukung frame </iframe>

…isi dokumen… </body>

(25)

Contoh

inline frame

<html> <head> <title>Kisah Sekolah</title> </head> <body> <h1>Kisah-kisah di sekolah</h1>

Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku sampai saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu. Inilah

sebagian kisah-kisahku di sekolah.<p>

<a href="sd.html">Kisah SD</a>

</iframe>

<a href="smp.html">Kisah SMP</a>

</iframe>

<a href="smu.html">Kisah SMU</a>

</iframe>

<p>Semua pengalaman dan teman-teman yang kudapat sungguh sangat mewarnai hidupku dan memberikan pengaruh besar terhadap diriku.

</body> </html>

(26)

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

:

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 :

<label for="nama">Ketikkan nama Anda:</label><br> <input type="text" name="nama" id="nama"><br> <input type="submit" value="Kirim">

(27)

Karakteristik data input

• Teks satu baris (single-line text)

• Teks banyak baris (multi-line text)

• Teks rahasia (password)

• Pilihan tunggal (single selection)

• Pilihan majemuk (multiple selections)

• Centang (on/off)

• Data bawaan/tersembunyi (hidden)

• File

• Koordinat 2D dalam sebuah bidang gambar

• Aksi user melalui penekanan tombol

(28)

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

(29)

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

(30)

Contoh form (1)

Silahkan isi data Anda

<td><label for="nama">Nama lengkap:</label></td>

<tr>

<td><label for="pass">Password:</label></td>

<tr>

<td><label for="jenkel">Jenis kelamin:</label></td>

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

(31)

Contoh form (2)

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

<button type="submit">Kirim <img src="smiley.gif"></button> <button type="reset">Reset <img src="tanya.gif"></button> </form>

(32)

Contoh form (3)

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

</table>

(33)

Link pada bidang gambar

• Link dapat didefinisikan pada satu atau beberapa area pada sebuah bidang gambar

• Skema :

<img src="gambar" usemap="#peta"> <map name="peta">

<area shape="bentuk1" coords="koordinat1" href="url1" alt="teks1"> <area shape="bentuk2" coords="koordinat2" href="url2" alt="teks2"> ...

</map>

src : nama file gambar

usemap : nama definisi peta yang digunakan shape : default, rect, circle, poly

coords : koordinat, dengan format : default : x1,y1,x2,y2 rect : x1,y1,x2,y2 circle : x,y,r

poly : x1,y1,x2,y2,x3,y3,…,xn,yn href : URL yang dituju bila area di-klik

(34)

Contoh penggunaan map

Klik pada wajah untuk melihat biodata<br>

<area shape="circle" coords="131,82,37" href="titi.html" alt="Titi Kamal"> <area shape="rect" coords="172,52,238,129" href="adinia.html" alt="Adinia"> <area shape="poly"

coords="300,85,311,103,308,137,306,172,295,198,219,259,224,239,210,224,213,161,248,127,273,86,273,86" href="dian.html" alt="Dian Sastro">

(35)

Pengelompokan elemen dokumen

• Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen

• Pengelompokkan ada dua jenis :

– inline (alur, flow) : <span> </span> – block (blok) : <div> </div>

• <span> dan <div> biasanya digunakan dengan parameter id dan class • Struktur lojik ini dapat digunakan untuk :

– mempermudah menginterpretasi isi dokumen

– memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS

• Contoh :

<span class="nama">Adrian Marzuki</span><br>

<span class="alamat">Jl. Tubagus Ismail XI/5</span> </div>

<span class="nama">Dewi Purnama</span><br>

<span class="alamat">Jl. Cisitu Lama 24</span> </div>

.mhs {border: black solid 1; margin-bottom: 10; padding: 10} .nama {font: bold 20 Arial}

.alamat {font-style: italic} </style>

<span class="nama">Adrian Marzuki</span><br> ...