HTML тілін оқыту бойынша зертханалық тапсырмалар дайындау
Зертханалық жұмыс №1
Тақырыбы: HTML тілінде қарапайым web-парақ құру
Жұмыс мақсаты: HTML тілінде қарапайым Web-беттерді құрып үйрену.
Қысқаша теориялық мағлұматтар:
HTML тілі - web-бет мәтіндеріне кірістірілетін және абзацты, қаріп түрін түзетуді, сыртқы файлдарға деген сілтемелерді, басқа web- парақтар немесе сол web-беттің бөліктеріне деген сілтемелерді анықтайтын бұйрықтар (тегтер) жиынтығы.
Web-бет – экранда браузер арқылы көруге болатын мәтіні кірістірілген және дискіде жеке файл түрінде сақталатын, сонымен қатар қосымша жеке файлдарда сақталынатын мультимедия-иллюстрациялы (суреттер, видео, аудио және т.б.) сілтемелері бар ерекше құжат.
Тегтердің көбі ашылатын және жабылатын тегтерден тұратын контейнерді құрайды. Тегтерді бас әріптермен де, кішкентай әріптермен де теруге болады.
Web-бет ... тегтерінде орналасып, екі бөліктен тұрады: атауы және браузерде бейнеленетін мазмұны.
Парақ тақырыбы ... тегтерінде орналасады. Тақырып құрамына ... тегтерінде орналасатын және браузер терезесінің жоғарғы жолында бейнеленетін беттің тақырыбы кіреді.
Сондай-ақ тақырып құрамына қарау кезінде бейнеленбейтін мега- тегтер кіреді, олар беттің бараузерде дұрыс бейнеленуіне жауап беретін, сонымен қатар бетті сипаттайтын және іздеу жүйелерінің жұмысын қарастыратын кілттік сөздері болып табылады.
Браузерде бейнелетін беттің мазмұны ...
Құжат денесі
- HTML- құжаты мысалында фон ретінде "bак.gif” кішкентай графикалық бейнесі пайдаланылатын болады.
ü backcolor =#ffffff (yellow)– фонның түсін анықтайды (сары).
ü text = #0000ff (blue) – мәтін түсін анықтайды (көк).
ü Bgcolor – құжат мәтінінің түсін анықтайды. Парақша айналасының түсі өзгеруі мүмкін болғандықтан, мәтіннің сәйкес түсін таңдай білу қажет. Ол үшін келесі атрибуттар қолданылады:
· text - құжат мәтінінің түсін анықтайды;
· link - гипермәтіндік сілтеме бойынша өту жүзеге асырылатын мәтіннің белгіленген элементін басқан кездегі түсін анықтайды;
· vlink - бұрын қаралған құжат сілтемесінің түсін анықтайды;
· alink - тышқан курсоры бағытталып, оның оң жақ батырмасы басылған кездегі сілтеме түсін анықтайды, яғни тура сілтемеге өтер уақыт алдында.
Ескерту: HTML тіліндегі код Блокнот мәтіндік редакторында теріліп, *.html кеңейтпесімен сақталуы керек. Сонда ол файл веб-бет түрінде сақталады. Оны кез-келген браузермен көруге болады (Internet Explorer, Opera, Mozilla Firefox және т.б.).
Зертханалық жұмыс №2
Тақырыбы: Мәтінді форматтаудың негізгі элементтері.
Жұмыстың мақсаты: HTML тілінде жолды ауыстыру, абзацтарды түзету мен көлденең жолақтарды жасап үйрену.
Қысқаша теориялық мағлұматтар:
НTML-де мәтінді форматтаудың негізгі элементтеріне келесілер жатады:
v
,
– жолдарды ажыратады, сонымен қатар абзацты ерекшелеп көрсететін бос жолды қосады (абзац тегі). Оның негізгі атрибуттары:
- align, left, center, right, justify шегіністерін білдіреді (
Абзац мәтіні
);
- style – мәтін стилі (
v
– жолды ауыстыру үшін пайдаланылады (жолды үзіп, жаңа жолға көшу тегі). Сlear атрибуты =
тегінде сіз белгілеген нүктеде объектіні мәтінмен қоршалуын тоқтату үшін және мәтінді объектінің сыртындағы бос жерде жалғастыру үшін пайдаланылады. Объектіден кейін жалғасатын мәтін clear = атрибутының left, right немесе all мәндерімен түзеледі:
–
- мәтін жақын сол жақ бұрыштан бастап жалғастырылатын болады.
–
мәтін жақын оң жақ бұрыштан бастап жалғастырылатын болады.
–
- сол жақ та, оу жақ та аудандар босаған уақытта мәтін жалғастырылатын болады.
v - (No Break, жолды үзбеу) браузерге мәтінді бір жолда, оны тоқтатпай бейнелеуге бұйрық береді
v , - қазіргі заманғы беттң құруда беттің html кодының блоктарына арналған ыңғайлы контейнер ретінде пайдаланылады, оны динамикалық тұрғыда басқару оңай – ауыстыру, шегіністерді реттеу, жасыру және т.б. (
элементіне ұқсас). Оның кіріктірілген атрибуты бар:
- align, left, center, right, justify шегіністерін бағыттайды ( Бөлім мәтіні ).
v
- көлденең сызықты (жолақты) құру үшін пайдаланылады. Егер сызық барлық жолға емес, оның қандай да бір бөлігіне, мысалы, 40% бөлігіне құру керек болса, онда команда былай беріледі:
= 40%>. Кең сызықты құру үшін оның енін белгілеу керек. (қалып бойынша – пиксельдермен беріледі):
. Оның келесідей атрибуттары бар:
- align - түзету (мәндері - left, center, right);
- color – жолақ түсі;
- size – пиксель бойынша биіктігі;
- width – экранның енінен пиксель бойынша немесе пайыз бойынша ені;
- noshade - «жазық» жолақшаны шығару (себебі қалып бойынша браузер жолақтарды «көлемді» етіп салады).
Зертханалық жұмыс №3
Тақырыбы: Түстерді және мәтіндерді форматтаудың кейбір элементтерін аықтау.
Жұмыстың мақсаты: Мәтінді форматтаусыз бейнелеуді, әр түрлі стильлерді белгілеп үйренуді, яғни НТМL тілінде мәтін өлшемі мен түсін басқаруды үйрену.
Қысқаша теориялық мағлұматтар:
Мәтінді форматтаудың кейбір элементтері:
v ... - ақпарат бөлігін ерекшелеу және оған әр түрлі стиль беру .шін пайдаланылады.
мәтін
SPAN элементінің көмегімен мәтіндегі әрбір әріпке әр түрлі стиль қолдануға болады (түс, өлшем, және т.б.) Атрибуттары:
· title – пайда болатын көмек (всплывающая подсказка);
· unselectable – аталған элементте мәтінді ерекшелеуге мүмкіндік береді немесе бермейді (on – мүмкіндік береді, off – мүмкіндік бермейді);
· style – мәтін стилі ( font-size: 20pt; font-style: italic; color: red).
Мәтін
v
- тег мәтінді форматтаусыз бейнелеуге мүмкіндік береді.
мен
тэгтерінде берілген бүкіл мәтін сіз тергендей дәлдікте бейнеленетін болады, сонымен қатар мәтін моноендік (моноширинный) қаріппен берілетін болады, ол мәтінді бағандарға реттеу мәселесін жеңілдетеді. Элемент барлық браузерлерде жұмыс істемейді, ол width атрибутына ие болуы мүмкін. Бұл атрибут мәтінге берілетін бос кеңістіктіке енді белгілейді.
...мәтін...
v - тег негізгі мәтіннен цитаталарды ерекшелеу үшін пайдаланалынады. Ол контейнер болып табылады және форматтаудың кез келген тегтерінен тұруы мүмкін. - белгілі бір атрибуттарды көрсеткен жағдайда мәтіннің сол және оң жағынан өрістерді қосады. Атрибуттары (n –пиксельдер саны):
- leftmargin=n –барлық бет үшін сол жақ өрісті анықтайды;
- topmargin=n - жоғарғы өрісті анықтайды.
Мәтін
- құжат авторының идентификациясы мен автор адресін көрсету үшін қолданылады. Осында авторлық құқықтар туралы мәліметтер енгізіледі. Бұл элемент құжаттың не басында, не аяғында орналасады. Бұл элементте жиі құжаттың құрылуы және жаңалану күні көрсетіледі. Бұл оқырмандарға өздері қарастырып жатқан нұсқаны бұрындары қарастырған-қарастырмағанын білуге көмектеседі. Осы тэгтердің арасында орналасқан мәтін әдетте браузермен курсив түрінде көрсетіледі.
< ADDRESS>байланыс ақпараты
Құжаттағы түстерді анықтау
Түсті анықтау үшін қажетті атрибутты пайдаланғаннан кейін не түс атауын (тырнақша ішінде), не оның он алты сандық мәнін қою керек. Түсті он алты сандық санмен белгілеу үшін ол түсті үш құраушыға бөліп белгілеуге болады: қызыл (R), жасыл (G), көк (B); оның әрқайсысы 0-ден бастап FF-ке дейінгі мәнге ие.
RGB форматындағы түсті жазу мысалдары кестеде берілген:
Аталған түстерден басқа қосымша түстер де бар. Олардың барлық саны 216 түс. Түсті белгілеу үшін аталған терминдердің орнына RGB- кодтарын пайданалануға болады, мысалы: # FF0000 – кызыл. RGB- кодтарды ауыстыра отырып, мәтін мен фонның қажетті түстерін таңдап алуға болады. RGB-кодары бар барлық түстер 1.3.1-суретте берілген
Зертханалық жұмыс №4
Тақырыбы: Мәтінді форматтау.
Жұмыстың мақсаты: HTML тілінде физикалық және логикалық стильдердің элементтерін пайдалана отырып, мәтінді форматтауды үйрену.
Қысқаша теориялық мағлұматтар:
1) Мәтін үзінділерін физикалық стиль элементтерімен безендіру.
Мәтіннің жеке бөліктерін ерекшелеу үшін келесі физикалық стильдерді
пайдалануға болады:
· – қарайтылған (Bold);------- мысал
· - курсив (Italic);--------- мысал
· - асты сызылған (Underline);------- мысал
· - сызылып тасталған (STRIKE);-------- мысал
· - типографиялық еселеу;
· - моноширинді мәтін (моноширинный текст) ;
· - үлкен өлшемді әріптер ;
· - кіші өлшемді әріптер ;
Жоғарғы және төменгі индекстер:
· және - жоласты индекс, мысалы, H2SO4.
· және - жолүсті индекс, мысалы, (a2 - b2).
2) Мәтін үзінділерін логикалық стиль элементтерімен безендіру.
Логикалық стильдер , , тегтері сияқты сөздерді ерекшелеп көрсетеді, олар программа мәтінін жазғанда немесе цитат (дәйектеме) келтірген кезде қолданылады. Логикалық стильдерді пайдалану кезінде браузер экранға не шығаратынын алдын ала айту қиын. Әртүрлі браузерлер экранға логикалық стильмен берілген символдарды әртүрлі етіп шығаруы мүмкін. Бұрынғы браузерлер логикалық стильде берілген қаріптерді ерекшелемей, жай қаріп түрінде бейнелей беруі де ықтимал. Ең көп таралған логикалық стильдер:
ü ... - Ағылшынның emphasis – акцент сөзінен шыққан, яғни курсив түрінде берілетін мәтін бөлігін қоршап тұратын белгілер болып табылады.
ü ...- Ағылшынның strong emphasis – күшті акцент дегені, мәтін ішінде қарайтылған қаріп болып көрсетіледі. B және STRONG элементтері бір біріне ұқсас болып келеді.
ü ... - Программа мәтінін көрсету үшін қолданылатын стиль түрі.
ü ... - Ағылшынның sample – мысал, үлгі деген сөзі, программа жұмысы нәтижелерін ендері бірдей моношрифт түрінде экранға шығарарда пайдаланылады.
ü ...- Ағылшынның keyboard – пернетақта (клавиатура) қысқаша сөзі. Пернелерден енгізілген сөз тіркестерін көрсету мақсатында қолданылады.
ü ... - Ағылшынның variable – айнымалы сөзі, программадағы айнымалы атауларын жазу үшін енгізілген стиль түрі, қисайтылған курсивке ұқсас қаріп түрі.
ü ... - мәтінді цитата немесе сілтеме түрінде безендіреді. Бейнеленген мәтін курсив түрінде көрсетіледі. Атрибуты: TITLE - пайда болатын көмек (всплывающая подсказка).
Логикалық стиль элементтерін қолданып, мәтінді безендіру.
3) Ағымдағы қаріптің өлшемін, түсі мен түрін белгілеу.
v - Ашылушы және жабылушы тегтер арасында орналасқан мәтін қаріпінің түсін, өлшемі мен түрін өзгертуге мүмкіндік береді. Атрибуттары:
- SIZE – қаріп өлшемін анықтайды. , мұндағы i әріптің алғашқы өлшеміне қатысты 1 мен 7 аралығында;
- COLOR – мәтін түсін анықтауға мүмкіндік береді. Не он алты сандық жүйенің RGB-мәнімен, не 16 базалық түстердің бірімен беріледі ;
- FACE – қолданыстағы қаріпті анықтайды. Times New Roman, Arial, Tahoma,
Courier, Courier New пайдаланыңыз. Олар барлығында орнатылған. .
v - құжат мәтіні бейнелетін негізгі қаріпті анықтайды.
тегінің аяқтаушы (жұп) тегі жоқ. Сіз болашақта құжаттың кез келген бөлігінің қаріпін оңай өзгерте аласыз, ол үшін тегін пайдаланыңыз. жабушы тегінен кейін тегінің іс- әрекеті қайта жанданады. Қалып бойынша қолданылатын қаріп мәндері құжатта бірнеше рет өзгеруі мүмкін, яғни тегі құжатта кез келген рет пайда болуы мүмкін. Атрибуттары:
§ size – барлық құжат бойынша негізгі өлшемді белгілеуге мүмкіндік береді. Мүмкін мәндері: 1-ден 7 дейінгі бүтін сандар, қалып бойынша оның мәні 3-ке тең болып беріледі.
§ faсe – қаріп гарнитурын анықтайды. (face параметрін әзірше пайдаланбау кеңесі беріледі, себебі оны браузерлердің барлық түрлері қолдана алмайды).
Зертханалық жұмыс №5
Тақырыбы: Тізімдер.
Жұмыстың мақсаты: HTML құжатына нөмірленген, нөмірленбеген тізімдерді және анықтау тізімін енгізуді үйрену.
Қысқаша теориялық мағлұматтар:
Тізімдер мәтінді құрудың маңызды құралы болып табылады және барлық тілдік таңбаларда пайдаланылады. HTML – тізімдерінің келесі түрлері бар:
- нөмірленбеген тізім (реттелмеген, маркерленген);
- нөмірленген тізім (реттелген);
- анықтау тізімі;
- енгізілген (ішкі) тізім.
Тізім тақырыбы міндетті элемент болып табылмайды, ол жұп тегінің көмегімен жасалады:
Тізім тақырыбы
Тізім мазмұны жеке жолдардан тұрады. Әрбір жол бір реттік тегпен белгіленеді (List Item – тізім элементі), мысалы:
Тізім жолының мазмұны.
1. - МАРКЕРЛЕНГЕН ТІЗІМ
UL қысқартуы аталған элементтің басқа атауынан туындайды: Unordered List – реттелмеген тізім.
Үндеу бойынша маркерлер кішкентай қара дөңгелектер түрінде беріледі. Маркерлердің басқа түрлерін type атрибутының көмегімен орнатуға болады. Ол келесі мәндерге ие болуы мүмкін:
- қарайтылған дөңгелек нүкте;
- шеңбер;
- кішкентай қара шаршы.
Тапсырма-1. элементін қолданып әртүрлі типті маркерленген тізімді құрыңыз.
2. . . . - НӨМІРЛЕНГЕН ТІЗІМ.
OL қысқартуы Ordered List – реттелген тізім дегенді білдіреді.
Type атрибутының көмегімен нөмірленудің басқа түрін қолдануға болады.
- - маркерді бас әріптер түрінде орнатады (A, B, C …);
- - маркерді кішкентай әріптер түрінде орнатады (a, b, c …);
- - маркерді үлкен рим сандары түрінде орнатады (I, II, III …);
- - маркерді кішкентай рим сандары түрінде орнатады (i, ii,…);
- - маркерді араб сандары түрінде орнатады (1, 2, 3 …)
Тапсырма-2. <ОL> элементін қолданып, әртүрлі нөмірленген типті нөмірленген тізімді құрыңыз.
3. ... - АНЫҚТАУ ТІЗІМІ (Definition List-тан қысқартылып алынған).
· - - анықталатын терминді белгілейтін тег (DT –Definition Term-нен қысқартылып алынған);
· - - термин анықтамасы берілетін тег.
- және
- тегтерінің арасында орналасқан мәтінді барузер термин ретінде қабылдайды. Ал,
- тегінен кейін жүретін мәтін термин анықтамасы болып саналып, беттің сол жақ абзацынан шегініспен бейнеленеді.
Тақырыбы: WEB-беттегі графика.
Жұмыстың мақсаты: Веб-бетке графикалық суреттерді кірістіруді, сурет айналасындағы шекараның өлшемі мен қалыңдығын беруді, фондық сурет орнатуды, суреттің асты мен үсті, оң жағы мен сол жағындағы бос орынның өлшемін анықтауды үйрену.
Қысқаша теориялық мағлұматтар:
Суретті орнату. (Элемент ![]() ).
Бұл элемент құжат денесіне графикалық сурет орнату үшін пайдаланылады. Графикалық сурет дегеніміз: кішкентай пиктограммалар, суреттер, графикалық объектілері мен сурет карталары. Олар браузер терезесінің үлкен орнын алуы мүмкін. Web- беттегі суретті орнату жолы өте қарапайым және ![]() тегінің көмегімен орнатылады, ол BODY элементінің кез келген жерінде орналасуы мүмкін.
Сонымен қатар, сурет адресі src атрибутының мәнімен беріледі (атауы source – көзі (источник) сөзінен шыққан). Аталған атрибут ![]() тегіндегі міндетті атрибуттардың қатарына жатады.
Графикалық файлдар бетті сипаттайтын HTML файлының орналасқан бумасында орналасуы тиіс екендігін естен шығармау керек. Web-тегі график
Достарыңызбен бөлісу: |
