Как создать веб-страницу (шаг за шагом)

Привет 👋 Меня зовут Павел и я Front End Developer. Я начал изучать веб-разработку в 2012 году и хочу поделиться некоторыми базовыми знаниями, которые понадобятся вам для создания сайта. Мы создадим супер простую страницу и опубликуем ее, так что вы сможете поделиться ссылкой с кем угодно. Все бесплатно и не займет много времени, так что давайте начнем.

Что вам нужно для начала работы

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

  • VSCode
  • Sublime Text
  • Notepad++
  • WebStorm
  • Atom (GitHub объявил в своем блоге об окончании срока службы Atom 15 декабря 2022 года)
  • Brackets

Базовая структура страницы

Надеюсь, вы нашли редактор, который вам нравится, и теперь мы можем приступить к работе. Создайте на своем компьютере папку, например, my-personal-website и откройте эту папку в редакторе кода. Создайте index.html и давайте начнем наш путь к разработке Front End.

Добавим этот код в наш файл index.html.

<!DOCTYPE html>
<html>
<head>
  <title>My Personal Website</title>
</head>
<body>
  <p>Hi, my name's Pavel! And I'm going to be a Front End Developer</p>
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Когда вы откроете этот файл в браузере, вы должны увидеть следующее:

Легко, правда? Позвольте мне объяснить код.

В самом верху нашего файла есть <!DOCTYPE html> С помощью этой строки наш браузер понимает, что это HTML-файл. Внутри тега head мы добавляем некоторую информацию о сайте, такую как заголовок, описание, ключевые слова и т. д. Все, что находится между <body> и </body> — это то, что пользователи увидят на сайте. В нашем случае мы используем тег <p>, который означает «Покажем абзац с сообщением внутри». Вот как выглядит язык HTML.

Теперь все, что вам нужно, это набрать в Google «Как добавить изображение в HTML», вы увидите несколько примеров вроде <img src="..." >, просто скопируйте это и добавьте внутри <body>. Например, так:

<!DOCTYPE html>
<html>
<head>
  <title>My Personal Website</title>
</head>
<body>
  <p>Hi, my name's Pavel! And I'm going to be a Front End Developer</p>
  <img src="https://images.unsplash.com/photo-1615916605299-21a82ebf0933">
</body>
</html>
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Сделайте свою страницу уникальной

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

Давайте добавим тег <style> внутри <head> с этим содержимым:

<!DOCTYPE html>
<html>
<head>
  <title>My Personal Website</title>
  <style>
    body {
      background: black;
    }

    p {
      color: white;
    }
  </style>
</head>
<body>
  <p>Hi, my name's Pavel! And I'm going to be a Front End Developer</p>
</body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

Идея CSS довольно проста, вы говорите: «Эй! Вы можете найти элемент body и установить цвет фона на черный. О… И, пожалуйста, измените цвет текста в моем теге p на белый». Это довольно простой пример, но он показывает вам основную идею того, как это работает. Теперь вы можете обновить страницу в браузере и посмотреть, изменилась ли ваша страница. Вы должны увидеть белый текст на черном фоне. Надеюсь, все работает, и мы можем двигаться дальше.

Допустим, у нас есть два тега <p>, но вы хотите использовать для них разные цвета. Идея заключается в том, чтобы добавить атрибут class в HTML с разными именами, а затем выбрать элементы с помощью селектора классов CSS. Вот что я имею в виду:

<!DOCTYPE html>
<html>
<head>
  <title>My Personal Website</title>
  <style>
    body {
      background: black;
    }

    .white-text {
      color: white;
    }

    .orange-text {
      color: orange;
    }
  </style>
</head>
<body>
  <p class="white-text">Hi, my name's Pavel!</p>
  <p class="orange-text">I'm going to be a Front End Developer</p>
</body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима

У нас есть два CSS селектора здесь .white-text и .orange-text, когда наш селектор начинается с ., CSS поймет, что это селектор класса. Вот список селекторов CSS, составленный MDN, с отличным объяснением и примерами.

Как развернуть сайт

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

Существует так много хороших и бесплатных хостингов, но я обычно использую Vercel или Netlify. В этом уроке я покажу вам, как использовать Netlify.

  1. Зайдите на сайт https://app.netlify.com/ и создайте свой аккаунт.
  2. Теперь перейдите на главную страницу, которая называется Обзор команд.
  3. Нажмите Добавить новый сайт > Развернуть вручную

У вас должна появиться папка my-personal-website, содержащая файл index.html. После этого вы должны увидеть экран, показанный ниже. Вам нужно будет немного подождать, пока статус Production Deploys не изменится с Uploading на Published.

Вот и все! У вас есть ссылка на ваш сайт, которой вы можете поделиться. В моем случае это https://gleaming-gumdrop-6a0f99.netlify.app/.

Резюме

Теперь у вас есть свой сайт, доступ к которому вы можете получить из любого места. Мы написали некоторые базовые HTML и CSS, и вы можете добавить больше, используя приведенные ссылки. Я знаю, что это не похоже на все, что мы делаем в нашей работе как Front End Developers. Вы должны изучить больше HTML-тегов, больше правил CSS, как работать вместе, как улучшить скорость вашей работы и многое другое. Я предлагаю вам взять какой-нибудь сайт, который вам нравится, и попытаться сделать что-то похожее с помощью HTML и CSS. Потому что единственный способ выучить HTML и CSS — это практика.

Если вам понравилась эта статья или вы хотите узнать больше о Front End разработке, просто дайте мне знать в Twitter. Мы можем вместе научиться чему угодно.

Оцените статью
devanswers.ru
Добавить комментарий