Кодировка текста
<META CHARSET ="UTF-8" >
Одноэлементный тег <META> определяет так называемые мета-теги, содержащие дополнительную информацию, которые браузеры используют для обработки страницы, а поисковые системы – для ее индексации. В блоке <HEAD> может быть несколько тегов <META>, так как в зависимости от используемых атрибутов они несут разную информацию.
Мета-теги записываются «по одному», т.е. в угловых скобках разрешается использовать более чем один мета-тег. Все они размещаются в контейнере <HEAD>. Как правило, атрибуты любого мета-тега сводятся к парам «имя=значение».
Атрибут CHARSET указывает кодировку документа (напр., выше это UTF-8).
2) Заголовок страницы сайта <TITLE></TITLE>
<TITLE> Как создать сайт самому. Написать сайт самому. Как сделать сайт. Инструкция начинающим </TITLE>
У этого элемента обязательный закрывающий тег. Это очень важный элемент. Информация из элемента TITLE показывается в окне браузера (вверху слева), и поэтому это очень важный и информативный элемент для посетителей сайта.
Тем более, что первые несколько (около 70) символов из TITLE показываются при поиске поисковых системах. Обычно там используются ключевые слова, по которым хотят «раскручивать» сайт.
Описание страницы сайта
<META NAME="Description" CONTENT= "Хотите создать и раскрутить сайт в сети интернет..... и т.д." >
Атрибут NAME определяет имя мета-тега, Description – описание страницы.
Атрибут CONTENT определяет содержимое мета-записи.
Поисковая система также может формировать описание из кусочков фраз со всей страницы, релевантных (подходящих) запросу пользователя.
Набор ключевых слов
<META NAME="Keywords" CONTENT= "Сайт, интернет, html, css" >
У атрибута NAME в данном случае другое имя мета-тега NAME="Keywords".
Набор ключевых слов на сегодня уже не актуален и не используется. Раньше эти слова учитывались поисковыми системами.
Упрощенная пример с заполненной структурой головы:
<!doctype html >
<html>
<head>
<meta charset ="utf-8" >
<title> Как создать свой сайт </title>
<meta name="Description" content=" Если хотите научиться
делать свои сайты, тогда вы попали по адресу! ">
<meta name="Keywords" content=" Сайт, интернет, html, css ">
</head>
<!-- начнем работать с телом документа -->
<body>
Тело документа и разнообразный текст, картинки, ссылки, прочее =)
</body>
<!--закончили с телом документа-->
</html>
Работа с текстом…
Перейдём к свойствам текста, научимся выделять абзацы, заголовки и т.д.
Если вы возьмете и скопируете ниже приведенный текст от начала и до конца, и вставите его между тегами тела документа <BODY></BODY> своей первой страничку, то вы увидите примерно следующее…
Как вы заметили, текст идет слитно, без разделений на абзацы, также ничего не выделено заголовком, словом, форматирование отсутствует! Чтобы Браузер правильно отображал текст, необходимо задать его форматирование с помощью специальных тегов.
Пробелы
Когда браузер встречается с двумя или более пробелами, идущими друг за другом, он отображает только один. Аналогично он поступает и с переносом строки, воспринимая его как единичный символ пробела.
Основными элементами форматирования текста в HTML являются…
Тег <P></P>
P – используется для разметки-разбиения текста на абзацы (параграфы).
Атрибут ALIGN определяет способ горизонтального выравнивания параграфа.
Возможные значения: <p align="left | center | right | justify">…</p>
Примеч.: следите, чтобы содержимое в кавычках было написано без пробелов, т.е. <p align="right">, а не <p align=" right ">, иначе не будет работать, т.к. запись считается некорректной.
<!doctype html>
<html>
<head>
<meta charset ="utf-8" > <title> Это моя первая страница! </title>
</head>
<body>
<p align="center"> Этот параграф по центру </p>
<p align="left"> Этот по левому краю </p>
<p> Этот тоже по левому (т.к. по умолчанию) </p>
<p align="right"> Этот по правому краю </p>
<p align="justify"> В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю </p>
</body>
</html>
Теги <BR>, <WBR>
BR – указывает на перенос строки. Закрывающий тег не требуется.
WBR – допускает разбиения строки в строго запланированном месте. Закрывающий тег не требуется.
Фрагмент кода:
Начинается первая строка <br>
теперь идет вторая <br>
а вот уже и третья
<p> А это параграф и внутри него тоже можно использовать тег <br> переноса строки. Его надо использовать всегда, когда надо перенести строку:) </p>
Тег <NOBR></NOBR>
NOBR – служит для обозначения неразрывной строки.
Пример использования:
| <P><NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было. </NOBR>Метоксихлор<WBR>диэтиламино<WBR>метил<WBR>бутил<WBR>амино<WBR>акридин</P> |
Теги <H1,H2,...H6></H1,H2,…H6> (HN)
Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. В языке HTML существует шесть уровней заголовков(«heading» — заголовок):
H1,H2,...H6 – применяются разбивания текста на смысловые уровни - разделы и подразделы. Всего существует шесть уровней заголовков, различающихся по величине шрифта.
<H1> используется для основных заголовков;
с <H2> по <H6> — для подзаголовков.
Атрибут ALIGN определяет способ горизонтального выравнивания заголовков. Пример с возможными значениями (синтаксис):
<H1 align="left | center | right | justify">...</H1>
<!-- примеры заголовков от 1 до 6 уровня-->
<h1> Большой заголовок </h1>
<h2> Заголовок поменьше </h2>
<h3> Еще меньше </h3>
<h4> Совсем маленький </h4>
<h5> Малюсенький заголовочек </h5>
<h6> Ну просто лилипутский заголовочек </h6>
Тег <HR>
<HR> вставляет в текст горизонтальную разделительную линию.
Атрибуты:
WIDTH –длина линии в пикселах или процентах от ширины окна браузера.
SIZE – толщина линии в пикселах.
ALIGN –выравнивание горизонтальной линии (по умолчанию по центру).
<hr align="center | left | right">
NOSHADE – отменяет трехмерные эффекты (флаг).
COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатеричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.
Пример:
Текст до линии <hr noshade width="50%" align="left"> После линии <br>
А вот пример линии толщиной 2px и без флага noshade
<hr width="50%" align="left" size ="2">
ESCAPE-последовательности
Запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками.
| Символ | Команда | Значение |
| < | < < | Символ «меньше, чем»; левая угловая скобка |
| = | = | Символ «равно» (знак равенства). |
| > | > > | Символ «больше, чем»; правая угловая скобка |
| " | " | Прямые кавычки |
| & | & | Амперсанд |
| | Неразрывный пробел | |
| © | &сору; | Символ копирайта |
| ® | ® | Символ зарегистрированной торговой марки |
| ° | ° | Знак градуса |
| [ | [ | Левая квадратная скобка |
| ] | ] | Правая квадратная скобка |
Например, строка html-кода
На этой страничке изложены мои "мудрые мысли" по данному вопросу
отобразится в окне браузера следующим образом:
Большее количество escape-последовательностей html не составляет труда найти, введя соответствующий запрос в поисковой системе. Например, немало последовательностей можно найти здесь https://www.i2r.ru/static/479/out_16155.shtml и здесь https://www.lexium.ru/2009/05/343/
Escape-последовательности очень чувствительны к регистру, например, нельзя использовать - " вместо ".
Ещё немного тегов
Тег <DIV></DIV>
DIV используется как контейнер для блоков html кода страницы.
Атрибут ALIGN определяет способ горизонтального выравнивания контейнера (left, center, right, justify).
Атрибут TITLE добавляет всплывающую подсказку к содержимому.
<div align="right"> Начинается первая строка <br>
теперь идет вторая <br> </div>
а вот уже и третья
<p> А это параграф и внутри него тоже можно использовать тег <br> переноса строки. Его надо использовать всегда, когда надо перенести строку:) </p>
Примечание: Находящиеся между div-тегами текст или HTML-элементы выделяются как бы в отдельный параграф (но отступы гораздо меньше).
Сейчас вы читаете текст на первой строке <div> Но теперь уже на второй </div> А теперь уже на третьей
Тег <SPAN></SPAN>
SPAN используется для выделения части информации и придания ей различных стилей.
Атрибут тега <SPAN></SPAN> - это задание стиля текста.
Хотите пользоваться <span style="color:red;"> Adobe Dreamweaver </span> - тогда изучите хотя бы основы html и <br>
тогда Вы без проблем разберетесь с этой замечательной программой!
Лабораторная работа №1.
Структура веб-документа. Создание простейшей страницы
Задание 1. «Моя первая веб-страница»
Пример: D:\Ivanov\website
Внутри папки website создать текстовый документ
| на диске D:\ на нём папка с вашей фамилией внутри нее папка website |
Пример создания для WinXP и Win7:
Откройте 
в программе Блокнот двойным кликом или в контекстном меню выбрать «Открыть с помощью – Блокнот».
Наберите нижеследующий код.
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<title> Это моя первая страничка! </title>
</head>
<body>
<p> Ура!!!! Я создал свою первую страницу на html!!! </p>
</body>
</html>
Вот как это будет выглядеть…
Теперь сохраните внесённые изменения командой Файл – Сохранить как…. «index.html» (не закрывайте сам текстовый документ). Если такая опция доступна, выберите кодировку UTF-8.
Вот что получилось (см. ниже)…
Не закрывая окно программы Блокнот с открытым index.html, откройте файлик index.html в браузере Firefox (или Chrome) двойным кликом. Результат:
Не закрывайте браузер и программу Блокнот.
Удалите файл «Новый текстовый документ.txt», он Вам больше не пригодится =)
В окне редактора Блокнот в конце тела документа добавьте строку
Сохраните изменения с помощью пункта меню «Файл – Сохранить», или с помощью сочетания клавиш Ctrl+S.
В окне браузера обновите содержимое вкладки любым вариантом на Ваш выбор:
(1) с помощью кнопки «Обновить» 
;
(2) с помощью пункта меню «Обновить» в контекстном меню вкладки;
(3) с помощью сочетания клавиш Ctrl+R;
(4) с помощью клавиши F5 (или сочетания клавиш Ctrl+F5).
На экране вы увидите следующий результат своей работы, изображённый на рисунке ниже:
Внесите изменения в текст файла HTML в Блокноте, расположив слова «Расписание», «занятий», «на вторник» на разных строках с помощью клавиши переноса строки [Enter]:
Сохраните данный файл с помощью команды «Файл – Сохранить» (Ctrl+S). Не закрывайте программу Блокнот.
Обновите веб-страницу в браузере и посмотрите результат. Изменилось ли положение текста в окне браузера?
Примечание.
В дальнейшем все изменения в веб-страницу вносите в программе Блокнот, не закрывая текстовый файл и не закрывая браузер.
После внесения изменений в веб-страницу достаточно сохранить изменения (Ctrl+S) и обновить страницу браузера (F5), чтобы увидеть результат.
Внесите изменение в index.html: чтобы расставить переносы строк, которые обработает браузер, используйте тег переноса строки <BR>.
Сохраните файл. Проверьте результат (см. ниже).
В конец тела документа добавьте следующую запись:
Сохраните файл. Проверьте результат в браузере.
Разверните окно во весь экран. Помещается ли последний добавленный абзац в одну строку?
Постепенно уменьшайте окно. Что происходит? Какая часть нового абзаца переносится, а какая – нет? Почему?
Рассмотрим пример создания заголовков различного уровня, которые применяются для выделения тех или иных разделов в веб-страничке, как в журнале, статье, книге или конспекте лекций.
Теги создания заголовков <HN> позволяют создать заголовок с минимальными затратами времени, они задают формат текста заголовка и отступы без необходимости прибегать к дополнительным тегам.
В конец тела документа добавьте следующий код:
Сохраните файл. Проверьте результат в браузере.
Удалите «текст» между заголовками 1-6 уровней. Сохраните изменения.
Добьёмся изображения ниже:
Создайте три горизонтальные разделительные линии <HR> в следующих местах:
одна из которых будет выравнена по центру (перед тегом H1),
одна по левому краю (перед тегом H4)
и одна – по правому краю (после тега H6).
Размер линий задайте 50% от размера экрана, толщина = три, цвет – зеленый.
Подсказка для каждой из линий:
Сохраните файл. Проверьте результат в браузере.
В конце тела документа, используя вместо символов вышеописанные в теоретической части перед лабораторной работой escape-последовательности (вместо «равно», «левая/правая угловая скобка», «кавычка», «косая черта»), создайте следующий текст:
Большое количество escape-последовательностей html можно легко найти в сети интернет, например, здесь https://www.i2r.ru/static/479/out_16155.shtml и здесь https://www.lexium.ru/2009/05/343/
Все, что заключено между 
и 
воспринимается браузером как комментарии. Они могут быть полезны для разработчика, но не видны и не мешают пользователю, посетителю сайта.
Сочетания знаков для обозначения комментариев
пишутся слитно, без пробелов.
Добавьте в файл index.html комментарии, поясняющие, какой тег или фрагмент кода за что отвечает (см. ниже).
Сохраните файл. Проверьте результат. Отображаются ли комментарии в получившейся веб-страничке? А должны ли? Зачем нужны комментарии?