Дисциплина «Проектирование и разработка веб-приложений»

Для студентов 2-3 курсов ОП Информационные системы, IT-менеджмент

Преподаватель: Тлеубаева Арайлым Орынбаева,

м.т.н., ст.преподаватель

Практическая работа 1. HTML и СSS

1 задание. Создание HTML-документа

Вам надо создать с нуля страницу, в которо вы должны отобразить картинку,

заголовок 3-го уровня, параграф, в котором будет текст разных размеров и цветов, а
также выведите несколько input поле (текстовое поля, пароль и поле выбора
нескольких веще ).

Картинки отображаются при помощи тега <img>, заголовок 3-го уровня <h3></h3>,
параграф <p></p>, в нем можно пользоваться <em>, <strong>, <strike>, <small> и
многие другие. Поля выводятся благодаря тегу <input> с различным атрибутом type.
Для списка вам надо прописать тег <seletct>, в котором кажды новы вариант
прописывать через тег <option>
й
й
й
й
й
 Исходной код:

2 задание. Форма регистрации

Созда те форму регистрации как на фото ниже:

й
 3 задание. Разметка HTML страницы

Созда те стандартную HTML разметку страницы как на фото ниже:

В шапку са та поместите заголовок "Main title", а также форму для поиска

на са те.

Под шапко разместите меню для навигации на са те. Для меню

использу те специальны тег навигации.

Созда те основную часть са та, прописав в не все необходимые теги, а

также второ заголовок "Main title" и текст "This is the content of this section".
Внизу страницы созда те футер и поместите в него текст "copyrights".
Важно: выполните задание используя нужные HTML теги для шапки,
навигации, основно части и футера.

Исходной код:
й
й
й
й
й
й
й
й
й
й
й
й
й
 4 задание. Список изображени

Созда те список, которы будет состоять из изображени , а также

небольших подписе к ним:

Исходной код:
й
й
й
й
й
5 задание.

Ваша задача это создать два блока, расположить их друг возле друга и в
эти два блока поместить несколько input и добавить соответственно стили к
каждому из input.

Чтобы расположить два блока друг напротив друга сдела те два div'a и
добавьте к ним стили: oat, width и можно дополнительные стили уже
просто для красоты. Теперь в кажды div поместите различные input с
атрибутом type (разные значения). Теперь выберите input в css при помощи
id или класса или же по имени (input['name']). Добавьте отступы (padding),
background- color, color, border-radius и любые другие сво ства, которые
смогут украсить ваш input
fl
й
й
й
Style.css

body {
margin: 0;
}

.block1 {
float: left;
width: 250px;
}

.block2 {
float: right;
width: 250px;
}

.text {
padding: 10px 30px;
background-color: rgb(255, 0, 212);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: x-large;
font-weight: 100;
text-align: left;
color: rgb(255, 255, 255);
border-radius: 10px;
border-color: rgb(182, 26, 182);
}
.button {
padding: 10px;
border-color: green;
border-radius: 20px;
margin: 10px 0px;
color: green;
}
 .text_one {
padding: 15px 15px;
border-radius: 35px;
font-size: large;
border-color: indigo;
color: mediumturquoise;
}

.button_one {
margin: 20px 0px;
padding: 20px 10px;
border-color: olive;
font-size: 20px;
}

Задание 6. Красивая кнопка

Созда те кнопку и добавьте к не стили как на фото ниже:

Исходной код index.html и style.css

й
й
 Задание 7.Фиксированная кнопка

Созда те кнопку, которая будет зафиксирована в углу страницы.

й
 Кнопка зафиксирована слева внизу страницы и при прокрутке остается на
одном и том же месте. Также добавьте стили при наведении:

Задание 8. GIT

Коммиты

Созда те сво фа л и забросьте его в репозитори . После этого

воспользу тесь специально командо чтобы получить все фа лы с
репозитория.(Загрузить свои задания через командную строку в VS Code)

Чтобы забросить фа лы использу те git add, git commit -m "message", git

push. Чтобы получить фа лы использу те git pull.
й
й
й
й
й
й
й
й
й
й
й
й