Откройте радость владения питомцем: Откройте Pet's House

Введение

Мы отправляемся в путешествие по созданию гостеприимного онлайн-пространства для любителей животных. Нашем сценарю, "Пет Paradise", посвящен персонаж, Алекс - Исследователь, который мечтает соединить владельцев животных через динамичный и информативный сайт. Целью Алексе является показать услуги по уходу за животными, поделиться историями и создать сообщество. Этот сценарий предназначен для увлекательного знакомства студентов с процессом превращения мечты Алексе в цифровую реальность.

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) 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/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-271712{{"Разметка заголовка и домашней страницы"}} html/head_elems -.-> lab-271712{{"Разметка заголовка и домашней страницы"}} html/lang_decl -.-> lab-271712{{"Разметка заголовка и домашней страницы"}} html/layout -.-> lab-271712{{"Разметка заголовка и домашней страницы"}} html/nav_links -.-> lab-271712{{"Разметка заголовка и домашней страницы"}} html/doc_flow -.-> lab-271712{{"Разметка заголовка и домашней страницы"}} end

Структура HTML-документа

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

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

Из рисунка выше мы видим, что весь текстовый контент заключается в угловые скобки < и >. Такой контент называется тегами, где <> представляет собой открывающий тег, а </> - закрывающий тег.

HTML - это язык, состоящий из элементов, которые представляются тегами.

HTML (HyperText Markup Language) - это код, который используется для структурирования веб-страницы и ее контента.

Hyper: "Hyper" противопоставляется "Linear". До этого компьютерные программы были в основном линейными, то есть они должны были выполняться по порядку сверху вниз. Веб-страницы, созданные с использованием HTML, однако, позволяют осуществлять навигацию по гиперссылкам с одной страницы на другую.
Text: В отличие от компилируемых языков программирования, таких как C, C++ или Java, HTML - это текстовый язык сценариев. Его исходный код интерпретируется и запускается непосредственно в браузере без необходимости компиляции.
Markup: Основная идея HTML - использование разметки (тегов, состоящих из парных угловых скобок) для описания того, как контент веб-страницы должен отображаться в браузере.
Language: HTML - это язык, но он интерпретируется, а не компилируется. Все его теги разметки переводятся браузером в конечный результат отображения.

В этом шаге вы начнете с настройки базовой структуры вашей веб-страницы. Создайте новый HTML-файл с именем index.html в директории /home/labex/project с помощью команды touch ~/project/index.html. Откройте этот файл в своем любимом текстовом редакторе и добавьте базовую структуру HTML-документа:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!-- We'll add content here in the next steps -->
  </body>
</html>

Объявление <!DOCTYPE html> сообщает браузеру, какой тип документа ожидать.
Элемент <html lang="en"> является корневым элементом HTML-документа.
Элемент <head> содержит метаданные (данные о документе), такие как заголовок и кодировка символов.
Элемент <title> задает заголовок веб-страницы.
Элемент <meta charset="UTF-8"> задает кодировку символов для веб-страницы.
Элемент <body> содержит видимый контент веб-страницы.

Нажмите кнопку Go Live в нижнем правом углу Окружения, чтобы открыть порт 8080, и нажмите кнопку Web 8080 в верхнем левом углу Окружения, чтобы просмотреть результаты страницы.

Примечание: Текущая страница не имеет эффекта, потому что тело страницы пусто. Мы увидим эффект страницы, когда узнаем больше тегов.

✨ Проверить решение и практиковаться

Семантические элементы

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

Заголовок: Это верхняя часть веб-страницы, часто содержащая логотип сайта, меню навигации, ссылки на вход/регистрацию и т.д. Заголовок - это то, что первым замечает пользователь, поэтому обычно он имеет выразительный дизайн, обеспечивая простой доступ к навигации.
Навигационная панель: Хотя навигационная панель может быть частью заголовка, в некоторых дизайнах она также может быть отдельным разделом, расположенном вверху, по сторонам или внизу страницы. Навигационная панель обеспечивает быстрый доступ к внутренним ссылкам на сайте, помогая пользователям легко найти интересующий их контент.
Основной контент: Это ядро веб-страницы, содержащее основную информацию или контент, который пользователь посетил страницу, чтобы увидеть. Основной контент можно дополнительно разделить на несколько секций, таких как статьи, блоговые записи, показы продуктов и т.д., в зависимости от цели и макета сайта.
Сайдбар: Сайдбар обычно располагается рядом с основным контентом (справа или слева) и предоставляет дополнительную информацию или функциональность, такие как связанные ссылки, рекламные объявления, поисковой ящик, ссылки на социальные медиа и т.д.
Подвал: Расположенный внизу веб-страницы, подвал обычно содержит информацию о копирайте, контактные данные, ссылки на карты сайта, политики конфиденциальности, иконки социальных медиа и т.д. Подвал - это последняя часть, которую видит пользователь, когда он прокручивает страницу до конца, предоставляя базовую информацию о сайте и дополнительные варианты навигации.

Добавьте семантические элементы (header, main, footer), чтобы организовать контент логически.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header></header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

 - это комментарий в HTML, который используется для добавления заметок или описаний к коду. Он не влияет на функциональность кода и игнорируется браузером.
HTML-элемент <header> представляет собой вводный контент, обычно группу вводных или навигационных элементов.
HTML-элемент <main> представляет собой доминирующий контент <body> документа. Основная область содержания состоит из контента, который непосредственно связан с центральной темой документа или расширяет ее, или центральной функциональности приложения.
HTML-элемент <footer> представляет собой подвал для ближайшего предка, разделяющего контент или корневого элемента разделения. Подвал обычно содержит информацию об авторе раздела, данные о копирайте или ссылки на связанные документы.

✨ Проверить решение и практиковаться

Раздел заголовка

Раздел домашней страницы должен включать следующие компоненты:

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

Разделите логотип и навигацию на две области с использованием тегов <div> и <nav>.
HTML-элемент <img> встраивает изображение в документ.
Атрибут src в теге <img> используется для указания пути к изображению.
Атрибут alt в теге <img> используется для описания изображения, и когда изображение не может быть отображено правильно на странице, будет показан контент из alt.
class в теге - это глобальный атрибут, и содержимое после знака равно эквивалентно имени, присвоенному элементу, которое используется CSS для идентификации определенного элемента и настройки стиля для указанного элемента.
HTML-элемент <ul> представляет собой неупорядоченный список элементов, обычно отображаемый в виде маркеров списка.
HTML-элемент <li> представляет собой элемент в списке.
HTML-элемент <a> используется для определения гиперссылки, создавая ссылку между различными страницами.

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

✨ Проверить решение и практиковаться

Макет раздела домашней страницы

Далее, завершите макет домашней страницы, которая состоит из трех частей: заголовка, текста и изображения.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

HTML-элемент <section> представляет собой общий автономный раздел документа
HTML-элемент <h1> представляет собой заголовок для содержимого в элементе <section>.
HTML-элемент <p> представляет собой абзац.

✨ Проверить решение и практиковаться

Резюме

В этом практическом занятии вы узнали структурировать и оформлять заголовок и макет домашней страницы, сосредоточившись на создании гостеприимного и удобного для навигации интерфейса для "Pet's House". В этом практическом занятии подчеркнута важность первого впечатления и奠定ены основы для создания пользователь-friendly веб-сайта.