A. PENDAHULUAN
- Pengertian
Di hari ini saya membuat halaman layout dengan menggunakan CSS, layout ini sangatlah penting untuk membuat sebuah website, bahkan rata rata sekarang website sudah pasti ada layoutnya.
- Latar belakang masalah
Pentingnya Layout ini untuk membuat struktur sebuah halaman website, maka dari itu saya mempelajari layout ini untuk bisa membuat website sesuai dengan struktur yang sudah di rencanakan.
B. MAKSUD DAN TUJUAN
Maksud dari kegiatan ini adalah mempelajari dan mempraktikkan CSS Layout, dan tujuan dari kegiatan ini adalah sebagai untuk nantinya ketika membuat website bisa menggunaka Layout yang saya pelajari ini.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Membuat struktur dengan menggunakan HTML Senmatik dan CSS
D. TARGET DAN HASIL YANG DIHARAPKAN
Dapat mengerti dan memahami untuk pembuatan Layouting pada HTML Senmatic dan CSS.
E. METODE PELAKSANAAN
- Mencari referensi
- Mempraktikkannya
F. ALAT DAN BAHAN
- Laptop
- Sublime Text
- Koneksi internet
G. TARGET WAKTU
09.30 - 16.00
H. TAHAPAN PELAKSANAAN
- Pertama saya mencari referensi di internet mengenai dengan kata kunci "Membuat Layout dengan menggunakan CSS"
- Setelah itu Saya cari referensi yang nyaman, dan ketika sudah menemukan saya langsung meniru cara pembuatan layoutingnya.
- Saya buka software Sublime Text dan memulai mempraktikkannya, dari mulai membuat komponen HTML nya dan setelah itu CSS nya.
Untuk contoh Layout pada website itu seperti ini :
ini adalah kode yang saya praktikkan untuk membuat layouting tadi :
<!DOCTYPE html><html lang="en"><head><title>Template CSS</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {box-sizing: border-box;}body {font-family: Arial, Helvetica, sans-serif;}/* Style the header */header {background-color: darkred;padding: 30px;text-align: center;font-size: 35px;color: white;}/* Create two columns/boxes that floats next to each other */nav {float: left;width: 20%;height: 300px;/* only for demonstration, should be removed */background: darkblue;text-decoration: none;padding: 20px;}/* Style the list inside the menu */nav ul {list-style-type: none;padding: 0;margin: 2px;}nav ul li {margin: 10px;}nav a{color: white;text-decoration: none;}article {float: left;padding: 20px;width: 80%;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: darkred;padding: 50px;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><h2>Belajar Loyouting</h2></header><section><nav><ul><li><a href="#">Tentang Saya</a></li><li><a href="#">Pengalaman</a></li><li><a href="#">Hobi</a></li></ul></nav><article><h1>Tentang Saya</h1><p>Saya Adelwin Nugroho Liandy bisa di panggil Adelwin/win saya adalah siswa Smk Roudlotul Mubtadiin Balekambang. Saya seorang yang kreatif dan suka mencari alternatif solusi dari berbagai macam persoalan</p><h1>Pengalaman</h1><p>Pengalaman saya di BLC TELKOM KLATEN salah satunya yaitu mengikuti training Cisco, dan alhamdulillah saya lulus dan mendapatkan sertifikat internasional</p><h1>Hobi</h1><p>Hobi saya adalah Membaca buku, Mengetik, Bermain bola</p></article></section><footer><p>Copyraight 2022 By AdelwinNL </p></footer></body></html>
Hasil dari kodingan di atas :
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
J. KESIMPULAN YANG DIDAPAT
Layout ini dalam bahasa indonesia yaitu tata letak, ketika membuat sebuah halaman website maka akan di rencanakan terlebih dahulu layoutnya untuk menggambarkan tata letak halaman websitenya seperti apa nantinya yang akan di buat.
