[[Гипермаркет знаний - первый в мире!|'''Гипермаркет ''' знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные
+
'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Вступление в HTML.'''
-
уроки]]>>Информатика: Вступление в HTML.
+
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Вступление в HTML.</metakeywords><br>
-
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Вступление в HTML.</metakeywords><br>
+
== Тема ==
-
'''Тема: Вступление в HTML.'''
+
*'''Вступление в HTML.'''
-
'''Цель: '''Ознакомить с технологией создания простых веб-страниц с помощью языка программирования
+
== Цель ==
-
HTML.
+
*Ознакомить с технологией создания простых [[Основные теги. Каркас веб-страницы. Полные уроки|веб-страниц]] с помощью языка программирования HTML.
+
== Ход урока ==
+
=== Понятие HTML ===
-
Перед началом изучения этой технологии, нужно сказать, что '''HTML''' – не только язык разметки гипертекста, а более широкое понятие, включающее в себя Всемирную Паутину, локальные компьютерные сети, браузеры, разнообразные программное обеспечение, дизайн, обучающие курсы и т.д. [[Image:Htmllll.jpg]]
+
Перед началом изучения этой технологии, нужно сказать, что '''HTML''' – не только язык разметки гипертекста, а более широкое понятие, включающее в себя [[Интернет и Всемирная паутина|Всемирную Паутину]], локальные компьютерные сети, браузеры, разнообразные программное обеспечение, дизайн, обучающие курсы и т.д.
-
После появления первых компьютеров, программисты задались целью создать связь между ними для передачи данных. С технической точки зрения в таком соединении не было ничего невозможного, и, поскольку компьютерная техника развивалась, компьютерные сети стали появляться повсеместно. [[Image:Xhtml000.jpg]]
+
<br> [[Image:Htmllll.jpg|200px|HTML]]
-
Идея всепланетной компьютерной сети стала актуальной тогда, когда вычислительные машины перестали быть собственностью только учреждений и ведомств, то есть когда появились персональные компьютеры.
+
<br> После появления первых компьютеров, программисты задались целью создать связь между ними для передачи данных. С технической точки зрения в таком соединении не было ничего невозможного, и, поскольку [http://xvatit.com/it компьютерная техника] развивалась, компьютерные сети стали появляться повсеместно.
-
Их потребовалось подключить к глобальной сети: так же, как это было сделано раньше с телефонами и факс-аппаратами.
+
<br> [[Image:Xhtml000.jpg|200px|HTML]]
+
<br> Идея всепланетной компьютерной сети стала актуальной тогда, когда вычислительные машины перестали быть собственностью только учреждений и ведомств, то есть когда появились персональные компьютеры.
+
Их потребовалось подключить к глобальной сети: так же, как это было сделано раньше с телефонами и факс-аппаратами.
-
{{#ev:youtube|nJQM5mOZecs}}
+
<br> {{#ev:youtube|nJQM5mOZecs}}
+
<br> '''HyperText Markup Language '''(язык разметки гипертекста) давно перестал быть просто языком программирования. Понятие HTML включает в себя различные способы оформления гипертекстовых документов, дизайн, [[Презентация на тему: Что такое Веб - Браузер|браузеры]] и многое другое. Изучив этот язык, можно проделывать сложные вещи простыми способами и, главное, быстро - в компьютерном мире это значит очень много.
+
'''HTML-страница''' - документ, созданный в виде гипертекста на основе языка HTML, имеет расширение ''html (htm)'' и в гипертекстовых редакторах и браузерах имеют общее название.
-
'''HyperText Markup Language '''(язык разметки гипертекста) давно перестал быть просто языком программирования. Понятие HTML включает в себя различные способы оформления гипертекстовых документов, дизайн, браузеры и многое другое. Изучив этот язык, можно проделывать сложные вещи простыми способами и, главное, быстро - в компьютерном мире это значит очень много.
+
Гипертекст наиболее подходящий язык для включения мультимедийных элементов в документы. Благодаря развитию именно гипертекста, большинство людей получило возможность создавать собственные мультимедийные продукты, распространяя их на CD и DVD-дисках.
-
<br> '''HTML-страница''' - документ, созданный в виде гипертекста на основе языка HTML, имеет расширение ''html (htm)'' и в гипертекстовых редакторах и браузерах имеют общее название.
+
<br> [[Image:Tattoo.jpg|200px|HTML]]
-
Гипертекст наиболее подходящий язык для включения мультимедийных элементов в документы. Благодаря развитию именно гипертекста, большинство людей получило возможность создавать собственные мультимедийные продукты, распространяя их на CD и DVD-дисках.
+
<br> Такие продукты, выполненные в виде HTML-страниц, не требовательны к специальных программным средствам, так как все нужные инструменты (Веб-браузеры) для работы с такими данными стали частью «джентльменского набора» программного обеспечения на любом ПК.
-
Такие продукты, выполненные в виде HTML-страниц, не требовательны к специальных программным средствам, так как все нужные инструменты (Веб-браузеры) для работы с такими данными стали частью «джентльменского набора» программного обеспечения на любом ПК.
+
В таком случае, пользователь должен лишь подготовить тексты и рисунки, создать [[Презентация на тему: Создание Web-сайта|HTML-страницы]] и связать их.
-
В таком случае, пользователь должен лишь подготовить тексты и рисунки, создать HTML-страницы и связать их. [[Image:Htmml.jpg]] HTML-язык как основа Веб-страниц играют важную роль в развитии нового Направления в изобразительном искусстве - '''Веб-дизайну'''. Художник, нарисовав красивые картинки, иллюстрации и логотипы, должен как-то разместить свои работы в Сети. И не просто разместить, а продумать связи между Веб-страницами, чтобы все правильно откликалось на действия пользователя, поражало его воображение и вызывало желание создать что-то свое.
+
<br> [[Image:Htmml.jpg|200px|HTML]]
+
<br> HTML-язык как основа Веб-страниц играют важную роль в развитии нового Направления в изобразительном искусстве - '''Веб-дизайну'''. Художник, нарисовав красивые картинки, иллюстрации и логотипы, должен как-то разместить свои работы в Сети. И не просто разместить, а продумать связи между Веб-страницами, чтобы все правильно откликалось на действия пользователя, поражало его воображение и вызывало желание создать что-то свое.
+
<br> [[Image:Dochtm.jpg|200px|HTML]]
-
'''Особенности гипертекста.'''
+
<br>
+
+
=== Особенности гипертекста ===
-
[[Image:Brozerss.jpg]] Из особенностей гипертекстовых документов можно назвать способность получать сложные эффекты форматирования простыми, легкими, наглядными методами.
+
Из особенностей гипертекстовых документов можно назвать способность получать сложные эффекты форматирования простыми, легкими, наглядными методами.
-
{{#ev:youtube|8Fn9RK_zxlE}}
+
<br> {{#ev:youtube|8Fn9RK_zxlE}}
-
Если сравнить гипертекстовый документ и документ MS Word, то в таких случаях используются одни и те же приемы форматирования:
+
<br> Если сравнить гипертекстовый документ и документ [[Текстовый процессор MS Word|MS Word]], то в таких случаях используются одни и те же приемы форматирования:
-
*выбор шрифта
+
*выбор шрифта
-
*цвет
+
*цвет
-
*начертание
+
*начертание
*выравнивание
*выравнивание
*вставка таблиц и рисунков
*вставка таблиц и рисунков
+
<br> [[Image:Brozerss.jpg|200px|HTML]]
-
+
<br> Но в документе Word механизм форматирования скрыт от пользователя и работать с файлом можно лишь в текстовом редакторе. В системе гипертекста заложен другой принцип – такие документы можно открывать в любом [[Практическая робота на тему: Создание комплексных документов в текстовом редакторе|текстовом редакторе]] и видеть каким образом, например, отформатирован текст и т.д.
-
Но в документе Word механизм форматирования скрыт от пользователя и работать с файлом можно лишь в текстовом редакторе. В системе гипертекста заложен другой принцип – такие документы можно открывать в любом текстовом редакторе и видеть каким образом, например, отформатирован текст и т.д.
+
Разумеется, что просмотреть документ в отформатированном виде можно только в браузерах.
Разумеется, что просмотреть документ в отформатированном виде можно только в браузерах.
+
<br> {{#ev:youtube|ZVXSMgJSp0Y}}
+
<br> Все элементы языка можно условно разделить на три группы:
-
{{#ev:youtube|ZVXSMgJSp0Y}}
+
*элементы, создающие структуру гипертекстового документа. Их использование является необходимым и важным моментом при построении страницы.
+
*элементы, создающие эффекты форматирования. Их используют при конкретным требованиям к документу, наличии фантазии и умения разработчика
+
*элементы, управляющие программными средствами, установленными на [[Основные устройства компьютера|компьютере]] пользователя.
+
== Вопросы ==
+
''1. Что такое HTML? ''
-
Все элементы языка можно условно разделить на три группы:
+
''2. Какое расширение имеет HTML-страница? ''
-
*элементы, создающие структуру гипертекстового документа. Их использование является необходимым и важным моментом при построении страницы.
+
''3. Каким По можно просматривать веб-страницы? ''
-
*элементы, создающие эффекты форматирования. Их используют при конкретным требованиям к документу, наличии фантазии и умения разработчика
+
-
*элементы, управляющие программными средствами, установленными на компьютере пользователя.
+
''4. Назовите несколько особенностей гипертекста. ''
-
[[Image:Bhtml.jpg]]
+
''5. Основные элементы языка HTML. ''
<br>
<br>
-
<br> '''Вопросы: '''
+
== Список использованных источников ==
-
1. Что такое HTML?
+
-
2. Какое расширение имеет HTML-страница?
+
''1. Урок на тему: «Введение в язык HTML», Пилипенко А. В., г. Севастополь, АР Крым. ''
-
3. Каким По можно просматривать веб-страницы?
+
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''
-
4. Назовите несколько особенностей гипертекста.
+
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
-
5. Основные элементы языка HTML.
+
<br>
+
----
+
<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
-
''Список использованных источников:''
+
<br>
-
1. Урок на тему: «Введение в язык HTML», Пилипенко А. В., г. Львов.
+
----
-
2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
+
<br> '''Над уроком работали'''
-
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
+
Пилипенко А. В.
-
<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.
Ход урока
Понятие 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. - СПб.: Питер, 2002 г.
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Над уроком работали
Пилипенко А. В.
Соловьев М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
