Веб парақшасын жобалау. Информатика, 10 сынып, сабақ жоспары.

5 Бөлім. Веб сайтты жобалау		Мектеп: Жауапты адам:
Сынып: 10 ОГН	Қатысқандар саны:		Қатыспағандар :
Сабақ тақырыбы	Веб парақшасын жобалау
Осы сабақта қол жеткізілген оқыту мақсаттары (оқу жоспарына сілтеме)	10.2.3.2. Веб редакторда веб парақшасын жобалау
Сабақ мақсаты	Оқушылар: Негізгі тегтерді пайдалану, веб-сайттар үшін веб-бетті жасау.
Тілдік мақсаттар	Оқушылар … веб-бетті жасау үшін негізгі тегтерді тізімдеу веб-сайт түсінігін түсіндіріңіз Диалог / жазу үшін бірнеше пайдалы сөз тіркесі:
Бағалау критерийлері	- веб-парақшасын жасайды - веб-парақшасын пішімдейді - файлды сақтайды - мәтінді бірнеше параграфқа бөледі - азат жолын белгілейді - азат жолдарын теңестіру - бет өңін және мәтін түсін өзгертеді
Құндалақтарды дарыту	Өзіңізге және басқаларға құрметпен қарау және жұптасып, топта, академиялық адалдықпен жұмыс істеу арқылы - өз бетіңізше жұмыс істегенде, оқушылар сабақ мақсаттарын және жағдайды шешудің өз міндеттерін дербес анықтай алады
Пәнаралық байланыс	Оқушылар басқа пәндермен практикалық жұмыс арқылы байланысады.
АКТ қолдану дағдылары	Bilimland Интерактивті сабақтарды пайдалана отырып, оқу үдерісін визуализациялау
Алғашқы білім	- оқушылар веб-бетті жасаудың негізгі тегтерін біледі

ЖОСПАР
Жоспарланған сабақ кезеңдері	Сабақ барысы			Ресурстар
Сабақтын басы 0-5	1.тақырыпқа шығу. Ұйымдастыру кезеңі. Оқушылармен амандасу Қалыптастырушы бағалау. Оқушыларды дәптерлеріне кішкентай адамның суретің салуға және тегтерді жазуға шақыру. (Мұғалім тегтерді атайды, оқушылар дәптерлеріне өзінің белгілерін белгілейді). Беттің қарап шығу құралының мазмұнын құжаттың тақырыбына орналастыратын тег (<title></title>). Тег, құжаттың көрінетін бөлігін анықтайды. (<body></body>). Бетті қарау құралына HTML құжаты екенін көрсетеді. (<html></html>) Ең үлкен тақырыпты жасайды. (<h1></h1>) Ең кіші тақырыпты жасайды. (<h6></h6>) Қалың мәтінді жасайды (<b></b>) Қаріп түсі тақырыбы (<FONT COLOR="#"> </FONT>) Мәтінді курсивпен жасайды (<I></I>) асты сызылған мәтінді жасайды. (<U></U>) Қаріп өлшемі (<FONT SIZE=?> </FONT>). Ортаны теңестіру (<CENTER></CENTER>) Азат жол (<P> </P>) Мәселе тудыру*. Оқушылар сабақ және оқу мақсаттарының тақырыбын тұжырымдайды. Бағалау критерийлерін көрсету.
Сабақтын ортасы 6-35	Жаңа тақырып Оқушыларды интерактивті сабақты көруге шақыра отырып, жаттығулар мен тест материалдарын жасау арқылы HTML файлын құру және олардың білімін тексеру. https://bilimland.kz/kk/courses/informatika-kk/9-synyp/lesson/html-zhane-html-redaktor Практикалық жұмыс Оқушылар практикалық жұмысқа кіріседі. «Бірінші Сайтты құру» Дескрипторлар: - мәтіндік құжатты басқарады; - негізгі тегтерді пайдаланып мәтінді жазады; - құжатты сақтайды. Практикалық жұмыс барысында мұғалім көмектеседі, ал тапсырманы аяқтаған оқушылар бірінші болып басқа оқушыларға қолдау көрсетеді. Талқылау. Мұғалім мәселе тудырады. Сайтты қалай дұрыстауға болады. Практикалық жұмыс. Оқушылар үлгі веб-бетін бақылайды. Веб-беттің тақырыбын жасау: Менің астанам. Құжатты жұмыс бумаңызда index.htm ретінде сақтаңыз - мұны File - Save As пәрменін орындаңыз. Құжаттың денесін анықтау: бұл үшін сіз <body> ... </ body> тегтерін кірістіруіңіз керек Мәтіннің бірнеше азат жолын бөлінуі үшін бұл тегтің (оның әрекеті Word процессорындағы Enter пернесін басу сияқты ұқсас) бар. Қызыл сызықты тексеріңіз: мұны істеу үшін бірнеше бос орынды & nbsp; (4 бос орынды салыңыз) - әр мәтіннен кейін және бүкіл мәтіннің басталуына дейін - яғни, & nbsp; & nbsp; & nbsp; & nbsp; Ежелер арасында бір бос жолды енгізіңіз - осы мақсатқа басқа тегті қосыңыз Ежелерді енге теңестіріңіз: бұл үшін мәтіннің алдында <p align = «justify»> тегін қойыңыз, мәтіннен кейін </ p> тегі Тақырыпты мәтінге қойыңыз: <h1> Астана </ h1> тегіне қойыңыз және оны беттің ортасына туралаңыз - <h1 align = «center»> Астана </ h1> Бет өңін және мәтіннің түсін өзгерту: бұл үшін <body> тегіне қосыңыз bgcolor – фон түсі; text – мәтіннің түсі <body bgcolor="#f0e68c" text="#191970"> Дифференциация Мәтіннің экрандағы орны: браузерде қаралған редакцияланатын бет кемшілігі бар - оқуға ыңғайсыз кең мәтін. Мәтінді «тарсарту» үшін сіз бетті (атрибут берер) белгілеу үшін көрінбейтін шекаралары бар кестені пайдалана аласыз. <Body ...> тегінен кейін осы жолдағы <tr> бір жолдан және үш ұяшықтан тұратын <table> кестесінің тегтерін енгізіңіз: <table bolder = 0> <tr> <td width = «10%»> </ td> 10%, 80%, 10% саны өзгертілуі мүмкін, бірақ олардың сомасы 100% <td width = «80%»> ... Тақырып Мәтін ... </ td> <td width = «10%»> </ td> </ tr> </ table> </ body> Өзара бағалау. Жұптар оқушылар алдын-ала әзірленген дескрипторларға сәйкес бір-бірінің жұмысын бағалайды. Үй жұмысы Белгілі бір тақырып бойынша ғылыми-зерттеу жұмыстарын жасау			https://bilimland.kz/kk/courses/informatika-kk/9-synyp/lesson/html-zhane-html-redaktor Презентация, 2-5 слайд
Сабақтын соңы 36-40	Рефлексия «Табыс баспалдағы».
Қосымша ақпарат
Дифференциация - Сізге неғұрлым қолдау көрсетуді қалайсыз? Сіз неғұрлым қабілетті оқушыларға қандай міндеттер қоюды жоспарлайсыз?		Бағалау - оқушылардын білім деңгейін қалай тексеруге болады?	Межпредметные связиЗдоровье и безопасностьСвязи с ИКТСвязи с ценностями (воспитательный элемент)

1 Қосымша негізгі тег

HTML> - веб-құжаттың басы.

</ Html> - Веб-құжаттың соңы

<HEAD> - Беттің сипаттамасын бастаңыз

</ HEAD> - компьютерлердің сипаттамасы аяқталды

<TITLE> </ TITLE> - Бет атауы

<BODY> </ BODY> - бет мазмұны

<BODY TEXT = «# *»> </ BODY> бүкіл құжат үшін қаріп түсін

<BODY BGCOLOR = «# *»> </ BODY> - бүкіл құжаттың өң түсі

<BODY BACKGROUND = «*»> </ BODY> - өң сурет

<H?> </ H?> - ішкі құжат тақырыбы

<H? ALIGN = «*»> </ H?> - теңестіру тақырыбы

<FONT COLOR = «# *»> </ FONT> - тақырыптың қаріп түсі

<B> </ b> - қалың

<I> </ i> - курсивпен

<U> </ U> - асты сызылған

<SUB> </ SUB> - суперсcript

<Sup> </ sup> - бағыныңқы

