Глава 1.1. Гипертекстовые ссылки

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ КОМИ

Государственное профессиональное образовательное учреждение

«Воркутинский политехнический техникум»

КУРСОВАЯ РАБОТА (ПРОЕКТ)

По дисциплине:МДК 02.01 Программное обеспечение компьютерных сетей

Тема Создание информационного сайта Республики Коми

Автор: студент гр.413                   ______________/Ризванов Магамад Кавказович

                                                                                 (подпись)                           (Ф.И.О.)

ОЦЕНКА:______________

Дата:___________­­­­________

ПРОВЕРИЛ

Руководитель______________/Хромцова Анастасия Игоревна/

(подпись)                                              (Ф.И.О.)

Содержание

Введение……………………………………………………………………………………….3-4

Глава 1. Теоретическая часть......……………………………………………………………..5-6

Глава 1.1 Гипертекстовые ссылки……..……………………………………………………..6-7

Глава 1.2 Различие……………………………………………………………………………..7-9

Глава 1.3 Теги…...……………………………………………………………………………9-10

Глава 2. Практическая часть. Главная страница……….…………………………………10-12

Глава 2.1 Практическая часть. Женская одежда………………………………………….12-13

Глава 2.2 Практическая часть. Мужская одежда…………...………………………….….13-14

Глава 2.3 Практическая часть. Детская одежда…………………………………………...14-15

Глава 2.4 Практическая часть. Карта сайта…………………………………………………...16

Заключение……………………………………………………………………………...………17

Список используемых источников…………………………………………………………….18

Приложение 1……………………………………….………………………………………19-22

Приложение 2………………………………………………………………………….………..23

Введение

Цель данного проекта: Создать сайт интернет – магазина одежды с помощью 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 – своеобразная противоположность сложным языкам программирования, известным только специалистам.

Глава 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. Гипертекстовые ссылки

Глава 1.2. Различие

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

Для генерирования динамического документа HTML требуется специально написанная программа по правилам, определяемым web-сервером. При планировании размещения информации на web-сервере, для правильного определения использования, какого либо вида документов, необходимо учитывать степень обновляемости данных, их объем и частоту обращения.

Динамический способ определяет хранение данных в формализованном виде, например в базе данных.

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

Знание HTML необходимо по пяти причинам. Во-первых, Web-мастер анализирует сайты фирм-конкурентов и просто удачные экземпляры WWW-серверов. Такой анализ, необходимый для совершенствования своего сайта, невозможен без знания языка разметки гипертекста. Во-вторых, совершенствование своего Web-сервера без полной его переделки (что долго и дорого) удобно производить путем ручной вставки и удаления объектов и тегов. В-третьих, HTML непрерывно развивается, поэтому программы типа MS FrontPage все время отстают от новейших возможностей языка. В-четвертых, не следует забывать о достаточно высокой стоимости таких программ. Наконец, в-пятых, потратив деньги на приобретение программы, нужно еще потратить время на ее освоение.

Любой документ HTML начинается с открывающего тега и заканчивается соответствующим ему закрывающим тегом. Закрывающий тег отличается от открывающего наличием косой черты перед названием тега. В языке HTML нет различий между большими и малыми буквами при записи тегов, однако принято записывать открывающий тег большими буквами, а закрывающий - малыми. Часть документа, которая находится в пределах от открывающего до соответствующего ему закрывающего тега, называется контейнером. Теги, у которых есть закрывающий и открывающий варианты записи называются парными, а те, которые используются только в одном виде (например, тег), называются непарными. Весь файл web-страницы - это по сути дела один большой контейнер HTML (так как начинается и заканчивается ).

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

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

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

Глава 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>.Гиперссылка отвечает за переходы на другие страницы.