PENGERTIAN,SEJARAH DAN CARA KERJA HTML

PENGERTIAN,SEJARAH DAN CARA KERJA HTML



A.PENGERTIAN HTML

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web. HTML memungkinkan kita membuat struktur dasar dari sebuah halaman web, termasuk elemen-elemen seperti teks, gambar, tautan, dan berbagai elemen multimedia.

Berikut adalah detail tentang HTML:

  1. HyperText: "HyperText" mengacu pada teks dengan tautan (link) yang menghubungkan satu dokumen dengan dokumen lainnya. Dengan hyperlink ini, pengguna dapat menavigasi antar halaman di web.
  2. Markup Language: HTML adalah bahasa markup, yang berarti menggunakan tag untuk memberi struktur dan format pada teks. Tag HTML ini menginstruksikan browser tentang cara menampilkan konten yang ada di dalamnya.
  3. Struktur Dasar HTML: Dokumen HTML dimulai dengan deklarasi <!DOCTYPE html>, yang menginformasikan pada browser bahwa dokumen ini menggunakan HTML5, versi terbaru dari HTML. Struktur dasar HTML biasanya terdiri dari tag:
    • <html>: Tag pembuka dokumen HTML.
    • <head>: Bagian ini berisi metadata seperti judul halaman (<title>), referensi stylesheet, dan skrip.
    • <body>: Di dalam tag ini, konten yang akan ditampilkan pada halaman web berada, termasuk teks, gambar, video, dan lainnya.
  4. Tag HTML: HTML terdiri dari elemen-elemen yang didefinisikan dengan tag yang dimulai dan diakhiri dengan kurung sudut. Contohnya, <p> adalah tag paragraf yang digunakan untuk menulis teks. Tag-tag penting dalam HTML meliputi:
    • <h1> hingga <h6>: Digunakan untuk judul atau heading.
    • <p>: Menandai paragraf.
    • <a>: Membuat hyperlink.
    • <img>: Menyisipkan gambar.
    • <ul>, <ol>, dan <li>: Membuat daftar.
    • <div> dan <span>: Digunakan untuk pengelompokan elemen dan pengaturan tata letak.
  5. Atribut HTML: Setiap elemen HTML dapat memiliki atribut untuk memberikan informasi tambahan. Misalnya, atribut href pada tag <a> mendefinisikan tujuan dari sebuah tautan, sementara atribut src pada tag <img> menunjukkan lokasi gambar.
  6. HTML5: HTML5 adalah versi terbaru dari HTML yang memperkenalkan tag-tag baru untuk mendukung berbagai jenis konten seperti audio (<audio>), video (<video>), dan konten grafis interaktif (<canvas> dan <svg>). HTML5 juga memperkenalkan API tambahan untuk mendukung fitur seperti penyimpanan offline, geolokasi, dan lain-lain.

HTML sendiri sebenarnya tidak "memprogram" sebuah halaman karena bersifat statis. HTML hanya menentukan struktur dan konten halaman, sementara tampilan (styling) dan fungsi interaktif biasanya ditangani oleh CSS dan JavaScript.

B.SEJARAH HTML

Sejarah HTML dimulai dari kebutuhan untuk menciptakan cara berbagi dan mengakses informasi di jaringan komputer global. Berikut adalah perkembangan HTML secara detail dari awal hingga saat ini:

1. Asal Mula dan Penemuan HTML (1989–1990)

  • 1989: HTML diciptakan oleh Tim Berners-Lee, seorang ilmuwan komputer Inggris yang bekerja di CERN (Organisasi Eropa untuk Riset Nuklir). Dia mengembangkan ide untuk World Wide Web (WWW), sebuah sistem untuk menghubungkan dokumen melalui internet.
  • Berners-Lee mengusulkan proyek ini agar para ilmuwan bisa berbagi informasi dengan mudah. HTML dirancang sebagai bahasa markup sederhana yang memungkinkan pembuatan dokumen yang dapat berisi teks, gambar, dan tautan (hyperlink) untuk menghubungkan dokumen-dokumen lain.
  • 1990: Berners-Lee menulis perangkat lunak pertama untuk browser web yang disebut WorldWideWeb dan server pertama bernama httpd. Ia juga mengembangkan protokol HTTP (HyperText Transfer Protocol) dan URL (Uniform Resource Locator) untuk mengakses dokumen-dokumen HTML di web.

