Қазақша рефераттар

Суретпен мәтін орналасуы

Сабақ туралы қысқаша мәлімет

Бұл сабақ HTML құжатында сурет қоюды, сондай-ақ сурет пен мәтіннің өзара орналасуын тәжірибе арқылы меңгертуге арналған.

Сабақтың тақырыбы

HTML құжатында сурет қою. Сурет пен мәтіннің орналасуы

Сабақтың түрі

Тәжірибелік сабақ; ақпараттық хабарлау; жаңа тақырыпты меңгерту.

Қажет құралдар

  • Дербес компьютер
  • Блокнот (Notepad)
  • Internet Explorer (немесе кез келген браузер)
  • Компьютерде қолданушы ретінде жұмыс істей білу

Сабақтың мақсаттары

Білімділік

Оқушыларға HTML мүмкіндіктерін түсіндіру және мәтіндік құжатқа графикалық бейнені (суретті) енгізуді үйрету.

Дамытушылық

Блокнот қосымшасы арқылы веб-бетті өз бетінше пішімдеуге машықтандыру; ой қорытындысын жасауға дағдыландыру.

Тәрбиелік

Уақытты тиімді пайдалануға, жүйелі ойлауға, ұқыптылық пен шапшаңдыққа, компьютерлік сауаттылыққа тәрбиелеу және өздігінен жұмыс істеу дағдыларын қалыптастыру.

Оқыту әдістері

Сын тұрғысынан оқыту технологиясы

  • Деңгейлеп оқыту: «жуан» және «жіңішке» сұрақтар қою арқылы.
  • Адаптивті жүйе: тапсырмаларға өз бетінше шешім табу.

Ақпараттық технологиялар негізіндегі әдістер

  • Интерактивті оқыту, баяндау, сұрақ-жауап.
  • «Дешифратор» әдісі (ақпаратты талдау және мағынасын ашу).

Көрнекі құралдар

Әдістемелік

Тест сұрақтары

Техникалық

Интерактивті тақта, компьютер

Пәнаралық байланыс

  • Ағылшын тілі
  • Бейнелеу өнері
  • Геометрия

Өзіндік жұмыс түрлері

  • Өз бетінше тапсырма орындау
  • Тақтамен жұмыс

Қолданылатын әдебиеттер

  1. 1. HTML в примерах. Как создать свой Web-сайт: самоучитель.
  2. 2. «Информатика негіздері» (ғылыми-әдістемелік журнал).
  3. 3. М. М. Ерекешова, З. Р. Мурзабекова. WEB-парақтарды құру технологиясы. Ақтөбе, 2006. — 79 б.

Сабақ барысы және уақыт бөлінісі

Бөлімдер бойынша уақыт

  • Ұйымдастыру бөлімі5 минут
  • Үй тапсырмасын тексеру20 минут
  • Жаңа сабақ20 минут
  • Сергіту сәті25 минут
  • Бекіту5 минут
  • Қорытынды5 минут

Кезеңдер

  1. 1Ойлан, тап
  2. 2Біліміңді байқап көр!
  3. 3Игерейік білімді
  4. 4Шығармашылық кезең
  5. 5Ой қорыту
  6. 6Сергіту сәті

Сабаққа дайындық чек-парағы

  • Кабинеттің сабаққа даярлығы
  • Жұмыс орындарының тоқ көзіне қосылуы
  • Компьютерлерді жүктеу және іске қосу
  • Тапсырмалар мен материалдардың әзірлігі

Сабақтың құрылымы

I. Ұйымдастыру бөлімі

  1. 1.1Оқушылармен амандасу, қатысымды тексеру.
  2. 1.2Сабақтың мақсаты мен күтілетін нәтижелерін хабарлау.
  3. 1.3Сабақ жоспары, барысы және мазмұнымен таныстыру.

II. Үй тапсырмасын тексеру

1-кезең: «Ойлан, тап»

  1. … тегінің қызметі қандай?
  2. HTML құжаттары қалай жасалады?
  3. HyperText Markup Language (HTML) дегеніміз не?
  4. … тегі қандай қызмет атқарады?

2-кезең: «Біліміңді байқап көр!»

Үйге берілген жұмыстарды тексеру, талдау және кері байланыс.

3-кезең: Ақпарат

Жаңа тақырыпқа кіріспе және негізгі ұғымдарды нақтылау.

Жаңа сабақ: HTML құжатында сурет қою

Жоспар

  1. Сурет қою
  2. Сурет пен мәтіннің орналасуы
  3. Суреттің абзацта орналасуы

Неге сурет маңызды?

Суреттік бейнелер веб-парақты көркемдеп, ақпаратты қабылдауды жеңілдетеді. Сурет файлдары көбіне құжаттан бөлек сақталады, бірақ браузер арқылы веб-парақтың ішінде көрсетіледі.

Негізгі ереже

  • Суретті кірістіру үшін <img> жалқы (жабылмайтын) тегі қолданылады.
  • src атрибуты міндетті: ол сурет файлының URL-мекенжайын (абсолютті не салыстырмалы) көрсетеді.

Қолдау көрсетілетін форматтар

Қазіргі браузерлер көбіне GIF, JPG, PNG форматтарын қолдайды.

Өлшем (width/height)

Суреттің веб-парақтағы ені мен биіктігін width және height арқылы пиксельмен беруге болады.

Мысал

<img src="fish.jpg" width="500" height="250" alt="Балық">

Жақтау (border)

Қажет болса сурет айналасындағы жақтаудың қалыңдығын параметр ретінде көрсетуге болады (оқу мақсаты үшін аталады).

Альтернатива мәтін (alt)

alt — сурет жүктелмей қалса немесе қолжетімділік мақсатында көрсетілетін сипаттама мәтін.

Сурет пен мәтінді туралау (align)

Суреті бар жолдағы мәтіннің орналасуын align атрибуты арқылы басқаруға болады. Әдепкіде мәтін суреттің төменгі жағына теңестіріледі, сондықтан кейде артық бос орын пайда болуы мүмкін.

Мәні Сипаттамасы
top Мәтінді суреттің жоғарғы жағына туралайды.
middle Мәтінді суреттің ортасына туралайды.
bottom Мәтінді суреттің төменгі жағына туралайды.
left Суретті солға орналастырады, мәтін оң жағына ағады.
right Суретті оңға орналастырады, мәтін сол жағына ағады.

Ескерту: Қазіргі HTML стандарттарында туралау үшін көбіне CSS қолданылады. Дегенмен оқу тапсырмалары үшін align атрибуты түсінік ретінде беріледі.

I. Сурет қою

Веб-бетке сурет қою үшін <img> тегі қолданылады. src — файл атауы/жолы, width — ені, height — биіктігі, alt — сипаттама мәтін.

II. Сурет пен мәтіннің орналасуы

align мәндері мәтіннің суретке қатысты қай деңгейде орналасатынын көрсетеді: top (жоғары), middle (орта), bottom (төмен).

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

Егер абзац ішінде сурет мәтіннен бұрын жазылса, ол әдетте сол жақта көрініп, мәтін оның оң жағымен орналасады. Ал сурет мәтіннен кейін келсе, сурет оң жаққа ығысып, мәтін сол жақпен берілуі мүмкін.

Мысал (сурет алдымен)

<p><img src="img.jpg" align="left" alt="..."> Бұл бірінші абзац...</p>

Мысал (сурет кейін)

<p> Бұл екінші абзац... <img src="img.jpg" align="right" alt="..."></p>

Практикалық тапсырмалар

№1 тапсырма: HTML құжатына сурет енгізу

  1. Блокнотты ашып, бос құжатты Zadanie4.html атауымен сақтаңыз.
  2. Құжаттың бірінші жолына HTML құжат құрылымын жазыңыз.
  3. Терезе тақырыбын (title) көрсету үшін: «Сурет қою» деп енгізіңіз.
  4. Құжаттың негізгі бөлігіне мәтін енгізіңіз.
  5. Суретті қосу үшін <img> тегін қолданыңыз (src, alt, қажет болса width/height).
  6. Құжатты дұрыс жабыңыз: </body> және </html>.

№2 тапсырма: Графикамен жұмыс

  1. Графикалық редакторды іске қосып, үш сурет жасаңыз. Оларды дискке .jpg немесе .gif форматында сақтаңыз.
  2. Текстік редакторда HTML құжат құрыңыз: бір суретті фон ретінде, қалған екеуін құжат ішіне орналастырыңыз.
  3. Парақтың атауы: «Графикамен жұмыс». Мазмұны: «HTML құжатты графикалық безендіру».
  4. Құжатты lab5.htm атауымен сақтаңыз.
  5. Нәтижені көру үшін браузерде ашыңыз (мысалы, MS Internet Explorer).

№3 тапсырма: Шығармашылық жұмыс

Колледжіміздің 80 жылдығына арнап ашық хат (веб-бет) дайындаңыз. Сурет, мәтін және орналасу параметрлерін орынды қолданыңыз.

Бекіту және сергіту

5-кезең: Тест сұрақтары

Оқушылар тест сұрақтарына жауап береді, нәтижелері бойынша тақырып түсінігі бекітіледі.

6-кезең: Көзге арналған жаттығулар

  1. Көзді бірнеше секунд қатты жұмып, кейін ашып босаңсытыңыз. 4–5 рет қайталаңыз.
  2. Жанарыңызды мұрын үстіне бағыттап, кейін алыстағы нүктеге қараңыз. 4–5 рет қайталаңыз.
  3. Басты бұрмай, көзді оңға қаратып ұстап, кейін тура қараңыз; дәл солай солға, жоғары, төмен қайталаңыз. 4–5 рет.
  4. 20–30 секунд бойы көзді ашып-жұмып, жиі жыпылықтатыңыз.

Бағалау, сұрақтар және үй тапсырмасы

IV. Бағалау

Оқушылардың практикалық жұмысы, белсенділігі және тест нәтижесі бойынша бағалау жүргізіледі.

V. Сұрақ-жауап

Оқушылардың сұрақтарына жауап беріліп, қиын тұстар қайта түсіндіріледі.

Үй тапсырмасы

  • Тақырыпты оқып келу.
  • «HTML құжатында сурет қою. Сурет пен мәтіннің орналасуы» тақырыбында реферат жазу.

VI. Сабақты аяқтау

Сабақ қорытындыланып, келесі қадамдар мен ұсыныстар айтылады.