Koko James

Belajar Online Dunia Programming

html

Pengenalan Dasar HTML Untuk Pembuatan Web

—

by

Koko James
in , ,

HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dasar dari halaman web. Dengan pengenalan Dasar HTML, pengembang web dapat menentukan elemen-elemen seperti teks, gambar, tautan, dan formulir pada halaman web.

Table of Contents

Bab 1: Pengenalan Dasar HTML

HTML adalah bahasa markup yang digunakan untuk membuat halaman web. Setiap elemen HTML direpresentasikan oleh tag yang mendefinisikan fungsi dan tampilan dari elemen tersebut.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah halaman web pertama saya.</p>
</body>
</html>

Hasil:

pengenalan dasar html

Bab 2: Struktur Dasar HTML

Setiap halaman HTML dimulai dengan tag <!DOCTYPE html> yang mendefinisikan jenis dokumen dan diikuti oleh elemen <html> yang berisi semua elemen halaman web.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Struktur Dasar HTML</title>
</head>
<body>
    <!-- Isi halaman web di sini -->
</body>
</html>

Bab 3: Elemen Heading dan Paragraph

Elemen <h1> hingga <h6> digunakan untuk membuat judul atau heading pada halaman web. Elemen <p> digunakan untuk menampilkan teks paragraf.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>

Hasil:

pengenalan dasar html

Bab 4: Elemen Tautan

Elemen <a> digunakan untuk membuat tautan atau hyperlink ke halaman web lain atau ke bagian yang berbeda dari halaman yang sama.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf pertama.</p>
    <a href="https://www.example.com">Klik di sini</a> untuk mengunjungi situs web kami.
</body>
</html>

Hasil:

Bab 5: Elemen Gambar

Elemen <img> digunakan untuk menampilkan gambar pada halaman web.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf pertama.</p>
    <a href="https://www.example.com">Klik di sini</a> untuk mengunjungi situs web kami.
    <img src="gambar.jpg" alt="Deskripsi Gambar">
</body>
</html>

Gambar bisa didownload disini

Hasil:

Bab 6: Elemen Tabel

Elemen <table> digunakan untuk membuat tabel pada halaman web, dengan baris dan kolom yang ditentukan oleh elemen <tr> dan <td>.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf pertama.</p>
    <a href="https://www.example.com">Klik di sini</a> untuk mengunjungi situs web kami.
    <img src="gambar.jpg" alt="Deskripsi Gambar">
    <table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
</body>
</html>

Hasil:

Bab 7: Elemen Form

Elemen <form> digunakan untuk membuat formulir input seperti teks, kotak centang, tombol radio, dan lainnya.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf pertama.</p>

    <form>
      <label for="nama">Nama:</label>
      <input type="text" id="nama" name="nama">
      <input type="submit" value="Kirim">
    </form>
</body>
</html>

Hasil:

Bab 8: Elemen List

Elemen <ul> digunakan untuk membuat daftar tak berurutan, sedangkan <ol> digunakan untuk membuat daftar berurutan.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Judul Utama</h1>
    <p>Ini adalah paragraf pertama.</p>

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

   <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ol>
</body>
</html>

Hasil:

Elemen <header> dan <footer> digunakan untuk menentukan bagian awal dan akhir dari halaman web secara terpisah.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
  <header>
    <h1>Header Halaman Web</h1>
  </header>

  <footer>
    <p>Hak Cipta &copy; 2024</p>
  </footer>
</body>
</html>

Hasil

Bab 10: Elemen Navigasi

Elemen <nav> digunakan untuk menentukan bagian navigasi dari halaman web, seperti menu.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
  <nav>
    <a href="#">Beranda</a> |
    <a href="#">Tentang Kami</a> |
    <a href="#">Kontak</a>
  </nav>
</body>
</html>

Hasil

Bab 11: Elemen Artikel dan Section

Elemen <article> digunakan untuk menentukan konten independen, sedangkan <section> digunakan untuk menentukan bagian dari halaman web.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
  <article>
    <h2>Artikel 1</h2>
    <p>Isi artikel 1.</p>
  </article>

  <section>
    <h2>Bagian 1</h2>
    <p>Isi bagian 1.</p>
  </section>
</body>
</html>

Hasil

Bab 12: Elemen Semantik

Elemen semantik seperti <header>, <footer>, <nav>, <article>, dan <section> digunakan untuk memberikan makna dan struktur yang jelas pada halaman web.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
  <header>
    <h1>Header Halaman Web</h1>
  </header>

  <footer>
    <p>Hak Cipta &copy; 2024</p>
  </footer>
</body>
</html>

Hasil

Bab 13: Elemen Multimedia

Elemen <audio> dan <video> digunakan untuk menampilkan konten multimedia seperti audio dan video.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
   <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Browser Anda tidak mendukung audio.
   </audio>

   <video controls width="500px" height="250px">
    <source src="video.mp4" type="video/mp4" >
    Browser Anda tidak mendukung video.
   </video>
</body>
</html>

File pendukung bisa di Dowload : Audio, Video

Hasil

Bab 14: Elemen Meta

Elemen <meta> digunakan untuk menyediakan informasi meta-data tentang halaman web, seperti deskripsi, kata kunci, dan karakter set.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
    <meta charset="UTF-8">
    <meta name="description" content="Contoh Halaman Web">
    <meta name="keywords" content="HTML, CSS, JavaScript">
</head>
<body>
  Testing tag meta
</body>
</html>

Hasil

Elemen <link> digunakan untuk menautkan halaman web dengan stylesheet eksternal atau halaman web lainnya.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
    <meta charset="UTF-8">
    <meta name="description" content="Contoh Halaman Web">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  Testing Link CSS
</body>
</html>

file style.css

body {
  background-color: #FCFCAA;
}

Hasil

Bab 16: Elemen Script

Elemen <script> digunakan untuk menambahkan skrip JavaScript pada halaman web.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
    <meta charset="UTF-8">
    <meta name="description" content="Contoh Halaman Web">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    
    <script type="text/javascript">
     function setAlert(){
    	alert("Halo, Dunia!");
     }
    </script>
</head>
<body>
  Testing javascipt
  <div onclick="setAlert()">Click ini</div>
</body>
</html>

Hasil

Bab 17: Komentar HTML

Komentar HTML digunakan untuk menambahkan catatan atau keterangan pada kode HTML, yang tidak akan ditampilkan di halaman web.

Contoh Coding:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web</title>
</head>
<body>
  <!-- Ini adalah komentar HTML -->
</body>
</html>

HTML merupakan fondasi dari pengembangan web modern. Dengan pemahaman atas konsep-konsep dasar dan contoh penggunaannya, Anda dapat memulai perjalanan Anda dalam membangun halaman web yang dinamis dan interaktif. selain HTML, anda juga perlu belajar Jasacript untuk melengkapi skill anda. Selamat belajar!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *