Создайте свою первую HTML-страницу в WebIDE

Введение

В этом практическом занятии вы узнаете, как создать свою первую HTML-страницу с использованием WebIDE (похожий на VS Code) — мощного и популярного редактора кода для веб-разработки.

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} html/head_elems -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} html/lang_decl -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} html/viewport -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} html/text_head -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} html/lists_desc -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} html/nav_links -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} html/doc_flow -.-> lab-451041{{"Создайте свою первую HTML-страницу в WebIDE"}} end

Создание нового HTML-файла

LabEx WebIDE предоставляет современную среду разработки, похожую на VS Code, для выполнения задач программирования. WebIDE идеально подходит для веб-разработки, включая HTML, CSS и JavaScript.

Для начала откройте WebIDE, нажав на вкладку "WebIDE" в интерфейсе LabEx. В WebIDE слева отображается проводник файлов, а справа — редактор кода. Внизу также есть терминал и некоторые другие инструменты.

Проводник файлов: Отображает структуру каталогов проекта, где вы можете создавать, редактировать и управлять файлами. Рабочий каталог по умолчанию — ~/project.
Редактор кода: Предоставляет текстовый редактор для написания и редактирования кода. Вы можете создавать новые файлы, открывать существующие и просматривать изменения в коде.
Терминал: Предлагает командную строку для выполнения оболочечных команд, установки пакетов и управления файлами. Вы можете выполнять команды непосредственно в терминале. Рабочий каталог по умолчанию — ~/project.

На этом шаге вы узнаете, как создать новый HTML-файл в WebIDE. HTML (HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц. Каждая веб-страница начинается с HTML-файла.

В WebIDE следуйте этим шагам, чтобы создать новый HTML-файл:

Нажмите на меню "File".
Выберите "New File".
Сохраните файл с именем index.html.

В качестве альтернативы вы можете использовать сочетание клавиш Ctrl+N для создания нового файла, а затем сохранить его как index.html.

При именовании HTML-файлов помните об этих важных правилах:

Используйте строчные буквы.
Используйте расширение файла .html.
Избегайте пробелов в именах файлов.
Используйте описательные имена, такие как index.html, about.html и т.д.

Давайте проверим, что файл был создан, с помощью терминала:

ls ~/project

Пример вывода:

index.html

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

Если вы знакомы с терминалом, вы также можете создать файл с помощью следующей команды:

touch ~/project/index2.html

Узнайте больше о командах Linux, чтобы улучшить свои навыки работы с терминалом.

Создание шаблона HTML5-скелета

На этом шаге вы узнаете, как создать стандартный шаблон HTML5-скелета в WebIDE. Шаблон-скелет представляет собой стандартный образец, который предоставляет базовую структуру для HTML-документа.

В WebIDE вы можете быстро создать шаблон HTML5 с помощью встроенной клавиатурной комбинации. Следуйте этим шагам:

Откройте файл index.html.
Введите ! (восклицательный знак).
Нажмите клавишу Tab.

В результате автоматически сгенерируется полный шаблон HTML5 со всеми необходимыми элементами:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Совет: Если клавиатурная комбинация не работает, вы можете скопировать и вставить код шаблона в файл index.html.

Разберём основные компоненты этого шаблона HTML5:

<!DOCTYPE html> объявляет, что это документ HTML5.
<html lang="en"> является корневым элементом с указанием языка.
<head> содержит метаданные о документе.
<meta charset="UTF-8"> задает кодировку символов.
<meta name="viewport"> обеспечивает правильное отображение на мобильных устройствах.
<title> устанавливает заголовок страницы, отображаемый во вкладке браузера.
<body> — это место, где вы будете добавлять содержимое страницы.

Вы можете изменить <title>, чтобы дать вашей странице осмысленное название.

Добавление базового контента на HTML-страницу

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

Откройте файл index.html в WebIDE и замените пустой раздел <body> следующим содержимым:

Совет: Скопируйте и вставьте фрагмент кода в файл index.html, чтобы добавить контент. Замените существующее содержимое <body></body>. В следующих практических занятиях мы узнаем больше о HTML-элементах.

<body>
  <h1>Welcome to My First Web Page</h1>
  <p>
    This is a paragraph of text. HTML allows you to create different types of
    content easily.
  </p>

  <h2>My Favorite Hobbies</h2>
  <ul>
    <li>Coding</li>
    <li>Reading</li>
    <li>Traveling</li>
  </ul>

  <h2>Quick Links</h2>
  <a href="https://www.example.com">Visit Example Website</a>
</body>

Разберём использованные HTML-элементы:

<h1> и <h2> — это заголовочные теги (h1 — основной заголовок, h2 — подзаголовок)
<p> используется для создания абзацев текста
<ul> создаёт неупорядоченный (со списком с маркерами) список
<li> представляет элементы списка
<a> создаёт гиперссылку на другую веб-страницу

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

Некоторые дополнительные советы для начинающих:

Всегда закрывайте свои HTML-теги.
Используйте осмысленный и описательный контент.
Создавайте отступы в коде для лучшей читаемости.

Предварительный просмотр и отображение HTML в браузере

На этом шаге вы узнаете, как предварительно просмотреть и отобразить свою HTML-страницу в веб-браузере. Виртуальная машина LabEx предоставляет встроенную функцию предварительного просмотра в браузере в WebIDE.

Для предварительного просмотра вашего HTML-файла:

В WebIDE нажмите на кнопку "Go Live" в правом нижнем углу.
Откроется новая вкладка браузера с отображенной вашей HTML-страницей.
Или вы можете нажать на вкладку "Web 8080", чтобы открыть предварительный просмотр.

В результате автоматически:

Запустится веб-сервер.
Откроется ваша HTML-страница в окне предварительного просмотра.
Будут предоставляться обновления в режиме реального времени при внесении изменений в код.

Совет: Виртуальная машина LabEx размещает предварительный просмотр на порту 8080. Вы можете поделиться ссылкой на предварительный просмотр с другими, чтобы показать свою работу. После остановки виртуальной машины практического занятия ссылка на предварительный просмотр перестанет работать.

Основные моменты для наблюдения:

Страница отображается с разными размерами заголовков.
Список отображается в виде маркеров.
Ссылка является кликабельной.
Заголовок страницы отображается во вкладке браузера.

Итог

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