Язык разметки гипертекста Hyper Text Markup Language, а проще говоря HTML это основной язык создания веб-страниц. В этой статье проведем самое общее знакомство с языком HTML.
Язык разметки гипертекста Hyper Text Markup Language
HTML–документ строится на основе тегов. Теги создают структуру документа. Основные теги парные. Это значит, что если есть открывающий тег типа <…>, то должен быть и закрывающий тег со слешем …>. Стоит отметить, что бывают и не парные теги.
Весь документ HTML обрамляется двумя тегами … . Как видите они парные. Кроме этого, в HTML документе должен присутствовать одиночный тег валидатор указывающий тип текущего документа.
У HTML 4 три валидатора, у HTML 5 валидатор один. Структура тега HTML 5 , следующая:
Примеры:
- для документов HTML 4.
- единый для всех документов HTML5.
Структура HTML документа
HTML документ состоит из заголовка (header) и тела (body). Заголовок обрамляется тегами
… . Тело документа обрамляется парными тегами … .Пример: Основной каркас HTML 5 документа должен иметь следующую структуру:
Здесь место для заголовка Здесь текст документа
Структура заголовка
Заголовок
… , включает несколько специальных тегов. Основные из них это теги:Тег title
Это заголовок документа, выводится в заглавной части страницы.
Тег meta
Тег мета, а вернее теги мета, потому что в одном документе таких тегов может быть несколько. содержит специальную информацию. Например, обязательно должен быть тег мета с указанием кодировки документа:
Для индексации веб страниц важны мета-теги description и keywords:
Замечу, что современные поисковики перестали «видеть» keywords, но это не отменяет их использования. Внутреннюю перелинковку никто не отменял.
Пример веб-страницы на HTML
Приведу элементарную веб-страниццу на HTML:
Изучая основы HTML, нельзя без изучения и использования специальных текстовых редакторов. Потому-что набирать любой текст страницы HTML нужно только в текстовом редакторе типа: NotePad++, Sublime Text2 и т.п. После набора документа его нужно сохранить с расширением htm или html. Cозданный файл открываем в любом браузере, которым вы пользуетесь.
Структура тела документа
Текст в документе (в тегах
) также разбивается на заголовки и части тегами.Теги заголовка и абзаца
Текст, документа, может обрамляться специальными тегами.
Абзац выделяется тегами
Заголовки разделов текста выделяется тегами
,, , до
Организуются теги заголовков в иерархической форме, а число в теге указывает на степень вложенности заголовка.
Пример применения тегов
Обзац моей любимой веб-страницы
h1 Категория товара
h2 Категория товара
h3 Категория товара
h4 Категория товара
h5 Категория товара
h6 Категория товара
Атрибуты тегов
Один из основных атрибутов тегов это атрибут форматирования, под названием align. Значение атрибута align:
- left – выравнить по левому краю,
- center – выровнять по центру,
- right – выровнять по правому краю,
- justify – симметричное выравнивание по двум краям.
Пример:
Моя любимая веб-страница
h1 Товар
h2 Товар
h3 Товар
Такое форматирование называется физическим и в принципе устарело. Для форматирования лучше и рекомендовано использовать таблицы каскадных стилей (CSS).
Списки
Современный стандарт HTML предусматривает создание трех основных видов списков:
- Списки маркированные (unordered list);
- Списки нумерованные (ordered list);
- Список определений терминов (definition list).
Рассмотрим каждый из видов списков.
Списки маркированные
Маркированные списки задаются тегами (unordered list). Для создания каждого элемента списка применяется теги
Пример:
- Товар 1 из списка товаров
- Товар 2 из списка товаров
- Товар 3 из списка товаров
В список можно помещать теги загловков:
- Товар 1 из списка товаров
- Товар 2из списка товаров
- Товар 3 из списка товаров
Заголовок списка
Маркеры, то есть видимые значки перед элементами списка, могут меняться, а их внешний вид задается атрибутами type. Атрибуты type могут быть: circle (не закрашенный кружок), disk(закрашенный кружок) и square(квадрат закрашенный). По умолчанию используется атрибут disc. Пример использования маркера с атрибутом disk:
- Товар 1 из списка
- Товар 2 из списка
- Товар 3 из списка
Списки нумерованные
Нумерованные или упорядоченные списки (ordered list), каждому элементу списка присваивается номер. Создаются нумерованный списки тегами . Для каждого элемента нумерованного списка, также используются парные теги
В нумерованных списках используются пять атрибутов:
1-Цифры арабские; i- Римские строчные цифры; I- римские прописные цифры; a-Латинские строчные буквы; A-Латинские прописные буквы.
Пример нумерованного списка.
- Товар1 из списка
- Товар2 из списка
- Товар3 из списка
Список Товаров нумерованный
Пример нумерованного списка с маркерами латинских строчных букв:
- Товар1 из списка
- Товар2 из списка
- Товар3 из списка
Списки определений
Для создания списков по типу термин-определение термина, применяются теги
- …
- , а определение (объяснение) термина заключается в парный тег
- .
Пример:
- Термин 1
- Объяснение термина 1
- Термин 2
- Объяснение термина 2
Заголовок
Вложение списков
Любой тип списка, маркированный и нумерованный, можно друг в друга вкладывать. Вложение допустимо произвольное. Главное при создании вложенных списков не запутаться в парных тегах.
Пример вложенных списков:
- Раздел товаров 1
- Раздел товаров 1.1
- Раздел товаров 1.2
- Раздел товаров 2
- Раздел товаров 2.1
- Раздел товаров 2.2
- Раздел товаров 2.3
- Раздел товаров 3
- Раздел товаров 3.1
Вложенные списки
Таблицы в HTML
Для структурирования документов HTML основной структурой являются таблицы. Правда, стоит отметить, что использование таблиц для организации структур страниц устаревает и уже признано не рекомендуемым.
Структура таблицы:
//- парные теги контейнера таблицы;//
//контейнер для создания строки таблицы// //тег создания одной ячейки таблицы. Этот тег должен быть внутри контейнера , который должен быть внутри тега// - Border – рамка шириной 2 px;
- Cellpadding-расстояние между внешними границами ячеек таблицы;
- Cellspacing-расстояние между внешними границами ячеек таблицы.
- Height- высота таблицы;
- Width- ширина таблицы.
- Caption- тег для создания заголовка таблицы, может размещаться только внутри контейнера
.
Пример таблицы:
Простая таблица 1-1 1-2 1-3 2-1 2-2 2-3 Теги colspan и rowspan
предназначены для объединения ячеек: Объединение ячеек в HTML-таблице Ячейки 1.1 и 1.2 Ячейка 1.3 Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Ячейки 3.1 - 3.3 Гиперссылки
Основной атрибут этого тега href. Этот тег содержит адрес ресурса, на который ведет ссылка. Внутри тега-контейнера пишется текст ссылки.
Якорь
Чтобы сослаться на якорь, в другом документе, имя якоря с решеткой (#), пишется сразу после адреса стороннего документа, без пробела.
Ссылка на Якорь 3 в Документе 009
Рисунки в виде ссылок
Рисунки и фото также можно делать в виде ссылок. Для этого рисунок вставляется в текст с тегом . Атрибута src этого тега имеет значение файла картинки:
На этом все! Конечно, основы HTML не включают все особенности этого языка, но дают представление о формировании HTML документа.
Современные информационные 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 перестанет быть достоянием лишь пользователей настольных персональных компьютерах, уже сейчас некоторые пользователи активно пользуются голосовыми браузерами для незрячих или браузерами, использующими азбуку Бройля, зачастую содержимое выводится не на монитор компьютера, а в телевизор, когда применяются приставки с выходом в сеть или на телетайп, или на монохромные дисплеи различных организаторов-пейджеров и прочие.
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ
імені Володимира Даля
Кафедра компьютерных наук
По дисциплине
Компьютерній дизайн и мультимедия
СтудентБолдакова И.В.
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) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами
и . Первый из них должен стоять сразу после тега , а второй - перед тегом