Создание сайта студии для повышения конкурентоспособности предоставления услуг

Для создания HTML – страниц можно пользоваться любым текстовым редактором, но существуют и специализированные программы. Эти HTML-редакторы делятся на два типа: визуальные и невизуальные. Визуальные HTML-редакторы обладают интуитивно понятным интерфейсом и не требуют много времени на освоение, но генерируют очень длинный, неоптимальный и малопонятный HTML-код, который потом трудно редактировать. К редакторам этого типа относится, например Microsoft FrontPage Express.

Невизуальные редакторы требуют знания HTML, но лишены недостатков визуальных редакторов. Кроме того, это небольшие, компактные программы, бесплатные или условно-бесплатные. К HTML-редакторам этого типа относятся, например MacroHTML и HomeSite.

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

 

1.3. Изучаем устройство Web – страницы

 

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

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

Таким образом, простота и удобство навигации является одним из важных факторов, определяющих посещаемость Web-сайта. Пользователи должны быстро и легко перейти на любую страницу Web-сайта, в том числе на начальную. Рассмотрим, например, сайт маркетолога из Сан Франциско,Калифорния США, Мишель Киллебрев:

Рис.1.1. Главная страница сайта Мишель Киллебрев

Цифровой маркетинг Маркетинг качества Стратегический маркетинг Лидерство

Мысли думающего маркетолога

Блог      События     Обо мне    Контакты

Почему на Покупки больше не оказывается Социальное влияние? 
Опубликовано ClickZ 5 декабря 2013

Шоппинг является социальной активностью. Как маркетологи, мы знаем, что это инстинктивно. Такова человеческая природа. Но измерения реального воздействия социального влияния на продажи это совсем другая история. Значение социального влияния продолжает расти как форма цифровой связи. Но то, что последние цифры от отчета Benchmark праздника IBM 2013 говорят о благодарения и Черная пятница розничных продаж ? 
Изображение с сайта: socialnewsdaily.com

Изображение с сайта: socialnewsdaily.com

Чтобы проще было понять, как «устроена» Web-страница, загрузим документ из WWW и рассмотрим его строение.

Мы загрузили в качестве примера главную страницу сайта www. michellekillebrew.com.

• Установили связь с нашим провайдером Интернет – Good Line;
• Загрузили первую страницу сайта www. michellekillebrew.com. ;

Когда мы загружаем из WWW любой документ, то его текст в окне нашего браузера отображается в хорошо отформатированном, удобном для просмотра виде. Это значит, что Web-страницы представляют собой не простой текст, а содержат также некоторую вспомогательную информацию для управления представлением документа в окне вашего браузера. Поскольку при создании документа не известно, на компьютере какого типа пользователь будет его просматривать, то Web-страницы не могут готовиться и храниться в формате, разработанном для конкретной компьютерной платформы, например, в формате Microsoft Word для Windows XP. Для того, чтобы пользователь, работающий на компьютере любого типа, видел документ, отформатированный надлежащим образом, используется специально разработанный для этого язык HTML.

Что представляет собой код HTML было рассмотрено выше.

Мы работаем с браузером Internet Explorer, поэтому выбираем  команду меню Вид • Просмотр HTML-кода (View • Source). На экране появляется окно с исходным кодом этой страницы на языке HTML (Рис. 1.2).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рис.1.2. Исходный код главной страницы на языке HTML

HTML - HyperText Markup Language (код разметки гипертекста) представляет собой простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на нашем экране.

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

HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собой простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заголовки, абзацы,таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на нашем экране[14].

Язык HTML существует в нескольких вариантах, или спецификациях. Как и версии программных продуктов, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая спецификация представляет собой расширение и дополнение предыдущей. В дипломной работе мы будем использовать конструкции последней спецификации HTML 4.0, которые поддерживаются последними версиями большинства распространенных браузеров.

Как видим, на Рис.1.2. документ в окне с кодом HTML – это  текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например, <html>, <head>, <title>, </title>. Такие элементы разметки называются тегами. Теги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:

• левой угловой скобки <;

• необязательного символа слэш /, который означает, что тег является конечным тегом, закрывающим некоторую структуру, например, </title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например,строки или абзаца;

• имени тега, например, html;

• необязательных атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align="center";

• правой угловой скобки >.

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

Тег <script language=Mvbscript"> означает начало кода встроенной в документ программы-сценария. Этот тег содержит, кроме имени script, атрибут language со значением "vbscript", означающий, что сценарий написан на языке vbscript.

В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов – любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например, nama= «Раздел 1».

Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head>эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре[14].

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

<SCRIPT src="http://www.google-analytics.com/ga.js" type="text/javascript" async=""></SCRIPT>

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

Большинство тегов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Однако атрибутов может и не быть вовсе. Атрибут тега состоит из имени, например, <SCRIPT src="http://www.google-analytics.com/ga.js" type="text/javascript" async=""></SCRIPT> знака равенства = и значения, которое задается строкой символов, например="text/javascript" async=""></SCRIPT>. Значения атрибутов обычно заключаются в кавычки.

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

<html>

<head>

• • • • *

</head>

<body>

</body>

</html>

Структура HTML-документа содержит следующие обязательные элементы:

• теги <html> и </html>, которые отмечают начало и конец документа;

- заголовок, ограниченный тегами <head> и </head>;

- тело, ограниченное тегами <SCRIPT src... </SCRIPT>.

В заголовке, ограниченном тегами <SCRIPT src...и </SCRIPT>, с помощью тегов < SCRIPT> . . . < / SCRIPT > определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.

Кроме элемента < SCRIPT > . . .</ SCRIPT >, заголовок может содержать элементы <meta>... <META http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">, для указания информации о документе. Открывающий тег <meta> включает пары имя=значение, описывающие свойства документа, например, тип документа, его кодировку, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

Файл HTML может содержать комментарии, дающие пояснения человеку, читающему HTML-код. Комментарии начинаются с четырехсимвольной последовательности <!DOCTYPE HTML> — и завершаются трехсимвольной последовательностью —>, например: <!—Главная страница -->. Комментарии игнорируются браузером и не влияют на представление документа на экране. Комментарии используются в редких случаях, когда это необходимо, например, для объяснения кода HTML. Мы помним, что они являются частью файла и передаются по сети вместе с документом. Большое количество комментариев может значительно увеличить размер файла и, соответственно, время его загрузки, что нежелательно[14].

Изучая язык HTML, мы  просматриваем и анализируем HTML-код Web-страниц, созданных опытными мастерами. Это помогает быстрее освоить и понять принципы и структуру языка.

> Закроем окно с кодом HTML, нажав кнопку [х] в правом верхнем его углу.

>• Закроем также программу-браузер.

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

 

1.4. Создаем первую Web-страницу

 

Для создания Web-документов нам понадобится любой браузер - Internet Explorer и Opera так как многие элементы HTML по-разному отображаются в разных программах просмотра, и весьма желательно контролировать эту разницу. Браузер Internet Explorer входит в состав операционной системы Windows, а последнюю бесплатную версию броузера Opera мы найдем в Интернете с сайта www.opera.com.

Кроме броузера нам нужен будет текстовой редактор Блокнот (Notepad) из Windows. Программа Блокнот (Notepad) нужна для подготовки HTML-файлов, а браузер - для просмотра и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем локальном компьютере, после чего поместим его на один из WWW-серверов в Интернете, сделав, таким образом, наши Web-страницы доступными всему миру.

В качестве примера подготовим Web-страницы фирмы Студия «Инфинити», студия красоты и здоровья, которая является первым йога  - центром в г.Кемерово. Цель сайта – рассказать миру о компании, сфере ее деятельности, найти партнеров и заказчиков.

Для файлов нашего сайта нужна отдельная папка.

> Создаем папку с именем Web на любом жестком диске С нашего компьютера.

Теперь запустим программу Блокнот (Notepad) и приступим к работе.

>• Откройте программу  Блокнот (Notepad), нажав кнопку Пуск (Start) на Панели задач

(Taskbar) и выбрав из появившегося меню команду Программы • Стандартные • Блокнот (Programs • Accessories • Notepad).

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

Сначала введем в окне программы Блокнот (Notepad) теги, определяющие структуру любого HTML-документа. Учитываем то, что в HTML-коде допускается использовать любой регистр символов - верхний или нижний.

> Вводим с клавиатуры следующие основные теги, поместив каждый из них, кроме закрывающего тега </title>, в новой строке.

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

 

 

 

 

 

 

 

 

 

 

 

 

 

Рис.2.1. Первая страница Web – сайта в коде NTML

 

 

 

Рис.2.4 NTML документ

Как видим, в заголовке окна браузера указывается название документа, которое мы ввели в элементе <titlex/title> , а цвет фона и текста страницы - такие, как указаны в теге<body>. Текст отображается в одном абзаце и выровнен влево.