Найти в Дзене
Канал Владислава Козлова
9 подписчиков

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

44 мин
(Продолжение)
13.4. Ваш сайт в сети! Дайте ссылку детям и друзьям
Введение: Ваш голос услышан в цифровом мире! Представьте, что Вы только что опубликовали свою первую книгу — теперь пришло время рассказать о ней всем! Ваш сайт в интернете — это Ваша первая "публикация", и сегодня мы научимся правильно ею делиться с близкими и получать ценные отзывы. Часть 1: Ваш сайт живёт в интернете — осознаём значимость 1.1. Что только что произошло? html <div class="achievement">
<h3>🎉 Вы только что совершили важный шаг!</h3>
<div class="milestone">
<strong>Раньше:</strong> Файлы на Вашем компьютере<br>
<strong>Теперь:</strong> Полноценный сайт в интернете<br>
<strong>Результат:</strong> Доступен из любой точки мира!
</div>
</div> 1.2. Где теперь живёт Ваш сайт: text 🌐 Ваш САЙТ ТЕПЕРЬ ДОСТУПЕН ПО АДРЕСУ:
┌─────────────────────────────────────┐
│ https://ваш-логин.github.io │
│ ИЛИ │
│ https://случайный-а
Оглавление

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

13.4. Ваш сайт в сети! Дайте ссылку детям и друзьям

Введение: Ваш голос услышан в цифровом мире!

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

Часть 1: Ваш сайт живёт в интернете — осознаём значимость

1.1. Что только что произошло?

html

<div class="achievement">
<h3>🎉 Вы только что совершили важный шаг!</h3>
<div class="milestone">
<strong>Раньше:</strong> Файлы на Вашем компьютере<br>
<strong>Теперь:</strong> Полноценный сайт в интернете<br>
<strong>Результат:</strong> Доступен из любой точки мира!
</div>
</div>

1.2. Где теперь живёт Ваш сайт:

text

🌐 Ваш САЙТ ТЕПЕРЬ ДОСТУПЕН ПО АДРЕСУ:
┌─────────────────────────────────────┐
│ https://ваш-логин.github.io │
│ ИЛИ │
│ https://случайный-адрес.netlify.app│
│ ИЛИ │
│ https://ваш-красивый-домен.ru │
└─────────────────────────────────────┘

Часть 2: Как правильно поделиться ссылкой — 5 лучших способов

2.1. Способ 1: Простая отправка в мессенджерах

html

<div class="sharing-method">
<h4>📱 В мессенджерах (WhatsApp, Telegram)</h4>
<div class="message-template">
<strong>Пример сообщения:</strong><br>
"Привет! Я создал(а) свой первый сайт 🎉<br>
Посмотри, пожалуйста: [ваша ссылка]<br>
Напиши, что думаешь! 😊"
</div>
</div>

2.2. Способ 2: Email рассылка для родственников

html

<div class="sharing-method">
<h4>📧 Email для старшего поколения</h4>
<div class="email-template">
<strong>Тема:</strong> Мой первый сайт!<br>
<strong>Текст:</strong><br>
"Дорогие мама и папа!<br>
Я научился(ась) создавать сайты и сделал(а) свой первый проект.<br>
Вот ссылка: [ваша ссылка]<br>
Буду рад(а) Вашим отзывам!"
</div>
</div>

Часть 3: Полная страница с инструкциями по разделению

html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Ваш сайт в сети! Делимся с миром</title>
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
.header-section {
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
padding: 40px 30px;
text-align: center;
}
.content-section {
padding: 30px;
}
.example-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border: 2px solid #e0e0e0;
}
h1, h2 {
color: #2c3e50;
}
.header-section h1 {
color: white;
font-size: 2.5em;
margin-bottom: 10px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
.warning {
background: #fff3e0;
padding: 15px;
border-left: 4px solid #ff9800;
margin: 15px 0;
border-radius: 5px;
}
.success {
background: #e8f5e8;
padding: 15px;
border-left: 4px solid #4CAF50;
margin: 15px 0;
border-radius: 5px;
}
.celebration {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
padding: 20px;
border-radius: 10px;
text-align: center;
margin: 20px 0;
}
.sharing-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.method-card {
background: white;
border: 2px solid #3498db;
border-radius: 10px;
padding: 20px;
transition: transform 0.3s ease;
}
.method-card:hover {
transform: translateY(-5px);
}
.method-icon {
font-size: 2.5em;
margin-bottom: 15px;
text-align: center;
}
.url-display {
background: #f8f9fa;
border: 2px dashed #3498db;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
font-family: 'Courier New', monospace;
font-size: 1.2em;
text-align: center;
word-break: break-all;
}
.message-templates {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.template {
background: white;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
border-left: 4px solid #3498db;
}
.interactive-demo {
background: #e3f2fd;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.action-button {
background: #3498db;
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 10px 5px;
transition: background 0.3s ease;
}
.action-button:hover {
background: #2980b9;
}
.button-success {
background: #27ae60;
}
.button-success:hover {
background: #219653;
}
.testimonial {
background: #fff3e0;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
border-left: 4px solid #f39c12;
}
.qr-section {
text-align: center;
padding: 20px;
}
.qr-placeholder {
width: 200px;
height: 200px;
background: #f0f0f0;
margin: 0 auto;
border: 2px dashed #ccc;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
.feedback-guide {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin: 20px 0;
}
.feedback-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<!-- Шапка с поздравлением -->
<div class="header-section">
<h1>🎉 Ваш сайт в сети!</h1>
<p style="font-size: 1.3em; opacity: 0.9;">Поздравляем! Теперь поделитесь своим творением с миром</p>
</div>

<div class="content-section">
<!-- Церемония поздравления -->
<div class="celebration">
<h2 style="color: #d63031; margin-top: 0;">🏆 Вы это сделали!</h2>
<p style="font-size: 1.2em; font-weight: bold;">От файлов на компьютере до полноценного сайта в интернете — это огромное достижение!</p>
</div>

<!-- Отображение Вашего URL -->
<div class="example-section">
<h2>1. Ваш сайт теперь живёт здесь:</h2>

<div class="url-display" id="website-url">
https://ваш-логин.github.io
</div>

<div class="note">
<strong>💡 Скопируйте эту ссылку</strong> — это адрес Вашего сайта в интернете. Теперь любой человек в мире может увидеть Вашу работу, введя этот адрес в браузере.
</div>

<div style="text-align: center; margin: 20px 0;">
<button class="action-button" onclick="copyUrl()">📋 Скопировать ссылку</button>
<button class="action-button button-success" onclick="testWebsite()">🔍 Проверить сайт</button>
</div>
</div>

<!-- Способы поделиться -->
<div class="example-section">
<h2>2. 5 способов поделиться с друзьями и семьёй</h2>

<div class="sharing-methods">
<div class="method-card">
<div class="method-icon">📱</div>
<h3>Мессенджеры</h3>
<p><strong>WhatsApp, Telegram, Viber</strong></p>
<p>Быстрая отправка близким друзьям и родным</p>
<button class="action-button" onclick="showMessengerTemplate()">Показать шаблон</button>
</div>

<div class="method-card">
<div class="method-icon">📧</div>
<h3>Email</h3>
<p><strong>Для старших родственников</strong></p>
<p>Подробное письмо с объяснениями</p>
<button class="action-button" onclick="showEmailTemplate()">Показать шаблон</button>
</div>

<div class="method-card">
<div class="method-icon">👨‍👩‍👧‍👦</div>
<h3>Соцсети</h3>
<p><strong>ВКонтакте, Одноклассники</strong></p>
<p>Поделиться с широким кругом знакомых</p>
<button class="action-button" onclick="showSocialTemplate()">Показать шаблон</button>
</div>

<div class="method-card">
<div class="method-icon">📞</div>
<h3>По телефону</h3>
<p><strong>Звонок друзьям</strong></p>
<p>Личное общение + отправка ссылки</p>
<button class="action-button" onclick="showCallTemplate()">Показать шаблон</button>
</div>

<div class="method-card">
<div class="method-icon">🔗</div>
<h3>QR-код</h3>
<p><strong>Для личной встречи</strong></p>
<p>Показать код на телефоне — перейти на сайт</p>
<button class="action-button" onclick="showQRCode()">Сгенерировать QR-код</button>
</div>
</div>
</div>

<!-- Шаблоны сообщений -->
<div class="example-section" id="templates-section" style="display: none;">
<h2>3. Готовые шаблоны сообщений</h2>

<div class="message-templates">
<div class="template" id="messenger-template" style="display: none;">
<h4>📱 Для мессенджеров:</h4>
<div class="code-example">
Привет! 😊
Я только что создал(а) свой первый сайт! 🎉
Это мой учебный проект по HTML.

Посмотри, пожалуйста: [ВАША ССЫЛКА]
Напиши, что думаешь! Буду рад(а) обратной связи.

P.S. Если что-то не работает — тоже напиши 🙏
</div>
<button class="action-button" onclick="copyTemplate('messenger')">📋 Скопировать текст</button>
</div>

<div class="template" id="email-template" style="display: none;">
<h4>📧 Для email (родителям, родственникам):</h4>
<div class="code-example">
Дорогие мама и папа!

Хочу поделиться с Вами своей радостью — я научился(ась) создавать сайты и сделал(а) свой первый проект!

Это сайт о [тема Вашего сайта], который я создал(а) с нуля. Я изучал(а) HTML и CSS, и это мой первый результат.

Вот ссылка на сайт: [ВАША ССЫЛКА]

Буду очень рад(а), если посмотрите и напишете ваше мнение!
Для меня это очень важно.

С любовью,
[Ваше имя]
</div>
<button class="action-button" onclick="copyTemplate('email')">📋 Скопировать текст</button>
</div>

<div class="template" id="social-template" style="display: none;">
<h4>👥 Для социальных сетей:</h4>
<div class="code-example">
Друзья! Изучаю веб-разработку и создал(а) свой первый сайт! 🚀

Это [описание сайта] — мой учебный проект по HTML/CSS.

Ссылка: [ВАША ССЫЛКА]

Буду благодарен(на) за обратную связь и советы!
Особенно интересует:
• Как отображается на телефоне?
• Всё ли понятно на сайте?
• Что можно улучшить?

#вебразработка #первыйсайт #html #css
</div>
<button class="action-button" onclick="copyTemplate('social')">📋 Скопировать текст</button>
</div>

<div class="template" id="call-template" style="display: none;">
<h4>📞 Для телефонного разговора:</h4>
<div class="code-example">
<strong>Что сказать:</strong>
"Привет! Я хочу показать тебе кое-что крутое —
я создал(а) свой первый сайт! Отправляю тебе ссылку,
посмотри, когда будет время. Мне важно твоё мнение!"

<strong>После отправки:</strong>
"Получил(а) ссылку? Зайди, пожалуйста, и скажи,
как тебе дизайн и всё ли работает нормально."
</div>
<button class="action-button" onclick="copyTemplate('call')">📋 Скопировать скрипт</button>
</div>
</div>
</div>

<!-- QR-код секция -->
<div class="example-section" id="qr-section" style="display: none;">
<h2>4. QR-код для Вашего сайта</h2>

<div class="qr-section">
<div class="qr-placeholder" id="qr-code">
QR-код появится здесь
</div>
<p style="margin-top: 15px;">Покажите этот код друзьям — они смогут отсканировать его камерой телефона и перейти на Ваш сайт!</p>
<button class="action-button" onclick="generateQRCode()">🔄 Сгенерировать QR-код</button>
</div>
</div>

<!-- Как получать обратную связь -->
<div class="example-section">
<h2>5. Как получать полезные отзывы</h2>

<div class="warning">
<strong>🎯 Важно:</strong> Просто "мне нравится" — это приятно, но бесполезно для развития.
Попросите конкретную обратную связь!
</div>

<div class="feedback-guide">
<div class="feedback-card">
<h4>❓ Какие вопросы задавать</h4>
<ul>
<li>"Что сразу бросилось в глаза?"</li>
<li>"Всё ли понятно на сайте?"</li>
<li>"Удобно ли читать текст?"</li>
<li>"Что бы ты улучшил(а)?"</li>
</ul>
</div>

<div class="feedback-card">
<h4>📱 Проверка на устройствах</h4>
<ul>
<li>Попросите проверить на телефоне</li>
<li>На планшете</li>
<li>На компьютере</li>
<li>В разных браузерах</li>
</ul>
</div>

<div class="feedback-card">
<h4>🎨 Дизайн и удобство</h4>
<ul>
<li>Нравится ли цветовая гамма?</li>
<li>Удобно ли расположены элементы?</li>
<li>Не "режет" ли глаза что-то?</li>
<li>Логично ли расположен контент?</li>
</ul>
</div>
</div>

<div class="interactive-demo">
<h4>📝 Чеклист для обратной связи:</h4>
<textarea id="feedback-checklist" style="width: 100%; height: 120px; padding: 10px; border: 1px solid #ddd; border-radius: 5px;" placeholder="Записывайте сюда отзывы:
• От мамы: ...
• От друга: ...
• От коллеги: ...
• Что нужно исправить: ..."></textarea>
<button class="action-button" onclick="saveFeedback()">💾 Сохранить отзывы</button>
</div>
</div>

<!-- Что делать с отзывами -->
<div class="example-section">
<h2>6. Что делать с полученными отзывами?</h2>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0;">
<div style="border: 2px solid #3498db; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">👍</div>
<h4>Положительные отзывы</h4>
<p>Сохраните их для мотивации! Это доказательство, что Вы движетесь в правильном направлении.</p>
</div>

<div style="border: 2px solid #f39c12; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">💡</div>
<h4>Конструктивная критика</h4>
<p>Это золото! Составьте список улучшений и постепенно их реализуйте.</p>
</div>

<div style="border: 2px solid #e74c3c; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">🐛</div>
<h4>Найденные ошибки</h4>
<p>Исправляйте их в первую очередь. Каждая исправленная ошибка — шаг к профессионализму.</p>
</div>

<div style="border: 2px solid #27ae60; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">🚀</div>
<h4>Идеи для улучшений</h4>
<p>Записывайте все идеи. Они станут основой для ваших следующих проектов.</p>
</div>
</div>
</div>

<!-- Следующие шаги -->
<div class="example-section">
<h2>7. Что дальше? Ваши следующие шаги</h2>

<div class="success">
<h3>🎓 Вы прошли огромный путь!</h3>
<p>От первого тега HTML до работающего сайта в интернете — это настоящее достижение!</p>
</div>

<div class="note">
<strong>📈 План развития:</strong>
<ol>
<li><strong>Соберите отзывы</strong> от 5-10 человек</li>
<li><strong>Исправьте найденные ошибки</strong></li>
<li><strong>Добавьте улучшения</strong> на основе обратной связи</li>
<li><strong>Создайте новый проект</strong> с учётом полученного опыта</li>
<li><strong>Продолжайте учиться</strong> — JavaScript, адаптивная вёрстка, фреймворки</li>
</ol>
</div>

<div class="testimonial">
<h4>🌟 Запомните этот момент!</h4>
<p>Сегодня Вы разместили свой первый сайт в интернете.
Через год Вы будете с улыбкой вспоминать этот день,
глядя на свои более сложные и совершенные проекты.</p>
<p style="text-align: right; font-style: italic; margin-top: 15px;">— Гордитесь собой! Вы это заслужили 🎉</p>
</div>
</div>
</div>
</div>

<script>
// Основные функции для работы с ссылкой
function copyUrl() {
const url = document.getElementById('website-url').textContent;
navigator.clipboard.writeText(url).then(() => {
alert('✅ Ссылка скопирована в буфер обмена!');
});
}

function testWebsite() {
const url = document.getElementById('website-url').textContent;
window.open(url, '_blank');
}

// Функции для шаблонов сообщений
function showMessengerTemplate() {
document.getElementById('templates-section').style.display = 'block';
document.getElementById('messenger-template').style.display = 'block';
document.getElementById('email-template').style.display = 'none';
document.getElementById('social-template').style.display = 'none';
document.getElementById('call-template').style.display = 'none';
}

function showEmailTemplate() {
document.getElementById('templates-section').style.display = 'block';
document.getElementById('messenger-template').style.display = 'none';
document.getElementById('email-template').style.display = 'block';
document.getElementById('social-template').style.display = 'none';
document.getElementById('call-template').style.display = 'none';
}

function showSocialTemplate() {
document.getElementById('templates-section').style.display = 'block';
document.getElementById('messenger-template').style.display = 'none';
document.getElementById('email-template').style.display = 'none';
document.getElementById('social-template').style.display = 'block';
document.getElementById('call-template').style.display = 'none';
}

function showCallTemplate() {
document.getElementById('templates-section').style.display = 'block';
document.getElementById('messenger-template').style.display = 'none';
document.getElementById('email-template').style.display = 'none';
document.getElementById('social-template').style.display = 'none';
document.getElementById('call-template').style.display = 'block';
}

function copyTemplate(type) {
const template = document.getElementById(`${type}-template`).querySelector('.code-example').textContent;
const url = document.getElementById('website-url').textContent;
const textWithUrl = template.replace('[ВАША ССЫЛКА]', url);

navigator.clipboard.writeText(textWithUrl).then(() => {
alert('✅ Текст скопирован! Вставьте его в сообщение.');
});
}

// Функции для QR-кода
function showQRCode() {
document.getElementById('qr-section').style.display = 'block';
generateQRCode();
}

function generateQRCode() {
const url = document.getElementById('website-url').textContent;
const qrPlaceholder = document.getElementById('qr-code');

// В реальном приложении здесь была бы генерация настоящего QR-кода
// Для демонстрации создаём простой плейсхолдер
qrPlaceholder.innerHTML = `
<div style="text-align: center;">
<div style="font-size: 3em;">📱</div>
<div style="font-size: 0.8em; margin-top: 10px;">QR-код для:<br>${url}</div>
</div>
`;
}

// Сохранение отзывов
function saveFeedback() {
const feedback = document.getElementById('feedback-checklist').value;
if (feedback.trim()) {
alert('✅ Отзывы сохранены! Вернитесь к ним позже для работы над улучшениями.');
// В реальном приложении здесь можно сохранять в localStorage
localStorage.setItem('websiteFeedback', feedback);
} else {
alert('⚠️ Сначала запишите отзывы в поле выше');
}
}

// Загрузка сохранённых отзывов при загрузке страницы
window.addEventListener('load', function() {
const savedFeedback = localStorage.getItem('websiteFeedback');
if (savedFeedback) {
document.getElementById('feedback-checklist').value = savedFeedback;
}

// В реальном приложении здесь можно подставить реальный URL пользователя
// const userUrl = localStorage.getItem('userWebsiteUrl') || 'https://ваш-логин.github.io';
// document.getElementById('website-url').textContent = userUrl;
});
</script>
</body>
</html>

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

✅ Осознавать значимость размещения сайта в интернете
✅ Копировать и делиться ссылкой на Ваш сайт
✅ Использовать разные способы распространения ссылки
✅ Составлять эффективные сообщения для разных аудиторий
✅ Генерировать QR-коды для быстрого доступа
✅ Собирать конструктивную обратную связь
✅ Анализировать и использовать полученные отзывы

Часть 8: Итоги и рекомендации

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

Гордитесь своим достижением — создание работающего сайта это серьёзный успех

Делитесь с близкими в первую очередь — их поддержка важна

Просите конкретную обратную связь — это ускорит ваше развитие

Сохраняйте все отзывы — они станут Вашим гидом для улучшений

Не бойтесь критики — она делает Вас сильнее

💡 Психологические аспекты первого сайта:

Это нормально волноваться — Вы делитесь частью себя

Разные люди увидят разное — кто-то дизайн, кто-то содержание

Критика ≠ личная оценка — это обратная связь о проекте, не о вас

Каждый комментарий ценен — даже "не понравилось" помогает расти

Это только начало — Ваш первый сайт, но не последний

🚀 Практические советы по распространению:

Начните с 2-3 самых близких людей — они дадут самую мягкую обратную связь

Используйте шаблоны из урока — они уже протестированы и работают

Сохраняйте скриншоты похвал — для мотивации в сложные моменты

Создайте папку "Мои проекты" — сохраняйте там все свои работы

Расскажите о процессе — людям интересно как Вы это сделали

🌟 Что говорят те, кто прошёл этот путь:

"Помню, как отправлял ссылку на свой первый сайт маме. Она позвонила в слезах: 'Сынок, ты в интернете!' Этот момент я никогда не забуду." — Артём, веб-разработчик

"Первые отзывы друзей помогли мне понять, что нужно учиться адаптивной вёрстке. Все смотрели с телефонов, а сайт был только для компьютера!" — Марина, фронтенд-разработчик

"Свой первый сайт я сделала в 45 лет. Когда поделилась с подругами, они не поверили, что это возможно в нашем возрасте. Теперь учу их!" — Ольга, начинающий разработчик

Помните: Сегодня Вы не просто разместили сайт в интернете — Вы заявили о себе в цифровом мире и сделали первый шаг к карьере веб-разработчика! 🌟

Ваш сайт теперь живёт в интернете, а Ваши навыки будут расти с каждым новым проектом. Гордитесь собой — Вы это заслужили! 🎉

- * * * -

Приложения

Приложение А: Шпаргалка по основным тегам HTML

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

Как пользоваться таблицей:

Тег: Как пишется команда в угловых скобках.

Для чего нужен: Простое и понятное объяснение.

Пример: Как это будет выглядеть в коде.

Как выглядит в браузере: Как это увидит пользователь на странице.

Основные теги (Каркас страницы)

Это основа любой HTML-страницы. Можно сказать, "коробка", в которую всё складывается.

Тег

Для чего нужен

Пример

Как выглядит в браузере

<!DOCTYPE html>

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

<!DOCTYPE html>

(Не виден, это служебная информация)

<html>

Главный контейнер для всего содержимого страницы.

<html>
...вся страница...
</html>

(Не виден)

<head>

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

<head>
<title>Мой сайт</title>
</head>

(Содержимое не отображается на самой странице, но заголовок title виден в названии вкладки браузера)

<title>

Заголовок окна или вкладки браузера. Очень важен для поисковых систем.

<title>Мой дневник</title>

Виден надписью на вкладке браузера

<body>

Тело документа. Здесь находится всё, что Вы видите на странице: текст, картинки, ссылки и т.д.

<body>
<h1>Добро пожаловать!</h1>
<p>Это мой сайт.</p>
</body>

Добро пожаловать!
Это мой сайт.

Теги для текста и заголовков

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

Тег

Для чего нужен

Пример

Как выглядит в браузере

<h1>, <h2>, ... <h6>

Заголовки разного уровня. <h1> — самый главный (крупный), <h6> — самый мелкий.

<h1>Глава 1</h1>
<h2>Раздел 1.1</h2>
<h3>1.1.1 Подраздел</h3>

<h1>Глава 1</h1> <h2>Раздел 1.1</h2> <h3>1.1.1 Подраздел</h3>

<p>

Абзац текста. Браузер автоматически добавляет отступы сверху и снизу.

<p>Это первый абзац.</p>
<p>А это второй.</p>

Это первый абзац.

А это второй.

<br>

Перенос строки. Тег одиночный (не требует закрывающего). Просто переходит на новую строку.

Строчка первая.<br>Строчка вторая.

Строчка первая.
Строчка вторая.

<b> или <strong>

Жирный текст. <strong> также означает "важный" с точки зрения смысла.

Это <b>жирный</b> текст.

Это жирный текст.

<i> или <em>

Курсивный текст. <em> также означает "акцентированный" с точки зрения смысла.

Это <i>курсивный</i> текст.

Это курсивный текст.

<mark>

Выделяет текст цветным маркером (обычно желтым).

Это <mark>важная часть</mark> текста.

Это важная часть текста.

Ссылки и изображения

Без этих тегов не было бы Всемирной паутины!

Тег

Для чего нужен

Пример

Как выглядит в браузере

<a>

Создает ссылку (гиперссылку) на другую страницу или сайт. Обязательно используйте атрибут href="адрес".

Читайте на <a href="https://example.com">любимом сайте</a>.

Читайте на любимом сайте.

<img>

Вставляет изображение на страницу. Это одиночный тег. Обязательные атрибуты: src="путь_к_картинке" и alt="описание".

<img src="cat.jpg" alt="Мой кот Васька">

![Изображение кота]

Списки

Помогают красиво оформить перечисления.

Тег

Для чего нужен

Пример

Как выглядит в браузере

<ul>

Создает маркированный список (с точками или другими значками).

<ul>
<li>Яблоки</li>
<li>Груши</li>
</ul>

  • Яблоки
  • Груши

<ol>

Создает нумерованный список (с цифрами или буквами).

<ol>
<li>Вскипятить воду</li>
<li>Заварить чай</li>
</ol>

  1. Вскипятить воду
  2. Заварить чай

<li>

Элемент списка. Используется внутри <ul> или <ol>.

(Смотри примеры выше)

(Смотри примеры выше)

Структурные блоки (Макет страницы)

Эти теги не меняют вид текста, но помогают логически разделить страницу на блоки (шапка, меню, основной контент, подвал). Это очень важно для последующего оформления с помощью CSS.

Тег

Для чего нужен

Пример

<div>

Универсальный блочный контейнер. Используется для группировки элементов и создания макета.

<div>
<h2>Новости</h2>
<p>Текст новости...</p>
</div>

<header>

"Шапка" сайта или раздела. Обычно здесь находится логотип и главное меню.

<header>
<h1>Мой Блог</h1>
</header>

<nav>

Раздел для навигационных ссылок (главное меню сайта).

<nav>
<a href="/">Главная</a>
<a href="/about">Обо мне</a>
</nav>

<main>

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

<main>
<h2>Статья о садоводстве</h2>
<p>Текст статьи...</p>
</main>

<footer>

"Подвал" сайта или раздела. Часто содержит контактную информацию, авторские права.

<footer>
<p>© 2024, Мой сайт</p>
</footer>

Небольшой совет

Не стремитесь запомнить всё и сразу. Начните с самого главного: <html>, <head>, <body>, <h1>, <p>, <a> и <img>. Этого уже достаточно, чтобы создать свою первую простую страничку!

Постепенно, по мере практики, Вы будете запоминать и другие теги. Удачи в освоении веб-грамотности

Приложение Б: Словарик терминов

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

А

Атрибут

Простое объяснение: Это дополнительная инструкция или характеристика внутри тега. Если тег — это слово команды, то атрибут — это уточнение, как именно выполнить эту команду.

Жизненная аналогия: Представьте, что Вы даете команду "варить!" (это тег). Атрибуты — это уточнения: "варить 10 минут (атрибут time="10") и в кастрюле (атрибут pot="yes")".

Пример в HTML: В теге <img src="photo.jpg" alt="Моя дача"> слова src и alt — это атрибуты. Они сообщают браузеру, где найти картинку и что это за картинка.

Браузер

Простое объяснение: Это программа-переводчик, которая умеет читать HTML-код и превращать его в красивую, удобную для чтения страницу с текстом, картинками и ссылками.

Жизненная аналогия: Браузер — это как телевизор. Вы не смотрите на внутренние микросхемы и сигналы (HTML-код), Вы смотрите на готовую, понятную картинку (веб-страницу). Примеры браузеров: Google Chrome, Яндекс.Браузер, Mozilla Firefox, Safari.

Важно: Именно браузер показывает Вам сайты в интернете.

В

Веб-страница

Простое объяснение: Один отдельный документ в интернете. Например, статья в онлайн-газете или Ваша анкета в социальной сети.

Жизненная аналогия: Одна страница в книге.

Веб-сайт (или просто "Сайт")

Простое объяснение: Это несколько веб-страниц, объединенных вместе под одним общим названием (адресом) и общей темой.

Жизненная аналогия: Целая книга, состоящая из многих страниц (веб-страниц). Например, весь интернет-магазин "Озон" — это сайт, а страница с конкретным чайником — это веб-страница.

Верстка

Простое объяснение: Процесс создания веб-страницы с помощью HTML и CSS. Верстальщик, как конструктор, расставляет на странице текст, картинки, кнопки и другие элементы.

Жизненная аналогия: Процесс макетирования газеты или журнала, когда редактор расставляет статьи, фотографии и заголовки по полосам.

Д

Домен (Доменное имя)

Простое объяснение: Это красивое и удобное для запоминания название сайта, которое Вы вводите в адресную строку браузера.

Жизненная аналогия: Доменное имя — это название улицы и номер дома в интернете. Настоящий "адрес" сайта — это длинный набор цифр (IP-адрес), но людям удобнее использовать имя, например, yandex.ru, а не 77.88.55.60.

Пример: google.com, pensioner.ru, moj-sad.ru.

И

Интернет

Простое объяснение: Всемирная сеть, которая соединяет миллиарды компьютеров по всему миру. Это как гигантская паутина из проводов и беспроводных сигналов.

Жизненная аналогия: Если сайт — это магазин, то интернет — это весь город с его улицами, по которым Вы до этого магазина добираетесь.

К

Код

Простое объяснение: Набор специальных команд и инструкций, написанных на понятном для компьютера языке. HTML — это один из таких языков кода.

Жизненная аналогия: Кулинарный рецепт. В рецепте тоже есть свои "команды" ("взбить", "посолить", "выпекать 30 минут"), следуя которым, Вы получаете готовое блюдо (веб-страницу).

Контейнер

Простое объяснение: Тег (например, <div>), который служит "коробкой" для группировки других тегов. Он помогает организовать элементы на странице.

Жизненная аналогия: Ящик на кухне, в котором Вы храните все столовые приборы. Вместо того чтобы разбрасывать ложки и вилки по всему столу, Вы кладете их в один ящик-контейнер.

С

Сервер

Простое объяснение: Это очень мощный и постоянно работающий компьютер, который хранит файлы веб-сайтов и отдает их Вашим браузерам по запросу.

Жизненная аналогия: В библиотеке много книг (сайтов), но Вы не ходите по книжным полкам сами. Библиотекарь (сервер) по Вашей просьбе находит нужную книгу и приносит её Вам (в браузер).

Ссылка (Гиперссылка)

Простое объяснение: Особый элемент на веб-странице (обычно выделенный синим цветом и подчеркиванием), при щелчке на который Вы переходите на другую страницу или сайт.

Жизненная аналогия: Сноска или цитата в книге, которая говорит: "об этом подробнее читайте на странице 45". В интернете переход происходит мгновенно.

CSS

Простое объяснение: Это язык, который отвечает за внешний вид сайта. Если HTML создает каркас (где заголовок, где текст), то CSS делает этот каркас красивым: задает цвет, размер шрифта, отступы и расположение элементов.

Жизненная аналогия: Если HTML — это стены и перегородки в новом доме (структура), то CSS — это ремонт: поклейка обоев, покраска стен, расстановка мебели (оформление).

Т

Тег

Простое объяснение: Это основная команда или кирпичик в языке HTML. Теги заключаются в угловые скобки < > и говорят браузеру, что именно находится на странице: заголовок, абзац, картинка и т.д.

Жизненная аналогия: Представьте, что Вы редактор и делаете пометки в рукописи. Вы подчеркиваете заголовок и пишете на полях "заголовок" (это тег <h1>), отмечаете начало нового абзаца (тег <p>). Браузер читает эти пометки и правильно оформляет текст.

Пример: <p> — тег для абзаца, <img> — тег для изображения.

Ф

Файл

Простое объяснение: Электронный документ или "единица информации" на компьютере. У каждого файла есть имя и расширение (три буквы после точки), которое указывает на тип файла.

Примеры:

stranica.html — файл веб-страницы.

foto.jpg — файл изображения.

style.css — файл со стилями CSS.

Фронтенд (Frontend)

Простое объяснение: Это всё, что пользователь видит и с чем взаимодействует в браузере: кнопки, текст, меню, анимации. Создается с помощью HTML, CSS и JavaScript.

Жизненная аналогия: Витрина магазина и торговый зал, куда заходят покупатели.

Антоним: Бэкенд (Backend) — это то, что скрыто от пользователя: базы данных, серверы, логика сайта. ("кухня" и склад магазина).

Х

Хостинг

Простое объяснение: Услуга по предоставлению места на сервере для хранения файлов Вашего сайта. Чтобы Ваш сайт был доступен в интернете 24/7, его файлы должны лежать на специальном, постоянно работающем компьютере — хостинге.

Жизненная аналогия: Если Вы создали сайт — Вы построили дом. Но чтобы его увидели все, ему нужен земельный участок. Хостинг — это и есть тот самый "участок" в интернете, который Вы арендуете у хостинг-компании.

HTML

Простое объяснение: Это язык разметки гипертекста. Главный и основной язык, на котором пишутся веб-страницы. Он не является языком программирования! Его задача — структурировать содержимое страницы: размечать, где заголовок, где абзац, где картинка.

Жизненная аналогия: Скелет или каркас здания. HTML создает основу, несущую конструкцию будущего сайта.

Ч

Чек-лист для создания своего первого сайта:

Написать код — Создать файлы с расширением .html на своем компьютере.

Купить домен — Выбрать и зарегистрировать красивое название для своего сайта.

Купить хостинг — Арендовать место на сервере для своих файлов.

Загрузить файлы — Перенести созданные HTML-файлы с компьютера на хостинг.

Теперь Ваш сайт будет доступен в интернете по вашему доменному имени!

Помните: Не нужно запоминать всё сразу. Возвращайтесь к этому словарику каждый раз, когда встретите незнакомое слово, и скоро эти термины станут для Вас привычными и понятными.


Приложение В: Что учить дальше? Краткий обзор CSS

Дорогие друзья! Поздравляем Вас с освоением основ HTML. Теперь Вы знаете, как создать каркас сайта — расставить заголовки, абзацы, картинки и списки. Но вы, наверное, заметили, что такие страницы выглядят довольно скучно и простовато.

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

Что такое CSS? Проще простого!

HTML — это скелет вашего сайта. Кости есть, форма есть, но нет кожи, волос и одежды.

CSS — это кожа, прическа и костюм для Вашего сайта. Он отвечает за всю красоту!

CSS (Cascading Style Sheets) переводится как "Каскадные Таблицы Стилей". Не пугайтесь этого названия! По сути, это просто набор правил, которые говорят браузеру: "Этому заголовку сделай шрифт красным, а тот абзац размести с правой стороны и поставь вокруг него синюю рамку".

Что конкретно можно делать с помощью CSS?

Давайте посмотрим на конкретные примеры, как CSS может преобразить Вашу HTML-страницу.

1. Работа с текстом

CSS позволяет полностью контролировать внешний вид Вашего текста.

Что можно изменить

Пример правила CSS

Как это выглядит

Цвет текста

color: blue;

<span style="color: blue;">Синий текст</span>

Размер шрифта

font-size: 24px;

<span style="font-size: 24px;">Крупный текст</span>

Семейство шрифтов

font-family: Arial;

<span style="font-family: Arial;">Текст другим шрифтом</span>

Выравнивание

text-align: center;

<div style="text-align: center;">Текст по центру</div>

Было (только HTML):

html

<p>Это простой абзац текста.</p>

Стало (с добавлением CSS):

html

<p style="color: darkgreen; font-size: 20px; font-family: Georgia; text-align: center;">
Это элегантный абзац с крупным зеленым шрифтом, выровненный по центру.
</p>

2. Работа с блоками и фоном

Вы можете управлять фоном, рамками и отступами элементов.

Что можно изменить

Пример правила CSS

Фоновый цвет

background-color: lightyellow;

Рамка

border: 2px solid brown;

Внутренний отступ (поля внутри блока)

padding: 20px;

Внешний отступ (поля снаружи блока)

margin: 15px;

Было (только HTML):

html

<div>Новость дня</div>

Стало (с добавлением CSS):

html

<div style="background-color: lightyellow; border: 2px solid brown; padding: 20px; margin: 15px;">
Новость дня
</div>

(Этот блок будет выглядеть как выделенная цветная плашка с рамкой и отступами)

3. Самый главный принцип: Разделение обязанностей

Обратите внимание на ключевое отличие:

HTML отвечает за содержание и структуру ("что показать")

CSS отвечает за внешний вид и оформление ("как это показать")

Это как в театре: HTML — это актеры и их реплики (содержание пьесы), а CSS — это костюмы, грим, декорации и свет (оформление спектакля).

Как "прицепить" CSS к HTML?

Есть три основных способа подключить стили к Вашей странице:

1. Прямо в теге (инлайновый стиль)

Используется атрибут style.

Плюс: Просто и быстро для одного элемента.

Минус: Неудобно, если нужно стилизовать много элементов.

Пример: <p style="color: red;">Красный текст</p>

2. Внутри страницы (в разделе <head>)

Стили пишутся внутри тега <style> в заголовке документа.

Плюс: Удобно для стилей одной конкретной страницы.

Пример:

html

<head>
<style>
p { color: blue; }
h1 { text-align: center; }
</style>
</head>

3. В отдельном файле (самый правильный способ!)

Все CSS-правила пишутся в отдельном файле с расширением .css (например, style.css).

Этот файл подключается к HTML-документу с помощью тега <link> в разделе <head>.

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

Пример подключения:

html

<head>
<link rel="stylesheet" href="style.css">
</head>

С чего начать изучение CSS? План действий

1. Освойте базовые понятия:

Свойства и значения: свойство: значение; (например, color: red;).

Селекторы: Как сказать браузеру, к КОНКРЕТНОМУ элементу применить стиль (например, селектор по тегу p, по классу .text или по идентификатору #header).

2. Начните с простого:

Поэкспериментируйте с цветами (color, background-color), шрифтами (font-family, font-size) и отступами (margin, padding).

3. Практикуйтесь на своей HTML-странице:

Возьмите страничку, которую Вы уже создали с помощью HTML.

Попробуйте изменить цвет заголовков, добавить фон всему сайту, поиграть с рамками вокруг картинок.

4. Используйте подсказки:

Современные редакторы кода (например, VS Code) автоматически предлагают возможные CSS-свойства, когда Вы начинаете печатать.

Где найти простые и понятные уроки по CSS?

Вот проверенные ресурсы, где материал объясняется так же доступно, как и в этом учебнике:

1. HTML Academy (htmlacademy.ru)

Почему подходит пенсионерам: Огромное количество интерактивных курсов и тренажеров. Вам не нужно просто читать — Вы сразу же выполняете задания в браузере, видя результат. Очень наглядно и понятно. Есть бесплатные интенсивные курсы.

2. Stepik.org

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

3. Канал "Веб-разработка для начинающих" (YouTube)

Почему подходит пенсионерам: Если Вам проще воспринимать информацию на слух и видеть процесс. Найдите видео с названиями "CSS для начинающих за 1 час".

4. Советский, но надежный способ: Книги

В библиотеках часто можно найти старые издания по HTML и CSS. Несмотря на возраст, основы в них изложены очень подробно и системно, без лишней сложности.

Главный совет: Не пытайтесь выучить всё и сразу. Осваивайте CSS маленькими шагами. Сначала научитесь менять цвет текста, потом — размер, потом — добавлять отступы. Каждый новый навык — это большое достижение!

Помните, что создание сайта — это творческий процесс. CSS дает Вам в руки кисть и краски, чтобы раскрасить созданный Вами HTML-каркас. Удачи в этом увлекательном деле!

Приложение Г: Ответы к практическим заданиям

Дорогие друзья! Здесь Вы найдете примеры готовых кодов для заданий, которые были предложены в учебнике. Пожалуйста, используйте их только для самопроверки! Сначала обязательно попробуйте выполнить задание самостоятельно, и только если возникли трудности или Вы хотите свериться с ответом — заглядывайте сюда.

Не бывает двух одинаковых решений! Ваш код может немного отличаться от нашего, и это нормально. Главное, чтобы он работал правильно.

Задание из Главы 2: Ваша первая HTML-страница

Задание: Создайте файл index.html. Напишите базовую структуру HTML-документа. В теле страницы (<body>) разместите главный заголовок <h1> с текстом "Добро пожаловать на мою страницу!" и абзац <p> с любым приветственным текстом.

Ответ:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Добро пожаловать на мою страницу!</h1>
<p>Здравствуйте! Меня зовут Иван, и это моя первая веб-страница, которую я создал самостоятельно. Я очень рад поделиться с Вами своим новым увлечением.</p>
</body>
</html>

Что проверить:

Есть ли <!DOCTYPE html> в самом начале?

Все ли основные теги (<html>, <head>, <body>) на своих местах и закрыты?

Отображается ли заголовок крупным шрифтом, а текст под ним — как обычный абзац?

Задание из Главы 3: Простая статья

Задание: Создайте страницу, которая будет представлять собой небольшую статью на тему "Мое хобби". Используйте заголовки разных уровней (<h1>, <h2>), абзацы (<p>), ненумерованный список (<ul>) для перечисления преимуществ хобби и теги для выделения текста (<b>, <i>).

Ответ:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мое хобби - Садоводство</title>
</head>
<body>
<h1>Мое любимое хобби: Садоводство</h1>

<p>Всем привет! Сегодня я хочу рассказать Вам о своем увлечении, которое приносит мне <b>огромную радость</b> и <i>умиротворение</i> — о садоводстве.</p>

<h2>Почему я люблю садоводство?</h2>
<p>Это занятие позволяет мне быть ближе к природе и видеть результаты своего труда.</p>

<h2>Что я выращиваю?</h2>
<ul>
<li>Помидоры</li>
<li>Огурцы</li>
<li>Клубнику</li>
<li>Разные цветы, особенно <b>бархатцы</b> и <i>ромашки</i></li>
</ul>

<h2>Совет новичкам</h2>
<p>Начните с неприхотливых растений! Не бойтесь ошибок — на них мы учимся.</p>
</body>
</html>

Что проверить:

Заголовок <h1> самый крупный, а <h2> — чуть меньше.

Список отображается с точками (маркерами) перед каждым элементом.

Слова "огромную радость" и "бархатцы" выделены жирным, а "умиротворение" и "ромашки" — курсивом.

Задание из Главы 4: Страница с фотоальбомом

Задание: Создайте страницу "Мой фотоальбом". Добавьте несколько изображений (можно использовать картинки из интернета или со своего компьютера). Обязательно укажите атрибут alt с описанием для каждой картинки. Разместите под каждой фотографией подпись.

Ответ:

html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой фотоальбом</title>
</head>
<body>
<h1>Мой летний фотоальбом</h1>

<p>Вот несколько фотографий с моей дачи в этом году.</p>

<div>
<img src="цветы.jpg" alt="Клумба с яркими цветами на моем участке" width="400">
<p>Моя любимая клумба. Как Вам эти цветы?</p>
</div>

<div>
<img src="урожай.jpg" alt="Корзина со свежими огурцами и помидорами" width="400">
<p>Первый урожай! Огурцы и помидоры с собственной грядки.</p>
</div>

<div>
<img src="кот.jpg" alt="Мой кот Васька спит на скамейке в саду" width="400">
<p>А это мой помощник, кот Васька. Он "отдыхает" после тяжелого дня.</p>
</div>
</body>
</html>

Важное примечание: В атрибуте src вы должны указать правильный путь к Вашим изображениям. Если картинки лежат в той же папке, что и HTML-файл, достаточно просто имени файла, как в примере. Если картинки в другой папке, путь будет таким: src="images/цветы.jpg".

Задание из Главы 5: Навигационное меню

Задание: Создайте простой сайт из трех страниц: "Главная", "Обо мне" и "Мои увлечения". На каждой странице создайте навигационное меню с ссылками на все три страницы.

Ответ для файла index.html (Главная страница):

html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Главная страница</title>
</head>
<body>
<!-- Навигационное меню -->
<nav>
<a href="index.html">Главная</a> |
<a href="about.html">Обо мне</a> |
<a href="hobbies.html">Мои увлечения</a>
</nav>

<h1>Добро пожаловать на мой сайт!</h1>
<p>Здесь Вы найдете информацию обо мне и моих увлечениях.</p>
<p>Используйте меню выше, чтобы перейти в разные разделы.</p>
</body>
</html>

Ответ для файла about.html (Страница "Обо мне"):

html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Обо мне</title>
</head>
<body>
<!-- Навигационное меню (должно быть на КАЖДОЙ странице) -->
<nav>
<a href="index.html">Главная</a> |
<a href="about.html">Обо мне</a> |
<a href="hobbies.html">Мои увлечения</a>
</nav>

<h1>Обо мне</h1>
<p>Меня зовут Александр, мне 68 лет. Я на пенсии и активно осваиваю компьютер и интернет.</p>
<p>Живу в Москве, у меня двое взрослых детей и трое внуков.</p>
</body>
</html>

Ответ для файла hobbies.html (Страница "Мои увлечения"):

html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мои увлечения</title>
</head>
<body>
<!-- Навигационное меню -->
<nav>
<a href="index.html">Главная</a> |
<a href="about.html">Обо мне</a> |
<a href="hobbies.html">Мои увлечения</a>
</nav>

<h1>Мои увлечения</h1>
<p>В свободное время я люблю:</p>
<ul>
<li>Заниматься садоводством</li>
<li>Читать книги</li>
<li>Осваивать новые технологии</li>
<li>Путешествовать по историческим местам</li>
</ul>
</body>
</html>

Что проверить:

Все три файла (index.html, about.html, hobbies.html) созданы и лежат в одной папке.

Меню на каждой странице содержит три ссылки.

Ссылки работают: при нажатии на "Обо мне" с главной страницы Вы переходите на about.html, и т.д.

Общие советы по проверке:

Всегда сохраняйте файл после внесения изменений (Файл -> Сохранить или Ctrl+S).

Обновляйте страницу в браузере после сохранения, чтобы увидеть изменения (клавиша F5 или кнопка "Обновить").

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

Помните: Практика — лучший учитель. Чем больше Вы экспериментируете и пишете свой собственный код, тем увереннее Вы будете себя чувствовать. Успехов в Вашем творчестве!