L8RqjKDGdBPnUDNo5KCAT0pjUViNvK2I1FGylFGk

Pengenalan Dasar Tentang HTML

 Untuk membuat website, hal yang harus kalian kuasai adalah HTML sehingga bahasa dasar ini wajib dipelajari oleh web developer.

Ketika kalian melihat artikel ini, Saya yakin sekali bahwa kalian sudah mempelajari tentang HTML. Tapi tidak ada salahnya kita mulai belajar HTML dari nol hingga mahir.

Baiklah, mari kita mulai. . .

Apa itu HTML?

 HTML sendiri singkatan dari Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk menampilkan sesuatu di browser.

 Jadi untuk menampilkan sesuatu ke halaman website. Kita diharuskan menyisipkan sebuah markup atau penanda.

Markup atau penanda tadi nantinya akan kita sebut dengan Tag.

Untuk membuat tampilan website, tidak cukup hanya mempelajari HTML saja. Kita juga diharuskan untuk mempelajari CSS dan juga JS.

Loh kenapa ?

Analogi hubungan HTML, CSS dan JS
Analogi HTML, CSS dan JS
Sumber : https://twitter.com/patagoniantech

Karena jika di ibaratkan manusia. HTML adalah kerangka (tengkorak) yang terlihat sangat mengerikan bukan?, JS berfungsi agar manusia terlihat lebih hidup karena JS dapat menentukan fungsi-fungsi serta efek animasi, dan CSS untuk memperindah tampilan sehingga nyaman untuk dilihat.

Pada tutorial ini difokuskan pada materi HTML dasar. Jadi jika kalian ingin belajar CSS atau JS silahkan baca juga:

  • Tutorial CSS
  • Tutorial JS

Semoga dapat dipahami yah. Selanjutnya kita akan masuk ke sejarah HTML.

Sejarah HTML

Pada tahun 1980 seorang ahli fisika bernama Tim Berners-Lee sedang bekerja di CERN.

CERN adalah singkatan dari bahasa prancis : Conseil Européen pour la Recherche Nucléaire yang artinya: Komisi Eropa untuk Penelitian Fisika Nuklir.

Website home.cern (2021)

Para peneliti cern pada saat itu membutuhkan sebuah sistem untuk berbagi dokumen hasil penelitian dan akhirnya Tim berhasil menciptakan software Hypertext. 9 tahun kemudian, Tim memperkenalkan adanya sistem markah (tag) berbasis internet.

Perkembangan dan Versi HTML

HTML mempunyai beberapa versi dari yang paling lawas hingga versi terbaru yaitu sebagai berikut:

  • HTML 1.0 (Juni 1993) adalah versi HTML pertama, namun tidak resmi dirilis;
  • HTML 2.0 (24 November 1995) dipublikasikan sebagai IETF RFC;
  • HTML 3.0 (28 Maret 1995) versi ini gagal beredar, karena banyak perubahan yang memicu perdebatan;
  • HTML 3.2 (14 Januari 1997) dipublikasikan sebagai Konsorsium World Wide Web pertamakali;
  • HTML 4.0 (24 April 1998) versi pengembangan dari yang seblumnya;
  • 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.

Ada 2 versi HTML diatas yang tidak resmi dirilis kepasaran (tidak dipublikasi).

Sampai saat ini para developer website menggunakan HTML versi 5. Oleh karena itu pula tutorial ini akan menjelaskan HTML 5.

Software yang diperlukan Belajar HTML

Untuk belajar HTML 5  kalian memerlukan alat tempur berikut ini.

1. Teks editor untuk menulis HTML/syntax

Untuk menuliskan kode HTML. kita memerlukan aplikasi teks editor seperti notepad.

Tapi jika kalian hanya menggunakan notepad biasa, akan terasa membosankan dan mungkin lebih pusing karena tidak ada warna dan bantuan dari aplikasi editor tersebut.

Oleh karena itu kalian memerlukan teks editor yang memiliki fitur syntax highlighter.

Saya sendiri lebih suka menggunakan Visual Studio Code dalam menuliskan kode program.

Tampilan Awal Visual Studio Code

Kalian boleh menggunakan Notepad++, Sublime Text 3, Visual Studio Code, atau juga Atom. Bebas tergantung kenyamanan kalian.

2. Web Browser / Peramban

Aplikasi peramban (browser).


Banyak sekali aplikasi browser saat ini. Biasanya aplikasi browser bawaan yaitu Internet Explorer.

Tapi saya sangat menyarankan menggunakan antara Mozile Firefox atau Google Chrome saja sudah.

Membuat File HTML Pertamamu

Tiba saatnya mulai membuat dokumen HTML pertama kita.

Cobalah buka teks editor dan ketikan kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Simpanlah hasil pengetikan kode di atas dengan nama "index.html", tanpa tanda petik. pastikan file yang tersimpang berextensi .html bukan .txt

Kode Struktur Dasar HTML

Untuk mengetahui apakah file yang tersimpan berExtensi .html jika menggunakan Visual Studio Code, bisa dilihat dari nama file yang telah saya tandai pada gambar diatas.

Cara Membuka File HTML

Selanjutnya kita coba buka file yang telah tersimpan tadi dengan cara sebagai berikut.

  1. Buka aplikasi file explorer kalian.
  2. Carilah folder dan file yang telah tersimpan.
  3. Arahkan kursor pada file lalu klik kanan -open with - pilih browser favorit kalian, disini saya membuka file html dengan google chrome.

Cara membuka file HTML

Setelah melakukan cara diatas, maka hasilnya akan terlihat seperti gambar dibawah ini.


Akhirnya kita berhasil membuat sebuah halaman website. . .

Sekarang saya akan coba menjelaskan maksud dari kode yang telah kita buat tadi.

Nama File HTML

Ada beberapa hal yang harus kalian perhatikan saat membuat nama file HTML.

1. Extensi File HTML

Ciri-ciri file HTML yaitu berextensi .html, .xhtml (untuk versi XHTML) dan .htm. Jadi jika tidak berextensi tersebut, kemungkinan besar tidak dapat terbaca oleh aplikasi browser kita.

2. Nama File

Untuk penamaan file HTML, sangat disarankan menggunakan nama yang tidak alay.

Contohnya:

  • PelAjara1.html
  • #(*@.html 

Selain nama file yang rumit, hindari juga penamaan file dengan spasi

Walaupun nama tersebut valid dan bisa dibuka oleh browser, tapi penamaan itu susah terbaca oleh mesin maupun manusia.

Adapun nama file untuk Home Page pada sebuah website, biasanya bernama index.html atau bisa juga index.php jika berbentuk file php.

Jadi ketika kalian mengunjungi sebuah website semisalnya tukutaka.com, maka file yang pertama kali di eksekusi yaitu yang bernama index.html.

Struktur Dasar HTML

Berikut adalah kode HTML yang baru saja kita buat.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Keterangan :

  1. <!DOCTYPE html> adalah sebuah deklarasi yang menunjukan versi HTML
  2. <html> adalah tag pembuka html yang diakhiri dengan tag </html> sebagai penutup.
  3. <head> adalah tag untuk membungkus bagian kepala website. biasanya untuk menyisipkan kode css, favicon website.
  4. <title> adalah tag untuk judul pada sebuah website dan selalu di akhiri tag penutup </title>
  5. <body> adalah isi dari semua konten. semua yang kamu tulis di dalam tag ini akan ditampilkan di browser.

Nah itulah penjelasan dari saya.

Semoga bermanfaat dan jangan lupa share.

Related Posts
Terbaru Lebih lama
Abdul Rosyid
Bacalah untuk mengetahui sesuatu. Tulislah untuk memahami sesuatu.

Related Posts

1 komentar

Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan.
Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim