Основные теги языка гипертекстовой разметки. Языки гипертекстовой разметки SGML. XML. HTML

Язык разметки гипертекстовых страниц (HTML - Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте http://www.3w.org/. В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.

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

Информации о тегах HTML Compendium (краткое руководство по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров.

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

Пользователям Windows определенно следует проверить HomeSite, мощный и недорогой редактор HTML компании Allaire Corporation. В нем имеются средства для выделения цветами синтаксических конструкций HTML, функция FTP, контроль синтаксиса и правописания, многофайловый поиск и замещение. Кроме того, он содержит специальные команды и шаблоны для создания более сложных элементов (фреймов, сценариев JavaScript и DHTML).

При работе на компьютерах Macintosh обращают внимание на BBEdit, коммерческий HTML-редактор компании Bare Bones Software, Inc. Он действительно имеет вес среди Web-разработчиков для компьютеров Macintosh. В его состав входят удобные и быстрые HTML-инструменты, многофайловый поиск и замена, встроенная FTP-функция, поддержка 13 языков программирования, построитель таблиц, контроль синтаксиса HTML и еще множество функций.

Последние годы характеризуются резким ростом рынка авторских инструментов. HTML-редакторы класса WYSIWYG (What You See Is What You Get - что видишь, то и получишь) имеют графические интерфейсы, которые делают написание HTML больше похожим на программу редактирования текстов или разметки страницы. Первоначальной целью этих программ было освобождение пользователей от тегов HTML, наподобие того, как программы разметки страниц защищают разработчика от набора команд языка PostScript. Сегодня их значимость возросла, так как они повышают эффективность и уровень автоматизации производства документов, обеспечивая в то же время доступ к исходному тексту HTML.

Наиболее популярными в настоящее время WYSIWYG-редакторами являются: Macromedia DreamWeaver, Golive CyberStudio (только для компьютеров Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.

Документ HTML содержит текст (содержимое страницы) и встроенные теги - инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок - head и тело - body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержим документа (то, что выводится в окне браузера).

Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег будет работать так же, как . Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

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

Конечный тег имеет то же имя, что и начальный, но перед ним стоит слеш (/). Его можно рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

В некоторых случаях конечный тег не обязателен, и браузер определяет конец тега из контекста. Чаще всего опускают конечный тег <р> (абзац). Браузеры раньше поддерживали этот тег без соответствующего завершения, поэтому многие авторы Web привыкли использовать краткую форму. Это разрешено не всем тегам, и не все браузеры прощают их отсутствие. Поэтому, если есть сомнения, включите в текст закрывающий тег. Это особенно важно, когда в документе вы используете каскадные таблицы стилей.

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


) и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как и .

Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных). Правила записи значения следующие:

  • - если значение представляет собой одно слово или число и состоит только из букв (a-z), цифр (0-9) и специальных символов (точка <.>
  • - если значение содержит несколько слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы "://". Также кавычки необходимы при задании значений цветов с использованием формата "#rrggbb".

Если вы не уверены, стоит ли использовать кавычки, используйте их всегда для всех значений.

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

Часто встречающейся ошибкой является перекрытие тегов. Хотя часть браузеров отображают содержимое, отмеченное таким образом, многие не разрешают нарушать правило, поэтому важно размешать теги правильно. Следующий пример показывает неверное вложение тегов (заметьте, что тег <В> закрывается перед закрытием ):

The weather is gorgeoustoday - данная информация, игнорируемая браузерами.

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

  • - разрывы строк. Символы конца строк в документе HTML игнорируются. Текст и элементы будут переноситься до тех пор, пока в потоке текста документа не встретится тег
  • - символы табуляции и множественные пробелы. Когда браузер встречает в документе HTML символ табуляции и несколько последовательных символов пробела, он выводит только один пробел. Таким образом, если документ содержит: "far, far away", браузер выведет "far, far away". Дополнительные пробелы можно добавить в текстовый поток, используя символ неразрывного пробела (Snbsp;). Кроме того, все пробелы выводятся, если текст является форматированным (находится в тегах
  • - множественные
  • - нераспознаваемые теги. Если браузер не понимает тег или тот был неверно задан, то браузер его просто игнорирует. В зависимости от тега и браузера это может привести к различным результатам. Либо браузер ничего не выведет, или он может отобразить содержимое тега как обычный текст;
  • - текст в комментариях. Браузеры не выводят текст между специальными элементами

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ

імені Володимира Даля

Кафедра компьютерных наук

По дисциплине

Компьютерній дизайн и мультимедия

СтудентБолдакова И.В.

1. Вступление

3.1 HTML-редакторы

Литература

1. Вступление

World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW.Вся информация в Web-браузере отображается в виде Web-страниц.

Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

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

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

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

Также в данной работе мною рассмотрены основы языка программирования Web-страниц - HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления. А так же при помощи CMS Joomla мы рассмотрим создание сайта.

2. Рассмотрим язык гипертекстовой разметки HTML

Web-страницы могут существовать в любом формате, но в качестве стандарта принят 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 считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.

DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" ( вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

HomeSite 4.0

Следующий редактор - HomeSite 4 - для создания страниц вручную, т.е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, Google Phrome, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему.

Еще одна отличительная особенность HomeSite - это его "склейка" с Dreamweaver. HomeSite обладает кнопкой "Dreamweaver", а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

3.2 Графические редакторы

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

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

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

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

Растровая графика представляет собой сетку (растр), ячейки которой называются пикселами. Каждый пиксел в растровом изображении имеет строго определенное местоположение и цвет, следовательно любой объект представляется программой как набор окрашенных пикселов. Это значит, что пользователь, работая с растровыми изображениями, работает не над конкретными объектами, а над составляющими их группами пикселов.

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

Для изображения растровой графики всегда используется фиксированное количество пикселов, т.е. качество растрового изображения напрямую зависит от разрешающей способности оборудования. Это значит, что любое изменение изображения (поворот, увеличение и т.д.) приводит к неизменному искажению картинки и границы объектов получаются неровными.

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

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

Графические пакеты (редакторы) тоже делятся на два типа: растровые и векторные. Давайте теперь рассмотрим наиболее популярные из них.

А) Редакторы растровой графики

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

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

Пакет предлагает, например, средства для восстановления поврежденных изображений, ретуширования фотографий или создания самых фантастических коллажей, которые только может позволить себе наше воображение. В общем, потенциал этого пакета поистине огромен. Начиная с версии 5.5 в пакет включена программа Adobe ImageReady , предоставляющие огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, "разрезание" картинок на более мелкие и т.д.). Девиз разработчиков Adobe Photoshop - "Camera of your mind" - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен.

PhotoPaint - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые инструменты для обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве работы, интерфейсе и скорости наложения фильтров - наложение происходит немного медленнее.

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

Существует еще ряд редакторов (Microsoft Photo Editor, Microsoft Photo DRAW ), также позволяющих реализовать простейшие задачи, но не удовлетворяющих запросам профессионалов.

B) Редакторы векторной графики

