Tutorial HTML Part 14 : Menghubungkan HTML dengan CSS

Tutorial HTML : Menghubungkan HTML dengan CSS - Wah, sudah tidak sangka tutorial mengenai HTML sudah mulai jauh, dan sudah tidak lama lagi kita akan ke css.Karena pada hari ini kita akan membahas mengenai menghubungkan HTML dengan CSS.Mungkin beberapa di antara kalian sudah tahu dan tidak asing lagi mendengar cara ini, tetapi saya akan mengasih tahu kepada teman-teman yang baru belajar untuk mengetahui cara ini (saya juga masih belajar sama seperti kalian, jadi tidak ada yang hebat disini, sama-sama kita belajar, oke).Sudah agak lebar kita basa-basi langsung saja kita ke caranya.

Menghubungkan HTML dengan CSS

Dalam menghubungkan HTML dengan CSS terbagi tiga cara, yaitu Inline,Internal , External (Kita akan membahas satu persatu).

1.Cara Inline
Cara ini merupakan cara menyisipkan syntax atau kode css ke dalam kode html, yang akan di letakkan sebaris dengan kode html.Mari lihat contoh di bawah.

 
<html>
<head>
 <title>Menghubungkan HTML dengan CSS dan Mengenal ID dan Class</title>
</head>
<body>
   <b style="color:red">Ini warna merah</b>
   <p style="font-size:20px">Ini huruf sesuai ukuran</p>
   <h1 style="color:blue">Ini huruf warna biru</h1>
</body>
</html>

Pada contoh di atas saya membuat sebuah kalimat dengan tag <b>, tag <p>, dan tag <h1>.Dan coba kalian lihat pada gambar di bawah ini, maka hasilnya dari kata-yang berbeda tag itu akan menjadi lain.

Tutorial HTML : Menghubungkan HTML dengan CSS dan Mengenal ID dan Class

cara Inline

2.Cara Internal
Cara ini merupakan cara yang akan menyisipkan kode css ke kode html, tetapi kode css-nya di letakkan pada bagian tag <head>.Contohnya kita akan mencoba untuk mewarnai huruf dengan warna yang berbeda, tetapi dengan tag yang berbeda.Berikut contohnya.

 
<html>
<head>
 <title>Menghubungkan HTML dengan CSS dan Mengenal ID dan Class</title>
    <style type="text/css">
    h1{
       color:red;
    }

    h2{
        color: green;
    }

    h3{
        color: blue;
    }
    </style>
</head>
<body>
   <h1>Ini huruf yang berwarna merah</h1>
   <h2>Ini huruf yang berwarna hijau</h2>
   <h3>Ini huruf yang berwarna biru</h3>
</body>
</html>

cara Internal

3.Cara External
Cara external adalah cara untuk menyisipkan kode css ke dalam html dengan menggunakan link sumber file css.Agar anda tidak bingung langsung saja, untuk membuat teknik external ini kita harus mempersiapkan dua buah file yaitu file css dan file html.Lihat contoh berikut.

 
<html>
<head>
 <title>Menghubungkan HTML dengan CSS dan Mengenal ID dan Class</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h1>Ini huruf yang berwarna coklat</h1>
   <h2>Ini huruf yang berwarna merah mudah</h2>
   <h3>Ini huruf yang berwarna aqua</h3>
</body>
</html>

 
h1{
 color: brown;
}

h2{
 color: pink;
}

h3{
 color: aqua;
}

cara External

Jangan lupa untuk memberikan kode html pada tag <head> (Agar file cssnya berjalan).

 
<link rel="stylesheet" type="text/css" href="style.css">

style.css (adalah nama file yang saya namakan, untuk anda terserah saja, yang terpenting adalah ekstensinya yaitu .css).

Gimana sudah paham kan? Kalau anda sudah selamat itu berarti anda bisa memahami tulisan saya hehehe.
Mohon maaf jika saya salah dalam hal menulis atau masih typo lah dalam bahasa gaulnya hehehe.

Semoga bermanfaat untuk anda, Terima Kasih.

Biongo Attacker

Tutorial HTML Part 14 : Menghubungkan HTML dengan CSS

Menghubungkan HTML dengan CSS

0 komentar

Popular

Archive

Comment

Fanspage

[fa fa-tag] Category