Курсовая Создание web-страниц при помощи языка HTML
Работа добавлена на сайт bukvasha.net: 2015-10-25Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
от 25%
Подписываем
договор
Санкт-Петербургский Государственный Политехнический Университет
Факультет Экономики и Менеджмента
Кафедра: Экономика и менеджмент в электроэнергетике и природопользовании
Курсовая работа
Информационные технологии в энергетике
«Создание web
-страниц при помощи языка
HTML
».
Руководитель: Васильева Вероника Игоревна
Выполнила студентка группы 2073/2: Марьина Виктория.
г. Санкт-Петербург
2010 г.
Содержание
Введение ……………………………………………………………………3
1. Основные понятия языка HTML………………………………………..4
1.1 История появления языка HTML………………………………….4
1.2. Структура файла в формате HTML……………………………....6
1.3. Списки базовых тэгов HTML……………………………………..9
1.4. Создание таблиц в HTML………………………………………..10
1.5 Создание гипертекстовых ссылок………………………………..12
2. Описание создание сайта «Стрельба из лука»…..……………………..14
Заключение………………………………………………………………….22
Список литературы………………………………………………………....23
Введение.
Тема моей курсовой работы «Создание web-страниц при помощи языка HTML » очень актуальна в настоящее время, так как мы живем в век компьютерных технологий и Интернет занимает огромное место в жизни работающих и учащихся людей. Интернет, который не мыслим без языка HTML при помощи которого и создаются web-страницы, проникает во все самые важные части человеческой жизни и является безграничным источником информации.
Мой курсовой проект разработан на примере сайта, который я создавала и который является самим же предметом работы. Поэтому в дальнейшем все использованные материалы будут взяты из него.
Целью моей работы было научиться создавать сайт и использовать для этого необходимые алгоритмы, которые будут описаны в моей работе.
Для написания своего курсового проекта я буду использовать лекции, в которых подробно и ясно изложены основные понятия, которые понадобятся в дальнейшем изучении. Помимо этого я буду включать информацию, взятую из Интернета.
1.1 История появления языка
HTML.
HTML (от англ. Hyper Text Markup Language - «язык разметки гипертекста») - стандартный язык разметки документов во Всемирной паутине. Большинство web-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи.
С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.
Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса web-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera.
1.2 Структура файла в формате HTML
Для создания web-страницы в первую очередь нам потребуется создать файл с расширением "htm" или "html" и открыть его для редактирования в текстовом редакторе (работая в Windows, можно использовать стандартную программу "Блокнот").
Текст для HTML-документа набирается в том виде, в котором его должен показать браузер, а при выделения фрагментов, которые предназначены для разметки документа (тегов), используются угловые скобки (знаки "<" и ">").
Любой документ HTML начинается с открывающего тега и заканчивается соответствующим ему закрывающим тегом. Закрывающий тег отличается от открывающего наличием косой черты перед названием тега. В языке HTML нет различий между большими и малыми буквами при записи тегов, однако принято записывать открывающий тег большими буквами, а закрывающий - малыми. Часть документа, которая находится в пределах от открывающего до соответствующего ему закрывающего тега, называется контейнером (to contain - содержать что-либо). Теги, у которых есть закрывающий и открывающий варианты записи называются парными, а те, которые используются только в одном виде (например, тег <P> ), называются непарными. Весь файл web-страницы - это по сути дела один большой контейнер HTML.
Внутри контейнера HTML последовательно записываются два контейнера:
1.Заголовок документа (<HEAD>). Внутри этого контейнера записываются параметры, общие для всей страницы. Для примера можно поместить сюда контейнер , позволяющий поместить текст для отображения в заголовке окна браузера.
2.Тело документа (<BODY>). Этот контейнер содержит всё то, что должен показать браузер внутри своего окна при открытии документа. Если документ содержит только текст, то этот текст нужно записывать именно здесь, если есть другие элементы (графика, таблицы, ссылки и т. д.). Элемент BODY должен встречаться в документе не более одного раза.
Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and Office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим.
Ниже приведен шаблон типичного Web-документа. На его примере мы рассмотрим общие принципы построения HTML-страниц.
Для того чтобы понять структуру Web-страницы, нам необходимо подробно рассмотреть все элементы, входящие в приведенный ниже пример.
<HTML>
<HEAD>
<TITLE>исходная </TITLE>
</HEAD>
<BODY>тело документа
</BODY>
</HTML>
Если приведенный выше пример пояснить схематически, получится следующее:
Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.
Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).
Тело документа – самая важная составляющая. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы.
Заголовок создается с помощью элемента HEAD, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа.
Элементы, относящиеся к заголовку документа:
HEAD - определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе.
TITLE - определяет имя всего документа, которое отображается в заголовке окна браузера. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
BASE - Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов.
1.3. Списки базовых тэгов HTML
Список базовых тэгов HTML необходимых для формирования текста web-страницы.
| Стартовый | Завершающий | Описание |
| <HTML> | </HTML> | Обозначение HTML-документа |
| <HEAD> | </HEAD> | Заголовочная часть документа |
| <TITLE> | </TITLE> | Заголовок документа |
| <BODY> | </BODY> | Тело документа |
| <H1> | </H1> | Заголовок абзаца первого уровня |
| <H2> | </H2> | Заголовок абзаца второго уровня |
| <H3> | </H3> | Заголовок абзаца третьего уровня |
| <H4> | </H4> | Заголовок абзаца четвертого уровня |
| <H5> | </H5> | Заголовок абзаца пятого уровня |
| <H6> | </H6> | Заголовок абзаца шестого уровня |
| <P> | </P> | Абзац |
| <PRE> | </PRE> | Форматированный текст |
| <BR> | | Перевод строки без конца абзаца |
| <BLOCKQUOTE> | </BLOCKQUOTE> | Цитата |
Можно так же комбинировать различные виды стилей, например жирный и наклонный.
| Стиль | Элемент или тэг | Результат |
| Bold | <B> Этот текст жирный </B> | Этот текст жирный |
| Italic | <I> Этот текст наклонный </I> | Этот текст наклонный |
| Mono spaced | <TT> Этот текст с непроп. шрифтом </TT> | Этот текст с непроп. шрифтом |
Дополнительные стили:
| Стиль | Элемент или тэг | Результат |
| Big | Этот текст <BIG> большой </BIG> | Этот текст большой |
| Small | Этот текст <SMALL> маленький </SMALL> | Этот текст маленький |
| Sub | Этот текст <SUB> подстрочник </SUB> | Этот текст подстрочник |
| Sup | Этот текст <SUP> надстрочник </SUP> | Этот текст надстрочник |
1.4. Создание таблиц в
HTML.
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Основные тэги таблицы
Таблица: <TABLE>...</TABLE>
Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.
Строка таблицы: <TR>...</TR>
Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы: <TD>...</TD>
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Заголовок таблицы: <TH>...</TH>
Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.
Подпись: <CAPTION>...</CAPTION>
Данный тэг описывает название таблицы. Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.
Основные атрибуты таблицы
BORDER - Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.
ALIGN - Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.
Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).
VALIGN - Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).
NOWRAP - Данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.
COLSPAN - Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании - 1.
ROWSPAN - Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании - 1.
COLSPEC - Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".
1.5. Гипертекстовые ссылки.
Гипертекстовые ссылки являются ключевым компонентом, делающим web привлекательным для пользователей. Добавляя гипертекстовые ссылки можно сделать набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Так же можно использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако, HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.
Для создания гиперссылок используются следующие теги
| Гиперссылки | |||||||||||||
| <a href="URL"></a> | Создает гиперссылку на другие сайты. | ||||||||||||
| <atarget="?"></a> | Указывает в каком окне открывать гиперссылку.
| ||||||||||||
| <a href="NAME"></a> | Создает гиперссылку на другую страницу. |
| <a href="mailto:EMAIL"></a> | Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. |
| <a href="#name"></a> | Создает гиперссылку на метку текущей страници. |
| <a name="name"></a> | Отмечает часть текста, как метку для гипперссылок на странице. |
| <a href="NAME#name"></a> | Создает гиперссылку на метку другой страници. |
2. Описание создание сайта «Стрельба из лука»
На рисунке 1 показан блокнот в котором выполнялось изготовление моего сайта «Стрельба из лука»,а именно исходной страницы или главной страницы сайта.
Были заданы цвет фона (серый), цвет шрифта (черный, красный и т.д.), рис. 1; размер шрифта, также были сделаны гиперссылки на другие страницы в верхней части в виде таблицы:
</td>
<td width="13%">
<div align="center"><span class="style5"><a href="sait2.htm">Истоки происхождения</a></span></div> (рис. 2)
и также гиперссылки в конце абзацев с текстом:
<p class="style19" align="left">В личном и
командном зачете, женские и мужские команды, с 1972 года....
<a href="sait6.htm" class="style19">читать далее</a></p> (рис. 3)
Рис.1
Рис.2
Рис.3
На рис.4 показан блокнот в котором выполнялось изготовление 2 страницы, а именно «Исток происхождения» , также были заданы цвет фона, цвет шрифта, размер шрифт (рис4) , были сделаны неизменные гиперссылки в виде таблицы на другие страницы: </td>
<td width="21%">
<div align="center"><span class="style5"><a href="sait3.htm">Крупнейшие соревнования </a></span></div> (рис 5)
а также на нужные участки текста:
<li class="style8">
<div align="center"><a href="#par2">До
наших дней</a></div>
</li> (рис. 6)
Рис. 4
Рис. 5
Рис. 6
Блокнот в котором выполнялось изготовление 3 страницы, а именно «Крупнейшие соревнования»
Использовались все те же настройки цветов и размеров шрифта что и на предыдущих страницах, также осталась неизменной верхняя таблица с гиперссылками на другие страницы.
На рис.7 показан блокнот в котором выполнялось изготовление 4 страницы, а именно «Инвентарь»
Все настройки остались такими же как и на предыдущих страницах, добавились гиперссылки с названиями тем абзацев, при нажатии на которые попадаешь непосредственно на нужный участок страницы (рис 7)
<li>
<div class="style12" align="center"><a href="#par1">Традиционный лук </a></div>
</li>
Рис. 7
На рис.8 показан блокнот в котором выполнялось изготовление 5 страницы, а именно «Правила»; настройки неизменны, добавились гиперссылки того же типа что и на предыдущей странице
Рис. 8
На рис.9 показан блокнот в котором выполнялось изготовление 6 страницы, а именно «Победители Олимпийских игр» , где сохранились все прежни настройки, но добавились таблицы с данными.
ж
Рис. 9
Заключение.
В ходе выполнения данной работы я научилась создавать сайт при помощи языка HTML и использовала для этого необходимые алгоритмы, которые описаны в моей работе.
Для написания своего курсового проекта я использовала материалы из Интернета и лекции, благодаря им задачи которые я ставила перед написанием работы выполнены.
Список используемой литературы:
1.http://html.find-info.ru/html/
2.http://scriptic.narod.ru/html/
3. http://html.manual.ru/book/html/
