يىپەك يولىدىكى HTML ساداسى | 9-قىسىم | head بۆلىكى

ShirKhan shirkhan 3/21

Image


سالام ئوقۇرمەن!

بىز قوللانمىمىزنىڭ دەسلەپكى باسقۇچلىرىدا HTML بەت قۇرۇلمىسىنى تونۇشتۇرۇپ، head ۋە body خەتكۈچلىرى، يىلتىز-خەتكۈچ بولغان html خەتكۈچىنىڭ بىۋاستە بالا خەتكۈچى بولۇپ بىر بەتنى تەشكىللەيدىغانلىقىنى تەكىتلىگەن ئىدۇق. ۋە شۇنداقلا، توربەت يۈزىدە بىۋاستە كۆرسىتىلىدىغان مەزمۇن، body ئىلىمىنتنىڭ ئىچىگە جايلاشقان ئىلىمىنتلار بولىدىغانلىقى ئۈچۈن، ئوقۇرمەنلەرگە ئەمەلىي مەشغۇلاتچانلىقى تېخىمۇ كۈچلۈكرەك بولۇشۇنى كۆزدە تۇتۇپ، head ئىلىمىنتىغا مۇناسىۋەتلىك مەزمۇنلاردىن ۋاقتىنچە ئاتلاپ ئۆتۈپ كەتكەن ئىدۇق. بۈگۈن بىز ئەنە شۇ head ئىلىمىنتى بىلەن بىر قۇر تونۇشۇپ چىقايلى.

ئالدىنقى بىر نەچچە قىسىملاردا body ئىلىمىنتىنىڭ ئىچىگە ئورۇنلاشقان ئىلىمىنتلارنى بىر قۇر تونۇشتۇرۇپ بولغانلىقىمىز ئۈچۈن، بۈگۈن بەت قۇرۇلمىسىدىكى يەنە بىر مۇھىم بولغان ئەزا ھىسابلانغان head ئىلىمىنتىنى چۈشۈنۈشىمىز تېخىمۇ ئاسانغا توختشىغا ئىشەنچىم كامىل.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
HTML بەت قۇرۇلمىسىغا مۇناسىۋەتلىك مەزمۇنلارنى ئەسكە ئالالمىغان بولسىڭىز قوللانمىمىزنىڭ ئىككىنجى قىسىمىغا قاراڭ.

01


head بۆلىكىنىڭ رولى ۋە مۇھىم ئەزا ئىلىمنتلار


ئادەتتە <head> ئېلېمېنتىنىڭ نىڭ ئىچىدە، بىز تور بەتنى قۇرۇپ چىقىشتا زۆرۈر بولغان ئىلىمىنتلارنى ئورۇنلاشتۇرىمىز. مەسىلەن، بەت ماۋزۇسى، مېتا سانلىق مەلۇماتلار، ئىچكى ياكى تاشقى CSS ۋە ياكى JavaScript كودى ۋە ئۇلانمىلىرى دېگەندەك. بۇ مەزمۇنلارنىڭ كۆپىنچىسى بەت يۈزىدە بىۋاسىتە كۆرۈنمەستىن، بەلكى توركۆرگۈچلەرنىڭ مۇشۇ بەتنى توغرا كۆرسىتىپ بېرىشىگە ياردەم بېرىدۇ. ئەگەر سىزنىڭ HTML كودىڭىزدا head ئىلىمىنتى بولمىغان تەقتىردە، توركۆرگۈچلەر ئاپتوماتىك ھالدا head ئىلىمىنتىدىن بىرنى قۇرۇپ بىرىدۇ.

head ئىلىمىنتىنىڭ ئۆزىگە خاس ئالاھىدە خاسلىقلىرى يوق بولۇپ، ئاساسلىقى بەت ئۇچۇرلىرىنى ئىپادىلەيدىغان باشقا ئىلىمىنتلارغا «قاپلىما» لىق رولىنى ئۆتەيدۇ خالاس. بۇ قاپلىما بۆلەك ئادەتتە تۆۋەندىكىدەك ئەزا ئىلىمنتلاردىن تەركىپ تىپىشى مۇمكىن.

Image meta خەتكۈچى

بۇ خەتكۈچ ئادەتتە ئۈشبۇ توربەتنىڭ مېتا ئۇچۇرلىرىنى ئۆزئىچىگە ئالىدۇ.

بۇ يەردىكى مېتا سانلىق مەلۇمات دىگەن سۆز ئىنگىلىزچە metadata دىن ئىلىنغان بولۇپ، زاغرا تىلىمىزدا، سانلىق مەلۇماتلارنى تەسۋىرلىگۈچى ئۇچۇر دەپ چۈشەنسەك بولىدۇ. مەسىلەن، تور بەتنىڭ ئۆزى ئەمەلىيەتتە سانلىق مەلۇمات، مانا مۇشۇ توربەتنىڭ ئاپتورى ۋە توربەت تىلى دىگەندەك ئۇچۇرلارنى بىز مېتا سانلىق مەلۇماتلار دىسەك بولىدۇ.

Image title خەتكۈچى

بۇ خەتكۈچ مۇشۇ توربەتنىڭ ماۋزۇسىنى ئىپادىلەيدۇ. دىققەت قىلىشقا تىگىشلىك يىرى شۇكى، بۇ ماۋزۇ بەت يۈزىدە كۆرۈنمەستىن بەلكى تۆر كۆرگۈچ كۆزنىكىنىڭ ماۋزۇسى ھالىتىدە كۆرسىتىلىدۇ.

Image

Image base خەتكۈچى

بۇ خەتكۈچ پۈتۈن بەت يۈزىدىكى نىسپىي ئۇلانمىلىرىنىڭ مۇتلەق ئادرىسىنى ھىساپلاشتىكى باشلىنىش نۇقتىسى بولۇپ، سۈكۈتتىكى قىممىتى دەل زىيارەت قىلىنىۋاتقان بەتنىڭ ئۇلانمىسى بولىدۇ.

مۇتلەق ۋە نىسپىي ئۇلانمىلار، ۋە base خەتكۈچكە مۇناسىۋەتلىك تېخىمۇ تەپسىلىي مەزمۇنلار قوللانمىمىزنىڭ 6-قىسىمىدا تەپسىلىي چۈشەندۈرۈلگەن.

ShirKhan,公众号:shirkhanيىپەك يولىدىكى HTML ساداسى | 6-قىسىم ئۇلانما ۋە URL


Image link خەتكۈچى

بۇ ئىلىمىنتنىڭ رولى، ئۆزى تۇرۇشلۇق توربەت بىلەن سىرتقى مەنبەلەرنىڭ ئۇلانما مۇناسىۋىتىگە ئىنىقلىما بىرىش بولۇپ، كۆپىنچە ھاللاردا سىرتقى پاسونلارنى ئۆزى تۇرۇشلۇق بەتكە «ئۇلاش» ئۈچۈن ئىشلىتىلىدۇ.

<link href="example.css" rel="stylesheet">
مەسىلەن، يۇقارقى example.css دىگەن پاسون ھۆججىتىنىڭ بۇ بەت بىلەن بولغان مۇناسىۋىتى دەل rel خاسلىقى (relationship) تەسۋىرلىگەن پاسون (يەنى stylesheet) دۇر. پاسونلارنى بەت يۈزىگە قىستۇرۇش ئۇسۇللىرى توغرىسىدا بۇ يازمىنىڭ ئاخىرقى بۆلىكىدە تەپسىلىي توختۇلىمىز.

Image script خەتكۈچى

بۇ خەتكۈچ ئىسمىدىن چىقىپ تۇرغىنىدەك، تور بەتكە «قوليازما» تىلىنى قىستۇرۇش ئۈچۈن ئىشلىتىلىدۇ. يەنىمۇ ئىنىقراق قىلىپ ئىيتقاندا، توربەتلەرگە JavaScript كودى قىستۇرۇپ ئىجرا قىلدۇرۇش ئۈچۈن ئىشلىتىلىدۇ.

Image noscript خەتكۈچى

بۇ خەتكۈچ قوليازما تىللىرىنى قوللىمايدىغان ياكى قوليازما تىللىرىنىڭ ئىجرا بولۇشىنى توسۇۋەتكەن تور كۆرگۈچلەردە مەلۇم مەزمۇننى كۆرسىتىش ئۈچۈن ئىشلىتىلىدىغان بولۇپ، كۆپىنچە يۇقىرىدىكى script خەتكۈچى بىلەن بىللە ئىشلىتىلىدۇ.

<script>
console.log('بۇ كود قوليازما تىللىرىنى قوللايدىغان تور كۆرگۈچلەردە ئىجرا بولىدۇ')
</script>

<noscript>
بۇ تېكىست قوليازما تىللىرىنى قوللىمايدىغان تور كۆرگۈچلەردە كۆرسىتىلىدۇ
</noscript>
Image style خەتكۈچى

بۇ خەتكۈچ تور بەتلەرگە ئىچكى پاسون يېزىش ئۈچۈن ئىشلىتىلىدۇ. ئىچكى ۋە تاشقى پاسونلار (يەنى CSS) توغرىسىدا، يازمىنىڭ ئاخىرىدا قىسقىچە تونۇشتۇرۇپ ئۆتىمىز.

Image template خەتكۈچى

بۇ «قېلىپ» خەتكۈچى بولۇپ، ئادەتتە توربەتتە بىۋاستە كۆرسىتىلمەستىن، بەلكى JavaScript كودى ئارقىلىق ئەمەلىيلەشتۈرۈلۈپ (instantiate) كۆرسىتىلىدۇ. ھازىرچە بۇ خەتكۈچ ئۈستىدە توختالمايمىز.

02


meta ئىلىمىنتىغا نەزەر


بىز يۇقىرىدا، meta ئىلىمىنتىنىڭ توربەت مېتا سانلىق مەمۇماتلىرىغا ئىنىقلىما بىرىدىغانلىقىنى تىلغا ئىلىپ ئۆتكەن ئىدۇق. تۆۋەندە بىز بۇ ئىلىمىنت بىلەن يەنىمۇ تەپسىلىيرەك تونۇشۇپ چىقىمىز.

ھەربىر meta خەتكۈچى توربەتنىڭ بىر تۈرلۈك مېتا ئۇچۇرىنى ئىپادىلەيدىغان بولۇپ، بىز بىر بەتنى كۆپلىگەن meta خەتكۈچلىرى ئارقىلىق تەسۋىرلىسەك بولىدۇ. تۆۋەندە بىز meta ئىلىمىنتىنىڭ مۇھىم بولغان بىر قانچە خاسلىقلىرىنى تونۇشتۇرۇپ ئۆتىمىز.

Image charset خاسلىقى

بۇ خاسلىق توربەتنىڭ ھەرپ-بەلگە ئىنكودلاش سېستىمىسىغا ئىنىقلىما بىرىدىغان بولۇپ، كۆپىنچە utf-8 قىممىتى تەۋسىيە قىلىنىدۇ. بۇ خاسلىقنى بىز كۆپىنچە تور بەتلەردىكى meta خەتكۈچىگە بىرەلەيمىز.

<meta charset="utf-8">
Image 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">
Image http-equiv ۋە content خاسلىقلىرى

بۇلار ھەم بىر جۈپ خاسلىقلار بولۇپ، HTTP ئىلتىماسىنىڭ جاۋابىدىكى باش-ئۇچۇرلىرىنى (http response headers) ئۆزگەرتىش ئۈچۈن ئىشلىتىلىدۇ.

بۇ يەردىكى http-equiv بولسا HTTP باش ئۇچۇرىدىكى خاسلىق نامىنى، content بولسا ئۆزگەرتمەكچى بولغان خاسلىقنىڭ قىممىتىنى ئىپادىلەيدۇ. بۇ مەزمۇنلارنى تېخىمۇ تەپسىلىي چۈشۈنۈش، ئوقۇرمەنلەردىن HTTP كېلىشىمىسىگە بولغان دەسلەپكى چۈشەنچىنى تەلەپ قىلىدىغان بولغاچقا، بۇ يازمىمىزدا بۇ ئىككى خاسلىق ئۈستىدە تەپسىلىي توختالمايمىز.

Image ئەمدى ئويلاپ باقايلى: ئەگەر مېتا سانلىق مەلۇماتلار توربەت يۈزىدە كۆرسىتىلمىسە، بىز نىمىشقا ئۇلارنى يەنە HTML كودىغا قىستۇرۇپ قويىمىز ؟

گەرچە meta ئىلىمىنتلار، ھەتتاكى پۈتۈن head ئىلىمىنتىنىڭ ئىچىدىكى مەزمۇنلار توربەت يۈزىدە بىۋاستە زىيارەت قىلغۇچىلارغا كۆرسىتىپ بىرىلمىسىمۇ، توركۆرگۈچلەرنىڭ بەت يۈزىدىكى مەزمۇنلارنى ھاسىللىشىغا ۋە ئىزدەش ماتورلىرىنىڭ مەزمۇنلارنى مۇندەرىجىلىشىگە زور ياردىمى بولىدۇ.

بۇ مەزمۇنلارغا قىزىقىدىغان ئوقۇرمەنلەرنىڭ «تور كۆرگۈچ HTML كودىنى قانداق ھاسىللايدۇ»، «ئىزدەش ماتورىنىڭ خىزمەت پىرنسىپى» ۋە «ئىزدەش ماتورىغا قارىتا ئەلالاشتۇرۇش» دىگەن تىمىلار ئۈستىدە ئىزدىنىپ بىقىشىنى ۋە سالونغا ئىنكاس قالدۇرىشىنى سورايمىز.

مۇشۇ يەرگە كەلگەندە، قوللانمىمىزنىڭ HTML ھەققىدە دەسلەپكى چۈشەنچە ھاسىل قىلىش ۋەزىپىسى تامام بولدى دەپ ئويلايمەن. ئەلۋەتتە ھازىرغىچە چۈشەندۈرۈلگەن مەزمۇنلار ئاساسىدا، بىر تور بەت يېزىپ چىقىش تامامەن مۇمكىن. لىكىن ئىشىنىمەنكى، بۇ يېزىپ چىققان بېتىڭىزنىڭ كۆرۈمى ۋە ئىقتىدارى ناھايىتى چەكلىك بولۇپ قالىدۇ. شۇنىڭ ئۈچۈن، توربەتلەرنى يېزىشتا بىز HTML دىن باشقا يەنە CSS ۋە JavaScript قاتارلىق تېخنىكىلارغا تايىنىمىز. ئەلۋەتتە، بۇ ئىككى مەزمۇن ئۈشبۇ قوللانمىمىزغا تەۋە ئەمەس، لىكىن CSS پاسونى ۋە JavaScript كودلىرىنى HTML يۈزىگە قانداق قىستۇرۇش ۋە ئىجرا قىلىش، ئەلۋەتتە قوللانمىمىزنىڭ مەزمۇنلىرىغا تەۋە.

03


تور بەتكە پاسون قىستۇرۇش


تور بەت يۈزىدىكى پاسون دىگىنىمىز CSS نى كۆرسىتىدىغان بولۇپ، ئاساسلىقى توربەتتىكى ئىلىمىنتلارنىڭ قانداق كۆرسىتىلىشىگە ئىنىقلىما بىرىدۇ. بىز بۇ قوللانمىدا پاسونلار ئۈستىدە توختالمايمىز. لىكىن چۈشۈنۈش ئاسان بولسۇن، تۆۋەندىكى كودنىڭ بىر بۆلەك CSS كودى ئىكەنلىكىنى ۋە ئىلىمىنتلارنىڭ خەت رەڭگىنى قىزىل رەڭدە كۆرسىتىپ بىرىدىغان رولى بارلىقىنى بىلىۋالساقلا بولدى.

{
color: red;
}
HTML خەتكۈچلىرى ئارقىلىق تور بەتكە پاسون قىستۇرۇشنىڭ ئۈچ خىل ئۇسۇلى بار:

Image ئېلىمىنتكە باغلانغان پاسون

بىز قوللانمىمىزنىڭ بۇرۇنقى قىسىملىرىدا تىلغا ئىلىپ ئۆتۈپ كەتكەن ئىلىمىنتلارنىڭ style خاسلىقى، دەل مۇشۇ خىل ئۇسۇلنى ئىشلىتىپ بىر ئىلىمىنتقا پاسون بىرەلەيدۇ، ھەمدە بۇ پاسون پەقەت مۇشۇ ئىلىمنتقىلا باغلانغان بولىدۇ.

<div style="color: red"> Bu bir qur xet kizil körvnidu. </div>
Image بەت ئىچى پاسونى

بۇ head بۆلىكىگە جايلاشقان style خەتكۈچىنىڭ ئىچىگە يېزىلىدىغان CSS كودىنى كۆرسىتىدىغان بولۇپ، بىز بۇ خەتكۈچ ئارقىلىق مۇشۇ بەتكە مۇناسىۋەتلىك بارلىق پاسونلارغا ئىنىقلىما بىرەلەيمىز. تەكىتلەشكە تىگىشلىك يىرى شۇكى، style خەتكۈچى بىلەن style خاسلىقى بىر ئۇقۇم ئەمەس.

<head>
<style>
body {
background: red;
}
</style>
</head>
Image تاشقى پاسون (ئۇلانما پاسون)

بۇ ئۇسۇل دەل بىز تېمىمىزنىڭ دەسلەپكى بۆلىكىدە سۆزلەپ ئۆتۈپ كەتكەن 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 كودىنى قىستۇرۇپ ئىجرا قىلغىلى بولىدۇ.

Image script خەتكۈچى ئارقىلىق قىستۇرۇش

بۇ خەتكۈچ ئارقىلىق بىز تاشقى JavaScript كودىنى قىستۇرالىغاندىن سىرت يەنە بىۋاستە JavaScript كود بۆلىكىنى بەتكە قىستۇرالايمىز.

<script>
// ichiki javascript
console.log('bu ichiki javascript kodi')
</script>

<!-- sirtqiy javavascript kodi -->
<script src="sirtqiy-kod.js" />
Image ئىلىمىنت خاسلىقىغا باغلانغان JavaScript كودى

بەزى ئەھۋاللاردا بىز ئىلىمىنتلارنىڭ onclick ۋە onchange قاتارلىق خاسلىقلىرى ئارقىلىق، مەلۇم ھادىسە ياكى ۋەقە (event) گە قارىتا JavaScript كودىنى قىستۇرۇپ ئىجرا قىلدۇرالايمىز.

<button onclick="console.log('bu konupka chikildi!')"></button>
<input onchange="console.log('bu ramkining mazmuni özgerdi')" />
*JavaScript قا مۇناسىۋەتلىك تېخىمۇ كۆپ مەزمۇنلارغا قىزىقسىڭىز شىرخان سالونىنىڭ ئىلگىركى مەزمۇنلىرىغا مۇراجەت قىلىڭ.

بۇ قوللانمىمىزنىڭ HTML غا مۇناسىۋەتلىك يازما مەزمۇنلىرى شۇنىڭ بىلەن ئاياغلاشتى، لىكىن، «يىپەك يولى» دىكى باشقا تېخنىكا سادالىرى داۋاملىق ياڭراپ تۇرغۇسى!

كىلەركى قىسىمدىكى خۇلاسە سانىدا كۆرۈشكىچە ئامان بولغايسىلەر. Image




يازمىدا :       ئارسايبەگ  

باش نازارەتچى :        شىرخان

كىيىنكى سانلاردىن  ساندىن ئالدىن مەلۇمات

◇ مەخپىي (رەڭلىك تۇخۇم بار)



Image

مەزكۇر يازما ۋە مۇناسىۋەتلىك مەزمۇنلارنى مەنبەسىنى ئەسكەرتىپ تارقىتىشقا بولىدۇ. 

مەزكۇر مەزمۇنلار ھەقسىز، باشقىلارنىڭ ئۆز نامىدا سودا خارەكتېرىدە ئىشلىتىشى ۋە تارقىتىشىغا بولمايدۇ. ئەمگىكىمىزگە ھۆرمەت قىلىڭ.


Image


شىرخان سالونىنى قوللاۋاتقان بارلىق قېرىنداشلارغا چىن دىلىمىزدىن مىننەتدارلىق بىلدۈرىمىز.


بۇ مەزمۇنغا ئائىت مەسىلە، پىكىر تەكلىپلەر بولسا مۇشۇ يازمىغا ئىنكاس شەكلىدە قالدۇرسىڭىز بۇلىدۇ.


مەزمۇن تەييارلىغۇچىغا پىكىر تەكلىپىڭىز بولسا ياكى ياردىمىگە ئېھتىياجلىق بولسىڭىز سالونىمىزغا arsaybeg ۋە ياكى  html سۆزىنى يوللاش ئارقىلىق ئاپتۇرنىڭ ئالاقىلىشىش ئۇچۇرىغا ئېرىشەلەيسىز


ئالدى سۇپا بىلىملىرىنى ئۆگەنگۈچىلەر ئۈچۈن مەخسۇس توپ قۇرۇلدى، ئاپتۇرنى قۇشۇپ تەپسىلاتىنى سۈرۈشتۈرۈڭ ۋە توپقا قۇشۇلۇپ ياردەمگە ئېرىشىڭ، بىلىدىغانلىرىڭىزنى ھەمبەھىرلەڭ، باشقىلارغا ياردەم قىلىڭ.


Image






    收录于话题 #html_بىلىملىرى
    10
    下一篇 يىپەك يولىدىكى HTML ساداسى | 8-قىسىم | تولدۇرما-II

    Scan to Follow