- •А. П. Багаева разработка web-страниц
- •Университет имени академика м. Ф. Решетнева, 2012 © Багаева а. П., 2012 оглавление
- •5. Форматирование страницы с использованием
- •6. Использование формы для создания интерактивности
- •Предисловие
- •1. Первые шаги по созданию
- •1.1. Структура документа
- •Правила записи тегов
- •Параметры типа метаопределений name
- •Использование цветовых спецификаций при создании web-страницы
- •Способы задания цвета
- •1.2. Форматирование текста
- •Теги логического форматирования
- •Теги физического форматирования
- •1.3. Структурное форматирование
- •Теги структурного форматирования
- •1.4. Списки
- •Практическое задание создание web-страницы
- •2. Настройка страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Исходные данные для создания web-страницы
- •2. Делаем web-страницу интереснее
- •2.1. Гиперссылки
- •2.2. Графика и мультимедиа на web-странице
- •2.2.1. Вставка графики в html-документ
- •2.2.2. Встраивание мультимедийных файлов в html-документ
- •Практическое задание графика и гиперссылки на web-странице
- •1. Включение графики.
- •2. Создание гиперссылок.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •3. Основы построения таблиц
- •3.1. Создание и форматирование простой таблицы
- •3.2. Создание сложных таблиц
- •3.3. Вложенные таблицы
- •3.4. Разметка web-страницы при помощи таблицы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •4. Оформление страниц с помощью фреймов
- •4.1. Создание простых фреймов
- •4.2. Создание вложенных фреймов
- •4.3. Взаимодействие фреймов
- •4.4. Плавающие фреймы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •5. Форматирование страницы с использованием каскадных таблиц стилей
- •5.1. Формирование каскадных таблиц стилей
- •Селектор { Свойство: Значение; }
- •Единицы измерений значений свойств
- •5.2. Варианты использования css
- •5.3. Принцип наследования
- •5.4. Обзор свойств css
- •Свойства форматирования текста в css
- •Свойства структурного форматирования в css
- •5.5. Слои и позиционирование документов
- •Использование css при форматировании
- •1. Задание стиля для одного тега.
- •2. Задание стиля для одной web-страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •6. Использование формы для создания интерактивности на web-странице
- •6.1. Задание формы
- •6.2. Создание элементов управления
- •Теги и атрибуты для пользовательских форм
- •6.3. Комбинирование форм и таблиц
- •Практическое задание создание формы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Послесловие
- •Библиографический список
- •Багаева Анна Прокопьевна разработка web-страниц
- •660014, Г. Красноярск, просп. Им. Газ. «Красноярский рабочий», 31.
1.1. Структура документа
HTML-документ (программа) представляет собой последовательность блоков, которые содержат программный код.
В отличие от других языков программирования, в HTML команды носят название «теги» (от англ. Tag – отметка). Синтаксис записи <тег>.
Практически все теги, за исключением отдельно оговоренных случаев, – парные: открывающий тег <тег> и закрывающий </тег>.
<тег> обрабатываемое значение </тег>
HTML-документ в упрощенном виде представляет собой следующую схему (рис. 1.1).
HTML-документ
Заголовок документа
Внешний заголовок
Тело документа
Основной код
Рис. 1.1. Схема HTML-документа
HTML-документ – это команда, которая сообщает браузеру о том, что это HTML-документ и является тегом верхнего уровня.
<HTML> Содержимое документа </HTML>
Заголовок документа – это служебная информация, необходимая самому браузеру и сообщающая правила, по которым следует обрабатывать составляющий страницу код.
<HEAD> Содержимое заголовка </HEAD>
Внешний заголовок – название страницы при ее открытии, которая отображается в заголовке окна браузера.
<TITLE> Внешний заголовок </TITLE>
Тело документа – включает в себя весь основной код разметки страницы, который определяет отображение HTML-документа на экране монитора.
<BODY>
Здесь будет размещено содержимое страницы
</BODY>
Предусматривается вложение одного тега в другой.
<тег 1>
<тег2> обрабатываемое значение </тег 2>
</тег1>
Таким образом, структура всего HTML-документа примет вид, который показан ниже.
<HTML>
<HEAD>
<TITLE> Моя первая WEB-страница </TITLE>
</HEAD>
<BODY>
Здесь будет размещено содержимое страницы
</BODY>
</HTML>
Заметим, что писать каждый тег с новой строки или делать отступы совсем не обязательно, однако благодаря этому программа читается лучше.
И затем этот документ набирается в простом текстовом редакторе «Блокнот», сохраняется в файле с расширением .htm или .html на диске. Например, назначим имя файла page1.htm. Чтобы удалось назначить нужное расширение файла, выберите в диалоговом окне тип файла Все файлы (*.*) и введите в поле Имя файла придуманное вами имя файла с нужным расширением. Теперь необходимо раскрыть этот файл в браузере. Для этого выполните двойной щелчок левой кнопкой мыши на его имени или на его значке, и после запуска в браузере содержимое файла примет вид, представленный на рис. 1.2. В Windows все файлы с расширением .htm или .html открываются в окне браузера Internet Explorer, если не установлен другой браузер. Заметим на будущее: чтобы ваша страничка одинаково выглядела при загрузке во всех браузерах, необходимо ее просматривать хотя бы в трех наиболее популярных: Internet Explorer, Mozilla, Opera.
Если потребуется что-то изменить в HTML-коде, то, не выходя из окна браузера Internet Explorer, на панели инструментов выберите значок Страница и команду (опцию) Просмотр HTML-кода – откроется окно текстового редактора «Блокнот» с файлом вашей программы. Внесите необходимые изменения и сохраните файл под тем же именем. После этого в окне браузера выполните команду Обновить, нажав на кнопку с двумя стрелками . В результате загрузится измененный HTML-файл.
Рис. 1.2. Представление HTML-документа в браузере
Главная или стартовая страница должна иметь имя файла index.htm. Конечно, не обязательно, но считается хорошим тоном главную (или ту, которая должна отображаться первой) страницу назвать именно так. По умолчанию любой web-сервер страницу index.htm пытается выдать браузеру при обращении к нему (необязательно, потому что на любом web-сервере это настраивается). Все остальные страницы, к которым будет сделано обращение с этой страницы, могут иметь любые имена.
Весь HTML-документ строится из тегов.
Тег – это команда браузеру, которая может быть выполнена различным образом. Различия в выполнении зависят от тех атрибутов, которые заданы данному тегу. Существуют теги, которые могут иметь атрибуты, а могут их и не иметь.
Атрибут тега – это значение, которое браузер должен обрабатывать для конкретной директивы.
Так, например, тег <HTML> – не имеет атрибутов.
Синтаксис записи тега с атрибутами:
<тег имя_атрибута1="значение" имя_атрибута2="значение", ...>
например:
<TABLE BORDER="1" WIDTH="100">
где TABLE – это тег создания таблицы, BORDER="1" – атрибут, который задает рисование границы таблицы толщиной, заданной значением 1, WIDTH="100" – атрибут, который задает ширину таблицы значением 100.
Раньше значение атрибута требовалось заключать в кавычки, но теперь во многих случаях эти кавычки можно опускать без каких-либо последствий. В литературе по созданию web-страниц при задании значений атрибутам придерживаются кавычек. Поэтому и мы не будем отступать от этого правила.