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

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

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

Тег атауы	Анықтамасы
<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">

<head>

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

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

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

</tr>

</table>

</body>

</html>

Графикалық және мультимедиалық объектілері үшін арнайы тәгтер

Дыбыс,күй,видеоклиптарды енгізу үшін арнайы тәгбар:<img>.

HTML құжаттарында графиканы қолданудың екі түрі бар:

1) Графиканы мәтінге енгізу.

Мәтінге сурет қою үшін келесі команданы қолдану керек:<imgsrc=”url”>. Міндетті атрибут src=”url”көрсеткіге сурет қайда орналасқанын көрсетеді. Сурет көрсеткі қолдайтынграфиктік форматта сақталуы керек. Қазіргі кезде көрсеткілердеgif және jpg(jpeg) форматтары қолданылады. Адрес (url) абсолютті және салыстырмалы болады.

2) Сурет “картасын”қолдану.

Суреттің белгілі аймағын басқан кезде басқа адреске қатынау бар болу үшін келесі конструкцияны қолдану керек:

<imgsrc=”url”usemap=”#name”>

url орнына графиктік файл адресі жазылады, ал name орнына – карта сипаттамасыбелгісі. Карта сипаттамасы экранда көрінбейді және html-файлыныңкез-келген жерінде орналасады. Карта сипаттамасы келесі командалар арасына қойылады:<mapname=”name”>…</map>.

Көрініп тұрғандай, картаны сипаттауда тек белгісі жазылады, ал суретті қоюда # қосымша жазылады.

Картаның активті облыстарын сипаттау келесі командалар арқылы іске асырылады:<areahref=”url”shape=…coоrds=”…”>. shape атрибуты coоrds-пен бірге облыс формасынкөрсетеді. Ол rect,circle,poly мәндерін қабылдайды.

1) rect – тікбұрыш;coоrds =”x1,y1,x2,y2”x және y жоғарғы сол және төменгі оң бұрыштар координаталарын береді.

2) circle – шеңбер; coоrds =”x0,y0,r”x0 және y0 – центр координаталары,r – радиус.

3) poly – көпбұрыш;coоrds =”x1,y1,x2,y2,x3,y3...” x және y – төбе координаталары.

Соңғы жылдарда Web құжаттарында белсенді компоненттер жиі қолданылады. Ол объектілер тек мәтіндік,графикалық,мультимедиялық мәліметтерде ғана емес,программалық кодтардан да тұрады. Белсенді компоненттер басқа біреудің компьютерінде бұзушы қызмет жасамас үшін, олар көрсеткінің барлауымен қолданылады.

Графикалық немесе басқа объектілердің мәтінге кіруі,HTMLтәгінің көмегімен іске асады.HTMLтәгінің көмегімен іске асатын Web құжаттарының басты белгісі гипермәтіндік сілтемелер.

ОсылайшаWWW серверлерінде сақталып жатқан көптеген гипермәтінді электронды құжаттар жиынтығы өзіндік бір құжаттардың гиперкеңістігінқұрайды.Web-кеңістікте құжаттар арасындағы кеңістікті Web-серфинг деп атайды.

Web құжаттар аралығын мақсатты бағыттау Web навигациялар деп аталады.

Интернеттің физикалық серверінде сақталып жатқан жүздеген миллион құжаттың гипермәтіндік байланысы Web кеңістігінің болуының логикалық негізі.

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

Гипермәтіндік байланыстар орнату

Бұранғы ФНИ.НТМ файлын Web – парақтың алдыңғы жағына жазылатын апта күндерінің аттары жазылған кестелермен толықтырайық.

Ол үшін:

<B>ФНИ - 1 топтарының сабақ кестесі </B>

<FONT></P><BR> жолдарынан кейін мынадай тәгтер тізбегін жазайық:

<TR>

<TD> Дүйсенбі </TD>

<TD> Сейсенбі </TD>

<TD> Сәрсенбі </TD>

<TD>Бейсенбі </TD>

<TD> Сенбі </TD>

</TR></TABLE>

<BR>

Бұл фрагменттен кейін (RASP.HTM файлында) Дүйсенбі сөзіне сілтеймін белгі қоямыз, яғни <B> Дүйсенбі </B></FONT> сөздері орнына:

… <B><A NAME=”ДС”> Дүйсенбі </A></B></FONT > … сөздерін жазу керек.

Енді кесте ішіндегі Дүйсенбі сөзіне гиперсілтеме жасаймыз, яғни <TABLE WIDTH=100%><TR><TD> Дүйсенбі </TD> <TD> Сейсенбі </TD> <TD> Сәрсенбі </TD> <TD> … сөздері орына:

<TR><TD><A HREF=”#ДС”>Дүйсенбі </A></TD>

<TR><TD><A HREF=”#CС”> Сейсенбі </A></TD>

<TR><TD><A HREF=”#CP”> Сәрсенбі </A></TD> сөздерін жазамыз.

HTML гипермәтіндік тілін оқытқаннан кейін оқушыларға WEB сайтты безендіруге арналған CSS стильдер тілін оқытқан жөн. Оқушы тек бетті құрастырып қоймай қолданушының көзінің жауын алатын WEB парақтың дизайнын да тартымды қылып жасауы міндетті.

CSS технологиясы: жалпы көзқарас

"Каскадты кесетелер стилі"атауы«Cascading Style Sheets» ағылшын сөзінен шыққан, CSS аббревиатурасы болып табылады. Алғашқы стиль HTML 4.0 пайда болған, яғни ол HTML-дің элементтерін анықтау үшін және құжаттардағы мәселелерді анықтау үшін арналған.Стильдер әдетте стильдердің кестелерінде сақталады: HTML-құжаттардың ішінде жәнедеcss-тің кеңейтілген арнайы файлында сақталуы мүмкін. Әртүрлі файлдарда стильдердің кестелерін сақтауды қолданса, анағұрлым жұмыстың көлемін қысқартады.Сонымен бірге бірнеше стильдерді анықтауға болады,яғни олар белгіленген ережелерге бағынып, каскадты түрде белгілі бір стильді көрсетеді.

CSS-ты қолдану мысалы

CSS көмегіменәртүрлі стильдердің қорытындыларын енгізу арқылы HTML құжаттарын шығаруға болады.

Мысал. Бірнеше стильдер кестесін алайық:

Style1

p{color: blue; font-style: italic;

margin-left: 20pt;}

ol,ul,li{list-style: circle;

font-family: arial; }

a:link {color:black}

a:visited {color:black}

body{background-image: url("http://www.intuit.ru/departament/picture.gif")}

Style2

h1,h3,h6{margin: 20pt;}

h1,h2,h3,h4,h5,h6,p,ol,li{font-family: arial, "sans serif";}

p,table,td,ol,ul{font-style: oblique;}

:link {COLOR: blue;}

:visited {COLOR: blue;}

a:active {COLOR: black;}

a:hover {COLOR: black;}

a.myln:link {COLOR: olive;}

a.myln:visited {COLOR: olive;}

a.myln:active {COLOR: teal;}

a.myln:hover {COLOR: teal;}

Style3

p,ol,ul

{font-style: italic;

margin-right: 20pt;}

p,h1,h6 {font-family: "comic sans ms", arial, "sans serif"; }

p,th{font-size: 20%}

table {background-color: blue}

body {background-color:#FFF000}

p,ol,ul {color:green; }

:link {color:blue}

:visited {color:blue}

:active {color:green}

:hover {color:green}

Style4

:link { color:red }

:visited { color:red }

:active { color:yellow }

:hover { color:yellow }

body{background-color: #FAD123;}

h1,h2,h6{margin-left: 20pt;

color: blue;}

h3,h4,h5{margin-left: 10pt;

color: green;}

p,h1,h3{font-size: 150%;}

p,h1,h2,h3,h4,h5,h6,table

{font-family: arial;}

p{margin-left: 30pt;}

Style5

p,h1,h2,h3{font-size: 75%;}

table,h4,h5,h6,li

{font-family: arial, "sans serif";

margin-left: 20pt;}

body{background-color: #F2FF2F;}

ol,ul {color: 12a45d;}

:link {color:brown}

:visited {color:brown}

:active {color:blue}

:hover {color:blue}

Біртіндеп осы стильдердің үнемі бір құжатқа қолданып отыру, оның ұсынысын өзгертуге болады

Стильлердiң арналуы.

HTML тiлі құжаттың мазмұнын сипаттау үшiн жасалған. Оның тегтерi «Заголовка», «Параграф», «Таблицы» (<h1 >, <p >, <table > және тағы басқалар)анықтауы үшiн арналды . Бастапқыда құжаттардың ұсыныстары үшiн қандай болмасын қалыптаудың тегтерi ескерiлмедi, яғни құжаттың ұсынысы туралы браузер ойластырады деп есептедi.

Бірақ бұлбастапқы HTML –діңNetscape және Internet Explorer браузерлердің спецификациясына әкелді (Мысалы: тег <font> және атрибут color) және өзіндік тегтер мен атрибуттарды жасау процесін тудырды, бұлHTML құжаттарының мазмұны көрсетілген құжаттың деңгейінен әлдеқайда бөлек болған Web-сайттардың жасалуын қиындай түсірді.

Но это породило процесс создания своих тегов и атрибутов к исходной спецификации HTML-браузерами Netscape и Internet Explorer (такие, например, как тег <font> и атрибут color), что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко отделено от уровня представления документа.

Бұл жағдайдаHTML- дің стандартизациясына жауаптыкоммерциялық емес ұйым - W3C (World Wide Web Consortium ) консорциумы - HTML 4.0 стандарттың өңдеуiнiң барысында каскадты кестелердің стилін жасады.

Сайып келгенде, iшiндегi құжаттың бөлiнуi және оның ұсынысының қажеттiлiгi CSS технологияның ұйымдасуына алып келдi.

Бұл технологияны бүгiн (Internet Explorer, Mozilla Firefox, Opera тағы басқалар) барлық негiзгi браузерлердi қолдайды.

Стильдердiң кестелерi жұмыс көлемi айтарлықтай қысқарта алады

Стильдердiң кестелерiHTML элементтерiнiң қорытындыларын айқындайды. (Мысалы, fontтың тегi жәнеHTML 3.2-дегі colorатрибуты). Айтылып өткендей, каскадтыстильдердiң кестелерi әдетте css кеңейтілуi бар сыртқы файлдарда сақталады. Бұл әдiстің қолайлығы сырт пiшiнi мен Web-тағыбарлық қажеттi беттерiнiң құрастырылымын өзгертуге болады, яғни CSS-тың бiр ғана құжаты редакциялайды.

Өңдеушi стильлер келесi әдiстермен анықтай алады:

HTML-дің iшiндегі жалғыз элементi

HTML бетіндегі<head > элементтiң iшiнде

CSS-тың сыртқы файлында.

Стильдердiң қолдануының басымдылығы

Каскадтыстильдердiң кестелерi үшiн қолданудың басымдылықтары анықталған. Егерде HTML-дің элементi үшiн бiр стильден көп стиль анықталса, онда барлық стильдердiң кестесi кезекпен «каскадталған» және де жаңа «виртуалды» стильдер кестесі болады, келесi ережелерге сәйкес:

браузер үнсіз келісім бойынша қолданылатын стильдер;

сыртқы кестеде сақталатын стильдер;

стильдердiң iшкi кестеде сақталған стильдері(iшiнде <head > тега);

кiрiстiрiлген стиль(HTML элементтiң iшiнде).

Бұл ережелер стильдердiң басымдылықтың ұлғаюының ретілігін анықтайды.

Сайып келгенде, кiрiстiрiлген стиль(HTML элементтiң iшiнде) ең жоғарғы басымдылық болады, яғни <head > тегіндегі жариялайтын стиль сыртқы стильдердiң кестесi немесе браузерде қайта анықтайды.

PHP ден методикалық кешен HTML гипермәтіндік тілі мен CSS стильдер тілін оқытқаннан кейін барып қана оқытылады. Онда да алдымен теориялық материал содан кейін барып сабақты бекітетін практикалық сабақтар беріледі.

PHP web программалау тілі

PHP әзірлеушілерге икемдігімен де ерекшеленеді. Өйткені, HTML, JavaScript, WML, XML тілдерімен үйлесіп жұмыс жасайды. PHP-де сценарийлер браузерлерде, сондай-ақ ұялы телефондарда, электронды жазу кітапшаларда, пейджерлерде, портативті компьютерлерде де жіберіледі.

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