Встроенный стиль должен использоваться, когда особый стиль должен быть применен к единственному появлению элемента.
Чтобы использовать встроенные стили, используется атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS. Следующий пример показывает, как изменить цвет и левое поле параграфа:
< html> < body> < p style=" color: red; margin-left: 20px" > Это параграф < /p> < /body> < /html>
Пример выполнения данного HTML-кода
Чтобы больше узнать о стилях, почитайте учебник о CSS.
Теги стилей
Тег
Описание
< style>
Задает определение стиля
< link>
Задает ссылку на ресурс
< div>
Определяет раздел в документе
< span>
Определяет раздел в документе
< font>
Не рекомендуется. Используйте вместо этого стили.
< basefont>
Не рекомендуется. Используйте вместо этого стили.
< center>
Не рекомендуется. Используйте вместо этого стили.
Раздел заголовка HTML
Заглавие документа
< html> < head> < title> Название документа не выводится< /title> < /head> < body> < p> Выводится этот текст< /p> < /body> < /html> Пример выполнения данного HTML-кода
Информация о названии документа в элементе заголовка не выводится в окне браузера.
Одно место назначения для всех ссылок
< html> < head> < base target=" _blank" > < /head> < body> < p> < a href=" https://www.intuit.ru" target=" _blank" > Эта ссылка < /a> будет загружаться в новом окне, так как атрибут target задан как " _blank".< /p> < p> < a href=" https://www.osp.ru" > Эта ссылка< /a> также будет загружаться в новом окне, даже без атрибута target.< /p> < /body> < /html> Пример выполнения данного HTML-кода
Этот пример показывает, как использовать тег base, чтобы все ссылки на странице открывались в новом окне.
Элемент head
Элемент head содержит общую информацию, называемую также мета-информацией, о документе. Мета означает " информация о чем-то".
Можно сказать, что мета-данные означают информацию о данных, или мета-информация означает информацию об информации.
Элементы внутри элемента head не выводятся браузером. Согласно стандарту HTML, внутри раздела head допустимы только несколько тегов. Это теги < base>, < link>, < meta>, < title>, < style>, и < script>.
Посмотрите на следующую незаконную конструкцию:
< head> < p> Это какой-то текст< /p> < /head> В этом случае у браузера есть две возможности:
Вывести текст, потому что он находится внутри элемента параграфа
Скрыть текст, потому что он находится внутри элемента заголовка
Если поместить элемент HTML, такой как < h1> или < p>, внутрь элемента head, как в этом случае, большинство браузеров его выведут, даже если это незаконно.
Должны ли браузеры прощать подобные ошибки? Наверно, это неправильно.
Теги заголовка
Тег
Описание
< head>
Определяет информацию о документе
< title>
Определяет заглавие документа
< base>
Определяет базовый URL для всех ссылок на странице
< link>
Определяет ссылку на ресурс
< meta>
Определяет мета-информацию
<! DOCTYPE>
Определяет тип документа. Этот тег идет перед начальным тегом < html>.
Мета-информация в HTML
Описание документа
< html> < head> < meta name=" author" content=" Иван Петров" > < meta name=" revised" content=" Иван Петров, 16/10/05" > < meta name=" generator" content=" Microsoft FrontPage 4.0" > < /head> < body> < p> Атрибуты meta этого документа определяют автора и использованную программу редактора.< /p> < /body> < /html> Пример выполнения данного HTML-кода
Информация внутри элемента meta описывает документ.
Ключевые слова документа
< html> < head> < meta name=" description" content=" примеры HTML" > < meta name=" keywords" content=" HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" > < /head> < body> < p> Атрибуты meta этого документа описывают документ и его ключевые слова.< /p> < /body> < /html> Пример выполнения данного HTML-кода
Информация внутри элемента meta описывает ключевые слова документа.
Перенаправление пользователя
< html> < head> < meta http-equiv=" Refresh" content=" 5; url=https://www.intuit.ru" > < /head> < body> < p> Извините! Мы переехали! Новый URL: < a href=" https://www.intuit.ru" > https://www.osp.ru< /a> < /p> < p> Вы будете перенаправлены на новый адрес через пять секунд.< /p> < p> Если вы видите это сообщение более 5 секунд, щелкните, пожалуйста, на приведенной выше ссылке! < /p> < /body> < /html> Пример выполнения данного HTML-кода
Этот пример показывает, как перенаправить пользователя, если адрес сайта изменился.
Элемент meta
Как было показано в предыдущей лекции, элемент head содержит общую информацию (мета-информацию) о документе.
HTML имеет также элемент meta, который помещается внутри элемента head. Элемент meta предназначен для предоставления мета-информации о документе.
Наиболее часто элемент meta используется для предоставления информации, которая имеет отношение к браузерам или поисковым машинам, описывающая содержание документа.
Примечание: Консорциум W3C заявляет в документе https://www.w3.org/TR/html4/struct/global.html#adef-http-equiv, что " Некоторые агенты пользователей поддерживают использование META для обновления текущей страницы после указанного количества секунд, с возможностью заменить ее другим URL. Авторы не должны использовать эту технику для пересылки пользователей на другие страницы, так как это делает страницу недоступной для некоторых пользователей. Вместо этого автоматическое перенаправление страницы должно делаться с помощью перенаправления на сервере".
Ключевые слова для поисковых машин
Некоторые поисковые машины в WWW будут использовать атрибуты name и content тега meta для индексации страницы.
Этот элемент meta определяет описание страницы:
< meta name=" description" content=" Бесплатные Web-учебники по HTML, CSS, XML, и XHTML" > Этот элемент meta определяет ключевые слова для страницы:
< meta name=" keywords" content=" HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" > Назначение атрибутов name и content состоит в описании содержимого страницы.
Однако, так как многие вебмастера использовали теги meta для недобросовестной рекламы, увеличивая количество повторений ключевых слов, чтобы страница получила более высокое положение, некоторые машины поиска полностью перестали использовать этот тег.
О машинах поиска можно почитать в учебнике по созданию Web-сайтов.
Неизвестные атрибуты meta
Иногда можно встретить атрибуты meta, которые могут оказаться совершенно незнакомыми, например:
< meta name=" security" content=" low" > Тогда необходимо просто принять для себя, что это является чем-то уникальным для сайта или для автора сайта и не имеет, вероятно, к вам никакого отношения.
Весь список атрибутов элемента meta можно найти в Полном справочнике тегов HTML 4.01 в конце книги.
Универсальные указатели ресурсов в HTML
Ссылки в HTML
Во время щелчка мышью на ссылке в документе HTML нижележащий тег < a> указывает на определенное место (адрес) в Web с помощью значения атрибута href, например, следующим образом:
< a href=" lastpage.htm" > Последняя< /a>. Ссылка " Последняя" в этом примере является ссылкой относительно Web-сайта, который вы просматриваете, а браузер создаст для доступа к странице полный адрес Web вида https://www.osp.ru/html/lastpage.htm.
Универсальные указатели ресурсов
Для адресации документа (или других данных) в WWW используется так называемый Универсальный указатель ресурса (URL - Uniform Resource Locator). Полный адрес в Web, такой как https://www.osp.ru/html/lastpage.htm следует следующим правилам синтаксиса:
scheme: //host.domain: port/path/filename
scheme определяет тип службы Интернет. Наиболее распространенным типом является http.
domain определяет имя домена Интернет, например, osp.ru.
host определяет хост домена. Если он отсутствует, то по умолчанию для http используется хост www.
: port определяет номер порта на хосте. Номер порта обычно отсутствует. По умолчанию для http используется порт с номером 80.
path определяет путь доступа (подкаталог) на сервере. Если путь доступа отсутствует, то ресурс (документ) должен быть расположен в корневом каталоге сайта Web.
filename определяет имя документа. По умолчанию может использоваться имя файла default.asp, или index.html или что-то еще, в зависимости от настроек Web-сервера.
Схемы обращения к ресурсу URL
Несколько примеров наиболее распространенных схем обращения к ресурсу:
Схема
Доступ
file
файл на локальном ПК
ftp
файл на сервере FTP
http
файл на сервере WWW
gopher
файл на сервере Gopher
news
группа новостей Usenet
telnet
соединение Telnet
WAIS
файл на сервере WAIS
Доступ к группе новостей. Следующий код HTML:
< a href=" news: alt.html" > HTML Newsgroup< /a>
создает ссылку на группу новостей вида " HTML Newsgroup".
Загрузка с помощью FTP. Следующий код HTML:
< a href=" ftp: //www.osp.ru/ftp/winzip.exe" > Загрузить WinZip< /a>
создает ссылку для загрузки файла следующего вида: " Загрузить WinZip". (Эта ссылка не работает. Это просто пример.)
Ссылка на почтовую систему. Следующий код HTML:
< a href=" mailto: info@intuit.ru" > info@intuit.ru< /a>
создает ссылку на вашу собственную почтовую систему.
Сценарии в HTML
Сценарии на страницах HTML позволяют сделать их более динамичными и интерактивными.
< html> < body> < script type=" text/javascript" > document.write(" < h1> Всем привет! < /h1> ")< /script> < /body> < /html> Пример выполнения данного HTML-кода
Этот пример показывает, как использовать сценарий в документе HTML.
Работа с браузерами, не поддерживающими сценарии
< html> < body> < script type=" text/javascript" > <! --document.write(" Если этот текст виден, то браузер поддерживает сценарии! ")//--> < /script> < noscript> Нет поддержки JavaScript! < /noscript> < p> Браузер без поддержки JavaScript выведет текст из элемента noscript.< /p> < /body> < /html> Пример выполнения данного HTML-кода
Этот пример показывает, как работать с браузерами, которые не поддерживают сценарии.
Добавление сценария на страницу HTML
Сценарий в HTML определяют с помощью тега < script>. Обратите внимание, что для определения языка сценария необходимо использовать атрибут type.
< html> < head> < /head> < body> < script type=" text/javascript" > document.write(" Всем привет! ")< /script> < /body> < /html> Пример выполнения данного HTML-кода
Этот сценарий создаст следующий вывод:
Всем привет! Примечание: Чтобы узнать больше о сценариях в HTML, почитайте соответствующий учебник по JavaScript.
Как работать со старыми браузерами
Браузер, который вообще не распознает тег < script>, будет выводить содержимое тега < script> в виде текста на странице. Чтобы браузер этого не делал, необходимо спрятать сценарий в тегах комментария. Старый браузер (который не распознает тег < script>) проигнорирует комментарий и не будет выводить содержимое тега на странице, в то время как более новые браузеры поймут, что скрипт необходимо выполнить, даже если он окружен тегами комментария.
JavaScript:
< script type=" text/javascript" > <! --document.write(" Всем привет! ")//--> < /script> VBScript:
< script type=" text/vbscript" > <! --document.write(" Всем привет! ")'--> < /script> Тег < noscript>
Кроме скрытия сценария внутри комментария можно добавить также тег < noscript>.
Тег < noscript> используется для определения заменяющего текста, если сценарий НЕ выполняется. Этот тег используется для браузеров, которые распознают тег < script>, но не поддерживают расположенный внутри сценарий, поэтому эти браузеры будут выводить вместо этого текст внутри тега < noscript>. Однако, если браузер поддерживает сценарий внутри тега < script>, то он проигнорирует тег < noscript>.
JavaScript:
< script type=" text/javascript" > <! --document.write(" Hello World! ")//--> < /script> < noscript> Ваш браузер не поддерживает JavaScript! < /noscript> VBScript:
< script type=" text/vbscript" > <! --document.write(" Hello World! ")'--> < /script> < noscript> Ваш браузер не поддерживает VBScript! < /noscript>
Теги сценариев
Тег
Описание
< script>
Определяет сценарий
< noscript>
Определяет заменяющий текст, если сценарий не выполняется
< object>
Определяет встроенный объект
< param>
Определяет для объекта настройки времени выполнения (параметры)
< applet>
Не рекомендуется. Используйте вместо этого < object>
Раздел заголовка HTML
Заглавие документа
< html> < head> < title> Название документа не выводится< /title> < /head> < body> < p> Выводится этот текст< /p> < /body> < /html> Пример выполнения данного HTML-кода
Информация о названии документа в элементе заголовка не выводится в окне браузера.
Одно место назначения для всех ссылок
< html> < head> < base target=" _blank" > < /head> < body> < p> < a href=" https://www.intuit.ru" target=" _blank" > Эта ссылка < /a> будет загружаться в новом окне, так как атрибут target задан как " _blank".< /p> < p> < a href=" https://www.osp.ru" > Эта ссылка< /a> также будет загружаться в новом окне, даже без атрибута target.< /p> < /body> < /html> Пример выполнения данного HTML-кода
Этот пример показывает, как использовать тег base, чтобы все ссылки на странице открывались в новом окне.
Элемент head
Элемент head содержит общую информацию, называемую также мета-информацией, о документе. Мета означает " информация о чем-то".
Можно сказать, что мета-данные означают информацию о данных, или мета-информация означает информацию об информации.
Элементы внутри элемента head не выводятся браузером. Согласно стандарту HTML, внутри раздела head допустимы только несколько тегов. Это теги < base>, < link>, < meta>, < title>, < style>, и < script>.
Посмотрите на следующую незаконную конструкцию:
< head> < p> Это какой-то текст< /p> < /head> В этом случае у браузера есть две возможности: