Шаг 2: Создание HTML-страниц
ЦЕЛЬ:  Создать с помощью помощью редактора Word файлы учебных HTML-страниц.
РЕЗУЛЬТАТ:  Продемонстрировать преподавателю в тестовом режиме с помощью браузера HTML-документы.

HTML-редакторы

Создавать HTML-документы, являющиеся основой ваших страниц можно в любом текстовом процессоре (даже в Notepad), но использование специальных редакторов существенно облегчает и убыстряет процесс. HTML-редакторы делятся на две группы: WYSIWYG (What You See Is What You Get - что видишь, то и получаешь) и специализированные текстовые редакторы, работающие напрямую с HTML-кодом. WYSIWYG-редакторы позволяют редактировать страничку, не вдаваясь в детали HTML-кода. При использовании такого редактора вы видите и изменяете страничку, не зная, что при этом вставляется в ее - HTML-код. К этому типу редакторов можно отнести известный вам Word (если сохранять файлы в формате HTML), Netscape Composer и FrontPage. Такой подход, кажется проще - в принципе можно делать странички вообще не зная язык, однако он таит в себе много опасностей:

  • Многие редакторы, например, MS FrontPage, генерируют страницы, которые правильно выглядят только в одном из браузеров.
  • В код вставляется много лишнего, а часто и вредного.
  • Самое главное - как бы хорош не был такой редактор, он не позволит вам сделать некоторые вещи, которые можно сделать, работая напрямую с HTML-кодом.
Специальные текстовые редакторы требуют знания HTML, но существенно облегчают написание кода, при этом вы получаете полный контроль над процессом создания страницы. Чаще всего используют оба типа редакторов, начиная разработку в WYSIWYG, а потом завершают "отделку" в текстовом.

Создание файлов ваших страниц

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

Рекомендации к содержанию страниц


  • Документы создаются в текстовом редакторе WORD.
  • Две страницы содержат информацию о ваших отчетах по выполненным первой и второй лабораторным работам. Они должны быть преобразованы из формата документа Word в формат HTML-документа путем выполнения команды Файл/Сохранить в формате HTML.... Если у вас сохранились ранее созданные файлы HTML-страниц, то можно воспользоваться ими.
  • При преобразовании документов WORD в формат HTML все ваши файлы должны сохраняться в одной общей папке. При этом там же будет сохранена и вся графика вашей страницы.
  • Все страницы должны иметь единое стилевое оформление (тип и цвет шрифта, единый фон и т.д.).
  • Для визуального структурирования документов (взаимного расположения текста и рисунков, текста в колонках) рекомендуется использовать таблицы с видимыми и невидимыми границами, линии.
  • Ваши страницы для облегчения навигации должны содержать взаимные гиперссылки одна на другую и на созданные на первом шаге страницы (например, возврат). На странице подготовьте место для гиперссылок на имеющиеся и будущие страницы в сети Internet ваших коллег и друзей. В момент создания страницы это могут быть просто ссылки на произвольный объект, даже на любой файл вашего компьютера. В процессе размещения страниц в сети (по мере готовности реальных документов) эти ссылки заменяются на реальные. Можете организовать ссылки на имеющиеся у вас файлы любимых музыкальных произведений, которые, естественно, должны быть размещены на сервере, или просто ссылки на любымые музыкальные произведения, найденные в процессе выполнения второй работы.
  • Для регистрации в поисковых машинах надо знать, что два слова, встречающиеся в разных местах страницы, имеют разный вес - он максимален для названия страницы (TITLE) и тегов заголовков H1-H3. Следовательно необходимо давать страницам осмысленные названия и выделять заголовки соответствующими тэгами.
  • Для просмотра документов в процессе их создания и редактирования необходимо их открыть в окне браузера, так как в окне WORD они могут выглядеть иначе. В редакторе вносятся изменения в документ, далее, производится его сохранение, а в окне браузера информация обновляется, после нажатия соответствующей кнопки или выполнения аналогичной команды.

Требования к именам файлов


- Первый файл в вашей папке должен называться либо index.html либо index.htm (или соответственно default.html либо default.htm - в зависимости от выбора сервера, на котором будут расположены страницы). Если вы выполнили задания первого шага, то файл с таким именем у вас уже есть. На сервере Народ.Ру файл главной страницы имеет такое имя. При обращении к вашей страничке, именно этот файл первым видит посетитель, т.е. в URL-адресе можно не указывать имя этого файла.
- ВЕЗДЕ ИСПОЛЬЗУЙТЕ ТОЛЬКО МАЛЕНЬКИЕ БУКВЫ, как в названиях файлов, так и в ссылках. Это же относится и к названиям папок, которые вы создадите. И последнее, НИКОГДА не используйте русские буквы (кириллицу) в названиях файлов. ТОЛЬКО ЛАТИНСКИЕ БУКВЫ.
- Графика должна быть в формате либо GIF (*.gif) либо JPEG (*.jpg). И, пожалуйста, следите за тем, соответствуют ли названия файлов в гипперссылках или названия картинок в тексте вашей страницы реальным названиям файлов. То есть, <img src="image.gif"> не одно и тоже, что <img src="image.Gif">. Если имя картинки image.Gif, то второй вариант окажется верным, а первый - нет. Если вы используете графические объекты из MS Office, то при сохранении HTML-документов внимательно следите за именами файлов этих объектов. В этом случае могут появиться имена файлов на кириллице!!! Поэтому необходимо переименовать такой файл, следуя изложенным выше требованиям, а в HTML-коде ваших страниц изменить названия соответствующих ссылок, не забывая при этом сохранять документы.

Вставка дополнительных тэгов

  • Создайте список КЛЮЧЕВЫХ слов, характеризующих вашу страницу и ОПИСАНИЕ сайта на русском и, желательно, английском языках. Именно на ключевые слова ориентируются поисковые машины при обработке запросов. Ваши ключевые слова должны быть уникальными, т.е. не общеупотребительными. Например, не следует писать слова "сайт", "интернет", "Россия" и тому подобное. И наоборот, например, слово "экскаватор" будет очень полезно. Для улучшения обработки ваших страниц поисковыми системами, следует воспользоваться тэгом <META>.
    Составлять мета описания - это большое искусство. Они должны соответствовать содержанию сайта и, при этом, состоять из слов и групп слов, которые чаще всего используют посетители поисковых машин (желательно, в том же числе, падеже и времени). Ниже приводится наименее трудоемкий из грамотных алгоритм составления подготовки этой информации.
    - Проанализируйте рейтинги Чаще Всего Используемых Слов. (Rambler, Aport). Там вы найдете 100 самых популярных слов в поисковых запросах Рамблера и Апорта.
    - Отметьте слова, которые по тематике ближе всего к вашему сайту, и, используя буфер обмена, составьте нужный список (не более 20-30 слов).
    - Составляйте описание так, чтобы оно было правильно по смыслу и состояло из всех отмеченных слов и минимума других.
    - Сохраните эту информацию в отдельном файле, т.к. она еще будет использована при регистрации страницы на Шаге 5.
  • Откройте ваш первый HTML-файл в редакторе Блокнот.
  • В самом начале странички, после <HEAD> пишем:
    <HEAD>
    ......
    <TITLE>придуманный вами заголовок</TITLE>
    < META NAME="KEYWORDS"
    CONTENT="Сюда (вместо этих слов) через запятую пишем ключевые слова (не более 20-30 слов). Лучше на русском и английском" >
    < META NAME="DESCRIPTION"
    CONTENT="Сюда (вместо этих слов) пишем описание своей странички. Лучше на русском и английском" >
    .......
    </HEAD>
    При использовании для создания документов в редакторе MS Word первые два пункта могут быть созданы автоматически, если при открытом HTML-документе выполнить команду Файл/Свойства/Дополнительно... и заполнить поля Название и Ключевые слова.
  • Скопируйте введенную информацию в буфер обмена. Сохраните изменения в файле. Проведите аналогичные вставки, используя буфер обмена, в другие HTML-документы и сохраните их изменения.
  • Введенные вами слова не будут видны в окне браузера, их будут видеть только поисковые машины. Для примера можете просмотреть эту страничку в виде HTML.

    Тестирование страниц сайта

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

    Порядок выполнения

    1. Создайте две или более HTML-страницы путем пребразования документов Word в формат HTML, или воспользуйтесь созданными ранее, или сделайте новые. Придерживайтесь рекомендациям к содержанию страниц и требованиям к именам файлов.
    2. Страницы должны содержать:
      • текст,
      • графику,
      • гиперссылки на ранее созданные страницы вашего сайта для обеспечения навигации и на создаваемые страницы,
      • гиперссылки на страницы ваших коллег,
      • гиперссылки на интересные с вашей точки зрения страницы и ресурсы в Internet.
    3. В случае необходимости отредактируйте страницы. При этом используйте Word в режиме редактирования HTML-документов.
    4. Вставьте дополнительные тэги. Для этого выполните команду Вид/Источник HTML и приведите в соответствие теги в заголовке вашей страницы изложенному выше. сохраните документ в исходном формате.
    5. На сервере РосБизнесКонсалтинг в разделе Информеры выберите понравившийся вам информер и скопируйте в буфер обмена соответствующие ему тэги. Вставьте содержимое буфера обмена в то место исходного кода вашей страницы, чтобы изображение информера не искажало задуманный дизайн, например, в конец документа. Сохраните документ.
    6. Продемонстрируйте преподавателю содержание страниц и навигацию по узлу и сети Internet с вашей страницы.

  • Назад На главную страницу Вперед
     
    Hosted by uCoz