Materi PWPB XI Style Pada Halaman Web

BAB VI
STYLE PADA HALAMAN WEB

KOMPETENSI INTI

3.      Memahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.

4.      Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak. Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan, meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.

 

KOMPETENSI DASAR

3.7 Menerapkan style pada halaman web

4.7 Membuat kode html untuk menampilkan style tertentu pada halaman web

 

APERSEPSI

Mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan bahasa pemrograman. Pada umumnya, CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran borders. warna border, warna hyperlink, warna mouse over, spasi antarparagraf, spasi antarteks, margin kiri, kanan, atas, bawah, dan parameter lainnya, Dalam hal ini, layout berkaitan dengan tata cara  penataan elemen-elemen dalam sebuah halaman dengan benar. Dengan desain halaman web yang baik dan tepat akan membuat pengunjung (visitor) merasa nyaman dengan tampilan (layout) halaman web tersebut dan tetap dapat fokus pada isi (content).

MENGAMATI

Pelajarilah buku teks maupun sumber lain tentang style halaman web dan client side scripting dengan baik dan benar!

 

AYO PAHAMI

STYLE PADA HALAMAN WEB

CSS sebagai sebuah bahasa style sheet yang digunakan dalam mengatur tampilan dokumen. Dengan adanya CSS maka tampilan halaman yang sama   akan memiliki format yang berbeda. sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, nusalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk digunakan bersama-sama dalam beberapa berkas (file).

1.      Konsep Layout dalam Halaman Web

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman Iain dengan mudah melalui navigasi yang baik, mudah, dan informatif sehingga pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content). Dalam hal ini, desain halaman web tidak mengganggu kejelasan bagian isi. Dengan keberadaan layout dengan tata letak yang baik dapat membuat halaman lebih memadai dan seimbang sehingga enak dilihat dan mudah dibaca. Desain layout suatu halaman web meliputi pembagian tempat pada halaman, pengaturan jarak  spasi, pengelompokan teks dan grafik, serta penekanan pada suatu bagian tertentu. Pada dasarnya, sebuah dokumen web umumnya memiliki elemenelemen sebagai berikut.

a.      Elemen Header

Elemen jenis ini berisi judul dan penjelasan Iain dokumen. Elemen ini biasanya diisi dengan logo website, menu-menu global (seperti login dan logout), ataupun nama halaman yang sedang ditampilkan.

b.      Elemen Navigation

Elemen jenis ini memberikan akses navigasi ke halaman-halaman  Iain dalam web.

c.       Elemen sidebar

Elemen jenis ini sebagai pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal Iain seperti daftar konten Iain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, bahkan di kiri dan kanan konten, sesuai dengan kreativitas perancangnya.

d.      Elemen Konten

Elemen jenis ini sebagai isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

e.      Elemen footer

Elemen jenis ini sebagai bagian penutup dari website, yang dapat berisi informasi Iain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website Iain.

 

2.      Jenis-Jenis Layout dalam Halaman Web (Frameset, Table, Div)

Rancangan web design (mockup web design) pada dasarnya menjadi gambaran keserasian warna dan layout sesuai dengan konsep desain yang dibayangkan. Sebagian web designer melewati proses ini dan langsung mendesain dengan code. Namun, teknik script sering kali mengalami proses perbaikan dikarenakan tidak adanya konsep desain yang baik.

a.      Tag Frameset dan atributnya

FRAMESET digunakan bersamaan dengan penggunaan tag FRAME yang berguna untuk menampilkan file sumber dari untuk dijadikan bagian dari tag FRAMESET. FRAMESET adalah HTML yang digunakan untuk menampilkan bingkai-bingkai pada dokumen HTML. Cara kerja FRAMESET sama seperti cara tag TABLE di mana tag TABLE digunakan untuk membuat halaman dokumen HTML menjadi beberapa bagian kolom dan baris. Hal ini juga dilakukan oleh tag FRAMESET yang dapat membagi halaman dokumen HTML menjadi kolom dan baris. Perbedaanya, pada tag FRAMESET, isi dari setiap kolom dan barisnya berbentuk bingkai yang bersumber dari dokumen HTML lain.

 

