Web-дизайн негіздері. Қазіргі замандағы Интернет - технологиялар

Жұмыс түрі: Материал
Тегін: Антиплагиат
Көлемі: 20 бет
Таңдаулыға:

Мазмұны

Мазмұны 1
Кіріспе 2
1. Қазіргі замандағы Интернет-технологиялар 3
2. HTML негіздері 7
1. Құжаттың структурасы 7
2. Мәтінді форматтау тегтері 8
3. Тізім 10
4. Web беттегі графика 11
5. Сілтеме 12
6. HTML-де кесте жасау 12
3. Программалық жабдықтау 14
4. Қосымша 15
1. 10-11 сынып оқушыларына информатика пәнінен кәсіби білім берудің
авторлық бағдарламасы 15
2. Жие қолданылатын тег және атрибуттер тізімі 21
3. Лабораториялық жұмыс. Сурет атрибуттарын тағайындау 22
4. Лабораториялық жұмыс. Кесте жасау 23
5. Лабораториялық жұмыс. Гипермәтіндікбайланыстар орнату 24

Кіріспе

Қазақстан Республикасының білім беру жүйесін ақпараттандыру еліміздің
даму стратегиясының негізгі бағыттарының бірі, себебі ХХІ ғасыр – білім
беру жүйесін ақпараттандыру ғасыры.
Информатика пәнінің орта білім беру жүйесіндегі ролі ақпараттық
білімнің, ақпараттық орта мен адамның өзара қарым-қатынасын үйлесімді
етудегі және жаңа ақпараттық қоғамда кәсіпкерлік қызметтің басты құрамды
бөлігі болып табылатын ақпараттық бейнесін қалыптастырудағы алатын орнымен
қамтамасыз етіледі.
Бүгінгі таңда компьютерлік дизайн, Web-дизайн, жүйелік программалушы,
администратор және тағы басқа мамандардың қажет екендігін түрлі жарнамалық
газеттерден, бұқаралық ақпарат құралдарынан да көруге болады. Аталған
мамандықтарды қалай дайындап, оларға қандай программалық құралдарды үйрету
арқылы жетілдіруге болатыны әдістемелік жұмыстың өзекті мәселелерінің бірі
болып отыр.
Мектеп бітірушілер компьютерлік сауатылықты меңгеріп шығады, бірақ
келешекте олар программист, инженер, жүйе администраторы болуы міндетті
емес. Дегенмен кез-келген шығармашылық мамандық сізден қазіргі заманға
сәйкес компьютерлік технологияларды меңгеруге талап етеді. Шығармашылық
жұмыстын қортындысы әр қашан жаңа білім, жаңа ақпарат, ал осы ақпаратты
таратудың ең жеңіл әдісі – Интернетте жариялау.
Интеренетте материалды жариялау тиімді болу үшін ол Web-дизайн
ережелеріне сәйкес болу керек. Демек, Web-дизайн негіздерін білу кез келген
мамандықта қажет болады, өткені Web-бет дизайны – бұл ақпараттық дизайн.
Бұл жұмыс өзінің сайтын дайындауды үйренем деушілерге арналған.
Жұмыс екі бөлімнен тұрады, біріншісі теориялық: мәтінді форматтау,
графиканы қолдану, тізім жасау, кесте құру. Ал екіншісі болса практикалық,
бұл бөлімде біз дайын бір сайт жасап шығамыз.
Қазіргі замандағы Интернет-технологиялар

Web-сайт бұл дүниенін кішкетай моделі. Бұрынғы кезде Web-сайты бір
адам - Web-мастер жасаған болса, қазіргі кезде Web-сайттарды бірнеше адам
жасайды. Олар Web-дизайнер, программист, бизнес-кеңесші, маркетинг бойынша
басқарушы, менеджер.
Не себептен мектеп курсына Интеренет технологияны оқыту керек болды?
Web-мастер мамандығы қазіргі кезде өзінің кұпиялығын жоғалтып жатыр, ал
сайт жасау технологиясы зертхана сыртына шығып көпшілікке белгілі болып
жатыр.
Бұның негізгі белгісі Интернет-жобаларға өсіп жатқан инвестициялар,
Web-сайттардың күрделі білімдік, ғылыми, комерциялық мүмкіндіктері.
Интернет технологиялар төмендегі жолдармен дамып келе жатыр:
▪ Web-технологиялар;
▪ Сайт жасау экономикасы;
▪ Web-дизайн және Web-программалау маркетингісі;
▪ Адам ресурстары және т.б.
Web-сайт жасақтау жұмысын бірнеше кезеңден турады:
▪ Жоспарлау;
▪ Элементтерді жасақтау;
▪ Бағдарламау;
▪ Тестілеу;
▪ Жариялау;
▪ Жарнамалау;
▪ Бақылау;
Жоспарлау кезеңінде төменгі мәселелер шешілуі керек:
1. Сайттың орны.
2. Сайттың аудиториясы кімдер.
3. Қандай ақпарат жарияланады.
4. Қолданушылармен қарым-қатынас қандай түрде ұйымдастырылады.
Элементтерді жасақтау кезеңінде сайттың программалық өнім түрінде
жүзеге асырылуы қарастырылады:
1. Навигациялық құрылымын жасау.
2. Беттің дизайнын жасау.
3. Бетті толтыру үшін мәтіндік және бейне ақпаратты әзірлеу.
Бағдарламау
Бұл кезеңдің мәні сайтты форматтауда.
Тестілеу
Сайт жасаудың негізгі кезеңдерінің бірі тестілеу. Тестілеу кезеңде
сайттың жұмыс істеу дұрыстылығы тексеріледі, оның ішінде:
1. Сілтеменің жұмысы;
2. Мәтіндегі қателер;
3. Навигацияның тиімділіғі.
4. Пошта және басқа формалардың дұрыстығы.
5. Графикалық файлдардың ашылуы.
6. Әр түрлі браузерлерде сайттық жұмысы.
Жариялау
Тест аяқталғандан кейін Web-сайт серверде жарияланады және қайтадан
тексеріленеді.
Жарнамалау
Web-қоғамдастығына жаңадан жарияланған сайт тұралы белгілі болу үшін
сайттың адресін және ол жердегі материал туралы аннотацияны хабарлау керек.
Осы мақсатқа жету үшін келесі мүмкіндіктерді пайдалануға болады:
1. Web-cайт адресін әр түрлі баспаларға жазу керек;
2. Web-сайтты әр түрлі серверлерде тіркеу;
3. Web-cайтқа сілтемелерді басқа Web-сайттарқа кіргізу;
4. Баннерлерді жарнама ретінде қолдану.
Бақылау
Web-сайтта жариялап жарнамалаған сон оған қатысу деңгейі оның
беттерінде орналастырылған ақпараттың қажеттілігімен, жаңалығымен және
көкейтестілігімен анықталады. Web-сайт имиджін сақтау үшін ол жердегі
ақпаратты әрдайым жаңартып туру керек.
Web-сайт беттерін ұйымдастырған кезде, төменгі схемаларды қолдануға
болады.

HTML негіздері

HTML (HyperTextMarkupLanguage) – бұл құжаттарды кодтау үшін
қолданылатын гипертекстік белгілеу тілі. HTML ді көбі программалау тілі деп
ойласа да, бұл программалау тілі емес. HTML – мәтінді белгілеу тілі.
HTML құжаттарды көру үшін браузерларды қолданамыз. Браузер-
программалардың саны өте көп, мысалы көп таралғандар Netscape Communicator,
Microsoft Internet Explorer, Opera.
HTML тiлiнде колданылатын командаларды “тег” деп айтамыз. HTML
тiліндегi тегтер екi топқа бөлiнедi: жұпты, жұпсыз.
Жұпты тегтер дегенiмiз, бiр тег ашылса, келесi тег оны жабады. Мысалы,
html тегтiң жұмысын ашады да келесi html тегi оны жабады. title
ашылуы, title жабылуы.
Жұпсыз тегтер дегенiмiз, тег ашылады да қолданыла бередi. Мысалы,
IMG т.с.с.
Көрсетілген мысалдарды компьютерде көрү үшін мәтінді Блокнот
программасына теріп, оны htm түрінде сақтаңыз. Файлды браузерде ашыңыз.

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

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

HTML
HEAD
TITLE
...
title
head
BODY
...
body
html

