SleepingCodings - Apa sih yang dimaksud dengan Menghubungkan HTML dan CSS, yang dimaksud ialah Menyatukan atau Mengkombinasikan dan Memanggil bahasa pemrograman satu dengan bahasa pemrograman yang lainnya. Kenapa kita perlu membahasnya ?, Karena penghubungan HTML dengan CSS disini memiliki peran penting untuk pengembangan suatu halaman website. Karena jika kita tidak mengetahui bagaimana cara untuk menghubungkan HTML dan CSS secara otomatis pasti kita tidak mengetahui bagaimana cara untuk mendesign halaman website yang kita buat karena file HTML tidak terhubung dengan CSS. Bukan hanya CSS sebenarnya, tetapi PHP juga sama, PHP yang akan kita gunakan untuk membuat website.
CARA MENGHUBUNGKAN HTML dengan CSS
Untuk cara menghubungkan HTML dan CSS ada tiga cara yaitu secara INTERNAL, EKSTERNAL dan INLINE, INTERNAL berada didalam element <head>, dan kita tinggal menuliskan <style></style> kita tidak perlu menghubungkan karena file HTML dan CSS dijadikan 1 di file HTMLnya, untuk eksternal kita meletakkannya sama saja yaitu didalam element <head> namun kita memakai tag <link>, yang gunanya untuk memanggil CSS-nya, Oh iya... kalau EKSTERNAL itu kita memisahkan antara file HTML dengan file CSS nya jadi kita membuat 2 file yaitu file html dan satunya lagi css, nah lalu kita panggil file CSSnya menggunakan tag <link> tersebut, untuk INLINE sendiri sangat mudah yaitu tinggal kita taruh di dalam tag / element. Untuk lebih lengkapnya simak penjelasan di bawah ini.
1. Penggunaan CSS secara Internal pada HTML
Untuk penggunaan CSS Internal sendiri tidak terlalu rumit kok, kita menaruh file CSS di dalam file HTML nya langsung, dan pemanggilannya terlalu simple kok, seumpama kita mau mengedit tag HTML <h1>Menghubungkan CSS</h1>, nah kalau di CSS kita hanya menulis h1 nya saja untuk mengedit HTML nya. Perhatikan gambar di bawah ini untuk lebih lengkapnya dan pahami ya... .
<!DOCTYPE html>
<head>
<title>sleepingcodings.blogspot.com</title>
<style>
h1 {
color: red;
font-family: Sand Serif;
}
p {
color: blue;
font-weight: 50px;
}
</style>
</head>
<body>
<h1>Menghubungkan secara INTERNAL</h1>
<p>Buat sebuah file html atau php terserah anda. karena ini merupakan tutorial HTML maka
saya menggunakan file HTML untuk di hubungkan dengan CSS. di sini saya membuat file html
dengan nama index.html. kemudian buat sebuah file css lagi dengan nama terserah anda, di sini
saya membuat file css dengan nama style.css. jadi ada dua buah file yang saya buat yaitu file
index.html dan fiel style.css.</p>
</body>
</html>
ini screenshoot nya :
 |
| Gambar 1.1 Menghubungkan HTML dengan CSS |
 |
| Gambar 1.2 Menghubungkan HTML dengan CSS |
2. Menghubungkan CSS secara Eksternal pada HTML
Nah pada CSS EKSTERNAL ini, Author akan memberikan langkah" untuk temen" terlebih dahulu,
1. Buat folder dengan nama latihan, terserah mau di taruh mana, tapi Author taruh di /var/www/html (oh iya Author pengguna Linux, kalau ada pengguna Windows yang ngikutin tutorial Author di sarankan jangan ngambek soalnya tidak harus di /var/www/html tapi bebas mau di taruh dimanapun).
2. Buat file HTML nya dengan nama index.html ( tidak harus index )
3. Buat file CSS nya dengan nama style.css ( tidak harus style )
Nah setelah selesai membuat folder yang diisi oleh 2 file yaitu file HTML dan file CSS, lalu kita lanjutkan ke langkah selanjutnya :
index.html (isikan script dibawah)
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan dengan cara CSS EKSTERNAL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
ini hasil di web browser beserta screenshoot scriptnya :
 |
| Gambar 1.8 Menghubungkan HTML dengan CSS |
bahwa file yang kita panggil atau hubungkan adalah file stylesheet atau css. dan pada atribut href digunakan untuk meletakkan lokasi dan nama file css yang ingin kita hubungkan. pada contoh ini saya menghubungkan file html saya dengan file css yang sudah saya berinama dengan style.css. Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html masih kosong belum berisi element apapun selain struktur dasar html. untuk mencoba apakah file css sudah berhasil terhubung dengan file html maka akan kita cek dengan cara berikut ini. kita buat contoh sederhana dulu dengan cara membuat sebuah element heading 1, dan kemudian kita beri warna text heading 1 tersebut dengan warna hijau.
index.html
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar HTML <br/> Menghubungkan HTML dengan CSS dengan cara EKSTERNAL <br/> sleeping-codings.blogspot.com</h1>
</body>
</html>
style.css
h1{
color: green;
font-family: HACKED;
text-align: center;
}
screenshoot nya :
 |
| Gambar 1.4 Menghubungkan HTML dengan CSS |
 |
| Gambar 1.5 Menghubungkan HTML dengan CSS |
File html berhasil di hubungkan dengan css terbukti dengan berhasilnya syntax css yang kita buat untuk mengatur element heading 1 html di atas. syntax color pada css di atas merupakan perintah untuk menetapkan warna font/text, font-family untuk mengatur font yang di gunakan dan text-align untuk mengatur rata text. syntax css di atas merupakan syntax css yang paling dasar, untuk itu jangan lupa terus belajar yah temen". (Oh iya ini eksternalnya sengaja Author ga sendirikan file Css dengan Html nya, mungkin Tutorial selanjutnya ya !).
3. Menggunakan cara INLINE CSS pada HTML
Untuk cara ketiga ini yaitu menggunakan cara INLINE, nah kita bisa liat dengan jelas dari arti kata IN = Dalam, LINE=baris, jika digabung yang artinya didalam baris, nah yang dimaksud di dalam baris ini ialah di dalam tag HTML kita menyisipkan perintah css, dengan menambahkan atribut style="". Untuk lebih tepatnya simak gambar dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>sleeping-codings</title>
<head>
<body>
<h1 style="color:red; font-style:italic; font-family:sans-serif; text-align: center;">Author suka makan Ramen sewaktu di Kota Sebelah.</h1>
</body>
</html>
screenshootnya :
 |
| Gambar 1.6 Menghubungkan HTML dengan CSS |
 |
| Gambar 1.7 Menghubungkan HTML dengan CSS |
Nah, pastinya temen" kalau liat gambar di atas sudah paham kan, kenapa di sebut INLINE dan apa perbedaan dari CSS INTERNAL dan EKSTERNAL, Namun kalau harus memilih Author lebih memilih dan menyarankan untuk memakai CSS EKSTERNAL, Karena apa ? karena CSS EKSTERNAL terpisah dari file HTML (tidak menjadi satu), Nah bayangin aja kalau temen" punya project untuk suatu perusahaan, nah di situ HTML nya saja hampir 300 baris, trus kalau temen" makai CSS INTERNAL dan INLINE, bingung ga nantinya waktu ingin ngubah ?, Pastinya bingung kan ?, Nah maka dari itu file HTML dan CSS kita pisah agar kita bisa membedakan dan untuk mempermudah untuk mengetahui mana yang akan diubah lewat pemanggilan nama CSSnya.
KESIMPULAN
Nah, dari sini temen" pasti udah punya gambaran kan mau pake yang mana ?, nah dari 3 cara penghubungan CSS di HTML, cara yang sering di pakai yaitu Cara Penghubungan EKSTERNAL, karena file HTML dan CSS tidak menjadi satu, dan pastinya ketika kita membuka file HTML, keliatan sedikit karena tidak ada file CSS nya, coba bayangin kalau HTML nya hampir 300 lebih itu satu file HTML lalu di tambah CSS nya di dalam HTML bisa-bisa kita kebingungan dalam mengedit dan pusing banget kan, maka dari itu untuk penggunaan penghubungan menurut author dan author saranin makai EKSTERNAL, tapi kalau cuman nyisipkan sedikit CSS lewat inline ya boleh lah :v, sekian dari Author, Semoga Bermanfaat ~.
Wassalamu'alaikum Wr. Wb
No comments:
Post a Comment