Добавлен: 23.04.2023
Просмотров: 145
Скачиваний: 2
<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском.
С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
<meta http-equiv="refresh" content="30">
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также глобальные атрибуты [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].
Атрибуты тега <META>
charset Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8">
content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы".
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
<meta http-equiv="refresh" content="30">
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://mail.ru/">
name Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].
description определяет краткое описание к содержимому страницы, например:
<meta name="description" content="Описание содержимого страницы">
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
<meta name="generator" content="WordPress 4.0"> .
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
<meta name="keywords" content="Ключевые слова через запятую">.
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято.
Владение знаниями по HTML также подразумевает применение каскадных стилей оформления, или css. Они задают свойства элементов, отображаемых на каждой странице. Преимущества данного подхода состоят в том, что задание таких параметров как шрифт, цвет и так далее выносится в отдельный файл. Для запуска css-файла применяется тег link . В готовом виде это выглядит примерно вот так: <link rel="stylesheet" href="style.css">, где тег href определяет положение файла, а type – объявляет тип данного файла [Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].
<body> <\body> между этими тегами расположена отображаемая для пользователя часть сайта. Всё, что расположено между тегами <body> <\body>, отображается при запуске сайта. В <body> применяется множество тегов HTML. в основном это работа над форматированием текста, применение ссылок и разработка веб-страницы при помощи основных инструментов [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].
АТРИБУТЫ ТЕГА <BODY>
onafterprint
Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint
Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload
Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].
onhashchange
Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onmessage
Событие происходит, когда сообщение получено через источник события.
onoffline
Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline
Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide
Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow
Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload
Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.
Перед началом работы в HTML, требуется изучить основные конструкции языка и уметь применять полученные знания. Далее указаны наиболее применяемые теги HTML [ Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.].
<span> используется при выделении подстроки, к которой применяется специальный стиль, прописанный в css;
<a>- делает переход на веб-странице; адрес которого определяется атрибутом href;
<div> один из наиболее известных тегов; его изучению следует уделить наибольшее внимание , так как это основной элемент, который применяется для создания основных блоков для сайтов (параметры для блоков определяются в css, и внутри этого тега могут находиться другие блоки);
<p> определяет абзац текста; содержимое абзаца находится между открывающим и закрывающим тегами;
<ol> нумерованный список, элементы которого заключаются в парный тег;
<ul> маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом li;
<h1>-<h6> заголовки документа (цифра обозначает уровень заголовка, то есть <h1>- главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней,
<strong> - жирный текст;
<em> курсив;
<img> добавляет рисунок на страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения) [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].
Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].
Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне.
Развитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал запутанным и громоздким, возникли проблемы с его изменением или добавлением каких-либо новых элементов. Так же сложно сохранять единый стиль и цветовую гамму для всех страниц сайта. С разработкой стилей оформления, или css выполнение данных функций намного упростилось, да и читать HTML-код теперь намного проще [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.]
Например:
#main_div {
width: 75%;
display: inline–block;
float: left;
}
.right_sidebar {
position: relative;
width: 20%;
float: right;
margin–right: 40px;
}
.right_sidebar img {
box–sizing: border–box;
border–radius: 10px;
width: 100%;
height: 100%;
}
Для работы веб-дизайнером требуется знание HTML и CSS, так как в настоящее время без их освоения невозможно создать сайт . с их помощью определяются атрибуты для элементов страниц, которые действуют для всего документа. Таким образом, при помощи одного правила можно задать параметры для всех страниц на сайте [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].
В настоящее время к внешнему виду страниц прелъявляются высокие требования, поэтому применение каскадных таблиц стилей является обязательным. Для подключения файла css к документу, применяется тег link.
АТРИБУТЫ ТЕГА <LINK>
crossorigin
Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: *(или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].
href
Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang
Определяет язык текста в документе, на который идет ссылка.
media
Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce
Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel
Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
<link rel="alternate stylesheet" type="text/css" title="small_font" href="small-font.css">.
<link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml">
<link rel="alternate" type="application/atom+xml" title="News" href="/atom.xml?type=news">
archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.
<link rel="next" href="/next.html" type="text/html" title="Следующая страница">
nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год].
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.