Рим сандарымен реттелген

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады. < ol> < /ol> тегінде type=«I» деп қ олданылады, тырнақ шадағ ы I Роман саны тізімнің Роман санымен реттелетінін білдіреді.

< html>

< body>

< h4> Рим санымен реттелген тізім: < /h4>

< ol type=«I»>

< li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ol>

< /body>

< /html>

Сурет 34. Рим санымен реттелген тізім

Кіші Рим сандарымен реттелген

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады.

< ol> < /ol> тегінде type=«i» деп қ олданылады, тырнақ шадағ ы I кіші Роман саны тізімнің кіші Роман санымен реттелетінін білдіреді.

< html>

< body>

< h4>

Кіші Рим санымен реттелген тізім: < /h4>

< ol type=«i»>

< li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ol>

< /body>

< /html>

Сурет 34. Кіші рим санымен реттелген тізім

Дө ң гелек белгімен реттеу

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады.

< ul> < /ul> тегінде type=«Disk» деп қ олданылады, тізім алдында тұ рғ ан қ ара дө ң гелек диск сияқ ты белгі екенін білдіреді.

< html>

< body>

< h4> Диск тә різді белгі: < /h4>

< ul type=«Disk»>

< li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ul>

< /body>

< /html>

Сурет 35. Диск тә різді белгі

Шең бер белгімен реттеу

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады. < ul> < /ul> тегінде type=«Circle» деп қ олданылады, тізім алдында тұ рғ ан іші ақ дө ң гелек сияқ ты белгі екендігін білдіреді.

< html>

< body>

< h4> Дө ң гелек тә різді белгі: < /h4>

< ul type=«Circle»>

< li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ul>

< /body>

< /html>

Сурет 36. Дө ң гелек тә різді белгі

Тө ртбұ рыш тә різді белгі

< li> < /li> тегі арасына тізімге енетін сө здерді енгізуге болады. < ul> < /ul> тегінде type=«Square» деп қ олданылады, бұ л тізім алдында тұ рғ ан тө ртбұ рыш сияқ ты белгі екенін білдіреді.

< html>

< body>

< h4> Тө ртбұ рыш тә різді белгі: < /h4>

< ul type=«Square»>

< li> Математика< /li>

< li> Тарих< /li>

< li> Қ азақ тілі< /li>

< /ul>

< /body>

< /html>

Сурет 37. Тө ртбұ рыш тә різді белгі

Анық тама тізімі

< dt> < /dt> тегі арқ ылы бір сө з беріледі, мыс., Жылқ ы. < dd> < /dd> тегі арқ ылы сол сө здің, яғ ни жылқ ының анық тамасы беріледі жә не ол екі тегте < dl> < /dl> орналасады.

< html>

< body>

< h4> Анық тама тізімі: < /h4>

< dl>

< dt> Жылқ ы< /dt>

< dd> Ү й жануарының бірі< /dd>

< dt> Қ ымыз< /dt>

< dd> Жылқ ының сү ті< /dd>

< /dl>

< /body>

< /html>

Сурет 37. Анық тама тізімі

Дә ріс 7. HTML тілінде сілтемелер

Жоспар:

- Сайт ішіндегі ішкі сілтемелер;

- Беттің ішіндегі сілтемелер;

- Поштағ а сілтеме жасау

- Суреттегі сілтеме

- Каскадтық стильді кестелер

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

Сілтеме енгізу ү шін a (anchor) тегі қ ажет болады. Сілтеменің қ айдаапаратынын кө рсету ү шін тегтің href (hypertext reference) атрибутынпайдаланамыз. Мысалы, сілтеме Қ азақ ша Уикипедияғ а апаратын болса, href атрибутының мə ні “https://kk.wikipedia.org”тең болады. Осы тырнақ шаның ішіндегі жазу Қ азақ ша Уикипедияның толық адресі немесе сайттың URL (Uniform Resource Locator) деп аталады.Сілтеме беру ү шін міндетті тү рдесайт адресінің алдына мынаны - https:// қ осу керек. Одан кейін < /a> тегжабылады.

< ahref=«https://kk.wikipedia.org»> Қ азақ шаУикипедияғ асілтеме< /a>

Сурет 38. Қ азақ шаУикипедияғ асілтеме

Сайт ішіндегі ішкі сілтемелер

Егер бір беттен екінші бетке сілтеме жасау керек болса, онда беттің толық адресі (URL) керек емес. Мысалы, сізде бір папкада орналасқ ан екібет (бірінің аты 1_bet.html екіншісінің аты 2_bet.html) болсын. Бір беттенекіншісіне сілтеме арқ ылы ө ту ү шін тек сол беттің атын жаза саласыз.

Мысалы:

< a href=«2_bet.html»> Екінші бетке ө ту ү шін басың ыз< /a>

Егер осы 2_bet.html беті website деген папканың ішінде орналасқ анболса, ал біздің сілтеме басатын бірінші бетіміз (1_bet.html) папканың сыртында орналасқ ан болса, онда бетке сілтеме беретін жол былайжазылады.

< a href=«website/2_bet.html»> Екінші бетке ө ту ү шін басың ыз< /a>

Беттің ішіндегі сілтемелер

Беттің ішінде беттің ə рбір бө лігіне кө шіп отыратын сілтемелер жасауғ аболады. Ол ү шін id атрибутын жə не # белгісін қ олданамыз.

Сілтеме беретін элементті id атрибуты арқ ылы белгілеп аламыз. Мысалы:

< h1 id=«heading1»> Бастақ ырып< /h1>

Ендіосыэлементке, яғ нибастақ ырыпқ а # белгісіарқ ылысілтемежасаймыз. # белгісібраузергесілтеменің осыбеттің ішіндеболатынынхабарлайды. # белгісіненсоң бізсілтемеарқ ылыкө шетінтегтің id -ынжазамыз. Мысалы:

< a href=«#heading1»> Бастақ ырыпқ асілтеме< /a>

Поштағ а сілтеме жасау

Е-mail адресіне сілтеме жазуда алдың ғ ы сілтемелер сияқ ты жү зеге асырылады. Мысалы:

< a href=«mailto: info@zhanaoi.kz»> info@zhanaoi.kz поштасына хат жіберу < /a>

Бұ л жерде сайтқ а сілтемеден айырмашылығ ы https:// орнына mailto: жазылады.

Сурет 39. Поштағ а сілтеме

Суреттегі сілтеме

< html>

< head>

< title> Суреттегісілтеме< /title>

< /head>

< body>

< a href=«https://kk.wikipedia.org»>

< img src=«wiki.jpg» alt=«Қ азақ шаУикипедияғ асілтеме» width=«200»

height=«70»/>

< /a>

< /body>

< /html>

< ahref=«bas_bet.html»> < /a> тегі сайттың ішіндегібасбетке сілтеме жасайды. Яғ нисуреттің ү стінекурсорбасылғ анда, сілтемебойыншабасбеташылады.

Сурет 40. Суреттегісілтеме

Каскадтық стильді кестелер

CSS (Cascading Style Sheets – Каскадтық стильді кестелер) – HTML, XHTML жə не т.б. белгілеу тілдерінде жазылғ ан веб-беттердің сыртқ ыкө рінісін суреттейтін, ə рлейтін тіл болып есептеледі. Бұ л тілде веб-беттердің сыртқ ы кө рінісіндегі шрифтер, тү стер, жайғ асуы, блоктар сияқ тыэлементтерді жасауғ а болады. CSS-тің пайда болуының негізгі себебі, белгілеу тілдерінде (HTML, XHTML, XML жə не т.б.) веб-беттердің логикалық қ ұ рылымдары мен сыртқ ы кө ріністерін суреттеуді бір-біріменбө ліп қ арастыру болды. Себебі ə рқ айсысы бө лек болса, сайт жасағ анда да, сайттың кодын оқ ығ анда да тү сінуге ың ғ айлы болады.

Дә ріс 8. HTML-ге CSS жалғ ау. Сыртқ ы стильдік кестелер

Жоспар:

- HTML-ге CSS жалғ ау;

- Сыртқ ы стильдік кестелер;

- Ережелер жə не селекторлар;

- Селекторлар. Идентификатор бойынша селекторлар;

- Класс бойынша селекторлар;

- Мә н мə тіндік селектор;

- Селекторлар топтасуы;

- Псевдо элементтер жə не псевдо кластар.

Тарихы. 1990 жылдары Веб стандарттау істері қ арқ ынды дамыды жə не вебдизайнерлер ү шін сайт жасауда ортақ бір стандарт керек болды. Сө йтіп, HTML 4.01, XHTML жə не стандарт CSS пайда болды. «Каскадтық стильді кестелер» терминін 1994 жылы Хокон Виум Ли енгізді. Хокон Берт БоспенCSS-ті дамытып, оғ ан Ғ аламтор Консорциумы «Веб стандарты» деген атау берді.

Артық шылық тары:

- Анық бақ ылау кодтың кө лемін едə уір кемітеді жə не оны оқ уғ а ың ғ айлайды;

- CSS тілі кө мегімен HTML тілінде беруге болмайтын параметрлерді ашамыз;

- Мысалғ а алатын болсақ, сілтемелердің астындағ ы сызық ты алып тастауғ аболады;

- CSS арқ ылы веб-беттің сыртқ ы кө рінісін оң ай ө згертеміз. Кө п қ ұ жаттардың сыртқ ы кө рінісін бір кесте арқ ылы кө рсетуге болады. Мысалы, сіз 30 беткодтағ ы шрифттарды жасыл тү с еттің із делік. Бірақ уақ ыт ө ткен соң, кө к неқ ызыл тү ске ө згерткің із келіп, барлық 20 бетке кіріп, керекті атрибуттағ ы шрифті ө згертіп шығ асыз. Ал CSS тілі арқ ылы сол 20 беттің барлығ ын бірғ ана стильдер кестесінде ө згертуге болады;

- Қ ұ рамалы жə не жинақ талғ ан дизайн техникасы. CSS тілінде сайт версткасы деген ұ ғ ым бар.

HTML-ге CSS жалғ ау. Сыртқ ы стильдік кестелер

Қ арапайым HTML парақ ша жасап, мысал ү шін оғ ан мынадай кодсалың ыз: < html>

< head>

< title> HTML-ге CSS жалғ ау< /title>

< /head>

< body>

< h1> Мынаубіріншідең гейлітақ ырып< /h1>

Бұ л – мə тіннің орны

< h2> Мынауекіншідең гейлітақ ырып< /h2>

Бұ л – мə тіннің орны

< /body>

< /html>

Енді блокноттан жаң апарақ ша ашып, оның атын style.css деп жазып, html -парақ ша орнатылғ ан папкағ а сақ таң ыз:

Сурет 41. style.css файлын сақ тау

Ол біздің стильдеріміздің парағ ы болады. Енді біз style.css парағ ын html-парақ қ а жалғ ауымыз керек. Ол ү шін html-де сыртқ ы файлдарды жалғ ауғ а жауап беруші < link> тегі бар. Осы тегті біздің html-парағ ымызғ а қ осамыз:

< html>

< head>

< title> HTML-ге CSS жалғ ау < /title>

< link rel=«stylesheet» type=«text/css» href=«style.css»>

< /head>

< body>

< h1> Мынау бірінші дең гейлі тақ ырып< /h1>

Бұ л жер мə тіннің орны

< h2> Мынау екінші дең гейлі тақ ырып< /h2>

Бұ л жер мə тіннің орны

< /body>

< /html>

Ережелер жə не селекторлар

CSS-тің басқ а тілдер сияқ ты ө зінің синтаксисі бар. Онда элемент те, параметр де, тег те жоқ. Бұ л тілде тек ережелер бар. Ереже селектордан жə не фигуралы жақ шаның ішінде болатын стиль жариялайтын блоктан тұ рады:

Сурет 42. CSS тілінің ережесі

Cтиль жариялайтын блоктың ө зі сипаттан жə не оның мә нінен тұ рады:

Сурет 42. Cтиль жариялайтын блок