Dembermes

Qaraqalpaq tilindegi bilimlendiriw blogı

Frontend

9-блог: HTML/CSS қалай үйренемиз? / HTML/CSS qalay u'yrenemiz ?

HTML/CSS ҳаққында басланғыш түсиник ҳәм HTML теглерин мысаллар менен үйрениў.

Mehriban K.

HTML яки CSS бул бағдарлама жаратыў ушын қолланылатуғын тил деп билетуғын адамлар көпшилик.

Бирақ, HTML/CSS - бағдарлама/дәстүрлеў тили емес.

"Қалай сонда?" дерсиз. Алысқа кетпейик. HTML дың өзи "Мен программа тили емеспен" деп тур.

HTML бағдарлама тили емес екенин айтып турған сүўрет

HTML деген акронимди толық етип айтсақ Hyper Техт Markup Language болады.

Ол не дегени өзи?

Биринши усы жерде Markup Language деген сөзге итибар берейик.

Markup бул инглизше сөз, русшасына разметка, қарақалпақшасына белгилеў деген мәнисти береди.

Демек, HTML бул гипер текстти белгилеўде қолланылатуғын тил. HTML бул "маркап"/"разметка"/"белгилеў" тили.

(Қарақалпақ тили сабақлығында қалай айтыў қабыл етилгенин билмегеним ушын ҳәммесин қосып айттым. Егер сиз билсеңиз төменде комментке жазып қалдырың.)

Енди сораў туўылади. Гипер текст дегенимиз не онда?

Гипер текст бул сиз көрип турған ҳәр бир веб-бет (русшасына веб-страница, инглизшесине web-page) бул гипер текст документ.

Ҳәзир оқып атырған блог та гипер текст болады. Әпиўайы текст документ бул Word яки Text программасында, яки дәптериңизге жазылған текст.

Ал, гипер текст - қосымша фото, видео, ҳәм силтемелер (линк) менен жазылған болады. Интернеттеги барлық веб-страницалар гипер-текст документ есапланады ҳәм олар HTML жәрдеминде форматланған/белгиленген болады.

HTML нени белгилейди сонда?

Шығарма жазсаңыз кирисиў, тийкарғы бөлими, жуўмақлаўшы бөлими болғанындай, ҳәр бир гипер текст документтиң де сондай қәсийетлери бар.

HTML усы бөлимлерди белгилегенде "tag" (белги, метка) деп аталатуғын форматлаўшы белгилерден пайдаланады.

HTMLди үйрениў бул усы "тег"лерди үйрениў дегени. Ондай қыйын емес.

1. Ең биринши, HTML теглар (яки HTML элементлер) ҳаққында үйренемиз.

<!DOCTYPE html> - документ түрин анықлап беретуғын тек бир рет жазылатуғын тег.

<html> … </html> - гипер тексттиң HTML менен форматланғанын аңлататуғын тег.

Көрип турғаныңыздай, HTML тег ҳәр дайым ашыўшы ҳәм жабыўшы тег пенен белгиленген болады. (Инглизшесине, opening tag ҳәм closing tag)

<head> … </head> - гипер текст бойынша улыўмалық мағлыўматларды өз ишине алатуғын кирисиў бөлими.

<title> … </title> - гипер тексттиң атамасы.

<body> ... </body> - гипер тексттиң мазмунын қурайтуғын бөлими.

<!DOCTYPE html>
<html>
  <body>
    <h1>Menin' qaraqalpaqsha birinshi blogım</h1>
    <p>Sa'lem ha'mmege!</p>
  </body>
</html>

Усы HTML код (коуд) браузерде төмендеги көриниске ийе болады.

HTML кодтың браузердеги көриниси

Жоқарыдағы мысал бул HTML жәрдеминде форматланған/белгиленген әпиўайы гипер текст. Итибар бергениңиздей, ҳәр бир тегтиң жубы бар.

<> </>

<body> </body> теги ишинде төмендеги теглер келиўи мүмкин.

<h1> </h1> тексттиң тақырып бөлими.

Және h2, h3 деген теглер де бар. Бул тақырыптың өлшемин билдиреди.

<h1>Sa'lem!</h1>
<h2>Sa'lem!</h2>
<h3>Sa'lem!</h3>
<h4>Sa'lem!</h4>
<h5>Sa'lem!</h5>
<h6>Sa'lem!</h6>

Жоқарыдағы HTML код браузерде төмендеги көриниске ийе болады.

HTML h1 ден h6 ға шекемги тақырыплар

<p> </p> тексттиң абзацтан басланатуғын бөлимин белгилеўде қолланылады.

<!DOCTYPE html>
<html>
  <body>
    <h1>Qaraqalpaq awılları</h1>
 
    <p>Burınǵı qaraqalpaq awıllarınıń qısta jasaǵan jeri-qıslaw dep ataladı. Qıslawlar qamıstan, jıńǵıldan, sheńgelden islenedi. Olardıń túbi jerge kómilip ortasınan qıspaq buwıladı. Bul qoralar bir qońsı menen ekinshi qońsıniń qoraları bir-birine tutastırilıp úlken qora qılınadı. Onday qora keń kólemdi óz ishine aladı. Olar kóshe-kóshe boladı. Bunday qalıń qońsılasqan awıldı “Bir gúreń awıl” dep ataydı.</p>
 
    <p>Qıslawda qoralardıń ishine qara úyler tigiledi. Qıs ayları awıl adamları usı úylerdiń ishinde ómir keshiredi. Qıstıń qattı ayazlı kúnlerinde qara úydiń ortasındaǵı oshaqqa ot jaǵıladı. Qattı ayaz kúnleri balalar sol oshaqtıń dógereginde boladı. Tún bolǵanda jatar waqta úy ishiniń hámmesi bir kórpege tıǵıladı. Adamnıń demi menen jatqan kórpeniń dógeregine qıraw qatadı. Jas balalardıń kiyimi tek ǵana bir kóylekten ibarat boladı. Túnde kórpede jatqanda kóyleklerin sheship jatadı.</p>
  </body>
</html>
Qaraqalpaq awılları ҳаққындағы HTML бет

<a> </a> Силтемелер (линк) <a> тег пенен белгиленеди.

<!DOCTYPE html>
<html>
  <body>
    <h1>Menin' qaraqalpaqsha birinshi blogım</h1>
    <p>Sa'lem ha'mmege!</p>
    <p>To'mendegi siltemege kirip qosımsha mag'lıwmat penen tanısın'</p>
    <a href="https://kaa.wikipedia.org/wiki/Qaraqalpaq_tili">Qaraqalpaq tili haqqında silteme!</a>
  </body>
</html>
HTML силтемеси бар веб-страница

<img> Сүўретлерди <img> тег пенен белгилеп қосамыз.

<!DOCTYPE html>
<html>
  <body>
    <h1>Menin' qaraqalpaqsha birinshi blogım</h1>
    <p>Sa'lem ha'mmege!</p>
    <p>To'mendegi siltemege kirip qosımsha mag'lıwmat penen tanısın'</p>
    <a href="https://kaa.wikipedia.org/wiki/Qaraqalpaq_tili">Qaraqalpaq tili haqqında silteme!</a>
    <img src="https://sun9-77.userapi.com/impf/c637418/v637418574/54d7d/hmWvDxExnVk.jpg?size=960x639&quality=96&sign=eba06dad61a6a2aba5caf0983d292afd&type=album" style="height:250px;width:400px;" alt="Qaraqalpaq ruwları">
  </body>
</html>
HTML сүўрети бар веб-страница

Буннан басқада билиўиңиз керек болған HTML теглер баршылық.

Веб-страницаны улыўмалық түрде белгилегенде төмендеги теглерден пайдаланамыз.

<html>, <head>, <title>, <body>

Гипер текстти қурайтуғын тийкарғы контентти белгилегенде төмендеги теглерди қолланамыз.

<p>, <a>, <img>, <div>, <table>

Веб-страницаны семантикалиқ түрде форматлағанда төмендеги теглерден пайдаланамыз.

<header>, <footer>, <nav>, <article>, <section>

Сораўнама, анкета сияқлы пайдаланыўшыдан жуўап қабыл еткенде төмендеги теглер жәрдем береди.

<form>, <input>, <button>

2. HTML теглар ҳаққында толық үйренемиз.

Мен HTML теглар ҳаққында дәслепки түсиникти берип өттим. Бирақ бул жеткиликли емес.

Төмендеги линкке кирип HTML ҳаққында толығырақ үйрениўге ҳәрекет етсеңиз жақсы болар еди.

Ҳәмме нәрсени суўдай ишип алыўыңыз зәрүр емес.

Бирақ мен айтып өтпеген нәрселер де бир талай.

Гуглдан HTML туўралы излеп көрсеңиз көп мағлыўмат шығарып береди. Рус тилинде пайдалы оқыўлық қолланбалар көп. Төмендеги силтемеден кирип көрсеңиз, HTML ҳаққында толығырақ түрде үйрене аласыз.

web.dev.learnHTML

HTMLдың қайсы бөлимлерин үйрениўиңиз ҳаққында төмендеги дизимди (силтемелер) таярлап шықтым. Бирме-бир көрип оқып шығың. Дәслепки түсиникке ийе болыў әҳмийетли. Ядлап алыўыңыз шәрт емес.

  1. HTML структурасы ҳаққында
  2. Семантикалық түри туўралы
  3. Бөлимлери ҳаққында
  4. Тег қәсийетлери ҳаққында
  5. Силтемени қалай косыў туўралы

3. Өзлеримиз HTML документ жаратып көремиз.

Қуры үйрене бериўдиң де пайдасы көп емес. Әсиресе, дәстүр/бағдарлама жаратыў бул өзиң кодинг (коудинг) қылып көрип-ғана өсетуғын уқып.

Ядлап, оқып отыра берсең жақсы девелопер бола алмайсаң.

Демек, HTML документ жаратыў ушын нелер керек?

Компьютерде текст жазсақ Word программасы, есап-китап қылсақ Excel, презентация таярласақ PowerPoint программасы керек болғанындай, дәстур жазыў ушын (кодинг (коудинг, coding) қылыў ушын) арнаўлы программаны компьютерге орнатып алыў керек.

Кодинг (коудинг) ушын зәрүр болған программаларды жүклеп, орнатып алыў процесин базыда "дәстүрлеў орталығын орнатыў" деп те атайды. (Инглизшесине, setting up development environment, русшасына настройка среды разработки)

Ҳәзирше, HTML документти жаратыў ушын бир ғана программаны орнатып алсаңыз болады. Менин өзим де усы программадан көп пайдаланаман. VS Code деп аталады. Microsoft компаниясы тәрепинен жаратылған бийпул кодинг ушын программа (code editor).

Сиз де VS Codeти орнатып нағыз девелопер сыпатында кодинг қылып көриўди басласаңыз болады.

VS Codeти қалай орнатыў кереклиги ҳаққында төмендеги блогта түсиндирип өткенмен.

10-блог: Қалай кодинг (коудинг) қылып баслаймыз? / Qalay kouding qılıp baslaymız?

Ал, мына блогта HTML/CSSтан пайдаланып әпиўайы веб-страница жаратыўды көрсетип өттим.

Неге CSS ҳаққында еле түсиндирмедиң?

CSS не екенин дәслепки блогларымниң биринде түсиндирип өткен едим. Сол блогты бир оқып көриң.

CSS та өз алдына тема. Бирақ бир еки нәрсени айтып өтиўим керек.

CSS бул дәстүрлеў тили емес. Ол да HTMLге қусаған маркап/белгилеў тили. Бир парқы ол HTML менен бирге ислетиледи. Ҳәм веб-страницаның интерфейсин безеў де, форматлаў да қолланылады.

Мен негизи вебсайттың дизайнин жаратпайтуғыным себепли CSS ти жүда жақсы билмеймен.

Дизайн, стиль, интерфейс деген нәзик темалар сораўға қойылғаны ушын көбинесе вебсайттың қабығын паблишер/веб-дизайнер деген “усталар” ислеп береди. Олар CSS бойынша терең билимге ийе болады. Базыда фронт-енд дәстүрши де CSS пенен вебсайт интерфейсин жаратыўы мүмкин.

Ҳәр бир IT компанияның ислеў усылы басқаша. Айрымлары өзлериниң веб-паблишер/веб-дизайнери бар.

Мен де өзимниң жеке проектлеримнен басқа Кореядағы жумыста ислеген проектлер ушын веб-дизайн менен шуғылланбағаным себепли CSS туўрали көп билмеймен. Сонда да, керекли фундаментал түсиникке ийемен.

Төмендеги силтемеден кирип CSS бойынша баслаңғыш түсиник алсаңыз болады.

w3schoolsrus.naRusskom.learnCSS

Төмендеги силтемеден кирип көрсеңиз, CSS ҳаққында толығырақ түрде үйрене аласыз.

HTML/CSS жәрдеминде жаратқан биринши кишкене проектимизди төмендеги блогқа кирип, бирге ислеп көрсеңиз болади.

HTML/CSS ти 100% үйренип ғана вебсайт жарата аламан деген нәрсе қәте пикир. Әмелиятта үйренген нәрсе көбирек ядыңда қалады ҳәм тереңрек түсинесең.