Панорама советов

Сайт-Практическая школа

https://site-ps.ru

Язык гипертекстовой разметки.

Информационные технологии.

Чтобы сразу перейти к примерам, жми кнопку "Примеры" на навигационной панели вверху-слева.

Веб-браузер при отображении на мониторе документа использует заданные параметры отображения документа (DOM). DOM (Document Object Model) - это модель документа загруженная в браузер и представляющая документ как дерево, где каждый узел представляет часть документа (рисунок, строка текста, комментарий).

Язык гипертекстовой разметки (HTML - Hypertext Markup Language) — набор символов вставляемых в текст документа для передачи информации как браузеру отображать веб страницы. Есть две спецификации HTML: W3C (Консо́рциум Всеми́рной паути́ны - World Wide Web Consortium) и WHATWG (Web Hypertext Application Technology Working Group — «Рабочая группа по технологиям гипертекстовых веб-приложений»), какой из них верить? Спецификация — это инструкция: как для браузеров, так и для разрабочиков. W3C — это консорциум всемирной сети, некоммерческая организация, в рамках которой разрабатывают технологии, на которых работает веб. WHATWG — это независимая рабочая группа по технологиям гипертекстовых веб-приложений, которую собрали в рамках W3C, в которую вошли представители браузеров. Между WHATWG и W3C возникли разногласия. Из-за этого начали появляться различия между версиями. WHATWG отказалась от нумерации HTML и начала разрабатывать спецификацию как живой стандарт. У W3C большее количество примеров и Гитхаб, у WHATWG получаются другие спецификации: DOM, Canvas, Fetch, URL.

Язык гипертекстовой разметки. Примеры.

Язык гипертекстовой разметки. HTML Редактор.

Язык гипертекстовой разметки. HTML документ.

Язык гипертекстовой разметки. Заголовок.

Язык гипертекстовой разметки. Параграф.

Язык гипертекстовой разметки. Ссылка.

Язык гипертекстовой разметки. Изображение.

Язык гипертекстовой разметки. Кнопка.

Язык гипертекстовой разметки. Списки.

Язык гипертекстовой разметки. Ссылка якорь.

Язык гипертекстовой разметки. Всплывающая подсказка для ссылки.

Язык гипертекстовой разметки. Ссылка на адрес электронной почты.

Язык гипертекстовой разметки. Программный код.

Язык гипертекстовой разметки. Предварительно отформатированный текст.

Язык гипертекстовой разметки. Блок.

Язык гипертекстовой разметки. Таблица.

Язык гипертекстовой разметки. Таблица. Границы.

Язык гипертекстовой разметки. Промежуток.

Язык гипертекстовой разметки. Идентификатор.

Язык гипертекстовой разметки. Класс.

Язык гипертекстовой разметки. Класс "мигающий".

Язык гипертекстовой разметки. Специальные символы.

Язык гипертекстовой разметки. Шапка.

Язык гипертекстовой разметки. Подвал

Язык гипертекстовой разметки. Навигация.

Язык гипертекстовой разметки. Видео.

Язык гипертекстовой разметки. Аудио.

Язык гипертекстовой разметки. Тело сайта.

Метод "Скрытый текст".

Метод "Изменить размер текста наведением и отводом мыши".

Метод "Изменить цвет текста наведением и отводом мыши".

Метод "Вывести неотображаемый текст с изменением части стиля".

Язык гипертекстовой разметки. HTML Редактор.

Для создания документа HTML понадобиться текстовый редактор (среда разработки). Текстовый редактор (для начала достаточно простой), например: Notepad++ (для ОС Windows) или TextEdit (для ОС Mac) или Geany (для ОС Linux), чтобы писать текст (код), загружать картинки, аудио, видео, для ваших веб-страниц. Данный пример разберем при помощи текстового редактора (среды разработки) Geany.

Установите и откройте текстовый редактор Geany.

На панели инструментов в меню - Файл нажать - New (Новый). Откроется новый документ. На панели инструментов в меню - Документ нажать - Установить тип файла - Языки разметки - документ HTML. Установится тип файла HTML. На панели инструментов в меню - Документ нажать - Установить кодировку - Юникод - Юникод (UTF-8). Это стандарт кодирования символов, включающий в себя знаки почти всех письменных языков мира. В настоящее время стандарт 8-бит является преобладающим в Интернете.

Напишите самостоятельно следующий код:




<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <body>
  <h1>Заголовок</h1>
  <p>Параграф.</p>
 </body>
</html>

На панели инструментов в меню - Файл нажать - Save (Сохранить). Откроется путь к папке куда сохранить этот документ. Введите любое название файла на английском языке и задайте формат ".html".

Нажмите на этот файл и браузер откроет ваш HTML документ с текстом: Заголовок. Параграф.

Если вы увидели эти слова на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. HTML документ.

В этом примере при помощи редактора записаны декларация и четыре вложенных элемента документа HTML (Веб страницы): !DOCTYPE html - декларация, представляет тип документа и помогает браузерам корректно отображать веб страницы; html - элемент, является корневым элементом HTML страницы и заключает в себе всё содержимое на этой странице; body - элемент, содержит весь контент, который вы хотите показывать посетителям вашей страницы — текст, изображения, видео; h1 - элемент, определяет большой заголовок; p - элемент, определяет параграф. 




<!DOCTYPE html>
<html>
 <body>
  <h1>Заголовок</h1>
  <p>Параграф.</p>
 </body>
</html>

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




    <!DOCTYPE html> - декларация, определяет документ HTML5;
    <html> - элемент, является корневым элементом HTML страницы;
    <head> - элемент, содержит метаинформацию о документе;
    <title> - элемент, задает заголовок документа;
    <body> - элемент, содержит видимый контент страницы;
    <h1> - элемент, определяет большой заголовок;
    <p> - элемент, определяет параграф.

Декларация <!DOCTYPE> представляет тип документа и помогает браузерам корректно отображать веб страницы. Она не чувствительно к регистру. HTML документ начинается с <html> и заканчивается </html>. Браузеры не отображают теги HTML, они используют их для вывода содержимого страницы. Видимая часть HTML документа находится между <body> и </body>. На панели инструментов в меню - Файл нажать - Save (Сохранить). Откроется путь к папке куда сохранить этот документ. Введите любое название файла на английском языке и задайте формат.html Нажмите на этот файл и браузер откроет ваш HTML документ с текстом: Заголовок. Параграф.

Если вы увидели эти слова на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Заголовок.

Установите и откройте текстовый редактор (среду разработки). На панели инструментов в меню - Файл нажать - New (Новый). Откроется новый документ.

Напишите самостоятельно следующий код: 




<!DOCTYPE html>
<html>
 <body>
  <h1>Это заголовок 1</h1>
  <h2>Это заголовок 2</h2>
  <h3>Это заголовок 3</h3>
  <h4>Это заголовок 4</h4>
  <h5>Это заголовок 5</h5>
  <h6>Это заголовок 6</h6>
 </body>
</html>

На панели инструментов в меню - Файл нажать - Save (Сохранить). Откроется путь к папке куда сохранить этот документ. Введите любое название файла на английском языке и задайте формат.html и нажмите - Save (Сохранить). Нажмите на этот файл и браузер откроет ваш HTML документ с текстом по ранжиру: 



 
Это заголовок 1
Это заголовок 2
Это заголовок 3
Это заголовок 4
Это заголовок 5
Это заголовок 6

Если вы увидели эти слова на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Параграф.

Запустите текстовый редактор (среду разработки). На панели инструментов в меню - Файл нажать - New (Новый). Откроется новый документ.

Напишите самостоятельно следующий код: 




<!DOCTYPE html>
<html>
 <body>
  <p>Параграф.</p>
 </body>
</html>

На панели инструментов в меню - Файл нажать - Save (Сохранить). Откроется путь к папке куда сохранить этот документ. Введите любое название файла на английском языке и задайте формат.html и нажмите - Save (Сохранить). Нажмите на этот файл и браузер откроет ваш HTML документ с текстом: Параграф.

Если вы увидели эти слова на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Ссылка.

Запустите текстовый редактор (среду разработки). На панели инструментов в меню - Файл нажать - New (Новый). Откроется новый документ.

Напишите самостоятельно следующий код: 




<!DOCTYPE html>
<html>
 <body>
   <a href="https://advice.panorama-sovetov.ru">Это ссылка на сайт Панорама советов.</a>
 </body>
</html>

На панели инструментов в меню - Файл нажать - Save (Сохранить). Откроется путь к папке куда сохранить этот документ. Введите любое название файла на английском языке и задайте формат.html и нажмите - Save (Сохранить). Нажмите на этот файл и браузер откроет ваш HTML документ с текстом: "Это ссылка на сайт Панорама советов".

Если вы увидели эти слова на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Изображение.

Создайте папку - Рабочий стол. В папке - Рабочий стол - создайте папку с именем - html.

В ней создайте папку с именем - img.

В браузере напишите: "рисунок с расширением .png 100х100 пикселей" и загрузите из интернета один из выданных вариантов с расширением .png.

Из папки загрузки скопируйте в папку с именем - img рисунок с расширением .png 100х100 пикселей и переименуйте его как файл с именем "panorama-sovetov.png" кликнув на нем правой кнопкой мыши (переиминовать).

Нажмите на файл с именем "panorama-sovetov.png" правой кнопкой мыши. Откроется окно уведомлений. В нем выберете пункт - Свойства - Основные - Адрес (Путь). Выделите левой кнопкой мыши весь путь к файлу с именем "panorama-sovetov.png". Правой кнопкой мыши нажмите - Копировать. Скопированный путь типа - "/home/user/Рабочий стол/html/img/panorama-sovetov.png" позже вставите в шаблон файла - index.html для указания браузеру, где искать рисунок. Закройте окно уведомлений.

Запустите текстовый редактор (среду разработки). На панели инструментов в меню - Файл нажать - Open (Открыть).

Откройте файл - index.html, в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <head>
	<title>Document.</title>
 </head>
	<body>
		<img src="/home/user/Рабочий стол/html/img/panorama-sovetov.png" alt="Изображение Панорама советов." width="100" height="100">
	</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на этот файл- index.html и браузер откроет ваш HTML документ с рисунком:"panorama-sovetov.png".

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

Язык гипертекстовой разметки. Кнопка.

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

Откройте файл - index.html, в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
   <button>Кнопка.</button
 </body>
</html>

Сохраните файл - index.html . На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на этот файл- index.html и браузер откроет ваш HTML документ с кнопкой:"Кнопка.".

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

Язык гипертекстовой разметки. Списки.

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

Откройте файл - index.html, в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
 <h2>Маркированный список.</h2>
    <ul>
   <li>Я.</li>
   <li>Ты.</li>
   <li>Он.</li>
  </ul>  
  <h2>Упорядоченный список.</h2>
  <ol>
   <li>Я.</li>
   <li>Ты.</li>
   <li>Он.</li>
  </ol> 
 </body>
</html>

Сохраните файл - index.html . На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на этот файл- index.html и браузер откроет ваш HTML документ с текстом: 




Маркированный список.
    *Я.
    *Ты.
    *Он.
Упорядоченный список.
    1.Я.
    2.Ты.
    3.Он.

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

Язык гипертекстовой разметки. Ссылка якорь.

Если текст длинный и необходимо сразу найти слово "Якорь" нужно сделать следующее.

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
<h2>Ссылка якорь.</h2> 
<p><a href="#1">Перейти к Якорю.</a></p>
<p>Якорем называется закладка с уникальным именем на определённом месте веб-страницы, предназначенная для перехода к ней по ссылке. Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи атрибута id. В имени допустимо писать русские, латинские буквы и символы, нельзя только пробел. В качестве значения href для перехода к этому якорю используется значение id с символом решётки (#) впереди.</p> 
<p id="1">Якорь удобно применять в документах большого объёма, чтобы можно было быстро переходить к нужному разделу. Поэтому создайте большой объем текста перед атрибутом id для чистоты эксперимента.</p> 
 </body>
</html>

Сохраните файл "index.html". Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом и ссылкой: "Перейти к Якорю". Нажмите на нее. Браузер перейдет к тексту "Якорь...".

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

Язык гипертекстовой разметки. Всплывающая подсказка для ссылки.

Если необходимо отображать дополнительную информацию об элементе (подсказку), нужно сделать следующее.

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
<h2>Подсказка.</h2>
 <a href = "#" title = "Подсказка.">Это ссылка.</a>
 </body>
</html>

Сохраните файл "index.html". Нажмите на файл "index.html". Браузер откроет ваш HTML документ с заголовком "Подсказка." и ссылкой "Это ссылка.". Если навести мышь на ссылку "Это ссылка.", отобразится всплывающий текст: "Подсказка."

Если вы это увидели на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Ссылка на адрес электронной почты.

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

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
<h2>Ссылка на адрес электронной почты.</h2>
 <a href="mailto:admin@advice.panorama-sovetov.ru">Отправить сообщение на адрес электронной почты: admin@advice.panorama-sovetov.ru</a>
 </body>
</html>

Сохраните файл "index.html". Нажмите на файл "index.html". Браузер откроет ваш HTML документ с заголовком "Ссылка на адрес электронной почты." и ссылкой "Отправить сообщение на адрес электронной почты: admin@advice.panorama-sovetov.ru".

Если вы это увидели на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Программный код.

Элемент "код" указывает браузеру на фрагмент компьютерного кода. Это может быть имя элемента, имя файла, компьютерная программа, включая пунктуацию. Сценарии подсветки синтаксиса могут использовать атрибут класса (язык): «language-».

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
<h2>Программный код.</h2> 
<code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code>
 </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом: "Программный код." Выделив "var i: Integer; begin i := 1; end." моношириным шрифтом (это позволит поисковым роботам или приложениям понять, что тут используется программный код и язык "pascal").

Если вы всё это увидели на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Предварительно отформатированный текст.

Элемент "preformatted" позволяет внутри этого блочного элемента сохранить все пробелы и переносы строк (отформатированного фрагмента программного кода, вывод транскрипции, рисунки и т.д.).

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
<h2>Предварительно отформатированный текст.</h2>
<pre> 
<code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code>
</pre>
 </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом: "Предварительно отформатированный текст." Выделив и отформатировав "var i: Integer; begin i := 1; end." моношириным шрифтом (это позволит поисковым роботам или приложениям понять, что тут используется отформатированный программный код и язык "pascal").

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Блок.

Элемент <div> (от англ. "division" ‒ «раздел, блок») является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Содержимое <div> всегда начинается с новой строки, после него также добавляется перенос строки.

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
<div style="background: yellow">
<h2>Блок.</h2>
   <p>Это блок (желтый) параграфа.</p>
</div>
   </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с заголовком "Блок" и текстом: "Это блок (желтый) параграфа." на фоне желтого блока.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Таблица.

Элемент <tabl> (от англ. "table" ‒ «таблица»).

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
<h2>Таблица.</h2>
   <tabl>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Данные 1</td><td>Данные 2</td></tr>  
<tr><td>Данные 1</td><td>Данные 2</td></tr>  
   </tabl>
   </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с заголовком "Таблица." и текстом: 



 
Заголовок 1	Заголовок 2
Данные 1	Данные 2
Данные 1	Данные 2.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Таблица. Границы.

Элемент <table> (от англ. "table-таблица, border-граница, solid-сплошной, пространственный").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
<style>
	table, th,td {
		border: 1px solid black;
	}
	</style>
 <body>
<h2>Таблица.</h2>
   <table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Данные 1</td><td>Данные 2</td></tr>  
<tr><td>Данные 1</td><td>Данные 2</td></tr>  
   </table>
   </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с заголовком "Таблица." и текстом: 




Заголовок 1	Заголовок 2
Данные 1	Данные 2
Данные 1	Данные 2

в рамках границ 1 пиксель черного цвета.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Промежуток.

Элемент <span> (от англ. "span-промежуток, диапозон").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 <body>
   <p>Это<span style="padding: 0 10px; background: yellow;">выделенный промежуток</span> в параграфе.</p>
   </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом: Это -выделенный промежуток- в параграфе (желтого цвета).

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Идентификатор.

Атрибут "id" (от англ. "id 1. сокр. от identifier - идентификатор; 2. сокр. от identification - идентификация; диез, символ «#» hash, sharp рикошет ( возврат );").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
    <style>
	#i {
	background-color:yellow;		
	}
	</style>
	 <body>
<h4>Идентификатор.</h4>		 
<p id="i">Выделит только параграф с идентификатором "i" желтым фоном, т.к. стиль прописан для него одного.</p>
<p>Другой параграф не выделит.</p>
     </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом: Идентификатор. Выделит только параграф с идентификатором "i" желтым фоном, т.к. стиль прописан для него одного. Другой параграф не выделит.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Класс.

Атрибут "class" (от англ. "class-класс, тип (объекта);").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
	<style>
	h4.yellow {background-color:yellow;}
	.test  {color:red;}
	</style>
	 <body>
<h4>Атрибут "class".</h4>
<h4>Заголовок h4 без атрибута class никак не выделит.</h4>	 
<h4 class="yellow">Выделит все заголовки h4 со значением "yellow" атрибута "class" желтым фоном.</p>
<h4 class="test">Выделит все заголовки h4 со значением "test" атрибута "class" красным.</p>
     </body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом: Атрибут "class". Заголовок h4 без атрибута class никак не выделит. Выделит все заголовки h4 со значением "yellow" атрибута "class" желтым фоном. Выделит все заголовки h4 со значением "test" атрибута "class" красным.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Класс "мигающий".

Атрибут "class" (от англ. "class-класс, тип (объекта); blink-мерцание, мигание (курсора, экрана);").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




	


<!DOCTYPE html>
<html>
	<style>
	.blink { animation: blink 2s infinite;}
	@keyframes blink {
	from { opacity: 1;}
	to  { opacity: 0;}
	}
	</style>
<body>
<h4>Значение атрибута класс "мигающий".</h4>
</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с мигающим текстом заголовка 4 уровня: Значение атрибута класс "мигающий".

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Специальные символы.




Основные специальные символы HTML:
  	\00A0 	Неразрывный пробел;
