Dasar - Dasar CSS (Pertemuan 9)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Materi kita kali ini adalah CSS. Kalian dapat mencari pengertian CSS di google, materi kita kali ini pasti lebih menarik karena kita dapat meng-edit tampilan website kita sesuka hati kita dengan menggunakan CSS. Langsung saja kita mulai pembahasan kita.

1. In Line CSS
In Line CSS berarti kita menggunakan tag CSS didalam tulisan yang kita buat, CSS ini dimasukan didalam tag tulisan yang kita buat. Kali ini saya menggunakan text-shadow untuk membuat bayangan pada teks yang kita buat. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - In Line Css </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<p align = "center" style = "color: Teal; font-family : Impact;
     font-size : 24px; text-shadow : 12px 2px 5px fuchsia; " >
Hello World, Ini adalah contoh penggunaan In Line!
    </p>
</body>
</html>

Bisa dilihat dalam codingan diatas, yang termasuk CSS adalah attribute didalam style. Untuk hasilnya kalian dapat melihat gambar dibawah ini :

2. Embedded CSS
Embedded CSS berarti kita memasukan tag CSS didalam 1 file yang sama dengan HTML, namun tata letak codingannya berbeda. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Contoh Embedded, Selector Class dan ID</title>
  <style type = "text/css" >
   #BhsIndo{
    background-color : ghost;
    border : solid;
    padding : 5px;
    font-family : Comic Sans MS;
   }
   .kotak{
    text-shadow : 5px 5px 5px yellow;
   }
   #BasaSunda{
    background-color : Salmon;
    border : dashed;
    padding : 5px;
    font-family : Comic Sans MS;
   }
   #English{
    background-color : GoldenRod;
    border : double;
    padding : 3px;
    font-family : Impact;
   }
  </style>
 </head>
 <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<div id = "BhsIndo" class = "kotak" >
 Selamat Pagi! </div>
<div id = "BasaSunda" >
 Wilujeng Enjing! </div>
<div id = "English" class = "kotak" >
 Good Morning! </div>
</body>
</html>

Tag CSS diatas dimulai dari style yang diletakan setelah tag Head pada html, CSS digunakan untuk memudahkan dalam peng-modifikasi an website, kita dapat memanggil data dari HTML untuk dimodifikasi dengan CSS. Penggunaan (#) berarti memanggil data tipe class, penggunaan (.) berarti memanggil data tipe id. Untuk hasil nya kalian dapat melihat gambar dibawah ini :

Selain contoh diatas, saya juga memiliki contoh lain untuk penggunaan Embedded CSS ini, contoh yang kedua saya menggunakan tag form pada materi kita sebelum nya kemudian di kombinasikan dengan CSS. Kalian dapat melihat codingan dibawah ini untuk lebih jelasnya :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Embedded CSS / Internal</title>
  <style type = "text/css" >
   input#tombol{
   color : Aqua;
   background : Salmon;
   border : 2px outset #bbd16d;
   font-size : 14px;
   font : bold;
   }
   .username{
   color : blue;
   background : Aqua;
   size : 12px;
   }
  </style>
 </head>
 <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<p>
<form name = "Login" >
  <label for = "Username" class = "Username" > Username </label>
  </p>
<p>
<label for = "Password" > Password </label>
  <input type = "Password" > </input>
  </p>
<p>
<input id = "Tombol" type = "Submit" value = "Login" > </input>
  </p>
</form>
</body>
</html>

Kita dapat mengatur berbagai macam style yang dapat disesuaikan dengan selera kita masing-masing, kalian dapat mencari tag-tag untuk CSS lebih lengkap di google. Hasilnya dapat dilihat dalam gambar dibawah ini :

Contoh selanjutnya adalah pengaturan heading, apabila kita mempunyai paragraf yang pengaturan style nya disamakan dengan paragraf lain, kalian hanya permu menggunakan (,) didalam codngan CSS teks tersebut. Kalian dapat mengatur color dengan penggunakan format RGB,Hexadesimal maupun code color. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Embed CSS Macam-Macam Heading </title>
  <style type = "text/css" >
   body,p{
    color : fuchsis;
    }
   h1{
    color : coral;
    }
   p.ex{
    color:rgb(0,0,225);
    }
  </style>
 </head>
 <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<h1>
 Ini adalah heading 1 </h1>
<p>
Ini adalah paragraph, ditulis dengan warna fuchsis.
  Default text-color didefinisikan pada body selector. </p>
<p class = "ex" >
Ini adalah paragraph with class "ex". Dan warna teks biru. </p>
</body>
</html>

