Здравствуйте дорогие читатели. Как я и обещал в предыдущей лекции сегодня расскажу о теге <body>, о всевозможных манипуляциях с изображениями и о работе с таблицами.
Что скрывает в себе тег body?
Тег <body> помимо своей основной функции, также применяется для определения цветов ссылок и текста на веб-странице.
Подобные действия в HTML 4 осуждаются и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Однако со стилями мы познакомимся позже.
Вот они, атрибуты, от которых нам рекомендуют отказатся, но несмотря на это, они прекрасно поддерживаются всеми браузерами:
- alink — Устанавливает цвет активной ссылки.
- background — Задает фоновый рисунок на веб-странице.
- bgcolor — Цвет фона веб-страницы.
- bgproperties — Определяет, прокручивать фон совместно с текстом или нет.
- bottommargin — Отступ от нижнего края окна браузера до контента.
- leftmargin - Отступ по горизонтали от левого края окна браузера до контента.
- link — Цвет ссылок на веб-странице.
- rightmargin - Отступ от правого края окна браузера до контента.
- scroll - Устанавливает, отображать полосы прокрутки или нет.
- text — Цвет текста в документе.
- topmargin — Отступ от верхнего края окна браузера до контента.
- vlink — Цвет посещенных ссылок.
<html> <head> <title>Мой первый сайт</title> </head> <body link="#ff9900" vlink="#336699" alink="#ff6699"> Привет всем! А это мой первый <a href=" http://stafox.ru/html-s-nulya-lekciya-2/">сайт</a>. С цветными <a href="#">ссылками</a> </body> </html>
Рассмотрим как это выглядит на примере.
Как вы заметили, цвет указывается в непревычной для вас форме, в данном примере цвет указан в шестнадцатиричном значении. На начальном этапе вместо использования таких страшных обозначений цвета (#FF9900, #336699, #FFFFFF) можно ограничится названием цвета на английском языке (black, brown, red, darkred, yellow, green, blue, white и т.д.). Однако рано или поздно вам придётся впустить в свою жизнь обозначение цветов в HEX. А может вам больше понравится CMYK или HSV. Для того чтобы определится что вам больше по душе предлагаю заглянуть в . А я в свою очередь хочу поделиться с вами программой ColorPix, которая поможет вам узнать код любого понравившегося вам цвета.
А теперь попробуйте самостоятельно изменить цвет текста и цвет фона страницы.
Если вам захочется в качестве фона использовать изображение, то атрибут background указывает путь к изображению.
<body background="bg.jpg" bgproperties="fixed">
Как вы видите, применён ещё один атрибут — 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>, содержащий координаты для клиентской карты-изображения.
А теперь взяглянем на код примера размещения изображения-ссылки и маштабированного изображения:
<html> <head> <title>Мой первый сайт</title> </head> <body link="#ff9900" vlink="#336699" alink="#ff6699"> Привет всем! А это мой первый сайт. С картинкой ссылкой: <a href="#"><img src="emblem-symbolic-link.png" width="16" height="16" border="0" alt="картинка-ссылка"></a> <br> А вот это же изображение без маштабирования: <img src="emblem-symbolic-link.png" border="0" alt="картинка"> </body> </html>
А вот непосредственно сам пример. Самостоятельно попробуйте осуществить выравнивание изображения.
Работа с таблицами
Я думаю слово «таблица» вам прекрасно знакомо. Вероятно, вы сталкивались с таблицами ранее: в учебниках, в газетах, в 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 — Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.
Рассмотрим первый случай, когда нам необходимо создать таблицу, в которой некоторые ячейки будут объединены:
<html> <head> <title>Мой первый сайт</title> </head> <body> <table border="1" bgcolor="#F5F5F5" align="center"> <tr> <td colspan="2" bgcolor="#FF3377" align="center" width="100">HTML</td> <td colspan="2" bgcolor="#FF7733" align="center" width="100">CSS</td> </tr> <tr> <td rowspan="2" valign="bottom" width="100">Тег</td> <td width="100" align="center">br</td> <td rowspan="2" valign="top" width="100">Свойство</td> <td width="100">text-shadow</td> </tr> <tr> <td width="100" align="center">hr</td> <td width="100">text-decoration</td> </tr> </table> </body> </html>
Демонстрация примера тут.
Второй вариант применения таблиц — это разбиение страниц на блоки. В настоящее время данный способ не очень приветствуется, в большинстве случаев — критикуется. Мнение большинства совпадает с моим. Два года я верстал с помощью таблиц и меня всё устраивало. Однако попробывав блочную вёрстку, я полностью отказался от табличной. Блочная вёрстка это совсем другой уровень, но об этом позже. Но для расширения знаний, будет полезно научиться табличной вёрстке. Да и будет с чем сравнивать в будущем.
<html> <head> <title>Мой первый сайт</title> </head> <body> <table border="0"> <tr> <td colspan="2" height="100" bgcolor="#FF3377" align="center" width="100%">Это хедер, в нём обычно находится название сайта, слоган и навигация по сайту</td> </tr> <tr> <td width="80%" height="600" valign="top" bgcolor="#F5F5F5">Здесь будет содержаться основной контент</td> <td width="20%" height="600" align="center" bgcolor="#DDDDDD">Это сайдбар, здесь обычно реклама, ссылки на другие сайты, подписка на RSS и т.д.</td> </tr> <tr> <td colspan="2" height="50" width="100%" align="center" bgcolor="#AAAAAA">©2011 Stafox.ru</td> </tr> </table> </body> </html>
А вот и результат.
На этом вторая лекция подходит к концу. Задавайте вопросы, развивайтесь, удивляйтесь своим возможностям!
При написании данной статьи описание некоторых тегов было взято c htmlbook.ru/html/
Не пропустите, это тоже интересно!
Или читайте меня в
3дравствуйте, Станислав.Лекция мне понравилась,спасибо, сжато и информативно о главном.кстати, я впервые столкнулась с «серверной картой-изображением».если можно в двух словах, что это такое и чем отличается от обычного .
Конечно можно. Изображение-карта позволяет осуществить открытие (выполнение) различных ссылок (сценариев), в зависимости от того, из какой области изображения происходит вызов. Области определяются координатами. К примеру, в шапке у меня изображение title.png, с помощью изображения-карты можно осуществить открытие блога по нажатию на слово «блог», и открытие страницы О себе по нажатию на «Stafox’a».
Если желаете, могу отдельно посвятить этому статью.
Здравствуйте!А 3 лекция когда будет?
Здравствуйте, ориентировочно 15-20 января.
Спасибо огромное! Все доступно и сжато. Давно подумывал начать изучение, но не знал с чего начать. Ваш блог — мой букварь! С нетерпением жду продолжения.
Буду страраться, спасибо!
спасибо большое
Пожалуйста
А сколько всего будет лекций?)
На данный момент, получился экспресс курс — всего 4 лекции, вот-вот совсем скоро будет первая лекция про CSS, в них я тоже буду затрагивать и разъяснять некоторые моменты HTML. Возможно будет ещё одна серия лекций по HTML, в которой чуть ли не каждому тегу, будет посвящена отдельная статья с подробными примерами.
Очень интересно !
Токо не всё сразу понятно!
Задавайте вопросы, если что-то не понятно, с радостью объясню.
Спасибо за статьи.
Подскажите, как присвоить цвет, отдельно взятому тексту/слову/букве?
Пожалуйста.
Есть два варианта. Воспользоваться CSS-свойствами и тегом span, либо тегом font и его атрибутами.
Вот первый вариант:
Можно заключить текст/слово/букву в тег span и применить к нему стиль. Вот пример.
Будет выглядеть вот так:
Добро пожаловать
А вот второй:
Выглядит так:
Добро пожаловать
А чтобы, это сделать более динамическим, можно воспользоваться некоторыми стандартными PHP-функциями, и написать свою, которая позволит выделять букву/слово/текст. Если хотите, я напишу такую, и покажу как она работает.
Я может не нашёл, но кто-то поскажет, где (или как?) почитать, как текст в рамочке (fieldset) — закрасить желанным цветом. Или невозможно. Я сделал в таблице.
С применением CSS, вот так:
<!DOCTYPE html> <html> <head> <title>Цветной текст в fieldset'e</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> fieldset {color:#FC3;} </style> </head> <body> <fieldset> Мой текст желанного цвета </fieldset> </body> </html>Jo!, огромное спасибо!!! Иду пробовать, вот что значит голова-профессионал-ум-хороший человек)))
Пожалуйста! Обращайтесь, если что-то нужно. Сейчас я очень загружен проектами — нету времени на написание новых статей, но на вопросы я всегда готов дать ответ.