<FONT SIZE =?> </ FONT> - қаріп өлшемі

<CENTER> </ CENTER> - ортаға дәл келтіру

<FONT FACE = «*»> </ FONT> - typeface

<HR> - көлденең бөлгіш

<HR COLOR = «# *»> - жолдың түсі

Line feed

<P> </ P> - параграф

<HR SIZE = «*»> - желінің қалыңдығы

<IMG SRC = «*»> - суретті кірістіру

<IMG SRC = «*» ALIGN = «*»> - суреттің жанындағы мәтінді туралау

<IMG SRC = «*» WIDTH = «*»> - сурет ені

<IMG SRC = «*» HEIGT = «*»> - сурет биіктігі

<IMG SRC = «*» HSPACE = «*»> - мәтіннен суретке көлденең қашықтық

<IMG SRC = «*» VSPACE = «*»> - мәтіннен тігінен мәтінге дейінгі қашықтық

<IMG SRC = «*» BORDER = «*»> - суреттің айналасында жақтау

<IMG SRC = «*» ALT = «*»> - суретке арналған құралдар тақтасы

<A HREF====> </A> - басқа бетке сілтеме

<MARQUEE> </ MARQUEE> - жүгіртпе жолды енгізіңіз

<MARQUEE BEHAVIOR = ALTERNATE> </ MARQUEE> - маркекті оңға / солға жылжытыңыз

<TABLE> </ TABLE> - кестені кірістіру

<TABLE WIDTH = «%»> </ TABLE> - кестенің ені

<CAPTION> </ CAPTION> - кесте тақырыбы

<TR> </ TR> - кесте жолы

<TH> </ TH> - кесте бағанының тақырыптары

<Td> </ td> - кесте ұяшығы

2 Қосымша түстер кестесі

