Интернет стал популярен с появления сервиса WWW, используя который человек мог перемещаться между документами, связанными друг с другом гиперссылками. Документы могли содержать текст и графику, чуть позже появилась возможность вставлять мультимедийную информацию. Страницы писались на языке HTML. Это - очень простой язык, изначально он предназначался для логической разметки текстового документа: выделения в нем заголовков, основного текста, создания гиперссылок.

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

1. Все создаваемые вами файлы должны иметь только латинские имена, без использования символов пробелов и спецсимволов. Файлы должны иметь расширения htm или html. Так же я советую НЕ использовать заглавные символы в названии файлов. В операционной системе Windows это замечание не важно, но привычка поможет вам в дальнейшем избежать проблем при переносе ваших проектов на удаленный сервер.

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

3. Вся работа будет происходить в двух программах: выбранный вами текстовый редактор и программа - браузер. Один и тот же документ я открываю сразу в двух программах, внеся и сохранив изменения в редакторе, я обновляю страницу в браузере (нажатие клавиши F5). Это позволяет увидеть, как страница выглядит в окне браузера.

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

Любой html-документ включает в себя обычный текст и html-код. Ниже представлен пример кода:

Листинг № 1

<html>
   <head>
   <title>Структура документа html</title>
   </head>
<body>
   <h1 align="center">основные теги</h1>
   <p>текст, отображаемый в окне браузера</p>
</body>
</html>

Давайте рассмотрим его особенности.

  1. Текст, который мы хотим видеть в окне браузера, помещается между тегами.
  2. Все теги помещаются заключены в фигурные скобки. Большинство тегов парные, например, <title>…</title>. Закрывающий тег начинается с символа / «слэш». Парные теги выделяют текстовый блок и придают ему на странице некоторый статус, например, теги <h1>…</h1> помечают текстовый блок как заголовок.
  3. Большинство тегов имеют многочисленные параметры, например, заголовок, помеченный тегами <h1 align="center">…</h1> в отличие от <h1>…</h1> располагается в центре окна браузера. Каждый параметр представлен в виде пары имя_параметра=«значение_параметра», например, width="80". Все параметры располагаются в открывающем теге. Если параметров несколько, то они отделяются пробелами и их порядок не имеет значения.
  4. Информация, располагаемая между тегами <head> … </head>, не отображается в окне браузера, там находятся тег заголовка страницы, теги для поисковых машин, программный код, написанный на скриптовом языке, например JavaScript, другая служебная информация.
  5. Вся информация, видимая в окне браузера, помещается между тегами <body>…</body>

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

Практическая работа «Структура документа HTML»

  1. Наберите предложенный выше фрагмент html-кода в ASCII-редакторе, например в Блокноте. Сохраните его в отдельной папке под именем 1.htm, а затем откройте ваш документ в браузере.
  2. Измените регистр символов в набранных тегах, <h1> замените на <H1>. Сохраните изменения, обновите страницу в браузере. Что изменилось?
  3. В текст, находящийся между тегами <p> … </p>, после каждого слова добавьте дополнительные пробелы. Сохраните изменения, обновите страницу в браузере. Что изменилось?
  4. В документ добавьте произвольные разрывы строк (в произвольных местах нажмите на клавишу Enter). Сохраните изменения, обновите страницу в браузере. Что изменилось?
  5. Добавьте в текст произвольный, несуществующий парный тег. Сохраните изменения, обновите страницу в браузере. Что изменилось?
  6. Удалите все теги в разделе <body>. Сохраните изменения, обновите страницу в браузере. Что изменилось?
  7. Сделайте выводы.

2.2 Теги логической разметки, гиперссылки

Изначально язык html разрабатывался не для оформления страниц, а для их логической разметки. Очень важно понимать эту особенность языка. Если мы посмотрим на страницу с научной статьей, то мы увидим в ней следующие элементы: заголовки, подзаголовки, основной текст, в котором встречаются различные выделения, цитаты и т.п. К этому набору язык HTML добавляет еще гиперссылки. Давайте рассмотрим основные теги, придающие тексту, заключенному в них, определенный «вес».

<h1> - парный тег, служит для выделения текста в заголовок первого уровня. Заголовки могут быть, начиная от первого, самого значимого, до шестого уровня. Хотя на практике в одном документе столько типов подзаголовков практически не встречается.

<p> - парный тег для, выделения текста в абзацы, то есть в основной текст.
align="left | right | center" – с помощью данного параметра вы можете выравнивать свои заголовки и абзацы соответственно полевому, правому краю и по центру. Пример использования данного атрибута:
<p align="center"> основной текст, выровненный по центру </p>.

<br> - пример непарного тега, который выполняет перенос текста на новую строку, не создавая новый абзац.

<b> - парный тег, помещенный текст выделяется полужирным начертанием. Иногда полужирное начертание выделяется с помощью парного тега <strong>.

<i> - парный тег, помещенный текст выделяется курсивом.

<pre> - парный тег, очень активно применяемый для публикации больших фрагментов предварительно отформатированного текста. Рассмотрим в чем его особенность. Если мы хотим поместить на страницу стихотворение, то нам неудобно использовать для этого тег <p>, так как браузер проигнорирует все переносы в стихотворении и расположит весь текст одной строкой. А вот тег <pre> все разрывы строк, все пробелы сохранит без изменения.

Существует еще несколько тегов, выделяющих текст в различные блоки: цитаты, программный код, но самые распространенные мы рассмотрели. Во всех случаях совершенно неизвестно, какого размера будет текст на экране компьютера, за это в браузере отвечает команда Вид – Размер шрифта. Неизвестно, сколько строк на экране компьютера будет занимать каждый абзац, это зависит от разрешения вашего монитора и от того, какого размера окно браузера, открывшего ваш документ. Повторюсь еще раз, HTML не отвечает за оформление текста, а только за его «вес» в документе.

Вы можете возразить, а как же парный тег <font> и его многочисленные параметры, позволяющие задавать размер, цвет, шрифт текста? Вот пример использования этого тега:

<font size="5" color="blue">текст будет синего цвета, «пятого» размера</font>

Безусловно, мне известно об этом теге. А также известно, что применять его нужно только в крайних случаях. Если вы начнете разукрашивать свой документ с его помощью, то любые последующие изменения страницы будут очень трудоемкими. Представьте, что вы оформили с помощью этого тега все заголовки в документе. Если вы захотите сделать все заголовки поменьше, то потребуется вручную изменить все места, где вы использовали тег <font>. К оформлению текста мы вернемся в главе, посвященной CSS (каскадным таблицам стиля), а пока я советую удовлетвориться возможностями, которые нам предлагает классический HTML.

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

<BODY bgcolor="black" text="silver" link="yellow" vlink="orange">

В данном примере мы говорим браузеру, что страница должна быть черного цвета, текст – серебристого цвета, ссылки желтого цвета, а вот ссылки, на которые мы уже «нажимали», становятся оранжевыми (за это отвечает параметр vlink). Так как запомнить названия для цветов непросто, то для кодирования цвета используется шестнадцатеричная запись в формате #RRGGBB. То есть первые две цифры указывают красную составляющую, вторые две цифры – зеленую, а последние две – синюю составляющую. Пугаться шестнадцатеричного кода не нужно. В профессиональных редакторах, например, Adobe PhotoShop вы можете получать этот код автоматически (рисунок 5).

 Выбор цвета в Adobe PhotoShop. Его шестнадцатеричное представление
Рис. 5. Выбор цвета в Adobe PhotoShop. Его шестнадцатеричное представление.

Таким образом, приведенный выше пример можно переписать следующим образом:
<BODY bgcolor="#000000" text="#C0C0C0" link="#FFFF00" vlink="#FFA500">

Гиперссылки

Для соединения двух html-документов используется гиперссылки, фрагменты текста, рисунки, при щелчке на которые осуществляется переход на новый документ. Синтаксис тега следующий:
<a href="/адрес, на который нужно перейти"> текст, на который нужно щелкнуть </a>

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

Абсолютные ссылки используются в том случае, если мы хотим перейти на документ, адрес которого неизменен. Это, прежде всего, ссылки на внешние интернет-ресурсы. Например, данный фрагмент
<a href="http://www.ya.ru">Спроси у Яндекса</a>
создаст ссылку на страницу поисковой системы.

А вот использование абсолютной ссылки, представленной ниже неприемлемо:

<a href="file:///D|//Document/html_4.0/index.html">Справочник html</a>

Здесь ссылка ведет на внутренний ресурс, расположенный на диске D, в каталоге Document. Именно такие ссылки пытаются создать визуальные редакторы. И на вашем локальном компьютере все будет работать правильно, но когда вы перенесете ваш документ на удаленный сервер, там уже не окажется ни диска D ни каталога Document и мы получим «мертвую ссылку».

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

Структура каталога содержащего сайт
Рис. 6. Структура каталога содержащего сайт.

Предположим, мы в данный момент находимся на странице 1.htm. Для того, чтобы с нее перейти на страницу 2.htm, нам понадобится следующая конструкция: <a href="/2.htm"> ссылка </a>, то есть мы говорим серверу: «Ищи файл в том же каталоге, где находится данная страница».

Для перехода на страницу index.htm, ссылка будет более сложной: <a href="/../index.htm"> в начало </a>, то есть выйди из каталога, где находишься в данный момент и найди на уровне выше файл index.htm. Я думаю, что ссылка <a href="/../info/4.htm">четвертая глава</a> уже понятна без комментариев.

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

Внутренние ссылки используются для быстрого перемещения внутри документа. Это особенно актуально, если ваша страница длинная, состоит из нескольких разделов. Для таких перемещений вам, во-первых, нужно создать внутри html-документа «именованные якоря» - точки, куда нужно совершить прыжок. («Именованный якорь» - это дословный перевод «Named Anchor» – именно так называются эти точки в литературе.)

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

Они помечаются следующим фрагментом кода: <a name="1"></a>. Имя якоря, то, что находится в кавычках, может быть произвольным набором символов, но, разумеется, это имя должно быть уникальным на данной странице. Этот фрагмент нужно поместить перед тем абзацем, куда нужно совершить переход.

Теперь, чтобы совершить переход в произвольном месте страницы, нам нужно добавить следующую ссылку: <a href="#1">ссылка</a>. Знак решетка, сообщит браузеру, что переход совершается внутри страницы.

Очень часто в сети интернет можно встретить ссылки на электронный адрес человека. Для таких целей используется несколько измененный вид тега <a>.

<a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.&subject=тема_письма">текст ссылки</a>

Параметр mailto: является обязательным, он указывает на e-mail адресата. Также при необходимости через знак & указывается тема отправляемого сообщения. При щелчке на такую ссылку у пользователя загружается установленная почтовая программа, например, Outlook Express.

Практическая работа по теме «Логическая разметка, гиперссылки»

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

  1. web-сервисы (ссылки на почтовые, поисковые сервера, чат и т.п.);
  2. внутренние ресурсы (ссылки на учебники, статьи, скаченные из сети интернет);
  3. любимые сайты (ссылки на ваши любимые ресурсы сети).

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

Пример стартовой страницы
Рис. 8. Пример стартовой страницы.

2.3 Вставка графики

Любая html-страница – это текстовый документ. Все рисунки, которые мы видим на странице – это внешние файлы, которые располагаются на сервере и встраиваются в страницу уже в браузере. Для вставки графики используется следующий непарный тег: <img src="/адрес рисунка">. При всей простоте тега нужно помнить несколько важных моментов:

1. В интернете рисунки вставляются в трех форматах:gif, jpg и png, у каждого есть свои особенности

формат

достоинства

недостатки

применение

.gif

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

- максимальное количество цветов - 256, что, для фотографий мало;
- так как прозрачность однобитная, (т.е. каждый пиксель может быть либо прозрачен, либо виден), нельзя создавать плавные переходы между рисунком и фоном;
- анимация примитивная, при большом размере файла. В данный момент практически не применяется

идеально подходит для кнопок, разделительных полос, другой декоративной графики.

.jpg

- высокая степень сжатия;
- количество цветов ~ 16 млн.

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

применяется для хранения фотографий

.png

- высокая степень сжатия;
- количество цветов ~ 16 млн.
- прозрачность восьмибитная, (т.е. можно делать плавные переходы в прозрачные области);

идеальный формат если бы не одно «но»: Internet Explorer некорректно отображает прозрачность рисунка, а без прозрачности можно пользоваться форматом jpg, результат будет тот же. (начиная с версии 7 IE научился работать с .png)

применение ограничено

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

3. У тега <img> много параметров. Рассмотрим важнейшие:

width="…" height="…" параметры, задающие размеры рисунка в пикселях. Эти параметры нужно ставить обязательно, без них браузер будет ждать загрузки всего рисунка, чтобы правильно отобразить фотографию на странице. Мы можем поставить в параметрах произвольные значения. Здесь таится распространенная ошибка, берется фотография, сделанная цифровой камерой с размерами 2048 на 1536 пикселей, после в визуальном редакторе с помощью маркеров уменьшается размер рисунка так, чтобы он занимал положенное ему место на экране, например 300 на 240 пикселей (рисунок 9).

Уменьшение фотографии в визуальном редакторе
Рис. 9. Уменьшение фотографии в визуальном редакторе.

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

border="…" параметр, задающий ширину границы вокруг изображения. Этот параметр актуален, если рисунок является ссылкой, т.е. заключен в теги <a href="/"></a>, то вокруг него появляется синяя рамка. Если параметр равен нулю, граница будет невидима.

alt="…" параметр, задающий подпись к рисунку при наведении указателя мыши. Данный параметр также поможет пользователю, который отключил рисунки в своем браузере. Данный параметр всегда нужно задавать, причем писать в кавычках осмысленный текст, что изображено на фотографии, в таком случае ваши страницы будут лучше индексироваться поисковыми роботами. (О продвижении вашего интернет проекта мы поговорим в главе шестнадцать.)

Итак, правильным будет следующий тег:
<img src="/images/foto.jpg" border="0" width="300" heght="240" alt="радар">
при условии, что фотография находится в подкаталоге images, она уменьшена до нужных размеров и оптимизирована в графическом редакторе.

Практическая работа по теме «Вставка графики»

  1. Добавьте к своей стартовой странице раздел фотоальбом, в котором разместите несколько (не более пяти) ваших любимых фотографий.
  • Все фотографии должны быть двух видов: большие размером 600 на 400 пикселей и маленькие размером 120 на 90 пикселей. Уменьшение фотографий выполните в любом известном вам редакторе, например ACDSee.
  • Сохраните фотографии в паке с файлом index.htm, дав им однотипные имена: 1.jpg, 2 jpg, … для маленьких, и 1_big.jpg, 1_big.jpg для больших.
  • Ссылки на маленькие фотографии добавьте в файл index.htm.
  • Сделайте каждую маленькую фотографию ссылкой, то есть при щелчке на ней она должна открывать новое окно с увеличенной копией фотографии. Для этого она должна иметь следующий код:
    <a href="/1_big.jpg" target="new"><img src="/1.jpg" border="0" width="120" heght="90"></a>
  • Обратите внимание, что тег <a> имеет параметр target="new">. Благодаря нему увеличенная фотография откроется в новом окне.
  1. Добавление фона к странице. Будьте осторожны с фоновыми картинками. Во-первых, они должны быть невелики по размеру, чтобы страница быстро загружалась. Во-вторых, они должны иметь свойство текстуры, то есть при выкладывании таких картинок не должно быть видно швов, рисунки должны плавно перетекать друг в друга. И, в третьих, помните, что читать текст поверх текстур очень неудобно.
  • Найдите в сети интернет фоновые рисунки (например, на сайте http://www.woweb.ru/index/0-3) обратите внимание, что каждый файл - это небольшой рисунок, который может продолжаться в стороны, создавая фоновое изображение «без швов».
  • Добавьте для тега <body> следующий параметр: <body background="img.gif">. Разумеется, ваш фоновый рисунок должен располагаться в той же папке, что и файл index.htm и называться img.gif.
  • Проведите эксперимент, как будет выглядеть ваша страница, насколько удобно читать текст с разными фоновым изображениями.

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

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

Дело в том, что в классическом HTML нет средств для точного расположения объектов на странице, я не могу сказать браузеру: «Хочу, чтобы логотип располагался в правом верхнем углу…»

Пример сложного дизайна страницы, состоящего из многих элементов
Рис. 10. Пример сложного дизайна страницы, состоящего из многих элементов,
каждый из которых занимает определенное место на странице.

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

Каркас страницы представлен из четырех таблиц
Рис. 11. Каркас страницы представлен из четырех таблиц
(на самом деле, в данном макете таблиц больше, показаны основные).

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

Листинг № 2.

<table border="1">
   <tr>
     <td> 1 ячейка </td>
     <td> 2 ячейка </td>
   </tr>
   <tr>
     <td> 3 ячейка </td>
     <td> 4 ячейка </td>
   </tr>
   <tr>
     <td> 5 ячейка</td>
     <td></td>
   </tr>
</table>

Все достаточно просто:

  1. Таблица начинается и заканчивается парным тегом <table></table>.
  2. В нашем случае – это видимая таблица, толщина ее границы равна одному пикселю (параметр border="1").
  3. Каждая строка начинается и заканчивается парным тегом <tr></tr>.
  4. Каждая строка начинается и заканчивается парным тегом <td></td>.
  5. Обратите внимание, что в последней строке в ячейке находится странная комбинация   Комбинация символов nbsp – происходит от Non Break Space (неразрывный пробел). Возможно, так вам будет легче ее запомнить.
    Эта комбинация символов – пробел. Мы помним, что обычные пробелы в языке HTML игнорируются. Если мы не вставим в ячейку никакой текстовой информации, то данная ячейка будет выбиваться на странице, у нее не будет границы (рисунок 12).

В первой таблице шестая ячейка содержит комбинацию   , во второй таблице ячейка пуста
Рис. 12. В первой таблице шестая ячейка содержит комбинацию   , во второй таблице ячейка пуста.
На рисунке можно видеть проблемы с ее обрамлением.

Тег <table> имеет множество параметров:

align = "center", этот параметр задает выравнивание таблицы относительно текста, в данном случае таблица будет располагаться по центру. Параметр align может принимать следующие значения: center, left, right. Если параметр отсутствует, таблица будет занимать отдельную строку в вашем тексте.

background = "fon.gif" – параметр, определяющий рисунок для заднего фона. Профессиональные сайты практически не используют данный параметр, исключения только подтверждают это правило

bgcolor = "#FFFFCC" – параметр определяет задний фон таблицы. Цвет задается с помощью шестнадцатеричного кода.

border = "0" – толщина рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки.

bordercolor = "#003333" – цвет границ таблицы.

cellspacing = "5" – задает расстояние между ячейками таблицы

cellpadding = "5" – задает расстояние между содержимым ячейки и ее рамкой.

width="50%" – ширина таблицы пикселях или в процентах от ширины окна браузера, например, в приведенном примере параметр говорит браузеру, что таблица будет шириной в половину окна. Таблицы, ширина которых задана в процентах, называются резиновыми. Они тянутся в зависимости от размера окна браузера. Таблицы, ширина которых задана в пикселях, называются фиксированными или жесткими.

И здесь мы подходим к самому главному. Так как таблицы, ячейки могут иметь фиксированную ширину, разработчик страницы может определять, где на экране будет располагаться тот или иной элемент страницы. Но для того чтобы применить эту идею, необходимо познакомиться с параметрами ячейки.
Для ячеек (тег <td>) возможны такие же параметры, как и для тега <table>: bgcolor, bordercolor, width, height. Нужно помнить, что изменения коснутся только данной конкретной ячейки, для которой задан параметр.

Также у тега <td> есть несколько уникальных параметров:

align="center" Данный параметр определяет, как будет выровнен текст в ячейке по горизонтали. Параметр принимает одно из трех значений: left (по умолчанию) | rigth | center.

valign = "top" Выравнивание в ячейке по вертикали Параметр принимает один из трех значений: top (по верхнему краю) | middle - по центру. Именно так будет происходить выравнивание, если вы опустите параметр valign | bottom - по нижнему краю.

colspan="3" Объединение ячеек по горизонтали. Значение параметра указывает количество столбцов, которое объединено в одной ячейке.

rowspan="2" Объединение ячеек по вертикали. Значение параметра указывает количество строк, которое объединено в одной ячейке.
Предположим, нам нужно создать таблицу, как показано на рисунке 13.

Пример таблицы с объединенными ячейками
Рис. 13. Пример таблицы с объединенными ячейками.

Для этого нам потребуется следующий код в html-странице:

Листинг № 3.

<table width="300" border="1" cellpadding="0" cellspacing="0">
  <tr bgcolor="#999999">
    <td width="100"> </td>
    <td colspan="2" align="center">группа 1 </td>
  </tr>
  <tr>
    <td width="100" rowspan="2" valign="middle">группа 2 </td>
    <td width="100" align="center">1</td>
    <td width="100" align="center">2</td>
  </tr>
  <tr>
    <td width="100" align="center">3</td>
    <td width="100" align="center">4</td>
  </tr>
</table>

Практическая работа по теме «Вставка таблиц»

1. Работа с таблицами требует аккуратности, изменение одного параметра часто приводит к непредсказуемым результатам. В практической работе мы рассмотрим наиболее часто встречающиеся ошибки. Создайте страницу, содержащую код, описанный выше. Проведите исследования «Что произойдет с таблицей, если…», сделайте выводы.
a. изменение ширины

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

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

  • В приведенном примере сумма ширины каждой колонки равна ширине таблицы, А что произойдет, если ширину таблицы сделать больше? Измените в первой строке параметр на width="500".
  • сделайте вашу таблицу «резиновой», измените в первой строке значение параметра width="300" на width="50%". Посмотрите, что будет происходить с таблицей при изменении ширины экрана браузера.

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

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

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

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

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

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

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

2.5 Формы

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

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

Любая форма на html-странице имеет следующий вид:

<form method="…" action="…">
   элемент формы
   элемент формы
</form>

Элементами формы могут быть поля ввода, списки, переключатели, кнопки и др.
Тег формы имеет два обязательных параметра action и method:

action="…" задает адрес сервера, адрес интернет страницы, куда перенаправляются данные пользователя.

method="…" задает способ передачи данных на сервер. Параметр может принять два значения GET и POST. каждый имеет свои особенности. Чтобы понять их, предположим, что наша форма служит для регистрации пользователя, и нам нужно передать серверу http://www.server.ru две переменные login и password. Если выбран метод GET, то в строке адреса браузера мы увидим

http://www.server.ru?login=ivan&password=123.

Проанализировав строку можно заметить:

  • все данные из формы приводятся к одному виду: имя переменной = ее значение
  • все переменные располагаются в строке адреса за символом «?»
  • переменные отделяются друг от друга символом амперсанта «&»

Метод GET идеально подходит для отладки сценария, но имеет ряд ограничений. Во-первых, им нельзя передавать секретные данные, например пароли. Они видны в строке адреса. Во-вторых, длина адреса не может превышать 256 символов, поэтому большой объем данных методом GET нам передать не удастся.

Метод POST лишен этих недостатков, вы можете передавать любой объем данных, они отправляются в отдельном «невидимом» потоке

Теперь рассмотрим распространенные элементы формы:

<input type="text" name="name"> - тег для построения поля ввода. Все параметры – обязательны: type="text" сообщает, что это именно текстовое поле, name="…" задает имя переменной, в которую будет заноситься вводимый текст.

<textarea name="info" rows="3" cols="25"> - задает многострочное поле для ввода больших объемов текстовой информации. Параметры rows и cols задают размер текстового поля (количество строк и количество текстовых символов в строке). Если текст посетителя превысит размеры поля, автоматически появится вертикальная полоса прокрутки.

<select name="age">
   <option value="1">значение 1</option>
   <option value="2">значение 2</option>
   …
</select>

Эта конструкция создает список с выбором значений. Количество значений списка может быть произвольным. Если у тега option отсутствует параметр value, то переменной age (в примере, список имеет такое имя) будет присвоено текстовое значение «значение 1». Это не всегда удобно, правильнее присвоить числовое значение 1, это решит многие сложности при дальнейшей обработке значений в программном коде.

<input name="…" type="radio" value="…"> Тег для вставки «радиокнопки» набора переключателей, среди которых выбранным может быть только один. Название «радиокнопка» пошло от старинных радиоприемников с кнопками выбора радиоволны. В каждый конкретный момент могла быть нажата только одна из кнопок. Весь набор радиокнопок должен иметь одинаковое имя (значение параметра name="…") и различные значения параметра value="…".

<input type="checkbox" name="…" value="…"> В отличие от «радиокнопок» набор переключателей типа checkbox могут выбираться посетителем в произвольном порядке, количестве.

Нам осталось рассмотреть теги, создающие кнопки.

<input type="submit" value="отправить"> Добавив этот тег, вы увидите на экране кнопку, на которой написано «отправить» (параметр value). При щелчке на нее данные формы собираются и перенаправляются на сервер, с параметрами, указанными в теге <form>.

<input type="reset" value="очистить"> Тег, рисующий на экране кнопку, удаляющую все значения, которые вы ввели в форму.

Давайте объединим эти элементы и построим форму, передающую на сервер данные о клиенте:

Листинг №4.

<form name="form1" method="get" action="index.htm">
  <p>
    <b>фамилия имя:</b> <input type="text" name="name">
  </p>
    <p><b>возраст:</b>
    <select name="select">
      <option>10-16</option>
      <option>17-25</option>
      <option>26-40</option>
      <option>более 40</option>
    </select>
  </p>
  <p>
    <b>информация:</b>
    <textarea name="info" rows="3" cols="25"></textarea>
  </p>
  <p>
    <b>пол:</b>
    <input name="sex" type="radio" value="male"> мужской
    <input name="sex" type="radio" value="female"> женский
  </p>
  <p>
    <b>иностранные языки:</b>
    <input type="checkbox" name="language1" value="en"> английский
    <input type="checkbox" name="language2" value="de"> немецкий
    <input type="checkbox" name="language3" value="fr"> французский
    <input type="checkbox" name="language4" value="other"> другие   
  </p>
  <p>
    <input type="submit" name="submit" value="отправить">
    <input type="reset" name="submit2" value=" очистить ">
  </p>
</form>

Практическая работа по теме «Вставка форм».

1. Создайте html-документ, содержащий код, для вставки формы (листинг 4). Сохраните Ваш файл под именем form.htm (ваш документ должен находиться в том же каталоге, что и файл index.htm из предыдущих заданий).
При заполнении формы и нажатии на кнопку «отправить» вы должны перенаправляться на страницу index.htm. Что вы видите в строке адреса?
Что произойдет, если в форме поменять метод GET на POST?

2. Проанализируйте html-код, страницы поискового сервера Яндекс (www.ya.ru). Найдите на ней теги, выводящие на экран форму для построения запроса пользователя.
Добавьте на свою стартовую страницу следующий код:

<FORM action="http://www.yandex.ru/yandsearch" method="get">
  <INPUT maxLength=160 size=20 name=text>
  <INPUT type=submit value=Найти!>
  </FORM>

Теперь вы сможете набирать запросы для Яндекса сразу на своей стартовой странице.

2.6 Метатеги

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

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

Кодировка страницы
<МЕТА http-equiv="Content-Type" content="text/html"; charset="windows-1251">
Мы знаем, что для кодирования символов русского языка существует несколько кодовых таблиц. Самые распространенные русские кодировки в сети интернет – windows-1251 и koi-8, а еще есть Mac, ISO, DOS, Unicode. Проблема кроется в том, что посетители часто об этом не подозревают, и, открыв страницу с бессмысленным набором символов, они не выбирают команду меню Вид – Кодировка – название кодировки, а навсегда уходят от вас. Поместив в метатеги информацию о кодировки вашей страницы (параметр charset=""), вы поможете браузеру посетителя вашего сайта правильно отобразить станицу на экране.

Ключевые слова
<МЕТА name="Keywords" content="ключевые слова вашей страницы">
Значение параметра content="" предназначен для поискового робота. Вы должны написать те ключевые слова, которые характеризуют содержимое вашей страницы. Количество слов неограниченно и поэтому на некоторых сайтах можно увидеть десятки строк таких слов. Предположим, ваш сайт посвящен компьютерным играм, в таком случае смело помещайте в кавычки название игры, а также все, что относится к данной игре. Каждое слово робот поместит в свою базу данных и когда человек наберет в Яндексе название вашей игры он получит ссылку на ваш сайт.

Описание содержимого страницы
<МЕТА name="Description" content="Краткое описание страницы">
Текст, который вы напишете в данном метатеге, первым прочтет поисковый робот. Но после, вместе со ссылкой на ваш сайт Яндекс (Рамблер, Гугл и т.д.) будет отображать именно эти два–три предложения. От того, насколько толково будет написана главная мысль, будет зависеть, захочет ли человек щелкнуть на ссылку и заглянуть к вам.

Вопросы для самоконтроля

  1. Объясните смысл выражения «логическая разметка».
  2. Как язык HTML поступает с пробелами и символами абзаца?
  3. Приведите примеры парных и непарных тегов.
  4. В чем отличие тегов <p> и <pre>?
  5. Почему нельзя использовать внутри сайта абсолютные ссылки?
  6. Чем нехорош тег <font>?
  7. Как получить шестнадцатеричный код выбранного цвета и где он используется?
  8. Для каких целей используются таблицы в интернете?
  9. Какие параметры у тегов таблицы задают положение объекта внутри ячейки?
  10. Какие графические форматы используются в сети интернет?
  11. Почему важно ставить в html-коде реальные параметры высоты и ширины изображения?
  12. В каком случае проявляется параметр размера границы у изображений?
  13. Какие методы передачи данных из формы используются?
  14. Без какого параметра любой объект формы становится бессмысленным элементом на странице.
  15. Почему важно делать описание страницы в метатегах?