Инфоурок / Информатика / Другие методич. материалы / Сабақтың тақырыбы: Web-беттер және сайттар құру

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


библиотека
материалов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Компьютер немесебасқадаэлектрондықұрылғылардаоқылатынмәтіндергипермәтін деп аталады. Гипермэтіндер Интернет құрылымының негізгі құрауышы болып сана- лады. Өйткені бұл форматы ғаламторда пайдалану өте қолайлы. Гипермэтін терминін алғаш рет америкалық элеуметтанушы, философ Тед Нельсон 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-сурет):hello_html_27dd39a6.jpghello_html_m7a2af3b.png

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

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

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

1 тапсырма

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

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

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

HEAD>

<BODY>

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

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

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

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

2 тапсырма

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

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

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

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

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

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

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

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

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

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

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

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

hello_html_m17224523.jpg


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



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

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

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

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

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

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





Только до конца зимы! Скидка 60% для педагогов на ДИПЛОМЫ от Столичного учебного центра!

Курсы профессиональной переподготовки и повышения квалификации от 1 400 руб.
Для выбора курса воспользуйтесь удобным поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВЫ).

Московские документы для аттестации: KURSY.ORG


Общая информация

Номер материала: ДБ-078957

Похожие материалы



Очень низкие цены на курсы переподготовки от Московского учебного центра для педагогов

Специально для учителей, воспитателей и других работников системы образования действуют 60% скидки (только до конца зимы) при обучении на курсах профессиональной переподготовки (124 курса на выбор).

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Подайте заявку на интересующий Вас курс сейчас: KURSY.ORG