Сайт бетінің өлшемі

Мазмұны

Кіріспе

World Wide Web бүкіл әлемдік «өрмектің» негізі гипертексті HTML тілі екендігі бізге белгілі. HTML Интернет сәнінің негізі болып табылады. Желідегі виртуальді журналдар парақтарында, теледидар бағдарламаларында, Интернетке қатысты талқыланған әдемі суреттер, Web-парақтардың интерактивтілігі, браузерді өңдеуші фирмалар арасындағы (Netscape және Microsoft) қақтығыс, бизнес, ойындар және т. б. жайттар гипермәтін тілімен байланысты деп айтуға болады.

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

Веб-беттерді құруға арналған HTML тілі бүгінде кең таралған. Сонымен қоса, қазір PHP скриптар тілі қолданылып жүр. ASP, GGI, Perl, SSI, ASP тілдері де кеңінен қолданылмаса да, кейбір веб-беттерді осы тілдермен құруға тура келеді. XML, XHTML және DHTML веб-программалау тілдеріне жатпаса да, оларды толықтыруға өте пайдалы. Скриптардың ішінен JavaScript және VBScript тілдерін айтуға болады. HTML, гипертекст тілі арқылы жұмыс істеу өте жеңіл әрі ыңғайлы, сондықтан болар көптеген жасаушылар осы тілді таңдайды.

Менің дипломымның мақсаты - HTML тілін пайдалана отырып, мектептің сайтын жасау.

Міндеттері - HTML тілінің қарапайымдылығын анықтау, оның мүмкіндіктерін қарастыру, осы тілді пайдалана отырып, сайт жасау.

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

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

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

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

1 Сайт беттерін құруда HTML тілінің қолданылуы

1. 1 HTML тілінің элементтері және Web-беттерді құру принциптері

Web беттерді құруға әртүрлі орталарды қолдануға болады. Олардың ең қарапайым түрінің бірі Блокнот (Пуск > Программы > Стандартные Блокнот) . Мұнда жасалынған програма браузерлерде көрінуі үшін арнайы операторлар қолданылады. Олар тілдің тэгтері деп аталынады. Құрылған файлды . html қосымшасымен сақтайды.

HTML тэг -символдардың жиыны. Барлық тэгтар «<» белгісінен басталып «>» белгісімен аяқталады. Бұл белгілердің ішінде қызметші сөздер орналасады. Әрбір қызметші сөздің атқаратын іс-әрекеті бар. Тэгтарды жазуда бас не кіші әріптердің айырмашылығы болмайды. HTML тілінің тэгі әдетте құжаттың бір бөлігіне ғана әсер етеді. Бұл жағдайда жұп - ашатын және жабатын тэгтар қолданылады. Ашатын тэг іс-әрекеттің басталуын анықтаса, ал жабатын тэг оны аяқтауды білдіреді және онда қосымша «/» белгісі қолданылады. Кейбір тэгтар сол анықталған жерінде ғана қолданылады. Бұл жағдайларда жабатын тэгтар қажет болмайды.

Ашылатын тэгтарда іс-әрекетке әсер ететін қосымша қызметші сөздер - атрибуттар қолданылады. Кейбір атрибуттардың мәндері міндетті түрде көрсетілуі тиіс. Ондай жағдайларда «=» белгісі қолданылады.

Жабылатын тэгта ешқандай атрибуттар болмайды.

Түсініктеме «!--» белгілерінен басталып «-->» белгісімен жабылады /1/.

Төменде әдеттегі Web парақтың дайындау үлгісі көрсетілген. HTML парағының құрылымен қарастырайық.

<HTML>

<HEAD>

<TITLE>Web парағының құрылымын</TITLE>

<STYLE>H2{font-family:Arbat; }

CODE{ font-family:Areal; } </STYLE>

<META http-equiv=”Content-Type” content - “text/html; charset=windows-1251”>

<META name=”Authoer” content=”Algojina”>

<META name=” Keywords” content=”WWW; HTML, document, element”>

</HEAD>

<A name=”top”></A>

Өту<A href=”#bottom”>құжат</A>соңы<p>

Өту<A href=”#S001”><B>сілтемеге 1</B></A>соңы<p>

<p>

<HR>

<H1>тақырып 1</H1>

<H2>тақырып 2</H2>

<H3>тақырып 3</H3>

<H4>тақырып 4</H4>

<H5>тақырып 5</H5>

<H6>тақырып 6</H6>

<HR>

<P>Мұнда сілтеме<B>орналасқан</B>

<A name=”S001”></A>

<HR>

<P>Web-парақтың түпнұсқа мәтіні орналасуы керек

<HR>

<A name=”bottom”></A><P>

Құжаттың басына <A name=”#top”>өту</A>

</BODY>

<HTML/>

Егер алдындағы әртүрлі Web-парақтың мәтіндерін қарастырсақ, олардың құрылымдарының ұқсастықтарын көруге болады. Бұны құжаттар белгілі бір ережемен құрылады деп түсіндіріледі. HTML тілінің синтаксисінің негізіне ISO 8879:”Information processing. Text and office systems” Standard Generalize Marcup Language (SGML) ” стандарты жатқызылады.

Ресми және шыныдығында негізделген стандарттар арасында үлкен айырмашылық бар. HTML тілі үнемі дамып отыратындықтан оны ресми алғашқы оқулықтармен ғана үйреніп қоймай, іс жүзінде алдағы келе жатқан өңдеуші фирмалармен және мамандардың еңбектерін де пайдаланыңыздар. Web-парақтың құрылымын үйрену үшін оның барлық элементтерін қарастырумыз керек. Тілдің элементтерін қарастырғанда тегтің екі сыңары бастапқы және соңғы тегтар келтірілге. Мысалға <I> және </I>.

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

<HTML> </HTML> HTML тіліндегі құжатты білдіру. Осы тегтердің Web-парақ орналасқандықтан, бұл элемент ең сыртқы элементі. Негізінен бұл элемент немқұрайлықпен қарастырылады version, lang және dir атрибуттары бар. Берілген жағдайда пайдаланылмайды. Web-парақтың жалпы құрылымын анықтайтын HEAD, BODY, FRAMESET енгізбелерін жібереді.

<HEAD> </HEAD> Web-парқтың аумағы. Басқаша айтқанда, оның бірінші бөлімі. Алдындағы элемент сияқты HEAD элементі құжаттың жалпы құрылымын құрастыру үшін ғана қолданады. Lang және dir атрибуттары бар, BASE, META, LINK, OBJECT, SCRIPT, STYLE енгізбелерін жібереді.

<TITLE></TITLE> Web-парақтың тақырыбын орналастыратын элемент. Осы элементтің ішіндегі жол құжатта бейнеленбейді, броузер терезесінің тақырып жолында бейнеленеді. Сондықтанда, Web-парақты құрастырушы авторлар осы жолдың ұзын болмауын қамтамассыз ету керек.

<BODY> элементінің ішіне Web-парақтың дизайнына арналған элементтерді жазуға болады. Сәйкесінше бұл элементтің соңғы тегін құжаттың соңына жазады. Бастпақы тег ішінен парақты түгелдей өзгертетін атрибуттарды жазуға болады. Дизайнда пайдалы атрибут парақтың фонын анықтайтын атрибут /2/.

Background=”файл фонына жол” немесе қарапайым түрі bgcolor=”#RRGGBB”

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

Парақтың фоны өзгеретін болғандықтан, мәтіннің түсін сәйкес таңдау керек. Ол үшін келесі атрибут text=”#RRGGBB” қолданылады. Гиперсілтемелер мәтіннің түсін беру үшін келесі атрибуттар:

Link=”#RRGGBB”

Vkink=”#RRGGBB”

Alink=”#RRGGBB”

BODY элементінің ішіндегі гипермәтін еркін құрылым болады.

<H1> </H1> тақырып элементі. Алты деңгейі бар H1…H6 бірінші деңгей ең үлкені, алтыншы ең кіші.

Солға, оңға, ортаға тегістеу атрибутын пайдалануға болады.

Align=”left”

Align=”right”

Align=”center”

<HR> көлденең сызық (horizontal rule) - өте жиі қолданылатын элемент. Біріншіден, осының көмегімен парақты бөлікке бөле аламыз. Екіншіден парақ авторының осыған ұқсас элементттерді таңдау мүмкіндігі аз. Шынында да, HTML тілінде іс жүзінде ұқсас құрастырулар аз, көлденең сызыққа ғана шектеулі. Элементте соңғы тег жоқ, бірақ солға, оңға, ортаға тегістеу атрибутын пайдалануға болады.

Align=”left”

Align=”right”

Align=”center”

Сызықтың жуандығын белгілеуге болады size=пиксел.

<STYLE></STYLE> Web-парақтың кейбір элементтерінің стилін сипаттау. Әр элемент үшін стилдік ресімдеу үнсіз келісім бойынша орнатылады, сондықтан бұл элементті қолдану міндетті емес, бірақ қолданған дұрыс болады.

<META> Бұл элемент Web-парақты көргенде бейнеленбейтін, қызметтік ақпаратты сипаттайды. Оның ішінде әдеттегі түсінікті мәтін жоқ, сондықтанда соңғы тек жазылмайды. Әр МЕТА элементі екі негізгі атрибутты сипаттайды, біріншісі мәліметтердің түрін анықтайды, ал екіншісі - мазмұнын сипаттайды. МЕТА мәліметтердің бірнеше мысалы:

1. Құжаттың «сақтау мерзімін» көрсететін мерзімі: name=”Expires” conten=”күні”:

• электрондық пошта адресі: name=”Reply-to” content=аты@адресі;
• іздеу үшін кілт сөздердің жиынтығы: name=”Keywords” content=”сөз1, сөз2, сөз3”;
• Web-парақтың авторы: Name=”Author” content=”Автордың аты”

2. Web-парақтың қысқаша мазмұны: name=”Deccripton” content=”парақтың мазмұны”

3. Web-парақтың сипаттамасы мен түрін сипаттау: name=”Generator” content=”HTML редакторының атауы”;

name атрибуты клиент - қосымша мен Web-парақ туралы қосымша ақпарат алу және оларды жөнге келтіру үшін пайдаланады. Бұл атрибутты көбінісе http-equiv атрибутымен алмастырады. Ол сұранысты орындау кезінде қосымша өріс құру үшін сервермен пайдаланады. Сонымен қоса, МЕТА элементі URL-ды сипаттай алады. Үлгісі мынадай: URL=http://адрес.

<A></A> HTML құжатты өте үлкен болуы мүмкін, осындай жағдайда құжаттың керекті бөліміне жылдам өтуіне болады.

<BASE> Сілтемелерге базалық адресін беретін элемент (URL) . Құжаттың сілтемелерге адрестің бастапқы бөлігін жібертеді. Бұл элементті пайдалану үшін <BASE href=http://компютер /жол1>.

Жол1 үзіндісін міндетті болып саналмайды. Толық адресін жазғанда, ол қажет етілмейді. Егер құжат мәтінінде салыстырмалы сілтеме кездессе: <A href=”жол2/ html құжат-аты”> сілтеменің көрінетін мәтіні </A>, онда URL-на сәйкес келеді: http://компьютер/жол2/html құжат-аты. Жергілікті дискіге базалық адрес беру үшін: <BASE href= file://C:\жол\ >. Салыстырмалы сілтемені көрсеткенде, файлдың атын ғана емес, сонымен қоса файл орналасқан папкалардың атын көрсетуге болады. Басқаша айтқанда, файлға жол 2-ге бөлінеді: шексіз және салыстырмалы. Салыстырмалы - құжатта көрсетілген файлдар үшін, жолдың бастапқы, жалпы үзіндісі болған жағдайда ыңғайлы. Шексіз сілтеменің білдіргенде, (file://) ену сызбасын көрсеткенде жібергенде қолайлы. Шексіз сілтеменің бірінші сол жақ символына дейін «\», яғни жергілікті дискінің атына дейін, тек сол жақ бөлігі ескеріледі.

Синтаксис ережесі. Web-парақтың кодының түрін білеміз, HTML синтаксисіне қатысты жалпы қорытындылар келтіруге болады. Әр элементті пайдаланғанда, оның ішіне қандай элементтер кіргізуге және өзі қандай элементтерінің ішіне орналасатынын білуіміз маңызды. Сонымен, тек мына жағдайда егер фреймдер пайдаланылмағанда, HTML, HEAD, TITLE, BODY элементтерінің өзара орналасуы кез-келген парақта, стандартты болуы керек. Егер парақ фреймнің жоспарын ұсынса, онда байланысты BODY элементінің FRAMESET элементін пайдалана аламыз.

