Какой вид соответствует языку html. История создания и развития HTML. Как работает HTML-код

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

Например, я открою страницу поисковой системы Яндекс.

Вся графика и текст, которую вы видите на странице, формируется при помощи HTML-кода.

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

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

Теперь давайте разберемся с самим определением и рассмотрим, что оно означает.

HTML – это аббревиатура, которая расшифровывается как HyperText Markup Language или в переводе на русский язык «Язык Разметки Гипертекста».

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

Язык.

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

Как у любого языка, в HTML есть слова (команды) и правила написания этих слов (синтаксис языка).

Разметка.

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

HTML код позволяет «разметить» веб-страницу на отдельные элементы и сообщить браузеру какой элемент чем является.

Например, такая форма записи:

Сообщает браузеру о том, что он имеет дело с абзацем.

А такая форма записи:

Заголовок

Говорит о том, что элемент является заголовком.

Из этого следует, что HTML не отвечает за внешний вид и оформление документа.

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

Страница со стилями оформления:

Та же самая страница, но с отключенными стилями (используется только один HTML -код):

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

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

Гипертекст.

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

Приставка «гипер» означает то, что при клике на ссылку может открываться другой ресурс (страница) в сети интернет, который может располагаться на другом сервере.

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

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

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

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

Что такое HTML?

HTML расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст.

Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html или .htm и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.

Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются.

Структура документа HTML

Любой HTML документ (веб-станица) должен иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. В качестве примера давайте рассмотрим страницу, которая содержит следующих HTML код:

Структура HTML документа ...

Разберем по порядку, что входит в данную структуру:

1. Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.

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

4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.

5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.

6. Тело страницы открывается тегом и закрывается, соответственно, тегом . В теле веб-страницы размещается, как правило, основной контент — текст, видео, аудио и другая информация.

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

За появление HTML современный мир должен благодарить одного ученого Европейского совета по ядерным исследованиям (Conseil Européen pour la Recherche Nucléaire, CERN). Зовут этого ученого Тимоти Джон Бернерс-Ли. Первая версия HTML создавалась для целей форматирования научных документов. Именно структурного форматирования без элементов описания цветовых схем, параметров шрифта и т.п. Таким образом, изначально HTML позволял выделять в тексте заголовки, абзацы, списки и им подобные структурные элементы. Результат обработки или “воспроизведения” HTML не должен был зависеть от технических особенностей аппаратных средств его визуализации, поскольку не содержал в себе параметров этой визуализации. Со временем такая особенность языка разметки гипертекста была частично утрачена.

Итак, появление первых версий HTML относят к 1986 году, а в 1991 году HTML был существенно доработан и стал использоваться именно для передачи гипертекста по просторам всемирной паутины. Говорят, что всемирно известная аббревиатура HTML, расшифровывающаяся как Hyper Text Markup Language (язык разметки гипертекста) появилась как раз в начале 90-х годов прошлого века. А теперь небольшой экскурс в родословную языков разметки. Первая версия языка разметки гипертекста HTML была создана на основе стандарта обобщенного языка разметки SGML (Standard Generalized Markup Language), который в некотором роде можно считать прообразом расширяемого языка разметки данных (eXtensible Markup Language). Стандарт XML в наше время приобрел огромную популярность благодаря большому количеству своих расширений, используемых в компьютерных технологиях. Чтобы совсем запутать читателя сразу добавлю, что впоследствии на основе XML был разработан язык разметки гипертекста XHTML (Extensible Hypertext Markup Language), повторяющий по своей сути HTML. В результате мы имеем аббревиатуры SGML, HTML, XML и XHTML, и необходимо понять, кто из них кто. На самом деле все просто: SGML это не что иное, как набор правил, на основе которых можно строить любые языки разметки. HTML и есть один из этих языков - приложение SGML. Другими словами, SGML определяет то, как должны выглядеть элементы разметки, а HTML - какие именно должны быть элементы и как они должны интерпретироваться браузерами. XHTML, в свою очередь, является приложением XML, а сам XML ни что иное, как упрощенный вариант SGML. , не смотря на то, что очень внешне похожи, имеют существенные скрытые отличия, которые, по большей части, заключаются в принципе их обработки.

Теперь вернемся к истории развития HTML. Итак, до 1994 года HTML по-прежнему использовался только для структурной разметки данных, хотя в его составе уже появились теги для выделения текста жирным или курсивом. В том же 1994 году создается организация W3C (World Wide Web Consortium) – Консорциум всемирной паутины, которую возглавляет, что вполне логично, тот самый Тим Бернерс-Ли, и в 1995 году в свет выходит рекомендация HTML 2.0. Создатели HTML уже тогда понимали, что со временем их детище из языка статичной разметки текста эволюционирует в основной инструмент создания динамических интернет ресурсов. Главным дополнением HTML 2.0 стало появление в составе языка форм с наборами пользовательских элементов управления, которые должны были использоваться для ввода пользователем параметров HTTP запросов.

После выхода второй версии сразу же началась работа над следующим поколением HTML. В 1997 году выходит рекомендация HTML 3.2, которая дополнила язык разметки таблицами, фреймами, изображениями и некоторыми другими важными тегами. Но самым главным достижением 3-й версии является то, что ее авторы вновь вернулись к проблеме визуализации разметки в браузере, вспомнили про то, что HTML должен размечать лишь структуру документа и не должен содержать непосредственно в себе параметры графических стилей отображения элементов в браузере. Результатом их работ над HTML 3.2 стало появление самостоятельного языка CSS (Cascading Style Sheets) – каскадных таблиц стилей, код которого можно теперь подключать к коду разметки HTML и тем самым настраивать внешний вид страницы.

К выходу 4-й версии HTML в 1997 году сотрудники W3C избавили свое детище от тех ненужных элементов, которые с появлением CSS стали устаревшими и компрометировали идею отделения разметки структуры от параметризации представления. Но из-за таких мелочей никто не стал бы городить новую версию. Основное достижение рекомендаций HTML 4.0 – появление объектной модели страницы (Document Object Model, DOM), элементами которой теперь можно было манипулировать посредствам скриптовых языков программирования, исполняемых браузерами. Самым популярным таким языком программирования является JavaScript. HTML плюс DOM плюс JavaScript равно Dynamic HTML или просто DHTML, который ознаменовал прорыв в веб-дизайне. Теперь элементы загруженной интернет страницы могли изменять свой внешний вид в ответ на действия пользователя, а также добавлять новые и удалять имеющиеся элементы. В 24.12.1999 году выходит последняя редакция 4-й версии языка разметки гипертекста – HTML 4.01.

Версия HTML5 до сих пор еще не получила статус официальных рекомендаций W3C, но уже сейчас понятно, что авторы HTML продолжают работать в направлении разработки требований к поддержке объектной модели документа и интерпретации JavaScript. Хотя HTML5 и получит ряд новых тегов, но большая часть рекомендаций все же касается поведения браузера в контексте работы DHTML: появится встроенная поддержка функций перетаскивания элементов (drag-and-drop), возможность рисовать на виртуальном полотне (canvas), управлять просмотром истории, обмениваться сообщениями между страницами, сохранять контекст исполнения и многое другое. Есть надежда, что с выходом новых рекомендаций HTML проблемы отсутствия кроссбраузерности, когда один и тот же JavaScript код исполняется под управлением разных браузеров по-разному, будут постепенно исчезать. Ведь тенденция определять требования к работе с объектной моделью и JavaScript будет сохраняться, а разработчики браузеров будут обязаны (если хотят, чтобы их программными продуктами пользовались) следовать этим требованиям.

