пишем свой собственный сайт
Профессия «Веб-разработчик»:
Мастер класс
Профессия: python разработчик
Сферы деятельности
  • проектирование веб-сайтов
  • разработка веб-сайтов
  • поддержка веб-сайтов
Используемые технологии
HTML, CSS, Python, JavaScript, PHP
Необходимые навыки
знание языков программирования, опыт работы с фреймворками
Продуктовые результаты
создание эффективного веб-сайта
Где учиться
ТПУ, ТУСУР, ТГУ
Где работать
IT-компании, веб-студии, стартапы, фриланс, крупные корпоративные учреждения
О чём мероприятие?
На мастер-классе участники познакомятся с основами веб-разработки. Веб-разработчик создает сайты и приложения, которые обеспечивают интерактивность и доступность информации. Мы обсудим ключевые технологии и фреймворки, используемые в веб-программировании, а также научимся создавать простые информационные веб-страницы. Участники освоят основы работы с HTML, а также научатся интегрировать элементы пользовательского интерфейса. Это занятие станет отличной возможностью для взаимного обучения и обмена опытом, где родители и дети смогут совместно реализовывать свои идеи в мире веб-разработки и приобрести навыки для будущей карьеры!
Для кого мероприятие?

Для детей и их родителей

Для работы вам понадобится:
Персональный компьютер или ноутбук
Полезные материалы:
Полезная информация по созданию веб-сайтов Как пользоваться Visual Studio Code
Ход работы:
1. Первый шаг
Сначала переходим по ссылке https://learn.microsoft.com/ru-ru/windows/python/beginners и устанавливаем Visual Studio Code.
В рамках мастер класса будет написан шаблон для веб-сайта, который можно будет заполнить любой информацией, ссылками и картинками. Перед началом работы продумайте, какая структура должна быть у вашего сайта.
2. Второй шаг
Открываем Visual studio Code, создаем новый текстовый файл.
3. Третий шаг
Нажмите на «Select a language»
4. Четвертый шаг
В появившемся окне вводим «HTML» и выбираем его.
5. Пятый шаг
Затем переписываем код ниже и запускаем программу.
6. Шестой шаг
После запуска выбираем браузер, в котором будем открывать веб-сайт, и смотрим на свою первую страницу.
7. Седьмой шаг
Вместо надписей «Моя первая страничка» и «Тело HTML-документа (отображается на экране)» напишите любой другой текст и запустите
8. Восьмой шаг
Теги заголовков превращают обычный текст в заголовок определённого уровня. Тег <h1> создаёт заголовок первого уровня — самый большой и главный (обычно название статьи на странице), <h6> отвечает за заголовок шестого уровня — самый маленький и незаметный. Эти теги важны как для пользователей, так и для поисковиков — заголовки с подзаголовками любят и те, и другие. Иерархию уровней необходимо соблюдать, то есть за <h1> должен идти <h2>, и никак не наоборот.
Чтобы понять, как это работает, впишите в html-файл следующий код.
9. Девятый шаг
Для того, чтобы вставить ссылку нужно добавить следующую строку, где в кавычках находится ссылка на сайт.
10. Десятый шаг
Для того, чтобы добавить картинку на сайт, нужно скачать ее на компьютер и поместить в папку с кодом. Затем добавить новую строку, написанную ниже. Картинку нужно назвать «image.png»
11. Одиннадцатый шаг
Для того, чтобы вставить таблицу нужно изменить программу следующим образом.
12. Двенадцатый шаг
Попробуйте самостоятельно добавить еще одну строку и столбец для таблицы.
13. Тринадцатый шаг
Теперь, когда мы научились добавлять на сайт некоторые объекты, расположим их по странице. Ниже представлен код для шаблона веб-сайта. Белый текст можно изменять на любой другой, чтобы заполнить страницу.
14. Четырнадцатый шаг
Используя данный шаблон, добавьте информацию, картинки и ссылки, чтобы получился информационный сайт.
Итоговый продукт
Участники смогли познакомиться с профессией веб-разработчик, изучили основы работы с HTML, используемую в веб-программировании, а также создали простую информационную веб-страницу, которую можно использовать, как шаблон для дальнейшей работы в данном направлении.
Вопросы для обсуждения
1. Что нового Вы узнали?
2. Чему вы научились из данного проекта?
3. Какие новые навыки Вы сегодня получили?
4. Порекомендовали бы вы этот мастер класс вашим друзьям и знакомым?
5. Как вы думаете, как еще можно усовершенствовать данный веб-сайт?
Разработчики