Пришло время сделать перерыв и осмыслить то, что мы узнали до сих пор. В настоящее время мы познакомились со многими основными концепциями необходимых для создания веб-страниц.
Мы начали с понимания того, как создаются сайты с помощью простого текста, который описывает как работают отдельные части и сравнили это с блоками, положенными друг на друга. В этой аналогии мы обнаружили что блоки соответствуют HTML-тегам. Все теги предопределены и их описание, использование и взаимоотношения с другими элементами стандартизированы организацией W3C. К примеру, если нам нужен абзац текста, то мы используем блок <р>. Если нам нужна статья, используем блок <article>. Если мы имеем дело с заголовками, то используем иерархию <h1>, <h2>, <h3>, <h4>, <h5> или <h6>, в зависимости от контекста. Мы знаем что весь список тегов можно найти в спецификации HTML.
Мы обнаружили, что теги могут быть вложены друг в друга. Например, статья для нашей страницы состоит из заголовка, изображения и абзацев. Эти элементы были обозначены как <header>, <h1>, <figure> и <p>, которые затем были вложены в «родительский» тег <article>. В HTML мы пытаемся думать иерархически. Мы строим большие блоки с меньшими блоками и всегда ставим наиболее важные блоки выше в коде, чем менее важные.
Затем мы обнаружили, что сайты только на одном HTML визуально смотрятся непривлекательно. С помощью CSS мы узнали, что можно нацелиться на теги и украсить их с помощью специальных селекторов. Мы знаем, что если мы хотим получить «все абзацы в <article>», то наш селектор должен быть написан с желаемыми свойствами и значениями внутри фигурных скобок.
article p {}
Кроме того, мы узнали про классы — полезный компонент CSS. Благодаря классам мы можем модифицировать теги, что более надежно, так как мы не всегда должны обращаться к CSS и вносить изменения при смене HTML. Каждый тег в HTML может содержать атрибут class, имена классов могут быть любыми выбранными, но они должны описывать функцию, которую играют в документе. Например, в пресс-релизе в HTML мы можем написать:
<article class="news">...</article>
Код CSS должен отражать эти классы:
.news {}
Таким образом, мы узнали наиболее важные основы HTML и CSS. При создании веб-страниц всегда разделяем контент на более мелкие части и определяем функции элементов. Мы стараемся быть как можно более конкретными даже для самого маленького элемента, умеем верстать и описывать такие вещи, как меню, статьи, заголовки, даты, абзацы, цитаты и фотографии.
Всегда помните, что HTML это слой данных, а CSS — слой представления. Это значит, что HTML хранит информацию, описанную с помощью подходящих тегов, тогда как CSS визуализирует эти данные, добавляя цвета, шрифты, границы и др.
В этот момент вы, вероятно, озадачились вопросом, как можно опубликовать страницу в Интернете, так чтобы ваши друзья могли её увидеть. Если быть точнее, как получилось, что после ввода functionite.com в адресной строке браузера вы на самом деле видите сайт? Это просто. Для начала вам нужно купить домен, который будет виртуальным адресом вашего собственного сайта. В приведённом выше примере я должен был зарегистрировать functionite.com. Есть много компаний, которые упрощают этот процесс. Всё, что вам нужно знать — это уникальное доменное имя, которое будет вести на ваш сайт. После того как вы получите уникальный идентификатор, по которому ваш сайт будет доступен, необходим веб-сервер, куда вы загрузите сайт целиком. Все изображения, CSS, HTML и другие файлы должны быть загружены на сервер, который на самом деле является специальным компьютером подключенным к Интернету, что делает ваш сайт доступным из любой точки в мире. Опять же, бизнес веб-серверов это огромный рынок и вы обязательно найдёте приличную компанию и сможете заказать место на сервере. Также есть компании, которые предлагают простой вариант, так что вы можете сразу купить домен и доступ к веб-серверу.