Tag dalam HTML seperti kata kunci. Setiap tag memiliki semantik (arti) masing-masing. Misalnya tag <p> mewakili paragraf dan tag <b> mewakili huruf tebal. Tergantung pada tagnya, browser akan menampilkan konten dalam tag dengan cara yang berbeda.
Dalam perkembangan sebenarnya, terkadang kita juga menyebut tag HTML sebagai elemen HTML.
milik
↓
<div class=foo>jaringan bahasa C</div>
↑ ↑ ↑
tag awal isi tag akhir
Selain atribut class, tag awal juga dapat berisi informasi atribut lainnya seperti id, title, dan lain-lain yang akan kami jelaskan nanti.
Catatan: Meskipun tag HTML tidak peka huruf besar-kecil dalam sintaksisnya, demi standarisasi dan profesionalisme, sangat disarankan untuk menggunakan huruf kecil saat mendefinisikan tag.
(1) Tandai semantik
Mempelajari tag itu rumit, fokusnya adalah mengingat semantik setiap tag. Pengertian sederhana mengacu pada pengertian label, yaitu untuk apa label itu digunakan. Menurut semantik labelnya. Memberikan label yang paling masuk akal pada tempat yang tepat dapat membuat struktur halaman menjadi lebih jelas.
(2) Tag judul h1-h6
Untuk membuat halaman web lebih semantik, kita sering menggunakan tag judul di halaman. HTML menyediakan 6 level judul halaman web yaitu <h1> - <h6>
<h1>Saya adalah tag tingkat pertama</h1>
h merupakan singkatan dari kata head yang artinya gelar kepala.
Semantik tag: Digunakan sebagai judul, dan dalam urutan kepentingannya.
● Fitur:
1. Teks dengan judul akan menjadi tebal, dan ukuran font juga akan bertambah secara berurutan.
2. Satu judul menempati baris tersendiri.
(3) Tag paragraf dan tag pemisah baris
Anda ingin teks ditampilkan dalam beberapa bagian di halaman web. Tag <p> digunakan untuk menentukan gaya paragraf.
<p>Saya adalah tag paragraf</p>
p adalah singkatan dari paragraf yang artinya paragraf HTML dapat dibagi menjadi beberapa paragraf, dan baris-baris tersebut akan otomatis terbungkus sesuai dengan ukuran jendela browser, meninggalkan celah antar paragraf.
Di HIML, teks dalam paragraf disusun dari kiri ke kanan hingga mencapai ujung kanan jendela browser, lalu otomatis dibungkus. Jika Anda ingin bagian teks tertentu dipaksa terbungkus dalam baris baru, Anda perlu menggunakan tag pemisah baris <br/>.
break memaksa baris baru dengan jarak kecil di antara baris label tunggal.
Kasus berita:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Berita Internasional</title></head><body><h1>Berita Internasional</h1><h4>Ukraina mengirimkan drone untuk menyerang bandara militer di Oblast Ryazan dan Saratov Rusia pagi itu</ h4><p> Pada tanggal 5 Desember waktu setempat, Kementerian Pertahanan Rusia mengeluarkan pernyataan yang mengatakan bahwa Ukraina mengirim drone untuk menyerang bandara militer di wilayah Ryazan dan Saratov Rusia pagi itu, tetapi mereka dicegat oleh sistem pertahanan udara Rusia. Tiga tentara Rusia tewas dan empat lainnya terluka dalam serangan itu. </p><p>Selain itu, jatuhnya drone Ukraina di atas bandara militer menyebabkan kerusakan pada badan dua jet tempur Rusia. Beberapa jam kemudian, Ukraina melaporkan bahwa Rusia telah melancarkan serangan rudal babak baru. </p><h4>Mustahil bagi Rusia untuk menyerahkan kendali atas pembangkit listrik tenaga nuklir Zaporozhye</h4><p>Juru bicara Kementerian Luar Negeri Rusia Zakharova mengatakan kepada Kantor Berita Sputnik bahwa tidak mungkin bagi Rusia untuk menyerahkan kendali atas Zaporozhye Pembangkit Listrik Tenaga Nuklir Pengendalian pembangkit listrik termonuklir. </p><h4>Biden tidak akan mempertimbangkan penggunaan minyak Rusia untuk menambah cadangan minyak strategis</h4><p>Gedung Putih mengatakan pihaknya tidak terkejut dengan reaksi Rusia terhadap batas atas harga. Biden tidak akan mempertimbangkan penggunaan minyak Rusia untuk mengisi kembali Cadangan Minyak Strategis. Utusan keamanan energi AS, Hochstein, mengatakan AS masih memiliki cadangan minyak strategis (SPR) yang cukup untuk menghadapi keadaan darurat. Pemerintahan Biden akan mengadakan pertemuan daring dengan para eksekutif industri minyak AS pada 8 Desember untuk membahas cara mendukung infrastruktur energi Ukraina. Menteri Energi AS akan bertemu dengan sejumlah eksekutif perusahaan minyak pada tanggal 14. </p><p>Jaringan Bahasa C<br/>2022-12-6</p></body></html>
Ditampilkan sebagai berikut:
(4) Tag pemformatan teks
Di halaman web, terkadang Anda perlu mengatur efek tebal, miring, atau garis bawah untuk teks. Dalam hal ini, Anda perlu menggunakan tag pemformatan teks dalam HTML. Jadikan teks muncul dengan cara yang istimewa.
Semantik tag: Menyoroti kepentingan lebih penting daripada teks biasa.
<strong>Tebal</strong><b>Tebal</b><em>Cetak</em><i>Cetak</i><del>Dicoret</del><s>Dicoret</ s><ins >Garis bawah</ins><u>Garis bawah</u>
Ditampilkan di bawah ini:
(5) tag div dan span
<div> dan <span> tidak memiliki semantik. Mereka hanyalah kotak yang digunakan untuk menampung konten.
rentang rentang partisi perpecahan divisi
● Fitur:
Tag <div> digunakan untuk tata letak, tetapi sekarang hanya satu <div> yang dapat ditempatkan dalam satu baris.
Tag <span> digunakan untuk tata letak. Bisa ada beberapa <span> dalam satu baris.
(6) Tag dan jalur gambar
1. Tag gambar
Dalam tag HTML, tag <img> digunakan untuk mendefinisikan gambar di halaman HTML.
<img src=URL gambar />
Singkatan dari kata gambar. Arti gambar.
src adalah atribut wajib dari tag <img>. Ini digunakan untuk menentukan jalur dan nama file dari file gambar.
Yang disebut atribut: pemahaman sederhana adalah ciri-ciri tag gambar ini.
<imgsrc=bg.pngalt=/>
Properti tambahan untuk tag gambar
Hal-hal yang perlu diperhatikan saat menggunakan tag gambar
(1) Tag gambar dapat mempunyai beberapa atribut, yang harus ditulis setelah nama tag.
(2) Atribut tidak berurutan tertentu. Nama tag dan atribut, serta atribut dipisahkan dengan spasi.
(3) Atribut mengambil format pasangan kunci-nilai, yaitu format kunci = "nilai", atribut = nilai atribut"
2. Jalan
(1) Folder direktori dan direktori root:
Dalam pekerjaan sebenarnya, file kita tidak dapat ditempatkan secara acak, jika tidak maka akan sulit untuk menemukannya dengan cepat, sehingga kita memerlukan folder untuk mengelolanya.
Folder direktori: Ini adalah folder biasa, yang hanya menyimpan materi relevan yang kita perlukan untuk membuat halaman, seperti file html, gambar, dll.
Direktori root: Tingkat pertama dari folder direktori yang dibuka adalah direktori root.
(2) VSCode membuka folder direktori
File - membuka folder. Memilih folder direktori sangat nyaman untuk mengelola file nanti Atau menyeretnya secara langsung.
Akan ada banyak gambar di halaman tersebut. Biasanya kita akan membuat folder baru untuk menyimpan file gambar (gambar) tersebut. Saat mencari gambar, kita perlu menggunakan metode "path" untuk menentukan lokasi file gambar tersebut.
Jalur dapat dibagi menjadi:
(1) Jalur relatif, jalur direktori yang dibuat berdasarkan lokasi file yang direferensikan.
(2) Jalur absolut mengacu pada posisi absolut dalam direktori, yang langsung mencapai lokasi target, biasanya jalur dimulai dari huruf drive.
(7) Tag hyperlink
1. Format sintaks tautan
<ahref=jump target target=metode popup jendela target>teks atau gambar</a>
Singkatan dari kata jangkar: jangkar
Kedua atribut tersebut berfungsi sebagai berikut
2. Klasifikasi tautan
(1) Tautan eksternal, seperti <a href=http://www.baidu.com>baidu<a>.
(2) Tautan internal, yaitu tautan timbal balik antar halaman internal situs web, dapat langsung menghubungkan nama halaman internal, misalnya <a href=index.html>Beranda<a>.
(3) Tautan kosong, bila target tautan tidak ditentukan, <a href=#>Beranda<a>.
(4) Tautan unduhan, jika alamat di href adalah file atau paket terkompresi, file tersebut akan diunduh.
(5) Tautan elemen halaman web Berbagai elemen halaman web di halaman web, seperti gambar teks, tabel, audio, video, dll, dapat ditambahkan dengan hyperlink.