1

А. В. Вильчевский, г. Красноярск, 2011г.

Авторские права © 2011 Вильчевский А. В.

2

А. В. Вильчевский, г. Красноярск, 2011г.

HTML – Очень скучная, но очень нужная книга… Книга действительно очень скучная, но очень даже нужная и важная. Есть, конечно, и справочники по HTML, но эти уроки, Андрея Бернацкого, на мой взгляд, проще и информативней. Из 20 его рассылок я выбрал для этой книги 10 выпусков. Учитесь и практикуйтесь Удачи! А. Вильчевский

www.rusgu.ru

Выпуск №1. Структура HTML документа. Основные теги.

Cразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы и параллельно с этим практиковаться. Изучая основы языка HTML, мы будем обращаться к css стилям. А значит мы будем изучать и css. Но это чуть позже. Также мы будем обращаться за помощью к javascripts. Cегодняшний вступительный урок мы начнем со структуры HTML документа. Поехали… Каждый HTML документ начинается со строчки:

Авторские права © 2011 Вильчевский А. В.

3

А. В. Вильчевский, г. Красноярск, 2011г. В общем случае эта строчка говорит браузеру, который открывает нашу страницу, на какие стандарты ему опираться. Тег весьма разнообразен, и от его модификации зависит, как будет отображаться содержимое на Вашей странице. Однако, если умело расположить все элементы и блоки на странице и умело применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным . Но, пока мы не знаем ни что такое блоки, ни что такое стили и как эту “абрукадабру” применять, считаю нужным вернуться к подробному рассмотрению , когда мы уже будем что-то уметь и сможем реально оценить его работу. А пока движемся ниже по странице. Кстати, а почему я начал рассматривать HTML документ c верхней части страницы? Потому что браузер загружает страницу и “считывает код” сверху вниз, слево направо. (Впрочем как мы и читаем книги). Значит, далее следует тег . Он говорит браузеру, что страница, которую он открывает, является HTML документом. Наверное, не совсем понятно слово тег? Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать. С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые “уголки” (<тэг>). И закрывающий (с косой чертой). Например, <strong> жирный текст . Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.

Авторские права © 2011 Вильчевский А. В.

4

А. В. Вильчевский, г. Красноярск, 2011г. Что такое тег, надеюсь, понятно. Двигаемся дальше. Предлагаю набрать что-нибудь своими руками. Итак, приступим. Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки: view sourceprint? 01. 03. 04. 05.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 06.<meta name="author" content="Ф.И.О." /> 07.<meta name="description" content="описание страницы" /> 08.<meta name="keywords" content="слово, слово, сдлово" /> 09.<meta http-equiv=refresh content=”30;url=www.mysite.ru” /> 10. 11. 12. 13. 14. Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали. Между тегами и располагается информация не отображаемая на странице. Например, тег <meta…>, кстати он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name=”author” content=”Ф.И.О.”) , или слова для поисковой машины, тэг <meta http-equiv=refresh content=”30;url=www.mysite.ru”> заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример). Тэг 11. 12. 13.Текст, кторый мы увидим в своем браузере!!! 14. 15. Должен быть белый текст на черном фоне, так как на картинке.

На этом 1-ый выпуск закончен.

Авторские права © 2011 Вильчевский А. В.

7

А. В. Вильчевский, г. Красноярск, 2011г.

Выпуск №2. Форматирование текста в html.

Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются. Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно “обойти”, используя каскадные таблицы стилей (css). Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют. Итак, начнем. Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Архив 2 урока Возьмем из высланного Вам архива файл “Лис и лошадь.doc”. и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм. Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока. Готово? Верю, что да. Теперь вернемся в word, скопируем весь наш текст из файла “сказка.doc” и вставим его между тегами нашей заготовки. Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera). Мы видим, что текст идет без заголовков, без абзацев, без отступов. Вот теперь и займемся непосредственным форматированием текста. Для выделения заголовков используются теги

текст

,

текст

и т.д. до

текcт

. Цифры после буквы H в тэге применяются от 1 до 6.

Авторские права © 2011 Вильчевский А. В.

8

А. В. Вильчевский, г. Красноярск, 2011г. 1 – самый крупный заголовок, 6 – самый маленький заголовок. Давайте теперь найдем в нашем файле названия сказок и заключим их в теги

…

. view sourceprint? 1.

Лис и лошадь

2.

Лис и кошка

У тега

есть параметр align со значением Left – по левому краю, right – по правому и center – по центру. Давайте выровняем заголовок по центру. Для этого пропишем: view sourceprint? 1.

Аналогично и второй заголовок. Сохраняем и смотрим в браузер. Заголовки стали по центру. Для упрощения работы можно держать открытыми одновременно код страницы в блокноте и браузер. А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5). Самостоятельно попробуйте разные значения тега текст. И разные значения align. Выберите любой Вам понравившейся. Теперь разобьем наш текст на абзацы. Тег, который это делает –

текст абзаца

. Для этого находим начало абзацев и ставим там тег

, а в конце абзаца закрываем его

. Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку “обновить” и смотрим, что получилось.

У тега

есть параметр align с такими же значениями, что и у тегов – left, right, center. Его работа абсолютно такая же как и у тега .

Авторские права © 2011 Вильчевский А. В.

9

А. В. Вильчевский, г. Красноярск, 2011г. На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту. Текст можно сделать жирным. При помощи тега или <strong> (кстати, это закрывающиеся теги. Рекомендуется<strong>). Курсив – или <em>, подчеркнутый , моноширинный или . Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать. Например:

view sourceprint? 1. любой текст из сказки 2.………………………….. 3.…………………………. 4.…………………….. Для изменения размера, цвета и шрифта отдельного участка текста используйте тег , его параметры: fаce=”arial” – указывает названия шрифта. size=”3″ - размер (значения от 1 до 7). Color=”******” – цвет шрифта. ****** - определенный код шрифта. (напрмер 000000 – это черный). Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом: view sourceprint? 1. – сведения об авторе и последнем обновлении страницы (отображаются курсивом) – цитаты, отображаются курсивом – программный код отображается моноширинным шрифтом <em> – выделенный текст отображается курсивом <strong> – выделенный текст отображается жирным шрифтом, рекомендуется вместо

---

– горизонтальная линия. У этого тэга есть такие параметры, как: align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов width=”число” – длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана size=”число” – толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99, a параметрwidth=1, то получим вертикальную линию, только с ограниченной высотой) color=”цвет” -цвет линии noshade – отменяет рельефность

Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем: view sourceprint? 1.

---

Авторские права © 2011 Вильчевский А. В.

11

А. В. Вильчевский, г. Красноярск, 2011г. Поэкспериментируйте с набором и значениями параметров этого тега. Есть еще один интересный тэг, но поддерживается он только браузером Internet Explorer честно говоря мне его на практике использовать не приходилось. Тег <marquee> – контейнер бегающей строки с параметрами: align=”middle(top, bottom)”- выравнивает контейнер относительно окружающего текста. top – по верхнему тексту, bottom- по нижнему, middle- по середине. behavior=”scroll(slide, alternate)” – scroll – текст прокручивается, slide – скольжение, alternate – текст “плавает” со стороны в сторону. bgcolor =”цвет” – фоновый цвет для контейнера. direction=”left(right)” – задает направление движения текста. height=”число” – высота контейнера. hspace=”число” – расстояние от контейнера до текста по горизонтали. vspace=”число” – расстояние от контейнера до текста по вертикали. loop=”число” – количество повторений. width=”число” – ширина контейнера. scrollmount=”число” – скорость движения текста. scrolldelay=”число” – время задержки между циклами. Например в нашей сказке это может выглядеть так: view sourceprint? 1.<marquee align="top" behavior="scroll" bgcolor="blue" 2.direction="left" height="30" width="200"> Как можете?

На этом 2-ый выпуск закончен.

Авторские права © 2011 Вильчевский А. В.

12

А. В. Вильчевский, г. Красноярск, 2011г.

Выпуск №3. Работа с ссылками и с изображениями в html.

Из этого урока, как я и обещал, мы узнаем, как создавать ссылки, какие они бывают. Также поработаем с изображениями. Наверное, никому не надо объяснять, что такое ссылки, ведь весь Интернет и состоит из ссылок, поэтому обойдемся без долгих прелюдий и перейдем сразу к делу. Для упрощения работы и хорошего восприятия материала, давайте приведем в порядок нашу предыдущую работу. Настоятельно рекомендую все сделать в точности как я прошу, от этого зависит сходство в нашей работе и, соответственно, ваш успех от этого урока. Потом, когда вы уже будете иметь достаточные навыки, можете не придерживаться моих указаний и делать все как вам удобно. Но пока, на начальном этапе, прошу повторять за мной каждый шаг. Итак, создадим папку “уроки по html”, в ней создадим папку “урок1″, и в нее скопируем файлы нашего первого урока. Затем, в папке “уроки по html”, создадим папку “урок2″, и в нее скопируем файлы нашего второго урока. И, наконец, в папке “уроки по html”, создадим папку “урок3″, в ней создадим и сделаем нашу обычную заготовку (надеюсь, делать это вы уже научились). Теперь зайдем в папку “урок1″ и переименуем наш файл с расширением .html (должен быть begin.html) в lesson1.html. Зайдем в папку “урок2″ и переименуем файл второго урока в файл lesson2.html. Аналогично поступим с папкой “урок3″: переименуем созданную заготовку в lesson3.html, откроем ее с помощью блокнота и начнем работать. Начинаем… Тег, с помощью которого создаются ссылки – это тег текст ссылки. href – обязательный параметр, собственно определяет по какому адресу ведет ссылка. Ссылки бывают абсолютные и относительные (внутренние).

Авторские права © 2011 Вильчевский А. В.

13

А. В. Вильчевский, г. Красноярск, 2011г. Абсолютные – это ссылки на другие документы сети, Относительные – на различные места одного и того же документа. Давайте, наконец-таки, сделаем ссылку, например, на наш первый урок. Для этого в заготовке lesson3 наберем : view sourceprint? 1.ссылка на урок 1 Аналогично на наш второй урок, ссылка будет выглядеть так: view sourceprint? 1.ссылка на урок 2 Разберемся в коде. По записи href=”../урок2/lesson2.html” можно догадаться, что это путь к файлу lesson2.html относительно файла lesson3.html. Мы сейчас на странице lesson3.html. Две подряд идущие точки говорят о том, что мы вышли из папки урок3, где находится lesson3.html, в папку“уроки по html”. Запись /урок2/ означает, что мы зашли в папку “урок2″ , и lesson2.html имя файла который требуется открыть. То есть, ..(две точки) означают выйти из папки в родительскую для нее папку, а / (косая или слеш) – войти в папку. Для наглядности, если нужно выйти из папки, а из той папки, в которую мы вышли тоже нужно выйти, то написать это нужно так: ../.. . Предлагаю в качестве упражнения сделать самостоятельно ссылки со всех уроков на каждый урок. Соответственно если файл, на который нам нужно перейти, находится в этой же папке, например, в нашей папке (урок3) находится файл my.html, то нам нужно в href записать просто имя этого файла, то есть ссылка на файл находящийся в той же папке . Теперь создадим ссылку на какой – нибудь сайт, например на google.ru. Это будет выглядеть следующим образом:

Авторские права © 2011 Вильчевский А. В.

14

А. В. Вильчевский, г. Красноярск, 2011г. view sourceprint? 1.google То есть в href нужно прописать http://+название сайта. Надеюсь понятно, что текст между открывающим и закрывающим тегом ( вот здесь) может быть абсолютно любой, главное, куда указывает href. Да и после каждого закрывающего тега можно поставлять тег
(напомню, это переход на новую строку) для красивого расположения наших ссылок. До сих пор мы делали ссылки на html страницы, однако существует возможность создавать ссылки на файлы других типов. Здесь есть два нюанса в работе этих ссылок: Первый – это то, что если браузер поддерживает тип файла, на который направлена ссылка, то он откроет этот файл сам, в своем же окне. Это файлы с расширением (gif, png, jpg, html, xhtml и др.). Второй – это то, что если браузер не поддерживает тип файла, на который направлена ссылка, то он откроет программу, которая ассоциирована с данным файлом. Это файлы с расширением (avi, doc, xls и др.). Выглядит такая ссылка достаточно просто, текст ссылки – подобная ссылка вызовет видеопроигрыватель, которым вы просматриваете “avi-файлы”. Аналогично с другими форматами. Рекомендую делать так, чтобы файл, формат которого не поддерживается браузером, на который ведет ссылка, находился в той же папке, что и html файл на котором используется данная ссылка. Так же существует возможность создавать ссылки на другие ресурсы Internet, т. е. будут вызываться программы для работы с почтой, новостями и т.д. Примеры таких ссылок: view sourceprint? 1. Отправить почту другу

