Membuat Website dengan menggunakan HTML -...
Transcript of Membuat Website dengan menggunakan HTML -...
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>
<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>
</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">
<caption align="top">
<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">
<caption align="top">
<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>
<td align="left" valign="middle" width="180"
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>
<td align="left" valign="middle" width="80"
height="40">A12.2006.00002</td>
<td align="left" valign="middle" width="180"
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