Информатика

Урок 5: Создание веб-сайта

Создание веб-сайта

Урок посвящен сайтам в сети Интернет, этапам их создания и принципам работы. Описывается механизм передачи информации в браузер при посещении сайта. Даются определения таким понятиям как язык разметки HTML, веб-дизайнер, оригинал-макет, веб-страница и каскадная таблица стилей. В практической части урока, используя популярный конструктор, мы создадим свой собственный сайт, разместим его на сервере бесплатного хостинга и протестируем в браузере его работу.

План урока:

Этапы создания сайтов

Идея

Формулировка требований

Верстка сайта

Наполнение

Публикация

Оформление сайта

Кто такой веб-дизайнер 

Конструктор сайтов

Практикум: создание и размещение сайта на бесплатном хостинге

 

Этапы создания сайтов

Создание сайтов, как и любая другая творческая деятельность, начинается с идеи и последовательно проходит все этапы созидания вплоть до появления законченного продукта.

1 idea zadanie verstka

Рисунок 1 – Этапы создания сайта

Перечислим эти этапы:

– появление идеи;

– формулировка требований к сайту (задание на разработку);

– непосредственно разработка (верстка);

– наполнение содержимым;

– размещение в сети Интернет.

Идея

Идея о создании сайта может возникнуть как у вас лично, так и у ваших друзей, знакомых, родственников. Сайт – это публичный ресурс, предполагающий доступ к нему множества людей со всего мира, поэтому понимание того, каким он должен быть, может возникнуть у любого, даже далекого от веб-разработки человека. При создании сайтов чаще всего так и бывает – идея принадлежит одному человеку, структуру сайта создает другой, дизайн – третий, а наполняет его четвертый. Для крупных проектов это могут быть команды из десятков и сотен людей. Чтобы первоначальная идея не затерялась и не исказилась, ее нужно развернуто описать и сохранить. Так появляются требования к сайту.

 

Формулировка требований

Формулировка требований – этап не обязательный, если вы делаете сайт в одиночку и для себя, но обойтись без нее, работая в команде или выполняя заказ невозможно. Автор идеи зачастую не понимает внутренних принципов работы сайтов, а исполнитель не может «залезть в голову» к автору за пониманием того, что и как должно выглядеть. К счастью, существует формальный способ описания всех требований к структуре и функционированию сайта, он называется техническим заданием. Техническое задание обычно пишется по распространенным шаблонам, учитывающим опыт подобных разработок, существуют даже государственные стандарты на такие документы. Использование шаблона помогает описать все необходимое, ничего не забыв, при этом не погружаясь в ненужные подробности. Пишется техническое задание, как правило, людьми, понимающими принципы работы сайтов. Хорошо, если автор идеи относится к таким, в противном случае задание пишет разработчик, уточняя у заказчика все детали, отсеивая заведомо нереализуемые, или предлагая более современные и качественные подходы. К техническому заданию на разработку сайта, помимо словесного описания его функциональных возможностей, обычно прикладывают дизайн-макет.

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

Веб-страница – фрагмент сайта, или самостоятельный документ, имеющий собственный Интернет-адрес, и отображаемый в браузере как единое целое.

При разработке сайтов для коммерческих предприятий к дизайн-макету могут прилагаться фирменный стиль и логотип компании.

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

 

Верстка сайта

Верстка сайта – процесс разработки «скелетов» страниц и программирования логики их взаимодействия. Под «скелетом» страницы сайта понимают совокупность всех элементов интерфейса страницы, либо не заполненных данными, либо заполненных тестовыми/фиктивными значениями.

В процессе верстки сайта формируется его оригинал-макет.

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

 

Наполнение

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

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

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

Публикация

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

 

Язык разметки гипертекста HTML

В четвертом уроке мы узнали, что любая информация, получаемая из сети Интернет представляет собой последовательность байт, разбитую на фрагменты, называемые пакетами. Так как же сервер понимает, какие именно пакеты нужно слать и в какой момент, и откуда наш браузер знает, как эти пакеты превратить в красивую и динамичную веб-страницу?

Любая страница сайта имеет свой URL-адрес (тот самый адрес, отображаемый в адресной строке браузера и включающий в себя протокол, домен и адрес ресурса). Когда мы вводим этот адрес, браузер отправляет по этому адресу специальный запрос (GET-запрос), в ответ на который сервер возвращает все содержимое веб-страницы в виде одной строки текста. Эта строка разбивается на пакеты, доставляемые к нам разными маршрутами. На нашем компьютере или смартфоне пакеты снова собираются в строку и передаются в браузер, как ответ на его запрос.

Содержимым веб-страницы может быть простой текст, и веб-браузер корректно отобразит его, как отображает содержимое текстового файла программа «Блокнот» или текстовый процессор MS Word. Однако этот текст будет очень невыразительным. Он будет написан одни шрифтом, одним цветом, без отступов, абзацев, выравнивания и переносов слов. В нем не будет никаких таблиц, графиков, иллюстраций и ссылок, не говоря уже о видео и интерактивных элементах интерфейса. Совсем не похоже на содержимое современных сайтов, не правда ли?

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

Язык разметки гипертекста (Hyper Text Markup Language, HTML) – стандартизированный набор правил отображения веб-страниц в Интернет-браузерах.

Имена тегов, описываемых этим языком, помещаются в угловые скобки:

<b>

 Начало области действия тега отмечается открывающим тегом, конец – закрывающим (добавляется косая черта перед именем):

обычный текст<b>жирный текст</b>обычный текст

Не все теги обязаны иметь закрывающую «пару», но большинство имеют.

Теги могут быть вложенными друг в друга:

обычный<p>параграф<b>полужирный текст внутри параграфа</b>параграф</p>

Современная версия языка описывает более сотни тегов, полный перечень которых вы легко найдете в многочисленных справочниках в сети Интернет.

Приведем несколько распространенных тегов:

2 kak vosprinimaetsya tekst v tege

 

Оформление сайта

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

Для более точного описания внешнего вида элементов используют, например, каскадные таблицы стилей (Cascading Style Sheets, CSS), детально описывающие способ отображения элементов. Каскадными таблицы называют потому, что при отображении конкретного элемента, браузер ищет связанную с ним таблицу стилей, если не находит – применяет таблицу содержащего его элемента, и так далее, вплоть до таблицы стилей всей страницы. А если у страницы этой таблицы нет – применяется таблица «по умолчанию» для данного браузера. Получается некий «каскад» переходов между таблицами.

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

 

Кто такой веб-дизайнер

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

От простоты, понятности и удобства дизайна интерфейса зависят, в том числе, и принимаемые нами решения, причем не обязательно это дизайн в цифровой сфере. Простой пример: вы в незнакомом городе хотите доехать на автобусе до места, название которого вам известно. Подходя к остановке, вы видите автобус, который вот-вот уедет. Поскольку его номер вам ни о чем не говорит, то, успеете ли вы в него сесть, и отвезет ли он вас куда надо, зависит от грамотного дизайна списка остановок, размещенного на табличке с номером.

Веб-дизайнер – это специалист по разработке внешнего вида сайтов.

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

 

Конструктор сайтов

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

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

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


Практикум: создание и размещение сайта на бесплатном хостинге

В качестве практического задания мы разработаем простой сайт, посвященный первому разделу этого урока «Этапы создания сайтов» и разместим его на бесплатном хостинге.

Хостинг – услуга по размещению веб-сайта пользователя на сервере организатора этой услуги.

Для проектирования сайта воспользуемся бесплатным онлайн конструктором WIX.

Шаг 1. Зайдите на сайт wix.com и нажмите кнопку «Войти». В появившейся форме введите свои регистрационные данные и нажмите кнопку «Создать».

3 sozdanie akkaunta

Рисунок 2 – Создание аккаунта в конструкторе сайтов WIX

Шаг 2. Сервис wix предлагает два способа создания нового сайта: самостоятельно, или используя искусственный интеллект (Wix ADI). Выберите вариант ADI.

4 vybor mehanizma saita

Рисунок 3 – Выбор механизма генерации сайта

Шаг 3. Ответьте на вопросы искусственного интеллекта (они могут меняться со временем). Некоторые вопросы можно пропускать.

5 otvety na voprosy iskusstvennogo intellekta

Рисунок 4 – Ответы на вопросы искусственного интеллекта ADI 

Здесь приведены вопросы, заданные на момент написания урока, и ответы на них:

6 kak otvetit na voprosy

Шаг 4. Выберите понравившийся дизайн.

7 vybor dizaina glavnoi stranicy

Рисунок 5 – Выбор дизайна главной страницы 

Шаг 5. На следующем этапе добавьте страницы «О нас», «Учебная программа», «Отзывы» и нажмите кнопку «в редактор».

Шаг 6. В редакторе страниц нажмите на кнопку «редактировать», а затем на центральный элемент с приветствием и замените текст на «Здравствуйте!».

8 redaktirovanie stranic

Рисунок 6 – Редактирование страниц 

Шаг 7. Нажмите кнопку «Опубликовать». Конструктор WIX содержит свой сервер хостинга, и вам будет предложено размещение сайта на бесплатном домене 3 уровня (выделение домена второго уровня – платная услуга).

Шаг 8. Нажмите кнопку «Опубликовать и продолжить». Ваш сайт будет размещен в сети Интернет, по адресу, который был вам выдан на предыдущем шаге.

Шаг 9. Для тестирования сайта наберите его адрес в строке браузера. Проверьте работоспособность страниц, информацию, размещенную на сайте.

9 testirovanie saita

Рисунок 7 – Тестирование сайта 

Шаг 10. Проверьте работу чата. Введите любое сообщение.

10 testirovanie chata

Рисунок 8 – Тестирование чата 

Поздравляем! Вы только что создали свой собственный сайт и опубликовали его в сети Интернет.

 

ВОПРОСЫ И ЗАДАНИЯ

Вопрос: 1
Укажите допустимые варианты порядка создания сайта
1Размещение, Наполнение, Верстка, Задание, Идея
2Наполнение, Идея, Верстка
3Идея, Верстка, Публикация
4Идея, Задание, Верстка, Наполнение, Размещение
5Идея, Задание, Верстка, Публикация, Наполнение
Ответить
345
Вопрос: 2
Выберите наиболее близкую к верной расшифровку аббревиатуры HTML
1Веб-страница
2Язык разметки
3Протокол передачи данных
4Стиль текста
5Гипертекст
Ответить
2
Вопрос: 3
Какой тег HTML вынуждает браузер начать новую строку?
1
2
3
4

5
Ответить
14
Вопрос: 4
На что может повлиять графический дизайн сайта
1На удобство его использования
2На эстетическое восприятие
3На ограничение доступа к сайту
4На отображение шрифтов других сайтов в браузере
5На актуальность информации на сайте
Ответить
12
Вопрос: 5
Выберите верные утверждения
1Веб-сайт можно создать с помощью бесплатных инструментов
2Веб-сайт нельзя создать без знания языка HTML
3Веб-сайт, размещенный на бесплатном хостинге, виден только его владельцу
4Аренда домена второго уровня – платная услуга
5Веб-сайты, созданные с помощью конструкторов, размещаются в доменах 3 уровня
Ответить
124
Допущено ошибок:
Оценка:
Подробнее
Ваши ответы:
1 вопрос:

Укажите допустимые варианты порядка создания сайта
1) Размещение, Наполнение, Верстка, Задание, Идея 2) Наполнение, Идея, Верстка 3) Идея, Верстка, Публикация 4) Идея, Задание, Верстка, Наполнение, Размещение 5) Идея, Задание, Верстка, Публикация, Наполнение
2 вопрос:

Выберите наиболее близкую к верной расшифровку аббревиатуры HTML
1) Веб-страница 2) Язык разметки 3) Протокол передачи данных 4) Стиль текста 5) Гипертекст
4 вопрос:

На что может повлиять графический дизайн сайта
1) На удобство его использования 2) На эстетическое восприятие 3) На ограничение доступа к сайту 4) На отображение шрифтов других сайтов в браузере 5) На актуальность информации на сайте
5 вопрос:

Выберите верные утверждения
1) Веб-сайт можно создать с помощью бесплатных инструментов 2) Веб-сайт нельзя создать без знания языка HTML 3) Веб-сайт, размещенный на бесплатном хостинге, виден только его владельцу 4) Аренда домена второго уровня – платная услуга 5) Веб-сайты, созданные с помощью конструкторов, размещаются в доменах 3 уровня
Посмотреть ответы