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

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

2012-11-04T20:23:55Z

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

2012-11-02T17:49:57Z

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

-	~~<br>~~ '''~~Тема:~~ Вступ в HTML.'''	+	==Тема==
		+	*'''Вступ в HTML.'''

-	~~'''~~Мета~~:'''~~ Ознайомити з технологією створення простих веб-сторінок за допомогою мови програмування HTML.	+	==Мета==
		+	*Ознайомити з технологією створення простих веб-сторінок за допомогою мови програмування HTML.

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

-	~~<br>~~	+	===Поняття HTML===

	Перед початком вивчення цієї технології, потрібно сказати, що '''HTML''' – не тільки мова розмітки гіпертексту, а більш широке поняття, яке включає в себе Всесвітню Павутину, локальні комп'ютерні мережі, браузери, різноманітне програмне забезпечення, дизайн і т.д.		Перед початком вивчення цієї технології, потрібно сказати, що '''HTML''' – не тільки мова розмітки гіпертексту, а більш широке поняття, яке включає в себе Всесвітню Павутину, локальні комп'ютерні мережі, браузери, різноманітне програмне забезпечення, дизайн і т.д.
Строка 15:		Строка 17:
	<br>		<br>

-	[[Image:Htmllll.jpg\|~~309x220px~~\|~~htmllll.jpg~~]]	+	[[Image:Htmllll.jpg\|320px\|HTML]]

	<br>		<br>
Строка 23:		Строка 25:
	<br>		<br>

-	[[Image:Xhtml000.jpg\|~~162x178px~~\|~~xhtml000.jpg~~]]	+	[[Image:Xhtml000.jpg\|320px\|HTML]]

	<br>		<br>
Строка 45:		Строка 47:
	<br>		<br>

-	[[Image:Tattoo.jpg]]	+	[[Image:Tattoo.jpg\|320px\|HTML]]

	<br>		<br>
Строка 55:		Строка 57:
	<br>		<br>

-	[[Image:Htmml.jpg]]	+	[[Image:Htmml.jpg\|320px\|HTML]]

	<br>		<br>
Строка 65:		Строка 67:
	<br>		<br>

-	[[Image:Dochtm.jpg]]<br>	+	[[Image:Dochtm.jpg\|320x\|HTML]]<br>

	<br>		<br>

-	~~'''~~Особливості гіпертексту~~.'''~~	+	===Особливості гіпертексту===

	З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.		З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.
Строка 85:		Строка 87:
	<br>		<br>

-	[[Image:Brozerss.jpg]] ~~<br>~~	+	[[Image:Brozerss.jpg\|320px\|Браузер]] <br>
-		+
-	<br>	+

	<br>		<br>
Строка 107:		Строка 107:
	*елементи, які управляють програмними засобами, встановленими на комп'ютері користувача		*елементи, які управляють програмними засобами, встановленими на комп'ютері користувача

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

-	~~<br>~~	+	''1. Що таке HTML? ''

-	~~<br>~~ ''~~'Самоконтроль:'~~''	+	''2. Яке розширення має Html-Сторінка? ''

-	1. ~~Що таке HTML~~?	+	''3. Яким програмним забезпеченням можна переглядати веб-сторінки? ''

-	2. ~~Яке розширення має Html-Сторінка?~~	+	''4. Назвіть кілька особливостей гіпертексту. ''

-	3. ~~Яким програмним забезпеченням можна переглядати веб-сторінки?~~	+	''5. Основні елементи мови HTML. ''

-	~~4. Назвіть кілька особливостей гіпертексту.~~	+	<br>

-	~~5. Основні елементи мови HTML.~~	+	==Список використаної літератури==

-	~~<br>~~	+	''1. Урок на тему: «Вступ в мову HTML», Гаврилюк М. І., м. Севастополь, АР Крим. ''

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

-	1. ~~Урок на тему: «Вступ в мову HTML», Гаврилюк М~~. І.~~, м~~. ~~Севастополь~~, ~~АР Крим~~.	+	''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''

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

-	3. ~~Квинт И~~. HTML ~~и XHTML~~. ~~Языки разметки web-страниц~~. - ~~Питер~~, ~~2010~~.	+	''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''

-	~~4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.~~
-
-	~~5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.~~

		+	----


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

	----		----

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

		+	'''Над уроком працювали'''

	Гаврилюк М. І.		Гаврилюк М. І.
-

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

	----		----
-

User11 в 09:58, 10 марта 2011

2011-03-10T09:58:47Z

← Предыдущая		Версия 09:58, 10 марта 2011
Строка 141:		Строка 141:
	''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''		''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

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

2011-01-25T12:39:38Z

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

-	{{#ev:youtube\|~~njqm5mozecs~~}}	+	{{#ev:youtube\|nJQM5mOZecs}}

	<br>		<br>
Строка 73:		Строка 73:
	З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.		З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.

-	{{#ev:youtube\|~~8Fn9RK_zxle~~}}	+	{{#ev:youtube\|ZVXSMgJSp0Y}}

	Якщо зрівняти гіпертекстовий документ і документ MS Word, то в таких випадках використовуються ті самі прийоми форматування:		Якщо зрівняти гіпертекстовий документ і документ MS Word, то в таких випадках використовуються ті самі прийоми форматування:
Строка 97:		Строка 97:
	<br>		<br>

-	{{#ev:youtube\|~~zvxsmgjsp0Y~~}}	+	{{#ev:youtube\|j82F1IUuzdA}}

	<br>		<br>

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

2011-01-11T14:20:18Z

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

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

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

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

 '''Тема: Вступ в HTML.'''

'''Мета:''' Ознайомити з технологією створення простих веб-сторінок за допомогою мови програмування HTML.

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

 

Перед початком вивчення цієї технології, потрібно сказати, що '''HTML''' – не тільки мова розмітки гіпертексту, а більш широке поняття, яке включає в себе Всесвітню Павутину, локальні комп'ютерні мережі, браузери, різноманітне програмне забезпечення, дизайн і т.д.

 

[[Image:Htmllll.jpg|309x220px|htmllll.jpg]]

 

Після появи перших комп'ютерів, програмісти задалися метою створити зв'язок між ними для передачі даних. З технічної точки зору в такому з'єднанні не було нічого неможливого, і, оскільки комп'ютерна техніка розвивалася, комп'ютерні мережі стали з'являтися скрізь.

 

[[Image:Xhtml000.jpg|162x178px|xhtml000.jpg]]

 

Ідея всепланетної комп'ютерної мережі стала актуальною тоді, коли обчислювальні машини перестали бути власністю тільки установ і відомств; тобто коли з'явилися персональні комп'ютери.

Їх треба було підключити до глобальної мережі: так само, як це було зроблено раніше з телефонами і факсовими апаратами.

 

{{#ev:youtube|njqm5mozecs}}

 

'''HyperText Markup Language''' (мова розмітки гіпертексту) давно перестав бути просто мовою програмування. Поняття HTML містить у собі різні способи оформлення гіпертекстових документів, дизайн, браузери і багато чого іншого. Вивчивши цю мову, можна проробляти складні речі простими способами і, головне, швидко – а це у комп'ютерному світі значить дуже багато.

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

Гіпертекст найбільш підходяща мова для включення мультимедійних елементів у документи. Завдяки розвитку саме гіпертексту, більшість людей одержала можливість створювати власні мультимедійні продукти, поширюючи їх на CD і DVD-дисках.

 

[[Image:Tattoo.jpg]]

 

Такі продукти, виконані у вигляді Html-Сторінок, не вимогливі до спеціальних програмних засобів, тому що всі потрібні інструменти (Веб-браузери) для роботи з такими даними стали частиною «джентльменського набору» програмного забезпечення на будь-якому ПК.

У такому випадку, користувач повинен лише підготувати тексти і малюнки, створити Html-Сторінки і зв'язати їх.

 

[[Image:Htmml.jpg]]

 

Html-мова як основа Веб-сторінок відіграє важливу роль у розвитку нового напрямку в образотворчому мистецтві - '''Веб-дизайну'''.

Художник, намалювавши гарні картинки, ілюстрації і логотипи, повинен якось розмістити свої роботи в Мережі. І не просто розмістити, а продумати зв'язки між Веб-сторінками, щоб усі правильно «відгукувалися» на дії користувача, вражало його уяву і викликало бажання створити щось своє.

 

[[Image:Dochtm.jpg]] 

 

'''Особливості гіпертексту.'''

З особливостей гіпертекстових документів можна назвати їхню здатність одержувати складні ефекти форматування простими, легкими, наочними методами.

{{#ev:youtube|8Fn9RK_zxle}}

Якщо зрівняти гіпертекстовий документ і документ MS Word, то в таких випадках використовуються ті самі прийоми форматування:

*вибір шрифта
*колір
*окреслення
*вирівнювання
*вставка таблиць і малюнків

 

[[Image:Brozerss.jpg]] 

 

 

Але в документі Word механізм форматування схований від користувача і працювати з файлом можна лише в текстовому редакторі. У системі гіпертексту закладений інший принцип – такі документи можна відкривати в будь-якому текстовому редакторі і бачити яким чином, наприклад, відформатований текст і т.д.

Зрозуміло, що переглянути документ у відформатованому вигляді можна тільки в браузерах.

 

{{#ev:youtube|zvxsmgjsp0Y}}

 

Усі елементи мови можна умовно розділити на три групи:

*елементи, які створюють структуру гіпертекстового документа. Їхнє використання є необхідним і важливим моментом при побудові сторінки.
*елементи, які створюють ефекти форматування. Їх використовують при конкретних вимогах до документу і при наявності фантазії і уміння розробника
*елементи, які управляють програмними засобами, встановленими на комп'ютері користувача

----

 

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

1. Що таке HTML?

2. Яке розширення має Html-Сторінка?

3. Яким програмним забезпеченням можна переглядати веб-сторінки?

4. Назвіть кілька особливостей гіпертексту.

5. Основні елементи мови HTML.

 

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

1. Урок на тему: «Вступ в мову HTML», Гаврилюк М. І., м. Севастополь, АР Крим.

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_клас]]