Membuat Website dengan menggunakan HTML

(1)

Membuat Website dengan menggunakan HTML

A. Pengenalan HTML

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word.

(Untuk praktikum ini akan menggunakan Notepad)

B. Pengenalan kode HTML <HTML>

</HTML>

Masing-masing baris diatas disebut tag. Tag adalah kode yang digunakan untuk me-mark up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.

Tag memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu diketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML, bahkan bisa berakibat dokumen HTML tidak bisa ditampilkan dalam browser.

Format dokumen HTML: <html>

<!– untuk menyatakan suatu dokumen HTML --> <head>

<!-- memberikan informasi mengenai dokumen HTML >

<!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META > </head>

<body>

<!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML >

</body> </html>

1. Penggunaan komentar Format: <! -- >

Fungsi:

 Memberi nama aplikasi

(2)

 Memberi nama pengarang  Memberi tanggal pembuatan  Memberi nomer versi

 Memberi informasi hak cipta

2. Tag body

Format: <BODY></BODY>

Pada bagian ini dapat berisikan perintah-perintah untuk menampilkan text, gambar, suara dan lain-lain.

Script: <html> <head>

<title>judul yang ditampilkan pada title bar web browser</title> </head>

<body>

pada bagian ini dapat berisikan perintah-perintah untuk menampilkan : Text, gambar, suara dan lain-lain.

</body> </html>

Tulis program sederhana diatas menggunakan notepad dan simpanlah dengan meng-klik menu File lalu Save As. Pada kotak dialog yang muncul, terlebih dahulu klik anak panah kecil di ujung kanan kotak Save as type kemudian pilih All Files (*.*). Setelah itu, isilah kotak File name dengan nama file misalnya: coba1.htm. Jangan lupa penambahan ekstensi .htm dibelakang nama file. Klik tombol Save maka file akan tersimpan sebagai dokumen web.

Tutuplah program notepad dan bukalah browser (InternetExplorer). Klik menu File lalu Open. Pada kotak dialog yang muncul, klik tombol Browse. Cari dan pilih file coba1.htm lalu klik Open.

Hasil:

3. Tag Heading

Untuk judul atau sub judul dalam dokumen HTML Format: <h1 [align=”left”|”center”|”right”]> . . . </h1>

<h2 [align=”left”|”center”|”right”]> . . . </h2> ..

(3)

Script: <html>

<head>

<title> Heading </title> </head>

<body>

<h1 align="center">Heading 1: HTML</h1> <h2 align="center">Heading 2: HTML</h2> <h3 align="center">Heading 3: HTML</h3> <h4 align="center">Heading 4: HTML</h4> <h5 align="center">Heading 5: HTML</h5> <h6 align="center">Heading 6: HTML</h6> </body>

</html>

4. Tag Paragraf

Paragraf yang dapat diatur perataannya (kiri, tengah, kanan): Format: <p [align=”left”|”center”|”right”]> . . . </p>

Script: <html>

<head>

<title> Paragraf </title> </head>

<body>

<h2 align="center">Materi HTML</h2>

<p align="right">Kami sedang mulai belajar HTML </p>

<p align="left">Saat ini membahas materi Dasar-dasar HTML </p> </body>

(4)

5. Tag Memformat Dokumen Script:

<title> Format Dokumen </title> </head>

<body>

<p>Contoh <b>Teks Bold</b></p> <p>Contoh <i>Teks Italic</i></p>

<p>Contoh <sup>Teks superscripted</sup></p> <p>Contoh <sub>Teks subscripted</sub></p> <p>Contoh <del>Teks struckthrough</del></p> <p>Contoh <code>Teks Computer Code</code></p> </body>

(5)

6. Tag Pre-Format

Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML. Format: <pre> . . . </pre>

Script: <html>

<head>

<title>Pre-Format</title> </head>

Saya sedang Bel ajar HTML

Untuk mem buat aplikasi berbasis web

</pre> </body> </html>

7. Tag Break

Untuk menulis teks pada baris berikutnya: Format: <br>

Script: <html>

<head>

<title>Mengganti Baris</title> </head>

<body>

Ika Novita Dewi<br/>

Fakultas Ilmu Komputer<br/> Universitas Dian Nuswantoro<br/> </body>

(6)

8. Tag Garis Pemisah Horisontal

Garis horisontal untuk memisahkan teks dengan teks lain.

Format: <hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]> </hr>

Script: <html>

<head>

<title>Membuat Garis Horisontal</title> </head>

<body>

Berikut ini penggunaan satu garis horisontal: <hr/> dan penggunaan dua garis horisontal: <hr/> <hr /> </body>

</html>

9. Tag Font

Ukuran font: <font size=“n”> . . . </font>

Jenis font: <font size=“n” face=“jenis_font”> . . . </font>

Warna font <font size=“n” face=“jenis_font” color=“warna”> . . . </font> Script:

<title>Memformat Font</title> </head>

<body>

<font size=5 color="#FF00FF"> Teks berwarna hexcolor #FF00FF </font><br/>

<font color="red">Teks berwarna merah</font>

(7)

10.Tag Warna Background Menggunakan warna

<body bgcolor=#nnnnnn> . . . </body> Script:

<title> Penggunaan Latar Belakang Warna </title> </head>

Kami sedang mulai belajar HTML

</body> </html>

Beberapa kode warna dalam HTML:

Kode Warna Kode Warna

#FOF8FF Aliceblue #FFEBCD Blanchedalmond

#FAEBD7 Antiquewhite #0000FF Blue

#00FFFF Aqua #8A2BE2 Blueviolet

#7FFFD4 Aquamarine #A52A2A Brown

#F0FFFF Azure #DEB887 Burlywood

#F5F5DC Beige #5F9EAD Cadetblue

#FFE4C4 Bisque #7FFF00 Chartreuse

#000000 Black #D2691E Chocolate

#FF7F50 Coral #B8860B Darkgoldenrod

#64950 Cornflowerblue #A9A9A9 Darkgray

#FFF8DC Cornsilk #006400 Darkgreen

#DC143C Crimson #8B008B Darkmagenta

#00FFFF Cyan #BDB76B Darkkhaki

#00008B Darkblue #556B2FD arkolivegreen

#008B8B Darkcyan #FF8C00 Darkorange

#9932CC Darkorchid #B22222 Firebrick

#8B0000 Darkred #FFFAF0 Floralwhite

#E9967A Darksalmon #228B22 Forestgreen

#8FBC8B Darkseagreen #FF00FF Fuchsia

#483D8B Darkslateblue #DCDCDC Gainsboro #2F4F4F Darkslategray #F8F8FF Ghostwhite

#00CED1 Darkturquoise #FFD700 Gold

(8)

#FF1493 Deeppink #808080 Gray

#00BFFF Deepskyblue #008000 Green

#696969 Dimgray #ADFF2F Greenyellow

#1E90FF Dodgerblue #F0FFF0 Honeydew

#FF69B4 Hotpink #ADE8E6 Lightblue

#CD5C5C Indianred #F08080 Lightcoral

#4B0082 Indigo #E0FFFF Lightcyan

#FFFFF0 Ivory #FAFAD2 Lightgoldenrodyellow

#F0E68C Khaki #90EE90 Lightgreen

#E6E6FA Lavender #D3D3D3 Lightgray

#FFF0F5 Lavenderblush #FFB6C1 Lightpink

#7CFC00 Lawngreen #FFA072 Lightsalmon

#FFFACD Lemonchiffon #20B2AA Lightseagreen

#87CEFA Lightskyblue #FF00FF Magenta

#778899 Lightslategray #800000 Maroon

#B0C4DE Lightsteelblue #66CDAA Mediumaquamarine

#FFFFE0 Lightyellow #0000CD Mediumblue

#00FF00 Lime #BA55D3 Mediumorchid

#32CD32 Limegreen #9370DB Mediumpurple

#FAF0E6 Linen #3CB371 Mediumseagreen

#7B68EE Mediumslateblue #00FA9A Mediumspringgreen #48D1CC Mediumturquoise #000080 Navy

#C71585 Mediumvioletred #EEE8AA Palegoldenrod #191970 Midnightblue #98FB98 Palgreen

#F5FFFA Mintcream #AFEEEE Paleturquoise

#FFE4E1 Mistyrose #DB7093 Palevioletred

#FFE4E1 Moccasin #FFEFD5 Papayawhip

#FFDEAD Navajowhite #FFDAB9 Peachpuff

#FDF5E6 Oldlace #CD853F Peru

#808000 Olive #FFC0CB Pink

#6B8E23 Olivedrab #DDA0DD Plum

#FFA500 Orange #B0E0E6 Powderblue

#FF100%0 Orangered #800080 Purple

#DA70D6 Orchid #FF0000 Red

#BC8F8F Rosybrown #4169E1 Royalblue

#8B4513 Saddlebrown #D2B48C Tan

#FA8072 Salmon #008080 Teal

#F4A460 Sandybrown #D8BFD8 Thistle

#2E8B57 Seagreen #FF6347 Tomato

#FFF5EE Seashell #40E0D0 Turquoise

#A0522D Sienna #EE82EE Violet

#C0C0C0 Silver #F5DEB3 Wheat

#87CEEB Skyblue #FFFFFF White

#708090 Slategray #F5F5F5 Whitesmoke

