Belajar HTML dan CSS Membuat Layout Halaman Tanpa Tabel
Dibawah ini beberapa point yang akan kita bahas pada artikel kali ini, silahkan teman- teman perhatikan point- pointnya:
- Membuat Layout Dasar dengan HTML dan CSS
- Membuat Daftar Produk dengan HTML dan CSS
- Membuat Menu Dropdown dengan HTML dan CSS
- Menambahkan Jombotron pada HTML dan CSS
Oke, setelah teman- teman mengetahui point- point pembahsannya, tentunya akan mempermudah teman- teman untuk mempelajari serta memahami pembahasannya. Silahkan simak dan pahami pembahasan dibawah ini:
Jika teman- teman belum membaca artikel sebelumnya silahkan kunjungi : Panduan dasar HTML dan CSS
Jika teman- teman belum membaca artikel sebelumnya silahkan kunjungi : Panduan dasar HTML dan CSS
Membuat Layout Dasar dengan HTML dan CSS
Kita akan membuat suatu kerangka terlebih dahulu untuk membuat layout menggunakan HTML dan CSS. Langkah pertama silahkan teman- teman buat folder dengan nama latihan-layout/ kemudian buat file baru dengan nama index.html didalam foldernya. Silahkan teman teman ikuti script dibawah ini dan tulis pada file index.html.
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style type="text/css">
.header {
background-color: #eee;
min-height: 50px;
}
.content {
background-color: #ddd;
min-height: 500px;
}
.footer {
background-color: #ccc;
min-height: 50px;
}
</style>
</head>
<body>
<div class="header">
<h1>Logo Produk</h1>
</div>
<div class="content">
<h2>Our Products</h2>
</div>
<div class="footer">
<p>copyright 2018 My Page</p>
</div>
</body>
</html>
Pada script diatas tentunya kita sudah membuat tiga buat elemen utama dibawah tag <body>, yaitu tag <div> dengan masing- masing mempunyai nama class header, content dan footer. Pada <div> dengan class header, kita akan mengisinya dengan logo dan menu halaman. Kemudian pada bagian <div> dengan class content, kita akan megisinya dengan content halaman website yang akan kita buat nanti, yakni dari daftar artikel. Dan terakhir pada <div> dengan nama class footer, kita akan mengisinya dengan copyright.
Pada bagian <head> tentunya kita telah mendefinisikan style untuk setiap <div>, diantaranya yaitu backgroud-color untuk memberikan warna latar agar kotak dari setiap element kita dapat melihat batas masing- masingnya. Kita juga telah menambahkan style min-height untuk mengatur tinggi minimun dari setiap elemennya. Setiap style kita set menggunakan nama classnya.
Bila teman- teman jalankan script HTML tersebut pada browsert maka akan muncul seperti pada gambar dibawah ini:
Setiap dari element <div> diatas akan menjadi layout. Karena <div> itu bersifat block, maka lebar dari elemennya tentunya akan menghabiskan ruang parentnya ke samping. Bila teman- teman ingin membuat layout boxed, yaitu layout halaman dengan jarak pinggir di sebelah kita dan sebelah kanan, maka teman- tema dapat menyimpan semua <div> tersebut didalam satu tag <div> utama sebagai parentnya.
Ubahlah kode HTML yang kita cetak tebal pada bagian body menjadi seperti script dibawah ini:
Pada bagian <head> tentunya kita telah mendefinisikan style untuk setiap <div>, diantaranya yaitu backgroud-color untuk memberikan warna latar agar kotak dari setiap element kita dapat melihat batas masing- masingnya. Kita juga telah menambahkan style min-height untuk mengatur tinggi minimun dari setiap elemennya. Setiap style kita set menggunakan nama classnya.
Bila teman- teman jalankan script HTML tersebut pada browsert maka akan muncul seperti pada gambar dibawah ini:
Ubahlah kode HTML yang kita cetak tebal pada bagian body menjadi seperti script dibawah ini:
<body>
<div class="container">
<div class="header">
<h1>Logo Produk</h1>
</div>
<div class="content">
<h2>Our Products</h2>
</div>
<div class="footer">
<p>copyright 2018 My Page</p>
</div>
</div>
</body>
Kemudian pada tag <style> pada bagian header, tambahkan lah CSS berikut ini untuk memberikan style pada elemen <div> yang mempunyai nama class container.
<style type="text/css">
.container {
width: 800px;
margin: 0 auto;
}
.header {
background-color: #eee;
min-height: 50px;
}
</style>
Dengan menyumpan ketiga elemen <div> baris pada <div> utama, maka lebar dari setiap <div> anaknya akan mengikuti lebar elemen induknya.
Sekarang kita akan memperbaharui kode HTML didalam tag <div class="header"></div> menjadi seperti script dibawah ini;
<div class="header">
<h1>Logo Produk</h1>
<div class="logo">
<img src="images.png">
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
Silahkan teman- teman jalankan pada web browser, maka kita akan melihat gambar serta list menu akan tampil seperti gambar dibawah ini:
Setelah itu silahkan teman- teman tambahkan kode CSS berikut pada tag <style> agar tampilan yang kita buat terlihat rapi. Silahkan ikut code dibawah ini:
.header {
background-color: #eee;
min-height: 50px;
text-align: center;
}
.logo img {
width: 200px;
}
.menu ul {
padding: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 10px 20px;
text-decoration: none;
}
Pada CSS diatas tentunya kita telah menambahkan 3 selector baru, yaitu selector untuk elemen image pada logo/ gambar agar ukurannya tidak terlalu besar. Selain itu juga kita mengubah mode display dari element <li> yang asalnya defaulnya block menjadi inline-block agar tampilannya menjadi menyamping. Kita juga telah menambahkan padding pada setiap link menunya serta membersikan dari garis bawah. Untuk tampilan akhirnya silahkan teman- teman lihat dan perhatikan gamabar dibawah ini:
Oke setelah kerangka layout sudah kita buat, maka selanjutnya kita akan membuat daftar produk pada kerangka tersebut. Silahkan teman- teman simak dan pahami pembahasan dibawah ini:
Membuat Daftar Produk
Pada bagian ini kita akan mengisi bagian konten halaman. Bagian content tersebut akan kita isi dengan daftar produk. Silahkan edit script pada bagian content menjadi seperti script dibawah ini:
<div class="content">
<h2>My Articles</h2>
<h2>My Products</h2>
<div class="thumbnail">
<img src="250x150">
<h2>Product 2</h2>
<p>Rp 250.000</p>
</div>
</div>
Kemudian pada bagian <style> silahkan tambahkan kode CSS seperti berikut ini:
.thumbnail {
background-color: white;
text-align: center;
padding: 10px;
}
Silahkan teman- teman kembali jalankan pada web browser, maka hasilnya akan seperti gambar dibawah ini:
Tentunya kita menginginkan agar dalam satu baris terdapat 3 buat produk yang ditampilkan. Sedangkan pada hasil dari kode yang sudah kita miliki, kita hanya memiliki satu buah produk yang memenuhi semua lebar baris. Oleh karena itu, tentunya kita akan mengatur width dari suatu elemen .thumbnail agar dalam suatu baris dapat masuk 3 buat produk didalamnya.
Silahkan teman- teman tambahkan kode CSS berikut ini pada bagian selector .thumbnail:
Silahkan teman- teman tambahkan kode CSS berikut ini pada bagian selector .thumbnail:
.thumbnail {
background-color: white;
text-align: center;
padding: 10px;
width: 225px;
margin: 10px;
}
Silahkan atur widthnya menjadi 225px dengan tujuan dari total lebar parennya yang mempunyai lebar 800px dapat kita isi dengan tiga buah kotak thumbnail dengan ukuran 225px. Selain itu juga kita akan menambahkan margin pada thumbnail agar jarak satu sama lain tidak saling berhimpitan. Hasil akhir dari pembaharuan script diatas akan menjadi seperti gambar dibawah ini:
Dan ketika kita menyalin kode .thumbnail menjadi 3 buah, maka teman- teman akan mendapatkan halaman seperti gambar dibawah ini:
Kita dapat melihat bahwa .thumbnail kedua dan ketiga akan tampil ke bawah, meskipun kita sudah membuat width dari thumbnail sudah dibuat dengan ukuran kecil. Tentunya ini terjadi karena sifat dari display:block dari suatu elemen. thumbnail tentunya akan mengisi lebar dari parentnya. Adapun ruang kosong di sebelah kanan dari setiap element .thumbnail selelah lebar atau width nya kita perkecil akan secara otomatis menjadi margin dari elemen tersebut.
Silahkan teman- teman tambahkan CSS berikut pada bagian selector .thumbnail:
Silahkan teman- teman tambahkan CSS berikut pada bagian selector .thumbnail:
.thumbnail {
background-color: white;
text-align: center;
padding: 10px;
width: 225px;
margin: 10px;
float: left;
}
.thumbnail img {
width: 100%;
}
Pada .thumbnail, kita akan menambahkan satu property yaitu float:left sehingga ruang sisa dari setiap barisnya akan kosong serta akan diisi oleh elemen dibawahnya. Selain itu juga kita akan menambahkan selector baru yakni untuk element image yang ada didalam .thumbnail agar ukuran lebar/ widthnya mengikuti ukuran dari parentnya.
Hasil akhirnya dari kode yang sudah kita buat diatas, maka akan tampil seperti gambar dibawah ini:
Tentunya masih ada masalah yang harus kita tangani dari penggunaan float yaitu membersihkan efe k dari float itu sendiri, jika teman- teman coba menyalin elemen .thumbnail menjadi 6 buah ataupun lebih, maka tampilannya akan seperti dibawah ini:
Kita dapat melihat bahwa .thumbnail keluar dari kotaknya, serta teks footer naik untuk mengisi ruang yang kosong disebelah kanan .thumbnail terakhir. Untuk mengatasi hal tersebut.. teman- teman cukup menambahkan CSS overflow:auto pada suatu parent dari .thumbnail, yaitu pada elemen .content, Silahkan ikuti code dibawah ini:
Hasil akhirnya dari kode yang sudah kita buat diatas, maka akan tampil seperti gambar dibawah ini:
.content {
background-color: #ddd;
min-height: 500px;
overflow: auto;
}
Tentunya dengan demikian, efek dari float tersebut tidak akan mengenai elemen yana terdapat dibawahnya, silahkan perhatikan gambar dibawah ini untuk hasilnya.
Tahapan terakhir kita tentunya tinggal merapihkan konten pada bagian footer. dengan menambahkan padding serta rata tengah. Tambahlan CSS berikut ini pada bagian selector .footer:
.footer {
background-color: #ccc;
min-height: 50px;
padding: 20px;
text-align: center;
}
Nah maka hasil akhirnya akan seperti gambar berikut ini:
Selanjutnya kita akan membuat menu dropdown, silahkan teman- teman simak dan pelajari pembahasan dibawah ini:
Membuat Menu Dropdown
Misalkannya teman- teman ingin membuat menu about pada header ketika disorot pointer mouse, maka akan menampilkan submenu, dan apabilah pointer/ cursornya dijauhkan maka submenunya akan disembunyikan membali.
Untuk membuat fitur tersebut, teman- teman membutuhkan property yang bernama position untuk mengatur tata letak submenunya serta juga property display untuk dapat menampilkan dan menyembunyikan submenu.
Silahkan teman- teman tambahkan html berikut pada bagian .menu didalam header:
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a>
<ul class="submenu">
<li><a href="#">CV</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Kemudian silahkant tambahkan CSS selector baru pada bagian style, seperti berikut:
ul.submenu {
background-color: #eee;
border: 1px solid #ccc;
text-align: left;
}
Kita telah menambahkan elemen <ul> baru didalam list menu about. kemudian kita juga telah menambahkan style agar submenu tersebut dapat tampil dengan latar warna serta border.
Pada gambar diatas tentunya dropdown masih belum sesuai dengan apa yang kita harapkan, karena seharusnya pada list submenu nya tampil kebawah, bukan tampil kesamping. Hal tersebut terjadi karena pada bagian submenunya kita memberikan style pada elemen <li> agar tampil menyamping dengan property display:inline-block, sehingga pada submenu yang menggunakan tag <li> tentunya akan terkena dampak dari property display tersebut. Untuk menangani hal tersebut kita akan menambahkan style untuk list yang khusus terdapat didalam .submenu agar ditampilkan dengan display:block lagi, silahkan ikuti kode dibawah ini.
Hasilnya akan nampak seperti bertikut:
ul.submenu li {
display: block;
}
ul.submenu li a {
display: block;
padding: 5px 10px;
}
Tentunya dengan demikian, tampilan list submenunya sekarang akan ditampilkan kebawah.
Namun pada posisinya masih masih tumpang tindih dengan menu utama. tentunya kita akan menggunakan property position:absolute pada .submenu agar dapat kita posisikan tidak mengikuti layout bawaannya. Pada bagian selector ul.submenu yang telah teman- teman buat sebelumnya silahkan tambahkan style dibawah ini:
Namun pada posisinya masih masih tumpang tindih dengan menu utama. tentunya kita akan menggunakan property position:absolute pada .submenu agar dapat kita posisikan tidak mengikuti layout bawaannya. Pada bagian selector ul.submenu yang telah teman- teman buat sebelumnya silahkan tambahkan style dibawah ini:
ul.submenu {
background-color: #eee;
border: 1px solid #ccc;
text-align: left;
position: absolute;
top: 20px;
left: 0;
}
Silahkan teman- teman jalankan pada web browser, maka tampilannya akan seperti gambar dibawah ini:
Seperti yang kita duga sebelumnya, posisinya akan relatif dari jendela browser, bukan berasal dari parentnya yaitu <li> untuk About. Hal ini terjadi karena saat ul.submenu kita beri property position :absolute akan naik ke layer atas dari element lain. Dan saat property top dan left kita atur dia akan memposisikan diri dari element parent yang lapisannya sama, dalam kasus ini adalah jendela browser.
Kita menginginkan agar dia relatif dari parent <li>. maka elemen <li> harus kita angkat satu lapis keatasnya, menggunakan property position:relative. Silahkan tambahkan property tersebut pada selector .menu ul li:
Kita menginginkan agar dia relatif dari parent <li>. maka elemen <li> harus kita angkat satu lapis keatasnya, menggunakan property position:relative. Silahkan tambahkan property tersebut pada selector .menu ul li:
.menu ul li {
display: inline-block;
position: relative;
}
Hasilnya, .submenu kita tentunya sekarang akan diposisikan secara relatif dari parent<li>.
Langkah terakhir, kita akan menyembunyikan .submenu dan hanya dapat menampilkan bila pointer mouse berapa dibagian atas menu About. Silahkan tambahkan CSS berikut pada style:
ul.submenu {
background-color: #eee;
border: 1px solid #ccc;
text-align: left;
position: absolute;
top: 20px;
left: 0;
display: none;
}
.menu ul li:hover ul.submenu {
display: block;
}
Kita telah mengubah nilai default property display dari elemen ul.submenu menjadi none, sehingga browser tidak akan menampilkannya. kemudian kita akan membuat selector baru yaitu .menu > ul > li:hover ul.submenu yang artinya pilih ul.submenu yang terdapat dibawah li yang dihover oleh mouse. teman- teman ubah property displaynya menjadi block. Dengan demikian, ul.submenu akan ditampilkan hanya apabila parent <li> nya dihover oleh mouse.
Selanjutnya kita akan menerapkan jombotron pada website yang telah kita buat, silahkan teman- teman simak pembahasan dibawah ini.
Selanjutnya kita akan menerapkan jombotron pada website yang telah kita buat, silahkan teman- teman simak pembahasan dibawah ini.
Menambahkan Jombotron
Nah pada tahapan terakhir ini, kita akan menambahkan banner besar atau dapat kita sebut dengan jombotron, kita akan membuatnya diantara header dan konten. Silahkan teman- teman tambahkan script berikut diantara element .header dan .content:
<div class="jumbotron">
<h2>Welcome to My Homepage</h2>
<p>.......Isi Bebas.........</p>
</div>
Kemudian silahkan tambahkan pada bagian style, codenya CSS seperti berikut ini:
.jumbotron {
width: 100%;
padding: 80px 40px;
box-sizing: border-box;
text-align: center;
color: white;
background-color: #aaa;
}
Hasil dari kode diatas akan menampilkan gambar dibawah ini:
Nah sekarang kita akan menambahkan gambar kedalam jombotron tersebut silahkan teman- teman ikuti css dibawah ini:
.jumbotron {
background-color: #aaa;
background-image: url();
background-size: cover;
}
Pada property backgroud-image pada bagian url(); silahkan teman- teman pastekan link gambar yang teman- teman ingin tampilkan, untuk penyimpanannya diantara simbol (). Maka masil dari property tersebut akan seperti gambar dibawah ini:
Property background-size:cover tentunya akan membuat gambar latar ditampilkan hingga tidak ada area yang tidak tertutup oleh gambar latar.
Namun pada kombinasi warna teks serta latar berlakang seperti hasil diatas tentunya kurang bagus, karena ada area gambar yang warnanya hampir sama dengan teks, sehingga tidak jelas terbacanya. Untuk mengatasi hal tesebut ada dua cara tentunya. Pertama kita dapat mengedit terlebih dahulu gambar latarnya dengan menggunakan editor gambar sehingga gambarnya tampak lebih gelap. Solusi kedua tentunya kita dapat menambahkan layer trapsparan pada HTML. Pada bagian ini kita akan mencoba solusi kedua dengan HTML.
Silahkan tambahkan element .overlay pada bagian jombotron seperti script dibawah ini:
Namun pada kombinasi warna teks serta latar berlakang seperti hasil diatas tentunya kurang bagus, karena ada area gambar yang warnanya hampir sama dengan teks, sehingga tidak jelas terbacanya. Untuk mengatasi hal tesebut ada dua cara tentunya. Pertama kita dapat mengedit terlebih dahulu gambar latarnya dengan menggunakan editor gambar sehingga gambarnya tampak lebih gelap. Solusi kedua tentunya kita dapat menambahkan layer trapsparan pada HTML. Pada bagian ini kita akan mencoba solusi kedua dengan HTML.
Silahkan tambahkan element .overlay pada bagian jombotron seperti script dibawah ini:
<div class="jumbotron">
<div class="overlay"></div>
<h2>Welcome to My Homepage</h2>
<p>......Isi Bebas.....</p>
</div>
Pada kode diatas tentunya kita sudah menambahkan satu elemet <div> dengan nama class overlay. Pada elemen tersebut tidak memiliki konten, Kita akan menggunakannya untuk membuat semacam lapisan warna yang agak gelap dan transparan, dan kita akan memposisikannya diatas .jombotron. silahkan teman- teman tambahkan CSS seperti berikut ini:
.jumbotron {
background-size: cover;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}
Pertama- tama kita akan membuat supaya position .jombotronnya menjadi relative. Baru kita akan menyeting position .overlay menjadi absolute. Kita atur .overlay dengan warna latar hitam dan tentunya transparan dengan opacity 0.4 kita juga akan mengatur width dan height menjadi 100% dari suatu ukuran jombotronnya. Maka hasilnya akan seperti gambar dibawah ini:
Kita dapat lihat bahwa jumbotron sekarang tampak lebih gelap dari sebelumnya, tentunya karena tertutup oleh overlay. Teman- teman dapat mengganti nilai opacity agar lapisan gelapnya menjadi lebih tebal ataupun tipis. Nilai dari opacity berkisar antara 0 dan 1.
Namun jika teman- teman perhatikan, teks yang terdapat dalam jombotron juga tertutup overlay. tentunya kita juga ingin agar teks tersebut ada diatas overlay, sehingga kita lebih mudah untuk membaca tulisannya, silahkan teman- teman tambahlan script CSS dibawah ini:
Namun jika teman- teman perhatikan, teks yang terdapat dalam jombotron juga tertutup overlay. tentunya kita juga ingin agar teks tersebut ada diatas overlay, sehingga kita lebih mudah untuk membaca tulisannya, silahkan teman- teman tambahlan script CSS dibawah ini:
.jumbotron h2,
.jumbotron p {
position: relative;
}
Dengan CSS diatas, elemen h2 serta p didalam jumbotron akan naik ke layer atas dari overlay.
Langkah terakhir kita akan mengganti font dari teks yang terdapat dalam jumbotron supaya menjadi lebih indah. Silahkan teman- teaman kunjungi situs dan perhatikan gambar dibawah ini:
Tentunya maka akan muncul panel pada bagian bawah jendela. Klik panel tersebut sehingga muncul suatu keterangan kode yang harus kita salin di dalam dokument html.
Silahkan teman- teman salin kode <link href="..."> dan simpan diatas <head> sebelum <style>, Coba perhatikan script dibawh ini:
Langkah terakhir kita akan mengganti font dari teks yang terdapat dalam jumbotron supaya menjadi lebih indah. Silahkan teman- teaman kunjungi situs dan perhatikan gambar dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link href="....." rel="stylesheet">
<style type="text/css">
Langkah selanjutnya kita akan menambahkan kode font-family , misalkan kita akan menambahkannya pada bagian jombotron, coba perhatikan script dibawah ini:
.jumbotron {
font-family: 'Raleway', sans-serif;
width: 100%;
padding: 80px 40px;
box-sizing: border-box;
text-align: center;
color: white;
}
Maka hasil dari website yang kita buat akan seperti tampilan berikut ini:
Oke Semuanya telah selesai, pada gambar diatas kita dapat melihat tulisannya dengan jelas.
Mungkin sekian yang dapat admin jelaskan pada artikel kali ini, mudah- mudahan artikel ini dapat memberikan manfaat serta pengetahui bagi teman- teman yang mempelajarinya. Semoga teman- teman tidak ada kendala sedikitpun saat mengikuti tutorial ini.
Terimakasih telah berkunjung dan membaca artikel ini mengenai :Belajar HTML dan CSS Membuat Layout Halaman Tanpa Tabel, Semoga bermanfaat -- Salam success :)
By: Muhammad Rizal Supriadi
Mungkin sekian yang dapat admin jelaskan pada artikel kali ini, mudah- mudahan artikel ini dapat memberikan manfaat serta pengetahui bagi teman- teman yang mempelajarinya. Semoga teman- teman tidak ada kendala sedikitpun saat mengikuti tutorial ini.
Terimakasih telah berkunjung dan membaca artikel ini mengenai :Belajar HTML dan CSS Membuat Layout Halaman Tanpa Tabel, Semoga bermanfaat -- Salam success :)
By: Muhammad Rizal Supriadi
