HTML | Introduction

Overview

HTML atau Hypertext Markup Language adalah bahasa yang digunakan untuk membuat dan mengatur konten pada halaman web. Dalam era digital saat ini, HTML menjadi landasan utama dalam membangun situs web yang interaktif dan menarik. Dengan menggunakan HTML, kita dapat membuat struktur dasar dari halaman web dengan mudah.

Menggunakan HTML memberikan banyak manfaat. Salah satunya adalah kemampuannya dalam menyediakan struktur yang jelas dan terorganisir untuk konten di halaman web. Dengan struktur ini, pengguna dapat dengan mudah membaca dan mengerti informasi yang disajikan oleh situs web.

HTML juga memungkinkan pengguna untuk menyematkan berbagai elemen multimedia seperti gambar, video, atau suara ke dalam halaman web. Hal ini menjadikan situs web lebih menarik visualnya dan meningkatkan keterlibatan pengguna. Selain itu, dengan menggunakan HTML, kita juga dapat mengoptimalkan halaman web agar responsif di berbagai perangkat seperti komputer desktop hingga smartphone.

Apa itu HTML?

HTML, atau HyperText Markup Language, adalah bahasa yang digunakan untuk membuat dan merancang halaman web. Dalam bahasa sederhana, HTML adalah kerangka dasar yang digunakan untuk menampilkan teks, gambar, dan tautan di halaman web. HTML menggunakan tag dan elemen untuk mengatur tampilan konten di browser. Misalnya, tag <p> digunakan untuk menandai paragraf, sedangkan tag <img> digunakan untuk menyisipkan gambar. HTML adalah dasar dari semua situs web, dan pemahaman tentang HTML adalah langkah awal yang penting untuk menjadi seorang pengembang web.

Kenapa Menggunakan HTML

HTML adalah bahasa yang digunakan untuk membuat halaman web yang dapat diakses oleh semua orang di seluruh dunia. Hal ini karena HTML adalah bahasa yang kompatibel dengan semua browser utama, dan kompatibilitas ini menjadikannya bahasa standar untuk merancang halaman web. Dengan menggunakan HTML, kita dapat membuat halaman web yang dapat diakses oleh semua orang di seluruh dunia.

Satu alasan penting lainnya untuk menggunakan HTML adalah karena kemudahan penggunaannya. Bahasa ini sangat intuitif dan mudah dipelajari bahkan bagi pemula sekalipun. Kita tidak perlu menjadi seorang ahli dalam pemrograman atau desain web untuk menguasai dasar-dasar HTML dan membuat halaman web sederhana.

Tidak hanya itu, penggunaan HTML juga memberikan fleksibilitas yang luar biasa. Kita dapat menggabungkan elemen-elemen seperti teks, gambar, audio, video, formulir interaktif, dan banyak lagi ke dalam satu halaman web dengan mudah. Dengan demikian, kita memiliki kontrol penuh atas tampilan dan fungsi halaman web Kita.

Bagaimana Cara Menjalankan HTML

Setelah memahami apa itu HTML dan alasan mengapa menggunakan HTML, kita dapat melanjutkan untuk mempelajari bagaimana cara menjalankan HTML. Ada beberapa langkah yang perlu diikuti:

1. Membuat file HTML

Pertama-tama, kita perlu membuat file HTML dengan menggunakan editor teks biasa seperti Notepad atau TextEdit. Pastikan ekstensi file tersebut adalah .html agar dapat dikenali sebagai file HTML. Jika kita ingin memulai dengan cepat, ada beberapa program khusus yang dirancang untuk pengembangan web, seperti Sublime Text atau Visual Studio Code, yang menyediakan fitur-fitur yang berguna dalam menulis kode HTML.

2. Menulis Kode HTML

Setelah membuat file baru, buka file tersebut dengan editor teks pilihanmu dan mulailah menulis kode HTML. Kode-kode ini akan menentukan struktur dan isi dari halaman web-mu.

3. Menjalankan File HTML

Sekarang saatnya untuk menjalankan file HTML yang telah kita buat. Caranya cukup sederhana, buka file tersebut dengan browser web favorit kita. Browser akan menginterpretasikan dan menampilkan halaman web sesuai dengan kode HTML yang kita tulis.

Dengan mengikuti langkah-langkah di atas, kita dapat dengan mudah menjalankan dan melihat hasil dari halaman web HTML yang telah kita buat. Ingatlah untuk selalu mencoba dan bereksperimen saat belajar HTML, karena dengan praktik dan ketekunan, kemampuan kita akan semakin meningkat!

