Cara Membuat Desain Web

CARA MEMBUAT DESAIN 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>
Judul
<TITLE></TITLE>
Mukadimah
(Header)
Batang Tubuh
<HEAD></HEAD>
<BODY></BODY>
(terdapat pada awal dan

akhir dari file HTML)
(harus selalu terdapat pada
mukadimah)
(keterangan umum, seperti
judul dsb.)
(isi dari halaman HTML)
FORMAT TAMPILAN
Huruf Tebal
Huruf Miring
Garis Bawah
<B></B>
<I></I>
<U></U>
Rata Tengah
<CENTER></CENTER>
Huruf Kedip
<BLINK></BLINK>
Ukuran Huruf
<FONT SIZE=?></FONT>
Warna Huruf
<FONT COLOR="#$$$$$
$"></FONT>
<FONT
FACE="***"></FONT>
Pilih Jenis
Huruf
(Bold)
(Italic)
(Underline - jarang
digunakan)
(Center - berlaku untuk teks
maupun gambar)
(Blinking - tag terlucu
sampai kini)
(Font Size - boleh diisi dari
1 sampai 7)
PEMISAH
Paragraf
<P></P>
Align Text
<P ALIGN=LEFT|CENTER|
RIGHT></P>
<BR>
Pndah Baris
Garis Datar
Penataan
Letak Garis
Tebal Garis
Lebar Garis
Lebar Garis
Persentasi
(tag penutup
seringkali tak
diperlukan)
<HR>
<HR ALIGN=LEFT|RIGHT|
CENTER>
<HR SIZE=?>
<HR WIDTH=?>
<HR WIDTH="%">
(pindah ke baris
berikut)
(Horizontal Rule)
(dalam satuan pixel)

(dalam persentasi
terhadap lebar
halaman)
LATAR BELAKANG DAN WARNA

Latar Belakang
Gambar
Warna Latar
Belakang
<BODY BACKGROUND="URL">
(Tiled Background)
<BODY BGCOLOR="#$$$$$$"
(Background Color urutan:

merah/hijau/biru)
Warna Huruf
Teks
<BODY TEXT="#$$$$$$">
TABEL
Rancangan Tabel
Garis Batas
Tabel
Lebar Tabel
Lebar Tabel
Persentasi
<TABLE></TABLE>
<TABLE BORDER=?></TABLE>
Baris dalam
Tabel
Penataan Letak
Baris
<TR></TR>
<TABLE WIDTH=?>
<TABLE WIDTH="%">
<TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>

(dalam satuan persen
terhadap lebar
halaman)
Sel dalam Tabel
<TD></TD>
Penataan Letak
Sel
<TD ALIGN=LEFT|RIGHT|
<TH></TH>
Kepala Tabel
Penataan Letak
Kepala Tabel
Warna Kepala
Tabel
A.
(harus ada dalam setiap

baris tabel)
(Table Header - seperti

data dengan Bold dan
Center)
<TH ALIGN=LEFT|RIGHT|
<TH BGCOLOR="#$$$$$$">
Dasar dasar HTML

1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan
code di bawah 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>
</html>
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>
</body>
</html>
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>
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>
</html>
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>
</html>
Gambar 6. Tabel
B.
Hyperlink
1. Membuat hyperlink ke halaman web lain, buka notepad++, kemudian ketikan atau copy saja
code di bawah 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>
</html>
Gambar 7 link halaman web lain

2. Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy
saja code di bawah 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>
</html>
Gambar 8. Link Antar Bagian Dalam Web

C.
Membuat Website Sederhana
1. Membuat halaman login pada website, buka notepad++, kemudian ketikan atau copy saja
code di bawah 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>
</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">
</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>
background dapat anda ganti sendiri sesuai dengan kesukaan anda.
Hasilnya seperti pada gambar 9 berikut:
Gambar 9. Halaman login

2. Membuat halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah
ini:
<html>
<head>
<title>Home</title>
<link rel='icon' href='gambar/alien.ico'>
</head>
<body>
<center><table
width='1000'
height='400'
border="0"
background='gambar/xx.jpg' cellpadding="0" cellspacing="<tr>
<td colspan="2" color="white" align='center'>
<img src="gambar/1.png" width="1000" height="400">
</td>
</tr>
<tr
height="50"><td
colspan='2'
background='gambar/zz.jpg'
align='left' height="20">
<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img
src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat
datang di website pertama saya ~ <img src='gambar/halo.gif'
border='0'
width='40'
height='40'></font></BLINK></b></ul></ul></p></left>
<left>
<ul><a
href="home.html"
title="ke
Rumah"><img
src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>
<a
href="http://mp3skull.com/"
title="MP3"><img
src='gambar/MP3.jpg'
BORDER='0'
width='80'
height='30'></font></a>
<a
href="profilku.html"
src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>
<a href="html_colors.html" title="Kode Warna Pada HTML"><img
src='gambar/KODE
WARNA.jpg'
BORDER='0'
width='120'
height='30'></a>
<a
href="http://www.gametop.com/"
title="Tempat
Game"><img
src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>
<a
href="http://www.w3schools.com/html/html_intro.asp"
title="Tutorial
HTML.w3schools.com"><img
src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>
<a
href="kumpulan%20puisi.html"
title="kumpulan
Kata-kata
Mutiara"><img
src='gambar/KATA.jpg'
BORDER='0'
width='100'
height='30'></a>
</ul></left>
</td>
</tr>
<tr>
<td
width='796'
height='700'
valign='top' >
<p><font color="yellow" size="5">~Dasar-dasar Membuat Website
Berbasis HTML~</font>
<p align="lift"><font color="white">Nah, anda pasti sudah banyak
melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi,
masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???
<br />
Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan
menjelaskan bagaimana website di bangun menggunakan tag-tag HTML,
dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada
yang perlu diketahui.<br />
<br />
<a name='more'></a><br />
<span id="more-712"></span><br />
<b>tag <></b><br />
digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag

container dan tag biasa.<br />
Tag container adalah tag yang berisi text yang akan ditampilkan
setelah tag ditutup. Contoh: <td> text yang ditampilkan
</td>.<br />
Tag biasa, yahh…tag aja, contoh <BR> (break).
<br> kaga perlu ditutup oleh tag </br>, tapi jika
sintak yang digunakan tag container, contoh: <h1>, yah
mesti ditutup dengan </h1>.<br />
Tag yang digunakan untuk mengakhiri sintak punya karakter /
(slash)
sebelum
sintaknya,
contohnya:
<td>
</td><br />
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh:
<body
bgcolor=”red”>
</body>.
atau
<input type=”text”>.<br />
<b>LANGKAH 1</b><br />
<ul>
<li>MEMBUKA NOTEPAD.</li>
</ul>
<b>LANGKAH 2</b> <br />
<ul>
<li>MENGETIKKAN SINTAK/SYNTAX.</li>
</ul>
Berikut ini adalah syntax dasar yang membentuk suatu HTML.<br />
pertama, ketikkan<br /><html><br />
tekan
enter,
kemudian
ketik<br
/><head><br
/>Dalam
container head, kita bisa mengetikan beberapa sintak, tapi
yangpaling penting jangan lupa mengetikan sintak <title>
judul halaman web </title>. Untuk sintak lain nanti
saja.<br />Sekarang ketikkan sintak title tadi, jadi seperti
ini:<br
/><head>
<title>
judul
halaman
web
</title> </head><br />
Kemudian
ketikkan
<body>.
Tag
body
merupakan
badan/tubuh/inti dari halaman web, tampilan web yang kita lihat
itu berasal dari <body>.<br />Body tuh tag container, jadi
mesti ditutup. Hasil sampai sekarang:<br />
<html><br /><head><br /><title> Judul Halaman
Web </title><br />
</head><br />
<body><br />
</body><br />?<br />
<br />
<br />Selanjutnya bagaimana cara menampilkan tulisan ke dalam
HTML??? Ketikan sembarang text ke dalam tag body, contohnya
seperti ini :<br /><body><br />Contoh text yang ditampilin
di halaman web, By: Rian Hidayat<br /></body><br />terus,
jika sudah, ketikkan </html>, script lengkapnya seperti ini

