Pemrograman Web

Assalamualaikum wr.wb
Pada kesempatan kali ini kita akan membahas mengenai CSS yang kepanjanganya adalah Cascading Style Sheet.

Biar lebih mudah kita singkat aja jadi CSS
Jadi, CSS ini adalah dokumen yang fungsinya untuk mengatur Tampilan / Gaya dari Halaman Web kita.

Terus bedanya HTML dengan CSS apa?

Kalau HTML itu hanya kerangka intinya saja, sementara CSS itu fungsinya adalah untuk menghias tamplian kerangka HTML barusan.

Anatomi CSS

Dalam CSS ada 3 bagian dalam penulisanya, diantaranya:

1. Selector
    Selector adalah bagian awal dalam penulisan CSS, contohnya : Body, h1, h2, p, form

2. Property
    Property adalah bagian yang dipakai untuk mengatur Penampilan Selector, mirip seperti Attribut di
    dalam HTML, contohnya: color, font-family, font-spacing, background-position

3. Value
    Value adalah nilai dari Property, misalnya: Red (untuk Color), Arial (Untuk Font-Family), 16
    (untuk Font-Spacing), dan 8px (untuk Background position)

Pengcodingan CSS

Ada 3 Cara yang digunakan dalam pengcodingan CSS, diantaranya:
1. Inline :
Koding dengan memasukan perintah CSS dalam Tag HTML

2. Embedded:
Koding dengan memasukan perintah CSS dalam File HTML

3. External:
Koding dengan perintah CSS yang disimpan dalam File CSS (Beda File)

Selain itu, untuk memulai CSS perlu dimulai dengan mengetikan "style" (Tanpa tanda kutip)

Dan beberapa Properties nya bisa dilihat disini:

Sekarang, mari kita coba menggunakanya, Pertama coba Koding secara Inline

Kodingan bisa dilihat disini : Inline CSS

Itu adalah salah satu contoh penggunaan CSS dengan metode Inline. Bisa kita lihat sendiri bahwa Property dari CSS disimpan didalam perintah "style".

Selanjutnya, mari kita coba membuat CSS dengan metode Embedded.
Dalam metode Embedded kita harus membuat Tag style dulu yang umumnya diletakan di bagian Header di dalamnya ada berbagai macam Id dan Class.

Apa itu Id?
Id itu Selector yang isinya sekumpulan Property

Terus kalau Class?
Class itu Selector yang isinya sekumpulan Property juga

Lah terus bedanya apa?
Bedanya? Kita cuma bisa menggunakan 1 Id sekali sementara Class bisa digunakan beberapa kali

Contohya CSS Embedded adalah seperti ini:

Kodingan bisa dilihat disini: CSS with Id

Kodingan bisa dilihat disini: CSS with Id2

Kita juga bisa mengubah Besar / Kecilnya (Indent) huruf dengan menggunakan CSS, misalnya seperti ini:

Kodingan bisa dilihat disini: Embedded Indent

Selain itu, Kita juga bisa menggunakan Selector tanpa memasukanya lagi kedalam Tag di dalam Body dengan cara mendefinisikanya dalam CSS. begini contohnya

Kodingan bisa dilihat disini: Embedded Head

Kita juga bisa membuat Kodingan CSS secara External, untuk melakukanya kita harus membuat File CSS yang terpisah dari File HTMLnya. Keutungan dari Metode ini adalah File CSSnya bisa digunakan berkali kali. begini contoh penggunaanya

Begini Kodinganya:

- HTMLnya

<html>
<head><title>External CSS</title>
<link href="Bahasa.css" rel=stylesheet type=text/css>
</head>
<body>
<div id=Indo class=kotak>Nama saya Yasfa</div>
<div id=Jepun class=kotak>Ore no namae wa Yasfa</div>
<div id=Inggris>My Name is Yasfa</div>
</html>

