Cara Membuat Layout Dasar Menggunakan HTML dan CSS
Layout dasar adalah susunan suatu website salah satu unsur pembuatan web yang harus paling di perhatikan.terutama yang ingin kursus di bagian web designer.karena tapilan website akan menggambarkan tingkat profesional seorang web designer
Berikut cara caranya serta codingan nya:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Malas Ngoding</h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
sidebar
<ul>
<li><a href="#">Tutorial HTML dasar</a></li>
<li><a href="#">Tutorial CSS dasar</a></li>
<li><a href="#">Tutorial PHP dasar</a></li>
<li><a href="#">Tutorial JQuery dasar</a></li>
</ul>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
Kemudian buatlah file dengan nama style.css
.wrap{
background: blue;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: green;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: yellow;
}
.wrap .menu ul{
padding: 0;
margin: 0;
background: yellow;
overflow: hidden;
}
.wrap .menu ul li{
float: left;
list-style-type: none;
padding: 10px;
}
/*akhir menu*/
.clear{
clear: both;
}
.badan{
height: 450px;
}
Kemudian kalian ctrl+s setelah itu kalian klik kanan klik open broswer.
Sekian dari laporan magang mengenai layout dasar semoga bermanfaat
Waktu pelaksanaan:
Rabu, 25 Januari 2023. Pukul 07.30-13.00.
Kendala yang dihadapi:
Jaringan Internet yang kurang stabil.
Kesimpulan :
Mempelajari layout dasar juga sangat penting bagi desainer website
Komentar
Posting Komentar