Наступает день, когда вы хотите создать свой собственный веб-сайт, возможно, чтобы расширить свое цифровое присутствие или позволить другим легче найти вашу работу.
У вас есть стандартные конструкторы сайтов без кода, такие как Wix, Squarespace и сотни других. Но что, если вам нужна полная творческая свобода?
Что делать, если подходящего шаблона нет или вы просто хотите добавить причудливый фон параллакса, который не поддерживает используемый вами конструктор?
Использование конструктора веб-сайтов для создания вашего первого веб-сайта имеет смысл.
Но если вы действительно хотите ошеломить людей персонализированным веб-сайтом, который полностью соответствует вашему бренду, вы можете создать собственный статический веб-сайт с нуля, используя HTML и CSS.
Зачем мне это изучать?
Есть много причин, по которым вы можете захотеть приложить дополнительные усилия для написания веб-сайта с нуля, а не использовать конструктор веб-сайтов без кода, даже если они находятся на подъеме:
- HTML появляется везде, знание того, как его читать/писать, может быть полезным
- Это помогает расширить ваши знания в качестве разработчика
- Это дает вам полную творческую свободу; если вы можете придумать макет, имея достаточно времени и терпения, вы можете заставить его работать так, как * вы * хотите на своем веб-сайте!
Что такое HTML?
HTML расшифровывается как «язык гипертекстовой разметки», но сводится к тому, что он является строительным блоком того, как ваш сайт будет выглядеть для других.
HTML-документы состоят из множества «элементов» на странице для таких вещей, как текст, изображения, разделители и т. д. Элементы могут иметь внутри себя другие элементы, создавая большие фрагменты страницы и, в конечном итоге, контент в целом.
HTML — это язык, основанный на тегах, что означает, что элементы будут заключены в угловые скобки, и вам потребуется начальный тег и конечный тег для большинства элементов, которые у вас есть. Все, что находится внутри тегов, появится внутри этого элемента:
```html
<тело>
Это какой-то текст
Итак, в этом случае у нас есть документ HTML с телом, а внутри тела находится тег p (абзац), куда мы можем добавить текст.
Существует множество различных «тегов» для различных сценариев, таких как перенос текста в теге <b> в полужирный текст и <div> для разделения страницы, и это лишь несколько примеров. Чуть позже мы рассмотрим более подробно, как использовать определенные теги.
Что такое CSS?
Если вы думаете о создании веб-сайта, как о строительстве дома: вы можете думать о HTML как о кирпичах, штукатурке, фундаменте для вашего дома, а CSS как о слое краски, который ложится на дом и на стены.
«Каскадные таблицы стилей» (CSS) — это простой механизм добавления стилей (например, шрифтов, цветов, интервалов) в веб-документы.
CSS работает вместе с HTML для стилизации элементов на странице, и вы можете применить сотни преобразований стилей, таких как настройка ширины/высоты элемента, изменение его цвета и т. д.
Это достигается за счет «выбора» элемента в документе для стиля. Селекторы CSS позволяют нам применять определенный набор «правил» к элементу, чтобы описать, как этот тип элемента должен отображаться на странице.
Если мы хотим, чтобы «фон» страницы был «черным», а не «белым», мы можем изменить это, нацелившись на «тело» документа:
``CSS
тело {
фон: черный;
Любые свойства, которые мы хотим применить, будут заключены в фигурные скобки, и каждое из «правил» будет начинаться с элемента, который мы хотели бы выбрать.
Как мы можем приступить к созданию простого веб-сайта?
Откройте нужный текстовый редактор или IDE
Никогда не требуется использовать интегрированную среду разработки (IDE) при написании HTML или CSS, но она может упростить чтение, особенно по мере роста вашего кода.
Прежде всего, напишите <!DOCTYPE HTML> в начале файла:
```разметка
Ваш веб-сайт будет работать и без этой строки, так что не беспокойтесь, если вы забудете добавить ее, но рекомендуется включать ее в начало файла, чтобы все браузеры точно знали, как анализировать ваш файл.
Вы захотите сохранить свой файл как файл .html, что даст нам возможность позже открыть наш код в браузере, чтобы посмотреть, как он выглядит.
Ваши первые элементы в DOM
После строки DOCTYPE давайте начнем писать фактические элементы, которые будут отображаться на экране пользователя.
Хорошей практикой является использование первого элемента (который является корнем документа) в качестве тега html:
```разметка
Элемент head
Элемент заголовка (<head>) — это место, где вы можете хранить метаданные о документе, такие как заголовок, который отображается на вкладке браузера, любые внешние скрипты, которые использует ваш сайт (сейчас это не актуально для нас), и многое другое.
Важно отметить, что это место для хранения [таблиц стилей] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) с использованием элемента style. Здесь мы поместим наш CSS, который напишем позже.
Вот пример того, что может содержать ваш элемент head:
```разметка
<голова>
<стиль>
// Здесь идет CSS
Элемент body
Это тело вашего документа, где будет находиться все ваше основное содержимое. По сути, все на вашей странице будет внутри этого элемента.
Вот пример полного HTML-документа с элементом body:
```разметка
<голова>
<тело>
Привет!
Заголовки (h1, h2, h3…)
Существует 6 различных элементов «заголовок уровня», которые вы можете обернуть вокруг текста, чтобы сделать его более или менее заметным на странице. Это полезно, если вы хотите добавить заголовок или заголовки на свою страницу, чтобы сделать ее более читабельной и привлекательной.
h1, h2, h3, h4, h5 и h6 — это элементы, используемые для применения стилей к тексту (и другим элементам внутри), которые обычно делают размер шрифта больше или меньше в зависимости от уровень заголовка.
Уровень заголовка 1 часто семантически представлен как основной заголовок/заголовок содержимого страницы, затем, когда число становится больше, тип заголовка меняется на семантически «меньший».
Таким образом, «h2» будет представлять подзаголовок контента, «h3» может представлять подзаголовок подзаголовка и т. д.
```разметка
Очень большое название
Подзаголовок
Подзаголовок меньшего размера
Меньший заголовок
Еще меньший заголовок
Самый маленький заголовок
Добавление параграфа на нашу страницу
Что такое заголовок без содержания под ним? Здесь вы можете использовать элемент p (абзац), который имеет небольшой размер шрифта, подходящий для обычного письма.
```разметка
Создание собственного веб-сайта с нуля
День наступает там, где ты...
Причудливая работа с разделителями (контейнерами)
Есть много других элементов, которые полезно знать, вы можете найти [полный список здесь] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
Элемент div может быть наиболее полезным, если вы хотите разделить контент на своем веб-сайте, например, поле для ввода текста.
Размещение элементов внутри других элементов является фундаментальной частью создания веб-сайта с помощью HTML, и вы можете начать создавать более сложные компоненты на своей странице, заключая элементы в контейнеры, такие как div.
В качестве примера предположим, что мы хотели создать такой макет:
Мы можем представить, как макет может выглядеть в нашем HTML-коде, думая о различных элементах, которые потребуются для отображения каждого маленького «бита» на странице. Такие вещи, как текст, заголовки и большие контейнеры для разделения разделов страницы.
По умолчанию div будет занимать ровно столько места, сколько дочерние элементы внутри него (как показано выше, хотя и не с таким большим интервалом).
Используя div (и некоторые стили), вы можете создавать макеты, которые работают как блоки LEGO, если вы хотите сделать более сложные макеты, такие как целевая страница.
Чтобы дать вам представление о том, насколько мощными могут быть элементы группировки с помощью div, на изображении выше каждый блок представляет собой элемент, например, h1 для «Привет, я Блейк», элементы button для кнопок , так далее.
Самое главное, контент сгруппирован в 3 контейнера (divы), один контейнер охватывает все содержимое, один контейнер для всего, кроме социальных иконок, и отдельный контейнер для социальных иконок.
```разметка
<дел>
<изображение />
<дел>
