Основой страницы типичного сайта является определенным образом отформатированный текст. Текст этот структурирован и может быть снабжен ссылками на части этой же страницы и на другие страницы, как этого сайта, так и любых других сайтов. Этот текст отформатирован и структурирован (или одним словом - размечен) при помощи языка HTML (HyperText Markup Language) — языка разметки гипертекста.
Гипертекстом называется текст, который может содержать гиперссылки, т.е. обычные ссылки.
HTML совсем не обязательно хранится в каком-то файле. Достаточно часто HTML полностью или частично генерируется при помощи других языков программирования или каких-то программ. В частности, эта страница в HTML преобразована специальной программой из файла формата .md.
Важно понимать и помнить, что HTML не является языком программирования, это язык разметки текста.
Современного вида HTML документ состоит из нескольких основных элементов, представленных на рисунке ниже:
На представленном выше рисунке представленна стандартная и очень упрощенная структура HTML документа. По пунктам там:
- Объявление типа документа. Не является стандартным HTML тэгом, но является важнейшим элементом HTML документа. В приведеном выше случае указывает на то, что формат документа соответсвует стандарту HTML5. доп. информация
- Парный тэг
<html>.<html>тэг включает в себя весь документ HTML и является корневым элементом документа. - Парный тэг
<head>(заголовок). В этом тэге находится вся общая информация о документе, подключение стилей, скриптов, указываются все мета-данные документа. - Одиночный тэг
<meta>содержит мета-данные об текущем HTML документе. В данном случае тэг устанавливает систему кодирования символов в utf8. Есть огромное количество метаданных, которые могут быть установлены этим тегом. Для начала можно ознакомиться с перечнем и примерами на википедии. - Обязательный элемент заголовка (head) HTML документа - парный тег
<title>, содержащий внутри себя описание страницы. Содержимое title отображается в названии вкладки страницы в браузере. - Тэг
<body>содержит весь контент страницы, который необходимо показывать в окне браузера.
Как уже может быть понятно из предидущего раздела, есть теги парные и одиночные(непарные). Парные теги начинаются названием тега, содержимое их находится между тегами открывающим и закрывающим, а закрывается, соответственно, названием тега, предваренным слешом. Одинарные теги содержат всю информацию в открывающей части тега и не имеют внутренней информации.
CSS - Cascading Style Sheets, каскадная таблица стилей. HTML служит для вывода информации пользователю, тогда как CSS служит для оформления и стилизации выведенного при помощи HTML текста, картинок и других элементов.
CSS состоит из множества селекторов с правилами, как HTML состоит из тегов с аттрибутами. Каждое правило устанавливает минимум одно свойство для минимум одного элемента. Каждый селектор выбирает определенный тег или теги на странице и пытается применять к ним свои правила. Успех этого мероприятия зависит от приоритета селектора и порядка его появления.
Для того, чтобы уметь читать CSS, нужно понимать три вещи: селекторы, свойства и порядок их использования. Чтобы уметь верстать, к сожалению, этих знаний недостаточно. Необходимо также накопить немало опыта в изучении взаимодействий различных селекторов, понимать теорию потоков, в которые попадают блоки, осваивать пре и постпроцессоры и многое многое другое. На этом уроке наша задача - уметь читать и слегка изменять существующие селекторы и свойства.
Иногда перед backend программистами все же возникают задачи некоторой минимальной стилизации выводимой информации. На помощь начинающим "верстальщикам" может прийти CSS фреймворк Bootstrap.
Первый важный момент, который следует иметь в виду при принятии решения, использовать ли bootstrap - возможность использовать сетку для размещения элементов.
В обычной ситуации элементы на веб-странице размещаются при помощи CSS несколькими вариантами - абсолютным или относительным позиционированием, в потоке и вне потока, и различными комбинациями этих вариантов. Помимо этих подходов есть подход через flexbox и через сетки. Сетка bootstrap - самая популярная из сеток.
Также рекомендуем рассмотреть все пункты меню и попробовать как можно большее количество элементов и компонентов.
Самый распространенный способ реализации взаимодействия пользователя интернет-сервиса с этим сервисом и его возможностями - архитектура клиент-сервер.
Суть архитектуры довольно проста: пользователь отправляет запросы с клиентского интерфейса на сервер и получает с сервера на клиентский интерфейс ответы на свои запросы.
Запросы (Requests) и ответы (Responses), как правило, отправляются при помощи протокола передачи гипертекста (HTTP). Когда вы кликаете на ссылку на странице, заполняете форму или запускаете поиск, браузер отправляет на сервер HTTP-запрос.
Этот запрос обязательно включает:
- Путь к серверу и/или ресурсу на сервере
- Метод протокола, определяющий необходимое действие (например, получить файл, сохранить или обновить некоторые данные, и т.д.).Самые популярные методы - GET, для получения ресурса, и POST для создания или нового ресурса.
- прочая информация, например:
