![YouTube](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ3OAVS7sVz9TsWN66SHzuhYdHuQ9-0m9AujalVVEfVZUMNx6OVSHG6sg6yYe904IOwtBP-mpGrpAX-QD1vjxS2S_sDGOJjNZyb2AyPMXIDe0knwfI9-UltXKOWEEdA31L1IW_d0kHcTA/s1600/youtube.png")
<!DOCTYPE html> //sebuah file yang berjenis HTML
<html lang="en"> //html lang=en memberi tahu browser bahwa semua konten di halaman tresebut adalah bahasa Inggris
<head> //head sebagai tempat untuk meletakkan metadata yaitu informasi-informasi halaman web yang tidak ditampilkan pada halaman tersebut.
<title>CSS Template</title> //title mengganti nama judul dari sebuah web/aplikasi/program.
<meta charset="utf-8"> //meta charset memberi instruksi kepada web browser untuk menerjemahkan karakter-karakter di dalam halaman HTML sebagai UTF-8 dan bersifat opsional.
<meta name="viewport" content="width=device-width, initial-scale=1"> //viewport berfungsi memperlihatkan area yang menonjol seperti kotak box besar agar terlihat oleh user. //content berfungsi agar dapat menggunakan beberapa variable lainnya seperti 'width' dan 'initial-scale'. Fungsi dari 'width' untuk mengatur lebar halaman, jika membarikan nilai device-width maka lebar akan mengikuti ukuran lebar dari perangkat. Dan fungsi dari 'initial-scale' untuk mengatur sekala (zoom) dari halaman web.
<style>
* {
box-sizing: border-box; //box-sizing digunakan untuk merubah kalkulasi dalam mengukur lebar element. sebuah konten box (content-box) akan bertambah lebar ukurannya apabila diberi 'border', 'padding', 'height' dan 'width'.
}
body {
font-family: Arial, Helvetica, sans-serif; //font-family untuk mengatur jenis font yang akan digunakan.
}
/* Style the header */ //Style the header untuk menentukan tampilan sebuah halaman.
header { //untuk menambah objek bagian atas, bisa berupa teks maupun gambar.
background-color: #666; //menentukan warna latak belakang dari teks atau gambar yang akan dibuat dari elemen atau konten.
padding: 30px; //padding digunakan untuk memberikan ruang space disekitar elemen atau konten.
text-align: center; //text-align untuk menentukan letak teks atau gambar yang diinginkan bisa berada di kiri, tengah, atau kanan.
font-size: 35px; //font-size untuk menentukan ukuran teks yang akan digunakan
color: white; //color: white untuk menentukan warna dari teks yang akan digunakan
}
/* Create two columns/boxes that floats next to each other */ //untuk membuat 2 kolom/kotak yang mengapung bersebelahan.
float: left; //membuat 1 elemen/kotak mengapung ke kiri
width: 30%; //membuat ukuran lebar dari kolom/kotak yang mengapung ke kiri sebesar 30%
height: 300px; /* only for demonstration, should be removed */ //membuat tinggi dari kolom/kotak yang mengapung ke kiri. Tetapi hanya untuk demonstrasi, harus dihapus dengan adanya /* only for demonstration, should be removed */.
background: #ccc; //membuat latar belakang dari kolom/kotak yang mengapung ke kiri
padding: 20px; //padding digunakan untuk memberikan ruang space disekitar elemen atau konten.
}
/* Style the list inside the menu */ //untuk membuat gaya daftar yang ada di dalam menu.
nav ul { //nav merepresentasikan link navigasi yang mana link-link yang merujuk ke halaman lain atau halaman web itu sendiri.
list-style-type: none; //untuk mengatur tipe unordered list apakah berbentuk simbol, bulat atau angka.
padding: 0; //padding digunakan untuk memberikan ruang space disekitar elemen atau konten.
}
article { //article untuk memberi mark up sebuah independent content, yang mana element itu dapat berdiri sendiri sebagai sebuah konten utuh yang tidak terikat dengan konten lain (element lain).
float: left; //untuk membuat elemen/kotak mengapung ke kiri
padding: 20px; //padding digunakan untuk memberikan ruang space disekitar elemen atau konten.
width: 70%; //membuat ukuran lebar dari elemen/kotak yang mengapung ke kiri sebesar 70%
background-color: #f1f1f1; //untuk membuat warna pada latar belakang.
height: 300px; /* only for demonstration, should be removed */ //membuat tinggi dari elemen/kotak yang mengapung ke kiri. Tetapi hanya untuk demonstrasi, harus dihapus dengan adanya /* only for demonstration, should be removed */.
}
/* Clear floats after the columns */ //untuk menghapus float setelah kolom.
section::after { //untuk memilih bagian sesudahnya (karena after)
content: ""; //untuk menyisipkan konten (isi, baik berupa teks maupun lainnya) didalam Shadow DOM
display: table; //untuk menampilkan suatu elemen berupa table
clear: both; //untuk memberikan ruang kosong sebagai pembatas code sebelumnya dan setelahnya.
}
/* Style the footer */ //untuk membuat gaya pada footer.
footer { //untuk mengidentifikasi bagian catatan kaki sebuah halaman, dokumen, bagian, ataupun artikel.
background-color: #777; //untuk memberi warna pada latar belakang
padding: 10px; //padding digunakan untuk memberikan ruang space disekitar elemen atau konten.
text-align: center; //text-align untuk menentukan letak teks atau gambar yang diinginkan bisa berada di kiri, tengah, atau kanan.
color: white; //untuk memberikan warna pada teks yang akan digunakan.
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ //untuk membuat 2 kolom/kotak yang bertumpuk di atas satu sama lain alih-alih bersebelahan, pada layar kecil.
@media (max-width: 600px) { //@media untuk membuat layout kita responsive dengan menyesuaikan tampilan berdasarkan ukuran layar perangkat.
nav, article { //nav merepresentasikan link navigasi yang mana link-link yang merujuk ke halaman lain atau halaman web itu sendiri. //article untuk memberi mark up sebuah independent content, yang mana element itu dapat berdiri sendiri sebagai sebuah konten utuh yang tidak terikat dengan konten lain (element lain).
width: 100%; //membuat ukuran lebar dari elemen/kotak sebesar 100%
height: auto; //membuat ukuran tinggi dari elemen/kotak dengan otomatis
}
}
</style> //untuk menyisipkan kode dalam bentuk dokumen HTML
</head> //untuk memberikan informasi tentang dokumen berupa penulis, judul dokumen, kata kunci pada dokumen.
<body> //untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya.
<h2>CSS Layout Float</h2> //<h2> digunakan pada judul artikel blog (jika berada pada homepage) dan berubah menjadi <h1> pada halaman posting.
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> //<p> digunakan untuk membuat teks dalam bentuk paragraf.
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p> //<p> digunakan untuk membuat teks dalam bentuk paragraf.
<header> //untuk menambah objek bagian atas, bisa berupa teks maupun gambar.
<h2>Cities</h2> //untuk membuat teks pada kolom/kotak yang sudah dibuatkan sebelumnya.
</header>
<section> //untuk memilih bagian
<nav>//nav merepresentasikan link navigasi yang mana link-link yang merujuk ke halaman lain atau halaman web itu sendiri.
<ul> //untuk merepresentasikan sebuah daftar item atau koleksi beberapa item yang dapat disusun kembali secara acak tanpa penomoran.
<li><a href="#">London</a></li> //untuk membuat link dari sebuah teks yaitu akan menjadi hypertext
<li><a href="#">Paris</a></li> //untuk membuat link dari sebuah teks yaitu akan menjadi hypertext
<li><a href="#">Tokyo</a></li> //untuk membuat link dari sebuah teks yaitu akan menjadi hypertext
</ul>
</nav>
<article> //article untuk memberi mark up sebuah independent content, yang mana element itu dapat berdiri sendiri sebagai sebuah konten utuh yang tidak terikat dengan konten lain (element lain).
<h1>London</h1> //digunakan pada judul artikel blog
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> //<p> digunakan untuk membuat teks dalam bentuk paragraf.
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article> //untuk menutup dari mark up yang sudah dibuat diatasnya.
</section> //untuk menutup dari bagian yang sudah dibuat sebelumnya.
<footer> //memberikan informasi yang muncul dibagian bawah dokumen, yang isinya dapat berupa tanggal, nama perusahaan, nama pembuat dokumen, dan lain-lain.
<p>Footer</p> //<p> digunakan untuk membuat teks dengan nama Footer.
</footer> //untuk menutup dari footer yang sudah dibuat sebelumnya.
</body> //untuk menutup dari <body sebelumnya sudah dibuat.
</html> //untuk menutup dari halaman web yang sudah dibuat sebagai penutup.
No comments:
Post a Comment