◜⁠✧｡⁠ﾟ☆CARA KERJA HTML☆ﾟ｡⁠⁠✧◜

pada tanggal


 ◜⁠✧｡⁠ﾟ☆CARA KERJA HTML☆ﾟ｡⁠⁠✧◜





Nah kita lanjut disini ya pembahasan detail cara kerja HTML-nya!

Cara kerja HTML (HyperText Markup Language) dapat dipahami melalui proses rendering yang terjadi saat kita mengakses sebuah halaman web menggunakan browser. Secara umum, HTML adalah bahasa markup yang memberi struktur dan konten pada halaman web, tetapi untuk menampilkan halaman tersebut dengan benar di browser, HTML perlu bekerja bersama dengan teknologi lain, seperti CSS dan JavaScript.


1. Penulisan dan Struktur HTML

HTML terdiri dari elemen-elemen yang disebut tag. Tag-tag ini digunakan untuk memberi struktur pada halaman web. Sebagai contoh:


Pada contoh di atas, kita melihat beberapa elemen HTML dasar:

  • <html>: Menandakan awal dan akhir dari dokumen HTML.
  • <head>: Bagian ini berisi informasi meta tentang halaman, seperti judul dan tautan ke file CSS atau JavaScript.
  • <body>: Bagian ini berisi konten utama halaman web, yang akan ditampilkan ke pengguna.
  • <h1>: Heading utama halaman.
  • <p>: Paragraf teks.


2. Proses Rendering di Browser

Saat pengguna mengakses halaman web menggunakan browser, berikut adalah tahapan cara kerja HTML yang terlibat:

a. Permintaan ke Server (HTTP Request)
1.Pengguna memasukkan URL (misalnya: https://www.example.com) ke browser.
2.Browser mengirimkan permintaan HTTP ke server yang menyimpan halaman web tersebut.

b. Pengambilan Halaman HTML (HTTP Response)
3.Server merespons dengan mengirimkan file HTML (beserta file lain seperti CSS, JavaScript, gambar, dll.) ke browser.
4.Browser mulai menerima file HTML tersebut dan memulai proses rendering.

c. Parsing HTML
5.HTML Parser di browser mulai membaca file HTML dan memecahnya menjadi DOM (Document Object Model), yaitu struktur pohon (tree) yang menggambarkan elemen-elemen dalam dokumen.
  • Setiap elemen HTML seperti <h1>, <p>, dan <div> diubah menjadi node dalam pohon DOM.
  • Misalnya, tag <h1> menjadi node yang berisi teks "Selamat datang di halaman saya!".
d. Menerapkan CSS
6.Setelah HTML diparsing dan DOM dibangun, browser mulai mencari file CSS yang terkait (baik di dalam file HTML atau di file terpisah) untuk mengetahui bagaimana elemen HTML harus ditata atau diposisikan di halaman.
  • CSS digunakan untuk menentukan warna, font, margin, padding, layout, dan berbagai gaya visual lainnya.
  • Misalnya, jika ada perintah CSS seperti h1 { color: red; }, browser akan mengganti warna teks dalam tag <h1> menjadi merah.
e. Menerapkan JavaScript (Jika Ada)
7.Jika file JavaScript disertakan dalam halaman (misalnya, <script> di dalam tag <body> atau <head>), browser akan mengeksekusi kode JavaScript untuk menambah interaktivitas atau fungsionalitas tambahan pada halaman.
  • JavaScript dapat digunakan untuk menangani peristiwa (events), seperti klik tombol, input pengguna, dan manipulasi elemen DOM secara dinamis.
  • JavaScript juga bisa memodifikasi struktur DOM secara langsung, seperti menambahkan atau menghapus elemen HTML di halaman.
f. Rendering (Penyusunan Tampilan)
8.Setelah semua elemen HTML diparsing, CSS diterapkan, dan JavaScript dijalankan, browser membangun halaman yang terlihat di layar pengguna.
  • Browser menggunakan Render Tree untuk menggambar elemen-elemen visual di halaman, menempatkan mereka pada posisi yang benar, dan menampilkan mereka dalam urutan yang tepat.
g. Interaktivitas dan Penggunaan Lanjutan
9.Setelah halaman dimuat sepenuhnya, pengguna bisa berinteraksi dengan halaman menggunakan JavaScript, mengklik tombol, mengisi formulir, atau bahkan memuat konten baru tanpa perlu memuat ulang seluruh halaman (dengan menggunakan teknik seperti AJAX atau Fetch API).



3. Pentingnya HTML dalam Proses Rendering

HTML adalah struktur dasar dari halaman web. Tanpa HTML, browser tidak akan tahu apa yang harus ditampilkan kepada pengguna. HTML memberikan:
  • Struktur halaman web (seperti teks, gambar, dan link).
  • Konten yang ditampilkan kepada pengguna (seperti teks, gambar, video).
  • Semantik untuk elemen halaman (seperti artikel, tajuk, daftar).
Namun, untuk tampilan visual dan interaktivitas yang lebih kompleks, HTML harus bekerja bersama CSS untuk styling dan JavaScript untuk interaktivitas.


4. HTML, CSS, dan JavaScript: Kolaborasi dalam Pembuatan Web
  • HTML memberikan struktur dan konten.
  • CSS menangani tampilan (style) elemen-elemen yang ada di halaman, seperti warna, ukuran font, margin, dan lainnya.
  • JavaScript memberikan kemampuan interaktif, seperti validasi form, animasi, pemuatan konten dinamis, dan manipulasi DOM.
Contoh Gabungan HTML, CSS, dan JavaScript:


Dalam contoh ini:
  • HTML menyediakan struktur dan konten (judul, tombol, dan paragraf).
  • CSS mendefinisikan gaya (warna latar belakang kuning untuk kelas .highlight).
  • JavaScript menambahkan interaktivitas dengan menyorot teks saat tombol diklik.



Semangat buat kalian yang lagi diterkam tugas!


Komentar

Posting Komentar