HIPER TEXT MARKUP LANGUAGE

(1)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 1

HIPER TEXT MARKUP LANGUAGE

(HTML)

1. PENGERTIAN HTML

Bicara mengenai HTML, kita juga harus bicara mengenal HTTP (hypertext transfer protokol). HTTP adalah protokol yang digunakan untuk mentransfer dokumen antara web server ke browser.

HTML sebenarnya adalah file text ASCI, yang terdiri dari dua hal penting yaitu pertama adalah isi dan kedua adalah tag.

Isi adalah pesan-pesan atau tulisan yang akan kita tampilkan.

Tag adalah kumpulan beberapa karakter yang diawali dengan simbol lebih-kecil (<) dan di akhir dengan simbol lebih-besar (>). Sebagai contoh adalah <HTML>; dan yang lain misalnya <TITLE>.

2. APLIKASI UNTUK MEMBANGUN HTML

Pada Dasarnya kita dapat membuat situs menggunakan HTML dengan 2 cara

:

1.

"NotePad" yang secara default bisa kita temukan dalam kelompok 'accessories'-nya Windows.

2.

Menggunakan Software Bantu misalnya : Microsoft FontPage,

Macromedia Dreamwever, Adobe GoLive. Kelebihannya tanpa kita menghapal tag-tag kita dapat menghasilkan file-file HTML (web page), tapi bukan sekedar itu saja, banyak fitur yang dikemas kedalam aplikasi-aplikasi tersebut. Salah satu fitur tersebut misalnya fasilitas upload file ke server.

3. STRUKTUR DOKUMEN HTML Struktur Dasar

Berikut ini adalah struktur dasar dari sebuah dokumen HTML. <html> <head> ... isi head </head> <body> ... isi body </body> </html>

(2)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 2

Sebagai catatan, tag-tag HTML tidak case sensitif, jadi penulisan tag <body> ... </body> akan sama hasilnya dengan <BODY> ... <BODY>.

Sebuah dokumen HTML terbagi dalam 2 bagian utama yaitu bagian-head dan bagian-body. Setiap masing-masing bagian mempunyai tag tersendiri, head menggunakan tag <head> ... </head> dan bagian-body menggunakan tag <bagian-body> ... </bagian-body>.

Bagian-head berisi element yang bisanya berupa "prolog" untuk keseluruhan dokumen tersebut. Informasi semacam judul, nama penulis, versi, revisi dan informasi awal lainnya diletakan di bagian-head ini.

Bagian kedua, yaitu body yang di apit dengan tag <body> ... </body> berisi bagian utama dari dokumen HTML, seperti text atau tulisan, gambar, kontrol. Jadi apapun yang kita buat dan ciptakan di sebuah halaman web, harus diletakkan di antara tag <body> dan </body>.

4. TAG-TAG DASAR DALAM HTML

Yang dimaksudkan tag dasar disini adalah tag-tag yang umum di gunakan, bahkan untuk suatu lembar halaman HTML yang paling sederhana.

Title

berfungsi untuk memberikan judul bagi halaman web tersebut. Perlu diingat, judul tidak sama dengan nama file.

Biasanya, judul akan di tampilkan pada title bar sebuah browser. Tag yang digunakan untuk menampilkan judul adalah

<title> ... </title>. listing_01.html <html> <head> <title>Belajar HTML</title> </head> <body> ... isi body </body> </html>

Note : Tag <title> dan </title> selalu di letakan pada bagian-head.

Komentar

Komentar adalah bagian yang tidak ditampilkan pada browser. Pada HTML,

komentar diawali dan diakhiri dengan dua karakter dash (--) dan harus

diletakan antara tag pembuka (<!) dan tag penutup (>),

Untuk lebih lebih jelas mengenai komentar ini, kita bisa lihat listing dibawah ini :

(3)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 3

listing_02.html

<html> <head>

<title>Belajar HTML yuk..? </title> </head>

<body>

 Hallo, apa khabar ...?

</body> </html>