#FFFAFA Snow #FFFF00 Yellow

#00FF7F Springgreen #9ACD32 Yellowgreen

(9)

11.Tag memuat gambar

Memuat gambar ke dalam halaman Web

Format: <img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />

Relative Path:

 File gambar ada dalam direktori yg sama: ./  File gambar ada dalam direktori sebelumnya: ../ Script:

<title> Insert Gambar</title> </head>

<body>

<img src="./lampu.jpg"></br> <b> Gambar Lampu </b> </body>

</html>

12.Menggunakan gambar untuk background

Format: <body background=“nama_file_gambar”> . . . </body> Script:

<title> Penggunaan Latar Belakang Gambar </title> </head>

<body

background="./lampu.jpg"> <p><h2

align="center">Kami sedang mulai belajar HTML</h2></p> </body>

(10)

13.Tag Hyperlink

Format: <a href=”address” > . . . </a>  Link ke dokumen lain

<a href=”nama_dokumen” > . . . </a>

 Link ke bagian tertentu dalam dokumen yang sama <a href=”#target” > . . . </a>

<a href=”target” > . . . </a>  Link ke alamat URL atau WebSite

<a href=”alamat_URL” > . . . </a>  Link ke alamat Email

<a href=”mailto:alamat_email” > . . . </a>  Link File yang akan didownload

<a href=”nama_file” > . . . </a>

Script: <html>

<head>

<title>Membuat link</title> <head>

<body>

<p>Silahkan download <i>handout</i>

perkuliahan di <A href="http://ikadewi.blogspot.com"> blog </A></p> </body>

(11)

14.Tag List

 <ul> - unordered list (daftar tdk bernomor); bullet

<ul [type=“disc”|”square”|”circle”] > . . . </ul>  <ol> - ordered list; nomor

<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>  <dl> - definition list; dictionary

<dl> . . . </dl> <dt> . . . </dt> <dd> . . . [</dd>] Script:

<title>Penggunaan List</title> </head>

<body>

<h4>Istilah-istilah dalam HTML:</h4> <ol>

<li><i>Tag</i></li> <li><i>Element</i></li> <li><i>Attribute</i></li> </ol>

<h4>Contoh <i>tag</i>:</h4> <ul type="square">

<li><i>Tag heading</i></li> <li><i>Tag list</i></li> </ul>

(12)

15.Tabel Fungsi:

 Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca  Mengatur tampilan homepage agar lebih menarik

 Tag yang diperlukan: <table>  Atribut-atribut:

Atribut Fungsi

Border Menentukan ukuran border/garis tabel Width Menentukan lebar tabel

Height Menentukan tinggi tabel Bgcolor Menentukan background tabel

Background Menentukan gambar yang digunakan untuk background tabel Color Mengatur warna satu sel dalam tabel

Align Mengatur bentuk perataan horizontal valign Mengatur bentuk perataan vertikal Rowspan Menggabungkan beberapa baris Colspan Menggabungkan beberapa kolom Cellspacing Mengatur spasi antar sel

Cellpadding Mengatur spasi dalam sel

Tag yang diperlukan:

 Membuat baris: <tr> (table row)

 Membuat kolom: <td> (table data)

Script: <html>

<head>

<title> Tabel </title> </head>

<body>

<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr> <tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr> </table>

</body> </html>

a. Menambahkan judul tabel  Judul tabel: <caption>

(13)

Contoh: <html> <head>

<title>Judul tabel</title> </head>

<body>

<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NIM</th><th>Nama</th></tr>

b. Mengatur tinggi dan lebar tabel Atribut: width dan height

Nilai:

<title>Tinggi dan lebar tabel</title> </head>

<body>

<b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th>

<td width=“80” height=“50“>A12.2012.00001</td> <td width=“180” height=“50”>Kiara</td></tr> <tr><td width=“20”>2.</td>

<td width=“80” height=“70”>A12.2012.00002</td> <td width=“180” height=“70”>Bintari</td></tr> </table>

(14)

</html>

c. Perataan dalam tabel

 horisontal: atribut align -> utk <caption>, <tr>, <td> dan <th>  vertikal: atribut valign -> utk <tr>, <td> dan <th>

Script: <html>

<head>

<title>Perataan dalam Tabel</title> </head>

<body>

<b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NIM</th><th>Nama</th></tr> <tr><td align="center" width="20">1.</td>

<td align="center" valign="middle"

width="80" height="50">A12.2012.00001</td> <td align="right" valign="top"

width="180" height="50">Kiara</td></tr> <tr><td width="20">2.</td>

<td align="left" valign="top"

width="80" height="70">A12.2012.00001</td> <td align="left" valign="bottom"

width="180" height="70">Bintari</td></tr> </table>

(15)

d. Membuat warna dalam tabel  Atribut: bgcolor

Script: <html>

<head>

<title>Warna dalam tabel</title> </head>

<b> Tabel Daftar Mahasiswa </b> </caption> <tr bgcolor="yellow">

<th>No</th><th>NPM</th><th>Nama</th></tr> <tr bgcolor="cyan"><td align="center"

width="20">1.</td>

<td align="left" valign="middle“

width="80" height="40">A12.2012.00001</td> <td align="left" valign="middle“

width="180" height="40">Kiara</td></tr> <tr><td bgcolor="blue" width="20">2.</td> <td bgcolor="red" align="left" valign="middle" width="80" height="40">A12.2012.00002</td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">Bintari</td></tr> </table>

</body>

</html>

e. Penggabungan Baris dan kolom

 Menggabungkan bbrp kolom menjadi 1: atribut colspan  Menggabungkan bbrp baris menjadi 1: atribut rowspan

Script: <html>

(16)

<title> Penggabungan baris dan kolom

</title>

</head> <body>

<table border="1" bgcolor="white" align="center“

cellpadding="10" cellspacing="12"> <caption align="top">

<b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">No</th>

<th colspan="2">Nilai</th> </tr>

<td align="left" valign="middle" width="80"

height="40">A12.2006.00001</td>

height="40">Kiara</td>

<td align="center" valign="middle">70</td> <td

align="center" valign="middle">80</td> </tr>

height="40">A12.2006.00002</td>

height="40">Bintari</td>

<td align="center" valign="middle">70</td> <td

align="center" valign="middle">80</td> </tr>

(17)

Latihan

1. Dengan menggunakan kode-kode HTML, buat tampilan di browser seperti contoh berikut ini:

Kalau Anda ingin cepat pintar

Belajarlah dengan tekun serta perbanyaklah latihan. Belajarlah dengan tekun serta perbanyaklah latihan. Belajarlah dengan tekun serta perbanyaklah latihan. Belajarlah dengan

tekun serta perbanyaklah latihan. Belajarlah dengan tekun serta perbanyaklah latihan. Belajarlah dengan tekun serta perbanyaklah latihan.

************************************************************************** Aku sedang berlatih membuat garis seperti terlihat dibawah ini

**************************************************************************

ini adalah ukuran heading paling besar

DAN

ini ukuran heading paling kecil

************************************************************************** Alamat saya:

Jl. Perdamaian 1 No. 212 Green Valley 54321

2. Dengan perintah list item dan table dalam HTML, buatlah perintah-perintah HTML-nya secara lengkap agar dalam browserdiperoleh tampilan seperti berikut:

KELAS XI

 Depan Kelas XI terdiri dari: Berita:

 Buku Tamu 1. XI IPA a. Berita 1

 Arsip 2. XI IPS b. Berita 2

 Peta Situs 3. XI BHS c. Berita 3

(18)

Beranda Tentang Kami

Hubungi Kami PILIHAN KEBERANGKATAN

Semarang (SRG) ke Jakarta (CKG) – 31 Des 2012

Penerbangan Berangkat Tiba Promo Ekonomi Bisnis

SJ 221 06:20

Semarang (SRG)

07:15

Jakarta (CGK) 280.000 420.000 HABIS

SJ 225 11:30

Semarang (SRG)

12:30

Jakarta (CGK) 310.000 420.000 HABIS

SJ 223 18:25

Semarang (SRG)

19:25

Jakarta (CGK) 280.000 420.000 HABIS  Jadwal penerbangan ditampilkan pada waktu lokal

 Harga tertera diatas berdasarkan satu penumpang dewas

PILIHAN PENERBANGAN KEMBALI

Jakarta (CKG) ke Semarang (SRG) – 6 Jan 2012

Penerbangan Berangkat Tiba Promo Ekonomi Bisnis

SJ 224 08:05

Jakarta (CGK)

07:15

Semarang (SRG) 280.000 420.000 HABIS

SJ 222 13:15

Jakarta (CGK)

12:30

Semarang (SRG) 310.000 420.000 HABIS

SJ 220 19:15

Jakarta (CGK)

19:25

Semarang (SRG) 280.000 420.000 HABIS  Jadwal penerbangan ditampilkan pada waktu lokal

 Harga tertera diatas berdasarkan satu penumpang dewas

Pilih Metode Pembayaran ATM

Internet Banking

Credit Card

Untuk pembayaran menggunakan kartu kredit :

1. Mohon mengisi nomer telepon dan email dengan benar. 2. Tim Verifikasi akan menghubungi anda untuk verifikasi. 3. _{Minimal penerbangan 24 Jam sebelum jadwal keberangkatan.}