A. PENDAHULUAN
- Pengertian
Hari ini saya setelah membahas simiotika, lanjut dengan pekerjaan masing masing. Pada hari ini saya melanjutkan CSSnya pada bagian materi CSS Table, CSS Display, CSS max-width, CSS Position, CSS z-index.
- Latar belakang masalah
Di karenakan saya ingin menguasai CSS, maka dari itu saya mempelajari dan mempraktikkan langkah-langkah yang ada di w3schools untuk menguasai CSS.
B. MAKSUD DAN TUJUAN
Agar memiliki Skills CSS dan tujuannya adalah Ketika sedang membuat halaman web menggunakan HTML, maka CSS inilah yang saya gunakan untuk mempercantik dan mengatur halaman HTMLnya.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
CSS Table, CSS Display, CSS max-width, CSS Position, CSS z-index.
D. TARGET DAN HASIL YANG DIDAPAT
Mengetahui dan memahami CSS Table, CSS Display, CSS max-width, CSS Position, CSS z-index.
E. METODE PELAKSANAAN
- Membaca Referensi
- Mempraktikkan
- Mengerjakan Try it Your Self
F. ALAT DAN BAHAN
- Laptop
- Koneksi intenet
- Sublime text
G. TARGET WAKTU
7 Jam
H. TAHAPAN PELAKSANAAN
- CSS Table
Table pada HTML ini juga dapat di perbaiki dipercantik dengan menggunakan CSS, kalian bisa menambahkan warna latar belakangnya, mengubah ukuran, dan memposisikannya dengan menggunakan CSS.
Contoh :
<--HTMLNYA-->
<body><h1>Mempercatik Table menggunakan CSS</h1><table id="table-css"><tr><th>Nama</th><th>Bidang</th><th>Hobi</th></tr><tr><td>Adelwin</td><td>Programmer</td><td>Membaca Buku</td></tr><tr><td>Adib</td><td>Digital Marketing</td><td>Bermain Bola</td></tr><tr><td>Valen</td><td>Multimedia</td><td>Mendengarkan Musik</td></tr></table></body>
<--CSSNYA-->
<style>#table-css {font-family: Arial, Helvetica, sans-serif;border-collapse: collapse;width: 100%;}#table-css td, #customers th {border: 1px solid #ddd;padding: 8px;}#table-css tr:nth-child(even){background-color: #f2f2f2;}#table-css tr:hover {background-color: #ddd;}#table-css th {padding-top: 12px;padding-bottom: 12px;text-align: left;background-color: #04AA6D;color: white;}</style>
Dan hasil dari codingan di atas akan menjadi seperti ini:
- CSS Display
Pengertian display jika disebuah toko, display itu artinya tata letak yang berfungsi untuk menarik perhatian pengunjung atau pembeli.
Dan ketika kalau konteks nya di CSS akan sama dengan properti display CSS mungkin sama saja yaitu untuk mengatur tata letak sebuah website.
1. Display inline
Pengertian Displau inline sendiri adalah, Mengalir kesamping, yang artinnya adalah semua konten yang diberikan display inline akan mengalir kesamping, jadi gini maksudnya.
"Jika terdapat sebuah box yang berukuran tidak terlalu lebat atau tidak memenuhi layar dan disamping layar tersebut masih ada tempat yang kosong, maka ia akan mengisi terlebih dahulu bagian kosong tersebut. Dan jika sudah full maka baru akan mengisi kebawahnya."
Pada beberapa tag HTML bawaan yang memiliki display inline contohnya, tag link, span, image, dll.
Contoh display inline:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Index</title><style>.header {text-align: center;margin: 10px auto;}#box1 {width: 100px;height: 100px;margin: 20px;padding: 10px;display: inline;text-align: center;color: white;background: #2343F3;}#box2 {margin: 20px;padding: 10px;display: inline;text-align: center;color: white;background: #FF0000;}#box3 {margin: 20px;padding: 10px;display: inline;text-align: center;color: white;background: #000000;}</style></head><body><div class="header"><h1>Display CSS</h1></div><fieldset><legend><h2>1. Display Inline</h2></legend><div><div id="box1"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div><div id="box2"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" height="100"></div><div id="box3"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" height="100"></div></div></fieldset></body></html>
ini adalah potret hasil codingan di atas :
Jika diperhatikan pada box1 kita menggunakan width dan height, pada box2 dan box3 kita tidak menggunakan width dan height.
Dan coba perhatikan, kenapa hasilnya sama? karena pada display inline width dan height tidak berpengaruh. kecuali pada img.
2. Display block
Jika inline block tadi adalah mengalir kesamping, maka display block ini adalah mengalir kebawah. Nah jadi seperti ini, sebuah konten atau di ibaratkan sebuah box yang akan mengalir kebawah, alias tidak mengalir kesamping, langsung kebawah walaupun masih ada tempat kosing di bagian samping/halaman tersebut.
Contoh display block, yaitu heading (h1), paragraf(p), <li>, <div> dan itulah beberapa contoh display block.
<html><head><meta charset="UTF-8"><title>Index</title><style>.header {text-align: center;margin: 10px auto;}#box1 {width: 100px;height: 100px;margin: 20px;padding: 10px;display: block;text-align: center;color: white;background: #2343F3;}#box2 {width: 200px;height: 100px;margin: 20px;padding: 10px;display: block;text-align: center;color: white;background: #FF0000;}#box3 {width: 150px;height: 100px;margin: 20px;padding: 10px;display: block;text-align: center;color: white;background: #000000;}</style></head><body><div class="header"><h1>Display CSS</h1></div><fieldset><legend><h2>1. Display Block</h2></legend><div><div id="box1"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div><div id="box2"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div><div id="box3"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div></div></fieldset></body></html>
ini adalah potret hasil codingan di atas :
3. Display inline-block
Untuk terakhir adalah Displau inline-block, yaitu gabungan dari inline dan block, maka hasil yang akan ditampilkan adalah mengalir dan seperti block.
<html><head><meta charset="UTF-8"><title>Inline-block</title><style>.header {text-align: center;margin: 10px auto;}#box1 {width: 100px;height: 100px;margin: 20px;padding: 10px;display: inline-block;text-align: center;color: white;background: #2343F3;}#box2 {width: 200px;height: 100px;margin: 20px;padding: 10px;display: inline-block;text-align: center;color: white;background: #FF0000;}#box3 {width: 150px;height: 100px;margin: 20px;padding: 10px;display: inline-block;text-align: center;color: white;background: #000000;}</style></head><body><div class="header"><h1>Display CSS</h1></div><fieldset><legend><h2>1. Display Inline-Block</h2></legend><div><div id="box1"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div><div id="box2"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div><div id="box3"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div></div></fieldset></body></html>
Hasilnya akan seperti ini:
- CSS max-width
Properti max-width digunakan untuk mengatur lebar maksimum elemen.
Hal ini mencegah nilai properti lebar dari menjadi lebih besar dari max-width.
Catatan : Nilai dari max-width menimpa properti lebar.
untuk syntaks nya seperti ini,
max-width: none|length|initial|inherit;
contoh :
<!DOCTYPE html><html><head><style>div.ex1 {width: 500px;margin: auto;border: 3px solid #73AD21;}div.ex2 {max-width: 500px;margin: auto;border: 3px solid #73AD21;}</style></head><body><h2>CSS Max-width</h2><div class="ex1">elemen ini menggunakan lebar: 500px;</div><br><div class="ex2">elemen ini menggunakan lebar-maksimum: 500px;</div><p><strong>Tips:</strong> Coba kalian geser browser kalian, nanti max-width ini akan menyesuaikannya</p></body></html>
Hasil :
Bedannya ketika kalian bandingkan antara width biasa dengan max-width, max-width ini ketika browsernya dikecilkan/digeser maka akan menyuaikan dengan ukurannya.
- CSS Position
Properti position menentukan jenis metode penentuan yang digunakan untuk suatu elemen (statis, relatif, tetap, absolute, atau lengket)
ini beberapa properti-properti untuk memposisikan dengan menggunakan CSS
- static- relative- fixed- absolute- sticky
Elemen kemudian diposisikan menggunakan properti atas, bawah, kiri dan kanan. Namun, properti ini tidak akan berfungsi kecuali jika position properti disetel terlebih dahulu. Mereka juga berbeda tergantung pada nilai posisi.
- Static
Position digunakan untuk mengatur element menjadi statis secara default. Element akan mengikuti posisi normal secara default. Belajar css mengenal position CSS
contoh penggunaan position static:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>CSS-Position</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.Kotak{background-color: blue;position: static;color: white;}</style></head><body><div class="Kotak">Biru</div></body></html>
Hasil :
- Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>CSS-Position</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.Kotak{background-color: blue;position: relative;color: white;}</style></head><body><div class="Kotak">Biru</div></body></html>
Hasilnya :
- Fixed
Sebuah element HTML yang di atur dengan position fixed akan memiliki sifat tetap. Tanpa ada perubahan bahka jika halaman website di scroll. Berlaku pengaturan left, bottom, top dan right pada position fixed.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>CSS-Position</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.Kotak{background-color: blue;position: fixed;color: white;}</style></head><body><div class="Kotak">Biru</div></body></html>
Hasil :
- Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan elemen lain. Position adalah salah satu properti position CSS yang sangat berguna. Salah satunya adalah untuk membuat menu dropdown dengan HTML dan CSS.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>CSS-Position</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.Kotak{background-color: blue;position: fixed;color: white;}.Kotak2 {background-color: green;position: absolute;color: white;}</style></head><body><div class="Kotak">Biru</div><div class="Kotak2">Hijau</div></body></html>
Hasil :
Kalian bisa melihat bahwa kotak yang berwarna biru menghilang karena tertimpa dengan kotak berwarna hijau.
- CSS z-index
Beberapa hal yang dalam pendukung pembuatan sebuah website selain position CSS, Tata Letak CSS, Display dan lain lain, yaitu menggunakan z-index salah satunya.
Jika kalian sebelumnya sudah menggunakan position absolute atau fixed yang sudah kita pelajari kemaren, nah hasilnya pasti akan berada di atas elemen yang tidak menggunakan postion tersebut kan, Nah disini kita menggunakan z-index untuk mengaturnya.
z-index ini berfungsi untuk mengatur tahta di dalam CSS.
Jika kalian pernah menggunakan Adobe photoshop, nah disitu kan ada layer layer gitu, jadi bisa dibilang z-index itu adalah layer disebuah webste.
<html><head><meta charset="UTF-8" /><title>z-index</title><style>div {text-align: center;}#box1 {position: absolute;width: 100px;height: 100px;margin-top: 50px;margin-left: 10px;background: #00ffab;z-index: -10;}#box11 {position: absolute;width: 100px;height: 100px;margin-top: 50px;margin-left: 200px;background: #00ffab;z-index: -10;}#box2 {position: absolute;width: 100px;height: 100px;top: 120px;left: 30px;background: #00aeff;z-index: 1;}#box22 {position: absolute;width: 100px;height: 100px;top: 120px;left: 195px;background: #00aeff;z-index: 1;}</style></head><body><div><p>Latihan Belajar CSS z-index</p></div><div><p id="box1">Kotak pertama1</p><p id="box2">Kotak kedua2</p></div><div><p id="box11">Kotak pertama1</p><p id="box22">Kotak pertama2</p></div><div><p id="box11">kotak pertama1</p><p id="box22">kotak kedua2</p></div></body></html>
Hasil :
Penjelasan singkat :
Pada kotak pertama dan kotak kedua itu berbeda pada bagian z-indexnya, kenapa? Jika nilai z-index pada kotak pertama:kedua, maka kotak pertama akan berada diatas kotak kedua dan sebaliknya.
I. REFERENSI
- w3schools