Выход HTML5 запланирован на 2014 году. Возможно, к тому времени W3C разработает отдельные рекомендации, касающиеся только программирования на JavaScript, а HTML со временем снова станет исключительно языком разметки структуры документа. Не смотря на то, что сегодня еще только 2012 год, многие уже сейчас поддерживаются наиболее популярными браузерами. Многое, что приходилось веб-дизайнерам раньше делать самостоятельно (тот же drag-and-drop), с выходом HTML5 будет поддерживаться на уровне браузера, и такой ход развития событий не может не радовать. Остается надеяться, что тенденция сохранится.

Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!

Сразу хочу заметить, что это НЕ язык программирования, а язык разметки.

Почему выучить HTML легко?

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

Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии.

Немного теории…

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

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

Но что такое тег в HMTL?

Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:

Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂

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

  • и закрывающий
  • и закрывающий
  • и закрывающий

Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:

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

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

Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…

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

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

Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:

Правильный HTML КОД

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

ОШИБКА В HTML КОДЕ

Так закрывать теги категорически запрещается !

Практика, чтобы понять что такое HTML…

Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++ . В данном редакторе есть все возможности для создания и редактирования HTML страниц.

Начнем. После открытия программы вы увидите такое окошко:

Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.

Итак, у вас должно получиться следующее:

Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.

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

К настоящему времени сеть Интернет получила беспрецедентное распространение. По оценкам экспертов Интернет объединяет более 100 миллионов компьютеров. Услугами Интернет пользуется свыше300 миллионов человек в 170 странах мира.

С функциональной точки зрения Интернет представляет собой:

ü недорогое быстродействующее средство общения между абонентами по всему миру;

ü не имеющее аналогов хранилище информации по любым областям знаний;

ü новую перспективную среду длядеятельности.

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

Самым распространенным и востребованным сегодня является такой сервис Интернет, как WWW (World Wide Web − всемирная паутина). Информацияв WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов,которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты.Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши.Активными могут быть фрагменты текста, целые изображения и их части;щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.

Чтобы научиться размещать материалы в Интернет, прежде всего необходимо познакомиться с языком разметки гипертекста HTML (H yperT ext M arkup L anguage)

Основы языка HTML

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

Просмотр HTML-документов осуществляется с помощью программ-браузеров (от английского browser ), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам. Наиболее распространенными являются браузеры Microsoft Internet Explorer фирмы Microsoft Corporation и Netscape Navigator фирмы Netscape Communications Corporation .

Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (Notepad ), но это очень трудоемко. Чаще используют специализированные редакторы, предназначенные именно для подготовки HTML-документов, которые позволяют вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах, например, Macromedia Dreamweaver, Microsoft FrontPage , HomeSite и др.

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

Синтаксис HTML-тегов

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

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

Парные теги (называемые также контейнерами ) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта(символ / ). Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега.Например, текст, расположенный между тегамии , будет выведен полужирным начертанием (название тега - от английского bold ). Парные теги могут быть вложены друг в друга, но не должны пересекаться.

Непарные теги (называемые также автономными ) не имеют конечного компонента.При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег , встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif .

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


Вот пример тега с атрибутами:

Название тега Название атрибута

Значение атрибута

Название атрибута

Значение атрибута

