Автор работы: Пользователь скрыл имя, 23 Апреля 2013 в 08:20, курсовая работа
Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.
ВВЕДЕНИЕ 4
ИСТОРИЯ HTML 5
ВЕРСИИ HTML 5
ГИПЕРТЕКСТ 6
СТРУКТУРА WEB-СТРАНИЦЫ 8
<HTML></html> 8
<HEAD></head> 9
<TITLE></title> 9
<STYLE></style> 9
<META> 9
<BODY></body> 9
<!-- Комментарий --!> 10
<H1><h1> 10
<HR> 10
<A></a> 11
Переход внутри одного документа 11
Переход к другому документу 12
<BASE> 14
ПРАВИЛА СИНТАКСИСА 15
КОДИРОВАНИЕ СИМВОЛОВ 16
ИСПОЛЬЗОВАНИЕ СИМВОЛОВ 16
УПРАВЛЕНИЕ ЦВЕТОМ 18
КОНСТРУКТОР ДОКУМЕНТОВ 20
ПРИЛОЖЕНИЕ. СТРУКТУРА ПРИЛОЖЕНИЯ 20
ЦЕПОЧКА 20
Применение цепочек 21
ИЕРАРХИЯ 22
УЛОЖИМ КАРТИНКУ В ФОНОВЫЙ ПАРКЕТ 23
ГРАФИКА 27
ФОРМАТ GIF 27
ФОРМАТ JPG 27
КАК ПРОГРАММИРОВАТЬ КАРТИНКИ 28
Картинка в тексте 28
Картинка как ссылка 29
ПОСТРОЕНИЕ ТАБЛИЦ. 30
ЧТО ТАКОЕ ТАБЛИЦА 30
КАК ЗАДАТЬ ТАБЛИЦУ 30
Атрибуты команды TABLE 31
Атрибуты команды TR 31
Атрибуты команды TD (TH) 32
МНОГОЛИКИЕ ТАБЛИЦЫ 33
Страничные отступы 33
Замечание 34
Многоколонная верстка 34
Наложение картинок 34
Замечание 35
ТАБЛИЦЫ СТИЛЕЙ 36
УРОВНИ CSS 36
СПОСОБЫ ОПРЕДЕЛЕНИЯ ТАБЛИЦ СТИЛЕЙ 36
ЗАПИСЬ ШАБЛОНА CSS 38
Группировка и наследование 38
Селекторы 39
Псевдоклассы 40
Применение таблиц стилей CSS 40
CSS в форматировании текста 40
Единицы измерения в таблицах стилей 41
Структурное форматирование 42
ВВЕДЕНИЕ В JAVASCRIPT 44
ИСПОЛЬЗОВАНИЕ JAVASCRIPT 44
ВАЖНОСТЬ ИЗУЧЕНИЯ JAVASCRIPT 44
JAVASCRIPT В ДЕЙСТВИИ 44
Ввод/вывод информации с помощью JavaScript 45
Объекты, методы и свойства 45
УПРАВЛЕНИЕ ДАННЫМИ С ПОМОЩЬЮ ПЕРЕМЕННЫХ 46
Значения в языке JavaScript 46
Переменные в языке JavaScript 48
МАССИВЫ JAVASCRIPT И ESCAPE-ПОСЛЕДОВАТЕЛЬНОСТИ 49
Как пользоваться массивами 50
ВЫРАЖЕНИЯ, УСЛОВИЯ, ОПЕРАЦИИ, СТРОКИ И ЧИСЛА 52
Что такое выражения и условия 52
Знакомство с операциями 53
СОЗДАНИЕ СЦЕНАРИЕВ С ПОМОЩЬЮ ФУНКЦИЙ И СОБЫТИЙ 56
ОПИСАНИЕ БРАУЗЕРОВ 59
ПРОСМОТР WEB-СТРАНИЦ 59
MICROSOFT INTERNET EXPLORER 59
NETSCAPE COMMUNICATOR 61
ТЕРМИНОЛОГИЯ 64
ПРАКТИЧЕСКАЯ ЧАСТЬ 67
СПИСОК ЛИТЕРАТУРЫ 68
Для упрощения навигации пользователя в таких книгах предусматриваются подробные оглавления, алфавитные и тематические указатели. Разделы словаря или справочника имеют систему развитых перекрестных ссылок. (Помните как у Лема:СЕПУЛЬКА - предмет для сепулькации, см. сепулькация.СЕПУЛЬКАЦИЯ -- действие, выполняемое при помощи СЕПУЛЬКИ, см. сепулька.)
Третий этюд к гипертексту
В век бурных компьютерных технологий как-то не хочется вручную копаться в большом словаре. Почему бы эту рутину не поручить "железному" другу с "мягкой" душой? Вгоним словарь в "железо" и настроим "душу". Щелкнул мышкой по нужному слову -- получил результат: нужный раздел книги на экране.
Последний этюд к гипертексту
Возможности компьютера рождают
принципиально новую идею: почему
бы изначально не проектировать текст
в расчете на возможность чтения
не по-порядку, а по контексту. Такой
подход позволяет разным пользователям
просматривать текст
Структура компьютерной книги становится существенно нелинейной, она даже перестает быть иерархической, а скорее напоминает спутанную рыболовную сеть или порцию спагетти, опрокинутую на пол.
Для навигации по такой сети предусматривается простой способ: те фрагменты документа, которые имеют переходы на другие его части, каким-то образом выделены. Простое интерфейсное действие на такой ссылке (нажатие на Enter или мышиный щелчок) перебрасывают пользователя в другой информационный узел.
Посмотрел, вернулся обратно, или, не возвращаясь, продолжил путешествие по новой ссылке.
Синтаксис HTML.
Заготовка типичной WEB-страницы:
<HTML>
<HEAD>
<TITLE> Структура WEB-страницы </title>
<STYLE> H2 {font-family: Arbat;}CODE { font-family: Arial;} </style>
<META http-equiv. = ”Content-Type” content = “text/html; chariest = windows-1251">
<META name = “Author” content = “Pavel Trizno”>
<META name = “Keywords” content = “ HTML, document, element”>
</head>
<BODY bgcolor = #FFFFFF>
<!-- Комментарий к страницы --!>
<A name = “top></a>
Переход к <A href = “#bottom”> конец </a> документа <P>
Переход к <A href = “#S001”> <B> ссылке 1 </b></a><P>
<P>
<HR>
<H1> Заголовок 1 </h1>
<H2> Заголовок 2 </h2>
<H3> Заголовок 3 </h3>
<H3> Заголовок 4 </h4>
<H3> Заголовок 5 </h5>
<H3> Заголовок 6 </h6>
<HR>
Здесь расположена <B> ссылка 1 </b><A name = “S001”></a>
<HR>
<P> Здесь должен располагаться оригинальный текст WEB-страницы
<HR>
<A name = “bottom”></a><P>
Переход в <A href = “#top”>начало</a> документа
</body>
</html>
Если рассмотреть исходные тексты различных WEB-страниц, то можно легко увидеть схожесть их структуры. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальном и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами.
Рассмотрим основные элементы HTML.
Означает документ на языке HTML. Я уже упоминал о том, что одним из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и коечным тегами должна находится вся WEB – страница. В принципе этот элемент. Он имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом </html> оканчиваются все документы в формате HTML.
Область заголовка Web – страницы, её первая часть. HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты IANG, DIR, должен включать элемент TITLE и допускает вложение элементов BASE, META, LINK, OBJECT, SCARIPT, STULE.
Элемент для размещения заголовка Web – страницы. Строка текста , расположенного внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска в WWW. Эта строка должна достаточно точно отражать назначение документа.
Элемент для описания стиля некоторых элементов Web – страницы. В файле Strukt. Htm назначены шрифты для элементов h2, code. Для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента style не обязательно, но желательно. Этот элемент введён сравнительно недавно, без него немыслима работа в приложениях World, Excel.
Элемент содержит служебную информацию, которая не отражается при просмотре Web- страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент Meta содержит два основных атрибута, первый из которых определяет тип данных, а второй – содержание. Вот несколько примеров meta – данных:
Дата, обозначающая срок годности документа:
Name – “Expires” content = “Дата”
Адрес электронной почты:
Name = “Reply – to” content = “ Имя @ Адрес “
Имя автора Web-страницы:
Name = “Author” content = “ Имя автора”
Набор ключевых слов для поиска:
Name = “Keywords” content = “слово 1, слово 2, слово 3…”
Краткое описание содержания Web- страницы:
Name = “Description” content = “Содержание страницы”
Описание типа и характеристик Web – страницы:
Name = “Content – Type” content = “ Описание страницы”
Указание приложения, в котором была создана Web – страница:
Name = “Generator” content = “Название HTML – редактора”
Атрибут Name используется приложением – клиентом для получения дополнительной информации о Web – страницах и их упорядочения. Его часто заменяют атрибутом http – equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.
Элемент META может содержать URL. Шаблон атрибута таков:
URL = “http: // адрес”
Этот элемент заключает в себе гипертекст, который определяет собственно Web – страницу. Конечный тег этого элемента надо искать в конце HTML-файла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Атрибут, определяющий фон страницы, является одним из самых важных для дизайна.
background = “Путь к файлу”
Более простое оформление фона сводится к заданию его цвета:
bgcolor = “#RRGGBB”
Цвета фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего. Оба приведенных выше атрибута не являются альтернативными и часто используются совместно: если по каким-либо причинам не может быть найден рисунок фона, используется цвет.
Поскольку фон станицы может изменятся, необходимо иметь возможность подбирать соответственный цвет текста. Для этого имеются следующей атрибут:
text = “#RRGGBB”
Для задания цвета текста гиперссылок используются следующие атрибуты:
link = “#RRGGBB”
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink = “#RRGGBB”
Можно также указать изменение цвета для последней выбранный пользователем гиперссылки:
Alink = “#RRGGBB”
В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле – не исключение. Текст, введений внутри этого элемента, игнорируется браузером. Эти элементы могут располагаться в любом месте WEB-страницы. Признаком комментария служит восклицательный знак, а текст комментария должен обрамляться двойным дефисом. Например:
<!-- Комментарий --!>
Элемент заголовка. Существует шесть уровней заголовка, которые обозначаются H1…H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков могут использовать атрибуты, задающие выравнивание влево, по центру или вправо:
align = “left”
align = “center”
align = “right”
Горизонтальная линия – очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части.
Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Этот элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
align = “left”
align = “center”
align = “right”
align = “justify”
Можно задать толщину линии:
Size = толщина в пикселях
Можно управлять длиной линии:
width = длина в пикселях
width = длина в процентах
Можно выбрать цвет:
color = “цвет”
HTML-документ может быть очень большим, и в этом случае нужно иметь возможность быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки. Шаблон для создания меток таков:
<A name = “>Произвольный текст</a>
В данном случае данной строке документа присваивается имя, и, следовательно, в другой части документа или даже на другом документе может быть создана гиперссылка, приводящая в эту точку. Для перехода внутри документа можно использовать следующую конструкцию:
<P>Переход к <A href = “#метка”>метке</a></p>
Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
Читая эту работу, вы, конечно, уже достаточно много поработали со ссылками и понимаете, что это такое на практике.
Вы поняли, что:
гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием;
мышиный курсор на ссылке меняет свою форму и превращается в указующий перст;
для перехода по ссылке необходимо щелкнуть по ней мышкой;
для возврата из ссылки необходимо использовать навигационную кнопку браузера "Назад" ("Back").
Если ссылки образуют вложенную цепочку, то кнопки "Назад" ("Back") и "Вперед"("Forward") можно использовать для движения по пройденному ссылочному пути в обе стороны. Они работают как традиционные операции "откатка" и "накатка" в большинстве прикладных программ.
В нижеприведенном примере
используется цепочка вложенных
ссылок. Совершите небольшое
Ссылки могут уводить не только в разные документы, но загружать на экран разные фрагменты одного и того же текста. В последнем случае навигационные средства браузера работают также.
Для задания гипертекстового перехода внутри документа используют две команды <A>. Первая команда с атрибутом href является источником перехода, вторая с атрибутом name -- приемником.
Общий вид программы |
|
... <A href=#метка>текст</A> ... ... <A name=метка></A> ... |
Задание перехода по метке На экран выводится ссылка: текст
Метка. Сюда браузер приходит по ссылке. На экране ничего не отображается. |
Для организации перехода внутри документа нужно:
Выбрать имя для метки.
Имя должно быть уникальным
в HTML-программе. Это означает, что
других меток с таким именем в
программе быть не должно.
А что будет, если не послушаться этого
совета?
Когда одинаковых меток несколько, браузер
выполняет переход на самую первую метку
в программе.
Информация о работе Разработка web сайта на основе HTML с использованием JavaScript