HTML-тег атрибуттар тізімінен тұрады. Тег тексті үшбұрышты жақша
ішінде жазылады. Мысалы:
FONT face=аrialМенің бірінші бетім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="Molutjan Arziev" - сайт авторы
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 атрибуты пайдалынады.
Мысалы:
P align=centerМенің бірінші бетімp
Менің бірінші бетім сөйлемі беттің ортасына орналасады.
Align дің мәні тағыда left (сол жақ), right (оң жақ) болуы мүмкін.
FONT тегінің көмегімен біз мәтіннің шрифтің, көлемін, түсін
белгілейміз. Ол үшін атрибуттарды пайдаланамыз. Мысалы:
P align=center
font face=Arial size=5 color=blueМенің бірінші бетімfont
Осындай жол жазғанда Web бетімізде arial шрифтімен, 5-көлемде, көк
түсті Менің бірінші бетім деген сөйлем шығады.

Жолды бөлү үшін BR тегін қолданса болады, мысалы:

P Ана тілін – арың бұл,
Ұятын боп тұр беттеBR
p

Қаратырылған әріптерді пайдалану үшін мәтінді B,b тегтерінің
ортасына аламыз, қиғаш әріптер үшін - I,i.
Мысалы:
Көрінетін мәтін HTML де жазылуы
Менің бірінші бетім Менің b бірінші b бетім
Менің бірінші бетім Менің i бірінші i бетім
Менің бірінші бетім Менің u бірінші u бетім

PRE, pre тегтері мәтін редакторда қандай жазылған болса, сол
бойынша браузерге шығарады, мысалы:

PRE
Ана тілін – арың бұл,
Ұятын боп тұр бетте.
Өзге тілдің бәрін біл,
Өз тіліңді құрметте
pre

Тізім

Нөмірленген тізімді ұйымдастыру үшін OL және l1 тегтері
қолданылады.

OL Қолданылған әдебиеттер тізімі
LI Полонская Е.П. Самоучитель HTML
LI Мержевич В. Создание Web страниц li
ol

Егер тізім номерін керекті бір номермен бастау керек болса онда start
атрибутын пайдалынамыз, мысалы:

OL start=5 Қолданылған әдебиеттер тізімі
LI Полонская Е.П. Самоучитель HTML
LI Мержевич В. Создание Web страниц li
ol

Тізімдің түрін өзгерту үшін type атрибуты көмектеседі, мысалы
номерлерді латын цифрларымен жазу үшін төмендігідей жазамыз

OL type=I Қолданылған әдебиеттер тізімі
LI Полонская Е.П. Самоучитель HTML
LI Мержевич В. Создание Web страниц li
ol

Маркерлік тізімді жазғанда UL тегін пайдаланады, маркердің түрін
өзгерту үшін type атрибутын. Оный мәні кестеде көрсетілген

disc дөңгелек
circle шеңбер
square квадрат

UL type=disc
LIt дөңгелек
ul
UL type=circle
LIt шеңбер
ul
UL type=square
LIt квадрат
ul

Web беттегі графика

Бұл бөлімде Web беттерге графиканы орналыстыруға тоқталамыз. Web
дизайнерлер графика мәселесіне келгенде екі топқа бөлінеді. Бірінші топ
графикасыз Web сайт ол сайт емес деп ойласа, екінші топ керісінше Web
сайттарға суреттің қажеті жоқ деп санайды, себебі олар кейбір модемдердің
және жүйелердің күші жетпейтіндігін ескеріп отыр. Дегенменде сайтқа
графиканы қолдану мүмкіндік бар және соны тиімді пайдалану керек. Ол үшін
бізге IMG тегі src атрибутымен көмектеседі. Суретті сайтқа орналастыру
үшін src атрибутына суреттің толық жолын көрсету керек, мысалы, rose.jpg
суретi С дискасының My img папкасына орналасқан болса, онда төмендегі тег
жазылады:

IMG src=c:my imgrose.jpg

width және heigth атрибуттармен суреттің көлемін өзгертуға болады,
биіктігі және ені.
alt атрибутымен суретке қосымша мәтін түрде қосымша мәлімет шығаруға
болады.

IMG src=c:my imgrose.jpg width=50% height=30% alt=менің суретім

Web графика туралы айтқанда төмендегі атрибуттарды ұмытпау керек:
background – бұл атрибут сайтқа суретті фон ретінде орналыстырады, bgcolor
– фонға түс береді.

Сілтеме

HTML дің негізгі қасиеті ретінде оның басқа құжаттарға сілтемеу жасау
мімкіндігі айтуға болады. HTML құжатынан алысқа орналасқан компьютерге,
құжаттың ішіндегі белгілі бір орынға, HTML құжатына, басқа бір сайтқа
сілтеме орнатуға болады. Сілтемені ұйымдастыру үшін A href тегі
қолданылады.
Мысалы,
A href=penjim.narod.ruПенжим сайтына сілтемеa
Бұл мысалда біз www.penjim.narod.ru сайтына сылтеме жасадық.
Сілтеме мәтін түрде және сурет (кнопка) түрде болуы мүмкін. Сурет
түрде орнату үшін A a тегтерінің ортасына суретті IMG тегімен орнату
керек.

HTML-де кесте жасау

Web-құжатының негiзгi бөлiктерiнiң бiрi - кесте. Ол тiктөртбұрыш
бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде
қарастырылады. Жол мен бағанның қиылысы ұяшық деп аталады. Бiр ұяшықта
мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады. Кесте келесi
бөлiктерден тұрады:
• кесте тақырыбы;
• бағаналар тақырыптары;
• ұяшықтар.
Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай
жол соңына дейiн, сонан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер
енгiзiледi. Боя ұяшық жасау үшiн бос орын таңбалары енгiзiлуi тиiс.
Қарапайын 2*3 кестесін жасау үшін төменгі тегтер жиынын қолдануға
болады:

TABLE border=1
TR
TD мәтінtd
TD мәтінtd
TD мәтінtd
tr
TR
TD мәтінtd
TD мәтінtd
TD мәтінtd
tr
table
Бұл жерде border кесте сызықтарының ені.
Кестенің ұяшықтарының енін пайз арқылы өзгерту үшін width атрибутн
қолданса болады, мысалы:
TABLE width=50%
Программалық жабдықтау

HTML-құжаттарды жасақтау және өңдеу үшін кезкелген қарапайым мәтіндік
редактор жеткілікті, мысалы Блокнот. Көп дизайнерлердің ойы бойынша таза
сілтемелер тілін қолмен жазған дұрыс. Бірақ көп уақытта қолмен жазған
қолданылмайды. Себебі қолмен жазған автордан көп білімді және практикалық
тәжірибені талап етеді.
Практикады әдетте Web-сайт жасау HTML редакторларды пайдаланады.
Оларды екі топқа бөледі.
Бірінші үлкен топтың Web-сайт жасау программалары HTML-тілінің
негізінде жұмыс істейді. Осындай программалар орта және үлкен сайттарды
даярлау уақытын қысқартады және даярлау кезеңінің тиімділігін көтереді.
Арнайы HTML-редакторлердің жұмысты жеңілділетін және тездететін қосымша
мүмкіндіктері көп. Бұл топқа төменгі программалар кіреді:
HTML генератор 1.3 ;
Magic HTML Studio 2.0;
Macromedia Dreamweaver;
Екінші үлкен топқа WYSIWYG (ағылшын тілінен “what you see is what you
get” - не көрсең соны аласың) редакторлері кіреді. Бұл программаларды
тағыда визуалды редакторлар деп айтады.
Осындай программалар графикалық интерфеске ие. Бұл прораммалардың
бастапқы махсаты дизайнерді HTML тегтерінен босату болған. Кәзірге
замандағы визуалді HTML-редакторлар дизайнерді көптеген әрекеттерде
басатады. Осындай артықшылықтарына қарамастан кемшілігі бар – олар таза
HTML кодын жасамайды, оған артық және фирменный тегтерді қосады. Көріп
отырсыздар, WYSIWYG редакторларды қолданы HTML тегтерін қолмен жазуды
құтқармайды, демек, Web-сайттарын жасау үшін HTML тілінің кем дегенде
негізін білу керек.
WYSIWYG программаларыдың тізімі:
Microsoft Front Page.

Қосымша

10-11 сынып оқушыларына информатика пәнінен кәсіби білім берудің авторлық
бағдарламасы

10-11 сынып оқушыларына информатика пәнінен кәсіби білім берудің авторлық
бағдарламасы

Интернет-технологиясы. WEB-дизайн негіздері

Информатика кабинеті кеңесінде қаралды
___ ________ 2005 жыл

Орындаған:
Математика және информатика
мұғалімі Арзиев М. М.
Түсінік хат

Бұл бағдарлама Интернет технологиясы WEB-дизайн негізі тақырыбында
10-11 сынып оқушыларына кәсіби ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.