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

كۆپ ئۇچرايدىغان تېكىست خەتكۈچلىرى

• div خەتكۈچى

بۇ خەتكۈچ ئەڭ كەڭ كۆلەمدە ئىشلىتىلىدىغان خەتكۈچلەرنىڭ بىرى بولۇپ، بىر رايوننى (division) ئىپادىلەيدۇ. بۇ خەتكۈچنى تور بەت يۈزىدىكى ھەرقانداق بىر بۆلەك دەرىجىلىك ئىلىمىنت ھالىتىدە ئىشلىتىشكە بولىدۇ.

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

<div class="bet">
  <div class="maqale">
    <div class="mawzu">
      <h1> بۇ بىر ماۋزۇ </h1>
    </div>
  </div>
</div>

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

سېمانتىكىلىق (sementic) دىگەن سۆزنى ئازراق ئىزاھلاپ قويىمەنكى، بۇ شۇ خەتكۈچنىڭ ئىسمىدىنلا جىسمى چىقىپ تۇرىدىغانلىقىنى بىلدۈرىدۇ. يەنى، بىر «ماۋزۇ» (header) ئىلىمىنتىنى div بىلەن ئىپادىلىسە ئۇنىڭ ماۋزۇ ئىكەنلىكىنى چۈشەندۈرۈپ بىرەلمەيدۇ، ئەمما HTML5 تەمىنلىگەن header خەتكۈچى بىلەن ئىپادىلىسە، شۇ بۆلەكنىڭ رولىنىڭ نىمە ئىكەنلىكىنى بىۋاستە ئايدىڭلاشتۇرۇپ بىرەلەيدۇ. شۇڭا يۇقارقى بىر بۆلەك كودنى تۆۋەنكىدىك قۇراشتۇرساق تېخىمۇ چۈشۈنۈشلۈك بولىدۇ.

<main class="bet">
  <article class="maqale">
    <header class="mawzu">
      <h1> بۇ بىر ماۋزۇ </h1>
    </header>
  </article>
</main>

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

• p خەتكۈچى

بۇ خەتكۈچ پاراگراف (paragraf) نىڭ قىسقارتىلمىسى بولۇپ، بىر ئابزاس مەزمۇنغا ۋەكىللىك قىلىدۇ. تېكىستلا ئەمەس ھەرقانداق بىر بۆلەك ھالىتىدە كۆرسىتىلىدىغان مەزمۇنغا مۇشۇ خەتكۈچنى ئىشلىتىش مۇمكىن، مەسىلەن رەسىم ياكى جەدۋەل دىگەندەك. بۇ ئىلىمىنتنىڭ بىر «ناچار» قىلىقى باركى، بۇ ئىلىمىنت بىلەن ئىپادىلەنگەن بۆلەكنىڭ سۈكۈتتىكى ھالەتتە 1em ئۈستى ۋە ئاستى بوشلۇقى (margin) بار، سەللا دىققەت قىلمىغاندا، بەت يۈزىنىڭ كۆرسىتىلىشىگە تەسىر يەتكۈزىشى مۇمكىن.

• span خەتكۈچى

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

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

• br خەتكۈچى

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

• hr خەتكۈچى

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

• pre خەتكۈچى

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

• strong ۋە b خەتكۈچى

بۇ ئىككىلا خەتكۈچ مەلۇم بىر سۆز ياكى بىر بۆلەك تېكستنى قېنىق (bold, 加粗) ھالەتتە كۆرسىتىش ئۈچۈن ئىشلىتىلىدۇ. b بولسا boldface سۆزىنىڭ قىسقارتىلمىسى بولۇپ، پەقەت پاسوننىلا ئىپادىلەيدۇ، شۇڭا ئادەتتە كىشىلەر تىخېمۇ سېمانتىكىلىق بولغان strong خەتكۈچى ئارقىلىق مەزمۇننى قېنىق كۆرسىتىپ، شۇ مەزمۇنغا «كۈچلەندۈرۈش» ئىلىپ بارىدۇ.

• sub ، var ۋە sup خەتكۈچلىرى

بۇ خەتكۈچلەر كۆپىنچە ماتىماتىكىلىق فورمۇلالارنى ئىپادىلەشكە ئىشلىتىلىدۇ. يەنى تۆۋەندە كۆرسىتىلگىنىدەك، var بىر ئۆزگەرگۈچى مىقدارنى، sub ۋە sup بولسا ئايرىم-ئايرىم ھالدا ئاستى ۋە ئۈستى بۇرجىكىدە كۆرسىتىلىدىغانلىنى بىلدۈرىدۇ.

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

HTML نىڭ MDN دىكى قوللانمىسى

ئىنگىلىزچە: https://developer.mozilla.org/en-US/docs/Web/HTML

خەنزۇچە: https://developer.mozilla.org/zh-CN/docs/Web/HTML

باشقا سېمانتىكىلىق خەتكۈچلەر

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

يەنە بىر كۆرۈشكىچە ئامان بولغايسىلەر. 👋

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

◇ جەدۋەل ۋە رەسىم

◇ URL ۋە ئۇلانما

◇ head بۆلىكى

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

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

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

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