­­ 	\00AD 	Место возможного переноса;
< 	\003C 	Знак "меньше чем" (начало тега);
> 	\003E 	Знак "больше чем" (конец тега);
& 	\0026 	Амперсанд;
· 	\00B7 	Знак умножения;
– 	\2013 	Среднее тире;
} 	\007D 	Правая фигурная скобка;
{ 	\007B 	Левая фигурная скобка;
( 		Круглая скобка влево;
) 		Круглая скобка вправо;
= 	\003D 	Знак равенства;
≠ 	\2260 	Знак неравенства;
÷ 	\00F7 	Знак деления;
∞ 	\221E 	Знак бесконечности;
@ 	\0040 	Символ собака;
[ 	\005B 	Левая квадратная скобка;
] 	\005D 	Правая квадратная скобка;

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
<body>
<h4>Замените скобки (< и >) начало и конец тега в html документе на сущности &lt; и &gt; и браузер отобразит скобки (< и >) начало и конец тега "как есть" в коде документа.</h4>
</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом заголовка 4 уровня: Замените скобки (< и >) начало и конец тега в html документе на сущности &lt; и &gt; и браузер отобразит скобки (< и >) начало и конец тега "как есть" в коде документа.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Шапка.

Тег <header> (от англ. "header-заголовок; height-высота; align-выравнивать строки;").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




	


<!DOCTYPE html>
<html>
	<style>
	.header {background-color: yellow; height: 100px; text-align: center;}
	</style>
<body>
<header class="header">	
<h1>Название сайта.</h1>
<p>Выделяет верхнюю часть сайта:"Шапку".</p>
</header>
</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом заголовка 1 уровня по центру: "Название сайта". С текстом: "Выделяет верхнюю часть сайта:"Шапку" желтым цветом.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Подвал.

Тег <footer> (от англ. "footer-нижний колонтитул; height-высота; align-выравнивать строки;").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




	


<!DOCTYPE html>
<html>
	<style>
	.header {background-color: yellow; height: 100px; text-align: center;}
	.footer {background-color: green; height: 100px; text-align: center;}
	</style>
<body>
<header class="header">	
<h1>Название сайта.</h1>
<p>Выделяет верхнюю часть сайта:"Шапку".</p>
</header>
<footer class="footer">	
<h1>Подвал сайта.</h1>
<p>Выделяет нижнюю часть сайта:"Подвал".</p>
</footer>
</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с текстом заголовка 1 уровня по центру: "Подвал сайта.". С текстом: "Выделяет нижнюю часть сайта:"Подвал" зеленым цветом.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Навигация.

Значение "topnav" (от англ. "top 1. верх, вершина; navigation-навигация, передвижение;").

Создайте папку "Рабочий стол". В папке "Рабочий стол" создайте файл "index.html" (браузер открывает его первым).

Откройте файл "index.html", в нем создайте шаблон html формата: 




	


<!DOCTYPE html>
<html>
<body>
<div class="topnav">
	<a href="../index.html">На главную.</a>
	<a href="../topics.html">Темы.</a>
	<a href="../privacy.html">Информация.</a>
</div>
</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на файл "index.html" и браузер откроет ваш HTML документ с вехним блоком навигации в виде подчеркнутых ссылок синего цвета расположенных на одной верхней строке: "На главную". "Темы". "Информация". Если вы кликните на них, браузер отобразит: "File not found", поскольку в коде указан произвольный адрес ссылок.

Если вы увидели это на экране монитора, вы все сделали правильно.

Язык гипертекстовой разметки. Видео.

Элемент <video> (от англ. "video 1. видео-; 2. изображение").

Создайте папку - Рабочий стол. В папке - Рабочий стол - создайте папку с именем - html.

В ней создайте папку с именем - video.

В браузере напишите: "видео с расширением .mp4 320X240 px" и загрузите из интернета один из выданных вариантов с расширением .mp4.

Из папки загрузки скопируйте в папку с именем - video загруженное видео с расширением .mp4 и переименуйте его как файл с именем "panorama-sovetov.mp4" кликнув на нем правой кнопкой мыши (переиминовать).

Нажмите на файл с именем "panorama-sovetov.mp4" правой кнопкой мыши. Откроется окно уведомлений. В нем выберете пункт - Свойства - Основные - Адрес (Путь). Выделите зажав левой кнопкой мыши весь путь к файлу с именем "panorama-sovetov.mp4". Правой кнопкой мыши нажмите - Копировать. Скопированный путь типа - "/home/user/Рабочий стол/html/video/panorama-sovetov.mp.4" позже вставите в шаблон файла - index.html для указания браузеру, где искать видео. Закройте окно уведомлений.

Запустите текстовый редактор (среду разработки). На панели инструментов в меню - Файл нажать - Open (Открыть).

Откройте файл - index.html, в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
	<body>
		<video width="320" height="240" controls>
  <source src="/home/user/Рабочий стол/html/video/panorama-sovetov.mp4" alt="video." type="video/mp4">
  Ваш браузер не поддерживает тег video.
</video>
	</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на этот файл-index.html и браузер откроет ваш HTML документ с панелью управления видеопроигрывателя: "panorama-sovetov.mp4" с расширением ".mp4 320X240 px" и предупреждением "Ваш браузмер не поддерживает тег video." для отображения видеоформата вашим браузером. После отладки MIME типа или размещения файла-index.html в интернете на сервере арендованного хостинга с указанием пути к файлу-index.html видео корректно будет воспроизведено.

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

Язык гипертекстовой разметки. Аудио.

Элемент <audio> (от англ. "audio 1. аудио; 2. звук; 3. звуковой; мультимедийный; речевой").

Создайте папку - Рабочий стол. В папке - Рабочий стол - создайте папку с именем - html.

В ней создайте папку с именем - audio.

В браузере напишите: "audio с расширением .mp3" и загрузите из интернета один из выданных вариантов с расширением .mp3.

Из папки загрузки скопируйте в папку с именем - audio загруженное аудио с расширением .mp3 и переименуйте его как файл с именем "panorama-sovetov.mp3" кликнув на нем правой кнопкой мыши (переиминовать).

Нажмите на файл с именем "panorama-sovetov.mp3" правой кнопкой мыши. Откроется окно уведомлений. В нем выберете пункт - Свойства - Основные - Адрес (Путь). Выделите зажав левой кнопкой мыши весь путь к файлу с именем "panorama-sovetov.mp3". Правой кнопкой мыши нажмите - Копировать. Скопированный путь типа - "/home/user/Рабочий стол/html/audio/panorama-sovetov.mp3" позже вставите в шаблон файла - index.html для указания браузеру, где искать аудио. Закройте окно уведомлений.

Запустите текстовый редактор (среду разработки). На панели инструментов в меню - Файл нажать - Open (Открыть).

Откройте файл - index.html, в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html>
 	<body>
		<audio controls>
    <source src="/home/user/Рабочий стол/html/audio/panorama-sovetov.mp.3" type="audio/mpeg">
  Ваш браузмер не поддерживает тег audio.
</audio>
	</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на этот файл-index.html и браузер откроет ваш HTML документ с панелью управления аудиопроигрывателя: "panorama-sovetov.mp3" с расширением ".mp3" и предупреждением "Ваш браузмер не поддерживает тег audio." для воспроизведения аудиоформата вашим браузером. После отладки MIME типа или размещения файла-index.html в интернете на сервере арендованного хостинга с указанием пути к файлу-index.html аудио корректно будет воспроизведено.

Атрибуты: autoplay- Звук начинает играть сразу после загрузки страницы. controls- Добавляет панель управления к аудиофайлу. loop- Повторяет воспроизведение звука с начала после его завершения. muted- Отключает звук при воспроизведении музыки. preload- Указывает как аудио должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay. src- Указывает путь к воспроизводимому файлу.

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

Язык гипертекстовой разметки. Тело сайта.

Создайте папку - Рабочий стол. В папке - Рабочий стол - создайте файл index.html

Запустите текстовый редактор (среду разработки). На панели инструментов в меню - Файл нажать - Open (Открыть).

Откройте файл - index.html, в нем создайте шаблон html формата: 




<!DOCTYPE html>
<html lang="ru">
    <head>
<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 10px;
    background: #f1f1f1;
}

/* Создайте две неравные колонки, которые плавают рядом друг с другом */
/* Левая колонка */
.leftcolumn {   
    float: left;
    width: 75%;
}

/* Правая колонка */
.rightcolumn {
    float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
}

/* Добавление эффекта карточки для статей */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

</style>	
    </head>
<body>
</div>
<div class="row">
	<div class="leftcolumn">
		<div class="card">
<h2>Тело сайта.</h2>
<h3 itemprop="name">Основное содержание.</h3>
<p>	
	<audio controls>
	    <source src="audio/i.mp.3" type="audio/mpeg">
  Ваш браузмер не поддерживает тег audio.
	</audio>
 </p>
</div>		
</div>
	<div class="rightcolumn">
		<div class="card">
<h2>Бар.</h2>
<h3 itemprop="name">Допсодержание.</h3>
</div>	
</div>
</div>	
</body>
</html>

На панели инструментов текстового редактора (среды разработки) в меню - Файл нажать - Save (Сохранить). Нажмите на этот файл-index.html и браузер откроет ваш HTML документ с двумя колонками: (слева 75% ширины) - "Тело сайта. Основное содержание." и (справа 25% ширины) - "Бар. Допсодержание.".

Если вы это увидели на экране монитора, вы все сделали правильно.

Метод "Скрытый текст".

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его: 



	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Скрытый текст".</h1>  
<p hidden>Добавление атрибута hidden без значения в открывающий тег параграфа позволяет скрыть текст.</p> 
</body> 
</html>

Кликните на файл - index.html. Браузер выведет страницу с заголовком: Метод "Скрытый текст", без отображения текста параграфа.

Если вы увидели это на экране монитора, вы все сделали правильно.

Метод "Изменить размер текста наведением и отводом мыши".

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его: 



	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Изменить размер текста наведением и отводом мыши".</h1>  
<p onmouseover="style.fontSize='26px'" onmouseout="style.fontSize='16px'" >
Увеличение размера текста параграфа наведением мыши и уменьшение размера текста параграфа отводом мыши.
</p> 
</body> 
</html>

Кликните на файл - index.html. Браузер выведет результат работы скрипта - страницу с заголовком: Метод "Изменить размер текста наведением и отводом мыши". При наведении курсора на текст, текст увеличится, при отведении курсора от текста, он уменьшится.

Если вы увидели это на экране монитора, вы все сделали правильно.

Метод "Изменить цвет текста наведением и отводом мыши".

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его: 



	
<!DOCTYPE html> 
<html> 
<body>
<h1>Метод "Изменить цвет текста наведением и отводом мыши".</h1>  
<p onmouseover="style.color='red'" onmouseout="style.color='black'" >
Изменить цвет текста на красный наведением мыши и изменить цвет текста на чёрный отводом мыши.
</p> 
</body> 
</html>

Кликните на файл - index.html. Браузер выведет результат работы скрипта - страницу с заголовком: Метод "Изменить цвет текста наведением и отводом мыши". При наведении курсора на текст, текст станет красным, при отведении курсора от текста, он станет чёрным.

Если вы увидели это на экране монитора, вы все сделали правильно.

Метод "Вывести неотображаемый текст с изменением части стиля".

В папке - Мои документы создайте файл - index.html. В файле - index.html создайте шаблон html формата и сохраните его: 



	
<!DOCTYPE html> 
<html> 
<head> 
<style>
body {  margin: 10; font-family: Arial;  font-size: 30px; }  
span[title] { color: green; font-size: 50px; } /*селектор идентификаторов*/
</style>
</head>
<body>
<p id="Часть" style="display:none">
<span title="">Часть</span> скрытого текста параграфа будет отображена зеленым цветом и размером 50рх при нажатии на кнопку.</p>
<button type="button" onclick="document.getElementById('Часть').style.display='block'">Отобразить</button>
</body>
</html>

Кликните на файл - index.html.
Браузер выведет результат работы скрипта - страницу с кнопкой "Отобразить". При нажатии на кнопку выведется текст: "Часть скрытого текста параграфа будет отображена зеленым цветом и размером 50рх при нажатии на кнопку".

Если вы увидели это на экране монитора, вы все сделали правильно.

Есть совет? Остались вопросы? Нужна помощь? Свяжитесь с администратором сайта.

E-mail: admin@site-ps.ru