Тақырыбы: «HTML де гиперсілтеме құру»

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

Білімділік: гиперсілтеме туралы түсінік беру; гиперсілтеме тегтеріне анықтама беру, гиперсілтеме орындалуын корсету, алған білімді тәжірибе жүзінде пайдалана білу.

Дамытушылық: кәсіптік қызығушылықты дамыту, логикалық ойлау қабілеттерін дамыта білу, ойын нақты және жан - жақты жетілдіру.

Тәрбиелілігі: болашақ маман ретінде жауапкершілік сезімдерін ояту, өз бетімен ойларын нақты жеткізе білуге қалыптастыру.

Сабақтың түрі: тәжірибе

Оқыту әдістемесі:

индукция әдісі арқылы интерактивті оқыту қолдана отырып өткен тақырыптарды жүйелі қамту

Пәнаралық байланыс:

- «Ағылшын», «Ақпараттық ресурстар»

Сабақтың материалды- техникалық жабдықталуы:

Көрнекілік құралдары:

• компьютер;

• интерактивті тақта;

• тест бағдарламасы;

• үлестірмелі материалдар

САБАҚТЫҢ БАРЫСЫ

І. ҰЙЫМДАСТЫРУ КЕЗЕҢІ (2 мин)

Оқушылармен амандасып, сабаққа қатысымдарын тексеру.

Үй тапсырмасын сұрау

ІІ. «ОЙ ТОЛҒАУ» КЕЗЕҢІ. Оқушылардың білімін тексеру. (5 мин)

1. Белгілеу тіліне қандай тіл жатады?

2. Гипермәтін дегеніміз не?

3. Браузер дегеніміз не?

4. Тег дегеніміз не?

5. Веб бетке сурет қою үшін қандай тег қолданылады?

6. Келесі жолға көшу тегі

7. Кесте қай тег арқылы жасалады?

8. Кесте тақырыбы қандай тегпен беріледі?

9. Мәтінді туралау үшін қандай атрибут қолданамыз?

10. Тізім құру тегі

ІІІ. «ТЕХНИКАЛЫҚ» КЕЗЕҢ Үйге берілген тапсырманы тексеру. (15 мин)

Әр оқушы еркін тақырыпта веб парақ құру

IV. «БІЛІМІҢДІ БАЙҚАП КӨР» КЕЗЕҢІ

Үй тапсырмасын бекіту: (10 мин)

Интерактивті тақтаны қолдана отырып

• HTML тілінің құрылымын көрсету

• HTML тегтерін топтау (Пішімдеу, графика, кесте, тізім бойынша)

V. «КӘСІБИ» КЕЗЕҢ (30 мин)

Жаңа тақырыпты түсіндіру. «HTML де гиперсілтеме құру»

Сілтеме локальді дискте немесе компьютер желісінде орналасқан құжат ішіндегі басқа бір элементке (мәтін, тақырып, сурет т.б) басқа объектіге сілтеме беретін гипермәтінді құжаттың бір бөлігі.

Сілтеме енгізу үшін А (anchor) тегі қажет болады. Сілтеменің қайда апаратыны көрсету үшін тегтің href (hypertext reference) атрибутын пайдаланамыз.

• Мысалы сілтеме Қазақша Уикипедияға апаратын болса, HREF атрибутының мәні "kkk.wikipedia.org" тең болады. Осы тырнақшаның ішіндегі жазу Қазақша Уикипедияның толық адресі немесе сайттың URL деп аталады.

kkk.wikipedia.org" > Қазақша Уикипедияға сілтеме

• Егер бір беттен екінші бетке көшу керек болса, онда беттің толық адресі керек емес. Мысалы: Екінші бетке көшу үшін басыңыз

• Егер 2_bet.html беті website бумасында орналасқан болса, ал сілтеме басатын бірінші бетіміз (1_bet.html) буманың сыртында орналасқан болса

Екінші бетке көшу үшін басыңыз

• Беттің ішінде беттің әр бөлігіне көшіп отыратын сілтемелер жасауға болады. Ол үшін id атрибутын және # белгісін қолданамыз. Сілтеме беретін элементті id атрибуты арқылы белгілеп аламыз.

Енді осы элементке, яғни бас тақырыпқа # белгісі арқылы сілтеме жасаймыз. # белгісі браузерге сілтеменің осы беттің ішінде болатынын хабарлайды. # белгісінен соң біз сілтеме арқылы көшетін тегтің id ын жазамыз. Мысалы

Бас тақырыпқа сілтеме

• Гиперсілтеме ретінде сөз тіркесін ғана емес суреттерді пайдалануға болады . Суреттер мәтін сияқты сілтеме бола алады. Oл үшін тегі сілтемелерді анықтайтын тегінің арасында орналастырылады. Осындай суретке курсорды алып барсақ, ол курсорды сілтеме мәтінге бағытталған кездегідей түрге келеді.
  Мысалы: Жолында тіркесі гиперсілтеме ретінде кішкене компьютер суретін береді, оны шерту арқылы компьютер туралы мәлімет беретін файлына comp.html ауыстырады.

• Сонымен бірге дыбысқа да сілтеме жасай аламыз. Мысалы:

sound.wav"> дыбыс

Тапсырма 1

Веб параққа сурет пен дыбысқа сілтеме құру

дыбыс

сурет

Есерту: дыбыстық файл мен сурет файлы орналасуын анықтау

Тапсырма 2 Оқу орны туралы веб парақ құру (сурет, сырғымалы жол, гиперсілтемені кірістіру)

Ескерту: колледж тарихы, мамандықтар туралы, колледж жетістіктері парағын дайындап алу керек. (барлық парақтар бір бумада орналасуын ескеру)

Тапсырма 3 Беттің ішінде беттің әр бөлігіне көшіп отыратын сілтемелер жасау (Әр оқушы өзі туралы веб парағын құра отырып, сілтемені бір беттің ішінде орналастыру )

Мазмұны:

І тарау. Өмірбаян

І тарау. Өмірбаян

VI. «ЖЕТІСТІК» КЕЗЕҢІ Жаңа сабақты бекіту. (10 мин)

Тест сұрақтарына жауап беру(тест программасымен орындалады 10 сұрақ беріледі)

1. ҚОСЫМША АКПАРАТ сілтеме кайда бағытталган?

1. мәтінге

2. суретке

3. сайтқа

4. барлығы дұрыс

2. КЕЛЕСІ сілтеме кайда бағытталған?

1. ДЫБЫСҚА

2. БЕЙНЕГЕ

3. ПАРАҚҚА

4. ПОШТАҒА

3. Сілтеме түсі

4. Өтілген сілтеменің түсі

5. id жэне # белгісін не үшін қолданамыз

1. келесі бетке өтуге жасалатын сілтеме

2. бумаға жасалатын сілтеме

3. бір беттің ішінде жасалатын сілтемелер

4. дыбысқа жасалатын сілтеме

6. id атрибутынын мәні неден турады

1. heading1 сөзінен

2. кез келген сөзден

3. саннан

4. латын әрпінен және саннан

7. Сілтеменің кайда апаратынын көрсететін атрибут

1. img

2. id

3. href

4. А

8. Кай элементке сілтеме беруге болмайды?

1. Суретке

2. мәтінге

3. тақырыпқа

4. барлығына болады

9. Кандай белгі браузерге сілтеменің осы беттің ішінде болатынын хабарлайды?

1. # белгісі

2. id белгісі

3. a белгісі

4. href белгісі

10. Microsoft компаниясынын Web-парағының алғашкы бетіне көшу

1. Microsoft

2. Microsoft

3. Microsoft