Anchor Tag dalam HTML untuk membuat Link - Selamat pagi menjelang siang, dalam rangka mendokumentasikan hasil belajar, seperti biasa penulis akan melanjutkan pembahasan yang sebelumnya yakni masih seputar pondasi HTML untuk front end web development, namun kali ini kita akan belajar tentang Anchor tag. Dimana untuk mudahnya anchor tag <a> digunakan untuk membuat link dalam HTML yang dimana ketika di klik akan berpindah pada link yang dituju.
Untuk artikel yang sebelumnya yakni tentang beberapa semantic tag dalam HTML seperti tag section, tag article, tag header dan tag footer, untuk membacanya teman-teman dapat mengunjungi artikel berikut ini Semantic tag section, article, header dan footer dalam HTML dan untuk artikel sebelumnya juga penulis telah membagikan pembahasan osp kebumian yang bisa dilihat dalam artikel berikut ini Pembahasan OSP SMA Kebumian tahun 2018 secara rinci
Achor tag <a> ini ditutup dengan </a> dan biasanya untuk link yang dituju akan dituliskan dalam href="link yang dituju" serta diletakan pada kata yang diapit oleh anchor tag pembuka dan penutupnya, jadi untuk lengkapnya seperti ini kira-kira.
<a href="www.semangat27.com">Semangat27</a>
hasil
Semangat27
Selain di isi dengan link, link yang dituju bisa juga diisi dengan addres html yang lainnya yang ingin dituju. Sebagai contoh silakan teman-teman membuat 2 file HTML pada sublime text 3 yang sebelumnya sudah di install dalam komputer, jika bingung caranya silakan cari artikelnya diblog ini dengan melihat pada label HTML atau Front End blog ini. Lihat dibawah ini untuk filenya.
File pertama beri nama index.html
<!DOCTYPE html>
<html>
<head>
<title>This is an index file</title>
</head>
<body>
<h1>Semangat27.com Company</h1>
<section>
<h2>About</h2>
</section>
<section>
<h2>Contact</h2>
</section>
<section>
<h2>Our Article</h2>
<article>
<header>
<h3>article title</h3>
</header>
<p>
contents of the article
</p>
<footer>
footnotes usually contain labels
</footer>
</article>
</section>
<section>
<h2>Portofolio</h2>
</section>
<footer>
<a href="term and condition.html">term and condition</a>
</footer>
</body>
</html>
dan file kedua dengan nama term and condition.html
<!DOCTYPE html>
<html>
<head>
<title>term and condition</title>
</head>
<body>
<h1>term and condition</h1>
<p>content for term and condition</p>
<footer>Copyright things</footer>
</body>
</html>
Perhatikan anchor tag <a href="term and condition.html">term and condition</a> yang ketika diklik pada hasil index.html akan menuju term and condition.html. Untuk hasil dari index.html akan seperti dibawah ini.
Perhatikan gambar diatas, hasil dari anchor tag akan berupa link berwarna biru dengan garis bawah yang bisa diklik dan ketika diklik akan menuju hasil dari term and condition.html yang hasilnya seperti gambar dibawah ini.
Jika bingung silakan lihat video berikut ini yak, tapi dalam bahasa inggris hehe tapi penulis yakin kalian pandai jadi pasti paham wkwk.
Ya demikian lah dokumentasi untuk hari ini yang dimana juga merupakan pertanda bahwa berakhir juga artikel kali ini, semoga bermanfaat dan apabila ada pertanyaan tulis di kolom komentar dibawah yak, sekian dari penulis, penulis mau kulak belanjaan buat toko dulu hehe, maklum liburan dirumah jadi harus bantu emak. byebye
0 Komentar