Hyperlink atau biasa yang kita sebut link digunakan untuk menghubungkan antara 1 dokumen dengan dokumen lain atau bisa juga dari suatu situs ke situs lain. Nah, pada HTML ada tag khusus untuk membuat link yaitu tag <a> atau anchor. Tujuan dari pembuatan hyperlink pada html, agar saat kita klik suatu teks atau gambar, maka akan dialihkan ke halaman atau situs yang telah diatur pada saat penulisan hyperlink tersebut.
Tag <a> ini harus wajib diikuti oleh atribut href (hypertext reference) jika ingin berfungsi sempurna. Atribut href ini berisi alamat yang akan dituju pada saat teks atau gambar diklik.
Sintaks : <a href=”Alamat yang dituju”> Klik Disini ! </a>
Contoh :
<html>
<head>
<title> Hyperlink </title>
</head>
<body>
Belajar HTML <a href=”http://how-box.blogspot.co.id”> Klik Disini </a>
</body>
</html>
Hasil :
Saat kita klik teks "Klik Disini" maka akan menuju alamat yang sudah diatur pada saat penulisan yakni how-box.blogspot.com
Oh iya ada 2 jenis hyperlink pada HTML :
- Alamat Absolute, yakni penulisan alamat file disertakan dengan alamat website nya.
Contoh : <a href=”how-box.blogspot.com/tutorials/html/” > Klik Disini </a>
- Alamat Relatif, yakni penulisan alamat file yang berada pada satu folder. Contoh : akan memanggil file latihan.html pada folder yang sama <a href=”latihan.html”> Klik Disini </a>
Oh ya saya akan memberi tahu atribut target = ”_blank” pada tag <a>, langsung saja :
Atribut target=”_blank”
Atribut ini digunakan jika kita ingin membuka tab baru saat hyperlink di klik.
Sintaks : <a href=”http://www.hot-box.blogspot.co.id” target=”_blank”> Klik Disini ! </a>
Contoh :
<html>
<head>
<title> Hyperlink </title>
</head>
<body>
Link menggunakan atribut target =”_blank” <a href=”http://how-box.blogspot.co.id” target=”_blank”> Klik Disini </a>
</body>
</html>
Hasil :
Nampak nya terliha sama saja ya ? eittss, tapi jika diklik maka alamat yang dituju akan dibuka di tab baru.
Yups sekian dulu, jika masih ada yang kebingungan silahkan tinggalkan komentar di kolom komentar.
Tag Superscript ( <sup> ) dan Subscript ( <sub> ) biasa nya digunakan untuk menuliskan rumus matematika dan rumus kimia. Langsung saja ke penjelasannya :
Superscript
Tag ini digunakan untuk menandai bagian karakter untuk dicetak tinggi, seperti menuliskan pangkat.
Sintaks : angka/huruf <sup> angka atau huruf </sup>
Contoh :
<html>
<head>
<title> Superscript </title>
</head>
<body>
Penjumlahan dari 2<sup>2</sup> + 2<sup>2</sup> = 8
</body>
</html>
Hasil :
Angka atau huruf yang diapit tag <sup> </sup> akan dicetak tinggi.
Subscript
Tag ini digunakan untuk menandai bagian karakter untuk dicetak rendah, seperti menuliskan senyawa kimia.
Sintaks : angka/huruf <sub> angka atau huruf </sub>
<html>
<head>
<title> Superscript </title>
</head>
<body>
Hasil dari 2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O
</body>
</html>
Hasil :
Angka / huruf yang diapit oleh tag <sub> </sub> akan dicetak rendah.
Yups sekian dulu, bila ada yang kebingungan silahkan tinggalkan komentar dikolom komentar.
Gambar digunakan untuk memperjelas suatu informasi atau membuat suatu artikel menjadi lebih menarik. Nah, untuk menjadikan suatu halaman website menjadi menarik, kita perlu menambahkan suatu gambar yang cocok dengan artikel.
Pada HTML format gambar yang didukung yaitu .PNG, .JPG/.JPEG, .GIF terdapat tag yang dikhususkan untuk menampilkan gambar yaitu tag <img> di ikuti dengan atribut src dan alt.
Atribut src
Atribut src ini singkatan dari source, dan atribut ini digunakan untuk menunjukan URL / Letak gambar yang akan ditampilkan. Atribut ini wajib ada setiap menggunakan tag <img>.
Ada beberapa cara menampilkan gambar menggunakan atribut src.
1. Hanya memanggil nama gambar berserta formatnya, dengan syarat file html dan gambar harus berada pada 1 folder.
Misalkan seperti gambar diatas, didalam satu folder terdapat 1 file html (yang akan dimasukkan gambar) dan 1 gambar. Jadi jika ingin menampilkan gambar dengan atribut src, hanya menggunakan nama dan format gambar.
Sintaks : <img src=”html.png” />
2. Menulis nama folder berserta nama gambar, jika gambar / file berada pada folder yang berbeda.
Misalkan seperti gambar diatas didalam folder web terdapat 1 file html (yang akan dimasukkan gambar) dan 1 folder Gambar. Didalam folder gambar terdapat 1 buah gambar dengan format PNG. Jadi, jika ingin menampilkan Gambar di folder berbeda, sebutkan nama folder lalu nama gambar berserta formatnya.
Sintaks : <img src=“/gambar/html.png” />
3. Menuliskan URL dari gambar tersebut, jika gambar tersebut berada pada situs / web lain.
Sintaks : <img src=”http://how-box.blogspot.com/gambar/html.jpg” />
Atribut alt
Atribut ini yaitu alternative teks jika gambar tidak tampil, jadi di usahakan isi dari atribut alt ini adalah definisi dari gambar yang akan ditampilkan.
Sintaks : <img src=”html.png” alt= “html 5 ” />
Contoh lengkap penggunakan tag <img> :
<html>
<head>
<title> Menyisipkan Gambar </title>
</head>
<body>
<img src=”html.png” alt=”html-5”/>
</body>
</html>
Hasil nya :
Yup, cukup mudah bukan? Ya sangat mudah. Oke sekian dulu, jika masih kebingungan silahkan tinggalkan komentar di kolom komentar, Semoga Membantu ^^.
