Masih lanjut nih guys, setelah mengetahui tag dasar dari HTML berikutnya kita akan mempelajari macam-macam tag dalam html khususnya yang berada dalam tag <body> karena di dalam tag inilah isi dari konten web kita
oke sekarang kita mulai uji cobanya supanya lebih paham. buka file yang telah kita buat sebelumnya (file saya namanya index.html) di notepad++. Tambahkan tag-tag di atas ke dalam file kita. Masukkan di dalam tag body. <body> di dalam sini </body>
Jadi seperti di atas, tapi ini masih belum semuanya. Karena di tutorial kita kali ini kita akan membuat dua halaman dan dihubungkan dengan link menggunakan tag <a href=""> Di contoh atas saya menghubungkannya ke halaman lain.html. Jadi kita akan bikin hamalan lagi dengan nama lain.html oh iya satu lagi, jika kalian perhatikan pada tag <img> saya memanggil file c.jpg. Tentunya file ini tidak bisa kalian panggil atau tampilkan di komputer kalian. karena adanya di komputer saya. Karena itu silahkan kalian copas file gambar kalian dan taruh di dalam folder coba di dalam localhost (folder sesuai yg kalian namai). Jika sudah ganti nama file di dalam src="" dengan nama file kalian dan jangan lupa ekstensinya seperti .jpg atau .png
Nah di atas adalah koding untuk halaman lain.html. Sekarang kita run di browser.
di atas adalah tampilan untuk hamalan index.html
Dan di atas ini adalah adalah tampilan hamalan lain.html. seperti ini kira-kira. Bisa kalian liat di bawah ada tulisan berwarna dengan underline itu adalah linknya. Bisa kalian coba sendiri, silahkan kreasikan sesuai imajinasi kalian. Untuk pemahaman lebih detail bisa cek w3school
- <p> - digunakan untuk membuat paragraf tetapi tidak mendeteksi spasi enter
- <h1> hingga <h6> - digunakan untuk membuat heading layaknya heading di word. Tag ini memiliki 6 varian mulai dari yang terkecil adalah h6 dan terbesar adalah h1
- <img src="" /> - tag tunggal digunakan untuk menampilkan gambar src berisi link atau lokasi gambar yang ingin ditampilkan
- <a href=""> - digunakan untuk memberi link pada tulisan. href berisi link atau lokasi halaman yang dituju
- <br /> - tag tunggal yang berfungsi seperti tombol enter di keyboard
- <pre> - digunakan untuk membuat paragraf sesuai ketikkan dimana spasi enter akan dideteksi berbeda dengan tag <p> font defaultnya adalah courier
- <abbr> - memberi garis .... dibawah tulisan
- <address> - berfungsi sama seperti <pre>
- <cite> - membuat tulisan menjadi miring atau format italic
- <bdo dir="rtl"> - digunakan untuk membalik tulisan sehingga tulisan dibaca secara terbalik
- <q> - memberi tanda petik "" pada tulisan
- <blockquote> - membuat tulisan menjadi menjorok kedalam
oke sekarang kita mulai uji cobanya supanya lebih paham. buka file yang telah kita buat sebelumnya (file saya namanya index.html) di notepad++. Tambahkan tag-tag di atas ke dalam file kita. Masukkan di dalam tag body. <body> di dalam sini </body>
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>ini <abbr>contohnya</abbr>
untuk paragraf
spasi enter tidak terdeteksi</p>
<br />
<pre>ini <cite>contoh</cite>
untuk paragrafnya
mendeteksi paragraf</pre>
<address>contoh
<bdo dir="rtl">paragraf terbalik</bdo>
sama <q>seperti</q> <pre></address>
<blockquote>tulisan ini
nantinya menjorok
kedalam</blockquote>
<img src="c.jpg" />
<a href="lain.html">ini linknya</a>
</body>
</html>Jadi seperti di atas, tapi ini masih belum semuanya. Karena di tutorial kita kali ini kita akan membuat dua halaman dan dihubungkan dengan link menggunakan tag <a href=""> Di contoh atas saya menghubungkannya ke halaman lain.html. Jadi kita akan bikin hamalan lagi dengan nama lain.html oh iya satu lagi, jika kalian perhatikan pada tag <img> saya memanggil file c.jpg. Tentunya file ini tidak bisa kalian panggil atau tampilkan di komputer kalian. karena adanya di komputer saya. Karena itu silahkan kalian copas file gambar kalian dan taruh di dalam folder coba di dalam localhost (folder sesuai yg kalian namai). Jika sudah ganti nama file di dalam src="" dengan nama file kalian dan jangan lupa ekstensinya seperti .jpg atau .png
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<a href="index.html"><h6>ini heading dan link untuk kembali</h6></a>
</body>
</html>
<html>
<head></head>
<body>
<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<a href="index.html"><h6>ini heading dan link untuk kembali</h6></a>
</body>
</html>
Nah di atas adalah koding untuk halaman lain.html. Sekarang kita run di browser.
di atas adalah tampilan untuk hamalan index.html
Dan di atas ini adalah adalah tampilan hamalan lain.html. seperti ini kira-kira. Bisa kalian liat di bawah ada tulisan berwarna dengan underline itu adalah linknya. Bisa kalian coba sendiri, silahkan kreasikan sesuai imajinasi kalian. Untuk pemahaman lebih detail bisa cek w3school
Tidak ada komentar:
Posting Komentar