Практическая работа. Автоматизированное создание Веб-сайта (блога)

видеоурок по учебнику Ривкинд 11 класс (стр. 280 учебник Ривкинд /Информатика/11 класс)

тема: Основы HTML

Краткий справочник по гипертекстовой разметке HTML

Заготовка сайта скачать файл-архив

Тема: Использование изображений в веб - документах. Создание карты ссылок

Карта ссылок изображений представляет собой обычное изображение в html (тег <img>), но с областями-ссылками. Причем таких областей можно создать очень много практически любой формы.

Прочитать о тегах построения карты ссылок можно здесь

Задание: добавьте к себе на сайт - гороскоп изображение (ниже)

Создайте карту ссылок, используя координаты (ниже), чтобы при наведении на выбранные знаки появлялась подсказка и был обеспечен переход на другую страницу сайта

Будем использовать изображение знаков зодиака 

Координаты для карты ссылок:

Водолей (многоугольник, по часовой стрелке) 95,464, 226,230, 411,412, 341,531

Козерог 230,228, 463,95, 528,343, 412,411

Тема: Использование каскадных таблиц стилей

Информация по теме "Плавающие элементы в CSS"

ВЫРАВНИВАЕМ КАРТИНКИ ПО ЦЕНТРУ В HTML http://w3.org.ua/html/vyiravnivaem-kartinki-po-tsentru-v-html/

Для знаков зодиака организованы блоки: (здесь пример для знака "Овен")

    <div class="row">
    <div class="col s12 m7">
         <p><a name="oven"></a></p> 
      <div class="card">
        <div class="card-image" style="height:400px;">
          <img src="img/oven.jpg">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
            
          <p>Овен (лат. Aries, баран) — первый знак зодиака, соответствующий сектору эклиптики от 0° до 30°, считая от точки весеннего равноденствия; кардинальный знак тригона (трёх знаков) «огонь». В созвездии Овна Солнце находится с 19 апреля по 13 мая, однако в западной астрологии Овну отводится период с 21 марта по 20 апреля.</p>
        </div>
        <div class="card-action">
          <a href="#">ПРОЧИТАТЬ БОЛЬШЕ</a>
        </div>
      </div>
    </div>
  </div>

Организация ссылок внутри страницы:

<p><a href="#top">Наверх</a></p> - это как выглядит ссылка для перехода к определенному месту на странице

<p><a name="top"></a></p> - это место, где ссылка находится

Создание форм 

Задание:

вставьте в код страницы следующие строки:

<div class="card-content">
<form>
 <legend>Представьтесь</legend>
<input type="text" required placeholder="Ваше имя">
 <legend>Выберите свой знак</legend>
<label for="znak">Знак зодиака</label>
<p>  <input type="radio" name="z1" Рыба></p>
</form>
</div>

Проверьте код и допишите остальные знаки в форме.

Пример оформления google-формы