Note : Alternatif lain, jika kita ingin membuat komentar multi-line maka bisa digunakan tag <comment> ... </comment>.

Headings

Ada 6 (enam) level heading yang terdapat pada HTML. Heading biasanya digunakan untuk menandai bagian atau section di dalam dokumen, seperti Judul MODUL atau bagian tertentu yang di anggap sebagai suatu topic. listing_03.html <html> <head> <title>Belajar HTML yuk..?</title> </head> <body>

<H1>Ini adalah Heading level H1</H1> <H2>Ini adalah Heading level H2</H2> <H3>Ini adalah Heading level H3</H3> <H4>Ini adalah Heading level H4</H4> <H5>Ini adalah Heading level H5</H5> <H6>Ini adalah Heading level H6</H6> </body>

</html>

Jika di jalankan maka pada browser akan terlihat seperti berikut

(4)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 4

Selain itu kita bisa menggunakan atribut 'align' pada tag heading ini, yang

gunanya adalah untuk pengaturan justifikasi (perataan). Nilai yang valid

untuk atribut 'align' ini adalah left, center, right atau justify.

listing_04.html

<html> <head> <title>Belajar HTML</title> </head> <body>

<H2 align="left">Ini Heading yang perataan kiri</H2><br> <H3 align="right">Ini Heading yang perataan kanan</H3><br>

<H4 align="justify">Rata kiri-kanan, ber-efek pd text yg panjang</H4><br> <H5 align="center">Ini Heading yang rata tengah</H5>

</body>

</html>

Jika di jalankan maka pada browser akan terlihat seperti berikut :

Line Break

Kalo kita perhatian pada listing_04.html maka akan terlihat tag <br>. Tag ini berguna untuk membuat baris baru, tapi masih dalam lingkup paragrap yang sama.

Tag <br> ini, merupakan tag yang tidak berpasangan.

Paragaraph

Tag <p> umumnya dipakai untuk menandai suatu paragraf baru. Namun pemakaian tag <p> terutama digunakan untuk membuat group paragraf dengan formating style tertentu.

(5)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 5

Tag <p> ini memiliki Atribut 'align', yaitu untuk perataan kelompok teks dalam suatu paragrap. Atribut 'align' ini bisa di isi dengan nilai left, center, right atau justify.

Background/Warna Latar

