Что такое CSS?

CSS – это язык стилей, отвечающий за отображение элементов, причем не только в html-документе (например, CSS используется при определении свойств элементов в Qt). Помните лекции “HTML с нуля”? Так вот, если Вы выучите CSS на должном уровне, у Вас полностью пропадет надобность в использовании дополнительных атрибутов для элементов. Кстати, раз уж Вы решили учить CSS, неплохо бы знать, что это аббревиатура, и расшифровывается она как Cascading Style Sheets. CSS является неотъемлемой частью блочной верстки, о которой я упоминал в последней лекции HTML с нуля.

Для чего служит CSS?

Служит CSS для придания индивидуальности странице, ну, или если говорить глобально, то сайту. CSS помогает оптимизировать структуру сайта, уменьшить вес страниц, а также облегчит изменение внешнего вида сайта (все доводы и факты этого приведу в следующей лекции).

Как использовать CSS?

В топе странные запросы: “Как установить CSS?”, “Как создать CSS?”, расслабьтесь, CSS создали и без нас, а устанавливать ничего не придется Все проще чем может показаться. Берем простую HTML страницу:

Все проще, чем могло показаться, правда? А все потому, что CSS интегрирован во все современные браузеры.  CSS очень простой и наглядный, что позволяет быстро привыкнуть к нему и влюбиться

Я думаю это неплохое легкое начало, которое не в коем случае не отпугнет Вас от изучения CSS. На этом все, подписываемся на RSS ленту, чтобы не пропустить следующую лекцию, надоедаем в комментариях, чтобы ускорить процесс

Сообщение CSS с нуля. Лекция 1 появились сначала на Блог Stafox'a.

Списки

Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> – его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, – типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибута type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul>.
Рассмотрим код простого маркированного списка:

Который выглядит следующим образом:

• Первый элемент списка
• Второй элемент списка

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol>. У данного тега есть три собственных атрибута:

• type – Устанавливает вид маркера списка.
• reversed – Нумерация в списке становится в обратном порядке (3,2,1).
• start – Число, с которого будет начинаться нумерованный список.

Атрибут type для тега <ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами <li> и </li>, как и в случае с маркированным списком.
Код простого нумерованного списка:

1. Первый
2. Второй
3. Третий

На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись. Список может быть как с маркером, так и без. Для этого на помощь приходит CSS (Cascading Style Sheets — каскадные таблицы стилей). Поэтому, дорогие читатели, пришло время, когда мы с Вами должны окунуться в изучение спецификаций CSS.
Ну что же, поздравляю! Теперь Вы знаете, что такое списки и как их применять на деле.

А теперь я постараюсь убедить Вас, в том, что CSS крайне необходим. Для этого нужно познакомится с неприметным на первый взгляд тегом <div>, который является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Во второй лекции, я говорил Вам про то, что можно верстать сайт таблицами, так вот, можно, но не нужно! Дело в том, что среди верстальщиков показателем мастерства является блочная вёрстка. Вы можете встретить высказывания “да таблицами я хоть черта сверстаю”, да, это так. Но это говорят в основном те, кто не смог освоить CSS, т.к. вид блока <div> управляется при помощи стилей. Но Вы ведь не такие, Вы лучше, и я это знаю!

“А как же таблицы?” – спросите Вы. Таблицы таблицами, они по прежнему имееют место в вёрстке, ведь согласитесь, использовать блоки для вывода таблицы успеваемости студентов, нелогично. Используя CSS и блочную вёрстку, Вы уменьшите вес страницы сайта, тем самым увеличив скорость загрузки Вашего сайта.
И так если Вы ещё не решились изучать CSS – вот мой последний аргумент: предположим, что сайт – это квартира, HTML – это стены, благодаря которым у Вас получаются комнаты, а CSS – это двери, обои, краска, картины, мебель, ковры – т.е. то, что придаёт Вашей квартире уникальности! Хотите чтобы Ваш сайт запомнился Вашим пользователям – сделайте его уникальным, и в этом Вам поможет CSS.

Подпишитесь на RSS ленту блога, чтобы не пропустить новый набор лекций CSS с нуля. Если у Вас есть какие-то вопросы, задавайте их в комментариях, с удовольствием отвечу, а ответы на вопросы о CSS включу в первую лекцию CSS с нуля.

Вы только начинали работать на компьютере? Возникает много вопросов? Тогда советую посетить блог Pk-prosto.ru, который поможет ускорить Ваше обучение компьютеру. Вы быстро научитесь работать с WebMoney, самостоятельно создавать загрузочный диск и многое другое.

Сообщение HTML с нуля. Лекция 4 появились сначала на Блог Stafox'a.

Если Вы знаете, что такое “партнерская ссылка”, Вы наверняка задумывались о том, как её скрыть. Если же я ошибся, тогда я расскажу Вам для чего нужно прятать партнерские (реферальные) ссылки.
Главная причина по которой Вы должны прятать партнерскую ссылку – это человеческая жадность.
Кто-то, допустим Вася Пупкин, уже второй день ищет биржу, которая поможет ему заработать на своём сайте, тут он видит на моём блоге ссылку на эту самую заветную биржу http://getgoodlinks.ru/?inv=za62e7. И если Вася Пупкин не новичок-дурачок, то он сразу понимает, что эта ссылка партнерская, и перейдя по ней, кто-то, т.е. я, получит денежку. Тут у Васи проявляется человеческая жадность во всей красе. И он скопировав лишь только адрес сайта, получит желаемое, а я останусь без вознаграждения. Получается несправедливо, ведь Вася получил что хотел, а я – нет.
Поэтому нужно скрывать партнерскую ссылку. Я предложу Вам на выбор четыре способа.
Первый способ заключается в использовании PHP, с помощью которого осуществляется редирект. Т.е. мы ссылаемся, например, на страницу http://stafox.ru/re.php, которая уже в свою очередь перенаправит юзера на указанную страницу. Минус лишь в том, что если Ваш хостинг не поддерживает PHP, Вам явно понадобится другой способ.
Я предлагаю оформить ссылку следующим образом:

А сам файл partner.php будет содержать следующий код:

Это позволит Вам в одном файле устроить редирект сразу на несколько партнерских ссылок.
Второй способ – это тоже редирект, только средствами HTML. Ссылка будет выглядеть вот так:

А вот содержимое файла partner.html:

Третий способ – это использование событий JavaScript. Ссылка оформляется следующим образом:
[html]<a href="http://stafox.ru/partnerlink1" onmouseover="this.href=’http://stafox.ru’" onmousedown="this.href=’http://stafox.ru/partnerlink1’" onclick="this.href=’http://stafox.ru/partnerlink1’" target="_blank">Хостинг PHP+MySQL за $1</a>[/html]

Чем хорош реализованный мною третий вариант, так это тем, что есть возможность открыть ссылку в фоновой вкладке (нажатие на колёсико мыши). Ну и при отключенном JavaScript переход по ссылке будет осуществляться.

Также у меня созрел ещё один способ – четвёртый. Суть его заключается в том, что сокрытие партнёрской ссылки, мы будет осуществлять с помощью сервиса коротких ссылок, например, bitly.com. В итоге наша ссылка будет иметь следующий вид: http://bit.ly/zgS8uk.
Минус последних двух способов в том, что ссылка является внешней. Хотя rel=«nofollow» и <noindex> ещё никто не отменял
Прибегнув к такому способу, и имея несколько партнерских программ, можно уже через год перебираться в кабинет руководителя.

Сообщение Как скрывать партнерские ссылки появились сначала на Блог Stafox'a.

Что такое формы?

Вы наверняка не раз встречали на сайтах поле поиска, так вот поиск – это форма, у которой один элемент. Формой называется то, что находится между тегом <form> и </form>. Форма служит для обмена информацией между пользователем и сервером. У тега <form> есть свои атрибуты:

• accept-charset – Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
• action – Адрес программы или документа, который обрабатывает данные формы.
• autocomplete – Включает автозаполнение полей формы.
• enctype – Способ кодирования данных формы.
• method – Метод протокола HTTP.
• name – Имя формы.
• novalidate – Отменяет встроенную проверку данных формы на корректность ввода.
• target – Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Но форма не будет формой, если у неё нет хотя бы одного поля и кнопки, посредством которой  введённые  данные будут отправлены на сервер. Когда мы говорим “отправлены на сервер” – подразумевается страница-обработчик, на которой выполняются раздличные действия над полученной информацией. Для того, чтобы указать, какая страница будет обрабатывать данные нашей формы, используется атрибут action.
Следующий атрибут, который мы должны указать – это method. Он отвечает за то, в каком виде будут предоставленны данные странице-обработчику. Может принимать два значения GET и POST. Я обычно использую метод POST. Но подробнее об этом мы поговорим, когда начнём учить PHP с нуля.

Что внутри формы?

Сейчас давайте разберёмся с содержимым, которое расположено между внутри формы. Помимо обычных html-тегов (br, label, table, p, span, a, div) можно встретить следующие теги: <input>, <textarea>, и <select>. Давайте поговорим о них подробнее. Начнём с <textarea>.

Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. У <textarea> 13 атрибутов:

• accesskey – Переход к полю с помощью сочетания клавиш.
• autofocus – Автоматическое получение фокуса.
• cols – Ширина поля в символах.
• disabled – Блокирует доступ и изменение элемента.
• form – Связывает текстовое поле с формой по её идентификатору.
• maxlength – Максимальное число введенных символов.
• name – Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
• placeholder – Указывает замещающийся текст.
• readonly – Устанавливает, что поле не может изменяться пользователем.
• required – Обязательное для заполнения поле.
• rows – Высота поля в строках текста.
• tabindex – Порядок перехода между элементами при нажатии на клавишу Tab.
• wrap – Параметры переноса строк.

Теперь поговорим о теге <input>. Он имеет много атрибутов, но мы начнём с самого главного – с атрибута type, который имеет следующие значения.

Тип	Описание	Вид
button	Кнопка.
checkbox	Флажки. Позволяют выбрать более одного варианта из предложенных.	Пиво Чай Кофе
file	Поле для ввода имени файла, который пересылается на сервер.
hidden	Скрытое поле. Оно никак не отображается на веб-странице.
image	Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password	Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio	Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.	Пиво Чай Кофе
reset	Кнопка для возвращения данных формы в первоначальное значение.
submit	Кнопка для отправки данных формы на сервер.
text	Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

Вот список остальных атрибутов:

• accept – Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
• accesskey – Переход к элементу с помощью комбинации клавиш.
• align –  Определяет выравнивание изображения.
• alt – Альтернативный текст для кнопки с изображением.
• autocomplete – Включает или отключает автозаполнение.
• border – Толщина рамки вокруг изображения.
• checked – Предварительно активированный переключатель или флажок.
• disabled – Блокирует доступ и изменение элемента.
• form – Связывает поле с формой по её идентификатору.
• formaction – Определяет адрес обработчика формы.
• formenctype – Устанавливает способ кодирования данных формы при их отправке на сервер.
• formmethod – Сообщает браузеру каким методом следует передавать данные формы на сервер.
• formnovalidate – Отменяет встроенную проверку данных на корректность.
• formtarget – Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
• list – Указывает на список вариантов, которые можно выбирать при вводе текста.
• max – Верхнее значение для ввода числа или даты.
• maxlength – Максимальное количество символов разрешенных в тексте.
• min – Нижнее значение для ввода числа или даты.
• multiple – Позволяет загрузить несколько файлов одновременно.
• name – Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
• pattern – Устанавливает шаблон ввода.
• placeholder – Выводит подсказывающий текст.
• readonly – Устанавливает, что поле не может изменяться пользователем.
• required – Обязательное для заполнения поле.
• size – Ширина текстового поля.
• src – Адрес графического файла для поля с изображением.
• step – Шаг приращения для числовых полей.
• tabindex – Определяет порядок перехода между элементами с помощью клавиши Tab.
• type – Сообщает браузеру, к какому типу относится элемент формы.
• value – Значение элемента.

Ещё один тег, который можно встретить в форме – <select>. Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>.

У тега <select> есть свои атрибуты:

• accesskey – Позволяет перейти к списку с помощью некоторого сочетания клавиш.
• autofocus – Устанавливает, что список получает фокус после загрузки страницы.
• disabled – Блокирует доступ и изменение элемента.
• form – Связывает список с формой.
• multiple – Позволяет одновременно выбирать сразу несколько элементов списка.
• name – Имя элемента для отправки на сервер или обращения через скрипты.
• required – Список обязателен для выбора перед отправкой формы.
• size – Количество отображаемых строк списка.
• tabindex – Определяет последовательность перехода между элементами при нажатии на клавишу Tab

В свою очередь тег <option> тоже имеет свои атрибуты:

• disabled – Заблокировать для доступа элемент списка.
• label – Указание метки пункта списка.
• selected – Заранее устанавливает определенный пункт списка выделенным.
• value – Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Например, можно сделать выпадающий список, в котором будут отображаться имена девочек.

Что бы всё стало предельно ясно, вот код, в котором описана большая форма:

Визуальный пример по этой ссылке

При написании статьи некоторое описание тегов было взято с htmlbook.ru

Сообщение HTML с нуля. Лекция 3 появились сначала на Блог Stafox'a.

PHP Style Switcher

PHP Style Switcher – это замечательный PHP-скрипт для быстрой смены стилей. Вам никогда не приходил в голову вопрос “Как изменить стиль страницы при нажатии на ссылку?”, если приходил, то вот оно, решение!

• Не требует редактирования PHP кода!
• Установка в 3 шага
• Создан для дизайнеров
• Поддерживает нескольких CSS-файлов для одной HTML-страницы
• Идеально подходит для демонстрации работы с несколькими цветовыми схемами
• Быстрее, чем JS свитчеры
• В отличие от JS свитчеров не склонен к ошибкам

Как установить?

• Скопируйте switcher.php в папку с CSS-стилями
• Замените тег подключающий файл CSS-стилей новым:
  [html]<link rel=”stylesheet” href=”css/switcher.php?default=mystyle.css” type=”text/css” />[/html]
• Создайте несколько ссылок для переключения стиля:
  [html]<a href=”css/switcher.php?style=new-style.css”>Сменить стиль</a>[/html]

Tejas – Premium HTML5 Video Player

Неплохой видео плеер на HTML5 и jQuery. Вы сможете редактировать и изменять код по своему усмотрению, вплоть до создания нового графического интерфейса.

Skrool CSS Scrollbar Manager

Skrool – это мини-IDE, которая используется для создания CSS прокрутки. Она включает в себя несколько примеров полосы прокрутки, присутствует возможность создавать свои собственные полосы прокрутки. Скрипт позволяет выбрать, какие цвета изменить, одним кликом по нужной области.

XHTML/CSS Simply Template – 4 Skins

Это простой и xHTML Strict валидный шаблон. 7 страниц с контентом. Более 50 psd-шаблонов, что поможет Вам изменить любой элемент. И самое главное – это 4 стиля оформления!

Galleria – Photography and Portfolio Template

Красивый шаблон для портфолио или фотогалереи. Включает в себя 2 разных галереи изображений на JavaScript и 12 цветовых схем.

Slideo Business Template Available in 7 colors

Slideo – это шаблон галереи бизнесс класса, который выполнен в 7 цветовых схемах.

UPD рубрика закрыта

Вы когда-нибудь задавались вопросом “Как собрать самодельный умный дом?” Теперь можете даже не думать об этом, теперь всё сделают за Вас!

Сообщение Платное бесплатно. Выпуск 7 появились сначала на Блог Stafox'a.

Здравствуйте дорогие читатели. Как я и обещал в предыдущей лекции сегодня расскажу о теге <body>, о всевозможных манипуляциях с изображениями и о работе с таблицами.

Что скрывает в себе тег body?

Тег <body> помимо своей основной функции, также применяется для определения цветов ссылок и текста на веб-странице.

Подобные действия в HTML 4 осуждаются и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Однако со стилями мы познакомимся позже.

Вот они, атрибуты, от которых нам рекомендуют отказатся, но несмотря на это, они прекрасно поддерживаются всеми браузерами:

• alink – Устанавливает цвет активной ссылки.
• background – Задает фоновый рисунок на веб-странице.
• bgcolor – Цвет фона веб-страницы.
• bgproperties – Определяет, прокручивать фон совместно с текстом или нет.
• bottommargin – Отступ от нижнего края окна браузера до контента.
• leftmargin – Отступ по горизонтали от левого края окна браузера до контента.
• link – Цвет ссылок на веб-странице.
• rightmargin – Отступ от правого края окна браузера до контента.
• scroll – Устанавливает, отображать полосы прокрутки или нет.
• text – Цвет текста в документе.
• topmargin – Отступ от верхнего края окна браузера до контента.
• vlink – Цвет посещенных ссылок.

Рассмотрим как это выглядит на примере.

Как вы заметили, цвет указывается в непревычной для вас форме, в данном примере цвет указан в шестнадцатиричном значении. На начальном этапе вместо использования таких страшных обозначений цвета (#FF9900, #336699, #FFFFFF) можно ограничится названием цвета на английском языке (black, brown, red, darkred, yellow, green, blue, white и т.д.). Однако рано или поздно вам придётся впустить в свою жизнь обозначение цветов в HEX. А может вам больше понравится CMYK или HSV. Для того чтобы определится что вам больше по душе предлагаю заглянуть в wiki. А я в свою очередь хочу поделиться с вами программой ColorPix, которая поможет вам узнать код любого понравившегося вам цвета.

А теперь попробуйте самостоятельно изменить цвет текста и цвет фона страницы.

Если вам захочется в качестве фона использовать изображение, то атрибут background указывает путь к изображению.

Как вы видите, применён ещё один атрибут –  bgproperties, он может принимать только значение fixed, это означает, что фон будет зафиксирован, и прокручиваться будет только контент.

Манипуляции с изображениями

Просматривая разные сайты, вы часто встречаете на страницах изображения, и наверняка вопрос “Как вставить картинку на сайт?” мучает вас ещё с того момента, как вы узнали, как создать ссылку.

Для того чтобы вставить изображение используется тег <img>. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения в некоторых браузерах отображается рамка, которую можно убрать, добавив атрибут border=”0″ в тег <img>. Также изображение можно маштабировать, указав в атрибутах width и height, желаемый размер. Атрибут alt содержит описание изображения, которое выводится до загрузки изображения. Для того чтобы задать позицию изображения (слева, справа, по центру) используется атрибут align, который может принимать пять значений: bottom, left, middle, right, top.

• bottom – Выравнивание нижней границы изображения по окружающему тексту.
• left – Выравнивает изображение по левому краю окна.
• middle – Выравнивание середины изображения по базовой линии текущей строки.
• right – Выравнивает изображение по правому краю окна.
• top – Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Вот полный список атрибутов тега <img>:

• align – Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
• alt – Альтернативный текст для изображения.
• border – Толщина рамки вокруг изображения.
• height – Высота изображения.
• hspace – Горизонтальный отступ от изображения до окружающего контента.
• ismap – Говорит браузеру, что картинка является серверной картой-изображением.
• longdesc – Указывает адрес документа, где содержится аннотация к картинке.
• src – Путь к графическому файлу.
• vspace – Вертикальный отступ от изображения до окружающего контента.
• width – Ширина изображения.
• usemap – Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

А теперь взяглянем на код примера размещения изображения-ссылки и маштабированного изображения:

А вот непосредственно сам пример. Самостоятельно попробуйте осуществить выравнивание изображения.

Работа с таблицами

Я думаю слово “таблица” вам прекрасно знакомо. Вероятно, вы сталкивались с таблицами ранее: в учебниках, в газетах, в Microsoft Word. Таблицы также присутствуют и в HTML. Они играют здесь двойную роль: с одной стороны, это теги для создания таблиц с информацией, с другой стороны таблицы могут служить для разметки страницы на сектора. Ниже приведу рисунок, чтобы всё стало ясно.

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Также вы можете встретить тег <th> – аналогичен тегу <td>, используется для обозначения заголовочных ячеек.

Приведу атрибуты тега <table>, которые могут пригодится вам при создании таблицы:

• ALIGN – Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю.
• BGCOLOR – Устанавливает цвет фона таблицы.
• BORDER – Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.
• BORDERCOLOR – Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.
• CELLPADDING – Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
• CELLSPACING – Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.
• HEIGHT – Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега <TD>, в противном случае высота вычисляется на основе содержимого таблицы.
• WIDTH – Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.

У тега <td> также есть свои атрибуты:

• ALIGN – Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left — выравнивание по левому краю, center — по центру и right — по правому краю.
• BGCOLOR – Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега <TABLE> можно получить разнообразные эффекты в таблице.
• BORDERCOLOR – Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.
• COLSPAN – Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где используется горизонтальное объединение ячеек.
• HEIGHT – Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
• NOWRAP – Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.
• ROWSPAN – Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где применяется вертикальное объединение ячеек.
• VALIGN – Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.
• WIDTH – Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.

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

Демонстрация примера тут.

Второй вариант применения таблиц – это разбиение страниц на блоки. В настоящее время данный способ не очень приветствуется, в большинстве случаев – критикуется. Мнение большинства совпадает с моим. Два года я верстал с помощью таблиц и меня всё устраивало. Однако попробывав блочную вёрстку, я полностью отказался от табличной. Блочная вёрстка это совсем другой уровень, но об этом позже. Но для расширения знаний, будет полезно научиться табличной вёрстке. Да и будет с чем сравнивать в будущем.

А вот и результат.

На этом вторая лекция подходит к концу. Задавайте вопросы, развивайтесь, удивляйтесь своим возможностям!

При написании данной статьи описание некоторых тегов было взято c htmlbook.ru/html/

Сообщение HTML с нуля. Лекция 2 появились сначала на Блог Stafox'a.