Создание документа html: Как создать файл html в блокноте (сделать)

Содержание

Как создать HTML документ — Программирование с нуля

Файл HTML — это простой текстовый файл, сохраненный с расширением .html или .htm (второй вариант уже практически не используется).

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

Создание вашего первого HTML-документа

В конце урока вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание файла HTML

Откройте простой текстовый редактор или редактор кода и создайте новый файл.

Шаг 2. Введите код HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML document</title>
</head>
<body>
  <p>Hello World!<p>
</body>
</html>

Шаг 3. Сохраните HTML документ

блок 1

Сохраните данный файл как index.html на жестком диске. Важно указать расширение .html — некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt. Если это произошло — переименуйте файл, удалите расширение .txt.

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

Разбор HTML кода

Теперь давайте разберем код, который вы написали, по блокам.

Объявление DOCTYPE — строка определяет тип документа HTML5.
Раздел декларативного заголовка (заключенный в элемент HEAD) — предоставляет информацию о документе, включая его заголовок, информацию о стиле и сценарии.
Тело документа (заключено в элемент BODY). Содержит фактическое содержимое документа, которое отображается в веб-браузере и отображается для пользователя.

Вы узнаете о различных элементах HTML-документа в наших следующих статьях.

HTML-теги и элементы

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

HTML-теги обычно идут парами, такими как <html> и </html>. Первый тег в паре часто называют открывающим тегом (или начальным тегом), а второй тег называют закрывающим тегом (или конечным тегом).

Открывающий тег и закрывающий тег идентичны, за исключением косой черты (/) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда выполнена. Между этими тегами вы можете добавить заголовки, абзацы текста, таблицы, формы, изображения, видео и т.д. Например, абзац, который представлен элементом p, будет записан как:

<p>Это параграф текста.</p>

блок 3

HTML5 | Создание документа

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

Последнее обновление: 08.04.2016

Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать
*.html

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

Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:


<!DOCTYPE html>
<html>

</html>

Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration
сообщает веб-браузеру тип документа. <!DOCTYPE html> указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.

А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа.

Внутри элемента html мы можем разместить два других элемента: head и body.
Элемент head содержит метаданные веб-страницы — заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы — стили, скрипты, если они использутся.
Элемент body собственно определяет содержимое html-страницы.

Теперь изменим содержимое файла index.html следующим образом:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Документ HTML5</title>
	</head>
	<body>
		<div>Содержание документа HTML5</div>
	</body>
</html>

В элементе head определено два элемента:

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

элемент meta определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку.
В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.

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

Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст
документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки.
Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM:

После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена.

Сохраним и откроем файл index.html в браузере:

Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title заголовок «Документ HTML5», то именно такое название
будет иметь вкладка браузера.

Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.

А весь текст, определенный внутри элемента body мы увидим в основном поле браузера.

Шаг 1. создание шаблона документа html — Информатика, информационные технологии

Создание и редактирование Web-страниц

Краткие теоретические сведения

Для создания Web-страниц используются различные программные средства. В простейшем случае текст документа HTML можно создать при помощи стандартной программы Блокнот, а просмотреть его в программе-браузере, например, Microsoft Internet Explorer. Поскольку программа Блокнот предназначена для создания текстовых документов, то по умолчанию она использует расширение имени файла .txt. При сохранении же Web-страниц необходимо явно указывать расширение имени файла .html. Для того, что бы можно было увидеть отредактированный HTML-документ, необходимо не забывать сохранять его в программе Блокнот и обновлять содержимое окна браузера.

Любой документ HTML состоит из текста, который необходимо отобразить, и инструкций, которые управляют способом отображения. Такие инструкции называются тегами. Чтобы браузер мог отличить текст, который необходимо отобразить от тегов, последние заключаются в символы . Текст HTML документа должен начинаться тегом , а заканчиваться . Внутри этих тегов помещается «голова» и «тело» документа, которые обозначаются тегами … и …, соответственно. Тег …, помещаемый внутри тега …, служит для указания информации, которая будет отображаться в заголовке окна браузера. Информация, которая должна отображаться в основном окне браузера, помещается внутри тега…. Большинство браузеров не чувствительны к регистру символов в тегах, поэтому их можно записывать как строчными, так и прописными буквами, или их сочетанием. Например, правильно будут обработаны такие теги, как ,и .

Цвет фона и символов HTML-документа можно указать двумя способами – в формате RGB, когда он указывается тремя составляющими: красной (R), зеленой (G) и синей (B) и его названием. При указании цвета в формате RGB каждая из его компонент указывается своим 16-ричным значением в диапазоне от 00 до ff. Примеры записи цвета приведены в Таблице 1.

Таблица 1

Название цвета	Название цвета
Русское	Английское	RGB	Русское	Английское	RGB
черный	black		фиолетовый	purple	FF00FF
белый	white	FFFFFF	желтый	yellow	FFFF00
красный	red	FF0000	коричневый	brown
зеленый	green	00FF00	оранжевый	orange	FF8000
бирюзовый	azure	00FFFF	лиловый	violet	8000FF
синий	blue	0000FF	серый	gray	A0A0A0

Цвет фона устанавливается при помощи атрибута bgcolor= в теге . Если он не указан, то по умолчанию используется цвет, указанный в настройках браузера. Как правило – это белый цвет.

Цвет текста, отображаемого в окне браузера по умолчанию, — черный. Он указывается в его настройках. Явно цвет текста можно указать в тегепри помощи атрибута text=. Цвет отдельного фрагмента текста изменяется при помощи атрибута color= тега .

Ход работы

Шаг 1. Создание шаблона документа HTML

Чтобы создать свой HTML-документ, выполните следующее:

1.Создайте папку HTML, в которой будут храниться документы HTML, создаваемые по ходу выполнения работ.

2.Запустите стандартную программу Блокнот.

3.Наберите в окне редактора Блокнот следующий текст:

4.Сохраните файл под именем template.html в созданной ранее папке HTML. Не забудьте явно указать расширение имени файла .html, так как Блокнот по умолчанию применяет .txt.

5.Для просмотра созданной Web-страницы запустите на выполнение браузер, например, Microsoft Internet Explorer.

6.Откройте в браузере созданный ранее файл template.html, выполнив команду Файл aОткрыть a Обзор. В результате откроется пустое окно:

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

7.В программе Блокнот отредактируйте файл template.html так, чтобы между тегамиибыл помещен текст «Мой первый документ HTML», а между — «Всем огромный привет!». В результате документ HTML должен иметь такое содержание:

Мой первый документ HTML

Всем огромный привет!

8.Сохраните отредактированный документ в файле hello.html, выполнив команду Файл a Сохранить как….

9.Откройте в браузере файл hello.html, выполнив команду Файл aОткрыть a Обзор. В результате увидите примерно следующее:

Шаг 2. Задание цвета текста

1.Закройте программу Блокнот.

2.В браузере выполните команду Вид a Просмотр HTML кода. В результате откроется окно со стандартной программой Блокнот, в котором Web-страница будет представлена в командах HTML.

3.Измените цвет слова «Всем» на красный, указав название цвета. Для этого файл hello.html отредактируйте следующим образом:

Мой первый документ HTML

Всем огромный привет!

4.Сохраните внесенные в файл hello.html изменения, выполнив команду Файл a Сохранить.

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

6.Отредактируйте файл hello.html так, чтобы цвет слова «огромный» был зеленым, указав цвет в формате RGB:

Мой первый документ HTML

Всем огромный привет!

Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» — #!

7.Просмотрите отредактированную Web-страницу, сохранив ее в Блокноте и обновив содержание окна браузера.

8.Установить весь остальной текст на странице синим. Для этого отредактируйте файл hello.html следующим образом:

Мой первый документ HTML

Всем огромный привет!

9.Просмотрите в браузере отредактированную Web-страницу.

Шаг 3. Задание цвета фона

Внесите следующие изменения в файл hello.html и просмотрите его в браузере:

Мой первый документ HTML

Всем огромный привет!

Индивидуальные задания

1.В соответствии с номером по списку группы, или указанием преподавателя, установите такие цвета на Web-странице:

Вариант	Фон	Текст	Слово «Всем»	Слово «огромный»
	белый	черный	серый	синий
	черный	белый	красный	серый
	черный	зеленый	серый	красный
	синий	белый	зеленый	бирюзовый
	лиловый	белый	желтый	оранжевый
	серый	зеленый	лиловый	бирюзовый
	красный	фиолетовый	лиловый	зеленый
	фиолетовый	зеленый	серый	синий
	зеленый	синий	красный	серый
	серый	черный	зеленый	лиловый
	лиловый	зеленый	фиолетовый	черный
	коричневый	зеленый	серый	красный
	синий	серый	зеленый	черный
	черный	зеленый	серый	лиловый
	оранжевый	лиловый	фиолетовый	белый
	зеленый	синий	оранжевый	серый
	лиловый	зеленый	черный	синий
	бирюзовый	черный	белый	коричневый
	оранжевый	фиолетовый	лиловый	серый
	серый	зеленый	оранжевый	коричневый
	коричневый	белый	зеленый	красный
	красный	зеленый	черный	коричневый
	белый	оранжевый	зеленый	фиолетовый
	фиолетовый	бирюзовый	лиловый	черный
	черный	фиолетовый	оранжевый	серый
	серый	оранжевый	фиолетовый	красный
	оранжевый	фиолетовый	красный	серый
	желтый	лиловый	фиолетовый	бирюзовый
	бирюзовый	красный	коричневый	лиловый
	зеленый	синий	оранжевый	черный

2.Отправьте результаты выполнения индивидуального задания преподавателю на проверку.

Статьи к прочтению:

Создание сайта для маленьких. Урок 1 — создание первого HTML шаблона

Устройство HTML-документа | Web-Creature — Создание сайтов и заработок на них

HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот пример самого простого HTML-документа:

<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<h2>
Привет!
</h2>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.htm-файл может быть одновременно открыт
и в Notepad, и в Netscape. Сохранив изменения в Notepad,
просто нажмите кнопку Reload ('перезагрузить') в Netscape,
чтобы увидеть эти изменения реализованными в HTML-документе.
</P>
</body>
</html>

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

<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h2>Привет!</h2>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить')
в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется меткой (по-английски — tag и читается «тэг»).

Большинство HTML-меток — парные: на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/» (этот символ называется «слэш»).

Метки можно вводить как большими, так и маленькими буквами (в нижнем и в верхнем регистре). Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

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

Обязательные метки

<html> … </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head> … </head>

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

<title> … </title>

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> … </body>

Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

<h2> … </h2> ≈ <H6> … </H6>

Метки вида <Hi> (где i ≈ цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня ≈ самый крупный, шестого уровня, естественно ≈ самый мелкий.

<P> … </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:

<h2 ALIGN=CENTER>Выравнивание заголовка по центру</h2>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Подытожим все, что мы знаем, с помощью примера 2:

<html>
<head>
<title>Пример 2</title>
</head>
<body>
<h2 ALIGN=CENTER>Привет!</h2>
<h3>Это чуть более сложный пример HTML-документа</h3>
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>

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

Популярность: 52%

Еще по этой теме…

Рейтинг:
Загрузка …

Создание документа HTML в текстовом редакторе Блокнот

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

1. Запустить текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Создать типовую структуру HTML — документа и ввести текст.

Рис. 1. Создание HTML — документа в текстовом редакторе Блокнот

3. Сохранить этот документ. При сохранении в качестве типа файла укажите «все файлы», в качестве имени файла first.html.

4. Закрыть блокнот. Найти файл first.html и открыть его с помощью интернет-браузера.

Рис. 2. Иллюстрация документа в интернет-браузере.

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

2. Форматирование текста выполнить согласно номеру своего варианта.

3. Оформить отчет по лабораторной работе, который должен содержать: титульный лист и экранные формы, демонстрирующие выполнение работы.

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

«Оформление HTML документа. Использование графики. Создание таблиц в HTML»

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

№ ва-ри-анта	Форматирование текста документа
Заголовок страницы	Цвет фона	Кол-во абза-цев*	Список

	выровнять по центру, полужирный шрифт, тип – Cooper Std Black	аqua	три	маркированный, три компонента
	выровнять по центру, полужирный шрифт, тип – Cooper Std Black	black	три	маркированный, три компонента
	выровнять по центру, полужирный шрифт, тип – Cooper Std Black	blue	четыре	маркированный, три компонента
	выровнять по центру, жирный шрифт, тип– Times, цвет – синий	fuchsia	два	маркированный, три компонента
	выровнять по центру, жирный шрифт, тип– Times, цвет – синий	gray	два	маркированный, четыре компонента
	выровнять по правому краю, жирный шрифт, тип– Times, цвет – синий	green	два	маркированный, четыре компонента
	выровнять по центру, жирный шрифт, тип – Arial, цвет — зеленый	lime	четыре	нумерованный, два компонента
	выровнять по центру, курсивный шрифт, тип – Arial, цвет — зеленый	maroon	три	нумерованный, два компонента
	выровнять по центру, полужирный шрифт, тип – Arial, цвет — зеленый	navy	три	нумерованный, три компонента
	выровнять по центру, курсивный шрифт, тип – Tahoma, цвет — черный	olive	четыре	нумерованный, два компонента
	выровнять по центру, курсивный шрифт, тип – Tahoma, цвет — черный	purple	два	нумерованный, четыре компонента
	выровнять по центру, курсивный шрифт, тип – Arial, цвет — черный	red	два	нумерованный, четыре компонента
	выровнять по центру, курсивный шрифт, тип – Candara, подчеркивание	silver	четыре	маркированный, два компонента
	выровнять по центру, курсивный шрифт, тип – Candara, подчеркивание	teal	три	маркированный, три компонента
	выровнять по правому краю, курсивный шрифт, тип – Candara, подчеркивание	white	три	маркированный, три компонента
	выровнять по правому краю, курсивный шрифт, тип – Candara, подчеркивание	yellow	три	нумерованный, два компонента
	выровнять по правому краю, жирный шрифт, тип – Arial, подчеркивание	navy	три	маркированный, три компонента
	выровнять по центру, курсивный шрифт, тип – Arial, цвет — красный	olive	два	нумерованный, три компонента
	выровнять по центру, курсивный шрифт, тип – Cooper Std Black	purple	четыре	маркированный, три компонента
	выровнять по центру, курсивный шрифт, тип – Tahoma, подчеркивание	green	три	нумерованный, два компонента
	выровнять по центру, курсивный шрифт, тип – Arial, цвет — красный	lime	два	маркированный, три компонента
	выровнять по центру, курсивный шрифт, тип – Cooper Std Black	maroon	четыре	нумерованный, три компонента
	выровнять по центру, курсивный шрифт, тип – Latha, цвет — синий	navy	три	маркированный, три компонента
	выровнять по центру, курсивный шрифт, тип – Tahoma, цвет — синий	olive	три	нумерованный, два компонента
	выровнять по центру, курсивный шрифт, тип – Tahoma, цвет — синий	purple	три	маркированный, три компонента
	выровнять по центру, курсивный шрифт, тип – Latha, цвет — синий	red	четыре	нумерованный, три компонента
	выровнять по центру, курсивный шрифт, тип – Latha, цвет — красный	silver	четыре	нумерованный, два компонента
	выровнять по центру, курсивный шрифт, тип – Latha, цвет — зеленый	green	четыре	нумерованный, два компонента

Основы HTML и CSS | BrainsCloud.ru

Введение
Установка редактора Brackets
HTML теги (теория)
Создание скелета HTML документа
HTML теги форматирования текста
CSS селекторы и свойства (теория)
Свойства для стилизации текста
Инструменты разработчика — DevTools
Изображения и ссылки (img, a)
Растровая и векторная графика, форматы изображений (png, jpg, svg) + домашнее задание
HTML Таблицы (table, tr, td, th, tbody и др.) + домашнее задание
Блочные и строчные элементы (div, span)
Работа с фоном. Часть 1
Работа с фоном. Часть 2 + домашнее задание
Справочники
Наименование классов
Создание простой HTML страницы (практика)
HTML формы (form, input, textarea, button) + домашнее задание
Псевдоклассы
Границы (border, outline)
Создание формы регистрации (практика)
Позиционирование (relative, static, absolute, fixed)
Позиционирование (практика) + домашнее задание
Псевдоэлементы (before, after, first-letter, first-line)
HTML5 теги (header, nav, footer, article и др.)
CSS3 свойства
Основы flexbox + домашнее задание
Доработка страницы (HTML5, CSS3, flexbox)
Селекторы, псевдоклассы + домашнее задание
Приоритеты селекторов
Единицы измерения (em, rem) + домашнее задание
HTML теги (abbr, code, cite, blockquote и др.)
Стилизация кода (HTML, CSS) + домашнее задание
Вертикальное выравнивание (vertical-align)
Обтекания (float, clearfix)
Видимость элементов (display, opacity, visibility)
Специальные символы
Префиксы (-webkit-, -moz-, -ms-)
Вставка видео и аудио (video, audio, source)
Google fonts, локальные шрифты + домашнее задание
Основы адаптивной верстки (media queries) + домашнее задание
Цвета (HEX, rgb, rgba)
Возможности Brackets и плагины

Введение
Основы работы с Photoshop
Основы работы с Abode XD
Подготовительные работы
Верстка шапки сайта
Верстка текстового блока
Верстка фотографии
Верстка контактов
Верстка страницы «Об авторе»
Верстка страницы «Контакты»
Адаптация сайта под разные устройства. Часть 1
Адаптация сайта под разные устройства. Часть 2
Favicon, мета-теги
Кроссбраузерная и валидная верстка
Домен и хостинг. Размещаем сайт в интернете
Что делать дальше? План развития

Простая трансформация
Точка трансформации
Объединение трансформаций
Создание перспективы
3D Трансформация
Создание 3D карточки
Создание наклонной навигации
Работа с масштабом элемента
Работа с translate
Создание 3D куба
Создание анимации
Временные функции
Еще свойства для работы с анимацией
Создание нескольких анимаций
Анимация 3D куба
Создание анимированных пузырей
Правильная анимация

Создание простого HTML-документа

Описание языка HTML :

Создание простого HTML-документа

Определение свойств WEB-страниц

Форматирование Web-страниц :

Создание абзацев

Создание заголовков

Стиль форматирования

Атрибуты шрифта

Гиперссылки

Вставка графических изображений

Создание карт-изображений

Задание бегущей строки

Создание списков

Создание таблиц

Создание фреймов

размещение web-страниц на сервере

Создание простого HTML-документа

HTML-документ,по сути,представляет собой обычный текстовый файл.Редактировать Web-страницы, опубликованные в сети Internet, может лишь тот, кто их создал, а не любой пользователь, поскольку каждая страница имеет свой уникальный адрес (URL) и существование двух разных страниц с одинаковым адресом исключено.

Чтобы получить простую Web-страницу необходимо создать HTML-документ.

Пример HTML-кода

&lt html&gt
&lt head&gt
&lt title&gt Простая Web-страница &lt/title&gt
&lt head&gt
&lt body&gt
Это простая Web-страница.
&lt/body&gt
&lt/html&gt

(если вы редактируете в блокноте то сохраняйте файл с расширением html или htm)

Исходный код любой Web-страницы можно получить в меню ВИД в броузере. HTML-страница содержит как обычный текст, так и специальные команды теги, заключенные в угловые скобки(&lt и &gt). Большинство тегов в языке HTML требуют соответствующую команду с символом &lt/…&gt для её закрытия. Комбинация из открывающегося и закрывающегося тега называется контейнером тегов
Теги не чувсвительны к регистру.Это означает,что HTML-тег например &lt HTML&gt будет воспринят броузером так же как тег &l thtml&gt или &lt HtmL&gt.Кроме тегов в языке HTML используется специальный символ &-асперсант.Этот символ предназначен для вывода специальных символов и символов из расширенной кодовой таблицы.Например для вывода угловых скобок используется последовательность &amplt (для «&lt») и &ampgt(для «&gt»).

!!!Внимание если броузер не понимает тег то он его игнорирует(не исправляет и не выдает ошибку)

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

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

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

Каталог документов по умолчанию должен быть указан в редакторе конфигурации проекта. Дополнительные сведения см. В разделе «Редактор конфигурации проекта: категория« Определение проекта », Дополнительно».

Для создания HTML-документа

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

В MicroStrategy Developer перейдите к папке в списке папок, в которой вы хотите создать документ HTML, например «Мои объекты».
На правой панели, где отображается содержимое папки, щелкните правой кнопкой мыши и выберите «Создать», а затем — «HTMLDocument».Откроется редактор HTML-документа.
Каталог документов по умолчанию должен быть указан в редакторе конфигурации проекта. Если это не так, появляется сообщение об ошибке. Дополнительные сведения см. В разделе «Редактор конфигурации проекта: категория« Определение проекта », Дополнительно».
См. Следующие ссылки для получения инструкций по вставке типов объектов в документ HTML:
Чтобы добавить текст в документ HTML, на панели «Макет» поместите курсор в то место, куда вы хотите вставить текст, а затем введите текст.
Вы можете форматировать HTML-документ и его объекты. Инструкции см. В разделе Форматирование содержимого HTML-документа.
Сохраните документ HTML.Для получения дополнительной информации о сохранении HTML-документа см. Сохранение HTML-документа.
При именовании объекта MicroStrategy вы должны следовать правилам соглашения об именах для вашей конкретной платформы базы данных. Использование слова, зарезервированного вашей платформой базы данных, может привести к ошибке. Обратитесь к документации по вашей базе данных за списком этих зарезервированных для базы данных слов.

Связанные темы

DOM Реализация.createHTMLDocument () — веб-API | MDN

В
DOMImplementation.createHTMLDocument () метод создает
новый HTML Документ .

  const newDoc = document.implementation.createHTMLDocument (заголовок)

Параметры

title Необязательно (кроме IE): DOMString , содержащая заголовок для нового HTML-документа.

В этом примере создается новый документ HTML и вставляется его в </code> текущего документа.</p><p> Вот HTML-код этого примера:</p><pre> <code> <тело> <p> Щелкните <a href="javascript:makeDocument()"> здесь </a>, чтобы создать новый документ и вставить его ниже. </p> <iframe src = "about: blank" /> <script defer src="https://jumper.su/wp-content/cache/autoptimize/js/autoptimize_e1eaaad3cbbb00edeec0660c5fb62862.js"></script></body> </code> </pre><p> Реализация функции <code> makeDocument () </code> в JavaScript:</p><pre> <code> function makeDocument () { let frame = document.getElementById ("theFrame"); let doc = document.implementation.createHTMLDocument («Новый документ»); пусть p = doc.createElement ("p"); p.textContent = "Это новый абзац."; пытаться { doc.body.appendChild (p); } catch (e) { console.log (e); } пусть destDocument = frame.contentDocument; пусть srcNode = doc.documentElement; let newNode = destDocument.importNode (srcNode, true); destDocument.replaceChild (newNode, destDocument.documentElement); } </code> </pre><p> Код в строках 4–12 обрабатывает создание нового HTML-документа и вставку некоторого содержимого.<br /> внутрь. Строка 4 использует <code> createHTMLDocument () </code> для создания нового HTML-документа.<br /> чей <code><title> </code> — это <code> «Новый документ» </code>.Строки 5 и 6 создают<br /> новый элемент абзаца с простым содержанием, а затем строки 8–12 обрабатывают вставку<br /> новый абзац в новый документ.</p><p> Строка 16 извлекает <code> contentDocument </code> фрейма; это документ в<br /> в который мы будем внедрять новый контент. Следующие две строки обрабатывают импорт<br /> содержимое нашего нового документа в контекст нового документа. Наконец, строка 20 на самом деле<br /> заменяет содержимое фрейма содержимым нового документа.</p><p> Посмотреть живые примеры</p><p> Возвращенный документ предварительно сконструирован со следующим HTML:</p><pre> <code> <! Doctype html> <html> <head> <title> название </title> </head> <body> </body> </html> </code> </pre><p> Таблицы BCD загружаются только в браузере</p><h2><span class="ez-toc-section" id="DocumentcreateElement_-_%D0%92%D0%B5%D0%B1-API_MDN"></span> Document.createElement () — Веб-API | MDN <span class="ez-toc-section-end"></span></h2><p> В документе HTML метод <strong> <code> document.createElement () </code> </strong> создает элемент HTML, указанный в теге <em> tagName </em>, или <code> HTMLUnknownElement </code>, если <em> tagName </em> не распознается.</p><pre> <code> let element = document.createElement (tagName [, параметры]); </code> </pre><h4><span class="ez-toc-section" id="%D0%9F%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B-2"></span> Параметры <span class="ez-toc-section-end"></span></h4><dl><dt> <em> tagName </em></dt><dd><p> Строка, определяющая тип создаваемого элемента. <code> nodeName </code> созданного элемента инициализируется значением <em> tagName </em>. Не используйте полные имена (например, «html: a») с этим методом. При вызове HTML-документа <code> createElement () </code> преобразует <em> tagName </em> в нижний регистр перед созданием элемента.В Firefox, Opera и Chrome <code> createElement (null) </code> работает как <code> createElement ("null") </code>.</p></dd><dt> <em> опции </em> опционально</dt><dd><p> Необязательный объект <code> ElementCreationOptions </code>, содержащий единственное свойство с именем <code> - это </code>, значение которого является именем тега настраиваемого элемента, ранее определенного с помощью <code> customElements.define () </code>. См. Подробности в примере веб-компонента.</p></dd></dl><h4><span class="ez-toc-section" id="%D0%92%D0%BE%D0%B7%D0%B2%D1%80%D0%B0%D1%89%D0%B0%D0%B5%D0%BC%D0%BE%D0%B5_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5"></span> Возвращаемое значение <span class="ez-toc-section-end"></span></h4><h4><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80"></span> Базовый пример <span class="ez-toc-section-end"></span></h4><p> Это создает новый <code></p><div> </code> и вставляет его перед элементом с идентификатором «<code> div1 </code>».</p><h5><span class="ez-toc-section" id="HTML"></span> HTML <span class="ez-toc-section-end"></span></h5><pre> <code> <! DOCTYPE html> <html> <head> <title> || Работа с элементами || </title> </head> <body> <div> Текст выше был создан динамически. </div> </body> </html> </code> </pre><h5><span class="ez-toc-section" id="JavaScript"></span> JavaScript <span class="ez-toc-section-end"></span></h5><pre> <code> document.body.onload = addElement; function addElement () { const newDiv = document.createElement ("div"); const newContent = document.createTextNode («Привет и привет!»); newDiv.appendChild (новоеКонтент); const currentDiv = document.getElementById ("div1"); document.body.insertBefore (newDiv, currentDiv); } </code> </pre><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B2%D0%B5%D0%B1-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0"></span> Пример веб-компонента <span class="ez-toc-section-end"></span></h4><p> Следующий фрагмент кода взят из нашего примера расширения-списка-веб-компонента (см. Его также вживую). В этом случае наш настраиваемый элемент расширяет <code> HTMLUListElement </code>, который представляет элемент <code></p><ul> </code>.</p><pre> <code> class ExpandingList расширяет HTMLUListElement { constructor () { супер(); ... } } customElements.define ('расширяющийся список', ExpandingList, {extends: "ul"}); </code> </pre><p> Если бы мы хотели создать экземпляр этого элемента программно, мы бы использовали вызов в следующих строках:</p><pre> <code> пусть expandingList = document.createElement ('ul', {is: 'expanding-list'}) </code> </pre><p> Новому элементу будет присвоен атрибут <code> is </code>, значением которого является имя тега настраиваемого элемента.</p><p> <strong> Примечание: </strong> Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега настраиваемого элемента.</p><p> Таблицы BCD загружаются только в браузере</p><h2><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_HTML_%D0%B2_Content"></span> Использование шаблонов документов HTML в Content <span class="ez-toc-section-end"></span></h2><p> Главная »Содержание» Создание содержания курса »Использование шаблонов HTML-документов в Content</p><p> Вы можете создать новый HTML-документ на основе любого существующего HTML-файла. Если вы задали путь к каталогу, содержащему шаблоны HTML, в разделе «Управление файлами», эти варианты выбора шаблона появятся в раскрывающемся списке при создании нового документа. Все ссылки на ресурсы, такие как изображения, файлы CSS и JS, сохраняются при создании нового HTML-документа из шаблона в Content.</p><p> Таким образом, вы можете создать множество документов из одного центрального шаблона, размещенного в каталоге шаблонов, с уже включенными стандартными стилями и изображениями.</p><p> Если вы уже создали совершенно новый HTML-документ, вы можете сохранить его в своем каталоге шаблонов для других документов.</p><h3><span class="ez-toc-section" id="%D0%92%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D1%82%D1%8C_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B_HTML"></span> Включить шаблоны HTML <span class="ez-toc-section-end"></span></h3><ol><li> Щелкните <strong> Параметры </strong> в инструменте «Содержимое».</li><li> Установите флажок <strong> Включить шаблоны HTML </strong>.</li><li> Щелкните <strong> Изменить путь </strong>.</li><li><ul><li> Если вы хотите разместить свои шаблоны в общей папке, сначала щелкните <strong> Shared Files </strong>, затем щелкните <strong> New Folder </strong>. Выберите папку, которая будет содержать каталог вашего шаблона, или создайте для нее <strong> New Folder </strong>.</li></ul></li><li> Щелкните <strong> Выберите путь </strong>.</li><li> Щелкните <strong> Сохранить </strong>.</li></ol><h3><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8%D1%82%D1%8C_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_HTML_%D0%BA_%D0%BD%D0%BE%D0%B2%D0%BE%D0%BC%D1%83_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%83"></span> Применить шаблон HTML к новому документу <span class="ez-toc-section-end"></span></h3><ol><li> В модуле нажмите <strong> Создать файл </strong> с помощью кнопки «Создать».</li><li> Будет доступен один из двух вариантов:<ul><li> <strong> Выберите шаблон документа </strong> из раскрывающегося списка, если у вас есть определенный каталог шаблонов.</li><li> Нажмите <strong> Обзор шаблона </strong>, если у вас нет определенного каталога шаблонов. Вы можете искать шаблоны, расположенные в других папках или на вашем компьютере.</li></ul></li><li> После того, как вы выбрали шаблон, настройте его в соответствии с вашими потребностями и нажмите <strong> Опубликовать </strong> или <strong> Сохранить как черновик </strong>.<br /> <br /><blockquote><p> <strong> Примечание </strong> Если вы решите сохранить черновик на основе шаблона HTML по другому пути к файлу, все ссылки на изображения, ресурсы CSS или js сохранятся.</p></blockquote></li></ol><h3><span class="ez-toc-section" id="%D0%A1%D0%BC_%D0%A2%D0%B0%D0%BA%D0%B6%D0%B5"></span> См. Также <span class="ez-toc-section-end"></span></h3><p> Авторские права © Desire2Learn Incorporated, 1999-2014 гг. Все права защищены.</p><h2><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2_%D1%87%D0%B0%D1%81%D1%82%D0%B5%D0%B9_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_HTML_-_MATLAB_%D0%B8_Simulink"></span> Создание библиотеки шаблонов частей документа HTML<br /> — MATLAB и Simulink <span class="ez-toc-section-end"></span></h2><h3 itemprop="title content"><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%D1%82%D0%B5_%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D1%83_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2_%D1%87%D0%B0%D1%81%D1%82%D0%B5%D0%B9_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_HTML"></span> Создайте библиотеку шаблонов частей документа HTML <span class="ez-toc-section-end"></span></h3><p> В пакете шаблона по умолчанию файл <code> docpart_templates.HTML </code><br /> определяет библиотеку и некоторые шаблоны частей документа по умолчанию. В вашей части документа<br /> библиотеке шаблонов, создайте части документа, которые вы хотите повторно использовать в своей<br /> отчет. Вы можете создать шаблон детали для любой части документа, которую хотите.<br /> повторить, не переопределяя его программно.</p><p> Шаблон части документа обычно состоит из фиксированного содержимого и отверстий. Вы можете использовать<br /> стандартные элементы HTML для определения ваших шаблонов.Вы также можете использовать<br /> <code> <toc> </code> элемент для содержания. Подробнее см.<br /> Создайте оглавление.</p><p> Используйте этот рабочий процесс для работы с библиотекой шаблонов частей документа:</p><ol><li><p> Распакуйте пакет шаблона, содержащий библиотеку шаблонов детали.<br /> файл.</p></li><li><p> Откройте файл шаблонов частей документа с именем <code><br /> docpart_templates.html </code> по умолчанию, в HTML или тексте<br /> редактор.</p></li><li><p> При необходимости отредактируйте файл, используя элементы, описанные в разделе «Структура библиотеки шаблонов частей документа HTML».</p></li><li><p> Добавьте любые стили, поддерживающие шаблоны частей документа в<br /> <code>.css </code> файл в пакете шаблона. См. Раздел «Изменение стилей в шаблонах HTML».</p></li><li><p> Сохраните файлы библиотеки, которые вы отредактировали.</p></li><li><p> Повторно упакуйте шаблон, используя <code> ziptemplate </code>.</p></li></ol><h4><span class="ez-toc-section" id="%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2_%D1%87%D0%B0%D1%81%D1%82%D0%B5%D0%B9_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_HTML"></span> Структура библиотеки шаблонов частей документа HTML <span class="ez-toc-section-end"></span></h4><p> Библиотека частей документа создается с помощью<br /> <code> <dplibrary> </code> элемент.Добавить<br /> <code> <dplibrary> </code> элемент внутри<br /> <code><body> </code> элемент. В вашем пакете шаблонов может быть только один<br /> <code> <dplibrary> </code> элемент.</p><p> Используйте <code> <dptemplate> </code> элементов внутри<br /> <code> <dplibrary> </code> элемент для каждого шаблона части документа<br /> что вы хотите создать. Вы можете создать столько шаблонов частей документа, сколько вам нужно.</p><p> Этот код показывает базовую структуру библиотеки частей документа.В<br /> <code> <dptemplate> </code> элемент имеет атрибут<br /> <code> имя </code>, которое вы задаете для имени, которое будет использоваться при вызове<br /> часть документа из вашей программы отчета. Имя эквивалентно имени<br /> часть в галерее быстрых частей в Word. Если вы создаете шаблоны для нескольких<br /> выходы, используйте одно и то же имя в обоих местах.</p><pre> <body> <dplibrary> <dptemplate name = "myFirstDocPartTemp"> [Содержимое шаблона части документа - дыры и фиксированное содержимое] </dptemplate> </dplibrary> </body> </pre><h3><span class="ez-toc-section" id="%D0%A1%D0%BC_%D0%A2%D0%B0%D0%BA%D0%B6%D0%B5-2"></span> См. Также <span class="ez-toc-section-end"></span></h3><p> <code> zipTemplate </code> | <code> разархивироватьШаблон </code></p><h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B-2"></span> Связанные темы <span class="ez-toc-section-end"></span></h3><h2><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_-_KodeBinary"></span> Создание HTML-документа — KodeBinary <span class="ez-toc-section-end"></span></h2><p> Это очень простой процесс создания HTML-документа.Для создания HTML-документа нам понадобятся следующие программные инструменты.</p><p> <strong> (i). </strong> <strong> Текстовый редактор: </strong> Нам нужен простой текстовый редактор, такой как блокнот или блокнот (программы по умолчанию поставляются с операционной системой Windows), чтобы писать или редактировать HTML-код. Мы также можем взять некоторые профессиональные редакторы HTML, такие как — Adobe Dreammweaver, Microsoft Front page и т. Д. <br /> <strong> (ii). </strong> <strong> Веб-браузер: </strong> Назначение веб-обозревателя (например, Google Chrome, Internet Explorer, Firefox, Safari) — читать HTML-документы и отображать их в виде веб-страниц.Браузер не отображает теги HTML, но использует теги для определения того, как содержимое страниц <strong> HTML </strong> должно быть представлено или отображено для пользователя.</p><p> Вот простые шаги для создания базового HTML-документа (с помощью Блокнота):</p><p> <strong> Шаг: 01 </strong></p><ul><li> Открыть <strong> Блокнот </strong> Приложение</li><li> Как открыть <em> <strong> Блокнот </strong> </em> Приложение: Нажмите <strong> Пуск -> Все программы -> Стандартные -> Блокнот </strong></li></ul><p> <strong> Шаг: -02 </strong> <br /> Напишите HTML-код в блокноте, например:</p><pre> <code> <HTML> <ГОЛОВА> <TITLE> МОЙ ПЕРВЫЙ HTML-КОД </HTML> </HEAD> <ТЕЛО> <h2><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82_%D1%8D%D1%82%D0%BE_%D0%BC%D0%BE%D1%8F_%D0%BF%D0%B5%D1%80%D0%B2%D0%B0%D1%8F_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0_%D0%A1%D0%B5%D1%80%D0%B4%D0%B5%D1%87%D0%BD%D0%BE_%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D1%83%D1%8E_%D0%B2%D0%B0%D1%81"></span> Привет.. это моя первая веб-страница. Сердечно приветствую вас <span class="ez-toc-section-end"></span></h2> </BODY> </HTML> </code> </pre><p> <strong> ШАГ: 03 </strong></p><ul><li> Теперь сохраните код HTML</li><li> Для этого перейдите в меню файла — нажмите <strong> сохранить как </strong> — выберите соответствующую папку</li><li> введите имя файла</li><li> добавить расширение . <strong> html или .html </strong> к имени файла</li><li> нажмите «Сохранить».</li></ul><p> <strong> Шаг: 04 </strong></p><ul><li> Теперь запустите HTML-код <strong> </strong> в любом веб-браузере (например, Mozilla fore fox, Internet Explorer, Google Chrome и т. Д..)</li><li> Наконец, чтобы запустить HTML-файл, вы должны запустить свой веб-браузер и открыть HTML-файл из файла -> Открыть меню или просто просмотреть папку и дважды щелкнуть свой HTML-файл.</li><li> Результат будет таким:</li></ul><p> <strong> СМОТРЕТЬ БОЛЬШЕ </strong></p><p><h4></h4><p><em> Связанные </em></h4></p><h2><span class="ez-toc-section" id="%D0%A7%D0%B0%D1%81_2_%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span> Час 2. Структурирование HTML-документа <span class="ez-toc-section-end"></span></h2><h3><span class="ez-toc-section" id="%D0%A7%D0%B0%D1%81_2"></span> Час 2 <span class="ez-toc-section-end"></span></h3><h3><span class="ez-toc-section" id="%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span> Структурирование HTML-документа <span class="ez-toc-section-end"></span></h3><p> В первый час вы получили базовое представление о процессе создания веб-контента и его просмотра в Интернете (или локально, если у вас еще нет провайдера веб-хостинга).В этом часе мы приступим к объяснению различных элементов, которые должны отображаться в файле HTML, чтобы он правильно отображался в вашем веб-браузере.</p><p> В целом, этот час дает краткий обзор основ HTML и дает несколько практических советов, которые помогут вам максимально эффективно использовать свое время как автора и издателя веб-страниц. Однако это еще не все теории; вы действительно можете увидеть настоящую веб-страницу и разметку HTML за ней.</p><h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0_%D0%BA_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B5"></span> Подготовка к работе <span class="ez-toc-section-end"></span></h4><p> Вот обзор того, что вам нужно сделать, прежде чем вы будете готовы использовать оставшуюся часть этой книги:</p><ol><li> Возьмите компьютер.Я использовал ноутбук с Windows, чтобы протестировать образец веб-контента и зафиксировать цифры в этой книге, но вы можете использовать любой компьютер с Windows, Macintosh или Linux / UNIX для создания и просмотра своего веб-контента.</li><li> Подключитесь к Интернету. Независимо от того, есть ли у вас модемное, беспроводное или широкополосное соединение, не имеет значения для создания и просмотра вашего веб-контента, но чем быстрее соединение, тем лучше для общего опыта. Интернет-провайдер (ISP), школа или предприятие, которое предоставляет ваше Интернет-соединение, может помочь вам с деталями его правильной настройки.Кроме того, многие общественные места, такие как кафе, книжные магазины и библиотеки, предлагают бесплатный беспроводной доступ в Интернет, которым вы можете воспользоваться, если у вас есть портативный компьютер с поддержкой сети Wi-Fi.</li><li> Загрузите программное обеспечение веб-браузера. Это программное обеспечение, необходимое вашему компьютеру для получения и отображения веб-содержимого. Как вы узнали в первый час, наиболее популярными браузерами (в алфавитном порядке) являются Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox и Opera. Рекомендуется установить несколько из этих браузеров, чтобы вы могли поэкспериментировать и убедиться, что ваш контент одинаков для всех; вы не можете делать предположений о браузерах, которые используют другие люди.</li><li> Исследуй! Используйте веб-браузер, чтобы искать в Интернете веб-сайты, похожие по содержанию или внешнему виду на те, которые вы хотите создать. Отметьте, что вас расстраивает на одних страницах, что привлекает и заставляет читать другие, и что заставляет возвращаться к некоторым страницам снова и снова. Если вас интересует конкретная тема, подумайте о поиске ее с помощью популярной поисковой системы, такой как Google (www.google.com) или Bing (www.bing.com).</li></ol><p> Осторожно</p><p> Хотя все веб-браузеры обрабатывают и обрабатывают информацию одинаково, некоторые специфические различия между ними означают, что в разных браузерах вещи не всегда выглядят одинаково.Обязательно проверяйте свои веб-страницы в нескольких браузерах, чтобы убедиться, что они выглядят достаточно согласованно.</p><p> Примечание</p><p> Как обсуждалось в первый час, если вы планируете разместить свой веб-контент в Интернете (а не публиковать его на компакт-диске или в локальной интрасети), вам необходимо перенести его на компьютер, подключенный к Интернету 24 часов в день. Та же компания или школа, которые предоставляют вам доступ в Интернет, также могут предоставлять веб-пространство; в противном случае вам, возможно, придется заплатить хостинг-провайдеру за услугу.</p><h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B_%D1%81_%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5%D0%B9"></span> Начало работы с простой веб-страницей <span class="ez-toc-section-end"></span></h4><p> В первый час вы узнали, что веб-страница — это просто текстовый файл, размеченный (или окруженный) кодами HTML, которые сообщают браузеру, как отображать текст. Чтобы создать эти текстовые файлы, используйте текстовый редактор, например Блокнот (в Windows) или TextEdit (в Mac) — не используйте WordPad, Microsoft Word или другое полнофункциональное программное обеспечение для обработки текста, потому что они создают файлы разных типов, чем текстовые файлы, которые мы используем для веб-контента.</p><p> Прежде чем вы начнете работать, вы должны начать с некоторого текста, который вы хотите разместить на веб-странице:</p><ol><li> Найдите (или напишите) несколько абзацев текста о себе, своей семье, своей компании, вашей команде по софтболу или о другом предмете, который вас интересует.</li><li> Сохраните этот текст как обычный стандартный текст ASCII. Блокнот (в Windows) и большинство простых текстовых редакторов всегда сохраняют файлы в виде обычного текста, но если вы используете другую программу, вам может потребоваться выбрать этот тип файла в качестве опции (после выбора «Файл», «Сохранить как»).</li></ol><p> По мере прохождения этого часа вы будете добавлять разметку HTML (называемую тегами <em> </em>) в текстовый файл, тем самым превращая его в веб-контент.</p><p> При сохранении файлов, содержащих теги HTML, всегда присваивайте им имена, заканчивающиеся на <code> .html </code>. Это важно: если вы забыли ввести <code> .html </code> в конце имени файла при сохранении файла, большинство текстовых редакторов предоставят ему другое расширение (например, <code> .txt </code>). Если это произойдет, возможно, вы не сможете найти файл, когда попытаетесь просмотреть его в веб-браузере; если вы его найдете, оно определенно не будет отображаться должным образом.Другими словами, веб-браузеры ожидают, что файл веб-страницы будет иметь расширение <code> .html </code> и будет в текстовом формате.</p><p> При посещении веб-сайтов вы также можете встретить страницы с расширением файла <code> .htm </code>, что является еще одним допустимым расширением файла для использования. Вы можете найти другие расширения файлов, используемые в Интернете, такие как <code> .jsp </code> (серверные страницы Java), <code> .asp </code> (Microsoft Active Server Pages) или <code> .php </code> (PHP: препроцессор гипертекста), но эти типы файлов использовать серверные технологии, выходящие за рамки HTML и уроков в этой книге.Однако эти файлы также содержат HTML в дополнение к языку программирования; хотя программный код в этих файлах скомпилирован на стороне сервера, и все, что вы увидите на стороне клиента, — это вывод HTML, если вы посмотрите исходные файлы, вы, вероятно, увидите сложное переплетение программных кодов и кодов разметки.</p><p> В листинге 2.1 показан пример текста, который вы можете ввести и сохранить для создания простой HTML-страницы. Если вы откроете этот файл в Chrome, вы увидите страницу, показанную на рисунке 2.1. Каждая создаваемая вами веб-страница должна содержать объявление <code> <! DOCTYPE> </code>, а также <code><html></html> </code>, <code><head></head> </code>, <code><title></title> </code> и <code><body></body> </code> пар тегов.</p><p> <strong> ЛИСТИНГ 2.1 </strong> Теги <code><html> </code>, <code><head> </code>, <code><title> </code> и <code><body> </code></p><p> Осторожно</p><p> Мы повторяем этот момент, потому что он очень важен как для результата, так и для самого процесса обучения: не создавайте свой первый HTML-файл с помощью Microsoft Word или любого другого HTML-совместимого текстового процессора; большинство этих программ пытаются странным образом переписать ваш HTML-код, что может полностью сбить вас с толку.То же самое верно, когда вы используете Microsoft Word и «Сохранить как» HTML — вы, вероятно, получите подробный и несовместимый файл, полный HTML, который не будет проверяться и вызовет у вас головную боль при редактировании.</p><p> Кроме того, я рекомендую вам <em>, а не </em>, использовать графический редактор «что видишь, то и получаешь» (WYSIWYG), такой как Adobe Dreamweaver. Скорее всего, вам будет проще и поучительнее начать с простого текстового редактора, пока вы только изучаете HTML.</p><p> <strong> РИСУНОК 2.1 </strong> Когда вы сохраняете текст в Листинге 2.1 как файл HTML и просматриваете его в веб-браузере, отображаются только фактический заголовок и основной текст.</p><p> В листинге 2.1, как и на каждой HTML-странице, слова, начинающиеся с <code> <</code> и заканчивающиеся на <code>> </code>, на самом деле являются закодированными командами. Эти закодированные команды называются тегами <em> HTML </em>, потому что они «помечают» фрагменты текста и сообщают веб-браузеру, что это за текст. Это позволяет веб-браузеру правильно отображать текст.</p><p> Первая строка в документе - это объявление типа документа; вы <em> объявляете </em>, что это <code> html </code> (в частности, HTML5), потому что <code> html </code> - это значение, используемое для объявления документа как HTML5 в теге <code> <! DOCTYPE> </code>.</p><p> Если у вас есть учетная запись веб-хостинга, вы можете использовать FTP на этом этапе для передачи файла <code> firstpage.html </code> на веб-сервер. Фактически, начиная с этого часа, инструкции предполагают, что у вас есть хостинг-провайдер и вам удобно отправлять файлы туда и обратно через FTP; если это не так, пожалуйста, просмотрите первый час, прежде чем двигаться дальше.В качестве альтернативы, если вы сознательно выбираете работу с файлами локально (без веб-хоста), будьте готовы настроить инструкции в соответствии с вашими конкретными потребностями (например, игнорировать команды «передать файлы» и «ввести URL-адрес»).</p><h4><span class="ez-toc-section" id="HTML-%D1%82%D0%B5%D0%B3%D0%BE%D0%B2_%D0%BD%D0%B0_%D0%BA%D0%B0%D0%B6%D0%B4%D0%BE%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5_%D0%B4%D0%BE%D0%BB%D0%B6%D0%BD%D0%BE_%D0%B1%D1%8B%D1%82%D1%8C"></span> HTML-тегов на каждой веб-странице должно быть <span class="ez-toc-section-end"></span></h4><p> Пришло время открыть вам секретный язык HTML-тегов. Когда вы поймете этот язык, у вас появятся творческие способности, намного превосходящие возможности других людей. Не говорите другим людям, но это действительно довольно просто.</p><p> Первая строка кода - это объявление типа документа; в HTML5 это просто</p><p> <! DOCTYPE html></p><p> Примечание</p><p> Для просмотра веб-страницы, хранящейся на вашем компьютере, подключение к Интернету не требуется. По умолчанию ваш веб-браузер пытается подключиться к Интернету каждый раз, когда вы его запускаете, что в большинстве случаев имеет смысл. Однако это может быть проблемой, если вы разрабатываете страницы локально на жестком диске (в автономном режиме) и продолжаете получать ошибки о том, что страница не найдена.Если у вас есть постоянное подключение к Интернету через локальную сеть, кабельный модем, Wi-Fi или DSL, это спорный вопрос, потому что браузер никогда не будет жаловаться на то, что он отключен. В противном случае соответствующее действие зависит от вашего браузера; проверьте параметры в меню "Инструменты" вашего браузера.</p><p> Это объявление идентифицирует документ как HTML5, что затем гарантирует, что веб-браузеры знают, чего ожидать, и подготовиться к отображению содержимого в HTML5.</p><p> Многие HTML-теги состоят из двух частей: открывающего тега <em> </em>, указывающего, где начинается фрагмент текста, и закрывающего тега <em> </em>, указывающего, где заканчивается фрагмент текста.Закрывающие теги начинаются с <code>/</code> (косая черта) сразу после символа <code> <</code>.</p><p> Другой тип тега - это пустой тег <em> </em>, который отличается тем, что не включает пару совпадающих открывающего и закрывающего тегов. Вместо этого пустой тег состоит из одного тега, который начинается с <code> <</code> и заканчивается <code>/</code> непосредственно перед символом <code>> </code>. Хотя конечная косая черта больше не требуется явно в HTML5, она помогает в совместимости с XHTML - если на вашем веб-сайте есть куча старого XHTML, он не сломается, пока вы его обновляете.</p><p> Ниже приводится краткое изложение этих трех тегов, чтобы убедиться, что вы понимаете роль, которую каждый играет:</p><ul><li> Открывающий тег <em> </em> - это тег HTML, который указывает начало команды HTML; текст, на который воздействует команда, появляется после открывающего тега. Открывающие теги всегда начинаются с <code> <</code> и заканчиваются <code>> </code>, как в <code><html> </code>.</li><li> Закрывающий тег <em> </em> - это тег HTML, который указывает конец команды HTML; текст, на который воздействует команда, появляется перед закрывающим тегом.Закрывающие теги всегда начинаются с <code> </ </code> и заканчиваются <code>> </code>, как в <code></html> </code>.</li><li> Пустой тег <em> </em> - это тег HTML, который выдает команду HTML без включения текста на странице. Пустые теги всегда начинаются с <code> <</code> и заканчиваются <code> /> </code>, как в <code> <br /> </code> и <code> <img class="lazy lazy-hidden" /><noscript><img /></noscript> </code>.</li></ul><p> Например, тег <code><body> </code> в листинге 2.1 сообщает веб-браузеру, где начинается фактический основной текст страницы, а <code></body> </code> указывает, где он заканчивается.Все, что находится между тегами <code><body> </code> и <code></body> </code>, отображается в основной области отображения окна веб-браузера, как показано на рисунке 2.1.</p><p> Примечание</p><p> Вы, несомненно, заметили в листинге 2.1, что есть дополнительный код, связанный с тегом <code><html> </code>. Этот код состоит из атрибута языка (<code> lang </code>), который используется для указания дополнительной информации, связанной с тегом. В этом случае он указывает, что язык текста в HTML - английский.Если вы пишете на другом языке, замените <code> на </code> (для английского языка) идентификатором языка, который вам подходит.</p><p> В самой верхней части окна браузера (см. Рисунок 2.1) отображается текст заголовка, который представляет собой любой текст, расположенный между <code><title> </code> и <code></title> </code>. Текст заголовка также определяет страницу в меню «Закладки» или «Избранное» браузера, в зависимости от того, какой браузер вы используете. Важно предоставить заголовки для ваших страниц, чтобы посетители страницы могли правильно пометить их для использования в будущем; поисковые системы также используют заголовки для ссылки на результаты поиска.</p><p> Вы будете использовать пары тегов <code><body> </code> и <code><title> </code> на каждой создаваемой HTML-странице, потому что каждая веб-страница требует заголовка и основного текста. Вы также будете использовать пары тегов <code><html> </code> и <code><head> </code>, которые являются двумя другими тегами, показанными в листинге 2.1. Размещение <code><html> </code> в самом начале документа просто указывает на то, что документ является веб-страницей. <code></html> </code> в конце указывает, что веб-страница завершена.</p><p> На странице есть заголовок и основной раздел. Каждый раздел идентифицируется тегами <code><head> </code> и <code><body> </code>. Идея состоит в том, что информация в заголовке страницы каким-то образом описывает страницу, но на самом деле не отображается в веб-браузере. Однако информация, размещенная в теле, отображается в веб-браузере. Тег <code><head> </code> всегда появляется в начале HTML-кода страницы сразу после открывающего тега <code><html> </code>.</p><p> Подсказка</p><p> Возможно, вам будет удобно создать и сохранить простую страницу (также известную как страница скелета <em> <strong> </strong> </em> или шаблон <em> <strong> </strong> </em>), используя только <code> DOCTYPE </code> и открывая и закрывая <code><html> </code>, <code><head> </code>, <code><title> </code> и <code><body> </code> тегов, аналогично документу в листинге 2.1. Затем вы можете открыть этот документ в качестве отправной точки, когда захотите создать новую веб-страницу, и избавить себя от необходимости каждый раз вводить все эти обязательные теги.</p><p> Пара тегов <code><title> </code>, используемая для идентификации заголовка страницы, появляется в заголовке страницы, что означает, что она размещается после открывающего тега <code><head> </code> и перед закрывающим тегом <code></head> </code>. . В ближайшие часы вы узнаете о другой дополнительной информации заголовка, которая может находиться в диапазоне от <code><head> </code> до <code></head> </code>, например о правилах таблиц стилей для форматирования страницы.</p><p> Тег <code></p><p> </code> в листинге 2.1 включает абзац текста. По возможности следует заключать фрагменты текста в соответствующие элементы контейнера; вы узнаете больше об элементах контейнера по мере продвижения книги.</p><h4><span class="ez-toc-section" id="%D0%9E%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D0%B0%D0%B1%D0%B7%D0%B0%D1%86%D0%B5%D0%B2_%D0%B8_%D1%80%D0%B0%D0%B7%D1%80%D1%8B%D0%B2%D0%BE%D0%B2_%D1%81%D1%82%D1%80%D0%BE%D0%BA"></span> Организация страницы с помощью абзацев и разрывов строк <span class="ez-toc-section-end"></span></h4><p> Когда веб-браузер отображает HTML-страницы, он не обращает внимания на окончания строк или количество пробелов между словами. Например, верхняя версия стихотворения на рис. 2.2 отображается с одним пробелом между всеми словами, хотя в листинге 2 это не так.2. Это связано с тем, что лишние пробелы в HTML-коде автоматически сокращаются до одного пробела. Кроме того, когда текст достигает края окна браузера, он автоматически переносится на следующую строку, независимо от того, где в исходном HTML-файле были разрывы строк.</p><p> <strong> РИСУНОК 2.2 </strong> Когда HTML в Листинге 2.2 рассматривается как веб-страница, разрывы строк и абзацев появляются только там, где есть теги <code> <br /> </code> и <code></p><p> </code>.</p><p> <strong> ЛИСТ 2.2 </strong> HTML, содержащий разрывы абзацев и строк</p><p> Примечание</p><p> Если закрывающая косая черта не требуется для пустых элементов, вы можете спросить, почему она используется в этой книге. Одна из причин заключается в том, что с годами закрывающие теги из ненужных превратились в обязательные, а не в обязательные (опять же), и ваш автор просто застрял на своем пути, используя совершенно допустимую, но больше не нужную закрывающую косую черту. Другая причина заключается в том, что из-за того, что этот средний период был относительно длинным, в <em> партиях </em> редакторов кода, генераторов кода и шаблонов используется закрывающая косая черта, поэтому вы увидите, что она используется чаще, чем нет.Неважно, какой способ вы выберете, потому что оба действительны; просто убедитесь, что какой бы стиль кодирования вы ни придерживались, вы всегда будете его использовать.</p><p> Вы должны использовать HTML-теги, если хотите контролировать, где на самом деле появляются разрывы строк и абзацев. Когда текст заключен в теги контейнера <code></p><p> </code>, предполагается разрыв строки после закрывающего тега. Позже вы научитесь управлять высотой разрыва строки с помощью CSS. Тег <code> <br /> </code> вызывает разрыв строки в абзаце.В отличие от других тегов, которые вы видели до сих пор, <code> <br /> </code> не требует закрывающего тега <code> </br> </code> - это один из тех пустых тегов, которые обсуждались ранее.</p><p> Стихотворение в листинге 2.2 и на рисунке 2.2 показывает теги <code> <br /> </code> и <code></p><p> </code>, используемые для разделения строк и стихов песни рекламного агентства. Вы также могли заметить в листинге тег <code></p><hr /><p> </code>, который вызывает появление на странице горизонтальной линии правила (см. Рисунок 2.2). Вставка горизонтальной линейки с тегом <code></p><hr /><p> </code> также приводит к разрыву строки, даже если вы не добавляете вместе с ним тег <code> <br /> </code>. Как и <code> <br /> </code>, тег горизонтальной линейки <code></p><hr /><p> </code> является пустым тегом и, следовательно, никогда не получает закрывающий тег <code></hr><p> </code>.</p><p> Осторожно</p><p> Если вы используете текстовый процессор для создания веб-страницы, обязательно сохраните файл HTML в текстовом формате или в формате ASCII.</p><h4><span class="ez-toc-section" id="%D0%9E%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D0%B2%D0%B0%D1%88%D0%B5%D0%B3%D0%BE_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2"></span> Организация вашего контента с помощью заголовков <span class="ez-toc-section-end"></span></h4><p> Когда вы просматриваете веб-страницы в Интернете, вы заметите, что у многих из них есть заголовок вверху, который кажется больше и жирнее, чем остальной текст.Листинг 2.3 представляет собой образец кода и текста для простой веб-страницы, содержащей пример заголовка по сравнению с обычным текстом абзаца. Любой текст между тегами <code></p><h2></h2><p></code> и <code></h2><p> </code> будет отображаться как большой заголовок. Кроме того, <code></p><h3></h3><p></code> и <code></p><h4></h4><p></code> делают заголовки все меньше и так далее, вплоть до <code></p><h6></h6><p></code>.</p><p> <strong> ЛИСТИНГ 2.3 </strong> Теги заголовка</p><p> Как видно на рис. 2.3, HTML, который создает заголовки, не может быть проще.В этом примере фраза «Мои виджеты» заметно отображается с помощью тега <code></p><h2></h2><p></code>. Чтобы создать самый большой заголовок (уровень 1), просто поместите тег <code></p><h2></h2><p></code> в начало и тег <code></h2><p> </code> в конце текста, который вы хотите использовать в качестве заголовка. Для заголовка немного меньшего размера (уровень 2) - для информации, имеющей меньшее значение, чем заголовок - используйте теги <code></p><h3></h3><p></code> и <code></h3><p> </code> вокруг текста. Для содержания, которое должно отображаться даже менее заметно, чем заголовок уровня 2, используйте теги <code></p><h4></h4><p></code> и <code></h4><p> </code> вокруг текста.</p><p> <strong> РИСУНОК 2.3 </strong> Использование трех уровней заголовков показывает иерархию контента на странице этого образца продукта.</p><p> Примечание</p><p> К настоящему времени вы, вероятно, уловили тот факт, что HTML-код часто имеет отступ, сделанный его автором, чтобы выявить взаимосвязь между различными частями HTML-документа, а также для простоты чтения. Этот отступ является полностью добровольным - вы можете так же легко запустить все теги вместе без пробелов и разрывов строк, и они все равно будут хорошо выглядеть при просмотре в браузере.Отступы предназначены для вас, чтобы вы могли быстро просмотреть страницу, полную кода, и понять, как они сочетаются друг с другом. Отступы в коде - еще одна хорошая привычка веб-дизайна, которая в конечном итоге упрощает обслуживание ваших страниц как для вас, так и для всех, кто может продолжить с того места, где вы остановились.</p><p> Однако имейте в виду, что ваши заголовки должны следовать иерархии контента; использовать только один заголовок уровня 1, иметь один (или несколько) заголовков уровня 2 после заголовка уровня 1, использовать заголовки уровня 3 непосредственно после заголовков уровня 2 и т. д.Не попадайтесь в ловушку присвоения заголовков контенту только для того, чтобы он отображался определенным образом. Вместо этого убедитесь, что вы правильно классифицируете свой контент (как основной заголовок, дополнительный заголовок и т. Д.), Используя стили отображения, чтобы этот текст отображался определенным образом в веб-браузере.</p><p> Теоретически вы также можете использовать теги <code></p><h5></h5><p></code>, <code></p><h5></h5><p></code> и <code></p><h6></h6><p></code>, чтобы сделать заголовки менее важными, но они используются не очень часто.Веб-браузеры редко показывают заметную разницу между этими заголовками и заголовками <code></p><h4></h4><p></code> в любом случае - хотя вы можете контролировать это с помощью собственного CSS - и контент обычно не отображается таким образом, чтобы вам потребовалось шесть уровней заголовков. чтобы показать иерархию контента.</p><p> Важно помнить разницу между заголовком <em> </em> и заголовком <em> </em>. Эти два слова часто взаимозаменяемы в повседневном английском, но когда вы говорите в HTML, <code><title> </code> дает всей странице идентифицирующее имя, которое не отображается на самой странице; он отображается только в строке заголовка окна браузера.С другой стороны, теги заголовков вызывают отображение некоторого текста на странице с визуальным акцентом. На странице может быть только один <code><title> </code>, и он должен находиться внутри тегов <code><head> </code> и <code></head> </code>; с другой стороны, вы можете иметь столько заголовков <code></p><h2></h2><p></code>, <code></p><h3></h3><p></code> и <code></p><h4></h4><p></code>, сколько захотите, в любом порядке, который вам нравится. Однако, как я упоминал ранее, вы должны использовать теги заголовков, чтобы строго контролировать иерархию контента; не используйте заголовки как способ добиться определенного вида, потому что для этого и нужен CSS.</p><h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B5%D0%BC%D0%B0%D0%BD%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2"></span> Понимание семантических элементов <span class="ez-toc-section-end"></span></h4><p> HTML5 включает теги, которые позволяют улучшить семантику - значение - информации, которую вы предоставляете в размеченном тексте. Вместо простого использования HTML в качестве языка представления, как это было в первые дни, когда <code> <b> </code> для полужирного и <code> <i> </code> для курсива было нормой, современный HTML ставит одной из своих целей разделение представление и значение. Используя CSS для предоставления руководящих принципов для представления, составители HTML могут предоставлять значимые имена в своей разметке для отдельных элементов не только с помощью идентификаторов и имен классов (о которых вы узнаете позже в этой книге), но и с помощью семантических элементы.</p><p> Осторожно</p><p> Не забывайте, что все, что находится в заголовке веб-страницы, не предназначено для просмотра на странице, тогда как все в теле страницы <em> предназначено для просмотра.</p><p> Ниже перечислены некоторые семантические элементы, доступные в HTML5:</p><p>.</p><ul><li> <code><br /><header></header><p> </code> - Это может показаться нелогичным, но вы можете использовать несколько тегов <code></p><header> </code> на одной странице. Тег <code></p><header> </code> следует использовать в качестве контейнера для вводной информации, поэтому он может быть только один раз на вашей странице (вероятно, вверху), но вы также можете использовать его несколько раз, если содержимое вашей страницы разбито на разделы.Любой элемент контейнера может иметь элемент <code></p><header> </code>; просто убедитесь, что вы используете его для включения вводной информации об элементе, в котором он содержится.</li><li> <code><br /><footer></footer><p> </code> —Тэг <code></p><footer> </code> используется для хранения дополнительной информации о содержащем его элементе (странице или разделе), такой как информация об авторских правах и авторе или ссылки на связанные ресурсы.</li><li> <code><br /><nav></nav><p> </code> - Если на вашем сайте есть элементы навигации, такие как ссылки на другие разделы на сайте или даже на самой странице, эти ссылки помещаются в тег <code></p><nav> </code>.Тег <code></p><nav> </code> обычно находится в первом экземпляре тега <code></p><header> </code> просто потому, что люди склонны помещать навигацию вверху и рассматривать ее как вводную информацию, но это не является обязательным требованием. Вы можете разместить свой <code></p><nav> </code> элемент где угодно (если он включает навигацию), и вы можете иметь столько на странице, сколько вам нужно (часто не более двух, но вы можете подумать иначе).</li><li> <code><br /><section></section><p> </code> —Тег <code></p><section> </code> содержит все, что связано тематически; он также может содержать тег <code></p><header> </code> для вводной информации и, возможно, тег <code></p><footer> </code> для другой связанной информации.Вы можете думать о <code></p><section> </code> как о более значимом, чем стандартный тег <code></p><p> </code> (абзац) или <code></p><div> </code> (разделение), который обычно не несет никакого смысла; использование <code></p><section> </code> передает отношения между содержащимися в нем элементами контента.</li><li> <code><br /><article></article><p> </code> —Тег <code></p><article> </code> похож на тег <code></p><section> </code>, поскольку он может содержать <code></p><header> </code>, <code></p><footer> </code> и другие контейнеры. такие элементы, как абзацы и разделы.Но дополнительное значение, которое несет тег <code></p><article> </code>, заключается в том, что он похож на статью в газете или другом издании. Используйте этот тег для сообщений в блогах, новостных статей, обзоров и других элементов, соответствующих этому описанию. Одно из ключевых различий между <code></p><article> </code> и <code></p><section> </code> заключается в том, что <code></p><article> </code> - это отдельная работа, а <code></p><section> </code> - это тематическая группа информации.</li><li> <code><br /><aside></aside><p> </code> —Используйте тег <code></p><aside> </code> для указания вторичной информации; если тег <code></p><aside> </code> находится в пределах <code></p><section> </code> или <code></p><article> </code>, связь будет с этими контейнерами; в противном случае вторичная связь будет связана со всей страницей или самим сайтом.Возможно, имеет смысл думать о <code></p><aside> </code> как о боковой панели - либо для всего содержимого на странице, либо для статьи или другого тематического контейнера информации.</li></ul><p> Эти семантические элементы станут яснее по мере их использования. В общем, использование семантических элементов - хорошая идея, потому что они придают дополнительный смысл не только вам и другим дизайнерам и программистам, читающим и работающим с вашей разметкой, но и машинам. Веб-браузеры и программы чтения с экрана будут реагировать на ваши семантические элементы, используя эти элементы для определения структуры вашего документа; программы чтения с экрана сообщают пользователям более глубокий смысл, тем самым повышая доступность вашего материала.</p><p> На протяжении всей книги вы используете эти и другие семантические элементы для структуры страницы в дополнение к стандартным типам блочных элементов, которые предоставляет HTML.</p><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B0_%D0%B2%D0%B0%D1%88%D0%B5%D0%B3%D0%BE_%D0%B2%D0%B5%D0%B1-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0"></span> Проверка вашего веб-контента <span class="ez-toc-section-end"></span></h4><p> В первый час я обсуждал способы тестирования ваших страниц; один очень важный способ проверить ваши страницы - это <em> проверить </em> их. Подумайте об этом так: одно дело спроектировать и нарисовать красивый набор планов дома, но совсем другое - архитектор обозначить его как безопасную конструкцию, подходящую для строительства.Проверка ваших веб-страниц - аналогичный процесс; Однако в данном случае архитектор - это приложение, а не человек.</p><p> Короче говоря, проверка - это процесс тестирования ваших страниц с помощью специального приложения, которое ищет ошибки и проверяет, соответствуют ли ваши страницы строгому стандарту XHTML. Проверка проста. Фактически, орган по стандартизации, отвечающий за разработку веб-стандартов, Консорциум World Wide Web (W3C), предлагает инструмент онлайн-проверки, который вы можете использовать. Чтобы проверить страницу, перейдите по этому URL-адресу: http: // validator.w3.org/. На рисунке 2.4 показана служба проверки разметки W3C.</p><p> <strong> РИСУНОК 2.4 </strong> Служба проверки разметки W3C позволяет проверять документ HTML (XHTML), чтобы убедиться, что он правильно закодирован.</p><p> Если вы уже опубликовали страницу в Интернете, вы можете использовать вкладку «Проверить по URI». Используйте вкладку «Проверить путем загрузки файла» для проверки файлов, хранящихся в файловой системе локального компьютера. Вкладка «Проверить с помощью прямого ввода» позволяет вставить содержимое файла из текстового редактора.Если все пойдет хорошо, ваша страница получит промежуточный отчет (см. Рисунок 2.5).</p><p> <strong> РИСУНОК 2.5 </strong> Если страница проходит службу проверки разметки W3C, вы знаете, что она готова к использованию в прайм-тайм.</p><p> Если служба проверки разметки W3C обнаруживает ошибку на вашей веб-странице, она предоставляет конкретные сведения (включая номера строк кода нарушения). Это отличный способ найти проблемы и избавить ваши страницы от ошибочного кода. Проверка не только информирует вас, когда ваши страницы построены правильно, но также помогает вам находить и устранять проблемы, прежде чем вы разместите страницы для всеобщего обозрения.</p><p> Подсказка</p><p> Некоторые инструменты веб-разработки включают встроенные функции проверки, которые можно использовать вместо службы проверки разметки W3C. Некоторые примеры включают расширения браузера, такие как Firebug (http://getfirebug.com/) и HTML Validator (http://users.skynet.be/mgueury/mozilla/), но многие другие программы предлагают аналогичные функции - проверьте свою пользовательскую документацию. .</p><h4><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%BE%D0%B4%D0%BA%D0%B0"></span> Сводка <span class="ez-toc-section-end"></span></h4><p> Этот час познакомил с основами того, что такое веб-страницы и как они работают. Вы узнали, что закодированные HTML-команды включаются в текстовый файл, и вы увидели, что набирать HTML-текст самостоятельно лучше, чем использовать графический редактор для создания HTML-команд, особенно когда вы изучаете HTML.</p><p> Вы познакомились с самыми основными и важными тегами HTML. Добавляя эти закодированные команды в любой текстовый документ, вы можете быстро преобразовать его в настоящую веб-страницу. Вы узнали, что первым шагом в создании веб-страницы является добавление нескольких обязательных HTML-тегов в начало и конец, включая добавление заголовка для страницы. Затем вы можете отметить, где заканчиваются абзацы и строки, и добавить горизонтальные линии и заголовки, если хотите. Вы также познакомились с некоторыми семантическими тегами в HTML5, которые используются для придания дополнительного значения путем определения типов содержимого, содержащегося на ваших страницах (а не только самого содержимого).В таблице 2.1 приведены все теги, представленные в этот час.</p><p> <strong> ТАБЛИЦА 2.1 </strong> HTML-тегов, обработанных за час 2</p><p> Наконец, вы узнали о важности проверки вашего HTML и о том, как это сделать с помощью онлайн-инструментов проверки.</p><h4><span class="ez-toc-section" id="%D0%92%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B_%D0%B8_%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%8B"></span> Вопросы и ответы <span class="ez-toc-section-end"></span></h4><p> <strong> В. Я создал веб-страницу, но когда открываю файл в своем браузере, я вижу весь текст, включая теги HTML. Иногда я даже вижу странных персонажей-болванов вверху страницы. Что я сделал не так? </strong></p><p> <strong> А.</strong> Вы не сохранили файл как обычный текст. Попробуйте сохранить файл еще раз, стараясь сохранить его как текстовый или как текст ASCII. Если вы не совсем понимаете, как заставить ваш текстовый процессор это делать, не волнуйтесь. Вместо этого просто введите свои HTML-файлы в Блокноте или TextEdit, и все должно работать нормально. (Кроме того, всегда убедитесь, что имя файла вашей веб-страницы заканчивается на <code> .html </code> или <code> .htm </code>.)</p><p> <strong> В. Я видел в Интернете веб-страницы, на которых в начале не было тегов </strong> <code> <! DOCTYPE> </code> <strong> или </strong> <code><html> </code> <strong>.Вы сказали, что страницы всегда должны начинаться с этих тегов. В чем дело? </strong></p><p> <strong> A. </strong> Многие веб-браузеры простят вас, если вы забудете включить тег <code> <! DOCTYPE> </code> или <code><html> </code> и все равно будут отображать страницу правильно. Тем не менее, это очень хорошая идея, потому что некоторые программы действительно нуждаются в нем, чтобы идентифицировать страницу как действительный HTML. Кроме того, вы хотите, чтобы ваши страницы были настоящими HTML-страницами, чтобы они соответствовали последним веб-стандартам.</p><h5><span class="ez-toc-section" id="%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80%D0%B8%D0%BD%D0%B0"></span> Викторина <span class="ez-toc-section-end"></span></h5><p> Викторина загружается здесь</p></p></p><h5><span class="ez-toc-section" id="%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F"></span> Упражнения <span class="ez-toc-section-end"></span></h5><ul><li> Даже если ваша главная цель при чтении этой книги - создание веб-контента для вашего бизнеса, вы можете создать личную веб-страницу просто для практики. Введите несколько абзацев, чтобы представиться миру, и используйте теги HTML, которые вы выучили за этот час, чтобы превратить их в веб-страницу.</li><li> На протяжении всей книги вы будете следовать примерам кода и создавать собственные страницы.Найдите минутку, чтобы настроить базовый шаблон документа, содержащий объявление типа документа и теги для основной структуры HTML-документа. Таким образом, вы можете быть готовы копировать и вставлять эту информацию, когда она вам понадобится.</li></ul></p></p></p><p> .</p><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/sozdanie-dokumenta-html-kak-sozdat-fajl-html-v-bloknote-sdelat.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://jumper.su/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='12429' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://jumper.su/raznoe/vektor-kartinki-osen-izobrazheniya-osen-besplatnye-vektory-stokovye-foto-i-psd.html" rel="prev"><span class="screen-reader-text">Previous Post</span><span class="nav-title">Вектор картинки осень: Изображения Осень | Бесплатные векторы, стоковые фото и PSD</span></a></div><div class="nav-next"><a href="https://jumper.su/raznoe/derevo-sostarennoe-tekstura-d1-81-d0-be-d1-81-d1-82-d0-b0-d1-80-d0-b5-d0-bd-d0-bd-d0-be-d0-b5-d0-b4-d0-b5-d1-80-d0-b5-d0-b2-d0-be-d1-82-d0-b5-d0-ba-d1-81-d1-82-d1-83-d1-80-d0-b0-kartinki-stokovye-fo.html" rel="next"><span class="screen-reader-text">Next Post</span><span class="nav-title">Дерево состаренное текстура: D1 81 d0 be d1 81 d1 82 d0 b0 d1 80 d0 b5 d0 bd d0 bd d0 be d0 b5 d0 b4 d0 b5 d1 80 d0 b5 d0 b2 d0 be d1 82 d0 b5 d0 ba d1 81 d1 82 d1 83 d1 80 d0 b0 картинки, стоковые фото D1 81 d0 be d1 81 d1 82 d0 b0 d1 80 d0 b5 d0 bd d0 bd d0 be d0 b5 d0 b4 d0 b5 d1 80 d0 b5 d0 b2 d0 be d1 82 d0 b5 d0 ba d1 81 d1 82 d1 83 d1 80 d0 b0</span></a></div></div></nav></article></div></div><div class="col-md-4 col-lg-4"><aside id="secondary" class="widget-area"><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2><ul><li class="cat-item cat-item-6"><a href="https://jumper.su/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-1"><a href="https://jumper.su/category/bez-rubriki">Без рубрики</a></li><li class="cat-item cat-item-7"><a href="https://jumper.su/category/verstka">Верстка</a></li><li class="cat-item cat-item-5"><a href="https://jumper.su/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-4"><a href="https://jumper.su/category/dlya-nachinayushhih">Для начинающих</a></li><li class="cat-item cat-item-10"><a href="https://jumper.su/category/obuchenie">Обучение</a></li><li class="cat-item cat-item-9"><a href="https://jumper.su/category/primery">Примеры</a></li><li class="cat-item cat-item-3"><a href="https://jumper.su/category/raznoe">Разное</a></li><li class="cat-item cat-item-8"><a href="https://jumper.su/category/shablon">Шаблон</a></li></ul></section></aside></div></div></main></div><section itemtype='https://schema.org/WPFooter' itemscope='itemscope' role='contentinfo' class="fansee-business-footer-wrapper"><div class="container-fluid px-md-5"><footer class="fansee-business-footer-wrapper-inner footer-widget"><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div></footer></div><div class="fansee-business-copyright"><div class="container-fluid"><div class="fansee-business-copyright-inner"><div class="fansee-business-copy-right"><div class="pr-0"> 2024 © Все права защищены.</div></div><div class="fansee-business-social-menu"><ul class="fansee-business-demo-social-menu"><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li></ul></div></div></div></div></section><div class="fansee-business-stt scroll-to-top"> <i class="fa fa-arrow-up"></i></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://jumper.su/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> </body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="4579a71d7d1cc8040650378d-|49" defer></script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

Создание документа html: Как создать файл html в блокноте (сделать)

Как создать HTML документ — Программирование с нуля

Создание вашего первого HTML-документа

Шаг 1. Создание файла HTML

Шаг 2. Введите код HTML

Шаг 3. Сохраните HTML документ

Разбор HTML кода

HTML-теги и элементы

HTML5 | Создание документа

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

Шаг 1. создание шаблона документа html — Информатика, информационные технологии

Статьи к прочтению:

Создание сайта для маленьких. Урок 1 — создание первого HTML шаблона

Похожие статьи:

Устройство HTML-документа | Web-Creature — Создание сайтов и заработок на них

Обязательные метки

<html> … </html>

<head> … </head>

<title> … </title>

<body> … </body>

<h2> … </h2> ≈ <H6> … </H6>

<P> … </P>

Еще по этой теме…

Создание документа HTML в текстовом редакторе Блокнот

Основы HTML и CSS | BrainsCloud.ru

Создание простого HTML-документа

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

Для создания HTML-документа

Связанные темы

DOM Реализация.createHTMLDocument () — веб-API | MDN

Параметры