В прошлом уроке я обещал оформить рецепт торта, который я заранее скачал из интернета. Это конечно повлияет на уникальность моего текста, но я не повар, поэтому сам рецепты придумывать не умею.
Торт медовик . Ингредиенты Для теста: 110 г масла 100 г сахара 4 ст. л. меда 1 ч. л. соды 2 яйца 4 стакана муки Для крема: 400 г сметаны 100 г сахара
Коржи: Растопить масло на водяной бане. Добавить сахар и мед. Нагревать, помешивая, до однородной массы. Добавить соду и мешать до увеличения и побеления массы. Снять с водяной бани и остудить. Затем добавить яйца и хорошо перемешать. Добавить муку и замесить тесто. Разделить на 6 частей. Раскатать коржи. Выпекать по одному 4 мин при 180 градусах. Крем: сметану взбить с сахаром миксером. Промазать коржи. Верх посыпать крошками от коржей или орехами. Торт готов, приятного аппетита
Добавим этот рецепт в наш каркас между тегами <body></body>. Как мы уже знаем, весь текст выстроится в одну длинную строчку. Естественно в таком виде это не будет красиво, поэтому давайте оформим наш рецепт.
С тегами <h1>(заголовок), <p>(абзац), <b>(жирный шрифт) и <hr>(разделительная черта) мы уже знакомы. А вот <ul> является тегом списка и в связке с тегом <li> дает ненумерованный список, т.е. вместо цифр сбоку будут просто жирные точки (позже я более подробно разберу теги списка). Также я использовал новый тег <sup>, отвечающий за перемещение текста, заключенного этим тегом, в верхний регистр, т.е. в данном случае цифру 0 я превратил в градусы. У тега <sup> есть брат-близнец <sub>, который перемещает текст в нижний регистр. Например может понадобится для записи химических формул: H2SO4 в html лучше записать как H<sub>2</sub>SO<sub>4</sub>
Ну и теперь самым интересным будет добавление картинок на страницу с помощью тега <img> который является одиночным как например <hr>, т.е. ему не нужен закрывающий тег со слешем ( / - косая черта). Помимо основного тега img в скобках будут его атрибуты src="" и alt="". Атрибут - это элемент тега который служит для изменения его свойств либо для добавления новых свойств. Для того чтобы вставить картинку на страницу, мы должны указать браузеру откуда ее взять, и служит для этого атрибут src, в качестве значения которого используется путь до картинки. У меня картинка находится в той же папке что и страница, поэтому мы здесь используем просто имя файла, в моем случае это торт.jpg. Если бы файл был не в папке, а например в интернете, то нужно вставить ссылку на этот файл, обязательно в кавычках. Атрибут alt используется для указания текста, который будет показываться в том случае, если по какой-то причине картинку невозможно будет отобразить, так что если я удалю из своей папки фото торта, то вместо него будет отображаться текст "фото медовика"
Ну и в заключение я решил поменять белый фон на морковный, чтобы рецепт выглядел не так уныло. Сделал я это с помощью атрибута тега <body>, называется этот атрибут style (кстати, этот атрибут универсальный, про него я подробнее расскажу в следующих уроках), которому я присвоил значение background-color:решеткаF4A460. Цвет я взял на сайте html цветов, в интернете таких сайтов много, выбирайте какой понравится.
В итоге наша страничка приняла вот такой вид:
В следующем уроке продолжу рассказывать про теги html.