☰ Mundarija · Informatika

Web-sahifalar orasidagi aloqalar. Nazorat ishi

Darslar 25–26 · 2 ta dars · N. I. Taylaqov (umumiy muharrir), A. B. Axmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatika va axborot texnologiyalari, 11-sinf, 1-nashr. «Extremum-press», Toshkent, 2018
25

Web-sahifalar orasida aloqalarni o‘rnatish imkoniyatlari

Darslik: 87–89-betlar
MaqsadGiperhavola turlarini (nisbiy, absolyut, sahifa ichidagi, pochta) farqlaydi, <a> elementi bilan menyu va havolalar yaratadi va havolalarni xavfsiz joylashtiradi.
Yangi so‘zlar
giperhavola · hyperlink: a part of a page that opens another page, file or place when clickednisbiy manzil · relative address: the path to a file counted from the current pageanchor (langar) · anchor: a place in a page marked with id so a link can jump to itrel="noopener" · an attribute for links that open in a new tab; it stops the new page from controlling the old one
Tushuntirish

Web-saytni ko‘p sahifalardan bir butun qiladigan narsa – giperhavola. U <a> (anchor) elementi bilan yoziladi, href attributida esa manzil turadi. Absolyut manzil to‘liq yoziladi (https://example.com/maktab) va boshqa saytga olib boradi. Nisbiy manzil joriy sahifaga nisbatan yoziladi: «fizika.html» – shu papkadagi fayl, «fanlar/fizika.html» – ichki papkadagi fayl, «../index.html» – bir daraja yuqoridagi fayl. Saytingizni boshqa serverga ko‘chirganda nisbiy manzillar o‘zgarmay ishlaydi, shuning uchun ichki sahifalar uchun ular qulay. Sahifa ichida sakrash uchun elementga id beriladi (<h2 id="aloqa">), havola esa href="#aloqa" bo‘ladi. «mailto:» bilan boshlangan havola elektron pochta dasturini ochadi. target="_blank" havolani yangi yorliqda ochadi; bunda rel="noopener" yozish xavfsizroq. Menyu odatda <nav> ichida havolalar ro‘yxati sifatida yoziladi. Yaxshi havola matni nima ochilishini aytadi: «Fizika darsliklari» yaxshi, «bu yerni bosing» yomon, chunki ekranni o‘qiydigan dastur havolalarni ro‘yxat sifatida o‘qiydi. Havolalar vaqt o‘tishi bilan «sinishi» (404) mumkin, shuning uchun ularni tekshirib turing. Xavfsizlik: noma’lum xabardagi qisqartirilgan yoki g‘alati havolani bosmang; matnda ko‘ringan manzil va haqiqiy href har xil bo‘lishi mumkin (fishing). Saytingizga begonalarni aldaydigan havola qo‘ymang.

Namunalar
Menyu va havolalar sahifasi: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎  <meta charset="utf-8"> ⏎  <title>Mening maktabim</title> ⏎ </head> ⏎ <body> ⏎  <nav> ⏎    <a href="index.html">Bosh sahifa</a> | ⏎    <a href="fanlar/fizika.html">Fizika</a> | ⏎    <a href="#aloqa">Aloqa</a> ⏎  </nav> ⏎  <h1 id="tepa">Maktabim haqida</h1> ⏎  <p>Batafsil: <a href="https://example.com/maktab" target="_blank" rel="noopener">tashqi sayt</a>.</p> ⏎  <h2 id="aloqa">Aloqa</h2> ⏎  <p><a href="mailto:info@example.com">Xat yozish</a> · <a href="#tepa">Yuqoriga</a></p> ⏎ </body> ⏎ </html> «Aloqa» havolasi sahifaning pastidagi id="aloqa" bo‘limiga sakratadi, «Yuqoriga» esa tepaga qaytaradi.
Nisbiy manzil: joriy sahifa «sayt/fanlar/fizika.html» bo‘lsa, «sayt/index.html» ga «../index.html» yo‘l olib boradi, «sayt/fanlar/kimyo.html» ga esa oddiygina «kimyo.html» boradi.
Sinfda faoliyat

Uch sahifali kichik sayt (bosh, haqida, aloqa) tuzing: har bir sahifada bir xil menyu bo‘lsin. Sinfdosh havolalarni bosib chiqib, «singan» yoki noqulay matnli havolalarni topsin.

Mashq
1
Sahifada «galereya» papkasidagi «rasm1.html» fayliga havola yozing (matni: Rasm).
2
«sayt/fanlar/fizika.html» sahifasidan «sayt/bosh.html» ga nisbiy manzilni yozing.
3
Nima uchun «bu yerni bosing» havola matni yomon?
4
Noma’lum xabardagi qisqartirilgan havolani bosishdan oldin nima qilish kerak?