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 тапсырма. Экрандағы мәтін орналасу түрін өзгерту.
Келесі жолға көшу ісін атқаратын <BR>тәгін қолданайық.
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 файлы мәтінінің негізгі бөлімінің керекті орындарына төмендегідей түрде <BR> тәгін енгізу керек:
…<BODY> Сәрсенбі күнгі <BR> сабақ <BR> кестесі </BODY>…
7. Мәтінді дискіде қайта сақтап, web-құжатты жаңартыңыздар, терезедегі мәлімет орналасуы 22 суреттегідей болып өзгереді. Енді HTML құжаты мен RASP.HTM файлын жауып тастаңыздар.
3 тапсырма. Форматтаудың арнайы командалары
Жаңа абзац ашатын арнайы <Р> тәгі бос жол енгізіп, жаңа абзацты алдыңғы мәтін жолдарынан бөліп тұрады.
22 сурет
1. HTML файлы мәтінінің <BODY> … </BODY> тәгтері ортасына төмендегідей өзгерістер енгізіңіздер:
…<BODY> <Р> Сәрсенбі күнгі </Р> <BR> сабақ <BR> кестесі </BODY>…
2. Өзгертулерді RASP.HTMфайлында қайта сақтап, Microsoft Internet Explorer броузері арқылы осы өзгертілген Web-құжатты қарап шығыңыздар. Экрандағы мәтін қандай өзгерістерге ұшырады? Жаңа құжат 23 суреттегідей болып бейнеленуі тиіс.
23 сурет
4 тапсырма. Мәтін фрагменттерін ерекшелеу.
1. RASP.HTM файлы мәтінінің <BODY> … </BODY> тәгтері ортасына төмендегідей өзгерістер енгізіңіздер:
<BODY> <B> Сәрсенбі күнгі </B> <I> сабақ </I> <U> кестесі </U> </BODY>
2. Өзгертілген Web-құжатты экраннан көріп шығыңыздар (22 сурет). Мұнда сөздерді ерекшелеуді аралас түрде де қолдануға болады:
<I><В> Сәрсенбі күнгі </В></I> <I> сабақ </I> <U> кестесі </U>
Бірақ мұндайда тәгтерді араластыра жазудың мынадай ережелерін есте сақтаған жөн:
<Тәг-1> <Тәг-2> … </Тәг-2> </Тәг-1> — дұрыс жазылған тізбек;
<Тәг-1> <Тәг-2> … </Тәг-1> </Тәг-2> — қате жазылған тізбек.
5 тапсырма. Тақырып стильдерін қолдану.
Тақырыптар көлемін өзгертіп жазудың алты түрлі тәгтері бар (<Н1> ден <Н6> -ға дейін). Әрбір тәг броузер параметрлеріне сәйкес мәтінге белгілі бір нақты стиль бере алады.
1. RASP.HTM файлының негізгі бөліміне төмендегідей өзгерістер енгізіңіздер:
… <BODY> <P> <H1> Сәрсенбі күнгі </H1> </P>
<H3> <I> сабақ </I> <U> кестесі </U> </H3> </BODY>