Списки і рамки в HTML

. Списки

Іноді під час створення веб-сторінок буває корисно якось впорядкувати подану ними інформацію. Традиційно при цьому застосовують списки. Як першого прикладу давайте розглянемо веб-сторінку гіпотетичної фірми «Лентяй». Припустимо, спочатку хочемо перерахувати послуги, та був вказати послідовність дій, необхідні їх замовлення.

Маркированные і нумеровані списки

Перерахування послуг гарний як маркованого списку. На його організації застосовується поміткою

(Unorerer List). Усі, що останнім та її що закриває тегом (

), вважається маркированным списком. Кожен елемент списку може бути у своїй вказано тегом

. Цей ярличок можна вживати без закриваючого (хоча можна з ним). Тобто, написати:

Вкручивание електричних лампочок

АБО

Вкручивание електричних лампочок

І те й інше вважатиметься елементом списку, і всі броузеры інтерпретують ці записи коректно. Кожен елемент маркованого списку буде за перегляді відзначати закрашенным гуртком.

Що ж до перерахування порядку дій для замовлення, його доцільно організувати як нумерованного списку. І тому служить ярлик

,(Orderer List) а елементи списку також позначаються тегом

. І нумеровані, і маркіровані списки переважно броузерів виділяються невеликим відступом.

Отже, погляньмо, як виглядатиме ця сторінка. (Елемент вирівнювання DIV – парний, SMALL – зменшує шрифт)

<НЕАD>

<ТIТLЕ>Фірма "ЛЕНТЯЙ"

Наша фірма надає такі послуги

Вкручивание електричних лампочок

Подметание статі

Винесення сміття із кооперативної квартири

Миття посуду

Дефрагментация жорстких дисків

Щоб скористатися нашими услугами,следует:

Зарегистрироваться (тут)

Заповнити форму замовлення (тут)

Отримавши лист із паролем, послати порожній відповідь

Заповнити форму-подтверждение замовлення

(<А HREF="form2.html">Тут)

Приготовить для оплати послуг

Див. файл:spiski1.html

. Як бачите, ми не вживали закриває ярличок . Броузер зазвичай однаково розуміє, де закінчується елемент списку, оскільки після будь-якого елемента стоїть або етикетка наступного елемента

, або поміткою завершення списку

чи .

Інше питання, що, якщо код написано некоректно: наприклад, вказані теги

без тега списку

чи

, чи списку є елементи без тега

?

Власне кажучи, такого допускати годі було, бо окремі «суворі» броузеры у разі ні відображати нічого. Більшість популярних броузерів, щоправда, спробують догодити навіть автору сторінки, написавшему такий код. Наприклад, Internet Explorer 5, якщо зустріне теги

без тега початку списку, інтерпретує їх як маркірований список, хоча й виділятиме його відступом, а чи не позначені тегом

елементи списку залишить без маркера. Проте, повторюю, це з низки он виходять випадки.

Завдяки з того що списки відбиваються з відступом, легко можна організовувати вкладені списків із допомогою тієї ж тегов. І тому треба просто розпочати новий список всередині вже розпочатого. Схема розташування тегов списку у своїй вийде приблизно стільки:

Зрозуміло, відступи тут є такі лише наочності — ніж переплутати, який закриває етикетка якого відкриваючому тегу належить.

Далі, при вкладанні кількох маркованих списків хочеться кожен із новачків позначити своїм типом маркера. Деякі броузеры і роблять за умовчанням. Наприклад, Internet Explorer елементи першого списку із серії вкладених позначає закрашенным гуртком, елементи вто рого — незакрашенным гуртком, а елементи всіх наступних — квадратиком. Проте, по-перше, діють в усіх броузеры, а по-друге, нам може захотітися зміни ладу маркерів. Для явного визначення типу маркера в теге

слід встановити атрибут TYPE=. В нього може бути три значення: "disc", "square" і "circle", що означає, відповідно, зафарбований гурток, квадратик і незакрашенный гурток.

У теге нумерованного списку

можна встановити атрибут TYPE= визначення типу нумерації. Не зазначено нічого, або встановлено значення TYPE=”1”, то нумерація відбувається звичайними цифрами. Якщо встановити TYPE="I" чи "і", вийде нумерація римськими цифрами (відповідно, з допомогою прописних чи малих літер літер).

І, нарешті, для буквених позначень елементів списку встановлюють атрибут TYPE="A" чи "а". З іншого боку, іноді може знадобитися розпочати нумерацію ні з одиниці, і з якогось іншого числа. На це є атрибут START=. Наприклад, запис

викликає нумерацію елементів списку, починаючи з числа 43. Далі підуть елементи з номерами 44, 45 тощо. буд.

Може виникнути природне запитання: бо як використовувати інші типи маркерів списків — різноманітні галочки, кольорові кухлі і інші, які так часто бачимо в WWW! Справді, така є, проте ми розглянемо його трохи пізніше, а поки наведемо приклад веб-сторіночки фірми «Лентяй» з допомогою вкладених списків:

Фірма «ЛЕНТЯЙ»

Haшa фірма надає такі послуги:

Побутові послуги

Вкручивание електричних лампочок

Послуги з наведенню чистоти

Подметание статі

Bынeceниe сміття з власної квартири

посуду

Приготування їжі

Koмпьютepныe послуги

Дeфpaгмeнтaция жорстких дисків

Перевстановлення Windows

А, щоб скористатися нашими послугами, слід:

Зарегистрироваться (

<А HREF="reg.html">Тут)

Заповнити форму замовлення (

<А HREF="forml.htm1"> Тут )

Підтвердити замовлення:

Отримавши лист із паролем підтвердження, послати порожній відповідь, натиснувши "Reply"

Заповнити форму-подтверждение замовлення

(<А HREF="form2.html">тут)

Приготовить для оплати послуг

(Див. Файл spiski2.html)

Графічні маркери

Отже, вище ми згадали можливість створення графічних маркерів списків. Вона настільки залучила творців веб-сторінок, що їх зручності було створено спеціальні кошти. Справді, одна річ, коли маркерами списку є стандартні кружечки чи квадратики, і зовсім інше — коли кожний сам має створити маркер! Маркером то, можливо що завгодно — від просто кольорових і трохи опуклих гуртків і квадратів до витончених мініатюрних художніх робіт. Проте зверніть увагу, що став самемініатюрних: маркери списків повинні за величиною якось відповідати висоті текстовій рядки, і турбота звідси лягає на його автора поки що не етапі створення зображення. Намагайтеся створювати подоб ные зображення відразу в «натуральний розмір». Якщо створювати сну чалу великі малюнки, а просто зменшувати їх, то, при зменшенні можуть стати невпізнанними! Вся річ у тому, що «не зна ет» , які деталі малюнка важливі до нашого сприйняття. Якщо за зменшенні зникнуть важливі деталі, результат буде жахливим. Якщо зникнуть другорядні деталі, якість сприйняття погіршиться, але загальне впе-; чатление залишиться.

Щоб проілюструвати можливість вставки до списку графічних маркерів, скористаємося однією з прикладів — веб-страницей фірми «Лентяй». Якщо пам'ятаєте, там ми створили два списку:

маркірований (список послуг) і нумерований (порядок оформлення замовлення). Тепер, скажімо, хочемо замінити гуртки в маркированном списку на червоні трикутники.

Спочатку треба створити такий трикутник у програмі, настановленим роботи з зображеннями. У прикладі ми теж створили такий трикутник, навіть який відкидає невелику тінь, і було названо цей файл marker1.jpg. Тепер пригадаємо, як ми ставили тип маркера списку:

Щоб піти далі, замінимо атрибут TYPE= на атрибут STYLE= (як, до речі, повинно бути робити відповідно до спецификациейHTML 4.0):

Tenepь, щоб замінити гурток на графічний маркер, замінимо властивість list-style-type на властивість list-style-image і визначимо місце розташування нашого файла-рисунка:

От і всі! Можна насолоджуватися списком з графічними маркерами. Зверніть увагу, що з вказуванні імені файла ми уклали їх у звичайні подвійні лапки, а одинарні. Це оскільки всі значение атрибута STYLE= укладено в подвійні лапки. Тому якщо б ми помилково написали

то лапки перед словом Images була сприйнята як яка закриває, тобто атрибута STYLE= було б присвоєно значення "list-style-image: url(", a усе, що слід для цього, став би ще однією, нерозпізнаним атрибутом тега

.

Рамки

Рамки (чи фрейми — Frame) — потужний механізм подання на Web-страницах. З допомогою рамок екран поділяється сталася на кілька областей, у кожному у тому числі відображається вміст окремої сторінки і навіть Web-узла.

Створення рамок

До сформування рамок (областей сторінки) иcпользуют прапор і парний йому прапор , а їх опису — прапори < FRAME >. Почати з простого прикладу.

Створіть в текстовому редакторі два маленьких Web-документа і збережіть їх як файли a.htm і b.htm. Ці сторінки різнитимуться лише назвами.

Файл a.htm:

<ТIТLЕ>Рамки. Страничка A

<ВОDY>сторінка А

Файл b.htm:

<ВОDY>сторінка У

Створіть базову сторінку, де відбиватимуться рамки, і збережіть baza.htm:

Відкрийте сторінку baza.htm у програмі перегляду, і... Ви побачите, що вона з двох областей:

Наведемо невеличкий коментар для використання прапора . У ньому вказується, що екран підрозділяється на дві колонки (параметр COLS), кожна з яких займає рівно половину екрана (COLS="50°/o, 50%").

Прапор< FRAME SET> є флаг-контейнер, тобто прапор, котрі можуть містити інші прапори. Прапор - контейнер закінчується парним йому прапором . Прапор перестав бути прапором - контейнером і вимагає парного закриваючого прапора.

Як розділити сторінку за більший число областей?

Створіть чотири HTML-файла: a.htm, b.htm, c.htm, d.htm. З іншого боку, зміните колір фону кожної сторінки, навіщо використовуйте атрибут BGCOLOR прапора BODY: сторінка А зазначте колір FFOOFF, сторінка У — OOFFOO, сторінка З — FFFFOO і сторінці D —FFFFFF.

Файл a.htm:

<Т1ТLЕ>Рамки. Страничка A

Фрейм А рожевого кольору

Файл b.htm:

<Т1ТLЕ>Рамки. Страничка B

Фрейм У зеленкуватого кольору •

Файл c.htm:

<Т1ТЬЕ>Рамки. Страничка C

фрейм З жовтого кольору

Файл d.htm:

<Т1ТЪЕ>Рамки. Страничка D

фрейм D білого кольору

|Базова сторінка demo.htm: (у разі – і є index.html)

<Т1ТLЕ>Демонстрация фреймов

FRAMESET COLS="25%, 25%, 25%, 25%">

Відкрийте файл demo.htm у програмі перегляду. На екрані комп'ютера Ви побачите, як виглядають створені Вами рамки

Чи можна зробити рамки різного розміру? Так вайте спробуємо!

Отредактируйте Ваш файл demo.htm і сохранитe його як demo2.htm:

•

<Т1ТLЕ>Демонстрація фреймів 2

*">

Зверніть увагу, що розмір четвертої ;cамой правої рамки зазначений не числовим значенням, символом «*». Це означає, що це рамка повинна займати все життя площа головною стра-ицы. ^; Перегляньте файл на екрані:

Розміри рамок можна ставити у відсотках, а й у пикселях. Наприклад, можна вказати, що кожна з чотирьох рамок має горизонтальний розмір в $60 пикселей:

<Т1ТLЕ>Демонстрация фреймов 3

< FRAME SRC="b.htm">

< FRAME SRC="d.htin">

Тут потрібно зробити важливе зауваження. Створені Вами сторінки будуть переглядати різні користувачі, які мають монітори мають разноe дозвіл. Використання абсолютних величин можуть призвести до небажаним ефектів — сторінка, яка чудово виглядає на дозволом 1024х768, цілком може виглядати інакше у вирішенні 800х600. Тому треба дотримуватися простого правила: ставити розмір одній з рамок символом «*».

В усіх життєвих розглянутих прикладах використовувалися рамки як колонок. Природно, що ми можемо використати і горизонтальні ряди. Зверніть увагу, коли створювався файл demo.htm, Ви використовували прапор . Змініть базовий файл з чотирма рамками зазначеним нижче чином, використовуючи прапор . Збережіть його як файл demo3.htm.

