Ступенька 30-ая. |
Дневник |
Ступенька 30-ая.
В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга:
Вот такая она, в форме канавочки. У линии есть много разных параметров:
(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях) (3) <Hr size="6"> (толщина линии) (4) <Hr NoShade> (отмена объемности) (5) <Hr color="cc0000"> (цвет линии, только в IE) |
Метки: Учебник по Html для чайников. |
Ступенька 31-ая. |
Дневник |
Ступенька 31-ая.
Наверное, пройдясь по ступенькам, вы уже поняли, что некоторые тэги и некоторые атрибуты тэгов поддерживаются не всеми броузерами. Не будем искать причин почему (да, и откуда мне лично знать, что толкает производителей броузеров придумывать свои специфические тэги и атрибуты, о которых в спецификации (официальной документации по HTML) нет ни слова, а также мне неведомо, почему броузеры не поддерживают некоторые тэги и атрибуты, которые по идее должны поддерживать, т.к. в той же спецификации эти тэги и атрибуты упомянуты), лучше поговорим о некоторых специфических атрибутах для тега BODY, которые вам когда-нибудь, да пригодятся.
Многие, когда верстают сайт, сталкиваются со следующей проблемой: поля по краям документа, которые, они не знают, как убрать. Что я имею ввиду – посмотрите пример, и вы увидите те самые поля, которые так нам часто мешают жить: посмотрите пример.
К счастью, если нам нужно мы можем управлять ими: мы можем увеличить их, если они нам нужны, а если они нам не нужны, то мы можем убрать их. Рассмотрим вариант, когда нам нужно убрать поля документа:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0">
Topmargin - определяет ширину верхнего поля документа, leftmargin - определяет ширину левого поля документа. Чтобы убрать поля мы приравняли эти параметры к нулю. Можете посмотреть, что у нас получилось.
Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer.
Но не стоит расстраиваться, Нетскейп (Netscape Navigator) не окажется за бортом, т.к. для этого броузера есть свои аналогичные специфические атрибуты для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.
Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти атрибуты вместе для тэга BODY:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Таким образом, и в IE все будет хорошо, и NN будет не обижен, и многие другие броузеры тоже :).
Но не торопитесь перебежать на следующую ступеньку.
Topmargin и leftmargin в Интернет Иксплорер убирает только верхнее и левое поля документа. Чтобы убрать правое и нижнее надо ввести еще атрибуты rightmargin и bottommargin для тэга Body.
<Body text="#000000" bgcolor="ffffff" rightmargin="0" bottommargin="0" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Итак, мы узнали, как убирать поля в IE и NN. Но, что же с другими броузерами?
<style type="text/css"><!--
body{margin:0px;padding:0px;} --></style> |
Метки: Учебник по Html для чайников. |
Ступенька 32-ая. |
Дневник |
Ступенька 32-ая.
В предыдущей версии учебника тему списки я рассматривала практически в самом начале нашего обучения. В этой версии некоторые главы поменялись местами, и в итоге я решила, что логичнее и правильнее рассказать вам о списках, когда вы немного уже начнете понимать специфику HTML.
Итак, многие тэги не только отвечают за то, как будет выглядеть наша страница, они определяют структуру документа. Вспомним о заголовках, они не просто выделяют наш текст полужирным шрифтом, информация из заголовка может использоваться броузерами пользователей, например, для автоматического построения оглавления документа. Т.е. получается, что у заголовков более широкое назначение, чем просто визуально выделять фрагмент текста.
Тоже самое и со списками, они также определяют структуру документа. Визуально списки отображаются следующим образом:
Это называется неупорядоченный список. Кроме неупорядоченных списков существуют еще и упорядоченные списки:
Различные типы списков можно употреблять одновременно друг с другом. Неупорядоченные списки вводятся тэгом <ul>:
<ul>
... </ul> |
<ul>
<li>Текст один <li>Текст другой <li>Текст сякой <li>Текст эдакий </ul> |
<ul type="square">
<li>Текст один <li>Текст другой <li>Текст сякой <li>Текст эдакий </ul> |
Метки: учебник по Html для чайников |
Ступенька 33-ая. |
Дневник |
Ступенька 33-ая.
Упорядоченные списки вводятся тэгом <ol>:
<ol>
... </ol> |
<ol>
<li>Сначала сделаем это <li>Затем мы сделаем то <li>А также действие третье <li>И с ним нас четвертое ждет </ol> |
1
|
арабские цифры
|
1, 2, 3, ...
|
a
|
буквы нижнего регистра
|
a, b, c, ...
|
A
|
буквы верхнего регистра
|
A, B, C, ...
|
i
|
римские цифры в нижнем регистре
|
i, ii, iii, ...
|
I
|
римские цифры в верхнем регистре
|
I, II, III, ...
|
<ol type="I">
<li>Сначала сделаем это <li>Затем мы сделаем то <li>А также действие третье <li>И с ним нас четвертое ждет </ol> |
Метки: Учебник по Html для чайников |
Ступенька 34-ая. |
Дневник |
Ступенька 34-ая.
Эту главу мы с вами посвятим специфическом тэгу, речь пойдет о тэге Marquee - бегущей строке (текста).
Тэг Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. это болезнь массовая, то мне придется рассказать подробно о тэге Marquee (те, у кого броузер не IE, не будут в этой главе оставлены за бортом, для них я бросила спасательный круг в конце главы).
<marquee height="10" width="270" bgcolor="#99CCFF">
</marquee> |
<marquee height="10" width="270" loop="2">
</marquee> |
Метки: Учебник по Html для чайников. |
Ступенька 35-ая. |
Дневник |
Ступенька 35-ая.
Вот мы добрались и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам открыть в окне броузера - не один, а одновременно несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).
Это можно использовать по-разному: некоторые веб-мастера при помощи фреймов воплощают свои сумасшедшие задумки и повергают в восхищение публику, некоторые используют фреймы, потому что их сайту просто не возможно без фреймов обойтись, а некоторые используют фреймы, потому что им так удобнее - это все хорошо, главное, чтобы оно не смотрелось ужасно и некрасиво, и было удобно для вашего посетителя.
Вы могли слышать на форумах или где-то еще о том, что фреймы это плохо. Отсюда у вас вполне закономерно может возникнуть ко мне вопрос: "Фреймы это хорошо, или все же плохо?"
Споры относительно того, как относиться к фреймам, как мне кажется, никогда не прекратятся. Наверное, это связано с тем, что помимо достоинств, фреймы имеют также и серьезные недостатки, и поэтому имеет смысл изучить все аспекты применения фреймов, а уж затем принимать какую-либо позицию по отношению к ним.
Я не буду разглагольствовать о всех проблемах, связанных с фреймами, и их решением, я лишь традиционно напомню вам о правой колонке и ценных ссылках в ней, которые подробнее расскажут вам о плюсах и минусах фреймов.
Что же касается моей позиции - то я всегда считала, что фреймы - это хорошо, очень хорошо, если их использование оправдано, если они смотрятся красиво и эстетично, и использованы они с умом. С умом, это значит, что, когда мы вводим фреймы в наш документ, мы не ограничиваемся средствами HTML, мы также вводим скрипты для корректной работы фреймов. Но об этом все в правой колонке, наша же с вами задача научиться создавать фреймы при помощи стандартных средств, не более того.
Итак, для того, чтобы наш любимый броузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем, сколько документов откроется в одном несчастном окне броузера, сколько места будет занимать каждый, каким образом они будут располагаться относительно друг друга (не все так просто, как хотелось бы:).
Т.к. первый документ на сайте, который показывается посетителю это index.html (или вроде него), то мы его и будем мучить, пусть он будет фрейм-документом. Создадим документ index.html:
<html>
<head> <title>Хождение по фреймам</title> </head> </html> |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset></frameset> </html> |
Метки: Учебник по Html для чайников |
Ступенька 36-ая. |
Дневник |
Ступенька 36-ая.
Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе.
Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных:
При помощи фреймов мы делим броузер на несколько окон, заданного размера, в которых помещаем независимые друг от друга документы. Это нам позволит оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с нашим логотипом, а в третьем окне у нас будут при нажатии на ссылки в документе меню загружаться разные документы с текстом, картинками и прочим).
Т.к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Почему я особо оговариваю этот момент: некоторые неразумные читатели почему-то воображают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО!
Итак, сначала создадим такой вариант (предварительно не забудьте создать обычные *.html документы с логотипом, меню и основным содержанием):
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*,150"> <frame src="logo.html"> <frame src="content.html"> <frame src="menu.html"> </frameset> </html> (посмотреть) |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*,150"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> (посмотреть) |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset rows="100,150,*"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> (посмотреть) |
Метки: Учебник по Html для чайников. |
Ступенька 37-ая. |
Дневник |
Ступенька 37-ая.
Эту главу мы начнем с небольшого фокуса: замените атрибут rows, на cols:
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset cols="100,150,*"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> (посмотреть) |
Метки: Учебник по Html для чайников. |
Ступенька 38-ая. |
Дневник |
Ступенька 38-ая.
В этой главе мы разберемся, как расположить документы в окне следующим образом
или
В предыдущей главе я говорила, что не можем использовать атрибуты rows и cols одновременно применительно к одному тэгу <frameset>. Тогда как же расположить наши документы в окне так, как указано на рисунках? Просто, ввести в наш фрейм документ еще одного господина <frameset>, но обо всем по порядку.
Начнем с первого рисунка:
Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на два столбца, в которых будут располагаться документы menu.html и content.html.
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*"> <frame src="logo.html"> <???> </frameset> </html> |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*"> <frame src="logo.html"> <frameset cols="150,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </frameset> </html> (посмотреть) |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*"> <frameset rows="100,*"> <frame src="logo.html"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть) |
Метки: Учебник по Html для чайников. |
Ступенька 39-ая. |
Дневник |
Ступенька 39-ая.
Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть) |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no" noresize> <frame src="menu.html" noresize> </frameset> <frame src="content.html" noresize> </frameset> </html> (посмотреть) |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть) |
<html>
<head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть) |
Метки: Учебник по Html для чайников. |