Sebenarnya tidak jauh berbeda dengan menggunakan HTML, tetapi CSS akan memudahkan dalam proses peng-editan style teks yang akan diubah. Hasilnya kalian dapat melihat gambar dibawah ini :

Kita juga dapat mengatur Align sebuah teks menggunakan format CSS, kita juga dapat mengatur besar kecil nya sebuah karakter yang terdapat dalam teks secara otomatis, sebagai contoh kita dapat mengatur huruf kapital secara otomatis yang berarti apabila kita lupa menggunakan huruf kapital pada awal kalimat dengan menggunakan tag didalam CSS akan diatur secara otomatis. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Format Text </title>
   <style type="text/css">
     p.baris1 { text-indent: 2cm;
      text-align: justify;
      }
     p#kanan {text-align: right; color:Chocolate;}
     p.besar {text-transform: uppercase;}
     p.kecil {text-transform: lowercase;}
     p.kapital {text-transform: capitalize;}
   </style>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
   
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<p class = "baris1" >
Dengan text Indent Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna,
    untuk selanjutnya masukan dari pengguna tersebut diolah menggukanakan bahasa pemrograman web, 
    baik secara server side scripting(misalkan PHP, JSP)ataupun client-side scripting(javascript). 
    </p>
<p id="kanan" >
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, 
    untuk selanjutnya masukan dari pengguna tersebut diolah menggukanakan bahasa pemrograman web, 
    baik secara server side scripting(misalkan PHP, JSP)ataupun client-side
    </p>
<p class="besar" >
pengubahan menjadi huruf Besar(Kapital)</p>
<p class="kecil" >
PENGGUNAAN MENJADI HURUF KECIL</p>
<p class="kapital" >
huruf kapital pada setiap awal kata</p>
</body>
</html>

Contoh diatas terdapat berbagai macam kesalah penulisan, namun kita menggunakan tag text-transform untuk mengatur nya secara otomatis, misalnya uppercase untuk menggunakan huruf kapital pada setiap katanya, dan sebagainya. Jika kalian bingung, kalian dapat melihat gambar dibawah ini untuk lebih jelasnya :

3. External CSS
External CSS berarti kita membuat file HTML dan CSS didalam folder yang berbeda, tentu saja kita harus memanggil file CSS didalam codingan HTML dengan menggunakan tag link. Pastikan tempat penyimpanan dan nama file CSS sama dengan yang kita panggil dalam HTML. Untuk lebih jelas kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - External CSS</title>
   <link href = "CSS/styleexternal.css" rel = "stylesheet" type = "text/css">
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<div id = "BhsIndo" class = "kotak" >
 Selamat Siang! </div>
<div id = "Japanese" class = "kotak" >
 Konnichiwa</div>
<div id = "English" >
 Good Afternoon! </div>
</body>
</html>

CSS :

.kotak{
 border : solid;
 padding : 5px;
}
#BhsIndo{
 width : 400px;
 height : 100px;
 float : left;
 background-color : papayaWhip;
 font-family : Impact;
}
#Japanese{
 width : 400px;
 height : 100px;
 float : left;
 background-color : Thistle;
 font-family : Arial;
}
#English{
 width : 400px;
 height : 100px;
 float : left;
 background-color : lightcyan;
 font-family : Comic Sans MS;
}

Tidak jauh berbeda bukan dengan contoh pada penggunaan Embedded CSS? Jika kita menggunakan External CSS ini, keuntungan nya dapat memudahkan kita dalam proses editing. Hasilnya kalian dapat melihat gambar dibawah ini :

Kali ini saya menggunakan saya memperbesar height dan width dari kotak tersebut, sehingga tampak berbeda dari contoh padad Embedded CSS. Kita juga dapat mengatur spasi tiap kata menggunakan CSS, sehingga dapat memperjelas bacaan sebuah teks yang kita buat. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI-RPL 3 - Ext CSS, Format Paragraf </title>
   <link href = "CSS/ExtFormatKarakter.css" rel = "stylesheet" type = "text/css" >
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<p class = " baris1 " >
Pengaturan Spasi pada huruf </p>
<h4>
 Ini adalah Header 4 </h4>
</body>
</html>

CSS :

p.baris1{
 letter-spacing : 0.5cm;
 color : Chocolate;
}
h4{
 letter-spacing : -2px;
 color : coral;
}

Seperti biasa, kita memanggil tag p.baris1 dalam HTML didalam CSS untuk mengubah style dari teks tersebut. Untuk lebih jelasnya kalian dapat melihat gambar dibawah ini :

