Веб-страница Bare Bones: 10 шагов

2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-23 15:05

Сегодня мы собираемся создать очень простую веб-страницу с нуля. Мы поговорим об элементах HTML, стилизации вашей веб-страницы (цвета, шрифты, выравнивание и т. Д.) И, наконец, о том, как вставить изображение на вашу веб-страницу!

К концу этого руководства у вас будут базовые навыки создания веб-страницы с нуля, и вы обнаружите, что кодирование не так сложно, как кажется!

Шаг 1. Использование блокнота

Мы собираемся использовать Блокнот в Windows, чтобы создать нашу первую веб-страницу. Хотя подойдет любой текстовый редактор, Блокнот предустановлен на компьютерах с Windows, так что это отличная отправная точка.

Чтобы открыть блокнот, перейдите в строку поиска в левом нижнем углу экрана и введите «Блокнот». Затем выберите приложение «Блокнот», которое появляется в результатах поиска. Должно открыться новое окно.

Шаг 2: Добавление базового дерева HTML-документа

Все веб-страницы должны следовать стандартной скелетной структуре, чтобы ваш веб-браузер (Chrome, Firefox, Edge, Internet Explorer, Safari…) мог обрабатывать и отображать вашу веб-страницу.

Это называется деревом HTML-документа. В Блокноте введите html «элементы» или «теги», как показано на снимке экрана. Не стесняйтесь также копировать и вставлять:

Шаг 3. Сохранение как HTML-страницы

Теперь, когда у нас есть основная структура html в Блокноте, давайте сохраним ее, чтобы мы не потеряли работу и чтобы мы могли видеть наши изменения по мере продвижения по Instructable.

1. Выберите «Файл»> «Сохранить как…» (снимок экрана 1).
2. Измените тип файла на «Все файлы» (снимок экрана 2)
3. Дайте вашему файлу имя по вашему выбору. Обязательно отметьте, где вы сохраняете документ на своем компьютере, чтобы вы могли открыть его позже. ПРИМЕЧАНИЕ. Самая важная часть сохранения этого файла - это добавление «.html» в конец имени файла. Это позволит вашему компьютеру распознать его как веб-страницу. Поэтому, если вы хотите назвать свой файл "my_webpage", не забудьте добавить.html в конец этого файла, например "my_webpage.html"

Шаг 4: Добавление заголовка на вашу веб-страницу

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

Первое, что мы должны сделать, это присвоить заголовок нашей веб-странице. Почти все веб-страницы имеют заголовок. Это то, что отображается на вкладке в вашем веб-браузере (см. Снимок экрана). Я собираюсь дать своей веб-странице название «Веб-сайт Тейлора». Для этого нам нужно добавить элемент title.

Веб-сайт Тейлора

На этом этапе вы заметите, что каждый тег имеет открывающий и закрывающий теги. Такие как

а также.

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

Шаг 5: Добавление содержимого на вашу веб-страницу

Что ж, у нас есть Заголовок для нашей веб-страницы, но у нас все еще нет для него реального контента. Добавим немного чутья!

Мы добавили заголовок на нашу веб-страницу с помощью элемента title. Давайте добавим к нашей веб-странице большой, привлекающий внимание заголовок, используя элемент «h1», который является элементом заголовка.

Веб-сайт Тейлора

Добро пожаловать на мою страничку

Шаг 6: просмотр наших изменений на данный момент

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

1. Сохраните файл в блокноте
2. Перейдите туда, где вы сохранили файл, и дважды щелкните его. Он должен автоматически открываться в вашем браузере по умолчанию. Хорошо выглядеть!

Шаг 7. Добавление тега абзаца

У нас есть заголовок, заголовок, теперь давайте добавим абзац с другим текстом. Имя элемента для абзаца - «p». Вы можете увидеть его использование ниже:

Веб-сайт Тейлора

Добро пожаловать на мою страничку

Сегодня мы узнаем, как создать эту очень простую веб-страницу!

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

Шаг 8: придайте ему немного цвета

У нас есть наша веб-страница, но она довольно проста. Придадим цвет нашему тегу абзаца!

Мы можем раскрасить различные элементы, добавив атрибут style к тегу p, как описано ниже:

Веб-сайт Тейлора

Добро пожаловать на мою страничку

Сегодня мы узнаем, как создать эту очень простую веб-страницу!

Шаг 9: Добавление изображения

Какой сайт без картинок? Добавим картинку на наш сайт!

Первый шаг - найти изображение, которое вам нравится. Я использовал изображения Google для поиска золотистого ретривера. Потяните изображение вверх и убедитесь, что URL-адрес заканчивается на.jpg,.png,.gif,-j.webp

После того, как вы выбрали свое изображение, нам нужно добавить его на страницу html с помощью тега img. Мое изображение:

Добавьте его на свою страницу, используя тег img с атрибутом src:

Веб-сайт Тейлора

Добро пожаловать на мою страничку

Сегодня мы узнаем, как создать эту очень простую веб-страницу!

Шаг 10: просмотр конечного продукта

Сохраните файл блокнота и откройте готовый продукт. Вы должны увидеть свою веб-страницу!