JavaScript тілінде HTML құжаттары мен динамикалық веб-сайтты құру негіздері

МАЗМҰНЫ Кіріспе 8 1 JavaScript-те WEB – cайт жасаудың теориялық 1.1 Интернет технологияның түсініктері. Сайт құрудың 10 алғышарттары 10 1.2 HTML-да сайт құрудың жаңа динамикалық әдістері 20 2 Динамикалық өңдеу әдістерімен WEB-сайт құру 34 технологиясы 34 2.1 JavaScript-те WEB-сайт құрудың инструментальды жабдықтары 34 2.2 JavaScript-те динамикалық WEB-сайт құрудың программалық жабдықталуы 63 Қорытынды 67 Пайдаланылған әдебиеттер тізімі 68 Кіріспе Қазіргі нарықтық экономика, бәсекеге қабілетті елу елдің қатарына ену Қазіргі таңда ақпаратты пайдалана және жоғары деңгейде талдай білген Мұның барлығы тек электрондық техникалық құралдарды көбейтуге емес, жоғары Интернет желiсiнiң мүмкiндiктерiне, қызметiне толығырақ тоқталар болсақ, Интернет адамға Интернеттiң құрамында миллиондаған компьютерлер, компьютер терминалдары және қарапайым пайдаланушы Web-тің негізгі қызметі-қажетті информацияны іздеу, жинастыру және оны Олар желiде өз Web беттерiн ашу арқылы көптеген басқа Зерттеу жұмысының көкейкестілігі: Web бет ашу үшiн Интернетте программалай HTML тiлiнде кодтау пайдалануға мүмкiндiгiнше қарапайым, жеңiл етiп ұйымдастырылған. Дипломдық жұмыстың тақырыбы: «HTML-құжатын құрудың негіздерін Java Script тілінде Зерттеу жұмысының мақсаты: Интернет технологиясын пайдаланып, оны құратын программалық Зерттеу объектісі: Интернет технологиясы, гиперсілтеме құруға арналған бағдарламалар, сайт Зерттеу жұмысының өзектілігі: Қазіргі кезде қоғамның дамуы адамзатқа қажетті Зерттеу жұмысының құрылымы: Жұмыс кіріспеден, екі 1 JavaScript-те WEB – cайт жасаудың теориялық 1.1 Интернет технологияның түсініктері. Сайт құрудың алғышарттары Әлеуметтік пенде болғандықтан адам әрқашанда өзі сияқтылармен араласу тәсілдерін іздестіреді. Соңғы кездегі Internet желісінің күрт дамып кетуі (қазіргі кезде 18 000 әртүрлі желілерді біріктіріп, күнбе жаңаларымен толықтыруда) қашықтық ұғымы жоққа шығарып, планетамыздың кез келген нүктесін бір - бірімен бейнелі түрде байланыстыруда. Информацияның көзді тартар ертеңі таң қалдырып, өзінің соңы пайдалана алатын қуантады. Бірақ адам жаңалыққа тез үйренеді қазір де Internet жалпыға бірдей информациялық қор тәрізді ертектегі «ханшалардан» күнделікті «күңіңізге» айналып барады. Оның құрамында миллиондаған компьютерлер, компьютер терминалдары және қарапайым пайдаланушы адамдар бар. Кейбір есептеулер бойынша 100 миллиондай компьютермен 1 млрд-қа жуық адам жұмыс істеп жатыр. Internet желісіне күніне 10000 компьютер қосылады екен. Isoc (INTERNET Society Internet қоғамдастығы) президентінің жақында Internet желісін пайдаланушылар саны бір Internet желісін алғашқы дүниеге келтіруге себеп болған 70-жылдар басында Дегенмен Internet тек желі ғана емес, ол - желілердің Оның қарапайым желілік нүктелері өкімет мекемелерінде, университеттерде, коммерциялық фирмаларда, Internet компьютерлер нақты BBS тәрізді жұмыс істейді (шындығында, Internet Internet-ке қосылу дегеніміз - басқа жерлерді түрған 1000-даған компьютерлік Internet информация магистралына өте ұқсас, институт, мектеп терминалы арқылы Internet желісін сипаттау үшін оны телефон жүйесімен салыстыру қалыптасқан. Интернет бір жағынан World Wide Web қызметі жұмысын Internet Explorer броузерін іске қосу үшін Іске қосу ( Программалар ( Internet Explorer (Пуск ( Егер Интернетпен байланыс жоқ болса Бастапқы бетте барлық мәтіндік, графиктік және Web-құжаттарды қарап шығу үшін аспаптар панеліндегі Программамен жұмысты аяқтау, жаңа терезе Құжаттың бөлігін алмасу буферіне көшіру Аспаптар панелін, қалып - күй Таңдамалы (Избранное) менюі жиі қатынап тұратын Интернетте жұмыс істеу үшін: Компьютерлерді бүкіләлемдік желінің бір торабына IP – адресті алу (интернетке қосылған адамның Таңдап алынған интернет қызмет түрінің Өз торабына қосып және жеке адрес Интернетке қосылу екі түрге бөлінеді: Бүгінгі таңда интернет әртүрлі білім World Wide Web – тағы жеке құжатты Web бет Web беттерді көруге арналған программалар Берілген қызметке сәйкес қолданбалы хаттаманың атын Мысалы, WWW қызметі үшін қолданбалы хаттама http:// хаттамның атынан кейін: және // белгілері қойылады. Компьютердің (сервердің) домендік атын көрсету http:// www.enu.kz Мысалы, Хабар агенттігінің домендік аты www.khabar.kz Берілген компьютердегі файлға баратын толық (араларына «/ң символын қою арқылы) http:// www.enu.kz /Files/Myfiles/xyz.zip (интернетте бас әріппен кіші әріп әртүрлі Web – броузерлер Интернеттің құжаттары электрондық түрде бейнеленеді. Құжаттың Броузерлердің негізігі атқаратын қызметі: Құжат сақталған Web серверімен Броузер жұмыс атқаратын компьютердің мүмкіншіліктерін Web беттердің құрамын кіретін мультимедиялық және Web беттерді іздестіру жеделдету мен бұрын ашылған Интернеттің басқа қызмет түрлерімен жұмыс істеуге Интернеттің ақпараттық кеңістігінің өлшемі өте Іздестiру жүйелерінің екі түрлі моделі бар: Іздестіру каталогтары; Іздестіру нұсқағыштары. Іздестіру каталогтарының құрылысы ірі кітапханаларға ұқсас. Іздестіру нұсқағыштарының жұмыс істеу принципі ақпаратты түйінді сөз бойынша Қазіргі таңда әлемде он мыңға жуық іздестіру Web түйін құру және оны Интеретке XIX ғасырдың 90-шыжылдарында компьютерлік техниканың коммуникациялық дамуы Front Page редакторында Web – беттерді Front Page программасын іске қосу үшін Web - бетке мәтіннің атауы Front Page редакторында кесте құрудың төмендегідей Insert Table (кестені қою) пернесі арқылы; Table (Insert (Table (кесте ( қою ( кесте) мәзір Draw Table (кестені салу) құралын қолдану Көрсетілген үш әдісте кестеледі тез Table ( Insert Table мәзір командасы арқылы құрылатын Құрылған мәтіндік Web түйінді ашу; Web түйінiн енгізген бетіне элементтер Тізімнен керекті элементті яғни мәтінді Edit hyperlink сұхбат терезесі Look in өрістеріне Ok батырмасын шерту керек. “My Webs” Web түйінінің екінші Web – Web түйінді сайт түрінде жариялау Web – сайтты жар-у үшін провайдерден Web – сайт орналасатын сервердің URL адресін; Серверге мүмкіндік беретін пайдаланушының аты – жөні мен Сервердегі бума атауын, оның ішіндегі Web Web – сайттарды жариялау технологиялық Web парақты қалай жасауға болады? Web парақтағы мәліметтерді орналасуы қарапайым түрде қарап шығуға оқуға ыңғайлы Экрандағы ақпараттарды тізім немесе кесте керек. Сонда маңызды мәліметтерді оңай Бір суреттен кейін екінші сурет орналаспағаны көлемдерін, ара қашықтықтарын біркелікі етіп, араларында Ақпарат бөліктерге бөлініп берілсе оларды Абзатцтардың да өте ұзын болмағаны дұрыс. Егер Web парақ көлемі үлкен жылдам ауысуға мүмкіндік беретін сілтемелер жасау қажет. Суреттер мен графикалық бейнелерді пайдалану тұтынушыларды қызықтыруы мүмкін. Бірақ суреттерді желі Сайтты даярлау кезеңі Қазіргі кездегі қолданыстағы Web - беттер Web жүйесімен қатынас құру тәсілі Web жүйесін жұмыс істеудің бірнеше тәсілі Қолданылып отырған тәсілге қарамастан Internet Explorer және Navigator іске http://www.home.microsoft.com/int/ru Internet Explorer терезесі мұнан кейін Web парақты тексеріп тестіден өткізу Серверге өз Web - парақтарыңызды орналастыру Web – құжатты тексеруден өткізу кезінде 1. Емле қателерін тексеру. Мәтіннің 2. Навигацияны (ауысуларды) тексеру. Әрбір парақта 3. Сыртқы файлдармен қатынасу, тәсілдерінің 4. Құжаттың жүктелу уақытының шамадан тыс 5. Басқа кісілердің сіздер жасаған Web – құжаттарды командалар арқылы тек Corel Web Desinger, Frontpage, Home Site, Сайтты алға жылжыту кезеңі Сайттағы жылжыту жұмысының көлемі мен Интернетке оның қолданылуы арасында, сайтты жылжытуының Провайдер интернет (Internet Service Provider) Хост компьютер (қожайын деген ұғым) (host) 1. Желідегі басқа компьютер файлдарды сақтайтын орталық компьютер. 2. Желі жүйесімен (мысалы, интернет желісімен 1.2 HTML-да сайт құрудың жаңа динамикалық әдістері Web-құжатта СSS технологиясынан пайдалану Интернетте көп тараған HTML 3.2 гипермәтін құжаттарды «физикалық форматтау» Қазіргі таңда Web-құжат құруда «логикалық форматтау» әдісін қолданған қолайлы. Интернет немесе локалдық жүйеде Web-сайттар ұйымдастыруда Web-құжаттардан пайдаланамыз. Егер Әдетте Web-құжаттарды құрудың бастапқы қадамдары былай орындалады. Тұтынушы NotePad Әрине бұл айтылғандар Web-құжаттарды құруда «классикалық әдіс» болып есептеледі. Web-құжаттың құрылымы мен сипаттауын бөлектеуді CSS (Cascade Style Sheets CSS технологиясы HTML тілінің кез келген тегіне өзіндік стильді Әдетте Web-құжаттардың негізгі бөлімдерінде жалпы стильдерден пайдаланылады. Мысалы: гипермәтіннің Жоғарыдағы мысалда Times New Roman шрифты Serif эффектімен берілген. Енді Web-құжаттарда бірнеше стильді қолдану мәселесін көрейік. Бұл үшін body{ font-family: "Times New Roman", serif; font-size: 12 pt; color: red; font-weight: bold; font-style: italic; } .fon1 { background-image: url("files/fon1.gif"); background-color:"#e0e0e0"; font-family: "Times New Roman", shadow; font-size: 12 pt; color: "#000080"; } h2 { font-family: Helvetica, shadow; font-size: 14 pt; colour: yellow; font-weight: normal; } Көрсетілген мысалда негізгі мәтін 12 пунктті Times New Roman Жоғарыдағы әдісті CSS технологиясын HTML-ге енгізу деп атаймыз. Енді Мысалы: my.css файлының мазмұны: Body { font-family: "Times New Roman", serif; font-size: 12 pt; colour: green; } .fon1 { background-image: url("files/fon1.gif"); background-color:"#e0e0e0"; font-family: "Times New Roman", shadow; font-size: 12 pt; color: "#000080"; } h1 { font-family: Arial, sans-serif; font-size: 18 pt; colour: red; font-weight: bold; font-style: italic; } h2 { font-family: Helvetica, shadow; font-size: 14 pt; colour: yellow; font-weight: normal; } tizim { font-family: "Times New Roman", shadow; font-size: 12 pt; color: "#000080"; } Байқасаңыз тегі CSS-кестесінде көрсетілмейді. Браузер файл атының кеңеймесіне Бұл қатарда документтің стильдер кестесін (rel="stylesheet") файл форматымен (tyre Web-құжатқа стильдер кестесін басқа құжаттан енгізу үшін төмендегі қатарды @import: url-адрес Бұл жерде енгізілетін стильдер кестесімен қатар өзіміз де қалағанша Браузерлер пайдаланылатын стильдер тізбегін олардың орындалу приоритетіне қарай төмендегіше inline-стильдер - құжатқа тегінің атрибуттарымен енген стильдер; енгізілген стильдер - құжатқа тегімен енген стильдер; импортталған стильдер - құжатқа тегінің @import қасиетімен енген байланысқан стильдер - құжатқа тегімен енген стиль. Браузерлер Web-құжаттарды талдау жасағанда мәтінді форматтау стильдерін осы Біз жоғарыда Web-сайттарды ұйымдастыруда Web-құжаттар үшін HTML 4.0 версиясын СSS технологиясының қасиеттері Web-құжаттың құрылымы мен сипаттауын бөлектеуді CSS (Cascade Style Sheets Стильді анықтау құжаттың түрін стиль қасиеттерін енгізу арқалы өзгертетеді. Font-family: [шрифттер тізімі] – Шрифттер немесе олардың типтері үтірмен serif – түртпесі бар шрифттер, мысалы: Times; sans-serif – түртпесі жоқ шрифттер, мысалы: Helvetica; cursive – курсивті шрифттер, мысалы: Zarf-Chencery; fantasy – декоратив шрифттер, мысалы: Western; monospace – моношрифттер, мысалы Courier. Егер шрифт типі бірнеше сөзден тұрса, онда шрифт типін Егер бірнеше шрифт │ белгісімен көрсетілсе, браузер олардың біреуін Font-style: normal │italic│ oblique – шрифт стилдерін көрсетеді. normal – қалыпты; italic – курсив; oblique – қиғаш. Font-size: [абсолют]│[салыстырмалы]│[нақты]│[пайыз] – шрифт өлшемін анықтайды. Қасиеттің мәні ретінде Font-weight: normal│bold│bolder│lighter – шрифттің енін анықтайды. Үндеместен normal – қалыпты; bold – жартылай жуан; bolder – жуан; lighter – жіңішке. Font-variant: normal │small-caps – шрифттің бас қаріпінің өлшемін normal – қалыпты; small-caps – кіші бас қаріп. Font: [font-style]║[font-variant]║[font-weight]║[font-size]║[font-family] – жоғарыда сипатталған қасиеттердің жалпыламасы, яғни шрифт Мысалы: h1 { font-family: Arial; font-size: 30 pt; font-weight: bold; font-style: italic } p { font: bold italic large Times New Roman, serif } word-spacing: normal│[ұзындық] – сөздер арасындағы аралық беріледі. Үндеместен Letter-spacing: normal│[длина] – қаріптер арасындағы аралық анықталады. Үндеместен Text-decoration: underline │overline │line-through │blink │none – Қаріп гарнитурасы underline – астын сызу; overline – төбесін сызу; line-through – үстін сызу; blink – жанып-өшу; none – алдынғы орнатылған мәндерді жою. Text-transform: capitalize│uppercase│lowercase│none – мәтінді бейнелеуде регистрді түрлендіруді анықтайды. Үндеместен capitalize – әрбір сөздің бірінші қаріпі бас қаріпке түрленеді; uppercase – барлық әріптер бас қаріпке түрленеді; lowercase – барлық әріптер кіші қаріпке түрленеді; none – алдынғы орнатылған мәндерді жояды. Text-align: left│right│center│justify – мәтінді терезе шеттеріне теңестіреді. Мұндағы: left – солға; right – оңға; center – ортаға; justify – екі шеттен. Тext-indent: [абсолют бірліктер]│[пайыз] – мәтіннің шегінуін көрсетеді. Әдетте шегіну px – логикалық пиксельдер; pt – логикалық пункттер; em – шрифт өлшемінің бірліктері; cm – сантиметрлер; mm – миллиметрлер. Мысалы: text-indent: -3еm. Vertical-align: baseline │sub │super │top │text-top │middle │bottom │text-botton baseline – элементті негізгі элементтен төменге орналастырады; middle – элементтің орта сызығын «негізгі + жартылай биіктікке» sub – элементті қатар астына теңестіреді (әдетте font-size: smaller super – элементті қатар төбесіне теңестіреді (әдетте font-size: smaller text-top – элементің жоғарғы шетін негізгі элементтің төбесімен теңестіреді; text-bottom – элементтің төменгі шетін негізгі элементтің астымен теңестіреді; top – элементтің төбесін негізгі элементтің ең жоғарғы шетімен bottom – элементтің астын негізгі элементтің ең төменгі шетімен line-height: normal│[сан]│[ұзындық]│[пайыз] – қатар биіктігін көрсетеді. Үндеместен normal color:[түс] – құжат мәтінінің түсін көрсетеді. Үндеместен құжатта анықталған түс аттары бойынша, мысалы: red (қызыл), blue (жасыл); он алтылық сан түрінде, мысалы: #000000 (қара); нөлдері алып тасталған он алтылық сан түрінде, мысалы: #fff RGB моделі бойынша, мәндері 0-ден 255-дейін, мысалы: rgb(255,255,255) (ақ); RGB моделі бойынша пайызбен берілген, мысалы: rgb(100%, 0%, 0%) Егер түс атымен берілсе, онда бразерлерде әр түрлі бейнеленуі background-color: [түс]│transparent – құжаттың фон түсін анықтайды. Фонның түсін background-image: url ([url])│none – фон ретінде суретті файлдан алады. background-repeat: repeat│repeat-x│repeat-y│no-repeat – фондық суретті қайталайды. Үндеместен repeat repeat-x – фондық сурет көлделеңінен қайталанады; repeat-y – фондық сурет тігінен қайталанады; no-repeat-y – фондық сурет бір-ақ рет көрсетіледі, қайталанбайды; гepeat – фондық сурет көнделеңінен де, тігінен де қайталанады. background-attachment: scroll│fixed – фонды мәтінге байланыстырады. Үндеместен scroll scroll – егер мәтін терезеге симаса, онда фон мәтінмен fixed – фон орнында тұрады, ал мәтін оның үстінде background-position: top│center│bottom│left│center│right│[пайыз] [ұзындық] – фондық суреттің басталу координаталарын анықтайды. Фондық суреттің тігінен басталу координаталары төмендегіше беріледі: top – жоғарыдан; center – ортадан; bottom – төменнен. Фондық суреттің көлденеңінен басталуы төмендегіше беріледі: left – солдан; center – ортадан; right – оңнан. Координаталар тігінен бастап, сонан соң көлденеңінен көрсетіледі. Мысалы: Суретті жоғарғы оң жақтағы бұрышқа орналастырайық, онда Координаталар пиксельде – (px), сантиметрде – (cm) background-position:50px 50px немесе background-position: 50%50%. background:[background-color]║[background-image]║[background-repeat]║[background-attachment]║[background-position] – жоғарыда сипатталған қасиеттердің жалпыламасы, яғни фондық сурет Мысалы: body (background-image:ur1(“suret.jpg”); background-repeat: repeat-y; background-attachment: fixes; background-position: 1004 1004 ) p (background: ur1(suret.gif) red 50% repeat fixed). РНР және Арасне локалді серверін орнату Локальды серверлерді пайдаланудың себебі көп – бізге РНР - Ең алдымен Apache және РНР дің архивін шығарып алу Ескерту : Apache тасымалдаушыларының бинарлы кодтары әртүрлі нұсқада таралады. РНР 5-ті http://www.php.het/downloads.php сайтынан табуға болады. Сайтта РНР екі Арасне web-серверін орнату Арасhе Web-серверінің орнатушысын жіберіңіз. Нәтижесінде лицензиялық келісімі бар терезе Бұдан кейін орнату тәслі ұсынылады. Стандартты (Typical) немесе таңдаушы 1 сурет – РНР - ді орнату терезесі Сосын Install түймесін басқан соң сервер файлдарын көшіру жүзеге Теру кезіндегі сәтті инсталляциядан кейн браузер терезесіне http:// localhost/ Енді Apache ні басқаруды үйрену керек. Атап айтсақ серверді Пуск ->Настройка->Панель управления-администрирование-> Службы. Команда орындалғаннан соң төмендегі суретте (2-сурет) көрсетілгендей терезе пайда 2 сурет – Службы терезесі Windows қызметтері жүйенің стартында фондық қосымшаларды шығаруды жүзеге асырады. Енді С: /www/ Apach 2/conf. Бумасында орналасқан Apache –http. Сервер Apache ISO-кодтауына орналастырылған. Яғни сервер бұл кодтауға жазылғанның AddDefaultCharset ISO-8859-1 Оны мынаған өзгерту керек. AddDefaultCharset –WINDOWS –1251 Бұдан кейін бізге кеңейтілген файлдардың орналасқан бумасын құру керек РНР- ді орнату Apache сервері құрылды- енді РНР ді құруғе кірісуге болады. # АddType application/x-httdp-php .php қатарын іздейміз. Ол жерден кометарий ScriptAlias /_php/ “PHP жолы” Action application /x-httpd-php “/_php/php.exe” қатарларын жазамыз. “PHP жолы” жолы біздің жағдайымызда e:/sr/php/. Бұдан кейін келтіру Apache - де виртуалды хосттар бір компьютерде бірнеше немесе ServerAdmin admin@server rname.com Server erName www.servername.com DirectoryIndex index.php3 index.phtml index.php Index.htm Index.html Index.shtml Index.shtm DocumentRoot “e:/gaukhar/public_html/host/virtual” ScriptAlias /cgi-bin/ “e:/usr/public_html/host/virtual/cgi-bin/” ErrorLog e:/gaukhar/php ublic_html/host/virtual/logs/error.log CustomLog e:/ gaukhar /public_html/host/virtual/logs/access.log common PHP скрипттері жұмыс істейтіндігін тексеру үшін алдымен e:/usr/public_html/host/virtual бумасына Енді браузерге, http://127.0.0.1/test.php деп жазамыз, егер экранда төмендегі суретте Барлық бағдарламалау тілдеріндегі сияқты PHP-де де өз синтаксисі бар. 3 сурет – РНР туралы ақпарат беретін терезе 2 Динамикалық өңдеу әдістерімен WEB-сайт құру технологиясы 2.1 JavaScript-те WEB-сайт құрудың инструментальды жабдықтары Интернетте қозғалыс көбінесе URL-адрестің көмегімен Ең алдымен Web бет құрудың ең ыңғайлы құралын таңдап HTML тiлiнiң синтаксисi мен құрылымы Әрбiр тiлдiң өзiндiк құрылымдық логикалық ерекшелiктерi болатыны сияқты HTML HTML дескрипторлары дербес ережелерге бағынумен қатар, жалпы ережелерге де Келесi ереже дескрипторды ашу және жабу компоненттерiн қолдануға арналған. Бұл ашылған дескрипторды белгiлi-бiр жерде жабу керектiгiн бiлдiредi. Бiрақ Жалпы ережеге дескрипторларды төменгi не жоғарғы регистрде жазу Дескрипторларды жазудағы тағы бiр маңызды мәселе бос орындар (пробел) Интернетте электрондық құжат құру үшін HTML атаулы арнайы Web түйін құру үшін One Page Web шаблоны Жоғарыда ескертiп кеткенiмiздей атрибуттар дескрипторлардың әрекетiн анықтайды. Көп жағдайларда Атрибуттар дескриптордың атауынан кейiн меншiктелiп жазылуы керек. Дескрипторда бiрнеше атрибут болса, олар бос мұндағы bgcolor – фон түсi, text – мәтiн түсi. HTML-де дескрипторға атрибуттар тiркелiп, атрибуттарға мәндер меншiктелiп жазылған сөйлем Атрибуттарға мiндеттi түрде мәндер меншiктелуi тиiс. Бұлай болмаған жағдайда DIV мiндеттi түрде жабылуы тиiс дескриптор болғандықтан оны Сол сияқты (шрифт) дескрипторының size (өлшем атрибуты Бұл кезде броузердегi мәтiннiң шрифт өлшемi дескрипторы жабылғанша Сандық мәндердiң келесi бiр типi оналытылық код түрiнде берiледi. HTML-де сiлтеме дескрипторы - арқылы Web-адрестi шығаруға болады: Осы сияқты каталогты және кескiн файлдары дескрипторын қолдануға болады: Өздерiңiз байқағандай барлық аттрибуттардың мәндерiнiң алдына = (теңдiк белгiсi) Арнайы символдардың көмегiмен HTML бетке HTML кодын шығаруға болады. < IMG src= “aspan.gif” > Арнайы символдар мен дескриптордың қолданылу айырмашылығы 4 және 5-суреттерде Cурет 4 - “Кiшi” және “үлкен” символдары арқылы берiлген Сурет 5 - Арнайы символдар көмегiмен HTML кодты HTML HTML қабықшасы. HTML қабықша – беттiң тақырыбы (HEAD) және мұндағы, жолы Беттiң аталуы. және дескриторлары беттiң аталуын анықтайды. Стиль. HTML құжатты басқарудың элементтерi мен стилдерiн тақырыпқа енгiзу Метаинформация. МЕТА дескрипторы құжат авторы, кiлттiк сөздер, арнайы әрекеттер Кез келген құжатты құрғанда оның басқару элементтерi мен стильдерi, Дегенмен әрбiр құжаттың атауы болуы тиiс, сондықтан дескрипторы Құжат денесiнiң құрылымы. HTML құжаттың денесi орналасатын негiзгi бөлiгi Мәтiн. Құжат құрамында кездесетiн мәтiндер. Олар оқылуы жеңiл әрi Графикалық кескiн. Құжатта жылжуға немесе информацияны көрнекi түрде беру Сiлтеме. Web түйiннiң iшiнде оңай жылжуға және желiнiң басқа Мультимедиа және арнайы программалар. Видеороликтер, Java аплеттерiмен, Flash, Shockwave Web каталогтары кітапхананың жүйелік каталогтары Көптеген серверлердегі тізімдерге әрбір түйінді тақырып қысқаша Түсiнiктемелер. Құжатта қолданылып жатқан дескрипторлар мен әрекеттерге берiлетiн түсiнiктеменi Форматтау элементтерi. Мәтiндi форматтау – HTML тiлiнiң ең қарапайым тұрғанда ғана түсiнiктi әрi әсем болып көрiнедi. Мәтiндi форматтауда ..-... Дескрипторлар диапазоны тақырыптар мен тақырып мазмұнына қолданылады; . Каретканы қайтару дескрипторы; ... Абзацты ашу/жабу дескрипторлары; ... Мәтiндi жартылай қалың ету; ... Мәтiндi көлбеу ету; ... Мәтiн астын сызу. Осы аталған дескрипторларды пайдаланып алғашқы HTML құжатты жазайық. 1-мысал. Блокнот қосымшасын iске қосыңыз; Құжат мәтiнiн енгiзiңiз: Негiзгi HTML-бет Мәтiндi форматтау World Wide Web жүйесiнiң негiзгi Құжатты жұмыс үстелiне “Негiзгi HTML-бет.html” атауымен сақтаңыз. Мұндағы құжат Файлды сақтап болған соң, жұмыс үстелiндегi “Негiзгi HTML-бет” файлына Cурет 6 - Негiзгi HTML-бет Е с к е р т у. 3-суреттегi мәтiндегi Абзацтармен жұмыс. Абзац мәтiнiнiң бетте орналасуы дескрипторлардың align атрибутына World Wide Web жүйесiнiң негiзгi Сурет 7- Бет ортасына орналасқан мәтiн Абзацтармен жұмыс iстеудiң тағы бiр ерекшелiгi мәтiн жолдарының интервалын World Wide Web Мәтiн фонының түсi де style атрибуты арқылы берiледi. Мысалы, World Wide Web жүйесiнiң негiзгi қызметi қажеттi электрондық құжаттар Cурет 8 - Жасыл фонда шығарылған мәтiн Шрифттермен жұмыс. Web - бір тықырып бойынша Сондықтан сайттың көлемі үлкен, күрделі құрылымды, иерархиялық (бағынышты Web-беттiң дизайн тиiмдiлiгi оның қаншалықты деңгейде дайындалғанын анықтайды. Дизайн Қазiргi кезде шрифттер өте көп болғандықтан оларды, белгiлi бiр Категория – шрифттердiң негiзгi класы. Оны шрифттiң “ұлты” деп Гарнитура – белгiлi бiр қасиеттерiне байланысты топтастырылған шрифттер класы. Кескiн – әрбiр шрифттiң қайталанбайтын өзiндiк ерекшелiгi. Кесте 1. Негiзгi шрифт категориялары, гарнитуралары Категориялар Гарнитуралар Serif Sans-Serif Monospaced Script Decorative Times, Century Schoolbook, Garamond Hevletica, Arial, Verdana Courier, Courier New Nuptical Script, Boulevard, Signature Whimsy, Arriba!, Bergel Кесте 2. Гарнитуралар және кескiндер Гарнитура Кескiн Times Arial Courier Whimsy Roman (тiк), Italic (көлбеу) Regular (кәдiмгi), Bold Italic (жартылай қалың көлбеу) Regular, Oblique (қиғаш) Regular, Bold (жартылай қалың) HTML-да шрифттермен жұмыс iстеу элементiмен жұмыс iстеуге негiзделген. size (кегль) – мәтiн таңбаларының биiктiгi; color (түс) – шрифт түсi. Шрифт түсi көп жағдайда face (гарнитура) – қажеттi шрифт атауын таңдауға мүмкiндiк бередi. 1-мысалдағы мәтiнге дескрипторын пайдалану: Мәтiндi форматтау World Wide Web жүйесiнiң негiзгi қызметi қажеттi информацияны iздеу, жинау, экранға Ескерту. Times Kaz шрифтi арқылы терiлген мәтiннiң қазақша әрiптерi Сурет 9 - Шрифтi, өлшемi, түсi берiлген HTML құжат Кестелермен жұмыс. Кестелердiң HTML құжаттарға енгiзiлуi кестелiк берiлгендердi экранға .. - кестенiң басы мен аяғын бiлдiретiн негiзгi дескриптор. Кесте 3. дескрипторының негiзгi атрибуттары Атрибут және оның мәнi Сипаттамасы align=“x” border=“x” cellspacing=“x” cellpadding=“x” width= “x%” не width= “x” Ұяшық iшiндегiсiн орналастыруға арналған: кесте қабырғаларының жуандығын анықтайды; кестенiң көршi ұяшықтарының арасындағы ара қашықтықты анықтайды кестенiң ұяшығының қабырғасы мен ондағы информация арасындағы ара қашықтықты кесте енiнiң өлшемiн анықтайды. .. - кесте қатарын ашатын және жабатын дескрипторлар. Кесте .. - кестенiң жеке ұяшығын құратын дескриптор. Дескрипторларды пайдаланып қарапайым кесте құрып көрейiк: Блокнот қосымшасын iске қосыңыз; HTML құжаттың кодын енгiзiңiз: Кесте 1 Кестенiн 1-уяшыгы Кестенiн 2-уяшыгы Кестенiн 3-уяшыгы Кестенiн 4-уяшыгы Файлды “Кесте1.html” атауымен жұмыс үстелiне сақтаңыз. Жұмыс үстелiндегi “Кесте1” файлын iске қосыңыз. 7-суреттегi HTML құжат Сурет 10- Ұяшықтарының iшiндегi мәлiметтерi түрлiше орналасқан кесте Кей жағдайларда кесте ұяшықтарының параметрлерi бiр-бiрiмен сәйкес келе бермейдi, Кесте 4. дескрипторының негiзгi атрибуттары Атрибут және оның мәнi Сипаттамасы width= “x%” не width= “x” align=“x” valign=“x” colspan=”x” rowspan=”x” bgcolor=”x” background=”url” height=”x” Ұяшықтың енiнiң ұзындығын анықтайды. Ұяшық енiнiң ұзындығын пайыздық Ұяшық iшiндегi мәлiметтiң көлденең орналасу түрiн анықтайды: мүмкiн болатын Ұяшық iшiндегi мәлiметтiң тiгiнен орналасу түрiн анықтайды: мүмкiн болатын кесте қатарының х ұяшығын бiрiктiру; кесте бағанының х ұяшығын бiрiктiру; Ұяшықтың фон түсiн анықтайды; ұяшықтың фоны ретiнде сурет алынады; ұяшық биiктiгiн анықтайды. Кесте ұяшығының атрибуттарын қолданып HTML құжат құрайық. Блокнот қосымшасын iске қосыңыз; HTML құжаттың кодын енгiзiңiз: Кесте уяшыктарынын атрибуттарын пайдалану Кестенiн 1-катарынын 1-уяшыгы Кестенiн 1-катарынын 2-уяшыгы Кестенiн 1-катарынын 2-уяшыгы Кестенiн 2-катарынын 1-уяшыгы Кестенiн 2-катарынын 2-уяшыгы Файлды “Кесте2.html” атауымен жұмыс үстелiне сақтаңыз. Жұмыс үстелiндегi “Кесте2” файлын iске қосыңыз. 8-суреттегi HTML құжат көрiнедi HTML-да енi шектелген кестелерден басқа динамикалық кестелер де қолданылады. Сурет 11 - Екiншi қатарындағы 2 және 3 Тiзiмдер. Web беттегi информацияның анық және байланысты болуының маңызды Тiзiмдер сонымен қатар web дизайнда да көп пайдасын тигiзедi. HTML тiзiмдерiн құруда келесi дескрипторлар қолданылады: ..(/UL) – маркерлi тiзiм; ..(/OL) – нөмiрленген тiзiм; - тiзiм элементiнiң дескрипторы; .. - анықтамалар тiзiмiнiң дескрипторы; HTML құжаттың мәтiнiн логикалық байланыста ұйымдастыру үшiн көп жағдайларда Карындаш Кiтап Даптер Нәтижеде броузерде төмендегi тiзiм пайда болады: Карындаш Кiтап Дәптер Нөмiрленген тiзiмдерде реттелген сандық мәндер қолданылады. Мысалы, Пайдаланылган адебиеттер О.Камардинов. Информатика. -Шымкент. 2000, 250 б. Р.Кадiрбаева. MS FrontPage. -Шымкент. 2001, 84 б. М.Хольцшлаг. HTML 4.0. -М.: 2003, 869 с. А.Федорчук. Создание Web-сайтов. -Киев. 2002, 212 с. Я.Нильсен. Web-дизайн. Спб. 2002, 187 с. Сурет 12 - Нөмiрленген тiзiм Кей жағдайларда күрделi тiзiмдердi қолдануға тура келедi. Күрделi тiзiмдер Дипломдық жұмыс мазмұны енгiзiлген күрделi тiзiм құратын HTML код Блокнот қосымшасын iске қосыңыз; HTML құжат кодын енгiзiңiз: МАЗМУН МАЗМУНЫ КIРIСПЕ HTML - ИНТЕРНЕТТЕ ПРОГРАММАЛАУДЫН НЕГIЗГI КУРАЛЫ Интернетте программалау. HTML тiлiне кiрiспе НTML кужаттармен жумыс iстеу негiздерi ГРАФИКАЛЫК WEB-ДИЗАЙН Web беттi тиiмдi безендiру Web бетте анимациялык кескiндердi бейнелеу технологиясы КОРЫТЫНДЫ ПАЙДАЛАНЫЛГАН АДЕБИЕТТЕР HTML құжатты “Мазмун.html” атауымен жұмыс үстелiне сақтаңыз. “Мазмун” файлын iске қосыңыз (10-сурет) Cурет 13 - Мазмұны шығарыл күрделі тiзiм Маркерлi және нөмiрленген тiзiмдердiң екi атрибуты бар: type және Ше»бер-маркер Квадрат-маркер Тiзiмнiн оныншы элементi Тiзiмнiн он бiрiншi элементi т.с.с. Cурет 14- type және value атрибуттары қолданылған тiзiм Фреймдер. Фреймдердi қолдану web-беттер құрудағы ыңғайлы тәсiлдердiң бiрi. Фрейм Фреймдердi құру үшiн келесi дескрипторлар қолданылады: … - негiзгi атрибуттары жолдар мен бағандар санын анықтайды. Кесте 5. дескрипторының негiзгi атрибуттары Атрибут және оның мәнi Сипаттамасы cols=“x” rows=“x” border=“x” тiк фреймдердiң өлшемiн пиксель не пайыздық өлшем бойынша анықтайды; көлденең фреймдердiң өлшемiн пиксель не пайыздық өлшем бойынша анықтайды; фреймнiң қабырғасының өлшемiн анықтау; - жеке фреймге кiрiстiрiлетiн HTML-құжаттың адресiн анықтайды. Кесте 6. дескрипторының негiзгi атрибуттары Атрибут және оның мәнi Сипаттамасы name=“x” scrolling=“x” src=“x” HTML-құжаттар арасында байланыстар орнату үшiн қолданылады; Көлденең және тiк айналдыру белдеушелерiн iске қосады (мәндерi: фреймге орналасатын құжаттың URL адресiн анықтайды Ендi аталған дескрипторларды пайдаланып қарапайым фрейм құратын құжат жазып Негiзгi Құжаттың орындалу нәтижесi 12-суретте келтiрiлген. Суреттен көрiп тұрғанымыздай сол Cурет 15- Фреймдерге бөлiнген браузер Кей жағдайларда құжаттағы мәтiнге қатысты динамикалық фреймдер құруға болады. жолындағы * таңбасы фреймнiң биiктiгiнiң динамикалық екендiгiн бiлдiредi. Жалпы фреймдер веб-беттер құруда үлкен септiгiн тигiзiп ғана қоймай, Web-құжат құрылымы Web-құжатты құрудан алдын, оның қай тілде жазылғанын браузер үшін тэгін орналастырамыз. Бұл қатар құжаттың HTML 4.0 тілінде жазылғанын Web -құжат құрылымы төмендегі негізгі тэгтерден тұрады: тақырып негізгі бөлім Web-құжат тэгімен басталып, сәйкес тэгімен аяқталады. Осы Құжаттың тақырыптық бөлімінде төмендегі тэгтер кездеседі: Құжаттың тақырыптық бөлімі және тэгтерінің ортасына орналасады – тэгі Web-құжаттың ішкі бумалары мен файлдары үшін href – атрибуты құжаттың негізгі URL-адресін анықтайды. URL-адрес толық target – атрибуты сілтемеде көрсетілген құжаттың бейнелену фрейм терезесін Мысалы: – тэгі Web-құжат жайындағы ақпарат беруге арналған. Бұл http-equiv="refresh" – атрибуты браузерге content атрибутында берілген уақыт аралығында name="description/keywords" – атрибуты браузерге content атрибутында құжатты сипаттау немесе Мысалы: . тэгі құжатқа стильдер кестесін (CSS – Cascade Style type – міндетті атрибут. Ол стильдер кестесінің MIME-типін анықтайды. title – атрибуты пайдаланылатын стильдер кестесінің атын анықтайды. Мысалы: стильдер тегі құжатты желідегі басқа Web-құжаттармен байланыстырады. Тэгтің жабылу href – атрибуты байланысу файлының url-адресін анықтайды; rel – атрибуты url-адрестегі файлмен байланысу типін көрсетеді. rel stylesheet – стильдер кестесімен байланысуды көрсетеді. Браузер href атрибутында home – сайттың негізгі Web-құжатын анықтайды; toc, contents – құжаттың негізгі мазмұны сақталатын файлды анықтайды; index – индекстік іздеу серверлеріне кілттік сөздер тізімін glossary – құжаттқа тиісті терминдер тізімі сақталатын файлды анықтайды; copyright – сайттың құжат авторлары жайында деректерді сақтаушы файлын up, parent – иерархиялық ағашта өзінен жоғары тұрған құжатты child – иерархиялық ағашта өзінен төмен тұрған құжатты анықтайды; next – құжаттар тізбегіндегі келесі құжатты көрсетеді; previous – құжаттар тізбегіндегі өзінен алдыңғы құжатты көрсетеді; last, end – құжаттар тізбегіндегі соңғы құжатты көрсетеді; first – құжаттар тізбегіндегі бастапқы құжатты көрсетеді; help – түсініктеме сақталатын файлды анықтайды. type – атрибуты байланысу файлының MIME-типін анықтайды. Мысалы: