1 Основы HTML и CSS

Кирилл Кучеров

Основы HTML и CSS

Кучеров Кирилл Владимирович

Telegram kkucherov.

Почта kkucherov@bmstu.ru.

В теме письма [ЯИП].

Материалы

Страница курса

Полезные материалы и ссылки

GitHub с материалами семинаров и разбором заданий

Языки интернет-программирования (ЯИП)

Лекции.

Лабораторные работы.

Рубежные контроли.

Домашнее задание (типа выпускного проекта).

Семинары.

Чего вам ждать от нас

РК1 - JavaScript, одна задача, одна пара, 20 баллов.

РК2 - Ruby on Rails, одна задача, одна пара, 25 баллов.

ДЗ - Ruby on Rails, законченный проект, 25 баллов.

Опросы на лекциях по теме предыдущей, 10 штук (не каждую пару) по 10 первичных баллов, всего можно получить 30 баллов.

Итого 100 баллов, экзамен рейтинговый.

На троечку (61-70)

До дня экзамена защитить все лабы.

До дня экзамена написать все РК.

До дня экзамена защитить ДЗ.

???????

PROFIT.

На хорошо (71-84)

До дня экзамена защитить все лабы.

До дня экзамена написать все РК.

До дня экзамена защитить ДЗ.

???????

PROFIT.

На отлично (85+)

До дня собеседования защитить все лабы.

До дня собеседования написать все РК.

До дня собеседования защитить ДЗ.

Пройти собеседование.

???????

PROFIT.

else

Билеты.

Вопросы по всей теории.

Чего мы ожидаем от вас

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

Будет ОЧЕНЬ много разного материала без глубокого погружения. Некоторые вещи вскользь.

Интернет 101

Что такое интернет?

Клиент (веб-агент).

Сервер (веб-сервер).

Все это компьютеры.

Компьютеры соединены друг с другом.

Интернет передает файлы

Фото.

Документ.

Стрим (видео).

Контент.

4

HTML

Элемент vs тег

Тег — открывающий/закрывающий.

Элемент — тег(и) + вложенное содержимое.

Специальные символы

Некоторые символы не могут быть представлены внутри разметки, например, символ <. Для того, чтобы включать символы в разметку, применяются специальные символы вида &...;, например, & lt ;

Семантическая разметка

        <main></main>
        <em></em>
        <code></code>
        <cite></cite>
    

Формы

Нужно передать информацию из браузера на сервер.

Передача методом GET/POST.

Должна открываться новая страница.

Валидируем HTML

CSS

Селекторы

Элемент, группа элементов.

id — обозначается символом #.

class — обозначается символом ..

Чем class отличается от id?

Несколько классов?

Специфичность селектора

Кто лучше (читай — более конкретно) подходит, тот и молодец.

Комбинаторы

пробел — любой вложенный.

> — ребенок.

+ — рядом на том же уровне.

x ~ y — y предшествует x, и они имеют общего родителя.

Почему <style> — плохо

Ссылки

  1. HTML 5
  2. CSS Flexbox
  3. CSS Grid
  4. Эволюция макетов
  5. CSS Grid - круто
  6. Единицы измерения CSS
  7. Bootstrap 4

Ссылки (2)

  1. Mozilla Developers network
  2. Спецификации CSS
qr

Спасибо за внимание!