Dasar-dasar HTML Yang Penting Untuk Dipelajari – HTML ( H yper t ext M arkup L anguage) adalah kode yang digunakan untuk struktur halaman web dan isinya. Misalnya, konten dapat disusun dalam satu set paragraf, daftar poin berpoin, atau menggunakan gambar dan tabel data. Seperti judulnya, artikel ini akan memberi Anda pemahaman dasar tentang HTML dan fungsinya.
Dasar-dasar HTML Yang Penting Untuk Dipelajari
Jadi apa itu HTML?
binaryjs – HTML adalah bahasa markup yang mendefinisikan struktur konten Anda. HTML terdiri dari serangkaian elemen , yang Anda gunakan untuk melampirkan, atau membungkus, berbagai bagian konten untuk membuatnya tampak dengan cara tertentu, atau bertindak dengan cara tertentu. Tag penutup dapat membuat kata atau gambar hyperlink ke tempat lain, dapat membuat kata miring, dapat membuat font lebih besar atau lebih kecil, dan sebagainya. Misalnya, ambil baris konten berikut:
My cat is very grumpy
Jika kita ingin agar baris tersebut berdiri sendiri, kita dapat menentukan bahwa itu adalah sebuah paragraf dengan melampirkannya dalam tag paragraf:
My cat is very grumpy
Anatomi elemen HTML
Bagian utama dari elemen kami adalah sebagai berikut:
Baca Juga : 4 Bahasa Coding Yang Penting Untuk Dipelajari
- Tag pembuka: Ini terdiri dari nama elemen (dalam hal ini, p), dibungkus dengan kurung sudut buka dan tutup . Ini menyatakan di mana elemen dimulai atau mulai berlaku — dalam hal ini paragraf dimulai.
- Tag penutup: Ini sama dengan tag pembuka, kecuali bahwa tag ini menyertakan garis miring sebelum nama elemen. Ini menyatakan di mana elemen berakhir — dalam hal ini paragraf berakhir. Gagal menambahkan tag penutup adalah salah satu kesalahan standar pemula dan dapat menyebabkan hasil yang aneh.
- Konten: Ini adalah konten elemen, yang dalam hal ini hanyalah teks.
Elemen: Tag pembuka, tag penutup, dan konten bersama-sama membentuk elemen.
Elemen juga dapat memiliki atribut yang terlihat seperti berikut:
Mari kita jelajahi elemen paragraf ini sedikit lebih jauh.
Atribut berisi informasi tambahan tentang elemen yang tidak ingin Anda tampilkan di konten sebenarnya. Di sini, classadalah atribut nama dan editor-noteadalah atribut nilai . The classatribut memungkinkan Anda untuk memberikan elemen pengenal non-unik yang dapat digunakan untuk menargetkan itu (dan unsur-unsur lain dengan sama classnilai) dengan informasi gaya dan hal-hal lain.
Atribut harus selalu memiliki yang berikut:
- Spasi antara itu dan nama elemen (atau atribut sebelumnya, jika elemen sudah memiliki satu atau lebih atribut).
- Nama atribut diikuti dengan tanda sama dengan.
- Nilai atribut dibungkus dengan tanda kutip pembuka dan penutup.
Elemen bersarang
Anda juga dapat meletakkan elemen di dalam elemen lain — ini disebut bersarang . Jika kita ingin menyatakan bahwa kucing kita sangat pemarah, kita dapat membungkus kata “sangat” dalam sebuah elemen, yang berarti bahwa kata tersebut harus ditekankan dengan kuat:
My cat is very grumpy.
Namun Anda perlu memastikan bahwa elemen Anda bersarang dengan benar. Pada contoh di atas, kita membuka
elemen terlebih dahulu, lalu elemen; oleh karena itu, kita harus menutup elemen terlebih dahulu, lalu
elemen. Berikut ini tidak benar:
My cat is very grumpy.
Unsur-unsur harus membuka dan menutup dengan benar sehingga mereka jelas di dalam atau di luar satu sama lain. Jika mereka tumpang tindih seperti yang ditunjukkan di atas, maka browser web Anda akan mencoba menebak apa yang Anda coba katakan, yang dapat menyebabkan hasil yang tidak terduga. Jadi jangan lakukan itu!
elemen kosong
Beberapa elemen tidak memiliki konten dan disebut elemen kosong . Ambil elemen yang sudah kita miliki di halaman HTML kita:
<img src=”images/firefox-icon.png” alt=”My test image”>
Ini berisi dua atribut, tetapi tidak ada tag penutup dan tidak ada konten dalam. Ini karena elemen gambar tidak membungkus konten untuk memengaruhinya. Tujuannya adalah untuk menyematkan gambar di halaman HTML di tempat gambar itu muncul.
Anatomi dokumen HTML
Itu merangkum dasar-dasar elemen HTML individual, tetapi mereka tidak berguna sendiri. Sekarang kita akan melihat bagaimana elemen individual digabungkan untuk membentuk keseluruhan halaman HTML. Mari kita tinjau kembali kode yang kita masukkan ke dalam index.htmlcontoh kita (yang pertama kali kita temui di artikel Berurusan dengan file ):
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My test page</title>
</head>
<body>
<img src=”images/firefox-icon.png” alt=”My test image”>
</body>
</html>
Di sini, kami memiliki yang berikut:
doctype. Ini adalah pendahuluan yang diperlukan. Dalam kabut waktu, ketika HTML masih muda (sekitar 1991/92), doctypes dimaksudkan untuk bertindak sebagai tautan ke seperangkat aturan yang harus diikuti oleh halaman HTML untuk dianggap sebagai HTML yang baik, yang dapat berarti pemeriksaan kesalahan otomatis dan lainnya hal-hal yang berguna. Namun hari ini, mereka tidak berbuat banyak dan pada dasarnya hanya diperlukan untuk memastikan dokumen Anda berfungsi dengan benar. Itu saja yang perlu Anda ketahui untuk saat ini.
elemen. Elemen ini membungkus semua konten di seluruh halaman dan terkadang dikenal sebagai elemen root.
elemen. Elemen ini bertindak sebagai wadah untuk semua hal yang ingin Anda sertakan di halaman HTML yang bukan konten yang Anda tampilkan kepada pemirsa halaman Anda. Ini termasuk hal-hal seperti kata kunci dan deskripsi halaman yang ingin Anda tampilkan di hasil pencarian, CSS untuk menata konten kami, deklarasi kumpulan karakter, dan banyak lagi.
Elemen ini mengatur set karakter yang harus digunakan dokumen Anda ke UTF-8 yang mencakup sebagian besar karakter dari sebagian besar bahasa tertulis. Pada dasarnya, sekarang dapat menangani konten tekstual apa pun yang Anda masukkan ke dalamnya. Tidak ada alasan untuk tidak mengatur ini dan ini dapat membantu menghindari beberapa masalah di kemudian hari.
—
