Tutorial Dasar HTML: Mengenal Tag, Elemen, dan Atribut HTML

Pada tutorial sebelumnya kita telah belajar tentang Sejarah, Struktur Dasar, dan Cara Membuat Halaman Web Sederhana. Sekarang saatnya kita akan mempelajari tentang Tutorial Dasar HTML. Dalam dunia pengembangan web, HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membangun struktur dan tampilan halaman web. Untuk memahami dasar-dasarnya, mari kita eksplorasi tentang tag, elemen, dan atribut dalam HTML.

Apa Itu Tag HTML?

Tag HTML adalah elemen dasar dalam HTML yang digunakan untuk memerintahkan browser bagaimana cara merender dan menampilkan konten di halaman web. Setiap tag HTML dinyatakan dengan menggunakan tanda kurung sudut (“<” dan “>”) dan biasanya memiliki elemen pembuka dan penutup yang mengapit konten di dalamnya.

Fungsi Utama Tag HTML

Tag HTML memiliki peran penting dalam merancang tampilan dan konten halaman web. Fungsi utama tag HTML adalah memberikan petunjuk kepada browser tentang bagaimana cara merender dan menampilkan informasi kepada pengguna. Dengan menggunakan tag HTML, Anda dapat menentukan tata letak, jenis konten, dan interaksi pada halaman web Anda.

Struktur Penulisan Tag HTML:

<tagname> Konten tag </tagname>

1	<tagname> Konten tag </tagname>

Contoh tag HTML:

<html>...</html>: Menandakan awal dan akhir dari dokumen HTML.
<head>...</head>: Berisi informasi meta dan tautan ke file eksternal.
<body>...</body>: Memuat konten yang akan ditampilkan di halaman.
<h1>...</h1>, <h2>...</h2>, …, <h6>...</h6>: Membuat judul dengan tingkat kepentingan yang berbeda.
<p>...</p>: Membuat paragraf teks.

Apa Itu Elemen HTML?

Elemen HTML adalah gabungan dari tag pembuka, konten, dan tag penutup yang membentuk sebuah unit dalam halaman web. Elemen ini memberi arti kepada konten yang dikelilinginya. Beberapa elemen HTML dapat memiliki konten dalam bentuk teks, gambar, tautan, atau bahkan elemen-elemen HTML lainnya.

Fungsi Utama Elemen HTML

Elemen HTML memiliki fungsi utama untuk memberikan instruksi kepada browser tentang bagaimana cara merender dan menampilkan konten di halaman web. Elemen HTML dapat berisi teks, gambar, tautan, formulir, video, dan banyak lagi. Dengan menggunakan elemen HTML, Anda dapat mengorganisir dan merancang tampilan halaman web sesuai keinginan.

Contoh elemen HTML:

<h1>Judul Utama</h1>
<p>Ini adalah paragraf teks.</p>
<a href="https://solusilain.com">Kunjungi Blog Saya</a>
<img src="gambar.jpg" alt="Deskripsi Gambar">

<h1>Judul Utama</h1>

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

<a href="https://solusilain.com">Kunjungi Blog Saya</a>

Apa Itu Atribut HTML?

Atribut HTML memberikan informasi tambahan tentang elemen, seperti properti atau nilai tertentu yang ingin diterapkan pada elemen tersebut. Atribut ditulis di dalam tag dan memiliki nama serta nilai yang diletakkan dalam tanda kutip.

Fungsi Utama Atribut HTML

Atribut HTML memberikan instruksi kepada browser tentang bagaimana elemen HTML harus ditampilkan atau dioperasikan. Mereka dapat mengubah penampilan visual, mengatur tautan, memberikan aksesibilitas, dan banyak lagi. Atribut memungkinkan Anda untuk mengontrol dan menyesuaikan elemen HTML sesuai kebutuhan Anda.

Contoh atribut HTML:

<a href="https://solusilain.com">Kunjungi Blog Saya</a>
<img src="gambar.jpg" alt="Deskripsi Gambar">
<input type="text" id="nama" name="nama" placeholder="Masukkan Nama">

<a href="https://solusilain.com">Kunjungi Blog Saya</a>

Dalam contoh di atas, href, src, alt, type, id, name, dan placeholder adalah atribut-atribut yang memberikan informasi tambahan tentang elemen yang berkaitan.

Contoh Penggunaan Tag, Elemen dan Atribut HTML

Berikut ini adalah contoh halaman HTML yang menerapkan Tag, Elemen dan Atribut HTML menjadi satu halaman web sederhana yang saya simpan kedalam file latihan_html_002.html:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman Web KelasRingan.Com</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #336699;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <header>
        <h1>Selamat Datang di KelasRingan.Com</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Layanan</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="tentang">
        <h2>Tentang Kami</h2>
        <p>Kami adalah tim yang insyaAllah berdedikasi dalam pengembangan web.</p>
        <img src="logo.png" alt="Logo Perusahaan">
    </section>
    
    <section id="layanan">
        <h2>Layanan Kami</h2>
        <ul>
            <li>Desain Web</li>
            <li>Pengembangan Aplikasi</li>
            <li>IT Support</li>
        </ul>
    </section>
    
    <footer>
        <p>Hak Cipta &copy; 2023 KelasRingan.Com</p>
    </footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Contoh Halaman Web KelasRingan.Com</title>

<style>

body {

font-family: Arial, sans-serif;

}

h1 {

color: #336699;

}

img {

max-width: 100%;

height: auto;

}

</style>

</head>

<body>

<h1>Selamat Datang di KelasRingan.Com</h1>

<nav>

<ul>

<li><a href="#">Beranda</a></li>

<li><a href="#">Tentang Kami</a></li>

<li><a href="#">Layanan</a></li>

<li><a href="#">Kontak</a></li>

</ul>

</nav>

</header>

<h2>Tentang Kami</h2>

<p>Kami adalah tim yang insyaAllah berdedikasi dalam pengembangan web.</p>

</section>

<h2>Layanan Kami</h2>

<ul>

<li>Desain Web</li>

<li>Pengembangan Aplikasi</li>

<li>IT Support</li>

</ul>

</section>

</footer>

</body>

</html>

Hasilnya dapat anda lihat pada gambar di bawah ini:

Kesimpulan

Dalam pengembangan web, tag, elemen, dan atribut HTML adalah fondasi dasar yang penting untuk dipahami. Tag HTML digunakan untuk membentuk struktur halaman, sedangkan elemen HTML merupakan unit konten yang dikelilingi oleh tag. Atribut HTML memberikan informasi tambahan tentang elemen. Dengan menguasai konsep ini, Anda akan dapat membangun halaman web yang terstruktur, informatif, dan menarik secara visual.

Tutorial lengkap html dapat anda lihat pada Index Tutorial HTML: Tingkat Dasar Hingga Tingkat Lanjut.

Apa Itu Tag HTML?

Apa Itu Elemen HTML?

Apa Itu Atribut HTML?

Contoh Penggunaan Tag, Elemen dan Atribut HTML

Kesimpulan

Artikel Terkait

Tinggalkan Komentar Batalkan Balasan