Belajar HTML - Part 1

Posted By Arif d |14 July 2023 | html | {{comments.comment.length}} Komentar

HTML (Hypertext Markup Language) adalah bahasa yang digunakan untuk membangun dan mengatur struktur dasar sebuah halaman web. Memahami HTML merupakan langkah pertama yang penting bagi siapa pun yang ingin terlibat dalam pengembangan web. Dalam artikel ini, kami akan memberikan panduan lengkap bagi pemula untuk mempelajari HTML dari dasar.

Apa itu HTML?

HTML adalah bahasa markup yang digunakan untuk mengatur konten dan struktur halaman web. Markup terdiri dari elemen-elemen yang diberi tag dan diapit oleh tanda kurung sudut (<>). Elemen-elemen ini memberi petunjuk kepada browser tentang bagaimana halaman web harus ditampilkan kepada pengguna.

Mengenal Struktur Dasar HTML

Setiap dokumen HTML dimulai dengan tag pembuka `<html>` dan diakhiri dengan tag penutup `</html>`. Bagian utama dari sebuah dokumen HTML terdiri dari tag `<head>` dan `<body>`. Bagian `<head>` berisi informasi meta tentang halaman, seperti judul, penghubung ke file CSS, atau skrip JavaScript. Bagian `<body>` merupakan tempat di mana konten utama halaman web ditempatkan.

Yuk biar ga bingung, ikuti langkah2nya : 

Buka Notepad, lalu ketik code berikut ini

<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Lalu simpan filenya dengan nama sembarang tapi di akhiri .html supaya file kamu terbaca sebagai html.
Lalu buka filenya melalu windows explorer atau finder.


Membuat Heading dan Paragraf

Tag-heading digunakan untuk membuat judul atau heading dalam dokumen HTML. Heading memiliki enam tingkatan yang berbeda, dimulai dari `<h1>` (heading terbesar) hingga `<h6>` (heading terkecil). Contohnya:

<h1>Ini adalah judul level 1</h1>
<h2>Ini adalah judul level 2</h2>

Tag `<p>` digunakan untuk membuat paragraf. Contohnya:

<p>Ini adalah sebuah paragraf.</p>


Menambahkan Gambar

Untuk menampilkan gambar di halaman web, gunakan tag `<img>`. Anda perlu memberikan atribut `src` yang berisi URL gambar yang ingin ditampilkan. Contohnya:

<img src="url_gambar.jpg" alt="Deskripsi gambar">

Atribut `alt` digunakan untuk memberikan deskripsi alternatif yang akan muncul jika gambar tidak dapat ditampilkan.


Membuat Tautan (Hyperlink)

Tautan atau hyperlink digunakan untuk menghubungkan halaman web antara satu dengan yang lain. Untuk membuat tautan, gunakan tag `<a>`. Atribut `href` digunakan untuk menentukan URL tujuan tautan. Contohnya:

<a href="https://www.contoh.com">Ini adalah tautan</a>

 

Menyusun Daftar

Anda dapat membuat daftar dengan menggunakan tag `<ul>` (daftar tak-terurut) atau `<ol>` (daftar terurut). Setiap item dalam daftar ditandai dengan tag `<li>`. Contohnya:

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

Tag `<ul>` menghasilkan daftar tak-terurut dengan bullet points, sedangkan tag `<ol>` menghasilkan daftar terurut dengan angka atau huruf.

Ini hanya sebagian kecil dari apa yang bisa Anda lakukan dengan HTML. Ada banyak elemen dan atribut lainnya yang dapat Anda eksplorasi saat Anda mengembangkan pengetahuan dan keahlian Anda dalam HTML.


Sumber Daya Tambahan

Selain artikel ini, ada banyak sumber daya tambahan yang dapat Anda gunakan untuk belajar HTML lebih lanjut. Berikut adalah beberapa saran:

1. W3Schools (https://www.w3schools.com/html/): Sumber daya online yang komprehensif untuk belajar HTML, termasuk tutorial, contoh, dan referensi.

2. Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Learn/HTML): Dokumentasi resmi dari Mozilla yang mencakup tutorial dan panduan HTML.

3. HTML Dog (https://www.htmldog.com/guides/html/): Panduan HTML yang mudah diikuti dengan contoh dan latihan interaktif.

Dengan semangat belajar yang gigih dan pengalaman praktik, Anda akan menjadi ahli dalam HTML dan siap untuk membangun halaman web yang menakjubkan. Selamat belajar!

Semua Komentar ({{comments.comment.length}})

  • {{v.person_name}} pada {{moment(v.created_at,'YYYY-MM-DD HH:mm:ss').format('dddd, D MMMM YYYY')}} jam {{moment(v.created_at,'YYYY-MM-DD HH:mm:ss').format('HH:mm A')}}
    {{v.comment_val}}

Tambahkan Komentar


Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.