Pengenalan HTML Dasar Untuk Pemula

Secara fundamental, HTML, CSS dan javascript itu adalah sebuah teknologi yang penting dan mendasa...
Penulis
Admin
Kategori
Tutorial
Estimasi
4 menit baca
Dilihat
894
Posting
30 Jul 2022
Pengenalan HTML Dasar Untuk Pemula Secara fundamental, HTML, CSS dan javascript itu adalah sebuah teknologi yang penting dan mendasar dalam website, keberadaan HTML, CSS dan javascript dalam dunia website sangat amat penting. Pengenalan HTML Dasar Untuk Pemula
2022-11-25

Bagi kalian yang ingin belajar tentang seputar website, saran saya adalah jangan dulu belajar bahasa pemrograman server side seperti PHP atau Phyton, lebih baik untuk membangun pondasi dulu dengan belajar tentang CSS dan belajar tentang Javascript sebagai modal agar nantinya ketika belajar bahasa pemrograman lain akan jauh lebih mudah.

Mengapa demikian? secara fundamental, bahasa pemrograman tersebut adalah sebuah teknologi pada website yang penting dan paling mendasar, keberadaan sangat amat penting. Bayangkan saja jika suatu website tidak ada CSSnya, apakah UI website tersebut akan menarik? apakah jika website tidak mengunakan atribute HTML secara struktur akan menjadi rapi? jelas tidak bukan.

 

Belajar HTML, pengenalan dasar HTML

 

Lalu apa fungsi Javascript? Javascript adalah sebuah teknologi yang berfungsi untuk membuat website menjadi interaktif. Pasti kalian pernah mengunjungi sebuah website tertentu, kalian mungkin melihat tampilan slider pada awal halaman dengan beberapa gambar yang otomatis bisa berubah-ubah atau bergeser, nah fungsi dari javascript adalah seperti itu. Oke, Kita lanjut kedalam topik utama.

 

 

1. Apa itu HTML (Hyper Text Markup Language)

HTML atau Hyper Text Markup Language adalah sebuah dokumen untuk membuat halaman pada website dan terdapat markup atau biasa disebut tag seperti div, p atau a. Tag tersebut berperan untuk menentukan struktur dan konten pada website.

Dari beberapa versi yang sudah rilis dari pertama kali pada tahun 1993 dirilis hingga saat ini diantaranya:

  • HTML 1.0 (Perilisan tahun 1993)
  • HTML 2.0 (Perilisan tahun 1995)
  • HTML 3.0 (Perilisan tahun 1995)
  • HTML 3.2 (Perilisan tahun 1997)
  • HTML 4.0 (Perilisan tahun 1998)
  • HTML 4.01 (Perilisan tahun 1999)
  • XHTML 1.0 (Perilisan tahun 2000)
  • XHTML 2.0 (Perilisan tahun 2002)
  • HTML 5 (Perilisan tahun 2014)

Saat ini rata-rata website diseluruh dunia sudah mengunakan dokumen dengan versi 5, jarang sekali yang mengunakan dokumen sebelum versi 5.

 

2. Apa saja tools untuk belajar HTML

Beberapa software atau tool yang bisa kalian gunakan untuk belajar dengan mengunakan software Visual Code atau Notepad++.

jika ingin mengunakan versi ringan bisa gunakan Notepad++ sebagai media untuk belajar yang nantinya juga bisa digunakan untuk belajar CSS atau Javascript.

 

3. Bagaimana HTML itu bekerja

Dokumen ini akan bekerja jika user melakukan request kedalam sebuah browser untuk menampilkan halaman website tertentu dan memberikan informasi terkait dengan halaman website itu sendiri.

Saat ini banyak sekali browser yang bisa digunakan untuk membuka file dokumen ini seperti Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge dan sebagainya. Untuk penggunaan browser sendiri, disarankan untuk mengunakan browser dengan versi terbaru agar mengunakan dokumen dengan versi terbaru.

Kalian juga perlu untuk mengetahui struktur dalam HTML, pada dasarnya untuk menjalankan sebuah HTML, diperlukan beberapa tag penting untuk menjalankannya seperti tag html, head dan body, kira-kira seperti ini diagramnya:

Struktur dasar HTML

 

4. Membuat dokumen HTML pertama

Buka software teks editor seperti Visual Code atau Notepad++ lalu buat file baru dan untuk nama file, terserah diisi dengan nama apapun yang terpenting diakhiri dengan dot HTML.

Struktur dasar yang biasa digunakan biasanya seperti ini:

