A. PENDAHULUAN
- Pengertian
- Latar belakang masalah
B. MAKSUD DAN TUJUAN
Maksud dari kegiatan ini adalah Menambahkan ikon pada halaman web dan mempercantik tampilan list serta link, dan tujuan dari kegiatan ini adalah dapat menambahkan ikon pada web serta mempercantik tampilan link dan list.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Menambahkan ikon
- Mempercantik list
- Mempercanti link
D. TARGET DAN HASIL YANG DIHARAPKAN
Bisa menambahkan ikon dan mempercantik tampilan link dan list pada halaman website.
E. METODE PELAKSANAAN
- Membaca referensi
- Ngoding
F. ALAT DAN BAHAN
- Laptop
- Koneksi intenet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
- Cara menambahkan ikon pada CSS
Kalian login terlebih dahulu di https://fontawesome.com
ketika sudah login anda akan menambahkan untuk nantinya ditambahkan di halaman HTML anda :
<script src="https://kit.fontawesome.com/cd7445c9dd.js" crossorigin="anonymous"></script>
Nahh kalian bisa mencari ikon yang anda butuhkan di web tersebut, untuk cara memanggilnya kalian bisa klik ikon yang anda pilih, dan nanti akan ada code HTMLnya, kalian bisa salin code tersebut untuk memanggil ikonnya.
<i class="format ikonnya"></i>
contoh : ikon whatsapp
<i class="fa-brands fa-whatsapp"></i>
nanti akan muncul seperti ini :
- Memvariasi link dengan CSS
link pada halaman html pun bisa untuk dipercantik menggunakan CSS. sebagai contoh ini adalah hyperlink biasa tanpa menggunakan CSS
Dan kalian ketika menambahkan code css seperti ini :
a {
background-color: tomato;
}
maka akan ada warna latar belakangnya seperti gambar di bawah ini :
Agar bisa berubah warna ketika di klik kalian bisa menambahkan kode seperti ini:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
maka hasilnya akan seperti ini, kalian bisa mengarahkan crushor kalian ke hyperlinknya maka latar belakang warnanya yang tadinya putih akan menjadi hijau :
- CSS list
List ini ketika akan keren ketika di percantik menggunakan CSS, contohnya ini adalah biasa :
ini adalah potret list html saja menggunakan CSS
Jika kalian ingin mempercantik list tersebut dengan CSS, ikuti code saya ini :
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<h1>Mempercantik list dengan CSS</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Hasil codingan di atas akan seperti ini :
