Способы определения таблиц стилей

Введение

Сайт (веб-сайт англ. website, от web — паутина, «веб» и site — «место») - это место во всемирной сети, которое имеет свой адрес, собственного хозяина и состоит из отдельных веб-страниц.

Глобальная сеть состоит из всех сайтов, доступных для общего пользования. Все странички каждого сайта объединяются одним корневым адресом (то, что мы набираем в адресной строке браузера), тематикой, системой и дизайном. Каждая страница веб-сайта это текстовый документ, который написан на языке программирования (HTML, XHTML, JAVA или другие). Эти текстовые файлы загружаются на ваш компьютер, обрабатываются браузером и отображаются на мониторе компьютера в виде страницы сайта. Язык программирования позволяет редактировать текст странички, добавлять ссылки, вставлять картинки, звуковые и видео файлы. Страницы сайтов могут быть как простыми наборами информации - тексты и картинки, так и сложными, с огромным количеством функций, которые управляются различными программами.

В разработке сайтов принимает участие большое количество людей – программисты, веб-дизайнеры и другие. Вначале веб-дизайнер создаёт дизайн будущего сайта, учитываются пожелания заказчика, цель сайта и его предполагаемая аудитория. Подбираются подходящие шрифты, картинки, расположение объектов. После наступает очередь работы верстальщика. Он работает с готовым дизайном, оптимизируя его под различные брузеры. Далее следует программирование. Программист создает структуру сайта с нуля, это делается с помощью языка программирования. Готовый сайт, наполняется информацией. Также существуют различные люди, которые раскручивают, оптимизируют сайт, размещают его в интернет-каталогах, распространяют рекламу вашего сайта и т. п.

Премедтная область

В современной социокультурной среде, веб-инфраструктура является одним

из наиболее важных источников информации, а также средств общения,

посредством ресурсов, называемых веб— сайтами.

При этом развитие сети интернет, произошедшее за небольшое даже по

современным меркам время, привело к бурной эволюции самих

информационных ресурсов— узлов сети.

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

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

контента.

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

Однако, с развитием сети, с увеличением пользователей, сменилась и сама парадигма информационного наполнения сети. Без сомнения,

первоначальная идея, обмена научной информацией через сеть интернет—

присутствует и поныне. Однако, было бы неверным, говорить, что это

основное предназначение сети сегодня.

Современная парадигма сетевого обмена информацией в сети интернет

является многогранной и чрезвычайно фрагментированной.

Интернет находится в постоянной трансформации, как по причине

развития самой инфраструктуры сети, обеспечивающей все большие

скорости и объемы обмена информацией, так и увеличивающей

проникновение сети вовсе более бедные и отдаленные уголки планеты так и

по причине появления инновационных устройств создания и потребления

контента. Так если, всего 5–6 лет назад, основная масса устройств,

подключенных к сети интернет представляла собой стационарные

компьютеры, то уже сегодня это место заняли разнообразные мобильные

устройства.

Основные направления создания и потребления контента в сети Интернет подвержены Моде. И развиваются по ее законам. Когда-то это были форумы, потом им на смену пришли блоги, сегодня это социальные сети.

Так же к числу основных контентных направлений можно отнести разнообразные новостные ресурсы, а также ресурсы интернет-коммерции (различные магазины и торговые площадки— агрегаторы), а также поисковые ресурсы.

Вместе с тем, существуют и разнообразные нишевые направления, имеющие определенную аудиторию. Например, онлайн-библиотеки, игровые порталы, научные порталы и так далее.

Кроме того, не надо забывать о многочисленных ресурсах, имеющих место быть в корпоративных сетях (так называемых Интранет-ресурсах).

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

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

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

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

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

Современная парадигма дизайна информационных систем, подразумевает четкое разделение на три взаимодействующих составляющих: внешняя визуальная часть, предназначенная для взаимодействия с конечными пользователями (или в общем случае с внешними информационными системами), подсистему хранения данных, а также подсистему промежуточного слоя, призванную обеспечивать интерфейс между визуальной частью и хранимыми данными, собственно контентом. Эта часть представлена бизнес-логикой системы. Вышеназванная парадигма обозначается как MVC (Model-View-Controller).

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

