Tutorial belajar dasar HTML : Belajar menggabungkan HTML dengan CSS
Ada 3 cara atau metode untuk menggabungkan css dengan html, yaitu inline, internal, external. Dan kita akan mempelajarinya satu persatu. Untuk tutorial penggunaan dan pengembangan CSS nya akan di bahas di tutorial selanjut nya. Dalam tutorial ini kita hanya akan membahas dan mempelajari penggabungan css ke dalam html.
- Inline css style
Inline css merupakan metode menyisipkan syntax atau kode css ke dalam html dengan di letakkan atau di tambahkan sebaris dengan syntax html yang akan menggunakan style css.
Misalnya kita membuat sebuah kalimat menggunakan tag <h1>, maka style css atau syntax css nya kita tambahkan di dalam tag h1 pembuka seperti syntax di bawah :
<h1>BELAJAR DI CARIKODE</h1> <br/>
<h1 style=”color:red;”>BELAJAR DI CARIKODE</h1> <br/>
<h1 style=”color:yellow;”>BELAJAR DI CARIKODE</h1> <br/>
<h1 style=”color:green;font-size:30pt”>BELAJAR DI CARIKODE</h1> <br/>
- Internal CSS Style
Internal CSS style adalah penyisipan syntax css di dalam satu file dengan file html yang ingin menggunakan CSS.tapi bukan berada di dalam tag <h1> atau tag lainnya . Tapi di letakkan di tengah-tengah tag head(di anjurkan agar code lebih tersusun dan terlihat rapi). Dan menambahkan tag style.
Berikut juga sudah saya sertakan gambar nya agar lebih mudah belajar dan memahami nya.
<html>
<head>
<style type=”text/css”>
h1{
color:red;
}
h2{
color:blue;
}
h3{
color:yellow;
font-size:30pt;
}
b{
background:red;
}
</style>
</head>
<body>
<h1>BELAJAR DI CARIKODE</h1><br/>
<h2>BELAJAR DI CARIKODE</h2><br/>
<h3>BELAJAR DI CARIKODE</h3><br/>
<h4>BELAJAR DI CARIKODE</h4><br/>
<b>SELAMAT BELAJAR</b>
</body></html>
- External CSS Style
External CSS style adalah penyisipan syntax css ke dalam HTML dengan menyisipkan link sumber file CSS nya kedalam tag style di html. Pertama yang kita butuhkan untuk belajar css external adalah kita harus mempersiapkan 2 buah file, file yang pertama save dengan ekstensi html dan file satu nya lagi save dengan ekstensi css.
file dengan ekstensi .css
body{
background:green;
}
h1{
color:red;
}
h2{
color:blue;
}
h3{
color:yellow;
font-size:30pt;
}
b{
background:red;
}
file dengan ekstensi .html
<html>
<head>
<link type=”text/css” href=”style.css” rel=”stylesheet”></head>
<body>
<h1>BELAJAR DI CARIKODE</h1><br/>
<h2>BELAJAR DI CARIKODE</h2><br/>
<h3>BELAJAR DI CARIKODE</h3><br/>
<h4>BELAJAR DI CARIKODE</h4><br/>
<b>SELAMAT BELAJAR</b>
</body></html>
pada file html nya terdapat syntax berikut pada tengah tag head :
<link type=”text/css” href=”style.css” rel=”stylesheet”>
yang berfungsi untuk menghubungkan file html ke file css agar setiap kelas dan id pada file html juga terbaca pada file css nya untuk di berikan syntax-syntax css.
0 komentar:
Posting Komentar