Сайт беттерін құруда html тілінің қолданылуы
Мазмұны
Кіріспе
4
1 Сайт беттерін құруда html тілінің қолданылуы 6
1.1 HTML тілінің элементтері және Web-беттерді құру принциптері
1.2 Web-беттегі графика мен мультимедия 15
1.3 Сайт құрылымы. Дизайн 19
1.4 JavaScript сценарилерінің тілі 23
1.5 Интернетте Web-сайтты жоспарлау және орналастыру 30
1.6 Тэг атрибуттары және HTML құжатының құрылымы 32
1.7 Құжаттың негізгі бөлігі
36
2 HTML тілін қолданып, мектептің web-сайтын құру 39
2.1 Сайтты құруда құжаттағы мәтінді өңдеу 39
2.2 Сайт жасауда кестені пайдалану 42
2.3 Web-беттерде графиканы қолдану. Баннерлерді орналастыру 44
2.4 Web-беттерде стильдерді қолдану 44
2.5 HTML формасында мәліметтерді енгізу 47
2.6 JavaScript тілін қолдану 48
2.7 Мектеп сайтының жұмыс істеу тәсілі
51
Қорытынды
60
Қолданылған әдебиеттер тізімі
61
Қосымша А. Сайт коды 62
Кіріспе
World Wide Web бүкіл әлемдік «өрмектің» негізі
HTML Web-парақтарды құрудың негізі болғандықтан, бейнелеу өнерінің
Веб-беттерді құруға арналған HTML тілі бүгінде кең таралған.
Менің дипломымның мақсаты – HTML тілін пайдалана отырып,
Міндеттері – HTML тілінің қарапайымдылығын анықтау, оның мүмкіндіктерін
ХХІ ғасыр - ақпарат пен жаңа технологиялар ғасыры.
Қазіргі уақытта Web-беттерді құруға арналған көптеген технологиялар бар.
Дипломдық жұмыстың бірінші бөлімінде сайт беттерін құруда HTML
Ал, жұмыстың екінші бөлімінде мектеп сайтын жасаудың негізгі
1 Сайт беттерін құруда HTML тілінің қолданылуы
1.1 HTML тілінің элементтері және Web-беттерді құру принциптері
Web беттерді құруға әртүрлі орталарды қолдануға болады. Олардың
HTML тэг –символдардың жиыны. Барлық тэгтар «» белгісімен жабылады /1/.
Төменде әдеттегі Web парақтың дайындау үлгісі көрсетілген.
Web парағының құрылымын
H2{font-family:Arbat;}
CODE{ font-family:Areal;}
Өтуқұжатсоңы
Өтусілтемеге 1соңы
тақырып 1
тақырып 2
тақырып 3
тақырып 4
тақырып 5
тақырып 6
Мұнда сілтемеорналасқан
Web-парақтың түпнұсқа мәтіні орналасуы керек
Құжаттың басына өту
Егер алдындағы әртүрлі Web-парақтың мәтіндерін қарастырсақ, олардың құрылымдарының
Ресми және шыныдығында негізделген стандарттар арасында
Әр дайындаушы бір элементке сыңар тегті пайдалану керек.
HTML тіліндегі құжатты білдіру. Осы тегтердің
Web-парқтың аумағы. Басқаша айтқанда,
Web-парақтың тақырыбын орналастыратын элемент. Осы элементтің ішіндегі
элементінің ішіне Web-парақтың дизайнына арналған элементтерді жазуға
Background=”файл фонына жол” немесе қарапайым түрі bgcolor=”#RRGGBB”
Қызыл және жасыл, көк түстердің реңін анықтайтын,
Парақтың фоны өзгеретін болғандықтан, мәтіннің түсін сәйкес таңдау
Link=”#RRGGBB”
Vkink=”#RRGGBB”
Alink=”#RRGGBB”
BODY элементінің ішіндегі гипермәтін еркін құрылым болады.
тақырып элементі. Алты деңгейі бар H1…H6
Солға, оңға, ортаға тегістеу атрибутын пайдалануға болады.
Align=”left”
Align=”right”
Align=”center”
көлденең сызық (horizontal rule) - өте жиі
Align=”left”
Align=”right”
Align=”center”
Сызықтың жуандығын белгілеуге болады size=пиксел.
Web-парақтың кейбір элементтерінің стилін сипаттау. Әр элемент
Бұл элемент Web-парақты көргенде бейнеленбейтін, қызметтік ақпаратты
1. Құжаттың «сақтау мерзімін» көрсететін мерзімі: name=”Expires” conten=”күні”:
электрондық пошта адресі: name=”Reply-to” content=аты@адресі ;
іздеу үшін кілт сөздердің жиынтығы: name=”Keywords” content=”сөз1, сөз2,
Web-парақтың авторы: Name=”Author” content=”Автордың аты”
2. Web-парақтың қысқаша мазмұны: name=”Deccripton” content=”парақтың мазмұны”
3. Web-парақтың сипаттамасы мен түрін сипаттау: name=”Generator” content=”HTML
name атрибуты клиент – қосымша мен Web-парақ
HTML құжатты өте үлкен болуы мүмкін, осындай
Сілтемелерге базалық адресін беретін элемент (URL). Құжаттың
Жол1 үзіндісін міндетті болып саналмайды. Толық адресін жазғанда,
Синтаксис ережесі. Web-парақтың кодының түрін білеміз, HTML синтаксисіне
Қатар пайдаланатын элементтер тобы бар. Оған кестелер, тізімдер,
Көптеген, мәтінді форматтауда пайдаланатын элементтер, орналастырудың бірнеше варианттарын
Төмендегі мысалды екі абзац және кесте келтірілген:
Абзац элементі – ең пайдалылардың бірі. Ол тек
Align=”left”-сол жақ шеті бойынша тегістеу
Align=”right”- оң жақ шеті бойынша
Align=”center”-ортасы бойынша тегістеу
жаңа жолға мәжбүрлі ауыстыру элементі. Ол тег
none-үнсіз келісім бойынша,
left-егер объект солға тегістелген болса,
right- егер объект оңға тегістелген болса
all – кез-келген шеті бойынша тегістелу мүмкін объект
шрифт өлшемін үлкейті
шрифт өлшемін кішірейту
мәтінді курсив пен ажырату
немесе мәтінді сызылған ретте ажырату
мәтіннің астын сызу
төменгі индекс әрекеттін құратын эффектісін құратын элемент
жоғары индекс әрекеттін құратын эффектісін құратын элемент
телетайп элементін көрсететін элемент
бұл элементтер қойылған INS немесе алшақталған DEL
алдын ала форматталған мәтінді анықтауға арналған элемент.
мәтінді жартылай майлы шрифтерді ажырату өте әйгілі
шрифт типін, өлшемін және түсін анықтау. Оларды
Шрифтерді белгілеу атрибуты face мысалы, face=”Arial;Verdana;Tahoma”. Осы
Стильдер кестесі. Атрибуттарға қарағанда қасиет аты және
H1{boder-width=1;border:groover:text=align:center:green}
H2{colro:maroon;font-style:italic}
CODE{font family:Arial;Verdana;fint-size;12pt}
P{text-indent:10;color:green;font-size;12pt}
P CODE{font-weght:bold;color:violet;font-size:12pt}
Бұл жағдайда барлық бетке бірінші және екніші
Біздің мысалымызда соңында қосалқыланған элементтері үшін арнлаған
Стильдерді пайдалануға арналған екі элемент бар DIV элементінің
DIV тақырып {қасиеті, мағынасы;...}
SPAN элементі, керсінше басқа элементтердің құрамына енгізуге арналған
SPAN тақырып {қасиеті, мағынасы;...}
Фреймдер. . Фреймдер-броузер терезесінде бірнеше құжатты бір уақытта
Сілтеме - бір құжаттың ішінде екніші құжатқа жылжу.
Суреттер. Бұл элементте соңғы тег жоқ. Барлық
Кестелер. Кестелер парақ бетіне мәлісеттерді форматтау тәсілінің
Тізімдер. Тізімдер (list) html-ға сөз жоқ мәтіндік редакторлардың
Сценарии. Сценарии – парақтың мәтініне қайтымды мәтін ретінде
Бұл элемент – программа – сценариидің мәтәнәі парақтығы
Java Script – Java Script тілінде жазылған
Tcl- Tcl тілінде жазылған
VBScript – VBScript тілінде жазылған
Бағдарлама мәтінін басқа бөлек файлға сақтаған ыңғалы. Онда
Сценариидің прекшелігі парқтағы бар мәліметті бағдарлама жұмысының
Броузер сценарииді қабылдамаған жағдайда қолданылады. Бұл элемент
Осы элементтің ішіне мына сияқты ескерту жазуға болады:
Элементтің ішіне скрипсіз парақтың қысқаша версиясын жазу;
Басқа құжатқа сілтеме жазу.
1.2 Web-беттегі графика мен мультимедия
World Wide Web алғашқы жылдары тек мәтіндік ақпаратты
Web-беттерде суреттерді қолдану құжаттардың қабылдануын сөзсіз арттырады,
Web-беттерде орналасқан графикалық ақпарат санын минимумға дейін жеткізу
Мүмкіндіктерді беттің ашылу жылдамдығы бойынша қолданған жөн: суреттің
Көп суреттерді қолдану кезінде жалпыға ортақ ережелерді ескеріңіз:
Суреттер жайлы ақпараттар графика форматының файлдарында сақталған. Графикалық
GIF (Graphics Interchange Format – тасымалдаудың графикалық форматы),
JPEG (Joint Photographic Experts Group – фотографиялар эксперттерінің
PNG (Portable Network Graphics – тасымалданатын желілік графика),
Web-бетке суретті орналастыру процедурасы өте қарапайым және BODY
Беттің жүктелуін дайындау кезінде браузер бетте орналасқан суреттердің
Суреттердің өлшем мәндері пиксельмен беріледі, мысалы, width=”133”
Суретті бетке қойғаннан кейін оның бетте орналасуына көңіл
Тігінен туралау үшін align атрибутының келесі мәндері қарастырылады:
bottom – суретті қою кезінде оның төменгі шекарасы
middle – суреттің ортасы мәтіндік жолдың шетімен тураланады;
top – суреттің жоғарғы шекарасы мәтіннің жоғарғы шеті
Көлденеңінен туралау үшін align атрибутының келесі мәндері қарастырылады:
left – суретті беттің сол жағына қарай орналастыру;
right – суретті беттің оң жағына қарай орналастыру
Көпетеген түрлі-түсті суреттер экранда әдемі көрінгенмен, олар ұзақ
Web-беттердің тез ашылуы үшін көптеген қолданушылар өз браузерлерінен
Осы мүмкіндікті жүзеге асыру үшін тегіне
Web-беттерде дыбыстық жазбалардың қолданылуы қандай да бір эффект
Барлық мультимедиялық файлдар арнайы қосымшаларда жасалып немесе
А элементі басқа файлға сілтеме жасауға арналғандығы бізге
Сіз тура қазір Акуба жағажайын
Гипермәтінге шерткеннен кейін видео-клип көрсетіледі.
Арнайы элементтер Web-беттерге мультимедия-файлды енгізуге мүмкіндік береді. Олардың
Дыбыстық эффектілер аудио файлдардың қолданылуымен жүзеге асады. WWW
AU (Audio format – дыбыстық формат дегенді білдіреді,
WAV (Waveform Audio – толқын формасындағы дыбыс дегенді
MIDI (Musical Instrument Digital Interface - әуенді инструменттердің
MP3 (MPEG Audio Layer 3, кеңейтілуі .mp3). Бұл
RealAudio (шынайы дыбыс, кеңейтілуі - .ra) – дыбыстаудың
Web-те видеофайлдардың бірнеше стандартты форматтары қолданылады. Олар:
MPEG (Moving Picture Expert Group – қозғалмалы суреттер
AVI (Audio Video Interleaved – “қозғалмалы аудио және
QuickTime (кеңейтілуі .mov немесе .qt) – Apple компаниясымен
Web-бетке қандай да видеофайлды орнатар алдында, осы форматтармен
1.3 Сайт құрылымы. Дизайн
HTML-бетті құру алдында, оның құрылымы мен жұмыс істеуін
Web-сайт навигация және көру үшін ыңғайлы болуы қажет,
Уақыт өте келе сайтқа жиі кіріп, оны аралап
Сайтты жетілдіру бойынша қазіргі идеалары оның онлайндық
Жылжу
Жаңадан құрылған сайтқа қолданушылар аз келеді немесе тіпті
Сайтты қайда тегін және тиімді жарнамалауға болады?
Іздеу машинасынан басталатынына көбісі қателеседі. Алдымен өз тақырыбыңыз
Өзіңіз туралы жазбаларды қайда болсын қалдырсаңыз, конференцияларда, басқа
Тематика бойынша ұқсас, Веб-сайттар иелеріне хат жазып, оларға
Web-сервер концепциясы
Web-сервер концепциясы (ыңғайлы навигация, модификациясының қарапайымдылығы) оның құрылымын
Web-серверді қалай дұрыс және жылдам құруға болады. Алдымен,
Мысалға, егер Web ақпараттық болса, барлық беттерді
Ыңғайлы навигация
Web-серверге келуші гипермәтіндік құжаттарды қарайтын схема навигация деп
Навигациялық схеманы құрғанда Web-сервердің негізгі тақырыбынан қолданушының көңілі
Негізгі навигациялық элемент, мысалға басы, ережеге сәйкес, жоғарыда
Web-дизайн және графика
Web-бетті графикалық толтыру жалпы стилде орындалуы керек деп
Негізінде, Web-дизайндағы түстер препресс дизайндағы сияқты заңдарға бағынады.
Түс және жарық
Түс туралы ғылымда - түстануда дизайнер мен суретшіге
Бірдей өлшемді әр түрлі түстік сәулелерді шағылыстыратын және
Алыстаған кезде түстің өзгеруі байқалады. Арақашықтығы үлкен болған
Дизайн үшін түсті таңдаудың өте үлкен мағынасы бар.
Түстік шеңберіндегі түстердің белгілеулері және аттары:
Қ – қызыл
ҚҚс – қызыл - қызғылт сары
Қс - қызғылт сары
С - сары
СЖ - сары – жасыл
Ж - жасыл
КЖ - көк - жасыл
К- көк
ККн - көк - күлгін
Кн - күлгін
ҚКн – қызыл - күлгін
Гете бойынша түстердің табиғи шеңбері
КҚС – негізгі үшбұрыш, бастапқы (негізгі) түстер.
Түстердің үйлесушілігі үйлесімдік композицияларды құру кезінде маңызды рөл
Шеңбер ішінде бір-біріне салыстырмалы түстердің орналасуы келесі үйлесулердің
Қарама-қарсы үйлесушілік. Бірі-біріне қарама- қарсы орналасқан түстер (мысалы,
Негізгі немесе аударылған үшбұрыштық бұрыштарында орналасқан түстердің үйлесушілігінің
Шеңбердің ішінде бұрыш жасап орналасқан
Нюанстік (монохромдық ) үйлесушілік (мысалы, көгілдір және көк
Бірдей түсті әртүрлі заттардан немесе өсімдіктерден құралған түстердің
Адамның көзі қызыл, қызғылт сары, сары түстерін және
Освальдттың үлкен түстік шеңбері
Екі, үш, төрт түстік реңдерден гормониялық үйлесушілікті жасау
Түстерді қиыстырған кезде кейбір түстер бір-бірімен жағымды әсерін,
Фонның көмегі арқылы жалпы алғанда композицияның, оны бөлек
Желі үшін бейне
Интернетте негізінен графикалық бейненің екі түрі қолданылады. Олардың
Ең әйгілі формат-GIF(Graphic Intenchang Format, “гиф ” деп
Сайт бетінің өлшемі
Бірнеше фокторларды қабылдауға назар аудару керек. Олардың ең
Қолданушылар 640х480 пиксельден бастап 1600х1024-ке дейін немесе одан
Әрине, Web-беттің кеңейтілуі әр түрлі болғанда әр түрлі
Профессиональді сайттардың арасындағы ең әйгілі әдіс-алдын ала берілген
Келесі сұрақ - проектілеу үшін қандай базалық өлшемді
1.4 JavaScript сценарийлерінің тілі
Қазіргі таңда Бүкіл Дүниежүзілік өрмек – мыңдаған адамдар
HTML құжатының стандартты тэгтерімен орындай алмайтын әрекеттерді JavaScript
JavaScript-те басқа программалау тілдеріне тән барлық элементтер кездеседі,
JavaScript сонымен қатар объектіге бағытталған тіл болып
JavaScript тілінің қолданылуының негізгі облысы:
- өзгермелі беттерді құру, яғни құжат жүктелген кезде
- форманы серверге жібермес бұрын оның дұрыс толтырылуын
- сценарийдің көмегімен көптеген “локальды” есептерді шешу, т.с.с.
JavaScript тілінде сценарий, яғни программа, браузерде орнатылған интерпретатор
Программа денесінде. Бұл жағдайда сценарийдің нәтижесі браузер
жүктелген уақытта Web бетте көрсетіледі.
Программа тақырыпшасындағы дескрипторының арасында орналасады. Бұл сценарий
HTML дескрипторында орналасады. Мұндай құрылым оқиғаны өңдеу деп
Жеке файлда. JavaScript программалау тілінің .js кеңейтілуімен сақталатын
Сценарийлер көптеген операторлардан тұруы мүмкін. Егер бірнеше операторлар
Программаны құру кезінде оны логикалы өзара тәуелсіз бөліктерге
Функция JavaScript тілінің негізгі элементі болып табылады. Функция
Әр объекттің өзінің аттрибуттары мен функциялары болады. Объектілерге
Function F(V){S}
мұндағы F - функция идентификаторы, яғни функция идентификаторы
Return операторы қайтарылатын функция мәнін анықтайды және ол
Әдетте функция бір команданы бірнеше рет шақыру барысында
Құжат браузерге жүктелген кезде барлық функциялардың жадта сақталуы
Келесі мысалда care функциясы катеттері бойынша тік бұрышты
Функция арқылы сценарийді қолдану
function care (a, h) { return a*h/2 }
Функция арқылы сценарийдің бейнеленуі.
var a1=5;
var h1=20;
var s=care (a1,h1);
document.write("Функцияны шақырғанда мына мән алынады ", s,".");
Cоңы.
Функцияның денесі return операторынан тұрады, ол функцияның қайтарылатын
Обьектілер – дегеніміз, мысалыға, ағымдық терезе (Window), ағымдық
Объектіде сақталатын әрбір элемент қасиет деп аталады. Мысалыға
- write – құжатқа ақпаратты шығарады,
- writeln – ақпаратты жаңа жолға шығарады.
Объектілер туралы толығырақ мәлімет А қосымшасында көрсетіледі.
Объект атрибуты дегеніміз- бұл енгізілетін не шығарылатын мәліметтер,
- енгізілетін - document.lastModified – қолданушы құжаттың соңғы
- шығарылатын - document.fgColor - өңдеуші құжат мәтінінің
Негізгі атрибуттар:
- location – берілгенге сілтеме жасайтын құжат
- title – құжаттың тақырыпшасын алады,
- bgСolor – фон түсін анықтайды,
- fgСolor – құжат мәтінінің түсін анықтайды,
- linkСolor – қолданылмаған сілтемелердің түсін анықтайды,
- vlinkСolor – қолданылған сілтемелердің түсін анықтайды,
- lastModified – соңғы түзету кезіндегі күн
- URL – берілген құжатқа сілтеме жасайтын,
- referrer - "браузер" берілгенге дейін жететін
- images[] – құжаттағы сілтеме массиві,
- links[] - құжаттағы сілтеме массиві,
- anchors[] – құжаттағы белгілеу массиві (сілтеме
- forms[] - Form объектісінің массиві,
- images.length - құжаттағы images объектісінің саны,
- links.length – құжаттағы links объектісінің саны,
- anchors.length - құжаттағы anchors объектісінің саны,
- forms.length – құжаттағы images объектісінің саны.
Формалармен жұмыс істеу
Форма дегеніміз Web беттерді құруда өте көп қолданылатын
HTMLде форма дескрипторынан басталады. Бұл дескриптор форманың
- NAME - форма аты. Формаға ат меншіктемей
- METHOD - GET немесе POST мәндерін қабылдайды.
- ACTION - бұл CGI сценарийі,бұның көмегімен мәліметтер
Мысалыға, төменде Order формасы үшін дескриптор бейнеленген. Бұл
JavaScript көмегімен құрылатын формада (мысалы калькулятор немесе
дескрипторынан кейін бірнеше форма элеметтері көрсетіледі.
Батырма
Формаларды тапсырғаннан кейін міндетті түрде батырманы қолдану керек..
- type=SUBMIT – бұл батырма арқылы мәліметтерді СGI
- type=RESET – бұл батырма форманы барлық параметрлерді
- type=BUTTON еркін батырма.
Көрсетілген батырманың үш түрі батырманың атын анықтайтын NAME
“Sub1” атты және “Мұнда шертіңіз” деген мәнмен батырма
Төмендегі мысалда батырманы басқан уақытта onclick параметрінде
function onPush() {
alert("H E L L O !"); return true;
Батырманы таңдау. this.value атрибуты “берелген элемент мәні” дегенді
форманың-аты – form командасындағы name параметрінің мәні, элементтің-аты
Мәтіндік өрістің қызметі
Мәліметтерді енгізу формасында мәтіндік өрістер қолданылады. Олардың көмегімен
WEB –сайт жасау және оның түрлері
Сайт бетінің өлшемі
Қазіргі Web сайттар туралы
Интернет және WEB сайт туралы түсінік
Оқыту орталықтарының автоматтандырылған жүйесін құруға қолданылатын ақпараттық программалық жабдықтар
Қазіргі WEB технологиялар
Web сайт құрудың технологиялары
HTML тілінде «Мұхтар Шаханов» атты сайт жасау
ЖЕЛІЛІК ТЕХНОЛОГИЯЛАР. ИНТЕРНЕТ. HTML ТІЛІНІҢ НЕГІЗДЕРІ ТЕОРИЯЛЫҚ СИПАТТАМАСЫ
«Bell Marriage» той салоны ақпараттық жүйесі