Assalamualaikum Wr.Wb
A.PENDAHULUAN
Salam sejahtera untuk kita semua,bertemu lagi dengan saya di blog pribadi saya ini.Kali ini saya akan membahas tentang bagaimana cara membuat tampilan layout yang sederhana.
B.LATAR BELAKANG
Ingin membuat sebuah layout web yang nantinya akan saya terapkan ke dalam web yang akan saya buat.
C.MAKSUD DAN TUJUAN
Untuk menerapkan tag-tag html dan membuat sebuah tampilan layout.
D.ALAT DAN BAHAN
-Leptop
-Sublime text
E.HASIL YANG DIHARAPKAN
Supaya hasil layout yang saya buat nanti bisa saya terapkan kedalam web yang akan saya buat.
F.PEMBAHASAN
Apa Itu Layout Pada Web?
Layout adalah bentuk tata letak dari sebuah halaman yang nanti akan
berisi tulisan-tulisan dan gambar pada sebuah halaman web, tanpa adanya
layout sebuah halaman web akan terlihat berantakan yang pasti tidak akan
enak dipandang dan membingungkan.Nah kali ini saya akan memberikan sedikit pengetahuan saya kepada temen-temen bagaimana cara membuat layout dengan hanya menggunakan kode perintah murni dari HTML dan tanpa bantuan Css.Dalam pembuatan website diperlukan sebuah desain awal dari web yang akan kita buat sebagai sebuah dasar dari pembuatan web untuk mempermudah kita membuat website secara kompleks .Desain awal yang saya maksud adalah sebuah kerangka atau pun layout dari website yang akan kita buat tujuan dari pembuatan layout terlebih dahulu adalah untuk membantu kita mendesain tata letak dari website mulai dari nama webite ,logo/gambar,konten,menu,link,footer dll.
Untuk cara pembuatan layout website yang saya buat saya menggunakan aplikasi sublime text untuk membuat script html dan css ,selain menggunakan sublime text anda juga bisa menggunakan aplikasi lain seperti menggunakan dreamweaver versi apa saja,dan tentu saja untuk menampilkan website yang kita buat bisa menggunakan browser jenis apa saja. Pada pembuatan web menggunakan html dan juga css ini saya buat script html dan css nya terpisah yang mana script htmlnya diberi nama dengan ekstensi dot (.)html contoh: webgw.html ,dan cssnya dengan ekstensi dot (.) css .berikut adalah contoh kode html terlebih dahulu :
<!DOCTYPE html>
<html>
<head>
<title>Membuat layout sederhana</title>
<link rel="stylesheet" type="text/css" href="asd.css">
</head>
<body>
<div class="wrap">
<div class="header">
<center>
<h1 class="animation">SELAMAT DATANG</h1>
<p><marquee>Contoh Layout Website Sederhana menggunkan HTML dan CSS</marquee></p>
</div>
<div class="menu">
<ul>
<li><a href="https://ferrykrw.blogspot.com/">HOME</a></li>
<li><a href="https://www.w3schools.com/html/">HTML</a></li>
<li><a href="https://www.w3schools.com/css/">CSS</a></li>
<li><a href="https://www.w3schools.com/php/">PHP</a></li>
</ul>
</div>
<div class="body">
<div class="menubahasa">
Menu bahasa pemrograman
<ul>
<li><a href="https://www.w3schools.com/html/">Materi dasar HTML</a></li>
<li><a href="https://www.w3schools.com/css/">Materi dasar CSS</a></li>
<li><a href="https://www.w3schools.com/php/">Materi dasar PHP</a></li>
<li><a href="https://ferrykrw.blogspot.com/">Kunjungan blog saya</a></li>
</ul>
</div>
<div class="Rangkuman">
Rangkuman
</div>
<div class="penutup">
Penutupan
</div>
</div>
</body>
</html>
Sedangkan kode css nya yaitu sebagai berikut
.wrap{
background: yellow;
width: 900px;
margin: 0 auto;
}
.wrap .header{
background: red;
padding: 10px;
color: white;
}
.menu{
background: yellow;
}
.menu ul{
padding: 0;
margin: 0;
background: #F4F400;
overflow: hidden;
}
.menu ul li{
float: left;
list-style-type: none;
padding: 10px;
color: black;
}
.body{
background: #00F900;
height: 450px;
color: black;
}
.body ul li a{
color: black;
}
.body .menubahasa{
float: left;
width: 25%;
height: 100%
}
.body .Rangkuman{
background:#08F4DF;
float: right;
height: 100%;
width: 75%;
}
.penutup{
width: 10%;
padding: 10px;
color: black;
}
@keyframes e{
0% {color: blue;}
15% {color: yellow;}
35% {color: green;}
55% {color: blue;}
70% {color: green];}
85% {color: yellow;}
100% {color: black;}
}
div .animation{
animation-name: e;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Itulah contoh pembuatanm layout dari saya
H.REFERENSI
http://www.susahngoding.com
I.PENUTUP
Sekian dari saya semoga bermanfaat untuk kita semua
Wassalamualaikum Wr.Wb
ADS HERE !!!