Как сделать свою первую простую веб-страницу

Первые шаги для чайников | Веб-разработка

Как сделать свою первую простую веб-страницу

Я много лет работаю веб-разработчиком и всегда старался помочь своим друзьям закончить работу.

Все они знали какие-то команды, теги или что-то из интернета, что они выучили. Однако им не хватало опыта, чтобы пользоваться всем этим.

Поэтому я не собираюсь сосредотачиваться только на показе команд или тегов. Я покажу вам, как выглядит процесс создания веб-сайта. Объясните основы и направьте вас, чтобы использовать его, потому что это нормально не помнить все.

Программирование во многом связано с поиском.

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

Во многих собеседованиях, когда вам нужно что-то создать, вы можете использовать Google, потому что мы все делаем это постоянно.

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

Глава 0: Где кодировать?

Нигде этот вопрос не решается проще, чем в веб-разработке, потому что веб-сайт — это просто текстовый документ. Вы даже можете использовать текстовый редактор!

А на самом деле.. Не делай этого😄. Это только навредит вам.

Когда я начал программировать, я использовал Sublime Text. Это самый простой редактор, но я рекомендую начать с немного более сложного.

Например, Visual Studio Code.

Далее есть WebStorm и это лучший из них, но он платный. Однако, если вы студент, это бесплатно для вас.

Для этой истории я буду использовать Visual Studio Code.

Создадим сеть!

1. Просто откройте редактор и создайте новый файл.

2. Этот файл является содержимым нашей страницы. Для начала напишите туда что-нибудь.

3. Сохраните его.

Вот одна важная вещь, которую нужно сделать. Все веб-страницы должны заканчиваться на “.html”.

Это потому, что мы должны сказать устройству, что этот файл должен быть открыт в браузере.

И это все! Откройте его, и вы увидите, что мы создали веб-страницу.

Этот, например, даже пытается с нами заигрывать.

СОВЕТ. Это хранится только локально, что означает, что только вы можете его посетить. Но если вы хотите показать их кому-либо в Интернете. Вам необходимо купить домен (www.exampledomain.com) и оплатить хостинг.
Хостинг размещает этот ваш файл в Интернете, а домен является его адресом.

Хе-хе извини, я шучу. Я просто хотел пошутить здесь.

Это еще ничего, но это хорошее начало, чтобы помочь вам понять, что все веб-страницы — это просто файлы с текстом и изображениями.

Однако мы хотим отличить один текст от другого. Нам нужны подстраницы или немного графики, чтобы сделать наш сайт более практичным и интересным.

Всего этого мы добиваемся, редактируя этот файл.

Глава первая: Форматирование файла

Сделаем поинтереснее. Браузер читает файл и форматирует его по найденным элементам.

Элементы создаются из тегов, которые могут содержать текст или другие элементы.

Один элемент выглядит примерно так: <h1> Compliment <h1 />

Он создается с помощью начального тега, контента и конечного тега(содержит тире). А если мы напишем на своей странице, браузер отобразит ее немного по-другому.

Это потому, что браузеры узнали, что определенные элементы что-то значат. Например, h1 означает heading1, и есть несколько заголовков разного размера.

Давайте добавим туда больше строк текста для игры.

Ой, что-то там не так.

Это потому, что браузер не понимает, что мы туда помещаем. Он видит только символы и элементы.

Следовательно, мы должны поместить все в какой-то элемент. Есть элементы для всего. У некоторых есть особое поведение, а некоторые просто для стиля.

Элемент для простого текста: <p> — paragraph

Ого! Теперь гораздо лучше форматированный текст.

Мы даже можем поместить элемент в элемент вот так. (B означает полужирный шрифт)

Или что-то особенное, как это. Самое интересное в них то, что им не нужен какой-либо контент, поэтому мы пишем начальный тег без конечного тега.

СОВЕТ. Если вы не знаете, какой элемент использовать, вы можете использовать DIV. У этих элементов нет особой причины, но они могут заключать в себе какие-то другие элементы.

Есть даже некоторые элементы, которые требуют некоторых элементов в содержании.

Например, Ненумерованный список(ul). Вам нужно поместить туда элементы list item(li).

СОВЕТ. Использование правильных элементов во многом помогает улучшить SEO и повысить вероятность случайного обнаружения в поиске.

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

Но сначала вы должны знать о структуре HTML-документа.

Структура HTML-документа

Если вы посмотрите на другие веб-сайты, вы увидите, что там больше информации о них. Не только содержимое страницы. Например, название карты или ее значок.

Эта информация хранится в том же файле, что и наш контент. Но нам нужно разделить информацию о странице и содержание страницы.

Для этого мы используем эту структуру, которую вы можете скопировать и вставить для каждого из ваших других проектов.

Заголовок содержит информацию, а тело содержит содержимое страницы.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
</body>
</html>

Подведение итогов

• Все веб-страницы создаются из текстовых файлов. Для веб-страниц мы используем файлы html type, чтобы браузер знал, как их открыть.
• Для форматирования страницы мы используем элементы, которые создаются из тегов.
• Браузеры определили стиль некоторых элементов, и рекомендуется найти лучший элемент для каждого текста. Но если нет элемента для ваших нужд, вы можете использовать что-то более общее. Элемент DIV.
• HTML-документ должен содержать элементы doctype, html, head и body для создания структуры. Это то же самое для каждой страницы, так что вы можете скопировать и вставить его.
• Здесь мы использовали только язык HTML.

Глава вторая: стиль

Теперь наша работа выглядит как документ Word. Это потому, что HTML не предназначен для оформления страницы. Для этого нам нужно использовать CSS.

Итак, давайте начнем с чего-то более интересного, мы не хотим создавать сайты, подобные Total Commander, в этом веке.

Допустим, нам не нравится светлый режим и мы хотим, чтобы наша страница была в темных тонах. Темные, как души существ под вашей кроватью.👻

Для стиля нам нужно добавить style в голову. Он содержит информацию о внешнем виде элементов.

СОВЕТ. Лучшее решение — иметь стиль в отдельном файле. Но для этого сценария внутреннего CSS достаточно.

В нашем стиле мы просто определяем ЧТО и КАК это должно выглядеть.
(Будьте осторожны с фигурными скобками)

Теперь вы можете видеть две вещи.

Во-первых, в CSS мы определяем внешний вид по словам, которые действительно подобны английскому языку. Вам не обязательно знать каждый из них. Вам просто нужно знать, как Google такие вещи.

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

Поэтому давайте изменим цвет текста на белый. Но чтобы узнать, как это сделать, давайте воспользуемся Google. (Или DuckDuckGo, если хотите🦆)

Нам даже не нужно открывать какой-либо веб-сайт, и мы можем найти точный ответ, который искали.

И после того, как мы применим белый цвет к абзацам, мы увидим…

Почти ничего. Сейчас он не выглядит идеальным, но все еще в процессе.

Проблема в том, что у нас есть несколько разных элементов. Не просто абзац.

Решение для этого простое, определите для них также белый цвет.

И вот мы что-то видим. Отлично, правда?

Но мы можем значительно улучшить код. Представьте, если бы мы хотели, чтобы все было желтым, и нам пришлось бы изменить его во многих других местах. Лучший способ сделать это — просто использовать запятую.

Теперь это более красиво, но мы могли бы также использовать *, что означает все.

Теперь у нас все в темноте, но мы можем пойти намного дальше и немного улучшить этот дизайн.

СОВЕТ. В CSS мы можем определить цвет несколькими способами. Словами, HEX или с RGB.

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

Создание макета

Я не хочу усложнять, поэтому мы собираемся сделать что-то действительно простое, но полезное с множеством разных принципов.

Позвольте мне сделать только быструю верстку в фигме. И очень-очень быстро благодаря этой истории.

Начнем с красной коробки.

Но есть проблема: когда вы смотрите на структуру, у нас нет ничего, что могло бы представлять этот элемент коробки.

Итак, давайте исправим это и завернем все это в элемент main.

Мы также могли бы использовать div или что-то еще. Но основные элементы должны содержать весь основной контент, так что это его лучший сценарий.

Мы увидели, что наша страница не меняется, но добились того, что весь наш текст находится в одном элементе.

