HTML ТІЛІН ҮЙРЕНУГЕ АРНАЛҒАН ТАПСЫРМАЛАР

1 тапсырма. Қарапайым HTML файлын жасау

1. Өз жұмыс бумаларыңыздың ішінен жаңадан жасалған Web-құжаттарды сақтайтын STUDENT бумасын ашыңыздар.

2. Блокнот редакторы терезесінде төменде көрсетілген қарапайым HTML файлының мәтінін теру керек:

<HTML> <HEAD> <TITLE> Алғашқы HTML файлы </TITLE> </HEAD> <BODY> Сәрсенбі күнгі сабақ кестесі </BODY></HTML>

3. Файлды RASP.HTM атымен STUDENT бумасында сақтап қойыңыздар да, Блокнот терезесін жауып тастаңыздар.

4. Жасалған Web-құжатты көру үшін сол RASP.HTM файлы белгішесін екі рет шертіңіздер, сонда Microsoft Internet Explorer броузері жазылған мәліметті 21 суреттегідей түрде көрсетіп тұрады.

21 сурет

5. Енді Түр – HTML түрінде(Вид – В виде)командасын орындау арқылы құжаттың алғашқы терілген HTML файлы мәтінін Блокнот терезесінде көруге болады. Осы мәтіннің екінші жолы соңына:

<H2> Менің алғашқы парағым </H2>

деген қосымша мәтін енгізейік.

6. Осылай түзетілген мәтінді Файл – Сохранитькомандасы арқылы қайта дискіге жазып қояйық та, Блокнот терезесін төменге жасырып, қайтадан Тапсырмалар тақтасында белгішесі көрініп тұрған Алғашқы HTML файлы атын шертіп, Microsoft Internet Explorer броузері терезесін ашайық.

7. Броузердің Вид – Обновитькомандасын орындап (немесе батырмасын шертіп) терезедегі мәліметтің өзгергеніне көз жеткізіңіздер. Алғашқы HTML файлы және RASP.HTM файлдарын жабыңыздар.

2 тапсырма. Экрандағы мәтін орналасу түрін өзгерту.

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

1. Бірінші тапсырманың 5 – 6 нөмірлі пункттерін орындау керек.

2. RASP.HTM файлын ашып, оның алғашқы мәтінін Түр – HTML түрінде(Вид – В виде HTML) командасы арқылы Блокноттерезесінде көрсету қажет.

3. HTML файлы мәтініндегі “Сәрсенбі күнгі”, “сабақ”, “кестесі” сөздерін жеке-жеке жолдарға жазайық:<HTML>

<HEAD> <H2> Менің алғашқы парағым </H2>

TITLE> Алғашқы HTML файлы </TITLE> </HEAD> <BODY> Сәрсенбі күнгі сабақ кестесі </BODY></HTML>

4. Өзгертілген осы мәтінді дискіге қайта сақтап,Блокнот программасын жасырып, Microsoft Internet Explorer терезесін ашыңыздар.

5. Microsoft Internet Explorer-де мәтін өзгерістерін бейнелеу үшін F5 пернесін басу керек немесе Вид – Обновить (Refresh)командасын орындау қажет. Экрандағы бейне өзгерді ме? Жоқ.

Ескерту. Бұдан былай Web-құжатқа өзгеріс енгізген сайын екінші тапсырманың 4 – 5 пункттері орындалуы тиіс.

6. Енді HTML файлы мәтінінің негізгі бөлімінің керекті орындарына төмендегідей түрде тәгін енгізу керек:

...<BODY> Сәрсенбі күнгі сабақ кестесі </BODY>...

7. Мәтінді дискіде қайта сақтап, web-құжатты жаңартыңыздар, терезедегі мәлімет орналасуы 22 суреттегідей болып өзгереді. Енді HTML құжаты мен RASP.HTM файлын жауып тастаңыздар.

3 тапсырма. Форматтаудың арнайы командалары

Жаңа абзац ашатын арнайы <Р> тәгі бос жол енгізіп, жаңа абзацты алдыңғы мәтін жолдарынан бөліп тұрады.

22 сурет

1. HTML файлы мәтінінің <BODY> ... </BODY> тәгтері ортасына төмендегідей өзгерістер енгізіңіздер:

...<BODY> <Р> Сәрсенбі күнгі </Р> сабақ кестесі </BODY>...

2. Өзгертулерді RASP.HTMфайлында қайта сақтап, Microsoft Internet Explorer броузері арқылы осы өзгертілген Web-құжатты қарап шығыңыздар. Экрандағы мәтін қандай өзгерістерге ұшырады? Жаңа құжат 23 суреттегідей болып бейнеленуі тиіс.

23 сурет

4 тапсырма. Мәтін фрагменттерін ерекшелеу.

1. RASP.HTM файлы мәтінінің <BODY> ... </BODY> тәгтері ортасына төмендегідей өзгерістер енгізіңіздер:

<BODY> Сәрсенбі күнгі сабақ кестесі </BODY>

2. Өзгертілген Web-құжатты экраннан көріп шығыңыздар (22 сурет). Мұнда сөздерді ерекшелеуді аралас түрде де қолдануға болады:

<В> Сәрсенбі күнгі </В> сабақ кестесі 

Бірақ мұндайда тәгтерді араластыра жазудың мынадай ережелерін есте сақтаған жөн:

<Тәг-1> <Тәг-2> ... </Тәг-2> </Тәг-1> — дұрыс жазылған тізбек;

<Тәг-1> <Тәг-2> ... </Тәг-1> </Тәг-2> — қате жазылған тізбек.

5 тапсырма. Тақырып стильдерін қолдану.

Тақырыптар көлемін өзгертіп жазудың алты түрлі тәгтері бар (<Н1> ден <Н6> -ға дейін). Әрбір тәг броузер параметрлеріне сәйкес мәтінге белгілі бір нақты стиль бере алады.

1. RASP.HTM файлының негізгі бөліміне төмендегідей өзгерістер енгізіңіздер:

... <BODY> <H1> Сәрсенбі күнгі </H1> 

<H3> сабақ кестесі </H3> </BODY>

2. Өзгертілген Web-құжатты экраннан көріп шығыңыздар.

6 тапсырма. Қолданылып отырған қаріптің көлемін өзгерту.

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

1. RASP.HTM файлының негізгі бөліміне мынадай өзгерістер енгізіңіздер:

<BODY> Сәрсенбі күнгі сабақ кестесі </BODY>

2. Осы тәгін пайдаланып, “сабақ кестесі” сөздерінің мөлшерін өз қалауларыңызша өзгертіп көріп шығыңыздар.

3. Мәтін бөліктерін жоғарыда айтылған ерекшелеу түрлерін және келесі жолға көшу, жаңа абзац ашу тәгтерін пайдалана отырып бірнеше тәсілмен безендіріңіздер.

7 тапсырма. Қаріп гарнитурасы (типі) мен түсін өзгерту.

 тәгі мәтін қаріптерінің көлемін, типін және түсін өзгертуге мүмкіндік береді. Қаріп типін өзгерту осы тәгке FACEатрибутын қосу арқылы орындалады.Мысалы, мәтін бөлігін KZ Arial қарпімен жазу үшін:  тәгін қолдану қажет.

Қаріп түсін беру үшін  тәгінің COLOR="Green" атрибутын жазу керек. Мұндағы Green сөзі орнына кез келген басқа түс атын немесе оның он алтылық жүйедегі кодын жазса болады.

1. RASP.HTM файлына мынадай өзгерістер енгізіңіздер:
... <BODY> Сәрсенбі күнгі сабақ кестесі </BODY>...
2. Өз қалауларыңыз бойынша құжат мәтіндерінің мөлшерін, түсін, гарнитурасын, стилін өзгерте отырып қарап шығыңыздар.

8 тапсырма. Мәтінді көлденең бағытта туралау.

RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:
.... <BODY> Сәрсенбі күнгі сабақ кестесі </BODY> ...Экранда мәтін фрагменттері жол ортасына ығысады.
9 тапсырма. Құжат фоны мен жалпы мәтіннің түсін беру.

Құжат фоны мен жалпы мәтіннің түсін беру кезінде броузерлер алдын ала келісілген (по умолчанию) түстерді пайдаланады. Егер біз басқа түстерді пайдаланғымыз келсе, онда олардың бастапқы мәндері <BODY> тәгінде көрсетіледі. Осы тәгтің BGCOLOR= ... атрибуты құжаттың фон түсін, ТЕХТ= ... атрибуты жалпы мәтін түсін анықтайды. LINK= ... және VLINK= ... атрибуттары әлі қаралмаған және қаралған гиперсілтемелік сөздер түсін тағайындайды.

RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:
...<BODY BGCOLOR="#FFFFCC" TEXT="#330066"> Сәрсенбі күнгі сабақ кестесі </BODY> ...Экранда мәтін фрагменттерінің аздап өзгеріске ұшырағандарын байқаған шығарсыздар.
10 тапсырма.Web-парақ ішіне сурет орналастыру.

<IMG> тәгі құжат ішіне сурет қою мүмкіндігін береді. Бұл тәг қосарланбай, жалғыз жазылады. Келесі мысалдағы DOG.JPG графикалық файлы осы Web-құжат орналасқан STUDENT бумасы ішінде жазылып тұр деп есептеледі.

RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:
... <BODY BGCOLOR="#FFFFFF" TEXT="#330066"> Сәрсенбі күнгі сабақ кестесі <ВR> <IMG SRC="DOG.JPG"></BODY>...
<IMG> тәгінің 5 кестеде көрсетілгендей бірсыпыра атрибуттары бар, олар IMGтәгінен кейін кез келген реттілікпен орналаса береді.

11 тапсырма. Сурет атрибуттарын тағайындау

ALT, BORDER, HEIGHT, WIDTH.атрибуттарын пайдаланып, өз қалауларыңызша RASP.HTM файлын өзгертіңіздер.

Ескерту. Суреттік файлдың көлемінің (байтпен берілген) өзгеруіне назар аударып отырыңыздар, өйткені ол Web-құжаттың Интернеттен компьютерге жүктелу уақытына қатты әсер етеді.

12 тапсырма. Web-парақтарға фондық суреттер салу.

Фондық сурет – мәтіндер астында (айналасында) түсқағаз тәрізді орналасқан суреті бар графикалық файл. Броузерге фон ретінде тағайындалғанда, сурет көбейіп терезе аумағын толық алып тұрады.

Фон ретінде пайдаланылатын сурет <BODY>тәгінде көрсетіледі.

RASP.HTM файлының негізгі бөліміне төмендегідей өзгерістер енгізіңіздер:
...<BODY BACKGROUND="fon1.GIF" TEXT="#330066"> Сәрсенбі күнгі сабақ кестесі </Р> </BODY>...
Осы файлдың жұмыс нәтижесі экранда төмендегі 24 суреттегідей болып бейнеленеді.

<28 29 303132 33 34 >

Дата добавления: 2014-12-05; просмотров: 6896;