Оқу құралы "Web - дизайн"

 

 

 

 

 

 

 

 

 

 

 

 

 

 

«Web-дизайн»

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Дәрістер  жинағы  «Ақпараттық жүйелер» мамандығы бойынша  оқитын студенттерге арналған.

 

 

 

 

 

                                                                              

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Мазмұны

 

Алғы сөз	…………………………………………………………….	3
Модуль1	HTML тіліне  кіріспе
	Бүкіләлемдік  компьтерлік  Интернет   жүйесі.   World  Wide   Web  (бүкіләлемдік   өрмек).	4
	HTML тіліне  кіріспе. Тілдің  атқаратын  қызметі, командалары.	5
	HTML құжатының құрылымы.Құжаттың функциональдық бөлігі мен  негізгі бөлігі .	7
	Қаріп(шрифт) стильдерін  басқару . Логикалық  стильдер.	8
Модуль2	HTML  тілінің     негізгі  мүмкіндіктері.
	HTML  тілінде тізімдер  жасау  тегтері. Қабаттастырылған  ішкі  тізімдер.	11
	HTML  құжатында  кестелерді  қалыптастыру.	13
	Гипермәтіндік  сілтемелерді  ұйымдастыру.	16
	HTML  құжатында графиканы қолдану.	17
	Фрейм  құрылымы. (Web парақта  бірнеше  құжаттардың  орналасуы)	19
	HTML  құжатында   формаларды  өңдеу:  айырғыштар, флажоктар.	21
	HTML  құжатындағы  мультимедиялық  объектілер.	22
Модуль3	HTML  тегінің  редакторы .Web сайтты  басқару.
	HTML   тегінің  редакторы. MS  Front  Page HTML    редакторы.	23
	Дербес  Web  сайтты  құру.	25
	Web  сайтты  басқару. Web  сайтты  WWW   орналастыру.	26
Қолданылған әдебиеттер  ……………………………………………………..		28

 

 

 

 

 

 

 

 

Алғы сөз

Қазіргі кезде Web – парақты құру  үшін  HTML  ( Hypertext   Markup language – гипертексті  бөлу  тілі)    тілі  қолданылады ,   яғни  құжатқа қойылатын  тегтердің   көмегімен  құжаттың  логикалық   құрылысын   сипаттайды ,   құжатты  форматтауды   және  обьектілерді   қоюды  басқарады. WWW  айырмашылығынан   ерекшеліктері   тақырыбы   бойынша   байланысты,  адресі  анық  түрде  көрсетілмеген   бір  құжаттан   басқа   құжатқа   ауысу  жабдығының бар  болуы  болып    табылады .  

HTML   гипертекстік  тілін  1989  жылы   World   Wide   Web   гипертекстік  жүйесін  бөлудің  өңдеу  технологиясының   компоненттерінің   бірі  ретінде  Тим Бернер – Ли  ұсынды.

Бұл оқу  құралы  жазушылардың басы артық лирикасын ұнатпайтындар үшін аса қажетті. Оқу құралы компьютерлік желі Интернет үшін басылымды құруға арналған. Мұнда HTML  тегтерінің көмегімен электрондық құжаттарды  құру технологиясы және оларды басылымдау әдістері қарастырылған. Теориялық білім мысалдар арқылы қолданысы анықталған. Сонымен қоса, оқулықта HTML-де қолданылатын тегтер қызметі мен арнайы символдар жайында қарапайым тілде түсінікті етіп баяндалған.  Оқу құралын пайдалана отырып,  сіздер Интернет үшін басылымдарды құру мүмкіндігін  жүзеге асыратын негізгі командаларды меңгере отырып,  өзіңіздің Web- сайтыңызды  құруыңызға болады.

Бұл оқу құралының көмегімен Web- сайтты  құрумен қоса,  оны басқару мен  желіге орналастыру әдістерін де біле аласыздар.

 Жаңа технологиялардың дамуы, оларды пайдалануын   ескерсек Web   парақтарды құруда қарапайымдылығы   мен   әмбебаптығымен   ерекшеленетін   HTML тілін   меңгерудің   маңызы зор. 

 

 

 

 

 

 

Бүкіләлемдік  компьтерлік  Интернет   жүйесі.

World  Wide   Web  (бүкіләлемдік   өрмек).

 

     Интернет  сөзі  Бүкіләлемдік  компьтерлік  желі  дегенді  білдіреді.   Қазіргі  уақытта  Интернет  бірнеше  қызметтерді  атқарады:  электрондық  пошта,  WWW (бүкіләлемдік  өрмек),    IRC ( Internet  Relay  Chat – нақты  уақыт  режимінде  бірнеше  адамдардың  тікелей  бір – бірімен  араласуы),   IRG  (берілген  моментте  Интернетке қосылған  адамның  желідегі   IR  адресін  іздеуге  арналған  қызмет),    файлдарлы  тасымалдау  қызметі  (FTP),  телеконференция  қызметі  (USENT).

    Интернетке  жұмыс  жасау  үшін  мыналар  қажет:

ü Бүкіләлемдік  желі  түйіндерінің  біреуіне  компьютерді  қосу;

ü IP адресті   алу;

ü Интернет   қызметінің   қолдануға  болатын  программа – клиент  қызметінің  программалық  қамтамасыздандыруын  құру  және  қайтадан  күйге  келтіру.

       Өз  түйіндеріне  қосуға  мүмкіндік  беретін  және   IP – адресін   белгілейтін     мекемелер  Интернет  қызметін  тасымалдаушылар (сервис - провайдер)   деп  аталады.  Интернетке  қосылу белгіленген  немесе  коммутативті  болуы мүмкін.  Белгіленген  қосылу  жаңа  немесе  дайын  физикалық  сызықтарының   (кабельдік,  радиоканал,  спутниктік  канал)   орнын   анықтайды.  Оны  көп  көлемді  берілгендерді  тасымалдауды қажет  ететін   мекемелер  және  кәсіпорындар   қолданады.  Коммутативті   біріктіру уақытша  болады,  арнайы  байланыс  сызығын  қажет  етпейді  және  телефон  желісі   арқылы жүргізілуі  мүмкін.  Коммутацияны   телефон  номерін  теру  кезіндегі  сигнал  бойынша  АТС  орындайды.  Интернетке  телефон  желісі  арқылы   қосылу  үшін   ақпараттарды   цифрлық  түрге   алмастыру  үшін   қолданылатын   арнайы  құрылғы - модем  керек.

       Модемдер  сыртқы  және  ішкі  болып  екіге  болінеді.   Бүгінде  Интернет білім  алудың  әртүрлі  салаларында  әржақты  ақпараттардың  түпнұсқасы  ретінде  қолданылады. Құжаттарды  беруді  басқаратын  Интернет   қызметін  World  Wide   Web  деп  атайды.   WWW   құжаттары  Интернетке    тұрақты  түрде  қосылатын  компьютерлерде -   Web - серверлерде  сақталады.  Web – серверлерде  бөлек  құжат  емес,   өзара  байланысқан  құжаттардың  тобы  орналасады.  Мұндай топ   Web – түйінді  (Web- сайт)  береді.  Дайын  материалдардың   Web- сайтта  орналасуы  Web – басылым  немесе  Web – публикация   деп  атайды.  WWW – дағы  жеке  құжат  Web – парақ  деп  аталады.  Бұл  текстен,  графикалық   иллюстрациялардан  мультимедиялық  обьектілерден    тұратын   құжаттардың   жиынтығы.   Web – парақты құру  үшін  HTML  ( Hypertext   Markup language – гипертексті  бөлу  тілі)    тілі  қолданылады,   яғни  құжатқа қойылатын  тегтердің   көмегімен  құжаттың  логикалық   құрылысын   сипаттайды,   құжатты  форматтауды   және  обьектілерді   қоюды  басқарады. WWW  айырмашылығынан   ерекшеліктері   тақырыбы   бойынша   байланысты,  адресі  анық  түрде  көрсетілмеген   бір  құжаттан   басқа   құжатқа   ауысу  жабдығының бар  болуы  болып    табылады .   Құжаттар  арасындағы  байланыс  гипертекстік  сілтеменің  көмегімен   жүргізіледі.   Гиперсілтеме – бұл  басқа да  Web – құжаттың  адресін ассосациялайтын  құжаттың  белгіленген  фрагменті  (текст  немесе  иллюстрация).

       Гиперсілтемені   қолдану  WWW   бойынша  нақты  бір  беттердің  адресін  қолданбай  тақырыбы  бойынша  табуды  ұйымдастырады.   Интернеттегі  құжаттар  электрондық  формада  бейнелеуге  арналған.  Нақты  компьютерде құжатты  форматтау  және   бейнелеу  броузер  деп   аталатын   арнайы  программаның   көмегімен   жүргізіледі.  Интернет  жағынан   WWW  қызметінің    жұмысын   серверлік   программалық    жабдық – Web – серверлер   қамтамасыз  етеді.     Клиент  жағынан   жұмыс  клиент  программалары    Web – броузерлермен   қамтамасыз   етіледі.   Ең  көп  қолданылатын   броузерлер  - Internet  Explorer,  Netscape   Navigator  және  Opera. Броузерлердің қасиеттері программадан   Сервис - Настройка   командасымен  және  Басқару   панелі  арқылы  орындалады.

      Интернеттің  үш  функциясы  бар:    коммуникациялық,  ақпараттық  және  басқаратын WWW -  ақпараттыққа   жатады. Іздеу жүйесі арнайы Web  түйіндерден  тұрады.   Қолданушы  іздеу жүйесіне іздеуге қажетті Web-парақ туралы берілгендерді  хабарлайды,  ал іздеу  жүйесі сәйкес сұраныс бойынша бетке гиперсілтемелердің тізімін шығарады. Іздеу жүйесінің негізінде жұмыс жасайтын бірнеше модельдер  бар,  бірақ та іздеу көрсеткіштері мен іздеу каталогтарының орны ерекше зор .Іздеу каталогтары кітапханадағы  тақырыптың  каталогтар принципі тәрізді құрылған. Каталогқа назар аудара  отырып, біз оның негізгі бетінде  қысқартылған  ең ірі  тақырыптың,  категориялардың  тізімін көреміз. Бұл категория  тізіміндегі әрбір жазба –бұл гиперсілтеме. Оған басу берілген тақырып бойынша  толықтай іздеу  каталогының ақпарат беретін келесі бетін ашады . Тақырыпқа басуды жалғастыра отырып  нақты Web парақ тізіміне жетуге дейін болады. Іздеу көрсеткішінің іздеу каталогынан  айырмашылығы Web түйіндерді  кең көлемде қамтиды және кілттік сөз бойынша іздейді.

 

HTML –ге  кіріспе.  HTML  тілінің  атқаратын  қызметі,  командалары.

           

             HTML   гипертекстік  тілін  1989  жылы   World   Wide   Web   гипертекстік  жүйесін  бөлудің  өңдеу  технологиясының   компоненттерінің   бірі  ретінде  Тим  Бернер – Ли  ұсынғаны  белгілі.   Гипертексті  бөлу  негізіне  құжаттың  әрбір  элементі  тегтерімен  қоршаған   элементтердің   жиынтығы  түрінде  көрсетуге  болатын   құжатты   сипаттаудың  тегтік  моделі  жататын  болған.   Өзінің  мәні   бойынша  тегтер  программалау   тілдеріндегі  «BEGIN / END»   жақша  ұғымдарына   жақын  және  локальды    айнымалылардың  HTML   аттарының  арасындағы  амалдардың  облысын  білдіреді ,  құжаттағы  тексттік  э лементтерді   түсіндіру  ережелерінің  амалдарын   анықтайды  және  т. б.

HTML  тілінің  атқаратын  қызметі .

 Web – парақтары  экранда  ықшам   түрде безендіріліп,   көрсетілгенмен,  HTML   тілі  мәтіндерді  пішімдеп   көрсететін  тілге  жатпайды.  Өйткені  әрбір  тұтынушы   әртүрлі  компьютерлерді  пайдаланады.   Сол  себепті  жаңа  ғана  зауыттан  шыққан  бір  компьютердің   Windows   жүйесінде  жұмыс  істей  алатын  броузері бар  болса,  екінші  бір  тұтынушы  компьютері  тек  MS    DOS  жүйесінде   жұмыс  істейтін   ескі  броузерді  пайдалануы   мүмкін.   Бұл  екеуінің  көрсету  мүмкіндіктері   әртүрлі    болғандықтан,   бір   файл  екеуіне   2  түрлі  болып  көрсетіледі.  Ал  үшінші   компьютердегі   Web – парақтың  мәтіндері  зағиптарға  арналған.   Брайль  қаріптері  арқылы  берілсе,  оның   нәтижесі    тіпті   басқаша   болады.   Құжаттарды  әртүрлі  тұтынушының   әртүрлі  құрылғыларда  және  әртүрлі  броузер    программалармен  көретіндіктерін   ескерсек,   HTML   тілін  мәтіндерді  форматтау  тәсілдерін  жазуға   арналған   тіл  деп  атауға    болмайды.   Ол  Интернеттегі  мәтін  бөліктерінің   атқаратын қызметін  анықтап,   соларды  әрбір  тұтынушыға   бейімдеп  жеткізе  алатын  құжатты   функционалды   түрде   белгілейтін  тіл  болып  табылады.  

    HTML   командалары.

  HTML  тілінің    бастапқы   мәтінді   белгілейтін  командалары  тег (tag)  деп  аталынады.  Тег  символдар  тізбегінен тұрады. Барлық тег «кіші» (<) символдарынан басталады да,  «үлкен»  (>) символымен аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар  деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын  түйінді сөз – тег орналасады.

         HTML  тіліндегі әрбір тег бір арнаулы қызмет атқарады. Олардың жазылуында әріптер регисторы ешбір роль атқармайды, бас әріпті де, кіші әріптерді де қатар қолдана беруге рұқсат етілген. Бірақ тег атауларын жай мәтіннен айыру мақсатында оларды бас әріппен жазу қалыптасқан. HTML тілінің бір тегі әдетте құжаттың белгілі бір бөлігіне, мысалы бір абзацқа ғана әсер етеді. Осыған орай екі тег қатар қолданылады. Бірі – ашады, екіншісі – жабады. Ашатын тег белгілі бір әсер ету ісін   бастайды,  ал  жабатын  тег  сол  әсерді  аяқтайды.   Жабу  тегтері   қиғаш  сызық   символымен    басталуы  тиіс.

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

   Тег  атрибуттары.

 Көбінесе  ашылу  тегтерінің   тигізетін  әсерлерін  түрлендіретін  олардың   атрибуттары  болады.   Атрибуттар   немесе  сипаттамалар  -  тег  атауының  және  бір  бірінен   бос  орын   арқылы  бөлініп   жазылытын   қосымша   түйінді   сөздерден  тұрады.  Кейбір  атрибуттар  оның  мәнін  жазуды  талап  етеді.  Атрибут   мәні  оның  түйінді   сөзінен  теңдік  белгісі  (=)    арқылы   бөлініп  жазылады.    Атрибут  мәні   қостырнақшаға   алынып  жазылуы  тиіс,   бірақ   кейде  қостырнақшаны   жазбауға  да  болады.

Түсініктемелер           

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

                    

HTML құжатының құрылымы.Құжаттың функциональдық бөлігі мен  негізгі бөлігі .

 

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

1.     HTML құжатының кез-келгені <html> тегінен басталып  соған сәйкес жабылу </html>  тегімен аяқталады.

2.     Осы екеуінің ортасында құжаттың тақырыптың бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады. Құжатың тақырыптық бөлігі <head> типтерінің ортасында тұруы, жалпы құжат туралы мәлімет береді. Әдетте бұл бөлікті <title> тегтерімен шектелетін құжаттың ресми атауы орналасады. Бұл атау терезе тақырыбында тұратын функцияның аты.

3.     Жазылатын мәтін құжат тұлғaсы деп аталатын <body> </body> тегінің ортасында жазылады. Осы айтылған 4 тег HTML құжатының кез-келгенінде болуы тиіс.

          Мысалы: <html> <head> <title> құжат тақырыбы </title>

</head>

<body>

          бұл мәтін экранға шығады

</body>

</html>

              

 Құжаттың функционалдық бөліктерін анықтау.

  1. HTML тілі құжаттардың ішкі тақырыптарының көлеміне қарай 6 түрлі деңгейін жасай алады. Олар: <h1>…</h1>     <h6>…</h6> жалғасады.

  2. Жаңа жолдан басталатын абзацтарды белгілеу үшін <p> тегі қолданылады. Бір абзацты жаппай жаңа абзацты бастап кетсек , алдыңғы абзац автоматты түрде жабылады. Сондықтан <p> тегін жаппаса да болады. HTML тілінде азат жолдан басталмайды, тек абзацтар арасында бір бос жол қалдырылып кетеді. Көбінесе абзацтарды анық етіп бөліп тұру  үшін көлденең горизонталь сызық қойылады. Көлденең сызық қою <hr> тегімен орналастырылады. Оның жабу тегі болмайды.

3. Сөз арасында қойылған бірнеше бос орынның тек біреуі ғана көрініп тұрады. Сол сияқты келесі қатарға көшіретін Enter пернесі де HTML тілінде ешбір әсер етпейді.

     Егер абзац жасап бос жол қалдырмай жаңа жолға көшу қажет болса, онда жалғыз қолданатын <br> тегін пайдаланамыз.

 

Қаріп (шрифт) стилдерін басқару. Логикалық стильдер.

Сырғымалы жолдарды ұйымдастыру.

 

         HTML 4.0 нұсқасынан бастап кез-келген құжатты әдемілеп әшекейлеу ісін сол құжаттан бөлек жасау мүмкіндігі пайда болды. Алайда бұл концепция тек байқау сипатына ие болып отыр. Және оны көптеген броузерлер арқылы жасауға болмайды. Сол себепті HTML тілінде тек ғана тегтер бар.

       1. Әріптің мөлшерін, түсін және сызылымын таңдап алу үшін <font> тегін пайдаланамыз. Бұл қосарланған тег оның ашылған және жабылған тегтер арасында орналасқан барлық мәтінді түрлендіруге болады. <font> тегінде қолдануға болатын  size=…., color=…, face=…,  тәрізді, 3 атрибутының ең болмағанда біреуі тұруы тиіс: 1-ші атрибуты әріптің мөлшерін тағайындайды. Әріптің алдын-ала берілетін 7 түрлі көлемі бар. Олар :1-7 сандар. Егер сан көрсетілмесе келісім бойынша 3-ке тең деп саналады. color=   - әріптің түсін таңдау мүмкіндігін береді. face=  – қаріп (шрифт) типін береді. Осы атрибуттың мәні компьютерде орнатылған қаріп атының біріне сәйкес келуі керек.

       Мысалы:

           <body>

Алдарыңызда

<font color=”yellow” face= arial size=”4”>

төртінші  мөлшермен arial типімен аталған сары түсті әріптер.

</font>

</body>

        2. Осы параметрдің барлығын бүкіл құжат үшін бірден беру қажет болса, онда

 <base font> бір ғана тег пайдаланылады. Бұл тегте  де жоғарыда көрсетілген атрибуттарды пайдаланылады. Олар  қаріп түрін, мөлшерін, түсін анықтайды.

       3. Тегтердің тағы бір арнайы тобы қаріптің сызылымын өзгерту мүмкіндігін береді.

<b> және </b>    тегтері    араларында орналасатын мәтін қарайтылған  қаріпке ауысады.

<i> және </i>   тегтері қаріптерді   курсивпен  береді.

<u> және </u> тегтері мәтіндердің астын сызады , <s> және </s> тегтері белдерінен сызылған символдарды бейнелейді.

     Мысалы:  

<html>

<head> 

</head>

<body>

<base font size=5  face=”Arial kz ”>

негізгі қаріп Arial kz типінде 5-ші мөлшермен жазылған.

<p><font size=-2 face=”Times New Roman Kz ” color=”green”>

</font>

<p><b> қарайтылу </b>

<p><i> курсивті </i>

<p><u> астын сызу </u>

<p><s> белінен сызу </s>

</body>

</html>

 

Мәтін фрагменттерін логикалық стильмен безендіру.

      Логикалық стильдер <b>, <i>, <u> тегтері сияқты сөздерді ерекшелеп көрсетеді. Олар программа мәтінін жазғанда немесе цытаталар келтірілген кезде қолданады. Логикалық стильді пайдалану кезінде броузер экранға не шығаратынын айту қиын. Әртүрлі броузерлер экранға логикалық стильмен берілген символдарды әртүрлі етіп шығаруы мүмкін. <EM>...</EM>  акцент сөзінен шыққан яғни курсив түрінде берілетін мәтін бөлігін қоршап тұратын белгілер болып табылады.

     <strong> …</strong> күшті акцент деген сөзден шыққан мәтін ішіндегі қарайтылған қаріп болып көрсетіледі.

<code>… </code> программа мәтінін көрсету үшін қолданатын стиль түрі.

<samp>… </samp> ағымның –мысал, үлгі деген сөзі, программа жұмысы нәтижелерін ендері бірдей  моношрифт түрі экранға шығарарда  пайдаланылады.

<KBD>…</KBD> ағымның keyboard пернетақта қысқаша сөзі пернелерден енгізілген   сөз тіркесін көрсету мақсатында қолданамыз.

<var>… </var> ағымының variable айнымалы сөзі программадағы айнымалы аттарын жазу үшін енгізілген стиль түрі, қисайтылған курсивке ұқсас қаріп түрі.

Мысалы:

        <html>

<head>

<title> мысал </title> </head>

<body><center>

<h2> мәтін фрагментін белгілеп ерекшелеу тәсілдері </h2>

<p> мәтінді төмендегідей түрде ерекшелеуге болады <br>

<hr> <b> қарайтылған қаріп </b> <br>

<i> қисайтылған курсив </i> <br>

<u> астын сызу </u>

<p> мәтінді қаріптеу арқылы логикалық стильде жазу

<hr>

<h3> логикалық стилдер </h3> <hr>

<p> <em> акцент сөзі </em>

<br>

<strong> күшті акцент </strong> <br>

<code> программа мәтіні </code> <br>

<samp> мысал </samp> <br>

<KBD> KBD-клавиатура </BDD> <BR>

<var> айнымалы сөзі </var> </center>

</body>

</html>

 

Сырғымалы жолдарды ұйымдастыру.

        < Marquee>….</Marquee> тегтері мәтіндерді үздіксіз жылжытып отыратын сырғымалы жол түрінде экранға шығады. Бұл тегтің ашылуы кезіндежазылатын біршама атрибуттары бар. Олар сырғымалы жолдың жылжу жылдамдығын, бағытын, әріптердің  түсін, т.б. өзгертеді. Енді жиі өзгертілетін параметрлерді және олардың мүмкін мәндерін қарастырамыз.

            Benaior-мәтіннің бір бағыты (scrool) немесе қос бағыттада (alternate) жылжуын немесе жылжымай тоқтап тұруын   қамтамасыз етеді. Яғни мүмкін мәндері  Scrool (alternate/slide).

Bgcolor - сырғымалы  жолдың фондық түсін анықтайды.

 Direction - жолдық сырғу бағытын анықтайды.

Оның  мүмкін мәндері  Left-солға , Right-оңға.

Height - сырғымалы  жолдың биіктігін пиксель арқылы анықталатын бүтін сан.

Оны пайызбен көрсетуге болады.

Width -экрандағы сырғымалы жолдың енін көрсетеді. Оны да биіктік сияқты пайызбен көрсетеміз. (%)

            Мысалы:

<html>

<head>

<title> Мысал </title> </head>

<bodytext>=red>

<center>

<h2> мысал: сырғымалы жол   </h2> <hr>

<h3> Marquee bgcolor = «blue» behavior= «Scrool Direction» right=30> бұл алғашқы сырғымалы жол

< Marquee > <h3>

<p> Marquee bgcolor=« green» height=30 widh=90 %

Бұл екінші сырғымалы жол < /Marquee >

<p> Marquee bgcolor=« green» «behavior= » «alternate» Direction= «left»

 Height=30> бұл үшінші сырғымалы жол </ Marquee>

<hr>

</center>

</body>

</html>

 

 

HTML  тілінде тізімдер жасау  тегтері. Қабаттастырылған ішкі тізімдер.

             Тізімдердің HTML тіліне енгізілуінің басты себебі мәтіндік редактордың тізімімен жұмыс істеу мүмкіндіктерінің мол болуы әсерінен деп айтуға болады. Тізім құрғанда оның жолдарын номерлеу немесе белгілеуді біртіндеп орындау қажет етілмейді. Бұл жұмысты программа өз міндетіне алады. Егер тізім жаңа жолмен толықтырылатын немесе оның бірі қысқартылатын болса, онда номерлеу реттілігінде автоматты түрде түзетіледі. Тізім номерленбей тек белгіленетін кезде әрбір жол алдына маркерлеу таңбалары, сызықшалар, дөңгелектер, төртбұрыштар, ромбы, т.б. қойылады. Осының нәтижесінде тізім оқуға ыңғайлы сипатқа ие болады. Тізім жасау үшін қолданатын тегтерді шартты түрде 2 топқа бөледі. Оның 1-іншісі  тізімнің жалпы көрінісін  анықтап  атрибуттың  сыртқы  белгілер , ал 2-іншісі оның құрылымын  қалыптастыратын ішкі белгілер. Соңғы ішкі белгілер үшін тек бір ғана ашылу тегі қолданылады. Тізім тегінің ең қарапайым түрі номерленбеген  белгілеу тізімі <UL> …..</UL> тегінің арасында орналасқан мәтін жолдары белгіленген тізім ретінде қабылданады. Мұнда әрбір белгіленетін мәтін жолын <LI>ішкі тегімен тастап отыру керек. Сонымен номерленбейтін тізімнің жазылу үлгісі мынадай:

<UL>

<LI> Тізімнің бірінші жолы

<LI> Тізімнің екінші жолы

<LI> Тізімнің соңғы жолы

 Номерленген тізімдер.

 Номерленген тізімдер алдыңғы тізімдер сияқты құрылады, тек әрбір жол алдына номер қойылады, яғни номерленген тізімдер сыртқы <OL> тегі болып келеді.

 Мысалы:

<OL>                             1. Алма

<LI>  Алма                   2. Бақыт

<LI> Бақыт                   3. Назым

<LI> Назым

</OL>           

 Номерленген тізімнің әрбір жолы реттелген тәртіп бойынша араб немесе рим сандарын немесе латын алфавитінің әріптері таңбаланады. Ол таңбаларды өзгерту туре= « » атрибутымен көрсетіледі. Атрибут көрсетілмесе номерлер реттелген араб цифрымен көрсетіледі.

             туре атрибутының мүмкін мәндері.

Атрибут мәндері	Номер таңбалары
Type='' 1'' Type='' i'' Type='' I'' Type='' a'' Type='' A''	1, 2, 3, 4. i, i i, i i i I, II, III, IV a, b, c, d. A, B, C, D.

  Анықтау тізімдері: Анықтаулары бар тізімдер.

       Жоғарыдағыға қарағанда өзгешелеу тәсілмен жасалады <DL>  тегі арқылы

Мұнда <LI> тегі орнына <DT> термин тегі және оған қосымша <DD> терминді түсіндіру белгісі жазылады.

                Мысалы:

 

<DL>

<DT> HTML термині гипертексті белгілеу тілі, ол тілді Тим Бернер Ли жасаған.

<DT> HTML құжаты 

<DD>Аттары.HTM.болатын құжат түрі

</DL>

Мұндағы <DT>   <DD> тегтері <LI> тәрізді жабылмай малқы түрде жазылады.

 

 Қабаттастырылған ішкі тізімдер.

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

  

     <HTML> <HEAD> <TITLE> Мысал </TITLE> </HEAD>

<BODY>

<H1> HTML тізімдерінің түрлері </H1>

<DL>

<DT> номерленген тізімдер

<DD> номерленбеген тізімдер сол жақтан арнайы символдар белгіленеді.

<H1>

<DT> Алпамыс

<LI> Ертарғын

<LI> Есет

</H1>

<DT> номерленбеген тізімдер .

<DD> номерленген тізімдер .

<OL>

<LI> Арай

<LI> Шапақ

<LI> Сәуле

</OL>

<DT> Анықталған тізімдер.

<DD> Бұл тізімдер алдыңғы екеуінен өзгеше.

 <P> Тізімдердің ішкі элементі бірнеше абзацтан тұруы мүмкін.

</P>

</DL>

</BODY> </HTML>

 

 

HTML   құжатында   кестелерді    қалыптастыру.

Кесте   параметрлерін   тағайындау   тегтері.

 

   Кестелер html-дің беттеріне     форматтаудың  қуатты    құралы   болып  табылады.Кесте мәліметтің  үлкен  көлемін    ұсынудың ең  ыңғайлы әдістерінің бірі.HTML  тілі   кестелердің   әр алуан  қалыптастыруды  орасан зор мүмкіндіктеріне   ие болады.HTML тілінде   кестелерді  форматтаудың    құралдары  пайда болғанға  дейін ең қарапайым көп колонкалы  тексті немесе құрама   кестені  құру мүмкін емес  еді.Мұндай мүмкіндік   пайда болғаннан  кейін  web-дизайнерлер оны толық  көлемде  қолданып  күрделі  эффекті ала бастады.

1.HTML тілінде  кестелер  <TABLE> тегімен  басталады </TABLE> аяқталу  тегімен жабылады. Кесте  ішіндегі мәтін,кесте элементтерін (атауы,жолдары мен ұяшықтары)

анықтайтын арнайы тегтердің ішіне орналастырылады .

<TABLE>тегтерінің арасында кестелердің атауларын анықтайтын <CAPTION>тақырып </CAPTION>тегтері қосарланып кездесуі мүмкін.

Кестелердің атаулары тікелей кестелердің  үстінде  немесе  астында   ораласады .

2. Кестелердің жолдарын анықтайтын  <TR>және </TR>тегтері кездеседі.

Жабатын тегтерді кездестіруге болады. Себебі кестенің әр жолы сол кестенің  келесі жолының басталуымен  немесе кестенің өзімен  бірге аяқталады.

3.Кестенің әрбір жолы ұялардан тұрады.Ұяларды немесе  бағандар  мен жолдардың  атауларына ие <TH>тегімен  немесе  кәдімгі  мәліметтерге ие <TD>тегімен  белгілейді.Бұл  тегтер  сонымен қатар  қосарланып  берілуі мүмкін. Бірақ бұл жерде де жабатын тегтерді көрсетпеуге де болады.Себебі жабатын тегтерді көрсетпеу  басқа түсініктер  бермейді.

Мысал:

Таблица 1.

 

Меркурий	70 млн км
Венера	108 млн км

 

<HTML>

<HEAD>

<TITLE>Күнге жақын  планеталар </TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR>

<TD>Меркурий </TD>

<TD>70 млн км</TD>

</TR>

<TR>

<TD>Венера </TD>

<TD>108 млн  км</TD>

</TR>

</TABLE>

</BODY>

</NTML>

 

          Таблица  тақырыбы  таблицаның  жоғарғы  немесе  төменгі  бөлігінде  орналаса  алады.Бұл өзгерісті жасау үшін CAPTION  тегінің   ALIGN  параметірінің  мәндері LEFT,CENTER,RIGHT,BOTTOM (таблицаның  айнымалысына) өзгеріп қолдануға  болады.

 

Мысал:

<BODY>

<TABLE  BORDER>

<CAPTION  ALIGN=RIGHT  VALIGN=BOTTOM>

Күнге жақын  планеталар </CAPTION>

TABLE-тегінің  BORDER-параметірі  таблица  шекараларының  өлшемін береді.

 

Мысал:

<TABLE   BORDER=15>

TABLE тегінің  CELLSPACING  параметрі  ұяшықтардың  арасындағы  қашықтық мөлшерін  береді.Осы TABLE тегінің  WIDTH, HEIGHT  параметрі  сәйкесінше   таблицаның  биіктігі  мен  енін береді.Бұл   параметірлердің  мәні  % -к   мөлшерде   жазылады.

 

Мысал: 1.

<HTML>

<HEAD>

<TITLE> Күнге  жақын  планеталар </TITLE></HEAD>

<BODY>

<TABLE  BORDER=3  CELLPADDING=7>

<TR>

<TD>Меркурий </TD>

 <TD>70  млн  км   </TD>

</TR><TR>

<TD> Венера</TD>

