Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks

Assalamualaikum wr.wb

Pada kesempatan kali ini kita akan membahas tentang bagaimana caranya Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks

Oke Langsung saja teman - teman simak pembahasan dibawah ini.

Tujuan 

Tujuan dari pembahasan kali ini adalah 
  • Memahami style - style dasar dalam CSS untuk memformat tampilan teks
  • Mencoba menerapkan beberapa style untuk memformat tampilan pada teks
  • Menyajikan style CSS untuk memformat tampilan text pada sebuah halaman website

Alat dan Bahan

  • PC/laptop
  • Aplikasi text Editor seperti (notepad++, sublime text, dll)
  • web browser
Setelah teman - teman mempersiapkan alat dan bahan silahkan simak landasan teori dibawah ini

Landasan Teori

Pengaturan warna pada teks
CSS dapat diterapkan untuk mengatur warna dari sebuah teks. Pengaturan warna teks dengan CSS ini dapat menggunakan nilai warna atau bisa disebut sebagai kode warna.
  • Nilai HEX = misalnya "#ff0000"
  • Nilai RGB = misalnya "rgb(255,0,0)"
  • atau bisa juga kita langsung menuliskan warna yang kita inginkan misalnya (red)
Format penulisan untuk memberi warna pada text yang kita inginkan menggunakan CSS adalah sebagai berikut:

"selector {color: "value warna";}"

Pengaturan spasi antar karakter/letter spacing
Pengaturan spasi ini digunakan untuk mengatur jarak antar karakter pada teks. Format penulisannya untuk CSS untuk letter spacing: selector {letter spacing: "value";}

Pengaturan dalam bentuk - bentuk teks atau teks decoration
Pengaturan teks decoration ini bertujuan untuk mengatur atau menghilangkan teks decoration yang ada atau yang pernah kita buat sebelumnya. Format penulisan teks decoration ini adalah sebagai berikut:

"selector {text-decoration: "value";} "

Pengaturan spasi antar kata atau word spacing
Pengaturan ini digunakan untuk mengatur jarak spasi antar kata pada HTML. Format penulisan word spacing ini adalah: 

"selector {word-spacing: "value";}"    

Pengaturan jarak identasi paragraf atau teks indent
Teks indent digunakan untuk mengatur jarak indent dari baris pertama, Format penulisannya pada css teks indent: 

"selector {text-indent:"value";}"

Perubahan huruf besar dan huruf kecil dari sebuah teks atau teks transform
Pengaturan ini digunakan untuk merubah huruf yang terdapat pada suatu kalimat, apakah terdiri dari huruf besar semua, huruf kecil semua atau juga dengan huruf kapital di setiap kata. Format penulisan teks transform adalah: 

"selector {text-transform:"value";}"

Pemberian efek bayangan pada teks atau text shadow
Pemberian efek ini digunakan untuk memberikan efek bayangan pada text. Format penulisan CSS teks shadow: 

"selector {text-shadow: "koordinat X", "koordinat Y", "warna";}"

Pengaturan text alignment
Pengaturan ini digunakan untuk mengatur horizontal alignment pada teks atau kalimat. Bila kita ingin mengatur vertical alignment maka property text-alignment diganti menjadi vertical-alignment. Format penulisan css text alignment: 

"selector: {text-align: "value";}"

Setelah teman - teman memahami penjelasan diatas dibalah pada tahap langkah kerja, silahkan teman simak dengan baik

Langkah Kerja

  1.  Silahkan buat pada folder di drive D;, dengan nama folder nama anda sendiri misal: prakweb_nama
  2. Selanjutnya buatlah subfolder praktikum 2 di dalam folder yang sudah dibuat sebelumnya
  3. Silahkan buka aplikasi teks editor kalian seperti (notepad++, sublime text, dan teks editor lainnya)  
  4. Simpan elemen - elemen struktur dokumen HTML yang telah kita buat tersebut dalam format .html dan file css external dengan extensi .css
  5. Tahap akhir jalankan masing - masing contoh element struktur HTML tersebut dengan menggunakan web browser
Percobaan 
Buatlah Halaman web sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Pengaturan Warna</title>
<style type="text/css">
body{
color: lightbluel
}
h1{
color:#00cc66;
}
p.ex{
color: rgb(0,0,255);
}
</style>
</head>
<body>
<h1>Ini adalah tag H1 akan berwarna hijau gelap</h1>
<p>ini adalah paragraf. tulisan akan berwarna biru muda karena mengikuti style pada body</p>
<p class="ex">Ini adalah paragraf yang menggunakan class ex. warna pada teks akan menjadi biru</p>
</body>
</html>
Simpan file html tersebut dengan nama color.html
Jika penulisannya benar maka hasilnya akan seperti gambar dibawah ini:

Selanjutnya silahkan buat halaman website sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Letter Spacing</title>
<style type="text/css">
p.cm{
letter-spacing: 0.5cm;
}
.px p{
letter-spacing: 10px;
}
h1.pxx{
letter-spacing: -5px;
}
.cen h1{
letter-spacing: 1cm;
}
</style>
</head>
<body>
<p class="cm">Pengaturan spasi pada paragraf dengan satuan cm</p>
<div class="px">
<p>Pengaturan spasi pada paragraf dengan satuan px</p>
</div>
<h1 class="pxx">Pengaturan spasi pada heading dengan satuan px</h1>
<div class="cen">
<h1 class="cen">Pengaturan spasi pada heading dengan satuan cm</h1>
</div>
</body>
</html>

Simpan file tersebut dengan nama spacing.html
Jika penulisannya benar maka seperti gambar dibawah ini:
Buatlah halaman website sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Text decoration</title>
<style type="text/css">
em{
text-decoration: overline;
}
b{
text-decoration:line-through;
}
h1{
text-decoration:underline;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<em>teks emphasize dengan overline</em>
<b>teks bold dengan line through</b>
<h1>teks H1 dengan underline</h1>
<a href="spacing.html">Penggunaan pada link "none"</a>
</body>
</html>

Simpan file tersebut dengan nama decor.html
Jika penulisannya benar maka hasilnya sebagai berikut:

Buatlah halaman web sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Word Spacing</title>
<style type="text/css">
p{
word-spacing: 0.5cm;
}
h1{
word-spacing: 5px;
}
</style>
</head>
<body>
<p>Paragraf dengan word spacing sebesar 0,5cm</p>
<h1>H1 dengan word spacing sebesar 5px</h1>
</body>
</html>
Simpan dengan nama spacing.html
 Buatlah halaman web sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Text Indent</title>
<style type="text/css">
p{
text-indent: 1.5cm;
font-size: 24pt;
}
</style>
</head>
<body>
<p>dengan menggunakan text indent maka posisi paragraft pada baris pertama akan sedikit menjorok kedalam seperti menggunakan format teks first line indent pada aplikasi microsoft word</p> <p>Text-indent menentukan jarak inden dari baris pertama dalam text-blok, sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding teks pada baris yang lain.</p>
</body>
</html>
 Simpan file tersebut dengan nama text-indent.html
Jika penulisannya benar maka akan tampil seperti gambar dibawah ini:
Silahkan buat halaman web sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Text Transformation</title>
<style type="text/css">
p.besar{
text-transform: uppercase;
}
p.kecil{
text-transform: lowercase;
}
p.kapital{
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="besar">Penggunaan dari uppercase</p>
<p class="kecil">PENGGUNAAN DARI LOWERCASE</p>
<p class="kapital">penggunaan dari capitalize</p>
</body>
</html>
Simpan file tersebut dengan nama teks-transform.html
Hasilnya
Langkah terakhir kita akan mencoba membuat text-shadow
silahkan ketikan script dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Text Shadow</title>
<style type="text/css">
h1{
text-shadow: 3px 4px #009933;
}
</style>
</head>
<body>
<h1>Welcome To The Jungle!</h1>
</body>
</html> 
 Simpan script diatas dengan nama text-shadow.html
Hasilnya
Selamat teman teman telah belajar mengenai "Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks"

0 Response to "Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks "

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel