Основы HTML

Содержание

Введение
Введение в HTML
Структура HTML-документа Комментарии
Базовые теги форматирования
Списки
Гиперссылки Web-страниц
Адрес ссылки (URL)
Ссылки на места внутри документа
Отправка письма
Атрибут TITLE
Атрибут TARGET
Некоторые типовые ошибки гиперссылок
Бегущая строка
Требования к изображениям для Web-страниц
Карты изображений
Табличное оформление Web-страниц, Слои
Кодовая таблица цветов
Фреймы
Слои
Хостинг
Набор специальных символов на Web-страницах
Формы Web-страниц
Meta-теги
Язык JavaScript
Основы CSS
Требования к разработке сайта (самостоятельная работа): 8 класс, 9 класс ВХК РАН
Примерная тематика вопросов итоговой к/р

Введение

Вы «сдуру» решили создать свой сайт или заняться редактированием чего-то готового. Готовьтесь к целому потоку проблем. Этот раздел направлен на решение части из них.

Введение в HTML

HTML — аббревиатура от HyperText Markup Language (язык гипертекстовой разметки). Является одним из простейших, но наиболее распространенных примеров языка теговой разметки. HTML-файлы относятся к категории текстовых с абсолютно принципиальным параметром кодировки текста. Настоятельно рекомендую использовать UTF-8 (а не windows-1251) с обязательным указанием соответствующего мeтa-тега кодировки.

Тегом (англ. tag) называют специальные маркеры, указывающие программе, что заключенную между открывающим и закрывающим тегами информацию нужно обрабатывать (интерпретировать) и/или выводить на экран особым образом.

Внимание! При изложении материала по HTML, большинство тегов записаны заглавными буквами. Вместе с тем регистр не играет никакой роли!

Среди тегов можно выделить:


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Структура HTML-документа

HTML-документ начинается и заканчивается тегом HTML, указывающим браузеру на свое содержание. Далее, весь документ делится на две части: заголовок и тело, выделяемые парными тегами <HEAD></HEAD>  и <BODY></BODY> соответственно.

Заголовок документа может не содержать ничего, но обычно туда включается как минимум тег <TITLE></TITLE>, задающий документу название, выводимое в окне браузера. Кроме того, там может размещаться множество мета-тегов (<META>), атрибуты которых дают браузеру информацию о документе. Это — кодовая страница, описание, ключевые слова, дата изменения, переадресация на другую страницу и многое другое. В заголовок могут также вставляться скрипты и стилевые таблицы.

Пример простейшей структуры HTML-документа:

<HTML>
	<HEAD>
		<TITLE>Это заголовок окна</TITLE>
	</HEAD>
	<BODY>
		Здесь будет размещено все, что нужно отобразить на экране.
	</BODY>
</HTML>

Тег <BODY> может содержать довольно много атрибутов.

Комментарии

Начать обсуждение тегов хотелось бы с одного из наиболее важных на практике, как для начинающих, так и для опытных дизайнеров тега — комментария.

В чем же заключается его важность? Дело в том, что нередко возникает необходимость скрыть от браузера фрагмент документа. Зачем?

Синтаксис непарного тега довольно прост:

<!--...-->

Все, что мы вставим на место многоточия, браузер не будет пытаться вывести на экран.

Важно, что комментарий не может быть вложен в другой комментарий, так как закрывающая часть (-->) закрывает комментирование как понятие, и всё, что идет после него, появится на экране.

Базовые теги форматирования и их атрибуты

Наиболее важная информация на Web-страницах представлена в виде текста. В связи с этим теги форматирования текста играют особую роль.

Разбивка на абзацы

Эта процедура производится парным тегом <P></P>. Нужно отметить, что несмотря на спецификацию, возможно использование только одного из тегов. В этом случае открывающий тег задаст начало абзаца, который сам закончится, когда встретятся такие объекты, как заголовок, список или таблица. Закрывающий же тег показывает, что последующие символы должны восприниматься как новый абзац.
Стандартно, по умолчанию абзацы отделяются друг от друга пустой строкой и выравниваются влево.

