Как работает веб. Ссылки, таблицы и формы

Открываем «капот» браузера — консоль разработчика, узнаём, как страница попадает к нам из интернета, и учимся делать ссылки, таблицы и формы.

📋 Заданий: 5✅ С автопроверкой: 4✨ Новых: 4

🔍Как работать с браузером Chrome

  1. Открой браузер и нажми F12 или Ctrl + Shift + I.

    Консоль в браузере
  2. Простая схема работы веба: браузер отправляет запрос, сервер присылает ответ.

    Схема работы веба

✍️Задания

1

Создай такую же страницу и разгадай шифр

легкоавтопроверка

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

Нажми F12 на странице-образце — там можно найти кое-что интересное!

👀 Открыть загадку

Показать ответ (сначала попробуй сам!)
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Загадка</title>
</head>
<body>
    <h1>Загадка!</h1>
    <mark>Я зашифровал слово, попробуй его расшифровать! А также попробуй создать точно такую же страничку =)</mark>
    <div>
        <h2>жявягйябдйя</h2>
        <form action="" id="quizForm">
            <input type="text">
            <input type="submit" value="Ответ" id="secret">
        </form>
        <p id="answer"></p>
    </div>
    <div>
        <strong>Подсказка: </strong>
        <small>Шифр был придуман древнеримским <i>Диктатором!</i></small>
    </div>
</body>
</html>
2

Расписание уроков

легконовоеавтопроверка

Сделай таблицу с расписанием на 3 дня: первая строка — заголовки (<th>), дальше минимум 3 строки с уроками. У таблицы должна быть рамка: атрибут border="1".

Показать ответ (сначала попробуй сам!)
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <table border="1">
        <tr><th>Понедельник</th><th>Вторник</th><th>Среда</th></tr>
        <tr><td>Математика</td><td>Русский</td><td>Информатика</td></tr>
        <tr><td>Физкультура</td><td>Литература</td><td>Английский</td></tr>
        <tr><td>Рисование</td><td>Музыка</td><td>Технология</td></tr>
    </table>
</body>
</html>
3

Все виды ссылок

легконовоеавтопроверка

Сделай три ссылки:

  • на любой сайт, которая открывается в новой вкладке (target="_blank")
  • на электронную почту (href="mailto:...")
  • ссылку-картинку: внутри <a> — тег <img> (можно взять картинку img/telegram.png)

Показать ответ (сначала попробуй сам!)
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <p><a href="https://developer.mozilla.org/ru/" target="_blank">Учебник MDN</a></p>
    <p><a href="mailto:hello@kidkod.ru">Написать письмо</a></p>
    <p><a href="https://t.me/kidkodschool" target="_blank"><img src="img/telegram.png" alt="Телеграм" width="48"></a></p>
</body>
</html>
4

Форма регистрации

средненовоеавтопроверка

Сделай форму регистрации в игре. В ней должны быть:

  • поле для имени и поле для почты (type="email")
  • поле для пароля (type="password")
  • выпадающий список <select> с выбором класса героя (минимум 3 варианта)
  • галочка type="checkbox" «Согласен с правилами»
  • кнопка «Зарегистрироваться»
  • подписи <label> к полям

Показать ответ (сначала попробуй сам!)
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
</head>
<body>
    <h1>Регистрация героя</h1>
    <form>
        <label for="name">Имя:</label>
        <input type="text" id="name"><br>
        <label for="email">Почта:</label>
        <input type="email" id="email"><br>
        <label for="pass">Пароль:</label>
        <input type="password" id="pass"><br>
        <label for="hero">Класс героя:</label>
        <select id="hero">
            <option>Воин</option>
            <option>Маг</option>
            <option>Лучник</option>
        </select><br>
        <label><input type="checkbox"> Согласен с правилами</label><br>
        <button type="submit">Зарегистрироваться</button>
    </form>
</body>
</html>
5

Найди код ответа сервера

легконовое

Открой консоль разработчика (F12) → вкладка Network (Сеть) и обнови эту страницу. Какой код ответа пришёл для файла lesson_2.html?

Теперь открой несуществующую страницу, например raferalston.github.io/nothing.html. Какой код теперь? Найди оба кода в списке кодов ответов (ссылка внизу).

Показать ответ (сначала попробуй сам!)
Для существующей страницы — 200 OK (всё хорошо).
Для несуществующей — 404 Not Found (страница не найдена).