Мырзагужинов Нурсултан Келдигазыевич,
преподаватель спецдисциплин Семипалатинский финансово-экономический колледж им. Р. Байсеитова г.Семей,
Восточно-Казахстанская область,Казахстан
Сабақтың тақырыбы: №3 Абзацтың дискрепторы. Символдарды белгілеу стилі (жартылай қарайтылған, қисайтылған т.б). Мәтіннің алдын ала форматталуы. Web — беттерінің тізімі
Сабақтың типі: Жаңа материалды меңгеру, аралас
Сабақтың түрі: Дәріс, білім аукционы элементтерімен
|
Оқушылардың дайындық деңгейіне қойылатын талаптар |
|||
|
Базалық құзыреттілік |
Техника қауіпсіздігі мен өрт қауіпсіздігінің ережелерін сақтау; Үздіксіз өз бетімен білімдену қабілетін көрсете алу және кәсіби мамандығын жаңарту; Қазіргі ақпараттық технологияларды қолдану, мәліметтер қорына арналған бағдарлама жазу және сайт құру; Бағдарламалық қамтамасыздандыруды құру технологиясына қазіргі талаптар. Бағдарламалық қамамасыздандыруды құру талаптары мен бағдарламашының мүмкіндіктері. Бағдарламалық қамтамасыздандыруды құру принциптері. Белгілі бір мақсаты қойылған нақты есепті орындау мен жоспарлау. |
||
|
Кәсіптік құзыреттілік |
Есептер шешу кезінде мәліметтерді басқару және бағдарлама қатесін табуды жүргізу; Әртүрлі ғылым, техника, экономика, өндіріс салалар аумағынан есептерді барлық кезеңі бойынша, яғни берілуінен бастап нәтиже алуына дейінгі математикалық әдіспен шығаруды есептеу техникасының көмегімен жүзеге асыру және нәтижесін ЭЕМ-де көру; Тесттерді құру және бағдарламаларды тестілеу; Ақпараттарды өңдеудің автоматтандырылған жүйелерін тұрғызу; Бағдарламалық өнімді қорғау тәсілдері мен құралдарын қолдану. |
||
|
Сабақ мақсаттары
|
оқытушылық |
Абзацтың дискрепторы. Символдарды белгілеу стилін (жартылай қарайтылған, қисайтылған т.б.) құруды үйрету. |
|
|
тәрбиелік |
Оқушыларды мұқият тыңдай білуге, ой тұжырымдауға тәрбиелеу |
||
|
дамытушылық |
Оқушылардың HTML тілімен жұмыс істей білу дағдыларын дамныту |
||
Пәнаралық байланыс
|
Қамтамасыз ететін |
Пән: Мультимедиа технология Курс тақырыбы: 1.1 тақырып. Мультиедиалық технологиялар HTML5. |
|
Қамтамасыз етілетін |
Бағдарламалық қамтамасыздандыруды құру технологиясы Курс тақырыбы 4.3 тақырып. HTML құралдары web құжаттарын форматтау |
Сабақтың жабдықталуы
|
Көрнекілік құралдар |
Презентация, суреттер |
|
Таратпа материалдар |
Тәжірибелік жұмыс, ойынға қажетті заттар,тірек-конспект |
|
Оқытудың техникалық құралдары |
ДК, Блакнот, Power Point |
|
Әдебиет: негізгі |
|
|
Қосымша |
|
Сабақ мазмұны
|
Эле-мент № |
Сабақ элементі, қарастырылатың сұрақтар, оқытудың әдістері мен тәсілдері |
Қосымшалар, өзгерістер |
|
Ұйымдастыру (2 мин) 1) Кабинеттің сабаққа дайындығын тексеру 2) Компьютерлердің сабаққа дайындығын тексеру 3) Оқушылармен амандасу 4) Оқушыларды түгендеу 5) Сабақтың мақсатымен таныстыру |
||
|
Үй тапсырмасын сұрау (30 мин) Білім ауционы Шарты: Балалар, үй жұмысын сұрау білім аукционы түрінде өтеді. Аукцион шартымен таныс болыңыздар.Бүгінгі аукционымызда сауда «теңге» атты ақша бірлігімен жүргізіледі.Әзірше әр үш топтың қорында 50 теңден бар.Бұл — бастапқы капитал. Өз капиталыңызды көбейту — өз қолдарыңызда. Аукционға сұрақтар қойылады. Пән бойынша сұрақтың бастапқы бағасы — 10 теңге. Ең жоғары баға ұсынған соң сұрақ оқылады. Егер дұрыс жауап айтылса — баға құны сол студентке беріледі, ал қате жауап айтылса, онда студент өз капиталынан сол ақшаны қайтарады. Ескерту: егер топ қорында бар барлық сомаға сұрақ сатып алып қателессе, онда — банкрот, өкінішке орай, ол топ аукционға қатыса алмайды. Аукционға №1 лот. Сауданы бастаймыз. Бастапқы баға — 10 теңге. Кім жоғары баға береді? Бір, екі, үш. Сатылды! Дұрыс жауап берген жағдайда топ өз қорына теңге қосады. Сұрағы: HTML тілі қай жылы шықты, негізін кім қалады? Жауабы: HTML гипертекстік тілін (Hypertext Markup Language) 1989 жылы World Wide Web гипертекстік жүйесін бөлудің өңдеу технологиясының компоненттерінің бірі ретінде Тим Бернер-Ли ұсынғаны белгілі. №2 лот. Сауда жүргізіледі Сұрағы:HTML құжатына бейнелерді қосу Жауабы: <img src=”name”> №3 лот. Сауда жүргізіледі Сұрақ: Бағдарламалық қамтамасыздандырудың қателерінің түрлері? Жауабы: синтаксистік қателіктер, логикалық қателіктер, динамикалық қателіктер №4 лот. Сауда жүргізіледі Сұрақ: WWW аббревиатурасы нені білдіреді, қалай аударылады? Жауабы: «WWW» сөзі «World Wide Web - всемирная паутина» дегенді білдіреді. Интернет мәліметтерін жеңіл көруге болатын графикалық интерфейс мүмкіндігін береді. №5 лот. Сауда жүргізіледі Сұрағы: <Font> тегінің қызметі қандай? Жауабы: Әріптің мөлшерін, түсін және сызылымын таңдап алу үшін <font> тегін пайдаланамыз №6 лот. Сауда жүргізіледі Сұрағы: Синатксистік қателіктер дегеніміз не? Жауабы: бағдарлама мәтінін теру кезінде операторлардың қате жазылуы, операторларды айыру белгілерінің қойылмауы, бағдарлама соңының көрсетілмеуі және т.б. жатады. №7 лот. Сауда жүргізіледі Сұрағы: Тег дегеніміз не? Жауабы: HTML (HyperText Markup Language-гипермәтіндік белгілеу тілі) — қатаң ережелері бар компьютерлік тіл. HTML тілінде құжаттың авторы өз мәтінін тегтер деп аталатын символдар көмегімен арнайы файлға — Web-бетке айналдырады №8 лот. Сауда жүргізіледі Сұрағы: «HTML» аббревиатурасы нені білдіреді, қалай аударылады? Жауабы: «HTML» сөзі «HyperText Markup Language» - гипермәтінді құру тілі («язык разметки гипертекста») дегенді білдіреді № 9 лот. Сауда жүргізіледі. Сұрағы: Қандай тег HTML тілінде құжаттарында тақырыптарды білдіреді Жауабы: <h1> … <h6> № 10 лот: Сауда жүргізіледі. Сұрағы: < HEAD>… </HEAD> Жауабы: құжаттың тақырыптық бөлігі жазылады, жалпы құжат туралы мәлімет береді № 11 лот: Сауда жүргізіледі Сұрағы: «Салем!» деген сөздің түсі көк, өлшемі 6-ға тең? Жауабы: <font size=”6” color=”blue”> Салем! </font> № 12 лот: Сауда жүргізіледі Сұрағы: HTML құжатын жасау схемасы? Жауабы: ‹HTML› HTML құжатының басы ‹HEAD› тақырыптық бөліктің басы ‹TITLE›…‹/TITLE› құжат аты ‹/HEAD› тақырыптық бөліктің соңы ‹BODY› Құжат мәтінінің басы Құжат мәтіні ‹/BODY› Құжат мәтінінің соңы ‹/HTML› HTML құжатының соңы № 13 лот: Сауда жүргізіледі Сұрағы: Құжат фонының түсін анықтайды? Жауабы: ‹BODY BGCOLOR › № 14 лот: Сауда жүргізіледі Сұрағы: «Жоғарыдан төменге» бағдарламалау? Жауабы: бағдарламаны әзірлеудің бұл әдістемесінде әзірлеу мәселені шешу мақсатын анықтаудан басталып, одан кейін нақты бағдарламамен аяқталады. № 15 лот: Сауда жүргізіледі Сұрағы: Объектіге-бағытталған бағдарламалау негізгі 3 қасиетке бөлінеді, қандай? Жауабы: Инкапсуляцияларымен, мұрагерлігімен және полиморфизмімен. № 16 лот: Сауда жүргізіледі Сұрағы: Ең алғаш шыққан операциялық жүйе? Жауабы: MS-DOS № 17 лот: Сауда жүргізіледі Сұрағы: Веб портал? Жауабы: бағдарламаны әзірлеудің бұл әдістемесінде әзірлеу мәселені шешу мақсатын анықтаудан басталып, одан кейін нақты бағдарламамен аяқталады. № 18 лот: Сауда жүргізіледі Сұрағы: Жазылатын мәтін құжат тұлғасы деп аталатын … тегінің ортасында жазылады. Қай тег? Жауабы: ‹BODY› … ‹/BODY› |
||
|
Жаңа сабақ (15 мин) Пән: Бағдарламалық қамтамасыздандыруды құру технологиясыКурс тақырыбы: 4.3 тақырып. HTML құралдары web құжаттарын форматтау Сабақтың тақырыбы: №3 Абзацтың дискрепторы. Символдарды белгілеу стилі (жартылай қарайтылған, қисайтылған т.б). Мәтіннің алдын ала форматталуы. Web — беттерінің тізімі.
|
||
|
Жаңа сабақты бекіту (25 мин) Тәжірибелік жұмыс (карточка) Тәжірибелік жұмыс «Группаның тізімі» тегтер (блокнот) арқылы орындалады. Web-парақта тобыңыздың тізімін жасаңыз. Тақырыптың түсін, өлшнмін, ортаға, мәтінге әр түрлі қаріптер, (астын сызу, қисайтылған (курсив) және т.б.) пайдаланыңыз.
Сұрақ-жауап ойыны 1) Абзац тегінің параметрлері? 2) Жаңа жолға көшу қалай іске асады? 3) <HR> тегінің параметрлерін ата? 4) Тізімдер қалай құрылады? 5) Тізім түрлері және қалай белгіленеді? |
||
|
5 |
Сабақты қорытындылау, оқушыларды бағалау (6 мин) |
|
|
6 |
Үйге тапсырма беру (2 мин) Е.Ф Назаренко «Информационные технологии», 26-27 бет |
Оқытушы Н.К.Мырзагужинов КЕЛІСІЛДІӘдіскер Рахматуллина Р.М. (қолы) Т.А.Ә. « » 2015 ж.
Білім ауционы
Шарты:
Балалар, үй жұмысын сұрау білім аукционы түрінде өтеді.
Аукцион шартымен таныс болыңыздар.Бүгінгі аукционымызда сауда «теңге» атты ақша бірлігімен жүргізіледі. Әзірше әр үш топтың қорында 50 теңден бар. Бұл — бастапқы капитал. Өз капиталыңызды көбейту — өз қолдарыңызда.
Аукционға сұрақтар қойылады. Пән бойынша сұрақтың бастапқы бағасы — 10 теңге. Ең жоғары баға ұсынған соң сұрақ оқылады. Егер дұрыс жауап айтылса — баға құны сол студентке беріледі, ал қате жауап айтылса, онда студент өз капиталынан сол ақшаны қайтарады.
Ескерту: егер топ қорында бар барлық сомаға сұрақ сатып алып қателессе, онда — банкрот, өкінішке орай, ол топ аукционға қатыса алмайды.
Аукционға №1 лот. Сауданы бастаймыз. Бастапқы баға — 10 теңге. Кім жоғары баға береді? Бір, екі, үш. Сатылды! Дұрыс жауап берген жағдайда топ өз қорына теңге қосады.
Сұрағы: HTML тілі қай жылы шықты, негізін кім қалады?
Жауабы: HTML гипертекстік тілін (Hypertext Markup Language) 1989 жылы World Wide Web гипертекстік жүйесін бөлудің өңдеу технологиясының компоненттерінің бірі ретінде Тим Бернер-Ли ұсынғаны белгілі.
№2 лот. Сауда жүргізіледі
Сұрағы:HTML құжатына бейнелерді қосу
Жауабы: <img src=”name”>
№3 лот. Сауда жүргізіледі
Сұрақ: Бағдарламалық қамтамасыздандырудың қателерінің түрлері?
Жауабы: синтаксистік қателіктер, логикалық қателіктер, динамикалық қателіктер
№4 лот. Сауда жүргізіледі
Сұрақ: WWW аббревиатурасы нені білдіреді, қалай аударылады?
Жауабы: «WWW» сөзі «World Wide Web - всемирная паутина» дегенді білдіреді. Интернет мәліметтерін жеңіл көруге болатын графикалық интерфейс мүмкіндігін береді.
№5 лот. Сауда жүргізіледі
Сұрағы: <Font> тегінің қызметі қандай?
Жауабы: Әріптің мөлшерін, түсін және сызылымын таңдап алу үшін <font> тегін пайдаланамыз
№6 лот. Сауда жүргізіледі
Сұрағы: Синатксистік қателіктер дегеніміз не?
Жауабы: бағдарлама мәтінін теру кезінде операторлардың қате жазылуы, операторларды айыру белгілерінің қойылмауы, бағдарлама соңының көрсетілмеуі және т.б. жатады.
№7 лот. Сауда жүргізіледі
Сұрағы: Тег дегеніміз не?
Жауабы: HTML (HyperText Markup Language-гипермәтіндік белгілеу тілі) — қатаң ережелері бар компьютерлік тіл. HTML тілінде құжаттың авторы өз мәтінін тегтер деп аталатын символдар көмегімен арнайы файлға — Web-бетке айналдырады
№8 лот. Сауда жүргізіледі
Сұрағы: «HTML» аббревиатурасы нені білдіреді, қалай аударылады?
Жауабы: «HTML» сөзі «HyperText Markup Language» - гипермәтінді құру тілі («язык разметки гипертекста») дегенді білдіреді
№ 9 лот. Сауда жүргізіледі.
Сұрағы: Қандай тег HTML тілінде құжаттарында тақырыптарды білдіреді
Жауабы: <h1> … <h6>
№ 10 лот: Сауда жүргізіледі.
Сұрағы: <HEAD>… </HEAD>
Жауабы: құжаттың тақырыптық бөлігі жазылады, жалпы құжат туралы мәлімет береді
№ 11 лот: Сауда жүргізіледі
Сұрағы: «Салем!» деген сөздің түсі көк, өлшемі 6-ға тең?
Жауабы: <font size=”6” color=”blue”> Салем! </font>
№ 12 лот: Сауда жүргізіледі
Сұрағы: HTML құжатын жасау схемасы?
Жауабы: ‹HTML› HTML құжатының басы
‹HEAD› тақырыптық бөліктің басы
‹TITLE›…‹/TITLE› құжат аты
‹/HEAD› тақырыптық бөліктің соңы
‹BODY› Құжат мәтінінің басы
Құжат мәтіні
‹/BODY› Құжат мәтінінің соңы
‹/HTML› HTML құжатының соңы
№ 13 лот: Сауда жүргізіледі
Сұрағы: Құжат фонының түсін анықтайды?
Жауабы: ‹BODY BGCOLOR ›
№ 14 лот: Сауда жүргізіледі
Сұрағы: «Жоғарыдан төменге» бағдарламалау?
Жауабы: бағдарламаны әзірлеудің бұл әдістемесінде әзірлеу мәселені шешу мақсатын анықтаудан басталып, одан кейін нақты бағдарламамен аяқталады.
№ 15 лот: Сауда жүргізіледі
Сұрағы: Объектіге-бағытталған бағдарламалау негізгі 3 қасиетке бөлінеді, қандай?
Жауабы: Инкапсуляцияларымен, мұрагерлігімен және полиморфизмімен.
№ 16 лот: Сауда жүргізіледі
Сұрағы: Ең алғаш шыққан операциялық жүйе?
Жауабы: MS-DOS
№ 17 лот: Сауда жүргізіледі
Сұрағы: Веб портал?
Жауабы: бағдарламаны әзірлеудің бұл әдістемесінде әзірлеу мәселені шешу мақсатын анықтаудан басталып, одан кейін нақты бағдарламамен аяқталады.
№ 18 лот: Сауда жүргізіледі
Сұрағы: Жазылатын мәтін құжат тұлғасы деп аталатын … тегінің ортасында жазылады. Қай тег?
Жауабы: ‹BODY› … ‹/BODY›
Көп логиктер жинаған топты анықтаймыз.
Дәріс №3
Пән: Бағдарламалық қамтамасыздандыруды құру технологиясы
Курс тақырыбы 4.3 тақырып. HTML құралдары web құжаттарын форматтау
Сабақтың тақырыбы: №3 Абзацтың дискрепторы. Символдарды белгілеу стилі (жартылай қарайтылған, қисайтылған т.б). Мәтіннің алдын ала форматталуы. Web — беттерінің тізімі.
Мәтіннің абзацтарға бөлінуі
Мәтінді абзацтарға бөлу <Р> тегі арқылы орындалады. Абзацтар алдында тұратын <Р> таңбасы олардың арасына бір жол қалдырып бөліп отырады.
Бұл тегті жабатын </P> тәгін міндетті түрде жазу қажет емес, жазса - артық болмайды.
Бірнеше <Р> тегтерін қатар жазу бір тег жазғанмен бірдей болады.
Бұл тегтің бір ғана атрибуты бар, ол - мәтін шеттерін туралауды анықтайтын ALIGN атрибуты. Егер ол берілмесе, мәтін жолдың сол жақ шетіне тураланады. Кестеде осы атрибуттың мүмкін мәндері көрсетілген:
1– кесте Атрибуттардың мүмкін мәндері
|
Мәні |
Функциясы |
|
LEFT |
Мәтінброузертерезесініңсолжақшетінежақынжазылады |
|
CENTER |
Мәтін терезе ортасына орналасады |
|
RIGHT |
Мәтінброузертерезесініңоңжақшетінежақынжазылады |
|
JUSTIFY |
Мәтіндіброузертерезесініңекіжақшетінедежақынтураланыпжазылады |
Мысалы, мәтінортағажазылады:
<P ALIGN=CENTER>Текст</P>
<HR>тегіәртүрлікөлденеңсызықтаржүргізуүшінкерек. Бұлтегжабылмай, жалқыжазылатынтегболыпсаналады. Сызықалдындажәнесызықтанкейінбосжоленгізіледі.
<HR>тегініңбірнешеатрибуттарыбар, келесікестедесолардыңмәндерікөрсетілген.
Мысалы:
<HR ALIGN=“RIGHT” SIZE=“8”
WIDTH=“50%” >
2– кесте <HR> тегінің бірнеше атрибуттарының мәндері
|
Атрибут |
Атқаратын қызметі |
|
ALIGN |
Сызықты сол жақ, оң жақ шетке немесе жол ортасына жылжытады.Мүмкін мәндері: LEFT, CENTER, RIGHT |
|
WIDTH |
Сызықтың ұзындығын анықтайды, пиксельмен немесе терезе енінің пайызымен беріледі. Пайыз-бен берілсе, соңына % символы жазылады. |
|
SIZE |
Сызықтың қалыңдығын пиксельмен анықтайды. |
|
COLOR |
Сызықтың түсін анықтайды, түстің атауы немесе он алтылық коды беріледі. |
HTML тілі мәтін бөліктерін пішімдеудің логикалық (logіcal), әрі физикалық (physіcal) стильдерін жүзеге асыра алады.
Логикалық пішімдеу тэгтері
Мәтінді логикалық пішімдеу немесе белгілеу оның бөліктерін ерекшелеп, құжат құрылымын көрсете алады.
Мұнда мәтіннің екі негізгі бөлігін ерекшелеуге болады:
Мұнда ашылу тэгіне сәйкес жабылу тэгі болуы тиіс, олардың бірі болмай қалса, экрандағы мәтін бейнесі өзгеріп кетеді. Кез-келген тэг алдынан және артынан автоматты түрде бос жол пайда болады.
Логикалық стильдегі мәтін фрагменттерін енгізу тэгтері төменде көрсетілген.
|
Атрибут |
Атқаратын қызметі |
|
<EM> … </EM> |
Ағылшынның emphasіs — акцент сөзінен шыққан, яғникурсив түрінде берілетін мәтін бөлігін қоршап тұратын белгілер болып табылады. (аналогы <i>…</i>) |
|
<STRONG> … </STRONG> |
Ағылшынның strong emphasіs — күшті акцент дегені, мәтін ішінде қарайтылған қаріп болып көрсетіледі. (аналогы <b>…</b>) Экранға шығарылатын хабарлама үлгілерін демонстрациялау үшін ұсынылады. |
|
<CODE> … </CODE> |
Программа мәтінін көрсету үшін қолданылатын стиль түрі. Мәтін код немесе формула түрінде бейнеленеді (көп жағдайда Courier қаріпі түрінде) |
|
<SAMP> … </SAMP> |
Ағылшынның sample — мысал, үлгі деген сөзі, программа жұмысы нәтижелерін ендері бірдей моношрифт түрінде экранға шығарарда пайдаланылады |
|
<KBD> … </KBD> |
Ағылшынның keyboard — пернетақта (клавиатура)қысқаша сөзі. Пернелерден енгізілетін сөз тіркестерін көрсету мақсатында қолданылады. |
|
<VAR> … </VAR> |
Ағылшынның varіable — айнымалы сөзі, программадағы айнымалы аттарын жазу үшін енгізілген стиль түрі, қисайтылған курсивке ұқсас қаріп түрі. |
<P> … </P> |
Мұндай белгі абзацты анықтайды. <P> және </P> тэгтерінің ортасына жазылған мәтін бір абзацқа бөлінеді. |
Көп жағдайларда HTML құжаттарының тақырыптары болады. Олар <Hn>....</Hn> тэгтер арқылы жасалады, n–нің орнына 1-ден 6-ға дейін сан жазамыз. Осы тэгтер арасына мәтінімізді орналастырсақ, сізге белгілі көлемді тақырып шығады. Тақырыптың бірінші деңгейі-өте үлкен, алтыншы деңгейі-өте кіші. Тақырыптар тэгінің ALІGN атты атрибуты болады, ол абзацтың осындай атрибутымен бірдей, мәндері мына сөздердің біріне сәйкес келуі тиіс:
<H1> … </H1> — <H6> … </H6>
Физикалық пішімдеу тегтері
|
Атрибут |
Атқаратын қызметі |
|
<B> … </B> |
Қарайтылған қаріп |
|
<I> …</I> |
Курсивтік қаріп |
<U> … </U> |
Асты сызылған |
|
<S> … </S> |
Сызылған |
<strike> … </strike> |
Сызылып тастаған(аналогы <s>…</s>) |
|
<big> … </big> |
Негізгі қаріптен мәтін іріленіп жазылады. |
|
<small> … </small> |
Негізгі қаріптен мәтін майдаланып жазылады. |
<TT> … </TT> |
Баспа машинке-сіндегідей |
|
<BLINK>…</BLINK> |
Ерекшеленген мәтінге жарқырау эффектісін береді, ол тек Netcape браузерінде орындалады. |
|
<font size= “ ”>… </font> |
SІZE=…атрибуты әріптің көлемін (мөлшерін) тағайындайды. Әріптердің алдын ала берілетін жеті түрлі көлемі бар, олар 1-ден 7-ге дейінгі сандармен белгіленеді. Бұл сандар белгілі бір өлшем бірліктеріне сәйкес келмейді, тек санның мәні үлкейген сайын әріптің де мөлшері ұлғаяды. Егер сан көрсетілмесе, келісім бойынша ол 3-ке тең болып саналады. |
|
<font color= “ ”>…</font> |
COLOR=… атрибуты әріптің түсін таңдау мүмкіндігін береді, ол ағылшын тіліндегі мағынасы бар түйінді сөз арқылы (мысалы, RED - қызыл) немесе RGB жүйесіндегі он алтылық санмен (мысалы, #FF0000 — бұл да қызыл) берілуі мүмкін |
|
<font face= “ ”>…</font> |
FACE=… атрибуты қаріп (шрифт) типін береді. Осы атрибуттың мәні компьютерде орнатылған қаріптер атының біріне сәйкес келуі керек. <FONT FACE= “Tahoma”, “Arial”, “Verdana”>Бұл мәтін көрсетілген 3 қаріптің біреуімен көрсетіледі. </FONT> |
|
<SUP> … </SUP> |
Жоғарғы мәтін -- xиндекс |
|
<SUВ>…</SUВ> |
Төменгі мәтін -- xиндекс |
HTML-тізімін қолдану. Тізімдер. Тізімдер анықтамасы.
Тізімдердің (lіsts) НТМL тіліне енгізілуінің басты себебі — мәтіндік редакторлардың тізімдермен жұмыс істеу мүмкіндіктерінің мол болуы әсерінен деп айтуға болады. Тізім құрғанда оның жолдарын нөмірлеу немесе белгілеуді біртіндеп орындау қажет етілмей, бұл жұмысты программа өз міндетіне алады. Егер тізім жаңа жолмен толықтырылатын немесе оның бірі қысқартылатын болса, онда нөмірлеу реттілігі де автоматты түрде түзетіледі. Тізім нөмірленбей, тек белгіленетін кездерде әрбір жол алдына маркерлеу белгілері: сызықшалар, дөңгелекшелер, тіктөртбұрыштылар, ромбылар және де басқа да таңбалар қойылады. Осының нәтижесінде тізім оқуға ыңғайлы түрдегі «фирмалық» сипатқа ие болады.
Тізім жасау үшін қолданылатын тэгтерді шартты түрде екі топқа бөлуге болады: олардың біріншісі — тізімнің жалпы көрінісін анықтайтын атрибуттық сыртқы белгілер, ал екіншісі — оның құрылымын қалыптастыратын ішкі белгілер. Соңғы ішкі белгілер үшін тек бір ғана ашылу тэгі қолданылады.
Реттелмеген тізім
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады. Ал <li></li> тегі арасындағы үш сөзді жалпы <ul></ul> тегі арасына салса, тізім реттелмеген түрде алдына дөңгелектер қойылып, веб-бетте көрінеді.
<html>
<body>
<h4>Дөңгелек тізім:</h4>
<ul type=> <li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ul>
</body>
</html>
Сурет 1. Дөңгелек тізім
Реттелген тізім
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады. Ал <li></li> тегі арасындағы үш сөзді жалпы <ol></ol> тегіне салса, тізім реттелген түрде алдына реттік сандар қойылып, веб-бетке шығады.
<html>
<body>
<h4>Реттелген тізім:</h4>
<ol> <li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ol>
</body>
</html>
Сурет 2. Реттелген тізім
Бас әріппен реттелген
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады.
<ol></ol> тегінде type=«A» деп қолданылады, тырнақшадағы A бас әрпі тізімнің бас әріппен реттелетінін білдіреді.
Сурет 3. Реттелген тізім
Кіші әріппен реттелген
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады. <ol></ol> тегінде type=«a» деп қолданылады, тырнақшадағы a кіші әрпі тізімнің кіші әріппен реттелетінін білдіреді.
<html>
<body>
<h4>Кіші әріппен реттелген тізім:</h4>
<ol type=«a»>
<li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ol>
</body>
</html>
Сурет 4. Кіші әріппен реттелген тізім
Рим сандарымен реттелген
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады. <ol></ol> тегінде type=«I» деп қолданылады, тырнақшадағы I Роман саны тізімнің Роман санымен реттелетінін білдіреді.
<html>
<body>
<h4>Рим санымен реттелген тізім:</h4>
<ol type=«I»>
<li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ol>
</body>
</html>
Сурет 5. Рим санымен реттелген тізім
Кіші Рим сандарымен реттелген
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады.
<ol></ol> тегінде type=«i» деп қолданылады, тырнақшадағы I кіші Роман саны тізімнің кіші Роман санымен реттелетінін білдіреді.
<html>
<body>
<h4>
Кіші Рим санымен реттелген тізім:</h4>
<ol type=«i»>
<li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ol>
</body>
</html>
Сурет 6. Кіші рим санымен реттелген тізім
Дөңгелек белгімен реттеу
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады.
<ul></ul> тегінде type=«Disk» деп қолданылады, тізім алдында тұрған қара дөңгелек диск сияқты белгі екенін білдіреді.
<html>
<body>
<h4>Диск тәрізді белгі:</h4>
<ul type=«Disk»>
<li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ul>
</body>
</html>
Сурет 7. Диск тәрізді белгі
Шеңбер белгімен реттеу
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады. <ul></ul> тегінде type=«Circle» деп қолданылады, тізім алдында тұрған іші ақ дөңгелек сияқты белгі екендігін білдіреді.
<html>
<body>
<h4>Дөңгелек тәрізді белгі:</h4>
<ul type=«Circle»>
<li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ul>
</body>
</html>
Сурет 8. Дөңгелек тәрізді белгі
Төртбұрыш тәрізді белгі
<li></li> тегі арасына тізімге енетін сөздерді енгізуге болады. <ul></ul> тегінде type=«Square» деп қолданылады, бұл тізім алдында тұрған төртбұрыш сияқты белгі екенін білдіреді.
<html>
<body>
<h4>Төртбұрыш тәрізді белгі:</h4>
<ul type=«Square»>
<li>Математика</li>
<li>Тарих</li>
<li>Қазақ тілі</li>
</ul>
</body>
</html>
Сурет 9. Төртбұрыш тәрізді белгі
Анықтама тізімі
<dt></dt> тегі арқылы бір сөз беріледі, мыс., Жылқы. <dd></dd> тегі арқылы сол сөздің, яғни жылқының анықтамасы беріледі және ол екі тегте <dl></dl> орналасады.
<html>
<body>
<h4>Анықтама тізімі:</h4>
<dl>
<dt>Жылқы</dt>
<dd>Үй жануарының бірі</dd>
<dt>Қымыз</dt>
<dd>Жылқының сүті</dd>
</dl>
</body>
</html>
Сурет 10. Анықтама тізімі
Тізімдірдін мысалы:
Тізімдер келесідей белгіленеді:
<li> Web </li>
<li> Web </li>
<li> Web </li>
<li> Web </li>
Тізімдер <li></li> тэг арқылы белгіленеді. Тізімдердім үш символы бар:
o Іші боялмаған домалақ
<li> тэгінін type параметірі бар:
<li type="disk">,
<li type="circle">,
<li type="square">.
Оқытушы Н.К.Мырзагужинов
Тәжірибелік жұмыс
