- •Жаратылыстану және математика факультеті Информатика кафедрасы «Интернетте программалау»
- •2. Пән туралы мәлімет
- •3. «Интернетте программалау» пәнінің жұмыс бағдарламасы– (sillabus)
- •4. Негізгі және қосымша әдебиеттер тізімі, Интернет желісіндегі Web-сайт адрестері
- •«Интернетте программалу» пәнінен тапсырмаларды орындау және тапсыру графигі
- •6. Мәтіндік оқу құралы, авторлық дәрістер
- •Тақырыбы: html тілінің тізім құру тэгтері Туре атрибутының мумкін мәндері.
- •Тақырыбы: Гипермәтіндік сілтемелер
- •Тақырыбы: Кестенің негізгі атрибуттары
- •Бұл мәтін экранға шығады Құжаттың функционалдық бөліктерін анықтау.
- •Тәг атрибуттары.
- •Html командалары.
- •Түсініктемелер.
- •М әтін фрагменттерін логикалық стильмен безендіру
- •Html тілінде тізімдер жасау тәгтері
- •Туре атрибутының мумкін мәндері және олардың нөмірленуі
- •Сырғымалы жолдарды ұйымдастыру
- •Бұл үшінші сырғымалы жол
- •7. Электрондық оқу құралдары
- •8. Практикалық (семинар) сабақтарының жоспары және әдістемелік нұсқаулар
- •Тақырыбы: Сырғымалы жолдар
- •“Ауысу аяқталды” сөзі мәтінде ешқандай белгілеусіз жазылады. Енді pr1.Htm файлында анкерге көшуді анықтау керек:
- •Анкерге ауысуды pr2.Htm құжатының ішінде де орындауға болады, ол үшін құжат ішіне фрагмент қосу жеткілікті:
- •1.Html – құжатқа суреттер қосу
- •Сырғымалы жолдарды ұйымдастыру
- •Width – экрандағы «сырғымалы жолдың» енін пиксель арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.
- •Бұл бірінші сырғымалы жол
- •Құжат ішінде мәтінді орнгаластыру.
- •Нөмірленбеген тізімдер
- • Ержан
- •1.Қабатталған тізімдер
- •Кестелер тұрғызу
- •«Әкімшілік және оқытушылар» кестесін құру
- •«Тәлімгер» кестесін құру
- •9. Соөж сабақтарға әдістемелік нұсқаулар
- •Тақырыбы: Гипермәтіндік сілтемелер
- •Тақырыбы: Сырғымалы жолдарды құру
- •Тапсырма: Сырғымалы жолдарды құру
- •11. Реферат, курстық жұмыс, жоба, презентациялардың деректер қоймасы
- •12. Бақылау және жеке жұмысты жазуға техникалық талаптар
- •1. Бақылау жұмысын, титульдық бетін жұмыс құрылымын безендіру
Кестелер тұрғызу
Жұмыс мақсаты:
кесте тұрғызуға керекті негізгі тэгтерді пайдалануды;
HTML-құжаттарында кесте тұрғызуды үйрену болып табылады;
Кесте тұрғызу <TABLE> және </TABLE> тэгтері көмегімен орындалады, оның әрбір жолын анықтау - <TR> және </TR> тэгтері арқылы, ал сол жолдардағы бағаналар - <TD> және </TD> немесе <TH> және </TH> тэгтері арқылы анықталады. <TD> және <TH> тэгтерінің жұмысы ұқсас, бірақ <TH> тэгтерімен қоршаған мәтін қарайтылған бағана тақырыптары болып табылады да, <TD> тэгтерімен одан кейінгі қарапайым бағаналар жазылады.
Кесте тақырыбы <CAPTION> және </CAPTION> тэгтерімен қоршалып жазылады. Жалпы кестені толық анықтау ережесі төмендегі үлгімен беріледі:
<TABLE ALIGN=”align” BGCOLOR=”#rrggbb” BORDER=”integer”
BORDERCOLOR=”#rrggbb” WIDTH=”integer”>
</TABLE>
Бірақ кесте тұрғызу кезінде олардың кейбірі қолданылмауы да мүмкін. Енді осы кесте тэгі атрибуттарының атқаратын жұмысына тоқталайық:
ALIGN атрибуты кестенің шет жақтарға туралауын анықтайды (көрсетілмесе, келісім бойынша сол жақ шетке). ALIGN мәні – қостырнақша ішіндегі сөз – мына сөздердің біріне сәйкес келуі тиіс: LEFT (сол жақ шетке), CENTER (ортаға), RIGHT (оң жақ шетке).
BGCOLOR кесте торының ішкі фон түсін тағайындайды (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы).
BORDER бүтін сан, кесте жақтаулары сызығының пиксельмен берілген қалыңдығы. Егер BORDER берілмесе, жақтау сызықтары көрсетілмейді.
BORDERCOLOR жақтау сызықтарының түсін тағайындайды (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы); BORDER атрибутымен бірге қолданылады.
WIDTH кестенің енін анықтайтын бүтін сан, оның мәні пиксельмен немесе пайызбен (%) беріледі.
Кесте тақырыбы <CAPTION> тэгімен төмендегі ережеге сәйкес беріледі:
<CAPTION ALIGN=”align” VALIGN=”valign”> </CAPTION>
Мұндағы <CAPTION> тэгінің төмендегідей атрибуттары болады.
ALIGN атрибуты кесте тақырыбын шет жақтарға туралайды, оның мәні LEFT, CENTER (көрсетілмесе, келісім бойынша осы мән қабылдайды), RIGHT сөздерінің біріне сәйкес келуі тиіс.
VALIGN атрибуты кесте тақырыбын вертикаль бағытта туралайды, ол TOP, MIDDLE, BOTTOM (келісім бойынша осы мән қабылданады), BASELINE сөздерінің бірін мән ретінде қабылдай алады.
Кесте жолы <TR> және </TR> тэгтерімен қоршалып тұрады, бұлардың алғашқысының мынадый бірсыпыра атрибуттары болуы мүмкін:
<TR ALIGN=”align” BGCOLOR=”#rrggbb”
BORDERCOLOR=”#rrggbb”> Кесте жолы… </TR> Енді <TR> тэгінің атрибуттарына тоқталайық.
ALIGN жол шеттерін туралау. Оның мүмкін мәндері LEFT (келісім бойынша), CENTER, RIGHT.
BGCOLOR жолдың ішкі фон түсін анықтайды (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы).
BORDERCOLOR жол жақтауларының түсі (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы). Бұл атрибут <TABLE> тэгінің BORDER атрибутының мәні нөлге тең болмағанда ғана қолданылады.
Кесте жолындағы бағаналар (ұялар) <TD> </TD> және <TH> </TH> тэгтерімен төмендегі ережеге сәйкес анықталады:
<TD немесе TH ALIGN=”align” BACKGROUND=”url” [BGCOLOR=”#rrggbb” BORDERCOLOR=”#rrggbb”]> Бағана…</TD немесе /TH>
ALIGN мәтінді горизонталь бағытта туралау. Оның мүмкін мәндері: LEFT, CENTER (келісім бойынша), RIGHT.
BGCOLOR фон түсі (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы).
BORDERCOLOR ұя жақтауларының түсі (он алтылық RGB форматындағы сан немесе ағылшын тіліндегі белгіленген түс атауы). Бұл атрибут <TABLE> тэгінің BORDER атрибутының мәні нөлге тең болмағанда ғана қолданылады.
COLSPAN бағаналар тақырыбына арналған жол (ұя) ішінде орналасатын бағаналар саны.
Енді тасырмалар қарастырамыз.
№ 14– лабораториялық жұмыс
1 тапсырма. Тақырып стильдерін қолдану.
Тақырыптарды жазудың алты түрлі тэгтері бар (<H1> ден <H6>-ға дейін). Әрбір тэг броузер параметрлеріне мәтінге белгілі бір нақты стиль бере алады.
1. RASP.HTM файлына төмендегідей өзгерістер енгізіңдер:
<HTML>
<HEAD> <H2> Менің алғашқы парағым </H2>
<TITLE> Алғашқы HTML файлы </TITLE>
</HEAD>
<BODY> <P> <H1> Сәрсенбі күнгі </H1> </P>
<H3> <I> сабақ </I> <U> кестесі </U> </H3>
<BODY>
</HTML>
2. Өзгертілген WEB-құжатты экраннан көріп шығыңыздар.
2 тапсырма. Қолданылып отырған қаріптің көлемін өзгерту.
<FONT> тэгі ағымдағы мәтін ішіндегі кейбір жолдарда қолданылып отырған қаріптің көлемін 1-ден 7-ге дейін мөлшерде өзгерту мүмкіндігін береді.
1. RASP.HTM файлына төмендегідей өзгерістер енгізіңдер:
<HTML>
<HEAD> <H2> Менің алғашқы парағым </H2>
<TITLE> Алғашқы HTML файлы </TITLE>
</HEAD>
</BODY>
<FONT SIZE=”7” > Сәрсенбі күнгі</FONT> <BR> сабақ кестесі
<BODY>
</HTML>
2. Осы <FONT> тэгін пайдаланып «сабақ кестесі» сөздерінің мөлшерін өз қалауыңызша өзгертіп көріп шығыңдар.
3. Мәтін бөліктерін жоғарыда айтылған ерекшелеу түрлерін және келесі жолға көшу, жаңа абзац ашу тэгтерін пайдалана отырып бірнеше тәсілмен безендіріңіздер.
3.тапсырма. Қаріп гарнитурасы (типі) мен түсін өзгерту.
<FONT> тэгі мәтін бөліктерінің көлемін, типін және түсін өзгертуге мүмкіндік береді. Қаріп типін өзгерту <FONT> тэгіне FACE атрибутын қосу арқылы орындалады. Мысалы, мәтін бөлігін KZ Arial қарпімен жазу үшін:
<FONT FACE >=”KZ Arial ” тэгін қолдану қажет.
Қаріп түсін беру үшін <FONT> тэгінің COLOR=”X” атрибутын жазу керек. Мұндағы Х орнына ағылшын тіліндегі түс атын немесе оның он алтылық жүйедегі сандық мәнін жазса болады. Он алтылық санды қолданғанда, түс құрамындағы қызыл (R-Red), жасыл (G-Green), көк (B-Blue) бояулардың араласу мөлшерін 00 мен FF сандары аралығындағы мәндермен көрсету керек. Осы тәсілді бояу түсін көрсетудің RGB форматы деп атайды.
1. RASP.HTM файлына төмендегідей өзгерістер енгізіңдер:
<HTML>
<HEAD> <H2> Менің алғашқы парағым </H2>
<TITLE> Алғашқы HTML файлы </TITLE>
</HEAD>
</BODY>
<U><I><B><FONT COLOR=”#FF0000” FACE=”ARIAL” SIZE=”7”>
Сәрсенбі күнгі </FONT> <B><I><U> <BR>
<FONT COLOR=”GREEN” FACE=”ARIAL” SIZE=”4> сабақ кестесі
</BODY>
</HTML>
2. Өз қалауларыңыз бойынша құжат мәтіндерінің мөлшерін, түсін, гарнитурасын, стилін өзгерте отырып қарап шығыңыздар.
№ 15 – лабораториялық жұмыс
1 тапсырма. Мәтінді көлденең бағытта туралау.
1. RASP.HTM файлына төмендегідей өзгерістер енгізіңдер:
<HTML>
<HEAD> <H2 ALIGN=”CENTER”> Менің алғашқы парағым </H2>
<TITLE> Алғашқы HTML файлы </TITLE>
</HEAD>
</BODY>
<P ALIGN=”CENTER”>
<FONT COLOR=”#008080” SIZE=”7”>
<B> Сәрсенбі күнгі </B> </FONT> <BR>
<FONT SIZE=”6”> <I> сабақ кестесі </I> </FONT>
</P>
</BODY>
</HTML>
Экранда мәтін фрагменттерінің жол ортасына ығыстырылып орналасқанын байқаған шығарсыңдар.
2 тапсырма. Құжат фоны мен жалпы мәтіннің түсін беру.
Құжат фоны мен жалпы мәтіннің түсін беру кезінде броузерлер алдын ала келісілген (по умолчанию) түстерді пайдаланады, - олар броузер параметрлері арқылы тағайындалады. Егер біз басқа түстерді пайдаланғымыз келсе, онда олардың бастапқы мәндері HTML файлының бас жағында жазылатын <BODY> тэгінде көрсетіледі. Осы тэгтің BGCOLOR=… атрибуты құжаттың фон түсін, TEXT=… атрибуты эалпы мәтін түсін анықтайды. LINK=… және VLINK=… атрибуттары әлі қаралмаған және қаралған сілтемелік сөздер түсін тағайындайды (соңғы екеуі кейінірек қарастырылады).
RASP.HTM файлына төмендегідей өзгерістер енгізіңдер:
<HTML>
<HEAD> <H2 ALIGN=”CENTER”> Моя первая страница </H2>
<TITLE> Учебный файл HTML </TITLE> </HEAD>
<BODY BGCOLOR=”FFFFCC” TEXT=”#330066”>
<P ALIGN=”CENTER”> <FONT COLOR=”008080” SIZE=”7”>
<B> Расписание </B> </FONT> <BR> <FONT SIZE=5>
<I> занятий на Сейсенбі </I>
</FONT>
</BODY>
</HTML>
3 тапсырма. WEB-парақ ішіне сурет орналастыру.
<IMG> тэгі құжат ішіне сурет қою мүмкіндігін береді. Сурет осы тэг жазылған орында пайда болады. Бұл тэг қосарланбай, жалғыз жазылады. Web-құжаттардағы сурет немесе графика негізінде үш форматта жазылады, олар: GIF, JPG, PNG. Келесі мысалдағы WDOG.JPG графикалық файлы осы Web-құжат орналасқан KURS бумасы ішінде жазылып тұр деп есептеледі.
RASP.HTM файлына төмендегідей өзгерістер енгізіңдер:
<HTML>
<HEAD> <H2 ALIGN=”CENTER”> Менің алғашқы парағым </H2>
<TITLE> Алғашқы HTML файлы </TITLE> </HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#330066”>
<P ALIGN=”CENTER”> <FONT COLOR=”#008080” SIZE=”7”>
<B> Сәрсенбі күнгі </B> </FONT> <BR>
<FONT SIZE=”6”> <I> сабақ кестесі </I> </FONT> <BR> <BR>
<ING SRC=”DOG.JPG”>
</BODY>
</HTML>
<IMG> тэгінің бірсыпыра атрибуттары бар, оларды қосымша көрсетуге болады. Атрибуттар IMG тэгінен кейін кез келген реттілікпен орналаса береді.
Visual Basic Script
Dim Name(6)
Name(0)="Физико-математическая школа"
Name(1)="Администрация и Преподаватели"
Name(2)="Вожатые"
Name(3)="Слушатели"
Name(4)="Читаемые курсы"
Name(5)="Сортировка" .
<html>
<!--формирование структуры заголовка HTML-документа-->
<head>
<!—название заголовка в окне браузера-->
<title>Первая страница</title>
<!--стиль оформления границ HTML-документа-->
<style>
body {border-width:30}
#p1 {border-style:double;border-width:10}
</style>
</head>
<!--основной текст HTML-документа-->
<body background="фон_Альбатрос1.jpg"> <center>
<p id=p1>
<!--установка параметров шрифта (форма, цвет, размер)-->
<font face="Monotype Corsiva" color="blue" size=+2>Учебная информационная система "ХКЛФМШ" </font>
<font face="Monotype Corsiva" color="black" size=+2>
<br>выполнена слушателями
<br> Хабаровской краевой летней физико-математической школы
<br> в 2007 году в рамках занятий по курсу <br>
<font face="Monotype Corsiva" color="blue" size=+2>"HTML: работа с базами данных в примерах". </font>
<br>Она является незавершенным продуктом, демонстрирующим возможности разработки специальных приложений с помощью языка разметки гипертекста HTML.</font>
</p>
<p><u><b>Авторский коллектив слушателей ХКЛФМШ:</b></u>
<p>Семенова Юлия,
<p>Иванов Петр и т.д.
<p><u><b>Преподаватель: </b></u>Табачук Наталья Петровна
<p>E-mail: tabachuk@yandex.ru
<!--вставка музыкального фрагмента в HTML-документ-->
<p><embed src=You.mp3 width=100 height=40>
</html>