Membuat Website dengan menggunakan HTML - dinus.ac.iddinus.ac.id/repository/docs/ajar/Pengenalan_HTML.pdf · B. Pengenalan kode HTML Masing-masing baris

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

Mendeskripsikan tujuan pengkodean tertentu di dalam file

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>

..

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

Script:

<html>

<head>

<title> Heading </title>

</head>

<body>

<h1 align="center">Heading 1: HTML</h1>






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

</html>

5. Tag Memformat Dokumen

Script:

<html>

<head>

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

</html>

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>

<body>

<pre>

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>

</html>

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:

<html>

<head>

<title>Memformat Font</title>

</head>

<body>

<font size=5 color="#FF00FF">

Teks berwarna hexcolor #FF00FF

</font><br/>

<font color="red">Teks berwarna

merah</font>

</body>

</html>

10. Tag Warna Background

Menggunakan warna

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

Script:

<html>

<head>

<title> Penggunaan Latar

Belakang Warna </title>

</head>

<body bgcolor="pink">

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

#9400D3 Darkviolet #DAA520 Goldenrod

#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

#4682B4 Steelblue

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:

<html>

<head>

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

<html>

<head>

<title> Penggunaan Latar

Belakang Gambar </title>

</head>

<body

background="./lampu.jpg">

<p><h2

align="center">Kami

sedang mulai belajar

HTML</h2></p>

</body>

</html>

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>

</html>

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:

<html>

<head>

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

</body>

</html>

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>

<table border="1">

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

Judul baris/kolom: <th> (table header)

Contoh:

<html>

<head>

<title>Judul tabel</title>

</head>

<body>

<table border="1">

<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption>

<tr><th>No</th><th>NIM</th><th>Nama</th></tr>

<tr><td>1</td><td>A12.2012.00001</td><td>Kiara</td></tr>

<tr><td>2</td><td>A12.2012.00002</td><td>Bintari</td></tr>

</table>

</body>

</html>

b. Mengatur tinggi dan lebar tabel

Atribut: width dan height

Nilai:

ukuran % (max 100%)

ukuran pixel

Script:

<html>

<head>

<title>Tinggi dan lebar tabel</title>

</head>

<body>

<table border="1" width=“50%”>

<caption align="top">

<b> DAFTAR MAHASISWA </b> </caption>

<tr><th>No</th>

<th>NPM</th>

<th>Nama</th></tr>

<tr><td width=“20”>1.</td>

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

</body>

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

<table border="1" align="center">


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

</body>

</html>

d. Membuat warna dalam tabel

Atribut: bgcolor

Script:

<html>

<head>

<title>Warna dalam tabel</title>

</head>

<body bgcolor="purple">

<font size="3" face="arial" color="yellow">

<table border="2" bgcolor="white" align="center">

<caption align="bottom">

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

<head>

<title> Penggabungan baris dan kolom

</title>

</head>

<body>

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

cellpadding="10" cellspacing="12">


<b> Tabel Daftar Nilai Mahasiswa </b> </caption>

<tr bgcolor="gray"><th rowspan="2">No</th>

<th rowspan="2">NPM</th> <th rowspan="2">Nama</th>

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

</tr>

<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>

<tr><td align="center" width="20">1.</td>

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

<tr><td width="20">2.</td>


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>

</table>

</body>

</html>

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

Copyright @ kelas XI 2012

3. Dengan menggunakan kode-kode HTML, buat tampilan di browser seperti contoh berikut

ini:

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.

Lamp Air

Membuat Website dengan menggunakan HTML - dinus.ac.iddinus.ac.id/repository/docs/ajar/Pengenalan_HTML.pdf · B. Pengenalan kode HTML Masing-masing baris

Documents