четверг, 13 сентября 2018 г.

A programmer: HTML/CSS

UPD к предыдущему посту: Уж не знаю почему, но там все заработало, как надо, без внесения каких-либо изменений - на самом деле, скорее всего, я просто не так проверял. Но это странно, потому что, насколько я смог выяснить, - работать и не должно было, поскольку функция res должна срабатывать только один раз, а значит послать можно или на фронтенд, или в базу. Но в итоге res.render(); посылает, и туда, и туда. Разобраться с этим надо бы, но пока отложу на потом. К тому же задача вытащить последнюю введенную запись из базы тоже не получилась у меня, потому что идентификатор генерируется только в базе и мне он неизвестен, а как вставлять поле даты/времени, я пока не выснил - значит, тоже не потом. Кстати, если кто-то знает ответы на эти вопросы, пожалуйста, пишите.

Я несколько переживаю, что не сделал полноценный CRUD для работы с базой данных. Но есть два "но". Во-первых, если посмотреть то задание, которое я себе сформулировал, то там об этом речь и не идет: "Задача приложения - показывать пользователю страницу с формой и собирать введенные им данные в базу данных". То есть формально я задачу выполнил, и все в порядке. А во-вторых, я все-таки хочу это сделать, но так, чтобы все комманды сразу посылались с более-менее вменяемого фронтенда - поля-кнопочки и все такое. А для этого надо вернуться к верстке. Я, конечно, 10 лет назад заканчивал онлайн-курсы по HTML/CSS, но никакой практики с тех пор практически не имел, и основательно подзабыл почти все, что знал. Поэтому сегодняшний пост об основах HTML/CSS.

HTML (HyperText Markup Language) - это, собственно не язык, а разметка документа, которая говорит браузеру, как именно надо отображать его содержание. Если посмотреть на HTML-код документа, мы увидим, что это самое содержание помещается между угловыми скобками, внутри которых и находится тэги со всякими разными описаниями. Так, допустим, этот абзац заключен в тэг, в котором записаны параметры оформления абзаца:


Для удобства повторяющееся оформление выносят в отдельный css-файл (CSS - Cascading Style Sheets), ссылку на который просто вставляют в итоговый html-документ. Вот таким образом:



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

CSS-файл выглядит приблизительно так:



То есть это набор блоков, обозначенных фигурными скобками. Перед блоком стоит селектор (идентификатор элемента), а внутри него - описание стиля для этого элемента посредством указания свойства и его значения.

С помошью селекторов мы ссылаемся на соответствующие тэги. Или внутри тэгов указывать собственные идентификаторы элементов или классов элементов, и ссылаться уже не них. Например:

id="header" в html-документе, значит #header {} - в css-файле, или

class="header" в html-документе, значит .header {} - в css-файле.

Еще один пример вот:


Здесь показано, как еще можно указывать селекторы (* означает применить глобально ко всему документу).

Ну и напоследок. Существуют отдельные разработанные библиотеки стилей, которые просто можно подключать в свой документ. Один из самый популярных - Bootstrap

Bootstrap

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

Комментариев нет: