Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Презентации / "HTML құжатында Сурет қою. Сурет пен мәтін орналасуы"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

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

Выберите документ из архива для просмотра:

Выбранный для просмотра документ Ашы? саба?.pptx

библиотека
материалов
Ашық сабақ Тақырыбы: HTML құжатында Сурет қою. Сурет пен мәтін орналасуы Өткі...
Мақсаты: HTML –де құжатқа графикалық бейне кірістіруді үйрету
Қайталау сұрақтары? 1. Html де шрифтпен жұмыс жасау үшін қандай тег қолданыла...
Миға шабуыл 1. Web сайт құру бізге неге қажет? 2. Web бетіне сурет шығарудың...
Жаңа сабақ Html құжатына суретті ораналастыру үшін сурет .jpg, .gif, .png кең...
Сонымен қатар біз құжатқа суретті қойғанда, ол сурет қандай өлшемде веб беті...
   Менің парақшам      Бұл мысалды браузерде ашып көретін болсақ...
Веб браузер бетіне сурет пен мәтін енгізу, ALIGN атрибутының көмегімен жүзеге...
Менің парақшам    Информатика пәні компьютермен тығыз байланысты. Бірақ, к...
Практикалық тапсырма 1 топ. Суретті шығару 2 топ. Суреттің өлшемін беру 3 топ...
Сәйкестігін іздеу Тегтер        Сипаттамасы Жартылай қалың Шрифттүсі қызыл Аб...
Сергіту сәті
Сабақты бекіту сұрақтары 1. Құжатқа сурет қою тегі? 2. Суреттің биіктігімен е...
Кері байланыс
Назарларыңызға рахмет!!!
18 1

Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Описание презентации по отдельным слайдам:

№ слайда 1 Ашық сабақ Тақырыбы: HTML құжатында Сурет қою. Сурет пен мәтін орналасуы Өткі
Описание слайда:

Ашық сабақ Тақырыбы: HTML құжатында Сурет қою. Сурет пен мәтін орналасуы Өткізген: Кунтуарова Айдана Информатика пәні мұғалімі

№ слайда 2 Мақсаты: HTML –де құжатқа графикалық бейне кірістіруді үйрету
Описание слайда:

Мақсаты: HTML –де құжатқа графикалық бейне кірістіруді үйрету

№ слайда 3 Қайталау сұрақтары? 1. Html де шрифтпен жұмыс жасау үшін қандай тег қолданыла
Описание слайда:

Қайталау сұрақтары? 1. Html де шрифтпен жұмыс жасау үшін қандай тег қолданылады? 2. Font тегінің color және face қасиеттері нені білдіреді. 3. Құжаттың тақырып бөлімі қандай тегте жазылады? 4. Курсив пен шығару тегі? 5. Құжаттың денесінде не орналасады?

№ слайда 4 Миға шабуыл 1. Web сайт құру бізге неге қажет? 2. Web бетіне сурет шығарудың
Описание слайда:

Миға шабуыл 1. Web сайт құру бізге неге қажет? 2. Web бетіне сурет шығарудың маңызы не де?

№ слайда 5 Жаңа сабақ Html құжатына суретті ораналастыру үшін сурет .jpg, .gif, .png кең
Описание слайда:

Жаңа сабақ Html құжатына суретті ораналастыру үшін сурет .jpg, .gif, .png кеңеймесінде болу керек. Құжатқа суретті қою <IMG> тегі арқылы қолданылады. Img тегінің src қасиеті арқылы суреттің адресін беруге болады. Мысалы: <Html> <head> <title> Менің парақшам</title> </head> <body> <img src=“suret.jpg”> </body> </html> Бұл мысалды браузерде ашып көретін болсақ...

№ слайда 6
Описание слайда:

№ слайда 7 Сонымен қатар біз құжатқа суретті қойғанда, ол сурет қандай өлшемде веб беті
Описание слайда:

Сонымен қатар біз құжатқа суретті қойғанда, ол сурет қандай өлшемде веб бетіне солай орналасады. Сондықтан біз оның өлшемін бере аламыз. Ол үшін IMG тегінің мынадай қасиеттері бар: WIDTH – Суреттің ені көп жағдайда пикселмен өлшенеді. HEIGHT – суреттің биіктігі. BORDER – Сурет рамкасы. Мысалы: <img src=‘suret.jpg’,width=‘200’, height=‘200’ border=’20’>

№ слайда 8    Менің парақшам      Бұл мысалды браузерде ашып көретін болсақ...
Описание слайда:

<Html> <head> <title> Менің парақшам</title> </head> <body> <img src=‘suret.jpg’,width=‘200’, height=‘200’ border=’20’> </body> </html> Бұл мысалды браузерде ашып көретін болсақ...

№ слайда 9
Описание слайда:

№ слайда 10 Веб браузер бетіне сурет пен мәтін енгізу, ALIGN атрибутының көмегімен жүзеге
Описание слайда:

Веб браузер бетіне сурет пен мәтін енгізу, ALIGN атрибутының көмегімен жүзеге асыруға болады. Мысалы: <img src=‘suret.jpg’, align=‘left’> мәтін жазылады Мәні Сипаттамасы   Align=left Суреттісолжағыбойыншатуралау.Мәтінсуреттіңоңжағынаорналасады. Align=right Суреттіоңжағыбойыншатуралау.Мәтінсуреттіңсолжағынаорналасады.

№ слайда 11 Менің парақшам    Информатика пәні компьютермен тығыз байланысты. Бірақ, к
Описание слайда:

<Html> <head> <title> Менің парақшам</title> </head> <body> <img src=‘suret.jpg’, align=‘left’> Информатика пәні компьютермен тығыз байланысты. Бірақ, компьютер - оның көмегі арқылы ақпаратпен жұмыс істеуге болатын құрал ғана. Адамдардың барлық қызметі ақпаратпен байланысты. Кез келген тамақты пісіру үшін оған қажетті заттар мен дайындау жолын білу қажет. автомобильді басқару үшін немесе үй тұрғызу үшін оған қажетті ақпаратты білуіміз қажет. </body> </html> Бұл мысалды браузерде ашып көретін болсақ...

№ слайда 12
Описание слайда:

№ слайда 13 Практикалық тапсырма 1 топ. Суретті шығару 2 топ. Суреттің өлшемін беру 3 топ
Описание слайда:

Практикалық тапсырма 1 топ. Суретті шығару 2 топ. Суреттің өлшемін беру 3 топ. Суретті сол жаққа, мәтінді оң жаққа шығару

№ слайда 14 Сәйкестігін іздеу Тегтер        Сипаттамасы Жартылай қалың Шрифттүсі қызыл Аб
Описание слайда:

Сәйкестігін іздеу Тегтер <Img> <B> <Font> <U> <Imgsrc=‘suret.jpg’, Border=20> <Font color=red> <P> Сипаттамасы Жартылай қалың Шрифттүсі қызыл Абзац Сурет қою Шрифтпен жұмыс жасау Сурет қою,сурет рамкасы 20 пиксельмен Асты сызылған

№ слайда 15 Сергіту сәті
Описание слайда:

Сергіту сәті

№ слайда 16 Сабақты бекіту сұрақтары 1. Құжатқа сурет қою тегі? 2. Суреттің биіктігімен е
Описание слайда:

Сабақты бекіту сұрақтары 1. Құжатқа сурет қою тегі? 2. Суреттің биіктігімен енін беру? 3. Суретті сол жаққа шығару?

№ слайда 17 Кері байланыс
Описание слайда:

Кері байланыс

№ слайда 18 Назарларыңызға рахмет!!!
Описание слайда:

Назарларыңызға рахмет!!!

Выбранный для просмотра документ сурет ?ою.docx

библиотека
материалов



«Шетпе лицейі» мемелекеттік мекемесі



















Ашық сабақ











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









Өткізген: Кунтуарова Айдана

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













2016 жыл



7 - сынып

Уақыты

12.02.2016

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

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

Мақсаты

HTML –де құжатқа графикалық бейне кірістіруді үйрету

Жұмыс нәтижесі

Html құжатына сурет қоя алады.

Сілтеме

Html құжаты туралы методикалық нұсқау

Негізгі идеясы

Html құжатының құрылымымен танысты

Қолданылған әдістер мен тәсілдер

  1. Блум таксономиясы

  2. Интерактивті әдіс (Сәйкестілігін іздеу)

  3. Интербелсенді әдіс (Миға шабуыл, Рефлекция)

  4. Кері байланыс

Ресурстар