:<br /><html><br /><head><br />
<title> Judul Halaman Web </title><br />
</head><br /><body><br />Contoh text yang ditampilkan
di halaman web, By: Rian Hidayat<br />
</body><br />
</html><br />
kalo udah, sekarang save dengan nama dasarHTML.<br />
kalo udah disave, buka data yang tadi di save.<br />?<br />Pada
bagian ini, kalian mungkin akan bingun,g karena html yang tadi
disave dan cape cape diketikkan, ternyata gagal. Malah yang
terbuka adalah file di notepad/wordpad. tau kenapa???<br />Karena
ketika men-save, file tersebut di save dalem bentuk TXT, bukan
HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave,
ada satu tempat di bawah tempat kita menulis nama file,? yakni
Save As Type. Silahkan ubah dari text document(*.txt) menjadi all
files, ketika menulis nama, di akhir di berikan extensi .html,
contoh: dasarHTML.html.
<div style='clear: both;'></div>
</textarea>
<font="left"
form
method="post"
action="file:///C:/Users/COMPAQ/Documents/HTML.1/new%204.html">
<input type="hidden" name="friendID" value="123456">
<textarea name="f_comments" cols="40" rows="5"">
Enter your comments here...
</textarea><br>
<input type="submit" value="coments" />
<input type="reset" value="Reset" />
</form>
</td>
<td width='200' height='700' bgcolor='' valign='top'>
<table
align="left"
width='200'
border='0'
bgcolor=''
bordercolor='green'>
<tr align='center'>
<td><p><a
href="http://www.facebook.com/"
target="_blank"
title="Masuk
ke
Facebook">
<img
src="gambar/facebook.ico"
border="0" width="90" height="70"/></a></td>
<td><p><a
href="http://www.youtube.com/"
target="_blank"
title="Masuk
ke
youtube">
<img
src="gambar/youtube.ico"
border="0" width="90" height="70"/></a><td>
</p>
</tr>
</table>
<table
align='left'
width='200'
border='0'
bgcolor=''
<center>
<td width="200" valign="top"><font color="#FFFF00" face="Cooper

Std Black">
<b>TUTORIAL HTML</b>
<ul>
<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan
bergerak'><font color='#0000FF' face='Times New Roman'>Cara
membuat tulisan bergerak</a></font></li>
<li><a href='Menbuat%20from%20komentar.html' title='membuat from
komentar'><font color='#0000FF' face='Times New Roman'>Cara
membuat from komentar</a></font></li>
<li><a
href='Membuat%20login.html'
title='membuat
halaman
login'><font color='#0000FF' face='Times New Roman'>Cara membuat
halaman login</a></font></li>
</ul></font></table></td>
</tr>
<tr height="50">
s<td
colspan='2'background='gambar/zz.jpg'><center><b><marquee><font
face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun
banyak kendala dalam pembuatan desain web, tapi tetap berusaha
untuk
mencapai
hasil
yang
terbaik
~</font></b></marquee></center></td></tr>
</table><div
style="position:
fixed;
bottom:
0px;
left:
10px;width:130px;height:160px;">
<img
border="0"
src="gambar/twitter.ico"
title="follow
my
twitter" alt="animasi bergerak gif" /></a><small><center></div>
<div
style="position:
fixed;
bottom:
0px;
right:
0px;width:100px;height:100px;"><a href='#top'>
<img border="0" src="gambar/top.png" width='50' height='50'
title="Kembali
ke
atas"
alt="animasi
bergerak
gif"
/></a><small><center>
</div>
<div
style="position:
fixed;
TOP:
0px;
right:
10px;width:130px;height:160px;"><a href='login.html'>
<img
border="0"
src="gambar/c.png"
width='40'
height='40'
title="Kembali
ke
login"
alt="animasi
bergerak
gif"
/></a><small><center></div>
<body background='gambar/yy.jpg'></body>
<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf"
AUTOSTART="TRUE"
LOOP="TRUE"
WIDTH="1"
HEIGHT="1"
ALIGN="CENTER"></EMBED></html>
anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti
background dan animasi yang sesuai dengan anda.
Hasilnya akan seperti pada gambar 10 berikut:
Gambar 10. Halaman awal

3. Membuat data pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code
dibawah ini:
<html>
<head>
<title>Profilku</title>
</head>
<body>
<center><table
width='1000'
height='400'
border="0"
background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >
<tr>
</td>
</tr>
<tr height="50">
<td
colspan='2'
align='left'
height="20">
border='0'
width='40'
<left><ul><a
href="home.html"
title="ke
Rumah"><img
<a
title="MP3"><img
BORDER='0'
width='80'
<a
<a
href="html_colors.html"
title="Kode
Warna
Pada
HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120'
height='30'></a>
<a href="http://www.gametop.com/" title="Tempat Game"><img
<a
title="Tutorial
<a href="kumpulan%20puisi.html" title="kumpulan Kata-kata
Mutiara"><img
BORDER='0'
width='100'
height='30'></a></ul></left></td></tr>
<tr><td
width='796'
height='700'
valign='top' >
<p><table
align="center"
border="0"
bgcolor=""
cellpadding="0" cellspacing="8" >
<td><tr><td colspan="2" align="center"><font face="Bauhaus
93" size="8" color="#0066FF"><b>PROFILKU</b></td></tr>
<tr><br><table>
<P align="center"><font color="#00FFFF">
<img
src="gambar/rian.JPG"
border="7"
width="250"
height="300">
<tr><td
align="right"><font
size="5"
color="#00FFFF"><b><p
align='left'>NAMA</p></b></td>
<td><font
size="5"color="#00FFFF">:
Rian
Hidayat</p></td></tr>
<td align="right"><font size="5" color="#00FFFF"><b><p
align='left'>ALAMAT</p></b></td>
<td><font size="4"color="#00FFFF">: Weru, Sukoharjo</td></tr>
align='left'>TTL</p></b></td>
<td><font size="5"color="#00FFFF">: Sukoharjo, 09-November1993</td></tr>
align='left'>PEKERJAAN</p></b></td>
<td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>
align='left'>HOBY</p></b></td>
<td><font size="5"color="#00FFFF">: Tidur</td></tr>
align='left'>NO.TELPONE</p></b></td>
<td><font size="5"color="#00FFFF">: 085728282066</td></tr>

align='left'>EMAIL</p></b></td>
<td><font size="5"color="#00FFFF">:hrian89@gmail.com</td>
</tr></table>
<table><P
align="center"><font
color="#00FFFF"><img
src="gambar/bram.JPG" border="7" width="250" height="300"></p>
<tr><td align="right"><font size="5" color="#00FFFF"><b><p
align='left'>NAMA</p></b></td>
<td><font
Bram
Putra
P.</p></td></tr>
<td
align="right"><font
size="5"
color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>
<td><font
Laweyan,
Surakarta</td></tr>
<td
align="right"><font
size="5"
color="#00FFFF"><b><p align='left'>TTL</p></b></td>
<td><font size="5"color="#00FFFF">: Surakarta, 13April-1992</td></tr>
<td
align="right"><font
size="5"
color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>
<td><font
Mahasiswa</td></tr>
<td
align="right"><font
size="5"
color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>
<td><font size="5"color="#00FFFF">: XXXXXXXXXXXXXX
</td>
</tr></table></td>
<table
align="left"
width='200'
border='0'
bgcolor=''
<tr
align='center'><td><p><a
href="http://www.facebook.com/"
target="_blank"
title="Masuk
ke
Facebook">
<img
border="0"
width="90"
height="70"/></a></td>
<td><p><a
href="http://www.youtube.com/"
target="_blank"
title="Masuk
ke
youtube">
<img
</p></tr>
</table>
<table
align='left'
width='200'
border='0'
bgcolor=''
<center>
<td
width="200"
valign="top"><font
color="#FFFF00"
face="Cooper Std Black">
<ul><li><a
href="buat%20ayat%20bergerak.html"
title='membuat
tulisan
bergerak'><font
color='#0000FF'
face='Times
New
Roman'>Cara
membuat
tulisan
bergerak</a></font></li>
<li><a href='Menbuat%20from%20komentar.html' title='membuat
from komentar'><font color='#0000FF' face='Times New Roman'>Cara
<li><a href='Membuat%20login.html' title='membuat halaman
</ul></font></table></td></tr>
<tr
height="50"><td
colspan='2'
background='gambar/zz.jpg'><center><b><marquee><font face="Cooper
Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala
dalam pembuatan desain web, tapi tetap berusaha untuk mencapai
hasil yang terbaik ~</font></b></marquee></center></td>
</tr></table><div style="position: fixed; bottom: 0px;
left: 10px;width:130px;height:160px;">
<img
border="0"
title="follow
my
twitter" alt="animasi bergerak gif" /></a><small><center>
</div>
<div
style="position:
fixed;
bottom:
0px;
right:
title="Kembali
ke
atas"
alt="animasi
bergerak
gif"
<div
style="position:
fixed;
TOP:
0px;
right:
<img border="0" src="gambar/c.png" width='40' height='40'
title="Kembali
ke
login"
alt="animasi
bergerak
gif"
/></a><small><center>
</div>
<body background='gambar/yy.jpg'>
</body>
AUTOSTART="TRUE"
LOOP="TRUE"
WIDTH="1"
HEIGHT="1"
</html>
Gambar 11. Membuat data pribadi

4. Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah
ini:
<html>
<head>
<title>Profilku</title>
</head>
<body>
<center>
<table
width='1000'
height='400'
border="0"
<tr>
</td>
</tr>
<tr height="50">
<td
colspan='2'
align='left'
height="20">
border='0'
width='40'
<left>
<ul><a
href="home.html"
title="ke
Rumah"><img
<a
title="MP3"><img
BORDER='0'
width='80'
<a
<a href="html_colors.html" title="Kode Warna Pada HTML"><img
src='gambar/KODE
WARNA.jpg'
BORDER='0'
width='120'
height='30'></a>
<a href="http://www.gametop.com/" title="Tempat Game"><img
<a
title="Tutorial
<a
href="kumpulan%20puisi.html"
title="kumpulan
Kata-kata
Mutiara"><img
BORDER='0'
width='100'
height='30'></a>
</ul></left>
</td></tr>
<tr>
<td
width='796'
height='700'
valign='top' >
<p><table
align="center"
border="0"
bgcolor=""
cellpadding="0" cellspacing="8" >
<td>
<p><b><center><font
face="Bauhaus
93"
size="7"
color='#0000FF'>Galery</font></center></b></p><b>
<table color="blue" align="center" border="9px">
<tr><p
align="center"><font
color="#00FFFF"
size='6'>Album
Kegiatan Teknisi</font>
<td><img
src="file:///D:/Tugas%20HTML/Gambar/a.png"
border="3" width="300" height="300" /></td>
<td><img
src="file:///D:/Tugas%20HTML/Gambar/b.png"
<tr><td><img
src="file:///D:/Tugas%20HTML/Gambar/c.png"
<td><img
src="file:///D:/Tugas%20HTML/Gambar/d.png"
<tr><td><img
src="file:///D:/Tugas%20HTML/Gambar/e.png"
<td><img
src="file:///D:/Tugas%20HTML/Gambar/f.png"
border="3" width="300" height="300" /></td></p></tr>
</table>
</td>
<table align="left" width='200' border='0' bgcolor=''

bordercolor='green'><tr align='center'>
<td><p><a href="http://www.facebook.com/" target="_blank"
title="Masuk
ke
Facebook">
<img
border="0" width="90" height="70"/></a></td>
<td><p><a href="http://www.youtube.com/" target="_blank"
title="Masuk
ke
youtube">
<img
</p></tr></table>
<table
align='left'
width='200'
border='0'
bgcolor=''
<center>
Std Black">
<b>TUTORIAL HTML</b><ul>
<li><a href="buat%20ayat%20bergerak.html" title='membuat
tulisan
bergerak'><font
color='#0000FF'
face='Times
New
Roman'>Cara membuat tulisan bergerak</a></font></li>
</ul></font></table></td></tr>
<tr height="50">
<td
colspan='2'
background='gambar/zz.jpg'><center><b><marquee><font face="Cooper
Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala
dalam pembuatan desain web, tapi tetap berusaha untuk mencapai
hasil yang terbaik ~</font></b></marquee></center></td>
</tr></table>
<div
style="position:
fixed;
bottom:
0px;
left:
<img
border="0"
title="follow
my
twitter" alt="animasi bergerak gif" /></a><small><center></div>
<div
style="position:
fixed;
bottom:
0px;
right:
title="Kembali
ke
atas"
alt="animasi
bergerak
gif"
<div
style="position:
fixed;
TOP:
0px;
right:
10px;width:130px;height:160px;"><a
href='login.html'><img
border="0"
src="gambar/c.png"
width='40'
height='40'
title="Kembali
ke
login"
alt="animasi
bergerak
gif"
<body background='gambar/yy.jpg'>
</body>
AUTOSTART="TRUE"
LOOP="TRUE"
WIDTH="1"
HEIGHT="1"
</html>
Gambar 12. Galery

5. Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian
ketikan atau copy saja code dibawah ini:
<html>
<head>
<title>Cara membuat tulisan bergerak</title>
</head>
<body>
<center>
<table
width='1000'
height='400'
border="0"
<tr>
</td>
</tr>
<tr height="50">
<td
colspan='2'
align='left'
height="20">
border='0'
width='40'
<left>
<ul><a href="home.html" title="ke Rumah"><img
<a
title="MP3"><img
BORDER='0'
width='80'
<a href="profilku.html" title="Profilku"><img
<a href="html_colors.html" title="Kode Warna
Pada
HTML"><img
src='gambar/KODE
WARNA.jpg'
BORDER='0'
width='120' height='30'></a>
<a href="http://www.gametop.com/" title="Tempat
Game"><img
src='gambar/GAME.jpg'
BORDER='0'
width='80'
height='30'></a>
<a
title="Tutorial
<a href="kumpulan%20puisi.html" title="kumpulan
Kata-kata
Mutiara"><img
BORDER='0'
width='100' height='30'></a>
</ul></left>
</td>
</tr>
<tr>
<td
width='796'
height='700'
valign='top' >
<b><center><span style="font-size: large;" align='center'><font
color='#0066FF'
size='5'>Tutorial
Membuat
Tulisan
Menjadi
Bergerak</font></span></center></b>
<br />
<br
/><font
color='#00FFFF'>Marquee
tag
digunakan
untuk
menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini,
saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag
ini untuk menggerakkan tulisan anda.</font><br />
<br />
<div style="color: #FFFF00;">
<marquee direction="down" height="50"><center>
<b>Teks Bergerak Ke Bawah...</b></center>

