Всем привет, на связи с вами канал WEB MANIA,
Любое создание веб-приложения или веб-сайта начинается с интерфейса, сначала рисуется макет, по макету создается тоже самое, но на веб-странице с помощью HTML и CSS поэтому всегда считается это за один навык HTML/CSS нельзя знать одно и не знать другое
HTML
HTML это язык гипертекстовой разметки, основа языка теги
<head>
можно сказать что каждый элемент, блок, кнопка,заголовок, изображение,видео, параграф соответствует свой тег поэтому их много и запоминать нет смысла
Во-первых как вы видите есть парные теги <head></head>
есть одиночные теги <meta>
Парные теги это теги внутри которых можно вставлять другие теги, а одиночные это теги которые выполняют какую-то функцию, например тег <meta> указывает браузеру на то, как нужно отображать контент.
Как видите документ состоит из двух частей, тег <head></head> (голова) и <body></body>(тело), в голове пишутся теги для браузера, как отображать контент, подключаются дополнительные файлы. В теле пишется сама разметка. Давайте напишем небольшой контент
и результат
как видите результат не очень красивый и не видно блока <div> в котором есть текст. Теги <img> одиночные теги потому что они только выводят изображение по ссылке. Но помимо у каждого тега есть атрибуты это слова которые указываются после название тега и отвечают за определённое свойство и их много, есть универсальные для всех тегов, а есть уникальные у каждого тега, например у тега <img> есть атрибут src это путь к изображению, атрибут class присваивается класс и так далее.
CSS
CSS- язык стилей, служит что бы при придать красивый вид элементам, у них есть собственные синтаксис
Селектор {
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
}
Чаще всего это отдельный файл с расширением .css, перед фигурными скобками пишется имя тега или класса или id то к чему применяются стили, дальше в фигурных скобках пишутся сами стили например
color: red
border-radius: 20px
как догадались свойств много,
Давайте к нашему контенту применим стили , присвоим к некоторым элементам класс и надо подключить наш файл со стилями
через тег <link>
и прописываем стили в файле style.css
результат
Теперь стало покрасивее. В CSS найдётся свойство на любой стиль, тени, расположение, градиент и так далее.
На этом всё вот так собственно и пишется интерфейс
Подписывайтесь если статья была полезно и интересной😉
Всем пока😃
