Tutorial Dasar Html untuk Pemula part 3

Assalamu’alaikum.wr.wb

Tutorial Dasar Html untuk Pemula part 3 – Melanjutkan artikel saya sebelumnya, kali ini saya akan share bagaimana cara membuat postingan gambar di blog dengan html.

Simak artikel saya sebelumnya :

Ini adalah salah satu tutorial dasar blog yang harus kalian ketahui, karena sangat penting nantinya untuk menulis sebuah artikel yang bagus dan seo friendly.

Apa yang akan kita bahas di Tutorial dasar html part 3 ini?

  • Cara menampilkan gambar di postingan blog
  • Cara membuat gambar dengan link
  • Cara membuat gambar dengan link open new tab

Okay, kita bahas satu per satu ya tutorial belajar html untuk pemula ini?

Cara menampilkan gambar di postingan dengan html

Code :
<img src=url gambar></img>

Penjelasan :

  • <img src= : Tag pembuka
  • url gambar : link dari gambar yang akan ditampilkan
  • </img> : tag penutup

contoh :

<img src=http://kangmas21.heck.in/files/mv5bmtk0ndexmja5mv5bml5ba.jpg></img>

Cara membuat gambar dengan link di postingan blog

code : <a href=link><img src=link gambar” /></a>

contoh :

<a href=http://bloggermuntilan.com><img src=http://kangmas21.heck.in/files/mv5bmtk0ndexmja5mv5bml5ba.jpg/></a>

Cara membuat gambar dengan link open new tab

Code : <a href=linktarget=”_blank”><img src=link gambar/></a>

Contoh :

<a href=http://bloggermuntilan.comtarget=”_blank”><img src=http://kangmas21.heck.in/files/mv5bmtk0ndexmja5mv5bml5ba.jpg/></a>

 

Untuk penambahan atribut title dan alt juga bisa ditambahkan untuk optimasi seo on page

code : <a href=link><img src=link gambaralt=”title” /></a>

contoh :

<a href=http://bloggermuntilan.com><img src=http://kangmas21.heck.in/files/mv5bmtk0ndexmja5mv5bml5ba.jpgalt=”Onwap Blog” /></a>

Atau jika digabung agar bisa terbuka di new tab bisa menggunakan contoh dibawah ini

Code : <a href=linktarget=”_blank”><img src=link gambaralt=”title” /></a>

Contoh :<a href=http://bloggermuntilan.comtarget=”_blank”><img src=http://kangmas21.heck.in/files/mv5bmtk0ndexmja5mv5bml5ba.jpgalt=”title” /></a>

Bagaimana? Cukup mudah dipahami bukan? Jika ada yang ingin ditanyakan silahkan tulis di komentar. Jika dirasa artikel ini bermanfaat, silahkan share.

Demikian artikel saya tentang Tutorial Dasar Html untuk Pemula part 3.

Simak artikel saya lainnya :

Semoga bermanfaat.

Wassalamu’alaikum.wr.wb

Tutorial Dasar Html untuk Pemula part 2

Assalamu’alaikum.wr.wb

Belajar Html Untuk Pemula
Belajar Html Untuk Pemula

Tutorial Dasar Html untuk Pemula part 2 – Ini adalah artikel lanjutan dari artikel saya sebelumnya yaitu tentang tutorial dasar html. Silahkan baca disini!

Apa yang akan kita bahas sekarang?

  • Cara membuat link dengan html
  • Cara Membuat Link Dengan Anchor Text
  • Cara membuat link terbuka di jendela baru (open new tab)

Okay, kita bahas satu per satu ya belajar html dasar untuk pemula ini?

Cara membuat link di postingan

<a href=url tujuan>text</a>

Penjelasan :

  • <a href= : tag pembuka
  • url tujuan : alamat situs yang akan dituju
  • text : tulisan link/nama link
  • </a> : tag penutup untuk link
  • Jangan lupa link diapit oleh tanda petik dua ( )

Contoh :

<a href=http://bloggermuntilan.com>Onwap Blog</a>

Bagaimana cara membuat link agar jika di klik membuka tab baru?

kita tinggal menambahkan kode target=”_blank” di depan url

Contoh :

<a href=http://bloggermuntilan.comtarget=”_blank”>Onwap Blog</a>

Bagaimana Cara Menambahkan title pada link?

tambahkan kode title=”nama title”

Contoh :

<a href=http://bloggermuntilan.comtitle=”title url”>Onwap Blog</a>

<a href=http://bloggermuntilan.comtitle=”Onwap Blog” target=”_blank”>Onwap Blog</a>

Penambahan atribut title biasanya digunakan untuk membuat posting dengan link seo friendly dan termasuk dalam teknik seo on page. Untuk menambahkan atribut alt juga hampir sama, tinggal ganti title dengan alt.

Contoh :

<a href=http://bloggermuntilan.comalt=”title url”>Onwap Blog</a>

<a href=http://bloggermuntilan.comalt=”Onwap Blog” target=”_blank”>Onwap Blog</a>

Oh ya, jangan lupa setiap url harus diawali dengan http:// ya?

Artikel ini saya buat sesederhana mungkin agar mudah dipahami, saya bukanlah ahli di bidang ini, saya hanya share apa yang saya tahu dan jika ada salah kata ataupun penulisan saya mohon maaf.

Sekian artikel yang dapat saya tulis tentang Tutorial Dasar Html untuk Pemula part 2.

Sebagai situs rujukan kalian bisa mengunjungi situs w3school.

Baca juga artikel lanjutannya :

Jika bermanfaat silahkan share, jika ada kekurangan silahkan berkomentar, akan saya perbaiki.
Semoga bermanfaat.

Wassalamu’alaikum.wr.wb