Комментарии к публикации: Основы CSS

Solodalex 20.04.2020 в 22:24

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Бесплатные фантастические книги">
        <meta name="keywords" content="книги, фантастика, фэнтези, бесплатно, бестселлер">
        <title>Популярная фантастика бесплатно</title>

        <style>
        h1 {
            color: #ff0000;
        }

        p {
            color: white;
            font-size: 24px;
        }

        .list1 {
            color: #FFEE00;
            font-style: normal;
        }

        .list2 {
            color: #FFEE00;
            font-style: italic;
        }

        body {
            margin: 0 auto;
            text-align: center;
            background-color: #3366CC;
        }
        </style>

    </head>
    <body>

    <h1>Бестеллеры из жанра фантастики и фэнтези</h1>
        <p>На этом сайте собраны новинки и книжные издания, ставшие бестселлером</p>

        <h2>Фантастика</h2>
            <p>Фантастика — жанр, объединяющий художественные произведения,<br>
            в которых повествуется о событиях, мирах и героях, нарушающих <br>
            границы реальности. Фантастика рассказывает о том, что находится<br>
            за гранью реальности, и строится на фантастическом допущении.
            </p>
            <ul class="list1">
                <li><em>Роберт Ибатуллин</em> <strong>"Роза и Червь"</strong> <br><img src="https://4fasol.com/img/books/318303.jpg" alt="Роза и Червь" width="200"></li>

                <li><em>Питер Уоттс</em> <strong>"Ложная слепота"</strong> <br><img src="https://cdn1.ozone.ru/s3/multimedia-2/6008638490.jpg" alt="Ложная слепота" width="200"></li>

                <li><em>Крис Бекетт</em> <strong>"Во тьме Эдема"</strong> <br><img src="https://cdn.eksmo.ru/v2/AST000000000173586/COVER/cover3d1.jpg" alt="Во тьме Эдема" width="200"></li>

                <li><em>Адам Робертс</em> <strong>"Стеклянный Джек"</strong> <br><img src="https://www.spbdk.ru/upload/iblock/575/575879fbe692d7be2cf761406e22e8c9.jpg" alt="Стеклянный Джек" width="200"></li>

                <li><em>Дэниэл Суарез</em> <strong>"Поток"</strong> <br><img src="https://img.yakaboo.ua/media/catalog/product/cache/1/image/234c7c011ba026e66d29567e1be1d1f7/8/4/846828_cover_1.jpg" alt="Поток" width="200"></li>
            </ul>
        <hr>    

        <h2>Фэнтези</h2>
            <p>Фэ́нтези (англ. fantasy — «фантазия») — жанр современного искусства,<br>
             разновидность фантастики. Фэнтези основывается на использовании <br>
             мифологических и сказочных мотивов в современном виде.
            </p>
            <ul class="list2">
                <li><em>Джон Р.Р. Толкин</em> <strong>"Властелин Колец"</strong><br>
                <a href="books/books1.html">[подробнее]</a> <br><img src="img/vlastelinkolec.jpg" alt="Властелин Колец" width="200"></li>

                <li><em>Мартин Джордж</em> <strong>"Игра престолов"</strong> <br><img src="img/igraprestolov.jpg" alt="Игра престолов" width="200"></li>

                <li><em>Клайв Стейплз Льюис</em> <strong>"Хроники Нарнии"</strong> <br><img src="img/hronikinarnii.jpg" alt="Хроники Нарнии" width="200"></li>

                <li><em>Анджей Сапковский</em> <strong>"Ведьмак"</strong> <br><img src="img/vedmak.jpg" alt="Ведьмак" width="200"></li>

                <li><em>Роулинг Джоан Кэтлин</em> <strong>"Гарри Поттер"</strong> <br><img src="img/garripotter.jpg" alt="Гарри Поттер" width="200"></li>
            </ul>
    </body>
</html>

Исправил

ivashkevich 21.04.2020 в 06:25

А зачем каждое свойство в отдельном теге <style>? Просто перечисляйте их одно за другим в рамках одного тега.

