HTML – язык создания веб-страниц сайта
Для создания гипертекстовых документов, входящих в состав веб-сайтов, используются специальные программные средства, к которым, в первую очередь, относят язык разметки страниц и создания гипертекстовых документов HTML (HyperText Markup Language).
Гипертекстовый документ – файл, содержащий различные виды информации и имеющий в своей структуре ссылки (гиперссылки) на другие файлы или сам являющийся документом, на который есть ссылка в другом файле, расположенном на некотором сервере в любой точке планеты. Гипертекстовый документ, размещённый на сервере с использованием WWW-технологии, называют Web-страницей (веб-страницей). Файл, содержащий HTML документ должен иметь расширение “.htm” или “.html”.
Язык разметки представляет собой совокупность тегов (тэгов), позволяющих отображать необходимые элементы документов (веб-страниц) в окне браузера, осуществлять связь с другими объектами и веб-страницами.
Тег или тэг (англ. “Tag”) является признаком объекта, управляющим кодом. Тэги представляют некоторые операторы (команды, дескрипторы), заключённые в скобки типа “< >”, причём ими начинается и заканчивается целая страница или некоторый фрагмент. Так как многие теги являются парными, они определяют начало и конец некоторого действия. В конце команды ставится слеж “/” с именем, используемым в её начале.
Для создания Web-страниц (веб-страниц) не обязательно иметь доступ к сети. Все известные программы просмотра (IE, Netscape, Mosaic, Опера и др.) могут открыть файл с документом, находящийся на электронном носителе пользователя.
Тэги можно вводить большими и маленькими буквами, например, тэги <BR>, <Br> и <br> равнозначны.
Тэг <br> означает принудительный перевод строки в тексте. Тэг, определяющий новый абзац (параграф – Paragraph) обозначается <P>.
Приведём другие теги, определяющие работу с текстом:
<B></B> – Bold (жирный)
<I></I> – Italic (курсив)
<font Times New Roman color=”red” size=5> – определяет тип шрифта, его цвет и размер.
Кроме этих тэгов в состав некоторых тэгов можно включать дополнительные условия, определяющие его расположение на странице (слева, справа, по середине или по ширине) и др.
Любой документ в виде веб-страницы имеет следующую минимальную структуру:
<HTML> – Начало страницы.
<HEAD> – Заголовок страницы.
<TITLE> </TITLE> – Заголовок страницы, отображаемый в верхней строке браузера.
</HEAD> – Конец заголовка страницы.
<BODY> – Начало отображаемой в браузере части документа.
</BODY> – Конец отображаемой в браузере части документа.
</HTML> – Конец страницы.
Для связи с другими объектами и веб-страницами используют парный тэг <A> – якорь (“анкор”), например,
<A HREF="http://www.openweb.ru"> Мастерская </A> позволяет сделать слово “Мастерская” гипертекстовой ссылкой на сервер с именем “openweb.ru”.
Аналогично ссылку можно установить на объект внутри страницы (<A HREF="#up">Вверх</A>),
предварительно установив место, к которому будет осуществлен переход внутри одной страницы, например, <a name=”#up”>;
на другую страницу (<A HREF="news.htm">Новости</A>) и
на адрес электронной почты, например,
<A HREF=mailto:lib@mail.ru>lib@mail.ru </A>.
Графические изображения и другие нетекстовые компоненты хранятся отдельно и не вставляются в документ непосредственно. Вместо этого в текст вставляют ссылку, указывающую программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются форматы картинок “GIF” и “JPEG”. Картинка вставляется с помощью тэга <img src="имя_файла.gif">.
Для изображения горизонтальной полосы служит тэг <HR>.
В тексте, расположенном между тэгами <BODY>, не допускается использование кавычек, символов “<” (меньше), “>” (больше), "/" и т.п. Их заменяют записями типа “"”, “<”, “>”.
Обычно используют следующую последовательность создания гипертекстового документа (веб-страницы):
1. Создают минимальный документ, в т.ч. по шаблону.
2. Вставляют между тэгами <HEAD> и </HEAD> название страницы (между тэгами <TITLE>
</TITLE>), а за ними необходимые метаданные, определяющие используемую кодировку, вводимые ключевые слова и другие необходимые метаданные.
Для использования кодировки русских символов (кириллица) рекомендуется использовать следующий тэг:
<META http-equiv=content-type content="TEXT/HTML; CHARSET=windows-1251">.
3. Вставляют между тэгами <BODY> и </BODY> необходимые тексты и другие объекты, в т.ч. включая их в таблицы. Используют различные фоновые изображения в виде графических объектов, окрашенных областей или всей страницы в какие-либо цвета.
4. Размечают тексты (параграфы, заголовки, размер и т.д.). Устанавливают их цвет с учётом их хорошего зрительного восприятия человеком и принципов дизайна.
5. С учётом тех же требований вставляют ссылки на графические изображения и гипертекстовые связи.
6. Загружают подготовленный документ в программу просмотра (браузер) в автономном режиме и оценивают выполненную работу.
7. Проводят корректировку добиваясь получения необходимых, в том числе с точки зрения дизайна, результатов.
Практическое занятие:
Разработка (планирование) и дизайн сайта.
Создание главной и других веб-страниц сайта.
Первая (главная, домашняя или по-английски “Home Page”) страница – лицо сайта. Обычно на первой странице размещают элементы, обозначающие (идентифицирующие) её “хозяина” (название или имя, реквизиты, фото и др.), а также названия предлагаемых сайтом основных тем, ресурсов и услуг.
На основе тем работ, выполненных на первой лекции, студент (ка) создаёт тематический сайт.
Темы согласовываются с преподавателем!!!
Необходимые для наполнения страниц сайта материалы можно взять из любых традиционных (печатных) учебных, учебно-методических пособий, а также из Интернета.
Сайт должен содержать 5–7 веб-страниц.
Разработайте макет главной страницы сайта.
Главная страница сайта – файл с именем “index.htm”.
На ней между тэгами <HEAD> и </HEAD> в тэге <title> следует ввести название работы, и включить следующий тэг:
<META http-equiv=content-type content="TEXT/HTML; CHARSET=windows-1251">.
Затем в область между тэгами <BODY> и </BODY> включается:
1) это же название работы,
2) фамилия исполнителя и название его учебной группы, например, в таблицу, состоящую из одной строки и двух ячеек, размером в 60% и 40% соответственно.
<center> – этот тег означает, что описанная ниже таблица разместится по центру веб-страницы.
<table bgcolor=”#0000ff” border=0> – начало таблицы, при этом “border=0” означает, что вокруг таблицы не будет рамки, а “bgcolor=”#0000ff””, что цвет фона внутри таблицы будет синим.
<tr> – первая строка таблицы.
<td width=60% align=center><font color=”red” size=8> Название работы – по центру первой ячейки первой строки шириной в 60% таблицы размещается название работы красного цвета и высотой в 8 единиц.
Если необходимо включить в любую ячейку таблицы рисунок, например, логотип, то поступают следующим образом:
<td width=ХХ% align=center> <img src=”logo.gif” border=0 alt=”Логотип”> – в ячейке с шириной в ХХ% таблицы размещается картинка с именем “logo.gif”. Вокруг неё не будет рамки, а при установке на неё мыши появится текст “Логотип”.
</table> – конец таблицы.
Ниже (например, отступив одну строку) располагают горизонтальное меню. В качестве примера предлагается использовать структуру веб-сайта турфирмы с вариантами названия входящих в её состав веб-страниц:
● О нас (we.htm)
● Наши туры (our_tours.htm)
● Контакты и проезд (contacts.htm)
● Новости (news.htm)
Эти названия представляют собой гипертекстовые ссылки к соответствующим элементам иерархической структуры сайта (веб-страницам), позволяющим пользователю быстро и удобно находить искомые информационные ресурсы, в том числе на других сайтах.
Эта структура отобразится на главной странице, как правило, внутри горизонтальной таблицы, в нашем случае состоящей из четырёх колонок-ячеек. Необходимая для этого таблица формируется следующим образом:
<table border=2> – начало таблицы, при этом “border=2” означает, что вокруг таблицы будет рамка толщиной 2 пиксела.
Можно установить оптимальный её размер на странице, включив в тэг <table> сведения о ширине таблицы, например, <table width=75%>.
<tr> – первая строка таблицы.
Тэг <td> обозначает ячейку (столбец, колонку) в любой строке.
<td width=25%> <a href=”we.htm”>О нас </a> – первый столбец (колонка, ячейка) первой строки таблицы с ссылкой на веб-страницу “we.htm”.
<td width=25%> <a href=”our_tours.htm”>Наши туры </a> – второй столбец первой строки таблицы с ссылкой на веб-страницу “our_tours.htm”.
<td width=25%> <a href=”contacts.htm ”>Контакты и проезд </a> – третий столбец первой строки таблицы с ссылкой на веб-страницу “contacts.htm”.
<td width=25%> <a href=”news.htm”>Новости </a> – четвертый столбец первой строки таблицы с ссылкой на веб-страницу “news.htm.
</table> – конец таблицы.
Под таблицей разместим горизонтальную черту красного цвета:
<hr color=”red”>.
Далее сделаем несколько пустых строк, 2–4 раза применив следующую комбинацию тэгов: <p><br> – параграф и перевод строки.
Под ними в правой части страницы введём данные, отражающие дату выполнения работы, например:
<font color=”#FFFFFF” size=3> – синий цвет и размер шрифта.
<p align=right><i> Создан 21.10.2007 г. </i> – текст, выделенный курсивом, размещается по правому краю страницы.
После выполнения первой работы, необходимо создать остальные веб-страницы. Так, например, вторую страницу можно создать аналогично главной странице. Для этого сохраняют страницу “index.htm”, например, с именем “contacts.htm” для создания связанной веб-страницы “Контакты и проезд” и убирают с неё всё лишнее, оставив лишь таблицу с меню.
На второй странице область <BODY> начинается с меню (например, скопированного с первой страницы). Затем в неё включается краткое описание темы выполняемой работы. Если оно сопровождается графическими материалами, то и их следует включить в состав этой страницы.
Если на любой странице требуется использовать ненумерованный список, например, сведения об адресе, телефоне и электронной почте фирмы, то его можно сформировать следующим образом:
<HTML>
<HEAD>
<TITLE> Контакты и проезд </TITLE>
<HEAD>
<BODY>
Таблица-меню
<ul>
<li><p align=left>Наш адрес: .........
<li>Наш телефон: (495)...................
<li>Наш адрес электронной почты: ..............
</ul>
<p>
</BODY>
</HTML>
Если необходим нумерованный список, то вместо парного тэга <ul> используют парный тэг <ol>.
Аналогичным образом создаются следующие страницы. Они обязательно должны отражать достоинства, недостатки и сферу использования описываемых устройств, систем, топологий и т.п., а также выводы и предложения студента (ки) относительно рассмотренного тематического материала.
Размещение ресурсов на сайте.
После выполнения всей работы по созданию сайта на локальном компьютере студента (ки), они проверяют работу ссылок, осуществляют окончательное оформление страниц (цвет страниц, текстов, размер и др.) и предъявляют свои работы преподавателю.
После получения положительной оценки данной работы, студент (ка) размещают свой сайт на бесплатном сервере и сообщают об этом преподавателю для проверки им работы сайта и выставления окончательной оценки за практическую работу.