Dasar HTML

Alfath Rajif

July 3, 2023

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML digunakan untuk memberi tahu browser bagaimana menampilkan konten pada halaman web, termasuk teks, gambar, video, tabel, dan elemen lainnya. HTML sangat penting dalam pembuatan website karena merupakan dasar dari tampilan dan struktur dari halaman web.

Sejarah HTML

HTML pertama kali dikembangkan pada tahun 1990 oleh Tim Berners-Lee di CERN, Swiss. HTML awalnya dirancang untuk digunakan dengan dokumen yang berisi teks dan hyperlink antara dokumen-dokumen tersebut. Saat ini, HTML telah berkembang menjadi bahasa markup yang sangat canggih dan dapat digunakan untuk membuat halaman web yang kompleks.

Struktur HTML

Setiap halaman web terdiri dari elemen-elemen HTML yang disusun dalam struktur hierarkis. Struktur dasar dari halaman web terdiri dari elemen-elemen berikut:

Dokumen HTML
Head
Body

Dokumen HTML adalah elemen utama dari setiap halaman web. Setiap dokumen HTML harus dimulai dengan tag <html> dan diakhiri dengan tag </html>. Bagian head dari halaman web berisi informasi tentang dokumen seperti judul, meta tag, dan script. Bagian body berisi konten utama dari halaman web seperti teks, gambar, video, dan elemen interaktif lainnya.

Setiap elemen HTML terdiri dari tag pembuka dan tag penutup. Tag pembuka selalu dimulai dengan tanda kurung siku (<) diikuti dengan nama elemen dan diakhiri dengan tanda kurung siku tutup (>). Tag penutup selalu dimulai dengan tanda kurung siku (<) diikuti dengan garis miring (/), nama elemen, dan diakhiri dengan tanda kurung siku tutup (>). Beberapa elemen HTML tidak memerlukan tag penutup seperti elemen gambar dan elemen input.

Contoh kode HTML sederhana:

Pada contoh di atas, dokumen HTML dimulai dengan tag <!DOCTYPE html> yang menunjukkan jenis dokumen HTML yang digunakan. Selanjutnya, dokumen HTML terdiri dari elemen-elemen head dan body yang dijelaskan sebelumnya. Bagian head berisi judul halaman web dan bagian body berisi dua paragraf teks.

Elemen HTML

Ada banyak elemen HTML yang dapat digunakan untuk membuat halaman web. Beberapa elemen HTML umum yang sering digunakan antara lain:

Heading (H1 – H6): Elemen heading digunakan untuk menampilkan judul atau subjudul pada halaman web.
Paragraph (P): Elemen paragraph digunakan untuk menampilkan teks pada halaman web.
Link (A): Elemen link digunakan untuk membuat hyperlink yang mengarah ke halaman web atau dokumen lain.
Image (IMG): Elemen image digunakan untuk menampilkan gambar pada halaman web.
List (UL, OL, LI): Elemen list digunakan untuk membuat daftar pada halaman web. Ada dua jenis list yang dapat digunakan yaitu unordered list (UL) dan ordered list (OL). Setiap item dalam list ditandai dengan elemen list item (LI).
Table (TABLE, TR, TD): Elemen table digunakan untuk membuat tabel pada halaman web. Elemen table terdiri dari elemen row (TR) dan elemen data (TD) yang menampilkan data dalam bentuk tabel.
Form (FORM, INPUT): Elemen form digunakan untuk membuat formulir pada halaman web. Elemen input digunakan untuk membuat input field seperti teks box, radio button, dan checkbox.
Div dan Span: Elemen div dan span digunakan untuk mengelompokkan dan memformat konten pada halaman web.

CSS dan JavaScript

Selain HTML, halaman web juga dapat menggunakan CSS (Cascading Style Sheets) dan JavaScript untuk memperbaiki tampilan dan fungsionalitas dari halaman web. CSS digunakan untuk memperbaiki tampilan halaman web seperti mengubah warna, ukuran, dan layout dari elemen HTML. JavaScript digunakan untuk membuat efek interaktif seperti popup, animasi, dan validasi formulir.

Kesimpulan

HTML adalah bahasa markup yang sangat penting dalam pembuatan halaman web. Setiap halaman web terdiri dari elemen-elemen HTML yang disusun dalam struktur hierarkis. Elemen-elemen HTML dapat digunakan untuk menampilkan teks, gambar, video, tabel, dan elemen interaktif lainnya. Selain HTML, halaman web juga dapat menggunakan CSS dan JavaScript untuk memperbaiki tampilan dan fungsionalitas dari halaman web.

Dasar CSS

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk memperbaiki tampilan halaman web yang dibuat menggunakan HTML. CSS memungkinkan pengguna untuk memisahkan tampilan dan konten dari sebuah halaman web, sehingga memudahkan pengguna untuk membuat perubahan pada tampilan halaman web tanpa mengubah konten yang ada.

Sejarah CSS

CSS pertama kali diperkenalkan pada tahun 1996 oleh W3C (World Wide Web Consortium). Tujuan utama CSS adalah untuk memisahkan tampilan dari konten pada halaman web, sehingga memudahkan pengguna untuk membuat perubahan pada tampilan halaman web tanpa mengubah konten yang ada. Sejak saat itu, CSS telah berkembang menjadi bahasa stylesheet yang sangat canggih dan dapat digunakan untuk membuat tampilan yang kompleks pada halaman web.

Struktur CSS

CSS terdiri dari aturan-aturan CSS yang didefinisikan dalam file terpisah atau ditulis langsung di dalam dokumen HTML. Setiap aturan CSS terdiri dari selektor dan deklarasi. Selektor digunakan untuk memilih elemen HTML yang akan diberi gaya, sedangkan deklarasi digunakan untuk menentukan gaya yang akan diterapkan pada elemen HTML tersebut.

Contoh aturan CSS sederhana:

Pada contoh di atas, aturan CSS diterapkan pada elemen heading 1 (h1). Deklarasi color: red menentukan warna teks menjadi merah, sedangkan deklarasi font-size: 24px menentukan ukuran font menjadi 24 piksel.

Selektor CSS

Selektor CSS digunakan untuk memilih elemen HTML yang akan diberi gaya. Ada beberapa jenis selektor CSS yang dapat digunakan antara lain:

Selektor elemen: Memilih elemen HTML berdasarkan jenis elemen. Contoh: h1, p, div.
Selektor ID: Memilih elemen HTML berdasarkan ID yang ditentukan. Contoh: #header, #sidebar.
Selektor class: Memilih elemen HTML berdasarkan class yang ditentukan. Contoh: .menu, .content.
Selektor atribut: Memilih elemen HTML berdasarkan atribut yang ditentukan. Contoh: [type=”text”], [href].

Deklarasi CSS

Deklarasi CSS digunakan untuk menentukan gaya yang akan diterapkan pada elemen HTML yang telah dipilih menggunakan selektor CSS. Setiap deklarasi terdiri dari properti dan nilai. Properti menentukan jenis gaya yang akan diatur, seperti warna, ukuran, dan posisi. Nilai menentukan nilai dari properti yang telah ditentukan.

Contoh deklarasi CSS:

Pada contoh di atas, properti color menentukan warna teks menjadi merah, properti font-size menentukan ukuran font menjadi 24 piksel, dan properti background-color menentukan warna latar belakang menjadi putih (#ffffff).

Kesimpulan

CSS adalah bahasa stylesheet yang sangat penting dalam pembuatan halaman web. CSS memungkinkan pengguna untuk memisahkan tampilan dan konten pada halaman web, sehingga memudahkan pengguna untuk membuat perubahan pada tampilan halaman web tanpa mengubah konten yang ada. CSS terdiri dari aturan-aturan CSS yang didefinisikan dalam file terpisah atau ditulis langsung di dalam dokumen HTML. Setiap aturan CSS terdiri dari selektor dan deklarasi. Selektor digunakan untuk memilih elemen HTML yang akan diberi gaya, sedangkan deklarasi digunakan untuk menentukan gaya yang akan diterapkan pada elemen HTML tersebut.

Ada beberapa jenis selektor CSS yang dapat digunakan antara lain selektor elemen, selektor ID, selektor class, dan selektor atribut. Sedangkan deklarasi CSS terdiri dari properti dan nilai yang menentukan jenis gaya dan nilai dari properti tersebut. CSS juga dapat digunakan untuk membuat animasi, transisi, dan efek interaktif pada halaman web.

Dalam prakteknya, CSS digunakan bersama dengan HTML dan JavaScript untuk membuat halaman web yang interaktif dan menarik. Sebagai contoh, CSS digunakan untuk memperbaiki tampilan elemen HTML seperti header, footer, menu, dan konten pada halaman web. CSS juga digunakan untuk membuat tampilan responsif yang menyesuaikan dengan ukuran layar pada perangkat yang berbeda.

Kesimpulannya, CSS merupakan salah satu teknologi penting dalam pembuatan halaman web modern. Dengan memahami konsep dasar CSS, pengguna dapat membuat tampilan halaman web yang menarik dan responsif.