- •Основы html
- •Инструментарий
- •Теги (дескрипторы) в html
- •Структура html-документа
- •Атрибуты
- •Создание Web-страниц
- •Определение цветов
- •Расположение рисунков на странице.
- •Лабораторная работа №1 Знакомство с таблицами
- •Формирование таблиц
- •Лабораторная работа №2 Форматирование текста в html-документах
- •Заголовки
- •Текстовые абзацы
- •Принудительный разрыв строки
- •Изменение шрифта
- •Начертания шрифтов
- •Нижние и верхние индексы
- •Горизонтальные линии на html – странице
- •Бегущая строка
- •Маркированные и нумерованные списки
- •Лабораторная работа №3 Организация гиперссылок
- •Элементы привязки
- •Адрес гиперссылки
- •Внутренние и внешние гиперссылки
- •Задание цвета гиперссылок
- •Лабораторная работа №4 Создание фреймовой структуры html-страниц
- •Что такое фрейм?
- •Организация фреймов
- •Лабораторная работа №5 Использование иерархических стилевых спецификаций (css)
- •Применение css
- •Внешняя стилевая спецификация
- •Внедренные стилевые таблицы
- •Внутренние стили
- •Классы в стилевых спецификациях
- •Определение стиля для специфического элемента
- •Работа со специальными элементами
- •Лабораторная работа №6 Организация форм
- •Создание формы
- •Описание элементов формы
- •Лабораторная работа №7 Создание клиентских сценариев
- •Размещение сценария
- •Выполнение сценария
- •Функции JavaScript
- •Пример проверки заполнения обязательных текстовых полей
- •Пример обработки кнопок с зависимой фиксацией (radio)
- •Пример для элементов select (option)
Разработка Web-приложений
Учебное пособие
Основы html
HTML представляет собой набор команд, интерпретируемых броузером при загрузке документа и перед показом его пользователю. HTML не привязан ни к одной архитектуре ПК или операционной системе. Электронные документы на HTML могут быть созданы и просмотрены под управлением любой операционной системы: Windows, DOS, UNIX и т. д.
Основное достоинство языка HTML - наличие механизма гиперссылок. Это значительно облегчает задачу поиска нужной информации в Internet.
Гиперссылка - это специальным образом описанный на языке HTML фрагмент текста или изображение.
При использовании гиперссылок у пользователя отпадает необходимость знать адрес Internet и имя файла. Достаточно просто щелкнуть по нужной ссылке, чтобы связаться с любым файлом, опубликованным в Internet.
HTML стандартизирован, т.е. следуя стандарту при создании документа, можно быть уверенным, что он будет просмотрен с помощью любого броузера. Это и обусловило популярность HTML и рост Всемирной паутины.
Инструментарий
Для того чтобы создать Web-страницу, нам понадобится некоторый инструментарий.
Существует множество специализированных визуальных редакторов Web-страниц. Они значительно облегчают труд программиста. Здесь мы их рассматривать не будем, поскольку программный код, созданный своими руками, поверьте, принесет Вам большое моральное удовлетворение.
Нашим инструментом станет простейший текстовый редактор Блокнот. В этой программе есть все, что нам нужно для обучения – возможность создания и редактирования самых обычных текстовых файлов. Позже, когда Вы почувствуете себя профессионалом, какой-либо из визуальных редакторов органично впишется в Ваш творческий процесс.
Кроме текстового редактора нам еще понадобится броузер.
Теги (дескрипторы) в html
Файлы HTML – текстовые, имеют расширение *.htm или *.html.
Кроме обычного текста HTML-файл содержит лишь один тип управляющих конструкций, называемых тегами (tags). Теги управляют броузером при отображении Web-страницы.
Все теги, для того, чтобы отделить их от содержимого страницы, заключены в угловые скобки < >.
Когда броузер загружает HTML-страницу и встречает в тексте тег, он выполняет действия, связанные с этим тегом. Когда HTML-документ загружен в текстовый редактор, то на экране представляется исходный текст документа. Если этот же документ загружен в броузер, то на экране - отформатированная Web -страница.
Теги определяют, какие параметры имеет данный текст или графика: размер, начертание шрифта, мерцание, цвет. Теги также определяют расположение объектов на странице. Теги обычно парные, заключительный тег выглядит так же как и начальный, но со слешем (/), предшествующим имени тега.
Например:
<head>
<title>Первые шаги</title>
</head>
В примере тег <HEAD> информирует броузер о начале заголовочной части. Заключительный тег </HEAD> говорит о том, что заголовочная часть завершена.
Парные теги должны вкладываться друг в друга без пересечений, т.е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А.
Структура html-документа
<html>
<head>
<title>Мой первый шаг</title>
</head>
<body>
Здравствуйте, это моя первая страница.
</body>
</html>
Весь HTML-документ заключен между парным тегом <HTML> и </HTML>. Это обязательный тег.
Между тегами <HEAD> и </HEAD> содержится заголовочная часть. В нее входит конструкция <TITLE> и </TITLE>, используемая для присвоения имени документу. Это название при загрузке документа появляется в строке заголовка броузера и не имеет ничего общего с именем файла или документа, поэтому является более информативным. Заголовок должен быть лаконичным и занимать одну строку, например:
<title>Выпуск ФИ РГППУ 2003 года</title>.
Заголовок документа - необязательный элемент. Задача заголовка ‑ предоставить информацию приложению, которое интерпретирует документ (броузеру). За исключением тега <TITLE> элементы, расположенные внутри <HEAD>, не видны читателю страницы. В элементе <HEAD> содержатся следующие сведения: название документа, определение связей между различными документами и метод пересылки специальных сообщений определенному броузеру или другой программе.
Все тело страницы с графикой, текстом и гиперссылками на другие ресурсы Internet (т.е. содержательная часть) находится между тегами <BODY> и </BODY>.