KNOWLEDGE HYPERMARKET


Вступ в HTML. Повні уроки
 
(1 промежуточная версия не показана)
Строка 3: Строка 3:
<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. Назвіть кілька особливостей гіпертексту.
+
-
 
+
-
5. Основні елементи мови HTML.  
+
<br>  
<br>  
-
''Список використаної літератури:''
+
== Список використаної літератури ==
-
1. Урок на тему: «Вступ в мову HTML», Гаврилюк М. І., м. Севастополь, АР Крим.  
+
''1. Урок на тему: «Вступ в мову HTML», Гаврилюк М. І., м. Севастополь, АР Крим. ''
-
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.  
+
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.  
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.  
+
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''
-
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.  
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
-
 
+
<br>
-
 
+
-
''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
----
----
-
'''<u>Над уроком працювали</u>'''
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''  
-
 
+
<br>
-
Гаврилюк М. І.
+
-
 
+
-
 
+
-
Соловйов М. С.
+
----
----
 +
<br> '''Над уроком працювали'''
 +
Гаврилюк М. І.
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
+
Соловйов М. С.  
 +
<br>
 +
----
 +
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
[[Category:Інформатика_10_клас]]
[[Category:Інформатика_10_клас]]

Текущая версия на 20:23, 4 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Вступ в HTML.

Содержание

Тема

  • Вступ в HTML.

Мета

  • Ознайомити з технологією створення простих веб-сторінок за допомогою мови програмування HTML.

Хід уроку

Поняття HTML

Перед початком вивчення цієї технології, потрібно сказати, що HTML – не тільки мова розмітки гіпертексту, а більш широке поняття, яке включає в себе Всесвітню Павутину, локальні комп'ютерні мережі, браузери, різноманітне програмне забезпечення, дизайн і т.д.


HTML


Після появи перших комп'ютерів, програмісти задалися метою створити зв'язок між ними для передачі даних. З технічної точки зору в такому з'єднанні не було нічого неможливого, і, оскільки комп'ютерна техніка розвивалася, комп'ютерні мережі стали з'являтися скрізь.


HTML


Ідея всепланетної комп'ютерної мережі стала актуальною тоді, коли обчислювальні машини перестали бути власністю тільки установ і відомств; тобто коли з'явилися персональні комп'ютери.

Їх треба було підключити до глобальної мережі: так само, як це було зроблено раніше з телефонами і факсовими апаратами.




HyperText Markup Language (мова розмітки гіпертексту) давно перестав бути просто мовою програмування. Поняття HTML містить у собі різні способи оформлення гіпертекстових документів, дизайн, браузери і багато чого іншого. Вивчивши цю мову, можна проробляти складні речі простими способами і, головне, швидко – а це у комп'ютерному світі значить дуже багато.


Html-сторінка - документ, створений у вигляді гіпертексту на основі мови HTML, має розширення html (htm) і в гіпертекстових редакторах і браузерах мають загальну назву.

Гіпертекст найбільш підходяща мова для включення мультимедійних елементів у документи. Завдяки розвитку саме гіпертексту, більшість людей одержала можливість створювати власні мультимедійні продукти, поширюючи їх на CD і DVD-дисках.


HTML


Такі продукти, виконані у вигляді Html-Сторінок, не вимогливі до спеціальних програмних засобів, тому що всі потрібні інструменти (Веб-браузери) для роботи з такими даними стали частиною «джентльменського набору» програмного забезпечення на будь-якому ПК.

У такому випадку, користувач повинен лише підготувати тексти і малюнки, створити Html-Сторінки і зв'язати їх.


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.




Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.




Над уроком працювали

Гаврилюк М. І.

Соловйов М. С.




Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Предмети > Інформатика > Інформатика 10 клас