<metakeywords>Информатика, класс, урок, на тему, 10 класс, Основные теги. Каркас веб-страниц.</metakeywords><br>
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Основные теги. Каркас веб-страниц.</metakeywords><br>
-
'''Тема: Основные теги. Каркас веб-страницы.''' <br>
+
== Тема ==
-
'''Цель: '''Рассказать об основных командах html-языка при создании сайта. Познакомить со структурой web-страницы.<br>
+
*'''Основные теги. Каркас веб-страницы.'''
-
<br>
+
== Цель ==
-
Прежде всего, нужно сказать, что создание веб-станички происходит в ''обыкновенном блокноте.''<br>
+
*Рассказать об основных командах html-языка при создании сайта. Познакомить со структурой [[Структура веб-сайтів, різновиди веб-сайтів|web-страницы]].
-
После ввода туда определенных команд, текстовый документ нужно сохранять с расширением ''.html'', а затем страничка просматривается любым браузером. <br>
+
== Ход урока ==
-
<br>
+
Прежде всего, нужно сказать, что создание веб-станички происходит в '''обыкновенном блокноте.'''
+
+
После ввода туда определенных команд, текстовый документ нужно сохранять с расширением '''.html''', а затем страничка просматривается любым [[Презентация на тему: Что такое Веб - Браузер|браузером]].
Язык HTML состоит из команд - '''тэгов''', размещенных в угловые скобки. Существует несколько основных тэгов, присутствующих в тексте любой html-страничке. <br>
+
Язык HTML состоит из команд - '''тэгов''', размещенных в угловые скобки. Существует несколько основных тэгов, присутствующих в тексте любой [[Презентация на тему: Создание Web-сайта|html-страничке]]. <br>
Тэги разделяются на '''парные и непарные'''.
Тэги разделяются на '''парные и непарные'''.
-
Например, тэг ''<p>'' и ''</p>'' является ''парным'', потому как первый открывает, а второй закрывает абзац. Вместе они образуют своеобразный контейнер, где размещен текстовый фрагмент.
+
Например, тэг '''<p>''' и '''</p>''' является '''парным''', потому как первый открывает, а второй закрывает абзац. Вместе они образуют своеобразный контейнер, где размещен текстовый фрагмент.
-
Тэг <br> ''непарный'' – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём.
+
Тэг <br> '''непарный''' – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём.
-
<br>
+
<br> [[Image:Tegsss.jpg|400px|Тэг]]
-
[[Image:Tegsss.jpg|501x347px|Tegsss.jpg]]
+
<br> Каждая web-страница обязана содержать тэг '''<HTML>''', расположенный в самом начале. Этот тэг описывает документ как web-страницу, выполненную на языке HTML.
-
+
-
<br>
+
-
+
-
Каждая web-страница обязана содержать тэг '''<HTML>''', расположенный в самом начале. Этот тэг описывает документ как web-страницу, выполненную на языке HTML.
+
Непосредственно за дескриптором <HTML> обычно следует тэг '''<HEAD>''', указывающий на наличие текста, содержащего имя и дополнительные сведения о странице.<br>
Непосредственно за дескриптором <HTML> обычно следует тэг '''<HEAD>''', указывающий на наличие текста, содержащего имя и дополнительные сведения о странице.<br>
-
<br>
+
В этом разделе обычно содержится тэг '''<TITLE>''', служащий для обозначения имени страницы, отображающаяся в заголовке окна [[Презентация на тему: Что такое Веб - Браузер|браузера]]. Название Web-страницы может вмещать '''символы букв, цифр, пробела'''
-
В этом разделе обычно содержится тэг '''<TITLE>''', служащий для обозначения имени страницы, отображающаяся в заголовке окна браузера. Название Web-страницы может вмещать <u>символы букв, цифр, пробела</u>.
+
<br> [[Image:Zagolovvok.jpg|400px|Заголовок]]
-
+
-
[[Image:Zagolovvok.jpg|552x379px|Zagolovvok.jpg]]
+
-
+
-
<br>
+
-
Далее следует тэг '''<BODY>''', указывающий на начало собственно "тела" (англ. ''Body-''тело) html-страницы.
+
<br> Далее следует тэг '''<BODY>''', указывающий на начало собственно "тела" (англ. '''Body-'''тело) html-страницы.
Здесь размещается весь остальной контент:
Здесь размещается весь остальной контент:
Строка 53:
Строка 47:
*текст
*текст
*графика
*графика
-
*аудио и видеоматериалы
+
*аудио и [http://xvatit.com/it/audio_television/ видеоматериалы]
*таблицы
*таблицы
*другие элементы страницы, которые может видеть посетитель сайта.
*другие элементы страницы, которые может видеть посетитель сайта.
-
<br>
+
<br> [[Image:Bodyys.jpg|400px|Body-тело]]
-
[[Image:Bodyys.jpg]]
+
<br> '''Графическая '''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел:
-
<br> ''Графическая ''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел: [[Image:Ris111.jpg]]
+
<br> [[Image:Ris111.jpg|400px|«img»]]
-
1. src - задаёт URL-адрес изображения
+
<br> 1. src - задаёт [[Конспект на тему: Передача информации в компьютерных сетях|URL-адрес]] изображения
Следует отметить, что к выбору''имен web-страниц'' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.
+
Следует отметить, что к выбору '''имен web-страниц''' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно [[Конспект урока на тему: Формирование запросов и отчетов для однотабличной базы данных|базы данных]] о всех сайтах.
Таким способом, поисковики помогут пользователю быстро найти интересующие странички.
Таким способом, поисковики помогут пользователю быстро найти интересующие странички.
Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.
Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.
1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.
+
''1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск. ''
-
2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.
+
''2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.''
-
3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
+
''3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''
-
4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
+
''4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
<br>
<br>
-
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
+
----
+
+
<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С. ''
<br>
<br>
Строка 135:
Строка 129:
----
----
-
'''<u>Над уроком работали</u>'''
+
<br> '''Над уроком работали'''
-
Потапенко Ю. Н.
+
Потапенко Ю. Н.
-
Гаврилов С. А.
+
Гаврилов С. А.
-
Соловьев М. С.
+
Соловьев М. С.
+
<br>
----
----
-
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<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>, указывающий на начало собственно "тела" (англ. Body-тело) html-страницы.
другие элементы страницы, которые может видеть посетитель сайта.
Графическая информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел:
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. - СПб.: Питер, 2002 г.
4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Над уроком работали
Потапенко Ю. Н.
Гаврилов С. А.
Соловьев М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
