Введение в веб-разработку с HTML, CSS, JavaScript

Citation preview

---

Тимур Машнин

Введение в веб-разработку с HTML, CSS, JavaScript

Начало работы Для начала работы с веб-проектами необходимо настроить среду разработки. Какие инструменты составляют среду разработки? Во-первых, для веб-разработки можно использовать браузер Google Chrome. Браузер Google Chrome уже поставляется с инструментами CDT, Chrome Developer Tools.



Далее нам нужен редактор кода. И в качестве редактора кода можно использовать редактор Sublime Text 3.





Sublime чрезвычайно быстр и очень хорошо поддерживается с точки зрения сторонних плагинов. Для установки редактора Sublime в интернете можно найти дитрибутив в том числе и портативной версии. Нам также понадобится Git.





Git – это система управления версиями, с помощью которой можно хранить информацию о всех изменениях в вашем коде в репозитории. Репозиторий Git – это место, где хранится ваш код и вся информация о его изменениях. Репозитории могут находиться локально у вас на компьютере или на удалённом компьютере.





Для установки Git скачаем и запустим дистрибутив, и далее будем следовать инструкциям.





Также мы можем использовать инструмент под названием Browser Sync. Browsersync – это модуль Node.js. Node.js – это среда выполнения приложений JavaScript, которая выполняет код JavaScript вне веб-браузера. И Browsersync обеспечивает синхронизированное тестирование веб приложений в браузере. Browsersync создает сервер по адресу http://localhost:3000/ и наблюдает за изменениями файлов веб приложения. И когда файлы изменяются, Browsersync автоматически перезагружает браузер и мгновенно показывает эти изменения. Таким образом экономится наше время на обновление браузера во время разработки веб приложения. И чтобы установить Browser Sync, нам нужно установить Node.js.





Для этого скачаем и запустим дистрибутив Node.js, и далее будем следовать инструкциям.





Далее установим Browsersync. Если вы хотите запускать Browsersync из командной строки в любом каталоге, его можно установить глобально с помощью выше показанной команды в терминале командной строки. Здесь NPM (Node Package Manager) – это менеджер пакетов Node.js. И NPM устанавливается вместе с Node.js.





Теперь можно запускать файлы проекта веб-приложения с помощью Browsersync. Для этого нужно открыть терминал и ввести выше показанную команду. Эта команда запускает локальный сервер по адресу http://localhost:3000, открывает и проверяет изменения файла index.html. Можно также запустить сервер Browsersync для каталога приложения, отслеживая все его файлы. Введение в HTML Итак, что же такое HTML? Что вообще означает термин HTML и как он связан с Интернетом?





HTML – это язык гипертекстовой разметки. И давайте рассмотрим каждое из этих слов и выясним, что именно они означают. Во-первых, гипертекст. И гипертекст – это текст, который содержит ссылки на другие тексты, и так, по сути, устроена вся сеть Интернет. Один документ указывает на другой документ, который указывает на кучу других документов, и так далее.





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





Так, например, в этом примере закрывающий тег div появляется после закрывающего тега h1, что является синтаксической ошибкой. Теперь, на самом деле Интернет основывается на трех базовых технологиях HTML, CSS, и JavaScript. HTML, как мы уже выяснили, описывает структуру документа. Например, документ может иметь один заголовок, два абзаца и нижний колонтитул. И обратите внимание, что это ничего не говорит о том, как эти компоненты визуально расположены, как они выглядят, какого они цвета и какой при этом размер шрифта. Цвет и стиль – это роль CSS.





Язык Cascading Style Sheets (CSS) определяет цвет, макет, стиль шрифта, размер шрифта, другими словами стиль документа. И кроме HTML и CSS, есть еще язык JavaScript, работа которого заключается в обеспечении поведения или функциональности документа. JavaScript добавляет функциональность странице, например, что происходит, когда пользователь нажимает на заголовок документа. Теперь, как появился HTML? До 1997 года не существовало никаких стандартов Интернета, и браузеры делали все, что хотели. Они изобретали новые теги и поразному реализовывали одни и те же теги. И вы могли зайти на веб-сайт и получить сообщение о том, что ваш браузер несовместим с этим веб-сайтом, поэтому вам нужно перейти на другой браузер. И примерно в 1997 году Консорциум World Wide Web, W3C, придумал первый стандарт для браузеров, это был HTML4, и они очень быстро обновили его до HTML4.01.





Этот стандарт был довольно свободным, и у браузеров было слишком много свободы действий внутри этого стандарта в отношении того, как его реализовывать и как отображать страницы. Поэтому, примерно в 2000 году W3C предложил другую спецификацию под названием XHTML 1.0, и эта спецификация была основана на языке разметки XML. И W3C хотели продолжить работу, создав XHTML 2.0. Но проблема была в том, что поставщики браузеров решили, что работа W3C продвигается слишком медленно, и, кроме того, они считали, что спецификации W3C движутся в неправильном направлении. Поэтому, производители браузеров объединились и создали еще одну группу разработки спецификаций, которая называлась WHATWG, группа технологий веб-гипертекстовых приложений. И эта группа была гораздо менее демократична, чем W3C, так как там есть один главный редактор, который принимает окончательные решения, поэтому все представители поставщиков браузеров могут спорить сколько угодно, но в конце концов назначенный редактор принимает окончательные решения. И в течение долгого времени эти две организации не сходились во взглядах и не работали вместе, так что они действительно шли в двух разных направлениях. Но в конце концов, примерно в 2007, 2009 годах,

WHATWG и W3C начали совместную работу, и создали то, что мы имеем сейчас, стандарт HTML5.





Теперь, W3C отвечает за стандарты, а WHATWG отвечает за реализацию стандартов браузерами. И чтобы узнать, будет ли ваш HTML работать в браузерах, вы можете использовать валидатор, который есть на веб-сайте W3.org.





Здесь вы можете проверить свой код HTML, является ли он действительным и будет ли он хорошо работать в браузере.





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





В основе HTML лежат теги HTML. Поэтому очень важно понимать, из чего состоит HTML-тег и как правильно, синтаксически правильно кодировать HTML-тег.





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





Например, теги br и hr, br означает разрыв строки, а hr означает горизонтальную разделительную линию, имеют только открывающий тег. У них вообще нет закрывающего тега.





Теперь, каждый элемент HTML может иметь предопределенные атрибуты. Атрибут – это пара «имя-значение», представляющая собой своего рода метаданные о самом элементе, к которому он применяется. (Метаданные – информация о другой информации, или данные, относящиеся к дополнительной информации о содержимом или объекте.) В этом примере мы присваиваем myId как значение атрибута id, который представляет идентификатор элемента HTML. И каждый атрибут имеет свои собственные правила для присваивания его значения. Так, например, значение атрибута id должно быть уникальным в рамках всего HTML-документа. Если есть другой элемент с тем же значением для id, это будет означать, что веб-страница содержит недопустимый HTML-код. Что касается синтаксиса, между открывающей скобкой и именем тега не должно быть пробелов. Точно так же не допускается пробел между открывающей скобкой и косой чертой перед закрывающим тегом. Однако у вас должен быть хотя бы один пробел между самим тегом и любым из его атрибутов. И еще одно правило – атрибуты могут быть указаны только в открывающем теге, поэтому вы не можете указать атрибут в закрывающем теге. Также рекомендуется всегда заключать значение атрибута в одинарные или двойные кавычки. Неважно, используете ли вы одинарные или двойные кавычки, так как они эквивалентны в HTML. Более интересный случай возникает, когда само значение атрибута содержит кавычки. В такой ситуации рекомендуется использовать и одинарные и двойные кавычки.





Вы можете начать с двойных кавычек, или вы можете начать с одинарных кавычек. Создание первой HTML страницы Для создания кода HTML страницы откроем редактор Sublime.





И введем вышепоказанный код. И каждая HTML-страница должна начинаться с объявления типа документа. То есть все HTML-документы должны начинаться с объявления , которое не является тегом HTML. Это «информация» для браузера о том, какой тип документа браузеру ожидать. Тип документа – это какой спецификации HTML следует код страницы. Если код страницы следует спецификации HTML 5, объявление типа документа простое – . Для HTML 4.01, такое объявление было гораздо сложнее:

Слово doctype или HTML может быть написано строчными или прописными буквами. Единственное, на что вы должны обратить внимание, это то, что между восклицательным знаком и словом doctype не должно быть пробела. И если вы пропустите объявление типа HTML-страницы, это будет сигналом для браузера, что он должен рассматривать ваши страницы как страницы, не соответствующие стандарту HTML. Поэтому ваш код HTML может работать не совсем правильно. Далее идет тег html, и это тег, внутри которого содержится весь htmlдокумент. После тега html идет тег head. И тег head содержит элементы, относящиеся к описанию содержимого страницы. Например, какую кодировку символов должен использовать браузер для отображения контента страницы. Тег head также может содержать заголовок страницы, это тег title, и ссылки на любые ресурсы, необходимые для правильного отображения страницы. Таким образом, тег head содержит метаданные об основном контенте страницы. Здесь тег meta с атрибутом charset указывает какую кодировку необходимо использовать для отображения символов нашей вебстраницы. UTF-8 – это наиболее часто используемый стандарт кодирования символов, позволяющий компактно хранить и передавать символы Юникода. И обратите внимание, что у тега meta нет закрывающего тега. Далее мы указываем заголовок страницы с помощью тега title. И заголовок – это один из обязательных тегов, без которого HTML страница будет недействительная.





И заголовок отображается во вкладке браузера. После тега head идет тег body. Тег body содержит весь основной контент, видимый пользователю. Сохраним нашу страницу как index.html, так, как правило, называется главная страница сайта. И теперь давайте посмотрим, как это выглядит в браузере. Но сначала установим плагин Browsersync для Sublime Text. Для этого скачаем Github репозиторий проекта Browsersync по адресу https://github.com/iamdjones/sublime-text-browser-sync. Распакуем папку и сохраним ее в каталоге пакетов Sublime Text, который мы найдем с помощью меню Preferences – Browse Packages.





В результате у нас появится пункт меню Browser Sync.





Теперь мы можем воспользоваться командой Launch, чтобы открыть HTML страницу в браузере. При этом все изменения кода страницы будут автоматически отображаться в браузере. Далее давайте попробуем взять код нашей страницы, скопировать и вставить его для проверки внутри валидатора W3C.





В результате мы получим предупреждение, что у нас отсутствует атрибут lang тега html, который сообщает язык текстового содержимого. Эта информация помогает поисковым системам возвращать результаты для конкретного языка, а также используется программами чтения с экрана, которые переключают языковые профили для обеспечения правильного акцента и произношения. Поэтому добавим этот атрибут – . Теперь проверка в валидаторе покажет, что наша страница действительна. Еще одно замечание, когда браузер открывает HTML-страницу, он всегда отображает или интерпретирует HTML-код последовательно сверху вниз. Таким образом, сначала интерпретируется объявление типа документа, затем тег HTML, затем тег заголовка и так далее, пока не будет достигнут последний закрывающий тег HTML. Элементы HTML документа Все элементы HTML документа делятся на две категории в рамках традиционной HTML структуры. Это либо элементы уровня блока (block-level), либо встроенные элементы (inline).





Элементы уровня блока по умолчанию отображаются с новой строки. Вы можете изменить это с помощью CSS, но мы пока не говорим о CSS. Это означает, что каждый раз, когда вы указываете блочный элемент в HTML, браузер автоматически помещает этот элемент на новую строку в потоке отображения документа. И элементы уровня блока могут содержать внутри себя встроенные или другие элементы уровня блока. При этом встроенные элементы по умолчанию отображаются в одной строке. Опять же, вы можете изменить это, но по умолчанию они отображаются в одной и той же строке. У встроенных элементов также есть ограничение, заключающееся в том, что они могут содержать только другие строчные элементы. Другими словами, встроенный элемент не может иметь как часть своего содержимого элемент уровня блока.





В этом примере используются элементы div и span. Элемент div обозначает деление, а элемент span – интервал. Элемент div – это самый общий элемент блочного уровня, а span – это суперуниверсальный встроенный элемент. Здесь у нас есть пара элементов div, следующих один за другим, DIV 1 и DIV 2. Затем есть элемент span, который следует за DIV 2. И DIV 3 немного сложнее, так как он включает в себя элемент span внутри него. Если открыть этот документ в браузере, вы можете увидеть, что элемент DIV 1 находится сам по себе на отдельной строке. Так же и элемент DIV 2, сам по себе на отдельной строке. Элемент Span 1 следует сразу после DIV 2. И, хотя span является встроенным элементом, но поскольку DIV 2 располагается на отдельной строке, следующий элемент также размещается на отдельной строке. DIV 3 является элементом уровня блока, поэтому он перемещается на следующую строку, но элемент Span 2 находится внутри DIV 3, и, поскольку это встроенный элемент, он не требует новой строки. И обратите внимание, то, как мы пишем код и размещаем его на разных строках абсолютно не влияет на html-страницу и на то, как она отображается. Вы могли бы написать весь код в одну строку и результат будет тот же.

Теперь возьмите этот код, скопируйте его и проверьте в валидаторе W3C. Вы увидите, что страница действительна. Но что произойдет, если вы прямо внутри валидатора добавите еще один тег div прямо внутри тега span с некоторым содержимым. Вы увидите, как валидатор пожалуется, что недопустимый элемент div является дочерним элементом span.





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





В этом очень простом HTML-документе есть элементы h1, h1, h2, h3 и вплоть до элемента h6, в общем, все доступные элементы заголовков. И эти элементы указывают то, что содержимое заголовка между открывающим элементом h1 и закрывающим элементом h1 является самым важным заголовком в документе, и так далее. Таким образом, h6 также будет заголовком документа, но наименее важным из всех. И обратите внимание, несмотря на то что отображение заголовков в браузере визуально отличает их, заголовки не следует использовать для стилизации документа. Эти элементы предназначены только для передачи структуры вашей HTML-страницы, не более того. Стилизацию следует делать с помощью CSS, так как структура документа важна для поисковых машин. То, что помечено как h1, очевидно, является наиболее важным и обобщенным описанием содержания этой страницы. Для SEO крайне важно использовать тег h1, и он должен содержать формулировку, которая передает центральную тему остального содержания.







В этом примере вы можете увидеть новый тег header, который содержит такую информацию о документе, как логотип компании, слоган, навигацию.

HTML тег содержит ссылки, ведущие на другие страницы сайта или на разделы текущей веб-страницы. Эти ссылки позволяют пользователю перемещаться по сайту. Большинство сайтов имеют горизонтальное или вертикальное меню, располагающееся в верхней части страницы, это и является содержимым элемента . В этом примере, у нас есть также элементы section. И внутри каждого тега section у нас есть элементы article. Элемент section представляет общий раздел документа. И раздел section в этом контексте представляет собой тематическую группу контента, обычно с заголовком. Элемент article представляет собой полную или автономную композицию в документе. Это может быть сообщение на форуме, статья, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента. Когда элементы article являются вложенными, внутренние элементы article представляют статьи, которые в принципе связаны с содержимым внешней статьи. Например, запись в блоге на сайте может представлять комментарии пользователей как вложенные элементы статьи. Обычно статья помещается внутри элемента section. Тем не менее, это не всегда так, и, конечно же, нет жесткого правила по этому поводу. Вполне возможно, что в статье также могут быть разделы. Далее в этом примере у нас есть тег aside. Тег aside – это элемент, который сообщает, что внутри него есть чтото, что связано с основным содержимым страницы, но не в такой прямой связи, как основное содержимое. И содержимое тега часто размещается в документе в виде боковой панели. И, наконец, у нас есть тег нижнего колонтитула или подвала, который содержит некоторую информацию о сайте, такую как авторские права, контакты, карта сайта и т.д. И в одном документе может быть несколько элементов . Теперь следует отметить, что все эти теги являются элементами блочного уровня. Так что визуально мы могли бы просто везде использовать теги div. Однако, если вы посмотрите на код, станет очевидным, насколько легче его читать и понимать с этими специальными тегами и понимать структуру этой HTML-страницы, так как эти элементы передают некий смысл.

Теперь, давайте поговорим о HTML-списках.





И списки – это невероятно полезная структура HTML, позволяющая группировать связанный контент. Если подумать, мы, как обычные люди, думаем о различных вещах в терминах списков. Списки дел, списки покупок и так далее. И поэтому совершенно естественно, что списки есть и в HTML. И в HTML есть два вида списков – упорядоченные списки и неупорядоченные. Для того чтобы создать неупорядоченный список, нужно указать тег ul и заключить в него весь контент списка. При этом каждый элемент в списке находится в теге li. При отображении в браузере такого списка, каждый его элемент помечается кружком. Если мы скопируем и вставим этот HTML-код в валидатор W3C, он покажет, что наша HTML-страница действительна. Но давайте посмотрим, что произойдет, если мы возьмем один из элементов ненумерованного списка и просто удалим теги li вокруг него. Если мы проверим этот код снова в валидаторе W3C, мы увидим, что HTML код теперь недействителен, и причина в том, что внутри тега ul

не разрешен текст. Единственное, что разрешено внутри элемента ul,  – это элемент li. Все остальное не допускается. Для создания упорядоченного списка тег ul заменяется тегом ol, но элементы li при этом точно такие же. В браузере элементы упорядоченного списка помечаются порядковым номером. Теперь, что касается контента, так как HTML использует определенные символы для своего синтаксиса, нам нужен способ различать эти символы как HTML код и те же символы как содержимое. Если мы хотим, чтобы браузер интерпретировал специальные символы HTML как обычный контент, нам нужен способ указать браузеру не интерпретировать их как HTML код. В частности, есть три символа, которые всегда следует экранировать, чтобы они не вызывали проблем с рендерингом.





Это символы и &. И эти символы зарезервированы в HTML. Например, если вы используете в тексте знаки меньше (), браузер может перепутать их с тегами.

И для отображения зарезервированных символов в HTML используются сущности символов. Вместо использования символа меньше . А для символа амперсанда & нужно использовать &.





На самом деле HTML содержит целую массу сущностей символов HTML. И одним из наиболее распространенных является символ авторского права. И основная причина, по которой мы используем для него сущность символа, заключается в том, что этот символ не очень-то и легко найти на любой клавиатуре. Поэтому мы можем использовать вместо символа авторского права – ©. Еще одна полезная сущность HTML, которая очень часто используется, это  , что означает неразрывный пробел. При этом слова с неразрывным пробелом всегда будут на одной строке, то есть браузером эти слова будут переноситься на новую строку вместе.

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





Итак, первый тип ссылок, который мы собираемся рассмотреть, – это внутренние ссылки. И мы создаем ссылки с помощью элемента с атрибутом href. Атрибут href указывает гипертекстовую ссылку. И значение href может быть как относительным, так и абсолютным URL-адресом. В нашем случае, так как мы обсуждаем внутренние ссылки, которые указывают на внутренние веб-страницы сайта, ссылки являются относительными URL-адресами. Также полезно указывать атрибут title для тега a. Атрибут title используется программами чтения с экрана, которые помогают слабовидящим людям просматривать веб-страницу. Далее, содержимое между открывающим и закрывающим тегами элемента   – это содержимое, по которому вы сможете щелкнуть, чтобы перейти к ссылке href.

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





Теперь, о внешних ссылках. На самом деле во внешних ссылках нет ничего особенного, кроме того, что их значение href обычно начинается с http://, потому что обычно внешние ссылки указывают на документы других веб-сайтов.

Однако здесь есть одна особенность элемента a, которая довольно часто используется в сочетании с внешними ссылками. И это целевой атрибут target. Когда для атрибута target установлено значение _blank, это заставляет браузер открывать страницу по ссылке в новой вкладке или в новом окне. Таким образом сайт не закрывается, а новая страница открывается в новой вкладке, так что вернуться на сайт после просмотра страницы по ссылке будет удобно.





Следующий тип ссылки – это ссылка на фрагмент страницы. Эта ссылка позволяет навигацию по большому документу, так что не нужно прокручивать его и искать нужный вам фрагмент документа. Такая ссылка имеет специфический формат атрибута href. Здесь есть символ #, за которым следует идентификатор фрагмента, как в этом примере section1, section2. Таким образом эта ссылка указывает на раздел страницы внутри элемента, который имеет идентификатор с атрибутом id. И вы можете использовать любой тег с идентификатором раздела.

Обратите внимание, что имя раздела не содержит знака #. Только ссылка на этот раздел содержит знак #. И здесь у нас даже есть ссылка «назад к началу», которая указывает на начало документа – тег h1 с идентификатором top. И если вы щелкнете по такой ссылке, идентификатор фрагмента появится в URL-адресе, например index.html#section1, и вы можете скопировать и использовать этот URL-адрес в качестве другой ссылки. Так что при открытии страницы можно будет сразу перейти к разделу, на который указывает идентификатор. Теперь, давайте поговорим о том, как включать изображения в HTMLдокументы.





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

И браузер полностью проигнорирует этот комментарий и не отобразит его. Теперь давайте посмотрим на тег изображения . Изображение отображается в HTML с помощью этого тега img, который является сокращением от слова image. А атрибут src тега img – это URL-адрес, указывающий на файл изображения. И вы можете заметить, что этот URL-адрес ничем не отличается от href, который вы видели у тега ссылки . Это может быть относительный URL-адрес или абсолютный URL-адрес, если он содержит внешнюю ссылку. Далее мы указываем ширину и высоту изображения. Хотя это и не обязательно, рекомендуется всегда указывать ширину и высоту. И еще есть атрибут alt, который используется программами чтения с экрана, помогающими людям с нарушениями зрения.





Как вы видите, это изображение отображается в браузере в одной строке с текстом, так как тег img является встроенным элементом. Если бы это было не так, изображение было бы на своей собственной строке. Теперь давайте посмотрим на другой тег img. Здесь используется внешняя ссылка, указывающая на изображение в Интернете.

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





Вы можете моделировать скорость загрузки в инструментах разработчика браузера. Здесь вы можете установить ограничение сети и посмотреть, как выглядит страница во время загрузки изображения. Еще хуже, если вы полагаетесь на изображение, чтобы создать какойто визуальный макет для своей страницы, и по какой-то причине изображение не загрузилось, например, URL-адрес может быть неверным. Если мы полагаемся на определенное пространство между цитатой и нижним колонтитулом страницы, мы больше не сможем видеть это пространство, так как изображение не загружается.

Однако, если мы укажем ширину и высоту изображения, даже несмотря на то, что изображение не загружается, визуальный интервал и визуальный макет остаются правильными. Вопросы Вопрос 1 Основная цель HTML состоит в том, чтобы (подсказка: что-то, что не сможет выполнить обычный текстовый файл с содержимым) Отобразить содержимое веб-страницы для пользователя Сообщить структуру контента Сообщить браузеру, как расположить и выровнять содержимое в окне браузера. Сообщить браузеру, что должно произойти после загрузки страницы Вопрос 2 W3C (Консорциум World Wide Web) – единственная организация, которая диктует, как браузеры должны реализовывать HTML5. Истина Ложь Вопрос 3 ВСЕ теги HTML5 должны иметь Наличие открывающего тега Наличие закрывающего тега Иметь хотя бы 1 атрибут Быть в нижнем регистре, т.е.

Вопрос 4 Определите правильное объявление страницы HTML5





















Вопрос 5 Что произойдет, если вы не укажете объявление HTML5? Ничего. HTML5 очень либерально относится к своему объявлению, и это всего лишь рекомендация по его использованию. Браузер автоматически вернется к предыдущей версии HTML. Страница будет интерпретироваться в режиме причуд. Страница вообще не отобразится. Вопрос 6 Браузеры ВСЕГДА интерпретируют HTML последовательно, сверху вниз. Истина Ложь Вопрос 7 Определите недопустимый фрагмент кода HTML ниже 1.Hey there! I am just a lonely quiz answer. Will you click me? I am bored!

2.

The sale numbers are in… You ARE a closer, Johnson!

3. Wow!

You're ignoring all the other answers just to look at me?! I AM special! … Wait! Where are you going? What if I AM the answer you've been searching for???!

Вопрос 8 Метатеги передают информацию о браузере на сервер. Истина Ложь Вопрос 9 Без применения каких-либо дополнительных стилей следующий фрагмент кода будет отображаться в браузере как какое количество строк текста? (Предположим, что браузер растянут достаточно широко, чтобы ни одна строка не переносилась). Dear all, I took this really cool book I think it's my favorite book I've EVER taken! Here is the URL for it: about HTML, CSS and JS

Does anyone know how I can give this book 6 out of 5 stars?

Thank you, –Yaakov.... !

Вопрос 10 Используя только HTML, как бы вы удостоверились, что 3 слова в HTML-документе ВСЕГДА появляются вместе в 1 строке, даже если

текст переносится по словам, потому что окно браузера слишком узкое для этой текстовой строки? Невозможно выполнить только с помощью HTML! Поместите &nowrap; перед 1-м словом и после 3-го слова Поместите   после 1-го слова и после 2-го слова (без пробелов) Поместите   перед 1-м словом и после 3-го слова Вопрос 11 Как заставить браузер открывать ссылку в новом окне или вкладке? Укажите несколько специальных метатегов как часть страницы Попросите пользователя щелкнуть ссылку правой кнопкой мыши и выбрать «Открыть в новой вкладке». Включить атрибут target='_blank' как часть тега Включите атрибут target="new" как часть тега Вопрос 12 Несмотря на то, что атрибуты ширины и высоты тега img не требуются, всегда полезно их использовать. Истина Ложь Введение в CSS Мы уже говорили о том, что в Интернете главное – контент. И мы говорили о том, что HTML определяет структуру этого контента. Но, хотя контент и является основой, очень важно и то, как пользователи воспринимают этот контент. И когда дело доходит до реального веб-сайта, одной структуры недостаточно, вы должны оформить свой контент таким образом, чтобы он был приятным и полезным для пользователя. И использование цвета, позиционирования, размера и прочего является частью этого оформления. Каскадные таблицы стилей, или CSS,  – это технология, обеспечивающая возможность стилизации и оформления контента в Интернете.





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





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





Правило CSS состоит из селектора, в данном случае это p, тэг абзаца, и это говорит о том, что это правило должно применяться к содержимому каждого тэга абзаца на всей HTML-странице. За селектором следуют открывающие и закрывающие фигурные скобки. И внутри этих фигурных скобок у нас есть объявление CSS, которое состоит из двух частей, свойства и значения. Имя свойства предопределено спецификацией CSS, и для каждого свойства существует определенное количество предопределенных значений. Каждое свойство отделяется от значения двоеточием и заканчивается точкой с запятой. С технической точки зрения, точка с запятой не является обязательным требованием, но это лучшая практика, и вы должны всегда ее использовать.





Каждое правило CSS может состоять из нескольких объявлений. Например, в этом случае мы указываем, что содержимое тегов абзаца на нашей HTML-странице должно иметь определенный шрифт и определенный размер шрифта.

Теперь, набор этих правил CSS называется таблицей стилей.





В этом HTML-документе у нас есть заголовок h1, пара заголовков h2 и пара абзацев между ними, обозначенные тегом абзаца p. И что мы хотим сделать, так это придать этим элементам индивидуальный стиль. И мы разместим таблицу стилей прямо в разделе заголовка нашего HTML-документа. И в этой таблице мы видим тег абзаца. И мы изменим его цвет на синий, размер шрифта на 20 пикселей и ширину на 200 пикселей, что означает, что он будет занимать область экрана шириной 200 пикселей. Далее для тега h1, мы определяем зеленый цвет и увеличиваем его размер шрифта, и мы также выравниваем его по середине экрана.





Так эта страница выглядит в браузере. И если вы посмотрите на подзаголовок 1, а затем на подзаголовок 2, вы увидите, что они выделены жирным шрифтом и немного больше, чем обычный текст. Откуда взялся этот стиль? Ведь мы не определяли стиль для тега h2. И этот стиль исходит от самого браузера. Каждый браузер поставляется с определенными стилями по умолчанию, которые применяются к различным элементам HTML. Таким образом, во многих случаях наша работа заключается в том, чтобы переопределить эти стили браузеров по умолчанию. Как мы уже говорили, правило CSS состоит из селектора, за которым следуют открывающие и закрывающие фигурные скобки с объявлениями CSS, состоящими из двух частей, свойства и значения. И селекторы CSS используются для определения того, к какому элементу HTML или набору элементов следует применить объявления CSS. Браузер использует свой API-интерфейс для обхода документа и выбора элементов, соответствующих данному селектору. И существует три разных типов селекторов: элемент, класс и идентификатор.





Первый тип селектора – элемент – это просто указание имени элемента. Например, в этом случае селектор p говорит о том, что текст каждого абзаца в нашем HTML-документе должен быть синего цвета. И это объявление никак не влияет на другие элементы, содержащие текст. Например, у нас может быть элемент div, содержащий текст, но на этот текст не повлияет наше правило CSS для абзаца.





Далее идет селектор класса, который указывается точкой и именем класса. В этом случае мы создаем класс blue CSS, который будет окрашивать синим цветом. И селектор класса требует изменения вашего HTML-документа, так как каждый элемент, к которому вы хотите применить этот класс, должен иметь атрибут класса с именем этого класса.





В этом случае у нас есть p, тег абзаца и тег div, и оба имеют атрибут class="blue" и, следовательно, их текстовое содержимое будет окрашено в синий цвет. Обратите внимание, что это совершенно не влияет на другой абзац, не помеченный атрибутом class="blue". И обратите внимание на разницу между тем, как вы определяете класс, и тем, как вы используете класс. Вы всегда определяете класс с точкой перед именем. И между точкой и именем класса не должно быть пробела. Однако, когда вы используете класс, вы не используете точку в его имени, вы просто используете его имя. И последний тип селектора – это селектор id.





Вы указываете селектор идентификатора с помощью значения идентификатора элемента в вашем HTML-документе, которому предшествует знак решетки.





Так, например, если у вас есть элемент div с id="name", а затем вы указываете правило CSS с помощью селектора #name, объявления CSS будут применяться к содержимому элемента div с его значением id name. Селектор идентификатора определяется знаком решетки, за которым следует значение идентификатора в вашем HTML-документе. И опять же, у вас не может быть никакого промежутка между ними. Теперь, чтобы писать более эффективные правила, CSS позволяет нам сгруппировать несколько селекторов в одно правило CSS.





Здесь у нас есть два селектора, сгруппированные вместе, div и также селектор класса blue, так как они оба используют одно и то же объявление CSS. Помимо группировки селекторов существует объединение или комбинирование селекторов. И объединение селекторов – это очень мощная техника, позволяющая более точно выделять элементы документа. Первый способ комбинирования селекторов – это селектор элемента с селектором класса.





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





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





Другой тип комбинации селекторов – это селектор потомков.





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





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

наводит курсор мыши на элемент.





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





Например, селектор ссылок «:link» стилизует не посещенные ссылки. Здесь мы окрашиваем не посещенную ссылку в желтый цвет.





Также мы можем стилизовать посещенную ссылку с помощью селектора «:visited».





Селектор «:hover» используется для выбора и стилизации элементов при наведении на них курсора мыши. И селектор «:hover» можно использовать для любых элементов, а не только для ссылок или кнопок. При использовании селектора «:hover» для ссылок, он должен идти после селекторов «:link» и «:visited» в определении CSS.





Селектор «:active» используется для выбора и стилизации активной ссылки, т.е. ссылки при нажатии на нее. Хотя селектор «:active» можно использовать для всех элементов, а не только для ссылок. При использовании селектора «:active», он должен идти после селектора «:hover» в  определении CSS, что соответствует логики действий пользователя.





Селектор «:nth-child(n)» выбирает каждый элемент, который является n-м дочерним элементом своего родителя. При этом n может быть числом, ключевым словом (четный или нечетный, odd или even) или формулой, например (an + b), где a представляет размер цикла, n – счетчик (начиная с 0), а b – значение смещения. В этом примере, элемент «This is some text.» в первом теге div никак не стилизован, далее такой же элемент во втором теге div выделен красным цветом. В списке содержимое второго элемента выделено зеленым цветом, и содержимое каждого третьего элемента выделено желтым цветом. Теперь, ваш выбор размещения стилей в одном или другом месте не только влияет на возможность повторного использования стилей, но также влияет на то, какие объявления стилей переопределяют другие объявления стилей.





Давайте рассмотрим пример. В этом примере мы указываем в теге style, что каждый h2 в нашем HTML-документе должен иметь темно-бордовый цвет текста. Однако есть и другие места, где вы можете указать стиль CSS.





Например, вы можете указать стиль CSS непосредственно для элемента, указав атрибут style и объявления CSS непосредственно в теге элемента. Объявления стилей будет точно такое же, как и раньше, и они также заканчиваются точкой с запятой, и вы можете указать здесь несколько объявлений, просто завершая их точкой с запятой. Это называется встроенным стилем, и, как вы могли догадаться, это наименее пригодный для повторного использования способ стилизации элементов. Обычно этот способ стилизации используется для быстрого тестирования, чтобы посмотреть, как будет выглядеть стиль. Теперь, что, если у меня есть несколько страниц на моем веб-сайте, и я хочу, чтобы все они выглядели одинаково? Это означает, что указание стилей с помощью тега style мне не поможет. И мне нужен какой-то другой способ указать стили, который является внешним по отношению к HTML-странице.





Для этого мы можем использовать тег с именем link, где мы сообщаем браузеру, что есть таблица стилей и указываем ее местоположение,

используя атрибут href. И внешние таблицы стилей – это просто файлы со списками правил CSS. И здесь нет никаких особых тегов. Как вы можете видеть в этом файле style.css, мы указываем для тела документа, что его цвет фона должен быть серым, а размер шрифта должен составлять 130% от размера шрифта по умолчанию. Реальные веб-сайты почти всегда используют внешние таблицы стилей, что означает, что вы берете все свои стили и помещаете их во внешний файл, а затем связываете его обратно с несколькими HTMLстраницами с помощью тега link. Этот метод не только повторно использует стили CSS, но и способствует единообразному виду всего веб-сайта. Теперь давайте рассмотрим разрешение конфликтов при определении стилей. Само название CSS – это каскадные таблицы стилей. То есть каскадирование – это фундаментальная особенность CSS. Это алгоритм, определяющий, как комбинировать значения свойств из разных источников. И если есть конфликт в стилизации, чтобы понять какое правило CSS выигрывает, нужно понимать этот алгоритм. Алгоритм каскадирования объединяет четыре концепции.





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





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





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





И у специфичности также есть довольно простое правило – выигрывает наиболее конкретная комбинация селекторов. И есть довольно простой метод, который позволяет выяснить, какая комбинация селекторов является более специфичной, чем другие. Вы можете думать о специфичности как о подсчете очков. Комбинация с наибольшим количеством очков побеждает. И эту оценку можно рассчитать, если расположить типы факторов, влияющих на оценку, слева направо, причем слева будет наивысшее значение специфичности. Затем просто возьмите правило CSS и заполните эту табличку. Самое высшее значение специфичности имеет атрибут стиля элемента style. И это происходит, когда вы указываете объявления CSS прямо в элементе, используя атрибут стиля. Нет ничего более конкретного, чем это объявление. Далее идет идентификатор элемента, затем класс или псевдокласс, а затем количество элементов, которые используются в комбинации.





Здесь у первого правила количество баллов 2, а у второго 12 баллов. Поэтому второе правило выигрывает. И есть еще одна концепция, которую мы рассмотрим. И это концепция переопределения всех правил с помощью «!important».





В этом примере все три абзаца получат красный цвет фона, хотя селектор идентификатора и селектор класса имеют более высокую специфичность. Потому что правило «!important» переопределяет свойство background-color в обоих случаях. Правило «!important» говорит что не имеет значение, какая есть специфичность и переопределяет все CSS объявления. Теперь я хочу предупредить вас об использовании этого «!important». Хотя очень заманчиво пропустить понимание всех этих каскадных правил и правил специфичности и просто хлопать «!important» везде, когда что-то не получается, это очень быстро в реальном проекте превратится в кошмар обслуживания, когда вы будете переопределять одно «!important» объявление другим «!important» объявлением, и возникнет гигантский беспорядок. Теперь, давайте поговорим о стилизации текста. Существует множество свойств CSS, влияющих на отображение текста. Мы не будем пытаться охватить каждое из них. Вместо этого мы рассмотрим несколько свойств, которые иллюстрируют концепции, лежащие в их основе.





В этом примере мы создаем класс с именем style, и мы применяем этот класс ко второму абзацу в нашем html-файле. И наша задача состоит в том, чтобы стилизовать второй абзац. И первое, что мы обычно хотим сделать, это указать семейство шрифтов. И здесь указана ссылка на часто используемые шрифты.





Таким образом, семейство шрифтов – это имя свойства font-family.





И значение для семейства шрифтов может варьироваться. То, что вы обычно указываете в семействе шрифтов, – это комбинация шрифтов. И причина, по которой вы указываете не один шрифт, а несколько шрифтов, заключается в том, что, когда вы указываете семейство шрифтов, вы полагаетесь на компьютер пользователя. И возможно, что конкретный шрифт не установлен на компьютере пользователя, поэтому вы указываете несколько вариантов. Свойство font-family должно содержать несколько имен шрифтов в качестве запасных, чтобы обеспечить максимальную совместимость между браузерами и операционными системами. Начните с нужного шрифта и закончите общим семейством, чтобы позволить браузеру выбрать аналогичный шрифт в общем семействе, если другие шрифты недоступны. Названия шрифтов должны быть разделены запятой. И на тот случай, если вы не знаете разницы между Serif и Sans-Serif, скажу, что есть шрифты без засечек и шрифты с засечками – это шрифты, в которых есть не только линии, но и небольшое украшение в конце.





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





Следующее свойство – это вес шрифта.





И вес шрифта можно указать от нормального до жирного. И вы также можете указать вес с помощью числа.

Далее мы можем указать размер шрифта.





Почти каждый браузер имеет размер шрифта по умолчанию 16 пикселей. Не путайте это с точками pt, здесь используются пиксели. Точки pt используются в печати, но не на экране. На экране вы используете пиксели. Пиксели считаются абсолютной единицей измерения размера. Тем не менее, у них есть относительная составляющая. Пиксели привязаны к устройству просмотра. Для устройств с низким DPI или низким количеством точек на дюйм один пиксель соответствует одной точке пикселя устройства на дисплее. Для принтеров и экранов с высоким разрешением один пиксель подразумевает несколько точек пикселей устройства. Дело в том, что устройства с более высоким DPI дадут вам более четкий текст, потому что для каждого пикселя, который он рисует, он фактически рисует несколько точек пикселей на устройстве. При всем при этом пиксели по-прежнему считаются абсолютной единицей измерения. Свойство text-transform управляет преобразованием текста элемента в заглавные или прописные символы.

Другое полезное свойство – text-align, которое позволяет центрировать или выравнивать текст по правому и левому краю. Теперь давайте немного поговорим об относительном размере шрифта. И здесь есть две относительные единицы измерения, это проценты и ems.





Здесь тег body имеет размер 120%. И это означает, что мы хотим взять размер, который браузер предоставляет по умолчанию, и увеличить его на 120%. В большинстве браузеров размер текста по умолчанию составляет 16 пикселей. Таким образом, 120% от 16 пикселей будет чуть больше 19 пикселей.





Здесь размер текста составляет 2em. И это единица измерения, эквивалентная ширине буквы в этом конкретном шрифте, который мы используем. Поначалу это звучит немного запутанно, но суть в том, что это относительный размер. Так как мы установили размер шрифта 120% во всем теле документа, и когда вы комбинируете этот размер шрифта с 2.5em, это говорит о том, что вы хотите увеличить шрифт в два с половиной раза по сравнению со 120%. И наконец размер текста можно задать с помощью единицы vw, что означает «ширину области просмотра» viewport . Viewport – это размер окна браузера и 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw составляет 0,5 см.

Теперь, в HTML каждый элемент считается блоком. Однако этот блок содержит не просто контент.





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





В качестве примера давайте рассмотрим структуру HTML этого документа. Здесь есть тег h1 и тег div с идентификатором box, а внутри этого div есть еще один div с идентификатором content и текстом. И так как div является элементом блочного уровня, он пытается заполнить родительский элемент целиком по ширине. Но если приглядеться, здесь есть некоторое пространство между заголовком и текстом. Давайте откроем инструменты разработчика Chrome и выясним, что это за пространство.





Давайте выберем тег body и посмотрим, что происходит. И мы видим, что тег body имеет отступ около восьми пикселей. Откуда же взялись эти восемь пикселей? И здесь написано таблица стилей пользовательского агента. Это означает, что это сам браузер. Это стили браузера по умолчанию. Мы можем сделать margin 0, и когда мы это сделаем, мы увидим, что теперь наш контент находится на одном уровне с фактическими границами окна браузера. Далее вы можете видеть, что контекст зеленый. Но мы не видим фон блока, в котором на самом деле находится контент, потому что мы бы видели что-то синее на заднем плане. И это потому, что внутренний блок содержимого полностью закрывает внешний, потому что они имеют одинаковый размер. Они оба пытаются заполнить своего родителя, который в данном случае является тегом body. Поэтому давайте установим некоторые отступы внешнего блока.





Давайте установим padding 10 пикселей сверху, 10 пикселей справа, 10 пикселей внизу и 10 пикселей слева.





И вуаля, теперь мы увидели синий фон. Также мы добавили этому блоку черную границу с толщиной 5 пикселей и размеры самого блока 300 пикселей на 50 пикселей, а также отступ сверху от заголовка 50 пикселей. Кроме того, мы добавили свойство overflow. Свойство overflow указывает, следует ли обрезать содержимое или добавить полосы прокрутки, когда содержимое элемента слишком велико и не помещается в указанной области. И свойство overflow имеет следующие значения: visible – по умолчанию. Переполнение контента в блоке не отсекается, и содержимое отображается за пределами блока. hidden – переполнение контента обрезается, и остальное содержимое будет невидимым. scroll – переполнение контента обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого. auto – аналогично прокрутке, но добавляет полосы прокрутки только при необходимости.





В результате мы можем увидеть, что наш блок имеет размеры не 300 пикселей на 50 пикселей, а здесь добавляется отступ, ширина границы и

поле. Так что, когда вы устанавливаете размеры блока, нужно учитывать и все остальные свойства. Здесь на самом деле мы устанавливаем не ширину блока, а ширину содержимого.





В CSS 3 есть такое свойство как box-sizing со значением border-box. Свойство CSS box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента. Без свойства CSS box-sizing, по умолчанию ширина и высота элемента вычисляются следующим образом: ширина + отступ + граница = фактическая ширина элемента высота + отступ + граница = фактическая высота элемента





С этим значением border-box свойства box-sizing все будет включено и размер нашего блока станет 300 пикселей на 50 пикселей. И если мы изменим значение этого свойства box-sizing обратно на content-box, которое используется по умолчанию, наш блок вернется к его первоначальному размеру. Теперь, если вы увидели, для свойства box-sizing мы использовали селектор звездочка. Этот селектор используется, чтобы не указывать свойство для каждого элемента во всем HTML, и, если вы хотите указать это свойство один раз, а затем наследовать его везде. Вы могли бы использовать тег body, так как body – это элемент верхнего уровня, и он должен наследоваться везде. Но в нашем случае box-sizing – это одно из тех свойств CSS, которое не наследуется. Вы не можете установить его для родительского элемента, а затем ожидать, что дочерние элементы унаследуют это свойство. Поэтому мы используем селектор звездочка. Разница между звездочкой и размещением некоторого свойства в родительском элементе, заключается в том, что селектор звездочка говорит – я не прошу вас что-либо наследовать, а я говорю выбрать каждый элемент и применить к нему указанное свойство.





Теперь давайте более подробно разберемся с полями margin. Давайте посмотрим на эту схему. Здесь у нас есть два элемента и два поля рядом друг с другом. И в этом случае правило такое – поля слева направо суммируются. Итак, если у меня есть правое поле 40 пикселей и левое поле 50 пикселей, тогда совокупное поле будет составлять 90 пикселей. И это довольно просто, и это именно то, что вы ожидаете. Но что произойдет, если у вас один элемент расположен поверх другого элемента.





Допустим, это два div блока, и для каждого из них указано поле margin. Для верхнего блока указано поле 30 пикселей, а для нижнего блока указано поле 20 пикселей. Будет ли суммарное поле 50 пикселей? И ответ – не будет, ответ – в этом случае выигрывает большее поле margin. Таким образом, фактическое расстояние между границей одного элемента и границей другого элемента в этом случае будет равно 30 пикселям. Теперь, до сих пор мы использовали свойство background только для установки цвета фона. Но с помощью этого свойства мы можем сделать гораздо больше.





Давайте рассмотрим этот пример. Здесь у нас есть элемент div с идентификатором bg. И стиль этого идентификатора bg указывает ширину 500 пикселей и высоту 500 пикселей. Здесь же мы устанавливаем синий цвет фона этого элемента. Теперь, что, если нам нужно изображение в качестве фона элемента? Для этого есть свойство, которое называется background. И здесь мы указываем URL-адрес файла изображения в круглых скобках. И обратите внимание, что URL-адрес, который вы указываете, является относительным адресом, связанным с CSS. URL-адрес должен быть связан с файлом CSS, или, если быть точным с технической точки зрения, URL-адрес должен быть связан с тем, как файл CSS отображается в браузере. Поэтому, если вы поместите файл CSS в отдельную папку, URL-адрес изменится. Также в свойстве background мы указываем no-repeat, чтобы изображение не повторялось, пытаясь заполнить весь фон элемента, и указываем расположение изображения – top center, размещая его вверху в центре. Также обратите внимание, что мы используем свойство backgroundcolor и свойство background одновременно. И вы можете видеть, что

изображение выигрывает с точки зрения приоритета. Оно находится на переднем плане фона поверх цвета. И если мы укажем свойство background после свойства backgroundcolor, синий цвет исчезнет совсем, так как свойство background переопределит свойство background-color. Теперь давайте обсудим такое свойство CSS как float. Свойство float используется для позиционирования и форматирования содержимого, например, с помощью этого свойства изображение будет плавать слева от текста в контейнере. Свойство float может иметь одно из следующих значений: left – элемент перемещается слева от своего контейнера. right – элемент перемещается справа от своего контейнера. none – элемент не плавает (будет отображаться только там, где он встречается в тексте), по умолчанию. inherit – элемент наследует значение своего родителя. В самом простом случае свойство float можно использовать для размещения текста вокруг изображений.





В качестве иллюстрации давайте рассмотрим этот пример.

Здесь у нас есть контейнер div с четырьмя тегами абзаца p и тегом раздела section с некоторым текстом. В CSS мы определили фон тега div как светло-голубой цвет, и каждый тег абзаца оформлен так, чтобы иметь ширину 50 пикселей и высоту 50 пикселей, и мы определили границу абзаца в один пиксель. И для того, чтобы различать каждый блок абзаца, мы определили каждому из них свой цвет фона. Теперь, что произойдет, если мы укажем только для первого блока абзаца float: left.





Когда вы указываете для элемента свойство float, браузер убирает его из обычного потока документа. При этом плавающий элемент будет смещен влево или вправо, пока не коснется края своего контейнера или другого плавающего элемента. И именно поэтому второй абзац у нас переместился на исходное место первого, потому что с точки зрения обычного потока документа это место стало пустым. А первый абзац прижался к левому краю контейнера div. Второе, на что следует обратить внимание, это то, что по умолчанию между блоками абзаца есть поле margin 16 пикселей. И именно поэтому

мы видим второй абзац. Если мы определим для абзаца margin:0px, мы увидим следующее.





Здесь первый абзац закроет собой второй абзац.





Далее для второго абзаца мы указываем float: right. Соответственно он убирается из потока документа и прижимается к правому краю контейнера div. А третий абзац перемещается в начало контейнера div.

Поэтому для третьего абзаца мы говорим clear: both. И этим мы говорим, что браузер должен возобновить обычный поток документов.

Если теперь мы укажем для четвертого абзаца float: left, мы увидим следующее.





Здесь раздел с текстом переместится на место четвертого абзаца. А если для раздела с текстом мы укажем clear: left, мы увидим как текст вернется на свое место.





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







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

Здесь мы говорим, что ширина абзаца должна составлять 50% содержащего его контейнера div. А div – это элемент блочного уровня, поэтому он пытается заполнить всю ширину содержащего его элемента, то есть тела документа. Таким образом, мы говорим, что абзац должен занимать 50% всего окна просмотра. После этого второй абзац будет все еще внизу. Почему это происходит? Причина заключается в том, что мы все еще используем значение boxsizing по умолчанию, то есть content-box. Ширина окна составляет 709 пикселей, и мы говорим, что ширина абзаца должна быть 50%, о есть 355 пикселей. Но это ширина содержимого. А к содержимому прибавляется отступ padding по умолчанию 10 пикселей справа и слева. Таким образом два абзаца не помещаются на одной строке, и второй абзац переносится на вторую строку. И выход в том, чтобы указать box-sizing со значением border-box, когда ширина и высота включают в себя значения полей и границ. Тогда мы получим макет с двумя столбцами. И если мы начнем сжимать браузер, макет с двумя столбцами все равно останется, так как мы указали ширину столбца в процентах, независимо от ширины браузера. Помимо плавающего позиционирования элементов, существуют еще две схемы – относительное и абсолютное позиционирование, которые указываются CSS свойством position. Эти схемы позиционирования позволяют указать точное смещение для целевого элемента. Но сначала поговорим о статическом позиционировании. Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано, но его можно также явно указать через CSS-свойство position: static. Такая запись встречается редко и используется для переопределения других значений position. И если вы попытаетесь применить смещения к элементам, для которых свойство position установлено как static, эти смещения просто проигнорируются, поэтому статическое позиционирование еще называется не позиционированием. Теперь, давайте рассмотрим относительное позиционирование.





Относительное позиционирование сдвигает элемент относительно его обычного положения. Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom. Когда вы применяете относительное позиционирование к элементу, этот элемент смещается относительно своего положения в обычном потоке документа. При этом элемент не удаляется из потока документа и его исходное место резервируется и сохраняется. Таким образом, верхний, нижний, левый и правый края элемента становятся границами, от которых вы смещаете элемент. В этом примере мы смещаем элемент сверху и слева на 50 пикселей. Теперь это может немного сбивать с толку, так как мы говорим, что слева 50 пикселей, но тем не менее мы перемещаем элемент вправо, и говорим сверху 50 пикселей, но смещаем элемент вниз. Здесь нужно думать о границах элемента – смещение от левой границы 50 пикселей и смещение от верхней границы 50 пикселей. Также обратите внимание, что в остальном документе ничего не изменилось. Исходное пространство для этого элемента по-прежнему остается, и первоначально размещенные элементы вокруг этого

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





Теперь, давайте обсудим абсолютное позиционирование.





При абсолютном позиционировании элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было, то есть элемент удаляется из обычного потока документа. И координаты top/bottom/left/right для нового местоположения элемента отсчитываются от ближайшего позиционированного родителя, то есть родителя с позиционированием, отличным от static. Если такого родителя нет, тогда относительно документа. При этом ширина элемента с position: absolute устанавливается по содержимому, и элемент получает свойство display:block. При абсолютном позиционировании какой-то из родителей, предков должен иметь свое позиционирование, отличное от статического, и тогда абсолютное позиционирование начнет работать. По умолчанию элемент является единственным элементом, для которого изначально задано нестатическое позиционирование, а именно относительное позиционирование. В этом примере элемент 1 переместился в нижний угол, а элемент 2 занял его место. Элемент два переместился на место элемента один, так как первый элемент больше не является частью потока документа.





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





И обратите внимание, что мы переместили весь контейнер div вниз на 60 пикселей, и при этом все содержащиеся в нем элементы переместились вниз вместе с ним. Помимо рассмотренных схем позиционирования, свойство position может иметь значения fixed и sticky. Элемент с position: fixed; позиционируется относительно области просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. При этом свойства top, right, bottom и left используются для позиционирования элемента.





В этом примере блок div фиксируется в нижней части страницы, и он будет оставаться там несмотря на прокрутку страницы. При этом элемент с фиксированной позицией выпадает из обычного потока документа и остальные элементы размещаются, не обращая на него внимания. Элемент с position: sticky; позиционируется в зависимости от положения прокрутки пользователя. Элемент с position: sticky; переключается между относительным и фиксированным позиционированием в зависимости от положения прокрутки.





В этом примере блок div прилипает к верхней части страницы (top: 0), когда вы достигаете его позиции, прокручивая страницу.





Internet Explorer не поддерживает позиционирование sticky. Для Safari требуется указать префикс -webkit-. Вы также должны указать по крайней мере одно из свойств top, right, bottom или left, чтобы позиционирование sticky работало. Вопросы Вопрос 1 Таблица стилей – это набор правил CSS. Да Нет Вопрос 2 Определите допустимые правила CSS (может быть одно или несколько).





Вопрос 3 CSS может иметь только 1 пару свойство/значение для каждого правила CSS. Да Нет Вопрос 4 Правило CSS может применяться только к одному селектору одновременно. Да Нет Вопрос 5 Правило CSS должно быть определено отдельно для каждого селектора. Да Нет Вопрос 6 Учитывая следующий HTML-код:





Какое из следующих правил CSS делает текст первого тега

синим, но НЕ делает текст второго тега

синим?





Вопрос 7 Учитывая следующий HTML-код:





Какое из следующих правил CSS делает текст первого тега

синим, но НЕ делает текст второго тега

синим?





Вопрос 8 По умолчанию блочный элемент пытается занять столько горизонтального пространства, сколько позволяет содержащий его элемент. Да Нет Вопрос 9 Учитывая следующий код:





Какие из приведенных ниже утверждений верны? Цвет фона слов «Hello» и «World» – синий. Оба фона будут занимать всю ширину окна браузера. Фон элемента div будет охватывать всю ширину браузера. Фон элемента span будет охватывать всю ширину браузера. Текст "Мир!" появится в отдельной строке под текстом «Привет». Вопрос 10 Учитывая следующий HTML-код:





Какое правило CSS ниже установит размер шрифта текста «Div 5» равным 24 пикселям, когда пользователь наведет указатель мыши на ЛЮБУЮ область внутри элемента «a»?





Вопрос 11 Учитывая следующий код:





Какого цвета будут слова «У меня кризис цветовой идентичности!»? Синий Какой цвет по умолчанию назначит браузер, поскольку мы не указали цвет тега Вопрос 12 Учитывая следующий код:





Какого цвета будут слова "У меня опять кризис цветовой идентичности! Помогите!" ? Синий Зеленый Вопрос 13 Учитывая следующий HTML-код:





Какой размер в пикселях текста «Насколько я велик?», если пользователь НЕ увеличивал масштаб в окне браузера? 90 пикселей 10 пикселей 1/3 пикселя Вопрос 14 Предполагая, что других стилей не существует, сколько пикселей будет иметь тег div в ширину со следующими стилями:





140px 160px 200px 100px

Вопрос 15 Предполагая, что других стилей не существует, сколько пикселей будет иметь тег div в ширину со следующими стилями:





140px 160px 200px 100px Вопрос 16 Правое поле одного элемента, которое касается левого поля другого элемента, создает комбинированное поле, равное сумме обоих полей. Да Нет Вопрос 17 Учитывая следующий HTML-код:





Каким будет поле между двумя элементами «div»? 10 пикселей 20 пикселей

30 пикселей 0 Вопрос 18 Учитывая следующий HTML-код:





Что вы увидите внутри элемента div? Какое-то изображение поверх синего фона Синий фон, но нет изображения Синий фон будет закрывать изображение Просто изображение Вопрос 19 Плавающие элементы выводятся из обычного потока документов Да Нет Вопрос 20 Следующий код:





говорит, что ни один из элементов раздела не должен позволять чемулибо плавать справа от него. Да Нет Вопрос 21 Указывая position: relative; элемент выводится из обычного потока документов. Да Нет Вопрос 22

По умолчанию для ВСЕХ HTML-элементов свойство position установлено как статическое. Да Нет Введение в адаптивный дизайн Одним из наиболее очевидных различий между просмотром веб-сайта в настольном веб браузере и на мобильном телефоне является размер экрана. И с помощью CSS есть возможность создавать разные макеты веб-страниц из одного и того же HTML кода. Такая возможность CSS как медиа-запросы позволяет группировать стили для конкретных устройств на основе определенных критериев. Например, вы можете настроить CSS для устройства, исходя из его ширины, высоты или ориентации, например альбомной или книжной. Таким образом, наиболее распространенный способ настроить стиль и макет страницы – это предоставить разные стили для разных размеров экрана пользовательских устройств.





Медиа-запрос начинается с ключевого слова @media, за ним следует медиа-функция и фигурные скобки. В этих фигурных скобках указаны стили, это похоже на таблицу стилей внутри таблицы стилей. Каждая медиа-функция при просмотре страницы на конкретном устройстве дает либо true, либо false. И вы можете объединить несколько медиа-функций с помощью логических операторов.

Если медиа-функция разрешается в true, применяется стиль в фигурных скобках. В этом примере при просмотре на устройстве с шириной экрана до 767 пикселей, цвет текста абзаца будет синим. При написании медиа-запросов убедитесь, что вы закрываете фигурные скобки для медиа-запроса в целом, а затем отдельно для каждого правила стиля.





Ключевое слово not инвертирует смысл всего медиа-запроса. Ключевое слово only не позволяет старым браузерам, которые не поддерживают медиа-запросы, применять указанные стили. Это не влияет на современные браузеры. Ключевое слово and объединяет функцию мультимедиа с типом мультимедиа или другими функциями мультимедиа. Существуют следующие медиа типы или типы носителей. all по умолчанию – используется для всех типов устройств. print – используется для принтеров screen – используется для экранов компьютеров, планшетов, смартфонов и т. д.

speech – используется для программ чтения с экрана, которые «читают» страницу вслух. Все эти типы являются необязательными. Однако, если вы используете not или only, вы также должны указать тип носителя.





И существует довольно много медиа-функций. Вы можете указать максимальную ширину, минимальную ширину, высоту, вы можете настроить документ в зависимости от ориентации устройства, вы можете настроить CSS только для экранов, или только для печати. И несмотря на то, что доступно довольно много медиа-функций, наиболее распространенными из них являются max-width и min-width, так как наиболее распространённой настройкой является настройка страниц для настольного и мобильного браузеров.





Кроме того, медиа-функции можно комбинировать с помощью логических операторов. Одним из наиболее распространенных логических операторов является оператор and. В этом примере указаны стили для любого устройства, которое попадает в диапазон ширины от 768 до 991 пикселя. Если ширина устройства будет меньше или больше, стили, указанные в этом медиазапросе, применяться не будут. Еще один способ объединить медиа-функции – поместить между ними запятую, которая будет эквивалентна оператору ИЛИ. В этом примере стиль определен для любого устройства, ширина которого не превышает 767 пикселей, или для любого устройства шириной не менее 992 пикселей.





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





Давайте посмотрим на структуру этого html документа. В этом документе есть два абзаца. Первый имеет идентификатор p1, а второй – идентификатор p2. И что касается стилей для этих абзацев, здесь у нас есть некоторые базовые стили, которые применяются к этим абзацам еще до того, как могут применяться медиа-запросы. Для абзаца мы даем ему сплошную черную границу в 1 пиксель и задаем нижнее поле в 15 пикселей. И затем для абзацев мы присваиваем им определенный цвет и задаем размеры. Далее первый медиа-запрос будет ориентироваться только на большие устройства с шириной не менее 1200 пикселей. Здесь мы изменим размеры абзацев. Далее мы напишем еще один медиа-запрос, но на этот раз для устройств среднего размера, от 992 пикселей до 1199 пикселей. И здесь мы также настроим размеры абзацев. И, очевидно, что это не имеет никакого смысла с точки зрения красивого макета, это просто пример.





В инструментах разработчика Chrome, вы можете нажать на значок мобильного телефона и посмотреть как выглядит документ на различных устройствах, перетаскивая границу и используя настройки вверху. Адаптивный дизайн для сайтов появился из-за необходимости иметь дело со взрывным ростом мобильных устройств, на которых начали просматривать веб-страницы даже чаще, чем на настольных браузерах. И это произошло примерно в 2013, 2014 годах. Итак, на какие устройства мы хотим ориентироваться и какие устройства мы хотим поддерживать? И ответ – все устройства. Вы не можете позволить себе игнорировать любое из них. Существует огромное множество этих устройств, и игнорирование некоторых из них приведет к игнорированию части ваших пользователей. Так как же адаптивный дизайн помогает нам в этом? Сначала давайте разберемся с тем, что такое адаптивный дизайн или что же такое адаптивный веб-сайт. Адаптивный веб-сайт – это сайт, который разработан так, чтобы адаптировать макет сайта к среде просмотра, с использованием гибких сеток на основе пропорций, гибких изображений и медиа-запросов CSS3.

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





Адаптивный дизайн можно сравнить с водой. И когда вы наливаете воду в чашку, она становится чашкой, когда вы наливаете воду в бутылку, она становится бутылкой и так далее. Идея довольно простая – контент должен быть как вода. Когда вы добавляете его в любое устройство, он все равно должен отображаться, и он должен быть таким же, и передаваемая информация должна быть той же. И единственное отличие будет – это форма этого контента. Таким образом, макет сайта должен адаптироваться к размеру устройства. На практике это означает, что сайт должен подстраиваться под ширину устройства. При этом количество контента или его визуальная подача могут измениться. Например, для сайта ресторана номер телефона, который раньше отображался где-то на сайте, не привлекая к себе слишком много внимания в настольной версии этого сайта, теперь находится в центре и является самым заметным элементом на странице мобильного телефона. Теперь, есть ли альтернативы адаптивному дизайну?

Как альтернатива вы могли иметь высокотехнологичную службу, которая бы определяла пользовательский агент, другими словами, тип используемого браузера, и выясняла, находится ли он на мобильном устройстве или на настольном устройстве, а затем на основе этой информации предоставляла либо обычную настольную версию вебсайта, либо предоставляла клиенту мобильную версию этого же вебсайта. И раньше так и делалось до того, как адаптивный дизайн вышел на первый план. Но проблема здесь в том, что с таким подходом есть несколько проблем. Во-первых, у вас есть высокий риск случайного переключения между приложениями, потому что теперь, если говорить технически, здесь есть два разных приложения, на которых работает веб-сайт. Одно приложение – это мобильная версия, другое приложение десктопное. Далее, мобильные устройства сильно отличаются по размеру. Так что сложно сделать мобильный сайт, который удовлетворит каждого клиента. Поэтому, в настоящее время, из-за этих проблем разработчики держатся подальше от этого подхода. Теперь, основная часть адаптивного дизайна – это, очевидно, макет.





И наиболее распространенный адаптивный макет – это адаптивный макет сетки с 12 столбцами, и это то, что использует Twitter и почти каждый современный адаптивный фреймворк. И причина, по которой используется число 12, заключается в множителях числа 12. Так как 12 можно без остатка разделить на 1, 2, 3, 4, 6 и, очевидно на 12, а это значит, что мы можем разделить страницу на разделы, которые равномерно разделены.





Так, например, у нас может быть содержимое, которое разделено по три столбца, что в сумме составляет те же 12 столбцов. Также вы можете разделить содержимое по 6 столбцов или по 4 столбца. Исходя из того, что ширина окна браузера составляет 100%, ширина одного столбца в этой сетке из 12 столбцов будет 100%, деленные на 12. И это получается около 8,33%. А три столбца – это 25% от 12 столбцов. И 6 столбцов становятся 50% от 12 столбцов, 4 столбца становятся 33,33%. И, очевидно, что мы не ограничены только одной сеткой из 12 столбцов. У нас, конечно, могут быть вложенные сетки.





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





HTML код макета представляет собой блок div с классом row со вложенными блоками div с классами col-lg-3 и col-md-6.





И с помощью CSS стилей мы кодируем простой адаптивный фреймворк. Для класса row мы определяем ширину в 100%. И далее для классов col-lg-х, которые будут предназначены для настольного браузера, мы последовательно, в порядке увеличения ширины столбца, определяем его ширину в процентах от сетки из 12 столбцов.





Для среднего устройства мы определяем другой набор классов colmd-х. Таким образом, для нашего макета мы говорим, что на большом устройстве ширина вложенного блока div будет 25%, а на среднем устройстве – 50%. Поэтому четыре столбца на большом устройстве свернутся в два столбца при уменьшении ширины браузера. Здесь мы можем дать одному и тому же элементу два разных класса, и мы знаем, что будет применяться только один из них, так как наши медиа-запросы не перекрываются. Таким образом, оба класса никогда не будут существовать одновременно. Теперь, что произойдет, когда размер браузера станет меньше 950 пикселей? Тогда ни один из этих классов не будет существовать для браузера. И что тогда будет? В этот момент наши div больше не будут плавать, потому что плавание float определено только внутри медиа-запросов, и это означает, что они будут вести себя так же, как обычные элементы уровня блока, и они будут автоматически размещаться один поверх другого.





И наш макет свернется в один столбец.





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

Как нам сообщить браузеру, что на самом деле это адаптивный вебсайт, и мы хотим при уменьшении устройства тем не менее оставаться на приемлемом уровне масштабирования?





Мы делаем это, указав специальный метатег. И имя этого метатега – viewport. Область просмотра viewport – это видимая пользователем область веб-страницы. И HTML5 представил метод, позволяющий веб-дизайнерам управлять областью просмотра с помощью тега meta name="viewport". Вы должны включать этот метатег на все свои веб-страницы. Это дает браузеру инструкции о том, как управлять размерами и масштабированием страницы. Параметр width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства, которая зависит от устройства. А параметр initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. Теперь с этим метатегом браузер будет рассматривать ширину устройства как ширину области просмотра и не будет пытаться

уменьшать масштаб. Далее мы познакомимся с CSS фреймворком Bootstrap, который является одним из самых популярных фреймворков CSS, и который создан инженерами Twitter.





Теперь, что такое Bootstrap? Bootstrap – это самая популярная среда HTML, CSS и JavaScript для разработки адаптивных мобильных проектов в Интернете. Bootstrap состоит в основном из CSS кода, который предопределяет множество классов CSS. И так как CSS должен ориентироваться на определенную структуру HTML, Bootstrap требует, чтобы на вашей HTML-странице была реализована определенная структура HTML. При этом Bootstrap не вторгается в ваш HTML-код и не заставляет вас писать какие-то сумасшедшие HTML-конструкции. Он просто просит вас добавить где нужно дополнительный div и присвоить ему определенный класс, чтобы определенный CSS Bootstrap класс применялся должным образом. Bootstrap также предоставляет и JavaScript-фреймворк, основанный на API-интерфейсах JQuery и архитектуре плагинов, который позволяет

вставлять различные Bootstrap плагины, улучшающие сайт.





Здесь вы видите страницу, содержащую ссылки на набор файлов Bootstrap. Откуда они берутся? Давайте откроем веб-страницу Bootstrap, которую можно найти по адресу getbootstrap.com, и посмотрим на страницу «Начало работы».





И здесь мы видим целую кучу разных вариантов, но самый простой – выбрать загрузку Bootstrap.





Этот код уже скомпилирован, и вы можете просто нажать «Загрузить».

Когда вы загрузите, у вас будет две папки css и js. И если вы откроете папку css, вы увидите, что здесь находится файл bootstrap.css и файл bootstrap.min.css – это просто другая версия файла bootstrap.css. Это уменьшенная версия, что означает, что здесь удалили все пробелы и переносы строк, потому что они на самом деле не имеют никакого значения. И в папке js снова есть два разных файла bootstrap.js и bootstrap.min.js – уменьшенная версия, в которой удалены пробелы, переименованы некоторые переменные, чтобы они не были такими длинными, и так далее. Теперь, до Bootstrap 5 требовалась также загрузка jQuery, так как bootstrap.js зависел от jQuery. Bootstrap 5 уже разработан для использования без jQuery, но вы можете использовать все компоненты Bootstrap и с jQuery.





jQuery – это библиотека JavaScript, позволяющая программистам быстро и просто добавлять улучшения в дизайн и поведение вебстраниц. Теперь, одним из центральных компонентов Bootstrap, который позволяет разработчикам легко создавать адаптивные макеты, является

система сеток. Поэтому давайте посмотрим, как это работает.





Во-первых, здесь мы использовали для загрузки Bootstrap CDNссылки. Сеть доставки содержимого (Content Delivery Network или Content Distribution Network, CDN) – географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию содержимого конечным пользователям в сети Интернет.





И CDN-ссылки позволяют включать готовые CSS и JavaScript Bootstrap файлы без необходимости их скачивания.





Далее давайте посмотрим, что представляет собой структура сетки Bootstrap. Прежде всего, сетка Bootstrap всегда должна находиться внутри контейнера. Для этого есть несколько вариантов. Во-первых, вы можете использовать класс .container или класс .container-fluid. Класс .containerfluid растягивает макет на всю ширину браузера и обеспечивает отступы вокруг сетки. Класс .container устанавливает ширину макета в зависимости от ширины устройства.





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





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





Теперь перейдем к столбцам.





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

далее сколько столбцов сетки занимает элемент. Идентификатор ширины экрана – это md для среднего устройства, ld для большого устройства и так далее. И вы можете посмотреть, что это значит, в документации Bootstrap. Так, например, lg определяется как 1200 пикселей и выше. И это означает, что столбцы будут схлопываться при меньшей ширине браузера. После идентификатора указывается число – сколько столбцов должен охватывать элемент. И это значение от 1 до 12, так как Bootstrap представляет собой сетку из 12 столбцов. Вопросы Вопрос 1 Учитывая следующий медиа-запрос:





Стили в этом медиа-запросе будут применяться, если ширина окна браузера составляет 991 пикселей. Да Нет Вопрос 2 Обычный подход к использованию медиа-запросов заключается в предоставлении некоторых базовых стилей, а затем их изменении и/или добавлении в каждом медиа-запросе. Да Нет Вопрос 3 Большинство адаптивных фреймворков используют макет с 12 столбцами. Да Нет Вопрос 4 Наличие макета с 12 столбцами означает, что 1 ячейка в этой сетке имеет ширину: 8,33% (100/12) Да

Нет Вопрос 5 Следующий метатег:





Сообщает браузеру, что он должен рассматривать ширину устройства как ширину экрана и устанавливает уровень масштабирования 1, т. е. 100%. Да Нет Вопрос 6 Twitter Bootstrap – один из самых популярных CSS-фреймворков на сегодняшний день. Да Нет Вопрос 7 Класс Bootstrap col-md-6 означает, что элемент, к которому он применяется, должен растягиваться до 50% экрана браузера и сворачиваться/складываться ниже определенной ширины экрана браузера (на это указывает идентификатор 'md'). Да Нет Вопрос 8 Bootstrap Grid требует, чтобы мы использовали только элементы div для каждой ячейки сетки. Да Нет Вопрос 9 Bootstrap Grid должен быть определен внутри некоторого родительского элемента, класс которого установлен либо как .container, либо как .container-fluid. Да Нет Пример

Давайте попробуем с нуля создать настоящий веб-сайт. И мы сделаем сайт для китайского ресторана. Но для начала давайте рассмотрим некоторые правила и основные идеи работы с клиентами, так как сайты разрабатываются для клиентов. И первая концепция заключается в том, что большинство клиентов понятия не имеют, чего они хотят. И дело не в том, что они невежественны. На самом деле, они очень умны в своем собственном бизнесе. Но они, конечно, обычно понятия не имеют о том, что они хотят видеть на веб-сайте и как все это работает. Поэтому здесь ваша работа – задавать вопросы. И это должны быть правильные вопросы, которые помогут клиенту понять, чего он хочет. И отличный способ сделать это – показать клиенту несколько вебсайтов аналогичных предприятий, и посмотреть, нравится ли ему это? Или что не нравится. Так вы сможете понять, что они на самом деле хотят видеть на своем веб-сайте. Теперь, как правило, каждый клиент хочет разместить на своей странице много информации о своем бизнесе. Многое из этого очень важно, и они скажут вам, что это важно, и это должно быть выделено жирным шрифтом. И это довольно обычный подход клиентов. Единственная проблема в том, что, когда все важно, на самом деле ничего не важно. И ваша работа заключается в том, чтобы побудить клиента следовать очень простому правилу меньше – больше. Чем меньше информации вы разместите, тем большее влияние эта информация окажет. Итак, суть в том, что вы должны поощрять своего клиента не втискивать всю информацию на сайт. А вы должны попытаться помочь клиенту определить самую важную информацию, ту самую информацию, которая имеет наибольшую ценность. Еще одно важное правило: убедитесь, что клиент назначил одного человека, ответственного за принятие решений. Если вы этого не сделаете, произойдет то, что один представитель клиента скажет вам, что на самом деле мы хотим именно этого, а другой представитель клиента скажет вам, что мы хотим чего-то другого здесь. И ограничьте количество ревизий заранее. Оговорите именно то количество правок, которое вы готовы сделать. Потому что очевидно,

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





И для разработки макета сайта можно использовать инструмент под названием Balsamiq (balsamiq.com). Этот инструмент позволяет очень быстро создавать макеты веб-сайтов для различных пользовательских интерфейсов.







Здесь показан пример такого макета сайта для китайского ресторана, разработанного в Balsamiq. И только после того, как у вас есть макет можно перейти к кодированию сайта.





