Информация о языке и версии HTML

Стр 1 из 5Следующая ⇒

СОЗДАНИЕ HTML СТРАНИЦ

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

b) Форматирование

c) Таблицы

d) Графика

e) Гиперссылки

f) & -последовательности

g) Режимы браузеров

h)Логическая и физическая структура сайта

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

Понятия языка разметки

HTML-документ представляет собой обычный текстовый файл в формате ANSI ASCII, содержащий собственно текст и специальные теги для его разметки, а также ссылки на другие документы, графические изображения и любые иные файлы. Теги задаются в файле и обрабатываются браузером в соответствии с правилами специального языка HTML (Hyper Text Markup Language – Язык Разметки Гипертекста).

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

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

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

Тег (от англ., tag – ярлык, метка) – элемент языка HTML, используемый для разметки Web-страниц.

Элементы разметки состоят из заключённых в угловые скобки ( < и > ) дескрипторов – тэгов (tags) и их атрибутов. Совокупность открывающего ( < > ) и закрывающего ( < / > ) дескрипторов - есть контейнер. Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением.htm или.html.

Язык HTML был разработан Тимом Бернерс-Ли. В 1990-х годах HTML получил широкое признание благодаря быстрому росту Web.

История развития HTML

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

HTML 2.0 (ноябрь 1995) – был разработан под эгидой Internet для упорядочения общепринятых положений.

HTML+ (1993) и HTML 3.0 (1995) – это более широкие версии языка HTML. Несмотря на то, что в обычных дискуссиях по стандарту согласие между разработчиками браузеров не было достигнуто, эти версии содержат ряд новых общих свойств.

HTML 3.2 (январь 1997) создан усилиями Рабочей группы World Wide Web Consortium по HTML для упорядочения ряда общепринятых положений и изменений предыдущих версий.

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

Типы HTML-редакторов

Для создания любого файла нужна какая-нибудь программа.

HTML-редакторы подразделяются на два типа:

§ редакторы тегов (HTMLPad, LightPad, HomeSite, Visual HTML Workshop) – предполагают, что пользователь знаком с языком HTML

§ WYSIWYG-редакторы (Netscape Composer, Front Page Express, Front Page 2000, Microsoft Word) – часто называют редакторами типа «что видишь, то и получишь» (what you see is what you get).

Не все WYSIWYG-редакторы могут генерировать код HTML, полностью адекватный форматируемой странице. Например, MS Word теряет при преобразовании в HTML информацию о стиле линий.

Редакторы тегов

Подготовка сайта с помощью редакторов тегов включает в себя этапы:

Создание HTML-документа;

Оформление (изменение цвета и формата шрифта; форматирование структуры таблиц; изменение фона страниц; внедрение графических элементов; применение спецэффектов; связывание страниц сайта);

Сохранение;

Просмотр полученной Web-страницы в браузере;

Размещение сайта в сети Интернет.

Остановимся на том, из каких основных этапов состоит процесс создания документа HTML вручную, не прибегая к специализированным приложениям:

Набор содержимого в любом из текстовых редакторов (например, Блокнот ) и сохранение обычного текстового файла.
Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением.htm или.html (делается в Блокноте в кодировке Unicode).
Организация переходов по гиперссылкам документа при помощи элемента < А > - основного связующего элемента языка HTML.
Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML.

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

5. Структура < HTML> -документа

Любой < HTML> -документ состоит из следующих основных частей:

§ Строки с информацией о версии HTML, используемой в данном документе

§ Блока заголовка документа

§ Тела документа.

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

Условно теги делятся на следующие типы:

· теги верхнего уровня;

· теги заголовка документа;

· блочные элементы;

· строчные элементы;

· универсальные элементы;

· списки;

· таблицы;

· фреймы.

Разница между блочными и строчными элементами следующая:

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

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

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

Списки новостей или статей — те же списки. Но с одной маленькой особенностью: у элементов такого списка есть нечто общее, а именно дата. Поэтому предлагается следующая HTML-конструкция:

< dl class=" articles" > < dt> 02.10.05< /dt> < dd> новость 3< /dd> < dd> новость 2< /dd> < dt> 01.10.05< /dt> < dd> новость 1< /dd> < /dl>

Таблица 1. Основные тэги по типам

Тип	Тэг	Назначение
теги верхнего уровня	< html> < body> < head>	Начало и конец страницы Содержимое веб-страницы Описание страницы
теги заголовка документа	< title> < meta>	Имя страницы Для хранения информации для браузеров и поисковых систем
блочные элементы	< blockquote> < div> < h1>,..., < h6> < hr> < p> < pre>	Для выделения длинных цитат универсальный блочный контейнер Заголовок (уровни от 1 до 6) Горизонтальный разделитель Абзац Блок предварительно форматированного текста
строчные элементы	< a> < b> < strong> < big> < br> < em> < i> < img> < small> < span> < sub> < sup>	Ссылка на другую страницу Жирный Увеличивает размер шрифта на единицу Перевод строки Устанавливает курсивное начертание шрифта Для отображения на веб-странице изображений Уменьшает размер шрифта на единицу Универсальный тег, предназначенный для определения строчного элемента внутри документа Верхний индекс Нижний индекс
универсальные элементы	< del> < ins> <! --… -->	Для выделения текста, который был удален в новой версии документа Для акцентирования вновь добавленного текста Комментарий
списки	< ol> < ul> < li> < dd>, < dt>, < dl>	Нумерованный Ненумерованный Одельный элемент списка Список определений
таблицы	< table> < td> < th> < tr	Внешний элемент таблицы Элемент задающий ячейку таблицы Элемент, заголовочную ячейку Элемент, задающий строку таблицы

Б) Форматирование

Оформление занимает особое место при создании WEB-сайта.

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

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

Использование линий позволяет разделить смысловые части страницы и оживить ее.

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

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

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

Изменение шрифта

Изменение шрифта текста в HTML может производиться с помощью тега < FONT> …< /FONT>. При этом появляется возможность изменить у текста, оказавшегося внутри этого контейнера, начертание, размер и цвет шрифта.

< FONT FACE=…SIZE=…COLOR=…>

…содержимое контейнера…

< /FONT>

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

< BASEFONT FACE=…SIZE=…COLOR=…>

Тег BASEFONT не имеет закрывающего тега и должен располагаться в самом начале содержимого контейнера BODY.

Тип шрифта

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

FACE = «Courier New, Arial, Tahoma»

Если атрибут FACE не указан, браузеры будут использовать по умолчанию шрифт Times New Roman

< FONT FACE= « Courier New»> Courier New< \FONT> < BR>

< FONT FACE= « Arial» > Arial< \FONT> < BR>

< FONT FACE= «Tahoma»> Tahoma < \FONT> < BR>

< FONT FACE= «System»> System < \FONT> < BR>

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

Для изменения размера шрифта в тексте используется атрибут SIZE. Размер шрифта задаётся по некой шкале, самостоятельно определяемой браузером конечного пользователя и не имеющей прямой связи с размером типографской точки и другими единицами измерения.

SIZE= абсолютный размер

SIZE= относительный размер

Атрибут SIZE устанавливает размер шрифта текста, содержащегося в пределах тега FOND. Можно задать абсолютный размер шрифта, указав какое-либо целое число от 1 до 7. Для шрифта можно также указывать относительный размер (желательно в кавычках), присваивая атрибуту целое число со знаком, например, SIZE= «+1» или SIZE= «-2». В последнем случаи реальный размер шрифта определяется суммированием указанного в атрибуте значения и текущего базового размера, заданного тегом BASEFONT.

Если в теге BASEFONT не используется атрибут SIZE, то По-умолчанию используется размер 3.

Цвет текста

Изменение цвета текста производится с использованием атрибута COLOR. Данный атрибут указывает цвет, которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо точным названием цвета на английском языке.

Например,

COLOR = #FF0000

COLOR = Red.

Для получения любого другого оттенка цвета можно применить различные комбинации RGB-значений, записанные в шестнадцатеричном формате. На прилагаемом диске находится файл Таблица цветов.htm в котором приведены 216 цветов, хорошо отображающихся браузерами на мониторах в 256-цветном режиме, а так же названия этих цветов.

С) Таблицы

Оформление таблиц

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

Тег < TABLE> позволяет использовать следующие основные атрибуты:

BORDER – определяет ширину внешней рамки таблицы (в пикселях).

CELLPADDING – определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLSPACING – определяет расстояние (в пикселях) между границами соседних ячеек.

ALIGN – определяет способ горизонтального выравнивания таблицы. Возможные значения: left – по левому краю, center – по центру, right – по правому краю. Значение по умолчанию – left.

WIDTH и HEIGHT – определяет ширину и высоту таблицы, значение задается либо в пикселях, либо в процентном отношении к ширине окна браузера.

BGCOLOR – определяет цвет фона ячеек таблицы. Он задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

< CAPTION> – специальный парный тег для описания заголовка таблицы. Атрибут этого тега ALIGN определяет место размещения заголовка. Его значение top помещает заголовок над таблицей, а bottom – под таблицей.

< TABLE BORDER=15 WIDTH=400 HEIGHT=200 ALIGN=CENTER BGCOLOR=Yellow>

< CAPTION ALIGN=”bottom”> Оформленная таблица< /CAPTION>

< TR> < TD> Ячейка1.1< /TD> < TD> Ячейка 1.2< /TD> < /TR>

< TR> < TD> Ячейка2.1< /TD> < TD> Ячейка 2.2< /TD> < /TR>

< TR> < TD> Ячейка3.1< /TD> < TD> Ячейка 3.2< /TD> < /TR>

< /TABLE>

При использовании темного фона таблицы, можно изменить цвет текста в ячейках, например:

< FONT COLOR=WHITE> Текст… < /FONT>.

Необходимо иметь в виду, что тег < FONT> …< /FONT> должен находиться внутри тегов изменяемой ячейки таблицы.

Сложные таблицы

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

Кроме тега < TD> (Table Data) для создания ячейки можно применять тег < TH> (Table Head), который также создает ячейку, но определяет ее как заголовок с увеличенным шрифтом.

Для оформления содержимого ячеек можно использовать следующие атрибуты: ALIGN, WIDTH, HEIGHT, BGCOLOR, которые определяют способ горизонтального выравнивания содержимого ячейки, её ширину, высоту и цвет соответственно.

VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top - по верхнему краю, bottom - по нижнему краю, middle - по центру.

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

ROWSPAN - определяет количество рядов, на которые простирается данная ячейка (высота ячейки в строках). По умолчанию имеет значение 1.

< TABLE BORDER=15 ALIGN=CENTER BGCOLOR=Yellow>

<! --строка 1 большой таблицы-->

< TR> < TD>

< TABLE BORDER=10 WIDTH=300 HEIGHT=100> < TR>

< TH ROWSPAN=2> Высокая ячейка< /TH> < TD> Ячейка< /TD>

< TD> Ячейка< /TD> < /TR> < TR> < TD> Ячейка< /TD>

< TD> Ячейка< /TD> < /TR> < TABLE> < /TD> < /TR>

<! --Строка 2 большой таблицы-->

< TR> < TD>

< TABLE BORDER=10 WIDTH=300 HEIGHT=100>

< TR> < TH COLSPAN=2> Широкая ячейка < /TH> < /TR>

< TR> < TD> Ячейка < /TD> < TD> Ячейка < /TD> < /TR> < TR>

< TD> Ячейка < TD> Ячейка < /TD> < /TR> < /TABLE> < /TD>

< /TR> < /TABLE>

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

d) Графика

Изображения в HTML

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

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

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

Для размещения изображений существует специальный тег < IMG>, имеющий обязательный параметр SRC= «адрес».

< IMG SRC= «адрес» атрибут1, атрибут2…>

IMG – тег изображения

SRC= «адрес» - атрибут источника

атрибут1, атрибут2… - атрибуты изображения

В качестве параметра (адрес) может использоваться несколько типов аргументов:

имя файла с изображением (для изображений, находящихся в текущем каталоге)

адрес файла с изображением (для изображений, находящихся в других каталогах)

URL изображения (для изображений, находящихся в сети Интернет или на вашем сервере)

Выравнивание изображений

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

< IMG SRC=”адрес” ALIGN=…>

Он может принимать следующие значения:

left или right –выравнивает изображение по левому или правому краю документа.

top - выравнивает верхнюю линию текущей текстовой строки относительно верхней кромки изображения.

middle - выравнивает базовую (нижнюю) линию текущей текстовой строки с вертикальным центром изображения.

bottom - выравнивает базовую линию текстовой строки относительно нижней кромки изображения.

Кроме этого для центрирования изображения по горизонтали всего HTML – документа используется тег < CENTER>.

< IMG SRC=”адрес” ALIGN=top>

< IMG SRC=”адрес” ALIGN=middle>

< IMG SRC=”адрес” ALIGN=bottom>

< IMG SRC=”адрес” ALIGN=left>

< IMG SRC=”адрес” ALIGN=right>

< CENTER> < IMG SRC=”адрес”> < /CENTER>

E)Гиперссылки

Что такое гипертекст?

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

В HTML переход по гиперссылке задается с помощью тега вида:

< A HREF=”[адрес]”> ссылка< /A>

”[адрес]” – адрес перехода;

ссылка - текст, активизация которого вызывает переход.

В качестве параметра [адреса перехода] может использоваться несколько типов аргументов:

§ адрес документа

§ адрес сайта сети Интернет или внешнего сервера

§ адрес электронной почты

§ адрес перехода к определенному месту внутри документа.

Переходы внутри документа

При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри документа. Для этого необходимо создать в документе некоторую опорную точку или анкер. Это тег < A> специального вида, в котором используется атрибут NAME. Допустим, что необходимо осуществить переход к слову ''Параграф 1''.

Прежде всего необходимо создать анкер, находящийся в месте расположения требуемого слова и «охватывающего» его:

< A NAME = “Метка 1”> Параграф 1< /A> где: Метка 1 - имя анкера.

Слово “Параграф 1”при этом не как не будет выделен в тексте документа браузером. Затем необходимо определить ссылку для перехода на этот анкер: < A HREF=”#Метка 1”> Переход к слову – Параграф 1 < /A>.

При активизации этой ссылки браузер переместит изображение страницы так, чтобы текст «Анкер1» оказался в верней видимой строке окна.

f) & -последовательности

В HTML имеется возможность вывести на экран специальные или зарезервированные символы, это делается с помощью & -последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ «< », когда встречается в тексте последовательность & lt (по первым буквам английских слов less than- меньше, чем). Знак «> » кодируется последовательностью & gt (по первым буквам английских слов greater than – больше, чем). Символ «& » (амперсант) кодируется последовательностью & amp. Двойные кавычки ('') кодируются последовательностью & quot. Очень часто используется неразрывный пробел- & nbsp.

& -последовательности - символьные объекты или эскейп- последовательности - кодовая комбинация, позволяющая вывести на экран специальные символы.

Ниже приведено несколько часто используемых & -последовательностей

& larr	Стрелка влево	& cent	Цент
& uarr	Стрелка вверх	& pound	Фунт стерлингов
& rarr	Стрелка вправо	& curren	Денежная единица
& darr	Стрелка вниз	& yen	Иена или юань
& harr	Стрелка влево-вправо	& brvbar	Разорванная вертикальная черта
& iexcl	Перевернутый восклицательный знак	& sect	параграф

G)Режимы браузеров

Во время противостояния браузеров Internet Explorer и Netscape каждый из разработчиков старался улучшить свой продукт. Netscape 4 и IE4 плохо поддерживали веб-стандарты, поэтому следующая версия, IE5 должна была не только исправить ошибки IE4, но и показать улучшенную поддержку спецификации CSS. Это было необходимо еще и по политическим мотивам, поскольку компания Microsoft вошла в группу W3C и начала оказывать сильное влияние на разработку HTML и CSS.

В процессе работы над браузером IE5 его разработчики столкнулись с неожиданной трудностью. Разница при отображении страницы в разных версиях браузера была настолько велика, что множество сайтов оказались бы неработоспособными при просмотре в IE5. Идея сделать кнопку для переключения в режим совместимости пришла только в версии 8.0, поэтому разработчики IE5 пошли другим путём. Все старые страницы отображались по старым правилам, а для включения режима поддержки стандартов в код страницы необходимо добавить элемент <! DOCTYPE> (доктайп).

Режим браузера для просмотра конкретной веб-страницы устанавливается через элемент <! DOCTYPE>, который является обязательным согласно спецификации HTML и XHTML. Сложности возникают из-за того, что по сути доктайп не один, а различается дополнительными параметрами, влияющими в итоге на режим отображения страницы.

Почти стандартный режим

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

Для HTML:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >

Для фреймов в HTML:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Frameset//EN" " http: //www.w3.org/TR/html4/frameset.dtd" >

Для XHTML:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" >

Для фреймов в XHTML:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Frameset//EN" >

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

Строгий доктайп

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

Для HTML 4.01:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >

Для XHTML 1.0:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

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

· Осуждается использование следующих тегов:

< applet>, < basefont>, < center>, < dir>, < font>, < isindex>, < noframes>, < plaintext>, < s>, < strike>, < u>, < xmp>. Взамен по возможности рекомендуется использовать стили.

· Текст, изображения и элементы форм нельзя напрямую добавлять в < body>, эти элементы должны обязательно находиться внутри блочных элементов вроде < p> или < div>.

· Осуждается применение атрибутов

target, start (тег < ol> ), type (теги < li>, < ol>, < ul> ) и др.

Естественно, также должен соблюдаться синтаксис языка — правильное вложение тегов, закрытие тегов, должны присутствовать обязательные теги и др. Документ с неявными ошибками приведён в примере 1

Пример 1. Невалидный код HTML

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < title> Заголовок< /title> < /head> < body> < form> < input type=" text" > < /form> < /body> < /html>

В данном примере у тега < form> нет обязательного атрибута action, тег < input> располагается напрямую внутри формы, хотя должен быть заключён в блочный тег. Также не указана кодировка через метатег. Это не является ошибкой, но пользователям в некоторых случаях придется самостоятельно указывать её в браузере. Валидный код XHTML с учётом исправленных ошибок при строгом доктайпе продемонстрирован в примере 2.

Пример 2. Валидный код XHTML

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns=" http: //www.w3.org/1999/xhtml" > < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" /> < title> Заголовок< /title> < /head> < body> < form action=" " > < p> < input type=" text" /> < /p> < /form> < /body> < /html>

Переходный доктайп

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

Для HTML 4.01:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >

Для XHTML 1.0:

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

Цель переходного доктайпа заключается в постепенном знакомстве с синтаксисом языка. При переходном доктайпе добавление target к тегу < a> абсолютно валидно (пример 3).

Пример 3 Использование переходного доктайпа
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns=" http: //www.w3.org/1999/xhtml" > < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" /> < title> Ссылка в новом окне< /title> < /head> < body> < a href=" http: //htmlbook.ru" target=" _blank" > Открыть в новом окне< /a> < /body> < /html>

HTML5

В HTML5 существует лишь один тип доктайпа, который переводит браузер в стандартный режим.

<! DOCTYPE html>

Режимы Internet Explorer

СОЗДАНИЕ HTML СТРАНИЦ

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

b) Форматирование

c) Таблицы

d) Графика

e) Гиперссылки

f) & -последовательности

g) Режимы браузеров

h)Логическая и физическая структура сайта

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

Понятия языка разметки

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

Тег (от англ., tag – ярлык, метка) – элемент языка HTML, используемый для разметки Web-страниц.

История развития HTML

HTML 2.0 (ноябрь 1995) – был разработан под эгидой Internet для упорядочения общепринятых положений.

Типы HTML-редакторов

Для создания любого файла нужна какая-нибудь программа.

HTML-редакторы подразделяются на два типа:

§ редакторы тегов (HTMLPad, LightPad, HomeSite, Visual HTML Workshop) – предполагают, что пользователь знаком с языком HTML

Редакторы тегов

Подготовка сайта с помощью редакторов тегов включает в себя этапы:

Создание HTML-документа;

Сохранение;

Просмотр полученной Web-страницы в браузере;

Размещение сайта в сети Интернет.

Набор содержимого в любом из текстовых редакторов (например, Блокнот ) и сохранение обычного текстового файла.
Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением.htm или.html (делается в Блокноте в кодировке Unicode).
Организация переходов по гиперссылкам документа при помощи элемента < А > - основного связующего элемента языка HTML.
Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML.

5. Структура < HTML> -документа

Любой < HTML> -документ состоит из следующих основных частей:

§ Строки с информацией о версии HTML, используемой в данном документе

§ Блока заголовка документа

§ Тела документа.

Условно теги делятся на следующие типы:

· теги верхнего уровня;

· теги заголовка документа;

· блочные элементы;

· строчные элементы;

· универсальные элементы;

· списки;

· таблицы;

· фреймы.

Разница между блочными и строчными элементами следующая:

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

12 3 4 5 Следующая ⇒