HTML asoslari HTML tilining asosiy qoidalarini, HTML sahifa tuzilishining tavsifini, HTML elementlari orasidagi HTML hujjat tarkibidagi munosabatlarni o'z ichiga oladi.
HTML hujjati normal matnli hujjat, oddiy matn muharriri kabi yaratilishi mumkin (Daftar)va ixtisoslashgan holda, kodni ta'kidlash bilan (Notepad ++, Visual Studio kodi va boshqalar).... HTML hujjati .html kengaytmasiga ega.
HTML hujjati HTML elementlari daraxtidan va matndan iborat. Har bir element asl hujjatda start (ochilish) va tugatish (yopish) yorlig'i bilan belgilanadi (kamdan-kam istisnolardan tashqari).
Boshlang'ich yorlig'i element qaerdan boshlanishini, tugash qaerda tugashini ko'rsatadi. Yakuniy yorliq qiyshiq / yorliq nomidan oldin qo'shish orqali hosil bo'ladi:<имя тега> … ... Boshlanish va tugatish teglari orasida tegning tarkibi - tarkib mavjud.
Bitta teglar to'g'ridan-to'g'ri tarkibni saqlay olmaydi, u atribut qiymati sifatida yoziladi, masalan, teg matnli tugma hosil qiladi Tugma ichida.
Teglar bir-biriga joylashtirilishi mumkin, masalan,
Matn
... Sarmoya kiritishda siz yopilish tartibiga rioya qilishingiz kerak ("matryoshka" printsipi), masalan, quyidagilar noto'g'ri bo'lar edi:Matn
.HTML elementlari atributlarga ega bo'lishi mumkin (global, barcha HTML elementlariga qo'llaniladigan va o'ziga xos). Atributlar elementning ochilish yorlig'ida yoziladi va format \u003d "qiymat" formatida ko'rsatilgan ism va qiymatni o'z ichiga oladi. Xususiyatlar, ular o'rnatiladigan elementning xususiyatlari va xatti-harakatlarini o'zgartirishga imkon beradi.
Har bir elementga bir nechta sinf qiymatlari va faqat bitta id qiymati berilishi mumkin. Bir nechta sinf qiymatlari bo'sh joy bilan ajralib turadi,
Brauzer HTML-hujjatni ko'rib chiqadi (izohlaydi), uning tuzilishini (DOM) tuzadi va uni ushbu faylga kiritilgan ko'rsatmalarga (uslublar jadvallari, skriptlar) muvofiq namoyish etadi. Agar belgilash to'g'ri bo'lsa, u holda brauzer oynasida HTML elementlari - sarlavhalar, jadvallar, rasmlar va boshqalarni o'z ichiga olgan HTML sahifa paydo bo'ladi.
Interpretatsiya jarayoni (tahlil qilish) veb-sahifa brauzerga to'liq yuklanishidan oldin boshlanadi. Brauzerlar HTML-hujjatlarni boshidan boshlab ketma-ket ravishda qayta ishlashadi, shu bilan birga CSS-ni qayta ishlash va uslublar jadvallarini sahifa elementlariga moslashtirish.
HTML hujjati teglar orasidagi ikkita bo'limdan iborat - sarlavha
… va tarkib - teglar orasida ….
Veb-sahifalar tarkibi
1. HTML hujjatning tuzilishi
HTML tili hujjat turini e'lon qilish fayli tarkibidagi qoidalarga amal qiladi (Hujjat turini aniqlash yoki DTD)... DTD - bu ma'lum HTML turi uchun qaysi teglar, atributlar va ularning qiymatlari haqiqiyligini belgilaydigan XML hujjati. Har bir HTML versiyasi o'z DTD-ga ega.
DOCTYPE brauzer tomonidan veb-sahifani to'g'ri ko'rsatishi uchun javobgardir. DOCTYPE nafaqat HTML versiyasini (html kabi), balki Internetdagi tegishli DTD faylini ham belgilaydi.
Teg ichidagi elementlar , deb nomlangan hujjat daraxtini yarating ob'ekt modeli hujjat, DOM (hujjat ob'ekti modeli)... Bundan tashqari, element ildiz elementidir.
Shakl: 1. Veb-sahifaning eng sodda tuzilishi Veb-sahifa elementlarining o'zaro ta'sirini tushunish uchun shunday deb nomlangan narsalarni ko'rib chiqish kerak "Oilaviy munosabatlar" elementlar orasidagi. Bir nechta ichki elementlar o'rtasidagi munosabatlar ota-ona, bola va aka-uka deb tasniflanadi.
Ajdod - boshqa elementlarni o'z ichiga olgan element. 1-rasmda barcha elementlarning ajdodi quyidagicha ... Shu bilan birga, element
tarkibidagi barcha teglar uchun ajdod:,
, ,
Avlod - elementlarning bir yoki bir nechta turlari ichida joylashgan element. Masalan; misol uchun,
avloddir va elementIkkalasining ham avlodi
va .Ota-ona elementi - pastki darajadagi boshqa elementlar bilan bog'langan va ularning ustidagi daraxtda joylashgan element. Shakl 1
va ... TegOta-ona faqat uchun .
Bola elementi - yuqori darajadagi boshqa elementga bevosita bo'ysunadigan element. 1-rasmda faqat elementlar
, ,
VA
Hamshiralik elementi - qarindoshlar deb ataladigan umumiy ota-ona elementi bo'lgan element. Shakl 1
va - bir xil darajadagi elementlar, shuningdek elementlar , va
Ular o'zaro opa-singillardir.
1.1. Element
1.2. Element
Bo'lim
... sahifa haqida texnik ma'lumotlarni o'z ichiga oladi: sarlavha, tavsif, qidiruv tizimlari uchun kalit so'zlar, kodlash va hk. Unga kiritilgan ma'lumotlar brauzer oynasida ko'rsatilmaydi, lekin brauzerga sahifani qanday ishlashini aytib beradigan ma'lumotlarni o'z ichiga oladi.1.2.1. Element </h4>
<p>Kerakli bo'lim yorlig'i <head> bu teg <title> ... Ushbu teg ichiga joylashtirilgan matn veb-brauzerning sarlavha satrida ko'rsatiladi. Sarlavha to'liq mos kelishi uchun sarlavha uzunligi 60 belgidan oshmasligi kerak. Sarlavha matni iloji boricha veb-sahifa tarkibining to'liq tavsifini o'z ichiga olishi kerak.</p>
<h4>1.2.2. Element <meta></h4>
<p>Ixtiyoriy bo'lim yorlig'i <head> bitta teg <meta> ... Uning yordamida sahifa tarkibi tavsifi va qidiruv tizimlari uchun kalit so'zlar, HTML hujjat muallifi va boshqa metama'lumotlar xususiyatlari o'rnatilishi mumkin. Element <head> bir nechta elementlarni o'z ichiga olishi mumkin <meta> chunki ishlatiladigan atributlarga qarab, ular turli xil ma'lumotlarni olib yurishadi.</p><p>
<meta name="description" content="Sahifa tarkibining tavsifi">
<meta name="keywords" content="Vergul bilan ajratilgan kalit so'zlar">
</p><p>Sahifa tarkibi va kalit so'zlarning tavsifi bir vaqtning o'zida bir nechta tillarda, masalan, rus va ingliz tillarida ko'rsatilishi mumkin:</p><p>
<meta name="description" lang="ru" content="Sahifa tarkibining tavsifi">
<meta name="description" lang="en" content="Tavsif">
<meta name="keywords" lang="ru" content="Vergul bilan ajratilgan kalit so'zlar">
<meta name="keywords" lang="en" content="Kalit so'zlar">
</p><p>Tegdan foydalanish <meta> qidiruv tizimlari tomonidan veb-sahifani indeksatsiyalashni taqiqlashingiz yoki ruxsat berishingiz mumkin:</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>Belgilangan vaqtdan so'ng sahifani avtomatik ravishda qayta yuklash uchun yangilanish qiymatidan foydalanishingiz kerak:</p><p>
<meta content="30">
</p><p>Sahifa 30 soniyada qayta yuklanadi. Tashrif buyuruvchini boshqa sahifaga yo'naltirish uchun url parametrida URL manzilini ko'rsatishingiz kerak:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3"> Jadval 2. Tag atributlari <meta>
<tbody><tr><th style="width: 20%;">Xususiyat</th>
<th></th>
</tr><tr><td> charset</td>
<td>Joriy HTML hujjati uchun belgilar kodlashini belgilaydi: <meta charset="UTF-8">
</td>
</tr><tr><td> tarkib</td>
<td>Http-equiv yoki name atributi bilan bog'liq bo'lgan qiymatni belgilaydigan o'zboshimchalik bilan matnni o'z ichiga oladi.</td>
</tr><tr><td> http-equiv</td>
<td>Berilgan veb-sahifadagi brauzer harakatlarini boshqaradi (HTTP sarlavhalariga teng). Sahifani ko'rsatishda brauzer atributda berilgan ko'rsatmalarga amal qiladi: <br> standart uslub sahifada foydalanish uchun afzal uslubni bildiradi. Tarkib atributida element identifikatori bo'lishi kerak <link> bu CSS uslublar jadvaliga yoki element identifikatoriga ishora qiladi<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>
element yordamida ... Element tugatish yorlig'ini talab qilmaydi. Ushbu element joriy sahifa va boshqa hujjatlar o'rtasidagi munosabatni belgilaydi. Sahifada bunday elementlar bir nechta bo'lishi mumkin. Kirish quyidagicha ko'rinadi:
| Xususiyat | Tavsif, qabul qilingan qiymat |
|---|---|
| crossorigin | Saytdan rasm olishda CORS-dan (veb-sahifaga boshqa domendagi manbalarga kirishga imkon beruvchi brauzer texnologiyasi) foydalanish kerakmi yoki yo'qligini belgilaydi. anonim - brauzer Origin-ning sarlavhasini avtomatik ravishda so'rov qilingan domen nomini o'z ichiga olgan domenlararo so'rovga qo'shib qo'yadi. Agar server Access-Control-Allow-Origin: * CORS sarlavhasi (yoki yulduzcha o'rniga domen nomi) bilan javob bermasa, rasm yuklanishi bloklanadi. use-credentials - agar server Access-Control-Allow-Credentials: true-dan foydalangan holda hisob ma'lumotlarini taqdim qilmasa, u holda rasm yuklanishi bloklanadi. |
| href | Tegning asosiy atributi - bu faylga uslublar bilan yo'l. |
| hreflang | Yuborilgan hujjatdagi matn tilini aniqlaydi. |
| ommaviy axborot vositalari | Havola manbai qo'llanilishi kerak bo'lgan qurilmaning turini belgilaydi. |
| nonce | Tarkibni himoya qilish uchun ichki uslublardan foydalanish qoidalarini belgilaydigan serverda tasodifiy hosil qilingan satr o'zgaruvchisi. Atribut qiymati - bu matn qatori. |
| rel | Atribut joriy hujjat va havola qilingan hujjat o'rtasidagi munosabatni belgilaydi. muqobil - bir xil hujjat uchun havola, ammo boshqa formatda (masalan, bosma sahifalar, tarjima, oyna, RSS yoki Atom tasmasi), . arxivlar - havola qilingan hujjat tarixiy ahamiyatga ega ekanligini ko'rsatadi. Havola yozuvlar, hujjatlar va boshqa materiallar to'plamiga ishora qilishi mumkin. muallif bu hujjat muallifi haqidagi sahifaga yoki muallifning aloqa ma'lumotlari ko'rsatilgan sahifaga havola. xatcho'p, havola bo'lgan maqolaning eng yaqin ajdodiga yoki agar ota-ona bo'lmasa, maqola bilan element bilan chambarchas bog'liq bo'lgan qismga ishora qiladi. tashqi ulangan sahifa ushbu saytning bir qismi emasligini ko'rsatish uchun ishlatiladi. avval hujjatlar ketma-ketligida birinchi hujjat bilan bog'lanishni belgilaydi. yordam - hujjatning yordam bilan havolasi. piktogramma joriy hujjat uchun ishlatiladigan piktogramma yo'lini belgilaydi. oxirgi hujjat ketma-ketligidagi so'nggi hujjatga havolani belgilaydi. litsenziya hujjatning mualliflik huquqi to'g'risidagi ma'lumotni anglatadi. keyingi ushbu hujjat seriyaning bir qismi ekanligini va havola seriyadagi keyingi hujjatga olib borishini bildiradi. nofollow havola sahifa muallifi tomonidan tasdiqlanmaganligini yoki havola tijorat xususiyatiga ega ekanligini bildiradi. noreferrer havolani bosish paytida so'rov manbasining urlini o'z ichiga olgan mijoz so'rovining sarlavhasi o'tkazilmasligini bildiradi. pingback pingback serverining manzilini belgilaydi, bu blogga unga bog'langan saytlarni avtomatik ravishda xabardor qilish imkoniyatini yaratadi. prefetch bog'laydigan faylni oldindan keshlash kerakligini belgilaydi. prev ushbu hujjat seriyaning bir qismi ekanligini va havola seriyadagi avvalgi hujjatga ishora qilganligini bildiradi. qidirish havola qilingan hujjatda qidiruv interfeysi va tegishli manbalar mavjudligini bildiradi. yon panel, agar iloji bo'lsa, havola qilingan hujjat qo'shimcha brauzer kontekstida ko'rsatilishini bildiradi va ba'zi brauzerlar giperko'prikni bosganda havolani xatcho'plar satriga qo'shish uchun oynani ochadi. stylesheet - bu hujjat uslubi varag'i sifatida ishlatiladigan tashqi faylga havola. yorliq berilgan hujjat uchun gipermurojaat ko'rsatadigan yorliq ekanligini bildiradi. up sahifa ierarxik tuzilmaning bir qismi ekanligini va gipermurojaat strukturadagi resursning yuqori darajasiga olib borishini bildiradi. |
| o'lchamlari | Vizual ko'rsatish uchun piktogramma hajmini belgilaydi. Registrlar atributi faqat rel \u003d "icon" bilan birgalikda ishlatiladi va quyidagi qiymatlarni qabul qilishi mumkin: kenglik balandligi - bo'shliqlar bilan ajratilgan o'lchamlar ro'yxatini belgilaydi, har bir o'lcham balandlik formatida bo'lishi kerak (balandlik piksel bilan belgilanadi), masalan: ; har qanday - piktogramma istalgan o'lchamga ko'tarilishi mumkin. |
| sarlavha | Havolaning sarlavhasini yoki muqobil uslublar jadvallari to'plamining nomini belgilaydi. Xususiyat qiymati matndir. |
| turi | Havola qilingan hujjatning MIME turini belgilaydi. Bunday holda, u "matn / CSS" qiymatini oladi. |
