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

Автор работы: Пользователь скрыл имя, 27 Февраля 2013 в 19:39, дипломная работа

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

Дамыған елдердегі білім беру жүйесінде ерекше маңызды болып табылатын мәселелердің бірі – информатика пәнінен WEB сайт арқылы оқытуды ақпараттандыру, яғни оқу үрдісінде ақпараттық технологияларды пайдалану болып табылады. Қазіргі таңда да елімізде білім беру жүйесінде жаңашылдық қатарына ақпараттық кеңістікті құру еніп, көкейтесті мәселе ретінде күн тәртібінен түспей отырғандығы мәлім.[1]

Содержание

Кіріспе .............................................................................................................5
Интернет желісінде электронды кешенді құру негіздерін оқыту........7
1.1 WEB дизайн және браузерлер, іздеу роботтары..............................7
1.2 Сайт құруға арналған бағдарламалау тілдері...................................17
1.3 Интернеттегі web серверлер. Web – сервер жұмысының
механизмі. Статистикалық және динамикалық беттер.
CGI технологиясы. Скриптер..................................................................24
Оқушыларға сайт құруды оқытудың әдістемесі..................................29
2.1 Әртүрлі тілдерде сайт құру әдістемесі............................................. 29
2.2 Желілік ресурсты құру кезеңдері.......................................................59
2.3 Желілік ресурсты қолдану әдістемесі................................................61
Қорытынды .....................................................................................................65
Қолданылған әдебиеттер тізімі......................................................................66
Қосымша...........................................................................................................67

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

редактированная.docx

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

 

<BR CLEAR =LEFT>

Мәтін сол жақтағы жақын  арадағы бос алаңнан бастап жалғастырылады

<BR CLEAR =RIGHT>

Мәтін оң жақтағы жақын  арадағы бос алаңнан бастап жалғастырылады

<BR CLEAR =ALL>

Мәтін сол және оң жақтағы  алаң бос болғанда жалғастырылады


 

<NOBR> тегі

<NOBR> тегі (No Break, үзіліссіз)  браузерге барлық мәтінді бір  жолда үзіліссіз бейнелеуге нұсқау  береді. Егер <NOBR> тегінде бекітілген  мәтін экранға сыймаса, браузер  құжат терезесінің төменгі бөлігіне  горизонтальды айналдыру жолағын  қосады. Егер сіз айкын жерден  жолды алып тастағыңыз келсе,  сол жерге <BR> тегін қойыңыз.

Символдарды бейнелеуді басқару тегі

Бұл тегтерді екі классқа  бөлуге болады: бейнелеу формасын басқару  тегі (font style) және ақпарат типін сипаттайтын  тегтер (information type). Әртүрлі тегтер бейнелеу кезінде бірдей нәтиже көрсетеді. Ол басты жағдайда програманы түсіндірушінің жөндеуіне және қолданушының ұнатуына байланысты.

HTML-де арнайы символдар 

HTML кодтарының ішіне кейбір ("<" сияқты) символдар жазылса,  олар шолғышта көрінбейді. Бұл  секілді символдарды шолғышта  көрсете алу үшін басқа символдар  қолданылады.

Арнайы символдар

HTML құжаты ішінде мұндай  символдарды көрініске шығара  алу үшін &lt; немесе &#60; деп жазуымыз керек. &lt; мен &#60; символдарының көрсететін мәні бірдей, бұл тек қолайлылық үшін жасалған. Яғни сандармен жаттау оңайлау болғаны үшін &lt; символын &#60; деп те жазады. Арнайы символдар үлкен/кіші әріптерді сезгіш, яғни &lt; мен&LT; бірдей нәрсе емес. 
 Екі сөздің арасын бір (пробелден) көп ашу 
Әдетте HTML құжатына мәтін жазғанда, екі мәтіннің арасын қанша ашық қалдырсаңыз да, шолғышта көрсетілгенде тек бір ғана (пробел) мөлшеріндей ара қашықтық болады. Екі сөздің арасын үлкендеу етіп ашу үшін арнайы &nbsp; символы қолданылады. Мысалданкөріңіз:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Символдар</title>

</head>

<body>

<p>Бұлекісөздіңарасықатты&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ашылады.</p>

<p>Алмынаекісөздіңарасы            бірғана (пробел) ашылады</p>

</body>

</html>

Eкісөздіңарасынқаншаашқымызкелсесoншасимволқойыпекісөздіңарасынқалағанқашықтықтаашааламыз. 
Еңкөпқолданылатынарнайысимволдар

Нәтиже

Анықтамасы

Арнайы символ

Цифрмен жазылған түрі

 

Бос орын қалдыру

&nbsp;

&#160;

<

Солжақ үшбұрышты жақша

&lt;

&#60;

>

Оңжақ үшбұрышты жақша

&gt;

&#62;

&

Ағылшынша және деген сөз

&amp;

&#38;

"

(") Тырнақша

&quot;

&#34;

'

Апостроф

&apos;

&#39;


 
Кейбір арнайы символдар 

Нәтиже

Анықтамасы

Арнайы символ

Цифрмен жазылған түрі

¢

Cent

&cent;

&#162;

£

Pound

&pound;

&#163;

¥

Yen

&yen;

&#165;

€

Euro

&euro;

&#8364;

§

Section

&sect;

&#167;

©

Copyright

&copy;

&#169;

®

Көшірме маркасы

&reg;

&#174;

×

Көбейту

&times;

&#215;

÷

Бөлу

&divide;

&#247;


 

Блокнот қолданбасын ашып онда төмендегі кодты жазыныз. Жазып  болғаннан кейін оны .html кеңейтілуімен  сақтаңыз.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Символдар</title>

</head>

<body>

<p>Бұлекісөздіңарасықатты&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ашылады.</p>

<p>Алмынаекісөздіңарасы            бірғана (пробел) ашылады</p>

</body>

</html>

 

HTML-де тізім жасау (Lists)

HTML-де иашарамен тізімделген,  сандармен тізімделген, ашықтамалы (түсініктемесімен) тізімдер жасауға  болады.

Ишаралармен кезексіз тізімдер

Кезексіз тізім < ul > тегінің  ішінде, жазылатын мәлімет, яғни тізімделетін мәлімет <li> тегінің ішіне орналасады. Төмендегі мысалмен көрейік:

<ul>

<li>Сүт</li>

<li>Айран</li>

</ul>

Мысалдың нәтижесі:

  • Сүт
  • Айран

Тізімге параграф, сілтеме (link) немесе тағы бір тізім жазуға болады.

Сандармен кезектелген тізімдер

Сандармен кезектелген тізімдерде тізім <ol> тегімен басталады. Тізімделетін мән <li> тегінің ішіне жазылады. Төменде мысалда көрейік:

<ol>

<li>Сүт</li>

<li>Айран</li>

</ol>

Мысалдың нәтижесі:

  1. Сүт
  2. Айран

Aшықтамалы (түсініктемесімен) тізімдер

Aшықтамалы (түсініктемесімен) тізімдер <dl> тегімен басталады.  Тізімделетін әр мәлімет <dt> тегінің ішіне жазылады. Әр тізімнің  ашықтамасы <dd> тегінің ішіне  жазылады. Төменде мысалда көрейік:

<dl>

<dt>Сүт</dt>

<dd>Түсі ақ, сұйық зат</dd>

<dt>Айран</dt>

<dd>Түсі ақ, сұйық, бірақ  сүттен қоюлау</dd>

</dl>

Мысалдың нәтижесі:

Сүт

Түсі ақ, сұйық зат

Айран

Түсі ақ, сұйық, бірақ сүттен қоюлау

Aшықтамалы (түсініктемесімен) тізімге параграф, сілтеме (link) немесе  тағы бір тізім жазуға болады.

Тізім тегтері 

Тег атауы

Анықтамасы

<ol>

Сандармен кезектелген тізім

<ul>

Ишаралармен кезексіз тізім

<li>

Бұл тегтің ішіне тізімделетін мәлімет жазылады

<dl>

Aшықтамалы (түсініктемесімен) тізім

<dt>

Ашықталатын мәліметтің тізімі

<dd>

Әр тізімнің ашықтамасы


 

<!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>НТМL тегтерінің  топтары.</strong><br>

<dd>

Барлық НТМL тегтернің  тағайындалуы мен әрекеттесу орталарын  келесі негізгі түрлерге бөліп көрсетуге  болады; </dd></p>

<ul>

<li>Құжаттың құрлымын  анықтайтындар; </li>

<li>Гипермәтін блоктарын  өңдеу (параграфтар, тізімдер, кестелер, суреттер); </li>

<li>Гипермәтіндік сілтемелер  немесе закладки; </li>

<li>Диалог ұйымдарыүшін  формалар;</li>

<li>Программаны шақыру. </li>

</ul>

<p>Гипермәтіндік желінің  құрлымы  гипермәтіндік сілтемелермен  беріледі. Гипермәтіндік сілтеме  - бұл сілтемесі  анықталған  тематикалық, логикалық немесе  құжатпен қандайда бір басқа  тәсілмен  байланысқан HTML құжатының  басқа адресі немесе Internet – тің  ақпараттық  ресурсы.<br>

  WWW жүйесінде гипермәтіндік   сілтемелерді жазу үшін, Universe Resource Locator.деп аталатын арнайы форма   өңделіп шығарылған. Бұл өңделген  форманы қолдануды келесі мысалда  көруге  болады: <br>

  Класикалық құжаттың  қарапаймы  түрін қарастырайық: <br>

Netscape Communication компаниясы  фрейм оргонизациясының мүмкіншілігімен  құжаттың класикалық формасын  кеңейтті,  онда жұмыс терезесін  бірнеше бағынышсыз фреймдерге  болуге болады. Әр фреймда   өзінің  HTML беті жазылған. </p>

<ol><li><strong>Өзін  тексеруге арналған сұрақтар</strong>: <br></li>

<li>HTML тілі. Таңбалар, тегтер, элементтер, атрибуттар.<br></li>

<li>  Веб-дизайн/Дмитрий  Кирсанов - СПб: Символ-Плюс, 2004-376 стр.<br></li>

<li>HTML 4.0 в подлиннике/<a href="file:///E:\">Матросов,</a><a href="file:///E:\">Сергеев,</a><a href="http://www.books.ru/shop/authors/235">Чаунин</a> – СПб: BHV, 2000 –  672 стр.</li></ol>

</body>

</html>

Кестелер (Tables)

HTML-де кесте жасай аласыз. Кестелер <table> тегімен жазылады. Бір кестеде <tr> тегін қолданып  қатар (жол) жазамыз және әр  жолда <td> тегін қолданып бағана  жазамыз. <td> тегінің мағынасы table data деген сөз. Бұл бағананың  ішіне мәтін, суреттер, тізімдер  және формалар т.б жазуға болады.

<table border="1">

<tr><td>1-шіқатар, 1-шібағана</td>

<td>1-шіқатар, 2-шібағана</td>

</tr><tr>

<td>2-шіқатар, 1-шібағана</td>

<td>2-шіқатар, 2-шібағана</td>

</tr></table>

Нәтижесітөмендегідейболады:

1-ші қатар, 1-ші бағана

1-ші қатар, 2-ші бағана

2-ші қатар, 1-ші бағана

2-ші қатар, 2-ші бағана


 
Кестелер және Шекарасының (border) атрибуттары

Егер HTML-мен кесте жасаған  кезде шекарасына мән (value) берілмесе, көріністе шекарасыз шығады. Кей  кезде шекара қою керек болады, сонда border-дің мәнін беру керек. Шекараға мәнді жоғарыда көрсетілген мысалдағы секілді беру керек. Кестеде тақырыптар <th> тегінің ішіне жазылады:

<table border="1">

<tr><th>Тақырып</th>

<th>Тағыбіртақырып</th>

</tr><tr>

<td>1-шіқатар, 1-шібағана</td>

<td>1-шіқатар, 2-шібағана</td>

</tr><tr>

<td>2-шіқатар, 1-шібағана</td>

<td>2-шіқатар, 2-шібағана</td>

</tr></table>

Бұл мысалдың нәтижесі төмендегідей болады:

Тақырып

Тағы бір тақырып

1-ші қатар, 1-ші бағана

1-ші қатар, 2-ші бағана

2-ші қатар, 1-ші бағана

2-ші қатар, 2-ші бағана

Информация о работе Сайт жасауды оқыу әдістемесі