Создание сайта компании
Для того, чтобы создавать простейшие страницы в интернете, достаточно воспользоваться простейшим редактором для создания HTML страниц стандартным блокнотом для Windows.
Основной структурной единицей языка HTML (HyperText Markup Language – язык разметки гипертекстов) является тег (от англ. Tag - дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид:
<ТЕГ атрибут 1=ЗНАЧЕНИЕ ... атрибут N=ЗНАЧЕНИЕ>
Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок, заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY> (содержание страницы). В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE> ... </TITLE> (имя страницы).
Для того чтобы создать документ HTML в текстовом редакторе Блокнот необходимо выполнить следующие действия:
Запустить текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
Создать типовую структуру HTML - документа и ввести текст.
Сохранить этот документ. При сохранении в качестве типа файла укажите «все файлы», в качестве имени файла main.html.
Закрыть блокнот. Найти файл main.html и открыть его с помощью интернет-браузера.
Для улучшения информативности Web-страница, как правило, содержит изображения и таблицы. Для того чтобы не перегружать страницу большим объемом разной информации, следует использовать гипертекстовые ссылки, которые позволяют быстро переходить от одного раздела к другому.
Для создания простейшего сайта необходимо создать исходные информативные HTML - документы с текстовым наполнением, картинками, таблицами и главный документ, который будет ссылаться на исходные.
Для того чтобы вставить изображение в Web-страницу используется тег <IMG> с обязательным атрибутом SRC (SouRCe, источник).
Атрибуты:
SRC – адрес файла на веб-сервере (URL), содержащего графическое изображение.
ALIGN – выравнивание.
Атрибуты тега: TOP- по верху; BOTTOM - по низу; MIDDLE - по центру; LEFT – слева; RIGHT – справа.
ALT - текст, который увидит пользователь, если рисунок не может быть выведен или при наведении курсора мыши.
WIDTH, HEIGHT – соответственно ширина и высота изображения в пикселях.
Таблицы оформляются тегами <TABLE> и </TABLE>.
Атрибуты:
ALIGN – выравнивание таблицы. Значения: LEFT, RIGHT или CENTER.
WIDTH - ширина таблицы в пикселях
BORDER – ширина обрамления ячеек таблицы в пикселях.
BORDERCOLOR – цвет грани таблицы.
BGCOLOR – фоновый цвет таблицы.
<TR></TR> - строка таблицы. Располагаются между тегами <TABLE> </TABLE> .
Атрибуты:
ALIGN – горизонтальное выравнивание содержимого строки. Значения: LEFT, RIGHT или CENTER.
VALIGN – вертикальное выравнивание содержимого строки. Значения: TOP, BOTTOM и MIDDLE.
<TD> </TD> - ячейка строки.
Атрибуты:
WIDTH, HEIGHT – соответственно ширина и высота в пикселях или процентах.
ALIGN, VALIGN – аналогично параметрам тега <TR>.
ROWSPAN – объединение смежных ячеек в одном столбце. Этот параметр принимает значения в зависимости от того, сколько ячеек нужно объединить.
COLSPAN – объединение смежных ячеек в одной строке. Этот параметр принимает значения в зависимости от того, сколько ячеек нужно объединить.
BORDERCOLOR – цвет грани ячейки.
BGCOLOR – фоновый цвет ячейки.
Для записи гипертекстовой ссылки используется тег <А>, который называют «якорь» (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде
<А НREF=»Адрес веб-ресурса»>Описание веб-ресурса</А> - ссылка на веб-ресурс.
Адрес веб-ресурса – может включать абсолютный или относительный адрес. Во втором случае адрес может вычисляться относительно текущего документа. В реальных случаях практически всегда используют относительные ссылки, так как это обеспечивает возможность перемещения проекта в любую папку без изменения HTML – кода страниц.
Например, в папке D:\HTML располагаются страницы с именами page1.html и page2.html. Организуется ссылка из документа page1.html на документ page2.html. Относительная ссылка будет выглядеть так:
<А НREF= page2.html>…</А>.
Абсолютная ссылка будет выглядеть так:
<А НREF= D:\HTML\page2.html>…</А>.
Если page2.html располагается в подкаталоге catalog1 папки HTML, то относительная ссылка на него из документа page1.html выглядит так:
<А НREF= catalog1\page2.html>…</А>.
Относительная ссылка page2.html на документ page1.html выглядит так:
<А НREF= ..\page1.html>…</А>. Фрагмент «..\» означает обращение к каталогу выше на один уровень.
Для того чтобы создать гиперссылку на документы, в которых содержатся рисунки и другие сведения в текстовом редакторе Блокнот необходимо выполнить следующие действия:
В папке HTML создать папку images с изображениями. Найти на локальном диске компьютера рисунок, который используется в качестве логотипа компании и сохранить в папке images.
Создать файл galery.html в текстовом редакторе Блокнот. Открыть файл galery.html. Добавить заголовок «Галерея».
Вставить картинку из папки images после заголовка «Галерея». Если картинка будет слишком большая, можно уменьшить её, указав параметры WIDTH, HEIGHT с меньшими значениями.
Открыть файл main.html.
Создать гипертекстовые ссылки на документы table.html и galery.html.
Фрагмент результата создания сайта приведен на рисунке 12.
Рис. 12. Фрагмент главной страницы сайта