Kamis, 19 Maret 2015

TAG IMAGE DAN LINK PADA HTML



IMAGE PADA HTML
Seperti dijelaskan sebelum, dokumen HTML selain bisa menampilkan teks bisa juga untuk menampilkan gambar/foto/images. Untuk menampilkan image digunakan tag <img>
<html>

<head>


<title>Contoh Image</title>

</head>


<body>

<img src="fotoku.jpg" />


</body>

 </html>

 Menambahkan Attribute Alt Tag dan Title Tag Pada HomePage

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode expr:src='data:post.thumbnailUrl' dan expr:src='data:post.thumbnail'
4. Lalu tambahkan kode expr:alt='data:post.title' dan expr:title='data:post.title'

Contoh :

<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
 
Biasanya kode expr:src='data:post.thumbnailUrl' dan expr:src='data:post.thumbnail' lebih dari 1, silahkan Anda tambahkan kode expr:alt='data:post.title' dan expr:title='data:post.title' pada setiap kode yang ada.

Menambahkan Attribute Alt Tag dan Title Tag Pada Gambar Postingan

1. Silahkan buat artikel
2. Upload atau masukkan gambar pada artikel tersebut
3. Klik gambar tersebut, lalu akan muncul properties klik saja.


 

 

 









Atau dengan cara seperti ini :
<img alt='Judul Gambar' src='URL_Gambar' title='Judul Gambar'/>
 

Menambahkan Attribute Alt Tag dan Title Tag Pada Gambar Otomatis

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode </body>
4. Copy kode script dibawah ini, lalu Paste diatas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>//<![CDATA[ $(document).ready(function() {$('img').each(function()
{var $img = $(this);var filename = $img.attr('src')$("img:not([alt])").attr('title', filename.substring
((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));$("img:not([alt])").attr('alt', 
filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));//]]></script>
 
5. Lalu klik Simpan Template


LINK PADA HTML
Hyperlink atau link (tautan) adalah sebuah teks atau gambar yang jika di klik akan membuka browser membuka halaman HTML lain. Jika sebuah link ditunjuk dengan mouse, biasanya kursor akan berubah menjadi bentuk menyerupai tangan kecil. Untuk membuat link digunakan tag <a>. Sebagai contoh link silahkan coba kode HTML berikut ini :
<html>

<head>


<title>Contoh Link</title>

</head>


<body>

<a href="http://rachanayulian.blogspot.com">Ini contoh link</a>


</body>

</html>

Membuat Attribute Title Tag Pada Link di HomePage

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML5
3. Cari kode seperti ini expr:href='data:post.url' dan expr:href='data:post.link'  dan expr:href='data:post.href'
4. Lalu tambahkan kode expr:title='data:post.title'
Contoh :

<a expr:href='data:post.url' expr:title='data:post.title'> atau <a expr:href='data:post.href' expr:title='data:post.title'>

Catatan :
Biasanya kode expr:href='data:post.url' dan expr:href='data:post.href' lebih dari 1, silahkan Anda tambahkan kode expr:title='data:post.title' pada setiap kode yang ada.

Atau dengan cara seperti ini :

<a href='URL_TUJUAN' title='Judul Link'>Judul Link</a>

Membuat Attribute Title Tag Pada Link di Postingan
1. Silahkan tulis artikel Anda
2. Masukkan link pada salah satu kata, lalu klik HTML
 












3. Setelah berada pada HTML kita cari link tersebut, setelah ketemu tambahkan tag title, lihat gambar dibawah ini :


 4. Silahkan tambahkan tag title setiap Anda memberikan link kepada salah satu kata

Referensi : http://www.w3schools.com/html/html_images.asp
                http://www.w3schools.com/html/html_links.asp
                http://www.ficripebriyana.com/2014/03/cara-membuat-attribute-alt-tag-title-tag.html
                http://www.ficripebriyana.com/2014/03/cara-membuat-attribute-title-tag-pada-link.html

Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)