Встраивание PHP в HTML

Тренажер по PHP для пользователей с начальным уровнем подготовки.

Тренажер PHP

В этом уроке разберемся, как правильно вставлять PHP-код внутрь HTML-разметки. Вы научитесь использовать открывающие и закрывающие теги PHP, поймете разницу между полной и короткой формой вывода, освоите альтернативный синтаксис управляющих конструкций для шаблонов. Задания включают заполнение пропусков в коде, исправление типичных ошибок при встраивании, сборку работающих HTML-страниц с динамическим содержимым и предсказание результатов выполнения скриптов. Важно понимать, где заканчивается HTML и начинается PHP, как корректно переключаться между режимами и избегать синтаксических ловушек при смешивании двух языков в одном файле.

Список тем

Открываем и закрываем PHP

id: 38908_task1

Вставьте правильные теги для открытия и закрытия PHP-блока внутри HTML-документа. Код должен вывести приветствие на страницу.

Заполните пропуски
<!DOCTYPE html>
<html>
<body>
    <h1>Добро пожаловать</h1>
    input1S
        echo "Привет из PHP!";
    input2S
</body>
</html>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Исправьте синтаксис PHP-тегов

id: 38908_task2

В коде допущены ошибки при встраивании PHP. Найдите и исправьте строки с неправильными открывающими или закрывающими тегами.

Найдите ошибку и исправьте
<!DOCTYPE html>
<html>
<body>
<? php
$title = "Моя страница";
echo "<h1>$title</h1>";
!?>
<p>Статичный текст</p>
</body>
</html>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Короткий тег вывода

id: 38908_task3

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

Заполните пропуски
<?php
$product = "Ноутбук";
$price = 45000;
?>
<!DOCTYPE html>
<html>
<body>
    <h2>input1S $product input2S</h2>
    <p>Цена: input3S $price input4S руб.</p>
</body>
</html>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Что отобразится на странице?

id: 38908_task4

Проанализируйте код и определите, какой текст будет выведен в браузере. Запишите точный результат.

Что должно получиться?



    <?php
    $greeting = "Hello";
    $name = "World";
    echo $greeting . " " . $name;
    ?>

Сообщения
Проверить
Показать подсказку

Соберите HTML-страницу с PHP

id: 38908_task5

Расставьте строки в правильном порядке, чтобы получилась валидная HTML-страница с встроенным PHP-кодом, выводящим заголовок.

Перетяните в правильном порядке строки из одного блока в другой
<!DOCTYPE html>
<html>
<body>
<?php $page = "Главная"; ?>
<h1><?= $page ?></h1>
</body>
</html>
<?php $page = "Главная" ?>
<h1><? echo $page ?></h1>
<html><body>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Заполните шаблон из банка

id: 38908_task6

Перетащите правильные PHP-конструкции из банка в пропуски, чтобы создать рабочую страницу со списком пользователей.

Нужно правильно расставить в пропуски предложенные варианты
<!DOCTYPE html>
<html>
<body>
    <h2>Список пользователей</h2>
    input1S
    $users = ["Анна", "Иван", "Мария"];
    input2S
    <ul>
        <li>input3S $users[0] input4S</li>
        <li>input5S $users[1] input6S</li>
        <li><?= $users[2] ?></li>
    </ul>
</body>
</html>
<?php
?>
<?=
?>
<?=
?>
<?
php?>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Исправьте ошибки в смешанном коде

id: 38908_task7

Код содержит несколько синтаксических ошибок при встраивании PHP в HTML. Найдите и исправьте все проблемные строки.

Найдите ошибку и исправьте
<!DOCTYPE html>
<html>
<body>
<?php
$title = "Новости"
?>
<h1><?php echo $title></h1>
<p>Дата: <?= date("Y-m-d") </p>
</body>
</html>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Результат встраивания переменных

id: 38908_task8

Определите, какой HTML-код получится после выполнения PHP-скрипта.

Выберите правильный вариант ответа
<?php
$tag = "p";
$content = "Текст абзаца";
echo "<$tag>$content";
?>
Сообщения
Проверить
Показать подсказку

Альтернативный синтаксис для if

id: 38908_task9

Заполните пропуски, используя альтернативный синтаксис управляющей конструкции if для шаблонов HTML.

Заполните пропуски
<?php $logged_in = true; ?>
<!DOCTYPE html>
<html>
<body>
    <?php if ($logged_in)input1S ?>
        <p>Добро пожаловать, пользователь!</p>
    <?php input2S; ?>
</body>
</html>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Вывод в цикле

id: 38908_task10

Определите, что будет выведено на странице после выполнения этого кода.

Что должно получиться?
<?php
$colors = ["red", "green", "blue"];
foreach ($colors as $color) {
    echo $color . " ";
}
?>
Сообщения
Проверить
Показать подсказку

Соберите таблицу с циклом

id: 38908_task11

Создайте HTML-таблицу с данными, используя цикл foreach. Расставьте строки в правильном порядке.

Перетяните в правильном порядке строки из одного блока в другой
<?php $items = ["Яблоко", "Банан", "Апельсин"]; ?>
<table>
<?php foreach ($items as $item): ?>
<tr><td><?= $item ?></td></tr>
<?php endforeach; ?>
</table>
<?php foreach ($items as $item) { ?>
<?php } ?>
<tr><td><?php echo $item; ?></tr></td>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Ошибки в альтернативном синтаксисе

id: 38908_task12

Код использует альтернативный синтаксис для управляющих конструкций, но содержит ошибки. Исправьте проблемные строки.

Найдите ошибку и исправьте
<?php $numbers = [1, 2, 3]; ?>
<ul>
<?php foreach ($numbers as $num); ?>
    <li><?= $num ?></li>
<?php endfor; ?>
</ul>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Условный вывод атрибутов

id: 38908_task13

Встройте PHP-код так, чтобы CSS-класс применялся только при определенном условии. Заполните пропуски для динамической генерации атрибута class.

Заполните пропуски
<?php
$is_active = true;
$is_new = false;
?>
<!DOCTYPE html>
<html>
<body>
    <div class="input1S $is_active ? 'active' : '' input2S">Элемент 1</div>
    <div class="<?= $is_new ? 'new' : '' ?>">Элемент 2</div>
</body>
</html>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

Сложное встраивание

id: 38908_task14

Создайте навигационное меню с активным элементом. Используйте банк токенов для правильного встраивания PHP-конструкций в HTML.

Нужно правильно расставить в пропуски предложенные варианты
<?php
$menu = ["Главная", "О нас", "Контакты"];
$current = "О нас";
?>
<nav>
    <ul>
    input1S foreach ($menu as $item)input2S input3S
        <li class="input4S $item === $current input5S 'active' input6S '' input7S">
            input8S $item input9S
        </li>
    input10S endforeach; input11S
    </ul>
</nav>
<?php
:
?>
<?=
?
:
?>
<?=
?>
<?php
?>
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку
НайтиКурс.Ру