-->

Menjelajahi HTML Dan Berkenalan Dengan Tag HTML

Sekarang Anda akan menjelajahi HTML secara mendetail: seperti apa tampilannya dan dasar-dasar cara kerjanya. Ini akan memberi Anda alat untuk melihat halaman HTML dunia nyata dalam langkah-langkah berikutnya.


Mari kita mulai dengan dasar-dasarnya dengan melihat tag HTML yang sangat sederhana: 

- tag paragraf.


<p>Teks ini berada di dalam tag paragraf.</p>

<p>Ini adalah paragraf kedua setelah paragraf pertama.</p>




Berikut adalah dua elemen paragraf , satu demi satu. Anda dapat melihat bahwa teks paragraf pertama dibungkus dengan tag paragraf pembuka dan penutup .


Tag paragraf pembuka terlihat seperti ini: <p>

Tag paragraf penutup terlihat seperti ini: </p>

Semua tag HTML terdiri dari karakter di dalam tanda kurung sudut : "<" & juga ">" .

Tag penutup mengawali karakter tersebut dengan garis miring ke depan : "/". Pengembang web mungkin merujuk ke tag paragraf dalam ucapan sebagai "tag P", mengacu pada karakter yang mendefinisikan tag paragraf.


Kebanyakan tag harus ditutup setelah dibuka. Namun, jika Anda membuat kesalahan dalam kode Anda, halaman web akan tetap dimuat - mungkin tidak terlihat seperti yang Anda inginkan. Terkadang, tag penutup yang hilang dapat menyebabkan halaman terlihat sangat rusak. Di lain waktu, mungkin tidak ada bedanya. Browser web melakukan yang terbaik untuk menampilkan halaman meskipun ada kesalahan dalam HTML, dan ini sangat diwajarkan bagi pengembang baru, oleh karna itu alangkah baiknya anda wajib mengingat rumus ini : "setiap ada tag pembuka, pasti ada tag penutup". itu kuncinya, meskipun ada nantinya beberapa tag pembuka tanpa harus ada tag penutupnya.


Mari kita lihat yang paling mendasar dari semua elemen HTML: tautan. Berikut beberapa kode HTML untuk elemen tautan:


<a href="https://google.com">Google</a>

Tag yang digunakan untuk tautan adalah sebagai berikut ('a' adalah singkatan dari 'tag anchor / tag jangkar'.):

<a>

Seperti paragraf kami sebelumnya diatas, Anda dapat melihat tag yang membungkus teks yang seharusnya diubah menjadi tautan. Selain menyoroti teks yang akan ditautkan, kita juga perlu menentukan tujuan tautan. Kami melakukan ini dengan atribut pada tag. Dalam kasus tautan, kami menyebutnya href atribut, yang digunakan untuk menentukan tujuan tautan. Atribut ditentukan dalam tag pembuka 'a', tapi tidak dibagian penutup.

Tag juga dapat berisi tag, dan begitulah cara halaman disatukan. Berikut beberapa kode contoh yang lebih realistis:


<div id="pembukaan">

  <h1>Selamat datang disitus Kami</h1>

  <div class="image-wrapper">

    <img class="image-large" src="logo.jpg" />  

  </div>

  <p>Selamat Datang DiSitus Web Kami Dan Anda Bisa Melihat <a href="/logo">Logo Situs Web Kami Disini.</a></p>

</div>

Anda mungkin tidak tahu apa yang a div, h1 atau tag , atau apa itu class, id atau atributnya src. Namun, Anda mungkin dapat melihat bagaimana tag, atribut, dan konten ini dibangun di atas contoh sebelumnya. Contoh di atas menunjukkan:

- bagaimana tag bersarang di dalam tag lain

- bagaimana tag img memiliki beberapa atribut

- bagaimana tag tertentu img tersebut dapat menutup sendiri.

Anda mungkin memperhatikan bahwa baris kode dan teks diindentasi. Ini sepenuhnya merupakan pilihan estetika oleh orang yang menulis kode. Karena browser mengabaikan banyak spasi, pembuat kode halaman ini telah meletakkannya untuk membuat pembukaan dan penutupan elemen jauh lebih jelas, daripada menjalankan semuanya secara bersamaan dalam satu baris. Hapus kode lebih mudah untuk di-debug, diperbaiki dan diubah.


Ringkasan

Anda sekarang tahu hampir seluruh tata bahasa HTML: tag, dengan atribut, yang membungkus konten. Nama tag, dan peran yang dimainkan atributnya, harus dipelajari, tetapi bahasanya sendiri relatif kecil. 


HTML berisi semua konten halaman, seperti link, gambar, referensi ke file dan konten. Namun, ini tidak benar-benar menggambarkan bagaimana tampilan halaman. Sebaliknya, ini menjelaskan strukturnya : peran apa yang dimainkan setiap konten atau elemen.

Ingat Ini, HTML Adalah Struktur Dari Halaman Web


Sampaikan pendapat Anda:

Apakah tata bahasa inti HTML jelas, atau Anda memiliki pertanyaan? Jika Anda memiliki pertanyaan, Bagikan dan diskusikan tanggapan Anda dengan kami di bagian Komentar. Pengembang web sering mengandalkan dukungan dan saran online satu sama lain untuk memecahkan masalah. 


Komentar