Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание:

Введение

Выбранная мною тема курсовой работы “Языки гипертекстовой разметки” является несоизмеримо важной в современном мире – ведь именно с помощью них (гипертекстовых языков) организуется работа множества веб-ресурсов.

Цель курсовой работы: изучение языков гипертекстовой разметки.

Задачи курсовой работы:

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

История развития гипертекстовых языков

Общая информация о HTML

HTML (HyperText Markup Language, гипертекстовой язык разметки), является официальным языком Всемирной паутины и был впервые задуман в 1990 году[7]. HTML является продуктом SGML (Стандартный обобщенный язык разметки), который представляет собой сложную техническую спецификацию, описывающую языки разметки, особенно используемые в электронном обмене документами, управлении документами и публикации документов. HTML был первоначально создан, чтобы позволить тем, кто не специализировался в SGML, публиковать и обмениваться научными и другими техническими документами[15]. HTML особенно облегчил данный обмен, включив возможность связывания документов в электронном виде с использованием гиперссылок. Таким образом, название Hypertext Markup Language полностью выполняет поставленную ему задачу.

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

HTML-элементы являются строительными блоками HTML-страниц[2]. С HTML-конструкциями изображения, изображения и другие объекты, такие как интерактивные формы, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания структурированных документов, обозначая структурную семантику для текста, например заголовки, абзацы, списки, ссылки, цитаты и другие элементы. HTML-элементы обозначаются тегами, написанными с использованием угловых скобок. Такие теги, как <img /> и <input />, непосредственно вводят содержимое на страницу. Другие теги, такие как <p> окружают и предоставляют информацию о тексте документа и могут включать в себя другие теги в качестве подэлементов. Браузеры не отображают теги HTML, но используют их для интерпретации содержимого страницы.

HTML может встраивать программы, написанные на языке сценариев, например JavaScript, который влияет на поведение и содержимое веб-страниц. Включение CSS определяет внешний вид и компоновку содержимого. Консорциум World Wide Web (W3C), поддерживающий как HTML, так и стандарты CSS, поощрял использование CSS с явным презентационным HTML с 1997 года[11].

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

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

Язык НТМL позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее. В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое[14].

История языка HTML и его основателя

Язык разметки HyperText был детищем сэра Тима Бернерса-Ли[15]. В 1991 году он написал документ под названием «HTML-теги», в котором он предложил не менее двух десятков элементов, которые можно было бы использовать для написания веб-страниц.

В 1989 году Тим Бернерс-Ли предложил руководству международного центра высоких энергий (CERN) проект распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW), Всемирная паутина. Первоначально идея системы состояла в том, чтобы при помощи гипертекстовой навигационной системы объединить все множество информационных ресурсов CERN в единую информационную систему[12].

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

К октябрю 1990 года Тим написал три фундаментальные технологии, которые остаются основой сегодняшнего Интернета (и которые вы, возможно, видели в частях вашего веб-браузера)[15]:

HTML: Язык разметки гипертекста. Язык разметки (форматирование) для Интернета.
URI: унифицированный идентификатор ресурса. Это своего рода «адрес», который уникален и используется для идентификации каждого ресурса в Интернете. Его также называют URL-адресом.
HTTP: протокол передачи гипертекста. Позволяет извлекать связанные ресурсы из Интернета.

Тим также написал первый редактор / браузер веб-страниц («WorldWideWeb.app») и первый веб-сервер («httpd»). К концу 1990 года первая веб-страница была подана в открытом Интернете[10], а в 1991 году людям, не входящим в CERN, было предложено присоединиться к этому новому веб-сообществу.

Работая в CERN, Тим Бернерс-Ли занимался не только развитием HTML. В его задачи входило построение внутренней сети организации. Концепции, реализованные в ней, были доработаны и переросли в проект под названием «Всемирная паутина».

Проект подразумевал публикацию документов в открытом доступе, размеченных при помощи HTML, и имеющих гиперссылки друг на друга, что позволяло реализовать их связанность. Такие ссылки в прямом смысле образуют формацию, похожую на паутину[10].

Для реализации своей идеи Бернерс-Ли содал специальные программы: HTTP-сервер и WEB-браузер[12]. Первый в мире веб-сайт был размещён 6 августа 1991 года по адресу http://info.cern.ch. В его содержании описывается принцип работы сети, как установить веб-сервер и создать простую страницу.

Тим ушел из CERN в Массачусетский технологический институт в 1994 году, чтобы основать Всемирный консорциум (W3C), международное сообщество, посвященное разработке открытых веб-стандартов[15]. Он по-прежнему остается директором W3C по сей день.

В раннем веб-сообществе появилось несколько революционных идей, которые сейчас распространяются далеко за пределы технологического сектора[13]:

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

Недискриминация: если происходит оплата за подключение к Интернету с определенным качеством обслуживания, и вы платите за соединение с этим или за более высокое качество обслуживания, мы можем общаться на одном уровне. Этот принцип справедливости также известен как Net Neutrality.

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

Универсальность: для всех, кто может публиковать что-либо в Интернете, все задействованные компьютеры должны говорить на одном языке друг с другом, независимо от того, что используют разные аппаратные средства; где они живут; или какие культурные и политические убеждения у них есть. Таким образом, сеть разрушает силосы, сохраняя при этом разнообразие.

Консенсус: для универсальных стандартов работы каждый должен был согласиться на их использование. Тим и другие достигли этого консенсуса, давая каждому возможность заявить о создании стандартов через прозрачный процесс участия в W3C.

Новые перестановки этих идей порождают новые новые подходы в таких разнообразных областях, как информация (Open Data), политика (Open Government), научные исследования (открытый доступ), образование и культура (свободная культура). Но на сегодняшний день мы только прикоснулись к поверхности того, как эти принципы могут изменить общество и политику к лучшему[13].

В 2009 году сэр Тим основал Фонд Всемирной паутины. Веб-фонд продвигает Open Web как средство построения справедливого и процветающего общества, соединяя всех, поднимая голоса и усиливая участие[15].

Одним из компонентов технологии создания распределенной гипертекстовой системы World Wide Web стал язык гипертекстовой разметки HTML (HyperText Markup Language – язык гипертекстовой разметки документов)[2], разработанный Тимом Бернерсом-Ли на основе стандарта языка разметки печатных документов — SGML (Standard Generalised Markup Language, стандартный обобщенный язык разметки). Дэниел В. Конноли написал для него Document Type Definition — формальное описание синтаксиса HTML в терминах SGML[15].

Разработчики HTML смогли решить две задачи:

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

Первая задача была решена за счет выбора теговой модели описания документа. Такая модель широко применяется в системах подготовки документов для печати.

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

Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки). Гипертекстовые ссылки, устанавливающие связи между текстовыми документами, постепенно стали объединять самые различные информационные ресурсы, в том числе звук и видео; в результате возникло новое понятие — гипермедиа[7].

Такой подход предполагает наличие еще одного компонента технологии — интерпретатора языка[8]. В World Wide Web функции интерпретатора разделены между Web-сервером гипертекстовой базы данных и интерфейсом пользователя. Сервер, кроме доступа к документам и обработки гипертекстовых ссылок, обеспечивает предпроцессорную обработку документов, в то время как интерфейс пользователя осуществляет интерпретацию конструкций языка, связанных с представлением информации.

Версии[10]:

RFC 1866— HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.
HTML 5— в разработке. Конец разработки запланирован на 2014 год.
HTML 5.1 начал разрабатываться 19 декабря 2012 года[12].

HTML 1.0 и 2.0

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

Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер[15].

HTML 2.0 включал все, начиная от оригинальных спецификаций 1.0, но добавлял несколько новых функций. HTML 2.0 стал стандартом для дизайна сайта до января 1997 года и впервые определил многие основные функции HTML.

HTML 3.0

Версия 3 была предложена Консорциумом всемирной паутины(W3C) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложныхматематических формул, поддержка gif формата. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic[10].

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

Рабочая группа HTML, возглавляемая человеком по имени Дэйв Раггетт, представила новый HTML-проект HTML 3.0[12]. Он включал множество новых и улучшенных возможностей для HTML и обещал гораздо более мощные возможности для веб-мастеров для разработки своих страниц. К сожалению, браузеры были ужасно медленными в реализации каких-либо новых улучшений, только добавив несколько и оставив остальных – поэтому спецификация HTML 3.0 была оставлена без внимания[14].

К счастью, ответственные люди отметили это, и поэтому будущие улучшения всегда были модульными. Это означало, что они могут быть добавлены поэтапно, что упрощает работу в браузере.

Теги, специфичные для браузера, продолжали поступать, и стало все более очевидным, что нужно найти стандарт. С этой целью «Консорциум World Wide Web» (сокращенно W3C) был основан в 1994 году для стандартизации языка и поддержания его развития в правильном направлении. Их первая работа была под кодовым названием WILBUR, а позже стала известна как HTML 3.2[15]. Это было смягченное изменение существующих стандартов, в результате чего многие большие шаги были направлены на более поздние версии. Большинство тегов расширений, которые были внесены Netscape (и в меньшей степени, Microsoft), не попали в эти новые стандарты. Вскоре он появился и стал официальным стандартом в январе 1997 года, и сегодня практически все браузеры поддерживают его полностью.

HTML 4.0

В версии HTML 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и не рекомендованные (англ.deprecated). В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS)[11].

HTML 4.0 была большой эволюцией стандартов HTML и последней итерацией классического HTML. На раннем этапе разработки у него было кодовое название COUGAR[12]. Большая часть новой функциональности, появившейся в это время, связана с злополучной спецификацией HTML 3.0, а также множеством обрезков по старым тегам, акцентом на интернационализацию и поддержкой нового поддерживающего языка HTML, каскадных таблиц стилей.

