Изучение любой темы начинается с основ, так что давайте приступим к изучению азов! Что же все-таки такое HTML и с чем его едят? ☀ ...




Изучение любой темы начинается с основ, так что давайте приступим к изучению азов! Что же все-таки такое HTML и с чем его едят?


HTML (HyperText Markup Language—«язык гипертекстовой разметки»)это язык для создания разметки веб-страниц во Всемирной паутине. Конечно же веб-страница состоит не только из разметки, но именно с неё начинается веб-разработка. HTML является основополагающей веб-технологией, предназначенной для создания веб-страниц. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Строение веб-страницы


Весь HTML-документ состоит из элементов*1 и текста. HTML-элемент как правило состоит из открывающего и закрывающего тегов*2 и контента размещённого между этими тегами. Тег в свою очередь состоит из специальных символов: <, > и /. Каждый элемент обозначается в исходном документе открывающим и закрывающим тегом (бывают редкие исключения). Документы, созданные при помощи HTML, можно создать при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. А Выбор редактора уже полностью зависит лишь от понятия удобства и личных пристрастий.

Я постаралась понятливо изобразить структуру HTML-элемента:
VM
VM


_________
*1HTML-элемент - это базовая конструкция веб-страницы, которая определяет её структуру.
*2Тег— элемент языка разметки гипертекста. Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге.

HTML-документ состоит из текста и дерева HTML-элементов: VM (именно так, на мой взгляд, наглядно и просто в...



HTML-документ состоит из текста и дерева HTML-элементов:

VM
VM

(именно так, на мой взгляд, наглядно и просто выглядит "дерево" HTML-элементов)

Теперь давайте подробно рассмотрим каждый тег и узнаем его значение!


<html> тег

Данный тег является корневым элементом документа, можно сказать, предком для всех остальных тегов. Все остальные элементы содержатся именно внутри тегов <html>...</html>. А все, что находится за пределами тегов, не воспринимается и не обрабатывается браузером как код HTML. Так что получается, что весь HTML-документ начинается с тега <html>  и заканчивается тегом </html> .

<head> тег

Раздел <head>...</head>  содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, различную кодировку. Информация, которая вводится в нем, не отображается в окне браузера, но именно она содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

<title> тег

Тег <title> должен обязательно присутствовать в каждом HTML-документе, так как его содержимое определяет заголовок документа, который обычно отображается вверху окна браузера или в названии вкладки. Другие теги внутри <title>... </title> не обрабатываются браузером и воспринимаются как обычный текст. Кроме того, нужно иметь в виду, что в документе должен быть только один элемент <title>.

<link> тег

Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами, но не создает ссылку.

<script> тег

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

<body> тег

HTML тег <body> определяет содержимое HTML-документа, которое отображается в окне браузера. Он должен быть единственным в документе и всегда должен располагаться внутри  <html>...</html>, сразу после элемента <head>.

Вы должны быть ознакомлены также с форматированием текста. В зависимости от того, какие HTML теги были использованы его форматиро...


Вы должны быть ознакомлены также с форматированием текста. В зависимости от того, какие HTML теги были использованы его форматирования текста, вид на экране меняется. В этом сообщении рассмотрены основные теги, которые предназначены для работы с текстом. Итак, основные теги:

Тег <pre>

Во вложенном в тег <pre>...</pre>  тексте сохраняются все пробелы и разрывы строк.

Тег <i>

Тег <i> задает курсивное начертание шрифта.

Пример того, как в HTML-документе  можно изобразить знаменитые стихотворения В.Маяковского - лесенкой, и также подписать к его концу автора:
________________________________________________________________________________
Раньше
      уважали
             исключительно гениев.
Уму
   от массы
           какой барыш?
Скажем,
      такой
           Иван Тургенев
приезжает
         в этакий Париж.
(Маяковский В.)
_________________________________________________________________________________


Тег <b>

HTML тег <b> задает полужирное начертание шрифта.
_________________________________________________________________________________
WEB-программирование - это круто!
_________________________________________________________________________________


Тег <u>

Содержимое элемента <u>  браузеры отображают как подчёркнутый текст.
_________________________________________________________________________________
Я искренне приветствую Тебя, мой дорогой друг!
_________________________________________________________________________________


Тег <s>

Для зачеркивания текста в HTML-коде широко применяется тег <s>, который является сокращенным написанием тега <strike>.
_________________________________________________________________________________
Меня зовут Вика Вита!
_________________________________________________________________________________


Теги <sub> и <sup>

Тег <sub> используется для определения текста с нижним индексом, а <sup> в верхнем индексе.
_________________________________________________________________________________
Вспомним химию😌
2H2 + O2 → 2H2O - реакция взаимодействия водорода и кислорода.
А теперь вспомним математику😱
(a + b)2 = a2 + 2ab + b2
_________________________________________________________________________________


Теги <p>, <br> и <hr>

-Тег <p> определяет абзац в тексте, отделяя его пустой строкой.

-Тег <br> устанавливает перевод строки на новую строку.

-Тег <hr> определяет не только визуальный, но и тематический разрыв контента.


Теги <h1>...<h6>

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

Для создания таблиц в HTML используется элемент <table> , именно в него в дальнейшее вписывается все содержимое таблицы. Строки...



Для создания таблиц в HTML используется элемент <table>, именно в него в дальнейшее вписывается все содержимое таблицы. Строки в таблице задаются парным тегом <tr>. В данный тег записываются ячейки таблицы, которые добавляются при помощи тега <td>.  Заголовок строки или столбца таблицы задается при помощи тега <th>. Также можно добавить подпись к таблице, которая вносится внутрь тега <caption>...</caption>.

VM
VM

Пример №1

Список покупок
Котегория Вещь Стоимость
Кухня Вилка 1,€
Коридор Зеркало 35,€
Спальня Подушка, 2х 50,€


Пример №2

12 класс
Ⅰ семестр Ⅱ семестр Конец уч. года
Математика 8 6 7
История 9 9 9
Английский язык 7 8 8


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



Ненумерованные списки

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


<b>Список литературы на лето</b>
<ul>
    <li>А. Куприн "Гранатовый браслет"</li>
    <li>М. Булгаков "Собачье сердце"</li>
    <li>И. Гончаров "Обломов"</li>
    <li>Л. Толстой "Война и мир"</li>
    <li>Н. Гоголь "Мертвые души"</li>
    <li>А. Грибоедов "Горе от ума"</li>
</ul>

Нумерованные списки

Нумерованный список - список, в котором каждый элемент имеет свой порядковый номер. Для того, чтобы сделать ненумерованный список в HTML, необходимо использовать тег
 <ol>...</ol>. Затем каждый элемент списка поместить в теге <li> ...</li>.

<b>Список литературы на лето</b>
<ol>
    <li>А. Куприн "Гранатовый браслет"</li>
    <li>М. Булгаков "Собачье сердце"</li>
</ol>
<ol type="A">
    <li>И. Гончаров "Обломов"</li>
    <li>Л. Толстой "Война и мир"</li>
</ol>
<ol type="I">
    <li>Н. Гоголь "Мертвые души"</li>
    <li>А. Грибоедов "Горе от ума"</li>
</ol>

Вложенные списки

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

<b>Домашние задания:</b>
<ul>
<li>Понедельник</li>
<ul>
<li>Математика - 5 задание 45 стр.</li>
<li>Английский язык - 56 задание 78 стр.</li>
</ul>
</ul>
<ul>
<li>Вторник</li>
<ol>
<li>Рисование - медведь</li>
<li>Философия - Сократ</li>
</ol>
</ul>

Списки определений

В HTML-документе существуют списки определений, где в теге <dl>...</dl> каждый элемент состоит из термина - <dt>  и его определения - <dd>.

<dl>
  <dt>Философия</dt>
  <dd>одна из древнейших областей знания, духовной культуры.</dd>
  <dt>Биология</dt>
  <dd>наука о живых существах и их взаимодействии со средой обитания.</dd>
  <dt>История</dt>
  <dd>наука, наука точная, ее основная задача является установление истины.</dd>
</dl>

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


Ссылки

Для того, чтобы сказать браузеру, что нужная нам часть текста является ссылкой, необходимо поместить его в тег <a>...</a>․ Адрес документа, на который следует перейти, указывается при помощи атрибута href.
Вводим:
 <a href="https://www.canva.com/">Canva</a>
И получаем:
Canva

Изображения

Для вставки изображения в веб-страницу используется одинарный тег <img>Атрибут src является обязательным, так как он указывает путь к изображению ( имя файла, URL). Атрибут alt также является обязательным. Браузер также показывает данный текст при наведении мыши на изображение.  Тег <figcaption> позволяет добавить подпись к изображению. 
Вводим:
<figure>
<img src="http://static2.keep4u.ru/2019/12/08/Fotoram.io-2d5841ae67037f8e8.jpg" alt="VM">
<figcaption>Хорошего дня, дорогие мои читатели!
</figcaption>
</figure>
И на экране получаем:
VM
Хорошего дня, дорогие мои читатели!


Видеофайлы

Элемент <video>...</video> используется в HTML-разметке для размещения видеофайла на странице и имеет следующий вид:
Вводим:
<video src="https://youtu.be/8mK5aY5YOCc" controls></video>
И получаем:

Аудиофайлы

HTML-элемент <audio>...</audio> используется для внедрения звукового контента в веб-страницы.
<audio src="URL" controls></audio>


__________________________________________

Но для того, чтобы Ваш блог имел более современный вид и был приближен к большему удобству и комфорту для читателей, я бы советовала использовать аудио-проигрыватель SOUNDCLOUD.COM , так как большинство ценителей музыки знают об этом сайте и отдают предпочтение именно ему, ведь и вправду удобнее понравившийся трэк в пару кликов добавить себе в избранное и продолжать наслаждаться ею! ♪♫♪ 

Добавить такой файл к себе а блог не составляет труда: для начала нужно выбрать трэк, которым Вы хотите поделиться, нажать на "Share" и выбрать отдел "Embed"  и, скопировав код, предоставленный ниже, добавить его себе в сообщения или страницы. 

Наслаждения и вдохновения Вам, пусть музыка послужит Вам удачей!!!😘

СSS — расшифровывается как "Каскадные таблицы стилей" (англ. Cascading Style Sheets) и используется для управления простым...




СSS — расшифровывается как "Каскадные таблицы стилей" (англ. Cascading Style Sheets) и используется для управления простым и лёгким способом стилем веб-документа. С помощью CSS можно переопределить установленный для элементов стиль по умолчанию на свой собственный, создав тем самым уникальный стиль оформления для элементов веб-страницы, например изменить цвет текста заголовка и размер шрифта, выделить изображение красной рамкой и т.д.

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

Преимущества CSS:


-Страницы загружаются быстрее.
-Простота обслуживания.
-Независимость от платформы.
-Оффлайн-просмотр.
-Улучшенные стили для HTML.
-CSS экономит время. 

JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. ...




JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.

JavaScript - язык сценариев, или скриптов. Скрипт представляет собой программный код — набор инструкций, который не требует предварительной обработки перед запуском.

Код JavaScript интерпретируется движком браузера во время загрузки веб-страницы. Интерпретатор браузера выполняет построчный анализ, обработку и выполнение исходной программы или запроса. Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.