Виды и типы сайтов. Основы HTML

1.

В иды и Типы Сайтов.
Основы HTML

2.

Основные понятия
• Гипертекст - это текст, в котором содержаться ссылки на другие документы или переходы внутри
исходного документа. Это один из основных способов размещения информации в глобальной сети
Internet и родственных ей сетях intranet.
• Web-страница - это электронный документ, в котором кроме текста содержатся специальные
команды форматирования, а также встроенные объекты (рисунки, аудио- и видеоклипы и др.).
• Web-сайт - совокупность web-документов, объединенных по какому-либо признаку (адресом сервера,
темой, оформлением).
• Браузер - специальная программа для просмотра Web-страницы (например Internet Explorer, Mozilla
Firefox, Opera и др.).
• HTTP (Hyper Text Transfer Protocol) - протокол передачи гипертекста для доступа к Web-страницам.
• Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них –
возвращает веб-страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы).

3.

К
Л
А
С
С
И
Ф
И
К
А
Ц
И
Я
С
А
Й
Т
О
В
По размеру
- ОДНОСТРАНИЧНЫЕ
- МНОГОСТРАНИЧНЫЕ
По технологии
отображения
- СТАТИЧЕСКИЕ
- ДИНАМИЧЕСКИЕ
- FLASH ТЕХНОЛОГИИ
По типам макетов
По степени доступности
сервисов
По структуре сайтов
- ФИКСИРОВАННОЙ
ШИРИНЫ
- АДАПТИВНЫЕ
- ДИНАМИЧНО ЭЛАСТИЧНЫЕ
- ОТКРЫТЫЕ
- ПОЛУОТКРЫТЫЕ
- ЗАКРЫТЫЕ
- ВНЕШНЯЯ
- ВНУТРЕННЯЯ
- ЛИНЕЙНАЯ
- ЛИНЕЙНОРАЗВЕТВЛЕННАЯ
- БЛОЧНАЯ/СЕТЕВАЯ
- ДРЕВОВИДНАЯ

4.

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

5.

Виды сайтов.
Разновидностей сайтов достаточно много, однако по основным характеристикам можно
выделить 3 основные группы сайтов:
интернет-представительства
информационные услуги
веб-сервисы
5

6.

Корпоративные Сайты
1
Цель
2
Функции
Предоставление
Коммуникация с
информации о компании,
клиентами,
ее продуктах и услугах.
формирование имиджа,
помощь в выборе.
3
Примеры
Сайты-визитки, галереи, каталоги продукции.

7.

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

8.

Интернет-Магазины
Покупка Товаров
Оплата
Предлагают возможность
Обеспечивают удобные способы
приобрести товары и услуги
оплаты онлайн.
онлайн.
Достав ка
Предлагают различные
варианты доставки товаров.

9.

Веб-Сервисы
Поисковые Сервисы
1
Помогают найти информацию в интернете.
2
Почтовые Сервисы
Обеспечивают отправку и получение электронной
Доски Объявлений
3
почты.
Предлагают платформу для размещения объявлений о
продаже и покупке.
4
Сайты-Агрегаторы
Соединяют продавцов и покупателей услуг.
Видеохостинги
5
Предоставляют платформу для хранения и просмотра
видео.
6
Социальные Сети
Обеспечивают платформу для общения и
взаимодействия.

10.

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

11.

По типам макетов
Фиксированной ширины
размеры элементов страницы имеют фиксированное значение, независящее от
разрешения, размера, соотношения сторон экрана монитора и размеров окна
обозревателя, задаётся в абсолютных значениях — PX (пиксели),
Адаптивны е сайты
размеры несущих элементов, значения ширины, задаются относительным
значением — % (проценты), страницы отображаются во весь экран монитора по
ширине
Динамично эластичные
размеры большинства элементов задаются относительными значениями — EM и %
(проценты). Все относительные пропорции размеров элементов всегда остаются
неизменными, независимо от разрешения, размера, соотношения сторон экрана монитора,
размеров окна и масштаба окна обозревателя. И всегда постоянны относительно окна
обозревателя.

12.

Типы Сайтов по Доступности
Открытые
1
Доступны всем посетителям.
Полуоткрытые
2
Требуют регистрации для доступа.
Закрытые
3
Доступны только для ограниченного круга
пользователей.

13.

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

14.

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

15.

Внутренняя структура – это схема для создателей сайта за интерфейсом, она состоит из категорий и материалов, связанных
между собой. Внутренняя структура может быть:
Линейная, в этом случае пользователь
поочередно видит каждую страницу. Все они
при этом ссылаются на главную и
одновременно друг на друга. Сайт в этом
случае выглядит так, что читатель
последовательно проходит путь - все
страницы, знакомясь с содержанием каждой
из них. Подобная структура подходит для
мероприятий для презентаций или
для портфолио.
Блочная, из
нескольких страниц,
на каждую из которых
приводят ссылки с
остальных. Это
достаточно
специфичная
структура, и ее
используют далеко не
все площадки.
Линейная с ответвлениями – тип,
похожий на предыдущий, и все
сказанное о нем, относится и к данному
виду. С той разницей, что страницы
объединены в блоки. К примеру, это
может быть портфолио студии дизайна,
которая представляет свои работы в
разных стилях.
Древовидная, самая популярная.
Предполагает, что для каждого
направления есть отдельная ветка,
то есть разделы и подкатегории.
Разделы при этом линкуются друг
с другом и с главной.

16. Способы разработки сайта.

В настоящее время существует масса различных способов и средств создать свой сайт. Есть как минимум четыре
основных варианта:
1. Создать сайт самостоятельно на HTML, CSS, Javascript;
2. Использовать бесплатный конструктор сайта;
3. Создать сайт, используя CMS;
4. Доверить создание сайта специалистам.
1.Конструктор
Конструктор – программное решение (чаще всего онлайн), позволяющее построить сайт по модульному принципу,
когда разработчик собирает всю конструкцию с помощью готовых «кубиков», которые предоставляет конструктор.
Такой подход позволяет создать сайт вообще без знаний о веб-разработке и сопутствующих навыков.
2.CMS
CMS – это комплекс программных инструментов для управления веб-контентом. Простыми словами – это базовый
каркас и набор дополнительных инструментов и надстроек, который позволяет не только создать веб-сайт или вебприложение, но и поддерживать его работу, обновлять контент и взаимодействовать с пользователями. Все CMS
имеют панель управления с относительно дружелюбным интерфейсом. Основной язык программирования – PHP.
Любая CMS может позволить создать даже очень сложные решения, такие как интернет-магазины или большие
корпоративные сайты с глубокой вложенностью страниц, но и у них есть свои особенности.
3. Самостоятельная разработка
Самый творческий и свободный, но и самый трудоемкий процесс. Написание сайта или веб-приложения требует
серьезных знаний не только по самим языкам программирования, но и пониманию архитектуры, бизнес-процессов
клиента и многому другого. При этом, создавая сайт с нуля, клиент получит уникальный и персонифицированный
продукт, который будет решать его задачи и не тратить время на лишние процессы. Самостоятельная разработка
позволяет создавать проекты любой сложности и по любым пожеланиям клиента.
16

17.

18.

Основные понятия
• Унифицированный указатель ресурса URL (Uniformed
Resource Locator) или URL-адрес - стандартизированный
способ записи адреса ресурса в сети Интернет.
Пример URL:
http://www.kniga.net/htm/exam/answers/images/a23_1.gif
1
Протокол передачи
гипертекста HTTP
2
Доменное имя компьютера, на
котором хранится данный
документ
3
Путь доступа к файлу с именем файла,
содержащему Web-документ, на
указанном компьютере
Здесь приведен URL-адрес рисунка, находящегося на одной из Webстраниц портала www.kniga.net.

19. Тег

HTML (HyperText Markup Language) — это язык разметки, используемый для создания структуры
веб-страниц. С помощью HTML можно добавлять текст, изображения, ссылки и другие элементы на
страницу.
Основные понятия:
• Тег – элемент языка разметки гипертекста.
Для обозначения тегов используется угловые скобки <тег>. Тег — основной строительный блок
HTML. Теги заключаются в угловые скобки (< >).
Пример: <tag>Контент</tag>.
Виды тегов:
1) парные, которые выделяют блок текста, также называются еще контейнером. Контейнер
требует закрывающего тега, обозначаемого </тег>.
2) одиночные. Не требует закрывающего тега.
Атрибуты — свойства тега, которые уточняют или изменяют его поведение.
Пример: <a href="https://example.com">Ссылка</a>.
Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.

20. Объектная модель документа

HTML-документ состоит из дерева HTML-элементов и текста.
Каждый элемент обозначается в исходном документе начальным
(открывающим) и конечным (закрывающим) тегом (за редким
исключением).
Элементы, находящиеся внутри элемента <html>, образуют дерево
документа, так называемую объектную модель документа, DOM
(document object model). При этом элемент <html> является корневым
элементом.
Отношения между множественными вложенными элементами подразделяются на родительские,
дочерние и сестринские.
Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов
является <html>. В то же время элемент <body> является предком для всех содержащихся в нем
элементов: <h1>, <p>, <span>, <nav> и т.д.
Потомок
—
элемент,
расположенный
внутри
одного
или
более
типов
элементов.
Например, <body> является потомком <html>, а элемент <p> является потомком одновременно
для <body> и <html>.
Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и
находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>.
Элемент <p> является родительским только для <span>.
Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня.
На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.
Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так
называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и
элементы <h1>, <h2> и <p> являются между собой сестринскими.

21. Тег

Пример 1. Использование парных тегов (контейнера)
<b>Жирный шрифт</b> в тексте.
Пример 2. Использование одиночных тегов
Первая строка текста <br> Вторая строка текста.
Пример 3. Правильное сочетание тегов
<b><i>Полужирный курсивный текст</i></b>
Пример 4. Неправильное сочетание тегов
<i><b>Полужирный курсивный текст</i></b>

22. Структура документа

HTML-документ состоит из двух
разделов - заголовка (HEAD) и тела
документа (BODY).
Раздел заголовка документа (HEAD)
определяет заголовок веб-страницы и
содержит служебную информацию.
Раздел тела документа (BODY)
хранит видимое содержание страницы.
<html>
<head>
<title>Заголовок
страницы</title>
Служебная
информация
</head>
<body>
Видимое содержание
страницы
</body>
</html>

23. Типы тегов:

• форматирование;
• верстка списков;
• верстка таблиц;
• формирование гиперссылок;
• вставка изображений.

24. Основные теги и их описание в HTML

<html> Определяет документ HTML
<body> Определяет основную часть или тело документа
<h1> -- <h6> Определяет заголовки с 1 по 6
<p> Определяет параграф
<br> Вставляет единичный перенос строки
<hr> Определяет горизонтальную линию
<!--> Определяет комментарий

25.

Задать тип выравнивания заголовка
для тэга заголовка позволяет атрибут
ALIGN, которому требуется придать
определенное значение.
ALIGN=“right” – выравнивание по
правому краю
ALIGN=“center” – выравнивание по
центру
ALIGN=“left” – выравнивание по
левому краю
<Html>
<Head>
<Title> Компьютер </title>
</head>
<body>
<H1 ALIGN="center"> Все о компьютере
</H1>
</body>
</html>

26. Форматирование текста

Форматирование текста - средства его изменения, такие как выбор начертания
шрифта и использование эффектов, позволяющих менять вид текста.
Код HTML
Описание
<b>Текст</b>
Жирный текст
<i>Текст</i>
Курсивное начертание текста
<u>Текст</u>
Подчеркнутый текст
^Текст
Верхний индекс
_Текст
Нижний индекс
<strike>Текст</strike>
Зачеркнутый текст
<pre>Текст</pre>
Текст пишется как есть, включая все пробелы
<em>Текст</em>
Курсивный текст
<strong>Текст</strong>
Жирный текст
Строка1<br> Строка2
Перевод курсора в новую строку

27. Начертания и эффекты текста

Пример 1. Жирный курсивный текст
Результат в браузере:
"Привет" – мое приветствие.
Запись в коде:
<b><i>"Привет"</i></b> – мое приветствие.
Пример 2. Создание нижнего индекса
Результат в браузере:
Формула серной кислоты: H2SO4
Запись в коде:
<b>Формула серной кислоты:</b> <i>H₂SO₄</i>

28. Форматирование текста

<Html>
<Head>
<Title> Компьютер </title>
</head>
<body>
<H1 ALIGN="center"> Все о компьютере </H1>
<B> Жирный </B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<B> <I> <U> Жирный подчеркнутый курсив
</U></I></B>
<TT> Равноширинный </TT>
<EM> Выделение </EM>
<STRONG> Усиленное выделение </STRONG>
</body>
</html>

29.

Для выделения фрагментов текста используется тэг <FONT> </FONT>
Этот тэг имеет следующие атрибуты:
FACE – задает гарнитуру шрифта (например, FACE=“Arial”)
SIZE – задает размер шрифта (например, SIZE=4)
COLOR – задает цвет шрифта (например, COLOR=“blue”).
Значение атрибута COLOR можно задать либо значением цвета
(например, “red”, “green”, “blue” и тд.), либо шестнадцатеричным его
значением, которое использует RGB-формат “#RRGGBB”.
<Html>
<Head>
<Title>
Компьютер </title>
</head>
<body>
<FONT COLOR="blue">
<H1 ALIGN="center">
Все о компьютере </H1>
</FONT>
<HR>
</body>
</html>

30. Форматирование текста

Разделение текста на абзацы производится с помощью тэга <P> </P>.
Например, поместим на титульную страницу текст, разбитый
на абзацы с различным выравниванием:
<P ALIGN=“left”> На этом сайте вы сможете получить различную
информацию о компьютере, его программном обеспечении и
ценах на компьютерные комплектующие. </P>
<P ALIGN=“right”> Терминологический словарь познакомит вас с
компьютерным терминами, а также вы сможете заполнить анкету.
</P>

31. Изображения

Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG, PNG.
Для вставки изображения используется одиночный тэг <IMG> с атрибутом SRC, который указывает место хранения
файла на локальном компьютере или в Интернете.
Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в
качестве значения атрибута SRC достаточно указать только имя файла:
<IMG SRC=“computer.jpg >
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное
имя файла (включая путь к файлу).
<IMG SRC=“C:\computer\comp.jpg”>
Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла.
<IMG SRC=“http://www.server.ru/comp.jpg”>
Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии
времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не
терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен
был бы увидеть пользователь на рисунке.

32.

<html>
<head>
<Title> Компьютер </title>
</head>
<body>
<FONT COLOR="blue">
<H1 ALIGN="center"> Все о компьютере </H1>
</FONT>
<HR>
<IMG SRC="comp.jpg" >
<p ALIGN="left"> На этом сайте вы сможете
получить различную информацию о
компьютере, его программном обеспечении и
ценах на компьютерные комплектующие.
</p>
<p ALIGN="right"> Терминологический словарь
познакомит вас с компьютерным терминами,
а также вы сможете заполнить анкету. </p>
</body>
</html>

33. Списки

HTML-списки используются для группировки связанных
между собой фрагментов информации. Существует три
вида списков:
• маркированный список — <ul> — каждый элемент
списка <li> отмечается маркером,
• нумерованный список — <ol> — каждый элемент
списка <li> отмечается цифрой,
• список определений — <dl> — состоит из пар
термин <dt> — <dd> определение.

34. Гиперссылки

HTML-ссылки создаются с помощью элементов <a>, <area> и <link>. Ссылки
представляют собой связь между двумя ресурсами, одним из которых является
текущий документ.
Ссылки можно поделить на две категории:
• ссылки на внешние ресурсы — создаются с помощью элемента <link> и
используются для расширения возможностей текущего документа при
обработке браузером;
• гиперссылки — ссылки на другие ресурсы, которые пользователь может
посетить или загрузить.
<a href="http://site.ru">указатель ссылки</a>
Ссылка состоит из двух частей — указателя и адресной части. Указатель
ссылки представляет собой фрагмент текста или изображение, видимые
для пользователя. Адресная часть ссылки пользователю не видна, она
представляет собой адрес ресурса, к которому необходимо перейти.

35. Цветовые схемы

Цвет на Web-странице задают либо его названием, либо числовым шестиразрядным
шестнадцатеричным кодом #RRGGBB, где две первые цифры задают интенсивность
красного цвета (red), средние две цифры – интенсивность зеленого (green), и последние
две цифры – интенсивность синего (blue) цветов. Минимальная интенсивность цвета
задается 16-ричным числом 00, а максимальная – FF. К примеру, синий цвет задается как
“#0000FF”. В таблице приведены значения некоторых цветов:
цвет
код
название
цвет
код
название
Черный
#000000
Black
Фиолетовый
#FF00FF
Magenta
Белый
#FFFFFF
White
Бирюзовый
#00FFFF
Cyan
Красный
#FF0000
Red
Желтый
#FFFF00
Yellow
Зеленый
#00FF00
Lime
Золотой
#FFD800
Gold
Синий
#0000FF
Blue
Оранжевый
#FFA500
orange
Серый
#808080
Gray
Коричневый
#A82828
Brown

36. Литература:

Основы WEB-технологий [Текст] : учеб. пособие для студ. вузов, обуч. по спец. 351400
"Прикладная информатика" / П. Б. Храмцов, С. А. Брик, А. М. Русак, А. И. Сурин. - 2-е изд.,
испр. - М. : ИНТУИТ : БИНОМ. ЛЗ, 2007. - 374 с.
Кожемякин, А. А. HTML и CSS в примерах. Создание WEB-страниц [Текст] / А. А.
Кожемякин. - М.
Коэн, Л. И. Полный справочник по HTML, CSS и JavaScript [Текст] : справочник / Л. И. Коэн,
Дж. И. Коэн. - М. : ЭКОМ, 2007. - 1168 с.
Вайк, А. Р. JavaScript. Полное руководство [Текст] : пер. с англ. / А. Вайк, Дж. Джиллиам. - 4-е
изд. - М. ; СПб. ; К. : Вильямс, 2004. - 720 с.
https://craftum.com/blog/struktura-sajta/
https://market-makers.org/%D0%B2%D0%B8%D0%B4%D1%8B%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2/
https://craftum.com/blog/struktura-sajta/
36