Языки гипертекстовой разметки

Содержание:

ВВЕДЕНИЕ

В работе рассматривается язык разметки гипертекста HTML (Hypertext Markup Language); первая спецификация этого универсального и общедоступного языка разметки - HTML была утверждена в 1991 году. HTML стал стандартом и одновременно «корнем» для всех разрабатываемых Web страничек.

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

Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей (CSS), иногда присутствуют Java-апплеты. По сути дела, можно вывести для современной Web-страницы: Web-страница=HTML+DHTML(JavaScript/VBScript, CSS, Java-апплеты)+CGI То есть на любой странице должна присутствовать HTML-верстка - расположение элементов дизайна текста и необходимые скрипты - как расширение HTML в области расположения и описания свойств различных объектов. CGI-скрипты могут играть первостепенную роль, формируя всю страницу, наполняя ее необходимыми, обновленными данными или второстепенную роль, - включаясь в нее.

Цель работы состоит в общей характеристике языка разметки гипертекста HTML. В соответствии с поставленной целью задачи работы сформулированы следующие:

1. обзор основных возможностей HTML

2. анализ практического применения HTML (на примере обучающих программ).

Объект курсовой работы - языки гипертекста.

Предмет курсовой работы - изучения языков разметки гипертекста.

Метод изучения темы курсовой работы - аналитический и статистический.

Степень разработанности темы курсовой работы, высока. Её анализом занимались такие ученые и публицисты, как Сушин М.Н в своих трудах «Языки разметки» и Маркин Р.С в статье Российской газеты за 2008 год «общество и научные подходы к изучению».

Цели и задачи курсовой работы определяют её структуру. Работа включает введение, три главы, заключение, список использованной литературы.

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

Глава 1. Общие сведения о языке разметки гипертекста (HTML)

Гипертекст on - текст со on вставленными в on него словами on (командами) разметки, on ссылающимися на on другие места on этого текста, on другие on документы, картинки on и т.д. on Во время on чтения такого on текста (в on соответствующей on программе, его on обрабатывающей и on выполняющей соответствующие on ссылки или on действия) вы on видите подсвеченные on (выделенные) в on тексте слова. on Если наехать on на on них курсором on и нажать on клавишу или on на кнопку on (глаз) мышки, on то высветится on то, on на что on ссылалось это on слово, например, on другой параграф on той же on главы этого on же текста. on В WWW по on ключевым словам on можно попасть on в совершенно on другой текст on из другого on документа, войти on в какую-нибудь on программу, on произвести какое-либо on действие и on т.д. on В Internet on в контексте on WWW можно on получать доступ on к чему on угодно, к on telnet, on e-mail, on ftp, Gopher, on WAIS, Archie, on USENET News on и т.п. on В WWW on можно ссылаться on на данные on на других on машинах в on любом месте on сети, тогда on при активации on этой ссылки on эти данные on автоматически передадутся on на исходную on машину и on вы увидите on на экране on текст, on данные, картинку, on а если on провести в on жизнь идею on мультимедиа, то on и звук on услышите, музыку, on речь.

Это on слегка напоминает on Gopher, но on фактически on это принципиально on другое и on новое. В on Gopher имеется on жесткая структура on меню, on по который on вы двигаетесь, on как вам on угодно. Эта on структура не on зависит от on того, on что вы on делаете, какой on документ пользуете on и on т.д. on В WWW on вы двигаетесь on по документу, on который может on иметь какую on угодно гипертекстовую on структуру. Можно on свободно организовать on структуры меню on в гипертексте. on Имея on редактор гипертекстов, on можно создать on любую структуру on рабочей среды, on включая документацию, on файлы, данные, on картины, программное on обеспечение и on т.д., on и это on не будет on новое программное on обеспечение, а on просто on гипертекст.

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

Исходные on текстовые, табличные on и графические on и другие on объекты включаются on в on Web-site on посредством тегов on (tag = ярлык, on этикетка). Тег on - это последовательность on символов, on задающая

- положение on объекта на on странице on сайта,

- внешний on вид объекта on или

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

Тег on называют также on управляющим маркером, on флагом. Программы on типа Web on Pen сами on расставляют теги, on поэтому пользователь on таких программ on может не on знать языка on разметки гипертекста on (HTML = HyperText Markup Language).

Знание on HTML необходимо on по пяти on причинам.

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

Во-вторых, on совершенствование своего on Web-сервера on без полной on его переделки on (что долго on и дорого) on удобно производить on путем ручной on вставки on и удаления on объектов и on тегов.

В-третьих, on HTML непрерывно on развивается, поэтому on программы типа on MS FrontPage on все время on отстают от on новейших возможностей on языка.

В-четвертых, on не следует on забывать о on достаточно высокой on стоимости таких программ.

Наконец, on в-пятых, on потратив деньги on на приобретение on программы, on нужно еще on потратить время on на ее on освоение.

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

В on HTML реализована on поддержка механизма on специальных гипертекстовых on ссылок, которые on обеспечивают связь on данного документа on с другими on документами. Последние on могут on находиться:

- на on данном сайте, on то есть on в папке, on содержащей все on htm-файлы, графику, on звук, анимацию, on видеофильмы, on программы;

- вне on сайта в on других в on папках на on данном on компьютере;

- в on системе on World Wide on Web, то on есть на on других on Web-серверах;

- в on Internet на on серверах других on типов (FTP, on Gopher).

Применение on механизма гипертекстовых on ссылок создает on всемирное единое on информационное пространство, on из которого on сотрудники on торговой фирмы on получают нужные on им сведения. on Стандарт HTML, on как и on все on другие стандарты, on имеющие отношение on к Web, on разрабатывается под on эгидой консорциума on World Wide on Web Consortium on (W3C). Спецификации on стандартов on и проекты on новых предложений on можно найти on по адресу on http://www.w3.org. on Самая последняя on разработка рабочей on группы по on HTML в on W3C - рабочий on проект HTML on 4.0. on Кроме HTML, on Web-мастера on используют и on другие языки, on например, Java on (Ява), Perl, on Си.

Записанные on в методичке on HTML-тексты on содержат сведения, on необходимые для on создания on Web-сайтов. on Это позволяет on увеличить количество on информации, полезной on для студентов. on Принятая форма on изложения имеет on еще on одно достоинство: on обучающийся привыкает on читать htm-файлы. on Это необходимо on для анализа on и совершенствования on готовых on сайтов.

Глава 2. Структура HTML-документа

Документ on состоит из on текстов, графики, on таблиц и on других on объектов, которые on представляют собой on содержимое документа. on Программа on просмотра использует on при этом on теги, которые on записаны в on HTML-документе on для on задания структуры on расположения объектов on и их on внешнего вида. on Чаще всего on HTML-теги on записываются парами on (начальный и on конечный теги), on между on которыми размещаются on текст и on другие объекты on документа. Имя on конечного on тега идентично on имени начального, on но перед on именем конечного on тега ставится on косая черта on (/), так on называемый слэш. on Оформление on HTML-документа on просто: on он начинается on тегом и on заканчивается тегом. on Имя тега on может быть on записано on как строчными, on так и on прописными on буквами.

Запустить on приложение Блокнот, on используя кнопку on «Пуск» на on панели задач on

ПУСК => on ПРОГРАММЫ => on СТАНДАРТНЫЕ => on БЛОКНОТ

Разместить on на рабочем on столе одновременно on два окна: on окно MS on Word on с данной on методичкой и on окно on Блокнота.

Набрать on в поле on редактирования Блокнота on следующий on текст:

Данную on программу, как on и все on последующие, можно on не набирать on на клавиатуре, on а скопировать on в поле on редактирования Блокнота on из этой on программы используя on команду операционного on меню ВИД on => on ИСТОЧНИК. Неиспользуемые on в программах on сноски набраны on черным on шрифтом.

Здесь on записан текст, on появляющийся на on экране при on открытии on этого документа.

А on этот текст on будет записан on курсивом.

Если on времени не on хватает для on набора текста, on то прочтите on Блокнотом on файл ris1.htm, on находящийся в on том же on каталоге, из on которого

Сохранить on документ в on рабочем каталоге on под именем, on например, on ris1a.htm (Блокнот on закрывать не on следует, он on пригодится для on дальнейшей on работы).

В on окне рабочего on каталога выполнить on двойной щелчок on левой on кнопкой мыши on по значку on только что on созданного документа on ris1a.htm on и с on помощью on MS Internet on Explorer просмотреть on получившийся on документ.

Текст on документа состоит on из элементов on заголовок и on тело, on которые выделяются on соответственно тегами on <HEAD> on </HEAD> on и on <BODY> on </BODY> on В заголовке on теги <TITLE> . on. . </TITLE> on ограничивают текст, on используемый on как надпись on в заголовке on окна программы on просмотра. Такую on же надпись on имеет кнопка on на панели on задач при on просмотре on документа.

