7 подписчиков

Учебник по HTML для пенсионеров (часть 3)

25 ноября25 ноя

69 мин

(продолжение)

Глава 7: Ссылки — "двери" в другие страницы

7.1. Волшебный тег <a> и его атрибут href

Введение: Создаём "двери" между веб-страницами Тег <a> (от английского "anchor" — якорь) — это один из самых важных и волшебных тегов в HTML. Он превращает обычный текст в кликабельные ссылки, которые соединяют веб-страницы в единую "паутину". Без ссылок не было бы и Всемирной паутины! Часть 1: Что такое тег <a> и атрибут href? Базовая структура ссылки: html <a href="адрес">текст ссылки</a> Разберем по частям: <a> — тег-контейнер для создания ссылки. href (hypertext reference) — атрибут, указывающий куда ведет ссылка. Текст ссылки — видимая часть, которую кликает пользователь. Простой пример: html <a href="https://yandex.ru">Перейти на Яндекс</a> Результат: При клике на данную ссылку Вы попадёте на главную страницу портала Яндекс. Часть 2: Виды ссылок — куда можно вести пользователя 1. Ссылка на внешний сайт html <a href="https://www.google.com">Поиск в Google</a>

<a href="http

(продолжение)

Глава 7: Ссылки — "двери" в другие страницы

7.1. Волшебный тег <a> и его атрибут href

<a href="http

Оглавление

Часть 1: Что такое тег <a> и атрибут href?

(продолжение)

Глава 7:

Ссылки — "двери" в другие страницы

7.1. Волшебный тег <a> и его атрибут href

Введение: Создаём "двери" между веб-страницами

Тег <a> (от английского "anchor" — якорь) — это один из самых важных и волшебных тегов в HTML. Он превращает обычный текст в кликабельные ссылки, которые соединяют веб-страницы в единую "паутину". Без ссылок не было бы и Всемирной паутины!

Часть 1: Что такое тег <a> и атрибут href?

Базовая структура ссылки:

html

<a href="адрес">текст ссылки</a>

Разберем по частям:

<a> — тег-контейнер для создания ссылки.

href (hypertext reference) — атрибут, указывающий куда ведет ссылка.

Текст ссылки — видимая часть, которую кликает пользователь.

Простой пример:

html

<a href="https://yandex.ru">Перейти на Яндекс</a>

Результат: При клике на данную ссылку Вы попадёте на главную страницу портала Яндекс.

Часть 2: Виды ссылок — куда можно вести пользователя

1. Ссылка на внешний сайт

html

<a href="https://www.google.com">Поиск в Google</a>
<a href="https://ru.wikipedia.org">Википедия</a>
<a href="https://www.youtube.com">Смотреть видео на YouTube</a>

2. Ссылка на другую страницу Вашего сайта

html

<a href="about.html">Обо мне</a>
<a href="hobbies.html">Мои увлечения</a>
<a href="contacts.html">Контакты</a>

3. Ссылка на email

html

<a href="mailto: example@mail.ru">Написать мне письмо</a>

При клике откроется почтовая программа

4. Ссылка на телефонный номер

html

<a href="tel: +71234567890">Позвонить мне</a>

На мобильных устройствах откроется набор номера

Часть 3: Атрибуты тега <a>

target — где открыть ссылку

html


<a href="page.html">Обычная ссылка</a>


<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>


<a href="page.html" target="_parent">В родительском окне</a>

Практический пример:

html

<a href="https://htmlbook.ru" target="_blank">Справочник HTML (откроется в новой вкладке)</a>

title — всплывающая подсказка

html

При наведении курсора покажется подсказка

Часть 4: Практические примеры использования

Пример 1: Навигационное меню сайта

html

<nav>
<h3>Навигация по сайту:</h3>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">Обо мне</a></li>
<li><a href="hobbies.html">Мои увлечения</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</nav>

Пример 2: Ссылки в тексте

html

<p>Я учу HTML по <a href="https://htmlbook.ru" target="_blank">онлайн-справочнику</a> и смотрю видеоуроки на <a href="https://www.youtube.com">YouTube</a>. Если у Вас есть вопросы, <a href="mailto: moyapochta@example.com">напишите мне</a>.</p>

Пример 3: Ссылки на полезные ресурсы

html

<h3>Полезные ресурсы для учебы:</h3>
<ul>
<li><a href="https://validator.w3.org" target="_blank" title="Проверка HTML-кода">W3C Validator</a> — проверка валидности кода</li>
<li><a href="https://www.w3schools.com" target="_blank">W3Schools</a> — уроки по веб-технологиям</li>
<li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a> — документация для разработчиков</li>
</ul>

Часть 5: Относительные и абсолютные пути

Абсолютные пути (полный адрес)

html

<a href="https://www.example.com/folder/page.html">Полная ссылка</a>
<a href="https://yandex.ru">Внешний сайт</a>

Относительные пути (относительно текущей страницы)

html


<a href="page.html">Страница в этой папке</a>


<a href="pages/about.html">Страница в папке pages</a>


<a href="../index.html">Страница в родительской папке</a>


<a href="../other/projects.html">Страница в другой папке</a>

Визуализация структуры папок:

text

Мой первый сайт/
├── index.html
├── about.html
├── hobbies/
│ ├── garden.html
│ └── books.html
└── contacts.html

Примеры ссылок для этой структуры:

html


<a href="about.html">Обо мне</a>
<a href="hobbies/garden.html">Мой сад</a>
<a href="contacts.html">Контакты</a>


<a href="../index.html">На главную</a>
<a href="../about.html">Обо мне</a>
<a href="books.html">Мои книги</a>

Часть 6: Особые виды ссылок

Якорные ссылки (внутри страницы)

html


<h2 id="chapter1">Глава 1</h2>
<p>Текст первой главы...</p>

<h2 id="chapter2">Глава 2</h2>
<p>Текст второй главы...</p>


<a href="#chapter1">Перейти к главе 1</a>
<a href="#chapter2">Перейти к главе 2</a>

Ссылка для скачивания файла

html

<a href="document.pdf" download>Скачать PDF</a>
<a href="photo.jpg" download="my_photo.jpg">Скачать фотографию</a>

Ссылка-кнопка

html

<a href="order.html" style="display: inline-block; padding: 10px 20px; background: blue; color: white; text-decoration: none;">Заказать сейчас</a>

Часть 7: Практическое задание

Создайте страницу с различными типами ссылок:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Практика с ссылками</title>
<meta charset="utf-8">
</head>
<body>
<h1>Мои полезные ссылки</h1>

<h2>Навигация по моему сайту</h2>
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">Информация обо мне</a></li>
<li><a href="hobbies/garden.html">Мой сад</a></li>
<li><a href="hobbies/books.html">Мои книги</a></li>
<li><a href="contacts.html">Как со мной связаться</a></li>
</ul>

<h2>Полезные образовательные ресурсы</h2>
<ul>
<li><a href="https://htmlbook.ru" target="_blank" title="Справочник по HTML и CSS">HTML Book</a> — мой главный помощник в учебе</li>
<li><a href="https://validator.w3.org" target="_blank">W3C Validator</a> — проверяю здесь свой код</li>
<li><a href="https://www.w3schools.com" target="_blank">W3Schools</a> — смотрю примеры кода</li>
<li><a href="https://ru.wikipedia.org" target="_blank">Википедия</a> — нахожу информацию для статей</li>
</ul>

<h2>Ссылки для связи</h2>
<ul>
<li><a href="mailto: ivanov@example.com">Написать мне на email</a></li>
<li><a href="tel: +79123456789">Позвонить по телефону</a></li>
</ul>

<h2>Быстрая навигация по странице</h2>
<p>
<a href="#resources">Образовательные ресурсы</a> |
<a href="#contacts">Контакты</a> |
<a href="#about">О проекте</a>
</p>


<h3 id="resources">Образовательные ресурсы</h3>
<p>Здесь я собираю полезные сайты для обучения...</p>

<h3 id="contacts">Контакты</h3>
<p>Как со мной связаться...</p>

<h3 id="about">О проекте</h3>
<p>Информация о моем сайте...</p>

<p><a href="#">Наверх ↑</a></p>
</body>
</html>

Часть 8: Стилизация ссылок

CSS-свойства для оформления ссылок:

html

<head>
<style>
/* Базовая стилизация ссылок */
a {
color: #0066cc;
text-decoration: none;
}

/* При наведении */
a:hover {
color: #ff6600;
text-decoration: underline;
}

/* Посещенные ссылки */
a:visited {
color: #663399;
}

/* Активные ссылки (при нажатии) */
a:active {
color: #ff0000;
}

/* Стили для навигационных ссылок */
.nav-link {
display: inline-block;
padding: 10px 15px;
background: #f0f0f0;
border-radius: 5px;
margin: 5px;
}

.nav-link:hover {
background: #e0e0e0;
}
</style>
</head>

Часть 9: Частые ошибки и лучшие практики

❌ НЕПРАВИЛЬНО:

html


<a>Просто текст</a>


<a href="C:\Users\Name\file.html">Локальный путь</a>


<a href="page.html">кликните здесь</a>


<a href="page.html">https://www.mysite.com/folder/subfolder/page.html</a>

✅ ПРАВИЛЬНО:

html


<a href="about.html">Обо мне</a>


<a href="gardening-tips.html">Полезные советы по садоводству</a>


<a href="https://example.com" target="_blank">Пример сайта</a>


<a href="photo.jpg" title="Моя фотография сада">Посмотреть фото</a>

Лучшие практики:

Осмысленный текст — понятно, куда ведет ссылка

target="_blank" для внешних сайтов

title для дополнительной информации

Относительные пути для внутренних страниц

Проверка работоспособности всех ссылок

Часть 10: Проверка и тестирование ссылок

Чек-лист после создания ссылок:

Все ссылки ведут куда нужно

Внешние ссылки открываются в новой вкладке

Относительные пути работают правильно

Email и телефонные ссылки функционируют

Текст ссылок понятен и информативен

Нет "битых" ссылок (ошибка 404)

Тестирование на разных устройствах:

Компьютер (разные браузеры)

Планшет

Смартфон

Проверка на разных разрешениях экрана

Заключение

Что Вы теперь умеете:

✅ Создавать различные типы ссылок

✅ Правильно использовать атрибут href

✅ Работать с относительными и абсолютными путями

✅ Добавлять ссылки для email и телефонов

✅ Создавать навигацию между страницами

