Основы Интернет
Интернет как глобальная информационная система, особенности развития в России и Украине. Комплексное применение сервисов передачи информации. Анализ принципов электронной коммерции. Способы создания таблиц. Динамические стили как одно из оснований DHTML.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лекция |
| Язык | русский |
| Дата добавления | 19.12.2012 |
| Размер файла | 264,6 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Так как же установить нестандартный стиль объекта? Прежде всего через свойство STYLE.
<H2 STYLE="color: green; cursor: hand">Наведи на меня мышь</H2>
Эта строка будет выводить на экран объект <H2> зеленого цвета, причем курсор, при наведении на него будет изменять свой вид на "руку", которая обычно сигнализирует то, что этот объект можно "щелкнуть".
Здесь, объекту были установлены два свойства, подобным образом можно менять все свойства, которые поддерживает объект. Например:
<H2 STYLE="font-size: '20px'; font-weight: bold; cursor: size; background-color: lightgrey"> Это пример использования стилей </H2>
7.4 Классы
Стили можно устанавливать не только таким образом. Очень удобно использовать для установления стилей объектов классы. Под классом здесь подразумевается набор неких свойств и их значений, объединенный в один класс. Классу присваивается имя, а затем весь этот набор свойств можно установить для какого-либо конкретного объекта. Это очень удобно, если, например, у вас имеется несколько ссылок и для каждой из них надо установить красный цвет текста и нежно-голубой цвет фона, а также жирный шрифт, то не надо мучать себя и набивать каждый раз эти установки в свойстве Style каждого объекта, сделайте следующим образом:
<HTML> <HEAD> <STYLE> .myStyle {color: red; background-color: lightblue; font-weight: bold}
</STYLE> </HEAD> <BODY> <!-- ... Какой-то код >
<A HREF="gotonowhere.htm" CLASS=myStyle>Ссылка с применением класса</A>
<!-- ... Еще какой-то код>
</BODY>
</HTML>
Здесь приведен пример использования класса, он же набор свойств. Класс определяется в блоке <HEAD> с помощью блока <STYLE> Таких классов может быть определено великое множество и у них могут быть любые дозволительные имена.
7.5 Изменения стиля через Script-язык
Это еще не все способы изменения стиля. В самом начале этой главы, мы учились динамически изменять стили. Давайте рассмотрим еще один способ изменения, теперь, через объект <SCRIPT>. Если вы не особо разберетесь, о чем пойдет дальше речь, воспользуйтесь этой ссылкой.
Итак, чтобы изменять стили объекта, над которым совершится действие, напишем функцию. Написание функций также полезно, когда над множеством объектов надо производить одинаковые действия. Начнем как всегда с простого, например, со списков. Посмотрите на следующий код:
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JScript">
function changeStyle(object) {
if (object.style.color=='black')
object.style.color='orange';
else
object.style.color='black';
}
</SCRIPT>
<LI>Элемент 1
<LI style="cursor: hand"; onclick="changeStyle(this);">Элемент 2
</BODY>
</HTML>
Использование Script-языков дает очень гибкие возможности применения динамических стилей. В этом примере при щелчке мышью на второй элемент списка, он изменяет свой стиль с помощью функции changeStyle, которой в качестве аргумента передается объект, над которым было произведено действие.
Комбинирование использования функций и классов, а также различных событий c вашей фантазией дает поистине потрясающие результаты.
7.6 Динамика в самом IE 4.0
Internet Explorer 4.0 обладает гибким свойствами прорисовки экрана и отображения на нем представляемой информации. Например, если вы изменили размер шрифта строчки и она теперь не помещается в отведенное ей место, остальные строки раздвинутся, чтобы не произошло их наложение одно на другую. Проиллюстрировать эту особенность очень хорошо может свойство display часто применяемой в создании динамических оглавлений. Вот пример:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JScript">
function changeDisplay(object) {
if (object.style.display=='none')
object.style.display='';
else
object.style.display='none';
}
</SCRIPT>
<P> Если вы наведете курсор </P>
<P onclick="changeDisplay(document.all.disappearingString);" tyle="cursor: hand; color: blue">
на эту строку и 'кликните' ее, </P>
<P id=disappearingString>то эта строка исчезнет</P>
<P> А эта займет ее место<p>
</BODY>
</HTML>
Здесь комментарии излишни. Наблюдайте, как реагирует IE на изменение стилей содержимого окна.
8. Создание оригинальных стилей
Internet Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять различные атрибуты напрямую. Даже если одинаковых по значению объектов и много, вы уже умеете применять классы. Но существует еще одна возможность. Для задания всего стиля документа целиком применяются так называемые Иерархические Стилевые Таблицы (Cascade Style Sheets - CSS), которые представляют собой набор установок свойств различных объектов. Чем-то они напоминают классы, но если класс сохдается внутри документа и может быть применен, а может быть и нет, то CSS, если он подключен, то установки в нем влияют непосредственно на все объекты в документе.
8.1 Введение в CSS
CSS очень похожи на классы, только с той разницей, что в них описывается стиль для уже известного объекта. Для наглядного примера, осмотрите сейчас свой комнату (офис, зал...) в которой вы находитесь. Наверняка, вы увидите множество различных предметов (стол, кресло, окно, компьютер). У каждого из этих предметов-объектов есть характеристики, и вам надо составить список этих предметов и их характеристик. Может быть у вас получится нечто следующее:
стол:
цвет - коричневый
материал - деревянный
компьютер:
цвет - белый
материал - пластмасса
назначение - для работы
Конечно, можное пойти другим путем, но только CSS составляются именно так, где вместо предметов выступают объекты, да и их характеристики немножко другие. Для примера, вот вам отрывок такого документа:
body
{
background-color: rgb(255,255,153);
color: rgb(51,51,153);
}
h1
{
color: rgb(255,0,0);
font-family: arial, helvetica;
}
Здесь задается каким будет стиль элемента BODY и H1. Те параметры, которые не заданы, остаются по умолчанию.
Создание CSS не требует особых усилий и может быть выполнено в простом блокноте, хотя для этих целей и существуют специальные программы, облегчающие работу и наглядно показывающие, каким будет выглядит будущий документ с применением этого стиля.
8.2 Стилевая таблица в документе
Существует два способа подключения CSS. Первый - задать ее в элементе STYLE в начале документа, как класс. Это делается так:
<HTML>
<HEAD>
<STYLE>
H1 {color: red}
H2 {color: red; font-style: italic}
</STYLE>
</HEAD>
<BODY>
<H1> Этот документ</H1>
<H2>использует стилевые таблицы</H2>
</BODY>
</HTML>
В данном примере, на экране вы увидите две строки, состоящие из двух объектов: H1 и H2. Посмотрите, во что превратился стиль по умолчанию Internet Explorer. А ведь мы не делали никаких указаний в самом объекте насчет его стиля. Таким образом, сколько бы вы ни наделали объектов H1 и H2, их стиль всегда будет таким, каким вы его указали в стилевой таблице.
8.3 Стилевая таблица в отдельном файле
Если вам нравится стиль, который вы создали и вы хотите использовать его во всех своих документах. Или ваш документ состоит из множества HTML страниц и у всех них должен быть одинаковый стиль, вам необязательно каждый раз вколачивать строки стилевой таблицы в начале документа.
Второй способ подключения CSS к Web-странице - это создание CSS в отдельном файле, а в самой странице делается ссылка на этот файл. Тогда, вы можете написать в странице только одну строчку и все равно стиль ее будет таким, каким он определен в стилевой таблице во внешнем файле. Думаю не надо долго говорить о преимуществах такого способа.
Итак, сперва вы создаете таблицу, следуя указанным выше правилам. Затем, вы добавляете в элемент <HEAD> для включения таблицы стилей строку подобную следующей:
<LINK REL="stylesheet" TYPE="text/css" HREF="MyStyle.css">
LINK означает, что к текущей странице подключается элемент, REL и TYPE описывают элемент, как стилевую таблицу, ну а HREF содержит адрес, по которому находится файл с вашей CSS.
8.4 Динамическое изменение CSS
Вы можете динамически изменять имя подключаемого файла со стилевой таблицей, соответственно изменяя сам стиль. Вот функция, на языке JScript, которая при ее вызове, если уже применен какой-либо стиль, убирает его и подключает новый.
function change_style() {
if (document.styleSheets.href != null)
document.styleSheets.href = "newStyle.css";
}
Если стилевая таблица определена внутри HTML-страницы, вы можете добавлять новые определения с помощью функции addRule (object, style). Где object - объект, а style, соответственно, стилевые установки. Вот пример, в котором после щелчка на кнопку, происходит изменение стилевой таблицы:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function newRule() {
document.styleSheets.MyStyles.addRule("P","color:blue");
}
</SCRIPT>
<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY>
<H1>Это Заголовок 1</H1>
<H2>Это Заголовок 2</H2>
<P>Это абзац. Щелкни на кнопку для изменения его стиля</P>
<BUTTON onclick="newRule()">Нажми меня</BUTTON>
</BODY>
</HTML>
Просмотрев страничку с таким кодом, вы увидите, как происходит изменение стиля, путем добавления установки в таблицу стилей.
9. Языковые стандарты
Все символьные обозначения букв, цифр, специальных знаков и иероглифов на самом деле представляют собой битовые комбинации - различные сочетания битов. Так, например, из 8 битов, в различных комбинациях, теоретически может получиться 256 последовательностей, в свою очередь каждой из этих последовательностей присвоен символ, другими словами из 8 битов может получиться 256 символов. Каждому такому символу присваивается свой код и из них составляется таблица - кодировка символов. Соответственно таких таблиц может быть как минимум по одной на каждый из земных языков. На самом деле их гораздо больше, чем это нужно, все они были созданы в разное время, для различных платформ, и кодируются они не только при помощи 8 битов, но и 16 и даже 32.
Самым популярным из стандартов кодирования символов, в настоящий момент является стандарт ISO 646, созданный международной организацией стандартизации ISO, а точнее его первые 128 символов, которые кодировались при помощи 8 битов, но при этом первый бит всегда равнялся нулю. Ему было присвоено имя ASCII и иногда его еще называют 7-битовым стандартом. Он используется большинством компьютерных машин для написания символов латинского алфавита, а также для синтаксиса всех языков программирования и разметки, а также для всех типов данных.
Для поддержки языков, использующих в своем алфавите символы отличные от латинских, был использован восьмой бит байта, а это дало возможность добавить еще 128 дополнительных символов. Была создана серия кодировок ISO 8859, в которых первая часть - это 128 символов ASCII. Самая первая из них, ISO 8859-1, еще ее называют ISO Latin-1 или 8-битовой ASCII, содержит в себе практически все европейские нестандартные символы, а кодировка ISO 8859-5 является русской.
В свою очередь, организация Unicode Consortium создала на основе 16-битового кодирования одноименную кодировку, в которую решено было вместить 65536 символов, каждый весом в два байта. Первые 256 символов Unicode в точности соответствуют ISO 8859-1, а саму кодировку компьютерное сообщество признало и использует все чаще, и если основной кодировкой в HTML раньше считалась ISO 8859-1, то с появлением HTML 4.0, основной кодировкой стала Unicode.
Не желая останавливаться на достигнутом, ISO разработала новый, 32-битовый стандарт кодирования ISO 10646. Он совместим с Unicode, а также имеет несколько своих производных фоматов, одна из которых - формат UTF-8 внедрен в Windows.
9.1 Особенности работы с кодировками
Для нормального отображения символов той или иной кодировки, и сервер, и браузер должны обменяться соответствующей служебной информацией. Для этого протокол HTTP, при помощи поля Accept-Charset, позволяет браузеру послать сообщение на сервер о том, какие кодировки в нем доступны и в каком порядке очередности. При этом сервер может выбрать из вариантов документ, исполненный в требуемой кодировке, сообщить браузеру информацию о том, в какой кодировке будет прислана страница, или автоматически перекодировать ее и переслать браузеру. Если такая возможность не реализована на сервере, то присланный документ можно просмотреть в различных кодировках, выбрав их в настройках браузера вручную.
Еще одним способ сообщить браузеру о стандарте кодирования может сводиться к следующему - автор документа создает служебную информацию для браузера в тэге <МЕТА>, между тэгами <HEAD> и </HEAD>, запись эквивалентную заголовку HTTP, например:
<META HTTP-EQUIV="Content-Type" content="text/html; charset= windows-1251">
Встретив такую инструкцию, браузер автоматически переключается на нужную кодировку.
9.2 Русские кодировки
Кодировок, русифицирующих сеть, существует гораздо больше, чем хотелось бы, их как минимум пять: KOI-8 (созданная для UNIX), 866 (для MS DOS), Windows-1251, ISO 8859-5, MAC. Ввиду распространения такого количества русских кодировок, в русской части сети очень распространен способ, когда сервер имеет систему автоматического перекодирования документа на лету, в зависимости от того, какой ответ пришел о браузера.
В итоге, часто происходит например, следующее: документ написан в KOI-8 и имеет об этом запись в тэге <МЕТА>, сервер определяет кодировку браузера Windows-1251 и автоматически перекодирует документ в нее, браузер же получив инструкцию прописанную в тэге <МЕТА> переключается в свою очередь на KOI-8 и пользователь не может прочесть текст. Выход может быть в том, чтобы вовсе не указывать charset в тэге <МЕТА>, в документах, которые будут лежать на таком сервере, либо пользователь сохраняет документ на диске и удаляет эту инструкцию из <МЕТА> вручную.
9.3 Создание многоязыковых документов
Иногда web-мастер сталкивается с необходимостью разместить в одном документе текст на двух и более языках. Как правило, это небольшие фрагменты текста, чаще реклама или ссылки, поэтому очень часто их выполняют в виде рисунков экономичного формата .gif Но бывают также случаи, когда на сайте действительно необходимо разместить именно текст. В таком случае можно воспользоваться мнемоническими ссылками на символы Unicode, это значит, что автор использует для создания документа обычную кодировку, а вместо недостающих символов другого языка вставляет их код в таблице Unicode.
Например, если в документ Windows-1251 вставить знак ö, или ö, то получим символ o, применяемый в немецком языке. Этим и объясняется сильное увеличение объема документа в три-четыре раза, когда для его создания используется WYSIWYG-редактор, так как он заменяет каждую букву русского текста такой ссылкой.
По-русски: Я хочу сделать покупку
Deutsch: Ich mochte einkaufen
Englich: I want to buy someting
UTF-8, при этом кодировку документу выбрать, скажем HTML, а после сохранить его как файл MS Word.
Использованные источники
1. www.citforum.ru
2. www.e-commerce.com.ua
3. www.mags.ru
4. www.internet-history.org.ru
Размещено на Allbest.ru
Подобные документы
Теоретические основы появления электронной коммерции. Понятие "электронный бизнес". Особенности и правила заработка в Интернете. Анализ направлений и эффективности электронной коммерции в Интернете. Характеристика создания и работы Интернет-магазинов.
курсовая работа [89,7 K], добавлен 14.08.2010Формирование "электронной коммерции" как понятия, ее отличия от традиционной коммерческой деятельности. Базовые элементы электронной коммерции, порядок проведения платежей в интернете. Безопасность электронной коммерции, назначение номера карты.
контрольная работа [777,4 K], добавлен 31.08.2010Осуществление коммерческой и финансовой деятельности в сети Интернет. Взаимодействие на рынке электронной коммерции. Составляющие электронного бизнеса. Продвижение интернет-технологий на российский фондовый рынок. Особенности Интернет-трейдинга.
курсовая работа [6,6 M], добавлен 12.02.2016Создание информационной сети Интернет и электронной почты. Процесс и протокол передачи гипертекста. Программа просмотра интернет-страниц. Использование новейшей технологии DSL. Скорость передачи данных. Беспроводные сети с использованием радиоканалов.
реферат [22,0 K], добавлен 22.04.2011Генезис электронной коммерции, ее основные предпосылки и тенденции развития. Систематизация теории и методологии создания интернет-магазина, изучение успешного зарубежного и отечественного опыта в данной области. Разработка проекта интернет-магазина.
дипломная работа [7,0 M], добавлен 29.06.2012Интернет и его возможности. Распространенный и недорогой способ подключения к интернет. Схема передачи информации по протоколу TCP/IP. Характеристики адресов разного класса. Поисковые системы, способы поиска и скачивания информации в глобальной сети.
курсовая работа [245,6 K], добавлен 25.09.2013Интернет-портал как средство доступа к электронным ресурсам. Системное многоуровневое объединение различных ресурсов и сервисов. Интернет-порталы в сфере государственного управления, образования и культуры. Электронные библиотеки интернет-порталов.
презентация [34,2 M], добавлен 14.10.2013Интернет - глобальная информационная сеть, его устройство, основные службы, история возникновения. Доступ к информации. Сервер, провайдер, маршрутизаторы. Понятие о протоколах Интернета. Язык форматирования HTML. Программы браузеры. Протоколы URL-адресов.
реферат [58,4 K], добавлен 23.10.2011Интернет - глобальная телекоммуникационная сеть информационных и вычислительных ресурсов, служит физической основой для Всемирной паутины. История возникновения и развития сети интернет, основные услуги. Что такое web-браузеры, их характеристика.
дипломная работа [8,0 M], добавлен 19.08.2011Понятие и сущность традиционной и электронной коммерции, правовые вопросы. Условия совершения платежей через Интернет и этапы их проведения. Инфраструктура безопасности и технологические методы снижения рисков транзакций в системах электронной коммерции.
курсовая работа [3,1 M], добавлен 10.11.2011
