Penggunaan HTML dengan Cascading Style Sheet (CSS) - Praktikum 9

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Penggunaan CSS dalam tag - tag HTML yang sudah kita gunakan sebelumnya. Sebelum masuk ke codingannya, Apakah anda sudah tahu apa itu CSS? Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

Manfaat CSS yaitu :

Kode HTML menjadi lebih sederhana dan lebih mudah diatur.

Ukuran file menjadi lebih kecil sehingga load file lebih cepat.

Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.

Dapat berkolaborasi dengan JavaScript.

Dapat digunakan dalam hampir semua jenis web browser.

Dalam Pengcodingan CSS terdapat 3 tipe yaitu Inline(didalam file HTML,pada masing - masing tag), Embedded(didalam file HTML,pada tag style yang berada di tag head), dan External(diluar file HTML, yaitu dalam file .css)

Untuk Lebih jelasnya berikut Codingan beserta hasilnya :

Inline CSS

Nah yang termasuk CSS yaitu ada di tag p bagian style="color:Teal; font-family:Impact; font-size:24px; text-shadow:12px 2px 5px fuchsia;". color untuk warna font, font-family untuk beberapa jenis huruf yang bisa digunakan, font-size untuk ukuran font, text-shadow untuk membuat bayangan dari sebuah tulisan.

Embedded CSS 1

Nah, disini kenapa disebut Embedded CSS, yaitu karena bagian CSS ada pada tag <style></style> yang disimpan dalam bagian head. Untuk Embedded CSS, dan External CSS, kita disarankan membuat class/id untuk dipanggil pada saat Styling. Dengan cara memakai <div class="" id=""></div> Jika Class maka menggunakan .nama dan id maka menggunakan #nama seperti contoh diatas. Disini saya memakai padding untuk mengatur ukuran/jarak, dan border untuk garis tepi.

Embedded CSS 2

Nah, ini juga sama Embedded CSS, pada codingan ini kita juga bisa menulis selector dengan cara tag#namaid atau tag.namaclass contohnya : input#tombol.

External CSS 1
HTML

CSS

Nah, untuk yang external css ini anda harus membuat file html dan file css dalam 1 folder. Juga harus memanggil file css di htmlnya yaitu dengan cara : <link rel="stylesheet" href="styleexternal.css" type="text/css">. Disini saya memakai property width untuk mengatur lebar, height untuk mengatur panjang/tinggi, float untuk mengatur tulisan dimana tulisan bisa memanjang ke kiri.

External CSS 1
HTML

CSS

Nah, disini saya menggunakan property letter-spacing untuk mengatur spasi antara huruf dalam sebuah kata. Valuenya pun bisa cm ataupun px.

Embedded Heading CSS

Nah, disini untuk membuktikan bahwa value color bisa berbentuk hexsa, RGB, dan nama warnanya, seperti contoh diatas.

Text Decoration External CSS
HTML

Property yang digunakan word-spacing untuk mengatur spasi antar kata text-decoration untuk mengatur dekorasi teks : overline untuk garis diatas teks, underline untuk garis dibawah teks, line-throught untuk garis mencoret teks.

Embedded CSS - Text Align and Transform

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Aip Ariyadi - XI RPL 3 - Format Text</title>
 <style type="text/css">
  p{
   text-indent: 2cm;
   text-align: justify;
  }
  p.kanan {
   text-align: right; 
   color: chartreuse;
  }
  p#besar{
   text-transform: uppercase;
  }
  p#kecil{
   text-transform: lowercase;
  }
  p#kapital{
   text-transform: capitalize;
  }
 </style>
</head>
<body>
 <p>
Dengan text indent.
  Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side scripting (Javascript).
 </p>
<p class="kanan">
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side
 </p>
<p id="besar">
pengubahan menjadi huruf Besar (Kapital)</p>
<p id="kecil">
PENGUBAHAN MENJADI HURUF KECIL</p>
<p id="kapital">
huruf kapital pada setiap suku kata</p>
</body>
</html>

Property yang digunakan : text-indent untuk membuat jorok ke dalam pada awal paragraf, text-align untuk mengatur tulisan agar rata kanan,kiri, atau sama rata, text-transform untuk mengatur/mengubah huruf agar besar/kecil.

Story Prambanan Temple - External CSS
HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Roro Jongrang And Bandung Bondowoso</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <h1>
Roro Jongrang And Bandung Bondowoso<br>Prambanan Temple</h1>
<p id="versi">
Sumber dari<br>BM BOZZMAG</p>
<div class="Gambar">
  <img src="vector.jpg" alt="Ini teh Gambar" width="170px">
 </div>
<div class="Inggris">
  <p id="text">
Long time ago, there was a kingdom named Prambanan. All the people of Prambanan lived peacefully. But then, Prambanan kingdom was attacked and occupied by the Pengging kingdom. Prambanan then was ruled by Bandung Bondowoso of Pengging kingdom. He was a mean king. He also had great supernatural power. His soldiers were not only humans, but also genies.</p>
<p id="text">
The king of Prambanan had a beautiful daughter named Loro Jonggrang. Bandung Bondowoso fell in love with her and wanted to marry her. “You’re very beautiful. Would you be my queen?” asked Bandung Bondowoso. Loro Jonggrang was shocked. She didn’t like Bandung Bondowoso because he was a mean person. She wanted to refuse, but she afraid that Bandung Bondowoso would be angry and endangered the people of Prambanan. Then, she came up with a plan. “If you want to marry me, you have to build a thousand temples for me in just one night,” said Loro Jonggrang. “What? That’s impossible!” said Bandung Bondowoso. But he did not give up. He consulted with his advisor. “Your Majesty can asked the genies to help built the temples,” said the advisor.</p>
<p id="text">
So, Bandung Bondowoso summoned his entire genies soldier and commanded them to help him built a thousand temples. The genies worked in unbelievable speed. Meanwhile, Loro Jonggrang heard from her servant that the building of a thousand temples was almost finished. She was so worried. But again, she came up with a great idea. She asked all of her servants to help her. “Please prepare a lot of straw and mortar. Please hurry up!” said Loro Jonggrang. “Burn the straw and make some noise pounding the mortar, quickly.” All those servants did what Loro Jonggrang ordered them; burning straw and pounding the mortar, making the genies think that the sun is going to rise.</p>
<p id="text">
“It’s already dawn. We have to go,” said the leader of the genies to Bandung Bondowoso. All the genies immediately stopped their work and ran for cover from the sun, which they afraid of. They didn’t know that the light was from the fire that burning the straw, not from the sun.</p>
<p id="text">
Bandung Bondowoso can’t stop the genies from leaving. He was angry. He knew Loro Jonggrang had just tricked him. “You cannot fool me, Loro Jonggrang. I already have 999 temples. I just need one more temple. Now, I will make you the one-thousandth temple.” He pointed his finger to Loro Jonggrang and said some mantras. Magically, Loro Jonggrang’s body turned into stone. Until now, the temple is still standing in Prambanan area, Central Java. And the temple is called Loro Jonggrang temple.</p>
</div>
</body>
</html>

CSS

Nah, diatas merupakan contoh penggunaan tag - tag HTML beserta beberapa property CSS. Property tambahannya yaitu margin-top, margin-bottom, margin-left, margin-right untuk mengatur jarak atas, bawah, kiri, kanan.

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.