A. PENDAHULUAN
Pada kesempatan kali ini kita akan membahas soal Layout di HTML . Apa itu Layout ? dan apa kegunaanya? akan kita bahas pafda postuinngan kali ini.
B. PENGERTIAN
Layout didalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemenelemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik.
C. MAKSUD DAN TUJUAN
Untuk memahami apa itu Layout HTML.
D. PEMBAHASAN
Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.
Dan kali ini kita akan mencoba membuat script html yang menggunakan Layout
1. pertama kalian ketikkan script di bawah ini
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: yellow;
background-color: green;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Layout HTML</h1>
</header>
<nav>
<ul>
<li><a href="#">Pengertian Layout</a></li>
<li><a href="#">Kegunaan Layout</a></li>
<li><a href="#">Contoh Layout di HTML</a></li>
</ul>
</nav>
<article>
<h1>Pengertian Layout</h1>
<p> Layout didalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemenelemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik.</p>
</article>
<footer>ahmadfaisal1006.blogspot.co.id</footer>
</div>
</body>
</html>
2. Lalu kalian simpan dan buka file tersebut, hasilnya akan seperti di bawah ini
E. MASALAH YANG DI TEMUKAN
Penempatan article yang salah , seperti article di taruh di header , padahal header di gunakan untuk judul suatu article.
F. KESIMPULAN
Layout berarti menyusun , membuat tata letak agar tampilan menjadi lebih baik.
G. REFERENSI
https://loekmanulkim.wordpress.com/2012/03/19/tata-letak-layout/
https://www.w3schools.com
Pada kesempatan kali ini kita akan membahas soal Layout di HTML . Apa itu Layout ? dan apa kegunaanya? akan kita bahas pafda postuinngan kali ini.
B. PENGERTIAN
Layout didalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemenelemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik.
C. MAKSUD DAN TUJUAN
Untuk memahami apa itu Layout HTML.
D. PEMBAHASAN
Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.
Dan kali ini kita akan mencoba membuat script html yang menggunakan Layout
1. pertama kalian ketikkan script di bawah ini
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: yellow;
background-color: green;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Layout HTML</h1>
</header>
<nav>
<ul>
<li><a href="#">Pengertian Layout</a></li>
<li><a href="#">Kegunaan Layout</a></li>
<li><a href="#">Contoh Layout di HTML</a></li>
</ul>
</nav>
<article>
<h1>Pengertian Layout</h1>
<p> Layout didalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemenelemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik.</p>
</article>
<footer>ahmadfaisal1006.blogspot.co.id</footer>
</div>
</body>
</html>
2. Lalu kalian simpan dan buka file tersebut, hasilnya akan seperti di bawah ini
di atas adalah contoh layout sederhana yang terdapat <header> , <nav> , <article> , <footer>
E. MASALAH YANG DI TEMUKAN
Penempatan article yang salah , seperti article di taruh di header , padahal header di gunakan untuk judul suatu article.
F. KESIMPULAN
Layout berarti menyusun , membuat tata letak agar tampilan menjadi lebih baik.
G. REFERENSI
https://loekmanulkim.wordpress.com/2012/03/19/tata-letak-layout/
https://www.w3schools.com
Sekian dan Terima Kasih karena sudah membaca Blog saya yang Sederhana
Ini 😁 Jika ada salah arti atau kata bisa beri komentar kalian di kolom
komentar.....
Tidak ada komentar:
Posting Komentar