Урок 7. Як ми жили без таблиць? – HTML конструювання

HTML конструювання [http://htmlbook.in.ua/] для тих хто створює сайти Меню Уроки HTML Практика HTML HTML Теги Символи Кольори Уроки JavaScript Статті Онлайн редактори HTML JavaScript Зв`язок Урок 7. Як ми жили без таблиць? У практичному HTML-програмуванні таблиці абсолютно незамінні для … створення лівих і правих полів сторінки, вирівнювання елементів на екрані, багатоколонної верстки, накладення картинок один на одного. І, нарешті, для відображення на екрані табличного матеріалу, але це – в останню чергу. В 90% випадках таблиці використовуються, як не парадоксально це звучить, не для відображення таблиць. Але про все по-порядку Що таке таблиця Зі школи добре відома таблиця множення. Таблиця являє собою прямокутник, розкреслений на клітини. Якщо на клітини дивитися по вертикалі, то вони утворюють стовпці, якщо по горизонталі – рядки. Кожен рядок і стовпець у таблиці може мати свій заголовок. Заголовки записуються в першому рядку і першому стовпці. Заголовками рядків і стовпців у таблиці множення служать цифри від одного до дев’яти. Користуватися таблицею дуже просто. Якщо потрібно дізнатися, наприклад, результат множення числа 6 на число 8, то потрібно прочитати відповідь в клітці на перетині стовбця з заголовком “6” і рядка з заголовком “8”. Або в клітці на перетині рядка з заголовком “6” і стовбця з заголовком “8”. Це все одно, тому що 6 · 8 = 8 · 6. В обох цих клітинах написано число 48. 1 2 3 4 5 6 7 8 9 1 1 2 3 4 5 6 7 8 9 2 2 4 6 8 10 12 14 16 18 3 3 6 9 12 15 18 21 24 27 4 4 8 12 16 20 24 28 32 36 5 5 10 15 20 25 30 35 40 45 6 6 12 18 24 30 36 42 48 54 7 7 14 21 28 35 42 49 56 63 8 8 16 24 32 40 48 56 64 72 9 9 18 27 36 45 54 63 72 81 У загальному випадку таблиці використовують для зберігання інформації з двома характерними ознаками. Значення однієї ознаки розписано в заголовках рядків, іншого – в заголовках стовпців. А в кожну клітину таблиці заносять значення, яка одночасно володіє ознакою рядка і стовпчика, на перетині яких вона розташована. Для таблиці множення ознаками служать значення співмножників. Перша ознака – це значення першого співмножника, другий – значення другого. Як задати таблицю Таблиця задається командою … . Усередині цих тегів задаються рядки командами … . Нарешті, всередині рядків задаються клітини (осередки, комірки) командами … . Таким чином, по рядках, описується вся структура таблиці. Розглянемо наступний приклад. Програма Таблиця на екрані

(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

(1,1) (1,2) (2,1) (2,2) (3,1) (3,2) Атрибути команди TABLE Атрибут Призначення align = (left, right) Вирівнювання по горизонталі width = (число або процент) Ширина таблиці cellpadding = (число) Відстань між вмістом комірки і рамкою cellspacing = (число) Відстань між комірками таблиці bgcolor = (колір) Колір фону таблиці background = (файл) Фонова картинка border = (число) Ширина ліній рамки bordercolor = (колір) Колір ліній рамки bordercolordark = (колір) Темний колір рамки (знизу і справа) bordercolorlight = (колір) Світлий колір рамки (зверху і зліва) У наведених нижче випробувачах наводиться більш докладний опис дій атрибутів, а головне, на стендах можна поклацати перемикачами, посмикати за “мотузочки” і відразу побачити, що з цього вийшло. Випробувач 1 (атрибути команди TABLE ) Атрибути команди TR HTML-таблиця складається з рядків, кожен з яких задається командою опис осередків табличній рядка Варіюючи атрибутами команди TR , можна встановити ті чи інші властивості одночасно для всіх осередків рядка. Атрибут Призначення align = (left, center, right) Вирівнювання по горизонталі valign= (top, center,bottom, baseline) Вирівнювання по вертикалі bgcolor = (колір) Колір фону bordercolor = (колір) Колір ліній рамки bordercolordark = (колір) Колір рамки (знизу і справа) bordercolorlight = (колір) Світлий колір рамки (зверху і зліва) Подивитися роботу атрибутів можна на наступних випробувачах: Випробувач 2 (атрибути команди TR ) Атрибути команди TD (TH) Кожний табличний рядок складається з комірок, які послідовно описуються командами TD (звичайна комірка) і (або) TH (комірка-заголовок): опис вмісту комірки опис вмісту комірки Вміст звичайної комірки за замовчуванням горизонтально вирівнюється по лівому краю, а комірки-заголовка – по центру. Крім того, текст в комірці-заголовку виділяється напівжирним шрифтом. Команди TD і TH мають наступні атрибути: Атрибут Призначення align = (left, center, right) Вирівнювання по горизонталі valign= (top, center, bottom, baseline) Вирівнювання по вертикалі width = (число або відсоток) Ширина комірки bgcolor = (колір) Колір фону background = (файл) Фонова картинка bordercolor = (колір) Колір ліній рамки bordercolordark = (колір) Колір рамки (знизу і справа) bordercolorlight = (колір) Світлий колір рамки (зверху і зліва) nowrap Вимкнення автоматичного розриву рядків colspan= (число) Ширина великий комірки (в стовбцях) rowspan= (число) Висота великої комірки (в рядках) Нижче наводяться посилання на випробувальні полігони. Випробувач 3 ( TR і TD: align, valign, width, bgcolor, background, bordercolor, bordercolordark, bordercolorlight ) Випробувач 4 ( TR і TD: nowrap ) Випробувач 5 ( TR і TD: colspan ) Випробувач 6 ( TR і TD: rowspan ) Випробувач 7 ( TR і TD: colspan+rowspan ) Багатоликі таблиці Як вже зазначалося, використання таблиць в практиці HTML-програмування дуже несподіване. Ймовірно, автори мови і не припускали, що таблиці використовуватимуться проектувальниками гіпертекстових сторінок як елемент дизайну. Сторінкові відступи У звичайних книгах текст не починається з самого краю – сторінкові поля виділяють інформаційні блоки і, отже, допомагають очам більш комфортно сприймати матеріал. В гіпертекстовому документі можна створити поля, якщо розміщувати інформацію всередині таблиці, що складається всього з однієї клітини з невидимими полями. При зміні значення атрибута cellpadding , змінюється ширина полів. Звичайне розміщення Розміщення в таблиці Малютку сына – баю-бай! – Прижми покрепче к сердцу И никогда не забывай Задать ребенку перцу! “ Алиса в стране Чудес “ Малютку сына – баю-бай! – Прижми покрепче к сердцу И никогда не забывай Задать ребенку перцу! “ Алиса в стране Чудес “ Наведений приклад повторюється нижче з включеною табличною рамкою. Ви можете явно побачити, як проходили б табличні лінії при значенні border =1. Розміщення в таблиці Тут border=1 Малютку сына – баю-бай! – Прижми покрепче к сердцу И никогда не забывай Задать ребенку перцу! “ Алиса в стране Чудес “ Малютку сына – баю-бай! – Прижми покрепче к сердцу И никогда не забывай Задать ребенку перцу! “ Алиса в стране Чудес “ Можна задати поля і за допомогою декількох порожніх стовпців: Розміщення в таблиці Тут border=1 Баюкай сына своего Хорошею дубиной – Увидишь, будет у него Характер голубиный! Л.Кэрролл “ Алиса в стране Чудес “ Баюкай сына своего Хорошею дубиной – Увидишь, будет у него Характер голубиный! Л.Кэрролл “ Алиса в стране Чудес “ Звичайною практикою є комбінування цих двох способів: Розміщення в таблиці Тут border=1 Уж я-то деточку свою Лелею словно розу! И я его – баю-баю, Как сидорову козу! Л.Кэрролл “ Алиса в стране Чудес “ Уж я-то деточку свою Лелею словно розу! И я его – баю-баю, Как сидорову козу! Л.Кэрролл “ Алиса в стране Чудес “ Один із прикладів табличних відступів показано в наступному прикладі. Крокодильчики мои Цветики речные! Что глядите на меня Прямо как родные? Это кем хрустите вы В день веселый мая, Средь нескушанной травы Головой качая? “Алиса в стране Чудес” Багатоколонна верстка Використовуючи таблиці, можна виводити на екран інформацію в декілька колонок: При свете дрянного керосинового фонаря Остап прочел из путеводителя: “На правом высоком берегу – город Васюки. Отсюда отправляются лесные материалы, смола, лыко, рогожи, а сюда привозятся предметы широкого потребления для края, отстоящего на 50 километров от железной дороги. В городе 8000 жителей, государственная картонная фабрика с 320 рабочими, маленький чугунолитейный, пивоваренный и кожевенный заводы. Из учебных заведений, кроме общеобразовательных, лесной техникум” . Розміщення інформації на екрані Таблиці, вкладені один в одного Використовуючи таблиці, можна вирівняти інформаційні блоки на екрані і розмістити їх відповідно до дизайн-проекту документа. Везде на стенах и на колоннах были несмываемые надписи примерно такого рода: Вода – источник жизни Вода – народное достояние Одним шайко-объемом можно напоить лошадь В.Войнович “ Москва 2042 “ Кто расточает воду, тот враг народа Нижче розташований той же приклад, але з включеними рамками. Зрозуміло, що таблиці – дивовижний інструмент, що дозволяє монтувати інформаційні блоки на екрані так, як це необхідно проектувальнику. Везде на стенах и на колоннах были несмываемые надписи примерно такого рода: Вода – источник жизни Вода – народное достояние Одним шайко-объемом можно напоить лошадь В.Войнович “ Москва 2042 “ Кто расточает воду, тот враг народа Накладення картинок Ще одна незвичайна практика використання таблиць: побудова колажів. Постановка задачі . Є дві картинки: і Як їх накласти один на одного? Як помістити тварину на екран телевізора? Загальна ідея : першу картинку зробити фоном для таблиці, а другу розмістити всередині. Побудуємо таблицю, що складається з однієї клітини. Вкажемо для цієї клітини ширину, рівну ширині малюнка, який будемо використовувати як фон: Да… Вийшло не дуже добре. Для завдання висоти комірки (і таблиці) творці HTML не придумали атрибута. Ми бачимо тільки верхній шматочок фонової картинки. Ідея : використовувати ще одну допоміжну картинку. По висоті вона повинна дорівнювати фонової, а по довжині повинна бути такою, щоб закривати частину телевізора. Тоді лось, розташований слідом за допоміжної картинкою потрапить в центр екрану. Намалювати допоміжну картинку дуже просто – це повинен бути одноколірний GIF, в якому його єдиний колір оголошений прозорим. Тоді користувач на екрані цю картинку і не побачить: Зауваження. Насправді малювати невидимий GIF можна будь-якої величини. Адже ми завжди можемо вказати його екранні розміри в команді IMG і наша допоміжна картинка буде стискатися або розтягуватися. Можна не побоюватися спотворень – адже цю картинку не можна побачити на екрані ні в яку лупу! Натисніть тут В каталозі PIC07 розташовані дві картинки: Img24.jpg Horse.gif Вставте анімовану картинку всередину рами. А тепер спробуйте втавіть всередину рами /wp-content/pic07/frame2.jpg дві картинки: /wp-content/pic07/cat7.gif і /wp-content/pic07/bird2.gif так, щоб кіт лежачий вгорі, жадібно поглядав на пташку, що пролітає під ним. Напишіть програму, яка виводить на екран документ: Напишіть програму, яка виводить на екран документ: Картинка з кулями знаходиться в /wp-content/pic07/balloon.jpg , а тексти у файлі /wp-content/pic07/balloon.txt (кодування Windows). Зміст Урок 6 Позначки JavaScript вирівнювання тексту графіка гіперпосилання запуск JavaScript кольори колір тексту колір фону метатеги основи html посилання початок практичні завдання розмір тексту таблиці текст уроки JavaScript файли фонове зображення форматування тексту Рекомендуємо Програмування C++ Формули з математики Уроки HTML Практика HTML HTML Уроки JavaScript Статті Онлайн редактори Зв`язок HTML конструювання © 2024 ➤