Web-бағдарламалауға және HTML-ге кіріспе
Браузерге сайт мекенжайын жазғанда, көзің көрген әдемі бет — шын мәнінде жай ғана мәтін, арнайы «командалармен» безендірілген. Дәл осы «командалар тілін» — HTML-ді — бүгін бастан аяғына дейін үйрене бастаймыз. Бұл білім кез келген веб-сайттың, тіпті қолданбаның негізі.
90-жылдары компьютерлер арасында мәлімет алмасудың жаңа хаттамасы — HTTP (Hyper Text Transfer Protocol) пайда болғаннан кейін, осы хаттамамен қатар World Wide Web (WWW) қызметі дүниеге келді.
WWW (Дүниежүзілік өрмек) — гипермәтінге негізделген, әлемнің әртүрлі нүктелерінде орналасқан серверлерде сақталған, өзара байланысқан құжаттар жүйесі.
WWW-дағы жеке құжат — Web-бет деп аталады. Бір тақырып бойынша біріктірілген және гиперсілтемелермен байланыстырылған беттер жиынтығы — Web-сайт.
| Компонент | Сипаттамасы |
|---|---|
| Front-end (көрсету) | Мазмұнның көрінісі — беттер өлшемі, графика, мәтін |
| Back-end (жүзеге асыру) | Front-end-ке негіз болатын сценарийлер мен серверлік код |
Браузер (клиент) серверге сұраныс жібереді, сервер жауап ретінде файлды жібереді — бұл байланыс HTTP хаттамасы бойынша жүреді. Сайт жасаудың толық жолы: жоспарлау → элементтерді дайындау → программалау → тестілеу → жариялау → жарнамалау.
HTML (HyperText Markup Language — гипермәтіндік белгілеу тілі) — Web-беттерді белгілеудің стандартталған тілі; мәтінді ТЕГ көмегімен арнайы Web-бетке айналдырады.
HTML тілін 1989 жылы Тим Бернерс-Ли ұсынған, ал әлемдегі алғашқы web-бетті ол 1991 жылы 6 шілдеде құрған. Қызығы — «гипермәтін» терминінің өзін одан да ертерек, 1963 жылы, америкалық философ Тед Нельсон енгізген.
Тег — қандай операция орындау керегін көрсететін HTML командасы. Барлық тег «<» символынан басталып, «>» символымен аяқталады.
Тегтің екі түрі бар: жұп тег — ашылатын (<tag>) және жабылатын (</tag>) болып жұптасады, олардың арасында мазмұн орналасады; дара тег — жалғыз қолданылады (мыс. <br>, <hr>).
Элемент — тег пен оның мазмұнының жиынтығы. Атрибут — элемент туралы қосымша ақпарат, ашылатын тегте атрибут_аты="мәні" форматында жазылады: <hr align="right" size="3">.
Кез келген HTML құжаты төрт негізгі тегтен тұрады:
<html>
<head>
<title>Kuzhat taqyryby</title>
</head>
<body>
Negizgi mazmun osynda
</body>
</html>| Тег | Қызметі |
|---|---|
<html> | Бүкіл құжатты қамтиды, браузерге HTML екенін хабарлайды |
<head> | Құжат туралы қызметтік мәлімет (тақырып, кодтау) |
<title> | Браузер терезесінің тақырып жолында көрінетін мәтін |
<body> | Браузер көрсететін негізгі мазмұн |
<meta charset="utf-8"> тегі қазақ/орыс кириллица әріптерінің дұрыс көрінуін қамтамасыз етеді — бұл тегсіз қазақша мәтін «кракозябр» болып шығуы мүмкін.
Берілді: «Бірінші Web-бет» атты қарапайым бет.
<html>
<head>
<meta charset="utf-8">
<title>Internet</title>
</head>
<body>
<h1>Birinshi Web-bet</h1>
<hr>
<h2>Munda siz bile alasyz:</h2>
<p><b>HTML degen ne?</b></p>
<p><i>HTML negizgi tusinikteri</i></p>
</body>
</html>Жауабы: файл .html кеңейтілімімен (мыс. primer.html), бос орынсыз, кіші әріптермен сақталады.
| Тег | Қызметі |
|---|---|
<h1>...<h6> | Тақырыптар (h1 — ең үлкен, h6 — ең кіші) |
<p> | Абзац |
<br> | Жаңа жолға өту (жұпсыз) |
<hr> | Көлденең сызық (жұпсыз) |
Мәтінді форматтауда екі түрлі тәсіл бар — физикалық (тек көрінісін өзгертеді) және логикалық (мағынасын да білдіреді):
| Физикалық | Логикалық баламасы |
|---|---|
<b> — қою қаріп | <strong> — маңызды фрагмент |
<i> — курсив | <em> — ерекшеленген мәтін |
<s> — сызылған | <del> — өшірілген мәтін |
Тізім құру үшін: <ol> — нөмірленген тізім, <ul> — маркерленген тізім, ал <li> — тізімнің әр элементі.
- WWW — гипермәтінге негізделген, бөлінген ақпараттық жүйе; Web-сайт — байланысқан Web-беттер жиынтығы.
- HTML — мәтін бөліктерінің қызметін анықтайтын функционалдық белгілеу тілі, тег арқылы жұмыс істейді.
- Тег екі түрлі болады — жұп (<p>...</p>) және дара (<br>); элемент — тег+мазмұн, атрибут — қосымша сипаттама.
- Құжат міндетті түрде <html>, <head>, <title>, <body> тегтерінен тұрады.