Jika kalian ingin membangun website, bahasa pertama yang perlu pelajari adalah HTML.Pada artikel ini, kita akan membahas dasar-dasar HTML. Pada akhirnya, kita akan membuat situs web dasar hanya dengan menggunakan HTML.

Apa Itu HTML?

HTML, singkatan dari Hypertext Markup Language, adalah bahasa yang cukup sederhana. Ini terdiri dari elemen berbeda yang kami gunakan untuk menyusun halaman web. Kalian bisa melihat struktur HTML melalui ilustrasi berikut

 

Apa Itu Elemen HTML?

Elemen biasanya dimulai dengan tag pembuka, yang terdiri dari nama elemen. Itu dibungkus dalam kurung sudut buka dan tutup. Tag pembuka menunjukkan tempat elemen dimulai.

Mirip dengan tag pembuka, tag penutup juga dibungkus dengan tanda kurung siku buka dan tutup. Tapi itu juga termasuk garis miring sebelum nama elemen.

Semua yang ada di dalam tag pembuka dan penutup adalah isinya.

Namun tidak semua elemen mengikuti pola ini. Saya menyebutnya elemen yang tidak kosong. Mereka hanya terdiri dari satu tag atau satu tag pembuka yang tidak boleh memiliki konten apa pun. Elemen ini biasanya digunakan untuk menyisipkan atau menyematkan sesuatu ke dalam dokumen.

Misalnya, elemen <img> digunakan untuk menyematkan file gambar, atau elemen <input> digunakan untuk memasukkan input ke halaman.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

Bagaimana Membuat Elemen HTML Bersarang

Elemen dapat ditempatkan di dalam elemen lain. Ini disebut Nesting. Pada contoh di atas, di dalam elemen <div> saya memiliki elemen <ul> dan elemen <h4> atau daftar tidak berurutan. Begitu pula di dalam elemen <ul>, terdapat 3 atau elemen daftar item.

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Dasar bersarang cukup mudah untuk dipahami. Namun saat halaman menjadi lebih besar, penumpukan bisa menjadi rumit.

Oleh karena itu, sebelum bekerja dengan HTML, pikirkan tentang struktur tata letak yang ingin kalian miliki. Kalian bisa menggambarnya di selembar kertas, tentu hal ini akan sangat membantu. Contohnya bisa kalian lihat dibawah ini

Apa itu Atribut HTML?

Elemen juga memiliki atribut, yang berisi informasi tambahan tentang elemen yang tidak akan muncul dalam konten, misalkan untuk element gambar yang akan menyebutkan tinggi dan lebar suatu gambar

<img src="https://images.unsplash.com/photo" width="50">

Pada contoh di atas, elemen <img> memiliki 2 atribut: src atau source untuk menentukan jalur gambar, dan width lebar untuk menentukan lebar gambar dalam piksel.

Dengan contoh ini, kalian dapat melihat karakteristik atribut berikut:

• Ada spasi antara atribut dan nama elemen
• Atribut ditambahkan di tag pembuka
• Elemen dapat memiliki banyak atribut
• Atribut biasanya memiliki nama dan nilai: name = “value”

Namun tidak setiap atribut memiliki pola yang sama. Beberapa bisa ada tanpa nilai, dan saya menyebutnya Boolean Attributes.

<button onclick=“alert('Submit')" disabled>Button</button>

Dalam contoh diatas, jika saya ingin menonaktifkan tombol tersebut, yang harus kita lakukan adalah mengirimkan atribut disabled yang dinonaktifkan tanpa nilai apa pun. Artinya, keberadaan atribut merepresentasikan nilai sebenarnya, jika tidak, absen merepresentasikan nilai salah.

Elemen HTML umum

Ada total lebih dari 100 elemen. Tetapi 90%, kita hanya akan menggunakan sekitar 20 yang paling umum. Saya telah menempatkan mereka menjadi 5 kelompok:

1. Section elements

<div>, <span>, <header>, <footer>, <nav>, <main>, <section>

Elemen-elemen ini digunakan untuk mengatur konten menjadi beberapa bagian yang berbeda. Mereka biasanya cukup jelas, misalnya, <header> biasanya mewakili grup bagian pendahuluan dan navigasi, <nav> mewakili bagian yang berisi link navigasi, dan seterusnya.

2. Text content

<h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

Elemen-elemen ini digunakan untuk mengatur konten atau blok teks. Mereka penting untuk aksesibilitas dan SEO. Elemen ini memberi tahu browser tujuan atau struktur konten.

3. Forms

<form>, <input>, <button>, <label>, <textarea>

Elemen-elemen ini dapat digunakan secara bersama-sama untuk membuat formulir yang dapat diisi dan dikirim pengguna. Formulir mungkin merupakan bagian tersulit dari HTML karena akan melibatkan input dan mekanisme pertukaran data.

