Найти тему
WEB MANIA

HTML5 и СSS3 инструменты для создания интерфейса

Всем привет, на связи с вами канал WEB MANIA,

Любое создание веб-приложения или веб-сайта начинается с интерфейса, сначала рисуется макет, по макету создается тоже самое, но на веб-странице с помощью HTML и CSS поэтому всегда считается это за один навык HTML/CSS нельзя знать одно и не знать другое

HTML

HTML это язык гипертекстовой разметки, основа языка теги

<head>

можно сказать что каждый элемент, блок, кнопка,заголовок, изображение,видео, параграф соответствует свой тег поэтому их много и запоминать нет смысла

-2

Во-первых как вы видите есть парные теги <head></head>

есть одиночные теги <meta>

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

Как видите документ состоит из двух частей, тег <head></head> (голова) и <body></body>(тело), в голове пишутся теги для браузера, как отображать контент, подключаются дополнительные файлы. В теле пишется сама разметка. Давайте напишем небольшой контент

-3

и результат

-4

как видите результат не очень красивый и не видно блока <div> в котором есть текст. Теги <img> одиночные теги потому что они только выводят изображение по ссылке. Но помимо у каждого тега есть атрибуты это слова которые указываются после название тега и отвечают за определённое свойство и их много, есть универсальные для всех тегов, а есть уникальные у каждого тега, например у тега <img> есть атрибут src это путь к изображению, атрибут class присваивается класс и так далее.

CSS

CSS- язык стилей, служит что бы при придать красивый вид элементам, у них есть собственные синтаксис

Селектор {

свойство: значение;

свойство: значение;

свойство: значение;

свойство: значение;

}

Чаще всего это отдельный файл с расширением .css, перед фигурными скобками пишется имя тега или класса или id то к чему применяются стили, дальше в фигурных скобках пишутся сами стили например

color: red

border-radius: 20px

как догадались свойств много,

Давайте к нашему контенту применим стили , присвоим к некоторым элементам класс и надо подключить наш файл со стилями

-5

через тег <link>

и прописываем стили в файле style.css

-6

результат

-7

Теперь стало покрасивее. В CSS найдётся свойство на любой стиль, тени, расположение, градиент и так далее.

На этом всё вот так собственно и пишется интерфейс

Подписывайтесь если статья была полезно и интересной😉

Всем пока😃