<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вступ в HTML.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вступ в HTML.</metakeywords>
-
<br> '''Тема: Вступ в HTML.'''
+
== Тема ==
-
'''Мета:''' Ознайомити з технологією створення простих веб-сторінок за допомогою мови програмування HTML.
+
*'''Вступ в HTML.'''
-
'''Хід уроку:'''
+
== Мета ==
-
<br>
+
*Ознайомити з технологією створення простих веб-сторінок за допомогою мови [[О системном ПО и системах программирования|програмування]] HTML.
+
+
== Хід уроку ==
+
+
=== Поняття HTML ===
-
Перед початком вивчення цієї технології, потрібно сказати, що '''HTML''' – не тільки мова розмітки гіпертексту, а більш широке поняття, яке включає в себе Всесвітню Павутину, локальні комп'ютерні мережі, браузери, різноманітне програмне забезпечення, дизайн і т.д.
+
Перед початком вивчення цієї технології, потрібно сказати, що '''HTML''' – не тільки мова розмітки гіпертексту, а більш широке поняття, яке включає в себе [[Интернет и Всемирная паутина|Всесвітню Павутину]], локальні комп'ютерні мережі, браузери, різноманітне програмне забезпечення, дизайн і т.д.
<br>
<br>
-
[[Image:Htmllll.jpg|309x220px|htmllll.jpg]]
+
[[Image:Htmllll.jpg|320px|HTML]]
<br>
<br>
-
Після появи перших комп'ютерів, програмісти задалися метою створити зв'язок між ними для передачі даних. З технічної точки зору в такому з'єднанні не було нічого неможливого, і, оскільки комп'ютерна техніка розвивалася, комп'ютерні мережі стали з'являтися скрізь.
+
Після появи перших комп'ютерів, програмісти задалися метою створити зв'язок між ними для передачі даних. З технічної точки зору в такому з'єднанні не було нічого неможливого, і, оскільки [http://xvatit.com/it/comp_primochki/ комп'ютерна техніка] розвивалася, комп'ютерні мережі стали з'являтися скрізь.
<br>
<br>
-
[[Image:Xhtml000.jpg|162x178px|xhtml000.jpg]]
+
[[Image:Xhtml000.jpg|320px|HTML]]
<br>
<br>
Строка 29:
Строка 33:
Ідея всепланетної комп'ютерної мережі стала актуальною тоді, коли обчислювальні машини перестали бути власністю тільки установ і відомств; тобто коли з'явилися персональні комп'ютери.
Ідея всепланетної комп'ютерної мережі стала актуальною тоді, коли обчислювальні машини перестали бути власністю тільки установ і відомств; тобто коли з'явилися персональні комп'ютери.
-
Їх треба було підключити до глобальної мережі: так само, як це було зроблено раніше з телефонами і факсовими апаратами.
+
Їх треба було підключити до глобальної мережі: так само, як це було зроблено раніше з [http://xvatit.com/it/mobiles/ телефонами] і факсовими апаратами.
<br>
<br>
Строка 39:
Строка 43:
'''HyperText Markup Language''' (мова розмітки гіпертексту) давно перестав бути просто мовою програмування. Поняття HTML містить у собі різні способи оформлення гіпертекстових документів, дизайн, браузери і багато чого іншого. Вивчивши цю мову, можна проробляти складні речі простими способами і, головне, швидко – а це у комп'ютерному світі значить дуже багато.
'''HyperText Markup Language''' (мова розмітки гіпертексту) давно перестав бути просто мовою програмування. Поняття HTML містить у собі різні способи оформлення гіпертекстових документів, дизайн, браузери і багато чого іншого. Вивчивши цю мову, можна проробляти складні речі простими способами і, головне, швидко – а це у комп'ютерному світі значить дуже багато.
-
<br> '''Html-сторінка''' - документ, створений у вигляді гіпертексту на основі мови HTML, має розширення ''html (htm)'' і в гіпертекстових редакторах і браузерах мають загальну назву.
+
<br> '''Html-сторінка''' - документ, створений у вигляді [[Конспект уроку на тему: Гіпертекст. Гіпертекстові сторінки. Служба WWW.|гіпертексту]] на основі мови HTML, має розширення ''html (htm)'' і в гіпертекстових редакторах і браузерах мають загальну назву.
Гіпертекст найбільш підходяща мова для включення мультимедійних елементів у документи. Завдяки розвитку саме гіпертексту, більшість людей одержала можливість створювати власні мультимедійні продукти, поширюючи їх на CD і DVD-дисках.
Гіпертекст найбільш підходяща мова для включення мультимедійних елементів у документи. Завдяки розвитку саме гіпертексту, більшість людей одержала можливість створювати власні мультимедійні продукти, поширюючи їх на CD і DVD-дисках.
Строка 45:
Строка 49:
<br>
<br>
-
[[Image:Tattoo.jpg]]
+
[[Image:Tattoo.jpg|320px|HTML]]
<br>
<br>
-
Такі продукти, виконані у вигляді Html-Сторінок, не вимогливі до спеціальних програмних засобів, тому що всі потрібні інструменти (Веб-браузери) для роботи з такими даними стали частиною «джентльменського набору» програмного забезпечення на будь-якому ПК.
+
Такі продукти, виконані у вигляді Html-Сторінок, не вимогливі до спеціальних програмних засобів, тому що всі потрібні інструменти (Веб-браузери) для роботи з такими даними стали частиною «джентльменського набору» [[Презентація до теми: Програмне забезпечення.|програмного забезпечення]] на будь-якому ПК.
У такому випадку, користувач повинен лише підготувати тексти і малюнки, створити Html-Сторінки і зв'язати їх.
У такому випадку, користувач повинен лише підготувати тексти і малюнки, створити Html-Сторінки і зв'язати їх.
Строка 55:
Строка 59:
<br>
<br>
-
[[Image:Htmml.jpg]]
+
[[Image:Htmml.jpg|320px|HTML]]
<br>
<br>
Строка 61:
Строка 65:
Html-мова як основа Веб-сторінок відіграє важливу роль у розвитку нового напрямку в образотворчому мистецтві - '''Веб-дизайну'''.
Html-мова як основа Веб-сторінок відіграє важливу роль у розвитку нового напрямку в образотворчому мистецтві - '''Веб-дизайну'''.
-
Художник, намалювавши гарні картинки, ілюстрації і логотипи, повинен якось розмістити свої роботи в Мережі. І не просто розмістити, а продумати зв'язки між Веб-сторінками, щоб усі правильно «відгукувалися» на дії користувача, вражало його уяву і викликало бажання створити щось своє.
+
Художник, намалювавши гарні картинки, ілюстрації і логотипи, повинен якось розмістити свої роботи в Мережі. І не просто розмістити, а продумати зв'язки між [[Структура веб-сайтів, різновиди веб-сайтів|Веб-сторінками]], щоб усі правильно «відгукувалися» на дії користувача, вражало його уяву і викликало бажання створити щось своє.
<br>
<br>
-
[[Image:Dochtm.jpg]]<br>
+
[[Image:Dochtm.jpg|HTML]]<br>
<br>
<br>
-
'''Особливості гіпертексту.'''
+
=== Особливості гіпертексту ===
З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.
З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.
Строка 85:
Строка 89:
<br>
<br>
-
[[Image:Brozerss.jpg]] <br>
+
[[Image:Brozerss.jpg|320px|Браузер]] <br>
<br>
<br>
-
<br>
+
Але в документі Word механізм форматування схований від користувача і працювати з файлом можна лише в текстовому редакторі. У системі гіпертексту закладений інший принцип – такі документи можна відкривати в будь-якому [[Фішки для допитливих до теми «Робота в текстовому редакторі WordPad»|текстовому редакторі]] і бачити яким чином, наприклад, відформатований текст і т.д.
-
+
-
Але в документі Word механізм форматування схований від користувача і працювати з файлом можна лише в текстовому редакторі. У системі гіпертексту закладений інший принцип – такі документи можна відкривати в будь-якому текстовому редакторі і бачити яким чином, наприклад, відформатований текст і т.д.
+
Зрозуміло, що переглянути документ у відформатованому вигляді можна тільки в браузерах.
Зрозуміло, що переглянути документ у відформатованому вигляді можна тільки в браузерах.
Строка 105:
Строка 107:
*елементи, які створюють структуру гіпертекстового документа. Їхнє використання є необхідним і важливим моментом при побудові сторінки.
*елементи, які створюють структуру гіпертекстового документа. Їхнє використання є необхідним і важливим моментом при побудові сторінки.
*елементи, які створюють ефекти форматування. Їх використовують при конкретних вимогах до документу і при наявності фантазії і уміння розробника
*елементи, які створюють ефекти форматування. Їх використовують при конкретних вимогах до документу і при наявності фантазії і уміння розробника
-
*елементи, які управляють програмними засобами, встановленими на комп'ютері користувача
+
*елементи, які управляють програмними засобами, встановленими на [[Оцінювання до теми «Мій комп'ютер»|комп'ютері]] користувача
-
----
+
== Самоконтроль ==
-
<br>
+
''1. Що таке HTML? ''
-
<br> '''Самоконтроль:'''
+
''2. Яке розширення має Html-Сторінка? ''
-
1. Що таке HTML?
+
''3. Яким програмним забезпеченням можна переглядати веб-сторінки? ''
-
2. Яке розширення має Html-Сторінка?
+
''4. Назвіть кілька особливостей гіпертексту. ''
-
3. Яким програмним забезпеченням можна переглядати веб-сторінки?
+
''5. Основні елементи мови HTML. ''
-
4. Назвіть кілька особливостей гіпертексту.
+
<br>
-
5. Основні елементи мови HTML.
+
== Список використаної літератури ==
-
<br>
+
''1. Урок на тему: «Вступ в мову HTML», Гаврилюк М. І., м. Севастополь, АР Крим. ''
-
''Список використаної літератури:''
+
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
1. Урок на тему: «Вступ в мову HTML», Гаврилюк М. І., м. Севастополь, АР Крим.
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
+
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''
-
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
-
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
+
<br>
-
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
+
----
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
+
<br>
-
''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
----
-
Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].
+
<br> '''Над уроком працювали'''
-
Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].
+
Гаврилюк М. І.
+
Соловйов М. С.
+
+
<br>
+
+
----
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
Ознайомити з технологією створення простих веб-сторінок за допомогою мови програмування HTML.
Хід уроку
Поняття HTML
Перед початком вивчення цієї технології, потрібно сказати, що HTML – не тільки мова розмітки гіпертексту, а більш широке поняття, яке включає в себе Всесвітню Павутину, локальні комп'ютерні мережі, браузери, різноманітне програмне забезпечення, дизайн і т.д.
Після появи перших комп'ютерів, програмісти задалися метою створити зв'язок між ними для передачі даних. З технічної точки зору в такому з'єднанні не було нічого неможливого, і, оскільки комп'ютерна техніка розвивалася, комп'ютерні мережі стали з'являтися скрізь.
Ідея всепланетної комп'ютерної мережі стала актуальною тоді, коли обчислювальні машини перестали бути власністю тільки установ і відомств; тобто коли з'явилися персональні комп'ютери.
Їх треба було підключити до глобальної мережі: так само, як це було зроблено раніше з телефонами і факсовими апаратами.
HyperText Markup Language (мова розмітки гіпертексту) давно перестав бути просто мовою програмування. Поняття HTML містить у собі різні способи оформлення гіпертекстових документів, дизайн, браузери і багато чого іншого. Вивчивши цю мову, можна проробляти складні речі простими способами і, головне, швидко – а це у комп'ютерному світі значить дуже багато.
Html-сторінка - документ, створений у вигляді гіпертексту на основі мови HTML, має розширення html (htm) і в гіпертекстових редакторах і браузерах мають загальну назву.
Гіпертекст найбільш підходяща мова для включення мультимедійних елементів у документи. Завдяки розвитку саме гіпертексту, більшість людей одержала можливість створювати власні мультимедійні продукти, поширюючи їх на CD і DVD-дисках.
Такі продукти, виконані у вигляді Html-Сторінок, не вимогливі до спеціальних програмних засобів, тому що всі потрібні інструменти (Веб-браузери) для роботи з такими даними стали частиною «джентльменського набору» програмного забезпечення на будь-якому ПК.
У такому випадку, користувач повинен лише підготувати тексти і малюнки, створити Html-Сторінки і зв'язати їх.
Html-мова як основа Веб-сторінок відіграє важливу роль у розвитку нового напрямку в образотворчому мистецтві - Веб-дизайну.
Художник, намалювавши гарні картинки, ілюстрації і логотипи, повинен якось розмістити свої роботи в Мережі. І не просто розмістити, а продумати зв'язки між Веб-сторінками, щоб усі правильно «відгукувалися» на дії користувача, вражало його уяву і викликало бажання створити щось своє.
Особливості гіпертексту
З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.
Якщо зрівняти гіпертекстовий документ і документ MS Word, то в таких випадках використовуються ті самі прийоми форматування:
вибір шрифта
колір
окреслення
вирівнювання
вставка таблиць і малюнків
Але в документі Word механізм форматування схований від користувача і працювати з файлом можна лише в текстовому редакторі. У системі гіпертексту закладений інший принцип – такі документи можна відкривати в будь-якому текстовому редакторі і бачити яким чином, наприклад, відформатований текст і т.д.
Зрозуміло, що переглянути документ у відформатованому вигляді можна тільки в браузерах.
Усі елементи мови можна умовно розділити на три групи:
елементи, які створюють структуру гіпертекстового документа. Їхнє використання є необхідним і важливим моментом при побудові сторінки.
елементи, які створюють ефекти форматування. Їх використовують при конкретних вимогах до документу і при наявності фантазії і уміння розробника
елементи, які управляють програмними засобами, встановленими на комп'ютері користувача
Самоконтроль
1. Що таке HTML?
2. Яке розширення має Html-Сторінка?
3. Яким програмним забезпеченням можна переглядати веб-сторінки?
4. Назвіть кілька особливостей гіпертексту.
5. Основні елементи мови HTML.
Список використаної літератури
1. Урок на тему: «Вступ в мову HTML», Гаврилюк М. І., м. Севастополь, АР Крим.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Гаврилюк М. І.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