Adobe Illustrator - пакет позволяет создавать, обрабатывать и редактировать векторную графику. По своей мощности он эквивалентен

растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как. cdr (Corel Draw) и. swf (Flash).

CorelDraw - безусловно, такой известный графический пакет не мог обойтись без средств для обработки векторной графики. Пакет по своей мощности практически не уступает графическим редакторам Adobe Photoshop и Adobe Illustrator. Помимо обработки векторной графики, в этом пакете существует обработчик растровой графики (Photo Paint), трассировщик изображений, редактор шрифтов, подготовки текстур и создания штрихкодов, а также огромные коллекции с изображениями (CorelGallery).

Adobe Streamline - еще один продукт фирмы Adobe, предназначенный для трассировки (перевода) растровой графики в векторную. Это небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы создаете Web-страницы с использованием векторной графики, например, технологии Flash.

4. Создание сайта при помощи CMS Joomla 1.5.7

Плавно, по принципу от простого к сложному, переходим от статических страниц WWW к динамическим. Что бы это осуществить, нам понадобиться знание Web - языков PHP, Jscript, Perl, jQuery и хотя бы язык структурных запросов MySQL. Ничего страшного, всего лишь какие то пару лет и вы профи, способные делать такие многофункциональные сайты, у которых страницы генерируются на лету, в которых присутствует базы данных клиетов форумов, логины, пароли, идентификация, аутентификация, подключение анимации и много другое.

Но не обязательно обладать знаниями всех языков, что бы сделать динамический многофункциональный сайт. Мне хватило знания HTML, SCC, PHP, 3Ds Max, Photoshop и SMC Joomla.

Joomla - система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.

Основные возможности:

1. Функциональность можно расширять с помощью дополнительных модулей (расширений, плагинов).

2. Модуль безопасности для многоуровневой аутентификации пользователей и администраторов.

3. Система шаблонов позволяет легко изменять внешний вид сайта.

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

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

Можно работать с Joomla на сервере хостера в интернете (дополнительные расходы, а так же зависит многое от скорости интернета). Я предпочитаю работать на локальном сервере. Для этого выбрала Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server at 127.0.0.1 Port 80.

Итак, установили локальный сервер. В директории localhost/home/www/ создаем папку, в которую помещаем саму Joomla. Хочу заметить, что под PHP5.3.1 Joomla работает не корректно. Постоянно компоненты форумов FireBoard и Kunena выдает ошибки на сайте, приходится править файл php. ini и отключать вывод об ошибках, что само действие сулит непредвиденных обстоятельств для сайта. По этому, рекомендую выбирать версию PHP 5.2.4, работа стабильная для всех плагинов, модулей и компонентов. После установки Joomla через браузер создаем в MySQL пользователя-админа и под его логином и паролем заходим на в админ панель. Далее надо выбрать шаблон для сайта. С первого взгляда покажется, что это очень легко, но капнув глубже убеждаешься, что 80% времени уходит для модернизации этого шаблона. Поэтому рекомендую выбирать максимально подходящий шаблон под нужды, не забывая о выводимых модулях. Далее подключаем весь функционал сайта: регистрацию, форум, слайд-шоу, баннеры, файлы для скачек, видео on line, аудио, редактируем, все выводимые страницы. Работаем в основном с файлом Index. php и template. css и конечно конфигурируем под себя все подключенные расширения, которых около 6000 для Joomla. Далее остается самое приятное - это дизайн сайта. При помощи растрового программы Photoshop и 3Ds Max (полнофункциональная профессиональная программная система для создания и редактирования трёхмерной графики и анимации, разработанная компанией Autodesk, содержит самые современные средства для художников и специалистов в области мультимедиа) создаем дизайн шаблона. Редактируем header, делаем нужный вид.

Вывод

В связи с быстрым развитием Web-программирования и создания множественных CMS, была облегчена работа Web-дизайнера. Теперь для создания многофункционального мощного динамического web портала достаточно освоить несколько языков программирования (если будем дописывать расширения и скрипты), умело владеть графическими и растровыми программами, немного вдохновения, инноваций и мастерства.

Литература

1. Которев Д. В, Костарев А.Ф. "PHP 5 или наиболее полное руководство в подлиннике." Петербугр 2005

2. А. Гончаров "Самоучитель HTML".

3. А. Матросов, А. Сергеев, М. Чаунин "HTML 4.0 в подлиннике"

4. Айзекс С. "Dynamic HTML"

5. Байенс Дж. "Примочки программирования в WEB"

6. Бурсов М.В. и др. "Основы работы с HTML-редактором Dreamweaver. Учебно-методическое пособие"

7. Велихов В. "Справочник по HTML 4.0"

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

Язык гипертекстовой разметки HTML был предложен Тимом Бернерсом-Ли в 1989г. К моменту создания создания HTML существовал стандарт языка разметки печатных документов - SGML (Standart Generalised Markup Language), который и был взят в качестве основы HTML . Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка.

В качестве элемента гипертекстовой базы данных для HTML был выбран обычный текстовый файл, который хранится средствами файловой системы операционной Среды ЭВМ.

Таким образом, гипертекстовая база данных в концепции WWW -это набор текстовых файлов, написанных на языке HTML , который определяет:

Форму представления информации (разметка);

Структуру связей файлов между собой (гипертекстовые ссылки). Такой подход предполагает наличие еще одной компоненты

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

В 1990г. появилась нулевая версия HTML 0.

Первая версия (HTML 1.0) была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер.

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

Вторая версия (HTML 2.0) фиксировала практику использования конструкций языка и явилась стандартом для построения WWW .

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

Третья версия (HTML 3.0) упорядочила все нововведения и формализовала интерфейс пользователя гипертекстовой распределенной системы.

В 1996г. выпущена новая версия языка: HTML 3.2 ,включающая средства для создания таблиц, конструкции языка Java , карты-изображения (располагающиеся на машине-клиенте) и новые типы форматирования текста.

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

Процесс создания HTML - документа заключается во включении тэгов внутрь неформатированного текста, несущего информационную нагрузку.

Тэги HTML - это последовательности символов, начинающиеся знаком “меньше” (<) и заканчивающиеся знаком “больше” (>).

Большинство функций форматирования в HTML специфицирует логические, а не физические стили. Например, тэги заголовков, которые обычно обозначают больший размер букв, не указывают, какой именно размер надо использовать. Браузер (который выполняет роль клиентской программы) выбирает размер текста для заголовков, превышающий обычный. Этот подход позволяет избавиться от платформы - документ, созданный на Macintosh может быть использован UNIX или Windows . Недостатком является то, что на разных платформах документ выглядит по-разному.

Браузеры WWW при анализе предложений HTML работают по следующим правилам:

Пробелы и другие “невидимые” символы игнорируются;

Все тэги могут быть разделены на группы: базовые тэги, тэги форматирования, структурные тэги, указатели, и т.д.;

Тэги форматирования могут быть написаны строчными и/или прописными буквами;

Большинство тэгов форматирования пишутся парами. Открывающий тэг активирует данный эффект, а закрывающий -в ыключает его. Пара тэгов иногда называется контейнером, поскольку эффект, который они включают и выключают проявляется на тексте, расположенном внутри них. Например, для того, чтобы указать, что строка должна быть напечатана жирными символами, надо написать: < B > Эта строка будет напечатана жирным текстом

Текст, находящийся внутри закрывающего тэга, всегда предваряется символом “обратная косая черта”. Среди базовых тэгов HTML исключением из этого правила являются: < BASE > (основная информация), < BR > (конец строки), < HR > (горизонтальная линейка), и < IMG > (изображение). Эти тэги существуют в единичном экземпляре.

Каждый документ HTML имеет граничные тэги: < HTML > и . Эта пара тэгов заключает в себе все другие тэги Web -страницы и все информационное содержание документа. Фактически они декларируют, что все содержимое контейнера является кодом HTML . Тэг < HTML > должен располагаться в первой строке файла, а тэг - в последней.

Каждый HTML -документ содержит заголовок документа и его тело.

Заголовок документа идентифицирует документ. Он должен идти сразу после тэга < HTML > и начинаться с < HEAD >. Заканчивается заголовок тэгом .

В заголовке документа обязательно должны присутствовать название документа и его базовый URL -адрес.

Название документа располагается между тэгами < TITLE > и . Оно используется браузером и Web -сервером. Длина названия не должна превышать 40 символов. Название документа должно быть информативным, отражать содержание документа, чтобы его можно было идентифицировать. Название встречается в строке заголовка Internet Explorer , в списках журнала (History) и “Избранных стрницах” (Favorites).

Базовый URL должен быть полным (абсолютным) и содержать протокол, адрес компьютера в Internet и имя файла. Он указывается в тэге < BASE HREF = “базовый_URL”>. Все остальные URL в документе могут указываться относительно базового. Например, если базовый URL имеет адрес: http://www.microsoft.com/products/office/word/datasheets.html и необходимо указать URL файла features . html , расположенного в каталоге / products / office / excel на том же сервере, можно указать: ../ excel / features . html , а не набирать полный адрес.

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

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

Тело документа содержит весь текст, несущий информацию и все тэги HTML , используемые для форматирования текста. Тело документа начинается сразу же после заголовка и ограничивается тэгами < BODY > и .

Пример HTML -документа:

< TITLE > Название документа

< BASE HREF = “базовый_URL” >

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

Начало абзаца и конец строки

Стили заголовков

Физические стили -л огические стили

Специальные символы.

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

Текстовые указатели в графических браузерах обычно подчеркнуты и выделены цветом. В чисто текстовых браузерах они выделяются жирным шрифтом.

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

Формат указателя:

< A HREF = “ URL ”> текст указателя ,

где буква А в тэге < A HREF > означает указатель (anchor), а HREF -гипертекстовую ссылку (Hypertext REFerence). Все, что находится между тэгами < A HREF = “ URL ”> и является текстом указателя, который выводится на экран подчеркнутым или жирным шрифтом.

Вместе с гипертекстовыми указателями могут быть использованы другие форматирующие коды. Например:

< A HREF = “ URL ”> < I > или

< I > < A HREF = “ URL ”> Переход к более подробному изложению

I . Основные сведения об HTML .

За последние годы разработки для Интернета эволюционировали от статических страниц до динамических информационных систем. Некоторое время назад создание современных Web-страниц не требовало практически ничего, кроме совершенного владения языком разметки гипертекста (Hypertext Markup Language, HTML).

HTML представляет собой простой язык обработки текстов; на этом языке при помощи набора тегов (tags ) создается документ, который можно просматривать специальной программой просмотра Web (browser ).

HTML - не язык программирования в том смысле, как C++ или Visual Basic; он больше напоминает средства форматирования документов с использованием управляющих последовательностей. Кодирование на HTML часто сравнивают с созданием документа в формате Microsoft Word путем набивки кодов форматирования прямо в Notepad. Очевидно, что функциональность этого крайне мала.

Под гипертекстовым документом понимают документ, содержащий ссылки на другой документ. Реализовано все это через протокол передачи гипертекста HTTP (Hyper Text Transfer Protocol).

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

Гипертекстовые документы создаются на базе языка HTML (Hyper Text Markup Language). Этот язык весьма прост, управляющие коды его, которые, собственно, и компилируются обозревателем для отображения на экране, состоят из текста ASCII. Ссылки, списки, заголовки, картинки и формы называются элементами языка HTML .

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

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

Обозреватель определяет сформированные ссылки и, через протокол передачи гипертекста HTTP, открывает доступ к вашему документу другим пользователям Internet. Разумеется, для успешной реализации всего этого необходим софт, полностью совместимый с WWW и поддерживающий HTML.

II. Описание HTML

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

Гипертекстовый язык предоставляет только информацию для чтения . Это означает, что редактировать Web-страницы может лишь тот, кто их создал, а не простой пользователь Сети.

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

Тэги.

Тэг - оформленная единица HTML-кода .

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

  • левой угловой скобки < (такого же, как "меньше чем" символа)
  • необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру . Таким образом в этом контексте Вы можете читать символ /, как конец...
  • имени тега, например TITLE или PRE
  • необязательных, если даже тег может иметь их, атрибутов . Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER
  • правой угловой скобки > (такой же, как символа "больше чем").

Большинство тегов имеют открывающий элемент <> и закрывающий . Между ними и находятся коды , которые распознает Web-обозреватель

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


, являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен.

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

  • имени атрибута, например WIDTH
  • знак равенства (=)
  • значения атрибута, которое задается строкой символов, например, "80".

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

  • символов английского алфавита (A - Z, a - z)
  • цифр (0 - 9)
  • промежутков времени
  • дефисов (-)