tamilagalaeva@mail.ru 15.05.2020 в 01:25

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Весь спектр услуг, квалифицированные мастера, оптимальнеы цены">
        <meta name="keywords" content="салон красоты, Ингушетия, Сунжа, лазерная эпиляция, маникюр, массаж">
        <title>Studio TG- студия красоты и здоровья Тамилы Галаевой </title>
        <style>
        body{ background-color: #F9F2E3;} 
        h1 {color: brown;
        padding: 50px;
        font-size: 50px;}
        h2 {color: red;
        }
        p {font-size: 25px;}
        .fig {
    text-align: center; /* Выравнивание по центру */ 
   }
        .myClass {font-size: 35px;
        }

                </style>
    </head>
    <body>
    <h1>Студия красоты и здоровья Тамилы Галаевой</h1>
    <p class="fig"><img src="img/studio.jpg" alt="Логотип студии" width="400">
        <p>
        В нашей студии вы сможете получить широкий спектр услуг, такие как парикмахерские услуги, 
        ногтевой сервис, косметология, 
        массаж, хиджама, лазерная эпиляция и многое другое.
    </p>
    <p>
        Наши специалисты систематически проходят повышения
        и всегда в курсе новейших методов и технологий, используемых в бьюти-сфере.
        </p>
        <p>
        Одной из первостепенных задач
        нашей студии это забота о вас и о вашем здоровье. Поэтому <strong>аспекту стерилизации и дезинфекции мы уделям особое внмание</strong>. Маникюрные и косметологические
        инструменты проходят все установленные этапы дезинфекции,ПСО и стерилизации. При клиенте вскрывается крафт-пакет с находящимся внутри индикаторм, по которму можно судить о 
        долженой выдержке времени и температуры воздействия на инструмент. 
        <em>Вы можете доверять нам. И мы вас не подведем.</em>
        </p>

    <h2>Перечень услуг:
    </h2>
    <p>
    <h3 class="myClass">Парикмахерский зал</h3>
    </p>
    <ul>
       <li>Стрижки</li>
       <li>Укладки</li>
       <li>Окрашивания</li>
       <li>Ботокс волос</li>
       <li>Кератиновое выпрямление</li>
     </ul> 
    <br>
    <h3 class="myClass">Ногтевой сервис</h3>
    <ul>
       <li>Маникюр</li>
       <li>Педикюр</li>
       <li>Наращивание ногтей</li>
       <li>Покрытие гель-лаком</li>
       <li>Дизайн и инкрустация стразами</li>
     </ul> 
    <br>
    <h3 class="myClass">Косметология</h3>
    <ul>
       <li>Чистки</li>
       <li>Пилинги</li>
       <li>Маски</li>
       <li>Контурная пластика</li>
       <li>Шлифовки</li>
     </ul> 
    <br>
    <h3 class="myClass">Массаж</h3>
    <ul>
       <li>Аппаратный массаж</li>
       <ul>
       <li>
      <a href="book1.html">-Liposonix</a>
      </li>
       <li>-Криолиполиз</li>
       <li>-RF-лифтинг</li>
       </ul>
       <li>Ручной массаж</li>
       <ul>
       <li>-Лечебный взрослый</li>
       <li>-Детский</li>
       <li>-Антицеллюлитный</li>
       </ul>

     </ul> 
    <br>
    <h3 class="myClass">Хиджама</h3>
    <ul>
       <li>Общая</li>
       <li>Капилляротерапия</li>
     </ul> 
    <br>
    <h3 class="myClass">Визаж</h3>
    <ul>
       <li>Вечерний макияж</li>
       <li>Дневной макияж</li>
       <li>Свадебный макияж</li>
     </ul> 

    <br>
    <h3 class="myClass">Брови/ресницы</h3>
    <ul>
       <li>Коррекция бровей</li>
       <li>Окрашивание краской</li>
       <li>Окрашивание хной</li>
       <li>Коррекция без выщипывания</li>
       <li>Наращивание ресниц</li>
       <li>Ламинирование ресниц</li>
       <li>Ламинирование бровей</li>
     </ul> 

    </body>
</html>

ivashkevich 15.05.2020 в 18:35

Отлично

vitaliyt20100@yandex.ru 01.06.2020 в 12:11

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Стихи для души и на заказ</title>
    <meta name="description" content="Произведения автора, прием заказов на тексты
                                      песен и поздравлений">
    <meta name="keywords" content="стихи, тексты песен, авторская песня, лирика,
                                   стихи о любви">
<link rel="stylesheet" href="проба стилей.css">
  </head>
<body>
       <h1>Избранные стихи автора</h1>
          <p><strong>Любовная лирика</strong></p>
             <ul>
                <li>И это все о ней</li>
                <li>Я к вам пишу</li>
             </ul>
<a href="любовная лирика.html">пошли читать тексты</a>

          <p><em>Гражданская лирика</em></p>
             <ol>
                <li>Мужество</li>
                <li>Кандагар</li>
             </ol>

          <p>Шуточные стихи</p>
             <ol>
                <li>Оптимист</li>
                <li>Турецкие каникулы</li>
             </ol>

<h1>Прием заказов</h1>
           <p>Заказ поздравлений</p>
             <ol>
                <li>Поздравления на день рождения</li>
                <li>Поздравления молодоженам</li>
                <li>Поздравления по случаю развода</li>
             </ol>
           <p>Заказ текстов песен</p>
             <ul>
                <li>Песни-марши</li>
                <li>Песни лирические в ритме вальса</li>
                <li>Тексты под тему и фонограмму заказчика</li>
             </ul>
<h3>Вариант заставки сборника</h3>
            <img src="Водяные лилии.jpg" alt="Тут красивые цветуёчки в водичке" height="300" width="200"> 

</body>
</html>

ivashkevich 01.06.2020 в 16:33

А стили-то где?)

vitaliyt20100@yandex.ru 02.06.2020 в 00:56

Стили вынесены в файл проба стилей.css, в задании не сказано об оформлении стилей в исходном документе html.
Насчет именования файлов учту, к след. домашке будет исправлено.

ivashkevich 02.06.2020 в 11:15

Да дело в том, что домашка про стили, а содержимое файла со стилями не прикрепили.

ivashkevich 01.06.2020 в 16:33

И не стоит называть файлы на русском, да ещё и с пробелами

vitaliyt20100@yandex.ru 02.06.2020 в 01:10

Еще вопрос про отдаленные перспективы. Я уже писал вам, что у меня слабенький нетбучок Асер образца 2012 г. Но уверен, что как начнутся более сложные вещи. я банально встану. Не могли бы посоветовать, какой ноутбук (стационарную машину даже не рассматриваю) потребуется для решения задач средней сложности по фронтенду? Чтобы в дальнейшем его можно было использовать как движок своих сайтов? (о как загнул:))
Чуть биографии. Я старый человек и старый математик (бывший), дипломная работа была - разработка СУБД и языка запросов небольшой поисковой системы вместе с кодом, тогда я написал всё ПО на ассемблере:) Т.е. то, чем мы сейчас занимаемся, для меня не очень пугающее занятие.

ivashkevich 02.06.2020 в 11:14

Любой ноут, на котором 10я винда запускается без тормозов подойдёт. Оперативной памяти желательно от 8гб, фронтенд-разработка нынче дико прожорливая.

vitaliyt20100@yandex.ru 02.06.2020 в 23:57

Привет, Артем!
Разрешите еще чуть обнаглею:) В целях экономии буду подыскивать б/у ноут с такими характеристиками. Вдруг в вашем поле зрения такой обнаружится. Покупать б/у неизвестно у кого стрёмно, а мы как бы уже знакомы.

ivashkevich 03.06.2020 в 09:00

Ок) Но вообще есть конторы по продаже б/у ноутов, я бы в первую очередь там смотрел.

UtillitE Patron 16.06.2020 в 22:04

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Сад, огород и прочие премудрости...</title>
        <meta name="description" content="Всё, что вы хотели знать о уходе за садовыми деревьями, но стеснялись спросить">
        <meta name="keywords" content="садовые деревья, уход, защита от вредителей">
        <link rel="stylesheet" href="style.css">
        <style>

          h1, h2 {
          background-color: #c0c0c0;
          color: maroon;
         padding: 10px;
         } 
          body { 
          margin: 0; /* Убираем отступы */
         }
        .parent {
        margin: 10%; /* Отступы вокруг элемента */
        padding: 10px; /* Поля вокруг текста */
         } 
         .child {
         border: 3px solid #666; /* Параметры рамки */
         padding: 10px; /* Поля вокруг текста */
         margin: 10px; /* Отступы вокруг */
         } 
  </style>
    </head>
    <body>
       <div class="parent">
        <div class="child">
    <h1>Во саду, ли в огороде..</h1>
    <img src="img/s1200.jpg" alt="Овощи и фрукты" width="500" height="400">
    <p>
    <h2>Общая информация</h2>
</p>

        Все мы любим <strong>овощи и фрукты</strong> и вдвойне приятней и полезнее, когда они выращены собственными руками. Но только настоящие садоводы и огородники
        знают,<em> какой это нелёгкий, каждодневный труд.</em>
        <p>
    <h2>Садоводам</h2>
    <img src="img/orig.jpg" alt="Цветущий сад" width="500" height="400">
</p>
<ul>
    <li>Яблони, особенности ухода</li>
    <li>Груши, особенности ухода</li>
    <li>Косточковые, особенности ухода</li>
</ul>
<hr>
<p>
   <h2> Огородникам</h2>
</p>
<img src="img/i.jpg" alt="Овощи и фрукты" width="500" height="400">
<ol>
    <li>Томаты, перцы, баклажаны</li>
    <li>Огурцы</li>
    <li>Морковь, капуста, кабачки</li>
</ol>
<hr>
<a href="book1.html">[список используемой литературы]</a>
</div>
  </div>
    </body>
</html>

ivashkevich 17.06.2020 в 07:39

    <p>
    <h2>Общая информация</h2>
</p>

        Все мы любим <strong>овощи и фрукты</strong> и вдвойне приятней и полезнее, когда они выращены собственными руками. Но только настоящие садоводы и огородники
        знают,<em> какой это нелёгкий, каждодневный труд.</em>
        <p>
    <h2>Садоводам</h2>

