"Web-беттегі гиперсілтемелер" тақырыбы бойынша 11 сыныпқа арналған сабақ жоспары

Пән Информатика сынып 11 Күні 01.03.16 ж.

сабақ №: 24

Тақырып: Web-беттегі гиперсілтемелер

Мақсат: Web-беттегі гиперсілтемелер тақырыбы бойынша жалпы түсінік беру.

Білімділік – Web-беттегі гиперсілтемелер тақырыбы бойынша түсінік бере отырып, гиперсілтемелермен жұмыс істеуге үйрету.

Дамытушылық – Оқушылардың логикалық ойлау қабілеттерін, өз беттерімен жұмыс істей алу дағдыларын дамыту.

Тәрбиелік – Оқушыларды ұқыптылыққа, жауапкершілікке тәрбиелеу.

Сабақ түрі: аралас

Сабақ типі: жаңа тақырыпты түсіндіру.

Құрал-жабдықтар: оқулықтар, дәптерлер, ДК-лер, видео.

Сабақ барысы

Сабақ кезеңдері

Мұғалімнің іс - әрекеттері

Оқушылардың іс - әрекеттері

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

2 мин

• Сәлеметсіздер ме, достар! Сабағымызды ерекше түрдегі тілек-амандасудан бастауды ұсынамын. Ісіміз сәтті болсын!

• Тілек қысқа да нұсқа болуы керек және аз сөзбен.

Амандасады, шаттық шеңберін құрып бір-бірлеріне допты лақтыру арқылы тілек айтады. «Сәттілік серік болсын!», «Арайлап атсын әр таңың!», «Баршаңызға мейірімділік тілеймін!»т.с.с.

ІІ. Үй жұмысын тексеру

7 мин

«Ыстық орындық» Бір оқушы ортадағы орындыққа отырады, қалған оқушылар өткен тақырыптар бойынша сұрақтар қояды.

Кезекпен тұрып, орындықта отырған оқушыға өткен тақырыптар бойынша сұрақтар қояды.

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

10 мин

HTML-да белгілеулер (әріпті, абзацты, нысандарды қосуды әзірлеу) туралы сендер жеткілікті деңгейде білесіңдер. Гипермәтінге көшейік.

Гипермәтіннің қарапайым мәтіннен айырмашылығы мәтін фрагменттері арасында өте тез орын ауыстыруға мүмкіндік беретінін еске түсірейік. Мысалы, ОЖ Windows анықтама жүйесі және көптеген программалар гипермәтіндік принцип бойынша ұйымдастырылған. Гиперсілтемені басқан кезде - белгіленген мәтінді немесе суретті - құжаттың белгілі бір фрагментіне немесе басқа құжатқа өту болады.

HTML-да гиперсілтемені <а> тегі сипаттайды. Гиперсілтеме көрсететін ресурстың орналасуын көрсететін HREF атрибуты міндетті болып келеді. Ресурс ішкі болуы да, сыртқы болуы да мүмкін.

Келесі код фрагментінен тұратын

<А HREF="index.html"> Басты бетке өту А>

HTML-құжатты қарау нәтижесінде сендер Басты бетке өту сілтемесін көресіңдер. Сілтемеге басу нәтижесінде index, html парағына өту болады.

Гиперсілтеме абсолюттік, салыстырмалы, ішкі деп бөлінеді.

Сілтеме орналасуы өзгермейтін болып келетін сыртқы интернет-ресурсқа көрсететін тағы бір мысал қарастырайық. HTML-кодының мына жолы

<а REL="nofollow" target="_blank" HREF="http://infourok.ru/go.html?href=%3CA+HREF%3D"http://www.google.kz">http://www.google.kz"> Google-ден көп нәрсені біл а>

браузерде қарау кезінде Google іздеу жүйесі парағына сілтеме жасайды.

Бұл - абсолюттік сілтеме деп аталады.

Бұл жерде абсолюттік сілтеме D дискісіндегі Document бумасында сақталған құжатқа көрсетеді. Жергілікті компьютерде бұл сілтеме жұмыс жасайды. Бірақ мұндай сілтемесі бар web-парақты серверге орналастырған кезде сендер «бос сілтеме» аласыңдар, себебі серверде D дискісінде Document бумасы жоқ.

Салыстырмалы сілтемелер

Сайтты құрастыру мен оның жұмыс жасауын тексеру үшін желіге қосылмаған компьютерді қолдана аласыңдар. Сайтты құрайтын барлық web-парақтар бір бумада орналасуы керек. Сол кезде парақтарды байланыстыратын гиперсілтемелерде файлдың атауын көрсету жеткілікті болады. Сайтты жергілікті немесе ғаламдық желіде жариялаудан кейін (іс жүзінде сайтпен бірге буманың тасымалдануы болады) гиперсілтемелердің жұмыс жасау қабілеті сақталып қалады.

Ішкі ресурстар үшін құжатты анықтайтын жолдың сендердің қазіргі орналасқан орындарыңа қатысты көрсетілуі бар салыстырмалы сілтемелер пайдаланылады.

Бұны site бумасында орналасқан біздің сайт мысалында қарастырайық, суреттер images салынған бумасында орналасқан (172-сурет ):

172-сурет. Сайт құрамының үлгісі

Қолданушы осы сәтте l.html парағында болсын деп болжайық. Бұл жерден 2.html парағына өту үшін HTML- кодта келесі жолды жазуларың қажет:

<а href="2.html"> сілтеме а>.

Браузер 2.html құжатын қазір жүктелген l.html парағы орналасқан бумадан іздейді.

1 .html парағынан index.html парағына өту үшін ондағы сілтеме мына түрде жазылуы мүмкін:

<а href="../index.html"> басы а>,

Браузер index.html құжатын осы сәтте жүктелген l.html парағының орналасуынан бір бумаға жоғары іздейді.

Site бумасын ңай жерге орналастырсаңдар да мұндай сілтемелер жұмысқа қабілетті болып қалады.

Ішкі сілтемелер

Ішкі сілтемелер (173-сурет) ұзын web-парақтарда қолданылады. Мысалы, құжаттың басындағы мазмұннан сілтемелер ондағы көрсетілген құжаттың бөлімдеріне алып келеді. Ішкі сілтемелер екі кезеңмен жасалады. Ең алдымен өту нүктелері анықталады, оларда «атау берілген зәкір» (агылш. named anchor) дайындалады. Бұдан кейін парақтың таңдалған орнында зәкірге сілтемелер жасалады.

173-сурет. Ішкі сілтемелер сұлбасы

Зәкірлер <а> тегімен жасалады, NAME атрибутының мәні ретінде зәкірдің аталуы көрсетіледі.

Мысалы,<a name="l">.

Кодтың фрагментін өтудің таңдалған нүктесіне, сілтемені ұйымдастыру қажет болатын парақ бөлігінің алдына орналастырады.

Зәкірдің аты ретінде кез келген таңбалар (арнайы таңбалардан басқа) топтамасы қолданылады. Негізгі талап - ол осы парақта қайталанбауы қажет. Әзірлеушіге ыңғайлы болу үшін зәкірдің атауы, көрсететін парақтың бөлігінің мазмұнына сәйкес мағыналы болу керек.

Зәкірге сілтеме жасау үшін HREF атрибутының мәні ретінде алдына тор белгісі # қойылған зәкірдің аталуын көрсетеді.

Мысалы, <а href="#l">сілтемеа>.

Электронды адреске сілтемелер

Web-парақтардағы электронды адреске сілтемелер байланыстарда (контакт) жиі көрсетіледі. Мұндай сілтемелерді ұйымдастыру үшін <а> тегінің HREF атрибутының мәні ретінде mailto: міндетті параметрін, адресінің e-mail-i, қажетті жағдайда хаттың тақырыбын көрсетеді.

Сілтеме келесідей болады:

<а REL="nofollow" target="_blank" HREF="http://infourok.ru/go.html?href=mailto%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FFONT%3E%3C%2FFONT%3E%3CFONT+COLOR%3D"#000000">: [e-mail] SsubjесР=хаттың тақырыбы"> мәтін сілтемесіа>.

Қолданушы мұндай сілтемені басқан кезде оның компьютерінде орнатылған пошта программасы жүктеледі.

Суреттерді қолданатын сілтемелер

Гиперсілтеме мәтін де, сурет те болуы мүмкін.

Гиперсілтеме болып келетін суретке қолданушының көңілін аударту үшін қосымша тінтуір көрсеткішінің өзгеруіне (автоматты түрде жасалады) суретті көк жиектемемен белгілеуді қосуға болады. Бұл үшін BORDER атрибутының мәнін пиксельмен көрсетеді.

Гиперсілтемелердің түстерін бастапқы күйінен өзгертуге болады. тегіндегі LINK атрибутының мәні гиперсілтеменің түсін орнатады. VLINK атрибутының мәні өтулер жасалған гиперсілтемелердің түсін орнатады.

Мысалы, тегі гиперсілтемелер үшін қызыл түс орнатады, ал қаралған гиперсілтемелер үшін сары түсті орнатады.

!ТҮЙІН

• Гиперсілтеме құжаттың орналасуын көрсететін HREF атрибуттары бар <а>...а> тегін қолданумен әзірленеді.

• Мәтін, сурет, мәтіні бар сурет гиперсілтеме бола алады.

• Гиперсілтеменің түсін өзгерту үшін тегінің link және vlink атрибуттары қолданылады.

• Сілтемені басқа параққа, электрондық пошта адресіне, ағымдағы парақтың фрагментіне, сыртқы файлға ұйымдастыруға болады.

• Ұзын парақтың бөліктері араларына өту үшін зәкір қолданылады: өтуді ұйымдастыратын абзацтың алдына <а name=”1”>а> (атаулар бірегей болу керек) қосамыз, парақтың кез келген бөлігінен зәкірге өту үшін <а REL="nofollow" target="_blank" HREF="http://infourok.ru/go.html?href=%231">сілтемеа> қосамыз.

ІV. Компьютердегі тәжірибелік жұмыс

10 мин

Компьютердегі тәжірибелік жұмысты ДК-де орындайды. Оқулықтың 334-335 б.б.

Компьютердегі тәжірибелік жұмыс

А деңгейі

1. Интернеттің іздеу жүйесіне сілтейтін мәтіндерден тұратын links.html құжатын дайындаңдар.

2. Өз жобаларың бойынша жұмысты жалғастырыңдар. Сайт ішінде өтулер үшін гиперсілтеме-суреттерден тұратын menu.html парағын қосыңдар (мысалы, - бас параққа).

В деңгейі

1. Графикалық және мәтіндік сілтемесі (элементтер саны бестен кем емес) бар әуендер тізімі ұйымдастырылатын HTML-құжат әзірлеңдер.

2. А деңгейінің 2-тапсырмасын орындаңдар. Құрамында Ин- тернеттің танымал іздеу жүйесін көрсететін суреттер түріндегі сілтемелері бар links.html құжатын құрыңдар, menu.html парағымен байланыстырыңдар.

С деңгейі

1. Бөлімдер бойынша топталған сілтемелерден тұратын HTML-парақты құрыңдар.

• web-cepвиcmep (пошталық, серверлер, іздеу жүйелері және т.б.);

• ішкі ресурстар (сендер дайындаған құжаттар мен жобалар, компъютердегі бар оқу материалдары).

Оны menu.html парағымен байланыстырыңдар.

2. Foto.html парағын модификациялаңдар және өздеріңнің сайттарыңның мәзірімен байланыстырыңдар:

• Үлкен фотосуреттердің көшірмесін дайындаңдар. Олардың өлшемдерін, 100x75 пиксельге дейін өзгертіңдер.Фотосуреттерді кішірейтуді сендер белгілі кез келген редакторда орындаңдар (мысалы, MS Picture Manager).

• Фотосуреттердің кішірейтілген көшірмесін файлдарда 1.jpg, 2 jpg, ... атауларымен сақтаңдар. Үлкен фотосуреттерді - файлдарда 1_big.jpg, 2_big.jpg, ... атауларымен.

• index.html парағынан фотосуреттердің кішірейтілген көшірмелері бар foto.html парағына сілтемені ұйымдастырыңдар.

• Әрбір кіші фотосуретті сілтеме ретінде дайындаңдар. Оны басқан кезде үлкен фотосуреті бар жаңа терезе ашылу керек.

Бұл үшін foto.html файлындағы құжатқа код қосыңдар:

<а REL="nofollow" target="_blank" HREF="http://infourok.ru/go.html?href=images%2Fl_big%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FFONT%3E%3C%2FFONT%3E%3CFONT+COLOR%3D"#000000">.jpg" target="new">

border="0" width="100"

heght="75">

а>

фотосуретті браузердің жаңа терезесіне жүктелуін <а> тегінің қандай атрибуты анықтайды?

V. Сергіту сәті

2 мин

Видеоға қарап көрсетілген қимыл іс-әрекеттерді орындайды.

Жаттығуды орындарында отырып орындау.

VI. Бекіту.

8 мин

Бақылау сұрақтары мен тапсырмаларды орындайды, сұрақтарға ауызша жауап береді. Оқулықтың 334 беті.

Бақылау сұрақтары мен тапсырмалар

1. Web-парақта гиперсілтемелер қандай мақсатпен орнатылады?

2. Гиперсілтемені анықтайтын тег атауын айтыңдар және оның атрибуттарыныц мүмкін мәндерін атап өтіңдер.

3. Суретті қалай гиперсілтеме етуге болады?

4. Неліктен сайттың ішінде абсолютті сілтемелерді қолдануға болмайды?

5. Гиперсілтеменің зәкірі ретінде қандай қызмет бола алады?

6. Гиперсілтеменің түсін қандай мақсатпен өзгертеді?

7. <а> тегіндегі target және title атрибуттарының тағайындалуын анықтаңдар.

8. Кесте гиперсілтеме бола ала ма?

VIІ. Рефлексия

2 мин

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

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

Не білдім?

Не ұнады?

Не әлі үйрену керек?

Тілек.

VIІI. Оқушыларды бағалау

2 мин

Сабаққа белсенді қатысқан оқушыларды бағалау, бағаларын күнделіктеріне қою.

Бағаны күнделіктеріне қойдырады

ІХ.Үй жұмысы

2 мин

§29 оқу

Күнделіктеріне үй тапсырмасын жазып алады.