Scribd Logo
Unggah

Selamat datang di Scribd!

  • Berikut Ini Daftar Tag

    Diunggah oleh

    Syaputra Ervian
    7 tayangan9 halaman

    Judul Asli

    Berikut ini daftar tag

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, 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 DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan9 halaman

    Berikut Ini Daftar Tag

    Diunggah oleh

    Syaputra Ervian

    Hak Cipta:

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

    Berikut ini daftar tag-tag dasar, yang harus diketahui.

    Tag Fungsi

    <html> untuk memulai dokumen HTML

    <head> untuk membuat bagian head

    <body> untuk membuat bagian body

    <h1> sampai <h6> untuk membuat heading pada artikel

    <p> untuk membuat paragraf

    <!-- --> untuk membuat komentar


    beberapa istilah untuk belajar HTML:

     Tag: awalan instruksi atau perintah yang akan dibaca browser. Misalnya:
    tag <bold>.
     Elemen: keseluruhan kode yang terdiri dari tag pembuka (< >) hingga tag
    penutup (/< >).
     Atribut/property: informasi atau perintah tambahan yang berada di
    dalam elemen (Contoh: style)

    Nah sekarang, Anda sudah siap belajar contoh HTML untuk pemula. Di bagian
    akhir, kami juga akan memberikan bonus contoh desain web HTML keren yang
    layak Anda coba, lho. Penasaran? Yuk lanjut membaca!

    1. HTML Basic

    Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML Basic.
    Apa saja yang pasti ada dalam coding HTML Basic? Kami akan membedahnya
    satu per satu.
    1
    2 <!DOCTYPE html>
    <html>
    3 <head>
    4 <title>Title of the document</title>
    5 </head>
    6 <body>
    <h1>Heading</h1>
    7
    <p>Paragraf.</p>
    8 </body>
    9 </html>
    10

    Pertama, dokumen HTML adalah harus diawali dengan <!DOCTYPE html>.


    Fungsinya sebagai deklarasi sehingga browser tahu dokumen ditulis dalam
    HTML.

    Berikutnya, ada tag <html>. Tag ini akan menampung seluruh tag HTML dari
    awal hingga penutupan, yaitu </html>.

    Setelah <html>, masuk ke tag <head>. Seperti namanya, tag ini berisi coding
    HTML untuk membuat kepala dokumen. Hasilnya akan terlihat sebagai judul
    pada tab browser Anda.
    Lalu, masuk ke tag <body>. Coding HTML ini memuat inti dokumen HTML
    Anda, yaitu isian website.

    Di akhir, jangan lupa tutup dokumen HTML dengan tag penutup yang sesuai
    (</html>, </body>, dll).

    2. Heading

    Heading adalah judul hingga sub-judul yang ada di dalam website. Fungsinya,
    untuk memetakan info dari umum ke khusus.

    Selain memudahkan visitor menangkap inti informasi, heading juga


    mendongkrak SEO website.

    Alasannya, Google jadi lebih paham struktur dan konteks artikel, deskripsi
    produk, ataupun media teks lainnya pada website.

    Berikut contoh HTML untuk berbagai macam heading.

    <h1> Heading 1 <h1>


    <h2> Heading 2 <h2>
    <h3> Heading 3 <h3>
    <h4> Heading 4 <h4>

    Makin spesifik info dan pemilihan sub-judulnya, makin kecil juga ukuran
    heading. Tentunya dengan coding HTML tag heading, Anda tak perlu repot-
    repot format ukuran heading secara manual. Praktis, bukan?

    3. Paragraf

    Nah, contoh HTML berikutnya yaitu membuat paragraf.

    Paragraf itu penting. Sekarang, bayangkan Anda membaca artikel website yang
    tidak punya paragraf. Setiap ide pokok terlihat samar dan melelahkan mata gara-
    gara tak punya jeda.
    Karena itu, setiap paragraf perlu dipisah. Nah untuk membuat paragraf dengan
    coding HTML, gunakan saja tag P.

    <p>text</p>

    Setelah itu, paragraf baru akan muncul menjadi baris baru. Alhasil, tulisan jadi
    lebih enak dibaca dan rapi, bukan?

    4. Bold/Strong

    Contoh coding HTML berikutnya, ada bold/strong.

    Pasti, Anda sudah tahu tag HTML ini akan memberi efek tebal pada tulisan.
    Tapi, apa sih beda antara bold dan strong?

    Tulisan dengan efek bold (atas) dan strong (bawah)

    Pertama, coding HTML bold dan strong memiliki tag yang berbeda:

    <b>Afiliasi adalah kerja sama promosi dan penjualan produk</b>


    <strong>Afiliasi adalah kerja sama promosi dan penjualan produk</strong>

    Dan meskipun outputnya terlihat sama, Google memandangnya lain.


    Coding HTML bold sekadar memberi efek tebal, sedangkan tag
    strong memiliki pengaruh bagi web crawling. Sebab, tag strong mampu
    memberitahu Google kata atau keyword penting yang memperkuat info dari
    konten website.

    Jadi, manakah yang Anda butuhkan? Tag bold atau tag strong?

    5. Italic/Emphasize

    Mirip seperti tag bold/strong, ada dua coding HTML yang bisa Anda pakai
    untuk memiringkan kata-kata.

    Berikut contoh HTML dengan tag italic/emphasize.

    <i>Bug adalah istilah bahasa Inggris yang artinya serangga.<i>


    <em>Bug adalah istilah bahasa Inggris yang artinya serangga.<em>

    Lalu, manakah yang sebaiknya Anda pakai?

    Kembali lagi ke kebutuhan Anda. Jika hanya ingin memiringkan kata-kata saja,
    gunakanlah coding HTML italic. Sedangkan jika mau menekankan kata tertentu
    agar Google lebih mudah mengindeks konten, pakailah tag <em>.

    6. Line Break

    Sekilas, coding HTML Line Break mirip dengan coding HTML paragraf.

    Seperti namanya, Line Break berfungsi membuat baris baru. Namun, baris
    tersebut masih dalam paragraf yang sama. Ini dia contoh HTML Line Break.

    <p> <br>Text
    <br> Text </p>
    Hasilnya akan terlihat seperti ini.

    Lalu, apa sih yang membedakan coding HTML Line Break dengan Paragraf?

    Untuk outputnya sendiri memang sepintas sama. Namun, tag <p> lebih berisiko
    error pada beberapa browser. Sedangkan tag <br> digadang-gadang akan lebih
    di-support oleh HTML5 daripada tag <p>.

    Beda dari contoh HTML-lainnya, coding HTML <br> memang tidak


    memiliki tag penutup </br>. Jadi, Anda cukup menggunakan <br> saja.

    7. Images

    Siapa yang suka website tanpa gambar? Mungkin, hampir tidak ada orang yang
    menyukainya!

    Selain membosankan, info dalam website jadi kurang jelas. Faktanya,


    memasukkan ilustrasi meningkatkan views hingga 45%, loh.

    Nah untuk memasukkan gambar, gunakan coding HTML images. Ukurannya


    juga bisa Anda atur sendiri pada atribut Style.

    <img src=”url atau lokasi penyimpanan gambar” alt=”text” style=”width:500px;height:333px;”>

    Berikut hasil contoh HTML images.

    Eits, tunggu sebentar. Jika Anda perhatikan, dalam contoh coding HTML
    images tadi ada atribut ‘alt’. Apakah itu?

    Alt text adalah kata yang diselipkan ke dalam gambar. Fungsinya sebagai
    antisipasi jika gambar invalid. Artinya, saat gambar tidak muncul, alt text akan
    menggantikannya sehingga visitor web tetap memahami deskripsi image.
    8. Horizontal line

    Contoh HTML selanjutnya, horizontal line.

    Sederhana saja, coding HTML ini memungkinkan Anda membuat garis


    horizontal.

    Contoh coding HTML-nya juga simple. Cukup masukkan tag <hr> pada bagian
    yang Anda inginkan.

    <p> text </p>


    <hr>
    <p> text </p>

    Penting!

    Beda dari tag lainnya, tag <br>, <img>, dan <hr> memang tidak memiliki tag
    penutup (/br>, </img>, </hr>).
    9. Cross-through text

    Cross-through text atau teks yang dicoret mampu menekankan makna tertentu
    pada tulisan/informasi.

    Biasanya, para penulis menggunakan strategi ini untuk menunjukkan versi benar
    atau lebih baik dari suatu hal.

    Membuat cross-through text mudah, kok. Langsung saja gunakan contoh HTML
    ini.

    <del>text.</del>

    Sekarang, Anda sudah bisa mencoret tulisan sendiri bukan?

    10. Quote

    Banyak orang, termasuk Anda, menyukai quote. Selain indah, quote mampu
    memotivasi seseorang melakukan action tertentu pada website. Entah itu lanjut
    membaca artikel, membeli produk, dan hal lainnya.

    Lalu, gimana sih cara membuat quote pada website dengan coding HTML?

    Nah, Anda bisa membuat dua jenis quote: blockquote atau short quote.

    Blockquote adalah quote panjang yang terpisah dari teks utama.


    Sedangkan short quote yaitu quote ringkas yang bisa menjadi satu bagian atau
    terpisah dari teks utama.

    Blockquote

    Short Quote

    Di bawah ini contoh HTML yang bisa Anda gunakan.


    <blockquote>text</blockquote>
    <q>text</q>

    11. Font

    Dari contoh-contoh HTML sebelumnya, mungkin Anda bosan karena hasil


    testing syntax selalu tampil dalam Times New Roman.

    Tenang, Anda bisa kok mengubah jenis font. Baik itu pada header, paragraf,
    ataupun jenis teks lainnya. Caranya, masukkan property style ke dalam tag.

    <h2 style=“font-family:Georgia;”>text</h2>
    <p style=“font-family:Comic Sans MS;”>text</p>

    Anda mungkin juga menyukai