Рассмотрим типичный жизненный цикл веб-сайта:

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

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

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

4.Успех веб-сайта, резкое повышение нагрузки. Как следствие, редизайн системы хранения данных и доступа к данным, с сохранением пользовательских интерфейсов (модернизация подсистем хранения данных и подсистемы реализации бизнес — логики).

5.Модернизация визуальной подсистемы в соответствии с последними трендами.

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

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

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

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

Поскольку на наш взгляд, сегодня, на первое место выходит не проблема создания “правильного” визуального дизайна веб ресурса, а скорее проблема создания дизайна учитывающего новации пользовательского опыта доступа к веб-ресурсам с использованием множества новых устройств, таких как планшеты, смартфоны, смарт-телевизоры и другие устройства. Ключевой особенностью пользовательского опыта доступа в сеть интернет с этих устройств, является, то, что пользователи находятся в сети постоянно, в любое время суток. В пределе можно говорить о том, что они находятся в сети все 24 часа в сутки. Эта особенность коренным образом меняет пользовательское поведение, поскольку если раньше, активным пользователем сети интернет считался тот, кто, хотя бы раз в неделю проверял свою почту, то теперь это тот, кто проводит в сети все свободное время. Таким образом, визуальный дизайн современных успешных веб-ресурсов, в первую очередь должен быть ориентирован на инновационные устройства. И должен учитывать, как существующие ограничения (небольшой размер экрана, ограниченность устройств ввода информации), так и имеющиеся возможности (высокое разрешение экранов устройств, наличие фото и видеокамер высокого разрешения, наличие различных датчиков и т. п.). Таким образом, одно из ключевых требований к дизайну современных веб сайтов — размещение всей важной функциональности, в крайне ограниченном объеме, и максимально полная поддержка инновационных возможностей устройств.

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

Непрерывное развитие техники, ставит перед создателями веб-сайтов новые задачи. Так видится, что следующими за смартфонами и планшетами, массовыми пользовательскими устройствами станут разнообразные системы виртуальной реальности (VR). Прототипами этих устройств сегодня являются очки Google Glass и прочие подобные проекты.

Основой особенностью данных устройств, является еще больший отход от современных парадигм ввода информации (клавиатуры и манипуляторы) в пользу речевого ввода информации, а также учет состояния различных датчиков (магнитометр, GPS датчик положения головы).

Учитывая все вышеперчисленное

При грамотном подходе с помощью оффлайн помощника можно получать 20–30% лидов от общего количества и уменьшить затраты на рекламу. Я расскажу, как правильно работать с этим инструментом.

Зачем нужен оффлайн-помощник? Бывают ситуации, когда:

· Разговаривать по телефону неудобно;

· Есть люди, которые не любят звонить первыми;

· Есть клиенты, которые не хотят звонить, так как боятся, что им потом будут часто перезванивать;

· Есть клиенты, которые не хотят тратить время на пустой звонок. Перед покупкой они изучают сайты и выбирают, кому позвонить.

У клиента есть вопрос, и он не готов звонить, чтобы задать этот вопрос. Но если начать с ним диалог, он может раскрыться и объяснить, что ему нужно.

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

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

В итоге количество заявок через сайт падает на 5–10%, но количество полученных через оффлайн-помощник лидов возрастает на 20–30%.

Нет смысла устанавливать инструмент на сайты, у которых цена обращения меньше 200 рублей, так как затраты на оператора не будут перекрывать выгоду.

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

Ошибки использования:

Наверняка каждый видел сайты, где оффлайн-помощник выскакивает с криком «Э-ге-гей, давай помогу!» на всех страницах. Так инструмент превращается из помощника в основного раздражителя на сайте. А всего-то нужно в настройках задать «Время от последнего приглашения» — эта функция регулирует частоту всплывающего окна.

В 90% случаях мы задаем клиенту вопрос, а не ждем, когда он сам что-то спросит. Нужно обязательно настраивать активное приглашение. Без этого эффективность сводится к нулю.

Еще один распространённый случай: задаешь вопрос, а в ответ тишина. Если оператор в данный момент не может отвечать клиентам — он не должен быть онлайн.

Оффлайн-помощники за последнее время приобрели много новых функций. С помощью них можно:

· Узнать, на какой странице находится клиент;

· Видеть, по какой рекламе пришел клиент;

· Понять, в каком городе находится клиент;

· Видеть, что печатает клиент до того, как он отправил сообщение;

· Задать вопрос клиенту автоматически, в зависимости от его поведения (например, если пользователь посмотрел х страниц или определенный URL);

· Отвечать на вопросы клиентов с декстопа и смартфона;

· Видеть статистику операторов (активность оператора, его логи, время ответа, часы работы);

· Читать журналы диалогов;

· Интегрироваться по API (например, можно интегрироваться с CRM).

Теоритическая часть.

HTML

HTML разработал Тим Бернерс-Ли (Tim Berners-Lee) в 90 -х годах прошлого столетия на основе работ Теда Нельсона (Ted Nelson), которому принадлежит концепция гипертекста. HTML разработан с учетом того, что информацию из сети могут использовать различные устройства: персональные компьютеры с экранами, обладающими различным разрешением и количеством цветов, сотовые телефоны, устройства для речевого ввода-вывода, компьютеры с высокой и низкой пропускной способностью и т.д.

Основные понятия

Язык HTML(Hyper Text Markup Language) — это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные командыHTML, описывающие, как должен выглядеть данный текст.Гипертекст– это расширенный текст, содержащий дополнительные элементы. Главный из них – это гипертекстовая ссылка (гиперссылка), щелчок на которой позволяет перейти к другому документу или к другому фрагменту того же документа. Вставляемые объекты (рисунки, видеоролики и т.д.) также рассматриваются как элементы гипертекста.HTML-документ – это файл с расширением htm илиhtml.

В документе HTMLобычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например<html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами (tags).

Тэги могут быть парными и непарными. Любой тэг начинается с левой угловой скобки <, после которой следует имя тэга, и правой угловой скобки >, например <html>. Парный тэг состоит изоткрывающего (стартового) тэга изакрывающего, у которого перед именем отображается символ "/" (слэш), например </html>. Кроме этого, большинство тэгов могут иметь необязательныеатрибуты, значение которых задается "по умолчанию" или явно.Атрибут тэга состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить. Может случиться так, что браузер не понимает данный тэг; в этом случае он его пропускает, но сообщение об ошибке не выдается.

В языке HTML не делают различия между большими и малыми буквами, так, что тэги <HEAD>, <head> и <Head> эквивалентны.

Все тэги делятся на две категории:

1.структурные тэги;

2.тэги разметки.

Рассмотрим пример простого HTML-документа:

<html>

<head>

<title>

Пример1

</title>

</head>

<body>

<h1> Всем привет!

</h1>

<p>

Я студент группы МГ-21 Петров П.П.

</p>

</body>

</html>

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

При просмотре в браузере мы увидим на экране следующий текст:

Всем привет!

Я студент группы МГ-21 Петров П.П.

Структурные тэги

Они описывают общие свойства документа, например, его название или используемую кодировку символов.

<html>...</html>- тэги, являющиеся признаком начала и конца документа

<head>...</head> - эта пара тэгов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования документа сюда включается служебная информация.

<title>...</title> - все, что находится между тэгами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тэгом <title>, отображается в заголовке окна браузера и печатается в верхнем углу каждой страницы при выводе документа на принтер. Рекомендуется давать название, не превышающее 64 символа.

<body>...</body> - эта пара тэгов указывает на начало и конец тела HTML-документа; все то, что заключено между этими тэгами, определяет информацию, отображаемую в окне браузера.

Комментарии

Файл HTML может содержать комментарии, поясняющие написанный HTML-код. Комментарии начинаются с последовательности. Комментарии игнорируются браузером и не влияют на представление документа на экране.

Например: <--! этот текст является комментарием-->

Тэги разметки

Тэги форматирования текста

<h1>...</h1> ¸ <h6>...</h6>-задают уровни заголовков,причемзаголовок первого уровня — самый крупный, шестого уровня - самый мелкий.

<p>...</p> - такая пара тэгов описывает абзац. Все, что заключено между <р> и </р>, воспринимается как один абзац, так как символы конца абзаца <Enter> браузером игнорируются. Закрывающий тэг </р> может быть опущен.

Тэги <h > и <p>могут содержать дополнительный атрибут align,который принимает одно из трех значений:

align=center– выравнивание текста по центру;

align=left– выравнивание текста по левому краю;

align=right– выравнивание текста по правому краю.

Например:<h1 align=center>

<br>-используется, если необходимо перейти на новую строку, не прерывая абзаца. Он особенно удобен при публикации стихов

<p> Однажды в студеную зимнюю пору<br>

Я из лесу вышел. Был сильный мороз.<br>

Гляжу, поднимается медленно в гору,br>

Лошадка, везущаяя хворосту воз.

</p >

<hr> - тэг, который описывает вот такую горизонтальную линию:

Тэг <hr> может дополнительно включать различные атрибуты, например:

<hr align=right> (center или left) – выравнивание по горизонтали;

<hr ширина линии в процентах/пикселях (точках);

<hr size=8> - толщина линии в пикселях;

<hr color=green> - цвет линии (в примере зеленый).

<marquee>...</marquee>позволяет представить текст в виде бегущей строки.

Этот тэг может иметь следующие атрибуты:

· bgcolor- цвет фона;

· heigth – высота ширина бегущей стоки;

· width – ширина бегущей стоки;

· direction – направлениеперемещения текста (left|right) (по умолчанию – left).

Например:<marquee height=10 color= yellow > Это бегущая строка </marquee>

2.2. &-последовательности

Поскольку символы < и > воспринимаются браузерами как начало и конец тэгов, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей, значение некоторых из них приведены в таблице. Наличие ";" и строчных символов обязательно!

&-последовательность	отображаемый символ
<	<
>	>
"	"

1. Тэги форматирования шрифта

Форматирование шрифта подразумевает:

1. Выбор стиля написания

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

<i >...</i >наклонный текст (курсив);

<tt>...</tt>пишущая машинка;

<u >...</u>подчеркивание;

<sup>...</sup> - ^{верхний индекс}

<sub>...</sub> - _{нижний индекс}

2. Выбор размера шрифта или его цвета

<font>...</font> тэг для определения размера и цвета шрифта.

Характеристики тэга <font> определяются с помощью атрибутов:

size=n– где n - абсолютный размер шрифта (значение от 1 до 7). Размер может задаваться и в относительном виде по отношению к базовому размеру, например,size=+|-n. Базовое значение можно изменить при помощи тэга

color- атрибут цвета шрифта, который задается в виде color=цвет.

Пример: Тэг <font color=red size=4> задает шрифт красного цвета четвертого размера.

2.4. Тэг преформатирования

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

2.5. Цветовая гамма html-документа

Использование атрибута colorдает возможность задавать цвет текста (шрифта). Атрибут colorможет использовать либо название цвета, либо его шестнадцатеричную форму. Цвет кодируется последовательностью из трех пар символов по схеме R,G,B(Red,Green,Blue– красный, зеленый, синий). Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета в диапазоне от нуля (00 – самая маленькая насыщенность) до 255 (FF – самая большая насыщенность). Перед шестнадцатеричным кодом цвета ставится знак "решетка" (#). Цвет "#000000" – черный, а "#ffffff" – белый.

Например: <font color="red">, либо <font color="#ff0000"> , что означает одно и то же.

Некоторые цвета, их название и шестнадцатеричный код приведены в таблице:

Код	Цвет	Значение
#000000	ЧЕРНЫЙ	black
#FFFFFF	БЕЛЫЙ	white
#FF0000	КРАСНЫЙ	red
#008000	ЗЕЛЕНЫЙ	green
#0000FF	СИНИЙ	blue
#808000	ОЛИВКОВЫЙ	olive
#FFFF00	ЖЕЛТЫЙ	Yellow
#C0C0C0	СЕРЕБРИСТЫЙ	Silver
#808080	СЕРЫЙ	Gray
#FF00FF	ФУКСИНОВЫЙ	Fuchsia
#000080	УЛЬТРАМАРИН	Navy
#008080	СИЗЫЙ	Teal
#00FF00	СВЕТЛО-ЗЕЛЕНЫЙ	Lime
#800080	ПУРПУРНЫЙ	Purple
#800000	КАШТАНОВЫЙ	maroon

Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри тэга <body>. Вот список этих атрибутов:

textопределяет цвет текста документа;

linkопределяет цвет гиперссылки - выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;

vlinkопределяет цвет гиперссылки, которая уже была просмотрена;

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

Например:<body bgcolor="#ffffff" text="#ff0000" link="#00ff00">определяет красный текст на белом фоне и зеленые ссылки.

Кроме того, тэг <body>может включать атрибутbackground="URL", который задает изображение, служащее фоном для страницы. ЗдесьURL– это адрес файла, содержащего фоновый рисунок. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением*.gif) или JPEG (файл с расширением*.jpgили*.jpeg).

Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.

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

6. Списки

Списки бывают следующих видов:

· нумерованные;

· ненумерованные (маркированные):

· вложенные.

Нумерованный список– это текст, заключенный в тэги <ol>... </ol>. Каждый новый элемент списка нужно начинать с тэга <li>. Этот тэг является непарным. В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если один или несколько элементов списка удалить, то остальные будут автоматически перенумерованы.

Пример.

<p> Виды программного обеспечения: <br>

<ol>

<li>Системное

<li>Прикладное

<li>Инструментальное

</ol>

</p>

В окне браузера будет отображено следующее:

Виды программного обеспечения:

1. Системное

2. Прикладное

3. Инструментальное

Тэг <ol> может иметь дополнительные атрибуты

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

A– заглавные латинские буквы (A,B,C…);

a– строчные латинские буквы (a,b,c…);

I– большие римские цифры (I,II,III…);

i– маленькие римские цифры (i,ii,iii…);

1 – арабские цифры (1, 2, 3…) – установлен по умолчанию.

start=n– задает начальное значение числовой нумерации.

Ненумерованный список–это текст, заключенный в тэги <ul> ... </ul>. Каждый новый элемент списка начинается с тэга <li>. При просмотре в браузере каждый элемент такого списка помечается специальным значком – маркером, вид которого можно задать при помощи атрибута тэга <ul>:

<ul type=disc|circle|square>, что приводит к маркерам следующих видов:?,(установлен по умолчанию),¢.

Вложенный список– это комбинация нумерованного и маркированного списков, вложенных друг в друга. Число уровней вложения не ограничено.

Пример.

<p> Виды программного обеспечения:

<ol>

<li> Системное

<ul>

<li> Операционные системы

<li> Драйверы

</ul>

<li> Прикладное

<ul>

<li> Текстовые процессоры

<li> Табличные процессоры

<li> СУБД

</ul>

</ol>

</p>

Тэг <li> также может иметь атрибутtype, со значением, зависящим от того, в списке какого вида он находится.

Списки определений: <dl> ... </dl>

Список определений несколько отличается от других видов списков. Вместо меток <li>в списках определений используются тэги<dt>(от английского definition term — определяемый термин) и<dd>(от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

<dl>

<dt>HTML

<dd>Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

<dt>HTML-документ

<dd>Текстовый файл с расширением *.htm или *.html

</dl>

Этот фрагмент будет выведен на экран следующим образом:

HTML

Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

Обратите внимание: точно так же, как тэги <li>, тэги<dt>и<dd>не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <dl compact>. Например, вот такой фрагмент HTML-текста:

<dt>А

<dd>Первая буква алфавита

<dt>Б

<dd>Вторая буква алфавита

<dt>В

<dd>Третья буква алфавита

</dl>

будет выведен на экран примерно так:

Первая буква алфавита

Вторая буква алфавита

Третья буква алфавита

Формы

Формы(формуляры) превращаютWWWв интерактивную среду. Они реализуют простейший способ связи пользователя и сервера.

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

Как устроена форма

Форма открывается меткой <form>и заканчивается меткой</form>.HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая тэги, может размещаться внутри форм без ограничений.

Тэг <form>может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

actionобязательный атрибут. Определяет, где находится обработчик формы.

method определяет метод, используемый для передачи набора данных формы на сервер

enctype определяет, каким образом данные из формы будут закодированы для передачи обработчику

Простейшая форма

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

Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью submit,при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке<form>.

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута value="Надпись", например:

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута name=[имя](читается "нэйм", от английского "имя"), например:

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную buttonсо значением “Поехали”!.

В форме может быть несколько кнопок типа submitс различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопкуsubmitнажал пользователь.

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

<html>

<head>

<title>Пример 14</title>

<body>

</head>

<h1>Простейшая форма </h1>

</form>

</body>

</html>

Этот фрагмент на экране будет выглядеть так:

Простейшая форма

Начало формы

Конец формы

Как форма собирает данные

Существуют и другие типы элементов <input>. Каждый элемент<input>должен включать атрибутname=”имя”, определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов<input>должны включать атрибутvalue="значение", определяющий значение, которое будет передано обработчику под этим именем. Для элементов<input tupe=text>и<input type=password>, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

Основные типы элементов <INPUT>:

TYPE=text - определяет окно для ввода строки текста. Может содержать дополнительные атрибутыSIZE=[число](ширина окна ввода в символах) иMAXLENGTH=[число](максимально допустимая длина вводимой строки в символах).

Пример: <INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван">

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

TYPE=password - определяет окно для ввода пароля. Абсолютно аналогичен типуtext, только вместо символов вводимого текста показывает на экране звездочки (*).

Пример: <INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.

TYPE=radio- определяет радиокнопку. Может содержать дополнительный атрибутchecked(показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.

Пример: <INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с <INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с <INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

TYPE=checkbox- определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибутchecked(показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример:<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры <INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции <INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей <INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.

TYPE=hidden- определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете придумать сами.

Пример:<INPUT TYPE=hidden NAME=version VALUE="1.1">

Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=reset- определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типаresetможет и не иметь атрибутаname.

Пример:<INPUT TYPE=reset VALUE="Очистить поля формы">

Определяет кнопку Очистить поля формы, при нажатии на которую форма возвращается в исходное состояние.

Помимо элементов <INPUT>,формы могут содержать меню<SELECT>и поля для ввода текста<TEXTAREA>.

Меню <SELECT>изnэлементов выглядит примерно так:

<OPTION VALUE="[значение 1]">[текст 1]

<OPTION VALUE="[значение 2]">[текст 2]

...

<OPTION VALUE="[значение n]">[текст n]

</SELECT>

Как Вы видите, меню начинается с тэга <SELECT>и заканчивается меткой</SELECT>. Тэг<SELECT>содержит обязательный атрибутNAME, определяющий имя переменной, которую генерирует меню.

Тэг <SELECT>может также содержать атрибутMULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню<SELECT MULTIPLE>в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутомSIZE=[число]). Меню<SELECT>в большинстве случаев показывается в виде выпадающего меню.

Тэг <OPTION>определяет элемент меню. Обязательный атрибут VALUEустанавливаетзначение, которое будет передано обработчику, если выбран этот элемент меню. Тэг<OPTION>может включать атрибутchecked, показывающий, что данный элемент отмечен по умолчанию.

Разберем небольшой пример.

<OPTION VALUE="option1" checked>Вариант 1

<OPTION VALUE="option2">Вариант 2

<OPTION VALUE="option3">Вариант 3

</SELECT>

Такой фрагмент определяет меню из трех элементов: Вариант 1,Вариант 2иВариант 3. По умолчанию выбран элементВариант 1. Обработчику будет передана переменнаяselectionзначение которой может бытьoption1(по умолчанию),option2илиoption3.

После всего, что мы уже узнали, элемент <TEXTAREA>может показаться совсем простым.

Например:<TEXTAREA NAME=address ROWS=5 COLS=50>

А здесь - Ваш адрес...

</TEXTAREA>

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере —address). Атрибут ROWSустанавливает высоту окна в строках (в примере — 5). Атрибут COLSустанавливает ширину окна в символах (в примере — 50).

Текст, размещенный между тэгами <TEXTAREA>и</TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

Важно знать, что русские буквы в окне <TEXTAREA>при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.

Для примера http://206.31.82.215/hp/nc/fd-win.pht – адрес программы, где используются данные формы.

Исходные данные в эту программу передаст форма, описанная в примере

< HTML>

<HEAD>

<TITLE>Пример 15</TITLE>

</HEAD>

<H1>Несколько более сложная форма </H1>

<H2>Расскажите немного о себе...</H2>

<P>Указывать подлинные данные совсем не обязательно.

Для целей демонстрации вполне подойдут и вымышленные. </P>

Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>

Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской

<INPUT TYPE=radio NAME=gender VALUE="female">женский<BR>

Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>

</FORM>

</BODY>

</HTML>

Этот фрагмент на экране будет выглядеть так:

Несколько более сложная форма

Начало формы

Расскажите немного о себе...

Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне подойдут и вымышленные.

Имя: Фамилия: Пол: мужской женский Возраст: лет

Тег <iframe>

Что такое <iframe>< /iframe>? Это HTML тег, который создаёт, так называемый «плавающий фрейм». Другими словами, тег создаёт контейнер, расположенный в произвольном месте страницы, для загрузки законченного HTML-документа (например содержимое страницы стороннего сайта).

Пример:

XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IFRAME</title> </head> <body> <iframe src="banner.html" height="60" align="left"> Ваш браузер не поддерживает плавающие фреймы! </iframe> </body> </html>

Атрибуты:

align: Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.

frameborder: Устанавливает, отображать границу вокруг фрейма или нет.

height: Высота фрейма.

hspace: Горизонтальный отступ от фрейма до окружающего контента.

marginheight: Отступ сверху и снизу от содержания до границы фрейма.

marginwidth: Отступ слева и справа от содержания до границы фрейма.

name: Имя фрейма.

scrolling: Способ отображения полосы прокрутки во фрейме.

src: Путь к файлу, содержимое которого будет загружаться во фрейм.

vspace: Вертикальный отступ от фрейма до окружающего контента.

width : Ширина фрейма.

CSS.

Уровни CSS

Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными.

С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).

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

Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.

Способы определения таблиц стилей

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

Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:

ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <link> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например:

Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS.

Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела head HTML-документа;

внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например:

<! —

BODY { font-family: Arial, Helvetica; }

INPUT { background-color: ICECECE; }

— >

</STYLE>

Данная конструкция также должна присутствовать в разделе head. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS);

включение в теговые конструкции. Любой отдельный HTML-элемент может быть подвергнут форматированию средствами CSS. Для этого необходимо задать определенное правило реализации того или иного тега, например:

<Р ALIGN="justify" STYLE="color: 1000000; font-family: Verdana;"> Текст параграфа...

В этом случае задано отдельное правило для конкретного параграфа. Также можно присваивать отдельному HTML-элементу определенный класс стилевого шаблона:

<TABLE>

<TR>

</TR>

</TABLE>

Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ):

<! —

.header { font-weight: bold; color: gray; }

.text { color: black; font-size: llpx; }

-->

</STYLE>

В данном случае текст табличной ячейки класса .header будет отображаться жирным начертанием и серым цветом, а ячейки класса . text -обычным начертанием, черным цветом и размером шрифта 11 пикселов;

импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:

<! —

@import: url(style.ess);

-->

</STYLE>

Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1). Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTML-элементов — отдельные конструкции либо в теге <style>, либо в кодовых конструкциях самих тегов.

Дата добавления: 2018-05-09; просмотров: 310; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 3 4 5 Следующая ⇒

Мы поможем в написании ваших работ!