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=https://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=https://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=https://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=https://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

Facebook Comments
Gantengmax

Author: Imam Suhadi

Seorang Penulis sekaligus Blogger yang berasal dari Muntilan - Magelang. dengan motto " Sharing For Learning! "

Tolong Berikan Saran Dan Masukannya Ya?

This site uses Akismet to reduce spam. Learn how your comment data is processed.