- CSSnya

 #Indo{
  width:400px;
   height:30px;
  float:left;
  background-color:papayaWhip;
  font-family: Consolas;
             }

 .kotak{
  border: solid;
  padding: 5px; }


 #Inggris{
  width:400px;
   height:30px;
  float:left;
  background-color:Lightcyan;
  font-family: Arial;
  }



 #Jepun{
  width:400px;
   height:30px;
  float:left;
  background-color:Thistle;
  font-family: Impact;
  }

Kalau kita buka Explorer begini susunan Filenya:

Seperti yang kita lihat di Kodingan HTMLnya, kita harus menggunakan Tag Link untuk menghubungkan File HTML dengan CSS.

Sama seperti Embedded, Kita juga bisa menggunakan Selector tanpa memasukanya lagi kedalam Tag di dalam Body, disini kita akan menggunakanya untuk mengatur Spacing atau jarak Spasi. begini contohnya

Begini Kodinganya:
-HTMLnya

<html>
<head><title>Ext CSS, Format Paragraf</title>
<link href="ExtCharSpacing.css" rel="stylesheet" type="text/css">
</head>

<body>
<p>Pengaturan Spasi pada Huruf</p>
<h4> ini adalah header 4 </h4>
</body>
</html>

- CSSnya

p { letter-spacing: 0.5cm;
    color: DarkSeaGreen;}

h4 {letter-spacing: -2px;
    color: Coral;}

Kita juga bisa mendekorasi Text mengunakan CSS begini contohnya:

Kodinganya:
-HTMLnya

<html>
<head><title>Text Decoration pada CSS</title>
<link href="ExtTextDecoAndSpacing.css" rel="stylesheet" type="text/css"></head>
<body>
<em>Bentuk Overline</em>
<h2> pada h2, ini line Through</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 atau halaman Web yang ingin menerapkan style pada file CSS tersebut
tinggal memanggil File CSS tersebut. Cara ini umunya digunakan pada satu aplikasi
berbasis Web sehingga tampilan antar halaman akan terlihat Konsisten</p>
</body>
</html>

-CSSnya

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;}

Selanjutnya kita bisa berlatih dengan membuat Halaman Web dengan CSS sebagai Styling Utama. Buatan saya seperti ini:

Kodinganya:
-HTML:

<html>
<head>
<title>Malin Kundang</title>
<link href="ExtMalinKundang.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Malin Kundang</h1><br>
<img src=malin.jpg>
<p class=paragraf1>Pada zaman dahulu di sebuah perkampungan nelayan Pantai Air Manis di daerah Padang, Sumatera Barat hiduplah seorang janda bernama Mande Rubayah bersama seorang anak laki-lakinya yang bernama Malin Kundang. Mande Rubayah amat menyayangi dan memanjakan Malin Kundang. Malin adalah seorang anak yang rajin dan penurut.

Mande Rubayah sudah tua, ia hanya mampu bekerja sebagai penjual kue untuk mencupi kebutuhan ia dan anak tunggalnya. Suatu hari, Malin jatuh-sakit. Sakit yang amat keras, nyawanya hampir melayang namun akhirnya ia dapat diseiamatkan-berkat usaha keras ibunya. Setelah sembuh dari sakitnya ia semakin disayang. Mereka adalah ibu dan anak yang saling menyayangi. Kini, Malin sudah dewasa ia meminta izin kepada ibunya untuk pergi merantau ke kota, karena saat itu sedang ada kapal besar merapat di Pantai Air Manis.

"Jangan Malin, ibu takut terjadi sesuatu denganmu di tanah rantau sana. Menetaplah saja di sini, temani ibu," ucap ibunya sedih setelah mendengar keinginan Malin yang ingin merantau.

"Ibu tenanglah, tidak akan terjadi apa-apa denganku," kata Malin sambil menggenggam tangan ibunya. "Ini kesempatan Bu, kerena belum tentu setahun sekali ada kapal besar merapat di pantai ini. Aku ingin mengubah nasib kita Bu, izinkanlah" pinta Malin memohon.

"Baiklah, ibu izinkan. Cepatlah kembali, ibu akan selalu menunggumu Nak," kata ibunya sambil menangis. Meski dengan berat hati akhirnya Mande Rubayah mengizinkan anaknya pergi. Kemudian Malin dibekali dengan nasi berbungkus daun pisang sebanyak tujuh bungkus, "Untuk bekalmu di perjalanan," katanya sambil menyerahkannya pada Malin. Setelah itu berangkatiah Malin Kundang ke tanah rantau meninggalkan ibunya sendirian.
</p>

<p>Hari-hari terus berlalu, hari yang terasa lambat bagi Mande Rubayah. Setiap pagi dan sore Mande Rubayah memandang ke laut, "Sudah sampai manakah kamu berlayar Nak?" tanyanya dalam hati sambil terus memandang laut. la selalu mendo'akan anaknya agar selalu selamat dan cepat kembali.

Beberapa waktu kemudian jika ada kapal yang datang merapat ia selalu menanyakan kabar tentang anaknya. "Apakah kalian melihat anakku, Malin? Apakah dia baik-baik saja? Kapan ia pulang?" tanyanya. Namun setiap ia bertanya pada awak kapal atau nahkoda tidak pernah mendapatkan jawaban. Malin tidak pernah menitipkan barang atau pesan apapun kepada ibunya.

Bertahun-tahun Mande Rubayah terus bertanya namun tak pernah ada jawaban hingga tubuhnya semakin tua, kini ia jalannya mulai terbungkuk-bungkuk. Pada suatu hari Mande Rubayah mendapat kabar dari nakhoda dulu membawa Malin, nahkoda itu memberi kabar bahagia pada Mande Rubayah.

"Mande, tahukah kau, anakmu kini telah menikah dengan gadis cantik, putri seorang bangsawan yang sangat kaya raya," ucapnya saat itu.
Cerita Dongeng Malin Kundang

Cerita Dongeng Malin Kundang

Mande Rubayah amat gembira mendengar hal itu, ia selalu berdoa agar anaknya selamat dan segera kembali menjenguknya, sinar keceriaan mulai mengampirinya kembali. Namun hingga berbulan-bulan semenjak ia menerima kabar Malin dari nahkoda itu, Malin tak kunjung kembali untuk menengoknya.

"Malin cepatlah pulang kemari Nak, ibu sudah tua Malin, kapan kau pulang...," rintihnya pilu setiap malam. Ia yakin anaknya pasti datang. Benar saja tak berapa lama kemudian di suatu hari yang cerah dari kejauhan tampak sebuah kapal yang megah nan indah berlayar menuju pantai. Orang kampung berkumpul, mereka mengira kapal itu milik seorang sultan atau seorang pangeran. Mereka menyambutnya dengan gembira.
</p>

<p>
Ketika kapal itu mulai merapat, terlihat sepasang anak muda berdiri di anjungan. Pakaian mereka berkiiauan terkena sinar matahari. Wajah mereka cerah dihiasi senyum karena bahagia disambut dengan meriah. Mande Rubayah juga ikut berdesakan mendekati kapal. Jantungnya berdebar keras saat melihat lelaki muda yang berada di kapal itu, ia sangat yakin sekali bahwa lelaki muda itu adalah anaknya, Malin Kundang. Belum sempat para sesepuh kampung menyambut, Ibu Malin terlebih dahulu menghampiri Malin. la langsung memeluknya erat, ia takut kehilangan anaknya lagi.

"Malin, anakku. Kau benar anakku kan?" katanya menahan isak tangis karena gembira, "Mengapa begitu lamanya kau tidak memberi kabar?"

Malin terkejut karena dipeluk wanita tua renta yang berpakaian compang—camping itu. Ia tak percaya bahwa wanita itu adalah ibunya. Sebelum dia sempat berpikir berbicara, istrinya yang cantik itu meludah sambil berkata, "Wanita jelek inikah ibumu? Mengapa dahulu kau bohong padaku!" ucapnya sinis, "Bukankah dulu kau katakan bahwa ibumu adalah seorang bangsawan yang sederajat denganku?!"

