Про цветы: список, как ухаживать. Код, материалы до встречи, страница курса

Задание

Сделать сайт из 2 страниц, где есть общее меню, общее меню содержит ссылки на две страницы сайта, страница где мы сейчас должна быть без подчеркивания, на первой — информация про цветы, где картинки прижимаются по очереди к левому или правому части экрана, на второй странице — текст с картинками. В подвале сайта — указать все источники на материалы

Особенности реализации

Было важно сохранить общий каркас страницы и стиль, так что мы копировали тег style.

index.html

<!DOCTYPE html>
<html>
<head>
    <!-- Сделать сайт из 2 страниц, где есть общее меню, общее меню содержит ссылки на 
         две страницы сайта, страница где мы сейчас должна быть без подчеркивания, на 
         первой — информация про цветы, где картинки прижимаются по очереди к левому или 
         правому части экрана, на второй странице — текст с картинками. В подвале сайта — 
         указать все источники на материалы -->
    <meta charset="UTF-8">
    <title>Про цветы</title>
    <style>
        img.to-right {
            float: right;
            height: 150px;
        }
        img.to-left {
            float: left;
            margin-right: 5px;
            width: 100px;
        }
        footer, footer a {
            color: grey;
        }
        header a.current {
            text-decoration: none;
        }
        header a {
            font-weight: bold;
        }
        header {
            text-align: center;
        }
        header span {
            position: absolute;
            right: 10px;
            color: red;
            background: yellow;
        }
        header span a {
            color: red;
            background: yellow;
        }
    </style>
</head>
<body>
    <header>
        Про цветы: <a href="./" class="current">список</a>, <a href="uhod.html">как ухаживать</a>.
        <span><a href="code.html">Код</a>, <a href="29.06.html">материалы до встречи</a>, <a href="../">страница курса</a></span>
    </header>
    <main>
        <section>
            <a href="https://ya.ru"><img class="to-right" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Gerbera01.jpg"></a>
            <h1>Гербера</h1>
            <p>Гербе́ра (лат. Gerbera) — род многолетних трав семейства Астровые, или Сложноцветные (Asteraceae). Все виды рода произрастают в Африке (в первую очередь в Южной Африке и на Мадагаскаре), интродуцированы в Латинской Америке и Юго-Восточной Азии. Цветки герберы по форме похожи на цветки представителей родов Нивяник, Остеоспермум и другие «ромашки»; окраска цветков герберы может быть любой, кроме синей.
            Герберы выращивают во всём мире (в том числе в оранжереях) как красивоцветущие декоративные растения — в первую очередь на срезку, а также как садовые растения, иногда как комнатные растения.</p>
        </section>
        <section>
            <h1>Роза</h1>
            <img class="to-left" src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Розы_в_вазе_I.jpg">
            <p>Ро́за — собирательное название видов и сортов представителей рода Шипо́вник (лат. Rósa), выращиваемых человеком и растущих в дикой природе. Бо́льшая часть сортов роз получена в результате длительной селекции путём многократных повторных скрещиваний и отбора. Некоторые сорта являются формами дикорастущих видов.<br>
                Русское «роза» и варианты «дикая роза», «рожа», «розан», «рожан», «ружа» через немецкое посредство (нем. Rose) были заимствованы из лат. rosa[1], которое, в свою очередь, заимствовано из др.-греч. ῥόδον, rhódon (ср. с названием декоративного растения ῥοδόδενδρον, rhodódendron — «розовое дерево»)[2]. Древнегреческое слово (праформа — *ϝρόδον — *wródon) связано с арм. վարդ, vard — «роза» и праиранск. *ṷṛda-. Отсюда и перс. گل‎, gol — «роза»[3]. В русском языке употреблялось название шиповника собачьего — «гуляф» — «гуляфная вода», «розовая вода», первоначальное значение которого заимствовано из ново-персидского گلاب, golâb от گل, gol — «роза» и آب, âb — «вода». Ср. с азерб. guläbi — «благовонная эссенция»[4]
            </p>
        </section>
        <section>
            <img class="to-right" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Nelumno_nucifera_open_flower_-_botanic_garden_adelaide2.jpg">
            <h1>Лотос</h1>
            <p>Ло́тос (лат. Nelúmbo) — род двудольных растений, единственный представитель семейства Лотосовые (лат. Nelumbonaceae).<br>
            Лотос относится к виду водных многолетних травянистых растений, корневище которых вырастает до высоты 150 сантиметров и в длину распространяется на 3 метра. Стебель округлый, длиной 60-90 сантиметров, голый, сизый, темно-зеленый, покрыт сетью микроскопических волосинок; черешки длинные, возвышаются над водой. Листья подводные, плавающие и надводные. Цветок одиночный, до 24 сантиметров в диаметре; чашелистики эллиптические или яйцевидные, размеры 1,5-5×1-3,5 сантиметров, вогнутые, зеленые или розовато-зеленые. Лепестки эллиптические, 4-15×2-8 сантиметров, вогнутые, цвет зависит от вида. Тычинки многочисленные.
            <br>
            Плод — орехоподобное семя, продолговато-яйцевидной формы.</p>
        </section>
        <section>
            <h1>Альстромерия</h1>
            <img class="to-left" src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Alstroemeria_pelegrina.jpg">
            <p>Альстрёмерия[1] (лат. Alstroemeria) — род южноамериканских корневищных и клубневых красивоцветущих травянистых растений из семейства Альстрёмериевые. В русскоязычной литературе встречаются и другие варианты написания названия рода — «алстромерия»[2], «альстромерия». Число видов — более ста[3].

            Альстрёмерии выращивают во всём мире (в том числе в оранжереях) как красивоцветущие декоративные растения — в первую очередь на срезку, иногда как садовые растения.</p>
        </section>
    </main>
    <footer>
        <h1>Источники</h1>
        <ul>
            <li><a href="https://ru.wikipedia.org/wiki/Гербера" target="_blank">Гербера</a>;</li>
            <li><a href="https://ru.wikipedia.org/wiki/Роза" target="_blank">Роза</a>;</li>
            <li><a href="https://ru.wikipedia.org/wiki/Лотос" target="_blank">Лотос</a>;</li>
            <li><a href="https://ru.wikipedia.org/wiki/Альстрёмерия" target="_blank">Альстромерия</a>;</li>
        </ul>
    </footer>
</body>
</html>

uhod.html

<!DOCTYPE html>
<html>
<head>
    <!-- Сделать сайт из 2 страниц, где есть общее меню, общее меню содержит ссылки на 
         две страницы сайта, страница где мы сейчас должна быть без подчеркивания, на 
         первой — информация про цветы, где картинки прижимаются по очереди к левому или 
         правому части экрана, на второй странице — текст с картинками. В подвале сайта — 
         указать все источники на материалы -->
    <meta charset="UTF-8">
    <title>Про цветы и как за ними ухаживать</title>
    <style>
        img.to-right {
            float: right;
            height: 150px;
        }
        img.to-left {
            float: left;
            margin-right: 5px;
            width: 100px;
        }
        footer, footer a {
            color: grey;
        }
        header a.current {
            text-decoration: none;
        }
        header a {
            font-weight: bold;
        }
        header {
            text-align: center;
        }
        header span {
            position: absolute;
            right: 10px;
            color: red;
            background: yellow;
        }
        header span a {
            color: red;
            background: yellow;
        }
    </style>
</head>
<body>
    <header>
        Про цветы: <a href="./">список</a>, <a href="uhod.html" class="current">как ухаживать</a>.
        <span><a href="code.html">Код</a>, <a href="29.06.html">материалы до встречи</a>, <a href="../">страница курса</a></span>
    </header>
    <main>
        Тут будет контенть.
    </main>
    <footer>
        <h1>Источники</h1>
        <ul>
            <li><a href="https://ru.wikipedia.org/wiki/Гербера" target="_blank">Гербера</a>;</li>
            <li><a href="https://ru.wikipedia.org/wiki/Роза" target="_blank">Роза</a>;</li>
            <li><a href="https://ru.wikipedia.org/wiki/Лотос" target="_blank">Лотос</a>;</li>
            <li><a href="https://ru.wikipedia.org/wiki/Альстрёмерия" target="_blank">Альстромерия</a>;</li>
        </ul>
    </footer>
</body>
</html>