-
08.00 s/d 20.45
|
HTML, atau Hypertext Markup Language, adalah bahasa markup untuk web yang mendefinisikan struktur halaman web. Ini adalah salah satu blok bangunan paling dasar dari setiap situs web, jadi penting untuk dipelajari jika Anda ingin berkarir dalam pengembangan web. Pada artikel ini, akan memandu Anda tentang apa itu HTML secara mendetail, bagaimana HTML melakukan hal-hal di halaman web, dan ini juga akan sampai bagian HTML yang sangat keren iya-itu HTML Semantik. Apa itu HTML? Untuk memahami "HTML" dari awal sampai akhir, mari kita lihat setiap kata yang membentuk singkatan tersebut: Hypertext : teks (sering dengan penyematan seperti gambar juga) yang diatur untuk menghubungkan item terkait Markup : panduan gaya untuk typesetting apapun yang akan dicetak dalam format hardcopy atau softcopy Language : bahasa yang dipahami dan digunakan oleh sistem komputer untuk menginterpretasikan perintah. HTML menentukan struktur halaman web. Struktur ini saja tidak cukup untuk membuat halaman web terlihat bagus dan interaktif. Jadi, Anda akan menggunakan teknologi bantuan seperti CSS dan JavaScript untuk membuat HTML Anda indah dan menambah interaktivitas. Dalam hal ini, ingin membagi tiga teknologi – HTML, CSS, dan JavaScript – dengan cara ini: ketiganya seperti tubuh manusia.
Anda juga dapat melihat HTML, CSS, dan JavaScript dengan cara ini: HTML adalah struktur rumah, CSS adalah dekorasi interior dan eksterior, dan JavaScript adalah listrik, sistem air, dan banyak fitur fungsional lainnya yang membuat rumah layak huni. Tag HTML Karena HTML menentukan markup untuk halaman web tertentu, Anda ingin teks, gambar, atau penyematan lainnya muncul dengan cara tertentu. Misalnya, Anda mungkin ingin beberapa teks menjadi besar, teks lain menjadi kecil, dan beberapa menjadi tebal, miring, atau dalam bentuk poin-poin. HTML memiliki "tag" yang memungkinkan Anda menyelesaikannya. Nah, ada tag untuk membuat judul, paragraf, kata yang dicetak tebal, kata yang dicetak miring, dan lainnya. Gambar di bawah menjelaskan anatomi tag HTML: Elemen HTML Elemen terdiri dari tag pembuka, karakter, konten, dan tag penutup. Beberapa elemen kosong – artinya, elemen tersebut tidak memiliki tag penutup, melainkan memiliki sumber atau tautan ke konten yang ingin Anda sematkan di halaman web. Contoh elemen kosong adalah <img> , yang Anda gunakan untuk menyematkan gambar di halaman web. Elemen HTML sering digunakan secara bergantian dengan tag, tetapi ada sedikit perbedaan di antara keduanya. Elemen adalah kombinasi dari tag pembuka dan penutup, dan kemudian konten di antara keduanya. Berikut ini membuat gambar lain untuk membantu Anda memvisualisasikan anatomi elemen HTML: Atribut HTML Tag HTML juga mengambil apa yang disebut atribut. Atribut ini ditempatkan di tag pembuka dan berkisar dari gaya dan id hingga kelas. Mereka mengambil nilai, yang menyampaikan lebih banyak informasi tentang elemen dan membantu Anda melakukan hal-hal seperti gaya dan manipulasi dengan JavaScript. Pada infografis di bawah ini, tag pembuka berisi atribut class dengan nilai “text”. Ini dapat digunakan untuk menata elemen atau memilihnya dengan JavaScript untuk interaktivitas. Berikut anatomi halaman HTML dasar: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> Definition of HTML</title> </head> <body> <!--Page content such as text and images goes in here--> </body> </html> Mari kita lihat potongan penting kodenya di sini: <!Doctype html> : Menentukan bahwa kita menggunakan HTML5 dalam kode ini. Sebelum pengenalan HTML5, Anda harus secara eksplisit menyatakan versi HTML mana yang Anda kodekan dengan tag <!Doctype> . Misalnya, HTML4.0, 3.2, dan seterusnya. Tapi sekarang kita tidak lagi membutuhkannya. Ketika "html" ditulis dalam kode, browser secara otomatis mengasumsikan bahwa Anda sedang membuat kode dalam HTML5. <html> </html> : root, atau elemen tingkat atas dari setiap dokumen HTML. Setiap elemen lain harus dibungkus di dalamnya. <head> </head> : salah satu bagian terpenting dari dokumen HTML. Web crawlers melihat ke dalam tag kepala untuk mendapatkan informasi penting tentang halaman tersebut. Ini berisi info seperti judul halaman, stylesheet, informasi meta untuk SEO, dan banyak lagi. <meta /> : ini adalah elemen kosong yang menyampaikan informasi meta tentang halaman. Informasi tersebut dapat mencakup penulis, jenis pengkodean apa yang digunakannya (hampir selalu UTF-8), daya tanggap, kompatibilitas, dan banyak lagi. Web crawlers selalu melihat tag meta untuk mendapatkan informasi tentang halaman web, yang akan memainkan peran penting dalam SEO. <title> </title> : ini menentukan judul halaman web. Itu selalu ditampilkan di tab browser. <body> </body> : semua isi dokumen HTML terletak di dalam tag body. Hanya boleh ada satu <body> tag di seluruh halaman. Apa itu Semantic HTML? HTML semantik berarti bahwa tag HTML Anda menyampaikan arti sebenarnya dari kegunaannya. Semantik telah menjadi bagian integral dari HTML sejak awal tahun 90-an. Tapi itu tidak pernah mendapatkan relevansi khusus sampai akhir 90-an ketika CSS mulai bekerja di sebagian besar browser. Dengan HTML semantik, tag netral semantik seperti <div> dan <span> tidak disukai karena tag semantik lebih deskriptif seperti <header> , <nav> , <main> , <section> , <footer> dan <article> dapat melakukan hal yang sama seperti yang mereka lakukan. Keuntungan nyata menggunakan tag semantik adalah bahwa web crawlers dapat mengindeks halaman web atau situs web dengan mudah, meningkatkan SEO sebagai imbalannya. Selain itu, situs web yang menggunakan semantik menjadi lebih informatif, mudah beradaptasi, dan dapat diakses oleh mereka yang menggunakan pembaca layar untuk mengakses situs web. Tag Semantik Penting dan Apa yang Mereka Lakukan Mari kita lihat beberapa tag HTML semantik yang paling umum digunakan: <header> : Elemen <header> mendefinisikan bagian pengantar halaman web. Ini berisi item seperti logo, navigasi, pengalih tema, dan bilah pencarian. <nav> : Elemen <nav> menentukan item navigasi halaman seperti beranda, kontak, tentang, FAQ, dan sebagainya. <main> : Elemen <main> secara konvensional diperlakukan sebagai turunan langsung dari tag. Ini berisi bagian utama dari dokumen HTML selain <header> dan <footer> . Idealnya, hanya ada satu dari ini di seluruh dokumen HTML. <section> : Elemen <section> mendefinisikan bagian tertentu dari halaman web. Ini mungkin bagian etalase, bagian tentang, bagian kontak, atau lainnya. Anda dapat menggunakan banyak bagian dalam satu dokumen HTML. <article> : Elemen <article> mewakili bagian tertentu dari halaman web yang menyampaikan beberapa informasi tertentu. Informasi tersebut dapat berupa kombinasi teks, gambar, video, dan sematan. Lihatlah elemen ini sebagai postingan blog mandiri di halaman yang berisi kutipan tentang postingan blog lainnya. <aside> : Seperti namanya, ini mewakili sidebar di halaman web. Ini biasanya merupakan bagian dari halaman web yang tidak terkait langsung dengan konten utama. <footer> : Elemen <footer> menampung item seperti tautan cepat, informasi hak cipta, atau data lain apa pun yang terkait dengan seluruh situs web atau halaman web. Perhatikan bahwa karena elemen semantik menyampaikan arti sebenarnya dan apa yang sebenarnya dilakukan beberapa konten tertentu (seperti nav untuk navigasi, aside untuk sidebar, dan seterusnya), elemen ini tidak diposisikan secara otomatis di tempat yang seharusnya. Anda masih harus melakukannya dengan CSS. Dokumen HTML semantik super sederhana terlihat seperti ini: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> Definition of HTML</title> </head> <body> <header> <h1 class="logo"> LOGO</h1> <nav> <ul> <li> Home</li> <li> About</li> <li> Contact</li> <li> FAQs</li> </ul> </nav> </header> <main> <section class="about-me"> <article> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni est asperiores nemo, adipisci minus itaque quam, rem libero aliquam nesciunt, nisi inventore assumenda earum repellat labore ratione architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci voluptatem quam at officia beatae! </article> </section> <section class="contact-me"> You can find me on <a href="https://twitter.com/koladechris"> Twitter</a> You can find me on <a href="https://Instagram.com/koladechris"> Instagram</a> </section> <aside class="address"> My Address</aside> </main> <footer> © 2020 All Rights Reserved</footer> </body> </html> Berikut tampilannya di browser: Anda dapat melihat bahwa konten di dalam <aside> tag tidak ada di sidebar dan konten di dalam <nav> tag tidak tersedia secara otomatis sebagai bilah navigasi. Inilah mengapa Anda masih harus membuatnya terlihat seperti seharusnya dengan CSS. Kesimpulan Semoga artikel ini membantu Anda mempelajari dasar-dasar HTML dan fungsinya. Sekarang Anda dapat mulai mempelajari teknologi yang lebih maju seperti CSS dan JavaScript, dan kemudian mulai membangun karir yang solid dalam pengembangan web. Terima kasih banyak telah membaca dan bersenang-senang. |
