KNOWLEDGE HYPERMARKET


Основные теги. Каркас веб-страницы. Полные уроки
Строка 3: Строка 3:
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Основные теги. Каркас веб-страниц.</metakeywords><br>  
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Основные теги. Каркас веб-страниц.</metakeywords><br>  
-
'''Тема: Основные теги. Каркас веб-страницы.''' <br>
+
==Тема==
 +
*'''Основные теги. Каркас веб-страницы.'''
-
'''Цель: '''Рассказать об основных командах html-языка при создании сайта. Познакомить со структурой web-страницы.<br>
+
==Цель==
 +
*Рассказать об основных командах html-языка при создании сайта. Познакомить со структурой web-страницы.  
-
<br>
+
==Ход урока==
-
Прежде всего, нужно сказать, что создание веб-станички происходит в ''обыкновенном блокноте.''<br>
+
Прежде всего, нужно сказать, что создание веб-станички происходит в '''обыкновенном блокноте.'''
-
После ввода туда определенных команд, текстовый документ нужно сохранять с расширением ''.html'', а затем страничка просматривается любым браузером. <br>
+
После ввода туда определенных команд, текстовый документ нужно сохранять с расширением '''.html''', а затем страничка просматривается любым браузером.
-
<br>
 
-
[[Image:Sozddd.jpg|540x401px|Sozddd.jpg]]  
+
[[Image:Sozddd.jpg|400px|Созадние веб-страницы]]  
-
<br>
 
-
'''Основные тэги. '''<br>
+
===Основные тэги===
Язык HTML состоит из команд - '''тэгов''', размещенных в угловые скобки. Существует несколько основных тэгов, присутствующих в тексте любой html-страничке. <br>  
Язык HTML состоит из команд - '''тэгов''', размещенных в угловые скобки. Существует несколько основных тэгов, присутствующих в тексте любой html-страничке. <br>  
Строка 25: Строка 25:
Тэги разделяются на '''парные и непарные'''.  
Тэги разделяются на '''парные и непарные'''.  
-
Например, тэг ''&lt;p&gt;'' и ''&lt;/p&gt;'' является ''парным'', потому как первый открывает, а второй закрывает абзац. Вместе они образуют своеобразный контейнер, где размещен текстовый фрагмент.  
+
Например, тэг '''&lt;p&gt;''' и '''&lt;/p&gt;''' является '''парным''', потому как первый открывает, а второй закрывает абзац. Вместе они образуют своеобразный контейнер, где размещен текстовый фрагмент.  
-
Тэг &lt;br&gt; ''непарный'' – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём.  
+
Тэг &lt;br&gt; '''непарный''' – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём.  
-
<br>
 
-
[[Image:Tegsss.jpg|501x347px|Tegsss.jpg]]  
+
[[Image:Tegsss.jpg|400px|Тэг]]  
-
<br>
 
Каждая web-страница обязана содержать тэг '''&lt;HTML&gt;''', расположенный в самом начале. Этот тэг описывает документ как web-страницу, выполненную на языке HTML.  
Каждая web-страница обязана содержать тэг '''&lt;HTML&gt;''', расположенный в самом начале. Этот тэг описывает документ как web-страницу, выполненную на языке HTML.  
Строка 39: Строка 37:
Непосредственно за дескриптором &lt;HTML&gt; обычно следует тэг '''&lt;HEAD&gt;''', указывающий на наличие текста, содержащего имя и дополнительные сведения о странице.<br>  
Непосредственно за дескриптором &lt;HTML&gt; обычно следует тэг '''&lt;HEAD&gt;''', указывающий на наличие текста, содержащего имя и дополнительные сведения о странице.<br>  
-
<br>
+
В этом разделе обычно содержится тэг '''&lt;TITLE&gt;''', служащий для обозначения имени страницы, отображающаяся в заголовке окна браузера. Название Web-страницы может вмещать '''символы букв, цифр, пробела'''
-
В этом разделе обычно содержится тэг '''&lt;TITLE&gt;''', служащий для обозначения имени страницы, отображающаяся в заголовке окна браузера. Название Web-страницы может вмещать <u>символы букв, цифр, пробела</u>.
 
-
[[Image:Zagolovvok.jpg|552x379px|Zagolovvok.jpg]]  
+
[[Image:Zagolovvok.jpg|400px|Заголовок]]  
-
<br>
 
-
Далее следует тэг '''&lt;BODY&gt;''', указывающий на начало собственно "тела" (англ. ''Body-''тело) html-страницы.  
+
Далее следует тэг '''&lt;BODY&gt;''', указывающий на начало собственно "тела" (англ. '''Body-'''тело) html-страницы.  
Здесь размещается весь остальной контент:  
Здесь размещается весь остальной контент:  
Строка 57: Строка 53:
*другие элементы страницы, которые может видеть посетитель сайта.
*другие элементы страницы, которые может видеть посетитель сайта.
-
<br>
 
-
[[Image:Bodyys.jpg]]  
+
[[Image:Bodyys.jpg|400px|Body-тело]]
 +
 
 +
 
 +
'''Графическая '''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел:
 +
 
 +
 
 +
[[Image:Ris111.jpg|400px|«img»]]  
-
<br> ''Графическая ''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел: [[Image:Ris111.jpg]]
 
1. src - задаёт URL-адрес изображения  
1. src - задаёт URL-адрес изображения  
Строка 71: Строка 71:
4. align - выравнивание изображения на странице (по левому, правому, по центру)  
4. align - выравнивание изображения на странице (по левому, правому, по центру)  
-
<br>
 
-
'''Структура каркас Web-страницы.'''
+
===Структура каркас Web-страницы===
-
<br> [[Image:Struktur.jpg|521x406px|Struktur.jpg]]
 
-
<br>
+
[[Image:Struktur.jpg|400px|Структура каркас Web-страницы]]
 +
 
Построим каркас будущего HTML-документа:  
Построим каркас будущего HTML-документа:  
Строка 95: Строка 94:
<br>  
<br>  
-
Следует отметить, что к выбору''имен web-страниц'' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.  
+
Следует отметить, что к выбору '''имен web-страниц''' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.  
Таким способом, поисковики помогут пользователю быстро найти интересующие странички.  
Таким способом, поисковики помогут пользователю быстро найти интересующие странички.  
Строка 101: Строка 100:
Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.  
Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.  
-
<br>
 
{{#ev:youtube| ZVXSMgJSp0Y&p=42CB9719C899CAA7&playnext=1&index=19}}  
{{#ev:youtube| ZVXSMgJSp0Y&p=42CB9719C899CAA7&playnext=1&index=19}}  
-
<br> '''Вопросы:'''
 
-
1. Что такое тэг?
+
==Вопросы==
-
2. За что отвечает команда раздел HEAD?  
+
''1. Что такое тэг? ''
-
3. Зачем нужен тэг BODY?  
+
''2. За что отвечает команда раздел HEAD? ''
-
4. Структура html-страницы.  
+
''3. Зачем нужен тэг BODY? ''
-
<br>
+
''4. Структура html-страницы. ''
 +
-
''Список использованных источников: ''
+
==Список использованных источников==
-
1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.  
+
''1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск. ''
-
2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.  
+
''2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.''
-
3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.  
+
''3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''
-
4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.  
+
''4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
-
<br>
+
 
 +
----
 +
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.  
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.  
-
<br>
 
----
----
-
'''<u>Над уроком работали</u>'''
+
 
 +
'''Над уроком работали'''
Потапенко Ю. Н.
Потапенко Ю. Н.
Строка 145: Строка 145:
----
----
-
 

Версия 11:45, 1 февраля 2013

Гипермаркет знаний>>Информатика>>Информатика 10 класс. Полные уроки>>Информатика: Основные теги. Каркас веб-страницы.


Содержание

Тема

  • Основные теги. Каркас веб-страницы.

Цель

  • Рассказать об основных командах html-языка при создании сайта. Познакомить со структурой web-страницы.

Ход урока

Прежде всего, нужно сказать, что создание веб-станички происходит в обыкновенном блокноте.

После ввода туда определенных команд, текстовый документ нужно сохранять с расширением .html, а затем страничка просматривается любым браузером.


Созадние веб-страницы


Основные тэги

Язык HTML состоит из команд - тэгов, размещенных в угловые скобки. Существует несколько основных тэгов, присутствующих в тексте любой html-страничке.

Тэги разделяются на парные и непарные.

Например, тэг <p> и </p> является парным, потому как первый открывает, а второй закрывает абзац. Вместе они образуют своеобразный контейнер, где размещен текстовый фрагмент.

Тэг <br> непарный – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём.


Тэг


Каждая web-страница обязана содержать тэг <HTML>, расположенный в самом начале. Этот тэг описывает документ как web-страницу, выполненную на языке HTML.

Непосредственно за дескриптором <HTML> обычно следует тэг <HEAD>, указывающий на наличие текста, содержащего имя и дополнительные сведения о странице.

В этом разделе обычно содержится тэг <TITLE>, служащий для обозначения имени страницы, отображающаяся в заголовке окна браузера. Название Web-страницы может вмещать символы букв, цифр, пробела


Заголовок


Далее следует тэг <BODY>, указывающий на начало собственно "тела" (англ. Body-тело) html-страницы.

Здесь размещается весь остальной контент:

  • текст
  • графика
  • аудио и видеоматериалы
  • таблицы
  • другие элементы страницы, которые может видеть посетитель сайта.


Body-тело


Графическая информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел:


«img»


1. src - задаёт URL-адрес изображения

2. width - ширина изображения

3. height – высота изображения

4. align - выравнивание изображения на странице (по левому, правому, по центру)


Структура каркас Web-страницы

Структура каркас 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 г.




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




Над уроком работали

Потапенко Ю. Н.

Гаврилов С. А.

Соловьев М. С.




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

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