. .

WEB DESIGN : Menempatkan Kode CSS Pada HTML5 Webpage

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Selasa, Januari 03, 2017 No comments

WEB DESIGN :Where To Put My CSS Styles, Sebelum lanjutkan pembelajaran ini, perlu diketahui bacalah dulu artikel pembelajaran sebelumnya dan kuasai pengenalan pengetahuan dasar di :
WEB PROGRAMMING
  1. WEB DESIGN
  2. MEMULAI BELAJAR WEB PROGRAMMING
  3. Memulai Membangun WEBSITE Dengan HTML - Panduan Bagi Pemula
Ketika browser membaca style sheet, browser akan memformat dokumen HTML menurut informasi di style sheet. Ada tiga cara untuk memasukkan style sheet: External style sheet, Internal style sheet, Inline style, Embedded Style Sheets.

External style sheet
Dengan External style sheet, kita dapat mengubah tampilan seluruh situs Web dengan mengubah hanya dengan satu file saja.


Setiap halaman harus menyertakan referensi ke file style sheet eksternal dalam <link> elemen. <Link> elemen berjalan di dalam <head>:
Contoh :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>HEADING SATU</h1>
<p>Dan ini paragraph.</p>

</body>
</html>
External style sheet dapat ditulis dalam editor teks. File tidak harus mengandung tag html. Style sheet file harus disimpan dengan ekstensi .css. Pada contoh diatas belum terlihat gaya bentuk yang diluar biasa, alias biasa-biasa saja, karena kita belum membuat file CSS nya. Daripada mengetik <STYLE> tag dan kode untuk semua aturan CSS yang kita letakkan pada bagian HEAD, kita dapat mengetik semuanya dalam sebuah file teks yang terpisah. kita kemudian 'memberitahu' browser file teks mana. kemudian diperlakukan seolah-olah berada di bagian HEAD. Kita menyiapkan External style sheet "myStyle.css" seperti ini :
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
Setelah kita buat file CSSnya, maka tampilannya sudah digaya bentuk menjadi :
Catatan: Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left:_20_px;). Cara yang benar adalah: margin-left:20px;
Untuk menanamkan stylesheet tag LINK digunakan <link rel= . Atribut REL memberitahu browser yang ingin kita link ke stylesheet; TYPE memberitahu browser apa jenis file yang digunakan; "stylesheet" type="text/css"  atribut HREF memberitahu browser nama file, dan di mana file tersebut href="mystyle.css"> . Kita tidak melakukan berkas referensi lagi.

stylesheet eksternal memiliki keuntungan besar atas yang tertanam karena mereka dapat digunakan untuk semua halaman di situs web kita. Yang perlu kita lakukan adalah memasukkan tag LINK di bagian HEAD halaman situs Web kita. Dengan stylesheet tersemat, kita harus memiliki kode STYLE yang sama di bagian HEAD setiap halaman. Stylesheets eksternal dapat menghemat banyak waktu dengan mengetik (atau copy dan paste),,,lebih efisien. stylesheet eksternal hanya file teks, sehingga kita dapat menuliskannya dalam editor teks.

Perhatikan bahwa tidak ada TAGS digunakan dalam stylesheet eksternal. Tidak ada <STYLE> tag atau tag HTML, hanya Selectors dan Properties dan Nilai mereka. Perhatikan juga, bahwa gaya bentuk telah ditetapkan. Kita dapat melakukan ini dengan tag STYLE tertanam juga. Kita dapat memiliki banyak gaya yang berbeda yang kita inginkan antara sepasang <STYLE> </ STYLE> tag.
Jika kita menggunakan stylesheet eksternal, tidak terbatas pada hanya satu. kita dapat menggunakan sebanyak-banyaknya yang kita butuhkan dengan stylesheet eksternal. Semua yang dibutuhkan adalah tag LINK yang berbeda untuk setiap stylesheet.

Internal style sheet
Style sheet internal dapat digunakan jika satu halaman tunggal memiliki gaya yang unik. gaya internal didefinisikan dalam elemen <style>, di dalam <head> halaman HTML, contohnya:
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>
<body>

<h1>HEADING SATU</h1>
<p>Dan ini paragraph.</p>

</body>
</html>
Dan dengan Internal style sheet kita tidak memerlukan CSS file terpisah, dan biasanya Internal style sheet digunakan untuk membuat gaya bentuk elemen bagian tertentu yang tidak menyeluruh pada semua bagian webpage.

Inline style
Inline style dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal. Untuk menggunakan Inline style, menambahkan atribut style untuk elemen yang relevan. Atribut style dapat berisi properti CSS. Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna dan margin kiri dari <h1> elemen :
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>

</body>
</html>
Untuk menempatkan Inline style tag dalam HTML, lakukan hal berikut:
  1. Ketik Tag yang ingin kita ubah
  2. Berikutnya, ketik ruang dan kemudian STYLE
  3. Ketik tanda sama dengan (=) setelah STYLE
  4. Ketik tanda kutip ganda
  5. Ketik Properti diikuti oleh titik dua
  6. Ketik Nilai property
  7. Ketik tanda kutip ganda lain
  8. Ketik sudut kanan bracket (>) dari tag HTML
Embedded Style Sheets
Ini adalah pengetahuan tambahan, Embedded Style Sheets berjalan di bagian HEAD halaman HTML kita. Ketika kita meng-Embedded Style Sheets di bagian HEAD, kita menggunakan dua tag untuk memberitahu browser bagian mana gayabentuk akan dimulai dan berakhir. Kita dapat menambahkan atribut TYPE, jika kita ingin. Tapi browser modern tidak membutuhkannya, sehingga Embedded Style Sheets sudah jarang sekali digunakan.
<!DOCTYPE html>
<html>
<head>
<JUDUL>CSS</JUDUL>
          <style type="text/css">

         </style>
</head>
<body>

Multiple Style Sheets
Jika beberapa properti telah ditetapkan untuk pemilih yang sama (elemen) di style sheet yang berbeda, nilai dari style sheet terakhir yang akan dibaca dan digunakan.
Contoh : Asumsikan bahwa style sheet eksternal memiliki gaya berikut untuk <h1> elemen:
h1 {
    color: navy;
}
kemudian, menganggap bahwa internal style sheet juga memiliki gaya berikut untuk <h1> elemen:
h1 {
    color: orange;  
}
Jika Style sheet internal yang didefinisikan setelah link ke style sheet eksternal, <h1> elemen akan "oranye":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>
<body>

<h1>HEADING SATU</h1>
<p>Gaya bentuk dokumen ini adalah kombinasi dari external stylesheet, and internal style</p>

</body>
</html>
Namun, jika Style sheet internal didefinisikan sebelum link ke style sheet eksternal, <h1> elemen akan "navy":
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>HEADING SATU</h1>
<p>Gaya bentuk dokumen ini adalah kombinasi dari external stylesheet, and internal style</p>

</body>
</html>
Cobalah jalankan semua programnya dan jangan lupa file CSS mystyle.css harus aktif juga. Pada bagian berikutnya, Anda akan belajar bagaimana menggunakan selectors CSS. How To Use Your CSS Selectors.

0 komentar:

Posting Komentar