Кыргызстан, ДЖалал-Абад
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Был в сети 05.12.2024 06:53
Орунбаев Замирбек Токтосунович
Директор, информатика мугалими
37 лет
19 232
1 652 
Местоположение
Специализация
HTML барагынын структурасы 9-класс
Категория:
Информатика
31.10.2018 12:27
Просмотр содержимого документа
«HTML барагынын структурасы 9-класс»
HTML барагынын структурасы
Башы
Контейнер
Тулкусу
Тэгдер
- 1 .
…
Параграф тэги жана анын атрибуттары - 2. … Баш сөз тэги жана анын атрибуттары
- h1, h2, h3, h4, h5, h6
Тэгдер
- …
- …
файлга шилтеме /a берилген папкадагы файлга шилтеме a href =“ papka / faildynAty.html ” папкадагы файлга шилтеме /a папканын ичиндеги файлга шилтеме a href =“ ../ faildynAty.html ” файлга шилтеме /a -Папканын сыртындагы файлга шилтеме. " width="640"
Тэгдер
- Гипершилтеме(ссылка) теги менен иштөө
- Атрибуттары:
- a href =“ faildynAty.html ” файлга шилтеме /a
- берилген папкадагы файлга шилтеме
- a href =“ papka / faildynAty.html ” папкадагы файлга шилтеме /a папканын ичиндеги файлга шилтеме
- a href =“ ../ faildynAty.html ” файлга шилтеме /a -Папканын сыртындагы файлга шилтеме.
google дан издөө Сайтка шилтеме href =“ mailto:[email protected] ” Электрондук почта Электрондук почтага шилтеме name =“ bashyna ” Илинчек белги(якорь) href =“# bashyna ” Башына Илинчек белгиге шилтеме " width="640"
Тэгдер
- href =“ http//www.google.ru ” google дан издөө Сайтка шилтеме
- href =“ mailto:[email protected] ” Электрондук почта Электрондук почтага шилтеме
- name =“ bashyna ” Илинчек белги(якорь)
href =“# bashyna ” Башына Илинчек белгиге
шилтеме
сүрөт коюучу тэг. Атрибуттары: align =top, right, left түздөө border =сан рамка коюу " width="640"
Тэгдер
- img src=url сүрөт коюучу тэг.
- Атрибуттары:
- align =top, right, left түздөө
- border =сан рамка коюу
img src = url M: href =sistema.html img src = curot/sistema.png " width="640"
Тэгдер
- Сүрөттөн гипершилтеме жасоо .
- href = http://super.kg img src = url
- M: href =sistema.html img src = curot/sistema.png
ХЕДЕР (САЙТТЫН ШАПКАСЫ)
ФУТЕР ( АВТОРДУК УКУК ТУУРАЛУУ МААЛЫМАТТАР )
НАВИГАЦИЯ (МЕНЮ)
НЕГИЗГИ КОНТЕНТ (МААЛЫМАТТАР)
1-сапча, 1-мамыча 1-сапча, 2-мамыча 1-сапча, 3-мамыча .. -сапча .. -мамыча " width="640"
Таблица тэги
td 1-сапча, 1-мамыча
маалымат1 маалымат 2 маалымат3 1-сапча, 2-мамыча 1-сапча, 3-мамыча
.. -сапча
Таблица тэги
1-сапча, 1-мамыча
1-сапча, 2-мамыча
2-сапча, 1-мамыча
1-сапча, 3-мамыча
2-сапча, 2-мамыча
3-сапча, 1-мамыча
3-сапча, 2-мамыча
2-сапча, 3-мамыча
3-сапча, 3-мамыча
Таблица тэги
colspan =?
rowspan =?
Мамычаларды бириктир
Сапчаларды
бириктир
Таблица тэги
ХЕДЕР (САЙТТЫН ШАПКАСЫ)
ФУТЕР ( АВТОРДУК УКУК ТУУРАЛУУ МААЛЫМАТТАР )
НЕГИЗГИ КОНТЕНТ (МААЛЫМАТТАР)
НАВИГАЦИЯ (МЕНЮ)
Таблица
Таблицанын чектери
Ячейкалар арасындагы аралык
Ячейканы кошуу
Таблицанын туурасы (px менен) Таблицанын туурасы (% менен) Строка таблицы (в точках) Түздөө (проценты от ширины страницы) Таблицанын ячейкасы(мамыча) Ммычаларда Түздөө (должна быть внутри строки) Мамычаларды бириктирүү Сапчаларды бириктирүү Мамычанын туурасы(px) (в точках) Мамычанын туурасы( % ) Ячейканын түсү (проценты от ширины страницы) Таблицанын баш сөзү баш сөздү түздөө (как данные, но жирный шрифт и центровка) Растягивание по колонке Растягивание по строке Желаемая ширина Ширина в процентах (в точках) Цвет ячейки (проценты ширины таблицы) Таблицанын темасы Түздөө (сверху/снизу таблицы CSS Стилдердин каскаддык таблицасы Ар бир эреже «селектордон» жана «аныктоодон» турат. Селектор – бул тэг, ал эми аныктоо - бул тэгдин касиети жана мааниси Стилдердин таблицасы - бул тэгдерге колдонулуучу «эрежелердин топтому» M: p { color : #FF00FF ; } P - тэг , { } стилдер ушундай кашаанын ичине жазылат Color - «аныктоо» тегдин касиети ( тэг менен анын касиети « : »белгиси менен ажыратылат жана « ; » белгиси менен аяктайт ) #FF00FF - касиеттин мааниси CSS Стилдердин каскаддык таблицасын документке чиркөөнүн 3 ыкмасы М: 2. ыкмасы : Касиеттерди .. тегинин ичинде, документтин башында көрсөтүлөт 3. ыкмасы : Бир таблицаны бир нече документти форматтоого колдонушат. Ал үчүн стилдердин таблицассы CSS форматында сакталган бир документте сакталат М: kelbet.css CSS Стилдердин каскаддык таблицасын документке чиркөө href =" css/style.css " type =" text/css " rel =" stylesheet " Index . html style . css CSS Стилдердин каскаддык таблицасы Селектор. Селектордун 3 түрү СЕЛЕКТОР ЭРЕЖЕЛЕР CSS Стилдердин каскаддык таблицасы Селектор. Селектордун 3 түрү Касиети 1 : мааниси ; Касиети 2 : мааниси ; … }(тэг селектору) 3 . .aty1 { Касиети 1 : мааниси ; Касиети 2 : мааниси ; … } (класс селектору) 2 . #aty1 { Касиети 1 : мааниси ; Касиети 2 : мааниси ; … } (идентификатор селектору) CSS Стилдердин каскаддык таблицасы Селектор. Группалык селекторлор. 2 . p, #aty1, h3 { Касиети 1 : мааниси ; Касиети 2 : мааниси ; … } (идентификатор селектору) CSS Стилдердин каскаддык таблицасы Селектор. Псевдоселекторлор 1 . a: link #aty1, h3 { 3 . a: hover #aty1, h3 { Касиети 1 : мааниси ; Касиети 1 : мааниси ; Касиети 2 : мааниси ; Касиети 2 : мааниси ; … } … } 2 . a: vizited #aty1, h3 { 4 . a: active #aty1, h3 { Касиети 1 : мааниси ; Касиети 1 : мааниси ; Касиети 2 : мааниси ; Касиети 2 : мааниси ; … } … } CSS Стилдердин каскаддык таблицасы Шрифттердин үй-бүлөсү Font-family CSS Стилдердин каскаддык таблицасы Шрифттердин үй-бүлөсү Font-size Шрифттин өлчөмүнүн чен бирдиктери, базалык бирдиги сөздөр менен CSS Стилдердин каскаддык таблицасы Шрифттердин үй-бүлөсү Font-style,weight Курсивделген шрифт : Жаңы сапча (красная строка) font-style : italic ; text-indent : 20px ; Семиздүүлүгү(жирность): font-weght : normal | bold | 100-900; Тексттин декорациясы text-decoration : underline | overline | line-through | none; Текстти түздөө text-align : left | center | right | justify; CSS Стилдердин каскаддык таблицасы Рамкалар(чектер) Border Border - width : 2px Border - style : solid Border - color : #344040 top righ t left bottom CSS Стилдердин каскаддык таблицасы Тизмелер, Маркерлер List-style-type : circle List-style-position : inside List-style-image : url(..) CSS Стилдердин каскаддык таблицасы Кыскартылган жазуулар CSS Стилдердин каскаддык таблицасы Блок түрүндөгү модель түшүнүгү Браузер үчүн ар бир тэг –бул ички , сырткы талаага ээ болгон жана рамка менен чектелген контейнер болуп эсептелет. Блок баракта ошол талаалардын жана рамканын сандык маанилеринин суммасына барабар top Сырткы талаа ( margin ) Рамка ( border ) Ички талаа ( padding ) right left Тегдин ичиндеги маалымат bottom Бийиктиги ( height ) CSS Стилдердин каскаддык таблицасы Блоктун туурасы жана бийиктиги. Туурасы ( width ) Сырткы талаа ( margin ) Рамка ( border ) Ички талаа ( padding ) Тегдин ичиндеги маалымат overflow : hidden | auto | scroll | visible CSS Стилдердин каскаддык таблицасы Блок тегдери. … … CSS Стилдердин каскаддык таблицасы Фондук түстөр, сүрөттөр менен иштөө. background - color : #303060 ; background - image : url (../curot/ curot.png); background - repeat : repeat; no-repeat; repeat-x; repeat-y; background - position : x y; Домен жана Хостинг түшүнүгү Домен жана Хостинг түшүнүгү Интернеттин жөнөкөйлөтүлгөн модели Ip.10.175.123.6 Ip.09.198.113.5 Ip.17.144.122.6 Ip.14.148.122.3 DNS сервер http://www.super.kg HTML,jpg Домен жана Хостинг түшүнүгү Хостинг – бул, биздин сайт жашай турган жер. Башкача айтканда , хостинг – бул, интернет сайттар жайгаша турган виртуалдык мейкиндик . Домен – бул , хостингде жайгашкан сайттын уникалдуу аты (дареги ). Домен жана Хостинг түшүнүгү Домендик аттар http:// 194.34.45.8 / index.html DNS Domain Name System http:// super.kg / index.html Домен жана Хостинг түшүнүгү Домендик аттар Экинчи деңгээлдеги домендик ат http:// super. kg Сайттын аты Географиялык Же башка белгиси Домен жана Хостинг түшүнүгү Домендик аттар Үчүнчү деңгээлдеги домендик ат http:// media . super. kg Домендик аттар Домен жана Хостинг түшүнүгү Домендик аттар .kg -Кыргызстан .com -Комерциялык .kz - Казакстан .net - Тармактык .uz - Өзбекстан .info - Информ-лык .ru - Россия .org – Бюджеттик орг. .us - АКШ .museum - Музейлер .ua -Украина .tv - Телевидение .fr -Франция ж.б. .edu -Билим берүү
Свидетельство об участии
БЕСПЛАТНО!
Index . html style . css " width="640"
Вебинар для учителей
Полезное для учителя
