WEB-дизайн

Жоспар

WEB.дизайн

Кіріспе

1. тарау. HTML тілінің негіздері
1.1. Қарапайым бет құру
1.2. Гипертекстік сілтеме
1.3. Тізімдерді құрушы тегтер, құжат ішіндегі графика
1.4. Кесте құру, фреймдер, формалар
... ... ... .
2. тарау. Электрондық лабораториялық практикумдерге қойылатын
талаптар және электорнды лабораториялық практикумді жасау.
2.1. Электрондық лабораториялық практикумдерге қойылатын
талаптар.
2.2. Электорнды лабораториялық практикумді жасау.
2.2.1.
2.2.2. Бағдарлманың мәтіні

Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Дипломдық жұмыс
Тегін: Антиплагиат
Көлемі: 38 бет
Таңдаулыға:

WEB-дизайн

Кіріспе

1. тарау. HTML тілінің негіздері
1.1. Қарапайым бет құру
1.2. Гипертекстік сілтеме
1.3. Тізімдерді құрушы тегтер, құжат ішіндегі графика
1.4. Кесте құру, фреймдер, формалар
-------------
2. тарау. Электрондық лабораториялық практикумдерге қойылатын
талаптар және электорнды лабораториялық практикумді жасау.
2.1. Электрондық лабораториялық практикумдерге қойылатын
талаптар.
2.2. Электорнды лабораториялық практикумді жасау.
2.2.1.
2.2.2. Бағдарлманың мәтіні

1. Кіріспе.

Қазіргі уақытта 20-дан астам ауқымды желілер (глобальный сеть) бар.
Солардың ішінен ең танымалысы "ИНТЕРНЕТ" желісі. Интернет - өзара
байланысқан компьютер мен компьютер желілерінің жиынтығы. Ол жер шарын
қамтып жатқан бүкіл әлемдік ақпарат жүйесі болып табылады.
1969 жылы АҚШ-та, осы елдің қорғаныс министрінің тапсырысы бойынша
жасалған.
Бұл желі алғашында оқу орындарын, әскери желілерді біріктірген желі
болып табылады. Ұзамай бұған файлдарды, электрнды почтаны және жөнелту
тізімін беру мүмкіндіктерін беру қосылды. Осылай бір-бірімен жалғасқан
желілерден тұратын интернет дүниеге келді. Ең танымалысы электронды почта E-
mail, WWW мәліметтер базасы. WWW қызметтері құжатар ұшін арнайы
прграммалар баузерлер болып табылады. Олар құжаттарды экранда көрсете
алады. Браузер көмегі арқылы біз WWW құжат көпшілігіне шыға аламыз.
Түлектік жұмыстағы жалпы қарастырылатын мәселелер
Дипломдық жұмыстың мақсаты –
- гипер мәтінді бағдарламалау тілінің негізін әдістемелеі құрал ретінде
ұсыну;
- электронды лабораториялық практикумдерге қойылатын талаптарды анықтау;
- тіл бойынша электронды лабораториялық практикумдер жасау;

Дипломдық жұмыстың міндеттері –

Алынған нәтиже (электрондық лаб. практикум)

2. Қарамайым бет құру жолы

HTML бетін қарапайым тексттік редактор көмегімен құруға болады.
Солардың бірі Windows-тің "Бокнот" текстік редакторы.
Блокнот- өзіне қажет элементерді ашады. Кез келген блокнотағы программа
былай жазылады:
Қарапайым программа. Жазған бет автоматты түрде x.txt деп сақталынады.
Біз файлдың атын 1 (кез келген таңба жазуға болады).html деп сақтаймыз да,
браузерге енгіземіз. Сонан соң біз жасаған web-бетімізді көре аламыз.

2.1 Жарлықтар.

Біздің бірінші HTML файлында тексттің екі жағын да, жақшаның ішінде
HTML ярлыгы енгізіледі. Және де ол HTML тілінде жазылғандығын көрсетеді.
Сондай ақ HTML да көптеген ярлыктар кездеседі.
Жарлықтардың 2 түрі болады: ашылатын және жабылатын. Жабылатын ярлыктың
ашылатын жарлықтан айырмашылығы қисық сызықшада. Сонымен ашылатын
жарлықhtml үшін жабылатын ярлык html болады. Кейбір жарлықтар үшін
жабылатын ярлыктар қажетті түрде болу керек, ал басқа кейбір ярлыктар үшін
жабылатын ярлык қажет емес.
Әдетте HTML беттерінде html жарлықтарынан басқа, тағы да негізгі ярлыктар
бар. Олардың ішінде head (оған қажетті түрде head). Ол HTML бетінде
тақырыпша жазу үшін керек. Осы жерде атын да жазуға болады. Оның аты
title және title жарлықтар арасында жазылу тиіс. Стандартты браузерде
тақырыпша негізгі терезенің басты рамканың жоғарғы жағында көрсетіледі.
Сонда жалпы программа денесі келесідей құрылымды суреттейді:
html
head
title Ең алғашқы программа title
head
Программаның негізгі денесі:
body
программа
body
html
Тақырыпшадан кейін біз тағы да, ярлык қолдандық:
body
Осы ярлыктар арасында негізгі программа жазылады.

2.2Түс.

Түс-бұл көптеген текстік элементердің қасиеті. Параграф үшін "түстің"
қасиетін өзгертіп, біз кез келген текстің фрагментін түспен белгілеп ала
аламыз. Құжаттың фоннын немесебасқа элементтің түсін өзгертуге болады. HTML
құжатының түстер гаммасы body тэгі ішінде көрсетілетін атрибуттармен
анықталады. Төменде осы атрибуттар тізімі көрсетілген:
Bgcolor - құжат фонының түсін анықтайды.
Text - құжат мәтінінің түсін анықтайды.
Link - құжат мәтінінің белгіленген элементінің түсін анықтайды
(гипермәтіндік сілтемелердің).
Vlink - алдында көрілген құжаттың сілтеме түсін анықтайды.
Alink - тышқан курсоры сілтеме үстіне келгендегі немесе оң жақ шетпесі
басылған жағдайдағы сілтеме түсін анықтайды.
Түс қос-қос үш пар символдармен кодталған. Әр пар оналтылық жүйедегі
негізгі үш түстің (қызыл, жасыл, көк) қоюлығы мен мөлдірлігін көрсетеді.
Олар нөльден (00) 255 (ҒҒ) арасындағы дианазонды қамтиды. Мысалы үшін:
Bgcolor=#FFFFFF - фон түсі, үш түсте бірдей, нәтижесі - ақ түсті.
Text=#000000 - мәтін түсі, үш түсте бірдей, нәтижесі -қара түсті.
Link=#FF0000 - гипермәтіндік сілтеме түсі, қызыл түс - ҒҒ (255), жасыл мен
көк - 00(нөль), нәтиже - қызыл түсті.

Тағы да BODY тэгі background="[файл аты]" атрибутын қабылдай алады. Бұл
атрибут бейнелерді фон ретінде орналастырады. Ал бейнелер жоғарыда
айтылғандай GIF немесе JPEG форматында болу керек.

html
head
title Aлғашқы программа title
head
body
font color="#008000" size="5" (Font color-дағы тырнақшаның ішіне түс
атын "GREEN"(жасыл) деп беруге де болады)
pАбай атындағы Қазақ Ұлттық Педогогикалық Университетi p

body

html

3. Гипертекстік сілтеме.

Гиперсілтеме - бұл басқа WEB құжаттарының адресіне байланысты
мәтіннің фрагменті немесе құрамдас объектісі.
Гипертекстік сілте WEB-беттерді қолданушыларға көркемдейді. Барузерге
қарағанда мәтіндік гиперсілтемелер түсі мен асты сызылуымен, ал графикалық
гиперсілтемелер жақтауымен (рамкамен) ерекшеленеді. Гипер сілтемелерді
пайдаланғанда біз құжаттарды байланысты және структуралық жасаймыз. Ол
қоданушыға ақпаратты тез және ыңғайлы алуға мүмкіндік береді.
Сілтемелер басқа құжатта көрсетілуі мүмкін, осы немесе басқа құжаттың
орнын және басқа да функцияларды атқарады. Ол келесі түрде болады: a
herf="сілтеменің адресі" текст a
a href="сілтеменің адресі" сілтемені ашатын ярлык, ал a жабатын.
Мысалы: a href=http:www.rambler.ru Информатика туралы a

1) Құжат ішіндегі қандай да бір нүктеге сілтеме жасау.
Құжат ішіндегі сілтеме келесі түрде болады: a href="#атау" сілтеме
a. Сілтеме жасайтын орын келесі командада болуы тиіс: a name="атау"
текст a. Бұл команда якорь деп аталады. Егер біз сілтемеге мышкамен
бассақ браузер көрсетілген құжаттың бөліміне ауысады, ал браузердің бірінші
жолында якорі бар сөз болады.

2) Басқа құжатқа сілтеме жасау.
Басқа құжатқа сілтеме келесі команда түрінде болады: a href="құжат
адресі" текст a. Құжат адресі абсолютті немесе қатысты болуы мүмкін.
Абсалютты адрес ол құжаттың интернеттегі орналасқан толық адрес. Қатысты
адресті әдетте сол серверде орналасқан құжатқа сілтеме жасағанда
қолданылады.
Ол келесі түрде болып келеді: "..\жол \ құжаттың аты"

3) Басқа құжат ішіндегі қандай да бір нүктеге сілтеме
жасау.
Оған келесі команда орындалады:
a href="Құжат аты # таңба аты" сілтеме a.
Target атрибуты сілтемеге тышқанмен басқанда, ол басқа браузер
терезесінде көрсетілуіне мүмкіндік береді. Ол үшін гиперсілтеме келесі
түрде болады:
a href="Құжаттың аты" Target="_blank"
немесе
a href="Құжаттың аты" Target="_new"

4. Тізімдердің командалары.

HTML -да тізімдерді жазу үшін бүкіл тізімге команда және тізімнің әр
жолына команда қажет. Олар:

4.1 Нөмірлі тізімдер.
Нөмірлі тізімде браузер өзі нөмірлерді қояды. Егер осы тізімнің бір
нөмірін алып тастасақ, онда қалған нөмірлер автоматты түрде өзгереді.
Нөмірлі тізім ol ярлыкпен ашылады да, ol ярлыкпен жабылады. Әр бір
элемент li, li ярлыктармен белгіленеді. Type, start, compact -
команданың атрибуты.
TYPE - атрибуты нөмірдің түрін көрсетеді.
"А" - үлкен латын әріптері;
"а" - кішкентай латын әріптері;
"I" - үлкен рим цифрлар;
"і" - кішкентай рим цифрлары;
"1"- араб цифрлары.
Егер нөмірдің түрі берілмесе тізім араб цифрларымен жазылады.
START - атрибуты тізім қандай саннан басталатынын көрсетеді. Ол бүтін
сан болуы керек.
COMPACT атрибуты тізімге компакті алгоритмді қолдануға мүмкіндік
береді.
Мысалы:
ol type="1" start="5"
li Бекзат li
li Асем li
li Камшат li ol

4.2 Нөмірсіз тізімдер.
Нөмірсіз тізімдерде сандардың орнына маркер қойылады. Ол ul
ярлыгымен ашылады.
TYPE - атрибуты маркердің орнында "дөңгелек" (type= "disc"), "квадрат"
(type="square"), "шеңбер" (type="circle") қойылады.
COMPACT - атрибуты тізімге компактты алгаритмді қолдануға мүмкіндік береді.

Мысалы:
ulli type="disc" карандаш li
li type="square" линейка li
li type="circle" циркуль li ul

4.3 Сипаттау\анықтау тізімдері.
Сипаттау тізімдері DL, ткрминдердің тізімін және олардың анықтамасы
жазылған тізімдерді айтады. Терминдер DT DT, ал анықтамалар,
сипаттамалар DD DD ярлыктарда жазылады. DT ярлыгын ярлыксыз
жабуға болмайды.
Мысалы:
dl dtТұрғанбаева А dt
dd мұғалім dd
dtШағатаева Б dt
dd студент dddl

5. Құжат ішіндегі графика.

WEB-тің жақсы бір мүмкіндіктерінің бірі. Ол графикалық объекті. HTML
құжатқа қосу. Ол img команданың көмегімен жасалынады. Осы команда
беттің түрін жақсартуға мүмтіндік береді.
Суретті текстке енгізу үшін келесі команда қажет: img src="url".
Src="url" суреттің қай жерде орнатылғанын көрсетеді. Сурет gif, jpg
форматта сақталуы тиіс. URL адресі абсалютті және қастысты болады.
ALT="текст" атрибуты текстті жазады. Әдетте ол суреттің сипаттамасы немесе
аты болады.
ALT - параметірінде жазылған текст, ол жәрдем ретінде болады және ол тек
мышканың көрсеткішін суретке апарғанда ғана шығады.
Мысалы:
img src="1. gif" width=150 height=150 alt="Мұнда қызық сурет"
Heidth="сан" атрибуты суреттің биіктігін беру үшін қолданылады. Егер осы
параметрді бермесе суреттің биіктігі арнайы түрде болады. Осы параметр
суретті созуға немесе кішірейтуге мүмкіндік береді.
Width="сан" атрибуты суреттің енін беру үшін қолданылады.
Align="..." атрибуты браузерге суретті және тексті қай жерге орналастыру
керектігін хабарлайды. Егер бұл атрибутты жазбасақ суретсол жағында, ал
текст оң жағында орналасады. Суретті оң немесе сол жағына орналастырғыңыз
келсе left және righ қолданылады. Ал егер суретті ортаға орналастырғыңыз
келсе center -ді пайдаланамыз.
Border="сан" атрибуты авторға суреттің рамкасының енін анықтауға мүмкіндік
береді.
Мысалы:
img src="1.jpg" border="1"
Vspace="сан" атрибуты суреттің төменгі және үстінгі жағындағы бос орынды
анықтау үшін қажет.
Hspace="сан" атрибуты суреттің оң және сол жағындағы бос орынды анықтау
үшін қажет.

6. Кесте құру.

Кесте TABLE тэгімен басталып TABLE тэгімен аяқталады. TABLEтэгі
бірнеше атрибутты қабылдай алады:
ALIGN - құжат шекарасы бойынша кестені орналастырады. Мәндері: left,
center, right(сол, орта және оң жақтар).
WIDTH - кесте ені. Мәні ретінде пиксел түрінде немесе браузер түрінде
экранының еніне шықандағы пайыз түрінде көрсетуге болады.
BORDER - кестенің сыртқы рамкасыныңжәне ұяшықтарының рамкасының қалыңдығын
анықтайды (пикселмен). Егер атрибут көрсетілмесе, онда кесте рамкасыз
көрсетіледі.
CELLSPACING - кесте ұяшықтары арасындағы арақашықтықты пикселмен анықтайды.
CELLPADDING - ұяшық рамкасы мен мәтін арасындағы арақашықтықты пикселмен
анықтайды.
Кестеге CAPTION және CAPTION тэгтері көмегімен кестенің тақырыбын
қоюға болады. Бірақ ол міндетті түрде қойылуы тиіс емес.
CAPTION ALIGN атрибутын қабылдай алады. Оның мәндері ретінде TOP және
BOTTOM (кестенің жоғарғы және төменгі жағында).Кестенің әрбір жолы TR
тэгімен басталады және TR тэгімен аяқталады.
TR тэгі келесі түрдегі атрибуттарды қабылдайды:
ALIGN - жол бойынша кесте ұяшықтарындағы мәтнді түзету. Мәндері: RIGHT,
CENTER, LEFT ( оң, орта және сол жақбойынша орналастыру).
VALIGN - кесте ұяшықтарындағы мәтінді вертикаль бойынша түзету. Мәндері:
TOP, MIDbrE, BOTTOM (жоғарғы, ортанғы және төменгі жақ бойынша
орналастыру).
Кестенің әрбір ұяшығы TD тэгімен басталып, TD тэгімен аяқталады. TD
тэгі келесі түрдегі атрибуттарды қабылдай алады:
NOWRAP - бұл атрибут ұяшық ішіндегі мәтін бір жолда орналастыру керек
екндігін көсетеді.
COLSPAN - горизонталь бойынша ұяшық құлаштауын көрсетеді. Мысалы, COLSPAN=3
дегені, бір ұяшықтың үш бағананы алатынын көрсетеді;
ROWSPAN - вертикаль бойынша ұяшық құлаштауын көрсетеді. Мысалы, ROWSPAN=2
дегені, бір ұяшық үш бағананы алатынын көрсетеді;
ALIGN - ұяшық ішіндегі мәтінді түзету.
Мәндері: RIGHT, CENTER, LEFT ( оң, орта және сол жақ бойынша
орналастыру);
VALIGN - ұяшық ішіндегі мәтінді вертикаль бойынша түзету. Мәндері: TOP,
MIDbrE, BOTTOM (жоғарғы, ортанғы және төменгі жақ бойынша орналастыру);
WIDTH - ұяшық енін пиксельмен көрсетеді;
HEIGHT - ұяшық биіктігін пиксельмен көрсетеді.
Егер кесте ұяшығы бос болса, онда оның шетіндегі рамка салынбайды. Егер
ұяшық бос болып, ал рамка керек болса, онда ұяшыққа (nonbreaking
space - бөлмейтін пробел) символ объектісін негізуге болады. Сонда ұяшық
бос және шетінде рамка болады.

7.Кестелерді беттерді безендіру үшін қолдану
Кестенің жағымды ерекшелігі –оның рамкаларын корінбейтіндей етіп жасауға
болады.Мұның өзі TABLEтэгінің көмегімен мәтіндер мен графиканы әдемілеп
орнатуға мүмкіншілік береді.Осы уақытқа дейін TABLEтэгі HTML-дегі жалғыз
форматтаушы күшті құрал ретіне есептелініп келеді.Егер браузер кестелерді
қолдайтын болса,экран бетіне шығара ала тын болса,онда ол кесте көмегімен
алынатын қызқты эффектерді дұрыс көрсетеді.
HTML
HEADTITLEМысал 7TITLEHEAD
BODYCENTERBR
TABLE CELLPARDDING=10 CELLSPACING=BORDER=16
TRTD ALIGN=CENTER
H1ПЕРФОРАТОРH1
H3Только сегодня!H3
TABLE BORDER WIDTH=100%
TRTD ALIGN=CENTERIПочти бесплатно!ITD
TRTABLE
TDTR
TABLECENTER
BODYHTML

8.Фреймдер
Фрейм дегеніміз не?
“Фрейм ”деген сөздің өзі “рамкаға алынған сурет, терезешік немесе
бет”дегенді білдіреді.Freamтэгін Html дизайнері енгізе отырып,браузер
экранын бірнеше бөліктерге бөледі.Нәтижесінде бетті қарап отырған
адамбеттің бір бөлігінбасқа бөлігінен тәуелсіз қарастыра алады.

Фреймдер қалай жұмыс істейді?
Бір қарағаннан фреймдер өте күрделі болып көрінеді,бірақ оларды кестелерге
ұқсастырсақ оңайырақ болады.Фреймдердің экранда орналасуы кестелердің
ұяшықтарын орналастыру сияқты беріледі.Фреймдер мен кестелердің арасында
ұқсастықтар болғанымен,олардың арасында кейбір айырмашылықтар бар.Ұяшықтар
құрамы кестемен Html-беттің кодымен беріледі.Кесте құрамындағы мәтін немесе
графика кестені баяндайтын Html-бетте атрибуттармен,тэгтермен бірге
енгізіледі.Ал фреймдер бар экран Html-беттеFREAMESTатты тэгпен
баяндалады.Фреймдік құрамы-ол оөзінше бөлек Html-бет болып табылады.
Фреймдік құрылым тек фреймдері бар экранды ұйымдастыру әдісін анықтайды
және фреймнің қайда орналасуын көрсетеді.Барлық фреймдер үшін олардың
мәліметтері қайда орналасқанын баяндайтын URL беріледі.

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

FRAMESETфреймдер компоовкасын баяндайтын мәндерді
білдіреді.Бұл жерде фреймдердің саны,көлемі және орналасуы(көлденең немесе
тігінен)туралы ақпараттарды береді. FRAMESET тэгінің тек екі болмыс
атрибуттары бар:ROWS және COLS. FRAMESET тэгі BODYтэгінің көрсетілуін
қажет етпейді,бірақ ол тэгті фреймдік құрылымның соңында,NOFRAMESжәне
NOFRAMES тэгтерінің арасында қолдану ға болады. FRAMESETжәне
FRAMESETтэгтерінің арасында BODYжәне BODYтэгтерінің арасына
қолданатын тэгтермен атрибуттар болмауы керек.Тек
FRAME,FRAMESETжәне,NOFRAMESтэ гтері қолданылуы мүмкін.Бұл артық
жұмыстан арылтады. ROWS және COLS атрибуттары ұқсас болып келеді.Әр қатар
мен бағана үшін өзінің FRAMEтэгтер жиынтығы болу керек. ROWS атрибуты-
FRAMESETтэгінің қатар бойынша (көлденең)фреймдер саны мен көлемін береді.
FRAMEтэгінің саны көрсетілген қатар санына сәкес болуы керек.Теңдік
белгісіне кейін фрейм көлемін пиксель мен немесе пайызбен беруге
болады.Атрибуттар мәндері арасына тырнақшалармен үтірлерді және арасына
пробел қоюды ұмытпаңыз.
Мысалы:
FRAMESET ROW=’’10%,60%,30%’’
Ал пиксельмен:
FRAMESET ROW=’’20,80,*’’
мұндағы * белгісі 20+80 пикселден қалған экран орнын қамтитығын білдіреді.
Ал егер келесі түрде жазылатын болса:
FRAMESET ROW=’’20,2* ,*’’
мұндағы 2* мәні 20 пиксельден қалған экран бөлігінің астыңғы фрейм
көлемінен екі есе болатындығын көрсетіп тұр.
COLS атрибуты- ROWSатрибуты сияқты,бірақ фреймдерді тігіне шығарады.
FRAMEтэгі-фреймдердің сыртқы көрінісін және жүрісөтұрысын анықтайды.Бұл
тэгтің жабушы тэгі болмайды. FRAMEтэгінің алты атрибуты
бар.Олар:NAME,MARGINWITH,MARGINHEIG HT,SCROLLING,NORESIZE, NORESIZE және
SRC.
NAME атрибуты – сілтемелерді қолданғанда сілтеніп тұрған құжат басқа бір
фреймде көрсетілсін дегенде қолданылады.Мысал ретінде жоғарыда көрсетілген
14мысалды қарсатырыңыз.Ал жалпы түрде ол келесі түрде беріледі:
FRAME SRC=’’my.html’’NAME=’’main’’
MARGIWITH атрибуты-кестелердегі CELLPADDINGатрибутына ұқсас.Ол кадр құрамы
мен оның шекарасы арасындағы көлденең шегіністі көрсетеді.Бұл атрибуттың
қабылдайтын ең кіші мәні 1-ге тең,0 депбелгілеуге болмайды.Ал егер еш нәрсе
көрсетілмесе,онда ол автоматты түрде 6деп қабылданады.
MARGINHEIGHT атрибуты- MARGIWITH атрибутына ұқсас.Тек ғана ол фреймнің
жоғары және төменгі бөліктерін беру үшін қолданылады.
SCROLLING –атрибуты фреймдердегі құжаттарды жылжыту үшін қолданылады.Бұл
атрибуттың мәндері ретінде YES,NO және AUTO алынады. SCROLLING = YES
мәнінде фреймдегі құжат толық көрінсе де,көрінбесе де оның жан-жағында
жылжытқыш батырмалары тұрады. SCROLLING = NO мәнінде керсінше толық
көрінбесе де көрінбеседе жылжытқыштар берілмейді. SCROLLING =AUTOмәнінде
браузер шешімді өзі қабылдайды,яғни фреймге толық сыйса-жылжықыштар жоқ
.Ал,қарсы жағдайларда жылжытқыштар қойылады.
NORESIZE атрибуты – фреймдердегі жылжытқыштарды қозғалтпайтындай ету үшін
қолданылады.
SCR атрибуты- FRAME тэгінде фреймдік құрылым құрағанда қай беттің фреймде
көрсетілуі керек екендігін көрсетеді.Яғни оның маршрутын және атын,егер
басқа католог немесе серверде орналасса,сонда бірдей катологта орналасады.
TARGET атрибутын-оңайырақ түсіндіру үшін жоғарыдағы 14 мысалды қарастырайық
. 14 мысалда екі фреймнен тұратын браузер экраны көрсетілген.Сол жақ
фреймдегі сілтемелерден тұратын тапқырлар тізімін басқанда оң жақ фреймде
сілтенген құжат ашылуы қажет.Сондықтанда біз фреймдік құрылым құрағанда
сол жақ фрейм үшін NAME=’’main’’,ал оң жақ фрейм үшін TARGET=’’main’’
атрибутын қосып жазамыз. TARGET атрибуты оң жақ фреймде сілтенген құжат
көрсету үшін қолданылады.

Формалар
HTML-дың негізгі элементтерінің бірі формалар болып табылады.Олар
авторларға қолданушылармен байланыс жасауға мүмкіндік туғызады.Форма
құрғанда, автор сұрақтарды қояды,ал қолданушы жауап береді.Форманың мазмұны
қолданушыға электрондық почта арқылы беріледі.Форма құру екі сатыдан
тұрады.Бірінші форма құру,ал екінші серверде форманы өңдеудің сценариін
құру.Біз тек ғана жұмыстың бірінші бөлімін қарастырамыз.Форма
formжәнеform ярлыктар арасында жазылады.FORM тэгі үш атрибутты
қабылдай алады.Олардың ішіндегі біреуі міндеті болып келеді.Олар:
ACTION-міндетті атрибут.Форма өңдеушінің қайда орналасқанын көрсетеді.
METHOD-формалардың өңдеушіге қандай әдіспен жіберілетіндігін
көрсетеді.Мәндері: METHOD=POS және METHOD=GET.Егер атрибутмәні
көрсетілмесе,онда ол автоматты түрде METHOD=GET мәнін қабылдайды.
ENCTYPE-формадағы мәліметтерді өңдеушіге жіберу үшін қандай әдіспен
қолданылатыны көрсетіледі.Егер атрибут мәні көрсетілмесе,онда мәні
автоматты түрде ENCTYPE=applicationx-www-from-urle ncoded болады.Формадағы
мәліметтерді өңдеушіге жіберу процесін қосу үшін басқару органы керек.Ал
ондай органды келесі түрде құруға болады:INPUT TYPE=submit
Форма ішінде мұндай қатарды браузер экранлда SUBMIT жазуы бар батырма
ретінде шығарылады.Ал бұл батырма формадағы ақпараттарды өңдеушіге жіберу
үшін қолданылады,ол үшін тек ғана батырмаға басу керек.Батырмадағы жазуды
VALUE атрибуты арқылы өзгертуге болады.Мысалы:
INPUT TYPE=submit VALUE=”Поехали!”
батырмадағы жазуды керекті жағдайда, өңдеуішіе жіберілетін ақпаратпен бірге
NAME=[аты] атрибуты көмегімен жіберуге болады.Мысалы:
INPUT TYPE=submit NAME=button VALUE=”Поехали!”
формада әртүрлі аттармен немесе мәндермен берілген бірнеше SUMMIT типті
батырмалар болуы мүмкін.INPUTтэгінде басқада элементтер түрі бар.
.INPUT-тың әрбір элементі, оның атын анықтайтын NAME=[аты] атрибутын
қосуы керек(сәйкесінше өңдеушіге жіберілетін айнымалы аты).Элемент аты тек
латын әріпімен берілуі керек. .INPUT элементінің көпшілігінде өңдеушіге
сол атпен жіберетін элемент мәнін анықтайтын VALUE=[“мәні”] атрибуты болу
керек .INPUT TYPE=passwordэлементтері үшін VALUE атрибуты міндетті
емес,өйткені айнымалының мәні ретінде қолданушы енгізген мәлімет алынады.

INPUT элементтінің басты элементтері:
TYPE=text-мәтін қатары енгізілетін терезені анықтайды.SIZE=[сан]
(символымен өлшенетін терезе ені)және MAXLENGHT=[сан] (символмен өлшенетін
ең ұзын қатар көлемі)қосымша атрибутарын қабылдай алады.
Мысалы:
INPUT TYPE= text SIZE=20 NAME=user VALUE= ” Иван”
20 символдан тұратын мәтін енгізу үшін арналған тарезені анықтайды.
Бастапқы мәні ретінде ” Иван”қатары алынады,бірақ оның орнына қолданушы өз
қатарын енгізіп,өзгертуіне болады. Өзгертілмеген қатар немесе өзгертілген
түрде (” Иван”) өңдеушіге USER айнымалысы ретінде жіберіледі.
TYPE=password-пороль енгізілетін терезені анықтайды. Жоғарыдағы
келтірілген text типіне ұқсас,тек енгізілген символдарды экранда жұлдызша
(*)ретінде көрсетіледі. Мысалы:
INPUT TYPE= password NAME=pwSIZE=20 MAXLENGTH=10
20 символдық ұзындығы бар пороль енгізуге арналған терезені
анықтайды.Пороль ең көп дегенде 10 символдан тұруы керек.Енгізілген пароль
өңдеушіге “pw” айнымалысы ретінде жіберіледі.
TYPE=radio-радиобатырманы анықтайды. CHECKED(сол радиобатырманың
белгіленіп тұрғанын көрсетеді)қосымша атрибутын қабылдай алады.Бірдей аттас
бірнеше радиобатырмалардың арасында біреуі ғана белгіленуі мүммкін.Мысал:
INPUT TYPE=radio NAME=modem VALUE= “14400”14400 битс
INPUT TYPE=radio NAME=modem VALUE= “28800”28800 битс TYPE=checkbox
–белгі қою болатын квадратты анықтайды. CHECKED қосымша атрибутын қабылдай
алады.Радиобатырмалардың айырмашылығы-мұнда бір белгі емес,бірнеше белгі
қоюға болады.Мысалы:
INPUT TYPE=checkbox NAME=comp VALUE=”PC” Персональные компьютеры
INPUT TYPE=checkbox NAME=comp VALUE=”WS”checkedРабочие станции
INPUT TYPE=checkbox NAME=comp VALUE=”LAN”Серверы локальных сетей
INPUT TYPE=checkbox NAME=comp VALUE=”IS”checkedСерверы интернет
TUPE=hidden-форманы толтырғанда қолданушыға көрінбейтін және өңдеушіге
ешбір өзгеріссіз жіберілетін жасырын мәлімет элементтерін
анықтайды.Мысалы,өңдеуші сіздің форманың қандай версиясымен жұмыс
істегіңізді білсін десеңіз,онда:
INPUT TYPE=hidden NAME=version VALUE=”1.1”
TYPE=reset-батырманы анықтайды және оны басқан кезде форма бастапқы қалыпқа
келеді.Бұл батырманы қолданған кезде мәліметтер өңдеушіге
жіберілмегендіктен,оған NAME атрибуты қажет емес.Мысалы:
INPUT TYPE=reset VALUE=”Очистить поля формы”
INPUT элементінің басқа формада меню құру үшін -SELECTтэгін және
енгізуге арналған терезе -TEXTAREAтэгін қолдануға болады.
N элементтен тұратын SELECTменюі келесі түрде болады:
SELECT NAME=”[аты]”
OPTION VALUE=”[1 мәні]”[текст 1]
OPTION VALUE=”[2 мәні]”[текст 2]
...
OPTION VALUE=”[ n]”[текст n]
SELECT
SELECTмәзірінен басталып SELECTтэгімен аяқталады. SELECTтэгінде
айнымалы атын анықтайтын NAME атрибуты болуы керек.
SELECTатрибуты MULTIPLE атрибутын қабылдай алады.Бұл атрибут менюден
бірнеше элемент таңдап алуға мүмкіндік береді.Көптеген браузерлер SELECT
MULTIPLEмәзірін терезе ретінде көрсетеді.Ол терезеде мәзір элементтері
орналасады.Мәзір биіктігін қатар бойынша SIZE=[сан]атрибуты көмегімен
беруге болады.Ал SELECTмәзірі көп жағдайларда құрама мәзір ретінде
көрсетіледі.
OPTIONтэгі мәзір элементін анықтайдв\ы. Міндетті VALUE атрибуты өңдеушіге
жіберілетін мәнді анықтайды. OPTION тэгі тағыда CHECKED атрибутын
қабылдай алады.Мысалы:
SELECT NAME =”selection”
OPTION VALUE =”option1”chickedВариант1
OPTION VALUE =”option2”chickedВариант2

OPTION VALUE =”option3”chickedВариант3

SELECT
TEXTAREAтэгіне келетін болсақ,оны келесі түрде көрсетуге болады:
TEXTAREA NAME=address ROWS=5 COLS=50
А здесь- ваш адрес...
TEXTAREA
Мұндағы барлық атрибуттар міндетті. NAME атрибуты өңдеушіге терезе
құрамындағы мәлімет қандай атпен жіберілетіндігі анықтайды. ROWS атрибуты
символ бойынша терезе енін анықтайды.Ал COLS атрибуты символ бойынша терезе
енін анықтайды. TEXTAREAжәне TEXTAREAтэгітерінің арасына алынған
мәлімет бастапқы мән ретінде қабылданады.Қолданушының оны өшіруге және
өзгертуіне болады.
Жоғарыда айтылған форма элементеріне жалпы мысал:
HTML
HEADTITLEМысал 8-1TITLEHEAD
BODY BGCOLOR=”silver”
FORM METHOD=post ACTION=”http:www.myserver.comscr iptsmyapp.exe”
PВвод строкиINPUT TYPE=text NAME=”edit1” VALUE=”По умолчанию”
PТекстовое поле TEXTAREA NAME=”edit2”ROWS=3 COLS=25
Текст по умолчаниюTEXTAREA
PПорольINPUT TYPE=password NAME=”pass”
PВыподающий списокSELECT NAME =”combo”SIZE=1
OPTION VALUE=”one”ОдинOPTION
OPTION VALUE=”two”ДваOPTION
OPTION VALUE=”three”ТриOPTION
SELECTPРадиокнопкиP
INPUT TYPE=radio NAME=radiobutton VALUE=”check1”CHECKEDАльтернатива1
PINPUT TYPE=radio NAME=radiobutton VALUE=”check2” Альтернатива2
PINPUT TYPE=radio NAME=radiobutton VALUE=”check3” Альтернатива3
PINPUT TYPE=reset NAME= button1VALUE=”Очистить поля формы”
FORM
BODY
HTML
Форма.
Жалғасы:
HTML
HEADTITLEМысал 8-2TITLE
HEAD
BODY BGCOLOR=”silver”
FORM METHOD=post ACTION=http:www.myserver.comscri ptsmyapp.exe”
P
PINPUT TYPE=checkbox NAME=check1 VALUE=”check1”CHECKED
Альтернатива1
PINPUT TYPE=checkbox NAME=check2 VALUE=”check2”
Альтернатива2
PINPUT TYPE=checkbox NAME=check3 VALUE=”check3”
Альтернатива3
PINPUT TYPE=submit NAME=send VALUE=”Послать”
FORM
BODY
HTML

Терезе
Бір құжатты екінші құжатқа орналастырудың тағы бір әдісі бар.Ол үшін
құжаттағы frameкомандасы арқылы терезе құрылады..Width және height
атрибуттары арқылы терезенің ұзындығын және енән беруге болады.Align
атрибуты арқылы терезенің орналасу орнын береміз.Ол
left,right,middle,top,bottom мәндерін қабылдайды.
Src,frameborder,border,marginheight ,name scrolling атрибутарының анықтамасы
frame командасындағы осы атрибутардың анықтамасына ұқсас.

Жүгіретін жол
Marquee командасы құжатта жүгіретін жолды құру үшін қолданылады.Ол экранда
тіктөртбұрыш ретінде бейнеленеді.Оның ішінде текістк жол қзғалып
тұрады.ТекстMarquee,Marqueeжар лықтардың ішінде
жазылады.Тіктөртбұрыштың биіктігі(height) ,ені(width) және түсі(bgcolor)
атрибуттар арқылы беріледі.Мысал:Marquee width=100% height=100%
bgcolor=#ffccff amount=5 loop=50 scroll delay=5 derection=left
behavior=scrollПоздравляю с празником!marquee
Direction атрибуты жүгіретін жолдың бағытын анықтайды.Оңнан солға
(left),солдан оңға(right),төменен жоғары(up),жоғарыдан
төмен(down)атрибутымен жазылады.Ол айналу ретінде (мәні:scroll),немесе бір
жағынан екінші жағына (мәні:alternate)ретінде болуы мүмкін.Loop атрибуты
жылжитын текст тіктөтрбұрыш ішінде қанша рет өту керектігін білдіреді.
Scrollamount атрибуты арқылы жүгіретін жолдың жылдамдығын береміз.Оның мәні
1 болса, онда жылдамдығы минимум болады.Scrolldelay атрибуты жүгіретін
жолдың уақыттық интервалын береді.

Апплет
Applet командасы программаны орналастыруға қолданылады.Ол программа
құжаттың дизайнын көркемдеуге мүмкіндік береді. Бұл комнда екі жарлықтан
тұрады:applet,applet.
Осы жарлықтар арасындағы param name= value=”xxx”командасы арқылы
параметірлердің мәні беріледі.

WEB-беттегі мультимедиа
Егер сіз WEB-бетіңізде музыка ойнатқыңыз немесе көрсеткіңіз келсе, онда ол
төменде келтірілген BGSOUND
немесе EMBEDтэгтері көмегімен жасуыңызға болады.Мысалы:
BGSOUND SRC=”yoursound.wav”
Бұл сіздің WEB-бетіңіздің фондық музыка ретінде ойнатылады.Ал егер сіз сол
WEB-бетте музыка ойнатқыш батырмаларын көргіңіз келсе,онда сіз EMBEDтэгін
қолдануыңыз керек.Мысал: EMBED scr =”yoursound.wav” width=”47”
height=”15”
Controls=”smallconsole” autostart=”false” loop=”ture” play_loop=”2”
hidden=”true”EMBDED
Мұндағы:
SCR==”yoursound.wav”-музыкалық немесе видио файл аты.
WIDTH=”47”HEIGHT=”15”-басқару пультінің ені мен биіктігі.
CONTROLS=”smallconsole”-басқару пультін кішкентай етіп көрсетеді.
AUTOSTART=”false”-музыканы немесе видионы қайтадан ойнату керек пе, жоқ
па(false-жоқ,true-иә).
Loop=”true”-файл басынан бастап ойнату керек пе, жоқ па(false-жоқ,true-иә).
PLAY_LOOP=”n”-“ иә”болса,онда n рет.
HIDDEN=”true”-басқа пультін көрсету керек пе жоқ па(false-жоқ,true-иә).
Бірақ та осының бәрін тек сілтеме арқылы ғана жасауға болады.
Себебі,сілтемеге сілтеген кезде браузер автоматты түрде ойнату үшін
плагиндерді қосады.Мысалы:A HREF =”VASH VIDIOFAIL.avi” Мой видио
файлA.

Базистік элементтер
•
Құжат типі HTMLHTML (файлдың басы
және соңы)
Құжат аты TITLETITLE (тақырыпта
болуы тиіс)
Тақырып HEADHEAD (құжаттың
сипатамасы)
Дене BODYBODY (беттерді
қамту)

•
Құрамын анықтау
•
Аты H?H? (6деңгейлі
стандартты
анықтау)
Туралаумен H? ALIGN=LEFTCENTERRIGHT
H?
Секция DIVDIV
Туралаумен DIV ALIGN=LEFTRIGHTCENTER
DIV
Цитата BLOCKQUOTEBLOCKQUOTE (әдете
шегініспен
белгілеу)
Бөлініс EMEM (әдетте
көлбеумен
бейнеленеді)
Дополнительное STRONGSTRONG (әдетте майлы
выделение қаріппен
белгіленеді)
Отсылка, цитата CITECITE (қарапайым
көлбеу)
Код CODECODE (для
листингов
кода)
Енгізу үлгісі SAMPSAMP
Клавиатурдан қосу KBDKBD
Ауыстырмалы VARVAR
Определение DFNDFN ()
Автор адресі ADDRESSADDRESS
BIGBIG
Үлкен қаріп
Кішкентай қаріп SMALLSMALL
•
Сыртқы көрініс
•
Майлы BB
Көлденеңнен II
Асты сызылған UU (көбіне
қолданбайды)
Үстінен сызылған STRIKESTRIKE (көбіне
қолданбайды)
Үстінен сызылған SS (көбіне
қолданбайды)
Жоғарғы индекс SUPSUP
Төменгі индекс SUBSUB
Баспа машинкасы TTTT (изображается
как шрифт
фиксированой
ширины)
Пішімдеу PREPRE (мәтін пішімін
барынша
сақтау)
Ені PRE WIDTH=?PRE (символда)
Ортаға жылжыту CENTERCENTER (графикада
мәтін тәрізді
)
Мигающий BLINKBLINK (наиболее
осмеянный
элемент)
Қаріп өлшемі FONT SIZE=?FONT (1ден 7-ге
дейін)
Қаріптің өлшемін FONT SIZE="+-?"FONT
өзгерту
Базалық қаріп BASEFONT SIZE=? (1 ден 7-ге
өлшемі дейін )
Қаріп түсі FONT COLOR="#$$$$$$"FONT
Қаріп таңдау FONT FACE="***"FONT
Көпбағанды мәтін MULTICOL COLS=?MULTICOL
Нүктелер MULTICOL GUTTER=?MULTICOL (по умолчанию
арасындағы бос 10 точек)
орын
Бағандар ені MULTICOL WIDTH=?MULTICOL
Бос блок SPACER
Бос блок типі SPACER TYPE=horizontalvertical
block
Бос блок шамасы SPACER SIZE=?
Бос блок өлшемі SPACER WIDTH=? HEIGHT=?
Туралау SPACER ALIGN=leftrightcenter
•
Сілтеме және графика.
•
Сілтеме A HREF="URL"A
Сілтемені A HREF="URL#***"A (басқа
белгілеу құжатта)
A HREF="#***"A (дәл сол
құжатта)
Басқа терезе A HREF="URL" TARGET="***
_blank_self_parent_top" A
Белгіні A NAME="***"A
анықтау
Отношение A REL="***"A (жиі
қолданбайды)
Кері қатынас A REV="***"A (жиі
қолданбайды)
Графика IMG SRC="URL"
Туралау IMG SRC="URL"
ALIGN=TOPBOTTOMMIDDLELEFT RIGHT
Туралау IMG SRC="URL"
ALIGN=TEXTTOPABSMIDDLE
BASELINEABSBOTTOM
Альтернатива IMG SRC="URL" ALT="***" (выводится
если картинка
не
изображается)
Карта IMG SRC="URL" ISMAP (сондай-ақ
программа
қажет)
Локальды IMG SRC="URL" USEMAP="URL"
карта
Картаны MAP NAME="***"MAP
анықтау
Карта облысы AREA SHAPE="RECT" COORDS=",,,"
HREF="URL"NOHREF
Өлшемдері IMG SRC="URL" WIDTH=? HEIGHT=? (нүктеде)
Окантовка IMG SRC="URL" BORDER=? (нүктеде)
Отступ IMG SRC="URL" HSPACE=? VSPACE=? (нүктеде)
Заменитель в IMG SRC="URL" LOWSRC="URL"
низком
разрешении
Обновить META HTTP-EQUIV="Refresh" CONTENT="?;
URL=URL"
об'екті қосу EMBED SRC="URL" (об'екті бетке
қою)
об'екта EMBED SRC="URL" WIDTH=? HEIGHT=?
көлемі
•
Разделители. Вверх
•
Параграф PP (элементі жабу
маңызды емес)
Туралау P ALIGN=LEFTCENTERRIGHT P
Жаңа жол BR (жек дара
ауыстыру жолы)
Туралауды жою BR CLEAR=LEFTRIGHTALL
Тігінен бөлгіш HR
Туралау HR ALIGN=LEFTRIGHTCENTER
Қалыңдығы HR SIZE=? (нүктеде)
Ені HR WIDTH=? (нүктеде)
Пайыз ені HR WIDTH="%" (процентте)
Тұтас сызық HR NOSHADE (без трехмерных
эффектов)
Бөлу жоқ NOBRNOBR (жолды
ауыстыруғатиым
салынған)
Тасымалдау WBR (разбить строку)
•
Тізімдер
•
Ретсіз ULLIUL (LIәр элемент
алдында)
Ыңғайлы UL COMPACTUL
Метка типі UL TYPE=DISCCIRCLESQUARE (барлық тізім
үшін)
LI TYPE=DISCCIRCLESQUARE (бұл келесісі)
Нөмірленген OLLIOL (LIәр элемент
алдында)
Компактный OL COMPACTOL
Нөмірлеу типі OL TYPE=AaIi1 (барлық тізім
үшін)
LI TYPE=AaIi1 (бұл келесісі)
Алғашқы нөмір OL START=? (барлық тізім
үшін)
LI VALUE=? (бұл келесісі)
Анықтау тізімі DLDTDDDL (DTтермин,
DD= анықтау)
Ыңғайлы DL COMPACTDL
Мәзір MENULIMENU (LIәр элемент
алдында)
Ыңғалы MENU COMPACTMENU
Каталог DIRLIDIR (LI әр
элемент
алдында)
Ыңғайлы DIR COMPACTDIR
•
Фон және түс
•
Фоновая картинка BODY BACKGROUND="URL"
Фон түсі BODY BGCOLOR="#$$$$$$" (реті: қызыл
көк синий)
Мәтін түсі BODY TEXT="#$$$$$$"
Сілтеме түсі BODY LINK="#$$$$$$"
Өтілген сілтеме BODY VLINK="#$$$$$$"
Белсенді сілтеме BODY ALINK="#$$$$$$"
•
Арнайы символдар.
•
Арнайы символ &#?; (9-1код)
<
>
& &
" "
Сауда маркасыТМ ®
Copyright ©
Бөлінбейтін бос
орын
•
Формы. Вверх
•
Форманы FORM ACTION="URL"
анықтау METHOD=GETPOSTFORM
Файлды жіберу FORM
ENCTYPE="multipartform-data"FO RM
Енгізу өрісі INPUT TYPE="TEXTPASSWORDCHECKBOX
RADIOIMAGEHIDDENSUBMIT RESET"
Өріс аты INPUT NAME="***"
Өріс мәні INPUT VALUE="***"
Белгіленген INPUT CHECKED (checkboxes
и radio
boxes)
Өріс өлшемі INPUT SIZE=? (символда)
Максималды INPUT MAXLENGTH=? (символда)
ұзындық
Варианттар SELECTSELECT
тізімі
Тізімдер аты SELECT NAME="***"SELECT
Варианттар SELECT SIZE=?SELECT
саны
Көптік таңдау SELECT MULTIPLE (біреуін
таңдауға
болады)
Опция OPTION (таңдалған
элемент
болуы
мүмкін)
Опция по OPTION SELECTED
умолчанию
Мәтінді TEXTAREA ROWS=? COLS=? TEXTAREA
енгізу,мөлшер
Мәтін аты TEXTAREA NAME="***"TEXTAREA
Жолға болу TEXTAREA WRAP=OFFVIRTUALPHYSICAL
TEXTAREA
•
Тізімдер
•
Определить TABLETABLE
таблицу
Окантовка table border=?TABLE
таблицы
Ұяшық арасын TABLE CELLSPACING=?
созу
Қосымша ұяшық TABLE CELLPADDING=?
Қажетті ені TABLE WIDTH=? (нүктеде)
Проценттегі ені TABLE WIDTH="%" (проценты от
ширины страницы)
Кесте басы TRTR
Туралау TR ALIGN=LEFTRIGHT CENTER
MIDDLEBOTTOM
Кесте ұяшығы TDTD (жолда болу
тиіс)
Туралау TD ALIGN=LEFTRIGHTCENTER
MIDDLEBOTTOM
Ауыстырусыз жол TD NOWRAP
Баған бойынша TD COLSPAN=?
созу
Жол бойынша созуTD ROWSPAN=?
Қажетті ені TD WIDTH=? (нүктеде)
Проценттегі ені TD WIDTH="%" (проценты от
ширины страницы)
Ұяшық түсі TD BGCOLOR="#$$$$$$"
Кесте тақрыбы THTH (как данные, но
жирный шрифт и
центровка)
Туралау TH ALIGN=LEFTRIGHTCENTER
MIDDLEBOTTOM
Ауыстырусыз жол TH NOWRAP
Баған бойынша TH COLSPAN=?
созу
Жол бойынша созуTH ROWSPAN=?
Қажетті ұяшық TH WIDTH=? (нүктеде)
Проценттегі ені TH WIDTH="%" (пайыз ені
кестеде)
Ұяшық түсі ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.