admin / 28.03.2018
Задачи по html
.
Содержание
Практические задания по теме «Web-дизайн и программирование»
Задания: CSS селекторы
Ягоды: малина
Для уверенной верстки, требуется в идеале знать селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов (нахождение приоритета, специфичность селектора), группировка селекторов, селектор первый элемент, селектор по id.
Задания: CSS селекторы
- Используйте селекторы по атрибуту, чтобы покрасить все гиперссылки, которые ведут на ведущие социальные сети
- Задание по верстке альтернативное предыдущему: Сверстайте фрагмент HTML-страницы, содержащий текст с гиперссылками, часть из которых ведет на социальные сети. У каждой ссылки на соцсеть, нарисуйте пиктограмму.
- Используйте селекторы псевдокласов, чтобы раскрасить ненумерованый список «зеброй»
- Используйте селектор псевдокласса для окраски всех пустых HTML-элементов div на странице
- Используйте псевдокласс, для окраски HTML-элемента на странице, атрибут id которого совпадает с хэшем адреса страницы.
- * Реализуйте эффект галереи, без использования JavaScript. Примечание: для работы пригодится псевдокласс из предыдущего задания и умение работать с позиционированием.
- ** Создайте эффект лайтбокса, не используя JavaScript. Примечание: Задание не простое. Лучше пропустите и вернитесь к нему позже, после изучения / повторения работы с позиционированием и анимацией
- Покрасьте при помощи контекстных селекторов все дочерние элементы других элементов. Примечание: помните о разнице в работе селекторов дочерних элементов и элементов потомков
- Создайте небольшие изображения рядом со всеми ссылками на странице. Используйте для этого спрайтовое изображение.
- Применительно CSS стили к тем HTML-элементам текста, которые содержат слово «htmllab». Примечание: сначала нужно создать разметку и разместить в произвольный элемент это слово.
- Используя псевдокласс, реализуйте реакцию на наведение мыши на HTML-элементы.
- Напишите стили оформления страницы перед печатью
- При помощи псевдокласса :hover создайте тень у гиперссылки
Все задания по HTML
Задание №1
Оформите стихотворение, как показано на рисунке:
Евгений Евтушенко
— 1955 —
Бывало, спит у ног собака,
костер занявшийся гудит,
и женщина из полумрака
глазами зыбкими глядит.
Потом под пихтою приляжет
на куртку рыжую мою
и мне,задумчивая,скажет:
«А ну-ка, спой!..» —
и я пою.
Задание №2
Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1.
Задачник HTML+CSS от Трепачёва Дмитрия
Вверху показана исходная ссылка, внизу ссылка после наведения курсора.
Задание №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. Ширина формы и её полей фиксирована.
Справочник по CSS
Позиция и размеры элемента
позиция
- position — задает способ расположения элемента, может принимать одно из следующих значений:
- fixed — координаты относительно окна браузера;
- relative — координаты относительно относительно родительского элемента;
- absolute — координаты относительно первого родительского элемента с позиционированием отличным от static;
- static — позиционирование обычным образом, значение по умолчанию.
- left — x координата верхнего левого угла элемента;
- top — y координата верхнего левого угла элемента;
- right — x координата нижнего правого угла элемента;
- bottom — y координата нижнего правого угла элемента;
- z-index — z координата элемента. Это позволяет накладывать элементы друг на друга, создавать слои. (пример наложения).
позиция через выравнивание
- text-align — горизонтальное выравнивание содержимого. Возможны следующие значения:
- justify — по ширине;
- left — влево;
- right — вправо;
- center — по центру по горизонтали;
- vertical-align — вертикальное выравнивание содержимого. Численное значение указывает на сколько поднять/опустить элемент относительно текущей позиции. Также доступны строковые значения:
- top— наверх;
- bottom — вниз;
- middle — в середину.
В мозиле и опере выравнить объект по центру можно следующим образом
Если ширина известна то выравнить по центру можно примерно следующим образом
размеры
- width — ширина элемента;
- height — высота элемента;
- min-width, max-width — минимальная и максимальная ширина элемента;
- min-height, max-height — минимальная и максимальная высота элемента.
когда содержимое больше элемента
- overflow — определяет поведение, содержимое перекрывает бокс элемента. Возможны следующие значения:
- auto;
- hidden — скрыть;
- scroll — прокручивать;
- visible — отображать;
- inherit — наследовать значение.
- clip — позволяет указать видимый прямоугольник дочернего элемента, когда его размеры больше родительского элемента при абсолютном позиционировании.
Сборник упражнений и задач по HTML
Обычно используется с изображениями. Стиль не работает если определено . Прямоугольник указывается как rect (верх, право, низ, лево).
Примеры
Измените размерности
Это было достаточно легко, но для того, чтобы взять победу над трехмерным пространством, я должен был изменить свою точку зрения. Вместо вращения квадрата, я повернул линию и спроецировал на линию.
Перспектива проволочного каркаса:
(Интерактивная демонстрация: triviumCDF2.cdf)
Я нашел изменение точки зрения, освещающий, это заставило меня думать о том, что длина проекции является сумма длин проекций двух сторон площади видимой с одной стороны.
Длина проекции отрезка длины и ℓ с нормаль n1 на линию с нормаль п2 равна ℓ Dot [N1, N2].
Проекция каждой стороны существует только, если точка [n1, n2] положительна (т.е. сторона, видна); в противном случае он скрыт за другими сторонами. Длина тени, таким образом, является суммой вкладов на востоке, западе, верхней и нижней сторон квадрата:
Таким образом, длина проекции представляет собой сумму абсолютных значений координат компонентов вектора нормали nvec. Я реализовал этот способ вычисления длину тени в зависимости:
И, конечно, это согласуется с ранее представленным способом вычисления длины проекции:
Естественно, ожидается увидеть, то же самое:
Случай куба
Руководствуясь накопленными знаниями, я обратился к прямоугольному параллелепипеду (cuboid), чей центр масс расположен в начале координат.
Параллелепипед бросает свою тень на плоскость, ориентация параметризована перпендикулярно (т.е. нормальной) вектора nvec.
Я начал со строительства проекции каждой грани параллелепипеда и совмещения полученного рисунка. Сначала я определил для этот вспомогательную функцию для проецирования вектора xvec на плоскость с нормалью nvec:
Преобразование координат лицевой стороны в {i,j} с началом в z0:
Затем я определил функцию для проецирования каждой стороны на плоскость с нормальным вектором nvec и соответствующим 3D полигоном:
Площадь многоугольника проецируется на плоскости с нормальным nvec, вычисляется как сумма площадей двух треугольников, так и четырехугольника разделенного по диагонали:
С этих пор, я был готов визуализировать проекцию прямоугольного параллелепипеда с единичной длиной ребра , центр масс которого расположен в начале координат, а стороны будут выровнены по оси координат. Я параметризовано единичный вектор нормали к плоскости проекции с использованием сферических координатах θ и φ: {sin(θ) sin(φ), sin(θ), cos(φ), cos(θ)}.
(Интерактивная демонстрация: triviumCDF3.cdf)
Поскольку в любой момент времени, только три грани параллелепипеда являются видимыми, я суммирую все шести граней и делю результат на два.
Задания по HTML
Для определенной ориентации nvec == {- 1,2,3} √14 стороны, поэтому площадь проекции вычисляется следующим образом:
Применяя знания, отрытые при изучении двухмерного случая, я проверил, а что если площадь проекции снова равна сумме абсолютных значений произведению (англ dot products) вектора нормали nvec с векторами оси:
Бинго!
Это имеет смысл, как я и думал. Каждый член соответствует одной области из не более чем трех видимых граней. Рассмотрим участок площадью S на плоскости с нормаль n1. Площадь проекции на другую плоскость с нормалью п2 равна S Abs[Dot [N1, N2]].
Сферический участок области тени, отбрасываемой параллелепипедом на плоскость с нормалью {sin(θ), sin(φ), sin(θ), cos(φ), cos(θ)} как функция углы Эйлера θ и φ.
Минимум функции площади соответствует площадь одной стороны, что составляет 1, а максимум √3, что соответствует проекции на плоскость, чей нормальный вектор совпадет с диагональю параллелепипеда:
Я уже почти готов найти ожидаемую величину области.
Для нормального вектора единичной {Nx, Ny, Nz}, ожидаемая область проецирования:
Площадь поверхности бесконечно малого размера (θ, θ +dθ) × (φ, φ +dφ) единичной сферы хорошо известна, sin(θ)dθ dφ. Разделив ничтожно малую область на общую площадь поверхности единичной сферы, я получить ничтожно малую вероятностную меру, соответствующую равномерному распределению на единичной сфере: dS (θ, φ) == 1 / (4 π) sin(θ)dθ dφ.
И, наконец, площадь проекции равна:
Конечно, я мог бы упростить вычисления, используя аргумент симметрии:
Это хорошо известный факт, (смотрите соответствующий вопрос на math.stackexchange.com), что каждый отдельный компонент случайного вектора, равномерно распределенного на единичной сфере, следует равномерное распределение на интервале (-1,1). С этим пониманием, ответ может быть разработан в голове, объясняя, почему эта проблема была признана Арнольдом в «Тривиум»:
Увеличиваем размерность пространства
Понимание этого процесса позволило мне легко построить ответ для случая D-мерного гиперкуба, проецируемого на случайно ориентированную гиперплоскость:
Я просто должен был знать распределение компонента D-мерного случайного единичного вектора.
Расчеты просты, и основаны на гиперсферических координат (например, см Википедию: н-сферу). Инфинитезимальный гиперсферическая область также факторы, как (Sin [θ1] d^-2 dθ1) (Sin [θ2] d^-2 dθ2) ⋯ (Sin [θd-2] d^-2 dθd-2) d^-2 dθd-1. С Nd == cos(θ1), я должен был найти константу нормализации для квази-плотностью Sin[θ1]d^-2:
Поэтому ожидаемый площадь проекции d-гиперкуба является:
Кроме того, я мог бы использовать результат замкнутой форме для функции плотности вероятности (PDF) распределения отсюда:
Я пришел к этому выводу воспроизводя результаты, полученные ранее и таблицы результатов для более высоких размерностей:
Средняя площадь тени растет безгранично вместе с размерностью пространства, как число граней, которые способствуют его площади также увеличивает:
В высокой размерности пространства, площадь весы как квадратный корень из размерности d:
Этот вывод, получен в результате исследование «тривиальной» проблемы Арнольда с использованием Mathematica. Использование с помощью Mathematica привело ко многим «Ага!». Позволило мне легко ответить на различные вопросы «что, если …» . Я надеюсь, что мне удалось передать процесс исследования с с использованием Mathematica, чтобы вдохновить вас начать изыскания ваших собственных решений.
TrivialProbabilityProblemBlog.zip
Данная статья является переводом записи из блога wolfram. Автор оригинальной статьи Oleksandr Pavlyk (Kernel Developer, R&D at Wolfram Research).
FILED UNDER : IT