2. HTML Versi 1.0 (1991–1992)

  • 1991: HTML pertama kali diperkenalkan secara publik oleh Tim Berners-Lee. Versi ini berfungsi sangat mendasar dan hanya memiliki beberapa elemen seperti <p> (paragraf), <h1> hingga <h6> (judul), <a> (tautan), <img> (gambar), dan <ul> / <ol> (daftar).
  • HTML 1.0 tidak memiliki standar formal dan cukup sederhana. Versi awal ini hanya digunakan dalam komunitas ilmiah.

3. HTML Versi 2.0 (1995)

  • 1995: HTML 2.0 dikembangkan oleh Internet Engineering Task Force (IETF) sebagai standar resmi pertama HTML. Ini adalah versi pertama yang diatur dalam dokumen standar dengan dokumen RFC 1866.
  • HTML 2.0 memperkenalkan beberapa fitur dasar yang sekarang dianggap umum, seperti formulir (<form>) untuk menerima input pengguna, elemen <table> untuk tabel, dan lainnya. Ini memastikan kompatibilitas antar browser yang mulai bermunculan pada saat itu.

4. HTML Versi 3.0 dan 3.2 (1997)

  • 1997: HTML 3.0 mencoba memperkenalkan lebih banyak fitur, seperti tata letak yang lebih kompleks dan elemen grafis. Namun, HTML 3.0 terlalu kompleks dan beberapa browser kesulitan mendukungnya, sehingga gagal menjadi standar resmi.
  • HTML 3.2 dikeluarkan oleh World Wide Web Consortium (W3C), yang kemudian mengambil alih standarisasi HTML. HTML 3.2 lebih ringan dan stabil, serta mendukung lebih banyak fitur seperti JavaScript untuk interaktivitas, applets Java, dan elemen <font> untuk styling teks dasar.

5. HTML Versi 4.0 (1997–1999)

  • HTML 4.0 menjadi standar resmi pada Desember 1997 dan disempurnakan pada 1999 (HTML 4.01). HTML 4.0 merupakan peningkatan besar yang memperkenalkan struktur dokumen yang lebih terorganisir dan mendukung CSS (Cascading Style Sheets) untuk memisahkan konten dan gaya visual halaman web.
  • HTML 4.0 juga menambahkan elemen untuk aksesibilitas, dan mengurangi ketergantungan pada elemen presentasional seperti <font> atau <center>. HTML 4.0 memiliki tiga varian utama:
    • Strict: Mengutamakan pemisahan antara struktur dan tampilan.
    • Transitional: Memungkinkan elemen-elemen lama yang masih digunakan.
    • Frameset: Digunakan untuk tata letak berbasis bingkai (frame).

6. Masa Stagnan dan Transisi ke XHTML (2000–2004)

  • Pada tahun 2000, W3C memperkenalkan XHTML 1.0 sebagai evolusi dari HTML 4.0, yang merupakan HTML yang diperketat dan sesuai dengan aturan XML. XHTML memberikan standar yang lebih ketat dan harus ditulis dengan struktur yang benar.
  • XHTML dimaksudkan untuk menggantikan HTML, tetapi banyak pengembang web kesulitan mengadopsinya karena persyaratan penulisan yang ketat dan perubahan besar pada cara penulisan kode.

7. HTML5 (2008 – sekarang)

  • 2004: Setelah beberapa tahun stagnan, sekelompok perusahaan teknologi besar (termasuk Mozilla, Opera, dan Apple) membentuk Web Hypertext Application Technology Working Group (WHATWG) untuk mengembangkan HTML lebih lanjut. Mereka mulai bekerja pada HTML5 sebagai respons terhadap keterbatasan XHTML.
  • 2008: HTML5 resmi diperkenalkan oleh W3C dan WHATWG, yang berkolaborasi untuk mengembangkan spesifikasi HTML5. HTML5 mendukung berbagai fitur baru, termasuk elemen multimedia seperti <audio> dan <video>, elemen grafis interaktif <canvas>, penyimpanan offline, dan API untuk geolokasi, drag-and-drop, dan lain-lain.
  • 2014: HTML5 resmi diakui sebagai standar W3C, menggantikan HTML4 dan XHTML. HTML5 memiliki pendekatan yang lebih fleksibel dibandingkan XHTML, sehingga memungkinkan penggunaan elemen HTML yang tidak sepenuhnya "valid" tanpa memengaruhi tampilan halaman.

8. Perkembangan HTML5 Lanjutan (2016 – sekarang)

  • Pada tahun 2016, HTML5.1 dirilis dengan beberapa pembaruan kecil dan perbaikan bug.
  • HTML5.2: Diperkenalkan pada tahun 2017 oleh W3C, dengan pembaruan fitur seperti elemen <dialog>, <menuitem>, dan penyempurnaan untuk elemen-elemen interaktif.
  • HTML Living Standard: Saat ini, HTML tidak lagi memiliki versi tetap seperti sebelumnya. WHATWG mengelola HTML sebagai "Living Standard" atau standar yang terus diperbarui seiring perkembangan teknologi web.

Ringkasan Perkembangan HTML:

HTML telah berkembang dari HTML 1.0 yang sederhana hingga HTML5 yang kaya fitur, dengan dukungan multimedia, elemen grafis, dan API tambahan yang memungkinkan aplikasi web interaktif. Dengan standar HTML Living Standard, HTML akan terus berevolusi tanpa versi tetap, menjadikannya lebih dinamis dan dapat beradaptasi dengan kebutuhan web masa kini.

C.CARA KERJA HTML

HTML bekerja sebagai bahasa markup yang digunakan untuk membuat struktur dan konten halaman web. Berikut adalah cara kerja HTML secara detail:

1. Menulis dan Menyimpan Kode HTML

  • HTML ditulis dalam bentuk teks biasa menggunakan berbagai elemen atau tag HTML. Kode HTML biasanya disimpan dalam file berekstensi .html atau .htm.
  • HTML tidak memerlukan perangkat lunak khusus untuk ditulis; bisa ditulis menggunakan editor teks seperti Notepad, TextEdit, atau editor kode seperti Visual Studio Code dan Sublime Text.
  • File HTML yang disimpan akan berisi kode yang mengatur struktur halaman, termasuk judul, teks, gambar, tautan, dan elemen lain yang diinginkan.

2. Struktur Dasar Dokumen HTML

3. Penggunaan Elemen HTML untuk Mengatur Konten

  • HTML bekerja dengan elemen-elemen yang diberi tag. Setiap elemen biasanya memiliki tag pembuka (<tagname>) dan tag penutup (</tagname>).
  • Contohnya, untuk membuat paragraf, digunakan elemen <p> seperti berikut:
  • Elemen HTML digunakan untuk berbagai jenis konten:
    • Teks: Menggunakan elemen <p>, <h1> hingga <h6>, <span>, dan <div>.
    • Gambar: Menggunakan tag <img>, di mana atribut src menunjukkan lokasi gambar.
    • Tautan: Menggunakan elemen <a>, dengan atribut href yang menentukan alamat tujuan.
    • Multimedia: Menggunakan elemen <audio>, <video>, dan <canvas> untuk grafis.

4. Penggunaan Atribut untuk Menambahkan Informasi Tambahan

  • Elemen HTML bisa dilengkapi dengan atribut, yaitu informasi tambahan yang disisipkan di dalam tag pembuka. Contoh:
  • Atribut menambah fungsi pada elemen, seperti mengarahkan tautan (dengan href), menentukan gambar (dengan src), atau menambah deskripsi gambar (dengan alt).

5. Memuat Halaman HTML di Browser

  • Ketika file HTML dibuka di browser, browser bekerja dengan cara:
    • Memuat Kode HTML: Browser membaca dan menginterpretasi kode HTML, dari bagian atas hingga bawah.
    • Membangun Struktur DOM (Document Object Model): HTML yang telah dibaca diubah menjadi struktur pohon atau hierarki yang dikenal sebagai DOM. Setiap elemen HTML menjadi sebuah node dalam DOM, yang memungkinkan elemen-elemen ini dapat dimanipulasi menggunakan CSS dan JavaScript.
    • Memuat Sumber Daya Eksternal: Jika ada referensi ke sumber daya lain seperti CSS, JavaScript, atau gambar, browser akan mengirim permintaan HTTP untuk mengambil file-file ini dari server.
    • Merender Halaman: Setelah semua sumber daya yang diperlukan diunduh, browser mulai merender halaman. Hal ini melibatkan penerapan gaya (CSS) dan menjalankan script (JavaScript) jika ada, untuk menghasilkan halaman web interaktif.

6. Pemformatan dan Styling dengan CSS

  • HTML bekerja bersama CSS (Cascading Style Sheets) untuk mengatur tampilan visual halaman. CSS dapat disematkan langsung dalam file HTML atau dimuat sebagai file terpisah.
  • Dengan CSS, kita bisa mengubah warna, ukuran font, margin, padding, posisi elemen, dan banyak lagi. Contohnya:


7. Interaktivitas dengan JavaScript

  • HTML juga dapat dihubungkan dengan JavaScript untuk menambah interaktivitas dan logika ke halaman. JavaScript dapat digunakan untuk membuat halaman yang dinamis dan responsif terhadap tindakan pengguna.
  • Misalnya, JavaScript bisa digunakan untuk menangani klik tombol, memvalidasi formulir, atau memperbarui konten halaman secara real-time.


8. Komunikasi dengan Server melalui HTML Form dan HTTP Request

  • HTML memungkinkan pengguna untuk berinteraksi dengan server melalui elemen formulir (<form>). Pengguna bisa mengisi data di formulir dan mengirimkannya ke server, yang kemudian diproses, misalnya untuk pendaftaran akun atau login.
  • Formulir ini dapat mengirimkan data dengan metode GET atau POST yang menggunakan HTTP request. Contoh:


9. Rendering Halaman dan Tampilan Akhir

  • Setelah semua elemen HTML, CSS, dan JavaScript dimuat dan diproses, browser menampilkan hasilnya kepada pengguna.
  • Setiap browser memiliki mesin rendering yang mengatur bagaimana HTML dan CSS ditampilkan (misalnya, Chrome menggunakan mesin Blink dan Firefox menggunakan Gecko). Mesin rendering memastikan bahwa halaman tampil sesuai dengan kode HTML dan CSS yang telah ditentukan, walaupun terdapat sedikit perbedaan antar browser.

10. Peran HTML Living Standard

  • HTML terus berkembang sebagai standar hidup ("Living Standard"), yang berarti bahwa fitur-fitur baru diperkenalkan dan diterapkan oleh browser modern seiring waktu.
  • Pengembang web saat ini menggunakan HTML dengan mengacu pada spesifikasi terbaru yang terus diperbarui oleh organisasi seperti WHATWG (Web Hypertext Application Technology Working Group).

Secara keseluruhan, HTML bekerja sebagai kerangka dasar yang membangun dan mengatur konten halaman web. Dalam kombinasi dengan CSS untuk tampilan dan JavaScript untuk interaktivitas, HTML memungkinkan pengguna mengakses halaman

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat VLAN Trunk di Mikrotik

