1.40M

Category:

internet

Web-программирование. Вводное занятие

2
Цель дисциплины:
теоретическая и практическая подготовка студентов в области
разработки веб-приложений с использованием языка разметки
HTML, каскадных стилей CSS, языков программирования
JavaScript, PHP, СУБД MySQL, а также современных сред
разработок.
Задачи освоения дисциплины:
знакомство с принципами и методами макетирования и верстки
веб-страниц, изучение современных сред разработки вебприложений, приобретение навыков программирования на
стороне клиента и на стороне сервера, получение практических
навыков создания веб-приложений.

3.

3
Общая трудоемкость дисциплины составляет 8 кредитов, 288 часов.
Контактная работа
лекции
лабораторные работы
114
32
82
часов
часов
часов
Самостоятельная работа
129
часов
45
семестр
семестр
часов
Форма отчетности:
зачет
экзамен
5
6

4.

№
п/п
Раздел учебной
дисциплины
Недели
Виды учебной работы, включая
самостоятельную работу студентов и
трудоемкость
(в часах)
Лекции
Лабор.
работы
В т.ч. в
ИФ
Само
стоят
ельна
я
работ
а
4
Текущий
контрол
ь
успевае
мости
(неделя,
форма)
Аттест
ация
раздел
а
(неделя
,
форма
)
Макси
мальн
ый
балл за
раздел
Семестр 5
1.
2.
3.
Введение
в
webпрограммирова
ние
Базовые
webтехнологии
Клиентское
программировани
е
на
языке
JavaScript
Зачет
Итого за семестр
1–4
4
10
0
20
5ЛР
6 КР
20
5– 10
6
18
0
30
12 ЛР
14 КР
40
11 – 17
6
20
0
30
15ЛР,
17 ЛР
17 ИК
40
0
16
48
0
80
-
-
0

5.

5
Дисциплина направлена на
формирование следующих компетенций:
ОПК-7 - способен осуществлять выбор платформ и инструментальных программноаппаратных средств для реализации информационных систем;
ПК-6 - способен разрабатывать технические спецификации на программные
компоненты и осуществлять их реализацию;
ПКП-3 - готов применять актуальные версии языков и библиотек для разработки
Интернет-приложений;
ПКП-4 - способен создавать html-страницы в соответствии с представленными
графическими макетами и требованиями заказчика.

6.

6
Редакторы кода:
1. Sublime Text;
2. Atom;
3. VS Code;
4. WebStorm;
5. Brackets.

7.

Особенности
o подсветка синтаксиса;
o автоматические отступы;
o автодополнение;
o разделение рабочей области;
o мини-карта;
o внешний вид;
o проекты;
o интеграция приложений;
o система контроля версий;
o emmet;
o консоль;
o дебаггер;
o единый стиль написания кода в команде;
o библиотека плагинов;
o горячие клавиши.
7

8.

8
HTML (HyperText Markup Language
— «язык гипертекстовой разметки») — самый базовый
строительный блок.
Определяет содержание и структуру веб-контента.

9.

9
Теги

10.

10
Парные теги

11.

11
Одиночные теги

12.

12
Атрибуты тегов
позволяют расширить возможности отдельных тегов и более
гибко управлять содержимым контейнеров.
Порядок атрибутов в любом теге не имеет значения и на
результат отображения элемента не влияет.

13.

13
Правила вложенности
Теги должны закрываться в правильном порядке: вложенный
внутрь тег должен закрываться раньше, чем внешний,
родительский.

14.

14
Ошибки вложенности
Как проверить?
https://validator.w3.org/

15.

15
Структура простейшей страницы

16.

16
!DOCTYPE определение типа документа.
<html> контейнер, который заключает в себе все содержимое веб-страницы,
включая теги <head> и <body>.

17.

<head> контейнер, в котором размещается служебная информация
влияющая на всю страницу.
Теги внутри <head> делятся на два типа:
• метаинформация,
которую
могут
поисковики, какие-то другие сервисы.
Например,
<meta charset="utf-8">
• теги для подключения внешних ресурсов.
Например,
<link rel="stylesheet" href="style.css">
использовать
браузеры,

18.

18
<body> контейнер, в котором размещается все содержание веб-страницы
(контент), отображаемое в окне браузера.

19.

19
Страница сложнее

20.

20
Тег <script>
служит для подключения внешних ресурсов.
Подключать тег <script>
лучше перед закрывающим тегом <body>.

21.

21
Спецификация HTML
- документ описывающий все аспекты работы с HTML.
Доступ
https://html.spec.whatwg.org/
Нас интересуют разделы:
3 Semantics, structure, and APIs of HTML documents
4 The elements of HTML

22.

Карточка тега
22

23.

23
Основные поля:
Categories — здесь перечислены категории, или типы тегов, к которым этот тег
относится.
Content model — модель содержимого. Описывает, какое содержимое может быть
внутри этого тега.
Contents attributes — описывает, какие атрибуты могут быть у этого тега.
Вспомогательные поля:
Поле Tag Omission — показывает, когда тег можно не закрывать.
Aria — дополнительные атрибуты для доступности.
Поля, которые нужны в большей степени для JavaScript.

24.

Чтобы определить правила вложенности тегов мы с вами будем
работать с двумя полями — Categories и Content model.
24

25.

Категории тегов
25
Существует два основных типа тегов: теги Flow — поточные, и теги, которые
относятся к метаданным — Metadata.
Metadata — это всё, что может находиться в теге <head> — дополнительная
информация, которая может влиять на всю страницу.
Flow — это всё то, что находится внутри <body>. То есть, всё, что мы можем своими
глазами увидеть — содержание страницы.

26.

Подкатегории Flow
26
Heading content — самая простая подкатегория, заголовочные теги: <h1>, <h2>, <h3>
и т. д.

27.

27
Sectioning content — теги, предназначенные для создания крупных смысловых
разделов на странице: <article>, <aside>, <nav>, <section>.

28.

Подкатегории Flow
28
Phrasing content — фразовые теги, небольшие слова или словосочетания, что-то
мелкое: <a>, <em>, <i>, <span> и т. д.

29.

29
Embedded content — встраиваемый контент, подмножество Phrasing content. Это
вещи, которые не являются частью языка HTML, но их надо отрисовать на странице.

30.

30
Interactive content — интерактивный контент, с которым можно как-то
взаимодействовать.

31.

31
Interactive content — интерактивный контент, с которым можно как-то
взаимодействовать.

32.

Можно ли тег <p> вложить в тег <li>?
32
Алгоритм работы:
1. Проверяем модель содержания (поле content model) тега, в который
вкладывается другой тег. Чаще всего там перечисляются категории тегов, которые
можно вкладывать внутрь, но бывают и дополнительные требования. В нашем
случае у тега <li> в content model находится flow content.
2. Проверяем категории (поле categories) тега, который вкладываем в другой тег. В
нашем случае у тега <p> категории flow и palpable.
3. Если есть совпадения между моделью содержания родительского тега и
категориями дочернего тега, то вкладывать можно. В нашем случае в <li> можно
вкладывать flow content, а <p> к этой категории принадлежит, значит, и <p> в <li>
вкладывать можно.

33.

34.

34
Прозрачная модель содержания

35.

Можно ли вложить <h1> в <a>?
35
Алгоритм работы:
1. Проверяем модель содержания тега a. Она transparent, прозрачная. Также есть
дополнительные ограничения, что в ссылку нельзя вставлять другие ссылки и
интерактивные элементы.
!!! На первом шаге мы встретили прозрачную модель, поэтому алгоритм немного усложняется.
2. Проверяем модель содержания родительского тега, то есть того тега, в который
вложен тег <a>. Допустим, это был тег <p>, у которого модель содержания —
phrasing content.
3. Проверяем категории (поле categories) тега <h1> — это flow и heading.
4. В <p> можно вкладывать phrasing content, а <h1> к этой категории не
принадлежит, значит <h1> в <p> вкладывать нельзя, и <h1> в <a> тоже нельзя
вкладывать.

36.

37.

Валидация кода
37
Ошибки в коде!!!

38.

Сервис для проверки HTML-кода
38
https://validator.w3.org/nu/
Валидатор проверяет всю разметку по спецификации HTML. Чтобы правильно
валидировать документ он использует <DOCTYPE>.

39.

40.

Отличие ошибки и предупреждения
40
Ошибки помечаются как error и их нужно обязательно исправлять. Это
несоответствие формальному синтаксису.
Предупреждения помечаются как warning. И это те вещи, которые валидатор
проверяет, смотря не на метаданные тега, а на описание, то есть, на его
предназначение. Эти предупреждения менее строгие, исправлять их
необязательно.

English Русский Rules