Наоборот должно быть, текст абзацев внутри <p>, а заголовки сами по себе.

vdovkin1989@yandex.ru 30.08.2020 в 11:01

<!DOCTYPE html>
<html>
       <head>
         <title> Сайт по продаже воздушных шаров </title> 
         <meta charset="UTF-8">
         <meta name="description" content="Хочешь обрадовать любимую купи шары которые её удивят">
         <meta name="keywords" content="шары, подарок, воздушные шары">
         <style>
             h1,h2 {
             color: red;
             font-size: 40pt;
             }
             .myClass {
             color: #00FA9A;
             font-style: italic;
             }

         </style> 
       </head>
       <body>
       <p>
       <h1> 
           Шар "маленький"
        </h1>
        <ul>
        <li> зеленый </li>
        <li> красный </li>
        <li> синий </li>
        </ul>
        <a href=st1.html> ЦЕНЫ </a>
        <h2> 
           <strong> Шар "большой" </strong>

        </h2>
        <img src="https://get.pxhere.com/photo/balloon-hot-air-balloon-adventure-aircraft-transportation-vehicle-colorful-toy-new-mexico-festival-ballooning-hot-air-ballooning-atmosphere-of-earth-executive-car-624038.jpg" alt="Пример большого шара" width="250">
        </p>
        <p class="myClass">
        Отличный выбор
        </p>

       </body>

</html>

ivashkevich 31.08.2020 в 08:26

Отлично

nastu_93@bk.ru 09.09.2020 в 15:46

Нельзя сказать что это очень легко,спасибо Вам

<!DOCTYPE html>
<html lang="ru">
<head>
      <meta charset="UTF-8">
      <title>Программа по скорочтению для дошкольников</title>
      <meta name="keywords" content="литература, обучение, программа по скорочтению">
      <meta name="description" content="На этой странице вы сможете скачать программу по скорочтению для своего ребенка.">
      <style>
        body{
    background-color: #00ffff;
   }
   .layer1 {
    font: 12pt sans-serif;  
   } 
   h1 {
    font: 200% serif;
   }

      </style>
</head>
<body>
       <h1> Как научить своего ребенка читать быстро? </h1>
       <p class="myClass"> C помощью нашей программы, вы <strong> без проблем научите </strong> читать своего ребенка
       <!-- тут текст -->
       <hr>
       <h2> Какие проблемы могут возникнуть при изучении программы? </h2>
       <p> Совершенно без исключения, родители сталкиваются с теми или иными проблемами в изучении программы, давайте рассмотрим несколько из них.</p>
       <ul class="myClass" >
         <li> ребенок слишком мал </li>
         <li> плохо знает буквы и слога </li>
        </ul>
       <h3> Как справиться с возникшими трудностями.</h3>
       <p> Ничего страшного в том что возникли проблемы с изучением скорочтения. <em>Каждый </em> ребенок индивидуален, нужно набраться терпения и постараться максимально помочь своему чаду </p>
       <img src="img/книга.jpg" alt="книга по скорочтению" width="200" height="200">
       <a href= "index3.html"> Программа по скорочтению! </a>
</body>
</html>

ivashkevich 10.09.2020 в 08:38

Отлично!

Darial 15.10.2020 в 14:02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="цветы, деревья, кустарники, происхождение, садоводство, выращивание">
        <meta name="description" content="Здесь Вы найдете информацию о разных видах растений, краткую историю их происхождения а также советы по их выращиванию.">
        <title>Яблоко от яблони - Виды растений, их история, садоводство</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <img src="img/apple.jpg" alt="apple tree" width="200" height="130">
    <h1>Мир растений</h1>
    <p class="myClass">
        Для всех тех, кто кроме котиков и собачек обожает или даже предпочитает мир "неподвижных питомцев", тоесть <strong>растений</strong>, мы создали наш сайт. Тут собрана информация о разновидностях растений, их "привычках", <em>история происхождения</em>, а также все самые главные секреты по их ухаживанью.
        </p>
        <ol>
        <li>кустарники</li>
        <ul>
        <li>смородина</li>
        <li>малина</li>
        <a href="file:///C:/Users/Theodoros/Desktop/book1.html" target="_blank">История малины<a/>

        </ul>
        <li>деревья</li>
        <li>цветы</li>
        </ol>
        <hr>
        <h2>История растений</h2>
    </body>
</html>

style.scc

ol li {
    color:green;
}

ul li{
    color:red;
}

.myClass {
    font-style: italic;
}

ivashkevich 18.10.2020 в 15:15

Отлично

Комментарии к публикации Основы CSS

Комментарии к публикации
Основы CSS