Memahami Anatomi & Menyajikan CSS - Praktikum 5

Ilham Prabu Zaky Setiawan
XI RPL 2
Absen 15
SMKN 4 Bandung

Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan melanjutkan materi pembahasan tentang Pengenalan Dasar HTML bagian ke-empatnya, melanjutkan bagian kedua seminggu yang lalu,
Pada materi kali ini kita akan membahas berbagai tag html lagi beserta fungsi dan penggunaannya, begitupula dengan cara penulisannya.

Yang akan kita pelajari pada  materi kali ini adalah tentang penggunaan CSS dalam Web Programming, dimulai dari pengenalan hingga pengimplementasiannya. 
Dengan menggabungkan antara CSS dan HTML kita dapat senantiasa lebih leluasa untuk memasukan interface atau meng-edit semua bagian HTML tanpa mengubrak-abrik isi dari file .html nya.
Oke tanpa berlama-lama lagi mari kita lanjut ke pembahasan materinya, pertama kita mulai dahulu dengan basmalah, ayo temen-temen baca dulu. Nah kalo udah mari kita mulai dengan tahap pengenalannya terlebih dahulu.

Pengenalan hubungan CSS terhadap HTML

Setelah mempelajari cara penulisan HTML pada Tutorial Belajar HTML Dasar, langkah selanjutnya dalam mempelajari pemograman web adalah mempelajari Cascading Style Sheets atau lebih populer dengan singkatannya, yakni CSS. Dalam halaman ini, duniailkom akan mengindex seluruh Tutorial Belajar CSS Dasar untuk Pemula.
Namun jika anda belum memahami HTML, saya sarankan untuk mempelajarinya terlebih dahulu, karena untuk mendalami CSS, memerlukan sedikit pengetahuan tentang HTML.
HTML dan CSS adalah bagian tak terpisahkan dari website modern saat ini. HTML digunakan untuk membuat konten atau kerangka logis dari halaman web, sedangkan CSS digunakan untuk mengatur tampilan dari website, seperti warna dan font yang digunakan.

Tutorial Belajar CSS : CSS Dasar

Bagian pertama tutorial belajar CSS ditujukan untuk anda yang baru mengenal CSS, atau programmer pemula. Kita akan mempelajari dan mengetahui apa itu CSS, bagaimana cara menggunakan CSS, bagaimana cara memasukkan kode CSS, aturan serta tata cara penulisan CSS, dan kita juga akan membahas inti dari CSS, yakni SelectorProperty dan Value.
Diharapkan dari beberapa tutorial pada bagian ini, anda sedikit banyak akan memiliki pemahaman cara penulisan CSS.

Pengertian CSS

Dalam bahasa bakunya, seperti di kutip dari wikipediaCSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.


Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:


Contoh Pengimplementasian CSS 

Inline CSS

Inline, berarti pemakaian CSS didalam tag HTML, jadi Inline ini merupakan tahap pengimplementasian sederhana dari CSS karena penempatan attribut style dihadapkan pada tag HTML-nya.

<!DOCTYPE html> <html lang="en"> <head> <title>Ilham Prabu Zaky S - XI RPL 2 - Inline pada CSS</title> </head> <body style="background-image: url(../IMG/white.jpg);"> <p align="center" style="color: whitesmoke; font-family: Arial, Helvetica, sans-serif; font-size: 55px; text-shadow: -18px 5px 5px thistle; background-image: url(../IMG/white.jpg);">Hello Warudo, ini adalah contoh penggunaan inline ! <br><br> Dan ini masih dalam tag paragraph yang sama > /// < </p> <p align="center" style="color: snow; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 33px;background-color: bisque;"> Dan ini paragraph lanjutannya <br> </p> </body> </html>

saat open in browser: 


Embedded CSS

Nah, Embedded CSS jadi penempatan CSS ini diletakan pada sebuah tag bernama <style>.
Tidak seperti Inline penggunaan metode ini lebih efisien dan efektif agar penulisan code lebih terlihat bersih dan tidak semrawut.

<!DOCTYPE html> <html lang="en"> <head> <title>Ilham Prabu Zaky S - XI RPL 2 - Embedded</title> </head> <style type="text/css"> #Bubblegum { height: 28%; background-color: mistyrose; border: solid; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; box-align: center; cursor: crosshair; } #Lemonade { background-color: lemonchiffon; border: dashed; font-family: 'Courier New', Courier, monospace; } #Mint { height: 28%; background-color: azure; border: hidden; font-family: Verdana, Geneva, Tahoma, sans-serif; } .kotak { text-shadow: 5px 5px 5px silver; text-align: center; font-size: 66pt; color: sandybrown; } input#tombol { color: aqua; background: salmon; border: 2px dotted dodgerblue; font-size: 14px; font: bold; } .username { color: blue; background: aqua; size: 12px; } input#tombol:hover{ color: yellow; background: black; } </style> <body> <div id="Bubblegum" class="kotak"> Bismillah </div> <div id="Lemonade"> <form name="LOGIN"> <table align="center"> <tr> <td><label for="username" class="username">Username</label></td> <td><input type="text"></input></td> </tr> <tr> <td><label for="password">Password</label></td> <td><input type="password"></input></td> </tr> <tr> <td colspan="2" align="center" ><input id="tombol" type="submit" value="Login"></input></td> </tr> </table> </form> <div id="Mint" class="kotak"> Tetap Semangat</div> </div> </body> </html>

saat open in browser: 



Embedded Align CSS

