سالام ئوقۇرمەن!
بىز قوللانمىمىزنىڭ دەسلەپكى باسقۇچلىرىدا HTML بەت قۇرۇلمىسىنى تونۇشتۇرۇپ، head
ۋە body
خەتكۈچلىرى، يىلتىز-خەتكۈچ بولغان html
خەتكۈچىنىڭ بىۋاستە بالا خەتكۈچى بولۇپ بىر بەتنى تەشكىللەيدىغانلىقىنى تەكىتلىگەن ئىدۇق. ۋە شۇنداقلا، توربەت يۈزىدە بىۋاستە كۆرسىتىلىدىغان مەزمۇن، body
ئىلىمىنتنىڭ ئىچىگە جايلاشقان ئىلىمىنتلار بولىدىغانلىقى ئۈچۈن، ئوقۇرمەنلەرگە ئەمەلىي مەشغۇلاتچانلىقى تېخىمۇ كۈچلۈكرەك بولۇشۇنى كۆزدە تۇتۇپ، head
ئىلىمىنتىغا مۇناسىۋەتلىك مەزمۇنلاردىن ۋاقتىنچە ئاتلاپ ئۆتۈپ كەتكەن ئىدۇق. بۈگۈن بىز ئەنە شۇ head
ئىلىمىنتى بىلەن بىر قۇر تونۇشۇپ چىقايلى.
ئالدىنقى بىر نەچچە قىسىملاردا body
ئىلىمىنتىنىڭ ئىچىگە ئورۇنلاشقان ئىلىمىنتلارنى بىر قۇر تونۇشتۇرۇپ بولغانلىقىمىز ئۈچۈن، بۈگۈن بەت قۇرۇلمىسىدىكى يەنە بىر مۇھىم بولغان ئەزا ھىسابلانغان head
ئىلىمىنتىنى چۈشۈنۈشىمىز تېخىمۇ ئاسانغا توختشىغا ئىشەنچىم كامىل.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
01
head بۆلىكىنىڭ رولى ۋە مۇھىم ئەزا ئىلىمنتلار
ئادەتتە <head>
ئېلېمېنتىنىڭ نىڭ ئىچىدە، بىز تور بەتنى قۇرۇپ چىقىشتا زۆرۈر بولغان ئىلىمىنتلارنى ئورۇنلاشتۇرىمىز. مەسىلەن، بەت ماۋزۇسى، مېتا سانلىق مەلۇماتلار، ئىچكى ياكى تاشقى CSS ۋە ياكى JavaScript كودى ۋە ئۇلانمىلىرى دېگەندەك. بۇ مەزمۇنلارنىڭ كۆپىنچىسى بەت يۈزىدە بىۋاسىتە كۆرۈنمەستىن، بەلكى توركۆرگۈچلەرنىڭ مۇشۇ بەتنى توغرا كۆرسىتىپ بېرىشىگە ياردەم بېرىدۇ. ئەگەر سىزنىڭ HTML كودىڭىزدا head
ئىلىمىنتى بولمىغان تەقتىردە، توركۆرگۈچلەر ئاپتوماتىك ھالدا head
ئىلىمىنتىدىن بىرنى قۇرۇپ بىرىدۇ.
head
ئىلىمىنتىنىڭ ئۆزىگە خاس ئالاھىدە خاسلىقلىرى يوق بولۇپ، ئاساسلىقى بەت ئۇچۇرلىرىنى ئىپادىلەيدىغان باشقا ئىلىمىنتلارغا «قاپلىما» لىق رولىنى ئۆتەيدۇ خالاس. بۇ قاپلىما بۆلەك ئادەتتە تۆۋەندىكىدەك ئەزا ئىلىمنتلاردىن تەركىپ تىپىشى مۇمكىن.
meta
خەتكۈچى
بۇ خەتكۈچ ئادەتتە ئۈشبۇ توربەتنىڭ مېتا ئۇچۇرلىرىنى ئۆزئىچىگە ئالىدۇ.
بۇ يەردىكى مېتا سانلىق مەلۇمات دىگەن سۆز ئىنگىلىزچە metadata دىن ئىلىنغان بولۇپ، زاغرا تىلىمىزدا، سانلىق مەلۇماتلارنى تەسۋىرلىگۈچى ئۇچۇر دەپ چۈشەنسەك بولىدۇ. مەسىلەن، تور بەتنىڭ ئۆزى ئەمەلىيەتتە سانلىق مەلۇمات، مانا مۇشۇ توربەتنىڭ ئاپتورى ۋە توربەت تىلى دىگەندەك ئۇچۇرلارنى بىز مېتا سانلىق مەلۇماتلار دىسەك بولىدۇ.
title
خەتكۈچى
بۇ خەتكۈچ مۇشۇ توربەتنىڭ ماۋزۇسىنى ئىپادىلەيدۇ. دىققەت قىلىشقا تىگىشلىك يىرى شۇكى، بۇ ماۋزۇ بەت يۈزىدە كۆرۈنمەستىن بەلكى تۆر كۆرگۈچ كۆزنىكىنىڭ ماۋزۇسى ھالىتىدە كۆرسىتىلىدۇ.
base
خەتكۈچى
بۇ خەتكۈچ پۈتۈن بەت يۈزىدىكى نىسپىي ئۇلانمىلىرىنىڭ مۇتلەق ئادرىسىنى ھىساپلاشتىكى باشلىنىش نۇقتىسى بولۇپ، سۈكۈتتىكى قىممىتى دەل زىيارەت قىلىنىۋاتقان بەتنىڭ ئۇلانمىسى بولىدۇ.
مۇتلەق ۋە نىسپىي ئۇلانمىلار، ۋە base
خەتكۈچكە مۇناسىۋەتلىك تېخىمۇ تەپسىلىي مەزمۇنلار قوللانمىمىزنىڭ 6-قىسىمىدا تەپسىلىي چۈشەندۈرۈلگەن.
ShirKhan,公众号:shirkhanيىپەك يولىدىكى HTML ساداسى | 6-قىسىم ئۇلانما ۋە URL
link
خەتكۈچى
بۇ ئىلىمىنتنىڭ رولى، ئۆزى تۇرۇشلۇق توربەت بىلەن سىرتقى مەنبەلەرنىڭ ئۇلانما مۇناسىۋىتىگە ئىنىقلىما بىرىش بولۇپ، كۆپىنچە ھاللاردا سىرتقى پاسونلارنى ئۆزى تۇرۇشلۇق بەتكە «ئۇلاش» ئۈچۈن ئىشلىتىلىدۇ.
<link href="example.css" rel="stylesheet">
example.css
دىگەن پاسون ھۆججىتىنىڭ بۇ بەت بىلەن بولغان مۇناسىۋىتى دەل rel
خاسلىقى (relationship) تەسۋىرلىگەن پاسون (يەنى stylesheet) دۇر. پاسونلارنى بەت يۈزىگە قىستۇرۇش ئۇسۇللىرى توغرىسىدا بۇ يازمىنىڭ ئاخىرقى بۆلىكىدە تەپسىلىي توختۇلىمىز. script
خەتكۈچى
بۇ خەتكۈچ ئىسمىدىن چىقىپ تۇرغىنىدەك، تور بەتكە «قوليازما» تىلىنى قىستۇرۇش ئۈچۈن ئىشلىتىلىدۇ. يەنىمۇ ئىنىقراق قىلىپ ئىيتقاندا، توربەتلەرگە JavaScript كودى قىستۇرۇپ ئىجرا قىلدۇرۇش ئۈچۈن ئىشلىتىلىدۇ.
noscript
خەتكۈچى
بۇ خەتكۈچ قوليازما تىللىرىنى قوللىمايدىغان ياكى قوليازما تىللىرىنىڭ ئىجرا بولۇشىنى توسۇۋەتكەن تور كۆرگۈچلەردە مەلۇم مەزمۇننى كۆرسىتىش ئۈچۈن ئىشلىتىلىدىغان بولۇپ، كۆپىنچە يۇقىرىدىكى script
خەتكۈچى بىلەن بىللە ئىشلىتىلىدۇ.
<script>
console.log('بۇ كود قوليازما تىللىرىنى قوللايدىغان تور كۆرگۈچلەردە ئىجرا بولىدۇ')
</script>
<noscript>
بۇ تېكىست قوليازما تىللىرىنى قوللىمايدىغان تور كۆرگۈچلەردە كۆرسىتىلىدۇ
</noscript>
style
خەتكۈچىبۇ خەتكۈچ تور بەتلەرگە ئىچكى پاسون يېزىش ئۈچۈن ئىشلىتىلىدۇ. ئىچكى ۋە تاشقى پاسونلار (يەنى CSS) توغرىسىدا، يازمىنىڭ ئاخىرىدا قىسقىچە تونۇشتۇرۇپ ئۆتىمىز.
template
خەتكۈچى
بۇ «قېلىپ» خەتكۈچى بولۇپ، ئادەتتە توربەتتە بىۋاستە كۆرسىتىلمەستىن، بەلكى JavaScript كودى ئارقىلىق ئەمەلىيلەشتۈرۈلۈپ (instantiate) كۆرسىتىلىدۇ. ھازىرچە بۇ خەتكۈچ ئۈستىدە توختالمايمىز.
02
meta ئىلىمىنتىغا نەزەر
بىز يۇقىرىدا، meta
ئىلىمىنتىنىڭ توربەت مېتا سانلىق مەمۇماتلىرىغا ئىنىقلىما بىرىدىغانلىقىنى تىلغا ئىلىپ ئۆتكەن ئىدۇق. تۆۋەندە بىز بۇ ئىلىمىنت بىلەن يەنىمۇ تەپسىلىيرەك تونۇشۇپ چىقىمىز.
ھەربىر meta
خەتكۈچى توربەتنىڭ بىر تۈرلۈك مېتا ئۇچۇرىنى ئىپادىلەيدىغان بولۇپ، بىز بىر بەتنى كۆپلىگەن meta
خەتكۈچلىرى ئارقىلىق تەسۋىرلىسەك بولىدۇ. تۆۋەندە بىز meta
ئىلىمىنتىنىڭ مۇھىم بولغان بىر قانچە خاسلىقلىرىنى تونۇشتۇرۇپ ئۆتىمىز.
charset
خاسلىقى
بۇ خاسلىق توربەتنىڭ ھەرپ-بەلگە ئىنكودلاش سېستىمىسىغا ئىنىقلىما بىرىدىغان بولۇپ، كۆپىنچە utf-8
قىممىتى تەۋسىيە قىلىنىدۇ. بۇ خاسلىقنى بىز كۆپىنچە تور بەتلەردىكى meta
خەتكۈچىگە بىرەلەيمىز.
<meta charset="utf-8">
name
ۋە content
خاسلىقىبۇ ئىككى خاسلىق بىر meta
خەتكۈچىگە بىرىلىدىغان بولۇپ، بىر تۈرلۈك مېتا سانلىق مەلۇماتنىڭ «نامى» ۋە «مەزمۇنى» دىگەن شەكىلدە كىلىدۇ. شۇڭا بۇ ئىككى خاسلىق بىلەن، بىز خالىغان ئۇچۇرلارنى ئىپادىلەپ توربەتنى تەسۋىرلىيەلەيمىز. مەسىلەن: توربەت مەزمۇنىنىڭ ئاپتورى، مەزمۇن خەتكۈچلىرى، ھالقىلىق سۆزلەر، كۆرۈنمە يۈزى ئۇچۇرلىرى ... دىگەندەك.
<meta name="description" content="HTML Sadasi">
<meta name="keywords" content="HTML, derslik, material">
<meta name="author" content="arsaybeg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="subject" content="your document's subject">
http-equiv
ۋە content
خاسلىقلىرىبۇلار ھەم بىر جۈپ خاسلىقلار بولۇپ، HTTP ئىلتىماسىنىڭ جاۋابىدىكى باش-ئۇچۇرلىرىنى (http response headers) ئۆزگەرتىش ئۈچۈن ئىشلىتىلىدۇ.
بۇ يەردىكى http-equiv
بولسا HTTP باش ئۇچۇرىدىكى خاسلىق نامىنى، content
بولسا ئۆزگەرتمەكچى بولغان خاسلىقنىڭ قىممىتىنى ئىپادىلەيدۇ. بۇ مەزمۇنلارنى تېخىمۇ تەپسىلىي چۈشۈنۈش، ئوقۇرمەنلەردىن HTTP كېلىشىمىسىگە بولغان دەسلەپكى چۈشەنچىنى تەلەپ قىلىدىغان بولغاچقا، بۇ يازمىمىزدا بۇ ئىككى خاسلىق ئۈستىدە تەپسىلىي توختالمايمىز.
ئەمدى ئويلاپ باقايلى: ئەگەر مېتا سانلىق مەلۇماتلار توربەت يۈزىدە كۆرسىتىلمىسە، بىز نىمىشقا ئۇلارنى يەنە HTML كودىغا قىستۇرۇپ قويىمىز ؟
گەرچە meta
ئىلىمىنتلار، ھەتتاكى پۈتۈن head
ئىلىمىنتىنىڭ ئىچىدىكى مەزمۇنلار توربەت يۈزىدە بىۋاستە زىيارەت قىلغۇچىلارغا كۆرسىتىپ بىرىلمىسىمۇ، توركۆرگۈچلەرنىڭ بەت يۈزىدىكى مەزمۇنلارنى ھاسىللىشىغا ۋە ئىزدەش ماتورلىرىنىڭ مەزمۇنلارنى مۇندەرىجىلىشىگە زور ياردىمى بولىدۇ.
بۇ مەزمۇنلارغا قىزىقىدىغان ئوقۇرمەنلەرنىڭ «تور كۆرگۈچ HTML كودىنى قانداق ھاسىللايدۇ»، «ئىزدەش ماتورىنىڭ خىزمەت پىرنسىپى» ۋە «ئىزدەش ماتورىغا قارىتا ئەلالاشتۇرۇش» دىگەن تىمىلار ئۈستىدە ئىزدىنىپ بىقىشىنى ۋە سالونغا ئىنكاس قالدۇرىشىنى سورايمىز.
مۇشۇ يەرگە كەلگەندە، قوللانمىمىزنىڭ HTML ھەققىدە دەسلەپكى چۈشەنچە ھاسىل قىلىش ۋەزىپىسى تامام بولدى دەپ ئويلايمەن. ئەلۋەتتە ھازىرغىچە چۈشەندۈرۈلگەن مەزمۇنلار ئاساسىدا، بىر تور بەت يېزىپ چىقىش تامامەن مۇمكىن. لىكىن ئىشىنىمەنكى، بۇ يېزىپ چىققان بېتىڭىزنىڭ كۆرۈمى ۋە ئىقتىدارى ناھايىتى چەكلىك بولۇپ قالىدۇ. شۇنىڭ ئۈچۈن، توربەتلەرنى يېزىشتا بىز HTML دىن باشقا يەنە CSS ۋە JavaScript قاتارلىق تېخنىكىلارغا تايىنىمىز. ئەلۋەتتە، بۇ ئىككى مەزمۇن ئۈشبۇ قوللانمىمىزغا تەۋە ئەمەس، لىكىن CSS پاسونى ۋە JavaScript كودلىرىنى HTML يۈزىگە قانداق قىستۇرۇش ۋە ئىجرا قىلىش، ئەلۋەتتە قوللانمىمىزنىڭ مەزمۇنلىرىغا تەۋە.
03
تور بەتكە پاسون قىستۇرۇش
تور بەت يۈزىدىكى پاسون دىگىنىمىز CSS نى كۆرسىتىدىغان بولۇپ، ئاساسلىقى توربەتتىكى ئىلىمىنتلارنىڭ قانداق كۆرسىتىلىشىگە ئىنىقلىما بىرىدۇ. بىز بۇ قوللانمىدا پاسونلار ئۈستىدە توختالمايمىز. لىكىن چۈشۈنۈش ئاسان بولسۇن، تۆۋەندىكى كودنىڭ بىر بۆلەك CSS كودى ئىكەنلىكىنى ۋە ئىلىمىنتلارنىڭ خەت رەڭگىنى قىزىل رەڭدە كۆرسىتىپ بىرىدىغان رولى بارلىقىنى بىلىۋالساقلا بولدى.
{
color: red;
}
ئېلىمىنتكە باغلانغان پاسون
بىز قوللانمىمىزنىڭ بۇرۇنقى قىسىملىرىدا تىلغا ئىلىپ ئۆتۈپ كەتكەن ئىلىمىنتلارنىڭ style
خاسلىقى، دەل مۇشۇ خىل ئۇسۇلنى ئىشلىتىپ بىر ئىلىمىنتقا پاسون بىرەلەيدۇ، ھەمدە بۇ پاسون پەقەت مۇشۇ ئىلىمنتقىلا باغلانغان بولىدۇ.
<div style="color: red"> Bu bir qur xet kizil körvnidu. </div>
بۇ head
بۆلىكىگە جايلاشقان style
خەتكۈچىنىڭ ئىچىگە يېزىلىدىغان CSS كودىنى كۆرسىتىدىغان بولۇپ، بىز بۇ خەتكۈچ ئارقىلىق مۇشۇ بەتكە مۇناسىۋەتلىك بارلىق پاسونلارغا ئىنىقلىما بىرەلەيمىز. تەكىتلەشكە تىگىشلىك يىرى شۇكى، style
خەتكۈچى بىلەن style
خاسلىقى بىر ئۇقۇم ئەمەس.
<head>
<style>
body {
background: red;
}
</style>
</head>
بۇ ئۇسۇل دەل بىز تېمىمىزنىڭ دەسلەپكى بۆلىكىدە سۆزلەپ ئۆتۈپ كەتكەن link
خەتكۈچى ئارقىلىق توربەتكە پاسون يۈكلەيدىغان بولۇپ، CSS كودىنى HTML كودىدىن پۈتۈنلەي ئايرىپ چىقىرىپ، كودلارنى تېخىمۇ تەرتىپلىك باشقۇرۇشىمىزغا پايدىسى بار. بۇ ئۇسۇل ئارقىلىق بىز CSS كودىنى ئايرىم بىر ھۆججەتكە يېزىپ ساقلىۋالغاندىن كىيىن، link
ئىلمىنتىنىڭ href
خاسلىقىغا CSS ھۆججىتىنىڭ ئۇلانمىسىنى بەرسەكلا بولىدۇ.
<head>
<link rel="stylesheet" type="text/css" href="pason.css">
</head>
rel
مۇشۇ بەت بىلەن تاشقى ئۇلانغان CSS ھۆججىتىنىڭ مۇناسىۋىتىگە ئىنىقلىما بىرىدۇ، type
بولسا ئۇلانغان ھۆججەتنىڭ ھۆججەت تىپىغا ئىنىقلىما بىرىدۇ.04
توربەتكە JavaScript قىستۇرۇش
JavaScript بولسا توربەت تېخنىكىسىدىكى يەنە بىر مۇھىم قۇتۇپ ھىساپلىنىدۇ. بىز HTML كودىنى توربەتنىڭ ئىسكىلىت قۇرۇلمىسى دىسەك، JavaScript دەل شۇ ئىسكىلىتنى ھەركەتكە كەلتۈرگۈچى مۇسكۇللاردىن ئىبارەت. بىر مۇكەممەل ئىقتىدارى بار توربەت ئەلۋەتتە JavaScript تىن ئايرىلالمايدۇ.
HTML بېتىگە JavaScript قىستۇرۇش ئاساسلىقى script
خەتكۈچىگە تايىنىدىغان بولۇپ، پەقەت ئىچكى كود ۋە تاشقى ئۇلانما JavaScript كودى دىگەندەك پەرقلىرى بار. ئەلۋەتتە، قىسمەن ئەھۋاللاردا، HTML ئىلىمىنتلىرىنىڭ بەزى خاسلىقلىرى بىلەنمۇ JavaScript كودىنى قىستۇرۇپ ئىجرا قىلغىلى بولىدۇ.
script
خەتكۈچى ئارقىلىق قىستۇرۇش
بۇ خەتكۈچ ئارقىلىق بىز تاشقى JavaScript كودىنى قىستۇرالىغاندىن سىرت يەنە بىۋاستە JavaScript كود بۆلىكىنى بەتكە قىستۇرالايمىز.
<script>
// ichiki javascript
console.log('bu ichiki javascript kodi')
</script>
<!-- sirtqiy javavascript kodi -->
<script src="sirtqiy-kod.js" />
بەزى ئەھۋاللاردا بىز ئىلىمىنتلارنىڭ onclick
ۋە onchange
قاتارلىق خاسلىقلىرى ئارقىلىق، مەلۇم ھادىسە ياكى ۋەقە (event) گە قارىتا JavaScript كودىنى قىستۇرۇپ ئىجرا قىلدۇرالايمىز.
<button onclick="console.log('bu konupka chikildi!')"></button>
<input onchange="console.log('bu ramkining mazmuni özgerdi')" />
بۇ قوللانمىمىزنىڭ HTML غا مۇناسىۋەتلىك يازما مەزمۇنلىرى شۇنىڭ بىلەن ئاياغلاشتى، لىكىن، «يىپەك يولى» دىكى باشقا تېخنىكا سادالىرى داۋاملىق ياڭراپ تۇرغۇسى!
كىلەركى قىسىمدىكى خۇلاسە سانىدا كۆرۈشكىچە ئامان بولغايسىلەر.
يازمىدا : ئارسايبەگ
◇ مەخپىي (رەڭلىك تۇخۇم بار)
شىرخان سالونىنى قوللاۋاتقان بارلىق قېرىنداشلارغا چىن دىلىمىزدىن مىننەتدارلىق بىلدۈرىمىز.
بۇ مەزمۇنغا ئائىت مەسىلە، پىكىر تەكلىپلەر بولسا مۇشۇ يازمىغا ئىنكاس شەكلىدە قالدۇرسىڭىز بۇلىدۇ.
مەزمۇن تەييارلىغۇچىغا پىكىر تەكلىپىڭىز بولسا ياكى ياردىمىگە ئېھتىياجلىق بولسىڭىز سالونىمىزغا arsaybeg ۋە ياكى html سۆزىنى يوللاش ئارقىلىق ئاپتۇرنىڭ ئالاقىلىشىش ئۇچۇرىغا ئېرىشەلەيسىز.
ئالدى سۇپا بىلىملىرىنى ئۆگەنگۈچىلەر ئۈچۈن مەخسۇس توپ قۇرۇلدى، ئاپتۇرنى قۇشۇپ تەپسىلاتىنى سۈرۈشتۈرۈڭ ۋە توپقا قۇشۇلۇپ ياردەمگە ئېرىشىڭ، بىلىدىغانلىرىڭىزنى ھەمبەھىرلەڭ، باشقىلارغا ياردەم قىلىڭ.
Scan to Follow
Send to Author