Kita juga dapat mengubah warna dari link yang telah kita click dengan warna sesuai keinginan kita, mengatur bentuk huruf dan lain-lain. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI RPL 3 - Text Decoration Pada CSS </title>
   <link href = "CSS/ExtTextDecoAndSpacing.css" rel = "stylesheet" type = "text/css" >
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <em> Bentuk Overline </em>
    <h2>
 Pada h2 ini Line Throught </h2>
<h3>
 Ini h3, ini garis bawah </h3>
<p>
<a href = "http://twitter.com" > Klik disini, sekarang tanpa warna biru dan garis bawah :) </a> </p>
<p class = "duasenti" >
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.
   Berikut ini adalah contoh penerapan dari style tersebut : Bila listing kode diatas dijalankan
   akan menghasilkan tampilan seperti berikut
   </p>
<p class = "limapiksel" >
CSS didefinisikan secara terpisah pada file yang berbeda. Dan
   selanjutnya file / halaman web yang ingin menerapkan style pada file CSS tersebut
   tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi
   berbasis web sehingga tampilan antar halaman akan terlihat konsisten
   </p>
</body>
</html>

\CSS :

em{
 text-decoration: overline;
 color: Salmon;
}
h2{
 text-decoration: line-through;
}
h3{
 text-decoration: underline;
}
a{
 text-decoration: none;
 color: LawnGreen;
}
p.duasenti{
 word-spacing: 2cm;
}
p.limapiksel{
 word-spacing: 5px;
}

tag text-decoration digunakan untuk mengatur dekorasi pada teks, seperti underline, overline, line through, italic, bold dan lain sebagainya. Untuk hasilnya kalian dapat melihat gambar dibawah ini :

Yang terakhir saya akan membuat sebuah Artikel mengenai Dota 2 dengan menggunakan tag-tag yang telah dijelaskan diatas. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Format Text </title>
  <link href = "CSS/Nugas.css" rel = "stylesheet" type = "text/css" >
 </head>
   <body id = "Background">
    <p class = "Copyright">
<i>Salman Fauzan Fahri Aulia XI-RPL 3</i>
    </p>
<p class = "Judul" >
Rumor The International 2018 akan Digelar di Canada :
    </p>
<p class = "p1" >
Semakin dekat dengan event tahunan Dota 2 yaitu The International, Valve akhirnya
     merilis waktu dan tempat untuk The International 2018.
    </p>
<p class = "p2" >
Lewat blog mereka di <a href = "http://blog.dota.com">blog.dota.com</a>, sebuah postingan tentang
     detail acara dan pembelian tiket resmi dirilis. Uniknya, kembali rumor menjadi kenyataan
     dimana The International 2018 akan mengambil tempat di Canada. Tepatnya di Rogers Arena di Kota Vancouver
     <br><image  src = "Media/Arena.jpg" align = "center" height = "60%"></br>
    </p>
<p class = "p3">
Untuk waktu penyelenggaraannya sendiri adalah dari 20-25Agustus 2018.
     Sama seperti event The International sebelum-sebelumnya, event ini kembali digelar pada bulan Agustus.
    </p>
<p class = "p4">
<br><image src = "Media/Battle Pass.png" align = "center" height = "70%"></br>
     Sedangkan penjualan tiket, akan dimulai pada Jumat depan, 23 Maret 2018 di <a href = "http://Ticketmaster.ca.">Ticketmaste.ca</a>
     Dijual dengan 2 tipe tiket Midweek dan Final Tikets, tentunya hal ini akan menghemat uang bagi mereka yang ingin menyaksikan 
     tournament hanya di 2 hari terakhir. Karena Midweek Tiket ditawarkan dengan harga $125 Canada dengan jatah 3 hari pertama, dan 
     Finals Tiket seharga $250 Canada untuk 2 hari terakhir.
    </p>
</body>
</html>

CSS :

#Background{
font-family : Comic Sans MS;
font-size : 12pt;
background-color : Salmon;     }
p.Copyright {text-align : ight; color : Aquamarine; font-family : impact; }
p.Judul {text-align : center; color : Chocolate; font-size : 20pt;}
p.p1,p.p2,p.p3,p.p4 {text-align : center; color : Brown; word-spacing : 3pt;}
a { text-decoration: none; color: brown; }

Jika kalian memiliki pengaturan teks yang sama, kalian hanya tinggal menambahkan pemanggilan nama teks yang akan disamakan pengaturan style nya. Hasilnya kalian dapat melihat gambar dibawah ini :

Sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalahan pada penyampaian maupun pengetikan. See you Next!

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Dasar - Dasar CSS (Pertemuan 9)

Komentar

Posting Komentar