- •Государственная морская академия имени адмирала с. О. Макарова
- •Д. Н. Фомин основы разработки веб-страниц
- •Введение
- •1. Общие вопросы разработки веб-страниц
- •1.1. Цели и задачи создания веб-страниц
- •1.2. Основные понятия и пояснения к ним
- •1.3. Основные элементы веб-страницы и файловая структура веб-сайта
- •1.4. Программное обеспечение рабочего места веб-мастера
- •1.4.1. Редактор html-страниц
- •1.4.2. Редакторы графики
- •1.4.3. Браузеры
- •1.4.4. Вспомогательные программы
- •2. Непосредственная работа с html-кодом
- •2.1. Структура html-документа
- •2.2. Основные тэги
- •2.2.1. Заголовки
- •2.2.2. Абзацы и переводы строки
- •2.2.4. Вставка изображений на веб-страницу
- •2.2.5. Маркированные и нумерованные списки
- •2.2.6. Изменение шрифта
- •2.2.7. Горизонтальная линия
- •2.2.8. Комментарии
- •2.3. Вставка специальных символов в html-документ
- •2.4. Таблицы в html
- •2.4.1. Тэги для таблиц, строк и ячеек
- •2.4.2. Таблицы с объединёнными ячейками
- •2.5. Каскадные таблицы стилей (css)
- •2.5.1. Вводные замечания о таблицах стилей
- •2.5.2. Синтаксис таблиц стилей
- •2.5.3. Наследование
- •2.5.4. Контекстные селекторы
- •2.5.5. Способы включения стилевых таблиц в html-документ
- •2.5.6. Приоритет применения таблиц стилей
- •2.5.7. Классы в стилевых таблицах
- •2.5.8. Комментарии в стилевых таблицах
- •2.5.9. Оформление гипертекстовых ссылок
- •2.6. Свободно позиционируемые элементы
- •3. Визуальный редактор веб-страниц Microsoft FrontPage
- •3.1. Интерфейс Microsoft FrontPage
- •3.2. Ввод и редактирование текста в Microsoft FrontPage
- •3.2.1. Базовые средства редактирования
- •3.2.2. Средства отмены и возврата действий
- •3.2.3. Ввод символа, отсутствующего на клавиатуре
- •3.3. Форматирование текста
- •3.3.1. Базовые средства форматирования
- •3.3.2. Списки
- •3.3.3. Вставка изображений
- •3.4. Создание таблиц в Microsoft FrontPage
- •3.4.1. Создание таблицы при помощи панели инструментов.
- •3.5. Каскадные таблицы стилей в Microsoft FrontPage
- •3.5.1. Создание внешней стилевой таблицы
- •3.5.2. Создание внутренней стилевой таблицы
- •3.5.3. Определение стиля внутри тэга
- •3.5.4. Создание пользовательских классов
- •4. Язык сценариев JavaScript
- •4.1. Простейшие сценарии JavaScript
- •4.2. Типы данных в JavaScript
- •4.2.1. Строки
- •4.2.2. Числа
- •4.2.3. Булевы значения
- •4.2.4. Особые типы данных
- •4.3. Переменные в JavaScript
- •4.3.1. Простые переменные
- •4.3.2. Переменные-массивы
- •4.4. Выражения, условия и операции
- •4.4.1. Арифметические операции
- •4.4.2. Операции сравнения
- •4.4.3. Логические операции
- •4.4.4. Операция присваивания
- •4.4.5. Прочие операции
- •4.5. Основные операторы JavaScript
- •4.5.1. Оператор ветвления if…else
- •4.5.2. Операторы цикла
- •4.5.3. Прочие операторы
- •4.6. Функции в JavaScript
- •4.6.1. Объявление и вызов функций
- •4.6.2. Вызов функций JavaScript по событию
- •4.6.3. Передача параметров в функцию и возврат значений из функции
- •4.7. Использование объектов в JavaScript
- •4.7.1. Общие понятия об объектах в JavaScript
- •4.7.2. Использование объекта Math
- •4.7.3. Использование объекта Date
- •4.7.4. Использование объекта String
- •4.8. Использование объектной модели документа
- •4.8.1. Использование объекта document
- •4.8.2. Строки ввода и кнопки
- •4.9. Способы подключения сценария к веб-странице
- •4.9.1. Размещение сценария в отдельном файле
- •4.9.2. Размещение сценария внутри тэга
- •4.10. Примеры анимации на веб-страницах
- •4.10.1. Часы на веб-странице
- •4.10.2. Обратный счётчик
- •4.10.3. Движущийся текст
- •4.10.4. Изменение цвета текста под указателем мыши
- •4.10.5. Смена изображения под указателем мыши
- •4.10.6. Переливающийся текст
- •Литература
- •Приложение 1.
- •Приложение 2. Часто используемые символьные подстановки
- •Приложение 3. Часто используемые свойства стилевых таблиц
2.2.7. Горизонтальная линия
С помощью тэга <hr> можно вставить в документ горизонтальную линию, обычно для того, чтобы отделить одну часть текста от другой. Этот тэг – одиночный (не требует закрывающего).
По умолчанию линия занимает всю ширину окна браузера и имеет толщину в 2 пиксела (один ряд пикселов светло-серый, другой тёмно-серый, так что создаётся иллюзия объёма). Это поведение можно изменить следующими атрибутами:
width – длина линии в пикселах или в процентах от ширины окна браузера, по умолчанию 100%;
size – толщина линии в пикселах;
color – цвет линии (название или шестнадцатеричное значение);
align – выравнивание. Возможные значения: left, center, right. Если линия занимает не всю ширину окна браузера, то она по умолчанию выравнивается по центру окна. Указав атрибут align, можно прижать её к левому или правому краю.
Пример. Тэг <hr width="60" size="4" color="purple" align="left"> вставляет в текст фиолетовую горизонтальную линию длиной 60 пикселов и толщиной 4 пиксела, прижатую к левому краю окна браузера.
2.2.8. Комментарии
Любая последовательность, которая начинается с сочетания символов <!-- и оканчивается символами -->, является комментарием, т.е. игнорируется браузером. Комментарии можно использовать для временного исключения из HTML-страницы некоторых её фрагментов без их физического уничтожения.
Пример. Пусть в редакторе набран следующий HTML-код:
<p>Это <!-- очень простой --> пример использования комментариев в HTML.</p>
В браузере это отобразится так:
Это пример использования комментариев в HTML.
Вложенные комментарии не допускаются. Пример неправильного использования комментариев на HTML-странице:
<!-- Это <!-- вложенные --> комментарии -->
2.3. Вставка специальных символов в html-документ
Как было отмечено ранее, угловые скобки <…> (знаки «меньше» и «больше») используются в HTML как ограничители для тэгов. Однако может понадобиться включение самих символов “<” и “>” в текст веб‑страницы (например, если страница посвящена изучению языка HTML). Для этого предусмотрены специальные символьные подстановки – последовательности, начинающиеся с символа “&” (амперсанд) и заканчивающиеся точкой с запятой (;). Так, символы “<” и “>” набираются как «<» и «>» соответственно (англ. less than – меньше; greater than – больше). Например, чтобы отобразить на странице фразу
Заголовки первого уровня заключаются в тэг <h1>,
необходимо ввести
Заголовки первого уровня заключаются в тэг <h1>.
На веб-странице можно поместить и некоторые специальные символы, которых нет на клавиатуре, например, знаки «меньше или равно» (≤) – «≤» (англ. less or equal), «больше или равно» (≥) – «≥» (англ. greater or equal). Можно вставить неразрывный пробел с помощью обозначения « » (англ. no break space), если вы не хотите, чтобы браузер перенёс строку по этому пробелу. (Обозначение неразрывного пробела может также использоваться для того, чтобы оставить между словами место больше одного пробела.) Для того, чтобы поместить на веб-странице сам знак амперсанда (&), необходимо ввести «&», чтобы браузер мог отличить его от начала символьной подстановки. Стандарт языка HTML также предусматривает для двойных прямых кавычек (") символьную подстановку «"», так как кавычки используются как ограничители значений атрибутов. На практике, современные браузеры различают символы кавычек, находящиеся внутри угловых скобок (где они ограничивают значения атрибутов) и вне их (где они используются просто как символ в тексте), и обязательного использования символьной подстановки «"» обычно не требуется. Часто используемые символьные подстановки приведены в прил. 2.
Любой символ можно ввести с помощью его кода в кодировке Unicode в виде следующего сочетания символов: «&#», затем код символа в десятичном виде (или в шестнадцатеричном – тогда перед ним ставится латинская буква «x»), затем «;». Например, если вы набираете текст на украинском языке на клавиатуре с русской раскладкой, то можете ввести слово «Україна» одним из следующих способов:
Україна
Україна,
поскольку код украинской буквы «ї» в Unicode равен 1111 (шестнадцатеричное 457). Конечно, для этого вам понадобятся символы “&”, “#”, “;” и цифры, но они как стандартные символы ASCII присутствуют на любой клавиатуре. Таблицы кодов символов в кодировке Unicode можно найти на сайте http://www.unicode.org.