Қатар пайдаланатын элементтер тобы бар. Оған кестелер, тізімдер, фреймдер құратын элементтер жатады. Бұл жағдайда элеметтерді орналастыру тәртібі парақтағы сол немесе басқа объектіні құру логикасы мен анықталады: құрастырудың күрделі емес ережелерін есте сақтау керек. Кестелер мен фреймдер көбінісе, парақтың бөлшектерін белгілі ретпен сыйғыздыру үшін қолданылады. Мысалы, суретті ұяшық ішіне орналастыра отырып, оның белгілі бір жағдайына қол жеткізуге болады. Мұндай жағдайларда элементердің орналастыруын Web-парақтың дайындаушымен анықталады, және көптеген басқа орналастырулар орнын білімімен қиялына байланысты жасалады.

Көптеген, мәтінді форматтауда пайдаланатын элементтер, орналастырудың бірнеше варианттарын ұсынады. Және өздері белгіленген элементтер ішінде орналасуы керек. Мұнда дұрыс ойланып басқару керек : әр элемент берілген қызметті орындайды және белгілі аумақ әрекетін орындайды.

Төмендегі мысалды екі абзац және кесте келтірілген: <P style=”border:3px solig green”>Абзац мәтіні</P>

<TABLE>…</TABLE>

<P> Абзац мәтіні </P>

Бірінші абзацтың соңғы тегі жойылған. Енді кесте бірінші абзацтың бөлігі болып саналады, және кесте мәтін жасыл рамкамен қоршалады. Керсінше Р элементі кестенің ішінде орналаса алады: мысалға, TD ұяшығының бір элементі бірнеше Р абзацтарда сипаттай алады.

Енгізудің ережелерін бұзу - Web-парақтарды құрғанда, көп кездесетін қателіктердің бірі. Осындай қателіктерді болдырмау үшін синтаксис ережелерінің орындалуын автоматты түрде бақылайтын, гипермәтін редакторларын пайдаланыңыз. Төменде, жіберелетін ұқсас қателер келтірілген: <H1>Тақырып <H2>Тақырып </H1>Тақырып</H2>. Атап өтуіміз қажет броузерлер гипермәтінді белгілеудегі қателітерден мән бермеуге тырысады. Егер парақ бейнеліп тұрса, экранға ескертпелері хабарламасыз шығарылады. Бағдарлама қате жазылған тегтарды белгілі бір қалыппен аударады және дайындаушылардың ойлауымен жазылғаны бойынша толтырады. Осы кезде парақтың түрі автордың ойына сәйкес келмеуі мүмкін. Тек күрделі қателерде немесе қайшы құбылыстарда, броузер парақтың бейнеленуінің мүмкін еместігі туралы хабарлама шығарады. Белгілеудің қателігінің жанама белгісін, парақ бетіне кодының үзінділерінің пайда болуы көрсетеді. Интернетпен көп жұмыс істейтін пайдаланушылар, осындай жағдайларда тап болған шығар /3/.

Синтаксис ережесі, сипатталған элементтің атрибуттарына және бастапқы және соңғы тегтарды пайдалануға да кең таралған. «Элемент» және «Тег» түсініктерін шатастырмаңыздар. Элемент - бастпақы және соңғы тег арасындағы пайдалы ақпарат және бастапқы тегтар ішіндегі атрибуттар сипатталған контейнерлер. Тег - бұрыш жақшаға алынған және элемент әрекетінің аумағын белгілеу деп пайдаланатын құрылым.

Кейбір элементтерде соңғы тег жоқ. BR элементі, жолдың соңын көрсететін элемент. Кейбір элементтер соңғы тегпен немесе соңғы тегсіз пайдаланады. Мысал ретінде Р элементін алуға болады. IMG сурет элементі, UL тізім элементі, TABLE және тағы басқалар соңғы тегтері болмайды.

Бір элементтің пайдалы ақпараты берілген элементті соңғы және бастапқы элементтер арасында немесе бастапқы тегпен келесі элементінің бастпақы тегінің арасында орналасуы керек. Параққа енгізілген кез-келген еркін жазылған мәтінді, экранға шығарылуы тиісті ретінде броузер қабылдайды. Мәтіндік редактордан алынған ақпарат мәтінді жаңа жолдан жазуды бөлу қарастырылмайды. Іс жүзінде барлық - Web-парақтарды бір ұзын жолға сыйғызуға болады. Мысалы, блокнотка енгізілген жолдың соңын көрсететін символдарды HTML кодын оқуға көмектеседі, бірақ броузерда бейнеленбейді. Экранға парақты шығарарда жолды Hn, P немесе BR элементтері үзе алады, ал қалған жағдайларда абзацтарды мәтін көлеміне, шрифт өлшеміне және өтіп жатқан терезенің өлшеміне байланысты ерекше форматтайды, сондықтанда Web-парақтардың түрлері монитордың әртүрлі режимдерінде шешілетіндей яғни өзгермейтіндей етіп құрастыру керек. Өте маңызды ережесі болып элементтердің атрибуттары алғашқы тег ішіне орналастыру /5/.

