Разработка электронного учебника

    Абсолют сілтемеде толық URL адрес арқылы беріледі, яғни мұнда Web-адресі толық пайдаланылады. Абсолют сілтеме қажетті Web-бет орналасқан Web-түйіннің алғашқы бетін ашады. Бұл сіздің броузеріңізге қажетті серверді тауып, оған ауысуға мүмкіндік береді.

    Салыстырмалы сілтеме сіз өзіңіз орналасқан сервердегі адреске кіруде қолданылады. Бір Web-түйіннің ішінде, бір буманың ішінде орналасқан бет үшін тек файл атауын беру арқылы, оны ашып алуға болады.

    Алғашқы  кездері гиперсілтеме деп аталған әдіс уақыт өте келе дамытылып, сілтеме ретінде мультимедиа құралдарын да қолдануға болатындығын көрсетті. Осыған байланысты қазіргі кеде гипермедиа термині пайда болды.

    HTML тілінде сілтемелік байланысты <А> ... </А> қосарланған тәгі ұйымдастырады. Бұл тәгтің HREF=”…” атрибуты бар. Оның мәні көбіне сол сілтеме көрсетіп тұрған файл атынан немесе URL адресінен тұрады. Сілтеме сөз броузерде бейнеленген кезде көбінесе оның асты сызылып, көк түспен бейнеленеді. Сол сілтеме желі бойындағы URL адреске көшуді қамтамасыз етеді.

    <A> … </A> қосарланған тәгінің арасына жазылған кез келген мәтін гипермәтіндік мәтін болып табылады. Сонымен қатар гиперсілтеме ретінде тек сөз тіркесін ғана емес суреттерді де пайдалануға болады. Суреттер мәтін сияқты сілтеме бола алады. Бұл үшін <IMG …> тәгі сілтемелерді анықтайтын  <A> … </A> тәгтерінің арасында орналасады. Суреттік сілтеме көк түсті қоршаудың ішіне орналасады.

     HTML тілінде мәтін форматтаудан Web-дизайнға өтудің алғашқы қадамы Web-бетке сурет орналастырудан басталады. Суреттер Web-бетті тек безендіріп қана қоймай, пайдаланушыға ақпараттың түсінікті берілуіне, беттегі ақпараттың логикалық тізбектерін құруға т.с.с. Web-беттің негізгі сипаттамаларына әсер етеді. Суреттік бейнелер Web-беттерді әшекейлеп безендіру кезінде маңызды құралдар рөлін атқарады. Суреттердің өздері          HTML-құжаттарынан бөлек орналасқан жеке файлдарда сақталады, алайда олар броузер арқылы Web-беттердің ішінде бейнеленеді. Суреттерді бейнелеу ережелерін былай беруге болады.

1. Суреттерді құжаттардың ішінде орналастыру үшін <IMG> жеке, яғни жабылмайтын жалқы тәг қолданылады.
2. Бұл тәгте міндетті түрде SRC=”…” атрибуты болуы керек, оның мәнін абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL-адресі көресетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді және ол <IMG> тәгі тұрған орыннан көрінеді. Мысалы мына жол:

                   <IMG SRC=”1.gif”>

     экранға 1.gif файлындағы суретті шығарады.

• Егер графикалық файл HTML-құжаты орналасқан бумада болса, онда файлдың атын төмендегіше көрсетсе жеткілікті:

                        <IMG SRC=”1.gif”>

• Егер сол серверде, бірақ басқа бумада болса, онда буманың және файлдың аты былайша көрсетіледі:

                        <IMG SRC=”LG/1.gif”>

• Егер файл басқа серверде орналасса, онда оның URL-адресін, яғни толық адресін көрсету қажет:

                 <IMG SRC=”http://www.mktu.kz/lg/1.gif”>

    Суреттерді  кез келген графикалық редакторларда салуға немесе сканерден өткізіп алуға болады, бірақ олар jpg немесе gif форматында болуы қажет, ал басқа форматтарды Web қабылдамайды. Кез келген jpg немесе gif форматындағы суреттерді тауып, оны LG бумасына көшіріп, суретті ортаға орналастыруға болады.

    Web-парақтарында қолданылатын графикалық бейнелеулердің қосымша параметрлері төмендегідей:

• MIDDLE немесе CENTER – ортасымен туралау (ALIGN=middle немесе center);
• LEFT - өрістің сол жағымен туралау (ALIGN=LEFT);
• RIGHT - өрістің оң жағымен туравлау (ALIGN=RIGHT);
• TOP – жоғары шетімен туралау (ALIGN=TOP);
• BOTTOM – төменгі шетімен туралау (ALIGN=Bottom);
• Alt=“…” – суреттің орнына оның сипаттамасын шығаруға мүмкіндік береді.
• HSPACE=“…” – суреттің оң және сол жағынан бос орындар қалдыруға мүмкіндік береді. Оның мәні сан түрінде анықталады.
• VSPACE=“…” – суреттің жоғарғы және төменгі жағынан бос орындар қалдырылады. Мәні сан түрінде анықталады.

    Суреттер өздерінің көлемдерін сақтай отырып Web-парағына орналасады. Егер суретті ықшамдап бейнелеу кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін WIDTH=(ені) және HEIGHTһ(биіктігі) атрибуттарының көмегімен беруге болады. Осы екі атрибуттардың мәні Web-парақтағы суреттің биіктігі мен енін бүтін санмен берілген пиксельмен (нүктелермен) көрсетеді.

     Төмендегі жол

<IMG SRC=“1.gif” WIDTH=500 HEIGHT=250>

суретті 500х250 нүктелерден  тұратын төтрбұрышты аумаққа  орналастырады. Сурет айналасындағы  жақтау (рамка-border) сызығының қалыңдығын да параметр ретінде пиксельмен көрсетуге болады:

           Border═пиксельдер саны

    HSPACE  және VSPACE атрибуттары көлденең және тік жиекті (отступ) білдіреді. Олар бейненің шетінен мәтінге дейінгі жиекті көрсету үшін қолданылады. Мәтін мен бейненің тым жақын орналасқаны әдемі көрінбейді.

    Кесте – мәліметтердің үлкен көлемін ұсынудың ең ыңғайлы әдістерінің бірі. Кестелердің HTML құжаттарға енгізілуі кестелік берілгендерді экранға шығару мақсатында пайда болды. Онда мәтіндік берілгендермен қатар графикалық берілгендерді де орналастыруға болады.

    HTML құжатына кестелер <TABLE> және </TABLE> қосарланған тәгтері арқылы орналастырылады. Көбінесе жабылу тәгін жазбай ұмытып кетеді, осы қатенің нәтижесінде алдын ала көру программасы кестені шығармайды.

<TABLE> тәгінің параметрлері:

• BORDER – шекараның немесе сызықтың ені;
• WIDTH – кестенің ені;
• BGCOLOR – кесте түсінің фоны.

    Тәгтердің арасында келесі элементтер орналасуы мүмкін.

1. </CAPTION> - кесте атауы. Кесте атауының орналасатын орнын анықтайтын CAPTION тәгінің бір ғана ALIGN параметрі бар. Ол екі мәнді қабылдай алады:

• ALIGN = top – кестенің жоғарғы жағында;
• ALIGN = bottom – кестенің төменгі жағында.
2. .  <TR> Кесте қатары </TR>. Бұл тәгтің үш параметрі бар:
• ALIGN – қатардың ішінен туралау, оның мәндері LEFT (сол жағынан), RIGHT (оң жағынан), CENTER (ортасынан);
• VALIGN – кесте қатарының ішін тігінен туралау, оның мәндері TOP (жоғарыдан), BOTTOM (төменнен), MIDDLE (ортасынан);
• BGCOLOR – қатардағы ішіндегі түстің фоны.
3. . <TD> Кесте бағаны </TD>. Кесте бағанының тәгі келесі  параметрлерді қабылдайды:
• ALIGN – бағанның ішінен туралау, оның мәндері LEFT, RIGHT,                    

               CENTER;

• VALIGN – кесте бағанының ішін тігінен туралау, оның мәндері            TOP, BOTTOM, MIDDLE;
• COLSPAN, ROWSPAN – ұяшықтарды бірнеше қатарға, бағанға созу;
• BGCOLOR – бағанның ішіндегі түстің фоны.

    Қатарға немесе бағанға атау беру үшін <TH> Тақырыбы </TH> қосарланған тәгін пайдалануға болады. Ол келесі параметрлерді атрибуттарды қабылдау мүмкін:

• ALIGN – туралау;
• VALIGN – тігінен туралау;
• COLSPAN, ROWSPAN – ұяшықтарды бірнеше қатарға, бағанға созу;
• WIDTH – атаудың ені;
• BGCOLOR – атаудағы түстің фоны.

    Жоғардағы айтылған атрибуттарды пайдаланып кестеге атау енгізуге болады.

    Web-парақтарды қарастырғанда қарапайым кестелер сирек кездеседі. Көбінесе ұяшықтарды қамтитын күрделі кестелер жиі кездеседі. Ұяшықтарды біріктіру үшін COLSPAN және ROWSPAN атрибуттары қолданылады.

    COLSPAN атрибуты броузерге кестенің ұяшықтарын бірнеше бағандарға жылжыту командасын береді. Мысалы, екі бағанның ұяшықтарын біріктіргіңіз келсе, онда COLSPAN═2 деп жазу керек. ROWSPAN═2 параметрі кестенің ұяшығын екі қатарға созады.                                     

    BORDER атрибут жиектің енін орнатады және 0-ден 10-ға дейінгі кез келген мәнді қабылдайды. COLSPAN және ROWSPAN атрибуттарын қолданып жазуға болады.

    Кей жағдайда кесте ұяшықтарының параметрлері бір-бірімен сәйкес келе бермейді, яғни ұяшықтардың ені, биіктері, ішіндегі ақпараттың орналасуы, т.с.с. түрліше болуы мүмкін. Бұл жағдайда ұяшықтардың атрибуттары қолданылады.

    Кестені құрғанда оның бағанының ені осы бағанның енді элементімен сәйкес келеді. Бірақ оның енін дәл беру үшін оған WIDTH атрибутын пайдаланған жөн.

        HTML-де кестенің ерекшелігін мәтінді форматтауға қолдануға болады. Мысалы, сізге мәтінді шетінен жылжытып, сол жақ шекарамен туралау керек болса, онда кестенің жиектерін көрсетпей, яғни BORDER═0 деп  кестенің тәгтерін пайдалануға болады.

    Web-сайт негізін құруда пайдаланылатын тағы бір қосымша – фрейдер. Бұл Web-парақтардағы мәліметтерді көрсетіп отыратын күшті механизмдердің бірі. Фреймдердің көмегімен экран беті бірнеше облыстарға бөлінеді, олардың әрқайсысында жеке парақтардың мазмұны көрініп тұрады.

    Фреймдерді құру үшін <FRAMESET> және </FRAMESET> қосарланған тәгі пайдаланылады, ал оларды сипаттау үшін <FRAME> тәгі қолданылады. Web-парақтарды фреймдердің көмегімен құру үшін HTML-дің бір ғана құжаты жеткіліксіз. Әдетте онда негізгі  құжат құрылады, содан кейін қосымша құжаттар құрылады.

    Бұдан басқа <FRAMESET> тәгінің COLS атрибуты арқылы экран теңдей екі бағанға бөлініп тұрады (COLS ═“50%”, “50%”).

    Фреймдерді көлденеңінен де орналастыруға болады. Фреймдерді тігінен орналастырғанда  <FRAMESET COLS> тәгін пайдалану керек. Ал көлденең орналастыру үшін FRAMESET тәгінің ROWS атрибутын пайдалану керек.

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1.3  HTML тілінің  мүмкіндіктері

 

    Web-беттің дизайн тиімділігі оның қаншалықты деңгейде дайындалғанын анықтайды. Дизайн тиімділігі деген не? Бұл Web-беттің сыртқы түрінің түсінікті әрі әдемі безендірілуі. Қаріптермен жұмыс істей білу осы дизайн тиімділігіне қол жеткізудің негізгі шарттарының бірі. Сондықтан әрбір Web-бет құрушы қаріптермен жұмыс істеу тәсілдерін толық меңгеруі тиіс.

    Қазіргі кезде қаріптер өте көп болғандықтан оларды төмендегідей үш топқа бөлуге болады:

1. Категория – қаріптердің негізгі класы (мысалы, serief, sans-serif және т.б.).
2. Гарнитура – белгілі бір қасиеттеріне байланысты топтастырылған қаріптер класы (мысалы, times, arial және т.б.).
3. Кескін – әрбір қаріптің қайталанбайтын өзіндік ерекшелігі (мысалы, қалыңдатылған, қисайтылған, т.б.).

    Мәтін жазуда сөзді ерекшелеудің әртүрлі жолын пайдалануға болады.

    Мәтін фрагментін қалыңдатылып қарайтылған қаріптермен (Bold) ерекшелеуге болады. Сонда мәтіннің түрі осы абзацтағыдай болып көрінеді. Ол үшін <B> ашылу тәгі мен </B> жабылу тәгі пайдаланылады.

    Мысалы, <B> мәтін </B>.

    Кейбір ерекше сөздердің астын сызуға (Underline) болады.

    Бұл жағдайда <U> және </U> тәгтері қолданылады.

    Көп жағдайда сөздерді ерекшелеуде қисайтылған (курсив) (Italic) қаріп түрін пайдаланады. Ол үшін <I> және </I> тәгтерін пайдаланған жөн.

    Егер мәтінді бір уақытта қалыңдатып қарайтылған және қисайтылған қаріптердің түрлерімен ерекшелегіңіз келсе, онда келесі түрдегі тәгтерді қолданыңыз:

<I><B> мәтін  </B></І>

<B><І>  мәтін </І></B>

    HTML-де қаріптермен жұмыс істеу <FONT> тәгімен жұмыс істеуге негізделген. Қаріптерді басқаратын <FONT> тәгінің өз атрибуттары бар:

• size – мәтін таңбаларының биіктігі;
• color – қаріп түсі;
• fase – қажетті қаріп атауының типі.

    Қаріптің өлшемін үлкейтуге немесе кішірейтуге болады. Олар пунктпен есептеледі, яғни 1 пункт 1/72 дюймге немесе 0,353 мм-ге тең. Ол программадағы орнатылған қаріптің өлшеміне салыстырмалы түрде беріледі:

<FONT SIZE=+N> мәтін  </FONT>

<FONT SIZE=-N> мәтін  </FONT>

мұндағы n – қаріптің өлшемін үлкейтетін немесе кішірейтетін пункттің саны. <font size=±n> және </font> тәгтерінің арасында орналасқан қаріптің түрі үлкейтіледі немесе кішірейтіледі.

    FASE атрибуты қаріптің типін береді. Осы атрибуттың мәні компьютерде орнатылған қаріптер атының біріне сәйкес келуі керек. Бірақ интернетте орнатылған құжатты қабылдайтын тұтынушының компьютерінде қандай қаріптердің орнатылғанын алдын ала білу қиын. Сондықтан бұл атрибутты көрсетпеген дұрыс.    

    Интернет броузері кез келген ақпарат орналаса беретін универсал орта. Сондықтан онда мәтіндік, графикалық ақпараттармен қатар  мультимедиалық ақпаратты да кірістіруге болады. Мультимедиалық ақпарат көбіне дыбыстық және анимациялық құбылыстар түрінде бейнеленеді.