Tentukan tujuan dari tag. Atribut HTML. Apa itu tag?
HTML adalah bahasa markup hiperteks. Hal ini didasarkan pada apa yang disebut tag. Tag adalah beberapa elemen pembungkus yang menentukan format dan properti elemen halaman web. Kami telah mengumpulkan referensi tag HTML terkini untuk Anda dalam satu halaman.
Total ada lebih dari seratus elemen markup. Masing-masing memiliki sejumlah atribut dan sintaksnya sendiri. Referensi Tag HTML akan membantu Anda menemukan elemen yang Anda butuhkan dengan cepat.
Daftar tag HTML
Tabel di bawah ini menyajikan daftar tag HTML5 dengan deskripsi singkat dalam bahasa Rusia.
Tag Deskripsi Singkat
Komentar.
Mendefinisikan jenis dokumen.
Tautan, hyperlink, jangkar.
Mendefinisikan teks sebagai singkatan.
Informasi kontak untuk penulis atau pemilik dokumen.
Mendefinisikan suatu area pada peta gambar
Artikel
Selain konten (konten bukan konten utama di halaman)
Memungkinkan Anda memasukkan file audio yang sedang diputar.
Teks tebal.
Menetapkan URL dasar atau atribut target untuk tautan relatif dalam dokumen.
Area di mana penulisan teks dapat mengambil arah yang berbeda.
Mengatur arah penulisan teks. Berbeda dengan arah, arah fisik ditunjukkan
Mengutip.
Menentukan area badan dokumen.
Istirahat garis.
Tombol yang dapat diklik.
Digunakan untuk menggambar grafik menggunakan skrip
Tanda tangan tabel.
Catatan kaki untuk judul materi.
Digunakan untuk memasukkan kode komputer dalam bentuk teks.
Menentukan karakteristik kolom dalam tabel.
Mendefinisikan sekelompok satu atau lebih kolom tabel yang akan diformat.
Digunakan untuk menentukan opsi yang telah ditentukan sebelumnya untuk dipilih saat Anda mengetik di bidang teks.
Mendefinisikan deskripsi istilah dari tag dalam daftar istilah.
Teks yang telah dihapus di dokumen versi baru.
Mendefinisikan informasi tambahan yang dapat dilihat atau disembunyikan pengguna.
Menunjukkan bahwa kontennya adalah sebuah istilah.
Mendefinisikan kotak dialog atau elemen interaktif
Elemen blok adalah salah satu elemen tata letak utama.
Mendefinisikan daftar definisi.
Nama istilah dalam daftar definisi.
teks yang disorot artinya (biasanya teks dicetak miring).
Wadah untuk aplikasi eksternal
Sekelompok elemen terkait pada formulir.
Judul untuk elemen
Mendefinisikan grup otonom yang terdiri dari beberapa elemen (misalnya, gambar dengan keterangan)
catatan kaki
Mendefinisikan formulir input pengguna.
-
Header HTML dari berbagai level: , , , , , .
Menentukan area kepala dokumen.
Blok tajuk
Garis horizontal merupakan pembatas tematik.
Elemen akar. Memberi tahu browser bahwa dokumen yang diberikan adalah dokumen HTML.
Teks miring.
Mendefinisikan bingkai sebaris
Gambar, gambar.
Bidang masukan, elemen formulir.
Teks yang telah ditambahkan ke dokumen versi baru.
Teks yang dimasukkan dari keyboard atau nama tombol keyboard. Biasanya dalam font monospace.
Label untuk kolom masukan. Biasanya berisi label bidang.
Judul elemen.
Elemen daftar.
Mendefinisikan pengikatan sumber daya eksternal (paling sering pengikatan stylesheet CSS).
Konten utama
Wadah untuk. Mendefinisikan peta khusus pada gambar
Teks yang dipilih (biasanya menggunakan penyorotan latar belakang).
Wadah untuk daftar item menu
Mendefinisikan item yang dapat dipanggil pengguna dari menu konteks
Digunakan untuk mendefinisikan metadata dokumen.
Meteran nilai dalam rentang tertentu
Wadah untuk elemen navigasi
Konten alternatif untuk pengguna yang skripnya dinonaktifkan
Mendefinisikan objek bawaan
Mendefinisikan daftar bernomor.
Mendefinisikan sekelompok opsi terkait dalam daftar drop-down. Memberi nama grup.
Parameter (opsi pilihan) di daftar drop-down.
Hasil perhitungannya.
Ayat.
Menetapkan opsi untuk objek bawaan
Wadah untuk banyak gambar
Teks yang telah diformat sebelumnya.
Bilah kemajuan
Kutipan dalam teks.
Teks alternatif jika browser tidak mendukung .
Anotasi untuk konten tag.
Wadah untuk simbol dan penguraiannya (terutama untuk simbol Asia Timur, hieroglif).
Teks yang dicoret.
Teks yang merupakan keluaran program komputer (biasanya dalam font monospace).
Mendefinisikan skrip atau koneksi skrip dari sumber daya eksternal.
Bab
Mendefinisikan daftar dropdown atau beberapa pilihan.
Teks dalam ukuran font lebih kecil.
Mendefinisikan sumber daya untuk , dan .
Elemen sebaris.
Teks disorot berdasarkan makna. Biasanya ditampilkan dalam huruf tebal.
Mendefinisikan wadah untuk menentukan gaya CSS untuk dokumen.
Menampilkan teks sebagai subskrip.
Judul di dalam tag.
Menampilkan teks sebagai superskrip.
Mendefinisikan sebuah tabel.
Mendefinisikan area konten dalam tabel.
Sel dalam tabel
.
Bidang masukan multibaris.
Mendefinisikan sekelompok baris di bagian bawah tabel
- catatan kaki.
Tag html dasar adalah dasar di mana hampir semua situs web/blog dibangun. Dari artikel ini Anda akan mempelajari 20% tag yang selalu Anda perlukan.
Seperti dalam bahasa apa pun, dan bahkan di sini, aturan Pareto 20/80 berlaku (20% hal 80% penting untuk mencapai hasil yang diinginkan), yang berarti cukup mengetahui 20% kode saja untuk mencapainya dengan percaya diri. tujuan Anda dalam membangun situs web.
HTML bukan bahasa pemrograman, karena merupakan bahasa markup hypertext, yang berbicara sendiri, memungkinkan Anda menandai blok pada halaman untuk tampilan yang benar, dan menandai teks untuk halaman web. Ini juga digunakan untuk membuat link dari satu halaman situs ke halaman lainnya. Semua link di Internet dibuat menggunakan bagian hypertext dari kode html.
- ini adalah bahasa yang paling sederhana! Jika Anda memutuskan untuk mempelajarinya, maka penting untuk dipahami sejak awal bahwa tidak ada kesulitan di dalamnya. Kami dapat mengatakan dengan yakin bahwa di sekolah, anak-anak mengalami lebih banyak kesulitan dalam pelajaran ilmu komputer.
Jadi mari kita mulai. Lebih baik menulis kode di notepad, yang disertakan dalam program standar sistem operasi Windows, atau di program gratis “Notepad++”.
Pertama, mari kita definisikan apa itu tag. Tag adalah sel dari bahasa HTML itu sendiri, yang umumnya menjadi dasar pembuatannya. Dengan menggunakan tag, browser memahami cara menampilkan teks dan tempat menyisipkan gambar. Tag adalah elemen markup itu sendiri.
Tag HTML untuk membuat kerangka situs web
Tag dapat dipasangkan atau tidak dipasangkan. Yang berpasangan buka dan tutup, yaitu yang penutup mengandung garis miring terbalik “/”.
Hal pertama yang harus ada dalam dokumen html apa pun saat membuat halaman blog adalah:
situs - situs untuk pengembang.
Dimensi Gambar
Putuskan sendiri"
Ubah ukuran gambar menjadi lebar 200 piksel dan tinggi 150 piksel.
Dimensi Gambar
Dimensi Gambar
Setiap orang yang membaca pelajaran ini mungkin tahu apa itu HTML. Namun meninjau dasar-dasarnya membantu meningkatkan pengetahuan dan mempertajam keterampilan Anda, terutama dengan teknologi web yang terus berkembang.
Ada banyak pembicaraan akhir-akhir ini tentang perubahan yang dibawa HTML 5. Setiap tag yang disebutkan dalam artikel ini didukung baik dalam HTML 4.01 dan HTML 5. Meskipun beberapa tag ini banyak digunakan, akan sangat membantu untuk meninjau tekniknya terlibat.
1.
Setiap buku tentang pemrograman menyebutkan bahwa sangat berguna untuk menjelaskan fungsi kode Anda. Mengapa berkomentar merupakan praktik yang baik? Ini sangat membantu orang yang membaca kode Anda untuk memahami apa yang terjadi.
Untuk HTML, berkomentar bisa tampak seperti poin yang menambah bobot halaman. Namun, komentar dapat berguna untuk mendefinisikan bagian dan untuk memelihara struktur dan organisasi kode halaman. Menandai awal dan akhir bagian yang berbeda dapat sangat membantu ketika mengerjakan sebuah proyek.
butir menu 1
butir menu 2
Ini adalah konten utamanya.
... 2. Gaya tabel: , , dan
Untuk membuat desain tabel yang bagus, Anda perlu menggunakan tag yang disebutkan di subpos. Semuanya memengaruhi baris tabel dan Anda dapat dengan mudah mengatur gayanya.
Barang
Jumlah
Jumlah
7
#1
3
#2
4
Bungkus baris tabel ke dalam . Beginilah judul tabel terbentuk.
Membungkus senarnya Kami membentuk baris total di bagian bawah tabel. string harus didefinisikan sebelum garis , sehingga total baris ditampilkan sebelum baris tabel lainnya.
Kami membungkus baris data dalam .
Ayat
Jumlah
Jumlah
7
#1
3
#2
4
3.
Daftar dropdown adalah cara terbaik untuk menyajikan data untuk dipilih pengguna. Tidak hanya memakan sedikit ruang, tetapi juga familiar bagi pengguna dan mudah digunakan. Properti yang luar biasa adalah kemampuan untuk membuat kategori (atau subjudul) untuk item daftar.
Detroit Tigers Chicago Cubs Detroit Lions Chicago Bears
Detroit Tigers Chicago Cubs Detroit Lions Chicago Bears
4. Judul - ,,,,, dan
Tentu saja, semua orang menggunakan heading. Tapi sejujurnya, kapan terakhir kali Anda menggunakannya atau judul tingkat yang lebih rendah lagi? Judul memungkinkan Anda membuat lebih sedikit struktur semantik, seperti gaya tambahan untuk teks .
Tidak perlu membuat pekerjaan tambahan untuk diri Anda sendiri. Ingat tag judul.
5. dan
Semua orang menyukai situs yang mudah untuk menemukan informasi yang Anda perlukan di antara item yang dikelompokkan secara logis. Kelompok membentuk elemen bersama-sama dengan menggambar bingkai persegi panjang di sekelilingnya. Dimungkinkan juga untuk menambahkan judul ke bagian tersebut menggunakan .
Informasi Umum: Nama: Email: Tanggal lahir:
6.
Menandai tidak mempengaruhi gaya dengan cara apa pun. Ini mempengaruhi fungsionalitas halaman.
digunakan untuk mendefinisikan label elemen input. Label itu sendiri menerima klik mouse, membuat kolom input yang sesuai aktif. Properti label ini berfungsi untuk bidang teks dan tombol radio.
Nama: Pria: Wanita:
7.
Jika Anda perlu memberikan efek dramatis pada suatu ekspresi, Anda dapat menggunakan . Secara default, baris kosong akan disisipkan sebelum dan sesudah elemen. Indentasi juga akan ditambahkan untuk memisahkan teks yang terdapat dalam elemen dari konten lainnya.
Contoh penggunaan tag
Contoh penggunaan tag
8.
Tidak bisa dikatakan seperti itu mengacu pada , tapi biasanya digunakan bersamaan.
Ingat tagnya , ketika Anda perlu mengutip seseorang.
Contoh penggunaan tag bersamaan dengan tag. Penawaran ini disertakan dalam tag.
Contoh penggunaan tag blockquote bersamaan dengan tag cite. Penawaran ini disertakan dalam tag.
9.
Penggunaan daftar memberikan peluang besar untuk mengatur informasi. Semua orang tahu tentang
, tapi seberapa sering Anda menggunakannya Dan ? Mungkin nama "daftar definisi" dapat membingungkan pengembang pemula dan membuatnya berpikir bahwa daftar seperti itu hanya dapat digunakan untuk memasukkan definisi dan ketentuan. Namun keadaan ini tidak sesuai dengan kenyataan.
Jenis daftar
Daftar tidak berurutan (ul)
Daftar pesanan (ol)
Daftar definisi (dl)
apa yang mereka lakukan
Daftar tidak berurutan (ul): daftar dengan indikator putus-putus
Daftar terurut (ol): daftar bernomor
Daftar Definisi (dl): Daftar dengan definisi elemen
Alasan menggunakan daftar
Gaya konten yang konsisten
Buat saja
Serbaguna
Cara setiap jenis daftar menampilkan informasi berbeda satu sama lain. Tentunya tidak perlu berhenti di situ
Dan , tetapi struktur daftar definisi memerlukan klarifikasi lebih lanjut.
Item Daftar #1 Definisi Item Daftar #1 Item Daftar #2 Definisi Item Daftar #2
Daripada mendefinisikan elemen daftar (
), kami menggunakan dua tag: Dan . mendefinisikan setiap item dalam daftar, dan menggambarkan poin di atas. Di bawah ini adalah daftar menurut kode daftar definisi yang ditunjukkan sebelumnya.
Item Daftar #1 Definisi Item Daftar #1 Item Daftar #2 Definisi Item Daftar #2
10. "(dan karakter ASCII lainnya)
Saat menggunakan HTML, Anda perlu menggunakan kode ASCII saat Anda perlu memasukkan karakter. Aturan ini memerlukan langkah tambahan, namun memastikan bahwa semua karakter ditampilkan dengan benar di layar pengguna dan browser tidak menganggapnya sebagai bagian dari markup. Pernahkah Anda menemukan teks yang tidak ditampilkan dengan benar? Biasanya, teks bermasalah dibuat dengan menggunakan tanda kutip, tanda kutip, tanda lebih besar dari kurang, dan sebagainya. Sebenarnya tidak banyak karakter seperti itu, dan perlu diingat kode ASCII-nya.
Kode apa pun berisi perintah kontrol yang melaluinya tugas-tugas tertentu dilakukan. Dalam setiap bahasa sebutannya berbeda-beda, tetapi hakikatnya sama. Agar tidak bingung dalam istilah dan bahasa yang sama, mari kita cari tahu apa nama perintah HTML dan bagaimana penggunaannya.
Pada penjelasannya saya akan memberikan link spesifikasinya, serta terjemahannya yang saya sebutkan di halaman HTML... Terjemahan oleh A. Pyramidin disebutkan dalam spesifikasi HTML resmi, sehingga terjemahannya dianggap berkualitas tinggi.
Hal-hal sedikit berbeda dengan tag yang tidak memerlukan bagian penutup wajib. Ini termasuk tag yang membuat elemen tabel: . Baris tabel akan secara otomatis menutup tag isi tabel
. Namun tag tabel harus ditutup, jika tidak, semua konten halaman setelah tabel akan menjadi bagiannya dan akan dipengaruhi oleh pengaturan tabel.
Dilarang menutup tag yang tidak melakukan tindakan apa pun pada hypertext - ,
, dan lainnya. Persyaratan untuk setiap tag ditentukan dalam spesifikasi. Di bawah ini kita akan melihat di mana tepatnya apa yang ditunjukkan. Mari kita ulangi. Ada dua jenis tag dalam HTML:
Tali (sebaris). Mereka juga disebut sebaris.
Memblokir.
Tag penutup (/ penutup) dapat berupa:
Tag penutup () wajib diisi.
Tag penutup () bersifat opsional.
Tag penutup () tidak diperbolehkan.
atribut tag dapat berupa:
Diperlukan.
Opsional.
Informasi untuk setiap tag tertentu dapat diperoleh dari spesifikasi. Cara menggunakannya tertulis di bawah ini. Dan satu lagi poin penting mengenai penggunaan berbagai karakter dalam HTML.
Saat tata letak html terkadang Anda harus menggunakan simbol yang dapat diartikan dalam dua cara. Misalnya, penggunaan karakter "" akan dianggap oleh browser sebagai bagian dari tag, yaitu sebagai karakter layanan, namun hal ini tidak selalu terjadi. Oleh karena itu, karakter bermasalah dikodekan. Simbol-simbol yang dikodekan seperti itu disebut mnemonik. Daftar mnemonik dapat ditemukan di spesifikasi.
Tandai bersarang
Tag dapat disarangkan satu sama lain seperti boneka bersarang. Pada saat yang sama, mereka dibagi menjadi elemen induk dan anak. Izinkan saya menjelaskan dengan sebuah contoh:
Elemen teks yang digaris bawahi adalah elemen induk dari elemen teks yang digaris bawahi dengan pewarisan.
Unsur anak mewarisi sifat-sifat orang tuanya. Dengan cara ini, teks yang dicoret juga akan digarisbawahi.
Hal utama yang harus diingat adalah bahwa kedua bagian tag (pembuka dan penutup) harus disarangkan dalam elemen induk yang sama, sekali lagi dengan analogi dengan boneka bersarang.
Menggunakan spesifikasi
Versi resmi saat ini (Maret 2012) adalah HTML 4.01, versi HTML 5.0 sedang dalam pengembangan aktif, tetapi belum menjadi standar, meskipun banyak publikasi di Internet mengenai topik HTML 5.
Sekarang tentang cara menggunakan spesifikasi. Katakanlah kita tertarik dengan tabel di atas. Buka ringkasan dan pilih item yang sesuai (No. 11) - Tabel.
Buka spesifikasi, menu bagian:
Di sini Anda dapat memperoleh informasi tentang setiap atribut.
Persyaratan tag penutup (). Dalam hal ini, tag awal dan akhir diperlukan.
Nama-nama atribut tag ini.
Daftar nilai untuk setiap atribut.
Status atribut (Saat ini/Usang/Dinonaktifkan).
Tipe data (nilai) atribut.
Daftar atribut umum yang digunakan dengan tag apa pun.
Catatan penting. Pada tangkapan layar di atas, atribut align berstatus tidak digunakan lagi (tidak disarankan). Atribut seperti itu tidak akan berfungsi (dan akan menjadi kesalahan) di DOCTYPE Strict. Jadi saya sangat menyarankan untuk tidak menggunakan elemen yang tidak digunakan lagi. Status elemen apa pun dapat dilihat di daftar umum.
Klarifikasi tanda:
Nama tanda.
Status tag pembuka dalam dokumen html:
HAI - opsional
Menutup status tag dalam dokumen html:
HAI - opsional
F - terlarang (terlarang)
Apakah kontennya diharapkan (hiperteks):
E - Kosong (tidak ada isi)
Status tanda (D, L dan F):
D - tidak digunakan lagi (tidak disarankan).
L - longgar (diizinkan dalam spesifikasi Transisi).
F - Frameset (diizinkan dalam spesifikasi Frameset).
Sergei Savenkov
semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat
