Web-құжат туралы түсінік

Жоспар
Кіріспе

1. Web.құжат туралы түсінік
2. Web.құжат құру редакторлары
3. HTML тілінің тэгтері мен атрибуттары
4. Web.құжат құрылымы
5. HTML тілінің мәтінді пішімдеу тэгтері
6. HTML тілінде тізімдерден пайдалану

Интернеттің WWW (World Wide Web) жүйесінің негізгі қызметі қажетті ақпаратты іздеу, жинау және экранға шығаруды ұйымдастыру. Оның экранда көрсететін мәліметтері Web-беттер түрінде дайындалып сақталған, электрондық құжаттар. Электрондық құжаттың кәдімгі құжаттан айырмашылығы, оның жазылу форматында. WWW қызметіндегі барлық гипермәтінді құжаттардың жалпы бір қасиеті, олардың барлығы HTML тілінде жазылған. HTML (HyperText Markup Language) –гипермәтінді белгілеу тілі мәтіндерді Web-құжат (HTML-құжат) түрінде бейнелеуге арналған нұсқаулар жиынын анықтайды. Сонымен қатар Web-құжатқа суреттерді, кестелерді түрлі түспен бейнелеу мүмкіндігін береді. Web-құжаттар Интернеттің WWW қызметімен бірге дами отырып, оның соңғы технологияларымен үнемі толықтырылып отырылады.
HTML тілінде жазылған гипермәтіндік құжаттар браузер терезесінде ықшам түрде көрсетілгенімен, HTML тілі мәтіндерді пішімдеп көрсету тіліне жатпайды. Ол гипермәтіндердің атқаратын қызметін анықтап, оларды тұтынушыға бейнелеп жеткізетін тіл болып есептеледі. Web-құжаттар тұтынушы мониторының мүмкіндіктеріне қарап, браузермен әртүрлі бейнеленуі мүмкін.
Web-құжат файлдары .html немесе .htm кеңеймесі бар мәтіндік файлдар. Оларды құруда қарапайым мәтіндік редакторлардан пайдалануға болады. Мысалы: MS Windows ортасында Notepad (Блокнот) редакторы.

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

1. Web-құжат туралы түсінік

Интернеттің WWW (World Wide Web) жүйесінің негізгі қызметі қажетті
ақпаратты іздеу, жинау және экранға шығаруды ұйымдастыру. Оның экранда
көрсететін мәліметтері Web-беттер түрінде дайындалып сақталған, электрондық
құжаттар. Электрондық құжаттың кәдімгі құжаттан айырмашылығы, оның жазылу
форматында. WWW қызметіндегі барлық гипермәтінді құжаттардың жалпы бір
қасиеті, олардың барлығы HTML тілінде жазылған. HTML (HyperText Markup
Language) –гипермәтінді белгілеу тілі мәтіндерді Web-құжат (HTML-құжат)
түрінде бейнелеуге арналған нұсқаулар жиынын анықтайды. Сонымен қатар Web-
құжатқа суреттерді, кестелерді түрлі түспен бейнелеу мүмкіндігін береді.
Web-құжаттар Интернеттің WWW қызметімен бірге дами отырып, оның соңғы
технологияларымен үнемі толықтырылып отырылады.
HTML тілінде жазылған гипермәтіндік құжаттар браузер терезесінде ықшам
түрде көрсетілгенімен, HTML тілі мәтіндерді пішімдеп көрсету тіліне
жатпайды. Ол гипермәтіндердің атқаратын қызметін анықтап, оларды тұтынушыға
бейнелеп жеткізетін тіл болып есептеледі. Web-құжаттар тұтынушы мониторының
мүмкіндіктеріне қарап, браузермен әртүрлі бейнеленуі мүмкін.
Web-құжат файлдары .html немесе .htm кеңеймесі бар мәтіндік файлдар.
Оларды құруда қарапайым мәтіндік редакторлардан пайдалануға болады. Мысалы:
MS Windows ортасында Notepad (Блокнот) редакторы.

Web-құжат құру редакторлары

Бірақта Web-құжаттарды арнайы HTML-редакторларда құру ыңғайлы. HTML-
редакторлар екі топқа бөлінеді:
• ASCII-редакторлар (ASCII-editors, Source editors);
• WYSIWYG-редакторлар (WYSIWYG-editors).

ASCII-редакторлар қарапайым мәтіндік редакторлар. Тек олар HTML-
құжаттарды құруға арналған қосымша мүмкіндіктерге ие. Оларға Webber,
Macromedia HomeSite, DarekWare HTML Author, WebEdit редакторлары жатады.
WYSIWYG-редакторлар HTML-құжаттарды дайындалу барысында терезеде көру,
құжатқа алдын-ала дайындалған шаблондарды қосу мүмкіндігін береді.
Редакторлар қосымша терезе – браузерлермен жабдықталған. Оларға Microsoft
FrontPage, Netscape Navigator Gold редакторлары жатады.
Web–браузерлер HTML тілінде Internet желісіне арнап жазылған Web-
сайттар мен Web-құжаттарды парақтап көру, оқу мүмкіндігін береді.
Web–браузерлер ішінде ең көп таралғандары Internet Explorer (Microsoft),
Opera (Opera Software ASA) және Mozilla FireFox (Mozilla Corporation).

HTML тілінің тэгтері мен атрибуттары

HTML тілінің мәтіндерді белгілеу нұсқаулары тэг (tag) деп аталады. Тэг
символдар тізбегінен тұрады. Барлық тэг (кіші) символынан басталып,
(үлкен) символымен аяқталады. Осы символдар ішіне қызметші сөз – тэг
орналасады. Әрбір тэг өзіне тән бір арнаулы қызмет атқарады. Оларды жазуда
бас әріпті де, кіші әріптерді де қатар қолдануға болады, әріптер бірдей
қабылданады. Браузер мәтінді монитор терезеында көрсеткенде тэгтер
бейнеленбейді, тек олардың құжат мәтініне тигізетін әсері ғана білініп
тұрады.
HTML тілінің әрбір тэгі әдетте құжаттың белгілі бір бөлігіне ғана әсер
етеді. Осыған орай екі тэг қатар қолданылады: бірі – тэгті ашады, екіншісі
– жабады. Ашатын тэг белгілі бір нұсқауды бастайды, ал жабатын тэг – оны
аяқтайды. Жабу тэгінің алдына (қиғаш сызық) символы жазылуы тиіс. Кейбір
тэгтер мағынасына орай жабылмауы да мүмкін.
Тэгтердің мәтінге тигізетін әсерлерін түрлендіруде олардың
атрибуттарынан пайдаланады. Әдетте атрибуттар ашылу тэгтерінде кездесіп,
қосымша қызметші сөздерден тұрады. Көбінесе атрибуттар " (қос тырнақша)
символдары ішіне жазылған мәнімен беріледі. Атрибут мәні оның қызметші
сөзінен = (теңдік) символы арқылы бөлініп жазылады.
Web-құжатта түсініктеме жазу үшін !-- comment -- тэгінен
пайдаланамыз. Түсініктемеде жазылған мәтін немесе тэг өңделмейді, яғни
браузер терезесіне шықпайды. Түсініктемені құжаттың кез келген жеріне
жазуға болады.

Web-құжат құрылымы

Web -құжат құрылымы төмендегі негізгі тэгтерден тұрады:
html
head
title тақырып title
head
body
негізгі бөлім
body
html

Web-құжат html тэгімен басталып, сәйкес html тэгімен аяқталады.
Осы екеуінің арасына құжаттың тақырыбы және негізгі бөлімі орналасады.
Құжаттың тақырыптық бөлімі head және head тэгтерінің ортасына
орналасады ды, жалпы құжат жайлы мәлімет береді. Бұл бөлім браузер
терезесінде бейнеленбейді. Әдетте бұл бөлімде title және title
тэгтерімен шектелетін құжаттың ресми тақырыбы жазылады. Браузерлер бұл
атауды браузердің терезе тақырыбында жазылатын файл аты есебінде
пайдаланады.
Құжаттың негізгі бөлімі body және body тэгтерінің ортасында
жазылады. Негізгі бөлімде құжат мәтіні, кестелер, суреттер, сілтемелер
сәйкес тэгтермен өрнектеліп жазылады.
Жоғарыда көрсетілген html, head, body тэгтері HTML тілінде
бекітілгенімен, оларды жазбаса да болады, бірақта алдын-ала тұтынушының
қандай браузер пайдаланатыны белгісіз. Сондықтан Web-құжат құрылымы олардың
толық болуын талап етеді. Әйтпесе кейбір браузерлер Web-құжатты терезеде
дұрыс бейнелемеуі мүмкін.
Негізгі бөлімде қолданылатын body тэгінің атрибуттарын қарастырайық:
text="түс" – мәтін түсін анықтау;
bgcolor="түс" – фон түсін анықтау;
link="түс" – қаралмаған сілтеме түсі;
vlink="түс" – қаралған сілтеме түсі;
alink="түс" – тұтынушы таңдаған уақыттағы сілтеме түсі;
background="URL-адрес" – фондық сурет адресі.

Мысалы: body background="filesgraf01.gif" text="#0000FF". Мұнда
фондық обой ретінде graf01.gif файлы алынған.

HTML тілінің мәтінді пішімдеу тэгтері

Егер бірнеше қатарлы мәтінді құжаттың ішінде теріп, оны браузермен
қарасақ, мәтін бір түрлі пішімді шрифтте жазылып, қатарды тасымалдау
амалдары орындалмайды. Мәтін браузер терезесіне сиғанша жазылып, кез-келген
жерінен келесі қатарға тасымалданады, яғни мәтін пішімдеуді талап етеді.
hn тэгі мәтін тақырыптарын деңгейге бөледі. Барлығы болып шрифт
өлшемімен бөлектенетін алты деңгей бар, яғни . Бірінші деңгей ең үлкен
өлшемді шрифттермен беріледі. Олардың көмегінде тақырыптар мағынасы бойынша
реттеледі. Тақырып hn тэгімен жабылады. Тэгтің align атрибуты тақырыпты
left-сол жақ шетке, right-оң жақ шетке және center-ортаға туралайды.
Мысалы:
h1 align="center" тақырып 1h1
p тэгі жаңа абзацты ұйымдастырады. Мәтінді келесі қатарға көшіріп,
абзацты алдыңғы мәтін қатарларынан бөліп тұрады. Абзацты p тэгі жабады.
Тэгтің align атрибуты абзацты left-сол жақ шетке, right-оң жақ шетке,
center-ортаға және justify-екі жақ шетке туралайды.
Мысалы: p align="justify" мәтін p.

div тэгі мәтінді логикалық түрде бөлектеу мүмкіндігін береді. Браузер
бұл бөлікті логикалық объект деп түсінеді. Ол объектпен динамикалық іс-
әрекеттер орындай алады. Мәтінді div тэгі жабады. Тэгтің align атрибуты
мәтінді left-сол жақ шетке, right-оң жақ шетке, center-ортаға және justify-
екі жақ шетке туралайды.
Мысалы: div align="left" мәтін div.

тэгі қатарды тасымалдау амалын орындайды. Бұл тэг жабылу тэгісіз
жазылады. Мысалы: p мәтін 1
мәтін 2
мәтін 3 p.
font тэгі мәтін шрифтінің типін, өлшемін және түсін өзгертеді. Тэг
font тэгімен жабылады. Тэг жабылғасын шрифт basefont тэгіндегі
мәндерді қайтадан алады.
Мысалы: font face="Arial" color=="#ff0000" мәтін font .
Мәтін шрифті Arial типінде қызыл түспен жазылады.
font face="Verdana" color=="#0000ff" мәтін font.
Мәтін шрифті Verdana типінде көк түспен жазылады.

HTML тілінде тізімдерден пайдалану

Web-құжатта ақпаратты ықшам түрде бейнелеуде тізімдерден пайдаланады.
Тізімдер екі түрге бөлінеді:
нөмірленген;
маркерленген.
ul тэгі маркерленген тізім құрады. Тэг ішінде бірнеше li тэгтері
қолданылуы тиісті. Тэг ul тэгімен жабылады.
ol тэгі нөмірленген тізім құрады. Тэг ішінде бірнеше li тэгтері
қолданылуы тиісті. Тэг ol тэгімен жабылады.
li тэгі тізім қатарын құрады. Тэг ul және ol тэгтері ішінде
қолданылады. Тэгтің value атрибуты тек қана ol тэгінде қолданылады.
Атрибут қатар нөмірінің басталу ретін көрсетеді. Тэг li тэгімен
жабылады.
Мысалы:
p Гамлет трагедиясын кім жазған:
ol type="a" li value="3" Шекспир li
li Монтень li
li Гомер li
li Рабле li
li Софокл li ol p

Браузер терезесінде төмендегі нөмірленген тізім көрінеді:
c. Шекспир
d. Монтень
e. Гомер
f. Рабле
g. Софокл

Web-құжатқа сілтеме енгізу

HTML тілі Web-құжатқа суреттерді, кестелерді енгізу мүмкіндігін береді.
Сонымен қатар желідегі басқа Web-құжаттармен байланысуда гиперсілтемелерден
пайдаланады.
a тэгі гиперсілтемелерді құруда және пайдалануда қолданылады. Тэг
a тэгімен жабылады.
Егер байланыс түрі мен URL-адрес көрсетілмесе бастапқы адрес ретінде
ағымдағы бума алынады. Бұл салыстырмалы сілтеме жасауға мүмкіндік береді:
Мысалы:
a href=filestext10.html Информатика a.
Бұл жерде ағымдағы буманың files ішкі бумасындағы text10.html файлына
сілтеме жасалған.
Мысалы: a href="#bottom" соңына a
тэгін құжат басына, ал
a name="#bottom" соңы a
тэгін құжат соңына жазайық. Браузер терезесінде құжат басында асты сызылған
соңы сөзі басқа түспен шығып тұрады және ол құжаттың соңына сілтеме
жасайды.
Мысалы: құжаттың кез-келген жеріне
a name="inform" информатика a
тэгі жазылсын, онда
a href="inform" информатика a
тэгі сол информатика сөзі жазылған бөлімге сілтеме жасайды. Браузер
терезесіндегі басқа түспен бөлектенген информатика сөзін тышқан
көрсеткішімен басу арқалы, сол бөлімге келеміз.
Мысалы: a href=filestext10.html target="_blank" Информатика a
Бұл жерде ағымдағы буманың files ішкі бумасындағы text10.html файлына
сілтеме жасалған. Аталған файл жаңа терезеде бейнеленеді.

Web-құжатқа сурет енгізу

img тэгі Web-құжатқа суретті енгізуде қолданылады. Сурет jpg, gif
немесе png форматтарының бірінде болуы тиіс. Тэг жабылу тэгісіз жазылады.
Тэг төмендегі атрибуттарға ие:
• src – міндетті атрибут. Енгізілетін суреттің URL-адресін анықтайды;
• height – атрибуты суреттің биіктігін пиксельде анықтайды;
• width – атрибуты суреттің енін пиксельде анықтайды;

Мысалы: img border="1" src="filesgraf10.gif" width="700" height="79"
align="left" – браузер терезесінің сол жақ шетіне files бумасындағы
graf10.gif суреті шығады.

Мысалы: img border="1" src="filesgraf10.gif" width="700"
height="79" align=left hspace="10" – браузер терезесінде мәтін files
бумасындағы graf10.gif суретінің оң жағынан 10 пиксель ара қашықтық тастап
жазылады.
Мысалы: a href=filestext00.html img src="filesgraf10.gif"
border="1" width="700" height="79" align=center a – браузер терезесінде
graf10.gif суреті files бумасындағы text00.html құжатына сілтеме жасайды.

Web-құжатқа объекттер енгізу

embed тэгі құжатқа объекттерді (html-емес құжаттар) енгізуде
қолданылады. Бірақта көптеген браузерлер бұл тэгті қолдамайды. Тэг embed
тэгімен жабылады. Тэг src, height, width, hspace, vspace, align, name, alt,
border атрибуттарына ие.
noembed тэгі, егер embed тэгі жұмыс істемесе пайдаланылатын мәтінді
анықтайды. Тэг noembed тэгімен жабылады.
Мысалы: embed src="music.mid" hidden="true" width="700" height="100"
noembed Сіздің браузеріңізде бұл тэг орындалмайды; noembed embed.
applet тэгі құжатқа Java-апплет (Java тілінде құрылған программалар)
енгізуде қолданылады. Тэг applet тэгімен жабылады. Браузерде Java-апплет
құжатта енгізілген сурет сияқты бейнеленіп, орындалады. Тэг src, height,
width, hspace, vspace, align, name, alt, border атрибуттарына ие.
Мысалы:
applet code="JumpingGirl.class" width="30" height="40" align="left"
мәтін applet – браузер терезесінде JumpingGirl.class файлы орындалады.
param тэгі applet тэгінің ішінде Java-программаға мән енгізуде
қолданылады. Тэг жабылу тэгісіз жазылады. Мысалы:
applet code="JumpingGirl.class" width="30" height="40" align="left"
param name="width" value="10"
Java-апплет
applet
object тэгі құжатқа басқа объекттерді (html-емес құжаттар) енгізуде
қолданылады. HTML 4.0 тілінде бұл тег embed және applet тэгтерінің
орнына енгізілген.

Web-құжатқа жүгіруші мәтін енгізу

marquee тэгін құжатқа жүгіруші мәтін қатарын енгізуде пайдаланады.
Тэг marquee тэгімен жабылады. Тэг төмендегі атрибуттарға ие:
• behavior – атрибуты мәтіннің браузер терезесінде көріну режимін
анықтайды. Қабылдайтын мәндері:
• alternate – мәтін терезе шетіне келіп артқа қайтады;
• scrool – мәтін терезеде қайта-қайта айналып жүгіріп отырады
(үндеместен қолданылады);
• slide – мәтін терезенің сол жағына келіп тоқтайды.
• bgcolor – фон түсін анықтайды;
• loop – мәтіннің қайталану санын көрсетеді. Қабылдайтын мәндері:
▪ 0 - 9 – қайталану саны;
▪ infinite – шексіз (үндеместен қолданылады);
• direction – жүгіруші мәтіннің бағытын көрсетеді. Мәндері:
▪ down – жоғарыдан төменге;
▪ left – оңнан солға (үндеместен қолданылады);
▪ right – солдан оңға;
▪ up – төменнен жоғарыға;

Мысалы: marquee direction="right" жүгіруші мәтін қатары marquee

Web-құжатта кестеден пайдалану

Web-құжаттармен жұмыс істеу барысында реттелген ақпаратты жиі
пайдаланамыз. Осындай реттелген, ықшам ақпаратты сақтаудың ең қолайлы
тәсілі кестелер болып табылады. Кестедегі қатар мен баған қиылысқан орынды
ұяшық деп атаймыз. Ұяшықтың ішінде мәтінмен қатар, сурет, шағын кесте де
болуы мүмкін. HTML тілінің кестелермен жұмыс істейтін тэгтерін
қарастырайық.
table тэгі Web-құжатқа кесте құру үшін қажет. Тэг table тэгімен
жабылады. Кестенің ұяшықтары caption, tr, td және th тэгтерімен
құрылады.
caption тэгі кестенің тақырыбын анықтайды. Тақырып тек қана мәтіннен
тұрады. Тэг caption тэгімен жабылады. Тэгтің align атрибутының top мәні
(үндеместен қолданылады) тақырыптың кесте басында, ал bottom мәні соңында
болуын анықтайды.
tr тэгі кестенің ұяшықтар қатарын анықтайды. Тэг tr тэгімен
жабылады. Ұяшықтар td және th тэгтерімен құрылады.
td тэгі кестенің ағымдағы қатарында ұяшық құрады. Тэг td тэгімен
жабылады.

Кесте құруға мысалдар қарастырайық. Қарапайым кесте құрамыз:
table width="50%" border="1"
tr
td 1 td
td 2 td
td 3 td
tr
tr
td 4 td
td 5 td
td 6 td
tr
table
Браузер терезесінде келесі кесте пайда болады:

Web-құжатта қалыптан пайдалану

Web-құжатта тұтынушымен ақпарат алмасу қажет болса, онда қалыптан
пайдаланады. Әдетте қалыптан тұтынушыны тіркеуде, әр-түрлі мәліметтер
жинауда, сұранысты қабылдауда пайдаланады. Қалып тұтынушыға арнайы тек
толтыруға рұқсат етілген өрістерге деректер енгізуді ұсынады. Енгізілген
деректерді Web-сервердегі арнайы программа (скрипт) өңдейді. HTML 4.0
тілінің қалыптармен жұмыс істейтін тэгтерін қарастырайық.
form тэгі қалып құрушы негізгі тэг. Тэг form тэгімен жабылады.
Тэгтің ішінде HTML тілінің көптеген тэгтерінен пайдалануға болады.
select тэгі қалыпта мәзірді анықтайды. Тұтынушы мәзір ішінен
қажеттісін таңдай алады. Тэг form тэгінің ішінде жазылып, select
тэгімен жабылады. Тэг ішінде бірнеше option тэгі жазылуы тиіс.
option тэгі қалыптағы мәзірдің тақырыптарын анықтайды. Тэг select
тэгінің ішінде жазылып, жабылу тэгі болмайды.
input тэгі қалыптың өрісін анықтайды. Өрістің мазмұнын тұтынушы
анықтайды немесе орындауға жібереді. Тэг form тэгінің ішінде жазылып,
жабылу тэгі болмайды. Тэгтің атрибуттары:
Мысалы:
form action="mailto:us-ibr@name" method=post
select name="firstname" multiple
option value="rumbler"rambler.ru
option value="mail"mail.ru
option value="google" selectedgoogle.kz
option value="narod"narod.ru
select
input type="submit" value="ok"
form

Web-құжатта фреймдерден пайдалану

Web-құжатта фреймдерден пайдалану, құжатты рәсімдеу мүмкіндіктерін
арттырады. Фреймдер браузер экранын бірнеше терезеге бөледі. Әр бір
терезеде құжаттың жеке бір парағы бейнеленеді. Осы технология негізінде
браузерге бірнеше Web-құжатты бір уақытта жүктеу мүмкін. HTML 4.0 тілінің
фреймдермен жұмыс істейтін тэгтерін қарастырайық.
frameset тэгі құжаттың фреймдік құрылымын сипаттайды. Тэг фреймдердің
өлшемін, олардың экрандағы орнын анықтайды. Тэг frameset тэгімен
жабылады. Бұл тэг құжатта body тэгінің орнына, яғни құжаттың негізгі
бөлімі ретінде қолданылады. Тэгтің ішінде frame және noframe тэгтері
жазылады.
frame тэгі фреймді және оның қасиеттерін анықтайды. Тэг жабылу
тэгісіз, frameset тэгінің ішінде жазылады.
noframe тэгі, егер браузер фреймді қолдамаса, терезеге шығатын
мәтінді анықтайды. Тэг noframe тэгімен жабылады.
Мысалы:
frameset frameborder="1" framespacing="0" border="1" cols="250,*"
frame src="info1.html" name="page1"
frameset rows="160,*"
frame src="info2.html" name="page2" marginwidth="0"
frame src="info3.html" name="page3" marginwidth ="0"
frameset
noframes фреймдер noframes
frameset

СSS технологиясы

Web-құжаттың құрылымы мен сипаттауын бөлектеуді CSS (Cascade Style
Sheets – каскадты стильдер кестесі) технологиясын қолдана отырып
орындаймыз. CSS технологиясы Web-құжатты сипаттауда қосымша файлдардан,
шаблондар мен стильдерден пайдалануға көмектеседі. Бұл технологияны
NetsCape Navigator мен Internet Explorer браузерлері қолдайды.
CSS технологиясы HTML тілінің кез келген тегіне өзіндік стильді
визуалды (inline style) енгізе алады. Егер енгізілген стиль HTML-дің body
тегіне орналасса, онда бұл стильден басқа абзацтар мұрагерлік қасиетімен
автоматтық түрде пайдалана алады. Егер абзацта font тегі және оның
colour, size атрибуттары айқын сипатталса, онда абзац полиморфизм
қасиетімен сипатталған стильді аладі.
Әдетте ... жалғасы

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