Занятие 08

Тема 1. Шрифты и цвета

  1. Выполните задание на размер шрифта (скачайте файл fontsize.html с диска с заданиями из папки HTML). Написать "Воскресная компьютерная школа" размерами 30px, 25px, 20px, 15px, 10px, 5px, используя тег <p> с параметром style и значением font-size: <p style="font-size:30px"></p>
  2. Выполните задание на вид шрифта (скачайте файл fontfamily.html с диска с заданиями из папки HTML). Написать "Воскресная компьютерная школа" разными шрифтами, используя тег <p> с параметром style и значением font-family: <p style="font-family: verdana">. В качестве параметров вместо "verdana" указы;bnt nfr;t "serif", "sans-serif", "monospace". Чем отличаются шрифты и когда их по вашему мнению надо использовать?
  3. Выполните задание на цвета шрифтов (создайте файл fontcolors.html самостоятельно). Напишите "Каждый Охотник Желает Знать Где Сидит Фазан" шрифтом в 30 px с помощью тега <p style="font-size:30px"></p>. Каждое слово напишите соответствующим цветом, используя тег с параметром <span style="color: red">. Обратите внимание, что тег span позволяет применить форматирование не к целому абзацу, а к части абзаца или даже к одному слову.
  4. Выполните задание на комбинацию цвета фона и цвета шрифта. Напишите "Да здравствует ... !" (вместо ... подставьте подходящее слово) шрифтом в 72 px разными цветами, используя также различный цвет фона. Для задания цвета фона используйте параметр bgcolor тега body: <body bgcolor=#FFAA11>. Сохраните 5 файлов c1.html, c2.html, c3.html, c4.html, c5.html с наиболее удачными сочетаниями цвета шрифта и цвета фона. Запишите теорию, как задаются цвета в HTML, под диктовку преподавателя.

Тема 2. Гиперссылки

Задание 1 на гиперссылки

Создайте страничку bestsites.html с заголовком "Мои любимые сайты", на которой перечислите любимые сайты с гиперссылками на них. Каждый сайт начинайте с новой строки.

Задание 2 на гиперссылки

На основной страничке maincolor.html наберите фразу "Как Однажды Жак Звонарь Головой Сломал Фонарь". Каждое слово превратите в гиперссылку на страницу, залитую соответствующим цветом. На каждой такой странице сделать гиперссылку "Назад"

Тема 3. Изображения

  1. Скачайте комплект картинок (или скопировать с сетевого диска из папки Pictures) к себе в папку HTML в подпапку Pictures.
  2. В html-файле Dog.html выведите картинку Dog.jpg исходного размера, половинного размера, четвертного размера. Для этого достаточно посмотреть размер изображения Dog.jpg (366 x 512) и задать при выводе каждой из картинок ширину в пикселах (для основного изображения - 366, для половинного - 183, для четвертного - 91). Используйте тег <img src="dog.jpg" Height=366>с параметром Height. Важно чтобы картинка и html-файл находились в одной папке.
  3. Создайте страничку All.html, содержащую все картинки из папки Pictures. Сделайте их одинаковыми по высоте. После каждых 3 картинок переходите на новую строчку.
  4. Создайте страничку Flags.html с заголовком "Флаги стран мира", на которой на каждой строке приведите изображение флага (взять из Википедии) и название соответствующей страны (10-20 флагов). Опубликуйте страничку в Портфолио.

Тема 4. Задания на гиперссылки + изображения

  1. В html-файле Pictures3.html отобразите 3 картинки из папки Pictures размера 100x100. Для каждой картинки сделайте гиперссылку на ее полноразмерную версию.
  2. Реализуйте игру в папке HTML\Game в файле Game.html, скачав и распаковав в эту папку файл ИграГиперссылкиКартинки.zip.