Вирівнювання тексту. Повні уроки - История изменений

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

2012-11-04T20:38:21Z

← Предыдущая		Версия 20:38, 4 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вирівнювання тексту.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вирівнювання тексту.</metakeywords>

-	==Тема==	+	== Тема ==
-	*'''Вирівнювання тексту.'''	+

-	~~==Мета==~~	+	*'''Вирівнювання тексту.'''
-	*~~Навчити форматувати текстову інформацію на веб-сторінці~~.	+

-	==~~Тип уроку~~==	+	== Мета ==
-	*теоретично-практичний	+

-	==Хід уроку==	+	*Навчити форматувати текстову [http://xvatit.com/it/fishki-ot-itshki/ інформацію] на веб-сторінці.
		+
		+	== Тип уроку ==
		+
		+	*теоретично-практичний
		+
		+	== Хід уроку ==

	Для вирівнювання тексту на веб-сторінці використовується вже відомий тег < p >.		Для вирівнювання тексту на веб-сторінці використовується вже відомий тег < p >.

-	Але самий процес форматування тексту відбувається не за допомогою цього тегом, а за допомогою додаткових команд (''атрибутів'') цього тега:	+	Але самий процес [[Конспект уроку до теми «Копіювання, переміщення, вилучення, форматування таблиці»\|форматування]] тексту відбувається не за допомогою цього тегом, а за допомогою додаткових команд (''атрибутів'') цього тега:

	#< p '''align="center"''' >текст< /p > - ''центрування тексту''		#< p '''align="center"''' >текст< /p > - ''центрування тексту''
Строка 55:		Строка 58:
	[[Image:Vir-1.jpg\|480px\|Вирівнювання тексту]]		[[Image:Vir-1.jpg\|480px\|Вирівнювання тексту]]

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

	<br> [[Image:Vir-2.jpg\|480px\|Вирівнювання тексту]]		<br> [[Image:Vir-2.jpg\|480px\|Вирівнювання тексту]]

		+	<br> Ще декілька слів стосовно тега < p >:

-	~~Ще декілька слів стосовно тега < p >:~~	+	- не рекомендується вводити в документ таку конструкцію - < p >< /p >. Причиною є те, що порожні [[Основные теги. Каркас веб-страницы. Полные уроки\|теги]] < p > (тобто, без тексту або інших атрибутів) просто ігноруються браузерами.
-		+
-	- не рекомендується вводити в документ таку конструкцію - < p >< /p >. Причиною є те, що порожні теги < p > (тобто, без тексту або інших атрибутів) просто ігноруються браузерами.	+

	- за замовчуванням, текст на сторінці без завдання параграфу якого-небудь атрибута, завжди буде вирівнюватися по лівому краю		- за замовчуванням, текст на сторінці без завдання параграфу якого-небудь атрибута, завжди буде вирівнюватися по лівому краю
Строка 85:		Строка 86:
	<br> [[Image:Vir-3.jpg\|480px\|Вирівнювання тексту]]		<br> [[Image:Vir-3.jpg\|480px\|Вирівнювання тексту]]

-	Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки тексту:	+	Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки [[Операции при создании текстов\|тексту]]:

	<br> '''1) ''' Параграф не може містити в собі інші параграфи (а також і тег < div >).		<br> '''1) ''' Параграф не може містити в собі інші параграфи (а також і тег < div >).
Строка 127:		Строка 128:
	< /div >		< /div >

-	<br>{{#ev:youtube\|XqF8lM2gbyc}}	+	<br>{{#ev:youtube\|XqF8lM2gbyc}}

	{{#ev:youtube\| omyeH5h1lqA&feature=related}}		{{#ev:youtube\| omyeH5h1lqA&feature=related}}

-	{{#ev:youtube\| SQ7cWIy63yI&feature=related}}	+	{{#ev:youtube\| SQ7cWIy63yI&feature=related}}

-	==Самоконтроль==	+	== Самоконтроль ==

-	<br> ''1. Які атрибути використовуються для вирівнювання тексту? ''	+	<br> ''1. Які атрибути використовуються для вирівнювання тексту? ''

-	''2. Як можна вирівняти текст по обидва боки? ''	+	''2. Як можна вирівняти текст по обидва боки? ''

-	''3. Теги < p > і < div >? ''	+	''3. Теги < p > і < div >? ''

-	''4. Правила використання тегів для вирівнювання тексту. ''	+	''4. Правила використання тегів для вирівнювання тексту. ''

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

-	''1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.''	+	''1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.''

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

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

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

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

		+	<br>

	----		----

		+	<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''

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

	----		----

		+	<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>	+

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

User16 в 18:07, 2 ноября 2012

2012-11-02T18:07:09Z

← Предыдущая		Версия 18:07, 2 ноября 2012
Строка 4:		Строка 4:

	==Тема==		==Тема==
-	*'''Вирівнювання тексту.''' '	+	*'''Вирівнювання тексту.'''

	==Мета==		==Мета==

User16 в 18:06, 2 ноября 2012

2012-11-02T18:06:55Z

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

-	'''~~Тема:~~ Вирівнювання тексту.''' '''Мета~~:'''~~ Навчити форматувати текстову інформацію на веб-сторінці. ~~'''~~Тип уроку~~:'''~~ теоретично-практичний ~~'''~~Хід уроку~~:'''~~	+	==Тема==
		+	*'''Вирівнювання тексту.''' '
		+
		+	==Мета==
		+	*Навчити форматувати текстову інформацію на веб-сторінці.
		+
		+	==Тип уроку==
		+	*теоретично-практичний
		+
		+	==Хід уроку==

	Для вирівнювання тексту на веб-сторінці використовується вже відомий тег < p >.		Для вирівнювання тексту на веб-сторінці використовується вже відомий тег < p >.
Строка 44:		Строка 53:
	<br>		<br>

-	[[Image:Vir-1.jpg]]	+	[[Image:Vir-1.jpg\|480px\|Вирівнювання тексту]]


		+	А от у цьому прикладі '''виключка відбувається по обидва боки''', тобто з використанням атрибута '''«justify»:'''

-	~~А от у цьому прикладі ''виключка відбувається по обидва боки'', тобто з використанням атрибута '''«justify»:'''~~	+	<br> [[Image:Vir-2.jpg\|480px\|Вирівнювання тексту]]
-		+
-	<br> [[Image:Vir-2.jpg]]	+
-		+


Строка 76:		Строка 83:
	<br> Приклад виключки по центру:		<br> Приклад виключки по центру:

-	<br> [[Image:Vir-3.jpg]]	+	<br> [[Image:Vir-3.jpg\|480px\|Вирівнювання тексту]]

	Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки тексту:		Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки тексту:
Строка 126:		Строка 133:
	{{#ev:youtube\| SQ7cWIy63yI&feature=related}}		{{#ev:youtube\| SQ7cWIy63yI&feature=related}}

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

-	<br> 1. Які атрибути використовуються для вирівнювання тексту?	+	<br> ''1. Які атрибути використовуються для вирівнювання тексту? ''

-	2. Як можна вирівняти текст по обидва боки?	+	''2. Як можна вирівняти текст по обидва боки? ''

-	3. Теги < p > і < div >?	+	''3. Теги < p > і < div >? ''

-	4. Правила використання тегів для вирівнювання тексту.	+	''4. Правила використання тегів для вирівнювання тексту. ''

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

-	1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.	+	''1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.''

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

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

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

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

		+
		+	----


Строка 153:		Строка 162:


-	~~<br>~~ ----	+	----

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

	Аршавін А. С.		Аршавін А. С.
Строка 161:		Строка 171:
	Соловйов М. С.		Соловйов М. С.

-	~~----~~

		+	----

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

2011-03-10T10:14:10Z

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


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

-	~~Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут~~ - [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:47, 25 января 2011

2011-01-25T12:47:24Z

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

-	<br> {{#ev:youtube\|~~xqf8lm2gbyc~~}}	+	<br>{{#ev:youtube\|XqF8lM2gbyc}}

-	{{#ev:youtube\| ~~omyeh5h1lqa~~&feature=related}}	+	{{#ev:youtube\| omyeH5h1lqA&feature=related}}

-	{{#ev:youtube\| ~~SQ7cwiy63yi~~&feature=related}}	+	{{#ev:youtube\| SQ7cWIy63yI&feature=related}}

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

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

2011-01-11T14:26:30Z

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

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

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

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

'''Тема: Вирівнювання тексту.''' '''Мета:''' Навчити форматувати текстову інформацію на веб-сторінці. '''Тип уроку:''' теоретично-практичний '''Хід уроку:'''

Для вирівнювання тексту на веб-сторінці використовується вже відомий тег < p >.

Але самий процес форматування тексту відбувається не за допомогою цього тегом, а за допомогою додаткових команд (''атрибутів'') цього тега:

#< p '''align="center"''' >текст< /p > - ''центрування тексту''
#< p '''align="left"''' >текст< /p > - ''вирівнювання тексту по лівому краю''
#< p '''align="right"''' >текст< /p > - ''вирівнювання тексту по правому краю''
#< p '''align="justify"''' >текст< /p > - ''вирівнювання текстової інформації з обом краям ''документа (веб-сторінки).

У видавничій справі вирівнювання називається '''виключка''' – так буде правильніше.

Тобто, виключка по лівому краю, по правому, по центру або по обидва боки.

<br>

Приміром, ось використання команди < p align='''"center"''' >:

< html >

< head >

< title>Моя перша сторінка< /title >

< /head >

< body >

< h1 >

< p align="center"> Привіт, це моя перша сторінка.< /p >

< /h1 >

< /body >

< /html >

<br>

[[Image:Vir-1.jpg]]

А от у цьому прикладі ''виключка відбувається по обидва боки'', тобто з використанням атрибута '''«justify»:'''

<br> [[Image:Vir-2.jpg]]

Ще декілька слів стосовно тега < p >:

- не рекомендується вводити в документ таку конструкцію - < p >< /p >. Причиною є те, що порожні теги < p > (тобто, без тексту або інших атрибутів) просто ігноруються браузерами.

- за замовчуванням, текст на сторінці без завдання параграфу якого-небудь атрибута, завжди буде вирівнюватися по лівому краю

- після закриваючого тегу < /p > відбувається автоматичний перенос рядка.

Але якщо цей перенос не потрібний, є альтернативний тег для виключок - '''< div >.'''

Із цим тегом можна використовувати ті ж самі атрибути, що і з < p >:

< div align="center"> текст < /div >

< div align="left"> текст < /div >

< div align="right"> текст < /div >

< div align="justify"> текст < /div >

<br> Приклад виключки по центру:

<br> [[Image:Vir-3.jpg]]

Отже, завершуючи цей урок підведемо підсумки і розповімо ще кілька зауважень по використанню тегів для виключки тексту:

<br> '''1) ''' Параграф не може містити в собі інші параграфи (а також і тег < div >).

Тобто, такі варіанти будуть невірні і вводити їх в документ не можна:

< p align="right" >

< p >текст< /p >

< p >текст< /p >

< p >текст< /p >

< /p >

''або''

< p align="right" >

< div >текст< /div >

< p >текст< /p >

< div >текст< /div >

< /p >

<br>

'''2)''' Елемент < div > може містити в собі параграфи. За допомогою нього можна згрупувати їх, наприклад, по правому краю:

< div align="right" >

< p >текст першого абзацу< /p >

< p >текст другого абзацу< /p >

< p >текст третього абзацу< /p >

< /div >

<br> {{#ev:youtube|xqf8lm2gbyc}}

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

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

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

<br> 1. Які атрибути використовуються для вирівнювання тексту?

2. Як можна вирівняти текст по обидва боки?

3. Теги < p > і < div >?

4. Правила використання тегів для вирівнювання тексту.

<br> ''Список використаної літератури:''

1. Урок на тему: «Форматування тексту», Аршавін А. С., м. Ужгород.

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

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

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

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

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

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

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

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