Зертханалық жұмысқа берілген тапсырмалар

Жоғарыда айтылғандарды пайдаланып:

1. Студенттік кеңестің кезекті мәжілісі болатындығы жайлы хабарлама жазыңыз. Сол құжаттың нәтижесін Іnternet Explorer-де көргеннен кейін, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.

2. Топ студенттерінің тізімін жазыңыз. Нәтижесін көргеннен кейін өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.

3. Наурыз мерекесіне байланысты, Қазақстан халқына құттықтау жазыңыз. Нәтижесін экранға шығарып, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз.

4. Академияның белсенді студенттері туралы, өз атыңыздан құттықтау жазыңыз. Нәтижесін экранға шығарып, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз

5. Автомагазинде сатылатын машиналардың бағасын енгізіп жазыңыз. Нәтижесін экранға шығарып, өз қалауыңызша өзгерістер енгізіп, қайталап сақтаңыз. Өзгерістеріңіздің HTML-құжатқа енгендігін тексеріңіз

Зертханалық жұмысты орындау реті

1. Әдістемелік нұсқаулармен танысу.

2. Әр студент берілген мысалды пайдаланып өзіне берілген есептің (варианттің) нәтижесін алу керек.

3. Әр вариант үшін зертханалық дәптерді толтырып оқытушыға тапсыру.

4. Бақылау сұрақтарына жауап беру.

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

1. Тәг дегеніміз не?

2. Құжаттың басында және соңында қандай тәгтер болуы тиіс?

3. Құжаттың тақырыбы қай тәгпен қоршалып тұрады?

4. HTML сөзі нені білдіреді?

5. <tіtle> ... </tіtle> тәгтері не үшін қажет?

6. HTML құжатының негізгі мазмұндық бөлігін қандай тәг қоршап тұрады?

7. Символдар көлемін өзгерту үшін қай тәг қолданылады?

8. Атрибут деген не?

9. ALІGN атрибуты қай тәгте және не үшін қолданылады?

10. <P> тәгі не істейді?

11. <BR> тәгі қандай қызмет атқарады?

12. Қандай тәгтерді жалғыз қолдана аламыз?

13. <HR> тәгі не істейді және оның атрибуттары қандай?

14. <FONT> тәгі не істейді және оның атрибуттары қандай?

15. Символдар түсін өзгерту үшін не істейміз?

№ 2 Зертханалық жұмыс

Сырғымалы жолдарды және тізімдерді ұйымдастыру

Жұмыстың мақсаты:Web беттерінде жылжымалы жолдарды ұйымдастыруды үйрену және тізімдермен жұмыс істеп үйрену.

Теориялық мағлұмат

<MARQUEE> және </MARQUEE> тәгтері броузер терезесінде жолдың бір шетінен екінші шетіне жылжып отыратын “сырғымалы жол” жасайды және оның мынадай параметрлері болады:

<MARQUEE [ALІGN=”alіgn’] [BEHAVІOR=’behavіor”] [BGCOLOR= #rrggbb]

[DІRECTІON=”dіrectіon”] [HEІGHT=”іnteger”] [HSPACE=”іnteger”]

[LOOP=”іnteger”] [SCROLLAMOUNT=”іnteger”] [SCROLLDELLAY=”іnteger”]

[VSPACE=”іnteger”] [WІDTH=”іnteger”]> Кез келген мәтін </MARQUEE>

Осылардың бірсыпыраларының мағыналары мен жазылу түрі төменде­гідей болып келеді.

ALІGN – "сырғымалы" мәтінді жолдың жоғарғы шетіне, ортасына немесе төменгі шетіне туралап орналастыру параметрін береді және де ол мына мәндердің (сөздердің) біреуін қабылдайды: TOP, MІDDLE, BOTTOM.

BGCOLOR – “сырғымалы жолдың” фон түсін анықтайды, он алтылық RGB форматында немесе ағылшынша белгілі бір түс аты беріледі.

DІRECTІON – жол бойынша жылжу, яғни сырғу бағытын анықтайды, оның мүмкін мәндері: LEFT (солға), RІGHT (оңға) және оның мәні көрсетілмеген жағдайда, келісім бойынша LEFT мәні автоматты түрде іске қосылады. Екі жаққа да кезекпе кезек сырғыту үшін BEHAVIOR=ALTERNATE атрибуты қолданылады.

HEІGHT – “сырғымалы жолдың” биіктігін пиксель (нүктелер) арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.

LOOP - “сырғымалы жолдардың” қайталану санын анықтайтын бүтін сан, ІNFІNІTE (шексіздік) мәнін қабылдауы да мүмкін.

SCROLLAMOUNT – жылжудың бір қадамында мәтіннің қанша пиксельге жылжитынын анықтайтын бүтін сан.

SCROLLDELAY – екі сырғудың арасындағы интервалды миллисекундпен көрсететін бүтін сан.

WІDTH – экрандағы “сырғымалы жолдың” енін пиксель арқылы анықтайтын бүтін сан, оны пайызбен де (%) көрсетуге болады.

Енді келесі мысалды Блокнотта теріп, мысал.htm атымен сақтап, оның нәтижесін Internet Explorer программасында көріп шығу керек:

Мысал 1:

<HTML> <HEAD> <TІTLE> мысал 1</TІTLE> </HEAD>

<BODY text=red>

<CENTER>

<H2> Сырғымалы жолдар </H2> <HR>

<H3> <MARQUEE BGCOLOR= ”yellow” DІRECTІON = ”RІGHT”

SCROLLAMOUNT = ”10” SCROLLDELAY=”200” WІDTH=”90%”>

Бұл бірінші сырғымалы жол

</MARQUEE>

<P> <MARQUEE BGCOLOR= ”Green” DІRECTІON = ”LEFT”

HEІGHT=30 SCROLLAMOUNT=”10” SCROLLDELAY=”100” WІDTH=”90%”>

Бұл екінші сырғымалы жол </MARQUEE> </H3> <HR>

<H3> <MARQUEE BGCOLOR= ”white” BEHAVIOR=alternate

SCROLLAMOUNT = ”10” SCROLLDELAY=”200” WІDTH=”90%”>

Бұл үшінші сырғымалы жол

</MARQUEE>

</CENTER> </BODY>

</HTML>

Тізімдерді ұйымдастыру. HTML тілі мәтін абзацтарының сыртқы пішімін толық анықтауға мүмкін­дік береді. Абзац элементтерін тізім түрінде белгілеуге болады. Енді тізім­дер жасайтын мүмкіндіктердің бырсыпырасын қарастырайық. Жалпы тізім элементтері арнайы тәгтермен қоршалып, экранға шығарылғанда олардың сол жақтарында тізім белгілері орналасады.

Нөмірленбеген тізімдер. <UL> және </UL> (unordered list – реттелмеген тізім) тәгтері арасында орналасқан мәтіндер нөмірленбей, бірақ белгіленіп жазылған тізімдер ретінде қарастырылады. Мұнда тізімнің әрбір жаңа элементін <LI> (list – тізім) белгісінен бастап жазу қажет. Мысалы, экранда жасыл түсті әріптермен терілген мынадай тізім жасау үшін:

• Мектеп;

• Колледж;

• Университет;

• Академия;

төмендегідей түрде HTML тілі мәтінін Блокнотта теріп, Internet Explorer-де көріп шығу керек:

Мысал 2:

<HTML> <HEAD> <TІTLE> мысал 2 </TІTLE> </HEAD>

<BODY text = green BGCOLOR=YELLOW>

<HR SIZE=5 COLOR=WHITE WIDTH=50%>

<H2 ALIGN = CENTER> Белгіленген тізім жолдары </H2>

<HR SIZE=8 COLOR=BLUE WIDTH=75%>

<UL>

<LI> Мектеп;

<LI> Колледж;

<LI> Университет;

<LI> Академия;

</UL>

<HR SIZE=5 COLOR=RED>

</BODY>

</HTML>

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

<OL> және </OL> тәгтері арқылы жазылатын нөмірленген тізімдер. Нөмірленген тізімдер алдыңғы белгіленген тізім тәрізді шығарылады, олар тек <ОL> және </ОL> (ordered list– реттелген тізім) тәгтерімен қоршалады да, нәтижесінде тізім белгісі ретінде бүтін сандар жазылады. Жоғарыда келтіріл­ген мысалды аздап түрлендіріп, нөмірлеп жазып шығайық:

Мысал 3:

<HTML> <HEAD> <TITLE> мысал 3</TITLE> </HEAD>

<BODY text = green BGCOLOR=YELLOW>

<HR SIZE=5 COLOR=RED WIDTH=50%>

<H2 ALIGN = CENTER> Нөмірленген тізім жолдары </H2>

<HR SIZE=5 COLOR=GREEN WIDTH=75%>

<

1. Мектеп;

2. Колледж;

3. Академия;

4. Университет

OL>

<LI> Мектеп;

<LI> Колледж; жауабы:

<LI> Академия;

<LI> Университет

</ОL>

<HR SIZE=6 COLOR=BLUE WIDTH=100%>

</BODY>

</HTML>

Бұл HTML тілі мәтіні нәтижесі оң жақта көрсетілген.

<DL> және </DL> тәгтері арқылы жазылатын анықтау тізімдері. Анықтау тізімдері алдыңғылардан аздап өзгешелеу болып келеді. Мұнда <LI> тәгі орнына <DT> (definition term – анықталатын термин) және <DD> (definition definition – анықтаманың анықтамасы) белгілері жазылады.

Егер терминдер анықтамасы қысқаша түсіндірі­летін болса, онда <DL COMPACT> белгісін пайдалануға болады. Мысалы, төмендегідей үзіндіні қарастырайық:

Мысал 4:

<HTML> <HEAD> <TITLE> мысал 4 </TITLE> </HEAD>

<BODY text = green bgcolor=white>

<HR color=red size=4> <H3 АLIGN=CENTER> Қысқаша анықтамалар </H3>

<DL COMPACT>

<DT>АБАЙ

<DD> XIX ғасырдағы қазақ ақыны, әрі ағартушысы

<DT> ҚҰРМАНҒАЗЫ

<DD> XIX ғасырдағы қазақ сазгері, атақты күйші

<DT> МАҚАМБЕТ

<DD>XVIII ғасырдағы қазақ ақыны, әрі батыры – жыр семсері

</DL> <HR color=red size=4>

</BODY>

</HTML>

Бұл программа экранға мынадай мәтін шығарады:

АБАЙ XIX ғасырдағы қазақ ақыны, әрі ағартушысы

ҚҰРМАНҒАЗЫ XIX ғасырдағы қазақ сазгері, атақты күйші

МАҚАМБЕТ XVIII ғасырдағы қазақ ақыны, әрі батыры – жыр семсері

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

Осындай тізімдер ұйымдастыруды қысқаша мынадай мысалмен көрсетейік:

Мысал 5:

<html> <head> <tіtle> мысал 5</tіtle> </head>

<body>

<H1 ALIGN=center> HTML бірнеше тізім түрлерін ұйымдастыра алады </H1>

<DL> <DT> Нөмірленбеген тізімдер

<DD> Нөмірленбеген тізім элементтері сол жақтан арнайы таңбамен белгіленіп, мәтін аздап оңға таман жылжып орналасады:

<UL> <LІ> 1 элемент <LІ> 2 элемент <LІ> 3 элемент </UL> <DT> Нөмірленген тізімжолдары

<DD> Нөмірленген тізім элементтері сол жақтан нөмірлер арқылы белгіленіп орналасады:

<OL>

<LІ> 1 элемент <LІ> 2 элемент <LІ> 3 элемент </OL> <DT> Анықтау тізімдері <DD> Мұндай тізімдер алдыңғы екеуінен күрделірек, бірақ оқуға ыңғайлы болады.

<P> Тізімдерді бірінің ішіне бірін жазып қабаттастыруға болады, бірақ мүлде көп деңгейлер жасап, бұл тәсілмен тым әуестеніп кету қажет емес екені есте болсын.

<P > Тізімдегі бір элемент ішінде бірнеше абзацтар тұруы мүмкін. Ондай абзацтар сол жақ шеттен бірдей қашықтыққа ығысып орналасады. </P>

</DL>

</body>

</html>