2 of 13

��Негізгі HTML құжатының құрылымы��

Кез келген HTML құжатын бірнеше негізгі компоненттерге бөлуге болады:

Head

Біздің сайт туралы мета ақпаратты қамтитын блок . Бұл блоктың деректері тікелей бетте көрсетілмейді, бірақ оны сипаттауға, стильдер мен сценарийлерді қосуға қызмет етеді.

Body

HTML белгілеулері құрастырылатын негізгі орын болып табылады. Бұл блоктағы деректер өңделеді және браузерде көрсетіледі.

3 of 13

HTML5 ішіндегі ең қарапайым белгілеу келесідей:

<!DOCTYPE html>

<head>

<title> Басты бетке арналған</title>

</head>

<body>

<h1> Алғашқы жазбам</h1>

<p>HTML меңгеріп келемін</p>

</body>

</html>

4 of 13

Бірінші жолға назар аударыңыз <!DOCTYPE html>. DOCTYPE (құжат түрі) – өңдеуді қажет ететін HTML стандартын сипаттайтын браузерге арналған сервистік ақпарат. Ағымдағы HTML5 стандартын барлық браузерлер қолдайды, сондықтан құжаттың бірінші жолында құжаттың <!DOCTYPE html> HTML5 стандартына сәйкес белгіленгенін көрсету жеткілікті.

Әрі қарай, жұптастырылған тег <html>атрибутпен ашылады lang="ru". Тілді көрсету браузерлер үшін де қажет, әсіресе сайт жаппай аудиторияға, соның ішінде шетелдегі аудиторияға арналған болса қажет болады.

5 of 13

Оның мағынасын алу үшін сызықты талдауға бөліп көрейік

<meta>

Веб-бет туралы метадеректерді қамтитын HTML тегі немесе нақтырақ айтқанда, іздеу жүйелеріне веб-бетте дисплейден жасырылған мазмұн түрін көрсететін дескрипторлар.

Charset

Веб-сайт мазмұнын көрсету кезінде пайдалану үшін браузеріңіз үшін таңба кодтауын анықтайтын HTML төлсипаты.

utf-8арнайы

Таңбаны кодтау болып табылады.

6 of 13

Неліктен 'utf-8'?

Бүгінгі таңда барлық веб-сайттар UTF-8 пайдаланады. TF-8 стандарт болғанға дейін ASCII қолданылды. Өкінішке орай, ASCII тек ағылшын таңбаларын кодтайды, сондықтан алфавиті ағылшын таңбаларынан тұрмайтын басқа тілдерді пайдалансаңыз, мәтін экранда дұрыс көрсетілмейді.

Осылайша, UTF-8 ASCII кемшіліктерін жою үшін жасалған және әлемдегі барлық дерлік тілдерді аудара алады. Осыған және оның ASCII-мен кері үйлесімділігіне байланысты барлық дерлік браузерлер UTF-8-ді қолдайды.

8 of 13

Мета тегтер

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

Мета тег <meta> HTML веб-бет туралы ақпаратты анықтайды. Топтық тегтер <meta> тегтер деп аталады, ал метатегтің мазмұны метадеректер деп аталады. Метадеректер құжат туралы, негізінен браузерлер мен іздеу жүйелеріне арналған әртүрлі техникалық ақпаратты көрсетеді және сайттағы пайдаланушыға көрінбейді.

9 of 13

Ең жиі қолданылатын метатегтер қатарына жататындары: author, description, keywords, viewport, charset.

Мета тегтер <head> құрылысында орналасады. Метатегтерді кез келген ретпен және мөлшерде енгізуге немесе олар айтқандай тіркеуге болады.

Метаттегтерді қолдану міндетті емес, бірақ кем дегенде мета тегтерді

description, viewport, charset. Бұл сайттың оптимизацияның ең басты плюсі болады.

10 of 13

Тақырып тегі

Браузер қойындысындағы тақырып үшін жұп тегі жауап береді <title>, оның ішінде бет атауы бар.

<title> Менің алғашқы жұмысым </title>

11 of 13

Viewport тегі нені білдіреді?

Viewport – құрылғы экранындағы пайдаланушыға экранды айналдырмай көрінетін аумақ. Ноутбук экранында қалыпты түрде көрсетілетін бетті елестетіңіз. Әріптер, белгішелер және басқа элементтер оңтайлы өлшемде, мәтінді оқу сізге ыңғайлы.

Смартфон экранындағы бірдей бет оқуға өте ыңғайсыз. Суреттер мен мәтінді оңға және солға, жоғары және төмен жылжыту керек. Viewport тег-ін орнатсаңыз, веб-бет қалыпты болып көрінеді:

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

12 of 13

Енді бұл сізге қиын болып көрінуі мүмкін, бірақ CSS-ті зерттеу арқылы сіз көрсетудің мағынасын толық түсінесіз viewport. Енді мұндай мета тег және оның негізгі қолданылуы туралы білу маңызды.

Ескерту

13 of 13

Блоктық және кірістірілген элементтер

Көптеген HTML элементтерімен танысқаннан кейін олардың мінез-құлқы әрқашан бірдей бола бермейтінін байқайсыз - кейбір элементтер (абзацтар, тізімдер, <pre>, <div>, тақырыптар, кестелер) әрқашан жаңа жолдан басталады. Олар экранның бүкіл енін алады. Мұндай элементтер блок элементтері деп аталады . Олар HTML макетінің негізі болып табылады, өйткені олар беттегі олардың жанындағы элементтердің қалай орналасатынына тікелей әсер етеді.

<div>

</div>

Блок элементтерінен басқа, кірістірілген элементтер бар . Оларға сілтемелер ( <a>), мәтін стиліндегі тегтер ( <b>, <strong>, , <i>, <em>), суреттер, <span>. Олар көрші элементтердің орналасуына әсер етпейді және мағына беруге арналған. Блок элементтерінен айырмашылығы, кірістірілген элементтер экранның толық енін алмайды, тек өздеріне қажет кеңістікті алады.

1 of 13