Веб беттегі графика
Презентация қосу
ИНФОРМАТИКА
Информатика пәнінің мұғалімі
Дюсембаева Риза
WEB БЕТТЕГІ
ГРАФИКА
САБАҚ МАҚСАТЫ
Білімділік:
Web беттерге гарфикалық суреттерді енгізудің негізгі
принциптерін түсіндіру;Оқушыларды суреттерді қою
тәгтерімен таныстыру; осы тәгтердің қолданылуын
мысалдармен көрсету.
Дамытушылық:
Оқушылардың ой- өріс, қабілеттерін дамыту, өз ойларын
ашық айту, қорытынды жасай білу.
Тәрбиелік:
Ұқыптылыққа , сыпайлыққа, адамгершілікке тәрбиелеу.
Сабақ түрі
Аралас
Сабақ әдістері
1. Видеопрезентация,
тест,көрсете түсіндіру.
Сабақ көрнекілігі
1. Мультимедиялық
құралдар
Сабақ барысы
1.Ұйымдастыру кезеңі
•.Оқушылардың сабаққа қатысын
тексеру;
•.Сабақ мақсатын баяндау;
Үй тапсырмасы
• Интерактивті тақтада тапсырма орындау ( HTML тілінде құжат структурасын құру)
Цифрлық диктант
•
•
•
•
•
•
•
•
URL сервердің бірінші бетіне жазылатын адрес;
Броузер гипермәтінді көру программасы емес;
Тәг HTML тілінің командасы;
HTML кодтарын жазу үшін Word програмасы қолданылады;
Жұпсыпсыз тәг дегеніміз ашылады да жабылады;
HTML мәтінді белгілеу тәгі;
тәгімен веб беттің негізгі бөлімі басталады;
жазылады.
Жауабы: 10100111.
ЖАҢА САБАҚ
Қазіргі уақыттағы браузерлер бейненің
әртүрлі форматтарымен жұмыс істей
алады, бірақ көшілігінде қоданылатыны –
.GIF
.JPEG
Фотолар үшін JPEG форматын қолданған жөн.
Сурет пен пиктограммалар үшін GIF форматын.
Қазіргі уақыттағы браузерлер бейненің
әртүрлі форматтарымен жұмыс істей
алады, бірақ көшілігінде қоданылатыны –
.GIF
.JPEG
Фотолар үшін JPEG форматын қолданған жөн.
Сурет пен пиктограммалар үшін GIF форматын.
GIF – (Graphics Interchange Format)
графикамен алмасу форматы.
Артықшылығы:
1. Платформалы-тәуелсіз кодталуы (Windows, Macintosh,
Unics).
2. Файлды құруда ерекше технология қысу қолданылады,
бұл оның көлемін қысқартады және желіде
тасымалдануын жылдамтатады.
3. GIF-бейнелерді анимациялауға жеңіл
Кемшілік: Шектеулі түстер жиынты
Пиктограммалар мен шағын суреттер үшін қолданылады
7 Кб
159 Кб
113 Кб
JPEG - (Joint Photographic Expert Group) –
стандарттауды ұйымдастыру.
Артықшылығы:
1. Платформалы-тәуелсіз кодталу. (Windows, Macintosh,
Unics).
2. Файлды құруда ерекше технология қысу қолданылады,
бұл оның көлемін қысқартады және желіде
тасымалдануын жылдамтатады.
3. Он мыңдаған түстерді қамтиды.
37 Кб
20 Кб
Атрибуттары:
Src – міндетті ,мәні - сурет адресі.
Әдетте сурет файлдарын бет сақталған қалтаға немесе
бөлек қалталарға сақталады;
alt – “Астана ару қала” Бұл мәтін егер тышқанды суретке
жақындатсақ түсініктеме ретінде көрінеді. Alt мәні –
мәтіннің жолының ұзындығы 1024 символдан тұрады.
Тырнақша міндетті түрде.
Alt= “Астана – ару қала “ бұл мәтін суретке тышқан
көрсеткішін апарса көрінеді.
align –теңестіру.Суреттің орналасуын анық
көрсеткен дұрыс.
Мәндері:
left, right – сурет оң жақ немесе сол жақ шекарада
орналасады.
top – мәтін суреттің жоғарғы жағына орналасады.
middle –мәтін суреттің ортасында орналасады.
bottom –мәтін суреттің төменгі жағында
орналасады.
border – суреттің айналасына жақтау қою немесе алып
тастау.
border= жақтау қалыңдығын пиксельмен көрсету.
border=0 – жақтауды алып тастау.
height, width – суреттің ені мен биіктігін пилсельмен
көрсету.Сурет өлшемдерін өз өлшемдерінен үлкен немесе
кіші болуы мүмкін.Браузер автоматты түрде суреттің
масштабын реттейді,мәндерді терезеге қатысты % -пен
көрсетуге болады.
width = “100%” height= 20 – терезенің барлық аумағында ені
20 пиксель болады.Егер width = “30%” көрсетсеңіз ,онда
браузер биіктігі өзі көрсетеді.Егер сурет жүктелмесе,онда
экранда height, width атрибуттары көрсетілген бос орын
қалады.
hspace, vspace –көлденең және тігінен сурет пен мәтін
арасында пиксельмен көрсету.
Суретті ортаға туралау.
Суретті ортаға туралау оны мәтіннен ерекшелеу
бөлімінің абзац тәгтерімен немесе жаңа жол арқылы
орындалады.
1 тәсіл:
2 тәсіл:
Мәтін
Мәтін
Мәтін
Мәтін
Суреттің мәтін арасымен өтуі.
align атрибутының left және right мәндері құжаттың оң
және сол жақтарында орналасады. Сонан соң браузер
құжаттың мазмұнын қалған бос кеңістікке
шығарады.Суретпен араласқан жағдайда мәтін сурет
арасында өтеді.
![](«Astana.jpg")
hspace=10>Арайлы менің Астанам!
Көк орай шөбім,
Егер
тәгінде
align=left немесе
right атрибутын
көрсетпесек,он
да сайтта мәтін
былайша
орналасады:
Арайлы менің Астанам!
hspace=10>Арайлы менің Астанам!
Көк орай шөбім,
Құжаттың екі жағынада суреттер қоюға болады.Бұл
жағдайда суреттер мәтіннің алдында беріледі.
Бәйтерек -металл, әйнек, бетоннан құйылған конструкция. Биіктігі 105 метр, ал 97
метр биіктікте қаланы қарайтын алаң орналасқан. Оның салмағы 1000 тоннадан
астам.
Мұнда әлемде бірінші, диаметрі 22 метр, салмағы 300 тонна болатын күн сәулесінің
түсуіне байланысты өзгеріп тұратын шар қойылған.
Ол жас Астана сәулетінің жаңаруының белгісі, Қазақстанның символы болып
есептелінеді.
Түсініктеме:
1. Екі суреттің де атрибут мәндері width=“25%”,
бірақ оң жақтан сурет сол жақтағы суретен кіші.
2. Мәтін суреттер ортасында емес, барлық
суреттерден кейін көріну үшін
қолданылады.
Егер бірнеше суреттің орналасу деңгейлері бірдей
болса (left или right), онда келесі сурет алдыңғы
суретке қатысты орналасады.
Ақорда
Бәйтерек
Нұр мешіті
vspace=20>Ақ орда
![](“2.jpg")
vspace=20>Бәйтерек
![](“3.jpg")
vspace=20>Мешіт