<TD> 108 мле км</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Мысалы: 2.

 

<HTML>

<HEAD>

<TITLE> Күнге  жақын  планеталар </TITLE></HEAD>

<BODY>

<TABLE  BORDER= 2  WIDTH =75%  HEIGHT=100>

<TR>

<TD>Меркурий </TD>

 <TD>70  млн  км   </TD>

</TR><TR>

<TD> Венера</TD>

<TD> 108 млн км</TD>

</TR>

</TABLE>

</BODY>

</HTML>

      

       Таблица  ұяшықтарының  ішіндегі  мәліметтерді  тегістеу  жұмыстары- бұл  яғни, оң жаққа, солға,ортаға  <TD> тегінің ішінде  align  параметрімен  жасалады.

Мысал:<TD  align=LEFT>Меркурий

 </TD>Вертикал  бойынша   таблица   ұяшықтарын  біріктіру.

      Мысал:

<HTML>

<HEAD>

<TITLE>Біріктіру  мысалы </TITLE></HEAD>

<BODY>

<TABLE  BORDER>

<TR>

<TD TOWSPAN=2> Меркурий </TD>

 <TD>70  млн  км   </TD>

</TR><TR>

<TD> Венера</TD>

<TD> 108 мле км</TD>

</TR><TR>

<TD>Земля </TD>

<TD>150 млн км</TD>

</TABLE>

</BODY>

</HTML>

Меркурий	70м
	Венера	108
Жер	150

 

 

 

 

Гипермәтіндік сілтемелерді ұйымдастыру.

 

       Web-парақтардың басқа Web-парақтарға қатысты сілтеменің болуы World Wide  Web жүйелерінің ең тартымды ерекшеліктерінің бірі. HTML құжатында гипермәтіндік сілтемелерді құру өте жеңіл. Ол үшін атрибуты яғни параметрі  бар ашылатын <A…> және қарапайым жазылатын </A> тегтері пайдаланылады. Жалпы сілтемелер жасаған кезде мынадай ережелерді есте сақтаған жөн.

     1) Гиперсілтемелерді құрған кезде атрибуты HREF міндетті түрде қажет. Оның мәні сол сілтеме көрсетіп тұрған файл атына немесе оның URL адресінен табылады. Сілтеме мәтін  <A>…</A> тегінің арасында орналасады . Сілтеме сөз броузерде бейнеленген кезде көбінесе оның асты сызылып, көк түспен белгіленеді. Сол сілтеме сөзінің үстіне курсорды қойып тышқанмен шерту көрсетілген файлға немесе бойындағы URL  адреске көшуге қамтамасыз етеді . Гипермәтіндік  сілтілемелер адрестің өзге кез-келген файлды немесе адреске сәйкес Web-парақты көрсетуі мүмкін.

 Мысалы:

  <A HREF= “ C : /Мой документы/ Жанара . HTM ”/ файл.</A> экранға көк түспен боялған файл сөзін бейнелейді. Сол сөзді тышқанмен шерту  “Менің құжаттарымның ” ішіндегі  Серік . HTM  файлына көшу әрекетін орындайды. Одан қайтіп оралу үшін браузер аспаптар панелінің кері қарай батырмасын басу керек.

    Төмендегі жол <A HREF= “dog. jpg”> иттер туралы мәлімет </A> Экранға итттер туралы мәлімет деген сөз шығады . Сөзге курсорды бағыттап оны шерту бумадағы сурет салынған dog. jpg   файлына көшу ісін атайды. Егер сілтеме көрсетіп тұрған Web парақ басқа бір Web сайтқа орналасқан болса онда HREF атрибуты мәні ретінде сол құжаттың URL адресі толық пайдаланылады.  Оның ішіне хаттаманың атауының Web сайтының адресіне кіреді . Осындай сілтемелер сыртқы сілтеме деп аталады<A HREF= “http://www.microsoft.com > Microsoft </A> Экранға Microsoft сөзін шығарып оны шерту арқылы интернет желісіндегі желісіндегі Microsoft компаниясының Web-парағының алғашқы бетіне көшуді қамтамасыз етеді . Егер сілтеме сол Web-сайтының басқа парағын көрсетін болса онда құжаттың тек салыстырмалы жолын беруге болады . Мұндайда ішкі сілтеме құрылады. Ішкі сілтемелерді қолданған қолайлырақ.  Себебі Web-сайтты басқа серверге ауыстырған кезде жеке құжаттар адресіне өзгеріс енгізу талап етілмейді.

        2) Гиперсілтеме ретінде сөз тіркесін ғана емес суреттерді пайдалануға болады . Суреттер мәтін сияқты сілтеме бола алады. Oл үшін <IMG…> тегі сілтемелерді анықтайтын <A> тегінің арасында орналастырылады. Осындай суретке курсорды алып барсақ, ол курсорды сілтеме мәтінге бағытталған кездегідей түрге келеді. Осы тәсіл арқылы Web- парақтарда олардың бірінің-біріне ауысуының графикалық батырмалары жасалады, 

Мысалы: <A HREF= “dog.htm ”> <IMGSRC= “dog.gif”> </A> Жолында  <IMGSRC= “dog.gif” > тіркесі гиперсілтеме ретінде кішкене ит суретін береді, оны шерту арқылы иттер туралы мәлімет беретін файлына dog.htm ауыстырады.

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

       Мысалы:

      <A HREF=”2.htm # AAA” > AAA анкеріне көшу. </A>

      <A NAME=”AAA” > көшу орындалады. </A>

Бұл  программа  фрагменті 2.htm файлындағы AAA сөзіне көшіреді.

Ал егер көріп отырған мәтін ішіндегі басқа бір 1.1 тіркесіне көшу үшін

<A HREF=” # 1.1”>  1.1 анкеріне көшу </A>

<A NAME=”1.1” > </A>.

Ескерту: Орнатылған анкерге сілтеме орналастыру үшін URL адресінен кейін # (диез ) таңбасымен бөлінген  анкер атауы көрсетілуі керек. 1құжат ішіндегі анкер алдына адрес жазылмайды.

      Мысалы:

      <H2> Тақырып <H2>

      <HR> <A HREF=”# 3.1”> 3,1-ге көшу </A>

      <A NAME=”3.1” > </A>

      <BR> <H3> 1.1 бірінші абзац </H3>

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

 <HR> <H3> 1.2  екінші абзац </H3>

Егер сілтеме сол Web парақтың  басқа парағын көрсететін болса, онда құжаттың тек салыстырмалы жол беруге болады.

<HR><H3> 3.1 Үшінші абзац </H3>

Мұндайда   HREF=”#…” атрибутына қосымша  NAME=”…” атрибутын пайдалану керек. Ол тек латын әріптерінен,  сандарынан тұрады да, олардың ішінде бос орын таңбасы болмауы керек, бірақ соңғы броузерлер орыс-қазақ әріптерін ала береді.

 

HTML  құжатында графиканы қолдану.

 

            Суреттік бейнелер  WEB-парақтарды әшекейлеп безендіру кезінде маңызды құралдар ролін атқарады. Суреттердің өздері  құжаттан бөлек орналасқан және файлда сақталады.

Алайда олар брозер арқылы WEB-парақтардардың ішінде бейнеленеді. Суреттерді бейнелеу ережесін былай деуге болады:

1.     Суреттерді құжаттың ішіне орналастыру үшін <IMG…>  , яғни жабылмайтын жалқы тегт қолданылады.

2.     Бұл тегте міндетті түрде SRC=''…'' атрибуты болуы керек. Оның мәні абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді.  Және ол <IMG…>  тегі тұрған орнына көрінеді.

     Мысалы: <IMG SRC=fish.jpg.''> экранға fish.jpg файлдағы балық суретін шығарады. 

     Ескерту:  Қазіргі кездегі броузерлер тек ғана gif, jpg , png типтеріндегі суреттік

     файлдарды      ғана пайдаланады.

3.     Суреттер өздерінің көлемдерін сақтай отырып WEB-парағына орналасады. Егер суретті ықшамдап бейнелеу  кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін widh , height атрибуттарының көмегімен беруге болады. Осы 2 атрибуттың мәні WEB-парақтағы суреттердің биіктігі мен енін бүтін санмен берілген пиксельмен көрсетеді.

     Мысалы: <IMG SRC= ''fish.jpg ''> width 500 height=250> суретті 500x250 нүктелерден тұратын төртбұрышты аймаққа орналастырады. Сурет айналасындағы жақтау (border) сызығының қалыңдығын да параметр ретінде көрсетуге болады.

