Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ОБЩИЙ_файл_ПОСОБИЕ.doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
22.69 Mб
Скачать

Приклад вирішення

При створенні власної сторінки, належить перевіряти її вигляд у вікні браузера на кожному етапі проектування:

1. Запустіть програму "Блокнот" (notepad.exe). Створіть файл з ім'ям та розширенням <Ваше прізвище>.html.

2. У цьому файлі необхідно набрать текст HTML-сторінки (в ній зобов'язано повинено бути присутнім заголовок і коментар). HTML-сторінка повинна відображати у вікні браузера якись рядки тексту. Наприклад:

<HTML>

<HEAD> Це мій сайт!!

<! -- Написано Іваном Іваненко -->

<TITLE> Моя перша сторінка </TITLE>

</HEAD>

<BODY>

Доброго дня, це я і моя перша сторінка. Давайте знайомитися!

<BR>

Ласкаво просимо! :)

</BODY>

</HTML>.

Результат виконання цього HTML-коду Web-браузером наведено на рис.9.6.

Рис. 9.6. Перша Web-сторінка

3. Допишіть текст сторінки так, щоб вийшло два абзаци довільної тематики. При цьому перший абзац має бути вирівняний по центру, а другий - по лівому краю. Шрифт першого абзацу повинен бути "bold" (жирний), "underline" (підкреслений) і на розмір більше другого, а шрифт другого абзацу - "italic" (курсив). Задайте різні шрифти для абзаців.

Приклад:

<HTML>

<HEAD> Це мій сайт!

<TITLE> Моя перша сторінка </TITLE>

</HEAD>

<BODY TEXT="#336699" BGCOLOR="#000000">

<CENTER>

Доброго дня, це я і моя перша сторінка. Давайте знайомитися!

<BR>

<FONT COLOR="#CC0000"> Ласкаво просимо! </FONT>:) </CENTER>

<P ALIGN="center">

<B> <U> <FONT SIZE="+2" FACE="ARIAL">

Я зовсім недавно почав (а) знайомитися з HTML, і мені відразу ж теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, почитати про мене, черкнути пару рядків в мою гостьову книгу. А може і просто випадковий відвідувач раптом захоче познайомиться зі мною, і в мене з'явиться ще один віртуальний друг? :) </FONT> </U> </B> </P>

<P ALIGN="left">

<I> <FONT SIZE="+1" FACE="Algerian"> Захоплення прості! Але в двох словах не розкажеш, тому давайте перейдемо до наступної сторінці </FONT> </I> </P>

</BODY>

</HTML>.

Результат виконання цього HTML-коду Web-браузером наведено на рис.9.7.

Рис.9.7. Web-сторінка з оновленим текстом

4. Додайте в Web-документ після другого абзацу гіперпосилання на сайт ХНЕУ (http://www.hneu.edu.ua/ua/news.html).

5. Змініть вигляд сторінки наступним чином:

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

6. Вставте між абзацами зображення і обведіть його рамкою з товщиною більше 1 пикселя. Встановіть текст другого абзацу праворуч від зображення на певній відстані. Для розміщення зображення слід використовувати тег <IMG> з відповідними параметрами:

<IMG Border="2" SRC="Рисунок.jpg" HSPACE="85" height="100" width="75" alt="Здесь повинен бути рисунок">

7. Додайте після абзацу з картинкою і до гіперпосилання червону нерельєфну лінію шириною в 2 пікселя і довжиною 80% від ширини вікна браузера, вирівнявши її по середині сторінки.

8. Перегляньте свою сторінку, якщо це можливо, у двох різних браузерах.