Практические задания по HTML и CSS

Задание №1

Оформите стихотворение, как показано на рисунке:

Евгений Евтушенко

— 1955 —

Бывало, спит у ног собака,

костер занявшийся гудит,

и женщина из полумрака

глазами зыбкими глядит.

Потом под пихтою приляжет

на куртку рыжую мою

и мне,задумчивая,скажет:

«А ну-ка, спой!..» —

и я пою.

Задание №2

Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1. Вверху показана исходная ссылка, внизу ссылка после наведения курсора.

Задание №3

Исправьте ошибки в приведенном коде:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <title>Glossary<title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <body> <a href="glosstop.html"><h1>Glossary of Terms</h1></a> <span> <h2><p>Algorithmic Oriented Language.</h2></p> </span> <span> <h2><p>Creates new project</p></h2> </span> </body> </html>

Задание №4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-1"> <body> <h11 align="justify">Галион</h1> <p align="justify"><strong>Галион</b> - большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией.</br> Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу.</p> <hr> <blockquote>Флагманский корабль был мощным <i>галионом</i>, вооруженным сорока Восьмью большими пушками и восьмью малыми.</blockquote> </hr></p> </body> </html>

Задание №5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <head> <body> <h2>Опрос общественного мнения показал</h2> <p>Диего Веласкес писал свои полотна в стиле: империализма, кубизма и импрессионизма;</p> конфуцианство возникло в: Италии, Корее и Франции;</p> <p>богами торговли и воровства в Древней Греции были: Марс, Меркурий и Дионис;</p> <li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</p> <p>столица Золотой Орды - Монголия;</p> <p>главные противники Александра Македонского: татаро-монголы, Дедал и Цезарь;</p> <p>в Древней Греции морями повелевали боги: Плутон, Нептун и Тритон.</p> </ul> </body> </html>

Задание №6

Сделайте страницу с изображением флага Японии, как показано на рис. 1. Размер 300х200 пикселей, диаметр круга 120 пикселей. Любые картинки применять запрещено, всё надо сделать с помощью CSS. Страница должна корректно отображаться во всех современных браузерах.

*Для круга следует использовать свойствоbackground: radial-gradient(circle, #bc002d 58px, #fff 60px);

Задание №7

С помощью стилей создайте текст в рамке, как показано на рис. 1.

Задание №8

С помощью тегов <ol> и <li> постройте списки, показанные на рис. 1. При этом у вас должен быть валидный XHTML и CSS. Списки должны корректно отображаться в браузерах IE8, Firefox 6, Safari 5, Opera 11, Chrome 8 и в их старших версиях.

Сделать 2 варианта: 1 – с помощью html, 2 – с помощью CSS.

Задание №9

Напишите код XHTML, чтобы получить результат, приведенный на рис. 1.

Задание №10

Измените стиль для таблицы, чтобы она получилась, как показано на рис. 1. Вносить изменения в код таблицы нельзя, всё оформление должно делаться только через стили.

Задание №11

Сделайте текст, как показано на рис. 1. В качестве шрифта укажите Impact.

Задание №12

Сверстайте форму регистрации, показанную на рис. 1. Ширина формы и её полей фиксирована.