Лекция  №8

Вопрос 1

К теме лекции      Вопрос 2    Вопрос 3     Вопрос 4

Общий процесс разработки сайтов. Анатомия Web-страниц. Основы языка разметки гипертекстов.

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

Рекомендации (требования) по разработке сайтов 

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

1. Четко сформулируйте назначение вашего сайта. Каковы ваши цели? Только присутствие в Internet? Если так, то не удивляйтесь, что ваш сайт, как и многие другие, постигнет участь большинства. Старайтесь формулировать ваши цели настолько четко, насколько это возможно.

2. Обязательно думайте о своей аудитории. Кто будет основной (и вторичной) аудиторией вашего сайта? Какого они возраста? Чем они занимаются? Сколько времени они проводят на вашем сайте? В отношении каждой порции информации, каждой картинки и каждой детали спросите себя, как отреагирует на это ваша аудитория.

3. Используйте быстро загружаемые элементы. Причина номер один, почему люди быстро уходят с сайта (или не посещают его вовсе) — слишком долгая загрузка информации. Большой объем графических файлов вызывает желание как-то повлиять на ход событий, и самое простое — это нажать на кнопку Stop, остановив загрузку.

4. Сделайте ваш сайт визуально привлекательным. Вы, несомненно, видели в Internet немало скучных сайтов. Что же делает их неинтересными? Возможно, недостаток цвета и разнообразия текста, заголовков. Вы, вероятно, видели также беспорядочные и эклектичные сайты, в которых используется слишком много шрифтов разных размеров или слишком много цветов. Создавая свой собственный сайт, помните, что продуманное форматирование страниц приблизит вас еще на один шаг к заветной цели.

5. Не пытайтесь разместить все на одной странице. Будьте внимательны, не перегружайте свои страницы слишком большим количеством информации. Все мы знаем, что писатели любят писать, а дизайнеры-графики — рисовать эффектные картинки. Ваша задача как разработчика сайта — создать тонкую гармонию между этими двумя очень различными группами людей. Постарайтесь установить равновесие между текстовой и изобразительной информацией. Думайте о тех, кто будет читать ваши страницы; думайте о том, как трудно воспринимается большое количество текста на экране компьютера, и наполняйте ваши страницы содержимым в соответствии с этим. Попробуйте добавить пустое пространство, увеличивая поля страницы, или использовать табличное размещение текста. Размещая на страницах графику, имейте в виду ее реальное значение: служит ли она основной цели, или работает только как украшение? Но при этом не забывайте, что иногда красивая графика сама по себе может быть целью. В идеале каждый Web-сайт должен хорошо выглядеть, содержать полезную информацию и быть удобным для просмотра.

6. Разумно организуйте содержимое. Возможно, вам знакомо утверждение, что содержание первично, а форма вторична? И это правда, но форма подачи содержания тоже важна. Сколько раз при посещении очередного сайта вы говорили себе: "Здесь нет ничего интересного"? Возможно, где-то глубоко внутри и захоронено что-то ценное, но откопать это что-то можно, лишь случайно на него натолкнувшись. Если у вас есть информация, которую, как вы считаете, ваши посетители должны увидеть, не прячьте ее вглубь сайта. Сделайте важную информацию настолько легко доступной, насколько это возможно.

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

Ниже перечислены некоторые рекомендации, касающиеся планирования кнопок навигации:

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

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

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

8. Тщательно протестируйте свой сайт. Существует целый ряд различных браузеров, и в каждом из них ваш сайт может выглядеть по-разному. Проверьте работу вашего сайта, используя как можно больше различных браузеров, при этом на различных платформах (как минимум, Windows 95, Windows NT, UNIX и Macintosh) и при различных скоростях модема. Нередко кнопка навигации, помещенная вами в угол страницы, в каком-нибудь браузере оказывается посреди окна; такие вещи случаются сплошь и рядом. Опытные Web-дизайнеры проверяют в своих сайтах каждую страницу и каждую ссылку в нескольких различных браузерах.

Другой хороший способ проверки вашего сайта — это операция Preview In Browser (Предварительный просмотр в браузере) в Редакторе. Она позволит вам визуально исследовать вашу страницу в любом браузере, установленном на вашем компьютере и при различных размерах окна. Например, если вы обычно работаете в разрешении 1024х768, то вы сможете воочию посмотреть, как ваша страница будет выглядеть в разрешении 640х480. Если вы хорошо относитесь к своей аудитории, то предоставьте посетителям возможность легко находить информацию на вашем сайте.

На странице использованы материалы http://www.izcity.com/ .

Основы языка разметки гипертекстов.

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

HTML-тэги могут быть условно разделены на две категории:

  • тэги, определяющие, как будет отображаться WEB-броузером тело документа вцелом
  • тэги, описывающие общие свойства документа, такие как заголовок или автор документа

Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

Как создаются HTML документы?

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

Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape позволяют
создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

Основные положения

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

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

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

    Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа. HTML-документ может включать вышеописанные элементы только если они помещены внутрь тэгов <PRE> и </PRE>. Более подробно о тэгах <PRE> будет написано ниже.

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

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...тело документа... </HTML>

Заголовочная часть документа <HEAD>

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>
<HEAD>
<TITLE> Список сотрудников </TITLE>
</HEAD>
...

    Внимание! Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Заголовок документа <TITLE>

Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

Комментарии

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

<!-- Это комментарий -->

Комментарии могут встречаться в документе где угодно и в любом количестве.

Тэги тела документа

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

Тело документа <BODY>

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

где x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>

позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа

Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг <CENTER>.

Все элементы между тэгами <CENTER> и </CENTER>
будут находиться в центре окна

Тэг преформатирования <PRE>

Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

  • перевод строки
  • символы табуляции (сдвиг на 8 символов вправо)
  • непропорциональный шрифт, устанавливаемый броузером

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, собранный из предыдущих:

<HTML> 
<HEAD> 
<TITLE> Список сотрудников </TITLE> 
</HEAD> 
<BODY> 
<H2> Список сотрудников нашей фирмы </H2> 
<H3> Составлено : 30 мая 2001 года </H3> 
Данный список содержит фамилии, имена и отчества
всех сотрудников нашей компании. <P> 
Список может быть использован только в служебных целях. <P> 
</BODY> 
</HTML>

Вот, что вы увидите на экране броузера:

Список сотрудников нашей фирмы

Составлено : 30 мая 2001 года

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

Список может быть использован только в служебных целях.

    Внимание! Заголовок "Список сотрудников" не отображен броузером как часть документа. Он появится в заголовке окна броузера.

Разрыв строки <BR>

Тэг <BR> извещает броузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой. Например:

Алексей Ярцев <BR>
Дмитровское шоссе, <BR>
д.9Б, офис 326 <BR>

Дополнительный параметр позволяет расширить вохможности тэга <BR>.

<BR CLEAR=left|right|all>

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна броузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка:

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left>
<img src="http://www.softexpress.com/images/schema1.gif" align=baseline>
Мастер/Деталь </p>

Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место. Например:

<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>

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

Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

На открытии данной конференции глава представительства произнес: <P>
<BLOCKQUOTE>
Сегодня один из величайших дней для нашей компании. <BR>
Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз.
</BLOCKQUOTE>

При отображении броузером данный текст будет выглядеть так:

На открытии данной конференции глава представительства произнес:

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

Список базовых тэгов HTML

Стартовый

Завершающий

Описание
<HTML> </HTML> Обозначение HTML-документа
<HEAD> </HEAD> Заголовочная часть документа
<TITLE> </TITLE> Заголовок документа
<BODY> </BODY> Тело документа
<H1> </H1> Заголовок абзаца первого уровня
<H2> </H2> Заголовок абзаца второго уровня
<H3> </H3> Заголовок абзаца третьего уровня
<H4> </H4> Заголовок абзаца четвертого уровня
<H5> </H5> Заголовок абзаца пятого уровня
<H6> </H6> Заголовок абзаца шестого уровня
<P> </P> Абзац
<PRE> </PRE> Форматированный текст
<BR>   Перевод строки без конца абзаца
<BLOCKQUOTE> </BLOCKQUOTE> Цитата

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

На странице использованы материалы  http://www.crosswinds.net/~ysergeev/money.htm      http://freedoc.narod.ru/

К теме лекции      Вопрос 2    Вопрос 3     Вопрос 4
Лекции:  1;  2;  3;  4;  5;  6;  7;  8. 
Практические занятия:  1;  2;  3;  4;  5;  6;  7;  8.
Контакты с преподавателем: ignik@chat.ru;  anx-int@narod.ru
Copyright © 2001г. "Midnight Express".
Копирование и использование данных материалов разрешается только в случае указания на  источник получения информации, при этом во всех ссылках обязательно явное указание адреса данного вэб-сайта http://anx-int.narod.ru
Хостинг от uCoz