cara membuat desain web
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>
</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>
</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:
Gambar 8. Link Antar Bagian Dalam Web
C. Membuat Website Sederhana
1. Membuat halaman login pada website, buka notepad++,
kemudin ketikan atau copy saja code dibawah ini:
<html>
<head>
<title>login
web</title><link rel='icon' href='gambar/B.png'>
</head>
<body>
<p
align="center"> <font size="6"
color="#FF6600" >
Silahkan
mengisi data yang ada di bawah untuk masuk ke website saya :)</font>
</p>
<table align="center">
<td><form
method="post" action="home.html"><label><font
color="#FF6600">Nama Anda:</label>
<br>
<input
type="text" name="nama" value=""></br>
<label><font
color="#FF6600">Email Atau telepon:</label>
<br>
<input
type="text" name="Email" value=""></br><label><font
color="#FF6600">Alamat:</label>
<br>
<input
type="text" name="Alamat" Value=""></br>
<label><font
color="#FF6600">Tanggal Lahir </label>
<br>
<select
name="select">
<option
value="1">1</option>
<option
value="2">2</option>
<option value="3">3</option>
<option
value="4">4</option>
<option
value="5">5</option>
<option
value="6">6</option>
<option
value="7">7</option>
<option
value="8">8</option>
<option
value="9">9</option>
<option
value="10">10</option>
<option
value="11">11</option>
<option
value="12">12</option>
<option
value="13">13</option>
<option
value="14">14</option>
<option
value="15">15</option>
<option
value="16">16</option>
<option
value="17">17</option>
<option
value="18">18</option>
<option
value="19">19</option>
<option
value="20">20</option>
<option
value="21">21</option>
<option
value="22">22</option>
<option
value="23">23</option>
<option
value="24">24</option>
<option
value="25">25</option>
<option
value="26">26</option>
<option
value="27">27</option>
<option
value="28">28</option>
<option
value="29">29</option>
<option
value="30">30</option>
<option
value="31">31</option>
</select>
<select
name="select2">
<option
value="1">Januari</option>
<option
value="2">Februari</option>
<option
value="3">Maret</option>
<option value="4">April</option>
<option
value="5">Mei</option>
<option
value="6">Juni</option>
<option
value="7">Juli</option>
<option
value="8">Agustus</option>
<option
value="9">September</option>
<option
value="10">Oktober</option>
<option
value="11">Nopember</option>
<option
value="12">Desember</option>
</select>
<select
name="select3">
<option
value="2001">1988</option>
<option
value="2002">1989</option>
<option
value="2003">1990</option>
<option
value="2004">1991</option>
<option
value="2005">1992</option>
<option
value="2006">1993</option>
<option
value="2007">1994</option>
<option
value="2008">1995</option>
<option
value="2009">1996</option>
</select></br>
<label><font
color="#FF6600">Jenis Kelamin </label>
<br><font
color="red">Pria
<font
color="#CCFF00">Wanita</br>
<input
type="submit" Value="Masuk">
</td>
</table>
<body
background="gambar/aaa.png">
<EMBED
SRC="MP3/Greenday%20-%20I%20walk%20Alone.swf"
AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1"
HEIGHT="1" ALIGN="CENTER"></EMBED>
<p
align="center"> <font size="1"
color="#FF6600" ><BLINK>..... Dalam penggisiannya harus
jujur yaa, jangan bo'onk :) ......
</body>
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.
Hasilnya
seperti pada gambar 9 berikut: