Skip to content

Latest commit

 

History

History
206 lines (113 loc) · 19 KB

5.md

File metadata and controls

206 lines (113 loc) · 19 KB

يىپەك يولىدىكى HTML ساداسى | 5-قىسىم

جەدۋەل ۋە رەسىم خەتكۈچلىرى

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

1. جەدۋەل （table）

جەدۋەل بولسا قۇر (row) ۋە ستون (column) شەكىلىدە سانلىق مەلۇماتلارنى كۆرسىتىپ بەرگۈچى ئىلىمىنتلاردۇر. تۆۋەندە جەدۋەلگە مۇناسىۋەتلىك مۇھىم خەتكۈچلەر بىلەن تونۇشۇپ چىقىمىز.

  • table ۋە caption

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

<table>
	<caption> دەرسلىك جەدۋىلى </caption>
</table>
  • thead ۋە tbody ۋە tfoot خەتكۈچلىرى

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

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

  • colgroup ۋە col خەتكۈچلىرى

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

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

  • tr خەتكۈچى

بۇ خەتكۈچ جەدۋەلنىڭ بىر قۇرىنى (table row) ئىپادىلەيدىغان بولۇپ، tbody نىڭ ئىچىگە ياكى بىۋاستە table ئىلىمىنتىنىڭ ئىچىگە قويۇلسىمۇ بولىۋىرىدۇ.

  • th ۋە td خەتكۈچى

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

<table>
  <tr>
    <th>Mal Nami</th><th>Mal Bahasi (RMB/Kg) </th>
  </tr>
  <tr>
    <td>Alma</td><td>3</td>
  </tr>
  <tr>
    <td>Amut</td><td>4</td>
  </tr>
</table>

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

img/th-td.png

  • جەدۋەل كاتەكچە ئىلىمىنتلىرىنىڭ colspan ۋە rowspan خاسلىقى

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

img/colspan.png

colspan نىڭ سۈكۈتتىكى قىممىتى 1 بولۇپ، بىر كاتەكچىنىڭ بىر ستون كەڭلىكى بوشلۇقنى ئىگەللەيدىغانلىقىنى بىلدۈرىدۇ، شۇڭا بىز بىر كاتەكچە ئارقىلىق بىر قانچە ستون كەڭلىكىنى ئىگەللەش ئۈچۈن ئۇلارغا 1 دىن چوڭ بولغان پۈتۈن سان قىممىتىنى بىرىشىمىز كىرەك. يۇقارقى colspan=2 دەل مۇشۇ كاتەكنىڭ ئىككى ستون كەڭلىكىنى ئىگىلەيدىغانلىقىنى بىلدۈرىدۇ. rowspan مۇ ئاساسەن ئوخشاپ كىتىدىغان بولۇپ، 1 دىن چوڭ بولغان قىممەت بىرىلگىنىدە، شۇ كاتەك بىرىلگەن قىممەتكە ئاساسەن ئوخشىمىغان ساندىكى قۇرنىڭ بوشلۇقىنى ئىگىلىگەن بولىدۇ.

img/rowspan.png

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

outstanding-C

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

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

table-homework

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

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

sohu

👆 2000-يىللاردىكى سوخۇ تورىنىڭ كۆرۈنمە يۈزى ( كۆرۈمسىز بولا مۇشۇندا بولا 😂 )

2. رەسىم

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

  • img خەتكۈچى

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

<img src="suret.png">

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

<!-- مۇتلەق ئادرىسى -->
<img src="https://arsay.com/resim.png">

<!-- نىسپىي ئادرىسى -->
<img src="./img/resim.png">

<!--  ئىنكودلانغان رەسىم base64-->
<img src="data:img/jpg;base64,iVBO...CYII=">
  • img خەتكۈچىنىڭ باشقا مۇھىم خاسلىقلىرى
<img 
	src="./img/resim.png" 
	alt="bu bir zinnet resim"
	width="120"
	height="100"
>

  1. alt خاسلىقى - بۇ خاسلىق رەسىمگە تېكىستلىك چۈشەندۈرۈش قوشۇش ئۈچۈن ئىشلىتىلىدىغان بولۇپ، ھەرخىل سەۋەپلەر تۈپەيلى رەسىم بەت يۈزىدە كۆرسىتىلمەي قالغان ئەھۋالدا، رەسىمنىڭ ئورنىغا مۇشۇ تېكىست كۆرسىتىلىدۇ. شۇنداقلا بۇ خاسلىقنىڭ قىممىتى ئىكران ئوقۇغۇچى دىتاللىرىنىڭ بەت يۈزىنى «چۈشۈنۈش» ۋە توغرا ئوقۇپ بىرىشىگە ياردەم بىرىدىغان بولۇپ، تور زىيارەتچانلىقىنى (Web Accessibility / 网页可访问性 ) ئاشۇرۇشتا زور رول ئوينايدۇ.

  2. width ۋە height خاسلىقى - بۇ خاسلىقلارنىڭ ئىسمىدىن چىقىپ تۇرغىنىدەك ئايرىم-ئايرىم ھالدا رەسىمىنىڭ كەڭلىكى ۋە ئىگىزلىكىنى بىكىتىشكە ئىشلىتىلىدۇ، بۇلارنىڭ قىممەت بىرلىكى پىكسىل (pixel) بولۇپ، چوقۇم پۈتۈن سانلىق قىممەت بىرىلىشى كىرەك.

  3. srcset ، sizes خاسلىقلىرى - بۇ قىممەتلەر «ھازىرجاۋاب كۆرۈنمە يۈز لاھىيەسى» ( Responsive Design / 响应式设计 ) ئۈچۈن مۇھىم بولغان خاسلىقلار بولۇپ، رەسىملەرنىڭ ئوخشىمىغان كەڭلىكتىكى ئىكرانلاردا ئىكران كەڭلىكىگە قارىتا ئاپتوماتىك ئەلالاشتۇرۇلۇپ كۆرسىتىلىشىگە زور پايدىسى بار. لىكىن بۇ مەزمۇنلار مەزكۇر قوللانمىنىڭ دائىرىسىدە ئەمەس.

  • ئىككى ئېغىز ئىزاھات

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

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

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

«ھازىرجاۋاب» رەسىملەر - Responsive Images

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

responsive

بىرىنجى تاپشۇرۇقنىڭ پايدىلىنىش كودى

<table>
  <tr>
    <td colspan="2"></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
  </tr>
</table>

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

  • تور بەت يۈزىدىكى ئۇلانمىلار
  • تولدۇرما جەدۋىلى (form)
  • head بۆلىكى (HTML باش بۆلىكى)

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