- •Лабораторна робота № 3
- •Теоретичні відомості
- •Хід роботи:
- •Контрольні питання та завдання:
- •Література
- •Лабораторна робота №4
- •Теоретичні відомості
- •Хід роботи
- •2. Теги форматування
- •Коментарі
- •3. Форматування шрифта
- •Фізичні стилі
- •Логічні стилі
- •4. Організація тексту всередині документа
- •5. Таблиці
- •6. Посилання на інший документ (загальні посилання)
- •7. Кольорове оформлення сторінок засобами html
- •Контрольні питання
- •Література
Хід роботи
Ознайомитися з теоретичними відомостями та додатком 1 «Структура створення реклами».
2. Використовуючи один із текстових редакторів, наприклад, NotePad (блокнот), створіть HTML-файл такого змісту:
<html>
<head>
<title> Ресторан «Пустуньчик» </title>
</head>
<body>
...
</body>
</html>
Запишіть цю структуру і збережіть файл під іменем: Офіційний сайт Підприємства «______________».html. В своїй папці, на диску D.
3. Вставте між <body> і </body> відповідний текст, використовуючи для цього зібрану інформацію про підприємство в лабораторній роботі № 2
<h1>Ресторан «Пустуньчик» </h1>
Сучасний ресторан задовольнить Ваші бажання та смаки. (даний текс повинен містити інформації у вигляді «Слогану»)
<p>Кожний може відвідати даний ресторан, так як даний ресторан поділений на зали, відповідно до страв, які представляють різні країни світу. </p> <p>Ресторан пропонує:страви з різних країн; фірмові страви від шеф-кухаря; замовлення продукції та доставка по адресу.</p>
4. Збержіть ці зміни у файлі Офіційний сайт Підприємства «_____________».html
5. Не закриваючи вікна текстового редактора, запустіть Internet Explorer і завантажте файл Офіційний сайт Підприємства «_____________».html, використовуючи команди головного меню Файл ->Открыть (File -> Open). Розгляньте результат вашої першої спроби створення власної Web-сторінки. Зверніть увагу на розміри символів заголовку, вирівнювання речень до країв сторінки. Поверніться до вікна текстового редактора, де виведено зміст файлу Офіційний сайт Підприємства «_____________».html .
6. Поміняйте парні теги <h1>, </h1> на <h3>, </h3>, і продовжіть інформацію про перелік страв (товарів):
Основні страви, що пропонує ресторан:
<ul>
<li>французька кухня
<li>італійська кухня
<li>европейська
<li>персональні замовлення страв з різних країн (виконуються за пару днів)
</ul>
7. Збережіть цей змінений файл Файл -> Сохранить (File -> Save). Зробіть висновок про призначення тегів <h3>, </h3>, <ul>, </ul>, і <li>.
8.Далі зробіть у зміcті файлу Офіційний сайт Підприємства «_____________».html такі зміни: уведіть у фрагмент тексту, про страви, що пропонує ресторан додаткові теги <li>, у тезі <body> вставте параметри bgcolor і text, які відповідають за колір фону і тексту відповідно. В результаті одержимо, наприклад, такий текст програми:
<html>
<head>
<title>Ресторан «Пустуньчик»</title>
</head>
<body bgcolor="blue" text="yellow">
<h2>Ресторан «Пустуньчик»</h2>
<center><b><i> Сучасний ресторан «Пустуньчик» задовольнить Ваші бажання та смаки. </i></b></center>
<p><i>Ресторан "Пустуньчик"(ресторан Вашої сім'ї) </i>.
<p>Основні страви, що пропонує ресторан:
<ul>
<li>французька кухня
<ul>
<li>крем-суп
<li>жаб`ячі лапки під соусом
<li>сашінєти
<li>бестлле
</ul>
<li>італійська кухня
<ol>
<li>різотто
<li>спагетті
<li>піретті
</ol>
<li>европейська
<li>персональні замовлення страв з різних країн (виконуються за пару днів)
</ul>
</body>
</html>
9. Збережіть цей файл із внесеними змінами під тим же іменем Офіційний сайт Підприємства «_____________».html .
10. Знову перегляньте, як змінився зовнішній вигляд вашої Web-сторінки, використовуючи броузер Internet Explorer.
11. Завантажте графічний редактор, наприклад, Paint, і створіть невеличкий малюнок для власної Web-сторінки. Збережіть його у файлі paint Фірмовий знак.bmp в Вашій папці на диску D:\.
12. Поверніться до HTML-файлу Офіційний сайт Підприємства «_____________».html і внесіть у текст програми перед тегом </body> такий фрагмент:
<img src="D:\папка МР\ paintФірмовий знак.bmp" alt="емблема" align="right" width="240" height="200">
<img hspace="40" vspace="40">
<marquee bgcolor="green" height="40">
Адреса підприємства______________________
</marquee>
13. Збережіть змінений файл. Перегляньте його у броузері.
14. Додамо до нашого сайту звуковий ефект, який буде супроводжувати сайт при його завантаженні. Для даної операції потрібно використати відповідний тег <BGSOUND SRC= "адреса звукового файлу"> - (відтворюється звук із заданого файлу у момент запуcку сторінки).
Для звукового ефекту потрібно використовувати назви звукових файлів в яких розширення au, wav, mid, midi, ra, а відеофільмів - avi, vivo, mpeg.
Поверніться до HTML-файлу Офіційний сайт Підприємства «_____________».html і внесіть у текст програми перед тегом </body> такий фрагмент (даний текст програми можна внести в будь-яку частину нашого сайту, але в частину між тегами <body>…….</body>):
<BGSOUND SRC="D:\Stacionar\Grupa_51\Vera_-_Ata.wav">
15. Збережіть змінений файл. Перегляньте його у броузері.
16. Повернемося до HTML-файлу Офіційний сайт Підприємства «_____________».html
17. Додамо до сайту рисунок (фотографію, анімацію), який буде відкриватися за допомогою гіперпосилання на файл:
<A HREF= "D:\Stacionar\Grupa_51\DSC03554.JPG">"Фірмова страва дня"
</А>
18. Збережіть змінений файл. Перегляньте його у броузері. Чи сподобалася вам створена Web-сторінка?
Увага! При створенні власної Web-сторінки використайте короткий довідничок про призначення тегів (додаток 1).
19. За допомогою тегів додати до Вашої Web-сторінки додаткові картинки, музику відповідно до специфіки Вашого підприємства, також змініть розмір та колір тексту.
20. Хід роботи, кінцеві результати та висновки по даній лабораторній роботі оформити в документі «Реклама в Інтернеті»
21. Ознайомитися з контрольними питаннями та підготуватися до захисту лабораторної роботи
Таблиця тегів Табл. 6.1
Синтаксис тегів |
Призначення |
Атрибути і їх аргументи |
<TABLE> ... </TABLE> <TR> ... </TD> <TD>... </TD> <TH>... </TH> <CAPTION> |
Створює таблицю з однією або декількома рядками (блоки <TR>)і стовпцями (блоки TD>). За бажанням можна додати заголовки стовпців (блоки <TH>) або заголовок для всієї таблиці (<CAPTION>) |
ALIGN Установлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). ... |
Обов'язкові теги
<html> ... </html>
Тег <html> відкриває HTML–документ. Тег </html> – завершує HTML–документ.
<head> ... </head>
Ця пара тегів вказує на початок і кінець заголовку документа. Крім назви документа, в цей розділ можна додати багато службової інформації.
<title> ... </title>
Все, що знаходиться між мітками <title> і </title>, тлумачиться оглядачем як назва документа. Оглядач показує назву поточного документа у заголовку вікна. Рекомендується назва не довша 64 символів.
<body> ... </body>
Ця пара тегів вказує на початок і кінець HTML–документа, тіло і визначає вміст документа.