<html>

<head>

</head>

     <frameset cols="60%,40%" rows="55%,45%">

          <frame src="6 Format input submit.html">

          <frame src="6 formulir horizontal 1.html">

          <frame src="6 formulir horizontal.html">

          <frame src="6 formulir vertikal.html">

     </frameset>

</html>

Tag di atas akan membuat tampilan dokumen HTML menjadi 4 bagian (2 kolom dan 2 baris) yang masing-masing lebarnya telah ditentukan sebelumnya. Keempat bagian bingkai diambil dari dokumen yang bernama a.html, b.html, c.html, dan d.html. hasilnya sebagai berikut.

b.      Tag table dan atributnya

Tag ini digunakan untuk membuat tabel pada dokumen HTML. Penggunaan tag ini selalui disertai dengan penggunaan tag <TR> dan <TD>. Tag <TR> untuk menyatakan baris dari tabel dan tag <TD> untuk menyatakan kolom dari tabel. Tabel sangat berguna untuk membuat susunan halaman HTML menjadi lebih rapi. Dengan table, Anda dapat leluasa menempatkan tulisan atau gambar dengan tatanan   yang sangat teratur.

c.       Tag div dan atributnya

TAG DIV tidak dapat berdiri sendiri dalam penggunaannya. TAG   DIV harus disandingkan dengan CSS supaya dapat menghasilkan  bentuk design layout yang lebih menarik. Oleh sebab itu, seorang pemula banyak mengalami kendala ketika akan membuat sebuah layout website dengan menggunakan TAG DIV. DIV adalah tag HTML yang  sebenarnya digunakan untuk memberikan tanda batas suatu daerah dari   sebuah rangkaian html (bisa berupa tulisan, gambar, atau kode Iainnya). Hal ini akan sangat berbeda jika tag DIV digabungkan dengan elemen CSS yang berguna untuk memberikan tampilan dari dokumen HTML  yang dibuat.

d.      Model layout

Model-model layout yang umum digunakan dalam mendesain suatu halaman web, di antaranya sebagai berikut.

1)      Layout split

Layout split merupakan model yang banyak dipakai karena  keseimbangan dalam halaman web tetap terjaga. Navigasi atau daftar isi berada di bagian kanan dan kiri dari halaman web.

2)      Left index

Left index digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama. Navigasi atau daftar isi berada di bagian kiri dari halaman web.

3)      Top index

Top index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Navigasi atau daftar isi berada di bagian atas dari halaman web, misalnya tampilan dari www.google.com.

4)      Bottom index

Bottom index biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. Navigasi atau daftar isi berada di bagian bawah dari halaman web.

5)      Alternating index

Alternating index digunakan untuk halaman yang banyak menampill i grafik, foto, dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain-lain. Navigasi atau daftar berada di bagian kanan dan kiri dari halaman web.

 

 

3.      Konsep dan penulisan script stylesheet

Berikut ini beberapa hal yang berhubungan dengan konsep dan script stylesheet.

a.      Style pada teks

Teks pada sebuah halaman web dapat diberikan style dalam kemasan CSS. Pengaturan style tersebut meliputi properti pada bagian pewarnaan, pemilihan font, spasi, dan lain-lain. Daftar style pada teks yang umum digunakan dapat dilihat pada Tabel berikut.

 

Daftar style yang Umum Digunakan

Properti	Keterangan
Color	Mengatur warna dari teks
Direction	Menentukan arah tulisan/teks
Letter-spacing	Menambah ataupun mengurangi spasi antarkarakter dalam teks
Line-height	Mengatur tinggi baris teks
Text-align	Menentukan batas teks secara horizontal
Text-decoration	Menentukan dekorasi/hiasan pada teks
Text-indent	Menentukan jarak indent dari baris pertama dalam teks-blok
Text-shadow	Menentukan efek bayangan pada teks
Text-transform	Mengatur huruf besar-huruf kecil dari teks
Unicode-bidi	Untuk mengeset unicode
Vertical-align	Menentukan batas teks secara horizontal
White-space	Menentukan penulisan white-space pada elemen
Word-spacing	Menambah ataupun mengurangi spasi antarkata dalam teks

 

