Веб беттегі графика

ИНФОРМАТИКА

Информатика пәнінің мұғалімі

Дюсембаева Риза

WEB БЕТТЕГІ

ГРАФИКА

САБАҚ МАҚСАТЫ

Білімділік:

Web беттерге гарфикалық суреттерді енгізудің негізгі принциптерін түсіндіру; Оқушыларды суреттерді қою тәгтерімен таныстыру; осы тәгтердің қолданылуын мысалдармен көрсету.

Дамытушылық:

Оқушылардың ой- өріс, қабілеттерін дамыту, өз ойларын ашық айту, қорытынды жасай білу.

Тәрбиелік:

Ұқыптылыққа, сыпайлыққа, адамгершілікке тәрбиелеу.

Сабақ түрі

Аралас

Сабақ әдістері

Видеопрезентация, тест, көрсете түсіндіру.

Сабақ көрнекілігі

Мультимедиялық құралдар

Сабақ барысы

Ұйымдастыру кезеңі

Оқушылардың сабаққа қатысын тексеру;

Сабақ мақсатын баяндау;

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

Интерактивті тақтада тапсырма орындау ( HTML тілінде құжат структурасын құру)

Цифрлық диктант

URL сервердің бірінші бетіне жазылатын адрес;

Броузер гипермәтінді көру программасы емес;

Тәг HTML тілінің командасы;

HTML кодтарын жазу үшін Word програмасы қолданылады;

Жұпсыпсыз тәг дегеніміз ашылады да жабылады;

HTML мәтінді белгілеу тәгі;

тәгімен веб беттің негізгі бөлімі басталады;

, тәгтерінің арасында құжаттың аты жазылады.

Жауабы: 10100111.

ЖАҢА САБАҚ

Қазіргі уақыттағы браузерлер бейненің әртүрлі форматтарымен жұмыс істей алады, бірақ көшілігінде қоданылатыны -

Фотолар үшін JPEG форматын қолданған жөн.

Сурет пен пиктограммалар үшін GIF форматын.

. GIF

. JPEG

Фотолар үшін JPEG форматын қолданған жөн.

Сурет пен пиктограммалар үшін GIF форматын.

. GIF

. JPEG

GIF - (Graphics Interchange Format)

графикамен алмасу форматы.

Артықшылығы:

Платформалы-тәуелсіз кодталуы (Windows, Macintosh, Unics) .

Файлды құруда ерекше технология қысу қолданылады, бұл оның көлемін қысқартады және желіде тасымалдануын жылдамтатады.

GIF-бейнелерді анимациялауға жеңіл

Кемшілік: Шектеулі түстер жиынты

 Пиктограммалар мен шағын суреттер үшін қолданылады

7 Кб

159 Кб

113 Кб

JPEG - (Joint Photographic Expert Group) - стандарттауды ұйымдастыру.

Артықшылығы:

Платформалы-тәуелсіз кодталу. (Windows, Macintosh, Unics) .

Он мыңдаған түстерді қамтиды.

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 мәндері құжаттың оң және сол жақтарында орналасады. Сонан соң браузер құжаттың мазмұнын қалған бос кеңістікке шығарады. Суретпен араласқан жағдайда мәтін сурет арасында өтеді.