HTML 4.0 был рекомендован W3C в декабре 1997 года и стал официальным стандартом в апреле 1998 года[11]. Поддержка браузеров была удивительно искренне изучена Microsoft в браузере Internet Explorer, а ведущий на рынке IE5 (и текущий преемник IE6) имеют отличную поддержку для почти все новые теги и атрибуты. Для сравнения, ужасно ошибочный Navigator 4.7 от Netscape был неумелым, когда дело дошло до HTML 4.0 и даже базового CSS.

XHTML

В 1998 году консорциум Всемирной паутины начал работу над новым языком разметки, основанном на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название XHTML. Первая версия XHTML 1.0 одобрена в качестве Рекомендации консорциума Всемирной паутины 26 января 2000 года[15].

Ближе к началу XXI века W3C выпустила свои спецификации XHTML 1.0 в качестве рекомендации. С 26 января 2000 года он выступает в качестве совместного стандарта с HTML 4.01. XHTML отмечает отход от того, как работали новые спецификации — это совершенно новая ветвь HTML, включающая XML, поэтому код должен быть правильно написан, если он должен работать, когда он достигнет браузера читателя. В XHTML не было много новых или устаревших тегов и атрибутов, но некоторые вещи изменились с целью повышения доступности и функциональности. Это в основном только новый набор правил кодирования.

Содержание спецификации XHTML 1.0 было идентично спецификации HTML 4.01[12]. Никаких новых элементов или атрибутов не было добавлено. Единственное различие заключалось в синтаксисе языка. В то время как HTML позволил авторам много свободы в синтаксическом описании элементов и атрибутов, XHTML потребовал от авторов следовать правилам XML, более строгому языку разметки, на котором W3C основывал большинство своих технологий.

Более строгие правила были не такими уж плохими. Он призвал авторов использовать один стиль письма. Если ранее теги и атрибуты могли быть записаны в верхнем, нижнем регистре или любой их комбинации, то действительный документ XHTML 1.0 требовал, чтобы все теги и атрибуты были строчными.

Публикация XHTML 1.0 совпала с ростом поддержки браузером CSS. Поскольку веб-дизайнеры охватили появление веб-стандартов, во главе с проектом веб-стандартов, более строгий синтаксис XHTML рассматривался как «лучший способ» написания разметки.

Затем W3C опубликовал XHTML 1.1.

В то время как XHTML 1.0 был просто преобразован в HTML как XML, XHTML 1.1 был настоящим, честным и доброжелательным XML[13]. Это означало, что он не может быть подан с типом text / html типа mime. Но если авторы опубликовали документ с типом XML mime, тогда самый популярный веб-браузер в мире в то время - Internet Explorer - не смог отобразить документ.

Казалось, что W3C теряет связь с повседневной реализацией публикации в Интернете.

Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 года консорциум Всемирной паутины объявил, что полномочия рабочей группы XHTML2 истекают в конце 2009 года[10]. Таким образом, была приостановлена вся дальнейшая разработка стандарта XHTML 2.0.

В октябре 2006 года сэр Тим Бернерс-Ли написал сообщение в блоге, в котором признал, что попытка переместить веб-страницы из HTML в XML просто не работает. Несколько месяцев спустя W3C выпустил новый устав для рабочей группы HTML. Вместо того, чтобы начинать с нуля, они мудро решили, что работа WHATWG должна использоваться в качестве основы для любой будущей версии HTML[15].

HTML 5

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

Примерно в это же время куча прагматичных поклонников веб-технологий, программистов-программистов и писателей-спецификаторов начали создавать что-то свое, вне обычных процедур W3C. Они назвали себя рабочей группой Web Hypertext Application Technology (WHATWG)[6] и разработали новую спецификацию[10]. После некоторого поиска души W3C решил, что HTML все еще является будущим Интернета. XHTML 2 был прекращен, и HTML5 стал новой спецификацией, в которую должны вливаться все усилия.

HTML5 предназначен для Интернета, как сейчас, так и в будущем[15]. Это спецификация, над которой мы будем работать в течение следующего десятилетия, по крайней мере, поэтому процесс ее развития относительно медленный и учитывается. Многие части будут знакомы, но есть также множество новых элементов, атрибутов и способностей, которые могут с успехом использоваться в самых различных задач.

Выводы

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

Программные объекты языка гипертекстовой разметки

Общая структура документа

Язык разметки гипертекста HTML (Hyper Text Markup Language) — это структурированный язык разметки, используемый для создания Web-страниц. HTML представляет собой набор текстовых символов, называемых элементами, который используется для задания структуры и правил оформления документа[5].

Элемент — это конструкция языка HTML, представляющая собой контейнер, содержащий данные и правила их форматирования[6].

Тег (дескриптор) - маркер элемента HTML. Теги определяют границы действия элементов и отделяют элементы друг от друга.

Общая структура любого HTML-документа имеет вид[7]:

<html>

<head>

<title>Мой первый документ</title>

</head>

<body>

Hello, world!

</body>

</html>

Рассмотрим входящие в этот пример контейнеры. Весь документ является контейнером <html>…</html>, в который включены два контейнера <head>…</head> – заголовок документа и <body>…</body> — тело документа, которое будет отображаться в клиентском окне Web-браузера.

Существуют теги, которые могут использоваться только в заголовке или только в теле документа. Например, контейнер <title>…</title> может быть указан только один раз и только внутри контейнера <head>, также как и тег <meta>, который не имеет парного закрывающего тега, но может быть указан несколько раз. Тег <meta> применяется для указания общей информации о документе (автор, ключевые слова, кодировка, описание документа)[7]. Например:

content="text/html; charset=windows-1251">

Первый тег сообщает о том, что автором документа является Ivan Ivanov, второй сообщает браузеру о том, что документ набран в кодировке, применяемой операционной системой (ОС) Windows для кириллицы. Из этих примеров видно, что данные теги содержат атрибуты name, http-equiv и content. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может не быть. Закрывающие теги не имеют атрибутов[5].

Спецификация атрибута состоит из расположенных в следующем порядке имени атрибута, например WIDTH, знак равенства (=), значения атрибута, которое задается строкой символов, например, "80". Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80")[3]. Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот.

Атрибуты тела документа

Атрибуты тега <body>[7]:

1. bgcolor=”…” – определяет цвет фона документа;

2. background=”…” – указывает браузеру местоположения файла с рисунком, который необходимо использовать в качестве фонового. В кавычках указывается путь к файлу. Окно полностью заполняется изображением, начиная с верхнего левого угла;

3. text=”…” – устанавливает цвет текста;

4. alink=”…” – определяет цвет активной ссылки;

5. link=”…” – определяет цвет не просмотренной ссылки;

6. vlink=”…” – определяет цвет просмотренной ссылки;

7. topmargin=”…” – устанавливает границу верхнего поля;

8. leftmargin=”…” – граница левого поля

Форматирование текста

Для того чтобы в тексте выделить абзац необходимо ограничить его тегами <p>…</p>[1]. У этого тега большое количество различных атрибутов, наиболее важным из которых является атрибут align[2]. Он может принимать значения left (выравнивание по левому краю), right (по правому краю), center (по центру), justify (по ширине)[5].

Теги для форматирования текста:

1. <i>…</i> — выделение текста курсивом;

2. <b>…</b> — выделение текста полужирным шрифтом;

3. <u>…</u> — выделение текста подчеркиванием;

4. <sup>…</sup> — текст отображается верхним индексом;

5. <sub>…</sub> — текст отображается нижним индексом;

6. <ol>…</ol> — формирование нумерованного списка, каждый пункт списка заключается в контейнер <li>…</li>;

7. <ul>…</ul> — для создания маркированного списка (вместо <ol>);

8. <br> — непарный тег, вставляет “жесткий” разрыв строки;

9. <center>…</center> — применяется для центрирования блока текста;

10. <h1>…</h1> — форматирует текст как заголовок 1-го уровня (всего 6 уровней <h2>...</h2> … <h6>...</h6>);

11. <multicol cols=”“>…</multicol> — выводит текст в несколько колонок (атрибут cols задает их количество);

1. <pre>…</pre> — выводит текст моноширинным шрифтом с сохранением форматирования;

2. <strike>…</ strike > — перечеркивает текст горизонтальной линией.

Размер шрифта

Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа[1]. По умолчанию размер шрифта равен 3, однако, используя тег <font> с атрибутом size=”…”, его можно переопределить.

Относительно базового размера можно указывать размер шрифта текста, который заключен в контейнере <font>…</font>. Для этого необходимо присвоить атрибуту size одно из следующих значений[2]:

— (+1…+7) — увеличение шрифта на указанное количество единиц относительно базового размера;

— (–1…–7) — уменьшение шрифта на указанное количество единиц относительно базового размера.

Также могут использоваться теги[5]:

1. <big>… </big> — выводит текст шрифтом большего размера;

2. <small>…</small> — выводит текст шрифтом меньшего размера.

Таблицы

Таблицы являются не только средством представления данных. Для языка HTML более важно их применение в качестве средства форматирования. Таблицы описываются тегами <table>…</table>[3].

Атрибуты тега <table>: border — толщина рамки таблицы в пикселях (0 — рамки нет); bordercolor — цвет рамки; bgcolor — цвет фона таблицы; width — ширина таблицы (в пикселях или в процентах от ширины контейнера); align — выравнивание таблицы внутри родительского контейнера; cols — количество столбцов; rows — количество строк в таблице.

Строки таблицы описываются тегами <tr>…</tr>, а внутри них располагаются ячейки таблицы, которые ограничиваются тегами <td>…</td>. Ячейки внутри таблицы можно объединять при помощи атрибутов тега <td> colspan и rowspan[7].

Пример:

<td>Колонка 1</td>

<td>Колонка 2</td>

<td>Колонка 3</td>

</tr>

<td colspan=3 align=center>Широкая ячейка</td>

</tr>

<td rowspan=2>Высокая<br>ячейка</td>

<td>Ячейка 11</td>

<td>Ячейка 12</td>

</tr>

<td>Ячейка 21</td>

<td>Ячейка 22</td>

</tr>

</table>

Часто при форматировании документов при помощи таблиц возникает необходимость, чтобы таблица была расположена вплотную к границам окна браузера. Для этого атрибутам тега <body>: marginwidth и marginheight для IE или topmargin и leftmargin для Netscape присваивается значение 0[7]. Обычно в теге указывают все четыре атрибута сразу, для того чтобы форматирование страницы удовлетворяло требованиям всех браузеров.

Гиперссылки

Гиперссылкой в электронном документе может быть любой элемент: текст, рисунок, внедренный объект (например, flash-ролик)[1]. Определить гиперссылку в HTML-документе можно с помощью тега <a href=”url”>…</a>, где href – атрибут, значение которого является конечной точкой перехода по этой ссылке. В общем случае этим значением является URL (Uniform Resource Locator) документа (например, http://www.icsc.edu.ru)[2]. Текст или изображение, обозначающее ссылку, записываются внутри контейнера. Например:

<a href=”http://www.icsc.edu.ru”>Сайт кафедры «ИиУС»</a>.

Атрибуту border тега <img> присвоено значение 0 для того, чтобы браузер не отображал рамку вокруг рисунка, так как по умолчанию для рисунка-ссылки толщина рамки вокруг рисунка равна одному пикселю.

Гиперссылка может указывать и на некоторый блок внутри того же документа:

Начало документа... ... ...

Конец документа

<a href=”#top”>Вверх</a>

В этом примере <a name=”top”> не имеет закрывающего тега и обозначает так называемый якорь, ссылка под названием «Вверх» приведет пользователя к тому месту документа, где он расположен, т.е. к тексту «Начало документа». Конечно, это произойдет, если документ достаточно длинный.

Очень часто исходные коды программ сопровождаются комментариями, который начинается символами [1]. Текст, заключенный в теге комментария, не отображается в браузере.

Выводы

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

Разработка сайта с использованием языка гипертекстовой разметки

Тематика – кафедра учебного заведения.

Карта сайта:

Рисунок – структура разработанного сайта

Макет страниц

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

Для общих тегов, которые будут использоваться на всех страницах заданы стили:

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background: #D3D3D3;

margin: 0;

padding: 0;

color: #000;

}

Для тела документа установлено что будет использоваться шрифт Verdana, Arial, Helvetica с засечками и стопроцентной высотой. Будут отсутствовать как внешние, так и внутренние отступы. Цвет шрифта – черный.

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

ul, ol, dl {

padding: 0;

margin: 0;

}

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

h1, h2, h3, h4, h5, h6, p {

margin-top: 0;

padding-right: 15px;

padding-left: 15px;

}

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

a img {

border: none;

}

Стили ссылок:

Для всех ссылок задан цвет и убрано подчеркивание.

a:link {

color: #7A7A7A;

text-decoration: none;

}

Для посещенных ссылок изменен цвет и убрано подчеркивание.

a:visited {

color: #4E5869;

text-decoration: none;

}

При наведении на ссылку изменяется цвет.

a:hover, a:active, a:focus

{ text-decoration: none;

color: #333;

}

Стили таблиц:

.table{

margin: 0 auto;

}

th, caption {

font-size: 13px;

font-weight: normal;

background: #b9c9fe;

border-top: 4px solid #aabcfe;

border-bottom: 1px solid #fff;

color: #039;

padding: 8px;

}

td {

background: #e8edff;

border-bottom: 1px solid #fff;

color: #669;

border-top: 1px solid transparent;

padding: 8px;

}

tr:hover td {background: #ccddff;

}

Стили для блока container задают ширину блока и максимальную ширину, чтобы на больших экранах сохранялись пропорции макета. Также задана минимальная ширина, чтобы макет не стал слишком узким. Задан фоновой цвет и контейнер отцентрирован с помощью margin: 0 auto.

.container {

width: 90%;

max-width: 1260px;

min-width: 780px;

background: #FFF;

margin: 0 auto;

}

Блок header. Для него прописаны следующие стили:

{background: linear-gradient(to bottom, rgba(72, 85, 108, 0.87), rgb(27, 33, 43));

} – заливка шапки выполняется в виде градиента, который идет снизу и состоит из двух цветов.

В header находится логотип, заголовок и меню сайта. Для каждого этого элемента прописаны стили:

Для логотипа указано, что отступы по краям 5 пикселей.

#Insert_logo{

margin: 5px;

}

Для заголовка указан цвет, выравнивание с правого края, шрифт Garamond, размер шрифта 50 пикселей, вес шрифта – нормальный.

#heder_H1{

color: #d3d3d3;

float: right;

font-family: Garamond, serif;

font-size: 50px;

font-weight: normal;

}

Блок bmenu содержит список с пунктами меню. Для него заданы стили: отступ внутри 0 пикселей, отступ снизу 10 пикселей, позиционирование устанавливается относительно его исходного места.

.bmenu{

padding: 0px;

margin: 0px 0 10px 0;

position: relative;

}

Для элементов списка заданы стили: размер шрифта 20 пикселей, шрифт Garamond, и блок будет вести себя как линейный элемент.

.bmenu li{

font-size: 20px;

font-family: Garamond, serif;

display: inline;

}

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

.bmenu li a{

display: inline;

text-transform: uppercase;

text-shadow: 0px 0px 2px #eeb213;

color: #eeb213;

padding: 5px 10px 0px 50px;

margin: 0px;

background: rgba(0,0,0,0.7);

letter-spacing: 1px;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

}

Прописаны стили для наведения на меню: тень у текста, цвет прозрачный, цвет фона полупрозрачный.

.bmenu:hover li a{

text-shadow: 0px 0px 10px #eeb213;

color: transparent;

background: rgba(0,0,0,0.2);

}

Стили при наведении на ссылку меню: задан фон и тени.

.bmenu li a:hover{

background: rgba(0,0,0,1.0);

text-shadow: 0px 0px 1px #eeb213;

}

Блок footer - это подвал сайта. Для него заданы стили: внутренние отступы по бокам в 10 пикселей, задан цвет фона.

.footer {

padding: 10px 0;

background: #6F7D94;

}

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

Стили для меню: внутренние отступы 10 пикселей, внешние отступы 5 и 10 пикселей, позиционирование исходя из местоположения. Для ссылок меню указан размер шрифта, шрифт, поведение линейного элемента, белый цвет шрифта.

.fmenu {

padding: 10px;

margin: 5px 0 10px 0;

position: relative;

}

.fmenu li{

font-size: 15px;

font-family: Garamond, serif;

display: inline;

color: white;

}

.fmenu li a{

color: white;

}

Для блока даты заданы стили: цвет, выравнивание по правому краю, отступы внешние, отступы внутри.

.data{

color:#FFF;

float:right;

margin: 5px 0 10px 0;

position: relative;

padding: 10px;

}

Результат:

Рисунок – прототип сайта

При изменении разрешения экрана главное меню начинает съезжать:

Рисунок – дефект при разработке меню сайта

Поэтому к стилям добавлено: если максимальная ширина становится меньше указанной, то элементы меню становятся блоками.

@media screen and (max-width: 1340px) {

.bmenu li{

font-size: 30px;

display: block;

border:0px;

}

.bmenu li a{

display: block;

}

Результат:

Рисунок – корректное меню сайта

На всех страницах сайта содержание примерно одинаковое и вышеописанные стили применяются ко всем страницам.

Страницы сайта

Главная:

Рисунок – главная страница сайта

Страница студенту:

Рисунок – страница сайта для студентов

Страница сотруднику:

Рисунок – страница сайта для сотрудников

Страница обратная связь:

Рисунок – страница сайта для обратной связи

Заключение

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

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

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

Список литературы

Дронов В.А., HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов — БХВ-Петербург, 2011— 414 с.
Комолова Н.В. HTML., Самоучитель — П.: «Питер», 2011— 285 с.
Старыгин А.А., XML. Разработка Web-приложений — БХВ-Петербург, 2009
С. Холзнер, XML., Энциклопедия — П.: «Питер», 2009 — 559 с.
Э. Фримен, Э. Фримен. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — П.: «Питер», 2010. — 656 с.
Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М.: «Диалектика», 2011. — 400 с.
Питер Лабберс, Брайан Олберс, Фрэнк Салим. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. — М.: «Вильямс», 2011. — 272 с.
Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М.: «Диалектика», 2010. — 656 с.
Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. 1-е изд. — М.: «Питер», 2010. — 656 с.
HTML specifications // World Wide Web Consortium URL: https://www.w3.org/html/ (дата обращения: 13.07.2018).
Specification of HTML 4.0 // World Wide Web Consortium URL: https://www.w3.org/TR/REC-html40-971218/conform.html#deprecated (дата обращения: 13.07.2018).
Linked information systems // World Wide Web Consortium URL: https://www.w3.org/History/1989/proposal.html (дата обращения: 13.07.2018).
Design Issues // World Wide Web Consortium URL: https://www.w3.org/DesignIssues/ (дата обращения: 13.07.2018).
Index of Elements // World Wide Web Consortium URL: https://www.w3.org/TR/1999/REC-html401-19991224/index/elements (дата обращения: 13.07.2018).
Hypertext Markup Language (HTML) A Representation of Textual Information and MetaInformation for Retrieval and Interchange // World Wide Web Consortium URL: https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt (дата обращения: 13.07.2018).

Приложение А. Программный код разработанного веб-сайта

<!DOCTYPE HTML>

<html>

<head>

<title>Кафедра информационных технологий</title>

</head>

<body>

<h1 id="heder_H1">Кафедра информационных технологий</h1>

<ul class="bmenu"><!--

--><li><a href="index.html" target="_blank">Главная</a></li><!--

--><li><a href="stydent.html" target="_blank">Студенту</a></li><!--

--><li><a href="abityr.html" target="_blank">Абитуриенту</a></li><!--

--><li><a href="sotr.html" target="_blank">Сотруднику</a></li><!--

--><li><a href="contact.html" target="_blank">Обратная связь</a></li><!--

--><li><a href="autor.html" target="_blank">Об авторе</a></li><!--

--></ul>

</div>

<h1>Информационные технологии</h1>

<p>Кафедра «Информационные технологии» была создана в 1997 году. Исполняющим обязанности заведующего кафедрой был назначен профессор кафедры ПМ и ВТ Соболь Б.В., который является заведующим в настоящее время.</p>

<p>ПНа кафедре реализуются направления бакалавриата и магистратуры. Выпускники кафедры продолжают образование по послевузовским программам.</p>

<p>В 2002 году на базе «ДГТУ» организовано структурное подразделение кафедры «Информационные технологии» «Центр факультативной компьютерной подготовки».</p>

<p> В настоящее время кафедра «Информационные технологии» входит в состав факультета «Информатика и вычислительная техника» «Донского государственного технического университета».</p>

<p>2 декабря 2009 года заместитель Председателя Правительства России А.Д. Жуков вручил премии Правительства РФ 2009 года в области образования преподавателям, ученым вузов страны. Премия присуждена за научно-практическую разработку «Методическое, организационное и научное обеспечение функционирования региональной образовательной системы «школа-вуз». Среди лауреатов премии два сотрудника кафедры «Информационные технологии» – зав. кафедрой Соболь Борис Владимирович и доцент Рашидова Елена Викторовна.</p>

</div>

Суббота 24 Февраль, 2018 9:53

<em><p> © Иванов Иван</p></em>

</div>

<li><a href="index.html">Главная</a></li>

<li><a href="student.html">Студенту</a></li>

<li><a href="abityr.html">Абитуриенту</a></li>

<li><a href="sotr.html">Сотруднику</a></li>

<li><a href="contact.html">Обратная связь</a></li>

<li><a href="autor.html">Об авторе</a></li>

</ul>

</div>

</div>

</body>

</html>

@charset "utf-8";

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background: #D3D3D3;

margin: 0;

padding: 0;

color: #000;

}

/* ~~ Селекторы элементов/тегов ~~ */

ul, ol, dl { /* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */

padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0; /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */

padding-right: 15px;

padding-left: 15px; /* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */

}

a img { /* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */

border: none;

}

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

a:link {

color: #7A7A7A;

text-decoration: none; /* если только ссылки не должны выглядеть исключительно своеобразно, то для быстрого зрительного распознавания рекомендуется использовать подчеркивание */

}

a:visited {

color: #4E5869;

text-decoration: none;

}

a:hover, a:active, a:focus { /* эта группа селекторов обеспечивает пользователю, работающему с клавиатурой, такие же возможности наведения, как и при использовании мыши. */

text-decoration: none;

color: #333;

}

/* ~~ этот контейнер окружает все остальные контейнеры DIV, задавая их ширину на процентной основе ~~ */

.container {

width: 90%;

max-width: 1260px;/* желательно задать максимальную ширину, чтобы макет не стал слишком широким на большом экране. Это повышает удобство чтения строк. В IE6 это объявление не соблюдается. */

min-width: 780px;/* желательно задать минимальную ширину, чтобы макет не стал слишком узким. Это повышает удобство чтения строк в боковых столбцах. В IE6 это объявление не соблюдается. */

background: #FFF;

margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет. Это необязательно, если ширина контейнера составляет 100 %. */

}

/* ~~верхнему колонтитулу не задана ширина. Он растянется по всей ширине макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке~~ */

.header {

background: linear-gradient(to bottom, rgba(72, 85, 108, 0.87), rgb(27, 33, 43));

}

#Insert_logo{

margin: 5px;

}

#heder_H1{

color: #d3d3d3;

float: right;

font-family: Garamond, serif;

font-size: 50px;

font-weight: normal;

}

.bmenu{

padding: 0px;

margin: 0px 0 10px 0;

position: relative;

}

.bmenu li{

font-size: 20px;

font-family: Garamond, serif;

display: inline;

}

.bmenu li a{

display: inline;

text-transform: uppercase;

text-shadow: 0px 0px 2px #eeb213;

color: #eeb213;

padding: 5px 10px 0px 50px;

margin: 0px;

background: rgba(0,0,0,0.7);

letter-spacing: 1px;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

}

.bmenu:hover li a{

text-shadow: 0px 0px 10px #eeb213;

color: transparent;

background: rgba(0,0,0,0.2);

}

.bmenu li a:hover{

background: rgba(0,0,0,1.0);

text-shadow: 0px 0px 1px #eeb213;

}

/* ~~ Информация по макету. ~~

1) Поля размещены только вверху и/или внизу DIV. Элементы в этом DIV имеют боковые поля. Это избавляет пользователя от необходимости расчетов рамочной модели. Помните, что при добавлении боковых полей или границы к самому DIV их ширина будет добавлена к задаваемой ширине, что образует "полную" ширину. Кроме того, можно удалить поля элемента в DIV и поместить внутри него второй DIV без ширины и с необходимыми по проекту полями.

.content {

padding: 10px 0;

}

/* ~~ Этот сгруппированный селектор выдает списки в пространстве .content ~~ */

.content ul, .content ol {

padding: 0 15px 15px 40px; /* это поле зеркально повторяет правое поле в правиле для заголовков и параграфов выше. Внизу поле помещено как граница между элементами списков, а слева — как отступ. Поля можно настраивать по желанию. */

}

/* ~~ Нижний колонтитул ~~ */

.fmenu {

padding: 10px;

margin: 5px 0 10px 0;

position: relative;

}

.fmenu li{

font-size: 15px;

font-family: Garamond, serif;

display: inline;

color: white;

}

.fmenu li a{

color: white;

}

.data{

color:#FFF;

float:right;

margin: 5px 0 10px 0;

position: relative;

padding: 10px;

}

.footer {

padding: 10px 0;

background: #6F7D94;

}

/*style table*/

.table{

margin: 0 auto;

}

th, caption {

font-size: 13px;

font-weight: normal;

background: #b9c9fe;

border-top: 4px solid #aabcfe;

border-bottom: 1px solid #fff;

color: #039;

padding: 8px;

}

td {

background: #e8edff;

border-bottom: 1px solid #fff;

color: #669;

border-top: 1px solid transparent;

padding: 8px;

}

tr:hover td {background: #ccddff;

}

/*end style table*/

/*style form*/

.decor {

position: relative;

max-width: 600px;

margin: 50px auto 50px;

background: #CAE9EE;

border-radius: 30px;

}

.form-left-decoration,

.form-right-decoration {

content: "";

position: absolute;

width: 50px;

height: 20px;

background: while;

border-radius: 20px;

}

.form-left-decoration {

bottom: 60px;

left: -30px;

}

.form-right-decoration {

top: 60px;

right: -30px;

}

.form-left-decoration:before,

.form-left-decoration:after,

.form-right-decoration:before,

.form-right-decoration:after {

content: "";

position: absolute;

width: 50px;

height: 20px;

border-radius: 30px;

background: #CAE9EE;

}

.form-left-decoration:before {top: -20px;}

.form-left-decoration:after {

top: 20px;

left: 10px;

}

.form-right-decoration:before {

top: -20px;

right: 0;

}

.form-right-decoration:after {

top: 20px;

right: 10px;

}

.circle {

position: absolute;

bottom: 80px;

left: -55px;

width: 20px;

height: 20px;

border-radius: 50%;

background: #CAE9EE;

}

.form-inner {padding: 60px;}

.form-inner input,

.form-inner textarea {

display: block;

width: 100%;

padding: 0 17px;

margin-bottom: 10px;

background: #E9EFF6;

line-height: 40px;

border-width: 0;

border-radius: 20px;

font-family: 'Roboto', sans-serif;

}

.form-inner input[type="submit"] {

margin-top: 30px;

background: #f69a73;

border-bottom: 4px solid #d87d56;

color: white;

font-size: 14px;

}

.form-inner textarea {resize: none;}

.form-inner h3 {

margin-top: 0;

font-family: 'Roboto', sans-serif;

font-weight: 500;

font-size: 24px;

color: #707981;

}

/*end style form*/

/* ~~ прочие классы float/clear ~~ */

.fltrt { /* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */

float: right;

margin-left: 8px;

}

.fltlft { /* этот класс можно использовать для обтекания элемента слева на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */

float: left;

margin-right: 8px;

}

.clearfloat { /* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если .#footer удален или извлечен из #container */

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

@media screen and (max-width: 1340px) {

.bmenu li{

font-size: 30px;

display: block;

border:0px;

}

.bmenu li a{

display: block;

}

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

Введение

Общая информация о HTML

HTML 1.0 и 2.0

HTML 3.0

HTML 4.0

XHTML

Затем W3C опубликовал XHTML 1.1.

HTML 5

Выводы

Программные объекты языка гипертекстовой разметки

Общая структура документа

Атрибуты тела документа

Форматирование текста

Размер шрифта

Гиперссылки

Комментарии

Выводы

Заключение

Список литературы