HTML-Справочник

Материал из Wiki.shop.by
Перейти к: навигация, поиск

Содержание

Где могут использоваться HTML-теги при работе с сайтом интернет-магазина?

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


Использование HTML-тегов в режиме описания раздела или товара в программе WinShop

Принцип использования HTML-тегов в режимах описания раздела и товара является одинаковым, поэтому рассмотрим его на примере товара.
В режиме описания товара с помощью HTML-тегов можно преобразить отображение содержимого страницы товара. В частности, вы можете представить информацию в табличном виде, загрузить иллюстрацию, оформить нумерованный или маркированный список, дать ссылку на инструкцию по использованию товара, и др. Необходимые действия выполняются в программе WinShop – для этого в редакторе товара нужно открыть вкладку «Описание» (1).
HTML-теги можно вводить с клавиатуры – как обычный текст (с соблюдением синтаксиса HTML-языка), либо использовать шаблоны HTML-тегов, имеющиеся в инструментальной панели (2) или в списке, который открывается при нажатии кнопки «HTML» (3). Набор шаблонов вы можете редактировать самостоятельно в настройках программы.
В описании товара (как кратком, так и полном) HTML-теги по умолчанию подсвечиваются синим цветом (4), который при желании вы можете изменить в настройках.
Можно просмотреть как краткое, так и полное описание любого товара в том виде, в котором оно будет выглядеть на странице интернет-магазина (т.е. в виде готового HTML-документа) – для этого нужно нажать кнопку «Просмотр» (5). Для возврата в режим редактирования повторно нажмите эту кнопку (теперь она будет называться «Закрыть просмотр»).

HTML WinShop.jpg

Настройка шаблонов HTML-тегов для использования в WinShop

Вы можете самостоятельно создавать и редактировать шаблоны HTML-тегов для последующего использования в режиме описания товара. Для перехода в соответствующий режим выполните команду главного меню «Сервис» – «Параметры» (1).
Parametry.jpg
В открывшемся окне выберите раздел «Шаблоны HTML-тегов» (2). Список уже имеющихся шаблонов отобразится в верхней части раздела (3). Чтобы создать шаблон, нажмите кнопку «Добавить» (4), затем с клавиатуры введите название шаблона (5) и его текст (6). Если вы хотите, чтобы в режиме описания товара шаблон вызывался с помощью соответствующей кнопки инструментальной панели, установите флажок «Вынести на панель инструментов» (7). Если этот флажок снят, то шаблон в режиме описания товара будет вызываться из меню «HTML».
Чтобы сохранить введенные данные, нажмите «ОК» (8). Для получения дополнительной информации о настройке шаблонов HTML-тегов щелкните на ссылке «Справка» (9).

ShablonyHTML.jpg

Настройка подсветки HTML-элементов для использования в WinShop

По умолчанию HTML-теги в режиме описания товара или раздела подсвечиваются синим цветом. Вы можете самостоятельно изменить цветовое оформление тегов, а также других элементов HTML-языка, используемых в программе WinShop. Для перехода в соответствующий режим выполните команду «Сервис» – «Параметры» (1).
В открывшемся окне выберите раздел «Подсветка HTML» (2). В верхней части раздела щелчком мыши укажите элемент HTML, цветовое оформление которого вы хотите настроить (3). Для любого элемента можно указать стиль начертания полужирный (4), курсив (5) или с подчеркиванием (6). Из соответствующих раскрывающихся списков выбираются цвет текста (7) и цвет фона (8).
В поле «Пример» (9) демонстрируется образец того, как будут выглядеть элементы HTML в тексте описания при текущих настройках.
Чтобы сохранить введенные данные, нажмите «ОК» (10). Для получения дополнительной информации о настройке подсветки HTML-тегов щелкните на ссылке «Справка» (11).

ShablonyCvet.jpg

Использование HTML-тегов в WinShop Site Web Administrator

HTML-теги можно использовать в режиме редактирования дополнительных страниц и баннерных полей в WinShop Site Web Administrator. При этом можно задействовать инструменты встроенного HTML-редактора, или, если вы владеете основами языка HTML, вставлять теги и прочие его атрибуты самостоятельно.
Инструменты HTML-редактора вынесены в инструментальную панель (1). Чтобы применить требуемые HTML-теги к тому или иному текстовому фрагменту, выделите его и нажмите соответствующую кнопку либо выберите пункт в раскрывающемся списке. В данном режиме сами теги отображаться не будут – текст будет выглядеть так, как на странице магазина (2).
HTML Redaktor.jpg
Если же вы хотите самостоятельно вставлять HTML-теги, отключите HTML-редактор нажатием кнопки «Источник» (3). В данном режиме инструментальная панель становится недоступной (4), а теги отображаются вместе с текстом (5).
HTML Text.jpg
Для возврата в режим работы со встроенным HTML-редактором вновь нажмите кнопку «Источник» (3).

Основы HTML

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


Термины и определения

Веб-сервер – мощный компьютер со специальным программным обеспечением, который обеспечивает доступ большого количества пользователей к хранящейся на нем информации. Именно на веб-серверах располагаются сайты и веб-страницы.
Веб-страница – логическая единица Всемирной паутины, однозначно определяемая адресом (URL) и представляющая собой файл HTML-формата. Веб-страница может включать в себя текст, графические объекты, фотографии, аудио- и видеоматериалы и иные элементы. Все веб-страницы можно разделить на две категории: статические (на них представлена постоянная информация) и динамические (наиболее характерный пример – страница со списком результатов, выданными поисковой системой). Для просмотра веб-страниц предназначены специальные программы, называемые Интернет-обозревателями, или браузерами. Совокупность логически связанных между собой веб-страниц образует сайт.
Гиперссылка – слово или изображение на веб-странице (или в любом другом электронном документе), содержащее ссылку на другие страницы или файлы. Переход по гиперссылке осуществляется щелчком мыши.
Главная страница – основная (титульная) страница сайта. Здесь представлена общая информация о сайте с кратким описанием того, что содержится во всех остальных его разделах. Обычно внешние ссылки делаются именно на главную страницу сайта, поэтому посетителей на ней бывает значительно больше, чем на любых других его страницах.
Доменное имя – последовательность из слов или символов, которую необходимо ввести в адресную строку Интернет-обозревателя для того, чтобы зайти на сайт. Иначе говоря, доменное имя – это адрес веб-ресурса в Интернете.
Интернет-обозреватель (браузер) – программа, предназначенная для просмотра содержимого веб-страниц (самые известные – Internet Explorer, Opera и Mozilla Firefox).
Контент – информационное наполнение сайта: текст, изображения, таблицы и иные элементы, упорядоченные в соответствии с заранее разработанной структурой сайта при помощи тэгов. Иначе говоря, контент – это то, что вы видите на сайте.
Куки (Cookies) – элемент данных, с помощью которых удаленный сервер помечает конкретный Интернет-обозреватель при его посещении. В следующий раз сервер «узнает» этого пользователя, благодаря чему сможет либо предложить ему какие-то данные с учетом заявленных прежде пожеланий либо, наоборот, не показывать этому посетителю те данные, которые он уже видел (например, рекламу). Отметим, что куки (cookies) не умеют изучать содержимое жесткого диска компьютера пользователя. Некоторые их сведения хранятся лишь в течение текущего сеанса работы с сервером и автоматически удаляются сразу после закрытия интернет-обозревателя. Но есть и такая информация, которая сохраняется в отдельном файле и записывается на жесткий диск в специально предназначенные папки.
Прокси-сервер – промежуточный веб-сервер, который используется в качестве посредника между компьютером пользователя (а точнее – Интернет-обозревателем) и конечным веб-сервером. Использование прокси-сервера позволяет решить две важные задачи: экономия трафика с одновременным увеличением скорости доступа за счет кэширования данных на жестком диске компьютера, и защита локальной сети. Также работа через прокси-сервер позволяет экономить IP-адреса, поскольку в данной ситуации требуется лишь один общий IP-адрес, и выходить в Интернет анонимно.
Сайт – совокупность логически связанных между собой веб-страниц, представляющих собой единое целое и находящихся, как правило, на одном компьютере (сервере).
Трафик – объем принятой и переданной информации. Обычно единицей измерения трафика является один мегабайт.
Тэг – элемент языка программирования HTML, представляющий собой текст, заключенный в угловые скобки < >. Тэг – это активный элемент, определяющий представление или отображение находящейся за ним информации. Некоторые тэги имеют дополнительные атрибуты. В большинстве случаев тэги используются в паре: один тэг открывающий, второй – закрывающий.
Фрейм – средство компоновки, позволяющее разделить веб-страницу на прямоугольные области и используемое многими веб-разработчиками.
Хостинг – размещение сайта на внешнем веб-сервере, круглосуточно подключенному к Интернету. В настоящее время существует великое множество специальных хостинговых площадок, активно предлагающих свои услуги по размещению сайтов. По своей сути хостинговая площадка представляет собой мощный сервер, подключенный к Интернету по высокоскоростному каналу связи.
Цифровой адрес (IP-адрес) – уникальный цифровой адрес компьютера, который автоматически присваивается ему при выходе в Интернет.
HTML (Hypertext Markup Language – «язык разметки гипертекста») – гипертекстовый язык разметки, который позволяет с помощью специальных инструментов (тэгов) определять структуру и внешний вид веб-страницы при ее отображении в Интернет-обозревателе, а также создавать ссылки на другие веб-страницы и файлы. Другими словами, HTML – язык программирования, предназначенный для создания веб-страниц.
HTTP (HyperText Transfer Protocol – «протокол передачи гипертекста») – протокол прикладного уровня передачи данных. HTTP в настоящее время повсеместно используется для получения информации с веб-сайтов.
URL (универсальный указатель ресурсов) – адрес веб-страницы или любого файла в Интернете.
XHTML (Extensible Hypertext Markup Language – «расширяемый язык разметки гипертекста») – язык разметки веб-страниц, по возможностям сопоставимый с HTML и созданный на базе XML.


Основные теги языка HTML

Рассмотрим основные теги языка программирования HTML (они приводятся в алфавитном порядке). Ряд из них имеют свои атрибуты, о которых также будет рассказано. Не забывайте, что большинство тегов HTML-языка являются парными – например, <body> </body>, <b> </b>, и др.
Здесь приводится только описание и краткая характеристика основных HTML-тегов, а порядок их практического применения рассматривается на конкретных примерах.
Тег <a> предназначен для создания гиперссылок в тексте веб-страницы и имеет следующие атрибуты:
• accesskey – назначение для гиперссылки «горячей клавиши»;
• href – определение адреса, на который ведет гиперссылка;
• name – именование областей веб-страницы;
• tabindex – установка порядка перехода по гиперссылкам;
• target – определение окна для отображения объекта гиперссылки (иначе говоря, при использовании атрибута гиперссылка будет открываться в новом окне).
Тег <b> предназначен для выделения текста полужирным шрифтом (весь текст, находящийся между тегами <b> </b>, будет иметь полужирное начертание).
С помощью тега <basefont> вы можете изменить внешний вид всего текста. Этот тег имеет атрибут size, предназначенный для изменения размера шрифта текста.
Тег <big> позволяет увеличить шрифт текста по сравнению с соседним текстом, а с помощью тега <blockquote> вы можете создать в документе блок цитаты.
Одним из ключевых тегов языка программирования HTML является парный тег <body>. С его помощью идентифицируется основной текст документа. Иначе говоря, все, что вы хотите поместить на веб-страницу, должно располагаться между тегами <body> </body>. Данный тег имеет несколько атрибутов, которые перечислены ниже.
• alink, link и vlink – позволяют установить цвет гиперссылок;
• background – выбор графического фона;
• bgcolor – изменение цвета фона веб-страницы;
• bgproperties – установка режима перемещения графического фона при пролистывании веб-страницы;
• bottommargin – позволяет редактировать высоту нижнего поля;
• leftmargin – позволяет редактировать ширину левого поля;
• marginheight – позволяет редактировать высоту верхнего и нижнего полей;
• marginwidth – позволяет редактировать ширину левого и правого полей;
• rightmargin – позволяет редактировать ширину правого поля;
• text – изменение цвета текста;
• topmargin – позволяет редактировать высоту верхнего поля.
Тег <br> предназначен для создания абзаца (то есть для переноса текста на нижеследующую строку). Этот тег имеет один атрибут – clear, предназначенный для предотвращения переноса слов текста.
С помощью тега <caption> вы можете снабдить таблицу заголовком, а атрибут данного тега align позволяет установить признак выравнивания заголовка таблицы.
Для центрирования элементов веб-страницы предназначен тег <center>.
<col> – данный тег позволяет создать неструктурную группу столбцов таблицы. Он имеет перечисленные ниже атрибуты.
• align – атрибут позволяет задать признак выравнивания данных в ячейках группы по горизонтали;
• bgcolor – с помощью данного атрибут задается цвет фона ячеек группы;
• char – выбор символа, устанавливающего порядок выравнивания данных в ячейках группы;
• span – установка числа столбцов в группе;
• valign – установка признака выравнивания данных в ячейках группы по вертикали.
<colgroup> – с помощью данного тега создается структурная группа столбцов таблицы. Он имеет те же атрибуты, что и тег <col>.
<dd> – данный тег позволяет отметить статью определения в списке определений, задаваемом тегами <dl> </dl>.
<del> – с помощью данного тега текст снабжается признаком зачеркивания.
<div> – данный тег позволяет разделить веб-страницу на области. Это бывает целесообразно при использовании стилей. У данного тега есть атрибут class, с помощью которого можно сформировать список исключений.
<font> – с помощью данного тега осуществляется изменение внешнего вида текста. Этот тег имеет перечисленные ниже атрибуты.
• color – изменение цвета текста;
• face – изменение шрифта текста;
• size – изменение размера шрифта.
<frame> – с помощью данного тега определяется набор данных фрейма. Данный тег имеет несколько атрибутов:
• bordercolor – предназначен для изменения цвета линий рамки фрейма;
• frameborder – позволяет скрыть рамку фрейма;
• marginheight – позволяет изменить высоту верхнего и нижнего полей фрейма;
• marginwidth – позволяет изменить ширину левого и правого полей фрейма;
• name – предназначен для присвоения имени фрейму;
• noresize – предотвращает изменение размеров фрейма;
• scrolling – предназначен для управления отображением полос прокрутки фрейма;
• src – предназначен для определения имени и местонахождения файла данных, отображаемых фреймом.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> – с помощью данных тегов создаются заголовки разных уровней (соответственно от первого до шестого). Все теги, предназначенные для создания заголовков, являются парными. Поэтому если вы, например, формируете заголовок первого уровня, то он должен находиться между тегами <h1> </h1>. Теги заголовков могут использоваться с атрибутом align, который позволяет определить признак выравнивания заголовка.
<head> – этот парный тег определяет раздел заголовка на веб-странице. Кроме этого, он предназначен для хранения прочих элементов, задача которых – помочь Интернет-обозревателю в работе с данными. Также между тегами <head> </head> могут располагаться метатеги, применяемые для хранения сведений, которые предназначены для Интернет-обозревателей и поисковых систем.
<hr> – этот тег предназначен для создания горизонтальной линейки. Он может использоваться с перечисленными ниже атрибутами:
• align – определяет признак выравнивания линейки;
• noshade – позволяет придать горизонтальной линейке объемный эффект;
• size – позволяет указать толщину линейки;
• width – позволяет указать ширину линейки.
<html> – этот тег предназначен для идентификации веб-страницы. Программный код любой веб-страницы должен начинаться тегом <html>, и завершаться тегом </html>.
<i> – с помощью данного тега (он также является парным) можно придать тексту курсивное начертание. Также для этого можно использовать теги <em> </em>.
<img> – с помощью этого тега осуществляется вставка в документ рисунков, фотографий, изображений и прочих графических объектов. Данный тег может использоваться с атрибутами:
• align – с помощью данного атрибута можно задать признаки выравнивания текста относительно изображения (например, чтобы текст обтекал изображение, и т.п.);
• alt – предназначен для отображения альтернативного текста при отсутствии графического объекта или в случаях, когда он недоступен;
• border – позволяет поместить графический объект в рамку;
• dynsrc – позволяет создать внедренный видео-объект;
• height, width – эти атрибуты позволяют задать соответственно высоту и ширину графического объекта;
• hspace, vspace – эти атрибуты позволяют обрамлять графический объект полосами чистого пространства;
• ismap – предназначен для создания карты ссылок;
• lowsrc – определяет имя и местонахождение файла изображения с низким разрешением;
• name – присваивает имя графическому объекту;
• src – определяет имя и местонахождение файла графического объекта;
• tabindex – устанавливает порядок перехода по графическим объектам;
• usemap – устанавливает имя карты ссылок.
<ins> – с помощью данного тега осуществляется подчеркивание вставленного фрагмента текста.
<li> – данный тег предназначен для создания списков. Каждый элемент списка должен помечаться этим тегом. Возможности HTML-языка предусматривают создание как маркированных, так и нумерованных списков. В первом случае используется атрибут type, во втором случае – value.
<meta> – с помощью данного тега в программном коде выделяется служебная информация о веб-странице, предназначенная главным образом для поисковой оптимизации.
<nobr> – действие этого тега прямо противоположно действию тега <br>: он запрещает переход текста на новую строку.
<noframes> – с помощью данного тега включается отображение альтернативного текста при невозможности показа фрейма.
<noscript> – с помощью данного тега включается отображение альтернативного текста при невозможности исполнения сценария JavaScript.
<ol> – данный тег предназначен для формирования нумерованных списков. Он может использоваться совместно с атрибутами start, который определяет начальный номер элементов списка, и type, определяющим стиль нумерации списка.
<p> – с помощью данного тега можно создавать новые абзацы. Он может использоваться с атрибутом align, который определяет признак выравнивания текста абзаца.
<script> – этот тег предназначен для создания объекта сценария JavaScript.
<small> – с помощью данного тега вы моете уменьшить размер шрифта относительно расположенного рядом текста.
<strike> – тег устанавливает признак зачеркивания текста;
<strong> – создание полужирного текста (аналог приведенных выше тегов <b> </b>);
<sub> – преобразование текста в подстрочный индекс (то есть создание подстрочного текста);
<sup> – преобразование текста в надстрочный индекс (то есть создание надстрочного текста);
<table> – тег предназначен для построения таблиц. Он может использоваться совместно с перечисленными ниже атрибутами.
• align – включает режим обтекания таблицы текстом;
• background – определяет графический фон таблицы;
• bgcolor – устанавливает цвет фона таблицы;
• border – позволяет установить требуемую толщину линии рамки;
• bordercolor – устанавливает цвет линий рамки;
• cellpadding – устанавливает размер полос чистого пространства, отделяющего содержимое ячеек таблицы от ее границ (иначе говоря, с помощью этого атрибута определяется расстояние от содержимого ячейки до ее границ);
• cellspacing – позволяет установить расстояние между ячейками таблицы;
• frame – позволяет установить набор отображаемых линий рамки таблицы;
• height, width – эти атрибуты позволяют установить соответственно высоту и ширину таблицы;
• rules – позволяет установить набор внутренних линий таблицы, которые будут отображаться.
<td> <th> – данные теги позволяют определить соответственно ячейку данных и ячейку заголовка таблицы. Они могут использоваться с атрибутами, которые перечислены ниже.
• align – атрибут позволяет указать способ выравнивания данных по горизонтали;
• background – выбор графического фона ячеек;
• bgcolor – выбор цвета фона ячеек;
• char – указание символа, определяющего порядок выравнивания данных в ячейках;
• colspan – с помощью этого атрибута можно соединить соседние ячейки одной строки таблицы;
• height – атрибут позволяет задать высоту ячейки;
• width – атрибут позволяет задать ширину ячейки;
• nowrap – с помощью данного атрибута можно запретить перенос слов внутри ячейки на новую строку;
• rowspan – атрибут позволяет выполнить объединение соседних ячеек одного столбца;
• valign – атрибут позволяет задать способ выравнивания данных по вертикали.
<title> – с помощью данного тега задается заголовок веб-страницы, который отображается вверху окна Интернет-обозревателя.
<tr> – тег предназначен для создания строки таблицы. Он может использоваться с перечисленными ниже атрибутами.
• align – атрибут позволяет указать способ выравнивания данных по горизонтали;
• bgcolor – выбор цвета фона;
• char – позволяет задать символ, определяющий порядок выравнивания данных в ячейках;
• valign – атрибут позволяет задать способ выравнивания данных по вертикали.
<tt> – тег позволяет отобразить текст моноширинным шрифтом.
<u> – данный тег включает подчеркивание текста.
<ul> – с помощью данного тега можно создавать маркированные списки. Использование с данным тегом атрибута type позволяет указать стиль маркированного списка.
Как показывает практика, перечисленных тегов с атрибутами бывает достаточно для создания несложных веб-страниц на языке программирования HTML.

Быстрый старт

Далее на конкретных примерах рассмотрим порядок использования HTML-тегов в редакторе товара или раздела программы WinShop и использования HTML-тегов в WinShop Site Web Administrator. Для усвоения материала просто выполните то, что предложено в примерах.

Практический пример использования HTML в редакторе товара или раздела программы WinShop

Напомним, что в редакторе товара или раздела HTML-теги можно вводить как вручную, так и с использованием инструментов встроенного HTML-редактора. В программе WinShop реализована поддержка 1-й версии языка HTML, которая поддерживается всеми без исключения Интернет-обозревателями. Поэтому при использовании инструментов HTML-редактора, изначально предлагаемых разработчиками (по умолчанию включенных в инструментальную панель), программный код страницы формируется с учетом особенностей этой версии. Например, при нажатии кнопки «Ж» в тексте описания появятся теги <strong> </strong> (а не короткие аналоги <b> </b>), при нажатии кнопки «К» отобразятся теги <em> </em> (а не более распространенные аналоги <i> </i>). Однако при ручном вводе, а также при составлении шаблонов HTML-тегов вы можете пользоваться тегами любых версий HTML (т.е. вместо <strong> </strong> можно вводить <b> </b>, вместо <em> </em> пользоваться <i> </i>, и т.д.).
Откройте редактор товара (в редакторе раздела все выполняется аналогичным образом), на вкладке «Описание» (1) наберите следующий код (2):
<div>
<h1>Информация о товаре</h1>
Предлагаем Вашему вниманию новый эксклюзивный товар
</div>

Затем нажмите кнопку «Просмотр (3).

PrimerOpisanie.jpg

В результате мы получили заголовок страницы (4) и ее содержание (5). Для возврата в режим редактирования нажмите «Закрыть просмотр» (6).
PrimerOpisanieProsmotr.jpg
Далее выделим курсивом слова Вашему вниманию (7), и жирным шрифтом – слова эксклюзивный товар (8), а заголовок оформим голубым цветом (9).
<div>
<h1><font color="#0000FF">Информация о товаре</font></h1>
Предлагаем <em>Вашему вниманию</em> новый <strong>эксклюзивный товар</strong>
</div>

PrimerOpisanieKursiv.jpg

Далее составим маркированный список (10) с видами комплектации товара – «базовая», «расширенная» и «эксклюзивная»:
<div>
<h1><font color="#0000FF">Информация о товаре</font></h1>
Предлагаем <em>Вашему вниманию</em> новый <strong>эксклюзивный товар</strong><br>
Виды комплектации:
<ul>
<li>базовая
<li>расширенная
<li>эксклюзивная
</ul>
</div>

PrimerOpisanieSpisok.jpg

Теперь сформируем таблицу со сроками доставок из трех столбцов и двух строк, раскрасив ее ячейки в разные цвета и расположив содержимое каждой ячейки по центру (11). При этом заголовок таблицы оформим красным цветом и расположим по центру страницы (12).
<div>
<h1><font color="#0000FF">Информация о товаре</font></h1>
Предлагаем <em>Вашему вниманию</em> новый <strong>эксклюзивный товар</strong><br>
Виды комплектации:
<ul>
<li>базовая
<li>расширенная
<li>эксклюзивная
</ul>
<font color="#FF0000"><div style="text-align: center;">Сроки доставки товара</div></font>
<table width="100%" border="1">
<tr>
<td bgcolor="#FFFF00"><div style="text-align: center;">Партия до 5 штук</div></td>
<td bgcolor="#FF99CC"><div style="text-align: center;">Партия от 5 до 10 штук</div></td>
<td bgcolor="#00FF00"><div style="text-align: center;">Партия более 10 штук</div></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><div style="text-align: center;">1 день</div></td>
<td bgcolor="#FFCC00"><div style="text-align: center;">3 дня</div></td>
<td bgcolor="#CCFFCC"><div style="text-align: center;">5 дней</div></td>
</tr>
</table>
</div>

PrimerOpisanieTablica.jpg

В завершение примера вставим под таблицей посередине страницы картинку размером 100х100 (13), и дадим ссылку на сайт ООО «Торговый портал» (www.shop.by), при этом ссылкой будет являться название компании (14).

<div>
<h1><font color="#0000FF">Информация о товаре</font></h1>
Предлагаем <em>Вашему вниманию</em> новый <strong>эксклюзивный товар</strong><br>
Виды комплектации:
<ul>
<li>базовая
<li>расширенная
<li>эксклюзивная
</ul>
<font color="#FF0000"><div style="text-align: center;">Сроки доставки товара</div></font>
<table width="100%" border="1">
<tr>
<td bgcolor="#FFFF00"><div style="text-align: center;">Партия до 5 штук</div></td>
<td bgcolor="#FF99CC"><div style="text-align: center;">Партия от 5 до 10 штук</div></td>
<td bgcolor="#00FF00"><div style="text-align: center;">Партия более 10 штук</div></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><div style="text-align: center;">1 день</div></td>
<td bgcolor="#FFCC00"><div style="text-align: center;">3 дня</div></td>
<td bgcolor="#CCFFCC"><div style="text-align: center;">5 дней</div></td>
</tr>
</table><br>
<div style="text-align: center;"><img src="D:\Cvety.jpg" width="100" height="100"> </div><br>
Техническое сопровождение и поддержка магазина - <a href="http:\\shop.by">ООО "Торговый портал"</a>
</div>

PrimerOpisanieSsylka.jpg

Практический пример использования HTML в WinShop Site Web Administrator

Рассмотрим, каким образом с помощью встроенного HTML-редактора можно заполнить дополнительную страницу магазина в WinShop Site Web Administrator.
При выполнении примера помните, что все выполненные изменения можно будет увидеть только после их сохранения в WinShop Site Web Administrator (ссылка «Применить») и последующего обновления соответствующей страницы интернет-магазина в окне Интернет-обозревателя.
Предположим, что наша дополнительная веб-страница должна содержать следующий текст.

Добро пожаловать!
Мы рады приветствовать вас на сайте нашей компании. Уже более пяти лет мы занимается продажей товаров и оказанием услуг. Ниже представлены списки основных позиций, которые мы рады предложить.
Товары:
промышленные товары;
строительные материалы;
одежда, обувь;
детские игрушки.
Услуги:
грузоперевозки;
ответственное хранение;
юридическое консультирование.
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

Этот текст на странице поначалу будет включать в себя следующие элементы: заголовок, курсивный, полужирный и подчеркнутый текст, а также маркированный и нумерованный списки. После этого переделаем списки в таблицу, и вставим на страницу изображение.
Войдите в WinShop Site Web Administrator, откройте режим редактирования дополнительной страницы, и в текстовом поле составьте программный код так, чтобы озаглавить текст (1), первую после заголовка фразу написать курсивом (2), во второй фразе слова «пяти лет» – подчеркнутым шрифтом (3), а третью фразу — полужирным шрифтом (4). Кроме этого, слова «Товары» и «Услуги» будут у нас начинаться с новой строки (5). Напомним, что переключение режимов встроенного HTML-редактора осуществляется с помощью кнопки «Источник» (6).

<h1>Добро пожаловать!</h1>
<i>Мы рады приветствовать вас на сайте нашей компании. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
Товары:
промышленные товары;
строительные материалы;
одежда, обувь;
детские игрушки.<br>
Услуги:
грузоперевозки;
ответственное хранение;
юридическое консультирование.
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

Primer1Nachalo.jpg

Дополните программный код так, чтобы получить маркированный (7) и нумерованный списки (8), сохраните изменения и просмотрите страницу в окне Интернет-обозревателя.

<h1>Добро пожаловать!</h1>
<i>Мы рады приветствовать вас на сайте нашей компании</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
Товары:
<ul>
<li>промышленные товары</li>
<li>строительные материалы</li>
<li>одежда, обувь</li>
<li>детские игрушки</li>
</ul>
Услуги:
<ol>
<li>грузоперевозки</li>
<li>ответственное хранение</li>
<li>юридическое консультирование</li>
</ol>
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

Primer1Spiski.jpg
Теперь измените код таким образом, чтобы списки товаров и услуг были представлены в табличном виде (9). Для этого задействуйте теги <table> </table>, <tr> </tr> и <td> </td>, или в инструментальной панели HTML-редактора воспользуйтесь кнопкой «Вставить/Редактировать таблицу» (название кнопок панели отображается при наведении указателя мыши).

<h1>Добро пожаловать!</h1>
<i>Мы рады приветствовать вас на сайте нашей компании</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
<table>
<tr>
<td>Товары</td>
<td>Услуги</td>
</tr>
<tr>
<td>промтовары</td>
<td>грузоперевозки</td>
</tr>
<tr>
<td>стройматериалы</td>
<td>ответственное хранение</td>
</tr>
<tr>
<td>одежда, обувь</td>
<td>консультирование</td>
</tr>
<tr>
<td>детские игрушки</td>
<td>кредитование</td>
</tr>
</table>
Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта.

Primer1Tablica.jpg

Очевидно, что такая таблица смотрится неэргономично и нуждается в доработке. Как минимум, ее следует заключить ее в рамки, и выделить заголовки столбцов. Первая задача решается с помощью атрибута border тега <table> (10). Что касается выделения заголовков столбцов, то ячейки можно выделить желтым цветом (11), а сами заголовки написать жирным шрифтом (12).

Primer1TablicaRamka.jpg

Теперь таблица примет более эргономичный вид (13). Толщина рамки составляет 2 пиксела – в соответствии со значением атрибута border (10).

Primer1TablicaCvet.jpg
Содержимое ячеек целесообразно отодвинуть от рамки – эта задача решается с помощью атрибута cellpadding тега <table>. Присвойте ему значение 10, чтобы это расстояние составило 10 пикселей (14). Кроме этого, с помощью атрибута align тега <table> центрируйте таблицу посередине страницы (15), а этот же атрибут в применении с тегами <td> позволит выровнять содержимое ячеек по центру (16).

Primer1TablicaCenter.jpg

Если все выполнено правильно, то после сохранения изменений и обновления страницы таблица заметно преобразится (17).
Primer1TablicaGotova.jpg
Дополнительную страницу магазина можно проиллюстрировать. Предположим, что файл изображения находится на локальном компьютере по адресу D:\Primer.jpg.
Установите курсор в строку, следующую после кода таблицы (т.е. после тега </table>). Нажмите в инструментальной панели HTML-редактора кнопку «Вставить/Редактировать изображение» (18). В открывшемся окне выберите закладку «Закачать» (19), нажмите кнопку «Обзор» (20) и выберите файл рисунка – чтобы полный путь к нему отобразился в поле «Закачать» (21). После этого нажмите кнопку «Послать на сервер» (22).

Primer1PicZakach.jpg

На вкладке «Информация о изображении» (23) в поле «URL» отобразится путь к закачанному на сервер файлу (24). Если этого не произошло автоматически, выберите файл изображения через кнопку «Просмотреть на сервере» (25). В полях «Ширина» и «Высота» укажите значения 100 (26), по горизонтали и вертикали задайте отступ 5 пикселей (27), и укажите способ выравнивания «По левому краю» (28). Нажмите «ОК» (29) и сохраните изменения дополнительной страницы.

Primer1PicNastr.jpg

В результате в программном коде страницы сразу после табличного кода появится соответствующий фрагмент (30). После последней фразы добавьте текст:
Мы работаем без выходных, с 9-00 до 20-00, в субботу до 19-00, в воскресение до 18-00. Возможен отпуск товаров и получение услуг без осуществления предварительной оплаты. (31)

Primer1KodPic.jpg

Сохраните изменения и просмотрите обновленную страницу в окне Интернет-обозревателя – в ней появится добавленное изображение (32), а справа от него – обновленный текст (33).

Primer1Rezultat.jpg

Окончательный код дополнительной страницы интернет-магазина будет выглядеть так:

<h1>Добро пожаловать!</h1>
<br />
<i>Мы рады приветствовать вас на сайте нашей компании</i>. Уже более <u>пяти лет</u> мы занимается продажей товаров и оказанием услуг. <b>Ниже представлены списки основных позиций, которые мы рады предложить</b>.<br>
<table cellpadding="10" border="2" align="center">
<tr>
<td bgcolor="yellow" align="center"><b>Товары</b></td>
<td bgcolor="yellow" align="center"><b>Услуги</b></td>
</tr>
<tr>
<td align="center">промтовары</td>
<td align="center">грузоперевозки</td>
</tr>
<tr>
<td align="center">стройматериалы</td>
<td align="center">ответственное хранение</td>
</tr>
<tr>
<td align="center">одежда, обувь</td>
<td align="center">консультирование</td>
</tr>
<tr>
<td align="center">детские игрушки</td>
<td align="center">кредитование</td>
</tr>
</table>
<img hspace="5" height="100" align="left" width="100" vspace="5" src="http://tanix.test.shop.by/images/Primer.jpg" alt="" /> Более подробно об ассортименте товаров и услуг вы можете узнать в нашем отделе сбыта. Мы работаем без выходных, с 9-00 до 20-00, в субботу до 19-00, в воскресение до 18-00. Возможен отпуск товаров и получение услуг без осуществления предварительной оплаты.


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



Вернуться на главную