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

Автор работы: Пользователь скрыл имя, 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

Прикрепленные файлы: 1 файл

диплом (2).docx

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

Уеб-беттің арқа беті(background)

Уеб-беттің артқы беті(background)

<body> тегі уеб-беттің  артқы бетін сәндеу үшін екі  атрибут қолданады. Біріншісі  - "bgcolor", екіншісі - "background". Мұндағы  "background" атрибуты арқылы уеб-беттің  артқы бетіне сурет қоя аламыз. Ал "bgcolor" атрибуты арқылы артқы  бетке түс береміз. Барлығын  мысалдармен көрейік

Мысалдар

<body bgcolor="blue">

немесе

<body bgcolor="red">

Ал сурет қоярда былай  жазамыз:

<body background="http://www.webteacher.kz/images/suret.jpg">

HTML-де түстер (colors)

HTML-де түстер 

HTML-де түстер RGB (қызыл, жасыл, көк) комбинациясын оналтылық сандар жүйесінде жазу арқылы белгіленеді. Ең төменгі мәні - #00, ең жоғарғы мәні - #FF. Төменде айтылып отырған комбинация арқылы жазылған түстердің кестесі берілген:

W3C Стандарт түстердің  атаулары:  
     W3C, 16 түстің стандартты атауын берген. Олар: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, және yellow.

16 миллион түрлі түс Қызыл, жасыл және көк түстерінің әр бірінің 255 түрлі реңі бар. Бұл үш түсті неше түрлі комбинацияда жазып (255 x 255 x 255) 16 миллион түрлі түс шығаруға болады. Бірінші қосымшада  қызыл түстің 255 түрлі реңі жазылған (барлығы емес) кесте келтірілген (бұл жерде жасыл мен көк түстер жоқ):  

HTML-де түстердің атаулары бірінші қосымшадағы кестеде ең көп қолданылатын шолғыштардың көрсете (қолдай) алатын түстердің ағылшынша атауы және оналтылық жүйеде жазылу тәсілі көрсетілген:

Қаріп гарнитурасы (типі) мен түсін өзгерту

<FONT>тэгі бөліктерініңкөлемін, типін және түсін өзгертуге мүмкіндік береді. Қаріп типін өзгерту <FONT> тэгіне FAGE атрибутын қосу арқылы орындалады. Мысалы, мәтін бөлігін KZ Arial қарпімен жазу үшін: <FONT FAGE=”KZ Arial”> тэгін қолдану қажет.

Қаріп түсін беру үшін <FONT>тэгінің COLOR=”X”> атрибутын жазу керек. Мұндағы Х орнына ағылшын тіліндегі түс атын немесе оның он алтылық жүйедегі сандық мәнін жазса болады. Он алтылық санды қолданғанда, түс құрамындағы қызыл (R-Red), жасыл (G-Green), көк (B-Blue) бояулардың араласу мөлшерін 00 мен FF сандары аралығындағы мәндермен көрсету керек. Осы тәсілді бояу түсін көрсетудің RGB форматы деп атайды.

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

HTML>

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

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

</HEAD>

<BODY>

<U><I><B><FONT COLOR=”#FF0000”  FAGE=”ARIAL”> SIZE=”7”

Сәрсенбі күнгі </FONT></B></I></U><BR>

<FONT COLOR=”GREEN” FAGE=”ARIAL”  SIZE=”4”>сабақ кестесі

</BODY>

</HTML>

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

 

Құжат фоны мен  жапы мәтіннің түсін беру

Құжат фоны мен жылпы мәтіннің түсін беру кезінде браузерлер алдын  ала келісілген (по умолчанию) түстерді пайдаланады, олар браузерлер параметрлері арқылы тағайындалады. Егер біз басқа  түстерді пайдаланғымыз келсе, онла олардың бастапқы мәндері HTML файлының бас жағында жазылатын <BODY> тэгінде  көрсетіледі. Осы тэгтің BGCOLOR=... атрибуты құжаттың фон түсін, TEXT=... атрибуты жалпы  мәтін түсін анықтайды. LINK=… және VLINK атрибуттары әлі қаралмаған және қаралған сілтемелік сөздер түсін тағайындайды (соңғы екеуі кейінірек қарастылады)

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

HTML>

<HEAD><H2 ALIGN=”CENTER”> Моя  первая страница </H2>

TITLE> Учебный файл </TITLE></HEAD>

<BODY> BGCOLOR=”#FFFCC” TEXT=”#330066”

<P ALIGN=”CENTER”><FONT COLOR=”#008080”  SIZE=”7”>

<B> Расписание </B></FONT><BR><FONT SIZE=”5”>

<I>занятий на СРЕДУ  </I>

</FONT>

</P>

</BODY>

</HTML> 

 

 

 

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

<style type="text/css">

<!--.style1 { color: #0000FF;

font-weight: bold;}

.style2 { color: #666666;

font-style: italic;}

.style3 {color: #000000}-->

</style>

</head>

<body>

<p><span class="style1">HTML –да тегтік модельдер құжаттың  белгілеулері болыпе  табылады  Тегтік модель құжатты тегпен  басталып және аяқталатын контейнерлердің  жиынтығы сияқты сипаттайды. Яғни  НТМL  құжаты  қарапайым АSСII-файлы сияқты  көрсетіледі .  </span><br>

<span class="style2">Көбінесе  НТМL құжаттарының  тегтерін түсіну  және қолдану оңай ,  өиткені олар ағылшын тілінің сөздерімен пайдаланылған қысқартуларды және  белгіленулерді түсінеді.   НТМL – тегі  қажет емес тегтің атрибуттар тізімінен кейін болатын аттан құралады. Тегтің  мәтіні бұрышты жақшалардан тұрады (&lt; және &gt;).</span><span class="style3">Тегтің ең қарапайым оңай  вариянты – бұрыштық жақшаларға негізделген аты. Мысалға: &lt;HEAD&gt; немесе  &lt;i&gt;. Қиын тегтер үшін, функцияның тегтерін видео өзгерту үшін автормен  анықталған дәл мағынасы бар болатын атрибуттардың айырмашылығы сипатталады. </span></p>

</body>

</html> 

 

HTML-құжатының контейнері.

Әрбір құжаттың құрама бөліктерінде оның ішінде қолданылатын өзінің контейнер  жинағы болады. Құжат денесінің контейнерлері  тақырыпта немесе FRAMSET контейнерінде  қолданылмайды. Контейнерлердің әрбір  тобын толықтай қарастырайық.

HTML-HEAD құжатының тақырыбының  контейнерлері

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

TITLE

Такырып тегінде жиі қолданылатын құжат аты болып табылады.

TITLE келесі синтаксисті  алады

<TITLE> Құжат аты  </TITLE>

TITLE  тегінің  мазмұны  құжат атының алаңында бейнеленеді.

BASE

BASE тегі URL формасында гипермәтіндік  сілтеме көрсету формасымен байланысты. URL спецификациясы құжат адресатының  екі формасын анықтайды: толық  және толық емес. HTML  URL адресінің  толықтай формасын қолдануға  рұқсат етеді. Сонымен спецификацияның  екінші формасын қолдану үшін,  оны бірдемемен негіздеу керек,  базалық адресті сурау толық  еместен URL-дің толық формасын  қалыптастыруда қолдануға болады. BASE тегі осы базаны анықтауға  мүмкіндік береді.

ISINDEX

HTML-құжатын кілттік сөз  бойынша іздеу мүмкіндігі құжат  тақырыбының ISINDEX тегі арқылы  анықталады. Тілдің алғашқы версиясында  берілген тег қосымша атрибут қабылдамады. Егер сервер кілттік сөз бойынша сұраныс жасайтын болса, онда ол автоматты түрде тақырыпқа ISINDEX тегін қояды. Кілттік сөз тізімін клиент құжат адресіне “?” символдан кейін жазады. Түсінікті, сұранысты сервер атқарады, “?” символдар түгел болған кезде іздеу машинасына айналды. HTML-құжаты “жазғы” программасымен, сонда кілттік сөз “?”-кейін осы программаның адресіне жазылады. Тілдің алғашқы версиясында өңдеу программасын көрсету және “SEARCH ISINDEX” стандартының орнына сөйлемді сұрау мүмкіндігі туды.

<ISINDEX HREF=

http://polyn.net.kiae.su/cgi-bin/search

PROMPT=”Enter Keywords:”>

Көрсетілген мысалда  HREF атрибуты сұранысты өңдеу программасының адресін анықтайды, ал атрибут PROMPT –  шақыру мазмұнын анықтайды.        

META

META тегі HTML спецификациясында  жоқ құжат тақырыбының конструкциясын  анықтау үшін қажет. Ол үш  атрибут қабылдайды: NAME, CONTENT, HTTP-EQUIV. Берілген текті қолдану қиындығы, осы тег арқылы еңгізілетін  конструкцияны интерпретациялау  үшін,  сервис немесе интерфейс  қолданушылар осы конструкцияны  кеңейтуі және қолдануы керек.  Осындай жұмыс түрі үшін программа  SGML конструкциясын түсіндіріп беру(интерпретировать) керек. Берілген тегті тәжірибеде  қолданудың бірден-бір түрі тақырыпқа  анықталған HTTP-EQUIV атрибуты арқылы  протокол бойынша HTTP ақпаратын  қосу.

< META HTTP-EQUIV=”Keywords”         

CONTENT=”Plasma, Nuclear Physics”>

Осындай қолдану кезінде  почтаны жіберуге ыңғайлы болу үшін, HTTP-пакет тақырыбында мынадай  жолдар қосылады: Keywords: Plasma, Nuclear Physics.

Құжат денесінің  тегі.

Құжат денесінің тегі интерфейстік қолданушы программасында ақпаратты  көрсетуді басқарады. Олар мәтінде  тізілген контекстік гипермәтіндік  сілтеме көмегімен деректер базасының  гипермәтіндік құрылымын бейнелейді. Құжат денесі тұрады:

-иерархиялық контейнер  және заставка;

-тақырыптар (Н1-Р6 дейін);

-блоктар(параграфтар, тізімдер, формалар, кестелер, суреттер және  т.б.);

-көлденеңінен белгілеп  алу және адрестер;

-мәтіндер, стильдерді жүргізу  облыстарына бөлінген(сызылған, белгіленген,  курсивті);

-математикалық бейнелеу, графиктер және гипермәтіндік  сілтеме;

BODY

Құжат денесінің тегін  бейнелеу BODY тегі арқылы бастап жазылады. HEAD тегінен айырмашылығы, BODY тегі атрибут  қабылдайды:

ID-тег идентификаторы. Тегті  атау үшін, сол сияқты гипермәтіндік  сілтеме бойынша нүктелік ауысу  түрінде қолданылады. Берілген  атрибут құжат бетінің барлық  тегінде бар. 

LANG-екісандық  ISO-639 код  түрінде  құжат тілін анықтайды,  нүктеден кейін міндетті емес ISO-3166 форматында қала коды алынады.  Тіл стандартын құраушылардың  ниеті бойынша берілген атрибут  түсіндіру программасын тану  және көптілді мәтінді бейнелеуді  басқару керек. Сонымен қатар  Arena да, арнайы  HTML 3.0 иллюстрациялау  үшін арналған, ол осы мүмкіндікті  іске асырмайды.

CLASS-“ADDITION.FIRST” типті иерархиялық  құрылған ат. Мәтін тегін, анықталған  бейнелеу стилімен байланыстыруға  арналған. Қазіргі кезде қолданылмайды.

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

BACKGROUND-құжат мәтінін бейнелейтін  фонды анықтайды, мысалы,  HTML-құжатында  фон ретінде үлкен емес графикалық  кескін ”bgr.gif” қолданылады.

< BODY BACKGROUND =”bgr.gif”>

Осы мысалда көрсетілгендей, берілген атрибуттың мәні ретінде URL формасында қысқартылған адрес қолданылады. Бұл  локальдық файл адресі.

<BR> тегі

Жолдың аударылымы мәтінді  бейнелеудің стандарттар ретін  бұзу үшін қолданылады. Интерпретацияның қарапайым режимінде қолданушының интерфейс программасы мәтінді  автоматты түрде жолдарға бөлу арқылы жұмыс терезесінде көрсетеді. Бұл  режимде мәтінде бар болған соңғы  жол ескерілмейді. Кей-кезде үлкен  айқындық үшін басуды жаңа жолдан бастау керек. Ол мақсатта <BR> тегі қолданылады. <BR> тегіндегі  CLEAR  атрибуты көрсетілген  нүктеде объектіні мәтінмен  сүйірлеу(обтекание) үшін қолданылады және содан кейін  мәтінді объекттің ар жағында  бос областа жалғастыру үшін. Объекттің  ар жағында жалғасып жатқан мәтін CLEAR  атрибутында LEFT, RIGHT және ALL мәндеріне  сәйкес тегістеледі  

 

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

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