Основы web-разработки на базе HTML и CSS /Росдистант/ Практические задания 1-4
Практическое задание 1
Разбивка страницы сайта на блоки и элементы
Задание. Разбейте на блоки и элементы всю стартовую страницу сайта. В отчете с титульным листом предоставьте файл со скриншотами страницы, разбитой на блоки и элементы.
Стартовая страница сайта: W3Schools
Практическое задание 2
HTML верстка страницы сайта
Задание. Сделайте HTML верстку страницы сайта, указанной на Рисунке 1, с помощью абстрактного тега "tag". Перенесите блоки страницы в HTML. Следующим шагом замените абстрактный тег на необходимый.
Пояснение: Блок, представленный на Рисунке 2 не нужно разбивать на элементы. В верстке указываем тег "div" и внутри пишем "code".
В отчете с титульным листом предоставьте файл со скриншотом кода HTML верстки.
Практическое задание 3
HTML верстка блока комментария
Задание. Сверстайте, указанный на Рисунке 1, блок комментария. Постарайтесь сделать его максимально точным по дизайну.
Рисунок 1. Блок комментария
В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученного в итоге блока комментария.
Практическое задание 4
HTML верстка страницы
Задание. Сверстайте страницу, указанную на Рисунке 1. Ширина блока должна быть – 1200 px. Сделайте правильную HTML-структуру и примените технику Pixel Perfect.
В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученной в итоге страницы.
Практическое задание 1
Разбивка страницы сайта на блоки и элементы
Задание. Разбейте на блоки и элементы всю стартовую страницу сайта. В отчете с титульным листом предоставьте файл со скриншотами страницы, разбитой на блоки и элементы.
Стартовая страница сайта: W3Schools
Практическое задание 2
HTML верстка страницы сайта
Задание. Сделайте HTML верстку страницы сайта, указанной на Рисунке 1, с помощью абстрактного тега "tag". Перенесите блоки страницы в HTML. Следующим шагом замените абстрактный тег на необходимый.
Пояснение: Блок, представленный на Рисунке 2 не нужно разбивать на элементы. В верстке указываем тег "div" и внутри пишем "code".
В отчете с титульным листом предоставьте файл со скриншотом кода HTML верстки.
Практическое задание 3
HTML верстка блока комментария
Задание. Сверстайте, указанный на Рисунке 1, блок комментария. Постарайтесь сделать его максимально точным по дизайну.
Рисунок 1. Блок комментария
В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученного в итоге блока комментария.
Практическое задание 4
HTML верстка страницы
Задание. Сверстайте страницу, указанную на Рисунке 1. Ширина блока должна быть – 1200 px. Сделайте правильную HTML-структуру и примените технику Pixel Perfect.
В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученной в итоге страницы.Практическое задание 1
Разбивка страницы сайта на блоки и элементы
Задание. Разбейте на блоки и элементы всю стартовую страницу сайта. В отчете с титульным листом предоставьте файл со скриншотами страницы, разбитой на блоки и элементы.
Стартовая страница сайта: W3Schools
Практическое задание 2
HTML верстка страницы сайта
Задание. Сделайте HTML верстку страницы сайта, указанной на Рисунке 1, с помощью абстрактного тега "tag". Перенесите блоки страницы в HTML. Следующим шагом замените абстрактный тег на необходимый.
Пояснение: Блок, представленный на Рисунке 2 не нужно разбивать на элементы. В верстке указываем тег "div" и внутри пишем "code".
В отчете с титульным листом предоставьте файл со скриншотом кода HTML верстки.
Практическое задание 3
HTML верстка блока комментария
Задание. Сверстайте, указанный на Рисунке 1, блок комментария. Постарайтесь сделать его максимально точным по дизайну.
Рисунок 1. Блок комментария
В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученного в итоге блока комментария.
Практическое задание 4
HTML верстка страницы
Задание. Сверстайте страницу, указанную на Рисунке 1. Ширина блока должна быть – 1200 px. Сделайте правильную HTML-структуру и примените технику Pixel Perfect.
В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученной в итоге страницы.
