sotrud.ru 1

Лабораторная работа №1


Тема: «Создание Web-страницы средствами языка гипертекстовой разметки»


Цель:

  1. Получить практические навыки при создании основы html-страницы;

  2. Познакомиться с различными способами форматирования в html-документе;

  3. Научиться создавать различные виды гиперссылок;

  4. Выработать навык художественно-эстетического вкуса при оформлении Web-документа



Прежде чем приступить к созданию web-страниц, необходимо иметь в виду:

1. Все создаваемые файлы должны иметь только латинские имена, без использования символов пробелов и спецсимволов. Файлы должны иметь расширения htm или html.

2. Все файлы, относящиеся к одному проекту: html-файлы, графика, flash-ролики должны располагаться в одном каталоге.


Структура Web-страницы. Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.

Web-страница помещается в контейнер и.состоит из двух частей: заголовка и отображаемого в браузере содержания.

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

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

Мета-тэги. В раздел заголовка Web-страницы могут быть добавлены информационные одиночные тэги , имеющие атрибуты NAME, HTTP-EQUIV и CONTENT.


Мета тэг может информировать браузер о кодировке Web-страницы:



Мета тэги используются поисковыми системами для индексирования содержания, ключевых слов и автора Web-страницы:







Отображаемое в браузере содержание страницы помещается в контейнер .


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

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

Спросить у Яндекса

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

в начало .

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



Рисунок 1- Схема внутренних ссылок.

Они помечаются следующим фрагментом кода: .

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


Ход работы:

Задание №1


  1. Создайте html-страницу, содержащую ссылки на популярные ресурсы. Все ссылки должны быть сгруппированы в три раздела:
  • web-сервисы (ссылки на почтовые, поисковые сервера, чат и т.п.);


  • внутренние ресурсы (ссылки на учебники, статьи, скаченные из сети интернет);

  • любимые сайты (ссылки на ваши любимые ресурсы сети).
  1. Оформите внешний вид страницы, разработайте цветовую схему. Сохраните ваш документ под именем index.htm, сделайте эту страницу – стартовой

  2. Добавьте к своей стартовой странице раздел фотоальбом, в котором разместите несколько (не более пяти) ваших любимых фотографий. Все фотографии должны быть двух видов: большие размером 600 на 400 пикселей и маленькие размером 120 на 90 пикселей. Уменьшение фотографий выполните в любом известном вам редакторе, например ACDSee.

  3. Сохраните фотографии в папке с файлом index.htm, дав им однотипные имена: 1.jpg, 2 jpg, … для маленьких, и 1_big.jpg, 2_big.jpg для больших.
    Ссылки на маленькие фотографии добавьте в файл index.htm.

  4. Сделайте каждую маленькую фотографию ссылкой, то есть при щелчке на ней она должна открывать новое окно с увеличенной копией фотографии. Для этого она должна иметь следующий код:

    Обратите внимание, что тег имеет параметр target=”new”>. Благодаря нему увеличенная фотография откроется в новом окне.

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

  6. Найдите в сети интернет фоновые рисунки (например, на сайте http://www.woweb.ru/index/0-3) обратите внимание, что каждый файл - это небольшой рисунок, который может продолжаться в стороны, создавая фоновое изображение «без швов».

  7. Добавьте для тега следующий параметр:

    . Фоновый рисунок должен располагаться в той же папке, что и файл index.htm и называться img.gif.

  8. Проведите эксперимент, как будет выглядеть ваша страница, насколько удобно читать текст с разными фоновыми изображениями.



Вставка таблиц


Таблицы – очень важный элемент web-страниц, они выполняют две функции. Первая - оформление табличной информации: различные расписания, графики дежурств, результаты экспериментов и т.п. А второе - позиционирование элементов страницы.

В классическом HTML нет средств для точного расположения объектов на странице.



Рисунок 2- Пример сложного дизайна страницы



Рисунок 3- Каркас страницы представлен из четырех таблиц.

Задание №2


  1. Создайте страницу, содержащую следующий код:





























  группа 1
группа 2 1 2
3 4



  1. Проведите исследования «Что произойдет с таблицей, если:

а) изменение ширины

Измените ширину только одной ячейки в колонке. Например, в восьмой строке увеличьте параметр width=»200». Изменится ли ширина всей колонки?


А что произойдет, если уменьшить значение параметра width=»50». Уменьшится ли ширина всей колонки? Как вы объясните происходящее смещение цифры «1»?

b) таблицы «фиксированные» и «резиновые»

В приведенном примере сумма ширины каждой колонки равна ширине таблицы, а что произойдет, если ширину таблицы сделать больше? Измените в первой строке параметр на width=»500».

Сделайте вашу таблицу «резиновой», измените в первой строке значение параметра width=»300» на width=»50%». Посмотрите, что будет происходить с таблицей при изменении ширины экрана браузера.

c) добавление фонового изображения

Добавьте для первой строки вашей таблицы фоновый рисунок. Во второй строке добавьте параметр background = “fon.gif” (где fon.gif имя вашего фонового рисунка). Удивительно, что фоновый рисунок у первой строки не появился, но еще более удивительно, что если мы откроем полученный html-документ в визуальном редакторе то в нем мы фон увидим!

Для того чтобы фон был виден в браузере, параметр background = “fon.gif” должен задаваться в каждой ячейке строки (строки 3 и 4 в нашем примере).


  1. Примените полученные знания для создания более сложного вида вашей стартовой страницы. Разбейте ссылки по колонкам:



Рисунок 3- Стартовая страница с ссылками, разбитыми на колонки.

  1. Сохраните понравившуюся вам страницу в сети интернет. Проанализируйте ее html-код. Используются ли в ней таблицы? Начертите схему табличного каркаса данной страницы.

  2. Создайте табличный каркас для данного дизайн-макета (рисунок 4):





Рисунок 4- Выделение табличного каркаса в дизайн-макете.

Контрольные вопросы:


  1. Какова структура HTML-документа? Перечислите теги заголовка документа.

  2. Почему важно делать описание страницы в метатегах?

  3. Перечислите теги форматирования web-документа.

  4. Как задать гиперссылки на web-странице? Какие виды гиперссылок вы знаете?

  5. Как вставляется изображение на web-страницу? Какие форматы графических файлов целесообразно использовать на web-странице и почему?

  6. Для каких целей используются таблицы в сети Интернет?

  7. Как определяются строки и ячейки таблицы?

  8. Какие параметры у тегов таблицы задают положение объекта внутри ячейки?

  9. Почему важно ставить в html-коде реальные параметры высоты и ширины изображения?

  10. В каком случае проявляется параметр размера границы у изображений?