Tutorial Belajar HTML Part 7 - Mengenal Teknik Formatting dalam HTML: Membuat Tampilan yang Menarik

Mengenal Teknik Formatting dalam HTML: Membuat Tampilan yang Menarik

Membuat tampilan yang menarik dan terstruktur dalam halaman web sangat penting dalam pengalaman pengguna. Dengan HTML, Anda dapat menggunakan berbagai teknik formatting untuk meningkatkan tampilan konten Anda.

1. Penggunaan Tag Heading

Tag heading, seperti <h1> hingga <h6>, digunakan untuk membuat judul dan subjudul. Menggunakan heading tags secara hierarkis membantu dalam menyusun informasi dengan jelas.

<h1>Judul Utama</h1>
<h2>Subjudul Pertama</h2>
<h3>Subjudul Kedua</h3>

2. Pemformatan Teks

Tag <strong> dan <em>

<p><strong>Teks tebal</strong> dan <em>miring</em></p>

Tag <u> dan <s>

<p><u>Teks bergaris bawah</u> dan <s>teks yang dicoret</s></p>

3. Pengaturan Daftar

Tag <ul> untuk daftar tak berurutan dan <ol> untuk daftar terurut memungkinkan Anda membuat daftar dengan mudah.

<ul>
    <li>Poin pertama</li>
    <li>Poin kedua</li>
</ul>

<ol>
    <li>Poin pertama</li>
    <li>Poin kedua</li>
</ol>

4. Menyematkan Gambar

Tag <img> digunakan untuk menyematkan gambar ke dalam halaman web.

<img src="lokasi-gambar.jpg" alt="Deskripsi Gambar">

5. Menyusun Konten dengan Tag <div>

Tag <div> digunakan untuk mengelompokkan konten ke dalam blok yang terpisah untuk memudahkan pemformatan dan tata letak.

<div class="container">
    <p>Konten di dalam div</p>
</div>

6. Menautkan Halaman dengan Tautan <a>

Tag <a> digunakan untuk membuat tautan ke halaman web atau ke bagian lain dalam halaman yang sama.

<a href="https://www.contoh.com">Tautan Contoh</a>

7. Menggunakan CSS untuk Pemformatan Lanjutan

Selain teknik-teknik dasar HTML di atas, Cascading Style Sheets (CSS) memungkinkan pemformatan lanjutan. Anda dapat mengubah warna, ukuran teks, tata letak, dan lebih banyak lagi dengan CSS.

Kesimpulan

Dengan memanfaatkan teknik formatting dalam HTML, Anda dapat membuat tampilan yang menarik dan terstruktur untuk konten web Anda. Kombinasikan teknik dasar HTML dengan pemahaman CSS untuk menciptakan tampilan yang lebih menarik dan responsif. Eksperimenlah dengan variasi formatting untuk meningkatkan kualitas visual dan aksesibilitas konten web Anda.


Yan Afriyoko

I am Yan Afriyoko, A Software Engineer with more than 8+ years of experience. I have completed over 250 projects, focusing on developing robust and efficient web applications. In addition, I am an expert in creating Software-as-a-Service (SaaS) development, API integration, and e-commerce projects.