Авторские права © 2011 Вильчевский А. В.

15

А. В. Вильчевский, г. Красноярск, 2011г. Здесь ключевое слово mailto, после которого идет адрес почтового ящика. По нажатию на эту ссылку вызовется программа работы с почтой (Outlook Express, The bat и др.), причем адрес получателя уже будет заполнен, останется только написать письмо и отправить его. view sourceprint? 1.Новости Здесь news – означает переход к ресурсу новостей, newsname – это название группы новостей, на которую вы подписаны. Откроется программа Outlook Express для работы с новостями. Нельзя не затронуть еще один вид ссылок. Это внутренние ссылки. Эти ссылки позволяют ссылаться на разные места одного и того же документа. Делается это следующим образом: в том месте документа, куда мы хотим переместиться, ставится, так называемая, метка. Записывается это так: view sourceprint? 1. А, допустим, в начале документа делается ссылка на эту метку. Это выглядит так: view sourceprint? 1.перейти на метку 1 Обратите внимание на то, что значение name у метки и значение href у ссылки совпадают. Итак, возьмите какой-нибудь достаточно длинный фрагмент текста, сделайте в нескольких местах метки. view sourceprint? 1. 2. 3. 4. А в начале страницы сделаем ссылки на эти метки. view sourceprint? 1.перейти на метку 1 2.перейти на метку 2 3.перейти на метку 3

Авторские права © 2011 Вильчевский А. В.

16

А. В. Вильчевский, г. Красноярск, 2011г. 4.перейти на метку 4 И у нас получилось такое оглавление в начале страницы. Также в этом уроке я остановлюсь на том, как вставлять изображение в текст и делать ссылку в виде изображения. Для вставки изображения используется тег . Параметр src является обязательным. Адрес url может быть как абсолютным, так и относительным. Чаще используются относительные имена (просто имя файла), если этот файл в той же папке, что и сам html документ. Закрывающегося тэга не существует. Также тэг имеет ряд параметров. Вот некоторые из них: В контейнер ссылки можно поместить изображение. В этом случае щелчок по изображению будет выполнять переход по ссылке. Пример (результат можете посмотреть в файле lesson3.html, находящийся в архиве lesson3.zip. Ссылка для скачивания архива:Архив 3 урока): На этом 3-ый выпуск закончен.

Авторские права © 2011 Вильчевский А. В.

17

А. В. Вильчевский, г. Красноярск, 2011г.

Выпуск №4. HTML списки.

Поговорим мы сегодня про html списки. В html поддерживается 3 вида списков: маркированные, нумерованные, список определений. Начнем с маркированного списка. Маркированный список создается с помощью закрывающегося тега

…

. Внутри этого тега располагаются теги

, которые содержат каждый конкретный пункт списка. Тег

закрывающийся тег, но может и не закрываться. Пример: (результат можете посмотреть в файле lesson4.html, находящийся в архиве: Архив 4 урока) view sourceprint? 1.

2.<strong>Виды спорта 3.
• Хоккей 4.
• Футбол
5.
• Баскетбол 6.

Параметры тега

:


Авторские права © 2011 Вильчевский А. В.

18

А. В. Вильчевский, г. Красноярск, 2011г. Параметр type можно также указывать для тега
• , но действия только для конкретного пункта меню. Допускается использование тега вместо тега
• . Смотрите результат в примере lesson4.html. Настоятельно рекомендую Вам самим попрактиковаться. view sourceprint? 1.
  2.<strong>Виды спорта 3.Хоккей 4.
  • Футбол
  5.
  • Баскетбол 6.
  Нумерованный список. Нумерованный список создается при помощи тега
  …
  . Внутри него располагаются теги
