Интернет технологиясы және Web дизайн негіздерін оқытуға арналған электрондық оқыту құралын құру

Кіріспе

Қазақстан Республикасының  білім беру жүйесін ақпараттандыру еліміздің даму стратегиясының негізгі  бағыттарының бірі, себебі XXI ғасыр-білім  беру жүйесін ақпараттандыру ғасыры.

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

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

Мектеп бітірушілер компьютерлік сауаттылықты меңгеріп шығады, бірақ  келешекте олар программист, инженер, жүйе администраторы болуы міндетті емес. Дегенмен кез-келген шығармашылық мамандық сізден қазіргі заманға сәйкес компьютерлік технологияларды меңгеруге талап етеді. Шығармашылық жұмыстың қорытындысы әр қашан жаңа білім, жаңа ақпарат, ал осы ақпаратты таратудың ең жеңіл әдісі-Интернетте жариялау.

Интернетте материалды жариялау тиімді болу үшін ол Web-дизайн ережелеріне сәйкес болу керек. Демек, Web-дизайн негіздерін білу кез-келген мамандықта қажет болады, өйткені Web-бет дизайны бұл-ақпараттық дизайн.

Бұл жұмыс өзінің сайтын дайындауды үйренем деушілерге арналған.

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

Интернет-технологиялар

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

Түйінді компьютерлердегі мәліметтің бірінші беті кітаптың мазмұны  тәрізді, әрбір беттің URL(Universal Resorse Locator) форматында берілген өзіндік адресі болады. Ол беттердегі мәліметті оқу «көру жабдықтары» деп аталатын арнайы программалар арқылы орындалады.

 

Көру жабдықтары

 

Веб парақтардағы мәліметтердегі оқу “көру жабдықтары” деп аталатын арнайы программалар арқылы орындалады, ол “to browse” парақтау, қарау деген ағылшын сөзінен шыққан атау. Интернеттегі Web-парақтарын оқып, экранда көрсетуге арналған программалардың кең тараған түрлері Microsoft Internet Explorer, Netscape NavigБелгі жасау.

Егер сізге  белгілі бір веб-парақ ұнаса, және де ол парақ сізге үнемі қажет болып тұрса, ол адреске белгі салып қоюға болады. Белгі жасау үшін «Избранное-Добавить в избранное» деген менюді таңдап алу қажет. Келесі кезектегі терезеден белгінің атын және белгі сақталатын папканы таңдау қажет. Мысалы сіз мынандай http://www.rubricon.ru адрестегі веб-парақты қарап отырсыз және оны белгі жасап сақтағыңыз келді, ол үшін «Избранное-Добавить в избранное» деген менюді аламыз.

Онда «Добавление  в избранное» деген терезе пайда  болады, «имя» деген жолда веб-парақ  алғашқы атауымен тұрады, оны сіз  өз қалауыңыз бен өзгертуіңізге де болады. «Добавление в избранное» деген терезеде папкалар тізімі берілген, оның сәйкес келетін біреуін таңдауыңызға болады. Егер папканы таңдап алмасақ сақталатын адресіміз «Избранное» деген бастапқы папкаға жазылады. Көрсетілген папканың ешқайсысы сәйкес келмеген жағдайда жаңадан папка ашуға болады, ол үшін «Создать папку» деген команданы таңдаймыз.

Веб-парақтарды сақтап белгі жасау арқылы біз  кез келген уақытта қажетті адрестерді жылдам мониторға шығара аламыз. Ол үшін аспаптар тақтасынан «Избранное»  деген папканы таңдаймыз, пайда  болған терезеден қажетті адресті  аламыз.

Егер веб-парақ  сізге ағымдағы мазмұнымен ғана қажет болса, ақпараттарды сақтаудың мынандай жолдары бар:

1) Веб-парақты толығымен сақтау.

Веб-парақ толығымен жүктелген  соң аспаптар тақтасынан «Файл-Файл сохранить как» деген команданы таңдаймыз, пайда болған терезеден «Сохранить веб-страницу» командасында «Тип файла» деген жолда «Веб-страницу полностью» деп көрсетілуін қадағалау керек.

2) Суретті сақтау.

Веб-парақтағы  суретті жеке сақтау үшін тышқанды суреттің үстінде ұстап тұрып  оң жақ түймесін шертеміз. Пайда  болған контекстік менюден

«Сохранитьрисунок как» деген команданы таңдап аламыз да қажетті попканың ішінде сақтаймыз.

Егер сіз  суретті жұмыс істеп отырған  файлыңызға қойғыңыз келсе контекстік менюден «Копировать» деген команданы таңдап аласыз да қайтадан өз файлыңызға ауысып «Вставить» деген команданы орындайсыз.

3) Мәтіндік  ақпаратты сақтау.

Көптеген Веб-парақтарда бізге қажеттісі-мәтіндер. Оны айырбастау буфері арқылы сақтау сенімді және ыңғайлы. Алдымен қажетті мәтінді  белгілеп аламыз да «Копировать» деген тапсырманы таңдаймыз(мысалы аспаптар тақтасынан «Правка-Копировать» немесе CTRL+C өзара байланысқан клавиштер арқылы жүзеге асыруға болады).

Web-сайт бұл  дүниенің кішкентай моделі. Бұрынғы  кезде Web-сайты бір адам- Web-мастер  жасаған болса, қазіргі кезде  Web-сайттарды бірнеше адам жасайды. Олар Web-дизайнер, программист, бизнес-кеңесші, маркетинг бойынша басқарушы, менеджер.

Не себептен мектеп курсына Интернет технологияны оқыту керек болды? Web-мастер мамандығы  қазіргі кезде өзінің құпиялығын жоғалтып жатыр, ал сайт жасау технологиясы зертхана сыртына шығып көпшілікке белгілі болып жатыр.

Бұның негізгі  белгісі Интернет-жобаларға өсіп жатқан инвестициялар, Web-сайттардың күрделі  білімдік, ғылыми, комерциялық мүмкіндіктері. Интернет технологиялар төмендегі  жолдармен дамып келе жатыр:

• Web-технологиялар;
• Сайт жасау экономикасы;
• Web-дизайн және Web-программалау маркетингісі;
• Адам ресурстары және т.б.

Web-сайт жасақтау  жұмысын бірнеше кезеңнен тұрады:

• Жоспарлау;
• Элементтерді жасақтау;
• Бағдарламалау;
• Тестілеу;
• Жариялау;
• Жарнамалау;
• Бақылау;

Жоспарлау кезеңінде  төмендегі мәселелер шешілуі  керек:

1. Сайттың орны.
2. Сайттың аудиториясы кімдер.
3. Қандай ақпарат жарияланады.
4. Қолданушылармен қарым-қатынас қандай түрде ұйымдастырылады.

Элементтерді  жасақтау кезеңінде сайттың программалық өнім түрінде жүзеге асырылуы қарастырылады:

1. Навигациялық құрылымын жасау.
2. Беттің дизайнын жасау.
3. Бетті толтыру үшін мәтіндік және бейне ақпаратты әзірлеу.
4. Бағдарламалау. Бұл кезеңнің мәні сайтты форматтауда.

Тестілеу

Сайт жасаудың негізгі кезеңдерінің бірі-тестілеу. Тестілеу кезеңде сайттың жұмыс істеу дұрыстылығы тексеріледі, оның ішінде:

1. Дұрыстылығы.
2. Графикалық файлдардың ашылуы.
3. Әр түрлі браузерлерде сайттық жұмысы.

Жариялау

Тест аяқталғаннан кейін Web-сайт серверде жарияланады  және қайтадан тексеріледі.

Жарнамалау

Web-қоғамдастығына  жаңадан жарияланған сайт туралы  белгілі болу үшін сайттың  адресін және ол жердегі материал  туралы аннотацияны хабарлау  керек. Осы мақсатқа жету үшін  келесі мүмкіндіктерді пайдалануға болады:

1. Web-сайт адресін әр түрлі баспаларға жазу керек;
2. Web-сайтты әр түрлі серверлерде тіркеу:
3. Web-сайтқа сілтемелерді басқа Web-сайттарға кіргізу;
4. Баннерлерді жарнама ретінде қолдану.

Бақылау

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

Web-сайт беттерін  ұйымдастырған кезде, төмендегі  схемаларды қолдануға болады:

 

 

                                        Сызықтық схема

 

 

 

 

 

 

 

 

 

 

 

 

 

 

                                                  Ирархия

 

 

 

 

 

 

 

 

 

 

 

Сызықтық емес

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

                                               Араласқан

 

 

 

 

 

 

 

HTML негіздері

HTML (HyperTextMarkupLanguage) – бұл құжаттарды кодтау үшін қолданылатын гипертекстік белгілеу тілі. HTML-ді көбі программалау тілі деп ойласа да, бұл программалау тілі емес. HTML-мәтінді белгілеу тілі.

HTML құжаттарды көру үшін браузерлерді қолданамыз. Браузер-программалардың саны өте көп, мысалы көп таралғандар Netscape Communicator, Microsoft Internet Explorer, Opera.

HTML тілінде қолданылатын командаларды “тег” деп атаймыз. HTML тіліндегі тегтер екі топқа бөлінеді: жұпты, жұпсыз.

Жұпты тегтер дегеніміз-бір  тег ашылса, келесі тег оны жабады. Мысалы,

<html> тегтің  жұмысын ашады да келесі </html> тегі оны жабады. <title> ашылуы, </title> жабылуы.

Жұпсыз тегтер дегеніміз-тег ашылады  да қолданыла береді. Мысалы, <IMG> т.с.с.

Көрсетілген мысалдарды компьютерде көру үшін, мәтінді 

Блокнот программасына  теріп, оны htm түрінде сақтаңыз.

Файлды браузерде ашыңыз.

 

Құжаттың структурасы

HTML құжаттың  негізгі структурасы төмендегідей:

<HTML>

         <HEAD>

                 <TITLE>

              …

               </title>

     </head>

<BODY>

…

</body>

</html> 

 

 

 

 

 

HTML-тег атрибуттар  тізімінен тұрады. Тег тексті  үшбұрышты жақша ішінде жазылады. Мысалы:

<FONT face=arial>Менің  бірінші бетім</font>-бұл жерде <FONT>-тег, face-атрибут, arial-атрибуттың мәні.

Кез келген HTML құжат <HTML> тегімен басталып, </html> тегімен  аяқталу керек. Бұл тегтер браузерға HTML құжатын көрсетеді. Құжат болса қарапайым ASCII кодындағы мәтіндік файл. <HTML>, </html> тегтер болмаса браузер программалары құжатты танымай қалуы мүмкін.

<HTML>, </html> тегтерінің ортасына құжат денесі  келеді. Құжат екі бөлімнен тұрады: тақырып бөлімі <HEAD> тегімен басталатын  және <BODY> тегімен басталатын  негізгі бөлімнен.

Тақырып бөлімі міндетті емес, бірақ ол жерде браузерге қажетті көп ақпарат болуы мүмкін.

<TITLE>,</title> тегтерінің арасында құжаттың  аты жазылады, сол сөз терезенің  тақырып жолына шығады.

Мысалы:

<TITLE>Моя первая сраница</title>

<HEAD>бөліміне  тағы <META> тегтерді қолдануға  болады, олар сайтты интернет желісінде тез табылу үшін пайдаланылады.

<meta name=“Language”  content=“kz”>-сайт тілі.

<meta name=“Autor”  content=“Muratova Meruert”>-сайт авторы.

<meta name=“Keywords”  content=“информатика, школа, учитель,  компьютер, казах, поурочный план, математика”>-іздеу қызметіне арналған сөздер.

<meta name=“Generator”  content=“блокнот”>-қай программада жасалынды.

<BODY> тегімен  Web-беттің негізгі бөлімі басталады.  Бұл бөлімге мәтін, графика,  кесте, аудио және видео ақпараттар  енгізіледі.

 

Мәтінді форматтау  тегтері 

Құжатта тақырыптар <Hi>, </hi> тегтерімен жасалады, бұл  жерде і=1 болғанда ең үлкен тақырып  жазылады, і=6 болғанда-ең кіші.

Мысалы,

 

Көрінетін мәтін	HTML де жазылуы
Заголовок1	<H1> Заголовок1 </H1>
Заголовок2	<H2> Заголовок2 </H2>
Заголовок3	<H3> Заголовок3 </H3>
Заголовок4	<H4> Заголовок4 </H4>
Заголовок5	<H5> Заголовок5 </H5>
Заголовок6	<H6> Заголовок6 </H6>

Абзац енгізу үшін <P>, </p> тегтерін қолданады, мітіннің сол жақ, ортада, оң жақта орнату үшін align атрибуты пайдаланылады.