Belajar HTML #01: Pengenalan Dasar HTML untuk Pemula

Kenalan Dulu Nih Dengan HTML

    HTML adalah bahasa yang sangat penting untuk dipelajari bagi siapa saja yang ingin menjadi web developer

Mengapa demikian?

Karena HTML adalah fondasi utama dalam pembuatan halaman web.

Pasti kamu sudah pernah mendengar tentang HTML sebelumnya, tetapi tidak ada salahnya untuk menyegarkan ingatanmu dengan membaca artikel ini.

Dalam tutorial ini, kita akan membahas semuanya dari awal hingga kamu mampu membuat halaman HTML-mu sendiri.

Jadi, siap untuk memulai petualangan ini?

Ayo kita mulai!

Apa Itu HTML?

HTML, atau HyperText Markup Language, 

adalah bahasa markah yang digunakan untuk membuat halaman web.

Masih bingung?  Mari saya jelaskan dengan cara yang lebih sederhana..

HTML adalah bahasa yang menggunakan penanda, yang kita sebut "tag," untuk merancang halaman web. Tag ini membantu kita menentukan bagaimana konten akan ditampilkan dan disusun di dalam sebuah situs web

Jika kita ibaratkan, HTML itu seperti batu bata yang digunakan untuk membangun rumah. Batu bata ini bisa disusun sedemikian rupa untuk membentuk fondasi yang kuat.

Dalam membuat halaman web, HTML tidak berjalan sendirian. Ada dua bahasa lainnya yang menjadi pelengkap, yaitu CSS dan JavaScript.

CSS adalah bahasa yang khusus digunakan untuk mempercantik tampilan web. Dengan CSS, kamu bisa mengatur warna, font, layout, dan banyak aspek visual lainnya.

JavaScript, di sisi lain, berfungsi untuk membuat halaman web menjadi interaktif dan dinamis. Dengan JavaScript, kamu bisa menambahkan berbagai fungsi dan efek, sehingga website kamu terasa lebih hidup.

Oh ya, dan perlu dicatat, dalam tutorial ini kita akan fokus terlebih dahulu pada pembahasan HTML. Jika kamu tertarik untuk belajar CSS dan JavaScript, silakan buka :

        - Tutorial CSS Pemula

        - Tutorial JavaScript pemula

Sejarah dan Asal-usul HTML

Sejarah lengkap HTML bisa juga dibaca di:

    - Sejarah Lengkap HTML

Pada tutorial ini, kita akan bahas sejarahnya secara singkat.

Cerita awal kemunculan HTML dimulai dari tahun 1980..

Saat itu seorang ilmuan bernama Tim Berners-Lee sedang bekerja di CERN.

Tim Berners-Lee (2009)

CERN sendiri bukanlah perusahaan yang berkaitan tentang teknologi maupun internet. CERN adalah singkatan dari bahasa prancis: Conseil Européen pour la Recherche Nucléaire.

Yang artinya: Komisi Eropa untuk Penelitian Fisika Nuklir.

Website CERN (2024)

Para peneliti di CERN membutuhkan sebuah cara atau sistem agar bisa saling berbagi dokumen hasil penelitian.

Tim kemudian mencoba membuat ENQUIRE. Ini adalah software hypertext yang akan digunakan untuk berbagi dokumen.

Lalu di tahun 1989, Tim memperkenalkan ide tentang hypertext berbasis internet. Ini nantinya akan menjadi cikal-bakal HTML.

Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang merupakan system engineer di CERN. Akan tetapi proyek ini tidak resmi diadopsi oleh CERN.

Pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang berjudul : HTML Tags

Dokumen ini berisi penjelasan tentang 18 tags awal yang menjadi konsep dasar HTML.

HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language).

SGML adalah sebuah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, list, heading, dan lain-lain.

Bisa dibilang..

HTML adalah implementasi dari SGML.

Kalau kita lihat, beberapa tag seperti <title>, <p>, <li>, dan <h1> sampai <h6> berasal dari SGML. Namun, tidak semua yang ada di HTML berasal dari SGML.

Salah satunya adalah Hyperlink , yang murni hasil pemikiran Tim Berners-Lee.

Ide tentang HTML ini kemudian disebarkan ke dalam sebuah mailing list dan segera menjadi perhatian berbagai ilmuwan komputer di seluruh dunia.

Perkembangan dan Versi HTML

HTML punya beberapa versi, dari versi yang paling tua hingga yang terbaru. Berikut ini perkembangan versi HTML:

• [Draft] HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
• HTML 2.0 (24 November 1995) adalah versi HTML kedua yang resmi pertama kali beredar di pasaran dan dirilis oleh IETF;
• [Draft] HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan yang memicu perdebatan;
• HTML 3.2 (14 Januari 1997) versi resmi yang dirilis W3C pertama kali.
• HTML 4.0 (24 April 1998) versi pengembangan dari yang sebelumnya;
• HTML 4.01 (24 Desember 1999) versi perbaikan dari HTML 4.0;
• XHTML 1.0 (26 Januari 2000) pengembangan dari HTML 4.01 dengan mengadopsi XML;
• XHTML 2.0 (Augustus 2002—Juli 2006) versi kedua dari XHTML;
• HTML 5 (28 Oktober 2014) versi html saat ini.

Versi [draft] adalah versi yang tidak resmi dirilis ke pasaran. Bentuknya cuma masih dalam draft spesifikasi saja.

Artinya..

Tidak ada yang menggunakan versi [draft] untuk membuat web.

Lalu, versi mana yang akan kita pakai?

Tentunya versi terbaru, yakni HTML 5.

Peralatan untuk Belajar HTML

Nah, sekarang.. Tiba saatnya kita praktik!

Tapi sebelum itu, kamu harus siapkan beberapa alat yang akan digunakan untuk praktik.

Adapun peralatan yang harus kamu persiapkan adalah:

1. Teks Editor untuk Menulis HTML

Untuk menulis kode HTML, kamu memerlukan teks editor. Kamu bisa menggunakan berbagai jenis teks editor sesuai dengan preferensimu. Berikut beberapa pilihan yang populer:

1. Notepad
   Teks editor bawaan Windows yang sederhana dan mudah digunakan untuk menulis HTML dasar.

2. Notepad++
   Versi yang lebih canggih dari Notepad, Notepad++ menawarkan fitur seperti penyorotan sintaks, autocompletion, dan tabbed editing, sehingga lebih nyaman untuk menulis kode.

3. Visual Studio Code
   Editor yang sangat populer di kalangan developer, dengan banyak ekstensi yang dapat meningkatkan produktivitas. Mendukung penyorotan sintaks untuk berbagai bahasa pemrograman, termasuk HTML.

4. Sublime Text
   Teks editor yang cepat dan responsif, menawarkan berbagai fitur seperti multiple selections dan powerful search.

5. Atom
   Editor yang dibuat oleh GitHub, yang dapat disesuaikan sepenuhnya. Atom memiliki banyak paket yang bisa kamu tambahkan untuk meningkatkan fungsionalitas.

Kamu bebas memilih teks editor mana yang paling kamu sukai. Yang terpenting, pastikan editor tersebut mendukung penulisan kode dan mudah digunakan.

2. Web Browser untuk Membuka HTML

Untuk membuka dan menampilkan file HTML, kamu memerlukan web browser. Kamu bisa menggunakan berbagai web browser sesuai preferensimu. Berikut beberapa saran:

1. Google Chrome
   Web browser yang sangat populer dengan kecepatan tinggi dan dukungan untuk berbagai fitur modern HTML5. Sangat cocok untuk pengembangan web.

2. Mozilla Firefox
   Browser yang dikenal karena keamanan dan privasinya. Firefox juga mendukung banyak fitur HTML terbaru dan memiliki alat pengembang yang berguna.

3. Microsoft Edge
   Browser yang ditingkatkan dari Internet Explorer, menawarkan performa yang baik dan dukungan untuk standar web terbaru.

4. Safari
   Browser default untuk perangkat Apple. Cocok untuk pengguna Mac dan iOS, dengan dukungan baik untuk HTML5.

Saran saya adalah menggunakan web browser terbaru untuk memastikan kompatibilitas dengan versi HTML yang akan kita pelajari. Firefox dan Google Chrome adalah pilihan yang sangat baik.

Membuat Dokumen HTML Pertamamu

Sekarang saatnya membuat dokumen HTML pertamamu!

1. Buka Teks Editor
   Gunakan teks editor pilihanmu.

2. Tuliskan Kode Berikut

Setelah itu, simpan dengan nama hello-word.html

Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan menggunakan namahello-world.html agar ekstensinya .html, bukan .txt. dan jangan lupa diubah  save as type nya menjadi ALL FILE







Sekarang cobalah buka file hello-world.html dengan web browser.. maka hasilnya:

Selamat! 🎉

Kita sudah berhasil membuat halaman web pertama dengan HTML.

Kini giliran saya menjelaskan maksud dari kode di atas, tapi sebelum itu.. saya akan jelaskan dulu tentang nama file untuk HTML.

Nama File untuk HTML

Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML:

1. Extensi file HTML

Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja. Jika tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.

Contohnya seperti ini:

Nama filenya adalah hello-world.txt.

Sedah jelas, ini bukan file HTML, melainkan sebuah file teks biasa. Maka.. browser akan menampilkan isi file tersebut apa adanya.

2. Nama Khusus untuk Homepage

Jika kamu ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama index.html. Karena ia akan otomatis dibuka saat website dikunjungi.

Baiklah, berikutnya kita akan pelajari tentang kode-kode HTML.

Struktur Dasar HTML

Berikut ini adalah kode HTML yang baru saja kita buat:

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag <html> dan di dalamnya terdapat tag <head> dan <body>.

Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting:

1. Bagian Deklarasi
2. Bagian HEAD
3. Bagian BODY

Mari kita bahas satu-per-satu:

1. Bagian Deklarasi

Coba perhatikan kode pada baris pertama:

Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.

Lanjut…

Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk HTML:

Tag <html> wajib ada di setiap dokumen HTML..

Pada tag ini, kita memberikan atribut lang="en" untuk menyatakan kalau konten dokumen HTML ini akan menggunakan bahasa inggris.

Nah di dalam tag <html> ini, terdapat dua tag penting lagi.. yakni: tag <head> dan tag <body>.

Setelah itu barulah terakhir tag HTML ditutup dengan </html>.

2. Bagian HEAD

Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup dengan </head>.

Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin.

Seperti:

• Tag meta untuk SEO;
• Tag <title> untuk judul;
• Tempat menulis kode CSS dan Javascript;
• dan lain-lain.

3. Bagian BODY

Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai dari tag <body> dan ditutup dengan </body>.

Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat ini kita baru mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf

Apa Selanjutnya?

Nah, sampai di sini dulu tutorial pertama ini! 🎉

Jika ada yang belum jelas, jangan ragu untuk bertanya melalui komentar. Saya siap membantu!

Setelah ini, silakan lanjutkan untuk mempelajari:

1. Definisi Tag: Apa itu tag HTML dan bagaimana cara kerjanya.
2. Elemen: Memahami komponen yang membentuk struktur HTML.
3. Atribut: Mengetahui cara memberikan informasi tambahan pada tag.

Dengan memahami ketiga konsep ini, kamu akan lebih siap untuk membuat halaman web yang menarik. yuk mulai klik link dibawa  ini ya :

    -  Belajar HTML #01: Pengenalan Dasar HTML untuk Pemula

     -  Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

     - Belajar HTML #03: Membuat paragraf dalam HTML