Учись Учиться

Создание электронного учебного пособия

Цель – создание электронного учебного пособия по одной из тем курса истории или обществознания, включающего в себя:

– несколько (5-7) веб-страниц с текстом и иллюстрациями

– табличное расположение материала (минимум на одной из страниц)

– оформление ресурса в фреймовой структуре

Выполнение работы:

1. Создание отдельных страниц с содержимым

Наберите в текстовом редакторе «Блокнот» следующий текст

{HTML}

{HEAD}

{TITLE} Здесь напишите название страницы  {/TITLE}

{/HEAD}

Сюда скопируйте основной текст страницы

{/BODY}

{/HTML}

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

В тег {BODY} добавьте необходимые атрибуты:

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

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

Основным является тег {FONT ... } ... {/FONT}, обязательно использующийся с одним или несколькими атрибутами, изменяющими размер, цвет и гарнитуру шрифта:

Кроме того, используются теги, позволяющие изменить начертание символов:

{B} ... {/B}     (от английского bold) − полужирный шрифт;

{I} ... {/I} (от английского italic) − курсив;

{TT} ... {/TT} (от английского TeleType) − моноширинный шрифт;

{S} ... {/S} (от английского strikethrough) − перечеркнутый; 

{SUB} ... {/SUB}      (от английского subscript) − нижний индекс; 

{SUP} ... {/SUP} (от английского superscript) − верхний индекс.

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

Тег {BR} (от английского break)  разрывает текстовый поток и вставляет новую строку без образования нового абзаца.  Несколько последовательных тегов {BR} интерпретируются как несколько пустых строк.  Межстрочный интервал одинарный.  Закрывающего компонента тег не имеет, как и атрибутов.

Тег  {P} (от английского paragraph)  начинает абзац;  новый абзац отделяется от предыдущего двойным межстрочным интервалом.  Абзац пустым быть не может, то есть несколько последовательных тегов {P} интерпретируются как один (в отличие от тега {BR}).  Закрывающий компонент {/P} не обязателен, так как предыдущий абзац заканчивается там, где начинается новый.  Тег {P} имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца, который может принимать значения  LEFT, CENTER, RIGHT и JUSTIFY, задающие выравнивание соответственно по левому краю, центру, правому краю и по ширине. По центру будет выровнен и текст, заключенный в теги {CENTER} ... {/CENTER}.

Если закрывающий компонент {/P}  опустить, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, или до конца документа.

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

{OL} ... {/OL}           упорядоченный (нумерованный) список (от английского ordered list) 

{UL} ... {/UL}           неупорядоченный (маркированный) список (от английского unordered list) 

Каждый элемент упорядоченного или неупорядоченного списка заключается в теги  {LI} ... {/LI}   (от английского list item). При выводе текста каждый элемент списка будет располагаться с новой строки, обозначенной номером или маркером. Кроме того, у списка может быть заголовок, который задается тегом{LH} (от английского list header). Закрывающие теги{/LI} и {/LH} не обязательны.

	Нумерованный список	Маркированный список
Элемент кода	{OL} {LH} Заголовок {LI} Первый элемент {LI} Второй элемент {LI} Третий элемент {/OL}	{UL} {LH} Заголовок {LI} Первый элемент {LI} Второй элемент {LI} Третий элемент {/UL}
Отображение в браузере	Заголовок 1. Первый элемент 2. Второй элемент 3. Третий элемент	Заголовок · Первый элемент · Второй элемент · Третий элемент

Многоуровневый список может быть организован посредством комбинации нумерованных и маркированных списков.

Тег  {OL} имеет необязательные атрибуты:

Тег  {UL} имеет необязательный атрибут

Абзацы можно оформить и в виде  заголовков уровня (от n=1 до n=6), для этого используют теги вида  {Hn} ... {/Hn}. Заголовок первого уровня выводится наиболее крупным шрифтом.

Теги {H1} , {H2}, ... , {H6}  могут иметь атрибут выравнивания  ALIGN  со значениями  LEFT,  RIGHT и CENTER.

Создайте и отформатируйте еще несколько страниц с содержимым.

2. Размещение иллюстраций

Прежде чем приступать к размещению рисунков, необходимо скопировать их в ту папку, в которой сохранены страницы сайта!

Желательно предварительно оптимизировать иллюстрации, то есть изменить размер так, чтобы картинки в масштабе 100% выглядели такими, какими вы предполагаете их видеть на страничке

Для размещения  используется непарный тег {IMG}, имеющий один обязательный и ряд необязательных атрибутов.

3. Создание таблиц

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

Таблицы в HTML строятся построчно. Все табличные данные заключаются в теги  {TABLE} ... {/TABLE}; описание каждого ряда ячеек (строк) заключается в теги {TR} ... {/TR}; содержимое каждой ячейки заключается в теги {TD} ... {/TD} (обычные ячейки) или {TH} ... {/TH} (заголовки).

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

{TABLE border=1}

{TR}

{TD} 1-1 {/TD}

{TD} 1-2 {/TD}

{/TR}

{TR}

{TD} 2-1 {/TD}

{TD} 2-2 {/TD}

{/TR}

{/TABLE}

1-1	1-2
2-1	2-2

 

 

 

 

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

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

Ячейки таблицы могут охватывать несколько строк или столбцов;  при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, "растягивается" на указанное количество строк) и COLSPAN (ячейка "растягивается" на несколько столбцов). Приведем пример организации таблицы с объединенными ячейками:

{TABLE}

{TR}

{TD ROWSPAN=2} 1-1 {/TD}

{TD COLSPAN=2 } 1-2 {/TD}

{/TR}

1-1	1-2
	2-1	2-2

{TR}

{TD} 2-1 {/TD}

{TD} 2-2 {/TD}

{/TR}

{/TABLE}

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

Атрибуты тега  {TABLE} задают параметры таблицы в целом:

Атрибуты тега  {TR} задают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге {TABLE}, отменяются).

Атрибуты тега {TD} задают параметры данной ячейки  (при возникновении противоречий атрибуты, заданные в тегах {TABLE} и {TR} , отменяются).

При работе с таблицами учтите, что указанное значение атрибута WIDTH  во многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).  

Добавьте на одну из страниц таблицу

4. Фреймы

Фреймы позволяют нам открыть в окне браузера не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и Page1.html - документ с непосредственным содержанием нашего сайта).

Создайте web-странички menu.html и logo.html, и разместите их в папке вашего сайта. В документе logo.html разместите заголовок (текст, изображение…), отражающий тему Вашего сайта. В  menu.html напишите пока просто "Это МЕНЮ"

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

Т.к. первый документ на сайте, который показывается посетителю, это index.html, пусть он будет фрейм-документом. Создадим документ index.html:

На первый взгляд - вполне стандартное начало, только вот нет тэга body! И это не ошибка, фрейм-документ не содержит тэга body, такого обязательного в других случаях, вместо него используется {frameset}{/frameset}.

Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Классический вариант - logo.html, menu.html, Page1.html.

Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных:

Фреймы-строки и фреймы-колонки

Сначала создадим первый вариант:

Начнем с атрибута rows - в нашем примере это выглядит так: rows="100,*,150" – что означает "... наш документ делится на несколько рядов (строк). Высота первого ряда - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство".

Тэг frame сообщает браузеру, какие же документы у нас будут в каждом ряду (строке). В нашем случае: первый ряд - logo.html (документ с логотипом - любой картинкой), второй ряд займет документ с непосредственным содержанием (Page1.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с Page1.html, а, кроме того, задать новые значения атрибуту rows (rows="100,150,*"}), чтобы меню снова занимало только 150 пикселов по высоте, а содержание - все остальное. Выполните эти изменения и просмотрите результат.

Замените атрибут rows на cols

Атрибут cols делит окно нашего браузера не на ряды, а на колонки. При cols="100,150,*" наш документ теперь делится на колонки, первая имеет ширину - 100 пикселов, вторая - 150, а третья занимает все оставшееся место.

Итак, подведем итоги. Мы можем делить окно нашего браузера либо на ряды, либо на колонки, с помощью атрибутов тэга {frameset} Cols и Rows. Другого способа деления не существует. Одновременно эти атрибуты использовать нельзя.

При помощи rows мы разбиваем окно на ряды и задаем, какую высоту будет иметь каждый ряд, при помощи cols разбиваем окно на колонки и задаем какую ширину будет иметь каждая колонка.

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

{frameset cols="10%,15%,75%"}  

Помните, что в сумме это все должно равняться 100%. А то бывают же умники...

Составные фреймы

или

Мы можем делить окно только на ряды или колонки. Тогда как же расположить документы в окне так, как указано на рисунках? Для этого что ряд можно разбить на несколько колонок, а колонку на несколько рядов.

Начнем с первого рисунка:

Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на две колонки, в которых будут располагаться документы menu.html и Page1.html.

Изменение параметров фреймов

1. Полосы прокрутки

Избавьтесь от полосы прокрутки (скрулинга) во фрейме с logo.html, для этого добавите атрибут scrolling со значением no.

{frame src="/logo.html" scrolling="no"}

Scrolling – это атрибут тэга {frame}. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.

Собственно, атрибут scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
2. Рамки между фреймами и поля фрейма

Чтобы избавиться от рамок между фреймами,  используем в теге {frameset} атрибут border, с которым мы раньше уже встречались. Итак, border="0".

Картинку на логотипе так и хочется прижать в левый верхний угол – для этого используем еще два атрибута тега frame:

{frame src="/logo.html" scrolling="no" marginwidth="0" marginheight="0"}

Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрэйма, а marginwidth определяет ширину левого и правого полей фрейма. В нашем примере мы избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth, равное нулю.

3. Организация меню

В документе menu.html создайте простые ссылки на все созданные вами странички:

{A HREF=Page1.html} На первую страницу{/A}

{A HREF=Page2.html} На вторую страницу{/A}

{A HREF=Page3.html} На третью страницу{/A}

…

Проверьте, как работают ссылки. Документ, на который введет ссылка, откроется в том же фрейме. А нам бы надо сделать так, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Для этого используют атрибут name тэга {frame}. Внесите изменения в код:

{frame src="/Page1.html" name="window-1"}

Атрибут name задает имя для фрейма (в нашем случае для того, который содержит документ Page1.html).

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута target тэга {a} (target="имя_фрейма").

Обратимся к документу menu.html   и для каждой ссылки укажем атрибут target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (Page1.html).

Например,
{A HREF="Page2.html" TARGET="window-1"} На вторую страницу {/A}

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

Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо атрибуту target задать значение _top. Сделайте это, например, для страницы c таблицами:

{a href="Page3.html" target="_top"} На третью страницу {/a}

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

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