Matn teglari va havolalar

Bugun oddiy matnni ma'noli sahifaga va bosiladigan havolaga aylantiramiz

8-sinfWeb Full-stack1-hafta · 3-dars

Bugun nimani o'rganamiz?

Matn teglari

strong, em, mark, sub, sup, kbd, abbr va boshqalar

Havola

a tegi, href, target, rel, title, download

Block va inline

Elementlar sahifada qanday joylashadi

Takrorlash: HTML skeleti

Matn teglari

Matnga ma'no beramiz: muhim, ta'kidlangan, belgilangan

Tegning anatomiyasi

Ma'no yoki ko'rinish?

strong va em

Matn ma'nosini bildiradi: muhim, ta'kidlangan. Ekran o'qish dasturlari ham farqlaydi.

b, i va u

Faqat ko'rinishni o'zgartiradi: qalin, qiyshiq, tagiga chizilgan. Ma'no bermaydi.

Qoida: ma'no uchun strong va em, ko'rinishni keyin CSS boshqaradi. u ni havola bilan adashtirishadi.

Teglar to'rt guruhda

Urg'u

strong, em, mark

Manba

small, abbr, cite, q

Texnik

code, kbd, samp, var

Indeks va qator

sub, sup, br, wbr, span

Chuqurroq bilish uchun pastga ↓

Kam uchraydigan teglar

Teg	Vazifasi	Misol
`<abbr>`	Qisqartma, title izohi bilan	HTML
`<cite>`	Asar nomi, manba	O'tkan kunlar
`<q>`	Qisqa sitata, qo'shtirnoq o'zi chiqadi	Bilim — kuch
`<kbd>`	Klaviatura tugmasi	Ctrl + S
`<samp>`	Dastur chiqargan natija	Xato: 404
`<var>`	O'zgaruvchi nomi	x = 5

Teg nima qiladi? Bosing

mark

bosing

Matnni sariq rang bilan belgilaydi.

kbd

bosing

Klaviatura tugmasini ajratib ko'rsatadi: Ctrl + S.

abbr

bosing

Qisqartma; title ichida to'liq nomi chiqadi.

Matn teglari raqamlarda

matn tegi bor, bugun asosiylarini ko'ramiz

eng muhimi: strong va em

ma'no bermaydigan teglar: b, i, u faqat ko'rinish

Oldin: oddiy matn


<p>Suv formulasi: H2O. Kvadrat: x2.</p>
<p>Saqlash uchun Ctrl + S bosing.</p>

H2O va x2 oddiy raqam bo'lib qoldi.

Keyin: teglar bilan


<p>Suv formulasi: H<sub>2</sub>O. Kvadrat: x<sup>2</sup>.<br>
Saqlash uchun <kbd>Ctrl</kbd> + <kbd>S</kbd> bosing.</p>

sub pastga, sup yuqoriga, kbd tugmani ajratadi, br qatorni uzadi.

Brauzerda natija

matn.html

Suv formulasi: H₂O. Kvadrat: x².
Saqlash uchun Ctrl + S bosing.

DNS — domen nomini IP manzilga aylantiradi.

Alisher Navoiy: Odami ersang, demagil odami.

abbr ustiga kursor olib borsangiz, to'liq nomi chiqadi (title).

a tegi: havola

Internetni «to'r» qilib turgan narsa

Havola anatomiyasi

Havola qayerga olib boradi?

Havolalar kodda


<a href="haqida.html"
   target="_blank"
   rel="noopener noreferrer"
   title="Bizning haqimizda">Haqida</a>
<a href="mailto:[email protected]">Pochta yozish</a>
<a href="#oxiri">Sahifa oxiriga</a>

target="_blank" bilan birga rel="noopener noreferrer" yozing (xavfsizlik).

Havola yozish: qadam-baqadam

1. Tegni oching

Yozing: <a>

2. Manzilni bering

Atribut qo'shing: href="haqida.html"

3. Matn va yopish

Matn yozing va </a> bilan yoping. Yangi tab kerak bo'lsa target va rel qo'shing.

a tegining atributlari

href

manzil, majburiy

target

_blank: yangi tabda

rel

noopener noreferrer

download

faylni yuklab oladi

title ham bor: kursor ustida izoh chiqadi. Nega rel kerak? Pastga ↓

Nega rel kerak?

Yangi tabda ochilgan sayt sizning sahifangizga «qarashi» mumkin. rel buni to'xtatadi.

Qoida oddiy: target="_blank" yozdingizmi, rel ham yozing.
Ikkalasi ham bir tegning ichida, probel bilan ajratiladi.

Nisbiy yo'l: bir papkada

Block va inline

Elementlar sahifada o'zini qanday tutadi

Ikki xil joylashuv

Sinab ko'ring


<p>Birinchi abzats</p>
<p>Ikkinchi abzats</p>
<span>Birinchi span</span>
<span>Ikkinchi span (bir qatorda!)</span>

blok.html

Birinchi abzats

Ikkinchi abzats

Birinchi span Ikkinchi span (bir qatorda!)

Qoida: kim kimning ichida?

Mumkin

Block ichida inline:
<p>Men <a href="#">havola</a></p>

Mumkin emas

p ichida p yoki h1:
<p><h1>Xato</h1></p>

Inline element block ichida turadi, teskarisi emas (p ichida p yo'q).

Odatiy xatolar

Yangi boshlovchilarning eng ko'p qiladigan xatolari

Xato va tuzatish

Xato	To'g'ri
Yopuvchi tegni unutish	Har ochilgan tegga yopuvchi juft
`<b><i>x</b></i>`	`<b><i>x</i></b>`: oxirgi ochilgan birinchi yopiladi
`href=haqida.html`	`href="haqida.html"`: qo'shtirnoq bilan
p ichiga p yoki h1	p ichida faqat inline elementlar

Yana uchta xato: pastga ↓

Yana uchta xato

Sarlavha kattalik uchun

h1 ni matnni kattalashtirish uchun ishlatmang, u mavzuni bildiradi

Fayl nomi

Mening Sahifam.HTML emas, index.html: kichik harf, tire

Surish yo'q

Ichki teglarni 2 probel surib yozing, o'qish oson bo'ladi

Savol-javob

strong va b ning farqi nima?

To'g'ri: strong ma'no beradi (ekran o'qish dasturlari ham farqlaydi), b esa faqat qalin ko'rsatadi.

Savol-javob: havola

Havolani yangi tabda qanday ochamiz?

To'g'ri: target="_blank" yangi tabda ochadi, rel="noopener noreferrer" esa xavfsizlik uchun.

Amaliyot: maqola sahifasi 20 daqiqa

OsonMatn formatlash: strong, mark, sub, sup, kbd

QiyinIkki sahifali mini-sayt: index.html va haqida.html, o'zaro havola va #oxiri

Matn teglari va havolalar

Bugun nimani o'rganamiz?

Matn teglari

Havola

Block va inline

Takrorlash: HTML skeleti

Matn teglari

Tegning anatomiyasi

Ma'no yoki ko'rinish?

strong va em

b, i va u

Teglar to'rt guruhda

Urg'u

Manba

Texnik

Indeks va qator

Kam uchraydigan teglar

Teg nima qiladi? Bosing

mark

kbd

abbr

Matn teglari raqamlarda

Oldin: oddiy matn

Keyin: teglar bilan

Brauzerda natija

a tegi: havola

Havola anatomiyasi

Havola qayerga olib boradi?

Havolalar kodda

Havola yozish: qadam-baqadam

1. Tegni oching

2. Manzilni bering

3. Matn va yopish

a tegining atributlari

href

target

rel

download

Nega rel kerak?

Nisbiy yo'l: bir papkada

Block va inline

Ikki xil joylashuv

Sinab ko'ring

Qoida: kim kimning ichida?

Mumkin

Mumkin emas

Odatiy xatolar

Xato va tuzatish

Yana uchta xato

Sarlavha kattalik uchun

Fayl nomi

Surish yo'q

Savol-javob

Savol-javob: havola

Amaliyot: maqola sahifasi 20 daqiqa

Xulosa

Bugun o'rgandik

Uyga vazifa