Blog Guru Komputer: HTML Layout

Laman layout adalah bagian dari design grafik yang berkaitan dengan pengaturan visual elemen dari laman web. Page layout digunakan untuk membuat laman agar terlihat lebih menarik. Layout berfungsi mengatur kebakuan dari keseluruhan tampilan, kepentingan relatif, dan hubungan antara elemen grafik untuk mendapatkan informasi yang mudah dipahami oleh user secara efektif dan memiliki dampak.

penggunaan layout html untuk mengatur tata letak dari laman web

Gambar 1 layout pada html

Informasi Page Layout:
satu, Header: Merupakan bagian dari front end yang digunakan pada posisi bagian atas dari laman web. Tag <header> digunakan untuk menambahkan bagian header pada laman web.
dua, Navigation bar: Bar navigasi memiliki fungsi sama seperti daftar menu yang digunakan untuk menampilkan konten informasi dengan menggunakan hyperlink (link).
tiga, Index/Sidebar: Mengandung informasi tambahan atau iklan dan merupakan bagian penting untuk ditambahkan pada laman web.
empat, Content section: Merupakan bagian utama dimana konten pada web atau blog akan ditampilkan.
lima, Footer: Bagian ini mengandung informasi kontak dan query lainnya yang masih berhubungan dengan laman web. Footer selalu diletakkan dibagian akhir atau bawah dari laman web. Tag <footer> digunakan untuk mengatur bagian footer pada laman web.

contoh:

<!DOCTYPE html>
<html>
<head>
 <title>Page Layout</title>
 <style>
  .head1 {
   font-size:40px;
   color:#009900;
   font-weight:bold;
  }
  .head2 {
   font-size:17px;
   margin-left:10px;
   margin-bottom:15px;
  }
  body {
   margin: 0 auto;
   background-position:center;
   background-size: contain;
  }
 
  .menu {
   position: sticky;
   top: 0;
   background-color: #009900;
   padding:10px 0px 10px 0px;
   color:white;
   margin: 0 auto;
   overflow: hidden;
  }
  .menu a {
   float: left;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 20px;
  }
  .menu-log {
   right: auto;
   float: right;
  }
  footer {
   width: 100%;
   bottom: 0px;
   background-color: #000;
   color: #fff;
   position: absolute;
   padding-top:20px;
   padding-bottom:50px;
   text-align:center;
   font-size:30px;
   font-weight:bold;
  }
  .body_sec {
   margin-left:20px;
  }
 </style>
</head>

<body>
 
 
 <header>
  <div class="head1">
GeeksforGeeks</div>
<div class="head2">
A computer science portal for geeks</div>
</header>
 
 
 <div class="menu">
  <a href="#home">HOME</a>
  <a href="#news">NEWS</a>
  <a href="#notification">NOTIFICATIONS</a>
  <div class="menu-log">
   <a href="#login">LOGIN</a>
  </div>
</div>

 <div class = "body_sec">
  <section id="Content">
   <h3>
Content section</h3>
</section>
 </div>

 <footer>Footer Section</footer>
</body>
</html>

Output:

Gambar 1 penggunaan layout untuk mengatur tata letak html

Blog Guru Komputer

Senin, September 02, 2019

HTML Layout

Tidak ada komentar:

Posting Komentar