Что такое теги html.
Теги это контейнеры для размещения вашего контента, каждый тег для браузера, помогает понимать что размещено внутри тега.
Например тег img несёт в себе картинку, а тег a ссылку.
Также теги помогают размещать классы нужные для стилизации элемента в css.
Теги это контейнеры для размещения вашего контента, каждый тег для браузера, помогает понимать что размещено внутри тега.
Например тег img несёт в себе картинку, а тег a ссылку.
Также теги помогают размещать классы нужные для стилизации элемента в css.
👍1
Тег head это не header, будьте внимательны!
HTML-элемент <head> содержит машиночитаемую информацию (metadata) о документе, например заголовки, скрипты и стили.
В теге head, размещают тег title.
HTML-элемент <head> содержит машиночитаемую информацию (metadata) о документе, например заголовки, скрипты и стили.
В теге head, размещают тег title.
Хочу рассказать вам про гитхаб, это такая удобная штука ребята)
Тут и хостинг, и контакт с программой vscode.
Короче когда вы пишите свой код в редакторе вы можете поделится им с помощью гитхаба, просто нажав пару кнопок ваш репозиторий с кодом станет доступен в интернете, и если у вас что то не получается вам могут помочь.
Самое главное научится коммитить и пушить.
Т9 не успокаивается и слово пушить переводит в рушить)
Вот тут ссылка на гитхаб
https://github.com/
Тут и хостинг, и контакт с программой vscode.
Короче когда вы пишите свой код в редакторе вы можете поделится им с помощью гитхаба, просто нажав пару кнопок ваш репозиторий с кодом станет доступен в интернете, и если у вас что то не получается вам могут помочь.
Самое главное научится коммитить и пушить.
Т9 не успокаивается и слово пушить переводит в рушить)
Вот тут ссылка на гитхаб
https://github.com/
GitHub
GitHub · Change is constant. GitHub keeps you ahead.
Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.
Что такое PHP? ¶
PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) - это распространённый язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML.
Простой ответ, но что он может означать?
Вместо рутинного вывода HTML-кода командами языка (как это происходит, например, в Perl или C), скрипт PHP содержит HTML с встроенным кодом (в нашем случае, это вывод текста "Привет, я - скрипт PHP!").
PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) - это распространённый язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML.
Простой ответ, но что он может означать?
Вместо рутинного вывода HTML-кода командами языка (как это происходит, например, в Perl или C), скрипт PHP содержит HTML с встроенным кодом (в нашем случае, это вывод текста "Привет, я - скрипт PHP!").
CSS-анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.
Для каждого элемента можно задать свое действие, и да css можно подключить к скроллу.
Тоесть при скролле будет срабатывать анимация определенного элемента.
Для каждого элемента можно задать свое действие, и да css можно подключить к скроллу.
Тоесть при скролле будет срабатывать анимация определенного элемента.
Data-атрибуты (data attributes) - это HTML-атрибуты, которые начинаются с префикса "data-". Они позволяют добавлять пользовательские данные к HTML-элементам без необходимости использования других атрибутов или элементов.
Например, вы можете добавить data-атрибут для хранения информации о товаре в HTML-элементе, чтобы потом использовать эту информацию в JavaScript.
Например, вы можете добавить data-атрибут для хранения информации о товаре в HTML-элементе, чтобы потом использовать эту информацию в JavaScript.
html
<div class="product" data-id="1234" data-price="19.99">Product name</div>
Здесь мы добавили data-атрибуты data-id и data-price с соответствующими значениями. Затем в JavaScript мы можем получить доступ к этим значениям:javascript
const product = document.querySelector('.product');
const id = product.dataset.id; // "1234"
const price = product.dataset.price; // "19.99"
Мы можем использовать эти значения для дальнейшей обработки данных, например, для отправки запроса на сервер.❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Transform text - это использование свойства transform для изменения формы, размера, положения или ориентации текста на веб-странице без изменения его физического расположения. Например, можно повернуть текст на определенный угол или сделать его перевернутым зеркально. Также с помощью свойства transform можно создавать анимации и переходы для текста.
👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Для создания чек-бокса на сайте можно использовать элемент <input> с атрибутом type="checkbox". Вот пример кода:
html
<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Мой чек-бокс</label>
В приведенном примере создается чек-бокс с идентификатором "myCheckbox" и текстовой меткой "Мой чек-бокс". Чтобы связать метку с чек-боксом, используется атрибут for в элементе <label>, указывающий на значение атрибута id чек-бокса.
При этом, если пользователь отмечает чек-бокс, то он будет иметь состояние "отмечен" (checked), а если снимает отметку, то состояние будет "не отмечен" (unchecked).
Вы также можете добавить другие атрибуты к элементу <input type="checkbox"> для задания дополнительных функций или стилей. Например, атрибут name может быть использован для идентификации чек-бокса при отправке формы на сервер. Также можно добавить атрибут value для указания значения, которое будет отправлено на сервер, если чек-бокс отмечен.
html
<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Мой чек-бокс</label>
В приведенном примере создается чек-бокс с идентификатором "myCheckbox" и текстовой меткой "Мой чек-бокс". Чтобы связать метку с чек-боксом, используется атрибут for в элементе <label>, указывающий на значение атрибута id чек-бокса.
При этом, если пользователь отмечает чек-бокс, то он будет иметь состояние "отмечен" (checked), а если снимает отметку, то состояние будет "не отмечен" (unchecked).
Вы также можете добавить другие атрибуты к элементу <input type="checkbox"> для задания дополнительных функций или стилей. Например, атрибут name может быть использован для идентификации чек-бокса при отправке формы на сервер. Также можно добавить атрибут value для указания значения, которое будет отправлено на сервер, если чек-бокс отмечен.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Чтобы изменить маркеры (точки) для элементов <li>, можно использовать CSS.
Использование свойства list-style-image:
<style>
ul {
list-style-image: url('path/to/custom-marker.png');
}
</style>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
В этом примере мы устанавливаем свойство list-style-image для элемента <ul>, указывая путь к пользовательскому изображению custom-marker.png. Вместо стандартных маркеров (точек) будет отображаться выбранное изображение.
Оба этих метода позволяют изменить маркеры для элементов списка <li> и создать собственное оформление. Вы можете применить стили к элементам <ul> или <ol> в CSS, чтобы изменить маркеры для всех списков на вашем сайте, или добавить классы к спискам и применить стили только к определенным спискам.
Использование свойства list-style-image:
<style>
ul {
list-style-image: url('path/to/custom-marker.png');
}
</style>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
В этом примере мы устанавливаем свойство list-style-image для элемента <ul>, указывая путь к пользовательскому изображению custom-marker.png. Вместо стандартных маркеров (точек) будет отображаться выбранное изображение.
Оба этих метода позволяют изменить маркеры для элементов списка <li> и создать собственное оформление. Вы можете применить стили к элементам <ul> или <ol> в CSS, чтобы изменить маркеры для всех списков на вашем сайте, или добавить классы к спискам и применить стили только к определенным спискам.
This media is not supported in your browser
VIEW IN TELEGRAM
Свойство justify-content: space-between является одним из значений для управления выравниванием элементов внутри контейнера с использованием Flexbox. Оно позволяет распределить свободное пространство между элементами, создавая равное расстояние между ними.
Когда вы устанавливаете justify-content: space-between для контейнера, элементы внутри контейнера будут распределены таким образом, чтобы между ними создалось равномерное пространство, а первый элемент прижимается к началу контейнера, а последний элемент прижимается к концу контейнера. Все остальные элементы будут равномерно распределены между первым и последним элементом.
Когда вы устанавливаете justify-content: space-between для контейнера, элементы внутри контейнера будут распределены таким образом, чтобы между ними создалось равномерное пространство, а первый элемент прижимается к началу контейнера, а последний элемент прижимается к концу контейнера. Все остальные элементы будут равномерно распределены между первым и последним элементом.
👍1
В CSS можно использовать свойство border-radius для скругления углов элемента. Например, чтобы скруглить углы квадрата с классом "square" на 10px, нужно добавить следующее правило:
Можно также задавать разные радиусы для каждого угла, используя значения в порядке верхний левый, верхний правый, нижний правый, нижний левый. Например:
Это задаст радиус 10px для верхнего левого угла, 20px для верхнего правого, 30px для нижнего правого и 40px для нижнего левого.
https://youtube.com/shorts/4mDgLdjo2NU?feature=share
.square {
border-radius: 10px;
}Можно также задавать разные радиусы для каждого угла, используя значения в порядке верхний левый, верхний правый, нижний правый, нижний левый. Например:
.square {
border-radius: 10px 20px 30px 40px;
}Это задаст радиус 10px для верхнего левого угла, 20px для верхнего правого, 30px для нижнего правого и 40px для нижнего левого.
https://youtube.com/shorts/4mDgLdjo2NU?feature=share
YouTube
#html #css #html5 #htmltutorial #htmlcss2021 #htmlcsswebsite #css3 #css #css3course #cssflex
👍1
Flex-wrap - это свойство CSS для контейнера flex, которое определяет, должны ли элементы внутри контейнера переноситься на новую строку или оставаться в одной строке.
Если flex-wrap установлен на nowrap (значение по умолчанию), элементы будут помещаться в одну строку, даже если это приведет к переполнению контейнера.
Если flex-wrap установлен на wrap, элементы будут переноситься на новую строку при переполнении контейнера
Flex-wrap также имеет значение wrap-reverse, которое переносит элементы на новую строку в обратном порядке.
https://youtu.be/j3im4Nwfvtw
Если flex-wrap установлен на nowrap (значение по умолчанию), элементы будут помещаться в одну строку, даже если это приведет к переполнению контейнера.
Если flex-wrap установлен на wrap, элементы будут переноситься на новую строку при переполнении контейнера
Flex-wrap также имеет значение wrap-reverse, которое переносит элементы на новую строку в обратном порядке.
https://youtu.be/j3im4Nwfvtw
YouTube
Что такое flex wrap в css
В этом уроке обсудим что такое Flex wrap, и как он делает контейнер html адаптивным.