Cara kerja HTML

HTML adalah file teks yang berisi sintaks, file, dan konvensi penamaan tertentu yang menunjukkan komputer dan server web bahwa itu ada dalam HTML dan harus dibaca seperti itu. Dengan menerapkan konvensi HTML ini ke file teks di hampir semua editor teks, pengguna dapat menulis dan mendesain halaman web dasar, lalu mengunggahnya ke internet

The most basic of HTML conventions is the inclusion of a document type declaration at the beginning of the text file. This always comes first in the document, because it is the piece that affirmatively informs a computer that this is an HTML file. The document header typically looks like this: . It should always be written that way, without any content inside it or breaking it up. Any content that comes before this declaration will not be recognized as HTML by a computer.

Doctypes tidak hanya digunakan untuk HTML, tetapi juga dapat diterapkan pada pembuatan dokumen apa pun yang menggunakan SGML (Standard Generalized Markup Language). SGML adalah standar untuk menentukan bahasa markup tertentu yang digunakan. HTML adalah salah satu dari beberapa bahasa markup yang berlaku untuk deklarasi SGML dan doctype

Persyaratan penting lainnya untuk membuat file HTML adalah menyimpannya dengan a. ekstensi file .html. Sedangkan deklarasi doctype memberi sinyal HTML ke komputer dari dalam file, ekstensi file memberi sinyal HTML ke komputer dari luar file. Dengan memiliki keduanya, komputer dapat mengetahui bahwa itu adalah file HTML apakah sedang membaca file atau tidak. Ini menjadi sangat penting ketika mengunggah file ke web, karena server web perlu mengetahui apa yang harus dilakukan dengan file sebelum dapat mengirimnya ke komputer klien agar konten dalamnya dapat dibaca.

Setelah menulis doctype dan menyimpannya sebagai file HTML, pengguna dapat mengimplementasikan semua alat sintaksis HTML lainnya untuk menyesuaikan halaman web. Setelah selesai, mereka kemungkinan akan memiliki beberapa file HTML yang sesuai dengan berbagai halaman situs web. Penting bagi pengguna untuk mengunggah file-file ini dalam hierarki yang sama dengan tempat mereka menyimpannya, karena setiap halaman mereferensikan jalur file tertentu dari halaman lain, mengaktifkan tautan di antara mereka. Mengunggahnya dalam urutan yang berbeda akan menyebabkan tautan putus dan halaman hilang, karena jalur file yang ditentukan tidak akan cocok dengan halaman

Elemen dasar HTML

Menggunakan HTML, file teks selanjutnya ditandai dengan teks tambahan yang menjelaskan bagaimana dokumen harus ditampilkan. Untuk memisahkan markup dari konten file HTML yang sebenarnya, ada sintaks HTML khusus yang membedakan yang digunakan. Komponen khusus ini dikenal sebagai tag HTML. Tag dapat berisi pasangan nama-nilai yang dikenal sebagai atribut, dan bagian konten yang disertakan dalam tag disebut sebagai elemen HTML

Elemen HTML selalu memiliki tag pembuka, konten di tengah dan tag penutup. Atribut dapat memberikan informasi tambahan tentang elemen dan disertakan dalam tag pembuka. Elemen dapat dijelaskan dalam salah satu dari dua cara

1. Elemen tingkat blok dimulai pada baris baru dalam dokumen dan menempati ruangnya sendiri. Contoh elemen ini termasuk judul dan tag paragraf
2. Elemen sebaris tidak dimulai pada baris baru dalam dokumen dan hanya menempati ruang yang diperlukan. Elemen-elemen ini biasanya memformat konten elemen level blok. Contoh elemen sebaris termasuk hyperlink dan tag format teks

Pro dan kontra dari HTML

Kelebihan menggunakan HTML termasuk

• Diadopsi secara luas dengan sejumlah besar sumber daya yang tersedia
• Dijalankan secara native di setiap browser
• Relatif mudah dipelajari
• Memiliki kode sumber yang bersih dan konsisten
• Apakah open source dan gratis untuk digunakan
• Dapat diintegrasikan dengan bahasa pemrograman backend lainnya seperti PHP

Beberapa kontra yang perlu dipertimbangkan adalah

• Tidak memiliki fungsionalitas yang sangat dinamis dan terutama digunakan untuk halaman web statis
• Semua komponen harus dibuat secara terpisah meskipun menggunakan elemen yang serupa
• Perilaku browser tidak dapat diprediksi. Misalnya, browser lama mungkin tidak kompatibel dengan fitur yang lebih baru

Tag HTML yang umum digunakan

Tag HTML mendikte keseluruhan struktur halaman dan bagaimana elemen di dalamnya akan ditampilkan di browser. Tag HTML yang umum digunakan antara lain

• yang menjelaskan judul tingkat atas

• yang mendeskripsikan heading tingkat kedua yang menjelaskan sebuah paragraf yang menjelaskan data tabular yang menjelaskan daftar informasi yang diurutkan yang menjelaskan daftar informasi yang tidak diurutkanAs mentioned, there are opening and closing tags that surround the content they are augmenting. An opening tag looks like this: . A closing tag is the same but contains a backslash in it to indicate that it's the end of the given HTML element. Closing tags look like this: .Cara menggunakan dan mengimplementasikan HTML

  Karena HTML sepenuhnya berbasis teks, file HTML dapat diedit hanya dengan membukanya di program seperti Notepad++, Vi atau Emacs. Editor teks apa pun dapat digunakan untuk membuat atau mengedit file HTML dan, asalkan diberi nama dengan. html, peramban web apa pun -- seperti Chrome atau Firefox -- akan dapat menampilkan berkas sebagai laman web

  Untuk developer software profesional, ada berbagai editor WYSIWYG untuk mengembangkan halaman web. NetBeans, IntelliJ, Eclipse dan Microsoft Visual Studio menyediakan editor WYSIWYG sebagai plugin atau sebagai komponen standar, membuatnya sangat mudah digunakan dan diimplementasikan HTML

  Editor WYSIWYG ini juga menyediakan fasilitas pemecahan masalah HTML, meskipun browser web modern sering kali berisi plugin pengembang web yang akan menyoroti masalah dengan halaman HTML, seperti tag penutup yang hilang atau sintaksis yang tidak membuat HTML dengan baik.

  Chrome dan Firefox keduanya menyertakan alat pengembang HTML yang memungkinkan untuk segera melihat file HTML lengkap halaman web, bersama dengan kemampuan untuk mengedit HTML dengan cepat dan segera memasukkan perubahan dalam browser internet

HTML, CSS, dan JavaScript

HTML digunakan untuk membuat halaman web tetapi mengalami keterbatasan dalam hal komponen yang sepenuhnya responsif. Oleh karena itu, HTML hanya boleh digunakan untuk menambahkan elemen teks dan menyusunnya di dalam halaman. Untuk fitur yang lebih kompleks, HTML dapat digabungkan dengan cascading style sheets (CSS) dan JavaScript (JS)

File HTML dapat ditautkan ke lembar gaya kaskade atau file JS -- biasanya di bagian atas dokumen dengan jalur file tertentu -- yang akan berisi informasi tentang warna yang digunakan, font yang digunakan, dan informasi perenderan elemen HTML lainnya. JavaScript juga memungkinkan pengembang untuk menyertakan fungsionalitas yang lebih dinamis, seperti pop-up dan penggeser foto, di halaman web. Tag yang disebut atribut kelas digunakan untuk mencocokkan elemen HTML dengan elemen CSS atau JS yang sesuai

Misalnya, jika pengguna ingin warna teks dalam jumlah tertentu menjadi merah, mereka dapat menulis kode dalam file CSS dengan atribut kelas yang menyertainya yang mengubah teks menjadi merah. Kemudian mereka dapat menempatkan atribut kelas yang terkait pada semua bagian teks yang ingin diberi warna merah di lembar HTML. Metode dasar yang sama berlaku untuk lembar JS, dengan fungsi yang berbeda.  

Memisahkan informasi tentang struktur halaman, peran HTML, dari informasi tentang tampilan halaman web saat dirender di browser adalah pola pengembangan perangkat lunak dan praktik terbaik yang dikenal sebagai pemisahan perhatian

Sejarah dan perkembangan

Di masa-masa awal world wide web, menandai dokumen berbasis teks menggunakan sintaks HTML sudah lebih dari cukup untuk memfasilitasi berbagi dokumen akademik dan memo teknis. Namun, ketika internet berkembang melampaui dinding akademisi dan ke rumah-rumah populasi umum, permintaan yang lebih besar diberikan pada halaman web dalam hal pemformatan dan interaktivitas.

HTML4. 01 dirilis pada tahun 1999, saat internet belum menjadi nama rumah tangga, dan HTML5 belum distandarisasi hingga tahun 2014. Selama ini, markup HTML beralih dari pekerjaan yang hanya menjelaskan struktur dokumen konten halaman web ke peran yang juga menjelaskan bagaimana tampilan konten saat halaman web menampilkannya.

Akibatnya, halaman web berbasis HTML4 sering menyertakan informasi di dalam tag tentang font apa yang digunakan saat menampilkan teks, warna apa yang harus digunakan untuk latar belakang, dan bagaimana konten harus diselaraskan. Menjelaskan dalam tag HTML bagaimana elemen HTML harus diformat saat dirender di halaman web dianggap sebagai antipola HTML. HTML secara umum harus menjelaskan bagaimana struktur konten, bukan bagaimana itu akan ditata dan dirender dalam browser. Bahasa markup lain lebih cocok untuk tugas ini

One major difference between HTML4 and HTML5 is that the separation of concerns pattern is more rigorously enforced in HTML5 than it was in HTML4. With HTML5, the bold and italicize tags have been deprecated. For the paragraph tag, the align attribute has been completely removed from the HTML specification.

versi HTML

Berikut ini adalah daftar versi HTML dan tahun pembuatannya. Beberapa iterasi dari setiap versi telah dirilis dari waktu ke waktu. Daftar ini bertujuan untuk fokus pada iterasi yang signifikan

• HTML 1. 0 -- dirilis pada 1992 -- memiliki kemampuan yang sangat terbatas dan sekitar 20 elemen
• HTML 2. 0 -- dirilis pada tahun 1995 -- mulai memasukkan unsur-unsur yang berhubungan dengan fungsi matematika
• HTML 3. 2 -- dirilis pada tahun 1996 -- menghentikan inisiatif fungsi matematika sama sekali, dan memperbaiki tumpang tindih antara berbagai ekstensi berpemilik
• HTML4. 0 -- dirilis pada 1997 -- menawarkan tiga variasi yang berbeda dalam jumlah elemen usang yang diizinkan
• HTML4. 01 -- dirilis pada 1999 -- sebagian besar sama dengan 4. 0
• HTML 5 -- dirilis pada tahun 2014 -- muncul setelah jeda panjang dalam pembaruan karena organisasi yang mengembangkannya -- W3C -- berfokus pada bahasa paralel lain yang disebut XHTML
• HTML5. 1 -- dirilis pada 2016 -- bertujuan agar lebih mudah mengakomodasi berbagai jenis media embedding dengan tag baru
• HTML5. 2 -- dirilis pada 2017 -- bertujuan agar sama-sama dapat dipahami oleh manusia dan komputer
• HTML5. 3 -- belum dirilis -- W3C berkolaborasi dengan WHATWG pada versi baru. Kerja sama tersebut dimulai pada 2019

Fitur HTML5

HTML5 memperkenalkan beberapa elemen untuk meningkatkan interaktivitas, kemampuan multimedia, dan efisiensi semantik. Alih-alih menggunakan plugin, multimedia dapat ditempatkan di dalam kode HTML. Unsur-unsur tersebut antara lain

• Elemen grafis
  • , yang membuat ruang persegi panjang kosong tempat desainer web dapat menggambar menggunakan JavaScript
• Elemen semantik
  • , yang membuat header di bagian atas halaman
  • , yang membuat area untuk konten independen
  • , yang mendefinisikan bagian dan subbagian seperti bab, atau header dan footer jika diperlukan lebih dari satu
• Elemen multimedia
• Attributes that apply to the
  element, which creates an area for user input on the web page. These include number, date, calendar and range.

Fitur utama HTML5 lainnya termasuk

• Penghapusan atribut usang atau berlebihan
• Pengeditan luring
• Kemampuan untuk menarik dan melepas di antara dokumen HTML5
• Peningkatan pesan
• Penguraian terperinci
• Pendaftaran penangan protokol dan MIME
• Standar umum untuk menyimpan data dalam database SQL (Web SQL)
• Antarmuka program aplikasi (API) untuk aplikasi yang kompleks
• Akomodasi untuk pengembangan aplikasi perangkat seluler
• MathML untuk rumus matematika dan ilmiah

Sementara penambahan fitur-fitur ini merupakan upaya untuk mendukung penyisipan multimedia, perubahan spesifikasi HTML menunjukkan keinginan komunitas untuk HTML untuk kembali ke tujuan semula yaitu menggambarkan struktur konten. Pada dasarnya, lebih banyak fitur struktural telah ditambahkan, sementara beberapa fitur format-sentris tidak digunakan lagi. Untuk tujuan kompatibilitas mundur, browser web akan terus mendukung tag HTML yang sudah tidak digunakan lagi, tetapi pada akhirnya HTML akan berbasis struktur

Standar sintaks HTML

Dalam contoh HTML berikut, ada dua elemen HTML. Kedua elemen menggunakan tag paragraf yang sama, ditandai dengan huruf p, dan keduanya menggunakan atribut directional dir, meskipun nilai atribut yang berbeda diberikan pada pasangan nama-nilai atribut HTML, yaitu rtl dan ltr

Perhatikan bahwa saat cuplikan HTML ini dirender di browser, tag HTML memengaruhi cara setiap elemen HTML ditampilkan di halaman, namun tidak ada tag atau atribut HTML yang ditampilkan. HTML hanya menjelaskan cara merender konten. HTML itu sendiri tidak pernah ditampilkan kepada pengguna akhir

In order for a web browser to display an HTML page without error, it must be provided with well-formed HTML. To be well-formed, each HTML element must be contained within an opening tag --

-- and a closing tag --