ҚАЗАҚСТАН РЕСПУБЛИКАСЫ БІЛІМ ЖӘНЕ ҒЫЛЫМ МИНИСТРЛІГІ
Алматы қаласы Білім басқармасының
МКҚК «Алматы мемлекеттік политехникалық колледжі»
Бекітемін
Директордың оқу ісі
жөніндегіорынбасары
___________ А. Бейсетбаев
______________ 2014 жыл
АШЫҚ САБАҚТЫҢ ӘДІСТЕМЕЛІК ТАЛДАМАСЫ Желілік технология пәнінен оқу тәжірибесі
( атауы)
1304000 – «Есептеуіш техникасы мен бағдарламалық қамтамасыздандыру» мамандығы
(шифр, атауы)
1304043 – Техник – бағдарламашы біліктілігі
(шифр, атауы)
Сапа жөніндегі сарапшы
__________Г. Дуйсекова
(қолы)
_____________ 2014 жыл
Құрастырған
Оқытушы ______________ Г. Боранбаева
(қолы)
Информатика
кафедра отырысында қаралды
______________ 2014 жыл
Хаттама № ___
Кафедра меңгерушісі __________ Г. Қанабекова
(қолы)
№1 Сабақ жоспары
Пәні:
Желілік технология
Оқытушы:
Боранбаева Гүлжан Үсенбекқызы
Тобы
П4Б
Сабақтың өтілу күні
06.01.2014 жыл
Сабақтың тақырыбы:
Html тілінде құжаттарды құру және редакциялау
Сабақтың мақсаты:
1. Білімділік
Html тілінде құжаттарды құру және редакциялау ұғымын меңгерту. Html тегтерімен таныстыру.
2. Дамытушылық
Оқушылардың пәнге деген қызығушылықтарын арттыру. Әр оқушыға өз қабілетін ашуға ұмтылдыру.
3. Тәрбиелік
Оқушыларды ұқыптылыққа, жылдам жұмыс жасауға, алған теориялық білімдерін іс жүзінде қолдана білуге, ақпараттық мәдениетке тәрбиелеу
Сабақтың түрі:
Тәжірибелік
Сабақтың типі:
Аралас
Оқыту технологиясы:
Дамыта оқыту технологиясы
Оқыту әдістері:
Интерактивті технология, дамыта оқыту, сұрақ- жауап
Сабақтың көрнекілігі:
Дидактикалық көрнекіліктер, интерактивті тақта, презентациялар, компьютер, жеке тапсырмалар
Пәнаралық байланыс:
Информатика, Автоматтандырылған жүйенің ақпаратпен қамтамасыз етуін құру және жүргізу
Пайдаланылған әдебиеттер:
Дубаков М. Создание Web-страниц: искусство верстки./М. Денисов А, Вихарев И., Белов А. Интернет . Самоучитель. –СПб.: питер, 2001.-464с. Дубаков.Мн.: Новое знание. 2004.-287с
Web парақтар HTML (Hуper Text Markup Language) тілінде жазылады. Бұл интернетте жарияланатын Web парақтар құжатының белгілеу (разметкалау) тілі. Web парақтар интернетте НТТР серверлерінде орналасады. HTML тілі World Wide Web қызметінің негізі болып есептеледі және осы қызметтің әйгілі болуына себеп болды.
Гипермәтін дегеніміз — арнайы кодтар енгізілген мәтін. Бұл кодтар форматтау, мультимедиа, басқа құжаттарға гиперсілтеме жасау, қосымша элементтерді басқарды. Разметкалау дегеніміз — мәтінде осы кодтарды енгізіп, бұл құжаттың Browser-мен көрсетілуі. HTML тілінің мәтін фрагменттерінің не үшін керек екенін анықтауға пайдаланылады. Мысалы, мәтінде тақырып кездессе, HTML коды бұл фрагмент тақырып екенін көрсетеді. Мәтінді разметкалауға пайдаланатын кодтар HTML тілінде тег деп атайды. Тег дегеніміз — символдар жиыны. Тегтердің бәрі кіші символынан басталып, үлкен символынан аяқталады. HTML тілінде әр тегтің өзінің мәні бар. Жұп тегтер ашылатын және жабылатын тегтер болады. Жабылатын тегтер / символынан басталады. Кейбір тегтер тек қана ашылатын болады. Құжаттар броузерден көрсетілгенде, тегтер көрсетілмейді, бірақ құжаттың көрсету әдісіне әсер етеді.
Коментарий (түсініктеме)
HTML тілінде коментарий пайдалануға мүмкіндік бар. HTML тілінде арнайы тегтен басталады. Ол мынандай < / – –. Осы тегтен кейін жазылған мәтін коментарий болып есептеледі және браузермен экранда көрсетілмейді. Коментарий мынандай символмен аяқталады: – – –>. HTML құжатының структурасы
HTML құжаты құжаттың негізгі мәтінімен разметка жасау тегтерінен тұрады:
HTML құжаты басталып, аяқталады. Бұл жұп тегтер браузерге алдындағы құжат HTML құжаты екенін көрсетеді.
HTML құжаты тақырып бөлімінен және құжаттың денесінен тұрады, тақырып бөлімі және тегтер арасында орналасады. Құжат туралы информация береді. Бұл бөлім ішінде жұп тегтер пайдаланылады: </b> және <b>. Бұл тегтердің арасында құжаттың тақырыбы жатады.
3. Құжаттың мәтінді құжаттың денесінде орналасады. Құжаттың денесі және тегі браузерде көрсетілетін информацияны анықтайды.
<HTML>
тақырып бөлімі
экранда көрсетілген информация
негізгі тақырып
ішкі тақырып
бұл қатарлар бірге жазылады
HTML құжаты
текст
екіге бөлінеді
- фонның түсі
- мәтін түсі
- сілтемелер түсі
- активті сілтемелердің түсі
- қарастырылған сілтемелер түсі
“Color” келесі түрде беріледі “#$$$$$$”
- реті: қызыл/жасыл/көк, мысалы, мәтін түсі – сары, мәтін түсі – сары – жасыл.
FRAMEBORDER=BOOL – фреймдер айналасында шектеулердің болуы немесе болмауы
- фрейм
Параметрлер:
NAME=Имя – фрейм аты
SRC=URL – парақ адресі
MARGINWIDTH=X - өріс ұзындығы
MARGINHEIGHT=X - өріс ені
SCROLLING=BOOL – айналым сызығы
NORESIZE – фрейм размерін өзгертуге тиым салынады
- браузерлерге арналған командалар ауданы,
Объектілер
- объектілер береді
Параметрлер:
CODEB ASE = URL – объект файылының адресі
ID=X ID – объект
PARAM NAME = Value – объект қасиетінің мәні
ALIGN= түзету – бетті түзетуді анықтайды
WIDTH= ені
HEIGHT= биіктігі
Формалар
- форманы құрады және мәліметтерді қайда, қандай әдіспен жіберуді анықтайды
- формалар элементтері
Type:
Text – мәтіндік өріс
Password – парольдерді енгізу өрісі
Button – батырма
Reset – мәндерді қалпына келтіру батырмасы
Submit – мәндерді жіберу батырмасы
Checkbox – таңдау
Radio –қосушы
Параметрлер:
NAME=Имя – элемент атауы
VALUE=Значение – элемент мәні
SIZE=X - элемент размері
Сіздер қолданатын стандартты түстер:
1. Black (қара) #000000
Maroon (темно-бордовый) #800000
Green(жасыл) #008000
Olive (оливковый) #808000
Navy(темно-синий) #000080
Purple(фиолетовый) #800080
Teal(темно-зеленый) #008080
Gray(сұр) #808080
Silver(күміс түстес) #C0C0C0
Red (қызыл) #FF0000
Lime(известь) #00FF00
Yellow(сары) #FFFF00
Blue(көк) #0000FF
Fucksia(фуксия) #FF00FF
Aqua (көкшіл) #00FFFF
White(ақ) #FFFFFF
HTML-құжаттағы бейнелер. HTML-құжатта бейнені өте қарапайым жолмен тұрғызуға болады. Ол үшін бұл бейне GIF форматында болу керек (файл *.gif кеңейтілуімен) немесе JPEG (файл *.jpg немесе *.jpeg кеңейтілуімен) және бір жол HTML-мәтінде. Бізге құжатқа HTML құжатпен бір каталогта орналасқан picture.gif файлында жазылған бейнені іске қосу керек. Онда жол мынадай болады:
Белгі ALT атрибутын қосу керек="[мәтін]", мысалы:
Браузер мұндай тегті кездестіріп, экранда сурет мәтінің көрсетеді және оның орнына picture.gif файлынан сурет жүктейді. ALT атрибуты бейнені ұстамайтын ескі браузерлер үшін қажет, сол сияқты браузерде бейнені автоматты жүктеу өшіріліп тұрса. Интернетке жай қосылған кезде, бұл уақытты үнемдеу үшін жасалады. Бейнесі бар файл, басқа каталогта немесе басқа серверде орналасуы мүмкін. Бұл жағдайда оның толық атын көрсету керек.
Бейне мысалы
Бейне
Бейнені қарапайым түрде тұрғызуға болады:
Сонымен қатар, бейнені "ыстық" етіп жасауға болады, немесе бейнеге өтуді іске асыру:
тегінен кейін үш файлды қосыңыз:
Басты меню
Гиперсілтеме жұмыс жасағанын көресіз
2-тапсырма
Дискіге жасаған жұмыстарыңызды сақтау үшін жеке бума құрыңыз.
1. Блокнотты (notepad) ашып келесі мәтінді теріңіз:
Менің бірінші қадамым
Сәлеметсіз бе, бұл менің бірінші бетім (Здравствуйте, это моя первая страница).
Қош келдіңіздер! (Добро пожаловать!)
Сәлеметсіз бе, бұл менің бірінші бетім
Қош келдіңіздер!:)
Сәлеметсіз бе, бұл менің бірінші бетім.
Қош келдіңіздер! :)
Сәлеметсіз бе, бұл менің бірінші бетім.
Қош келдіңіздер! :)
4-тапсырма
«Тілек» бет құрыңыз. Оған келесі сөйлемдерді енгізіңіз:
Туған күн ерекше күн әрбір жанға
Жан досымды асықтым мен құттықтауға
Бар бақытты тіледім бір өзіңе
Армандарың орындалсын бұл өмірде
Денсаулығың мықты боп әрқашанда
Жүре берші жадырап ортамызда
Демеп жүрер жанның бірі сенсің қиналғанда
Үзілмесін достығымыз ешқашанда!!!
Әр бір сөйлемді жаңа жолдан жазу керек.
HTML мәтіні – беттің коды:
Тілек
Туған күн ерекше күн әрбір жанға
Жан досымды асықтым мен құттықтауға
Үзілмесін достығымыз ешқашанда!!!!
<Н 1 > Туған күн ерекше күн әрбір жанға
<НЗ> Жан досымды асықтым мен құттықтауға
<Н5> Бар бақытты тіледім бір өзіңе Н5>
Демеп жүрер жанның бірі сенсің қиналғанда
Менің бірінші web-бетімеқош келіпсіздер!
Менің екінші web-бетімеқош келіпсіздер! <BR> Өмірбаян М. Мақатаев
Менің үшінші web-бетімеқош келіпсіздер! …
ФОРМУЛА УКСУСНОЙ КИСЛОТЫ CH3COOH.
<ВR>ФОРМУЛА ОРТОФОСФОРНОЙ КИСЛОТЫ. H3PO4.
<ВR>ГЛЮКОЗА ИМЕЕТ СЛОЖНУЮ ФОРМУЛУ
<ВК>КВАДРАТНОЕ УРАВНЕНИЕ AX2+BX+C=0
БИКВАДPATHOE УРАВНЕНИЕ AX4+BX2+C=0
Уcлoвиe задачи:
Решить уравнение x3+3x2-4x-12=0
Решение задачи:
x3 +3 x2-4x-12=0
x2(x+3)-4(x+3)=0
(x+3)(x2-4)=0
x+3=0
xK/sub>=-3
x2-4=0
x2=2
x3=-2
<В>Ответ:
x 1 =-3, x2=2,
x3 =-2
Уcлoвиe задачи:
Решить уравнение x3+3x2-4x-12=0
Решение задачи:
x3 +3 x2-4x-12=0
x2(x+3)-4(x+3)=0
(x+3)(x2-4)=0
x+3=0
xK/sub>=-3
x2-4=0
x2=2
x3=-2
<В>Ответ:
x 1 =-3, x2=2,
x3 =-2
HTML бірнеше тізімді ұстайды
Нөмірленбеген тізімдер
Нөмірленбеген тізім элементтері арнайы символмен және солға жылжытумен ерекшелінеді:
1 элемент
2 элемент
3 элемент
Нөмірленген тізімдер
Нөмірленген тізім элементтері солға жылжытумен, сонымен бірге нөмірлеумен ерекшелінеді:
1 элемент
1 элемент
3 элемент
Анықтама тізімдер
Бұл тізім түрі алдыңғы тізімдерге қарағанда күрделі, бірақ тиімді.
Еске сақтаңыз, тізімді бірінен соң бірін тұрғызуға болады, бірақ енгізудің бірнеше деңгейін қолдана беруге болмайды.
Көңіл бөліңіз, тізім элементінің ішінде бірнеше абзацтар орналасады. Барлық абзацтардың бірыңғай сол жақ өрісі болады.
>
Горизонтальды сызықтар коллекциясы
Бейне
Бейнені қарапайым түрде тұрғызуға болады:
Сонымен қатар, бейнені "ыстық" етіп жасауға болады, немесе бейнеге өтуді іске асыру:
14- тапсырма
«Мой первый шаг» бетін құр. Оған сурет енгіз. Суреттін атын енгізу керек, сонда дұрыс шығады.
Мой первый шаг
Здравствуйте, это моя первая страница.
Добро пожаловать!
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг?
Здравствуйте, это моя первая страница.
Добро пожаловать!
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу.
А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг?
На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего
Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке. Кто знает, может быть, мы и в реальной жизни станем друзьями
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли href="prf.html">посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу.
А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг?
На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:)
Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке? Кто знает, может быть, мы и в реальной жизни станем друзьями
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг?