Первый урок по web программированию

Знакомство

Как тебя зовут?
Программировал ли ты ранее игры или сайты?
Чем любишь заниматься

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

Разберемся с видеосвязью

План сегодняшнего занятия:

Повторим для чего используется css, html и javascript
Начнем верстать

Какому браузеру принадлежит этот логотип?

Google Chrome

Как вы думаете, что изображено на картинке слева?

Самый первый сайт,
Он появился

Самый известный блокировщик рекламы на сайтах называется?

AdBlock

Для чего используется html?

HTML - это набор команд, которыми мы можем

Для чего используется CSS ?

CSS - это набор команд, который отвечает

Для чего используется JavaScript ?

JavaScript - это язык программирования, который web

Понятия frontend и backend

frontend - это видимая пользователю часть сайта.

Сайт компании apple

Сайт компании sunlight

Наш будущий сайт

Поделитесь экраном с преподавателем

На рабочем столе необходимо создать папку для проекта

назовем ее “проект proCoding”

Запускаем программу VS code

Создаем файл index.html

Структура файла index.html

Любой сайт состоит из множества частей – тегов.
От того

Структура файла index.html

Бывают одиночные и парные теги. На примере сверху используются

Почему важно закрывать парные теги

Зачастую это помогает задавать области работы тега.

Исправляем

Теперь свойство тега h1 будет только у свойства lorem

Структура файла index.html

Пишем базовую структуру index.html

Дополнительное задание для тех кто справится быстрее:
Попробовать

Быстрый способ задать структуру index.html

Пишем восклицательный знак и нажимаем табуляцию (кнопка

Пишем базовую структуру index.html

Внутрь body помещаем “header” и “main”

Внутри каждого из блоков будет своя

Внутрь “header” пишем WD - это будет лого, нашего сайта

Протестируем

Запуск сайта

Нажать “выполнить”, “запуск без отладки”

Запуск сайта

Выбрать chrome браузер

Запуск сайта

Сайт откроется в браузере

Добавим меню

Необходимо дописать через пробел следующие пункты
Перейти в браузер и обновиться

Разберемся с тегами

Добавим теги

Заголовок - WD
Абзац - главная об авторе работы и т.д.
Протестируем….

Добавим css

Добавим css

Создадим новый файл с названием style.css

Подключим style.css в нашем html файле

Атрибуты это свойства тегов. На нашем

Объясните своими словами, что такое тег и для чего он используется.
Какие

Чем отличаются парные теги от одиночных?
Что добавляют в закрывающий тег?

К одинарному тегу link, нужно добавить атрибуты rel, type и href.
На

Правила написания стилей css

Правила написания стилей css

Добавим стили

Присвоим свойству color значение #34547A в нашем файле стилей
font-size свойство

Посмотрим на изменения

Сохраним изменения и обновляем страницу Логотип увеличился и изменил цвет

Самостоятельное задание

Используя свойства и их значения, напишите стиль для меню.
Цвет

Самостоятельное задание

Тег

при создании автоматически имеет эти свойства, поэтому на

Изменим цвет фона на нашем сайте

Добавим для header следующие свойства и

Самостоятельное задание 2

Используя свойства и их значения, напишите стиль для тела

Самостоятельное задание 3

Найти в интернете новые свойства для изменения стиля текста.
Применить

Добавим название нашего сайта

В тег добавьте название вашего сайта

Добавим название нашего сайта

Добавленное название появится во вкладке браузера после обновления

Научно-популярная пауза

Бернерс-Ли, Тим

Кайо, Роберт

Научно-популярная пауза

Первый сайт

Научно-популярная пауза

Первый браузер

Что мы сделали сегодня?

Что мы сделали сегодня

Познакомились со структурой html документа

Что мы сделали сегодня

Научились создавать и применять стили

Что мы сделали сегодня

Сделали заготовку нашего будущего сайта

Что ждет нас на следующих занятиях?

Шаг за шагом мы продолжим верстать

Расскажи о нас друзьям

Получи подарочную карту STEAM на 750 р. или

Домашнее задание

1.Сделать по специальной презентации радугу из слов
2. Самостоятельно или с