Struktur HTML

Saat Kita mempelajari HTML, penting untuk memahami struktur dasar dari sebuah dokumen HTML. Struktur ini mencakup elemen-elemen utama yang digunakan untuk membentuk halaman web yang dapat diakses dan dimengerti oleh browser. Dengan mengikuti struktur yang benar, Kita akan dapat membuat halaman web yang terstruktur dengan baik dan mudah dibaca oleh mesin pencari.

Salah satu elemen penting dalam struktur HTML adalah <html> tag, yang menandai awal dan akhir dari dokumen HTML. Di dalam tag <html>, Kita akan menemukan dua bagian utama: <head> dan <body>. Bagian <head> berisi informasi meta tentang halaman web Kita, seperti judul, deskripsi, dan penautan ke stylesheet eksternal jika ada. Bagian <body>, di sisi lain, merupakan area utama di mana konten aktual dari halaman web ditempatkan.

Lalu ada juga tag <!DOCTYPE html>, yang memberi tahu browser bahwa dokumen tersebut adalah dokumen HTML versi terbaru. Penting untuk menyertakan tag ini di awal setiap dokumen HTML agar browser dapat menginterpretasikan kode dengan benar. Selain itu, ada juga beberapa elemen lain seperti <header>.

Dalam menciptakan struktur HTML yang rapi dan terstruktur, hati-hati dalam penamaan elemen dan penggunaan tag yang sesuai. Pastikan setiap tag dibuka dan ditutup dengan benar untuk menghindari kesalahan saat browser membaca kode HTML Kita. Dengan memahami struktur dasar HTML, Kita akan memiliki fondasi yang kuat untuk membangun halaman web yang menarik dan mudah diakses oleh pengunjung.

Berikut ini adalah contoh struktur dasar dari dokumen HTML:

<!doctype html>
<html>
  <head>
    <title>Judul Halaman Web</title>
  </head>
  <body>
    <header>
      <h1>Selamat Datang di Halaman Saya</h1>
      <p>Ini adalah paragraf pengantar.</p>
    </header>
    <p>Ini adalah konten utama dari halaman web.</p>
    <footer>© 2022 Nama</footer>
  </body>
</html>

Struktur Folder Pada HTML

Folder structure pada HTML sebetulnya cukup bervariatif dan tidak ada standart khusus, namun umumnya terdiri dari index.html sebagai halaman utama dan beberapa file HTML lainnya didalam root directory, dan juga ada folder assets yang didalmnya juga terdapat folder css, images, dan js.

• index.html: File ini merupakan halaman awal atau utama dari sebuah website. Semua halaman HTML biasa ditempatkan didalam root folder.
• assets: Folder utama yang nantinya akan berisi folder-folder seperti css, images, dan js.
  • css: Folder ini berfungsi sebagai tempat untuk menempatkan file css yang akan kita gunakan didalam HTML kita (tempat file css eksternal).
  • images: Folder ini akan kita gunakan sebagai tempat untuk menaruh gambar-gambar yang ditampilkan pada HTML sebagai aset lokal.
  • js atau scripts: Untuk menempatkan file javascript atau script.

Cara Membuat HTML

Membuat halaman web dengan HTML tidaklah sulit. Dalam bab ini, kita akan membahas langkah-langkah dasar dalam membuat halaman web, termasuk penulisan kode HTML, penggunaan tag, menambahkan teks dan gambar, serta membuat tautan. Kami akan memberikan panduan langkah demi langkah untuk membuat halaman web sederhana dan memberikan contoh kode yang dapat kita gunakan sebagai referensi.

<!doctype html>
<html>
  <head>
    <title>Judul Halaman Web</title>
  </head>
  <body>
    <h1>Selamat datang di Modul HTML</h1>
    <p>Ini adalah contoh paragraf dalam halaman HTML.</p>
    <img src="gambar.jpg" alt="Contoh Gambar" />
    <a href="https://www.contohlink.com">Tautan Contoh</a>
  </body>
</html>

Kesimpulan

Kita sekarang memiliki pemahaman dasar tentang HTML, struktur dasar halaman web, dan cara membuat halaman web sederhana. HTML adalah fondasi dari semua situs web, dan dengan pengetahuan ini, kita telah mengambil langkah pertama dalam mengembangkan keterampilan pengembangan web kita.