Глава 1.1. Язык разметки гипертекстовых страниц HTML

Введение

Цель данного проекта: Создать сайт интернет – магазина одежды с помощью HTML языка.

Задача:

1) Изучить язык HTML

2) Изучить среды работы с языком HTML

3) Разработать макет (структуру) сайта

4) Создать сайт

Моя цель состоит в том, чтобы научиться создавать собственные страницы для WWW. Для этого придётся познакомиться с правилами, в соответствии с которыми страницы хранятся на диске компьютера. Любая страница представлена в виде отдельного текстового файла, который можно создать любым текстовым редактором. Так как страница может содержать не только текст, но и множество других элементов (шрифтовое оформление текста, иллюстрации и т. п.), то в текст встраиваются специальные управляющие конструкции, называемые тегами. Весь набор правил, по которым нужно создавать файл с web-страницей и записывать отдельные теги, называется языком разметки гипертекста (HyperText Markup Language - HTML). Браузеры при открытии файла в формате HTML способны расшифровать теги и показать страницу в своём окне так, как она была задумана. В операционной системе Windows файлы web страниц должны иметь расширения " htm" или " html". При обучении правилам HTML нет необходимости помещать наши страницы на действующий сайт в Internet, достаточно хранить их в виде файлов на конкретной рабочей станции или на сервере локальной сети.

Термин HTML (Hyper Text Markup Language) означает " язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные программные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области. HTML давно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров.

Глава 1. Общая часть

Html-документ - это текст, состоящий из HTML-кодов и основного текста документа. Для форматирования текста, задания структуры документа, встраивания ссылок и мулитимедиа - объектов в HTML-документах используются специальные кодовые слова, которые называются дескрипторами разметки (тегами).

Язык HTML (HyperText Markup Language, язык разметки гипертекста) относится к числу так называемых языков разметки текста (markup languages). Под термином " разметка" понимается общая служебная информация, которая не выводится вместе с документом, но определяет; как должны выглядеть те или иные фрагменты документа. Например, вы можете потребовать, чтобы какое-либо слово выводилось жирным или курсивным шрифтом, вывести отдельный абзац особым шрифтом или оформлять заголовки увеличенным шрифтом.

Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним так как между его стартовым и конечным тегами должна находиться вся Web-страница.

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

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

Форматировать текст можно и с помощью традиционных элементов: выделять фрагменты курсивом, полужирным, выбирать шрифт и т.д. Рассмотрим эти элементы. Для них могут быть использованы стандартные атрибуты id. class, lang, dir. title, style, атрибуты событий, а также атрибуты, определяющие уникальные свойства определенных элементов.

Глава 1.1. Язык разметки гипертекстовых страниц HTML

Язык разметки гипертекстовых страниц (HTML – Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.

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

Информации о тегах HTML Compendium (краткое руководство по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров. Компендиум HTML находится на сайте

Глава 1.3. Тэги

Основные тэги по созданию страницы:

< html>

< head>

< body>

Информация на сайте

< /body>

< /head>

< /html>

(Смотрите: Приложение 1. Рис.1 - Рис.2)

Заголовок страницы. Заголовок Web-страницы представляет собой информацию. < TITLE > это элемент TITLE определяет текст, который появляется в заголовке окна браузера во время просмотра страницы. Этот текст не только служит подсказкой, но может использоваться и поисковыми машинами для анализа страниц. Существует три способа для поиска страниц в Интернете па основе текстовых данных: по ключевым словам элемента МЕТА, по тексту, разметенном) на странице и по строке заголовка внутри элемента TITLE.

Графика делает сайт привлекательным и понятным.

Тег < IMG SRC=/путь/файл.jpg> (смотрите: Приложение 1. Рис.3) записывают в том месте, которое предназначено для размещения диаграммы, графика, рисунка или фотографии. В данном примере рисунок появится в левом верхнем углу экрана, так как он - единственный элемент тела HTML-документа.

В данном случае ко всему абзацу применено выравнивание по центру окна (атрибут ALIGN со значением CENTER). Атрибут ALIGN может также принимать значения LEFT и RIGHT. Абзац заканчивается тегом < /P> и после конца абзаца прекращается действие его атрибутов. (смотрите: Приложение 1. Рис.4-5)

Тег < FONT > определяет установки свойств шрифта. В данном случае устанавливается цвет текста в строке заголовка. Вообще говоря в тегах можно использовать несколько атрибутов, но тег < FONT> является исключением - для каждого изменения свойств текста используется отдельный тег < FONT> (Смотрите: Приложение 1. Рис.4-5)

Для описания таблиц используется тег < ТАВLЕ>. Тег < ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Создание строки таблицы - тег < ТR>. Тег < ТR> создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами < ТR> < /ТR>.

Определение ячеек таблицы - тег < ТD>. Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами < ТD> < /ТD>. Число тегов < ТD> < /ТD> в строке определяет число ячеек (открыть).

Один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон: < a href = « Адрес ссылки» > текст < /a>.Гиперссылка отвечает за переходы на другие страницы.

Глава 2.3 Детская одежда

< center> < table height=200 width=800 border=2> < tr> < td> < center> < img height=200 width=170 src=" 22.jpg" > < td> < font face=" Comic Sans MS" size=6 > < center> Зимняя парка 14884 < /center> < font face=" Comic Sans MS" size=4> < center> MY STYLE < br> Размер: XS, S, M, L, XL < /center> < br> < font face=" Comic Sans MS" size=5> < center> 1999 рублей < td> < /center> < center> < a href=" Обратная.htm" > < img height=40 width=200 src=" купить.jpg" > < /a> < /center> < /tr> < /td> < /table

(смотрите: Приложение 1. Рис 9)

Глава 2.4 Карта сайта

Для страницы «Карта сайта», я создал таблицу, в нее я поместил название каждой страницы и на название страниц я сделал гиперссылки, нажав на которою можно перейти на выбранную страницу.

< center> < table height=120 width=800 border=0> < tr> < td> < /center>

< font face=" Comic Sans MS" size=7> < a href=" главная.htm" > Главная< /a> < br>

< a href=" женскаяодежда.htm" > Женская одежда< /a> < br>

< a href=" мужскаяодежда.htm" > Мужская одежда< /a> < br>

< a href=" детскаяодежда.htm" > Детская одежда< /a> < br>

< a href=" картасайта.htm" > Карта сайта< /a> < br> < /center> < /td> < /tr> < /table>

(смотрите: Приложение 1. Рис.10)

Заключение

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

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML вероятнее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, Вы сможете создавать документы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, предоставляемый Netscape Navigator, Internet Explorer или некоторыми другими программами. Работа с HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только когда это действительно необходимо. HTML был написан вручную.

Приложение 1

Рис 1. Основные тэги по созданию страницы.

Рис 2. Основные тэги по созданию страницы.

Рис 3. Размещение диаграммы, графики, рисунка или фотографии.

Рис 4-5. Атрибут ALIGN (выравнивание)

Атрибут FONT - установка свойств шрифта

Рис 6. Главная страница

Рис 7. Женская одежда

Рис 8. Мужская одежда

Рис 9. Детская одежда

Приложение 2

Карта сайта

Рис 10. Карта сайта

Приложение 3

Техническое задание

Доменное имя	Сайт временно не введен в домен
Название сайта	Интернет-магазин NAME`S
Назначение сайта	Для покупки одежды.
Язык сайта	Html, JavaScript
Структура сайта	Главная страница, Женская одежда, Мужская одежда, Детская одежда, Карта сайта.
Карта сайта	Отображаются все страницы, которые находятся на сайте.
Основные ключевые слова, по которым можно найти сайт в поисковой системе	Женская одежда, Мужская одежда, Детская одежда, Жилет, Зимняя куртка, Свитшот, Кардиган, Кофточка, Пижама, Зимняя парка, Толстовка.
Навигация сайта	Нажимая на кнопку на сайте, перемещается в другой раздел.
Дисковое пространство для сайта	3 мб
Размер, вид шрифта и цвет текста на сайте.	Размер текста 12-20, вид шрифта“ComicSansMS”, цвет шрифта черныйю
Дополнительные модули размещенные на сайте.	JavaScript – снежинки.
Проведение рекламной компании по раскрутке сайта	Делаем аудит Предлагаем список ключевых слов Подбираем оптимальный тарифный план Обозначаем гарантии и схему работы
Порядок выбора хостинговой компании	Хостинговую компанию выбирал по советам пользователей на сайтах и форумах. STATUSHOS (http: //www.statushost.ru/bbm/aff/reg) является хорошей компании хостингов и входит в пятерку лучших хостинговых компаний. А цены начинаются с 0, 49 доллара, что по карману каждому. Во всех тарифных планах трафик неограничен, кроме того предоставлено много дополнительных бесплатных сервисов, таких как гостевая книга, форум, подробная статистика, интернет-магазин, фотогалерея и еще много других полезных приложений.
Порядок обеспечения процесса сопровождения сайта	На Сайте размещается информация, по данной теме. Информация может обновляться в течение 24 часов
Порядок сдачи-приёмки сайта	Сдача готового сайта производится преподавателю, приемка сайта производится согласно требованиям к сайту