Pin It

Kehadiran HTML5 merupakan terobosan besar dalam dunia internet khususnya untuk mendesain sebuah website. HTML5 hadir dengan banyak fitur baru dan juga menghilangkan beberapa fitur lain yang dimiliki HTML versi sebelumnya. Dalam pembuatan website, HTML5 berperan menentukan banyak tipe konten seperti heading, paragraf, list, image, canvas, multimedia dan sebagainya, sedangkan CSS berperan menentukan background, margin, warna, font-family, alignment dan sebagainya.

CSS dapat disertakan langsung di dalam file HTML dan dapat pula diletakkan di dalam file terpisah. CSS sebagai file terpisah lebih disukai karena dapat digunakan oleh lebih dari satu file HTML dan menjadikan tampilan halaman web (web page) lebih seragam. Apabila CSS disertakan langsung ke dalam file HTML, ini akan menjadi lebih sulit ketika melakukan perubahan-perubahan pada tampilan website yang sedang dibangun, terlebih lagi apabila perubahan terjadi pada banyak file HTML. Berikut ini adalah contoh korelasi antara HTML dan CSS dimana sebuah file HTML menentukan konten web dan file CSS berfungsi untuk memperindah tampilan.

<!DOCTYPE html>
<html>
<head>
<title>Korelasi CSS dan HTML</title>
<link rel="stylesheet" type="text/css" href="cssfile/cssparagraf1.css">
</head>
<body>
<h1>API Dan Edisi Java</h1>
<p>Setiap bahasa pemrograman mempunyai sintak penulisannya sendiri. Apabila Anda mengabaikan aturan tersebut, komputer tidak bisa mengenali dan mengerti kode program yang ditulis. Spesifikasi bahasa Java adalah definisi teknis bahasa Java yang memuat sintak dan semantik. Spesifikasi bahasa Java dan API (Application Program Interface) Java menetapkan standar tersebut.</p>
<p>API Java memuat kelas (class) dan interfes (interface) yang digunakan untuk membuat dan mengembangkan program Java. Spesifikasi bahasa Java relatif tidak berubah, tetapi API Java akan terus mengalami perkembangan. Anda dapat mengunduh versi  terbaru Java (J2SE) serta memperbaharui API Java di situs resminya.</p>
</body>
</html>

File CSS cssparagraf1.css yang memperindah tampilan file HTML.

body {background-color: #f9fab0}
h1 { color: #f73110; text-align: center}
p {color: #1807bd; font-family: "Tahoma"; font-size: 12px}

Tampilan file HTML yang diperindah dengan file CSS di bagian elemen link.

Korelasi CSS dan HTML