Dasar-Dasar Mengembangkan Website Menggunakan HTML Elements dan HTML CSS

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web. HTML terdiri dari berbagai elemen yang membantu menyusun konten, seperti teks, gambar, dan tautan. Setiap elemen HTML ditandai dengan tag, yang biasanya terdiri dari tag pembuka dan tag penutup.

HTML memberikan struktur dasar bagi halaman web dengan menggunakan elemen-elemen seperti heading, paragraf, tautan, gambar, daftar, dan lain sebagainya. Setiap elemen HTML diberi tanda dengan tag pembuka dan tag penutup yang menunjukkan bagaimana konten harus ditampilkan pada browser.

Sebagai bahasa markup utama untuk web, HTML memiliki pengguna yang sangat banyak. Hingga saat ini diperkirakan dari 2 miliar website, sekitar 1,9 miliarnya menggunakan HTML. Dari jumlah tersebut, sekitar 190 juta website merupakan pengguna HTML yang aktif.

Kemampuannya dalam menyusun dan menyajikan konten secara terstruktur, membuat HTML menjadi pondasi penting dalam pembangunan halaman web yang efisien dan mudah diakses oleh berbagai perangkat.

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digubakan untuk mengatur tampilan website, seperti warna, font, dll.CSS berperan penting dalam mengembangkan website karena memisahkan kode dari halaman dan tampilan visualnya, CSS juga dapat digunakan bersamaan dengan HTML, di mana HTML merupakan bahasa markup yang berfungsi sebagai fondasi website.

Kegunaan CSS 

CSS memiliki berbagai kegunaan dalam pengembangan website, berikut adalah beberapa kegunaan dari CSS :

1. Mengatur Tampilan

CSS digunakan untuk mengatur tampilan elemen HTML, seperti warna, font, ukuran, dan tata letak. Anda dapat membuat teks berwarna, menambah latar belakang, dan mengubah ukuran elemen.

2. Layout Halaman

CSS memungkinkan Anda untuk mengatur tata letak halaman web. Dengan properti seperti flexbox dan grid, Anda dapat dengan mudah membuat desain responsif yang beradaptasi dengan berbagai ukuran layar.

3. Desain Responsif

CSS membantu membuat situs web responsif yang dapat menyesuaikan tampilan di perangkat yang berbeda (desktop, tablet, ponsel). Dengan media queries, Anda dapat menentukan gaya khusus untuk berbagai ukuran layar.

4. Pemisahan Konten dan Presentasi

CSS memisahkan konten (HTML) dari presentasi (CSS). Ini membuat pemeliharaan lebih mudah, karena Anda dapat mengubah tampilan tanpa mengubah struktur konten.

5. Animasi dan Transisi

CSS memungkinkan Anda untuk menambahkan animasi dan transisi pada elemen, memberikan efek visual yang menarik dan meningkatkan pengalaman pengguna.

6. Membuat Tema

Dengan CSS, Anda dapat membuat tema yang berbeda untuk situs web Anda. Cukup dengan mengubah file CSS, Anda dapat mengubah keseluruhan tampilan situs tanpa mengubah HTML.

7. Aksesibilitas

CSS dapat meningkatkan aksesibilitas situs web. Dengan menggunakan warna yang kontras dan ukuran font yang sesuai, Anda dapat membuat konten lebih mudah diakses oleh semua pengguna.

Langkah-Langkah Membuat HTML :

1. Siapkan Alat

Anda hanya perlu teks editor (seperti Notepad, Visual Studio Code, atau Sublime Text) dan browser (seperti Chrome, Firefox, atau Edge) untuk melihat hasilnya.

2. Buat File HTML

1. Buka teks editor.
2. Buat file baru dan simpan dengan nama, misalnya index.html.

3. Struktur Dasar HTML

Masukkan kode berikut ke dalam file yang baru dibuat:

5. Simpan dan Tampilkan di Browser

1. Simpan file setelah menambahkan kode.
2. Buka browser, lalu seret file index.html ke dalam jendela browser, atau klik kanan file dan pilih "Open with" > "Browser".

6. Lihat Hasil HTML :

Dokumen Pribadi

Cara Mengaitkan CSS ke HTML

untuk menghubungkan CSS ke HTML caranya sangat mudah. cukup gunakan tag <link> saja. tag <link> di letakkan di element head pada sturktur HTML.

Dokumen Pribadi

Kesimpulan 

HTML dan CSS merupakan dua komponen fundamental ketika ingin mengembangkan sebuah website. Dengan memahami cara menggunakannya bisa sangat membantu dalam membuat website yang menarik. Dengan praktik yang lebih lanjut, anda dapat menciptakan pengalaman pengguna yang lebih baik dan dapat membuat situs website yang lebih profesional.