Урок № 1

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

СОДЕРЖАНИЕ
Профессия «веб-разработчик». . . . . . . . . . . . . . . . . . . . . 3
Frontend и backend. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Домен, хостинг . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Язык разметки HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Основная структура страницы . . . . . . . . . . . . . . . . . . 9
Создание первой HTML-страницы. . . . . . . . . . . . . . 11
Редактор кода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Начало работы с CodePen . . . . . . . . . . . . . . . . . . . . . . 13
Создание нового проекта . . . . . . . . . . . . . . . . . . . . . . 16
Создание первой HTML-страницы. . . . . . . . . . . . . . . . 21
Атрибуты тега. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Создание HTML-страницы. . . . . . . . . . . . . . . . . . . . . 23

МАТЕРИАЛЫ К УРОКУ ПРИКРЕПЛЕНЫ К ДАННОМУ PDF-ФАЙЛУ.

Для доступа к материалам, урок необходимо открыть в программе
Adobe Acrobat Reader.
 Введение в мир веб-разработки

Профессия «веб-разработчик»
Профессия веб-разработчика  – одна из самых по-
пулярных. И это не случайно, ведь создание масштаб-
ных проектов требует слаженной работы целой команды
разработчиков. С каждым днем количество заказчиков
увеличивается, в связи с чем стремительно растет объ-
ем работы и потребность в новых сотрудниках.
Веб-разработчик  –  это программист, который
занимается созданием и поддержкой веб-сайтов и
веб-приложений. Если говорить кратко, веб-разработ-
чик пишет код, который отвечает за внешний вид и ра-
ботоспособность сайта.
В масштабных веб-проектах эти задачи часто раз-
делены между несколькими разработчиками. Как пра-
вило, над проектами работает целая команда специа-
листов, каждый из которых выполняет свои задачи. К
примеру, создает макет сайта.
Перед запуском сайта, разработчики должны убе-
диться, во всех ли браузерах он стабильно работает
(протестировать его). После запуска следует мониторить
сайт, а также обновлять его по мере необходимости.

3
Урок № 1

Frontend и backend
Вероятно, вы уже сталкивались с такими термина-
ми, как frontend и backend. Это два разных понятия,
которые в комбинации реализуют работу сайта (рис. 1).

Рисунок 1

Первое из направлений (frontend) отвечает за

внешний вид и логику взаимодействия пользователя
с ресурсом.
Внешний вид сайта – это результат работы веб-раз-
работчика или команды веб-разработчиков. Красивый,
понятный и удобный интерфейс веб-приложения – за-
лог успеха. HTML и CSS необходимы разработчику,
чтобы создавать действительно уникальные и привле-
кательные сайты. Зная язык JavaScript, разработчик

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

может организовать взаимодействие пользователя с ре-

сурсом. Чем больше специалист в области frontend знает
и умеет, тем выше его зарплата.
Взгляните на рисунки 2 и 3. Обе анимации полно-
стью выполнены с помощью HTML, CSS и JS, доступ-
ны по ссылкам: https://codepen.io/DylanBarnett/pen/
EGeBmL, https://codepen.io/inlet/pen/oPoBNe.

Рисунок 2

Рисунок 3

5
Урок № 1

Перейдем к следующему понятию – backend.

На сервере происходят определенные процессы,
а мы видим страничку и можем с ней взаимодейство-
вать. Следует уточнить, что сервер – это специальный
компьютер, подключенный к сети, в задачи которого
входит хранение и передача данных по запросу пользо-
вателя (рис. 4).

Рисунок 4

Таким образом, backend-специалист отвечает за то,

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

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

Домен, хостинг
Созданный вами сайт – результат долгой работы, но
если вы будете хранить его на своем личном ПК, то ни-
кто, кроме ваших знакомых, не сможет его увидеть.
Домен и хостинг  –  это взаимосвязанные поня-
тия, необходимые для полноценного функционирова-
ния сайта. Домен – это уникальное имя, по которому
можно обратиться к ресурсу. Иначе говоря, это его
уникальный адрес, например, google.com, pixar.com.
Хостинг  –  это услуга, которая позволяет хранить
данные сайта и на постоянной основе предоставлять
пользователям интернета доступ к сайту. Можно про-
вести аналогию с арендой. Пользователи на определен-
ный период арендуют хостинг для своего сайта. Он мо-
жет быть платным или бесплатным, зависит лишь от
условий, которые выдвигает владелец ресурса.

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

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

7
Урок № 1

В языке гипертекстовой разметки документов с

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

Рисунок 5

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

претация  –  анализ, обработка и выполнение исход-
ного кода построчно. Этот процесс отличается от ком-
пиляции, т. к. компиляция  –  это процесс, когда весь
текст программы анализируется и переводится в ма-
шинный или байт-код. Затем уже происходит запуск
программы. Результат отображается на экране компью-
тера или мобильного устройства.

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

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

Для начала рассмотрим основную структуру
HTML-документа. Это каркас документа, который мы
будем использовать (рис. 6).

Рисунок 6

