01 — Моя первая страница

Основы HTML и CSS в файле, который открывается в браузере, до создания проекта

Создадим страницу с заголовками, абзацами, изображением, ссылкой и списком и оформим её с помощью CSS. Будем работать в обычном HTML-файле и открывать его в браузере до создания проекта в Visual Studio или VS Code.

Предыдущий урок: Карта курса: мой сайт (на иврите) · Следующий урок: 02 — Среда разработки: запускаем и изменяем сайт

На сенсорном экране проведите вправо для перехода к следующему уроку, влево — к предыдущему.

Чему научимся

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

HTML: описываем содержимое страницы

HTML — язык разметки. Теги обозначают части содержимого: заголовок, абзац, изображение или ссылку. Например:

<p>זה האתר הראשון שלי.</p>

<p> — открывающий тег, за ним идёт содержимое, затем закрывающий тег </p>. Косая черта обозначает закрытие. Браузер показывает содержимое как абзац, а сами символы тегов не выводит. Текст в примере означает «Это мой первый сайт».

Тег Для чего нужен? Пример
h1 Главный заголовок страницы; на нашей странице он будет один <h1>החיות שלי</h1>
h2 Заголовок раздела внутри страницы <h2>מה תמצאו כאן?</h2>
p Абзац текста <p>אני אוהב ללמוד על חיות.</p>
br Перенос строки внутри того же содержимого <p>שלום!<br>נעים להכיר.</p>
img Изображение <img src="fox.svg" alt="איור של שועל" width="180">
a Ссылка на другой адрес <a href="https://he.wikipedia.org">ויקיפדיה</a>
ul Ненумерованный список с пунктами li <ul><li>שועל</li><li>ינשוף</li></ul>
li Один пункт списка <li>שועל</li>

h1 и h2 обозначают уровни заголовков. Выбирайте их по структуре содержимого; позже размер можно изменить через CSS. У br и img нет внутреннего содержимого и закрывающего тега: не пишите </br> или </img>.

Нажатие Enter в исходном коде обычно не создаёт новую строку при показе обычного текста. Для нового абзаца используйте ещё один p, для намеренного переноса внутри абзаца — br. Расстояние между областями задавайте через CSS вместо цепочки тегов br.

Атрибуты и вложенность

В открывающем теге можно записать атрибуты в форме name="value". У изображения src задаёт путь к файлу, alt — альтернативный текст с его описанием, а width — ширину показа в пикселях. Альтернативный текст также помогает людям, использующим программу чтения с экрана. У ссылки href задаёт адрес перехода, а текст между <a> и </a> — то, на что нажимают.

Тег может содержать другие теги. Это вложенность: каждый li находится внутри ul. Сначала закрывают внутренний тег, затем внешний. Отступы в коде помогают видеть структуру.

Попробуйте в W3Schools: откройте HTML Basic Examples — базовые примеры HTML. Рядом с примером заголовка и абзаца нажмите Try it Yourself, измените текст заголовка, добавьте абзац p и нажмите Run, чтобы увидеть результат. Затем вернитесь сюда и переходите к CSS.

CSS: определяем внешний вид содержимого

CSS — язык оформления страницы. Правило CSS выбирает элементы и задаёт им свойства оформления:

p {
    color: darkgreen;
    font-size: 1.2rem;
}

p — селектор: правило действует на все абзацы страницы. В фигурных скобках записывают объявления в форме property: value;: имя свойства, двоеточие, значение и точка с запятой. Здесь color задаёт цвет текста, а font-size — его размер. rem — единица относительно базового размера шрифта страницы; 1.2rem означает размер в 1,2 раза больше базового.

На первой странице запишем правила CSS в теге style внутри head. Позже будем использовать и отдельный файл с расширением .css.

Поэкспериментируйте с оформлением в W3Schools: откройте CSS Syntax — селектор, свойство и значение и нажмите Try it Yourself. В правиле p измените значение color с red на blue и нажмите Run. Объясните, почему цвет меняют все абзацы, затем вернитесь сюда, чтобы создать свой файл.

Подготавливаем папку для файлов

Откройте Проводник в Windows или Finder в macOS. В Documents / Документы создайте папку first-page. В ней сохраним index.html и fox.svg. Git и учётная запись GitHub пока не нужны; к сохранению версий перейдём после урока Bootstrap.

1. Создаём настоящий файл

В Windows откройте Notepad и сохраните файл в папке first-page под именем index.html, в кодировке UTF-8, выбрав тип файла All files. Убедитесь, что не получился index.html.txt. В macOS можно использовать VS Code как простой текстовый редактор.

2. Подготавливаем изображение и открываем страницу в браузере

Скачайте рисунок лисы (fox.svg) и сохраните его в папке first-page рядом с index.html. Напишите и сохраните код из следующего раздела, затем дважды щёлкните index.html. После каждого изменения и сохранения обновляйте страницу в браузере.

Изменения в коде

first-page/index.html

В новом файле first-page/index.html напишите следующий текст. Если вы уже открыли пустой файл, продолжайте работать в нём. Общий пример сайта в курсе написан на иврите и читается справа налево (RTL), поэтому оставьте строки на иврите и lang="he" dir="rtl" как в примере. Заголовок «החיות שלי» означает «Мои животные», а альтернативный текст изображения — «рисунок лисы».

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="utf-8">
    <title>החיות שלי</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: ivory;
            padding: 1rem;
        }
        h1 {
            color: darkgreen;
        }
        p {
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <h1>החיות שלי</h1>
    <p>זה האתר הראשון שלי. כאן אכיר לכם חיות שמסקרנות אותי.</p>
    <h2>מה תמצאו כאן?</h2>
    <ul>
        <li>שועל</li>
        <li>ינשוף</li>
    </ul>
    <img src="fox.svg" alt="איור של שועל" width="180">
    <p>רוצים להכיר את השועל?<br>אפשר להמשיך לקרוא בקישור הבא.</p>
    <a href="https://he.wikipedia.org/wiki/שועל">לקריאה על שועלים</a>
</body>
</html>

Читаем структуру файла

  • <!DOCTYPE html> сообщает браузеру, что это современный HTML-документ.
  • html охватывает страницу. lang="he" указывает язык — иврит, а dir="rtl" задаёт направление справа налево.
  • head содержит сведения о странице: meta charset="utf-8" задаёт кодировку с поддержкой иврита, title — заголовок вкладки, а style содержит правила CSS.
  • body содержит то, что отображается в окне браузера.

В правиле body свойство font-family выбирает шрифт: Arial, если он доступен, иначе шрифт семейства sans-serif. background-color задаёт цвет фона, а padding добавляет внутренний отступ между границами области и её содержимым. Правило h1 окрашивает главный заголовок, а правило p увеличивает оба абзаца.

Запускаем и проверяем

  1. Откройте index.html: на светлом фоне видны зелёный главный заголовок, заголовок раздела, два абзаца, список из двух пунктов, лиса и ссылка.
  2. Измените текст внутри h1, сохраните и обновите страницу. Текст заголовка меняется, цвет остаётся зелёным.
  3. Добавьте пункт li внутри ul, сохраните и обновите страницу. В том же списке теперь три пункта.
  4. Временно удалите br и соедините части предложения обычным пробелом. Сохраните и обновите: заданный перенос исчезнет; в узком окне текст всё равно может переноситься по ширине. Верните br.
  5. Замените darkgreen на navy, а ivory на lightyellow, сохраните и обновите. Цвета заголовка и фона меняются, текст остаётся прежним.
  6. Измените размер абзацев с 1.2rem на 1.5rem. Убедитесь, что увеличились оба абзаца. Измените padding с 1rem на 2rem и проверьте, что отступ вокруг содержимого вырос.
  7. Временно измените имя изображения в src, сохраните и обновите. Объясните альтернативный текст и верните правильный путь.
  8. Нажмите ссылку и убедитесь, что она ведёт на страницу о лисах. Вернитесь на свою страницу кнопкой «Назад» в браузере.

Самостоятельное задание и проверка понимания

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

  1. Чем отличаются title, h1 и h2?
  2. Когда нужен новый p, а когда — br?
  3. Чем отличается src изображения от href ссылки?
  4. Какая часть кода меняет содержимое, а какая — только оформление? Почему селектор p действует на оба абзаца?

Сохраните оба файла в папке first-page и убедитесь, что страница открывается и изображение видно. На следующем уроке вы создадите проект Razor Pages и запустите его в среде разработки.

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

Дальше