Border=пиксельдер саны. Жақтау мен әдемілік үшін ғана емес, суретті <A> тегінің ішінде гиперсілтеме ретінде пайдаланғанда, ол бір рет шертілген соң жақтау сызығының түсі өзгеріп , оның қолданылғаны белгілі болып табылады. Егер гиперсілтеме ретінде суретті пайдалануда бір мысал келтірейік.

<HTML>

<BODY>

<A HREF=''dog.html''><IMG SRC=''dog.gif'' width=87 height=100 BORDER=2> </A>

</BODY>

</HTML>

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

 

1.     Шығарылатын WEB-парақ суреттері көрсетуге қажетті мүмкіндігі жоқ броузерлер арқылы  да шығарыла береді.

2.     Көбінесе қолданушылар құжатты желі арқылы тез қабылдау үшін суреттерді бейнелейтін команданы алып тастайды. 

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

4.     Қосымша мәтін суреттің мүмкіндігінше толық мәтін түрінде сипатталады. Егер қандайда болсын себептерге байланысты броузер суретті көрсете алмаса, ол суреттің орнына сипатта ретінде қосымша мәтін беріледі.           

                   

Мысалы:

    <HTML>

    <BODY>    

    <IMG SRC= “ нан.gif ” alt= “ нан суреті ”>

    < /BODY >

    < /HTML >

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

     Олар:   align='' bottom''- мәтін суреттердің төменгі жағында.

                  align='' lest''- мәтін суреттердің сол жағында.

                  align='' middle''- мәтін суреттердің ортасында.

                  align='' top''- мәтін суреттердің жоғарғы жағында.

                  align='' right''- мәтін суреттердің оң жағында.

 

Фреймдер.Фрейм құрылымы .

( Web-парақта бірнеше құжаттардың орналасуы).

 

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

1) Фреймдерді құру үшін HTML ерекше құжаты пайдаланылады, оның құрылымы кәдімгі құжаттардан бөлек болады. Осындай құжаттарда құжат «денесінің» бөлімдері болмайды, ол шын мәнінде қандай да болсын мәтінде мүлде болмайды. Оның орнына бұл құжаттарда

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

   2) <FRAMESET> тегі, терезелерді бөлу әдістерін анықтайтын, COLS= және ROWS= міндетті атрибуттарына ие болуы тиіс. COLS= атрибуттарын пайдаланған уақытта терезелер вертикаль сызықтармен, ал ROWS= атрибутын пайдаланған уақытта горизонталь сызықтармен бөліктерге бөлінеді. Егер аталмыш атрибуттың екеуі де берілсе, терезеде бөлімшелерден құралатын тор пайда болады.

  Осы атрибуттардың мәндері терезе бөліктерінің биіктігін (немесе енін) анықтайды. Әр бағанға (жолға) арналған параметрлер  пиксель өлшем бірлігі бойынша үтірлер арқылы немесе пайызбен (% белгісі) беріледі. Соңғы параметр ретінде (*) жұлдызша белгісін де пайдалануға болады. Осындай фрейм үшін барлық қалған бос кеңістіктер бөлініп беріледі.

   3) <FRAMESET> және </FRAMESET> тегтерінің арасында қалыптастырылған бөліктердің қажеттілігін көрсететін қосымша тегтер орналастырылады. Осы мақсаттар үшін, терезені қосымша бөлу мүмкіндігін беретін, ендірілген <FRAMESET>  тегін немесе экрандағы жеке бөліктеріне шақырылатын құжаттарды анықтайтын, жеке даралық <FRAME> тегтерін пайдалануға болады.

   <FRAMESET> және </FRAMESET> тегтерінің араларына орналастырылған элементтердің саны, қалыптастырылған бөлік санына сәйкес болуы керек.

      4) <FRAME> тегінде аталмыш бөлікке шақырылатын құжаттарды анықтайтын , SRC= міндетті атрибуттары болуы керек. Қосымша атрибуттар және фреймдер  арасындағы қоршауларды және оның басқа кейбір қасиеттерін реттеу мүмкіндігін береді.

<HTML>

<HEAD>

<TITLE> навигациялық панелі бар парақ

</TITLE>

</HEAD>

<FRAMESET>

<COLS= “25%”>

<FRAME SRC=panel.htm>

<FRAME SRC=home1.htm>

</FRAMESET>

</HTML>

Мысал2.

<HTML>

<HEAD>

<TITLE> Құжаттың күрделі құрылымы

</TITLE>

</HEAD>

<FRAMESET ROWS= “45%, 30%, 25%”>

<FRAMESET COLS= “40%, 30%, 30%”>

<FRAMESET ROWS= “50%, 50%>

<FRAME SRC=doc1.htm>

<FRAME SRC=doc2.htm>

</FRAMESET>

<FRAME SRC=doc3.htm>

<FRAME SRC=doc4.htm>

</FRAMESET>

<FRAMESET COLS= “60%, 40%”>

<FRAME SRC=doc5.htm>

<FRAME SRC=doc6.htm>

</FRAMESET>

<FRAMESET COLS= “30%, 40%, 30%”>

<FRAME SRC=doc7.htm>

<FRAME SRC=doc8.htm>

<FRAME SRC=doc9.htm>

</FRAMESET>

</FRAMESET> </HTML>

 

HTML құжатында  формаларды өңдеу. Айырғыштар, флажоктар.

 

Форма – HTML құжатта сыртқы дүниенің алдын - ала анықталған бір нүктесіне ақпаратты жіберуді ұйымдастыруға пайдаланылған . Формалар сайтқа енушілерге сұрақ - жауап ұйымдастыруда , электрондық поштаны жіберу қызметінде өте кең қолданылады . Форма жұмысының  принципі келесідей . Сіздің Web-парағыңызға неуші өзінің компьютеріне жіберілген , броузерде бейнеленген форманы толтырады . Осы форма  бар анықталған батырманы шерткеннен кейін , броузер қолданушы жолақтарға толтырған мәліметтерді алып, көрсетілген орынға жібереді . Форманы сипаттау <FORM> </FORM> тегтерінің арасында орналасады . HTML құжатта бірнеше форма болуы мүмкін, бірақ олар  бір-бірінің ішінде орналаспайды . 

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

 

Параметр	Сипатталуы
ACTION	Міндетті параметр . Бұл форманы өңдеушінің орнын анықтайды .
METHOD	Формадан мәліметтер өңдеушіге қандай түрде берілетіндігін анықтайды. Мүмкін мәндері: POST - Форманың тақырыбы сипаттамасында көрсетілген  URL формадағы ақпараттың аяғына жалғанады . GET - бұл әдіс формадағы барлық ақпараттарды көрсетілген URL-ге қатынас жасағаннан кейін лезде жібереді. Егер форма сипаттамасында берілмеген болса, үнсіз түрде  GET әдісі деп есептеледі .
ENCTYPE	Формадағы ақпараттар өңдеуге жіберілу үшін қандай  ????   етілетіндігін анықтайды .

 

Қолданушы өзінің ақпаратын формаға енгізу үшін  Input тегі қолданылады. Бұл тегі броузерге қолданушы ақпаратын енгізу өрістерін сипаттауды қамтамасыз етеді.Әрбір Input тегі осы өрістің атын анықтаған name параметрі, енгізілген жолдардың  символ түрінде максимальды мәнін беретін MAXLENGTN параметрлері , символдарды енгізу терезесінің енін беретін SIZE  параметрлерінен  тұрады , ал TYPE параметрі келесідей мүмкін мәндермен жұмыс жасайды.

text- текстік жолдарды енгізу жақтарын анықтайды , қосымша  параметрлер  де болуы мүмкін :

бұл өрісте қолданушы өзгертуге болатын  Текст сөзі бейнеленеді

< input type =”text” size=”20”  name=”user” value =”текст”>

password-парольды  енгізу  өрісін анықтайды .

Пароль енгізу полесін беретін мысал .

<input type =”password” name=”pw”  size=”20” maxlength =”10”>

radio-айырғыштар батырмасын анықтайды. Сhecked-қосымша параметрі белгіленген дегенді көрсетеді . Мұнда тек бір батырма ғана белгіленеді

Айырғыштарға мысал .

<input type =”radio” name=”question” value=”yes”>

<checked> да <br>

<input type =”radio” name=”question” value=”no”>

 нет <br>

<input type =”radio” name=”question” value=”possible”>

 возможно <br>

 

checkbox –флажок өрісін анықтайды . checked параметрі флажок белгіленгендігін көрсетеді . Айырғыштардан айырмашылығы бірнеше опция белгіленуі мүмкін .

Флажоктарға мысал.

<input type =”сheckbox” name=”comp” value=”CPU”>

процессорлар <br>

<input type =” сheckbox ” name=” comp ” value=”VIDEO”>

 видеоадаптер <br>

<input type =”сheckbo” name=” comp” value=”MODEM”>

 <checked> модем <br>

 

submit немесе button- шерткен кезде өңдеушіге формадан мәліметтерді жіберу процесін орындаған батырманы анықтайды .

Қарапайым батырманы құратын  мысал .

<input type =”submit”  value=”отправить”>

 

 Текстік мәліметтерді жазатын область беретін  программа  фрагменті .

<textarea   name=”address”  rows=”5” cols =”50”>

</textarea>

 

HTML құжаттағы  мультимедиялық обьектілер.

 

     Қызметі қолданымға кеңінен  енген  мерзім   барысында  мультимедиа да кеңінен тарай бастайды .  Себебі  HTML  тілі Web парақтарында    мультимедиялық  обьектілерінің  пайда болуына бірден   үйлесіп кете алмады . Бейне және дыбыстық    файлдар  бүгінгі күнге дейін қосымша  жалғанған және   тіркелген   қосылғылар арқылы жарыққа шығарылатын «сыртқы»  обьектілер ретінде  қарастырылуда . Мультимедияның   бейне және дыбыстық  файлдары әртүрлі   форматтарды қолдана алады . Күнделікті  қолданып   жүрген форматтар , оны қайта   бейнелеу мүмкін   болғанға дейін файлдың   толық  көрініс беруін талап етеді . Бүгінгі күні ағымдық форматтар  мәліметтерді   жадыдан   шығару барысындағы нақты уақыт кезінде дыбыс пен бейне   көріністерді   жарыққа шығару   мүмкіндігін береді.

Интернеттің  ағымдық  форматтарында   радиохабарлар беріледі.   Мысалы: Ресейде осындай формат арқылы  «күміс жаңбыр»  радиостанциясы хабар таратады.

       Web параққа  мультимедиялық  объектілерді енгізудің   ең қарапайым әдісі   бұл «А» гиперсілтеме тегін пайдалану. Осындай сілтемені   қалыптастыру ең жеңіл нәрсе . Бұл жағдайда мультимедиялық файл  оқырманды   HTML құжатындағы басқа мазмұндық мәліметтерден назарын аудартпайды. Кейбір   жағдайларда дыбыстық  немесе  мультимедиялық файлды тікелей   Web параққа енгізу талап етіледі. Мысалы: аталмыш файлды автоматты түрде жарыққа шығару үшін қайсыбір аталмыш операцияларды жүзеге асырады. Бүгінгі күні бұл мақсатқа жету үшін HTML стандартына қатаң түрде кірмегеніне қарамастан   «EMBED» тегін қолданған ыңғайлырақ. Бұл тегтерді кеңінен тараған екі броузерлер арқылы тану мүмкіндігін аламыз. Олар Internet Explorer , Next Cup Navigaition . Алайда мультимедиялық файлды жарыққа шығару мүмкіндігін тек қана қосалқы ретінде жалғанған тиісті қосымшалар арқылы ғана анықтайды.

      «EMBED» тегі дара болып табылады. Себебі оған жабылатын  тег  талап етілмейді. Оның міндетті  SRC=  атрибуты бар. Оған қоса width , height атрибуттарын да пайдалану мүмкіндіктері бар.  Олар мультимедиялық объектіні жарыққа шығару үшін бөлінген, экрандағы тік төртбұрыш аумақтағы өлшемдердің (ені, биіктігі) мәнін анықтайды.

    

HTML тілінің редакторы . MS Front Page  HTML редакторы.

Front Page программасы Web-құжаттар жасауға арналған көп мүмкіндіктері бар және қолдануға ыңғайлы программа.  Front Page программасы Office құрамына кіретін басқа да программалармен үйлесімді , демек қажетті жағдайда басқа программалармен деректерді ауыстыру жеңіл орындалады.

1.     Web- түйін жасау.

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

 My Webs бумасында Web- түйін  жасайды. Web- түйін  жасау үшін төмендегі амалды орындаңыз:

  File => New => Web...

Экранда ашылған сұхбат терезесінен ұсынылған үлгілердің тиістісін таңдап алуға болады.

2. Web-бетті көркемдеу.                                                            

Front Page программасында сіз қалауыңызша шрифтерді, олардың көлемін, түсін басқа мәтіндік редакторлардағы сияқты пайдалануыңызға болады. Мұнда ұсынылатын шрифтер ол сіздің компьютердегі бар шрифтер, яғни Front Page қосымша шрифтер ұсынбайды.                                      

Web-беттің фонын көркемдеу.

Сіз қалауыңызша Web-бет фонына Front Page  программасындағы стандартты фон суреттерін немесе басқа бір графикалық файлдардағы  суреттерді пайдалануыңызға болады.  File => Properties... ашылған сұхбат терезесіндегі қажетті файлды  немесе өзіңіз ұнатқан түсті орнатыңыз.

3.  Web-бетке сурет орналастыру.

Web-бетке сурет орналастыру амалы дәл Word  программасындағыдай орындалады.

Пайдаланған суреттер түйін сақталған кезде автоматты түрде түйін орналасқан папкаға көшіріледі. Егер файл.bmp  форматында болса, онда jpeg форматына ауыстырылады.

4.Гиперсілтеме. (Гиперссылка)

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

Гиперсілтемені орнату үшін  қажетті  объектіні немесе мәтінді белгілеп құралдар тақтасындағы  (Hyperlink) гиперсілтеме  құралын немесе тышқанның оң жақ пернесін басып ұсынылған  тізімнен  Hyperlink  Ctrl+K командасын таңдап алуға немесе Ctrl+K пернелерін басып гиперсілтеме орнатуға арналған сұхбат терезесін ашамыз. Мұнда қажетті файлды тізімнен белгілеп көрсетіп, ОК батырмасын басамыз.

 Front Page программасы гиперсілтемеден басқа закладка пайдалануыңызға болады. Закладка орнату тәртібі төмендегідей:

Мәтіндегі қажетті сөзді белгілеп, Insert => Bookmark мәзірлерін таңдаймыз. Экранда пайда болған терезе автоматты түрде толтырылып тұрады, сондықтан ОК батырмасын бассақ жеткілікті. Келесі орындайтын амалымыз гиперсілтеме орнатуға ұқсас орындалады. Мұнда гиперсілтеме орнату терезесінде файлды емес Bookmark нүктесінен  өзіміз белгілеп көрсеткен мәтіндегі сөзді белгілейміз де, ОК батырмасын басамыз.                                                                     

5.Кесте салу.

Кесте салу амалын орындау үшін:

Table => Insert => Table мәзірін пайдаланамыз.  Экранда ашылған сұхбат терезесінде салынатын   кестенің   бағандары  мен  жолдары санын көрсетеміз. Кестені өңдеу үшін орындалатын  амалдар да өте қарапайым, баған немесе жол қосу – Table => Insert => Rows or Colymns... ашылған сұхбат терезесінен жол (Rows)  не бағанның (Columns) қажеттісін таңдаймыз.

6. Web-бетке анимация орнату.

Анимациялар сіз жасаған Web-беттерге қызығушылықты  арттырып қана қоймай, ондағы материалдардың өз  оқырмандарын табатынына да себебін тигізеді. Анимация   орнату үшін Format Page Transition... (Переход  страницы) мәзірін таңдап аламыз.

Экранда  анимацияның қолдану тәртібін бекітетін сұхбат терезесі   ашылады. Мұнда сіз анимацияның   нұсқасын таңдап ала аласыз. (Event – Событие, Transition effect – Эффект анимации, Duration – Продолжительность).

