HTML & CSS BASIC

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa markup standar yang digunakan untuk membuat dan memformat konten di web. HTML adalah dasar dari halaman web dan digunakan untuk mendefinisikan struktur dan tata letak konten pada halaman web, seperti judul, paragraf, tautan, gambar, dan lainnya.

HTML menggunakan sistem tag yang dikelilingi tanda kurung sudut (“<>” dan “</>”) untuk mendefinisikan elemen-elemen dan properti-properti mereka. Setiap elemen HTML memiliki tujuan tertentu dan membantu browser memahami bagaimana cara menampilkan konten kepada pengguna. Sebagai contoh, Anda dapat menggunakan HTML untuk membuat judul, daftar, tabel, formulir, dan berbagai jenis konten lainnya yang membentuk sebuah halaman web.

HTML sering digunakan bersama dengan teknologi lain seperti Cascading Style Sheets (CSS) untuk mengatur gaya tampilan, dan JavaScript untuk menambahkan interaktivitas pada halaman web. Ketika browser web memuat dokumen HTML, browser tersebut menginterpretasikan tag-tag HTML dan merender kontennya sesuai, sehingga memungkinkan pengguna untuk melihat dan berinteraksi dengan halaman web tersebut.

Sejarah HTML

HTML pertama kali dikembangkan oleh Tim Berners-Lee pada awal tahun 1990-an. Tim Berners-Lee adalah ilmuwan komputer asal Inggris yang bekerja di CERN (Organisasi Riset Nuklir Eropa) pada saat itu. Ia menciptakan HTML sebagai bagian dari proyek untuk membangun sistem informasi yang memungkinkan para ilmuwan di seluruh dunia untuk berbagi dan mengakses informasi secara efisien.

Pada tahun 1993, versi pertama HTML diterbitkan dengan nama “HTML Tags.” Versi awal ini memiliki elemen-elemen dasar seperti judul, tautan, gambar, dan paragraf. Kemudian, pada tahun 1995, Tim Berners-Lee merilis “HTML 2.0,” yang menambahkan lebih banyak elemen dan fitur seperti formulir dan tabel.

Perkembangan HTML terus berlanjut, dan pada tahun 1997, “HTML 4.0” dirilis dengan fitur-fitur yang lebih lengkap dan kompleks, termasuk dukungan untuk gaya tampilan menggunakan Cascading Style Sheets (CSS). Selama beberapa tahun berikutnya, berbagai versi HTML dan perbaikan terus dirilis.

Salah satu perkembangan paling signifikan dalam sejarah HTML adalah pengenalan HTML5. HTML5, yang pertama kali diusulkan pada tahun 2004 dan dirilis secara resmi pada tahun 2014, membawa banyak perubahan dan perbaikan signifikan. HTML5 tidak hanya menghadirkan elemen dan atribut baru, tetapi juga menambahkan dukungan untuk media seperti audio dan video tanpa perlu plugin tambahan.

HTML5 juga memperkenalkan elemen semantik yang lebih jelas untuk membantu mesin pencari dan pengembang memahami struktur konten dengan lebih baik. Selain itu, HTML5 membawa perbaikan dalam hal aksesibilitas, performa, dan pengalaman pengguna.

Sejak HTML5, HTML terus mengalami evolusi dengan penambahan fitur dan peningkatan dalam setiap rilisnya. Perkembangan ini terus mendorong kemajuan web dan membuat pengalaman browsing menjadi lebih interaktif, menarik, dan kaya akan konten.

Komponen – Komponen Pada HTML

  • Elemen
    dasar dari struktur sebuah halaman web. Setiap elemen didefinisikan dengan menggunakan tag HTML yang dikelilingi oleh tanda kurung sudut “<>” dan “</>”. Contoh <h1> –  <h6>, paragraf <p>, tautan <a>, gambar <img>, dan banyak lagi.
  • Tag
    Digunakan untuk membungkus elemen dan memberikan instruksi tentang bagaimana elemen tersebut harus ditampilkan atau diolah oleh browser
  • Atribut
    Atribut HTML memberikan informasi tambahan tentang elemen dan bagaimana elemen tersebut seharusnya berperilaku. Atribut ditambahkan ke dalam tag menggunakan sintaksis atribut=”nilai”. Contoh atribut adalah href dalam tag tautan <a>, src dalam tag gambar <img>, dan lain-lain.
  • Elemen Semantik
    elemen yang memberikan makna dan konteks kepada struktur halaman web. Contoh elemen semantik termasuk <header>, <nav>, <main>, <article>, <section>, dan lain-lain.
  • Formulir
    Elemen formulir <form> digunakan untuk mengumpulkan input dari pengguna, seperti teks, pilihan, dan tombol. Elemen formulir juga dapat mencakup elemen seperti <input>, <select>, <textarea>, dan <button>.
  • Tabel
    Elemen tabel <table> digunakan untuk membuat tabel data. Tabel terdiri dari baris <tr>, sel header <th>, dan sel data <td>.
  • Daftar
    Elemen daftar digunakan untuk mengorganisir dan menyajikan informasi dalam bentuk daftar. Ada dua jenis utama daftar: daftar terurut <ol> dan daftar tak terurut <ul>.
  • Gaya dan Penyusun (Styling and Layout)
    Walaupun HTML digunakan untuk mengatur struktur konten, gaya dan tata letak halaman web dapat diatur menggunakan CSS (Cascading Style Sheets).
  • Media
    Elemen media seperti <img> untuk gambar, <audio> untuk audio, dan <video> untuk video memungkinkan Anda untuk menyisipkan media ke dalam halaman web.
  • Meta Informasi
    Elemen <meta> digunakan untuk menyisipkan informasi metadata ke dalam halaman web, seperti deskripsi halaman, karakter set, dan tag lain yang mendefinisikan informasi tentang halaman.

Contoh Codingan Pada HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Preview

Document

Hello World

Aturan Pada CSS

  • Selector
    Selector ditempatkan pada awal penulisan CSS. Selector bisa berupa tag HTML, class, id, atau atribut. Contoh selector adalah <body>, <p>, <h1>, <h2>, dan lainnya
    Contoh Codingan :
body { ... }
p { ... }
h1, h2 { ... } 
  • Blok Deklarasi
    Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara kurung kurawal { dan }
    Contoh Codingan :
body {
    font-size: 14px;
    color: navy;
}
  • Property dan Value
    Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;). Diantara property dengan value (nilai), dipisahkan dengan tanda titik dua (:)
    Contoh Codingan :
body {
    font-size: 14px;
    color: navy;
}
  • Pemisahan Selector
    Untuk selector yang lebih dari satu (seperti pada contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut, digunakan tanda koma (,)
    Contoh Codingan :
h1, h2 {
    text-decoration: underline;
    font-size: 23px;
    color: green;
}
  • Komentar
    Komentar di CSS dimulai dengan tanda /* dan diakhiri dengan */. Komentar biasanya digunakan untuk memberikan informasi tambahan atau menonaktifkan beberapa kode tertentu
    Contoh Codingan :
/* ini adalah komentar */

Subscribe

Related articles

Web Developer | Pengalaman Magang di Udacoding

Udacoding menjadi salah satu tempat, dimana peserta magang...

Segala Hal yang Perlu Kamu Tahu tentang Dark Theme

Ngomongin mode gelap, kayaknya sekarang lagi jadi yang hits...

TinyMCE: Solusi Praktis untuk Konten Web yang Lebih Interaktif

TinyMCE adalah alat untuk membuat dan mengedit teks di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here