Membuat Halaman Web
Assalamu’alaikum…
A.
Pendahuluan
hari ini adalah
tahapan evaluasi dari hari senin-sabtu. Pertama saya mempelajari
tentang sejarah HTML kemudian tag tag yang ada, pambuatan paragrafm
pembatan tabel, kemudian pembuatan Link dan penyisipan file
(gambar,mp3 dan video).tapi kali ini saya akan mencoba membuat sebuah
tampilan halaman web.
B.Pengertian
membuat tampilan
halaman web adalah sangat mudah jika kita sebelumnya bisa memahami
HTML. Mendesain atau kita bisa memperindah tampilan yang kita akan
buat. Supaya orang jika melihat tampilan yang kita buat tertarik
untuk melihat.
C.
Latar Belakang
Cara membuat halaman
web sederhana sangatlah mudah, dikarenakan perangkat membuat web
sangat mudah ditemui di internet dan rata-rata program tersebut
gratis. Dalam tutorial kali ini perangkat yang dibutuhkan antara
lain:
-
Notepad, atau anda bisa mencoba notepad ++yang mana dalam program ini tersedia fitur yang lebih baik, kita juga bisa mengunakan text editor.
-
Browser sebagai program penampil halaman web. Jika anda
pengguna windows, biasanya browser IE(Internet Explorer) akan
terinstall otomatis. Anda juga bisa menggunakan browser dari google,
yaitu chrome.
1. pertama, saya membuat form Login terlebih dahulu tetapi disini username dan passwordnya sudah saya isi sebelumnya pada coding jadi tidak usah memasukkan username dan password lagi pada form login. Disini terdapat coding form action dimana fungsi dari coding tersebut adalah memenggil sebuah file lain yang akan ditampilkan pada saat kita klik Login. Pada username dan password saya masukkan value pada username “laila” kemudian value pada password “khoirullaila” ketika kita masukkan akan menampilkan pada saat kita Login, tanpa kita mengetik username dan password .
<!DOCTYPE html>
<html>
<head>
<title> Login </title>
<style>
body{margin: 200px 500px;
background:aqua;}
</style>
</head>
<body>
<form
action="..//Documents/left index.html" method="get">
<h3>SElamat Datang
Admin</h3>
<hr>
<table>
<tr>
<td>username</td><td>:</td><td>
<input type="text" name="username"
value="laila"/></td>
</tr>
<tr>
<td>Password
</td><td>:</td><td> <input
type="password" name="password"
value="khoirullaila"/></td>
</tr>
<tr>
<td></td><td></td>
<td><input type="submit" name="login"
value="log in"/> <input type="submit"
name="cencel" value="cencel"/></td>
</tr>
</table>
</form>
</body>
</html> |
Hasil tampilannya :
2. Selanjutnya, kita buat halaman web dengan nama “Left index.html” pada text editor dan disimpan pada “Documents”. Berikut adalah codingnya:
coding:
<head>
<title>Left Colour</title>
</head>
<body>
<form id="form1"
name="form1" method="post" action="">
<table width="1000"
height="447" border="0"
align="center"
cellspacing="1">
<tr>
<th
width="200" rowspan="3" valign="top"
bgcolor="#FF0000"><img
src="..//Downloads/info.jpeg">
<p><a
href="..//Documents/galery.html">Home</a></p>
<p><a
href="..//Documents/tabel3.2.html">HTML Tabel</a></p>
<p><a
href="..//Documents/tabel bersarang praktik.html">HTMl
Tabel bersarang</a></p></p></th>
<th width="800"
height="40" align="center"
bgcolor="#FFA500"><strong><font
color="#CCCCCC"
size="+4">Macam macam
praktik HTML</font></strong></th>
</tr>
<tr>
<td height="500"
align="center" valign="top"
bgcolor="#DA70D6"><p> </p>
</td>
</tr>
<tr>
<td height="20"
align="center" bgcolor="#FFA500">
<font
size="+2">lailaa08.blogspot.com</font></td>
</tr>
</table>
</form>
</body>
</html> |
Hasil
:
ketika
dijalankan terdapat beberapa Hyperlink dan penyisipan gambar, semua
itu bisa diganti atau diubah sesuai kemauan tapi juga harus memakai
coding yang sudah ada, kita cuma mennganti dimana kita taruh file
yang akan kita panggil.
disini
menggunakan Left index kenapa menggunakan Left index karena digunakan
untuk layar dengan resolusi yang lebar sehingga mudah dalam
penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada
halaman utama.Navigasi atau daftar isi berada dibagian kiri dari
halaman web, seperti yang kita buat tadi.
Contoh
left index yang kita gunakan :
coding
:
<html>
<head>
<title>Profilku</title>
</head>
<body
cursor:url("galery.html"),text;>
<center>
<table
width='1000' height='400' border="0"
background="..//Downloads/S.jpg" cellpadding="0"
cellspacing="20" >
<tr>
<td
colspan="2" color="white" align='center'>
<img
src="..//Downloads/w.jpg" width="1000"
height="500" >
</td>
</tr>
<tr
height="50">
<td
colspan='2' background="#FF0000" align='left'
height="5">
<p><ul><ul><left><BLINK><b>
<marquee direction="right"><font
color="#FFFF00" size="5"><h2>~
Selamat datang ~
</h2></font></BLINK></b></marquee></ul></ul></p></left>
<p><ul><ul><left><BLINK><b>
<marquee direction="left"><font color="#FFFF00"
size="5"><h2>~ di website ~
</h2></font></BLINK></b></marquee></ul></ul></p></left>
<p><ul><ul><left><BLINK><b>
<marquee direction="right"><font
color="#FFFF00" size="5"><h2>~
pertama saya ~
</h2></font></BLINK></b></marquee></ul></ul></p></left>
<tr>
<td
width='796' height='700' background='gambar/zz.jpg' valign='top' >
<p><table
align="center" border="0" bgcolor=""
cellpadding="0" cellspacing="8" >
<td>
<p><b><center><font
face="Bauhaus 93" size="7"
color='#FF0000'>Galery</font></center></b></p><b>
<table
color="blue" align="center" border="9px">
<tr><p
align="center"><font color="#FF0000"
size='6'>Album Kode Warna </font>
<td><img
src="..//Pictures/kode warna5.png" border="3"
width="300" height="300" /></td>
<td><img
src="..//Pictures/kode warna12.png" border="3"
width="300" height="300" /></td>
<tr><td><img
src="..//Pictures/kode warna1.png" border="3"
width="300" height="300" /></td>
<td><img
src="..//Pictures/kode warna7.png" border="3"
width="300" height="300" /></td>
<tr><td><img
src="..//Pictures/kode warna2.png" border="2"
width="300" height="300" /></td>
<td><img
src="..//Pictures/kode warna9.png" border="3"
width="300" height="300" /></td></p></tr>
</table>
</td>
<table
align='left' width='200' border='0' bgcolor=''
bordercolor='green'>
<center>
<td
width="300" valign="left"><font
color="#FFFF00" face="Cooper Std Black">
<b>Menu</b><ul>
<li><a
href="htmll.html" title='Pengertian HTML'><font
color='#66CDAA' face='Forte'>Pengertian HTML</a></font></li>
<li><a
href='mp3.html' title='MP3'><font color='#66CDAA'
face='Combria'>MP3</a></font></li>
<li><a
href='video.html' title='video'><font color='#66CDAA'
face='Forte'>Video</a></font></li>
</ul></font></table></td></tr>
<p>
<a
href="..//Documents/left index.html"><h3>Kembali
ke halaman utama</h3></a></p>
<tr
height="50">
<td
<center><b><marquee><font face="Cooper
Std Black" color="#00FFFF" size="7">~
Meskipun banyak kendala dalam pembuatan desain web ini, tapi tetap
berusaha untuk mencapai hasil yang terbaik
~</font></b></marquee></center></td>
</tr></table>
<body>
</body>
</html>
|
Hasil :
D. Maksud dan Tujuan
agar dapat mengubah atau mengatur sendiri tampilan web yang kita buat sendiri dengan kreatifitas masing-masing.
E. Alat dan Bahan
1. Laptop
2. File Items
3. Text Editor
F. Hasil yang di harapkan
menghasilkan tampilan web yang menarik dan indah untuk dilihat dan digunakan.
G.
Referensi
1.http://www.nyekrip.com/cara-membuat-halaman-web-sederhana/Wassalamu’alaikum Wr.Wb
Semoga Bermanfaat……;)
Tidak ada komentar:
Posting Komentar