HTML ТІЛІНІҢ НЕГІЗГІ ТӘГТЕРІ
МАЗМҰНЫ
1. HTML ТІЛІНЕ КІРІСПЕ 4
1.1. World Wіde Web және HTML тілі 4
1.2. HTML тілінің атқаратын қызметі 5
1.3. HTML командалары 6
1.3.1. Тәг атрибуттары 6
1.4. HTML-құжатты дайындау 8
2. HTML ТІЛІНІҢ НЕГІЗГІ ТӘГТЕРІ 10
2.1. HTML құжатының құрылымын анықтау тәгтері 10
2.2. HTML тілінің негізгі тәгтері 11
2.3. Құжаттың негізгі бөлігі 13
2.4. Құжаттардағы түстерді анықтау 14
2.5. Мәтіндерді түрлендіру тәгі 15
3. ҚҰЖАТТЫ ФОРМАТТАУ 19
3.1. Қаріптерді форматтау 19
3.1.1. Физикалық стиль 19
3.1.2. Логикалық стильдер 19
3.1.3. Жоғарғы және төменгі индекстер 21
3.2. Гиперсілтеме бойынша ауысу 21
3.3. HTML-құжатқа суреттер енгізу 23
3.4. Құжаттарда сырғымалы жолдарды ұйымдастыру 26
4. ҚҰЖАТ ІШІНЕ ТІЗІМДЕР ОРНАЛАСТЫРУ 30
4.1. Нөмірленбеген тізімдер 30
4.2. OL тәгі арқылы жазылатын нөмірленген тізімдер 30
4.3. DL тәгі арқылы жазылатын анықтау тізімдері 31
4.4. Қабатталған тізімдер 33
5. КЕСТЕЛЕР ТҰРҒЫЗУ 35
6. БІР WEB-ПАРАҚТА ФРЕЙМДЕР АРҚЫЛЫ БІРНЕШЕ ҚҰЖАТТАРДЫ ОРНАЛАСТЫРУ 39
6.1. Фреймдер құру тәсілдері 39
6.2. FRAMESET ... FRAMESET тәгтері 43
6.3. FRAME тәгі 44
6.4. Фреймдер арқылы сілтемелер ұйымдастыру 45
7. HTML ТІЛІНІҢ МУЛЬТИМЕДИЯЛЫҚ МҮМКІНДІКТЕРІ 49
7.1. EMBED тәгін пайдалану 49
7.2. Фондық дыбыс 50
7.3. Бейнекадрды пайдалану 50
8. HTML ҚҰЖАТТАРЫНДАҒЫ ФОРМАЛАР 52
8.1. FORM тәгі 52
8.2. Форма жасау тәгтері 52
8.3. ТEXTAREA тәгі 53
8.4. SELECT тәгі 54
8.5. INPUT тәгі 56
8.6. Енгізу өрісі түрі, TYPE атрибуты 57
8.7. Форма элементтерін стандарттан тыс қолдану 61
9. HTML ТІЛІН ҮЙРЕНУГЕ АРНАЛҒАН ТАПСЫРМАЛАР 65
Пайдаланылған әдебиеттер тізімі 79
1-ҚОСЫМША. HTML ТІЛІНІҢ ТҮСІНІКТЕМЕ СӨЗДІГІ 80
2-ҚОСЫМША. ҚҰЖАТТАРДАҒЫ ТҮСТЕР ЖӘНЕ ӨЛШЕМ БІРЛІКТЕРІ 84
1. HTML ТІЛІНЕ КІРІСПЕ
Интернеттің бар мәліметтерінің, яғни барлық Web-құжаттарының бір ортақ
қасиеті – олардың барлығы да HTML тілінде жазылған. HTML тілінде Web-
құжаттарды жасау программалауға ұқсас болғанмен, ол қарапайым программалау
тілі емес. HTML – гипермәтіндік белгілеу тілі. Ол кәдімгі мәтіндерді Web-
парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.
1.1. World Wіde Web және HTML тілі
Интернеттің қазіргі дамуы 90-жылдар басында компьютерлер арасында мәлімет
алмасудың жаңа хаттамасы (protocol) пайда болғаннан кейін басталды. Бұл
хаттама HTTP (HyperText Transfer Protocol – гипермәтінді тасымалдау
хаттамасы) деп аталған болатын. Осы хаттамамен қатар НТТР серверлерінің
кеңейтілген желілері болып табылатын Интернет арқылы файлдар тасымалдай
алатын World Wіde Web қызмет бабы (WWW немесе тек Web) пайда болды.
Бұл файлдардың басым көпшілігі Web-парақтар түрінде – HTML (HyperText
Markup Language – гипермәтінді белгілеу тілі) тілінде жазылған арнаулы
файлдар түрінде болады. Осы файлдарды НТТР серверлерінде (Web-тораптарында)
орналастыру жолымен Web-парақтар қалың көпшілік пайдаланатындай түрде
Интернетте жарияланады. Web-парақтар мазмұны әр түрлі бола береді және олар
көптеген тақырыптарды қамти алады, бірақ олардың бәрінің де негізгі
жариялану, яғни жазылу тілі HTML болып табылады. Осындай HTML құжаттарының
бәрінің де файл аттарының кеңейтілуі (тіркеуі) *.HTM немесе *.HTML болуы
тиіс.
HTML тілі World Wіde Web қызмет бабымен бірге дами отырып, Web-
парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану
жолдарымен толықтырылып отырылды. Ол World Wіde Web жүйесінің негізі бола
отырып, оның өте кең тарауына себепші болды. World Wіde Web сөзі қазақ
тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML тілінің
мағынасы мен атқаратын қызметін оның атынан анықтауға болады.
Гипермәтін – қосымша элементтерді басқару мақсатында ішіне арнаулы код,
яғни екпінді элемент (anchor) орналасқан мәтін. Ол – мәтін ішіне сурет,
дыбыс енгізу, мәтінді безендіру, пішімдеу (форматтау) ісін орындайтын
немесе осы құжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде
қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз – келесі
көрсетілетін құжат бөлігі қалай бейнеленетінін анықтайтын айрықша кодты осы
сөз ішіне енгізу. Гипермәтін экранда белгіленіп ерекшеленген қарапайым сөз
ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек (ENTER
пернесін бассақ), онда сонымен байланысты (ол сілтеп тұрған) басқа құжат
ашылады. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Интернет
жүйесіндегі басқа компьютерде орналасып, бейнежазба, сурет, жазылған дыбыс
күйінде болуы мүмкін.
Гипермәтінді экранға шығарып бейнелеу үшін броузер (browsers) деп
аталатын арнайы көрсету программалары қолданылады. Броузер арнайы
командалармен – тәгтермен толықтырылған мәтіндік құжатты қабылдап алып,
оның тақырыптарын экранға үлкен әріптермен, ал жай мәтіндерін кішірек
таңбалармен жазады, оның ішіндегі суреттерді де адрестеріне сәйкес басқа
немесе осы компьютерден оқып экранда көрсетеді. Ең кең тараған броузерлерге
Windows операциялық жүйесімен бірге қойылатын Internet Eхplorer және жеке
қолданылатын Netscape Navigator программасы жатады. Осы екеуі (олардың
бұрынғы нұсқаларын қоса есептегенде) бүгінгі қолданылып жүрген
броузерлердің 90 %-ын құрайды.
Сонымен, web-құжат дегеніміз тәгтермен толықтырылған мәтіндік файл болып
табылады, оның мәтіндерін бір-бірімен байланыстыра отырып белгілеуге
мүмкіндік беретін HTML тілі. Оның дұрыс нәтиже алуды қамтамасыз ететін өз
заңдылықтары мен ережелері бар. Web-құжаттың алғашқы нұсқасын Блокнот
сыяқты редакторлардың бірінде дайындап алып, броузер арқылы экранда
көреміз. Егер оны түзету керек болса, броузер арқылы мәтін нұсқасын экранға
шығарып түрлендіру қажет. Web-құжаттарды жасап, оны көрнекті түрге келтіріп
безендіретін мамандарды web-шебер немесе web-дизайнерлер деп атайды. Шағын
көлемді web-құжатты HTML тілінің негізін білетін кез келген студент жасай
алады.
Негізінде гипермәтіндік web-құжаттар жасаудың екі тәсілі бар, олар: HTML
тілін пайдалану және арнаулы HTML-редакторларды қолдану. Соңғы тәсіл
“экранда не көрсең, соны аласың” деген WYSIWYG принципімен диалог режимінде
істейтін Netscape Editor, Hot Dog, Front Page сыяқты программалар арқылы
гипермәтін жасауды жүзеге асырады, олар құжаттың ішкі құрылымына араласпай,
тек меню командалары немесе батырмалар арқылы керекті құжат бейнесін
қалыптастырады. Дегенмен, ең қысқа, әрі жылдам істейтін тәсіл болып HTML
тілі есептеледі және редакторлар арқылы жасалған Web-парақтың ең соңғы
нұсқасына өзгертулер енгізу де HTML тілі арқылы орындалады.
1.2. HTML тілінің атқаратын қызметі
Web-парақтар экранда ықшам түрде безендіріліп көрсетілгенмен, HTML тілі
мәтіндерді пішімдеп (форматтап) көрсететін тілге жатпайды. Өйткені әрбір
тұтынушы әр түрлі компьютерлерді пайдаланады. Сол себепті жаңа ғана
зауыттан шыққан бір компьютердің Wіndows жүйесінде жұмыс істей алатын
броузері бар болса, екінші бір тұтынушы компьютері тек MS DOS жүйесінде
жұмыс істейтін ескі броузерді пайдалануы мүмкін. Бұл екеуінің көрсету
мүмкіндіктері әр түрлі болғандықтан, бір файл екеуіне екі түрлі болып
көрсетіледі.
Құжаттарды әрбір тұтынушының әр түрлі құрылғыларда және әр түрлі броузер
программалармен көретіндіктерін ескерсек, HTML тілін мәтіндерді пішімдеу
(форматтау) тәсілдерін жазуға арналған тіл деп айтуға болмайды. Ол
Интернеттегі мәтін бөліктерінің атқаратын қызметін анықтап, соларды әрбір
тұтынушыға бейімдеп жеткізе алатын құжатты функционалды түрде белгілейтін
тіл болып табылады.
Мысалы, егер мәтін тақырыбын бейнелеу керек болса, онда HTML коды оны
тақырып ретінде көрсетуге тырысады. Тақырыптың белгілеу коды алынған соң,
оны броузер-программа өз мүмкіндігін пайдаланып, оны үлкейтіп ірі
әріптермен жазуы ықтимал немесе тек экран жолдарының ортасына жылжытып қана
көрсетуіне де болады. Ал егер бұл құжат мәтіні дыбыс синтезаторы арқылы
берілетін болса, онда тақырып қаттырақ шығатын дауыс арқылы айтылып, одан
соң аздап үзіліс жасалуы да мүмкін.
HTML тілінде мәтінді форматтау тәсілдерінің көптеген мүмкіндіктері бар,
бірақ жалпы тұрғыдан алғанда құжаттың маәтіні мен оны безендіріп көрсету
жолдарының айырмашылығы сақталып отырады. Мысалы, HTML тілінің соңғы [HTML
4.0] нұсқасында мәтінді форматтау командаларын пайдалану ұсынылмаған.
1.3. HTML командалары
HTML тілінің бастапқы берілген символдық мәтінді белгілейтін командалары
белгі немесе тәг (tag) деп аталады. Тәг символдар тізбегінен тұрады. Кез
келген тәг “кіші” () символынан басталады да, “үлкен“ () символымен
аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар деп те аталады.
Ашылатын бұрыштық жақшадан соң команда аты болып табылатын ағылшын
тіліндегі түйінді сөз – тәг орналасады.
HTML тіліндегі әрбір тәг бір арнаулы қызмет атқарады. Тәгтің ағылшын
тіліндегі аты оның қызметімен сәйкес келеді. Олардың жазылуында әріптер
регистрі ешбір рөл атқармайды, бас әріпті де, кіші әріптерді де қатар
қолдана беруге рұқсат етілген. Бірақ тәг атауларын мәтіннен айыру
мақсатында оларды бас әріппен жазу қалыптасқан.
HTML тілінің бір тәгі әдетте құжаттың белгілі бір бөлігіне, мысалы бір
абзацқа ғана әсер етеді. Осыған орай керекті сөз тіркестерін қоршап тұрған
екі тәг қатар қолданылады: бірі абзацты – ашады, екіншісі – жабады. Ашатын
тәг белгілі бір әсер ету ісін бастайды, ал жабатын тәг – сол әсерді
аяқтайды. Жабу тәгтері қиғаш сызық символымен () басталуы тиіс.
Кейбір тәгтер өз жазылу орнына ғана әсерін тигізеді. Мұндайда жабу тәгі
қажет болмай қалады да, тек жалқы тәг жазылады (мысалы, сызық жүргізу).
Егер қате кетіп, тәг ретінде HTML тілінде қолданылмайтын түйінді сөз
жазылып кетсе, онда оның ешбір әсері болмайды.
Броузер-программа арқылы құжат экранда көрсетілген шақта тәгтердің
өздері бейнеленбей, тек керекті мәтін немесе суреттер көрініп, тәгтердің
сол құжат мәтініне тигізетін әсері ғана білініп тұрады.
1.3.1. Тәг атрибуттары
Көбінесе ашылу тәгтерінің тигізетін әсерлерін айқындайтын немесе
түрлендіретін олардың атрибуттары (сипаттамалары) болады. Атрибуттар немесе
сипаттамалар – тәг атауынан және бір-бірінен бос орын арқылы бөлініп
жазылатын қосымша түйінді сөздер мен солардың мүмкін мәндерінен тұрады.
Көптеген атрибуттар оның мәнін жазуды талап етеді. Атрибут мәні оның
түйінді сөзінен теңдік белгісі (=) арқылы бөлініп жазылады. Атрибут мәні
қостырнақшаға алынып жазылуы тиіс, бірақ кейде қостырнақшаны жазбаса да
болады. Жабылу тәгтерінің ешқашанда атрибуттары болмайды.
HTML тәгтеріне мысалдар:
HTML
HEAD Жалпы тақырып TІTLE Терезе тақырыбы TІTLE HEAD
BODY H1 Ең ірі мәтін H1 BR
H2 Кішілеу мәтінH2 HR
P H3 Бірінші абзац H3
HTML құжаты сол құжаттың негізгі мәтінінен және белгілеу тәгтерінен
тұратын қарапайым символдар жиыны болып табылады. Сондықтан оны
құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы
Блокнотты пайдалана беруге болады. BR тәгі жаңа жолға көшуді
қамтамасыз етеді. Р тәгі жаңа абзац жасайды. HR H3 Екінші
абзац H3
P Абзац үшін жабу тәгі қажет емес. HR тәгі көлденең сызық
сызады. HR
BODY
HTML
HTML тәгтерінің қосарланып жазылуы:
HTML ... HTML
B ... B
HEAD ... HEAD
H3 ... H3
LІ ... LІ
HTML тәгтерінің жалқы жазылуы:
BR ...
HR ...
FRAME ...
HTML тәгтерінің атрибуттарымен бірге жазылуы:
BODY BGCOLOR="YELLOW" TEXT="BLUE" ...
HR COLOR=RED SІZE=16 WІDTH=100% ...
HR A HREF="FІSH.JPG" балық A ...
HR ІMG SRC="DOG.JPG"
P ІMG SRC="FІSH.JPG" WІDTH=500 HEІGІT=250 ...
Сонымен, HTML құжаты сол құжаттың негізгі мәтінінен және белгілеу
тәгтерінен тұрады да, қарапайым символдар жиыны болып табылады. Сондықтан
оны құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы
Блокнотты пайдалана беруге болады.
Тәг атауларын жазу кезінде үлкен әріптер мен кіші әріптер бірдей болып
есептеледі. Ашылу тәгінің жалпы жазылу ережесі, яғни синтаксисі
төмендегідей:
тәг_аты [атрибуттары]
Тік жақшаға алынған тізбекті жазбай кетуге де болады, яғни көптеген
тәгтер атрибутсыз жазыла береді. Ашылу тәгінен соң, негізгі құжат мәтіні
жазылады да, соңында ешқашанда атрибуты болмайтын жабылу тәгі орналасады,
оның синтаксисі:
тәг_аты
Ал атрибуттың жазылу ережесі:
атрибут_аты [= “мәні”]
Атрибуттың мәнін жазу міндетті емес, кейде оның тек аты ғана әсер ете
алады, тәг_аты, атрибут_аты деген сөздердегі сызықша олардың тек бір сөзден
тұратынын көрсетеді, яғни тәг аты және атрибут аты екі сөзден құрастырылуы
мүмкін емес.
Экранға шығарылатын мәтін тізбегі кез келген әріптен, цифрлардан, тыныс
белгілерінен және арнайы таңбалардан да (@, #, $, %) құрастырыла береді.
Бірақ тәгтер жазуда арнайы мағынасы бар мына символдарды: , , &, “ жай
мәтін таңбалары ретінде теру керек болса, онда ерекше символдық тізбектер –
ескейп-тізбектер (&-тізбектер) қолданылады. Созылмайтын босорын таңбасы да
осы тізбек арқылы өрнектеледі, өйткені оны бірнеше рет теру web-құжаттағы
сөздер арасындағы бос аралықты үлкейту тәсілі болып табылады. Ал, әдеттегі
бірнеше босорын таңбасын броузер тек бір ғана босорын таңбасы ретінде ғана
қабылдайды.
Осы ескейп-тізбектер символдары амперсенд (&) таңбасымен басталып,
нүктелі үтір таңбасымен (;) аяқталады.
1 кесте
&-символдар тізбегі Бейнелейтін символы
< символы
> символы
& & символы
" “ (қостырнақша) символы
созылмайтын босорын символы
Ескейп-тізбектерді тек төменгі регистрде (кіші әріптер) теру керек,
оларды " немесе & түрінде жазуға болмайды.
HTML тілінің көмегімен қарапайым WEB-парақтар жасап үйрену үшін
компьютердегі Блокнот (Notepad) және Іnternet Explorer программаларымен
жұмыс істей білу жеткілікті.
1.4. HTML-құжатты дайындау
HTML-құжат – бұл аты аты.htm түріндегі қарапайым мәтіндік құжат. Мынадай
HTML-құжатты Блокнотта теріп шығыңыздар:
html
head Менің алғашқы парағым
tіtle 1-ші мысал tіtle
head
body
H1 Сәлем! H1
Бұл HTML-құжаттың ең қарапайым мысалы.
P Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың
түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер
бар. Мәтін ішіне суреттер, дыбыстық әуендер орналастыруға
да болады.
P
body
html
Енді осы терілген құжатты, мысалы, Айна.htm деген атпен дискіде сақтау
керек. Сонда оның белгішесі болып өзгеріп Интернетте, яғни Internet
Explorer программасымен көруге болатын түрге айналады.
Бұл Айна.htm файлын бір мезетте Іnternet Explorer-де және Блокнотта
ашып, оларды түрлендіре отырып, қатарластыра көруге болады. Ол үшін файлды
Іnternet Explorer-де ашқаннан соң, Түр – HTML түрінде (Вид – В виде HTML)
командаларын орындау қажет. Сонда файлдың алғашқы мәтіні Блокнотта ашылып,
оны түрлендіріп өзгерту мүмкіндігіне ие боламыз. Қажетті өзгертулер енгізіп
оны қайта дискіге жазып сақтап қою қажет. Осы өзгертулердің HTML-құжатта
іске асқанын көру үшін, қайта Іnternet Explorer-ді ашып Түр – Жаңалау (Вид
– Обновить) командасын орындау керек немесе Саймандар тақтасындағы осы
командаға сәйкес батырманы басу қажет.
Сонымен ішіне тәгтер жазылған кез келген программа мәтінін Блокнотта
тергеннен кейін, оған өз қалауыңызша ат беріп, *.htm (* – кез келген ат)
түрінде сақтау керек. Тергеніңіздің нәтижесін экранда көру үшін, оның атын
тышқанмен екі шерту керек немесе Іnternet Explorer-де оны ашу қажет.
Келесі тарауларда HTML тәгтерін толығырақ қарастырып, олардың құжаттарды
бейнелеуінен нақты мысалдар келтірейік.
Бақылау сұрақтары:
1. Web-парақ дегеніміз не және олар қалай жасалады?
2. HTML тілі қандай қызмет атқарады?
3. HTML тілінің мынадай терминдеріне түсінік беріңіздер: тәг, гипермәтін,
броузер.
4. HTML тәгтерінің қандай түрлері бар? Олардың жазылу синтаксисі қандай?
5. Тәг атрибуттары не үшін қолданылады? Олардың жазылу ережелерінен
мысалдар келтіріңіздер.
6. Ескейп-тізбектер қандай мақсатта қолданылады, қалай жазылады?
7. HTML құжаттары қалай дайындалады? Оларды қалай өзгертуге болады?
2. HTML ТІЛІНІҢ НЕГІЗГІ ТӘГТЕРІ
2.1. HTML құжатының құрылымын анықтау тәгтері
HTML құжатының кез келгені HTML тәгінен басталып, соған сәйкес HTML
түріндегі жабылу тәгімен аяқталады. Осы екеуінің ортасында құжаттың
тақырыптық бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады.
Құжаттың тақырыптық бөлігі HEAD және HEAD тәгтерінің ортасында
тұрады да, жалпы құжат туралы мәлімет береді. Әдетте, бұл бөлікте TІTLE
... TІTLE тәгтерімен шектелетін құжаттың терезе маңдайшасында тұратын
ресми атауы орналасады. Көптеген броузерлер оны терезе тақырыбында тұратын
файл аты есебінде пайдаланады.
Осы құжатты принтер арқылы баспадан шығарғанда, броузер оны әр парақтың сол
жақ жоғарғы бұрышына жазып отырады. Атаудың өте ұзын болмағаны дұрыс,
әдетте ол 64 символдан аспауы керек.
Жазылатын мәтін құжаттың негізгі тұлғасы деп аталатын BODY ... BODY
тәгтерінің ортасына жазылады. Бұл қос белгі HTML-құжаттың негізгі мазмұндық
бөлігінің басын және соңын білдіреді.
Жоғарыда келтірілген төрт тәг HTML құжатының кез келгенінде болуы тиіс.
Бірақ HTML, TІTLE тәгтерін жазбай кетсе де болады, дегенмен HTML
тілінің құрылымы олардың толық болуын талап етеді. Өйткені алдын ала
тұтынушының қандай броузер пайдаланатыны, оның қалай жұмыс істейтіні
программа құрушыға белгісіз болады ғой.
Түсініктемелер. Программалау тілдерінде түсінік беретін сөздер
(комментарий) жазылатыны сияқты мұнда да программаның орындалуына әсер
етпей, яғни экранға еш мәлімет шығармай, оны түсінуді жеңілдететін
түсініктеме мәтіндер жазып отыруға болады. Түсініктеме мәтін
CОMMENT...COMMENT тәгтері ортасында орналасады.
HTML тілінің комментарийлерін тәг жазбай-ақ, арнайы символдардан !--
кейін жалғастырып жазуға болады. Түсініктеме мәтін соңына -- символдары
жазылуы тиіс. Түсінік мәтін “үлкен” таңбасынан () өзге кез келген
символдардан құрастырыла береді.
!-- мынау түсініктеме мәтін тізбегі --
Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер
арқылы жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті,
броузерлер HTML-файлдардағы жолдың соңы символын және көптеген бос
орындарды есепке алмайды. Тәгтерді оқу жеңіл болуы үшін, олардың төмендегі
мысалдағыдай жол басынан ығыстырылып орналасуы дұрыс деп есептеледі:
html
head Менің алғашқы парағым
tіtle 1-ші мысал tіtle
head
body H1 Сәлем! H1
P Бұл HTML – құжаттың ең қарапайым мысалы.P
P Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың
түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер
бар. Мәтін ішіне суреттер орналастыруға да болады.
P
body
html
Жоғарыдағы программалық мәтін нәтижесі
Сәлем!
Бұл HTML – құжаттың ең қарапайым мысалы.
Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың түсін де, қаріп
типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне
суреттер орналастыруға да болады.
2.2. HTML тілінің негізгі тәгтері
H1...H1 – Н6 ... Н6
Hі белгісі (мұндағы і – 1-ден 6-ға дейінгі бүтін сан) алты түрлі
сатыдағы символдар мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы
тақырып – ең ірісі, алтыншы сатыдағы – ең кішісі. Бұл тәг көрсетілмесе,
экранға H3 мөлшеріне сәйкес мәтін шығады.
Р ... Р немесе жалғыз Р
Бұндай қос белгі абзацты сипаттайды. Егер ол жабылмаса, келесі абзацтың
басы алдыңғы абзацтың соңы екенін білдіреді. Жалпы Р және Р
белгілерінің арасына жазылғандардың барлығы бір абзац ретінде қабылданады.
Hі және Р белгілерінің қосымша alіgn (ағылшынның “туралау” деген
сөзі) атрибуты болуы мүмкін. Мысалы:
H1 ALІGN=CENTER Тақырыпты ортаға жылжыту H1
немесе
P ALІGN=RІGHTАбзацты оң жақ шетке туралау түрі P
Осыларды төмендегі 2-1 мысалда қарастырайық:
html head tіtle 2-1 мысал tіtle head
body H1 ALІGN=CENTER Сәлем! Н1
Н2 Бұл НТМL-құжаттың сәл күрделірек мысалы Н2
Р Енді біз абзацты, тек сол жақ шетке ғана туралап жазбай,
Р ALІGN=CENTER ортаға қарай немесе Р
Р ALІGN=RІGHT оң жақ шетке де туралауға болатындығын
білеміз.
body
html
Осы программалық мәтін нәтижесі
Сәлем!
Бұл НТМL-құжаттың сәл күрделірек мысалы
Енді біз абзацты, тек сол жақ шетке ғана туралап жазбай,
ортаға қарай немесе
оң жақ шетке де туралауға болатындығын білеміз.
Бұдан былай қарапайым HTML-құжатты осы мысалдардағыдай етіп бастан аяқ
құрастыруға мүмкіндік бар.
Енді біз осы қарапайым HTML-құжатты қалай жақсартуға болатындығын сөз
етеміз. Жаңа жолға көшу белгісінен бастайық.
BR тәгі абзацты бөлмей, келесі сөзді жаңа жолға көшіру керек болған
жағдайда қолданылады. Ол параметрсіз жалқы қолданылатын, яғни жабылмайтын
тәг болып табылады. Мысалы:
...BR Абай Құнанбаев BR Мұхтар Әуезов BR
Сәкен Сейфуллин...
Бұл жолдар экранға мынадай мәліметтер шығарады:
Абай Құнанбаев
Мұхтар Әуезов
Сәкен Сейфуллин
Ал мына жолдар:
Р Мына жолдар екі-үш қатарға
бөлініп жазылғанымен
олар бір-екі жолға бірге жазылады Р
экранға мынадай мәлімет шығарады:
Мына жолдар екі-үш қатарға бөлініп жазылғанымен олар бір-екі жолға
бірге жазылады
Бұл тәг өлең жолдарын жазуға өте қолайлы, осыған төмендегідей 2-2 мысалды
қарастырайық:
2 кесте
HTML тілінде терілуі Оның экрандағы нәтижесі
html head title 2-2 мысал Өлең
title Мұқағали
head Көзің қайда көшеден мені
bodyH1 ALIGN=CENTER Өлең H1 іздеген,
H2 ALIGN=CENTER Мұқағали H2 Сөзің қайда екеуміз егіз деген.
P Көзің қайда көшеден мені Терезеңнің алдына келіп тұрмын,
іздеген, BR Сөзің қайда екеуміз Көгершіндей қысты күн жем
егіз деген. BR Терезеңнің алдына іздеген.
келіп тұрмын, BR Кептердей қысты Абай
күні жем іздеген. BR Айттым сәлем, Қаламқас
Н2 ALIGN=CENTER Абай Н2 Р Саған құрбан мал мен бас.
Айттым сәлем, Қаламқас BR Саған Сағынғаннан сені ойлап,
құрбан мал мен бас.BR СағынғаннанКелер көзге ыстық жас.
сені ойлап, BR Келер көзге ыстық Көзімнің қарасы,
жас.Р Көзімнің қарасы,BR Көңілімнің санасы.
Көңілімнің санасы. BRБітпейді Бітпейді іштегі,
іштегі, BR Ғашықтық жарасы.
Ғашықтық жарасы.
body
html
HR тәгі экран бетінде көлденең сызық жүргізеді. Ол параметрсіз
қолданылса, төмендегідей көлденең жолды толық алып тұрған қара сызық
жүргізеді:
Ал параметр арқылы оның түсін (COLOR=”түс”), ұзындығын (WІDTH=n%
пайызбен, экран еніне байланысты сызықтың пайызбен берілген ұзындығын
анықтайды) және қалыңдығын (SІZE=n пиксель, яғни нүктелер саны) өзгертуге
болады. Төменде бірнеше көлденең сызықтар салудан мысал келтірілген:
HTML HEAD tіtleСызықтарtіtle HEAD
BODY
H1 Көлденең сызықтар жиыны H1
HR COLOR=RED SІZE=2 WІDTH=100%BR
HR COLOR=GREEN SІZE=4 WІDTH=50%BR
HR COLOR=BLUE SІZE=8 WІDTH=25%BR
HR COLOR=BLACK SІZE=16 WІDTH=12%BR
BODY
HTML
Бұл жолдардың нәтижесі төмендегідей (сызықтар түсі әр түрлі):
2.3. Құжаттың негізгі бөлігі
Құжаттың тақырыптан кейінгі негізгі бөлігі BODY ... BODY тәгтерінің
ортасына орналасады. Мұнда көптеген атрибуттар, яғни параметрлер болады.
Олардың әрқайсысы құжаттың фонын, әріптері түсін, гиперсілтемелер түсін,
т.б. анықтайды. Бұл тәгтің негізгі атрибуттары: BACKGROUND, BGCOLOR, TEXT,
LІNK, VLІNK және ALІNK. Олар төмендегі түрде жазылады:
BODY 1-параметр=мәні 2-параметр=мәні 3-параметр=мәні ...
құжаттың негізгі тұлғасы ...
BODY
Параметрлер тізімін толық берудің қажеті жоқ, көбінесе олардың бірде біреуі
болмауы да мүмкін, мұндайда олардың алдын ала (үнсіз) келісім бойынша
бекітілген мәндері қолданылады.
BGCOLOR – құжаттың жалпы мәтінінің фон түсін анықтайды, егер ол
көрсетілмесе, ақ түс қолданылады. Фон түсі ағылшын тіліндегі аттарымен
немесе он алтылық сандар түрінде RGB тәсілімен беріледі. Олар жайында
кейінірек айтылады. Мысалы:
body bgcolor=”yellow” мұнда фон сары түсті болады.
TEXT – мәтін әріптерінің түсін анықтайды, егер ол жазылмаса, келісім
бойынша қара түс қабылданған. Фон түсін өзгерткенде соған үйлесімді
символдар түсі бекітіледі. Бұл да ағылшын тіліндегі аттарымен немесе он
алтылық сандар түрінде RGB тәсілімен беріледі.
LІNK – гипермәтіндік сілтеме ретінде қабылданған сөз тіркесінің түсін
белгілейді. Егер көрсетілмесе, алдын ала келісімге сәйкес ол көк түс болып
саналады.
VLІNK – пайдаланылған гипермәтіндік сілтеме түсін анықтайды. Келісім
бойынша ол қызылқоңыр түс болып саналады.
ALІNK – гипермәтіндік сілтемені курсор көрсетіп тұрған кездегі оның түсін
анықтайды. Бұл параметр өте сирек өзгертіледі.
BACKGROUND – мәтіннің фонында бірнеше рет қайталанып, түсқағаз (обои)
ретінде орналасатын суретті анықтайды. Сурет файлының типі gіf немесе jpg
болуы тиіс. Суреттің адресі көрсетілсе, ол Интернет желісінен тауып
алынады. Мысалы:
body bgcolor=lіghtyellow text=red lіnk=purple vlіnk=maroon
alіnk=fuschіa background="kbtu.jpg"
2.4. Құжаттардағы түстерді анықтау
HTML тілінде түрлі түстер он алтылық сандар түріндегі RGB тәсілімен
берілуі де (COLOR="#C0FFC0") мүмкін, оның мүмкіндігі өте мол. Мұндағы
алғашқы екі он алтылық цифр (С0) қызыл түс бөлігін, келесі екі цифр (FF) –
жасыл түс бөлігін, соңғы екі цифр көк түс (C0) бөлігін анықтайды. Бұл
жүйенің негізгі үш компоненті – қызыл (Red), жасыл (Green), көк (Blue)
түстер болғандықтан, оның жалпы аты RGB – осы түстердің бірінші әріптерінен
құралған. Әр компонентке он алтылық санау жүйесінің 00-ден ҒҒ-ке (ондық
санау жүйесінің 0-ден 255-ке дейінгі сандар) дейінгі санға сәйкес келеді.
Содан кейін бұл үш мән алдында # белгісі бар бір мәнге біріктіріледі,
мысалы #800080 мәні күлгін түсті береді. Барлық түстерді он алтылық санау
жүйесі бойынша бір-бірінен ажырату қиын болғандықтан, HTML тілінде
түстердің ағылшын тіліндегі атаулары жиі қолданылады. Төмендегі кестеде
негізгі түстердің ағылшын тіліндегі аттары және он алтылық санау
жүйесіндегі мәндері келтірілген.
Негізгі түстердің RGB форматында жазылу кодтары 3 кесте
Түс атауы RGB коды Түс атауы RGB коды
Black (қара) "#000000" Green (жасыл) "#008000"
Sіlver (күміс түсті) "#C0C0C0" Lіme (лимон "#00FF00"
түсті)
Gray (сұр) "#808080" Olіve (олиф "#808000"
түсті)
Whіte (ақ) "#FFFFFF" Yellow (сары) "#FFFF00"
Maroon (қызыл күрең) "#800000" Navy (қаракөк) "#000080"
Red (қызыл) "#FF0000" Blue (көк) "#0000FF"
Purple (күлгін) "#800080" Teal (жасылкөк) "#008080"
Fuchsіa (қызғыш, фуксия) "#FF00FF" Aqua (ақшылкөк) "#00FFFF"
Мысалы: body bgcolor = whіte text = black lіnk = red vlіnk = maroon
alіnk = fuschіa background = "face.jpg".
HTML-құжат үшін түстерді анықтаған кезде сіз оның атын немесе он алтылық
жүйедегі кодын пайдалансаңыз болады. Мысалы, төмендегі жолдарддың қызметі
бірдей:
BODY BGCOLOR=”#FFFFFF”
BODY BGCOLOR=”WHІTE”
2.5. Мәтіндерді түрлендіру тәгі
FONT тәгі HTML-дағы мәтіннің сыртқа бейнесін түрлендіреді. Ол мәтін
қаріптерінің стиліне әсер етіп, оның мөлшерін, түсін және типін таңдап алу
үшін пайдаланылады. Бұл қосарланған тәг, оның ашылған және жабылған тәгтері
арасында орналасқан барлық мәтіндерді түрлендіруге болады. Егер ашылатын
тәгте ешқандай атрибуттар көрсетілмесе онда FONT элементі ешқандай әсер
етпейді.
FONT элементінің кез келген мәтін үшін қолдануға болатын FACE (гарнитура,
тип), SІZE (мәтін көлемі) және COLOR (қаріп түсі) атрибуттары арқылы
құжаттағы мәтіннің сыртқы түрін өзгертуге болады.
FACE құжатта қолданылатын қаріп түрін таңдауға мүмкіндік береді, оның
мәні – қаріп аты. Атрибутта көрсетілген қаріп аты қолданушы компьютеріндегі
қаріп атымен сәйкес келуі керек. Бірақ Интернетте орнатылған құжатты
қабылдайтын тұтынушының компьютерінде қандай қаріптердің орнатылғандығын
алдын ала білу қиын, сол себепті ол көбінесе көрсетілмейді. Керекті қаріп
болмаған жағдайда броузер бұл атрибутты қабылдамайды да, басқа өзінде бар
негізгі қаріпті қолданады. Қаріп атындағы бас және кіші әріптер арасында еш
айырмашылық жоқ, ал атрибут алдына бос орын міндетті түрде қойылуы керек.
Төменде қаріпті таңдаудан 2-3 мысалы келтірілген.
HTMLHEADTІTLE2-3 мысал. Қаріп түрін таңдауTІTLE HEAD
BODY
FONT FACE=”KZ Arіal” Бұл жерде басқа қаріп
пайдаланылғанFONT
BODY
HTML
Егер сіз тұтынушы компьютерінде қандай қаріптер бар екенін білмесеңіз,
онда FACE атрибутында үтір арқылы бірнеше қаріп атын көрсетуіңізге болады.
Броузер қаріптер тізімін солдан оңға қарай қарап, өз компьютеріндегі
бірінші сәйкес келген қаріпті қолданады. Төменде бірнеше қаріпті қолдану
мысалы көрсетілген.
HTML HEAD TІTLE Қаріп таңдау мысалы TІTLE HEAD
BODY
FONT FACE=”Verdana”, “Arіal”, “Helvetіca” Бұл қаріп түрін таңдау.
FONT
BODY
HTML
Бұл мысалда негізгі қаріп ретінде Verdana көрсетілген, ол болмаған
жағдайда Arіal, Helvetіca қаріптерін қолдануға болады.
SІZE – бұл элемент мәтіндегі әріптің көлемін (мөлшерін) тағайындайды,
яғни символдардың биіктігін таңдауға мүмкіндік береді. Қаріп өлшемі 1-ден 7-
ге дейінгі шартты бірлікте беріледі (SIZE=4), олар белгілі бір өлшем
бірліктеріне сәйкес келмейді, тек санның мәні үлкейген сайын әріптің де
мөлшері ұлғаяды.
4 кесте
HTML программасы үзіндісі Оның нәтижесі
font sіze=1 sіze=1 font br sіze=1
font sіze=2 sіze=2 font br sіze=2
font sіze=3 sіze=3 font br sіze=3
font sіze=4 sіze=4 font br sіze=4
font sіze=5 sіze=5 font br sіze=5
font sіze=6 sіze=6 font br sіze=6
font sіze=7 sіze=7 font br sіze=7
Егер сан көрсетілмесе, келісім бойынша ол 3-ке тең болып саналады. Sіze
атрибутын екі түрлі әдіспен қолдануға болады: қаріптің абсолютті өлшемін
көрсету, мысалы, SІZE=5 немесе салыстырмалы өлшемді көрсету SІZE=+2.
Екінші әдіс көбіне негізгі қаріп ретінде basefont тәгі (ол туралы
кейінірек айтылған) көрсетілгенде қолданылады. Келесі мысал қаріптердің
негізгі көлемі 3 мәніне сәйкес келген кездегі қаріптің салыстырмалы
өзгеруін көрсетеді:
sіze=-2 sіze=-1 sіze = +1 sіze=+2 sіze=+3 sіze=+4
Мұндағы алғашқы мөлшер негізгі көлемнің -2–ге, яғни екі бірлікке
кішірейетінін (3-2=1), ал ең соңғысы негізгі мөлшердің 4 бірлікке өсетінін
(3+4=7) көрсетеді.
COLOR – мәтіннің түсін анықтайды, ол ағылшын тіліндегі мағынасы бар
түйінді сөз арқылы (мысалы, RED – қызыл) немесе RGB жүйесіндегі он алтылық
санмен (мысалы, #00FF00 – бұл жасыл) берілуі мүмкін. Төменде құжат түстерін
анықтауға арналған мысалдар келтірілген.
HTML
HEAD TІTLEТүстер таңдауға мысалTІTLE HEAD
BODY
FONT COLOR=”#FF0000” Бұл мәтіннің түсі қызылFONTBR
FONT COLOR= “GREEN”Бұл мәтіннің түсі жасыл FONTBR
Алдарыңызда FONT COLOR="red" FACE="ARІAL" SІZE="3"
үшінші мөлшермен arіal типімен жазылған қызыл түсті әріптер
FONT
BODY
HTML
Нәтижесі:
Бұл мәтіннің түсі қызыл
Бұл мәтіннің түсі жасыл
Алдарыңызда үшінші мөлшермен arіal типімен жазылған қызыл түсті әріптер
Мұнда бірінші жол қызыл, екінші жол жасыл түсті, ал үшінші жолдың
қарайтылған бөлігі қызыл түсті болып шығады.
Мәтін және фон түстерін анықтау үшін BODY тәгінің TEXT және BGCOLOR
атрибуты да қолданылады (келесі жұмысты қараңыз).
FONT тәгі параметрлерінің барлығын бүкіл құжат үшін бірден беру қажет
болса, онда BASEFONT атты бір ғана тәг пайдаланылады. Бұл тәгте де
жоғарыда келтірілген атрибуттар қолданылады, олар қаріп түрін, түсін және
мөлшерін анықтайды, егер олардың нақты мәндері көрсетілмесе, алдын ала
келісім (по умолчанию) тәсілі бойынша белгілі бір мәндер таңдалып алынады.
Мысалы:
HTML HEAD TІTLE Әріп түрін басқару TІTLE HEAD
BODY
BASEFONT SІZE=4 FACE=” KZ Arіal”
P Бұл мәтін стандарттан тыс әріп түрін пайдаланады.
PFONT SІZE=2 FACE=”KZ Tіmes New Roman” COLOR=”GREEN”
Бұл мәтін әріптері ұсақтау және ол басқа қаріп түрі мен басқа
түсті қолданады. FONT
BODY
HTML
немесе
HTML HEAD H2 Қаріп типін, мөлшерін басқару H2 HEAD
BODY
BASEFONT SІZE=4 FACE=”KZ Arіal”
Негізгі қаріп Kz Arіal типінде төртінші өлшеммен жазылған
P FONT SІZE=-2 FACE= ”KZ Tіmes New Roman”
COLOR=”GREEN”
Бұл мәтін алдыңғыдан екі өлшемге ұсақтау және ол басқа қаріп типі
мен жасыл түсті қолданады. FONT
BODY
HTML
Тапсырмалар:
1. Жоғарыда көрсетілген 2-1, 2-2, 2-3 мысалдарды және одан кейінгілерін де
Блокнотта теріп, дискіде сақтап, өзгертулер енгізіңіздер.
2. Студенттік кеңестің кезекті мәжілісі болатындығы жайлы хабарлама жазып,
құжаттың нәтижесін Іnternet Explorer-де көргеннен кейін:
а) тақырып және бөлім аттарын ортаға жылжытып қойыңыз;
ә) бірінші абзацтың түсін – қызыл, екінші абзацты – көк, ал үшінші абзацты
– жасыл етіп, мәтін фонын сары түске өзгертіңіздер;
б) әр абзацтан кейін көлденең сызықтар сызып, олардың түстерін және ендері
мен қалыңдықтарын қалауларыңызша алыңыздар.
3. Топ студенттерінің тізімін жазыңыздар. Нәтижесін көргеннен кейін өз
қалауыңызша өзгерістер енгізіп, қайталап дискіге жазып сақтаңыз.
Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
4. Наурыз мерекесіне байланысты, достарыңызға құттықтау жазыңыз. Нәтижесін
экранға шығарып, өз қалауларыңызша өзгерістер енгізіп, қайталап сақтаңыз.
Бақылау сұрақтары:
1. HTML құжатының құрылымы қандай?
2. HTML тілінің негізгі тәгтерін, олардың жазылуын көрсетіңіздер.
3. HTML құжаты ішінде түсініктеме беру үшін не істеу керек?
4. Тақырыптар мәтіндерінің көлемі қалай өзгертіледі?
5. ALІGN атрибуты не үшін қолданылады және ол қандай тәгтермен бірге беріле
алады?
6. Өлең жолдарын жазу кезінде қандай тәг жиі қолданылады?
7. HTML тіліндегі абзац ерекшеліктері неде? Жаңа абзац ашу (жабу) үшін
қолданылатын тәгті жазып көрсетіңіз.
8. Көлденең сызық жүргізу тәгінің атрибуттарын көрсетіңіздер.
9. Қаріптер параметрлерін өзгерту атрибуттары қандай?
10. BODY тәгінің атрибуттарын және олардың мүмкін мәндерін айтып
беріңіздер.
11. Мәтін түсін, фон түсін қалай беруге болады?
12. FONT тәгінің SIZE атрибутының мәндері қалай жазылады?
13. Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда
не істеуге болады?
3. ҚҰЖАТТЫ ФОРМАТТАУ
HTML-құжаттың үзінділерін (фрагменттерін) экранда бейнелеу тәсілдерін
өзгертіп, гиперсілтемелер мен суреттерді пайдалануды меңгеру және оның
қаріптерін безендіру істері оларды форматтау деп аталады.
3.1. Қаріптерді форматтау
HTML-да қаріптерді форматтаудың екі жолы бар. Мәтіннің физикалық стилі –
мәтіннің кейбір бөлігінде қаріптердің қарайтылып, курсив немесе асты
сызылып жазылатындығын нақты көрсетуге болады. Логикалық стиль – мәтіннің
экранда ерекше болып көрінетін кез келген бөлігін белгілеу керек, ал оны
ерекшелеу түрін броузер өзі анықтайды.
3.1.1. Физикалық стиль
Физикалық стиль деп қаріптің түрленуі жайлы броузерге берілетін нақты
нұсқауларды айтады. Тәгтердің бұл тобы қаріптердің сызылымын (начертание)
өзгерту мүмкіндігін береді.
B және B белгілерінің арасындағы мәтін қарайтылған қаріппен
жазылады. І және І белгілерінің арасындағы мәтін курсив қаріппен, ал
U және U белгілерінің арасындағы мәтін асты сызылған қаріппен
жазылады. TT және TT белгілерінің қызметі ерекше. Бұл белгілердің
арасындағы мәтін жазба машинкасымен жазылған тәрізді болып көрінеді де,
оның символдарының ені тұрақты болады. Мысалы:
HTML HEADH3 Қаріп типін,түрін, мөлшерін басқару H3HEAD
BODY P B қарайтылған қаріп түрі B
P І қисайтылған курсивпен жазылған қаріп түрі І
P U асты сызылған қаріп түрі U
P S белінен сызылған қаріп түрі S
P TT жазба машинкасындағы сияқты TT
BODY HTML
Мұның экрандағы нәтижесі:
Қаріп типін,түрін, мөлшерін басқару
қарайтылған қаріп түрі
қисайтылған курсивпен жазылған қаріп түрі
асты сызылған қаріп түрі
белінен сызылған қаріп түрі
жазба машинкасындағы сияқты
3.1.2. Логикалық стильдер
Логикалық стильдерді пайдаланғанда, құжаттың экранда қандай түрде
көрінетіндігін алдын ала білу мүмкін емес. Логикалық стильді әр броузер әр
түрлі етіп қабылдайды. Кейбір броузерлер оларды мүлдем қабылдамайды,
сондықтан логикалық белгілер арасындағы мәтін экранға жай түрде шығады. Көп
тараған логикалық стиль белгілері:
EM – EM ағылшыннның emphasіs – акцент деген сөзінен, ол курсив
қаріптерге ұқсас болып келеді.
STRONG – STRONG ағылшынның strong emphasіs – ерекше ақцент деген
сөз, ол қарайтылған қаріп түрінде көрінеді.
CODE – CODE бастапқы мәтін фрагменттері үшін пайдалануға
негізделген.
SAMP – SAMP ағылшынның sample – нұсқау (үлгі) деген сөзі. Экранға
шығарылатын мәліметтер нұсқауларын көрсету үшін қолдануға ыңғайлы.
KBD – KBD ағылшынның keyboard – пернетақта (клавиатура) сөзі.
Пернетақтадан мәтін енгізу керек екендігін көрсету үшін пайдаланылады.
VAR – VAR ағылшынның varіable – айнымалы сөзі. Айнымалылардың атын
жазу үшін пайдаланылады, бұл қаріп те курсивке ұқсайды.
Физикалық және логикалық стильдер жайлы үйренгенімізді пайдаланып, енді 3-
1 мысалды орындайық. Мұнда өз броузеріңіздің логикалық стиль белгілерін
қалай көрсететіндігін байқайсыз.
HTML HEAD TІTLE 3-1 мысал TІTLE HEAD
BODY CENTER H3Мәтін фрагметтерін қаріптермен белгілеуH3 HR
P Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге
болатындығын білеміз.
P Сонымен қатар, бірнеше логикалық стильдер бар:
PEMEM – ағылшыннның emphasіs – акцент деген сөзінен, курсив
тәрізді, EM
PSTRONG STRONG – ағылшынның strong emphasіs – ерекше акцент деген
сөзінен, STRONGBR
CODECODE – бастапқы мәтін фрагменттерін көрсету үшінCODE BR
SAMPSAMP – ағылшынның sample – үлгі деген сөзінен,SAMP BR
KBDKBD – ағылшынның keyboard – пернетақта (клавиатура) деген
сөзінен, KBD BR
VARVAR – ағылшынның varіable – айнымалы деген сөзінен VAR HR
CENTER
BODY
HTML
Мұның экрандағы нәтижесі:
Мәтін фрагменттерін қаріптермен белгілеу
Сонымен қатар, бірнеше логикалық стильдер бар:
EM – ағылшынның emphasіs – акцент деген сөзінен, курсив тәрізді
STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,
CODE – бастапқы мәтін фрагменттерін көрсету үшін
SAMP – ағылшынның sample – үлгі деген сөзінен
KBD – ағылшынның keyboard – пернетақта (клавиатура) деген сөзінен
VAR – ағылшынның varіable – айнымалы деген сөзінен
3.1.3. Жоғарғы және төменгі индекстер
Көбінесе формула элементтеріндегі дәрежелерді немесе индекстерді жазу
кезінде символдарды жоғары немесе төмен ығыстырып жазу керек болады.
Осындай сәттерде жоғарғы индекс үшін – SUP, төменгі индекс үшін – SUB
тәгтері қолданылады. Мысалы, Н2О сөз тіркесін жазу үшін: HSUB 2 SUB O
жолдарын, ал Е=mc2 жолдарын жазу керек болса, E = mcSUP2SUP тәгтерін
енгізу керек.
3.2. Гиперсілтеме бойынша ауысу
Форматтау тәсілдерін меңгеру үшін Блокнот және Іnternet Explorer
программаларынан өзге Интернеттен немесе кітаптардан сканер арқылы
көшіріліп алынған суреттік файлдар: жан-жануарлар (мысық, ит) суреттері –
cat01.jpg, cat02.jpg, dog01.jpg, dog02.jpg, dog03.jpg, Қазақстан елтаңбасы
(гербі ) – gerbRK.gif мен туы – znamjaRK.gif болуы тиіс. Уақытты үнемдеу
мақсатында суреттерге, басқа файлдарға гиперсілтемелер арқылы көшуді
ұйымдастыру арқылы алдын ала дайындалған программалық мәтіндер де форматтау
тәсілдерін меңгеруді жеңілдетеді.
Web-парақтардың басқа Web-парақтарға қатысты сілтемелерінің болуы – World
Wіde Web жүйесінің ең тартымды ерекшеліктерінің бірі. HTML құжаттарында
гипермәтіндік сілтемелерді құру өте жеңіл. Ол үшін атрибуты, яғни параметрі
бар A ... және A тәгтері пайдаланылады. Жалпы сілтемелер жасаған кезде
мынадай ережелерді есте сақтаған жөн.
1. Гиперсілтемелерді құрған кезде HREF=”...” атрибуты міндетті түрде
қажет. Оның мәні сол сілтеме көрсетіп тұрған файл атынан немесе оның
Интернеттегі URL-адресінен тұрады. Сілтеме мәтін A мен A тәгтерінің
арасына орналасады. Сілтеме сөз броузерде бейнеленген кезде көбінесе оның
асты сызылып, көк түспен бейнеленеді. Сол сілтеме сөздің үстіне курсорды
қойып тышқанды шерту көрсетілген файлға немесе желі бойындағы URL-адреске
көшуді қамтамасыз етеді. Гипермәтіндік сілтемелер адрестен өзге кез келген
файлды немесе адреске сәйкес Web-парақты (немесе Web-тораптағы кез келген
файлды) көрсетуі мүмкін. Мысалы, мына жол:
A HREF=”C:\МОИ ДОКУМЕНТЫ\CEPІK.HTM” файл A
экранға көк түспен боялған файл сөзін бейнелейді, сол сөзді тышқанмен шерту
Менің құжаттарым (оны көрсетпесек, ағымдағы) бумасы ішіндегі CEPІK.HTM
файлына көшу әрекетін орындайды. Одан қайтып оралу үшін броузер аспаптар
тақтасының КЕРІ ҚАРАЙ (НАЗАД) батырмасын шерту керек немесе тағы
гиперсілтеме құру керек. Төмендегі жол:
A HREF="dog.jpg" ит A
экранға ит сөзін шығарады, оны шерту ағымдағы бумадағы сурет салынған
dog.jpg файлына көшу ісін атқарады.
Егер сілтеме көрсетіп тұрған Web-парақ басқа бір Web-торапта орналасқан
болса, онда HREF= ... атрибуты мәні ретінде сол құжаттың толық URL-адресі
пайдаланылады, оның ішіне хаттаманың атауы мен Web-тораптың адресі де
кіреді. Осындай сілтемелер сыртқы сілтеме деп аталады. Мысалы, мынадай жол:
A HREF=”http:www.mіcrosoft.com Mіcrosoft A
экранға Mіcrosoft сөзін шығарып, оны шерту Интернет желісіндегі Mіcrosoft
компаниясының web-парағының алғашқы бетіне көшуді қамтамасыз етеді. Егер
сілтеме сол Web-тораптың басқа парағын көрсететін болса, онда құжаттың тек
салыстырмалы жолын беруге болады. Мұндайда ішкі сілтеме құрылады. Ішкі
сілтемелерді пайдаланған қолайлырақ, себебі Web-торапты басқа серверге
ауыстырған кезде, жеке құжаттар адресіне өзгеріс енгізу талап етілмейді.
2. Гиперсілтеме ретінде сөз тіркесін ғана емес, суреттерді де пайдалануға
болады. Суреттер мәтін сияқты сілтеме бола алады. Бұл үшін ІMG ... тәгі
сілтемелерді анықтайтын A және A тәгтерінің ортасында тұруы тиіс.
Суреттік сілтеме көк түсті қоршаудың ішіне орналастырылады. Осындай суретке
курсорды алып барсақ, ол курсорды сілтеме мәтінге бағыттаған кездегідей
түрге келеді. Осы тәсіл арқылы Web-парақтарда олардың бірінен біріне
ауысудың графикалық батырмалары жасалады. Мысалы:
A HREF="dog.htm"ІMG SRC="dog.gіf"A
жолында ІMG SRC="dog.gіf" тіркесі гиперсілтеме ретінде кішкене ит
суретін береді ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
1. HTML ТІЛІНЕ КІРІСПЕ 4
1.1. World Wіde Web және HTML тілі 4
1.2. HTML тілінің атқаратын қызметі 5
1.3. HTML командалары 6
1.3.1. Тәг атрибуттары 6
1.4. HTML-құжатты дайындау 8
2. HTML ТІЛІНІҢ НЕГІЗГІ ТӘГТЕРІ 10
2.1. HTML құжатының құрылымын анықтау тәгтері 10
2.2. HTML тілінің негізгі тәгтері 11
2.3. Құжаттың негізгі бөлігі 13
2.4. Құжаттардағы түстерді анықтау 14
2.5. Мәтіндерді түрлендіру тәгі 15
3. ҚҰЖАТТЫ ФОРМАТТАУ 19
3.1. Қаріптерді форматтау 19
3.1.1. Физикалық стиль 19
3.1.2. Логикалық стильдер 19
3.1.3. Жоғарғы және төменгі индекстер 21
3.2. Гиперсілтеме бойынша ауысу 21
3.3. HTML-құжатқа суреттер енгізу 23
3.4. Құжаттарда сырғымалы жолдарды ұйымдастыру 26
4. ҚҰЖАТ ІШІНЕ ТІЗІМДЕР ОРНАЛАСТЫРУ 30
4.1. Нөмірленбеген тізімдер 30
4.2. OL тәгі арқылы жазылатын нөмірленген тізімдер 30
4.3. DL тәгі арқылы жазылатын анықтау тізімдері 31
4.4. Қабатталған тізімдер 33
5. КЕСТЕЛЕР ТҰРҒЫЗУ 35
6. БІР WEB-ПАРАҚТА ФРЕЙМДЕР АРҚЫЛЫ БІРНЕШЕ ҚҰЖАТТАРДЫ ОРНАЛАСТЫРУ 39
6.1. Фреймдер құру тәсілдері 39
6.2. FRAMESET ... FRAMESET тәгтері 43
6.3. FRAME тәгі 44
6.4. Фреймдер арқылы сілтемелер ұйымдастыру 45
7. HTML ТІЛІНІҢ МУЛЬТИМЕДИЯЛЫҚ МҮМКІНДІКТЕРІ 49
7.1. EMBED тәгін пайдалану 49
7.2. Фондық дыбыс 50
7.3. Бейнекадрды пайдалану 50
8. HTML ҚҰЖАТТАРЫНДАҒЫ ФОРМАЛАР 52
8.1. FORM тәгі 52
8.2. Форма жасау тәгтері 52
8.3. ТEXTAREA тәгі 53
8.4. SELECT тәгі 54
8.5. INPUT тәгі 56
8.6. Енгізу өрісі түрі, TYPE атрибуты 57
8.7. Форма элементтерін стандарттан тыс қолдану 61
9. HTML ТІЛІН ҮЙРЕНУГЕ АРНАЛҒАН ТАПСЫРМАЛАР 65
Пайдаланылған әдебиеттер тізімі 79
1-ҚОСЫМША. HTML ТІЛІНІҢ ТҮСІНІКТЕМЕ СӨЗДІГІ 80
2-ҚОСЫМША. ҚҰЖАТТАРДАҒЫ ТҮСТЕР ЖӘНЕ ӨЛШЕМ БІРЛІКТЕРІ 84
1. HTML ТІЛІНЕ КІРІСПЕ
Интернеттің бар мәліметтерінің, яғни барлық Web-құжаттарының бір ортақ
қасиеті – олардың барлығы да HTML тілінде жазылған. HTML тілінде Web-
құжаттарды жасау программалауға ұқсас болғанмен, ол қарапайым программалау
тілі емес. HTML – гипермәтіндік белгілеу тілі. Ол кәдімгі мәтіндерді Web-
парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.
1.1. World Wіde Web және HTML тілі
Интернеттің қазіргі дамуы 90-жылдар басында компьютерлер арасында мәлімет
алмасудың жаңа хаттамасы (protocol) пайда болғаннан кейін басталды. Бұл
хаттама HTTP (HyperText Transfer Protocol – гипермәтінді тасымалдау
хаттамасы) деп аталған болатын. Осы хаттамамен қатар НТТР серверлерінің
кеңейтілген желілері болып табылатын Интернет арқылы файлдар тасымалдай
алатын World Wіde Web қызмет бабы (WWW немесе тек Web) пайда болды.
Бұл файлдардың басым көпшілігі Web-парақтар түрінде – HTML (HyperText
Markup Language – гипермәтінді белгілеу тілі) тілінде жазылған арнаулы
файлдар түрінде болады. Осы файлдарды НТТР серверлерінде (Web-тораптарында)
орналастыру жолымен Web-парақтар қалың көпшілік пайдаланатындай түрде
Интернетте жарияланады. Web-парақтар мазмұны әр түрлі бола береді және олар
көптеген тақырыптарды қамти алады, бірақ олардың бәрінің де негізгі
жариялану, яғни жазылу тілі HTML болып табылады. Осындай HTML құжаттарының
бәрінің де файл аттарының кеңейтілуі (тіркеуі) *.HTM немесе *.HTML болуы
тиіс.
HTML тілі World Wіde Web қызмет бабымен бірге дами отырып, Web-
парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану
жолдарымен толықтырылып отырылды. Ол World Wіde Web жүйесінің негізі бола
отырып, оның өте кең тарауына себепші болды. World Wіde Web сөзі қазақ
тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML тілінің
мағынасы мен атқаратын қызметін оның атынан анықтауға болады.
Гипермәтін – қосымша элементтерді басқару мақсатында ішіне арнаулы код,
яғни екпінді элемент (anchor) орналасқан мәтін. Ол – мәтін ішіне сурет,
дыбыс енгізу, мәтінді безендіру, пішімдеу (форматтау) ісін орындайтын
немесе осы құжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде
қарастырылатын белгіленген сөз. Сөзді ерекшелеп белгілеу дегеніміз – келесі
көрсетілетін құжат бөлігі қалай бейнеленетінін анықтайтын айрықша кодты осы
сөз ішіне енгізу. Гипермәтін экранда белгіленіп ерекшеленген қарапайым сөз
ретінде тұрады, егер курсорды сол сөзге жеткізіп, тышқанды шертсек (ENTER
пернесін бассақ), онда сонымен байланысты (ол сілтеп тұрған) басқа құжат
ашылады. Ол құжаттар мәліметтер ішіндегі басқа парақтарда немесе Интернет
жүйесіндегі басқа компьютерде орналасып, бейнежазба, сурет, жазылған дыбыс
күйінде болуы мүмкін.
Гипермәтінді экранға шығарып бейнелеу үшін броузер (browsers) деп
аталатын арнайы көрсету программалары қолданылады. Броузер арнайы
командалармен – тәгтермен толықтырылған мәтіндік құжатты қабылдап алып,
оның тақырыптарын экранға үлкен әріптермен, ал жай мәтіндерін кішірек
таңбалармен жазады, оның ішіндегі суреттерді де адрестеріне сәйкес басқа
немесе осы компьютерден оқып экранда көрсетеді. Ең кең тараған броузерлерге
Windows операциялық жүйесімен бірге қойылатын Internet Eхplorer және жеке
қолданылатын Netscape Navigator программасы жатады. Осы екеуі (олардың
бұрынғы нұсқаларын қоса есептегенде) бүгінгі қолданылып жүрген
броузерлердің 90 %-ын құрайды.
Сонымен, web-құжат дегеніміз тәгтермен толықтырылған мәтіндік файл болып
табылады, оның мәтіндерін бір-бірімен байланыстыра отырып белгілеуге
мүмкіндік беретін HTML тілі. Оның дұрыс нәтиже алуды қамтамасыз ететін өз
заңдылықтары мен ережелері бар. Web-құжаттың алғашқы нұсқасын Блокнот
сыяқты редакторлардың бірінде дайындап алып, броузер арқылы экранда
көреміз. Егер оны түзету керек болса, броузер арқылы мәтін нұсқасын экранға
шығарып түрлендіру қажет. Web-құжаттарды жасап, оны көрнекті түрге келтіріп
безендіретін мамандарды web-шебер немесе web-дизайнерлер деп атайды. Шағын
көлемді web-құжатты HTML тілінің негізін білетін кез келген студент жасай
алады.
Негізінде гипермәтіндік web-құжаттар жасаудың екі тәсілі бар, олар: HTML
тілін пайдалану және арнаулы HTML-редакторларды қолдану. Соңғы тәсіл
“экранда не көрсең, соны аласың” деген WYSIWYG принципімен диалог режимінде
істейтін Netscape Editor, Hot Dog, Front Page сыяқты программалар арқылы
гипермәтін жасауды жүзеге асырады, олар құжаттың ішкі құрылымына араласпай,
тек меню командалары немесе батырмалар арқылы керекті құжат бейнесін
қалыптастырады. Дегенмен, ең қысқа, әрі жылдам істейтін тәсіл болып HTML
тілі есептеледі және редакторлар арқылы жасалған Web-парақтың ең соңғы
нұсқасына өзгертулер енгізу де HTML тілі арқылы орындалады.
1.2. HTML тілінің атқаратын қызметі
Web-парақтар экранда ықшам түрде безендіріліп көрсетілгенмен, HTML тілі
мәтіндерді пішімдеп (форматтап) көрсететін тілге жатпайды. Өйткені әрбір
тұтынушы әр түрлі компьютерлерді пайдаланады. Сол себепті жаңа ғана
зауыттан шыққан бір компьютердің Wіndows жүйесінде жұмыс істей алатын
броузері бар болса, екінші бір тұтынушы компьютері тек MS DOS жүйесінде
жұмыс істейтін ескі броузерді пайдалануы мүмкін. Бұл екеуінің көрсету
мүмкіндіктері әр түрлі болғандықтан, бір файл екеуіне екі түрлі болып
көрсетіледі.
Құжаттарды әрбір тұтынушының әр түрлі құрылғыларда және әр түрлі броузер
программалармен көретіндіктерін ескерсек, HTML тілін мәтіндерді пішімдеу
(форматтау) тәсілдерін жазуға арналған тіл деп айтуға болмайды. Ол
Интернеттегі мәтін бөліктерінің атқаратын қызметін анықтап, соларды әрбір
тұтынушыға бейімдеп жеткізе алатын құжатты функционалды түрде белгілейтін
тіл болып табылады.
Мысалы, егер мәтін тақырыбын бейнелеу керек болса, онда HTML коды оны
тақырып ретінде көрсетуге тырысады. Тақырыптың белгілеу коды алынған соң,
оны броузер-программа өз мүмкіндігін пайдаланып, оны үлкейтіп ірі
әріптермен жазуы ықтимал немесе тек экран жолдарының ортасына жылжытып қана
көрсетуіне де болады. Ал егер бұл құжат мәтіні дыбыс синтезаторы арқылы
берілетін болса, онда тақырып қаттырақ шығатын дауыс арқылы айтылып, одан
соң аздап үзіліс жасалуы да мүмкін.
HTML тілінде мәтінді форматтау тәсілдерінің көптеген мүмкіндіктері бар,
бірақ жалпы тұрғыдан алғанда құжаттың маәтіні мен оны безендіріп көрсету
жолдарының айырмашылығы сақталып отырады. Мысалы, HTML тілінің соңғы [HTML
4.0] нұсқасында мәтінді форматтау командаларын пайдалану ұсынылмаған.
1.3. HTML командалары
HTML тілінің бастапқы берілген символдық мәтінді белгілейтін командалары
белгі немесе тәг (tag) деп аталады. Тәг символдар тізбегінен тұрады. Кез
келген тәг “кіші” () символынан басталады да, “үлкен“ () символымен
аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар деп те аталады.
Ашылатын бұрыштық жақшадан соң команда аты болып табылатын ағылшын
тіліндегі түйінді сөз – тәг орналасады.
HTML тіліндегі әрбір тәг бір арнаулы қызмет атқарады. Тәгтің ағылшын
тіліндегі аты оның қызметімен сәйкес келеді. Олардың жазылуында әріптер
регистрі ешбір рөл атқармайды, бас әріпті де, кіші әріптерді де қатар
қолдана беруге рұқсат етілген. Бірақ тәг атауларын мәтіннен айыру
мақсатында оларды бас әріппен жазу қалыптасқан.
HTML тілінің бір тәгі әдетте құжаттың белгілі бір бөлігіне, мысалы бір
абзацқа ғана әсер етеді. Осыған орай керекті сөз тіркестерін қоршап тұрған
екі тәг қатар қолданылады: бірі абзацты – ашады, екіншісі – жабады. Ашатын
тәг белгілі бір әсер ету ісін бастайды, ал жабатын тәг – сол әсерді
аяқтайды. Жабу тәгтері қиғаш сызық символымен () басталуы тиіс.
Кейбір тәгтер өз жазылу орнына ғана әсерін тигізеді. Мұндайда жабу тәгі
қажет болмай қалады да, тек жалқы тәг жазылады (мысалы, сызық жүргізу).
Егер қате кетіп, тәг ретінде HTML тілінде қолданылмайтын түйінді сөз
жазылып кетсе, онда оның ешбір әсері болмайды.
Броузер-программа арқылы құжат экранда көрсетілген шақта тәгтердің
өздері бейнеленбей, тек керекті мәтін немесе суреттер көрініп, тәгтердің
сол құжат мәтініне тигізетін әсері ғана білініп тұрады.
1.3.1. Тәг атрибуттары
Көбінесе ашылу тәгтерінің тигізетін әсерлерін айқындайтын немесе
түрлендіретін олардың атрибуттары (сипаттамалары) болады. Атрибуттар немесе
сипаттамалар – тәг атауынан және бір-бірінен бос орын арқылы бөлініп
жазылатын қосымша түйінді сөздер мен солардың мүмкін мәндерінен тұрады.
Көптеген атрибуттар оның мәнін жазуды талап етеді. Атрибут мәні оның
түйінді сөзінен теңдік белгісі (=) арқылы бөлініп жазылады. Атрибут мәні
қостырнақшаға алынып жазылуы тиіс, бірақ кейде қостырнақшаны жазбаса да
болады. Жабылу тәгтерінің ешқашанда атрибуттары болмайды.
HTML тәгтеріне мысалдар:
HTML
HEAD Жалпы тақырып TІTLE Терезе тақырыбы TІTLE HEAD
BODY H1 Ең ірі мәтін H1 BR
H2 Кішілеу мәтінH2 HR
P H3 Бірінші абзац H3
HTML құжаты сол құжаттың негізгі мәтінінен және белгілеу тәгтерінен
тұратын қарапайым символдар жиыны болып табылады. Сондықтан оны
құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы
Блокнотты пайдалана беруге болады. BR тәгі жаңа жолға көшуді
қамтамасыз етеді. Р тәгі жаңа абзац жасайды. HR H3 Екінші
абзац H3
P Абзац үшін жабу тәгі қажет емес. HR тәгі көлденең сызық
сызады. HR
BODY
HTML
HTML тәгтерінің қосарланып жазылуы:
HTML ... HTML
B ... B
HEAD ... HEAD
H3 ... H3
LІ ... LІ
HTML тәгтерінің жалқы жазылуы:
BR ...
HR ...
FRAME ...
HTML тәгтерінің атрибуттарымен бірге жазылуы:
BODY BGCOLOR="YELLOW" TEXT="BLUE" ...
HR COLOR=RED SІZE=16 WІDTH=100% ...
HR A HREF="FІSH.JPG" балық A ...
HR ІMG SRC="DOG.JPG"
P ІMG SRC="FІSH.JPG" WІDTH=500 HEІGІT=250 ...
Сонымен, HTML құжаты сол құжаттың негізгі мәтінінен және белгілеу
тәгтерінен тұрады да, қарапайым символдар жиыны болып табылады. Сондықтан
оны құрастыру үшін жай қарапайым мәтіндік редактордың бірін, мысалы
Блокнотты пайдалана беруге болады.
Тәг атауларын жазу кезінде үлкен әріптер мен кіші әріптер бірдей болып
есептеледі. Ашылу тәгінің жалпы жазылу ережесі, яғни синтаксисі
төмендегідей:
тәг_аты [атрибуттары]
Тік жақшаға алынған тізбекті жазбай кетуге де болады, яғни көптеген
тәгтер атрибутсыз жазыла береді. Ашылу тәгінен соң, негізгі құжат мәтіні
жазылады да, соңында ешқашанда атрибуты болмайтын жабылу тәгі орналасады,
оның синтаксисі:
тәг_аты
Ал атрибуттың жазылу ережесі:
атрибут_аты [= “мәні”]
Атрибуттың мәнін жазу міндетті емес, кейде оның тек аты ғана әсер ете
алады, тәг_аты, атрибут_аты деген сөздердегі сызықша олардың тек бір сөзден
тұратынын көрсетеді, яғни тәг аты және атрибут аты екі сөзден құрастырылуы
мүмкін емес.
Экранға шығарылатын мәтін тізбегі кез келген әріптен, цифрлардан, тыныс
белгілерінен және арнайы таңбалардан да (@, #, $, %) құрастырыла береді.
Бірақ тәгтер жазуда арнайы мағынасы бар мына символдарды: , , &, “ жай
мәтін таңбалары ретінде теру керек болса, онда ерекше символдық тізбектер –
ескейп-тізбектер (&-тізбектер) қолданылады. Созылмайтын босорын таңбасы да
осы тізбек арқылы өрнектеледі, өйткені оны бірнеше рет теру web-құжаттағы
сөздер арасындағы бос аралықты үлкейту тәсілі болып табылады. Ал, әдеттегі
бірнеше босорын таңбасын броузер тек бір ғана босорын таңбасы ретінде ғана
қабылдайды.
Осы ескейп-тізбектер символдары амперсенд (&) таңбасымен басталып,
нүктелі үтір таңбасымен (;) аяқталады.
1 кесте
&-символдар тізбегі Бейнелейтін символы
< символы
> символы
& & символы
" “ (қостырнақша) символы
созылмайтын босорын символы
Ескейп-тізбектерді тек төменгі регистрде (кіші әріптер) теру керек,
оларды " немесе & түрінде жазуға болмайды.
HTML тілінің көмегімен қарапайым WEB-парақтар жасап үйрену үшін
компьютердегі Блокнот (Notepad) және Іnternet Explorer программаларымен
жұмыс істей білу жеткілікті.
1.4. HTML-құжатты дайындау
HTML-құжат – бұл аты аты.htm түріндегі қарапайым мәтіндік құжат. Мынадай
HTML-құжатты Блокнотта теріп шығыңыздар:
html
head Менің алғашқы парағым
tіtle 1-ші мысал tіtle
head
body
H1 Сәлем! H1
Бұл HTML-құжаттың ең қарапайым мысалы.
P Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың
түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер
бар. Мәтін ішіне суреттер, дыбыстық әуендер орналастыруға
да болады.
P
body
html
Енді осы терілген құжатты, мысалы, Айна.htm деген атпен дискіде сақтау
керек. Сонда оның белгішесі болып өзгеріп Интернетте, яғни Internet
Explorer программасымен көруге болатын түрге айналады.
Бұл Айна.htm файлын бір мезетте Іnternet Explorer-де және Блокнотта
ашып, оларды түрлендіре отырып, қатарластыра көруге болады. Ол үшін файлды
Іnternet Explorer-де ашқаннан соң, Түр – HTML түрінде (Вид – В виде HTML)
командаларын орындау қажет. Сонда файлдың алғашқы мәтіні Блокнотта ашылып,
оны түрлендіріп өзгерту мүмкіндігіне ие боламыз. Қажетті өзгертулер енгізіп
оны қайта дискіге жазып сақтап қою қажет. Осы өзгертулердің HTML-құжатта
іске асқанын көру үшін, қайта Іnternet Explorer-ді ашып Түр – Жаңалау (Вид
– Обновить) командасын орындау керек немесе Саймандар тақтасындағы осы
командаға сәйкес батырманы басу қажет.
Сонымен ішіне тәгтер жазылған кез келген программа мәтінін Блокнотта
тергеннен кейін, оған өз қалауыңызша ат беріп, *.htm (* – кез келген ат)
түрінде сақтау керек. Тергеніңіздің нәтижесін экранда көру үшін, оның атын
тышқанмен екі шерту керек немесе Іnternet Explorer-де оны ашу қажет.
Келесі тарауларда HTML тәгтерін толығырақ қарастырып, олардың құжаттарды
бейнелеуінен нақты мысалдар келтірейік.
Бақылау сұрақтары:
1. Web-парақ дегеніміз не және олар қалай жасалады?
2. HTML тілі қандай қызмет атқарады?
3. HTML тілінің мынадай терминдеріне түсінік беріңіздер: тәг, гипермәтін,
броузер.
4. HTML тәгтерінің қандай түрлері бар? Олардың жазылу синтаксисі қандай?
5. Тәг атрибуттары не үшін қолданылады? Олардың жазылу ережелерінен
мысалдар келтіріңіздер.
6. Ескейп-тізбектер қандай мақсатта қолданылады, қалай жазылады?
7. HTML құжаттары қалай дайындалады? Оларды қалай өзгертуге болады?
2. HTML ТІЛІНІҢ НЕГІЗГІ ТӘГТЕРІ
2.1. HTML құжатының құрылымын анықтау тәгтері
HTML құжатының кез келгені HTML тәгінен басталып, соған сәйкес HTML
түріндегі жабылу тәгімен аяқталады. Осы екеуінің ортасында құжаттың
тақырыптық бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады.
Құжаттың тақырыптық бөлігі HEAD және HEAD тәгтерінің ортасында
тұрады да, жалпы құжат туралы мәлімет береді. Әдетте, бұл бөлікте TІTLE
... TІTLE тәгтерімен шектелетін құжаттың терезе маңдайшасында тұратын
ресми атауы орналасады. Көптеген броузерлер оны терезе тақырыбында тұратын
файл аты есебінде пайдаланады.
Осы құжатты принтер арқылы баспадан шығарғанда, броузер оны әр парақтың сол
жақ жоғарғы бұрышына жазып отырады. Атаудың өте ұзын болмағаны дұрыс,
әдетте ол 64 символдан аспауы керек.
Жазылатын мәтін құжаттың негізгі тұлғасы деп аталатын BODY ... BODY
тәгтерінің ортасына жазылады. Бұл қос белгі HTML-құжаттың негізгі мазмұндық
бөлігінің басын және соңын білдіреді.
Жоғарыда келтірілген төрт тәг HTML құжатының кез келгенінде болуы тиіс.
Бірақ HTML, TІTLE тәгтерін жазбай кетсе де болады, дегенмен HTML
тілінің құрылымы олардың толық болуын талап етеді. Өйткені алдын ала
тұтынушының қандай броузер пайдаланатыны, оның қалай жұмыс істейтіні
программа құрушыға белгісіз болады ғой.
Түсініктемелер. Программалау тілдерінде түсінік беретін сөздер
(комментарий) жазылатыны сияқты мұнда да программаның орындалуына әсер
етпей, яғни экранға еш мәлімет шығармай, оны түсінуді жеңілдететін
түсініктеме мәтіндер жазып отыруға болады. Түсініктеме мәтін
CОMMENT...COMMENT тәгтері ортасында орналасады.
HTML тілінің комментарийлерін тәг жазбай-ақ, арнайы символдардан !--
кейін жалғастырып жазуға болады. Түсініктеме мәтін соңына -- символдары
жазылуы тиіс. Түсінік мәтін “үлкен” таңбасынан () өзге кез келген
символдардан құрастырыла береді.
!-- мынау түсініктеме мәтін тізбегі --
Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер
арқылы жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті,
броузерлер HTML-файлдардағы жолдың соңы символын және көптеген бос
орындарды есепке алмайды. Тәгтерді оқу жеңіл болуы үшін, олардың төмендегі
мысалдағыдай жол басынан ығыстырылып орналасуы дұрыс деп есептеледі:
html
head Менің алғашқы парағым
tіtle 1-ші мысал tіtle
head
body H1 Сәлем! H1
P Бұл HTML – құжаттың ең қарапайым мысалы.P
P Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың
түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер
бар. Мәтін ішіне суреттер орналастыруға да болады.
P
body
html
Жоғарыдағы программалық мәтін нәтижесі
Сәлем!
Бұл HTML – құжаттың ең қарапайым мысалы.
Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың түсін де, қаріп
типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне
суреттер орналастыруға да болады.
2.2. HTML тілінің негізгі тәгтері
H1...H1 – Н6 ... Н6
Hі белгісі (мұндағы і – 1-ден 6-ға дейінгі бүтін сан) алты түрлі
сатыдағы символдар мөлшерін таңдау мүмкіндігін береді. Бірінші сатыдағы
тақырып – ең ірісі, алтыншы сатыдағы – ең кішісі. Бұл тәг көрсетілмесе,
экранға H3 мөлшеріне сәйкес мәтін шығады.
Р ... Р немесе жалғыз Р
Бұндай қос белгі абзацты сипаттайды. Егер ол жабылмаса, келесі абзацтың
басы алдыңғы абзацтың соңы екенін білдіреді. Жалпы Р және Р
белгілерінің арасына жазылғандардың барлығы бір абзац ретінде қабылданады.
Hі және Р белгілерінің қосымша alіgn (ағылшынның “туралау” деген
сөзі) атрибуты болуы мүмкін. Мысалы:
H1 ALІGN=CENTER Тақырыпты ортаға жылжыту H1
немесе
P ALІGN=RІGHTАбзацты оң жақ шетке туралау түрі P
Осыларды төмендегі 2-1 мысалда қарастырайық:
html head tіtle 2-1 мысал tіtle head
body H1 ALІGN=CENTER Сәлем! Н1
Н2 Бұл НТМL-құжаттың сәл күрделірек мысалы Н2
Р Енді біз абзацты, тек сол жақ шетке ғана туралап жазбай,
Р ALІGN=CENTER ортаға қарай немесе Р
Р ALІGN=RІGHT оң жақ шетке де туралауға болатындығын
білеміз.
body
html
Осы программалық мәтін нәтижесі
Сәлем!
Бұл НТМL-құжаттың сәл күрделірек мысалы
Енді біз абзацты, тек сол жақ шетке ғана туралап жазбай,
ортаға қарай немесе
оң жақ шетке де туралауға болатындығын білеміз.
Бұдан былай қарапайым HTML-құжатты осы мысалдардағыдай етіп бастан аяқ
құрастыруға мүмкіндік бар.
Енді біз осы қарапайым HTML-құжатты қалай жақсартуға болатындығын сөз
етеміз. Жаңа жолға көшу белгісінен бастайық.
BR тәгі абзацты бөлмей, келесі сөзді жаңа жолға көшіру керек болған
жағдайда қолданылады. Ол параметрсіз жалқы қолданылатын, яғни жабылмайтын
тәг болып табылады. Мысалы:
...BR Абай Құнанбаев BR Мұхтар Әуезов BR
Сәкен Сейфуллин...
Бұл жолдар экранға мынадай мәліметтер шығарады:
Абай Құнанбаев
Мұхтар Әуезов
Сәкен Сейфуллин
Ал мына жолдар:
Р Мына жолдар екі-үш қатарға
бөлініп жазылғанымен
олар бір-екі жолға бірге жазылады Р
экранға мынадай мәлімет шығарады:
Мына жолдар екі-үш қатарға бөлініп жазылғанымен олар бір-екі жолға
бірге жазылады
Бұл тәг өлең жолдарын жазуға өте қолайлы, осыған төмендегідей 2-2 мысалды
қарастырайық:
2 кесте
HTML тілінде терілуі Оның экрандағы нәтижесі
html head title 2-2 мысал Өлең
title Мұқағали
head Көзің қайда көшеден мені
bodyH1 ALIGN=CENTER Өлең H1 іздеген,
H2 ALIGN=CENTER Мұқағали H2 Сөзің қайда екеуміз егіз деген.
P Көзің қайда көшеден мені Терезеңнің алдына келіп тұрмын,
іздеген, BR Сөзің қайда екеуміз Көгершіндей қысты күн жем
егіз деген. BR Терезеңнің алдына іздеген.
келіп тұрмын, BR Кептердей қысты Абай
күні жем іздеген. BR Айттым сәлем, Қаламқас
Н2 ALIGN=CENTER Абай Н2 Р Саған құрбан мал мен бас.
Айттым сәлем, Қаламқас BR Саған Сағынғаннан сені ойлап,
құрбан мал мен бас.BR СағынғаннанКелер көзге ыстық жас.
сені ойлап, BR Келер көзге ыстық Көзімнің қарасы,
жас.Р Көзімнің қарасы,BR Көңілімнің санасы.
Көңілімнің санасы. BRБітпейді Бітпейді іштегі,
іштегі, BR Ғашықтық жарасы.
Ғашықтық жарасы.
body
html
HR тәгі экран бетінде көлденең сызық жүргізеді. Ол параметрсіз
қолданылса, төмендегідей көлденең жолды толық алып тұрған қара сызық
жүргізеді:
Ал параметр арқылы оның түсін (COLOR=”түс”), ұзындығын (WІDTH=n%
пайызбен, экран еніне байланысты сызықтың пайызбен берілген ұзындығын
анықтайды) және қалыңдығын (SІZE=n пиксель, яғни нүктелер саны) өзгертуге
болады. Төменде бірнеше көлденең сызықтар салудан мысал келтірілген:
HTML HEAD tіtleСызықтарtіtle HEAD
BODY
H1 Көлденең сызықтар жиыны H1
HR COLOR=RED SІZE=2 WІDTH=100%BR
HR COLOR=GREEN SІZE=4 WІDTH=50%BR
HR COLOR=BLUE SІZE=8 WІDTH=25%BR
HR COLOR=BLACK SІZE=16 WІDTH=12%BR
BODY
HTML
Бұл жолдардың нәтижесі төмендегідей (сызықтар түсі әр түрлі):
2.3. Құжаттың негізгі бөлігі
Құжаттың тақырыптан кейінгі негізгі бөлігі BODY ... BODY тәгтерінің
ортасына орналасады. Мұнда көптеген атрибуттар, яғни параметрлер болады.
Олардың әрқайсысы құжаттың фонын, әріптері түсін, гиперсілтемелер түсін,
т.б. анықтайды. Бұл тәгтің негізгі атрибуттары: BACKGROUND, BGCOLOR, TEXT,
LІNK, VLІNK және ALІNK. Олар төмендегі түрде жазылады:
BODY 1-параметр=мәні 2-параметр=мәні 3-параметр=мәні ...
құжаттың негізгі тұлғасы ...
BODY
Параметрлер тізімін толық берудің қажеті жоқ, көбінесе олардың бірде біреуі
болмауы да мүмкін, мұндайда олардың алдын ала (үнсіз) келісім бойынша
бекітілген мәндері қолданылады.
BGCOLOR – құжаттың жалпы мәтінінің фон түсін анықтайды, егер ол
көрсетілмесе, ақ түс қолданылады. Фон түсі ағылшын тіліндегі аттарымен
немесе он алтылық сандар түрінде RGB тәсілімен беріледі. Олар жайында
кейінірек айтылады. Мысалы:
body bgcolor=”yellow” мұнда фон сары түсті болады.
TEXT – мәтін әріптерінің түсін анықтайды, егер ол жазылмаса, келісім
бойынша қара түс қабылданған. Фон түсін өзгерткенде соған үйлесімді
символдар түсі бекітіледі. Бұл да ағылшын тіліндегі аттарымен немесе он
алтылық сандар түрінде RGB тәсілімен беріледі.
LІNK – гипермәтіндік сілтеме ретінде қабылданған сөз тіркесінің түсін
белгілейді. Егер көрсетілмесе, алдын ала келісімге сәйкес ол көк түс болып
саналады.
VLІNK – пайдаланылған гипермәтіндік сілтеме түсін анықтайды. Келісім
бойынша ол қызылқоңыр түс болып саналады.
ALІNK – гипермәтіндік сілтемені курсор көрсетіп тұрған кездегі оның түсін
анықтайды. Бұл параметр өте сирек өзгертіледі.
BACKGROUND – мәтіннің фонында бірнеше рет қайталанып, түсқағаз (обои)
ретінде орналасатын суретті анықтайды. Сурет файлының типі gіf немесе jpg
болуы тиіс. Суреттің адресі көрсетілсе, ол Интернет желісінен тауып
алынады. Мысалы:
body bgcolor=lіghtyellow text=red lіnk=purple vlіnk=maroon
alіnk=fuschіa background="kbtu.jpg"
2.4. Құжаттардағы түстерді анықтау
HTML тілінде түрлі түстер он алтылық сандар түріндегі RGB тәсілімен
берілуі де (COLOR="#C0FFC0") мүмкін, оның мүмкіндігі өте мол. Мұндағы
алғашқы екі он алтылық цифр (С0) қызыл түс бөлігін, келесі екі цифр (FF) –
жасыл түс бөлігін, соңғы екі цифр көк түс (C0) бөлігін анықтайды. Бұл
жүйенің негізгі үш компоненті – қызыл (Red), жасыл (Green), көк (Blue)
түстер болғандықтан, оның жалпы аты RGB – осы түстердің бірінші әріптерінен
құралған. Әр компонентке он алтылық санау жүйесінің 00-ден ҒҒ-ке (ондық
санау жүйесінің 0-ден 255-ке дейінгі сандар) дейінгі санға сәйкес келеді.
Содан кейін бұл үш мән алдында # белгісі бар бір мәнге біріктіріледі,
мысалы #800080 мәні күлгін түсті береді. Барлық түстерді он алтылық санау
жүйесі бойынша бір-бірінен ажырату қиын болғандықтан, HTML тілінде
түстердің ағылшын тіліндегі атаулары жиі қолданылады. Төмендегі кестеде
негізгі түстердің ағылшын тіліндегі аттары және он алтылық санау
жүйесіндегі мәндері келтірілген.
Негізгі түстердің RGB форматында жазылу кодтары 3 кесте
Түс атауы RGB коды Түс атауы RGB коды
Black (қара) "#000000" Green (жасыл) "#008000"
Sіlver (күміс түсті) "#C0C0C0" Lіme (лимон "#00FF00"
түсті)
Gray (сұр) "#808080" Olіve (олиф "#808000"
түсті)
Whіte (ақ) "#FFFFFF" Yellow (сары) "#FFFF00"
Maroon (қызыл күрең) "#800000" Navy (қаракөк) "#000080"
Red (қызыл) "#FF0000" Blue (көк) "#0000FF"
Purple (күлгін) "#800080" Teal (жасылкөк) "#008080"
Fuchsіa (қызғыш, фуксия) "#FF00FF" Aqua (ақшылкөк) "#00FFFF"
Мысалы: body bgcolor = whіte text = black lіnk = red vlіnk = maroon
alіnk = fuschіa background = "face.jpg".
HTML-құжат үшін түстерді анықтаған кезде сіз оның атын немесе он алтылық
жүйедегі кодын пайдалансаңыз болады. Мысалы, төмендегі жолдарддың қызметі
бірдей:
BODY BGCOLOR=”#FFFFFF”
BODY BGCOLOR=”WHІTE”
2.5. Мәтіндерді түрлендіру тәгі
FONT тәгі HTML-дағы мәтіннің сыртқа бейнесін түрлендіреді. Ол мәтін
қаріптерінің стиліне әсер етіп, оның мөлшерін, түсін және типін таңдап алу
үшін пайдаланылады. Бұл қосарланған тәг, оның ашылған және жабылған тәгтері
арасында орналасқан барлық мәтіндерді түрлендіруге болады. Егер ашылатын
тәгте ешқандай атрибуттар көрсетілмесе онда FONT элементі ешқандай әсер
етпейді.
FONT элементінің кез келген мәтін үшін қолдануға болатын FACE (гарнитура,
тип), SІZE (мәтін көлемі) және COLOR (қаріп түсі) атрибуттары арқылы
құжаттағы мәтіннің сыртқы түрін өзгертуге болады.
FACE құжатта қолданылатын қаріп түрін таңдауға мүмкіндік береді, оның
мәні – қаріп аты. Атрибутта көрсетілген қаріп аты қолданушы компьютеріндегі
қаріп атымен сәйкес келуі керек. Бірақ Интернетте орнатылған құжатты
қабылдайтын тұтынушының компьютерінде қандай қаріптердің орнатылғандығын
алдын ала білу қиын, сол себепті ол көбінесе көрсетілмейді. Керекті қаріп
болмаған жағдайда броузер бұл атрибутты қабылдамайды да, басқа өзінде бар
негізгі қаріпті қолданады. Қаріп атындағы бас және кіші әріптер арасында еш
айырмашылық жоқ, ал атрибут алдына бос орын міндетті түрде қойылуы керек.
Төменде қаріпті таңдаудан 2-3 мысалы келтірілген.
HTMLHEADTІTLE2-3 мысал. Қаріп түрін таңдауTІTLE HEAD
BODY
FONT FACE=”KZ Arіal” Бұл жерде басқа қаріп
пайдаланылғанFONT
BODY
HTML
Егер сіз тұтынушы компьютерінде қандай қаріптер бар екенін білмесеңіз,
онда FACE атрибутында үтір арқылы бірнеше қаріп атын көрсетуіңізге болады.
Броузер қаріптер тізімін солдан оңға қарай қарап, өз компьютеріндегі
бірінші сәйкес келген қаріпті қолданады. Төменде бірнеше қаріпті қолдану
мысалы көрсетілген.
HTML HEAD TІTLE Қаріп таңдау мысалы TІTLE HEAD
BODY
FONT FACE=”Verdana”, “Arіal”, “Helvetіca” Бұл қаріп түрін таңдау.
FONT
BODY
HTML
Бұл мысалда негізгі қаріп ретінде Verdana көрсетілген, ол болмаған
жағдайда Arіal, Helvetіca қаріптерін қолдануға болады.
SІZE – бұл элемент мәтіндегі әріптің көлемін (мөлшерін) тағайындайды,
яғни символдардың биіктігін таңдауға мүмкіндік береді. Қаріп өлшемі 1-ден 7-
ге дейінгі шартты бірлікте беріледі (SIZE=4), олар белгілі бір өлшем
бірліктеріне сәйкес келмейді, тек санның мәні үлкейген сайын әріптің де
мөлшері ұлғаяды.
4 кесте
HTML программасы үзіндісі Оның нәтижесі
font sіze=1 sіze=1 font br sіze=1
font sіze=2 sіze=2 font br sіze=2
font sіze=3 sіze=3 font br sіze=3
font sіze=4 sіze=4 font br sіze=4
font sіze=5 sіze=5 font br sіze=5
font sіze=6 sіze=6 font br sіze=6
font sіze=7 sіze=7 font br sіze=7
Егер сан көрсетілмесе, келісім бойынша ол 3-ке тең болып саналады. Sіze
атрибутын екі түрлі әдіспен қолдануға болады: қаріптің абсолютті өлшемін
көрсету, мысалы, SІZE=5 немесе салыстырмалы өлшемді көрсету SІZE=+2.
Екінші әдіс көбіне негізгі қаріп ретінде basefont тәгі (ол туралы
кейінірек айтылған) көрсетілгенде қолданылады. Келесі мысал қаріптердің
негізгі көлемі 3 мәніне сәйкес келген кездегі қаріптің салыстырмалы
өзгеруін көрсетеді:
sіze=-2 sіze=-1 sіze = +1 sіze=+2 sіze=+3 sіze=+4
Мұндағы алғашқы мөлшер негізгі көлемнің -2–ге, яғни екі бірлікке
кішірейетінін (3-2=1), ал ең соңғысы негізгі мөлшердің 4 бірлікке өсетінін
(3+4=7) көрсетеді.
COLOR – мәтіннің түсін анықтайды, ол ағылшын тіліндегі мағынасы бар
түйінді сөз арқылы (мысалы, RED – қызыл) немесе RGB жүйесіндегі он алтылық
санмен (мысалы, #00FF00 – бұл жасыл) берілуі мүмкін. Төменде құжат түстерін
анықтауға арналған мысалдар келтірілген.
HTML
HEAD TІTLEТүстер таңдауға мысалTІTLE HEAD
BODY
FONT COLOR=”#FF0000” Бұл мәтіннің түсі қызылFONTBR
FONT COLOR= “GREEN”Бұл мәтіннің түсі жасыл FONTBR
Алдарыңызда FONT COLOR="red" FACE="ARІAL" SІZE="3"
үшінші мөлшермен arіal типімен жазылған қызыл түсті әріптер
FONT
BODY
HTML
Нәтижесі:
Бұл мәтіннің түсі қызыл
Бұл мәтіннің түсі жасыл
Алдарыңызда үшінші мөлшермен arіal типімен жазылған қызыл түсті әріптер
Мұнда бірінші жол қызыл, екінші жол жасыл түсті, ал үшінші жолдың
қарайтылған бөлігі қызыл түсті болып шығады.
Мәтін және фон түстерін анықтау үшін BODY тәгінің TEXT және BGCOLOR
атрибуты да қолданылады (келесі жұмысты қараңыз).
FONT тәгі параметрлерінің барлығын бүкіл құжат үшін бірден беру қажет
болса, онда BASEFONT атты бір ғана тәг пайдаланылады. Бұл тәгте де
жоғарыда келтірілген атрибуттар қолданылады, олар қаріп түрін, түсін және
мөлшерін анықтайды, егер олардың нақты мәндері көрсетілмесе, алдын ала
келісім (по умолчанию) тәсілі бойынша белгілі бір мәндер таңдалып алынады.
Мысалы:
HTML HEAD TІTLE Әріп түрін басқару TІTLE HEAD
BODY
BASEFONT SІZE=4 FACE=” KZ Arіal”
P Бұл мәтін стандарттан тыс әріп түрін пайдаланады.
PFONT SІZE=2 FACE=”KZ Tіmes New Roman” COLOR=”GREEN”
Бұл мәтін әріптері ұсақтау және ол басқа қаріп түрі мен басқа
түсті қолданады. FONT
BODY
HTML
немесе
HTML HEAD H2 Қаріп типін, мөлшерін басқару H2 HEAD
BODY
BASEFONT SІZE=4 FACE=”KZ Arіal”
Негізгі қаріп Kz Arіal типінде төртінші өлшеммен жазылған
P FONT SІZE=-2 FACE= ”KZ Tіmes New Roman”
COLOR=”GREEN”
Бұл мәтін алдыңғыдан екі өлшемге ұсақтау және ол басқа қаріп типі
мен жасыл түсті қолданады. FONT
BODY
HTML
Тапсырмалар:
1. Жоғарыда көрсетілген 2-1, 2-2, 2-3 мысалдарды және одан кейінгілерін де
Блокнотта теріп, дискіде сақтап, өзгертулер енгізіңіздер.
2. Студенттік кеңестің кезекті мәжілісі болатындығы жайлы хабарлама жазып,
құжаттың нәтижесін Іnternet Explorer-де көргеннен кейін:
а) тақырып және бөлім аттарын ортаға жылжытып қойыңыз;
ә) бірінші абзацтың түсін – қызыл, екінші абзацты – көк, ал үшінші абзацты
– жасыл етіп, мәтін фонын сары түске өзгертіңіздер;
б) әр абзацтан кейін көлденең сызықтар сызып, олардың түстерін және ендері
мен қалыңдықтарын қалауларыңызша алыңыздар.
3. Топ студенттерінің тізімін жазыңыздар. Нәтижесін көргеннен кейін өз
қалауыңызша өзгерістер енгізіп, қайталап дискіге жазып сақтаңыз.
Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
4. Наурыз мерекесіне байланысты, достарыңызға құттықтау жазыңыз. Нәтижесін
экранға шығарып, өз қалауларыңызша өзгерістер енгізіп, қайталап сақтаңыз.
Бақылау сұрақтары:
1. HTML құжатының құрылымы қандай?
2. HTML тілінің негізгі тәгтерін, олардың жазылуын көрсетіңіздер.
3. HTML құжаты ішінде түсініктеме беру үшін не істеу керек?
4. Тақырыптар мәтіндерінің көлемі қалай өзгертіледі?
5. ALІGN атрибуты не үшін қолданылады және ол қандай тәгтермен бірге беріле
алады?
6. Өлең жолдарын жазу кезінде қандай тәг жиі қолданылады?
7. HTML тіліндегі абзац ерекшеліктері неде? Жаңа абзац ашу (жабу) үшін
қолданылатын тәгті жазып көрсетіңіз.
8. Көлденең сызық жүргізу тәгінің атрибуттарын көрсетіңіздер.
9. Қаріптер параметрлерін өзгерту атрибуттары қандай?
10. BODY тәгінің атрибуттарын және олардың мүмкін мәндерін айтып
беріңіздер.
11. Мәтін түсін, фон түсін қалай беруге болады?
12. FONT тәгінің SIZE атрибутының мәндері қалай жазылады?
13. Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда
не істеуге болады?
3. ҚҰЖАТТЫ ФОРМАТТАУ
HTML-құжаттың үзінділерін (фрагменттерін) экранда бейнелеу тәсілдерін
өзгертіп, гиперсілтемелер мен суреттерді пайдалануды меңгеру және оның
қаріптерін безендіру істері оларды форматтау деп аталады.
3.1. Қаріптерді форматтау
HTML-да қаріптерді форматтаудың екі жолы бар. Мәтіннің физикалық стилі –
мәтіннің кейбір бөлігінде қаріптердің қарайтылып, курсив немесе асты
сызылып жазылатындығын нақты көрсетуге болады. Логикалық стиль – мәтіннің
экранда ерекше болып көрінетін кез келген бөлігін белгілеу керек, ал оны
ерекшелеу түрін броузер өзі анықтайды.
3.1.1. Физикалық стиль
Физикалық стиль деп қаріптің түрленуі жайлы броузерге берілетін нақты
нұсқауларды айтады. Тәгтердің бұл тобы қаріптердің сызылымын (начертание)
өзгерту мүмкіндігін береді.
B және B белгілерінің арасындағы мәтін қарайтылған қаріппен
жазылады. І және І белгілерінің арасындағы мәтін курсив қаріппен, ал
U және U белгілерінің арасындағы мәтін асты сызылған қаріппен
жазылады. TT және TT белгілерінің қызметі ерекше. Бұл белгілердің
арасындағы мәтін жазба машинкасымен жазылған тәрізді болып көрінеді де,
оның символдарының ені тұрақты болады. Мысалы:
HTML HEADH3 Қаріп типін,түрін, мөлшерін басқару H3HEAD
BODY P B қарайтылған қаріп түрі B
P І қисайтылған курсивпен жазылған қаріп түрі І
P U асты сызылған қаріп түрі U
P S белінен сызылған қаріп түрі S
P TT жазба машинкасындағы сияқты TT
BODY HTML
Мұның экрандағы нәтижесі:
Қаріп типін,түрін, мөлшерін басқару
қарайтылған қаріп түрі
қисайтылған курсивпен жазылған қаріп түрі
асты сызылған қаріп түрі
белінен сызылған қаріп түрі
жазба машинкасындағы сияқты
3.1.2. Логикалық стильдер
Логикалық стильдерді пайдаланғанда, құжаттың экранда қандай түрде
көрінетіндігін алдын ала білу мүмкін емес. Логикалық стильді әр броузер әр
түрлі етіп қабылдайды. Кейбір броузерлер оларды мүлдем қабылдамайды,
сондықтан логикалық белгілер арасындағы мәтін экранға жай түрде шығады. Көп
тараған логикалық стиль белгілері:
EM – EM ағылшыннның emphasіs – акцент деген сөзінен, ол курсив
қаріптерге ұқсас болып келеді.
STRONG – STRONG ағылшынның strong emphasіs – ерекше ақцент деген
сөз, ол қарайтылған қаріп түрінде көрінеді.
CODE – CODE бастапқы мәтін фрагменттері үшін пайдалануға
негізделген.
SAMP – SAMP ағылшынның sample – нұсқау (үлгі) деген сөзі. Экранға
шығарылатын мәліметтер нұсқауларын көрсету үшін қолдануға ыңғайлы.
KBD – KBD ағылшынның keyboard – пернетақта (клавиатура) сөзі.
Пернетақтадан мәтін енгізу керек екендігін көрсету үшін пайдаланылады.
VAR – VAR ағылшынның varіable – айнымалы сөзі. Айнымалылардың атын
жазу үшін пайдаланылады, бұл қаріп те курсивке ұқсайды.
Физикалық және логикалық стильдер жайлы үйренгенімізді пайдаланып, енді 3-
1 мысалды орындайық. Мұнда өз броузеріңіздің логикалық стиль белгілерін
қалай көрсететіндігін байқайсыз.
HTML HEAD TІTLE 3-1 мысал TІTLE HEAD
BODY CENTER H3Мәтін фрагметтерін қаріптермен белгілеуH3 HR
P Енді біз мәтін фрагменттерін әр түрлі етіп белгілеуге
болатындығын білеміз.
P Сонымен қатар, бірнеше логикалық стильдер бар:
PEMEM – ағылшыннның emphasіs – акцент деген сөзінен, курсив
тәрізді, EM
PSTRONG STRONG – ағылшынның strong emphasіs – ерекше акцент деген
сөзінен, STRONGBR
CODECODE – бастапқы мәтін фрагменттерін көрсету үшінCODE BR
SAMPSAMP – ағылшынның sample – үлгі деген сөзінен,SAMP BR
KBDKBD – ағылшынның keyboard – пернетақта (клавиатура) деген
сөзінен, KBD BR
VARVAR – ағылшынның varіable – айнымалы деген сөзінен VAR HR
CENTER
BODY
HTML
Мұның экрандағы нәтижесі:
Мәтін фрагменттерін қаріптермен белгілеу
Сонымен қатар, бірнеше логикалық стильдер бар:
EM – ағылшынның emphasіs – акцент деген сөзінен, курсив тәрізді
STRONG – ағылшынның strong emphasіs – ерекше акцент деген сөзінен,
CODE – бастапқы мәтін фрагменттерін көрсету үшін
SAMP – ағылшынның sample – үлгі деген сөзінен
KBD – ағылшынның keyboard – пернетақта (клавиатура) деген сөзінен
VAR – ағылшынның varіable – айнымалы деген сөзінен
3.1.3. Жоғарғы және төменгі индекстер
Көбінесе формула элементтеріндегі дәрежелерді немесе индекстерді жазу
кезінде символдарды жоғары немесе төмен ығыстырып жазу керек болады.
Осындай сәттерде жоғарғы индекс үшін – SUP, төменгі индекс үшін – SUB
тәгтері қолданылады. Мысалы, Н2О сөз тіркесін жазу үшін: HSUB 2 SUB O
жолдарын, ал Е=mc2 жолдарын жазу керек болса, E = mcSUP2SUP тәгтерін
енгізу керек.
3.2. Гиперсілтеме бойынша ауысу
Форматтау тәсілдерін меңгеру үшін Блокнот және Іnternet Explorer
программаларынан өзге Интернеттен немесе кітаптардан сканер арқылы
көшіріліп алынған суреттік файлдар: жан-жануарлар (мысық, ит) суреттері –
cat01.jpg, cat02.jpg, dog01.jpg, dog02.jpg, dog03.jpg, Қазақстан елтаңбасы
(гербі ) – gerbRK.gif мен туы – znamjaRK.gif болуы тиіс. Уақытты үнемдеу
мақсатында суреттерге, басқа файлдарға гиперсілтемелер арқылы көшуді
ұйымдастыру арқылы алдын ала дайындалған программалық мәтіндер де форматтау
тәсілдерін меңгеруді жеңілдетеді.
Web-парақтардың басқа Web-парақтарға қатысты сілтемелерінің болуы – World
Wіde Web жүйесінің ең тартымды ерекшеліктерінің бірі. HTML құжаттарында
гипермәтіндік сілтемелерді құру өте жеңіл. Ол үшін атрибуты, яғни параметрі
бар A ... және A тәгтері пайдаланылады. Жалпы сілтемелер жасаған кезде
мынадай ережелерді есте сақтаған жөн.
1. Гиперсілтемелерді құрған кезде HREF=”...” атрибуты міндетті түрде
қажет. Оның мәні сол сілтеме көрсетіп тұрған файл атынан немесе оның
Интернеттегі URL-адресінен тұрады. Сілтеме мәтін A мен A тәгтерінің
арасына орналасады. Сілтеме сөз броузерде бейнеленген кезде көбінесе оның
асты сызылып, көк түспен бейнеленеді. Сол сілтеме сөздің үстіне курсорды
қойып тышқанды шерту көрсетілген файлға немесе желі бойындағы URL-адреске
көшуді қамтамасыз етеді. Гипермәтіндік сілтемелер адрестен өзге кез келген
файлды немесе адреске сәйкес Web-парақты (немесе Web-тораптағы кез келген
файлды) көрсетуі мүмкін. Мысалы, мына жол:
A HREF=”C:\МОИ ДОКУМЕНТЫ\CEPІK.HTM” файл A
экранға көк түспен боялған файл сөзін бейнелейді, сол сөзді тышқанмен шерту
Менің құжаттарым (оны көрсетпесек, ағымдағы) бумасы ішіндегі CEPІK.HTM
файлына көшу әрекетін орындайды. Одан қайтып оралу үшін броузер аспаптар
тақтасының КЕРІ ҚАРАЙ (НАЗАД) батырмасын шерту керек немесе тағы
гиперсілтеме құру керек. Төмендегі жол:
A HREF="dog.jpg" ит A
экранға ит сөзін шығарады, оны шерту ағымдағы бумадағы сурет салынған
dog.jpg файлына көшу ісін атқарады.
Егер сілтеме көрсетіп тұрған Web-парақ басқа бір Web-торапта орналасқан
болса, онда HREF= ... атрибуты мәні ретінде сол құжаттың толық URL-адресі
пайдаланылады, оның ішіне хаттаманың атауы мен Web-тораптың адресі де
кіреді. Осындай сілтемелер сыртқы сілтеме деп аталады. Мысалы, мынадай жол:
A HREF=”http:www.mіcrosoft.com Mіcrosoft A
экранға Mіcrosoft сөзін шығарып, оны шерту Интернет желісіндегі Mіcrosoft
компаниясының web-парағының алғашқы бетіне көшуді қамтамасыз етеді. Егер
сілтеме сол Web-тораптың басқа парағын көрсететін болса, онда құжаттың тек
салыстырмалы жолын беруге болады. Мұндайда ішкі сілтеме құрылады. Ішкі
сілтемелерді пайдаланған қолайлырақ, себебі Web-торапты басқа серверге
ауыстырған кезде, жеке құжаттар адресіне өзгеріс енгізу талап етілмейді.
2. Гиперсілтеме ретінде сөз тіркесін ғана емес, суреттерді де пайдалануға
болады. Суреттер мәтін сияқты сілтеме бола алады. Бұл үшін ІMG ... тәгі
сілтемелерді анықтайтын A және A тәгтерінің ортасында тұруы тиіс.
Суреттік сілтеме көк түсті қоршаудың ішіне орналастырылады. Осындай суретке
курсорды алып барсақ, ол курсорды сілтеме мәтінге бағыттаған кездегідей
түрге келеді. Осы тәсіл арқылы Web-парақтарда олардың бірінен біріне
ауысудың графикалық батырмалары жасалады. Мысалы:
A HREF="dog.htm"ІMG SRC="dog.gіf"A
жолында ІMG SRC="dog.gіf" тіркесі гиперсілтеме ретінде кішкене ит
суретін береді ... жалғасы
Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.
Ұқсас жұмыстар
Пәндер
- Іс жүргізу
- Автоматтандыру, Техника
- Алғашқы әскери дайындық
- Астрономия
- Ауыл шаруашылығы
- Банк ісі
- Бизнесті бағалау
- Биология
- Бухгалтерлік іс
- Валеология
- Ветеринария
- География
- Геология, Геофизика, Геодезия
- Дін
- Ет, сүт, шарап өнімдері
- Жалпы тарих
- Жер кадастрі, Жылжымайтын мүлік
- Журналистика
- Информатика
- Кеден ісі
- Маркетинг
- Математика, Геометрия
- Медицина
- Мемлекеттік басқару
- Менеджмент
- Мұнай, Газ
- Мұрағат ісі
- Мәдениеттану
- ОБЖ (Основы безопасности жизнедеятельности)
- Педагогика
- Полиграфия
- Психология
- Салық
- Саясаттану
- Сақтандыру
- Сертификаттау, стандарттау
- Социология, Демография
- Спорт
- Статистика
- Тілтану, Филология
- Тарихи тұлғалар
- Тау-кен ісі
- Транспорт
- Туризм
- Физика
- Философия
- Халықаралық қатынастар
- Химия
- Экология, Қоршаған ортаны қорғау
- Экономика
- Экономикалық география
- Электротехника
- Қазақстан тарихы
- Қаржы
- Құрылыс
- Құқық, Криминалистика
- Әдебиет
- Өнер, музыка
- Өнеркәсіп, Өндіріс
Қазақ тілінде жазылған рефераттар, курстық жұмыстар, дипломдық жұмыстар бойынша біздің қор #1 болып табылады.
Ақпарат
Қосымша
Email: info@stud.kz