Web

Вполне логичным решением было введение промежуточного звена, которое принимало запросы от клиентов, проверяло бы их и транслировало бы дальше внутрь корпоративной сети. Таким образом все хранилища будут закрыты извне. Будет только один шлюз/вход, через который будут проходить все запросы. Такой вход гораздо легче контролировать.

Самое очевидное решение — нужна программа, которая в runtime исполняет код, который в нее загружается. И этим универсальным client стал browser.

Со временем браузеры совершенствовались, язык отображения HTML (Hyper Text Markup Language — язык разметки гипертекста), становился более сложным и изощренным. Появились JavaScript, который мог исполнять браузер и таким образом сделать страницы более интерактивными. Начиная с версии HTML 4.0 появились CSS (Cascade Style Sheets — каскадные таблицы стилей). Потом появилась и прижилась технология AJAX (Asynchronous JavaScript And XML).

Browser может загрузить данные, отобразить их, позволить что-то ввести в текстовые поля и отправить данные на server.

Он-то и должен предоставить “возможность принимать запросы от универсального клиента и писать логику для распределенных источников информации”.

В простом варианте это была обычная программа, которая ждала запросы от внешних программ. Причем в ранних версиях у такого сервера не было даже многопоточности — она просто порождала свою копию в виде отдельного процесса и передавала туда обработку запроса.

Также программа предоставляла возможность писать другие программы, которые могли быть ею запущены для исполнения запросов.

В итоге схема для решения ПОТРЕБНОСТИ выглядит следующим образом:

В итоге пришли к выводам:

Browser - это прикладное программное обеспечение для просмотра страниц, содержания веб-документов, компьютерных файлов и их каталогов; управления веб-приложениями; а также для решения других задач. Браузеров, на данный момент, очень много, например:

Программа, которая работает с сетевыми запросами может быть как простой, так и сложной, с большим количеством возможностей, которые необходимо изучать. Эту программу и называют application server. Так как application server — это программа, то ее надо запускать, как обычную программу на компьютере. Эта программа предоставляет широко используемые сервисы. Уже заранее готовые и настроенные. Если говорить о Java, то упрощенно, это уже готовый набор объектов или классов, которые можно использовать. Эти объекты создает application server по настройкам и любая программа, которая установлена на application server, может их использовать.

Client и server (как и любым двум программам) необходимо научиться разговаривать друг с другом. Server должен понимать request от client, а client должен понимать response от server. Всё это и называется protocol. Если рассматривать это на низном уровне, то это набор слов (байтов), которые можно использовать для общения.

Говоря простым языком непрофессионала, Web 1.0- это все, что нужно для чтения и поиска информации. Web 1.0- это самая ранняя форма Интернета, созданная Тимом Бернерсом Ли в 1989 году.

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

Web 1.0 - это поколение Интернета, существовавшее в период с 1991 по 2005 год. Это эпоха, когда создателей контента было меньше, а вместо этого подавляющее большинство были потребителями данных. Пользователям было разрешено просматривать контент, размещенный на веб-сайтах, но они не могли сотрудничать, оставлять отзывы или добавлять свой собственный контент на эти веб-сайты. Web 1.0 использовал статический HTML и отображал контент с помощью таблиц и фреймов. Веб-сайты были в основном статичными, а данные хранились преимущественно в файловых системах.

Web 1.0 можно рассматривать как огромную цифровую энциклопедию, которой не хватало интерактивности. Хотя у него, безусловно, были свои сильные стороны, у него также были некоторые недостатки, которые привели к эволюции Web 2.0.

Сильные стороны Web 1.0:

Слабые стороны Web 1.0:

Web 2.0 появился из-за недостатка Web 1.0, который допускал ограниченное общение между создателями контента и пользователями. Web 2.0 также известен как веб для чтения и записи или социальная сеть. Это произошло с появлением сайтов социальных сетей, таких как Twitter, Facebook и Instagram, но выросло, чтобы предоставить пользователям гораздо более богатый пользовательский опыт. Интернет, как мы видим сейчас, находится в фазе Web 2.0 и медленно переходит к Web 3.0.

Веб-сайты в Web 2.0 позволяют пользователям предоставлять обратную связь производителям контента, а также создавать свой собственный контент. Пользователи не только предоставляют данные и обратную связь, но и могут контролировать данные, которые они видят на веб-сайтах Web 2.0. Web 2.0 - это также эпоха, когда появились решения Software as a Service (SaaS) и использовались такие технологии, как HTML 5, CSS 3 и фреймворки JavaScript.

Вместо статичных веб-сайтов, которые просто размещали контент, Web 2.0 ввел концепцию ведения блогов, а также масштабирования, прокрутки и манипулирования контентом, например, в Google Maps. В начале 2000-х годов Web 2.0 стал еще более популярным, что изменило внешний вид Интернета.

Хотя Web 2.0 действительно имел свои преимущества по сравнению с Web 1.0, он все еще страдает от некоторых недостатков.

Сильные стороны Web 2.0:

Слабые стороны Web 2.0:

Зависимость Web 2.0 от крупных технологических компаний неприемлема для обычных пользователей и, таким образом, революционизирует то, как люди используют Интернет. Это дает начало новой эре Web под названием Web 3.0. Web 3.0 также известен как сеть чтения-записи-выполнения и вводит концепцию машинного обучения, искусственного интеллекта и блокчейн-систем.

Web 3.0 вводит концепцию децентрализации во все, что он делает. Это концепция, которая предполагает, что контент и данные должны принадлежать децентрализованным автономным органам и контролироваться ими, тем самым уменьшая цензуру и централизованный контроль, осуществляемый крупными технологическими компаниями. Платежи в Web 3.0 используют аутентификацию на основе токенов, поэтому нет необходимости передавать персональные данные сторонним посредникам. Как только смарт-контракты развернуты, они выполняются так, как написано, без необходимости в посреднике.

Криптовалюты и токены - это не только трансформация финансов и денег, но и способы, с помощью которых создатели могут создавать интернет-организации для создания ценности и обмена ею.

Столпами Web 3.0 являются:

Слабые стороны Web 3.0:

За 33 года Интернет превратился из простых поисковых систем в помощников по обработке персональных данных.

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

В то время как Web 1.0 был просто сетью, доступной только для чтения, с однонаправленным потоком информации, появление Web 2.0 привело к расширению социального сотрудничества между создателями контента и пользователями. В Web 2.0 появилось огромное количество создателей контента, которых почти невозможно сосчитать. При столь высоком объеме, разнообразии и скорости передачи данных Web 2.0, а также при централизованном управлении этими данными крупными технологиями практически невозможно отличить реальные данные от спонсируемых и подвергнутых цензуре данных.

Эти опасения по поводу централизованных финансов, зависимости от крупных технологий и необходимости делиться личной информацией с посредниками породили волну новых идеологий и мышления, которые привели мир к появлению технологии Web 3.0.

Web 2.0 никогда по-настоящему не исчезал, а Web 3.0 никогда по-настоящему полностью не вытеснял Web 2.0, однако различия между двумя технологиями недостаточно тонкие, чтобы их игнорировать. В то время как сторонники Web 3.0 называют его будущим Интернета, некоторые скептики не считают его жизнеспособным направлением для Интернета.

В каком бы направлении ни развивалась эволюция Интернета, невозможно полностью игнорировать тот факт, что основы искусственного интеллекта, виртуальной реальности и использования блокчейна растут экспоненциальными темпами. На вопрос о том, действительно ли комбинация этих технологий приведет к появлению четко определенной технологии Web 3.0, можно будет ответить только в будущем.

Существуют 2 сетевые модели:

Если рассматривать полную сетевую модель OSI (Open System Interconnection — взаимодействие открытых систем), то прикладного программиста для Web затрагивают в основном протоколы Прикладного уровня — HTTP, FTP, SMTP, SNMP и протоколы Транспортного уровня — TCP и UDP.

Согласно протоколу IP (Internet Packet), каждый узел (компьютер, switch и т.п.) в сети имеет свой IP-адрес. На данный момент интернет работает по протоколу IPv4, где IP адрес записывается 4 числами от 0 до 255 - например, 127.0.0.1. Существует и другой способ идентификации компьютеров в сети через доменное имя, которое более удобное и нагляднее идентифицирует компьютер, чем простой набор чисел (например, github.com). В Интернете существуют специальные сервера DNS (Domain Name System), которые осуществляют преобразование доменного имени в IP-адрес и наоборот.

TCP протокол базируется на IP для доставки пакетов, но добавляет два важных свойства :

Таким образом, для идентификации компьютера (host) в сети используется IP-адрес; для идентификации приложения TCP добавляет понятие порта. Порт - это целое число от 1 до 65535 указывающее, какому приложению предназначается пакет.

Java имеет достаточно простой в использовании встроенный сетевой интерфейс, который упрощает связь через сокеты TCP/IP или UDP. TCP обычно используется чаще, чем UDP.

