Misnandi Blog

Selalu ada hari indah untuk belajar

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.

NOTE : dalam tutorial ini kita masih menggunakan css dasar, karena untuk tutorial CSS akan di lanjutkan secara khusus pada tutorial selanjut nya.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on 10 May 2015 by in Programing, web and tagged .
%d bloggers like this: