Сызбалар, есептер, ситуациялар

1. Кілттік сөздер бойынша ақпаратты іздеу.

   0. Егер қажет болса, Internet Explorer программасын жүктеңіз.

   1. URL-адресті енгізіңіз: www.northernlight.com – Northern Light титульді іздеу жүйесінің жүктелуі орындалады.

   2. Бетті мұқият қараңыз, (Search for) кілттік сөздерді енгізу өрісін және Search іздеуді жүктеу батырмасын тауып алыңыз.

   3. Кілттік сөзді енгізіңіз.

   4. Search іздеу батырмасын басыңыз.

   5. Іздеу нәтижесін қараңыз және табылған Web-парақтардың санына назар аударыңыз.

   6. Табылған Web-парақтардың санын азайту үшін іздеу тақырыбы бойынша сөз тіркесін табуға тырысыңыз.

   7. Броузер терезесінде, индиксация панелінде жаппай-ақ орнатылған байланыс белгісіне тышқанның оң жақ батырмасын басыңыз. Контекстік менюде Отключиться пунктін таңдаңыз – Интернетпен қосылу үзіледі.

   8. Ағымдағы Web-парақты қатты дискіге Файл –> Сохранить как командасының көмегімен сақтаңыз. Нақты түрде бір (HTML) файлы және онымен байланысты бума сақталады. Файлда Веб-парақтың коды, ал бумада орналасқан объектілердің файлы орналасады. Файл типі ретінде Веб-страница полностью командасын таңдаңыз (бет орналасқан объектілермен бірге толық сақталады). Егер файл типі ретінде Веб-страница только HTML таңдалса, онда орналасқан объектілермен берілген бума сақталмайды. Мұндай файлды кез-келген броузерде қарауға болады. Егер файл типі ретінде Текстовый файл таңдалса, соңынан кез-келген тестік редакторда қарауға болатын құжат мәтіні сақталады.

   9. Веб-парақты сақтау орны ретінде С: Windows\Temp бумасын таңдаңыз. Уақытша файлдарды \Temp деп аталатын бумаларда сақтау келісілген.

   10. Избранное –> Добавить в избранное командасын орындаңыз – Добавление в избранное диалогты терезесі ашылады. Оның құралдары ағымдағы беттің адресін есте сақтап қалуға және алдағы уақытта оны броузердің адрестік жолына енгізбей-ақ қоюға мүмкіндік береді.

   11. Интернетпен жұмысты аяқтаңыз.

2. Гипертекстік құжаттарды жасау тілі – html. Тексті пішімдеу тегтері. Суретттер кірістіру, гиперсілтеме жасау. Тізімдер. Кестелер

HyperText Markup Language (HTML) – WEB ортасында гипертекстік құжаттарды жасауға арналған стандартты тіл. HTML-құжат кез келген пішімделмейтін текстік редакторда көруге және редакциялауға болатын қарапайым текстік файл болып табылады.

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

HTML-дің тегтерін қолдана отырып сіз браузерге өз құжатыңызды экранда қалай көргіңіз келетіні жайлы ақпарат бересіз.

HTML тегтері шартты түрде екі категорияға бөлінеді:

• Құжаттың денесі тұтастай WEB-броузер арқылы қалай көрсетілетінін анықтайтын тегтер;

• Тақырып пен құжат авторы сияқты құжаттың жалпы қасиеттерін тегтер.

HTML-құжаттар қалай жасалынады?

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

HTML-тегтер

Барлық HTML тегтері "<" символынан басталып, ">" символына аяқталады. Бастау (стартовый) тегі және аяқтау (завершающий) тегі болады.

Мысал ретінде бастау тегі мен аяқтау тегінің арасына орналасқан , құжат тақырыбын сипаттайтын тақырып тегін келтірейік:

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

Аяқтау тегі бастау тегіне ұқсас, айырмашылығы тек бұрышты жақша ішіндегі мәтін алдында слэштің ( / ) болуында. Бұл мысалда <TITLE> тегі WEB-броузерге тақырып пішімінің (формат) қолданғанын, ал </TITLE> тегі мәтін тақырыбының аяқталғанын білдіреді.

Кейбір тегтер, мысалы, <P> (абзацты анықтайтын тег) аяқтау тегтерін қажет етпейді, бірақ оларды қолдану құжаттың бастапқы мәтінінің оқылуын жеңілдетіп, құрылымын жақсартады.

Кестелерді жасау

Кестелерді бейнелеу үшін HTML тегтерінің бірнеше түрі қолданылады:

• TABLE тегтері – бүкіл кестенің спецификациясын қоршайды.

• Міндетті емес элемент CAPTION – кестенің тақырыбын (атын) спецификациялайды.

• TR тегтері – кесте жолдарын спецификациялайды.

• TH тегтері – жолдар мен бағандардың тақырыптарын спецификациялайды.

• TD тегтері– кестедегі деректерді (кесте ұяшықтарының ішіндегісін) спецификациялайды.

Негізгі кестелік құрылымдар

Қарапайым мысалды: тақырыбы жоқ, 2 жол 2 бағаннан тұратын сандар кестесін (бірлік матрица) қарастырайық. Оның HTML коды мынандай болады:

<TABLE>

<TR> <TD> 1 </TD> <TD> 0 </TD> </TR>

1	0
0	1

<TR> <TD> 0 </TD> <TD> 1 </TD> </TR>

</TABLE>

және көбінесе броузерлер арқылы былайша көрсетіледі.

Кестенің қосымша қасиеттері. Мәтіндік ұяшықтары бар типтік кесте.

Жоғарыда көрсетілген кесте үлгісіне қосуға болатын бірнеше элементтер бар:

• Кестенің тақырыбы (caption ) – кестенің өзімен байланысқан (кесте туралы құжаттағы жолдар тексіне толықтауыш);

• Тақырыпша (headers) (түсіндірме) – кесте жолдары мен бағаларына арналған;

• Жақтау (рамка, borders) – кесте мен әр кесте ұяшығының айналасына арналған.

Сонымен қатар ALIGN мен VALIGN атрибуттары кестенің бейнелену сапасына әсер етеді. Олар құжаттың өрістеріне қатысты кестенің орналасуын айқындайды.

Мүмкін болатын мәндері: ALIGN=LEFT (сол жақпен туралау), ALIGN=CENTER (ортаға туралау), ALIGN=RIGHT (оң жаққа туралау).

WIDTH– Кестенің ені, пиксель арқылы WIDTH=400) немесе беттің енінің проценті түрінде (мысалы, WIDTH=80%) беріледі.

Жаттығу жұмыстары:

1-жаттығу. Тексті пішімдеу (форматтау) тегтерін қолданып HTML –құжат жасау.

1. Блокнот текстік редакторын ашып, бос құжатты Задание1.html деген атпен сақтаңыз.

2. Құжаттағы алғашқы тег <HTML> тегі болу керек. Бұл тег WEB-броузерге құжаттың HTML қолданылып жасағанын хабарлайды. Сондықтан құжаттыі бірінші жолына <HTML> деп теріңіз.

<HEAD>

<TITLE> Форматтау

</TITLE> </HEAD>

3. Енді құжаттың денесін, яғни HTML құжатта не көрсетілетінін енгіземіз.Ол үшін мына жолдарды теріңіз:

<BODY BGCOLOR=yellow TEXT=blue >

мұндағы BGCOLOR=yellow құжаттың фоны – сары, ал TEXT=blue шығатын текстің түсі көк болатынын анықтайды.

4. Ары қарай тағы да теріңіз:

<H1>бірінші деңгей</H1>

<H2>екінші деңгей</H2>

Бұл жолдар әр түрлі деңгейдегі тақырыптарды анықтайды.

5. Енді нөмірленген және нөмірленбеген тізім жасауды үйренейік. Ол үшін мына жолдарды енгізіңіз:

<OL >номерленген тізім

<LI>бірінші элемент

<LI>екінші элемент

<LI>үшінші элемент

</OL>

<UL TYPE=DISC>номерленбеген тізім

<LI>бірінші элемент

<LI>екінші элемент

<LI>үшінші элемент

</UL>

6. Енді тексті пішімдеуді (форматтауды), яғни тексті енгізудің түрлі пішімдерін қолдануды үйренейік. Ол үшін мына жолдарды енгізіңіз:

<I>курсив</I>

<B>қарайтылған</B>

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

<SUP>жоғарғы индекс</SUP>

<SUB>төменгі индекс</SUB>

<BR> абзаца

<BIG>үлкен қаріп</BIG>

<SMALL> кішіритілген қаріп</SMALL>

<STRIKE>сызылған қаріп</STRIKE>

7. Келесі жолға <BR><BR> деп теріңіз. Бұл екі рет бос жол жасағанды білдіреді ( «Enter » пернесін басқанды білдіреді).

8. Келесі жолға теріңіз: <MARQUEE > жүгірме жол</MARQUEE>. Нәтижесінде жүгірмелі жол жасалынады.

9. HTML құжатта көрсетілетін ақпарат таусылғандықтан <BODY> тегін жабу керек , ол үшін </BODY> деп жазыңыз.

10. HTML құжаттағы жазу аяқталды, сондықтан <HTML> тегін де жабу керек,ол үшін </HTML> деп жазыңыз.

11. Блокнотты жауып, жасаған құжатыңызды тышқанның сол жағын екі рет шертіп ашыңыз.

2-жаттығу. Сайттың тексін өзгерту. Өзіңіз жайлы шағын ақпарат бар үй бетін (домашняя страница) жасаңыз, ол үшін барлық келтірілген тегтерді қолданып 1–ші жаттығудағы сайттың тексін өзгертіңіз.

3-жаттығу. Құжатты редақциялау.

Фондық сурет қою арқылы беттің фонын өзгертейік. Ол үшін:

• Мои рисунки бумасынан (папка) jpg форматты суреттің көшірмесін өз бумаңызға түсіріп, оған image.jpg деп ат беріңіз.

• Қайтадан өзіңіздің HTML-құжатыңыздың бетіне оралып Вид-Просмотр HTML-кода командасын орындаңыз.

• Ашылған Блокнот редакторының терезесінде HTML-кодты. Редакциялайық. <BODY> тегінде фон түсінің тегінің орнына BACKGROUND="image.jpg" дегенді қосып жазыңыз. Құжатты сақтап, Блокнот терезесін жабыңыз.

• Өзіңіздің HTML- құжатыңыздың бетіне оралып Вид-Обновить командасын орындаңыз.

4-жаттығу. Сурет түсіру. Құжатқа гиперсілтеме жасау.

<IMG> және <A HREF> тегтерін қолданып келесі HTML- құжатын жасау.(2-сурет)

2-сурет

1. Блокнот текстік редакторының терезесін ашып, бос құжатты Тапсырма4..html деп сақтаңыз

2. Құжаттың бірінші жолына <HTML> деп жазыңыз..

3. Терезе тақырыбын жазу үшін мына жолдарды енгізіңіз:

<HEAD>

<TITLE> гиперсілтеме және суретті қою

</TITLE>

</HEAD>

4. Ары қарай <BODY BGCOLOR=pink TEXT=black LINK=blue VLINK=red> деп енгізіңіз.

5. Енді суретті түсіреміз. Ол үшін келесі жаңа мына тіркестерді жазыңыз: <IMG SRC="image.jpg" ALT="Здесь должен быть рисунок" HEIGHT=250 WIDTH=250 ALIGN=middle ISMAP>

6. Сурет пен келесі жазылатын текст арасында 3 бос жол болу керек. Ол үшін <BR><BR><BR> деп жазыңыз.

7. Енді құжатқа Тапсырма1.html құжатын шақыратын гиперсілтеме (гиперссылка)жасаймыз Ол үшін мына жолдарды теріңіз:

<A HREF=" Тапсырма1.html"> гиперсілтеме бойымен көшу</A>

8. </BODY> тегін жабыңыз.

9. </HTML> тегін жабыңыз.

5-жаттығу. Кестесі бар (таблица) HTML-құжат жасау.