Выравнивание абзаца можно изменить, воспользовавшись атрибутом ALIGN.
ТегРезультат
<P ALIGN="LEFT"> (значение по умолчанию) Образец выравнивания текста Образец выравнивания текста
<P ALIGN="RIGHT">

Образец выравнивания текста Образец выравнивания текста

<P ALIGN="CENTER">

Образец выравнивания текста
Образец выравнивания текста

<P ALIGN="JUSTIFY">

Образец выравнивания текста Образец выравнивания текста

Выравнивание по формату значительно привычнее для русскоязычных текстов, но, из-за отсутствия возможности автоматической расстановки переносов, такой документ может выглядеть довольно неряшливо.

Частичное решение ситуации может быть получено вставкой символов скрытых переносов: «&shy;». Они будут появляться только когда потребуется перенести слово в этом месте. Вместе с тем их массовая расстановка слишком трудоемка.

Перевод строки

В любом месте текст может быть прерван и принудительно начат с новой строки с помощью тега <br>, поставленного в нужном месте.

Заголовки

Задаются парными тегами <H#> и </H#>, где # — номер уровня заголовка от 1 до 6:

<h1>Текст заголовка первого уровня</h1>

При использовании заголовков в тех случаях, когда их внешний вид не задан принудительно, следует быть аккуратным. Браузер пользователя отобразит их в соответствии со своими настройками.

Горизонтальная линия

Выводится тегом <HR> и позволяет очень наглядно отделить части текста.
Может содержать атрибуты:

Тег <pre>

Данный парный тег ведет свое название от английского preformated (предварительно отформатированный) и позволяет отобразить на экране текст так, как он был сделан с учетом пробелов и табуляции. Внутри можно использовать теги форматирования символов, но это нарушает внешний вид.

В связи с важностью точного положения символов, для него часто используется моноширинный шрифт. Тегом <pre> очень часто оформляют стихи или исходный код для языков программирования.

<pre>
	Табулятор перед текстом
  Два пробела в начале     и еще пять — в середине
    Четыре пробела в начале
</pre>

Логическое форматирование

РАЗЪЯСНЕНИЯ БУДУТ ПОЗДНЕЕ на занятии.

Форматирование символов

Начертание и размер

Все теги, связанные с начертанием, представлены обязательной к использованию парой, в которую заключается изменяемый текст.

По правилам, если текст имеет несколько начертаний, то теги разного назначения не должны перекрещиваться:
НЕПРАВИЛЬНО: <B><I>Полужирный курсив</B></I>;
ПРАВИЛЬНО: <B><I>Полужирный курсив</I></B>
То есть, если открывающий тег стоит первым, то закрывающий должен быть последним. В нашем же неправильном примере закрывающий тег полужирного начертания оказался между тегами курсива.

Представителями начертаний являются теги:

Положение относительно строки

Чрезвычайно важные теги для оформления математических, химических, физических текстов, а также в большинстве случаев оформления научных документов. Представлены двумя вариантами:

Включение тегов повторно внутрь тега создает индекс индекса: x10100, x102.

Списки

Списки могут быть трех основных типов: маркированные, нумерованные и списки определений. Маркированные и нумерованные списки создаются по одинаковой схеме. Создается контейнер списка парой тегов <ul></ul> (Unordered List) и <ol></ol> (Ordered List), соответственно. Далее, каждый пункт списка, находящийся внутри этого контейнера, отделяется парой тегов <li></li>.

Маркированные списки

Пример:

<ul>
	<li>Пункт 1.</li>
	<li>Пункт 2.
	<li>Пункт 3.</li>
</ul>

дает нам приведенный ниже результат (обратите внимание, что тег второй строки не закрыт, но отображается нормально).

Атрибуты маркированного списка

Нумерованные списки

Списки определений

Особый вид списка, оформляемый «флажком», то есть когда весь текст кроме первой строки сдвинут вправо. Контейнер списка описывается тегом <dl></dl>, строки терминов — <dt></dt> и строки определений — <dd></dd>

Гиперссылки Web-страниц

Гиперссылка — объект на Web-странице, обеспечивающий переход к другим документам или местам текущего документа при щелчке на нем левой клавишей мыши. Документом может быть файл любого формата, расположенный как в Интернете, так и в Интранете или на локальном компьютере. В тех случаях, когда при создании гиперссылки использован параметр onClick, нажатие может приводить к запуску программы на одном из языков программирования, используемых для протокола HTTP, например, JavaScript, VBScript или PHP.

Варианты гиперссылок и структура тегов

Для отображения гиперссылки используется парный тег <A></A>. Закрывающий тег является обязательным. В зависимости от назначения, открывающий тег будет содержать один из обязательных атрибутов.

Ссылка на другой документ

Наиболее распространенным вариантом использования является ссылка на другой документ. Она имеет следующий синтаксис:

<A HREF="URL">Подчеркнутый текст ссылки</A>

Любой текст, находящийся между тегами, отображается Web-браузером специальным образом. По умолчанию он выделяется синим цветом с подчеркиванием. Текст, обозначающий URL, не отображается браузером, а используется только как адрес для выполнения перехода при активизации ссылки (обычно при щелчке мыши). Его можно увидеть в строке состояния, если навести курсор мыши на ссылку.

Адрес ссылки (URL)

Под URL (Uniform Resource Locator) подразумевается адрес, который однозначно указывает, на что производится переход. Так как он представляет собой текстовую строку, URL обязательно приводится в кавычках. Все, что располагается между открывающим и закрывающим тегом, будет выводимой на экран гиперссылкой. По спецификации HTML 4.0, в литературе может использоваться термин URI (Uniform Resource Identifier). Не следует забывать, что значительная часть Интернет-серверов рассматривает имена файлов и папок с учетом регистра. Таким образом, для того, чтобы избежать распространенной ошибки с неработающей ссылкой, нужно тщательно следить за регистром набираемых символов.

Адрес может быть двух видов: абсолютным и относительным.

Абсолютный адрес должен состоять из нескольких обязательных частей, которые можно обозначить схематично:

method://ServerName[:port]/PathName#anchor

Разберем отдельные части адреса.

Относительный адрес следует предпочесть для всех случаев, когда ссылка указывается на тот же ресурс, то есть файлы размещаются в той же папке или ее родительских либо дочерних папках.

Преимущество такого подхода очевидно. Где бы мы не разместили свои страницы (на локальном компьютере или в сети), все гиперссылки будут работать правильно без каких-либо исправлений.

Существует два способа задания относительной ссылки.

В первом случае, в области заголовка (HEAD) документа приводится тег BASE, относительно которого и будут просчитываться все ссылки. Например,

<BASE href="http://www.microsoft.com/">

Теперь все ссылки, не имеющие в адресе "http://", будут искаться на сервере www.microsoft.com.

Во втором случае, размещение по умолчанию оценивается относительно текущего документа.
Для того, чтобы сделать ссылку на файл в текущей папке (Файл⇒FileName), потребуется создать ссылку вида

<A HREF="FileName">Текст ссылки</A>,

где FileName — имя файла с расширением, но без каких бы то ни было данных о пути доступа к нему.

Для ссылок между папками построим схему размещения файлов, когда в корневом каталоге находится файл FileName и две папки Sub1 и Sub2, содержащие соответственно файлы FileName1 и FileName2:

[Структура папок]

Если файл находится в подпапке Sub1, то из текущего места (Root) должна быть ссылка

<A HREF="Sub1/FileName1">Переход FileName⇒FileName1</A>.

То есть мы даем команду опуститься в папку Sub1 и обратиться в ней к файлу FileName1.
Для ссылки из этого файла (FileName1) на предыдущий, нам потребуется, наоборот, подняться на один уровень выше (../), и адрес приобретет следующий вид:

<A HREF="../FileName">Переход FileName1⇒FileName</A>.

Наконец, ссылка между папками Sub1 и Sub2: из Sub1 нужно подняться в Root (../), а затем спуститься в Sub2:

<A HREF="../Sub2/FileName2">Переход FileName1⇒FileName2</A>.

В большинстве случаев забывают о существовании еще одной ссылки:


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Ссылки на места внутри документа

Кроме ссылок на другие документы, нередко бывает полезно создавать ссылки на разные части текущего документа. В качестве классического примера можно привести содержание, которое можно быстро просмотреть, в отличие от длинного документа.

Чтобы такая ссылка заработала, нужно в точке назначения создать метку (её еще называют маркером, указателем или якорем [от английского anchor]). Для этого используют все тот же тег гиперссылки, но с атрибутом NAME:

<A NAME="part2"></A>.

В приведенном примере указателю присвоено имя «part2». Чтобы попасть в это место, достаточно создать гиперссылку следующего вида:

<A HREF="#part2">Переход на метку «part2»</A>.

Обратите внимание, что перед именем стоит решетка (диез), что дает команду браузеру искать в документе метку с таким названием.

После перехода, строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела), будет размещена на первой строке окна браузера (если данная строка ещё не присутствует на экране).

При необходимости сослаться на метку другого документа, в конец его URL добавляется имя метки после решетки. Например,

<A HREF="index.html#part2">Переход на метку «part2» в файле index.html</A>.

Отправка электронной почты (mailto:)

При исполнении данной инструкции откроется пользовательское почтовое приложение по умолчанию, в котором будет создано письмо с уже указанной частью реквизитов.

<A HREF="mailto:Ящик@сервер.ru">Текст, который увидит пользователь</A>.

...

Атрибут TITLE гиперссылки


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Атрибут TARGET гиперссылки


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Некоторые типовые ошибки для гиперссылок


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Требования к изображениям для Web-страниц

Стандартными форматами файлов для Интернета являются JPEG (JPG), GIF и PNG. Именно они выбраны в связи с высокой степенью сжатия изображений. Вместе с тем, каждый из форматов имеет свои особенности, достоинства и недостатки, что и обусловливает сферу их применения.

Формат GIF


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Формат GIF незаменим для изображений с большими однородными областями, текстовых картинок, логотипов, иллюстраций с четкими краями, а также для анимированных рисунков.

Формат PNG

Portable Network Graphic (PNG) — формат растровых графических файлов, аналогичный формату GIF, но более современный (1995 г.) и не имеет лицензионных ограничений. Также, кроме прозрачности, поддерживает полупрозрачные пикселы за счет α-канала с 256 градациями серого.

Самый «молодой» формат из распространенных.

Формат JPEG

Самый распространенный за счет массового использования в цифровой фотографии.

Лучше всего JPEG подходит для хранения фотографий и других изображений, содержащих большое количество цветов, плавные цветовые переходы и мелкие разноцветные детали.

Ниже приведены примеры иллюстраций разного типа в разных форматах с размерами результирующих файлов. Для флага (120×80 пикселей) использованы чистые красный и синий цвета, файлы JPEG сохранены со средней степенью сжатия (6 из 12). Натюрморт имеет размеры 200×200 пикселей. Оба изображения восьмиразрядные, в цветовой схеме RGB.
JPEGGIFPNG
[JPEG] [GIF] [PNG]
12192 б260 б294 б
[JPEG] [GIF] [PNG]
47330 б20218 б85761 б


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Тег для вывода изображений

Для отображения растровой картинки на веб-странице используется непарный тег <IMG>. Он имеет единственный обязательный параметр src, содержащий адрес файла.

<img src="img/flag.jpg" alt="[Флаг]">

Если вывод изображения осуществляется между тегами гиперссылки (<a>), то изображение становится гиперссылкой.

Попробуйте на этом месте ответить на вопрос. Почему при открытии страницы уезжают гиперссылки, в которые мы пытались ткнуть в первый момент, но промахнулись (типовая ошибка 99% сайтов)? Для студентов ВХК отправка правильного ответа добавит балл (или два?, вычетов пока нет).

Доработка изображений

В большинстве случаев изображение непригодно для непосредственного использования на Web-страницах. Сначала графика должна быть оптимизирована. Это делается с целью уменьшения сетевого трафика за счет выбора наилучшего формата файла, размеров, разрешения и количества цветов иллюстрации.


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Карты изображений

При использовании данной технологии, изображение является не просто гиперссылкой. Результирующий адрес перехода зависит от того, на какой области картинки был сделан щелчок. Такой подход не только очень привлекателен, но и незаменим во многих случаях: карта местности, хорошо знакомые изображения.

Чтобы включить поддержку карты для изображения, необходимо добавить дополнительный параметр USEMAP в тег IMG:

<IMG SRC="адрес источника" USEMAP="адрес#имя файла карты">

Описание карты может содержаться в самом файле иллюстрации, но такой вариант значительно сложнее для рядового пользователя, в связи с чем рассмотрим сохранение карты в виде отдельного текстового фрагмента нашего HTML-файла.

Общий синтаксис карты заключается в создании парным тегом <MAP></MAP> контейнера, включающего описание каждой отдельной области:

<MAP NAME="map_name">
	<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="адр.источника"]|[NOHREF] [TITLE="Подск"]>
	<AREA [SHAPE="shape"] COORDS="x1,y1,..." [HREF="адр.источника1"]|[NOHREF] [TITLE="Подск1"]>
	...
</MAP>
Рассмотрим возможные атрибуты описания карты.
NAME
Имя карты, позволяющее обращаться именно к данному перечню областей.
SHAPE
Необязательный параметр, описывающий форму задаваемой области изображения. Может принимать значения:
  • default — по умолчанию (как правило — прямоугольник);
  • rect — прямоугольник;
  • circle — круг;
  • poly — многоугольник произвольной формы.
COORDS
Координаты, описывающие область гиперссылки. Они вставляются попарно, в зависимости от формы: одна пара + R для круга (центр + радиус), две — для прямоугольника, n — для многоугольника.
Координаты задаются относительно левого (X) верхнего (Y) угла изображения. В случае наложения нескольких областей, срабатывает та, которая была описана первой.
TITLE
Играет ту же роль, что и в обычной гиперссылке, позволяя задать пользователю подсказку: что будут загружено и/или каков размер загружаемой информации.
TARGET
Играет ту же роль, что и в обычной гиперссылке, позволяя загрузить документ в определенное или новое (="_blank") окно.
ONCLICK=скрипт()
Позволит вместо обычного перехода по гиперссылке запустить скрипт. Например, он может создавать новое окно с особыми свойствами (размеры, элементы управления и т.д.), в которое загружать документ (для указания параметров) или изображение. В этом случае адрес следует задать на несуществующую внутреннюю метку, например HREF="#0".
NOHREF
Необязательный параметр, описывающий зону, нечувствительную к нажатиям.
ПРИМЕР КАРТЫ

Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Табличное оформление Web-страниц

Для вывода на странице таблицы нужно создать ее контейнер с помощью пары тегов <TABLE></TABLE>, между которыми вставляется описание таблицы.

ВНИМАНИЕ! Все теги в таблице — парные, то есть обязательно наличие как открывающего, так и закрывающего тега! Поверьте, что не все браузеры игнорируют незакрытие тега TD, как это указано в спецификации. Найти такую ошибку по сбою вывода зачастую почти невозможно.

Чтобы показать таблицу с рамкой (по умолчанию она не выводится), нужно в открывающем теге указать толщину линии в пикселах, задав значение атрибута BORDER:

<TABLE BORDER=1>

Описание таблицы делается с помощью тега строки (<TR></TR>) и вставленных в него тегов ячеек (<TD></TD>). Так, приведенный ниже исходный текст выведет таблицу из двух строк по две ячейки (то есть из двух колонок).

<TABLE BORDER=1>
	<TR>
		<TD>A</TD>
		<TD>B</TD>
	</TR>
	<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
AB
CD

Текст специально отформатирован только для первой строки таблицы. Такой вариант наиболее удобен для тех случаев, когда ячейки содержат сравнительно большой текст. Зато во втором случае намного удобнее последовательно прочитывать каждый элемент при существенно меньшем количестве строк на экрана (компактность).

Выравнивание таблицы на странице и выравнивание содержимого отдельных ячеек

Выравнивание информации в ячейках по умолчанию происходит влево (горизонтально) и по центру (вертикально). Это не всегда удобно и противоречит русскоязычным правилам (второе).

Ширина таблицы и отдельных колонок

Определяется атрибутом WIDTH тега TABLE или TD. Может быть выражена в пикселях (без размерности, либо с "px" [100px]) или в процентах (после числового значения ставится знак "%"). Для ячеек нет необходимости указывать значения во всей таблице. Достаточно сделать это в первой (или любой другой) строке, а остальные сами сформируются вслед за ней.
ПРИМЕР:

<TABLE BORDER=1 WIDTH=200>
	<TR>
		<TD WIDTH=100>A</TD>
		<TD WIDTH=100>B</TD>
	</TR>
	<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
AB
CD

Цвет фона и рамки


Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!


Объединение ячеек

Нередко возникает ситуация, когда нужно объединить ячейки. Типичными примерами может служить общий заголовок для двух колонок или боковик для двух строк.

Чтобы произвести объединение используются атрибуты тега ячейки (<td>): colspan для объединения ячеек по горизонтали и rowspan для объединения по вертикали.

В качестве образца возьмем таблицу из девяти ячеек с их нумерацией по правилам электронных таблиц:
A1B1C1
A2B2C2
A3B3C3

объединим ячейки B1 и C1. Для этого, вместо строки

<tr><td>A1</td><td>B1</td><td>C1</td></tr>

запишем

<tr><td>A1</td><td colspan=2>B1+C1</td></tr>

A1B1+C1
A2B2C2
A3B3C3

Теперь во второй строке запишем инструкцию объединения двух ячеек по вертикали:

<tr><td rowspan="2">A2+A3</td><td>B2</td><td>C2</td></tr>

А из третьей удалим описание первой ячейки (она теперь сливается со второй строкой)

<tr><td>B3</td><td>C3</td></tr>

Результат:
A1B1+C1
A2+A3B2C2
B3C3

Важное замечание! Работа по изменению таблиц вручную достаточно сложна. Особенно, когда надо удалить, добавить или переместить колонки; объединить или разъединить ячейки. Поэтому для таких действий стоит использовать специализированный редактор. Например, тот же Microsoft FrontPage.

Но знание тегов и правил описания таблиц является обязательным. Существует множество реальных ситуаций, когда никакая программа не поможет и придется разбираться вручную.

Уже достаточно много лет для форматирования размещения материала (макетирования) используется его размещение внутри небольшой таблицы.
Заголовок страницы
МенюОсновная часть, собственно страницы сайта
Нижняя часть с копирайтом и т.д.

Естественно, что толщину рамки при этом указывать не надо: её не должно быть. Но в процессе отладки можно и оставить для упрощения понимания.

Давайте обсудим её описание:

	<table border=1 WIDTH=600 align="center">
	<tr><td colspan=2>Заголовок страницы</td></tr>
	<tr><td WIDTH=80>Меню</td><td>Основная часть, собственно страницы сайта</td></tr>
	<tr><td colspan=2>Нижняя часть с копирайтом и т.д.</td></tr>
	</table>

WIDTH=600 — одна из важнейших причин использования таблицы. За счет этого текст вашего сайта не расползется по всему огромному современному монитору, а будет выглядеть именно так, как вы его задумали. Конечно, приведенное число несколько маловато, но оно потребовалось для данной ситуации. Совет: ориентируйтесь на ширину экрана 1024 либо 1280 точек и не забудьте оставить место для рамки и полосы прокрутки. Реально, из ширины стоит вычесть 20–25 пикселов. То есть оставить ширину не более 1000 или 1260.

Сама таблица в приведенном варианте состоит из двух колонок, которые объединены для первой строки (colspan=2).

Во второй строке задана узкая ячейка для меню (WIDTH=80). Основная же часть займет всё оставшееся от ширины пространство.

