Выбранный для просмотра документ Ашы? саба?.pptx
Скачать материал ""HTML құжатында Сурет қою. Сурет пен мәтін орналасуы""
Рабочие листы
к вашим урокам
Скачать
1 слайд
Ашық сабақ Тақырыбы: HTML құжатында Сурет қою. Сурет пен мәтін орналасуы Өткізген: Кунтуарова Айдана Информатика пәні мұғалімі
2 слайд
Мақсаты: HTML –де құжатқа графикалық бейне кірістіруді үйрету
3 слайд
Қайталау сұрақтары? 1. Html де шрифтпен жұмыс жасау үшін қандай тег қолданылады? 2. Font тегінің color және face қасиеттері нені білдіреді. 3. Құжаттың тақырып бөлімі қандай тегте жазылады? 4. Курсив пен шығару тегі? 5. Құжаттың денесінде не орналасады?
4 слайд
Миға шабуыл 1. Web сайт құру бізге неге қажет? 2. Web бетіне сурет шығарудың маңызы не де?
5 слайд
Жаңа сабақ 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 атрибутының көмегімен жүзеге асыруға болады. Мысалы: <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 топ. Суретті сол жаққа, мәтінді оң жаққа шығару
14 слайд
Сәйкестігін іздеу Тегтер <Img> <B> <Font> <U> <Imgsrc=‘suret.jpg’, Border=20> <Font color=red> <P> Сипаттамасы Жартылай қалың Шрифттүсі қызыл Абзац Сурет қою Шрифтпен жұмыс жасау Сурет қою,сурет рамкасы 20 пиксельмен Асты сызылған
15 слайд
Сергіту сәті
16 слайд
Сабақты бекіту сұрақтары 1. Құжатқа сурет қою тегі? 2. Суреттің биіктігімен енін беру? 3. Суретті сол жаққа шығару?
17 слайд
Кері байланыс
18 слайд
Назарларыңызға рахмет!!!
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ сурет ?ою.docx
«Шетпе лицейі» мемелекеттік мекемесі
Ашық сабақ
Тақырыбы: HTML құжатында Сурет қою. Сурет пен мәтін орналасуы
Өткізген: Кунтуарова Айдана
Информатика пәні мұғалімі
2016 жыл
7 - сынып
Уақыты
12.02.2016
Сабақтың тақырыбы
HTML құжатында Сурет қою. Сурет пен мәтін орналасуы
Мақсаты
HTML –де құжатқа графикалық бейне кірістіруді үйрету
Жұмыс нәтижесі
Html құжатына сурет қоя алады.
Сілтеме
Html құжаты туралы методикалық нұсқау
Негізгі идеясы
Html құжатының құрылымымен танысты
Қолданылған әдістер мен тәсілдер
Блум таксономиясы
Интерактивті әдіс (Сәйкестілігін іздеу)
Интербелсенді әдіс (Миға шабуыл, Рефлекция)
Кері байланыс
Ресурстар
Компьютер, Блокнот және Internet Explorer программалары, интерактивті тақта, практикалық тапсырма
Сабақтың өтілетін уақыты
90 мин
Сабақтың жоспары
Ұйымдастыру
Қайталау сұрақтары
Миға шабуыл
Жаңа сабақ
Практикалық тапсырма
Сәйкестігін табу
Сергіту сәті
Рефлекция
Үйге тапсырма
Сабақ бойынша мұғалімнің жазбалары
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. Сәйкестігін іздеу
Тегтер
Сипаттамасы
Жартылай қалың
Шрифт түсі қызыл
Абзац
Сурет қою
Шрифтпен жұмыс жасау
Сурет қою, сурет рамкасы 20 пиксельмен
Асты сызылған
7. Сергіту сәті
Көзге жаттығу жасау
8. Сабақты бекіту сұрақатры:
1. Құжатқа сурет қою тегі?
2. Суреттің биіктігімен енін беру?
3. Суретті сол жаққа шығару?
4. Веб сайтты кімдер құра алады?
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
6 654 177 материалов в базе
Настоящий материал опубликован пользователем Кунтуарова Айдана Азанқызы. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.