Конспект уроку на тему: Створення HTML-документа

KNOWLEDGE HYPERMARKET

 		Версия 08:27, 15 июня 2011 (просмотреть исходный код)
User16  (Обсуждение | вклад)
← Предыдущая правка
		Текущая версия на 08:31, 15 июня 2011 (просмотреть исходный код)
User16  (Обсуждение | вклад) 
 
		
Строка 3:
Строка 3:
 <br> '''План-конспект уроку з курсу «[[Інформатика 8 клас|Інформатика 8 клас]]» з теми «[[Етапи створення веб-сайтів|Створення HTML-документа]]»'''    <br> '''План-конспект уроку з курсу «[[Інформатика 8 клас|Інформатика 8 клас]]» з теми «[[Етапи створення веб-сайтів|Створення HTML-документа]]»'''  
  
- <br> <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''Створення HTML-документа '''<br><br><br> '''''Тема.''''' Створення HTML-документа, що містить теги оформлення тексту. <br> + <br> <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''Створення HTML-документа '''<br><br><br> '''''Тема.''''' Створення HTML-документа, що містить теги оформлення тексту. <br>  
  
- '''''Мета'''''. Вироблення умінь і навичок створення HTML-документів, які містять теги оформлення тексту. <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''Теоретичні відомості '''<br>'''<br> 1. Створення та форматування текстів. '''<br> + '''''Мета'''''. Вироблення умінь і навичок створення HTML-документів, які містять теги оформлення тексту. <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''Теоретичні відомості '''<br>'''<br> 1. Створення та форматування текстів. '''<br>  
  
- <br> Більшість HTML документів мають заголовок. Для його створення використовують теги &lt;Hn&gt;&lt;/Hn&gt;, де n – число від 1 до 6. Уклавши текст між цими тегами, ви отримаєте заголовок певного розміру. <br> + <br> Більшість HTML документів мають заголовок. Для його створення використовують теги &lt;Hn&gt;&lt;/Hn&gt;, де n – число від 1 до 6. Уклавши текст між цими тегами, ви отримаєте заголовок певного розміру. <br>  
  
- <br> [[Image:6.06-1.jpg]] + <br> [[Image:6.06-1.jpg]]  
  
 <br> Для створення нового абзацу використовується тег &lt;P&gt;, а для переходу на нову стрічку без створення абзацу - тег &lt;BR&gt;. Ці теги закривати не обов'язково. Звичайно, якщо Ви не використовуєте в тегові &lt;P&gt; елемент ALIGN, яким може задаватся вирівнювання абзацу:    <br> Для створення нового абзацу використовується тег &lt;P&gt;, а для переходу на нову стрічку без створення абзацу - тег &lt;BR&gt;. Ці теги закривати не обов'язково. Звичайно, якщо Ви не використовуєте в тегові &lt;P&gt; елемент ALIGN, яким може задаватся вирівнювання абзацу:  
Строка 15:
Строка 15:
 <br> '''&lt;P ALIGN=LEFT&gt;''' По лівому краю '''&lt;/P&gt;''' <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''&lt;P ALIGN=CENTER&gt;''' По центру '''&lt;/P&gt; '''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'''&lt;P ALIGN=RIGHT&gt;''' По правому краю '''&lt;/P&gt;'''    <br> '''&lt;P ALIGN=LEFT&gt;''' По лівому краю '''&lt;/P&gt;''' <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''&lt;P ALIGN=CENTER&gt;''' По центру '''&lt;/P&gt; '''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'''&lt;P ALIGN=RIGHT&gt;''' По правому краю '''&lt;/P&gt;'''  
  
- <br> '''&lt;P ALIGN=JUSTIFY&gt;''' Текст, що знаходиться між цими елементами вирівнюється по ширині '''&lt;/P&gt; ''' + <br> '''&lt;P ALIGN=JUSTIFY&gt;''' Текст, що знаходиться між цими елементами вирівнюється по ширині '''&lt;/P&gt; '''  
  
 <br> Для надання тексту певного зображення - жирний, курсив, підкреслений і так далі, помістите його між відповідними тегами:    <br> Для надання тексту певного зображення - жирний, курсив, підкреслений і так далі, помістите його між відповідними тегами:  
  
- [[Image:6.06-2.jpg]] + [[Image:6.06-2.jpg]]  
  
 [[Image:6.06-3.jpg]]<br><br> Деякі теги можуть або повинні застосовуватися з певними параметрами, які указуються в елементі тега, що відкривається (можна відразу указувати декілька параметрів в одному тегові). Наприклад, якщо відкривається тег &lt;FONT&gt; (то&nbsp; закривається тег &lt;/FONT&gt; обов'язко) може мати декілька атрибутів: <br> '''''SIZE''''' - задає розмір тексту (за умовчанням розмір тексту дорівнює 3). Помістивши текст між тегами &lt;FONT SIZE=n&gt;&lt;/FONT&gt;, де n - цифрове значення, Ви додасте йому потрібний вам розмір:    [[Image:6.06-3.jpg]]<br><br> Деякі теги можуть або повинні застосовуватися з певними параметрами, які указуються в елементі тега, що відкривається (можна відразу указувати декілька параметрів в одному тегові). Наприклад, якщо відкривається тег &lt;FONT&gt; (то&nbsp; закривається тег &lt;/FONT&gt; обов'язко) може мати декілька атрибутів: <br> '''''SIZE''''' - задає розмір тексту (за умовчанням розмір тексту дорівнює 3). Помістивши текст між тегами &lt;FONT SIZE=n&gt;&lt;/FONT&gt;, де n - цифрове значення, Ви додасте йому потрібний вам розмір:  
  
- <br> [[Image:6.06-4.jpg]] + <br> [[Image:6.06-4.jpg]]  
  
 <br> FACE - задає стандартне ім'я шрифту. Використовуйте шрифти, які встановлені на комп'ютері користувача, інакше Оглядач використовуватиме шрифт, визначений за умовчанням (зазвичай Times New Roman). До стандартних шрифтів можна віднести шрифти, що поставляються з Windows 98, Ms Plus, Ms Office. У самому нижньому рядку даної таблиці представлено використання наборів шрифтів - ім'я кожного шрифту пишеться через кому. Якщо у користувача на комп'ютері немає шрифту Comic Sans MS, Оглядач підставить наступний в цьому списку - Tahoma.    <br> FACE - задає стандартне ім'я шрифту. Використовуйте шрифти, які встановлені на комп'ютері користувача, інакше Оглядач використовуватиме шрифт, визначений за умовчанням (зазвичай Times New Roman). До стандартних шрифтів можна віднести шрифти, що поставляються з Windows 98, Ms Plus, Ms Office. У самому нижньому рядку даної таблиці представлено використання наборів шрифтів - ім'я кожного шрифту пишеться через кому. Якщо у користувача на комп'ютері немає шрифту Comic Sans MS, Оглядач підставить наступний в цьому списку - Tahoma.  
  
  + <br> 
  
-   + [[Image:6.06-5.jpg]]  
- [[Image:6.06-5.jpg]] + 
  
 <br> '''''COLOR''''' - задає колір тексту (за умовчанням чорний - #000000). Колір тексту може визначаться як самою назвою, наприклад, red, blue і т.д, так і представлений в шістнадцятковому вигляді - #FF0000 (червоний) (за умовчанням чорний    <br> '''''COLOR''''' - задає колір тексту (за умовчанням чорний - #000000). Колір тексту може визначаться як самою назвою, наприклад, red, blue і т.д, так і представлений в шістнадцятковому вигляді - #FF0000 (червоний) (за умовчанням чорний  
Строка 37:
Строка 37:
 <br> За допомогою елементу STYLE тега &lt;SPAN&gt; (що закривається тег &lt;/SPAN&gt; обов'язковий) можна задавати виділення тексту будь-яким кольором:    <br> За допомогою елементу STYLE тега &lt;SPAN&gt; (що закривається тег &lt;/SPAN&gt; обов'язковий) можна задавати виділення тексту будь-яким кольором:  
  
- <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: lightgreen"&gt; Світлозелений &lt;/SPAN&gt; <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: yellow"&gt; Жовтий &lt;/SPAN&gt; <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: lightblue"&gt; Світлосиній &lt;/SPAN&gt; <br><br><br> '''2. Оформлення фону сторінки. ''' + <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: lightgreen"&gt; Світлозелений &lt;/SPAN&gt; <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: yellow"&gt; Жовтий &lt;/SPAN&gt; <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: lightblue"&gt; Світлосиній &lt;/SPAN&gt; <br><br><br> '''2. Оформлення фону сторінки. '''  
  
 <br> Колір і фон сторінки выбираються за бажанням дизайнера, але потрібно враховувати і той факт, що від них залежить візуальне сприйняття всього сайту. Не прагніть&nbsp; все затемнити, текст зручно читати, якщо його добре видно.    <br> Колір і фон сторінки выбираються за бажанням дизайнера, але потрібно враховувати і той факт, що від них залежить візуальне сприйняття всього сайту. Не прагніть&nbsp; все затемнити, текст зручно читати, якщо його добре видно.  
Строка 43:
Строка 43:
 Отже спочатку про колір. Для його вставки в рядок з тегом &lt;BODY&gt; Вашого документа потрібно додати параметр BGCOLOR і вказати його значення - назву кольору або його шістнадцятковий вигляд. Приведені два приклади заповнюють сторінку документа червоним кольором.    Отже спочатку про колір. Для його вставки в рядок з тегом &lt;BODY&gt; Вашого документа потрібно додати параметр BGCOLOR і вказати його значення - назву кольору або його шістнадцятковий вигляд. Приведені два приклади заповнюють сторінку документа червоним кольором.  
  
  + <br> 
  
-   + '''&lt;BODY BGCOLOR="RED"&gt; (використана назва кольору) <br> &lt;BODY BGCOLOR="#FF0000"&gt; (використаний шістнадцятковий вид кольору) '''  
- '''&lt;BODY BGCOLOR="RED"&gt; (використана назва кольору) <br> &lt;BODY BGCOLOR="#FF0000"&gt; (використаний шістнадцятковий вид кольору) ''' + 
  
 <br> Тепер про фонову картинку. Фоном може бути як великий графічний файл (врахуйте - в цьому випадку сторіночка вантажитиметься довше) так і його фрагмент, що розумніше. При використанні останнього він буде автоматично розмножений Вашим Оглядачем, тому добирайте фрагмент таким, що добре стикується. Вставити в сторінку фонову картинку можна так:    <br> Тепер про фонову картинку. Фоном може бути як великий графічний файл (врахуйте - в цьому випадку сторіночка вантажитиметься довше) так і його фрагмент, що розумніше. При використанні останнього він буде автоматично розмножений Вашим Оглядачем, тому добирайте фрагмент таким, що добре стикується. Вставити в сторінку фонову картинку можна так:  
Строка 51:
Строка 51:
 <br> '''&lt;BODY BACKGROUND="images.gif"&gt; '''<br><br> Параметру BACKGROUND привласнено значення images.gif - це ім'я графічного файлу з розширенням (підтримуються *.jpg, *.gif, *.png). Природно воно може бути іншим. Передбачається, що графічний файл розміщений в одній папці з Вашим документом, інакше потрібно вказати до нього шлях. Розберемося з шляхами на прикладі файлу images.gif.    <br> '''&lt;BODY BACKGROUND="images.gif"&gt; '''<br><br> Параметру BACKGROUND привласнено значення images.gif - це ім'я графічного файлу з розширенням (підтримуються *.jpg, *.gif, *.png). Природно воно може бути іншим. Передбачається, що графічний файл розміщений в одній папці з Вашим документом, інакше потрібно вказати до нього шлях. Розберемося з шляхами на прикладі файлу images.gif.  
  
- <br> [[Image:6.06-6.jpg]] + <br> [[Image:6.06-6.jpg]]  
  
 <br> Подібна вказівка шляхів застосовується для різних елементів, наприклад, посилань, малюнків, файлів.    <br> Подібна вказівка шляхів застосовується для різних елементів, наприклад, посилань, малюнків, файлів.  
Строка 59:
Строка 59:
 <br> '''leftmargin''' - відступ зліва <br> '''rightmargin''' - відступ справа <br> '''topmargin''' - відступ зверху <br> '''bottom margin''' - відступ знизу    <br> '''leftmargin''' - відступ зліва <br> '''rightmargin''' - відступ справа <br> '''topmargin''' - відступ зверху <br> '''bottom margin''' - відступ знизу  
  
- '''<br> &lt;BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0"&gt; ''' + '''<br> &lt;BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0"&gt; '''  
  
 <br> У даному тегові можуть бути присутніми і інші параметри, наприклад, якісь функції JavaScript, задавання кольорів тексту і посилань.    <br> У даному тегові можуть бути присутніми і інші параметри, наприклад, якісь функції JavaScript, задавання кольорів тексту і посилань.  
  
- '''<br> 3. Загальна структура сторінки. ''' + '''<br> 3. Загальна структура сторінки. '''  
  
 <br> Усі WEB сторінки мають однакову структуру.    <br> Усі WEB сторінки мають однакову структуру.  
Строка 73:
Строка 73:
 &lt;HEAD&gt; та &lt;/HEAD&gt; . Заголовок сторінки (відображається в рядку заголовка браузера) створюється за допомогою дескрипторів&nbsp; &lt;TITLE&gt; та &lt;/TITLE&gt;. <br> Зміст сторінки обмежується дескрипторами &lt;/BODY&gt;&nbsp; та &lt;/BODY&gt;. Усі теги, які відповідають за розміщення тексту, малюнків, посилань розміщені між ними. <br><br> Шаблон для створення WEB сторінки:    &lt;HEAD&gt; та &lt;/HEAD&gt; . Заголовок сторінки (відображається в рядку заголовка браузера) створюється за допомогою дескрипторів&nbsp; &lt;TITLE&gt; та &lt;/TITLE&gt;. <br> Зміст сторінки обмежується дескрипторами &lt;/BODY&gt;&nbsp; та &lt;/BODY&gt;. Усі теги, які відповідають за розміщення тексту, малюнків, посилань розміщені між ними. <br><br> Шаблон для створення WEB сторінки:  
  
- &lt;HTML&gt; <br> &nbsp;&nbsp;&nbsp; &lt;HEAD&gt; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TITLE&gt; Назва сторінки &lt;/TITLE&gt; <br> &nbsp;&nbsp;&nbsp; &lt;HEAD&gt; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/BODY&gt;&nbsp; Вміст сторінки: текст, графіка, посилання, тощо ... &lt;/BODY&gt; <br> &lt;HTML&gt; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''ХІД РОБОТИ ''' + &lt;HTML&gt; <br> &nbsp;&nbsp;&nbsp; &lt;HEAD&gt; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TITLE&gt; Назва сторінки &lt;/TITLE&gt; <br> &nbsp;&nbsp;&nbsp; &lt;HEAD&gt; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/BODY&gt;&nbsp; Вміст сторінки: текст, графіка, посилання, тощо ... &lt;/BODY&gt; <br> &lt;HTML&gt; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''ХІД РОБОТИ '''  
  
- <br> 1.Запустити на виконання текстовий редактор Блокнот командою '''Пуск-Программы-Стандартные-Блокнот. ''' + <br> 1.Запустити на виконання текстовий редактор Блокнот командою '''Пуск-Программы-Стандартные-Блокнот. '''  
  
 2.Увести текст необхідний для створення WEB сторінки, яка у вікні браузера має вигляд:    2.Увести текст необхідний для створення WEB сторінки, яка у вікні браузера має вигляд:  
  
  + <br> 
  
  + [[Image:6.06-7.jpg|726x544px]]<br><br> 3.Зберегти в папці учня на диску&nbsp; Е&nbsp; у файлі з ім’ям Прізвище.htm. <br> 4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області. <br> 5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і доповнити свою сторінку змінами, щоб у вікні браузера вона мала вигляд: 
  
- [[Image:6.06-7.jpg]]<br><br> 3.Зберегти в папці учня на диску&nbsp; Е&nbsp; у файлі з ім’ям Прізвище.htm. <br> 4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області. <br> 5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і доповнити свою сторінку змінами, щоб у вікні браузера вона мала вигляд: + [[Image:6.06-8.jpg|739x554px]]<br><br> Зберегти документ, натиснувши клавіші &lt;Ctrl+S&gt;. <br> 6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу &lt;F5&gt;. <br> 7. Створити фон для своєї сторінки. Щоб при перегляді вона мала вигляд: <br>  
-   + 
- [[Image:6.06-8.jpg]]<br><br> Зберегти документ, натиснувши клавіші &lt;Ctrl+S&gt;. <br> 6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу &lt;F5&gt;. <br> 7. Створити фон для своєї сторінки. Щоб при перегляді вона мала вигляд: <br> + 
  
- [[Image:6.06-9.jpg]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ОФОРМЛЕННЯ&nbsp; РОБОТИ ''' + [[Image:6.06-9.jpg|752x564px]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ОФОРМЛЕННЯ&nbsp; РОБОТИ '''  
  
 <br> За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання: <br> 1.Чому змінилося відображення тексту HTML-документа у вікні ІЕ при останньому перегляді в порівнянні з його першим переглядом? <br> 2.Яке призначення має кожний тег створеного HTML-документа? <br> 3. Записати у зошиті для практичних робіт текстовий варіант вашої сторінки. <br>    <br> За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання: <br> 1.Чому змінилося відображення тексту HTML-документа у вікні ІЕ при останньому перегляді в порівнянні з його першим переглядом? <br> 2.Яке призначення має кожний тег створеного HTML-документа? <br> 3. Записати у зошиті для практичних робіт текстовий варіант вашої сторінки. <br>  

Текущая версия на 08:31, 15 июня 2011
Гіпермаркет знань>>Інформатика 8 клас >>Інформатика >> Інформатика: Етапи створення веб-сайтів 

 План-конспект уроку з курсу «Інформатика 8 клас» з теми «Створення HTML-документа» 

 

                                                                Створення HTML-документа 


 Тема. Створення HTML-документа, що містить теги оформлення тексту. 
 
Мета. Вироблення умінь і навичок створення HTML-документів, які містять теги оформлення тексту. 

                                                                    Теоретичні відомості 

 1. Створення та форматування текстів. 
 

 Більшість HTML документів мають заголовок. Для його створення використовують теги <Hn></Hn>, де n – число від 1 до 6. Уклавши текст між цими тегами, ви отримаєте заголовок певного розміру. 
 

  

 Для створення нового абзацу використовується тег <P>, а для переходу на нову стрічку без створення абзацу - тег <BR>. Ці теги закривати не обов'язково. Звичайно, якщо Ви не використовуєте в тегові <P> елемент ALIGN, яким може задаватся вирівнювання абзацу: 

 <P ALIGN=LEFT> По лівому краю </P> 
                                                     <P ALIGN=CENTER> По центру </P> 
                                                                                             <P ALIGN=RIGHT> По правому краю </P> 

 <P ALIGN=JUSTIFY> Текст, що знаходиться між цими елементами вирівнюється по ширині </P>  

 Для надання тексту певного зображення - жирний, курсив, підкреслений і так далі, помістите його між відповідними тегами: 
 


 Деякі теги можуть або повинні застосовуватися з певними параметрами, які указуються в елементі тега, що відкривається (можна відразу указувати декілька параметрів в одному тегові). Наприклад, якщо відкривається тег <FONT> (то  закривається тег </FONT> обов'язко) може мати декілька атрибутів: 
 SIZE - задає розмір тексту (за умовчанням розмір тексту дорівнює 3). Помістивши текст між тегами <FONT SIZE=n></FONT>, де n - цифрове значення, Ви додасте йому потрібний вам розмір: 

  

 FACE - задає стандартне ім'я шрифту. Використовуйте шрифти, які встановлені на комп'ютері користувача, інакше Оглядач використовуватиме шрифт, визначений за умовчанням (зазвичай Times New Roman). До стандартних шрифтів можна віднести шрифти, що поставляються з Windows 98, Ms Plus, Ms Office. У самому нижньому рядку даної таблиці представлено використання наборів шрифтів - ім'я кожного шрифту пишеться через кому. Якщо у користувача на комп'ютері немає шрифту Comic Sans MS, Оглядач підставить наступний в цьому списку - Tahoma. 

 
 

 COLOR - задає колір тексту (за умовчанням чорний - #000000). Колір тексту може визначаться як самою назвою, наприклад, red, blue і т.д, так і представлений в шістнадцятковому вигляді - #FF0000 (червоний) (за умовчанням чорний 

 <font COLOR="red"> Червоний </font> 
 <font COLOR="#FF0000"> Червоний </font> 

 За допомогою елементу STYLE тега <SPAN> (що закривається тег </SPAN> обов'язковий) можна задавати виділення тексту будь-яким кольором: 

 <SPAN ST YLE="BACKGROUND-COLOR: lightgreen"> Світлозелений </SPAN> 
 <SPAN ST YLE="BACKGROUND-COLOR: yellow"> Жовтий </SPAN> 
 <SPAN ST YLE="BACKGROUND-COLOR: lightblue"> Світлосиній </SPAN> 


 2. Оформлення фону сторінки.  

 Колір і фон сторінки выбираються за бажанням дизайнера, але потрібно враховувати і той факт, що від них залежить візуальне сприйняття всього сайту. Не прагніть  все затемнити, текст зручно читати, якщо його добре видно. 
Отже спочатку про колір. Для його вставки в рядок з тегом <BODY> Вашого документа потрібно додати параметр BGCOLOR і вказати його значення - назву кольору або його шістнадцятковий вигляд. Приведені два приклади заповнюють сторінку документа червоним кольором. 

 
<BODY BGCOLOR="RED"> (використана назва кольору) 
 <BODY BGCOLOR="#FF0000"> (використаний шістнадцятковий вид кольору)  

 Тепер про фонову картинку. Фоном може бути як великий графічний файл (врахуйте - в цьому випадку сторіночка вантажитиметься довше) так і його фрагмент, що розумніше. При використанні останнього він буде автоматично розмножений Вашим Оглядачем, тому добирайте фрагмент таким, що добре стикується. Вставити в сторінку фонову картинку можна так: 

 <BODY BACKGROUND="images.gif"> 

 Параметру BACKGROUND привласнено значення images.gif - це ім'я графічного файлу з розширенням (підтримуються *.jpg, *.gif, *.png). Природно воно може бути іншим. Передбачається, що графічний файл розміщений в одній папці з Вашим документом, інакше потрібно вказати до нього шлях. Розберемося з шляхами на прикладі файлу images.gif. 

  

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

 Тег <BODY> може також мати параметри відступів в документі (визначаються числовим значення). 

 leftmargin - відступ зліва 
 rightmargin - відступ справа 
 topmargin - відступ зверху 
 bottom margin - відступ знизу 

 <BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">  

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

 3. Загальна структура сторінки.  

 Усі WEB сторінки мають однакову структуру. 
Тегами <HTML>  та  </HTML>  починається  та закінчується сторінка. Усі інші теги містяться між ними. 
Заголовок сторінки та інформація для оглядача розміщується між дескрипторами 
<HEAD> та </HEAD> . Заголовок сторінки (відображається в рядку заголовка браузера) створюється за допомогою дескрипторів  <TITLE> та </TITLE>. 
 Зміст сторінки обмежується дескрипторами </BODY>  та </BODY>. Усі теги, які відповідають за розміщення тексту, малюнків, посилань розміщені між ними. 

 Шаблон для створення WEB сторінки: 
<HTML> 
     <HEAD> 
            <TITLE> Назва сторінки </TITLE> 
     <HEAD> 
              </BODY>  Вміст сторінки: текст, графіка, посилання, тощо ... </BODY> 
 <HTML> 

                                                                          ХІД РОБОТИ  

 1.Запустити на виконання текстовий редактор Блокнот командою Пуск-Программы-Стандартные-Блокнот.  
2.Увести текст необхідний для створення WEB сторінки, яка у вікні браузера має вигляд: 

 


 3.Зберегти в папці учня на диску  Е  у файлі з ім’ям Прізвище.htm. 
 4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області. 
 5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і доповнити свою сторінку змінами, щоб у вікні браузера вона мала вигляд: 


 Зберегти документ, натиснувши клавіші <Ctrl+S>. 
 6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу <F5>. 
 7. Створити фон для своєї сторінки. Щоб при перегляді вона мала вигляд: 
 


                                                              ОФОРМЛЕННЯ  РОБОТИ  

 За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання: 
 1.Чому змінилося відображення тексту HTML-документа у вікні ІЕ при останньому перегляді в порівнянні з його першим переглядом? 
 2.Яке призначення має кожний тег створеного HTML-документа? 
 3. Записати у зошиті для практичних робіт текстовий варіант вашої сторінки. 
 

 

 

 

 Надіслала викладач інформатики Чебанюк Олена Вікторовна, к.т.н., «НАУ». 

 _{Підручники та книги по всім предметам, домашня робота, онлайн бібліотеки книжок, плани конспектів уроків з інформатика, реферати та конспекти уроків з інформатики для 8 класу скачати}

Источник — «http://edufuture.biz/index.php?title=%D0%9A%D0%BE%D0%BD%D1%81%D0%BF%D0%B5%D0%BA%D1%82_%D1%83%D1%80%D0%BE%D0%BA%D1%83_%D0%BD%D0%B0_%D1%82%D0%B5%D0%BC%D1%83:_%D0%A1%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0»
Предмети > Інформатика > Інформатика 8 клас > Етапи створення веб-сайтів > Етапи створення веб-сайтів. Конспект уроку і опорний каркас
@@ Строка 3: / Строка 3: @@
 <br> '''План-конспект уроку з курсу «[[Інформатика 8 клас|Інформатика 8 клас]]» з теми «[[Етапи створення веб-сайтів|Створення HTML-документа]]»'''
 <br> <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''Створення HTML-документа '''<br><br><br> '''''Тема.''''' Створення HTML-документа, що містить теги оформлення тексту. <br>
 '''''Мета'''''. Вироблення умінь і навичок створення HTML-документів, які містять теги оформлення тексту. <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''Теоретичні відомості '''<br>'''<br> 1. Створення та форматування текстів. '''<br>
 <br> Більшість HTML документів мають заголовок. Для його створення використовують теги &lt;Hn&gt;&lt;/Hn&gt;, де n – число від 1 до 6. Уклавши текст між цими тегами, ви отримаєте заголовок певного розміру. <br>
 <br> [[Image:6.06-1.jpg]]
 <br> Для створення нового абзацу використовується тег &lt;P&gt;, а для переходу на нову стрічку без створення абзацу - тег &lt;BR&gt;. Ці теги закривати не обов'язково. Звичайно, якщо Ви не використовуєте в тегові &lt;P&gt; елемент ALIGN, яким може задаватся вирівнювання абзацу:
@@ Строка 15: / Строка 15: @@
 <br> '''&lt;P ALIGN=LEFT&gt;''' По лівому краю '''&lt;/P&gt;''' <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''&lt;P ALIGN=CENTER&gt;''' По центру '''&lt;/P&gt; '''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'''&lt;P ALIGN=RIGHT&gt;''' По правому краю '''&lt;/P&gt;'''
 <br> '''&lt;P ALIGN=JUSTIFY&gt;''' Текст, що знаходиться між цими елементами вирівнюється по ширині '''&lt;/P&gt; '''
 <br> Для надання тексту певного зображення - жирний, курсив, підкреслений і так далі, помістите його між відповідними тегами:
 [[Image:6.06-2.jpg]]
 [[Image:6.06-3.jpg]]<br><br> Деякі теги можуть або повинні застосовуватися з певними параметрами, які указуються в елементі тега, що відкривається (можна відразу указувати декілька параметрів в одному тегові). Наприклад, якщо відкривається тег &lt;FONT&gt; (то&nbsp; закривається тег &lt;/FONT&gt; обов'язко) може мати декілька атрибутів: <br> '''''SIZE''''' - задає розмір тексту (за умовчанням розмір тексту дорівнює 3). Помістивши текст між тегами &lt;FONT SIZE=n&gt;&lt;/FONT&gt;, де n - цифрове значення, Ви додасте йому потрібний вам розмір:
 <br> [[Image:6.06-4.jpg]]
 <br> FACE - задає стандартне ім'я шрифту. Використовуйте шрифти, які встановлені на комп'ютері користувача, інакше Оглядач використовуватиме шрифт, визначений за умовчанням (зазвичай Times New Roman). До стандартних шрифтів можна віднести шрифти, що поставляються з Windows 98, Ms Plus, Ms Office. У самому нижньому рядку даної таблиці представлено використання наборів шрифтів - ім'я кожного шрифту пишеться через кому. Якщо у користувача на комп'ютері немає шрифту Comic Sans MS, Оглядач підставить наступний в цьому списку - Tahoma.
+<br>
+[[Image:6.06-5.jpg]]
-[[Image:6.06-5.jpg]]
 <br> '''''COLOR''''' - задає колір тексту (за умовчанням чорний - #000000). Колір тексту може визначаться як самою назвою, наприклад, red, blue і т.д, так і представлений в шістнадцятковому вигляді - #FF0000 (червоний) (за умовчанням чорний
@@ Строка 37: / Строка 37: @@
 <br> За допомогою елементу STYLE тега &lt;SPAN&gt; (що закривається тег &lt;/SPAN&gt; обов'язковий) можна задавати виділення тексту будь-яким кольором:
 <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: lightgreen"&gt; Світлозелений &lt;/SPAN&gt; <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: yellow"&gt; Жовтий &lt;/SPAN&gt; <br> &lt;SPAN ST YLE="BACKGROUND-COLOR: lightblue"&gt; Світлосиній &lt;/SPAN&gt; <br><br><br> '''2. Оформлення фону сторінки. '''
 <br> Колір і фон сторінки выбираються за бажанням дизайнера, але потрібно враховувати і той факт, що від них залежить візуальне сприйняття всього сайту. Не прагніть&nbsp; все затемнити, текст зручно читати, якщо його добре видно.
@@ Строка 43: / Строка 43: @@
 Отже спочатку про колір. Для його вставки в рядок з тегом &lt;BODY&gt; Вашого документа потрібно додати параметр BGCOLOR і вказати його значення - назву кольору або його шістнадцятковий вигляд. Приведені два приклади заповнюють сторінку документа червоним кольором.
+<br>
+'''&lt;BODY BGCOLOR="RED"&gt; (використана назва кольору) <br> &lt;BODY BGCOLOR="#FF0000"&gt; (використаний шістнадцятковий вид кольору) '''
-'''&lt;BODY BGCOLOR="RED"&gt; (використана назва кольору) <br> &lt;BODY BGCOLOR="#FF0000"&gt; (використаний шістнадцятковий вид кольору) '''
 <br> Тепер про фонову картинку. Фоном може бути як великий графічний файл (врахуйте - в цьому випадку сторіночка вантажитиметься довше) так і його фрагмент, що розумніше. При використанні останнього він буде автоматично розмножений Вашим Оглядачем, тому добирайте фрагмент таким, що добре стикується. Вставити в сторінку фонову картинку можна так:
@@ Строка 51: / Строка 51: @@
 <br> '''&lt;BODY BACKGROUND="images.gif"&gt; '''<br><br> Параметру BACKGROUND привласнено значення images.gif - це ім'я графічного файлу з розширенням (підтримуються *.jpg, *.gif, *.png). Природно воно може бути іншим. Передбачається, що графічний файл розміщений в одній папці з Вашим документом, інакше потрібно вказати до нього шлях. Розберемося з шляхами на прикладі файлу images.gif.
 <br> [[Image:6.06-6.jpg]]
 <br> Подібна вказівка шляхів застосовується для різних елементів, наприклад, посилань, малюнків, файлів.
@@ Строка 59: / Строка 59: @@
 <br> '''leftmargin''' - відступ зліва <br> '''rightmargin''' - відступ справа <br> '''topmargin''' - відступ зверху <br> '''bottom margin''' - відступ знизу
 '''<br> &lt;BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0"&gt; '''
 <br> У даному тегові можуть бути присутніми і інші параметри, наприклад, якісь функції JavaScript, задавання кольорів тексту і посилань.
 '''<br> 3. Загальна структура сторінки. '''
 <br> Усі WEB сторінки мають однакову структуру.
@@ Строка 73: / Строка 73: @@
 &lt;HEAD&gt; та &lt;/HEAD&gt; . Заголовок сторінки (відображається в рядку заголовка браузера) створюється за допомогою дескрипторів&nbsp; &lt;TITLE&gt; та &lt;/TITLE&gt;. <br> Зміст сторінки обмежується дескрипторами &lt;/BODY&gt;&nbsp; та &lt;/BODY&gt;. Усі теги, які відповідають за розміщення тексту, малюнків, посилань розміщені між ними. <br><br> Шаблон для створення WEB сторінки:
 &lt;HTML&gt; <br> &nbsp;&nbsp;&nbsp; &lt;HEAD&gt; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;TITLE&gt; Назва сторінки &lt;/TITLE&gt; <br> &nbsp;&nbsp;&nbsp; &lt;HEAD&gt; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/BODY&gt;&nbsp; Вміст сторінки: текст, графіка, посилання, тощо ... &lt;/BODY&gt; <br> &lt;HTML&gt; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '''ХІД РОБОТИ '''
 <br> 1.Запустити на виконання текстовий редактор Блокнот командою '''Пуск-Программы-Стандартные-Блокнот. '''
 .Увести текст необхідний для створення WEB сторінки, яка у вікні браузера має вигляд:
+<br>
+[[Image:6.06-7.jpg|726x544px]]<br><br> 3.Зберегти в папці учня на диску&nbsp; Е&nbsp; у файлі з ім’ям Прізвище.htm. <br> 4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області. <br> 5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і доповнити свою сторінку змінами, щоб у вікні браузера вона мала вигляд:
-[[Image:6.06-7.jpg]]<br><br> 3.Зберегти в папці учня на диску&nbsp; Е&nbsp; у файлі з ім’ям Прізвище.htm. <br> 4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області. <br> 5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і доповнити свою сторінку змінами, щоб у вікні браузера вона мала вигляд:
+[[Image:6.06-8.jpg|739x554px]]<br><br> Зберегти документ, натиснувши клавіші &lt;Ctrl+S&gt;. <br> 6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу &lt;F5&gt;. <br> 7. Створити фон для своєї сторінки. Щоб при перегляді вона мала вигляд: <br>
-[[Image:6.06-8.jpg]]<br><br> Зберегти документ, натиснувши клавіші &lt;Ctrl+S&gt;. <br> 6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу &lt;F5&gt;. <br> 7. Створити фон для своєї сторінки. Щоб при перегляді вона мала вигляд: <br>
-[[Image:6.06-9.jpg]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ОФОРМЛЕННЯ&nbsp; РОБОТИ '''
+[[Image:6.06-9.jpg|752x564px]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ОФОРМЛЕННЯ&nbsp; РОБОТИ '''
 <br> За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання: <br> 1.Чому змінилося відображення тексту HTML-документа у вікні ІЕ при останньому перегляді в порівнянні з його першим переглядом? <br> 2.Яке призначення має кожний тег створеного HTML-документа? <br> 3. Записати у зошиті для практичних робіт текстовий варіант вашої сторінки. <br>

При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.

Разработка - Гипермаркет знаний 2008-

Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: