Рассылка сайта kursi.nm.ru. " Профессиональный WEB-дизайн. Знать что? Уметь что? Иметь что?". Выпуск 2.

Рассылка отдела "Компьютерные технологии" сайта KURSI.NM.RU
"Профессиональный WEB-дизайн. Знать что? Уметь что? Иметь что?"
Выпуск 2

От автора. Приветствую вас, уважаемые подписчики.
В отдел сайта "Учебные страницы" добавлен набор типовых каркасов, в том числе с использованием простых многооконных фреймовых конструкций и конструкций сложных с вложением одних фреймов в другие. Заходите. смотрите.
О курсах. Все курсы у нас действующие. Дистанционное обучение есть по всем анонсированным на страницах сайта темам (кроме нескольких бизнес-программ, которые к разделу "Компьютерные технологии" отношения не имеют).
///// Евгений Потто

Полезные ссылки:

Спецификация языка гипертекстовой разметки (eng)

Софт-сервер
(в том числе - бесплатных программ) - softmail.ru

Демонстрационные учебные страницы по темам нашей рассылки

Содержание :

Спецификации языка гипертекстовой разметки

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

Практические занятия с не очень опытными
WEB-дизайнерами

К сведению:

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

Особенно это заметно, когда перемещения осуществляются между разделами с разными ОС, одна из которых Windows XP.

Спецификации языка гипертекстовой разметки.

Самую свежую информацию по этому вопросу можно всегда найти на англоязычном сайте w3c.org.

Не всем эта информация необходима. Учебники и пособия по HTML обычно дают вполне подробные сведения. Однако есть специфические моменты, по которым "проконсультироваться" можно только непосредственно у первоисточника.

Как удобней работать с Сайтом w3c.org?

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

Для этой задачи подходит, например, PROMT 98 или PROMT 2000. В набор их интерфейсов входит удобная и не капризная подпрограмма WebView (броузер-переводчик), сохраняющая в переведенных страницах почти 100% форматирование исходной HTML-страницы.

2) Сайт w3c.org громоздкий; чтобы осуществлять эффективный поиск информации, желательно, предварительно ознакомиться с его структурой.

В общем плане структура такова:

- Главная страница с Новостными анонсами за два последних года и краткими анонсами по основным разделам

- сообщения о деятельности рабочих групп по усовершенствованию спецификаций

- декларации (общие рекомендации) к пользователям

- маловнятные авторские страницы с попытками обучать

- страницы служб улучшения качества

- разделы работы с людьми с ограниченными физическими возможностями

- страницы подписок, обсуждений, форумов

-архивы с 94 года

- непосредственно тексты СПЕЦИФИКАЦИЙ:

a) HTML 2.0; HTML 3.2; HTML 4.0; HTML 4.01

б) XHTML 1.0 Strict ; XHTML 1.0 Transitional ; XHTML 1.0 Frameset; XHTML базисный; XHTML 1.1; XTML 2.0

в) XHTML+MATHML+SVG (Конфигурация XHTML+MATHML+SVG - конфигурация, которая комбинирует(объединяет) 1.1 XHTML, MathML 2.0 и SVG, 1.1 вместе. Эта конфигурация допускает смешиванию XHTML, MathML и SVG в том же самом документе)

г) др.

На нашем сайте мы приводим полный текстовый вариант страницы "СОДЕРЖАНИЕ сайта w3c.org" , в аутопереводе на русский.. Эту страницу полезно просмотреть даже просто для эрудиции, в том числе тем, кто никогда не будет глубоко задумываться над коллизиями языка гипертекстовой разметки и никогда не испытает надобности в обращении к спецификациям-первоисточникам.

Перевод не редактировался. Это именно тот уровень перевода, который дают пользователю современные синхронные автопереводчики ( см. ПРИЛОЖЕНИЕ 1. Структура и Содержание сайта w3c.org).

СПРАВОЧНАЯ ИНФОРМАЦИЯ.

Гипертекстовая разметка. Примечательные теги и знаки.

1. &-последовательности.

Пояснение:
в HTML коде, как и везде в программировании, резервируются служебные слова. Как правило, эти символы (наборы символов) не настолько редки, чтобы не встречаться в обычном разговорном или деловом словообороте. Так случается и на вэб-страницах, где в текстовых полях, внутри информационных текстов, могут встречаться скобки, знаки, буквы, всевозможные сочетания, которые полностью или в части своей повторяют зарезервированные служебные слова и символы. Из-за чего может возникнуть неоднозначное восприятие броузером теговой разметки, и страница исказится. Поэтому рекомендуется при ручном написании кода использовать для обозначения ряда знаков и символов разговорной лексики применять не их обычные обозначения, а, так называемые, &-последовательности. Это касается двойных кавычек, треугольных скобок, некоторых др. знаков.

Двойную кавычку " следует набирать, как "

Открывающую треугольную скобку < следует набирать, как <

Закрывающую треугольную скобку > следует набирать, как >

В качестве неразрывного пробела следует использовать   (non break space)

Примечание:

Приведенные обозначения имеют системно- программный смысл, поэтому применяются часто.
А, вообще-то, с помощью &-последовательностей можно отобразить большую часть любой распространенной таблицы символов.Правда, в этом обычно нет необходимости.

Некоторые &-последовательности могут задавать вполне интересные с позиции вэб-дизайнера символы.

Например:
большая О зачеркнутая - набирается, как Ø
первая степень - набирается, как ¹
вторая степень - набирается, как ²
третья степень - набирается, как ³
знак мужского рода - набирается, как º
знак женского рода - набирается, как ª
одна четвертая - набирается, как ¼
ударение - набирается, как ´
знак авторского права - набирается, как ©
перевернутый восклицательный знак - набирается, как ¡
разорванная вертикальная черта - набирается, как ¦
плюс-минус - набирается, как ±

Для наглядности скопируем в буфер выше приведенный абзац и вставим его в текстовое поле Блокнота; в броузере &-последовательности отобразятся, как символы; абзац приобретет следующий вид:

"Например:
большая О зачеркнутая - набирается, как Ø
первая степень - набирается, как ¹
вторая степень - набирается, как ²
третья степень - набирается, как ³
знак мужского рода - набирается, как º
знак женского рода - набирается, как ª
одна четвертая - набирается, как ¼
ударение - набирается, как ´
знак авторского права - набирается, как ©
перевернутый восклицательный знак - набирается, как ¡
разорванная вертикальная черта - набирается, как ¦
плюс-минус - набирается, как ± "

2. Теги, создающие формы.

Синтаксис
Тэг INPUT
Тэг SELECT
Тэг TEXTAREA
Подтверждение и отправление формы

Синтаксис

FORM тэг определяет форму для заполнения в HTML документе. В одном документе может быть определено несколько форм для заполнения, но вложенные FORM операторы не разрешены. Формат оператора FORM выглядит следующим образом:

<FORM ACTION="url" METHOD="POST">...</FORM>

Его атрибуты следующие:

ACTION

URL сервера запросов, куда будет отослано содержание формы после подтверждения. Если это поле отсутствует, будет использован URL текущего документа.

METHOD

HTTP/1.0 метод используемый для посылки содержания заполненной формы на сервер. Этот метод зависит от того, как работает конкретный сервер запросов. Настоятельно рекомендуется использование метода POST. Возможные варианты следующие:

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

ENCTYPE

задает тип кодирования содержимого заполненной формы. Этот атрибут действует только когда используется метод POST и даже в этом случае имеет только одно возможное значение (которое является значением по умолчанию)- application/x-www-form-urlencoded.

Внутри FORM оператора может находиться все, что угодно, кроме другого оператора FORM. Согласно спецификации, для задания интерфейсных элементов внутри оператора FORM используются тэги INPUT, SELECT, и TEXTAREA.

Тэг INPUT

Тэг INPUT используется для задания простого элемента ввода внутри FORM. Это одиночный тэг, его ничего не окружает и он не имеет закрывающего тэга - т.е. он используется подобно тэгу IMG.

Атрибуты для тэга INPUT следующие:

TYPE

должен быть один из:

"hidden" : пользователю не предлагается поля для ввода, но содержимое тэга передается при подтверждении и посылке формы. Это значение может быть использовано для передачи информации состояния при взаимодействии клиента и сервера.
"image" : картинка, по которой вы можете сделать щелчок мышью или другим указывающим устройством, что приводит к немедленному подтверждению и отсылке формы. Координаты выбранной точки измеряются в точках от верхнего левого угла и возвращаются (наряду с другими компонентами формы) точно так же, как для элемента Image.
"text" поле ввода текста, значение по умолчанию
"password" (поле ввода пароля; вводимые символы представляются как звездочки)
"checkbox" (кнопка, принимающая положения on (включено) и off (выключено))
"radio" (кнопка, принимающая положения on и off; причем остальные кнопки с тем же параметром NAME ведут себя по принципу "одна из многих")
"submit" (кнопка, действие которой сводится к отсылке содержимого заполненной формы на сервер запросов)
"reset" (кнопка, которая устанавливает во всех интерфейсных элементах значения по умолчанию)

NAME

символическое имя (оно не показывается) для этого поля ввода. Это поле должно присутствовать для всех полей ввода кроме "submit" и "reset", т.к. оно используется в строке запроса при идентификации поля ввода при посылке ее на сервер после подтверждения формы.

VALUE

для полей ввода текста или пароля, может быть использовано для задания начального содержания поля. Для checkbox или radio button, VALUE задает значение кнопки, когда она находится в отмеченном состоянии (неотмеченные кнопки опускаются при посылке запроса); значение по умолчанию для checkbox или radio button - "on". Для типов "submit" и "reset", VALUE может быть использовано для задания надписи на этих кнопках.

CHECKED (значение не требуется)

указывает, что данная кнопка типа checkbox или radio button отмечена по умолчанию; это поле работает только для кнопок типа checkbox и radio button.

SIZE

физический размер поля ввода в символах; это поле действует только для элементов ввода текста или пароля. Если не присутствует явно, выставляется 20. Многострочные поля ввода текста могут быть заданы с помощью SIZE=ширина,высота; например SIZE=60,12. Заметим, что SIZE атрибут не должен использоваться для задания многострочных полей ввода, т.к. можно воспользоваться тэгом TEXTAREA.

MAXLENGTH

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

Тэг SELECT

Внутри <FORM> ... </FORM>, может присутствовать любое количество тэгов SELECT, свободно перемешанных с другими HTML элементами (включая INPUT и TEXTAREA элементы) и текстом (но не дополнительных элементов FORM). Тэг SELECT во многих графических клиентах представляется как меню или список.

В отличие от INPUT, SELECT имеет открывающий и закрывающий тэги. Внутри оператора SELECT разрешена только последовательность тэгов OPTION, за каждым из которых следует некоторое количество простого текста (без HTML выражений), например:

<SELECT NAME="a-menu"> <OPTION> First option. <OPTION> Second option. </SELECT>

Атрибуты оператора SELECT следующие:

NAME: символическое имя для этого SELECT элемента. Это поле должно присутствовать, т.к. оно используется при посылке запроса (аналогично оператору INPUT).
SIZE: если SIZE равен 1 или если этот атрибут опущен, по умолчанию SELECT будет представлен как меню опций Motif. Если SIZE = 2 или более, SELECT будет представлен как окно выбора; значение SIZE тогда будет определять, сколько элементов списка будут видны.
MULTIPLE: если присутствует (нет значения), задает, что SELECT должен позволять множественный выбор из списка. Наличие MULTIPLE принуждает SELECT быть представленным как список выбора, вне зависимости от значения SIZE.

Атрибуты OPTION следующие:

SELECTED задает, что эта опция выбрана по умолчанию. Если SELECT позволяет множественный выбор (с помощью атрибута MULTIPLE ), как SELECTED могут быть помечены несколько опций.

Тэг TEXTAREA

Тэг TEXTAREA может быть использован для расположения многострокового поля ввода с необязательным содержимым по умолчанию в форме. Атрибуты тэга TEXTAREA следующие:

NAME символическое имя поля ввода.
ROWS число строк в поле ввода( высота).
COLS число столбцов в поле ввода (ширина).

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

<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>

TEXTAREA с содержанием по умолчанию выглядит так:

<TEXTAREA NAME="foo" ROWS=4 COLS=40> Default contents go here. </TEXTAREA>

Содержание по умолчанию должно быть строгим ASCII текстом. Символы перевода строки воспринимаются (так что в примере выше до и после текста "Default contents go here." будет пустая строка).

Подтверждение и посылка формы

Для метода GET

Когда нажимается кнопка submit, содержимое формы будет добавлено к URL в следующей форме:

action?name=value&name=value&name=value

(здесь "action" - URL, заданное атрибутом ACTION в тэге FORM, или URL текущего документа, если атрибут ACTION не был задан).

Нестандартные символы в примерах "name" или "value" будут опущены, при этом имеются в виду также "=" and "&". Это означает, что включения "=", которые разделяют имена и значения (names и values), и включения "&", которые разделяют пары name/value, не опускаются.

Для полей ввода текста и пароля, значением будет то, что введет пользователь. Если пользователь оставит это поле пустым, значение value также будет пустым , но в строке запроса будет присутствовать фрагмент "name=".

Для кнопок типа checkbox и radio button, значение value определяется атрибутом VALUE в том случае, когда кнопка отмечена. Неотмеченные кнопки при составлении строки запроса игнорируются целиком. Несколько кнопок типа checkbox могут иметь один атрибут NAME (и различные VALUE), если это необходимо. Кнопки типа radio button предназначены для того, чтобы вести себя по принципу "одна из всех" и должны иметь одинаковый атрибут NAME и различные атрибуты VALUE.

Для метода POST

Содержимое формы кодируется точно как для метода GET (см. выше), но вместо добавления содержимого формы к URL, заданной атрибутом формы ACTION, в качестве запроса , содержимое посылается блоком данных как часть операции POST. Если присутствует атрибут ACTION, то значение URL, которое там находится, определяет, куда послать этот блок данных. Этот метод особенно рекомендуется при посылке больших блоков данных.

Практические занятия с не очень опытными WEB-дизайнерами:

I. Мы специально для этих целей создали на сайте, ведущем эту рассылку, отдел Учебные страницы, который предполагаем постоянно пополнять демонстрационными материалами.

Сейчас в отделе более двадцати страниц.

Новые:

- Образец фреймового каркаса WEB-страницы (четыре фрейма)

- Образец фреймового каркаса WEB-страницы (шесть фреймов)

- Образец каркаса сайта с правым расположением меню

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

- Тренировочная страница по изобразительным и функциональным возможностям CSS.
После "массированного" применения CSS.

Примечание: Замена на вэб-странице одних объектов и параметров CSS на другие способно кардинально поменять ее цветовые характеристики, геометрические размеры, некоторые функциональные качества. В образце это сделано относительно параметров ссылок и окон типовой почтовой формы. Код страницы и и таблицу каскадных стилей можно при желании просмотреть и копировать.

- Образец простого каркаса WEB-страницы с "жесткой" конструкцией

Примечание:
"Жесткая" конструкция - это когда внешние габаритные размеры вэб-страницы (ширина) заданы в абсолютных физических единицах, пикселях, сантиметрах, дюймах, т.п.
Страница не изменяет свои размеры в зависимости от ширины окна браузера и разрешения экрана.
Например, внешние размеры вэб-страницы заданы равными 810 пиксель.
При просмотре в мониторе с разрешением 800 на 600 страница немного не поместится в экран, и появится горизонтальная полоса прокрутки с малым диапазоном действия. В мониторе с разрешением 640 на 480 уже почти одна четверть изо будет за экраном, и появится горизонтальная полоса прокрутки с большим диапазоном регулировки.

- Образец простого каркаса WEB-страницы с "жесткой" конструкцией-код HTML

- Образец простого каркаса WEB-страницы с "мягкой" конструкцией

Примечание:
"Мягкая" конструкция - это когда внешние габаритные размеры вэб-страницы (ширина) заданы в относительных единицах (процентах) в сравнении с материнским объектом (окном браузера).
Страница изменяет свои размеры в зависимости от ширины окна браузера и разрешения экрана. Страницу постоянно видно полностью; полоса горизонтальной прокрутки не появляется

- Образец простого каркаса WEB-страницы с "мягкой" конструкцией-код HTML

- Др.

II. Обратите внимание на применение конструкции "мягкого" переноса  для выравнивания текста в правой верхней ячейке.

Заходите на наш сайт kursi.nm.ru.
Раздел Компьютерные технологии находится в стадии становления; в него будут постоянно добавляться новые статьи (наших и сторонних авторов), справочная информация по вэб-дизайну, материалы для скачивания.

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

Здесь можно также скачать бесплатные электронные книги по интернет-технологиям бизнеса и успеха , подписаться на другие наши рассылки.

ВОПРОС:

ОТВЕТ:

Вопросы и ответы присылайте на E-mail:
vzlett@yandex.ru

Присылайте нам свои статьи, информационные материалы. Мы их с благодарностью опубликуем на сайте с указанием всех ваших реквизитов и ссылок E-mail:
vzlett@yandex.ru