<!DOCTYPE html> <html lang="en"> <head> <title>Ilham Prabu Zaky S - XI RPL 2 - Embedded Align</title> </head> <style> h1 { height: 44px; color: coral; } body,p { color: #b2d9ea; background-color: teal; font-family: Imprima, arial; } p { text-indent: 5cm; text-align: justify; } p.besar { text-transform: uppercase; } p.kecil { text-transform: lowercase; } p.kapital { text-transform: capitalize; } p.ex { color: rgb(255, 220, 244); } p.ex::first-line{ color: rgb(0, 255, 0); } </style> <body> <h1>Selamat datang di XI RPL! ini adalah tulisan pada tag h1</h1> <p>ini adalah ordinary paragraph dengan warna biru pastel, default text-color nya adalah coral</p> <p class="ex">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et reprehenderit necessitatibus sed alias minima veritatis modi, corrupti quasi, hic, dolore quae pariatur laborum provident totam eligendi neque deleniti vitae at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius inventore accusamus explicabo ipsa, illo culpa dolorem nihil numquam aliquid consequuntur suscipit, itaque, laudantium libero magnam accusantium nostrum sapiente error sed! </p> <p class="besar">pengubahan huruf dalam teks menjadi besar (KAPITAL)</p> <p class="kecil">pengubahan huruf dalam teks menjadi kecil (KECIL)</p> <p>huruf kapital pada setiap awal kata</p> </body> </html>

saat open in browser: 


Extern CSS

Extern, dari kata "Extern" nya saja sudah tertebak, yap Extern merupakan penggunaan CSS dengan meletakan attribut-attribut CSS disebuah file baru diluar file.html-nya. Jadi disini kita buat file baru contoh: style.css, setelah itu nah bisa tuh kalian isi atribut-atribut di dalamnya, untuk menghubungkannya yaitu dengan menggunakan tag <linkdan arahkan ke directory tempat menyimpan file CSS-nya.

Extern, dari kata "Extern" nya saja sudah tertebak, yap Extern merupakan penggunaan CSS dengan meletakan attribut-attribut CSS disebuah file baru diluar file.html-nya. Jadi disini kita buat file baru contoh: style.css, setelah itu nah bisa tuh kalian isi atribut-atribut di dalamnya, untuk menghubungkannya yaitu dengan menggunakan tag <link> dan arahkan ke directory tempat menyimpan file CSS-nya.



Extern Text Decoration CSS

code HTML-nya: 

<!DOCTYPE html> <html lang="en"> <head> <title>Ilham Prabu Zaky S - XI RPL 2 - External CSS, Format Paragraph & Text Decoration</title> <link rel="icon" href="../IMG/HTML5.ico"> <link rel="stylesheet" href="Ext1.css"> </head> <body> <p>Pengaturan Spasi pada huruf</p> <h4> ini adalaj Header 4</h4> <em>Bentuk dari overline</em> <h2>pada h2 ini line through</h2> <h3>ini h3, ini garis bawah</h3> <p><a href="http:/instagram.com">aku adalah href link tanpa warna biru dan underline</a></p> <p class="duasenti">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil itaque optio, magnam, qui fuga iure cum quidem non dolores tempora ab eveniet? Illo, ex dolorum. Officia quisquam totam tenetur.</p> <p class="limapiksel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, excepturi asperiores dolore amet, quibusdam mollitia qui aspernatur porro, autem expedita hic earum suscipit. Molestias, labore! Quod hic laborum placeat impedit!</p> </body> </html>

code CSS-nya: 

h2 { text-decoration: line-through; } h3 { text-decoration: underline; } h4 { letter-spacing: -1px; color: coral; } p { color: darkseagreen; } em { letter-spacing: 0.5cm; text-decoration: overline; color: salmon; } a { text-decoration: none; color: dodgerblue; } p.duasenti { word-spacing: 2cm; } p.limapiksel { word-spacing: 5px; } body { background-image: url(../IMG/white.jpg); } p, h4, em, h2, h3, a { text-indent: 2cm; background-color: bisque; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

saat open in browser: 



Extern Image CSS

code HTML-nya: 

<!DOCTYPE html> <html lang="en"> <head> <title>Ilham Prabu Zaky S - XI RPL 2 - Extern Image</title> <link rel="stylesheet" href="ExtImage.css"> </head> <body> <div id="atas"> <h1>Penempatan Gambar pada CSS</h1> </div> <img src="../IMG/anak-hijau-GANTENG.jpg" alt="anak-hijau-GANTENG" id="P_Photo"> <div id="profil">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti ratione eveniet laborum in magni itaque voluptas labore tempora quis, odit dolor nam voluptates possimus quia veniam est libero, numquam cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nobis necessitatibus facere quasi doloremque voluptate ex aperiam quisquam ea, velit pariatur. Libero dolores autem, nostrum maxime ducimus minus laborum eveniet!</div> </body> </html>

code CSS-nya:  
#atas { background-image: url(../IMG/headerbackground\ car.jpg); height: 300px; width: 900px; position: relative; display: block; margin-top: -10; text-align: center; margin-left: auto; margin-right: auto; } h1 { font-family: stabillo; padding-top: 40px; font-size: 40pt; text-shadow: -5px -5px 5px lavender; color: rosybrown; } img#P_Photo { margin-top: 10px; margin-left: 200px; float: left; clear: both; position: relative; border-radius: 5%; color: dodgerblue; border-style: dotted; } #Profil { width: 400px; height: 500px; margin-top: 10px; margin-left: 480px; margin-right: 200px; padding-left: 12px; display: block; font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: thistle; opacity: 0.7; } body { background-image: url(../IMG/background\ -\ white\ pattern.jpg); }
saat open in browser: 


Extern Table CSS

code HTML-nya: 

<!DOCTYPE html> <html lang="en"> <head> <title>Ilham Prabu Zaky S - XI RPL 2 - Extern Table</title>
<link rel="stylesheet" href="ExtTable.css"> </head> <body> <table> <tr> <th>First Name</th> <th>Family Name</th> <th>Country</th> </tr> <tr> <td>Ariana</td> <td>Grande</td> <td>America</td> </tr> <tr> <td>Taylor</td> <td>Swift</td> <td>America</td> </tr> <tr> <td>Lorde</td> <td>Ajah</td> <td>New Zealand</td> </tr> </table> </body> </html>

code CSS-nya: 
table, td, th { border: 1px solid salmon; border-top: 2px solid Red; border-right: 2px groove yellow; border-left: 2px dashed green; border-bottom: 2px dotted black; } td { background-color: lawngreen; color: snow; text-align: right; height: 30px; vertical-align: middle; padding-right: 10px; } th { background-color: khaki; color: blueviolet; text-align: right; height: 50px; vertical-align: bottom; padding: 15px; } body { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }

saat open in browser: 




Nah, jadi akhirnya jadi juga nih Halaman Web  dengan element multimedianya teman-teman !, kita telah berhasil menyelesaikannya, kalian juga bisa langsung membuatnya dengan tag-tag yang telah kita pelajari tadi sama-sama, dan untuk tag dan attribut lainnya bisa anda cari di w3schools tempat saya belajar bermacam-macam tag,  untuk link nya silahkan klik disini.

Alhamdulillah telah selesai tugas dan pembahasan kali ini, semoga dapat dimengerti dan dipahami, mohon maaf sebesar-besarnya atas segala kesalahan yang telah saya buat, dan saya ucapkan terimakasih atas kunjungannya.




Wassalamualaikum wr.wb

0 Response to "Memahami Anatomi & Menyajikan CSS - Praktikum 5 "

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel