Автор: Пользователь скрыл имя, 29 Марта 2013 в 12:45, лекция
Интернеттің бар мәліметтерінің, яғни барлық Web-құжаттарының бір ортақ қасиеті – олардың барлығы да HTML тілінде жазылған. HTML тілінде Web-құжаттарды жасау программалауға ұқсас болғанмен, ол қарапайым программалау тілі емес. HTML – гипермәтіндік белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.
Келесі тарауларда 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 – құжаттың ең қарапайым мысалы. Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер бар. Мәтін ішіне суреттер орналастыруға да болады. |
<H1>...</H1> – <Н6> ... </Н6>
<Hі> белгісі (мұндағы
і – 1-ден 6-ға дейінгі бүтін
сан) алты түрлі сатыдағы
<Р> ... </Р> немесе жалғыз <Р>
Бұндай қос белгі абзацты сипаттайды. Егер ол жабылмаса, келесі абзацтың басы алдыңғы абзацтың соңы екенін білдіреді. Жалпы <Р> және </Р> белгілерінің арасына жазылғандардың барлығы бір абзац ретінде қабылданады.
<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> <body><H1 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>
Бұл жолдардың нәтижесі төмендегідей (сызықтар түсі әр түрлі):
Құжаттың тақырыптан кейінгі негізгі бөлігі <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">
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”>
FONT тәгі HTML-дағы мәтіннің сыртқа бейнесін түрлендіреді. Ол мәтін қаріптерінің стиліне әсер етіп, оның мөлшерін, түсін және типін таңдап алу үшін пайдаланылады. Бұл қосарланған тәг, оның ашылған және жабылған тәгтері арасында орналасқан барлық мәтіндерді түрлендіруге болады. Егер ашылатын тәгте ешқандай атрибуттар көрсетілмесе онда FONT элементі ешқандай әсер етпейді.
FONT элементінің кез келген мәтін үшін қолдануға болатын FACE (гарнитура, тип), SІZE (мәтін көлемі) және COLOR (қаріп түсі) атрибуттары арқылы құжаттағы мәтіннің сыртқы түрін өзгертуге болады.
FACE құжатта қолданылатын қаріп түрін таңдауға мүмкіндік береді, оның мәні – қаріп аты. Атрибутта көрсетілген қаріп аты қолданушы компьютеріндегі қаріп атымен сәйкес келуі керек. Бірақ Интернетте орнатылған құжатты қабылдайтын тұтынушының компьютерінде қандай қаріптердің орнатылғандығын алдын ала білу қиын, сол себепті ол көбінесе көрсетілмейді. Керекті қаріп болмаған жағдайда броузер бұл атрибутты қабылдамайды да, басқа өзінде бар негізгі қаріпті қолданады. Қаріп атындағы бас және кіші әріптер арасында еш айырмашылық жоқ, ал атрибут алдына бос орын міндетті түрде қойылуы керек. Төменде қаріпті таңдаудан 2-3 мысалы келтірілген.