Интернетке түрлі қызметтердің жиынтығы әсер етеді

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>