HTML деген тіл сайттың негізгі құраушысы.

30 Тамыз 2014

Сонымен, HTML деген не? HTML тегі нені білдіреді.

Мен бұл мақаламда HTML дегеннің не екендігіне тоқталып қана қоймай, HTML дің үйренуге қаншалықты жеңіл тіл екендігіне оқырмандардың көздерін жеткізгім келеді.Себебі, бұл тілді үйрену арқылы сіз қалай сайт жасалатынын сәл де болса ұғына аласыз.

HTML дегеніміз-  ағылшынша HyperTextMarkupLanguage, яғни гипертексті таңбалау тілі дегенді білдіреді.Осы тіл арқылы сайттың парақтары жазылады.

Оны ең бірінші болып ашып, әлемге паш еткен интернеттің атасы Тим Бернерс-Ли деген азамат.Ол мұндай тілді ашу үшін сол кезде қолданыста жүрген SGML деген тілді пайдаланған.|

HTML дің ең бірінші нұсқасы 90-шы жылдардың басында пайда болған.Кейін Тим Бернер тілді әркім өз білгендерінше бұрмалап кетпес үшін, сол тілді белгілі бір стандартқа бағындырмақ ниетпен консорциум-құрылым ашқан.Ол W3C( World Wide Web Consortium) деп аталады.

1994 жылы гипертексті таңбалау стандарттарының екінші версиясы әзірленіп, ал 1995 жылы HTML3 версиясы CSS тің сүйемелдеуімен бірге жарық көреді.Одан соң 3.2 кейін 4.0 версиялар пайда болады.

Ал қазір біз 1999 жылы пайда болған HTML дің 4.01 версиясын осы күнге дейін пайдаланып келеміз.

HTML тегі деген не .

Сонымен, HTML тегі дегенді түсіну үшін төмендегі суретке назар салайық, ондағы бұрышты жақшаның ішінде орналасқан бір немесе бірнеше әріптерден тұратын  сөздер сол "тег" дегенді сипаттайды.

Енді бұл тегтердің құрамына көз салайық.Олар ашық- жабық тегтер болып және сыңар тегтер болып екіге бөлінеді.



Енді осы гипертексті тілдің тәсілін пайдаланып, сайт парақшаларын қалай жазу керек екеніне тоқталайық.Оны жазу үшін әрине редактор керек және бұл үшін ең жақсысы Notepad ++ ті пайдалану керек.

HTML, HEAD, TITLE, BODY дегендер нені білдіреді.



Яғни, бұл жердегі <html>,</html>,<head></head>,<title>,</title>,<body>,</body> дегендер де HTML тегі деп аталады.

Бұл жерде жоғарыда айтып өткенімдей - HTML тегтері жұптасқан, яғни ашылатын, жабылатын тегтері бар және жалғыздара тег болып екіге бөлінеді.

<html> - парақшаның басын , ал </html> аяғын білдіреді.

<head> - бұл жерде парақшаның тақырыбы, қанадай кодировкада(кирилица ма әлде басқа тілде) сипаталатыны, жүктелетін басқа комекші программалар тізбегі т.с.сияқтылар жазылады.шаблонның бұл бөлігі сайт бетіне шықпайды.</head>

<body> - бұл тег парақшаның денесі деп аталады яғни бұл жерде HTML тегтерімен не жазылса сол сайт бетінен көрініс табады.</body>

Ал title - бұл сіздің web парақшаңыздың тақырыбы.

Оны да өте мұқият таңдау керек, себебі ол кейін сіз сайтыңызды Іздеу сайттары арқылы интернет бетіне шығарғанда адамдардың назарына тек ілігіп қана қоймай оны осы сіздің сайтыңызға кіретіндей қызығушылығын тудыруы керек.

Бірінші парақшаңыз құтты болсын!

Егер сіз әлі Notepad++ ті өз компьютеріңізге орнатпаған болсаңыз, онда әзірше Блокнотты қолданыңыз.

Төмендегі суреттер арқылы, сіздер HTMLтегі арқылы сіздің жазған сөйлеміңіздің қалай параққа айналғанын көре аласыз.Ол үшін алдыңғы суреттегі жазылғанның бәрін Блокнотқа көшіріп алыңыз да, оны файл қылып сақтап кейін ашыңыз.


 Файлға өзіңіз қалаған атты қойыңыз да, кодировканы міндетті түрде UTF-8 мен сақтап жіберіңіз.Мен мысалы, "меніңПарағым" деп атадым.

Сақтап, компьютерге жазып болған соң оны ашыңыз.

Құттықтаймын, бұл сіздің бірінші парағыңыз, ғаламтор әлеміндегі өз орныңызға жасаған бірінші қадамыңыз.

 

DOCTYPE нені білдіреді.

