Задание № 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; Тип формы: управляемая.
Сегодня рассмотрим такой элемент форм 1С как Поле 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 метров по дороге
Структура разметки такая же, как и для неупорядоченных списков, за исключением того, что вы должны заключить элементы списка в элемент
- Двигайтесь до конца дороги.
- Поверните направо
- Двигайтесь прямо через первые две кольцевые развязки.
- На третьей кольцевой развязке поверните налево.
- Школа будет справа от вас, в 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 - Двигайтесь до конца дороги
\ n - Поверните направо
\ n - Двигайтесь прямо через первые две кольцевые развязки
\ n - На третьей кольцевой развязке поверните налево.
\ n - Школа будет справа от вас, через 300 метров вверх по дороге
\ 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 - Снимите кожицу с чеснока и крупно нарежьте.
\ n - Удалите из перца все семена и стебли и крупно нарежьте.
\ n - Добавьте все ингредиенты в кухонный комбайн.
\ n - Измельчите все ингредиенты в пасту.
\ n - Если вы хотите получить грубый «кусочек» хумуса, измельчите его в течение короткого времени.
\ n - Если вы хотите получить гладкий хумус, обрабатывать его дольше.
\ 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 .Пользовательские агенты обычно используют заголовок чтобы дать людям некоторое представление о содержании документа, например, отображение заголовка в виде подписи или его произнесение.
Заголовки могут содержать символы объекты (для акцентированных символов, специальных символов, и т.д.), но может не содержать другой разметки. Вот пример названия документа:
<ГОЛОВА>Исследование динамики населения ... другие элементы головки ... <ТЕЛО> ... тело документа ...