 |
| css |
Mas - Kali ini Mas akan menawarkan tutorial wacana CSS yaitu "Cara menginput isyarat CSS ke dalam HTML". Langsung saja kita bahas.
Secara garis besar, terdapat 3 cara menginput isyarat CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Metode Inline Style
Metode Inline Style adalah cara menginput isyarat CSS pribadi ke dalam tag HTML dengan memakai atribut style, teladan penggunaan Metode Inline Style CSS adalah sebagai berikut:
Dalam isyarat diatas, aku menyisipkan atribut style pada tag <h2>, nilai dari atribut style ini ialah isyarat CSS yang ingin diterapkan.<!DOCTYPE html><html><head><title>Contoh Inline Style CSS</title></head><body><h2style="background-color:black; color:white">Text ini akan bewarna putih dan background warna hitam</h2></body></html>
Penggunaan tag CSS ibarat ini walaupun praktis, namun tidak disarankan, sebab isyarat CSS pribadi tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS supaya desain terpisah dengan konten.
Metode Internal Style Sheets
Metode Internal Style Sheets, atau disebut juga 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.
Contoh penggunaan motode internal style sheets CSS:
Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style, sebab kita sudah memisahkan CSS dari HTML. Seluruh isyarat CSS akan berada pada tag head dari HTML.<!DOCTYPE html><html><head><title>Contoh Inline Style CSS</title><style type="text/css">h2{background-color:black;color:white;}</style></head><body><h2>Text ini akan bewarna putih dan background warna hitam</h2></body></html>
Namun kekurangan menggunakan internal style sheets, jika kita mempunyai beberapa halaman dengan style yang sama, maka kita harus menciptakan isyarat CSS pada masing-masing halaman tersebut. Hal ini sanggup diatasi dengan memakai metode external style sheets.
Metode External Style Sheets
Kekurangan dari metode internal style sheets sebelumnya ialah jikalau ingin menciptakan beberapa halaman dengan tampilan yang sama, maka setiap halaman akan mempunyai isyarat CSS yang sama.
Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan isyarat CSS, tinggal ‘memanggil’ file CSS tersebut.
Masih memakai teladan yang sama dengan internal style sheets, tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css
Isi dari file belajar.css :
Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan teladan kali ini, savelah pada folder yang sama dengan halaman HTML kita.h2{background-color:black;color:white;}
Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang pertama ialah menggunakan @import
Contoh penggunaan @import CSS:
Untuk metode @import external style sheets ini, kita menyisipkan @import url(belajar.css); pada tag <style>. Alamat pada bagian url bisa berupa alaman relatif (seperti: folderku/belajar.css) maupun absolut (seperti www.duniailkom.com/belajar.css).<!DOCTYPE html><html><head><title>Contoh Inline Style CSS</title><style type="text/css">@importurl(belajar.css);</style></head><body><h2>Text ini akan bewarna putih dan background warna hitam</h2></body></html>
Cara input kedua external style sheets, ialah menggunakan tag <link>. Berikut contohnya:
Pada metode link external style sheets ini, kita memakai atribut href pada tag <link>, yang akan berisi alamat dari halaman CSS, dalam hal ini belajar.css<!DOCTYPE html><html><head><title>Contoh Inline Style CSS</title><link rel="stylesheet"type="text/css"href="belajar.css"></head><body><h2>Text ini akan bewarna putih dan background warna hitam</h2></body></html>
Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah metode external style sheets, baik menggunakan @import maupun dengan tag <link>. Karena dengan memakai isyarat CSS yang dipisahkan, seluruh halaman web sanggup memakai file CSS yang sama, dan jikalau kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.
Gimana sudah jelas? Kalau belum tunggu saja tutorial-tutorial dari Mas selanjutnya. Jangan lupa komentar dan Jika ada yang ingin request artikel mengenai "Pemrograman Web" sanggup hubungi aku pada "Contact". Sumber http://massrizky.blogspot.com/
No comments:
Post a Comment