Pelajari Dasar HTML Untuk Pemula Dalam 15 Menit – Jika Anda ingin membangun situs web, bahasa pertama yang perlu Anda pelajari adalah HTML.

Pada artikel ini, kami akan memperkenalkan dasar-dasar HTML. Terakhir, javascriptoo akan membangun situs web dasar hanya dengan menggunakan HTML.

Pelajari Dasar HTML Untuk Pemula Dalam 15 Menit
Source : idcloudhost

Apa itu HTML ?

HTML adalah singkatan dari Hypertext Markup Language dan merupakan bahasa yang sangat sederhana. Ini terdiri dari berbagai elemen yang kami gunakan untuk membangun halaman web.

Apa itu HTML
Source : freecodecamp

Apa Itu Elemen HTML ?

Apa Itu Elemen HTML
Source : freecodecamp

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

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

Segala sesuatu di dalam tag pembuka dan penutup adalah konten.

Namun, tidak semua elemen mengikuti pola ini. Kami menyebut elemen-elemen yang tidak kosong itu. Mereka hanya terdiri dari satu tag atau tag pembuka yang tidak boleh berisi konten apa pun. Elemen-elemen ini biasanya digunakan untuk menyisipkan atau menyematkan konten tertentu di dalam dokumen.

Baca Juga : Tutorial Cara Kelola CSS Z-Index

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">

Dalam contoh di atas, elemen hanya terdiri dari tag tanpa konten apa pun. Elemen ini digunakan untuk memasukkan file gambar dari Unsplash.

Cara Membuat Elemen HTML

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


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

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

Dasar bersarang mudah dimengerti. Namun, saat halaman menjadi lebih besar, penumpukan menjadi rumit.

Oleh karena itu, sebelum menggunakan HTML, pertimbangkan struktur tata letak yang Anda inginkan. Anda bisa menggambarnya di selembar kertas atau di pikiran Anda. Ini akan sangat membantu.

Cara Membuat Elemen HTML
Source : freecodecamp

Apa itu atribut HTML ?

Elemen juga memiliki atribut, yang berisi informasi tambahan tentang elemen, yang tidak akan muncul di konten.

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

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

Source : freecodecamp

Melalui contoh ini, Anda dapat melihat karakteristik atribut berikut:

  • Ada spasi antara atribut dan nama elemen
  • Tambahkan atribut ke 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, kami menyebutnya atribut Boolean.

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

Dalam contoh ini, jika kita ingin menonaktifkan tombol, yang harus kita lakukan adalah mengirimkan atribut yang disabled tanpa nilai apa pun. Artinya, keberadaan atribut menunjukkan nilai sebenarnya, jika tidak, ketidakhadiran menunjukkan nilai kesalahan.

Elemen HTML Umum

Ada lebih dari 100 elemen secara total. Tetapi 90% dari waktu, Anda hanya akan menggunakan sekitar 20 metode paling umum. Saya membaginya menjadi 5 kelompok:

Section elements

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

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

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. Mereka memberi tahu browser tujuan atau struktur konten.

Forms

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

Elemen-elemen ini dapat digunakan bersama untuk membuat formulir yang dapat diisi dan dikirim pengguna. Bentuknya mungkin adalah bagian tersulit dari HTML.

 <img>, <a>

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

Lainnya

  <br>, <hr>

Elemen-elemen ini digunakan untuk menambahkan pemisah di halaman web.

Anda dapat menemukan semua elemen di developer.mozilla.org. Namun bagi pemula, Anda hanya perlu mengenal orang paling awam saja.

Baca Juga : 3 Kerangka Javascript Digunakan Pada 2021

Block-level vs Sebaris HTML Elements

Secara default, elemen dapat berupa elemen level blok atau elemen sebaris.

Elemen level blok adalah elemen yang selalu dimulai pada baris baru dan menempati lebar penuh yang tersedia.

Elemen sebaris adalah elemen yang tidak dimulai dari baris baru, hanya membutuhkan lebar yang diperlukan.

Source : freecodecamp

<div> dan <span> adalah dua elemen yang masing-masing mewakili elemen level blok dan sebaris. Dalam contoh ini, Anda dapat melihat bahwa elemen <div> menempati 3 baris, sedangkan elemen <span> hanya menempati 1 baris.

Tetapi pertanyaannya adalah: bagaimana kita tahu mana yang merupakan elemen level blok dan mana yang merupakan elemen sebaris? Sayangnya, Anda perlu mengingatnya. Cara termudah adalah dengan mengingat mana yang merupakan elemen sebaris-sisanya adalah elemen blok.

Jika kami meninjau elemen HTML yang paling umum, elemen sebaris meliputi :

<span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br>.

Cara Menggunakan Anotasi HTML

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

<!– <p>I am not showing.</p> –>

