KNOWLEDGE HYPERMARKET

Конспект уроку на тему: Створення HTML-документа
(Новая страница: «'''Гіпермаркет знань>>[[Інформатика 8 клас|Інформат...»)
 
(1 промежуточная версия не показана)
Строка 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>
-
ПРАКТИЧНА РОБОТА:
+
'''''Мета'''''. Вироблення умінь і навичок створення 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><br>
+
-
Створення HTML-документа
+
-
<br><br><br>
+
-
Тема. Створення HTML-документа, що містить теги оформлення тексту.
+
-
<br>
+
-
Мета. Вироблення умінь і навичок створення HTML-документів, які містять теги оформлення тексту.
+
-
<br><br>
+
-
Теоретичні відомості
+
-
<br><br>
+
-
1. Створення та форматування текстів.
+
-
<br>
+
-
Більшість HTML документів мають заголовок. Для його створення використовують теги &lt;Hn&gt;&lt;/Hn&gt;, де n – число від 1 до 6. Уклавши текст між цими тегами, ви отримаєте заголовок певного розміру.
+
-
<br>
+
-
&lt;H1&gt;Заголовок&lt;/H1&gt;
+
-
<br>
+
-
&lt;H2&gt;Заголовок&lt;/H2&gt;
+
-
<br>
+
-
&lt;H3&gt;Заголовок&lt;/H3&gt;
+
-
<br>
+
-
&lt;H4&gt;Заголовок&lt;/H4&gt;
+
-
<br>
+
-
&lt;H5&gt;Заголовок&lt;/H5&gt;
+
-
<br>
+
-
&lt;H6&gt;Заголовок&lt;/H6&gt;
+
-
<br>
+
-
Для створення нового абзацу використовується тег &lt;P&gt;, а для переходу на нову стрічку без створення абзацу - тег &lt;BR&gt;. Ці теги закривати не обов'язково. Звичайно, якщо Ви не використовуєте в тегові &lt;P&gt; елемент ALIGN, яким може задаватся вирівнювання абзацу:
+
-
<br>
+
-
&lt;P ALIGN=LEFT&gt; По лівому краю &lt;/P&gt;
+
-
<br>
+
-
&lt;P ALIGN=CENTER&gt; По центру &lt;/P&gt;
+
-
<br>
+
-
&lt;P ALIGN=RIGHT&gt; По правому краю &lt;/P&gt;
+
-
<br>
+
-
&lt;P ALIGN=JUSTIFY&gt; Текст, що знаходиться між цими елементами вирівнюється по ширині &lt;/P&gt;
+
-
<br>
+
-
Для надання тексту певного зображення - жирний, курсив, підкреслений і так далі, помістите його між відповідними тегами:
+
-
<br><br>
+
-
&lt;B&gt; Жирний текст &lt;/B&gt;
+
-
<br>
+
-
&lt;I&gt; Курсив &lt;/I&gt;
+
-
<br>
+
-
&lt;U&gt; Підкреслений &lt;/U&gt;
+
-
<br>
+
-
&lt;STRIKE&gt; Перекреслений &lt;/STRIKE&gt;
+
-
<br>
+
-
&lt;SUP&gt; Верхній індекс &lt;/SUP&gt;
+
-
<br>
+
-
&lt;SUB&gt; Нижній індекс &lt;/SUB&gt;
+
-
<br>
+
-
Деякі теги можуть або повинні застосовуватися з певними параметрами, які указуються в елементі тега, що відкривається (можна відразу указувати декілька параметрів в одному тегові). Наприклад, якщо відкривається тег &lt;FONT&gt; (то&nbsp; закривається тег &lt;/FONT&gt; обов'язко) може мати декілька атрибутів:
+
-
<br>
+
-
SIZE - задає розмір тексту (за умовчанням розмір тексту дорівнює 3). Помістивши текст між тегами &lt;FONT SIZE=n&gt;&lt;/FONT&gt;, де n - цифрове значення, Ви додасте йому потрібний вам розмір:
+
-
<br>
+
-
&lt;font size="1"&gt; Приклад 1 &lt;/font&gt;
+
-
<br>
+
-
&lt;font size="2"&gt; Приклад 2 &lt;/font&gt;
+
-
<br>
+
-
&lt;font size="3"&gt; Приклад 3 &lt;/font&gt;
+
-
<br>
+
-
&lt;font size="4"&gt; Приклад 4 &lt;/font&gt;
+
-
<br>
+
-
&lt;font size="5"&gt; Приклад 5 &lt;/font&gt;
+
-
<br>
+
-
&lt;font size="6"&gt; Приклад 6 &lt;/font&gt;
+
-
<br>
+
-
FACE - задає стандартне ім'я шрифту. Використовуйте шрифти, які встановлені на комп'ютері користувача, інакше Оглядач використовуватиме шрифт, визначений за умовчанням (зазвичай Times New Roman). До стандартних шрифтів можна віднести шрифти, що поставляються з Windows 98, Ms Plus, Ms Office. У самому нижньому рядку даної таблиці представлено використання наборів шрифтів - ім'я кожного шрифту пишеться через кому. Якщо у користувача на комп'ютері немає шрифту Comic Sans MS, Оглядач підставить наступний в цьому списку - Tahoma.
+
-
<br>
+
-
&lt;font face="Times New Roman"&gt; Times New Roman &lt;/font&gt;
+
-
<br><br>
+
-
&lt;font face="System"&gt; System &lt;/font&gt;
+
-
<br>
+
-
&lt;font face="Arial"&gt; Arial &lt;/font&gt;
+
-
<br>
+
-
&lt;font face="Courier"&gt; Courier &lt;/font&gt;
+
-
<br>
+
-
&lt;font face="Verdana"&gt; Verdana &lt;/font&gt;
+
-
<br>
+
-
&lt;font face="Comic Sans MS, Tahoma"&gt; Comic Sans MS &lt;/font&gt;
+
-
<br>
+
-
COLOR - задає колір тексту (за умовчанням чорний - #000000). Колір тексту може визначаться як самою назвою, наприклад, red, blue і т.д, так і представлений в шістнадцятковому вигляді - #FF0000 (червоний) (за умовчанням чорний
+
-
<br>
+
-
&lt;font COLOR="red"&gt; Червоний &lt;/font&gt;
+
-
<br>
+
-
&lt;font COLOR="#FF0000"&gt; Червоний &lt;/font&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>
+
-
Колір і фон сторінки выбираються за бажанням дизайнера, але потрібно враховувати і той факт, що від них залежить візуальне сприйняття всього сайту. Не прагніть&nbsp; все затемнити, текст зручно читати, якщо його добре видно.
+
-
<br>
+
-
Отже спочатку про колір. Для його вставки в рядок з тегом &lt;BODY&gt; Вашого документа потрібно додати параметр BGCOLOR і вказати його значення - назву кольору або його шістнадцятковий вигляд. Приведені два приклади заповнюють сторінку документа червоним кольором.
+
-
<br>
+
-
&lt;BODY BGCOLOR="RED"&gt; (використана назва кольору)
+
-
<br>
+
-
&lt;BODY BGCOLOR="#FF0000"&gt; (використаний шістнадцятковий вид кольору)
+
-
<br>
+
-
Тепер про фонову картинку. Фоном може бути як великий графічний файл (врахуйте - в цьому випадку сторіночка вантажитиметься довше) так і його фрагмент, що розумніше. При використанні останнього він буде автоматично розмножений Вашим Оглядачем, тому добирайте фрагмент таким, що добре стикується. Вставити в сторінку фонову картинку можна так:
+
-
<br>
+
-
&lt;BODY BACKGROUND="images.gif"&gt;
+
-
<br><br>
+
-
Параметру BACKGROUND привласнено значення images.gif - це ім'я графічного файлу з розширенням (підтримуються *.jpg, *.gif, *.png). Природно воно може бути іншим. Передбачається, що графічний файл розміщений в одній папці з Вашим документом, інакше потрібно вказати до нього шлях. Розберемося з шляхами на прикладі файлу images.gif.
+
-
<br>
+
-
На два рівні вниз.
+
-
<br>
+
-
Параметр="folder_1/folder_2/images.gif"
+
-
<br>
+
-
На два рівні вгору.
+
-
<br>
+
-
Параметр=". ./. ./images.gif"
+
-
<br>
+
-
Подібна вказівка шляхів застосовується для різних елементів, наприклад, посилань, малюнків, файлів.
+
-
<br>
+
-
Тег &lt;BODY&gt; може також мати параметри відступів в документі (визначаються числовим значення).
+
-
<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 сторінки мають однакову структуру.
+
-
<br>
+
-
Тегами &lt;HTML&gt;&nbsp; та&nbsp; &lt;/HTML&gt;&nbsp; починається&nbsp; та закінчується сторінка. Усі інші теги містяться між ними.
+
-
<br>
+
-
Заголовок сторінки та інформація для оглядача розміщується між дескрипторами
+
-
<br>
+
-
&lt;HEAD&gt; та &lt;/HEAD&gt; . Заголовок сторінки (відображається в рядку заголовка браузера) створюється за допомогою дескрипторів&nbsp; &lt;TITLE&gt; та &lt;/TITLE&gt;.
+
-
<br>
+
-
Зміст сторінки обмежується дескрипторами &lt;/BODY&gt;&nbsp; та &lt;/BODY&gt;. Усі теги, які відповідають за розміщення тексту, малюнків, посилань розміщені між ними.
+
-
<br><br><br><br>
+
-
Шаблон для створення WEB сторінки:
+
-
<br>
+
-
&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>
+
-
ХІД РОБОТИ
+
-
<br>
+
-
1.Запустити на виконання текстовий редактор Блокнот командою Пуск-Программы-Стандартные-Блокнот.
+
-
<br>
+
-
2.Увести текст необхідний для створення WEB сторінки, яка у вікні браузера має вигляд:
+
-
<br><br>
+
-
3.Зберегти в папці учня на диску&nbsp; Е&nbsp; у файлі з ім’ям Прізвище.htm.
+
-
<br>
+
-
4.Відкрити файл у програмі ІЕ, двічі клацнувши на значку файла і переглянути відображення HTML-документа в робочій області.
+
-
<br>
+
-
5.Повернутись у вікно Блокнота, клацнувши на його кнопці на панелі задач, і доповнити свою сторінку змінами, щоб у вікні браузера вона мала вигляд:
+
-
<br><br>
+
-
Зберегти документ, натиснувши клавіші &lt;Ctrl+S&gt;.
+
-
<br>
+
-
6.Переглянути одержаний HTML-документ у ІЕ. Для цього клацнути на кнопці ІЕ на панелі задач і обновити вміст робочої ділянки вікна ІЕ, натиснувши функціональну клавішу &lt;F5&gt;.
+
-
<br>
+
-
7. Створити фон для своєї сторінки. Щоб при перегляді вона мала вигляд:
+
-
<br><br><br>
+
-
ОФОРМЛЕННЯ&nbsp; РОБОТИ
+
-
<br>
+
-
За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання:
+
-
<br>
+
-
1.Чому змінилося відображення тексту HTML-документа у вікні ІЕ при останньому перегляді в порівнянні з його першим переглядом?
+
-
<br>
+
-
2.Яке призначення має кожний тег створеного HTML-документа?
+
-
<br>
+
-
3. Записати у зошиті для практичних робіт текстовий варіант вашої сторінки.
+
-
<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, яким може задаватся вирівнювання абзацу:
 +
<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]]
 +
 
 +
<br> '''''COLOR''''' - задає колір тексту (за умовчанням чорний - #000000). Колір тексту може визначаться як самою назвою, наприклад, red, blue і т.д, так і представлений в шістнадцятковому вигляді - #FF0000 (червоний) (за умовчанням чорний
 +
 
 +
<br> &lt;font COLOR="red"&gt; Червоний &lt;/font&gt; <br> &lt;font COLOR="#FF0000"&gt; Червоний &lt;/font&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> Колір і фон сторінки выбираються за бажанням дизайнера, але потрібно враховувати і той факт, що від них залежить візуальне сприйняття всього сайту. Не прагніть&nbsp; все затемнити, текст зручно читати, якщо його добре видно.
 +
 
 +
Отже спочатку про колір. Для його вставки в рядок з тегом &lt;BODY&gt; Вашого документа потрібно додати параметр BGCOLOR і вказати його значення - назву кольору або його шістнадцятковий вигляд. Приведені два приклади заповнюють сторінку документа червоним кольором.
 +
 
 +
<br>
 +
 
 +
'''&lt;BODY BGCOLOR="RED"&gt; (використана назва кольору) <br> &lt;BODY BGCOLOR="#FF0000"&gt; (використаний шістнадцятковий вид кольору) '''
 +
 
 +
<br> Тепер про фонову картинку. Фоном може бути як великий графічний файл (врахуйте - в цьому випадку сторіночка вантажитиметься довше) так і його фрагмент, що розумніше. При використанні останнього він буде автоматично розмножений Вашим Оглядачем, тому добирайте фрагмент таким, що добре стикується. Вставити в сторінку фонову картинку можна так:
 +
 
 +
<br> '''&lt;BODY BACKGROUND="images.gif"&gt; '''<br><br> Параметру BACKGROUND привласнено значення images.gif - це ім'я графічного файлу з розширенням (підтримуються *.jpg, *.gif, *.png). Природно воно може бути іншим. Передбачається, що графічний файл розміщений в одній папці з Вашим документом, інакше потрібно вказати до нього шлях. Розберемося з шляхами на прикладі файлу images.gif.
 +
 
 +
<br> [[Image:6.06-6.jpg]]
 +
 
 +
<br> Подібна вказівка шляхів застосовується для різних елементів, наприклад, посилань, малюнків, файлів.
 +
 
 +
<br> Тег &lt;BODY&gt; може також мати параметри відступів в документі (визначаються числовим значення).
 +
 
 +
<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 сторінки мають однакову структуру.
 +
 
 +
Тегами &lt;HTML&gt;&nbsp; та&nbsp; &lt;/HTML&gt;&nbsp; починається&nbsp; та закінчується сторінка. Усі інші теги містяться між ними.
 +
 
 +
Заголовок сторінки та інформація для оглядача розміщується між дескрипторами
 +
 
 +
&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.Запустити на виконання текстовий редактор Блокнот командою '''Пуск-Программы-Стандартные-Блокнот. '''
 +
 
 +
2.Увести текст необхідний для створення WEB сторінки, яка у вікні браузера має вигляд:
 +
 
 +
<br>
 +
 
 +
[[Image:6.06-7.jpg|726x544px]]<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-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>
 +
 
 +
<br>
 +
 
 +
<br> Надіслала викладач інформатики Чебанюк Олена Вікторовна, к.т.н., «НАУ».  
<br> <sub>Підручники та книги по всім предметам, домашня робота, [[Гіпермаркет Знань - перший в світі!|онлайн]] бібліотеки книжок, плани конспектів уроків з інформатика, реферати та конспекти уроків з інформатики для 8 класу [[Інформатика|скачати]]</sub>  
<br> <sub>Підручники та книги по всім предметам, домашня робота, [[Гіпермаркет Знань - перший в світі!|онлайн]] бібліотеки книжок, плани конспектів уроків з інформатика, реферати та конспекти уроків з інформатики для 8 класу [[Інформатика|скачати]]</sub>  
[[Category:Етапи_створення_веб-сайтів._Конспект_уроку_і_опорний_каркас]]
[[Category:Етапи_створення_веб-сайтів._Конспект_уроку_і_опорний_каркас]]

Текущая версия на 08:31, 15 июня 2011

Гіпермаркет знань>>Інформатика 8 клас >>Інформатика >> Інформатика: Етапи створення веб-сайтів


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




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


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

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

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

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


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


6.06-1.jpg


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


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


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


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

6.06-2.jpg

6.06-3.jpg

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


6.06-4.jpg


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


6.06-5.jpg


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.


6.06-6.jpg


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


Тег <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 сторінки, яка у вікні браузера має вигляд:


6.06-7.jpg

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

6.06-8.jpg

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

6.06-9.jpg

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


За результатами виконаної практичної роботи оформити звіт, у якому відповісти на такі запитання:
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 клас > Етапи створення веб-сайтів > Етапи створення веб-сайтів. Конспект уроку і опорний каркас

Авторські права | Privacy Policy |FAQ | Партнери | Контакти | Кейс-уроки

©  Автор системы образования 7W и Гипермаркета Знаний - Владимир Спиваковский

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

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

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