{"id":30,"date":"2026-05-16T01:43:39","date_gmt":"2026-05-16T01:43:39","guid":{"rendered":"https:\/\/sintia.uassiitbvinus.my.id\/?p=30"},"modified":"2026-05-16T01:46:01","modified_gmt":"2026-05-16T01:46:01","slug":"mengenal-html-dasar-untuk-membuat-struktur-website","status":"publish","type":"post","link":"https:\/\/sintia.uassiitbvinus.my.id\/?p=30","title":{"rendered":"Mengenal HTML Dasar untuk Membuat Struktur Website"},"content":{"rendered":"\n
\n\n\n\n

Pendahuluan<\/strong><\/p>\n\n\n\n

Pengertian HTML<\/h1>\n\n\n\n

Perkembangan teknologi informasi membuat website menjadi salah satu media digital yang paling banyak digunakan dalam berbagai bidang, seperti pendidikan, bisnis, hiburan, dan komunikasi. Dalam proses pembuatan website, terdapat beberapa teknologi dasar yang wajib dipahami oleh seorang pengembang web, salah satunya adalah HTML. HTML merupakan fondasi utama dalam membangun sebuah halaman website karena berfungsi untuk menyusun struktur dan isi halaman web.<\/p>\n\n\n\n

Bagi mahasiswa yang ingin belajar membuat website, memahami HTML adalah langkah pertama yang sangat penting sebelum mempelajari CSS, JavaScript, maupun framework modern lainnya. Dengan HTML, seseorang dapat membuat halaman sederhana yang berisi teks, gambar, tabel, tautan, hingga formulir interaktif.<\/p>\n\n\n\n

Artikel ini akan membahas pengertian HTML, fungsi HTML, struktur dasar dokumen HTML, serta contoh penggunaannya dalam pembuatan website sederhana.<\/p>\n\n\n\n

\n\n\n\n

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa markup yang digunakan untuk membuat struktur halaman website. HTML bukan bahasa pemrograman, melainkan bahasa penanda yang digunakan untuk mengatur elemen-elemen pada halaman web agar dapat ditampilkan oleh browser seperti Google Chrome, Mozilla Firefox, dan Microsoft Edge.<\/p>\n\n\n\n

HTML pertama kali dikembangkan oleh Tim Berners-Lee pada tahun 1991 dan terus mengalami perkembangan hingga versi terbaru yaitu HTML5.<\/p>\n\n\n\n

\n\n\n\n

Fungsi HTML<\/h1>\n\n\n\n

HTML memiliki beberapa fungsi utama dalam pengembangan website, antara lain:<\/p>\n\n\n\n

    \n
  1. Membuat struktur halaman website.<\/li>\n\n\n\n
  2. Menampilkan teks, gambar, video, dan audio.<\/li>\n\n\n\n
  3. Membuat hyperlink atau tautan antar halaman.<\/li>\n\n\n\n
  4. Membuat tabel dan formulir.<\/li>\n\n\n\n
  5. Menjadi dasar penggabungan dengan CSS dan JavaScript.<\/li>\n<\/ol>\n\n\n\n

    Tanpa HTML, browser tidak dapat menampilkan halaman website dengan baik.<\/p>\n\n\n\n

    \n\n\n\n

    Struktur Dasar HTML<\/h1>\n\n\n\n

    Berikut adalah struktur dasar dokumen HTML:<\/p>\n\n\n\n

    <!DOCTYPE html>
    <html>
    <head>
        <title>Website Pertama Saya<\/title>
    <\/head>
    <body>
        <h1>Selamat Datang<\/h1>
        <p>Ini adalah website pertama saya.<\/p>
    <\/body>
    <\/html><\/code><\/pre>\n\n\n\n
    Penjelasan:<\/p>\n\n\n\n
      \n
    • <!DOCTYPE html><\/code> \u2192 Menandakan bahwa dokumen menggunakan HTML5.<\/li>\n\n\n\n
    • <html><\/code> \u2192 Elemen utama HTML.<\/li>\n\n\n\n
    • <head><\/code> \u2192 Berisi informasi tentang halaman.<\/li>\n\n\n\n
    • <title><\/code> \u2192 Judul halaman pada tab browser.<\/li>\n\n\n\n
    • <body><\/code> \u2192 Isi utama halaman website.<\/li>\n\n\n\n
    • <h1><\/code> \u2192 Heading atau judul utama.<\/li>\n\n\n\n
    • <p><\/code> \u2192 Paragraf.<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      Mengenal Tag HTML<\/h1>\n\n\n\n
      Tag HTML digunakan untuk menandai elemen tertentu pada halaman web. Sebagian besar tag memiliki pasangan pembuka dan penutup.<\/p>\n\n\n\n
      Contoh:<\/p>\n\n\n\n
      <p>Ini adalah paragraf.<\/p><\/code><\/pre>\n\n\n\n
      Berikut beberapa tag HTML yang sering digunakan:<\/p>\n\n\n\n
      Tag<\/th>Fungsi<\/th><\/tr><\/thead>
      <h1><\/code> sampai <h6><\/code><\/td>Membuat heading<\/td><\/tr>
      <p><\/code><\/td>Membuat paragraf<\/td><\/tr>
      <a><\/code><\/td>Membuat link<\/td><\/tr>
      <img><\/code><\/td>Menampilkan gambar<\/td><\/tr>
      <table><\/code><\/td>Membuat tabel<\/td><\/tr>
      <form><\/code><\/td>Membuat formulir<\/td><\/tr>
      <div><\/code><\/td>Membuat pembagian area<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \n\n\n\n
      Membuat Heading dan Paragraf<\/h1>\n\n\n\n
      Heading digunakan untuk membuat judul atau subjudul.<\/p>\n\n\n\n
      Contoh:<\/p>\n\n\n\n
      <h1>Judul Utama<\/h1>
      <h2>Sub Judul<\/h2>
      <p>Ini adalah isi paragraf.<\/p><\/code><\/pre>\n\n\n\n
      Heading membantu membuat halaman lebih rapi dan mudah dibaca.<\/p>\n\n\n\n
      \n\n\n\n
      Membuat Link pada Website<\/h1>\n\n\n\n
      HTML memungkinkan pengguna berpindah dari satu halaman ke halaman lain menggunakan hyperlink.<\/p>\n\n\n\n
      Contoh:<\/p>\n\n\n\n
      <a href=\"https:\/\/google.com\">Kunjungi Google<\/a><\/code><\/pre>\n\n\n\n
      Atribut href<\/code> digunakan untuk menentukan alamat tujuan link.<\/p>\n\n\n\n
      \n\n\n\n
      Menampilkan Gambar<\/h1>\n\n\n\n
      Gambar dapat ditampilkan menggunakan tag <img><\/code>.<\/p>\n\n\n\n
      Contoh:<\/p>\n\n\n\n
      <img src=\"gambar.jpg\" alt=\"Gambar Pemandangan\" width=\"300\"><\/code><\/pre>\n\n\n\n
      Penjelasan:<\/p>\n\n\n\n
        \n
      • src<\/code> \u2192 Lokasi file gambar.<\/li>\n\n\n\n
      • alt<\/code> \u2192 Teks alternatif jika gambar gagal ditampilkan.<\/li>\n\n\n\n
      • width<\/code> \u2192 Ukuran lebar gambar.<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        Membuat Tabel<\/h1>\n\n\n\n
        Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom.<\/p>\n\n\n\n
        Contoh:<\/p>\n\n\n\n
        <table border=\"1\">
            <tr>
                <th>Nama<\/th>
                <th>Jurusan<\/th>
            <\/tr>
            <tr>
                <td>Andi<\/td>
                <td>Informatika<\/td>
            <\/tr>
        <\/table><\/code><\/pre>\n\n\n\n
        Tag yang digunakan:<\/p>\n\n\n\n
          \n
        • <table><\/code> \u2192 Membuat tabel.<\/li>\n\n\n\n
        • <tr><\/code> \u2192 Baris tabel.<\/li>\n\n\n\n
        • <th><\/code> \u2192 Judul kolom.<\/li>\n\n\n\n
        • <td><\/code> \u2192 Isi tabel.<\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          Membuat Formulir<\/h1>\n\n\n\n
          Form digunakan untuk menerima input dari pengguna.<\/p>\n\n\n\n
          Contoh:<\/p>\n\n\n\n
          <form>
              Nama: <input type=\"text\"><br><br>
              Password: <input type=\"password\"><br><br>
              <input type=\"submit\" value=\"Login\">
          <\/form><\/code><\/pre>\n\n\n\n
          Jenis input yang umum digunakan:<\/p>\n\n\n\n
            \n
          • text<\/code><\/li>\n\n\n\n
          • password<\/code><\/li>\n\n\n\n
          • email<\/code><\/li>\n\n\n\n
          • radio<\/code><\/li>\n\n\n\n
          • checkbox<\/code><\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n
            Kelebihan HTML<\/h1>\n\n\n\n
            HTML memiliki beberapa kelebihan, yaitu:<\/p>\n\n\n\n
              \n
            1. Mudah dipelajari oleh pemula.<\/li>\n\n\n\n
            2. Didukung semua browser.<\/li>\n\n\n\n
            3. Gratis dan open source.<\/li>\n\n\n\n
            4. Mudah dikombinasikan dengan CSS dan JavaScript.<\/li>\n\n\n\n
            5. Menjadi standar utama pengembangan website.<\/li>\n<\/ol>\n\n\n\n
              \n\n\n\n
              Kekurangan HTML<\/h1>\n\n\n\n
              Selain kelebihan, HTML juga memiliki kekurangan:<\/p>\n\n\n\n
                \n
              1. Tidak dapat membuat fungsi kompleks tanpa bantuan JavaScript.<\/li>\n\n\n\n
              2. Tampilan standar HTML kurang menarik tanpa CSS.<\/li>\n\n\n\n
              3. Tidak dapat mengelola database secara langsung.<\/li>\n<\/ol>\n\n\n\n
                \n\n\n\n
                Kesimpulan<\/h1>\n\n\n\n
                HTML merupakan dasar utama dalam pembuatan website. Dengan memahami HTML, seseorang dapat membuat struktur halaman web sederhana hingga kompleks. HTML digunakan untuk mengatur teks, gambar, link, tabel, dan formulir agar dapat ditampilkan dengan baik di browser.<\/p>\n\n\n\n
                Bagi mahasiswa yang ingin mempelajari pengembangan website, memahami HTML adalah langkah awal yang wajib sebelum melanjutkan ke CSS, JavaScript, dan teknologi web lainnya. Dengan latihan yang rutin, kemampuan membuat website akan semakin berkembang dan dapat digunakan untuk membuat berbagai jenis aplikasi web modern.<\/p>\n","protected":false},"excerpt":{"rendered":"
                Pendahuluan Pengertian HTML Perkembangan teknologi informasi membuat website menjadi salah satu media digital yang paling banyak digunakan dalam berbagai bidang, seperti pendidikan, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-tak-berkategori"],"_links":{"self":[{"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30"}],"version-history":[{"count":2,"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=\/wp\/v2\/posts\/30\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sintia.uassiitbvinus.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}