У роботі розглядаються
- HTML та вебдизайн
- Таблиці в HTML
- Форматування вебсторінок
- Дескриптори HTML
- Кольорова гама та оформлення
- Атрибути тегу table
Лабораторна робота №7: Створення таблиці, вкладені таблиці
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Інститут комп’ютерних наук та інформаційних технологій
Факультет:
КН
Кафедра:
Кафедра автоматизованих систем управління
Інформація про роботу
Рік:
2018
Тип роботи:
Лабораторна робота
Предмет:
Веб технології та веб дизайн
Група:
КН-31
Коротко про документ
Про що ця робота
У лабораторній роботі досліджується створення та форматування таблиць у середовищі HTML. Створено вебсторінку з демонстрацією отримання кольорів за допомогою табличної верстки.
Зміст і розділи
- Порядок виконання роботи
- Постановка завдання
- Код програми
- Результат виконання програми
Для кого:Студенти технічних спеціальностей вищих навчальних закладів
Викладачі:Різник О.Я.
Ключові поняття
HTMLтаблицярядокстовпчиквебдизайнкоміркатегатрибут
Частина тексту файла (без зображень, графіків і формул):
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»
ІНСТИТУТ КОМП’ЮТЕРНИХ НАУК ТА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ
КАФЕДРА АВТОМАТИЗОВАНИХ СИСТЕМ УПРАВЛІННЯ
/
Лабораторна робота №7
з дисципліни ' Веб-технології та веб-дизайн '
на тему: ' Створення таблиці, вкладені таблиці '
Лабораторна робота №7
Тема роботи: Створення таблиці, вкладені таблиці.
Мета роботи: Створити художньо-оформлену Web-сторінку з використанням таблиць.
Порядок виконання роботи
1.Ознайомтеся з текстом лабораторної роботи.
2.Відкрийте WEB-браузер Internet Explorer, запустіть програму створену на першій лабораторній роботі.
3.В Internet Explorer’ і зайдіть в меню View\Source або на інформативному полі клацніть правою клавішею миші і виберіть пункт View\Source.
4.Перед вами запуститься програма Notepad, і ви можете добавляти текст і нові дескриптори, що запропоновані вище, в тіло вашого HTML-документу.
5.Створіть таблицю 5*6 (див. завдання).
6.По завершені роботи збережіть свій файл для подальшого використання на наступних лабораторних роботах.
Постановка завдання:
1.Створивши таблицю, добавте заголовок таблиці з вирівнюванням по правому краю таблиці.
2.Перші 2-а стовпчики вкажіть їхнє значення через проценти, а решта через пікселі.
3.Добавте окантовку таблиці темно-сірим кольором.
4.Об’єднайте 3-ій і 4-ій стовпчики в 4-у рядку.
5.Об’єднайте 1-ий і 2-ий рядки комірки в 1-у стовпчику.
6.Добавте текст в кожну комірку вашої таблиці.
7.Відцентруйте текст у верхньому рядку по ширині і по висоті.
8.Виділіть в остатньому стовпчику весь текст жирним, і створіть кольорові комірки в шахматному порядку (наприклад синя клітина, червона клітина і т.д.)
9.Вирівняйте текст в одній з комірок на 2-а, 3-и символи.
Код програми:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Згадую основи HTML</title>
</head>
<body bgcolor="#add8e6" text="#191970" background="1490921753-Festival_of_Colors_tickets.jpg" link="#7fff00" vlink="white" alink="red" >
<h2><center>Гуаш - різновид фарб</center></h2>
<p align="center"><strong>Гуаш</strong> (фр. Gouache, італ. guazzo — водяна фарба) — різновид водорозчинних фарб. На відміну від акварелі — непрозорі через домішки крейди, свинцевих білил чи каоліну. Це досить щільні, але недостатньо міцні фарби, і при нанесенні товстим шаром осипаються, не мають блиску. Гуашшю можна працювати не тільки на папері, але і на ґрунтованому полотні, на тканині, картоні, фанері. Гуаш широко застосовується в декораційному живописі, при виконанні різних ескізів. Дуже часто використовують його для кольорових начерків. Гуаші виготовляють з суміші кольорових пігментів і клею з додаванням білил. Гуаш зручний в роботі і, що важливо, дає можливість вносити виправлення в процесі роботи. Шар фарби середньої товщини сохне від 30 хвилин до 3 годин в залежності від вологості повітря.</p>
<hr width="50%">
<table border="1" align="center" boderlight="#a9a9a9" bordercolor="#a9a9a9" cellpadding="3" cellspacing="0">
<caption><center>Як отримати потрібний колір:</center></caption>
<tr align="center" bgcolor="#e6e6fa">
<th width="20%">Потрібний колір</th>
<th width="20%">Основний колір</th>
<th colspan="2">+Додатковий колір</th>
</tr>
<tr align="center">
<td width="20%" bgcolor="#ffc0cb"><strong>Королівський синій</strong></td>
<td width="20%" bgcolor="#add8e6">Синій</td>
<td bgcolor="#ffc0cb">Чорний</td>
<td bgcolor="#add8e6">Зелений</td>
</tr>
<tr align="center">
<td width="20%" bgcolor="#add8e6"><strong>Веджвуд-синій</strong></td>
<td width="20%" bgcolor="#ffc0cb">Білий</td>
<td bgcolor="#add8e6">Синій</td>
<td bgcolor="#ffc0cb">Чорний</td>
</tr>
<tr align="center">
<td width="20%" bgcolor="#ffc0cb"><strong>Біло-синій</strong></td>
<td width="20%" bgcolor="#add8e6">Білий</td>
<td bgcolor="#ffc0cb">Синій</td>
<td bgcolor="#add8e6">-</td>
</tr>
<tr align="center">
<td width="20%" bgcolor="#add8e6"><strong>Бірюзово-синій</strong></td>
<td width="20%" bgcolor="#ffc0cb" rowspan="2">Білий</td>
<td bgcolor="#add8e6">Синій</td>
<td bgcolor="#ffc0cb">Зелений</td>
</tr>
<tr align="center">
<td width="20%" bgcolor="#ffc0cb"><strong>Морська хвиля</strong></td>
<td width="20%" bgcolor="#ffc0cb">Чорний</td>
<td bgcolor="#add8e6">Зелений</td>
</tr>
</table>
</body>
</html>
Результат виконання програми
/
Висновок
Під час виконання цієї лабораторної роботи я оволоділа практичними навичками створення художньо-оформленої Web-сторінки з використанням таблиць.
Допоможи студентському архіву
Ми допомогли тобі — допоможи наступному студенту
Оголошення від адміністратора
Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!