Cara Menggabungkan CSS dan HTML: Sebuah Langkah Menuju Menguasai Desain Web
Please wait 0 seconds...
Scroll Down and click on GET LINK for destination
Congrats! Link is Generated
Pengembangan web sangat bergantung pada tiga bahasa utama, yaitu HTML, CSS, dan Javascript. HTML menjelaskan struktur situs web, yaitu elemen apa saja yang ada di halaman web.
Cascading Style Sheets (CSS), di sisi lain, menjelaskan bagaimana elemen HTML disajikan secara visual, sedangkan Javascript digunakan untuk menambahkan interaktivitas dan perilaku dinamis ke halaman web.
CSS sangat penting dalam menciptakan antarmuka pengguna yang estetis dengan pengalaman pengguna yang luar biasa. CSS bertanggung jawab atas presentasi dan gaya konten web, dan digunakan untuk mengontrol tata letak, tampilan, dan gaya halaman web.
Misalnya, dengan menggunakan CSS, Anda dapat mengubah cara konten ditampilkan di halaman web Anda dan memodifikasi hal-hal seperti font, warna, batas, margin, spasi, latar belakang, dan lain-lain.
Selain itu, CSS sangat penting dalam membuat situs web responsif yang beradaptasi dengan berbagai ukuran layar dan perangkat. Hal ini juga memungkinkan gaya yang konsisten dan seragam di berbagai halaman situs web dan membantu membuat situs web dapat diakses oleh pengguna penyandang disabilitas.
Jika Anda ingin menyelaraskan situs web Anda dengan merek Anda dan menggunakan warna merek Anda di situs web Anda dengan baik, CSS akan memungkinkan Anda melakukan hal ini.
Tanpa CSS, situs web mungkin akan terlihat sangat mirip, dengan desain yang sangat hambar tanpa gaya, warna, efek hover, atau latar belakang. Situs web juga tidak responsif dan hanya memiliki sedikit penyesuaian untuk menyelaraskan situs web dengan suatu merek.
Oleh karena itu, CSS adalah alat yang sangat penting bagi pengembang web. Untuk menggunakan CSS di situs web Anda, Anda perlu menautkannya dengan HTML halaman. Ingat, HTML menggambarkan elemen dan konten situs web.
Oleh karena itu, Anda perlu menghubungkan HTML Anda dengan CSS untuk menggunakan CSS untuk menata elemen dan konten situs web Anda. Artikel ini akan mengajari Anda cara melakukan ini. Namun, sebelum kita melihat cara menautkan CSS ke HTML, mari kita lihat berbagai cara menulis CSS dan menggunakannya untuk menata gaya elemen HTML Anda.
Cara Menyertakan CSS dalam HTML
Ada tiga cara utama untuk memasukkan CSS ke dalam file HTML Anda. Ini termasuk:
1.Gaya Sebaris
Ini melibatkan penulisan gaya CSS Anda langsung pada setiap elemen HTML, seperti yang ditunjukkan di bawah ini:
<body style="background-color: yellow;"> <h1 style="color: orangered; font-size: 40px;">Bang Wahid Official</h1> <p style="color: blue; font-size: 16px;">Bang Wahid Official is an online publication that produces high-quality articles on
Technology, Business, and Fintech to help businesses and people grow.</p> </body>
Meskipun metode ini memungkinkan Anda menambahkan CSS ke halaman HTML dengan mudah, ini bukanlah cara yang baik untuk menambahkan CSS ke HTML Anda. Hal ini karena sangat memakan waktu, membuat kode sulit dibaca dan dipelihara, terutama untuk penataan gaya berskala besar, dan dapat memengaruhi waktu pemuatan halaman web.
2. CSS dalam Style
Ini melibatkan penulisan gaya untuk halaman web di dalam elemen <style> yang ditempatkan di bagian <head> halaman HTML. Contohnya ditunjukkan di bawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bang Wahid Official</title>
<style>
body {
background-color: yellow;
}
h1 {
color: orangered;
font-size: 40px;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Bang Wahid Official</h1>
<p>Bang Wahid Official is an online publication that produces high-quality articles on
Technology, Business, and Fintech to help businesses and people grow.</p>
</body>
</html>Metode ini, meskipun mudah dilakukan, juga tidak disarankan karena menyulitkan pembagian gaya antar dokumen HTML yang berbeda.
3. Gaya CSS Eksternal
Ini melibatkan pembuatan file CSS terpisah untuk menampung semua gaya halaman HTML Anda. File CSS ini kemudian ditautkan ke dokumen HTML untuk menata elemen pada halaman web. Contoh file CSS eksternal ditunjukkan di bawah ini:
body {
background-color: yellow;
}
h1 {
color: orangered;
font-size: 40px;
}
p {
color: blue;
font-size: 16px;
}Ini adalah pendekatan yang disarankan untuk menambahkan CSS ke dokumen HTML Anda untuk menata halaman web Anda. Tidak hanya memudahkan untuk berbagi gaya antar file yang berbeda, tetapi juga memisahkan HTML dari CSS, menjadikan kode Anda modular, mudah dibaca, dan mudah dipelihara.
Cara Menghubungkan CSS ke HTML
Untuk mempelajari cara menautkan CSS ke HTML, buat folder, dan di dalamnya, buat file HTML bernama index.html dan file CSS bernama style.css. Anda dapat menggunakan nama apa pun untuk kedua file tersebut, tetapi ekstensinya masing-masing harus .html dan .css.
Buka dua file di editor kode Anda. Di file HTML, tempelkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bang Wahid Official</title>
</head>
<body>
<h1>Bang Wahid Official</h1>
<p>Bang Wahid Official is an online publication that produces high-quality articles on
Technology, Business, and Fintech to help businesses and people grow.</p>
<p>Some of the topics covered by Bang Wahid Official include:</p>
<ul>
<li>Programming</li>
<li>Cyber Security</li>
<li>Digital Forensics</li>
<li>Productivity</li>
<li>Gaming</li>
</ul>
</body>
</html>Anda dapat membuka file HTML ini di browser dengan membuka browser, navigasikan ke folder tempat file HTML berada, lalu seret ke browser Anda.
Alternatifnya, Anda dapat mengklik kanan file HTML dan memilih browser apa saja dari daftar drop-down. Mengklik dua kali file tersebut juga akan membukanya dengan browser default di komputer Anda.
Untuk mendeskripsikan bagaimana elemen dalam file HTML di atas ditampilkan lebih bagus, kita memerlukan file CSS dengan semua gaya elemennya. Pada file CSS yang Anda buat, pastekan kode berikut:
body {
background: rgb(245,235,224);
background: linear-gradient(90deg, rgba(245,235,224,1) 0%, rgba(227,213,202,1) 35%, rgba(212,163,115,1) 100%);
}
h1 {
color: #fb5607;
font-size: 40px;
}
p {
color: #0f4c5c;
font-size: 16px;
font-weight: 700;
}
li {
color: #00b4d8;
font-weight: 400;
}Setelah file CSS kita siap, langkah selanjutnya adalah menghubungkannya dengan HTML kita. Untuk menghubungkan file index.html dengan file style.css, tambahkan baris berikut di bagian head file HTML:
<link rel="stylesheet" href="style.css">
Pada baris di atas:
- <link> : adalah elemen HTML yang digunakan untuk menentukan hubungan antara dokumen HTML saat ini dan sumber daya eksternal, dalam kasus ini file CSS. Ini adalah elemen yang kami gunakan untuk menghubungkan file CSS ke file HTML.
- rel=”stylesheet” – rel berarti hubungan. Ini adalah atribut yang ditambahkan ke elemen link untuk menentukan hubungan antara dokumen HTML dan item yang ditautkan ke HTML. Dalam hal ini, disetel ke “stylesheet” untuk menentukan bahwa file yang ditautkan adalah file CSS.
- href=”style.css” : digunakan untuk menentukan path ke file CSS yang kita inginkan ke file HTML kita. Jalur diteruskan ke href sebagai string. Karena file CSS kita berada di folder yang sama dengan file HTML kita, jalurnya hanyalah nama file CSS yang ingin kita tautkan ke HTML kita.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bang Wahid Official</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bang Wahid Official</h1>
<p>Bang Wahid Official is an online publication that produces high-quality articles on
Technology, Business, and Fintech to help businesses and people grow.</p>
<p>Some of the topics covered by Bang Wahid Official include:</p>
<ul>
<li>Programming</li>
<li>Cyber Security</li>
<li>Digital Forensics</li>
<li>Productivity</li>
<li>Gaming</li>
</ul>
</body>
</html>Kemudian save dan lihat pada browser anda.
Praktik Terbaik untuk Menautkan CSS ke HTML
Beberapa praktik terbaik yang harus dipatuhi saat menautkan CSS ke HTML meliputi:
- Gunakan stylesheet eksternal. Saat menautkan HTML ke CSS, ada berbagai cara yang dapat Anda lakukan, cara terbaik dan direkomendasikan adalah dengan menambahkan file CSS eksternal dan menautkannya ke HTML Anda. Dengan cara ini, kode Anda akan bersifat modular, mudah dibaca, mudah di-debug, dan juga mudah dipelihara.
- Tempatkan elemen <link> di bagian kepala dokumen HTML. Kesalahan umum adalah meletakkan elemen <link> di badan HTML. Hal ini menyebabkan kesalahan dan gaya Anda tidak akan ditampilkan pada dokumen HTML Anda.
- Gunakan Jalur Relatif – Saat menautkan CSS ke HTML, Anda juga perlu menentukan lokasi file CSS. Untuk ini, gunakan jalur relatif daripada jalur absolut untuk memastikan proyek Anda portabel.
- Gabungkan file CSS saat digunakan pada halaman yang sama – untuk memastikan kecepatan pemuatan yang lebih cepat dan kinerja situs web yang lebih baik, gabungkan beberapa file CSS ke dalam satu file terutama jika file tersebut berisi gaya untuk satu halaman.
- Pastikan ejaan yang benar saat menghubungkan CSS ke HTML. Kesalahan umum pemula saat menautkan CSS ke HTML adalah salah mengeja rel=”stylesheet” dan menggunakan bentuk jamak “stylesheet”. Jika Anda menautkan CSS ke HTML dan menyadari bahwa gaya Anda tidak muncul, periksa dan pastikan ejaan Anda benar.
Kesimpulan
CSS adalah alat penting dalam membuat situs web estetis yang menyenangkan untuk berinteraksi dan digunakan. Sebagai pengembang, pengetahuan tentang CSS akan membantu Anda menciptakan antarmuka pengguna dan pengalaman pengguna yang lebih baik bagi pengguna Anda. Untuk menggunakan CSS di HTML Anda, buat file CSS eksternal dan ikuti panduan dalam artikel untuk menautkan kedua file dengan benar.
Anda juga dapat menjelajahi cara menggunakan SVG dalam HTML untuk mendesain grafis yang menakjubkan.