Laman

17 Jun 2017

Modul Pemograman Web Materi CSS inline Style Sheet

Modul pemograman web kurikulum 2013 materi css inline style sheet dan embedded style sheet.
Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

CSS merupakan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML

1.Inline Style Sheet

Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen <P></p> atau paragraf.

 

<p align="center" style="color:blue; font-size:26px">SMK INDONESIA </p>

Jika script diatas dijalankan maka akan tampil halaman html seperti berikut :

inline style sheet

pada gambar diataas terlihat bahwa tulisan yang kita buat pada halaman inline.html berwarna biru dan terletak di tengah.
Hal tersebut merupakan hasil dari penggunaan align=”center dan style”color/;blue;

kita dapat memodifikasi tampilan tersebut rata kiri dan warna merah dengan mengubah script seperti berikut :

<p align="left" style="color:red; font-size:26px">SMK INDONESIA </p>

Setelah dijalankan maka tampilan halaman inline.html diatas menjadi seperti berikut :

inline style sheet 2

2. Embedded Style Sheet

Pada Embedded Style sheet style css terlebih dahulu di tuliskan yang diapit oleh <style>..</style> dan diletakkan diaas <body> kemudian style yang telah dipanggil dengan menggunakan class=””.

Berikut adalah contoh script css embedded stayle sheet silahkan dicoba dan disimpan dengan nama embedded.html

<html>

</head>
<head>
<style>
input.btn {color: #fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width : auto;
}
</style>
<body>
<table>
<tr>
<td><form >
<p><label for="nama">Username</label>
<input type="text" id="nama" />
</p>
<p>
<label for="KTP">Password</label>
<input type="text" id="KTP" />
</p>
<p>
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
</p>
</form></td>
</tr>
</table>

</body> </html>

<html>
</head>
<head>
<style>
input.btn {color: #fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width : auto;
}
</style>
<body>
<table>
<tr>
<td><form >
<p><label for="nama">Username</label>
<input type="text" id="nama" />
</p>
<p>
<label for="KTP">Password</label>
<input type="text" id="KTP" />
</p>
<p>
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
</p>
</form></td>
</tr>
</table>
</body>
</html>

 

simpan dengan embedded.html maka hasilnya sebagai berikut:

Embedded style sheet

Pada listing  kode css embedded style diatas penerapan style diberikan pada komponen input button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn” didalam tag <style></style>

Demikian Modul pemrograman web kurikulum 2013 CSS materi inline styel sheet dan embedded style sheet semoga dapat memudahkan siswa dalam memahami css

loading...
artikel kejuruan

No comments:

Post a Comment

Search Post