HTML құжаттарының құрылымы

Жұмыс түрі: Материал
Тегін: Антиплагиат
Көлемі: 20 бет
Таңдаулыға:

Мазмұны
WORLD WIDE WEB ЖӘНЕ HTML тiлi 1
HTML тiлiнiң атқаратын қызметi 2
HTML командалары 3
Тэг атрибуттары 4
Түсiнiктемелер 4
HTML құжаттарының құрылымы 5
Құжаттың функционалдық бөлiктерiн анықтау 6
Құжаттың негiзгi бөлiгi 8
Web-парақтардағы суреттер 13
Мәтiн фрагменттерiн логикалық стильмен безендiру 18
Қабаттастырылған iшкi тiзiмдер 20
Гиперсiлтеме бойынша ауысу-A тэгi 22

WORLD WIDE WEB ЖӘНЕ HTML тiлi

Интернеттiң қазiргi дамуы 90-жылдар басында компьютерлер арасында
мәлiмет алмасудың жаңа хаттамасы (protocol) пайда болғаннан кейiн
басталды. Бұл хаттама HTTP (Hyper Text Transfer Protocol-гипермәтiндi
тасымалдау хаттамасы) деп аталған болатын. Осы хаттамамен қатар HTTP
серверлерiнiң кеңейтiлген желiлерi болып табылатын, Интернет арқылы файлдар
тасымалдай алатын
World Wide Web қызмет бабы (WWW немесе тек Web) пайда болады.
Бұл файлдардың басым көпшiлiгi Web-парақтар түрiнде HTML (Hyper Text
Markup Language- гипермәтiндi белгiлеу тiлi) тiлiнде жазылған арнаулы
файлдар түрiнде болады. Осы файлдар HTTP серверлерiнде (Web-тораптарында)
орналастыру жолымен Web-парақтар қалың көпшiлiк пайдалатындай түрде
Интернетте жарияланады. Web-парақтар мазмұны әртүрлi бола бередi және олар
әртүрлi тақырыптарды қамтиды, бірақ олардың бәрiнiң де негiзгi жариялану
яғни жазылу тiлi HTML болып табылады. Осындай HTML құжаттарының бәрiнiң де
файл аттарының кеңейтiлуi HTM немесе HTML болуы тиiс.
HTML тiлi World Wide Web қызмет бабымен бiрге дами отырып, Web-парақтарының
ең жақсы деген мүмкіндiктерiн жүзеге асырып, оны кең пайдалану жолдарымен
толықтырылып отырылды. Ол World Wide Web жүйесiнiң негiзi бола отырып, оның
өте кең тарауына себепшi болды. World Wide Web сөзi қазақ тiлiне
кеңейтiлген бүкiләлемдiк өрмек болып аударылады. HTML тiлiнiң мағынасы мен
атқаратын қызметiн оның атынан анықтауға болады.
Гипермәтiн-қосымша элементтердi басқару мақсатында iшiне арнаулы код,
яғни екпiндi элемент (anchor) орналасқан мәтiн. Ол мәтiн iшiне сурет, дыбыс
енгiзу, мәтiндi безендiру, пiшiмдеу iсiн орындайтын немесе осы құжаттың
басқа бөлiгiне сiлтемелi бар алғашқы нүкте ретiнде қарастырылатын
белгiленген сөз. Сөздi ерекшелеп белгiлеу дегенiмiз-келесi көрсетiлетiн
құжат бөлiгi қалай бейнеленетiнiн анықтайтын айрықша кодты осы сөз iшiне
енгiзу. Гипермәтiндi бейнелеу үшін броузер (browsers) деп аталатын арнайы
көрсету программалары қолданылады. Гипермәтiн экранда белгiленген қарапайым
сөз ретiнде тұрады, егер курсорды сол сөзге жеткiзiп, тышқанды шертсек
(Enter пернесiн бассақ), онда сонымен байланысты (ол сiлтеп тұрған) басқа
құжатты оқимыз. Ол құжаттар мәлiметтер iшiндегi басқа парақтарда немесе Web
жүйесiндегi басқа тораптарда орналасып, бейнежазба, сурет, жазылған дыбыс
күйiнде болуы мүмкін.
Сонымен, мәтiндердi осылай байланыстыра отырып белгiлейтiн мүмкіндiктi
беретiн HTML тiлi. Оның дұрыс нәтиже алуды қамтамасыз ететiн өз
заңдылықтары мен ережелерi бар.

HTML тiлiнiң атқаратын қызметi

Web парақтары экранда ықшам түрде безендiрiлiп көрсетiлмеген . HTML
тiлi мәтiндердi пiшiмдеп көрсететiн тiлге жатпайды. өйткенi әрбiр тұтынушы
әртүрлi компьютерлердi пайдаланады. Сол себептi жаңа ғана зауыттан шыққан
бiр компьютердiң Windows жүйесiнде жұмыс iстей алатын броузерi бар болса,
екiншi бiр тұтынушы компьютерi тек MS-DOS жүйесiнде жұмыс iстейтiн ескi
броузердi пайдалануы мүмкін. Бұл екеуiнiң көрсету мүмкіндiктерi әртүрлi
болғандықтан, бiр файл екеуiне екi түрлi болып көрсетiледi. Ал үшіншi
компьютердегi Web парақтарың мәтiндерi зағиптарға арналған Брайль қарiптерi
арқылы берiлсе, оның нәтижесi тiптi басқаша болады.
HTML тiлiнде пiшiмдеу тәсiлдерiнiң де бар екенiн айтып кету керек,
бірақ жалпы тұрғыдан алғанда құжаттың мазмұны мен оны безендiрiп көрсету
жолдарының айырмашылығы сақталып отырады. Мысалы, HTML тiлiнiң соңғы [4.0]
нұсқасында мәтiндi пiшiмдеу командаларын пайдалану ұсынылмаған.

HTML командалары

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

Тэг атрибуттары

Көбiнесе ашылу тэгтерiнiң тигiзетiн әсерлерiн түрлендiретiн олардың
атрибуттары болады. Атрибуттар немесе сипаттамалар –тэг атауының және бiр-
бiрiнен бос орын арқылы бөлiнiп жазылатын қосымша түйіндi сөздерден тұрады.

Кейбiр атрибуттар оның мәнiн жазуды талап етедi. Атрибут мәнi оның
түйіндi сөзiнен теңдiк (=) арқылы бөлiнiп жазылады. Атрибут мәнi
қостырнақшаға алынып жазылуы тиiс, бірақ кейде қостырнақшаны жазбаса да
болады.
Жабылу тэгтерiнiң ешқашанда атрибуттары болмайды.

Түсiнiктемелер

Программалау тiлдерiнде түсiнiк беретiн сөздер-комментарийлер
жазылатыны сияқты мұнда да программаның орындалуына еш әсер етпей, оны
түсiнудi жеңiлдететiн түсiнiктеме мәтiндер жазып отыруға болады.
HTML тiлiнiң комментарийлерi арнайы символдардан !—басталады да,
түсiнiк беретiн мәтiн осыған жалғаса жазылады. Түсiнiктеме мәтiн соңына -
символдары жазылуы тиiс. Түсiнiктеме мәтiн “үлкен ” таңбасынан () өзге кез
келген символдардан құрастырыла бередi.
HTML тэгтерiне мысалдар:
title Body Table A img Cen Ter
HTML тэгтерiнiң қосарланып жазылуына мысалдар:
HTML HTML
B B
HEAD HEAD
H3 H3
ADDRESS ADDRESS
LI LI

HTML тэгтерiнiң жалқы жазылуына мысалдар:
BR HR META BASEFONT INPUT
HTML тэгтерiнiң атрибуттарымен бiрге жазылуына мысалдар:
BODY BGCOLOR=”#000000” TEXT #FFFFFF” BASK ROUND = “RAIN. G1F”
OPNION SELECTED
FRAME SRC=”file. html” NORESIZE

HTML құжаттарының құрылымы

HTML құжаты сол құжаттың негiзгi мәтiнiнен және белгiлеу тэгтерiнен
тұрады да, қарапайым символдар жиыны болып табылады. Сондықтан оны
құрастыру үшін жай мәтiндiк редактордың бiрiн, мысалы, Windows ортасындағы
Блокнотты пайдалана беруге болады.
1. HTML құжатының кез келгенi HTML тэгiнен басталып, соған сәйкес
HTML түрiндегi жабылу тэгiмен аяқталады. Осы екеуiнiң ортасында
құжаттың тақырыптық бөлiгi мен тұлғасы болып келетiн негiзгi бөлiгi
орналасады.
2. Құжаттың тақырыптық бөлiгi HEADжәне HEAD тэгтерiнiң ортасында
тұрады да, жалпы құжат туралы мәлiмет бередi. Әдетте, бұл бөлiктi
TITLE TITLEтэгтерiмен шектелетiн құжаттың ресми атауы
орналасады. Көптеген броузерлер бұл атауды терезе тақырыбында
тұратын файл аты есебiнде пайдаланады.
3. Жазылатын мәтiн құжат тұлғасы деп аталатын BODY BODY тэгтерiнiң
ортасына жазылады.
Осы айтылған төрт тэг HTML құжатының кез келгенiнде болуы тиiс.
Бірақ HTML,TITLE тэгтерiн жазбай кетсе де болады, дегенмен HTML
тiлiнiң құрылымы олардың толық болуын талап етедi. өйткенi алдын ала
тұтынушының қандай броузер пайдаланатыны, оның қалай жұмыс iстейтiнi
программа құрушыға белгiсiз болады ғой.
Ендi қарапайым түрде дұрыс құрастырылған HTML құжатын мысал
ретiнде келтiре кетейiк.
HTML
HEAD
TITLE Құжат тақырыбы TITLE
HEAD
BODY
Бұл мәтiн экранға шығады
HTML
Осы құжат жұмысы нәтижесiнде экранға мынадай мәтiн ғана шығады:
Бұл мәтiн экранға шығады

Құжаттың функционалдық бөлiктерiн анықтау

HTML тiлi құжаттың функционалдық жеке бөлiктерiн сипаттауға
арналған. Көптеген құжаттарда негiзгi функционалдық бөлiктер ретiнде
тақырыптар мен абзацтар қарастырылады.
1 HTML тiлi құжаттардың iшкi тақырыптарының көлемiне қарай алты түрлi
деңгейiн жасай алады. Олар H1және H1 тэгтерiнен басталып, H6 және
H6 тэгтерiне дейiн жалғасады. Компьютер экранында олар әртүрлi
мөлшердегi қарiптермен көрсетiледi.
HTML тiлiнiң идеологиясы бойынша тақырып болып келетiн кез келген мәтiн
осы тэгтердiң бiрiмен бейнеленуi тиiс. Бірақ тэгсiз де мәтiн әрiптерiн
үлкейтiп жазатын басқа мүмкіндiктер де бар
1.Жаңа жолдан басталатын абзацтарды белгiлеу үшін P тэгi ( жабу тэгi
P) қолданылады. Бiр абзацты жаппай жаңа абзац бастап кетсек, алдыңғы
абзац автоматты түрде жабылады. Сондықтан көбiнесе P түрiндегi жабу тэгiн
жазбаса да болады. HTML тiлiнде абзац азат жолдан басталмайды, тек абзацтар
арасына бiр бос жол қалдырып кетедi. Көбiнесе абзацтарды анық етiп бөлiп
тұру үшін көлденең сызық қойылады. Горизонталь сызық қою HR тэгiмен
көлденең орындалады, оның жабу тэгi болмайды.
2. Сөздер арасына қойылған бiрнеше бос орын таңбаларының тек бiреуi ғана
көрiнiп тұрады да, басқалары жойылып кетедi. Сол сияқты келесi қатарға
көшiретiн Enter пернесiн басу таңбасы да HTML тiлiнде ешбiр әсер етпейдi.
1.Егер абзац жасап бос жол қалдырмай, жаңа жолға көшу қажет болса, онда
парсыз жалғыз қолданылатын BR тэгiн қолдану керек.
HTML
HEAD
TITLEҚұжаттың функционалдық бөлiктерi TITLE
HEAD
BODY
H1 1-деңгейдегi бас тақырып H1
H2 2-деңгейдегi iшкi тақырып H2
H Мына жолдар екi-үш қатарға бөлiнiп жазылғанымен олар
бiр жолға бiрге жазылады.
P Жабу тэгiн жазбаса да болады. P Абзац басы тэгi
тек жаңа жолға көшiрiп қана қоймай, жол арасына орын қалдырып отырады.
NR Горизонталь сызықтан кейiнгi мәтiн BR екi жолға
бөлiнiп жазылған
BODY
HTML

Құжаттың негiзгi бөлiгi

Құжаттың тақырыптан кейiнгi негiзгi бөлiгi BODY BODY тэгтерiнiң
ортасында орналасады. Мұнда көптеген атрибуттар, яғни параметрлер болады.
Олардың әрқайсысы құжаттың фонын, әрiптерi түсiн, гиперсiлтемелер түсiн
т.б. анықтайды. Бұл тэгтiң негiзгi атрибуттары: BACKGROUND, BGCOLOR, TEXT,
LINK, VLINK және ALINK. Олар төмендегi түрде жазылады: BODY 1-
параметр=мәнi 2-параметр=мәнi 3-параметр=мәнi... құжаттың негiзгi
тұлғасы...
BODY
1.Параметрлер тiзiмiн толық берудiң қажетi жоқ, көбiнесе олардың бiрде
бiреуi болмауы да мүмкін, мұндайда олардың алдын ала келiсiм бойынша
бекiтiлген мәндерi қолданылады.
BGCOLOR-құжаттың жалпы мәтiнiнiң фоны түсiн анықтайды. Фон түсi ағылшын
тiлiндегi аттарымен немесе он алтылық сандар түрiнде RGB тәсiлiмен
берiледi. Олар жайында кейiнiрек айтылады.
Мысалы:
body bgcolor =”yellow” мұнда фон сары түстi болады.
TEXT - мәтiн „рiптерiнiң түсiн анықтайды, егер ол жазылмаса, келiсiм
бойынша қара түс қабылданған. Фон түсiн өзгерткенде соған үйлесiмдi
символдар түсi бекiтiледi. Бұл да ағылшын тiлiндегi аттарымен немесе он
алтылық сандар түрiнде RGB тәсiлiмен берiледi.
LINK-гипермәтiндiк сiлтеме ретiнде қабылданған сөз тiркесiнiң түсiн
белгiлейдi. Егер көрсетiлмесе, ол көк түс болып саналады.
VLINK-пайдаланылған гипермәтiндiк сiлтеме түсiн анықтайды. Келiсiм
бойынша ол қызылқоңыр түс болып саналады.
ALINK- гипермәтiндiк сiлтеменi курсор көрсетiп тұрған кездегi оның
түсiн белгiлейдi. Бұл параметр өте сирек өзгертiледi.
BACKGROUND-мәтiннiң фонында орналасатын суреттi анықтайды, ол түсқағаз
рөлiн атқарады. Суреттiк файлдың типi gif немесе jpg болуы тиiс.
Суреттiң адресi көрсетiлсе, ол Интернет желiсiнен тауып алынады.
Мысалы:
body bgcolor = lightyellow text=red link= purple vlink=maroon
alink=fuschia background=”face.jpg”
2. HTML тiлiнде түрлi он алтылық сандар түрiндегi RGB тәсiлiмен берiлуi де
(COLOR=”# COFFCO”), мүмкін, оның мүмкіндiгi өте мол. Мұндағы алғашқы екi
сан қызыл (Red) түс бөлiгiн келесi екi сан-жасыл түс (Green) бөлiгiн, соңғы
екi сан көк (Blue) түс бөлiгiн анықтайды. Жоғарыдағы көптеген параметрлер
түстi пайдаланады, олар ағылшын тiлiндегi негiзгi он алты түс атымен немесе
солардың кодтарымен төмендегiдей түрде берiледi.

Black=”#000000”қара Green=”#008000”жасыл
Silver=”#COCOCO”күмiс түстi Lime=”#00FF00” лимон түстi
Gray=”#808080”сұр Olive=”#80800” кофе түстi
White=”#FFFFFF” ақ Yellow=”#FFFF00” сары
Maroon=”#800000” қызылкүрең Navy=”#000080”қаракөк
Purple=”#800080” күлгiн Blue=”#0000FF”көгiлдiр
Red=”#FF0000” қызыл Teal=”#008080” шай түстi
Fuchsia=”#FF00FF” қызғыш Aqua=”#00FFFF” көк

1.Келесi жолға көшу BR арқылы орындалады. Ол параметрсiз жалқы
қолданылатын, яғни жабылмайтын тэг болып табылады. Мысалы:
BR Абай Құнанбаев BR Мұхтар Әуезов BR Сәкен Сейфуллин
Бұл жолдар экранға мынадай мәлiметтер шығарады:
Абай Құнанбаев
Мұхтар Әуезов
Сәкен Сейфуллин
Ал мына жолдар:
PМына жолдар екi-үш қатарға бөлiнiп жазылғанымен олар бiр жолға бiрге
жазылады
экранға мынадай мәлiметтер шығарады:
Мына жолдар екi-үш қатарға бөлiнiп жазылғанымен олар бiр жолға бiрге
жазылады
BR тэгi өлең жолдарын жазуға өте қолайлы, мысалы:
Көзiң қайда көшееден iздеген. BR сөзiң қайда екеуiмiз егiз деген.
BR
Терезеңнiң алдына келiп тұрмын, BR Кептердей қысты күнi жем iздеген.
2.HR тэгi экран бетiнде көлденең сызық жүргiзедi. Ол параметрсiз
қолданылса, төмендегiдей көлденең жолды толық алып тұрған сызық жүргiзедi:

Ал параметр арқылы оның түсiн (COLOR=түс) ұзындығын (WIDTH=пайызбен)
және қалыңдығын (SIZE=пиксельдер) өзгертуге болады. Төменде бiрнеше
көлденең сызықтардан мысал келтiрiлген:

HTML
HEAD
titleсызықтар title
HEAD
BODY
H1Бiрнеше көлденең сызықтар:Н1
HR COLOR=RED SIZE=2 WIDTH=100% BR
HR COLOR=GREEN SIZE=4 WIDTH=50%BR
HR COLOR=BLUE SIZE=8 WIDTH=25%BR
HR COLOR=BLACK SIZE=16 WIDTH=12%BR
BODY
HTML
Бұл жолдардың нәтижесi төмендегiдей:

Гипермәтiндiк сiлтемелердi ұйымдастыру

Web-парақтардың басқа Web-парақтарға қатысты сiлтемелерiнiң болуы-World
Wide Web жүйесiнiң ең тартымды ерекшелiктерiнiң бiрi. HTML құжаттарында
гипермәтiндiк сiлтемелердi құру өте жеңiл. Ол үшін атрибуты, яғни параметрi
бар ашылатын A...және қарапайым жабылатын A тэгтерi пайдаланылады.
Жалпы сiлтемелер жасаған кезде мынадай ережелердi есте сақтаған жөн.
1.Гиперсiлтемелердi құрған кезде HREF=”.. “ атрибуты мiндеттi түрде
қажет. Оның мәнi сол сiлтеме көрсетiп тұрған файл атынан немесе оның URL-
адресiнен тұрады. Сiлтеме мәтiн A мен A тэгтерiнiң арасына
орналасады.Сiлтеме сөз броузерде бейнеленген кезде көбiнесе оның асты
сызылып, көк түспен бейнеленедi. Сол сiлтеме сөздiң үстiне курсорды қойып
тышқанды шерту көрсетiлген файлға немесе желi бойындағы URL-адреске көшудi
қамтамасыз етедi. Гипермәтiндiк сiлтемелер адрестен өзге кез келген файлды
немесе адреске сәйкес. Web-парақты көрсетуi мүмкін. Мысалы, мына жол:
A HREF=”C:Мой документыСерiк. HTML”файл A экранға көк түспен
боялған файл сөзiн бейнелейдi, сол сөздi тышқанмен шерту Менiң құжаттарым
бумасы iшiндегi Серiк. HTM файлына көшу әрекетiн орындайды. Одан қайтып
оралу үшін броузер аспаптар панелiнiң керi қарай батырмасын шерту керек.
Төмендегi жол:
A HREF=”dog.jpg” ит A
экранға ит сөзiн шығарады, оны шерту ағымдағы бумадағы сурет салынған
dog.jpg файлына көшу iсiн атқарады.
Егер сiлтеме тұрған Web-парақ басқа бiр Web-торапқа орналасқан болса
онда HREF=... атрибуты мәнi ретiнде сол құжаттың толық URL-адресi
пайдаланылады, оның iшiне хаттаманың атауы мен Web-тораптың адресi де
кiредi. Осындай сiлтемелер сыртқы сiлтеме деп аталады. Мысалы, мынадай жол:
A HREF=”http:www. microsoft. com Microsoft A экранға Microsoft
сөзiн шығарып, оны шерту Интернет желiсiндегi Microsoft компаниясының Web-
парағының алғашқы бетiне көшудi қамтамасыз етедi. Егер сiлтеме сол Web-
тораптың басқа парағын көрсететiн болса, онда құжаттың тек салыстырмалы
жолын беруге болады. Мұндайда iшкi сiлтеме құрылады. Iшкi сiлтемелердi
пайдаланған қолайлырақ, себебi Web-торапты басқа серверге ауыстырған
кезде, жеке құжаттар адресiне өзгерiс енгiзу талап етiлмейдi.
2. Гиперсiлтеме ретiнде сөз тiркесiн ғана емес, суреттердi де
пайдалануға болады. Суреттер мәтiн сияқты сiлтеме бола алады. Бұл үшін
IMG... тэгi сiлтемелердi анықтайтын A және A тэгтерiнiң арасында
орналастырылады. Суреттiк сiлтеме көк түстi қоршаудың iшiне
орналастырылады. Осындай суретке курсорды алып барсақ, ол курсорды сiлтеме
мәтiнге бағыттаған кездегiдей түрге ... жалғасы

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