Компьютер, Блокнот және Internet Explorer программалары, интерактивті тақта, практикалық тапсырма

Сабақтың өтілетін уақыты

90 мин

Сабақтың жоспары

  1. Ұйымдастыру

  2. Қайталау сұрақтары

  3. Миға шабуыл

  4. Жаңа сабақ

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

  6. Сәйкестігін табу

  7. Сергіту сәті

  8. Рефлекция

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


Сабақ бойынша мұғалімнің  жазбалары

2. Қайталау сұрақтары

1. Html де шрифтпен жұмыс жасау үшін қандай тег қолданылады?

2. Font тегінің color және face қасиеттері нені білдіреді.

3. Құжаттың тақырып бөлімі қандай тегте жазылады?

4. Курсив пен шығару тегі?

5. Құжаттың денесінде не орналасады?

3. Миға шабуыл

1. Сайт құру бізге неге қажет?

2. Web бетіне сурет шығарудың маңызы не де?

4. Жаңа сабақ

Суреттік бейнелер WEB - парақтарды әшекейлеп безендіру кезінде маңызды құралдар ролін атқарады. Суреттерді бейнелеу ережесін былай деуге болады:
1. Суреттерді құжаттың ішіне орналастыру үшін IMG тегі қолданылады.
2. Бұл тегте міндетті түрде SRC=»…» атрибуты болуы керек. Оның мәні абсолюттік және салыстырмалы түрде жазылған бейнелеу файлының URL адресі көрсетеді. Құжатты экранға шығарған кезде ол міндетті түрде құрамындағы суреттермен бейнеленеді. Және ол тегі тұрған орнына көрінеді.

Мысалы:  экранға fish. jpg файлдағы балық суретін шығарады.
Ескерту: Қазіргі кездегі браузерлер тек ғана gif, jpg, png типтеріндегі суреттік файлдарды ғана пайдаланады.
Суреттер өздерінің көлемдерін сақтай отырып WEB - парағына орналасады. Егер суретті ықшамдап бейнелеу кезінде оның масштабын өзгерту қажеттігі туса, суреттің қажетті көлемін widh, height атрибуттарының көмегімен беруге болады. Осы 2 атрибуттың мәні WEB - парақтағы суреттердің биіктігі мен енін бүтін санмен берілген пиксельмен көрсетеді.
Мысалы: width=500 height=250> суретті 500×250 нүктелерден тұратын төртбұрышты аймаққа орналастырады. Сурет айналасындағы жақтау (border) сызығының қалыңдығын да параметр ретінде көрсетуге болады.
Суреті бар мәтінді жолда түзету ALIGN атрибутының көмегімен жүзеге асырылады. Айтылмаған жағдайда, суретті жолға қойғанда мәтін суреттің төменгі жағы бойынша түзетіледі.


Сіздің бұл түзетуді өзгерткіңіз келуі мүмкін, себебі бұл жағдайда көп бос орын қалады. Мұны IMG дискрипторындағы түзету ALIGN атрибутының көмегімен жүзеге асыруға болады.


Мәні

Сипаттамасы


Align=left

Суретті сол жағы бойынша туралау. Мәтін суреттің оң жағына орналасады.

Align=right

Суретті оң жағы бойынша туралау. Мәтін суреттің сол жағына орналасады.


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

Сабақтан түсінгені бойынша практикалық тапсырма орындау.

1 топқа Веб бетіне сурет шығару

2 топқа Суреттің өлшемін беру, жақтау салу

3 топқа Суретті сол жаққа, мәтінді оң жаққа шығару

6. Сәйкестігін іздеу

Тегтер

Сипаттамасы

Жартылай қалың

Шрифт түсі қызыл

Абзац

Сурет қою

suret.jpg’,

Шрифтпен жұмыс жасау

Сурет қою, сурет рамкасы 20 пиксельмен

Асты сызылған

7. Сергіту сәті

Көзге жаттығу жасау
8. Сабақты бекіту сұрақатры:

1. Құжатқа сурет қою тегі?

2. Суреттің биіктігімен енін беру?

3. Суретті сол жаққа шығару?

4. Веб сайтты кімдер құра алады?

















Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Автор
Дата добавления 20.02.2016
Раздел Информатика
Подраздел Презентации
Просмотров806
Номер материала ДВ-470893
Получить свидетельство о публикации
Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх