Ticker

6/recent/ticker-posts

Header Ads Widget

Tutorial #5| Tag address, blockquote, strong, abbr, dan meta

Tag <address> pada HTML

Address artinya alamat. Tag address digunakan untuk menunjukkan kontak informasi yang berkaitan dengan element induknya (element yang menaunginya). Tag <address> biasanya digunakan di dalam tag <article> dan <body> . Elemen address tidak digunakan untuk memberi markup alamat secara lengkap (berikut kode pos) karena ia lebih cocok menggunakan elemen <p>.

Jika tag <address> ditulis pada tag <body> , maka kontak informasi tersebut berlaku untuk dokumen tersebut secara keseluruhan.

Jika ditulis pada tag <article>, maka <address> dapat berisi konten mengenai kontak informasi penulis/editor artikel tersebut.

Tag <address> merupakan global attributes yang artinya, tag tersebut dapat disisipkan pada semua atribut yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Tag <address> mencakup atribut event, maksudnya atribut tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian).

Teks dalam tag <address> dirender dalam huruf miring. Meskipun tampilan teks sama dengan elemen <i> atau <em>, namun lebih tepat menggunakan tag <address> ketika membuat informasi kontak, karena menyampaikan informasi semantik sesuai tag yang disarankan pada HTML 5. Meski browser merender teks dalam tag <address> sebagai teks yang dicetak miring tetapi kita dapat mengubahnya dengan CSS.

Ketik kode berikut pada HTMLPad.

<! DOCTYPE html>
<html>
<head>
    <title> Tutorial Tag Address </title>

</head>

<body>
    <h2> Latihan tag Adrdess </h2>
        <address> Artikel ini ditulis oleh: <b> Seno Adjie </b> <br> Hubungi Penulis di:
        <a href= "mailto:starsdev10@gmail.com"> starsdev10 @gmail .com </a> <br> Anda juga dapat mengunjungi blog kami:
        <a href= "https://tutorialflashaplikasiandroid.blogspot.com/"> starsdev10 blog </a>
        </address>
</ body>

</html>

Tag <Blockquote> dan tag <q> pada HTML

Tag <blockquote> adalah tag yang digunakan untuk kutipan panjang, sedangkan tag <q> adalah tag yang digunakan untuk kutipan pendek. tag <q> berasal dari kata quote.

Tag <blockquote> secara default akan membuat paragraf baru dengan jarak kanan dan kiri beberapa piksel, sedangkan tag <q> diberikan tanda kutip dua di awal dan di akhir kutipan.

Cara penulisan kutipan panjang dengan tag pembuka <blockquote> dan ditutup dengan tag penutup </blockquote>, sedangkan untuk kutipan pendek dibuka dengan tag <q> dan ditutup dengan tag </q>.

Pada dalam HTML 5 dapat menyertakan url sumber yang dikutip dengan menggunakan atribut cite, sedangkan untuk nama sumbernya bisa menggunakan tag <cite> … </cite>

Contoh Blockquote

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html>
<html>
<head>
   <title>Tutorial Blockquote HTML</title>
</head>

<body>
   <h3>Latihan menggunakan 'blockquote' di HTML</h3>
      <p>Sekitar 10 ribu orang yang tinggal di kawasan itu diperintahkan untuk tetap tinggal di rumah.</p>

      <blockquote>Ini hasil kutipan dari https://news.detik.com/internasional/d-5345510/hong-kong-terapkan-lockdown-corona-10-ribu-warga-tak-boleh-keluar-rumah?tag_from=news_mostpop</blockquote>

</body>

</html>

Contoh quote

Ketik kode berikut pada HTMLPad.

 

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial quote di HTML</title>

</head>
<body>
    <h3>Latihan menggunakan 'quote' di HTML</h3>
      <p>Sekitar 10 ribu orang yang tinggal di kawasan itu diperintahkan untuk tetap tinggal di rumah.
      <q>news.detik.com</q>
</body>

</html>

Tag strong pada HTML

Tampilan tag <strong> sama seperti tampilan tag <b>, namun tag strong lebih di sarankan untuk menebalkan penulisan kalimat.

Tag <Strong> termasuk salah satu tag semantics ( semantik ) HTML 5. secara bahasa semantik adalah pembelajaran tentang makna.

Mesin pencari dapat menggunakan tag semantik untuk menganalisa halaman, teks dalam tag <strong> dianggap penting sedangkan teks dalam tag <b> tidak.

Penulisan tag <strong> dan ditutup dengan tag </strong> seperti dibawah ini.

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html>
<html>
<head>
   <title> Turorial #5 tag strong </title>
</head>

<body>
      <p>Tutorial #5 : <strong>teks disini menadi tebal (bold)</strong></p>
</body>

</html>

Tag abbr pada HTML

Tag <abbr> adalah tag yang digunakan untuk membuat singkatan pada teks panjang. tag <abbr> berasal dari kata abbreviation (singkatan).

Tag <abbr> digunakan bersama dengan atribut title untuk mengaitkan penjelasan teks lengkap, pengunjung situs web tidak melihat teks dalam atribut title, tetapi browser dan mesin pencari menggunakan informasi ini.

Teks yang disingkat, jika kursor mouse diarahkan pada teks yang disingkat, maka akan ditampilkan kepanjangan dari singkatan tersebut seperti tooltip.

 

Cara penulisan sintaknya dibuka dengan tag <abbr> dan ditutup dengan tag </abbr>, diikuti oleh atribut title untuk penjelasan dari singkatan.

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html>
<html>

<head>
     <title> Tutorial tag abbr </title>
</head>

<body>
    <abbr title="HyperText Markup Language">HTML</abbr>
    <br>
    <abbr title="Cascading Style Sheets">CSS</abbr>
    <br>
    Posisikan kursor mouse ke teks singkatan HTML dan CSS, untuk melihat penjelasannya
</body>

</html>

Tag <meta> pada HTML

Pentingnya terus melakukan optimalisasi Search Engine Optimization (SEO) agar dapat berada di halaman pertama mesin pencari Google. Salah satu strategi SEO yang perlu kamu perhatikan yaitu optimalisasi meta tag, dengan harapan dapat muncul di halaman pertamamesin pencari Google.

Mesin pencari seperti Google menampilkan deskripsi meta dalam mengindeks halaman web. Meta description adalah nilai atribut name pada HTML yang memberikan deskripsi singkat dari halaman web.

Fungsi dari meta deskripsi untuk menampilkan diskripsi singkat kepada pencari dan memberitahu apa yang ada pada halaman web terkait.

Teks tebal dapat menarik perhatian pencari, jadi anda harus mencocokkan deskripsi dengan istilah pencari sedekat mungkin.

 

Meta deskripsi berisi maksimal 160 karakter yang digunakan untuk meringkas konten halaman web. Meskipun meta deskripsi tidak terkait dengan peringkat mesin pencari, sangat penting dalam mendapatkan klik-tayang pengguna dari SERP (Search Engine Result Page).

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Meta Tag HTML</title>
    <meta charset="utf-8" />
    <meta http-equiv="refresh" content="5" />
    <meta name="keywords" content="Latihan meta tag html,
    meta tag, cara belajar html dasar" />
    <meta name="description" content="Google selalu ingat ini" />
</head>

<body>
   <p>
     Halaman ini secara otomatis di refresh setiap <em>5 detik</em>
   </p>
</body>

</html>

Published: Seno Adjie.

 

Posting Komentar

0 Komentar