Введение в профессию web - разработчика

Содержание

Слайд 2

План урока:

План урока:

Слайд 3

Введение в мир веб-разработки

Веб-разработчик — это программист, который занимается созданием и поддержкой веб-сайтов и веб-приложений.

Введение в мир веб-разработки Веб-разработчик — это программист, который занимается созданием и
Если говорить кратко, веб-разработчик пишет код, который отвечает за внешний вид и работоспособность сайта.

Что такое Web-разработка?

Веб-разработка — процесс создания веб-сайта или веб-приложения. Основными этапами процесса являются веб-дизайн, вёрстка страниц, программирование на стороне клиента и сервера

Слайд 4

Your Footer Here

Your Footer Here

Слайд 5

Frontend и backend

Frontend - первое из направлений отвечает за внешний вид и логику взаимодействия пользователя с ресурсом.

Frontend и backend Frontend - первое из направлений отвечает за внешний вид
Красивый, понятный и удобный интерфейс веб-прило- жения — залог успеха. HTML, CSS, JavaScript
Backend - На сервере происходят определенные процессы, а мы видим страничку и можем с ней взаимодействовать. Следует уточнить, что сервер — это специальный компьютер, подключенный к сети. В его задачи входит хранение данных, а также их передача по запросу пользователя. PHP, MySQL, Python

https://codepen.io/inlet/pen/oPoBNe

Слайд 6

Your Footer Here

Your Footer Here

Слайд 7

Домен и хостинг

Домен - это уникальное имя, по которому можно обратиться к

Домен и хостинг Домен - это уникальное имя, по которому можно обратиться
ресурсу. Иначе говоря, это его уникальный адрес, например, google.com, pixar.com.
Хостинг — это услуга, которая позволяет хранить данные сайта и на постоянной основе предоставлять пользователям интернета доступ к нему.

Слайд 9

Язык разметки HTML

HTML - это язык разметки, который используется для структурирования и отображения веб-страницы и

Язык разметки HTML HTML - это язык разметки, который используется для структурирования
её контента.

Веб-страница — текстовый документ включает в себя специальные слова (теги), а также контентное наполнение (текст, изображения и видео- ролики).

Что такое веб-страница?

Слайд 10

Основные понятия HTML

Гиперте́кст - это, система из текстовых страниц, имеющих перекрёстные ссылки

Основные понятия HTML Гиперте́кст - это, система из текстовых страниц, имеющих перекрёстные
и позволяют выполнять поиск по ключевым словам.

Интерпретация - анализ, обработка и выполнение исходного кода построчно.

Язык HTML интерпретируется браузерами.

Компиляция - это процесс, когда весь текст программы анализируется и переводится в машинный код.

Слайд 11

Основная структура страницы

Инструкция браузеру о том, какая версия HTML была использована для написания

Основная структура страницы Инструкция браузеру о том, какая версия HTML была использована
страницы.

Хранится все содержимое страницы

Вся необходимая браузеру информация для работы с документом

Находиться то, что в результате отобразится на странице

Слайд 12

Работа с CodePen

CodePen - онлайн-инструмент предназначен для редактирования кода.

http://bit.ly/35VtUMh

https://codepen.io

Работа с CodePen CodePen - онлайн-инструмент предназначен для редактирования кода. http://bit.ly/35VtUMh https://codepen.io

Слайд 15

Название. Для любого проекта следует придумать название, которое будет отражать содержимое.
Редактирование

Название. Для любого проекта следует придумать название, которое будет отражать содержимое. Редактирование
кода. Область, в которой необходимо вводить код. Как уже ранее упоминалось, HTML — для тегов, CSS — для описания стилей, JS — для подключения скриптов.
Сохранение. Проект обязательно следует сохранить, чтобы не потерять внесенные изменения. Если вам необходимо только окошко

Создание нового проекта состоит из трех шагов:

Слайд 18

Первая HTML-страница

Первая HTML-страница

Слайд 20

Следует указать кодировку, чтобы интерпретатору было проще ее распознать:

Следует указать кодировку, чтобы интерпретатору было проще ее распознать:

Слайд 21

Дополнительно следует указать ключевые слова, которые соответствуют содержимому страницы. Это следует сделать

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

Чтобы сайт корректно отображался на мобильных устройствах, добавляем следующие:

Также можно добавить описание страницы:

Слайд 22

Закрываем тег head и открываем тег body в котором прописываем 2 заголовка

Закрываем тег head и открываем тег body в котором прописываем 2 заголовка
h1 и h2

Далее создаём абзац

и выделяем жирным текстом и используем курсив

Делаем название для нашей страницы:

Слайд 23

Копируем несколько раз:

Копируем несколько раз:

Слайд 24

Меняем нашу информацию на информацию с сайта:

Меняем нашу информацию на информацию с сайта:

Слайд 25

Должно получиться так:

Должно получиться так:

Слайд 26

«Нет большей неудачи, чем перестать пытаться».

Джон Мик

«Нет большей неудачи, чем перестать пытаться». Джон Мик
Имя файла: Введение-в-профессию-web---разработчика.pptx
Количество просмотров: 136
Количество скачиваний: 3