7.Жүгіртпе жол.      Жүгіртпе жол Marquee командасы арқылы орындалады.

Экранда ашылған сұхбат терезесінде жүгіртпе жолдағы мәтінді теріп жазып, оның ұсынылу тәртібін көрсетеміз (Direction – появление,Speed - скорость, Behavior – поведвние).

Дербес    Web  -сайтты    құру.

 

Функционалды және қызықты сайт құру үшін біздер «қайсыбір инструменттерді пайдаланамыз».Ол үшін біздерге 2-программа қажет.

HTML Writer –редакторы және графикалық Paint Shop Pro  редакторы.

Кез-келген HTML  документтің құрылымын  жасау және өңдеу үшін оның мазмұны мен күрделілігіне  қарамастан  оларды  құру кезінде қайсыбір процесс  жүзеге  асырылады. HTML документ кез-келген  жағдайда  да  ақпараттық , зейін аударушы  және қолданған  кезде, қарапайымдылығымен  ерекшеленуі тиіс. Ең   алғашқы  қадам  күрделі  қадам  болып  есептеледі , яғни  WEB-сайттың  тақырыбын таңдау. Ал егер  парақтар   бірнешеу  болса, олардың   әрбіреуіне   бөлек  тақырыптар   ойластырған   жөн. Көптеген дербес   сайттардың   мазмұны  нашар   ойластырылған. Көптеген  авторлар   өздерінің   дербес  сайттарын, отбасылық   хабарлармен  өздерін қызықтырушы  хоббиларымен  немесе  кәсіби  іскерлік   мәліметтерімен   толтырады. Шындығын   айтқанда  Web –сайтты  құрудағы  яғни  тақырыбын  таңдаудағы   бұл  жол    сайтқа  енушінің    санын   көбейтеді. Сондықтан   тақырыпты   таңдаудың   маңыздылығын    бірінші   орынға   қойған   жөн. Егер  сіз      1-тақырыптан  көбірек  қамтығыңыз   келсе  әрбір   параққа  орналастыру   мүмкіндігіңіз  бар.Бұл  жағдайда   сайттың  қалған   бөліктеріне  бағыттайтын   есте  қаларлықтай  мазмұны    болуы  тиіс. Есіңізде  болсын: сайттан  алған  ең  алғашқы   жеріңіз  сайтқа   келесі  тағы да  енуіңізге    мумкіндік   жасайды. Бүкіл әлемдік өршек миллионнан сайттарды өз нарығына шығаруда сондықтан сіздің конкуренттеріңіз көп екенін ұмытпаңыз. Ал сіздің сайтыңызға енушілердің сіздің отбасылық парағыңызда көп уақыт оқымайтындығы белгілі. Сайттың тақырыбын анықтап болған соң, оның мазмұнын анықтау жұмысына кірісіңіз. Сайттың тақырыбына тәуелдісіз өзіңіздің сайтыңызда аудио файлды, графиктерді, видеоклиптерді, сілтемелер тізімін, текстік файлдарды , мәліметтер қорын кірістіруіңізге болады. Мазмұнын анықтаған соң материалды ұйымдастыру жұмысына көшіңіз.

        Автор төмендегідей 4-категориалы материал түрлерімен жабдықталуы тиіс. 

 1. Суреттер (Фотография) 

2. Сілтемелер

3. Мәтін  

4. Библиография

      Материалды орналастырмас бұрын сайттың « скилетін» құрып алу тиіс. Бұл дегеніміз  HTML редакторын іске қосып жаңа дербес парақты құру жұмысын бастау деп есептелінеді. Автор өз жұмысына қанағаттанғаннан кейін сайтты шығаруға дайын деп есептесе интернет қызметін пайдаланып өзінің сайтын  WWW-ға орналастырады.  

 

Коммерциялық сайтты құру.

Егер сіз бизнесте қызмет жасайтын болсаңыз,  сіздің компанияңыздың WWW-ға қызметіне жүгінетін себебіңіз болса , сонда сіздің коммерциялық сайт құруға қажеттілігіңіз бар деген сөз. Ең алдымен мұнда сіздің компанияңыздың негізгі қажетті затын білуіңіз қажет, содан соң қандайда бір іс- әрекетке баруыңызға болады. Мұнда негізгі 4-мақсатта WWW қызметіне жүгіне аласыз.

1. Товарды сату немесе қызмет көрсету.

2. Сауда маркаларының мойындағанын қалаймыз.

3. Тұтынушылардың қажеттігін өтеу мақсатында.

4. Инвестициаларды шақыру мақсатында.

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

 

Web – сайтты басқару. Парақтарды WWW орналастыру.

 

Web – сайтты өңдеп аяқтағаннан кейін сіздің материалдарыңыз желі қолданушыларына қарауға, оқып – меңгеруге ашық болуы тиіс. Құжатыңызды WWW-ға орналастырудың екі жолы бар.

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

Өзіңіздің серверіңізді ұйымдастыру немесе интернет қызметін пайдалану ол өзіңіздің жеке жағдайыңыз бен қойылған есебіңізге тәуелді. Егер сіз үлкен компания үшін сайт өңдеу жұмыстарын жасамайтын болсаңыз және интернеттің басқа қосымшаларын қажет етпейтін болсаңыз: FTP тәрізді, электронық почта немесе мәліметтер қоры, онда сізге жеке сервердің қажеті жоқ. Жергілікті провайдер қызметінің бағасына талдау жасай отырып, өзіңіздің сайтыңызды осылардың біреуіне орналастырғаныңыз жөн. Қасыбір провайдерді таңдау шешімін қабылдамас бұрын оның жүргізіп жатқан жұмысы туралы жеткілікті мәліметтеріңіз болуы қажет.

Web парағыңызды провайдер серверіне орналастыру.

Келесі тізбектегі іс - әрекеттерге көңіл аударыңыз.

1)           Провайдер машинасының UNIX жүйесіне қарым-қатынасыңыз (доступ) болуы қажет.

2)           Сіздің сайтыңыз орналасқан каталогқа қарым-қатынас беруде қамтамасыз ету.   

Сайттың ішкі каталогтарын құру.

НТМL файлдарды орналастыру.

Сіздің сайтыңызға қатысты басқа файлдарды орналастыру.

Интернетке көрсетуге файлдарды дайындау. Ең алғашқы сіздің орналасқаныңыз сіздің файлдарыңыз орналасатын желілік кампиотлерде орын дайындау.

Провайдер компьютерлерімен Теlnеt клиентінің көмегімен желіге қосыңыз. Ары қарай сіздің жұмысыңыз келесідей түрде болады.

1)           Провайдер машинасының адресін енгізіңіз. Клиент желіге қосылуды жүзеге асырады.

2)           Атыңызды және парольді енгізіңіз.

3)           PWD - командасын енгізіңіз. Ол арқылы сіз қай каталогта орналастырылуды біле аласыз.

Жауап келесідей түрде болуы мүмкін: USER / Home / user ice

Егер сіз Telnet желіге қосылу қызметін бірінші рет қолдансаңыз, онда оның негізгі командаларымен танысуыңыз қажет.

ls - (файлдарды) ағымдағы каталогтың ішкі каталогтарын және файлдарын көрсетеді.

Жасырын тұрғандарынан басқа (скрытый)

la немесе ls-а-ағымдағы каталогтың ішкі каталогтын файлдарын және жасырын (скрытый) тұрғындарын көрсетеді.

mk dir  - каталог немесе ішкі каталогты құрады.

rt – (каталог) файлдарды жояды.

rm dir – каталогтарды жояды. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Әдебиеттер тізімі:

 

1.     М. Браун, Д. Наникат. НТМГ- С.П. « ВНГ- Санкт-Петербург», 2000.

2.     М. Дмитриева, JavaScript-СПБ: БХВ- Петербург, 2002.

3.     Wев-дизайн. С.В. Лебедев. Издательский   дом « Альянс пресс»,

    2004 Москва.

4.     Информатика гуминитарлық мамандық студенттері үшін оқу- әдістемелік кешені.

5.     А.П. Сергеев « НТМГ и ХМГ».  Профессиональная  работа, 2004.

6.     « Информатика негіздері » журналы. 2002ж.

7.     В.Дригалкин . « HTML  в примерах ».