Assalamu’alaikum Wr. Wb

Pengantar

Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang Head Elemen HTML. Dan pada kesempatan kali ini akan membahas paragraf dan anchor element.

Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.

Praktek HTML

• Paragraf
• Tag <p> digunakan untuk membuat paragraf, contoh dibawah ini :

• Gambar 1

  
  

• Gambar 2

   
  
• Tag <p> merupakan “block level element” sehingga akan tampil terpisah dalam baris baru.
• 
  
• Kita juga bisa membuat format rata tepi menggunakan tag paragraf di HTML, dalam pembuatan rata tepi (align) pada sebuah teks yang akan ditampilkan rata kiri (left), rata kanan (right), rata tengah (center), dan sama rata (justify).
• Berikut contohnya :
•  

  Gambar 3

  
  
• Hasilnya :

• Gambar 4

   
• Namun karena menggunakan atribut <align> yang dinyatakan sudah deprecated atau usang, jadi disarankan untuk tidak digunakan. Jadi kita bisa menggantinya menggunakan CSS dalam pembuatannya, karena HTML memfokuskan kepada struktur sedangkan CSS memfokuskan kepada tampilan.

• Gambar 5

    
  

• Gambar 6

   
  
• Anchor Element
  
• Membuat link di HTML dengan tujuan kata “HTML” akan pindah ke halaman yang berbeda. Tag yang digunakan adalah <a> kepanjangan dari anchor, untuk membuat link kita memerlukan 2 hal yakni teks yang berfungsi sebagai link (teks bisa diklik) dan alamat tujuan link (URL).
• Contoh :
• Ini kode link anchor yang akan ditujukan ke belajar.html

• Gambar 7

  
  

• Gambar 8

  
  
• Kode file belajar.html

• Gambar 9

   
  

• Gambar 10

   
  
•  
• Mengenal alamat absolut dan alamat relatif pada anchor
•  
• Alamat Absolut adalah penulisan alamat file dengan menyertakan nama website, lebih tepatnya ditulis alamat lengkapnya. Contoh :

• Gambar 11

   
  

• Gambar 12

   
  
•  Jika diklik akan mengarahkan ke situs yang dituju.

• Gambar 13

   
  
• Alamat relatif adalah alamat yang ditujukan kepada file tujuan berdasarkan struktur folder. Dengan membuat alamat relatif tidak perlu menulis lengkap alamat yang akan dituju. Contoh :
  

• Gambar 14

   
  

• Gambar 15

   
  
•  Ketika diklik akan menuju ke file yang akan kita akses.
•  

  Gambar 16

  
  
• Catatan: pembuatan link internal disarankan masih dalam satu folder, seperti contoh diatas.
  
•  
•  
• Link kebagian yang lain pada halaman yang sama
• 
  
• Membuat link anchor ke bagian yang sama di dalam satu file pun kita bisa membuatnya, namun untuk membuatnya kita memerlukan 2 hal: menandai lokasi yang dituju, dan membuat link yang menuju lokasi tersebut.
• Contoh : 
•  
• Hasilnya sebagai berikut : 
• 
  

  Gambar 17

• Gambar 18

  
   
• Ketika kita klik tulisan “Kembali ke Atas!” maka web browser akan mengembalikan ke atas.
• 
  
• 
  
• Membuat link Buntu
•  
• Maksudnya link buntu bagaimana?
• Link buntu adalah link yang tidak akan membuka apa pun, ketika kita klik. Biasanya digunakan sebagai placeholder atau sampel. Ibarat kita sedang jalan-jalan lalu kita ketemu jalan buntu. Contoh:

• Gambar 19

  
  
  

• Gambar 20

• Ketika diklik tidak akan diarahkan kemana-mana.
• 
  
• 
  
• Membuat atribut target
•  
• Atribut  target pada tag <a> digunakan untuk menentukan pada jendela mana halaman web akan ditampilkan. Nilai yang digunakan untuk atribut target adalah _self, _blank, _parent, _top, dan framename. 
• Contoh : 

• Gambar 21

   
  
•  Hasilnya :

• Gambar 22

  
   
•  Keterangan :
•  

  _selft : akan membuka link pada halaman yang sama.

   _blank : akan membuka link pada jendela baru atau tab baru.

  _top : menuju bagian paling atas pada halaman.

  _parent :  membuka link pada frame induk
  

   framename : akan membuka link pada <iframe> dengan nama tertentu.

• 
  

Kesimpulan

Pada pembahasan tentang paragraf anchor element yang memfokuskan paragraf dan link. Dengan tujuan teman-teman dapat membuat paragraf dan link tidak salah penempatan pada kode teman-teman.

Jadi untuk lanjut ke artikel-artikel selanjutnya teman-teman bisa membaca ulang tulisan ini dengan teliti, pahami, lalu praktekan. Jika ada kesulitan, teman-teman bisa tanyakan di kolom komentar pada website kami.

Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu : 

Youtube Alami Computer  

Website Alami Computer

Instagram chaerullah.fadli