У таблицы может быть заголовок

Тапсырма

Мысал 1

Мынадай мәтін жазу қажет:

Иванов И.И.
Мәскеу қ,
Декабристер к,
4 үй, 2 п, кв.9

Мысал 2

Мәтінді жазыңыз:Аяз және күн, Ерекше күн,

Сен тағы қалғып отырасың,

әдемі досым.

Тақырып 2. Тегалар тізімі.

Мақсаты: HTML тілінде тегтарды пайдаланып тізім жасау.

Жоспар:

1 Нөмірленген тізім

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

3 Салынған тізімдер

4 Анықтамалардың тізімі

HTML- да тізімнің негізгі үш түрі болады:

нөмірленген
нөмірленбеген
тізімнің жазылуы

Тегімен әртүрлі тізімдерді қолдана немесе бір ішіндегі басқалардың қайталануын сіздер ішіне салынған тізімдерді жасай алаcыздар. Ол үшін жай ғана бір буынын (старттық және аяқтайтын) басқа ішкі тегіларын орналастыру қажет. Ішкі салынған элементтердің маркерлері тізім элементтерін белгілеуші маркерлеріне ие болатын броузерден тәуелді.

1 Нөмірленген тізім.

Броузер нөмірленген тізімінде ретпен элементтердің нөмірлері автоматты түрде салады. Ол мынаны білдіреді, егер сіз нөмірленген тізімнен бір немесе бірнеше элементті өшірсеңіз, онда қалған нөмірлер автоматты түрде есептелген болатын.

Нөмірленген тізім < OL > тегімен басталады және </OL > тегімен аяқталады. Әрбір тізім элементі < LI > тегімен басталады. Мысалы:

<OL>
<LI> Програмалық
<LI> Алгоритмдік
<LI> Проектілеу
</OL>

Программалық
Алгоритмдік
Проектілеу

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

<OL TYPE=A|a|I|i|1 START=n>

Мұнда:

TYPE

Есептеуіш түрі:

A – үлкен латын әріптер (A,B,C...)

a – кішкентай латын әріптер(a,b,c...)

I – үлкен рим сандары (I,II,III...)

i – кішкентай рим сандары (i,ii,iii...)

1 – қарапайым сандар (1,2,3...)

START=n

Санау басталатын сан

Мысалы:

<OL TYPE=I START=15>
<LI> Программалық
<LI> Алгоритмдік
<LI> Проектирлеу
</OL>

Программалық

Алгоритмдік

Проектирлеу

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

Әдетте броузер нөмірленбеген тізімдерге арнайы маркерлері тізім элементтерінде қолданылады. Маркер түрі, ереже сияқты, пайдаланушысы броузер жөндейді.

Нөмірленген тізім < UL > тегімен басталады және </UL > тегімен аяқталады. Әрбір тізім элементі < LI > тегімен басталады. Мысалы:

<UL>
<LI> Программалау
<LI> Алгоритмдеу
<LI> Жобалау
</UL>

Программалау

Алгоритмдеу

Жобалау

<UL> тегі мынадай параметрлерге ие:

<UL TYPE=disc|circle|square>

Тегтің типі< UL > үндемеумен түр сияқты таңбалағыш сырт пішіні анықтайды (disc), дөңгелек (circle) немесе шаршы (square). мысалы:

<UL TYPE=square>
<LI> Программалау
<LI> Алгоритмдік
<LI> Проектирлеу
</UL>

Программалау

Алгоритмдік

Проектирлеу

3 Салынған тізімдер.

Ішіне салынған тізімдерге мысалы көрсетеміз:

<HTML><HEAD><TITLE> Қызметкерлер тізімі </TITLE></HEAD>
<BODY> <H2> Біздің фирманың қызметкерлерінің тізімі </H2>
<H3> Құратырылған: 1996 жыл 30 шілде

</H3>

Біздің компанияның тізімдер құрамында қызметкерлерінің аты-жөні жазылады.

<P>

Тізім тек қана қызмет жағдайында ғана қолдануы тиіс. <P>

<OL>
<LI> Дирекция
<UL>
<LI> Иванов И.И.
<LI> Петров К.В.
</UL>
<LI> Бөлім маркетингі
<UL>
<LI> Варшавская Е.Л.
<LI> Самсонов Д.М.
</UL> </OL></BODY></HTML>

Міне, сіздер броузер экранында көресіздер:

Біздің фирманың қызметкерлерінің тізімі

Құратырылған: 1996 жыл 30 шілде

Біздің компанияның тізімдер құрамында қызметкерлерінің аты-жөні жазылады.

<P>

Тізім тек қана қызмет жағдайында ғана қолдануы тиіс.

Дирекция

Иванов И.И.

Петров К.В.

Отдел маркетинга

Варшавская Е.Л.

Самсонов Д.М.

Тізім элементі <LI>

<LI> тегі мынадай параметрлерге ие:

<OL TYPE=disc|circle|squade> или < OL TYPE=A|a|I|i|1 VALUE=n>

сол уақытта тізімде қандай түрі болса, соған байланысты.

TYPE

Маркер түрі (см. <UL>) немесе счетчик (см.OL)

VALUE=n

Нөмірленген тізім элементіне арналған мағына (оның нөмірі). Бүкіл алдындағы тізім элементтерінің нөмірлері осы нөмірмен болып саналады.

Мысалы:

<OL TYPE=I START=15>
<LI> Программалау
<LI TYPE=i VALUE=25> Алгоритмдік
< Алгоритмдік

Жобалау

LI> Жобалау
</OL>

Программалау

4 Анықтамалардың тізімі.

Анықтамалардың тізімі <DL >тегімен басталып және </DL > тегімен аяқталады. “Термин” – “описание” тізімдерді түріқазіргі тізім үшін қызмет атқарады. Әрбір термин <DT> тегінен және <DD> суреттеу тегінен басталады. мысалы:

<DL>
<DT> <B> Бөлім маркетингі </B>
<DD> Көкініс және қызмет қозғалысымен айналасатын бөлім

<DT> <B>Қаржы бөлімі </B>
<DD> Берілген бөлім барлық қаржыоперациялармен айналасады.
<DT> <B> Кадрлар бөлімі </B>
<DD> Берілген бөлім жаңа фирманың қызметкерлерін алуымен және санақпен айналасып, еңбек демалыстарын орналастырумен, емханалық парақтар іздестірумен және т.б

</DL>

Маркетинг бөлімі

Берілген бөлім азық-түлік және көмек көрсету қозғалысмен айналасады.

Қаржы бөлімі

Берілген бөлім барлық қаржыоперациялармен айналасады.

Әдебиеттер: 1, 25-34 бет; 3, 18-26 бет.

Тапсырма

Берілген бөлім фирманың жаңа қызметкерлерін алуымен және санақпен айналысып, еңбек демалыстарын орналастырумен, емханалық парақтарды іздестірумен және т.б.

Мысал 1

Мынадай нөмірленген тізім жасау қажет:

Иван;

Данила;

Светлана

Мысал 2

Өз беттеріңізбен мынадай нөмірленген тізім жасау керек:

апельсиндер

персиктер

виноград

Мысал 3

Осындай анықтамалар тізімін жасаңдар:

Маркетинг бөлімі

Тап осы бөлім өнімдердің жылжуымен және қызмет қозғалысымен шұғылданады

Қаржы бөлімі

Берілген бөлім барлық қаржы операцияларымен айналысады

Кадрлардың бөлімі

Тап осы бөлім есеппен және фирма жаңа қызметкерлерінің терімімен, демалыстардың таратуымен шұғылданады, ауруханалық парақтарды іздестіруімен және т.б.

Мысал 4

Өз еркімен міне мынадай ішіне салынған тізім жасаңыздар:

Біздің фирмамыздың қызметкерлерінің тізімі

Құрастырылған:30 қараша 2000 жыл

Тап осы тізім біздің компанияның барлық қызметкерлерінің аты-жөнінен тұрады.

Тізім тек қана қызмет жағдайында қолдануы тиіс.

Дирекция

Иванов И.И.

Петров К.В.

Маркетинг бөлімі

Варшавская Е.Л.

Самсонов Д.М.

Тақырып 3. Текстік және графикалық сілтемелер.

Мақсаты: HTML тілінде тегтарды пайдаланып текстік және графикалық сілтемелер жасау.

Жоспар:

1 Гипермәтіндік сілтемелер

2 HTML-құжаттағы сілтеме құрылымы

3 Құжаттың ішіндегі нүктелерге сілтемелер

1 Гипермәтіндік сілтемелер.

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

URL рұқсат етілген абсолюттік жол бойынша арнайы орынға көрсете алады немесе рұқсат етілген ағымды жолдағы құжатқа көрсете алады, бұл көбінесе структураланған үлкен WEB-сайттарды құру кезінде қолданылады.

HTML гипертекстік сілтемелерді және HTML-құжаттың ішіндегіжелілік сервиске сілтемелерді ұсыну үшін URL-ды (Uniform Resource Locator) қолданады. URL-дың бірінші бөлімі (қос нүктеге дейін) рұқсат етудің әдістерін немесе желілік сервисті суреттейді. URL-дың екінші бөлімі (қос нүктеден кейін) рұқсат етудің әдістеріне байланысты түсіндіруге болады. Әдетте қос нүктеден кейінгі екі тік слэш машинаның атын береді:

method :// machine-name /path/foo.html

HTTP протоколды қолданатын www.softexpress.com серверінен HTML-құжатты index.html шақыруды келесі мысал көрсетеді:

http://www.softexpress.com/index.html

Uniform Resource Locator-да келесі формат бар:

method://servername:port/pathname#anchor

URL-дың бірнеше компонентін өрнектейміз:

METHOD - Берілген URL-ды түсіндіру кезінде орындалатын операцияның аты.

Жиі қолданылатын әдістер:

file - локальдық дисктан файлды оқу. Файлдың аты қолданушының локальдық машинасымен түсіндіріледі. Берілген әдіс қолданушының машинасында орналасқан қандай да бір файлдың көрінуі үшін қолданылады.

Мысалы:

file:/home/alex/index.html – қолданыстағы машинадағы /home/alex каталогынан index.html файлын көрсетеді.

http - желідегі WEB-параққа HTTP-протоколды қолдану арқылы кіруді рұқсат етеді.

ftp - анонимді FTP-серверден файлдың сұранысы. Мысалы:

ftp://hostname/directory/filename

mailto - көрсетілген қолданушы мен хосты бар поштплық сессияны белсенді қылады. Мысалы:

mailto:info@softexpress.com – егер броузер электрондық поштаның қосылуын қолдаса, softexpress.com машинасындағы info қолданушыға хабарламаны жіберу сессиясын белсенді қылады. mailto әдісі қос нүктеден кейінгі слэштің көрсетілуін қажет етпейді (әдетте қос нүктеден кейін абоненттің электрондық мекен-жайы келеді).

telnet - telnet қызметіне жүгіну.

news - егер броузер оны қолдаса, хабарлар қызметін шақыру.

Мысалы: news:relcom.www.support

SERVERNAME

Машинаның толық желілік атын өрнектейтін міндетті емес параметр. Мысалы:

www.softexpress.com – СофтСервис фирма серверінің толық желілік аты.

Егер сервердің аты көрсетілмесе, онда сілтеме локальдық болып табылады және URL-дағы ары қарай көрсетілген толық жол берілген сілтемесеі бар HTML-құжат алынған машинада есептелінеді. Машинаның символдық атының орнына IP-адрес қолданылуы мүмкін, бірақ бұл ішкі желідегі бекітілген локальдық мекен-жайдың қиылысу мүмкіндігінен ұсынылмайды.

WEB-сервер жұмыс жасайтын TCP портының номері. Егер порт көрсетілмесе, онда қалыпты түрде 80 порты қолданылады. Берілген параметр (port) URL-дың басым көбінде қолданылмайды.

Құжатқа URL-ды түсіндіру нәтижесінде шақырылатын бөлек немесе толық жол. Әр түрлі WEB-серверлер құжатқа рұқсат етілген жолды түсіндіру үшін әр түрлі үйлесімділенген. Мысалы, CGI скриптін қолданғанда (орындалатын бағдарламлардың), әдетте олар жолы WEB-сервердің арнайы параметрлерінде жазылған бір немесе бірнеше белгіленген каталогтарда жиналады. Берілген каталогтар үшін URL-да қолданылатын WEB-серверден арнайы логикалық жол бөлінеді. Егер WEB-сервер берілген жолды көрсе, онда сұралған файл орындалған модуль ретінде түсіндіріледі. Болмаған жағдайда, сұралған файл қарапайым берілгендердің файлы сияқты түсіндіріледі, егер тіпті ол орындалатын модуль болса да.

Мысалы:

http://www.softexpress.com/cgi-win/handle.exe

Берілген мысалда HTTP-сервер машинадағы www.softexpress.com желілік атымен орналасқан handle.exe аты бар CGI-скриптті шақыруы тиіс. - /cgi-win/ - берілген скрипт жолы шын мәнінде виртуалды жол болып табылады (орындалатын модуль үшін белгіленген сервер болып). Жолды өрнектегенде синтаксис тәрізді UNIX қолданылады, мұнда DOS және Windows-қа қарағанда кері слэштардың орнына тік слэштар қолданылады. Егер машинаның желілік атынан кейін әлбетте құжаттың аты келсе, онда ол жойылған машинаның түпкі каталогында орналасуы керек немесе (жиі болатын) түбір ретінде WEB-сервермен белгіленген каталогта. Егер де URL машинаның желілік атымен аяқталса, онда құжат ретінде аты WEB-сервердің күйге келтіруінде орналасқан жойылған машинаның түпкі каталогынан құжат сұранылады (әдетте бұл index.html).

2 HTML-құжаттағы сілтеме құрылымы.

Броузер URL-да сілтемені шығару үшін HTML-құжатта URL-ды арнайы тэгтармен белгілеу қажет. Не істейтінін көрсететін HTML синтаксисі келесі:

<A HREF=" URL "> сілтеме-сияқты-жарқылдайтын-мәтін </A>

<A HREF=" URL "> тэгі сілтеменің суреттеуін ашады, ал </A> тэгі оны жабады. Екі берілген тэгтардың арасында орналасқан кез-келген мәтін арнайы Web-броузер бейнемен жарқылдайды. Әдетте бұл мәтіннің асты сызылған және көк түспен (немесе қолданушының басқа берген түсімен) белгіленген болады. URL-ды белгілейтін мәтін броузермен өрнектелмейді, ал сілтемені белсенді қылғандағы оларға жазылған әрекеттерді орындау үшін ғана қолданылады (әдетте жарқылдайтын немесе асты сызылған мәтінге тышқанмен шерткенде). HTML-құжат сегментінің мысалы:

Для получения дополнительной информации смотри
<A HREF="http:/www.softexpress.com/index.html> страницу компании СофтСервис </A>

3 Құжаттың ішіндегі нүктелерге сілтемелер.

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

Мұндай сілтемені құру үшін келесі қадамдарды орындау қажет:

Бөлімнің маркерін құрыңдар. Берілген маркердің синтаксисі келесі:

<A NAME="named_anchor"> борузердің-бірінші-жолында-өрнектелетін-мәтін </A>

Берілген маркерге сілтемені құрыңдар: <A HREF="#named_anchor"> Мәтін </A>

Әдебиеттер: 1, 25-34 бет; 3, 18-26 бет.

Тапсырма

Мысал 1:

Қолданушы тышқанмен "Раздел 1" жолына шерткенде, броузер лезде 1 бөліміне өтеді.

Қолданушы тышқанмен "Раздел 2" жолына шерткенде, броузер лезде 2 бөліміне өтеді.

Список разделов

Раздел 1

Раздел 2

Раздел 1

Текст раздела 1

Раздел 2

Текст раздела 2

Тақырып 4. HTML – құжатының ішіндегі графика.

Мақсаты: HTML – құжатының ішіндегі графика, суреттер, фотографиялармен жұмыс істеу.

