DAFTAR ISI
BAB 1 PENDAHULUAN
1.1 Latar Belakang
1.2 Rumusan Masalah
1.3 Tujuan Penulisan
1.4 Manfaat Penulisan
BAB 2 PEMBAHASAN
2.1 Pengenalan CSS
2.2 Cara Menambahkan CSS ke XHTML
2.3 Contoh Penggunaan CSS dalam XHTML
2.3.1 Mengubah Warna Teks
2.3.2 Mengubah Jenis Font
2.3.3 Mengatur Ukuran Font
2.3.4 Mengatur Jarak Paragraf
2.3.5 Mengatur Margin
2.3.6 Membuat Border
2.3.7 Membuat Background
BAB 3 PENUTUP
3.1 Kesimpulan
3.2 Saran
DAFTAR PUSTAKA
BAB 1 PENDAHULUAN
1.1 Latar Belakang
XHTML (eXtensible Hypertext Markup Language) adalah standar terbaru untuk menggantikan HTML dalam membangun halaman web. Namun, XHTML hanya mendefinisikan struktur dan semantik dari konten, bukan tampilan visualnya. Oleh karena itu diperlukan CSS (Cascading Style Sheets) untuk memformat tampilan elemen XHTML agar lebih menarik.
CSS memungkinkan web developer memisahkan konten dari presentasi. Selain itu CSS memiliki selektor yang kuat untuk menerapkan style secara efisien ke seluruh situs. Dengan menggabungkan XHTML dan CSS, tampilan situs web menjadi lebih interaktif dan responsif terhadap perangkat pengguna (W3Schools, 2022).
Oleh karena itu, pemahaman mengenai penerapan CSS dalam XHTML perlu diketahui oleh web developer. Makalah ini akan membahas beberapa contoh penggunaan CSS untuk memformat elemen XHTML agar menghasilkan tampilan yang menarik.
1.2 Rumusan Masalah
Berdasarkan latar belakang yang telah diuraikan, rumusan masalah dalam makalah ini adalah:
- Bagaimana cara menambahkan CSS eksternal ke dalam dokumen XHTML?
- Bagaimana contoh penerapan CSS dalam memformat elemen dan konten XHTML?
1.3 Tujuan Penulisan
Tujuan dari penulisan makalah ini adalah untuk:
- Menjelaskan cara menambahkan CSS eksternal ke dalam dokumen XHTML.
- Memberikan contoh penerapan CSS dalam memformat elemen dan konten XHTML.
1.4 Manfaat Penulisan
Adapun manfaat yang diharapkan dari penulisan makalah ini adalah:
- Pembaca memahami cara menggabungkan CSS dengan XHTML.
- Pembaca memahami penerapan CSS untuk memformat tampilan elemen XHTML.
- Makalah ini dapat dijadikan referensi bagi mahasiswa Teknik Informatika dalam mempelajari CSS dan XHTML.
BAB 2 PEMBAHASAN
2.1 Pengenalan CSS
CSS (Cascading Style Sheets) adalah bahasa style sheet yang digunakan untuk mengatur tampilan dan format elemen yang tertulis dalam bahasa markup (MDN Web Docs, 2022). CSS memisahkan konten dari presentasi sehingga konten HTML dapat disajikan dengan gaya apapun tanpa mengubah markup.
CSS bekerja dengan cara menyeleksi elemen HTML lalu menerapkan style, seperti warna font, ukuran, margin, padding, dan lainnya. Terdapat 3 metode untuk menambahkan CSS ke dokumen HTML atau XHTML, yaitu inline CSS, embedded CSS, dan external CSS.
Kelebihan CSS antara lain:
- Memisahkan konten dan tampilan
- Kontrol tampilan situs lebih konsisten
- Mudah dikelola dan dimaintenance
- Support responsif web design
- Kaya akan efek styling interaktif
Oleh karena itu CSS sangat penting untuk membangun situs web profesional dengan tampilan yang menarik.
2.2 Cara Menambahkan CSS ke XHTML
Ada 3 cara untuk menambahkan CSS ke dalam dokumen XHTML (W3Schools, 2022):
- Inline CSS CSS dituliskan pada atribut
style
elemen XHTML:
<p style="color: blue;">Teks berwarna biru</p>
- Embedded CSS CSS dituliskan pada elemen
<style>
di bagian<head>
:
<head>
<style>
p {
color: blue;
}
</style>
</head>
- External CSS CSS dituliskan pada file CSS terpisah, lalu difile tersebut diimport ke XHTML menggunakan elemen
<link>
:
<head>
<link rel="stylesheet" href="style.css">
</head>
Cara external CSS merupakan best practice karena memisahkan CSS dari kode XHTML sehingga mudah dikelola nantinya. Oleh karena itu, contoh selanjutnya akan menggunakan external CSS.
2.3 Contoh Penggunaan CSS dalam XHTML
Berikut ini contoh penerapan CSS dalam XHTML untuk memformat tampilan elemen:
2.3.1 Mengubah Warna Teks
Warna teks diubah dengan property color
pada CSS:
p {
color: blue;
}
2.3.2 Mengubah Jenis Font
Jenis font diubah dengan property font-family
:
p {
font-family: Arial;
}
2.3.3 Mengatur Ukuran Font
Ukuran font diatur dengan property font-size
:
h1 {
font-size: 32px;
}
2.3.4 Mengatur Jarak Paragraf
Jarak antar paragraf diatur dengan property margin
:
p {
margin-bottom: 20px;
}
2.3.5 Mengatur Margin
Margin luar elemen diatur dengan property margin
:
div {
margin: 20px;
}
2.3.6 Membuat Border
Border elemen dibuat dengan property border
:
table {
border: 1px solid black;
}
2.3.7 Membuat Background
Background elemen diatur dengan property background
:
body {
background: #f2f2f2;
}
Demikian contoh sederhana penerapan CSS dalam XHTML untuk mempercantik tampilan elemen. Terdapat ratusan properti CSS lainnya yang dapat digunakan untuk membuat tampilan situs web menjadi lebih menarik dan interaktif.
BAB 3 PENUTUP
3.1 Kesimpulan
Berdasarkan pembahasan pada bab sebelumnya, dapat ditarik kesimpulan sebagai berikut:
- CSS digunakan bersama XHTML untuk memisahkan konten dari presentasi situs web.
- CSS dapat ditambahkan ke XHTML dengan 3 cara: inline, embedded, dan external CSS.
- Beberapa contoh penerapan CSS dalam XHTML meliputi mengatur warna, font, ukuran font, margin, padding, border, dan background.
3.2 Saran
Berikut saran untuk penerapan CSS pada situs web berbasis XHTML:
- Gunakan external CSS untuk memisahkannya dari kode XHTML.
- Manfaatkan selektor CSS secara maksimal untuk efisiensi.
- Validasikan kode CSS menggunakan validator online.
- Ujicoba tampilan CSS di berbagai browser dan perangkat.
- Pelajari best practice penulisan CSS yang rapi dan terstruktur.
Dengan menguasai CSS dan XHTML, web developer dapat membangun situs web profesional dengan tampilan yang responsif dan menarik.
DAFTAR PUSTAKA
- MDN Web Docs. (2022). CSS: Cascading Style Sheets. https://developer.mozilla.org/en-US/docs/Web/CSS
- W3Schools. (2022). CSS Introduction. https://www.w3schools.com/css/
- W3Schools. (2022). CSS How To. https://www.w3schools.com/css/css_howto.asp