<Т1ТLЕ>Демонстрация фреймов 3

2.5%, 25%, 25%">

Що ще можна зробити з рамками?

Наприклад, можна поставити співвідношення з-поміж них.

Створіть файл demo4.htm:

<Т1ТLЕ>Демонстрация фреймов 4

*, 2*">

Відкрийте файл у програмі перегляду :

Розберемося, як заданий розмір трьох рамок у цьому прикладі:

Найбільш ліва рамка має горизонтальний розмір 100 пикселей, друга повинна займати все життя частина головною сторінки, а третя (сама права) — вдвічі більше другий.

Тепер розділіть третю рамку навпіл. Текст мовою HTML в Вашем файлі demo5.htm повинен бути так:

<Т1ТLЕ>Демонстрация фреймов 5

*, 2*">

50%">

На екрані комп'ютера Ви побачите, що рамка З розділена на частини

Рамки — сильніша і небезпечніша зручне засіб, але не зловживати ними. Не розташовуйте на понад трьох меж і намагайтеся не застосовувати їх не потрібні.

Повернімося приміром з цими двома рамками, кожна з яких займає рівно половину області головною сторінки (файл baza.htm):

<Т1ТLЕ>Демонстрация фреймов

<FRAME SRC="a.htm"><FRAME SRC="b.htm">

„Знайдіть якусь невелику картинку в форматі .gif чи .jpg. Змініть значення второгo прапора FRAME те щоб він вказував не так на сторінку, але в графічне зображення:

<Т1ТLЕ>Демонстрация фреймов 6

:="fly.gif">

Можете зробити сторінку більш елегантної, якщо зазначите, що розмір рамки, що містить графічне зображення, дорівнює розміру зображення, а друга рамка покриває решту головного вікна.

Отобразите це у файлі demo7.htm так:

<Т1ТLЕ>Демонстрация фреймов 7

-

Якщо ми поставимо розмір рамки-фрейма, що містить графічне зображення, меншим, ніж раз заходів зображення, то побачимо поява смуг прокручування (файл demo8.htm):

<Т1ТLЕ>ДемонстраЦия фреймов 8

FRAMESET COLS="*, 85%">

На екрані Ви побачите стрілочки, що з'явилися внизу лівої рамки

Ввівши атрибут SCROLLING в відповідний прапор < FRAME >, можна управляти появою на екрані смуг прокручування. Можливі значення атрибута SCROLLING

SCROLLING = YES — у рамки завжди будуть смуги прокручування, незалежно від цього, чи потрібні вони чи ні.

SCROLLING=NO—у рамки нічого очікувати смуг прокручування, незалежно від цього, чи потрібні вони чи ні.

SCROLLING = AUTO — у рамки будуть смуги прокручування лише тоді необхідності.

Проведемо проведений експеримент із смугами прокручування

Створимо файл demo9.htm

SCROLLING=NO> |

Зверніть увагу, що у екрані на лівої рамці, де розміщене графічне зображення, ис чезла смуга прокручування. Нині ми поспіль не можемо переглянути зображення повністю.

Погляньмо, як вирівняти графічне зображення по лівої кордоні рамки. Як очевидно з попереднього малюнка, графічне зображення багато зміщений праворуч кордону рамки. Вирівняти може бути з допомогою атрибутів MARGINWIDTH і MARGINHEIGHT. Ці атрибути управляють відступом зображення всередині рамки Створіть файл demolO.htm. і встановіть мінімальні значення кожного атрибута:

MARGINWIDTH=1 MARGINHEIGHT=1>

На екрані Ви побачите, що графічне зображення вирівнялося:

Зв'язок між рамками

Повернімося до часто використовуваному нами прикладу з цими двома рамками (baza.htm). Змініть вміст файла a.htm, додавши посилання інший файл (c.htm):

<Т1ТЬЕ>Демонстрация фреймов (ссылка)

A link to c.htm

Якщо ви завантажте базовий приклад із двома рамками і активізуєте заслання, одержите вміст сторінки З, відображене всередині рамки А.