• . Обязательных параметров у этих тегов нет. Параметры тега
  :
  Параметр тега
  1. в нумерованном списке:
     Авторские права © 2011 Вильчевский А. В.
     
     19
     
     А. В. Вильчевский, г. Красноярск, 2011г. type – можно указывать те же значения, что и для тега
     , только они действовать будут на 1 пункт списка; value – конкретное значение нумерации ( все последующие отсчитываются от данного); > Пример: view sourceprint? 01.
     02.<strong>Виды спорта 03.
     1. Хоккей 04.
     2. Футбол
     05.
     3. Баскетбол 06.
     07.
     08.<strong>Виды спорта 09.
     8. Хоккей 10.
     9. Футбол
     11.
     10. Баскетбол 12.
     Список определений. Список определений создается при помощи тега

     …

     . Внутри тега располагаются пары тегов
     (терин) и
     (определение), которые содержат конкретный термин и его определение соответственно. Параметров у тегов нет. Пример: view sourceprint? 1.

     2.

     Солнце 3.

     Это звезда 4.

     На этом 4-ый выпуск закончен.
     
     Авторские права © 2011 Вильчевский А. В.
     
     20
     
     А. В. Вильчевский, г. Красноярск, 2011г.
     
     Выпуск №5. HTML таблицы.
     
     Сегодняшний урок посветим использованию html таблиц. В WEB таблицы это не только какие-то отчетные данные, не только расписание или еще что-нибудь в этом стиле. В WEB таблицей можно задать целую структуру сайта.
     
     Сколько вы таких страниц видели в Internet? Тысячи и тысячи. Но если разобраться, то это вот такая таблица. Спросите вы, а как располагаются элементы на странице, ровно? А они заключаются в свои таблицы и выравниваются нужным образом. Благодаря тому, что в каждую ячейку одной таблицы, мы можем поместить новую таблицу любой структуры (или даже несколько таблиц), можно добиться требуемого результата. Тегом таблицы является тег , строкой таблицы является тег , и столбцом таблицы – тег .
     
     Авторские права © 2011 Вильчевский А. В.
     
     21
     
     А. В. Вильчевский, г. Красноярск, 2011г. Таблица заполняется по строкам сверху вниз, а по столбцам слева на права. Количество столбцов в строке должно быть одинаково для всех строк. Давайте рассмотрим пример, и вы сразу все поймете. Сделаем такую таблицу:
     
     Сделаем это следующим образом: Ставим тег и начинаем формировать первую строку, пишем: view sourceprint? 1. 2. 3. 4. 5. У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку: view sourceprint? 1. 2. 3. 4. 5. И третью:
     
     Авторские права © 2011 Вильчевский А. В.
     
     22
     
     А. В. Вильчевский, г. Красноярск, 2011г. view sourceprint? 1. 2. 3. 4. 5. Наши три строки сформированы, осталось закрыть тег

     Ячейка 1 строка 1	Ячейка 2 строка 1	Ячейка 3 строка 1
     Ячейка 1 строка 2	Ячейка 2 строка 2	Ячейка 3 строка 2
     Ячейка 1 строка 3	Ячейка 2 строка 3	Ячейка 3 строка 3

     . Наша таблица готова. Если таблице нужно дать заголовок, то за это отвечает тег Заголовок таблицы . По умолчанию он располагается по центру, над таблицей. Тег заголовка таблицы необходимо размещать между тегом и первым тегом . В принципе заголовок можно сделать, поставив тег

     Заголовок таблицы

     перед тегом . Если столбцу нужно дать заголовок, то для этого предусмотрен тег . Тег

     Заголовок столбца	– то же что и тэг	, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое	, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию. С тегами, касающихся таблиц, пожалуй, все. Теперь рассмотрим параметры этих тегов. Тег имеет следующие параметры: width=число – ширина таблицы в пикселях или в % относительно ширины окна браузера. height=число - высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую). align = left – выравнивание таблицы по левому краю. right – выравнивание таблицы по правому краю. center – выравнивание таблицы по центру. Авторские права © 2011 Вильчевский А. В. 23 А. В. Вильчевский, г. Красноярск, 2011г. border= число – толщина рамки таблицы в пикселях. cellspacing=число - расстояние между смежными ячейками в пикселях (по умолчанию = 2). cellpadding=число – расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1). bgcolor= цвет – фоновый цвет таблицы. background=url - фоновое изображение для таблицы. bordercolor=цвет - цвет всех линий рамки таблицы. Рассмотрим параметры тегов , не применяется). height=число - высота ячейки в пикселях или в % относительно ширины окна браузера (для не применяется). (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую). align = left – выравнивание в ячейке по левому краю. right – выравнивание в ячейке по правому краю. center – выравнивание в ячейке по центру. valign - вертикальное выравнивание содержимого ячейки. top - выравнивание по верхнему краю ячейки. bottom – выравнивание по нижнему краю ячейки. middle – выравнивание по середине ячейки. bgcolor= цве – фоновый цвет ячейки. background=url – фоновое изображение для ячейки. Авторские права © 2011 Вильчевский А. В. 24 А. В. Вильчевский, г. Красноярск, 2011г. bordercolor=цвет – цвет всех линий рамки ячейки. colspan=число - количество объединяемых ячеек по столбцам (для не применяется). rowspan=число- количество объединяемых ячеек по строкам (для не применяется). Давайте подробнее остановимся на параметрах colspan и rowspan. Вы наверное заметили, что количество ячеек в каждой строке таблицы одно и тоже. Да, так и должно быть, но как же тогда сделать таблицу подобную на эту? Для этого нам понадобятся параметры тега , : width=число – ширина ячейки в пикселях или в % относительно ширины окна браузера (для colspan и rowspan.. Итак: view sourceprint? 1. Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр colstrong=3. view sourceprint? Авторские права © 2011 Вильчевский А. В. 25 А. В. Вильчевский, г. Красноярск, 2011г. 1. 2. 3. Вторая строка это просто три ячейки: view sourceprint? 1. 2. 3. 4. 5. Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки ( 2 и 3) и две строки (третью и четвертую). Поэтому для нее зададим colspan=2 и rowspan=2. Ячейка № 6 остается. view sourceprint? 1. 2. 3. 4. Таким образом получается, что в четвертой строке должна быть одна ячейка () view sourceprint? 1. 2. 3. 4. 1 2 3 4 5 6 7 Наша таблица построена. Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц. На этом 5-ый выпуск закончен. Авторские права © 2011 Вильчевский А. В. 26 А. В. Вильчевский, г. Красноярск, 2011г. Выпуск №6. Каскадные таблицы стилей(CSS). В этом выпуске мы поговорим о каскадных таблицах стилей(CSS). С помощью таблиц стилей можно указать правило отображения тега HTML в браузере. Таблица стилей – это фактически набор правил, которые применяются к HTML тегам. Каждое правило состоит изселектора и определения. Селектор – это тэг HTML. Определение – это свойство тега и значение. Определение указывается в фигурных скобках, свойство и значение отделяются двоеточием(:), в конце каждого определения ставится точка с запятой(;). Пример: view sourceprint? 1.p {color: #FF0000;} Здесь: P – это селектор. color: #FF0000; - это определение. Определение всегда заключается в фигурные скобки, после каждого определения ставится точка с запятой. сolor- это название свойства (в данном случае цвет). #FF0000 - это значение свойства. Авторские права © 2011 Вильчевский А. В. 27 А. В. Вильчевский, г. Красноярск, 2011г. Свойств таблиц стилей очень много, с ними мы познакомимся в последующих выпусках. А пока, для того чтобы понять в работе того, о чем пойдет речь в этом выпуске, воспользуемся двумя свойствами: color- задает цвет текста. background-color - задает фоновый цвет для элемента. Итак, рассмотрим каким образом можно встраивать таблицы стилей в документ. 1 Способ: Можно задать свойство для любого тега при помощи параметра style. В этом случае селектор не нужен. Пример: view sourceprint? 1. Мы изменили фоновый цвет абзаца 2 Способ: Указать свойство в заголовке документа между тегами <style>…. Пример: view sourceprint? 01. 02.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 03. 04.<style type="text/css"> 05. 09. Авторские права © 2011 Вильчевский А. В. 28 А. В. Вильчевский, г. Красноярск, 2011г. 10. 11. Эти свойства применяются ко всему документу. Значит, у нас все абзацы будут иметь сероватый фоновый цвет, и красный цвет шрифта, а все заголовки второго уровня будут на черном фоне с желтым цветом шрифта. Все остальные теги отобразятся без применения стилей. Если одинаковыми свойствами обладают несколько тегов, то их можно указать через запятую в качестве селектора.(H1, H2, p, li{ color:blue;}). 3 Способ: Способ позволяет использовать одну таблицу для форматирования нескольких документов. Смысл заключается в том, что все свойства записываются в отдельном файле с расширением CSS, а затем подключаются в HTML документ. view sourceprint? 1. 2.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 3. 4. 5. href=”mystyle.css” – путь к файлу CSS. А содержимое файла строится по тем же правилам (селектор и определение). Код файла mystyle.css: view sourceprint? 1.p {color:# 003333; background-color:#000099;} 2.h2 {color:#FFFF00; background-color:#000000;} 4 Способ: Способ позволяет использовать таблицу стилей лежащую на каком-нибудь сервере. Авторские права © 2011 Вильчевский А. В. 29 А. В. Вильчевский, г. Красноярск, 2011г. Чтобы подключить CSS файл с какого-либо сервера нужно в заголовке документа, между тегами<style>…. прописать следующее: @import:url(http://www.mysite.ru/style/mystyle.css); Пример: view sourceprint? 01. 02.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 03. 04.<style type="text/css"> 05. 10. 11. Вы заметили, что в 4-ом способе реализовано два способа включения таблицы стилей к документу. Такое допустимо, но при этом надо учитывать приоритет каждого из способов. Итак, расположение способов в порядке убывания их приоритетов: 1 Способ; 2 Способ; 4 Способ; 3 Способ; То есть, если в 3-ем или в 4-ом способе указано p {color: red;}, а во 2-ом или в 1-ом p {color: blue;}, Авторские права © 2011 Вильчевский А. В. 30 А. В. Вильчевский, г. Красноярск, 2011г. то применится к параграфам свойство p {color: blue;}, потому что приоритет 1-ого и 2-ого способа выше, чем 3-го и 4-го. Пару слов о наследовании и перейдем к классам. Часто встречается ситуация, когда содержимое одного тега находится целиком внутри другого. Пример: Текст абзаца <strong> текст абзаца выделенный жирным продолжение текста абзаца. То есть у нас тэг <strong> лежит полностью внутри тега . И если мы теперь зададим стиль для параграфа, он примениться и к тегу <strong>. Текст абзаца красными буквами <strong> текст абзаца красными буквами выделенный жирным продолжение текста абзаца красными буквами. Классы. Классы используются для того, чтобы одному и тому же тегу можно было бы задавать различные правила. Описываются классы в контейнере <style>…., а применяются к тэгам посредствам параметра CLASS. Давайте посмотрим на пример, и все станет ясно. view sourceprint? 1.<style type="text/css"> 2. 6. Описали класс red и yellow для тега Авторские права © 2011 Вильчевский А. В. 31 А. В. Вильчевский, г. Красноярск, 2011г. view sourceprint? 1. 2. Параграф класса red с красным цветом шрифта и синим фоном. 3. Параграф класса yellow с желтым цветом шрифта и черным фоном. 4.…… 5. Существуют, также и универсальные классы. Это классы, которые можно использовать не только для определенного, а для любого тега. Синтаксис таких классов достаточно прост: сначала идет точка, затем имя класса, и в фигурных скобках определения. Пример: view sourceprint? 01.<style type="text/css"> 02. 05. 06.… 07. 08. Текст заголовка 1-го уровня, класса red 09. Текст заголовка 2-го уровня, класса red 10. Текст параграфа класса red 11.… 12. Таким образом, мы применили класс red к трем различным тегам. На этом 6-ый выпуск закончен. Авторские права © 2011 Вильчевский А. В. 32 А. В. Вильчевский, г. Красноярск, 2011г. Выпуск №7. Продолжаем CSS. В этом выпуске продолжим изучение таблиц стилей(CSS). Расширим наши знания по свойствам таблиц стилей. Посмотрим на возможности управления ссылками из CSS. Начнем говорить о блоках. Итак, давайте рассмотрим несколько свойств, связанных с форматированием текста. font-family – названия применяемого шрифта. Пример: view sourceprint? 1.body{ 2.font-family:Arial, Helvetica, sans-serif; 3.} Можно указать несколько шрифтов через запятую, это означает, что если на компьютере пользователя нет первого шрифта(Arial), то применится второй( Helvetica), если нет второго, то применится третий, и т.д. font-style – задает стиль шрифта. Значения: italic – курсив normal – обычный Пример: view sourceprint? 1.p {font-style:italic;} font-weight – задает толщину шрифта Авторские права © 2011 Вильчевский А. В. 33 А. В. Вильчевский, г. Красноярск, 2011г. Значения: normal – обычный bold – полужирный bolder – несколько жирнее, чем в родительском элементе lighter - несколько тоньше, чем в родительском элементе число – числовое значение(допестимы следующие значения: 100, 200, 300, 400, 500, 600, 700, 800,900.) Пример: view sourceprint? 1.p { font-weight: 700;} font-size – задает размер шрифта. Значения: larger/smaller – на 1 больше/меньше чем у окружающих число – значение в пунктах число – значение в пикселях Пример: view sourceprint? 1.p { font-size: 12px;} text-align – выравнивание текста Значения: left – по левому краю right - по правому краю center - по центру Авторские права © 2011 Вильчевский А. В. 34 А. В. Вильчевский, г. Красноярск, 2011г. justify - по ширине text-decoration- задает оформление текста Значения: none - без оформления underline – текст подчеркнутый overline - черта сверху line-though – текст перечеркнутый Это, пожалуй, основные свойства работы с текстом. Теперь, давайте, их применим к странице. Я рекомендую использовать 3-ий способ внедрения CSS в html документ(). Сохраните наш lesson2.html файл из урока № 2 в папку с 7-ым уроком под именем lesson7.html(там должно быть две сказки). Сейчас мы их начнем форматировать средствами CSS. Создаем новый текстовый документ, сохраняем в папку с 7-ым уроком под названием style.css. Подключаем его к lesson7.html(). В файле style.css пишем: view sourceprint? 1.body{ 2.font-family:Arial, Helvetica, sans-serif; 3.font-size:14px; 4.} Для заголовков зададим красный цвет, шрифт- курсивный. view sourceprint? 1.h2{ 2.color: #FF0000; 3.font-style:italic; 4.} Авторские права © 2011 Вильчевский А. В. 35 А. В. Вильчевский, г. Красноярск, 2011г. Выделим какой-нибудь абзац жирным шрифтом, с размером шрифта 11px. view sourceprint? 1..paragraf1{ 2.font-size:11px; 3.font-weight:600; 4.} (и для параграфа, к которому мы хотим это применить укажем p class=”paragraf1″). Выделим какой-нибудь абзац курсивом, с темно-серым цветом, с серым цветом фона. view sourceprint? 1..paragraf2{ 2.color:#333434; 3.background-color:#CCCCCC; 4.} (и для параграфа, к которому мы хотим это применить укажем p class=”paragraf2″). Принцип надеюсь понятен. Теперь рассмотрим управление ссылками. В CSS есть 3 типа ссылок: a:link – не посещенная ссылка a:visited – посещенная ссылка a:active - активная ссылка a:hover – ссылка над которой расположен курсор мыши В принципе это есть отдельные классы, применяемые исключительно для ссылок. Создадим ссылку в начале документе. Для ссылок, в таблице стилей укажем следующие правила: view sourceprint? 01.a:link{ 02.color:blue; 03.} Авторские права © 2011 Вильчевский А. В. 36 А. В. Вильчевский, г. Красноярск, 2011г. 04.a:visited { 05.color:red; 06.} 07.a:active { 08.color: black; 09.} 10.a:hover { 11.color:aqua; 12.} Это у нас для всех ссылок в документе. Пришло время познакомится еще с одним способом задания класса. Можно задавать стиль форматирования для элемента, находящегося внутри другого элемента. Это означает, что, если у нас (в данном случае) ссылка находится внутри тэга с классом .paragraf1, то она будет синего цвета без подчеркивания, а при наведении станет подчеркнутой. Если данное условие не выполняется(ссылка не находится внутри со стилем .paragraf1), то она будет отображена со стилем определенном для всех ссылок в документе. Синтаксис этого следующий: view sourceprint? 1..paragraf1 a{ 2.color:blue; 3.text-decoration:none; 4.} 5..paragraf1 a:hover{ 6.color:blue; 7.text-decoration:underline; 8.} Давайте сделаем ссылку внутри с классом .paragraf2 белого цвета на синем фоне, а при наведении желтого цвета на черном фоне. view sourceprint? 01..paragraf2 a{ 02.color:#ffffff; 03.background-color:#000099; 04.text-decoration:none; Авторские права © 2011 Вильчевский А. В. 37 А. В. Вильчевский, г. Красноярск, 2011г. 05.} 06..paragraf2 a:hover{ 07.color:#FFFF00; 08.background-color:#000000; 09.text-decoration:none; 10.} Думаю понятно как работают ссылки и как для них задавать свойства через CSS. Попробуйте сами задавать различные свойства ссылкам. Теперь давайте познакомимся еще с парой тегов. Это тег … и тег <span> …. Эти теги применяются, если надо выделить какой-нибудь фрагмент на странице не обозначенный никаким другим тегом. То есть, если нам нужно выделить какое-нибудь предложение в абзаце красным, то мы его заключаем в тег <span> наше предложение и применяем к нему стиль. > Пример: view sourceprint? 1.<span class="red"> 2."Чего ты так голову повесила да бродишь тут одинешенька?" - "Ах, - отвечала лошадь, - на свете так ведется, что скупость и верность не могут ужиться в одном доме: мой господин забыл, сколько я ему услуг оказывала в течение моей долгой службы, и вот из-за того, что я теперь не могу так же хорошо пахать, как прежде, он мне и корму давать не хочет и выгнал меня из стойла" 3. А для класса .red укажем: view sourceprint? 1..red{ 2.color: red; 3.} Чем же различаются эти два тэга? Тег <span> – строчный, внутри него может быть только текст, а тег – блочного типа, внутри него могут располагаться любые другие теги(картинки, абзацы, списки, таблицы и т.д.). На этом 7-ый выпуск закончен. Авторские права © 2011 Вильчевский А. В. 38 А. В. Вильчевский, г. Красноярск, 2011г. Выпуск №8. Свойства таблиц стилей (css). Продолжим изучать свойства таблиц стилей css. В этом выпуске мы познакомимся со стилями, которые позволяют форматировать списки, и рассмотрим стили для задания различного вида границ элементов. И так о списках. Стилей форматирующих списки не так много. Вот они все: list-style-type – задает вид маркера для списка. Значения: none – без маркера disc – маркер в виде круга square – квадрат decimal – арабские цифры lower-alpha – строчные латинские буквы upper-alpha – прописные латинские буквы lower-roman – строчные римские цифры upper-roman – прописные римские цифры Пример: view sourceprint? 1.li{ 2.list-style-type: square; 3.} Авторские права © 2011 Вильчевский А. В. 39 А. В. Вильчевский, г. Красноярск, 2011г. list-style-image – задает рисунок который будет выступить в роли маркера списка. Значения: none – без изображения URL – адрес файла с изображением Пример: view sourceprint? 1.li{ 2.list-style-image:url(cir.jpg); 3.} list-style-position – определяет позицию маркера относительно списка Значеня: outside - маркер находится вне списка inside - маркер находится внутри списка Пимер: view sourceprint? 1.li{ 2.list-style-position: outside; 3.} Для примера предложу такой вариант использования списков: view sourceprint? 01.<style type="text/css"> 02. 03.h2{ Авторские права © 2011 Вильчевский А. В. 40 А. В. Вильчевский, г. Красноярск, 2011г. 04.color:#CC0000; 05.} 06.li{ 07.list-style-type: lower-alpha; 08.list-style-image:url(cir.jpg); 09.list-style-position: outside; 10.} 11. 12. 13. Столицы некоторых государств 14. 15. Москва 16. Минск 17. Лондон 18. Париж 19. Думаю, комментарии тут будут лишними. Все здесь просто и понятно (я надеюсь). Единственное что попрошу проделать - это поменять в свойстве list-style-position значение outside на inside. Что бы увидеть разницу данный пример не совсем подходит. Предложу такое: view sourceprint? 1. Москва Токио Если вставить такую строку в наш вышестоящий то можно понять для чего используют outside и inside. Существует возможность задать сразу все эти свойства. view sourceprint? 1.li{ 2.list-style: lower-alpha url(cir.jpg) outside; 3.} Вот, пожалуй, и все что касается работы со списками. Авторские права © 2011 Вильчевский А. В. 41 А. В. Вильчевский, г. Красноярск, 2011г. Далее что бы я хотел вам рассказать – это свойства управляющие границами элемента. Подчеркиваю, что именно границами элемента, потому что многие понимают границы – значит только у таблиц. Так вот, границы, или рамки, можно задавать не только у таблиц, но и у тегов, допустим и даже тому же самому тегу можно задать рамку, определить ее вид, толщину и цвет. Вот что может CSS! И так рассмотрим свойства. Border – определяет вид рамки Значения: none – без рамки dotted - рамка из точек dashed - пунктирная solid – сплошная Border-style – определяет стиль рамки Значения: none - без рамки dotted – рамка из точек dashed - пунктирная solid - сплошная border-width - задает ширину рамки Значения: thin - тонкая medium – средняя thick – широкая x – числовое значение Авторские права © 2011 Вильчевский А. В. 42 А. В. Вильчевский, г. Красноярск, 2011г. border-color - задает цвет рамки Значения: цвет Существует в CSS возможность задавать стиль для отельных частей рамки (верхней, нижней, правой и левой). border-top-width – ширина верхней части рамки border-bottom-width – ширина нижней части рамки border-left-width – ширина левой части рамки border-right-width – ширина правой части рамки Значения: Те же, что и у border-width border-top-color – цвет верхней части рамки border-bottom-color – цвет нижней части рамки border-left-color – цвет левой части рамки border-right-color – цвет правой части рамки Значения: цвет border-top-style – стиль верхней части рамки border-bottom-style – стиль нижней части рамки border-left-style – стиль левой части рамки border-right-style – стиль правой части рамки Авторские права © 2011 Вильчевский А. В. 43 А. В. Вильчевский, г. Красноярск, 2011г. Значения: Те же, что и для border-style Как и для списков, можно задавать сразу несколько свойств для рамки, либо для отдельной части рамки. Примеры: view sourceprint? 1.td{ 2.border: 2px solid #a01616; 3.} То есть, мы для всей рамки задали толщину, стиль и цвет. Порядок следования свойств, рекомендую использовать именно такой!!! (ВАЖНО) view sourceprint? 1.H3{ 2.border-top: 1px dotted #1b25ac; 3.} 4.li{ 5.border-bottom: thin dashed # fcff06; 6.} Рассмотрим еще два свойства. Они просты и понятны. width - задает значение ширины для элемента Значения: x - число указывающее ширину auto - определяется браузером x - число указывающее ширину в % height - задает значение высоты для элемента Значения: x – число указывающее высоту auto - определяется браузером x - число указывающее высоту в % На этом 8-ый выпуск закончен. Авторские права © 2011 Вильчевский А. В. 44 А. В. Вильчевский, г. Красноярск, 2011г. Выпуск №9. HTML формы. В этом уроке речь пойдет о html формах. Формы – это те поля, куда мы, например, вводим свои данные при регистрации на каком – либо сайте, форуме и т.д. Предложу начать с примера, потом подробно его разберем и рассмотрим виды форм. И так, начнем. view sourceprint? 1. 2. 3. 4. 5. Все формы начинаются с тега и заканчиваются тегом . Далее, параметр action в тэге указывает на адрес программы (скрипта), которая будет обрабатывать данные из нашей формы. Параметр method указывает на способ передачи данных. Есть два способа: GET и POST. GET – при передачи этим способом, данные добавятся в конец адрес сайта (URL), и мы их увидим в адресной строке. Если будем передавать методом пост, то данные будут переданы скрытно от пользователя. Тег определяет как раз саму форму. Рассмотрим параметры тега : CHECKED – означает, что CHECKBOX или RADIOBUTTON будет выбран. MAXLENGTH – определяет количество символов, которое пользователи могут ввести в поле ввода. NAME – имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле. SIZE - определяет визуальный размер поля ввода на экране в символах. Авторские права © 2011 Вильчевский А. В. 45 А. В. Вильчевский, г. Красноярск, 2011г. VALUE – присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен) TYPE – определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Поскольку параметр type определяет тип формы, то рассмотрим подробно его значения. СНЕСKBOX - используется для выбора пользователем нескольких значений из предложенных. Пример использования: view sourceprint? 1. 2.Вариант 1 3.Вариант 2 4.Вариант 3 5.Вариант 4 6. RADIO – тоже что и checkbox, но пользователь может выбрать только одно значение. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE=”RADIO” с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. Пример использования: view sourceprint? 1. 2.Вариант 1 3.Вариант 2 4.Вариант 3 5.Вариант 4 6. PASSWORD – То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается броузером на экране (отображаются звездочки вместо символов). RESET - Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. SUBMIT – Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы (action). Авторские права © 2011 Вильчевский А. В. 46 А. В. Вильчевский, г. Красноярск, 2011г. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке. TEXT – Данный тип поля ввода описывает однострочное поле ввода. Это как раз те поля, которые используются для регистрации, ввода логина и пароля. Этот тип поля наиболее часто встречающийся. SELECT – Тег SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню. Тэг SELECT имеет один или более параметр между стартовым тэгом <SELECT> и завершающим . По умолчанию, первый элемент отображается в строке выбора. Пример использования: view sourceprint? 1. 2.<select name="n"> 3.Вариант 1 4.Вариант 2 5.Вариант 3 6.Вариант 4 7. 8. TEXTAREA – Тег (Обращаю внимание!!! Это именно тег, а не значение параметра type) используется для того, чтобы позволить пользователю вводить свободный текст. Пример использования: view sourceprint? 1. 2. 3. 4. NAME - имя поля ввода ROWS – высота поля ввода в символах COLS – ширина поля ввода в символах На этом 9-ый выпуск закончен. Авторские права © 2011 Вильчевский А. В. 47 А. В. Вильчевский, г. Красноярск, 2011г. Выпуск №10. Дополнительные элементы HTML. Про дополнительные элементы html… Допустим вам нужно выделить какое-нибудь отдельное слово в тексте (допустим другим цветом и фоном), или чтобы картинка и текст, относящийся к ней, были сверху и справа в ячейке таблицы, а основное содержимое страницы, допустим в низу и ближе к левому краю. По поводу первого примера скажу, что можно это сделать тегом с набором нужных параметров, но он относится к запрещенным тегам (новые браузеры его могут не поддерживать), да и свойства замены фона у него нет. Для подобных случаев и предусмотрены два специфических тега, которые по сути ничего не делают сами по себе. Но при применении нужных стилей к ним, можно добиться чего угодно. Можно вообще используя только два этих тега и применяя к ним стили, сделать всю страницу сайта. И так, это теги и <span>. Какая между ними разница, если используются они для одного и того же? – это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…). <span> – это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом). Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет. Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к ) . Первое с чего хотелось бы начать это с позиционирования элементов. Это свойство: position – устанавливает или определяет позицию элемента. Авторские права © 2011 Вильчевский А. В. 48 А. В. Вильчевский, г. Красноярск, 2011г. Значения: static – По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам. absolute – Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body.relative – Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию. left/top – Устанавливает или определяет позицию элемента относительно левого/верхнего края. Значения: x – число в процентах или пикселях. auto – значение по умолчанию. Рассмотрим пример: view sourceprint? 1. 2.Любое содержимое блока!!! Данный пример показывает, что наш блок с шириной в 300px сдвинется вниз на 350px и в лево на 200px , относительно того места, в котором он появится по умолчанию. Следующее важное свойство: margin – величина отступа от нашего блока до соседних объектов с четырех сторон. Значения: margin-top – Задает величину верхнего отступа объекта margin-left – Задает величину левого отступа объекта margin-right – Задает величину правого отступа объекта margin-bottom – Задает величину нижнего отступа объекта Пример: Авторские права © 2011 Вильчевский А. В. 49 А. В. Вильчевский, г. Красноярск, 2011г. view sourceprint? 1. 2.Любое содержимое блока!!! Мы создали блок с отступами вокруг него по 30px от всех его сторон. Над чем хотелось бы остановиться еще: padding – свойство задает величину пространтства, вставляемого между объектом и его границами. Значения: padding-bottom – Задает величину пространтства, вставляемого между объектом его нижней границей. padding-left – Задает величину пространтства, вставляемого между объектом его левой границей. padding-right - Задает величину пространтства, вставляемого между объектом его правой границей. padding-top - Задает величину пространтства, вставляемого между объектом его верхней границей. Пример: view sourceprint? 1. 2.Любое содержимое блока!!! Мы создали блок с отступами по 30px от содержимого до всех его сторон. И рассмотрим пример с использованием тэга <span>: Допустим, у нас есть конструкция вида: Любой текст ! Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тэг <span> и применим соответствующие стили. Авторские права © 2011 Вильчевский А. В. 50 А. В. Вильчевский, г. Красноярск, 2011г. view sourceprint? 1.Любой <span style="background-color:#FFFF66; color:#000066;">текст! 2. Любой текст! Еще раз повторюсь, что все рассмотренные стили применимы не только к рассмотренным двум тэгам, но и ко всем нами известным тэгам! Ну вот и кончилась скучная, но нужная книга. В заключение хочу познакомить Вас с автором этих выпусков – Андреем Бернацким. Подробнее: О нем и о других ВебГуру Рунета можно почитать и познакомиться с их E-book и видео-курсами в Проекте RusGuru www.rusgu.ru на странице Гуру. В файловом архиве Проекта более 2000Мб различной информации для бесплатного скачивания: программы, софт, самоучители, E-book и др. Готовится к публикации моя новая E-book: «Дорога в онлайн бизнес». Это книга о реальных способах заработка в сети, написанная на основе личного пятилетнего опыта. Заглядывайте в Проект и файловый архив, там всегда появляется что-то новенькое. Подписывайтесь на Рассылку Новостей Проекта и всегда будете в курсе перемен. Удачи! А. Вильчевский www.rusgu.ru Авторские права © 2011 Вильчевский А. В. HTML Read more Workshop HTML Read more Самоучитель HTML Read more Самоучитель HTML Read more HTML lernen Read more تعلم html Read more Теги HTML Read more HTML Guide Read more HTML. Самоучитель Read more One Second After (html) Read more Справочник тегов HTML Read more HTML Professional Projects Read more М.Дрязгов. Сибирская баня (html) Read more Especificación HTML 4.01 Read more М.Виноградов. Садовый дом (html) Read more Введение в HTML Read more Web-конструирование на HTML Read more HTML: The Definitive Guide Read more HTML: The Definitive Guide Read more HTML Professional Projects Read more HTML Professional Projects Read more Спецификация HTML 4.0 Read more HTML с самого начала Read more HTML с самого начала Read more Alexroma. HTML (сборник) Read more The Ultimate HTML Reference Read more The HTML Pocket Guide Read more HTML: the complete reference Read more The HTML Pocket Guide Read more HTML & XHTML DeMYSTiFieD Read more Recommend Documents HTML 2 3 ББК 32.988.02-18 УДК 004.738.5 К63 К63 Н. Комолова, Е. Яковлева HTML: Самоучитель. 2-е изд. — СПб.: Питер, 20... Workshop HTML workshop HTML 4 Tobias Hauser Marianne Pentenrieder Christian Wenz workshop HTML 4 An imprint of Pearson Education ... Самоучитель HTML Файл взят с сайта - http://www.natahaus.ru/ где есть ещё множество интересных и редких книг, программ и прочих вещей. Да... Самоучитель HTML ... HTML lernen Die Lernen-Reihe In der Lernen-Reihe des Addison-Wesley Verlages sind die folgenden Titel bereits erschienen bzw. in Vo... تعلم html www.dinaro.com/vb3 1 www.dinaro.com/vb3  :HTML ‫ﻣﻘﺪﻣﺔ ﻓﻲ ﻟﻐﺔ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬ :‫ﺍﻟﺪ... Теги HTML HTML Guide HTML. Самоучитель Êðàòêîå ñîäåðæàíèå Áëàãîäàðíîñòè . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Ââåäåíèå . . . . . . . ... One Second After (html) × Report "Азы HTML" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Login with Facebook Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close