Dasar-dasar HTML berisi aturan dasar bahasa HTML, deskripsi struktur halaman HTML, hubungan dalam struktur dokumen HTML antar elemen HTML.
Dokumen HTML biasa saja Dokumen Teks, dapat dibuat seperti dalam editor teks biasa (Buku catatan), dan dalam yang khusus, dengan penyorotan kode (Notepad++, Kode Visual Studio, dll.). Dokumen HTML memiliki ekstensi .html.
Sebuah dokumen HTML terdiri dari pohon elemen HTML dan teks. Setiap elemen diidentifikasi dalam dokumen sumber dengan tag awal (pembukaan) dan akhir (penutup) (dengan pengecualian langka).
Mulai tag menunjukkan di mana elemen dimulai, berakhir - di mana ia berakhir. Tag penutup dibentuk dengan menambahkan garis miring / sebelum nama tag:<имя тега> … . Di antara tag awal dan akhir adalah isi dari tag – konten tersebut.
Tag tunggal tidak dapat menyimpan konten secara langsung, ditulis sebagai nilai atribut, misalnya tag akan membuat tombol dengan teks Tombol di dalam.
Tag dapat bersarang satu sama lain, misalnya,
Teks
. Saat berinvestasi, Anda harus mengikuti urutan penutupannya (prinsip "matryoshka"), misalnya, entri berikut akan salah:Teks
.Elemen HTML dapat memiliki atribut (global, diterapkan ke semua elemen HTML, dan miliknya sendiri). Atribut ditulis dalam tag pembuka suatu elemen dan berisi nama dan nilai yang ditentukan dalam format atribut name="value" . Atribut memungkinkan Anda untuk mengubah properti dan perilaku elemen yang ditetapkan.
Setiap elemen dapat memiliki beberapa nilai kelas dan hanya satu nilai id. Beberapa nilai kelas ditulis dengan spasi,
Browser melihat (menafsirkan) dokumen HTML, membangun strukturnya (DOM) dan menampilkannya sesuai dengan instruksi yang disertakan dalam file ini (stylesheet, skrip). Jika markup benar, maka jendela browser akan menampilkan halaman HTML yang berisi elemen HTML - judul, tabel, gambar, dan sebagainya.
Proses interpretasi (penguraian) dimulai sebelum halaman web dimuat penuh ke dalam browser. Browser memproses dokumen HTML secara berurutan dari awal, sambil memproses CSS dan menghubungkan lembar gaya ke elemen halaman.
Dokumen HTML terdiri dari dua bagian - judul - di antara tag
… dan konten - di antara tag … .Struktur halaman web
1. Struktur dokumen HTML
Bahasa HTML mengikuti aturan yang terdapat dalam file deklarasi tipe dokumen. (Definisi Jenis Dokumen, atau DTD). DTD adalah dokumen XML yang mendefinisikan tag, atribut, dan nilainya mana yang valid untuk jenis HTML tertentu. Setiap versi HTML memiliki DTD sendiri.
DOCTYPE bertanggung jawab atas tampilan halaman web yang benar oleh browser. DOCTYPE tidak hanya mendefinisikan versi HTML (misalnya html), tetapi juga file DTD yang sesuai di web.
Elemen dalam tag , membentuk pohon dokumen, yang disebut model objek dokumen, DOM (model objek dokumen). Pada saat yang sama, elemen adalah elemen akar.
Beras. 1. Struktur halaman web yang paling sederhana Untuk memahami interaksi elemen halaman web, perlu untuk mempertimbangkan apa yang disebut "hubungan keluarga" antar elemen. Hubungan antara beberapa elemen bersarang diklasifikasikan ke dalam hubungan induk, anak, dan saudara.
Leluhur Sebuah elemen yang mengandung elemen lain. Pada Gambar 1, nenek moyang untuk semua elemen adalah . Pada saat yang sama, elemen
adalah nenek moyang dari semua tag yang dikandungnya:,
, ,
Keturunan- elemen yang terletak di dalam satu atau lebih jenis elemen. Sebagai contoh,
adalah keturunan , dan elemenApakah anak dari keduanya?
Dan .elemen induk- elemen yang terkait dengan elemen lain dari tingkat yang lebih rendah, dan terletak di pohon di atasnya. Gambar 1
Dan . MenandaiApakah orang tua hanya untuk .
elemen anak- elemen yang secara langsung berada di bawah elemen lain level tinggi. Pada gambar 1, hanya elemen
, ,
DAN
elemen saudara perempuan- elemen yang memiliki elemen induk yang sama dengan elemen yang dipertimbangkan, yang disebut elemen dengan level yang sama. Gambar 1
Dan - elemen dari level yang sama, serta elemen , Dan
Mereka bersaudara satu sama lain.
1.1. Elemen
1.2. Elemen
Bab
... berisi informasi teknis tentang halaman: judul, deskripsi, kata kunci untuk mesin pencari, pengkodean, dll. Informasi yang dimasukkan di dalamnya tidak ditampilkan di jendela browser, tetapi berisi data yang memberi tahu browser cara memproses halaman.1.2.1. Elemen </h4>
<p>Tag bagian yang diperlukan <head>adalah tag <title>. Teks yang ditempatkan di dalam tag ini ditampilkan di bilah judul browser web. Panjang judul tidak boleh lebih dari 60 karakter agar benar-benar pas dengan judul. Teks judul harus berisi deskripsi paling lengkap dari konten halaman web.</p>
<h4>1.2.2. Elemen <meta></h4>
<p>Tag bagian opsional <head>adalah satu tag <meta>. Dengan itu, Anda dapat mengatur deskripsi konten halaman dan kata kunci untuk mesin pencari, penulis dokumen HTML, dan properti metadata lainnya. Elemen <head>dapat berisi banyak elemen <meta>, karena tergantung pada atribut yang digunakan, mereka membawa informasi yang berbeda.</p><p>
<meta name="description" content="Deskripsi konten halaman">
<meta name="keywords" content="Kata kunci dipisahkan dengan koma">
</p><p>Deskripsi konten halaman dan kata kunci dapat ditentukan secara bersamaan dalam beberapa bahasa, misalnya, dalam bahasa Rusia dan Inggris:</p><p>
<meta name="description" lang="ru" content="Deskripsi konten halaman">
<meta name="description" lang="en" content="Keterangan">
<meta name="keywords" lang="ru" content="Kata kunci dipisahkan dengan koma">
<meta name="keywords" lang="en" content="kata kunci">
</p><p>Dengan tanda <meta>Anda dapat menonaktifkan atau mengizinkan pengindeksan halaman web oleh mesin pencari:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Untuk memuat ulang halaman secara otomatis setelah jangka waktu tertentu, Anda perlu menggunakan nilai refresh:</p><p>
<meta content="30">
</p><p>Halaman akan dimuat ulang dalam 30 detik. Untuk mengarahkan pengunjung ke halaman lain, Anda perlu menentukan URL di parameter url:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">Tabel 2. Atribut tag <meta>
<tbody><tr><th style="width: 20%;">Atribut</th>
<th></th>
</tr><tr><td>rangkaian karakter</td>
<td>Menentukan pengkodean karakter untuk dokumen HTML saat ini: <meta charset="UTF-8">
</td>
</tr><tr><td>isi</td>
<td>Berisi teks arbitrer yang menentukan nilai yang terkait dengan http-equiv atau atribut nama, bergantung pada nilainya.</td>
</tr><tr><td>http-setara</td>
<td>Mengontrol tindakan browser pada halaman web ini (setara dengan header HTTP). Saat menampilkan halaman, browser akan mengikuti instruksi yang diberikan dalam atribut: <br>default-style menentukan gaya yang disukai untuk digunakan pada halaman. Atribut konten harus berisi id elemen <link>, yang mengacu pada lembar gaya CSS, atau ID elemen<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
menggunakan elemen . Elemen tidak memerlukan tag penutup. Elemen ini mendefinisikan hubungan antara halaman saat ini dan dokumen lainnya. Mungkin ada beberapa elemen seperti itu di halaman. Entri akan terlihat seperti ini:
| Atribut | Deskripsi, nilai yang diterima |
|---|---|
| lintas asal | Menentukan apakah CORS (teknologi browser yang memungkinkan halaman web mengakses sumber daya dari domain lain) harus digunakan saat mengambil gambar dari situs. anonim - dalam permintaan lintas domain, browser secara otomatis menambahkan header Asal yang berisi nama domain tempat permintaan dibuat. Jika server tidak merespons dengan header CORS Access-Control-Allow-Origin: * (atau nama domain alih-alih tanda bintang), maka gambar akan diblokir dari pemuatan. use-credentials - jika server tidak memberikan kredensial dengan Access-Control-Allow-Credentials: true , maka gambar akan diblokir agar tidak dimuat. |
| href | Atribut utama dari tag, nilainya adalah jalur ke file dengan gaya. |
| hreflang | Menentukan bahasa teks dalam dokumen tertaut. |
| media | Menentukan jenis perangkat yang sumber tautannya akan diterapkan. |
| tidak pernah | Variabel string yang dibuat secara acak di sisi server yang menetapkan aturan untuk menggunakan gaya sebaris untuk melindungi konten. Nilai atribut adalah string teks. |
| rel | Atribut mendefinisikan hubungan antara dokumen saat ini dan dokumen yang direferensikan. alternatif - tautan ke dokumen yang sama tetapi dalam format yang berbeda (misalnya, halaman yang dapat dicetak, terjemahan, cermin, umpan RSS atau Atom), . arsip menunjukkan bahwa dokumen terkait adalah kepentingan sejarah. Tautan dapat mengarah ke kumpulan catatan, dokumen, dan materi lainnya. penulis link ke halaman tentang penulis dokumen atau ke halaman dengan rincian kontak penulis. bookmark Sebuah referensi ke nenek moyang terdekat dari artikel yang link, atau ke bagian artikel yang paling erat kaitannya dengan elemen jika tidak ada nenek moyang. eksternal digunakan untuk menunjukkan bahwa halaman tertaut bukan bagian dari situs ini. pertama menentukan tautan ke dokumen pertama dalam urutan dokumen. link bantuan ke dokumen bantuan. icon menentukan jalur ke ikon yang akan digunakan untuk dokumen saat ini. last menentukan tautan ke dokumen terakhir dalam urutan dokumen. lisensi Tautan ke informasi hak cipta untuk dokumen tersebut. next menunjukkan bahwa dokumen ini adalah bagian dari suatu rangkaian, dan bahwa tautan tersebut menunjuk ke dokumen berikutnya dalam rangkaian tersebut. nofollow menunjukkan bahwa tautan tersebut tidak disetujui oleh pembuat halaman, atau bahwa tautan tersebut komersial. noreferrer menetapkan bahwa header permintaan klien yang berisi url sumber permintaan tidak boleh diteruskan saat mengikuti tautan. pingback menentukan alamat server pingback, yang memungkinkan blog untuk secara otomatis memberi tahu situs yang menautkannya. prefetch menentukan bahwa file yang direferensikan harus di-cache terlebih dahulu. prev menunjukkan bahwa dokumen ini adalah bagian dari seri dan tautannya mengarah ke dokumen sebelumnya dalam seri. pencarian menunjukkan bahwa dokumen yang direferensikan berisi antarmuka pencarian dan sumber daya terkait. sidebar menunjukkan bahwa dokumen yang ditautkan, jika memungkinkan, akan ditampilkan dalam konteks browser tambahan, dan beberapa browser, ketika hyperlink diklik, akan membuka jendela untuk menambahkan link ke bilah bookmark. stylesheet adalah referensi ke file eksternal yang akan digunakan sebagai style sheet untuk dokumen ini. tag menunjukkan bahwa tag yang mengarah hyperlink milik dokumen ini. up menunjukkan bahwa halaman tersebut adalah bagian dari struktur hierarki, dan bahwa hyperlink mengarah ke sumber daya tingkat yang lebih tinggi dalam struktur tersebut. |
| ukuran | Menentukan ukuran ikon untuk tampilan visual. Atribut ukuran hanya digunakan bersama dengan rel="icon" , dan dapat mengambil nilai berikut: lebar tinggi - menentukan daftar ukuran yang dipisahkan oleh spasi, setiap ukuran harus dalam format - tinggi lebar (ukuran ikon ditentukan dalam piksel), misalnya: ; any - ikon dapat diskalakan ke berbagai ukuran. |
| judul | Menentukan judul tautan atau nama kumpulan lembar gaya alternatif. Nilai atributnya adalah teks. |
| Tipe | Menentukan tipe MIME dari dokumen yang ditautkan. Dalam hal ini, dibutuhkan nilai "text/css" . |
