Skip to main content

Tag Tambahan

Tadi kita sudah mengenal beberapa tag. Sekarang akan kutambah dua tag lagi. Tag ini terkhusus untuk di bagian body. Kalau tadi kita sudah punya tag untuk heading (h1, h2). Kita akan mempelajari tag paragraf p dan link atau anchor a.

Tag Paragraf​

Maksudnya paragraf disini ya seperti text biasa. Kayak di Microsoft Word juga. Ada paragraf. Nih kukasi contoh paragraf pakai tag p. Kalian bisa isi bebas dengan apa yang kalian mau, kalau bisa nyeritain diri kalian.

<p>
	Aku seorang programmer yang suka nyari pemahaman dari dasarnya. Dari web, game, sampai AI, aku lebih nyaman mikir pakai logika dan konsep daripada sekadar hafalan. Di laptopku, ide tentang kota, jalanan, sama algoritma sering ketemu dan jadi sesuatu yang bikin aku penasaran terus.
</p>

Yap sesederhana itu dan di website akan tampil paragraf text normal:

Aku seorang programmer yang suka nyari pemahaman dari dasarnya. Dari web, game, sampai AI, aku lebih nyaman mikir pakai logika dan konsep daripada sekadar hafalan. Di laptopku, ide tentang kota, jalanan, sama algoritma sering ketemu dan jadi sesuatu yang bikin aku penasaran terus.


Kalian juga bisa menambah paragraf baru di bawahnya jadi.

<p>
	Aku seorang programmer yang suka nyari pemahaman dari dasarnya. Dari web, game, sampai AI, aku lebih nyaman mikir pakai logika dan konsep daripada sekadar hafalan. Di laptopku, ide tentang kota, jalanan, sama algoritma sering ketemu dan jadi sesuatu yang bikin aku penasaran terus.
</p>

<p>
	Dari bikin game yang ngingetin masa kecil sampai ngerancang SaaS yang nyambung ke kehidupan sehari-hari, aku lagi nyusun mimpi-mimpi itu pelan-pelan.
</p>

Hasilnya:

Aku seorang programmer yang suka nyari pemahaman dari dasarnya. Dari web, game, sampai AI, aku lebih nyaman mikir pakai logika dan konsep daripada sekadar hafalan. Di laptopku, ide tentang kota, jalanan, sama algoritma sering ketemu dan jadi sesuatu yang bikin aku penasaran terus.

Dari bikin game yang ngingetin masa kecil sampai ngerancang SaaS yang nyambung ke kehidupan sehari-hari, aku lagi nyusun mimpi-mimpi itu pelan-pelan.


Sekarang kita taruh dua paragraf tadi ke file html kita yang sebelumnya, sehingga menjadi:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Website Pertamaku</title>
</head>
<body>
	<h1>Halo Websiteku</h1>
	<h2>Ini subjudul</h2>

	<p>
		Aku seorang programmer yang suka nyari pemahaman dari dasarnya. Dari web, game, sampai AI, aku lebih nyaman mikir pakai logika dan konsep daripada sekadar hafalan. Di laptopku, ide tentang kota, jalanan, sama algoritma sering ketemu dan jadi sesuatu yang bikin aku penasaran terus.
	</p>

	<p>
		Dari bikin game yang ngingetin masa kecil sampai ngerancang SaaS yang nyambung ke kehidupan sehari-hari, aku lagi nyusun mimpi-mimpi itu pelan-pelan.
	</p>
</body>
</html>

Hasil:

Halo Websiteku

Ini subjudul

Aku seorang programmer yang suka nyari pemahaman dari dasarnya. Dari web, game, sampai AI, aku lebih nyaman mikir pakai logika dan konsep daripada sekadar hafalan. Di laptopku, ide tentang kota, jalanan, sama algoritma sering ketemu dan jadi sesuatu yang bikin aku penasaran terus.

Dari bikin game yang ngingetin masa kecil sampai ngerancang SaaS yang nyambung ke kehidupan sehari-hari, aku lagi nyusun mimpi-mimpi itu pelan-pelan.


Tag Link / Anchor​

Kalian pasti pernah lah ngeklik link di website. Dan mungkin penasaran gimana kalian bisa nambah link yang bisa diklik. Nah di html ada tag anchor <a></a> tag ini butuh atribut wajib supaya linknya bisa di klik yaitu href.

Jadi gini kalau kalian bikin link di html:

<a href="https://website.com">Klik Disini</a>

Jadi user bakal ngelihat Klik Disini dan mereka bisa klik dan akan menuju ke https://website.com.
Hasilnya:


Kalian tinggal ubah https://website.com dengan website atau url yang ingin kalian tuju. Dan Klik Disini untuk teks link nya. Jadi linknya tuh mau ditampilin kek gimana ke user.

Contoh aku mau nambahin dua link yang mengarah ke akun instagramku sama akun tiktokku.

<a href="https://instagram.com/daffarahmn_">Follow: @daffaramn_</a>
<a href="https://www.tiktok.com/@callsigndap">Follow: @callsigndap</a>

Hasilnya:


Bonus: Tag <br/>​

Kalian lihat di atas bahwa kedua linknya berada dalam satu baris. Padahal aku maunya link keduanya tuh ada di bawah link pertama. Nah aku bisa menambahkan tag <br/> setelah link pertama. Seperti ini:

<a href="https://instagram.com/daffarahmn_">Follow: @daffaramn_</a>
<br/>
<a href="https://www.tiktok.com/@callsigndap">Follow: @callsigndap</a>

Sekarang link nya akan berada di baris berbeda:


Sekarang ku harap kalian sudah melihat sebuah pola ya dari tag-tag yang sudah kita pelajari. Sekarang websitenya sudah menjadi seperti ini:

Halo Websiteku

Ini subjudul

Aku seorang programmer yang suka nyari pemahaman dari dasarnya. Dari web, game, sampai AI, aku lebih nyaman mikir pakai logika dan konsep daripada sekadar hafalan. Di laptopku, ide tentang kota, jalanan, sama algoritma sering ketemu dan jadi sesuatu yang bikin aku penasaran terus.

Dari bikin game yang ngingetin masa kecil sampai ngerancang SaaS yang nyambung ke kehidupan sehari-hari, aku lagi nyusun mimpi-mimpi itu pelan-pelan.

Follow: @daffaramn_
Follow: @callsigndap