- •Учебник html
- •Основы html
- •Что такое Internet
- •Что такое www
- •Что такое url
- •Что такое Web-браузер
- •Что такое гиперссылка
- •Что такое html
- •С помощью чего создаются Web-страницы
- •Обязательные тэги
- •Создание абзаца, символов пробела, заголовка
- •Создание заголовков
- •Добавление комментариев в html-код
- •Вставка спецсимволов
- •Предварительное форматирование текста
- •Выделение фрагментов текста
- •Выбор шрифта
- •Изменение размера шрифта
- •Выбор цвета шрифта
- •Изменение цвета фона
- •Поля страницы
- •Моноширинные шрифты
- •Блоки цитат
- •Нумерованный список
- •Маркированный список
- •Многоуровненвый список
- •Списки определений
- •Вставка изображения
- •Добавление фона
- •Обтекание графики текстом
- •Выравнивание текста
- •Пустая область вокруг изображения
- •Горизотнальная линейка
- •Списки с графическими маркерами
- •Преобразование формата изображения
- •Задание размеров изображения
- •Увеличение размеров изображения
- •Уменьшение изображения
- •Обрезка изображения
- •Уменьшение разрешения изображения
- •Уменьшение глубины цвета изображения
- •Прозрачность фона изображения
- •Чередующиеся изображения gif
- •Создание таблицы
- •Обрамление таблицы
- •Заголовок таблицы
- •Группирование столбцов
- •Группирование строк
- •Задание цвета элементов таблицы
- •Графический фон таблицы
- •Выравнивание данных в таблице
- •Изменение размеров таблицы
- •Слияние ячеек таблицы
- •Улучшение внешнего вида таблицы
- •Отображение границ таблицы
- •Перенос слов в ячейках таблицы
- •Вложенные таблицы
- •Обтекание таблицы текстом
- •Гиперссылка на другую страницу
- •Гиперссылка в пределах страницы
- •Почтовая гиперссылка
- •Открытие страниц в новом окне
- •Цвет текста гиперссылок
- •Порядок перехода по гиперссылкам
- •Создание фреймов
- •Достоинства и недостатки фреймов
- •Полосы прокрутки фреймов
- •Изменение границ фреймов
- •Плавающие фреймы
- •Что такое формы.
- •Создание бегущей строки
- •Размещение текста поверх изображения
- •Создание всплывающих подсказок
- •Создание водяного знака
- •Внешний лист стилей
- •Частное определение стилей
- •Атрибут id
- •Класс стилей
- •Форматирование произвольного фрагмента Вэб-страницы
- •Пустые области вокруг элементов Вэб-страницы
- •Обтекание текстом
- •Задание размеров
- •Способ воспроизведения элементов
- •Разрыв страницы
- •Относительное позиционирование
- •Абсолютное позиционирование
Полосы прокрутки фреймов
По умолчанию браузер отображает полосы прокрутки только в том случае, если данные не укладываются в размеры фрейма. Присвоив атрибуту SCROLLING значение yes/no, можно предписать браузеру всегда сохранять полосы прокрутки в скрытом состоянии, либо постоянно отображать их. Сокрытие полос прокрутки с одной стороны увеличивает размеры видимой области фрейма. С другой стороны - если данные не помещаются в окно, то они будут недоступны для пользователя.
Изменение границ фреймов
Для запрещения изменения границ фрейма применяется атрибут NORESIZE. Это удобно, если надо запретить пользователю модифицировать исходную компоновку страницы. По умолчанию пользователь может перемещать границы фрейма по своему желанию, задавая новые размеры объекта, чтобы лучше рассмотреть определенный фрагмент данных. Если фреймы лишены видимых границ, это автоматически влечет запрет на изменение их размеров. Атрибут BORDER тэга <FRAMESET> дает возможность изменять толщину линий, обрамляющих фрейм. По умолчанию браузер заключает фрейм в рамку, равной 6 пикселям и окрашивает его в серый цвет. Изменить цвет можно при помощи атрибута BORDERCOLOR. Для сокрытия границ фрейма служит атрибут FRAMEBORDER.
По умолчанию браузер отображает фреймы с полосой чистого пространства (полями) между текстом и границей фрейма равной 10 пикселям.
Атрибут MARGINWIDTH позволяет задавать ширину левого и правого поля.
Атрибут MARGINHEIGHT - высоту верхнего и нижнего поля.
Задавая величины полей, надо использовать оба атрибута, т.к. браузер может автоматически сократить размеры тех полей, которые вы не указали, до наименьшего значения.
Плавающие фреймы
Для создания плавающих фреймов служит тэг <IFRAME>. Плавающим называется фрейм, представляющий собой часть вэб-страницы и не требующий построения отдельной страницы с описанием фреймов. Атрибут NAME служит для задания имени плавающего фрейма, которое может затем быть использовано в определении гиперссылки с целью открытия в этом фрейме соответствующей страницы.
Атрибутами WIDTH HEIGHT можно задавать размеры плавающего фрейма, т.к. пользователь самостоятельно изменить их не может.
Плавающие фреймы в данное время поддерживаются только Microsoft IE.
Ниже, в качестве примера, приведен код страницы, которую можно посмотреть здесь.
<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<body>
<iframe src="lsn017.html" name="frame1"
width="350" height="300" align="left"></iframe>
<h1>Пример работы с фреймами</h1>
..
<h1>Пример работы с фреймами</h1>
</body>
</frameset>
</html>
Что такое формы.
Формы позволяют обеспечивать интерактивную связь сайта с пользователем.
Элементы форм (области редактирования текста, поля ввода, меню) позволяют посетителям вводить различную информацию и выбирать нужные опции.
При добавлении элемента формы надо указать его имя. Имена нужны только для различения элементов форм. Когда пользователь вводит данные, соответствующему элементу формы присваивается определенное значение. После щелчка на кнопке Submit (запрос) имя элемента и его значение отсылается на сервер.
Формы должны быть просты и удобны в работе. Желательно чтобы форма помещалась в пределах одного экрана. Для этого она должна содержать не более 30 текстовых строк по вертикали и 70 символов по горизонтали.
Новые элементы, добавляемые на форму, должны быть сгруппированы по их назначению. Элементы должны быть снабжены надписями, поясняющими, какого рода информация должна быть введена пользователем.
Если речь идет о полях редактирования или областях ввода многострочного текста, необходимо, чтобы размеры элементов соответствовали объему вводимой информации.
Очень полезно размещать рядом с элементом текст примера, который поможет пользователю правильно ввести требуемую информацию.
Когда сервер получает информацию о заполненной форме, он запускает на выполнение одну или несколько программ, которые называются CGI (Common Gateway Interface). Сценарий CGI определяет правила обработки данных. К примеру, он может отослать результаты заполнения формы на электронную почту или внести их в базу данных. Такие сценарии, как правило, создаются на языке Perl.
После успешной обработки полученных результатов сценарий CGI может отправить на компьютер пользователя квитанцию, которая воспроизводится в браузере в виде окна сообщения.
Обычно CGI-сценарии хранятся на сервере в папке cgi-bin. В Интернете существует масса готовых бесплатных сценариев, которые можно "прикрутить" к своему сайту.
Более подробно на формах сейчас остнанавливаться не будем, т.к. это вопрос для обсуждения с более опытными пользователями.
Что такое JavaScript
JavaScript это язык сценариев, позволяющих сделать Вэб-страницу интерактивной, т.е. "умеющей общаться" с пользователем. Собственно язык JavaScript здесь мы рассматривать не будем, а дадим лишь общее представление об этом мощном инструменте Вэб-дизайна.
Чтобы поместить в текст Вэб-страницы сценарий JavaScript, надо ввести дескриптор <SCRIPT>. Код JavaScript располагается между тэгами <SCRIPT> </SCRIPT>. Код HTML в этом месте размещать нельзя. Код можно размещать как в теле заголовка страницы (между тэгами <HEAD> </HEAD>), так и в теле страницы (между тэгами <BODY> </BODY>).
Сценарии JavaScript выполняются на компьютере пользователя (в отличие php-сценариев, которые выполняются на стороне сервера) и поэтому представляют некоторую опасность, связанную с возможным несанкционированным доступом к конфиденциальной информации. Например, при соответствующих настройках браузеры способны разрешать сценариям считывать файлы, в которых могут содержаться важные данные, например, пароли доступа. Поэтому в браузерах предусмотрена возможность отключения выполнения сценариев JavaScript. Это следует учитывать при разработке Вэб-страницы с использованием JavaScript.
Если предполагается использовать один и тот же сценарий на многих Вэб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода Вэб-страницы. В качестве расширения имени файла надо задавать .js.
Например, на этой странице используется сценарий JavaScript, который выводит текущую дату и время в окне браузера (слева вверху страницы). В нужное место страницы вставлен следующий код, который ссылается на соответствующий файл скрипта:
<script language=JavaScript src="../vnu_datestamp.js">
</script>
Маленькие секреты Web-дизайна
Создание бегущей строки
Размещение текста поверх изображения
Создание всплывающих подсказок
Создание водяного знака