Практична робота №1 «Створення HTML-документів в простому текстовому редакторі»

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

«Створення 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=значення – задає колір переглянутих гіперпосилань.

Вправа1.

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

1. Створіть у своїй папці папку під назвою «Мій вебдокумент».

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

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

<HTML>

<HEAD>

<TITLE>Купівля\продаж</TITLE>

</HEAD>

<BODY>

<H1>Торгівельні об’єкти Тернопільщини</H1>

<H2>Супермаркети</H2>

<P>На Львівщині діє мережа магазинів Інтермаркет. У кожному районі є торговельний об’єкт.

<P>Одним із таких магазинів став нещодавно відкритий супермаркет

«Арсен».<HR>Це торгівельний центр із багатьма відділами та зручною системою обслуговування покупців.<BR>Його можна назвати торговельним містечком.

</BODY>

</HTML>

1. Збережіть файл на жорсткому диску у створеній заздалегідь папці, назвавши його, наприклад, ВАШЕ ПРІЗВИЩЕ.html. З’явиться файл зі значком Internet Explorer. Закрийте текстовий редактор.

2. Запустіть файл 1.html. Перегляньте отриманий результат.

3. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд(Вид). Збережіть зміни та оновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів.,

4. Файл вантажим у програму.