Основы HTML

Собираем скелет сайта из тегов

HTML

HTML (HyperText Markup Language) — это язык разметки.

В HTML просто расставляются теги, чтобы браузер понимал: «здесь заголовок», «здесь картинка», «здесь видос».

HTML — это всего лишь скелет сайта.

Тег — это команда в угловых скобках. У тега должно быть начало и конец

<тег>Содержимое</тег>
  • <тег> — открывающий тег
  • </тег> — закрывающий тег (со слэшем)

Создание проекта

1. Открываем PyCharm

PyCharm

В левом верхнем углу значок меню. Нажимаем «New project» (Новый проект)

Меню
Меню

3. Здесь можно указать название своего проекта (а можно оставить как есть)

4. Нажимаем «Create» (создать)

Создать проект
Создать

5. Ура! Мы создали проект

Создание HTML-файла

А где писать код? А надо создать HTML-файл!

Нажать правой кнопкой по папке проекта

Правая кнопка по папке проекта
  • • Выбрать «New»
  • • Нажать «HTML File»
Новый HTML файл

Указать имя файла «index» (можно свое любое) и нажать Enter

Имя файла

Ура! Мы создали HTML-файл. Теперь в нем можно будет писать код

Готово к коду

Структура страницы

У всех HTML-документов единый шаблон.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
  • <!DOCTYPE html> — говорит браузеру: «это современный HTML»
  • <html> — корень, внутри него всё остальное
  • <head> — «служебная» часть: заголовок вкладки, подключение стилей
  • <title> — текст, который видно на вкладке браузера
  • <body> — всё, что видит пользователь на странице

Всё, что пишем внутри <body>, — видно при открытии страницы. Всё, что в <head>, — не видно (кроме title).

Открываем страницу в браузере

Чтобы увидеть, что получилось, нужно открыть HTML-файл в браузере.

Нажать правой кнопкой по файлу → «Open In» → «Browser» - Выбрать браузер

Иконка браузера

✅ Файлик откроется в браузере

Открыть в браузере

Заголовки и текст

Заголовки бывают 6 уровней: от <h1> (самый большой) до <h6> (самый маленький).

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>

Абзац текста пишется в теге <p> (paragraph).

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

Полезные теги для оформления текста:

  • <b>текст</b> — жирный
  • <i>текст</i> — курсив
  • <br> — перенос строки (одиночный тег, без закрывающего)
  • <hr> — горизонтальная линия (тоже одиночный)

Одиночные теги не закрываются: пишем просто <br>, а не <br></br> хаха.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>Это мой <b>первый абзац</b> на сайте.</p>
    <p>А это <br>второй абзац.</p>
</body>
</html>

Задания по заголовкам и тексту (^>_<^)

  1. Создай HTML-файл и добавь заголовок <h1> со своим именем
Пример: заголовок с моим ником
Пример заголовка
  1. Добавь три абзаца <p> о себе: как зовут, сколько лет, чем увлекаешься
Пример: три абзаца про мои хобби
Пример абзацев
  1. Сделай заголовки <h2> для каждого блока: «Обо мне», «Мои увлечения», «Мои цели»
Пример: разбиваю страницу на блоки через h2
  1. В одном из абзацев сделай жирное слово через <b> и курсив через <i>
Пример: выделяю название любимого занятия жирным

Списки

Списки бывают двух видов: маркированные и нумерованные.

Маркированный список — тег <ul> (unordered list):

<ul>
    <li>Мои любимые игры</li>
    <li>Мои любимые фильмы</li>
    <li>Мои любимые книги</li>
</ul>

Нумерованный список — тег <ol> (ordered list):

<ol>
    <li>Проснуться</li>
    <li>Поесть</li>
    <li>Пойти на IT-Квантум</li>
</ol>

Внутри <ul> и <ol> могут быть только <li> — элементы списка.

Задания по спискам ≽^◕ ˕ ◕^≼

  1. Сделай маркированный список из 3 твоих любимых игр
Пример: список из моих любимых игр
  1. Сделай нумерованный список «Мой распорядок дня» из 5 пунктов
Пример: список из моего дня
  1. Сделай вложенный список: любимые предметы, а внутри каждого — любимые темы
Пример: список внутри списка

Картинки и ссылки

Картинка добавляется одиночным тегом <img>.

<img src="photo.jpg" alt="Моё фото">
  • src — путь к картинке (файл рядом или ссылка из интернета)
  • alt — текст, который покажется, если картинка не загрузится

Ссылка делается тегом <a> (anchor).

<a href="https://google.com">Перейти на Google</a>
  • href — куда ведёт ссылка (URL)
  • Текст между тегами — то, что видно и по чему кликают

Можно обернуть картинку в ссылку: клик по картинке — переход на сайт.

<a href="https://it-kvantum.ru">
    <img src="logo.png" alt="IT-Квантум">
</a>

Задания по картинкам и ссылкам (≧▽≦)

  1. Добавь на страницу любую картинку из интернета через <img>
Пример: вставляю картинку по ссылке
  1. Сделай ссылку на свой любимый сайт. Текст ссылки — название сайта
Пример: ссылка на YouTube
  1. Оберни картинку в ссылку — чтобы клик по картинке вёл на сайт
Пример: кликабельная картинка с логотипом

СПЕЦЗАДАНИЕ

Клепаем свой сайт-визитку.

Структура страницы:

  • <h1> — твой ник
  • <img> — картинка-аватар
  • <p> — пара абзацев о себе
  • <h2> + <ul> — список любимых игр (и чего-то другого)
  • <a> — ссылка на любой любимый сайт

Пример готовой страницы:

Пример проекта