Cara Menampilkan Kode HTML di 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.

19 Desember 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat