<metakeywords>Інформатика, клас, урок, на тему, 10 клас, .</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, .</metakeywords>
-
<br> '''Тема: теги. Каркас веб-сторінки.'''
+
== Тема ==
-
'''Мета:''' Розповісти про основні команди html-мови для створення сайту. Познайомити зі структурою web-сторінки.<br>
+
*'''Теги. Каркас веб-сторінки.'''
-
'''Хід уроку:'''
+
== Мета ==
-
<br>
+
*Розповісти про основні команди html-мови для створення [[Структура веб-сайтів, різновиди веб-сайтів|сайту]]. Познайомити зі структурою web-сторінки.<br>
-
Насамперед, потрібно сказати, що створення веб-сторінки відбувається у ''звичайному блокноті.''<br>
+
== Хід уроку ==
-
Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням ''.html'', а потім сторінка проглядається будь-яким браузером. <br>
+
=== Вступ ===
-
<br>
+
Насамперед, потрібно сказати, що створення веб-сторінки відбувається у '''звичайному блокноті.'''<br>
-
[[Image:Sozddd.jpg|540x401px|Sozddd.jpg]]
+
Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням ''.html'', а потім сторінка проглядається будь-яким [[Презентация на тему: Что такое Веб - Браузер|браузером]] . <br>
+
<br>
+
[[Image:Sozddd.jpg|480px|Теги]]
+
<br>
+
=== Основні теги ===
-
'''Основні теги. '''<br>
+
Мова HTML складається з команд - '''тегів''', розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці. <br>
-
Мова HTML складається з команд - ''тегів'', розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці. <br>
+
Теги розділяються на '''парні і непарні'''.
-
+
-
Теги розділяються на ''парні і непарні''.
+
Наприклад, тег ''<p>'' і ''</p>'' є парним, бо перший відкриває, а другий закриває абзац. Разом вони утворюють своєрідний контейнер, де розміщений текстовий фрагмент.
Наприклад, тег ''<p>'' і ''</p>'' є парним, бо перший відкриває, а другий закриває абзац. Разом вони утворюють своєрідний контейнер, де розміщений текстовий фрагмент.
Строка 33:
Строка 35:
Тег <br> непарний – він є командою до переносу рядка і ставиться там, де необхідно виконати дану команду.
Тег <br> непарний – він є командою до переносу рядка і ставиться там, де необхідно виконати дану команду.
+
<br> [[Image:Tegsss.jpg|480px|Теги]]
+
<br> Кожна web-сторінка повинна містити тег ''<HTML>'', розташований на самому початку. Цей тег описує документ як web-сторінку, написану на мові HTML.
-
[[Image:Tegsss.jpg|501x347px|Tegsss.jpg]]
+
Безпосередньо за дескриптором <HTML> зазвичай йде тег ''<HEAD>'', який вказує на наявність [[Оформление текста|тексту]], що містить ім'я і додаткові відомості про сторінку.
-
+
-
+
-
+
-
+
-
+
-
Кожна web-сторінка повинна містити тег ''<HTML>'', розташований на самому початку. Цей тег описує документ як web-сторінку, написану на мові HTML.
+
-
+
-
Безпосередньо за дескриптором <HTML> зазвичай йде тег ''<HEAD>'', який вказує на наявність тексту, що містить ім'я і додаткові відомості про сторінку.
+
<br>
<br>
-
{{#ev:youtube| Qmbmghml8qs&feature=related}}
+
{{#ev:youtube|sJvH9dD1_uY}}
<br>
<br>
Строка 53:
Строка 49:
У цьому розділі зазвичай розміщується тег ''<TITLE>'', який служить для позначення імені сторінки, яке відображається в заголовку вікна браузера. Назва Web-Сторінки може складатися символи букв, цифр, пробілу.
У цьому розділі зазвичай розміщується тег ''<TITLE>'', який служить для позначення імені сторінки, яке відображається в заголовку вікна браузера. Назва Web-Сторінки може складатися символи букв, цифр, пробілу.
+
<br> [[Image:Zagolovvok.jpg|480px|Теги]]
-
+
<br> Далі слідує тег ''<BODY>'' – він вказує на початок власне "тіла" html-сторінки. (англ. ''Body-'' тіло)
-
[[Image:Zagolovvok.jpg|552x379px|Zagolovvok.jpg]]
+
-
+
-
+
-
+
-
<br>
+
-
+
-
Далі слідує тег ''<BODY>'' – він вказує на початок власне "тіла" html-сторінки. (англ. ''Body-'' тіло)
+
Тут розміщується весь вміст, контент сторінки:
Тут розміщується весь вміст, контент сторінки:
Строка 67:
Строка 57:
*текст
*текст
*графіка
*графіка
-
*аудіо і відеоматеріали
+
*аудіо і [http://xvatit.com/it/audio_television/ відеоматеріали ]
*таблиці
*таблиці
*інші елементи сторінки, які може бачити відвідувач сайту.
*інші елементи сторінки, які може бачити відвідувач сайту.
-
<br>
+
<br> [[Image:Bodyys.jpg|480px|Теги]]
-
+
-
[[Image:Bodyys.jpg]]
+
-
+
-
+
-
+
-
+
-
+
-
<br> ''Графічна'' інформація використовується на веб-сторінці за допомогою одинарного тега «img», атрибути якого прописуються поруч і перелічуються через пробіл:
+
-
+
+
<br> <br> '''Графічна''' [http://xvatit.com/it/fishki-ot-itshki/ інформація] використовується на веб-сторінці за допомогою одинарного тега «img», атрибути якого прописуються поруч і перелічуються через пробіл:
-
[[Image:Ris111.jpg]]
+
<br> [[Image:Ris111.jpg|480px|Теги]]
-
1. src - задає Url-Адресу зображення
+
<br> 1. src - задає Url-Адресу зображення
2. width - ширину зображення
2. width - ширину зображення
Строка 95:
Строка 77:
<br>
<br>
-
'''Структура каркас Web-Сторінки.'''
+
=== Структура каркас Web-Сторінки ===
-
[[Image:Struktur.jpg|521x406px|Struktur.jpg]]
+
[[Image:Struktur.jpg|480px|Теги]]
-
Побудуємо каркас майбутнього Html-Документа:
+
<br> Побудуємо каркас майбутнього Html-Документа:
<html>
<html>
Строка 113:
Строка 95:
</html>
</html>
-
<br> Слід зазначити, що до вибору імені web-сторінок потрібно ставитися серйозно, тому що саме імена використовуються пошуковими системами для створення власної бази даних про всі сайти.
+
<br> Слід зазначити, що до вибору імені web-сторінок потрібно ставитися серйозно, тому що саме імена використовуються пошуковими системами для створення власної [[Поняття про бази даних та їх види. Повні уроки|бази даних]] про всі сайти.
Таким способом, пошукові сайти допоможуть користувачеві швидко знайти сторінки, які йому потрібні
Таким способом, пошукові сайти допоможуть користувачеві швидко знайти сторінки, які йому потрібні
Строка 119:
Строка 101:
Будь-яка web-сторінка може виявитися знайденою пошуковою системою – слід тільки задати певний набір ключових слів сторінки.
Будь-яка web-сторінка може виявитися знайденою пошуковою системою – слід тільки задати певний набір ключових слів сторінки.
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>
-
Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].
+
----
-
Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].
+
<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.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Гаврилов С. А.
Потапенко Ю. Н.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
