Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi 06 - Mengenal Tag Formatting Pada HTML Bagian 2

    Diunggah oleh

    anon_86410095
    14 tayangan24 halaman

    Judul Asli

    Materi 06 - Mengenal Tag Formatting pada HTML Bagian 2

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    14 tayangan24 halaman

    Materi 06 - Mengenal Tag Formatting Pada HTML Bagian 2

    Diunggah oleh

    anon_86410095

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 24

    Chapter 02

    Fundamental HTML
    Materi 06 Kelas Live Online
    Front End Web Designer

    Mengenal Tag Formatting


    pada HTML Bagian 2
    Pendahuluan

    Pada Chapter 02 Materi 06 ini, kita masih membahas tag


    formatting pada HTML, yaitu bagian 2 lanjutan dari bagian 1
    pada Materi 05.

    2
    Daftar Tag Formatting

    1. <em>
    2. <i>
    3. <ins>
    4. <kbd>
    5. <mark>
    6. <meter>
    7. <pre>
    8. <progress>
    9. <q>
    10. <s>

    3
    Tag <em> (1)

    Tag <em> digunakan untuk mendefinisikan teks yang


    ditekankan.

    Konten di dalamnya biasanya ditampilkan dalam cetak


    miring/italic.

    4
    Tag <em> (2)

    Contoh penulisan tag <em> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag em</h1>
    <p>Mahatma Gandhi pernah berkata:</p>
    <em>"Hiduplah seolah engkau mati besok, belajarlah seolah en
    gkau hidup selamanya."</em>
    </body>

    5
    Tag <i> (1)

    Tag <i> mendefinisikan bagian teks untuk penekanan terhadap


    teks yang mengandung unsur perasaan. Konten di dalamnya
    biasanya ditampilkan dalam huruf miring.

    Tag <i> sering digunakan untuk menunjukkan istilah teknis,


    frasa dari bahasa lain, pemikiran, nama kapal, dll.

    6
    Tag <i> (2)

    Contoh penulisan tag <i> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag i</h1>
    <p>Selamat belajar di codingers.id, terus semangat hingga me
    nguasai <i>Front End Web Designer</i>!!!</p>
    </body>

    7
    Tag <ins> (1)

    Tag <ins> mendefinisikan teks yang telah dimasukkan ke


    dalam dokumen.

    Browser biasanya akan menggaris bawahi teks yang


    disisipkan.

    8
    Tag <ins> (2)

    Contoh penulisan tag <ins> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag ins</h1>
    <p>Selamat belajar di codingers.id, terus semangat hingga me
    nguasai <ins>Front End Web Designer</ins>!!!</p>
    </body>

    9
    Tag <kbd> (1)

    Tag <kbd> digunakan untuk mendefinisikan input keyboard.

    Konten di dalamnya ditampilkan dalam font monospace


    default browser.

    10
    Tag <kbd> (2)

    Contoh penulisan tag <kbd> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag kbd</h1>
    <p>Tekan <kbd>Ctrl</kbd> + <kbd>C</kbd> untuk copy text pada Windows.</p>
    <p>Tekan <kbd>Cmd</kbd> + <kbd>C</kbd> untuk copy text pada Mac Os.</p>
    </body>

    11
    Tag <mark> (1)

    Tag <mark> mendefinisikan teks yang harus ditandai atau


    disorot.

    12
    Tag <mark> (2)

    Contoh penulisan tag <mark> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag mark</h1>
    <p>Selamat belajar di codingers.id, terus semangat hingga me
    nguasai <mark>Front End Web Designer</mark>!!!</p>
    </body>

    13
    Tag <meter> (1)

    Tag <meter> mendefinisikan pengukuran skala dalam rentang


    yang diketahui, atau nilai pecahan. Ini juga dikenal sebagai
    pengukur.

    Selalu tambahkan tag <label> untuk membantu dalam


    kemudahan penggunaan tag <meter>.

    Contoh: Penggunaan disk, relevansi hasil kueri, dll.

    14
    Tag <meter> (2)

    Contoh penulisan tag <meter> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag meter</h1>
    <label for="disk_c">Penggunaan Disk C:</label>
    <meter id="disk_c" value="350" min="0" max="500">250GB dari 500GB</meter><br>

    <label for="disk_d">Penggunaan Disk D:</label>


    <meter id="disk_d" value="0.3">30%</meter>
    </body>

    15
    Tag <pre> (1)

    Tag <pre> mendefinisikan teks yang telah diformat


    sebelumnya.

    Teks dalam elemen <pre> ditampilkan dalam font yang spasi


    dan jeda baris yang sama dengan kode sumber HTML.

    Teks akan ditampilkan persis seperti yang tertulis dalam kode


    sumber HTML.

    16
    Tag <pre> (2)

    Contoh penulisan tag <pre> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag pre</h1>
    <pre>
    Codingers.id
    C I D
    AB CD E FGH I Jk
    </pre>
    </body>

    17
    Tag <progress> (1)

    Tag <progress> mewakili kemajuan penyelesaian tugas.

    Selalu tambahkan tag <label> untuk membantu dalam kemudahan


    penggunaan tag <progress>.

    Gunakan tag <progress> bersama dengan JavaScript untuk


    menampilkan progres tugas.

    Tag <progress> tidak cocok untuk mewakili pengukuran skala dalam


    rentang yang diketahui, atau nilai pecahan. Untuk mewakili pengukur,
    gunakan tag <meter> sebagai gantinya.

    18
    Tag <progress> (2)

    Contoh penulisan tag <progress> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag progress</h1>
    <label for="file">Proses Upload:</label>
    <progress id="file" value="75" max="100"> 75% </progress>
    </body>

    19
    Tag <q> (1)

    Tag <q> mendefinisikan kutipan singkat.

    Browser biasanya menyisipkan tanda kutip di sekitar kutipan.

    Untuk kutipan yang Panjang, gunakan tag <blockquote>.

    20
    Tag <q> (2)

    Contoh penulisan tag <q> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag q</h1>
    <p>Ini adalah tes untuk quote pendek, <q>Membaca adalah jendela dunia</q>.</p>
    </body>

    21
    Tag <s> (1)

    Tag <s> menentukan teks yang tidak lagi benar, akurat, atau
    relevan.

    Teks akan ditampilkan dengan garis melewatinya.

    Tag <s> tidak boleh digunakan untuk mendefinisikan teks yang


    dihapus dalam dokumen, gunakan tag <del> untuk itu.

    22
    Tag <s> (2)

    Contoh penulisan tag <s> :


    <body>
    <h1>Hi Codingers, Ini Adalah Contoh Penggunaan Tag s</h1>
    <p>Penulisan yang benar menurut KBBI adalah Terima Kasih, bukan <s>Terimakasih</s>.</p>
    </body>

    23
    TERIMA KASIH

    24

    Anda mungkin juga menyukai