Нижняя часть опять объединяется (colspan=2).

В заключение подчеркну, что новая «мода» — использование слоев (<div>) — никоим образом не отрицает описанное, так как оно на несколько порядков проще и надежнее.

Фреймы

Данный материал стоит рассматривать как устаревший. Но технология поддерживается и намного облегчает работу для начинающих.

Фреймы (в литературе можно встретить термин кадры) позволяют разбить страницу на фрагменты, в которых может содержаться независимая информация. Фактически, можно получить страницы в страницах.

Фреймовая разбивка задается тегами контейнера <FRAMESET> </FRAMESET>. Для него характерно задание одного или пары обязательных атрибутов, описывающих число рядов и/или строк:

<FRAMESET ROWS="Описание" COLS="Описание"> </FRAMESET>.

"Описание" задает список значений в процентах, пикселах или относительных единицах, разделенных запятыми.
Файл с контейнером отличается от обычного тем, что не будет содержать тега <BODY>, но обязан содержать тег <HEAD></HEAD>, после которого и описывается контейнер.

Контейнеры <FRAMESET> могут быть вложены друг в друга. Более того, это просто необходимо в случае сложной структуры, когда в разных строках страницы содержится различное количество фреймов.

Для каждого фрейма в наборе страницы должен быть создан свой HTML-документ. Тег заголовка в этих документах не имеет смысла, так как считываться он будет из файла в котором задан контейнер фреймов.

Если описание фрейма содержит атрибут присвоения ему имени, например,

<FRAME SRC="URL" name="MainPage">,

то появляется возможность загрузки новой страницы при помощи гиперссылки (из меню...) именно в этот фрейм:

<a href="URL1" TARGET="MainPage">Загрузить URL1 во фрейм MainPage</a>

Несмотря на свое кажущееся удобство, в современном Web-дизайне фреймы используются довольно редко. Основная причина этого — «загромождение» экрана набором фреймов и просмотр основного содержания страниц через сравнительно небольшое окошко. Хотя для определенных случаев именно такой вариант и должен рассматриваться как предпочтительный.

Набор специальных символов на Web-страницах

В большом числе случаев подготовки страниц требуется ввод специальных символов, которые отсутствуют на клавиатуре. Особенно это относится к сайтам научной тематики, хотя грамотное оформление без них практически невозможно для любого текста. Вот некоторые примеры наиболее важных символов:

Здесь можно посмотреть символы под десятичными Unicode-номерами 33–32768. (Они вводятся тегом &#XXXХ;, где «ХХХX» — десятичный Unicode-номер знака.)

Более подробную (исчерпывающую) информацию можно получить, перейдя по ссылке (страницы на английском языке!): Дополнительные символы

Примерная тематика вопросов итоговой к/р

Контрольная работа будет заключаться в основном в записывании нужных тегов и/или атрибутов. В некоторых случаях потребуется выбрать правильные ответы из перечня (тест).

  1. Структура HTML-документа.
  2. Теги присвоения начертаний и индексов для символов.
  3. Разбивка текста на строки и абзацы, атрибуты выравнивания, заголовки.
  4. Формирование списков.
  5. Гиперссылки на документы и на места внутри документа.
  6. Элементы URL (URI).
  7. Относительный и абсолютный адрес.
  8. Загрузка документа в новом окне.
  9. Форматы графических файлов и их характеристики для размещения в сети Интернет.
  10. Бегущая строка. (сомнительно)
  11. Карты изображений (сомнительно).
  12. Основные табличные теги, объединение ячеек по горизонтали и вертикали.
  13. Цвет: объекты для присвоения, базовый синтаксис.
  14. Формы Web-страниц. Ограничения их применения.
  15. Каскадные таблицы стилей (CSS): основы применения.

Некоторые полезные ресурсы

  1. htmlbook.ru Для тех, кто делает сайты (справочник по HTML, CSS; множество практических советов).
  2. Справочник Web-языков (SpravkaWeb.Ru, заброшен в 2011 г.).

Copyright © 1993–2024 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.