Персональная веб-страница на 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. Теперь вы увидите свое имя и биографию, отображаемые на странице.

h1 and p tag

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

На этом шаге вы будете использовать списки для организации информации, такой как ваши навыки или интересы. 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. Ваша персональная веб-страница теперь завершена, включая расписание и контактную форму!

table and form tag

Резюме

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

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

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

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