Belajar HTML #part 16 | Show My Skill in Programming
Halo kembali bersama gua Syahrul R. Yang terganz terkece terterrr terlalu berharap :v
Udah begitu lama yak, gua gak nongol :v di Karenakan kemaren ada kendala dari domain, jadi kagak bisa di akses mank.
Tapi sekarang udah jadi ea budjank :).
Oke lah curhatnya udah dulu, sekarang kita langsung ke materinya.
Apa materinya mank?
Materi sekarang adalah Show My Skill Programming.
Waduh gua udah kek orang bule ea :v, kalo Bahasa +62.nya adalah Menampilkan Skill/keahlianku Dalam Pemrograman.
Begitulah kurang lebihnya Kata mbah gugle :v
Oke langsung saja, cekidottt..
Untuk menampilkan daftarnya kita coba bermain tag <div>, <ul> dan <li> ea mank.
Contoh struktur:
<div class="section">
<h1><span>My Skill</span></h1>
<ul>
<li></li>
</ul>
</div>
Nah itu contoh strukturnya mank, sekarang kita coba coding pake struktur tadi dan gua akan memasukan beberapa daftar...Cekidottt..
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<div class="section">
<h1><span>My Skill</span></h1>
<ul>
<li>HTML</li>
<li>C++</li>
<li>Python</li>
<li>PHP</li>
</ul>
</div>
</body>
</html>
Dan hasilnya akan seperti ini mank
Mank kalo kita tambahin ukuran/statistik untuk skillnya bisa gak mank?
Ohh tentu bisa dong, oke kita sekarang coba tambahin statistiknya mank.. Cekidottt
Untuk menambahkan statistik kita coba pake
<progress min="minimal" max="maximal" value="ukuran statistik"></progress>
Nah sebelum membuat gua jelasin dulu arti kodenya.
- min = untuk minimal/paling rendah
- max = untuk maximal/paling tinggi
- value = untuk ukuran statistik yang akan di tampilkan
Oke kita sekarang buat statistiknya.. Cekidottt..
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<div class="section">
<h1><span>My Skill</span></h1>
<ul>
<li>HTML<br />
<progress min="0" max="100" value="80"></progress></li>
<li>C++<br />
<progress min="0" max="100" value="75"</progress></li>
<li>Python<br />
<progress min="0" max="100" value="50"</progress></li>
<li>PHP<br />
<progress min="0" max="100" value="50"</progress></li>
</ul>
</div>
</body>
</html>
Nah maka hasilnya akan seperti ini mank
Nah untuk pengertian kode yg lain udah pernah gua bahas di materi sebelumnya ea mank. Cek ajah di blog gua.
Oke Menurut gua sekian Materi kali ini
See you Next Time :)
Wassalamu'alaikum wr.wb
0 Response to "Belajar HTML #part 16 | Show My Skill in Programming"
একটি মন্তব্য পোস্ট করুন