Енді парақ(немесе документ деп те атайды) бетіндегі осы жоғарыда аталған атауларға тоқталып өтейік.

Төмендегі көрсетілген суреттегі жазылған сөйлем директива деп аталады.Яғни бұл директива бойынша біздің жазған документ алдында айтып кеткенімдей W3C стің стандарттарына бағыну керек.

Басқаша айтқанда әр браузер документті яғни сіздің жазған парақшаңыздың кодтарын осы  W3C стандарттарына сәйкес талқылауы керек.

Негізінде HTML гипертексті тілінің барлық тегтер жиынтығы белгілі бір жүйе бойынша топтастырылып, W3C парақшасында стандарттар ретінде көрсетілген.Яғни, біз қолданатын әр бір тег сол стандарт бойынша жазылуы керек.

Оған көз жеткізгіңіз келсе, осы парақшаға мен көрсеткен сілтеме бойынша кіріп, Web Design and Applications бетінің төменгі жағындағы "Current Status of Specifications"  деген бөлімдегі HTML дің ішіндегі HTML 4.01 Specification ге осы сілтемемен кіріп elements вкладакасын қарап шығыңыз.


Бұл жерде "O"-optional ( қалауыңыз бойынша) , "F" -forbidden (рұқсат етілмейді), "E" -empty (бос), "D" - depricated (қолданбауды ұсынады).

Мысалы, BODY ді алсақ, оның жабық тегін </body> ді жазбай-ақ қоюға болады, себебі қасында "O" тұр.

Бірақ, браузерлер олардың көрсетілген сайттарына кіріп, әр сайттың кодын қадағалап отыруы тіпті ақылға симайтын нәрсе.Сол себепті ешкім бұл үрдісті есепке алмайды, сол себепті  оны ұзын-шұбақ қылмай тек қана "Doctype html" мен шектелуге болады. 

H1, H2, H3, H4, H5, H6, p  не үшін қолданады.

Бұлар да  HTML тегтері деп аталады.Оларды түсіну үшін төмендегі суретке назаз салыңдар.

Мұндағы h1-h6 тақырыптарды белгілеу үшін, ал  p  абзац жазуға арналған.

Яғни, ағылшынша аттары айтып тұрғандай, сол өз мақсаттарында қолданылады."H" деген ағылшынша "Header"деп, яғни қазақша тақырып дегенді білдіреді.Ал "p"- "Paragraph", яғни бізше абзац дегенді білдіреді.

Абзац дегеніміз әлбетте, бір мағына білдіретін бірнеше сөйлемдер жиынтығын сипаттайды.Және де ол сайт парақшасының бетінде бір-бірлерінен бос кеңістік арқылы оқшауланып тұрады.Бұл ерекшелігі сайтты қарап отырған адамды жалықтырмайды деп есептелінеді.

Енді HTML гиперттексті таңбалау тілі арқылы шыққан парақшамызды көрейік, қалай болып шықты екен.

Меніңше бұл жерде р  тегінен басқасының бәрі түсінікті сияқты, себебі  ішіндегі жазғандарымыз төрт орынға жайласуы керек еді.Бірақ, олай болмады, себебі ол р тегінің функциясы осындай. Яғни ол екі тегінің ішіне жазылған сөйлемнің бәрін парақшаның еніне сиғанша толтырып шығады.Ал төрт орынды сөйлемдер жиынтығын алу үшін біз сыңар HTML тегі BR ды қолданамыз. 

Енді осы HTML тегтері арқылы жазылған парақшамызды браузер арқылы көрейік.Нәтижесі төмендегідей.Бұлардың бәрі редактор Notepad++ арқылы жасалып отырғанын естеріңе салып кетейін. 

HTML тегінің атрибуты деген не?

HTML тегінің атрибуты оның қасиеттерін сипаттайды.Төмендегі суретте мен мысалға сайттағы жүктелетін суреттің қасиеттерін, яғни атрибуттарын бейнеледім: ені - 200px, биіктігі - 50px.


HTML атрибуттары үш топқа бөлінеді:

1. Жалпыға бірдей ортақ атрибуттар.Барлығы алтау, оның тек көбіне төртеуі қолданылады: id, class, title, style.

2. Оқиға (событие) атрибуттары.Бұлар javascript кодында қолданылады.Мысалы, менің сайтымдағы әр мақаламның соңында пікір қалдыру деген түйме сондай атрибут арқылы іске қосылады.

3. Жеке өзіндік атрибуттары.Мысалы, <a></a> сілтемеге арналған тегте өзінің  href атрибуты қатар жүреді.

Қазіргі уақытта HTML тегтерінің басым көпшілігінің атрибуттары CSS арқылы сипатталып, жеке стильді файл ретінде HTML парақшасына жүктеледі.Сондықтан, атрибуттың мағынасы CSS ке арналған мақаламда үлкен орын алып сипатталады.


Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер