В прошлом видео уроке мы закончили разговор об объектах в HTML. И узнали как вставить аудио в HTML-документ. Опять же закрепили свои знания в изучении тегов object и param. Кроме того, еще раз вспомнили как подключать скрипты в HTML-документе.
После того, как мы изучили теги <object> и <param> можно считать, что мы знакомы со всеми HTML-тегами, которые мы можем использовать. Сразу скажу, чтобы не у кого не возникало сомнений, это действительно так, больше нет тегов, которые мы могли бы использовать. Однако стоит учитывать, что те теги, о которых мы поговорим сегодня нельзя использовать в строгой спецификации документа, то есть с использованием строгого <!DOCTYPE>. А как мы можем помнить, именно строгий тип документа нами был выбран в самом начала видео курса. На то есть свои причины. И самая основная заключается в том, чтобы уменьшить количество ошибок до минимума.
В этом видео уроке мы поговорим о последних тегах, в рамках этого курса. Это устаревшие теги. На самом деле их довольно много при использовании строго типа документа, поэтому какие-то теги мы рассмотрим чуть подробнее, а какие-то просто будут упомянуты. Для начала, я предлагаю полный список устаревших HTML-тегов для версии 4.01:
<applet></applet> <basefont /> <center></center> <dir></dir> <isindex /> <s></s> <u></u> <iframe width="300" height="150"></iframe> <menu></menu>
Чтобы упростить задачу по их рассмотрению, мы будем рассматривать сразу несколько тегов похожих друг на друга, если таковые имеются.
Тег <applet>.
Тег <applet> добавляет некие Java-апплеты в HTML-документ. Он является устаревшим, с использованием строго типа документа, и вместо него необходимо использовать тег <object>. Однако стоит отметить, что данный тег можно использовать, если тип нашего документа: Transitional или Frameset. Но при этом мы должны использовать обязательные атрибуты width и height.
Теги <font> и <basefont>.
Эти теги я объединил хоть они и не являются абсолютно идентичными, однако направлены на указание характеристик шрифта в документе.
Но при этом HTML-тег <basefont> устанавливает значение характеристик шрифта по умолчанию для всего документа. И указывается сразу после открывающего тега <body>. Опять же, он может быть использован в другом типе документа: Transitional или Frameset. Но при этом должен быть использован обязательный HTML-атрибут size. Также стоить учесть, что некоторыми веб-браузерами этот тег не поддерживается.
А тег <font> предназначен для изменения характеристик текста в каком-то определенном месте документа. Например, мы можем указать цвет шрифта или размер для определенной части текста внутри общей массы текста, чтобы выделить нужную часть. HTML-тег <font> также может быть применен при использовании типа документа: Transitional или Frameset.
Пример использования тега <font>:
Какой-то текст
Следует помнить, что данное оформление должно назначаться с помощью таблиц стилей CSS. Например, чтобы назначит характеристики шрифта по умолчанию мы можем использовать селектор body:
body{
font:14px/17px Arial,sans-serif;
}
Все довольно просто. Не правда ли?
Но как же тогда назначить определенные характеристики для какой-либо части текста? В этом тоже нет ничего сложно. Для начала нам необходимо воспользоваться универсальным тегом <span> и назначить ему какой-нибудь класс:
Какой-то текст
А затем уже для выбранного класса мы можем прописать какие угодно стили:
.text{
font:18px/21px;
color:red;
}
В этом случае текст который находится внутри универсального тега <span> с классом text будет увеличен и покрашен в красный цвет.
HTML-тег <center>.
О теге <center> мы могли уже слышать ранее, так как он при написании кода довольно часто может быть использован. Но при этом он является устаревшим тегом, если мы используем строгий <!DOCTYPE>, и документ с таким тегом не пройдет валидацию, о которой мы кстати скоро поговорим. Конечно же стоит отметить что в других вариантах спецификации: Transitional и Frameset, мы можем использовать этот тег.
Тег <center> предназначен для выравнивания текста, который находится внутри открывающего и закрывающего тега <center>, по центру. Пример использования:
Но как выровнять текст по центру и при этом пройти валидацию используя строгий <!DOCTYPE>? Все очень просто. Для этого достаточно использовать свойство text-align со значением center к необходимому селектору. Например:
p{
text-align: center;
}
В этом случае весь текст который находится внутри тегов абзаца будет выравниваться по центру страницы.
Теги <dir> и <menu>.
Оба тега предназначены для одного и того же: для создания списков по типу <ul>. Единственное отличие между ними в том, что тег <dir> создает список директорий, а тег <menu> создает список пунктов меню. Что касается их использования, то при использовании Transitional или Frameset мы можем их использовать, но при этом внутри этих тегов должны присутствовать отдельные элементы списка: <li>. Однако эти элементы не имеют особого смысла в их использовании. Вместо них мы можем спокойно использовать теги <ul>. При этом мы получим тот же результат и это не будет являться ошибкой, будь-то меню или список папок, не важно.
Тег <isindex>.
Тег <isindex> предназначен для поискового индекса в текущем документе. Однако мало того что он считается устаревшим в строгом типе документа, так он еще и плохо поддерживается браузерами, а некоторыми и вовсе не поддерживается. Поэтому не вижу смысла продолжать обсуждение этого тега.
Теги <s> и <strike>.
У тегов <s> и <strike> абсолютно одинаковая цель, это отображение текста, как перечеркнутый. Оба тега не имеют предназначения донести до браузера или поисковой системы, что-то о перечеркнутых словах или предложениях. Они относятся больше к визуальному оформлению, чтобы посетитель видел, что текст перечеркнут. Но как я упоминал выше, на данный момент любое визуальное оформления HTML-документа правильнее указывать с помощью таблиц стилей CSS.
Кстати, по ходу курса мы уже говорили о перечеркнутом тексте. Но в том случае мы использовали теги, которые не являются устаревшими, и они несли какую-то дополнительную информация для веб-браузеров и поисковых систем.
Возвращаясь к тегам <s> и <strike>, если мы не используем строгий тип документа, мы можем использовать эти теги. В случаях когда типами документов выбран один из вариантов: Transitional или Frameset.
Что касается использования тегов, то оба элемента являются парными и строчными, а значит должны быть внутри блочных. Рассмотрим пример с использованием HTML-тега <s>:
перечеркнутый текст
Точно также мы можем использовать и тег <strike>. Несмотря на поддержку некоторыми <!DOCTYPE> этих элементов, стоит проверять их поддержку различными браузерами.
HTML-тег <u>.
Еще один тег, предназначенный для форматирования текста. Данный тег добавляет подчеркивание тексту, который находится внутри тегов. Опять же элемент <u> сможет пройти валидацию, с использованием таких <!DOCTYPE> как: Transitional и Frameset.
Пример использования тега <u> ничем особым не отличается от применения тегов <s> и <strike>:
Подчеркнутый текст
HTML-теги <frame> и <frameset>.
Эти два тега обладают одной особенностью. Мы можем их использовать только при использовании <!DOCTYPE> типа Frameset. Это следует учитывать. Иначе документ, который будет использовать другой тип документа не пройдет валидацию с применением тегов <frame> и <frameset>.
HTML-тег <frame>, предназначен для указания отдельных свойств фреймов, на которые будет разделено окно веб-браузера. Также стоит помнить, что этот элемент не может быть использован без тега <frameset>, и должен располагаться внутри его. Фреймы имеют довольно большое количество минусов, поэтому я не буду особо рассказывать, как и где их можно использовать, тем более в нашем случае они являются устаревшими элементами. Единственное, что я могу представить, это небольшой список атрибутов, которые могут быть переданы отдельному фрейму.
bordercolor, предназначен для определения цвета границы фрейма.
frameborder, нужен для вывода рамки вокруг фрейма. Иначе говоря, этим атрибутом мы сможем определить будет ли отображена граница фрейма или нет.
name, для указания уникального имени фрейма. рекомендуется применять, хотя обязательных атрибутов у данных элементов и нет.
noresize, предназначен для определения возможности изменения размеров окна фрейма самим пользователем.
scrolling, может пригодиться для определения способа отображения полосы прокрутки внутри окна фрейма.
src, предназначен для указания пути к файлу, который должен быть загружен внутри фрейма, если таковой имеется.
Что касается примера использования, то все довольно просто. Внутри тега <frameset> прописываем тег, который, кстати, одиночный, и указываем необходимые параметры для него, о которых мы поговорили выше. Я для примера укажу только имя, думаю этого будет достаточно:
HTML-тег <frameset>, определяет структуру фреймов на странице. Если говорить другими словами, то все тело страницы будет определенно под использование фреймов. И самое главное, что следует помнить тег <frameset> заменяет тег <body>. То есть вместе эти элементы не могут быть использованы.
Он также имеет некоторые атрибуты:
border, определяет толщину границы между фреймами.
bordercolor, определяет цвет границы между фреймами.
cols, определяет ширину фреймов в виде колонок.
rows, определяет высоту в виде строк.
frameborder, определяет будет ли отображена рамка вокруг фреймов или нет.
framespacing, как и border, задает толщину границы рамки.
Что касается примера применения, то здесь все также просто. Указываем тег <frameset> и добавляем необходимые атрибуты:
HTML-теги <iframe> и <noframes>.
HTML-тег <iframe> является довольно популярным в HTML, хотя и не является валидным, при использованием строгого <!DOCTYPE> в документе в версии HTML 4.01. Может применяться при использовании других типов документа: Transitional и Frameset. При этом, в отличие от тега <frame> он может быть использован не только внутри <frameset>, но и внутри тега <body>. Предназначен для создания плавающего фрейма, в который с помощью указания размеров мы можем загрузить любые другие документы.
Популярен он не только из-за его возможности встраивания в обычный документ, но и из-за гибкости настроек. Атрибутов у тега <iframe> довольно много, что позволяет настроить его отображение так как нам необходимо:
align, определяет выравнивание от края а также метод обтекания текстом.
allowtransparency, устанавливает прозрачный фон фрейма.
frameborder, определяет будет ли видна граница фрейма или нет.
height, устанавливает высоту.
hspace, определяет горизонтальный отступ от остального контента на странице.
marginheight, отступ сверху и снизу от содержания до границы фрейма.
marginwidth, отступ слева и справа от содержания до границы фрейма.
name, определяет уникальное имя фрейма.
sandbox, позволяет установить ограничения на контент загружаемый внутри фрейма.
scrolling, может пригодиться для определения способа отображения полосы прокрутки внутри окна фрейма.
seamless, определяет отображения фрейма как часть документа, а не отдельного плавающего окна.
src, указывает путь к документу, который будет загружен внутри фрейма.
srcdoc, хранит содержимое подгружаемого документа непосредственно в значении атрибута.
vspace, определяет вертикальный отступ от остального контента на странице.
width, определяет ширину окна фрейма.
Как мы могли заметить у тега <iframe> довольно много различных атрибутов. Кроме уже перечисленных мы можем применять универсальные атрибуты и HTML-события.
Ну а теперь небольшой примерчик с применением некоторых основных атрибутов. Еще хотелось бы отметить, что тег является парным, и блочным элементом:
HTML-тег <noframes> предназначен для вывода информации для пользователя, у которого браузер не поддерживает фреймы. Этот тег также является устаревшим в нашем случае. Однако мы можем его применять при использовании таких <!DOCTYPE> как: Transitional и Frameset. И, кстати, по типу работы и предназначению очень похож на тег <noscript>, о котором мы не так давно говорили.
Пример использования <noframes> очень прост:
Теперь можно сказать, что мы изучили все HTML-теги, которые можно применять используя для написания HTML версии 4.01. Осталось только раскрыть еще пару тем и весь видео курс по HTML можно будет считать завершенным.
Что касается сегодняшней темы, то тема устаревших тегов получилось довольно подробной, надеюсь это поможет Вам разобраться, когда и какие HTML-элементы можно использовать, а когда нет. Главное всегда помнить, на чем это основано. Конечно же, на <!DOCTYPE>. Все очень сильно зависит от типа документа, который мы выбираем в самом начале создания страницы.
Видео урок: Устаревшие теги в HTML 4.01.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы поговорим о спецсимволах в HTML.
