- •Содержание Теоретическая часть
- •Дание сайта шаг за шагом
- •1 Инструментальные средства для создания вэб–страниц html-редактор/блокнот
- •Графический редактор
- •Браузер
- •2 Создание шаблона страницы
- •Алгоритм создания шаблона страницы:
- •3 Создание текстового документа
- •Тэги управления цветом и размером шрифта Задание базового шрифта
- •Горизонтальная разделительная линия
- •Алгоритм создания текстового документа:
- •4 Создание ссылок в документе
- •Ссылки в пределах одного документа
- •Внешние ссылки
- •Алгоритм создания ссылок в документе:
- •5 Создание графики в документе
- •Графическое изображение – ссылка.
- •Алгоритм создания графических ссылок в документе:
- •6 Создание таблиц
- •Элемент table
- •Элемент caption
- •Элемент tr
- •Элементы td и th
- •Алгоритм создания таблиц в документе:
- •7 Общие правила проектирования навигационной схемы сайта
- •8 Создание главной и основной страницы
- •9 Хостинг, обзор компаний Интернета
- •10 Выгрузка и тестирование сайта
- •11 Раскрутка сайта Мета-тэги
- •Поисковые сервера
- •12 Банерообменные сети
- •Краткая справка по html
Ссылки в пределах одного документа
В случае если имеется большой по объему документ, то для навигации по нему бывает удобно указать ссылки внутри этого документа.
Например, документ содержит три главы с оглавлением вначале.
<!–оглавление
<a href=»#chapter1»>Первая глава</a>
<a href=”#chapter1”>Вторая глава</a>
<a href=”#chapter1”>Третья глава</a>
<!–текст <p><a name=”chapter1”>Первая глава</a>
Содержимое первой главы
<p><a name=»chapter2»>Вторая глава</a>
Содержимое второй главы
<p><a name=»chapter3»>Третья глава</a>
Содержимое третьей главы
В этом случае, тэгом name задается имя для каждой главы (chapter1, chapter2, chapter3), и ссылается на эти имена в начале документа. Если щелкнуть мышью на ссылку, браузер автоматически прокручивает страницу на то место, где расположено соответствующее этой ссылке имя.
Внешние ссылки
Для задания внешней ссылки, атрибуту href задается протокол, путь.
<a href=»протокол://путь/>
Варианты параметра атрибута href приводятся в таблице 6.3.
Таблица 6.3 – Значения параметра атрибута href
Параметр |
Значение |
href=»http://...» |
Ссылка на объект, который будет передаваться с использованием протокола HTTP. Может быть любым произвольным объектом. |
Href=»ftp://...» |
Ссылка на FTP-сервер. |
Href=»mailto:...» |
Ссылка на адрес электронной почты. При выборе этой ссылки, загружается почтовая программа. |
Алгоритм создания ссылок в документе:
Шаг 1. Откройте блокнот
Шаг 2. Создайте код страницы и откройте сохраненный документ в окне браузера.
5 Создание графики в документе
Для вставки графического изображения применяется тэг <IMG>. Пример кода:
<IMG src=»адрес_Картинки/ваша_Картинка.расширение(gif,jpeg) «align=»выравнивание»>, то есть <IMG src=»files/image1.jpeg»align=»right»>
Атрибуты тэга <IMG> приведены в таблице 6.4.
Таблица 6.4 – Атрибуты тэга <IMG>
Атрибут |
Назначение |
src=»URL» |
URL-адрес файла изображения. |
Alt=»text» |
Текст, отображаемый вместо изображения, при невозможности его вывода. |
align= |
Выравнивание изображения. Может принимать значения: left –выравнивание изображения по левой границе экрана браузера; right –выравнивание изображения по правой границе экрана браузера; top –выравнивание текста по верхней границе изображения; middle –выравнивание текста по центру изображения; bottom –выравнивание текста по нижней границе изображения; texttop –выравнивание текста по верхний границе изображения, относительно самых высоких символов; absmiddle –выравнивание середины строки относительно середины изображения; baseline –выравнивание нижней рамки изображения относительно базовой линии текстовой строки; absbottom –выравнивание нижней границы изображения относительно нижней границы текущей строки. |
Height |
Высота картинки в пикселях. |
Width |
Ширина картинки в пикселях. |
Border |
Ширина рамки вокруг картинки в пикселях (только NN). |
Hspace |
Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали. |
Vspace |
Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали. |
Примеры выравнивания изображения приведены в таблице 6.5.
Таблица 6.5 – Выравнивание изображения
Параметр |
Назначение |
left |
Изображение прижимается к левому полю окна. Текст обтекает изображение справа. |
Right |
Изображение прижимается к правому полю окна. Текст обтекает изображение с лева. |
Top |
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
Middle |
Выравнивание середины изображения по базовой линии текущей строки |
bottom |
Выравнивание нижней границы изображения по базовой линии текущей строки |
texttop |
Верхняя граница изображения выравнивается по самому высокому текстовому элементу теущей строки |
absmiddle |
Выравнивание середины изображения посередине текущей строки |
baseline |
Выравнивание нижней границы изображения по базовой линии текущей строки |
absbottom |
Выравнивание нижней границы изображения по нижней границе текущей строки |