Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
10
Добавлен:
05.03.2016
Размер:
2.88 Mб
Скачать

Лабораторна робота №1

Тема: створення веб-сторінок простої структури.

Мета роботи: Отримати початкові навики створення веб-сторінок. Навчитись використовувати елементи форматування гіпертексту.

Хід роботи

На цій лабораторній роботі було розроблено просту веб-сторінку, яка містить коротку інформацію про «фільми». Для створення сторінки використовуємо HTML та текстовий редактор «Блокнот». Головна сторінка сайту називається index1.html. В створеній сторінці міститься заголовочна частина, що створюється за допомогою тегу <head>…</head>. Тут ми задаємо назву сторінки: «Nepyivoda Rostyslav» з допомогою тегу <title>… </title>. Головна частина сторінки розміжується між тегом <body>…</body>. З допомогою атрибутів цього тега було задано фон сторінки, а також колір гіперпосилань:

<body background="22.jpg" link="orange" vlink="yellow" alink="green">

На головній сторінці робимо меню керування з допомогою якого можна звертатись до інших сторінок. Даний код подано у лістингу 1.1.

Лістинг 1.1 – Код головної сторінки

<html>

<head><title>Nepyivoda Rostyslav</title>

</head>

<body background="22.jpg">

<table align="center" border="3" bordercolor="black" bgcolor="silver">

<tr align="center">

<td><b><a href="Тіні незабутих предків.html">Тіні незабутих предків</b></td>

<td><b><a href="Капітан Америка.html">Перший месник</b></td>

<td><b><a href="300 спартанців.html">300 спартанців</b></td>

<td><b><a href="Ной.html">Ной</b></td>

</tr>

<tr>

<td><img src="2.jpg"></td>

<td><img src="3.png"></td>

<td><img src="4.jpg"</td>

<td><img src="5.jpg"</td>

</tr>

<tr align="center">

<td><b><a href="Форсаж 6.html">Форсаж 6</b></td>

<td><b><a href="Геркулес.html">Геркулес</b></td>

<td><b><a href="Хоббит 2.html">Хоббит</b></td>

<td><b><a href="Тор 2.html">Тор 2</b></td>

</tr>

<tr>

<td><img src="10.jpg"></td>

<td><img src="11.jpg"></td>

<td><img src="14.jpg"</td>

<td><img src="13.jpg"</td>

</tr>

</table>

</body>

</html>

Після цього створюємо ще вісім сторінок, які будуть мати такі назви «Ной», «300 спартанців», «Тор2», «Хоббит 2», «Геркулес», «Форсаж 6», «Капітан Америка» та «Тіні незабутих предків» і містити відповідну інформацію про фільм. На усіх сторінках розміщено меню управління, яке дозволяє переміщатись по сайті. Гіперпосилання реалізовано за допомогою такої лінії коду:

<p align="center"><a href="index1.html"><b>На головну</b></a></p>

Також на кожній сторінці розміщено таблиці з відповідною інформацією про даний фільм. Таблиці створюємо з допомогою тега <table>…</table>. Відповідно таблиці розбиваємо на рядки та стовпці тегами <tr>…</tr> та <td>…</td>. Також на сторінці є короткий опис фільму та відеоролик. Код сторінки «Фільми» виведено у лістинг 1.2.

Лістинг 1.2 – Код відкритої сторінки з фільмом

<html>

<head><title>Nepyivoda Rostyslav</title>

</head>

<body background="22.jpg" link="orange" vlink="yellow" alink="green">

<table align="center" border="3" bordercolor="black" bgcolor="silver">

<td><img src="2.jpg"></td>

<td WIDTH="22%" ALIGN="left" SIZE="0" bgcolor="lightblue">

<p><b><FONT COLOR=blue>Рік: 2013</FONT></p></b></div>

<p><b><FONT COLOR=blue>Країна: Україна</FONT></p></b>

<p><b><FONT COLOR=blue>Режисер: Любомир Левицький</p></b>

<p><b><FONT COLOR=blue>Жанр: Містика, Хоррор</FONT></p></b>

<p><b><FONT COLOR=blue>Бюджет: 1,000,000$</FONT></p></b>

<p><b><FONT COLOR=blue>Прем'ра в світі: 14 листопада 2013</FONT></p></b>

<p><b><FONT COLOR=blue>Прем'ра в Україні 14 листопада 2013</FONT></p></b>

<p><b><FONT COLOR=blue>Час: 120 хв.</FONT></p></b>

</td>

<td align="justify" bgcolor="lightblue"> Двадцятирічний юнак Ваня живе звичайним студентським життям, страждаючи від нерозділеного кохання. Але одного дня, в процесі чергового привертання до себе уваги університетської красуні, він стає причиною пропажі Згарди, яка дев'ять років назад була знайдена в Карпатах та передана університету як цінний експонат.

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

</td>

</tr>

</table>

<P><div align="center"></p><object width="560" height="315"><param name="movie"

value="http://www.youtube.com/v/oiZHgrXyJr8?version=3&

hl=ru_RU"></param><param name="allowFullScreen" value="true">

</param><param name="allowscriptaccess" value="always">

</param><embed src="http://www.youtube.com/v/oiZHgrXyJr8?version=3&

hl=ru_RU" type="application/x-shockwave-flash" width="560" height="315"

allowscriptaccess="always" allowfullscreen="true"></embed>

</object> </P></div>

<p align="center"><a href="index1.html"><b>На головну</b></a></p>

</body>

</table>

</body>

</html>

Інші сторінки даного сайту подібні за структурою до попередньої. Вигляд зображено на рисунках 1.1, 1.2, 1.3, 1.4.

Рисунок 1.1. Головна сторінка

Рисунок 1.2. Відкрита сторінка фільму

Рисунок 1.3. Коротка характеристика фільму

Рисунок 1.4 Трейлер до фільму

Соседние файлы в папке 1-2 лаба програмування інтернет