<metakeywords>Інформатика, клас, урок, на тему, 10 клас, .</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, .</metakeywords>
-
==Тема==
+
== Тема ==
-
*'''Теги. Каркас веб-сторінки.'''
+
-
==Мета==
+
*'''Теги. Каркас веб-сторінки.'''
-
*Розповісти про основні команди html-мови для створення сайту. Познайомити зі структурою web-сторінки.<br>
+
-
==Хід уроку==
+
== Мета ==
-
===Вступ===
+
*Розповісти про основні команди html-мови для створення [[Структура веб-сайтів, різновиди веб-сайтів|сайту]]. Познайомити зі структурою web-сторінки.<br>
+
+
== Хід уроку ==
+
+
=== Вступ ===
Насамперед, потрібно сказати, що створення веб-сторінки відбувається у '''звичайному блокноті.'''<br>
Насамперед, потрібно сказати, що створення веб-сторінки відбувається у '''звичайному блокноті.'''<br>
-
Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням ''.html'', а потім сторінка проглядається будь-яким браузером. <br>
+
Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням ''.html'', а потім сторінка проглядається будь-яким [[Презентация на тему: Что такое Веб - Браузер|браузером]] . <br>
<br>
<br>
Строка 21:
Строка 23:
[[Image:Sozddd.jpg|480px|Теги]]
[[Image:Sozddd.jpg|480px|Теги]]
+
<br>
-
===Основні теги===
+
=== Основні теги ===
Мова HTML складається з команд - '''тегів''', розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці. <br>
Мова HTML складається з команд - '''тегів''', розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці. <br>
Строка 32:
Строка 35:
Тег <br> непарний – він є командою до переносу рядка і ставиться там, де необхідно виконати дану команду.
Тег <br> непарний – він є командою до переносу рядка і ставиться там, де необхідно виконати дану команду.
+
<br> [[Image:Tegsss.jpg|480px|Теги]]
-
[[Image:Tegsss.jpg|480px|Теги]]
+
<br> Кожна web-сторінка повинна містити тег ''<HTML>'', розташований на самому початку. Цей тег описує документ як web-сторінку, написану на мові HTML.
-
+
Безпосередньо за дескриптором <HTML> зазвичай йде тег ''<HEAD>'', який вказує на наявність [[Оформление текста|тексту]], що містить ім'я і додаткові відомості про сторінку.
-
Кожна web-сторінка повинна містити тег ''<HTML>'', розташований на самому початку. Цей тег описує документ як web-сторінку, написану на мові HTML.
+
-
+
-
Безпосередньо за дескриптором <HTML> зазвичай йде тег ''<HEAD>'', який вказує на наявність тексту, що містить ім'я і додаткові відомості про сторінку.
+
<br>
<br>
Строка 48:
Строка 49:
У цьому розділі зазвичай розміщується тег ''<TITLE>'', який служить для позначення імені сторінки, яке відображається в заголовку вікна браузера. Назва Web-Сторінки може складатися символи букв, цифр, пробілу.
У цьому розділі зазвичай розміщується тег ''<TITLE>'', який служить для позначення імені сторінки, яке відображається в заголовку вікна браузера. Назва Web-Сторінки може складатися символи букв, цифр, пробілу.
+
<br> [[Image:Zagolovvok.jpg|480px|Теги]]
-
[[Image:Zagolovvok.jpg|480px|Теги]]
+
<br> Далі слідує тег ''<BODY>'' – він вказує на початок власне "тіла" html-сторінки. (англ. ''Body-'' тіло)
-
+
-
+
-
Далі слідує тег ''<BODY>'' – він вказує на початок власне "тіла" html-сторінки. (англ. ''Body-'' тіло)
+
Тут розміщується весь вміст, контент сторінки:
Тут розміщується весь вміст, контент сторінки:
Строка 58:
Строка 57:
*текст
*текст
*графіка
*графіка
-
*аудіо і відеоматеріали
+
*аудіо і [http://xvatit.com/it/audio_television/ відеоматеріали ]
*таблиці
*таблиці
*інші елементи сторінки, які може бачити відвідувач сайту.
*інші елементи сторінки, які може бачити відвідувач сайту.
+
<br> [[Image:Bodyys.jpg|480px|Теги]]
-
[[Image:Bodyys.jpg|480px|Теги]]
+
<br> <br> '''Графічна''' [http://xvatit.com/it/fishki-ot-itshki/ інформація] використовується на веб-сторінці за допомогою одинарного тега «img», атрибути якого прописуються поруч і перелічуються через пробіл:
+
<br> [[Image:Ris111.jpg|480px|Теги]]
-
<br> '''Графічна''' інформація використовується на веб-сторінці за допомогою одинарного тега «img», атрибути якого прописуються поруч і перелічуються через пробіл:
+
<br> 1. src - задає Url-Адресу зображення
-
+
-
+
-
[[Image:Ris111.jpg|480px|Теги]]
+
-
+
-
+
-
1. src - задає Url-Адресу зображення
+
2. width - ширину зображення
2. width - ширину зображення
Строка 82:
Строка 77:
<br>
<br>
-
===Структура каркас Web-Сторінки===
+
=== Структура каркас Web-Сторінки ===
-
+
[[Image:Struktur.jpg|480px|Теги]]
[[Image:Struktur.jpg|480px|Теги]]
-
+
<br> Побудуємо каркас майбутнього Html-Документа:
-
Побудуємо каркас майбутнього Html-Документа:
+
<html>
<html>
Строка 102:
Строка 95:
</html>
</html>
-
<br> Слід зазначити, що до вибору імені web-сторінок потрібно ставитися серйозно, тому що саме імена використовуються пошуковими системами для створення власної бази даних про всі сайти.
+
<br> Слід зазначити, що до вибору імені web-сторінок потрібно ставитися серйозно, тому що саме імена використовуються пошуковими системами для створення власної [[Поняття про бази даних та їх види. Повні уроки|бази даних]] про всі сайти.
Таким способом, пошукові сайти допоможуть користувачеві швидко знайти сторінки, які йому потрібні
Таким способом, пошукові сайти допоможуть користувачеві швидко знайти сторінки, які йому потрібні
Строка 112:
Строка 105:
{{#ev:youtube|CFCK8V4JvIM}}
{{#ev:youtube|CFCK8V4JvIM}}
-
==Самоконтроль==
+
== Самоконтроль ==
-
''1. Що таке тег? ''
+
''1. Що таке тег? ''
-
''2. За що відповідає команда HEAD? ''
+
''2. За що відповідає команда HEAD? ''
-
''3. Навіщо потрібний тег BODY? ''
+
''3. Навіщо потрібний тег BODY? ''
-
''4. Структура html-сторінки. ''
+
''4. Структура html-сторінки. ''
<br>
<br>
-
==Список використаної літератури==
+
== Список використаної літератури ==
-
''1. Урок на тему: « Html-Теги», Гаврилов С. А., м. Дніпродзержинськ. ''
+
''1. Урок на тему: « Html-Теги», Гаврилов С. А., м. Дніпродзержинськ. ''
-
''2. Урок на тему: «Каркас Web-Сторінки», Потапенко Ю. Н., м. Чоп. ''
+
''2. Урок на тему: «Каркас Web-Сторінки», Потапенко Ю. Н., м. Чоп. ''
-
''3. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
+
''3. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
''4. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
+
''4. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
''5. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008. ''
+
''5. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008. ''
-
''6. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
+
''6. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
+
<br>
----
----
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
-
''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
<br>
-
+
----
----
+
<br> '''Над уроком працювали'''
-
'''Над уроком працювали'''
+
Гаврилов С. А.
-
Гаврилов С. А.
+
Потапенко Ю. Н.
-
Потапенко Ю. Н.
+
Соловйов М. С.
-
+
-
Соловйов М. С.
+
+
<br>
----
----
-
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
Розповісти про основні команди html-мови для створення сайту. Познайомити зі структурою web-сторінки.
Хід уроку
Вступ
Насамперед, потрібно сказати, що створення веб-сторінки відбувається у звичайному блокноті.
Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням .html, а потім сторінка проглядається будь-яким браузером .
Основні теги
Мова HTML складається з команд - тегів, розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці.
Теги розділяються на парні і непарні.
Наприклад, тег <p> і </p> є парним, бо перший відкриває, а другий закриває абзац. Разом вони утворюють своєрідний контейнер, де розміщений текстовий фрагмент.
Тег <br> непарний – він є командою до переносу рядка і ставиться там, де необхідно виконати дану команду.
Кожна web-сторінка повинна містити тег <HTML>, розташований на самому початку. Цей тег описує документ як web-сторінку, написану на мові HTML.
Безпосередньо за дескриптором <HTML> зазвичай йде тег <HEAD>, який вказує на наявність тексту, що містить ім'я і додаткові відомості про сторінку.
У цьому розділі зазвичай розміщується тег <TITLE>, який служить для позначення імені сторінки, яке відображається в заголовку вікна браузера. Назва Web-Сторінки може складатися символи букв, цифр, пробілу.
Далі слідує тег <BODY> – він вказує на початок власне "тіла" html-сторінки. (англ. Body- тіло)
інші елементи сторінки, які може бачити відвідувач сайту.
Графічнаінформація використовується на веб-сторінці за допомогою одинарного тега «img», атрибути якого прописуються поруч і перелічуються через пробіл:
1. src - задає Url-Адресу зображення
2. width - ширину зображення
3. height – висоту зображення
4. align - вирівнювання зображення на сторінці (по лівому, правому, по центру)
Структура каркас Web-Сторінки
Побудуємо каркас майбутнього Html-Документа:
<html>
<head>
<title>Моя перша сторінка </title>
</head>
<body> Уміст сторінки </body>
</html>
Слід зазначити, що до вибору імені web-сторінок потрібно ставитися серйозно, тому що саме імена використовуються пошуковими системами для створення власної бази даних про всі сайти.
Таким способом, пошукові сайти допоможуть користувачеві швидко знайти сторінки, які йому потрібні
Будь-яка web-сторінка може виявитися знайденою пошуковою системою – слід тільки задати певний набір ключових слів сторінки.
Самоконтроль
1. Що таке тег?
2. За що відповідає команда HEAD?
3. Навіщо потрібний тег BODY?
4. Структура html-сторінки.
Список використаної літератури
1. Урок на тему: « Html-Теги», Гаврилов С. А., м. Дніпродзержинськ.
2. Урок на тему: «Каркас Web-Сторінки», Потапенко Ю. Н., м. Чоп.
3. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
4. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
5. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
6. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Гаврилов С. А.
Потапенко Ю. Н.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