Жоспар:

1 HTML-құжаттарындағы графика

2 Фонды суреттер

3 Тік сызықтар

1 HTML-құжаттарындағы графика.

Web-тің ең бірінші тартымдылығы – HTML-құжатының сілтемелерінің графикалық және өзге үлгілерінің қосу мүмкіншілігі. Бұнын бәрі <IMG...ISMAP> тегтерінің көмегі аркылы жасалады. Осы тегті пайдалану құжаттардың сыртқы түрін және қызметтілігін едәуір жақсартады.

HTML-құжаттарындағы графиканы пайдаланудың екі түрі бар. Біріншісі- құжатқа графикалық образды енгізу, ол пайдаланушыға контекстегі құжатттың басқа да элементтердің бейнесін көруге мүмкіндік береді. Құжаттарды жобалау кезінде жиі пайдаланатын техника "inline image" деп аталады.

Тегтің синтаксисі:

<IMG SRC=" URL " ALT=" text " HEIGHT=n1 ALIGN= top|middle|bottom|texttop ISMAP>

Синтаксис және қалыпты URL сияқты міндетті параметрі болып табылады. Осы URL броузерге сурет қайда екенін көрсетеді. Сурет броузермен сүйемелденетін графикалық форматта сақталады. Қазіргі күні GIF және JPG форматтары броузерлермен сүйемелденіледі.

ALT="text"

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

HEIGTH=n1

Осы міндетті емес параметр пиксельдағы суреттің биіктігін көрсету үшін пайдаланылады. Егер осы параметр көрсетілмесе, онда суреттің биіктігінің соны пайдаланылады. Бұл параметр бейнені тік созуға немесе қысуға мүмкіндік береді, оның нәтижесінде құжаттың сыртқы түрі анығырақ белгіленеді. Бірақ, кейбір броузерлер осы параметрді сүйелдемейді. Бір жағынан, сіздің клиентіңіздің экранды рұқсаты сізден өзгеше көрінуі мүмкін. Сондықтан графикалық объектің абсолюттік көлеміне бағыт берген кезде мұқиятты болыңыз.

WIDTH=n2

Параметр бұрынғы сияқты міндетті емес. Сондықтан пиксельдағы суреттің абсолюттік еніне бағыт бұруға мүмкіндік береді.

ALIGN

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

ISMAP

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

Осы тегті пайдалануға мысал келтірейік:

< IMG SRC="http://www.softexpress.com/images/nekton.jpg" ALT="СофтСервис лого" ALIGN="top" ISMAP>

HTML 2.0 версиясымен тегте <IMG> қосымша параметрлер пайда болады:

Жаңа параметрлер:

BORDER - Осы параметр авторға суреттің маңайындағы рамкасының енін белгілеуге мүмкіндік береді..

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

HSPACE VSPACE - тәрізді,бірақ тік.

Фонды суреттер.

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

Фонды суреттің сипаттамасы BODY тегіне қосылады және мына образда көрінеді:

< BODY BACKGROUND=" picture.gif ">

Қалыпты түстерге бағыт жасау

HTML-авторлары ертерек алдын ала белгіленген құжаттың, әдетте мәтін мен сілтеме фонының түсін пайдалануды ұнатады. Осы түстерді бағыттау үшін <BODY> тегіне қосымша параметрлерді қосу қажет:

< BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

Онда параметрлердің біреуі элементтің түсін белгілейді. Осы параметрлерді сипаттаймыз:

BGCOLOR - Құжат фонының түсі

TEXT - Құжаттың жай мәтінінің түсі

LINK - Сілтемелердің түсі

Түс схема бойынша он алтыншы форматтағы алты санмен бағытталынады RGB (Red, Green, Blue). Түс #000000 қараға, ал түс#FFFFFF – аққа сәйкес келеді. Мысалы,

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Осы жол құжаттың ақ түсін, қара түсті мәтінді және күміс түсті сілтемелерді белгілейді.

3 Тік сызықтар.

<HR> тегін пайдалана отырып, Сіз мәтінді тік сызықпен бөле аласыз.

Тегтің форматы:

<HR SIZE=number WIDTH= number|percent ALIGN= left|right|center NOSHADE >

Тегтің параметрлері:

SIZE - Пиксельдағы сызықтың қалыңдығы.

WIDTH - Пиксельдағы сызықтың ені немесе броузер терезесінің ені пайыз есебінде.

ALIGN - Экранда орналасуы (солға | орталық бойынша | оңға).

NOSHADE - Көлеңкелі 3D түрінде сызық үндемеу бойынша ұсынылған. NOSHADE жай бір үнді қара тіліммен сызықты ұсынуға мүмкіндік береді.

RGB түсінің кейбір он алтыншы мағыналы мысалдары: қызыл, көк және жасыл түсті басқыштаушылықтар

вид	код	вид	код	вид	код	вид	код	вид	код	вид	код
	#010000		#800000		#000100		#008000		#000001		#000080
	#100000		#900000		#001000		#009000		#000010		#000090
	#200000		#A00000		#002000		#00A000		#000020		#0000A0
	#300000		#B00000		#003000		#00B000		#000030		#0000B0
	#400000		#C00000		#004000		#00C000		#000040		#0000C0
	#500000		#D00000		#005000		#00D000		#000050		#0000D0
	#600000		#E00000		#006000		#00E000		#000060		#0000E0
	#700000		#FF0000		#007000		#00FF00		#000070		#0000FF

Жолды литералдардың көмегімен түсті бағыттау.

Пайдаланушылар ыңғайлы болу үшін кейбір түстерге және олардың үйлестеріне ат берілді. Ол арқылы барлық браузерлермен танылады және олардың көпшілігін бағыттауға мүмкіндік пайда болды. Кестеде төменде көрсетілген түстердің атаулары мысал ретінде көрсетіледі:

вид	имя	вид	имя	вид	имя	вид	имя
	White		Red		Orange		Yellow
	Green		Blue		Purple		Black
	Aliceblue		Antiquewhite		Aqua		Aquamarine
	Azure		Beige		Bisque		Blanchedalmond
	Blueviolet		Brown		Burlywood		Cadetblue
	Chartreuse		Chocolate		Coral		Cornflowerblue
	Cornsilk		Crimson		Cyan		Darkblue
	Darkcyan		Darkgoldenrod		Darkgray		Darkgreen
	Darkkhaki		Darkmagenta		Darkolivegreen		Darkorange
	Darkorchid		Darkred		Darksalmon		Darkseagreen
	Darkslateblue		Darkslategray		Darkturquoise		Darkviolet
	Deeppink		Deepskyblue		Dimgray		Dodgerblue
	Firebrick		Floralwhite		Forestgreen		Fuschia
	Gainsboro		Ghostwhite		Gold		Goldenrod
	Gray		Greenyellow		Honeydew		Hotpink
	Indianred		Indigo		Ivory		Khaki
	Lavender		Lavenderblush		Lemonchiffon		Lightblue
	Lightcoral		Lightcyan		Lightcoldenrodyellow		Lightgreen
	Lightgray		Lightpink		Lightsalmon		Lightseagreen
	Lightskyblue		Lightslategray		Lightsteelblue		Lightyellow
	Lime		Limegreen		Linen		Magenta
	Maroon		Mediumaquamarine		Mediumblue		Mediumorchid
	Mediumpurple		Mediumseagreen		Mediumslateblue		Mediumspringgreen
	Mediumturquoise		Mediumvioletred		Midnightblue		Mintcream
	Mistyrose		Navajowhite		Navy		Oldlace
	Olive		Olivedrab		Orangered		Orchid
	Palegoldenrod		Palegreen		Paleturquoise		Palevioletred
	Papayawhip		Peachpuff		Peru		Pink
	Plum		Powderblue		Rosybrown		Royalblue
	Saddlebrown		Seagreen		Seashell		Sienna
	Silver		Skyblue		Slateblue		Slategray
	Snow		Springgreen		Steelblue		Tan
	Teal		Thistle		Tomato		Turquoise
	Violet		Wheat		Whitesmoke		Yellowgreen

Әдебиеттер: 1, 54-63 бет; 2, 38-46 бет.

Тапсырма

Мысал 1:

Бір құжаттын ішіне екі суретті қою керек.

Мысал 2:

Фон бір суретті болу қажет және бір сурет фонның үстіне қою керек.

Тақырып 5. Сіздердің HTML-құжатыңызға стильдердің қосуы.

Мақсаты: HTML – құжатының стильдерді қосуы.

Жоспар:

1 Стильдерінің қысқа тізімі

2 Арнайы HTML тегалары

1 Стильдерінің қысқа тізімі.

HTML сіздердің құжаттарыңызда мәтіндік хабар бөлісіне арналған әріптердің әртүрлі стильдерді қолдануға рұқсат етеді. Көпшілікке сүйеніш табатын броузерлер стильдерінің қысқа тізімі:

· bold (жуан)

· italic (жантайған)

· mono spaced (type writer – бекітілген әріптердің қолдануымен)

Сіздер стильдердің әртүрлі түрлерін коса алаcыздар, мысалы жуан және жантайған.

Стиль	Элемент немесе тег	Нәтиже
Bold	<B> Бұл мәтін жуан </B>	Бұл мәтін жуан
Italic	<I> Бұл мәтін жантайған </I>	Бұл мәтін жантайған
Mono spaced	<TT> Бұл мәтін непроп. әріппен </TT>	Бұл мәтін непроп. әріппен

Стильдердің қиыстыруы сіздерге бірнеше элемент бір жолға әртүрлі стильдер көрсетуге рұқсат етеді, мысалы:

<b>Жизнь</b> - <i>это <b>песня!</b></i>

Жизнь - это песня!

Қосымша стильдер:

· big (үлкен)

· small (кішкентай)

· sub (төменгі индекс)

· sup (жоғарғы индекс)

Стиль	Элемент немесе тег	Нәтиже
Big	Бұл мәтін <BIG> үлкен </BIG>	Бұл текст үлкен
Small	Бұл мәтін <SMALL> кішкентай </SMALL>	Бұл текст кішкентай
Sub	Бұл мәтін <SUB> төменгі индекс </SUB>	Бұл текст төменгі индекс
Sup	Бұл мәтін <SUP> жоғарғы индекс </SUP>	Бұл мәтін жоғарғы индекс

Әріп мөлшері < FONT SIZE >

Сіздер тега көмегімен әріп мөлшерін өзгерте алаcыздар:

< FONT SIZE =+|- n >

Әріп мөлшері 1 ден 7-ге шейін бола алады. Сіздер әріп мөлшерін цифрмен немесе салыстырмалы негіздік мағынасын (жалпы -3) дұрыс немесе бұрыс жаққа түзу көрсете алаcыздар.

< BASEFONT SIZE=n >

Мысалы:

< p > және
<font SIZE=+1>з</font><font SIZE=+2>м</font>
<font SIZE=+3>е</font><font SIZE=+4>н</font>
<font SIZE=+3>е</font><font SIZE=+2>н</font>
<font SIZE=+1>и</font>е</p>

изменение

әріп түсі < FONT SIZE >

Сіздер тега көмегі жанында әріп түсін өзгерте алаcыздар:

< FONT COLOR="#xxxxxx >

Түс - әрбір мөлшерлілік нұсқауы он алтылық түс компоненттері арқылы RGB- форматта көрсетіледі (Red - Green - Blue). Мысалы,, ақ түс - " 000000 "белгіленеді, қара -" FFFFFF ", көк - 0000FF және т.б.

<FONT COLOR="#FF0000">
Қызыл </FONT>
<FONT COLOR="#00FF00">
Жасыл </FONT>
<FONT COLOR="#0000FF">
Көк </FONT>

Қызыл Жасыл Көк

Арнайы HTML тегалары.

Келесі тегалар сіздерге HTML - құжатыңызды көбірек функционалды істеуге рұқсат етеді.

Тег <ADDRESS> Құжат авторы мен оның мекенжайдың бөліп алу үшін қолданылады (мысалы, e-mail).

Синтаксис:

<ADDRESS> Адрес-авторлар </ADDRESS>

Escape – тізбектер

Кейбір символдар HTML-де басқарушы символдар болып табылады және құжатта тікелей қолдануға болмайды:

· сол жақ бұрыштық жақша «<»

· оң жақ бұрыштық жақша «>»

· амперсанд «&»

· екілік тырнақша «”»

Документте символдарды қолдану үшін, оларды escape-ті тізбектей ауыстыру керек.

Арнайы символдарды белгілеу escape-тізбектерінің арнайы белгіленетін символары үлкен көлемде бар, мысалы «©» © және &reg таңбаның көрсеткіші; ® таңбасы үшін, HTML 2.0 көрсетілгендер үшін.

7-биттік каналдар арқылы мәтіндік файлдарды ұлттық тілде жіберу үшін escape-тізбектерінің символдық кестелерінің 2-ші бөлімінің негізі – ауыстыру символдары болып табылады.

Әдебиеттер: 2, 54-63 бет; 4, 38-46 бет.

Тапсырма

Мысал 1:

Тексті Font тег арқылы форматтау.

Мысал 2:

Алдында сақталған файлдарды Font тег арқылы жазу қажет.

Тақырып 6. HTML формасы.

Мақсаты: WEB-броузер формамен жұмыс істеу.

Жоспар:

1 Формадағы деректерді беру әдісі

2 SELECT тегі

3 Форманың көмегімен файлдарды жіберу

1 Формадағы деректерді беру әдісі.

Шыққан мәнді қайтаратын арнайы форманы толтыратын, кейбір WWW browser қолданушыға өзінің WWW-серверінде кейбір әрекеттерді орындауға рұқсат етеді. WEB-броузер формамен жұмыс істегенде енгізу өрісі checkboxes, radiobuttons, түсетін меню, айналдыратын тізімдер, батырмалар және тағы с.с арнайы GUI экрандық элементтен құралады. Қолданушы форманы толтырып "Подтверждение" (SUBMIT –құжаттың суреттеуі бойынша шақырылатын арнайы батырма түрі), ақпарат, формаға пайдаланушымен енгізілген HTTP-серверге өңдеу үшін және басқа бағдарламалармен алмасу үшін жіберіледі, сервер арқылы CGI (Common Gateway Interface) интерфейсімен жұмыс жасайды.

Сіз форманы суреттеген кезде берілгендерді енгізудің әрбір элементі <INPUT> тегін қолданады. Қолданушы берілгендерді форманың элементіне орналастырған кезде, ақпарат берілген элементтің VALUE бөлімінде енгізіледі.

Барлық формалар <FORM> тегінен басталады және </FORM> тегімен аяқталады.

<FORM METHOD="get|post" ACTION="URL"> Элементы_формы_и_другие_элементы_HTML</FORM>

METHOD - Формадағы деректерді беру әдісі. Әдістің қолданылуына байланысты нәтижелерді формаға деректер түрінде берудің екі жолы бар:

GET: Формадағы мәлімет форма тақырыпшасында көрсетілген URL соңына қосылады. CGI-бағдарламасы (CGI-скрипт) формадан QUERY_STRING өзгеру ортасы параметрі түрінде деректерді алады. GET әдісі қолдануға ұсынылмайды.

POST: Берілген әдіс URL-ға жүгінгенде форма туралы барлық мәліметті береді. CGI-бағдарламасы мәліметтерді формадан қалыпты енгізе алады. Сервер қалыпты енгізуге деректерді жіберіп болғаны туралы хабар жіберілмейді; оның орнына оқылуға керек деректерді анықтау үшін CONTENT_LENGTH өзгеру ортасы қолданылады. Берілген әдіс қолдануға ұсынылады.

ACTION

ACTION форманы өңдеу үшін шақырылатын URL-ды сипаттайды. URL берілгендерді әрқашан берілген форманы талқылайтын CGI- бағдарламаға сілтемелейді.

<TEXTAREA> тегі қолданушыға бірнеше жолдан тұратын ақпаратты енгізу үшін қолданылады (еркін мәтін). <TEXTAREA> тегінің қолданылуына мысал:

Москва,

Дмитровкое шоссе,

д.9Б, офис 448

</TEXTAREA>

<TEXTAREA> тегінің ішінде қолданылатын атрибуттар енгізілетін мәннің атын және сыртқы келбетін суреттейді. </TEXTAREA> тегі ең басында енгізу өрістері бос болған кездің өзінде қажет болады. Атрибуттардың мағынасы:

NAME – енгізу өрісінің аты
ROWS – символмен берілген енгізу өрісінің биіктігі

· COLS – енгізу өрісінің ені символмен

Егерде сіз енгізу өрісінде өсуі бойынша қандай да бір мәтін берілгенін қалаған болаңыз, онда оны <TEXTAREA> және </TEXTAREA> тегтарының арасына орналастыру қажет.

<INPUT> тегі мәтіннің бір жолын немесе бір сөзін енгізу үшін қолданылады.

Тег атрибуттары:

· CHECKED - CHECKBOX немесе RADIOBUTTON таңдалатынын білдіреді.

· MAXLENGTH – Пайдаланушылар енгізу өрісіне қолдана алатын символдар санын анықтайды. Рұқсат етілетін символдардың саны өскен кезде броузер жаңа символ енгзігуді дыбыстық сигналмен жүргізуге талпынып оның енгізілуіне рұқсат етпейді. SIZE атрибутымен шатыстырмау қажет. Егер MAXLENGTH атрибуты SIZE атрибутынан артық болса, онда өрісте скроллинг пайда болады. MAXLENGTH по умолчанию бойынша мағынасы шексіздікке тең.

NAME – енгізу өрісінің аты. Берілген ат өрістің осы өріске пайдаланушылармен енгізілген мәліметтерді сіз ала алатын ерекше идентификаторы ретінде қолданылады.
SIZE – символмен берілген экрандағы енгізу өрісінің визуалды өлшемі.
SRC – URL суретке сілтемелеуші (IMAGE атрибутымен бірігіп қолданылады).
TYPE – енгізу өрісінің типін білдіреді. По умолчанию бойынша бұл мәтіннің бір жолының қарапайым енгізу өрісі. Қалған типтер анық көсетілуі қажет:

CHECKBOX

Қарапайым логикалық мәндерде (BOOLEAN) қолданылады. Шақырылған CGI-бағдарламаға берілетін, ON немесе OFF мәндерін қабылдай алатын, берілген өріс атымен ассоциированное мән.

HIDDEN

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

IMAGE

Берілген өріс типі сізге графикалық бейнені өріс атымен байланыстыруға рұқсат етеді. Тышқанның көмегімен суреттің кез келген жеріне басатын болсақ, дереу ұқсас CGI-бағдарлама шақырылады. NAME ауысуына меншіктелген мән мынадай түрде көрінеді- екі жаңа ауысу құрылады: біріншісі NAME өрісінде атының соңында.х енгізуді сипаттауды білдіретін өріс аты. Бұл ауысуға Х-пиксельмен сипатталатын нүкте координатасы енгізіледі. (координат басы ретінде суреттің жоғарғы бұрышын есептеу), ал қарама қарсы атпен аталатын NAME өрісінің соңында.у енгізуді сипаттайтын өріс аты У-кординатаны білдіреді. VALUE атрибутының барлық мәндері қабылданбайды. Суреттің бейнелеуі SRC атрибуты арқылы пайда болады және синтаксисі бойынша <IMG> тегімен сәйкес келеді.

PASSWORD

TEXT атрибуты сияқты, бірақ пайдаланушымен енгізілген мәндер броузермен экранда көрінбейді.

RADIO

Берілген атрибут бірнеше альтернативтерден бір мән шығаруға мүмкіндік береді. Альтернативтерді құру үшін сізге TYPE="RADIO" атрибутымен бірнеше енгізу өрістерін құру қажет. Ол өрістер VALUE атрибутының әр түрлі мәндерімен, бірақ NAME атрибутының бірдей мәндерімен болуға тиіс. В CGI-бағдарламаға NAME=VALUE типінің мәні жіберіледі. VALUE атрибуты дәл қазіргі уақытта таңдалған (белсенді) VALUE атрибутының мәнін қабылдайды. RADIO енгізу өрісінің типінің біреуін таңдаған кезде қалған барлық енгізу өрістері сол атпен (NAME атрибуты) автоматты түрде экранда тандалмаған болады.

RESET

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

SUBMIT

Берілген тип басқан кезде форманың бөлімінде бейнеленген CGI-бағдарлама (немесе URL) шақырылатын батырма. Атрибут VALUE атрибуты батырмада көрінетін жолды бейнелей алады.

TEXT

Берілген енгізу өрісінің типі біржолдық енгізу өрісін сипаттайды. MAXLENGTH және SIZE атрибуттарын енгізіліліп жатқан мәннің максималды ұзындығын символмен анықтауға және экрандағы енгізу өрісінің өлшемін анықтауға қолданыңыз. (кему реті бойынша 20символ қолданылады).

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

Формадағы таңдау менюінде интерфейстің LISTBOX атты элементі қолданылады. Форма үшін таңдау менюінің үш түрлі типті тегі болады:

· Select – пайдаланушы мәннің орнатылған тізімінің ішінен OPTION тегтарымен берілген бір мәнді таңдайды. Берілген түр түсетін LISTBOX сияқты суреттейді.

Select single – Select сияқты, бірақ пайдаланушы экранда таңдаудың үш элементін қатар көреді. Егер де олар көп болса, онда автоматты вертикалды скроллинг пайда болады.
Select multiple – LISTBOX-тан бірнеше элементті таңдауға рұқсат етеді.

2 SELECT тегі.

SELECT тегі қолданушыға орнатылған мәндер тізімінен мәнді таңдауға мүмкіндік береді. Әдетте ол түсетін менюмен көрсетілген.

SELECT тегі <SELECT> старттық тегі мен аяқтаушы </SELECT> тегтарының арасында бір немесе бірнеше параметрлерге ие. Кему ретінде бірінші элемент таңдау жолында көрсетіледі. <SELECT> тегінің мысалы:

<FORM>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

</SELECT>

</FORM>

SELECT SINGLE

SELECT SINGLE тегі – бұл Select-ке ұқсас, бірақ қолданушы экранда бір уақытта бірнеше таңдау элементін көреді (үшеу кему реті бойынша). Егер де олар көп болса, онда авторматты вертикалды скроллинг пайда болады. Бір уақытта көрінетін элементтердің саны SIZE атрибутымен анықталады. Мысал:

<FORM>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

SELECT MULTIPLE тегі SELECT SINGLE тегіне ұқсас, бірақ бұнда қолданушы бір уақытта біреуден көп тізім элементін таңдай алады. SIZE атрибуты экранда бір уақытта көрінетін элеметтердің санын анықтайды. MULTIPLE атрибуты – бір уақытта таңдалған элементтердің максималды саны. Мысалы:

<FORM>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

Егер бір уақытта бірнеше мән таңдалған болса, онда серверге таңдалғанға сәйкес келетін NAME=VALUE бірдей мәнмен NAME, әр түрлі мәнмен VALUE параметрлер саны жіберіледі.

3 Форманың көмегімен файлдарды жіберу.

Формаларды кішкене ақпараттық хабарларды жіберу үшін ғана емес, сонымен қатар файлдарды жіберу үшін де қолдануға болады.

Мысалы:

<FORM ENCTYPE="multipart/form-data" ACTION="url" METHOD=POST>
Отправить данный файл: <INPUT NAME="userfile" TYPE="file">
<P>
<INPUT TYPE="submit" VALUE="Отправить файл">
</FORM>

Начало формы

Берілген файлды жіберу:

Синтаксис:

<FORM action="mailto: имя @ домен.ru?subject=" Comment from Home Page " method="post" enctype="text/plain">
<br> Комментарии: <br>
<TEXTAREA type="text" NAME=" комментарий " ROWS= 5 COLS= 50 ></TEXTAREA> <br>
Имя: <br>
<INPUT type="text" NAME=" имя " SIZE=" 57 "> <br>
E-mail: <br>
<INPUT type="text" name=" e-mail " size=" 52 " maxlength=" 360 "> <br>
<INPUT type="reset" VALUE= Сброс >
<INPUT type=SUBMIT VALUE= Послать >
</FORM>

Мысал:

Комментарии:

Имя:

E-mail:

Имя:

E-mail:

<INPUT> элементі барлық элементтер формасына базалық болып табылады. Ол батырма формасына, графикалық суретке, жалауға, қосылғышқа, парольға және мәтіндік жолға кіру үшін қолданылады. Сыртқы формаларының айырмашылықтарына қарамастан олардың бәрі CGI сценариін, аты: белгіні жібереді. Элемент type сияқты 8 атрибутты.

TEXT

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

maxlength. Символдарға енгізілетін белгілерге максималды ұзындық беріледі.
size.Символмен берілетін өрісте максималды ұзындық.
value. Өзгертуге келетін қалыпты белгі береді.

Синтаксис: <INPUT type="TEXT" name=" Hobby " maxlength=" 35 " size=" 20 " value=" Shopping ">
Мысал:

PASSWORD

Енгізілетін символдардың орнына жұлдызшалар шығатын бір жолды өріс:

maxlength. Символдарға енгізілетін белгілерге максималды ұзындық беріледі.
size. Символмен берілетін өрісте максималды ұзындық
value. Өзгертуге келетін қалыпты белгі береді.

Синтаксис: <INPUT type="PASSWORD" name=" PASSWORD_BOX " maxlength=" 35 " size=" 20 ">
Мысал:

HIDDEN
Енгізуде ақпаратты тжасыратын тағы бір типі. Қолданушымен өзгермей, сценариге ақпаратты жіберуге мүмкіндік береді. CGI – дің кейбір программалары жасырын өрісті, ақпаратты бір беттен басқаға жіберу үшін қолданылады, мысалы, аты немесе нөмірі. Бұл қолданушының жұмысын жеңілдетіледі, оны қайталамалы енгізуден құтылдырады. Мысалы, файлды HTML шығу кодымен ссылкалау үшін келесі қолданылады.
<INPUT type="HIDDEN" name=" file " value=" anyfile.html ">
CHECKBOX
Жалаушалар қолданушыға бір жауап арқылы жауап беруге мүмкіндік береді: ия/жоқ шын/жалған үлкен/кіші және тағы басқа. Крест немесе құсша түрінде болады. Элементтің атрибуттры болуы мүмкін:

checked. Жалаушаның бастапқы статусын береді.
value. Өзгертуге келетін, қалыпты белгі береді.

Синтаксис: <INPUT type="checkbox" name=" send_mail " value=" ye