✅ Использовать дополнительные атрибуты (target, title)

Ключевые преимущества ссылок:

🌐 Соединяют страницы в единую сеть

🧭 Организуют навигацию по сайту

📞 Обеспечивают связь с посетителями

🔗 Интегрируют с внешними ресурсами

♿ Улучшают доступность сайта

Запомните: Ссылки — это "кровеносная система" веба. Они превращают набор отдельных страниц в единую, взаимосвязанную структуру, которую мы называем Всемирной паутиной.

Теперь Ваш сайт обретает настоящую жизнь — страницы соединяются друг с другом, создавая удобную навигацию и полноценную веб-структуру!

- * * * -

7.2. Как сделать ссылку на другой сайт (например, на любимый новостной портал)

Введение: Выходим за пределы своего сайта

Ссылки на внешние сайты — это как двери в другие "дома" интернета. Они позволяют Вашим посетителям переходить на полезные ресурсы, делиться дополнительной информацией и расширять их опыт после посещения Вашего сайта.

Часть 1: Базовая структура внешней ссылки

Основной синтаксис:

html

<a href="https://адрес-сайта.ру">Название сайта</a>

Ключевые особенности внешних ссылок:

Всегда начинаются с https:// или http://

Содержат полный адрес сайта

Рекомендуется открывать в новой вкладке (target="_blank")

Часть 2: Пошаговая инструкция создания внешней ссылки

Шаг 1: Находим адрес сайта

Откройте любимый новостной портал и скопируйте адрес из адресной строки браузера:

text

https://ria.ru // РИА Новости
https://www.vesti.ru // Вести.ru
https://lenta.ru // Лента.ру
https://rg.ru // Российская газета

Шаг 2: Создаем базовую ссылку

html

<a href="https://ria.ru">РИА Новости</a>

Шаг 3: Добавляем открытие в новой вкладке

html

<a href="https://ria.ru" target="_blank">РИА Новости</a>

Шаг 4: Добавляем всплывающую подсказку

html

<a href="https://ria.ru" target="_blank" title="Читайте последние новости на РИА Новости">РИА Новости</a>

Часть 3: Практические примеры популярных новостных порталов

Пример 1: Основные государственные СМИ

html

<h3>Государственные новостные порталы:</h3>
<ul>
<li><a href="https://ria.ru" target="_blank" title="Федеральное агентство новостей">РИА Новости</a></li>
<li><a href="https://tass.ru" target="_blank" title="Информационное агентство России">ТАСС</a></li>
<li><a href="https://rg.ru" target="_blank" title="Официальное издание правительства">Российская газета</a></li>
<li><a href="https://www.vesti.ru" target="_blank" title="Новости телеканала Россия">Вести.ru</a></li>
</ul>

Пример 2: Независимые новостные ресурсы

html

<h3>Независимые новостные сайты:</h3>
<ul>
<li><a href="https://lenta.ru" target="_blank" title="Ежедневная интернет-газета">Лента.ру</a></li>
<li><a href="https://www.gazeta.ru" target="_blank" title="Ежедневная общественно-политическая газета">Газета.Ru</a></li>
<li><a href="https://www.kommersant.ru" target="_blank" title="Деловая газета Коммерсантъ">Коммерсантъ</a></li>
<li><a href="https://www.rbc.ru" target="_blank" title="Деловые новости и аналитика">РБК</a></li>
</ul>

Пример 3: Региональные и тематические новости

html

<h3>Тематические новостные ресурсы:</h3>
<ul>
<li><a href="https://www.sport-express.ru" target="_blank" title="Спортивные новости">Спорт-Экспресс</a></li>
<li><a href="https://www.kp.ru" target="_blank" title="Новости и события">Комсомольская правда</a></li>
<li><a href="https://aif.ru" target="_blank" title="Общественно-политическая газета">Аргументы и факты</a></li>
<li><a href="https://www.mk.ru" target="_blank" title="Ежедневная газета">Московский комсомолец</a></li>
</ul>

Часть 4: Полная страница с новостными ссылками

Создайте файл news_links.html:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мои любимые новостные порталы</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #2c3e50;
text-align: center;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #34495e;
background: #f8f9fa;
padding: 10px;
border-left: 4px solid #3498db;
}
ul {
background: #f8f9fa;
padding: 15px 15px 15px 40px;
border-radius: 5px;
}
a {
color: #2980b9;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #e74c3c;
text-decoration: underline;
}
.note {
background: #fff3cd;
padding: 15px;
border-left: 4px solid #ffc107;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>📰 Мои любимые новостные порталы</h1>

<div class="note">
<strong>Примечание:</strong> Все ссылки открываются в новой вкладке,
чтобы Вы не потеряли мою страницу!
</div>

<h2>Российские основные государственные СМИ</h2>
<ul>
<li>
<a href="https://ria.ru" target="_blank" title="Федеральное агентство новостей">
<strong>РИА Новости</strong>
</a> — одно из крупнейших информационных агентств России
</li>
<li>
<a href="https://tass.ru" target="_blank" title="Информационное агентство России">
<strong>ТАСС</strong>
</a> — ведущее государственное информационное агентство
</li>
<li>
<a href="https://rg.ru" target="_blank" title="Официальное издание правительства">
<strong>Российская газета</strong>
</a> — официальный печатный орган правительства РФ
</li>
<li>
<a href="https://www.vesti.ru" target="_blank" title="Новости телеканала Россия">
<strong>Вести.ru</strong>
</a> — новостной портал телеканала "Россия"
</li>
</ul>

<h2>📊 Независимые новостные ресурсы</h2>
<ul>
<li>
<a href="https://lenta.ru" target="_blank" title="Ежедневная интернет-газета">
<strong>Лента.ру</strong>
</a> — одна из первых и самых популярных интернет-газет
</li>
<li>
<a href="https://www.gazeta.ru" target="_blank" title="Ежедневная общественно-политическая газета">
<strong>Газета.Ru</strong>
</a> — ежедневная электронная газета
</li>
<li>
<a href="https://www.kommersant.ru" target="_blank" title="Деловая газета Коммерсантъ">
<strong>Коммерсантъ</strong>
</a> — влиятельная деловая газета
</li>
<li>
<a href="https://www.rbc.ru" target="_blank" title="Деловые новости и аналитика">
<strong>РБК</strong>
</a> — деловые новости и аналитические материалы
</li>
</ul>

<h2>🎯 Тематические и региональные новости</h2>
<ul>
<li>
<a href="https://www.sport-express.ru" target="_blank" title="Спортивные новости">
<strong>Спорт-Экспресс</strong>
</a> — самые свежие спортивные новости
</li>
<li>
<a href="https://www.kp.ru" target="_blank" title="Новости и события">
<strong>Комсомольская правда</strong>
</a> — популярная ежедневная газета
</li>
<li>
<a href="https://aif.ru" target="_blank" title="Общественно-политическая газета">
<strong>Аргументы и факты</strong>
</a> — общественно-политическая газета
</li>
<li>
<a href="https://www.mk.ru" target="_blank" title="Ежедневная газета">
<strong>Московский комсомолец</strong>
</a> — ежедневная газета с широкой тематикой
</li>
</ul>

<h2>🌐 Международные новости на русском</h2>
<ul>
<li>
...
</li>
</ul>

<h2>🔧 Полезные инструменты для веб-разработки</h2>
<ul>
<li>
<a href="https://validator.w3.org" target="_blank" title="Проверка HTML-кода">
<strong>W3C Validator</strong>
</a> — проверяю здесь правильность своего HTML-кода
</li>
<li>
<a href="https://htmlbook.ru" target="_blank" title="Справочник по HTML и CSS">
<strong>HTML Book</strong>
</a> — мой главный помощник в изучении HTML
</li>
</ul>

<div class="note">
<strong>Совет:</strong> Добавляйте сюда свои любимые сайты и регулярно обновляйте список!
</div>

<hr>
<p><em>Страница создана: [сегодняшняя дата] | Последнее обновление: [сегодняшняя дата]</em></p>
<p><a href="index.html">← Вернуться на главную страницу</a></p>
</body>
</html>

Часть 5: Особые случаи и нюансы

Ссылки на конкретные разделы сайтов:

html


<a href="https://ria.ru/20240520/novost-1954321654.html" target="_blank">
Читать новость на РИА Новости
</a>


<a href="https://www.vesti.ru/finance" target="_blank">
Финансовые новости на Вестях
</a>


<a href="https://lenta.ru/search?query=HTML" target="_blank">
Поиск статей про HTML на Ленте.ру
</a>

Ссылки с UTM-метками (для аналитики):

html

<a href="https://ria.ru?utm_source=mysite&utm_medium=referral" target="_blank">
РИА Новости (реферальная ссылка)
</a>

Часть 6: Практическое задание

Создайте свою персонализированную страницу с ссылками:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мои любимые сайты</title>
<meta charset="utf-8">
</head>
<body>
<h1>⭐ Мои любимые сайты в интернете</h1>

<h2>📰 Новостные порталы, которые я читаю</h2>
<ul>
<li>
<a href="[адрес Вашего любимого новостного сайта 1]" target="_blank">
[Название сайта 1]
</a> — [краткое описание, почему нравится]
</li>
<li>
<a href="[адрес Вашего любимого новостного сайта 2]" target="_blank">
[Название сайта 2]
</a> — [краткое описание, почему нравится]
</li>
</ul>

<h2>🎓 Образовательные ресурсы</h2>
<ul>
<li>
<a href="[адрес образовательного сайта]" target="_blank">
[Название сайта]
</a> — [что изучаю/изучал]
</li>
</ul>

<h2>🎵 Развлечения и хобби</h2>
<ul>
<li>
<a href="[адрес сайта по хобби]" target="_blank">
[Название сайта]
</a> — [чем занимаюсь/увлекаюсь]
</li>
</ul>

<h2>🛒 Полезные сервисы</h2>
<ul>
<li>
<a href="[адрес полезного сайта]" target="_blank">
[Название сайта]
</a> — [для чего использую]
</li>
</ul>
</body>
</html>

Часть 7: Лучшие практики и рекомендации

✅ ЧТО ДЕЛАТЬ:

html


<a href="https://example.com" target="_blank">Правильно</a>


<a href="https://example.com" target="_blank">Откроется в новой вкладке</a>


<a href="https://ria.ru" target="_blank">РИА Новости - государственное агентство новостей</a>




❌ ЧЕГО ИЗБЕГАТЬ:

html


<a href="example.com">Неправильно (без протокола)</a>


<a href="https://ria.ru" target="_blank">тут</a>


<a href="http://example.com">Небезопасно (http вместо https)</a>

Проверка ссылок:

Тестируйте все ссылки после создания

Убедитесь, что сайты доступны

Проверьте, что открываются в новой вкладке

Убедитесь, что описания точны и полезны

Часть 8: Дополнительные возможности

Добавление иконок к ссылкам:

html

Группировка ссылок по категориям:

html

<div class="news-category">
<h3>Государственные СМИ</h3>
<div class="links">
<a href="https://ria.ru" target="_blank">РИА Новости</a>
<a href="https://tass.ru" target="_blank">ТАСС</a>
</div>
</div>

Заключение

Что Вы теперь умеете:

✅ Создавать ссылки на внешние сайты

✅ Правильно формировать URL-адреса

✅ Использовать target="_blank" для внешних ссылок

✅ Добавлять информативные описания

✅ Создавать структурированные списки ссылок

✅ Стилизовать ссылки для лучшего восприятия

Преимущества внешних ссылок:

🌐 Расширяют возможности вашего сайта

📚 Предоставляют дополнительную информацию

🔗 Устанавливают связи с авторитетными ресурсами

🎯 Улучшают пользовательский опыт

🔍 Могут положительно влиять на SEO

Запомните: Внешние ссылки — это проявление щедрости в интернете. Вы делитесь с посетителями полезными ресурсами и помогаете им находить дополнительную информацию beyond Вашего сайта.

Теперь Ваш сайт стал частью большой веб-экосистемы, связанной с полезными и авторитетными ресурсами интернета!

- * * * -

7.3. Как сделать ссылку на другую свою страницу

Введение: Создаём навигацию внутри своего сайта

Ссылки между Вашими собственными страницами — это как комнаты в одном доме. Они создают логичную структуру сайта и позволяют посетителям легко перемещаться между разделами без использования кнопки "Назад" в браузере.

Часть 1: Базовые принципы внутренних ссылок

Основное отличие от внешних ссылок:

Не требуют https://

Используют относительные пути

Обычно открываются в текущей вкладке

Ведут на страницы вашего собственного сайта

Базовая структура:

html

<a href="имя-файла.html">Название страницы</a>

Часть 2: Структура папок проекта

Прежде чем создавать ссылки, давайте организуем наши файлы:

text

Мой первый сайт/
├── index.html (Главная страница)
├── about.html (Обо мне)
├── hobbies/ (Папка с увлечениями)
│ ├── garden.html (Мой сад)
│ ├── books.html (Мои книги)
│ └── cooking.html (Моя кухня)
├── contacts.html (Контакты)
└── resources/ (Полезные ресурсы)
└── links.html (Мои ссылки)

Часть 3: Типы относительных путей

1. Файл в той же папке (самый простой случай)

html


<a href="about.html">Обо мне</a>
<a href="contacts.html">Контакты</a>

2. Файл в подпапке

html


<a href="hobbies/garden.html">Мой сад</a>
<a href="hobbies/books.html">Мои книги</a>
<a href="hobbies/cooking.html">Моя кухня</a>

3. Файл в родительской папке

html


<a href="../index.html">На главную</a>
<a href="../about.html">Обо мне</a>

4. Файл в соседней папке

html


<a href="../resources/links.html">Полезные ссылки</a>

Часть 4: Практические примеры навигации

Пример 1: Навигационное меню для главной страницы

В файле index.html:

html

<nav>
<h2>Навигация по сайту:</h2>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">Обо мне</a></li>
<li><a href="hobbies/garden.html">Мой сад</a></li>
<li><a href="hobbies/books.html">Мои книги</a></li>
<li><a href="hobbies/cooking.html">Моя кухня</a></li>
<li><a href="resources/links.html">Полезные ссылки</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</nav>

Пример 2: Навигация внутри раздела "Увлечения"

В файле hobbies/garden.html:

html

<nav>
<h3>Разделы увлечений:</h3>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="../about.html">Обо мне</a></li>
<li><strong>Мой сад</strong></li>
<li><a href="books.html">Мои книги</a></li>
<li><a href="cooking.html">Моя кухня</a></li>
<li><a href="../contacts.html">Контакты</a></li>
</ul>
</nav>

Часть 5: Полный пример сайта с навигацией

Файл index.html (Главная страница):

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой личный сайт - Главная</title>
<meta charset="utf-8">
<style>
nav {
background: #f4f4f4;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 15px;
}
nav a {
text-decoration: none;
color: #333;
padding: 5px 10px;
border-radius: 3px;
}
nav a:hover {
background: #ddd;
}
.current {
font-weight: bold;
color: #0066cc;
}
</style>
</head>
<body>
<header>
<h1>🌸 Добро пожаловать на мой сайт!</h1>

<nav>
<ul>
<li><a href="index.html" class="current">Главная</a></li>
<li><a href="about.html">Обо мне</a></li>
<li><a href="hobbies/garden.html">Мой сад</a></li>
<li><a href="hobbies/books.html">Мои книги</a></li>
<li><a href="hobbies/cooking.html">Моя кухня</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<h2>Рад Вас видеть на моём сайте!</h2>
<p>Это моя первая попытка создать собственный веб-сайт. Здесь я буду делиться:</p>

<ul>
<li>Своими <a href="hobbies/garden.html">увлечениями и хобби</a></li>
<li><a href="about.html">Историей</a> моего пути в веб-разработку</li>
<li>Полезными <a href="resources/links.html">ссылками и ресурсами</a></li>
</ul>

<h3>Новые добавления:</h3>
<ul>
<li>📚 Недавно добавил страницу <a href="hobbies/books.html">"Мои книги"</a></li>
<li>🍲 Обновил раздел <a href="hobbies/cooking.html">"Моя кухня"</a></li>
<li>📞 Добавил <a href="contacts.html">контактную информацию</a></li>
</ul>
</main>

<footer>
<hr>
<p><small>© 2024 Мой первый сайт. Все права защищены.</small></p>
<p><a href="contacts.html">Связаться со мной</a> | <a href="resources/links.html">Полезные ресурсы</a></p>
</footer>
</body>
</html>

Файл hobbies/garden.html (Страница о саде):

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой сад - Мой личный сайт</title>
<meta charset="utf-8">
<style>
/* Тот же стиль, что и в index.html */
nav { background: #f4f4f4; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 15px; }
nav a { text-decoration: none; color: #333; padding: 5px 10px; border-radius: 3px; }
nav a:hover { background: #ddd; }
.current { font-weight: bold; color: #0066cc; }
</style>
</head>
<body>
<header>
<h1>🌹 Мой любимый сад</h1>

<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="../about.html">Обо мне</a></li>
<li><a href="garden.html" class="current">Мой сад</a></li>
<li><a href="books.html">Мои книги</a></li>
<li><a href="cooking.html">Моя кухня</a></li>
<li><a href="../contacts.html">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<h2>Что растёт в моём саду</h2>

<h3>Цветы:</h3>
<ul>
<li>Розы (15 сортов)</li>
<li>Пионы</li>
<li>Тюльпаны</li>
<li>Георгины</li>
</ul>

<h3>Овощи:</h3>
<ul>
<li>Помидоры</li>
<li>Огурцы</li>
<li>Морковь</li>
<li>Картофель</li>
</ul>

<p>Также у меня есть страница про <a href="books.html">мои книги</a>
и <a href="cooking.html">кулинарные рецепты</a>.</p>
</main>

<footer>
<hr>
<p><small>© 2024 Мой первый сайт. <a href="../index.html">Вернуться на главную</a></small></p>
</footer>
</body>
</html>

Часть 6: Создание недостающих страниц

Базовый шаблон для новых страниц:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Название страницы - Мой личный сайт</title>
<meta charset="utf-8">
<style>
nav { background: #f4f4f4; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 15px; }
nav a { text-decoration: none; color: #333; padding: 5px 10px; border-radius: 3px; }
nav a:hover { background: #ddd; }
.current { font-weight: bold; color: #0066cc; }
</style>
</head>
<body>
<header>
<h1>Заголовок страницы</h1>

<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="../about.html">Обо мне</a></li>
<li><a href="garden.html">Мой сад</a></li>
<li><a href="books.html">Мои книги</a></li>
<li><a href="cooking.html">Моя кухня</a></li>
<li><a href="../contacts.html">Контакты</a></li>
</ul>
</nav>
</header>

<main>

<p>Содержимое этой страницы...</p>
</main>

<footer>
<hr>
<p><small>© 2024 Мой первый сайт. <a href="../index.html">Вернуться на главную</a></small></p>
</footer>
</body>
</html>

Часть 7: Практическое задание

Задание: Создайте полноценный сайт с 5 страницами

Создайте структуру папок как показано выше

Создайте все файлы используя шаблоны

Наполните страницы контентом:

about.html — информация о вас

hobbies/books.html — Ваши любимые книги

hobbies/cooking.html — Ваши рецепты

contacts.html — как с Вами связаться

Пример содержимого для about.html:

html

<main>
<h2>Немного обо мне</h2>
<p>Меня зовут [Ваше имя], и я начинающий веб-разработчик.</p>

<h3>Мой путь в IT</h3>
<p>Всё началось с [ваша история]...</p>

<h3>Мои цели</h3>
<ul>
<li>Освоить HTML и CSS</li>
<li>Создать свой блог о <a href="hobbies/garden.html">садоводстве</a></li>
<li>Помогать другим осваивать технологии</li>
</ul>

<p>Также Вы можете посмотреть мои <a href="hobbies/books.html">любимые книги</a>
или <a href="contacts.html">связаться со мной</a>.</p>
</main>

Часть 8: Проверка и отладка ссылок

Чек-лист проверки ссылок:

Проверьте все ссылки в навигации:

Главная → Обо мне ✅

Главная → Мой сад ✅

Главная → Мои книги ✅

Проверьте обратные ссылки:

Мой сад → Главная ✅

Мои книги → Главная ✅

Обо мне → Главная ✅

Проверьте перекрёстные ссылки:

Обо мне → Мой сад ✅

Мой сад → Мои книги ✅

Мои книги → Контакты ✅

Частые ошибки и их решение:

❌ Ошибка: "Страница не найдена" (404)

html


<a href="hobies/garden.html">Мой сад</a> 


<a href="hobbies/garden.html">Мой сад</a>

❌ Ошибка: Неправильный путь

html


<a href="index.html">Главная</a> 


<a href="../index.html">Главная</a>

✅ Правильная практика:

Всегда проверяйте пути

Используйте одинаковую структуру навигации

Тестируйте все ссылки после создания

Часть 9: Улучшение навигации

Добавление хлебных крошек:

html

<nav aria-label="Хлебные крошки">
<p>
<a href="../index.html">Главная</a> >
<a href="index.html">Увлечения</a> >
<span>Мой сад</span>
</p>
</nav>

Добавление кнопок "Вперёд/Назад":

html

<div class="navigation">
<a href="books.html">← Мои книги</a>
<a href="../index.html">Главная</a>
<a href="cooking.html">Моя кухня →</a>
</div>

Заключение

Что Вы теперь умеете:

✅ Создавать ссылки между своими страницами

✅ Правильно использовать относительные пути

✅ Строить многоуровневую структуру папок

✅ Создавать навигационные меню

✅ Организовывать логичную структуру сайта

Ключевые преимущества внутренних ссылок:

🏠 Создают единое пространство — посетители не теряются

🧭 Улучшают навигацию — легко перемещаться между разделами

📈 Увеличивают время на сайте — посетители просматривают больше страниц

🔍 Улучшают SEO — поисковые системы лучше понимают структуру сайта

♿ Повышают доступность — удобно для пользователей скринридеров

Золотые правила внутренних ссылок:

Единообразие — используйте одинаковую навигацию на всех страницах

Логичность — ссылки должны вести туда, куда ожидает пользователь

Проверка — всегда тестируйте все ссылки после создания

Доступность — делайте тексты ссылок понятными и информативными

Теперь Ваш сайт превратился из набора отдельных страниц в единую, взаимосвязанную систему с удобной навигацией и логичной структурой!

- * * * -

7.4. Практика: создаём вторую страницу "Мои любимые сайты" и связываем её с главной ссылками

Введение: Строим мосты между страницами

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

Часть 1: Подготовка структуры проекта

Создаем необходимые файлы:

Откройте папку "Мой первый сайт"

Создайте два файла:

index.html (главная страница)

favorite-sites.html (страница с любимыми сайтами)

Структура нашего мини-сайта:

text

Мой первый сайт/
├── index.html (Главная страница)
└── favorite-sites.html (Мои любимые сайты)

Часть 2: Создаём главную страницу (index.html)

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой личный сайт - Главная</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f9f9f9;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
margin-bottom: 30px;
}
h1 {
margin: 0;
font-size: 2.5em;
}
nav {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.nav-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 20px;
}
.nav-links a {
text-decoration: none;
color: #333;
padding: 10px 20px;
border: 2px solid #667eea;
border-radius: 25px;
transition: all 0.3s ease;
}
.nav-links a:hover {
background: #667eea;
color: white;
}
.main-content {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.feature-card {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
border-left: 4px solid #667eea;
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #666;
border-top: 1px solid #ddd;
}
.highlight {
background: #fff3cd;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #ffc107;
}
</style>
</head>
<body>
<header>
<h1>🌐 Добро пожаловать на мой сайт!</h1>
<p>Здесь я делюсь своим путешествием в мир веб-разработки</p>
</header>

<nav>
<ul class="nav-links">
<li><a href="index.html">🏠 Главная</a></li>
<li><a href="favorite-sites.html">⭐ Любимые сайты</a></li>
</ul>
</nav>

<main class="main-content">
<section>
<h2>Обо мне</h2>
<p>Привет! Меня зовут <strong>Александр</strong>, и я начинающий веб-разработчик. После выхода на пенсию я решил освоить современные технологии и научиться создавать сайты.</p>

<div class="feature-card">
<h3>🎯 Моя цель</h3>
<p>Научиться создавать красивые и полезные веб-сайты, которые помогут другим людям освоить компьютерные технологии в зрелом возрасте.</p>
</div>
</section>

<section>
<h2>Что я уже изучил</h2>
<ul>
<li>✅ Основы HTML и создание структуры страниц</li>
<li>✅ Работа с текстом: заголовки, абзацы, списки</li>
<li>✅ Создание ссылок и навигации между страницами</li>
<li>✅ Форматирование текста с помощью тегов</li>
</ul>
</section>

<section>
<h2>Мои проекты</h2>
<div class="feature-card">
<h3>📖 Страница с любимыми сайтами</h3>
<p>Я создал специальную страницу, где собрал все полезные ресурсы,
которые помогают мне в обучении. Там Вы найдёте:</p>
<ul>
<li>Обучающие платформы по программированию</li>
<li>Справочники по HTML и CSS</li>
<li>Полезные инструменты для разработки</li>
<li>Новостные порталы о технологиях</li>
</ul>
<p><a href="favorite-sites.html" style="color: #667eea; font-weight: bold;">
🚀 Посмотреть мою коллекцию сайтов →
</a></p>
</div>
</section>

<div class="highlight">
<h3>💡 Совет начинающим</h3>
<p>Не бойтесь начинать учиться в любом возрасте! Каждый день я узнаю что-то новое и убеждаюсь, что веб-разработка — это увлекательно и доступно для всех.</p>
</div>
</main>

<footer>
<p>📞 <strong>Свяжитесь со мной:</strong>
<a href="mailto:alexander@example.com">alexander@example.com</a></p>
<p>© 2024 Мой первый сайт. Создано с ❤️ и энтузиазмом.</p>
<p><a href="favorite-sites.html">Перейти к моим любимым сайтам</a></p>
</footer>
</body>
</html>

Часть 3: Создаём страницу с любимыми сайтами (favorite-sites.html)

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мои любимые сайты - Мой личный сайт</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f9f9f9;
}
header {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
margin-bottom: 30px;
}
h1 {
margin: 0;
font-size: 2.5em;
}
nav {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.nav-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 20px;
}
.nav-links a {
text-decoration: none;
color: #333;
padding: 10px 20px;
border: 2px solid #ff6b6b;
border-radius: 25px;
transition: all 0.3s ease;
}
.nav-links a:hover {
background: #ff6b6b;
color: white;
}
.category {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.site-card {
background: #f8f9fa;
padding: 20px;
margin: 15px 0;
border-radius: 8px;
border-left: 4px solid #ff6b6b;
transition: transform 0.2s ease;
}
.site-card:hover {
transform: translateX(5px);
}
.external-link {
color: #ee5a24;
text-decoration: none;
font-weight: bold;
}
.external-link:hover {
text-decoration: underline;
}
.description {
color: #666;
margin: 5px 0 0 0;
font-size: 0.9em;
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #666;
border-top: 1px solid #ddd;
}
.back-link {
display: inline-block;
background: #ff6b6b;
color: white;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
margin-top: 20px;
transition: background 0.3s ease;
}
.back-link:hover {
background: #ee5a24;
}
</style>
</head>
<body>
<header>
<h1>⭐ Мои любимые сайты</h1>
<p>Коллекция полезных ресурсов для обучения и развития</p>
</header>

<nav>
<ul class="nav-links">
<li><a href="index.html">🏠 Главная</a></li>
<li><a href="favorite-sites.html">⭐ Любимые сайты</a></li>
</ul>
</nav>

<main>
<section class="category">
<h2>🎓 Образовательные платформы</h2>

<div class="site-card">
<a href="https://htmlbook.ru" target="_blank" class="external-link">
📚 HTML Book
</a>
<p class="description">Лучший русскоязычный справочник по HTML и CSS. Пользуюсь им ежедневно для проверки тегов и свойств.</p>
</div>

<div class="site-card">
<a href="https://www.w3schools.com" target="_blank" class="external-link">
🌐 W3Schools
</a>
<p class="description">Международная платформа с интерактивными примерами кода. Отлично подходит для практики.</p>
</div>

<div class="site-card">
<a href="https://stepik.org" target="_blank" class="external-link">
🎯 Stepik
</a>
<p class="description">Русскоязычная платформа с бесплатными курсами
по программированию. Прошёл здесь несколько курсов.</p>
</div>
</section>

<section class="category">
<h2>🔧 Инструменты для разработки</h2>

<div class="site-card">
<a href="https://validator.w3.org" target="_blank" class="external-link">
✅ W3C Validator
</a>
<p class="description">Проверяю здесь свой HTML-код на ошибки.
Помогает создавать качественные и валидные страницы.</p>
</div>

<div class="site-card">
<a href="https://codepen.io" target="_blank" class="external-link">
💻 CodePen
</a>
<p class="description">Онлайн-редактор для экспериментов с HTML, CSS и JavaScript. Использую для быстрого тестирования идей.</p>
</div>

<div class="site-card">
<a href="https://github.com" target="_blank" class="external-link">
🐙 GitHub
</a>
<p class="description">Храню здесь свои проекты и изучаю код других разработчиков. Отличный способ учиться на реальных примерах.</p>
</div>
</section>

<section class="category">
<h2>📰 Новости и сообщества</h2>

<div class="site-card">
<a href="https://habr.com" target="_blank" class="external-link">
📖 Habr
</a>
<p class="description">Крупнейшее IT-сообщество со статьями, новостями и обсуждениями. Читаю ежедневно для поддержания актуальных знаний.</p>
</div>

<div class="site-card">
<a href="https://tproger.ru" target="_blank" class="external-link">
👨‍💻 Tproger
</a>
<p class="description">Популярный портал о программировании с новостями, статьями и руководствами для начинающих.</p>
</div>

<div class="site-card">
<a href="https://stackoverflow.com" target="_blank" class="external-link">
❓ Stack Overflow
</a>
<p class="description">Когда сталкиваюсь с проблемой в коде, ищу решение здесь. Мировое сообщество разработчиков всегда готово помочь.</p>
</div>
</section>

<section class="category">
<h2>🎨 Дизайн и вдохновение</h2>

<div class="site-card">
<a href="https://dribbble.com" target="_blank" class="external-link">
🎯 Dribbble
</a>
<p class="description">Смотрю работы дизайнеров для вдохновения.
Помогает развивать чувство прекрасного в веб-дизайне.</p>
</div>

<div class="site-card">
<a href="https://awwwards.com" target="_blank" class="external-link">
🏆 Awwwards
</a>
<p class="description">Лучшие сайты мира. Изучаю тренды и современные подходы к веб-разработке.</p>
</div>
</section>

<div style="text-align: center;">
<a href="index.html" class="back-link">
← Вернуться на главную страницу
</a>
</div>
</main>

<footer>
<p>🔗 <strong>Всего сайтов в коллекции:</strong> 10</p>
<p>© 2024 Моя коллекция полезных сайтов. Обновляется регулярно.</p>
<p><a href="index.html" style="color: #ff6b6b;">Вернуться на главную</a></p>
</footer>
</body>
</html>

Часть 4: Анализ созданных ссылок

Ссылки на главной странице (index.html):

Навигационное меню:

html

<a href="index.html">🏠 Главная</a>
<a href="favorite-sites.html">⭐ Любимые сайты</a>

Внутри контента:

html

<a href="favorite-sites.html">🚀 Посмотреть мою коллекцию сайтов →</a>

В подвале:

html

<a href="favorite-sites.html">Перейти к моим любимым сайтам</a>

Ссылки на странице любимых сайтов (favorite-sites.html):

Навигационное меню:

html

<a href="index.html">🏠 Главная</a>
<a href="favorite-sites.html">⭐ Любимые сайты</a>

Внешние ссылки (открываются в новой вкладке):

html

Обратная ссылка:

html

<a href="index.html" class="back-link">← Вернуться на главную страницу</a>

Часть 5: Практическое задание для закрепления

Задание 1: Создайте третью страницу

Добавьте страницу about.html с информацией о себе и свяжите её с главной:

html


<li><a href="about.html">👤 Обо мне</a></li>


<a href="index.html">Главная</a>
<a href="favorite-sites.html">Любимые сайты</a>

Задание 2: Персонализируйте коллекцию сайтов

Замените примеры сайтов на СВОИ любимые ресурсы:

html

<div class="site-card">
<a href="[ВАШ_САЙТ]" target="_blank" class="external-link">
[НАЗВАНИЕ_САЙТА]
</a>
<p class="description">[ПОЧЕМУ Вам НРАВИТСЯ ЭТОТ САЙТ]</p>
</div>

Часть 6: Проверка работоспособности

Чек-лист тестирования:

Откройте index.html в браузере

Проверьте все ссылки:

Кликните "⭐ Любимые сайты" → должна открыться favorite-sites.html

На favorite-sites.html кликните "🏠 Главная" → вернуться на главную

Проверьте внешние ссылки (должны открываться в новых вкладках)

Убедитесь, что:

Все внутренние ссылки работают

Внешние ссылки открываются в новых вкладках

Навигация интуитивно понятна

Страницы загружаются быстро

Возможные проблемы и решения:

Проблема: "Страница не найдена" (404)

Решение: Проверьте правильность имени файла и путь

Проблема: Ссылка не работает

Решение: Убедитесь, что файл существует в указанном месте

Проблема: Внешние ссылки открываются в той же вкладке

Решение: Добавьте target="_blank" к внешним ссылкам

Часть 7: Дополнительные улучшения

Добавление счетчика посещений:

html

<div style="text-align: center; margin: 20px 0;">
<small>👀 Эту страницу посетили: <strong>1,247</strong> раз</small>
</div>

Добавление поиска по сайту:

html

<div style="text-align: center; margin: 20px 0;">
<input type="text" placeholder="Поиск по сайту..." style="padding: 10px; width: 300px;">
<button style="padding: 10px 20px;">Найти</button>
</div>

Заключение

Что Вы достигли в этом уроке:

✅ Создали полноценный двухстраничный сайт с взаимными ссылками
✅ Научились создавать навигационные меню между страницами
✅ Освоили разницу между внутренними и внешними ссылками
✅ Создали структурированную коллекцию полезных ресурсов
✅ Научились оформлять ссылки для лучшего пользовательского опыта

Ключевые навыки, которые Вы применили:

🎨 Веб-дизайн — создание привлекательного интерфейса

🔗 Навигация — логичная структура ссылок

📝 Семантика — правильное использование HTML-тегов

🎯 UX/UI — удобство для пользователя

🔧 Отладка — проверка работоспособности ссылок

Ваш сайт теперь:

Функциональный — все ссылки работают корректно

Профессиональный — имеет единый стиль и логичную структуру

Полезный — содержит ценную коллекцию ресурсов

Масштабируемый — легко добавить новые страницы

Следующие шаги:

Покажите сайт друзьям и получите обратную связь

Добавьте новые страницы (о проектах, блог, контакты)

Регулярно обновляйте коллекцию любимых сайтов

Экспериментируйте с дизайном и оформлением

Теперь у Вас есть полноценный работающий веб-сайт, который можно развивать и улучшать! Это отличная основа для Вашего портфолио веб-разработчика.

- * * * -

Глава 8:

Картинки — чтобы страница "заиграла"

8.1. Тег <img>: атрибуты src (адрес картинки) и alt (описание для тех, кто не видит)

Введение: Оживляем сайт с помощью изображений

Тег <img> — это один из самых волшебных тегов в HTML. Он позволяет добавлять на Ваши страницы фотографии, иллюстрации, диаграммы — всё, что делает контент наглядным и привлекательным. Давайте разберёмся, как правильно использовать этот тег.

Часть 1: Что такое тег <img> и как он работает?

Базовая структура:

html

Особенности тега <img>:

Это одиночный тег (не требует закрывающего </img>)

Всегда требует два основных атрибута: src и alt

Загружает и отображает изображение на странице

Часть 2: Атрибут src (source — источник)

Что такое src:

Атрибут src указывает путь к файлу изображения — где браузер может найти картинку.

Способы указания пути:

1. Изображение в той же папке:

html

2. Изображение в подпапке:

html

3. Изображение из интернета (по URL):

html

4. Изображение на уровень выше:

html

Часть 3: Атрибут alt (alternative text — альтернативный текст)

Что такое alt и зачем он нужен:

Атрибут alt содержит текстовое описание изображения, которое:

Показывается если картинка не загрузилась

Озвучивается скринридерами для слабовидящих

Индексируется поисковыми системами

Помогает понять содержание при медленном интернете

Примеры хороших описаний:

✅ ПРАВИЛЬНО:

html

❌ НЕПРАВИЛЬНО:

html

<img src="rose.jpg" alt="картинка"> 
<img src="cat.jpg" alt="img_0234.jpg"> 
<img src="recipe.jpg" alt=""> 

Часть 4: Практические примеры использования

Пример 1: Фотография в статье

html

<article>
<h2>Мой сад в этом году</h2>
<img src="images/garden-2024.jpg" alt="Цветущий сад с розами и пионами в мае 2024 года">
<p>В этом году мой сад особенно красив. Розы зацвели раньше обычного...</p>
</article>

Пример 2: Фотография продукта

html

<div class="product">
<img src="photos/tomatoes.jpg" alt="Спелые красные помидоры сорта 'Бычье сердце'">
<h3>Помидоры 'Бычье сердце'</h3>
<p>Сочные и мясистые помидоры с моего огорода.</p>
</div>

Пример 3: Логотип сайта

html

<header>
<img src="logo.png" alt="Логотип сайта 'Сад и огород' - изображение цветка и лопаты">
<h1>Сад и огород</h1>
</header>

Пример 4: Декоративное изображение

html

Часть 5: Подготовка изображений для сайта

Создаем структуру папок:

text

Мой первый сайт/
├── index.html
├── images/ # Папка для изображений
│ ├── photos/ # Фотографии
│ │ ├── garden.jpg
│ │ ├── family.jpg
│ │ └── pets.jpg
│ ├── icons/ # Иконки
│ │ ├── phone.png
│ │ └── email.png
│ └── backgrounds/ # Фоновые изображения
│ └── texture.jpg
└── about.html

Часть 6: Дополнительные атрибуты тега <img>

width и height — размеры изображения:

html

title — всплывающая подсказка:

html

loading — управление загрузкой:

html

<img src="large-image.jpg" alt="Большое изображение" loading="lazy">


Часть 7: Практическое задание

Создайте страницу с галереей изображений:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Моя фото-галерея</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
.photo-card {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
}
.photo-card img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.photo-description {
margin-top: 10px;
color: #666;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>📸 Моя фото-галерея</h1>
<p>Здесь я собираю свои лучшие фотографии из разных сфер жизни.</p>

<div class="gallery">

<div class="photo-card">
<img src="images/garden-spring.jpg"
alt="Весенний сад с цветущими тюльпанами и нарциссами"
width="400" height="300">
<p class="photo-description">Весна в моём саду. Тюльпаны только начинают цвести.</p>
</div>


<div class="photo-card">
<img src="images/cooking-pie.jpg"
alt="Домашний яблочный пирог с румяной корочкой"
width="400" height="300">
<p class="photo-description">Мой фирменный яблочный пирог по бабушкиному рецепту.</p>
</div>


<div class="photo-card">
<img src="images/books-collection.jpg"
alt="Коллекция книг на полке в домашней библиотеке"
width="400" height="300">
<p class="photo-description">Моя домашняя библиотека. Люблю перечитывать классику.</p>
</div>


<div class="photo-card">
<img src="images/cat-sleeping.jpg"
alt="Рыжий кот спит на подоконнике в солнечный день"
width="400" height="300">
<p class="photo-description">Наш кот Вася обожает спать на солнышке.</p>
</div>
</div>

<div style="margin-top: 40px; text-align: center;">
<h2>Советы по созданию хороших alt-текстов</h2>
<ul style="text-align: left; display: inline-block;">
<li>✅ Описывайте что на изображении, а не как оно выглядит</li>
<li>✅ Будьте конкретны, но кратки</li>
<li>✅ Учитывайте контекст страницы</li>
<li>✅ Для декоративных изображений используйте alt=""</li>
</ul>
</div>
</body>
</html>

Часть 8: Частые ошибки и лучшие практики

❌ ЧАСТЫЕ ОШИБКИ:

Ошибка 1: Отсутствует атрибут alt

html

<img src="photo.jpg"> 

Ошибка 2: Слишком общее описание

html

<img src="product.jpg" alt="изображение"> 

Ошибка 3: Использование имени файла

html

<img src="gardening-tools.jpg" alt="IMG_2547.jpg"> 

Ошибка 4: Избыточное описание

html

<img src="cat.jpg" alt="Маленький пушистый рыжий кот с зелеными глазами...">
<!-- Слишком длинно →

✅ ЛУЧШИЕ ПРАКТИКИ:

Практика 1: Конкретное и информативное описание

html

Практика 2: Учет контекста

html


<img src="tool.jpg" alt="Садовый секатор для обрезки роз">


<img src="tool.jpg" alt="Садовый секатор Fiskars с храповым механизмом">

Практика 3: Для декоративных изображений

html

<img src="divider.png" alt="">


Часть 9: Специальные случаи

Изображения-ссылки:

html

Логотипы:

html

Инфографика и диаграммы:

html

Скриншоты интерфейсов:

html

Часть 10: Проверка и тестирование

Чек-лист для изображений:

Все теги <img> имеют атрибут alt

Описания alt информативны и релевантны

Пути src указаны правильно

Изображения загружаются корректно

Размеры изображений подходят для веба

Декоративные изображения имеют alt=""

Тестирование доступности:

Отключите изображения в браузере — должны показываться alt-тексты

Используйте скринридер — должны озвучиваться описания

Проверьте на медленном соединении — alt-тексты помогают понять содержание

Заключение

Что Вы теперь умеете:

✅ Добавлять изображения на веб-страницы

✅ Правильно указывать пути к файлам

✅ Создавать информативные alt-описания

✅ Различать контентные и декоративные изображения

✅ Оптимизировать изображения для веба

Ключевые преимущества правильного использования:

♿ Доступность — помощь слабовидящим пользователям

🔍 SEO — улучшение позиций в поисковых системах

📱 Надежность — резервный вариант при проблемах с загрузкой

💡 Понятность — ясное содержание для всех пользователей

⚡ Производительность — правильные размеры и форматы

Золотые правила работы с изображениями:

Всегда используйте атрибут alt

Будьте конкретны в описаниях

Оптимизируйте размеры файлов

Организуйте файлы в папках

Тестируйте на разных устройствах

Теперь Ваши веб-страницы станут по-настоящему живыми и наглядными! Изображения помогут лучше передавать Ваши мысли, делиться опытом и создавать привлекательный контент для посетителей.

- * * * -

8.2. Где найти простые и бесплатные картинки для тренировки

Введение: Безопасный и легальный поиск изображений

При создании сайтов очень важно использовать изображения правильно — не нарушая авторские права. К счастью, существует множество источников, где можно бесплатно и легально брать картинки для обучения и практики.

Часть 1: Бесплатные фотостоки с открытой лицензией

1. Unsplash — самый популярный и качественный

Сайт: unsplash.com

Особенности: Высококачественные фотографии профессионального уровня

Лицензия: Бесплатное использование, даже в коммерческих целях

Язык: Английский, но поиск по ключевым словам на русском работает

Как использовать:

html


<img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=400"
alt="Красивый сад с цветами" width="400">

Поисковые запросы для тренировки:

garden (сад)

flowers (цветы)

nature (природа)

books (книги)

cooking (готовка)

elderly people (пожилые люди)

2. Pexels — отличная альтернатива Unsplash

Сайт: pexels.com

Особенности: Огромная коллекция, есть русский интерфейс

Лицензия: Бесплатно для коммерческого использования

Бонус: Можно искать на русском языке

Пример поиска:

"сад огород"

"цветы розы"

"книги чтение"

"готовка еда"

3. Pixabay — разнообразный контент

Сайт: pixabay.com

Особенности: Фотографии, иллюстрации, векторы

Лицензия: Бесплатно, с некоторыми ограничениями

Язык: Есть русская версия

Часть 2: Специализированные ресурсы

Для иконок и небольших изображений:

Flaticon (flaticon.com) — иконки в разных стилях

Icons8 (icons8.com) — стильные иконки и иллюстрации

Feather Icons (feathericons.com) — минималистичные иконки

Для текстур и фонов:

Subtle Patterns (subtlepatterns.com) — текстуры для фона

Transparent Textures (transparenttextures.com) — прозрачные текстуры

Часть 3: Поиск с правильными фильтрами

Использование Google Images с фильтрами:

Перейдите на images.google.com

Введите поисковый запрос (например, "сад")

Нажмите "Инструменты" → "Права на использование"

Выберите "Отметка на коммерческое использование"

Безопасные запросы для Google:

"сад дача"

"цветы розы"

"книги библиотека"

"готовка рецепты"

"рукоделие вязание"

"пожилые люди компьютер"

Часть 4: Создание собственных изображений

Простой способ: Снимки экрана

На Windows: Клавиша Print Screen или Win + Shift + S

На Mac: Cmd + Shift + 4

Сохраните в папку Вашего проекта

Создание скриншотов для сайта:

html

Часть 5: Практическое руководство по скачиванию

Шаг-за-шагом инструкция для Unsplash:

Откройте unsplash.com

В поиске введите нужную тему (например, "rose")

Выберите понравившееся фото

Нажмите кнопку "Download" (бесплатно)

Сохраните в папку images вашего проекта

Структура папок для организации:

text

Мой первый сайт/
├── index.html
├── images/
│ ├── nature/ # Природа и сад
│ │ ├── garden.jpg
│ │ ├── flowers/
│ │ │ ├── roses.jpg
│ │ │ └── tulips.jpg
│ │ └── vegetables/
│ │ ├── tomatoes.jpg
│ │ └── cucumbers.jpg
│ ├── hobbies/ # Хобби и увлечения
│ │ ├── books.jpg
│ │ ├── cooking.jpg
│ │ └── knitting.jpg
│ └── interface/ # Для элементов сайта
│ ├── icons/
│ └── backgrounds/
└── about.html

Часть 6: Готовые примеры URL для тренировки

Природа и сад:

html


<img src="https://images.unsplash.com/photo-1610998342126-4c34f6882e2f?w=400"
alt="Красные розы в саду" width="400">


<img src="https://images.unsplash.com/photo-1597237154673-04a6c71e04d9?w=400"
alt="Красивый ухоженный сад" width="400">


<img src="https://images.unsplash.com/photo-1592924357228-91a4daadcfea?w=400"
alt="Свежие помидоры на грядке" width="400">

Хобби и увлечения:

html


<img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=400"
alt="Стопка книг на столе" width="400">


<img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400"
alt="Приготовление еды на кухне" width="400">


<img src="https://images.unsplash.com/photo-1585827553612-42ed49e7d69d?w=400"
alt="Вязание спицами" width="400">

Люди и портреты:

html


<img src="https://images.unsplash.com/photo-1587614382346-4ec70e388b28?w=400"
alt="Пожилая женщина работает за ноутбуком" width="400">


<img src="https://images.unsplash.com/photo-1511895426328-dc8714191300?w=400"
alt="Пожилая пара в саду" width="400">

Часть 7: Практическое задание

Создайте галерею с изображениями из бесплатных источников:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Моя тренировочная галерея</title>
<meta charset="utf-8">
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.photo-item {
border: 1px solid #ddd;
padding: 10px;
border-radius: 8px;
text-align: center;
}
.photo-item img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.source-info {
font-size: 0.8em;
color: #666;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>🖼️ Тренировочная галерея изображений</h1>
<p>Все изображения взяты из бесплатных источников с открытой лицензией.</p>

<div class="gallery">

<div class="photo-item">
<img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=400"
alt="Цветущий сад с розами и лавандой"
width="300">
<p><strong>Сад мечты</strong></p>
<p class="source-info">Источник: Unsplash</p>
</div>


<div class="photo-item">
<img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=400"
alt="Старинные книги в домашней библиотеке"
width="300">
<p><strong>Домашняя библиотека</strong></p>
<p class="source-info">Источник: Unsplash</p>
</div>


<div class="photo-item">
<img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400"
alt="Приготовление домашней выпечки на кухне"
width="300">
<p><strong>Любимая кухня</strong></p>
<p class="source-info">Источник: Unsplash</p>
</div>


<div class="photo-item">
<img src="https://images.unsplash.com/photo-1587614382346-4ec70e388b28?w=400"
alt="Пожилая женщина изучает компьютер"
width="300">
<p><strong>Обучение в любом возрасте</strong></p>
<p class="source-info">Источник: Unsplash</p>
</div>
</div>

<div style="margin-top: 40px; padding: 20px; background: #f0f8ff; border-radius: 10px;">
<h2>📋 Чек-лист поиска изображений</h2>
<ul>
<li>✅ Используйте сайты с открытой лицензией (Unsplash, Pexels)</li>
<li>✅ Проверяйте права использования</li>
<li>✅ Создавайте информативные alt-тексты</li>
<li>✅ Организуйте файлы в папках</li>
<li>✅ Оптимизируйте размеры изображений</li>
</ul>
</div>
</body>
</html>

Часть 8: Оптимизация изображений для веба

Бесплатные инструменты для оптимизации:

TinyPNG (tinypng.com) — сжатие PNG и JPEG

Squoosh (squoosh.app) — онлайн-оптимизатор от Google

GIMP — бесплатный графический редактор

Часть 9: Юридические аспекты — что можно и нельзя

✅ МОЖНО:

Использовать изображения с Unsplash, Pexels, Pixabay

Использовать для личных и учебных проектов

Использовать в некоммерческих сайтах

Модифицировать изображения (если разрешено лицензией)

❌ НЕЛЬЗЯ:

Брать изображения с Google без проверки лицензии

Использовать фотографии людей без разрешения

Использовать логотипы и торговые марки

Выдавать чужие работы за свои

Проверка лицензии:

Всегда ищите на сайте разделы:

"License" (Лицензия)

"Terms of Use" (Условия использования)

"Royalty Free" (Бесплатно)

Часть 10: Полезные советы для начинающих

Совет 1: Создайте свою коллекцию

Сохраняйте понравившиеся изображения в тематические папки:

природа_сад

хобби_увлечения

люди_портреты

еда_готовка

Совет 2: Используйте ключевые слова

При поиске используйте конкретные запросы:

Вместо "цветок" — "роза красная сад"

Вместо "книга" — "старинные книги полка"

Вместо "еда" — "домашняя выпечка пирог"

Совет 3: Начните с малого

Сначала используйте готовые URL из примеров

Потом научитесь скачивать и сохранять локально

Затем освоите оптимизацию размеров

Совет 4: Документируйте источники

Ведите простой текстовый файл с информацией:

text

garden.jpg - Unsplash, фото John Doe, лицензия CC0
books.png - Pexels, фото Jane Smith, бесплатно

Заключение

Краткий список безопасных источников:

Unsplash.com — лучший выбор для качественных фото

Pexels.com — отличная альтернатива с русским интерфейсом

Pixabay.com — разнообразный контент

Google Images — с фильтром "Права на использование"

Что Вы теперь умеете:

✅ Находить бесплатные изображения для обучения

✅ Правильно скачивать и организовывать файлы

✅ Соблюдать авторские права

✅ Создавать информативные описания

✅ Оптимизировать изображения для веба

Помните: Даже при использовании бесплатных изображений важно:

Указывать источник, если это требуется лицензией

Создавать качественные alt-тексты

Организовывать файлы логично

Тестировать загрузку на разных устройствах

Теперь Вы готовы наполнять свои сайты красивыми и легальными изображениями! Начните с простых упражнений и постепенно переходите к созданию полноценных галерей и иллюстрированных статей.

- * * * -

8.3. Как правильно сохранить картинку в свою рабочую папку

Введение: Организация — ключ к успеху

Правильное сохранение изображений так же важно, как и правильное их использование. Хорошая организация файлов поможет Вам быстро находить нужные картинки и избежать проблем с "битыми" ссылками на сайте.

Часть 1: Подготовка рабочей структуры папок

Создаем логичную структуру:

text

Мой первый сайт/
├── index.html
├── about.html
├── contacts.html
├── images/ # Основная папка для всех изображений
│ ├── photos/ # Фотографии
│ │ ├── garden/ # Сад и огород
│ │ │ ├── flowers/ # Цветы
│ │ │ ├── vegetables/ # Овощи
│ │ │ └── fruits/ # Фрукты
│ │ ├── family/ # Семейные фото
│ │ └── hobbies/ # Хобби
│ ├── icons/ # Иконки
│ │ ├── social/ # Социальные сети
│ │ └── interface/ # Элементы интерфейса
│ ├── backgrounds/ # Фоновые изображения
│ └── temp/ # Временные файлы
└── css/
└── style.css

Часть 2: Пошаговая инструкция по сохранению

Шаг 1: Находим изображение в интернете

Откройте сайт с бесплатными изображениями (Unsplash, Pexels)

Найдите подходящую картинку

Откройте её в полном размере

Шаг 2: Сохраняем изображение

Способ 1: Через меню браузера

text

Правой кнопкой мыши по изображению →
"Сохранить изображение как..." →
Выбираем папку →
Сохраняем

Способ 2: Через кнопку Download (если есть)

text

Нажимаем кнопку "Download" на сайте →
Файл автоматически скачивается →
Переносим в нужную папку

Шаг 3: Выбираем правильное место

Пример для фотографии сада:

Неправильно: C:\Users\Имя\Downloads\photo.jpg

Правильно: Мой первый сайт\images\photos\garden\flowers\rose.jpg

Часть 3: Практические примеры для разных типов изображений

Пример 1: Сохраняем фото розы для страницы о саде

text

Куда сохранять: images/photos/garden/flowers/
Имя файла: red-rose.jpg
Полный путь: Мой первый сайт\images\photos\garden\flowers\red-rose.jpg

HTML-код:

html

Пример 2: Сохраняем иконку для контактов

text

Куда сохранять: images/icons/social/
Имя файла: email-icon.png
Полный путь: Мой первый сайт\images\icons\social\email-icon.png

HTML-код:

html

Пример 3: Сохраняем фоновое изображение

text

Куда сохранять: images/backgrounds/
Имя файла: garden-background.jpg
Полный путь: Мой первый сайт\images\backgrounds\garden-background.jpg

Часть 4: Правила именования файлов

✅ ПРАВИЛЬНЫЕ ИМЕНА:

html


<img src="images/red-rose.jpg" alt="Красная роза">
<img src="images/garden-tools.jpg" alt="Садовые инструменты">
<img src="images/grandma-cooking.jpg" alt="Бабушка готовит">


<img src="images/garden-2024-spring.jpg" alt="Сад весной 2024">
<img src="images/portfolio-v2.jpg" alt="Портфолио версия 2">

❌ НЕПРАВИЛЬНЫЕ ИМЕНА:

html


<img src="images/IMG_2547.jpg" alt="Фото">
<img src="images/photo(1).jpg" alt="Еще фото">
<img src="images/12345.png" alt="Картинка">


<img src="images/моя роза.jpg" alt="Роза"> 
<img src="images/my garden photo.jpg" alt="Сад"> 

Часть 5: Практическое задание

Создайте папку и сохраните 5 тестовых изображений:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Практика с изображениями</title>
<meta charset="utf-8">
</head>
<body>
<h1>🖼️ Моя организованная коллекция изображений</h1>

<h2>Сад и огород</h2>
<img src="images/photos/garden/flowers/rose.jpg"
alt="Красная роза в полном цвету"
width="300">
<img src="images/photos/garden/vegetables/tomatoes.jpg"
alt="Спелые помидоры на грядке"
width="300">

<h2>Хобби</h2>
<img src="images/photos/hobbies/books.jpg"
alt="Коллекция книг на полке"
width="300">
<img src="images/photos/hobbies/cooking.jpg"
alt="Приготовление домашней выпечки"
width="300">

<h2>Иконки</h2>
<img src="images/icons/social/email.png"
alt="Иконка электронной почты"
width="100">
<img src="images/icons/social/phone.png"
alt="Иконка телефона"
width="100">
</body>
</html>

Структура папок после выполнения:

text

Мой первый сайт/
├── index.html
└── images/
├── photos/
│ ├── garden/
│ │ ├── flowers/
│ │ │ └── rose.jpg
│ │ └── vegetables/
│ │ └── tomatoes.jpg
│ └── hobbies/
│ ├── books.jpg
│ └── cooking.jpg
└── icons/
└── social/
├── email.png
└── phone.png

Часть 6: Частые ошибки и их решение

Ошибка 1: Файл не найден

html


<img src="rose.jpg" alt="Роза"> 


<img src="images/photos/garden/flowers/rose.jpg" alt="Роза">

Ошибка 2: Неправильный регистр

html


<img src="images/Rose.jpg" alt="Роза">


<img src="images/rose.jpg" alt="Роза">

Ошибка 3: Русские буквы в путях

html


<img src="images/мои-фото/роза.jpg" alt="Роза">


<img src="images/my-photos/rose.jpg" alt="Роза">

Ошибка 4: Пробелы в именах

html


<img src="images/my garden.jpg" alt="Сад">


<img src="images/my-garden.jpg" alt="Сад">

Часть 7: Инструменты для работы с изображениями

Проверка путей:

Проверьте существование файла — дважды щелкните по нему

Убедитесь в правильности пути — сравните с HTML-кодом

Проверьте расширение — .jpg, .png, .gif

Бесплатные программы:

Paint (встроен в Windows) — простейшее редактирование

GIMP — мощный бесплатный редактор

IrfanView — просмотр и базовая обработка

Часть 8: Автоматизация процесса

Создайте шаблон структуры:

Сохраните этот текст в файл folder-structure.txt:

text

images/
├── photos/
│ ├── garden/
│ │ ├── flowers/
│ │ ├── vegetables/
│ │ └── fruits/
│ ├── family/
│ └── hobbies/
├── icons/
│ ├── social/
│ └── interface/
├── backgrounds/
└── temp/

Используйте горячие клавиши:

F2 — переименовать файл

Ctrl + C / Ctrl + V — копировать/вставить

Ctrl + X — вырезать

Delete — удалить

Часть 9: Практические советы для пенсионеров

Совет 1: Начинайте с простого

Сначала создайте одну папку images

Сохраняйте все изображения туда

Постепенно создавайте подпапки

Совет 2: Используйте понятные имена

text

Лучше: garden-rose.jpg
Хуже: DSC_2547.JPG

Лучше: grandma-cooking-pie.jpg
Хуже: бабушка готовит пирог.jpg

Совет 3: Создавайте резервные копии

Копируйте папку images на флешку

Или используйте облако (Яндекс.Диск, Google Drive)

Совет 4: Регулярно чистите папки

Удаляйте ненужные изображения

Проверяйте, все ли файлы используются на сайте

Следите за дубликатами

Часть 10: Проверка правильности сохранения

Чек-лист после сохранения:

Файл сохранен в правильную папку

Имя файла содержит только латинские буквы

Нет пробелов в имени (использованы дефисы)

Расширение файла правильное (.jpg, .png)

Файл открывается двойным щелчком

Размер файла подходит для веба (обычно 100KB-1MB)

Тестирование в браузере:

Откройте HTML-файл в браузере

Проверьте, отображаются ли все изображения

Если изображение не показывается — проверьте путь

Исправьте путь и обновите страницу (F5)

Заключение

Что Вы теперь умеете:

✅ Создавать логичную структуру папок

✅ Правильно сохранять изображения в нужные места

✅ Давать файлам осмысленные имена

✅ Избегать распространенных ошибок

✅ Организовывать файлы для легкого доступа

Ключевые принципы организации:

🗂️ Логичная структура — похожие файлы вместе

📝 Осмысленные имена — понятно без открытия

🔄 Единый стиль — одинаковые правила для всех файлов

📁 Иерархия — от общего к частному

🧹 Чистота — регулярное удаление ненужного

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

Следующие шаги:

Создайте базовую структуру папок

Сохраните 3-5 тестовых изображений

Создайте простую HTML-страницу с этими изображениями

Проверьте, что все пути работают правильно

Постепенно дополняйте коллекцию

Теперь Вы готовы создавать красивые, хорошо организованные веб-сайты с правильно сохраненными изображениями!

- * * * -

8.4. Практика: добавляем свою фотографию или красивую картинку на главную страницу

Введение: Делаем сайт персонализированным и визуально привлекательным

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

Часть 1: Подготовка изображений

Создаем структуру папок:

text

Мой первый сайт/
├── index.html
├── about.html
├── favorite-sites.html
└── images/
├── photos/
│ ├── personal/ # Личные фото
│ │ ├── my-photo.jpg # Ваше фото
│ │ └── avatar.jpg # Аватарка
│ └── content/ # Контентные изображения
│ ├── garden.jpg
│ ├── books.jpg
│ └── cooking.jpg
├── icons/ # Иконки
│ ├── flower.png
│ ├── book.png
│ └── food.png
└── backgrounds/ # Фоновые изображения
└── texture.jpg

Часть 2: Подготовка фотографии

Если у Вас есть цифровая фотография:

Найдите фото на компьютере или телефоне

Перенесите в папку images/photos/personal/

Переименуйте в my-photo.jpg

Если нужно сделать новое фото:

Попросите помочь родственников или друзей

Сделайте фото на телефон или фотоаппарат

Перенесите на компьютер через USB-кабель или email

Сохраните в нужную папку

Часть 3: Полный код главной страницы с изображениями

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой личный сайт - Главная</title>
<meta charset="utf-8">
<style>
/* Основные стили */
body {
font-family: 'Arial', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* Шапка сайта */
header {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
margin-bottom: 30px;
position: relative;
}

/* Аватарка */
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid #667eea;
margin: 0 auto 20px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Навигация */
nav {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 30px;
}

.nav-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

.nav-links a {
text-decoration: none;
color: #333;
padding: 12px 25px;
border: 2px solid #667eea;
border-radius: 25px;
transition: all 0.3s ease;
font-weight: bold;
}

.nav-links a:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
}

/* Основной контент */
.main-content {
display: grid;
gap: 30px;
}

.content-section {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Карточки с увлечениями */
.hobbies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}

.hobby-card {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
text-align: center;
border-left: 4px solid #667eea;
transition: transform 0.3s ease;
}

.hobby-card:hover {
transform: translateY(-5px);
}

.hobby-icon {
width: 60px;
height: 60px;
margin: 0 auto 15px;
border-radius: 50%;
background: #667eea;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}

/* Галерея изображений */
.photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}

.gallery-item {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.gallery-item:hover {
transform: scale(1.05);
}

.gallery-item img {
width: 100%;
height: 150px;
object-fit: cover;
}

/* Подвал */
footer {
text-align: center;
margin-top: 50px;
padding: 30px;
color: #666;
border-top: 1px solid #ddd;
background: white;
border-radius: 10px;
}

/* Адаптивность */
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
align-items: center;
}

.hobbies-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>

<header>
<div class="avatar">
<img src="images/photos/personal/my-photo.jpg"
alt="Моя фотография - [Ваше Имя], начинающий веб-разработчик">
</div>
<h1>🌐 Добро пожаловать на мой сайт!</h1>
<p>Меня зовут <strong>Александр</strong>, и я создаю свой первый веб-сайт в возрасте 65 лет!</p>
<p>Доказываю, что учиться никогда не поздно! 🎯</p>
</header>


<nav>
<ul class="nav-links">
<li><a href="index.html">🏠 Главная</a></li>
<li><a href="about.html">👤 Обо мне</a></li>
<li><a href="favorite-sites.html">⭐ Любимые сайты</a></li>
</ul>
</nav>


<main class="main-content">

<section class="content-section">
<h2>👋 Рад Вас видеть!</h2>
<p>После 40 лет работы инженером я решил освоить совершенно новую для себя сферу — веб-разработку. Это увлекательное путешествие, которое доказывает: возраст — не помеха для обучения!</p>

<div class="photo-gallery">
<div class="gallery-item">
<img src="images/photos/content/garden.jpg"
alt="Мой сад с цветущими розами и пионами">
</div>
<div class="gallery-item">
<img src="images/photos/content/books.jpg"
alt="Моя домашняя библиотека с любимыми книгами">
</div>
<div class="gallery-item">
<img src="images/photos/content/cooking.jpg"
alt="Домашняя выпечка с моей кухни">
</div>
</div>
</section>


<section class="content-section">
<h2>🎨 Мои увлечения</h2>
<p>В свободное время я занимаюсь тем, что приносит мне радость и вдохновение:</p>

<div class="hobbies-grid">
<div class="hobby-card">
<div class="hobby-icon">🌹</div>
<h3>Садоводство</h3>
<p>Выращиваю розы, пионы и овощи. Мой сад — моя гордость!</p>
</div>

<div class="hobby-card">
<div class="hobby-icon">📚</div>
<h3>Чтение</h3>
<p>Люблю исторические романы и классическую литературу</p>
</div>

<div class="hobby-card">
<div class="hobby-icon">🍲</div>
<h3>Кулинария</h3>
<p>Экспериментирую с рецептами и люблю готовить для семьи</p>
</div>

<div class="hobby-card">
<div class="hobby-icon">💻</div>
<h3>Веб-разработка</h3>
<p>Осваиваю HTML, CSS и создаю свои первые сайты</p>
</div>
</div>
</section>


<section class="content-section">
<h2>🚀 Мой путь в веб-разработку</h2>
<div style="display: flex; align-items: center; gap: 30px; flex-wrap: wrap;">
<div style="flex: 1; min-width: 300px;">
<img src="images/photos/personal/learning.jpg"
alt="Я изучаю HTML за компьютером"
style="width: 100%; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
</div>
<div style="flex: 2; min-width: 300px;">
<h3>Почему я начал учиться?</h3>
<p>Всегда интересовался технологиями, но работа не позволяла серьезно заняться программированием. Выйдя на пенсию, я наконец-то получил возможность реализовать свою мечту!</p>

<h3>Что уже изучил:</h3>
<ul>
<li>✅ Основы HTML и создание структуры страниц</li>
<li>✅ Работа с текстом, ссылками и изображениями</li>
<li>✅ Создание навигации между страницами</li>
<li>✅ Основы CSS для оформления сайта</li>
</ul>

<p><strong>Моя цель:</strong> Создать полноценный блог о садоводстве для таких же enthusiasts, как я!</p>
</div>
</div>
</section>


<section class="content-section" style="text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<h2>💡 Хотите тоже научиться?</h2>
<p>Если Вы тоже думаете о том, чтобы освоить веб-разработку — не сомневайтесь!</p>
<p>Посмотрите мою подборку <a href="favorite-sites.html" style="color: #ffd700; font-weight: bold;">любимых обучающих сайтов</a>,
которые помогли мне начать этот путь.</p>
<div style="margin-top: 20px;">
<a href="favorite-sites.html" style="display: inline-block; background: white; color: #667eea; padding: 15px 30px; border-radius: 25px; text-decoration: none; font-weight: bold; transition: transform 0.3s ease;">
🚀 Перейти к обучающим ресурсам
</a>
</div>
</section>
</main>


<footer>
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; margin-bottom: 20px;">
<div>
<h3>📞 Контакты</h3>
<p>Email: <a href="mailto: alexander@example.com">alexander@example.com</a></p>
<p>Телефон: <a href="tel:+79161234567">+7 (916) 123-45-67</a></p>
</div>

<div>
<h3>🔗 Быстрые ссылки</h3>
<p><a href="index.html">Главная</a></p>
<p><a href="about.html">Обо мне</a></p>
<p><a href="favorite-sites.html">Полезные ресурсы</a></p>
</div>

<div>
<h3>🌍 Социальные сети</h3>
<p>Присоединяйтесь к моему путешествию!</p>
</div>
</div>

<hr style="margin: 20px 0;">
<p>© 2024 Мой первый сайт. Создано с ❤️, упорством и верой в себя!</p>
<p><em>"Учиться никогда не поздно, а начинать — никогда не рано!"</em></p>
</footer>
</body>
</html>

Часть 4: Альтернативный вариант — если нет своей фотографии

Используем красивую тематическую картинку:

html


<header>
<div class="avatar">
<img src="images/photos/content/garden-theme.jpg"
alt="Красивый сад с цветами - символическое изображение моих увлечений">
</div>
<h1>🌐 Добро пожаловать на мой сайт!</h1>
<p>Меня зовут <strong>Александр</strong>, и я создаю свой первый веб-сайт!</p>
</header>

Или используем иконку/аватар:

html

Часть 5: Практическое задание

Задание 1: Создайте свою версию главной страницы

Создайте папки согласно структуре выше

Добавьте свою фотографию или выберите тематическую картинку

Скачайте 3-4 дополнительные картинки для галереи

Настройте пути к изображениям в коде

Проверьте отображение в браузере

Задание 2: Персонализируйте контент

Замените в коде:

[Ваше Имя] на ваше настоящее имя

Текст "Обо мне" на Ваш реальный опыт

Изображения на Ваши настоящие увлечения

Контактную информацию на Вашу

Часть 6: Проверка и отладка

Чек-лист проверки изображений:

Все изображения отображаются корректно

Аватарка имеет круглую форму

Галерея изображений показывает все картинки

При наведении есть анимации (если добавлены)

На мобильных устройствах всё выглядит хорошо

Alt-тексты информативны и релевантны

Если изображения не показываются:

Проверьте пути:

html


<img src="images/photos/personal/my-photo.jpg" alt="...">


<img src="my-photo.jpg" alt="...">

Проверьте имена файлов:

Нет ли опечаток?

Правильный ли регистр? (photo.jpg vs PHOTO.JPG)

Правильное ли расширение? (.jpg, .png)

Проверьте существование файлов:

Откройте папку и убедитесь, что файлы там

Попробуйте открыть файл двойным щелчком

Часть 7: Дополнительные улучшения

Добавление подписей к фото:

html

<div class="gallery-item">
<img src="images/photos/content/garden.jpg"
alt="Мой сад с цветущими розами">
<p class="caption">Мой сад в мае - розы в полном цвету</p>
</div>

Добавление эффектов при наведении:

css

.avatar img {
transition: transform 0.3s ease;
}

.avatar img:hover {
transform: scale(1.1);
}

Заключение

Что Вы достигли в этом уроке:

✅ Создали визуально привлекательную главную страницу
✅ Добавили персонализированную фотографию или тематическое изображение
✅ Организовали галерею дополнительных изображений
✅ Научились правильно структурировать контент с изображениями
✅ Создали адаптивный дизайн для разных устройств

Ключевые навыки, которые Вы применили:

🖼️ Работа с изображениями — добавление и оформление

🎨 Веб-дизайн — создание привлекательного интерфейса

📱 Адаптивность — работа на разных устройствах

♿ Доступность — правильные alt-тексты

🔗 Навигация — удобные ссылки между страницами

Ваша главная страница теперь:

Персонализированная — отражает Вашу уникальность

Визуально привлекательная — приятна для просмотра

Информативная — понятно рассказывает о вас

Профессиональная — выглядит как сайт опытного разработчика

Вдохновляющая — мотивирует других начать учиться

Следующие шаги:

Покажите сайт друзьям и получите обратную связь

Добавьте больше своих фотографий и контента

Экспериментируйте с разными стилями оформления

Постепенно добавляйте новые страницы и разделы

Теперь у Вас есть полноценная, красивая главная страница, которой не стыдно поделиться с окружающими! Это отличное начало Вашего пути в веб-разработке.

(Продолжение следует)