Всеосвіта›
Бібліотека уроків›
Основи комп’ютерної графіки та Web-дизайну›
Практична робота №9: Створення та редагування HTML-документа

Опублікував/ла:

Романець Андрій Володимирович

Посилання Написати Додати в обране Поскаржитися

Урок:

Практична робота №9: Створення та редагування HTML-документа

21.02.2024

0 0

Основи комп’ютерної графіки та Web-дизайну

II курс

788

Завантажити урок 25

2 курс-Основи комп.граф.та web

провести урок серед своїх учнів на основі цього уроку

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

Опис уроку (учням цей опис не показується):

Урок 17

Предмет: Основи комп'ютерної графіки та Web-дизайну (2 курс).

Практична робота №9: Створення та редагування HTML-документа.

Вміст уроку:

Урок не містить жодного завдання. Додайте завдання.

Щоб додати завдання, оберіть категорію завдання на панелі запитань.

Додати завдання

Практична робота №9

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

Поняття тегу.

Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами. Усі теги починаються із символу < і закінчуються символом >. Використовують пару тегів, відкривальний і закривальний. Наприклад <HTML> </HTML>, <B> </B>, <TITLE></TITLE>….

Перший з них задає ефект, а другий - припиняє дію. Закривальний тег починається із символу / (слеш). Деякі теги задають разовий ефект, тоді закривальний тег не потрібний. Приклади одинарних тегів: <BR>, <HR>, <WETA>, <BASEFONT>, <FRAME>, <INPUT>.

Відкривальні теги можуть містити атрибути, які впливають на ефект, створюваний тегом. Для деяких атрибутів слід задавати значення, яке відділяють від імені атрибута символом =. Значення атрибута беруть в лапки, але в багатьох випадках їх можна не ставити. Закривальні теги атрибутів не містять. Приклади: <BODY BGCOLOR=”#000000” TEXT”FFFFFFF”….

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

Починається з тегу <HTML> і закінчується відповідним йому тегом </HTML>. Така пара тегів повідомляє браузеру, що це <HTML>- документ.
Містить два розділи – заголовків і тіла документа (розміщуються саме в такому порядку). Розділ заголовків помічений тегами <HEAD> і </HEAD> та містить інформацію про документ загалом. Зокрема, він повинен містити в собі теги <TITLE> та </TITLE>, між якими розміщено текст, що відображатиметься в заголовку вікна браузера. Крім цього, у розділі заголовків може міститися тег <META>, призначений для технічного опису документа (це інформація для пошукових програм), а також тег <STYLE> для опису стилів (наборів параметрів форматування), використаних в документі.

Сам текст документа міститься в його тілі, яке розташоване між тегами <BODY> та </BODY>.

Теги

Від <H1>…</H1> до <H6>…</H6> - шість рівнів заголовків, які підтримує мова HTML. Найвищий рівень заголовків <H1>…</H1>. Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Текст заголовка може бути вирівняний по центру, за правим, за лівим краєм – для цього використовують атрибут ALIGN. Приклад: <H2 ALIGN=center>Текст заголовка</H2>;

<P> і </P> - теги для визначення звичайних абзаців (Слід пам’ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення <HTML>-документа браузер ігнорує;
<BR> -одинарний тег для переходу на новий рядок без створення абзацу;

<HR> - одинарнийтег для розділення тексту горизонтальною лінією;

Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути:

BACKGROUND=”URL” – замість ”URL”вказують адресу малюнка, якиймає бути тлом для сторінки;
BGCOLOR=значення – задає колір, який має бути фоновим для документа;
TEXT=значення – задає колір тексту;
LINK=значення – визначає колір гіперпосилань у документі;
ALINK=значення –задає колір гіперпосилань під час клацання;
VLINK=значення – задає колір переглянутих гіперпосилань.

Хід роботи

Створити HTML-документ за допомогою найпростішого текстового редактора.

1) Створіть у своїй папці папку під назвою «Web».

2) Відкрийте текстовий редактор Блокнот.

3) Для створення HTML-документа наберіть такий текст:

<HTML>

<HEAD>

<TITLE>Історія Збаража</TITLE>

</HEAD>

<H1 align=center>Збараж</H1>

<H2 align=center>Історична довідка</H2>

<P>Збараж – місто районного підпорядкування, центр Збаразького району, розкинулось на Подільській височині за 17 км від обласного центру м. Тернополя, на обох берегах річки Гнізна. притоки Серету.</P>

<P>Перший раз у писемних джерелах назва “Збараж” появляється у Галицько-Волинському літописі, що є частиною знаменитого Іпатіївського літопису – найдавнішого літописного зведення, створеною на Україні на початку XV століття. Це 1211 рік. Двічі місто Збараж згадується у списках “Повісті врємєнних літ”.</P>

</BODY>

</HTML>

4) Збережіть файл на жорсткому диску у створеній заздалегідь папці, назвавши його Збараж.html. Закрийте текстовий редактор.

5) Запустіть файл Збараж.html. Перегляньте отриманий результат.

7) Проаналізуйте, як відтворено веб-сторінку.

8) Якщо потрібно внести зміни, відкрийте файл за допомогою блокноту. Збережіть зміни та оновіть веб-сторінку за допомогою клавіші F5 або кнопки Перезавантажити цю сторінку панелі інструментів.

8) Файл завантажте на «Всеосвіту».