1)      Pengaturan warna pada teks

CSS dapat diterapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut.

a)      Nilai HEX, misalnya “#ff0000”

b)      Nilai RGB, misalnya "rgb(255,0,0)"

c)      Nama dari warna tersebut, misalnya "red"

Format penulisan untuk pemberian warna pada teks menggunakan CSS adalah: selector {color:nilai warna}

2)      Pengaturan spasi antarkarakter (letter spacing)

Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkarakter atau huruf. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun PX. Format penulisan CSS untuk pengaturan jarak (spasi) antarkarakter atau huruf adalah: selector {letter-spacing:nilai spasi;}. Berikut ini penerapan dari style tersebut.

 

<html>

<head>

<title>Format Text</title>

<style ="text/css">

p {letter-spacing: 0.5cm;}

h1 {letter-spacing: -2px}

</style>

</head>

<body>

  <p>Rekayasa Perangkat Lunak (RPL)</p>

  <h1> SMK KORPRI MAJALENGKA</h4>

</body>

</html>

 

 

3)      Pengaturan bentuk bentuk teks (decoration)

Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks.  Format penulisan CSS untuk mengatur dekorasi teks adalah selector {text-decoration:nilai text-decoration}. Nilai dari text-decoration dapat berupa overline, line-through, underline, dan none yang berarti tanpa dekorasi.

4)      Pengaturan spasi antarkata (word-spacing)

Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkata. Format penulisan CSS untuk pengaturan jarak (spasi) antarkarakter atau huruf adalah: selector {word-spacing:nilai spasi;}. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun PX.

5)      Pengaturan jarak indentasi paragraph (text-indent)

Text-indent menentukan jarak indent dari baris pertama dalam teks-blok sehingga teks pada baris peltama terlihat lebih menjorok ke dalam dibanding teks pada baris yang lain. Format penulisan untuk pengaturan jarak indentasi text adalah selector {textindent:nilai indent}. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun PX.

6)      Pengubahan huruf besar dan huruf kecil dari sebuah teks (text-transform)

Teks-transform property digunakan untuk menentukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text indent adalah: selector {text-transform:nilai text transform}. Nilai text transform dapat diisi dengan uppercase, lowercase, dan capital. Pada listing kode berikut terlihat CSS dituliskan dalam bentuk CLASS p.besar, p.kecil, dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang berbeda pada paragrafnya.

 

<STYLE= “text/css”>

p.besar { text-transform: uppercase)

p.kecil { text-transform: lowercase}

p.kapital { text-transform: capitalize}

</STYLE>

 

b.      Style pada multimedia

Secara mendasar, Cascading Style Sheet (CSS) dapat diterapkan pada elemen-elemen HTML multimedia di antaranya gambar, video, dan audio.

1)      Cascading style sheet pada tampilan gambar

CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html, baik itu tulisan, table, gambar, maupun objek lainnya. CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari Sisi penulisan, serta lebih disenangi oleh mesin pencari. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut.

 

<img src="nama-file-gambar" width="lebar" height="tinggi" alt="text" title="text" border="1"/>

 

2)      Cascading style sheet gambar untuk background

Penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan backgroundimage. Nilai yang diisikan untuk properti ialah URL dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font. Perhatikan coding sebagai berikut.

 

<html>

<head>

<title>Background images goes wrong</title>

<style ="text/css">

#utama {background-image: URL(orang.jpg); height: 600px;width: 800px;}

</style>

</head>

<body>

  <div id="utama">

  </div>

</body>

</html>

 

Ukuran asli gambar adalah 50px X 50px, sedangkan ukuran background yang diinginkan adalah 800px X 600px maka gambar akan ditampilkan berulang-ulang sampai terpenuhi ukuran background 800px X 600px.

3)      Cascading style sheet untuk menyisipkan gambar

Adakalanya saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik, gambar yang disisipkan perlu diberi CSS.

4)      Cascading style sheet pada tampilan video

Untuk penerapan Cascading Style Sheet pada elemen video dapat dituliskan secara inline sebagai berikut.

 

<html>

<head>

<title>Test</title>

</head>

<body>

  <video controls="controls" style="display: block; margin: 0 auto; width: 400px; height: 400;">

  <source src="movie.mp4" type="video/mp4" />

  Your browser does not support the video tag.

  </video>

</body>

</html>

 

5)      Cascading style sheet video embed dari youtube

Penyajian video juga bisa memanfaatkan elemen iframe yang dilink-kan ke alamat video tertentu, misalnya dailymotion.com, www.youtube.com, dan Iain-lain.

c.       Style pada tabel

Berikut ini beberapa hal yang berhubungan dengan style pada tabel.

1)      Pengaturan border tabel

CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang dapat dilakukan meliputi jenis garis (dotted, solid, dan Iain-lain), warna border, ketebalan garis tepi, dan sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.

2)      Konsep dasar model box

Pada dasarnya, elemen dari HTML adalah model box untuk membuat border di sekeliling elemen dan space elemen yang saling berhubungan.

3)      Pengaturan text-align pada tabel

Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center. Teks dalam tabel diatur dengan property textalign dan vertical-align.

4)      Pengaturan lebar dan tinggi tabel

Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height, misalnya mengatur lebar tabel 100% dan tinggi dari elemen th adalah 50px.

5)      Pengaturan warna pada tabel

Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks, background, ataupun border. Style warna juga bisa diberikan hanya pada bagian tertentu saja, misalnya bagian header tabel (th) seperti pada listing CSS di bawah. Perhatikan style sebagai berikut.

 

table, td, th

{border : 1px solid green;}

 

Style di atas akan memberikan efek warna green pada border  table data (td) dan header tabel (th).

6)      Pengaturan padding tabel

Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari sel tersebut. Style padding ini dapat diterapkan pada elemen HTML <td> (kolom). Padding dapat pula diatur untuk bagian tertentu saja, misalnya padding-top untuk jarak dari atas sel. Ukuran yang digunakan dapat berupa cm atau PX (pixel). Property style standar untuk pengaturan padding yang mengelilingi content adalah td { padding: 15px; }.

d.      Style pada formulir

Style CSS dapat digunakan di berbagai komponen input di dalam form. Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS di dalamnya. Penggunaan style CSS akan mengurangi beban halaman dan konsumsi bandwidth.

1)      Cascading style sheet pada input text

Textarea mendefinisikan kontrol input berupa area teks pada form. Elemen form textarea dapat diatur style-nya dengan menggunakan selector textarea{…}.

2)      Cascading style sheet pada elemen form

Style yang bisa diberikan pada elemen form di antaranya pengaturan besar dan jenis border, warna order, lebar form, batas form dari Sisi layout, dan warna background dari form.

 

 

Form

{ border: 1px solid #666666;

width : 480; / *lebar form* /

margin—left: O; / *jarak dari batas kiri layout*/

background—color : #ffff66;}

 

3)      Cascading style sheet pada text field

Textfield mendefinisikan kontrol input text pada form. Style yang diberikan pada input textfield di antaranya warna, background, border, jenis serta ukuran font, dan masih banyak atribut lainnya yang bisa digunakan untuk style textfield.

4)      Cascading style sheet pada radio button

Radio button merupakan bagian dari elemen input form. Saat ingin memberikan style pada radio button, Anda dapat menggunakan selector input.selector. Untuk menerapkan style input.rdl dan input.rd2 maka pada tag <input type="radio"> perlu memanggil style tersebut dengan cara classë'rdl" dan class="rd2". Ketika listing kode di atas dijalankan akan muncul tampilan radio button.

5)      Cascading style sheet pada button

Button merupakan tombol yang dapat diklik. Pada tombol, baik submit, reset maupun button, style CSS dapat digunakan untuk menimbulkan efek pipih (flat) pada tombol. Efek style bisa juga diberikan saat button dilewati mouse. Untuk memberikan efek berbeda saat button dilewati mouse dapat menggunakan selector CSS input.button:hover.

6)      Cascading style sheet pada checkbox

Checkbox merupakan bagian dari elemen input form. Saat ingin memberikan style pada checkbox, Anda dapat menggunakan selector input.selector.

4.      Penyisipan stylesheet dalam script HTML

Secara garis besar, terdapat 3 cara input kode CSS ke dalam HTML, yaitu metode Inline style, Internal style Sheets, dan External style Sheets. Dari ketiga cara tersebut, yang paling digunakan adalah metode external style sheets dengan menggunakan @import maupun dengan tag Seluruh halaman web dapat menggunakan file CSS yang sama karena menggunakan kode CSS yang dipisahkan dan jika ingin mengubah seluruh tampilan halaman website, hanya butuh mengubah 1 file CSS saja.

a.      Metode inline style

Metode Inline style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style. Berikut ini contoh penggunaan Metode Inline Style CSS.

 

 

<html>

<head>

<title>lmplementasi Inline Style CSS</title>

</head>

<body>

<h2 style=”background-color:red; color:blue”>

Text ini akan bewarna merah dan background warna biru

</h2>

</body>

</html>

 

Kode di atas dapat dilakukan dengan menyisipkan atribut style pada tag <h2>, di mana nilai dari atribut style ini adalah kode CSS yang ingin diterapkan. Penggunaan tag CSS seperti ini membuat kode CSS langsung tergabung dengan HTML dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.

b.      Metode internal style sheets

Metode Internal Style Sheets (Embedded Style Sheets) digunakan untuk memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML. Kekurangan dalam menggunakan internal style sheets ialah jika memiliki beberapa halaman dengan style yang sama, Anda harus membuat kode CSS pada masing-masing halaman tersebut. Namun, hal tersebut dapat diatasi dengan menggunakan metode external style sheets.

c.       Metode external style sheets

Metode External Style Sheets digunakan untuk 'mengangkat' kode CSS tersebut ke dalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal 'memanggil' file CSS tersebut. Perhatikan coding berikut.

 

h2 {

background—color: black;

color : white;

}

 

5.      File CSS

Penggunaan CSS dalam pembuatan web memberikan beberapa manfaat, di antaranya ukuran file menjadi lebih kecil sehingga load file lebih cepat; kode HTML lebih sederhana dan lebih mudah diatur; mampu berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML; mudah untuk mengubah tampilan hanya dengan mengubah file CSS saja; serta bisa digunakan dalam hampir semua jenis web browser. CSS merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah standardisasi CSS, Internet Explorer dan Netscape merilis browser terbaru yang mendukung standar CSS. Berikut ini beberapa versi CSS.

a.      CSS 1

CSS 1 berfokus pada pengaturan format dokumen HTML, seperti font, warna (teks, background, dan elemen lainnya), (spasi antarbaris, kata, dan huruf), posisi (teks, gambar, elemen lainnya), dan pengaturan tepi (margin, border dan padding).

b.      CSS 2

CSS 2 berfokus pada pengaturan format dokumen cetak dengan printer, posisi konten, downloadable, font layout.

c.       CSS 3

Beberapa web browser sudah mendukung CSS 3. CSS 2 didukung penuh oleh CSS 3 dengan beberapa penambahan Adanya CSS mempermudah pengaturan dan website serta tampilannya karena CSS memisahkan antara bagian pengatur gaya dan isi dari web. CSS 3 berfokus pada dukungan tampilan desain website, animasi warna, sampai animasi 3D. Selain itu, CSS menunjang kompabilitas website dengan smartphone, CSS math, CSS objek model, mendukung fungsi multimedia pada website, beberapa efek teks (teks berbayang, kolom koran, dan "word-wrap"), jenis huruf eksternal sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts", dan beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi. Sudut tumpul dan shadow CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C.

 

MENANYA

Masing-masing siswa membuat beberapa pertanyaan tentang penyisipan stylesheet dalam script HTML yang kurang dimengerti kemudian saling tukar dengan teman sebangku. Mintalah mereka untuk menjawabnya. Apabila mengalami kesulitan, bertanyalah pada guru!

 

Lihat Materi Versi PDF

Download Materi

Assessmen !

Klik Link Berikut Ini