ЖИ көмекші
WEB-бетке сурет қою 10 сынып
Тақырып бойынша 11 материал табылды
WEB-бетке сурет қою 10 сынып
Материал туралы қысқаша түсінік
WEB-бетке сурет қою. ішінде практикалық тапсырмалар мен қосымша тапсырмалар бар
Материалдың қысқаша нұсқасы
1 / 23
Жүктеу
Бөлісу
ЖИ арқылы жасау
Слайдтың жеке беттері
#1 слайд
САБАҚТЫҢ ТАҚЫРЫБЫ:
WEB-БЕТКЕ СУРЕТ
ҚОЮ
10-сынып
1 слайд
САБАҚТЫҢ ТАҚЫРЫБЫ: WEB-БЕТКЕ СУРЕТ ҚОЮ 10-сынып
#2 слайд
САБАҚТЫҢ МАҚСАТЫ:
HTML тілінің графикалық
мүмкіндіктерін қолданып, веб-бет
жобасын безендіре алу
Бағалау критерийлері:
Web-бетке суретті қою;
Сурет қою тегінің атрибуттары жұмысын білу;
Суреті бар фонды жасай алу.
2 слайд
САБАҚТЫҢ МАҚСАТЫ: HTML тілінің графикалық мүмкіндіктерін қолданып, веб-бет жобасын безендіре алу Бағалау критерийлері: Web-бетке суретті қою; Сурет қою тегінің атрибуттары жұмысын білу; Суреті бар фонды жасай алу.
#3 слайд
ТҮЙІН СӨЗ:
Қазақ тілінде Ағылшын тілінде
Сурет Image
3 слайд
ТҮЙІН СӨЗ: Қазақ тілінде Ағылшын тілінде Сурет Image
#4 слайд
Web-беттегі графика
Суреттiк бейнелер web-беттерді әшекейлеп безендiру кезiнде маңызды рөл атқарады. Суреттер
HTML құжаттарынан бөлек орналасқан жеке бумаларда сақталады, алайда олар браузер арқылы web-
беттердің iшiнде бейнеленедi.
Web-бетке сурет қою
Бетке сурет қою үшін <img> дара тегі қолданылады. Ол BODY элементінің кез-келген жерінде
орналасуы мүмкін. Стандартты сурет форматтары GIF, PNG және JPEG болып табылады:
•JPEG – фотосуреттерді немесе мәтіні жоқ сұр реңктегі суреттерді сақтау үшін қолданылады;
•GIF – анимация үшін қолданылады;
•PNG – қалған суреттерге арналған формат (иконкалар, батырмалар және т.б.)
Бірақ бұл тег міндетті түрде src, alt атрибуттарымен қатар қолданылады. Бұл тегтің бірінші, ең
маңызды атрибуты – src атрибуты болып табылады. (ағылшын тіліндегі source – дереккөзі сөзінің
қысқартуы). Бұл атрибут сурет файлының орналасқан жерін көрсетеді.
HTML бетке суретті қою коды мына түрде болады:
<img src=“foto.jpg”>
4 слайд
Web-беттегі графика Суреттiк бейнелер web-беттерді әшекейлеп безендiру кезiнде маңызды рөл атқарады. Суреттер HTML құжаттарынан бөлек орналасқан жеке бумаларда сақталады, алайда олар браузер арқылы web- беттердің iшiнде бейнеленедi. Web-бетке сурет қою Бетке сурет қою үшін <img> дара тегі қолданылады. Ол BODY элементінің кез-келген жерінде орналасуы мүмкін. Стандартты сурет форматтары GIF, PNG және JPEG болып табылады: •JPEG – фотосуреттерді немесе мәтіні жоқ сұр реңктегі суреттерді сақтау үшін қолданылады; •GIF – анимация үшін қолданылады; •PNG – қалған суреттерге арналған формат (иконкалар, батырмалар және т.б.) Бірақ бұл тег міндетті түрде src, alt атрибуттарымен қатар қолданылады. Бұл тегтің бірінші, ең маңызды атрибуты – src атрибуты болып табылады. (ағылшын тіліндегі source – дереккөзі сөзінің қысқартуы). Бұл атрибут сурет файлының орналасқан жерін көрсетеді. HTML бетке суретті қою коды мына түрде болады: <img src=“foto.jpg”>
#5 слайд
<html>
<head>
<title> Abai </title>
</head>
<body>
<img src="Abay.jpg">
</body>
</html>
Ескерту!
Графикалық файлдар
HTML файлының
орналасқан бумасында
болуы тиіс екендігін естен
шығармау керек.
5 слайд
<html> <head> <title> Abai </title> </head> <body> <img src="Abay.jpg"> </body> </html> Ескерту! Графикалық файлдар HTML файлының орналасқан бумасында болуы тиіс екендігін естен шығармау керек.
#6 слайд
Сурет файлының адресін көрсетудің кейбір мысалдарын қарастырайық:
<img src=“myfoto/foto.jpg”> - мұндай жазба біздің html құжатымыз орналасқан директорияда
foto.jpg файлы орналасқан myfoto бумасының бар екенін білдіреді.
<img src=“../foto.jpg”> - фотосурет құжаттан бір деңгей жоғары орналасқан.
src атрибутына суреттің url-адресін қоюға болады:
<img src=“http://www.site.kz/foto/foto.jpg”>
Ескерту!
• Сайттарға жүктелетін графикалық файлдар JPEG, GIF, PNG, BMP және SVG
форматында болуы керек.
• Егер суреттің ені мен биіктігіне қатысты нақты шектеу қойылмаса, сурет бастапқы
өлшемінде қалады.
• Егер сыртқы дерек көздерінен алынған суретті қолданатын болсаңыз, онда олардың
авторлық құқықпен қорғалған болуы мүмкін екенін ұмытпаңыздар! Сонымен қатар
оны пайдаланған күннің өзінде автор оны өшіріп немесе өзгертіп тастауы мүмкін.
6 слайд
Сурет файлының адресін көрсетудің кейбір мысалдарын қарастырайық: <img src=“myfoto/foto.jpg”> - мұндай жазба біздің html құжатымыз орналасқан директорияда foto.jpg файлы орналасқан myfoto бумасының бар екенін білдіреді. <img src=“../foto.jpg”> - фотосурет құжаттан бір деңгей жоғары орналасқан. src атрибутына суреттің url-адресін қоюға болады: <img src=“http://www.site.kz/foto/foto.jpg”> Ескерту! • Сайттарға жүктелетін графикалық файлдар JPEG, GIF, PNG, BMP және SVG форматында болуы керек. • Егер суреттің ені мен биіктігіне қатысты нақты шектеу қойылмаса, сурет бастапқы өлшемінде қалады. • Егер сыртқы дерек көздерінен алынған суретті қолданатын болсаңыз, онда олардың авторлық құқықпен қорғалған болуы мүмкін екенін ұмытпаңыздар! Сонымен қатар оны пайдаланған күннің өзінде автор оны өшіріп немесе өзгертіп тастауы мүмкін.
#7 слайд
Height, width атрибуттары
<html>
<head>
<title> Abai </title>
</head>
<body>
<h2> HTML фото өлшемі</h2>
<img src="Abay.jpg">
<img src="Abay.jpg" width="150" height="20">
<img src="Abay.jpg" width="20%" height="40%">
</body>
</html>
Сурет
атрибуттары
Форматы Сипаттамасы
height <img src=“foto.jpg” height=“110”>Браузер терезесінің ішіндегі суреттің биіктігін (тігінен
өлшемін) пиксельмен немесе процентпен береді
width <img src=“foto.jpg” width=“200”>Браузер терезесінің ішіндегі суреттің енін
(көлденеңінен өлшемін) пиксельмен немесе процентпен
береді
7 слайд
Height, width атрибуттары <html> <head> <title> Abai </title> </head> <body> <h2> HTML фото өлшемі</h2> <img src="Abay.jpg"> <img src="Abay.jpg" width="150" height="20"> <img src="Abay.jpg" width="20%" height="40%"> </body> </html> Сурет атрибуттары Форматы Сипаттамасы height <img src=“foto.jpg” height=“110”>Браузер терезесінің ішіндегі суреттің биіктігін (тігінен өлшемін) пиксельмен немесе процентпен береді width <img src=“foto.jpg” width=“200”>Браузер терезесінің ішіндегі суреттің енін (көлденеңінен өлшемін) пиксельмен немесе процентпен береді
#8 слайд
Alt атрибуты
Alt атрибуты сипаттама беру атрибуты деп аталады. Alt атрибутынан соң қолданылатын
жол аңдатпа жол болып, ол меңзерді суретке алып барғанда пайда болады. Кей жағдайда
қойылған сурет web-бетте көрінбей қалса, суреттің не туралы екенін көрсетіп тұратын
жазу шығып тұрады.
<html>
<head>
<title> foto </title>
</head>
<body>
<img src=“Baiterek.jpg" alt=“Бәйтерек” width="150" height="200">
</body>
</html>
8 слайд
Alt атрибуты Alt атрибуты сипаттама беру атрибуты деп аталады. Alt атрибутынан соң қолданылатын жол аңдатпа жол болып, ол меңзерді суретке алып барғанда пайда болады. Кей жағдайда қойылған сурет web-бетте көрінбей қалса, суреттің не туралы екенін көрсетіп тұратын жазу шығып тұрады. <html> <head> <title> foto </title> </head> <body> <img src=“Baiterek.jpg" alt=“Бәйтерек” width="150" height="200"> </body> </html>
#9 слайд
<html>
<head>
<title> Abai </title>
</head>
<body>
<img src="Abay.jpg">
<pre><font face="times new roman" size=6> Абай Құнанбаев
</body>
</html>
9 слайд
<html> <head> <title> Abai </title> </head> <body> <img src="Abay.jpg"> <pre><font face="times new roman" size=6> Абай Құнанбаев </body> </html>
#10 слайд
Border атрибуты
Border - суреттің жақтауын, ернеуін белгілеп, оның қалыңдығын пиксельмен есептейтін атрибут.
Мысалы: <img src="foto.jpg" border="5">
<html>
<head>
<title> Abai </title>
</head>
<body>
<img src="Abay.jpg" border="5">
<pre><font face="times new romsn" size=6> Абай Құнанбаев
</body>
</html>
10 слайд
Border атрибуты Border - суреттің жақтауын, ернеуін белгілеп, оның қалыңдығын пиксельмен есептейтін атрибут. Мысалы: <img src="foto.jpg" border="5"> <html> <head> <title> Abai </title> </head> <body> <img src="Abay.jpg" border="5"> <pre><font face="times new romsn" size=6> Абай Құнанбаев </body> </html>
#11 слайд
Сурет пен мәтіннің орналасуы
<html>
<head>
<title> Abai </title>
</head>
<body>
<h2> Абай Құнанбайұлы (1845-1904)</h2>
< img src="Abay.jpg" border="5" align="right">
<p>Ұлы ақын, ағартушы, қазақтың жазба әдебиетінің және әдеби
тілінің негізін салушы – Абай (Ибраһим) Құнанбайұлы 1845
жылы
23 тамызда Семей облысы (қазіргі Шығыс Қазақстан облысы),
Абай ауданының Шыңғыстау бауырында дүниеге келді.</p>
</body>
</html>
11 слайд
Сурет пен мәтіннің орналасуы <html> <head> <title> Abai </title> </head> <body> <h2> Абай Құнанбайұлы (1845-1904)</h2> < img src="Abay.jpg" border="5" align="right"> <p>Ұлы ақын, ағартушы, қазақтың жазба әдебиетінің және әдеби тілінің негізін салушы – Абай (Ибраһим) Құнанбайұлы 1845 жылы 23 тамызда Семей облысы (қазіргі Шығыс Қазақстан облысы), Абай ауданының Шыңғыстау бауырында дүниеге келді.</p> </body> </html>
#12 слайд
Фонға сурет қою
Web-бетте фонға сурет қою үшін Body тегінің Background атрибутына сол суретке баратын жол
жазылады. Background сөзінің аудармасы фон дегенді білдіреді.
<html>
<head>
<title> Abai </title>
</head>
<body background="astana.jpg">
</body>
</html>
12 слайд
Фонға сурет қою Web-бетте фонға сурет қою үшін Body тегінің Background атрибутына сол суретке баратын жол жазылады. Background сөзінің аудармасы фон дегенді білдіреді. <html> <head> <title> Abai </title> </head> <body background="astana.jpg"> </body> </html>
#13 слайд
Title атрибуты
Title - суретке меңзерді жақындатқанда пайда болатын код.
Мысалы: <img src="Abay.jpg" title="Абай Құнанбайұлы">
<html>
<head>
<title> Abai </title>
</head>
<body>
<img src="Abay.jpg" title="Абай Құнанбайұлы">
</body>
</html>
13 слайд
Title атрибуты Title - суретке меңзерді жақындатқанда пайда болатын код. Мысалы: <img src="Abay.jpg" title="Абай Құнанбайұлы"> <html> <head> <title> Abai </title> </head> <body> <img src="Abay.jpg" title="Абай Құнанбайұлы"> </body> </html>
#14 слайд
Hspace және vspace атрибуттары
Hspace=“…” – бүйір шегіністерін құрады (сол жақтан және оң жақтан)
Vspace=“...” – жоғарғы және төменгі шегіністерді құрады.
Мысалы: <img src="Abay.jpg" align=“left” > vspace=“5” hspace=“20”> Абай Құнанбайұлы</p>
<html>
<head>
<title> Abai </title>
</head>
<body>
<img src="Abay.jpg" align=“left” > vspace=“5” hspace=“20”> Абай Құнанбайұлы</p>
</body>
</html>
14 слайд
Hspace және vspace атрибуттары Hspace=“…” – бүйір шегіністерін құрады (сол жақтан және оң жақтан) Vspace=“...” – жоғарғы және төменгі шегіністерді құрады. Мысалы: <img src="Abay.jpg" align=“left” > vspace=“5” hspace=“20”> Абай Құнанбайұлы</p> <html> <head> <title> Abai </title> </head> <body> <img src="Abay.jpg" align=“left” > vspace=“5” hspace=“20”> Абай Құнанбайұлы</p> </body> </html>
#15 слайд
1-тапсырма. Сәйкестендіріңіздер.
width=“…”
border=“…”
align=“…”
alt=“…”
title=“…”
height=“…”
Суреттердің айналасында қара жиек құруға болады
HTML бетінің басқа элементтеріне қатысты суреттің туралау режимін анықтайды
Суретке меңзерді жақындатқанда пайда болатын код
Суреттің ені пиксель немесе пайызбен берілген
Альтернативті мәтінді шығарады
Суреттің биіктігі пиксель немесе пайызбен берілген
15 слайд
1-тапсырма. Сәйкестендіріңіздер. width=“…” border=“…” align=“…” alt=“…” title=“…” height=“…” Суреттердің айналасында қара жиек құруға болады HTML бетінің басқа элементтеріне қатысты суреттің туралау режимін анықтайды Суретке меңзерді жақындатқанда пайда болатын код Суреттің ені пиксель немесе пайызбен берілген Альтернативті мәтінді шығарады Суреттің биіктігі пиксель немесе пайызбен берілген
#16 слайд
1-тапсырма жауабы
width=“…”
border=“…”
align=“…”
alt=“…”
title=“…”
height=“…”
Суреттердің айналасында қара жиек құруға болады
HTML бетінің басқа элементтеріне қатысты суреттің туралау режимін анықтайды
Суретке меңзерді жақындатқанда пайда болатын код
Суреттің ені пиксель немесе пайызбен берілген
Альтернативті мәтінді шығарады
Суреттің биіктігі пиксель немесе пайызбен берілген
16 слайд
1-тапсырма жауабы width=“…” border=“…” align=“…” alt=“…” title=“…” height=“…” Суреттердің айналасында қара жиек құруға болады HTML бетінің басқа элементтеріне қатысты суреттің туралау режимін анықтайды Суретке меңзерді жақындатқанда пайда болатын код Суреттің ені пиксель немесе пайызбен берілген Альтернативті мәтінді шығарады Суреттің биіктігі пиксель немесе пайызбен берілген
#17 слайд
2-тапсырма.
HTML кодындағы сурет тұратын орынды “smiley.jpg” деп көрсетудің орнына, “face_smiley.jpg” деп
көрсетіп, қате жіберген.
<html>
<head>
<title> Фото </title>
</head>
<body>
<p><img src=“face_smiley.jpg">
</body>
</html>
Қатені қай кодпен түзеуге болатынын тап
<p><img alt=“smiley.jpg”></p>
<title> Фото smiley.jpg</title>
<p><img scr=“smiley.jpg”></p>
<p><img src=“smiley.jpg”></p>
<p><img src=“*.jpg”></p>
17 слайд
2-тапсырма. HTML кодындағы сурет тұратын орынды “smiley.jpg” деп көрсетудің орнына, “face_smiley.jpg” деп көрсетіп, қате жіберген. <html> <head> <title> Фото </title> </head> <body> <p><img src=“face_smiley.jpg"> </body> </html> Қатені қай кодпен түзеуге болатынын тап <p><img alt=“smiley.jpg”></p> <title> Фото smiley.jpg</title> <p><img scr=“smiley.jpg”></p> <p><img src=“smiley.jpg”></p> <p><img src=“*.jpg”></p>
#18 слайд
2-тапсырма жауабы
HTML кодындағы сурет тұратын орынды “smiley.jpg” деп көрсетудің орнына, “face_smiley.jpg” деп
көрсетіп, қате жіберген.
<html>
<head>
<title> Фото </title>
</head>
<body>
<p><img src=“face_smiley.jpg">
</body>
</html>
Қатені қай кодпен түзеуге болатынын тап
<p><img alt=“smiley.jpg”></p>
<title> Фото smiley.jpg</title>
<p><img scr=“smiley.jpg”></p>
<p><img src=“smiley.jpg”></p>
<p><img src=“*.jpg”></p>
18 слайд
2-тапсырма жауабы HTML кодындағы сурет тұратын орынды “smiley.jpg” деп көрсетудің орнына, “face_smiley.jpg” деп көрсетіп, қате жіберген. <html> <head> <title> Фото </title> </head> <body> <p><img src=“face_smiley.jpg"> </body> </html> Қатені қай кодпен түзеуге болатынын тап <p><img alt=“smiley.jpg”></p> <title> Фото smiley.jpg</title> <p><img scr=“smiley.jpg”></p> <p><img src=“smiley.jpg”></p> <p><img src=“*.jpg”></p>
#19 слайд
3-тапсырма
Суреттің мәтіннің сол немесе оң жағына туралайтын HTML кодтарын көрсет. (Дұрыс жауап саны: 2)
<img src=“foto.jpg” vspace=“15”>
<img src=“foto.jpg” border=“5”>
<img src=“foto.jpg” align=“right”>
<img src=“foto.jpg” aligm=“left”>
<img src=“foto.jpg” vspace=“25”>
19 слайд
3-тапсырма Суреттің мәтіннің сол немесе оң жағына туралайтын HTML кодтарын көрсет. (Дұрыс жауап саны: 2) <img src=“foto.jpg” vspace=“15”> <img src=“foto.jpg” border=“5”> <img src=“foto.jpg” align=“right”> <img src=“foto.jpg” aligm=“left”> <img src=“foto.jpg” vspace=“25”>
#20 слайд
3-тапсырма жауабы
Суреттің мәтіннің сол немесе оң жағына туралайтын HTML кодтарын көрсет. (Дұрыс жауап саны: 2)
<img src=“foto.jpg” vspace=“15”>
<img src=“foto.jpg” border=“5”>
<img src=“foto.jpg” align=“right”>
<img src=“foto.jpg” aligm=“left”>
<img src=“foto.jpg” vspace=“25”>
20 слайд
3-тапсырма жауабы Суреттің мәтіннің сол немесе оң жағына туралайтын HTML кодтарын көрсет. (Дұрыс жауап саны: 2) <img src=“foto.jpg” vspace=“15”> <img src=“foto.jpg” border=“5”> <img src=“foto.jpg” align=“right”> <img src=“foto.jpg” aligm=“left”> <img src=“foto.jpg” vspace=“25”>
#21 слайд
Бүгінгі сабақта:
Web-бетке суретті қоюды;
Сурет қою тегінің атрибуттары жұмысын;
Суреті бар фонды жасай алуды үйрендік.
21 слайд
Бүгінгі сабақта: Web-бетке суретті қоюды; Сурет қою тегінің атрибуттары жұмысын; Суреті бар фонды жасай алуды үйрендік.
#22 слайд
Қосымша тапсырма
Қазақстанның тарихи ескерткіштері жайлы мәтін және
суреттермен бейнеленген weб-бет құрыңдар.
22 слайд
Қосымша тапсырма Қазақстанның тарихи ескерткіштері жайлы мәтін және суреттермен бейнеленген weб-бет құрыңдар.
Файл форматы:
pptx
23.01.2025
317
Жүктеу
ЖИ арқылы жасау
Жариялаған:
Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз
шағым қалдыра аласыз