Это важно, потому что вы всегда должны проектировать с учетом своей цели и аудитории.

Я советую вам никогда не начинать проектировать, не имея представления о том, что вы хотите построить. На этом этапе очень важно получить вдохновение.

Проектирование в браузере - это в основном проектирование и разработка одновременно. Все больше дизайнеров покидают традиционные дизайнерские программы, такие как Photoshop, и начинают проектировать в браузере. Основная причина этого в том, что вы не можете создавать адаптивные сайты в фотошопе. Это также экономит вам кучу времени. На этом этапе вы будете использовать свои эскизы, контент и решения по планированию, которые вы приняли на шагах 1, 2 и 3.

Все, что вам нужно для запуска:

Запуск вашего сайта не конец истории.

Элемент article представляет целостный блок информации на странице, который может рассматриваться отдельно и использоваться независимо от других блоков. Например, это может быть пост на форуме или статья в блоге, онлайн-журнале, комментарий пользователя.

Один элемент article может включать несколько элементов article . Например, мы можем заключить в элемент article всю статью в блоге, и этот элемент будет содержать другие элементы article , которые представляют комментарии к этой статье в блоге. То есть статья в блоге может рассматриваться нами как отдельная семантическая единица, и в то же время комментарии также могут рассматривать отдельно вне зависимости от другого содержимого.

Использование article на примере статьи из блога с комментариями:

Здесь вся статья может быть помещена в элемент article , и в то же время каждый отдельный комментарий также представляет отдельный элемент article .

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

Элемент section объединяет связанные между собой куски информации html -документа, выполняя их группировку. Например, section может включать набор вкладок на странице, новости, объединенные по категории и т.д.

Каждый элемент section должен быть идентифицирован с помощью заголовка h1 - h6 .

При этом элемент section может содержать несколько элементов article , выполняя их группировку, так и один элемент article может содержать несколько элементов section .

Здесь для блока основного содержимого создается секция и для набора комментариев также создается элемент section .

Элемент nav призван содержать элементы навигации по сайту. Как правило, это ненумерованный список с набором ссылок.

На одной веб-странице можно использовать несколько элементов nav . Например, один элемент навигации для перехода по страницам на сайте, а другой - для перехода внутри html -документа.

Не все ссылки обязательно помещать в элемент nav . Например, некоторые ссылки могут не представлять связанного блока навигации, например, ссылка на главную страницу, на лицензионное соглашение по поводу использования сервиса и подобные ссылки, которые часто помещаются внизу страницы. Как правило, их достаточно определить в элементе footer , а элемент nav для них использовать необязательно.

Используем элемент nav для создания навигационного меню:

В данном случае определены два блока nav - один для межстраничной навигации, а другой - для навигации внутри страницы.

Необязательно все ссылки помещать в элементы nav . Так, в данном случае ряд ссылок располагаются в элементе footer .

Элемент header является как бы вводным элементом, предваряющим основное содержимое. Здесь могут быть заголовки, элементы навигации или какие-либо другие вспомогательные элементы, например, логотип, форма поиска и т.п.Например:

Элемент header нельзя помещать в такие элементы как address , footer или другой header .

Элемент footer обычно содержит информацию о том, кто автор контента на веб-странице, копирайт, дата публикации, блок ссылок на похожие ресурсы и т.д. Как правило, подобная информация располагается в конце веб-страницы или основного содержимого, однако, footer не имеет четкой привязки к позиции и может использоваться в различных местах веб-страницы.

Здесь определен футер для всей веб-страницы. В него помещена ссылка на лицензионное соглашение использования сервисом и информация о копирайте.

Футер необязательно должен быть определен для всей страницы. Это может быть и отдельная секция контента:

Элемент footer не следует помещать в такие элементы как address , header или другой footer .

Элемент address предназначен для отображения контактной информации, которая связана с ближайшим элементом article или body. Нередко данный элемент размещается в футере:

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


Здесь содержимое блока aside довольно косвенно связано с основным контентом из элемента article . Поэтому все это содержимое мы можем поместить в aside .

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

Используем элемент main :


Не стоит думать, что абсолютно все содержимое надо обязательно помещать в элемент main. Нет мы также можем использовать вне его другие элементы, например, header и footer:

Однако надо помнить, что элемент main не может быть вложенным в такие элементы, как article , aside , footer , header , nav .Кроме того, на веб-странице допустимо наличие только одного элемента main .

Также стоит отметить, что на данный момент есть небольшие проблемы с поддержкой этого элемента в браузерах. В частности, IE 11 не поддерживает данный элемент (в остальных браузерах полная поддержка), поэтому в этом случае стоит использовать атрибут роли:

Указание роли позволит IE11 и более старшим версиям IE должным образом интерпретировать элемент.

Чтобы создать форму, нужно использовать парный тег <form> , внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:

Пример:

Для отправки формы обычно используют методы GET или POST. Если не указать атрибут method , то будет использован GET.

Метод GET посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:

https://www.google.com/search?q=rakovets

Метод GET лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод POST посылает данные в теле HTTP -запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

Большинство полей форм создаётся с помощью одиночного тега <input>. У этого тега два обязательных атрибута:

Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text , который обозначает текстовое поле. Он же используется по умолчанию.

Пример:

Имя поля нужно, чтобы правильно обработать данные на сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения. Для задания имени поля используют латинские буквы и цифры.

Атрибут id поля ввода обозначает идентификатор. Он должен быть уникальным не только в пределах формы, но и на всей странице.

Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями. При щелчке по таким подписям активируется связанное поле. И это удобно, так как по большой подписи попасть легче, чем по маленькому полю. Также идентификаторы используют в JavaScript для работы с полями.

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

Атрибут value задаёт значение поля ввода по умолчанию. Это тоже повышает удобство. Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label> , вот так:

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

Например:

Чтобы сделать поле для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута type на password.

Форма практически готова. Осталось добавить кнопку для отправки формы. Такая кнопка создаётся с помощью тега <input> c типом submit.

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

Обычно имя для кнопки отправки задают, когда в форме несколько кнопок, отвечающих за разные действия. Браузер отправляет на сервер имя и значение только той из них, на которую нажал пользователь. Таким образом, сервер может понять, какую кнопку нажали и что нужно сделать.

Мы научились создавать простейшие формы с текстовыми полями и кнопками. А теперь познакомимся с более сложными элементами формы.

Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id , которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по умолчанию. Вот так:

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:

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

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются с помощью value.

Таким образом, атрибут value является для переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.

В этом задании мы начнём создавать переключатель.

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

Подобным образом можно создавать группы переключателей с любым количеством вариантов. Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked , как у поля-галочки.

Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select> , у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option> , которые должны располагаться внутри тега <select>. Например:

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value , то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple. Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Linux и Windows или Command на OS X.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута name ставятся символы квадратных скобок []. Например, <select name="days[]">. Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.

Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем. Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты. Скрытое поле — это тег <input> с типом hidden.

Любой html-документ, сколько бы он элементов не содержал, будет по сути "мертвым" без использования стилей. Стили или лучше сказать каскадные таблицы стилей (Cascading Style Sheets) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

Стиль в CSS представляет правило, которое указывает веб-браузеру, как надо форматировать элемент. Форматирование может включать установку цвета фона элемента, установку цвета и типа шрифта и так далее.

Определение стиля состоит из двух частей:

Например:

В данном случае селектором является div . Этот селектор указывает, что этот стиль будет применяться ко всем элементам div .

После селектора в фигурных скобках идет блок объявления стиля. Между открывающей и закрывающей фигурными скобками определяются команды, указывающие, как форматировать элемент.

Каждая команда состоит из свойства и значения. Так, в следующем выражении:

background-color представляет свойство, а red - значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red . Иными словами, для фона элемента устанавливается цвет red , то есть красный.

После каждой команды ставится точка с запятой, которая отделяет данную команду от других.

Наборы таких стилей часто называют таблицами стилей или CSS (Cascading Style Sheets или каскадные таблицы стилей). Существуют различные способы определения стилей.

Первый способ заключается во встраивании стилей непосредственно в элемент с помощью атрибута style:

Здесь определены два элемента - заголовок h2 и блок div . У заголовка определен синий цвет текста с помощью свойства color . У блока div определены свойства ширины width , высоты height , а также цвета фона background-color .

Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри являются кодом css, а не html:

Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.

Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор, после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.

Второй способ делает код html чище за счет вынесения стилей в элемент style . Но также есть и третий способ, который заключается в вынесении стилей во внешний файл.

Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:

Это те же стили, что были внутри элемента style . И также изменим код html-страницы: ``html <! DOCTYPE html> <html>

</html>

<!DOCTYPE html> <html>

</html>

div { width: 50px; height: 50px; background-color: red; }

div { width: 50px; /* ширина / height: 50px; / высота / background-color: red; / цвет фона / margin: 10px; / отступ от других элементов */ }

<!DOCTYPE html> <html>

</html>

``

Определим и используем несколько классов:

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

Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки # :

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