Color's name	Red	Green	Blue	Color
alicemblue	F0	F8	FF	sample
antiquewhite	FA	EB	D7	sample
aqua	00	FF	FF	sample
aquamarine	7F	FF	D4	sample
azure	F0	FF	FF	sample
beige	F5	F5	DC	sample
bisque	FF	E4	C4	sample
black	00	00	00	sample
blanchedalmond	FF	EB	CD	sample
blue	00	00	FF	sample
blueviolet	8A	2B	E2	sample
brown	A5	2A	2A	sample
burlywood	DE	B8	87	sample
cadetblue	5F	9E	A0	sample
chartreuse	7F	FF	00	sample
chocolate	D2	69	1E	sample
coral	FF	7F	50	sample
cornflowerblue	64	95	ED	sample
cornsilk	FF	F8	DC	sample
crimson	DC	14	3C	sample
cyan	00	FF	FF	sample
darkblue	00	00	8B	sample
darkcyan	00	8B	8B	sample
darkgoldenrod	B8	86	0B	sample
darkgray	A9	A9	A9	sample
darkgreen	00	64	00	sample
darkkhaki	BD	B7	6B	sample
darkmagenta	8B	00	8b	sample
darkolivegreen	55	6B	2F	sample
darkorange	FF	8C	00	sample
darkochid	99	32	CC	sample
darkred	8B	00	00	sample
darksalmon	E9	96	7A	sample
darkseagreen	8F	BC	8F	sample
darkslateblue	48	3D	8B	sample
darkslategray	2F	4F	4F	sample
darkturquoise	00	CE	D1	sample
darkviolet	94	00	D3	sample
deeppink	FF	14	93	sample
deepskyblue	00	BF	FF	sample
dimgray	69	69	69	sample
dodgerblue	1E	90	FF	sample
firebrick	B2	22	22	sample
floralwhite	FF	FA	F0	sample
forestgreen	22	8B	22	sample
fushsia	FF	00	FF	sample
gainsboro	DC	DC	DC	sample
ghostwhite	F8	F8	FF	sample
gold	FF	D7	00	sample
goldenrod	DA	A5	20	sample
gray	80	80	80	sample
green	00	80	00	sample
greenyellow	AD	FF	2F	sample
honeydew	F0	FF	F0	sample
hotpink	FF	69	B4	sample
indiandred	CD	5C	5C	sample
indigo	4B	00	82	sample
ivory	FF	FF	F0	sample
khaki	F0	E6	8C	sample
lavender	E6	E6	FA	sample
lavenderblush	FF	F0	F5	sample
lawngreen	7C	FC	00	sample
lemonchiffon	FF	FA	CD	sample
ligtblue	AD	D8	E6	sample
lightcoral	F0	80	80	sample
lightcyan	E0	FF	FF	sample
lightgoldenrodyellow	FA	FA	D2	sample
lightgreen	90	EE	90	sample
lightgrey	D3	D3	D3	sample
lightpink	FF	B6	C1	sample
lightsalmon	FF	A0	7A	sample
lightseagreen	20	B2	AA	sample
lightscyblue	87	CE	FA	sample
lightslategray	77	88	99	sample
lightsteelblue	B0	C4	DE	sample
lightyellow	FF	FF	E0	sample
lime	00	FF	00	sample
limegreen	32	CD	32	sample
linen	FA	F0	E6	sample
magenta	FF	00	FF	sample
maroon	80	00	00	sample
mediumaquamarine	66	CD	AA	sample
mediumblue	00	00	CD	sample
mediumorchid	BA	55	D3	sample
mediumpurple	93	70	DB	sample
mediumseagreen	3C	B3	71	sample
mediumslateblue	7B	68	EE	sample
mediumspringgreen	00	FA	9A	sample
mediumturquoise	48	D1	CC	sample
medium violetred	C7	15	85	sample
midnightblue	19	19	70	sample
mintcream	F5	FF	FA	sample
mistyrose	FF	E4	E1	sample
moccasin	FF	E4	B5	sample
navajowhite	FF	DE	AD	sample
navy	00	00	80	sample
oldlace	FD	F5	E6	sample
olive	80	80	00	sample
olivedrab	6B	8E	23	sample
orange	FF	A5	00	sample
orengered	FF	45	00	sample
orchid	DA	70	D6	sample
palegoldenrod	EE	E8	AA	sample
palegreen	98	FB	98	sample
paleturquose	AF	EE	EE	sample
palevioletred	DB	70	93	sample
papayawhop	FF	EF	D5	sample
peachpuff	FF	DA	B9	sample
peru	CD	85	3F	sample
pink	FF	C0	CB	sample
plum	DD	A0	DD	sample
powderblue	B0	E0	E6	sample
purple	80	00	80	sample
red	FF	00	00	sample
rosybrown	BC	8F	8F	sample
royalblue	41	69	E1	sample
saddlebrown	8B	45	13	sample
salmon	FA	80	72	sample
sandybrown	F4	A4	60	sample
seagreen	2E	8B	57	sample
seashell	FF	F5	EE	sample
sienna	A0	52	2D	sample
silver	C0	C0	C0	sample
skyblue	87	CE	EB	sample
slateblue	6A	5A	CD	sample
slategray	70	80	80	sample
snow	FF	FA	FA	sample
springgreen	00	FF	7F	sample
steelblue	46	82	B4	sample
tan	D2	B4	8C	sample
teal	00	80	80	sample
thistle	D8	BF	D8	sample
tomato	FF	63	47	sample
turquose	40	E0	D0	sample
violet	EE	82	EE	sample
wheat	F5	DE	B3	sample
white	FF	FF	FF	sample
whitesmoke	F5	F5	F5	sample
yellow	FF	FF	00	sample
yellowgreen	9A	CD	32	sample

Толық нұсқасын 30 секундтан кейін жүктей аласыз!!!

Әлеуметтік желілерде бөлісіңіз:
Facebook | VK | WhatsApp | Telegram | Twitter

Қарап көріңіз 👇

kz | ҰМЖ, ОМЖ, ҚМЖ - Ұзақ, орта, қысқа мерзімді жоспар | Информатика

03.05.2023

Автор: samal2023
19

Пайдалы сілтемелер:
» Туған күнге 99 тілектер жинағы: өз сөзімен, қысқаша, қарапайым туған күнге тілек
» Абай Құнанбаев барлық өлеңдер жинағын жүктеу, оқу
» Дастархан батасы: дастарханға бата беру, ас қайыру

Соңғы жаңалықтар:
» 2025 жылы Ораза және Рамазан айы қай күні басталады?
» Утиль алым мөлшерлемесі өзгермейтін болды
» Жоғары оқу орындарына құжат қабылдау қашан басталады?