</marquee>
</div>
<div style="color: #FFFF00;"><marquee direction="right"><b>Teks
Bergerak Ke Kanan...</b></marquee>
</div>
<div style="color: #FFFF00;"><marquee direction="left"><b>Teks
Bergerak Ke Kiri...</b></marquee>
</div>
<br />
<div style="color: #FFFF00;">
<marquee direction="up" height="50"><center>
<b>Teks Bergerak Ke Atas...</b></center>
</marquee>
</div>
<br />
<a
name='more'></a><br
/><br
/><span
style="font-size:
large;"><font color='#00FFFF'><b>1.</b></span> Seperti yang anda
lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh
gunakan
kode
dibawah
ini
untuk
melakukan
tricks
tersebut.</font><br />
<br />
<div class="code"><br /><span style="color: white;"><marquee
direction="</span>
<b><span
style="color:
#FFFF00;">right</span></b><span
style="color:
white;">">This
text
scrolls
right...</marquee></span></div><br />
<br /><font color='#00FFFF'>Apa yang anda perlukan, gantikan teks
yang bewarna <b><span style="color:#FFFF00;">kuning</span></b>
kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama
ada - up, down, right, left.</font><br /><br />
<div style="color: #FF0000;"><marquee scrollamount="30"><b>Teks
ini Macam Ferari..</b></marquee></div><br /><span style="fontsize: large;"><font color='#00FFFF'><b>2.</b></span> Anda boleh
mengubah kelajuan teks dengan menggunakan kod di bawah ni.</font>
<br /><br />
scrollamount="</span><b><span
style="color:#FF6600;">30</span></b><span
style="color:
white;">"></span><span style="color: #FF0000;">Teks ni Macam
Ferari..</span><span style="color: white;"></marquee>
</span></div><br /><br /><font color='#00FFFF'>Ubah nomer yang
bewarna <b><span style="color:#FF6600;">Oren</span></b> untuk
mengubah kelajuan.</font>
<br /><br />
<div style="color: #f1c232;"><marquee scrolldelay="300"><b>Teks
ini seperti Siput..</b></marquee></div><br />
<div class="code"><br/><span style="color: white;"><marquee

scrolldelay="</span><b><span
style="color:#00FF00;">300</span></b><span
style="color:
white;">">Teks ini seperti Siput..</marquee>
</span></div><br /><br /><b><span style="font-size: large;"><font
color='#00FFFF'>3.</span></b> Ubah nomer yang bewarna <b><span
style="color:#00FF00;">hijau</span></b> untuk mengubah kelajuan.
</font><br
/><br
/><div
style="color:
#6600CC;"><marquee
behavior="alternate"><b>Teks ini Melantun</b></marquee>
</div><br /><font color='#00FFFF'>Untuk membuatkan teks anda
melantun seperti di atas ini. Gunakan kode di bawah.
</font><br /><br />
behavior="alternate"></span><b style="color: #6600CC;">Teks
ini Melantun</b><span style="color: white;"></marquee>
</span></div><br /><br /><b><font color='#00FFFF'>4.</b> Ok.
Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak
</font><br /><br /><div style="color: #0066FF;">
<marquee width="200"><b>Teks ini bergerak dalam kelebaran 200
width</b></marquee></div><br /><div class="code"><br />
<span
style="color:
white;"><marquee
width="</span><span
style="color:
#00FF00;">200</span><span
style="color:
white;">">Teks
ini
bergerak
dalam
kelebaran
200
width</marquee></span></div>
<br /><font color='#00FFFF'>Anda boleh tentukan width mengikut
kesukaan anda dengan menukarkan nomer yang bewarna <b><span
style="color: #00FF00;">hijau</span></b>.
</font><br /><br /><span style="font-size: large;"><b><font
color='#00FFFF'>5.</b></span> Seterusnya saya akan menggabungkan
beberapa kode Marquee ini bersama.
</font><br /><br />
<div
style="color:
#33FF33;"><marquee
behavior=alternate
scrollamount=30
width=400><b>Teks
Paling
Awesome</b></marquee></div>
<br /><font color='#00FFFF'>Ini merupakan kode yang saya gunakan
untuk membuat teks bergerak seperti yang di atas.
</font><br /><br />
<div class="code">
<br />
<span
style="color:
white;"><marquee
behavior="alternate"
width="400"
scrollamount="30"></span><b
style="color:
#33FF33;">Teks
Paling
Awesome</b><span
style="color:
white;"></marquee>
</span></div>
<br />
<br /><font color='#00FFFF'>Sekarang, anda boleh coba dalam blog

anda, anda juga boleh gabungkan kode-kode marquee ini mengikut
kesukaan anda masing-masing.<br /></font><br /></td>
<table align="left" width='200' border='0' bgcolor=''
<tr align='center'>
<td><p><a href="http://www.facebook.com/" target="_blank"
title="Masuk
ke
Facebook">
<img
border="0"
width="90"
height="70"/></a></td><td><p><a
href="http://www.youtube.com/" target="_blank" title="Masuk ke
youtube"> <img src="gambar/youtube.ico" border="0" width="90"
height="70"/></a><td>
</p></tr></table>
<table align='left' width='200' border='0' bgcolor=''
<center>
Std Black">
<ul><li><a
href="buat%20ayat%20bergerak.html"
title='membuat
tulisan
bergerak'><font
color='#0000FF'
face='Times
New
Roman'>Cara
membuat
tulisan
bergerak</a></font></li>
</ul></font></table></td></tr><tr
height="50"><td
colspan='2' background='gambar/zz.jpg'><center><b><marquee><font
face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun
banyak kendala dalam pembuatan desain web, tapi tetap berusaha
untuk
mencapai
hasil
yang
terbaik
~</font></b></marquee></center></td>
</tr>
</table>
<div
style="position:
fixed;
bottom:
0px;
left:
<img
border="0"
title="follow
my
twitter" alt="animasi bergerak gif" /></a><small><center>
</div>
<div
style="position:
fixed;
bottom:
0px;
right:

title="Kembali
ke
atas"
alt="animasi
bergerak
gif"
<div
style="position:
fixed;
TOP:
0px;
right:
<img
border="0"
src="gambar/c.png"
width='40'
height='40'
title="Kembali
ke
login"
alt="animasi
bergerak
gif"
/></a><small><center></div><body background='gambar/yy.jpg'>
</body>
<EMBED SRC="MP3/A7x_Afterlife.swf" AUTOSTART="TRUE" LOOP="TRUE"
WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>
</html>
Gambar 13. Artikel tulisan bergerak

Cara Membuat Desain Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Membuat Desain Web

Diunggah oleh

Hak Cipta:

Format Tersedia

CARA MEMBUAT DESAIN WEB

Membuat Desain Website Berbasis HTML Dengan Notepad++

Daftar Tag Pada HTML

(terdapat pada awal dan

(dalam satuan pixel)

LATAR BELAKANG DAN WARNA

(Background Color urutan:

(dalam satuan pixel)

Sel dalam Tabel

(harus ada dalam setiap

(Table Header - seperti

Dasar dasar HTML

Gambar 1. Judul Tab Halaman

Gambar 2. Mengatur Paragraf

Gambar 3. Ukuran Huruf

Gambar 4. Format tulisan

Gambar 5. From komentar

<td bgcolor="#3399CC">Biru muda</td>

Gambar 7 link halaman web lain

Gambar 8. Link Antar Bagian Dalam Web

Membuat Website Sederhana

Gambar 9. Halaman login

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag

jika sudah, ketikkan &lt;/html&gt;, script lengkapnya seperti ini

<td width="200" valign="top"><font color="#FFFF00" face="Cooper

Gambar 10. Halaman awal

<td align="right"><font size="5" color="#00FFFF"><b><p

Gambar 11. Membuat data pribadi

<table align="left" width='200' border='0' bgcolor=''

Gambar 12. Galery

<b>Teks Bergerak Ke Bawah...</b></center>

<div class="code"><br/><span style="color: white;">&lt;marquee

<br /><font color='#00FFFF'>Sekarang, anda boleh coba dalam blog

<img border="0" src="gambar/top.png" width='50' height='50'

Gambar 13. Artikel tulisan bergerak

Anda mungkin juga menyukai

jika sudah, ketikkan </html>, script lengkapnya seperti ini

<div class="code"><br/><span style="color: white;"><marquee