Сабақтың тақырыбы: Гипермәтіндік белгілеулердің принциптері HTML-тілінің синтаксисі мен құрылымы. HTML тілінің негіздері.

Жоспар:

• Құжаттардың құрылымы.

• HTML тілінің негіздері.

Құжаттардың құрылымы

HTML –да тегтік модельдер құжаттың белгілеулері болып табылады Тегтік модель құжатты тегпен басталып және аяқталатын контейнерлердің жиынтығы сияқты сипаттайды. Яғни НТМL құжаты қарапайым АSСII-файлы сияқты көрсетіледі .

Көбінесе НТМL құжаттарының тегтерін түсіну және қолдану оңай, өйткені олар ағылшын тілінің сөздерімен пайдаланылған қысқартуларды және белгіленулерді түсінеді. НТМL – тегі қажет емес тегтің атрибуттар тізімінен кейін болатын аттан құралады. Тегтің мәтіні бұрышты жақшалардан тұрады (< және >).Тегтің ең қарапайым оңай вариянты – бұрыштық жақшаларға негізделген аты. Мысалға: немесе . Қиын тегтер үшін, функцияның тегтерін видео өзгерту үшін автормен анықталған дәл мағынасы бар болатын атрибуттардың айырмашылығы сипатталады.

Тегтердің атрибуттары атымен жүреді және бір немесе бірнеше табуляциялардың белгілерімен біріншісі екіншісінен бөлінеді. Тегте атрибуттардың жазылу реті қажет емес. Атрибуттардың мағынасы, егер ондай бар болса, атрибуттардың атынан кейін тұратын теңдік белгісінен кейін тұрады. Егер атрибуттың мағынасы бір сөз немесе сан болса, онда оны қосымша белгілемей – ақ теңдік белгісінен кейін көрсетуге болады. Барлық қалған белгілеулерді бір (‘) немесе екі (“) тырнақшалармен аяқтау керек, әсіресе егер олар бірнеше пробелдармен бөлінген сөздерден тұрса. Атрибуттың ұзындығының мағынасы 1024 таңбамен шектелген. Атрибуттардың мағынасын айтуға болмайтын, тегтердің және атрибуттардың аттарында таңбалардың регистрі саналмайды. Мысалы, HREF атрибутының мағынасы ретінде басқа құжаттарда URL- ді енгізу кезінде керекті регистрді қолдану қажет.

Көбінесе НТМL-тегі арасында мәтін және құжаттардың басқа элементтері орнласатын бастапқы және соңғы компонеттерден тұрады.

Соңғы тегтің аты бастапқы тегтің атымен бірдей, соңғы тегтің алдына қисық сызық (/) таңбасы қолданылады. Мысалы : шрифт тегінің – курсив түрі үшін , оны жабатын қос былай белгіленеді - , ал тақырып тегі үшін <ТIТLЕ>, оны жабатын қос былай болады - . Соңғы тегтер ешқашан атрибуттардан тұрмайды. Тегтер мағынасы әмбебап программалау тіліндегі тырнақшалардағы "begin/end" түсінігіне жақын.

Жазылған тегті қолдану кезінде құжатта ерекше назар аударып отыру керек. Соңынан бастап біріншісіне дейін жазылған тегерді жауып отыру керек. Кейбіреуі автономды элементтер болғандықтан НТМL-тегтерінің соңы элементтерден тұрмайды.

Мысалы графикалық бейне құжатына қою үшін, бейне тегі қолданылады. Сондай-ақ автономды тегтерде жолдарды бөлу ( ), көлденең сызық (және қөрініс мазмұнына әсер етпейтін құжат туралы ақпараттан тұратын тегтер, мысалға: және .

Кейбір жағдайларда құжаттарда соңғы тегтерді жіберуге болады. Браузердің көпшілігі құжаттағы мәтінді Большинство браузеров реализованы так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. <Р>.

Ең көп таралған тег абзац тегі - өйткені оны құжаттарда өте жиі қолданады, кейде оны әр абзацтын басына қояды. Бір абзац біткен кезде, келесі тег браузерге: «Алдындағы абзацты аяқтап келесіні бастау керек» деп сигнал береді. Авторлардың көбі абзацтың соңғы тегін қолданбайды.

Басқада соңғы тегтер бар, браузерлер жақсы жұмыс істейтін. Мысалы НТМL-дың соңғы тегі . Дегенмен құжатты құруда шатаспау және қате кетірмес үшін соңғы тектерді мүмкіндігінше қолданып отыру керек.

HTML тілінің негіздері.

Web парақ құру үшін ең алдымен Іске қос (Пуск) – Программалар (Все программы) – Стандартные – Блокнотты іске қосу қажет. Сонда блокнот терезесі ашылады.

<

Программаны тергеннен соң, оны сақтау үшін Файл-Сохранить как командасын орындап оған өзіміз қалауымысша файл атын береміз. Бірақтан кеңейтімін *.txt емес *.html немесе *.htm деп сақтаймыз. Сонда біздің Web парағымызды Internet Explorer арқылы көруге болады. Сіз өзіңіздің Web парағыңызға өзгерістер енгізгіңіз келсе онда Вид-Просмотр HTML кода командасын немесе тінтуірдің оң жақ батырмасын басып Просмотр HTML кода командасын орындау жеткілікті. Өзіңізге қажетті мәліметті еңгізгеннен соң Файл-Сохранить командасын орындап, Обнавить немесе батырмасын басу қажет. Егер сіздің енгізген өзгерістеріңіз көрінбесе онда сіз бұл файлды сақтауды немесе Обнавить батырмасын басуды ұмытқан боларсыз.

HTML тілінің бастапқы мәтінді белгілейтін командалары белгі немесе тәг (tag) деп аталады. Тәг символдар тізбегінен тұрады. Барлық тәг "кіші" (<) символынан басталады да, "үлкен" (>) символымен аяқталады. Осындай кос символ тізбегі бұрыштық жақшалар деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз — тәг орналасады.

HTML тіліндегі әрбір тәг бір арнаулы қызмет атқарады. Олардың жазылуында әріптер регистрі ешбір рөл аткармайды, бас әріпті де, кіші әріптерді де қатар қолдана беруге рүқсат етілген. Бірақ тәг атауларын жай мәтіннен айыру мақсатында оларды бас әріппен жазу қалыптасқан.

HTML тілінің бір тәгі әдетте құжаттың белгілі бір бөлігіне, мысалы бір абзацқа ғана, әсер етеді. Осыған орай екі тәг қатар қолданылады: бірі - ашады, екіншісі - жабады. : Ашатын тәг белгілі бір әсер ету ісін бастайды, ал жабатын тәг - сол әсерді аяқтайды. Жабу тәгтері киғаш сызық символымен (/) басталуы тиіс.

Кейбір тәгтер өз жазылу орнына қарай тек бір ғана әсерін тигізеді. Мұндайда жабу тәгі қажет болмай қалады да, ол жазылмайды. Егер тәг ретінде HTML тілінде қолданылмайтын түйінді сөз жазылып кетсе, онда оның ешбір әсері болмайды.

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

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

HTML тәгтеріне мысалдар:

<НТМL>

<HEAD> Жалпы тақырып

<TITLE> Терезе тақырыбы </ TITLE >

</HEAD>

<BODY>

<Н1> 1-деңгейдегі бас тақырып мәтіні </Н1>

<Н2> 2-деңгейдегі ішкі тақырып мәтіні </Н2>

<Р> Мына жолдар екі-үш қатарға

бөлініп жазылғанымен олар бір жолға бірге жазылады.

<Р> Жабу тәгін жазбаса да болады. <Р> Абзац басы тәгі тек жаңа жолға көшіріп қана қоймай, жол арасына орын қалдырып отырады.

<HR> Горизонтал сызықтан кейінгі мәтін <BR> екі жолға бөлініп жазылған

</BODY>

</HTML>

HTML тәгтерінің қосарланып жазылуы:

<HTML> ... </HTML>

<В> ... </В>

<HEAD> ... </HEAD>

<НЗ> ... </НЗ>

<L1> ... </ LI>

HTML тәгтерінің жалқы жазылуы:

<BR> ... <HR> ... <FRAME> ...

HTML тәгтерінің атрибуттарымен бірге жазылуы:

<BODY BGCOLOR= «YELLOW» TEXT= «BLUE» > …

<HR COLOR=RED SIZE= 16 WIDTH-100%> …

HTML ҚҮЖАТ ЖАСАУ

Web-тораптардағы құжаттардың негізгі форматы Hypertext Markup Language (HTML) -гипермәтіндік белгілеу тілі. HTML тілі құжаттың бастапқы мәтініне (ASCII-файл) енгізілетін қарапайым командалар жиынынан түрады, олар осы кұжаттың экранда көрсетілуін басқаруға мүмкіндік береді. Сонымен, кез келген мәтіндік редакторда даярланып, қарапайым ASCII-форматында сақталған құжатқа бірсыпыра HTML командалары қосылғаннан кейін ол Web-парақ (HTML-құжат) болып шыға келеді.

Тәгтермен жұмыс істеу

HTML командалары тәг (tag) деп аталатын арнайы белгілер көмегімен беріледі. Арнаулы броузер программалар аркылы құжаттарды экранда көрсету кезінде тәгтер оларды басқару мүмкіндігін береді. Мұндай броузер (ағылшынша browse -қарап шығу) программалар, мысалы, Microsoft Internet Explorer немесе Netscape Navigator көрсеткі, шолушы деп те аталады.

Әрбір тәг "кіші" (<) және "үлкен" (>) символдарымен қоршалып жазылатын ағылшынның түйінді сөздерінен тұрады. Мысалы, <BR> — келесі жолға көшу тәгі.

Тәгтердің екі түрі болады:

• бір элементті (жалқы) тәг, белгілі бір әрекетті орындату үшін оны қажетті орынға жазып қою керек;

• екі элементті (қосарланған) тәг, бұл ашылу және жабылу тәгтері ортасындағы мәтінге ғана әсер етеді. Жабылу тәгі алдында "/" символы болуы тиіс. Мысалы, <BODY> және </ BODY> — құжат мәтінінің басталу және аяқталу белгілері.

Броузерлер жұмысы

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

HTML файлдары — *.htm немесе *.html деген тіркемесі (типі) бар кәдімгі мәтіндік файлдар. Сондықтан оны құрастыру үшін жай карапайым мәтіндік редактордың бірін, мысалы Windows ортасындағы Блокнотты (Notepad) пайдалана беруге болады, ал оның нәтижесін - Web-парақтарды экранда көру үшін Microsoft Internet Explorer броузерін қолданамыз.

HTML-файлды анықтау

HTML құжатының кез келгені <HTML> тәгінен басталып, соған сәйкес </HTML> түріндегі жабылу тәгімен аякталады. Осы екеуінің ортасында қүжаттың тақырыптық бөлігі мен тұлғасы болып келетін негізгі бөлігі орналасады:

<HTML>

...

құжат мәтіні

... </HTML>

Тақырыпты анықтау

Құжаттың тақырыптық бөлігі <HEAD> және </HEAD> тәгтерінің ортасында түрады да, жалпы құжат туралы мәлімет береді. Әдетте, бүл бөлікте <TITLE> ... </TITLE> тәгтерімен шектелетін қүжаттың терезе маңдайшасында тұратын ресми атауы орналасады. Көптеген броузерлер бұл атауды терезе тақырыбында тұратын файл аты есебінде пайдаланады. Бұл тәгтерді орналастыру реттілігі мынадай:

<HTML>

<HEAD>

<TITLE> Құжат тақырыбы </TITLE>

</HEAD>

...

құжат мәтіндері

...

</HTML>

Құжаттың негізгі тұлғасын анықтау

Жазылатын мәтіндерімен бірге HTML-құжаттың калған негізгі бөлігі <BODY> ... </ BODY> тәгтерінің ортасына жазылады. Ендігі құжат көрінісі мынадай түрде болады:

<HTML>

<HEAD>

<TITLE> Бұл кұжат тақырыбы </TITLE>

</HEAD>

<BODY>

...

құжат мәтіндері

...

</BODY> </HTML>

Қарапайым HTML файлын жасау

1. Өз жұмыс бумаларымыздың ішінен жаңадан жасалған Web-құжаттарды сақтайтын KURS бумасын ашамыз.

2. Блокнот (Notepad) программасын іске қосамыз.

3. Блокнот редакторы терезесінде төменде көрсетілген қарапайым HTML файлының мәтінін тереміз:

<HTML> <HEAD>

<TITLE> Алғашқы HTML файлы </ TITLE >

</HEAD>

<BODY>

Сәрсенбі күнгі сабақ кестесі

</BODY>

</HTML>

1 сурет

4. Файлды RASP.HTML атымен жұмыс бумасына сақтап қойып, Блокнот терезесін жауып тастаймыз.

5. Жасалған Web-құжатты көру үшін сол RASP.HTML файлы белгішесін екі рет шертеміз, сонда Microsoft Internet Explorer броузері іске қосылып, жазылған мәліметті 1 суреттегідей түрде көреміз.

Экрандағы мәтін орналасу түрін өзгерту

1. Қажет болса, алдыңғы бөлімінің 5 пунктін орындап шығамыз.

2. Енді Вид - В виде HTML (Источник) командасын орындау арқылы күжаттың алғашқы терілген HTML файлын Блокнот терезесінде көруге болады. Осы мәтіннін екінші жолына:

<Н2> Менің алғашқы парағым </Н2>

деген қосымпіа мәтін енгіземіз. Сонда файл мәтіні мынадай түрде бейнеленеді:

<HTML>

<HEAD>

<H2> Менің алгашқы парағым </Н2>

<TITLE> Алғашкы HTML файлы </TITLE>

</HEAD>

<BODY>

Сәрсенбі күнгі сабак кестесі

</BODY>

</HTML>

Осылай түзетілген мәтінді Файл - Сохранить командасы арқылы қайта дискіге жазып қояйып, Блокнот терезесін төменге жасырып, қайтадан Тапсырмалар тақтасында белгішесі көрініп тұрған Алғашқы HTML файлы атын шертіп, Microsoft Internet Explorer броузері терезесін ашып қоямыз.

Бақылау сұрақтары:

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

2. Қандай жұп емес тегтер бар?

3. Бір элементті (жалқы) тәг

4. HTML интерпретатор қалай жұмыс жасайды?

5. Гипермәтіндік белгілеу тілі қандай?

6. Қандай тег қосарланған тег?