Түсті басқару. Түсті кодтау шрифтерді, көлденең сызықтарды, фондты және басқа парақтың элементтерін бояу үшін пайдаланады. Түстерді ағылшын немесе оналтылық санымен белгіленеді. Түстің параметрлерінің мағыналары болып табылатын, бірнеше атрибуттар бар. Ең қарапайым әдісі түсті - ағылшын тілінде көрсету. Мысалы FONT элементінде қызыл шрифт былай көрсетіледі: COLOR=”red”.

Кез келген белгіленген үйлесімділікпен алынған қызыл (R), жасыл (G) және көк (B) түстердің ретінде ұсынылады.

Төмендегі кестеде (1 кесте) түстердің атау көрсетіліп отыр /4/.

1-кесте. Түс элементтері

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

Мәтінді форматтау. Мәтінді арнайы анықтаманың талап етпейтін Web-парақтың бірден-бір. Қысқаша айтсақ, туынды символдар сөзсіз-ақ мәтіндік мәліметтер береді. Бірақ мәьінді форматтау үшін көптеген элементтер бар. Арнайыларын басқа олардың басым көпшілігі стандартты атрибуттарды: long, dir, id, class, title, style қолдайды.

Мәтінді кәдімгі элементтер де форматтауға болады: үзінділерді курсивпен, жартылай қарамен ажырату, шрифт таңдау және тағы басқа. Осы элементтерді қарастырайық.

<P>></P>

Абзац элементі - ең пайдалылардың бірі. Ол тек бастапқы тегті пайдалануға мүмкіндік береді, себебі келесі элементі келесі абзацтың басталуын ғана емес, алдындағысының аяқталуында білдіреді мен мағынасы бойынша абзацтың аяқталуын көрсету қажет болса, соңғы тегті пайдалануға болады. Абзац элементтерімен қатар

Align=”left”-сол жақ шеті бойынша тегістеу

Align=”right”- оң жақ шеті бойынша

Align=”center”-ортасы бойынша тегістеу

... жалғасы

Тортугалия кондитерлік фирмасы

Сайтқа қойылатын талаптар

Қазтабан компаниясы артықшылықтары

БАСЫЛЫМҒА ЖАЗЫЛУ ЭЛЕКТРОНДЫ КАТАЛОГЫНЫҢ WEB-САЙТЫН ЖАСАУ

Кітапхана сайтының дизайны

Интернет - дүкен ұғымы

Web-технология бойынша электронды оқу кұралын құрастыру

WEB –сайт жасау және оның түрлері

Бет бойынша жылжу

Компанияның веб - сайты

• Іс жүргізу
• Автоматтандыру, Техника
• Алғашқы әскери дайындық
• Астрономия
• Ауыл шаруашылығы
• Банк ісі
• Бизнесті бағалау
• Биология
• Бухгалтерлік іс
• Валеология
• Ветеринария
• География
• Геология, Геофизика, Геодезия
• Дін
• Ет, сүт, шарап өнімдері
• Жалпы тарих
• Жер кадастрі, Жылжымайтын мүлік
• Журналистика
• Информатика
• Кеден ісі
• Маркетинг
• Математика, Геометрия
• Медицина
• Мемлекеттік басқару
• Менеджмент
• Мұнай, Газ
• Мұрағат ісі
• Мәдениеттану
• ОБЖ (Основы безопасности жизнедеятельности)
• Педагогика
• Полиграфия
• Психология
• Салық
• Саясаттану
• Сақтандыру
• Сертификаттау, стандарттау
• Социология, Демография
• Спорт
• Статистика
• Тілтану, Филология
• Тарихи тұлғалар
• Тау-кен ісі
• Транспорт
• Туризм
• Физика
• Философия
• Халықаралық қатынастар
• Химия
• Экология, Қоршаған ортаны қорғау
• Экономика
• Экономикалық география
• Электротехника
• Қазақстан тарихы
• Қаржы
• Құрылыс
• Құқық, Криминалистика
• Әдебиет
• Өнер, музыка
• Өнеркәсіп, Өндіріс