Сызбалар, есептер, ситуациялар. HTML-құжаттар қалай жасалынады? . HTML-құжаттар қалай жасалынады?

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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– Кестенің ені, пиксель арқылы немесе беттің енінің проценті түрінде (мысалы, беріледі.

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

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

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

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

<HEAD>

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

             </TITLE>
             </HE AD >

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 ALIGN=middle ISMAP>

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

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

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

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

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

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

Төмендегі программаның тексін Блокнот текстік редакторында теріп, құжатты Тапсырма_4.html деген атпен сақтаңыз.  Кестені жасауда қолданылатын барлық тегтерді меңгеріңіз.

<HTML>

<HEAD>

<TITLE>Мысал 4</TITLE>

</HEAD>

<H1>Қарапайым кесте </H1>

<TABLE BORDER=1> <!--кесте-->

<CAPTION>   <!—кесте тақырыбы-->

Кесте тақырыбы болуы мүмкін

</CAPTION>

<TR>        <!--бірінші жол-->

<TD>        <!--бірінші ұяшық-->

Бірінші жол, бірінші колонка

</TD>       <!--бірінші ұяшықтың соңы-->

<TD>        <!--екінші ұяшықтың басы-->

Бірінші жол, екінші колонка

</TD>       <!--екінші ұяшық соңы-->

</TR>       <!--бірінші жол соңы-->

<TR>        <!--екінші жол басы-->

<TD>        <!--бірінші ұяшық басы-->

Екінші жол, бірінші колонка

</TD>       <!--Это бірінші ұяшық соңы-->

<TD>        <!--екінші ұяшық басы-->

Екінші жол, екінші колонка

</TD>       <!--Это екінші ұяшық соңы-->

</TR>       <!—екінші жол соңы-->

</TABLE>    <!--кесте соңы-->

</BODY>

</HTML>

6-жаттығу. Біріктірілген және бөлінген ұяшықтары бар кесте жасау. Colspan, Rowspan тегтерін меңгеру.

Өзіңіздің бумаңызда жаңадан біріктірілген және бөлінген ұяшықтары тұратын кестесі бар HTML- құжат жасаңыз.Ол үшін төменде келтірілген программаның тексін теріп, құжатты Задание 6.html деген атпен сақтаңыз. Colspan, Rowspan тегтерінің қызметіне назар аударып, зерттеңіз. Нәтижесі мына суреттегідей болуы тиіс:

<HTML>

<HEAD>

<TITLE>COLSPAN көмегімен ұяшықтарды біріктіруROWSPAN</TITLE>

</HEAD>

<BODY BGCOLOR = BLUE TEXT = BLACK >

<TABLE ALIGN= “CENTER” BORDER= “2” LEFTMARGIN= “40” RIGHTMARGIN= “40” CELLPACING= “0” CELLPADDING= “40” WIDTH= “100%” HEIGHT= “200”>

<TR ALIGN= “CENTER” BGCOLOR=GRAY>

<TH COLSPAN= “2”> Ұяшық 1</TH>

</TR>

<TR>

<TD ALIGN= “CENTER” ROWSPAN= “3”> Ұяшық2 </TD>

<TD ALIGN= “CENTER” > Ұяшық 3 </TD>

</TR>

<TR>

<TD ALIGN= “CENTER” > Ұяшық 4 </TD>

</TR>

<TR>

<TD ALIGN= “CENTER” > Ұяшық 5 </TD>

</TR>

</TABLE>        

</BODY>

</HTML>

Өздік жұмыс тапсырмалары:

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

2. Өз курсыңызға HTML-құжатын жасаңыз. Құжатта курстағы топтар тізімі, және сіздің факультетте 1-курста оқитындардың ішіндегі Алтын Белгі иегерлері туралы деректер кестесі болу керек. Өз тобыңыздың атына гиперсілтеме жасап, өзіңіздің тобыңыздың жеке Web-бетін (яғни, сіздің жеке HTML-құжатыңыз, онда сіздің топ туралы шағын ақпарат және топтың фотосуреті болуы керек) шақыратындай етіңіз.

3. Факультеттің HTML-құжатын жасаңыз. Құжатта факультеттегі мамандықтар тізімі, кафедралар жайлы дерегі бар кесте (кафедра аты, қазақ, орыс топтарының саны), факультетті мамандығын сипаттайтын сурет болуы керек. Мамандықтар тізіміндегі өз мамандығыңызға гиперсілтеме жасаңыз, ол сіздің мамандық жайлы қысқаша ақпараты бар  HTML-құжатты шақыруы тиіс.

4. Өз университетіңіздің HTML-құжатын жасаңыз. Құжатта барлық факультеттер тізімі, факультеттер жайлы деректері (факультет аты, кафедра саны) бар кесте және университет эмблемасы бар сурет болуы тиіс. Өз факультетіңіздің атына гиперсілтеме жасаңыз. Ол факультет жайлы шағын ақпараты бар HTML-құжатын шақыруы тиіс. 

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

Ескерту: Жасайтын HTML –құжатыңызда жоғарыда көрсетілген барлық тегтер қатыстырылуы тиіс.

Глоссарий

WWW – бұл Web-серверлерде сақталатын, өзара байланыстағы миллиондаған электрондық құжаттардан тұратын біртұтас информациялақ кеңістік.

Web-парақ – Web кеңістігін құрайтын жеке құжаттардың бір түрі.

Байланыс арнасы - мәліметтердің ақпараттық ағыны өтетін жолдың жалпылама аты. Мысалы, Интернеттегі мәлімметтерді тасымалдаудың физикалық арнасы, телевизиялық арна, стерео - магнитофондардың сол жақ және оң жақ арналары. IRC жүйесінде стерео магнитофондардың қосылуға болатын оң жақ арнасының бірі немесе chat арналарының бірі.

Броузер – веб - парағын қарауға арналған бағдарлама.(MS Internet Explorer, Netscape Navigator, Opera және т.б.).

Веб-сайт – мағынасы, навигациясы бойынша біріктірілген және де бір веб-серверде орналасқан қайталанатын дезайынмен жабдықталған веб – беттердің жиынтығы.

Веб-сервер- ауқымды байланыстыру қызметіне ақпарат беруді қамтамасыз ететін және интернетке тұрақты қосылып тұрған компьютерлер түріндегі сервер.

Гиперсілтеме, гипермәтін сілтеме – веб-парағының элементі, кәдімгі түстермен ерекшеленген және асты сызылған мәтін гиперсілтеме арқылы басқа құжатқа ауысу мүмкіндігін береді.

Домен – бір компьютермен басқарылатын немесе біржелілік жұмыс машинасының (желі орабының) басшылық етуімен атқарылатын ақпараттық желі қорлары (ресурстары). @ таңбасының оң жағында орналасқан және абоненттің орналасқан тұрағын анықтайтын сөз.

Домен – РС қатысты және компьютерлік сервер жиынтығы.

Домендік атау - веб-сайтында жеңіл сақталынатын адрес, күрделі сандық ІР адресін алмастырады. Екінші  (mirhostinga.ru) және үшінші (spb.ru) деңгейде көп таратылған.

Әдебиеттер: [1], [14], [15], [16], [21], [22], [23], [24]

№13 ПРАКТИКАЛЫҚ САБАҚ

Тақырыбы: Компьютер желісіндегі қауіпсіздік. Антивирустік қорғаныс. Архивтеуші программалар.

Сабақтың мақсаты: Windows ОЖ-де Doctor Web, AVP типті антивирустық программаларымен жұмыс жасауға үйрету. Windows ОЖ-де WinRAR, WinZIP, WinARJ архивтеу программаларымен жұмыс жасауға үйрету.

Жоспары:

1. Windows ОЖ-де Doctor Web, AVP типті антивирустық программаларымен жұмыс.

2. Windows ОЖ-де WinRAR, WinZIP, WinARJ архивтеу программаларымен жұмыс.

Блиц-тест

1)Кеңеймесі қандай файлдар архивтік болады:  

A) .doc, .txt, .rar;  

B) .com, .exe, .txt;  

    C) .doc, .txt, .zip;  

D) .rar, .zip, com;    

E) .arj, .zip, .rar.  

2) Архивтеу программаларына келесі программалар жатады:  

А) raj.exe, rar.com;

В) arj.exe, rar.exe;  

С) ajr.exe, arj.com;  

D) win.exe, nc.exe;  

Е) sys.com, rar.bat.

3) Антивирустық программалар бұл-: 

А) сканерлеу прграммалары;  

В) тек қана вирустар табатын программалар;                                             

С) компьютерлік вирустарды табады және емдейді;  

D) архиватор-программалар;

E) утилиттер-программалар;  

4) Төмендегі белгілері бойынша, вирустарды алгоритм ерекшелігіне қарай кластарға бөлуге болады:  

А) залалсыз, қауіпті, қаупсіз; 

В) компаньон-вирусы , макро-вирусы; «черви»-вирусы, «стелс»-вирусы, «полиморф»-вирусы;

С) резидентті және резидентті емес;

D) жүйелік, файлдық және жүктелетін;  

Е) процессорлық, дискілік, ленталық.

Бақылау сұрақтары

1. Архиваторлар дегеніміз не?

2. Архивтеу не үшін қажет?

3. Информацияны архивтеу деңгейі неге байланысты?

4. Архивтік файл дегеніміз не?

5. Файлдар қандай мақсатпен архивке салынады?

6. Архиваторлардың қандай түрлерін білесіз?

7. Компьютерлік вирус нені білдіреді?

8. Вирустар қалай тарайды?

9. Вирустардың қандай түрлері бар?

10. Компьютердің вирус жұқтырғаны белгілі болған жағдайда не істеу керек?

11. Антивирустық бағдарламаларға нелер жатады?

12. Компьютерлік вирустардан сақтану жолдары қандай?

⇐ Предыдущая6789101112131415Следующая ⇒

Поделиться: