Сделаем сайт своим: выберем интересную нам тему, напишем вступительный абзац и добавим список и ссылку на дополнительную информацию.
Предыдущий урок: 02 — Среда разработки: запускаем и изменяем сайт · Следующий урок: 04 — Оформляем сайт с помощью CSS
На сенсорном экране проведите вправо для перехода к следующему уроку, влево — к предыдущему.
Чему научимся
- Создавать список и ссылку.
- Выбирать интересную вам тему.
- Различать собственное содержимое и общую структуру сайта.
Мы пока пробуем разные варианты до регистрации годового проекта. Можно продолжить выбранный пробный проект или создать новый в отдельной папке по инструкциям урока 02. Если начинаете заново, внесите изменения из предыдущих уроков, необходимые для следующих примеров. Сохраните прежние проекты; публиковать их на GitHub пока не нужно.
Открываем и запускаем
Откройте папку проекта, с которым работали, сохраните файлы и запустите сайт. Прежде чем вносить новое изменение, убедитесь, что изменение с прошлого занятия отображается.
Выбираем небольшую тему
Выберите животных, песни, игры или игроков. Заранее продумайте простую связь: смотритель — животные, исполнитель — песни, студия — игры или команда — игроки. Каждый элемент будет относиться к одному родительскому объекту. Замените текст и изображения содержимым по своей теме. Сохраняйте в wwwroot/images фотографии, снятые вами, или изображения, которыми вам разрешено пользоваться.
Изменения в коде
RazorTaba/Pages/Index.cshtml
Внесите следующее изменение в существующий файл. Знаки + и - обозначают изменения и не являются частью кода:
@{
ViewData["Title"] = "בית";
}
<h1>החיות שלי</h1>
-<p>זה האתר הראשון שלי. כאן אכיר לכם חיות שמסקרנות אותי.</p>
+<p>ברוכים הבאים לפינה שלי בטבע. נכיר חיות, נקרא עליהן ונלמד איך מטפלים בהן.</p>
+<h2>מה תמצאו כאן?</h2>
+<ul>
+ <li>חיות שיש להן סיפור</li>
+ <li>מדריכי טיפול קצרים</li>
+ <li>המלצות שלי להיכרות מקרוב</li>
+</ul>
+<a href="https://he.wikipedia.org/wiki/שועל">לקריאה על שועלים</a>
<img src="~/images/fox.svg" alt="איור של שועל" width="180" />
Запускаем и проверяем
- В списке отображаются три пункта.
- Ссылка открывает задуманный вами адрес.
- Заголовок и абзац относятся к одной теме.
Самостоятельное задание и проверка понимания
Напишите вступительный абзац и три пункта списка по своей теме. Объясните, чем href отличается от текста между тегами a.
После изменения сохраните файлы, проверьте сайт в браузере и объясните, что изменили. Можно продолжить этот пробный проект или потренироваться в отдельном; запишите, где сохранён каждый из них.
ИИ может помочь разобраться в сообщении об ошибке и найти неисправность. Вы отвечаете за написание, проверку и объяснение кода; не поручайте агенту писать проект.