Интернетке түрлі қызметтердің жиынтығы әсер етеді
Web және HTML туралы жалпы түсінік
Интернет көптеген қызметтердің жиынтығынан тұрады. Солардың ішінде ең кең тараған қызметтердің бірі — Web (World Wide Web, «бүкіләлемдік өрмекші»). Web жүйесінде тораптардағы құжаттардың негізгі форматы ретінде HTML қолданылады.
HTML (HyperText Markup Language) — «гипермәтінді белгілеу тілі». Ал гипермәтін — қосымша элементтерді (сілтеме, батырма, белгі, т.б.) басқаруға мүмкіндік беретін, ішінде екпінді (интерактив) элементтері бар мәтін түрі.
HTML құжатының негізгі құрылымы
HTML құжаты әдетте келесі қаңқадан тұрады:
<HTML>
<HEAD>
<TITLE>Құжат тақырыбы</TITLE>
</HEAD>
<BODY>
Құжат мазмұны
</BODY>
</HTML>
Неге бұл маңызды?
- <HEAD> ішінде құжат туралы қызметтік ақпарат сақталады (тақырып, метадеректер және т.б.).
- <BODY> ішінде пайдаланушы көретін негізгі мазмұн орналасады.
Тақырыптар: <Hn> тегтері
Көп жағдайда HTML құжаттарда тақырыптар қолданылады. Тақырыптар <Hn> тегтері арқылы беріледі, мұнда n мәні 1-ден 6-ға дейін болады. H1 — ең ірі, H6 — ең кіші тақырып.
<H1>Тақырып</H1>
<H2>Тақырып</H2>
<H3>Тақырып</H3>
<H4>Тақырып</H4>
<H5>Тақырып</H5>
<H6>Тақырып</H6>
Абзац пен жаңа жол
Мәтінді құрылымдаудың ең қарапайым тәсілдері:
<P> — жаңа абзац
Абзацты бөлу үшін қолданылады. Қазіргі HTML-де жабу тегі міндетті, бірақ бұрынғы мысалдарда кейде жабусыз да кездеседі.
<P>Бұл — жаңа абзац.</P>
<BR> — жаңа жол
Жолды үзеді. Бұл — бос (void) тег, жабу тегі болмайды.
Бірінші жол<BR>
Екінші жол
Абзацты туралау (ALIGN)
Кейбір ескі мысалдарда абзацты туралау үшін ALIGN атрибуты қолданылған:
<P ALIGN="LEFT">Сол жақ шетке туралау</P>
<P ALIGN="CENTER">Ортаға келтіру</P>
<P ALIGN="RIGHT">Оң жақ шетке туралау</P>
Мәтінді пішімдеу тегтері
Мәтінге қалың, курсив, асты сызылған және басқа да пішім беру үшін сәйкес тегтердің арасына жазуға болады:
<B>Қалың мәтін</B>
<I>Курсив</I>
<U>Асты сызылған</U>
<STRIKE>Сызылып тасталған</STRIKE>
<SUP>Жоғарғы индекс</SUP>
<SUB>Төменгі индекс</SUB>
Атрибуттар және <FONT> мысалдары
Кейбір тегтер атрибуттармен бірге қолданылады. Атрибуттар ашылатын тегтің ішінде жазылады және бір тегте бірнеше атрибут берілуі мүмкін.
Ескерту
FONT және BGCOLOR сияқты атрибуттар қазіргі веб-стандарттарда ескірген деп саналады. Дегенмен төмендегі мысалдар оқу мақсатында берілген.
<FONT SIZE> — шрифт өлшемі
SIZE — шрифт өлшемін береді (әдеттегі стандарт ретінде көбіне «3» айтылады).
<FONT SIZE="1">Мысал 1</FONT>
<FONT SIZE="2">Мысал 2</FONT>
<FONT SIZE="3">Мысал 3</FONT>
<FONT SIZE="4">Мысал 4</FONT>
<FONT SIZE="5">Мысал 5</FONT>
<FONT SIZE="6">Мысал 6</FONT>
<FONT COLOR> — мәтін түсі
Түсті атаумен немесе 6 таңбалы HEX-кодпен көрсетуге болады:
<FONT COLOR="red">Қызыл</FONT>
<FONT COLOR="#FF0000">Қызыл</FONT>
Бет фоны: <BODY BGCOLOR>
Фон түсін беру үшін <BODY> тегіне BGCOLOR параметрі жазылады және оған түс атауы немесе 6 таңбалы код беріледі:
<BODY BGCOLOR="RED">
<BODY BGCOLOR="#FF0000">
Сурет енгізу: <IMG> тегі
HTML құжатына сурет қосу үшін <IMG> тегі қолданылады. Толық мысалда бірнеше атрибут көрсетіледі:
<IMG SRC="Сурет_аты" BORDER="0" ALIGN="түзеу"
WIDTH="Ені" HEIGHT="Биіктігі"
HSPACE="көлденең_аралық" VSPACE="тігінен_аралық"
ALT="сипаттама">
ALT не үшін керек?
ALT — сурет жүктелмей қалған жағдайда көрінетін мәтін және қолжетімділік (accessibility) үшін маңызды сипаттама.
Кестелер: <TABLE>, <TR>, <TD>
Кестелер бірнеше баған құруға, мазмұнды реттеуге және элементтердің орналасуын басқаруға көмектеседі. Кесте <TABLE> тегімен басталып, </TABLE> тегімен аяқталады.
Қарапайым үлгі (2×2)
Ескеру: ені пиксельмен беруге болады, бірақ пайызбен көрсету ыңғайлы — терезе өлшеміне қарай бейімделеді.
<TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00">
<TR>
<TD>1 ұяшық</TD>
<TD>2 ұяшық</TD>
</TR>
<TR>
<TD>3 ұяшық</TD>
<TD>4 ұяшық</TD>
</TR>
</TABLE>
Кесте тақырыбы: <CAPTION>
Кестеде тақырып болуы мүмкін. Ол <CAPTION> тегінің ішінде орналасады. Тақырыптың кестедегі орнын ALIGN атрибуты анықтайды:
- TOP — жоғарғы жақтың ортасы
- BOTTOM — төменгі жақтың ортасы
- LEFT — жоғарғы жақтың сол шеті
- RIGHT — жоғарғы жақтың оң шеті
Жолдар мен ұяшықтар
Кестенің жолдары <TR> арқылы, ал әрбір ұяшық <TD> арқылы беріледі.
Тізімдер: нөмірленген және маркерленген
Нөмірленген тізім: <OL>
Бұл жағдайда әр элементтің алды автоматты түрде нөмірленеді. Тізім <OL> тегінен басталып, </OL> тегімен аяқталады. Әр элемент <LI> арқылы жазылады.
<OL>
<LI>Бір</LI>
<LI>Екі</LI>
<LI>Үш</LI>
<LI>Төрт</LI>
<LI>Бес</LI>
</OL>
OL тегінің параметрлері (TYPE):
- A — үлкен латын әріптері
- a — кіші латын әріптері
- I — үлкен рим цифрлары
- i — кіші рим цифрлары
- 1 — кәдімгі цифрлар
<OL TYPE="I" START="8">
<LI>Сегіз</LI>
<LI>Тоғыз</LI>
<LI>Он</LI>
<LI>Он бір</LI>
<LI>Он екі</LI>
</OL>
Маркерленген тізім: <UL>
Маркерленген тізімде элементтер маркер арқылы белгіленеді. Тізім <UL> тегімен ашылып, </UL> тегімен жабылады. Әр элемент <LI> тегінен басталады.
<UL>
<LI>Бір</LI>
<LI>Екі</LI>
<LI>Үш</LI>
<LI>Төрт</LI>
<LI>Бес</LI>
</UL>
UL тегінің TYPE параметрі:
disc
<UL TYPE="disc">
<LI>disc</LI>
</UL>
circle
<UL TYPE="circle">
<LI>circle</LI>
</UL>
square
<UL TYPE="square">
<LI>square</LI>
</UL>