Веб-страницы

Сайт:	СДО "ФАРВАТЕР"
Курс:	Информатика
Книга:	Веб-страницы
Напечатано::	Гость
Дата:	Суббота, 5 апреля 2025, 05:29

1. Из истории

HTML документ — это обычный текстовый документ, созданный в любом текстовом редакторе, например в Блокноте , и оформленный в соответствии с правилами языка HTML. Для файлов, содержащих HTML документы, используется расширение HTML.

В 1989 году Тим Бернерс Ли создал новый язык форматирования документов. В его основу был положен другой ранее созданный язык — SGML, который предусматривал установку связей между документами с помощью гиперссылок. Новый язык разметки был назван HTML (HyperText Markup Language).

Тим Бернерс Ли реализовал и первую программу для просмотра HTML документов — браузер.

В 1994 году создана организация по разработке единых стандартов развития WWW — World Wide Web Consortium (W3C).

Эта организация подготовила стандарты HTML.

Он называется языком разметки и обладает большими возможностями в настоящее время.

Для просмотра HTML документов используются специальные программы — браузеры. При открытии HTML документа браузер распознает теги и учитывает их при отображении текста. Если по каким-то причинам (например, при ошибке в записи тега) тег не распознается браузером, то он игнорируется.

2. Этапы разработки сайта

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

Для начала надо определить:

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

Один из наиболее сложных этапов - дизайн.
Здесь стоит вспомнить о целях, которые вы поставили перед сайтом (Цель поразить всех красивой картинкой?). Говорит ли дизайн о том, что предлагает ваша компания? Соответствует ли он вашему корпоративному стилю (У вас ведь есть корпоративный стиль?). Четко ли он показывает ваше отличие от конкурентов? Не помешает ли дизайн в дальнейшем эффективно подвигать сайт? И это только часть вопросов, которые надо себе задать.

Верстка — это перевод дизайна, до сего момента существующего в виде картинки, в HTML-код.

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

Если вы хотите превратить свой сайт в инструмент маркетинга, то приготовьтесь к тому, что надо будет:

выкладывать новые материалы;
продвигать сайт;
опрашивать посетителей и добавлять новую необходимую им функциональность

Источники: http://webarty.net

3. Классификация сайтов

Сайт визитка — самый простой вид сайта. Сайт такого типа можно сделать даже на простом HTML, без использования системы управления сайтом. Обычно сайт-визитка содержит от

1 до

5 страниц. Сайты этого вида как правило включают в себя только общую информацию о владельце сайта и его контактные данные.

Корпоративные сайты — это полнофункциональные представительства компаний в интернете. Этот тип сайта лучше всего подходит для серьёзных средних и крупных фирм. Корпоративные сайты содержат полную информацию о компании и её деятельности. Такой тип сайта иногда называют виртуальным офисом, так как посещение такого сайта сравнимо с общением с менеджером по работе с клиентами. Корпоративные сайты нужны, в первую очередь, для формирования имиджа компании и предоставления посетителям и клиентам наиболее полной информации.

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

Интернет-магазины. Этот вид сайтов аналогичен интернет-витринам, но имеет дополнительный функционал: возможность заказать предлагаемый товар прямо через сайт.

Промо-сайты. Сайты этого типа предназначены для раскрутки и продвижения какого-либо товара или бренда.

Тематические сайты. Данный тип интернет сайтов характеризуется тем, что содержит информацию по какой-либо конкретной тематике. Сюда же можно отнести интернет-энциклопедии.

Порталы — это тип сайтов, содержащих большое количество разнообразной информации. Как правило, порталы схожи по структуре с тематическими сайтами, но имеют более развитый функционал и большее количество сервисов и разделов. Также на порталах часто бывают разделы для общения пользователей: чаты, блоги и форумы.

Блог — это тип сайтов, на которых владелец или редактор блога пишет посты со своими новостями, идеями или другой постоянно поступающей информацией. Отличительной особенностью блогов является актуальность публикуемой информации.

Каталоги сайтов. Это вид сайтов, основным содержимым которых являются структурированные ссылки на другие сайты, а также их краткие описания.

Поисковые системы. Вид сайтов, предназначенных для поиска страниц в интернете по определённым запросам.

Почтовые сервисы. Этот тип сайтов предоставляет интерфейс для работы с электронной почтой.

Интернет-форумы. На сайтах этого вида пользователи могут создавать темы, а также комментировать их. Как правило, форумы ограничены одной специфической тематикой, хотя встречаются и форумы «обо всём».

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

Доски объявлений. На таких сайтах пользователи могут размещать или искать информацию в виде каких-либо объявлений, например — о покупке-продаже.

Социальные сети. Тип сайтов, созданных для общения пользователей между собой. Как правило, на таких сайтах есть рейтинги, страницы пользователей, группы и множество других сервисов.

4. HTML-редактор Kompozer

KompoZer — объектно-визуальный редактор сайтостроения, свободный и открытый

позволяет:

работать в трех режимах: дизайна (объектно-визуального конструирования), кода и объединенном режиме, а также включать предварительный просмотр;
открывать несколько страниц и вести обработку слоев на странице;
управлять файлами и папками сайта (менеджмент);
публиковать сайт (обновления) в Интернет и контролировать этот процесс в консоли протокола FTP;
выполнять форматирование символов, абзацев и страниц, создавать таблицы и формы;
открывать текущую страницу во внешнем текстовом редакторе в виде html-кода;
вести редактирование стиля;
выполнять вставку объектов (изображения, таблицы, ссылки, символы и др.).

Панель компоновки содержит кнопки наиболее часто используемых операций (с указанием наименования каждой кнопки по умолчанию - открыть, сохранить, опубликовать).

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

Панель вкладок. Позволяет одновременно редактировать несколько документов, используя разные вкладки для каждого открытого документа.

Специальный индикатор «красная дискета» указывает что в данной вкладке открыт документ, в который внесены изменения, но после этого он еще не сохранялся.

Панель режимов редактирования показывает в каком режиме просматривается текущий документ (Обычный, HTML-теги, HTML-код и Предварительный просмотр).

5. Таблицы

Таблица в HTML создаётся тегами < TABLE> и < /TABLE>, строки таблицы (помещаются между тегами < TABLE> и < /TABLE>) тегами < TR> и < /TR>, а столбцы таблицы (помещаются между тегами < TR> и < /TR>) тегами < TD> и < /TD>.

Пример:

Создадим таблицу предметов, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:
<table> — начало таблицы
<tr> — начало строки
<td>Информатика< /td> — первый столбец
<td>Математика< /td> — второй столбец
</tr> — конец строки
</table> — конец таблицы

По-умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется атрибут «border»:

<table border="1">
<tr>
<td>Первая ячейка< /td>
<td>Вторая ячейка< /td>
</tr>
</table>

Форматирование таблиц

align — выравнивание содержимого ячейки по горизонтали; возможные значения: left (по умолчанию), right, center и char.
bgcolor — фоновый цвет.
border — толщина разделительной линии (значение указывается в пикселях). По умолчанию значение 0.
cellpadding — расстояние между разделительной линий и содержимым ячейки (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
cellspacing — расстояние между ячейками (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
colspan — количество столбцов, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.
rowspan — количество строк, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.
rules — применяется для отображения линеек между ячейками; возможные значения: rows, cols и all. Применяется с тегом <table>.
valign — выравнивание содержимого ячейки по вертикали; возможные значения: top, bottom и baseline. По умолчанию значение center. Применяется с тегами <td>, <th> и <tr>.
width — ширина таблицы или ячейки (значение указывается в пикселях или в процентном выражении относительно ширины страницы).

Для создания заголовка таблицы служит тэг <CAPTION>. По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.

Cтандарт HTML не позволяет ставить одной таблице несколько заголовков.

6. Кое-что еще

Если мы запишем:
<BODY BACKGROUND="klen.gif" BGProperties=fixed>, то в процессе просмотра странички текст будет двигаться, а фоновый узор останется на месте. В этом же теге задается и основной цвет текста на вашей страничке.

Запись <BODY BACKGROUND="klen.gif" TEXT="red"> обеспечит вывод красных букв.

Приведем еще теги, которые помогут украсить вашу страницу.

<MARQUEE> ... </MARQUEE> — вывод «бегущей строки».

<FONT COLOR="brown"... </FONT> — текст, расположенный внутри этого контейнера, будет выведен цветом, указанным после знака =, в частности отличающимся от цвета, заказанного в теге <BODY>.

<HR> — разделитель — горизонтальная линия, идущая через весь экран.
<BIG> ... </BIG> — текст будет отображаться шрифтом чуть большего размера, чем основной.

<SMALL> ... </SMALL> — текст будет отображаться шрифтом чуть меньшего размера, чем основной.

<B> ... </B> — полужирный текст.

<I> ... </I> — текст, выделенный курсивом.

<U> ... </U> — подчеркнутый текст.

<S> .... </S> — перечёркнутой текст.

<SUP> ... </SUP> — текст для верхних индексов.

<SUB> ... </SUB> — текст для нижних индексов.
<IMG SRC="animal.jpg"> размещает на страничке картинку из графического файла, путь к которому указан с помощью атрибута SRC.

Создание простейшей Web-страницы описано в практических работах.

7. Элемент PRE

Для обычного текста использования <BR> вполне хватает.

Но если в примере рассматривается программа, а не обычный текст.

Чтобы полностью сохранить исходное форматирование текста (с учетом всех отступов), можно

применить элемент PRE. Этот элемент задается парными тегами

. Браузер учитывает все символы, которые встречаются в тексте HTML документа, и выводит их на экран. Пример иллюстрирует использование элемента PRE для сохранения оригинального форматирования текста.

Пример

Страница с текстом программы (использование PRE)

<TITLE>Текст программы (PRE)</TITLE>

<BODY>

<PRE>

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

</PRE>

</BODY>

8. Заголовки, контакты

В HTML поддерживаются шесть видов заголовков. Им соответствуют элементы

H1, H2, H3, H4, H5 и H6.

Номера определяют уровни заголовков от наиболее важного (1) до наименее важного (6).

Элементы H1 – H6 задаются при помощи соответствующих парных тегов.

Например, для задания заголовка третьего уровня можно применить следующий код:

<H3>Текст заголовка третьего уровня</H3>

Для заголовков можно задать свойства:

align — выравнивание текста заголовка (по умолчанию используется выравнивание по левому краю);

title — текст подсказки.

В HTML предусмотрен специальный элемент ADDRESS , в который может заключаться различная контактная информация. Он задается при помощи парных тегов <ADDRESS> и </ADDRESS>.

Текст внутри элемента ADDRESS может иметь произвольную структуру, однако чаще всего в него помещаются имена сотрудников организаций, ссылки на другие HTML документы, телефон или адрес электронной почты контактного лица.