HTML негіздері

Сабақтың тақырыбы: «HTML құжатында Сурет қою. Сурет пен мәтін орналасуы»
Сабақтың түрі: Тәжірибелік сабақ, ақпараттық хабарлау, жаңа сабақты меңгерту.
Сабақтың мақсаты:
Білімділік: Оқушыларға HTML – дің мүмкіндіктерін және оларды мәтіндік құжатқа графикалық бейне кірістіруді үйрету
Дамытушылық: Блокнот қосымшасы арқылы веб бетін өз бетінше пішімдеуге машықтандыру; өз ойын қорытуға дағдыландыру.
Тәрбиелік: Уақытты тиімді пайдалануға, жүйелі ойлауға, ұқыптылыққа, шапшаңдыққа, компьютерлік сауаттылыққа тәрбиелеу, өздігінен жұмыс істеу дағдыларын қалыптастыр

Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот (Notepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.

Сабақта қолданылатын оқытудың әдістері
1. СЫН ТҰРҒЫСЫНАН ОҚЫТУ ТЕХНОЛОГИЯСЫ БОЙЫНША
 Әр түрлі деңгейде оқыту әдісі бойынша: жуан жіңішке сұрақтар қою арқылы.
 Адаптивті жүйе әдісі бойынша: Өз бетінше тапсырмаларға шешім табу.
2. АҚПАРАТТЫҚ ТЕХНОЛОГИЯ БОЙЫНША
 Интерактивті оқыту әдісі, баяндау, сұрақ - жауап.
 Дешифратор әдісі.
.
САБАҚТЫҢ КӨРНЕКІЛІК ҚҰРАЛДАРЫ
Әдістемелік:
1. Тест сұрақтары
Техникалық:
1. Интерактивті тақта
2. Компьютер

ПӘНАРАЛЫҚ БАЙЛАНЫС ЖӘНЕ САБАҚТА АТҚАРЫЛАТЫН ӨЗІНДІК ЖҰМЫСТАРДЫҢ ТҮРЛЕРІ

Пәнаралық байланыс: «Ағылшын тілі», «Бейнелеу», «Геометрия»
Сабақта қолданылатын өзіндік жұмыстардың түрлері: Өз бетінше тапсырма орындау, тақтамен жұмыс.

ҚОЛДАНЫЛАТЫН ӘДЕБИЕТТЕР
1. HTML в примерах. Как создать свой Web - сайт: Самоучитель.
2. Информатика негіздері (ғылыми - әдістемелік журнал)
3. М. М. Ерекешова, З. Р. Мурзабекова. WEB - парақтарды құру технологиясы. Ақтөбе 2006ж.- 79 б
САБАҚ БАРЫСЫ
ІІІ. Сабақтағы бөлімдерге берілген уақыт:
Ұйымдастыру бөлімі 5 минут
Үй тапсырмасын тексеру 20 мин
Жаңа сабақ 20 минут
Сергіту сәті. 25 минут
Бекіту 5 мин
Қорытынды 5 мин
1 - кезең
Ойлан, тап 2 - кезең
Біліміңді байқап көр! 3 - кезең
Игерейік білімді. 4 - кезең
Шығармашылық кезең 5 - кезең
Ой қорыту. 6 кезең
Сергіту сәті! Үйге тапсырма Бағалау
Кабинеттің сабаққа даярлығы. Жұмыс орындарының тоқ көзіне қосылуы. Компьютерлерді жүктеу, іске қосу.
Тапсырмалардың әзірлігі.
Берілген сұрақтарға «Иә» немесе «Жоқ» деп жауап беру. Үйден құрып келген программаларын енгізу. «HTML құжатында Сурет қою. Суретпен мәтін орналасуы»
Тапсырма орын - дау. Тестке жауап беру Көз жаттығуларын жасау

І. ҰЙЫМДАСТЫРУ БӨЛІМІ
1. 1. Оқушылармен амандасу, олардың сабаққа қатысымдарын тексеру.
1. 2. Оқушыларға сабақ мақсатын хабарлау.
1. 3. Оқушыларды сабақ жоспарымен, барысымен, мазмұнымен таныстыру.
ІІ. ҮЙ ТАПСЫРМАСЫН ТЕКСЕРУ
1 - кезең. Ойлан тап. (слайд сұрақтарына жауап беру)
1. … тегінің қызметі
2. HTML - құжаттар қалай жасалынады?
3. HyperText Markup Language (HTML) дегеніміз не?
4. … тегі қызметі?
5.
2 - кезең «Біліміңді байқап көр!». (Үйге берілген жұмыстарын тексеру.)
3 - кезең. Ақпарат.
ІІІ. ЖАҢА САБАҚ: «HTML құжатында Сурет қою. Суретпен мәтін орналасуы»
Жоспар:
1. Сурет қою
2. Суретпен мәтін орналасуы
3. Суреттің абзацта орналасуы

Суреттік бейнелер WEB - парақтарды әшекейлеп безендіру кезінде маңызды құралдар ролін атқарады. Суреттердің өздері құжаттан бөлек орналасқан және файлда сақталады.
Алайда олар броузер арқылы WEB - парақтардың ішінде бейнеленеді. Суреттерді бейнелеу ережесін былай деуге болады:
1. Суреттерді құжаттың ішіне орналастыру үшін, яғни жабылмайтын жалқы тегт қолданылады.
2. Бұл тегте міндетті түрде SRC=»…» атрибуты болуы керек. Оның мәні абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді. Және ол тегі тұрған орнына көрінеді.
Мысалы: экранға fish. jpg файлдағы балық суретін шығарады.
Ескерту: Қазіргі кездегі броузерлер тек ғана gif, jpg, png типтеріндегі суреттік файлдарды ғана пайдаланады.
1. Суреттер өздерінің көлемдерін сақтай отырып WEB - парағына орналасады. Егер суретті ықшамдап бейнелеу кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін widh, height атрибуттарының көмегімен беруге болады. Осы 2 атрибуттың мәні WEB - парақтағы суреттердің биіктігі мен енін бүтін санмен берілген пиксельмен көрсетеді.
Мысалы: width=500 height=250> суретті 500×250 нүктелерден тұратын төртбұрышты аймаққа орналастырады. Сурет айналасындағы жақтау (border) сызығының қалыңдығын да параметр ретінде көрсетуге болады.
Суреті бар мәтінді жолда түзету ALIGN атрибутының көмегімен жүзеге асырылады. Айтылмаған жағдайда, суретті жолға қойғанда мәтін суреттің төменгі жағы бойынша түзетіледі. Сіздің бұл түзетуді өзгерткіңіз келуі мүмкін, себебі бұл жағдайда көп бос орын қалады. Мұны IMG дискрипторындағы түзету ALIGN атрибутының көмегімен жүзеге асыруға болады.
Мәні Сипаттамасы
Align=TOP
Align=MIDDLE
Align=BOTTOM
Align=left
Align=right Мәтінді суреттің жоғарғы жағымен туралайды.
Мәтінді суреттің ортасымен туралайды.
Мәтінді суреттің төменгі жағымен туралайды.
Суретті сол жағы бойынша туралау. Мәтін суреттің оң жағына орналасады.
Суретті оң жағы бойынша туралау. Мәтін суреттің сол жағына орналасады.

Графиктік элементтер
HTML құжатына бейнелерді қосады.
Құжаттың бір жағына қарай бейнелерді тегістейді, қабылдайтын мәндері: left, right, center; bottom, top, middle.
Бейненің айналасындағы рамканың қалыңдығын орнатады.
І. Сурет қою
Сурет қою
img (image → сурет сөзінен алынған) сөзінен бастау алатын тег веб бетке сурет қоюға қызмет етеді. src сөзінен соң, сурет аты қойылады, width сөзі суреттің енін білдірсе, ал height сөзі суреттің ұзындығын, биіктігін білдіреді.

Сурет қою

alt сөзінен соң қолданылатын сөз еске салдырушы сөз болып, курсорды суретке алып барғанда сол сөз шығады және кейбір жағдайларға байланысты сурет веб бетке шықпай қалса, еске салдырушы жазу шығып сурет не туралы екенін білдіріп, еске салып тұрады.
ІІ. Суретпен мәтін орналасуы
Сурет орналасуы

Жазусуреттің төменінде

Жазусуреттің ортасында

Жазусуреттің жоғарысында

align сөзінен соң қойылатын сөздер мәтіннің суреттің қай жағында орналасуын білдіреді. Мысалы: top – төбесінде, bottom – төменінде, ал middle – ортасында.

ІІІ. Суреттің абзацта орналасуы.
Суреттің абзацта орналасуы

Бұл бірінші абзац. Сурет абзацтан алдын тұр.

Бұл екінші абзац. Сурет абзацтан кейін тұр.

Егерде

тегінде абзацта сурет мәтіннен бұрын бірінші жазылса, онда сурет сол жақта шығады. Ал сурет мәтіннен кейін келсе, сурет оң жақта шығады.
4 кезең. Тапсырма орындау.
№1тапсырма
Сурет түсіру.
тегтерін қолданып келесі HTML - құжатын жасау.(2 - сурет)
2 - сурет
1) Блокнот текстік редакторының терезесін ашып, бос құжатты Задание4. html деп сақтаңыз
2) Құжаттың бірінші жолына деп жазыңыз..
3) Терезе тақырыбын жазу үшін мына жолдарды енгізіңіз:
Сурет қою
4) Ары қарай деп енгізіңіз.
5) Енді суретті түсіреміз. Ол үшін келесі жаңа мына тіркестерді жазыңыз:
6) тегін жабыңыз.
7) тегін жабыңыз.

№2 тапсырма
1. Графикалық редакторды жүктеңіз де үш сурет құрыңыз, оларды дискіге. jpg немесе. gif форматпен сақтаңыз.
2. Текстік редакторды жүктеңіз де берілген суреттердің біреуін фон ретінде, ал қалған екеуін құжаттың ішіне орналастырып HTML - құжат құрыңыз.
Парақтың аты: Графикамен жұмыс.
Парақтың мазмұны: html - құжатты графикалық безендіру.
3. Алынған құжатты lab5. htm атымен сақтаңыз.
4. Берілген құжатты қарау үшін MS Internet Explorer броузерін жүктеңіз.

№3 тапсырма. Колледжіміздің 80 жылдығына орай ашық хат дайындау керек.
5 - кезең Тест сұрақтарына жауап беру.

6 - кезең Көз жаттығуларын жасау
1. Көзді бірнеше секунд қатты жұмып, содан кейін ашып, босаңсыту.
Демалыс қалыпты 4 - 5 рет қайталау.
2. Жанарыңды мұрныңның үстіне қаратып ұстау. Сонан кейін алысқа
қарау. 4 - 5 рет қайталау.
3. Басты бұрмай, бірнеше секунд көзді оңға қаратып ұстау, сонан кейін
тура алысқа қарау. Осындай әрекетті солға, жоғары, төменге қарап
қайталау. Барлық жаттығуды 4 - 5 рет қайталау.
4. 20 - 30 секунд бойы көзді ашып - жұмып, жыпылықтату.
ІV. Оқушыларды бағалау
V Оқушылардың сұрақтарына жауап беру. Үй жұмысы.
Үйге тапсырма
Тақырыпты оқып келу. «HTML құжатында Сурет қою. Суретпен мәтін орналасуы» деген тақырыпта реферат жазу.
VІ. Сабақты аяқтау.