Енді осы терілген құжатты, мысалы, Айна.htm деген атпен дискіде сақтау керек. Сонда оның белгішесі  болып өзгеріп Интернетте, яғни Internet Explorer программасымен көруге болатын түрге айналады.
Бұл Айна.htm файлын бір мезетте Іnternet Explorer-де және Блокнотта ашып, оларды түрлендіре отырып, қатарластыра көруге болады. Ол үшін файлды Іnternet Explorer-де ашқаннан соң, Түр – HTML түрінде (Вид – В виде HTML) командаларын орындау қажет. Сонда файлдың алғашқы мәтіні Блокнотта ашылып, оны түрлендіріп өзгерту мүмкіндігіне ие боламыз. Қажетті өзгертулер енгізіп оны қайта дискіге жазып сақтап қою қажет. Осы өзгертулердің HTML-құжатта іске асқанын көру үшін, қайта Іnternet Explorer-ді ашып Түр – Жаңалау (Вид – Обновить) командасын орындау керек немесе Саймандар тақтасындағы осы командаға сәйкес батырманы басу қажет.
Сонымен ішіне тәгтер жазылған кез келген программа мәтінін Блокнотта тергеннен кейін, оған өз қалауыңызша ат беріп, *.htm (* – кез келген ат) түрінде сақтау керек. Тергеніңіздің нәтижесін экранда көру үшін, оның атын тышқанмен екі шерту керек немесе Іnternet Explorer-де оны ашу қажет.
Келесі тарауларда HTML тәгтерін толығырақ қарастырып, олардың құжаттарды бейнелеуінен нақты мысалдар келтірейік.
Бақылау сұрақтары:
Web-парақ дегеніміз не және олар қалай жасалады?
HTML тілі қандай қызмет атқарады?
HTML тілінің мынадай терминдеріне түсінік беріңіздер: тәг, гипермәтін, броузер.
HTML тәгтерінің қандай түрлері бар? Олардың жазылу синтаксисі қандай?
Тәг атрибуттары не үшін қолданылады? Олардың жазылу ережелерінен мысалдар келтіріңіздер.
Ескейп-тізбектер қандай мақсатта қолданылады, қалай жазылады?
HTML құжаттары қалай дайындалады? Оларды қалай өзгертуге болады?
Практикалық сабақ №10
HTML тілінің негізгі тәгтері
Теориялық материалдарды оқып бекіту сұрақтарына жауап беріңіз;
Тапсырмаларды өз бетіңізбен орындаңыз, нәтижесін оқытушыға көрсетіңіз.
Қысқаша теория
Программаны оқу ыңғайлы болуы үшін әрбір жол тиісінше қосымша шегіністер арқылы жазылады, бірақ жалпы HTML құжаты үшін оның қажеті жоқ. Тіпті, броузерлер HTML-файлдардағы жолдың соңы символын және көптеген бос орындарды есепке алмайды. Тәгтерді оқу жеңіл болуы үшін, олардың төмендегі мысалдағыдай жол басынан ығыстырылып орналасуы дұрыс деп есептеледі:
Менің алғашқы парағым
1-ші мысал
Сәлем!
Бұл HTML – құжаттың ең қарапайым мысалы.
Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың
түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер
бар. Мәтін ішіне суреттер орналастыруға да болады.
тәгінің атрибуттарын және олардың мүмкін мәндерін айтып беріңіздер.
Мәтін түсін, фон түсін қалай беруге болады?
тәгінің SIZE атрибутының мәндері қалай жазылады?
Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда не істеуге болады?
Практикалық сабақ №11
Теориялық материалдарды оқып бекіту сұрақтарына жауап беріңіз;
Тапсырмаларды өз бетіңізбен орындаңыз, нәтижесін оқытушыға көрсетіңіз.
Қысқаша теория
HTML-құжаттың үзінділерін (фрагменттерін) экранда бейнелеу тәсілдерін өзгертіп, гиперсілтемелер мен суреттерді пайдалануды меңгеру және оның қаріптерін безендіру істері оларды форматтау деп аталады.
6.1. Қаріптерді форматтау
HTML-да қаріптерді форматтаудың екі жолы бар. Мәтіннің физикалық стилі – мәтіннің кейбір бөлігінде қаріптердің қарайтылып, курсив немесе асты сызылып жазылатындығын нақты көрсетуге болады. Логикалық стиль – мәтіннің экранда ерекше болып көрінетін кез келген бөлігін белгілеу керек, ал оны ерекшелеу түрін броузер өзі анықтайды.
6.1.1. Физикалық стиль
Физикалық стиль деп қаріптің түрленуі жайлы броузерге берілетін нақты нұсқауларды айтады. Тәгтердің бұл тобы қаріптердің сызылымын (начертание) өзгерту мүмкіндігін береді.
Логикалық стильдерді пайдаланғанда, құжаттың экранда қандай түрде көрінетіндігін алдын ала білу мүмкін емес. Логикалық стильді әр броузер әр түрлі етіп қабылдайды. Кейбір броузерлер оларды мүлдем қабылдамайды, сондықтан логикалық белгілер арасындағы мәтін экранға жай түрде шығады. Көп тараған логикалық стиль белгілері:
– ағылшыннның emphasіs – акцент деген сөзінен, ол курсив қаріптерге ұқсас болып келеді.
– ағылшынның strong emphasіs – ерекше ақцент деген сөз, ол қарайтылған қаріп түрінде көрінеді.
– бастапқы мәтін фрагменттері үшін пайдалануға негізделген.
– ағылшынның sample – нұсқау (үлгі) деген сөзі. Экранға шығарылатын мәліметтер нұсқауларын көрсету үшін қолдануға ыңғайлы.
– ағылшынның keyboard – пернетақта (клавиатура) сөзі. Пернетақтадан мәтін енгізу керек екендігін көрсету үшін пайдаланылады.
– ағылшынның varіable – айнымалы сөзі. Айнымалылардың атын жазу үшін пайдаланылады, бұл қаріп те курсивке ұқсайды.
Тапсырмалар:
1. Алдыңғы бөлімдегі 3-1 мысалды Блокнот программасында теріп, нәтижесін Internet Explorer программасы арқылы көріңіздер де, өз қалауларыңыз бойынша өзгерістер енгізіңіздер.
2. Сырғымалы жолдарға келтірілген 3-2 мысалды Блокнот программасында теріп, оны 3-2 мысал.htm деп сақтап алып, нәтижесін Internet Explorer программасы арқылы көріңіздер де, келесі өзгерістер енгізіңіздер:
а) сырғымалы жолдардың биіктігін ауыстыру;
ә) бірінші сырғымалы жолдағы мәтін түрін қызылмен, екінші жолдағы мәтін түрін – көкпен бояу;
б) абзацтан кейінгі көлденең сызықтарды әр түрлі түстерге бояу, оның қалыңдығы мен ұзындығын өз қалауларыңызша өзгерту керек.
3. Алдын ала дайындалған lab6.htm файлын (төменде келтірілген) ашып келесі өзгертулерді енгізіңіз:
а) Тақырып және бөлім аттарын ортаға қойыңыз;
ә) Бірініші абзацтың түсін қызыл, екінші абзацтың түсін – көк, үшінші абзацтың түсін жасыл етіп өзгертіңіз;
б) Әр абзацтан кейін көлденең сызықтар сызып, олардың түстерін және ендерін қалауларыңызша өзгертіңіз;
в) Мәтіннің фонын сұр түске өзгертіңіз.
4. lab6.htm файлын ашып келесі өзгертулерді енгізіңіз:
а) pr4.htm, pr5.htm, pr6.htm, pr7.htm құжаттарына және Orantang.jpg, Popugay.jpg, Monky.jpg суреттеріне гиперсілтеме жасаңыз.
ЕСКЕРТУ: lab3.htm, pr4.htm, pr5.htm, pr6.htm, pr7.htm құжаттары және Orantang.jpg, Popugay.jpg, Monky.jpg суреттері алдын ала дайындалып компьютердің ішіндегі Мои документы немесе басқа бір жұмыс бумасының ішінде орналасуы тиіс. Олардың орнына 2-1 мысал, 2-2 мысал, тағы сол сияқты дайындалған файлдарды қолдануға болады.
Бақылау сұрақтары
HTML құжатын форматтау дегеніміз не?
Физикалық стиль жасауға қажет тәгтер тізімін келтіріңіздер. Олардың атрибуттары бола ма?
Логикалық стильдер дегеніміз не? Кең тараған логикалық стиль тәгтерін көрсетіңіздер.
Жоғарғы және төменгі индекстер қандай тәгтер арқылы жазылады?
Гиперсілтеме түсін қалай өзгертеміз, қарастырылған, курсор көрсетіп тұрған сілтемелер түрін басқаша ету қалай орындалады?
Мәтін фоны ретінде суретті қалай пайдалануға болады?
Түрлі түстердің RGB-кодтары дегеніміз не? Сарғыш жасыл түстің RGB-кодын қалай есептеп шығаруға болады?
Гиперсілтеме қалай құрылады?
атрибуты мәні ретінде қандай сөз тіркестерін алуға болады?
Ішкі сілтемелер дегеніміз не?
Орнатылған анкерге сілтеме жасау үшін не істеу керек?
HTML-құжатқа сурет орналастыру үшін қандай тәг қолданылады? Оның атрибуттарын атап шығыңыздар.
Суреттердің көлемін қалай өзгертуге болады?
Пиксель ұғымын қалай түсінесіздер?
Сырғымалы жолдар қалай ұйымдастырылады?
Суреттік бейнелерді сырғытуға бола ма?
Сырғымалы жолдар жасау тәгінің қандай атрибуттары бар, олардың мәндері неге тең бола алады?
Сырғымалы жолды екі бағытқа да кезектестіре отырып жылжытуға бола ма?
Сырғыту жылдамдығын қалай өзгертеміз?
Жолды жоғары, төмен сырғытуға бола ма?
Практикалық сабақ № 12-13
Теориялық материалдарды оқып бекіту сұрақтарына жауап беріңіз;
Тапсырмаларды өз бетіңізбен орындаңыз, нәтижесін оқытушыға көрсетіңіз.
Қысқаша теория
HTML тілі мәтін абзацтарының сыртқы пішімін толық анықтауға мүмкіндік береді. Абзац элементтерін үлкейтуге, кішірейтуге, қалыңдатып немесе қисайтып, астын сызып жазуға, тізім түрінде белгілеуге болады. Енді тізімдер жасайтын мүмкіндіктердің бырсыпырасын қарастырайық. Жалпы тізім элементтері арнайы тәгтермен қоршалып, экранға шығарылғанда олардың сол жақтарында тізім белгілері орналасады.
7.1. Нөмірленбеген тізімдер
(unordered list – реттелмеген тізім) тәгтері арасында орналасқан мәтіндер нөмірленбей, бірақ белгіленіп жазылған тізімдер ретінде қарастырылады. Мұнда тізімнің әрбір жаңа элементін (list – тізім) белгісінен бастап жазу қажет. Мысалы, экранда жасыл түсті әріптермен терілген мынадай тізім жасау үшін:
Сәуле;
Мақсат;
Данияр;
Ержан
төмендегідей түрде HTML тілі мәтінін Блокнотта теріп, Internet Explorer-де 4-1 мысалды көріп шығу керек:
4-1 мысал
Белгіленген тізім жолдары
- Сәуле;
- Мақсат;
- Данияр;
- Ержан
... Сәлем!
Бұл HTML – құжаттың ең қарапайым мысалы.
Мәтіндер алты түрлі көлеммен көрсетіле алады, олардың
түсін де, қаріп типін де, фон түсін де өзгертетін мүмкіндіктер
бар. Мәтін ішіне суреттер орналастыруға да болады.
қарайтылған қаріп түрі
<І> қисайтылған курсивпен жазылған қаріп түрі
асты сызылған қаріп түрі
белінен сызылған қаріп түрі
жазба машинкасындағы сияқты
...
Пример простого документа
Формы HTML-документов
Таблица
Если в таблице два тега TR, то в ней две строки. |
Если в строке три тега TD, |
то в ней |
три столбца. |
Сәрсенбі күнгі сабақ кестесі
Сәрсенбі күнгі
сабақ
кестесі
Сәрсенбі күнгі
сабақ
кестесі тәгінің атрибуттарын және олардың мүмкін мәндерін айтып беріңіздер.
Мәтін түсін, фон түсін қалай беруге болады?
тәгінің SIZE атрибутының мәндері қалай жазылады?
Егер сіз көрсеткен қаріп типі тұтынушы компьютерінде болмаған жағдайда не істеуге болады?
3 тапсырма. Форматтаудың арнайы командалары
Жаңа абзац ашатын арнайы <Р> тәгі бос жол енгізіп, жаңа абзацты алдыңғы мәтін жолдарынан бөліп тұрады.
22 сурет
1. HTML файлы мәтінінің ... <Р> Сәрсенбі күнгі
сабақ
кестесі
...
Сәрсенбі күнгі сабақ кестесі
Сәрсенбі күнгі
сабақ кестесі
Сәрсенбі күнгі >
сабақ кестесі
SIZE="7"> Сәрсенбі күнгі >
сабақ кестесі
Сәрсенбі күнгі >
сабақ кестесі </I>
тәгінде көрсетіледі. Осы тәгтің BGCOLOR= ... атрибуты құжаттың фон түсін, ТЕХТ= ... атрибуты жалпы мәтін түсін анықтайды. LINK= ... және VLINK= ... атрибуттары әлі қаралмаған және қаралған гиперсілтемелік сөздер түсін тағайындайды.
RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:
...
Сәрсенбі күнгі
сабақ кестесі
|
Достарыңызбен бөлісу: |
