2 of 16

HTML дегеніміз не?

Көптеген веб-сайттар жазылатын тіл . HTML беттерді жасау және оларды функционалды ету үшін қолданылады.

HTML

HTML тарихы

HTML тілін алғаш рет 1989 жылы Тим Бернерс-Ли, Роберт Кайлиау және басқалар жасаған . Бұл Hyper Text Markup Language дегенді білдіреді.

Гипермәтін құжатта оқырманға құжаттың басқа жерлеріне немесе басқа құжатқа толығымен өтуге мүмкіндік беретін сілтемелер бар екенін білдіреді. Соңғы нұсқасы HTML5 ретінде белгілі .

3 of 16

HTML дегеніміз не?

HTML

HTML (HyperText Markup Language) – гипермәтінді белгілеуге арналған тіл. Функционалды түрде HTML - бұл браузер тақырыптарды тізімдерден, кестелерді суреттерден және т.б. ажырататын ережелер жиынтығы. Тіл 1993 жылы пайда болды және веб-беттердегі мәтінді көрсету ережелерін стандарттауға арналған.

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

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

<p> Менің бірінші абзацым</p>

4 of 16

Белгілеу тілі

Мәтіннің өңделуін және ұсынылуын басқару үшін компьютерлердің бір-бірімен сөйлесу тәсілі. Бұл әрекетті орындау үшін HTML екі нәрсені пайдаланады: тегтер және атрибуттар .

HTML тегтері

Тег HTML элементінің басын белгілеу үшін пайдаланылады және олар әдетте бұрыштық жақшаға алынады. Тегтің мысалы <h1>

Көптеген тегтер жұмыс істеуі үшін ашылуы <h1> және міндетті түрде </h1> жазылады.

5 of 16

Белгілеу тілі

HTML атрибуттары

Атрибуттар қосымша ақпарат бөліктерін қамтиды . Атрибуттар ашылу тегінің пішінін алады және оның ішінде қосымша ақпарат орналастырылады .

Атрибуттың мысалы: <img src="suret1.jpg" alt="basty fon.">

6 of 16

HTML арналған редакторлар

Sublime text

Жүктеуге сілтеме: https://www.sublimetext.com/

Блокнот

Компьютеріңіздегі Текстовый документ

7 of 16

Sublime text

<html></html> -

HTML бетінің түбір элементі болып табылады

<!DOCTYPE html> -

құжаттың HTML5 құжаты екенін анықтайды

<head></head> -

HTML беті туралы мета ақпаратты қамтиды

<title></title> -

HTML беті үшін тақырыпты анықтайды (ол шолғыштың тақырып жолағында немесе бет қойындысында көрсетілген). Мысалы: сол жақтағы скрин бетіндегі «Кіріспе» сөзі.

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

9 of 16

HTML элементі дегеніміз не?

HTML элементі бастапқы тегімен, кейбір мазмұнмен және аяқталу тегімен анықталады:

< h1 > Менің бірінші тақырыбым < /h1 >

<h2> Менің екінші тақырыбым < /h2 >

<em> Алғашқы курсивті жазбам </em>

< p > Менің бірінші абзацым. < /p >

Бастапқы тег

<h1>

<h2>

<em>

<p>

</h2>

Соңғы тег

</h1>

</em>

</p>

10 of 16

Тегтер

HTML-де арнайы конструкциялар – тегтер бар. Тегтердің көмегімен абзацты, тақырыпты, мәтін бөлімін жасауға, сонымен қатар оларды жылдам өзгертуге болады.

HTML тілінде абзацтар арнайы конструкциямен белгіленеді, оның <p> қажетті мәтін енгізіледі </p>.

Негізгі тегтердің бірі абзац болып табылады. Ол мәтін бөлімдерін бір-бірінен ажыратады, бұл пайдаланушыларға беттегі ақпаратты оқуды жеңілдетеді.

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

11 of 16

HTML тіліндегі мәтін

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

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Стандартты қолдану мәтіні

12 of 16

<!DOSTYPE html>

<html>

<head>

<title> Кіріспе </title>

</head>

<body>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>

</body>

</html>

HTML тіліндегі мәтіннің жұмыс барысы

13 of 16

Тегтерді орналастыру

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

HTML тіліндегі кейбір элементтер тегтердің басқалардың ішіне кірістірілуін талап етеді. Мысалы тізімдер:

ul – Бізге тізімдердің нүкте күйінде шығаруға мүмкіндік береді.

ol – Бізге тізімдердің сан күйінде шығаруға мүмкіндік береді.

14 of 16

<ul>

<li> Мен бірінші күні 25 бет кітап оқыдым</li>

<li> Мен бірінші күні 25 кітап бет кітап оқыдым </li>

</ul>

<ul>

<ol>

<li> Мен бірінші күні 25 бет кітап оқыдым</li>

<li> Мен бірінші күні 25 кітап бет кітап оқыдым </li>

</ol>

<ol>

15 of 16

Html тіліндегі керек қосымша ақпаратты енгізуге болады. Бұл атрибуттар арқылы жүзеге асады.Беттегі ақпараттың қалағанындай шығуына әсер етуі мүмкін арнай конструкциялар. HTML тіліндегі әрбір тегтің бірнеше стандартты атрибуттары бар, олар үлгіде жазылған атрибут= “мән”, мұнда:

Атрибут – атрибуттың аты. Атрибут құралдар кеңесін көрсету үшін пайдаланылады.

Мән – атрибуттың мәні. Ол атрибуттың өзіне байланысты әртүрлі болуы мүмкін.

<!DOCTYPE html>

<html>

<head>

<title> Кіріспе </title>

</head>

<body>

</body>

</html>

Img жұпсыз тегінің ішінде бізде екі атрибуттар орналасқан:

Олар:

src

height

16 of 16

Пайдалы ресурс көздері

https://www.w3schools.com/

http://htmlbook.ru/html/%21doctype

https://www.javatpoint.com/html-tutorial

https://www.html.am/

https://data-flair.training/blogs/html-introduction/

1 of 16