Основные теги. Каркас веб-страницы. Полные уроки - История изменений

User17 в 18:57, 2 февраля 2013

2013-02-02T18:57:03Z

User16 в 11:46, 1 февраля 2013

2013-02-01T11:46:04Z

← Предыдущая		Версия 11:46, 1 февраля 2013
Строка 129:		Строка 129:


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

User16 в 11:45, 1 февраля 2013

2013-02-01T11:45:31Z

Внесённые изменения

User11 в 13:55, 29 марта 2011

2011-03-29T13:55:55Z

← Предыдущая		Версия 13:55, 29 марта 2011
Строка 121:		Строка 121:
	1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.		1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.

-	2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., м. Чоп.	+	2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.

	3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.		3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

User11 в 13:48, 29 марта 2011

2011-03-29T13:48:29Z

← Предыдущая		Версия 13:48, 29 марта 2011
Строка 15:		Строка 15:
	<br>		<br>

-	[[Image:Sozddd.jpg\|540x401px]]	+	[[Image:Sozddd.jpg\|540x401px\|Sozddd.jpg]]
-		+

		+	<br>

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

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

		+	<br>

		+	[[Image:Tegsss.jpg\|501x347px\|Tegsss.jpg]]

-	~~[[Image:Tegsss.jpg\|501x347px]]~~	+	<br>
-		+
-		+

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

-	Непосредственно за дескриптором <HTML> обычно следует тэг '''<HEAD>''', указывающий на наличие текста, содержащего имя и дополнительные сведения о странице.	+	Непосредственно за дескриптором <HTML> обычно следует тэг '''<HEAD>''', указывающий на наличие текста, содержащего имя и дополнительные сведения о странице.<br>
-		+
-	<br>	+
-		+
-	~~{{#ev:youtube\| QmBMGHML8qs&feature=related}}~~	+

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

-	[[Image:Zagolovvok.jpg\|552x379px]]	+	[[Image:Zagolovvok.jpg\|552x379px\|Zagolovvok.jpg]]
-		+

		+	<br>

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

-	[[Image:Bodyys.jpg]]	+	[[Image:Bodyys.jpg]]

-		+	<br> ''Графическая ''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел: [[Image:Ris111.jpg]]
-	''Графическая ''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел: [[Image:Ris111.jpg]]	+

	1. src - задаёт URL-адрес изображения		1. src - задаёт URL-адрес изображения
Строка 80:		Строка 75:
	'''Структура каркас Web-страницы.'''		'''Структура каркас Web-страницы.'''

		+	<br> [[Image:Struktur.jpg\|521x406px\|Struktur.jpg]]

-	~~[[Image:Struktur.jpg\|521x406px]]~~	+	<br>
-		+
-		+

	Построим каркас будущего HTML-документа:		Построим каркас будущего HTML-документа:
Строка 99:		Строка 93:
	</html>		</html>

-		+	<br>

	Следует отметить, что к выбору''имен web-страниц'' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.		Следует отметить, что к выбору''имен web-страниц'' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.
Строка 107:		Строка 101:
	Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.		Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.

-		+	<br>
-		+
-	~~{{#ev:youtube\| 8Fn9RK_zxlE}}~~	+

	{{#ev:youtube\| ZVXSMgJSp0Y&p=42CB9719C899CAA7&playnext=1&index=19}}		{{#ev:youtube\| ZVXSMgJSp0Y&p=42CB9719C899CAA7&playnext=1&index=19}}
Строка 129:		Строка 121:
	1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.		1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.

-	2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.	+	2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., м. Чоп.

	3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.		3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
Строка 141:		Строка 133:
	<br>		<br>

-	~~Если у вас есть исправления~~ или ~~предложения к данному уроку~~, [http://xvatit.com/~~index~~.~~php?do=feedback напишите нам~~].	+	----
		+
		+	'''<u>Над уроком работали</u>'''
		+
		+	Потапенко Ю. Н.
		+
		+	Гаврилов С. А.
		+
		+	Соловьев М. С.
		+
		+
		+	----
		+
		+
		+
		+	Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
		+
		+

-	Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].

	[[Category:Информатика_10_класс]]		[[Category:Информатика_10_класс]]

User17 в 10:27, 8 ноября 2010

2010-11-08T10:27:15Z

← Предыдущая		Версия 10:27, 8 ноября 2010
Строка 15:		Строка 15:
	<br>		<br>

-	[[Image:Sozddd.jpg]]	+	[[Image:Sozddd.jpg\|540x401px]]
		+
		+

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

-	Тэг <br> ''непарный'' – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём. [[Image:Tegsss.jpg]]	+	Тэг <br> ''непарный'' – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём.
		+
		+
		+
		+	[[Image:Tegsss.jpg\|501x347px]]
		+
		+

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

-	В этом разделе обычно содержится тэг '''<TITLE>''', служащий для обозначения имени страницы, отображающаяся в заголовке окна браузера. Название Web-страницы может вмещать <u>символы букв, цифр, пробела</u>. [[Image:Zagolovvok.jpg]]	+	В этом разделе обычно содержится тэг '''<TITLE>''', служащий для обозначения имени страницы, отображающаяся в заголовке окна браузера. Название Web-страницы может вмещать <u>символы букв, цифр, пробела</u>.
		+
		+	[[Image:Zagolovvok.jpg\|552x379px]]
		+
		+

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

-	[[Image:Bodyys.jpg]] ''Графическая ''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел: [[Image:Ris111.jpg]]	+	[[Image:Bodyys.jpg]]
		+
		+
		+	''Графическая ''информация используется на веб-странице с помощью одинарного тэга «img», атрибуты которого прописываются рядом и перечисляются через пробел: [[Image:Ris111.jpg]]

	1. src - задаёт URL-адрес изображения		1. src - задаёт URL-адрес изображения
Строка 61:		Строка 76:
	4. align - выравнивание изображения на странице (по левому, правому, по центру)		4. align - выравнивание изображения на странице (по левому, правому, по центру)

		+	<br>

		+	'''Структура каркас Web-страницы.'''
		+
		+
		+	[[Image:Struktur.jpg\|521x406px]]

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

-	~~[[Image:Struktur.jpg]]~~

	Построим каркас будущего HTML-документа:		Построим каркас будущего HTML-документа:
Строка 73:		Строка 91:
	<head>		<head>

-	<title>Моя первая страница </title>	+	<title>Моя первая страница </title>

	</head>		</head>
Строка 79:		Строка 97:
	<body>  Содержимое страницы </body>		<body>  Содержимое страницы </body>

-	</html>	+	</html>

-	Следует отметить, что к выбору''имен web-страниц'' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.

-	~~Таким способом, поисковики помогут пользователю быстро найти интересующие странички.~~

-	Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.	+	Следует отметить, что к выбору''имен web-страниц'' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.
		+
		+	Таким способом, поисковики помогут пользователю быстро найти интересующие странички.
		+
		+	Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.
		+
		+

	{{#ev:youtube\| 8Fn9RK_zxlE}}		{{#ev:youtube\| 8Fn9RK_zxlE}}
Строка 101:		Строка 123:
	4. Структура html-страницы.		4. Структура html-страницы.

		+	<br>

		+	''Список использованных источников: ''

-	~~''Список использованных источников: ''~~	+	1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.
-		+
-	1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.	+

	2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.		2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.
Строка 113:		Строка 135:
	4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.		4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.

-		+	<br>

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

-		+	<br>

	Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].		Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].

User17: Новая страница: «'''Гипермаркет знаний>>Информатика>>[[Информа...»

2010-11-08T10:24:19Z

Новая страница: «'''Гипермаркет знаний>>Информатика>>[[Информа...»

Новая страница

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

<metakeywords>Информатика, класс, урок, на тему, 10 класс, Основные теги. Каркас веб-страниц.</metakeywords> 

'''Тема: Основные теги. Каркас веб-страницы.''' 

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

 

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

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

 

[[Image:Sozddd.jpg]]

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

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

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

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

Тэг ''непарный'' – он является командой к переносу строки и ставится в там, где необходимо выполнить данный приём. [[Image:Tegsss.jpg]]

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

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

 

{{#ev:youtube| QmBMGHML8qs&feature=related}}

 

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

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

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

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

 

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

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

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

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

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

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

[[Image:Struktur.jpg]]

Построим каркас будущего HTML-документа:

<html>

<head>

<title>Моя первая страница </title>

</head>

<body>  Содержимое страницы </body>

</html>

Следует отметить, что к выбору''имен web-страниц'' нужно относиться серьезно, потому что именно имена используются поисковыми системами для создания собственно базы данных о всех сайтах.

Таким способом, поисковики помогут пользователю быстро найти интересующие странички.

Любая web-страница может оказаться найденной поисковой системой – следует только задать определенный набор ключевых слов страницы.

{{#ev:youtube| 8Fn9RK_zxlE}}

{{#ev:youtube| ZVXSMgJSp0Y&p=42CB9719C899CAA7&playnext=1&index=19}}

 '''Вопросы:'''

1. Что такое тэг?

2. За что отвечает команда раздел HEAD?

3. Зачем нужен тэг BODY?

4. Структура html-страницы.

''Список использованных источников: ''

1. Урок на тему: «HTML-тэги», Гаврилов С. А., г. Днепродзержинск.

2. Урок на тему: «Каркас Web-страницы», Потапенко Ю. Н., г. Чоп.

3. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

4. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.

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

Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].

Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].

[[Category:Информатика_10_класс]]