[Pengantar HTML] Pelajaran 4 - Jeda baris, garis pemisah, dan html comments

[Pengantar HTML] Pelajaran 4 - Jeda baris, garis pemisah, dan komentar html

2024-07-12

Pada bagian ini, kita terus membahas tentang pengetahuan pengantar HTML, termasuk jeda baris, pemisahan garis horizontal, dan komentar (komentar html).

Daftar isi

1 baris baru

2 Pisahkan garis horizontal

3 komentar html

1 baris baru

html dibagi menjadielemen blok dan elemen sebaris. Di bagian ini, mari kita tidak membicarakan elemen-elemen ini terlebih dahulu. Mengapa kita berbicara tentang elemen blok? Anda mungkin memahaminya nanti.

Line break adalah tag br yang artinya kedua bagian konten dapat dipisahkan dan dihasilkan efek line break di tengahnya.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <p>这是第二段内容</p>
    </body>
</html>

Mari kita lihat efeknya di atas, karena tag p itu sendiri adalah elemen blok, dan elemen fast berarti jika Anda menulis dua elemen p, keduanya akan terbungkus. Namun, setelah elemen p dibungkus, ketinggian yang dihasilkan di tengah sudah pasti dan akan dikontrol oleh beberapa pengaturan default.

Lalu bagaimana jika Anda ingin jarak pemisah garis antara dua elemen blok menjadi lebih besar? Atau ingin ada efek pemisah baris di tengah teks? Kamu bisa melakukan ini:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是<br/>第一段内容</p>
        <br/>
        <p>这是第二段内容</p>
    </body>
</html>

Seperti terlihat pada gambar di atas, kedua tag p memiliki efek spasi yang besar di tengahnya. Selain itu, teks pada tag p pertama juga memiliki efek pembungkusan garis.

2 Pisahkan garis horizontal

Ini adalah situs resmi suatu universitas, lihatlah garis mendatar yang berada di tengah-tengahnya. Hal ini dapat diterapkan dengan berbagai cara, dan salah satunya adalah yang disebutkan di bagian ini. Nama tagnya adalah jam. Mari kita lihat efek kodenya:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <hr/>
        <p>这是第二段内容</p>
    </body>
</html>

Ini menciptakan pembagian garis horizontal. Tentu saja, jika Anda ingin mendapatkan efek pada contoh gambar, Anda perlu menambahkan beberapa kontrol gaya atau menggunakan solusi lain untuk mencapainya.

3 komentar html

Sebagai seorang pengembang, menulis komentar sangatlah penting. Jika kode Anda tidak memiliki komentar, akan mudah bagi orang lain untuk tidak memahaminya ketika Anda melihatnya kembali setelah beberapa saat. Atau jika Anda tidak menulis komentar, akan mudah bagi orang lain untuk tidak memahami kode Anda saat itu diserahkan kepada orang lain.

Selain itu, komentar adalah jenis konten yang digunakan pengembang untuk dibaca sendiri, bukan untuk dibaca mesin, atau untuk ditampilkan ke browser, sehingga komentar tidak akan ditampilkan di halaman web.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <!-- 这是第一行代码的注释内容 -->
        <p>这是第一段内容</p>
        <hr/>
        <!-- 这里是第二行哦 -->
        <p>这是第二段内容</p>
    </body>
</html>

Seperti pada kode di atas, kami menambahkan komentar ke dua baris kode masing-masing untuk memberi tahu pengembang sesuatu tentang diri mereka sendiri. Tapi itu tidak akan ditampilkan di browser.

Berbagi teknologi

[Pengantar HTML] Pelajaran 4 - Jeda baris, garis pemisah, dan komentar html

1 baris baru

2 Pisahkan garis horizontal

3 komentar html

Profil pribadi

informasi kontak saya