Он имеет такую структуру:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>

</body>
</html>

Внутри каждого тега находится соответствующее

содержимое, а тег описывает, как с этим содержимым
работать.

9
Урок № 1

Обратите внимание, существует ряд тегов, которые

не требуют закрытия. Например, тег <meta>, с которым
мы ознакомимся далее.
В самом начале файла указывается <!DOCTYPE
html>. Это не тег, а инструкция браузеру о том, какая
версия HTML была использована для написания стра-
ницы. В данном случае, это HTML5.
Затем следует тег <html>, в котором хранится все
содержимое страницы.
Внутри тега <head> находится вся необходимая
браузеру информация для работы с документом. Содер-
жимое этого тега на странице не отображается.
Внутри <body> будет находиться то, что в результа-
те отобразится на странице.
Таким образом, мы рассмотрели общую структуру
и готовы перейти к созданию странички.

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

Создание первой HTML-страницы

Приступим к самому интересному  –  созданию
HTML-страницы.
В ней мы опишем главных героев мультфильма
Incredibles 2. За основу будет взята информация о филь-
ме с ресурса Pixar (https://www.pixar.com/feature-films/
incredibles-2#feature-films/incredibles-4) (рис. 7).

Рисунок 7

11
Урок № 1

Редактор кода
Для написания и редактирования кода нужен
специальный редактор. Для этого можно пользоваться
как встроенными средствами, так и установить специ-
альное ПО.
Онлайн-инструмент CodePen предназначен
для редактирования кода. Он доступен по ссылке
https://codepen.io.
Удобный онлайн-редактор позволяет видеть изме-
нения в реальном времени. Содержит огромное количе-
ство работ других авторов, с которыми можно ознако-
миться. Именно этим ресурсом будем пользоваться на
протяжении всего курса (рис. 8).

Рисунок 8

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

Начало работы с CodePen

Ознакомимся с интерфейсом сервиса и узнаем о его
возможностях. Для начала следует создать новый акка-
унт, щелкнув Sign Up, или войти в уже существующий,
щелкнув Log In. Сервис позволяет войти в аккаунт, ис-
пользуя Twitter, Github, Facebook. Также можно зайти с
помощью email-адреса – Sign Up with Email (рис. 9).

Рисунок 9

Выполним вход с помощью email-адреса.

13
Урок № 1

В появившейся ниже форме (рис. 10) следует ввести

имя, уникальное имя, под которым будут сохраняться
проекты, адрес электронной почты и пароль. Убедитесь,
что User Name уникален, иначе появится предупрежде-
ние.

Рисунок 10

Затем будет предложено пройти обучение. Нажми-

те Let’s Go, чтобы получить подсказки о всех возможно-
стях сервиса. Рекомендуется не игнорировать обучение
и внимательно ознакомиться с инструкцией.

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

Во всех проектах вы сможете без труда настроить

ресурс (рис. 11).

Рисунок 11

Например, три окна, которые позволяют исполь-

зовать все доступные средства для frontend: написание
кода на языке разметки HTML, добавление таблицы
стилей CSS, написание скриптов на JS (рис. 12).

Рисунок 12

15
Урок № 1

Также вы узнаете, как настроить среду (рис. 13).

Рисунок 13

Создание нового проекта

Чтобы создать новый документ или проект, необ-
ходимо нажать на иконку пользователя и выбрать New
Pen (рис. 14).

Рисунок 14

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

Внешний вид редактора можно изменить (Change

View > Editor Layout). Часть окна, в котором отобража-
ется результат интерпретации кода, может быть ото-
бражена слева, снизу или справа (рис. 15).

Рисунок 15

В бесплатной версии можно создавать неограничен-

ное количество Pens, но только один Project, который
будет включать в себя не более 10 файлов.
Создание нового проекта состоит из трех шагов
(см. рис. 16 на стр. 18):
1. Название. Для любого проекта следует придумать
название, которое будет отражать содержимое.
2. Редактирование кода. Область, в которой необходимо
вводить код. Как уже ранее упоминалось, HTML – для
тегов HTML, CSS  –  для описания стилей, JS  –  для
подключения скриптов.

17
Урок № 1

3. Сохранение. Проект обязательно следует сохранить,

чтобы не потерять внесенные изменения.

Рисунок 16

Если вам необходимо только окошко HTML, можно

максимально увеличить его, нажав на стрелочку и вы-
брав Maximize HTML Editor (рис. 17).

Рисунок 17

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

В результате получим вид окна, как на рисунке 18:

Рисунок 18

Таким же образом можно свернуть одно из окон,

выбрав Minimize.

19
Урок № 1

Рассмотрим, как импортировать из доступных Pen

для дальнейшей работы с ним. Открываем понравив-
шуюся работу и нажимаем Fork, после чего она окажет-
ся в списке ваших работ (рис. 19-20).

Рисунок 19-20

Готовый проект можно экспортировать, нажав в

правом нижнем углу Export (рис. 21).

Рисунок 21

Чтобы просмотреть все Pens, следует нажать на

иконку с аватаром и выбрать Your Dashboard (рис. 22).

Рисунок 22

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

Одна из особенностей сервиса заключается в том,

что при бесплатной подписке все опубликованные Pens
будут общедоступны.

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

Атрибуты тега
Внутри тегов <head> следует добавить <meta>, ко-
торый содержит информацию о документе. Данный
тег может принимать такие атрибуты: charset, name
и другие. Более подробно об атрибутах используе-
мого тега можно узнать из документации по ссылке
https://www.w3schools.com/html/default.asp. Здесь в ле-
вой части окна мы находим тег, а в правой можем по-
смотреть его атрибуты, примеры и описание (рис. 23).

Рисунок 23

21
Урок № 1

Суть в том, что внутри тега, после его названия,

прописываются необходимые атрибуты. Рассмотрим,
как это работает на примере <meta>.
Сперва следует указать кодировку, чтобы интерпре-
татору было проще ее распознать:
<meta charset="utf-8">

Чтобы сайт корректно отображался на мобильных

устройствах, добавляем следующие атрибуты:
<meta name="viewport" content="width=device-
width, initial-scale=1">

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

<meta name="description" content="Incredibles 2">

Дополнительно следует указать ключевые слова,

которые соответствуют содержимому страницы. Это
следует сделать для того, чтобы сайт индексировался
в поисковых системах, был виден пользователям после
введения запроса:
<meta name="keywords" content="Incredibles,
superhero, pixar">

Или же указать автора документа:

<meta name="author" content="Alex">

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

Создание HTML-страницы
Ссылка на проект в CodePen:
http://bit.ly/step-webdev-lesson-1-1

Нажав кнопку Fork, скопируйте проект, содержа-

щий следующий HTML-код:
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="description"
content="Incredibles 2">
<meta name="keywords" content="Incredibles,
superhero, pixar">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<title>INCREDIBLES 2</title>
</head>

<body>
<h1>INCREDIBLES 2</h1>
<h2>Character Design</h2>
<p>
<b>Helen Parr</b>, known in the
<i>Superworld</i> as <i>Elastigirl</i>.
</p>

23
Урок № 1

<p>
<b>Bob Parr</b> cherishes his days as Mr.
Incredible—a popular Super with <i>mega-
strength</i>.
</p>
<p>
<b>Jack-Jack Parr</b>, the baby of the family,
likes to sit back with a bottle and a good
story.
</p>
</body>

</html>

Получим такой результат (рис. 24):

Рисунок 24

Рассмотрим выполненные действия.

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

В коде был использован «каркас» страницы, а также

добавлены следующие теги: <h1>, <h2>, <p>, <b>, <i>.
Ознакомимся с ними более подробно, разберем, за
что отвечает каждый из них. В языке разметки HTML
заголовок задается с помощью тегов от <h1> до <h6>,
при этом цифра после h обозначает уровень заголовка.
Взгляните на приведенный ниже пример (рис. 25):
<h1>INCREDIBLES 2</h1>
<h2>INCREDIBLES 2</h2>
<h3>INCREDIBLES 2</h3>
<h4>INCREDIBLES 2</h4>
<h5>INCREDIBLES 2</h5>
<h6>INCREDIBLES 2</h6>

Рисунок 25

25
Урок № 1

Абзац определяется тегом <p>, после которого идет

текстовое наполнение:
<p>
…
</p>

Для отдельных слов были использованы теги <b> и

<i>. Другими словами, это полужирный или курсив в
HTML. Эти теги могут применяться как к отдельному
слову, так и к целому абзацу:
<p>
<b>Helen Parr</b>, known in the <i>Superworld</i>
as <i>Elastigirl</i>.
</p>

Кстати, одной из особенностей синтаксиса (правил

написания кода) HTML является то, что не все теги тре-
буется закрывать.
Если нам нужно добавить прямую линию после па-
раграфа, можно воспользоваться <hr> (рис. 26).

Рисунок 26

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

Чтобы перенести текст на новую строку, не добав-

ляя абзац, нужно дописать <br>. Данный тег следует
использовать для переноса строк, но не для выделения
абзацев.

Таким образом, мы создали нашу первую

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

27
Урок № 1
Введение в мир веб-разработки

© Компьютерная Академия ШАГ

www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения,

фрагменты которых использованы в материале, принадлежат их законным владель-
цам. Фрагменты произведений используются в иллюстративных целях в объёме,
оправданном поставленной задачей, в рамках учебного процесса и в учебных целях,
в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське
право і суміжні права». Объём и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию объектов
авторского права и не ущемляет законные интересы автора и правообладателей.
Цитируемые фрагменты произведений на момент использования не могут быть
заменены альтернативными, не охраняемыми авторским правом аналогами, и
как таковые соответствуют критериям добросовестного использования и честного
использования.
Все права защищены. Полное или частичное копирование материалов запрещено.
Согласование использования произведений или их фрагментов производится
с авторами и правообладателями. Согласованное использование материалов
возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое исполь-
зование материалов определяется действующим законодательством Украины.