ОСНОВНЫЕ ПОНЯТИЯ ЯЗЫКА HTML

ПРОЕКТИРОВАНИЕ WEB-САЙТОВ

Этапы создания Web-сайта

Создание Web-сайта предполагает наличие нескольких эта­пов — от придумывания идеи до ее воплощения. Чтобы создать дей­ствительно интересный и полезный продукт, необходимо пройти следующие этапы.

Анализ и проектирование. Анализ сильных и слабых сторон конкурентов, информационное проектирование Web-сайта, разработка его концепции, оценка целевой аудитории.

Написание контента. Под контентом (Content) понимается информационное наполнение сайта. Термин применяется для обозначения идейного содержимого Web-сайта.

Креатив. Креатив (Creative) — термин для обозначения визуальной составляющей Web-сайта. Сюда входит разработка дизайна, графических элементов, обработка графики и все, что с ней связано.

Написание кода Web-сайта. Программирование Web-файла, написание функциональной части

Тестирование. На этом этапе проверяется все: удобство навигации, целостность данных, корректность ссылок и орфография, к тому же не все браузеры одинаково интерпретируют одни и те же теги HTML.

Публикация. Размещение Web-сайта в Интернете. Большинство Интернет-провайдеров (Internet service provider — ISP) предоставляют услугу по размещению домашних Web-страниц бесплатно (эта услуга называется Web-хостингом — Web hosting). Для публикации можно размещать Web-сайт у провайдера или воспользоваться другими возможностями.

Раскрутка. Рекламная компания по узнаванию Web-сайта и повышения его посещаемости. Сюда входит регистрация Web-сайта в поисковых системах, обмен ссылками, баннерная реклама и др.

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

 

Терминология Web-проектирования

Web-браузер — программа-приложение, предназначенная для интерпретации кодов HTML документов и отображения гипертек­стового документа на экране компьютера. Наиболее часто исполь­зуемые браузеры —Internet Explorer, Opera, Mozilla Firefox, Google Chrome. Наряду с термином «браузер» используют термины-синонимы: «обозреватель» и «навигатор».

Web-сайт —набор связанных между собой, близких по смыслу Web-страниц и файлов. На каждом Web-сайте существует одна Web-страница называемая домашней (homepage) или главной страницей. Все посетители Web-сайта сначала попадают на нее, а потом с помо­щью гиперссылок попадают на другие страницы Web-сайта.

Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в WWW. Web-страница кроме текста может содержать графику, ани­мации, видеоклипы, музыку, а также гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их.

Один из способов создания Web-страниц (или документов HTML) состоит в использовании текстового редактора Блокнот (NotePad), встроенного в Windows. В этом редакторе создается файл Web-страницы, который сохраняется с расширением *.htm с после­дующим просмотром результатов с помощью браузера.

 

Создание Web-сайтов средствами языка HTML

Язык HTML (Hyper Text Markup Language) — язык гипертексто­вой разметки документа, служит для написания Web-сайтов.

Язык HTML позволяет:

‒ создавать и редактировать Web-сайты, в том числе домашнюю Web-страницу, которую можно затем разместить в Интернете;

‒ редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);

‒ создавать мультимедийные презентации, слайд-шоу, демон­страционные проекты, благодаря гипертекстовым ссылкам и воз­можности вставлять в документ HTML рисунки, диаграммы, ани­мации, видеоклипы, музыкальное и речевое сопровождение, тек­стовые спецэффекты (например, бегущая строка).

 

ОСНОВНЫЕ ПОНЯТИЯ ЯЗЫКА HTML

Элемент — это конструкция языка HTML, или контейнер, со­держащий данные.

Web-страница представляет собой набор элементов.

Тег (Tag) — это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, например: <HTML>. Конечный тег, если он предусмотрен синтаксисом языка, снабжает­ся косой чертой: </HTML>.

Гиперссылка (Hyperlinks) — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют пе­реходить от одного документа к другому.

Фрейм (Frame) — область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют разбивать страницы на прямоугольные области, в каждой из которых отображается своя собственная страница. Вы можете разместить один или несколько фреймов на странице (такая страница называется страницей фрей­мов или фреймсет (frameset)).

Форма (Form) — область гипертекстового документа, кото­рая необходима для организации обратной связи с посетителями сайта.

Апплет (Applet) — небольшая прикладная программа, передавае­мая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт (Script) — программа, включенная в состав Web-страни­цы для расширения ее возможностей.

Загрузка (DownLoad) — копирование документа с Web-сервера на компьютер клиента.

Размещение (UpLoad) — копирование документа с компьютера клиента на Web-сервер — используется при создании собственной Web-страницы (т.е. при ее опубликовании).

Пиксел (Pixel) — наименьшая цветная точка экрана монитора.

 

ОБЩАЯ СТРУКТУРА ПРОСТЕЙШЕГО ДОКУМЕНТА HTML

Общая структура простейшего документа HTML такова:

<СОММЕNT> Комментарий </СОММЕNT>

<HTML>

<HEAD>

<TITLE> Название документа </ TITLE >

</HEAD>

<BODY>

Здесь расположен текст самого документа HTML.

</BODY>

</HTML>

 

Дадим пояснения указанным тегам документа HTML:

<COMMENT> — комментарий к документу. Не является обяза­тельным.

<HTML> — идентификатор всего блока HTML-команд.

<HEAD> — идентификатор заголовка документа HTML.

<TITLE> — идентификатор заголовка окна просмотра.

<BODY> — идентификатор HTML-команд документа для про­смотра.

Три основных тега <HTML>, <HEAD> и <BODY> передают браузеру основную информацию для идентификации и организа­ции документа.

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

<МЕТА> — непарный тег применяется для указания подробной информации о документе.

 

ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТОВОГО ПОТОКА

<Р> — идентификатор конца абзаца, после которого добавля­ется пустая строка. В конце нужен тег </Р>.

<BR> — идентификатор перевода строки.

<HR> — идентификатор изображения горизонтальной линии.

Эти теги одиночные, т.е. непарные, они не требуют тегов с ко­сой чертой.

<PRE> — установка равноширинного шрифта. В конце нужен тег </PRE>.

 

ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ ЗАГОЛОВКОВ И ПОДЗАГОЛОВКОВ ДОКУМЕНТА

<Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>. При этом заголовки будут выведены большими буквами, причем размер букв у тега <Н1> будет самый большой, у <Н2> — меньше, у <НЗ> — еще меньше и т.д.

 

ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ СИМВОЛОВ ТЕКСТА

<В> — идентификатор полужирного шрифта.

<strong> — идентификатор выделенного шрифта.

<i> — идентификатор курсива.

<U> — идентификатор подчеркивания.

<s> — идентификатор перечеркивания.

<tt> — идентификатор равноширинного шрифта (телетайпного или курьера).

<big> — задает увеличенный размер шрифта.

<small> — задает уменьшенный размер шрифта.

<center> — задает центрирование текста.

<sub> — задает нижний индекс.

 

ТЕГИ ФОРМАТИРОВАНИЯ АБЗАЦЕВ

<р align=left> — выравнивание текста в абзаце по левому краю.

<р align=right> — выравнивание текста в абзаце по правому краю.

<р align=center> — выравнивание текста в абзаце по центру.

<р align=justify> — полное выравнивание по обоим краям экрана,

align — атрибут выравнивания.

 

ТЕГИ СПИСКОВ

Теги списков являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Браузер автоматически генерирует номера для каждого пункта в списке.

<OL> — идентификатор упорядоченного списка. В конце </OL>.

Неупорядоченные списки служат для составления перечней, ко­гда порядок следования пунктов несущественен. Перед каждым элементом будет стоять маркер.

<UL> — идентификатор неупорядоченного списка. В конце </UL>.

Отдельные элементы в упорядоченном и неупорядоченном спи­сках помечают одиночным тегом <LI>, а элементы в списках опре­делений <DL> тегами <DT> для термина и <DD> для значения термина.

<LI> — идентификатор элемента в упорядоченном и неупоря­доченном списке.

Конечный тег </LI> может быть опущен.

 

ТЕГИ СПИСКОВ ОПРЕДЕЛЕНИЙ

Списки определений обеспечивают специальное форматиро­вание, как в словарях, для терминов и связанных с ними описа­ний.

<DL> — идентификатор списка определений. В конце </DL>.

<DT> — идентификатор термина в списке определений.

<DD> — идентификатор значений термина в списке определе­ний.

<DL>

<DT> название термина 1

<DD> определение термина 1

<DD> другое определение термина 1

….

</DL>

ТЕГИ ЦВЕТА

<BODYbgcoIor=«teal» text=«aqua» link=«red»> — задает цвет тек­ста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).

<BODY background=«back.jpg»> — задает фоновый рисунок (обои) на Web-странице в файле back.jpg.

<BODY background=«\windows\tartan.bmp»> — фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла.

<font color=«yellow» size=5> — задает цвет символов текста (color) и их размер (size). В конце нужен тег </font>.

 

ТЕГИ ЛИНИЙ

<hr coIor=«lime»> — задает цвет горизонтальной линии.

<hr color=«red» size=3 width=220 align=center> — атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселях; атрибут align=center (или left, или right) за­дает смещение линии (ее размещение в центре, или смещение вле­во, или вправо).

 

ТЕГИ ДЛЯ ВСТАВКИ ИЗОБРАЖЕНИЙ

Графика на страницах — это средство выражения мысли, под­черкивания идеи.

Изображения можно сохранять в нескольких форматах. Тип фай­лов GIF — графический формат обмена, стал первым типом файлов, которые поддерживались в WWW. Затем был разработан формат JPEG — объединенная группа экспертов фотографии. Это формат эффективнее GIF для представления больших изображений.

Приобрел популярность формат PNG — персональная сетевая графика, который заменяет GIF.

При публикации сайта рисунок должен находиться в папке, где хранятся файлы страниц, а URL-адрес должен быть реальным.

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

<IMG SRC=«lycos.gif»> — вставка графического изображения в виде анимационного файла lycos.gif. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.

<IMG SRC=«echomsk.gif» width=«403» height=«263»> — если при вставке изображения использованы атрибуты width (ширина в пикселях) и height (высота в пикселях), то при загрузке изображения браузер покажет сначала рамку, где должно быть изображение, а за­тем уже само изображение, поскольку оно загружается дольше. Та­ким образом, резервируется место на экране под изображение.

<IMG SRC=«\html\animat\iexplor.gif»> — вставка графического изображения в виде файла iexplor.gif, причем указан полный путь графического файла на диске: c:\html\animat\iexplor.gif (данный момент нужно заранее продумать, иначе при перемещении на другой компьютер возникнут проблемы отображения).

<IMG SRC=«scene.jpg» border=3 alt=«Картинка»> — атрибут border задает рамку по периметру изображения толщиной 3 пикселя. Атрибут Alt дает текст на месте рамки, если изображения нет.

Атрибут border=0 используется, чтобы убрать рамку вокруг ри­сунка. Это необходимо, например, при использовании анимированных gif-рисунков на прозрачной основе.

<IMG SRC=«flower.jpg» border=0 width=«85» height=«130» align=«left» hspace=5 alt=«Цветок»>

Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.

Атрибут align=«left» обеспечивает размещение рисунка слева.

 

ТЕГ ПЕРЕХОДА К ДРУГОМУ ФАЙЛУ

<а href=«excite.htm»>excite.htm</a> — гипертекстовая ссылка к файлу excite.htm.

<а href=«C:\book\book.inf»>book.inf</a> — гипертекстовая ссылка, переход к файлу book.inf. При запуске браузера следует ука­зать программу для просмотра текстового файла book.inf, например edit.com.

При работе в Интернете следует различать файлы с большими и с маленькими буквами в имени и расширении. Должно быть полное соответствие между именами файлов по размеру каждой буквы в имени и расширении, указанными в гиперссылке и лежащими на сервере, иначе гиперссылки не будут работать.

Для облегчения работы можно задавать цифровые имена файлов (цифры всегда одного размера).

ТЕГ ПЕРЕХОДА К ДРУГОЙ WEB-СТРАНИЦЕ

<а href=«https://www.da.ru»>https://www.da.ru</a> — гипертек­стовая ссылка в виде текста, переход в Интернете к Web-странице https://www.da.ru.

<а href=«zinn.gif»><img src=«globe.gif» border=«3»></a > — ги­пертекстовая ссылка в виде изображения globe.gif, переход к про­смотру изображения zinn.gif.

 

ТЕГ ВСТАВКИ АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ

<а href=«mailto: krilenka@ya.ru»> krilenka@ya.ru </a> — гипер­ссылка на адрес электронной почты. При нажатии происходит вы­зов почтовой программы и указанный адрес E-mail: krilenka@ya.ru вводится в пункт Кому.

 

ТЕГ ВСТАВКИ ДОКУМЕНТА

<embed src=«Welcome.avi» Width=280 Height=140 autostart=true> —

вставка объекта в документ HTML. В данном случае это мультиме­дийный файл *.avi, причем при загрузке страницы происходит авто­запуск этого файла, размеры которого на экране заданы атрибутами Width и Height.

Если документ HTML большой, то внутри него делают переходы по метке (U01): <Р> <а href=«#U01> Введение </а> </Р> <а name=«U01»> Введение </а>

ТЕГИ ДЛЯ СОЗДАНИЯ БЕГУЩЕЙ ТЕКСТОВОЙ СТРОКИ

(ТОЛЬКО ДЛЯ INTERNET EXPLORER):

<marquee behavior=«scroll» direction=«right» loop=«-l»> Интер­нет — это окно в Mиp!</marquee>

Если текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (т.е. без атрибутов, и она будет бежать влево):

<marquee>Добро пожаловать! </marquee>

Если текстовая строка должна бежать то влево, то вправо, то в теге <marquee> используется атрибут behavior=«alternate».

 

СПИСОК ЦВЕТОВ СИМВОЛОВ HTML

Всего 16 основных цветов:

white — белый	black — черный	blue — синий	gray — серый
red — красный	green — зеленый	yellow — желтый	pink — розовый
maroon — темно-красный	aqua — бирюзо­вый	navy — темно-си­ний	fuchsia — ярко-фиолетовый
olive — оливко­вый	purple — фиоле­товый	cyan — оттенок бирюзового	brown — коричне­вый
silver — светло­серый	teal — ярко-голу­бой	orange — оранже­вый	lime — ярко-зеле­ный

Вместо указанных терминов для задания цвета можно использо­вать RGB-коды (R ed, G reen, B lue), например: #FFFFFF — белый (white), #FF0000 — красный (red).

Меняя RGB-коды, цвета можно подбирать желаемые текста и фона.

 

ТЕГИ ПОДКЛЮЧЕНИЯ ЗВУКА

Для воспроизведения звука (файл *.mid) после загрузки доку­мента HTML в браузер Internet Explorer (т.е. в фоновом режиме), надо записать следующую команду, например:

<bgsound src=«\windows\canyon.mid» lоор=1>

Можно также использовать файл формата *.wav. Число воспро­изведений loop можно увеличить с 1 до п.

 

ТЕГИ ФРЕЙМОВ

<frameset></frameset> — определение фреймовой (оконной) структуры документа: размеры и расположение фреймов на страни­це. Заменяет тег BODY в документе с фреймами; может быть вло­жен в другие фреймсеты.

<frameset rows=«value,vaIue»> — определение количества и раз­меров горизонтальных фреймов (фреймов-строк) в окне браузера (пиксели, проценты ширины).

<frameset cols=«value,value»> — определение количества и раз­меров вертикальных фреймов (фреймов-столбцов) в окне браузера (пиксели, проценты ширины).

<frame> — определение фрейма и его свойства внутри FRAMESET-структуры.

<noframes> </noframes> — определяет, что показывать, если браузер не поддерживает фреймы.

Атрибуты фреймов:

<frame src=«URL»> — указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.

<firame name=«name»> — определение имени данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра target.

<frame marginwidth=#> — определение ширины (в пикселях) левого и правого полей фрейма; должен быть равен или быть боль­ше 1.

<frame marginheight=#> — определение ширины (в пикселях) верхнего и нижнего полей фрейма; должен быть равен или быть больше 1.

<frame scrolling=VALUE> — определение наличия полосы про­крутки содержимого фрейма; значениями могут быть: «yes,» «nо,» или «auto.» По умолчанию стоит auto.

<frame noresize> — предотвращение изменения размеров фрейма.

 

ТЕГИ ФОРМЫ

Для функционирования формы понадобится написать CGI скрипт. HTML просто создает вид формы.

 

<form></form>	Создание заполняемой формы
<select multiple name=«NAME» size=?></select>	Элемент select создает в заполняемой форме меню типа «Выбор одного пункта из многих» или «Выбор нескольких пунктов из многих». Size определяет число видимых пунктов без прокрутки.
< Option >	Элемент option описывает отдельные пункты меню. Не имеет конечного тэга.
<textarea name=«NAME» cols=40 rows=8> </textarea>	Создание поля для ввода нескольких строк текста. Cols указывает на ширину; rowsука­зывает на высоту.
<input type=«checkbox» name=«NAME»>	Создание поля ввода для атрибутов типа «да»/»нет» или для атрибутов, которые могут одновременно принимать несколько значе­ний. Сразу за тегом следует текст.
<input type=«radio» name=«NAME» value=«x»>	Создание поля ввода для атрибутов, которые принимают одно значение из нескольких воз­можных. Текст следует сразу за тегом.
<input type=text name=«foo» size=20>	Создание поля ввода под одну строку текста. Size указывает длину в символах.
< input type=«submit» value=«NAME»>	Создание кнопки, при нажатии которой за­полненная форма посылается на сервер.
<input type=«image» border=0 name=«NAME» src=«name.gif»> <input type=«reset»>	Создание графического образа для кнопки, инициализирующей передачу данных на сер­вер.

 

СОЗДАНИЕ ТАБЛИЦ В HTML

Таблицы являются удобным средством форматирования данных в HTML.

Таблицу задает и определяет ее общие свойства тег <table></table>. По горизонтали, например по центру, таблицу можно выровнять с помощью тега <р align=«center»>, размещаемо­го перед <table>.

Тег <table> может иметь атрибуты:

<table border=«5» width=«100» cellpadding=«10» cellspacing=«10»>,

где

border=«5» — ширина боковой грани в пикселях. При нулевом значении рамка исчезает;

width=«100» — ширина таблицы в пикселях или width=«50%» — ширина таблицы в % по отношению к ширине страницы в окне;

cellspacing=«10» — ширина фронтальной грани в пикселях;

cellpadding=«10» — задает размер пустого пространства в пиксе­лях, окружающего данные в ячейке.

Тег <caption></caption> задает заголовок таблицы.

Тег <tr> задает строку таблицы. Следующий тег <tr> задает сле­дующую строку таблицы. Конечный тег необязателен.

Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую ячейку таблицы. Конечный тег необязателен.

Цвет фона ячейки задается в теге <td>: <td bgcolor=«yellow»>

Непарный тег <th> — задает элемент ячейки, которая является заголовком таблицы. Этот тег должен находиться внутри тега <tr>.

Ячейка-заголовок отличается от обычной тем, что текст внутри нее выделяется полужирным шрифтом. Цвет фона заголовка задает­ся:
<tr><th bgcolor=«yellow»> Зaroлoвoк 1.

 

СКРИПТ

Для реализации Web-сайта используется программа Движок, реализующая функциональность, отличную от простого показа го­товых Web-страниц. Например, просмотр каталога Интернет-магазина (список товаров извлекается из базы данных магазина), поиск в Интернете (страницы с ответами поисковой системы формируют­ся динамически), показ баннеров (движок «выдает» страницам сай­та тот или иной баннер по заданному алгоритму).

Скрипт — несложная программа на «скриптовом» языке про­граммирования (Perl, Php, Javascript), компонент движка. В пре­дельном случае движок сайта может состоять из одного-единствен-ного скрипта.

Cgi-bin исторически — подкаталог на сервере, в котором распо­лагались скрипты и иные компоненты движка сайта. Некоторые хостинги (услуги по размещению чужого Web-сайта на своем Web-сервере или чужого Web-сервера) предоставляют своим клиентам личные каталоги cgi-bin для размещения скриптов.