HTML : Menghubungkan HTML dengan CSS

Assalammualaikum Wr. Wb.

create-script - hai gaesss....kali ini saya akan sharing tentang bagaimana cara mengubungkan HTML dengan CSS. penasaran?.... baik, langsung saja kita simak :).

A. PENDAHULUAN

Pengertian

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Latar Belakang

HTML dan CSS sangat perlu digunakan dalam sebuah pembuatan website. yang pertama adalah htmlnya, html sangat penting dalam pembuatan suatu website karena HTML berdiri sebagai kerangkanya. yang kedua adalah css, CSS sangat berguna dalam pembuatan website. karena disaat html digunakan untuk membangun kerangkanya, maka css digunakan sebagai bahan untuk mempercantiknya.

Maksud dan Tujuan

dapat menggunakan HTML dengan CSS dalam pembuatan suatu website

Hasil yang Diharapkan

dapat mengatur sendiri tampilan yang diharapkan dengan menggunakan HTML dan CSS dalam pembuatan suatu website.

B. ALAT DAN BAHAN

Web Browser
Text Editor

C. PEMBAHASAN

Cara Penulisan CSS

cara penulisan CSS dibedakan menjadi 3, yaitu:

inline : digunakan dengan menuliskan atribut, serta value, dituliskan langsung didalam tag htmlnya.
external : digunakan dengan cara menuliskan selector, atribut, serta value di file yang berbeda, juga dengan cara memanggil file CSS nya di dalam tag <head>.
internal : digunakan dengan cara menuliskan selector, atribut, dan juga value, di bagian dalah tag <head>, dan membuat tag <style> selector, atribut dan valuenya ditulis didalam tag <style>.

Praktek :

Contoh Pertama (Inline), ketikkan script berikut, dengan menggunakan text editor anda :

<!DOCTYPE html>
<html>
<head>
<title>create-script</title>
</head>
<body>
<h1 style="color:blue;">CSS Inline</h1>
</body>
</html>

kemudian save, dan buka di browser, maka hasilnya akan menjadi seperti ini :

Contoh Kedua (Eksternal).

pertama buat file index.html, dan ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
</head>
<body>
    <h1>CSS Eksternal</h1>
</body>
</html>

selanjutnya, kita buat file bernama style.css. ketikkan script berikut :

h1{
color: blue;
}

jika sudah, silakan save satu folder bersama file index.html tadi.

kemudian buka index.html di browser anda. maka hasilnya akan enjadi seperti ini :

Contoh ketiga (internal)

kita ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
<title>create-script</title>
<style>
h1 {
color: blue;
</style>
</head>
<body>
<h1>CSS Internal</h1>
</body>
</html>

kemudian save, dan buka melalui web browser anda. maka hasilnya akan menjadi seperti ini :

D. HASIL YANG DIPEROLEH

Kita dapat menghubungkan HTML dengan CSS menggunakan cara Inline, Eksternal, maupun Internal

E. KESIMPULAN

Menghubungkan HTML dengan CSS sangatlah mudah, tergantung berapa kali anda mengulangi cara diatas, semakin anda mengulangi, maka anda akan semakin paham. karena, script itu tidak perlu dihafalkan, tapi sangat perlu dipahami :).

Sekian Sharing saya pada Kesempatan Kali ini, semoga bermanfaat...

Wassalammualikum Wr. Wb.

Share this