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

Автор работы: Пользователь скрыл имя, 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 Кб (Скачать документ)

&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-ші бағана


 

Кесте тегтері

Тег атауы

Анықтамасы

<table>

Кесте

<th>

Кесте тақырыбы

<tr>

Қатар

<td>

Бағана

<caption>

Тақырыпша

<colgroup>

Қатарлар топтамасы

<thead>

Кестенің жоғарғы бөлігі

<tbody>

Кестенің body қасиеті (ортаңғы  бөлігі)

<tfoot>

Кестенің ең төменгі бөлігі


 
 

 

align - Кестенің уеб-беттің  қай тарапында тұратынын анықтайды. (Мысалы: оң жақта, сол жақта  немесе ортады деген сияқты)  
background – Кестенің арқабетіне сурет береді.  
bgcolor - Кестенің арқабетінің түсін береді  
border – Кесте шекарасының қалыңдыңы (пикселмен беріледі.)   
bordercolor – Кесте шекарасының түсін береді.  
cellpadding – Кестенің шекарасы мен ішіндегі мәліметтердің ара қашықтығы.  
cellspacing – Кесте ішіндегі ұяшықтардың ара қашықтығы.  
cols – Кестедегі бағаналар саны.  
frame – Кестенің айналасындағы шекараны қалай көрсету керек екенін шолғышқа мәлімдейді.  
height – Кестенің биіктігі.  
rules - Кесте ұяшықтарының арасындағы шекараны қалай көрсету керек екенін шолғышқа хабарлайды.  
summary – Кестенің қысқаша сипаттамасы.  
width – Кестенің енін береді (Пикселмен де, пайыздық % түрінде де беруге болады.)  
  
Мысалдар

<!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>

<table align="center" width="200px" height="200px"

cellpadding="0" cellspacing="0" border="1">

<tr>

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

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

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

</tr>

<tr>

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

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