HTML Холбоос /Links/
Бүх вэб хуудас холбоостой байдаг. Холбоос нь нэг вэб хуудаснаас нөгөөд дамжих холболтыг хийж өгдөг.
HTML Холбоос /Hyperlinks/
Холбоос дээр хулгана аваачихад гар болон хувьрах бөгөөд нэг дархад өөр хуудасруу шилжнэ.
Мэдэгдэл: Холбоос нь заавал текст байх албагүй, зураг эсвэл HTML элемент байж болно.
HTML Холбоосын бичиглэл /Syntax/
HTML-д холбоосыг <a> tag-д бичдэг.
<a href="url"> Холбоос текст </a>
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.abcd.mn/">Миний анхны холбоос</a>
</body>
</html>
href атрибутад холбоосны зочлох (http://www.abcd.mn/html) хаягийг зааж өгдөг бөгөөд (Анхны холбоос) текст дээр дархад таны зааж өгсөн хаягт зочлох болно.
Тэмдэглэл: Холбоосны сүүлийн slash / бичихгүй байж болно. slash / нь дэд хавтсыг илэрхийлдэг бөгөөд холбоос серверт ачаалахад автоматаар сүүлийн slash / үүсгэж дэд хавтсанд хандах болно.
HTML Local Links
Тухай нэг Вэб сайт өөрийн хуудас хоорон дамжихыг локал холбоос гэж ойлгоно
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<h1>Локал холболт</h1>
<a href="/static/csss/local_link.html">Локал холболт туршилт</a>
<h1>Глобал холболт</h1>
<a href="https://www.alexa.com/topsites/countries/MN" target="_blank">Монголын топ сайтын жагсаалт</a>
</body>
</html>
HTML Холбоос Target атрибут
target атрибут нь холбосон хуудсыг хэрхэн яаж нээхийг зааж өгдөг. Үүнд:
_blank Холбосон хуудсыг шинэ цонх, tab-д нээнэ._self нь анхдагч утга бөгөөд холбосон хуудсыг өөр дээрээ нээнэ._parent вэб хуудсанд frame ашиглах үед parent frame хуудсыг ачаална._top Холбоос хуудсыг цонхонд тухайн цонхонд бүтэн ачаална.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<p>Энгийн холбоос</p>
<a href="http://www.abcd.mn/">Өөр дээрээ ачаална</a>
<p>Шинэ хуудсанд ачаална</p>
<a href="http://www.abcd.mn/" target="_blank">Шинэ хуудсанд ачаална</a>
<p>frame locked байсан ч өөр дээр бүтэн ачаална</p>
<a href="http://www.abcd.mn/" target="_top">Өөр дээрээ бүрэн ачаална</a>
</body>
</html>
HTML Холбоос /Image/
Зургийг холбоос болгон ашиглах нь өргөн хүрээнд хэрэглэгддэг.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.abcd.mn/">
<img src="/static/html.png" alt="HTML хичээл" style="width:250px; height:150px; border:0;">
</a>
</body>
</html>
Тэмдэглэл: border:0; Гэж зааж өгсөн нь Internet Explorer 9 болон түүнээс өмнөх хувьлбарууд автоматаар border авдаг тул утгыг нь 0 гэж зааж өгсөн болно.
Button Холбоос
Button-г холбоос болгох ашиглахад JavaScript код нэмж өгдөг. Button дээр дархад яахыг JavaScript-д тодорхойлж өгдөг.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.location = '/static/csss/local_link.html'">
HTML хилчээл
</button>
</body>
</html>
Тэмдэглэл: JavaScript-ийн талаар илүү ихийг JavaScript сурцгаая А-Я үзээрэй.
Холбоост гарчиг өгч болно
title атрибутад элемтентийн нэмэлт мэдээллийг зааж өгдөг. Хулганаа элемент дээр аваачих үз tooltip текст хэлбэрээр харуулдаг.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.abcd.mn" title="Цахим гарын авлага">
Цахим гарын авллага
</a>
</body>
</html>
HTML Холбоосны өнгө /Link Colors/
Холбоосны анхдагч утга нь бүх хөтөч дээр доорх байдалтай байна.
Холбоос дээр дараагүй буюу зочлоогүй үед цэнхэр өнгөтэй байна.
Холбоос дээр дарагдсан буюу зочилсон үед доогуур зураастай ягаан өнгөтэй байна.
Идэвхтэй үед доогуур зураастай улаан өнгөтэй байна.
Үүнийг бид CSS-ийн тусламжтай хүссэнээрээ өөрчилж болно.
/* Зочлоогүй байх үед */
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
/* Хулгар дарсан буюу зочилсон үед*/
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
/* Хулгар очих үед */
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
/* Хулгар дарж байх үед */
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Холбоосны загварыг өөрчилж button хэлбэртэй болгож болно.
Энэ бол хобоос
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
HTML Холбоос /BookMark/
HTML BookMark нь Вэб хуудасны нэг хэсгээс заасан хэсэг рүү үсрэх боломж өгдөг.
Вэб хуудасны контент хэт урт болсон үед BookMark-г ашиглавал тохиромжтой.
BookMark-г эхэлж үүсгээд дараа нь холбоосыг зааж өгнө.
Холбоос дээр дархад хуудас нь дээш доош заасан байрлалд очих болно.
<h2 id="B4">Бүлэг дөрөв</h2>
Бүлэг дөрөв рүү үсрэх холбоосыг нэмж өгнө.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<a href="B4">Бүлэг 4 үзэх</a>
</body>
</html>
Хуудасны BookMark-г тодорхойлохын тулд id /id="value"/ атрибутыг ашиглаж.
BookMark-г холбохын тулд href /href="#value"/ шинж чанарыг ашиглаж байна.
Сэтгэгдэлүүд
