kode-kode dalam html web
Membuat Desain Website Berbasis HTML Dengan Notepad
Pengenalan
Tag Pada HTML
Dalam HTML tag
merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita
inginkan. Tag pada HTML selalu diawali dengan <x> dan
ditutup dengan </x> dimana x adalah
perintah dari apa yang kita inginkan.
·
Daftar Tag Pada HTML
ELEMEN DASAR
|
||
Jenis Dokumen
|
<HTML></HTML>
|
(terdapat pada awal dan akhir dari
file HTML)
|
Judul
|
<TITLE></TITLE>
|
(harus selalu terdapat pada mukadimah)
|
Mukadimah (Header)
|
<HEAD></HEAD>
|
(keterangan umum, seperti judul
dsb.)
|
Batang Tubuh
|
<BODY></BODY>
|
(isi dari halaman HTML)
|
FORMAT
TAMPILAN
|
||
Huruf Tebal
|
<B></B>
|
(Bold)
|
Huruf Miring
|
<I></I>
|
(Italic)
|
Garis Bawah
|
<U></U>
|
(Underline - jarang digunakan)
|
Rata Tengah
|
<CENTER></CENTER>
|
(Center - berlaku untuk teks
maupun gambar)
|
Huruf Kedip
|
<BLINK></BLINK>
|
(Blinking - tag terlucu sampai
kini)
|
Ukuran Huruf
|
<FONT
SIZE=?></FONT>
|
(Font Size - boleh diisi dari 1
sampai 7)
|
Warna Huruf
|
<FONT
COLOR="#$$$$$$"></FONT>
|
|
Pilih Jenis Huruf
|
<FONT
FACE="***"></FONT>
|
|
PEMISAH
|
||
Paragraf
|
<P></P>
|
(tag penutup seringkali tak
diperlukan)
|
Align Text
|
<P
ALIGN=LEFT|CENTER|RIGHT></P>
|
|
Pndah Baris
|
<BR>
|
(pindah ke baris berikut)
|
Garis Datar
|
<HR>
|
(Horizontal Rule)
|
Penataan Letak Garis
|
<HR
ALIGN=LEFT|RIGHT|CENTER>
|
|
Tebal Garis
|
<HR SIZE=?>
|
(dalam satuan pixel)
|
Lebar Garis
|
<HR
WIDTH=?>
|
(dalam satuan pixel)
|
Lebar Garis Persentasi
|
<HR
WIDTH="%">
|
(dalam persentasi terhadap lebar
halaman)
|
LATAR BELAKANG
DAN WARNA
|
||
Latar Belakang Gambar
|
<BODY
BACKGROUND="URL">
|
(Tiled Background)
|
Warna Latar Belakang
|
<BODY
BGCOLOR="#$$$$$$"
|
(Background Color - urutan:
merah/hijau/biru)
|
Warna Huruf Teks
|
<BODY
TEXT="#$$$$$$">
|
|
TABEL
|
||
Rancangan Tabel
|
<TABLE></TABLE>
|
|
Garis Batas Tabel
|
<TABLE
BORDER=?></TABLE>
|
|
Lebar Tabel
|
<TABLE
WIDTH=?>
|
(dalam satuan pixel)
|
Lebar Tabel Persentasi
|
<TABLE
WIDTH="%">
|
(dalam satuan persen terhadap
lebar halaman)
|
Baris dalam Tabel
|
<TR></TR>
|
|
Penataan Letak Baris
|
<TR
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Sel dalam Tabel
|
<TD></TD>
|
(harus ada dalam setiap baris
tabel)
|
Penataan Letak Sel
|
<TD
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Kepala Tabel
|
<TH></TH>
|
(Table Header - seperti data
dengan Bold dan Center)
|
Penataan Letak Kepala Tabel
|
<TH
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Warna Kepala Tabel
|
<TH
BGCOLOR="#$$$$$$">
|
|
A.
Dasar dasar HTML
1.
Membuat
judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan
code dibawah ini:
<html>
<head>
<title> My First HTML Project
</title>
</head>
<body
BGCOLOR=“Green”
TEXT=“Red”>
WELCOME TO MY WEBSITE
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format
HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti
pada gambar 1 berikut:
Gambar
1. Judul Tab Halaman
2.
Mengatur
paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:
<html>
<head>
<title> Tag P, Br dan Hr </title>
</head>
<body>
<p>Ini adalah
paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga.
<br><br></p>
<p>Ini adalah paragraf kerdua, yang
berisi garis horizontal</p>
<hr> Ini adalah
garis horizontal.
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format
HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti
pada gambar 2 berikut:
Gambar
2. Mengatur Paragraf
3. Mengatur
ukuran huruf, buka notepad++, kemudian
ketikan code dibawah ini:
<html>
<head>
<title> Tag Heading
</title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format
HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti
pada gambar 3 berikut:
Gambar
3. Ukuran Huruf
4.
Mengatur
format texs, Buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>format
tulisan</titele>
</head>
<body>
teks normal <br>
<small> teks small
</small><br>
<big> teks
big</big><br>
<b> teks tebal
</b><br>
<i> teks miring
</i><br>
<u> teks bergaris bawah
</u><br>
Contoh superscript : x
<sup>2</sup><br>
Contoh subscript :
H<sub>2</sub>O<br>
<strike> Ini teks tercoret
</strike><br>
<font size = 5 face =
verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR
="#00FF00">
</html>
Langkah selanjutnya simpan dalam format
HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti
pada gambar 4 berikut:
Gambar
4. Format tulisan
5.
Membuat
from komentar, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input
type=text name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input
type=text name="email"></td>
</tr>
<tr>
<td
valign=top>Komentar</td>
<td
valign=top>:</td>
<td><textarea
name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td
colspan="3"><input type=submit name="submit"
value=submit></td>
</tr>
</table>
</table>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:
Gambar
5. From komentar
6.
Mengatur
kolom, buka notepad++ kemudian ketikan code dibawah ini:
<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table
width="300" border="1">
<tr>
<td colspan="3" align="center">warna-warna
</td>
</tr>
<tr>
<td
bgcolor="#00FF00">Hijau</td>
<td
bgcolor="#FFFF00">Kuning</td>
<td bgcolor="#FF0000">Merah
</td>
</tr>
<tr>
<td
bgcolor="#999999">Abu-abu</td>
<td
bgcolor="#0000FF">Biru</td>
<td
bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td
bgcolor="#663300">Cokelat</td>
<td bgcolor="#3399CC">Biru
muda</td>
<td bgcolor="#FF00FF">Merah
muda</td>
</tr>
</table>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:
Gambar 6. Tabel
B.
Hyperlink
1.
Membuat
hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja
code dibawah ini:
<html>
<head>
<title> Judul tab </title>
</head>
<body>
Ini hyperlink ke wordpress
<a href="http://www.wordpress.com/"
title="Masuwordpress"> Wordpress </a>
<br>Klik dan masuk ke yahoo<a
href="http://www.yahoo.com/" title="Masuk yahoo"> Yahoo
</a>
<br>Masuk ke facebook anda
<a
href="http://http://www.facebook.com/" title="Masuk ke
facebook"> Facebook </a>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:
Gambar 7 link halaman web lain
2. Membuat
hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy
saja code dibawah ini:
<html>
<head>
<title>
Judul tab </title>
</head>
<body>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html"
title="ke Rumah"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg"
border="0" width="80" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html"
title="Profilku"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg"
border="0" width="100" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html"
title="Kode Warna Pada HTML"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg"
border="0" width="150" height="30"/></a>
<a href="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html"
title="kumpulan Kata-kata Mutiara"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/kata%20kata.jpg"
border="0" width="100" height="30"/></a>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format
HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti
pada gambar 8 berikut:
0 komentar