Tutorial Belajar HTML

Tutorial Belajar HTML

Belajar HTML merupakan suatu kewajiban buat calon programmer web. Belajar HTML adalah hal pertama kali yang harus dilakukan sebelum mempelajari framework atau bahasa pemrograman berbasis web lainnya seperti PHP, JSP, JavaScript, jQuery, Angular, React Js, Java Spring dan lain sebagainya. Pengetahuan HTML termasuk pengetahuan teknologi berbasis web tingkat dasar. Belajar HTML seharusnya tidak begitu sulit karena hanya belajar mengenai cara penulisan dokumen HTML, elemen, atribut, CSS dan sebagainya tanpa perlu mendalami masalah algoritma. Artikel ini adalah artikel pendahuluan dari seri tutorial belajar HTML, dalam artikel ini kita akan membahas apa itu HTML, apa saja editor HTML untuk membuat kode HTML, bagaimana struktur dasar HTML dan penjelasan detil tentang pemakaian berbagai elemen atau tag HTML.

Apa Itu HTML?

HTML adalah kependekan dari HyperText Markup Language. Hypertext adalah cara menyajikan informasi pada suatu dokumen text dengan menyertakan referensi kepada beberapa dokumen lain. Kita biasa menggunakan hyperlink untuk menyertakan referensi suatu dokumen. Hyperlink kita kenal dengan istilah tautan pada suatu website.

Markup Language adalah konsep memberikan anotasi khusus kepada suatu text di dalam dokumen untuk memberikan aturan tentang bagaimana cara text tersebut ditampilkan. Anotasi khusus pada suatu text di dalam dokumen HTML akan ditampilkan melalui web browser.

HTML adalah gabungan dari konsep Hypertext dan Markup Language. HTML adalah dokumen yang ditulis menggunakan teknik Markup Language dan menggunakan konsep Hypertext untuk memudahkan pengguna menelusuri informasi dari suatu dokumen ke dokumen lain.

Sejarah dan Perkembangan

Awal Mula HTML

Pada tahun 1989, seorang ilmuwan komputer bernama Tim Berners-Lee bekerja di CERN (Organisasi Eropa untuk Penelitian Nuklir) merasa frustrasi dengan cara ilmuwan berbagi informasi dan mencari referensi melalui jaringan internal CERN. Sebagai tanggapan, Berners-Lee mengembangkan sistem bernama “Enquire” yang memungkinkan tautan antara dokumen-dokumen. Inilah cikal bakal ide hypertext yang menjadi dasar web.

Pada 1990, Berners-Lee merilis konsep “WorldWideWeb” yang menggunakan protokol HTTP (Hypertext Transfer Protocol) dan bahasa markah (Markup Language) sederhana yang disebut HTML. HTML pertama hanya memiliki elemen dasar seperti judul, tautan, dan gambar.

HTML 2.0 dan 3.0: Awal Standarisasi

Pada 1995, HTML 2.0 diperkenalkan sebagai spesifikasi formal pertama. Ini adalah langkah penting karena mengklarifikasi elemen dan atribut yang diterima oleh web browser. Pada saat yang sama, JavaScript juga muncul, memungkinkan interaktivitas di halaman web.

HTML 3.0, yang diperkenalkan pada 1995, membawa berbagai elemen baru seperti tabel dan form. Namun, HTML 3.0 tidak sepenuhnya diadopsi karena tantangan kompatibilitas antar-browser.

HTML 4.0 dan 4.01: Penambahan Fitur dan Konsolidasi

Pada 1997, HTML 4.0 hadir dengan dukungan terhadap gaya dan tata letak yang lebih baik. Ini memungkinkan pengembang untuk memisahkan struktur dan tampilan halaman menggunakan CSS. HTML 4.01, versi yang diperbarui, melanjutkan perbaikan dan klarifikasi elemen.

HTML5: Era Modern Pengembangan Web

Pada tahun 2014, HTML5 dirilis sebagai standar resmi oleh W3C (World Wide Web Consortium). HTML5 membawa sejumlah perubahan dan fitur baru:

  • Elemen Semantik: HTML5 memperkenalkan elemen semantik seperti

    <header>, <nav>, <section>, dan <footer>, yang memberikan arti pada struktur halaman.

  • Audio dan Video: Elemen <audio> dan <video> memungkinkan penanaman media langsung di dalam halaman tanpa perlu plugin.

  • Canvas dan SVG: HTML5 memperkenalkan elemen <canvas> untuk membuat grafik dan animasi menggunakan JavaScript, serta dukungan untuk SVG (Scalable Vector Graphics).

  • Formulir yang Ditingkatkan: Dukungan untuk validasi form, tipe input baru, dan elemen <input> yang lebih kaya.

HTML5+: Masa Depan HTML

HTML terus berkembang dengan perubahan dan pembaruan standar. Pengembang web terus mengeksplorasi cara baru untuk menciptakan pengalaman online yang lebih interaktif, responsif, dan aksesibel. Beberapa usaha dalam pengembangan web mencakup Web Components, pengembangan VR/AR, dan peningkatan dalam aksesibilitas.

Mengapa HTML Penting?

HTML adalah bahasa dasar yang harus dipahami oleh siapa pun yang ingin memasuki dunia pengembangan web. Inilah beberapa alasan mengapa HTML tetap penting:

  1. Struktur Halaman Web: HTML memberikan struktur dasar untuk halaman web. HTML memungkinkan pengembang untuk mengatur konten dengan cara yang terorganisir dan terstruktur.
  2. Interaktivitas: Melalui elemen formulir, HTML memungkinkan interaksi antara pengguna dan halaman web. Pengguna dapat mengisi form, mengirimkan data, dan berpartisipasi dalam berbagai tindakan online.
  3. Aksesibilitas: Dengan menggunakan elemen semantik yang tepat, HTML membantu meningkatkan aksesibilitas halaman web untuk pengguna yang mungkin memiliki keterbatasan fisik atau teknologi.
  4. Dasar bagi Bahasa Lain: HTML adalah dasar bagi bahasa pemrograman web lainnya seperti CSS (Cascading Style Sheets) untuk tampilan dan JavaScript untuk interaktivitas.
  5. Keterbacaan oleh Mesin Pencari: Struktur yang jelas dan penggunaan elemen semantik dalam HTML dapat membantu mesin pencari memahami konten halaman, meningkatkan visibilitas halaman di hasil pencarian.

Persiapan Belajar HTML

Belajar HTML termasuk mudah dan tidak terlalu menuntut logika yang terlalu rumit. Pada dasarnya belajar HTML adalah belajar cara penulisan komponen-komponen atau elemen-elemen HTML di dalam suatu file dengan ekstensi html atau lebih dikenal dengan istilah file html. Contoh elemen HTML adalah tombol, tautan, gambar, text dalam paragraf, radio button dan lain sebagainya. Berikut beberapa hal yang harus dipersiapkan sebelum mempelajari HTML.

Editor HTML

Editor HTML adalah perangkat lunak atau aplikasi yang digunakan untuk membuat, mengedit, dan mengelola kode HTML. Dengan menggunakan editor HTML, Anda dapat membuat dan mengatur struktur dasar halaman web, menambahkan elemen seperti teks, gambar, tautan, dan lainnya, serta mengatur tampilan dan format halaman web Anda. Editor HTML dapat berupa perangkat lunak desktop yang diinstal di komputer Anda atau editor online yang dapat diakses melalui browser web. Berikut adalah beberapa contoh editor HTML.

Notepad++

Notepad++ adalah editor teks yang populer dan gratis untuk sistem operasi Windows. Editor ini digunakan oleh banyak pengembang dan pemrogram karena antarmuka sederhananya dan fitur-fitur yang berguna. Notepad++ menawarkan penyorotan sintaks, yang membedakan kode dengan warna untuk membuatnya lebih mudah dibaca, serta fitur pencocokan dan penutupan tanda kurung yang mempermudah dalam menulis kode yang benar. Editor ini juga memiliki kemampuan untuk membuka dan mengedit banyak jenis file teks, termasuk kode HTML, CSS, JavaScript, dan banyak lagi. Kelebihan Notepad++ adalah kemampuannya dalam mengedit kode teks dengan cepat dan efisien tanpa banyak fitur berlebihan yang terkadang bisa membingungkan.

Visual Studio Code (VS Code)

Visual Studio Code (VS Code) adalah editor kode yang populer yang dikembangkan oleh Microsoft. Editor dirancang untuk mendukung pengembangan berbagai jenis aplikasi, termasuk pengembangan web. VS Code menonjolkan dirinya dengan penyorotan sintaks yang canggih untuk berbagai bahasa pemrograman, tampilan langsung (live preview) untuk HTML dan CSS, dan banyak ekstensi yang dapat memperluas fungsionalitasnya sesuai kebutuhan pengembangan. Selain itu, VS Code memiliki fitur otomatisasi yang kuat, seperti saran kode yang cerdas, pemecah kode (code snippet), dan kemampuan debugging yang dapat membantu dalam mengidentifikasi dan memecahkan masalah dalam kode Anda. Karena kelebihan dan fitur-fitur yang ditawarkan, Visual Studio Code menjadi salah satu pilihan favorit bagi banyak pengembang dalam berbagai proyek pengembangan perangkat lunak.

Sublime Text

Sublime Text adalah editor teks yang cepat, ringan, dan sangat populer di kalangan pengembang. Editor dirancang untuk memberikan pengalaman pengeditan kode yang efisien dan responsif. Salah satu fitur utama yang membedakan Sublime Text adalah penyorotan sintaks yang sangat baik, yang membantu membedakan kode dengan warna untuk memudahkan pembacaan. Sublime Text juga menawarkan fitur pencarian dan penggantian yang kuat dengan dukungan ekspresi reguler, serta kemampuan untuk membuka banyak file dalam tab yang dapat diatur. Selain itu, Sublime Text mendukung banyak bahasa pemrograman dan menyediakan sejumlah ekstensi (package) yang dapat diinstal untuk memperluas fungsionalitasnya sesuai kebutuhan. Karena antarmuka yang bersih dan kemampuan yang kuat, Sublime Text telah menjadi pilihan populer bagi pengembang yang mencari editor teks yang tepat.

Brackets

Brackets adalah editor kode gratis yang dikembangkan oleh Adobe untuk keperluan pengembangan web. Editor ini memiliki antarmuka yang intuitif dengan penekanan pada pengembangan front-end. Brackets menonjolkan fitur-fitur seperti pratinjau langsung (live preview) untuk HTML dan CSS, yang memungkinkan pengembang melihat perubahan secara real-time saat mereka mengedit kode. Editor ini juga memiliki penyorot sintaks, fitur penyelesaian otomatis, dan integrasi dengan pratinjau browser untuk memfasilitasi pengembangan dan pengujian situs web dengan mudah. Walau dirancang untuk pengembangan web, Brackets tetap sederhana dan efisien, membuatnya cocok bagi pengembang web pemula dan berpengalaman.

Web Browser

Dokumen HTML di dalam file html ditampilkan melalui web browser. Tentu saja web browser adalah aplikasi penting yang perlu dipasang apabila ingin belajar HTML. Pilihlah web browser yang paling banyak dipakai. Google Chrome adalah web browser yang paling populer dan paling banyak dipakai saat ini. Pilihan lain web browser adalah Firefox.

Struktur Dasar HTML

Struktur dasar HTML adalah kerangka dasar yang harus ada dalam setiap halaman web HTML. Ini memberikan dasar untuk bagaimana konten akan ditampilkan di web browser. Berikut adalah komponen-komponen utama dari struktur dasar HTML:

1. Deklarasi DOCTYPE

Deklarasi DOCTYPE (Document Type Definition) memberi tahu browser tentang jenis dokumen yang akan ditampilkan. Ini mengarahkan browser untuk menggunakan standar yang sesuai saat merender halaman. Contoh deklarasi DOCTYPE untuk HTML5 adalah sebagai berikut:

<!DOCTYPE html>

2. Elemen <html>

Elemen atau tag <html> adalah elemen induk yang mengapit seluruh konten halaman. Tag ini  memberitahu browser bahwa Anda menggunakan dokumen HTML.

3. Elemen <head>

Elemen atau tag <head> berisi informasi meta tentang halaman, seperti judul, karakteristik meta, dan tautan ke stylesheet atau script eksternal. Tag tidak ditampilkan kepada pengguna secara langsung.

<head>
<title>Judul Halaman</title>
</head>

4. Elemen <body>

Elemen atau tag <body> berisi konten yang akan ditampilkan kepada pengguna. Semua elemen visual, teks, gambar, tautan, dan lainnya dimasukkan di dalam elemen <body>.

<body>
<!-- Konten halaman web -->
</body>

Contoh Lengkap

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di Website Nextgen</h1>
<p>Ini adalah contoh struktur dasar HTML.</p>
</body>
</html>

Dalam contoh di atas, elemen <html> mengapit semua konten, elemen <head> berisi informasi meta, dan elemen <body> berisi konten yang akan ditampilkan di halaman web.

Menggunakan struktur dasar HTML ini adalah langkah awal dalam membangun halaman web. Dari sini, Anda dapat mulai menambahkan elemen-elemen lain seperti tautan, gambar, tata letak, dan interaktivitas dengan menggunakan bahasa pemrograman lain seperti CSS dan JavaScript.

Tag HTML

Tag HTML adalah elemen-elemen dasar dalam bahasa markah HTML yang digunakan untuk mendefinisikan dan memformat konten di halaman web. Setiap tag HTML dimulai dengan tanda < dan diakhiri dengan tanda >. Beberapa tag memiliki elemen konten di dalamnya, sementara yang lain hanya membutuhkan tag pembuka dan penutup. Berikut adalah beberapa contoh tag HTML yang umum digunakan:

1. Deklarasi DOCTYPE dan Elemen <html>

Menandakan awal dari dokumen HTML.

<!DOCTYPE html>
<html>
<!-- Isi halaman HTML di sini -->
</html>

Untuk mempelajari deklarasi DOCTYPE dan tag <html> lebih lanjut, silahkan membaca tutorial Apa Itu HTML

2. <head> dan <title>

Elemen <head> berisi informasi meta tentang halaman seperti judul, tautan stylesheet, dan skrip. Sedangkan <title> untuk menentukan judul halaman yang akan ditampilkan di bilah judul web browser.

<head>
    <title>Judul Halaman</title>
</head>

Untuk mempelajari tag <head> dan <title> lebih lanjut, silahkan membaca tutorial Apa Itu HTML

3. <meta>

Memberikan informasi meta tentang halaman seperti karakteristik dan deskripsi.

<meta charset="UTF-8">
<meta name="description" content="Deskripsi halaman web">

4. <link>

Menghubungkan halaman dengan berkas stylesheet eksternal (CSS). Pelajari CSS lebih lanjut pada tutorial CSS.

<link rel="stylesheet" href="style.css">

5. <style>

Digunakan untuk menulis kode CSS di dalam halaman HTML.

<style>
    body {
        background-color: lightgray;
    }
</style>

6. <script>

Menyisipkan kode JavaScript di halaman.

<script>
    function myFunction() {
        alert("Hello, world!");
    }
</script>

7. <h1> – <h6>

Tag heading untuk membuat judul dengan level yang berbeda.

<h1>Heading 1</h1>
<h2>Heading 2</h2>

Untuk mempelajari tag heading lebih lanjut, silahkan membaca tutorial Cara Membuat Heading Di HTML

8. <p>

Elemen atau tag paragraf berguna untuk menampilkan paragraf teks.

<p>Ini adalah contoh paragraf.</p>

Untuk mempelajari tag paragraf lebih lanjut, silahkan membaca tutorial Cara Membuat Paragraf Di HTML

9. <a>

Elemen untuk membuat tautan atau hyperlink.

<a href="nextgen.co.id">Kunjungi Website Nextgen</a>

Untuk mempelajari tag <a> lebih lanjut, silahkan membaca tutorial Cara Membuat Link Di HTML

10. <img>

Elemen untuk menampilkan gambar.

<img src="gambar.jpg" alt="Gambar Contoh" width="300">

Untuk mempelajari tag <img> lebih lanjut, silahkan membaca tutorial Cara Menambahkan Gambar Di HTML

11. <ul> dan <li>

Elemen untuk membuat daftar tak terurut (unordered list).

<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
</ul>

Untuk mempelajari tag <ul> dan <li> lebih lanjut, silahkan membaca tutorial Cara Membuat List Di HTML

12. <ol> dan <li>

Elemen untuk membuat daftar terurut (ordered list).

<ol>
    <li>Langkah pertama</li>
    <li>Langkah kedua</li>
</ol>

Untuk mempelajari tag <ol> dan <li>\ lebih lanjut, silahkan membaca tutorial Cara Membuat List Di HTML

13. <table>, <tr>, <th>, dan <td>

Elemen <table> digunakan untuk membuat tabel untuk menampilkan data. Tag atau Elemen <tr> adalah baris dalam tabel. Tag atau Elemen <th> adalah sel header dalam tabel. Tag atau Elemen <td> adalah sel data dalam tabel.

<table>
    <tr>
        <th>Nama</th>
        <th>Usia</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Untuk mempelajari cara pembuatan tabel di HTML lebih lanjut, silahkan membaca tutorial Cara Membuat Tabel Di HTML

14. <form>

Elemen atau tag untuk membuat formulir interaktif.

<form action="proses.php" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required><br>
    <button type="submit">Kirim</button>
</form>

Untuk mempelajari cara pembuatan form di HTML lebih lanjut, silahkan membaca tutorial Cara Membuat Form HTML

15. <input>

Membuat elemen input seperti teks, email, kata sandi, dll.

<input type="text" name="username" placeholder="Username">

Untuk mempelajari tag <input> lebih lanjut, silahkan membaca tutorial Tag Input HTML

16. <textarea>

Membuat text area yaitu area teks lebih besar untuk input teks panjang.


<textarea name="pesan" rows="4" cols="50">
    Isi pesan di sini...
</textarea>

Untuk mempelajari tag <textarea> lebih lanjut, silahkan membaca tutorial Form Elemen

17. <button>

Elemen untuk membuat tombol.

<button type="button" onclick="myFunction()">Klik Saya</button>

18. <label>

Elemen untuk membuat label untuk elemen input.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

19. <div>

Kontainer blok yang dapat diatur dengan CSS.

<div style="width: 200px; height: 100px; background-color: lightblue;">
    Ini adalah kontainer blok.
</div>

20. <span>

Elemen inline yang dapat diatur dengan CSS.

<p>Ini adalah teks <span style="color: blue;">merah</span>.</p>

21. <br>

Baris baru dalam teks.

Ini adalah baris pertama.<br>
Ini adalah baris kedua.

Contoh diatas hanya beberapa contoh tag HTML yang umum digunakan. Setiap tag memiliki fungsi dan tujuan tertentu dalam mengatur dan memformat konten di halaman web.

HTML Dan CSS

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi untuk mengatur tampilan elemen di dalam dokumen HTML. CSS sangat banyak dipakai dalam proyek pengembangan aplikasi web. HTML adalah format penulisan elemen HTML, sedangkan CSS adalah format tampilan elemen tersebut. Sebagai contoh, suatu tombol (button) dibuat dengan format penulisan HTML sedangkan warna tombol itu sendiri diatur dengan menggunakan CSS.

Tutorial ini juga akan membahas CSS tapi hanya secara garis besar. Tutorial ini akan membahas konsep CSS seperti bagaimana hubungan CSS dengan elemen HTML. Tutorial ini juga akan membahas beberapa fungsi dasar CSS.

Belajar HTML Dari Contoh

Artikel ini adalah artikel pendahuluan dari seri tutorial belajar HTML yang terdiri dari beberapa artikel. Di dalam setiap artikel terdapat banyak contoh dokumen HTML. Klik tombol Jalankan Contoh untuk menjalankan dokumen HTML melalui web browser.

Kita juga perlu melihat source code dari dokumen HTML yang dijalankan pada web browser. Untuk melihat source code tekan tombol CTRL + U pada web browser. Untuk pengguna komputer Mac tekan tombol Option+Command+U pada web browser.

Dengan menjalankan contoh dokumen HTML melalui web browser dan memperhatikan source code diharapkan akan mempermudah proses belajar HTML itu sendiri.

Untuk selanjutnya silahkan Anda melanjutkan membaca artikel tutorial Apa Itu HTML

Semua Tutorial HTML : Tutorial HTML

Tinggalkan Balasan