Membuat Link / Alamat dan Menampilkan Gambar pada HTML

Setelah belajar dasar dasar HTML, kita akan melanjutkan pembelajaran tentang "Membuat Link / Alamat dan Menampilkan Gambar pada HTML". Jika belum mengerti cara coding script HTML sebaiknya kamu baca artikel tentang "Belajar Membuat Web Berbasis HTML PEMULA"
 
myfcode - Membuat Link Alamat dan Menampilkan Gambar pada HTML

Selalu aku tekankan, dalam pembelajaran ini aku sarankan kepada kalian untuk menggunakan aplikasi coding yang bernama Notepad++, kamu bisa mendownloadnya dengan car mengeklik tulisan Notepad++.

Sebelum menuju ke tutorial aku akan menjelaskan terlebih dahulu mengenai fungsi tag html yang akan kita gunakan untuk pembelajaran pada artikel ini.

img : Tag yang berfungsi untuk memanggil atau menampikan image dalam HTML
src : Tag yang berfungsi mengalamatkan / alamat untuk mengambil link/file/gambar.
alt : Tag yang berfungsi untuk memberikan keterangan pada element HTML
href : Tag yang berfungsi untuk menunjukan alamat/url
weight: Tag untuk ukuran gambar

Sebisa mungkin hafalkanlah kode tag HTML yang sudah saya sebutkan diatas, karena dapat membantu dalam pembelajaran selanjutnya, dimana masing masing kode memiliki fungsi yang sangat penting baik dalam kegunaan maupun untuk optimasi sebuah website.

Baca juga: Cara Membuat Teks Komentar Pada HTML


Untuk membuat link kamu harus menentukan link atau alamat yang akan dituju telebih dahulu, disini aku akan menggunakan alamat blog ini sebagai contoh.

<a href="http://alamat/"> Judul </a>
<br/>
<br/>
Ex :
<br/>
<br/>
<a href="http://nafku.blogspot.com"> NafasKuda </a>

Maka akan jadi seperti gambar dibawah ini.

myfcode - Membuat Link Alamat dan Menampilkan Gambar pada HTML

Untuk membuat atau menampilkan gambar kamu memerlukan tag yang digunakan untuk memanggil gambar yaitu <img>, penulisan script sebagai berikut.

<img src="http://alamat/namafile.jpg" alt="judul"/>
Ex :
<img src="https://lh3.googleusercontent.com/-fAXmNbWsUuk/AAAAAAAAAAI/AAAAAAAAAAw/bXoLqGrdal8/s120-p-no/photo.jpg" alt="AMG Channel"/>

Hasil jadinya akan seperti gambar dibawah ini.

myfcode - Membuat Link Alamat dan Menampilkan Gambar pada HTML

Pada hasil diatas menampilkan bahwa gambar yang paling atas tidak muncul dikarenakan tujuan atau file gambar tidak ada, pada bagian bawah gambar akan tampil dikarenakan tujuan gambar atau file gambar. Untuk penyesuaian ukuran pada gambar caranya mudah, kamu hanya perlu menambahkan width dan height. Contoh penulisanya adalah seperti dibawah

<img scr="nafaskuda.png" alt="NafasKuda" height="150" width="150" />

Cara ini sering digunakan bagi para blogger atau pengembang sebuah website dimana mereka ingin menampilkan sebuah link dan gambar kepada suatu komponen HTML untuk membantu mempercantik tampilan dan meningkatkan fungsi dimana link atau alamat bisa digunakan untuk mereferensikan halaman lain dan gambar berfungsi untuk memperkuat penyataan sebuah konten.

Di blogger sendiri sudah terdapat fitur otomatis dimana kita hanya perlu memasukan sebuah gambar tanpa perlu memasukan sebuah kode HTML, namun berbeda jika kamu ingin membuat sebuah website berbasis html, dimana kamu harus menginput atau memasukan secara manual agar dapat menampilkan alaman dan gambar.

Baca juga: Cara Memberi Warna Pada Background dan Tulisan HTML

Penggunakan kode tag Alt juga membantu memberikan deskripsi pendek atau keterangan pada suatu gambar, juga dapat membantu search engine dalam mengindentifikasi tentang apa gambar tersebut, banyak pakar SEO yang menggunakan tag Alt dalam memunculkan gambar mereka pada keyword tertentu di Google Search Image. Tentu jika gambar kamu ingin masuk kedalam Google Search Image kamu bisa memanfaatkan kode tag.

Kesimpulan
1. Untuk membuat link dalam HTML diperlukan sebuah alamat tujuan
2. Untuk menampilkan gambar anda harus mempunyai file gambar terlebih dahulu
3. Penggunaan tag alt tidak dipakai tidak masalah, tag alt hanyalah sebagai penambah saja

Iklan Atas Artikel

Iklan Tengah Artikel 1

Tukar Pulsa Jadi Uang

Iklan Tengah Artikel 2

Iklan Bawah Artikel