Dasar Membuat HTML

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 <HTML></HTML> (terdapat pada awal dan akhir
Dokumen dari file HTML)
Judul <TITLE></TITLE> (harus selalu terdapat pada
mukadimah)
Mukadimah <HEAD></HEAD> (keterangan umum, seperti
(Header) 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 <FONT SIZE=?></FONT> (Font Size - boleh diisi
Huruf dari 1 sampai 7)
Warna Huruf <FONT COLOR="#$$$$$
$"></FONT>
Pilih Jenis <FONT
FACE="***"></FONT>
Huruf
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 <HR ALIGN=LEFT|RIGHT|
CENTER>
Letak Garis
Tebal Garis <HR SIZE=?> (dalam satuan
pixel)
Lebar Garis <HR WIDTH=?> (dalam satuan
pixel)
Lebar Garis <HR WIDTH="%"> (dalam persentasi
Persentasi terhadap lebar
halaman)
LATAR BELAKANG DAN WARNA

Latar Belakang <BODY (Tiled Background)
BACKGROUND="URL">
Gambar
Warna Latar <BODY BGCOLOR="#$$$$ (Background Color -
$$"
Belakang urutan:
merah/hijau/biru)
Warna Huruf <BODY TEXT="#$$$$$
$">
Teks
TABEL
Rancangan <TABLE></TABLE>
Tabel
Garis Batas <TABLE BORDER=?></TABLE>
Tabel
Lebar Tabel <TABLE WIDTH=?> (dalam satuan pixel)
Lebar Tabel <TABLE WIDTH="%"> (dalam satuan
Persentasi persen terhadap
lebar halaman)
Baris dalam <TR></TR>
Tabel
Penataan <TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
Letak Baris VALIGN=TOP|BOTTOM|
MIDDLE>
Sel dalam <TD></TD> (harus ada dalam
Tabel setiap baris tabel)
Penataan <TD ALIGN=LEFT|RIGHT|
Letak Sel VALIGN=TOP|BOTTOM|
MIDDLE>
Kepala Tabel <TH></TH> (Table Header -
seperti data dengan
Bold dan Center)
Penataan <TH ALIGN=LEFT|RIGHT|
Letak Kepala VALIGN=TOP|BOTTOM|
Tabel MIDDLE>
Warna Kepala <TH BGCOLOR="#$$$$$$">
Tabel
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:

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

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

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>
</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>
firefox atau sejenisnya, 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" title="Profilku"><img
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' background='gambar/zz.jpg' 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"
ALIGN="CENTER"></EMBED></html>
firefox atau sejenisnya, 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' background='gambar/zz.jpg' align='left' height="20">
<left><ul><a href="home.html" title="ke Rumah"><img
<a href="html_colors.html" title="Kode Warna Pada HTML"><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'
<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' background='gambar/zz.jpg'
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-November-
1993</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 size="5"color="#00FFFF">: Bram Putra
P.</p></td></tr>
align='left'>ALAMAT</p></b></td>
<td><font size="4"color="#00FFFF">: Laweyan,
Surakarta</td></tr>
align='left'>TTL</p></b></td>
<td><font size="5"color="#00FFFF">: Surakarta, 13-
April-1992</td></tr>
align='left'>PEKERJAAN</p></b></td>
<td><font size="5"color="#00FFFF">:
Mahasiswa</td></tr>
align='left'>NO.TELPONE</p></b></td>
<td><font size="5"color="#00FFFF">: XXXXXXXXXXXXXX
</td>
</tr></table></td>
<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>
</p></tr>
</table>
<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
membuat from komentar</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:
alt="animasi bergerak gif" /></a><small><center>
</div>
/></a><small><center>
</div>
<body background='gambar/yy.jpg'>
</body>
</html>
sesuai dengan anda.
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">
<left>
<ul><a href="home.html" title="ke Rumah"><img
src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a> <a
href="html_colors.html" title="Kode Warna Pada HTML"><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'
</ul></left>
</td></tr>
<tr>
>
<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>
bordercolor='green'><tr align='center'>
width="90" height="70"/></a></td>
</p></tr></table>
<center>
Black">
<b>TUTORIAL HTML</b><ul>
<li><a href="buat%20ayat%20bergerak.html" title='membuat
</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:
alt="animasi bergerak gif" /></a><small><center></div> <div
style="position: fixed; bottom: 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>
</html>
sesuai dengan anda.
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">
<left>
<ul><a href="home.html" title="ke Rumah"><img
<a href="http://mp3skull.com/"
title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80'
height='30'></font></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>
>
<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="font-size:
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>
<tr align='center'>
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>
<center>
Black">
<ul><li><a href="buat%20ayat%20bergerak.html" title='membuat
</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:
alt="animasi bergerak gif" /></a><small><center>
</div>
/></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>
sesuai dengan anda.
Gambar 13. Artikel tulisan bergerak

Dasar Membuat HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Dasar Membuat HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTML

LATAR BELAKANG DAN WARNA

A. Dasar dasar HTML

1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian

C. Membuat Website Sederhana

Hasilnya seperti pada gambar 9 berikut:

Hasilnya akan seperti pada gambar 10 berikut:

Hasilnya akan seperti pada gambar 11 berikut:

Gambar 11. Membuat data pribadi

Hasilnya akan seperti pada gambar 12 berikut:

Gambar 12. Galery

Hasilnya akan seperti pada gambar 12 berikut:

Gambar 13. Artikel tulisan bergerak

Anda mungkin juga menyukai