- •Html: работа с базами данных в примерах
- •Пояснительная записка
- •Тематическое планирование
- •Текст пособия Базы данных
- •Назначение и функциональные возможности языка разметки гипертекста (html)
- •Структура html-документа
- •Форматирование текста
- •Управление цветом
- •Вставка рисунков, изображений, фотографий
- •Создание гиперссылок на html-документы
- •Html-формы
- •Основы Visual Basic Script (vbScript)
- •Ввод и вывод данных
- •Типы данных
- •Встроенные объекты
- •Основы создания сценариев на Visual Basic Script Расположение сценариев
- •Обработка событий
- •Объекты, управляемые сценариями
- •Создание массива
- •Плавающие фреймы
- •Проектирование баз данных с помощью html
- •Первая страница html-документа
- •Создание таблицы «Администрация и Преподаватели»
- •Создание таблицы «Вожатые»
- •Создание формы «Полный список слушателей». Создание запросов по поиску информации в базе данных
- •Создание таблицы «Читаемые курсы», содержащей гиперссылки на другие html-документы
- •Сортировка данных в таблице. Расположение списка фамилий слушателей в алфавитном порядке
Структура html-документа
В основе любого HTML-документа лежит понятие тега (tag).
Тег – это начальный или конечный маркер элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга.
В тексте HTML-документа теги заключаются в угловые скобки: <тег>. Теги используются для разметки документа, форматирования текста и ряда других функций, но никогда не выводятся браузером на экран. Обычно теги представляют собой пары. В этом случае различают открывающий и закрывающий теги, между которыми может располагаться любой текст, в том числе и любое количество вложенных тегов. Завершающий тег отличается от открывающего наличием слэша (/) перед именем тега:
<тег> текст </тег>.
Структура любого HTML-документа выглядит следующим образом:
<HTML>
<HEAD>
<TITLE> заголовок и описание документа </TITLE>
</HEAD>
<BODY>
Хабаровская краевая летняя физико-математическая школа
</BODY>
</HTML>
<HTML> </HTML>
Начинает и заканчивает любой HTML-документ.
<HEAD> </HEAD>
Область заголовка HTML-документа, служит для формирования структуры документа. Этот элемент включает TITLE и допускает вложение элементов SCRIPT, STYLE.
<TITLE> </TITLE>
Элемент для размещения заголовка в окне браузера.
<BODY> </BODY>
Этот элемент заключает в себе гипертекст, который определяет HTML-документ. Внутри элемента BODY можно использовать все элементы, предназначенные для форматирования HTML-документа. Внутри начального тега элемента BODY можно расположить ряд атрибутов (свойств).
Рассмотрим некоторые из них:
Установка «обоев»: <body background=”путь к файлу обоев”>,
Установка цвета фона: <body bgcolor=”цвет”>,
Установка цвета выводимых символов: <body text=”цвет”>.
Пример: <body bgcolor=”red” text=”yellow”>ТЕКСТ</body>. Данный пример показывает, что в основной области HTML-документа будет располагаться слово ТЕКСТ на красном фоне желтыми буквами.
Задание по созданию простейшего HTML-документа:
-
В программе Блокнот создать простейшую структуру HTML-документа.
-
Придумать и записать заголовок страницы внутри элемента TITLE.
-
Записать любой текст внутри элемента BODY.
-
Сохранить файл с расширением .html (например, первая страница.html).
-
Запустить браузер Internet Explorer и просмотреть HTML-документ.
-
Вернуться в Блокнот. Изменить внутреннее наполнение, используя элементы форматирования текста.
Форматирование текста
Существуют специальные теги, позволяющие форматировать текст.
<P> текст </P>
Используются для обозначения начала и конца абзаца. Тег начала абзаца может иметь команду форматирования текста внутри абзаца, т.е. указания по выравниванию текста по центру, по левому или по правому краю:
аlign=”center”
аlign=”left”
аlign=”right”
Для этого же эффекта могут использоваться парные теги:
<LEFT> текст </LEFT>
<CENTER> текст </CENTER>
Существуют теги для оформления заголовков. Заголовок первого уровня выводится самым крупным шрифтом. Каждый следующий заголовок будет выводиться шрифтом меньшего размера.
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
Существует возможность изменения начертания символов: полужирный шрифт (bold), курсив (italic), подчеркивание (underline):
<B> жирный шрифт </B>
<I> курсив </I>
<U> подчеркивание </U>
<FONT > текст </FONT>
Позволяет задавать шрифт, размер и цвет символов выводимого текста, заключенного между тегами.
Для установки шрифта используется атрибут face=”шрифт”, который ставится в открывающем теге элемента FONT.
<FONT face=”Antiqua, Arial, Times”>
Для изменения размера выводимых символов можно установить в открывающем теге элемента FONT атрибут size=n, где n – число пунктов, на которое вы хотите увеличить (+n) или уменьшить (-n) размер шрифта.
Для установки цвета выводимых символов можно добавить в открывающем теге элемента FONT атрибут color=”цвет”.
Например:
<FONT face=”Arial, Times” size=+2 color=”red”> текст </FONT>
Полезные замечания: Чтобы вставить пустую строку, используется одиночный тег <BR>. Чтобы сделать отступ от края экрана или вставить дополнительные пробелы, используется запись . Для создания горизонтальной линии (разделителя) внутри документа используется тег <hr>.