Основой программирования web – сайтов является язык программирования HTML (Hyper Text Markup Language — Язык Гипер Текстовой Разметки).
Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm),
обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра, при необходимости, отправки введённых пользователем данных на сервер.
Каскадные таблицы стилей (Cascading Style Sheets- CSS) предоставляют дополнительные возможности для разметки html-документа и свободу по созданию уникального дизайна для веб-страниц.
При написании html-кода для CSS, выбирая теги, ориентируйтесь на роль, которую играет фрагмент текста на веб странице, а не на внешний вид, который текст приобретает благодаря этому тегу.
CSS можно добавлять к элементам HTML тремя способами:
- Встроенный — с помощью атрибута Style в элементах HTML
- Internal -с помощью <style> элемента в <head> разделе
- Внешний — с помощью внешнего CSS-файла
Наиболее распространенным способом добавления CSS является сохранение стилей в отдельных CSS-файлах.
И так, приступаем к нашему калькулятору!
Создаем контейнер <div> для нашего калькулятора, он будет иметь имя container.
Тег <form> используется для создания формы на веб-странице. Основная задача HTML формы - принять информацию от пользователя и отправить ее на сервер для обработки. Пользователь нажимает на кнопку и она отображается в текстовой форме.
Имя основной формы - calc.
Остальные элементы мы будем размещать при помощи тега <span> - является основным строковым контейнером для фразового контента, в данном случае для цифры или арифметического действия.
Мы будем использовать на каждый элемент обработчик события onclick, т.е. пользователь должен нажать мышью по элементу.
В "calc.txt.value+='/'" мы прописали полный путь, сначала обращаемся к форме, затем к текстовому элементу и вызываем атрибут value - определяет текущее значение элемента, т.е. в поле вывода добавится цифра или арифметическое действие.
Без формального языка CSS, наш калькулятор выглядит:
В CSS мы по-разному будет обращаться к нашим элементам.
1. Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор. Это например: body в нашем коде
2. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов.
Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.
Благодаря добавлению градиентов, фоновых цветов и закруглённых углов, свойства фона и границ, калькулятор приобретает красивый вид
Весь код по ссылке: посмотреть
Мы напоминаем, что сейчас ведется активный набор на годовое обучение для вашего ребенка и с хорошими скидками, переходите на сайт и оставляйте заявку https://annaschoolprog.ru/
Группа в ВК: https://vk.com/annaschoolprog
Номер для связи: 8 (993) 940-90-96
#программирование #annaschoolprog #web_дизайн