Langsung ke konten utama

Mengetahui HTML Basic : Headings, Lines, Comments | KodeGua

 

Mengetahui HTML Basic : Headings, Lines, Comments 


Dalam HTML, Anda dapat menggunakan judul, garis horizontal, dan komentar untuk menyusun dan memberi anotasi pada konten halaman web Anda. Berikut cara menggunakan masing-masing elemen tersebut:

1. HTML Headings

HTML menyediakan enam tingkatan judul, dari <h1> (tingkat tertinggi) hingga <h6> (tingkat terendah). Judul digunakan untuk menentukan struktur konten Anda, dengan <h1> sebagai judul utama halaman dan <h6> mewakili subjudul. Berikut ini contohnya:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Example</title>
    <link rel="stylesheet" href="styles.css"> <!-- Hubungkan file CSS Anda di sini -->
</head>
<body>
    <h1>This is a Heading Level 1</h1>
    <h2>This is a Heading Level 2</h2>
    <h3>This is a Heading Level 3</h3>
    <h4>This is a Heading Level 2</h4>
    <h5>This is a Heading Level 3</h5>
    <h6>This is a Heading Level 2</h6>

</body>
</html>

2. Horizontal Lines

Anda dapat menggunakan elemen <hr> untuk menyisipkan garis horizontal untuk memisahkan konten di halaman web. Elemen <hr> dapat menutup sendiri dan tidak memerlukan tag penutup. Berikut ini contohnya:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Example</title>
    <link rel="stylesheet" href="styles.css"> <!-- Hubungkan file CSS Anda di sini -->
</head>
<body>
    <h1>This is a Heading Level 1</h1>
    <h2>This is a Heading Level 2</h2>
    <h3>This is a Heading Level 3</h3>
    <h4>This is a Heading Level 2</h4>
    <h5>This is a Heading Level 3</h5>
    <h6>This is a Heading Level 2</h6> 
<p>This is some text above the line.</p>
<hr>
<p>This is some text below the line.</p>

</body>
</html>

3. Comments 

Anda dapat menambahkan komentar ke kode HTML Anda menggunakan sintaks <!-- -->. Komentar tidak terlihat di halaman web dan biasanya digunakan untuk memberikan catatan atau penjelasan di dalam kode. Berikut cara menambahkan komentar:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Example</title>
    <link rel="stylesheet" href="styles.css"> <!-- Hubungkan file CSS Anda di sini -->
</head>
<body>
    <h1>This is a Heading Level 1</h1>
    <h2>This is a Heading Level 2</h2>
    <h3>This is a Heading Level 3</h3>
    <h4>This is a Heading Level 2</h4>
    <h5>This is a Heading Level 3</h5>
    <h6>This is a Heading Level 2</h6> 
<p>This is some text above the line.</p>
<hr>
<p>This is some text below the line.</p>
<!-- This is a comment. It won't be visible on the web page. -->
<p>This is some content.</p>

</body>
</html>

Komentar berguna untuk mendokumentasikan kode Anda atau menghapus sementara elemen tanpa menghapusnya.

Ini adalah contoh dasar bagaimana Anda dapat menggunakan judul, garis horizontal, dan komentar dalam dokumen HTML untuk menyusun dan memberi anotasi pada halaman web Anda.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Social proof section | Frontend Mentor | #Day12

Menjadi Seorang Frontend Developer Disini kita akan membuat sebuah dokumentasi perjalanan menuju seorang frontend developer, jadi ikuti dan saksikan perjalanan saya menjadi seorang frontend developer, saya akan konsisten dalam mengerjakan nya selama beberapa hari kedepan. ini adalah hari ke 12 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul  Social proof section  pada website frontend mentor, dengan kelas newbie, saya mengkonvert menggunakan  HTML  dan  CSS . dimana kita menganalisis terlebih dahulu apa saja kebutuhan yang kita perlukan. seperti memberikan kelas yang nantinya kita bisa style, dan melihat ketentuan yang berlaku, dibawah ini contoh kodingan yang sudah selesai : HTML  : <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> <!-- dis...
Posting Komentar
Baca selengkapnya

Apa Itu CSS? Pengertian, Fungsi, dan Cara Kerjanya - Kodegua

  CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML . CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.   CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.   Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.   HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampil...
Posting Komentar
Baca selengkapnya

Huddle landing page with a single introductory section | Frontend Mentor...

Menjadi Seorang Frontend Developer Disini kita akan membuat sebuah dokumentasi perjalanan menuju seorang frontend developer, jadi ikuti dan saksikan perjalanan saya menjadi seorang frontend developer, saya akan konsisten dalam mengerjakan nya selama beberapa hari kedepan. ini adalah hari ke 11 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul  Huddle landing page with a single introductory section  pada website frontend mentor, dengan kelas newbie, saya mengkonvert menggunakan  HTML  dan  CSS . dimana kita menganalisis terlebih dahulu apa saja kebutuhan yang kita perlukan. seperti memberikan kelas yang nantinya kita bisa style, dan melihat ketentuan yang berlaku, dibawah ini contoh kodingan yang sudah selesai : HTML  : <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0...
Posting Komentar
Baca selengkapnya