Gambar
                                           Cara Membuat VLAN Trunk di Mikrotik Kita mulai dari setting VLAN Mikrotik Gedung 1 : Login ke Mikrotik gedung 1 melalui Winbox. Jika belum punya, silakan  Download Winbox Mikrotik  dulu. Membuat interface VLAN di Mikrotik dengan masuk ke menu  Interfaces  –> Klik icon  +  pilih  VLAN  –> masukkan data berikut : Name  : nama VLAN misal  VLAN 10 HRD VLAN ID  : 10 Interface  : ether1 OK Cara Membuat VLAN di Mikrotik Ulangi langkah tersebut untuk membuat interface VLAN lain nya, sehingga semua VLAN yang dibutuhkan sudah muncul seperti gambar berikut : Cara Membuat VLAN Trunk di Mikrotik Oke, sampai disini kita sudah bisa membuat interface VLAN di Mikrotik dan menjadikan interface ether1 sebagai Trunk yang akan melewatkan 3 VLAN ke Mikrotik di Gedung Sebelah. Cara Konfigurasi ...
Baca selengkapnya

CARA MENGHUBUNGKAN 2 PC DENGAN 1 MIKROTIK

Gambar
 CARA MENGHUBUNGKAN 2 PC MENGGUNAKAN 1 MIKROTIK Untuk menghubungkan dua (2) PC menggunakan satu (1) perangkat Mikrotik, kita membutuhkan beberapa alat dan perangkat jaringan. Berikut adalah perangkat utama yang digunakan untuk membangun koneksi antara dua (2) PC dengan menggunakan satu (1) Mikrotik: 1.komputer/laptop 2. Mikrotik router 3.Kabel Ethernet ( UTP Cable) Langkah-langkah untuk menghubungkan 2 PC melalui Mikrotik: 1. Langkah pertama lakukan penginstalan Winbox pada PC / Komputer terlebih dahulu. 2.Setelah proses penginstalan selesai (sebelum masuk ke Winbox) tancapkan kabel ethernet tersebut ke Mikrotik dengan benar. Jadi disini kita membutuhkan 2 kabel Ethernet yaitu untuk (Ether 2 ke PC 1) lalu (Ether 3 ke PC 2). 3.Langkah selanjutnya kita buka Winbox 4. Setelah masuk ke tampilan pada Winbox  buka menu IP > Addresses . y>OK . 5. Lalu klik (+) > Masukkan IP contoh: 192.168.10.1/24 atau terserah kalian jika ingin menggunakan IP lain. Jika sudah klik interfac...
Baca selengkapnya

CARA MENGHUBUNGKAN 2 PC DENGAN 1 MIKROTIK DENGAN IP DYNAMIC

Gambar
CARA MENGHUBUNGKAN 2 PC DENGAN 1 MIKROTIK MENGGUNAKAN IP DYNAMIC Cara setting mikrotik dengan menggunakan 2 buah PC. Berikut adalah alat bahan yang dibutuhkan dan langkah langkah selama melakukan setting mikrotik. Alat dan Bahan: 1. Komputer / Laptop 2 . Mikrotik 3. Kabel LAN Langkah Langkah: 1. Langkah awal adalah  download Winbox, dan menghubungkan Winbox tersebut dengan mikrotik dengan susunan ether 2 ke PC yang sudah di instal Winbox dan ether 3 ke pc 2 dan login ke Winbox tersebut. 2 . Masuk ke IP>Address 3. klik (+) masukkan IP sesuai perintah yang sudah ditunjukkan untuk ether 2 dan kilk Apply>OK 4. Selanjutnya klik (+) dan masukkan IP lagi untuk ether 3 dan klik Apply>OK 5.  Selanjutnya kita pergi ke Control Panel>Network and Internet   6. Kemudian klik Network and Internet Sharing Center 7. Pada pojok kiri, klik bagian Change Adapter Setting>Ethernet 8. Setelah itu muncul tampilan seperti ini, klik Properties 9. Lalu klik Internet Protocol Ve...
Baca selengkapnya