И для начала мы должны создать шаблон страницы, в который мы будем добавлять элементы, в соответствии с макетом дизайна. Здесь у нас есть метатег viewport, который говорит что это адаптивный макет, и есть ссылки на библиотеки CSS и Javascript фремворка Bootstrap (https://getbootstrap.com/docs/5.2/gettingstarted/introduction/). Также мы добавили ссылки на созданные нами файлы styles.css и script.js, в которые мы можем добавлять уже наш код.





И в файле styles.css мы указали общий шрифт как семейство шрифтов Oxygen библиотеки Google Fonts. Но по умолчанию на компьютере нет Oxygen в качестве шрифта. Так как же нам получить этот шрифт? И мы можем получить этот шрифт на странице https://fonts.google.com/specimen/Oxygen как ссылку.





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





И здесь мы используем семантический тег HTML5 , который представляет вводный контент, обычно группу вводных или навигационных средств. Этот тег может содержать другие элементызаголовки, а также логотип, форму поиска, имя автора и другие элементы. С помощью этого тега мы добавим панель навигации. И это будет сделано с помощью элемента nav с идентификатором header-nav. Далее мы увидим, зачем нам это нужно. И мы дадим элементу nav несколько классов, которые нам предоставляет Bootstrap, navbar и navbar-default. Как правило, используя классы Bootstrap, мы сначала указываем базовый класс, а затем подкласс, который использует базовый класс и плюс что-то к нему добавляет. Стандартная панель навигации Bootstrap создается с помощью классов navbar и navbar-default, обеспечивая расширение или сворачивание панели в зависимости от размера экрана. В Bootstrap 5 стандартная панель навигации создается с помощью класса navbar, за которым следует адаптивный сворачивающийся класс navbar-expand-xxl|xl|lg|md|sm. Теперь, давайте посмотрим на следующий элемент container. Элемент контейнера – это то, с чем мы уже хорошо знакомы, и помните, что существует два типа контейнеров – container-fluid, который простирается до краев браузера. И у него есть небольшой отступ с обеих сторон, около 15 пикселей. И еще есть обычный контейнер container, который меняет свою ширину в зависимости от ширины браузера, как бы ограничивать себя, чтобы быть немного ближе к середине. И причина, по которой мы используем container, заключается в том, что на нашем веб-сайте не так много информации. Поэтому, если бы мы позволили контенту растягиваться до ширины браузера, этот веб-сайт выглядел бы немного странно. Также обратите внимание на то, что тег div с классом контейнера находится внутри элемента nav. И причина этого в том, что этот желтый цвет является фоном нашего заголовка, элемента nav. И это то, что мы действительно хотим растянуть до краев браузера. Тогда контент контейнера будет на этом фоне, но при этом ограничиваясь серединой экрана.





В файле styles.css мы определим желтый цвета фона элемента nav, и мы сделаем радиус границы элемента равным нулю, так как по умолчанию углы элемента закругленные.





Заголовок панели навигации navbar-header – это архитектурный класс для панели навигации Bootstrap, который сам по себе не выполняет функцию, он используется чтобы обернуть логотип и элемент navbarbrand, это своего рода класс-оболочка. Здесь мы размещаем логотип в левом верхнем углу этого элемента заголовка. И мы окружаем логотип элементом а, чтобы сам логотип стал кликабельным. И этот логотип будет не чем иным, как элементом div с идентификатором logo-img, для которого мы определим в CSS фоновое изображение. В CSS у нас будет фоновый URL-адрес background, который будет указывать на папку с изображениями, и изображение логотипа restaurant-logo_large.png, и мы указываем, чтобы это изображение не повторялось. Также мы указываем размеры и отступы элемента и соответственно логотипа. И здесь мы также используем классы pull-left, visible-md и visible-lg, чтобы переместить логотип на левую сторону навигационной панели и убрать видимость логотипа на маленьких экранах. Далее мы используем класс navbar-brand, чтобы показать название ресторана на левой стороне навигационной панели. Следующий элемент здесь – это маленькая звездочка, кошерный знак с текстом Kosher Certified. В CSS для элемента navbar-brand мы указываем сдвиг сверху, чтобы выровнять название относительно логотипа, и для текста Kosher Certified мы указываем vertical-align: middle, чтобы выровнять текст относительно звездочки.





Теперь давайте перейдем к созданию меню сайта. И начнем мы с создания меню мобильной версии сайта, и это меню будет отображаться в виде кнопки, которая позволит открыть навигацию и выбрать один из пунктов меню. Здесь мы используем классы navbar-toggle и collapsed. Класс navbartoggle создает кнопку, а класс collapsed показывает кнопку свернутой в начальном состоянии. В Bootstrap 5 чтобы создать сворачиваемую панель навигации, используйте кнопку с class="navbar-toggler", data-bs-toggle="collapse" и data-bs-target="#thetarget". На самом деле здесь используется JavaScript плагин сворачивания Bootstrap для отображения и скрытия контента, и кнопка используется в качестве триггера. И плагин сворачивания использует несколько классов для выполнения своей работы. Это класс collapse, который скрывает содержимое, и вы должны добавить к элементу data-toggle="collapse" и  data-target, чтобы автоматически назначить управление сворачиваемыми элементами. Атрибут data-target принимает селектор CSS, к которому применяется свертывание. Атрибут aria-expanded передает текущее состояние сворачиваемого элемента программам чтения с экрана и аналогичным вспомогательным

технологиям. Если кнопка свернута по умолчанию, этот атрибут должен иметь значение aria-expanded="false".





Теперь, давайте добавим в кнопку само меню. Для этого мы используем контейнер div с id="collapsable-nav", идентификатором значение которого соответствует атрибуту datatarget="#collapsable-nav" кнопки, и с классами collapse и navbar-collapse.





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





И мы дадим списку несколько классов – nav, navbar-nav и navbar-right. Классы nav и navbar-nav обеспечивают поддержку раскрывающихся списков. И это классы, которые превращают неупорядоченный список в меню. Класс navbar-right очень похож на класс pull-right, за исключением того, что этот класс специально предназначен для панели навигации. И этот класс navbar-right перемещает панель навигации на правую сторону. Далее мы перечисляем элементы li меню. И каждый элемент меню будет окружен элементом а, указывающим на некоторую страницу внутри сайта. И здесь классы glyphicon представляют иконочный шрифт. Иконочный шрифт – это, по сути, векторное изображение, которое может вести себя так же, как и шрифт. Другими словами, вы можете изменить его размер, вы можете раскрасить его, придать ему цвет, использовать его так же, как вы используете шрифт, за исключением того, что обычно это какая-то векторная форма. В нашем случае glyphicon и glyphicon-cutlery дадут нам что-то вроде вилки и ножа, и это будет элемент меню.





Класс hidden-xs устраняет перенос строки между значком и текстом элемента меню на маленьких экранах. Теперь, где брать эти glyphicon? До Bootstrap 5 значки поставлялись по умолчанию и могли использоваться без дополнительных загрузок. С Bootstrap 5 значки были выделены в отдельную библиотеку (https://icons.getbootstrap.com/), которая требует своей установки.





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





И у нас будет соответствующий медиа-запрос для среднего устройства с диапазоном от 992 до 1199 пикселей. Здесь мы меняем URL-адрес фонового изображения на другой файл, меньший по размеру. И еще давайте улучшим меню для мобильной версии. На маленьком экране у нас звездочка и текст заходят на раскрывающееся меню, и значки выглядят слишком большими по сравнению с пунктами меню.





Здесь с помощью селектора #collapsable-nav a мы делаем текст меню больше, а с помощью селектора #collapsable-nav a span делаем значок меньше. Также, используя класс navbar-brand, мы убираем звездочку и текст с меню, уменьшая отступ сверху и регулируя высоту блока. И с помощью селекторов call-btn и xs-deliver мы добавим отдельную кнопку с телефоном на маленьком экране. Закончив с шапкой и меню сайта, теперь мы готовы приступить к созданию основного контента страницы.





И с чего мы начнем, так это с этой картины ресторана, интерьера ресторана. Однако, прежде чем мы начнем, нам нужно определить некоторый элемент, который будет контейнером для остального контента веб-сайта. Вспомните, что мы поместили в контейнер заголовок и выровняли его по краям контейнера. Поэтому нам нужен элемент верхнего уровня для основного контента, чтобы ему был назначен класс контейнера container.





Давайте добавим элемент div и назначим ему класс container. И добавим в контейнер еще один элемент с классом jumbotron. Класс jumbotron представляет Bootstrap компонент для демонстрации ключевого маркетингового содержимого на сайте. Этот компонент отображается в виде серого прямоугольника с закругленными углами, и он также увеличивает размер шрифта текста внутри него.





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





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









Для этого мы в контейнер с основным контентом добавим строку row с плитками home-tiles. И в эту строку добавим столбцы с классами colmd-4, col-sm-6 и col-xs-12. Таким образом столбцы будут располагаться по три на большом и среднем экране col-md-4, по два на меньшем экране col-sm-6, и по одному на маленьком экране col-xs-12. На большом экране будет три столбца из-за размеров фоновых изображений плиток.





При этом для маленьких экранов мы будем уменьшать ширину плиток с помощью медиа запросов.





Здесь свойство margin: 0  auto выравнивает блок div по центру. Когда вы указали ширину блока, к которому вы применили margin: 0  auto, объект будет располагаться по центру внутри своего родительского контейнера. Указание auto в качестве второго параметра, по сути, говорит браузеру автоматически определять левое и правое поля, что он и делает, устанавливая их одинаково. Это гарантирует, что левое и правое поля будут иметь одинаковый размер. Первый параметр 0 указывает, что верхнее и нижнее поля будут равны 0. И нужно отметить, что этот прием работает только в блочных элементах. При нажатии на плитки мы будем переходить на другие страницы сайта с помощью тега . И обратите внимание, что мы помещаем фоновое изображение плитки по центру background-position: center и при этом для содержимого плитки указываем overflow: hidden – обрезать содержимое при переполнении. Поэтому на маленьких экранах хотя плитка и уменьшится, но основное блюдо меню и специального предложения все еще будет находиться в центре, и мы по-прежнему будем его видеть, и это устраняет необходимость для предоставления изображений разного размера для разных размеров экрана. Что касается карты, здесь можно использовать интерфейс Google Maps Embed API для генерации карты.





Для генерации карты нужно зарегистрировать проект в Google Cloud Console и получить ключ API Key.





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





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





И для нижнего колонтитула в HTML есть семантический тег , который содержит «подвал» сайта или раздел, в котором может располагаться имя автора, дата документа, контактная и правовая информация. И для подвала мы даем класс panel-footer.





Здесь класс панели нижнего колонтитула устанавливает фон и отступы. Внутри тега подвала у нас будет блок div, который является контейнером. Напомню, что в основном разделе у нас также был контейнер, и в самом верху, в шапке сайта, у нас тоже был контейнер. И, конечно же, поскольку мы собираемся разделить подвал на три столбца, нам тоже понадобится контейнер, чтобы разместить следующий div класса строк row, который будет содержать три раздела section класса col-sm-4. Таким образом, у нас есть три столбца на экране, и мы хотим, чтобы они складывались, как только мы перейдем на маленький экран. Поэтому мы даем разделам класс col-sm-4, который делит строку на три столбца до маленького экрана.





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





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





И первое, что мы добавим в основной контент этой новой страницы, это заголовок h2. Не h1, поскольку h1 – это название сайта китайское бистро Дэвида Чу, а h2 – вторичный заголовок категории меню с Bootstrap классом text-center – выровненный по центру текст на всех размерах окна просмотра.

Далее мы разместим плитки или категории меню в сетке. Это будет раздел-строка с классом row, и это будут блоки div в строке с классами col-md-3 col-sm-4 col-xs-6 col-xxs-12 – размещение по 4, 3, 2 и 1 столбцу на разных экранах, начиная с самого большого.





Сама плитка имеет пользовательский класс category-tile, и внутри него у нас будет изображение 200 на 200 пикселей с красивой рамкой и текстом посередине и тенью блока при наведении на него мышки. Теперь мы должны закодировать еще одну страницу сайта, на которую пользователь перейдет, нажав на какую-либо плитку категории меню.





Эта страница опять будет иметь ту же шапку и подвал, но свой основной контент.





Основной контент на этой странице будет состоять из заголовка, расположенного по центру class="text-center", и двух сеток, вложенных одна в другую. Внешняя сетка будет по два столбца , и каждое блюдо в столбце будет иметь сетку также по два столбца и   – изображение и описание блюда меню. При переходе к маленькому экрану все эти столбцы в сетках свернутся в один столбец, сначала внешняя сетка, а затем и внутренняя сетка. И обратите внимание, что изображения имеют Bootstrap класс class="img-responsive" (в Bootstrap 5 класс img-fluid), с которым изображения автоматически подстраиваются под размер экрана. Также, мы добавляем горизонтальную линию , которая видима только на маленьком экране с помощью класса visiblexs.





Что касается CSS для этой страницы, здесь мы для ячейки внешней сетки делаем внизу отступ 25px, стилизуем горизонтальную линию так, чтобы у нее был отступ справа и слева, немного увеличиваем шрифт для цены и выравниваем ее по правому краю. И для изображения мы даем ему красивую темно-бордовую границу в два пикселя.

Содержимое описания мы немного сдвигаем вправо и стилизуем шрифт описания курсивом.





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





И если мы добавим, например, длинное описание в первую ячейку, наша сетка нарушится во второй строке, и третья ячейка окажется в первой строке, а не во второй. Так как же нам решить эту проблему? И для этого есть несколько способов. Во-первых, вы можете ограничить это текстовое поле. Другими словами, вы могли бы сказать, что разрешено использовать только определенное количество символов, или они будут обрезаны. Это довольно жесткий подход, и довольно сложно объяснить владельцу бизнеса, что его описания не могут быть длиннее. Несмотря на то, что на самом деле это хорошая идея сделать описания короткими, так как никто не хочет читать очень длинные описания. Или другой способ, мы можем исправить эту проблему макета с помощью кода. Теперь, почему эта проблема с макетом вообще возникает? Ну, как вы помните, сетка в Bootstrap основана на плавающих элементах. И третий элемент должен был переместиться влево во вторую строку. Но что происходит, когда элемент перемещается влево, а что-то перед ним становится слишком длинным. Теперь он не может вписаться в этот ряд, потому что здесь есть что-то выступающее. Поэтому мы можем решить эту проблему обнулив плавание после каждого ряда. И мы можем это сделать, добавляя после каждого второго

элемента блок , который видим только на больших и средних экранах, когда у нас есть строки с двумя столбцами в сетке. Результат проделанной нами работы с кодом сайта можно скачать по адресу https://github.com/novts/web-development. Вопросы Вопрос 1 При запуске проекта веб-сайта лучше как можно скорее перейти к кодированию веб-сайта. После того, как вы сгенерируете представления в HTML, покажите их клиенту, чтобы узнать, одобрят ли они.



Да Нет Вопрос 2 Макет веб-сайта должен быть точной копией того, что вы собираетесь создавать в HTML/CSS. Да Нет Вопрос 3 Класс 'container-fluid' растягивается на всю ширину окна браузера (за вычетом некоторых полей) и автоматически регулирует свою ширину при изменении ширины браузера. Да Нет Вопрос 4 Учитывая следующий фрагмент кода HTML:





Что должно быть в поле «id» меню, чтобы при нажатии «кнопки» отображать меню?





Вопрос 5 Один из способов загружать изображение разного размера в зависимости от ширины браузера – использовать CSS-свойство background-image и загружать разные URL-адреса в разных медиазапросах. Да Нет Вопрос 6 Учитывая следующий фрагмент кода HTML:







Сколько столбцов он создаст, когда экран браузера будет шириной 1000 пикселей (т. е. «md») 3, 4, 6, 2 Вопрос 7 Какой класс Bootstrap вы бы использовали для отображения элемента на странице ТОЛЬКО в том случае, если ширина окна браузера была меньше 768 пикселей (очень маленькая или xs)? visible-xs show-xs xs-show-true display Введение в JavaScript Первое, о чем мы должны здесь поговорить, это куда мы можем включать свой код JavaScript? Где его писать? Во-первых, вы можете разместить тег скрипта script внутри раздела заголовка.





Здесь мы присваиваем переменной х строку "Hello World!", и затем в теле документа, опять же в теге script, мы выводим значение переменной х в консоль JavaScript. Теперь, как увидеть эту консоль JavaScript? Для этого мы откроем страницу в браузере и откроем инструменты разработчика.





В инструментах разработчика откроем вкладку Консоль и увидим вывод console.log(x) в виде строки "Hello World!". Таким образом, между открывающим тегом script и закрывающим тегом script вы можете написать свой JavaScript код. Другое место, где мы можем написать код JavaScript, это внешний файл.





И внешний файл также указывается тегом script, за исключением того, что у этого тега есть атрибут источника src, где вы можете указать путь к внешнему файлу. И в этом примере это будет файл script.js в папке js. Теперь обратите внимание, что всякий раз, когда вы указываете внешний файл JavaScript, вам все равно нужно указывать закрывающий тег script. Тег script – это один из тех тегов, который всегда требует закрывающего тега, независимо от того, есть ли какой-либо код внутри тега или нет. И, как и CSS в HTML, код JavaScript выполняется последовательно. Это означает, что все, что находится внутри файла script.js, будет выполнено первым. А все, что находится внутри следующего тега script, будет выполнено вторым. Таким образом, вы можете включить внешний файл JavaScript, и эффект при этом будет таким, как если бы вы вырезали и вставили содержимое этого файла прямо в то место, где вы объявили его на своей html-странице. Мы обсудили, где писать код JavaScript, и теперь давайте поговорим о самом JavaScript. И начнем мы с определения переменных и функций.





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





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





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





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





При этом аргументы определяются без ключевого слова var. На самом деле, если вы поместите ключевое слово var в определение аргумента функции, это будет синтаксической ошибкой. Если вы хотите, чтобы ваша функция возвращала какое-то значение, вы используете ключевое слово return, за которым следует любое значение, которое вы хотите вернуть. Но если за ключевым словом return не следует значение, вы сигнализируете движку JavaScript, что он должен завершить функцию и выйти из нее, ничего не возвращая. Способ, которым вы передаете аргументы в функцию JavaScript, тоже уникален.





В первой строке этого примера у нас есть функция сравнения compare, и она определена здесь с аргументами x и y. Во второй строке мы вызываем функцию сравнения и передаем ей два аргумента, 4 и 5. И результат выполнения этой функции сохраняется в переменной «a». В третьей строке мы выполняем функцию сравнения, но нигде не сохраняем результат, и это совершенно законно. И так как JavaScript – это язык с динамической типизацией, мы можем передать «a» в качестве второго аргумента в виде строки, а не числа. Это может не иметь смысла с точки зрения логики функции, но это, безусловно, совершенно законный синтаксис. Последняя строка демонстрирует еще одно правило о функциях JavaScript – все аргументы, определенные в функции JavaScript, являются необязательными. И вы можете вызвать ту же самую функцию сравнения вообще без каких-либо аргументов, и все это будет совершенно законно. Опять же, это может не иметь смысла с точки зрения логики выполнения функции сравнения, но синтаксис и такой вызов этой функции совершенно легальны. Теперь, каждая функция или переменная живут в определенной области.







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

Каждый контекст выполнения имеет следующее. Во-первых, у него есть собственная среда выполнения – здесь хранятся вновь определенные функции и переменные. И контекст также получает специальный объект this, о котором мы поговорим позже. И что наиболее важно, контекст получает ссылку на его внешнее окружение. Имеется в виду среда выполнения, в которой определена эта конкретная функция. И глобальная область видимости не имеет внешней среды просто потому, что она самая внешняя. Теперь вот как работает цепочка областей действия. Ссылка на переменную, не определенную переменную, будет сначала искаться в ее текущей области. Если она не найдена, будет искаться внешняя ссылка на переменную. Если она и там не найдена, будет выполняться поиск внешней ссылки и т. д. И это будет продолжаться до глобальной области видимости. Если переменная не найдена в глобальной области видимости, она будет неопределенной undefined. И переменная undefined означает, что она просто не найдена. В примере на слайде первая строка в глобальной области видимости определяет переменную x и присваивает переменной x значение 2, а вторая строка выполняет функцию A. Сама функция A определена в глобальной области видимости и имеет собственную переменную x, для которой установлено значение 5. В пределах функции A вы вызываете функцию B. Функция B также определена в глобальной области видимости. И все, что она делает, это просто выводит в консоль значение x. Что теперь будет выведено в консоль? Будет ли это x = 5, потому что B вызывается внутри функции A? Или это будет x=2 из глобальной области видимости? И ответ заключается в том, что результатом будет x = 2 из глобальной области видимости. Почему это так? Несмотря на то, что B вызывается внутри A, а A имеет свой собственный x, на самом деле важно определить, откуда x происходит, и это внешняя ссылка. Функция B определена в глобальной области видимости. Таким образом, внешняя ссылка функции B является глобальной областью видимости, а не функцией A. Это означает, что не имеет значения, где выполняется конкретная функция. Что касается определения области видимости переменной, то

здесь важно, где эта функция физически определена. Функция B физически определена внутри глобальной области видимости. Поэтому ссылка на x внутри функции B сначала будет искаться внутри функции B. Если она не найдена, будет использоваться внешняя ссылка, и внешняя ссылка является глобальной областью видимости.





Теперь, давайте рассмотрим пример кода. И первое, что мы здесь делаем, это определяем переменную сообщения в глобальной области видимости и показываем это сообщение в консоли JavaScript. Теперь, где хранится эта переменная сообщения? Как мы уже обсуждали, каждое выполнение программы получает свой собственный контекст выполнения. Таким образом, значение этой переменной находится внутри глобального контекста выполнения, который представлен специальным объектом, на который можно сослаться с помощью this. На самом деле, this – это ключевое слово в JavaScript которое содержит в себе объект (контекст) выполняемого кода.





И если мы напечатаем this в консоли и нажмем Enter, мы увидим, что this здесь относится к окну Window.





И если вы раскроете объект Window, вы увидите, что он имеет множество различных пар имя-значение. И одно из них – сообщение: «в глобальном масштабе». Таким образом, переменная сообщения фактически привязана к объекту this, который является нашим глобальным контекстом выполнения. Вернемся к коду и посмотрим, что далее мы определили функцию и сохранили ее в переменной «a». И эта функция определяет свою собственную переменную сообщения, значение которой находится внутри «a». Это видно в консоли a: message = inside a, так как эта переменная сообщения находится внутри области действия функции а. Теперь, что произойдет, если мы вызовем функцию «b» из «a», которую мы определили внутри функции «a». Как видите, сообщение «b» находится внутри «a» b: message = inside a, так как переменная сообщения все еще находится внутри области действия функции а. Подведем предварительный итог. Переменные в JavaScript динамически типизированы, то есть их тип определяется во время выполнения. Когда вы выполняете функцию, она создает свою собственную область видимости. И важно помнить, что весь код JavaScript выполняется в некотором контексте выполнения, и в каждом контексте выполнения есть внешняя среда переменных. А цепочка областей видимости используется для извлечения переменных из внешней среды, которые не найдены в текущей области видимости. JavaScript является однопоточным языком, то есть одновременно может выполняться только одна задача. И интерпретатор JavaScript всегда начинает выполнять код с глобального контекста, в браузере это объект Window. С этого момента у самой первой вызванной функции контекстом будет глобальный объект Window. Мы видели, как переменная определяется с помощью ключевого слова var, но в JavaScript есть также ключевое слово let. Директива let объявляет переменную с блочной областью видимости.





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





И еще, значение переменной let, в отличии от var, никогда не хранится в глобальном объекте, это всегда переменная блока. Теперь, когда мы обсудили переменные, давайте поговорим о встроенных типах JavaScript. И, прежде всего, что такое тип? Тип – это определенная структура данных. Каждый язык программирования определяет некоторые встроенные типы, и JavaScript ничем не отличается. В JavaScript есть восемь встроенных типов, семь примитивных (string, number, boolean, null, undefined, symbol, bigint) и один объектный тип. Так что же такое объект в JavaScript? В JavaScript объект – это не что иное, как набор пар имя/значение.





У вас может быть одна пара "имя-значение" или несколько пар "имязначение". И значение не обязательно должно быть одним значением, это может быть еще один вложенный объект. А что такое примитивы? Примитивный тип – это тип, представляющий одно неизменное значение. Что это значит? Одно значение означает, что это не объект, так как объект представляет собой набор пар имя-значение. В примитиве нет никакой пары. Что значит неизменный? Неизменяемый означает, что как только значение установлено, его нельзя изменить. Это означает, что после установки значение переменной становится доступным только для чтения. Конечно, вы можете создать другое значение на основе существующего значения, но объем памяти, выделенный для первого значения, не изменится. Вместо этого вы создаете новое пространство памяти для нового значения. То есть, в переменную, хранящую примитивное значение, можно записать что-то новое. Но при этом не происходит изменения предыдущего примитивного числового значения.





Логическое значение в JavaScript может иметь только два значения: true или false. И true и false – зарезервированные ключевые слова в языке JavaScript. Другой тип называется undefined. Неопределенный тип данных означает, что для этой конкретной переменной этого типа никогда не устанавливалось значение. Это значение undefined, которое получает каждая переменная, когда движок JavaScript устанавливает переменную в памяти, когда она определена, но ей еще не было присвоено какоелибо значение. Еще один встроенный тип языка JavaScript, это null. Null означает отсутствие значения. И отсутствие значения в отличие от неопределенного означает отсутствие определения. null является определённым значением отсутствия, тогда как undefined обозначает неопределённость значения. Другой тип – это число number. И number является единственным числовым типом в JavaScript, и оно всегда представлено как 64-битное число с плавающей запятой двойной точности. Другими словами, в JavaScript нет целочисленного типа. Целые числа в JavaScript – это просто подмножество двойных значений, а не отдельный тип данных. Другим типом данных являются строки string, и строка в JavaScript очень похожа на тип строки в других языках в том смысле, что это последовательность символов, используемая для представления текста, и в JavaScript вы можете определять строки, используя одинарные или двойные кавычки, без разницы. bigInt это встроенный тип, который предоставляет способ представлять целые числа больше наибольшего числа, которое JavaScript может представить с number примитивом. symbol представляет собой уникальный идентификатор. Символы гарантированно уникальны, и символы позволяют создавать свойства объектов, к которым нельзя нечаянно обратиться и перезаписать их из других частей программы. Теперь давайте рассмотрим пример.







Здесь мы определили переменную х, а затем вывели ее прямо в консоль. И, как мы видим, значение переменной х не определено. И причина, по которой значение не определено, заключается в том, что оно никогда не устанавливалось. Поэтому, если в следующей строке мы напишем х=5, значение будет равно пяти, и в консоли будет напечатано x has been defined. Здесь оператор if говорит – если х не определено, тогда печатаем х не определено, иначе печатаем х определено. Далее мы поговорим об общеупотребительных языковых конструкциях JavaScript.





И первое, с чего мы начнем, – это конкатенация строк. Как и многие другие языки, JavaScript позволяет на лету объединять строки с помощью простого оператора сложения +. Так, например, здесь мы объявили строку со значением Hello. И в следующей строке мы объединяем эту строку с другой строкой с пробелом и словом World.





Теперь о математических операторах. Математические операторы просты в понимании, и если вы выполняли какие-либо математические операции на других языках, то здесь особой разницы нет. На самом деле, позвольте мне пока прокомментировать вторую строку. В JavaScript есть операторы плюс, минус, оператор умножения и оператор деления. И здесь применимы те же самые правила, которые применяются в других языках и вообще в математике. Так, например, в JavaScript также действует приоритет скобок. Здесь, мы выполняем сложение 5 + 4, и это будет выполнено до деления на 3 из-за скобок. В следующей строке мы пишем undefined / 5. И когда мы это выполним, мы получим NaN. Теперь, что такое NaN? NaN – это специальный символ, обозначающий не число. Далее мы определяем функцию test1, которая принимает аргумент a. И, если мы вызовем эту функцию test1 и не передадим a, что же произойдет? И вы увидите, что мы снова получим NaN, не число.





Теперь, перейдем к теме под названием равенство. Здесь мы определяем переменную x = 4 и также определяем переменную y = 4. И обратите внимание, что мы определяем их только одним ключевым словом var, ставя запятую между определениями переменных, и это вполне допустимый синтаксис. В следующей строке у нас есть оператор if. И что мы здесь делаем, так это сравниваем x и y, и мы сравниваем их с помощью оператора двойного равенства ==. Теперь, одна из самых распространенных ошибок заключается в том, что вместо двойного равенства == пишут x = y. При этом это выражение возьмет значение y, поместит его в x и использует результат в качестве значения, чтобы оценить, истинно оно или нет. Но мы хотим сравнить x и y, и поэтому нужно использовать двойное равенство ==. В следующем блоке мы меняем тип x. x теперь больше не 4 как число, а x здесь как строка. Так что же произойдет, если мы сравним их сейчас? Очевидно, что строка не может быть равна числу. Но мы увидим в консоли сообщение «x='4' is equal to y=4» И то, что здесь происходит, называется приведением типов. И приведение типов просто означает, что язык автоматически преобразует что-то из одного типа в другой тип на лету. Поэтому, когда JavaScript

пытается оценить это равенство, он преобразует один из типов в тот же тип, что и другая переменная, и только затем сравнивает значения. И если вы не хотите, чтобы JavaScript автоматически преобразовывал типы при попытке оценить равенство, вы используете строгое равенство ===. Так что теперь, если мы напишем x === y, JavaScript сначала посмотрит, являются ли эти x и y, одним и тем же типом. А если нет, то далее больше не будет пытаться их сравнивать. И мы увидим в консоли сообщение «Strict: x='4' is NOT equal to y=4», так как здесь выполнится блок else.





Давайте продолжим и поговорим о том, что JavaScript считает логическим значением true и что JavaScript считает логическим значением false. И здесь мы будем говорить об операторе if. Но на самом деле мы собираемся перечислить все, что оператор if считает истинным, и все, что оператор if считает ложным, или наоборот. В этом примере, в первом операторе if перечислено все, что оператор if считает ложным. Прежде всего, он будет считать, что ключевое слово

false является ложным. Далее идет двойная вертикальная черта, и это является оператором or (или). Теперь, как работает оператор or – если что-то оценивается как true с левой стороны, он больше не проверяет, что будет с правой стороны. И так как у нас все с левой стороны ложно, этот оператор будет оценивать все написанные здесь выражения. Значение null также является ложным в JavaScript. И undefined – ключевое слово, которое в JavaScript также приводится к значению false. Далее, это пустая строка, и это также является ложным. И NAN, не число, будет ложным. И так как все эти выражения ложны, это означает, что эта строка никогда не будет выполнена, и выполнение кода перейдет к предложению else, и будет напечатано "All false". Теперь, что истинно в JavaScript? Давайте перейдем к следующему оператору if. И здесь ключевое слово true оценивается как истинное в JavaScript. После ключевого слова true вы видите два амперсанда. А два амперсанда означают логический оператор and (и). И логический оператор and возвращает истину только в том случае, если оба элемента слева и справа верны. Здесь, так как у нас непустая строка, это будет оценено как true. Затем мы пишем число 1, которое является числом, а не 0. И все, что не равно нулю, также оценивается как истина. И если вы думаете, что -1 будет оцениваться как false, это не так. На самом деле -1 также оценивается как true. Любое число, отличное от нуля, будет оценено как истинное. Далее мы пишем строку false, но поскольку это непустая строка, она также будет оценена как истина. В результате в консоли мы увидим сообщение «All true».





Далее давайте обсудим, как правильно использовать фигурные скобки. Всякий раз, когда вы говорите с программистами об их предпочтениях, должны ли фигурные скобки для функции или какойлибо другой языковой конструкции быть на той же строке, или они должны быть на следующей строке, вы включаетесь в довольно большую религиозную войну. Но в JavaScript для этого на самом деле существует синтаксически верная практика. В этом примере у нас есть две функции – функция a и функция b, и мы выполняем сначала функцию a, а затем выполняем функцию b. И функция a следует стилю, в котором фигурные скобки всегда ставятся на новую строку. Итак, функция a начинает с фигурных скобок на новой строке и возвращает объект. И мы поговорим об объектах немного позже. Таким образом, функция а возвращает объект, а затем помещает фигурную скобку на новую строку. Функция b делает то же самое, за исключением того, что она следует стилю, в котором открывающая фигурная скобка помещается в ту же строку, что и объявление функции, и в ту же строку, что и оператор return. Теперь давайте выполним функцию a, а затем выполним функцию b. И посмотрим, что это нам даст.

В результате в консоли мы увидим undefined Object name: "Yaakov" Значение функции a не определено. И причина, по которой значение функции а не определено, заключается в том, что движок JavaScript просматривает оператор return, ничего не видит после него и ставит точку с запятой сразу после него. Таким образом, все что делает эта функция – начинает выполняться и немедленно возвращает, не возвращая никакого значения. Кстати, несмотря на то, что точки с запятой в конце операторов необязательны в JavaScript, рекомендуется всегда их там ставить. С функцией b все нормально, и она возвращает объект с парой «имязначение». Так что второй стиль для фигурных скобок синтаксически правильный.





Далее давайте обсудим цикл for. И какой язык может быть без цикла for? В этом примере цикл for сначала определяет переменную sum

суммы как 0, а затем выполняет цикл от 0 до девяти и суммирует все промежуточные значения. Затем он выводит сумму в консоль. Давайте рассмотрим этот цикл for. И, как и во многих языках, цикл for состоит из трех частей. Во-первых, это часть, где происходит инициализация переменной счетчика. Вторая часть – это условие, которое движок JavaScript будет проверять, следует ли запустить цикл снова. И третья часть – это эли инкремент счетчика цикла, или его декремент. Здесь мы объявляем переменную i равной 0. Это будет наша отправная точка. Кстати, если эта переменная i уже была объявлена в этой области видимости один раз, ее повторное объявление с помощью var приведет к синтаксической ошибке. Итак, этот цикл for начнется с i = 0, и будет продолжаться до тех пор, пока i