Mendengar kata-kata pedas istrinya, Malin Kundang langsung mendorong ibunya hingga terguling ke pasir, "Wanita gila! Aku bukan anakmu!" ucapnya kasar.

Mande Rubayah tidak percaya akan perilaku anaknya, ia jatuh terduduk sambil berkata, "Malin, Malin, anakku. Aku ini ibumu, Nak! Mengapa kau jadi seperti ini Nak?!" Malin Kundang tidak memperdulikan perkataan ibunya. Dia tidak akan mengakui ibunya. la malu kepada istrinya. Melihat wanita itu beringsut hendak memeluk kakinya, Malin menendangnya sambil berkata, "Hai, wanita gila! lbuku tidak seperti engkau! Melarat dan kotor!" Wanita tua itu terkapar di pasir, menangis, dan sakit hati.
cerita dongeng legenda malin kundang

cerita dongeng legenda malin kundang

Orang-orang yang meilhatnya ikut terpana dan kemudian pulang ke rumah masing-masing. Mande Rubayah pingsan dan terbaring sendiri. Ketika ia sadar, Pantai Air Manis sudah sepi. Dilihatnya kapal Malin semakin menjauh. Ia tak menyangka Malin yang dulu disayangi tega berbuat demikian. Hatinya perih dan sakit, lalu tangannya ditengadahkannya ke langit. Ia kemudian berdoa dengan hatinya yang pilu, "Ya, Tuhan, kalau memang dia bukan anakku, aku maafhan perbuatannya tadi. Tapi kalau memang dia benar anakku yang bernama Malin Kundang, aku mohon keadilanmu, Ya Tuhan!" ucapnya pilu sambil menangis. Tak lama kemudian cuaca di tengah laut yang tadinya cerah, mendadak berubah menjadi gelap. Hujan tiba-tiba turun dengan teramat lebatnya. Tiba-tiba datanglah badai besar, menghantam kapal Malin Kundang. Laiu sambaran petir yang menggelegar. Saat itu juga kapal hancur berkeping- keping. Kemudian terbawa ombak hingga ke pantai.

Esoknya saat matahari pagi muncul di ufuk timur, badai telah reda. Di kaki bukit terlihat kepingan kapal yang telah menjadi batu. Itulah kapal Malin Kundang! Tampak sebongkah batu yang menyerupai tubuh manusia. Itulah tubuh Malin Kundang anak durhaka yang kena kutuk ibunya menjadi batu karena telah durhaka. Disela-sela batu itu berenang-renang ikan teri, ikan belanak, dan ikan tengiri. Konon, ikan itu berasal dari serpihan tubuh sang istri yang terus mencari Malin Kundang.

Sampai sekarang jika ada ombak besar menghantam batu-batu yang mirip kapal dan manusia itu, terdengar bunyi seperti lolongan jeritan manusia, terkadang bunyinya seperti orang meratap menyesali diri, "Ampun, Bu...! Ampuun!" konon itulah suara si Malin Kundang, anak yang durhaka pada ibunya.</p>

</body>
</html>

-CSS:

body {background-color: DeepSkyBlue;}

h1 {font-family: Lucida Handwriting;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 50px;}

img {margin-left:auto;
     margin-right:auto;
     display: block;
     border-radius: 10%;}


p.paragraf1  {margin-left: 170px;
           margin-right: 170px;
       margin-top: 100px;}

p {margin-left: 170px;
   margin-right: 170px;
   color: white;
   font-family: Consolas;}

Bagi yang ingin melihat Kodinganya dengan lebih Jelas bisa diunduh disini: CSS

Cari Blog Ini

Fa Task

Pemrograman Web - CSS

Anatomi CSS

Pengcodingan CSS

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Web - Code Wars

Pemrograman Web - PBO dalam JavaScript

Pemrograman Web - JavaScript Loop & Fungsi