Tujuan dari komentar adalah untuk memasukkan komentar dalam kode untuk menjelaskan logika Anda atau hanya mengatur kode.

Komentar HTML terkandung dalam tag khusus: <!-- and -->, mereka diabaikan di browser.

Cara Menggunakan Entitas HTML

Bagaimana jika Anda ingin menampilkan teks: the <p> tag defines a paragraph. , Tapi browser menafsirkan <p> sebagai tag awal dari elemen baru? Dalam hal ini, kita dapat menggunakan entitas HTML seperti contoh berikut:

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

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

Cara Menggunakan Emoji Di HTML

Di website modern, kita dapat dengan mudah menampilkan emotikon dalam HTML, seperti yang ditunjukkan di bawah ini:

<p>😀 Grinning Face.</p>

<p>🎂 Birthday</p>

Kesalahan Umum Pemula HTML

1. Nama Tags/Element

Nama tag / elemen adalah cAse-inSensitive. Ini berarti bahwa mereka dapat ditulis dalam huruf kecil atau besar, tetapi disarankan agar Anda menulis semuanya dalam huruf kecil: <button> daripada <ButTon>.

Baca Juga : Cara Ubah Suara Menjadi Teks Dengan Javascript

2. Tag Penutup

Kegagalan untuk memasukkan tag penutup adalah kesalahan pemula yang umum. Oleh karena itu, setiap kali Anda membuat tag awal, Anda harus segera meletakkan tag akhir.

3. Nesting

Ini salah :

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

Tag harus dibuka dan ditutup dengan cara di dalam atau di luar satu sama lain.

4. Single quotes and Double quotes

Ini salah :

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

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

Cara Membangun Situs Web Sederhana Dengan HTML

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

Cara Membuat Dokumen HTML

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

Baca Juga : 20 Tools Android Development Terbaik

Di file index.html, masukkan! (Tanda seru) dan tekan Enter. Anda akan melihat yang berikut ini:

<!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 minimum yang diperlukan dokumen HTML untuk membentuk situs web. Di sini kami memiliki:

  • <!DOCTYPE html>: Pertama kita punya Doctype. Karena beberapa alasan sejarah aneh dalam HTML, kita harus menyertakan doctype agar semuanya berfungsi dengan baik.
  • <html lang="en"></html>: <html> Elemenmembungkus semua konten di halaman, juga dikenal sebagai elemen root. Selain itu, kita harus selalu menyertakan atribut lang untuk mendeklarasikan bahasa halaman.
  • <head></head>: <head> Elemen adalah wadah untuk semua konten yang ingin Anda sertakan, tetapi bukan wadah untuk konten yang ingin Anda tampilkan kepada pengguna.
  • <meta charset="UTF-8" /> : Elemen meta pertama digunakan untuk menyetel karakter ke UTF-8, yang mencakup sebagian besar karakter dari bahasa tertulis.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" /> : Elemen meta kedua menentukan area pandang browser. Pengaturan ini cocok untuk situs web yang dioptimalkan untuk perangkat seluler.
  • <title>Document</title>: Ini adalah elemen <title>. Ini menetapkan judul halaman.
  • <body></body>: Elemen <body> berisi semua konten di halaman.

Bagaimana Membuat Halaman Resep Pancake

Oke, sekarang kita memiliki kode entri, mari kita buat halaman resep pancake. Kami akan menggunakan konten dari halaman “Semua Resep”.

Pertama, mari kita beri konten elemen <title> resep pancake. Anda akan melihat perubahan teks pada tab halaman web. Dalam elemen <body>, kami membuat 3 elemen: <header>, <main> dan <footer> mewakili 3 bagian.

1. Bangun bagian judul

Di judul, kita perlu memiliki logo dan navigasi. Jadi mari kita buat div untuk logo dengan konten ALL RECIPE.

Untuk navigasi, mari gunakan elemen <nav>. Di dalam elemen <nav>, kita dapat menggunakan <ul> untuk membuat daftar yang tidak berurutan. Kami menginginkan 3 <li>elemen dari 3 tautan: bahan, langkah, dan langganan. Kode headernya adalah sebagai berikut:

...
<header>
<div>ALL RECIPE</div>
<nav>
<ul>
<li><a href="#ingredients">Ingredients</a></li>
<li><a href="#steps">Steps</a></li>
<li><a href="#subsribe">Subscribe</a></li>
</ul>
</nav>
</header>
...

2. Bentuk Tubuh Utama

Pertama, di bagian utama, kami menginginkan judul dan gambar. Kita dapat menggunakan h1 sebagai judul dan <img> sebagai gambar (kita dapat menggunakan gambar di Unsplash secara gratis):

...
<main>
<h1>Good Old Fashioned Pancakes</h1>
<img
src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502"
alt="pancake"
width="250"
/>

</main>
...

Selanjutnya, kami ingin membuat daftar semua bahan. Kita bisa menggunakan <ol> untuk membuat daftar berurutan, dan menggunakan <input type="checkbox" /> untuk membuat kotak centang.

Tapi sebelum itu, kita bisa menggunakan <h2> untuk memulai blok konten baru. Kami juga ingin menambahkan atribut id ke <h2> sehingga tautan di navigasi tahu ke mana harus pergi:

...
<main>
...
<h2 id="ingredients">Ingredients</h2>
<ol>
<li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
<li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
<li><input type="checkbox" /> 1 teaspoon salt</li>
<li><input type="checkbox" /> 1 tablespoon white sugar</li>
<li><input type="checkbox" /> 1 ¼ cups milk</li>
<li><input type="checkbox" /> 1 egg</li>
</ol>
</main>
...

Setelah bahan-bahannya, kami ingin membuat daftar semua langkahnya. Kita bisa menggunakan <h4> sebagai judul langkah dan <p> sebagai konten langkah:

...
<main>
...
<h2 id="steps">Steps</h2>

<h4>Step 1</h4>
<p>
In a large bowl, sift together the flour, baking powder, salt and sugar.
Make a well in the center and pour in the milk, egg and melted butter;
mix until smooth.
</p>

<h4>Step 2</h4>
<p>
Heat a lightly oiled griddle or frying pan over medium-high heat. Pour
or scoop the batter onto the griddle, using approximately 1/4 cup for
each pancake. Brown on both sides and serve hot.
</p>
</main>

Oke, sekarang kita telah menyelesaikan bagian utama, mari kita lanjutkan ke bagian footer.

3. Buat Bagian Footer

Di footer, kami ingin memiliki formulir langganan dan teks hak cipta.

Untuk formulir berlangganan, kita dapat menggunakan elemen <form>. Di dalamnya, kita dapat menggunakan <input type="text"> untuk input teks, dan menggunakan tombol kirim <button>.

Untuk teks hak cipta, kita cukup menggunakan <div>. Perhatikan bahwa di sini, kita dapat menggunakan entitas HTML $copy;. Simbol hak cipta.

Kami dapat menambahkan <br> beberapa spasi antara formulir langganan dan teks hak cipta:

...
    <footer>
      <h6 id="subscribe">Subscribe</h6>
      <form onsubmit="alert('Subscribed')">
        <input type="text" placeholder="Enter Email Address" />
        <button>Submit</button>
      </form>
      <br />
      <div>&copy; dakota kelly at Allrecipe.com</div>
    </footer>
...

Nah, kita selesai! Ini adalah kode lengkap untuk referensi:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pancake Recipe</title>
  </head>
  <body>
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="#ingredients">Ingredients</a></li>
          <li><a href="#steps">Steps</a></li>
          <li><a href="#subsribe">Subscribe</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Good Old Fashioned Pancakes</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGFuY2FrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
        alt="pancake"
        width="250"
      />
      <h2 id="ingredients">Ingredients</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
        <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
        <li><input type="checkbox" /> 1 teaspoon salt</li>
        <li><input type="checkbox" /> 1 tablespoon white sugar</li>
        <li><input type="checkbox" /> 1 ¼ cups milk</li>
        <li><input type="checkbox" /> 1 egg</li>
      </ol>
      <h2 id="steps">Steps</h2>
      <h4>Step 1</h4>
      <p>
        In a large bowl, sift together the flour, baking powder, salt and sugar.
        Make a well in the center and pour in the milk, egg and melted butter;
        mix until smooth.
      </p>
      <h4>Step 2</h4>
      <p>
        Heat a lightly oiled griddle or frying pan over medium-high heat. Pour
        or scoop the batter onto the griddle, using approximately 1/4 cup for
        each pancake. Brown on both sides and serve hot.
      </p>
    </main>
    <hr />
    <footer>
      <h6 id="subscribe">Subscribe</h6>
      <form onsubmit="alert('Subscribed')">
        <input type="text" placeholder="Enter Email Address" />
        <button>Submit</button>
      </form>
      <br />
      <div>&copy; dakota kelly at Allrecipe.com</div>
    </footer>
  </body>
</html>

Kesimpulannya

Anda dapat membangun situs web sederhana hanya dengan menggunakan HTML. Namun, untuk dapat membangun situs web yang indah dan kuat, Anda perlu mempelajari CSS dan JavaScript.

Anda dapat mengikuti saya di media sosial atau YouTube untuk pembaruan mendatang tentang topik ini. Namun, sementara itu, Anda dapat melihat kursus CodeCamp gratis untuk menyelesaikan tugas-tugas kecil untuk mempraktikkan HTML.