Tag <body> mendapatkan attribute BGCOLOR yang menentukan warna latar belakang dokumen. Warna juga bias dituliskan dengan bilangan Hexadecimal misal(#FFFFFFatau ##000000) atau nama secara langsung (“blue”,”yellow”). listing_05.html <html> <head> <title>Belajar HTML yuk..?</title> </head> <body bgcolor=”yellow”> <p align="center"> halaman web statis <p align="justify">

Halo ! ini adalah rumah kecil saya di Internet. Saya membuatnya sendiri…

Supaya orang tahu tentang saya Supaya mendapat banyak teman Supaya mendapat tempat di Internet <p align="left">

Tulisan ini akan saya pake berulang-ulang ketika belajar HTML Untuk menghemat waktu, jadi tinggal dipaste

</body>

</html>

Jika di jalankan maka pada browser akan terlihat seperti berikut :

5. BERURUSAN DENGAN FONT Tag <font> ... </font>

Font atau biasa juga di sebut 'huruf' memegang peran penting dalam suatu design grafis, termasuk juga didalamnya adalah design web.

Bagus tidaknya suatu halaman web juga sangat ditentukan oleh pengaturan font ini. Untuk mengatur huruf pada HTML kita dapat menggunakan pasangan tag <font> dan tag penutupnya </font>. Yang mana mempunyai 3 buah atribut yaitu face, size dan color. Detailnya bisa kita lihat di bawah ini.

Atribut face, pilih jenis font

Jenis font itu misalnya Arial, Helvetica, Time New Roman, Verdana, Comic Sans MS, Tahoma dan lain sebagainya. Cara penulisan tag-nya adalah <font face="nama_font"> ... </font>. Atau bisa juga ditulis <font face="nama_font_1, nama_font_2, nama_font_3"> ... </font>.

Contoh pengaturan jenis font, bisa ditulis seperti ini ; <font face="Verdana, Tahoma, Arial"> ... </font>

(6)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 6

Yang perlu diperhatikan, font atau hurup yang kita pilih saat proses design harus ada juga pada komputer client (orang yang membaca halaman web kita).

Jika font pilihan pertama tidak ada, maka komputer selanjutnya akan mencari font kedua, jika ketiga font tersebut tidak ada pada komputer client maka selanjunya akan ditampilkan font default.

Atribut size, tentukan ukuran font

Atribut untuk ukuran font bernilai terkecil 1 (ukuran terkecil) sampai dengan yang terbesar yaitu 7, tergantung kepada <basefont>.

Contoh pengaturan ukuran font, bisa ditulis seperti ini ; <font size="2"> ... </font>

Atribut color, pilih warna font

Untuk pengaturan warna font (tulisan / hurup), maka cara penulisan tag-nya adalah sebagai berikut <font color="kode_warna/nama_warna">.

Untuk pengaturan warna bisa kita tulis <font color="#RRGGBB"> ... </font>, dimana color=#RRGGBB, adalah kombinasi warna dalam format RGB, yang ditulis dalam bilangan hexadesimal yang menunjukan kombinasi warna merah (RR), hijau (GG), dan biru (BB).

Sebagai contoh nilai "#FFFFFF" adalah warna putih, #000000 adalah warna hitam, #0000FF adalah biru, #FF0000 adalah merah, dan seterusnya.

Alternatif lain untuk pengaturan warna font, atribut color ini bisa juga di-isi dengan nilai konstanta yang sudah terdefendi-isi. Untuk lengkapnya, simak daftar untuk pengaturan nilai warna font.

black white green maroon olive navy purple gray yellow lime aqua fuchsia silver red blue teal Contoh pengaturan warna font, bisa ditulis seperti ini ; <font color="#FF0000"> ... </font>

atau

(7)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 7

Tag untuk pengaturan Sytle

Tag yang di gunakan Hasil yang di tampilkan <b> ... </b> Tebalkan hurup / bold <i> ... </i> Membuat hurup miring / italic <u> ... </u> Menggaris bawahi text <strike> ... </strike> Mencoret text

<sup> ... </sup> Text Normal Text superscript <sub> ... </sub>

Text Normal

Text subscript

Akan menampilkan ukuran huruf yang lebih besar

Akan menampilkan ukuran huruf yang lebih kecil

Tag untuk pengaturan Garis Horisontal

Tag <HR> digunakan untuk membuat garis horizontal, sekaligus membuat baris baru. Tag ini memiliki beberapa atribut seperti :

Attribute Fungsi

ALIGN Posisi garis Horisontal, nilainya adalah

LEFT, RIGHT, CENTER

WIDTH Lebar dari garis Horisontal

SIZE Tebal dari garis Horisontal

NOSHADE Menonaktifkan efek tiga dimensi

COLOR Menentukan warna garis Horisontal

listing_06.html <html> <head> <title>Belajar HTML yuk..?</title> </head> <body>

<h3><center>halaman web statis</center></h3>

<p> <b>Halo !</b> saya siswa Sedes Bedono, dan ini adalah <i>rumah kecil</i> saya di Internet. </p>

<p><u>Saya membuatnya sendiri…</u></p>

<br><strike>Supaya orang tahu tentang saya</strike> <br><sup>Supaya mendapat banyak teman</sup>

<br><sub>Supaya mendapat nilai tambah dari guru</sub>

<br><big>Supaya mendapat tempat di Internet</big>

<br><small>Tulisan ini akan saya pake berulang-ulang ketika belajar HTML</small>

Untuk menghemat waktu, jadi tinggal dipaste. </font>

</body>

</html>

(8)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 8

6. TAG MEMBUAT DAFTAR TIDAK BERNOMOR DAN BERNOMOR

listing_07.html <html> <head> <title>Belajar HTML?</title> </head> <body> <p align="center"> halaman web statis

<p><br>Halo ! saya siswa Sedes Bedono, dan ini adalah rumah kecil saya di Internet.</p>

<br>Saya membuatnya sendiri… <ul>

<li>Supaya orang tahu tentang saya <li>Supaya mendapat banyak teman

<li>Supaya mendapat nilai tambah dari guru <li>Supaya mendapat tempat di Internet

<br>Tulisan ini akan saya pake berulang-ulang ketika belajar HTML <br>Untuk menghemat waktu, jadi tinggal copy paste

</ul> </body>

</html>

Note : Tag <UL>…..</UL> akan menampilkan daftar tak bernomor sedangkan Tag <OL>……</OL> akan menampilkan daftar bernomor. Tag <LI> diperlukan keduanya untuk mendefinisikan setiap daftar item.

7. TAG UNTUK MEMBUAT TABEL

(9)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono 9

menentukan bingkai table), WIDTH (untuk menetukan lebar table), HEIGHT

(untuk menentukan tinggi table)

- tag <TABLE>….</TABLE> digunakan untuk mendefinisikan sebuah table,

tag<TR>…</TR> untuk mendefinisikan baris table . dan Tag <TD> untuk

mendefinisikan isi tiap kolom. Tag tersebut harus dirangkai sedemikian rupa

sehingga membentuk sebuah table seperti contoh berikut :

listing_08.html

<html>

<head>

<title>

Belajar HTML yuk

.

.?

</title>

</head>

<body>

<table border=2>

<tr>

<td>

BARIS 1 KOLOM 1

</td>

<td>

BARIS 1 KOLOM 2

</td>

</tr>

<tr>

<td>

BARIS 2 KOLOM 1

</td>

<td>

BARIS 2 KOLOM 2

</td>

</tr>

</table>

</body>

</html>

Jika di jalankan maka pada browser akan terlihat seperti berikut :

8. MENYISIPKAN GAMBAR

Tag yang dipakai

<IMG SRC=”gambar.gif” WIDTH=130 HEIGHT=175

BORDER=2>

Yang artinya menambahkan gambar dengan file bernama gambar.gif,

memiliki lebar 130 pixel, tinggi 175 pixel dan border 2.

Note : agar gambar bisa tampil, haruslah dalam folder yang sama dengan

penyimpanan listing programnya.

(10)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono

10 Menampilkan Teks pengganti Gambar

Tag yang dipakai

<IMG SRC=”gambar.gif” WIDTH=130 HEIGHT=175

BORDER=2 ALT=”ini gambar“>

artinya atribut ALT digunakan untuk

menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan.

listing_09.html

<html>

<head>

<title>Belajar HTML yuk..? </title>

</head>

<body>

<center>Halaman web statis</center>

<img src="gambar.gif"Width=78 height=102 border=2 alt="gambarku">

<p>

Mencoba memasukkan gambar<p>

</body>

</html>

Note :

-

untuk memposisikan gambar dengan teks agar terlihat lebih manis,

coba tambahkan ALIGN=LEFT pada tag. Sehingga menjadi

<img

src=”gambar.gif” WIDTH=130 HEIGHT=175 BORDER=2

ALT=”gambarku“ALIGN=LEFT >

Yang artinya atribut ALIGN akan

memposisikan teks di sekitar gambar nilainya adalah TOP, MIDDLE,

BOTTOM, LEFT, RIGHT.

-

Penambahan atribut VSPACE untuk menentukan jarak antara gambar

dengan teks secara vertical dan atribut HSPACE untuk menentukan

jarak antara gambar dengan teks secara horisontal, sehingga membuat

design lebih tertata. Bentuk Script setelah ditambahkan, menjadi

<img

src=”gambar.gif” WIDTH=130 HEIGHT=175 BORDER=2

(11)

TIK XII |

Modul_HTML_SMA Sedes Sapientiae Bedono

11

9. MEMBUAT LINK