Html определение

HTML

Из истории HTML

HTML появился приблизительно в 1986-1991 годах в Европейском Центре ядерных исследований в Женеве (Швейцария). Разработал его британский учёный Тим Бернерс-Ли.

Html определение

Тим Бернерс-Ли — cоздатель HTML

В настоящее время большинство страниц в Интернете создаются при помощи HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML

( от англ. HyperText Markup Language — язык гипертекстовой разметки)

Html определение

На языке HTML интернет-браузеру передаётся информация о том, какой текст и другие элементы (ссылки, изображения, таблицы, формы) и как нужно отображать на странице. На языке HTML верстают, а не программируют — особым образом размечают текст и объекты для публикации в интернете (где, какого цвета и тп).

Теги


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

Пример конструкции

<открывающий тег>   Текст в тегах   </закрывающий тег>

Пример кода

<b>жирный шрифт</b> <!--тег <b> для обозначения жирного шрифта, а тег </b> обозначает прекращение выделения жирным -->  <i>курсив</i> <!--тег <i> для обозначения курсива-->

В браузере данный код отобразит следующее:

жирный шрифт
курсив

Атрибуты тегов

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


Пример кода

<img src="image.jpg" width="100" height="100">

Атрибут тега имеет определённый тип (например: текст, число, путь к файлу и тд), который обязательно должен учитываться при написании атрибута. Тег img служит для обозначения изображения, атрибут src для введение его адреса относительно данного файла, а другие атрибуты width и height обозначают соответственно Ширину и Высоту нашего изображения.

Ссылки

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

<a href="index.html">На главную</a>

Наличие ссылок являтся основным свойством веб-страниц. Ссылкой может являться не только некоторая часть текста, но изображение, ее часть или область сайта.

Пример кода готовой страницы

(файл index.html):

<html>    <head>      <title>      Название странички      </title>    </head>      <body>      <h1>Заголовок</h1>      Это моя web-страничка!      <a href="index.html">Ссылка на саму себя</a>    </body>  </html>

Демонстрация Скачать исходники

Спасибо за внимание! Продолжение в следующих уроках!

tradebenefit.ru

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


M в аббревиатуре HTML означает «mark up» – размечать.

Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».

Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.

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

Закрывающий тег отличается от открывающего наличием косой черты «/».

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

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

Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.

Общий вид HTML-документа:
<!DOCTYPE html> <html> <head>  Заголовок HTML-документа (не отображается на экране) </head> <body>  Тело HTML-документа (отображается на экране)  <!-- Это комментарий  для внесения пояснений в HTML-документ --> </body> </html>


<!DOCTYPE html>

Первый тег <!DOCTYPE> – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.

подробнее о !DOCTYPE…

Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем.

подробнее об информации в контейнере <head>…

htmlweb.ru

Это статья из цикла «Что такое?». В ней вы узнаете, что такое html. Те, кто знаком с этим термином – можете не читать эту статью.

what-is-htmlС каждым годом число пользователей интернет увеличивается минимум 10-20 миллионов человек. Всего, по различным данным, так или иначе, интернетом пользуются более 2 миллиарда человек. Как же сделать так, чтобы пользователь из Новой Зеландии и Норильска при отображении сайта «www.domain.com» видел одну и ту же картинку? Ответ прост: необходим единый язык, понимаемый различными компьютерами. В качестве такого языка в данный момент выступает HTML.


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

HTML не стоит путать с языками программирования, он создан специально для разметки вэб-страниц. Именно язык разметки дает браузеру необходимые инструкции о том, как отображать тексты и другие элементы страницы на мониторе. Важно заметить, что не только различные браузеры, но и различные их версии могут по-разному воспринимать и отображать на экране код. Следовательно, некоторые элементы корректно выглядящие в браузере Operа могут выглядеть иначе в Internet Explorer и других браузерах.