//deklarasi
<!DOCTYPE html>

// tag pembuka
<html lang="id">

// tag head
<head>
   <title>Hello, Selamat datang!</title>
</head>

// tag body
<body>
   <p>Hello, Selamat datang!</p>
</body>

</html>

Klik save, lalu buka file tersebut kedalam browser, dan apa yang terjadi? maka nantinya akan menampilkan teks Hello, selamat datang! dan selamat kamu sudah membuat file dokumen HTML pertamamu.

Mengapa harus diakhiri dengan .html? karena jika kamu iseng merubahnya kedalam format .txt misalnya, yang terjadi adalah teks tersebut tidak akan tampil. Namun yang akan tampil adalah isi kode dari keseluruhan dokumen tersebut dan dokumen yang sudah dibuat tidak berfungsi.

Dalam aturan membuat tag baru seperti div, a dan lainnya, harus disertai dengan tag penutupnya, contoh:

// membuat tag baru div harus disertai dengan tag penutupnya
<div class="class-baru"></div>

// membuat tag baru anchor harus disertai dengan tag penutupnya
<a href="/home"></a>

 

5. Mengenal deklarasi pada HTML

Deklarasi pada dokumen ini biasanya diawali dengan tag:

<!DOCTYPE html>

Apa fungsi dari tag tersebut? tag tersebut adalah tag yang mendeklarasikan versi dari dokumen itu sendiri, dan tag tersebut merupakan tipe dokumen modern yaitu versi 5.

Bagaimana contoh tag deklarasi pada versi sebelumnya? untuk versi 4 sendiri penggunaan tagnya sangat berbeda, contohnya seperti ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Cukup panjang dan berbeda ya, satu hal yang harus diketahui oleh kalian yang sedang belajar adalah jangan menyalahi aturan W3C dengan tidak mengunakan deklarasi, biasakan saat membuat dokumen baru selalu mengunakan deklarasi tag ini.

Ada juga bagian kedua yaitu tag html, tag ini berfungsi untuk menyertakan atribut tambahan yang biasa digunakan untuk menentukan bahasa dalam dokumen, jika konten dibuat dengan mengunakan bahasa indonesia, maka deklarasinya pun menjadi seperti ini:

<html lang="id">

Jika mengunakan bahasa inggris bisa ganti dengan:

<html lang="en">

 

6. Menerapkan tag head pada HTML

Nah ini yang paling penting, tag Head itu tidak bisa dipisahkan, tag Head berfungsi untuk menyertakan atribut tambahan seperti judul halaman, deskripsi halaman, meta, tag CSS atau javascript.

Didalam contoh, kita mengunakan atribut judul untuk menampilkan judul dari dokumen:

<head>
   <title>Hello, Selamat datang!</title>
</head>

Jika ingin menambahkan atribut lain seperti deskripsi, seperti ini:

<head>
   <title>Hello, Selamat datang!</title>
   <meta name="description" content="hello ini deskripsi"/>
</head>

Mengapa tag Head itu sangat penting? itu karena tag Head akan memberikan informasi kepada mesin terkait informasi yang terdapat pada halaman itu sendiri. Jika tag ini tidak ada, maka mesin tidak akan memproses informasi dari halaman kalian.

 

7. Menerapkan tag body pada HTML

Tidak kalah pentingnya dengan Tag head. Tag body juga berperan sangat penting dalam dokumen dan bagian yang tidak bisa dipisahkan. Contoh penggunaan tag body:

<body>
   <p>Hello, Selamat datang!</p>
</body>

Dimana tag body ini adalah isi dari segala konten yang terdapat berbagai macam tag dengan fungsi yang berbeda-beda. Dalam contoh pengunaan tag didalam body:

<p>Hello, Selamat datang!</p>

Tag p dan penutupnya adalah tag yang berfungsi untuk menampilkan paragraf baru dengan mengisi text didalamnya, atau jika ingin menampilkan dengan text yang bold bisa menyisipkan tag baru.

Contoh penerapannya:

<p><b>Hello, Selamat datang!</b></p>

 

Kesimpulan

HTML merupakan salah satu bagian mendasar dari website dan menjadi patokan dalam mempelajari suatu teknologi dalam internet. Tidak ada website diseluruh dunia ini yang tidak menggunakan HTML sebagai dokumen penting mereka dalam menampilkan suatu data kedalam user. Semoga dalam pengenalan dasar dari HTML dapat membuka ilmu baru bagi kalian.

Share