- •Жаратылыстану және математика факультеті Информатика кафедрасы «Интернетте программалау»
- •2. Пән туралы мәлімет
- •3. «Интернетте программалау» пәнінің жұмыс бағдарламасы– (sillabus)
- •4. Негізгі және қосымша әдебиеттер тізімі, Интернет желісіндегі Web-сайт адрестері
- •«Интернетте программалу» пәнінен тапсырмаларды орындау және тапсыру графигі
- •6. Мәтіндік оқу құралы, авторлық дәрістер
- •Тақырыбы: html тілінің тізім құру тэгтері Туре атрибутының мумкін мәндері.
- •Тақырыбы: Гипермәтіндік сілтемелер
- •Тақырыбы: Кестенің негізгі атрибуттары
- •Бұл мәтін экранға шығады Құжаттың функционалдық бөліктерін анықтау.
- •Тәг атрибуттары.
- •Html командалары.
- •Түсініктемелер.
- •М әтін фрагменттерін логикалық стильмен безендіру
- •Html тілінде тізімдер жасау тәгтері
- •Туре атрибутының мумкін мәндері және олардың нөмірленуі
- •Сырғымалы жолдарды ұйымдастыру
- •Бұл үшінші сырғымалы жол
- •7. Электрондық оқу құралдары
- •8. Практикалық (семинар) сабақтарының жоспары және әдістемелік нұсқаулар
- •Тақырыбы: Сырғымалы жолдар
- •“Ауысу аяқталды” сөзі мәтінде ешқандай белгілеусіз жазылады. Енді pr1.Htm файлында анкерге көшуді анықтау керек:
- •Анкерге ауысуды pr2.Htm құжатының ішінде де орындауға болады, ол үшін құжат ішіне фрагмент қосу жеткілікті:
- •1.Html – құжатқа суреттер қосу
- •Сырғымалы жолдарды ұйымдастыру
- •Width – экрандағы «сырғымалы жолдың» енін пиксель арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.
- •Бұл бірінші сырғымалы жол
- •Құжат ішінде мәтінді орнгаластыру.
- •Нөмірленбеген тізімдер
- • Ержан
- •1.Қабатталған тізімдер
- •Кестелер тұрғызу
- •«Әкімшілік және оқытушылар» кестесін құру
- •«Тәлімгер» кестесін құру
- •9. Соөж сабақтарға әдістемелік нұсқаулар
- •Тақырыбы: Гипермәтіндік сілтемелер
- •Тақырыбы: Сырғымалы жолдарды құру
- •Тапсырма: Сырғымалы жолдарды құру
- •11. Реферат, курстық жұмыс, жоба, презентациялардың деректер қоймасы
- •12. Бақылау және жеке жұмысты жазуға техникалық талаптар
- •1. Бақылау жұмысын, титульдық бетін жұмыс құрылымын безендіру
“Ауысу аяқталды” сөзі мәтінде ешқандай белгілеусіз жазылады. Енді pr1.Htm файлында анкерге көшуді анықтау керек:
<A HREF=”2.htm#AAA”> Переход к анкету (Анкерге ауысу)ААА</A>
Анкерге ауысуды pr2.Htm құжатының ішінде де орындауға болады, ол үшін құжат ішіне фрагмент қосу жеткілікті:
<A HREF=”#AAA”> Переход к анкету (Анкерге ауысу)ААА</A>
Бұл үлкен құжаттар жасағанда өте қолайлы. Құжаттың басына бөлімдердің тақырыбы орналасқан анкерлерге сілтеме жасайтын мазмұнды орналастыру керек.
Түсініспеушілік болмас үшін анкерлердің аттарын латын әріптерімен берген дұрыс. Анкер атының жазылуын қадағалаңыз: көптеген браузерлер үлкен әріптерді кіші әріптерден ажырата алмайды. Егер анкер атын ААА деп анықтап, ал анкерге сілтемеде ааа немесе АаА деп жазсаңыз, онда құжат дұрыс ашылса да ААА анкеріне шыға алмайсыз.
Осыған дейін біз тек HTML-құжатқа сілтеме жасауды сөз еттік, алайда ресурстардың барлық түрлеріне сілтеме жасауға болады:
<A HREF=”ftp://server/directory/file.ext”>Файлдытүсіру </A>
Бұндай сілтеме орындалған жағдайда, файлдарды беру протоколын іске қосып, server сервер directory бумасында орналасқан file.ext файлын қолданушының жергілікті дискісіне түсіре бастайды.
<A HREF=”mailto:user@mail.box”>Хат жіберу</A>
Егер қолданушы жоғарғыдағыдай сілтемеге ауысса, онда экранда пошта программасының мәліметтерін енгізу терезесі ашылады. Пошта программасының То: (“Қайда”) жолында user@mail.box көрсетіледі.
Байланыстар жайлы білетініміздің барлығын 2-мысал көмегімен талдайық.
<HTML>
<HEAD>
<TITLE> 2-мысал </TITLE>
</HEAD>
<BODY>
<H1><Байланыстыру</H1>
<P> Сілтеудің көмегімен басқа файлдарға көшу болады (мысалы <A HREF= «pr.htm»>осы нұсқаудың мазмұны </A>).</P>
<P> Файлдарды түсіруге болады (мысалы, <A HREF= «ftp://уі.com/home/Chuvakhin Nikolai/html-pr.doc»> бұл Microsoft Word 2.0 форматындағы нұсқау</A>)FTP. бойынша </P>
</P>Қолданушыға поштамен мәлімет жіберуге мүмкіндік бар (мысалы,
<A HREF=”mailto:nc@iname.com”) осы нұсқаудың авторына </A>):</P>
</BODY>
</HTML>
Бір анкердің ішіне екіншісін орналастыруға болмайды. Ашылатын және жабылатын белгілерді міндетті түрде қою керек. Анкерлер гипертекстік сілтемелерді анықтау үшін қолданылады, мысалы:
Бахытқа <a href=”hands-on.html”>барар жол</a>, сонымен бірге гипертекстік сілтемеде көрсетілген құжаттың ішіндегі қайсыбір нүктені анықтау үшін, мысалы: <h2> <a name=mit>Тек Сквер545 – хакерлер пейіші </a></h2>.
Name – анкердің атын анықтайтын жол. Бір құжаттың ішінде анкерлердің аттары қайталанбау керек.
Herf – гипертекстік сілтеме бойынша ауысатын ресурстың адресін білдіреді. Бұл басқа HTML – құжат, PDF – файл немесе сурет болуы мүмкін.
Title – сілтеме жасалған ресурстың аты.
№ 4– лабораториялық жұмыс
1.Html – құжатқа суреттер қосу
HTML – құжат ішіне сурет енгізу оңай. HTML – құжаттың сурет қойылатын жеріне тәгті жазып, ол жердегі файл атын сурет URL-на алмастыру керек.
<IMG SRC=”файл аты”>
Бұл жердегі міндетті түрде жазылатын атрибут. Суретке баратын жолды көрсетеді – GIF, JPEG немесе PNG форматты файлдар.
Айтылмаған жағдайда браузер суретті көрсетілген жерге, оның алдындағы мәтіннің немесе басқа объектінің оң жағына орналастырады.
Төмендегі мысалға назар аударыңыз. Бұл мысалда бір сурет үш рет көрсетіледі. Үш ретте де сурет жолда көрсетіледі, сондықтан браузер оны алдындағы мәтіннің оң жағына орналастырады.
<HTML> <HEAD>
<TITLE> IMG тәгін қолдану</TITLE> </HEAD> <BODY> <P>
<IMG SRC=”dog.gif”>
Бұл мәтін суреттен кейін орналасады.
<P> Бұл мәтін <IMG SRC=”dog.gif”> суретімен бөлінген.
<P> Мұндайда сурет мәтіннен кейін пайда болады.
<IMG SRC=”dog.gif”>
</BODY> <HTML>
Суреті бар мәтінді жолда түзету ALIGN атрибутының көмегімен жүзеге асырылады. Айтылмаған жағдайда, суретті жолға қойғанда мәтін суреттің төменгі жағы бойынша түзетіледі. Сіздің бұл түзетуді өзгерткіңіз келуі мүмкін, себебі бұл жағдайда көп бос орын қалады. Мұны IMG дискрипторындағы түзету ALIGN атрибутының көмегімен жүзеге асыруға болады.
Мәні |
Сипаттамасы |
Align=TOP Align=MIDDLE Align=BOTTOM Align=left
Align=right |
Мәтінді суреттің жоғарғы жағымен туралайды. Мәтінді суреттің ортасымен туралайды. Мәтінді суреттің төменгі жағымен туралайды. Суретті сол жағы бойынша туралау. Мәтін суреттің оң жағына орналасады. Суретті оң жағы бойынша туралау. Мәтін суреттің сол жағына орналасады.
|
Төменгі мысалда, жоғарыда айтылған үш түрлі туралау қолданылған, үш суреті бар HTML келтірілген.
<HTML> <HEAD>
<TITLE> IMG дискрипт орында ALIGN атрибутын қолану </TITLE> </HEAD> <BODY> <P>
<IMG SRC=”dog.gif”ALIGN=TOP>
Бұл мәтін суреттің жоғарғы жағы бойынша тураланады. </P> <P>
<IMG SRC=”dog.gif”ALIGN= MIDDLE>
Бұл мәтін суреттің ортасы бойынша тураланады. </P> <P>
<IMG SRC=”dog.gif”ALIGN= BOTTOM>
Бұл мәтін суреттің төменгі жағы бойынша тураланады.</P> </BODY></HTML>
Келесі мысалда мәтіннің суретпен қатар орналасу варианттары көрсетілген.
<HTML> <HEAD>
<TITLE> IMG& тәгінде орында ALIGN атрибутын қолану </TITLE> </HEAD> <BODY> <P>
<IMG SRC=”dog.gif”ALIGN=LEFT>
Бұл мәтін суреттің оң жағында және одан төмен орналасады.
</P> <P>
<IMG SRC=”dog.gif”ALIGN=RIGHT>
Бұл мәтін суреттің сол жағында және одан төмен орналасады.
</P>
</BODY>
</HTML>
№ 5 – лабораториялық жұмыс
FONT тәгі FONT элементі HTML-дағы мәтіннің сыртқы түрін басқарады. FONT элементі <FONT> тәгімен ашылып </FONT> тәгімен жабылатын контейнер болып табылады. Егер ашылатын тәгі ешқандай атрибуттар көрсетілмесе онда FONT элементі ешқандай әсер етпейді.
FONT элементі кез келген мәтіннің ішінде қолдануға болады. FACE (гарнитура), SIZE (өлшем) және COLOR (түс) атрибуттарының көмегімен құжаттағы мәтіннің түрін мүлдем өзгертуге болады. FACE құжатта қолданылатын қаріп түрін таңдауға мүмкіндік береді. FACE атрибутының параметрі – қаріп аты. Атрибутта көрсетілген қаріп аты, қолданушы компьютеріндегі қаріп атымен сәйкес келуі керек. Кері жағдайда браузер бұл атрибутты қабылдамайды да, айтылмаған жағдай пайдаланылатын қаріпті қолданады. Қаріп атындағы бас және кіші әріптер айырмашылығы жоқ. Ал бос орын міндетті түрде қойылуы керек. Төменде қаріпті таңдау мысалы келтірілген.
<HTML>
<HEAD>
<TITLE> Қаріп түрін таңдау</TITLE>
</HEAD>
<BODY>
<FONT FACE=”Arial”>Бұл жерде басқа қаріп түрі пайдаланылған</FONT>
</BODY>
</HTML>
Егер сіз қолданушы компьютерінде қандай қаріптер бар екенін білмесеңіз, онда сіз FACE атрибутын үтір арқылы бірнеше қаріп атын көрсетуіңізге болады. Браузер қаріптер тізімін солдан оңға қарай қарап, бірінші сәйкес келген қаріпті қолданады. Төменде бірнеше қаріпті қолдану мысалы көрсетілген:
<HTML>
<HEAD>
<TITLE> Қаріп таңдау мысалы</TITLE>
</HEAD>
<BODY>
<FONT FACE=”Verdana”,”Arial”,”Helvetica”>
Бұл қаріп таңдау мысалы. </FONT>
</BODY>
</HTML>
Бұл мысалда негізгі қаріп ретінде Verdana көрсетілген, ол қаріп болмаған жағдайда Arial, Helvetica қаріптерін қолдануға болады.
№ 6 – лабораториялық жұмыс
SIZE – бұл элемент мәтіндегі белгілердің биіктігін таңдауға мүмкіндік береді. Қаріп өлшемі 1-ден 7-ге дейінгі шартты бірлікте беріледі, ол қарапайым стиль қаріптер шкаласының 3 мәніне сәйкестендірілген. Size атрибутын екі түрлі әдіспен қолдануға болады: қаріптің абсолютты өлшемін көрсету, мысалы, SIZE=5 немесе салыстырмалы өлшемді көрсету SIZE=+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 мәніне сәйкестелінген қаріптің салыстырмалы өлшемінің (эффектін) көрсетеді:
size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4
Негізгі шкаланың 6 мәнін алғанда да тура осы эффект болады:
size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4
Қаріп өлшемін өзгертіге мысал.
<HTML>
<HEAD>
<TITLE> Қаріп өлшемін таңдауға мысал</TITLE>
</HEAD>
<BODY>
<FONT SIZE =1> 1 өлшем </FONT> <BR>
<FONT SIZE =-1> 2 өлшем </FONT> <BR>
<FONT SIZE =3> 3 өлшем </FONT> <BR>
<FONT SIZE =4> 4 өлшем </FONT> <BR>
<FONT SIZE =+2> 5 өлшем </FONT> <BR>
<FONT SIZE =6> 6 өлшем </FONT> <BR>
<FONT SIZE =+4> 7 өлшем </FONT> <BR>
</BODY>
</HTML>
№ 7– лабораториялық жұмыс
Lab2.htm
<HTML> <HEAD>
<TITLE> Құжат бөлімдері </TITLE>
</HEAD>
<BODY>
<H1>Негізгі тақырып</H1>
<H2>Ішкі тақырып</H2>
<HR> <A HREF=”#3.1”>Үшінші абзацқа көшу</a>
<br><H3>1.1Бірінші абзац</H3>
Бұл жолдар құжатта жеке-жеке жазылғанымен біртұтас болып көрсетіледі
<HR> <H3>2.1Екінші абзац</H3>
Абзацтар үшін жабылатын тәгтерді қою міндетті емес.
<HR> <A Name=”3.1”> </a>
<H3>3.1 Үшінші абзац</H3>Абзац басына тәг қойылуы тиіс.
<HR>Көлденең сызықтан кейінгі мәтін <BR>екі жолға бөлінген.
<P> <H3 align=center><B>Енді сызықтарды сызайық</H3></B>
<HR color=red size=16 width=100%>
<HR color=green size=8 width=50%>
<HR color=gold size=4 width=25%>
pr6 мәтініне <A HREF=”pr6.htm”>ауысып </A> одан қайтып оралайық.
Иттің суретіне <A HREF=”DOG.JPG”>ауысып </A> одан қайтып оралайық.
<HR> Жалаудың суретіне <A HREF=”tu2.gif”>ауысып </A> одан қайтып оралайық.
<HR> <A HREF=”cat01.jpg”> мысықтар </A>
<HR> <A HREF=”cat03.jpg”> мысық </A>
<HR> <A HREF=”dog03.jpg”> ит </A>
<HR> <A HREF=”dog09.jpg”> бақа иттер </A>
<HR> <A HREF=”fish.jpg”> балық </A>
<HR> <IMG SRC=”dog09.jpg”>
<P> <IMG SRC=”fish.jpg”> WIDTH=500 HEIGIT=250 border=2 align=”bottom”
<P> <H3 ALIGN=center> Енді өздеріңіз осындай суреттерге сілтеулері бар мәтіндер жасаңыздар. </H3>
</BODY> </HTML>
<HTML> <HEAD>
<TITLE> Құжат тақырыбы </TITLE>
</HEAD>
<BODY BGCOLOR=yellow TEXT=red>
<H1> Бұл мәтінді экранға оқуға болады </H1>
</BODY> </HTML>
pr5.htm
<HTML> <HEAD>
<TITLE> HTML-парақтарды жасауға кіріспе </TITLE> <HR>
<H1> Бұл бірінші сатылы тақырып </H1> <HR>
<H2> Бұл екінші сатылы тақырып </H2> <HR></HEAD>
<BODY TEXT=red> Параграф командасын енгізбейінше мәтін біртұтас параграф ретінде көрінеді.
<P> Енді мәтін жаңа параграф ретінде көрінеді. Бұл мәтінді экранға оқуға болады.
</BODY> </HTML>
pr6.htm
<HTML> <HEAD>
<TITLE> HTML-парақтарды жасауға кіріспе </TITLE> <HR>
<H1> Бұл бірінші сатылы тақырып </H1> <HR>
<H2> Бұл екінші сатылы тақырып </H2> <HR>
Параграф командасын енгізбейінше мәтін біртұтас параграф ретінде көрінеді.
<P> Енді мәтін жаңа параграф ретінде көрінеді.
</HEAD>
<BODY bgcolor=aqua>
<H1>
<B> Бұл қарайтылған мәтін </B>
<BR>
<I> Бұл курсив мәтін. </I>
<BR>
<U> Бұл асты сызылған мәтін</U>
<BR>
<B><I> Бұл қарайтылған курсив мәтін </B></U>
<BR>
Бұл <B><U> қарайтылған </B></U> және <B>
<I> курсив, <U> асты сызылған мәтіндер </U> </B> </I> </H1>
</BODY> </HTML>
pr7.htm
<HTML> <HEAD>
<TITLE> HTML-парақтарды жасауға кіріспе </TITLE> <HR>
<H1> Бұл бірінші сатылы тақырып </H1> <HR>
<H2> Бұл екінші сатылы тақырып </H2> <HR>
Параграф командасын енгізбейінше мәтін біртұтас параграф ретінде көрінеді <P>
Енді мәтін жаңа параграф ретінде көрінеді.
</HEAD>
<BODY TEXT=”red”>
<BR><BR>
<A HREF=”c:\Мои документы\htm\st\dog.jpg”> Осы жерге тышқанмен бір шертіңіз! </A>
<BR>
<A HREF=”c:\Мои документы\htm\st\1.htm”> Бұл жерге де тышқанмен бір шертіңіз! </A>
<BR>
<В> Бұл қарайтылған мәтін </В>
<BR>
<I TEXT=”green”> Бұл курсив мәтін </I>
<BR>
<U TEXT=black> Бұл асты сызылған мәтін </U>
<BR>
<B><I> Бұл қарайтылған курсив мәтін </B></U>
<BR>
Бұл <B><U> қарайтылған </B></U> және <B>
<I> курсив, <U> асты сызылған мәтіндер </U> </B> </I>
</BODY> </HTML>
№ 8 – лабораториялық жұмыс
COLOR Қаріптің атын немесе өлшемін көрсеткендей мәтіннің түсін де көрсетуге болады. COLOR атрибуты RGB он алтылық санау жүйесінің мәнін немесе стандартты түстер атын қабылдайды. Төменде құжатта түстерді анықтауға арналған мысал келтірілген. Түстерді анықтау BODY элементі BGCOLOR атрибутына ұқсас.
<HTML>
<HEAD>
<TITLE> Түстер таңдауға мысал</TITLE>
</HEAD>
<BODY>
<FONT COLOR =”#FF0000”> Бұл мәтіннің түсі қызыл </FONT> <BR>
<FONT COLOR =”GREEN”> Бұл мәтіннің түсі жасыл </FONT> <BR>
</BODY> </HTML>
№ 9 – лабораториялық жұмыс