Membuat Layout Menggunakan HTML Dan CSS || BLC Telkom Klaten

 

(Sumber:appkey.id)

A. PENDAHULUAN
    a. Pengertian

    Layout atau tata letak adalah suatu gaya pemformatan dalam penulisan. Tata letak digunakan pada penulisan data huruf. Selain itu tata letak membuat tulisan lebih menarik dan rapi. Dalam penggayaan tulisan sering digunakan tata letak yang umum.


    b. Latar Belakang Masalah

    Dikarenakan untuk membuat tulisan lebih menarik dan rapi maka diperlukan Layout sehingga tampilan website menjadi tersusun dengan baik.


B. MAKSUD DAN TUJUAN

    Membuat Layout untuk mendukung penataan elemen gambar dan teks dalam desain sehingga membuat tampilan menjadi komunikatif dan pesan bisa disampaikan secara efektif. 


C. BATASAN DAN RUANG LINGKUP PEKERJAAN

    W3Schools

  • Layout HTML

 

D. TARGET DAN HASIL YANG DIHARAPKAN

    Agar dapat memahami fungsi-fungsi dari Layout dan dapat mengimplementasikan di Visual Studio Code.


E. ALAT DAN BAHAN

  • Laptop
  • Internet
  • W3Schools
  • Visual Studio Code

 

F. TARGET WAKTU

    8 Jam (08.00-16.00 WIB)


G. TAHAPAN PELAKSANAAN

  • Membuat Layout menggunakan HTML dan CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
font-family: 'Times New Roman', Times, serif;
border: 2px solid black;
}

/* style the header */
header {
background-color: rgb(188, 188, 188);
padding: 10px;
text-align: center;
font-size: 30px;
color: black;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111111;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
li a:hover{
background-color: #333333;
}

/* membuat dua kolom */
nav {
float: right;
width: 30%;
height: 300px;
background: #ccc;
padding: 10px;
}

/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}

article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}

/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h1>
<img src="fashion-removebg.png" style="float: left;width: 90px;height: 90px;">
BlogAdib
<img src="mebel-removebg-preview.png" style="float: right;width: 90px;height: 90px;">
</h1>
</header>

<section>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Social Media</a></li>
</ul>

<nav>
<ul>
<li><a href="#">More</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</nav>

<article>
<h1>"Rekap Final Indonesia Masters 2022: Fajar/Rian Juara, China Bawa 3 Gelar"</h1>
<p>KOMPAS.com - Indonesia meraih satu gelar pada turnamen Indonesia Masters 2022 melalui ganda putra Fajar Alfian/Muhammad Rian Ardianto. Tim Merah Putih mengirimkan dua wakil pada final Indonesia Masters 2022. Mereka adalah Fajar Alfian/Muhammad Rian Ardianto dan Apriyani Rahayu/Siti Fadia Silva Ramadhanti. Fajar/Rian sukses menjadi juara Indonesia Masters 2022 setelah mengalahkan ganda putra China Liang Wei Keng/Wang Chang. Berlaga di Lapangan 1 Istora Senayan, Jakarta, Minggu (12/6/2022) sore WIB, Fajar/Rian menaklukkan Liang/Wang dua gim langsung, 21-10, dalam tempo 36 menit.</p>
</article>
</section>

<footer>
<div class="col-lg-3 item social">
<a href="https://www.youtube.com/channel/UCwpzXctysTnK5gWSJSxOtYA">
<img src="icon_youtube.png" alt="Youtube" style="width: 40px;height:40px;">
<a href="https://www.instagram.com/sidodadijayameubel/">
<img src="icon_instagram.png" alt="Instagram" style="width:40px;height:40px;">
<a href="https://www.facebook.com/meubelsidodadijayaputra/">
<img src="icon_facebook.png" alt="Facebook" style="width: 40px;height:40px;">
<a href="https://twitter.com/AdibAunur">
<img src="icon_twitter.png" alt="Twitter" style="width: 40px;height:40px;">
<a href="https://t.me/adibaunur">
<img src="icon_telegram.png" alt="Telegram" style="widht:40px;height: 40px;">
</a>
</div>
<p class="copyright">Copyright By Adib © 2022</p>
</footer>
</body>
</html>
  •  Hasil output nya akan seperti ini
 

H. TEMUAN PERMASALAN DAN PENYELESAIANNYA
I. REFERENSI

2 komentar

  1. kerenn bosse
    1. mboten mas kulo tiang alit
© AdibAunur. All rights reserved. Distributed by Pixabin