4. Images and Links

<img>, <a>

Elemen-elemen ini digunakan untuk menyisipkan gambar atau membuat hyperlink.

5. Elemen paragraf

<br>, <hr>

Elemen-elemen ini digunakan untuk menambahkan jeda ke halaman web.

Elemen Block-level vs inline HTML

Secara default, elemen dapat berupa elemen block-level atau inline. Elemen block-level adalah elemen yang selalu dimulai pada baris baru dan menggunakan lebar penuh yang tersedia. Elemen inline adalah elemen yang tidak dimulai pada baris baru dan hanya membutuhkan lebar yang diperlukan. Agar kalian tidak bingung, bisa melihat perbedaan berikut

Dua elemen yang masing-masing mewakili elemen block-level <div>  dan inline <span>.  Dalam contoh ini, kalian dapat melihat bahwa elemen <div> menampilkan 3 baris, sedangkan elemen <span> hanya menampilkan 1 baris.

Memberikan komentar didalam HTML

Tujuan komentar adalah untuk memasukkan catatan dalam kode untuk menjelaskan logika atau hanya untuk mengatur kode, agar kita tidak lupa. Komentar HTML dibungkus dengan penanda khusus: <!– and –>  dan diabaikan di browser.

<p>This is a paragraph.</p>

<!-- <p>ini adalah komentar.</p> -->

Cara menggunakan entitas HTML

Bagaimana jika kalian ingin menampilkan teks: <p> mendefinisikan sebuah paragraf., Tetapi browser mengartikan sebagai tag pembuka untuk elemen baru? Dalam hal ini, kita dapat menggunakan entitas HTML seperti pada contoh berikut, biasanya disebut dengan placeholder.

<p>the <p> tag defines a paragraph.</p>

<p>the &lt;p&gt; define a paragraph.</p>

Cara menggunakan emoji di HTML

Di web modern, kita dapat menampilkan emoji dalam HTML dengan cukup mudah, seperti ini: 👻

<p>😀 Grinning Face.</p>

<p>🎂 Birthday</p>

Kesalahan umum bagi pemula dalam menulis sintaks HTML

1. Nama Tag / Elemen

Nama Tag / Elemen adalah cAse-inSensitive. Ini berarti bahwa semuanya dapat ditulis dalam huruf kecil atau besar, tetapi saya disarankan untuk menulis semuanya dalam huruf kecil: <button>  bukan besar kecil seperti ini <ButTon>.

2. Tag penutup

Gagal memasukkan tag penutup adalah kesalahan pemula yang umum. Oleh karena itu, setiap kali kalian membuat tag pembuka, segera masukkan ke dalam tag penutup.

3. Bersarang/tag berkalang

Ini salah:

<div>Div 1 <span> Span 2 </div></span>

Tag harus membuka dan menutup sedemikian rupa sehingga berada di dalam atau di luar satu sama lain.

4. Kutip Tunggal dan Ganda

Ini salah:

<img src="https://images.unsplash.com/'>

Anda tidak dapat mencampur tanda kutip tunggal dan tanda kutip ganda. Kalian harus selalu menggunakan tanda kutip ganda dan menggunakan entitas HTML jika diperlukan.

Cara membangun situs web sederhana dengan HTML

Elemen HTML individu tidak cukup untuk membuat situs web. Jadi mari kita lihat apa lagi yang kita butuhkan untuk membangun situs web sederhana dari awal

Cara membuat dokumen HTML

Pertama, buka Visual Studio Code (atau editor kode favorit Anda). Di folder pilihan kalian, buat file baru dan beri nama index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Ini adalah kode minimal yang harus dimiliki dokumen HTML untuk membuat situs web seperti contoh diatas

1. <!DOCTYPE html>: Pertama kita punya Doctype. Untuk beberapa alasan, kita harus menyertakan doctype agar semuanya bekerja dengan benar.
2. <html lang="en"></html>: Elemen <html>  membungkus semua konten di halaman, juga dikenal sebagai elemen root. Dan kita harus selalu menyertakan atribut lang untuk mendeklarasikan bahasa halaman.
3. <head></head>:  elemen adalah wadah untuk semua yang ingin kita sertakan, tetapi bukan konten yang kita ingin tunjukkan kepada pengguna.
4. <meta charset="UTF-8" />: Elemen meta pertama digunakan untuk menyetel set karakter menjadi UTF-8, yang mencakup sebagian besar karakter dari bahasa tertulis
5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />:  Elemen meta kedua menentukan area pandang/view point browser. Setelan ini untuk situs yang dioptimalkan untuk seluler.
6. <title>Document</title>:  adalah element judul pada tab di browser
7. <body></body>: elemen berisi <body> semua konten di halaman