Тез-тез HTML үйренеміз (1-сабақ)

Заманауи Веб Технологиялар /
Алдыңғы жазбаларда HTML мен CSS тақырыбында жазып жүрсем де, көпшілігі түсініп, алып кетпеп еді. Иә ол орынды сияқты, қазір сол жазбаларды өзім оқып қарасам не жазып қойғанымды әзер түсінемін. Тым шашыраңқы жүйесіз жазыппын. Енді бүгіннен бастап жүйелі түрде біртіндеп басынааан бастап жазатын боламын. Неден бастау керек, қалай жазу керек, қалай сақтап, қалай ашу керек соның бәрін шамам келгенше түсінікті тілмен жазып шықпақшымын.

Теория:

HTML дегеніміз не?
HyperText Markup Language қысқартып айтқанда HTML — логикалық белгілеу тілі. Ол әсте бадарламалау тілі емес, ол жәй тек құжаттың қай жері бас, қай жері дене, қайсысы тақырып, қай мәтін қалыңдатылып жазылу керек, т.с.с. белгілеп, қоршауға арналған тіл. W3C консорциумның өнімі, интернеттегі барлық дерлік web құжаттардың негізі болып табылады.
Сенбесеңдер қараңдар, осы айтабер сайтының HTML тегтерін көру үшін браузерде Просмотр код страницы дегенді бассаңыз айтабер сайтының ішеқ қарны ақтарыла қалады.




HTML-тілін 1990 жылы Тим Бернерс-Ли (Tim Berners-Lee) деген ғалым ойлап шығарған. HTML — синтаксисі өте қарапайым, игеруге өте оңай тіл. Қорқатын ештеңесі жоқ.

Тег (tag) дегеніміз не?
Тег — сөзі жалпы белгілеу, ерекшелеу, кілт сөз дегенді білдіреді. HTML тегтері деген сөз HTMLдің белгілеуге арналған кілт көздері дегенді білдіреді. Яғни сіз потс не пікір жазғанда бір сөзді қалыңдатқан кезде белгілеген сөзіңіз
<strong></strong>
тегімен қоршалады. Браузер осы strong тегінің ішіндегі мәтінді қалыңдадып шығарады. Жалпы HTML тілінде жүз отыздай тег бар. Жүз отызының бәрін жаттау керек екен деп шошымаңыз. Оның жартысы қазір қолданыстан алынып тасталған, актуалды емес ескі тегтер болып табылады. Қалғанының жартысы CSSке ауыстырылды. Сондағы қалғаны жаттап алуға тұрарлық шамамен отызшақты тег қалады.

Ең қажетті, құжатта болу міндетті тегтер


Құжатта міндетті түрде мына тегтер болуы керек:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Құжат тақырыбы</title>
    </head>

    <body>
      Негізгі мәтін

     </body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Мына DOCTYPE элементі құжатта міндетті түрде болуы керек. Ол браузерге web бет HTML тілінің қай нұсқасын қолданып жазғаны жайлы хабар береді.

<html></html>
Бұл тег те жазылуы міндетті болмаса да W3C жазылсын деп қатаң ескертеді. Бұл тег браузерге құжаттың қай тілде жазылғанын айтып, жалбы web құжаттың контейнері болып табылады.

<head></head>

head сөзін ағылшын тілінен тіке аударғанда бас дегенді білдіреді. Иә бұл тег веб құжаттың басы. Бұл тегде құжаттағы мәліметтерге, браузерге, ізбеу боттарына қатысты мәліметтер орналасады. Құжатта бұл тегтің болуы міндетті! :) Бұл тегте жазылған мәліметтер (title тегінен басқасы) қолданушыға тікелей көрінбейді.

  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    meta тегі жалпы өзіне көп алып қоятын тегтердің бірі )) бұл тегпен көөөп нәрсені анықтап, жазуа болады. Оларды кейін айтармын, ең бастысы charset=utf-8 деген жері. Яғни құжат utf-8 кодировкасында жазылған деп айтып тұр браузерге. (неге utf-8? utf-8 кодировкасында қазақ тілінде жазу ыңғайлы уооот). Ощм бұл тег head тегінің ішінде орналасады. Басқа жерде емес имынны head тегінің ішінде орналасуы керек.
  • .

    <title>Құжат тақырыбы</title>
    Бұл да head тегінің ішінде орналасатын тег. Бұл тегпен құжаттың тақырыбын жазамыз.

<body>Негізгі мәтін</body>
Бұл тег енді жахсэ тег. Бұл тегтің ішіне не жазссаң, соның бәрі тіке браугерге шығады. Бұл құжаттың жалпы денесі. Осы тегтің ішіне жазатын боламыз барлық нәрсені.

Түсінбедім дегендерге суретпен көрсетейін. HTML құжатты жалпы адам ретінде қарастырсақ, онда былай болады.



Яғни адам
  • адам типі DOCTYPE (гуманойд)
  • Адам түрі html (сүтқоркеті)
  • Адамның басында (head) оның қай тілде сөйлейтіні (meta content=«text/html; charset=utf-8»), хыртым шыртымдары жазылады. Яғни head тегінде жазылған ақпарат не үшін көрінбейді, себебі ол миында жатыр, адамның басындағы миындағы ойындағы ощм басында қандай тарақандары бар екенін біле алмаймыз. (негізі білуге болады ну оны патом)
  • Сосын адам денесі body7 неді ол түсінікші шығар, дене кәдімгі дене. басында жалаңаш болады денесі (епті веб құжаттың денесі) сосын оны біз киіндіріп, әдемілейтін боламыз.

Осы теорияны қорытып алыңдар, келесі посттта HTML құжатты құрып, браузерде ашып үйренеміз

51 пікір

Abylai
әй бооолыңдар тез-тез үйренівалыңдар
Korkem
мынаны жекеде үйретч десем жылайтын шығарсың ғҰәәә
Abylai
үйретем ғүә, қай жерін түсінбедің? келесі постта html құжатты құратын боламыз. күт
banzaika1990
Мынауың керемет болды, мен бірнеше рет оқып ұғып алайын деп жатырм. Сенімен бірге күштілеп үйреніп алу керек.
универда С++ оқығанбыз, ұмытқаппын ужеееее
Abylai
C++ бағдарламалау тілі, мынау жәй логикалық белгілеу тілі. Үйреніп алу өте оңай.
Karakulov
Al magan kerisinwe sol siwarpti yirenu onaiyrak siakti korinp tur minauisimen salistirganda.
banzaika1990
жаңа жазба жазарда шығатын Н4, Н5, Н6 тегтері не үшін арналған осы?????????
Abylai
Ол тақырыпты белгілеуге арналған тегтер. Келесі постта түсінбіремін барлық тегтердің мәнін
banzaika1990
не үшін арналғанын білмесем де олардың тег екенін біліп алдым
Келесі жазбаңды күтеміз
khairbek
келесі жазбада нен бар алы осы жазбананы тусынген жоксын
banzaika1990
жазба жазарда үстінде шығатын ана жазулардың ТЕГ екенін біліп алдым, оның өзі неге тұрады.
khairbek
мынау жүйелі түрде түсіңдіргенің болса былмейм ал, баска мсалдар келырып краш бырат
Abylai
келесі постты күт, оңай негізі (:
Delfina
Абылай-ау мынау кімнің басына қонады десейщ. ))) Студент кезімде осы сабақ болғанда ағайдың үлгіге көрсеткен, жасаған программасын білдіртпей өзіме көшіріп алып, кей жерлерін ғана өзгертіп 5 алатын едім. Қазір тіптен ұмытып қалыппын. Диплом қорғағанда да НТМЛ дан қалай қорғадым екен))))және ұялмай 5 ке қорғап шыққам.))
Abylai
апау үйрену оңай, қорықпаңыз ))) ең оңай тілдердің бірі.
qyrmyzy
Тырысам үйренуге! Бірақ кей сабақтар сияқты жарты жолда қалып қалмаса екен...
khairbek
нені мензеп отырсыз?
qyrmyzy
cіздін сабақ емес, teacher!
khairbek
im not teacher im pupil like you(подобна ты)
qyrmyzy
oo, no! You are my teacher! I`m your pupil
Abylai
қалмайтын шығар
rauan
жақсыыы болды ғой, и так та жақын арада html үйренуге кірісейн деп жатқан едім..Бірақ потошоп сияқты жарты жолда тастап кетпейсің деген ойдамын
Abylai
епті, фотошопты әлі тастаған жоқпын
khairbek
қашан тастайсын?
Abylai
NO. тастамаймын
rauan
Абылай, тағы да басқа лого жасап бешш))
Abylai
ЕПТІІІІІ
rauan
былай қарасам анау лого емес картинка сияқты боп қалыпты и сурет көрінбей тұр ))
kema
agaaaaiiii, kelesi sabakta erterek uige jiberinizshi((((
Abylai
өз оқушыларыңды ертерек жіберер ма едің? )
pari
мынау пайдалы екен. Жалпы азды-кем білетінім бар. Білетінім тоғыз, білмейтінінм тоқсан тоғыз
User
Ой сен мықтысың ғой)
Ak123
уфф кеше ғана материнская плата деген тақырыпқа презентация жасап бас қатырыведім… техникалық мамандыққа оқымайтыным қандай жахсееемынаның басынан соңына дейін оқып шыққан миым ешқандай жерін шымшып ұстай алмад әжеңді аясаңшыощм еңбегіңіз жансын! ерінбей біз үшін жазп шыққаныңыз үшін рақмет!
Abylai
қиын емес, келесі постты оқып шығыңыз
qyrmyzy
Түсіндім!Миым істейді екен ғҮә! Кеттім екіншіге!
khairbek
i know nine i dont know ninety nine депті қоян қасқырға
StrangeR
dont take the apple, but take knowledge қазақша қалай?)
konvict
Әнебір тұрған Садик пе? Не body бар дейсің онда, құдай-ау
Brainkz
Жақсы керемет!!! Берері мол екен…
Тек тіркелген қолданушылар ғана пікір қалдыра алады.