Кестеде орналасқан ақпараттары бар беттерді құру. Сайттық гиперсілтемелері мен навигациясы.

Сабақтың тақырыбы: Кестеде орналасқан ақпараттары бар беттерді құру.

Сайттық гиперсілтемелері мен навигациясы.

Жаңа тақырыпты түсіндіру

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

Кесте үш бөліктен тұрады:

1. кесте тақырыбы

2. бағаналар тақырыптары

3. ұялар

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

Қарапайым 2*3 кестесін жасау үшін төменгі тэгтер жиынын қолдануға болады:

мәтін	мәтін	мәтін
мәтін	мәтін	мәтін

бұл жердеborder кесте сызықтарының ені. Кестенің ұяшықтарының енін пайз арқылы өзгерту үшін width атрибутын қолданса болады, мысалы:

Кесте тэгтері.

…- html құжат ішіне кесте салу үшін қолданылатын тэг. Кесте алдында және кесте соңында болуы тиіс. тэгінің параметірлері: bgcolor, border

-фон түсі

border-ұялар арасындағы сызық

width- кесте ені

1. кесте ішінде орналасатын тэгтер:

… -кесте тақырыбын береді. Оның параметірлері: align=top-тақырып кесте алдында орналасады. align=bottom-тақырып кесте соңында орналасады.

… -кесте жолы. BGCOLOR –осы жол тордың ішкі фон түсі. Align= left,,right,center –жол ішіндегі мәтінді солға, оңға, ортағп туралайды. Valign= top, bottom, middle- кесте ішіндегі мәтінді вертикальбағыт бойынша туралайды.

-кесте бағанасы. Оның параметрлері: bgcolor-бағананың фон түсі

align=left,right,center-бағананың ішкі мәтінін солға, оңға, ортаға туралайды.

Valign=top,bottom,middle-кесте ішіндегі мәтінді вертикаль бағыт бойынша туралайды.

Colspan-бірнеше баған торларын біріктіру.

Rowspan- бірнеше жол торларын біріктіру.

- бағана тақырыбы. Параметрлері басқалардікіндей.

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

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

2. Графика типі. Сайттыңнавигациясында графика нұсқасынқазіргіоптимизатор­ларкеңіненқолданады. Графикалықредакторменсайттыңбарлықмүмкіндіктерінкөрсететінәртүрлібаптаулар мен плагиндер, түрліәсерлер мен сүзгілер құраалады.

3. HTML формасыныңтипі. Кәсібиweb-жоспарлаушылар HTML гипермәтінбелгілеутілініңспецификациясыәртүрлітиптегі мәзірдіжасайалатындығынбіледі және тиімдіқолданады.

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

Гиперсілтемелер (Гиперссылки)

Гиперсілтеме – бүкіл ғаламдық желінің негізі. Сонымен қатар гиперсілтеме жаңа құжатқа немесе ағымдағы құжаттың бөлігіне ауысу үшін басылатын ерекшеленген сөз, сөздер тобы, сурет немесе кес­кін болуы мүмкін.

Гипермәтін ішіне дыбыс, сурет, мәтінді безендіру, пішімдеу жұмыстарын орындауды белгілейтін сөздер орналасады. Гипермәтінді экранға шығарып бейнелеу үшін браузер (browsers) қолданылады. Браузер арнайы команда, тегтермен толықтырылған мәтіндік құжаттың тақырыптарын экранға үлкен қаріптермен, ал жай мәтіндерін кіші қаріптермен жазады. Оның ішіндегі суреттерді адресіне сәйкес компьютер экранында көрсетеді. Ең кең тараған браузерлерге Google Chrome, Mozilla Firefox, Windows операциялық жүйесімен бірге қойылатын Internet Eхplorer және т.б.с.с. жатады. Осы браузерлер бүгінгі қолданылып жүрген браузерлердің 80 %-ын құрайды.

Есіңізде сақтаңыз

Гиперсілтеме (немесе сілтеме) – Интернеттің кез келген бөлігіне кіруге болатын веб-контент (мазмұн).

Гипермәтін – қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент орналасқан мәтін.

Web-беттердегі сілтемелер және оларды қолдану әдістері

Web-беттер басқа web-беттерге қатысты сiлтемелерiнiң болуы – World Wide Web жүйесiнiң ең тартымды ерекшелiктерiнiң бiрi. Сілтемеенгізуүшін A (anchor) тегіқажетболады. Сілтеменіңқайдаапаратынынкөрсетуүшінтегтіңhref (hypertextreference) атрибутынпайдаланукерек.

Есіңіздесақтаңыз

Сілтеме (hyperlink) – локалдыдискіденемесе компьютер желісіндеорналасқанқұжатішіндегібасқабірэлементке (мәтін, тақырып, суретжәнет.б.), басқаобъектігесілтемеберетінгипермәтіндіқұжаттыңбірбөлігі

Web-беттерде сілтемелерді қолдану әдістері

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

2-әдіс

3-әдіс

4-әдіс

Сілтемені безендендіру. Сілтеме түсі

Үнсіздік бойынша браузер сілтемелердің белгілі бір түстік безендірілуін орнатады. Өңдеуші өз қалауы бойынша ол түстерді өзгерте алады. Сілтемелер бүкіл құжатқа бірыңғай безендірілетін болғандықтан, сілтеме түсінің атрибуттары BODY құжатының дене элементіне енгізіледі. Түстің келесі атрибуттары бар:

link – белсенді емес сілтемелердің, яғни әлі қаралмаған сілтемелер түстерін белгілейді;
​vlink – қаралған сілтемелер түсін белгілейді;
​alink – белсенді сілтеменің, яғни тінтуір көрсетіп тұрған сілтеме түсін анықтайды.

Берілген атрибуттардың әрқайсысының мәні ретінде не түс атауы немесе #RRGGВВ форматындағы оналтылық сан болуы мүмкін. Бір, екі немесе барлық үш атрибутты белгілеуге болады, сонымен қатар белгісіз атрибуттар үшін қалып бойынша мәндерді қолдануға болады.

vlink="#666666" alink="#000000"

Практикалықжұмыс

Тапсырма: Екіweb-бет жаса. Біріншіweb-беттесағаттыңсуретіорналассын. Сағатсуретінегиперсілтемеқоюарқылы, олжерденсағатжай­лыақпараторналасқанweb-бет жаса (1 және 2 сурет).

Сабақты бекіту сұрақтары:

1. Гиперсілтемедегеніміз не?

2. Навигация құруда кандай міндеттер басшылыкка алынады?

3. Гипер мәтінді экранға шығарып бейнелеу үшін қандай программалар қолданылады?

4. Сілтеме (hyperlink) дегеніміз не?

5. Web-беттерде сілтемелерді қолданудың қандай әдістері бар?

6. Сілтемені безендіру үшін оған түстерді қалай таңдайды?

https://www.youtube.com/watch?v=TdSCYRts-Ec

…	…