МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ
імені Володимира Даля
Кафедра компьютерных наук
По дисциплине
Компьютерній дизайн и мультимедия
СтудентБолдакова И.В.
1. Вступление
3.1 HTML-редакторы
4. Создание сайта при помощи CMS Joomla 1.5.7
Литература
1. ВступлениеWorld Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW.Вся информация в Web-браузере отображается в виде Web-страниц.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.
Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера.
Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера. И я, в данном случае, не являюсь исключением, потому и выбрала такую тему для своей курсовой работы.
В своем реферате я сделала попытку разобраться в том, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение является инструментарием создания Web-страниц и как его эффективно использовать.
Также в данной работе мною рассмотрены основы языка программирования Web-страниц - HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления. А так же при помощи CMS Joomla мы рассмотрим создание сайта.
2. Рассмотрим язык гипертекстовой разметки HTMLWeb-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы.
Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Opera, Google Chrome, Internet Explorer или другими браузерами.
Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.
HTML был ратифицирован World Wide Web Consortium. Он поддерживается всеми браузерами.
Поскольку HTML-документы записываются в ASCI I-формате, то для ее создания может использован любой текстовый редактор.
Обычно HTML-документ - это файл с расширением.html или. htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.
Все теги начинаются символом "". Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:
Информация
Здесь стартовым тегом является тег
А завершающим -
. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках стоит символ "/ " (слэш).Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:
A) Объявление HTML;
B) Заголовачная часть;
C) Тело документа.
A) Объявление HTML
и . Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег (в самом начале документа), а последним - (в самом конце документа).
B) Заголовочная часть.
и . Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами и .
Моя первая страница
C) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами и . Первый из них должен стоять сразу после тега , а второй - перед тегом . Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML.
Моя первая страница ..........
Теперь мы можем написать HTML-код нашей странички:
Моя первая страница Здесь будут мои страницы!
В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов. Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не будет абзацев, и он станет нечитаемым.
Для начала новой строки используется тег
(сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.
Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег
(англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение
В отличие от
, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.
Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута ="значение ". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег
Может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег
. Если его нет, то новый тегОзначает закрытие предыдущего, соответственно вложенные
Невозможны. Выравнить текст по центру возможно также тегом .
Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:
Моя первая страница
Здесь будут мои личные страницы!
На них Вы сможете найти: - рассказ обо мне и о моих увлечениях; - мои фотографии.
С одной из моих страниц можно будет
отправить мне электронное письмо.
3. Инструментарий для создания Web-страниц 3.1 HTML-редакторы
Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).
Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста., в общем, работать крайне неудобно.
Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое. Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.
Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.
HyperText Markup Language (HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ – это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документагиперссылок – специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Microsoft FrontPage, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.
Альтернативой служит создание и разметка документа при помощи обычного редактора текста (NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.
Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги (markup tags), называемые такжефлагами разметки , – специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html.
Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:
Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:
Атрибуты тега записываются в следующем формате:
имя[="значение"]
Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером , а часть текста, окаймленную открывающим и закрывающим тегом, –элементом .
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
Структура HTML-документа
Самым главным из тегов HTML является одноименный тег – . Он должен всегда открывать ваш документ, так же, как тег должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.
HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:
В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов , при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга
Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).
Заголовок документа открывается тегом , который обычно следует сразу же за тегом . Закрывающий тег показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.
Чаще всего в заголовок документа включают парный тег ... , определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами. Тело документа
В отличии от заголовка, тело документа является обязательным элементом, так как в нем располагается весь материал вашего документа (есть только одно исключение, с которым мы познакомимся далее, -- когда документ содержит вместо тела группу фреймов). Тело документа размещается между тегами и . Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML, позволяющими корректно отображать страницу на экране монитора.
Тег не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов, которые приведены в таблице.
Моя страничка Тело документа
Определение цвета составных частей документа – один из первых шагов в его создании. Если этого не сделать, то будут использоваться цвета по умолчанию, определяемые установками браузера. Не существует каких-либо правил создания хорошо сбалансированной цветовой палитры документа. Нужно лишь заботиться о том, чтобы можно было прочитать текст, не испытывая при этом неудобств. При выборе цветовой палитры старайтесь поддерживать высокую контрастность текста и фона и избегайте соседства областей с близкими цветами.
Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных браузеров может распознать цвет и без указания символа #).
Ниже представлена таблица 16 стандартных цветов вместе с их шестнадцатеричными кодами.
|
black (черный) |
silver (серебряный) | ||
|
maroon (темно-бордовый) |
red (красный) | ||
|
green (зеленый) |
lime (известь) | ||
|
olive (оливковый) |
yellow (желтый) | ||
|
navy (темно-синий) |
blue (синий) | ||
|
purple (фиолетовый) |
fuchsia (фуксия) | ||
|
teal (сине-зеленый) | |||
|
gray (серый) |
white (белый) |
Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального документа игнорируются, в результате чего текст, отлично смотревшийся в окне вашего редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.
Избежать этой неприятности позволяет разделение на абзацы при помощи тега .Разместите его в начало каждого абзаца, и программа просмотра отделит абзацы друг от друга пустой строкой. Использование закрывающего тега
необязательно. Несколько стоящих подряд тегов не дают дополнительного пространства между абзацами.Иногда требуется "разорвать" текст,
перенеся его остаток на новую строку,
при этом не выделяя нового абзаца. Для
этого используется тег разрыва строки
.Он заставляет программу просмотра
выводить стоящие после него символы с
новой строки. В отличие от тега абзаца,
тег
не добавляет пустую строку. У этого тега
нет парного закрывающего тега.
Пример
Иосиф Бродский
Откуда
к нам пришла зима,
не знаешь ты, никто не знает.
Умолкло
все. Она сама
холодных губ не разжимает.
Некоторые браузеры интерпретируют
несколько стоящих рядом тегов
как один тег, поэтому не стоит использовать
его для вставки пустых строк.
Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка.
Хотя язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт), не все браузеры их поддерживают. Однако все браузеры поддерживают тот или иной способ выделения текста. Поэтому использование логического форматирования текста в любом случае приведет к выделению программой просмотра различных частей текста и выявит структуру документа.
Название документа, задаваемое с помощью тега , не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков:H1(заголовок первого уровня),Н2, Н3, H4, Н5иH6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.
Пример
Заголовки
Заголовок 1 уровня
Заголовок 2 уровня
Заголовок 3 уровня
Заголовок 4 уровня
Заголовок 5 уровня
Заголовок 6 уровня
Помните, что если вы забудете поставить закрывающий тег заголовка, вид страницы будет искажен: любой из тегов заголовка автоматически вставляет пустую строку до и после себя.
Одним из отличий HTML-документа от документа, подготовленного на печатной машинке, является возможность форматирования текста. Язык HTML позволяет автору документа выбрать понравившийся ему шрифт, подходящий размер букв, их цвет и начертание. За все эти параметры отображения текста отвечают теги физического форматирования. Они действуют на все символы, стоящие между открывающим и закрывающим тегами.
|
Теги |
Применение |
Результат |
|
Полужирный |
Полужирный |
|
|
Курсив |
Курсив |
|
|
Подчеркнутый |
Подчеркнутый |
|
|
|
Пишущая машинка |
Пишушая машинка |
|
Зачеркнутый |
Зачеркнутый |
|
|
|
Большой | |
|
|
Маленький |
Маленький |
|
|
Верхний -- xиндекс |
Верхний -- x индекс |
|
|
Нижний -- xиндекс |
Нижний -- x индекс |
Элементы физического форматирования могут быть вложенными друг в друга, хотя конечный результат зависит от браузера. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере, например,
жирный и подчеркнутый текст
Кроме вышеперечисленных тегов в документе может использоваться тег , позволяющий непосредственно задать размер и цвет шрифта. Элемент FONTпредставляет собой контейнер, т. е. требует как открывающего, так и закрывающего тегов, и сам может использоваться внутри любого другого текстового контейнера.
После стартового тега обязательно указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер.
Атрибут FACEпозволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таковым располагает пользователь). Если нужного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию.
Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа.
Атрибут SIZEслужит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2.
Атрибут COLORустанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.
Пример
Текст красного цвета и
Несмотря на то, что в состав HTML-документа входят самые различные компоненты, можно сказать, что гипертекстовые ссылки - основа WWW. Если бы Web-страницы не ссылались друг на друга, содержимое Web превратилось бы в обычный набор файлов, не связанных между собой.
Для создания гипертекстовой ссылки используется пара тегов .... Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения
фрагмент документа
HREFздесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибутаHREFне обязательны.
Текстовые указатели, т. е. фрагменты текста, являющиеся ссылками, не отличаются разнообразием внешнего вида. Обычно такой указатель представляет собой слово или слова, подчеркнутые прямой линией. Цвет указателя может регулироваться автором и установками программы просмотра.
Графические указатели, т. е. изображения-ссылки, выделяются рамкой того же цвета, что и текстовые указатели.
Пример
В настоящее время стандарты HTML поддерживают теги для списков трех различных видов: нумерованных (упорядоченных), маркированных (неупорядоченных) и списков определений. Списки и элементы списков являются блочными элементами. Это означает, что перед ними и после них автоматически добавляются пустые строки.
Язык HTML допускает вложенность любых видов списков. Для этого размещают одну пару тегов (стартовый и завершающий) внутри другой. Следует помнить о том, что все имеющиеся списки должны завершаться закрывающим тегом.
Нумерованные (упорядоченные) списки используют, когда важен порядок вывода элементов списка. Браузер автоматически вставляет номера элементов по порядку, в исходном HTML-тексте номера не печатаются. Если количество элементов списка изменится (в результате удаления или добавления новых элементов), то нумерация автоматически обновится.
Весь нумерованный список заключается между парой тегов , а каждый элемент списка расположен между тегами
Маркированный (неупорядоченный) список используется для представления коллекции элементов, порядок вывода которых не важен. При выводе маркированных списков браузер автоматически вставляет специальные значки (маркеры), отмечающие каждый элемент списка.
Маркированный список начинается стартовым тегом
- и завершается тегом
Пример
Любой список может быть частью другого списка, вложен в другой список. Считается полезным использование сдвигов при подготовки текста исходного HTML-документа, чтобы четко представлять уровни вложенности списков.
При выводе вложенных маркированных списков браузер автоматически проставляет маркеры перед элементами, находящимися на разных уровнях вложенности.
Таблица – эффективный способ отображения статистических данных или информации, которую удобнее представлять именно в таком виде. Данные таблицы хранятся в ячейках, являющихся отдельными полями, из которых состоят строки и столбцы таблицы. Надписи, которые размещаются над столбцами и описывают их содержимое, называют шапкой таблицы.
При формировании таблицы применяется несколько парных тегов.
и . Определяют начало и конец ячейки шапки таблицы.
Кроме того, с помощью тега , размещаемого внутри тега
| Eлена | Heт | Да |
| 1 |
То есть, для понимания сути этих строк можно представить себе такую ситуацию – файлы CSS и JavaScript на сервере лежат, но без этих строк в документе они просто не будут работать. Небольшой нюанс для использования этих тегов – файлы могут быть как на локальном сервере, так и на удаленном. В последнем случае в мета-тегах необходимо указать полный путь к файлам. В нашем примере мета-тег link используется для подключения файла CSS и использует ссылочные отношения (link relation). Эта подпись дает знать браузеру, что данный файл является файлом стилей. Тег rel имеет также множество других значений.
Альтернативой первому варианту подключения файла стилей может быть такая строка:
| 1 2 3 4 | a { text-decoration : underline ; } p { color : #000000 ; } |
a { text-decoration: underline; } p { color: #000000; }
Такой способ напрямую подключает стиль к странице, без подключения файла стилей.
Самый значимый тег в HTML документе – тег . Он также имеет закрывающее окончание . Все данные, которые содержатся внутри этого тега, определяют содержимое страницы – её контент, изображения на странице, всю ссылочную массу, содержащуюся в тексте и т.д. Таким образом, вся информация, которая располагается до тега , можно заключить в своего рода неизменяемый шаблон. Содержимое же тела — может редактироваться, заменяться, улучшаться.
После рассмотрения всех составляющих HTML-документа пятой версии можно попробовать собрать все отдельные части в одно целое, которое и будет законченным HTML-документом, то есть – страницей некоего сайта. Вот так будет выглядеть страница в законченном виде:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < !DOCTYPE HTML> Design Shack |
< !DOCTYPE HTML> Design Shack
Современные информационные Web технологии быстро изменяют наш мир и непосредственно влияют на развитие Web-технологий. Эта технологическая революция сильно повлияла не только на бизнес, но также на частную и профессиональную жизнь. Новейшие Web-технологии проникают во все сферы жизни общества, изменяют способы общения и принципы ведения Web-проектов современных компаний, определяя судьбу последних. Внутренняя сложность и предельная простота применения современных информационные Web технологии делает их доступными каждому, кто ежедневно сталкивается с применением их в своей профессиональной деятельности.
И в быту, и в бизнесе, в переписке и торговле люди и организации используют Web, создают собственные Web-узлы, где предлагают информацию, товары и услуги. Средства создания Web-ресурсов развиваются стремительно и без остановок, позволяют создавать сложные Web-документы, не требуя специальных знаний об их структуре и внешнем виде, освобождая время для продуктивной творческой деятельности. Главное преимущество Web-технологий в современных условиях заключается в их простоте и как следствие в повышении эффективности их применения.
Язык гипертекстовой разметки HTMLПопулярность Internet во многом вызвана появлением World Wide Web (WWW), так как это первая сетевая технология, которая предоставила пользователю простой современный интерфейс для доступа к разнообразным сетевым ресурсам. Простота и удобство применения привели к росту числа пользователей WWW и привлекли внимание коммерческих структур. Далее процесс роста числа пользователей стал лавинообразным, и так продолжается до сих пор. На основе необходимости объединить все множество информационных ресурсов начала развиваться технология при помощи, которой определяется гипертекстовая навигационная система. Этой технологией стал язык HTML. Технология HTML на начальном этапе была чрезвычайно проста, и практически все пользователи сети одновременно получили возможность попробовать себя в качестве создателей и читателей информационных материалов, опубликованных во Всемирной паутине. Дело в том, что при разработке различных компонентов технологии предполагалось, что квалификация авторов информационных ресурсов и их оснащенность средствами вычислительной техники будут минимальными.
Язык HTML (HyperText Markup Language, язык разметки гипертекста) относится к числу так называемых языков разметки текста (markup languages). Под термином "разметка" понимается общая служебная информация, которая не выводится вместе с документом, но определяет; как должны выглядеть те или иные фрагменты документа. Например, вы можете потребовать, чтобы какое-либо слово выводилось жирным или курсивным шрифтом, вывести отдельный абзац особым шрифтом или оформлять заголовки увеличенным шрифтом.
В наши дни существует множество разных языков разметки. Например, в коммуникационных программах особая форма разметки определяет смысл каждого пакета из нулей и единиц, пересылаемого в Internet. Впрочем, любой язык разметки должен решать две важные задачи:
1) язык определяет синтаксис разметки;
2) язык определяет смысл разметки.
Наиболее распространенным из языков разметки Web-страниц является HTML. Это язык разметки был создан и рекламировался как одна из конкретизаций SGML. Впервые предложенный в 1974 году Чарльзом Голдфарбом и в дальнейшем после значительной доработки принятый в качестве официального стандарта ISO, SGML (Standard Generalized Markup Language, Стандартный обобщенный язык разметки) представляет собой метаязык - систему для описания других языков.
Появление стандарта SGML было обусловлено необходимостью совместного использования данных разными приложениями и операционными системами. Даже в далеких 60-х годах у пользователей компьютеров возникало немало проблем с совместимостью. Проанализировав недостатки многих нестандартных языков разметки, трое ученых из IBM -- Чарльз Гольдфарб (Charles Goldfarb), Эд Мо-шер (Ed Mosher) и Рэй Лори (Ray Lorie) -- сформулировали три общих принципа, обеспечивающих возможность совместной работы с документами в разных операционных системах.
1) Использование единых принципов форматирования во всех программах, выполняющих обработку документов. Вполне логичное требование -- всем нам хорошо известно, как трудно договориться между собой людям, говорящим на разных языках. Наличие единого набора синтаксических конструкций и общей семантики заметно упрощает взаимодействие между программами.
2) Специализация языков форматирования. Благодаря возможности построения специализированного языка на базе набора стандартных правил программист перестает зависеть от внешних реализаций и их представлений о потребностях конечного пользователя
3) Четкое определение формата документа. Правила, определяющие формат документа, задают количество и маркировку языковых конструкций, используемых в документе. Применение стандартного формата гарантирует, что пользователь будет точно знать структуру содержимого документа. Обратите внимание: речь идет не о формате отображения документа, а о его структурном формате. Набор правил, описывающих этот формат, называется "определением типа документа" (document type definition, DTD).
Эти три правила были заложены в основу предшественника SGML -- GML (Generalized Markup Language). Исследования и разработка GML продолжались около десяти лет, пока в результате соглашения, заключенного международной группой разработчиков, не появился стандарт SGML.
HTML (Hypertext Markup Language, Язык разметки гипертекста) -- это компьютерный язык, лежащий в основе World Wide Web. HTML основан на стандарте SGML гипертекстовый язык разметки документов для их представления в Web. Стандарты языка HTML, одного из ключевых стандартов Web, разрабатываются и поддерживаются консорциумом W3C. Основателем этого международного консорциума является Тим Бернес-Ли (Tim Berners-Lee). Консорциум помимо создания стандартов форматирования, является центром разработки Semantic Web (семантическая сеть). Средствами языка HTML обеспечивается форматная разметка документов, определяются гиперсвязи между документами и/или их фрагментами.
В качестве основы написания кода HTML был выбран обычный текстовый файл. Таким образом, гипертекстовая база данных в концепции WWW -- это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки).
Разработчики HTML смогли решить две задачи:
· предоставить дизайнерам гипертекстовых баз данных простое средство создания документов;
· сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных.
Первая задача была решена за счет выбора теговой модели описания документа. Язык HTML позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее. В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.
Вторым важным моментом, повлиявшим на судьбу HTML, стало то, что в качестве основы был выбран обычный текстовый файл. Среда редактирования HTML является нейтральной полосой между простейшим текстовым файлом и приложением WYSIWYG (what you see is what you get - что вы видите, то и получаете). Выбор среды редактирования дает все преимущества текстового редактирования.
Гипертекстовые ссылки, устанавливающие связи между текстовыми документами, постепенно стали объединять самые различные информационные ресурсы, в том числе звук и видео. Система гиперссылок HTML позволяет построить систему взаимосвязанных документов по различным критериям. Язык HTML содержит команды (тэги), позволяющие управлять формой и размером шрифтов, размером и расположением иллюстраций, позволяет осуществлять переход от фрагмента текста или иллюстрации к другим html - документом - так называемую гипертекстовую ссылку. Документ в html - формате представляет собой текстовый файл, содержащий все необходимые сведения о выводимой на экран информации. Для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев, например, JavaScript, Java и VBScript. Формы для введения пользователем данных, которые позднее подвергаются обработке и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl). Язык HTML позволяет помещать на страницы гипертекстовые ссылки и интерактивные кнопки, которые соединяют ваши Web-страницы с другими страницами того же Web-сайта, равно как и с другими Web-сайтами по всему миру.
HTML является языком разметки текста, а не языком программирования, который всего лишь один из инструментов (точнее, язык описания страниц), используемый при создании Web-страниц. В HTML ограничены возможности форматирования текста по сравнению с возможностями издательских программам, особенно при издании текста, насыщенного сложными элементами.
До сих пор нет настолько удобных редакторов HTML, чтобы можно было бы обойтись без текстового редактора и ручной расстановки тэгов. Это усложняет работу с языком, делает необходимым овладение ими совершенно несвойственных им функций.
Анализируя особенности языка HTML и оценивая уровень его проработки, можно прийти к выводу, что уже в ближайшие годы следует ожидать появления более совершенных его модификаций, новых языков и прикладных пакетов для работы с web-страницами.
Динамический и статический HTML-документы
Различают два вида html-документов - статические и динамические. Статические документы хранятся в файлах той файловой системы, которая используется web-сервером или браузером при просмотре локальных файлов. При размещении информации на web-сервере можно использовать динамические документы - такие, которые не существуют постоянно в виде файлов, а генерируются в момент запроса клиента. При чем для конечного пользователя не имеет значения динамический или статический способ представления документов.
Для генерирования динамического документа HTML требуется специально написанная программа по правилам, определяемым web-сервером. При планировании размещения информации на web-сервере, для правильного определения использования, какого либо вида документов, необходимо учитывать степень обновляемости данных, их объем и частоту обращения.
Динамический способ определяет хранение данных в формализованном виде, например в базе данных.
Если же данные хранятся в формализованном виде, то, используя шаблоны документов, в которых были произведены изменения, генерируются статические документы. Для генерирования статических документов можно использовать любые средства отчетов, имеющихся в той системе управления баз данных (СУБД), которой обработаны и формализованы данные.
Перспективы HTML
Новых версий языка HTML не будет, однако существует дальнейшее развитие HTML под названием XHTML (англ. Extensible Hypertext Markup Language -- расширяемый язык разметки гипертекста). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, соответствует спецификации XML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 26 января 2000 года. Необходимо, однако, учесть одну серьезную деталь - в этом формате создано большое количество информационных ресурсов, что они долго еще будут "пониматься" web-браузерами и использоваться в своем первозданном виде. Кроме того, все новые форматы будут разрабатываться (и уже разрабатываются - например XML) с поддержкой технологий HTML.
Стиль работы меняется, меняются и средства доступа к содержимому. Язык HTML уже изначально создавался как платформо - независимый язык. Новые технологии применяются практически везде и довольно скоро пространство World Wide Web перестанет быть достоянием лишь пользователей настольных персональных компьютерах, уже сейчас некоторые пользователи активно пользуются голосовыми браузерами для незрячих или браузерами, использующими азбуку Бройля, зачастую содержимое выводится не на монитор компьютера, а в телевизор, когда применяются приставки с выходом в сеть или на телетайп, или на монохромные дисплеи различных организаторов-пейджеров и прочие.
Для создания электронных обучающих программ чаще всего используется язык гипертекстовой разметки документов (HTML).
Данный выбор обусловлен тем, что наряду с простотой создания данного вида документов, язык гипертекстовой разметки обладает колоссальными возможностями, такими, как вывод форматированного текста, использование графических объектов практически всех известных форматов, использование фонового рисунка, вставка таких объектов, как фоновый звук, видео и т.д.
Кроме этого, HTML позволяет легко организовывать ссылки на другие объекты или фрагменты текста самого документа .
Большим преимуществом HTML является то, что большинство современных инструментальных средств (такие, как, текстовые и графические редакторы, языки визуального программирования, Internet Explorer...) поддерживают работу и сохранение документов в HTML формате.
Поэтому зачастую именно HTML используется для создания подобных программных продуктов. Однако создание различного вида демонстрационных примеров, процедур тестирования и опроса, на мой взгляд, делается все же проще с помощью языков визуального программирования.
Поэтому в настоящей дипломной работе рассматриваются вопросы интеграции различных инструментальных средств, для создания обучающих, тестирующих программ и электронных учебников.
Тем не менее, использование HTML документов во многом облегчает написание теоретической части программы и делает ее более живой. Давайте рассмотрим несколько вопросов, связанных с созданием HTML документов. Можно работать на Web без знания языка HTML, так как тексты HTML могут создаваться различными специальными редакторами и конвертерами.
Однако лучше писать непосредственно на HTML или, по крайней мере, изредка контролировать и модифицировать код HTML. Писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или производят плохой HTML код, который не работает на различных платформах .
Первая версия HTML была разработана в начале 90-х годов Тимом Бенерс-Ли для популярного в прошлом броузера Mosaic. Но в те времена ни для броузера, ни для самого языка еще не нашлось достойного применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Начало широкому использованию гипертекста дала версия 2.0, которая появилась в июне 1994 года.
Это был момент начала роста популярности WWW по всему миру. Элементы, включенные в версию 2, в большинстве своем используются и по сей день .
В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д.) при помощи элементов языка. Под эту версию разрабатывались и броузеры (Arena). Но этот проект оказался тупиковым и не получил дальнейшего распространения .
В 1996 году появился HTML версии 3.2. Это было новаторское решение, достаточно упомянуть, что в спецификацию языка были введены фреймы, которые стали теперь весьма популярными у разработчиков Web-страниц.
Даже сейчас на основе этой спецификации можно реализовывать очень неплохие дизайнерские решения. Практически все современные броузеры стопроцентно поддерживают версию 3.2, поэтому у авторов не возникают сомнения по поводу работоспособности заявленных элементов.
Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум), компании-производители броузеров создавали собственные элементы (расширения).
Впоследствии некоторые из этих элементов, после получения всеобщего признания, включались в спецификацию следующей версии языка. Интересно, например, что новаторское решение - фреймы, -- которое так полюбилось многим разработчикам, не было включено спецификацию 3.2.
Но броузеры поддерживали фреймы, и многие книги, посвященные HTML, содержали описания фреймов без упоминания о том, что это нестандартные элементы. И это было правильно, потому что фреймы стали стандарте де-факто . В версию языка 4 они уже были включены на полном основании.
И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другbми программными кодами, в версии 3.2 не сыграли той роли, которую были призваны сыграть.
Это объяснялось тем, что броузеры различных версий по-разному интерпретировали программы на языках Java, JavaScript, Visual Basic VBScript. В результате не удавалось получить достаточно надежно работающий код, и данные языки использовались любителями HTML в основном для экспериментов.
Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.
Появившиеся в то время броузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был достигнут определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии броузера, чтобы потом использовать тот или иной фрагмент кода.
Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящее время броузерах. Кроме того, актуальной остается проблема использования старых или не очень популярных программ. Лидерами "броузеростроения" по праву считаются компании Microsoft и Netscape, но ведь существуют еще и другие фирмы .
В результате использование всех возможностей Dynamic HTML стало yдeлoм программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных Web-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.
Анатомия Web-страницы
Ниже показана заготовка типичного Web-документа. На этом примере мы рассмотрим структуру HTML-страниц.
Пример (шаблон) Web-страницы
Структура Web-страницы
H2 {font-family: Arbat;}
CODE {font-family: Arial;}
Если рассмотреть исходные тексты различных Web-страниц, то можно легко увидеть схожесть их структур. Это объясняется тем, что документы создаются по определенным правилам.
В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 "Information processing. Text and office systems. Standard Generalized Markup Language (SGML)". Правда, существует большое различие между стандартом официальным и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами, и изучать его надо не по официальным первоисточникам, а на практике, обращаясь к последним разработкам ведущих фирм и специалистов .
Чтобы понять структуру Web-страницы, необходимо рассмотреть вес элементы, входящие в приведенный выше листинг. При рассмотрении элементов языка будем приводить оба тега: начальный и конечный.
Например: . Этим можно подчеркнуть, что в большинстве случаев разработчик должен использовать два тега для каждого элемента. Число случаев, когда допустим только начальный тег (часть элементов не имеют конечного вообще), невелико, и они специально оговариваются . Для имен тегов можно использовать как прописные, так и строчные буквы латинского алфавита.
Некоторые пользователи записывают начальные теги прописными буквами, а конечные теги -- строчными. Это помогает разобраться в исходном тексте Web-страницы.
Синтаксис HTML.
Обозначение документа на языке HTML. Выше было упомянуто о том, что одним из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница.
В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и d i r , которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY, FRAMESET и других, определяющих общую структуру Web-страницы. Естественно что конечным тегом заканчиваются все подобные документы.
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же, как предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и d i r, должен включать элемент TITLE и допускает вложение элементов BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.
Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна броузера. Эта строка часто используется при организации поиска в WWW . Поэтому авторы, создающие Web-страницы для размещения в Сети, должны позаботиться о том, чтобы эта строка, не будучи слишком длинной, достаточно точно отражала назначение документа.
Описание стиля некоторых элементов Web-страницы. В файле Strukt.htm назначены шрифты для элементов Н2 и CODE.
Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента STYLE не обязательно, но желательно.
Интересно, как синтаксис HTML отражает историю развития вычислительной техники. Например, старый, теперь уже не работающий элемент BLINK напоминает нам о тех временах, когда люди использовали дисплеи, которые имели только текстовый режим. При таком положении вещей мигание текста (blink) было, наверное, единственным достижимым визуальным эффектом .
В противоположность этому, элемент STYLE, введенный сравнительно недавно, вызывает ассоциации с программами для Windows, так как в них впервые появилось стилевое оформление текста, которое теперь невероятно популярно, и без него уже немыслима работа в таких приложениях, как Word или Excel.
Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй -- содержание.
Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего атрибута таков:
URL="http://адрес"
Этот элемент заключает в себе гипертекст, который определяет собственно Web страницу. Это та произвольная часть документа, которую разрабатывает авто страницы и которая отображается броузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных для дизайна -- атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаково серые Web-страницы вдруг расцвели яркими цветными узорами:
background="Путь к файлу фона"
Более простое оформление фона сводится к заданию его цвета:
bgcolor="#ff/?GGSS"
Цвет фона задается тремя двуразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов соответственно. Более подробно о задании цветов будет рассказано ниже.Оба приведенных выше атрибута не являются альтернативными и часто используются совместно: если по каким-либо причинам не может быть найден рисунок фона, используется цвет.
Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать соответствующий цвет текста. Для этого имеется следующий атрибут
text="#/?/?GGB5"
Для задания цвета текста гиперссылок используется следующий атрибут:
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink="#/?/?GGflS"
Можно также указать изменение цвета для последней выбранной пользователем гиперссылки:
Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют, в первую очередь, назначение Web-страницы и фантазия разработчика .
Элемент заголовка. Существует шесть уровней заголовков, которые обозначаются Н1...Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:
Горизонтальная линия (horizontal rule) -- очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Действительно, в HTML практически отсутствуют похожие конструкции, только для горизонтальной линии почему-то было сделано исключение. Правда, несмотря на некоторую скупость языка в этой области, можно придумать немало стандартных графических образов, которые разнообразили бы вид страниц .
Элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
Можно задавать толщину линии:
51ге=толщина в пикселах
Можно управлять длиной линии:
fiitifn-длина в пикселах
width=/^twa в процентам/ч
Можно выбрать цвет:
со1ог="цвет"
HTML-документ может быть очень большим, и в этом случае пользователю должна быть предоставлена возможность быстрого перемещения к нужному раздел документа . Для этого можно использовать механизм гиперссылок. Необходим также в нужных местах текста расставить соответствующие метки. Здесь мы рассмотрим только шаблон для создания меток:
Произвольный текст
В этом случае данной строке документа присваивается имя, и, следовательно, другой части документа или даже на другом документе может быть создана гиперссылка, приводящая в эту точку. Например, для перехода внутри документа можно использовать следующую конструкцию:
Переход к метке
Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускать начальную часть адреса в ссылках документа. Для использования этого элемента необходимо использовать следующую конструкцию:
Фрагмент адреса путъ // не является обязательным.
При формировании полного адреса он будет отброшен.
Так, если в тексте документа встретится относительная ссылка
