HTML. Құжатты құру және түзету

№9 Меркі колледжі
Өндірістік оқыту шебері
Даулетиярова Сумбилшаш Назарбаевна

Пәні: Өндірістік оқыту

Cабақтың тақырыбы: «HTML. Құжатты құру және түзету»

Сабақтың мақсаты:

1. Білімділік: HTML тілінде Web-сайт құруды үйрету, негізгі тегтер туралы білімдерін қалыптастыру;
2. Дамытушылық: Есте сақтау және зейіндік қабілеттерін дамыту, пәнге деген қызығушылығын арттыру;
З. Тәрбиелік: Жан-жақты болуға, өз бетімен жұмыс істеуге тәрбиелеу;

Сабақтың түрі: Аралас сабақ

Сабақтың әдісі: Сұрақ-жауап, топтық жұмыс

Сабақтың көрнекілігі: Компьютер, интерактивті тақта, слайд материалдары, оқулық, суреттер.

Пәнаралық байланыс: Алгебра, қазақ тілі, информатика, ағылшын тілі

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

І. Ұйымдастыру кезеңі: 

а) Сәлемдесу

б) Тізім бойынша тексеру.

ІІ. Кіріспе нұсқау

Информатика тіліндегі нақыл сөздер арқылы топқа бөлу.

1-топ: Жігітті компьютеріне қарап, бағала (компьютер тобы)

2-топ: Вирустан қорыққан, интернетке шықпас (антивирус тобы)

3-топ: Білмесең, «анықтама»-дан сұра (Анықтама тобы)

1.1 Өткен тақырыпты қайталау.

Галерея әдісі арқылы үй тапсырмасын сұрау.

1. INSERT инструкциясының қызметі?
2. Пішіндер дегеніміз не?
3. UPDATE инструкциясының қызметі?
4. SQL деген не?
5. С++ тілі туралы жалпы мәлімет?
6. Паскаль тілінде шартты оператор туралы айтыңыз?
7. С++ тілінің циклдік операторы?
8. С++тілінде P=mn  есебіне қарапайым есеп қалай шығарамыз?
9. Turbo Pascal - да «Таңдау» операторын қолдану арқылы есеп шығарыңыз?
10. С++  тілінде мәліметтерді енгізу?
11. DELETE инструкциясының қызметі?
12. С++ тілін ағылшындар қалай атаған?

ІІ. Үй тапсырмасы

«Галерея» әдісі

ІІІ. Жан–жақты білімдерін тексеру 

«Қар кесегі» әдісі (параққа сұрақ жазып лақтыру)

ІҮ. Жаңа сабақты түсіндіру.

Интернетке түрлі қызметтердің жиынтығы әсер етеді. Солардың бірі ең кең тараған қызметтер қатарына WWW (World Wide Web ) енеді. Web – тораптардағы құжаттардың негізгі форматы HTML болып табылады.

HTML (ағылш. Hyper Text Markup Language) — «гипер мәтін белгілеу тілі») — вебшолғышта көрсетілуге арнаулы  гипермәтін мен басқа ақпараттан тұратын веббеттерді жасауға арналған белгілеу тілі. HTML (HyperTextMarkupLanguage) – бұл құжаттарды кодтау үшін қолданылатын гипертекстік белгілеу тілі. HTML тілін британ  ғалымы Тим Бернерс-Ли 1986-1991 жылдары Женева (Швейцария) Еуропалық ядролық зерттеу орталығында жасап шығарған. HTML алғашында ғылыми және техникалық құжаттарды халық арасында алмастыруға арналған тіл ретінде жасалған.

HTML көмегімен әдемі жасалған құжатты оңай және тез жасауға болады. Құрамының өзгеруінен  HTML- де гипермәтіндерді оқу қасиеті және де бейнематериалдық қасиеттер кейіннен қосылған. Бағдарламалар құжаттарды құрылымдау және пішімдеу, оларды байланыстыру құралдарына қайта шығару (бейнелеу) құралы ретінде құрылды.HTML тіліндегі белгісі бар (бұндай құжаттар әдетте .html немесе .htm форматында болады ) мәтіндік құжаттар форматталған түрде көрсететін арнайы бағдарламаларымен өңделеді. Бұндай бағдарламаларды веб-шолғыштар немесе браузерлер дейді, әдетте олар пайдаланушының талаптарын ыңғайлы интерфейспен  және оларды көрумен қамтамасыз етеді. Интернеттегі мәліметтерді бейнелеу HTML тілінде жазылады. Бірақ программалауға ұқсас болғанмен программалау тілі емес, гипермәтінді белгілеу тілі деп аталады. HTML – компьютерлер арасындағы мәліметтер алмасудың жаңа хаттамасы.

Ол Интернеттегі мәтін бөліктерінің атқаратын қызметін белгілеп, оларды әрбір тұтынушыға жеткізе алатын құжатты түрде белгілейтін тіл болып табылады.

HTML файлының кеңейтілуі htm немесе html

HTML элементтерін мына категорияларға топтауға болады:

тақырыптық элементтер

құжат құрылымын сипаттайтын элементтер

мәтіндік элементтер

Графикалық,бейнелік және аудиомәліметтер жеке файлдарға жазылады да, құжат ішіндегі сілтемелерге сәйкес браузерлер оларды біртіндеп қосу қызметін атқарады. Файлдағы мәліметтерді қабылдап, браузерлер оларды реттеп орналастырады да, HTML тілінің командалары арқылы мәтінге қажетті түстер енгізіп, Терезе көлемін, мәтін қаріпі мен оның өлшемін және т.б әрекеттерді анықтап, нәтижесін экранда көрсетеді.  HTML файлын құрастырар алдында  жұмыс үстелінде құрылған Web беттерді сақтайтын «Lesson HTML» бумасын құрып аламыз. HTML тіліндегі құжат – құжаттың негізгі мәтінінен және тегтерден тұрады. Бұл файлды құру үшін қарапайым мәтіндік редактор  Блокнотты  қолдансақ та болады.

Ол үшін:  Пуск – Программы – Стандартные – Блокнот әрекеттер тізбегін орындап, Блокнот программасын іске қосамыз да, HTML мәтіндерін теріп сақтаймыз. 

Сақтау жолы:

Файл – сохранить как командасын орындаймыз.

Сохранить как терезесінде папка бөлігіне рабочий стол-ды белгілеп, оның ішінен папка « LessonHTML»-ды орнатамыз.

Имя файла бөлігіне «сайт ашу1.html» деп ат береміз.

Тип файла бөлігіне все файлы орнатамыз.

Астындағы кодировкадан UTF-8 таңдап аламыз, өйткені қазақша әріптерді түсіну үшін.

Сохранить батырмасына шертеміз.

Көп жағдайларда HTML құжаттардың тақырыптары болады. Олар <Н1></Н6> тегтер арқылы жасалады. Осы тегтер ортасына тақырып тімізді орналастырсақ, сізге белгілі көлемді тақырып шығады. .<BR> тегі тақырыпты жаңа жолға көшіреді. Бұл тақырыпты <font color=”ff0000”>  түсін <font size=”50”> шрифтін өзгертеді.

<Н1> тақырып </Н1>           <Н2> тақырып </Н2>

<Н3> тақырып </НЗ>           <Н4> тақырып </Н4>

<Н5> тақырып </Н5>           <Н6> тақырып</Н6>

HTML тілінде <img src=”фото/2222.jpg” width(ені)=”150px” height(биіктігі)=”100px”>  тегтерін жазу арқылы сурет қоя аламыз.

Web-беттің негізгі қызметі – қажетті ақпаратты іздеу,  жинастыру және оны экранға шығаруды ұйымдастыру. Web-беттер түрінде дайындалып сақталған электрондық құжаттарға – мәліметтер, графиктер, фотосуреттер жатады. Электрондық құжаттың қарапайым құжаттан айырмашылығы – оның жазылу форматында. Интернетте электрондық құжат құру үшін HTML арнайы тілі пайдаланылады және олар HTML форматында сақталады.

HTML тілі – қатаң ережелері бар компьютерлік тіл. HTML тілінде құжаттың авторы өз мәтінін тегтер деп аталатын символдар көмегімен арнайы файлға – Web-бетке айналдырады.

Барлық тегтер «кіші» яғни бұрыштық жақша (<) символынан басталады да «үлкен» (>) символымен аяқталады. Бұл символдар жұбын бұрыштық жақшалар деп те атайды. Ашылған бұрыштық символдан кейін тегті анықтайтын өзекті сөздер орналасады. HTML тілінің тегтері құжаттың арнаулы бөлігіне ғана, мысалы, абзацқа ғана әсер етеді. Сондықтан да  ашылатын және жабылатын – жұп тегтер қолданылады. Ашылатын тег құжаттың бөлігіне қандай да бір әсер береді, ал жабылатын тег осы әсерді доғарады. Жабылатын тегтер – «/» - символымен басталады.

HTML құжатының құрылымы:

1) Барлық құжат <HTML> тегімен басталады да, </HTML> тегімен аяқталады. Бұл тегтер жұбы – броузерге HTML құжаты екендігін хабарлайды;

2) HTML құжаты тақырыптар бөлімінен және құжаттың денесінен тұрады. Тақырыптар бөлімі <HEAD>  және </HEAD> - тегтерінен тұрады, мұнда құжат туралы мәлімет көрстіледі;

3) <TITLE>  және </TITLE> тегтері тақырыптар бөлімінің ішінде  және мұнда құжаттың арнайы тақырыбы орналасады;

4) Негізгі мәтін құжаттың денесінде көрсетіледі және ол  <BODY> </BODY> тегтерінің аралығында орналасады.

Осы төрт тег – HTML құжатының негізгі құрылымын білдіреді және бұл тегтер HTML тіліндегі барлық құжатта міндетті түрде көрсетіледі.

Мысалы:

HTML тілінің құрылымы
<HTML>
<HEAD>

<TITLE> Сайт атыңыз (Айгерім) </TITLE>

 </HEAD>

<BODY> Менің алғашқы Web парағым
</BODY>

</HTML>

4) HTML тілінде құжаттың ішкі тақырыбын алты түрлі тәсілмен беруге болады және олар <H1>, </H1>, <H6>, </H6> тегтерінің көмегімен жазылады;

V. Сабақты бекіту

1. Компьютер тобына: 

«Кір жайғыш» әдісі

1. HTML тілі қандай тіл?
2. HTML файлының кеңейтілуі?
3. HTML тілін қай ғалым және қай жылы ойлап тапқан?
4. Мәтін құжатының негізгі тұлғасы қай тег?

2. Антивирус тобына: 

«Кластер» әдісі                    

3. Анықтама тобына:  

«Кәнекей табайық» әдісі

VІ. Бағалау. Плакатқы жабыстырылған бағалау парақшасындағы стикерлер арқылы бағалау.

VІІ.  Үйге тапсырма беру.

«HTML тілінде тегтерді пайдаланып сайт құру».

Сурет қойып, сөздердің түстерін өзгерту.

---