- Chapter 1: Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML.
- Chapter 2: Cara Membuat Headings (h1,h2,h3) dan Horizontal Ruled Lines Pada HTML.
- Chapter 3: Cara Membuat paragraph, Align Attribute, Line Break, dan Preformatted Text Pada HTML.
- Chapter 4: Cara Membuat Center Tag dan Body Attributes Pada HTML
- Chapter 5: Penulisan Font dan Text color di HTML
 |
| Cara Membuat Tag Links dan Images Pada HTML |
Pembuatan Links...
Tanpa Links, World Wide Web (www) tidak akan berfungsi dengan baik. Untuk menambahkan link, Anda harus menggunakan tag pembuka <a href="location"> dan tag penutupnya adalah </a>. <a> sendiri merupakan singkatan dari anchor dan href merupakan singkatan dari hypertext reference. Apapun tulisan yang berada di antara dua tag ini biasanya secara otomatis akan digarisbawahi dan berwarna, dan jika Anda klik pada teks yang digarisbawahi, Anda akan dikirim oleh browser ke lokasi yang ada dalam tanda kutip tersebut.
Contoh Pembuatan Link standard...
Kunjungi sanabila's Home!
Kunjungi <a href="http://www.sanabila.com/">Sanabila's Home</a>!
Meskipun Links biasanya digunakan untuk mengirim user ke halaman web lain, Anda juga dapat menggunakannya untuk mengirim email ke alamat tertentu dengan menggunakan alamat mailto:user@host.
Contoh pembuatan link dalam e-mail..
Kirim email ke blablabla!
Kirim email ke <a href="mailto:blablabla@gmail.com">blablabla</a>!
Cara membuat Tag Images di HTML...
Anda juga dapat menambahkan gambar ke halaman web Anda, selama foto tersebut berformat .gif atau .jpg (atau .jpeg). Anda tidak akan dapat menggunakan file berformat bmp! Tag dasar gambar dalam HTML adalah <img src="location">. Anda juga bisa untuk menambahkan atribut HEIGHT (tinggi) dan WIDTH (lebar) kedalam tag IMG. Atribut tersebut berfungsi untuk pengaturan size gambar yang nantinya akan disesuaikan dengan website Anda. Selanjutnya Anda juga bisa menambahkan atribut ALT="Deskripsi singkat gambar" untuk memberitahu pengunjung, apakah gambar tersebut masih loading atau tidak terlihat. Perlu diingat bahwa Tag IMG tidak memiliki tag penutup!
Contoh Dasar membuat tag Images di HTML...
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHDpIbi9Ad53S_gqjxt0P6_sV06BpaN2Kh79jgmajN4GwUqJqv1l1FwW_YkSbzlaAf9ZlUkMYe7WoQ7Ib0OUKS_6fbIEEWesRUu94G19T30Awi1gCYxJyt1InFkCVw3xP9-D-IfEIAODtx/s1600/social_network_twitter.png"ALT=Follow Twitter">
Note : Ganti tulisan yang berwarna hitam dengan url images Anda.
Mengkombinasikan Tag links dan Images...
Mungkin Anda sering menemukan gambar yang ketika diklik akan dialihkan ke halaman lain. Dengan menggunakan cara dibawah ini, Anda pasti juga bisa untuk melakukan hal yang serupa:) Ini cukup sederhana- Anda hanya perlu menempatkan tag IMG diantara tag A HREF.
(<a href="location_of_link"><img src="location_of_image"></a>)Sebelumnya kita juga sudah membahas tentang cara membuat Align pada tulisan. Namun kali ini, Anda juga dapat menggunakan tag ALIGN dalam gambar!
Bila Anda mengkombinasikan tag link dan gambar, maka gambar tersebut akan memiliki border di sekitarnya secara default. Anda dapat mengontrol lebar border gambar tersebut atau menghilangkannya dengan menggunakan border=n diantara tag img. n adalah lebar border (n = 0 jika tidak ingin ada border).
Contoh kombinasi link dan images serta align...
<a href="http://www.sanabila.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHDpIbi9Ad53S_gqjxt0P6_sV06BpaN2Kh79jgmajN4GwUqJqv1l1FwW_YkSbzlaAf9ZlUkMYe7WoQ7Ib0OUKS_6fbIEEWesRUu94G19T30Awi1gCYxJyt1InFkCVw3xP9-D-IfEIAODtx/s1600/social_network_twitter.png" align="right" border="0"></a>Note :
- Tulisan warna hitam adalah link tujuan Anda
- Tulisan warna hijau adalah alamat gambar Anda
- Tulisan warna biru adalah posisi gambar di sebelah kanan, Anda bisa menggantinya dengan left atau center.