Сабақтың тақырыбы: Web-беттер және сайттар құру

Сабақтың тақырыбы: Web-беттер және сайттар құру

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

Ғаламтор, HTML тілі туралы, web-сайт, web-парақ жайында түсінік беру.

•                      Жаңа тақырыпты оқыта отырып ойлау қабілеттерін дамыту.

•                      Шығармашылық қабілеттерін арттыру.

Сабақтың көрнекілігі: тұсаукесер, тапсырма карточкалары.

Сабақтың әдістері: түсіндіру, сүрақ-жауап, көрнекілік қолдану, тәжірибелік эдіс. Сабақтың типі: жаңа тақырыпты түсіндіру сабағы.

Өтілетін орны: информатика сыныбы.

Оқушылар білуі тиіс: ғаламтормен жүмыс істеуді.

Оқушылар меңгеруі тиіс: блокнотта жүмыс істеуді, web-парақ жэне сайттар құруды.

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

I           ¥йымдастыру кезеңі Окушыларды үйымдастырып, түгендеу.

II         Үй тапсырмасын тексеру кезеңі

Үйге берілген тапсырманың орындалуын тексеру.

III      Жаңа тақырыпты түсіндіру кезеңі

Жаңа материал

Компьютер немесебасқадаэлектрондықұрылғылардаоқылатынмәтіндергипермәтін деп аталады. Гипермэтіндер Интернет құрылымының негізгі құрауышы болып сана- лады. Өйткені бұл форматы ғаламторда пайдалану өте қолайлы. Гипермэтін терминін алғаш рет америкалық элеуметтанушы, философ Тед Нельсон 1963 жылы айналымға енгізді. Ал 1986 жылы Халықаралық Стандарттау ұйымының «Standart Generalized Markup Language» деп аталатын ISO-8879 стандартын қабылдауы HTML тілінің пайда болуына негіз болды. Гипермэтінді белгілеу тілі (Hyper Text Markup Language) - web- браузерде web-парақтарды жэне басқа да ақпараттарды шығару үшін қолданылатын ең басты белгілеу тілі болып есептеледі, яғни құжатқа қойылатын тегтердің комегімен құжаттың логикалық қүрылысын сипаттайды, құжатты форматтауды жэне нысандарды қоюды басқарады.

Web-парақтары экранда ықшам түрде безендіріліп көрсетілгенмен, HTML тілі мэтіндерді пішімдеп көрсететін тілге жатпайды. Өйткені эрбір тұтынушы эртүрлі компьютерді пайдаланады. Сол себепті жаңа ғана зауыттан шыққан бір компьютердің Windows жүйесінде жүмыс істей алатын браузері бар болса, екінші бір тұтынушы компьютері тек MS DOS жүйесінде жүмыс істейтін ескі браузерді пайдалануы мүмкін. Бұл екеуінің корсету мүмкіндіктері эртүрлі болғандықтан, бір файл екеуінде 2 түрлі бо­лып көрсетіледі. Ал үшінші компьютердегі web-парақтың мэтіндері зағиптарға арналған Брайль эріптері аркылы берілсе, оның нэтижесі тіпті басқаша болады. Құжаттарды эртүрлі тұтынушының эртүрлі құрылғыларда жэне эртүрлі браузер программалармен көретіндіктерін ескерсек, HTML тілін мэтіндерді форматтау тэсілдерін жазуға арналған тіл деп атауға болмайды. Ол ғаламтордағы мэтін бөліктерінін атқаратын қызметін анықтап, соларды эрбір тұтынушыға бейімдеп жеткізе алатын құжатты функционалды түрде белгілейтін тіл болып табылады.

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

Тег атрибуттары

Көбінесе ашылу тегтерінің тигізетін эсерлерін түрлендіретін олардың атрибуттары бо­лады. Атрибуттар немесе сипаттамалар - тег атауының жэне бір-бірінен бос орын арқылы бөлініп жазылатын косымша түйінді сөздерден түрады. Кейбір атрибуттар оның мэнін жа- зуды талап етеді. Атрибут мэні оның түйінді сөзінен теңдік белгісі (=) аркылы бөлініп жа- зылады. Атрибут мэні қос тырнақшаға алынып жазылуы тиіс, бірақ кейде қос тырнақшаны жазбауға да болады.

Программалау тілдерінде түсінік беретін сөздер - комментарийлер жазылатыны сияқты мұнда да программаның орындалуына еш эсер етпей, оны түсінуді жеңілдететін түсініктеме мэтіндер жазып отыруға болады. HTML тілі комментарийлері арнайы сим- волдардан басталады да, түсінік беретін мэтін осыған жалғаса жазылады.

HTML қүжатының қүрылымы 2 бөлімнен түрады: қүжаттың функционалдық бөлігі жэне негізгі бөлігі.

HTML құжатын кұру үшін жай мэтіндік редакторды, Windows ортасындағы блокнот- ты пайдалана беруге болады.

1.        HTML қүжатының кез келгені тегінен басталып, соған сэйкес жабылу тегімен аяқталады.

2.        Осы екеуінің ортасында қүжаттың тақырыптың бөлігі мен түлғасы болып келетін негізгі бөлігі орналасады. Қүжаттың тақырыптық бөлігі типтерінің ортасында түруы, жалпы қүжат туралы мэлімет береді.

Сайт дегеніміз не?

Web-сайт дегеніміз - дизайндары қайталанган web-парақтардың навигациялык. физикалық жэне магыналық жағынан да бір серверде біріккен жиынтыгы.

Бүрынгы кезде web-сайты бір адам - web-мастер жасаган болса, қазіргі кезде web- сайттарды бірнеше адам жасайды. Олар web-дизайнер, программалаушы, бизнес-кеңесші. маркетинг бойынша басқарушы, менеджер. Дайын материалдардың web-сайтта орнала- суын web-басылым немесе web-публикация деп атайды. Web-сайттың дербес бөлігін, URL адреспен қамтылган қүжатты web-парақ деп атаймыз. Web-парақ статикалық неме­се динамикалық күрылымға ие. Әдетте web-парак мэтін, кескін, дыбыс күжаты, видео не­месе анимациялары бар гипермэтін түрінде үйымдастырылады. Ғаламторда web-парактар браузер арқылы көрсетіледі. Бірақ web-парақтар html тілінің тегтерінсіз браузерде дүрыс,

анық көрсетілмейді. Web-парақ 2 логикалық бөлікке бөлінеді: тақырыбы жэне мазмүны. Web-парақтың тақырыбы <HEADX/HEAD> контейнерінде бекітіледі. Беттің атауы <TITLE></TITLE> контейнерінде орналасады жэне браузердің жоғары бөлігінде бейнеленеді. Ал беттің мазмүны <BODY></BODY> контейнерінде жазылады. Мы- салы, web-сайттың алгашцы парагын HTML коды арқылы құру үшін мына сызбаны пайдалануга бола­ды (26-сурет):

HTML тілінде web-парақ немесе сайт қүру үшін кәдімгі блокнот қосымшасын қолдануга болады. Код- ты блокнотта жазамыз да, сақталу орнын көрсетіп, Файл => Сақтау (Сохранить как) => Файл атауы де- генге паше*.html, ал Файл типтері дегенге Барлық файлдар таңдаймыз да, Сақтау батырмасын баса- мыз. Сосын браузермен ашып, жүмыс нәтижесін қараймыз.

IV Бекіту кезеңі

Сонымен, біраз мағлұмат алдық, енді HTML тілінде web-парақ құрып көрейік.

№1 тапсырма

1.       Блокнот қосымшасын ашамыз.

2.       Төмендегі кодты тереміз.

<HTML>

<HEADXTITLE> Менің алғашқы парағым.</TITLE>

</HEAD>

<BODY>

Құрметті достар, алғашқы web-парағыма қош келдіңдер!

</BODY>

</HTML>

3.       Кұжатты сақтаймыз.

4.       Браузерден қараймыз (27-сурет).

Бұл жұмыстың нэтижесін қарасақ, мэтініміз бір жақ шетінде орналасыпты. Ендігі келесі тапсырмада істейтін әрекетіміз, осы мэтінді тег атрибуттары арқылы жұмыс алаңының ортасына қарай орналастыру жэне эріп өлшемін өзгерту болады.

№2 тапсырма

1.       Мәтіннің стилін өзгерту үшін <Н№>мәтін< /Н№> тегін пайдаланамыз. Мұндағы нөмір белгісінің орнына стиль нөмірін жазамыз. Ол нөмір 1-ден 6-га дейін болады.

Яғни, <Н1>Тақырып1</Н1>

<Н2>Тақырып2</Н2>

<НЗ>ТақырыпЗ</НЗ>

<Н4>Тақырып4</Н4>

<Н5>Тақырып5</Н5>

<Нб>Тақырыпб</Нб>

Мен "Құрметті достар, алғашқы web-парағыма қош келдіңдер!" мәтініне<Н2>Тақырып2</Н2>стилін қолдандым. Сонда былай бола­ды : <Н2> Құрметті достар, алғашқы web-парағыма қош келдіндер!</Н2>

2.       Енді мен бұл мэтінді жолдың ортасына карай қоюым керек. Ол үшін мына тегті қолданамын:

<Н№ ALIGN="CENTER">мәтін</Н№>

Сонымен осы текті қолданайық.

<Н2 ALIGN="CENTER"> Құрметті достар, алғашқы web-парағыма қош келдіңдер!</Н2>

27-сурет. Алгашқы web-6emi

3.        Ал енді мэтінімізді қоюлатылған, курсивті, асты сызылган етіп көрсету үшін <В>, <I>, <U> тегтерін қолданамыз.

4.        Жазудың түсін өзгерту үшін түстер тегін қолданамыз: <FONT COLOR= "$$$$$$"> мәтін</ҒОЫТ> . Қызыл түсті алу үшін кілт сөзді немесе қызыл түстің он алтылык кодын жазамыз. Red-қызыл, #ҒҒ0000 - қызыл түстің он алтылық коды.

Яғни, алдыңғы қолданған тегтерді өшірмей, түстің тегін қоссақ былай болады: <font color="#FF0000"><H2 ALIGN="CENTER">Құрметті достар,алғашқы web-парағыма қош келдіңдер! </H2x/f ont>

5.                  Құжатты сақтап, нэтижесін браузермен қараңдар.

VII Бағалау кезеңі

3.                  Сабақтың барысында оқушылардың белсенділігіне, тапсырма нэтижелеріне қарай бағалаймыз