Merancang Content Web
Hi kawan, apa kabar anak kuliahan yang baru saja akan melaksanakan Ujian Akhir Semester. Bagi kalian yang jurusannya sama seperti saya yaitu D3 Manajemen Informatika tentunya tidak asing dengan mata kuliah Pemrograman Web atau Web Design. Disini saya kan berbagi tutorial contoh Merancang Content Web, saya membuat content web berdasarkan website yang pernah saya kunjungi. Yaitu tentang resep makanan. Langsung saja yuk!
1. Script
<html>
<title> Membuat Layout Halaman Web </title>
<head>
<style>
#wrapper{
width: 100%;
margin: 0 auto;
}
#div1 {
background-color:#FA8072; height:60px;width:700px;float:left;margin:20 auto;
font-size:100%;
}
#div1_1{
background-color:#40D0E0; height:90px;width:200px;float:left;
font-size:90%;
}
#div2 {
background-color:#778899; height:500px;width:250px;clear:both;float:left; margin:3px;
font-size:90%;
}
#div3 {
background-color:#ADE8E6; height:530px;width:360px;float:left; margin:5px;
font-size:90%;
}
#div4 {
background-color:#7CFC00; height:530px;width:200px;float:left;margin:5px;
font-size:90%;
}
#div5 {
background-color:#FA8072; height:80px;width:800px;clear:both;float:left;margin: 10 auto;
font-size:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1">
<ul style=" margin:0; padding:0; list-style:none; ">
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Beranda</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Komunitas</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Buku Masak</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Belajar Masak</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Promosi</li>
</ul>
</div>
<div id="div1_1">
<h1><b><center>Resep<br><italic>Oke!</italic></center></b></h1>
</div>
<div id="div2">
<h3><b><center><br><br>Festival Masakan<br>Asia Tenggara</center></b></h3>
<h4>Buat tamu-tamu Anda kagum<br>dengan masakan-masakan khas<br>negeri jiran di arisan Anda yang<br>akan datang!</h4>
<center><img src="Cookies.jpg" alt="Cookies" height="100px" align="center"/></center>
<h4><center>Komunitas DotNetters<br>Indonesia Pencipta<br>Makanan Enak</h4></center>
<h4>Jika Anda bisa .NET (C#,<br>VB.NET) dan suka makanan<br>enak, bergabung bersama<br>
kami untuk memperoleh<br>berbagai penawaran istimewa.<h4>
</div>
<div id="div3"><br>
<center><img src="Cake.jpg" alt="Cake" height="100px" align="center"/></center></center>
<center><h4>RESEP PILIHAN<br>Wednesday, 18/05/2016</h4></center>
<h3><b><center>Kue Ulang Tahun<br>Istimewa</center></b>Kue Ulang Tahun Istimewa terbuat dari bahan dasar sponge cake
yang sudah diolah dan disimpan didalam ruangan bersuhu kamar selama sepekan. Tujuannya adalah agar terjadi proses peragian
didalam bahan dasar tersebut. Proses ini mirip dengan proses pembuatan anggur (wine). Setelah terjadi fermentasi,
maka sponge cake tersebut kemudian dihias dengan menggunakan campuran butter-cream dan pewarna makanan. Bunga-bunga yang ada diatas
cake dibuat menggunakan fondant, jadi jangan khawatir semua bisa dimakan. </h3><hr><br>
Press Releases (Saterday, 14/05/2016)
</div>
<div id="div4">
<h2><b>Cari Resep</b></h2>
<h4>Cari resep? Anda datang ke<br>
tempat yang tepat<br>
Resep Oke! mempunyai<br>
sekitar 100.000 resep dari<br>
berbagai negara dan telah<br>
dicoba di dapur kami.</h4>
<input type="text" name="cari" size="20" maxlength="50" />
<img src="Search.jpg" alt="Search" height="20px"/>
<h2><b>Koleksi Resep Kami</b></h2>
Acara :<br>
<select Acara="part" size="1">
<option value="1">Pilih...</option>
<option value="2">Wedding Party</option>
<option value="3">Birthday Party</option>
<option value="4">Ceremony</option></select>
<form Jenis="form" methode="GET" action="#" />
Jenis Resep :<br>
<select Jenis="part" size="1">
<option value="1">Pilih...</option>
<option value="2">Tradisional</option>
<option value="3">Mancanegara</option></select><br><br>
<input type="submit" value="Lihat"/><br><br><hr>
<center><img src="Lapismania.jpg" alt="Cookies" height="100px" align="center"/></center>
</div>
<div id="div5">
<h4><b><center><br>Copyright © 2016 ResepOke! . All right reserved.<br>
Kebijakan Privasi | Disclaimer</center></b></h4>
</div>
</body>
</html>
2. Hasilnya
Demikian sharing saya kali ini, terima kasih :)
1. Script
<html>
<title> Membuat Layout Halaman Web </title>
<head>
<style>
#wrapper{
width: 100%;
margin: 0 auto;
}
#div1 {
background-color:#FA8072; height:60px;width:700px;float:left;margin:20 auto;
font-size:100%;
}
#div1_1{
background-color:#40D0E0; height:90px;width:200px;float:left;
font-size:90%;
}
#div2 {
background-color:#778899; height:500px;width:250px;clear:both;float:left; margin:3px;
font-size:90%;
}
#div3 {
background-color:#ADE8E6; height:530px;width:360px;float:left; margin:5px;
font-size:90%;
}
#div4 {
background-color:#7CFC00; height:530px;width:200px;float:left;margin:5px;
font-size:90%;
}
#div5 {
background-color:#FA8072; height:80px;width:800px;clear:both;float:left;margin: 10 auto;
font-size:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div1">
<ul style=" margin:0; padding:0; list-style:none; ">
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Beranda</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Komunitas</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Buku Masak</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Belajar Masak</li>
<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px;
background-color: #DC143C; color:#FFFFFF; text-align:center; ">Promosi</li>
</ul>
</div>
<div id="div1_1">
<h1><b><center>Resep<br><italic>Oke!</italic></center></b></h1>
</div>
<div id="div2">
<h3><b><center><br><br>Festival Masakan<br>Asia Tenggara</center></b></h3>
<h4>Buat tamu-tamu Anda kagum<br>dengan masakan-masakan khas<br>negeri jiran di arisan Anda yang<br>akan datang!</h4>
<center><img src="Cookies.jpg" alt="Cookies" height="100px" align="center"/></center>
<h4><center>Komunitas DotNetters<br>Indonesia Pencipta<br>Makanan Enak</h4></center>
<h4>Jika Anda bisa .NET (C#,<br>VB.NET) dan suka makanan<br>enak, bergabung bersama<br>
kami untuk memperoleh<br>berbagai penawaran istimewa.<h4>
</div>
<div id="div3"><br>
<center><img src="Cake.jpg" alt="Cake" height="100px" align="center"/></center></center>
<center><h4>RESEP PILIHAN<br>Wednesday, 18/05/2016</h4></center>
<h3><b><center>Kue Ulang Tahun<br>Istimewa</center></b>Kue Ulang Tahun Istimewa terbuat dari bahan dasar sponge cake
yang sudah diolah dan disimpan didalam ruangan bersuhu kamar selama sepekan. Tujuannya adalah agar terjadi proses peragian
didalam bahan dasar tersebut. Proses ini mirip dengan proses pembuatan anggur (wine). Setelah terjadi fermentasi,
maka sponge cake tersebut kemudian dihias dengan menggunakan campuran butter-cream dan pewarna makanan. Bunga-bunga yang ada diatas
cake dibuat menggunakan fondant, jadi jangan khawatir semua bisa dimakan. </h3><hr><br>
Press Releases (Saterday, 14/05/2016)
</div>
<div id="div4">
<h2><b>Cari Resep</b></h2>
<h4>Cari resep? Anda datang ke<br>
tempat yang tepat<br>
Resep Oke! mempunyai<br>
sekitar 100.000 resep dari<br>
berbagai negara dan telah<br>
dicoba di dapur kami.</h4>
<input type="text" name="cari" size="20" maxlength="50" />
<img src="Search.jpg" alt="Search" height="20px"/>
<h2><b>Koleksi Resep Kami</b></h2>
Acara :<br>
<select Acara="part" size="1">
<option value="1">Pilih...</option>
<option value="2">Wedding Party</option>
<option value="3">Birthday Party</option>
<option value="4">Ceremony</option></select>
<form Jenis="form" methode="GET" action="#" />
Jenis Resep :<br>
<select Jenis="part" size="1">
<option value="1">Pilih...</option>
<option value="2">Tradisional</option>
<option value="3">Mancanegara</option></select><br><br>
<input type="submit" value="Lihat"/><br><br><hr>
<center><img src="Lapismania.jpg" alt="Cookies" height="100px" align="center"/></center>
</div>
<div id="div5">
<h4><b><center><br>Copyright © 2016 ResepOke! . All right reserved.<br>
Kebijakan Privasi | Disclaimer</center></b></h4>
</div>
</body>
</html>
2. Hasilnya
Demikian sharing saya kali ini, terima kasih :)
Komentar
Posting Komentar