HTML - С нуля до 14 языков программирования (C++, PHP, Java, Javascript, Ruby, Kotlin, C, C#, Go, R, Swift, Python, Sql, TypeScript.). https://dzmitrybal.ru/ ru Как создать комментарий в HTML? https://dzmitrybal.ru/html/15-kak-sozdat-kommentarij-v-html.html https://dzmitrybal.ru/html/15-kak-sozdat-kommentarij-v-html.html https://dzmitrybal.ru/html/15-kak-sozdat-kommentarij-v-html.html Fri, 13 Sep 2024 22:02:07 +0300 native-yes

Здравствуйте, уважаемые читатели моего блога. Сегодня статья будет про то как оставлять комментарии в html коде. Иногда может нам необходимо их оставлять, чтобы, например, напомнить себе, что этот код делает или о чём-то напомнить. Для этого есть код. Итак, начнём.
Для начала используем предыдущий код (предыдущая статья). И создаём файл index.html через блокнот.


<!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<video controls=»controls»
source src=»King.mp4″ type=»video/mp4″>
</video>
<!--
Код выше для того чтобы воспроизводилось видео.
-->

</body>
</html>

Как Вы уже заметили там есть отличие. Есть там код
<!-- --> и текст в нём .

Его можно посмотреть только когда редактируешь код или через просмотр исходного кода станицы. Это означает комментарии. Пробуйте добавить что-то своё. Можно выбрать текст из предыдущих статей и добавить код- комментарий.

На этом всё. Пробуйте.

]]> Как добавит видео на сайт в HTML? https://dzmitrybal.ru/html/14-kak-dobavit-video-na-sajt-v-html.html https://dzmitrybal.ru/html/14-kak-dobavit-video-na-sajt-v-html.html https://dzmitrybal.ru/html/14-kak-dobavit-video-na-sajt-v-html.html Fri, 13 Sep 2024 22:00:08 +0300 native-yes

Здравствуйте, уважаемые читатели моего блога. На связи Дмитрий Баль и сегодня поговорим о том, как вставить видео на сайт.
Для начала нам нужен код из первой статьи (читаем первую статью), создаём файл index.html и между <body>

</body> вставляем :
<video controls=»controls»
source src=»King.mp4″ type=»video/mp4″>
</video>
Объяснение:
<video> </video> -это говорит о том, что тег видео.
Source src=””- в кавычках здесь пишем путь к файлу.
type=”video/mp4”- это тип видео.
сontrols=”controls”- это сама панель управления.

В итоге получаем следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<video controls=»controls»
source src=»King.mp4″ type=»video/mp4″>
</video></body>
</html>

На этом всё. Пробуйте.

]]> Как добавит аудио на сайт в HTML? https://dzmitrybal.ru/html/13-kak-dobavit-audio-na-sajt-v-html.html https://dzmitrybal.ru/html/13-kak-dobavit-audio-na-sajt-v-html.html https://dzmitrybal.ru/html/13-kak-dobavit-audio-na-sajt-v-html.html Fri, 13 Sep 2024 21:58:19 +0300 native-yes

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

Для начала создайте файл index.html с кодом (в первой статье этого блога привожу), а затем между тегом <body>
</body> вставьте:

<audio controls>
<source src=»Emmelie_de_Forest_Change.mp3″ type= «audio/mpeg» >
</audio>

<audio> и </audio> -это сами теги, указывающие на название, что аудио.
<source scr=” Здесь указать путь к файлу” -указатель на путь к файлам.
type=” audio/mpeg” – здесь тип файла.

Попробуйте запустить данный файл. После запуска вы увидите время, возможность изменять громкость и скорость воспроизведения.
В итоге мы получим следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<audio controls>
<source src=»Emmelie_de_Forest_Change.mp3″ type= «audio/mpeg» >
</audio>
</body>
</html>
На этом всё. Пробуйте.

]]> Как создать горизонтальную линию в HTML? https://dzmitrybal.ru/html/12-kak-sozdat-gorizontalnuju-liniju-v-html.html https://dzmitrybal.ru/html/12-kak-sozdat-gorizontalnuju-liniju-v-html.html https://dzmitrybal.ru/html/12-kak-sozdat-gorizontalnuju-liniju-v-html.html Fri, 13 Sep 2024 21:56:30 +0300 native-yes

Здравствуйте, уважаемые читатели. На связи Дмитрий Баль и сегодня поговорим о том, как созданий линию.

Бывает так что нам нужно отформатировать текст, чтобы желательно врезалась в память информация или как-то выделить нам нужно текст. Ещё можно использовать для смены сцен в рассказе. Для этого используют горизонтальную линию.
Для этого создайте файл с названием index.html (читайте первую статью) и добавьте между <body> </body> любой текст.

К примеру:
<p>
Отрывок:
<hr>
После общения с папой мальчик придумал себе 10 новых источников дохода.
</p>
Объяснение:
<p>- вы уже знаете, что такое. Это параграф.
<hr>- это тег горизонтальной строки.
В итоге мы получим следующий код:

<!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<p>
Отрывок:
<hr>
После общения с папой мальчик придумал себе 10 новых источников дохода.
</p>
</body>
</html>

На этом у меня всё. Пробуйте.

]]> Как создать ссылку , которая открывается в другом окне? https://dzmitrybal.ru/html/11-kak-sozdat-ssylku-kotoraja-otkryvaetsja-v-drugom-okne.html https://dzmitrybal.ru/html/11-kak-sozdat-ssylku-kotoraja-otkryvaetsja-v-drugom-okne.html https://dzmitrybal.ru/html/11-kak-sozdat-ssylku-kotoraja-otkryvaetsja-v-drugom-okne.html Fri, 13 Sep 2024 21:54:23 +0300 native-yes

Здравствуйте, уважаемые читатели на связи Дмитрий Баль и сегодня поговорим о том, как открыть ссылку в новом окне.

Бывает такое, что читаешь текст и в нем ссылка по которой переходишь, но, когда перешёл страница закрывается и нельзя дальше читать. Чтобы такого не было придумано решение открывать в новой вкладке.

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

<a href=»http://iqteacher.com» target=”_blank” >Если идёшь по дороге и забываешь спустя минуту зачем шёл, то тебе сюда.</a>
Получается что мы узнали то что к ссылке (смотри статью по добавлении ссылки) мы добавили target=”_blank”.

Получается у нас следующий код:

</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<a href=»http://iqteacher.com» target=”_blank” >Если идёшь по дороге и забываешь спустя минуту зачем шёл, то тебе сюда.</a>

</body>
</html>

На этом у меня всё. Пробуйте.

]]> Как поставить пробелы между текстом в HTML? https://dzmitrybal.ru/html/10-kak-postavit-probely-mezhdu-tekstom-v-html.html https://dzmitrybal.ru/html/10-kak-postavit-probely-mezhdu-tekstom-v-html.html https://dzmitrybal.ru/html/10-kak-postavit-probely-mezhdu-tekstom-v-html.html Fri, 13 Sep 2024 21:52:07 +0300 native-yes

Здравствуйте, уважаемые читатели. Сегодня поговорим как перенести код на другую строку.

Парой бывает просто необходимо это, чтобы текст дышал и пространство было для расслабления глаз.

Итак, начнём.
Первое что необходимо, так это зайти в первый пост и создать базовую страницу. Затем напечатать текст, который Вам необходим.
Он должен быть напечатан между<body>

</body>
К примеру, возьмём текст.
<p>14 февраля не только имеет отношения ко дню всех Влюблённых, но и к Конституции. Это <br>важно знать по истории Беларуси. </p>

Как видим тэги <p> </p> — тэги строки.

<br> — начало новой строки.
В каждом удобном случае используйте <br> по назначению.

Итого получаем:

<!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<p>14 февраля не только имеет отношения ко дню всех Влюблённых, но и к Конституции. Это <br><br>важно знать по истории Беларуси. </p>

</body>
</html>

Можете поменять данный текст, и проверить как это всё работает. Можно ещё что-то своё написать. В общем пробуйте. На этом всё пока.

]]> Как создат нумированный и ненумерованные списки в HTML? https://dzmitrybal.ru/html/9-kak-sozdat-numirovannyj-i-nenumerovannye-spiski-v-html.html https://dzmitrybal.ru/html/9-kak-sozdat-numirovannyj-i-nenumerovannye-spiski-v-html.html https://dzmitrybal.ru/html/9-kak-sozdat-numirovannyj-i-nenumerovannye-spiski-v-html.html Fri, 13 Sep 2024 21:49:56 +0300 native-yes

Здравствуйте, уважаемые читатели сегодня поговорим о списках, которые нам иногда необходимы. Они бывают трёх видов: нумерованные (<ol> или order list), маркированный (<ul> или unordered list) и список определений (<dl> или description list).

Возьмём пример. Возьмите код, который находится в первом самом посте и скопируйте. Между <body> </body>
1. <ul>
Напишите следующее (маркированный список или <ul>) :
<ul>
<li> Первая книга Стивена Кинга Кэрри. </li>
<li>Вторая книга Стивена Кинга Жребий Салема. </li>
<li>Третья книга Стивена Кинга Сияние. </li>
<ul>

Элемент <li> -означает listem item или элемент списка.
2. <ol>
Напишите следующее после того когда, что вы писали:
<ol>
<li>Первая книга Роберта Стайна “Как стать смешным”. </li>
<li>Вторая книга Роберта Стайна “Свидание вслепую. </li>
<li>Третья книга Роберта Стайна “Испорченная”. </li>
</ol>

Здесь уже понятно всё скорее. <li> — это список, а <ol> </ol>- order list.
3. <dt>
Напишите сейчас следующий код:
<dl>
<dd>Первая книга Джоан Роулинг «Гарри Поттер и философский камень”. </dd>
<dd>Вторая книга Джоан Роулинг «Гарри Поттер и Тайная комната”. </dd>
<dd>Третья книга Джоан Роулинг «Гарри Поттер и узник Азкабана».</dd>

<dt> </dt> -означает description list или список определений.
Описание делается с помощью тега <dd> </dd>.

У Вас получится следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница. </title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<ul>
<li> Первая книга Стивена Кинга Кэрри. </li>
<li>Вторая книга Стивена Кинга Жребий Салема.</li>
<li>Третья книга Стивена Кинга Сияние. </li>
<ul>

<ol>
<li>Первая книга Роберта Стайна “Как стать смешным” </li>
<li>Вторая книга Роберта Стайна “Свидание вслепую</li>
<li>Третья книга Роберта Стайна “Испорченная” </li>
</ol>

<dl>
<dd>Первая книга Джоан Роулинг «Гарри Поттер и философский камень”. </dd>
<dd>Вторая книга Джоан Роулинг «Гарри Поттер и Тайная комната».</dd>
<dd>Третья книга Джоан Роулинг «Гарри Поттер и узник Азкабана».</dd>
</dl>
</body>
</html>
На этом всё. Пробуйте. Пока.

]]> Как создать картинку на сайт на HTML? https://dzmitrybal.ru/html/8-kak-sozdat-kartinku-na-sajt-na-html.html https://dzmitrybal.ru/html/8-kak-sozdat-kartinku-na-sajt-na-html.html https://dzmitrybal.ru/html/8-kak-sozdat-kartinku-na-sajt-na-html.html Fri, 13 Sep 2024 21:47:24 +0300 native-yes

Здравствуйте, уважаемые читатели сегодня поговорим о том, как создать картинку на сайте.

Берём код из первой статьи(смотри первую статью на блоге) и добавляем ссылку на готовую картинку.
Например:

<img src=»foto.jpg»/>
Вместо foto.jpg подставьте точное название вашей картинки. Важно, чтобы оно было с нормальным путём к файлу. Например, в папке с проектом /img/foto.jpg.

Чтобы уменьшите размер картинки лучше используйте графическую программу.

Чтобы подписать картинку, которая не выводиться введите:
<img src=»foto4.jpg» alt=»Книги Стивена Кинга»/>

В строчки “Книги…” нужно подписать.
Чтобы при наведении мышкой появлялось сообщение используйте title. Как здесь.

<img src=»foto4.jpg» alt=»Книги Стивена Кинга» title=” Подарок на ДР” />
В итоге получим код:

<!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>
<img src=»foto.jpg» alt=»Книги Стивена Кинга» title=»Подарок на ДР» />
</body>
</html>

На этом всё. Пока.

]]> Как создать ссылку на HTML? https://dzmitrybal.ru/html/7-kak-sozdat-ssylku-na-html.html https://dzmitrybal.ru/html/7-kak-sozdat-ssylku-na-html.html https://dzmitrybal.ru/html/7-kak-sozdat-ssylku-na-html.html Fri, 13 Sep 2024 21:45:12 +0300 native-yes

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

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

Чтобы создать ссылку нужно написать в блокноте следующий код.

<a href=https://www.softportal.com/> Тут можно скачать любую программу для компьютера или телефона, планшета </>

Но для начала создайте код, который написан в первой статье(прочитайте) :

!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>

</body>
</html>

Поместите его между <body> </body>

Получится так:

!DOCTYPE html>
<html>
<head>
<title>Моя первая Web страница.</title>
<meta http-equiv=”Content-Type” content=”html/text; charset=utf-8”
<meta name=”Description” content=”Тут описание страницы”/>
<meta name= “keywords” content=”Тут ключевые слова”/>
</head>
<body>

<a href=https://www.softportal.com/> Тут можно скачать любую программу для компьютера или телефона, планшета </>

</body>
</html>

Объяснения:

Href- с английского hypertext reference (гиперссылка).
Знак равно означает какой адрес присвоить ссылки.
https://www.softportal.com – сама ссылка, на которую перейдёте.

Теги < /> </> — означает открытие и закрытие. В первом случае мы закрывает адрес сайта, а затем закрываем текст ссылки.

На этом у меня всё.
Пробуйте.

Пока.

]]> Как изменить вид текста в HTML? https://dzmitrybal.ru/html/6-kak-izmenit-vid-teksta-v-html.html https://dzmitrybal.ru/html/6-kak-izmenit-vid-teksta-v-html.html https://dzmitrybal.ru/html/6-kak-izmenit-vid-teksta-v-html.html Fri, 13 Sep 2024 20:39:16 +0300 native-yes

Здравствуйте, уважаемые читатели. В этой статье расскажу, как выделить текст курсивом, подчеркнуть текст и выделить его, выделить и сделать курсивом. Это нужно для привлечения внимания, и делания акцентов.
Для начала создайте файл с названием index.html.

Отредактируйте его с помощью блокнота. Поместите туда следующий код (что это означает написано в 1 статье):

<!DOCTYPE html>
<html>
<head>
<title>Изменение вида текста</title>
<meta http-equiv=” Content-type” content=”html/text; charset=utf-8”/>
<meta name=” description” content=” Выводим текст разного вида/>
<meta name=” keywords” content=” текст, изменение текста”/>
</head>
<body>

</body>
</html>

Между <body> </body>
Напишите вот это:
<p>
<b>Жирный текст.</b>
</p>
<p>
<i>Курсивный текст. </i>
</p>
<p>
<u>Подчёркнутый текст.</u>
</p>
<p>
<b><u><i>Жирный, подчёркнутый и курсивный текст.</i></u></b>
</p>

Получиться вот такой текст:

<!DOCTYPE html>
<html>
<head>
<title>Изменение вида текста</title>
<meta http-equiv=” Content-type” content=”html/text; charset=utf-8”/>
<meta name=” description” content=” Выводим текст разного вида/>
<meta name=” keywords” content=” текст, изменение текста”/>
</head>
<body>
<p>
<b>Жирный текст.</b>
</p>
<p>
<i>Курсивный текст. </i>
</p>
<p>
<u>Подчёркнутый текст.</u>
</p>
<p>
<b><u><i>Жирный, подчёркнутый и курсивный текст.</i></u></b>
</p
</body>
</html>

Объяснение: 1. Символы <p> </p> -означают начало новой строки.
2. Символы <b> </b> — означают жирный текст.
3. Символы <i> </i> означают курсив.
4. Символы <u> </u> -означают нижнее подчёркивание текста.
5. Символы <b><u><i> </i></u></b> — означают всё что выше вместе. Можно различные комбинации использовать, какие вам нужны для акцентов.

На этом всё. Пробуйте.

]]>