01 Jan 2020

Perintah Dasar Html Lengkap


Pendahuluan

HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman web. HTML digunakan untuk mendefinisikan struktur dan tata letak konten pada halaman web. Dalam artikel ini, kita akan membahas beberapa perintah dasar HTML yang sering digunakan dan bagaimana mengimplementasikannya dalam kode HTML.

Berikut adalah tabel yang menjelaskan beberapa perintah dasar HTML dan fungsinya:

Tag Deskripsi Contoh Implementasi
<a> Mendefinisikan hyperlink. <a href="https://www.example.com">Kunjungi Example</a>
<abbr> Mendefinisikan singkatan. <abbr title="Hypertext Markup Language">HTML</abbr>
<address> Mendefinisikan informasi kontak. <address>1234 Elm Street, Anytown, USA</address>
<area> Mendefinisikan area dalam image map. <area shape="rect" coords="34,44,270,350" href="https://www.example.com">
<article> Mendefinisikan konten artikel. <article><h2>Judul Artikel</h2><p>Ini adalah contoh artikel.</p></article>
<aside> Mendefinisikan konten samping yang terkait. <aside>Catatan: Ini adalah informasi samping.</aside>
<audio> Mendefinisikan elemen media audio. <audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
<b> Mendefinisikan teks tebal. <b>Ini adalah teks tebal.</b>
<base /> Mendefinisikan URL dasar untuk seluruh dokumen. <base href="https://www.example.com/">
<blockquote> Mendefinisikan kutipan panjang. <blockquote>Ini adalah contoh kutipan.</blockquote>
<button> Mendefinisikan tombol klik. <button type="button">Klik Saya!</button>
<canvas> Mendefinisikan area gambar grafis. <canvas id="myCanvas" width="200" height="100"></canvas>
<caption> Mendefinisikan judul tabel. <caption>Judul Tabel</caption>
<cite> Mendefinisikan sumber atau referensi. <cite>Sumber: Buku HTML</cite>
<code> Mendefinisikan kode program. <code>console.log('Hello, world!');</code>
<div> Mendefinisikan divisi atau bagian dalam dokumen. <div>Ini adalah contoh divisi.</div>
<em> Mendefinisikan teks miring atau penekanan. <em>Ini adalah teks yang ditekan.</em>
<embed /> Mendefinisikan resource embed eksternal. <embed src="file.pdf" width="600" height="500">
<fieldset> Mendefinisikan grup kontrol form. <fieldset><legend>Informasi Pribadi</legend><label>Nama:</label><input type="text" name="nama"></fieldset>
<figure> Mendefinisikan konten gambar dan caption. <figure><img src="gambar.jpg" alt="Contoh Gambar"><figcaption>Caption Gambar</figcaption></figure>
<footer> Mendefinisikan bagian bawah atau footer dari dokumen. <footer>© 2024 Website Saya</footer>
<form> Mendefinisikan form input pengguna. <form action="/submit" method="post"><label>Nama:</label><input type="text" name="nama"></form>
<h1> hingga <h6> Mendefinisikan heading level 1 hingga 6. <h1>Judul Utama</h1><h2>Sub Judul</h2>
<header> Mendefinisikan bagian atas atau header dari dokumen. <header><h1>Selamat Datang di Website Saya</h1></header>
<hr /> Mendefinisikan garis horizontal (pemisah konten). <hr>
<img /> Mendefinisikan gambar dalam dokumen. <img src="gambar.jpg" alt="Contoh Gambar">
<input /> Mendefinisikan elemen input untuk form. <input type="text" name="nama">
<label> Mendefinisikan sebuah label untuk elemen input. <label>Nama:</label><input type="text" name="nama">
<legend> Mendefinisikan sebuah caption untuk elemen fieldset. <legend>Informasi Pribadi</legend>
<li> Mendefinisikan sebuah item dalam sebuah daftar. <ul><li>Item Pertama</li><li>Item Kedua</li></ul>
<link /> Mendefinisikan hubungan antara dokumen dengan sebuah resource eksternal (sebuah gaya sheet, atau bookmark icon). <link rel="stylesheet" href="styles.css">
<meta /> Mendefinisikan metadata tentang dokumen HTML. <meta charset="UTF-8">
<nav> Mendefinisikan navigasi link. <nav><ul><li><a href="#home">Home</a></li></ul></nav>
<ol> Mendefinisikan daftar yang berurut. <ol><li>Item Pertama</li><li>Item Kedua</li></ol>
<p> Mendefinisikan paragraf. <p>Ini adalah sebuah paragraf.</p>
<pre> Mendefinisikan teks preformatted. <pre>Ini adalah contoh teks preformatted.</pre>
<script> Mendefinisikan elemen script (JavaScript). <script>alert('Hello, world!');</script>
<span> Mendefinisikan elemen inline dalam dokumen. <span style="color: red;">Teks berwarna merah.</span>
<strong> Mendefinisikan teks yang lebih penting. <strong>Ini adalah teks yang ditekankan.</strong>
<style> Mendefinisikan gaya CSS di dalam dokumen HTML. <style>body { background-color: #f0f0f0; }</style>
<table> Mendefinisikan tabel dalam dokumen HTML. <table border="1"><tr><td>Sel 1</td></tr></table>
<td> Mendefinisikan sel data dalam tabel. <table><tr><td>Sel 1</td></tr></table>
<textarea> Mendefinisikan area teks multi-baris dalam form. <textarea rows="4" cols="50">Masukkan teks di sini...</textarea>
<th> Mendefinisikan sel header dalam tabel. <table><tr><th>Header 1</th></tr></table>
<tr> Mendefinisikan baris dalam tabel. <table><tr><td>Sel 1</td></tr></table>
<ul> Mendefinisikan daftar yang tidak berurut. <ul><li>Item Pertama</li><li>Item Kedua</li></ul>
<video> Mendefinisikan elemen video. <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"></video>

Contoh Implementasi

Berikut adalah contoh implementasi sederhana dari beberapa tag HTML yang telah dijelaskan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Dasar HTML</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah sebuah paragraf yang memberikan informasi tentang isi halaman ini.</p>
    
    <h2>Daftar Tidak Berurutan</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    
    <h2>Daftar Berurutan</h2>
    <ol>
        <li>Langkah 1</li>
        <li>Langkah 2</li>
        <li>Langkah 3</li>
    </ol>
    
    <h2>Gambar dan Tautan</h2>
    <p>Berikut adalah gambar dengan tautan ke URL eksternal:</p>
    <a href="https://example.com">
        <img src="gambar.jpg" alt="Deskripsi Gambar">
    </a>
</body>
</html>

Penutup

HTML menyediakan berbagai macam tag yang dapat digunakan untuk menyusun dan menampilkan konten web dengan berbagai cara. Menguasai tag dasar HTML adalah langkah pertama yang penting untuk memahami pembuatan dan pengembangan situs web. Dengan memahami dan mengimplementasikan tag-tag ini, Anda dapat membuat halaman web yang informatif, menarik, dan fungsional.

Komentar