Глава 3. Элементы дизайна Web-страниц

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

Заголовок on страницы. Заголовок on Web-страницы on представляет on собой информацию, on заключенную внутри on цемента (секции) on HEAD.

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

STYLE on -и - LINK on -. Тег STYLE on тоже должен on располагаться on внутри элемента on HEAD, Если on вы хотите on разобраться, какие on нестандартные on форматы используются on на странице, on надо просмотреть on содержимое этого on элемента. on В нем on будут указаны on необходимые форматы. on Если таких on форматов нет, on значит стили on страницы записаны on в отдельном файле. on Ссылка на on такой файл on должна находиться on в элементе on LINK.

Секция on заголовка может on содержать несколько on цементов МЕТА, on каждый из on которых отвечает on за определенный on набор параметров. on Использование элементов on МЕТА не on является обязательным, on но некоторые on настройки могут быть on весьма важны. on Так, например, on известно, что on браузер в on некоторых on случаях способен on автоматически определить on вид кодировки on страницы. on Пользователь, работая on с браузером, on может выбрать on в меню on определенную кодировку. on Чтобы исключить on неопределенность при on просмотре конкретной on страницы, на on ней целесообразно on разместить указание on на кодовую on страницу.

Информация, on сосредоточенная в on элементах МЕТА, on определяет on общие настройки on Web-страницы on и называется on профилем. Профили on можно хранить on в отдельных on файлах и on присоединять к on определенной странице on при on помощи специального on атрибута элемента on HEAD:

<HEAD on prorIle=«lJRL»>

Стандартные on атрибуты. Существует on ряд атрибутов, on которые on moist использоваться on во многих on элементах. Часть on этих атрибутов on очень важна on для конструирования on Web-страниц, on а часть on подходит только on для on решения определенных on задач.

Атрибут on id выполняет on функции уникального on имени элемента. on В зависимости on от типа on элемента, этот on атрибут выполняет on различные on функции

Атрибут on classid задает on программу или on объект, которые on могут использоваться on в определенных on элементах.

Атрибут on style может on использоваться со on многими элементами. on Он предназначен on для определения on формата конкретного on элемента и on может принимать on самые разные on значения.

Похожие on функции выполняет on атрибут class. on Его можно on указывать, если on в секции on HEAD расположен on элемент STYLE on или использована on ссылка on на каскадную on таблицу стилей.

Атрибут on align используется on для выравнивания on текста, объектов on или элементов on целиком. Выравнивание on может выполняться on относительно on границ окна, on рамки таблицы и т.д. on Каждый элемент on позволяет on указывать определенные on значения для on этого атрибута. on В общем on случае значения on могут быть on такие:

- left - on выравнивание по on левому on краю;

- right - on выравнивание по on правому on краю;

- justify - выравнивание on по ширине on (для on текста);

- center - выравнивание on по центру on (по on горизонтали);

- middle - on выравнивание по on центру (по on вертикали);

- top - on выравнивание по on верхней on границе;

- bottom - on выравнивание по on нижней on границе.

Атрибут lang определяет, на каком языке набран текст внутри текущего элемента: lang - «код языка»

Атрибут dir теоретически может использоваться в разных элементах, но не все броузеры обеспечивают его работу.

Форматирование on текста. Текст on - единственный on объект on Web-страницы, который on не требует on специального определения. on Иными словами, on произвольные символы on интерпретируются по on умолчанию как on текстовые данные. on Но on для форматирования on текста существует on большое количество on элементов. Большинство on из них, on кроме специальных, on поддерживает on стандартные атрибуты: on id, class, on lang. dir, on title, style on и атрибуты on событий.

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

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

Элемент абзаца paragraph - один из самых полезных. Он позваляег использовать только начальный тег, так как следующий элемент Р обозначает не только начато следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца можно использовать и конечный тег. В некоторых случаях начальный тег удобно ставить в конце строки: он не только обозначит конец абзаца, но и выполнит функцию тега <BR> (разрыв строки). Вместе с элементом абзаца можно

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

<ЕМ> </ет> и <DFN> </dfn> элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны по своему действию элементу 1, то есть в большинстве случаев позволяют выделить текст курсивом.

С точки зрения дизайна документа эти элементы ничем особенным не отличаются. Они могут пригодиться только для того, чтобы единообразно выделить одинаковые по назначению (или смыслу) фрагменты текста. находящиеся в разных частях документа или даже на разных страницах. Разработчик, в этом случае, не может точно знать, какой именно шрифт будет использован: это определяется каждым браузером по-своему. Но он может быть уверен, что все фрагменты текста будут отформатированы одинаково. В языке можно найти еще несколько элементов, которым можно дать такую же характеристику.

