Создание личного сайта с нуля
2 марта 2022 г.Наступает день, когда вы хотите создать свой собственный веб-сайт, возможно, чтобы расширить свое цифровое присутствие или позволить другим легче найти вашу работу.
У вас есть стандартные конструкторы сайтов без кода, такие как 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ы), один контейнер охватывает все содержимое, один контейнер для всего, кроме социальных иконок, и отдельный контейнер для социальных иконок.
```разметка
<дел>
<изображение />
<дел>
Привет, я Блейк
Я инженер-программист из Мельбурна, Австралия.
Вы можете видеть, как блоки (с дополнительным стилем) собираются вместе и складываются, чтобы создать интерфейс, который мы хотим. Тем не менее, элементы div сами по себе без стилей не будут размещать контент горизонтально, как вы видите, когда значки социальных сетей находятся рядом с текстом на изображении выше. Чтобы получить этот эффект, нам нужно начать стилизовать наши divы.
Стилизация нашего контента
В настоящее время наш веб-сайт, вероятно, выглядит немного скучно, потому что элементы на нашей странице просто отображаются как есть, без каких-либо указаний браузеру оставлять пространство или отступы вокруг определенных элементов. Давайте добавим некоторые стили к нашим элементам, чтобы сделать наш сайт модным 💅
Добавление тега style к нашему head
Самый простой способ добавить стили на наш сайт — включить CSS внутри элемента style в элементе head.
```разметка
<голова>
<стиль>
тело {
фон: черный;
Вы можете включить CSS-правила внутри элемента style, чтобы ориентироваться на любые существующие элементы в вашем HTML-коде, например, изменить способ отображения body документа или цвет элемента p.
Дыхательная комната
Если вы хотите добавить интервал между элементами, вы можете использовать padding и margin.
margin представлен оранжевым цветом - вы можете думать о margin как о том, сколько места есть между другими элементами; как силовое поле вокруг снаружи элемента, которое отталкивает других.
Это отлично подходит для предоставления нужного количества передышки между различными элементами.
Вы можете указать, сколько пикселей будет у поля и отступа, где более высокие значения будут увеличивать интервал.
``CSS
дел {
отступ: 12px;
padding, с другой стороны, определяет, сколько места внутри элемента. В случае с этой кнопкой синий представляет фактический размер элемента, а зеленый — это отступ вокруг элемента, как подушка, которая буквально делает элемент больше.
Это полезно, если вам нужно «внутреннее» пространство в элементе, например, увеличить размер кнопки или оставить пространство между краями дочерних элементов.
Добавление классов к элементам
Чтобы облегчить выбор определенных элементов на странице вместо всех элементов типа div, например, мы можем добавить классы к нашим элементам в HTML, используя атрибут class:
```разметка
<див класс="коробка">
<дел класс = "слева">
Привет!
<див класс="право">
<изображение источника = "">