Cara Menampilkan Kode HTML di Website

19/12/2017    Risman Hakim    6256     Website

Pernahkan diatara teman - teman ada yang bertanya bisakah kode HTML ditampilkan dihalaman web dan bagaimana bagaimana Cara Menampilkan Kode HTML di Website ? jawabannya, bisa dan itu sangat mudah sekali. HTML sebagai bahasa untuk membuat struktur layout sebuah web telah banyak memberikan kemudahan didalamnya dengan tag - tag yang bisa kita gunakan. Diantara sekian banyak tag - tag yang bisa kita gunakan terdapat tag yang dapat menampilkan semua kode yang terdapat didalam document HTML. Berikut tag yang dapat menampilkan kode - kode dihalaman website yakni :

1. <xmp></xmp>
2. <plaintext></plaintext>

Cara Menampilkan Kode HTML di Website

1. <xmp></xmp>

Tag pertama yang bisa teman - teman gunakan adalah tag <xmp></xmp>, tag ini akan menampilkan semua kode yang berada diatara tag pembuka dan penutup tag <xmp>.
Berikut contoh penggunaan tag <xmp></xmp>.

<xmp>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cara Menampilkan Kode HTML di Website</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrapper {
            width: 900px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="kiri">
            <h1 style="color: red">Ini adalah judul</h1>
            <p>Ini adalah paragraf</p>
        </div>
        <div class="kiri">
            <h1 style="color: red">Ini adalah judul</h1>
            <p>Ini adalah paragraf</p>
        </div>
    </div>
</body>
</html>
</xmp>

Maka hasil outputnya akan terlihat seperti gambar berikut ini.

Cara Menampilkan Kode HTML di Website

2. <plaintext></plaintext>

Berikutnya adalah tag <plaintext>, fungsi tag ini sama dengan tag sebelumnya yakni tag <xmp> hanya saja yang membedakan adalah tag ini akan menampilkan semua kode yang terletak setelah tag pembuka <plaintext>.
Berikut contoh penggunaan tag <plaintext></plaintext>.

<plaintext>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cara Menampilkan Kode HTML di Website</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrapper {
            width: 900px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="kiri">
            <h1 style="color: red">Ini adalah judul</h1>
            <p>Ini adalah paragraf</p>
        </div>
        <div class="kiri">
            <h1 style="color: red">Ini adalah judul</h1>
            <p>Ini adalah paragraf</p>
        </div>
    </div>
</plaintext>
</body>
</html>

Maka hasil outputnya akan terlihat seperti gambar berikut ini.

Cara Menampilkan Kode HTML di Website

Nah, Jika teman - teman ingin menampilkan kode - kode yang terdapat didalam HTML dihalam website, teman - teman dapat menggunakan tag - tag diatas. Bailah teman - teman cukup sekian pembahasan mengenai Cara Menampilkan Kode HTML di Website. Semoga bermanfaat.

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More