Привет !

Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера(SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста применяется до тех пор, пока не встретится закрывающий тег.

Регистр символов в записи тегов и атрибутов значения не имеет.

Структура HTML-документа

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

HTML -код простейшего документа, пригодного для размещений в Интернет, выглядит так:

< TITLE > Наша первая страничкаTITLE >

Самый простой HTML- документ

Данный кодможет быть набран в текстовом редакторе Блокнот и сохранен как файл с расширением. htm или. html − в этом случай документ откроется в браузере, установленном на вашем компьютере по умолчанию. Браузер отобразит этот документ, выведя в своем окне строку "Самый простой HTML-документ", расположенную в секции тела документа. Фраза "Наша первая страничка" будет отображаться в строке заголовка браузера.

Раздел HEAD

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

Тег

Назначение

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

Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тэга. Обязательно присутствие хотя бы одного из аргументов:

HREF - определяет базовый адрес (URL) текущего документа.

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

< STYLE TYPE= "text /css " >

Используется для вставки в документ каскадных таблиц стилей (CSS − Cascade Style Sheet). TYPE − обязательный атрибут, значением которого, как правило, является "text /css ".

< МЕТА …>

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

NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.

CONTENT - присваивает значение мета-записи, определенной в параметре NAME.

Раздел BODY

Этот раздел включает в себя основное содержание веб-страницы − текст документа, изображения, таблицы и т.п. Элемент BODY должен встречаться в документе не более одного раза и может включать следующие атрибуты:

Синтаксис атрибута

Назначение

MARGINHEIGHT=число

Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape

TOPMARGIN= число

Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer

MARGINWIDTH= число

Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape

LEFTMARGIN= число

Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer

BACKGROUND= URL

Определяет изображение для "заливки" фона (фонового рисунка). Значение задается в абсолютного или относительного адреса изображения (см. раздел Размещение рисунков)

BGCOLOR=цвет

Определяет цвет фона документа.

Microsoft Internet Explorer поддерживает 16 стандартных имен цветов (aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , yellow , white )

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

Например, запись COLOR ="#0000 FF " означает синий цвет

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

TEXT=цвет

Определяет цвет текста в документе

LINK=цвет

Определяет цвет гиперссылок в документе

ALINK=цвет

Определяет цвет подсветки гиперссылок вмомент нажатия

VLINK

Определяет цвет гиперссылок на уже просмотренные документы

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

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

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

Основным является тег ... FONT>, обязательно использующийся с одним или несколькими атрибутами, изменяющими размер, цвет и гарнитуру шрифта:

Синтаксис атрибута

Назначение

SIZE = значение

Размер задается либо в форме абсолютного значения (число от 1 до 7),либо относительно размера основного шрифта (в форме +nили -n).

COLOR = цвет

Цвет

FACE = список шрифтов

Гарнитуры для отображения текста; названия перечисляются в порядке предпочтения через запятую, например, FACE =" Verdana , Helvetica , Arial , Sans - Serif "

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

Кроме того, используются теги, позволяющие изменить начертание символов:

. .. (от английского bold) − полужирный шрифт;

.. . (от английского italic) − курсив;

... (от английского TeleType) − моноширинный шрифт;

... (от английского u nderline) − подчеркнутый;

... S > (от английского s trikethrough ) − перечеркнутый;

... (от английского s ubscript ) − нижний индекс;

... (от английского superscript ) − верхний индекс.

Текст, заключенный между тегами

и(от английского preformatted ), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк.

Форматирование абзацев

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

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

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

интерпретируются как один (в отличие от тега
).Закрывающий компонент

не обязателен, так как предыдущий абзац заканчивается там, где начинается новый.Тег имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца, который может принимать значенияLEFT, CENTER, RIGHT и JUSTIFY , задающие выравнивание соответственно по левому краю, центру, правому краю и по ширине. По центру будет выровнен и текст, заключенный в теги

...

Если закрывающий компонент

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

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

упорядоченный (нумерованный) список (от английского ordered list )

неупорядоченный (маркированный) список (от английского unordered list )

Каждый элемент упорядоченного или неупорядоченного списка заключается в теги ... (от английского list item ). При выводе текста каждый элемент списка будет располагаться с новой строки, обозначенной номером или маркером. Кроме того, у списка может быть заголовок, который задается тегом (от английского l ist h eader ). Закрывающие теги и не обязательны.

Нумерованный список

Маркированный список

Элемент кода

< O L>

Заголовок

Первый элемент

Второй элемент

Третий элемент

< U L>

Заголовок

Первый элемент

Второй элемент

Третий элемент

U L>

Отображение в браузере

Заголовок

1. Первый элемент

2. Второй элемент

3. Третий элемент

Заголовок

· Первый элемент

· Второй элемент

· Третий элемент

Многоуровневый список может быть организован посредством комбинации нумерованных и маркированных списков.

Тегимеет необязательные атрибуты:

Синтаксис атрибута

Назначение

TYPE = формат

формат нумерации может иметь значения:

арабские цифры (по умолчанию)

прописные буквы

строчные буквы

большие римские цифры

маленькие римские цифры

START = значение

первый номер в списке (по умолчанию 1)

Тегимеет необязательный атрибут

Синтаксис атрибута

Назначение

TYPE = формат

формат маркера может иметь значения:

Disc

диск (по умолчанию)

Circle

окружность

Square

Квадрат

Абзацы можно оформить и в видезаголовков уровня (от n =1 до n =6), для этого используют теги видаn> ... n>. Заголовок первого уровня выводится наиболее крупным шрифтом.

Теги

, ... ,

могут иметь атрибут выравниванияALIGNсо значениямиLEFT,RIGHT и CENTER.

Размещение рисунков

Изображения, которые демонстрируются браузером при просмотре веб-страницы, хранятся в отдельных файлах формата gif , jpg (jpeg ) или png , а в коде страницы делается ссылка на нужный файл. Для этого используется непарный тег , имеющий один обязательный и ряд необязательных атрибутов..

Обязательный атрибут:

SRC = url

Адрес графического файла (относительный или абсолютный)

ALT = текст

Альтернативный текст, выводимый в режиме браузера без загрузки изображений (обязательно заключается в кавычки)

BORDER = значение

Толщина обрамляющей рамки в пикселях, 0 означает отсутствие рамки (по умолчанию)

BORDERCOLOR = цвет

Задает цвет обрамляющей рамки

HEIGHT = значение

Высота изображения в пикселях(по умолчанию оригинальная) либо в процентах от высоты окна браузера

WIDTH = значение

Ширина изображения в пикселях(по умолчанию оригинальная) либо в процентах от ширины окна браузера

HSPACE = значение

Свободное пространство слева и справа от изображения в пикселях

VSPACE = значение

Свободное пространство сверху и снизу от изображения в пикселях

ALIGN = значение

Выравнивание изображения по горизонтали.

Если заданы значения LEFT либо RIGHT , изображение соответствующим образом будет выровнено по горизонтали,задание этих значений обеспечивает обтекание изображения текстом

Рассмотрим подробнее абсолютный и относительный способы адресации файла.

Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL (Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере,это протокол http .Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ / ), в именах файлов и каталогов различаются прописные и строчные буквы , пробелы не допускаются. Вот примеры URL:

http://www. vshu . kirov .ru/ site / images / picture 1. jpg

http://195.21.123.13:8110

ftp://everything.com/soft/prog.zip

mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.

Последний URL, указывающий на протокол mailto и адрес электронной почты, не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты.

Адресация рисунков в абсолютной форме при создании веб-сайта практически не используется.

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

SHAPE\* MERGEFORMAT

MySite

Pa ges

Ima ges

Page1.htm

Page2.htm

Pict1.jpg

Pict2.jpg

Index.htm

Picture.jpg

В этом случае возможны, например, такие варианты записи тега IMG :

ü < IMG SRC = Picture . jpg > (изображение Picture . jpg располагается на страничке Index . htm )

ü < IMG SRC = Images / Pict 1. jpg > (изображение Pict 1. jpg располагается на страничке Index . htm )

ü < IMG SRC =../ Picture . jpg > (изображение Picture . jpg располагается на страничке Page 1. htm )

ü < IMG SRC =../ Images / Pict 1. jpg > (изображение Pict 1. jpg располагается на страничке Page 1. htm )

Несмотря на то, что формально обязательным является только атрибут SRC,на практике необходимо указывать и альтернативный текст (атрибут ALT), так как многие работают с браузером в режиме без загрузки изображений.

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка.
Если задать явно оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданными размерами. Атрибуты height и width меняют не время загрузки изображения, а только его вид (размер) на экране.

Гиперссылки

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

Текстовые гиперссылки

Связь между HTML-документами и фрагментами документов организуется с помощью тега ... (от английского a nchor - якорь ).

Тегупотребляется как для создания ссылки на другой документ, так и для ссылки на фрагмент документа.

Обязательный атрибут:

HREF = url

Адрес целевого документа (может быть представлен в абсолютной и относительной форме)

Основные необязательные атрибуты:

NAME="имя "

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

Так, < A HREF =" Index . html # part 1">К разделу 1 A > отправит вас в раздел " part 1" файла Index . html , а
< A HREF ="# part 2"> К разделу 2 A > − в раздел " part 2" текущего документа при условии, что в документе имеется соответствующая метка

TARGET = "имя"

Имя кадра (фрейма) или окна для вывода целевого документа.

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

_self - указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме;
_parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма (целиком занять окно браузера);

_blank - указывает, что документ должен отображаться в новом окне

TITLE= "текст "

Выводит всплывающую подсказку при наведении указателя мыши на гиперссылку

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

Гиперссылки-картинки

Чтобы сделать гиперссылкой целое изображение, также применяется тег ... ., только вместо текста (или вместе с текстом) между < A > и A > располагается тег < IMG …> со всеми соответствующими атрибутами.

Например , .

Карта гиперссылок

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

У тега-контейнера единственным обязательным атрибутом является NAME , значением которого будет имя (например, NAME=" mymap " , которое должно быть использовано при описании атрибута USEMAP тега IMG, описывающего изображение, призванного служить картой (при этом к имени карты приписывается слева # − USEMAP ="# mymap ")

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

Синтаксис атрибута

Назначение

COORDS = список

Список через запятую координат активной зоны (зависит от типа заданной формы зоны)

HREF = url

SHAPE = форма

Определяет форму активной зоны. Возможные значения этого атрибута:

circle (окружность – задается координатами центра и радиусом в пикселях);

rect (прямоугольник - задается координатами левого верхнего и правого нижнего угла);

poly (многоугольник - задается координатами своих вершин)

Координаты во всех случаях отсчитываются от верхнего левого угла изображения в пикселях, ось Х направлена вправо, ось Y − вниз.

NOREF

иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет

Таблицы

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

Таблицы в HTML строятся построчно. Все табличные данные заключаются в теги

; описание каждого ряда ячеек (строк) заключается в теги ... ; содержимое каждой ячейки заключается в теги ... (обычные ячейки) или H > ... H > (заголовки).

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

Ячейки таблицы могут содержать текст, изображения, вложенные таблицы и т.д. Не следует оставлять ячейки таблицы незаполненными; если какая-то ячейка должна выглядеть пустой, поместите в нее неразрывный пробел.

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

Ячейки таблицы могут охватывать несколько строк или столбцов;при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, "растягивается" на указанное количество строк) и COLSPAN (ячейка "растягивается" на несколько столбцов). Приведем пример организации таблицы с объединенными ячейками:

< TR >

< TD ROWSPAN=2> 1-1 TD >

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

Атрибуты тегазадают параметры таблицы в целом:

Синтаксис атрибута

Назначение

ALIGN = значение

Выравнивание относительно текстового потока;возможны значенияleft, right и center

BACKGROUND = url

Фоновое изображение для всей таблицы

BGCOLOR = цвет

Фоновый цвет

BORDERCOLOR = цвет

Цвет границы

BORDERCOLORDARK = цвет

Окрашивает в заданный цвет правый и нижний край основной рамки и левый и верхний край каждой ячейки

BORDERCOLORLIGHT = цвет

Окрашивает в заданный цвет левый и верхний край основной рамки и соответственно правый и нижний край каждой ячейки

CELLPADDING = значение

Расстояние от границ ячейки до ее содержимого в пикселях

CELLSPACING = значение

Расстояние между ячейками в пикселях

HSPACE = значение

Свободное пространство слева и справа от таблицы в пикселях

VSPACE = значение

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

WIDTH = значение

Ширина таблицы (задается в пикселях или в процентах от текущей ширины окна браузера)

Атрибуты тегазадают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге, отменяются). Выравнивание содержимого ячеек;возможны значенияleft, right и center

BACKGROUND = url

Фоновое изображение для ячеек данного ряда таблицы

BGCOLOR = цвет

Фоновый цвет для ячеек данного ряда

BORDER = значение

Толщина рамки, обрамляющей ячейки данного ряда;BORDER=0 обозначает невидимую рамку

VALIGN = значение

Вертикальное выравнивание содержимого ячеек;возможны значения top, center и bottom

Атрибуты тега задают параметры данной ячейки(при возникновении противоречий атрибуты, заданные в тегах и, отменяются).

Синтаксис атрибута

Назначение

ALIGN = значение

Выравнивание содержимого ячейки; возможны значенияleft, right и center

BACKGROUND = ur l

Фоновое изображение для ячейки таблицы

BGCOLOR = цвет

Фоновый цвет для ячейки

BORDER = значение

Толщина рамки, обрамляющей ячейку

VALIGN = значение

Вертикальное выравнивание содержимого ячейки;возможны значения top, center и bottom

WIDTH = значение

Ширина ячейки в пикселях или в процентах от ширины таблицы

ROWSPAN= значение

Указывает количество строк, охватываемых ячейкой

COLSPAN = значение

Указывает количество столбцов, охватываемых ячейкой

При работе с таблицами учтите, что указанное значение атрибута WIDTHво многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).

Бегущая строка

Использование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега < MARQUEE > … MARQUEE >.

Между < MARQUEE > и MARQUEE > могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием .

Синтаксис атрибута

Назначение

BGCOLOR =цвет

Фоновый цвет. Если фон задан, то браузер рисует на экране цветную полосу, вдоль которой движется текст или картинка.

HEIGHT = значение

Высота фоновой полосы. Значение указывается в пикселях или в процентах от высоты окна браузера.

Например, если указать атрибут HEIGHT=25%, то полоса бегущей строки будет занимать четверть высоты окна

WIDTH = значение

Ширина полосы бегущей строки, указывается в пикселях или в процентах от ширины окна браузера

DIRECTION= значение

Направление движения строки: left − налево (по умолчанию), right − направо, up − вверх, down − вниз

BEHAVIOR = значение

Атрибут управляет поведением бегущей строки:

scroll (по умолчанию) − дойдя до края окна, строка уходит из поля зрения, а затем появляется с противоположной стороны;

slide − строка появляется из-за края окна, достигает противоположного и останавливается;

alternate − строка движется вправо или влево, «отражаясь» от краев окна и меняя направление движения

HSPACE = смещение в пикселях

Сдвиг полосы бегущей строки по горизонтали вправо

VSPACE = вы co т a в пикселях

Создание пустого пространства выше и ниже полосы

LOOP = значение

Количество переходов строки по экрану

SCROOLAMOUNT = значение

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

SCROLLDELAY = значение

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

TRUESPEED

При установке этого флага (атрибута без значения) будет использовано заданное значение SCROLLDELAY. Если флаг не установлен значение SCROLLDELAY <= 59 будет округлено до 60

Горизонтальная линия

Горизонтальная линия задается тэгом R > и не требует закрывающего тэга. По умолчанию линия проводится по всей ширине страницы и выглядит примерно так:

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

SIZE = значение

Определяет толщину линии в пикселях

ALIGN = значение

Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:

left - по левому краю,

right - по правому краю,

center - по центру (используется по умолчанию)

NOSHADE

Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной

COLOR = цвет

Определяет цвет линии (действует только в Internet Explorer )