Простой HTML-сайт шаг за шагом

Первый сайт, созданный на HTML, не будет ни самым красивым, ни самым функциональным. Тем не менее, вам нужно с чего-то начинать, и такой проект — прекрасная возможность приобрести некоторые базовые навыки или упростить выполнение вашей IT-задачи.

Создание HTML-проекта

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

Что мы будем делать:
- мы создадим веб-сайт полностью с нуля, без использования фреймворков или библиотек HTML и CSS, таких как Bootstrap,
- он будет выглядеть достаточно строго, но и прозрачно. Я не хочу использовать слишком много цветов и изображений,
- я также покажу некоторые основы CSS, благодаря которым вы хотя бы немного усовершенствуете визуальный слой вашего сайта,
- я хочу, чтобы все было просто и поэтому не будем вдаваться в более сложные темы. С самого начала мы не будем работать только в рамках одного файла. Это можно было бы сделать, но это не очень хороший выбор в долгосрочной перспективе, поэтому стоит избегать его с самого начала.

Шаг 1. Создайте папку с файлами

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

Мы создаем файлы, такие как:
- index.html
- obomne.html
- style.css

Шаг 2. Откройте index.html с помощью Блокнота или любого редактора кода

Редактор кода вовсе не обязателен для создания страниц. На самом деле это можно сделать даже в Блокноте Windows - и я сам так начинал. Однако вся правда в том, что вряд ли кто-либо из опытных кодеров поступает именно так - это пустая трата нервов и времени. Если вы серьезно относитесь к тому, чтобы научиться создавать страницы, я предлагаю вам скачать бесплатный редактор кода, например, такой как Visual Studio Code.

Шаг 3. Создайте простой скелет страницы в index.html

Файл index.html

Начнем с определения типа документа и языка вашего сайта в теге <html>. Ниже находится head, или «шапка» вашего сайта, в которой вы можете задать кодировку символов (в случае с русским рекомендую utf-8), прикрепить дополнительные листы CSS (они понадобятся, чтобы придать вашему веб-сайту более интересный вид), или, например, тег title, который позволяет указать заголовок на вкладке браузера.

Шаг 4. Добавьте заголовок, меню, некоторый контент и нижний колонтитул

Файл index.html

Вы добавляете элементы в раздел body вашего документа. Они будут работать даже без промежуточных тегов <div> и </div>, но я не случайно поместил их туда. Благодаря им и заданным вами именам классов (атрибут class) вы сможете ссылаться на эти элементы в CSS, в котором вы дадите им некоторые параметры для улучшения визуальных аспектов веб-сайта.

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

Шаг 5. Добавьте немного CSS

Файл style.css

Мы обращаемся ко всему телу именем «body», а к классам по их индивидуальному имени, которому предшествует точка. В случае с классами «menu» и «footer» я дал им одинаковые свойства, поэтому не разбивал их на две фигурные скобки, а вставлял после запятой. Для элементов <a> в нашем файле HTML я не давал им специальных классов или идентификаторов (id), поэтому я ссылаюсь непосредственно на сам тег. Однако следует помнить, что в этом случае каждая ссылка на вашем сайте будет оформлена таким образом.

Между фигурными скобками задаю индивидуальные параметры, такие как:
- background — отвечает за фон элемента (или всей страницы в случае body). Вы можете определить его, например, с помощью цветов RBG или HEX,
- margin - расстояние от края. Благодаря ему я смог легко немного сузить страницу, чтобы она не была такой широкой,
- border - рамка элемента, я определил ширину 3 пикселя, сплошной шрифт и серый цвет HEX,
- border-radius - закругление рамки,
- padding — пробел, который, в отличие от поля, является пространством внутри, а не снаружи элемента,
- text-align: center - позволил мне центрировать строки в заголовке, меню и нижнем колонтитуле,
- color - указывает цвет текста,
- font-size - размер шрифта,
- font-weight - вес шрифта.

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

Шаг 6. Создайте страницу «Обо мне»

Файл: obomne.html

Фактически мы копируем предыдущий файл и меняем значение title и заголовок страницы (h1). Контент, в который я добавил маркированный список (элементы <li>, включенные в тег <ul>) и логотип websoveti.ru, также был изменен. В дополнение к пути к файлу я также добавил класс логотипа в атрибут «src». Этот класс имеет определенное значение поля, поэтому добавьте следующий код на лист CSS:
- класс логотипа файла: style.css (после его прикрепления изображение будет смотреться немного иначе, как на скриншоте ниже)

Простой HTML-сайт шаг за шагом

Чтобы просмотреть HTML-страницу, просто откройте файл index.html в любом браузере. В случае, если вы хотите опубликовать его в сети, вы должны использовать какой-либо сервер или хостинг. Для простых HTML-страниц, предназначенных для учебных целей, подойдет любой бесплатный виртуальный хостинг.

В этом уроке я показал вам, как создать очень простой веб-сайт, основанный только на простых функциях HTML и CSS. Если вы новичок в этом проекте, вы можете развить этот проект и немного попрактиковаться. В дальнейшем я также рекомендую вам изучить, например, основы языка PHP, что позволит вам сохранить код меню в отдельном файле. Благодаря этому, если бы вы хотели добавить новый элемент, вам не пришлось бы вручную менять его в меню для каждой подстраницы (что немного неудобно, особенно когда у вас больше двух-трех подстраниц). Как вариант, можно сразу научиться создавать шаблоны для готовых CMS-систем, например WordPress.

410 просмотров

Обсудить