Персональная веб-страница на HTML: Создайте свою веб-страницу

Введение

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

Вы научитесь:

Определять базовую структуру HTML-документа.
Использовать заголовки и абзацы для форматирования текста.
Организовывать информацию с помощью списков.
Встраивать изображения и создавать гиперссылки.
Структурировать данные с помощью таблиц и создавать простую контактную форму.

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

Настройте структуру документа с помощью head и body

На этом шаге вы настроите базовую структуру вашего HTML-документа. Каждая HTML-страница имеет стандартную структуру, включающую теги <!DOCTYPE>, <html>, <head> и <body>.

<!DOCTYPE html>: Это объявление определяет тип документа как HTML5.
<html>: Это корневой элемент HTML-страницы.
<head>: Этот элемент содержит метаинформацию о документе, такую как его заголовок и ссылки на таблицы стилей. Содержимое внутри <head> не отображается на самой странице.
<title>: Этот тег устанавливает заголовок вкладки браузера.
<body>: Этот элемент содержит видимое содержимое страницы, которое отображается в браузере.

Сначала откройте файл index.html, расположенный в директории ~/project, используя файловый менеджер слева. Файл в настоящее время пуст. Скопируйте и вставьте следующий код в index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- Content will go here in the next steps -->
    </div>
  </body>
</html>

После вставки кода сохраните файл (Ctrl+S или Cmd+S). Теперь нажмите на вкладку Web 8080 в верхней части интерфейса лаборатории. Вы должны увидеть пустую страницу, но обратите внимание, что заголовок вкладки браузера теперь "My Personal Webpage".

Добавьте форматированный текст с помощью заголовков и абзацев

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

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

Давайте добавим ваше имя в качестве основного заголовка и краткую биографию. В вашем файле index.html найдите комментарий  внутри <div class="container"> и замените его следующим кодом:

<h1>John Doe</h1>
<p>
  Welcome to my personal webpage! I am a passionate web developer learning the
  fundamentals of HTML. I enjoy creating clean and efficient code to build
  beautiful and functional websites.
</p>

Ваш полный файл index.html теперь должен выглядеть так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>John Doe</h1>
      <p>
        Welcome to my personal webpage! I am a passionate web developer learning
        the fundamentals of HTML. I enjoy creating clean and efficient code to
        build beautiful and functional websites.
      </p>
    </div>
  </body>
</html>

Сохраните файл и обновите вкладку Web 8080. Теперь вы увидите свое имя и биографию, отображаемые на странице.

Вставьте списки для навыков или интересов

На этом шаге вы будете использовать списки для организации информации, такой как ваши навыки или интересы. HTML предоставляет два основных типа списков: неупорядоченные списки (<ul>) для элементов без определенного порядка и упорядоченные списки (<ol>) для нумерованных элементов. Каждый элемент в списке определяется тегом <li> (list item).

Давайте добавим раздел для ваших навыков, используя неупорядоченный список. Добавьте следующий код под тегом абзаца (<p>), который вы добавили на предыдущем шаге.

<h2>My Skills</h2>
<ul>
  <li>HTML & CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Problem Solving</li>
</ul>

Этот код добавляет заголовок второго уровня (<h2>) для названия раздела и неупорядоченный список (<ul>) с четырьмя элементами списка (<li>).

После добавления кода раздел <body> вашего файла index.html должен выглядеть так:

<body>
  <div class="container">
    <h1>John Doe</h1>
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>
  </div>
</body>

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

Добавьте ссылки и изображения с атрибутами

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

<img>: Тег изображения используется для встраивания изображения. Это самозакрывающийся тег, требующий двух основных атрибутов:
- src: Указывает путь к файлу изображения.
- alt: Предоставляет альтернативный текст для изображения, что важно для доступности и на случай, если изображение не может быть отображено.
<a>: Тег якоря используется для создания гиперссылок. Атрибут href указывает URL, на который ведет ссылка.

Сначала давайте добавим фотографию профиля. Скрипт настройки уже разместил изображение-заполнитель по пути images/profile.png. Добавьте тег <img> сразу под тегом <h1>.

Затем давайте добавим ссылку на внешний сайт, например, на профиль GitHub. Мы поместим ее в новый раздел "Найдите меня онлайн". Добавьте следующий код под вашим списком навыков:

<!-- Add this img tag below the h1 tag -->
<img src="images/profile.png" alt="A placeholder profile picture" />

<!-- Add this new section below the skills list -->
<h2>Find Me Online</h2>
<p>
  You can find my work on
  <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
</p>

Атрибут target="_blank" у ссылки указывает браузеру открывать ссылку в новой вкладке.

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

<body>
  <div class="container">
    <h1>John Doe</h1>
    <img src="images/profile.png" alt="A placeholder profile picture" />
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>

    <h2>Find Me Online</h2>
    <p>
      You can find my work on
      <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
    </p>
  </div>
</body>

Сохраните файл и обновите вкладку Web 8080. Вы увидите изображение профиля и кликабельную ссылку.

Создайте таблицу для расписания и форму для контактов

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

<table>: Определяет таблицу.
- <tr>: Определяет строку в таблице.
- <th>: Определяет заголовочную ячейку (по умолчанию жирная и центрированная).
- <td>: Определяет ячейку данных.
<form>: Определяет HTML-форму для ввода данных пользователем.
- <label>: Определяет метку для элемента <input>.
- <input>: Определяет поле ввода. Атрибут type может принимать значения text, email, password и т.д.
- <textarea>: Определяет многострочную область ввода текста.
- <button>: Определяет кликабельную кнопку.

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

<h2>My Schedule</h2>
<table>
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Web Development Practice</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Project Building</td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>Review and Refactor</td>
  </tr>
</table>

Затем добавьте контактную форму. Добавьте этот код под только что созданной таблицей:

<h2>Contact Me</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Send Message</button>
</form>

Сохраните файл и откройте вкладку Web 8080. Ваша персональная веб-страница теперь завершена, включая расписание и контактную форму!

Резюме

Поздравляем! Вы успешно создали полноценную персональную веб-страницу с использованием HTML.

В этой лабораторной работе вы практиковались в использовании наиболее фундаментальных HTML-элементов для структурирования документа и представления контента. Вы научились:

Создавать базовый каркас HTML-страницы с помощью <html>, <head> и <body>.
Форматировать текст с помощью заголовков (<h1>, <h2>) и параграфов (<p>).
Организовывать элементы в неупорядоченный список (<ul>, <li>).
Встраивать изображение (<img>) и создавать гиперссылку (<a>).
Структурировать данные в <table> и собирать пользовательский ввод с помощью <form>.

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