Разное

Демонстрация структуры html: Задание № 1. Задание простейшего HTML-документа — Мегаобучалка

Содержание

Задание № 1. Задание простейшего HTML-документа — Мегаобучалка

ОБЩЕЕ ПРЕДСТАВЛЕНИЕ О ЯЗЫКЕ ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML

 

HTML (от англ. HyperText Markup Language «язык разметки гипертекста») – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986-1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов – дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE> предназначен для создания в документах таблиц, но, часто используется и для оформления размещения элементов на странице. С течением времени основная идея платформа независимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.



 

ЛАБОРАТОРНАЯ РАБОТА № 1

Знакомство со структурой HTML-документа. Применение тегов логического и физического форматирования

 

Цель: научить применять теги логического и физического форматирования при создании Web-страниц.

Время выполнения: два академических часа.

Форма занятия: лабораторная работа.

Задание № 1. Задание простейшего HTML-документа

Запустите программу Блокнот и осуществите ввод следующего HTML кода:

< HTML>

<HEAD>

<TITLE>Moй первый HTML-документ</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TOPMARGIN="30" TEXT="black" LINK="#00FF00" ALINK="#00FF00" VLINK="blue">

Это мой первый HTML-документ!

</BODY>

</HTML>

Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее:

Задание № 2. Использование тега <ACRONYM>

Запустите программу Блокнот и осуществите ввод следующего HTML кода:

HTML>

<HEAD>

<TITLE>Расшифровка аббревиатур с помощью тега ACRONYM </TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

<ACRONYM TITLE="HvperText Markup Lanquage"> HTML </ACRONYM> один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания Web-сайтов.

</BODY>

<HTML>

Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее:

 

 

seodon.ru | Учебник HTML - Структура HTML-документа

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете общую структуру HTML-документов и создадите свою первую страничку. Для начала посмотрите на следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Моя первая HTML-страница</title>
</head>
<body>

<p>Здравствуйте!</p>

</body>
</html>

В этом примере показан тот минимум HTML-тегов, который необходим для создания полноценной веб-страницы. Кстати заметьте, что вы уже не смотрите на код, извините, «как баран на новые ворота», не правда ли? Вы уже вполне можете определить, где какой тег начинается и заканчивается, увидеть их вложенность и отличить теги от атрибутов. А теперь давайте разберем HTML-код поподробнее и начнем со второй строки примера (о первой поговорим позже).

Тег <HTML> или корневой элемент веб-страницы

Тег <HTML> является предком всех тегов HTML-документа, его еще часто называют корневым элементом. Вне этого элемента не должно появляться ни одного тега, а сам он может содержать теги <HEAD> и <BODY>, причем каждый только в единственном числе. Помните, что значит «содержать»? Совершенно верно, это значит, что только эти два тега могут находиться внутри <HTML> на первом уровне вложенности, а уже внутри них должны располагаться остальные теги HTML-страницы, что и отображено в примере.

Тег <HEAD> или «шапка» HTML-страницы

Внутри тега <HEAD> находятся различные служебные теги, которые указывают кодировку веб-страницы, ее заголовок и так далее, очень часто его называют «шапкой» документа. Информация, находящаяся внутри этого элемента предназначена в основном для браузеров (Internet Explorer, Opera и т.п.) и поисковиков (Яндекс, Google и т.п.), поэтому она никак не отображается на странице (за исключением текста в теге <TITLE>).

Тег <META> — указываем кодировку документа

В нашем примере тег <META> отвечает за указание кодировки HTML-документа. Он является одним из семейства тегов иначе называемых метатегами, о которых мы поговорим с вами в других уроках. А пока просто ставьте его, как показано в примере, внутри элемента-контейнера <HEAD>.

Тег <TITLE> или заголовок документа

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

Каждая страница должна иметь только один заголовок, соответственно и тег <TITLE> должен быть на странице только один и только внутри элемента <HEAD>.

Пример отображения заголовка в браузере Internet Explorer.

В поисковой системе Яндекс.

Тег <BODY> или тело документа

Тег <BODY> является контейнерным элементом, между открывающим и закрывающим тегами которого находятся все те элементы, которые мы видим на странице, поэтому его и называют телом HTML-документа.

У тега <BODY> есть одно очень важное правило — он должен содержать элементы уровня блока и не может содержать встроенные элементы (уровня строки). Многие учебники, которые я видел, никогда не заостряют на этом внимание, но мы-то с вами хотим изучить правильный HTML, верно? Кстати, вы помните, что такое блочные и встроенные элементы? Блочные создают впереди и после себя перенос строки в начало, а встроенные отображаются на одной строке.

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

Пример правильного указания тегов

<body>
<p><i>Учим правильный HTML!</i></p>
</body>

Неправильное использование тегов

<body>
<i><p>А вот такой порядок тегов неверный!</p></i>
</body>

Вообще, подобные правила есть у каждого HTML-тега, а не только у <BODY>, поэтому вы конечно спросите: «А как же мы узнаем — какие теги может содержать элемент, а какие нет»? Все очень просто: во-первых, в этом учебнике я всегда вам буду это подсказывать, а во-вторых — в справочнике по HTML-тегам эта информация есть по каждому тегу. И поверьте, когда вы закончите обучение, то будете «на автомате» писать грамотный HTML, уж я об этом позабочусь. 🙂

Тег <!DOCTYPE> или выбираем версию HTML

А теперь пора вернуться к первой строке примера, тегу <!DOCTYPE>. И первое, что вам нужно понять — этот тег не входит в состав самого HTML-документа, поэтому он и вынесен за пределы тега <HTML>. А нужен он для того, чтобы браузер понял, к какой версии HTML относится созданная вами страничка. Если же <!DOCTYPE> не указать, то браузеры решат, что вы используете очень старую версию HTML и могут показать страницу так «криво», что вам и в страшном сне не привидится, поэтому пишите его всегда.

Существует три версии языка HTML 4.01, который мы будем с вами изучать, каждой из них соответствует свой Доктайп. Итак:

HTML 4.01 Strict (строгое соответствие синтаксису языка)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional (переходный синтаксис языка)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset (переходный синтаксис языка плюс использование фреймов)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Strict является самой строгой версией HTML, в нем недопустимы никакие ошибки синтаксиса, например ошибки вложенности тегов.

HTML 4.01 Transitional — это более лояльная версия, которая спокойно переносит многие ошибки кода. НО! Когда я думал над тем, какому же языку учить в данном учебнике, то решил, что это будет именно строгая версия. Так как лучше учиться сразу правильно, чем потом переучиваться.

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

Вообще, существует еще несколько версий HTML, например XHTML. Но отличия синтаксиса XHTML от HTML настолько минимальны, что их можно перечислить по пальцам рук, еще и свободные останутся. 🙂 Причем часть этих отличительных особенностей большинством вебмастеров вообще не используется. Другими словами, если вы освоите HTML 4.01, то вам уже не надо будет изучать XHTML, совсем. Прочитаете о нем разок, потратив пару часов, и все. Еще есть HTML 5, который находится в разработке, пока не утвержден и постоянно изменяется разработчиками W3C, но в нем вообще просто добавится несколько новых тегов и атрибутов.

Создаем свою первую HTML-страницу

Вот и пришло время создания вашей первой HTML-страницы. Как я уже говорил, в этом учебнике я буду использовать текстовый HTML-редактор «Notepad++». Открыв его, вы увидите уже до боли знакомые вам по другим текстовым редакторам (например, Microsoft Word или OpenOffice Writer) строки меню. Если меню на английском языке, то смените его на русский, выбрав: Settings → Preferences → General → Localisation → Русский.

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

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

Профессия — 1С » Поле HTML документа

рубрики: Работа с формами | Дата: 10 августа, 2018
Скачать обработку с примерами из статьи: professia1c_html_document.epf
Платформа: 8.3; Тип формы: управляемая.

Сегодня рассмотрим такой элемент форм как Поле HTML документа.


Название его говорит само за себя и предназначено это поле для отображения кода в формате html. Первое, что приходит на ум это конечно же организовать просмотр сайтов. И такая возможность действительно есть. И второе — для тех кто немного знаком с

html и css есть возможность самим написать код для отображения в html поле. Учитывая, что у css3 достаточно широкие возможности стилизации, и в том числе присутствует возможность анимации, может получится достаточно живая и красочная картинка. Плюс, как известно, в html можно включать и код на языке java script. И тут уже возможности ограничиваются только вашей фантазией. Рассмотрим на примере оба вышеперечисленных варианта. Для демонстрации создадим внешнюю обработку на управляемых формах.

Просмотр веб страницы через поле HTML документа

Эта возможность реализуется очень просто. В реквизиты формы добавим реквизит Сайт с типом «Строка»:

Разместим этот реквизит на форме и в свойствах выберем вид — «Поле HTML документа»:

И конечно же добавим строку для ввода адреса сайта.

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



&НаКлиенте
Процедура АдресСайтаПриИзменении(Элемент)
	Сайт = АдресСайта;
КонецПроцедуры

Теперь опробуем обработку в режиме 1С:Предприятия. Ввожу адрес своего сайта www.professia1c.ru и получаю вот такое сообщение об ошибке:

Это связано с тем, что по умолчанию поле HTML документа работает в режиме совместимости с древней версией браузера Internet Explolrer. И естественно, что очень многие владельцы сайтов уже не заморачиваются с поддержкой старых версий. Хотя если ввести адрес сайта самой 1С — www.1c.ru, мы увидим, что он успешно отобразится в нашем поле. В сети предлагается несколько разных способов как победить эту ошибку. От редактирования настроек браузера IE, до редактирования реестра. Мне на моей домашней 32-разрядной версии Windows 10 помогло редактирование реестра. Для этого необходимо найти ветку «HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION» и добавить в нее параметр 1Cv8c.exe со значением 11000 в десятичной системе исчисления.

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

На самом деле не совсем понятно где это может пригодится, если есть стандартный браузер. Ну с фирмой 1С все понятно — она таким образом рекламу нам показывает каждый раз когда мы 1С:Предприятие запускаем)).

Метатег X-UA-Compatible

Когда речь не идет о просмотре сайтов и мы пишем полностью свой код для поля html документа, то нам нет необходимости редактировать реестр для того чтобы воспользоваться всеми прелестями CSS3 и HTML5. Для этого воспользуемся метатегом X-UA-Compatible. Это специфический метатег предназначенный для браузера Internet Explorer. Он позволяет устанавливать режим совместимости для IE. Если быть точным, то X-UA-Compatible — это значение аттрибута http-equiv, который в свою очередь используется вместе с аттрибутом content. Короче говоря нам необходимо в разделе head нашего html документа прописать вот такую строчку:


<meta http-equiv='X-UA-Compatible' content='IE=edge'>

которая говорит браузеру Internet Explorer, что он должен работать в режиме совместимости с самой последней его версией. В которой нам конечно же доступны CSS3 и HTML5.

Пишем свой код для поля HTML документа

А теперь создадим свою мини веб страничку и отобразим ее в другом поле HTML документа. По аналогии с предыдущим примером создадим реквизит СтилиCSS и разместим его в отдельной закладке на форме.

Далее перейдем к написанию кода html. Минимально необходимый код, так сказать заготовка нашей странички выглядит следующим образом:


<!DOCTYPE html>
<html lang='ru'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  </head>

  <body>

  </body>

</html>

Внутри тега <head></head> обычно прописывают различные метатеги, а также мы поместим в него тег <style></style> в котором пропишем стили css. Как правило стили css размещают в отдельном файле, но поскольку у нас нет такой возможности воспользуемся тегом style. Содержимое же самой страницы размещают внутри тега <body></body>. В качестве примера нарисуем внутри нашего поля html квадрат, а с помощью стилей css заставим его при наведении курсора мыши растягиваться на всю ширину.


Итоговый код html будет выглядеть следующим образом:


<!DOCTYPE html>
<html lang='ru'>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <style>

      .move {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
      }

      .move:hover {
        width: 100%;
        transition-property: width;
        transition-duration: 5s;
      }

    </style>
  </head>

  <body>

    <div></div>

  </body>

</html>

Теперь вставим этот код в процедуру ПриСозданииНаСервере:


Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

	СтилиCSS =
	"<!DOCTYPE html>
	|<html lang='ru'>
	|  <head>
	|    <meta charset='utf-8'>
	|    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
	|    <style>
	|      
	|      .move {
	|        width: 100px;
	|        height: 100px;
	|        background-color: aquamarine;
	|      }
	|      
	|      .move:hover {
	|        width: 100%;
	|        transition-property: width;
	|        transition-duration: 5s;
	|      }
	|      
	|    </style>
	|  </head>
	|  
	|  <body>
	|  
	|    <div></div>
	|  
	|  </body>
	|  
	|</html>";

КонецПроцедуры

Проверяем как это выглядит в режиме 1С:Предприятия

Наводим курсор на квадрат и наблюдаем как он в течение 5 секун плавно растягивается на всю ширину нашего поля:

   

Основы работы с текстом HTML - Изучите веб-разработку

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

Предварительные требования: Базовое знакомство с HTML, как описано в Приступая к работе с HTML.
Цель: Узнайте, как разметить основную страницу текста, чтобы придать ему структуру и значение, включая абзацы, заголовки, списки, выделение и цитаты.

Наиболее структурированный текст состоит из заголовков и абзацев, независимо от того, читаете ли вы рассказ, газету, учебник для колледжа, журнал и т. Д.

Структурированный контент делает чтение проще и приятнее.

В HTML каждый абзац должен быть заключен в элемент

, например:

  

Я параграф, о да я.

Каждый заголовок должен быть заключен в элемент заголовка:

  

Я название рассказа.

Существует шесть элементов заголовка:

,

,

,
,
и
. Каждый элемент представляет различный уровень содержания в документе;

представляет основной заголовок,

представляет подзаголовки,

представляет подзаголовки и т. Д.

Реализация структурной иерархии

Например, в этом материале элемент

представляет заголовок статьи, элементы

представляют заголовок каждой главы, а элементы

представляют собой подразделы каждой главы:

  

Дробильный канал

Крис Миллс

Глава 1. Темная ночь

Была темная ночь.Где-то ухнула сова. Дождь обрушился на ...

Глава 2: Вечное молчание

Наш главный герой не мог даже шепотом выйти из темной фигуры ...

Призрак говорит

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

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

  • Предпочтительно использовать по одному

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

  • Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте элементы

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

    для представления подзаголовков - это не имеет смысла и приведет к странным результатам.

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

Зачем нужна структура?

Чтобы ответить на этот вопрос, давайте взглянем на text-start.html - отправную точку нашего рабочего примера для этой статьи (хороший рецепт хумуса).Вы должны сохранить копию этого файла на вашем локальном компьютере, так как он вам понадобится позже для упражнений. В настоящее время тело этого документа содержит несколько фрагментов содержимого. Они никоим образом не размечены, но разделены разрывом строки (нажатие Enter / Return для перехода на следующую строку).

Однако, когда вы откроете документ в браузере, вы увидите, что текст выглядит как большой кусок!

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

  • Пользователи, просматривающие веб-страницу, склонны быстро сканировать в поисках релевантного контента, часто для начала просто читая заголовки. (Обычно мы проводим очень мало времени на веб-странице.) Если они не увидят ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и уйдут в другое место.
  • Поисковые системы, индексирующие вашу страницу, рассматривают содержание заголовков как важные ключевые слова, влияющие на поисковый рейтинг страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (поисковой оптимизации).
  • Слабовидящие люди часто не читают веб-страницы; вместо этого они их слушают. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы получить быстрый доступ к заданному текстовому контенту. Среди различных используемых методов они обеспечивают схему документа, зачитывая заголовки, что позволяет пользователям быстро находить нужную информацию. Если заголовки недоступны, они будут вынуждены прослушать весь документ, прочитанный вслух.
  • Чтобы стилизовать контент с помощью CSS или заставить его делать интересные вещи с помощью JavaScript, вам необходимо иметь элементы, обертывающие соответствующий контент, чтобы CSS / JavaScript могли эффективно нацеливать его.

Следовательно, нам нужно дать нашему контенту структурную разметку.

Активное обучение: создание структуры контента

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

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

Игровой код
  

Прямой вывод

Редактируемый код

Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции).

  html {
  семейство шрифтов: без засечек;
}

h3 {
  размер шрифта: 16 пикселей;
}

.a11y-label {
  маржа: 0;
  выравнивание текста: вправо;
  размер шрифта: 0,7 бэр;
  ширина: 98%;
}

body {
  маржа: 10 пикселей;
  фон: # f5f9fa;
}  
  var textarea = document.getElementById ('код');
var reset = document.getElementById ('сбросить');
var solution = document.getElementById ('решение');
var output = document.querySelector ('. output'););
var code = textarea.value;
var userEntry = textarea.value;

function updateCode () {
  output.innerHTML = textarea.value;
}

reset.addEventListener ('щелчок', function () {
  textarea.значение = код;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode ();
});

solution.addEventListener ('щелчок', function () {
  if (solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode ();
});

var htmlSolution = '

Мой рассказ

\ n

Я статистик, меня зовут Триш.

\ n

Мои ноги из картона, и я женат на рыбе.

'; var solutionEntry = htmlSolution; textarea.addEventListener ('ввод', updateCode); window.addEventListener ('загрузка', updateCode); textarea.onkeydown = function (e) { if (e.keyCode === 9) { e.preventDefault (); insertAtCaret ('\ t'); } if (e.keyCode === 27) { textarea.blur (); } }; function insertAtCaret (text) { var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = (textarea.значение) .substring (0, caretPos); var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.length); textarea.value = лицевая сторона + текст + обратная сторона; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus (); textarea.scrollTop = scrollPos; } textarea.onkeyup = function () { if (solution.value === 'Показать решение') { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode (); };

Зачем нам семантика?

На семантику полагаются повсюду вокруг нас - мы полагаемся на предыдущий опыт, чтобы сказать нам, какова функция повседневного объекта; когда мы что-то видим, мы знаем, какова будет его функция.Так, например, мы ожидаем, что красный светофор будет означать «стоп», а зеленый светофор - «поехать». Если применить неправильную семантику, все может очень быстро усложниться. (В каких странах красный цвет означает «вперед»? Надеемся, что нет.)

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

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

  

Это заголовок верхнего уровня

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

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

   Это заголовок верхнего уровня?   

Это элемент .У него нет семантики. Вы используете его для обертывания содержимого, когда хотите применить к нему CSS (или что-то сделать с ним с помощью JavaScript), не придавая ему никакого дополнительного значения. (Вы узнаете больше об этом позже в курсе.) Мы применили к нему некоторый CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимущества, описанные выше. Рекомендуется использовать соответствующий HTML-элемент для работы.

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

Неупорядоченный

Неупорядоченные списки используются для разметки списков элементов, для которых порядок элементов не имеет значения. Возьмем для примера список покупок:

 молоко
яйца
хлеб
хумус 

Каждый неупорядоченный список начинается с элемента

    , который охватывает все элементы списка:

      
      молоко яйца хлеб хумус

    Последний шаг - обернуть каждый элемент списка в элемент

  • (элемент списка):

      
    • молоко
    • яйца
    • хлеб
    • хумус
    Активное обучение: разметка неупорядоченного списка

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

    Игровой код
      

    Прямой вывод

    Редактируемый код

    Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции).

      html {
      семейство шрифтов: без засечек;
    }
    
    h3 {
      размер шрифта: 16 пикселей;
    }
    
    .a11y-label {
      маржа: 0;
      выравнивание текста: вправо;
      размер шрифта: 0,7 бэр;
      ширина: 98%;
    }
    
    body {
      маржа: 10 пикселей;
      фон: # f5f9fa;
    }  
      var textarea = document.getElementById ('код');
    var reset = document.getElementById ('сбросить');
    var solution = document.getElementById ('решение');
    var output = document.querySelector ('. output'););
    var code = textarea.value;
    var userEntry = textarea.value;
    
    function updateCode () {
      output.innerHTML = textarea.value;
    }
    
    reset.addEventListener ('щелчок', function () {
      textarea.значение = код;
      userEntry = textarea.value;
      solutionEntry = htmlSolution;
      solution.value = 'Показать решение';
      updateCode ();
    });
    
    solution.addEventListener ('щелчок', function () {
      if (solution.value === 'Показать решение') {
        textarea.value = solutionEntry;
        solution.value = 'Скрыть решение';
      } else {
        textarea.value = userEntry;
        solution.value = 'Показать решение';
      }
      updateCode ();
    });
    
    var htmlSolution = '
      \ n
    • молоко
    • \ n
    • яйца
    • \ n
    • хлеб
    • \ n
    • хумус
    • \ n < / ul> '; var solutionEntry = htmlSolution; textarea.addEventListener ('ввод', updateCode); window.addEventListener ('загрузка', updateCode); textarea.onkeydown = function (e) { if (e.keyCode === 9) { e.preventDefault (); insertAtCaret ('\ t'); } if (e.keyCode === 27) { textarea.blur (); } }; function insertAtCaret (text) { var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = (textarea.value) .substring (0, caretPos); var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.длина); textarea.value = лицевая сторона + текст + обратная сторона; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus (); textarea.scrollTop = scrollPos; } textarea.onkeyup = function () { if (solution.value === 'Показать решение') { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode (); };

    Упорядоченный

    Упорядоченные списки - это списки, в которых порядок элементов имеет значение .Для примера возьмем набор направлений:

     Ехать до конца дороги
    Поверните направо
    Двигайтесь прямо через первые две кольцевые развязки
    На третьей кольцевой развязке поверните налево
    Школа будет справа от вас, 300 метров по дороге 

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

      , а не
        :

          
        1. Двигайтесь до конца дороги.
        2. Поверните направо
        3. Двигайтесь прямо через первые две кольцевые развязки.
        4. На третьей кольцевой развязке поверните налево.
        5. Школа будет справа от вас, в 300 метрах вверх по дороге.
        Активное обучение: разметка упорядоченного списка

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

        Игровой код
          

        Прямой вывод

        Редактируемый код

        Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции).

          html {
          семейство шрифтов: без засечек;
        }
        
        h3 {
          размер шрифта: 16 пикселей;
        }
        
        .a11y-label {
          маржа: 0;
          выравнивание текста: вправо;
          размер шрифта: 0,7 бэр;
          ширина: 98%;
        }
        
        body {
          маржа: 10 пикселей;
          фон: # f5f9fa;
        }  
          var textarea = document.getElementById ('код');
        var reset = document.getElementById ('сбросить');
        var solution = document.getElementById ('решение');
        var output = document.querySelector ('. output'););
        var code = textarea.value;
        var userEntry = textarea.value;
        
        function updateCode () {
          output.innerHTML = textarea.value;
        }
        
        reset.addEventListener ('щелчок', function () {
          textarea.значение = код;
          userEntry = textarea.value;
          solutionEntry = htmlSolution;
          solution.value = 'Показать решение';
          updateCode ();
        });
        
        solution.addEventListener ('щелчок', function () {
          if (solution.value === 'Показать решение') {
            textarea.value = solutionEntry;
            solution.value = 'Скрыть решение';
          } else {
            textarea.value = userEntry;
            solution.value = 'Показать решение';
          }
          updateCode ();
        });
        
        var htmlSolution = '
          \ n
        1. Двигайтесь до конца дороги
        2. \ n
        3. Поверните направо
        4. \ n
        5. Двигайтесь прямо через первые две кольцевые развязки
        6. \ n
        7. На третьей кольцевой развязке поверните налево.
        8. \ n
        9. Школа будет справа от вас, через 300 метров вверх по дороге
        10. \ n
        '; var solutionEntry = htmlSolution; textarea.addEventListener ('ввод', updateCode); window.addEventListener ('загрузка', updateCode); textarea.onkeydown = function (e) { if (e.keyCode === 9) { e.preventDefault (); insertAtCaret ('\ t'); } if (e.keyCode === 27) { textarea.blur (); } }; function insertAtCaret (text) { var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = (textarea.value) .substring (0, caretPos); var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.длина); textarea.value = лицевая сторона + текст + обратная сторона; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus (); textarea.scrollTop = scrollPos; } textarea.onkeyup = function () { if (solution.value === 'Показать решение') { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode (); };

        Активное обучение: разметка нашей страницы рецептов

        Итак, на этом этапе статьи у вас есть вся информация, необходимая для разметки нашего примера страницы рецептов.Вы можете либо сохранить локальную копию нашего начального файла text-start.html и выполнить там работу, либо сделать это в редактируемом примере ниже. Вероятно, будет лучше делать это локально, так как тогда вы сможете сохранить работу, которую делаете, тогда как если вы заполните ее в редактируемом примере, она будет потеряна при следующем открытии страницы. У обоих есть свои плюсы и минусы.

        Игровой код
          

        Прямой вывод

        Редактируемый код

        Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции).

          html {
          семейство шрифтов: без засечек;
        }
        
        h3 {
          размер шрифта: 16 пикселей;
        }
        
        .a11y-label {
          маржа: 0;
          выравнивание текста: вправо;
          размер шрифта: 0,7 бэр;
          ширина: 98%;
        }
        
        body {
          маржа: 10 пикселей;
          фон: # f5f9fa;
        }  
          var textarea = document.getElementById ('код');
        var reset = document.getElementById ('сбросить');
        var solution = document.getElementById ('решение');
        var output = document.querySelector ('. output'););
        var code = textarea.value;
        var userEntry = textarea.value;
        
        function updateCode () {
          output.innerHTML = textarea.value;
        }
        
        reset.addEventListener ('щелчок', function () {
          textarea.значение = код;
          userEntry = textarea.value;
          solutionEntry = htmlSolution;
          solution.value = 'Показать решение';
          updateCode ();
        });
        
        solution.addEventListener ('щелчок', function () {
          if (solution.value === 'Показать решение') {
            textarea.value = solutionEntry;
            solution.value = 'Скрыть решение';
          } else {
            textarea.value = userEntry;
            solution.value = 'Показать решение';
          }
          updateCode ();
        });
        
        var htmlSolution = '

        Рецепт быстрого приготовления хумуса

        \ n \ n

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

        \ n \ n

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

        \ n \ n

        Ингредиенты

        \ n \ n
          \ n
        • 1 банка (400 г) нута ( фасоль гарбанзо)
        • \ n
        • 175 г тахини
        • \ n
        • 6 сушеных помидоров
        • \ n
        • Половина красного перца
        • \ n
        • A щепотка кайенского перца
        • \ n
        • 1 зубчик чеснока
        • \ n
        • немного оливкового масла
        • \ n
        \ n \ n

        Инструкции < / h3> \ n \ n
          \ n
        1. Снимите кожицу с чеснока и крупно нарежьте.
        2. \ n
        3. Удалите из перца все семена и стебли и крупно нарежьте.
        4. \ n
        5. Добавьте все ингредиенты в кухонный комбайн.
        6. \ n
        7. Измельчите все ингредиенты в пасту.
        8. \ n
        9. Если вы хотите получить грубый «кусочек» хумуса, измельчите его в течение короткого времени.
        10. \ n
        11. Если вы хотите получить гладкий хумус, обрабатывать его дольше.
        12. \ n
        \ n \ n

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

        \ n \ n

        Хранение

        \ n \ n

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

        \ n \ n

        Хумус подходит для замораживания; его следует разморозить и использовать в течение пары месяцев.

        '; var solutionEntry = htmlSolution; textarea.addEventListener ('ввод', updateCode); window.addEventListener ('загрузка', updateCode); textarea.onkeydown = function (e) { if (e.keyCode === 9) { e.preventDefault (); insertAtCaret ('\ t'); } if (e.keyCode === 27) { textarea.blur (); } }; function insertAtCaret (text) { var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = (textarea.value) .substring (0, caretPos); var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.length); textarea.value = лицевая сторона + текст + обратная сторона; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus (); textarea.scrollTop = scrollPos; } textarea.onkeyup = function () { if (solution.value === 'Показать решение') { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode (); };

        Глобальная структура документа HTML

        Документ HTML 4.0 обычно состоит из трех частей: строки содержащий информацию о версии, описательный раздел заголовка и body, который содержит фактическое содержание документа.

        Конструкция SGML DOCTYPE объявляет, какая версия HTML был использован при составлении документа (см. [GOLD90]).

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

        Последние две буквы декларации указывают на язык HTML DTD, в данном случае английский («EN»). Пользовательские агенты могут игнорировать это Информация.

        Авторы могут использовать другое описание типа документа в зависимости от от версии HTML, на которой основан их документ.Рекомендуемый документ типы для HTML 4.0:

        Связь между общедоступными идентификаторами и файлами может быть указана используя файл каталога в формате, рекомендованном SGML Open Консорциум. Образец каталога файл для HTML 4.0 включен в начало раздела о Справочная информация SGML для HTML.

        Примечание: некоторые пользовательские агенты не понимают более сложный DOCTYPE декларации, чем перечисленные выше.

        Определения атрибутов
        версия = URL
        Этот атрибут определяет (с URL-адресом) расположение DTD для версия HTML, регулирующая текущий документ.С того же информация должна появиться в заголовке DOCTYPE, полезность этого атрибута неточно.

        Атрибуты, определенные в другом месте

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

        
          ... Сюда идет голова, тело и т.д. ... 
        
         
        
        
         HEAD  O O (% head.content) + (% head.misc)>
         профиль % URL # ПРЕДПОЛАГАЕТСЯ - именованный словарь метаинформации -
          >
         

        Начальный тег: необязательно , Конечный тег: необязательно

        Определения атрибутов

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

        Атрибуты, определенные в другом месте

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

        Заголовки: НАЗВАНИЕ элемент и заголовок атрибут

         TITLE  - - (#PCDATA) * - (% head.misc)
            - Элемент TITLE не считается частью потока текста.
               Он должен отображаться, например, как заголовок страницы или
               заголовок окна. Для каждого документа требуется ровно один заголовок.
            ->
        
         

        Начальный тег: требуется , Конечный тег: требуется

        Атрибуты, определенные в другом месте

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

        Заголовки могут содержать символы объекты (для акцентированных символов, специальных символов, и т.д.), но может не содержать другой разметки. Вот пример названия документа:

        
        <ГОЛОВА>
         Исследование динамики населения 
          ... другие элементы головки ... 
        
        <ТЕЛО>
         ... тело документа ... 
        
        
         

        С элементом TITLE связан элемент заголовок атрибут.

        Определения атрибутов
        заголовок = cdata
        Этот атрибут предлагает справочную информацию об элементе для который установлен.
        В отличие от элемента TITLE , который предоставляет информация обо всем документе и может появляться только один раз, title Атрибут может аннотировать любое количество элементы.Обратитесь к определению элемента, чтобы убедиться, что он поддерживает этот атрибут. Значения атрибута title могут быть визуализируется пользовательскими агентами различными способами. Например, визуальный браузеры часто отображают заголовок как «всплывающую подсказку» (короткое сообщение который появляется, когда указывающее устройство останавливается над объектом). Аудио пользовательские агенты могут озвучивать информацию заголовка в аналогичном контексте. За Например, установка атрибута в ссылке позволяет пользовательским агентам (визуальным и невизуальные), чтобы рассказать пользователям о характере связанного ресурса:
         ... какой-то текст ... 
        Вот фото
        
           я нырял с аквалангом прошлым летом
        
          ... еще текст ... 
         

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

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

        Метаинформация

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

        Текущая спецификация HTML позволяет авторам назначать метаданные к своим документам следующим образом:

        • Авторы могут ссылаться на внешний профиль, где определены свойства метаданных.Например, профиль может определять свойства, которые помогают поисковым системам индексировать документы, например "автор", «авторские права», «ключевые слова» и т. д. Профиль задается с помощью атрибута profile элемента HEAD .
        • Авторы могут устанавливать значения для этих свойств. Это можно сделать:
          1. Из документа через META элемент. Таким образом, профиль может определять пространство имен свойств, которые могут быть устанавливается элементом META .
          2. извне документа, путем ссылки на метаданные через элемент LINK (см. Раздел о типах ссылок). Таким образом, профиль может определить пространство имен типов отношений, которые могут использоваться элементом LINK .

        Обратите внимание, что, поскольку профиль определен для элемента HEAD , один и тот же профиль применяется ко всем МЕТА и ССЫЛКА элементы в заголовке документа.

        Элемент META
         META  - O EMPTY - Общая метаинформация ->
         http-Equiv  NAME #IMPLIED - Имя заголовка HTTP-ответа -
            name  NAME #IMPLIED - имя метаинформации -
            содержимое  CDATA # ТРЕБУЕТСЯ - связанная информация -
            схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
          >
         

        Начальный тег: требуется , Конечный тег: запрещено

        Определения атрибутов

        Для следующих атрибутов допустимые значения и их интерпретация профиля зависимая:

        имя = cdata
        Этот атрибут определяет имя свойства.
        содержание = cdata
        Этот атрибут определяет значение свойства.
        схема = cdata
        Этот атрибут называет схему, которая будет использоваться для интерпретации стоимость недвижимости.
        http-экв = cdata
        Этот атрибут может использоваться вместо имени атрибут. HTTP-серверы используют этот атрибут для сбора информации для заголовков сообщений HTTP-ответа.

        Атрибуты, определенные в другом месте

        Элемент META может использоваться для описания свойства документа (например, автор, срок действия, список ключей слова и т. д.) и присвоить значения этим свойствам. Этот спецификация не определяет нормативный набор свойств.

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

        
         

        Атрибут lang может использоваться с META , чтобы указать язык для значения атрибута содержимого .Это позволяет синтезаторы речи для применения языкового произношения правила.

        В этом примере имя автора объявлено французским.

        
         

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

        
         

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

        META и заголовки HTTP

        Атрибут http-Equiv можно использовать в место имя атрибута и имеет специальный значение, когда документы извлекаются с помощью передачи гипертекста Протокол (HTTP).HTTP-серверы могут использовать имя свойства, указанное в http-Equiv для создания стиля [RFC822] заголовок в ответе HTTP. См. Спецификацию HTTP ([RFC2068]) для получения подробной информации о допустимых заголовках HTTP.

        Следующий образец объявления META :

        
         

        приведет к заголовку HTTP:

         Истекает: Вт, 20 августа 1996 14:25:27 GMT 

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

        META и поисковые системы

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

        
        
         

        Эффективность поисковых систем также можно повысить, используя ССЫЛКА элемент для указания ссылок на переводы документа в других языки, ссылки на версии документа на других носителях (например,г., PDF), и, когда документ является частью коллекции, ссылки на соответствующий отправная точка для просмотра коллекции.

        META и PICS
        Платформа для выбора интернет-контента [PICS] - это инфраструктура для связывания ярлыков (метаданных) с Интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что может получить доступ в Интернете, это также облегчает другое использование этикеток, включая подписание кода, конфиденциальность и права интеллектуальной собственности управление.

        Этот пример показывает, как можно использовать объявление META для включения метки PICS 1.1:

        <ГОЛОВА>
         
         <em> .. здесь идет название .. </em> 
        
        <ТЕЛО>
          ... корпус... 
        
         
        META и информация по умолчанию

        Элемент META может использоваться для указания информация по умолчанию для документа в следующих случаях:

        В следующем примере указывается кодировка символов для документ как ISO-8859-5

        
         
        Профили метаданных
        Профиль атрибут HEAD указывает расположение профиля метаданных.Значением атрибута профиля является URL. Пользователь агенты могут использовать этот URL двумя способами:
        • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известных соглашений для этого профиля. Например, поиск движки могут предоставить интерфейс для поиска в каталогах HTML-документы, в которых все эти документы используют один и тот же профиль для представляющие записи каталога.
        • В качестве ссылки.Пользовательские агенты могут разыменовать URL-адрес и выполнить некоторые активность на основе фактических определений в профиле (например, проверить использование профиля в текущем HTML-документе). Эта спецификация не определяет форматы профилей.

        Этот пример относится к гипотетическому профилю, который определяет полезные свойства для индексации документа. Свойства, определяемые этим профиль --- включая "автора", "авторские права", "ключевые слова" и "дату" --- их значения устанавливаются последующими META декларации.

         
           Как заполнять титульные листы меморандума 
          
          
          
          
         
         

        На момент написания данной спецификации обычная практика использовать форматы даты, описанные в [RFC2068].HTTP-приложения исторически разрешили три разных формата для отображение отметок даты / времени:

         Вс, 6 ноя 1994, 08:49:37 GMT; RFC 822, обновленный RFC 1123
         Воскресенье, 6 ноября 1994 г., 8:49:37 GMT; RFC 850, устаревший RFC 1036
         Вс 6 ноя, 08:49:37 1994; Формат asctime () ANSI C
         

        Согласно [RFC2068], первый формат является предпочтительным. Он представляет собой подмножество фиксированной длины, определяемое [RFC1123] (обновление до [RFC822]). Второй формат широко используется, но основан на устаревшем формате даты [RFC850] и не имеет год из четырех цифр.Клиенты HTTP 1.1 должны принимать все эти формы, но генерировать только формат [RFC1123] для использования в Заголовки HTTP. Ожидается, что пользовательские агенты HTML будут следовать HTTP 1.1 в этом с уважением, и в дополнение к поддержке [ISO8601] формат даты, например «1997-01-23T16: 05: 31 + 00: 00». Для дополнительной информации, см. разделы, посвященные элементам INS и DEL .

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

        Первая декларация META в Следующий пример относится к схеме десятичной системы Дьюи (dds). В второй относится к схеме ISBN.

        
        
         

        Примечание. Одним из примеров профиля является Dublin Core [DCORE].Этот профиль определяет набор рекомендуемых свойств для электронной библиографической описаний и предназначен для обеспечения взаимодействия между несопоставимые модели описания.

        
        
        
        
        
        
        
         ТЕЛО  O O (% block) - (BODY) + (INS | DEL)>
         background % URL #IMPLIED - плитка текстуры для фона документа -
          % bodycolors; - bgcolor, текст, ссылка, vlink, alink -
            onload % Script #IMPLIED - документ загружен -
            onunload % Script #IMPLIED - документ удален -
          >
         

        Начальный тег: необязательно , Конечный тег: необязательно

        Определения атрибутов

        фон = URL
        Устарело. Значение этого атрибута - URL обозначает ресурс изображения. Изображение в целом тайлит фон (для визуальных браузеров).
        текст = цвет
        Устарело. Этот атрибут устанавливает передний план цвет текста (для визуальных браузеров).
        ссылка = цвет
        Устарело. Этот атрибут устанавливает цвет текста отметка непосещенных гипертекстовых ссылок (для визуальных браузеров).
        vlink = цвет
        Устарело. Этот атрибут устанавливает цвет текста маркировка посещенных гипертекстовых ссылок (для визуальных браузеров).
        alink = цвет
        Устарело. Этот атрибут устанавливает цвет текста маркировка гипертекстовых ссылок при выборе пользователем (для визуальные браузеры).

        Атрибуты, определенные в другом месте

        • id , класс (на уровне документа идентификаторы)
        • lang (информация о языке), dir (направление текста)
        • название (элемент названия)
        • стиль (встроенный стиль Информация)
        • bgcolor (цвет фона)
        • загрузка , загрузка (внутренние события)
        • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypressinskeydown , события onkeypressinkeydown,

        Тело документа содержит содержимое документа.Содержание может быть представлен пользовательским агентом различными способами. Например, для визуальных браузеров тело можно рассматривать как холст, на котором появляется контент: текст, изображения, цвета, графика и т. д. Для аудиопользователя агентов, то же самое содержание может быть озвучено. Поскольку таблицы стилей сейчас являются предпочтительными способ указать представление документа, презентационный атрибуты BODY были устарело. Эти атрибуты следует использовать только тогда, когда вам нужно управлять представлением для пользовательских агентов, которые не поддерживают стиль листы.

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

        УСТАРЕВШИЙ ПРИМЕР:

        
        <ГОЛОВА>
          Исследование динамики населения 
        
        
           ... тело документа ... 
        
        
         

        Используя таблицы стилей, то же самое эффект мог быть достигнут следующим образом:

        
        <ГОЛОВА>
          Исследование динамики населения 
         
        
        <ТЕЛО>
            ... тело документа ... 
        
        
         

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

        
        <ГОЛОВА>
          Исследование динамики населения 
         
        
        <ТЕЛО>
            ... тело документа ... 
        
        
         

        Наборы фреймов и тела HTML. Документы содержащие наборы фреймов, заменяют BODY элементом FRAMESET . пожалуйста обратитесь к разделу о рамах для больше информации.

        Идентификаторы элемента: атрибуты id и class

        Определения атрибутов

        id = name
        Этот атрибут назначает имя в масштабе документа конкретному экземпляр элемента.Значения для id должен быть уникальным в пределах документа. Кроме того, это атрибут имеет то же пространство имен, что и имя атрибут.
        класс = cdata-list
        Этот атрибут назначает класс или набор классов определенному экземпляр элемента. Любое количество элементов может быть присвоено то же имя или имена класса. Они должны быть разделенные пробелами.

        id и класс Атрибуты назначают идентификаторы экземпляру элемента.

        Идентификатор, указанный в id , должен быть уникален в пределах документа. Имя класса, указанное в class , может совместно использоваться несколькими экземплярами элемента. Значения классов следует выбирать, чтобы различать роль элемента, класс связан, например, с обратите внимание, например, предупреждение.

        Эти атрибуты можно использовать следующим образом:

        • Можно использовать атрибут id как место назначения для гипертекстовых ссылок (см. раздел якоря).
        • Сценарии могут использовать атрибут id для ссылки на конкретный элемент.
        • Таблицы стилей могут использовать атрибут id чтобы применить стиль к определенному элементу.
        • Атрибут id используется для идентификации OBJECT объявлений элементов.
        • Таблицы стилей могут использовать атрибут class чтобы применить стиль к набору элементов, связанных с этим классом, или элементам, являющимся потомками таких элементов.
        • И id , и class могут использоваться для дальнейшей обработки, например для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML-документов в другие форматы и т. д.).

        Почти каждому элементу HTML можно присвоить идентификатор и класс Информация.

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

        <ГОЛОВА>
        <СТИЛЬ
        PRE.example {background: green}
        
        <ТЕЛО>
        
          ... пример кода здесь ... 
        

        Установив атрибут id для В этом примере мы можем (1) создать на него гиперссылку и (2) переопределить информация о стиле класса с информацией о стиле экземпляра.

        Группирующие элементы: DIV и SPAN элементы

         DIV  - -% block>
        
         SPAN  - - (% inline) * - общий контейнер языка / стиля ->
        
         

        Начальный тег: требуется , Конечный тег: требуется

        Атрибуты, определенные в другом месте

        • id , класс (на уровне документа идентификаторы)
        • lang (язык информация), дирек (направление текста)
        • название (элемент названия)
        • стиль (встроенный стиль Информация)
        • выровнять (выровнять)
        • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypressinskeydown , события onkeypressinkeydown,

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

        Предположим, мы хотим сгенерировать документ из базы данных клиента. Информация. Поскольку HTML не включает элементы, идентифицирующие объекты такие как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и ПРОБЕЛ адаптировать HTML под наши нужды.

        В этом примере фамилия каждого клиента принадлежит классу "client-last-name" и т. д. Мы также присваиваем уникальный идентификатор каждому клиент («клиент-бойера», «клиент-лафон» и др.).

        Фамилия: Бойера, Имя: Стефан Телефон: (212) 555-1212 Электронная почта: [email protected]
        Фамилия: Лафон, Имя: Ив Телефон: (617) 555-1212 Электронная почта: yves @ bar.com

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

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

        DIV , напротив, является элементом уровня блока. Его можно использовать для группировки других элементов уровня блока, но нельзя использовать внутри элементов абзаца. Элемент DIV после незамкнутого элемента P завершится этот параграф.

        Пользовательские агенты обычно помещают перенос строки до и после DIV элементов, например:

        aaaaaaaa

        bbbbbbbbb
        ccccc

        ccccc

        Обычно это отображается как:

        ааааааааа
        bbbbbbbbb
        ccccc
        
        ccccc
         

        Ваш пользовательский агент отображает это следующим образом:

        Заголовки: h2 , h3 , х4 , h5 , H5 , H6 элементов

         h2  |  h3  |  h4  |  h5  |  H5  |  H6 ">
        
        
        
        
         

        Начальный тег: требуется , Конечный тег: требуется

        Атрибуты, определенные в другом месте

        • id , класс (на уровне документа идентификаторы)
        • lang (язык информация), дирек (направление текста)
        • название (элемент названия)
        • стиль (встроенный стиль Информация)
        • выровнять (выровнять)
        • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypressinskeydown , события onkeypressinkeydown,

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

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

        В следующем примере показано, как использовать элемент DIV , чтобы связать заголовок с раздел документа, следующий за ним.Это позволит вам определить стиль для раздела (раскрасить фон, установить шрифт, и т.д.) с таблицами стилей.

        Лесные слоны

        В этом разделе мы обсуждаем малоизвестных лесных слонов. ... этот раздел продолжается ...

        Среда обитания

        Лесные слоны живут не на деревьях, а среди них. ... продолжение этого подраздела ...

        Эта структура может быть украшена информацией о стиле, например:

        <ГОЛОВА>
        <СТИЛЬ>
        РАЗД.раздел {выравнивание текста: выравнивание; font-size: 12pt}
        DIV.subsection {text-indent: 2em}
        h2 {стиль шрифта: курсив; цвет: зеленый}
        h3 {цвет: зеленый}
        
        
         

        Нумерованные разделы и ссылки
        HTML поддерживает сам по себе не приводит к созданию номеров разделов из заголовков. Этот Однако возможность может быть предложена пользовательскими агентами. Скоро таблица стилей языки, такие как CSS, позволят авторам контролировать создание номера разделов (удобно для прямых ссылок в печатных документах, как в "См. раздел 7.2 ").

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

        АДРЕС элемент

         АДРЕС  - - ((% inline;) | P) *>
        
         

        Начальный тег: требуется , Конечный тег: требуется

        Атрибуты, определенные в другом месте

        • id , класс (на уровне документа идентификаторы)
        • lang (язык информация), дирек (направление текста)
        • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypressinskeydown , события onkeypressinkeydown,

        За неимением лучшего места мы включаем определение АДРЕС здесь.Этот элемент добавляет Автор и контактная информация документа, например,

        <АДРЕС>
        Редактор информационных бюллетеней 
        Дж. Р. Браун
        8723 Buena Vista, Smallville, CT 01234
        Тел: +1 (123) 456 7890

        Структура документа HTML - Комментарий Ça Marche

        Dernière модификации le mardi 19 mai 2015 в 13:01 от Jean-François Pillou.


        Понятие документа HTML

        HTML-страница на одной странице - это простое и удобное содержимое текстового формата с учетом HTML.По соглашению l'extension donnée au fichier est .htm или .html, главная веб-страница может быть расширена с возможностью расширения.

        Одностраничный веб-сайт может быть создан как часть плюс основная часть текстов (приложение bloc-note , пример), большая часть существующих создателей красивых и образованных текстов.

        Les éditeurs WYSIWYG What You See Is What You Get », littéralement « ce que vous voyez est ce que vous obtenez ») sont des éditeurs graphiques permettant de travaileller qu une page web tle sera affichée sur un navigateur à quelques détails près.Grâce à ce genre d'éditeurs il est possible d'ajouter des balises par simple clic et d'en modifier les attributs en éditant leur propriétés dans un formulaire. Вылейте autant, afin d'utiliser au mieux ce genre d'éditeur, un connaissance préalable du HTML est tout de même très utile.

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

        Условное обозначение расширения не на странице HTML есть .htm или .html mais une page web peut Potentiellement Porter n'importe quelle extension notamment les suivantes:

        • .asp для динамического изменения генерируемой страницы в ASP ( активных серверных страниц );
        • .cgi для создания динамической страницы с помощью CGI ( Общий интерфейс шлюза );
        • .php , для динамического изменения страницы на PHP;
        • .pl для создания динамических страниц на Perl ( Практический язык извлечения и отчетов );
        • и т. Д.

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

        Документ HTML начинается с остатка и заканчивается с остатком . Il contient également un en-tête décrivant le title de la page, puis un corps dans lequel se Trouve le contenu de la page.

        L'en-tête est délimité par les balises et . Le corps est délimité par les balises et .

        Голосовой пример минималистичного HTML-кода страницы:

          

        Название страницы


        Содержание страницы


        Типовое заявление

        Последний указатель на HTML-страницу страницы. - Введение в тип документа , с очень серьезной ссылкой на стандартное использование HTML, специальное стандартное использование для кодирования страницы.

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

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