Тема 4. Створення таблиць (4 год.)

Мета. Сформувати у студентів навички необхідні для підготовки html-файлу

навчитися створювати веб-сторінку, яка буде містити різні види таблиць.

Завдання

1. Створити НТМL-код веб-сторінки, який відображатиме вказаний форматований текст.

2. Відкрити папку, в якій зберігатиметься файл лабораторної роботи на жорсткому диску.

3. У текстовому редакторі створити НТМL-сторінку Прізвище3.html з використанням тегів, що налаштовують бажаний вигляд веб-сторінки, доповнивши її таблицями:

3.1. Таблиця 1. виключена вліво, складається з двох рядків і двох стовбців, фон – кольору "#A0DDA0", має ширину 200 пікселів. Текст в комірках включений вліво. Рамка шириною 1.

3.2. Таблиця 2. виключена вліво, має ширину 300 пікселів. Рамка шириною 1. Складається з чотирьох рядків, трьох стовбців, фон – кольору "plum". Текст першого рядка (шапки) кожної комірки виключений по центру. Текст інших рядків виключений вліво.

3.3. Таблиця 3. виключена по центру, має ширину 300 пікселів. Рамка шириною 1. Складається з чотирьох рядків, трьох стовбців, фон – кольору "plum". Текст першого рядка (шапки) кожної комірки виключений по центру. Текст інших рядків виключений вліво. Відстань між комірками таблиці (в пікселях) cellspacing «5», між текстом і внутрішньою межею комірки cellpadding – «10».

3.4. Таблиця 4. виключена по центру, має ширину 300 пікселів. Відстань між комірками таблиці (в пікселях) cellspacing «0», між текстом і внутрішньою межею комірки cellpadding – «10». Рамка шириною 1. Складається з чотирьох рядків, трьох стовбців. Текст першого рядка (шапки) кожної комірки виключений по центру, фон – кольору "plum". Текст другого рядка кожної комірки виключений по центру, фон жовтого кольору – "yellow". Текст третього рядка кожної комірки виключений вліво по горизонталі і до низу - по вертикалі, фон – кольору "plum". Текст четвертого рядка в усіх комірках виключений по горизонталі вправо, по вертикалі – вверх .

3.5. Таблиця 5. – скопіювати Html-код Таблиці 4., у якій змінити колір будь-якої комірки на червоний.

3.6. Таблиця 6. – скопіювати Html-код Таблиці 2., об’єднати в першому рядку два стовбці і в цій комірці, тло якої коричневого кольору написати – «шапка таблиці».

3.7. Таблиця 7. – копіювати Html-код Таблиці 2., об’єднати в першому стовбці два рядки і в цій комірці написати – «меню»

3.8. Таблиця 8. виключена по центру, має ширину 715 пікселів. Рамка шириною 1. Відстань між комірками таблиці (в пікселях) cellspacing «0», між текстом і внутрішньою межею комірки cellpadding – «10».

Перший рядок (шапка) має дві комірки кольору "darkred" (довжина першої комірки – 70%, ширина – 60 пікселів, текст – «шапка», виключений вліво; друга комірка – об’єднана комірка першого і другого рядка у другому стовбці, має колір "darkred" і текст – «меню»);

Другший рядок має дві комірки (довжина першої комірки – 70%, ширина – 200 пікселів, текст – «контент» має колір –"oldlace" , друга комірка – об’єднана комірка першого і другого рядка у другому стовбці, має колір "darkred" і текст – «меню»)

Третій рядок має одну об’єднану з двох стовбців комірку (ширина – 30 пікселів, текст – «низ сайту» має колір – "darkred").

3.9. Таблиця 9. – має три рядки і два стовбці, виключена по центру, ширина – 470 пікселів. Рамка шириною 1. Відстань між комірками таблиці (в пікселях) cellspacing «0», між текстом і внутрішньою межею комірки cellpadding – «10».

Перший рядок має дві комірки (перша комірка містить картинку1, вибрану студентом, довжина – 100 пікселів, ширина – 70 пікселів; друга комірка містить текст з коротким описом зображеного в першій комірці);

Другший рядок має дві комірки (перша комірка містить картинку 2, вибрану студентом, довжина – 100 пікселів, ширина – 70 пікселів; друга комірка містить текст з коротким описом зображеного в першій комірці);

Третій рядок має має дві комірки (перша комірка містить картинку 3, вибрану студентом, довжина – 100 пікселів, ширина – 70 пікселів; друга комірка містить текст з коротким описом зображеного в першій комірці).

0. Таблиця 10 – вкладена таблиця. Скопіювати Html-код Таблиці 8. і вставити в нього замість слова «контент» таблицю 9.

1. Зберегти документ на жорсткому диску з розширеннямт Прізвище3.html у створеній папці.

2. Закрити текстовий редактор.

3. Завантажити браузер (ІnternetЕхрloer, MozillaFirefox) та відкрити файл Прізвище3.html. або запусти­ти файл, що відображається в папці піктограмою веб-сторінки.

4. Переглянути отриманий результат.

5. Проаналізувати відтворення веб-сторінки.

6. При необхідності внести зміни ви­конати у меню ВИГЛЯД команду ПЕРЕГЛЯД НТМL-КОДУ. Зберегти зміни та оновити веб-сторінку (F5).

7. У висновку описати використані теги.