При верстке (грубо говоря, создании страниц) HTML-страниц это необходимо помнить, и просматривать их в самых популярных браузерах типа Mozilla Firefox, Internet Explorer и Operа.

Код разметки в HTML состоит из так называемых «тегов». Теги предоставляют информацию браузерам о форматировании и разметке страницы. Название тега заключается в угловые скобки «<» и «>». Некоторые тэги бывают открывающимися и закрывающимися, например, тег b, который делает текст жирным.


Они влияют на отображение содержимого, находящегося в нем. Данные, находящиеся между такими символами, называются содержимым тега. Иногда встречаются теги, являющиеся одновременно и закрывающими и открывающими, например hr — линия.

Чтобы писать на HTML надо его просто знать. Однако, учитывая огромную популярность Интернета, и огромное количество пользователей, желающих сделать свои странички, было создано множество редакторов, упрощающих работу с кодом. Один из самых простых из них – это FrontPage, входящий в пакет Microsoft Office. Это программное обеспечение (ПО) достаточно просто в обращении. И все же FrontPage имеет ряд существенных минусов: засоряет страницы (до 70% лишнего кода), снижает быстродействие, имеет ограниченные возможности дизайна.

Более продвинутые редакторы – HomeSite и DreamWeaver. Они помогут создать как сайт-визитку, так и настоящий шедевр современного искусства. К минусам этого ПО можно отнести: долгую обработку массивного кода и небольшое засорение кода лишними тегами. Требуется знание HTML в этом случае на порядок-два выше, чем при работе с FrontPage.

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

Для работы с html страницами я использую программу PHP Desigber 2008, также неплохой программой – редактором является Notepad ++.


Моя персональная рекомендация всем: учите html. Это очень простой «язык» и изучить его можно в короткие сроки. Не обязательно в точности запоминать все теги, важно хотя бы понимать их назначение. Тогда можно легко форматировать текст и изменять html страницы.
Есть сайт, который мне постоянно помогал в изучении HTML — это сайт htmlbook.ru. На сайте есть полезный раздел — . С него и можно начать изучение.

Источник: Работа в интернете.

Постовой:
Нашел в блоге Записки Жука хорошую программу для авто. постинга в социальные закладки.

blogwork.ru

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

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

Notepad++Текстовый редакторе Notepad++
Скачать редактор можно бесплатно с официального сайта Notepad-plus-plus.org.

Google ChromeБраузер Google Chrome
Скачать браузер можно с его официальной страницы.

Html-документы имеют расширение *.html или *.htm. Самый быстрый способ создать html-документ – это создать текстовый документ, и изменить его расширение на *.html:


html-документ

Создайте на рабочем столе текстовый документ, и назовите его index.html.

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

Откройте index.html в текстовом редакторе Notepad++, и запишите в нем строку: “Привет, мир!”. Затем сохраните изменения и откройте index.html в браузере:

html-документ

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

psd-html-css.ru

Что такое HTML?

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


что такое html

Позднее добавилась возможность перейти по ссылке, которая ведет к другому текстовому документу, расположенному в интернете. Это привело к началу формирования взаимосвязанной системы сайтов, которая выросла до сегодняшних масштабов. От этого и произошло название HTML — Hyper Text Markup Language. На русский язык эту фразу переводят как «язык гипертекстовой разметки».

Начало развития

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

Основные элементы

Что такое HTML, если рассматривать его изнутри? Любой файл HTML — это обычный текстовый документ. В основе его разметки лежат теги. Зачастую они представляют собой парные конструкции, которые предназначены для изменения свойств информации (причем не только текстовой). Например, если написать в теле html-файла: «Любое слово», браузер отобразит написанное курсивом.


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

В помощь программисту

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

что такое html разметка

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

CSS

Ответ на вопрос: «Что такое HTML-разметка?» дан. Как отмечалось ранее, теги позволяют изменять оформление информации, например, задавать размер шрифтов, цвет, их семейство. Данных параметров может быть очень много, и если нужно использовать каждое их сочетание более одного раза, один и тот же код приходится дублировать.

window html

Важное дополнение к HTML — CSS (каскадные таблицы стилей). Внедрение их было начато в 90-х годах. Под определением стиля понимают набор разных свойств разметки. Причем каждое сочетание задается однократно и обычно выносится во внешний файл. В тех местах, где необходимо применить стиль, записывается только один тег.

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

Средства CSS побладают расширенными возможностями для оформления сайтов, с которыми чистый HTML не сравнится.

Сложности разработки

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

hyper text markup language

Построение сложных страниц может быть выполнено двумя подходами:

  • Первый предполагает создание таблиц, в ячейках которых располагается информация.
  • Второй основан на слоях или блоках. Что такое HTML-слой? Это абсолютно произвольная область. Размер и расположение никак не ограничены.

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

JavaScript

HTML-разметка без каких-либо дополнений позволяет создавать страницы со статичной информацией. Чтобы сделать сайты интерактивными, к существующим стандартам был добавлен язык сценариев под названием JavaScript. В нем используется концепция объектов, к которым могут применяться методы и функции во время какого-либо события. Например, главный объект с точки зрения JavaScript — это Window. HTML-страница может быть закрыта, если применить к нему метод «close».

html программа

Основные преимущества языка сценариев:

  • Простота освоения: не обязательно быть программистом, чтобы написать несколько строчек рабочего кода.
  • Выполнение программы после определенных событий. Например, вы можете определить, что функция должна выполняться только тогда, когда веб-страница полностью загрузится или когда пользователь щелкнет мышью по определенному блоку.
  • Динамическое изменение HTML-разметки.
  • Определение браузера. Это очень удобно, когда для каждого обозревателя создана своя версия сайта. Программа отправит пользователя «Мозиллы» по одному адресу, а пользователя «Оперы» — по другому.

Вместо заключения

Вопрос: «Что такое HTML?» раскрыт. Надо сказать, что статья не описывает и меньшей части всех возможностей гипертекстовой разметки. Чтобы разобраться в большинстве тонкостей, нужно прочесть не одну книгу, а теорию совмещать с практикой.

www.syl.ru

Что такое сайт?

Сайт (вебсайт) — это своеобразная ячейка в сети интернет, предоставляющая какую либо информацию для своего посетителя. Каждый вебсайт имеет свой уникальный адрес. Для тех кто дружит с английским, определение термина вебсайт (website) читается уже в самом названии. Web — паутина, Site — место. Вебсайт — это место во всемирной паутине.

Сайт может состоять как из одной страницы, так и из десятков тысяч страниц. Если говорить про одностраничные сайты, то это, как правило «сайты-визитки». На таком вебсайте можно разместить информацию о своей компании, телефоны, схему проезда и другие данные. Многостраничные сайты – это информационные сайты, интернет — магазины, различные социальные сети, либо такие «гиганты» интернета как яндекс и гугл.

Что такое домен?

Выше было сказано, что каждый сайт имеет свой уникальный адрес, так вот этот адрес – это и есть доменное имя (домен). Сайт на котором Вы сейчас находитесь имеет домен «htmlboss.ru»

доменное имя

Если нужно перейти на определенный сайт, то Вы пишите его доменное имя в верхней строке своего браузера. Браузер — это программа для просмотра веб-страниц, тех самых из который состоят сайты. Примеры популярных браузеров: Opera, Mozilla Firefox, Google Chrome и самый распространенный Internet Explorer.

Что такое HTML?

Вот мы и подошли к основному вопросу урока. HTML — это язык разметки гипертекста. Не пугайтесь такого непонятного определения. Практически все сайты в интернете состоят из страниц написанных на html. Мы с Вами говорим на русском языке, во Франции люди говорят на французском, а наш браузер говорит со страницами сайтов на языке html. Браузер считывает всю информацию со страниц написанных на html языке, переваривает ее, а затем выдает нам на экран монитора понятное и привычное изображение.

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

доменное имя

* Не пугайтесь страшного и не понятного набора символов слева, вскоре Вы поймете, что все гениальное — просто.

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

htmlboss.ru

Основные понятия html

 HTML – язык гипертекстовой разметки документов (HyperText Markup Language). С помощью HTML создаются Web-страницы, которые находятся в глобальной компьютерной сети Интернет. HTML – это не язык программирования в традиционном смысле, он является языком разметки. С помощью HTML текстовый документ разбивают на блоки смысловой информации (заголовки, параграфы, таблицы, рисунки и т.п.).

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

Особенности HTML-документа:

1. HTML-документ может содержать текст, графику, видео и звук.

2. В общем случае HTML-документ – это один или несколько текстовых файлов, имеющих расширение .htmили .html.

3. Создавать HTML-документ можно как с помощью специальных программ – редакторовHTML(например,FrontPage), так и с помощью любого текстового редактора (например, блокнотаWindows).

4. Для просмотра HTML-документов существуют специальные программы-броузеры. ОниинтерпретируютHTML-документы, т.е. переводят текст документа вWeb-страницу, и отображают ее на экране пользователя. Существует очень много различных броузеров, но наиболее распространенными броузерами являютсяMicrosoftInternetExplorer,NetscapeNavigatorиOpera.

5. Если при интерпретации HTML-документа броузер чего-то не понимает, то сообщения об ошибке не возникает, а это место вHTML-документе игнорируется и не отображается броузером.

HTML-документ состоит из элементов HTML.

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

Тег – в переводе с английского – ярлык, этикетка. Тег определяет тип выводимого элемента HTML (например, заголовок, таблица, рисунок и т.п.). Сам тег не отображается броузером. Тег представляет собой последовательность элементов:

  • символ левой угловой скобки (<) – начало тега;

  • необязательный символ слеша (/) – символ используется, чтобы обозначить закрывающий тег;

  • имя тега;

  • необязательные атрибуты в открывающем теге;

  • символ правой угловой скобки (>)

Атрибуты – необязательный набор параметров, определяющих дополнительные свойства элемента HTML (например, цвет или размер). Атрибут состоит:

из имени атрибута;

знака равенства (=);

значения атрибута – строки символов, заключенной в кавычки

Пример элемента HTML:

<H1 ALIGN= «CENTER»>Глава 1</H1>

В этом примере:

<H1 ALIGN= «CENTER»> – открывающий тег

</H1> – закрывающий тег

H1 – имя тега

ALIGN= «CENTER» – атрибут

ALIGN – имя атрибута

«CENTER» – значение атрибута

Правила создания HTML-документов:

1.   Теги и атрибуты можно записывать в любом регистре, т.е. </H1> и </h1> – это одно и то же.

2.   Несколько пробелов подряд, символы табуляции и перевода строки при интерпретации броузером заменяются на один пробел. Это позволяет писать хорошо структурированные исходные тексты файлов HTML.

3.   Рекомендуется давать имена файлам HTML строчными английскими буквами. Длина имени – до восьми символов. В принципе, можно не придерживаться данной рекомендации, но тогда пользователи, работающие в операционных системах, отличных от Windows, не смогут воспользоваться вашими HTML-документами.

studfiles.net

Структура веб-страницы

  • Содержание:
  • 1. Структура HTML-документа
  • 1.1. Элемент <html>
  • 1.2. Элемент <head>
  • 1.2.1. Элемент <title>
  • 1.2.2. Элемент <meta>
  • 1.2.3. Элемент <style>
  • 1.2.4. Элемент <link>
  • 1.2.5. Элемент <script>
  • 1.3. Элемент <body>

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

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

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

<!DOCTYPE html> <!-- Объявление формата документа -->  <html>  <head> <!-- Техническая информация о документе -->  <meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->  <title>...</title> <!-- Задаем заголовок документа -->  <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->  <script src="script.js"></script> <!-- Подключаем сценарии -->  </head>  <body> <!-- Основная часть документа -->  </body>  </html>

Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

DOM
Рис. 1. Простейшая структура веб-страницы

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

Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p> являются между собой сестринскими.

1.1. Элемент <html>

Является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также ‎глобальные атрибуты.

Таблица 1. Атрибуты тега <html>
Атрибут Описание, принимаемое значение
manifest С помощью значения атрибута указывается путь к документу кэша манифеста, например:
<html manifest="about_company.appcache">

1.2. Элемент <head>

Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

Для элемента доступны ‎глобальные атрибуты.

1.2.1. Элемент <title>

Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Для элемента доступны ‎глобальные атрибуты.

1.2.2. Элемент <meta>

Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.

<meta name="description" content="Описание содержимого страницы">  <meta name="keywords" content="Ключевые слова через запятую">

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

<meta name="description" lang="ru" content="Описание содержимого страницы">  <meta name="description" lang="en" content="Description">  <meta name="keywords" lang="ru" content="Ключевые слова через запятую">  <meta name="keywords" lang="en" content="Keywords">

С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Индексация и переход по ссылкам разрешены:

<meta name="robots" content="index, follow">

Индексация разрешена, переход по ссылкам запрещен:

<meta name="robots" content="index, nofollow">

Индексация и переход по ссылкам запрещены:

<meta name="robots" content="noindex, nofollow">

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением 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, а также ‎глобальные атрибуты.

Таблица 2. Атрибуты тега <meta>
Атрибут Описание, принимаемое значение
charset Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8">
content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
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 указывает имя автора документа в свободном формате.
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, хотя ни одно из них еще не было официально принято.

1.2.3. Элемент <style>

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

Для элемента доступны атрибуты media, scoped, type, а также ‎глобальные атрибуты.

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

<style type="text/css">  .paper {  width: 200px;  height: 300px;  background-color: #ef4444;  color: #666666;  }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

<div class="paper">  ...  </div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

<p style="color: #666666; background-color: #ef4444; padding: 20px;">
Таблица 3. Атрибуты тега <style>
Атрибут Описание, принимаемое значение
media Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
type Определяет MIME-тип подключаемого файла со стилями, в данном случае <style type="text/css">.

1.2.4. Элемент <link>

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css.

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

<!DOCTYPE html>  <html>  <head>  <style>  @import url(style.css);  </style>  <meta>  <title> </title>  </head>

с использованием элемента <link>. Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

<link rel="stylesheet" href="style.css" type="text/css">

Для элемента доступны атрибуты href, hreflang, media, rel, type, а также ‎глобальные атрибуты.

Таблица 4. Атрибуты тега <link>
Атрибут Описание, принимаемое значение
crossorigin Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована.
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 — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.
<link rel="next" href="/next.html" type="text/html" title="Следующая страница">
nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">
search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", и может принимать следующий значения:
ширинахвысота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширинахвысота (размеры иконки задаются в пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;
any — иконка может масштабироваться до любого размера.
title Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css".

1.2.5. Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также ‎глобальные атрибуты.

Таблица 5. Атрибуты тега <script>
Атрибут Описание, принимаемое значение
async Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset Определяет кодировку символов
crossorigin Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен.
defer Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.
type Используются для объявления языка сценария, использованного при составлении содержимого тега.

1.3. Элемент <body>

В этом разделе располагается все содержимое документа. Для элемента доступны ‎глобальные атрибуты.

Таблица 5. Атрибуты тега <body>
Атрибут Описание, принимаемое значение
onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

html5book.ru


Лучшие статьи читаем:

Выравнивание текста по центру htmlВыравнивание текста по центру html Как вставить картинку в html на фонКак вставить картинку в html на фон Default ThumbnailЧто такое маркированный список Default ThumbnailЦвет фона текста html

You May Also Like

No Picture

Веб цвета коды

Желтый html

Желтый html

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.