ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 11.01.2024
Просмотров: 47
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Оглавление
Тема 1: Знакомство с HTML, структура HTML-документа ......................................................... 4
Практическая работа №1.1 ............................................................................................................. 6
Тема 2: Разметка текста....................................................................................................................... 7
Практическая работа №2.1 ............................................................................................................. 8
Практическая работа №2.2 ........................................................................................................... 10
Практическая работа №2.3 ........................................................................................................... 12
Практическая работа №2.4 ........................................................................................................... 13
Проверка знаний ............................................................................................................................. 14
Тема 3: Ссылки и изображения ........................................................................................................ 15
Практическая работа №3.1 ........................................................................................................... 16
Практическая работа №3.2 ........................................................................................................... 17
Проверка знаний ............................................................................................................................. 18
Итоговая практическая работа №1 ............................................................................................. 19
Тема 4: Таблицы ................................................................................................................................. 25
Практическая работа №4.1 ........................................................................................................... 25
Практическая работа №4.2 ........................................................................................................... 27
Проверка знаний ............................................................................................................................. 28
Тема 5: Формы ..................................................................................................................................... 29
Практическая работа №5.1 ........................................................................................................... 30
Практическая работа №5.2 ........................................................................................................... 32
Практическая работа №5.3 ........................................................................................................... 33
Проверка знаний ............................................................................................................................. 33
Итоговая практическая работа №2 ............................................................................................. 34
Дополнение ....................................................................................................................................... 36
Тема 6: Знакомство с CSS .................................................................................................................. 37
Практическая работа №6.1 ........................................................................................................... 37
Практическая работа №6.2 ........................................................................................................... 39
Проверка знаний ............................................................................................................................. 39
Тема 7: Селекторы, псевдоклассы и псевдоэлементы ................................................................. 40
Практическая работа №7.1 ........................................................................................................... 40
Практическая работа №7.2 ........................................................................................................... 42
Практическая работа №7.3 ........................................................................................................... 43
Практическая работа №7.4 ........................................................................................................... 45
Практическая работа №7.5 ........................................................................................................... 46
Проверка знаний ............................................................................................................................. 47
Тема 8: Оформление текста .............................................................................................................. 49
Практическая работа №8.1 ........................................................................................................... 50
Практическая работа №8.2 ........................................................................................................... 52
Проверка знаний ............................................................................................................................. 52
Тема 9: Рамки и фоны ........................................................................................................................ 54
Практическая работа №9.1 ........................................................................................................... 54
Практическая работа №9.2 ........................................................................................................... 56
Практическая работа №9.3 ........................................................................................................... 58
Проверка знаний ............................................................................................................................. 59
Тема 10: Блочная модель документа............................................................................................... 60
Практическая работа №10.1 ......................................................................................................... 61
Практическая работа №10.2 ......................................................................................................... 65
Проверка знаний ............................................................................................................................. 67
Тема 11: Позиционирование ............................................................................................................. 68
Практическая работа №11.1 ......................................................................................................... 69
Практическая работа №11.2 ......................................................................................................... 71
Проверка знаний ............................................................................................................................. 72
Итоговая практическая работа №3 ............................................................................................. 74
Тема 12: Оформление изображений ................................................................................................ 76
Проверка знаний ............................................................................................................................. 76
Тема 13: Оформление форм .............................................................................................................. 77
Практическая работа №13.1 ......................................................................................................... 77
Практическая работа №13.2 ......................................................................................................... 80
Проверка знаний ............................................................................................................................. 81
Тема 14: Создание меню .................................................................................................................... 82
Практическая работа №15.1 ......................................................................................................... 82
Практическая работа №15.2 ......................................................................................................... 82
Практическая работа №15.3 ......................................................................................................... 82
Проверка знаний ............................................................................................................................. 82
Тема 15: Анимация и плавные переходы ....................................................................................... 83
Практическая работа №16.1 ......................................................................................................... 83
Практическая работа №16.2 ......................................................................................................... 83
Практическая работа №16.3 ......................................................................................................... 83
Проверка знаний ............................................................................................................................. 83
Тема 16: Адаптивная вёрстка ........................................................................................................... 84
Практическая работа №17.1 ......................................................................................................... 84
Практическая работа №17.2 ......................................................................................................... 84
Практическая работа №17.3 ......................................................................................................... 84
Проверка знаний ............................................................................................................................. 84
Итоговая практическая работа №4 ............................................................................................. 84
Тема 1: Знакомство с HTML, структура HTML-документа
Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language,
HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании
(именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.
Структура документов для вёрстки обычно имеет вид, показанный на рисунке 1. Папка «CSS» будет содержать в себе файл(ы) с формальным языком описания стилей (каскадная таблица стилей). Описание папки и содержание файла(-ов) мы рассмотрим позже.
В папке «IMG» будут лежать файлы изображений форматов: jpg (jpeg), png, bmp и пр. Содержание папки «SCRIPTS» говорит само за себя, там будут скриптовые файлы JavaScript.
В дальнейшем мы будем работать с файлом index.html.
Рисунок 1 – Файл «index.html» и сопровождающие папки.
Ниже представлены теги, которые необходимо включать в документ.
Теперь рассмотрим, что означает каждый тег:
1.
- позволяет браузеру определить тип документа, в данном случае мы указали, что тип документа стандарта html5.
2.
- заключающий тег-контейнер в котором будут содержаться все необходимые для работы теги, такие как «head» и «body». Тег не является обязательным, но рекомендуем для написания.
3.
- предназначен для хранения других элементов, цель которых помочь браузеру в работе с данными. Также внутри контейнера находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
4.
5.
определяет метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Допускается использование нескольких метатегов. Атрибуты:
5.1. charset - Задаёт кодировку документа
5.2. content - Устанавливает значение атрибута, заданного с помощью name или http-equiv.
5.3. http-equiv - Предназначен для конвертирования метатега в заголовок
HTTP.
5.4. name -
Имя метатега, также косвенно устанавливает его предназначение.
6.
- предназначен для хранения контента, отображаемого в браузере.
Если в контентную область написать текст, то он отобразится в браузере
(смотрите рисунок 2).
Рисунок 2 – Пример отображения текста в заголовке и контенте.
Внимание!!!
Если текст отображается не корректно, то проверьте правильно ли у вас написана кодировка, а также в какой кодировке сохранен сам html файл.
Необходимо использовать стандартную кодировку utf-8.
- Добавляет комментарий в код документа. Текст комментария не отображается на странице и предназначен для пояснения кода или для технических целей. Разрешается внутрь комментария добавлять другие элементы, при этом недопустимо один комментарий вкладывать внутрь другого.
Практическая работа №1.1
Создайте структуру файлов. Напишите все необходимые теги. Напишите текст, который отобразиться в главном окне браузера. Закомментируйте его. С помощью инспектора браузера (Chrome – F12, Mozilla Firefox, Opera – ctrl+shift+I) проверьте структуру вашего документа.
Тема 2: Разметка текста
… - шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, элемент
представляет собой наиболее важный заголовок первого уровня, а служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
- Определяет текстовый абзац. Элемент является блочным, всегда начинается с новой строки.
- устанавливает перевод строки в том месте, где он находится. В отличие от элемента
, использование не добавляет пустой отступ перед строкой.
Для выделения текста в html существуют парные теги:
- Устанавливает жирное начертание шрифта. Допустимо использовать этот элемент совместно с другими, которые определяют начертание текста.
-
Устанавливает курсивное начертание шрифта. Допустимо использовать этот элемент совместно с другими, которые определяют начертание текста.
- Используется для разметки текста, который должен отличаться стилистически от обычного текста. К примеру, так можно помечать ошибки в тексте, собственные имена, иностранные слова. Текст в выделяется подчёркиванием.
- предназначен для выделения важного текста. Браузеры отображают такой текст жирным начертанием.
- предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Практическая работа №2.1
Запишите текст в html файл и проверьте как он отобразился в браузере.
Также инструментами HTML можно выделять цитаты:
- предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.
- используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
- представляет название произведения (книги, статьи, поэмы, сценария, фильма, песни, оперы, игры и др.). Это может быть произведение, на которое ссылаются в цитате, или просто работа, упоминаемая вскользь. Браузеры обычно выделяют текст внутри курсивом. не используется для разметки людей, даже если они имеют непосредственное отношение к упомянутому произведению.
Также в HTML есть теги для создания верхних и нижних индексов:
- отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
- отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Практическая работа №2.2
Применим на практике теги, которые мы изучили и посмотрим, как они будут выглядеть в браузере.
В html также можно создать списки.
- устанавливает нумерованный (упорядоченный) список. Каждый элемент списка должен начинаться с . Если к применяется таблица стилей, то элементы - наследуют эти свойства. У этого тега есть также атрибуты:
1) reversed - нумерация в списке становится по убыванию (3,2,1).
2) start - задаёт число, с которого будет начинаться нумерованный список.
- устанавливает маркированный (неупорядоченный) список. Каждый пункт списка должен начинаться с элемента
- .
- определяет отдельный пункт списка.
Также в html есть теги для работы с элементами списка (возможно с этими тегами работать и в других местах документа):
- помечает текст как выделенный. В браузере фоновый цвет текста внутри выделяется жёлтым цветом.
как перечёркнутый.
- предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
Для тегов и есть атрибуты:
1) cite - указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
2) datetime - дата и время редактирования текста.
Практическая работа №2.3
Попробуем сделать списки с разными пометками, а также вложенные подпункты:
входит в тройку элементов , - ,
- , предназначенных для создания списка описаний. Каждый такой список начинается с контейнера
, куда входит элемент -
создающий термин и элемент задающий описание этого термина.
Практическая работа №2.4
Дадим описание двум форматам – JPEG и BMP:
Проверка знаний
Используя изученные теги, реализуйте такую структуру:
Тема 3: Ссылки и изображения
- является одним из важных в HTML и предназначен для создания ссылок. Для этого необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа, на который происходит переход.
Адрес ссылки может быть абсолютным и относительным.
У тега есть атрибуты:
1) href - Задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.
2) target – Задаёт поведение ссылки при клике на неё.
Внимание!!!
В XHTML применение этого атрибута запрещено.
Атрибут target может принимать 4 значения:
_blank - Загружает страницу в новую вкладку браузера.
_self - Загружает страницу в текущую вкладку.
_parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.
По умолчанию ссылка имеет параметр _self.
По поводу фреймов читать - https://webref.ru/html/type/frame
- задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в
Практическая работа №3.1
Сделаем небольшое меню с помощью html:
- предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив в контейнер .
У есть 2 обязательных атрибута:
1)
src - адрес графического файла, который будет отображаться на веб- странице. Наиболее популярны файлы в формате PNG и JPEG.
2)
alt (обязательный атрибут) - устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также поисковыми системами или экранными ридерами, читающими текст с экрана для слабовидящих людей.
Практическая работа №3.2
Проверка знаний
Инструментами HTML сделайте (можно использовать любое изображение):
Итоговая практическая работа №1
Сделайте структуру html средствами тегов изученных раньше.
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Вариант 6
Вариант 7
Вариант 8
Вариант 9
Вариант 10
Вариант 11
Вариант 12
Вариант 13
Вариант 14
Вариант 15
Тема 4: Таблицы
- служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов и .
- служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки устанавливается с помощью элемента или
.
- предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Элемент
должен размещаться внутри контейнера
, который в свою очередь располагается внутри .
- Предназначен для создания одной ячейки таблицы. Элемент
должен размещаться внутри контейнера
, который в свою очередь располагается внутри .
- предназначен для хранения одной или нескольких строк таблицы.
Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
.
Практическая работа №4.1
Попробуем создать простую таблицу.
Заметим, что когда мы посмотрим таблицу в браузере, то не будет видно рамок, попробуем их сделать. Также увеличим размер шрифта подписи таблицы.
!!!Важно данный способ подключение стилей возможен, но в дальнейшем не рекомендуется.
Изучим атрибуты для объединения ячеек по строкам и столбцам:
colspan - устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
rowspan - устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Практическая работа №4.2
Сделаем более сложную по структуре таблицу с применением атрибутов объединения. А также применим стили из прошлой работы.
Проверка знаний
Самостоятельно сверстайте таблицу по образцу.
Тема 5: Формы
- устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером.
Атрибуты формы:
accept-charset - устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action - адрес программы или документа, который обрабатывает данные формы.
autocomplete - включает автозаполнение полей формы.
enctype - способ кодирования данных формы.
method - метод протокола HTTP.
name - имя формы.
novalidate - отменяет встроенную проверку данных формы на корректность ввода.
target - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
- предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных, например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.
- применяется для создания заголовка группы элементов формы, которая определяется с помощью
Практическая работа №5.1
Напишем простую форму
- устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы.
- является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Атрибуты тэга :
accept - устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
autocomplete - включает или отключает автозаполнение.
autofocus - устанавливает фокус в поле формы.
checked - предварительно активированный переключатель или флажок.
disabled - блокирует доступ и изменение элемента.
max - верхнее значение для ввода числа или даты.
maxlength - максимальное количество символов разрешённых в тексте.
min - нижнее значение для ввода числа или даты.
minlength - минимальное количество символов разрешённых в тексте.
name - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern - устанавливает шаблон ввода.
placeholder - выводит подсказывающий текст.
readonly - устанавливает, что поле не может изменяться пользователем.
required - обязательное для заполнения поле.
size - ширина текстового поля.
step - шаг приращения для числовых полей.
type - сообщает браузеру, к какому типу относится элемент формы.
value - значение элемента.
У атрибута type есть много значений, которые помогают определить какую информацию сможет вводить пользователь:
button - кнопка.
checkbox - флажки. Позволяют выбрать более одного варианта из предложенных.
file - поле для ввода имени файла, который пересылается на сервер.
hidden - скрытое поле. Оно никак не отображается на веб-странице.
image - поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password - обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio - переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset - кнопка для возвращения данных формы в первоначальное значение.
submit - кнопка для отправки данных формы на сервер.
text - текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
Также в HTML5 появились новые значения, но не во всех браузерах они работают корректно - https://webref.ru/html/input/type
Практическая работа №5.2
В данном примере рассмотрено применение атрибутов и подписей полей:
- позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования атрибута size, который устанавливает высоту списка.
Ширина списка определяется самым широким текстом, указанным в элементе
размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.
Практическая работа №5.3
Сделаем не большой опрос с мультивыбором и текстовым полем ввода
Проверка знаний
Теперь самостоятельно сделайте форму ввода для регистрации пользователя, где должны быть включены поля:
1) ФИО (обязательно для заполнения).
2) Логин (обязательно для заполнения).
3) Пароль (обязательно для заполнения).
4) Подтверждение пароля (обязательно для заполнения).
5) Адрес электронной почты (обязательно для заполнения).
6) Номер телефона.
7) Адрес.
8) Пол.
9) Выбор цвета интерфейса (красный, синий, желтый, зеленый, черный, белый).
10)
О себе.
Сделать кнопку отправки данных и очистки формы. Не забудьте сделать подписи для полей и пример заполнения полей.
Итоговая практическая работа №2
При выполнении практической работы не забывайте про обязательные поля для заполнения, подписи полей, подсказки заполнения, а также типы полей.
Вариант 1
Создайте прайс-лист пиццерии (с составом пиццы), а также форму заказа со всеми необходимыми данными.
Вариант 2
Создайте каталог книг для библиотеки и форму для карточки читателя со всеми необходимыми данными.
Вариант 3
Создайте прайс-лист для турагентства и форму для обратной связи
(отзывов) со всеми необходимыми данными.
Вариант 4
Создайте прайс-лист такси по районам и форму для заказа такси со всеми необходимыми данными.
Вариант 5
Создайте форму для юридической заявки на долю имущества со всеми необходимыми данными и ниже покажите образец заполнения.
Вариант 6
Создайте прайс-лист экскурсий по достопримечательностям города и музеям, а также форму для записи на экскурсии со всеми необходимыми данными.
Вариант 7
Создайте форму для заполнения данных ЖКУ со всеми необходимыми данными и ниже покажите образец квитанции.
Вариант 8
Создайте форму для регистрации юридического лица со всеми необходимыми данными и ниже покажите образец заявки.
Вариант 9
Создайте прайс-лист для риэлтерского агентства и форму для обратной связи (отзывов) со всеми необходимыми данными.
Вариант 10
Создайте форму для налоговой отчетности со всеми необходимыми данными и образец отчета.
Вариант 11
Создайте форму для регистрации ребенка в детский сад и покажите
(таблицей) расположение спальных мест в спальной комнате.
Вариант 12
Создайте таблицу с данными для кредитования и форму для заявки на кредит.
Вариант 13
Создайте форму для заявки на смену паспорта и ниже покажите образец заполнения рукописной заявки.
Вариант 14
Создайте прайс-лист авиакомпании (международной) и форму для оформления билета.
Вариант 15
Создайте форму для оформления заявки в ЗАГС со всеми необходимыми данными и ниже сделайте образец для письменной формы обращения.
Дополнение
В разделах указаны лишь основные теги, а также атрибуты. Для того, чтобы посмотреть всё, что имеется для разработки смотрите - https://webref.ru/html
, но не забывайте отключить галочки осуждаемых и нестандартных тегов.
Также имеется наглядный ресурс (на английском языке), на котором также можно ознакомиться с тегами - http://htmlreference.io
Тема 6: Знакомство с CSS
Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере.
Ранее при работе с таблицами мы уже применяли CSS, но теперь нужно определить понятия, которыми нам нужно оперировать, для примера возьмем такой код:
/*Это комментарий, который игнорируется при обработке*/ p
{ width: 80%; margin: 0 auto; background: red;
}
Где: p – это селектор (подробнее будут рассмотрены в главе 7), позволяют осуществлять выборку необходимых нам элементов HTML. width и margin – это свойство, которое определяет какой именно параметр мы хотим изменить.
80% и 0 auto – это значения свойств. Некоторые свойства требуют на ввод несколько значений.
Практическая работа №6.1
Попробуем посмотреть, что получится при применении этих свойств. Для этого запишем код в html файл в таком виде. Текст будет иметь боковые внешние отступы, располагаться по центру с красным фоном.
Теперь пора познакомиться со способами применения CSS свойств:
1)
Вам уже знакомый способ с помощью тега стилей -
Практическая работа №6.2
Не изменяя текст HTML перенесите селектор со значениями в отдельный файл.
Проверка знаний
Приведите пример, где подключение через атрибут style напрямую покажет свою неэффективность.
Тема 7: Селекторы, псевдоклассы и псевдоэлементы
* - селектор всех элементов.
section – селектор всех тегов с таким именем.
#id – селектор элемента с данным id.
.class – селектор элементов с таким классом.
[attribute=”value”] – селектор по атрибуту (значения атрибута).
:visited – это псевдокласс, куда могут быть записаны разные условия элемента.
Селекторы можно комбинировать, записывая последовательно, без пробела.
.class1.class2 – селектор для элементов с одновременно двумя классами. a#id:visited – элемент тега с данным id и псевдоклассом :visited.
Также важно для селекторов важно знать отношения: section p – элементы
, являющиеся потомками section. section > p – только непосредственные потомки section. section p – все на том же уровне вложенности, которые идут после section. section + p – первый на том же уровне вложенности, который идет сразу после section.
Практическая работа №7.1
Давайте разберемся на примере с селекторами, которые мы рассмотрели.
Существуют псевдоклассы для указания его места среди соседей.
:first-child – первый потомок своего родителя.
:last-child – последний потомок своего родителя.
:only-child – единственный потомок своего родителя, соседних элементов нет.
:nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.
:nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число. Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.
:nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
:nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.
:nth-last-child(a), :nth-last-child(an+b) – то же самое, но отсчёт начинается с конца, например :nth-last-child(2) – второй элемент с конца.
Практическая работа №7.2
Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:
:first-of-type
:last-of-type
:only-of-type
:nth-of-type
:nth-last-of-type
Они имеют в точности тот же смысл, что и обычные :first-child, :last-child и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.
Практическая работа №7.3
Пример использования для раскраски списка DT «через один» и предпоследнего DD:
Теперь рассмотрим селекторы атрибутов.
На атрибут целиком:
[attr] – атрибут установлен,
[attr="val"] – атрибут равен val.
На начало атрибута:
[attr^="val"] – атрибут начинается с val, например "value".
[attr|="val"] – атрибут равен val или начинается с val-, например равен "val-
1".
На содержание:
[attr*="val"] – атрибут содержит подстроку val, например равен "myvalue".
[attr="val"] – атрибут содержит val как одно из значений через пробел.
Например: [attr="delete"] верно для "edit delete" и неверно для "undelete" или "no-delete".
На конец атрибута:
[attr$="val"] – атрибут заканчивается на val, например равен "myval".
Практическая работа №7.4
Еще существуют такие псевдоклассы:
:not(селектор) – все, кроме подходящих под селектор.
:focus – в фокусе.
:hover – под мышью.
:empty – без детей (даже без текстовых).
:checked, :disabled, :enabled – состояния INPUT.
:target – этот фильтр сработает для элемента, ID которого совпадает с анкором #... текущего URL.
Например, если на странице есть элемент с id="intro", то правило :target { color: red } подсветит его в том случае, если текущий URL имеет вид http://...#intro
«Псевдоэлементы» – различные вспомогательные элементы, которые браузер записывает или может записать в документ.
При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента.
Практическая работа №7.5
Теперь попробуем посмотреть на практике как работают изученные выше псевдоклассы и псевдоэлементы.
Проверка знаний
Вам дан исходный код HTML и CSS (без селекторов)
Приведите страницу в соответствие со скриншотом, написав нужные селекторы.
Тема 8: Оформление текста
Нужно понимать, что мы можем с помощью CSS изменить или задать любой параметр текста (будь то символ, слово, абзац). Параметров очень много, поэтому мы ознакомимся с основными.
В первую очередь мы можем использовать не стандартные шрифты и для этого используется правило @font-face, также позволяющее задать набор общих правил для текста.
Разберем несколько свойств:
font-family - устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Comic Sans MS, оно должно заключаться в одинарные или двойные кавычки.
font-size - определяет размер шрифта элемента.
font-style - определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
text-decoration - добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
font-weight - устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов
(по умолчанию 400 или normal).
text-align - определяет горизонтальное выравнивание текста в пределах элемента.
Практическая работа №8.1
Применим изученные свойства на практике.
white-space - устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент
, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу
, но в отличие от него не меняет шрифт на моноширинный. letter-spacing - определяет интервал между символами в пределах элемента.
Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
word-spacing - Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.
line-height - Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде ) свойство line- height не оказывает никакого эффекта. Для остальных строчных элементов line- height задаёт высоту, которая используется для расчёта высоты строки блока. text-overflow - Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text- overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.
text-shadow - Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.
О других свойствах и более подробно о выше сказанных смотрите https://webref.ru/css/type/text
Практическая работа №8.2
Структуру html возьмите из прошлого примера, а для стилей напишите.
Проверка знаний
У вас в распоряжении есть HTML документ, каскадная таблица стилей с потерянными или побитыми свойствами и параметрами, а также скриншот.
Восстановите потерянные свойства и параметры.
Тема 9: Рамки и фоны
Вначале давайте познакомимся с основными свойствами для работы с рамками: border - позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right (а также border-top- left, border-top-right, border-bottom-left, border-bottom-right). border объединяет в себе 3 свойства, давайте рассмотрим их подробнее: border-width - задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений. border-style - устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента. border-color - устанавливает цвет границы на разных сторонах элемента.
Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
Практическая работа №9.1
Попробуем сделать рамки через свойство border, а также отдельно через каждой свойство.
border-radius - устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. border-image - используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой. box-shadow - добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
Практическая работа №9.2
Теперь попрактикуемся с новыми свойствами. Прошу обратить внимание на свойство border-image, путь к рамке указывается относительно CSS файла. Файл для рамки вы можете найти в папке img.
background - позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно: background-image - устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую. background-position - задаёт начальное положение фонового изображения, установленного с помощью свойства background-image. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую. background-size - масштабирует фоновое изображение согласно заданным размерам. Значения могут быть: размером (пиксели, проценты, em и др.), auto, cover, contain. background-repeat
- определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую. background-attachment - устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую. background-origin - определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.
background-clip - определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах. Значения могут быть: padding-box, border-box, content-box, text. background-color - Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным (transparent), цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
Практическая работа №9.3
Все используемые изображения вы можете найти в папке “img”.
Проверка знаний
Придумайте 3 блока с разными типами фонов. Также сделайте главный фон
(прокручиваемый) с повторением по оси ординат. К каждому блоку сделайте разный вид рамок и по желанию наложите тень.
Тема 10: Блочная модель документа
Все сайты можно разбить на блоки, которые в свою очередь могут состоять из блоков поменьше. Каждый блок подразумевает под собой начало с новой строки и при закрытии переход на новую строку. Вся блочная структура делается в файле HTML, а затем при помощи CSS определяется, как блоки будут отображаться, какие у них будут размеры и т.д. Почти каждый тег из себя изначально представляет блок, но по стандартам W3C есть определенные теги для блочной структуры, например вы уже ранее встречали тег , который является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class (подразумевает под собой объединение элементов со схожими свойствами) или id (назначается элементу с уникальными свойствами) с именем класса или идентификатора соответственно.
Но есть теги для блоков стандарта HTML5:
1 2 3
... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
- Определяет текстовый абзац. Элемент является блочным, всегда начинается с новой строки.
- устанавливает перевод строки в том месте, где он находится. В отличие от элемента
, использование не добавляет пустой отступ перед строкой.
Для выделения текста в html существуют парные теги:
- Устанавливает жирное начертание шрифта. Допустимо использовать этот элемент совместно с другими, которые определяют начертание текста.
-
Устанавливает курсивное начертание шрифта. Допустимо использовать этот элемент совместно с другими, которые определяют начертание текста.
- Используется для разметки текста, который должен отличаться стилистически от обычного текста. К примеру, так можно помечать ошибки в тексте, собственные имена, иностранные слова. Текст в выделяется подчёркиванием.
- предназначен для выделения важного текста. Браузеры отображают такой текст жирным начертанием.
- предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Практическая работа №2.1
Запишите текст в html файл и проверьте как он отобразился в браузере.
Также инструментами HTML можно выделять цитаты:
- предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.
- используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
- представляет название произведения (книги, статьи, поэмы, сценария, фильма, песни, оперы, игры и др.). Это может быть произведение, на которое ссылаются в цитате, или просто работа, упоминаемая вскользь. Браузеры обычно выделяют текст внутри курсивом. не используется для разметки людей, даже если они имеют непосредственное отношение к упомянутому произведению.
Также в HTML есть теги для создания верхних и нижних индексов:
- отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
- отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Практическая работа №2.2
Применим на практике теги, которые мы изучили и посмотрим, как они будут выглядеть в браузере.
В html также можно создать списки.
- устанавливает нумерованный (упорядоченный) список. Каждый элемент списка должен начинаться с . Если к применяется таблица стилей, то элементы - наследуют эти свойства. У этого тега есть также атрибуты:
1) reversed - нумерация в списке становится по убыванию (3,2,1).
2) start - задаёт число, с которого будет начинаться нумерованный список.
- устанавливает маркированный (неупорядоченный) список. Каждый пункт списка должен начинаться с элемента
- .
- определяет отдельный пункт списка.
Также в html есть теги для работы с элементами списка (возможно с этими тегами работать и в других местах документа):
- помечает текст как выделенный. В браузере фоновый цвет текста внутри выделяется жёлтым цветом.
как перечёркнутый.
- предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
Для тегов и есть атрибуты:
1) cite - указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
2) datetime - дата и время редактирования текста.
Практическая работа №2.3
Попробуем сделать списки с разными пометками, а также вложенные подпункты:
входит в тройку элементов , - ,
- , предназначенных для создания списка описаний. Каждый такой список начинается с контейнера
, куда входит элемент -
создающий термин и элемент задающий описание этого термина.
Практическая работа №2.4
Дадим описание двум форматам – JPEG и BMP:
Проверка знаний
Используя изученные теги, реализуйте такую структуру:
Тема 3: Ссылки и изображения
- является одним из важных в HTML и предназначен для создания ссылок. Для этого необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа, на который происходит переход.
Адрес ссылки может быть абсолютным и относительным.
У тега есть атрибуты:
1) href - Задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.
2) target – Задаёт поведение ссылки при клике на неё.
Внимание!!!
В XHTML применение этого атрибута запрещено.
Атрибут target может принимать 4 значения:
_blank - Загружает страницу в новую вкладку браузера.
_self - Загружает страницу в текущую вкладку.
_parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.
По умолчанию ссылка имеет параметр _self.
По поводу фреймов читать - https://webref.ru/html/type/frame
- задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в
Практическая работа №3.1
Сделаем небольшое меню с помощью html:
- предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив в контейнер .
У есть 2 обязательных атрибута:
1)
src - адрес графического файла, который будет отображаться на веб- странице. Наиболее популярны файлы в формате PNG и JPEG.
2)
alt (обязательный атрибут) - устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также поисковыми системами или экранными ридерами, читающими текст с экрана для слабовидящих людей.
Практическая работа №3.2
Проверка знаний
Инструментами HTML сделайте (можно использовать любое изображение):
Итоговая практическая работа №1
Сделайте структуру html средствами тегов изученных раньше.
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Вариант 6
Вариант 7
Вариант 8
Вариант 9
Вариант 10
Вариант 11
Вариант 12
Вариант 13
Вариант 14
Вариант 15
Тема 4: Таблицы
- служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов и .
- служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки устанавливается с помощью элемента или
.
- предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Элемент
должен размещаться внутри контейнера
, который в свою очередь располагается внутри .
- Предназначен для создания одной ячейки таблицы. Элемент
должен размещаться внутри контейнера
, который в свою очередь располагается внутри .
- предназначен для хранения одной или нескольких строк таблицы.
Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
.
Практическая работа №4.1
Попробуем создать простую таблицу.
Заметим, что когда мы посмотрим таблицу в браузере, то не будет видно рамок, попробуем их сделать. Также увеличим размер шрифта подписи таблицы.
!!!Важно данный способ подключение стилей возможен, но в дальнейшем не рекомендуется.
Изучим атрибуты для объединения ячеек по строкам и столбцам:
colspan - устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
rowspan - устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Практическая работа №4.2
Сделаем более сложную по структуре таблицу с применением атрибутов объединения. А также применим стили из прошлой работы.
Проверка знаний
Самостоятельно сверстайте таблицу по образцу.
Тема 5: Формы
- устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером.
Атрибуты формы:
accept-charset - устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action - адрес программы или документа, который обрабатывает данные формы.
autocomplete - включает автозаполнение полей формы.
enctype - способ кодирования данных формы.
method - метод протокола HTTP.
name - имя формы.
novalidate - отменяет встроенную проверку данных формы на корректность ввода.
target - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
- предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных, например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.
- применяется для создания заголовка группы элементов формы, которая определяется с помощью
Практическая работа №5.1
Напишем простую форму
- устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы.
- является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Атрибуты тэга :
accept - устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
autocomplete - включает или отключает автозаполнение.
autofocus - устанавливает фокус в поле формы.
checked - предварительно активированный переключатель или флажок.
disabled - блокирует доступ и изменение элемента.
max - верхнее значение для ввода числа или даты.
maxlength - максимальное количество символов разрешённых в тексте.
min - нижнее значение для ввода числа или даты.
minlength - минимальное количество символов разрешённых в тексте.
name - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern - устанавливает шаблон ввода.
placeholder - выводит подсказывающий текст.
readonly - устанавливает, что поле не может изменяться пользователем.
required - обязательное для заполнения поле.
size - ширина текстового поля.
step - шаг приращения для числовых полей.
type - сообщает браузеру, к какому типу относится элемент формы.
value - значение элемента.
У атрибута type есть много значений, которые помогают определить какую информацию сможет вводить пользователь:
button - кнопка.
checkbox - флажки. Позволяют выбрать более одного варианта из предложенных.
file - поле для ввода имени файла, который пересылается на сервер.
hidden - скрытое поле. Оно никак не отображается на веб-странице.
image - поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password - обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio - переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset - кнопка для возвращения данных формы в первоначальное значение.
submit - кнопка для отправки данных формы на сервер.
text - текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
Также в HTML5 появились новые значения, но не во всех браузерах они работают корректно - https://webref.ru/html/input/type
Практическая работа №5.2
В данном примере рассмотрено применение атрибутов и подписей полей:
- позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования атрибута size, который устанавливает высоту списка.
Ширина списка определяется самым широким текстом, указанным в элементе
размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.
Практическая работа №5.3
Сделаем не большой опрос с мультивыбором и текстовым полем ввода
Проверка знаний
Теперь самостоятельно сделайте форму ввода для регистрации пользователя, где должны быть включены поля:
1) ФИО (обязательно для заполнения).
2) Логин (обязательно для заполнения).
3) Пароль (обязательно для заполнения).
4) Подтверждение пароля (обязательно для заполнения).
5) Адрес электронной почты (обязательно для заполнения).
6) Номер телефона.
7) Адрес.
8) Пол.
9) Выбор цвета интерфейса (красный, синий, желтый, зеленый, черный, белый).
10)
О себе.
Сделать кнопку отправки данных и очистки формы. Не забудьте сделать подписи для полей и пример заполнения полей.
Итоговая практическая работа №2
При выполнении практической работы не забывайте про обязательные поля для заполнения, подписи полей, подсказки заполнения, а также типы полей.
Вариант 1
Создайте прайс-лист пиццерии (с составом пиццы), а также форму заказа со всеми необходимыми данными.
Вариант 2
Создайте каталог книг для библиотеки и форму для карточки читателя со всеми необходимыми данными.
Вариант 3
Создайте прайс-лист для турагентства и форму для обратной связи
(отзывов) со всеми необходимыми данными.
Вариант 4
Создайте прайс-лист такси по районам и форму для заказа такси со всеми необходимыми данными.
Вариант 5
Создайте форму для юридической заявки на долю имущества со всеми необходимыми данными и ниже покажите образец заполнения.
Вариант 6
Создайте прайс-лист экскурсий по достопримечательностям города и музеям, а также форму для записи на экскурсии со всеми необходимыми данными.
Вариант 7
Создайте форму для заполнения данных ЖКУ со всеми необходимыми данными и ниже покажите образец квитанции.
Вариант 8
Создайте форму для регистрации юридического лица со всеми необходимыми данными и ниже покажите образец заявки.
Вариант 9
Создайте прайс-лист для риэлтерского агентства и форму для обратной связи (отзывов) со всеми необходимыми данными.
Вариант 10
Создайте форму для налоговой отчетности со всеми необходимыми данными и образец отчета.
Вариант 11
Создайте форму для регистрации ребенка в детский сад и покажите
(таблицей) расположение спальных мест в спальной комнате.
Вариант 12
Создайте таблицу с данными для кредитования и форму для заявки на кредит.
Вариант 13
Создайте форму для заявки на смену паспорта и ниже покажите образец заполнения рукописной заявки.
Вариант 14
Создайте прайс-лист авиакомпании (международной) и форму для оформления билета.
Вариант 15
Создайте форму для оформления заявки в ЗАГС со всеми необходимыми данными и ниже сделайте образец для письменной формы обращения.
Дополнение
В разделах указаны лишь основные теги, а также атрибуты. Для того, чтобы посмотреть всё, что имеется для разработки смотрите - https://webref.ru/html
, но не забывайте отключить галочки осуждаемых и нестандартных тегов.
Также имеется наглядный ресурс (на английском языке), на котором также можно ознакомиться с тегами - http://htmlreference.io
Тема 6: Знакомство с CSS
Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере.
Ранее при работе с таблицами мы уже применяли CSS, но теперь нужно определить понятия, которыми нам нужно оперировать, для примера возьмем такой код:
/*Это комментарий, который игнорируется при обработке*/ p
{ width: 80%; margin: 0 auto; background: red;
}
Где: p – это селектор (подробнее будут рассмотрены в главе 7), позволяют осуществлять выборку необходимых нам элементов HTML. width и margin – это свойство, которое определяет какой именно параметр мы хотим изменить.
80% и 0 auto – это значения свойств. Некоторые свойства требуют на ввод несколько значений.
Практическая работа №6.1
Попробуем посмотреть, что получится при применении этих свойств. Для этого запишем код в html файл в таком виде. Текст будет иметь боковые внешние отступы, располагаться по центру с красным фоном.
Теперь пора познакомиться со способами применения CSS свойств:
1)
Вам уже знакомый способ с помощью тега стилей -
Практическая работа №6.2
Не изменяя текст HTML перенесите селектор со значениями в отдельный файл.
Проверка знаний
Приведите пример, где подключение через атрибут style напрямую покажет свою неэффективность.
Тема 7: Селекторы, псевдоклассы и псевдоэлементы
* - селектор всех элементов.
section – селектор всех тегов с таким именем.
#id – селектор элемента с данным id.
.class – селектор элементов с таким классом.
[attribute=”value”] – селектор по атрибуту (значения атрибута).
:visited – это псевдокласс, куда могут быть записаны разные условия элемента.
Селекторы можно комбинировать, записывая последовательно, без пробела.
.class1.class2 – селектор для элементов с одновременно двумя классами. a#id:visited – элемент тега с данным id и псевдоклассом :visited.
Также важно для селекторов важно знать отношения: section p – элементы
, являющиеся потомками section. section > p – только непосредственные потомки section. section p – все на том же уровне вложенности, которые идут после section. section + p – первый на том же уровне вложенности, который идет сразу после section.
Практическая работа №7.1
Давайте разберемся на примере с селекторами, которые мы рассмотрели.
Существуют псевдоклассы для указания его места среди соседей.
:first-child – первый потомок своего родителя.
:last-child – последний потомок своего родителя.
:only-child – единственный потомок своего родителя, соседних элементов нет.
:nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.
:nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число. Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.
:nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
:nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.
:nth-last-child(a), :nth-last-child(an+b) – то же самое, но отсчёт начинается с конца, например :nth-last-child(2) – второй элемент с конца.
Практическая работа №7.2
Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:
:first-of-type
:last-of-type
:only-of-type
:nth-of-type
:nth-last-of-type
Они имеют в точности тот же смысл, что и обычные :first-child, :last-child и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.
Практическая работа №7.3
Пример использования для раскраски списка DT «через один» и предпоследнего DD:
Теперь рассмотрим селекторы атрибутов.
На атрибут целиком:
[attr] – атрибут установлен,
[attr="val"] – атрибут равен val.
На начало атрибута:
[attr^="val"] – атрибут начинается с val, например "value".
[attr|="val"] – атрибут равен val или начинается с val-, например равен "val-
1".
На содержание:
[attr*="val"] – атрибут содержит подстроку val, например равен "myvalue".
[attr="val"] – атрибут содержит val как одно из значений через пробел.
Например: [attr="delete"] верно для "edit delete" и неверно для "undelete" или "no-delete".
На конец атрибута:
[attr$="val"] – атрибут заканчивается на val, например равен "myval".
Практическая работа №7.4
Еще существуют такие псевдоклассы:
:not(селектор) – все, кроме подходящих под селектор.
:focus – в фокусе.
:hover – под мышью.
:empty – без детей (даже без текстовых).
:checked, :disabled, :enabled – состояния INPUT.
:target – этот фильтр сработает для элемента, ID которого совпадает с анкором #... текущего URL.
Например, если на странице есть элемент с id="intro", то правило :target { color: red } подсветит его в том случае, если текущий URL имеет вид http://...#intro
«Псевдоэлементы» – различные вспомогательные элементы, которые браузер записывает или может записать в документ.
При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента.
Практическая работа №7.5
Теперь попробуем посмотреть на практике как работают изученные выше псевдоклассы и псевдоэлементы.
Проверка знаний
Вам дан исходный код HTML и CSS (без селекторов)
Приведите страницу в соответствие со скриншотом, написав нужные селекторы.
Тема 8: Оформление текста
Нужно понимать, что мы можем с помощью CSS изменить или задать любой параметр текста (будь то символ, слово, абзац). Параметров очень много, поэтому мы ознакомимся с основными.
В первую очередь мы можем использовать не стандартные шрифты и для этого используется правило @font-face, также позволяющее задать набор общих правил для текста.
Разберем несколько свойств:
font-family - устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Comic Sans MS, оно должно заключаться в одинарные или двойные кавычки.
font-size - определяет размер шрифта элемента.
font-style - определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
text-decoration - добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
font-weight - устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов
(по умолчанию 400 или normal).
text-align - определяет горизонтальное выравнивание текста в пределах элемента.
Практическая работа №8.1
Применим изученные свойства на практике.
white-space - устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент
, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу
, но в отличие от него не меняет шрифт на моноширинный. letter-spacing - определяет интервал между символами в пределах элемента.
Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
word-spacing - Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.
line-height - Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде ) свойство line- height не оказывает никакого эффекта. Для остальных строчных элементов line- height задаёт высоту, которая используется для расчёта высоты строки блока. text-overflow - Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text- overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.
text-shadow - Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.
О других свойствах и более подробно о выше сказанных смотрите https://webref.ru/css/type/text
Практическая работа №8.2
Структуру html возьмите из прошлого примера, а для стилей напишите.
Проверка знаний
У вас в распоряжении есть HTML документ, каскадная таблица стилей с потерянными или побитыми свойствами и параметрами, а также скриншот.
Восстановите потерянные свойства и параметры.
Тема 9: Рамки и фоны
Вначале давайте познакомимся с основными свойствами для работы с рамками: border - позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right (а также border-top- left, border-top-right, border-bottom-left, border-bottom-right). border объединяет в себе 3 свойства, давайте рассмотрим их подробнее: border-width - задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений. border-style - устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента. border-color - устанавливает цвет границы на разных сторонах элемента.
Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
Практическая работа №9.1
Попробуем сделать рамки через свойство border, а также отдельно через каждой свойство.
border-radius - устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. border-image - используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой. box-shadow - добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
Практическая работа №9.2
Теперь попрактикуемся с новыми свойствами. Прошу обратить внимание на свойство border-image, путь к рамке указывается относительно CSS файла. Файл для рамки вы можете найти в папке img.
background - позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно: background-image - устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую. background-position - задаёт начальное положение фонового изображения, установленного с помощью свойства background-image. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую. background-size - масштабирует фоновое изображение согласно заданным размерам. Значения могут быть: размером (пиксели, проценты, em и др.), auto, cover, contain. background-repeat
- определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую. background-attachment - устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую. background-origin - определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.
background-clip - определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах. Значения могут быть: padding-box, border-box, content-box, text. background-color - Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным (transparent), цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
Практическая работа №9.3
Все используемые изображения вы можете найти в папке “img”.
Проверка знаний
Придумайте 3 блока с разными типами фонов. Также сделайте главный фон
(прокручиваемый) с повторением по оси ординат. К каждому блоку сделайте разный вид рамок и по желанию наложите тень.
Тема 10: Блочная модель документа
Все сайты можно разбить на блоки, которые в свою очередь могут состоять из блоков поменьше. Каждый блок подразумевает под собой начало с новой строки и при закрытии переход на новую строку. Вся блочная структура делается в файле HTML, а затем при помощи CSS определяется, как блоки будут отображаться, какие у них будут размеры и т.д. Почти каждый тег из себя изначально представляет блок, но по стандартам W3C есть определенные теги для блочной структуры, например вы уже ранее встречали тег , который является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class (подразумевает под собой объединение элементов со схожими свойствами) или id (назначается элементу с уникальными свойствами) с именем класса или идентификатора соответственно.
Но есть теги для блоков стандарта HTML5:
- Определяет текстовый абзац. Элемент является блочным, всегда начинается с новой строки.
- устанавливает перевод строки в том месте, где он находится. В отличие от элемента
, использование не добавляет пустой отступ перед строкой.
Для выделения текста в html существуют парные теги:
- Устанавливает жирное начертание шрифта. Допустимо использовать этот элемент совместно с другими, которые определяют начертание текста.
-
Устанавливает курсивное начертание шрифта. Допустимо использовать этот элемент совместно с другими, которые определяют начертание текста.
- Используется для разметки текста, который должен отличаться стилистически от обычного текста. К примеру, так можно помечать ошибки в тексте, собственные имена, иностранные слова. Текст в выделяется подчёркиванием.
- предназначен для выделения важного текста. Браузеры отображают такой текст жирным начертанием.
- предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Практическая работа №2.1
Запишите текст в html файл и проверьте как он отобразился в браузере.
Также инструментами HTML можно выделять цитаты:
- предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.
- используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
- представляет название произведения (книги, статьи, поэмы, сценария, фильма, песни, оперы, игры и др.). Это может быть произведение, на которое ссылаются в цитате, или просто работа, упоминаемая вскользь. Браузеры обычно выделяют текст внутри курсивом. не используется для разметки людей, даже если они имеют непосредственное отношение к упомянутому произведению.
Также в HTML есть теги для создания верхних и нижних индексов:
- отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
- отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Практическая работа №2.2
Применим на практике теги, которые мы изучили и посмотрим, как они будут выглядеть в браузере.
В html также можно создать списки.
- применяется таблица стилей, то элементы
- наследуют эти свойства. У этого тега есть также атрибуты:
1) reversed - нумерация в списке становится по убыванию (3,2,1).
2) start - задаёт число, с которого будет начинаться нумерованный список. - .
- определяет отдельный пункт списка.
Также в html есть теги для работы с элементами списка (возможно с этими тегами работать и в других местах документа):
- помечает текст как выделенный. В браузере фоновый цвет текста внутри выделяется жёлтым цветом.- используется для выделения текста, который был удалён в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнерекак перечёркнутый.
- предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
Для тегови есть атрибуты:
1) cite - указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
2) datetime - дата и время редактирования текста.
Практическая работа №2.3
Попробуем сделать списки с разными пометками, а также вложенные подпункты:
входит в тройку элементов
- ,
- ,
- , предназначенных для создания списка описаний. Каждый такой список начинается с контейнера
- , куда входит элемент
- создающий термин и элемент задающий описание этого термина.
Практическая работа №2.4
Дадим описание двум форматам – JPEG и BMP:
Проверка знаний
Используя изученные теги, реализуйте такую структуру:
Тема 3: Ссылки и изображения
- является одним из важных в HTML и предназначен для создания ссылок. Для этого необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа, на который происходит переход.
Адрес ссылки может быть абсолютным и относительным.
У тега есть атрибуты:
1) href - Задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.
2) target – Задаёт поведение ссылки при клике на неё.
Внимание!!!
В XHTML применение этого атрибута запрещено.
Атрибут target может принимать 4 значения:
_blank - Загружает страницу в новую вкладку браузера.
_self - Загружает страницу в текущую вкладку.
_parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.
По умолчанию ссылка имеет параметр _self.
По поводу фреймов читать - https://webref.ru/html/type/frame
- задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в
Практическая работа №3.1
Сделаем небольшое меню с помощью html:
- предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив в контейнер . У
есть 2 обязательных атрибута: 1)
src - адрес графического файла, который будет отображаться на веб- странице. Наиболее популярны файлы в формате PNG и JPEG.
2)
alt (обязательный атрибут) - устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также поисковыми системами или экранными ридерами, читающими текст с экрана для слабовидящих людей.
Практическая работа №3.2
Проверка знаний
Инструментами HTML сделайте (можно использовать любое изображение):
Итоговая практическая работа №1
Сделайте структуру html средствами тегов изученных раньше.
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Вариант 6
Вариант 7
Вариант 8
Вариант 9
Вариант 10
Вариант 11
Вариант 12
Вариант 13
Вариант 14
Вариант 15
Тема 4: Таблицы
. | или |
. |
- предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Элемент |
должен размещаться внутри контейнера |
|