Упражнение. Создание HTML-страницы

  • 5 мин

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

В этом упражнении используется vscode.dev — веб-версия Visual Studio Code и CodeSwing. Эти средства помогают упростить процесс разработки. Для выполнения следующих упражнений не требуется локальная установка.

Создание HTML-страницы с помощью CodeSwing

Сначала создайте папку, настройте ваши инструменты разработки и создайте "свинг" с помощью CodeSwing в vscode.dev. В среде vscode.dev, swing автоматически отображает результаты вашего кода. Это позволяет быстро вносить изменения и обновляться в режиме реального времени.

В следующем видео показано, как установить CodeSwing в Visual Studio Code. Эти шаги также приведены в шагах упражнения.

  1. Создайте папку на рабочем столе с именем резюме.
  2. Откройте vscode.dev.
  3. Выберите "Открыть папку".
  4. Перейдите в созданную ранее папку резюме и выберите «Выбрать папку».
  5. Когда появится запрос на разрешение сайту просматривать файлы, выберите «Просмотреть файлы».
  6. Нажмите кнопку "Расширения".

    Снимок экрана: значок расширений.

  7. В текстовом поле "Расширения поиска" в Marketplace введитеCodeSwing.
  8. Выберите "Установить", чтобы установитьCodeSwing.
  9. Откройте палитру команд, выбрав Ctl-SHIFT-P или Cmd-SHIFT-P на компьютере Mac.
  10. Введите CodeSwing в палитре команд и выберите CodeSwing: New Swing in Directory....
  11. Выберите "Выбрать папку ", чтобы использовать текущий каталог (который был создан на предыдущем шаге).
  12. Выберите "Базовый": только HTML.
  13. При появлении запроса на сохранение изменений для возобновления нажмите кнопку "Сохранить изменения".

Visual Studio Code создает две окна параллельно. Левая сторона — это редактор, где можно ввести HTML-код. Правая сторона работает как браузер, отображая результаты вашего HTML-кода.

Добавление HTML для создания структуры страницы

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

В следующем видео показано, как создавать HTML-код в Visual Studio Code и отображать код в CodeSwing. Эти шаги также приведены в шагах упражнения.

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

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

  1. В index.htmlдобавьте следующий HTML-код:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

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

Метка Описание
<html> Тег контейнера для всего HTML-документа. Все остальные теги записываются внутри HTML-элемента.
<head> Контейнер заголовков. Заголовок обычно содержит ссылки на другие файлы, необходимые странице или сайту. Он также может включать данные, которые поисковые системы и сайты социальных сетей используют для лучшего поиска веб-сайта.
<body> Этот тег создает контейнер основного текста для веб-страницы. Большинство элементов отображения включаются в элемент body.
<div> Тег деления создает раздел в HTML. Разделы обычно имеют аналогичное содержимое или содержимое, связанное друг с другом.
<h1> - <h6> Это теги заголовков. Они дают некоторую структуру HTML-документу. Они сообщают браузеру форматировать текст между ними определенным образом, чтобы показать, что это иерархически.
<!-- comment text --> Эти теги являются комментариями в HTML. Они не создают отрендеренный результат. Они используются разработчиками, чтобы упростить поиск, совместное использование и понимание кода.
/* CSS comment */ Эти теги комментариев используются в каскадных таблицах стилей.
  1. Когда вы вводите текст, страница автоматически обновляется, а окончательный результат выглядит примерно так:

Снимок экрана структуры резюме.

Просмотр кода

Каждая HTML-страница имеет html в качестве корневого основного элемента, со всем содержимым, содержащимся внутри него. html обычно имеет два прямых дочерних элемента, head, которые содержат метаданные, и body, содержащие отображаемые сведения.

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

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