БЕСПЛАТНЫЕ семинары
СЕРТИФИКАТ 8 ак.часов
ПОЛУЧИТЬ СЕЙЧАС >>>

Создание информационной веб-страницы с помощью языка HTML

Автор: Гаева Анна Владимировна

Организация: НТГСПИ

Населенный пункт: Свердловская область, г. Нижний Тагил

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

Ключевые слова: веб-страница, HTML, создание информационной веб-страницы, CSS, веб-дизайн.

Creating an information web page using HTML

Annotation

This article presents the steps of creating a web page aimed at educational content. The resource is designed as an adaptive web page with a modern design, which is displayed correctly on all devices.

Keywords: web page, HTML, information web page creation, CSS, web design.

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

Для начала нам нужно выбрать тему для страницы и написать структуру, чтобы было на что ориентироваться. Мы выберем тему: «Математика в природе», а также определим, что будет на нашей странице. Наша страница будет содержать:

1. Заголовок;

2. Три карточки с математическими закономерностями (Числа Фибоначчи, Фракталы, Оптимальные формы);

3. Галерею изображений;

4. Цитату;

5. Дополнительную карточку о математике в живых организмах.

Этапы создания веб-страницы:

Создаем стандартную структуру HTML-документа:

Листинг 1

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Математика в природе</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>

/* Здесь будут наши стили */

</style>

</head>

<body>

<div class="container">

<header>

<h1><i class="fas fa-seedling"></i> Математика в природе</h1>

</header>

<div class="content">

/* Основной контент будет здесь */

</div>

</body>

</html>

Добавляем базовые стили:

Листинг 2

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Arial', sans-serif;

}

body {

background: linear-gradient(135deg, #1a2a6c, #2c3e50);

color: #333;

line-height: 1.5;

padding: 20px;

min-height: 100vh;

}

.container {

max-width: 1000px;

margin: 0 auto;

background: white;

border-radius: 15px;

overflow: hidden;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

}

header {

background: linear-gradient(to right, #2c3e50, #1a2a6c);

color: white;

text-align: center;

padding: 30px 20px;

}

header h1 {

font-size: 2rem;

}

Создаем информационные карточки:

Листинг 3

<div class="cards">

<div class="card">

<h2><i class="fas fa-hashtag"></i> Числа Фибоначчи</h2>

<p>Последовательность чисел, где каждое следующее число является суммой двух предыдущих (0, 1, 1, 2, 3, 5, 8...).</p>

<div class="examples">

<h3>Примеры в природе:</h3>

<ul>

<li>Расположение листьев</li>

<li>Семена подсолнуха</li>

<li>Сосновые шишки</li>

<li>Раковины моллюсков</li>

</ul>

</div>

/* Аналогичные карточки для фракталов и оптимальных форм *\

</div>

Делаем галерею изображений:

Листинг 4

<div class="gallery">

<div class="gallery-item">

<img src="1.jpg" alt="Фибоначчи в подсолнухе">

<div class="image-caption">Фибоначчи в подсолнухе</div>

</div>

/* Еще три аналогичных элемента *\

</div>

Добавляем блок с цитатой:

Листинг 5

<div class="quote">

"Математика — это язык, на котором написана книга природы."

<span class="quote-author">— Галилео Галилей</span>

</div>

Добавляем адаптивность:

Листинг 6

@media (max-width: 768px) {

.cards {

flex-direction: column;

}

.gallery {

grid-template-columns: 1fr;

}

header h1 {

font-size: 1.7rem;

}

Также добавляем стиль css для каждого блока.

Рис.1. Итоговый вид страницы

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

Вы можете использовать этот пример как шаблон и создать свои уникальные информационные веб-страницы.

Список источников информации

Sara Cope transform / Sara Cope [Электронный ресурс] // css-tricks : [сайт]. — URL: https://css-tricks.com/almanac/properties/t/transform/ (дата обращения: 29.05.2025).
Веб-технологии для разработчиков / [Электронный ресурс] // MDN Web Docs : [сайт]. — URL: https://developer.mozilla.org/ru/docs/Web (дата обращения: 29.05.2025).
Нурмагомедова, Н. Х. Лабораторный практикум по дисциплине «Web-технологии» : учебное пособие / Н. Х. Нурмагомедова. — Махачкала : ДГПУ, 2023 — Часть 1 : Язык HTML — 2023. — 53 с. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/book/406952 (дата обращения: 30.05.2025). — Режим доступа: для авториз. пользователей.

Приложения:

file0.docx (199,5 КБ)

Опубликовано: 02.06.2025

ПУБЛИКАЦИИ РЕЦЕНЗИИ КОНКУРСЫ ВЕБИНАРЫ СЕМИНАРЫ КУРСЫ

© 2010–2025, Всероссийское педагогическое издание «Учительский журнал»
ISSN: 2782 – 4209, УДК 371.321.1(051), ББК 74.202.701, Авт. знак: У92
Свидетельство о регистрации СМИ ЭЛ № ФС 77 – 82562 от 30.12.21
Для писем: 125222, Москва, a/я 8, Учительский журнал
E-mail: info@teacherjournal.ru
Телефон: (925) 664-32-11

16+

Создание информационной веб-страницы с помощью языка HTML

Ключевые слова: веб-страница, HTML, создание информационной веб-страницы, CSS, веб-дизайн.

Creating an information web page using HTML

Annotation

This article presents the steps of creating a web page aimed at educational content. The resource is designed as an adaptive web page with a modern design, which is displayed correctly on all devices.

Keywords: web page, HTML, information web page creation, CSS, web design.

1. Заголовок;

2. Три карточки с математическими закономерностями (Числа Фибоначчи, Фракталы, Оптимальные формы);

3. Галерею изображений;

4. Цитату;

5. Дополнительную карточку о математике в живых организмах.

Этапы создания веб-страницы:

Создаем стандартную структуру HTML-документа:

Листинг 1

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Математика в природе</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>

/* Здесь будут наши стили */

</style>

</head>

<body>

<div class="container">

<header>

<h1><i class="fas fa-seedling"></i> Математика в природе</h1>

</header>

<div class="content">

/* Основной контент будет здесь */

</div>

</div>

</body>

</html>

Добавляем базовые стили:

Листинг 2

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Arial', sans-serif;

}

body {

background: linear-gradient(135deg, #1a2a6c, #2c3e50);

color: #333;

line-height: 1.5;

padding: 20px;

min-height: 100vh;

}

.container {

max-width: 1000px;

margin: 0 auto;

background: white;

border-radius: 15px;

overflow: hidden;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

}

header {

background: linear-gradient(to right, #2c3e50, #1a2a6c);

color: white;

text-align: center;

padding: 30px 20px;

}

header h1 {

font-size: 2rem;

}

Создаем информационные карточки:

Листинг 3

<div class="cards">

<div class="card">

<h2><i class="fas fa-hashtag"></i> Числа Фибоначчи</h2>

<p>Последовательность чисел, где каждое следующее число является суммой двух предыдущих (0, 1, 1, 2, 3, 5, 8...).</p>

<div class="examples">

<h3>Примеры в природе:</h3>

<ul>

<li>Расположение листьев</li>

<li>Семена подсолнуха</li>

<li>Сосновые шишки</li>