Скачать Word
Скачать PSDДомашнее задание. Верстка. Урок 1.
Вам пригодятся статьи с https://htmlbook.ru/html/ про теги (и их аттрибуты): p (align), img (align), s, u, sup, sub, a (target)
Задание 1
Создать файл 'task1.html' который будет содержать:
• 1 абзац с текстом, с выделениями слов жирностью, курсивом, подчеркнутым текстом, и перечеркнутым текстом.
• 1 абзац с выравниванием текста по правому краю
• 1 абзац текста с выравниванием текста по центру
• 1 абзац текста с выравниванием одновременно по обоим краям (растянутый)
Скачать презентациюДомашнее задание. Верстка. Урок 2.
Задание 2
Создать файл 'task2.html' который будет содержать:
• Картинку с заданными аттрибутами высоты и ширины (оригинальный размер картинки).
• Картинку с заданными аттрибутами высоты и ширины (любые не оригинальные размеры).
• Картинку с заданным аттрибутом только высоты (любое не оригинальные значение).
• Картинку без аттрибутов высоты — с выравниванием по центру (по горизонтали) страницы.
• Большой абзац с текстом, внутри которого (примерно в центре абзаца) будет вставлена картина.
• Большой абзац с текстом, внутри которого (примерно в центре абзаца) будет вставлена картина и настроено обтекание текстом (картинка приклеивается к левому краю).
• Большой абзац с текстом внутри которого (примерно в центре абзаца) будет вставлена картина и настроено обтекание текстом (картинка приклеивается к правому краю).
Задание 3
Создать файл 'task3.html' который будет содержать:
• Химическое уравнение как на картинке 'task3_1.png'
• Математическую формулу как в картинке 'task3_2.png'
Задание 4
Создать файл 'task4.html' который будет содержать:
• Ссылки на предыдущие 3 файла.
• Внешнюю ссылку на 'academy.out-it.ru', открывается в этом же окне.
• Внешнюю ссылку на 'ya.ru', открывается в новом окне.
Домашнее задание. Верстка. Урок 3
Задание 5
Семантические теги
Создать файл task1.html. Самостоятельно изучить (и попробовать в коде) следующие семантические теги.
Обозначить ошибку в тексте можно тегом del (по умолчанию он будет перечеркнут), а вставленный текст — тегом ins (обозначается подчеркиванием). Несмотря на то, что это строчные теги (не разрывают строки), внутри них допускается размещение блочных элементов.
<del><p>Неверная информация</p></del>
<ins><p>Новая информация</p></ins>
Есть также:
<dfn>термин, впервые определяемый в документе</dfn>
<code>программный код или его фрагмент</code>
<samp>результат вывода компьютерной программы или скрипта</samp>
<kbd>название клавиш или набираемого на клавиатуре текста</kbd>
<var>переменная (математическая или компьютерной программы)</var>
<cite>цитата или сноска на другой материал</cite>
Контактную информацию предлагается размещать в блочном элементе address, содержимое которого также отображается наклонным начертанием.
Короткие цитаты можно выделить строчным тегом q (текст отобразится в двойных кавычках). Для длинных предназначен блочный элемент blockquote, который отображается с некоторым отступом со всех сторон. У теговq и blockquote есть необязательный атрибут cite, значением которого обычно указывают ссылку (URL) на цитируемый источник. Большинство браузеров этот атрибут игнорируют, однако поисковые системы могут учитывать его при анализе страницы.
Для аббревиатур и акронимов предназначен тег abbr. Обычно его снабжают всплывающей подсказкой с помощью глобального атрибута title, в котором указывают расшифрованное значение.
Тег mark предназначен для выделения фрагментов текста в контексте действий пользователя, даже если они не выделяются в оригинале. Например, им можно обозначать слова, соответствующие поисковому запросу или ошибки во вводимых пользователем данных. Оформление содержимого элементов определяется в таблицах стилей.
Задание 6
Списки
Создать файл task4.html.
Часть 1
Вверху страницы создать используя списки меню со ссылками на файлы task(1|2|3). Текст ссылок - название задания.
Часть 2
Далее сверстать список по макету из файла lists1_hw.png.
Текст для задания
Спутники некоторых планет
Земля Луна Mapc Фобос Деймос Уран Ариэль Умбриэль Титания Оберон Миранда Нептун Тритон Нереида
Часть 3
Далее сверстать список по макету из файла lists2_hw.png.
Текст для задания
Hoбeлeвcкиe лауреаты Премия по химии АРРЕНИУС (Arrhenius), Сванте ACTOH (Aston), Фрэнсис Уильям БЕРГИУС (Bergius), Фридрих .......... ФИШЕР (Fischer), Эмиль ЭЙЛЕР-ХЕЛЬПИН (Euler-Chelpin), Ханс фон ЮРИ (Urey), Гарольд К. Премия по литературе БЕНАВЕНТЕ-И-МАРТИНЕС (Benavente у Martinez), Хасинто BEPГCOH (Bergson), Анри BЬEPHCOH (Bjernson), Бьеристерне .......... ШПИTTEЛEP (Spitteler), Карл ЭЙKEH (Eucken), Рудольф ЭЧЕГАРАЙ (Echegaray), Xoce Премия мира ACCEP (Asser), Тобиас APHOЛЬДCOH (Arnoldson), Клас БAЙEP (Bajer), Фредрик .......... САХАРОВ, Андрей ФPИД (Fried), Альфред
Домашнее задание. Верстка. Урок 4
Задание 7
Таблицы
В файле task2.html необходимо сверстать картину Пита Мондриана "Композиция с красным, синим и желтым" используя таблицу. Смотри файл tables_hw.png
Привожу цвета используемые в картине:
#fffa69 - желтый, #074481 - синий, #ff5b2d - красный, #000000 - черный, #ffffff - белый
Пропорции картины и ячеек можно не сохранять. Важно объединение ячеек и их раскраска.
В head следующий кусок кода
<style type="text/css">
table { border-collapse: collapse; width: 400px;}
td { border: 5px solid #000; }
</style>
А разукрасить ячейку определенным цветом можно аттрибутом bgcolor
<td bgcolor="#00000ff"><br/></td>
Задание 8
Формы
В файле task3.html необходимо сверстать форму как на изображении forms_hw.png
Для переносов строк использовать тег br.
Количество вариантов в поле год и месяц можно делать 3-4 (не обязательно перечислять все).
Названия полей (name="") - на ваше усмотрение.
Домашнее задание. Верстка. Урок 5
Задание 9
В файле task.html хранится исходный html. В html можно только добавить ссылку на css файл который вы напишете.
Ваша задача написать такой css файл, который стилизует страницу согласно макету selector_task.png
Для стилизации используются в основном эти свойства:
text-align: right;
text-align: center;
color: orange;
background-color: green;
font-size: 30px;
font-weight: bold;
font-weight: normal;
Задание 10
В файле task2.html хранится исходный html. В html можно только добавить ссылку на css файл который вы напишете.
Ваша задача написать такой css файл, который сделает:
— Первый параграф в article выделить бОльшим кеглем
— последний цветом \#999
Задание 11
На самообучение еще 2 типа селекторов:
:not()
last/first/only
Задание 12
В файле task4.html хранится исходный html. В html можно только добавить ссылку на css файл который вы напишете.
Ваша задача написать такой css файл, который сделает:
— цвет внешних ссылок #f70;
— ссылки на сервисы google должны быть цвета \#666
— ссылка в новом окне должна после себя содержать utf символ ⇱ (без подчеркивания)
Получится внешний вид как на картинке task4.png
Задание 13
В файле task5.html хранится исходный html. В html можно только добавить ссылку на css файл который вы напишете.
Ваша задача написать такой css файл, который разукрасит таблицу как на макете task5.png.
В качестве цветов фона используйте:
- background: #ddebf7; голубой
- background: #f2f2de; бежевый
Задание 14
В файле task6.html хранится исходный html. В html можно только добавить ссылку на css файл который вы напишете.
Ваша задача написать такой css файл, который по состоянию checked включать/выключать соответствующие элементы.
Макет хранится в файле task6.png. Первая строка - исходный вид. Остальные - как выглядят при нажатии на разные чекбоксы.