Давайте посмотрим, как выглядит основной элемент, определив цвет фона.

Расстояние

Хорошо, хорошо, теперь давайте поговорим о интервалах.

В CSS мы используем margin и padding. Все это может определять пространство слева, справа, сверху или снизу. Однако разница между ними заключается в расположении помещения.

Он расположен в или вокругэлемента.

СОВЕТ. Поначалу может быть трудно понять разницу между margin и padding, вы должны попробовать сами. Попробуйте определить границы, границы и отступы и посмотрите, что произойдет. Вы также можете заглянуть сюда, если вам все еще тяжело.

После кладем набивку. Мы видим, что у всех элементов есть немного больше места для дыхания. Что всегда хорошо.

СОВЕТ. Существуют самые короткие способы написания отступов или полей. Видеть это".

Еще одна вещь, которую нужно изменить, — это положение поля. Хорошей практикой UX является размещение всего нашего контента посередине, поэтому мы переместим его туда.

Для этого есть небольшая хитрость. margin: 0 auto;но для этого нам нужно определить ширину элемента.

Навигация

Еще одна важная вещь — переход на другие подстраницы. Для этого мы создадим большую панель навигации вверху.

Мы используем для этого элемент navigation(nav) и помещаем туда названия других страниц, которые у нас будут.

Хорошо, у нас есть навигация над контентом. Но мы хотим, чтобы наши элементы находились рядом друг с другом.

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

Это выглядит лучше, поэтому мы немного изменим стиль.

Теперь навигация выглядит нормально, но мы видим другую проблему. Это изменило ВСЕ абзацы на нашей странице.

Для этого простое решение. Нам нужно сузить область действия и определить изменение только абзаца в навигации.

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

Это текущее поведение:

Решение для этого не очень сложно. Мы просто меняем position на sticky.

И чтобы это работало, мы также должны определить, где элемент должен придерживаться. Мы хотим, чтобы он был наверху.. Итак.. ноль пикселей сверху будет: top: 0;

Тада, это работает!

Подведение итогов

• Для редактирования стиля элементов мы используем язык CSS.
• Вы не будете знать всего, вам просто нужно знать, как все найти.

Глава третья: Давай закончим

Но не хватает еще одного. Как абзац может переместить нас на другие страницы? Ответ: нет.

Нам нужно изменить его на элемент. Это перенаправляет нас на любую другую ссылку в Интернете или в нашей структуре.

Давайте создадим несколько других страниц в нашей папке.

Мы также переименовываем нашу домашнюю страницу в index.html. Правил нет, за исключением того, что ваша домашняя страница должна называться index.

Для <a> элементов важно присвоить им атрибуты href.

Атрибуты — это определяющие элементы.

Мы можем поместить всю URL-страницу таким образом в атрибут элемента.
<a href="https://www.google.com/">google page</a>

Или мы можем перенаправить пользователя на одну из наших страниц с относительной позицией.
<a href="shop.html">shop</a>

Мы добились того, что наш сайт теперь будет перенаправлять на другие. Проблема в том, что это начало выглядеть некрасиво. (больше, чем раньше)

Почему так случилось? Это произошло из-за того, что абзац имел определенный стиль в браузере, а ссылка имеет другой предопределенный стиль. Давайте исправим это.

Я даже использовал text-decoration: none; для удаления подчеркивания, что является предопределенным стилем для элемента.

Но что, если мы хотим подчеркнуть страницу, на которой сейчас находимся?

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

Мы можем определить стиль класса и назначить его элементу по атрибуту. Обратите внимание, что в css мы различаем элементы и классы с помощью точки.

И это все. Есть много, много вещей, которые я не показал вам сегодня.

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

Здесь мы можем сделать намного больше. Например, добавьте изображение в центр строки:

Или улучшить дизайн, чтобы сделать его менее уродливым.

Но все это теперь на ваше усмотрение. Попробуйте изменить его хотя бы на этот дизайн.

Опыт выделяет вас среди клиентов и работодателей, а не то, что вы читали.

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

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

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

Давайте поделимся своими знаниями и вспомним..

Наслаждайтесь всей творческой работой и никогда не стыдитесь использования Google. Мы всегда его используем.✌