Практическая работа. Автоматизированное создание Веб-сайта (блога)
видеоурок по учебнику Ривкинд 11 класс (стр. 280 учебник Ривкинд /Информатика/11 класс)
тема: Основы HTML
Краткий справочник по гипертекстовой разметке HTML
|
Название тэга |
Обозначение тэга |
|
Структура Web-страницы |
|
|
Начало и конец страницы |
<html> </html> |
|
Описание страницы, в том числе ее имя |
<head> </head> |
|
Имя страницы |
<title> </title> |
|
Тело страницы |
<body> </body> |
|
Форматирование текста |
|
|
Размер текста (уровни от 1 до 6) |
<H?> </H?> |
|
Текст с выравниванием влево |
<H? Align=”LEFT”> </H?> |
|
Текст с выравниванием по центру |
<H? Align=”CENTER”> </H?> |
|
Текст с выравниванием вправо |
<H? Align=”RIGHT”> </H?> |
|
Абзац |
<P> </P> |
|
Перевод строки |
<BR> |
|
Горизонтальная линия |
<HR> |
|
Адрес автора |
<ADRESS> </ADRESS> |
|
|
|
|
Форматирование шрифта |
|
|
Жирный |
<B> </B> |
|
Курсив |
<I> </I> |
|
Подчеркивание |
<U> </U> |
|
Верхний индекс |
<SUB> </SUB> |
|
Нижний индекс |
<SUP> </SUP> |
|
Размер шрифта (от 1 до 7) |
<FONT SIZE=?> </FONT> |
|
Цвет шрифта (указывается в кавычках: Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal Yellow) |
<FONT COLOR=”RED”> </FONT> |
|
Выбор шрифта |
<FONT FACE=”***”> </FONT> |
|
Вставка изображений |
|
|
Фоновое изображение |
<BODY BACKGROUND=”URL”> |
|
Вставка изображения |
<IMG SRC=”URL”> |
|
Вставка гиперссылки |
|
|
Ссылка на другую страницу |
<A HREF=”URL” указатель ссылки</A> |
|
Ссылка на закладку в том же документе |
<A HREF=”#*” указатель ссылки</A> |
|
Определение закладки |
<A NAME=”*” </A> |
|
Оформление таблиц |
|
|
Объявление таблицы |
<ТABLE> </ТABLE> |
|
Тег строки |
<TR> </TR> |
|
Тег данных |
<TD> </TD> |
Заготовка сайта скачать файл-архив
Тема: Использование изображений в веб - документах. Создание карты ссылок
Карта ссылок изображений представляет собой обычное изображение в 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-формы
