Жалпақтал аграрлық және салалық технологиялар колледжі
(білім беру ұйымының атауы)
Орта білімнен кейінгі, техникалық және кәсіптік білім беру ұйымдарына арналған
педагогінің сабақ жоспары
HTML тілінің негіздері.
(сабақ тақырыбы)
Модуль/пән атауы: Web технологияны қолдана отырып, web парақшаны құру / Өндірістік оқу
Дайындаған педагог: Ізбасаров Қанат Наурызұлы
2020 жылғы «30» қараша
1. Жалпы мәліметтер
Курс, оқу жылы, топ: 3 курс, 2020-2021 оқу жылы, 10 топ
Сабақ типі: Өндірістік оқыту
2. Мақсаты, міндеттер: HTML-тілінің көмегімен қарапайым WEB- парақтар жасап үйрету.
2.1 Оқу сабақтары барысында білім алушылар игеретін кәсіби біліктердің тізбесі: HTML-тілінің
көмегімен қарапайым WEB- парақтар жасап үйрену, сонымен бірге компьютерде қолданушы ретінде
жұмыс жасай білу.
3. Сабақты жабдықтау
3.1 Оқу-әдістемелік құрал-жабдықтар, анықтамалық әдебиеттер: «Web технологияларды қолданып, web
парақшалар мен сайттар əзірлеу» Оқу құралы / Рамазанова Л.Е., Аубакирова К.М., Тойшибекова А.Б.,
Токарев А.Н. - Астана: «Кəсіпқор» Холдингі» коммерциялық емес акционерлік қоғамы, 2018 ж.,
«HTML5 негіздері» оқу-əдістемелік құралы, Ізбасаров Қ.Н., 2019 ж.
3.2 Техникалық құралдар, материалдар: Дербес компьютер, Блокнот(Hotepad) жəне Internet Explorer
бағдарламалары.
4. Сабақтың барысы:
Әдістемелік нұсқау
HTML форматында текст элементін қоюдың жалпы схемасы келесі түрде жазылуы мүмкін:
<"элемент аты" "атрибуттар тізімі"> элемент мазмұны "элемент аты">. Элемент мазмұнының
алдындағы конструкция элемент басының тегі деп аталады, ал элемент мазмұнынан кейін орналасқан
конструкция элемент соңының тегі деп аталады. HTMLқұжатының құрылысы бірінің ішіне бірі салынған
контейнерлерді қолдануға мүмкіндік береді. Шынында да, құжаттың өзі – бұл "HTML" атымен аталатын
бір үлкен контейнер:
Құжат мазмұны
HTML элементінің өзі немесе гипертексттік құжат құжаттың басынан (HEAD)
және денесінен (BODY) тұрады:
Тақырып мазмұны
Құжат денесінің мазмұны
WWW-да әрбір құжаттың өз аты бар, оны басында көрсетеді. Оны интерфейспрограммасының
бірінші жолында көруге болады. HTML бетінің аты
тегінің көмегімен басына қосылады. HTML
құжатын жазуды бастай отырып, оның сондай түрде болатынын теңестіреміз. Мұндай теңестіру
құжаттың ең басына тегін қою жолымен
жүргізіледі. DOCTYPE тегі SGML тілінің тегі болып табылады және құжат HTML 3.2 спецификасына
сәйкес сипатталатын болатынын хабарлайды. Барлық программалау тілдеріндегідей HTMLтілінде де
тексттің белгілі-бір бөліктеріне түсініктеме беретін әдісі бар. Түсініктемелер < ! - - және - - > тізбектерінің
арасына жазылады.
Жұмыстың орындалу тәртібі
1. HTML-құжат-бұл аты.html қосымшасы бар, қарапайым мәтіндік құжат. Мына, HTML құжатты
Блокнотта теріп шығыңыздар:
Менің алғашқы парағым
1-ші мысал
Сәлем!
Бұл HTLM-құжаттың ең қарапайым мысалы.
Мәтіндік алты түрлі көлеммен көрсетіле алады. Олардың түсін де, қаріп
типін де, фон түсін де
өзгертетін мүмкіндіктер бар. Мәтін ішіне
суреттер
орналастыруға да болады.
Енді осы терілген құжатты, мысалы, T1.htmll деген атпен дискіде сақтау керек. Сонда оның
белгішесі өзгеріп Интернетте көруге болатын түрге айналады. Бұл T1.html файлын бір мезетте Internet
Explorer-де және Блокнотта ашып, оларды түрлендіріп көруге болады. Ол үшін файлды Internet Explorerде ашқаннан соң, Түр-HTML түрінде (вид-в виде НТМL) командаларын орындау қажет. Сонда файлдың
алғашқы мәтіні Блокнотта ашылып, оны түрлендіріп өзгерту мүмкіндігіне ие боламыз. Қажетті
өзгертулер енгізіп оны қайта сақтап, осы өзгертулердің HTML-құжатта іске асқанын көру үшін, Internet
Explorer-де Түр-Жаңалау (Вид-Обновить) командасын орындау керек немесе Саймандар тақтасында осы
командаға сәйкес батырманы басса болғаны. Сонымен кез келген программа мәтінін Блокнотта тергеннен
кейін, оған өз қалауыңызша ат беріп, оны *.htmll түрінде сақтау керек. Тергеніңіздің нәтижесін экранда
көру үшін, оның атын тышқанмен екі шерту керек немесе Internet Explorer-де ашу қажет.
2. Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер арқылы
жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті, браузерлер HTML файлдардағы
жолдың соңғы символын және көптеген бос орындарды есепке алмайды. Сондықтан біздің мысалымыз
мынадай түрде де жазылуы мүмкін:
3. Бұл мысалдағы … белгілерінің ортасына HTML-құжаты жазылады, яғни
құжатының басын, ал оның аяқталғанын көрсетеді.
…-бұл қос белгі құжат тақырыбының басын және соңын білдіреді. Бұл бөлімде құжат
тақырыбынан басқа әртүрлі қызмет атқаратын мәліметтер (төмендегі
белгісін қараңыз) жазылуы
мүмкін, олар жайлы біз кейінірек айтамыз.
…
және белгілерінің арасында жазылған сөздерді браузер құжаттың аты деп түсінеді, ол
терезе тақырыбында көрсетіледі.Осы құжатты принтер арқылы баспадан шығарғанда, браузер оны әр
парақтың сол жақ жоғары бұрышына жазып отырады. Атаудың өте ұзын болмағаны дұрыс, әдетте ол 64
символдан аспауы керек.
…
Бұл қос белгі HTML-құжаттың негізгі мазмұндық белгінің басын және соңын білдіреді.
…
-
…
белгісі (мұндағы і-1-ден 6-ға дейінгі бүтін сан) алты түрлі сатыдағы символдар мөлшерін таңдау
мүмкіндігін береді. Бірінші сатыдағы тақырып-ең ірісі, алтыншы сатыдағыең кішісі .
…
немесе
Бұндай қос белгі абзацты сипаттайды. Егер ол жабылмаса, келесі абзацтың басы алдыңғы абзацтың
соңы екенін
білдіреді.
Жалпы
және
белгілерінің арасында
жазылғандардың барлығы бір абзац ретінде қабылданады.
және
белгілерінің қосымша ALIGN (оқылуы «элайн», ағылшынның «туралау» деген сөзінен)
атрибуты болуы мүмкін.
Мысалы:
тақырыпты ортаға жылжыту
немесе
абзацты
оң жақ шетке жақындатып туралау түрі
4. Үйренгеніміздің барлығын тиянақтап, төмендегі 2-мысалды орындайық:
Бұдан былай қарапайым HTML-құжатты осы мысалдардағыдай етіп бастан аяқ құрастыруға мүмкіндік
бар.
2-мысал
Сәлем!
Бұл HTML-құжатының сәл күрделірек мысалы
Енді біз абзацты,тек сол жақ шетке ғана туралап жазбай,
ортаға қарай
Немесе оң жақ шетке де туралауға болатындығын білеміз.
5. Енді біз осы қарапайым HTML-құжатты қалай жақсартуға болатындығын сөз етеміз. Жаңа
жолға көшу белгісінен бастайық.
1-мысал
Сәлем!
Бұл HTML-құжаттың ең қарапайым мысалы.
Бұл *.html-файлды Notepad және Internet Explorer-де ашуға болады.
Өзгертулер енгізілгеннен кейін Блокнотта АТЫ.html деген форматта
сақтаңыз. Енді өзгертулердің HTML-құжатқа енгенін көру үшін, файлды
жауып, АТЫ.html құжатын шақырыңыз.
белгі абзацты бөлмей, келесі сөзді жаңа жолға көшіру керек болған жағдайда қолданылады. Өлең
жазуға өте ыңғалы. Өлеңнен мысал келтірейік:
3-мысал
Өлең
Абай
Айттым сәлем, Қаламқас
Саған құрбан мал мен бас.
Сағынғаннан сені ойлап,
Келер көзге ыстық жас.
Көзімнің қарасы,
Көңілімнің санасы.
Бітпейді іштегі,
Ғашықтық жарасы
белгісі көлденең сызық сызады. Бұл белгінің қосымша SIZE (сызықтың пиксельмен берілген
қалыңдығын анықтайды) және WIDTH (экранның еніне қатысты, сызықтың пайызбен берілген
ұзындығын анықтайды) атрибуттары бар. 4-мысалда көлденең сызықтардың кішігірім жинағы берілген.
4-мысал
Көлденең сызықтар жинағы
6. Енді түрлі түсті мәтін жазып үйренейік. Ол үшін басқа түске боялатын мәтін үзіндісін
… белгілерінің арасына жазу керек.
3-мысал
өлең
Абай
Айттым сәлем, Қаламқас,
Саған құрбан мал мен бас.
Сағынғаннан сені ойлап,
Келер көзге ыстық жас.
Көзімнің қарасы,
Көңлімнің санасы.
Бітпейтін іштегі,
Ғашықтық жарасы.
HTML базалық тегтерінің тізімі
Соңғы
Суреттеу