Эти и другие элементы содержания могут иметь стандартные атрибуты: id. class, lang, dir, title, style, атрибуты событий.

BLOCKQUOTED blockquote- -обозначение цитаты. Этот элемент требует наличия конечного тега Текст не претерпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате имеются кавычки, они должны быть проставлены явным образом. Визуально форматирование этим элементом заключается только в отступе слева, поэтому элемент может быть использован в самых разных случаях. Этот элемент имеет собственный нестандартный атрибут, который позволяет указать источник цитирования:

=«Л0ресоокулшта->крва1кттн11ка''11ре;1!ю.гаж!ся, что адрес задается в виде URL.

Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы. К обычным таблицам таблицы стилей не имеют никакого отношения. В общем случае шаблон таблицы стилей выглядит так:

Элемент. имя стиля (Свойство 1: значение; свойство 2: значение:... j) В результате для определенного элемента задается набор свойств (ассортимент которых весьма значителен). Тем самым снимаются ограничения HTML, а для дизайнера (автора страницы) открывается широкое поле деятельности. Одна из важнейших особенностей стилевого оформления заключается в том. что преобразованию подвергаются все элементы, заключенные внутри цемента с заданным стилем. Так. определив некоторый стиль для элемента BODY, вы присваиваете его всему содержимому Web-страницы. По аналогии с объектно-ориентированными языками программирования это качество называется наследованием.

В соответствии с правилами HTML, автор, использующий стили, должен включить в заголовок документа (элемент HEAD) соответствующее мета-определение:

<МЕТА http-equi\=«Content-Style-Type» content-»text/css»>

Браузер получит информацию, какой язык определения стилей использован. «CSS» в данном случае означает «каскадная таблица стилей» (Cascading Style Sheets). Это одновременно стандарт и язык, расширяющий традиционный HTML. В настоящее время существует две спецификации (CSS1 и CSS2), в которых перечислены свойства элементов. «Эти свойства очень похожи на атрибуты, но есть два различия: свойств намного больше и правила синтаксиса несколько иные.

В этом случае для всей страницы создаются новые стили для заголовков первого и второго уровня. Для элементов CODE выбирается шрифт и цвет фона.

Списки (list) были введены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берёт на себя. Гели список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения, В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяю! общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько разновидностей списков.

Самым простым является ненумерованный список (unordered list). Его шаблон имеет вид

<UL>

<L1>ПУНКТ

<L!> ПУНКТ!

<L1> ПУНКТ 1<1.1> ПУНКТ1 <ДЛ.>

Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов.

<OL> <[.!> </ol> - тго структура нумерованного списка (ordered list) похожа на предыдущую:

<OL><LI>ПУHKTl<LI> ПУНКТ1<[Л>ПУНКТ1<1Л> ПУНКТ 1</OL>

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

Произвольный текст < A h ref> = « Адрес ссылки» текст to щелчка - а

Или такой:

<А hre>f=«Aдpec ссылки» • <IMCi «гс= «Ссылка на рисунок» </а>

Первый шаблон используется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Интернета, файл на локальном диске или на метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. На нем должен щелкнуть пользователь, чтобы осуществить переход. Браузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.

Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки. Если ссылка указывает на рисунок, который находится на локальном диске, она обязательно должна начинаться со слова file, то есть содержать указание на протокол.

Кодовое слово, стоящее в начале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из разновидностей Интернета. В этом смысле можно сказать, что Интернет - это как бы несколько сетей в одной. У каждой из этих частных сетей существуют свои правила доступа достоинства, недостатки, свои приверженцы и противники. Но все пользователи используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Они могут служить для связи голосом, передачи факсов, межкомпыотерной связи и т.д. как самая современная система, должна обеспечивать совместимость с более старыми системами, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например, ftp). Существуют следующие схемы доступа:

е-доступ к файлу на локальном диске; -доступ к архивам файлов но прогокол> передачи файлов (tile transfer protocol):- доступ к WWW;- отправка сообщения по электронной почте;- доступ к новостям USENET:- доспи к новостям USENET по протоколу NNTP:- подключение но протоколу telnet:. - подключение к системе поиска WAIS.

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

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

В больших сайтах часто используются метки для перехода к определенной части некоторой страницы:

<А name-» http: Адрес Файл . 1пт1#мегка»> </а>

Для перехода к метке используется ссылка по такому шаблону:

Текст подсказки <А Ьге1=«£метка»> Текст для щелчка </а>

Для элемента А предусмотрены различные атрибуты. Атрибут hreflang, по аналогии с атрибутом lang. позволяет указать язык, который используется на адресу мой странице.

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

Для решения этой задачи гиперссылки подразделяются на прямые (forward) и обратные (reverse). Ссылка, вызывающая переход с текущей страницы, называется прямой. Соответственно, при помощи броузера или другой ссылки может быть выполнен и обратный переход. Для определения более точного типа ссылки используются два атрибута (один для прямых. другой - для обратных ссылок). Определены следующие стандартные типы ссылок: alternate - другая версия документа; sty lesheet - таблица стилей в виде отдельного файла;

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

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

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

Графика делает сайт привлекательным и понятным. В файле grafika.htm записан следующий текст.

Тег <IMG SRC=/путь/файл.gif> записывают в том месте, которое предназначено для размещения диаграммы, графика, рисунка или фотографии. В данном примере рисунок появится в левом верхнем углу экрана, так как он - единственный элемент тела HTML-документа.

Справа от знака равенства записывают имя gif-файла, хранящего графический объект. В данном примере это имя horse.gif записано без указания пути, так как файлы horse.gif и grafika.htm находятся в одном каталоге (в одной папке). Если бы файл horse.gif находился в папке dir1, вложенной в папку, содержащую файл grafika.htm, то справа от знака равенства следовало бы записать dir1/horse.gif.

Для размещения графики на сайте необходимы gif- или jpg-файлы. Но графический редактор Paint, поставляемый фирмой Microsoft, не позволяет создавать файлы с расширением .gif или .jpg. Поэтому можно использовать, например, графический редактор LView Pro, работающий под операционными системами Microsoft Windows 95 и Windows NT. Редактором LView Pro следует прочесть bmp-файл, созданный посредством Paint, и сохранить его как gif- или jpg-файл.

Создадим сначала bmp-файл. Для этого нужно предварительно уяснить, а затем выполнить следующие действия.

Запустить приложение Paint, используя кнопку «Пуск» на панели задач:

ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => Paint

в окно процессора MS , щелкнув мышью кнопке на задач.

Создать окно текстового MS Word, команду операционного {Окно, Новое } или щелкнув по кнопке меню “Стандартное”.

операционного меню {, Упорядочить все} на дисплее два окна: методичкой и . Курсор должен в новом . Командой операционного MS Word {, Рисунок...} открыть панель “Вставить ”.

Из списка -файлов в части диалоговой выбрать щелчком файл 1stplace.wmf. рисунок, появившийся правой части панели.

Повторяя , указанные в 6, просмотреть несколько . Выбрать понравившийся рисунок, щелкнув кнопке OK левой нижней диалоговой панели. рисунок появится новом окне Word.

Расположить мыши на и щелкнуть клавишей мыши. рисунок в обмена, используя операционного меню {, Копировать} или мышкой по инструментального меню “”.

Закрыть окно рисунком, используя команду [Ctrl_]. Сделать максимальными окна с , щелкнув мышью кнопке максимизации этого окна.

в окно редактора Paint, мышью по на панели .

Вставить рисунок буфера обмена, команду операционного Paint {Edit, }.

Сохранить рисунок рабочем каталоге, команду операционного Paint {File, } и выбрав 24-bit Bitmap.

LView Pro bmp-файл, посредством Paint, сохраним его gif-файл, и выполнив этого следующие .

Запустить проводник, кнопку “Пуск” панели задач:

=> ПРОГРАММЫ => ПРОВОДНИК

На диске D: открыть папку LWPRO и запустить редактор LView Pro двойным щелчком на имени файла Lviewpro.exe.

Прочесть bmp-файл, созданный посредством Paint, используя команду операционного меню LView Pro {File, Open}.

Сохранить рисунок в рабочем каталоге как gif-файл, используя команду операционного меню LView Pro {File, Save as} и выбрав тип файла

Цвета в документах HTML могут задаваться двумя способами - указанием кода цвета или указанием названия цвета на английском языке. При первом способе код цвета записывается в виде шестнадцатеричного числа, содержащего шесть цифр: первые две цифры задают интенсивность красного цвета, вторые - зеленого, третьи - синего. При втором способе используются следующие названия цветов: black (черный), maroon (темно-красный), green (зеленый), olive (оливковый), navy (синий), purple (фиолетовый), teal (зеленовато-синий), gray (серый), silver (серебристый), red (красный), lime (известковый), yellow (желтый), blue (голубой), fuchsia (ярко-малиновый), aqua (морской волны) и white (белый).

Создадим документ, содержащий таблицу, ячейки которой окрашены в разные цвета. Фон документа установим черным. Документ наберем (или отредактируем) Блокнотом и запишем в рабочую папку в файл colortab1.htm.

Посмотрите с помощью MS Internet Explorer на результат. Этот результат достигнут применением новых атрибутов и тегов. Атрибут BGCOLOR задает цвет фона в тегах<BODY> и <TD>. Он может использоваться также в тегах<TR> и <TH> для определения цвета фона строки в целом. Тег <P>означает абзац (paragraph). В данном случае ко всему абзацу применено выравнивание по центру окна (атрибут ALIGN со значением CENTER). Атрибут ALIGN может также принимать значения LEFT и RIGHT. Абзац заканчивается тегом</P> и после конца абзаца прекращается действие его атрибутов.

<TH> - это так называемый тег заголовка таблицы. Фактически он объявляет строку, в которой должен быть записан заголовок таблицы. В данном случае он имеет атрибут COLSPAN, определяющий, сколько ячеек из следующей строки должен перекрыть этот заголовок. Тег<FONT > определяет установки свойств шрифта. В данном случае устанавливается цвет текста в строке заголовка. Вообще говоря, в тегах можно использовать несколько атрибутов, но тег<FONT> является исключением - для каждого изменения свойств текста используется отдельный тег <FONT>, например:

Создайте в рабочей папке документ font1.htm, в тело которого включите текст приведенного выше примера и просмотрите результат. Ускорить выполнение задания можно путем копирования этого примера в текст, создаваемый Блокнотом. Для этого следует выделить пример в методичке, протащив указатель мыши (при нажатой ее левой клавише) по полосе выделения слева от трех строк примера. Используя как образец документ colortab1.htm, создайте в рабочей папке документ table3.htm, содержащий таблицу с заголовком "Координаты ячеек" и с 16-ю клетками (4 строки по 4 ячейки), в которых записаны координаты этих клеток по принципу С1К1 (где С - строка, К - колонка с соответствующими номерами). Фон документа должен быть сине-зеленым, фон строки заголовка - белым, текст строки заголовка - желтым. Текст в ячейках таблицы должен быть черным на сером фоне. Ячейки таблицы должны иметь границы.

ЗАКЛЮЧЕНИЕ

По итогам решения задач работы получены следующие результаты:

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

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

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

В отношении сферы применения можно сказать следующее. Будущее Web также связанно с увеличением скорости передачи данных в Интернет, так как Web неразрывно связан с Интернет.

Вероятно, останется проблема несовместимости между браузерами и Web-серверами, так как компания Netscape Communications несколько расширила HTML, из-за чего не все броузеры отображают документы, написанные в новом формате HTML.

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

1. Бройдо В.Л. Вычислительные системы, сети и телекоммуникации СПб, Питер 2016- 464 с.

2. Информатика /под редакцией С.В. Симоновича. СПб, Питер 2014 - 400 с.

3. Кирмайер М. Информационные технологии. СПб.: Питер, 2013 - 443 с.

4. Мэтьюз Дж. Web - сервер. СПб.: Символ, 2013 - 356 с.

5. Олифер В. Г., Олифер Н.А. Компьютерные сети. СПб.: Питер, 2015 - 864 с.

6. Олифер В. Г., Олифер Н.А. Сетевые операционные системы. СПб.: Питер, 2013 - 539 с.

7. Модемы: использование в сетях, различия в архитектуре, сравнительные характеристики, особенности эксплуатации. http://www.ronl.ru/referaty/komputeri_i_perefirijnie_ustrojstva/12476/

8. Модемы и их использование. http://www.allbest.ru/kursovie

9. Информация о компании. http://www.rostelekom.ru

10. Гагарина Л.Г., Разработка и эксплуатация автоматизированных информационных систем, Издательство: ИД «ФОРУМ» - ИНФА-М, Москва, 2017. - 384 с.

11. Гвоздева В.А., Проектирование информационных систем, Издательство: ИД «ФОРУМ» - ИНФА-М, Москва, 2017. - 255 с.

12. Гвоздева В.А., Основы построения автоматизированных информационных систем, Издательство: ИД «ФОРУМ» - ИНФРА-М: Москва, 2015. – 318 с.