Как поступить
в Онлайн-школу №1 и получить аттестат?

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

Нажимая на кнопку, я соглашаюсь на обработку персональных данных

Конспект урока: Создание Web-сайта: технологии создания сайта, содержание и структура сайта

Коммуникационные технологии

Создание Web-сайта: технологии создания сайта, содержание и структура сайта

План занятия

 

  • Введение в тему.
  • Технологии создания сайта.
  • Содержание и структура сайта.

 

Цели занятия

 

  • Рассмотреть способы создания сайтов.
  • Изучить типы сайтов.
  • Изучить основные теги для создания заготовки web-страницы сайта на языке HTML.
  • Научиться определять структуру сайта.

 

Разминка

 

  • Что такое сайт?
  • Какие бывают сайты по содержанию?
  • Какую информацию содержит образовательный сайт?

 

 

Введение в тему 

 

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

 

Технологии создания сайта

 

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

 

1. Создание сайта с помощью конструктора сайтов.

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

 

Примеры бесплатных конструкторов сайтов: Wix, Tilda, Mozello, uCoz и др.

 

2. Создание сайта на языке HTML.


 

HTML (Hyper TextMarkup Language) – это язык разметки текста. Особенностью данного языка является то, что вся информация размещается в тегах.

 

Тег  — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Чтобы отличить тег от текста его необходимо заключить в угловые скобки <>.


 

3. Создание сайта на языке программирования.

 

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

Примеры языков программирования, используемых для создания сайтов: JavaScript, Python, Ruby и др.

 

Написание web-сайтов с помощью языка HTML, а также на языках программирования можно выполнять:

  1. В обычном блокноте.
  2. В специальном редакторе (например, Notepad++).

 

Для разработки сайтов с помощью языка программирования можно также воспользоваться системами программирования, например, VisualStudio.

 

Рассмотрим пример простой заготовки web-страницы с использованием языка разметки HTML (HTML5).


Пример 1

 

Написать название страницы «Моя первая web-страница». А внутри страницы написать «Раздел 1» заголовком первого уровня и ниже текст: «Изучаем основы сайтостроения!»

 

Решение:

 

1. Напишем в специальном редакторе Notepad++ указания на языке HTML (Рис. 1).

Рис. 1. Заготовка web-страницы на языке HTML

 

2. Поясним использованные теги (Таблица 1).

 

Таблица 1. Теги используемые в рис. 1

 

3. Отображение указаний после запуска через браузер (Рис. 2).

Рис. 2.  Web-страница, запущенная в браузере

 

Представленные выше технологии расположены в порядке затрат времени на изучение. Самой простой для разработчика является технология создания сайтов с помощью конструкторов, т.к. в ней кроме визуального редактора, где не нужно знать язык HTML, есть еще дизайнерские шаблоны, которые можно использовать для создания собственного сайта. Далее, следует написание сайтов с помощью языка разметки текста и на языке программирования. Данные способы довольно часто используются вместе, т.е. создается отдельный HTML-файл с указаниями и из него происходит обращения к файлам, написанным, например, на языке JavaScript. Поэтому был рассмотрен пример именно с применением языка разметки текста HTML. Можно сказать, что изучение HTML, а в дальнейшем и CSS (язык стилей, CSS3) являются базовыми основами сайтостроения. 

 


Содержание и структура сайта


Содержание (контент) сайта – это любая информация, размещенная на конкретном сайте. Зачастую под контентом понимается текстовое наполнение страниц сайта, реже – аудио- и видеонаполнение.


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

 

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

 

Перечислим несколько самых распространенных критериев ранжирования сайтов:

  1. Степень соответствия ресурса ключевому слову (релевантность).
  2. Пользовательское поведение на конкретном сайте (задерживается на сайте или покидает его сразу).
  3. Средняя продолжительность нахождения пользователя на сайте.
  4. Количество ссылок на других ресурсах, которые направлены на данный сайт.

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

 

Как можно заметить, критерии ранжирования связаны с содержанием сайта. 

 

Основные типы сайтов представлены на рис. 3.

Рис. 3. Типы сайтов

 

Определения и особенности каждого типа сайтов представлены в таблице 2.

 

Таблица 2. Определения, особенности и примеры каждого типа сайтов


Структура сайта – это разбиение содержания конкретного сайта на смысловые разделы и отдельные страницы с указанием связей между ними.


Разработаем структуру сайта спортивного магазина.


Пример 2

 

Создать структуру сайта магазина «Товары для туризма».

 

Решение:

 

  1. Так как это сайт магазина, то на главной странице должны быть контакты, организован вход в личный кабинет и возможность зарегистрироваться. Также нужно организовать возможность оплаты и доставки.
  2. Товары должны быть разделены на разделы, а те в свою очередь на подразделы. Деление должно быть осмысленным и интуитивно понятным, тогда пользователь как можно быстрее найдет то, что ему нужно.
  3. Изобразим граф, отражающий структуру расположения разделов сайта интернет-магазина «Товары для туризма» (Рис. 4).

 

Рис. 4. Структура разделов сайта интернет-магазина

 

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


Вопросы для самоконтроля

 

  1. Перечислите способы создания сайтов.
  2. Какие существуют типы сайтов и чем они отличаются?
  3. Что входит в контент сайта?
  4. Для чего нужно разрабатывать структуру сайта?


Цели изучения курса информатики. Техника безопасности и организация рабочего места

Общие понятия и основы информатики
  • В поисках путей модернизации. Европа меняющаяся

    История

  • Повседневная жизнь и мировосприятие человека XIX века

    История

  • Век демократизации. «Великие идеологии»

    История