HTML нима ва биринчи веб-саҳифани қандай яратиш мумкин?

HTML — веб-саҳифадаги сарлавҳа, матн, рўйхат ва бошқа қисмларни белгилайдиган тил. Браузер шу белгиларни ўқиб, саҳифани сизга тушунарли кўринишда чиқаради. Қуйидаги тушунтириш ва намуналар ёрдамида оддий саҳифа тузиб, уни компьютерингизда очиб кўришингиз мумкин.

HTML нима ва у қандай ишлайди?

Сайтдаги мақолани кўз олдингизга келтиринг: тепада сарлавҳа, унинг остида матн, кейин эса керакли буюмлар рўйхати турибди. HTML бу қисмларнинг вазифасини белгилайди. У браузерга қайси ёзув сарлавҳа, қайсиниси оддий хатбоши эканини билдиради. Браузер — интернет саҳифаларини очиб кўрсатадиган дастур.

Буни мактаб дафтарига ўхшатиш мумкин. Мавзу номини алоҳида, тушунтиришни бошқа қаторда, топшириқларни эса рўйхат қилиб ёзасиз. HTML ҳам саҳифа мазмунини шундай тартибга солади. Фақат дафтар ўрнига матнли файл, ёзувларнинг вазифасини ажратиш учун эса махсус белгилар ишлатилади.

HTML одатда дастурлаш тили эмас, белгилаш тили деб аталади. Чунки унинг асосий вазифаси ҳисоблаш ёки шартга қараб буйруқ бажариш эмас, мазмун қисмларини белгилашдир. HTML нима вазифа бажаришини тушуниш учун аввал саҳифанинг ранги ёки безагига эмас, ундаги матн қандай тузилганига қаранг.

Теглар матнга қандай маъно беради?

Тег — бурчакли қавслар орасига ёзиладиган махсус белги. Масалан, <п> хатбошининг бошланишини, </п> эса тугашини билдиради. Уларнинг орасига матн ёзилади: <п>Мен янги саҳифа яратдим.</п>. Браузерда бу ёзувни саҳифа сифатида очсангиз, қавсли белгилар эмас, гапнинг ўзи кўринади.

Очувчи тегни қутининг бошланишига, ёпувчи тегни унинг охирига ўхшатиш мумкин. Ёпувчи тегдаги қия чизиққа эътибор беринг. Бир қисм ичига бошқа қисм ҳам жойлашади: масалан, хатбоши ичидаги муҳим сўз алоҳида белгиланади. Бундай пайтда ичкарида очилган жуфт тег аввал ёпилади.

  • <ҳ1> — саҳифанинг асосий сарлавҳасини белгилайди.
  • <ҳ2> — асосий мавзу ичидаги бўлим сарлавҳаси учун ишлатилади.
  • <п> — алоҳида хатбоши яратади.
  • <ул> — рақамсиз рўйхатни, унинг ичидаги <ли> эса рўйхат бандини белгилайди.
  • <стронг> — мазмуннинг муҳим қисмини ажратади; браузер уни одатда қалин ёзувда кўрсатади.

Тегни фақат ташқи кўриниш учун танламанг. Масалан, ёзувни йириклаштириш мақсадида ҳар бир гапни сарлавҳага айлантириш саҳифа тузилишини чалкаштиради. Сарлавҳа мавзуни номласин, хатбоши эса уни тушунтирсин. Мактаб дарслигидаги бўлимлар тартиби бу фарқни тасаввур қилишга ёрдам беради.

Биринчи веб-саҳифани қандай тузасиз?

Бошлаш учун оддий матн муҳаррири ва браузер етади. Матн муҳаррири — ёзув киритиб, уни файл сифатида сақлайдиган дастур. Янги ҳужжат очинг ва қуйидаги намунани ундаги ҳар бир қаторни алоҳида ёзган ҳолда кўчиринг. Ҳозирча мураккаб безаклар керак эмас.

<!ДОЦТЙПЕ html>
<html ланг=”уз”>
<ҳеад>
<мета чарсет=”УТФ-8″>
<титле>Менинг биринчи саҳифам</титле>
</ҳеад>
<бодй>
<ҳ1>Менинг севимли машғулотим</ҳ1>
<п>Мен бўш вақтимда расм чизишни яхши кўраман.</п>
<ҳ2>Керакли буюмлар</ҳ2>
<ул>
<ли>Қоғоз</ли>
<ли>Рангли қаламлар</ли>
</ул>
</бодй>
</html>

Файлни саҳифа.html номи билан сақланг. Бу ердаги .html — файл кенгайтмаси, яъни унинг турини билдирадиган ном охири. Муҳаррир файл номига яна .тхт қўшмаганини текширинг. Кейин сақланган файлни браузер орқали очинг: сарлавҳа, хатбоши ва буюмлар рўйхати кўриниши керак.

Намунадаги қисмлар нимага керак?

Энг юқоридаги <!ДОЦТЙПЕ html> ёзуви браузерга ҳужжатни HTML қоидалари бўйича кўрсатишни билдиради. <html> саҳифанинг умумий чегарасини белгилайди. Унинг ичидаги <ҳеад> ҳужжат ҳақидаги маълумотлар учун, <бодй> эса саҳифада кўринадиган мазмун учун хизмат қилади. Шу сабаб асосий матнни <бодй> ичига ёзасиз.

<титле> орасидаги ном браузернинг саҳифа ёрлиғида кўринади. Уни саҳифа ичидаги <ҳ1> сарлавҳаси билан адаштирманг: улар турли жойларда чиқади. Намунада биринчиси ҳужжатни танишга ёрдам беради, иккинчиси эса ўқиладиган мавзуни билдиради. Иккаласини ҳам мазмунга мос номласангиз, саҳифани топиш ва тушуниш осонлашади.

ланг=”уз” ёзуви ҳужжат тили ўзбекча эканини билдиради. Тегга шу тарзда қўшиладиган маълумот атрибут деб аталади. УТФ-8 эса белгиларни сақлаш ва ўқиш усулининг номи; намунадаги тег браузерга шу усулни кўрсатади. Бу ёзувларни ҳозирча ўзгартирмай, сарлавҳа ва хатбошилар устида машқ қилишингиз мумкин.

Саҳифа кутилгандек чиқмаса, нимани текширасиз?

Аввал файлни сақлаганингизга қаранг. Муҳаррирдаги ўзгариш сақланмаса, браузер олдинги матнни кўрсатади. Сақлагач, очиқ саҳифани янгиланг. Масалан, машқ учун сарлавҳани бошқа сўзга алмаштиринг: ўзгариш кўринса, керакли файлни таҳрирлаётганингизни биласиз.

Ёзувлар чалкаш кўринса, тегларни текширинг. Очувчи ва ёпувчи белгилар бир-бирига мос келиши, бурчакли қавслар эса тушиб қолмаслиги керак. Кодни қаторларга ажратиб, ички қисмларни бироз ичкаридан ёзиш текширишни осонлаштиради. Браузер айрим хатоларни ўзи тузатиб кўрсатиши мумкин, аммо бунга таяниб қолманг.

Оддий HTML саҳифаси безаксиз кўриниши табиий. Ранг, оралиқ ва жойлашувни бошқаришда одатда ЦСС — саҳифа кўринишини белгилайдиган услублар тили ёрдам беради. Тугма босилганда бирор ҳаракат бажариш каби вазифалар учун эса JavaScript дастурлаш тилидан фойдаланиш мумкин. Дастлаб мазмунни тўғри тузинг, кейин безак ва ҳаракатларни қўшинг.

Қизиқарли фактлар

  • Оддий HTML файлини интернетга жойламасдан ҳам компьютердаги браузерда очиш мумкин.
  • Веб-саҳифанинг коди билан браузерда кўринадиган натижа бир хил кўринишда бўлмайди: теглар мазмунни тартибга солади.
  • HTML кодида кетма-кет босилган оддий бўшлиқлар одатда саҳифада битта бўшлиқ сифатида кўринади.
  • Муҳаррирда янги қаторга ўтишнинг ўзи браузерда янги хатбоши яратмайди; хатбоши учун тег керак.
  • Барча теглар жуфт эмас: масалан, <бр> сатрни узади ва алоҳида ёпувчи тег талаб қилмайди.

Фарқни ўзингиз кузатинг: намунадаги хатбоши ичида бир гапдан кейин янги қаторга ўтиб, яна матн ёзинг ва натижани очинг. Сўнг гапларни алоҳида <п> теглари орасига жойланг. Браузердаги ўзгаришни солиштириш тегнинг вазифасини ёдлашдан кўра тушунарлироқ кўрсатади.

Кўп бериладиган саволлар

HTML ўрганиш учун интернет керакми?

Оддий саҳифа ёзиш ва уни браузерда текшириш учун доимий интернет шарт эмас. Матн муҳаррири ва браузер қурилмангизда бўлса, файлни сақлаб, ўша ернинг ўзида очишингиз мумкин. Интернетдаги расм ёки бошқа ташқи маълумотдан фойдалансангиз, уланиш керак бўлиши мумкин.

Нега саҳифа ўрнига тегларнинг ўзи кўриняпти?

Файл оддий матн сифатида очилган ёки унинг кенгайтмаси нотўғри сақланган бўлиши мумкин. Номи .html билан тугашини ва уни матн муҳарририда эмас, браузерда очганингизни текширинг. Агар тегларни бурчакли қавслар ўрнига уларнинг ёзма белгилари билан киритган бўлсангиз, кодни намунага солиштиринг.

HTML билан чиройли сайт яратиш мумкинми?

HTML сайтнинг мазмуни ва тузилишини яратади, кўринишини батафсил безаш учун эса одатда ЦСС қўшилади. Аввал сарлавҳа, хатбоши ва рўйхатлар ўз вазифасига мос келишига эътибор беринг. Тартибли тузилма кейинги безаш ишини ҳам енгиллаштиради.

Файлни сақласам, саҳифам интернетда ҳаммага кўринадими?

Йўқ, файлни компьютерга сақлаш уни интернетга жойлаш дегани эмас. Бошқалар саҳифангизни интернет орқали очиши учун уни веб-саҳифаларни сақлаб, фойдаланувчиларга етказадиган хизматга жойлаш керак. Дастлабки машқларни эса қурилмангизда сақлаб, бемалол синаб кўришингиз мумкин.