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