Фреймове (frame, iframe) в HTML. Тагове Blockquote, fieldset, legend
В предните две теми разгледахме възможностите за аранжиране на съдържанието в една уеб страница посредством таблици и div блокове. Също така, споменахме, че съществува и трети вариант, наречен рамки (frames /фреймове/). Като цяло те се смятат за остарял похват и сравнително рядко можем да видим сайтове, които ги използват. Затова няма да се спираме подробно на тях, а само ще разгледаме 2 примера чисто информативно, тъй като е добре да имаме напредвид, че съществува и такава възможност в HTML.
Преди да пристъпим към примерите, нека изясним някои понятия:
Фреймове (frames)
С фреймове можем да покажем повече от 1 HTML документ в един същ прозорец на браузъра. Всеки един HTML е наричан фрейм (frame) и всеки фрейм е независим от останалите.
Неудобствата при използването на фреймове са:
- Уеб разработчиците трябва да следят изграждането на повече HTML документи
- Трудно е да се принтира цялата страница
- Не се индексират добре от търсачките
Frameset тагът
- Тагът <frameset> дефинира как да разделим прозореца на рамки /фреймове/
- Всеки фреймсет дефинира набор от редове или колони
- Стойността на rows/columns индицира големината на пространството от екрана, заето от всеки фрейм
Frame тагът
- Тагът <frame> дефинира какъв HTML документ да ‘пъхнем” във всеки един от фреймовете
В примерът по-долу имаме frameset с две колони.Първата колона заема 15% от широчината на прозореца на браузъра. Втората колона има зададени 75% от широчината на прозореца на браузъра. HTML документът „left_frame.htm” е поставен в първата колона, а HTML документът”right_frame.htm” се зарежда във втората колона:
Пример 1: Вертикално разделяне на страница на фреймове
<frameset cols=”15%,85%” border=”0”>
<frame name=”nav” src=”left_frame.html” frameborder=”0” marginwidth=”1”
marginheight=”1” scrolling=”auto” />
<frame name=”main” src=”right_frame.html” frameborder=”0” marginwidth=”1”
marginheight=”1” scrolling=”auto” />
Забележка: размерът на колоните може да бъде задаван и в пиксели (cols=”200,500”), а също така едната от колоните може да се направи да заема цялото оставащо място (cols=”15%,*”).
Ако погледнем пример 1 в браузърът ще видим:
Ако фреймът има видими размки, то тогава потребителят може да преоразмери фреймовете като хване с мишката видимата рамка и я дърпа настрани. За да предотвратим това, може да добави атрибутът noresize=”noresize” в <frame> тагът.
Важно: Не можете да използвате <body></body> таговете заедно с <frameset></frameset>! Използването на фреймове автоматично изключва употребата на body и обратното. Забележете, че doc type-ът на HTML документа също се променя, когато използваме фреймове
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Frameset//EN”
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Пример 2: Хоризонтално разделяне на страница на фреймове
<frameset rows=”15%,85%” border=”0”>
<frame name=”nav” src=”top_frame.html” frameborder=”0” marginwidth=”1”
marginheight=”1” scrolling=”auto” />
<frame name=”main” src=”bottom_frame.html” frameborder=”0” marginwidth=”1”
marginheight=”1” scrolling=”auto” />
</frameset>
Съответно това, което ще видим в браузърът ще изглежда така:
Inline Frame
Това са особен вид фреймове, които могат да бъдат вмъкнати в body частта на стандартен HTML документ. Те НЕ разделят прозореца на браузъра на редове или колони!!! Когато използваме Inline frame можем да вмъкнем съдържанието на друг документ (HTML страница, снимка, друг сайт), показвайки го в нещо като прозорче. За да онагледим примерът, нека в съществуваща HTML страница, по която сме работили, да поставим следният таг:
<iframe src=”http://abv.bg”></iframe>
ВАЖНО: Съвременните уеб стандарти са довели до все по-рядко използване на frame и iframe, поради ред причини, някои от които споменахме по-горе. Друг фактор, възприпятсващ ни от употребата на iframe елементът е, че той не се поддържа в стриктната версия на XHTML (XHTML 1.0 Strict DTD) и следва да не се използва в нея. Ако все пак решим да използвам фреймове, трябва да посочим, че документът ни използва Transitional (преходната) версията на XHTML.
Ето и атрибутите, използвани за тагът <iframe>:
| Атрибут | Възможни стойности | Описание |
| align | left right top middle bottom |
Остарял метод за позициониране на фрейма спрямо обграждащите елементи. Използвайте CSS вмето атрибута, за да бъде кодът валиден xHTML 1.0 |
| frameborder | 1 0 |
Определя дали да се показва рамка около фрейма. Нейната дебелина и форма може да се зададе от CSS, този атрибут определя само наличието или отсъствието й. |
| Height | pixels % |
Определя височината на фрейма |
| longdesc | URL | Посочва пътят до страница, даваща подробно описание на съдържанието във фрейма. Рядко използван и неподдържан от всички браузъри атрибут. Следва да се избягва употребата му. |
| Marginheight | pixels | Определя външният отстъп спрямо обграждащите елементи отгоре и отдолу. Следвайки стандартите, тези отстъпи следва да зададем в CSS |
| marginwidth | pixels | Определя външният отстъп спрямо обграждащите елементи вляво и вдясно. Следвайки стандартите, тези отстъпи следва да зададем в CSS |
| name | name | Дава име на фрейма |
| scrolling | yes no auto |
Определя да се показват или не скролбарове на фрейма |
| src | URL | Определя URL адресът на документа, който следва да се зареди във фрейма |
| Width | pixels % |
Определя широчината на фрейма |
Blockquote таг
Този таг отделя даден параграф, поставяйки отстъп вляво, определяйки го като цитат. С атрибутът cite можем да посочим източника на цитатът. Този таг има повече отношение към оптимизацията на съдържанието за търсачки, отколкото визуалното отграничаване на цитати.
Пример:
<blockquote cite=”Vladimir Ivanov”>
<p>
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</p>
</blockquote>
Fieldset и Legend тагове
Fieldset групира елементи и по-точно замислен е да групира елементите във уеб формулярите, но може да се използва и в друг контекст.
С legend тагът се определя заглавието на обградената група елементи.
Ето и нагледен пример:
<fieldset>
<legend>Визитка</legend>
Име: Владимир Иванов<br />
Град: Стара Загора<br />
Email: ivanov.bg@gmail.com
</fieldset>
CSS атрибути
| Атрибут | Описание | Приемани стойности |
| clear | Определя от коя страна на елемента не са позволени плаващи елементи. | none left right both inherit |
| cursor | Променя видът на курсора на мишката | URL auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait inherit |
| display | Определя типът на показване на елемента – като блок, като инлайн елемент или изобщо да не се показва | block inline none |
| float | Определя „плаването” на блокове елементи. За да използваме този атрибут, задължително трябва да посочим широчина на блока! | left right none |
| overflow | Определя какво да се случи, ако съдържанието надхвърля размерите на елемента | auto hidden scroll visible |
| visibility | Определя да бъде ли видим елемента или не | visible hidden |
