Здравствуйте дорогие читатели. Как я и обещал в предыдущей лекции сегодня расскажу о теге <body>, о всевозможных манипуляциях с изображениями и о работе с таблицами.
Что скрывает в себе тег body?
Тег <body> помимо своей основной функции, также применяется для определения цветов ссылок и текста на веб-странице.
Подобные действия в HTML 4 осуждаются и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Однако со стилями мы познакомимся позже.
Вот они, атрибуты, от которых нам рекомендуют отказатся, но несмотря на это, они прекрасно поддерживаются всеми браузерами:
- alink — Устанавливает цвет активной ссылки.
- background — Задает фоновый рисунок на веб-странице.
- bgcolor — Цвет фона веб-страницы.
- bgproperties — Определяет, прокручивать фон совместно с текстом или нет.
- bottommargin — Отступ от нижнего края окна браузера до контента.
- leftmargin — Отступ по горизонтали от левого края окна браузера до контента.
- link — Цвет ссылок на веб-странице.
- rightmargin — Отступ от правого края окна браузера до контента.
- scroll — Устанавливает, отображать полосы прокрутки или нет.
- text — Цвет текста в документе.
- topmargin — Отступ от верхнего края окна браузера до контента.
- vlink — Цвет посещенных ссылок.
<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>
[/html]
Рассмотрим как это выглядит на примере.
Как вы заметили, цвет указывается в непревычной для вас форме, в данном примере цвет указан в шестнадцатиричном значении. На начальном этапе вместо использования таких страшных обозначений цвета (#FF9900, #336699, #FFFFFF) можно ограничится названием цвета на английском языке (black, brown, red, darkred, yellow, green, blue, white и т.д.). Однако рано или поздно вам придётся впустить в свою жизнь обозначение цветов в HEX. А может вам больше понравится CMYK или HSV. Для того чтобы определится что вам больше по душе предлагаю заглянуть в wiki. А я в свою очередь хочу поделиться с вами программой ColorPix, которая поможет вам узнать код любого понравившегося вам цвета.
А теперь попробуйте самостоятельно изменить цвет текста и цвет фона страницы.
Если вам захочется в качестве фона использовать изображение, то атрибут background указывает путь к изображению.
[html] <body background="bg.jpg" bgproperties="fixed">[/html]
Как вы видите, применён ещё один атрибут — 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] <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>
[/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] <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]
Демонстрация примера тут.
Второй вариант применения таблиц — это разбиение страниц на блоки. В настоящее время данный способ не очень приветствуется, в большинстве случаев — критикуется. Мнение большинства совпадает с моим. Два года я верстал с помощью таблиц и меня всё устраивало. Однако попробывав блочную вёрстку, я полностью отказался от табличной. Блочная вёрстка это совсем другой уровень, но об этом позже. Но для расширения знаний, будет полезно научиться табличной вёрстке. Да и будет с чем сравнивать в будущем.
[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>
[/html]
А вот и результат.
На этом вторая лекция подходит к концу. Задавайте вопросы, развивайтесь, удивляйтесь своим возможностям!
3дравствуйте, Станислав.Лекция мне понравилась,спасибо, сжато и информативно о главном.кстати, я впервые столкнулась с «серверной картой-изображением».если можно в двух словах, что это такое и чем отличается от обычного .
Конечно можно. Изображение-карта позволяет осуществить открытие (выполнение) различных ссылок (сценариев), в зависимости от того, из какой области изображения происходит вызов. Области определяются координатами. К примеру, в шапке у меня изображение title.png, с помощью изображения-карты можно осуществить открытие блога по нажатию на слово «блог», и открытие страницы О себе по нажатию на «Stafox’a».
Если желаете, могу отдельно посвятить этому статью.
Здравствуйте!А 3 лекция когда будет?
Здравствуйте, ориентировочно 15-20 января.
Спасибо огромное! Все доступно и сжато. Давно подумывал начать изучение, но не знал с чего начать. Ваш блог — мой букварь! С нетерпением жду продолжения.
Буду страраться, спасибо!
спасибо большое 😉
Пожалуйста 🙂
А сколько всего будет лекций?)
На данный момент, получился экспресс курс — всего 4 лекции, вот-вот совсем скоро будет первая лекция про CSS, в них я тоже буду затрагивать и разъяснять некоторые моменты HTML. Возможно будет ещё одна серия лекций по HTML, в которой чуть ли не каждому тегу, будет посвящена отдельная статья с подробными примерами.
Очень интересно !
Токо не всё сразу понятно!
Задавайте вопросы, если что-то не понятно, с радостью объясню.
Спасибо за статьи.
Подскажите, как присвоить цвет, отдельно взятому тексту/слову/букве?
Пожалуйста.
Есть два варианта. Воспользоваться CSS-свойствами и тегом span, либо тегом font и его атрибутами.
Вот первый вариант:
Можно заключить текст/слово/букву в тег span и применить к нему стиль. Вот пример.[html]<p><span style="font-size:18px;font-family:Georgia;font-style:italic;color:#C00;">Д</span>обро пожаловать</p>[/html]
Будет выглядеть вот так:
Добро пожаловать
А вот второй:
[html]<p><i><font size="5" face="Georgia" color="#C00">Д</font></i>обро пожаловать</p>[/html]
Выглядит так:
Добро пожаловать
А чтобы, это сделать более динамическим, можно воспользоваться некоторыми стандартными PHP-функциями, и написать свою, которая позволит выделять букву/слово/текст. Если хотите, я напишу такую, и покажу как она работает.
Я может не нашёл, но кто-то поскажет, где (или как?) почитать, как текст в рамочке (fieldset) — закрасить желанным цветом. Или невозможно. Я сделал в таблице.
С применением CSS, вот так:
[html]<!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>[/html]
Jo!, огромное спасибо!!! Иду пробовать, вот что значит голова-профессионал-ум-хороший человек)))
Пожалуйста! Обращайтесь, если что-то нужно. Сейчас я очень загружен проектами — нету времени на написание новых статей, но на вопросы я всегда готов дать ответ.
а как разместить картинку в определённом месте странички?
Для этого нужно разделить страницу на части (при помощи div’ов или же таблиц).
Доброго времени суток, уже хорошо выучила и практиковала HTML,CSS, и основы JavaScript и хочу заняться созданием собственного сайта, но вот под ступорным вопросом: какая вёрстка лучше, блочная или табличная( верстка слоями).. можете описать в кратце плюсы и минусы и если не секрет какую используете вы (предполагаю блочную ибо она вроде по сложней будет), заранее спасибо за внимание и усилие ;D
Здравствуйте. Я использую блочную и Вам рекомендую. Плюсы блочной в сравнении с табличной: меньше кода, соответственно быстрее загрузка страницы и легче чтение кода. Всевозможное кроссбраузерное позиционирование элементов (в firefox, например, есть ряд проблем с применением position для элементов внутри ячеек таблицы). А по поводу сложности — это только на первый взгляд. Уж поверьте, через пару месяцев ваша производительность и скорость верстки будет куда быстрее в сравнении, если бы Вы применяли таблицы.
Спасибо за совет, а будут ли лекции по блочной структуре, а то в инете вся ин-фа и коды написаные на HTML4, а как я поняла в 5 версии оформление кода облегчилось :Р… (Наверное вас уде достала вопросами)
По поводу лекций — не знаю. Это уже больше CSS будет. Пока написал только две вводные. Времени не хватает. В целом, стандарты HTML5 и его нововведения и фичи, на блочной верстке никак не отразились. Появились новые семантические теги, которые должны положительно влиять на ранжирование ресурса, однако, использовать их никто не заставляет 🙂
Думаю, сделаю небольшой опрос в блоге «На какую тему писать статьи», чтобы узнать в чем нуждаются люди, а то не охота тратить время на материал, который не будет востребован.
Скажите пожалуйста я не понимаю куда надо прописывать код чтобы сделать шаблон?
Шаблон чего необходимо сделать?
Да тут даже я пойму) Мне 11 лет . Решил заняться программированием и за 2-3 дня я от вас узнал как создать сайт. Просто 10 минут и сайт готов! И это не только сайт. Это вы привели для примера. А я создал соц сеть) Точнее шаблон. Просто подкоректировал мне нужные проценты,пиксели и.т.д в width, height и все такое)) Ну и просто запомнить) займет 2-3 дня. Максимум неделю.Никогда не думал что это так просто
Не бросайте это дело. Это очень интересно, а когда наберетесь достаточного опыта — еще и хорошо оплачиваемо.
Я и не думал бросать)) Буду дальше изучать.
«Второй вариант применения таблиц — это разбиение страниц на блоки. В настоящее время данный способ не очень приветствуется, в большинстве случаев — критикуется.»… т.е блочный вариант критикуется? Почему, если он удобнее табличного?
Нет нет, Вы неправильно поняли — я имел ввиду табличную верстку.
ааа, спасибо 🙂
Слушайте вот мой код сайта
My first citeЭто хедер в нем находиться основная информация поиск по сайту. Слоган сайта ( 4-5-6-7-8 слов о сайте)
Тут будет основная контент
Это сайт бар тут реклама и все такое!
почему все налипает? почему не так как у вас как у норм сайта.
пробовал все нифига. скажите в чем проблема
Теги съело.
Попробуйте вставить код на paste.ubuntu.com или gist.github.com (если аккаунт имеется)
проблема в том что! у меня на сайте ну лекция 2. пробую сделать то что вы делали последнее. я пишу сам по памяти все сравниваю все ок но выходит так что они не распределены как блоки. не в одельных сторонах а все в одну ! то есть получатся не типо табличный сайт. а все в одну строку сбиваеться. в чем дело?
Мне нужно взглянуть на код, иначе, ничем не смогу помочь.
https://gist.githubusercontent.com/nickitka/ce451ae4bda247903b5c/raw/a84c933a261d71af63563190bfcfa7423cb56588/Mu%20Site
Ответил в комментарии на гисте.
отвечай тут потерял аккаунт гиста. отвечай тут! или кинь ссылку где ответил востановить не могу
прочитал все понял. но ! опять же оно не на всю страничку) а только в одну
Как вариант, добавить атрибут width=»100%» к таблице.
СПАСИБО! все получилось как у вас) учу дальше) тут все понятно . но почему вы поставили атрибут ширина (width) на 20 % в сайтабре и на 80% в основ. контенте). а я поставил 100% и все ок). почему мне надо 100% поставить а вам 20% и 80% или любые другие числа. но чтоб получился такой табличный сайтик мне надо на 100% прибавить атрибут. но вы это поставили по другому и у вас все хорошо у меня так не идет. у меня идет по 100% и как у вас.
100% для того таблице, чтобы она растягивалась на всю ширину страницы.
80% для контента, и 20% для сайдбара, для того, чтобы добиться вот такого результата: http://jsfiddle.net/Stafox/q3j4emLz/6/
везёт тем кто всё сразу понимает 🙂 я под конец читать не смогла, мозг сворачивается 🙂
вопрос автору: правильно ли я понимаю, что в шаблоне темы можно изменить процентное отношение контента и сайдбара и вообще сделать тему на три колонки вместо двух? изначально меня 2 колонки устраивало, а теперь хочу 3 чтобы порядка было больше
и подскажите в какой программе легче редактировать файлы темы? я как чайник делаю в ворде и всегда боюсь чтото потерять, опять же обратила внимание. что когда просматриваешь код элемента то там как-будто отображается строка где находится искомый тег, или я не правильно понимаю?
спасибо, за уроки 🙂
Ответ на Ваш вопрос: можно.
Каким редактором пользоваться дело сугубо индивидуальное. Я в свое время пользовался и dreamviewer’ом от adobe, и notepad++, и SublimeText. Сейчас использую NetBeans — но это уже полноценная IDE для разработки. Посмотрите в сторону SublimeText 3 — довольно приятный глазу интерфейс с возможностью его кастомизации.
Небольшая информация. В лекциях изложен стандарт HTML4. Немалая часть тегов уже устарела, несмотря на то, что все по-прежнему отображается. Но HTML4 по прежнему актуален для создания шаблонов почтовых рассылок.
Я рекомендую потренироваться и пощупать HTML во время этих лекций, а потом браться за HTML + CSS. У меня, к сожалению, не нашлось достаточно времени, чтобы продолжить цикл статей по CSS.
спасибо, за ответы, Стас! CSS лекции прочитала, конечно, жаль, что вы больше не можете их продолжить!
Доброго времени суток. Ночную с того что я конечно полный «0», но благодаря вашим лекциями понемногу осваиваюсь, и понимаю что все не так уж и сложно как я себе представлял. И у меня вот какой вопрос — как в «комментариях» (имею в веду данную область где мы, и собственно я задаем вам вопросы) задать текст ссылкой, в смысле куда код писать? Заранее спасибо.
Добрый день. Прошу прощения за столь поздний ответ — я сейчас в армии 🙂
Для того, чтобы задать текст ссылкой. Достаточно просто использовать предназначенный для этого html тег <a>
Блин с фоном не кажет, обьесните что такое bg.
bg — сокращение от слова background