Desktop_1 / Лаба 2
.docМіністерство освіти і науки
Тернопільський національний технічний університет імені Івана Пулюя
Факультет комп'ютерно-інформаційних систем і програмної інженерії
Кафедра програмної інженерії
ЗВІТ
до лабораторної роботи №2
з дисципліни «Програмування інтернет»
Тема: «Створення веб-сторінок з таблицями»
Підготував:
студент групи СПc-31
Непийвода Ростислав
Тернопіль 2014
Лабораторна робота № 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>
…
<td><img src="10.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>Прем'ра в Україні 3 квітня 2014</FONT></p></b>
<p><b><FONT COLOR=blue>Час: 128 хв.</FONT></p></b>
</td>
<td align="justify" bgcolor="lightblue"> Стів Роджерс, непридатний … промовистим прізвиськом «Червоний череп».</td>
</tr>
</table>
Інші сторінки даного сайту подібні за структурою до попередньої. Вигляд зображено на рисунках 1.1, 1.2.
Рисунок 1.1 – Головна сторінка з таблицями
Рисунок 1.2 – Опис фільму в створеній таблиці