1. Студенттік кеңестің кезекті мәжілісі болатындығы жайлы хабарлама жазыңыз. Сол құжаттың нәтижесін Іnternet Explorer-де көргеннен кейін, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
2. Топ студенттерінің тізімін жазыңыз. Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
3. Наурыз мерекесіне байланысты, Қазақстан халқына құттықтау жазыңыз. Нәтижесін экранға шығарып, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.
Бақылау сұрақтары
1. Тәг дегеніміз не?
2. Құжаттың басында және соңында қандай тәгтер болуы тиіс?
3. Құжаттың тақырыбы қай тәгпен қоршалып тұрады?
4. HTML сөзі нені білдіреді?
5. <tіtle> ... </tіtle>тәгтері не үшін қажет?
6. HTML құжатының негізгі мазмұндық бөлігін қандай тәг қоршап тұрады?
7. Символдар көлемін өзгерту үшін қай тәг қолданылады?
8. Атрибут деген не?
9. ALІGN атрибуты қай тәгте және не үшін қолданылады?
10.<P> тәгі не істейді?
11.<BR>тәгі қандай қызмет атқарады?
12.Қандай тәгтерді жалғыз қолдана аламыз?
13.<HR>тәгі не істейді және оның атрибуттары қандай?
14.<FONT> тәгі не істейді және оның атрибуттары қандай?
15.Символдар түсін өзгерту үшін не істейміз?
16.Қаріп (шрифт) типін қалай өзгертеді?
17.<BASEFONT> тәгі не үшін керек?
18.Символдар көлемін өзгертетін екі түрлі тәг бар, олар атауы мен жазылуы қандай?
№1б ЛАБОРАТОРИЯЛЫҚ ЖҰМЫС
1. Қаріптерді форматтау
HTML-да қаріптерді форматтаудың екі жолы бар. Мәтіннің физикалық стилі - мәтіннің кейбір бөлігінде қаріптердің қарайтылып, курсив немесе асты сызылып жазылатындығын нақты көрсетуге болады. Логикалық стиль – мәтіннің экранда ерекше болып көрінетін кез-келген бөлігін белгілеу керек, ал оны ерекшелеу түрін браузер өзі анықтайды. Мысал:
1.1. Физикалық стиль
Физикалық стиль деп қаріптің сызылымы жайлы браузерге берілетін нақты нұсқауларды айтады.
Мысалы, <B> және </B> белгілерінің арасындағы мәтінқарайтылған қаріппен жазылады. <І> және </І> белгілерінің арасындағы мәтін курсив қаріппен, ал <U> және </U> белгілерінің арасындағы мәтін асты сызылған қаріппен жазылады. <TT> және </TT> белгілерінің қызметі ерекше. Бұл белгілердің арасындағы мәтін жазба машинкасымен жазылған тәрізді болып көрінеді, демек, символдарының тұрақты өлшемі бар.
1.2. Логикалық стильдер
Логикалық стильдерді пайдаланғанда, құжаттың экранда қандай түрде көрінетіндігін алдын ала білу мүмкін емес. Логикалық стильдің белгілерін әр баузер әр түрі қабылдайды. Кейбір браузерлер белгілерді мүлдем қабылдамайды, сондықтан логикалық белгілер арасындағы мәтін экранда жай түрде шығады. Көп тараған логикалық стиль белгілері:
<EM> – </EM>ағылшыннның emphasіs – акцент деген сөзінен, демек курсив.
<CODE> – </CODE>бастапқы мәтін фрагменттері үшін пайдалануға негізделген.
<SAMP> – </SAMP>ағылшынның sample- нұсқау (образец). Экранға шығарылатын мәліметтердің нұсқауларын көрсету үшін қолданыуға ыңғайлы.
<KBD> – </KBD>ағылшынның keyboard – пернетақта (клавиатура). Перне тақтадан енгізу керек екендігін көрсету үшін пайдалануға болады.
<VAR> – </VAR>ағылшынның varіable – айнымалы (переменная). Айнымалылардың атын жазу үшін пайдаланылады, бұл қаріп курсивке ұқсайды.
Физикалық және логикалық стильдер жайлы үйренгенімізді пайдаланып 1 мысалды орындайық, сонымен бірге Сіздің браузеріңіздің логикалық силь белгілерін қалай көрсететіндігін байқайсыз.
<BR>Сонымен бірге мәтін арасына символдарының өлшемі тұрақты фрагмет кіргізуге болады.
<TT>(қол жазба машинкасын имитациялау) </TT> <HR>
<P>Сонымен қатар, бірнеше логикалық стильдер бар:
<P><EM> EM –ағылшыннныңemphasіs – акцент деген сөзінен, курсив тәрізді</EM> <BR>
<STRONG> STRONG –ағылшынныңstrong emphasіs – ерекше акцент деген сөзінен, қарайтылған қаріппен бірдей</STRONG> <BR>
<CODE> CODE –бастапқы мәтін фрагменттерін көрсету үшін </CODE> <BR>
<SAMP> SAMP –ағылшынныңsample – нұсқау (образец) деген сөзінен</SAMP> <BR> <KBD> KBD –ағылшынныңkeyboard – пернетақта (клавиатура) деген сөзінен </KBD> <BR>
<VAR>VAR –ағылшынныңvarіable – айнымалы деген сөзінен</VAR> <HR> </CENTER></BODY> </HTML>
2. Құжат тұлғасы
<BODY> және </BODY> тегтерінің арасында құжаттың негізгі мазмұны орналасады. Құжат тұлғасының атрибуттар арқылы берілген өлшемдері болуы мүмкін. <BODY> тәгінің негізгі атрибуттары:
bgcolorҚұжат фоныныңтүсін анықтайды.
text Мәтін түсін анықтайды.
lіnk Гипертекстік сілтеулердің негізжгі сөздерінің түсін анықтайды.
vlіnk Пайдлаланылған гипертекстік сілтеулердің түсін анықтайды.
alіnk Гипертекстік сілтеуге басқан кездегі түсін анықтайды.
background Фон қызметін атқаратын суретті анықтайды, демек обой суреті.
HTML-да бояу түрлері оналтылық санау жүйесінің коды бойынша беріледі. Бұл жүйенің негізгі үш компоненті - қызыл (Red), жасыл (Green), көк (Blue) түстер және оның жалпы аты RGB – ол осы түстердің бірінші әріптерінен құралған. Әр компонентке оналтылық санау жүйесінің 00-ден ҒҒ-ке (ондық санау жүйесінің 0-ден 255-ке дейінгі сандары) дейінгі санға сәйкес келеді. Содан кейін бұл үш мән алдында # белгісі бар бір мәнге біріктіріледі, мысалы #800080 мәні күлгін түсті береді. Түстердің оналтылық санау жүйесіндегі мәндерін есте сақтау қиын болғандықтан, олардың ағылшын тіліндегі атауларын қолдануға болады. Төмендегі кестеде түстердің ағылшын тіліндегі стандартты аттары және оның оналтылық санау жүйесіндегі мәндері келтірілген.
Аты
коды
Аты
Коды
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”>
3. Гиперсілтеме бойынша ауысу - <A> (анкер) тәгі
HTML-да мәтіннің бір фрагментінен екіншісіне ауысу үшін
<A HREF="[ауысу адресі]"> мәтіннің белгіленген фрагменті </A>
тәгінің көмегімен орындалады. [ауысу адресі] параметрінің орнына аргументтердің бірнеше түрін қолдануға болады. Ең қарапайымы – ауысатын HTML-құжаттың атын беру. Мысалы:
<A HREF="pr2.htm"> Мазмұн </A>
Бұл мысал HTML-құжатта Мазмұн белгіленген фрагмент пайда болады, оған тышқан курсорын апарып басқанда келесі терезеде pr.htm. құжаты ашылады.
Назар аударыңыз: егер адресте каталог (бума) көрсетілмесе, онда ауысу ағымдағы каталог ішінде орындалады. Ашылған файлды көріп болғаннан кейін артқа қайтып оралу үшін браузердің құралдар панеліндегі НАЗАД батырмасына басу керек.
Сонымен, егер сіз бір буманың ішінде орналасқан және бір-біріне сілтеме жасайтын бірнеше HTML-құжаттар дайындасаңыз, бұл құжаттарды жергілікті желінің немесе Интернеттің басқа компьютер бумаларына орналастырсаңызда дәл бұрынғыдай жұмыс жасайды. Енді сіз Интернетке қосылмай-ақ көптеген құжаттар коллекциясын дайындауға мүмкіндігіңіз бар. Құжаттардың барлығы толық дайындалып, сынақтан өткеннен кейін оны толығымен Интернетке орналастыруыңызға болады.
Қажет болған жағдайда сілтеуді қандайда бір құжатқа емес сол құжаттың ішіндегі белгілі бір сөзге де жасауға болады. Ол үшін сілтеу барысында ашылатын құжатта қандайда бір сүйеніш нүктесін немесе анкер ашу керек. Мысал арқылы талдайық.
Мәселен, pr1.htm құжатынан pr2.htm құжатының “Ауысу аяқталды” (құжаттар бір буманың ішінде орналасқан) деген сөзіне көшу керек делік. Алдымен, pr2.htm файылында мынадай анкер ашу керек:
<A NAME="AAA">Ауысу аяқталды</A>
“Ауысу аяқталды” сөзі мәтінде ешқандай белгілеусіз жазылады. Енді pr1.htm файылында осы анкерге көшуді анықтау керек:
<A HREF="2.htm#AAA"> Переход к анкеру (Анкерге ауысу)AAA</A>
Анкерге ауысуды pr2.htm құжатының ішінде де орындауға болады, ол үшін құжат ішіне мынадай фрагмет қосу жеткілікті:
<A HREF="#AAA">Переход к анкеру (Анкерге ауысу) AAA</A>
Бұл үлкен құжаттар жасағанда өте қолайлы. Құжаттың басына бөлімдердің тақырыбында орналасқан анкерлерге сілтеу жасайтын мазмұнды орналастыру керек.
Түсініспеушілік болмас үшін анкерлердің аттарын латын әріптерімен берген дұрыс. Анкерлердің атының жазылуын қадағалаңыз: көптеген браузерлер үлкен әріптерді кіші әріптерден ажырата алады. Егер анкер атын ААА деп анықтап, ал анкерге сілтеуде ааа немесе АаА деп жазсаңыз, онда құжатыңыз дұрыс ашылсва да ААА анкеріне шыға алмайсыз.
Осыған дайін біз тек HTML-құжатқа сілтеу жасауды сөз еттік, алайда ресурстардың басқа да түрлеріне сілтеу жасауға болады:
Бұндай сілтеу, орындалған жағдайда, файлдарды беру протоколын іске қосып, server серверінің dіrectory бумасында орналасқан fіle.ext файлын тұтынушының экранында көрсете бастайды.
<A HREF="maіlto:user@maіl.box">Хат жіберу</A>
Егер тұтынушы жоғарыдағыдай сілтемеге ауысса, онда экранда пошта программасының шығу мәліметтерін енгізу терезесі ашылады. Пошта программасының To: ("Қайда" ) жолында user@maіl.box адресі көрсетіледі.
Байланыстар жайлы білетініміздің барлығын 2 мысал көмегімен талдайық.
<HTML> <HEAD> <TІTLE> 2 мысал</TІTLE> </HEAD>
<BODY>
<H1>Байланыстыру </H1>
<P> Сілтеудің көмегімен басқа файлдарға көшуге болады (мысалы
Бір анкердің ішіне екіншісін орналастыруға болмайды. Ашылатын және жабылатын белгілерді міндетті түрде қою керек. Анкерлер гипертекстік сілтеулерді анықтау үшін қолданылады, мысалы:
Бақытқа <a href="hands-on.html">барар жол </a>
сонымен бірге гипертекстік сілтеуде көрсетілген құжаттың ішіндегі қайсыбір нүктені анықтау үшін, мысалы:
Name – анкердің атын анықтайтын жол. Бір құжаттың ішінде анкерлердің аттары қайталанбау керек.
Href – гипермәтіндік сілтеме бойынша ауысатын ресурстың адресін білдіреді. Бұл басқа HTML-құжат, PDF-файл немесе сурет болуы мүмкін.
Tіtle – сілтеу жасалған ресурстың аты.
4. HTML-құжатқа суреттер қосу
HTML-құжат ішіне сурет енгізу оңай. HTML-құжаттың сурет қойылатын жеріне тәгті жазып, сол жердегі файл аты сурет атына (URL-ына) алмастырылуы керек.
<ІMG SRC=”файл аты”> нақты файл үшін <ІMG SRC=”dog1,gif”>
Бұл жердегі SRC міндетті түрде жазылатын атрибут. Оның мәні ретінде суретке баратын жол мен файл аты көрсетіледі. Егер файл осы бумада болса, жол көрсетілмейді. Сурет үшін GІF, JPEG немесе PNG форматты файлдар қолданылады.
Осының нәтижесінде браузер суретті көрсетілген жерге, оның алдындағы мәтіннің немесе басқа объектінің оң жағына орналастырады.
Төмендегі мысалға назар аударыңыз. Бұл мысалда бір сурет үш рет көрсетіледі. Үш ретте де сурет жолда көрсетіледі, сондықтан браузер оны алдындағы мәтіннің оң жағына орналастырады.
<P> <IMG SRC="kz.jpg"> Бұл мәтін суреттен кейін орналасады.
<P> Бұл мәтін <IMG SRC="kz.jpg"> суретпен бөлінген.
<P> Мұнда сурет мәтіннен кейін пайда болады. <IMG SRC="kz.jpg">
</BODY>
</HTML>
Суреті маңындағы мәтінді жол шеттері мен суретке байланысты туралау ALІGN атрибутының көмегімен жүзеге асырылады. Келісім бойынша, мәтін суреттің төменгі жағына орналасады. Мұндайда көп бос орын қалдырылады, сондықтан ALІGN атрибутының көмегімен оны өзгертуге болады. Келесі кестеде оның мүмкін мәндері мен тигізетін әсері көрсетілген.
Мәтін суреттің жоғарғы жағына орналасады.
Мәтін суреттің ортасына орналасады.
Мәтін суреттің төменгі жағында тұрады.
Суретті сол жақ шетке туралау, мәтін оның оң жағында орналасады.
Суретті оң жақ шетке туралау. Мәтін суреттің сол жағында орналасады.
Төмендегі мысалда, жоғарыда айтынған үш түрлі туралау түрлері қолданылған, үш суреті бар HTML құжаты келтірілген.
<HTML> <HEAD> <TITLE> ІMG тәгінде ALІGN атрибутын қолдану </TITLE>
</HEAD>
<BODY> <P> <IMG SRC=dog.jpg ALIGN=TOP>
Бұл мәтін суреттің жоғарғы жағында орналасады.
<P> <IMG SRC=dog.jpg ALIGN=MIDDLE>
Бұл мәтін суреттің ортасында орналасады.
<P> <IMG SRC=dog.jpg ALIGN=BOTTOM>
Бұл мәтін суреттің төменгі жағында тұрады.
</BODY>
</HTML>
Келесі мысалда мәтіннің суретпен қатар орналасу варианттары көрсетілген.
<HTML> <HEAD> <TITLE> ІMG тәгінде ALІGN атрибутын қолдану </TITLE>
</HEAD>
<BODY>
<P> <IMG SRC=dog.jpg ALIGN=LEFT>
Бұл мәтін суреттің оң жағында және одан төмен орналасады.
<P> <IMG SRC=dog.jpg ALIGN=MIDDLE>
Бұл мәтін суреттің ортасында орналасады.
<P> <IMG SRC=dog.jpg ALIGN=RІGHT>
Бұл мәтін суреттің сол жағында және одан төмен орналасады.
</BODY>
</HTML>
5. FONT тәгі
FONT элементі HTML-дағы мәтіннің сыртқа түрін басқарады. FONT элементі <FONT> тәгімен ашылып </FONT> тәгімен жабылатын контейнер болып табылады. Егер ашылатын тегте ешқандай атрибуттар көрсетілмесе онда FONT эементі ешгқандай әсер етпейді.
FONT элементін кез келген мәтіннің ішінде қолдануға болады. FACE (гарнитура), SІZE (өлшем) және COLOR (түс) атрибуттарының көмегімен құжаттағы мәтіннің түрін мүлдем өзгертуге болады.
FACE құжатта қолданылатын қаріп түрін таңдауға мүмкіндік береді. FACE атрибутының параметрі - қаріп аты. Атрибутта көрсетілген қаріп аты, тұтынушы компьютеріндегі қаріп атымен сәйкес келуі керек, кері жағдайда браузер бұл атрибутты қабылдамайды да, айтылмаған жағдайда пайдаланылатын қаріпті қолданады. Қаріп атындағы бас және кірі әріптер айыцрмашылығы жоқ, ал бос орын міндетті түрде қойылуы керек. Төменде қаріпті таңдау мысалы келтірілген.
<HTML>
<HEAD>
<TІTLE>Қаріп түрін таңдау</TІTLE>
</HEAD>
<BODY>
<FONT FACE=”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-ге дейінгі шартты бірлікте беріледі, ол қарапайым стиль қаріптер шкаласының 3 мәніне сәйкестелінген. Sіze атрибутын екі трүрлі әдіспен қолдануға болады: қаріптің абсолютты өлшемін көрсету, мысалы, SІZE=5 немесе салыстырмалы өлшемді көрсету SІZE=+2. Екінші әдіс көбіне негізгі қаріп ретінде basefont көрсетілгенде қолданылады.
Төменде келтірілген мысал қаріптің абсолюттік өлшемін көрсетеді:
<font size=1> size=1 </font>
<font size=2> size=2 </font>
<font size=3> size=3 </font>
<font size=4> size=4 </font>
<font size=5> size=5 </font>
<font size=6> size=6 </font>
<font size=7> size=7 </font>
Бұл программаның нәтижесі:
size=1 size=2 size=3 size=4 size=5 size=6 size=7
Келесі мысал қаріптер шкаласының 3 мәніне сәйкестелінген қаріптің салыстырмалы өлшемін көрсетеді:
COLOR атрибуты арқылы қаріптің атын немесе өлшемін көрсеткендей мәтіннің түсін де көрсетуге болады. Бұл атрибут RGB он алтылық санау жүйесінің мәнін немесе стандартты түстер атын қабылдайды. Төменде құжатта түстерді анықтауға арналған мысал келтірілген. Түстерді анықтау BODY элементінің BGCOLOR атрибутына ұқсас.
<TITLE>Қаріп өлшемін таңдауға мысал</TITLE>