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

User17 в 20:28, 4 ноября 2012

2012-11-04T20:28:10Z

User16 в 17:53, 2 ноября 2012

2012-11-02T17:53:58Z

← Предыдущая		Версия 17:53, 2 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, .</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, .</metakeywords>

-	~~<br>~~ '''~~Тема: теги~~. Каркас веб-сторінки.'''	+	==Тема==
		+	*'''Теги. Каркас веб-сторінки.'''

-	~~'''~~Мета~~:'''~~ Розповісти про основні команди html-мови для створення сайту. Познайомити зі структурою web-сторінки.<br>	+	==Мета==
		+	*Розповісти про основні команди html-мови для створення сайту. Познайомити зі структурою web-сторінки.<br>

-	~~'''~~Хід уроку~~:'''~~	+	==Хід уроку==

-	~~<br>~~	+	===Вступ===

-	Насамперед, потрібно сказати, що створення веб-сторінки відбувається у ''звичайному блокноті.''<br>	+	Насамперед, потрібно сказати, що створення веб-сторінки відбувається у '''звичайному блокноті.'''<br>

	Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням ''.html'', а потім сторінка проглядається будь-яким браузером. <br>		Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням ''.html'', а потім сторінка проглядається будь-яким браузером. <br>
Строка 17:		Строка 19:
	<br>		<br>

-	[[Image:Sozddd.jpg\|~~540x401px~~\|~~Sozddd.jpg~~]]	+	[[Image:Sozddd.jpg\|480px\|Теги]]
-		+
-		+
-		+


-	~~'''~~Основні теги~~. '''<br>~~	+	===Основні теги===

-	Мова HTML складається з команд - ''тегів'', розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці. <br>	+	Мова HTML складається з команд - '''тегів''', розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці. <br>

-	Теги розділяються на ''парні і непарні''.	+	Теги розділяються на '''парні і непарні'''.

	Наприклад, тег ''<p>'' і ''</p>'' є парним, бо перший відкриває, а другий закриває абзац. Разом вони утворюють своєрідний контейнер, де розміщений текстовий фрагмент.		Наприклад, тег ''<p>'' і ''</p>'' є парним, бо перший відкриває, а другий закриває абзац. Разом вони утворюють своєрідний контейнер, де розміщений текстовий фрагмент.
Строка 34:		Строка 33:


-		+	[[Image:Tegsss.jpg\|480px\|Теги]]
-	[[Image:Tegsss.jpg\|~~501x347px~~\|~~Tegsss.jpg~~]]	+
-		+
-		+
-		+


Строка 54:		Строка 49:


		+	[[Image:Zagolovvok.jpg\|480px\|Теги]]

-	~~[[Image:Zagolovvok.jpg\|552x379px\|Zagolovvok.jpg]]~~
-
-
-
-	~~<br>~~

	Далі слідує тег ''<BODY>'' – він вказує на початок власне "тіла" html-сторінки. (англ. ''Body-'' тіло)		Далі слідує тег ''<BODY>'' – він вказує на початок власне "тіла" html-сторінки. (англ. ''Body-'' тіло)
Строка 71:		Строка 62:
	*інші елементи сторінки, які може бачити відвідувач сайту.		*інші елементи сторінки, які може бачити відвідувач сайту.

-	~~<br>~~

-	[[Image:Bodyys.jpg]]	+	[[Image:Bodyys.jpg\|480px\|Теги]]


		+	<br> '''Графічна''' інформація використовується на веб-сторінці за допомогою одинарного тега «img», атрибути якого прописуються поруч і перелічуються через пробіл:


		+	[[Image:Ris111.jpg\|480px\|Теги]]

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

	1. src - задає Url-Адресу зображення		1. src - задає Url-Адресу зображення
Строка 95:		Строка 82:
	<br>		<br>

-	~~'''~~Структура каркас Web-Сторінки.~~'''~~	+	===Структура каркас Web-Сторінки===
		+
		+
		+	[[Image:Struktur.jpg\|480px\|Теги]]

-	~~[[Image:Struktur.jpg\|521x406px\|Struktur.jpg]]~~

	Побудуємо каркас майбутнього Html-Документа:		Побудуємо каркас майбутнього Html-Документа:
Строка 123:		Строка 112:
	{{#ev:youtube\|CFCK8V4JvIM}}		{{#ev:youtube\|CFCK8V4JvIM}}

-	~~<br> '''~~Самоконтроль~~:'''~~	+	==Самоконтроль==

-	1. Що таке тег?	+	''1. Що таке тег? ''

-	2. За що відповідає команда HEAD?	+	''2. За що відповідає команда HEAD? ''

-	3. Навіщо потрібний тег BODY?	+	''3. Навіщо потрібний тег BODY? ''

-	4. Структура html-сторінки.	+	''4. Структура html-сторінки. ''

	<br>		<br>

-	''Список використаної літератури~~:''~~	+	==Список використаної літератури==

-	1. Урок на тему: « Html-Теги», Гаврилов С. А., м. Дніпродзержинськ.	+	''1. Урок на тему: « Html-Теги», Гаврилов С. А., м. Дніпродзержинськ. ''

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

-	3. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.	+	''3. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''

-	4. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.	+	''4. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''

-	5. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.	+	''5. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008. ''

-	6. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.	+	''6. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''

		+
		+	----


Строка 156:		Строка 147:
	----		----

-	'''~~<u>~~Над уроком працювали~~</u>~~'''	+
		+	'''Над уроком працювали'''

	Гаврилов С. А.		Гаврилов С. А.
Строка 164:		Строка 156:
	Соловйов М. С.		Соловйов М. С.

-	~~----~~

		+	----

User11 в 10:07, 10 марта 2011

2011-03-10T10:07:55Z

← Предыдущая		Версия 10:07, 10 марта 2011
Строка 159:		Строка 159:

	Гаврилов С. А.		Гаврилов С. А.
		+
		+	Потапенко Ю. Н.

	Соловйов М. С.		Соловйов М. С.

User11 в 10:07, 10 марта 2011

2011-03-10T10:07:02Z

← Предыдущая		Версия 10:07, 10 марта 2011
Строка 154:		Строка 154:


-	~~Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].~~	+	----

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

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

User17 в 12:42, 25 января 2011

2011-01-25T12:42:20Z

← Предыдущая		Версия 12:42, 25 января 2011
Строка 47:		Строка 47:
	<br>		<br>

-	{{#ev:youtube\| ~~Qmbmghml8qs&feature=related~~}}	+	{{#ev:youtube\|sJvH9dD1_uY}}

	<br>		<br>
Строка 119:		Строка 119:
	Будь-яка web-сторінка може виявитися знайденою пошуковою системою – слід тільки задати певний набір ключових слів сторінки.		Будь-яка web-сторінка може виявитися знайденою пошуковою системою – слід тільки задати певний набір ключових слів сторінки.

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

-	{{#ev:youtube\| ~~Zvxsmgjsp0Y&p=42CB9719C899CAA7&playnext=1&index=19~~}}	+	{{#ev:youtube\|CFCK8V4JvIM}}

	<br> '''Самоконтроль:'''		<br> '''Самоконтроль:'''

User17: Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

2011-01-11T14:23:03Z

Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

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

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика]]>>[[Інформатика 10 клас. Повні уроки|Інформатика 10 клас. Повні уроки]]>> Інформатика: Основні теги. Каркас веб-сторінки.'''

<metakeywords>Інформатика, клас, урок, на тему, 10 клас, .</metakeywords>

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

'''Мета:''' Розповісти про основні команди html-мови для створення сайту. Познайомити зі структурою web-сторінки. 

'''Хід уроку:'''

 

Насамперед, потрібно сказати, що створення веб-сторінки відбувається у ''звичайному блокноті.'' 

Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням ''.html'', а потім сторінка проглядається будь-яким браузером. 

 

[[Image:Sozddd.jpg|540x401px|Sozddd.jpg]]

'''Основні теги. ''' 

Мова HTML складається з команд - ''тегів'', розміщених у кутові дужки. Існує декілька основних тегів, присутніх у тексті будь-якій html-сторінці. 

Теги розділяються на ''парні і непарні''.

Наприклад, тег '''' і '''' є парним, бо перший відкриває, а другий закриває абзац. Разом вони утворюють своєрідний контейнер, де розміщений текстовий фрагмент.

Тег непарний – він є командою до переносу рядка і ставиться там, де необхідно виконати дану команду.

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

Кожна web-сторінка повинна містити тег ''<HTML>'', розташований на самому початку. Цей тег описує документ як web-сторінку, написану на мові HTML.

Безпосередньо за дескриптором <HTML> зазвичай йде тег ''<HEAD>'', який вказує на наявність тексту, що містить ім'я і додаткові відомості про сторінку.

 

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

 

У цьому розділі зазвичай розміщується тег ''<TITLE>'', який служить для позначення імені сторінки, яке відображається в заголовку вікна браузера. Назва Web-Сторінки може складатися символи букв, цифр, пробілу.

[[Image:Zagolovvok.jpg|552x379px|Zagolovvok.jpg]]

 

Далі слідує тег ''<BODY>'' – він вказує на початок власне "тіла" html-сторінки. (англ. ''Body-'' тіло)

Тут розміщується весь вміст, контент сторінки:

*текст
*графіка
*аудіо і відеоматеріали
*таблиці
*інші елементи сторінки, які може бачити відвідувач сайту.

 

[[Image:Bodyys.jpg]]

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

[[Image:Ris111.jpg]]

1. src - задає Url-Адресу зображення

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

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

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

 

'''Структура каркас Web-Сторінки.'''

[[Image:Struktur.jpg|521x406px|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 и CSS. Основа любого сайта. - Эксмо, 2010.

4. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.

5. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.

6. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.

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

Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

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