Занятие 08
Тема 1. Шрифты и цвета
Тема 1. Шрифты и цвета
- Выполните задание на размер шрифта (скачайте файл fontsize.html с диска с заданиями из папки HTML). Написать "Воскресная компьютерная школа" размерами 30px, 25px, 20px, 15px, 10px, 5px, используя тег <p> с параметром style и значением font-size:
<p style="font-size:30px"></p>
- Выполните задание на вид шрифта (скачайте файл fontfamily.html с диска с заданиями из папки HTML). Написать "Воскресная компьютерная школа" разными шрифтами, используя тег <p> с параметром style и значением font-family:
<p style="font-family: verdana">
. В качестве параметров вместо "verdana" указы;bnt nfr;t "serif", "sans-serif", "monospace". Чем отличаются шрифты и когда их по вашему мнению надо использовать? - Выполните задание на цвета шрифтов (создайте файл fontcolors.html самостоятельно). Напишите "Каждый Охотник Желает Знать Где Сидит Фазан" шрифтом в 30 px с помощью тега
<p style="font-size:30px"></p>
. Каждое слово напишите соответствующим цветом, используя тег с параметром<span style="color: red">
. Обратите внимание, что тег span позволяет применить форматирование не к целому абзацу, а к части абзаца или даже к одному слову. - Выполните задание на комбинацию цвета фона и цвета шрифта. Напишите "Да здравствует ... !" (вместо ... подставьте подходящее слово) шрифтом в 72 px разными цветами, используя также различный цвет фона. Для задания цвета фона используйте параметр bgcolor тега body:
<body bgcolor=#FFAA11>
. Сохраните 5 файлов c1.html, c2.html, c3.html, c4.html, c5.html с наиболее удачными сочетаниями цвета шрифта и цвета фона. Запишите теорию, как задаются цвета в HTML, под диктовку преподавателя.
Тема 2. Гиперссылки
Тема 2. Гиперссылки
Задание 1 на гиперссылки
Создайте страничку bestsites.html с заголовком "Мои любимые сайты", на которой перечислите любимые сайты с гиперссылками на них. Каждый сайт начинайте с новой строки.
Задание 2 на гиперссылки
На основной страничке maincolor.html наберите фразу "Как Однажды Жак Звонарь Головой Сломал Фонарь". Каждое слово превратите в гиперссылку на страницу, залитую соответствующим цветом. На каждой такой странице сделать гиперссылку "Назад"
Тема 3. Изображения
Тема 3. Изображения
- Скачайте комплект картинок (или скопировать с сетевого диска из папки Pictures) к себе в папку HTML в подпапку Pictures.
- В html-файле Dog.html выведите картинку Dog.jpg исходного размера, половинного размера, четвертного размера. Для этого достаточно посмотреть размер изображения Dog.jpg (366 x 512) и задать при выводе каждой из картинок ширину в пикселах (для основного изображения - 366, для половинного - 183, для четвертного - 91). Используйте тег <img src="dog.jpg" Height=366>с параметром Height. Важно чтобы картинка и html-файл находились в одной папке.
- Создайте страничку All.html, содержащую все картинки из папки Pictures. Сделайте их одинаковыми по высоте. После каждых 3 картинок переходите на новую строчку.
- Создайте страничку Flags.html с заголовком "Флаги стран мира", на которой на каждой строке приведите изображение флага (взять из Википедии) и название соответствующей страны (10-20 флагов). Опубликуйте страничку в Портфолио.
Тема 4. Задания на гиперссылки + изображения
Тема 4. Задания на гиперссылки + изображения
- В html-файле Pictures3.html отобразите 3 картинки из папки Pictures размера 100x100. Для каждой картинки сделайте гиперссылку на ее полноразмерную версию.
- Реализуйте игру в папке HTML\Game в файле Game.html, скачав и распаковав в эту папку файл ИграГиперссылкиКартинки.zip.