- •Часть 1 Основы языка гипертекстовой разметки html
- •Основы публикации в Сети Из истории создания Сети
- •Всемирная паутина World Wide Web
- •Протокол http
- •Язык html
- •Гипертекст и гиперссылки
- •Основы организации веб-страниц
- •Планирование и организация сайта
- •Анатомия веб-страниц. Основные элементы документа
- •Заголовок документа
- •Тело страницы
- •Ввод текста абзаца
- •Горизонтальная линия
- •Заголовки
- •Стилизация текста
- •Атрибуты списков
- •Построение таблиц Создание таблиц
- •Заголовок
- •Атрибуты cellpadding и cellspacing
- •Создание гиперссылок
- •Создание ссылок
- •Ссылки на элементы текущей страницы (закладки)
- •Специальные ссылки Ссылка mailto
- •Ссылка на сайт ftp
- •Изображения
- •Ввод текста
- •Добавление гиперссылок
- •Создание списков
- •Добавление графических элементов
- •Сохранение документа в формате веб-страницы
- •Использование Мастера веб-страниц
- •Создание ссылки на раздел страницы
- •Вставка рисунков
- •Создание таблиц
- •Разработка веб-узла Мастер веб-узла
- •Режимы просмотра
- •Общие поля элементов
- •Просмотр страницы
- •Содержание
- •Часть 1 Основы языка гипертекстовой разметки html
- •620002, Екатеринбург, ул.Мира, 19
- •620002, Екатеринбург, ул.Мира, 19
Создание ссылок
Ссылка на HTML-документ имеет вид:
<a href="URL">текст_подсказки_для_ссылки</a>
Пример:
<a href="http://www.mycorporation.com/index.htm"> Главная страница </a>
Если задан базовый адрес, то ссылка будет иметь вид:
<a href="index.htm"> Главная страница </a>
!!! Нельзя делать вложенные ссылки.
Ссылки на элементы текущей страницы (закладки)
Если имеется длинный html-документ, то удобно сделать ссылки внутри этого документа для быстрого перехода на нужные разделы. Для этого в начале необходимо присвоить имя той части текста, на которую вы хотите сделать ссылки, а затем поставить якорь, указывающий на нее (т.е. назначить закладку).
Пример:
Пусть необходимо организовать закладку на почтовом адресе фирмы. Помечаем этот текст:
<a name="#q1">ул. Мира, 19 </a>
Теперь в другом месте странице можно сделать ссылку на этот раздел:
<p>Смотрите <a href="#q1"> Наш адрес </a> </p>
На именованные разделы можно ссылаться и с других страниц. В этом случае имя раздела становится частью адреса.
Пример:
<p>Смотрите <a href="http://mycorporation/index.htm#q1"> Наш адрес </a> </p>
Специальные ссылки Ссылка mailto
Создание ссылки на электронный почтовый адрес делается следующим образом:
<a href="mailto:почтовый_адрес">Текст_подсказки </a>
Пример:
<a href="mailto:ivanov@mail.ru">Мой e-mail </a>
Ссылка на сайт ftp
Протокол FTP используется для обмена файлами между компьютерами. Для этого нужен адрес FTP-сервера. Если вы предлагаете пользователю скачать какой-нибудь файл, нужно указать путь к нему.
Пусть имеется каталог товаров фирмы (файл catalog.zip) в каталоге products сайта. Тогда ссылка на него будет выглядеть так:
<a href="ftp://ftp.mycorporation.com/products/downloads/catalog.zip">Получить каталог товаров </a>
!!! Здесь downloads – это папка, вложенная в папку products и хранящая файлы, которые предлагается пользователям скачать с сервера.
Обмениваться файлами можно и по протоколу http:
<a href="http://mycorporation.com/products/downloads/catalog.zip">Получить каталог товаров </a>
Протокол http:// позволяет передавать двоичные файлы, особенно файлы *.exe, *.zip, *.sit.
Изображения
Для размещения изображений в HTML-документах используется элемент <img/>. Следует учитывать, что вы добавляете ссылку на файл, содержащий эту картинку, при этом сам файл может находиться на жестком диске сервера в каталоге вашего сайта или где-то в Сети.
Изображения – это файлы определенных форматов, которые распознаются браузерами и графическими приложениями. В Сети используются форматы JPEG, GIF и PNG. Если ваши файлы других форматов, их следует преобразовать в один из этих форматов с помощью графического редактора. Следует учесть, что большие по размеру графические файлы увеличивают время загрузки страницы.
Элемент <img/>
Формат элемента:
<img src="адрес_изображения"/>
Пример:
<p> <img src="portrait.gif"/> Наш коллектив</p>
(если картинка в том же каталоге, что и страница.)
<p> <img src="/images/portrait.gif"/> Наш коллектив</p>
если картинка в подкаталоге images корневого каталога сайта.)
Адрес изображения может задаваться абсолютной ссылкой.
<p> <img src="http://www.mycorporation.com/images/portrait.gif"/> Наш коллектив</p>
В том случае, когда у пользователя нет графического браузера либо он отключает просмотр графики, вместо рисунков можно на странице разместить альтернативный текст с помощью атрибута alt элемента img.
<img src="graph1.gif" alt="Здесь картинка"/>
Для размещения картинок совместно с поясняющими их текстом используется атрибут align элемента img:
<img align="значение" src="адрес_изображения"/>
Возможные значения атрибута: top (текст располагается рядом с верхней границей изображения), middle (рядом с серединой) и bottom (рядом с нижней границей).
Пример:
<p><img align="top" src="graph1.gif" alt="Наш офис"/>Наш офис</p>
На экране
Наш
офис
Атрибут align может принимать значения right (справа) и left (слева), которые переводят изображения в разряд плавающих. Картинки появятся не в том месте, где расположен элемент <img/>, а рядом с указанным полем (левым или правым).
У элемента <img/> есть еще два атрибута: width (ширина) и height (высота). Эти атрибуты позволяют изменять реальный размер изображений и тем самым влиять на скорость загрузки страницы в окне браузера. Значения задаются в пикселах или процентах.
<img src="graph1.gif" width="150" height="75"/>
Ссылки с использованием изображений
Если вы хотите, чтобы ссылка представляла собой не просто описательный текст, а какое-нибудь изображение, необходимо поставить якорь, включив в него ссылку на это изображение.
<a href="адрес_ссылки"> <img src="адрес_картинки" alt="текст"/> </a>
Средства разработки веб-страниц
Редактор Microsoft Word
Создание новой веб-страницы
Новый документ Word можно сохранить как веб-страницу. Соответственно, создавая документ на основе любого шаблона, вы создаете веб-страницу. Тем не менее, в состав средств редактора входит набор шаблонов для создания веб-страниц. Кроме того, можно создавать собственные шаблоны веб-страниц.
Для создания веб-страницы на основе шаблона необходимо выполнить следующие действия.
Ввести команду File/New (Файл/Создать).
В окне появившемся окне диалога выбрать вкладку «Веб-страница».
На данной вкладке выбрать значок требуемого шаблона и нажать кнопку ОК.
!!! При создании документов на основе шаблонов веб-страниц редактор автоматически переключается в режим просмотра веб-документов. Если вы создаете документ на основе шаблона другого типа, то для работы над веб-страницей необходимо переключиться в режим просмотра командой View/Web document
!!! Для создания собственного шаблона веб-страницы необходимо в окне диалога создания страницы установить опцию «Template» («Шаблон»).
