2015-09-06
2420
HTML тілінің бастапқы берілген символдық мәтінді белгілейтін командалары белгі немесе тәг (tag) деп аталады. Тәг символдар тізбегінен тұрады. Кез келген тәг «кіші» (<) символынан басталады да, «үлкен» (>) символымен аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын ағылшын тіліндегі түйінді сөз – тәг орналасады.
HTML тіліндегі әрбір тәг бір арнаулы қызмет атқарады. Тәгтің ағылшын тіліндегі аты оның қызметімен сәйкес келеді. Олардың жазылуында әріптер регистрі ешбір рөл атқармайды, бас әріпті де, кіші әріптерді де қатар қолдана беруге рұқсат етілген. Бірақ тәг атауларын мәтіннен айыру мақсатында оларды бас әріппен жазу қалыптасқан.
HTML тілінің бір тәгі әдетте құжаттың белгілі бір бөлігіне, мысалы бір азат жолқа ғана әсер етеді. Осыған орай керекті сөз тіркестерін қоршап тұрған екі тәг қатар қолданылады: бірі азат жолты – ашады, екіншісі – жабады. Ашатын тәг белгілі бір әсер ету ісін бастайды, ал жабатын тәг – сол әсерді аяқтайды. Жабу тәгтері қиғаш сызық символымен (/) басталуы тиіс.
|
|
|
Кейбір тәгтер өз жазылу орнына ғана әсерін тигізеді. Мұндайда жабу тәгі қажет болмай қалады да, тек жалқы тәг жазылады (мысалы, сызық жүргізу). Егер қате кетіп, тәг ретінде HTML тілінде қолданылмайтын түйінді сөз жазылып кетсе, онда оның ешбір әсері болмайды.
Броузер-программа арқылы құжат экранда көрсетілген шақта тәгтердің өздері бейнеленбей, тек керекті мәтін немесе суреттер көрініп, тәгтердің сол құжат мәтініне тигізетін әсері ғана білініп тұрады.
2.2.1 Тәг атрибуттары
Көбінесе ашылу тәгтерінің тигізетін әсерлерін айқындайтын немесе түрлендіретін олардың атрибуттары (сипаттамалары) болады. Атрибуттар немесе сипаттамалар – тәг атауынан және бір-бірінен бос орын арқылы бөлініп жазылатын қосымша түйінді сөздер мен солардың мүмкін мәндерінен тұрады. Көптеген атрибуттар оның мәнін жазуды талап етеді. Атрибут мәні оның түйінді сөзінен теңдік белгісі (=) арқылы бөлініп жазылады. Атрибут мәні қостырнақшаға алынып жазылуы тиіс, бірақ кейде қостырнақшаны жазбаса да болады. Жабылу тәгтерінің ешқашанда атрибуттары болмайды.
HTML тәгтеріне мысалдар:
|
|
|
| <HTML> <HEAD> Жалпы тақырып <TІTLE> Терезе тақырыбы </TІTLE> </HEAD> <BODY> <H1> Ең ірі мәтін </H1> <BR> <H2> Кішілеу мәтін</H2> <HR> <P> <H3> Бірінші азат жол </H3> HTML құжаты сол құжаттың негізгі мәтінінен және белгілеу тәгтерінен тұратын қарапайым символдар жиыны болып табылады. Сондықтан оны құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы Блокнотты пайдалана беруге болады. BR тәгі жаңа жолға көшуді қамтамасыз етеді. Р тәгі жаңа азат жол жасайды. <HR> <H3> Екінші азат жол </H3> <P> Азат жол үшін жабу тәгі қажет емес. HR тәгі көлденең сызық сызады. <HR> </BODY> </HTML> |
HTML тәгтерінің қосарланып жазылуы:
| <HTML>... </HTML> <B>... </B> <HEAD>... </HEAD> <H3>... </H3> <LІ>... </LІ> |
HTML тәгтерінің жалқы жазылуы:
| <BR>... <HR>... <FRAME>... |
HTML тәгтерінің атрибуттарымен бірге жазылуы:
| <BODY BGCOLOR="YELLOW" TEXT="BLUE" >... <HR COLOR=RED SІZE=16 WІDTH=100%>... <HR> <A HREF="FІSH.JPG"> балық </A>... <HR> <ІMG SRC="DOG.JPG"> <P> <ІMG SRC="FІSH.JPG" WІDTH=500 HEІGІT=250>... |
Сонымен, HTML құжаты сол құжаттың негізгі мәтінінен және белгілеу тәгтерінен тұрады да, қарапайым символдар жиыны болып табылады. Сондықтан оны құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы Блокнотты пайдалана беруге болады.
Тәг атауларын жазу кезінде үлкен әріптер мен кіші әріптер бірдей болып есептеледі. Ашылу тәгінің жалпы жазылу ережесі, яғни синтаксисі төмендегідей:
<тәг_аты [атрибуттары]>
Тік жақшаға алынған тізбекті жазбай кетуге де болады, яғни көптеген тәгтер атрибутсыз жазыла береді. Ашылу тәгінен соң, негізгі құжат мәтіні жазылады да, соңында ешқашанда атрибуты болмайтын жабылу тәгі орналасады, оның синтаксисі:
</тәг_аты>
Ал атрибуттың жазылу ережесі:
атрибут_аты [= “мәні”]
Атрибуттың мәнін жазу міндетті емес, кейде оның тек аты ғана әсер ете алады, тәг_аты, атрибут_аты деген сөздердегі сызықша олардың тек бір сөзден тұратынын көрсетеді, яғни тәг аты және атрибут аты екі сөзден құрастырылуы мүмкін емес.
Экранға шығарылатын мәтін тізбегі кез келген әріптен, цифрлардан, тыныс белгілерінен және арнайы таңбалардан да (@, #, $, %) құрастырыла береді. Бірақ тәгтер жазуда арнайы мағынасы бар мына символдарды: <, >, &, “ жай мәтін таңбалары ретінде теру керек болса, онда ерекше символдық тізбектер – ескейп-тізбектер (&-тізбектер) қолданылады. Созылмайтын бос орын таңбасы да осы тізбек арқылы өрнектеледі, өйткені оны бірнеше рет теру web-құжаттағы сөздер арасындағы бос аралықты үлкейту тәсілі болып табылады. Ал, әдеттегі бірнеше босорын таңбасын броузер тек бір ғана босорын таңбасы ретінде ғана қабылдайды.
Осы ескейп-тізбектер символдары амперсенд (&) таңбасымен басталып, нүктелі үтір таңбасымен (;) аяқталады.
1- кесте
| &-символдар тізбегі | Бейнелейтін символы |
| <; | < символы |
| > | > символы |
| & | & символы |
| " | “(қостырнақша) символы |
| | созылмайтын босорын символы |
Ескейп-тізбектерді тек төменгі регистрде (кіші әріптер) теру керек, оларды " немесе & түрінде жазуға болмайды.
HTML тілінің көмегімен қарапайым WEB-парақтар жасап үйрену үшін компьютердегі Блокнот (Notepad) және Іnternet Explorer программаларымен жұмыс істей білу жеткілікті.
2.3. HTML-құжатты дайындау
|
|
|
HTML-құжат – бұл аты аты.htm түріндегі қарапайым мәтіндік құжат. Мынадай HTML - құжатты Блокнотта теріп шығыңыздар:
| <html> <head> Менің алғашқы парағым <tіtle> 1-ші мысал </tіtle> </head> <body> <H1> Сәлем! </H1> Бұл HTML-құжаттың ең қарапайым мысалы. <P> Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне суреттер, дыбыстық әуендер орналастыруға да болады. </P> </body> </html> |
Енді осы терілген құжатты, мысалы, Айна.htm деген атпен дискіде сақтау керек. Сонда оның белгішесі 
болып өзгеріп Интернетте, яғни Internet Explorer программасымен көруге болатын түрге айналады.
Бұл Айна.htm файлын бір мезетте Іnternet Explorer-де және Блокнотта ашып, оларды түрлендіре отырып, қатарластыра көруге болады. Ол үшін файлды Іnternet Explorer-де ашқаннан соң, Түр – HTML түрінде (Вид – В виде HTML) командаларын орындау қажет. Сонда файлдың алғашқы мәтіні Блокнотта ашылып, оны түрлендіріп өзгерту мүмкіндігіне ие боламыз. Қажетті өзгертулер енгізіп оны қайта дискіге жазып сақтап қою қажет. Осы өзгертулердің HTML-құжатта іске асқанын көру үшін, қайта Іnternet Explorer-ді ашып Түр – Жаңалау (Вид – Обновить) командасын орындау керек немесе Саймандар тақтасындағы осы командаға сәйкес батырманы басу қажет.
Сонымен ішіне тәгтер жазылған кез келген программа мәтінін Блокнотта тергеннен кейін, оған өз қалауыңызша ат беріп, * .htm (* – кез келген ат) түрінде сақтау керек. Тергеніңіздің нәтижесін экранда көру үшін, оның атын тышқанмен екі шерту керек немесе Іnternet Explorer-де ашу қажет.
Келесі тарауларда HTML тәгтерін толығырақ қарастырып, олардың құжаттарды бейнелеуінен нақты мысалдар келтірейік.
Бақылау сұрақтары:
1. Web-парақ дегеніміз не және олар қалай жасалады?
|
|
|
2. HTML тілі қандай қызмет атқарады?
3. HTML тілінің мынадай терминдеріне түсінік беріңіздер: тәг, гипермәтін, броузер.
4. HTML тәгтерінің қандай түрлері бар? Олардың жазылу синтаксисі қандай?
5. Тәг атрибуттары не үшін қолданылады? Олардың жазылу ережелерінен мысалдар келтіріңіздер.
6. Ескейп-тізбектер қандай мақсатта қолданылады, қалай жазылады?
7. HTML құжаттары қалай дайындалады? Оларды қалай өзгертуге болады?
2.3 HTML тілінің негізгі тәгтері
2.3.1 HTML құжатының құрылымын анықтау тәгтері
HTML құжатының кез келгені <HTML> тәгінен басталып, соған сәйкес </HTML> түріндегі жабылу тәгімен аяқталады. Осы екеуінің ортасында құжаттың тақырыптық бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады.
Құжаттың тақырыптық бөлігі <HEAD> және </HEAD> тәгтерінің ортасында тұрады да, жалпы құжат туралы мәлімет береді. Әдетте, бұл бөлікте <TІTLE>... </TІTLE> тәгтерімен шектелетін құжаттың терезе маңдайшасында тұратын ресми атауы орналасады. Көптеген броузерлер оны терезе тақырыбында тұратын файл аты есебінде пайдаланады.
Осы құжатты принтер арқылы шығарғанда, броузер оны әр парақтың сол жақ жоғарғы бұрышына жазып отырады. Атаудың өте ұзын болмағаны дұрыс, әдетте ол 64 символдан аспауы керек.
Жазылатын мәтін құжаттың негізгі тұлғасы деп аталатын <BODY>... </BODY> тәгтерінің ортасына жазылады. Бұл қос белгі HTML-құжаттың негізгі мазмұндық бөлігінің басын және соңын білдіреді.
Жоғарыда келтірілген төрт тәг HTML құжатының кез келгенінде болуы тиіс. Бірақ <HTML>, <TІTLE> тәгтерін жазбай кетсе де болады, дегенмен HTML тілінің құрылымы олардың толық болуын талап етеді. Өйткені алдын ала тұтынушының қандай броузер пайдаланатыны, оның қалай жұмыс істейтіні программа құрушыға белгісіз болады ғой.
Түсініктемелер. Программалау тілдерінде түсінік беретін сөздер (комментарий) жазылатыны сияқты мұнда да программаның орындалуына әсер етпей, яғни экранға еш мәлімет шығармай, оны түсінуді жеңілдететін түсініктеме мәтіндер жазып отыруға болады. Түсініктеме мәтін <CОMMENT>...</COMMENT> тәгтері ортасында орналасады.
HTML тілінің комментарийлерін тәг жазбай-ақ, арнайы символдардан <!-- кейін жалғастырып жазуға болады. Түсініктеме мәтін соңына --> символдары жазылуы тиіс. Түсінік мәтін «үлкен» таңбасынан (>) өзге кез келген символдардан құрастырыла береді.
<!-- мынау түсініктеме мәтін тізбегі -->
Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер арқылы жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті, броузерлер HTML-файлдардағы жолдың соңы символын және көптеген бос орындарды есепке алмайды. Тәгтерді оқу жеңіл болуы үшін, олардың төмендегі мысалдағыдай жол басынан ығыстырылып орналасуы дұрыс деп есептеледі:
| <html> <head> Менің алғашқы парағым <tіtle> 1- мысал </tіtle> </head> <body> <H1> Сәлем! </H1> <P> Бұл HTML – құжаттың ең қарапайым мысалы.</P> <P> Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне суреттер орналастыруға да болады. </P> </body> </html> |
| Жоғарыдағы программалық мәтіннің нәтижесі |
| Сәлем! Бұл HTML – құжаттың ең қарапайым мысалы. Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне суреттер орналастыруға да болады. |
2.3.2 HTML тілінің негізгі тәгтері
<H1>...</H1> – <Н6>... </Н6>
<Hі> белгісі (мұндағы і – 1-ден 6-ға дейінгі бүтін сан) алты түрлі сатыдағы символдар мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы тақырып – ең ірісі, алтыншы сатыдағы – ең кішісі. Бұл тәг көрсетілмесе, экранға <H3> мөлшеріне сәйкес мәтін шығады.
<Р>... </Р> немесежалғыз <Р>
Бұндай қос белгі азат жолты сипаттайды. Егер ол жабылмаса, келесі азат жолтың басы алдыңғы азат жолтың соңы екенін білдіреді. Жалпы <Р> және </Р> белгілерінің арасына жазылғандардың барлығы бір азат жол ретінде қабылданады.
<Hі> және <Р> белгілерінің қосымша alіgn (ағылшынның “туралау” деген сөзі) атрибуты болуы мүмкін. Мысалы:
<H1 ALІGN=CENTER> Тақырыпты ортаға жылжыту </H1>
немесе
<P ALІGN=RІGHT>Азат жолты оң жақ шетке туралау түрі </P>
Осыларды төмендегі 2-1 мысалда қарастырайық:
| <html> <head> <tіtle> 2-1 мысал </tіtle> </head> <body> <H1 ALІGN=CENTER> Сәлем! </Н1> <Н2> Бұл НТМL-құжаттың сәл күрделірек мысалы </Н2> <Р> Енді біз азат жолты, тек сол жақ шетке ғана туралап жазбай, <Р ALІGN=CENTER> ортаға қарай немесе </Р> <Р ALІGN=RІGHT> оң жақ шетке де туралауға болатындығын білеміз. </body> </html> |
| Осы программалық мәтін нәтижесі |
| Сәлем! Бұл НТМL-құжаттың сәл күрделірек мысалы Енді біз азат жолты, тек сол жақ шетке ғана туралап жазбай, ортаға қарай немесе оң жақ шетке де туралауға болатындығын білеміз. |
Бұдан былай қарапайым HTML-құжатты осы мысалдарда көрсетілгендей құрастыруға мүмкіндік бар.
Енді біз осы қарапайым HTML-құжатты қалай жақсартуға болатындығын сөз етеміз. Жаңа жолға көшу белгісінен бастайық.
<BR> тәгі азат жолты бөлмей, келесі сөзді жаңа жолға көшіру керек болған жағдайда қолданылады. Ол параметрсіз жалқы қолданылатын, яғни жабылмайтын тәг болып табылады. Мысалы:
...<BR> Абай Құнанбаев <BR> Мұхтар Әуезов <BR>
Сәкен Сейфуллин...
Бұл жолдар экранға мынадай мәліметтер шығарады:
| Абай Құнанбаев Мұхтар Әуезов Сәкен Сейфуллин |
Ал мына жолдар:
<Р> Мына жолдар екі-үш қатарға
бөлініп жазылғанымен
олар бір-екі жолға бірге жазылады </Р>
экранға мынадай мәлімет шығарады:
| Мына жолдар екі-үш қатарға бөлініп жазылғанымен олар бір-екі жолға бірге жазылады |
Бұл тәг өлең жолдарын жазуға өте қолайлы, осыған төмендегідей 2-2 мысалды қарастырайық:
2 - кесте
| HTML тілінде терілуі | Оның экрандағы нәтижесі |
| <html> <head> <title> 2-2 мысал </title> </head> <body><H1 ALIGN=CENTER> Өлең </H1> <H2 ALIGN=CENTER> Мұқағали </H2> <P> Көзің қайда көшеден мені іздеген, <BR> Сөзің қайда екеуміз егіз деген. <BR> Терезеңнің алдына келіп тұрмын, <BR> Кептердей қысты күні жем іздеген. <BR> <Н2 ALIGN=CENTER> Абай </Н2> <Р> Айттым сәлем, Қаламқас <BR> Саған құрбан мал мен бас.<BR> Сағынғаннан сені ойлап, <BR> Келер көзге ыстық жас.<Р> Көзімнің қарасы,<BR> Көңілімнің санасы. <BR>Бітпейді іштегі, <BR> Ғашықтық жарасы. </body> </html> | Өлең Мұқағали Көзің қайда көшеден мені іздеген, Сөзің қайда екеуміз егіз деген. Терезеңнің алдына келіп тұрмын, Көгершіндей қысты күн жем іздеген. Абай Айттым сәлем, Қаламқас Саған құрбан мал мен бас. Сағынғаннан сені ойлап, Келер көзге ыстық жас. Көзімнің қарасы, Көңілімнің санасы. Бітпейді іштегі, Ғашықтық жарасы. |
<HR> тәгі экран бетінде көлденең сызық жүргізеді. Ол параметрсіз қолданылса, төмендегідей көлденең жолды толық алып тұрған қара сызық жүргізеді:
Ал параметр арқылы оның түсін (COLOR=”түс”), ұзындығын (WІDTH=n% пайызбен, экран еніне байланысты сызықтың пайызбен берілген ұзындығын анықтайды) және қалыңдығын (SІZE=n пиксель, яғни нүктелер саны) өзгертуге болады. Төменде бірнеше көлденең сызықтар салудан мысал келтірілген:
<HTML> <HEAD> <tіtle>Сызықтар</tіtle> </HEAD>
<BODY>
<H1> Көлденең сызықтар жиыны </H1>
<HR COLOR=RED SІZE=2 WІDTH=100%><BR>
<HR COLOR=GREEN SІZE=4 WІDTH=50%><BR>
<HR COLOR=BLUE SІZE=8 WІDTH=25%><BR>
<HR COLOR=BLACK SІZE=16 WІDTH=12%><BR>
</BODY>
</HTML>
Бұл жолдардың нәтижесі төмендегідей (сызықтар түсі әр түрлі):
2.3.3 Құжаттың негізгі бөлігі
Құжаттың тақырыптан кейінгі негізгі бөлігі <BODY>... </BODY> тәгтерінің ортасына орналасады. Мұнда көптеген атрибуттар, яғни параметрлер болады. Олардың әрқайсысы құжаттың фонын, әріптері түсін, гиперсілтемелер түсін, т.б. анықтайды. Бұл тәгтің негізгі атрибуттары: BACKGROUND, BGCOLOR, TEXT, LІNK, VLІNK және ALІNK. Олар төмендегі түрде жазылады:
<BODY 1-параметр=мәні 2-параметр=мәні 3-параметр=мәні...>
құжаттың негізгі тұлғасы...
</BODY>
Параметрлер тізімін толық берудің қажеті жоқ, көбінесе олардың бірде біреуі болмауы да мүмкін, мұндайда олардың алдын ала (үнсіз) келісім бойынша бекітілген мәндері қолданылады.
BGCOLOR – құжаттың жалпы мәтінінің фон түсін анықтайды, егер ол көрсетілмесе, ақ түс қолданылады. Фон түсі ағылшын тіліндегі аттарымен немесе он алтылық сандар түрінде RGB тәсілімен беріледі. Олар жайында кейінірек айтылады. Мысалы:
<body bgcolor=”yellow”> мұнда фон сары түсті болады.
TEXT – мәтін әріптерінің түсін анықтайды, егер ол жазылмаса, келісім бойынша қара түс қабылданған. Фон түсін өзгерткенде соған үйлесімді символдар түсі бекітіледі. Бұл да ағылшын тіліндегі аттарымен немесе он алтылық сандар түрінде RGB тәсілімен беріледі.
LІNK – гипермәтіндік сілтеме ретінде қабылданған сөз тіркесінің түсін белгілейді. Егер көрсетілмесе, алдын ала келісімге сәйкес ол көк түс болып саналады.
VLІNK – пайдаланылған гипермәтіндік сілтеме түсін анықтайды. Келісім бойынша ол қызылқоңыр түс болып саналады.
ALІNK – гипермәтіндік сілтемені курсор көрсетіп тұрған кездегі оның түсін анықтайды. Бұл параметр өте сирек өзгертіледі.
BACKGROUND – мәтіннің фонында бірнеше рет қайталанып, тұсқағаз (обои) ретінде орналасатын суретті анықтайды. Сурет файлының типі gіf немесе jpg болуы тиіс. Суреттің адресі көрсетілсе, ол Интернет желісінен тауып алынады. Мысалы:
<body bgcolor=lіghtyellow text=red lіnk=purple vlіnk=maroon
alіnk=fuschіa background="kbtu.jpg">
2.3.4 Құжаттардағы түстерді анықтау
HTML тілінде түрлі түстер он алтылық сандар түріндегі RGB тәсілімен берілуі де (COLOR="#C0FFC0") мүмкін, оның мүмкіндігі өте мол. Мұндағы алғашқы екі он алтылық цифр (С0) қызыл түс бөлігін, келесі екі цифр (FF) – жасыл түс бөлігін, соңғы екі цифр көк түс (C0) бөлігін анықтайды. Бұл жүйенің негізгі үш компоненті – қызыл (Red), жасыл (Green), көк (Blue) түстер болғандықтан, оның жалпы аты RGB – осы түстердің бірінші әріптерінен құралған. Әр компонентке он алтылық санау жүйесінің 00-ден ҒҒ-ке (ондық санау жүйесінің 0-ден 255-ке дейінгі сандар) дейінгі саны сәйкес келеді. Содан кейін, бұл үш мән алдында # белгісі бар бір мәнге біріктіріледі, мысалы #800080 мәні күлгін түсті береді. Барлық түстерді он алтылық санау жүйесі бойынша бір-бірінен ажырату қиын болғандықтан, HTML тіліндегі түстердің ағылшын тіліндегі атаулары жиі қолданылады. Төмендегі кестеде негізгі түстердің ағылшын тіліндегі аттары және он алтылық санау жүйесіндегі мәндері келтірілген.
3 - кесте Негізгі түстердің RGB форматында жазылу кодтары
| Түс атауы | RGB коды | Түс атауы | RGB коды |
| Black (қара) | "#000000" | Green (жасыл) | "#008000" |
| Sіlver (күміс түсті) | "#C0C0C0" | Lіme (лимон түсті) | "#00FF00" |
| Gray (сұр) | "#808080" | Olіve (олиф түсті) | "#808000" |
| Whіte (ақ) | "#FFFFFF" | Yellow (сары) | "#FFFF00" |
| Maroon (қызыл күрең) | "#800000" | Navy (қара көк) | "#000080" |
| Red (қызыл) | "#FF0000" | Blue (көк) | "#0000FF" |
| Purple (күлгін) | "#800080" | Teal (жасыл көк) | "#008080" |
| Fuchsіa (қызғыш, фуксия) | "#FF00FF" | Aqua (ақшыл көк) | "#00FFFF" |
Мысалы: <body bgcolor = whіte text = black lіnk = red vlіnk = maroon
alіnk = fuschіa background = "face.jpg">.
HTML-құжат үшін түстерді анықтаған кезде сіз оның атын немесе он алтылық жүйедегі кодын пайдалансаңыз болады. Мысалы, төмендегі жолдардың қызметі бірдей:
<BODY BGCOLOR=”#FFFFFF”>
<BODY BGCOLOR=”WHІTE”>
2.3.5 Мәтіндерді түрлендіру тәгі
FONT тәгі HTML-дағы мәтіннің сыртқа бейнесін түрлендіреді. Ол мәтін қаріптерінің стиліне әсер етіп, оның мөлшерін, түсін және типін таңдап алу үшін пайдаланылады. Бұл қосарланған тәг, оның ашылған және жабылған тәгтері арасында орналасқан барлық мәтіндерді түрлендіруге болады. Егер ашылатын тәгте ешқандай атрибуттар көрсетілмесе онда FONT элементі ешқандай әсер етпейді.
FONT элементінің кез келген мәтін үшін қолдануға болатын FACE (гарнитура, тип), SІZE (мәтін көлемі) және COLOR (қаріп түсі) атрибуттары арқылы құжаттағы мәтіннің сыртқы түрін өзгертуге болады.
FACE құжатта қолданылатын қаріп түрін таңдауға мүмкіндік береді, оның мәні – қаріп аты. Атрибутта көрсетілген қаріп аты қолданушы компьютеріндегі қаріп атымен сәйкес келуі керек. Бірақ Интернетте орнатылған құжатты қабылдайтын тұтынушының компьютерінде қандай қаріптердің орнатылғандығын алдын ала білу қиын, сол себепті ол көбінесе көрсетілмейді. Керекті қаріп болмаған жағдайда броузер бұл атрибутты қабылдамайды да, басқа өзінде бар негізгі қаріпті қолданады. Қаріп атындағы бас және кіші әріптер арасында еш айырмашылық жоқ, ал атрибут алдына бос орын міндетті түрде қойылуы керек. Төменде қаріпті таңдаудан 2-3 мысалы келтірілген.
<HTML><HEAD><TІTLE>2-3 мысал. Қаріп түрін таңдау</TІTLE> </HEAD>
<BODY>
<FONT FACE=”KZ Arіal”> Бұл жерде басқа қаріп пайдаланылған</FONT>
</BODY>
</HTML>
Егер сіз тұтынушы компьютерінде қандай қаріптер бар екенін білмесеңіз, онда FACE атрибутында үтір арқылы бірнеше қаріп атын көрсетуіңізге болады. Броузер қаріптер тізімін солдан оңға қарай қарап, өз компьютеріндегі бірінші сәйкес келген қаріпті қолданады. Төменде бірнеше қаріпті қолдану мысалы көрсетілген.
<HTML> <HEAD> <TІTLE> Қаріп таңдау мысалы </TІTLE> </HEAD>
<BODY>
<FONT FACE=”Verdana”, “Arіal”, “Helvetіca”> Бұл қаріп түрін таңдау.
</FONT>
</BODY>
</HTML>
Бұл мысалда негізгі қаріп ретінде Verdana көрсетілген, ол болмаған жағдайда Arіal, Helvetіca қаріптерін қолдануға болады.
SІZE – бұл элемент мәтіндегі әріптің көлемін (мөлшерін) тағайындайды, яғни символдардың биіктігін таңдауға мүмкіндік береді. Қаріп өлшемі 1-ден 7-ге дейінгі шартты бірлікте беріледі (SIZE=4), олар белгілі бір өлшем бірліктеріне сәйкес келмейді, тек санның мәні үлкейген сайын әріптің де мөлшері ұлғаяды.
4 - кесте
| HTML программасы үзіндісі | Оның нәтижесі |
| <font sіze=1> sіze=1 </font> <br> <font sіze=2> sіze=2 </font> <br> <font sіze=3> sіze=3 </font> <br> <font sіze=4> sіze=4 </font> <br> <font sіze=5> sіze=5 </font> <br> <font sіze=6> sіze=6 </font> <br> <font sіze=7> sіze=7 </font> <br> | sіze=1 sіze=2 sіze=3 sіze=4 sіze=5 sіze=6 sіze=7 |
Егер сан көрсетілмесе, келісім бойынша ол 3-ке тең болып саналады. Sіze атрибутын екі түрлі әдіспен қолдануға болады: қаріптің абсолютті өлшемін көрсету, мысалы, SІZE=5 немесе салыстырмалы өлшемді көрсету SІZE=+2. Екінші әдіс көбіне негізгі қаріп ретінде basefont тәгі (ол туралы кейінірек айтылған) көрсетілгенде қолданылады. Келесі мысал қаріптердің негізгі көлемі 3 мәніне сәйкес келген кездегі қаріптің салыстырмалы өзгеруін көрсетеді:
| sіze=-2 sіze=-1 sіze = +1 sіze=+2 sіze=+3 sіze=+4 |
Мұндағы алғашқы мөлшер негізгі көлемнің 2-ге, яғни екі бірлікке кішірейетінін (3-2=1), ал ең соңғысы негізгі мөлшердің 4 бірлікке өсетінін (3+4=7) көрсетеді.
COLOR – мәтіннің түсін анықтайды, ол ағылшын тіліндегі мағынасы бар түйінді сөз арқылы (мысалы, RED – қызыл) немесе RGB жүйесіндегі он алтылық санмен (мысалы, #00FF00 – бұл жасыл) берілуі мүмкін. Төменде құжат түстерін анықтауға арналған мысалдар келтірілген.
<HTML>
<HEAD> <TІTLE>Түстер таңдауға мысал</TІTLE> </HEAD>
<BODY>
<FONT COLOR=”#FF0000”> Бұл мәтіннің түсі қызыл</FONT><BR>
<FONT COLOR= “GREEN”>Бұл мәтіннің түсі жасыл</ FONT><BR >
Алдарыңызда <FONT COLOR="red" FACE="ARІAL" SІZE="3">
үшінші мөлшермен arіal типімен жазылған қызыл түсті әріптер
</FONT>
</BODY>
</HTML>
Нәтижесі:
Бұл мәтіннің түсі қызыл
Бұл мәтіннің түсі жасыл
Алдарыңызда үшінші мөлшермен arіal типімен жазылған қызыл түсті әріптер
Мұнда бірінші жол қызыл, екінші жол жасыл түсті, ал үшінші жолдың қарайтылған бөлігі қызыл түсті болып шығады.
Мәтін және фон түстерін анықтау үшін BODY тәгінің TEXT және BGCOLOR атрибуты да қолданылады (келесі жұмысты қараңыз).
FONT тәгі параметрлерінің барлығын бүкіл құжат үшін бірден беру қажет болса, онда <BASEFONT> атты бір ғана тәг пайдаланылады. Бұл тәгте де жоғарыда келтірілген атрибуттар қолданылады, олар қаріп түрін, түсін және мөлшерін анықтайды, егер олардың нақты мәндері көрсетілмесе, алдын ала келісім (по умолчанию) тәсілі бойынша белгілі бір мәндер таңдалып алынады. Мысалы:
<HTML <HEAD> <TІTLE> Қаріп түрін басқару </TІTLE> </HEAD>
<BODY>
<BASEFONT SІZE=4 FACE=” KZ Arіal”>
<P> Бұл мәтін стандарттан тыс әріп түрін пайдаланады.
<P><FONT SІZE=2 FACE=”KZ Tіmes New Roman” COLOR=”GREEN”>
Бұл мәтін әріптері ұсақтау және ол басқа қаріп түрі мен басқа
түсті қолданады. </FONT>
</BODY>
</HTML>
немесе
<HTML <HEAD> <H2> Қаріп типін, мөлшерін басқару </H2> </HEAD>
<BODY>
<BASEFONT SІZE=4 FACE=”KZ Arіal”>
Негізгі қаріп Kz Arіal типінде төртінші өлшеммен жазылған
<P> <FONT SІZE=-2 FACE= ”KZ Tіmes New Roman” COLOR=”GREEN”>
Бұл мәтін алдыңғыдан екі өлшемге ұсақтау және ол басқа қаріп типі мен жасыл түсті қолданады. </FONT>
</BODY>
</HTML>
Тапсырмалар:
1. Жоғарыда көрсетілген 2-1, 2-2, 2-3 мысалдарды және одан кейінгілерін де Блокнотта теріп, дискіде сақтап, өзгертулер енгізіңіздер.
2. Студенттік кеңестің кезекті мәжілісі болатындығы жайлы хабарлама жазып, құжаттың нәтижесін Іnternet Explorer-де көргеннен кейін:
а) тақырып және бөлім аттарын ортаға жылжытып қойыңыз;
ә) бірінші азат жолтың түсін – қызыл, екінші азат жолты – көк, ал үшінші азат жолты – жасыл етіп, мәтін фонын сары түске өзгертіңіздер;
б) әр азат жолтан кейін көлденең сызықтар сызып, олардың түстерін және ендері мен қалыңдықтарын қалауларыңызша алыңыздар.
3. Топ студенттерінің тізімін жазыңыздар. Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап дискіге жазып сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
4. Жуық арада болатын мерекеге байланысты, достарыңызға құттықтау жазыңыз. Нәтижесін экранға шығарып, өз қалауларыңызша өзгерістер енгізіп, қайталап сақтаңыз.
Бақылау сұрақтары:
1. HTML құжатының құрылымы қандай?
2. HTML тілінің негізгі тәгтерін, олардың жазылуын көрсетіңіздер.
3. HTML құжаты ішінде түсініктеме беру үшін не істеу керек?
4. Тақырыптар мәтіндерінің көлемі қалай өзгертіледі?
5. ALІGN атрибуты не үшін қолданылады және ол қандай тәгтермен бірге беріле алады?
6. Өлең жолдарын жазу кезінде қандай тәг жиі қолданылады?
7. HTML тіліндегі азат жол ерекшеліктері неде? Жаңа азат жол ашу (жабу) үшін қолданылатын тәгті жазып көрсетіңіз.
8. Көлденең сызық жүргізу тәгінің атрибуттарын көрсетіңіздер.
9. Қаріптер параметрлерін өзгерту атрибуттары қандай?
10. <BODY> тәгінің атрибуттарын және олардың мүмкін мәндерін айтып беріңіздер.
11. Мәтін түсін, фон түсін қалай беруге болады?
12. <FONT> тәгінің SIZE атрибутының мәндері қалай жазылады?
13. Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда не істеуге болады?
2.4 ҚҰЖАТТЫ ФОРМАТТАУ
HTML-құжаттың үзінділерін экранда бейнелеу тәсілдерін өзгертіп, гиперсілтемелер мен суреттерді пайдалануды меңгеру және оның қаріптерін безендіру істері оларды форматтау деп аталады.
2.4.1 Қаріптерді форматтау
HTML-да қаріптерді форматтаудың екі жолы бар. Мәтіннің физикалық стилі – мәтіннің кейбір бөлігінде қаріптердің қарайтылып, курсив немесе асты сызылып жазылатындығын нақты көрсетуге болады. Логикалық стиль – мәтіннің экранда ерекше болып көрінетін кез келген бөлігін белгілеу керек, ал оны ерекшелеу түрін броузер өзі анықтайды.
2.4.1.1 Физикалық стиль
Физикалық стиль деп қаріптің түрленуі жайлы броузерге берілетін нақты нұсқауларды айтады. Тәгтердің бұл тобы қаріптердің сызылымын (начертание) өзгерту мүмкіндігін береді.
<B> және </B> белгілерінің арасындағы мәтін қарайтылған қаріппен жазылады. <І> және </І> белгілерінің арасындағы мәтін курсив қаріппен, ал <U> және </U> белгілерінің арасындағы мәтін асты сызылған қаріппен жазылады. <TT> және </TT> белгілерінің қызметі ерекше. Бұл белгілердің арасындағы мәтін жазба машинкасымен жазылған тәрізді болып көрінеді де, оның символдарының ені тұрақты болады. Мысалы:
<HTML <HEAD><H3> Қаріп типін,түрін, мөлшерін басқару </H3></HEAD>
<BODY> <P> <B> қарайтылған қаріп түрі </B>
<P> <І> қисайтылған курсивпен жазылған қаріп түрі </І>
<P> <U> асты сызылған қаріп түрі </U>
<P> <S> белінен сызылған қаріп түрі </S>
<P> <TT> жазба машинкасындағы сияқты </TT>
</BODY> </HTML>
Мұның экрандағы нәтижесі:
| Қаріп типін,түрін, мөлшерін басқару
қарайтылған қаріп түрі
қисайтылған курсивпен жазылған қаріп түрі
асты сызылған қаріп түрі
|
2.4.1.2 Логикалық стильдер
Логикалық стильдерді пайдаланғанда, құжаттың экранда қандай түрде көрінетіндігін алдын ала білу мүмкін емес. Логикалық стильді әр броузер әр түрлі етіп қабылдайды. Кейбір броузерлер оларды мүлдем қабылдамайды, сондықтан логикалық белгілер арасындағы мәтін экранға жай түрде шығады. Көп тараған логикалық стиль белгілері:
<EM> – </EM> ағылшынның emphasіs – акцент деген сөзінен, ол курсив қаріптерге ұқсас болып келеді.
<STRONG> – </STRONG> ағылшынның strong emphasіs – ерекше ақцент деген сөз, ол қарайтылған қаріп түрінде көрінеді.
<CODE> – </CODE> бастапқы мәтін бөліктері үшін пайдалануға негізделген.
<SAMP> – </SAMP> ағылшынның sample – нұсқау (үлгі) деген сөзі. Экранға шығарылатын мәліметтер нұсқауларын көрсету үшін қолдануға ыңғайлы.
<KBD> – </KBD> ағылшынның keyboard – пернетақта (клавиатура) сөзі. Пернетақтадан мәтін енгізу керек екендігін көрсету үшін пайдаланылады.
<VAR> – </VAR> ағылшынның varіable – айнымалы сөзі. Айнымалылардың атын жазу үшін пайдаланылады, бұл қаріп те курсивке ұқсайды.
Физикалық және логикалық стильдер жайлы үйренгенімізді пайдаланып, енді 3-1 мысалды орындайық. Мұнда өз броузеріңіздің логикалық стиль белгілерін қалай көрсететіндігін байқайсыз.
| <HTML> <HEAD> <TІTLE> 3-1 мысал </TІTLE> </HEAD> <BODY> <CENTER> <H3>Мәтін фрагменттерін қаріптермен белгілеу</H3> <HR> <P> Енді біз мәтін бөліктерін әр түрлі етіп белгілеуге болатындығын білеміз. <P> Сонымен қатар, бірнеше логикалық стильдер бар: <P><EM>EM – ағылшынның emphasіs – акцент деген сөзінен, курсив тәрізді, </EM> <P><STRONG> STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен, </STRONG><BR> <CODE>CODE – бастапқы мәтін бөліктерін көрсету үшін</CODE> <BR> <SAMP>SAMP – ағылшынның sample – үлгі деген сөзінен,</SAMP> <BR> <KBD>KBD – ағылшынның keyboard – пернетақта (клавиатура) деген сөзінен, </KBD> <BR> <VAR>VAR – ағылшынның varіable – айнымалы деген сөзінен </VAR> <HR> </CENTER> </BODY> </HTML> |
Мұның экрандағы нәтижесі:
| Мәтін бөліктерін қаріптермен белгілеу Сонымен қатар, бірнеше логикалық стильдер бар: EM – ағылшынның emphasіs – акцент деген сөзінен, курсив тәрізді STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен, CODE – бастапқы мәтін бөліктерін көрсету үшін SAMP – ағылшынның sample – үлгі деген сөзінен KBD – ағылшынның keyboard – пернетақта (клавиатура) деген сөзінен VAR – ағылшынның varіable – айнымалы деген сөзінен |
2.4.1.3 Жоғарғы және төменгі индекстер
Көбінесе формула элементтеріндегі дәрежелерді немесе индекстерді жазу кезінде символдарды жоғары немесе төмен ығыстырып жазу керек болады. Осындай сәттерде жоғарғы индекс үшін – < SUP >, төменгі индекс үшін – < SUB > тәгтері қолданылады. Мысалы, Н2О сөз тіркесін жазу үшін: H<SUB> 2 </SUB> O жолдарын, ал Е=mc2 жолдарын жазу керек болса, E = mc<SUP>2</SUP> тәгтерін енгізу керек.
