Основи мови HTML презентация

? Основи веб-дизайну
Вперед>>
<< Назад
13:51
Теги таблиць, рядків, комірок, їхні атрибути.
Розмітка веб-сторінок за допомогою таблиць.
Практична робота №4. Структурування веб-сторінок за допомогою таблиць.
Частина 3

Вперед >>
<< Назад
13:51
Використання таблиць у HTML-документах
У найпростішій таблиці інформація розміщена у комірках, утворених у результаті поділу прямокутника на стовпці та рядки.
У більшості комірок зберігаються дані, деякі комірки, зазвичай розміщені у верхній або боковій частині таблиці, містять заголовки.
У HTML-документах таблицю заповнюють зліва направо, комірку за коміркою, починаючи з лівого верхнього кута і закінчуючи правим нижнім.
? Основи веб-дизайну

Вперед >>
<< Назад
13:51
Створення таблиці
Для створення таблиці використовують чотири елементи. Таблицю описують за допомогою тегів ...
; вона повинна мати один або кілька рядків ..., у кожному з яких може міститися заголовок <ТН>...
або дані ....
За умовчанням таблиця має невидимі межі комірок. Для того щоб зробити їх видимими, використовують атрибут BORDER, який має цілочислове значення, що визначає товщину рамки в пікселах, наприклад .
? Основи веб-дизайну
Слайд 5
Вперед >>
<< Назад
13:51
Створення таблиці
Таблиця може мати заголовок, який задається тегами
.
Тег
і закінчується тегом
Якщо рядок містить заголовки стовпців таблиці, то використовують теги <ТН> і
, якщо ж дані - то
.
Наприклад, <ТН>Понеділок або визначені атрибути ROWSPAN та COLSPAN.
2. Збережіть документ із розширенням .html.
? Основи веб-дизайну
Перейти на виконання вправи 2.3
Слайд 13
Вперед >>
<< Назад
13:51
Встановлення ширини таблиці та комірок
Ширина всіх комірок в одному стовпці однакова,
а в одному рядку може бути різною.
Ширину таблиці задають атрибутом WIDTH у тегу
та
може містити атрибут ALIGN з одним із значень top або bottom, які визначають розташування заголовка відповідно перед таблицею або після неї (за умовчанням встановлено значення top). Наприклад,
Розклад уроків
.
? Основи веб-дизайну
Слайд 6
Вперед >>
<< Назад
13:51
Кожний рядок таблиці починається з тегу
і
1. Алгебра
.
У таблиці слово «Понеділок» буде виділене браузером напівжирним шрифтом, а текст «1. Алгебра» відформатовано стандартним способом.
? Основи веб-дизайну
Створення таблиці
Понеділок
1. Алгебра
<ТН>Понеділок
1. Алгебра
Понеділок
1. Алгебра
Слайд 7
Вперед >>
<< Назад
13:51
Приклад 2.4. HTML-документ, що містить таблицю
Визначимо структуру табл. 2.2. Вона містить
назви п'яти робочих
днів тижня, на кожен з яких припадає 4-5 уроків.
? Основи веб-дизайну
Створення таблиці
Таблиця 2.2. Розклад уроків
Слайд 8
Вперед >>
13:51
? Основи веб-дизайну
Приклад 2.4.
<< Назад
Слайд 9
Вперед >>
13:51
? Основи веб-дизайну
<< Назад
Який вигляд матиме ця веб-сторінка у вікні браузера, показано
на рис.
Зверніть увагу на те, що за відсутності даних у комірці таблиці рамка навколо неї не відображається. Для того щоб рамку було видно, можна ввести спеціальний код (non-breaking space - нерозривний пробіл). Після цього порожня комірка буде взята в рамку.
Слайд 10
Вперед >>
<< Назад
13:51
Об'єднання комірок
Кілька комірок можуть бути об'єднані в одну як по горизонталі,
так і по вертикалі.
Об'єднання першого типу застосовують тоді, коли потрібно створити для кількох стовпців спільний заголовок. Коли вміст кількох комірок поспіль у стовпці однаковий, їх об'єднують по вертикалі.
Для об'єднання комірок використовують такі атрибути: COLSPAN (об'єднання по горизонталі, у рядку) і ROWSPAN (по вертикалі, у стовпці) тегу
.
Значеннями цих атрибутів є кількість об'єднуваних стовпців або рядків. Наприклад, COLSPAN=3 означає, що комірка розтягнута на 3 стовпці, a ROWSPAN=2 — що комірка займає 2 рядки.
? Основи веб-дизайну
Слайд 11
Вперед >>
<< Назад
13:51
Приклад 2.5.
Приклад 2.5. HTML-документ, який містить таблицю з об'єднаними комірками
Створимо HTML-документ,
що містить дві таблиці, в яких є об'єднані комірки .
Таблиця 2.3. Таблиця з комірками, об'єднаними по вертикалі Таблиця 2.4. Таблиця з комірками, об'єднаними по горизонталі
Код цього документа наведено нижче. Код цього документа наведено нижче.
На рисунку в центрі слайду показано вигляд цього HTML-документа у вікні браузера Ширина таблиць добирається автоматично. Їх заголовки таблиць відображено у двох рядках, оскільки вони не можуть виходити за межі таблиць.
? Основи веб-дизайну
Приклад COLSPAN
Kласи
11-A
11-B
11-B
Приклад ROWSPAN та COLSPAN
Приклад ROWSPAN
Kласи
10-A
10-B
Перейти на виконання прикладу 2.5.
Слайд 12
Вперед >>
<< Назад
13:51
Вправа 2.3.
Створимо веб-сторінку з таблицею, що має таку ж структуру, як
в таблиці, в якій одночасно об'єднано і стовпці, і рядки.
Таблиця 2.5. Таблиця, в якій об'єднано кілька рядків і кілька стовпців
1. Створіть HTML-документ, де у відповідних тегах
...
, а комірки — за допомогою того самого атрибута у тегу
або <ТН>.
Ширину таблиці можна визначати як у пікселах, так і у відсотках від ширини вікна, а комірки — у пікселах або у відсотках від ширини таблиці.
? Основи веб-дизайну
; цей самий атрибут у тегах та ; ,
Имя файла: Основи-мови-HTML.pptx
Количество просмотров: 149
Количество скачиваний: 0
Скачать
- Предыдущая
Жиындар. Жиымдар (массивтер)
Следующая -
Бағдарламалауға кіріспе
Похожие презентации
Верстка сайтов HTML5+CSS3
Тип данных Запись (Record)
Безопасный Интернет
Перевод целых чисел из десятичной системы счисления в любую другую систему счисления А10→Ах
Інформація про наукову діяльність за січень – грудень 2016 року кафедри документознавства та інформаційної діяльності
Прошлое и будущее нейросетей: история развития и перспективы
Презентация Личный сайт. Первые шаги...
Массивы, циклы в JavaScript
Носители информации
Глобальная компьютерная сеть Интернет
Установка и настройка PulledPork
Информационная безопасность
Регистрация
Школа подготовки технических администраторов. Домены, хостинги, сайты. (Занятие 11)
Я и интернет
Независимая оценка качества (техническая часть). Департамент культуры города Москвы
Электронная коммерция в Интернете
Коммуникационное оборудование сетей. Часть 1. Повторители. Концентраторы. Сетевая карта
ВКонтакте
Техника безопасности в кабинете информатики
Основы программирования на языке Паскаль
Структура, різновиди та етапи створення веб-сайтів
Основы верстки
Создание 3D моделей окружения в играх
Система контроля и управления доступом автотранспорта на базе ПО Hive
Базовая конфигурация. Устройство компьютера. (Тема 4.2)
История зарубежной журналистики. Журналистика США
Обзор алгоритмов и систем шифрования
Обратная связь
Email:
Нажмите что бы посмотреть
Слайд 14
Вперед >>
<< Назад
13:51
Встановлення ширини таблиці та комірок
Приклад 2.6. HTML-документ, в якому задана ширина
таблиці та деяких комірок
Розглянемо HTML-документ, в якому буде створено таблицю певної ширини, а також задано ширину деяких комірок.
Приклад встановлення ширини таблиці
Класи
10-A
10-B
Вся таблиця має ширину 500 пікселів. Ширина комірки з текстом Класи становить 50 % від ширини всієї таблиці, а комірки з текстом “10-А” - 250 пікселів. Комірка з текстом “10-Б” теж завширшки 250 пікселів (хоча для неї ширину не було задано), оскільки вона розташована в одному стовпці з попередньою.
? Основи веб-дизайну
Слайд 15
Вперед >>
<< Назад
13:51
Форматування тексту в таблиці
Форматування тексту та оформлення рамок таблиці
Текст всередині комірок
можна вирівнювати як по горизонталі, так і по вертикалі. Горизонтальне вирівнювання вмісту всього рядка задають за допомогою атрибута ALIGN у тегу
або <ТН> в окремих комірках виконує таку саму роль.
Атрибут ALIGN може набувати значень center, right, left або justify, які задають вирівнювання вмісту таблиці відповідно по центру, за правим чи лівим краєм або за шириною.
Приклади тегів
із використанням вирівнювання:
l. Алгебра
.
? Основи веб-дизайну
Слайд 16
Вперед >>
<< Назад
13:51
Приклади вирівнювання в комірках
? Основи веб-дизайну
Понеділок
1.
Алгебра
Слайд 17
Вперед >>
<< Назад
13:51
Форматування тексту в таблиці
Вертикальне вирівнювання задають у тегах
або
<ТН> за допомогою атрибута VALIGN, який може набувати значень top, bottom та middle, що визначають вирівнювання відповідно за верхнім та нижнім краєм і по центру.
Для оформлення зовнішньої рамки таблиці можна використовувати атрибут FRAME тегу .
Його значення визначають, що браузер відображатиме:
? Основи веб-дизайну
Слайд 18
Вперед >>
<< Назад
13:51
Приклади відображення розділювальних ліній
? Основи веб-дизайну
frame="above”
frame="below"
frame="box"
frame="hsides"
frame="rhs"
frame="lhs"
frame="vsides"
frame="void"
Слайд 19
Вперед >>
<< Назад
13:51
Відображення розділювальних ліній
Відображення розділювальних ліній між стовпцями та рядками таблиці визначають
за допомогою атрибута RULES тегу
.
Він може набувати таких значень:
? Основи веб-дизайну
Слайд 20
Вперед >>
<< Назад
13:51
Приклади відображення розділювальних ліній
? Основи веб-дизайну
rules=“all”
rules="cols"
rules="rows"
rules="none"
Слайд 21
Вперед >>
<< Назад
13:51
Вправа 2.4
Вправа 2.4
Настроїмо зовнішній вигляд таблиці.
1. Створіть HTML-документ, який містить таблицю
із такими настройками: товщина рамки таблиці дорівнює 15 пікселам, відображаються всі її чотири сторони і лише горизонтальні розділювальні лінії між рядками. Нехай ширина таблиці становить 300 пікселів.
2. Збережіть документ у файлі з розширенням .html.
? Основи веб-дизайну
Перейти на виконання вправи 2.4.
Слайд 22
Вперед >>
<< Назад
13:51
Колірне оформлення таблиці
Для оформлення комірок таблиць за допомогою кольорів застосовують атрибут
BGCOLOR.
Колір можна визначати, вказуючи його назву англійською мовою або символ # та шістнадцяткове число.
1). Якщо потрібно задати колір для всієї таблиці, то атрибут BGCOLOR задають у тегу
.
2). Для зміни кольору лише в одному рядку—в тегу
3). Настроювання кольору окремої комірки забезпечує наявність цього атрибута всередині тегу
? Основи веб-дизайну
Слайд 24
Вперед >>
<< Назад
13:51
Використання таблиць
Під час відображення веб-сторінок браузер розміщує елементи на екрані
один за одним у тому порядку, в якому вони записані у HTML-документі.
Для позиціювання елементів розроблено спеціальні засоби мови HTML, проте часто для цього використовують таблиці. На веб-сторінці створюють таблицю без рамок і у її комірки поміщають різні об'єкти.
Розмістимо назви класів по діагоналі так, як це показано в табл. 2.6, але самої таблиці на веб-сторінці відображати не будемо.
? Основи веб-дизайну
Таблиця 2.6. Таблиця, в якій інформація розміщується по діагоналі
Слайд 25
Вперед >>
<< Назад
13:51
Використання таблиць
Текст HTML-документа, в якому для позиціювання елементів використано дану
таблицю:
Приклад позиціювання
або
.
Колір рамки таблиці можна задати за допомогою таких атрибутів:
BORDERCOLOR — колір всієї рамки;
BORDERCOLORLIGHT — колір світлої частини рамки;
BORDERCOLORDARK — колір темної частини рамки.
Ці атрибути вставляють у тег . Щоб вони діяли, необхідна наявність ще й атрибута BORDER, який задає товщину рамки.
? Основи веб-дизайну
Слайд 23
Вперед >>
<< Назад
13:51
HTML-документ, який містить кольорову таблицю
Приклад 2.7. HTML-документ, який містить різнокольорову таблицю
Приклад</div></h3></h3><!----><!----><div class="slides-content">керування кольором
Kласи
11-A
11-Б
11-B
Якщо необхідно задати колір шрифту для тексту таблиці, то це можна зробити за допомогою тегу
всередині відповідних тегів
. Наприклад:
Teкст
Старші класи
10-A
10-B
11-A
11-B
11-B
? Основи веб-дизайну
Слайд 26
Вперед >>
<< Назад
13:51
Використання таблиць
? Основи веб-дизайну
На малюнку - відображення html-документа браузером.
Комірки таблиці
можна заповнювати не лише текстом, а й зображеннями, іншими таблицями та рухомими рядками. Текст або зображення всередині комірки може бути гіперпосиланням.
Наприклад:
11-Б
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:91825,name:k,category:G,count:H,jpg:"jpg\u002F91825",hits:I,download:b,h1:"Основи мови HTML презентация",meta:{h1:k,title:k,description:"Основи мови HTML презентация на тему, доклад, Информатика",keywords:"Основи мови HTML, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Основи мови HTML из раздела Информатика. Презентация на заданную тему содержит 27 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EВперед\u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EТеги таблиць, рядків, комірок, їхні атрибути. \u003Cbr\u003EРозмітка веб-сторінок за допомогою таблиць. \u003Cbr\u003EПрактична робота №4. Структурування веб-сторінок за допомогою таблиць.\u003Cbr\u003E\u003Cp\u003EЧастина ",file:"Основи-мови-HTML.pptx",texts:["\u003Cp\u003EСпецкурс “Основи веб-дизайну”\u003Cbr\u003E\u003Cp\u003EРозділ 2. Основи мови HTML\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EВперед\u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EРобота вчителя-методиста СЗОШ № 8 м. Хмельницького Кравчук Г.Т.\u003Cbr\u003E","\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EВперед\u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EТеги таблиць, рядків, комірок, їхні атрибути. \u003Cbr\u003EРозмітка веб-сторінок за допомогою таблиць. \u003Cbr\u003EПрактична робота №4. Структурування веб-сторінок за допомогою таблиць.\u003Cbr\u003E\u003Cp\u003EЧастина 3\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВикористання таблиць у HTML-документах\u003Cbr\u003E\u003Cp\u003EУ найпростішій таблиці інформація розміщена у комірках, утворених у результаті поділу прямокутника на стовпці та рядки. \u003Cbr\u003EУ більшості комірок зберігаються дані, деякі комірки, зазвичай розміщені у верхній або боковій частині таблиці, містять заголовки. \u003Cbr\u003EУ HTML-документах таблицю заповнюють зліва направо, комірку за коміркою, починаючи з лівого верхнього кута і закінчуючи правим нижнім.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EСтворення таблиці\u003Cbr\u003E\u003Cp\u003EДля створення таблиці використовують чотири елементи. Таблицю описують за допомогою тегів \u003CTABLE\u003E...\u003C\u002FTABLE\u003E; вона повинна мати один або кілька рядків \u003CTR\u003E...\u003C\u002FTR\u003E, у кожному з яких може міститися заголовок \u003CТН\u003E...\u003C\u002FТН\u003E або дані \u003CTD\u003E...\u003C\u002FTD\u003E.\u003Cbr\u003EЗа умовчанням таблиця має невидимі межі комірок. Для того щоб зробити їх видимими, використовують атрибут BORDER, який має цілочислове значення, що визначає товщину рамки в пікселах, наприклад \u003CTABLE BORDER=5\u003E.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003CTABLE border=\"1\"\u003E \u003Cbr\u003E\u003Cp\u003E\u003CTABLE border=“0\"\u003E \u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EСтворення таблиці\u003Cbr\u003E\u003Cp\u003EТаблиця може мати заголовок, який задається тегами \u003CCAPTION\u003E та \u003C\u002FCAPTION\u003E. Тег \u003CCAPTION\u003E може містити атрибут ALIGN з одним із значень top або bottom, які визначають розташування заголовка відповідно перед таблицею або після неї (за умовчанням встановлено значення top). Наприклад, \u003CCAPTION ALIGN=bottom\u003EРозклад уроків\u003C\u002FСАРТІON\u003E.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EКожний рядок таблиці починається з тегу \u003CTR\u003E і закінчується тегом \u003C\u002FTR\u003E Якщо рядок містить заголовки стовпців таблиці, то використовують теги \u003CТН\u003E і \u003C\u002FТН\u003E, якщо ж дані - то \u003CTD\u003E і \u003C\u002FTD\u003E. \u003Cbr\u003EНаприклад, \u003CТН\u003EПонеділок\u003C\u002FТН\u003E або \u003CTD\u003E1. Алгебра\u003C\u002FТD\u003E. \u003Cbr\u003EУ таблиці слово «Понеділок» буде виділене браузером напівжирним шрифтом, а текст «1. Алгебра» відформатовано стандартним способом.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EСтворення таблиці\u003Cbr\u003E\u003Cp\u003E\u003CTH\u003EПонеділок\u003C\u002FТН\u003E\u003CTH\u003E1. Алгебра\u003C\u002FТH\u003E\u003Cbr\u003E\u003Cp\u003E\u003CТН\u003EПонеділок\u003C\u002FТН\u003E\u003CTD\u003E1. Алгебра\u003C\u002FТD\u003E \u003Cbr\u003E\u003Cp\u003E\u003CTD\u003EПонеділок\u003C\u002FТD\u003E\u003CTD\u003E1. Алгебра\u003C\u002FТD\u003E\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EПриклад 2.4. HTML-документ, що містить таблицю\u003Cbr\u003EВизначимо структуру табл. 2.2. Вона містить назви п'яти робочих\u003Cbr\u003Eднів тижня, на кожен з яких припадає 4-5 уроків.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EСтворення таблиці\u003Cbr\u003E\u003Cp\u003EТаблиця 2.2. Розклад уроків\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EПриклад 2.4.\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003EЯкий вигляд матиме ця веб-сторінка у вікні браузера, показано на рис. \u003Cbr\u003EЗверніть увагу на те, що за відсутності даних у комірці таблиці рамка навколо неї не відображається. Для того щоб рамку було видно, можна ввести спеціальний код &nbsp; (non-breaking space - нерозривний пробіл). Після цього порожня комірка буде взята в рамку.\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EОб'єднання комірок\u003Cbr\u003E\u003Cp\u003EКілька комірок можуть бути об'єднані в одну як по горизонталі, так і по вертикалі. \u003Cbr\u003EОб'єднання першого типу застосовують тоді, коли потрібно створити для кількох стовпців спільний заголовок. Коли вміст кількох комірок поспіль у стовпці однаковий, їх об'єднують по вертикалі.\u003Cbr\u003EДля об'єднання комірок використовують такі атрибути: COLSPAN (об'єднання по горизонталі, у рядку) і ROWSPAN (по вертикалі, у стовпці) тегу \u003CTD\u003E. \u003Cbr\u003EЗначеннями цих атрибутів є кількість об'єднуваних стовпців або рядків. Наприклад, COLSPAN=3 означає, що комірка розтягнута на 3 стовпці, a ROWSPAN=2 — що комірка займає 2 рядки.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EПриклад 2.5.\u003Cbr\u003E\u003Cp\u003EПриклад 2.5. HTML-документ, який містить таблицю з об'єднаними комірками\u003Cbr\u003EСтворимо HTML-документ, що містить дві таблиці, в яких є об'єднані комірки .\u003Cbr\u003EТаблиця 2.3. Таблиця з комірками, об'єднаними по вертикалі Таблиця 2.4. Таблиця з комірками, об'єднаними по горизонталі\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EКод цього документа наведено нижче.\t\tКод цього документа наведено нижче.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EНа рисунку в центрі слайду показано вигляд цього HTML-документа у вікні браузера Ширина таблиць добирається автоматично. Їх заголовки таблиць відображено у двох рядках, оскільки вони не можуть виходити за межі таблиць.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003CTABLE BORDER=\"1\"\u003E \u003Cbr\u003E\u003CCAPTION\u003EПриклад COLSPAN\u003C\u002FCAPTION\u003E\u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTD COLSPAN=\"3\"\u003EKласи\u003C\u002FTD\u003E\u003Cbr\u003E\u003C\u002FTR\u003E \u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E 11-A \u003C\u002FTD\u003E \u003CTD\u003E 11-B \u003C\u002FTD\u003E \u003CTD\u003E 11-B \u003C\u002FTD\u003E \u003C\u002FTR\u003E \u003Cbr\u003E\u003C\u002FTABLE\u003E \u003Cbr\u003E\u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002FHTML\u003E \u003Cbr\u003E\u003Cp\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CTITLE\u003EПриклад ROWSPAN та COLSPAN\u003C\u002FTITLE\u003E\u003Cbr\u003E\u003CBODY\u003E\u003Cbr\u003E\u003CTABLE BORDER=\"1\"\u003E\u003Cbr\u003E\u003Ccaption\u003EПриклад ROWSPAN\u003C\u002Fcaption\u003E\u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTD ROWSPAN=\"2\"\u003E Kласи \u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD\u003E 10-A \u003C\u002FTD\u003E \u003C\u002FTR\u003E \u003CTR\u003E \u003CTD\u003E 10-B \u003C\u002FTD\u003E\u003Cbr\u003E\u003C\u002FTR\u003E \u003Cbr\u003E\u003C\u002FTABLE\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EПерейти на виконання прикладу 2.5.\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВправа 2.3.\u003Cbr\u003E\u003Cp\u003EСтворимо веб-сторінку з таблицею, що має таку ж структуру, як в таблиці, в якій одночасно об'єднано і стовпці, і рядки.\u003Cbr\u003EТаблиця 2.5. Таблиця, в якій об'єднано кілька рядків і кілька стовпців\u003Cbr\u003E\u003Cbr\u003E\t\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E1. Створіть HTML-документ, де у відповідних тегах \u003CTD\u003E...\u003C\u002FTD\u003E визначені атрибути ROWSPAN та COLSPAN.\u003Cbr\u003E2. Збережіть документ із розширенням .html. \u003Cbr\u003E \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EПерейти на виконання вправи 2.3\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВстановлення ширини таблиці та комірок\u003Cbr\u003E\u003Cp\u003EШирина всіх комірок в одному стовпці однакова, а в одному рядку може бути різною. \u003Cbr\u003EШирину таблиці задають атрибутом WIDTH у тегу \u003CTABLE\u003E, а комірки — за допомогою того самого атрибута у тегу \u003CTD\u003E або \u003CТН\u003E. \u003Cbr\u003EШирину таблиці можна визначати як у пікселах, так і у відсотках від ширини вікна, а комірки — у пікселах або у відсотках від ширини таблиці.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003CTABLE width=\"300\"\u003E \u003Cbr\u003E\u003Cp\u003E\u003CTD width=\"150\"\u003E\u003Cbr\u003E\u003Cp\u003E\u003CTН width=“75\"\u003E\u003Cbr\u003E\u003Cp\u003E\u003CTABLE width=100%\u003E \u003Cbr\u003E\u003Cp\u003E\u003CTD width=50%\u003E\u003Cbr\u003E\u003Cp\u003E\u003CTН width=25%\u003E\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВстановлення ширини таблиці та комірок\u003Cbr\u003E\u003Cp\u003EПриклад 2.6. HTML-документ, в якому задана ширина таблиці та деяких комірок\u003Cbr\u003EРозглянемо HTML-документ, в якому буде створено таблицю певної ширини, а також задано ширину деяких комірок.\u003Cbr\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CTITLE\u003EПриклад встановлення ширини таблиці\u003C\u002FTITLE\u003E \u003Cbr\u003E\u003CBODY\u003E\u003Cbr\u003E\u003CTABLE BORDER=\"1\" WIDTH=500\u003E \u003Cbr\u003E\u003CTR\u003E\u003CTD ROWSPAN=\"2\" WIDTH=50%\u003EКласи\u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD WIDTH=250\u003E10-A\u003C\u002FTD\u003E \u003C\u002FTR\u003E \u003Cbr\u003E\u003CTR\u003E\u003CTD\u003E10-B\u003C\u002FTD\u003E \u003C\u002FTR\u003E \u003Cbr\u003E\u003C\u002FTABLE\u003E \u003Cbr\u003E\u003C\u002FBODY\u003E \u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003EВся таблиця має ширину 500 пікселів. Ширина комірки з текстом Класи становить 50 % від ширини всієї таблиці, а комірки з текстом “10-А” - 250 пікселів. Комірка з текстом “10-Б” теж завширшки 250 пікселів (хоча для неї ширину не було задано), оскільки вона розташована в одному стовпці з попередньою.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EФорматування тексту в таблиці\u003Cbr\u003E\u003Cp\u003EФорматування тексту та оформлення рамок таблиці\u003Cbr\u003EТекст всередині комірок можна вирівнювати як по горизонталі, так і по вертикалі. Горизонтальне вирівнювання вмісту всього рядка задають за допомогою атрибута ALIGN у тегу \u003CTR\u003E; цей самий атрибут у тегах \u003CTD\u003E або \u003CТН\u003E в окремих комірках виконує таку саму роль. \u003Cbr\u003EАтрибут ALIGN може набувати значень center, right, left або justify, які задають вирівнювання вмісту таблиці відповідно по центру, за правим чи лівим краєм або за шириною. \u003Cbr\u003EПриклади тегів \u003CTR\u003E та \u003CTD\u003E із використанням вирівнювання: \u003Cbr\u003E\u003CTR ALIGN=right\u003E; \u003CTD ALIGN=center\u003El. Алгебра\u003C\u002FТБ\u003E.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EПриклади вирівнювання в комірках\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003CTD width=\"120\" align=\"right\" valign=\"middle\"\u003EПонеділок\u003C\u002FТD\u003E\u003CTD align=\"center\" valign=\"top\"\u003E1. Алгебра\u003C\u002FТD\u003E\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EФорматування тексту в таблиці\u003Cbr\u003E\u003Cp\u003EВертикальне вирівнювання задають у тегах \u003CTR\u003E, \u003CTD\u003E або \u003CТН\u003E за допомогою атрибута VALIGN, який може набувати значень top, bottom та middle, що визначають вирівнювання відповідно за верхнім та нижнім краєм і по центру.\u003Cbr\u003EДля оформлення зовнішньої рамки таблиці можна використовувати атрибут FRAME тегу \u003CTABLE\u003E. \u003Cbr\u003EЙого значення визначають, що браузер відображатиме:\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\r\n\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EПриклади відображення розділювальних ліній\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003CTABLE width=“200\" border=\"1\" bordercolor=\"#3333CC\" frame=\"box\"\u003E \u003Cbr\u003E\u003Cp\u003Eframe=\"above”\u003Cbr\u003E\u003Cp\u003Eframe=\"below\"\u003Cbr\u003E\u003Cp\u003Eframe=\"box\"\u003Cbr\u003E\u003Cp\u003Eframe=\"hsides\"\u003Cbr\u003E\u003Cp\u003Eframe=\"rhs\"\u003Cbr\u003E\u003Cp\u003Eframe=\"lhs\"\u003Cbr\u003E\u003Cp\u003Eframe=\"vsides\"\u003Cbr\u003E\u003Cp\u003Eframe=\"void\"\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВідображення розділювальних ліній\u003Cbr\u003E\u003Cp\u003EВідображення розділювальних ліній між стовпцями та рядками таблиці визначають за допомогою атрибута RULES тегу \u003CTABLE\u003E.\u003Cbr\u003EВін може набувати таких значень:\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EПриклади відображення розділювальних ліній\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003CTABLE width=\"200\" border=\"1\" bordercolor=\"#CC0000\" rules=\"all\"\u003E \u003Cbr\u003E\u003Cp\u003Erules=“all” \u003Cbr\u003E\u003Cp\u003Erules=\"cols\"\u003Cbr\u003E\u003Cp\u003Erules=\"rows\"\u003Cbr\u003E\u003Cp\u003Erules=\"none\"\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВправа 2.4\u003Cbr\u003E\u003Cp\u003EВправа 2.4\u003Cbr\u003EНастроїмо зовнішній вигляд таблиці.\u003Cbr\u003E1. Створіть HTML-документ, який містить таблицю із такими настройками: товщина рамки таблиці дорівнює 15 пікселам, відображаються всі її чотири сторони і лише горизонтальні розділювальні лінії між рядками. Нехай ширина таблиці становить 300 пікселів.\u003Cbr\u003E2. Збережіть документ у файлі з розширенням .html. \u003Cbr\u003E \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EПерейти на виконання вправи 2.4.\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EКолірне оформлення таблиці\u003Cbr\u003E\u003Cp\u003E Для оформлення комірок таблиць за допомогою кольорів застосовують атрибут BGCOLOR. \u003Cbr\u003EКолір можна визначати, вказуючи його назву англійською мовою або символ # та шістнадцяткове число. \u003Cbr\u003E1). Якщо потрібно задати колір для всієї таблиці, то атрибут BGCOLOR задають у тегу \u003CTABLE\u003E. \u003Cbr\u003E2). Для зміни кольору лише в одному рядку—в тегу \u003CTR\u003E\u003Cbr\u003E3). Настроювання кольору окремої комірки забезпечує наявність цього атрибута всередині тегу \u003CTD\u003E або \u003CTH\u003E.\u003Cbr\u003EКолір рамки таблиці можна задати за допомогою таких атрибутів:\u003Cbr\u003EBORDERCOLOR — колір всієї рамки;\u003Cbr\u003EBORDERCOLORLIGHT — колір світлої частини рамки;\u003Cbr\u003EBORDERCOLORDARK — колір темної частини рамки.\u003Cbr\u003EЦі атрибути вставляють у тег \u003CTABLE\u003E. Щоб вони діяли, необхідна наявність ще й атрибута BORDER, який задає товщину рамки. \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EHTML-документ, який містить кольорову таблицю\u003Cbr\u003E\u003Cp\u003EПриклад 2.7. HTML-документ, який містить різнокольорову таблицю\u003Cbr\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CTITLE\u003EПриклад керування кольором\u003C\u002FTITLE\u003E\u003Cbr\u003E\u003CBODY\u003E\u003Cbr\u003E\u003CTABLE BGCOLOR=\"#F0F0F0\" BORDER=10 BORDERCOLOR=\"#808080\" BORDERCOLORLIGHT=\"#99CCFF\" BORDERCOLORDARK=\"#9900FF\"\u003E \u003Cbr\u003E\u003CTR BGCOLOR=lightblue\u003E\u003Cbr\u003E\u003CTH COLSPAN=\"3\"\u003EKласи\u003C\u002FTH\u003E \u003Cbr\u003E\u003C\u002FTR\u003E \u003CTR\u003E\u003Cbr\u003E\u003CTD BGCOLOR=pink\u003E11-A\u003C\u002FTD\u003E \u003Cbr\u003E\u003CTD BGCOLOR=cyan\u003E11-Б\u003C\u002FTD\u003E \u003Cbr\u003E\u003CTD BGCOLOR=plum\u003E11-B\u003C\u002FTD\u003E \u003Cbr\u003E\u003C\u002FTR\u003E \u003Cbr\u003E\u003C\u002FTABLE\u003E \u003Cbr\u003E\u003C\u002FBODY\u003E \u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003EЯкщо необхідно задати колір шрифту для тексту таблиці, то це можна зробити за допомогою тегу \u003CFONT\u003E всередині відповідних тегів \u003CTD\u003E. Наприклад:\u003Cbr\u003E\u003CTD BGCOLOR=magenta\u003E\u003CFONT COLOR=pink\u003ETeкст\u003C\u002FFONT\u003E\u003C\u002FTD\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВикористання таблиць \u003Cbr\u003E\u003Cp\u003EПід час відображення веб-сторінок браузер розміщує елементи на екрані один за одним у тому порядку, в якому вони записані у HTML-документі. \u003Cbr\u003EДля позиціювання елементів розроблено спеціальні засоби мови HTML, проте часто для цього використовують таблиці. На веб-сторінці створюють таблицю без рамок і у її комірки поміщають різні об'єкти.\u003Cbr\u003EРозмістимо назви класів по діагоналі так, як це показано в табл. 2.6, але самої таблиці на веб-сторінці відображати не будемо.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EТаблиця 2.6. Таблиця, в якій інформація розміщується по діагоналі \u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВикористання таблиць \u003Cbr\u003E\u003Cp\u003EТекст HTML-документа, в якому для позиціювання елементів використано дану таблицю:\u003Cbr\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CTITLE\u003EПриклад позиціювання\u003C\u002FTITLE\u003E \u003Cbr\u003E\u003CBODY\u003E \u003Cbr\u003E\u003CTABLE\u003E \u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTH\u003EСтарші класи\u003C\u002FTH\u003E\u003Cbr\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003C\u002FTR\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E10-A\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003C\u002FTR\u003E \u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E10-B\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E \u003CTD\u003E\u003C\u002FTD\u003E\u003C\u002FTR\u003E \u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E11-A\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003C\u002FTR\u003E \u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E11-B\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003C\u002FTR\u003E \u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E\u003C\u002FTD\u003E\u003CTD\u003E11-B\u003C\u002FTD\u003E\u003C\u002FTR\u003E\u003Cbr\u003E\u003C\u002FTABLE\u003E \u003Cbr\u003E\u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:51\u003Cbr\u003E\u003Cp\u003EВикористання таблиць \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EНа малюнку - відображення html-документа браузером.\u003Cbr\u003EКомірки таблиці можна заповнювати не лише текстом, а й зображеннями, іншими таблицями та рухомими рядками. Текст або зображення всередині комірки може бути гіперпосиланням. \u003Cbr\u003EНаприклад: \u003CTD\u003E\u003CA HREF=“11b.html\"\u003E11-Б\u003C\u002FA\u003E\u003C\u002FTD\u003E\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E13:53\u003Cbr\u003E\u003Cp\u003EВправа 2.5\u003Cbr\u003E\u003Cp\u003E Вправа 2.5\u003Cbr\u003EРозробимо веб-сайт, на головній сторінці якого в кутах уявного трикутника будуть розміщені три гіперпосилання на сторінки про навчальні заклади. Кожне посилання пов'язане з файлом, в якому міститься інформація про навчальний заклад. \u003Cbr\u003E1. Визначте структуру головної сторінки сайту за допомогою таблиці\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EТаблиця 2.7. Структурна таблиця головної сторінки сайту \u003Cbr\u003E\u003Cp\u003EПерейти на виконання вправи 2.5\u003Cbr\u003E\u003Cp\u003EПерейти на виконання практичної роботи №4\u003Cbr\u003E"],href:"\u002Finformatika\u002Fosnovi-movi-html-1",href_category:"\u002Finformatika",date:1627263765,related:[{id:13636,name:"Верстка сайтов HTML5+CSS3",href:"\u002Finformatika\u002Fverstka-saytov-html5css3",jpg:"jpg\u002F13636"},{id:358505,name:"Тип данных Запись (Record)",href:"\u002Finformatika\u002Ftip-dannyh-zapis-record",jpg:"jpg\u002F358505"},{id:105520,name:"Безопасный Интернет",href:"\u002Finformatika\u002Fbezopasnyy-internet-8",jpg:"jpg\u002F105520"},{id:278481,name:"Перевод целых чисел из десятичной системы счисления в любую другую систему счисления А10→Ах",href:"\u002Finformatika\u002Fperevod-tselyh-chisel-iz-desyatichnoy-sistemy",jpg:"jpg\u002F278481"},{id:90346,name:"Інформація про наукову діяльність за січень – грудень 2016 року кафедри документознавства та інформаційної діяльності",href:"\u002Finformatika\u002Fnformatsya-pro-naukovu-dyalnst-za-schen",jpg:"jpg\u002F90346"},{id:604257,name:"Прошлое и будущее нейросетей: история развития и перспективы",href:"\u002Finformatika\u002Fproshloe-i-budushchee-neyrosetey-istoriya-razvitiya",jpg:"jpg\u002F604257"},{id:504282,name:"Презентация Личный сайт. Первые шаги...",href:"\u002Finformatika\u002Fprezentatsiya-lichnyy-sayt-pervye-shagi",jpg:"jpg\u002F504282"},{id:236563,name:"Массивы, циклы в JavaScript",href:"\u002Finformatika\u002Fmassivy-tsikly-v-javascript",jpg:"jpg\u002F236563"},{id:196338,name:"Носители информации",href:"\u002Finformatika\u002Fnositeli-informatsii-5",jpg:"jpg\u002F196338"},{id:527838,name:"Глобальная компьютерная сеть Интернет",href:"\u002Finformatika\u002Fglobalnaya-kompyuternaya-set-internet-13",jpg:"jpg\u002F527838"},{id:436764,name:"Установка и настройка PulledPork",href:"\u002Finformatika\u002Fustanovka-i-nastroyka-pulledpork",jpg:"jpg\u002F436764"},{id:289544,name:"Информационная безопасность",href:"\u002Finformatika\u002Finformatsionnaya-bezopasnost-22",jpg:"jpg\u002F289544"},{id:443258,name:"Регистрация",href:"\u002Finformatika\u002Fregistratsiya-2018",jpg:"jpg\u002F443258"},{id:427293,name:"Школа подготовки технических администраторов. Домены, хостинги, сайты. (Занятие 11)",href:"\u002Finformatika\u002Fshkola-podgotovki-tehnicheskih-administratorov-domeny-hostingi",jpg:"jpg\u002F427293"},{id:246723,name:"Я и интернет",href:"\u002Finformatika\u002Fya-i-internet",jpg:"jpg\u002F246723"},{id:273729,name:"Независимая оценка качества (техническая часть). Департамент культуры города Москвы",href:"\u002Finformatika\u002Fnezavisimaya-otsenka-kachestva-tehnicheskaya-chast-departament",jpg:"jpg\u002F273729"},{id:378814,name:"Электронная коммерция в Интернете",href:"\u002Finformatika\u002Felektronnaya-kommertsiya-v-internete-5",jpg:"jpg\u002F378814"},{id:93639,name:"Коммуникационное оборудование сетей. Часть 1. Повторители. Концентраторы. Сетевая карта",href:"\u002Finformatika\u002Fkommunikatsionnoe-oborudovanie-setey-chast-1-povtoriteli",jpg:"jpg\u002F93639"},{id:172646,name:"ВКонтакте",href:"\u002Finformatika\u002Fvkontakte-1",jpg:"jpg\u002F172646"},{id:97644,name:"Техника безопасности в кабинете информатики",href:"\u002Finformatika\u002Ftehnika-bezopasnosti-v-kabinete-informatiki-6",jpg:"jpg\u002F97644"},{id:334410,name:"Основы программирования на языке Паскаль",href:"\u002Finformatika\u002Fosnovy-programmirovaniya-na-yazyke-paskal-1",jpg:"jpg\u002F334410"},{id:424816,name:"Структура, різновиди та етапи створення веб-сайтів",href:"\u002Finformatika\u002Fstruktura-rznovidi-ta-etapi-stvorennya-veb",jpg:"jpg\u002F424816"},{id:288845,name:"Основы верстки",href:"\u002Finformatika\u002Fosnovy-verstki",jpg:"jpg\u002F288845"},{id:407388,name:"Создание 3D моделей окружения в играх",href:"\u002Finformatika\u002Fsozdanie-3d-modeley-okruzheniya-v-igrah",jpg:"jpg\u002F407388"},{id:281049,name:"Система контроля и управления доступом автотранспорта на базе ПО Hive",href:"\u002Finformatika\u002Fsistema-kontrolya-i-upravleniya-dostupom-avtotransporta",jpg:"jpg\u002F281049"},{id:225940,name:"Базовая конфигурация. Устройство компьютера. (Тема 4.2)",href:"\u002Finformatika\u002Fbazovaya-konfiguratsiya-ustroystvo-kompyutera-tema-42",jpg:"jpg\u002F225940"},{id:584400,name:"История зарубежной журналистики. Журналистика США",href:"\u002Finformatika\u002Fistoriya-zarubezhnoy-zhurnalistiki-zhurnalistika-ssha",jpg:"jpg\u002F584400"},{id:7386,name:"Обзор алгоритмов и систем шифрования",href:"\u002Finformatika\u002Fobzor-algoritmov-i-sistem-shifrovaniya",jpg:"jpg\u002F7386"}],navigation:{next:"\u002Finformatika\u002Fbadarlamalaua-krspe",next_name:"Бағдарламалауға кіріспе",prev:"\u002Finformatika\u002Fzhiyndar-zhiymdar-massivter",prev_name:"Жиындар. Жиымдар (массивтер)"}}},categories:{result:[{id:J,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:I,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:J,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:H,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:K,SITE_HOST:"mypreza.com",SITE_LANG:L,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:K,short_name:a,description:a,lang:L,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:S,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Основи мови HTML","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",27,149,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Вперед >>
<< Назад
13:51
Створення таблиці
Таблиця може мати заголовок, який задається тегами

Вперед >>
<< Назад
13:51
Встановлення ширини таблиці та комірок
Ширина всіх комірок в одному стовпці однакова, а в одному рядку може бути різною.
Ширину таблиці задають атрибутом WIDTH у тегу

Вперед >>
<< Назад
13:51
Кожний рядок таблиці починається з тегу

Вперед >>
<< Назад
13:51
Приклад 2.4. HTML-документ, що містить таблицю
Визначимо структуру табл. 2.2. Вона містить назви п'яти робочих
днів тижня, на кожен з яких припадає 4-5 уроків.
? Основи веб-дизайну
Створення таблиці
Таблиця 2.2. Розклад уроків

Вперед >>
13:51
? Основи веб-дизайну
Приклад 2.4.
<< Назад

Вперед >>
13:51
? Основи веб-дизайну
<< Назад
Який вигляд матиме ця веб-сторінка у вікні браузера, показано на рис.
Зверніть увагу на те, що за відсутності даних у комірці таблиці рамка навколо неї не відображається. Для того щоб рамку було видно, можна ввести спеціальний код (non-breaking space - нерозривний пробіл). Після цього порожня комірка буде взята в рамку.

Вперед >>
<< Назад
13:51
Об'єднання комірок
Кілька комірок можуть бути об'єднані в одну як по горизонталі, так і по вертикалі.
Об'єднання першого типу застосовують тоді, коли потрібно створити для кількох стовпців спільний заголовок. Коли вміст кількох комірок поспіль у стовпці однаковий, їх об'єднують по вертикалі.
Для об'єднання комірок використовують такі атрибути: COLSPAN (об'єднання по горизонталі, у рядку) і ROWSPAN (по вертикалі, у стовпці) тегу

Вперед >>
<< Назад
13:51
Приклад 2.5.
Приклад 2.5. HTML-документ, який містить таблицю з об'єднаними комірками
Створимо HTML-документ, що містить дві таблиці, в яких є об'єднані комірки .
Таблиця 2.3. Таблиця з комірками, об'єднаними по вертикалі Таблиця 2.4. Таблиця з комірками, об'єднаними по горизонталі
Код цього документа наведено нижче. Код цього документа наведено нижче.
На рисунку в центрі слайду показано вигляд цього HTML-документа у вікні браузера Ширина таблиць добирається автоматично. Їх заголовки таблиць відображено у двох рядках, оскільки вони не можуть виходити за межі таблиць.
? Основи веб-дизайну
Приклад COLSPAN
Kласи
11-A
11-B
11-B
Приклад ROWSPAN та COLSPAN
Приклад ROWSPAN
Kласи
10-A
10-B
Перейти на виконання прикладу 2.5.

Вперед >>
<< Назад
13:51
Вправа 2.3.
Створимо веб-сторінку з таблицею, що має таку ж структуру, як в таблиці, в якій одночасно об'єднано і стовпці, і рядки.
Таблиця 2.5. Таблиця, в якій об'єднано кілька рядків і кілька стовпців
1. Створіть HTML-документ, де у відповідних тегах

Вперед >>
<< Назад
13:51
Встановлення ширини таблиці та комірок
Приклад 2.6. HTML-документ, в якому задана ширина таблиці та деяких комірок
Розглянемо HTML-документ, в якому буде створено таблицю певної ширини, а також задано ширину деяких комірок.
Приклад встановлення ширини таблиці
Класи
10-A
10-B
Вся таблиця має ширину 500 пікселів. Ширина комірки з текстом Класи становить 50 % від ширини всієї таблиці, а комірки з текстом “10-А” - 250 пікселів. Комірка з текстом “10-Б” теж завширшки 250 пікселів (хоча для неї ширину не було задано), оскільки вона розташована в одному стовпці з попередньою.
? Основи веб-дизайну

Вперед >>
<< Назад
13:51
Форматування тексту в таблиці
Форматування тексту та оформлення рамок таблиці
Текст всередині комірок можна вирівнювати як по горизонталі, так і по вертикалі. Горизонтальне вирівнювання вмісту всього рядка задають за допомогою атрибута ALIGN у тегу

Вперед >>
<< Назад
13:51
Приклади вирівнювання в комірках
? Основи веб-дизайну

Вперед >>
<< Назад
13:51
Форматування тексту в таблиці
Вертикальне вирівнювання задають у тегах

Вперед >>
<< Назад
13:51
Приклади відображення розділювальних ліній
? Основи веб-дизайну

Вперед >>
<< Назад
13:51
Відображення розділювальних ліній
Відображення розділювальних ліній між стовпцями та рядками таблиці визначають за допомогою атрибута RULES тегу

Вперед >>
<< Назад
13:51
Приклади відображення розділювальних ліній
? Основи веб-дизайну

Вперед >>
<< Назад
13:51
Вправа 2.4
Вправа 2.4
Настроїмо зовнішній вигляд таблиці.
1. Створіть HTML-документ, який містить таблицю із такими настройками: товщина рамки таблиці дорівнює 15 пікселам, відображаються всі її чотири сторони і лише горизонтальні розділювальні лінії між рядками. Нехай ширина таблиці становить 300 пікселів.
2. Збережіть документ у файлі з розширенням .html.
? Основи веб-дизайну
Перейти на виконання вправи 2.4.

Вперед >>
<< Назад
13:51
Колірне оформлення таблиці
Для оформлення комірок таблиць за допомогою кольорів застосовують атрибут BGCOLOR.
Колір можна визначати, вказуючи його назву англійською мовою або символ # та шістнадцяткове число.
1). Якщо потрібно задати колір для всієї таблиці, то атрибут BGCOLOR задають у тегу

Вперед >>
<< Назад
13:51
Використання таблиць
Під час відображення веб-сторінок браузер розміщує елементи на екрані один за одним у тому порядку, в якому вони записані у HTML-документі.
Для позиціювання елементів розроблено спеціальні засоби мови HTML, проте часто для цього використовують таблиці. На веб-сторінці створюють таблицю без рамок і у її комірки поміщають різні об'єкти.
Розмістимо назви класів по діагоналі так, як це показано в табл. 2.6, але самої таблиці на веб-сторінці відображати не будемо.
? Основи веб-дизайну
Таблиця 2.6. Таблиця, в якій інформація розміщується по діагоналі

Вперед >>
<< Назад
13:51
Використання таблиць
Текст HTML-документа, в якому для позиціювання елементів використано дану таблицю:
Приклад позиціювання

Вперед >>
<< Назад
13:51
HTML-документ, який містить кольорову таблицю
Приклад 2.7. HTML-документ, який містить різнокольорову таблицю
Приклад</div></h3></h3><!----><!----><div class="slides-content">керування кольором

Вперед >>
<< Назад
13:51
Використання таблиць
? Основи веб-дизайну
На малюнку - відображення html-документа браузером.
Комірки таблиці можна заповнювати не лише текстом, а й зображеннями, іншими таблицями та рухомими рядками. Текст або зображення всередині комірки може бути гіперпосиланням.
Наприклад: