(Definition List:
тегі
Тег мәтіннің сол және оң жағынан орын қосады. Бұл қолайлы тег, ол мәтінді беттің ортасына орналастыруға мүмкіндік береді.
тегін бірнеше рет қолданған кезде мәтін ортаға бірнеше рет қысыла береді. Microsoft Internet Explorer және Netscape Navigator тегінде LEFTMARGIN=n және TOPMARGIN=n атрибуттарын қолдануға рұқсат етеді. LEFTMARGIN= атрибуты барлық бет үшін сол жақ орынды береді. TOPMARGIN= жоғарғы орнын анықтайды. n саны орынның енін пиксель бойынша көрсетеді. Мысалы, тегі барлық бет үшін сол жақ енін 40 пиксельде құрады. n арқылы, 0 тең, сол жақ орны шегінеді. Табуляция Бұл құралдардың қажеттілігі бұрын пайда болды, тек жақында ғана құрастырушылар ұсынды. Табуляцияны бірнеше тәсілмен беруге болады. Ең қарапайым, тегін жазу, онда n жаңа абзацтың алдындғы еn-бос орындар санын анықтайды. еn-бос орын – өлшеудің типографиялық бірлігі, сіз қолданатын шрифтағы n әріпінің енімен бірдей. Соған сәйкес тегі ені 4 еn-бос орын болатын табуляция символын алады. Егер сіз бірнеше орынға берілген мөлшерде табуляция символын қолданғыңыз келсе, онда оның мөлшерін беретін орынға тегін ID= атрибутымен бірге қойыңыз, мысалы, соған сәйкес: Енді беттің кез-келген жеріне жазса жеткілікті, және табуляция символы TABONE тең болады. Сәйкесінше TABTWO, TABTHREE, TABFOUR ұқсас тәлімен құруға болады. тегін мәтінде және графикте орналастыруда қолдануға болады. Тізімдер Тізімдер мәтін құрылымының негізгі құралдары болып табылады және белгілеулердің барлық тілдерінде қолданылады. HTML-де келесі тізім түрлерінен тұрады: номерленбейтін тізім (реттелмеген), номерленетін тізім (реттелген) және анықтамалдың тізімі. Номерленбейтін тізім тегі (Unordered Lists ) және номерленетін тізім тегі (Ordered Lists ) – бұл HTML негізі. HTML 3.0 номерленбейтін тізімде маркердің әртүрлі типін таңдауда тізім тегіне бірнеше атрибуттар қосады. Тізім ортасындағы маркер типін ауыстыру үшін мынадай (List Item) тегіне атрибут қосуға болады. Жаңа атрибут пайда болған кезде, тізімде қалған маркерлер де осындай түрді алады. тегі Номерленбейтін тізім. Номерленбейтін тізім мәтін типін құруға арналған. тізімнің бірінші элементі тізімнің екінші элементі тізімнің үшінші элементі Берілген тізім келесі түрде жазылады: тізімнің бірінші элементі тізімнің екінші элементі тізімнің үшінші элементі және тегі – бұл номерленбейтін тізімнің басы және соңы, (List Item) тегі тізім элементінің тегін береді. Осы тегке қосымша, тізімді атауға арналған - LH (List Header) бар. Келесі түрдегі номерленбейтін тізімді бейнелейтін мысал келтірейік: тегі Горизонтальды сызып алу (horizontal rule) құжатты бөлікке бөлу үшін қолданылады. Бір ғана тегі арқылы бетке мүлдем өзгеше түр беруге болады. тегін тәжірибеде көріңіз және сонда сіз қолданып жүрген сызықтан өзгеше сызық аласыз. тегі Форматтаусыз мәтінді бейнелеу. тегі тегі оған қосылған мәтіннің жыпылықтауын туғызады. Гипермәтіндік сілтеме Жоғарыда қарастырылған мәтінді бейнелеу құралдары, құжаттың басты тегі - гипермәтіндік сілтемеге – қосымша, сөзсіз маңызды болып келеді. Гипермәтіндік сілтеме жазу үшін, “зәкір (якорь)” (anchor) деп аталатын …… контейнері қолданылады. Зәкір бірнеше атрибут қабылдайды, ең негізгісі HREF (Hyper Text Reference) болып табылады. Қарапайым сілтемені мына түрде жазуға болады: Деректер базасының индексі“Жусан” HREF атрибутының мәні болып, “polyn.net.kiae.su” машинасында “index.shtml” құжат адресі табылады, оған рұқсат HTTP протоколы арқылы беріледі. Осы адрестің жазу формасы универсалды локаторлық ресурс (Universe Resource Locator) деп аталады және WWW технологиясының құрама бөлімі болып табылады. А контейнерінің мазмұны, тег басы және тег соңы аралығында қосылады, мәтінде контекстік гипермәтіндік сілтемеге арналған түспен бөлінеді. Web-серверді құрұдың ерекшелігі, онда көрсетілген ақпаратты жеке бөліктерге бөлуге болады. Жеке бөліктер арасындағы байланыс ұйымдары гипермәтіндік сілтеме арқылы анықталады. Өзін тексеруге арналған сұрақтар: 1. html-құжатының құрылымы. Беттің құрылымдық элементтері.Элементтер типі. 2. WWW-сервисінің жұмыс тәртібі. Сервер және клиент арасында мәлімет алмасу. Формалар. Ұсынылатын әдебиеттер: 1. Веб-дизайн/Дмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр. 2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин – СПб: BHV, 2000 – 672 стр. 3–Дәріс. Webтегі графика Дәріс мазмұны: графика өлшемдерін қалай беруге болады; активті бейнелер; активті бейнені қалай жасауға болады; сервердегі активті бейнелер; клиенттегі активті бейнелер; серверде де, клиентте де жұмыс істейтін активті бейнелер. Графика Webтегі ең кең таралған графикалық форматтар болып GIF және JPEG форматтары болып табылады. Web – бетке бейне қою үшін ең алдымен оны салып алу қажет немесе дайын бейнені алуға болады. Сурет салудың кез-келген программасында қарапайым бейнені салу және оны қажет етілген форматқа сақтау қиынға түспейді. Егер программа бұл форматты қабылдамаса, онда файлды өңдеу қажет. Бір графикалық форматтың басқа форматқа өңделуіне арналған бірнеше программалар бар. Суреттерді әртүрлі программалық пакеттерден немесе Internet Web – беттерінің бірінен алуға етуге болады. Егер браузер Web – бетті бейнемен бірге шығарса, сәйкес графикалық файл компьютер жадысында уақытша сақталады. Браузердің көпшілігінде файлды үнемі локальды дискіде сақтауға рұқсат беретін командалары бар.Графикалық файлды алудың бірнеше басқа да варианттары бар: Бейнелер өзінің ақпараттылығымен пайдалы болуы мүмкін және Web – бетке көз тартар түр береді. Бейнелерді қолдануда кең таралған жағдайларды қарастырайық: іскерлік беттегі компанияның логотипі; жарнамалық хабарландыруға арналған графика; әртүрлі суреттер; диаграммалар және графиктер; шығармашылықтар шрифтер; бет авторының қолы; графикалық жолдың горизонтальды бөлінді сызық ретінде қолданылуы; әдемі маркерленген тізімдерді құруға арналған графикалық маркерлердің қолданылуы. Енді Web – бетке бейнені қалай қою керек екендігін қарастырайық. HTML тегі болып браузер бейнені шығаруды талап ететін келесі ортақ форматы табылады: Тұйықтаушы тег талап етілмейді.Мұндағы SRC – (SouRCe)бастауды білдіреді, ал файлдың аты шығарылған графикалық файлдың атын білдіреді. Web – беттегі бейнелер қарапайым мәтін сияқты гипермәтінді сілтемелер ретінде қолданылуы мүмкін.. Бетті оқушы бейненің үстінен шертеді де, басқа бетке немесе бейнеге ауысады. Гипермәтінді белгі сияқты бейнені белгілеуде, мәтінде де қолданылатын тегі қолданылады, бірақ және арасына бейнесінің тегі қойылады. Бұндай бейненің гипермәтінді сілтеме ретінде қолданылуы қосымша рамка ретінде. Шектелген тікбұрыштар және ALT= атрибуттары Графика бетінің жүктелу уақытын азайту үшін HTML – кодында бейненің өлшемін анықтау пайдалы. Егер ол беттің жүктелгенінен бұрын белгілі болса, онда браузер ең басында суретке рамканы апарады, содан кейін бетке мәтінді жүктей алады. Егер графикалық бейненің өлшемі анықталған болса, онда оған браузер шектелген тікбұрыш түріндегі орын резервтейді. Графика жүктеліп жатқан кезде бетті оқушы мәтінді оқи беруіне болады. Бұндай жұмыстың методикасы - өз оқушыларына деген жұмсақ мінезді қарым – қатынасын білдіреді. Графика өлшемдерін қалай беруге болады? Егер сізде қандай да бір графикамен жұмыс істеу программасы бар болса, онда бейненің өлшемін анықтау қиын емес. Ең алдымен файлды графикалық редакторде ашыңыз және суреттің өлшемін пиксельмен анықтаңыз. Бейне тегінде өз суретіңіздің ені мен ұзындығын мына түрде беріңіз: Егер сіз графикалық бейненің өлшемін көрсетпесеңіз, онда браузер әрбір суретті толығымен жүктейді және осыдан кейін ғана мәтінді жүктеуге көшуге болады. Ал бұл көп уақытты алады. Егер өлшемдер беріліп тұрса, онда көптеген жүргізуші браузерлер қажетті өлшемдегі шектелген тікбұрышты сыза алады және оны бейнемен төгуге етуді бастайды. ALT= атрибуты тегінің ALT= атрибуты қолданушыларға, тек мәтінді көретін браузерлер (егер браузерде графика режимі өшіп жатса), графиканың бетте орналасуы немесе оның мақсаттары туралы ақпарат алуына мүмкіндік береді. Microsoft Internet Explorer бейне шектелген тікбұрыштағы ALT= атрибутынан мәтінді көрсетеді. Егер Auto Load Image режимі қосылып тұрған жағдайда ғана Netscape Navigator бұл мәтінді шығарады. тегі ALT= атрибутымен бірге келесі түрде болады: Активті бейнелер. Активті бейнелер (image maps) немесе бейнелер, тышқан батырмасын сезушілер сіздерге туынды формасындағы графикалық мәзірді өз тармақтарыңызда құруға мүмкінді береді. Мұндай мәзірді қолдану арқылы оқушылар барлық тұйықтарда және сіздің Web – тармақ даңғылыңызда серуендей алады. Активті бейнелер - бұл басқа беттердің URL – на немесе тармақтарына сілтемеленетін активті облысты деп аталатын жай сурет. Келесі түрде жұмыс істейтін бейне бар: қолданушы активті бейнелердің IMG тегіндегі ISMAP атрибуты көмегімен анықталған суретті тышқанмен шерткен кезде, шерту координаттары Web- серверге беріледі. Сервер картада жіберілген координатты құрайтын активті облысты іздейді. Егер мұндай облыс бар болса, онда берілгендер URL картасында активтенеді және қолданушының браузері жаңа бетке көшеді. Активті бейненің көмегімен сіз бірден екі есепті шеше аласыз: өзіңіздің Web – тармағыңыздың мәзірін құра аласыз және онда графика орналастыра аласыз. Активті бейнені қайда қоюға болады: серверде немесе клиентте? Активті бейненің 2 типі бар: серверде және клиентте. Бірінші типтегі бейнені сервер URL активті облыстың сәйкес берілгендерін табу және браузерге қажетті бетті браузерде қолданады. Клиенттік машинада жұмыс істейтін активті бейнелер HTML бетіндегі активті облыстар жайлы ақпарат береді. Сондықтан браузер қандай облыс активті екенін өзі түсіндіреді және серверден қажетті бетті сұрайды. Активті бейнені қалай жасауға болады? Активті бейненің құрылу процесі 2 сатыдан тұралы. Ең алдымен сіз активті етіп жасайтын суреттің облысын анықтауыңыз қажет, содан кейін оны сілтемелермен басқа URL – апаруыңыз керек. Мұның бәрін активті облыстың координат бұрыштарын анықтау арқылы жасауға болады, бірақ қандай да бір программамен, мысалы, MapEdit – ті қолдану оңайға түседі. Картаны анықтау оңай. MapEdit – та сіз құрғалы отырған активті облыстағы бейнені құрайтын файл ашу қажет, одан кейін тышқанды апарып шерту арқылы облыс шекарасын береміз. Программа файлды активті облыстың белгіленген шекарасын автоматты түрде генерациялайды. Содан кейін осы облыспен URL-ді жазу қажет. Бейненің кез-келген орнында тікбұрыш, көпбұрыш немесе шеңбер формасында активті облыстар салуға болады және әрқайсысына URL-ді анықтау керек. Активті облыстар қиылысуы мүмкін, бірақ бұл жағдайда мәселелер туындайды. Оқушы дұрыс сілтемені таңдап отырғанына сенімді болу үшін облыстар арасына біраз орын қалдыру қажет; Активті облыстың шекаралары тікбұрыш, көпбұрыш немесе шеңбердің центрі мен радиусының координаттар бұрышымен беріледі. Бұл параметрлер картаға (Map-файл) жазылып отырады. Активті бейнені құрып болғаннан кейін, сіз алынған файлды NCSA немесе CERN форматында сақтай аласыз. Егер ол серверде немесе CSIM форматында жұмыс істесе және егер ол клиенттік машинада функционирленсе. Ал қалған барлық жұмысты MapEdit программасы орындайды. Ол картаны серверде құрады немесе картаны клиент жақтағы сіз көрсеткен HTML файлында кірістіреді. Егер сіз активті бейнені клиентте жасайтын болсаңыз, онда MapEdit тегтері үшін ғана берілгендерді қояды. USEMAP атрибутымен бірге бейне тегін өзіңіз беруіңізге тура келеді және оны тегінен кейін бірақ аласыз. USEMAP атрибутында карта атының алдынан # символын қоюды ұмытпаңыз: Сервердегі активті бейнелер. Бұрын қолданыста болған активті бейненің құрылуында (html 2.0 үшін) IMG тегіндегі ISMAP атрибутының қолданылуы талап етіледі. IMG тегі бейнеге қатысты, оны бастапқы және соңғы тегі арасына файл – картаның сілтемелеріне орналастыру қажет. Сізге HTML – файлына мынадай жолдарды енгізу керек: ISMAP атрибуты браузерге берілгендер бейнесі активті екенін көрсетеді. Егер оның қандай да бір облысында тышқан шертпесі пайда болса, онда ISMAP атрибуты көмегімен серверге координат шертпесін құрайтын хабарлама жіберіледі. Клиенттегі активті бейнелер. Алдыңғы бөлімде жазылған бейнелерге қарағанда, клиенттегі активті бейнелер сервердің программалық жабдықтарына тәуелсіз жұмыс істейді және сіз өз файлдарыңызда басқа серверге ауыстырсаңыз да функционирленуін тоқтатпайды. Бұндай бейнелерге 2 нәрсе қажет: HTML 3.0 қолдайтын браузер және HTML файлында жазылған карта туралы ақпарат. Серверде де, клиентте де жұмыс істейтін активті бейнелер. Сіздің серверде де, клиент – машинасында да жұмыс істейтін бейнемен жұмыс істегіңіз келетін шығар. Серверде де, клиентте де активті бейнелер құрғаннан кейін оларды бір HTML файлында біріктіру қиын емес. Ол үшін HTML документіне сервердегі активті бейне үшін жасауға арналған сол жазуды апару қажет. IMG тегіне USEMAP= атрибутын қосуды ұмытпаңыз. USEMAP= атрибуты ISMAP тегіне қарағанда жоғары приоритетті болып табылады. Егер браузер клиентте жұмыс істейтін активті бейнені қолдаса, онда бұл атрибутты ол мойындайды. Бұндай бейнелерді білмейтін браузер USEMAP= атрибутына әсет етеді. Өзін тексеруге арналған сұрақтар: 1. XML және HTML. XML Синтаксисі. XML-дің HTML-ден айырмашылығы. DTD. 2. XML- құжатының визуалды тәсілдері. Ұсынылатын әдебиеттер: 1. Веб-дизайн/Дмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр. 2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин – СПб: BHV, 2000 – 672 стр. 4–Дәріс. HTML-да кестенің жазылу тәсілдері. Дәріс мазмұны: , , , , . NOWRAP, COLSPAN=, ROWSPAN=, WIDTH=, UNIT=, COLSPEC=, DP=, СELLPADDING=, ALIGN= және VALIGN=, BORDER=, CELLSPACING= атрибуттары. HTML-да кестенің жазылу тәсілдері. тегі. Кестенің жазылуы үшін тегі қолданылады. тегі басқалар сияқты жолды кестеге дейін және кестеден кейін автоматты түрде аударады. тегі. тегі (Table – Row сөзінен қысқартылған) – кестенің жолын құрады. Егер кесте екі жиын тегінен құралса, онда ол екі жолдан да тұрады. Сіз бір жолға орналастыратын бүкіл мәтін, басқа тег және атрибуттар тегтерінің арасына орналасуы қажет. тегі. Кесте жолының ішінде әдетте берілгендер ұяшығы орналасады. Мәтін немесе бейне құрайтын әрбір ұяшық тегтерімен қоршалуы керек. Жолдағы тегтерінің саны ұяшық санын анықтайды. тегтерінің бес сыңарлы жолы бес ұяшықтан тұрады. тегі. Кестенің баған және жолының тақырыпшасын беру кезінде тақырып тегі қолданылады. Бұл тегімен аналогты болып келеді. тегтерінің арасындағы мәтін автоматты түрде қою шрифтпен жазылады және үнсіздік бойынша ұяшықтың ортасында орналасады. Орталықтандыруды алып тастауға болады және мәтінді сол жақ немесе оң жақ жиек бойынша тегістеуге болады. Егер ні <В> тегімен және атрибутымен бірге қолданса, онда мәтін де тақырып сияқты көрінеді. Бірақта, барлық браузерлердің кестеде қою шрифті қабылдамайтынын ескерген жөн, сондықтан кестенің тақырыбын көмегімен берген дұрыс. тегі. кестенің тақырыбын құруға рұқсат береді. Үнсіздік бойынша тақырып орталықтанады және () кестесінің үстінде немесе () кестенің астында орналасады. Тақырып кез-келген мәтіннен және бейнеден тұруы мүмкін. Кей кезде тегі сурет астындағы жазуға қолданылады. NOWRAP атрибуты . Кестедегі ұяшықтың бір жолына сыймайтын кез-келген мәтін келесі жолға көшеді. Бірақта, NOWRAP атрибутын және тегтерімен бірге қолданғанда ұяшықтың ұзындығы мәтін бір жолға сыятындай етіп кеңейтіледі. COLSPAN= атрибуты. және тегтері COLSPAN= атрибутының көмегімен модифицирленеді (Column Span, бағандардың бірігуі). Егер сіз қандай да бір ұяшықты кеңейткіңіз келсе, онда осы COLSPAN= атрибутын қолдануға болады. ROWSPAN= атрибуты. және тегтерінде қолданылатын ROWSPAN= атрибуты COLSPAN= атрибутына аналогты болып келеді және ол жолдардың санын береді. Егер сіз ROWSPAN= атрибутында санды көрсетсеңіз, онда жолдың сәйкес саны кеңейтілген ұяшықтың үстінде болуы қажет.Оны кестенің төменгі жағына орналастырмау керек. WIDTH= атрибуты. WIDTH= атрибуты екі жағдайда қолданылады.Оны барлық кестенің енін беруде тегіне қоюға болады және ұяшық тобының немесе ұяшық енін беруде немесе тегтерінде қолдануға болады. Енін пиксельмен немесе пайызбен көрсетуге болады. Мысалы, егер сіз тегінде WIDTH=250 деп берсеңіз, онда сіз монитордағы бет өлшеміне тәуелсіз ені 250 пиксель кестені аласыз. тегінде WIDTH=50% беру кезінде, кесте экрандағы кез келген өлшемдегі бейнеде беттің жарты енін алып тұрады. UNIT=атрибуты. тегінің UNIT=атрибуты барлық кесте мен оның жеке бағандарының өлшемдерін көрсетуде қолданылатын өлшем бірлікті анықтайды. UNIT=атрибуты үш мәнді қабылдауы мүмкін: UNIT=EN - үнсіздік бойынша қосылатын мән және en - бос орынға тең өлшем бірлікті береді. Еn - бос орын - әріпінің еніне тең типографты өлшем бірлік. Бос орынның нақты өлшемі таңдалған шрифтке тәуелді: ұсақ шрифтке қарағанда ірі шрифтке en - бос орын көбірек беріледі. Әдетте en- бос орын шрифт өлшемінің жартысына тең. Мысалы, 12 - пунктті шрифт үшін en - бос орын 4 - пунктті алады. UNIT=RELTIVE барлық кесте еніндегі баға енін процентпен беру үшін қолданылады. Бұл тәсілді мүмкіндігінше проценттегі енді көрсетудің орнына қолдануға болады. Қолданылатын бірлікті беру кезінде енгізілген сандар проценттердегі бағандар ені болып қабылданады. UNIT= PIXELS – бұл мән экрандағы бағанның енін нақты білуде қолданылады. Бұл жағдайда оны пиксельмен беру оңай. Мысалы, кестенің енін 340 пиксельмен формалайды. COLSPEC=атрибуты. UNIT=атрибутымен бірге қолданылатын COLSPEC=атрибуты кестенің әрбір бағаны қанша орын алатынын және онда берілгендер қалай тегістелетінін анықтайды. Тек тегінде ғана қолданылады. COLSPEC= барлық бағанды санайды және әрқайсысы үшін тегістеу мен өлшем береді. Баған үшін (немесе ұяшық үшін) тегістеудің 5 тәсілі бар: L – сол жақ жиек бойынша, C – центр бойынша, R – оң жақ жиек бойынша, J – оң және сол жақ жиек бойынша және D – ондық үтір бойынша тегістеу. Егер сізде 5 баған болса, онда оның енімен әрқайсысын тегістеуді келесідей анықтауыңызға болады. DP=атрибуты. DP=атрибуты (Decimal Point, ондық белгі) ондық бөлгіштің толық бөлімін бөлуде қолданылатын символды анықтайды. DP= “.”(үнсіздік бойынша) ондық символ ретінде нүктені көрсетеді. DP= “,” үтірді береді. Бос ұяшықтар. Егер ұяшық берілгендерді қамтымаса, онда оған шекарада қажет етілмейді. Егер сіз ұяшықтың берілгендері болмай, шекарасы болғанын қаласаңыз сіз оған көрсетілім кезінде көрінбейтін бір нәрсе қоюыңыз қажет. бос жолын қолдануға болады. Алынған ұяшыққа ешқандай берілгендерді енгізбей-ақ, олардың ендерін пиксельмен анықтап бос бағандарды да беруге болады. Бұл тәсіл бетке мәтін мен графиканы қою кезінде пайдалы болуы мүмкін. СELLPADDING=атрибуты. СELLPADDING=атрибуты - ұяшық берілгендерімен оның шекарасы арасындағы бос кеңістіктің енін анықтайды, яғни ұяшық ішінен алаң береді. ALIGN= және VALIGN= атрибуттары. , және тегтерін ALIGN= және VALIGN= атрибуттарының көмегімен модифицирлеуге болады. ALIGN=атрибуты мәтін және графиканың горизонталь бойынша тегістелуін анықтайды, яғни оң және сол жақ жиек бойынша, центрі бойынша тегістеу. Горизонталь тегістеу бірнеше тәсілмен берілуі мүмкін: ALIGN=BLEEDLEFT – ұяшықтың берілгендерін сол жаққа тығыздап қысады. ALIGN= LEFT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен сол жаққа тегістейді. ALIGN=CENTER – ұяшықтың берілгендерін центр бойынша орналастырады. ALIGN=RIGHT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен оң жаққа тегістейді. VALIGN= атрибуты – мәтін және графиканы ұяшық ішінен вертикаль бойынша тегістейді. Вертикаль тегістеу келесі тәсілдермен берілуі мүмкін: VALIGN=TOP – ұяшықтың берілгендерін оның жоғарғы шекарасында тегістейді. VALIGN=MIDDLE – ұяшықтың берілгендерін вертикаль бойынша орталықтандырады. VALIGN=BOTTOM - ұяшықтың берілгендерін оның төменгі шекарасында тегістейді. BORDER=атрибуты. тегінде үнемі кестенің өзі және кестенің ұяшықтарын қоршап тұратын рамкалардың, яғни сызықтардың қалай көрінетіндігін анықтайды. Егер сіз рамкасын бермесеңіз, онда сызығы жоқ кесте аласыз. CELLSPACING= атрибуты. CELLSPACING= атрибуты – ұяшықтар арасындағы аралық енді пиксельмен анықтайды. Егер бұл атрибут берілмесе, онда үнсіздік бойынша 2 пиксельге тең көлем беріледі. CELLSPACING= атрибутын мәтін мен графиканы өзіңізге қажетті жерге орналастыру үшін қолданылады. Егер сіз бос орын қалдырғыңыз келсе, онда ұяшыққа бос орынды жазуға болады. Өзін тексеруге арналған сұрақтар: 1. Статикалық және динамикалық құжаттарды өңдеудегі ерекшеліктер. 2. Белгі тілдердің жалпы принциптері. Ұсынылатын әдебиеттер: 1. HTML и CSS на примерах/Мержевич – СПб: BHV, 2005-448 стр. 2. HTML и CSS. Совместное использование/ДеБольт – СПб: НТ-Пресс, 2006-504 стр. 5–Дәріс. Беттің дизайнында кестелерді қолдану Дәріс мазмұны: Көптүсті кестелер құру. Netscape Navigator -дағы түрлі-түсті шекаралар. Беттің дизайнында кестелерді қолдану. Кестелердің жақсы бір қасиеті – ол құрып отырған кестенің шекараларын көрінбейтін етіп жасауға болады. Ол <ТАВLЕ> тегінің көмегімен бетте текст пен графиканы кірістіре отырып әдемі орналастыруға болады.Осы күнге дейін <ТАВLЕ> тегі HTML-де өңдеудің жалғыз қуатты құралы болып отыр. Web-беттердің дизайнерлері қазір практикалық түрде баспа беттерін құрушылар сияқты <бос кеңістікті > қолдануда. Кең көлемді кестелер басқаларға қарағанда текстердің Web –беттерде иерархиялық орналасудан алшақтатады. Егер браузер кестені қабылдаса, онда кестенің көмегімен алынған эффектілерді дұрыс көрсететін болады. Түрлі-түсті кестелер құру. Жетекші браузерлер бірнеше түстерді бейнелейді. Кестені бояудың бірнеше әдістері бар. Ол әдетте қолданылатын браузерге байланысты. Netscape Navigator –тағы түрлі-түсті шекаралар. Сіз кестені жақтаумен әсемдеп қана қаймай, оған фон мен текстің түсінен әлдеқайда жақсы түс беруіңізге болады. Қарапайым GIF (немесе өзіңіз фон ретінде қойғыңыз келген кез-келген GIF,) құрыңыз және оны <ВODY> –тегінде фон ретінде анықтаңыз.Сосын бет фонының түсін беріңіз. Нәтижесінде сіздің <ВODY> –тегіңіз мына түрде болады: Сіз екі қабаттан тұратын фон құрдыңыз- GIF және берілген түс. Нәтижесінде фондық түс кестенің барлық шекараларында және көлденең (<НR>)жолақтарда көрінетін болады. Сіздің фондық GIF –іңіз сұр түсті болуына тәуелсіз,кестенің түрлі-түсті сызықтары мен шекаралары ерекшеленіп тұрады. Егер фондық GIF күрделі емес болып құрылса,бетті жүктеу уақыты кішкене өседі.Төмендегі мысалда –дегі түстер әсіресе кестелерде кең көлемде қолдануға мүмкіндік беретінін көрсетеді. Өзін тексеруге арналған сұрақтар: 1. Форма мен мазмұнның ортогональдық принципі 2. HTML –дің ерекшеліктері 3. XML –дің ерекшеліктері Ұсынылатын әдебиеттер: 1. HTML және CSS мысалдары/Мержевич – СПб: BHV, 2005-448 б. 2. HTML және CSS. Бірігіп қолдану/ДеБольт – СПб: НТ-Пресс, 2006-504 б. 6–Дәріс. Фреймдер Дәріс мазмұны: Фрейм дегеніміз не? Фреймдер не үшін қолданылады? Фреймдер қалай жұмыс істейді? Фреймдік құрылым жасау Берілгендері бар фреймді дайындау Фреймдер Фрейм дегеніміз не? Фрейм дегеніміз – сурет айналасындағы жақтау, терезе немесе бет деген сөздермен мағыналас. -деген тегті енгізеді, НТМL-беттің дизайнері экран браузерін бөліктерге бөледі. Нәтижесінде бетті қарап отырған адам оның бөліктерін басқа бөліктеріне тәуелсіз қарай береді. Фреймдерді қабылдайтын браузер әр түрлі беттерді түрлі секцияларға , фреймдарға жүктеп тастайды. Мысалы,сіз бетті өзіңіздің фирмалық белгіңізді экранның жоғарғы бөлігіне орналастырып, қалған бөліктерін қолданушы өзі ары қарай қарапайым тәсілмен ашып отыратындай етіп құруыңызға болады. Жанынан навигациялық батырмалар қоюға болады. Оның көмегімен оқырман осы батырманы тышқанмен шерткенде орын ауыстырылмай, эканның белгілі бір бөлігі ғана қозғалады. Фреймдер не үшін қолданылады? Навигация құралдарының немесе фирмалық белгінің фиксациясы – фреймдерді қолданудың көрнекі тәсілі болғаны оларды толық қолдану деген сөз емес. Фреймдерді қолдануда дизайнерлердің ойына ең бірінші саналып өткен шешімдер келеді. Бірақ браузер экранына фрейм қойылған сайын сіз берілгендерді орналастыруға арналған территорияны қысқартып отырасыз. Сіз фреймдерді неғұрлым көбірек кіргізсеңіз, пайдалы кеңістік соғұрлым азаяды және сіз осы әрекетіңізбен фреймдері бар Web-беттердегі навигациялармен таныс емес өз оқырмандарыңызды шатастырасыз. Мысалы,фреймде ең қажетті беттердің алғашқы бірнеше деңгейлерінде компанияның логотипін сақтап, ал негізгі берілгендерді фреймдерсіз көрсеткен дұрыс. Фреймдер қалай жұмыс істейді? Фреймдер күрделі болғанымен оларды түсіну оңай, егер кесте ұяшықтарына аналогия жүргізсе.Фреймдердің экранда орналасуы ұяшықтардың кестеде орналасуы сияқты: тегтер мен атрибуттар кестедегі сияқты жұмыс атқарады. Бірақ, беттегі бірлік фреймдер мен кесте ұяшықтары арасындағы аналогияның маңыздылығымен қоса оның айырмашылығын ажырата білген жөн.Ұяшық берілгендері кестесі бар HTML-бетінің кодында берілген. Кестенің берілгендерін құрайтын мәтін немесе графика, HTML-бетіндегі кестені бейнелейтін тег немесе атрибут сияқты енгізіледі. Керісінше, фреймдері бар экран HTML-бетте (frameset ) деп аталатын сөзбен бейнеленеді. Фреймдердегі берілгендер кез - келген жерде – басқа каталогта, локальді серверде немесе желінің жойылған түйіндерінің бірінде орналасқан бөлек HTML-бет. Фреймдік құрылым фреймі бар экранды ұйымдастыру тәсілін және әрбір фреймнің бастапқы берілгендері қайда орналасқанын ғана анықтайды.Барлық фреймдер үшін олардың берілгендерінің орнын бейнелейтін URL болады. Ереже бойынша фреймдік құрылымы бар бетте олардың берілгендері болмайды.Мұндай бет үлкен емес – ол экранны ңтек кадрлық құрылымын ғана анықтайды.Құжат фреймдерге жүктелген уақытта сіз осы құжаттағы сілтемеге тышқанмен шертіп, басқа кадрлардағы фреймдік құрылымда жасалған бір - бірімен байланысқан құжаттарды шақыруыңызға болады. Фреймдері бар қарапайым беттерді құру. фреймі бар НТМL беттерді құру және негізгі тегтер мен атрибуттардың қажеттілігін жақсылап түсіну үшін фреймдері бар қарапайым жолдар жұбын құрайық. Екі фреймнен тұратын бет құрайық.Сол жақтан басылымдар мазмұнының тақырыбын бейнелейтін, ал оң жақтан басылымдардың өздерін бейнелейтін фрейм құрайық. Қолданушы мазмұн орналасқан экран бөлігіндегі сілемені тышқанмен шерткенде, сол басылым оң жақта пайда болатындай етіп жасайық. Бұл фреймдерді қолдануда кеңінен таралған әдіс. Фреймдік құрылым жасау. Алдымен біз фреймдердің қайда орналасуын және олардың қандай мөлшерде болатын беттің жалпы түрін ойластыруымыз қажет.Содан кейін олардың мазмұны жайлы қарастырамыз.Төменде тегінің көмегімен құрылған қарапайым фреймдік құрылымның коды көрсетілген.Мынаған назар аударыңыз:фреймдік құрылымы бар бетте <ВОDY> тегі жоқ. Берілгендері бар фреймді дайындау Енді берілгендері бар фрейм жасайық.Сол жақ фреймге оң жақ фреймдегі екі беттің арасында ауысып тышқанмен шертетін menu.html бетін құрайық. menu.html файлы бұл – мазмұн ретінде құрылған қарапайым НТМL-бет. Негізінде біз мазмұны бар дайын бетті алып оны қолдана беруімізге болады. Бұл фреймнің жіңішке жіне биік екенін ұмытпаңыз, сондықтан оған жүктелетін бет соған сәйкес жобалануы қажет. Енді сілтемені тышқанмен шерткенде басқа беттердің қайда пайда болатынын анықтауымыз қажет. Біз олардың оң жақта пайда болуын қалағандықтан сілтеме тегіне ТАRGET= (TARGЕТ="main") атрибутын енгізейік. Бұл қолданушы сілтемені басқан кезде шақырылып отырған бет main фреймінде пайда болады дегенді білдіреді. Біз main фрейміндегі барлық беттерді бейнелегендіктен, мазмұндағы барлық сілтемелердің тегіне ТАRGЕТ="main" атрибутын қосамыз, сонда сол жақтағы фреймде қай жерде тышқанмен шертсек, сол жерде бет пайда болады, ал ол бізге керек емес, бірақ басқа жағдайда олай жасаған керек те болып қалады. Мысалы, сіз жай ғана келесі сілтемелерді шығарып беретін < Мазмұнның басқа пункттері > сілтемесін қосуыңызға болады. Оқырмандар сілтемелердің көптігін байқау үшін мазмұнды ұзынырақ етіп жасаған дұрыс. main фреймін дайындау Оң жақтағы main фреймінде HTML-беттер болады. Сіз кішірек болып көрінетіндей терезеде жобалағаныңыз дұрыс, себебі экранның белгілі бір бөлігінде мазмұнның сол жақ кадрлары орналасады. Но больше эти страницы ничем не примечательны. </b><b>тегін пайдалану.</b> <p>Сіздің көптеген қолданушыларыңызда әлі фреймдермен жұмыс істей алмайтын браузерлер бар. Сол себепті сіздің негізгі беттеріңізді фреймсіз ұсынған жөн. Егер сіздің фреймдік құрылымды бетіңізде ескірген браузерлі оқырман болса, онда осы бетте орналасқан < NOFRAMES >және </ NOFRAMES >тегтерінің арасындағылардың барлығы өте жақсы көрініп тұратын болады - браузер жай ғана фреймдерді елемейтін болады. Сондықтан міндетті түрде <ВODY></ВОDY> тегтерін пайдалану керек. Әйтпесе, сіз экранды қайта фреймдерсіз құруыңыза тура келеді. Фреймдік бетке No Frames (Фреймсіз) батырмасын кірістіруге болады. Оның бағыты белгілі. Мұндай әдіс ойға қонымды және тез жүзеге асады. </p> <br /><b>Өзін тексеруге арналған сұрақтар</b>: <p>1. Қолданушыдан қайтымды ақпаратты алудың мақсатқа лайықтылығы</p> <p>2. Қонақ кітап/форумды құру. <br /><b>Ұсынылатын әдебиеттер</b>: </p> <p>1. HTML и CSS на примерах/Мержевич – СПб: BHV, 2005-448 стр.</p> <p>2. HTML и CSS. Совместное использование/ДеБольт – СПб: НТ-Пресс, 2006-504 стр. <br /><b>7–Дәріс. </b><b>Форм</b><b>алар</b> <br /><b>Дәріс мазмұны</b><b>:</b> <br /><ul> <li/> <br />Сіздің формаңыз жақсы көріну үшін не істеу керек? <br /><li/> <br />Формаларды жұмыс істеуге мәжбүр ету. <br /></ul> <br /> <br /><b>Форм</b><b>алар</b> </p> <p>Интерактивті формалардың көмегімен оқырмандар Web-бетті құрушылармен оңай хабарласа алады. Форма мен <mailto:> тегінің қарапайымдылығының арқасында Web-түйіндер мен олардың оқырмандарының арасында екіжақтылы диалог мүмкін болды. Бұл Web- навигаторларға коммерциялық мүмкіндіктер мен қызықты болашаққа жол ашады.Өкінішке орай, көптеген ескірген браузерлер <mailto:> тегін қабылдамайды. </p> <br /> <br /><b>Сіздің формаңыз жақсы көріну үшін неістеу керек? </b> <p>Барлық қиындықтарды жеңудің бір тәсілі ол – енгізу алаңы мен мәзір жолын беттің сол жағына, ал бағыттаушы мәтінді оң жағына орналастыру болып табылады. Енгізу аумағының енін SIZЕ= атрибутының көмегімен сіз жолдарды сол жақтан туралайсыз, ал оң жақтағы мәтін көптеген құжаттардағы сияқты тураланбаған болады. Мұндай форма әлдеқайда жинақы көрінеді. Мәтін мен форманы енгізу алаңының арасын ашуды ұмытпаңыз. Бұдан басқа күрделірек тәсіл – форма элементтерін кесте ұяшықтарына орналастыру. Бұл бағыттаушы мәтінді сол жақтан, ал енгізу алаңын оң жақтан орналастыруға көмектеседі.</p> <br /> <br /><b>Формаларды жұмыс істеуге қалай мәжбүр етуге болады? </b> <p>Сіз күтіп отырған бөлім осы шығар – енгізілген берілгендерді формамен серверге қалай сілтеуге болады. Шындығында олай жасау өте оңай. Ең бірінші мәселе – ол берілгендерді қайда жіберу, соны түсіну. Сіз <FORM> тегінде АСТION= атрибутын жазасыз және енгізілген берілгендерді өңдеп, олармен пайдалы бір нәрсе істейтін URL программаға сілтеме жасайсыз.</p> <br /><b>Өзін тексеруге арналған сұрақтар</b> <p>1. Қолданушының ақпаратты <a href="/bilim-mazmnin-anitajtin-jattar.html">енгізуі және өзгертуі</a></p> <p>2. Форма – қолданушы мен қарым қатынас жасаудың негізгі элементі. <br /><b>Ұсынылатын әдебиеттер:</b> </p> <p>1. HTML, CSS, Скриптер: сайт құруда практика/Ломов – СПб: BHV, 2005-416 б.</p> <p>2. HTML/XML/CSS/Штайнер – СПб: Базалық білімдер Лабораториясы, 2001, 512 б. <br /><b>8- дәріс. Апплеттер</b> <br /><b>Дәріс мазмұны:</b> <br /><ul> <li/> <br />АРРLЕТ ұғымы. <br /><li/> <br />АРРLЕТ контейнерінің түрі <br /><li/> <br />РАRАМ контейнерін қолдану <br /></ul> <br /> <br /><b>Апплет</b><b>тер</b> </p> <p>Желі ақылы қолданушы компьютеріне кішкене ұялы телефондардың программасын енгізіп, олармен жұмыс істеу әрине Java көмегімен орындалады. Бұл программалар Java терминологиясында апплеттер (алмалар) деп аталады. НТМL- құжаты мәтініне апплеттерді шақыру үшін АРРLЕТ контейнері енгізілді, ол <аррlet> тегімен басталып, </аррlet>тегімен аяқталады. Апплеттерге сілтемелері бар жалпы құжат түрі төмендегі мысалдағыдай болады. </p> <p>Бұл мысалда құжат тақырыбы және ( H1 тегі) және қисық сызықтан кейін ені 200 пиксель және биіктігі 100 пиксель болатын апплет өрісі басталады. Берілген өріске hello (файл hello.class) деп алалатын аррlet жүктеледі. аррlet контейнері тегтердің басы мен аяғының арасындағы мәтін ны қолданбай, браузер көмегімен бейнеленетін құрылған мәтіндер мен контейнерлерді орналастыру үшін қолданылады. <br /> <br /><HTML> <br /> <br /><HEAD> <br /> <br /><TITLE> applet-ке сілтемелері құрылған құжат. </p> <p> </TITLE></p> <br /> <br /></HEAD> <br /> <br /><body bgcolor=#FFFFFF> <br /> <br /><CENTER> <p> <h2> hello Java- апплетімен құрылған құжат </h2> </p> <br /> <br /><HR> <br /> <br /><applet code=hello width=200 height=100> <p> Егер сіздің браузеріңіз Java қабылдаса, Аррlet осы орында бейнеленеді</p> <br /> <br /></applet> <br /> <br /><HR> <br /> <br /><span id='Test_Style_Shits_in_Communicator'><h2> Test Style Shits in Communicator</span> </h2> <br /> <p>This is a first part of the document</p> <br /> <br /><h2> Test Style shits in Communicator </h2> <br /> <p>This is a first part of the document</p> <p>The body of the document should be here. <br /> <br /><center> <br /> <br /><h3> Ақпаратты технологиялар орталығы </h3> <br /> <br /><span id='Internet_ақпараттық_ресурсы'><h2> Internet ақпараттық ресурсы</span> </h2> <br /> <br /><h3> Профессионалдар емес үшін оқу әдістемесі </h3> <br /> <br /><h3> Храмцов П.Б</h2> <h3> Москва, 1997</h2> <br /> <br /><hr> </center> <br /> <br /> <br /><span class = fs> C </span>1995 жылы Internet – ке 25 жыл болды. Қазіргі кезде – бұл бүкіл әлемдегі өте үлкен ақпараттық ресурс. Сонымен қатар Internet – бұл жер шарындағы ең атақты желі. 1997 жылы Internet (Internic – Internet Information Center) рамкасында халықаралық желі координация орталығының берген бағасы бойынша желіде бірнеше ондаған миллион компьютер – серверлер үнемі қосылып тұратындығы анықталған. Осы үлкен ақпараттық ресурс толығымен орталықтандырылмаған және бір де бір мемілекетке және дүние жүзінің ірі финанстық компанияларына тәуелді емес. <br /> <br /><img src=image1.gif> <br /> <br /><CENTER> <br /> <br /><table> <br /> <br /><tr><TH><img src="radleg3.gif"></TH><TH><span id='ISTC._Project_RADLEG(245)'><h2>ISTC. </p> <p>Project RADLEG(#245)</span></h2></p> <p>RRC "Kurchatov Institute" <br /> <br /> <br /><i>Dec, 25, 1995</i> <br /> <br /></TH></tr> <br /> <br /></table></h3></h3></center></center></body></html></form>
Microsoft Internet Explorer және Netscape Navigator
Бұл құралдардың қажеттілігі бұрын пайда болды, тек жақында ғана құрастырушылар ұсынды. Табуляцияны бірнеше тәсілмен беруге болады.
Ең қарапайым, тегін жазу, онда n жаңа абзацтың алдындғы еn-бос орындар санын анықтайды. еn-бос орын – өлшеудің типографиялық бірлігі, сіз қолданатын шрифтағы n әріпінің енімен бірдей. Соған сәйкес тегі ені 4 еn-бос орын болатын табуляция символын алады.
Егер сіз бірнеше орынға берілген мөлшерде табуляция символын қолданғыңыз келсе, онда оның мөлшерін беретін орынға тегін ID= атрибутымен бірге қойыңыз, мысалы, соған сәйкес:
Енді беттің кез-келген жеріне жазса жеткілікті, және табуляция символы TABONE тең болады. Сәйкесінше TABTWO, TABTHREE, TABFOUR ұқсас тәлімен құруға болады.
Тізімдер мәтін құрылымының негізгі құралдары болып табылады және белгілеулердің барлық тілдерінде қолданылады. HTML-де келесі тізім түрлерінен тұрады: номерленбейтін тізім (реттелмеген), номерленетін тізім (реттелген) және анықтамалдың тізімі. Номерленбейтін тізім тегі (Unordered Lists
Номерленбейтін тізім. Номерленбейтін тізім мәтін типін құруға арналған.
тізімнің бірінші элементі
тізімнің екінші элементі
тізімнің үшінші элементі
Берілген тізім келесі түрде жазылады:
Горизонтальды сызып алу (horizontal rule) құжатты бөлікке бөлу үшін қолданылады. Бір ғана
Жоғарыда қарастырылған мәтінді бейнелеу құралдары, құжаттың басты тегі - гипермәтіндік сілтемеге – қосымша, сөзсіз маңызды болып келеді. Гипермәтіндік сілтеме жазу үшін, “зәкір (якорь)” (anchor) деп аталатын …… контейнері қолданылады. Зәкір бірнеше атрибут қабылдайды, ең негізгісі HREF (Hyper Text Reference) болып табылады. Қарапайым сілтемені мына түрде жазуға болады:
Деректер базасының индексі“Жусан”
HREF атрибутының мәні болып, “polyn.net.kiae.su” машинасында “index.shtml” құжат адресі табылады, оған рұқсат HTTP протоколы арқылы беріледі. Осы адрестің жазу формасы универсалды локаторлық ресурс (Universe Resource Locator) деп аталады және WWW технологиясының құрама бөлімі болып табылады.
А контейнерінің мазмұны, тег басы және тег соңы аралығында қосылады, мәтінде контекстік гипермәтіндік сілтемеге арналған түспен бөлінеді.
Web-серверді құрұдың ерекшелігі, онда көрсетілген ақпаратты жеке бөліктерге бөлуге болады. Жеке бөліктер арасындағы байланыс ұйымдары гипермәтіндік сілтеме арқылы анықталады.
1. html-құжатының құрылымы. Беттің құрылымдық элементтері.Элементтер типі.
2. WWW-сервисінің жұмыс тәртібі. Сервер және клиент арасында мәлімет алмасу. Формалар. Ұсынылатын әдебиеттер:
1. Веб-дизайн/Дмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин – СПб: BHV, 2000 – 672 стр. 3–Дәріс. Webтегі графика Дәріс мазмұны:
Webтегі ең кең таралған графикалық форматтар болып GIF және JPEG форматтары болып табылады. Web – бетке бейне қою үшін ең алдымен оны салып алу қажет немесе дайын бейнені алуға болады. Сурет салудың кез-келген программасында қарапайым бейнені салу және оны қажет етілген форматқа сақтау қиынға түспейді. Егер программа бұл форматты қабылдамаса, онда файлды өңдеу қажет. Бір графикалық форматтың басқа форматқа өңделуіне арналған бірнеше программалар бар. Суреттерді әртүрлі программалық пакеттерден немесе Internet Web – беттерінің бірінен алуға етуге болады. Егер браузер Web – бетті бейнемен бірге шығарса, сәйкес графикалық файл компьютер жадысында уақытша сақталады. Браузердің көпшілігінде файлды үнемі локальды дискіде сақтауға рұқсат беретін командалары бар.Графикалық файлды алудың бірнеше басқа да варианттары бар:
Бейнелер өзінің ақпараттылығымен пайдалы болуы мүмкін және Web – бетке көз тартар түр береді. Бейнелерді қолдануда кең таралған жағдайларды қарастырайық:
Тұйықтаушы тег талап етілмейді.Мұндағы SRC – (SouRCe)бастауды білдіреді, ал файлдың аты шығарылған графикалық файлдың атын білдіреді. Web – беттегі бейнелер қарапайым мәтін сияқты гипермәтінді сілтемелер ретінде қолданылуы мүмкін.. Бетті оқушы бейненің үстінен шертеді де, басқа бетке немесе бейнеге ауысады. Гипермәтінді белгі сияқты бейнені белгілеуде, мәтінде де қолданылатын тегі қолданылады, бірақ және арасына бейнесінің тегі қойылады.
Бұндай бейненің гипермәтінді сілтеме ретінде қолданылуы қосымша рамка ретінде.
Шектелген тікбұрыштар және ALT= атрибуттары
Графика бетінің жүктелу уақытын азайту үшін HTML – кодында бейненің өлшемін анықтау пайдалы. Егер ол беттің жүктелгенінен бұрын белгілі болса, онда браузер ең басында суретке рамканы апарады, содан кейін бетке мәтінді жүктей алады. Егер графикалық бейненің өлшемі анықталған болса, онда оған браузер шектелген тікбұрыш түріндегі орын резервтейді. Графика жүктеліп жатқан кезде бетті оқушы мәтінді оқи беруіне болады. Бұндай жұмыстың методикасы - өз оқушыларына деген жұмсақ мінезді қарым – қатынасын білдіреді.
Егер сізде қандай да бір графикамен жұмыс істеу программасы бар болса, онда бейненің өлшемін анықтау қиын емес. Ең алдымен файлды графикалық редакторде ашыңыз және суреттің өлшемін пиксельмен анықтаңыз. Бейне тегінде өз суретіңіздің ені мен ұзындығын мына түрде беріңіз:
Егер сіз графикалық бейненің өлшемін көрсетпесеңіз, онда браузер әрбір суретті толығымен жүктейді және осыдан кейін ғана мәтінді жүктеуге көшуге болады. Ал бұл көп уақытты алады. Егер өлшемдер беріліп тұрса, онда көптеген жүргізуші браузерлер қажетті өлшемдегі шектелген тікбұрышты сыза алады және оны бейнемен төгуге етуді бастайды.
Microsoft Internet Explorer бейне шектелген тікбұрыштағы ALT= атрибутынан мәтінді көрсетеді. Егер Auto Load Image режимі қосылып тұрған жағдайда ғана Netscape Navigator бұл мәтінді шығарады.
Активті бейнелер.
Активті бейнелер (image maps) немесе бейнелер, тышқан батырмасын сезушілер сіздерге туынды формасындағы графикалық мәзірді өз тармақтарыңызда құруға мүмкінді береді. Мұндай мәзірді қолдану арқылы оқушылар барлық тұйықтарда және сіздің Web – тармақ даңғылыңызда серуендей алады. Активті бейнелер - бұл басқа беттердің URL – на немесе тармақтарына сілтемеленетін активті облысты деп аталатын жай сурет. Келесі түрде жұмыс істейтін бейне бар: қолданушы активті бейнелердің IMG тегіндегі ISMAP атрибуты көмегімен анықталған суретті тышқанмен шерткен кезде, шерту координаттары Web- серверге беріледі. Сервер картада жіберілген координатты құрайтын активті облысты іздейді. Егер мұндай облыс бар болса, онда берілгендер URL картасында активтенеді және қолданушының браузері жаңа бетке көшеді.
Активті бейненің көмегімен сіз бірден екі есепті шеше аласыз: өзіңіздің Web – тармағыңыздың мәзірін құра аласыз және онда графика орналастыра аласыз.
Активті бейнені қайда қоюға болады: серверде немесе клиентте?
Активті бейненің 2 типі бар: серверде және клиентте. Бірінші типтегі бейнені сервер URL активті облыстың сәйкес берілгендерін табу және браузерге қажетті бетті браузерде қолданады. Клиенттік машинада жұмыс істейтін активті бейнелер HTML бетіндегі активті облыстар жайлы ақпарат береді. Сондықтан браузер қандай облыс активті екенін өзі түсіндіреді және серверден қажетті бетті сұрайды.
Активті бейнені қалай жасауға болады?
Активті бейненің құрылу процесі 2 сатыдан тұралы. Ең алдымен сіз активті етіп жасайтын суреттің облысын анықтауыңыз қажет, содан кейін оны сілтемелермен басқа URL – апаруыңыз керек. Мұның бәрін активті облыстың координат бұрыштарын анықтау арқылы жасауға болады, бірақ қандай да бір программамен, мысалы, MapEdit – ті қолдану оңайға түседі.
Картаны анықтау оңай. MapEdit – та сіз құрғалы отырған активті облыстағы бейнені құрайтын файл ашу қажет, одан кейін тышқанды апарып шерту арқылы облыс шекарасын береміз. Программа файлды активті облыстың белгіленген шекарасын автоматты түрде генерациялайды. Содан кейін осы облыспен URL-ді жазу қажет. Бейненің кез-келген орнында тікбұрыш, көпбұрыш немесе шеңбер формасында активті облыстар салуға болады және әрқайсысына URL-ді анықтау керек. Активті облыстар қиылысуы мүмкін, бірақ бұл жағдайда мәселелер туындайды. Оқушы дұрыс сілтемені таңдап отырғанына сенімді болу үшін облыстар арасына біраз орын қалдыру қажет;
Активті облыстың шекаралары тікбұрыш, көпбұрыш немесе шеңбердің центрі мен радиусының координаттар бұрышымен беріледі. Бұл параметрлер картаға (Map-файл) жазылып отырады.
Активті бейнені құрып болғаннан кейін, сіз алынған файлды NCSA немесе CERN форматында сақтай аласыз. Егер ол серверде немесе CSIM форматында жұмыс істесе және егер ол клиенттік машинада функционирленсе. Ал қалған барлық жұмысты MapEdit программасы орындайды. Ол картаны серверде құрады немесе картаны клиент жақтағы сіз көрсеткен HTML файлында кірістіреді. Егер сіз активті бейнені клиентте жасайтын болсаңыз, онда MapEdit тегтері үшін ғана берілгендерді қояды. USEMAP атрибутымен бірге бейне тегін өзіңіз беруіңізге тура келеді және оны тегінен кейін бірақ аласыз. USEMAP атрибутында карта атының алдынан # символын қоюды ұмытпаңыз:
Сервердегі активті бейнелер.
Бұрын қолданыста болған активті бейненің құрылуында (html 2.0 үшін) IMG тегіндегі ISMAP атрибутының қолданылуы талап етіледі. IMG тегі бейнеге қатысты, оны бастапқы және соңғы тегі арасына файл – картаның сілтемелеріне орналастыру қажет. Сізге HTML – файлына мынадай жолдарды енгізу керек:
ISMAP атрибуты браузерге берілгендер бейнесі активті екенін көрсетеді. Егер оның қандай да бір облысында тышқан шертпесі пайда болса, онда ISMAP атрибуты көмегімен серверге координат шертпесін құрайтын хабарлама жіберіледі.
Клиенттегі активті бейнелер.
Алдыңғы бөлімде жазылған бейнелерге қарағанда, клиенттегі активті бейнелер сервердің программалық жабдықтарына тәуелсіз жұмыс істейді және сіз өз файлдарыңызда басқа серверге ауыстырсаңыз да функционирленуін тоқтатпайды. Бұндай бейнелерге 2 нәрсе қажет: HTML 3.0 қолдайтын браузер және HTML файлында жазылған карта туралы ақпарат.
Сіздің серверде де, клиент – машинасында да жұмыс істейтін бейнемен жұмыс істегіңіз келетін шығар.
Серверде де, клиентте де активті бейнелер құрғаннан кейін оларды бір HTML файлында біріктіру қиын емес. Ол үшін HTML документіне сервердегі активті бейне үшін жасауға арналған сол жазуды апару қажет. IMG тегіне USEMAP= атрибутын қосуды ұмытпаңыз. USEMAP= атрибуты ISMAP тегіне қарағанда жоғары приоритетті болып табылады. Егер браузер клиентте жұмыс істейтін активті бейнені қолдаса, онда бұл атрибутты ол мойындайды. Бұндай бейнелерді білмейтін браузер USEMAP= атрибутына әсет етеді. Өзін тексеруге арналған сұрақтар:
1. XML және HTML. XML Синтаксисі. XML-дің HTML-ден айырмашылығы. DTD.
2. XML- құжатының визуалды тәсілдері. Ұсынылатын әдебиеттер:
2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин – СПб: BHV, 2000 – 672 стр. 4–Дәріс. HTML-да кестенің жазылу тәсілдері. Дәріс мазмұны:
Кестенің жазылуы үшін
Кесте жолының ішінде әдетте берілгендер ұяшығы орналасады. Мәтін немесе бейне құрайтын әрбір ұяшық
Кестенің баған және жолының тақырыпшасын беру кезінде
Кестедегі ұяшықтың бір жолына сыймайтын кез-келген мәтін келесі жолға көшеді. Бірақта, NOWRAP атрибутын
WIDTH= атрибуты екі жағдайда қолданылады.Оны барлық кестенің енін беруде
UNIT=атрибуты.
UNIT=EN - үнсіздік бойынша қосылатын мән және en - бос орынға тең өлшем бірлікті береді. Еn - бос орын - әріпінің еніне тең типографты өлшем бірлік. Бос орынның нақты өлшемі таңдалған шрифтке тәуелді: ұсақ шрифтке қарағанда ірі шрифтке en - бос орын көбірек беріледі. Әдетте en- бос орын шрифт өлшемінің жартысына тең. Мысалы, 12 - пунктті шрифт үшін en - бос орын 4 - пунктті алады.
UNIT=RELTIVE барлық кесте еніндегі баға енін процентпен беру үшін қолданылады. Бұл тәсілді мүмкіндігінше проценттегі енді көрсетудің орнына қолдануға болады. Қолданылатын бірлікті беру кезінде енгізілген сандар проценттердегі бағандар ені болып қабылданады.
UNIT= PIXELS – бұл мән экрандағы бағанның енін нақты білуде қолданылады. Бұл жағдайда оны пиксельмен беру оңай. Мысалы,
UNIT=атрибутымен бірге қолданылатын COLSPEC=атрибуты кестенің әрбір бағаны қанша орын алатынын және онда берілгендер қалай тегістелетінін анықтайды. Тек
COLSPEC= барлық бағанды санайды және әрқайсысы үшін тегістеу мен өлшем береді. Баған үшін (немесе ұяшық үшін) тегістеудің 5 тәсілі бар: L – сол жақ жиек бойынша, C – центр бойынша, R – оң жақ жиек бойынша, J – оң және сол жақ жиек бойынша және D – ондық үтір бойынша тегістеу. Егер сізде 5 баған болса, онда оның енімен әрқайсысын тегістеуді келесідей анықтауыңызға болады.
DP=атрибуты (Decimal Point, ондық белгі) ондық бөлгіштің толық бөлімін бөлуде қолданылатын символды анықтайды. DP= “.”(үнсіздік бойынша) ондық символ ретінде нүктені көрсетеді. DP= “,” үтірді береді.
Егер ұяшық берілгендерді қамтымаса, онда оған шекарада қажет етілмейді. Егер сіз ұяшықтың берілгендері болмай, шекарасы болғанын қаласаңыз сіз оған көрсетілім кезінде көрінбейтін бір нәрсе қоюыңыз қажет.
СELLPADDING=атрибуты - ұяшық берілгендерімен оның шекарасы арасындағы бос кеңістіктің енін анықтайды, яғни ұяшық ішінен алаң береді.
ALIGN=BLEEDLEFT – ұяшықтың берілгендерін сол жаққа тығыздап қысады.
ALIGN= LEFT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен сол жаққа тегістейді.
ALIGN=CENTER – ұяшықтың берілгендерін центр бойынша орналастырады.
ALIGN=RIGHT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен оң жаққа тегістейді.
VALIGN= атрибуты – мәтін және графиканы ұяшық ішінен вертикаль бойынша тегістейді. Вертикаль тегістеу келесі тәсілдермен берілуі мүмкін:
VALIGN=TOP – ұяшықтың берілгендерін оның жоғарғы шекарасында тегістейді.
VALIGN=MIDDLE – ұяшықтың берілгендерін вертикаль бойынша орталықтандырады.
VALIGN=BOTTOM - ұяшықтың берілгендерін оның төменгі шекарасында тегістейді. BORDER=атрибуты.
CELLSPACING= атрибуты – ұяшықтар арасындағы аралық енді пиксельмен анықтайды. Егер бұл атрибут берілмесе, онда үнсіздік бойынша 2 пиксельге тең көлем беріледі. CELLSPACING= атрибутын мәтін мен графиканы өзіңізге қажетті жерге орналастыру үшін қолданылады. Егер сіз бос орын қалдырғыңыз келсе, онда ұяшыққа бос орынды жазуға болады.
1. Статикалық және динамикалық құжаттарды өңдеудегі ерекшеліктер.
2. Белгі тілдердің жалпы принциптері. Ұсынылатын әдебиеттер:
1. HTML и CSS на примерах/Мержевич – СПб: BHV, 2005-448 стр.
2. HTML и CSS. Совместное использование/ДеБольт – СПб: НТ-Пресс, 2006-504 стр. 5–Дәріс. Беттің дизайнында кестелерді қолдану Дәріс мазмұны:
Кестелердің жақсы бір қасиеті – ол құрып отырған кестенің шекараларын көрінбейтін етіп жасауға болады. Ол <ТАВLЕ> тегінің көмегімен бетте текст пен графиканы кірістіре отырып әдемі орналастыруға болады.Осы күнге дейін <ТАВLЕ> тегі HTML-де өңдеудің жалғыз қуатты құралы болып отыр. Web-беттердің дизайнерлері қазір практикалық түрде баспа беттерін құрушылар сияқты <бос кеңістікті > қолдануда. Кең көлемді кестелер басқаларға қарағанда текстердің Web –беттерде иерархиялық орналасудан алшақтатады.
Егер браузер кестені қабылдаса, онда кестенің көмегімен алынған эффектілерді дұрыс көрсететін болады. Түрлі-түсті кестелер құру.
Жетекші браузерлер бірнеше түстерді бейнелейді. Кестені бояудың бірнеше әдістері бар. Ол әдетте қолданылатын браузерге байланысты.
Сіз кестені жақтаумен әсемдеп қана қаймай, оған фон мен текстің түсінен әлдеқайда жақсы түс беруіңізге болады. Қарапайым GIF (немесе өзіңіз фон ретінде қойғыңыз келген кез-келген GIF,) құрыңыз және оны <ВODY> –тегінде фон ретінде анықтаңыз.Сосын бет фонының түсін беріңіз. Нәтижесінде сіздің <ВODY> –тегіңіз мына түрде болады:
Сіз екі қабаттан тұратын фон құрдыңыз- GIF және берілген түс. Нәтижесінде фондық түс кестенің барлық шекараларында және көлденең (<НR>)жолақтарда көрінетін болады. Сіздің фондық GIF –іңіз сұр түсті болуына тәуелсіз,кестенің түрлі-түсті сызықтары мен шекаралары ерекшеленіп тұрады. Егер фондық GIF күрделі емес болып құрылса,бетті жүктеу уақыты кішкене өседі.Төмендегі мысалда –дегі түстер әсіресе кестелерде кең көлемде қолдануға мүмкіндік беретінін көрсетеді.
1. Форма мен мазмұнның ортогональдық принципі
2. HTML –дің ерекшеліктері
3. XML –дің ерекшеліктері
1. HTML және CSS мысалдары/Мержевич – СПб: BHV, 2005-448 б.
2. HTML және CSS. Бірігіп қолдану/ДеБольт – СПб: НТ-Пресс, 2006-504 б. 6–Дәріс. Фреймдер Дәріс мазмұны:
Фрейм дегеніміз – сурет айналасындағы жақтау, терезе немесе бет деген сөздермен мағыналас. -деген тегті енгізеді, НТМL-беттің дизайнері экран браузерін бөліктерге бөледі. Нәтижесінде бетті қарап отырған адам оның бөліктерін басқа бөліктеріне тәуелсіз қарай береді. Фреймдерді қабылдайтын браузер әр түрлі беттерді түрлі секцияларға , фреймдарға жүктеп тастайды. Мысалы,сіз бетті өзіңіздің фирмалық белгіңізді экранның жоғарғы бөлігіне орналастырып, қалған бөліктерін қолданушы өзі ары қарай қарапайым тәсілмен ашып отыратындай етіп құруыңызға болады. Жанынан навигациялық батырмалар қоюға болады. Оның көмегімен оқырман осы батырманы тышқанмен шерткенде орын ауыстырылмай, эканның белгілі бір бөлігі ғана қозғалады.
Навигация құралдарының немесе фирмалық белгінің фиксациясы – фреймдерді қолданудың көрнекі тәсілі болғаны оларды толық қолдану деген сөз емес. Фреймдерді қолдануда дизайнерлердің ойына ең бірінші саналып өткен шешімдер келеді. Бірақ браузер экранына фрейм қойылған сайын сіз берілгендерді орналастыруға арналған территорияны қысқартып отырасыз. Сіз фреймдерді неғұрлым көбірек кіргізсеңіз, пайдалы кеңістік соғұрлым азаяды және сіз осы әрекетіңізбен фреймдері бар Web-беттердегі навигациялармен таныс емес өз оқырмандарыңызды шатастырасыз.
Мысалы,фреймде ең қажетті беттердің алғашқы бірнеше деңгейлерінде компанияның логотипін сақтап, ал негізгі берілгендерді фреймдерсіз көрсеткен дұрыс. Фреймдер қалай жұмыс істейді?
Фреймдер күрделі болғанымен оларды түсіну оңай, егер кесте ұяшықтарына аналогия жүргізсе.Фреймдердің экранда орналасуы ұяшықтардың кестеде орналасуы сияқты: тегтер мен атрибуттар кестедегі сияқты жұмыс атқарады. Бірақ, беттегі бірлік фреймдер мен кесте ұяшықтары арасындағы аналогияның маңыздылығымен қоса оның айырмашылығын ажырата білген жөн.Ұяшық берілгендері кестесі бар HTML-бетінің кодында берілген. Кестенің берілгендерін құрайтын мәтін немесе графика, HTML-бетіндегі кестені бейнелейтін тег немесе атрибут сияқты енгізіледі. Керісінше, фреймдері бар экран HTML-бетте (frameset ) деп аталатын сөзбен бейнеленеді. Фреймдердегі берілгендер кез - келген жерде – басқа каталогта, локальді серверде немесе желінің жойылған түйіндерінің бірінде орналасқан бөлек HTML-бет. Фреймдік құрылым фреймі бар экранды ұйымдастыру тәсілін және әрбір фреймнің бастапқы берілгендері қайда орналасқанын ғана анықтайды.Барлық фреймдер үшін олардың берілгендерінің орнын бейнелейтін URL болады. Ереже бойынша фреймдік құрылымы бар бетте олардың берілгендері болмайды.Мұндай бет үлкен емес – ол экранны ңтек кадрлық құрылымын ғана анықтайды.Құжат фреймдерге жүктелген уақытта сіз осы құжаттағы сілтемеге тышқанмен шертіп, басқа кадрлардағы фреймдік құрылымда жасалған бір - бірімен байланысқан құжаттарды шақыруыңызға болады.
фреймі бар НТМL беттерді құру және негізгі тегтер мен атрибуттардың қажеттілігін жақсылап түсіну үшін фреймдері бар қарапайым жолдар жұбын құрайық.
Екі фреймнен тұратын бет құрайық.Сол жақтан басылымдар мазмұнының тақырыбын бейнелейтін, ал оң жақтан басылымдардың өздерін бейнелейтін фрейм құрайық. Қолданушы мазмұн орналасқан экран бөлігіндегі сілемені тышқанмен шерткенде, сол басылым оң жақта пайда болатындай етіп жасайық. Бұл фреймдерді қолдануда кеңінен таралған әдіс. Фреймдік құрылым жасау.
Алдымен біз фреймдердің қайда орналасуын және олардың қандай мөлшерде болатын беттің жалпы түрін ойластыруымыз қажет.Содан кейін олардың мазмұны жайлы қарастырамыз.Төменде
Енді берілгендері бар фрейм жасайық.Сол жақ фреймге оң жақ фреймдегі екі беттің арасында ауысып тышқанмен шертетін menu.html бетін құрайық. menu.html файлы бұл – мазмұн ретінде құрылған қарапайым НТМL-бет. Негізінде біз мазмұны бар дайын бетті алып оны қолдана беруімізге болады. Бұл фреймнің жіңішке жіне биік екенін ұмытпаңыз, сондықтан оған жүктелетін бет соған сәйкес жобалануы қажет. Енді сілтемені тышқанмен шерткенде басқа беттердің қайда пайда болатынын анықтауымыз қажет. Біз олардың оң жақта пайда болуын қалағандықтан сілтеме тегіне ТАRGET= (TARGЕТ="main") атрибутын енгізейік. Бұл қолданушы сілтемені басқан кезде шақырылып отырған бет main фреймінде пайда болады дегенді білдіреді. Біз main фрейміндегі барлық беттерді бейнелегендіктен, мазмұндағы барлық сілтемелердің тегіне ТАRGЕТ="main" атрибутын қосамыз, сонда сол жақтағы фреймде қай жерде тышқанмен шертсек, сол жерде бет пайда болады, ал ол бізге керек емес, бірақ басқа жағдайда олай жасаған керек те болып қалады. Мысалы, сіз жай ғана келесі сілтемелерді шығарып беретін < Мазмұнның басқа пункттері > сілтемесін қосуыңызға болады. Оқырмандар сілтемелердің көптігін байқау үшін мазмұнды ұзынырақ етіп жасаған дұрыс.
Оң жақтағы main фреймінде HTML-беттер болады. Сіз кішірек болып көрінетіндей терезеде жобалағаныңыз дұрыс, себебі экранның белгілі бір бөлігінде мазмұнның сол жақ кадрлары орналасады. Но больше эти страницы ничем не примечательны.
