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 (пример). Тэг определяет текст в заголовке окна браузера. (Тег закрывающийся).
Авторские права © 2011 Вильчевский А. В.
5
А. В. Вильчевский, г. Красноярск, 2011г.
Также в теге могут располагаться скрипты javascript или vbscript, заключенные в теги <script>….. И стили, заключенные в теги <style>….. На этом с тэгом пожалуй мы закончим. Далее у нас следует тэг . Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тэга есть набор параметров, которые мы рассмотрим, но использовать их не рекомендуется. Итак… bgcolor – устанавливает цвет фона документа. () background – указывает на url-адрес изображения – фона документа. text – устанавливает цвет текста документа. link – устанавливает цвет гиперссылок. vlink= – устанавливает цвет гиперссылок на которых вы уже побывали, используя значение. alink= – устанавливает цвет гиперссылок при нажатии. bgproperties=fixed – фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон – нет. Данный параметр поддерживается только Internet Explorer. Эти параметры можно объединять, например, на этой страничке используется .
Авторские права © 2011 Вильчевский А. В.
6
А. В. Вильчевский, г. Красноярск, 2011г. Давайте и наберем эту строку в нашем предыдущем примере. 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. 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.он мне и корму давать не хочет и выгнал меня из стойла" 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.
