HTML-де беттерді құру және безендіру

                               HTML-де беттерді құру және безендіру

 

Егер бірінші ЭЕМ-нің бүгінгі күннен тек жарты ғасыр ғана бұрын құрылғандығын ескеретін болсақ, онда Internet компьютерлік әлемнің ардагері деуіміз дұрыс болар. Себебі Internet тарихы осыдан 30 жыл бұрын басталған. Алпысыншы жылдардың аяғында құрылған Internet АҚШ елдерінде көбінесе коммуникациялық желі ретінде қолданылған (ARPAnet деп аталған). Ол көбінесе жоғарғы оқу орындарында қолданылып, тек сексенінші жылдары ғана бұл желі өз қанатын бүкіл елге жайып, Internet -- деген атау алады.

Бүгінгі күні бағдарлаушыларға Web-беттерді құру үшін жүздеген әр түрлі бағдарламалар, құралдар бар екендігі бәрімізге мәлім. Солардың ішінде HTML-редакторлары, графикалық пакеттер және осылардың ішіндегі ең мықтысы - Front Page бағдарламасы да Web-беттерді құру үшін құрылған.

Web-беттерді құрудың ең оңай жолы - бұл мастер мен шаблондарды қолдану болып саналады.

Мастерлер мен шаблондарды құру. Шаблон каркас тәріздес, ол жаңа құжаттар құру кезінде қолданылады. Ал мастер бір немесе бірнеше экран беттерінен құрылған бірнеше сұрақ қою нәтижесінде, сіздің қажеттіктеріңізді анықтайтын және результат нәтижесінде қанағаттанған құжатты генерациялайтын (арттыратын) бағдарламалық модуль. Бұл жағдайда шаблоның мастерге қарағанда мүмкіншілігі аз, бірақ екі жағдайда да біз Web-беттің негізі бола алатын құжатты ала аламыз.

Шаблондар дегеніміз - мүмкіндігіне орай Frontpage толтыруды ұсынатын сайттар мен беттердің үлгісі. Олар мастерлер секілді сайт пен беттерді құрудағы мәрелік (старттық) аудан болатын құрылымды құрайды. Бірақ мастерлер тапсырыс берілген сайт пен бет үрдісін ұсынады, сонда шаблонды таңдап алып, осы шаблонның нақты мәтін үлгісі бар сыңарын аласыз. Соңынан оны өзіңіз жасаған шаблонмен ауыстыруға болады. Frontpage шаблон беттердің көптеген түрлерін ұсынады, олар, таза бет каркасы тәріздес Normal Page - кәдімгі бет шаблоннан басталып, Three Column Staggered ең қиын үшбағанды бет шаблонына дейін өзгереді. Бар сайтқа шаблон арқылы құрылған жаңа беттерді қосқанда, өзіңіздің Web-бетіңізді тез және оңай түрде өзгерте аласыз.

 Құрал -- саймандар панелімен жұмыс жасау. Редактордың құрамына құралдыр панелі кіреді және оларды View менюі арқылы басқаруға болады, олар:

-- Standard (Стандарттық);

-- Format (Форматтау);

-- Image (Сурет салу);

-- Forms (Формалар);

-- Table (Кестелер);

-- Advanced (Қосымша).

Сонымен қатар View менюінің құрамына Status Bar (Жолдар жағдайы) Format Marks (Символдарды форматтау) қосымша бөлімдер кіреді.

Бұл бөлімдерде редактордың көмегімен беттерге қоюға болатын элементтердің көбі сипатталып жазылған. Олардың барлығы беттердің кәдімгі элементтері, мысалы, текст құжаттары, гиперссылкалар, тақырып аттары, кестелер (tables), фрейм (frames) және жылжымалы жолдар (marquees). Сонымен қатар редактордың көмегімен WЕВ-беттерге формаларды (forms) және компоненттерді (Components) қоюға болады. Меню, құралдар панельдері және элементтердің көбі Word бағдарламасында жұмыс істеуімен өте ұқсас болып келеді.

Web-беттермен графикалық жұмыс жасау. Web-беттермен графикалық жұмыс істеген кезде ең негізгі мәселенің (проблеманың) бірі болып, браузер бетінде пайда болған бейне суреттердің жылдамдығы файлдардың алатын жады көлеміне байланысты. Графикалық форматтар көбінесе сол форматпен байланысқан кеңейткіштер арқылы аталады. Ал олар өз алдына көптеген қиындықтарға әкеледі. Осындай форматтарға BMP, GIF, EPS, TIF, JPEG, WMF және т.б. жатады. Бірақ та Frontpage тілінде Web-беттермен жұмыс істеген кезде біз көбінесе екі түрлі бейне суреттерді ғана қолданамыз, олар: JPEG және GIF. Олардың екеуі де қысылған және Web-беттермен жұмыс істеген кезде ең жиі қолданатын графикалық форматқа жатады. Frontpage көп түрлі графикалық форматтарды импорттап алады, олар:

-- JPEG (JPG);

-- CompuServe GIF (GIF);

-- BMP файлдары;

-- TIFF (TIF);

-- Метафайлдар Windows (WMF);

-- Sun Raster (RAS);

-- Postscript (EPS);

-- Paintbrush (PCX);

-- Targa (TGA);

Web-беттерге бейне суреттерді қойған кезде және егер олар сақталмаса, осындай бетті жабу немесе сақтау кезінде Frontpage олардың әрбіреуін тиісті сайт үшін сақтауды сұрайды. Frontpage GIF және JPEG форматтардан бөлек файлдарды автоматты түрде GIF форматта сақтайды. Ал егер сіз бейне суреттерді JPEG форматта сақтағыңыз келсе, онда Web-бетті сақтағанға бұрын Image Properties (Бейне қасиеттері) диалогтық терезеде сол форматты көрсету керек.

JPEG форматы (Joint Photographic Experts Group - фотосурет бойынша біріккен эксперттік топ) -- бұл масштабталған, қапталған, жоғарғы дәрежелі қысылған және сапасын аз ғана түсіретін формат болып табылады. Электрондық формада графикалық суреттерді бір форматтан екінші форматқа ауыстырған кезде бейнелер өзінің анықтығын біраз жоғалтады. Сол себепті, JPEG форматы жоғарғы дәрежелі қысылған және сапасы жағынан да жоғары болғандықтан Web-сайттар үшін ең қолайлы. JPEG форматы фотосуреттер үшін және түсі 256-дан асатын бейне суреттер үшін өте қолайлы.

GIF форматы (Graphics Interchange Format - графикалық мәліметтерді алмастыратын формат) -- бұл 256 немесе одан да аз түсті бейне суреттер үшін арналған қапталған формат. GIF форматы көбінесе біркелкі түстерден тұратын бейне суреттерден құралған (мысалы, безендіру сияқты). Сонымен қатар, GIF форматы мөлдір және жолдық бейнелерге де қолданады.

                    HTML тіліне жалпы түсінік

Интернетке түрлі қызметтердің жиынтығы әсер етеді. Солардың бірі ең көп тараған қызметтер қатарына Web (World Wide Web(бүкіләлемдік ӛрмекші)) енеді.   Web  -  тораптардағы  құжаттардың  негізгі  форматы   HTML  болып табылады.  HTML  (Hyper  Text  Maker  Language)  ағылшын  тілінен  аударғанда гипермәтінді белгілеу тілі деген мағынаны білдіреді.Гипермәтін  -  бұл  қосымша  элементтерді   басқару  мақсатында   ішіне  екпінді элемент орналасқан мәтін түрі. HTML тілінің құрылымы

<HTML>

<HEAD> <TITLE> құжат тақырыбы </TITLE> </HEAD>

<BODY>

құжат тұлғасы

</BODY>

</HTML>

Көп  жағдайларда  HTML  документтердің  тақырыптары  болады.  Олар <Hn></Hn>  тегтер  арқылы  жасалады,  n-ніњ  орнына  1-ден  6-ға  дейін  сан жазамыз.  Осы  тегтер  ортасына  текстімізді  орналастырсақ,  сізге  белгілі  көлемді тақырып шығады.

<H1>Тақырып</H1>

<H2>Тақырып</H2>

<H3>Тақырып</H3>

<H4>Тақырып</H4>

<H5>Тақырып</H5>

<H6>Тақырып</H6>

Ал енді жаңа абзацқа шығару  үшін <P>, ал жаңа жолға шығу үшін <BR> тэгі  жазылады.  Бұл  тэгтерді  жабу  керек  емес.  Әрине,  егер  Сіз  <P>  тэгінде

ALIGN абзацты түзеу элементін қолданбасаңыздар:

<P ALIGN=LEFT>Сол жақ шетке түзеу</P>

<P ALIGN=CENTER>Ортаға келтіру</P>

<P ALIGN=RIGHT>Оњ жақ шетке түзеу</P>

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

<B> Қалың мәтін </B>

<I> Курсивті </I>

<U> Асты сызылған </U>

<STRIKE>Сызылып тастаған</STRIKE>

<SUP>

Жоғарғы индекс

<SUB> Тӛменгі индекс </SUB>

Кейбір  тегтер  белгілі  бір  параметрлермен  қолданыла  алады  немесе

қолдану  тиіс,  олар  ашылған  тэг  элементтерінде  жазылады  (бір  тэгте  бірнеше

параметр беруге болады). Мысалы, ашылып жатқан <FONT>  тэгінің  (</FONT>

жабылатын тег жазылу тиіс) бірнеше арибуттары болуы мүмкін: SIZE  -  шрифттің  ӛлшемін  береді  (стандартты  шрифт  ӛлшемі  -«3»).  Текстті <FONT SIZE=n></FONT>  тэгтерінің  ортасына  қойсақ  (бұл жердегі  n  -  цифр)

Сіз оған керекті өлшем бересіз:

<font size=»1»>Мысал 1</font>

<font size=»2»> Мысал 2 </font>

<font size=»3»> Мысал 3 </font>

<font size=»4»> Мысал 4 </font>

<font size=»5»> Мысал 5 </font>

<font size=»6»> Мысал 6 </font>

<font COLOR="white"> Красный </font>

<font COLOR="#FF0000"> Қызыл </font>

Сонымен  түс  туралы  басынан  айтып  кетейік.  <BODY>  тэгінің  ішіне BGCOLOR  параметрін  жазып  және  оған  түс  атын  немесе  оныњ  6  орынды кодын беру керек. Берілген екі мысал бетті қызыл түспен бояйды.

<BODY  BGCOLOR=»RED»>  (түстің  аты  қолданылған)

<BODY BGCOLOR=»#FF0000»> (түс 6 орынды кодпен берілген)

HTML  документіне  сурет  салу  үшін  келесі  құрылымды  жасау  керек (толық көрсетілген):

<IMG  SRC=»Сурет  аты»  BORDER=»0»  ALIGN=»  түзеу»  WIDTH=»Ені»

HEIGHT=»Биіктігі»  HSPACE=»  1-орын  қалу»  VSPACE=»2-орын  қалу»

ALT=»сұқпат»>

                                        Кестелер

Кестелерді  қолдана  отырып,  бірнеше  бағана  құруға  және  суреттің  фон  мен үйлесуін сәндірек етуге болады т.с.с. Кесте  <TABLE>  ашылатын  тегімен  басталып  </TABLE>  тегімен  аяқталады.

<TABLE> тегінде мынадай атрибуттары болуы мүмкін:

Кестенің құрлымын біліп алу үшін, қарапайым мысалды алып қарайық:

1 ұÿшық  2 ұÿшық

3 ұÿшық  4 ұÿшық

Мұндай кесте былай жасалады:

<TABLE BORDER=»2» WIDTH=»200»

BGCOLOR=»#00FF00»>

<TR>

<TD>1 ұÿшық</TD>

<TD>2 ұÿшық</TD>

</TR>

<TR>

<TD> 3 ұÿшық</TD>

<TD> 4 ұÿшық</TD>

</TR>

</TABLE>

Ескеру:  Берілген  мысалда  кестенің  ені  қолдан  берілген  (WIDTH=»200» пиксель),  бірақ  пайызбен  берген  ыңғайлы,  себебі  бұл  жағдайда  терезенің көлеміне қарай өзгеріп отырады.Кестеде  тақырып  орналасуы  мүмкін,  ол  <CAPTION></CAPTION>  тегтерінің ортасында  орналасады.  Ол  міндетті  түрде  <TITLE>  тегінен  кейін  орналасу керек. Тақырыпқа ALIGN атрибутын  қолдануға болады, ол кестеде орналасуын анықтайды:

TOP  -  тақырып  кестенің  жоғарғы  жағыныњ  ортасына  жазылады.

LEFT  -  тақырып  кестенің  жоғарғы  жағының  сол  жақ  шетіне  жазылады.

RIGHT  -  тақырып  кестенің  жоғарғы  жағының  оны жақ  шетіне  жазылады.

BOTTOM -тақырып кестенің төменгі жағының ортасына жазылады. Ал  енді  кестенің  жолдары  мен  ұÿшықтары  туралы.  Кестенің  жолдары  <TR> тегімен  басталады  және  </TR>  тегімен  жабылады,  ал  әрбір  ұÿшық  <TD> тегімен басталып </TD> тегімен аяқталады.

Тізімдер  құру.Бұл  жағдайда  тізімнің  әрбір  элементтің  алды  автоматты түрде нөмірленіп шығады. Нөмерленген тізім  <OL>  тегінен басаталып,  </OL>тегімен аяқталады. Мысалы:

<OL>

<LI>  Бір

<LI>  Екі

<LI>  үш

<LI>  Төрт

<LI>  Бес

</OL>

1.  Бір

2.  Екі

3.  үш

4.  Төрт

5.  Бес

<OL> тегінің мынадай параметрлері болуы мүмкін:

TYPE - санау түрі:

A - үлкен латын әріптері

a - кіші латын әріптері

I - үлкен рим цифрлары

i - кіші рим цифрлары

1 - кәдімгі цифрлар

Келесі  мысалда  тізім  үлкен  рим  санының  сегізінші  цифрінен  басталып нөмерленген:

<OL  TYPE=»I»

START=»8»>

<LI>  Сегіз

<LI>  Тоғыз

VIII.  Сегіз

IX.  Тоғыз

X.  Он

XI.  Он бір 

<LI>  Он

<LI>  Он  бір

<LI>  Он  екі

</OL>

XII.  Он екі

Нөмерленбеген тізім:

Номерленбеген тізім  үшін  әдетте тізімдегі элементті белгілеуге маркерді қолданады. Ал маркердің түрін, заң бойынша, қолданушы таңдайды. Номерленбеген  тізім  <UL>  тегімен  ашылып,  </UL>тегімен  жабылады. Тізімдегі әрбір элемент <LI> тегімен басталады. Мысалы:

<UL>

<LI>  Бір

<LI>  Екі

<LI>  үш

<LI>  Төрт

<LI>  Бес

</UL>

·  Бір

·  Екі

·  үш

·  Төрт

·  Бес

<UL>  тегі  өзіне  TYPE  параметрін  қоса алады. Оның  disc, circle, square  деген белгілері бар.

<UL TYPE=disc><LI> disc </UL>  ·  disc

<UL TYPE=circle><LI> circle </UL>  o  circle

<UL TYPE=square><LI> square </UL>  §  square

                                                 Динамикалық HTML

Internet Explorer және Netscape Navigator нұсқалары пайда болғанға дейін құжаттарды  өзгерту  сыртқы  бетте  ғана  write,  document  арқылы  мүмкін еді.Содан соң орындалатын сценарийлер браузерге жаңа бетті құю, алдын -ала ескерту терезесін құю т.б. секілді командаларға сұраныс жасауға болады, бірақ бет компьютерге құйылған соң, HTML-код өзгертілмейді. Егер қолданушының сұранысына  сай  келмесе,  Web-беттерді  қалай  интерактивтеуге  болады. Netscape-тің  4  бағытымен  және  Internet  Explorerдің  4  бағытымен  құрылған динамикалық  HTML  бұл  кедергілерін  жоғалтады.  Динамикалық  HTML сценарийі  арқылы  HTML  блоктарды  енгізу,  оларды  жоюға  немесе  өзгертуге немесе  объектілердің  қасиеттерін  өзгертуге  болады.  Браузер  жаңа  қасиеттерді және жаңа HTML-кодты автоматты түрде жаңартады.Динамикалық HTML 2 принциптен құрылады:

-  Браузердегі  объектінің  атауын  немесе  ұйымдастыру  әдісін  сипаттайтын құжаттың объекті моделі.

-  Сценариййдік жіберу қасиетін қодағалайтын әдісін сипаттайтын модель.  World  Wide  Web  жедел  түрде  дамып  келеді.Дәстүлі  Web-  саиттар бұрынғыша  статистикалық  ақпарат  беттерімен   қолданушылар  арасында  көп сұранысқа  түспейді.сондық  Web  дизайнерлер  өз  беттеріне  ерекше  сипат аударуға  тытысады.  Ол  үшін  әртүрлі  графика  элементтері  мен  6  форматтағы анимациондық файлдарды қолданады.6 tf.jpe 6 pn 6дәстүрлі форматтар арқылы суретте өзгерту сайтқа көрнекті болғанымен құю кезінде көп уақытты алады.