МАЗМҰНЫ
Кіріспе 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-типін анықтайды.
Мысалы: