Сайт жасауды оқыу әдістемесі

WEB-жылдамдытқыштары.

Стандартты браузерлер кэштеу технологиясын Web-парақтарды жүктеуді жылдамдату үшін қолданатынын айтып кеткен болатынбыз. Бірақ, жүктеу процесін Internet Explorer-ға қарағанда  жақсырық орындайтын арнайы программалар бар. Жылдамдатуды жүйелік қосылулардың параметрлерін оптимизациялау арқылы, мәліметтерді кэштеу және “қажеті  жоқ” мәліметтерді алып тастау арқылы жүзеге асыруға болады. Кейбір программаларда жоғарыда айтып өткен механизмдердің бірден бірнешеуі жүзеге асырылған.

Кэштеу процесін оптимизациялау арқылы жылдамдату.

Мәліметтерді кэштеу кезінде Web-парақтарды жүктеуді жылдамдатуды айтқанда 3 бағытты  белгілеп өткен жөн:

• IP-мекендерді кэштеу;
• Локалді компьютерде дискті кэшті оптимизациялау;
• Упреждающее чтение.

Әр бағыттың неден құралғанын түсіндіріп өтейік.

Сіз URL браузерге сол немесе басқа  ресурсты жібергенде, ол DNS-серверге доменді  атты IP-мекенге жіберуге сұраныс  жасайтыны белгілі. Қажетті мәліметтерді табу алдында қаншама DNS-серверлерді  сұрап өтеді. Әдетте, IP-мекен қолданушы  компьютерінде кэштелмейді және сіз бірнеше минут алдын қолданып отырған мекен қайта сұралып  отырады, ол тағы да уақыт алады. Сондықтан, Web-парақтарды көрсетуді жылдамдатудың  бір жолы DNS-серверлерді едәуір оптималды  сұрау жүргізетін және IP-мекендерді кештеуді ұйымдастыратын программаны қолдану болып табылады.

IP-мекенді алып болғаннан кейін,  обозреватель компьютердің кэшінде  көрсетілген парақ копиясының  сақталғандығын тексеріп, егер кэштегі  құжат жарамды болса, ол қолданушыға  жіберіледі. Бұл процесс та уақыт  алады және оны жылдамдату  – бөлек мәселе, сондықтан оны  басқа программаға жүктеуге болады. Осы мәселемен айналысатын көптеген  программалар көп орын алатын, бірақ жылдам істейтін өз кэшін  құрады. Жылдамдатудың екінші бағыты  осыны құрайды.

Үшінші механизмді (упреждающее  чтение) түсіндіру үшін, кәдімгі  браузердің жұмысына қайта оралайық. Құжат браузермен көрсетілгеннен кейін, әдетте үзіліс болады. Қолданушы құжатты  оқығанша жүктеу процесі тоқтатылады, яғни система простаивает. Упреждающее  чтение үзіліс кезінде қосылыстарды қолдануға мүмкіндік береді, бұл  кезде осы параққа ссылкасы бар  құжаттар жүктеледі. Осы құжаттардың  фондық режимде жүктелуі қолданушы  сұраныс жібергенде тез көрсетуге  мүмкіндік береді. Үшінші механизм осы упреждающее чтение немесе префетчингтан (prefetch-ағылшынның алдан-ала алып келу деген сөзінен) құралады. Кейде осы механизмді упреждающее загрузкой (ағылшынның pre-loading деген сөзінен) деп те атайды.[17]

 

 

 

 

 

 

 

 

2. Оқушыларға сайт құруды оқытудың әдістемесі
1. 2.1 Әртүрлі тілдерде сайт құру әдістемесі

Қазіргі кезде педагог  мамандар сабақ беру кезінде оқушылардың  қызығушылығын арттыру мақсатында және білім алуды барынша қол жетімді қылу үшін әр түрлі новаторлық жұмыстар ойлап табу керек. Елімізде орта мектепте информатика пәнін оқыту мәселесі бойынша зерттеу жұмыстары көптеп саналады, олардың ішінде: «Оқытудың компьютерлік технологияларын пайдалану жағдайында оқушылардың танымдық белсенділігін арттыру», (Ж.А.Караев), «Жалпы білім беретін мектептерде информатиканы оқытуды жетілдіру», (С.Кариев), «Информатика мен есептеуіш техника негіздері пәнін 7-9 класстарда оқытуда оқушылардың өзіндік танымдық іс-әрекетін қалыптастырудың әдістемелік негіздері», (С.А.Мұхамбетжанова), «Оқушыны компьютер негізінде дербес оқытудың педагогикалық мүмкіндіктерін зерттеу», (Қ.З.Халыкова) көптеп саналады. Аталмыш новатор методикалық жұмыстарын зерттей келе мен «оқушыларға сайт құруды оқыту әдістемесі» дипломдық жұмысымды порабациялау барысында төмендегідей методикалық кешен құрастырдым. Оқытудың бірінші сатысында оқушыларға HTML гипермәтіндік тілін оқытамын әрбір теориялық сабақ бір практикалық сабақпен бекітіледі. Оқушыларға өкөрнекі түрде бейне сабақтарды осы методикалық кешннің негізіне кіргізілді. HTML-дің негізгі тегтері. HTML Атрибуттары

• HTML сөзінің толық мағынасын Hyper Text Markup Language – Мәтіндерді өңдеу тілі деп аударсақ болады.
• HTML құжаты кәдімгі мәтін құжаты болуымен қатар өзінде белгіленген көрсеткіштерді (markup tags) қамтиды.
• Markup tag-тер шолғышқа құжатты (уеб-бетті) қалай көрсетуі керек екенін айтады.
• HTML құжаты htm немесе html түрде сақталуы тиіс немесе міндетті.
• HTML құжатын қарапайым мәтін өңдеушімен жасауға болады.

Байқап көресіз бе?! Онда, мына сілтемемен жүріп: Пуск => Все программы => Стандартные => Блокнот , Блокнотты ашыңыз. Ашылған Блокнотқа төмендегі мәтінді жазыңыз:

<html>

<head>

<title>Бет тақырыбы</title>

</head>

<body>

Менің алғашқы уеб-бетім <b>Бұл сөз қалың болады</b>

</body>

</html>

  Жазып болғаннан кейін құжатты мына сілтемемен жүріп отырып сақтаңыз: Файл => Сохранить как, Имя файла дегенге birinshiBet.htm, Тип файла дегенге Все файлы, Кодировка дегенге unicod таңдаңыз. Енді сақтаған құжатыңызды шолғышпен ашыңыз. Шолғышта Менің алғашқы уеб-бетім жазуын көрсеңіз, онда сіз барлығын дұрыс істедіңіз.  
 Жоғарыда жазған HTML құжатыңыздағы алғашқы тег <html> тегі. Бұл тег шолғышыңызға HTML құжатын ашу керек екенін айтады. Құжат </html> тегімен аяқталады. Бұл шолғышқа HTML құжатының аяқталғанын айтады. 
<head> және </head> тегтерінің арасы құжат туралы мәліметтерді қамтиды қамтиды. Бұл мәліметтер шолғышта көрінбейді. 
<title> және </title> тегтерінің арасына құжаттың тақырыбы жазылады. Жазылған тақырыб шолғыштың сол жақ бұрышында көрініп тұрады.  
<body> және </body> тегтерінің арасына шолғышта көрінетін мәліметтер жазылады. 
<b> және </b> тегтерінің арасында жазылған жазу қалың (bold) болады. 
 HTML редакторлары туралы аз ғана мәлімет 
HTML құжаттарын WYSIWYG (what you see is what you get), FrontPage немесе Dreamweaver программаларымен оңай түрде жазуға болады. 
Бірақ HTML-ді жетік меңгеремін деген адамның алғашында Блокнот (notepad) қолданғаны жақсы.

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

Тақырыптар 

  Тақырыптар <h1>, <h2>, <h3>, <h4>, <h5>, <h6> тегтерін қолданып жазылады. <h1> ең жоғарғы регистр, <h6> ең төменгі регистр.

 

<h1>Бірінші дәрежелі  тақырып</h1>

<h2>Екінші дәрежелі  тақырып</h2>

<h3>Үшінші дәрежелі  тақырып</h3>

<h4>Төртінші дәрежелі  тақырып</h4>

<h5>Бесінші дәрежелі  тақырып</h5>

<h6>Алтыншы дәрежелі  тақырып</h6>

  HTML тілі тақырыптан кейін автоматты түрде келесі қатарға түседі.

Параграфтар

Параграфтар <p> тегімен  жазылады

 

<p>Бұл бірінші параграф</p>

<p>Бұл екінші параграф</p>

HTML тілі параграф тегінің  алдынан және соңынан автоматты  түрде бір қатар қалдырады.

Тегтерді жабуды ұмытпаңыз!

Жоғарыдағы мысалда параграфтың </p> тегімен жабылғанын көрдіңіздер:

 

<p>Бұл қате жазылған  параграф

<p>Бұл да қате жазылған  параграф

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

  Қатарды аттау

Қатарды аттау үшін, яғни келесі қатарға өту үшін <br> тегі қолданылады. Бұл тегтің <p></p> тегінен айырмашылығы – бұл тег  тек ендігі қатарға өтеді, арада  бос қатар қалдырмайды. Ал <p></p> тегі өзінен кейін бос бір қатар  қалдырады.

 

<p>Бұл  <br>параграфтың  ішіне <br> орналасқан жазулар.</p>

 

<br> ма әлде <br /> ма?

Көп жерде <br> тегінің <br /> деп жазылғанын көреміз. Өйткені <br> жалғыз, жұпсыз болғаны үшін соңынан  жауып жүретін </br> тегі жоқ. Және оның бұл қасиеті HTML (XML және XHTML) тілдерінің келешекте шығатын версияларының  құралын бұзуда. Сондықтан <br /> тегін  қолдануыңызды кеңес береміз.

HTML тілінде анықтама (түсіндірме) жолдарын (қатарларын) жазу 

Анықтама жолдары HTML кодында  қай кодтың не қызмет атқаратынын  жазу үшін, өңдеуші тарапынан жазылып  қойылады. Анықтама жаөылған қатарлар шолғышта көрінбейді.

HTML-дің негізгі тегтері 

Тег	Анықтамасы
<html>	Құжаттың HTML құжат екенін білдіреді
<body>	Құжаттың шолғышта көрінетін  бөлігін білдіреді.
<h1> to <h6>	Тақырыптарды білдіреді
<p>	Параграфты білдіреді
<br>	Келесі қатарға түсіреді
<hr>	Бетте көлденең бір сызық  сызады
<!-- -->	Бұл тегтің ішіне анықтама, түсіндірме жазылады

 

Атрибуттар HTML тегтеріне  қосымша қасиет береді.

HTML тег қасиеттері HTML тегтері атрибуттар қабылдай алады. Атрибуттар HTML тегтеріне қосымша қасиеттер береді. Атрибуттар әрқашан аты/мәні болып жазылады: name="value". Атрибут әрқашан тегтің ішіне жазылады:

<p name="value"> 
 
Атрибуттарға мысал 1:

<h1> тегі тақырыпты  білдіреді.

<h1  align="center"> Тақырып  жазылумен қоса, ол тақырыптың  құжаттың  ортасында (шолғыш әйнегінің  ортасында) тұруын іске асырады

Атрибуттарға мысал 2:

<body> HTML-дің денесі, яғни  шолғышқа  көрсетілетін бөлігі.

 

<body  bgcolor="yellow"> HTML-дің  денесіндегі, яғни шолғышта көрсетілетін  бөлітің арқа бетін сары түске  бояйды.

Қарапайым HTML файлын жасау

1.      Өз жұмыс қапшығыңыздың ішінен жаңадан жасаған Web-құжаттарды сақтайтын KURS қапшығын ашыңыздар.

2.      Блокнот программасын іске қосыңыздар.

3.      Блокнот редакторы терезесінде төмендегі көрсетілген қарапайым HTML файлының мәтінін теру керек:

<HTML>

<HEAD>

<TITLE> Алғашқы HTML файлы </TITLE>

</HEAD>

<BODY>

Сәрсенбі күнгі сабақ  кестесі

</BODY>

</HTML>

4.      Файлды RASP.HTM атымен KURS қапшығында сақтап қойыңыздар да, Блокнот терезесін жауып тастаңыздар.

5.      Жасалған Web-құжатты көру үшін RASP.HTM файлы белгісін екі рет шертіңіздер, сонда Microsoft Internet Explorer браузері іске қосылып, жазылған мәліметті көрсетіп тұрады.

6.      Енді Вид- HTML түрінде командасын орындау арқылы құжаттың терілген HTML файлын Блокнот терезінде көруге болады. Осы мәтіннің екінші жолына:

<H2> Менің алғашқы парағым  </H2> деген қосымша мәтін енгізейік.  Сондай файл мәтіні мынадай  түрде бейнеленеді:

<HTML>

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

<TITLE>Алғашқы HTML файлы</TITLE>

</HEAD>

<BODY>

Сәрсенбі күнгі сабақ  кестесі

</BODY>

</HTML>

7.      Осылай түзелетін мәтінді Файл-Сохранить командасы арқылы қайта дискіге жазып қояйық та, Блокнот терезесін төменге жасырып, қайтадан Тапсырмалар тақтасында белгішесі көрініп тұрған Алғашқы HTML атын шертіп, Microsoft Internet Explorer браузері терезесін ашайық.

8.      Браузердің Вид-Обновить командасын орындап терезедегі мәлдіметтің өзгергеніне көз жеткізіңіздер. Алғашқы HTML файлы және RASP.HTM файлдарын жабыңыздар.

HTML-де мәтінді  өңдеу, пішіндеу.

HTML-де мәтінді өңдеу,  пішіндеу 

HTML мәтінді қалың немесе қисайтып (italic) етіп жазу үшін бірнеше тегтерді қолданады.

HTML бастапқы кодтарын  қалай көруге болады? 
Шолғышты ашып клавиатурадан мына екі түймешені (firefox шолғышында) қоса бассаңыз: Ctrl+U, сол кезде шолғышта ашылып тұрған уеб-беттің бастапқы коды ашылады. (IE шолғышында) Вид=>Просмотр HTML-кода 
Мәтіннің пішінін өзгерту үшін қолданылатын тегтер

Тег	Анықтамасы
<b>	Мәтінді қалың әріппен  жазады
<big>	Мәтінді үлкейтіп жазады
<em>	Мәтінді қисайтып жазады
<i>	Мәтінді қисайтып жазады
<small>	Мәтінді кішірейтіп жазады
<strong>	Мәтінді қалың қылады
<sub>	Шрифтті төменгі индекспен  көрсетеді
<sup>	Шрифтті жоғарғы индекспен  көрсетеді
<ins>	Мәтіннің астын сызады
<del>	Мәтіннің үстін сызады

 
Жоғарыда жазылған кестедегі тегтердің  мысалын көріңіз:

Бұл сөз <b> тегінің  көмегімен жазылған 
Бұл сөз <big> тегінің көмегімен жазылған 
Бұл сөз <em> тегінің көмегімен жазылған 
Бұл сөз <i> тегінің көмегімен жазылған 
Бұл сөз <small> тегінің көмегімен жазылған 
Бұл сөз <strong> тегінің көмегімен жазылған 
H₂O мұндағы 2 саны <sub> тегінің көмегімен жазылған 
E=mc² мұндағы 2 саны <sup> тегінің көмегімен жазылған 
Бұл сөз <ins> тегінің көмегімен жазылған