В этом практическом занятии вы создадите форму обратной связи и нижний колонтитул, которые важны для взаимодействия и предоставления дополнительной информации.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/BasicStructureGroup -.-> html/charset("Character Encoding")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links")
html/FormsandInputGroup -.-> html/forms("Form Elements")
html/FormsandInputGroup -.-> html/form_valid("Form Validation")
html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/head_elems -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
html/charset -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
html/layout -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
html/nav_links -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
html/forms -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
html/form_valid -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
html/form_access -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
html/inter_elems -.-> lab-271711{{"Разметка формы и нижнего колонтитула"}}
end
Разметка раздела "Свяжитесь с нами"
Раздел "Свяжитесь с нами" состоит из двух частей: текстового абзаца и содержания формы. В HTML есть несколько типов элементов формы, таких как текстовые поля формы, формы с множественным выбором, формы с кнопкой отправки и т.д.
<!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>
<section id="about" class="story-sect">
<div class="section-text">
<h2>About Us</h2>
<p>
we're about creating a community of happy pets and happier pet
owners. <br /><br />
Our exceptional customer service team is dedicated to providing
you with a seamless shopping experience, offering expert support
from browsing to delivery and beyond. <br /><br />We understand
the importance of fast, reliable service, which is why we offer
expedited shipping options and hassle-free returns.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<section id="display" class="samples">
<div class="section-text">
<h2>Display</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img src="images/service-1.png" alt="Dog walking services" />
<figcaption>Provide pet care services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-2.png" alt="Pet check-up services" />
<figcaption>Provide pet check-up services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-3.png" alt="Pet washing services" />
<figcaption>Provide pet washing services.</figcaption>
</figure>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contact Us</h2>
<p>
Welcome to our pet website! We're thrilled to have you here and
eager to share with you the array of services we offer for you and
your beloved pets. Whether you're looking for grooming, boarding,
training, or any other pet-related service, we've got you covered.
Our team is passionate about animals and committed to providing
the best care possible. If you're interested in learning more
about our services or if you're considering joining our community,
we encourage you to fill out our form. This will allow us to
understand your needs better and offer tailored solutions for you
and your pet. Welcome aboard, and we look forward to serving you!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Name <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Email <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demand for services<br />
<select name="message" id="message" class="txt-box">
<option value="">Feeding pets at home</option>
<option value="">Pet play service</option>
<option value="">Pet bathing service</option>
<option value="">Join us</option>
</select>
<br /> </label
><br />
<input class="btn" id="submit" type="submit" value="Submit" />
</form>
</div>
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
HTML-элемент <form> представляет собой раздел документа, содержащий интерактивные элементы для отправки информации.
HTML-элемент <label> представляет собой подпись для элемента в пользовательском интерфейсе. Чтобы явно связать элемент <label> с элементом <input>, сначала нужно добавить атрибут id к элементу <input>. Затем добавьте атрибут for к элементу <label>, где значение for совпадает с id в элементе <input>.
HTML-элемент <input> используется для создания интерактивных элементов для веб-форм, чтобы получать данные от пользователя; существует широкий спектр типов вводимых данных и элементов управления, в зависимости от устройства и пользовательского агента.
HTML-элемент <select> представляет собой элемент управления, который предоставляет меню вариантов.
Каждый элемент <option> должен иметь атрибут value, содержащий данные, которые будут отправлены на сервер, когда этот вариант выбран. Если атрибут value не указан, значение по умолчанию равно тексту, содержащемуся внутри элемента.
Атрибут type позволяет указать различные типы элементов ввода.
type="text" означает, что это текстовое поле ввода.
type="email" означает, что это поле ввода электронной почты.
type="submit" означает, что это элемент формы с кнопкой отправки.
Нажмите кнопку Go Live в нижнем правом углу Окружения, чтобы открыть порт 8080, и нажмите кнопку Web 8080 в верхнем левом углу Окружения, чтобы просмотреть результаты страницы.
Далее мы хотим сделать так, чтобы при нажатии на элементы Home, About Us, Display и Contact в навигационной панели в шапке мы могли перейти в соответствующую область содержания.
Добавление тега <a> к элементу списка <ul> в навигации:
HTML-элемент <a> (или якорный элемент), с его атрибутом href, создает гиперссылку на веб-страницы, файлы, адреса электронной почты, места в одной и той же странице или на что угодно другое, на которое может ссылаться URL-адрес.
Содержимое внутри каждого <a> должно указывать на назначение ссылки. Если атрибут href присутствует, нажатие клавиши Enter при фокусе на элементе <a> активирует его. Здесь мы добавляем имя атрибута id соответствующей разметки внутри атрибута href.
Наконец, реализуется содержание раздела нижнего колонтитула.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--header-section-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#about">About Us</a></li>
<li><a class="nav-link" href="#display">Display</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--main section-->
<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>
<section id="about" class="story-sect">
<div class="section-text">
<h2>About Us</h2>
<p>
we're about creating a community of happy pets and happier pet
owners. <br /><br />
Our exceptional customer service team is dedicated to providing
you with a seamless shopping experience, offering expert support
from browsing to delivery and beyond. <br /><br />We understand
the importance of fast, reliable service, which is why we offer
expedited shipping options and hassle-free returns.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<!-- display section -->
<section id="display" class="samples">
<div class="section-text">
<h2>Display</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img src="images/service-1.png" alt="Dog walking services" />
<figcaption>Provide pet care services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-2.png" alt="Pet check-up services" />
<figcaption>Provide pet check-up services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-3.png" alt="Pet washing services" />
<figcaption>Provide pet washing services.</figcaption>
</figure>
</div>
</div>
</section>
<!-- contact section -->
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contact Us</h2>
<p>
Welcome to our pet website! We're thrilled to have you here and
eager to share with you the array of services we offer for you and
your beloved pets. Whether you're looking for grooming, boarding,
training, or any other pet-related service, we've got you covered.
Our team is passionate about animals and committed to providing
the best care possible. If you're interested in learning more
about our services or if you're considering joining our community,
we encourage you to fill out our form. This will allow us to
understand your needs better and offer tailored solutions for you
and your pet. Welcome aboard, and we look forward to serving you!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Name <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Email <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demand for services<br />
<select name="message" id="message" class="txt-box">
<option value="">Feeding pets at home</option>
<option value="">Pet play service</option>
<option value="">Pet bathing service</option>
<option value="">Join us</option>
</select>
<br /> </label
><br />
<input class="btn" id="submit" type="submit" value="Submit" />
</form>
</div>
</div>
</section>
</div>
</main>
<footer>
<span class="contact-us">Contact Us</span>
<span class="company-info">Created by Lotus</span>
<span>@Copyright 2024</span>
</footer>
</body>
</html>
HTML-элемент <span> - это общий встроенный контейнер для фразового содержания, который по своей природе не представляет ничего особенного. Его можно использовать для группировки элементов для стилизации (с использованием атрибутов class или id) или потому, что они имеют общие значения атрибутов, таких как lang. Его следует использовать только в том случае, если нет других семантических элементов, подходящих для данной ситуации. Элемент <span> очень похож на элемент <div>, но <div> - это элемент уровня блока, а <span> - элемент уровня строчного.
HTML-элемент <link> задает связи между текущим документом и внешним ресурсом. Этот элемент наиболее часто используется для ссылки на таблицы стилей, но также используется для создания иконок сайта (как иконок в стиле "favicon", так и иконок для домашнего экрана и приложений на мобильных устройствах) и других вещей.
Мы используем различные HTML-элементы для размещения содержания страницы. Если вы хотите получить эффект изображения, нам нужно использовать CSS. Здесь подготовлен полный CSS-файл (style.css), и мы используем элемент <link> для его подключения.
Нажмите кнопку Go Live в нижнем правом углу Окружения, чтобы открыть порт 8080, и нажмите кнопку Web 8080 в верхнем левом углу Окружения, чтобы просмотреть результаты страницы.
В этом практическом занятии вы завершили сайт, добавив форму обратной связи и нижний колонтитул, и узнали о взаимодействии пользователя и доступности информации. Это практическое занятие подчеркнуло важность каналов связи и согласованного дизайна в веб-разработке, завершив структуру сайта.
Поздравляем с введением в HTML. Если вы хотите узнать, как стилизовать свои страницы, изучите практическое занятие по CSS!
