Цель данной лабораторной работы - знакомство с инструментами построения пользовательских интерфейсов web-сайтов: HTML, CSS. В ходе выполнения работы, вам предстоит ознакомиться с кодом реализации простого калькулятора, и затем выполнить задания по варианту.
- HTML- разметка
- Базовая структура HTML-документа
- Создание проекта
- Верстка калькулятора
- CSS
- Применение CSS к HTML-документу
- Стилизация верстки калькулятора с помощью CSS
- Задание
HTML - это язык разметки, с помощью которого описывается содержимое веб-страницы: текстовые поля, таблицы, кнопки, заголовки, ссылки, в общем - все, что пользователь видит на странице. Для использования HTML-элементов на странице используются тэги. В основном на каждый элемент в документе приходится по два тэга: открывающий и закрывающий, но для обозначения некоторых элементов достаточно только открывающего. У тэгов могут быть атрибуты, с помощью которых задается дополнительная информация об html-элементе. Синтаксис объявления html-элемента выглядит примерно так:
<тэг атрибут="значение_атрибута">Содержимое тэга</тэг>Рассмотрим некоторые html-элементы и их тэги:
В html присутствуют 6 тэгов для выделения заголовков:
<h1>Этот текст будет отображен браузером как заголовок первого уровня (крупнейший)</h1><h2>А этот - как заголовок второго уровня (поменьше) </h2> ... <h6>Самый мелкий заголовок</h6>
текст можно форматировать:
<i> Этот текст будет отображен курсивом </i><b> этот будет выделен жирным </b><u> а этот будет подчеркнут </u>
текст можно группировать в параграф (абзац):
<p>Это параграф какого-то текста.</p><p>Следующий параграф текста</p>
ненумерованный список (unordered list UL)
<ul><!-- начинаем ненумерованный список--><li> первый элемент списка </li><li> второй элемент списка </li><li> третий элемент списка </li></ui><!-- список закончен -->
Нумерованный список (ordered list OL):
<ol><li> первый элемент списка </li><li> второй элемент списка </li></ol>
ссылка на ресурс
Для создания ссылки используется парный тэг
<a>. У него присутствует несколько атрибутов, позволяющих ссылку настроить:href- адрес ресурса, на который ссылка ссылается, например https://google.comtarget- в каком фрейме (окне) открывать документ, по умолчанию стоит в текущем.<!-- переход по этой ссылке откроет google.com в текущем окне --><ahref="https://google.com"> Click me! </a><!-- эта ссылка открое google.com в новом окне браузера --><ahref="https://google.com" target="_blank"> Click me! </a>
якорь
Внутри HTML-страницы с помощью того-же тэга
<a>можно расставить так называемые “якоря”. Грубо говоря, это - закладки на странице. Якоря затем можно использовать в гиперссылках для перемещения к определенному элементу страницы, где установлен якорь.<p><aname="some_paragraph"></a><!-- устанавливаем якорь --> Lorem Ipsum is simply dummy text of ... </p><p> Следующий параграф текста, в котором мы установим ссылку на якорь. <ahref="#some_paragraph">При нажатии на эту ссылку, пользователь будет перенаправлен к месту установки якоря.</a></p>
Простейший html-документ выглядит следующим образом:
<!DOCTYPE html><!--Указание браузеру, какой стандарт HTML использовать (сейчас HTML 5 по умолчанию)--><htmllang="ru"><!--Начало html-блока. Можно указать язык, чтобы избежать ошибок отображения текста--><!-- секция head, как правило, используется для описания служебной и мета информации, в ней также можно указывать ссылки на нужные странице ресурсы, например, шрифты, скрипты и т.д.--><head><metacharset="UTF-8"><!--указание кодировки символов--><title>Моя первая страница</title><!--Заголовок страницы, который будет отображен во вкладке браузера--></head><!--секция body - это тело документа. Здесь размещается вся информация, которая будет показана на странице--><body><h2>Lorem Ipsum</h2></body></html><!--конец html-документа -->HTML-элементов существует большое количество, мы рассмотрели лишь небольшую часть. Почитать про другие HTML-тэги, чтобы научиться вставлять изображения, таблицы, поля ввода, формы и прочее можно здесь.
Для данной лабораторной работы будем использовать VS Code.
- Заходим в меню создания проекта и выбираем: Создать файл
- Создайте HTML-файл: calculator.html
В HTML-файл поместите следующее содержимое. Здесь определёны все составляющие калькулятора (кнопки и поле вывода результата вычислений). Для каждого активного элемента определен атрибут id ( уникальный идентификатор), он потребуется в дальнейшем, чтобы обращаться к элементам из JavaScript.
<!DOCTYPE html><html><head><title>Калькулятор</title></head><body><div><!-- div - это базовый html-контейнер, который может содержать в себе другие html-элементы. --><!-- блок с экраном калькулятора, где будет выводиться результат вычислений. --><divid="result">
0
</div><!-- блок с кнопками калькулятора. --><div><!--горизонтальный ряд из четырех кнопок--><div><buttonid="btn_op_clear">C</button><!-- про тэг кнопки: https://www.w3schools.com/tags/tag_button.asp --><buttonid="btn_op_sign">+/-</button><buttonid="btn_op_percent">%</button><buttonid="btn_op_div">/</button></div><div><buttonid="btn_digit_7">7</button><buttonid="btn_digit_8">8</button><buttonid="btn_digit_9">9</button><buttonid="btn_op_mult">x</button></div><div><buttonid="btn_digit_4">4</button><buttonid="btn_digit_5">5</button><buttonid="btn_digit_6">6</button><buttonid="btn_op_minus">-</button></div><div><buttonid="btn_digit_1">1</button><buttonid="btn_digit_2">2</button><buttonid="btn_digit_3">3</button><buttonid="btn_op_plus">+</button></div><div><buttonid="btn_digit_0">0</button><buttonid="btn_digit_dot">.</button><buttonid="btn_op_equal">=</button></div></div></div></body></html>Если открыть этот HTML-документ в браузере, мы получим не самый изящный калькулятор. Чтобы задать параметры внешнего вида элементов, необходимо использовать CSS.
CSS (Cascading Style Sheets) - каскадные таблицы стилей. С помощью этого инструмента мы можем кастомизировать отображение различных HTML-элементов на странице, например сделать кнопки круглыми или задать им определенный цвет.
Рассмотрим синтаксис. CSS-правило (стиль) содержит селектор и блок объявлений. Селектор определяет к каким HTML-элементам нужно применить перечисленные в блоке объявлений свойства.
имя_селектора { свойство1: значение;
свойство2: значение; ...
} CSS element Selector
Существует несколько видов селекторов. Например, если мы хотим задать одинаковые правила для всех заголовков первого уровня, мы можем создать CSS-правило с именем селектора
h1. Также можно поступить и с другими HTML-элементами./* css */h1 { color: blue; font-size:12px; }
<!-- HTML --><body><h1>Заголовок</h1><h1>Еще заголовок</h1></body>
Теперь, при использовании тэга
<h1>в HTML документе, ко всем заголовкам первого уровня будут применены заданные правила: синий цвет и размер шрифта в 12px.
CSS id Selector
Селектор по идентификатору позволяет задать правила для конкретного HTML-элемента с конкретным уникальным идентификатором. Имя такого селектора совпадает с идентификатором HTML-элемента, но начинается с решётки:
<!-- HTML --><divid="my_custom_element"> Lorem Ipsum is simply dummy text </div>
/* css */#my_custom_element { text-align: center; color: red; }
CSS class Selector
У HTML-элементов есть атрибут class. Классовый селектор применяет заданные CSS свойства к тем HTML-элементам, которые принадлежат конкретному классу. Причем один HTML-элемент может принадлежать сразу к нескольким классам. Имя такого селектора начинается с точки.
/* css *//* синий текст по центру */ .my-centered-blue { text-align: center; color: blue; } /* огромный текст курсивом */ .my-large-italic { font-size: xxx-large; font-style: italic; }
<!-- HTML --><pclass="my-centered-blue my-large-italic"> Этот параграф принадлежит к двум классам, поэтому комбинирует их свойства </p><divclass="my-large-italic"> Этот блок принадлежит только к классу my-large-italic </div>
Также можно создать классовый селектор, дейсвующий только на конкретный тип HTML-элементов, например на параграфы:
/* css */p.my-large-italic { font-size: xxx-large;
font-style: italic;
}Существует несколько вариантов встраивания CSS-правил в HTML-документ. CSS можно расположить в секции <head>, в рамках тэга <style>
<!-- HTML --><head><title>калькулятор</title><style>
.my-center-red { color: red;
text-align: center;
}
</style></head><body><pclass="my-center-red"> Hello! </p></body>Второй, более предпочтительный, вариант - описание CSS стилей в отдельном файле, подключить который к HTML-документу можно сославшись на него в секции head:
<head><title>калькулятор</title><!-- указываем, что файл style.css содержит таблицу стилей (stylesheet) --><linkrel="stylesheet" href="style.css"></head>Браузер, читая html документ подгрузит стили из этого файла.
Также есть возможность задать стиль для элемента напрямую через атрибут style, но делать так не рекомендуется:
<buttonstyle="margin-right: 5px; backgroud: red;">Красная кнопка</button>Приступим к стилизации созданной ранее верстки калькулятора. Создайте css-файл и пропишите в нем стили для элементов калькулятора: кнопок и окна вывода.
/* опишем базовый стиль кнопки калькулятора */
.my-btn { margin-right:5px; /* задаем отступ от кнопки справа */margin-top:5px; /* задаем отступ от кнопки сверху*/width:50px; /* задаем ширину кнопки */height:50px; /* задаем высоту кнопки */border-radius:50%; /* округляем кнопку */border: none; /* отключаем обводку */background:#515151; /* задаем серый цвет кнопки */color: white; /* задаем белый цвет текста внутри кнопки */font-size:1.5rem; /* увеличим размер шрифта */font-family: Arial, Helvetica, sans-serif; /* сменим шрифт */cursor: pointer; /* при наведении на кнопку курсор будет изменен со стрелки на 'указательный палец' */user-select: none; /* отключаем возможность выделить текст внутри кнопки */
} /* hover - это состояние элемента, когда на него наведен курсор */
.my-btn:hover {
background: darkgray; /* при наведение курсора на кнопку, она будет окрашена в серый */
}
/* active - это состояние активации элемента. В случае кнопки - нажатие на нее */
.my-btn:active {
filter:brightness(130%); /* увеличим интенсивность цвета для эффекта вспышки */
}
/* селектор для кнопок первостепенных операций */
.my-btn.primary { background:#ff9801; /* цвет кнопки оранжевый */
}
/* селектор для кнопок второстепенных операций */
.my-btn.secondary { background:#a6a6a6; /* цвет кнопки сервый */
}
/* селектор для кнопки расчета выражения (=) */
.my-btn.execute { width:110px; /* сделаем кнопку шире других */border-radius:34px; /* подкорректируем округлость */
}
/* селектор для поля вывода результата */
.result { width:220px;
height:50px;
margin-bottom:15px; /* отступ снизу */padding-right:10px; /* выступ справа */background:rgb(73,73,73); /* цвет можно задавать и таким образом */text-align: right; /* примагнитим текст к правой стороне */color:#ffffff; /* цвет текста белый */font-size:1.5rem;
font-family: Arial, Helvetica, sans-serif;
}Теперь заполним атрибут class у HTML-элементов калькулятора, чтобы применить к ним созданные стили:
Кнопки циферблата: 0-9 и точка относятся к классу
my-btn:... <buttonid="btn_digit_7" class="my-btn">7</button><buttonid="btn_digit_8" class="my-btn">8</button><buttonid="btn_digit_9" class="my-btn">9</button> ...
Кнопки второстепенных операций (C, +/-, %) принадлежат классам
my-btnиsecondary:... <buttonid="btn_op_clear" class="my-btn secondary">C</button><buttonid="btn_op_sign" class="my-btn secondary">+/-</button><buttonid="btn_op_percent" class="my-btn secondary">%</button> ...
Кнопки первостепенных операций принадлежат к классам
my-btnиprimary:<buttonid="btn_op_mult" class="my-btn primary">x</button> ... <buttonid="btn_op_minus" class="my-btn primary">-</button> ... <buttonid="btn_op_plus" class="my-btn primary">+</button>
Кнопка “=” дополнительно относится еще и к классу
execute:<buttonid="btn_op_equal" class="my-btn primary execute">=</button>
Блок с экраном калькулятора относим к классу
result:<divid="result" class="result"> 0 </div>
Если все выполнено верно, изображение страницы должно соответствовать требуемому.
- Поменяйте цветовую палитру калькулятора с оранжево-серой на любую другую;
- Сделайте фон калькулятора темным (наподобие ночной темы);
- Сделайте кнопки квадратными вместо круглых.;
- Измените цвет вывода результата на любой другой;
- Сделайте окно вывода со скруглеными краями;
- Поменяйте шрифт цифр;
- Сделайте шрифт более толстым;
- Измените цвет при наведении мышки на кнопку на другой;
- Добавьте надпись внизу "ЛР выполнена ФИО";
- Выровняйте калькулятор по центру;
- Увеличьте размер окна вывода;
- Добавьте кнопку для смены темы (смена цвета фона);
- Сделайте шрифт тоньше;
- Смените цвет шрифта;
- Добавьте любое изображение на фон;
- Добавьте кнопку со ссылкой на GitHub;
- Сделайте поле с выпадающим списком;
- Сделайте сворачивающиеся и разворачивающиеся подробности (Автор -> ФИО, Группа);
- Добавьте поле с целью ЛР и подсветить слова: знакомство, HTML, CSS (с помощью тега).
- Скопируйте для калькулятора стилистику веб-ресурса, которая не будет повторяться с остальными студентами