Сайт жасау техналогиясы

Автор работы: Пользователь скрыл имя, 06 Июня 2013 в 19:24, дипломная работа

Краткое описание

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

Содержание

Кіріспе .............................................................................................................5
1. Интернет желісінде электронды кешенді құру негіздерін оқыту........7
1.1 WEB дизайн және браузерлер, іздеу роботтары..............................7
1.2 Сайт құруға арналған бағдарламалау тілдері...................................17
1.3 Интернеттегі web серверлер. Web – сервер жұмысының
механизмі. Статистикалық және динамикалық беттер.
CGI технологиясы. Скриптер..................................................................24

2. Оқушыларға сайт құруды оқытудың әдістемесі..................................29
2.1 Әртүрлі тілдерде сайт құру әдістемесі............................................. 29
2.2 Желілік ресурсты құру кезеңдері.......................................................59
2.3 Желілік ресурсты қолдану әдістемесі................................................61

Қорытынды .....................................................................................................65
Қолданылған әдебиеттер тізімі......................................................................66
Қосымша...........................................................................................................67

Скачать полностью (156.83 Кб) Сколько стоит заказать работу?
Прикрепленные файлы: 1 файл

диплом (2).docx

— 161.04 Кб (Скачать документ)

 

  1. Оқушыларға сайт құруды оқытудың әдістемесі
  2. 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> тегінің көмегімен жазылған  
H2O мұндағы 2 саны <sub> тегінің көмегімен жазылған  
E=mc2 мұндағы 2 саны <sup> тегінің көмегімен жазылған  

Мәтін фрагменттерін  ерекшелеу

1.      RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:

<HTML>

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

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

</HEAD>

<BODY><B> Сәрсенбі күнгі </B>сабақ </I><U>кестесі</U></BODY></HTML>

2.      Өзгертілген Web-құжатты экраннан көріп шығыңыздар. Мұнда сөз тіркестерін ерекшелеуді аралас түрде де қолдануға болады:

<I><B> Сәрсенбі күнгі  </B></I> сабақ </I><U> кестесі  </U>

Бірақ мұндайда тэгтерді араластыра жазудың мынадай ережелерін есте сақтаған жөн:

<Тэг-1><Тэг-2>...</Тэг-2></Тэг-1> - дұрыс жазылған тізбек

<Тэг-1><Тэг-2>...</Тэг-1></Тэг-2> - қате жазылған тізбек 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Шрифт өлшемі және  түрі</title>

</head>

<body>

<p><strong>Бұл сөз  &lt;b&gt; тегінің көмегімен жазылған</strong><br>  

 Бұл  сөз &lt;big&gt; тегінің көмегімен жазылған<br>

<em>Бұл сөз &lt;em&gt; тегінің көмегімен жазылған</em><br>

<em>Бұл сөз &lt;i&gt; тегінің көмегімен жазылған</em><br>  

 Бұл  сөз &lt;small&gt; тегінің көмегімен жазылған<br>

<strong>Бұл сөз &lt;strong&gt; тегінің көмегімен жазылған</strong><br>  

H2O мұндағы 2 саны &lt;sub&gt; тегінің көмегімен жазылған<br> 

E=mc2 мұндағы 2 саны &lt;sup&gt; тегінің көмегімен жазылған<br> 

 Бұл сөз &lt;ins&gt; тегінің көмегімен жазылған<br>

</p>

</body>

</html>

COLOR– шрифттің түсін береді Текстті <FONT COLOR=n></FONT> тэгтерінің ортасына қойсақ (бұл жердегі n – түс аты) Сіз оған керекті өлшем бересіз:

<font COLOR="white">Қызыл</font>  
<font COLOR="#FF0000"> Қызыл </font>

Сонымен түс туралы басынан  айтып кетейік. <BODY> тэгінің ішіне BGCOLOR параметрін жазып және оған түс  атын немесе оның 6 орынды кодын беру керек. Берілген екі мысал бетті  қызыл түспен бояйды.

<BODY BGCOLOR="RED">(түстің  аты қолданылған)  
<BODY BGCOLOR="#FF0000">(түс 6 орынды кодпен берілген)

Информация о работе Сайт жасау техналогиясы