1-2 лаба програмування інтернет / Лаба 2
.docxЛабораторна робота № 2
Тема: Створення веб-сторінок з таблицями.
Мета роботи: Отримати початкові навики створення HTML таблиць. Навчитись використовувати форматування таблиць.
Хід роботи
Створюємо таблицю для заповнення її необхідними даними. Таблицю створюємо з допомогою тега <table>…</table>. Задали для даної таблиці необхідні параметри:
-
Товщина рамки (border="1")
-
Колір рамки (bordercolor="FF00FF")
-
Відстань від рамки до тексту (cellpadding="7")
-
Відстань між комірками (cellspacing="0")
Створення нового рядка реалізовуємо з допомогою парного тега <tr>…</tr>, а стовпці створюємо за допомогою тега <td>...</td>. Об’єднання стовпців відбувається з допомогою атрибута colspan, а рядків – rowspan.
Зображення у відповідні комірки вставляємо з допомогою тега <img>:
<td><img src="2.jpg"></td>
Для того щоб зробити фоновий колір комірок використовуємо атрибут bgcolor.
Код створеної таблиці на html-сторінці подано у лістингу 1.1, 1.2.
Лістинг 1.1 – Код створення таблиці
<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>
Лістинг 1.2. – Опис фільму в створеній таблиці
<table align="center" border="3" bordercolor="black" bgcolor="silver">
<td><img src="3.png"></td>
<td WIDTH="22%" ALIGN="left" SIZE="0" bgcolor="lightblue">
<p><b><FONT COLOR=blue>Рік: 2014</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,370,000$</FONT></p></b>
<p><b><FONT COLOR=blue>Прем'ра в світі: 26 березня 2014</FONT></p></b>
<p><b><FONT COLOR=blue>Прем'ра в Україні 3 квітня 2014</FONT></p></b>
<p><b><FONT COLOR=blue>Час: 128 хв.</FONT></p></b>
</td>
<td align="justify" bgcolor="lightblue"> Стів Роджерс, непридатний до служби в армії, погоджується взяти участь в науковому експерименті, завдяки якому стає суперсолдатом, відомим як Капітан Америка. Роджерс вступає в озброєні сили США щоб захищати ідеали Америки. 2-а світова війна. Стів Роджерс, тільки міцний духом та виключно слабенький тілом, попадається у американську армію. Експеримент перетворить дистрофічного героя у супермена, Капітана Америка. Він вступає у епічну битву з фашистським монстром з промовистим прізвиськом «Червоний череп».</td>
</tr>
</table>
Інші сторінки даного сайту подібні за структурою до попередньої. Вигляд зображено на рисунках 1.1, 1.2.
Рисунок 1.1. Головна сторінка з таблицями
Рисунок 1.2. Опис фільму в створеній таблиці