Что такое сайт простыми словами, для чего он нужен: что нужно знать чайнику о сайтах

Погружаемся глубже

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

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

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

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

Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите её адрес в адресной строке вашего браузера:

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

Чтобы получить доступ к веб-сайту, наберите его доменное имя в адресной строке браузера, и ваш браузер отобразит главную страницу сайта или, по-другому, домашнюю страницу:

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

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

Не путайте понятия веб-сайта и веб-сервера. Например, если вы слышите, что кто-либо говорит: «Мой веб-сайт не отвечает», на самом деле это означает, что это веб-сервер не отвечает на запрос, и поэтому недоступен и сам сайт. Более того, так как веб-сервер может разместить несколько сайтов, термин веб-сервер никогда не используется для обозначения веб-сайта, так как это могло бы привести к большой путанице. Вернёмся к предыдущему примеру: если бы мы сказали: «Мой веб-сервер не отвечает», это значило бы, что на этом сервере нет доступных сайтов в данный момент.

Загрузка сайта в интернет

Осталось лишь разместить сайт в сети. У нас есть архив с сайтом. Осталось его загрузить на хостинг, который мы уже создали. А сделать мы это можем двумя способами.

3.1 Простой способ

Нам не понадобятся сторонние программы. Для этого необходимо лишь зайти в админ-панель и там выбрать «Файловый менеджер»:

Далее выбрать сайт, который нам нужен и зайти внутрь:

Затем в «public_html»:

Удалить стандартный файл index.php, он нам больше не пригодится.

Выбрать в верхнем меню «Загрузить файлы»:

Нажать на «Browse…»:

Выбрать наш архив на компьютере:

Поставить галочку напротив нашего архива и затем нажать «Загрузка»:

После загрузки можем закрыть данное окно.

Кликнуть на архив правой кнопкой мыши, а в выпадающем списке выбрать пункт «Распаковать архив»:

В появившемся окошке нажать «ОК»:

Супер! Наш архив распаковался как нужно и все файлы лежат в корне. Если вы заархивировали папку, то у вас разархивируется именно папка, что не очень удобно и лучше в самом начале правильно заархивировать файлы (об этом я написал выше).

Осталось открыть домен и проверить!

Мы рассмотрели более простой способ и без загрузки базы данных.

3.2 Чуть более сложный способ

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

Предлагаю использовать FileZilla. Скачать можно здесь.

Когда установите программу необходимо слева вверху кликнуть на значок «Менеджер сайтов»:

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

Жмем «Соединиться» и попадаем к корень нашего хостинга:

Заходим внутрь нашего домена:

Затем внутрь папки «public_html»:

Выделяем все файлы и переносим их правую часть:

Готово! Этот способ чуть сложнее, потому что необходимо подключиться с помощью сторонней программы подключиться к серверу. Но если рассматривать работы над сайтом, как постоянные (а они всегда именно такие, как ремонт ), то такой способ лучше. Потому что у вас на компьютере всегда будет актуальная копия сайта, а не только на сервере.

3.3 Загрузка базы данных на хостинг

Например, если вы создали сайт на WordPress или на другой CMS, то базу данных также нужно загрузить.

Сделать это можно в разделе «MySQL»:

Необходимо создать новую базу данных. Для этого ввести имя базы данных (префикс останется и его удалить нельзя) и пароль:

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

Далее нам необходимо перейти в phpMyAdmin:

Вверху выбрать «Импорт»:

Кликнуть «Обзор» и выбрать SQL файл вашей базы данных на компьютере:

Перед этим в phpMyAdmin на компьютере необходимо сделать экспорт вашей базы данных.

Не забудьте в конфиг файле вашей CMS (в WordPress это файл wp-config.php) прописать новое название базы данных, новое имя пользователя и пароль, который вы задали на хостинге.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.

Напомним, что мы рассмотрели следующее:

Разница между HTML и CSS.
Знакомство с элементами HTML, тегами и атрибутами.
Настройка структуры вашей первой веб-страницы.
Знакомство с селекторами CSS, свойствами и значениями.
Работа с селекторами CSS.
Указатель на CSS из HTML.
Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Виды хостингов

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

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

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

Платный хостинг, в свою очередь, также делится на несколько видов:

— Виртуальный хостинг является наиболее востребованным. Это сервер, позволяющий размещать большое количество интернет ресурсов. Все пользователи сервера обладают одинаковыми правами. На основном сервере создаются виртуальные, в которых хранятся сайты с файлами и папками. Такой вариант является оптимальным для начинающих и средних ресурсов;

— Выделенный виртуальный сервер VPS. В таком случае пользователю предоставляется определенное пространство на диске, в котором можно размещать свой сайт и осуществлять полное управлением им. Это открывает значительные возможности в настройке программного обеспечения, но требует знаний и навыков;

— Выделенный сервер — это одна из наиболее дорогих услуг, но предоставляющих максимум возможностей. В таком случае владельцу сайта предоставляется в пользование полностью выделенный сервер, на котором можно устанавливать любые программы и операционные системы, а также использовать его для любых поставленных задач. Обслуживанием сервера будет заниматься провайдер, предоставивший его в пользование. Таким вариантом обычно пользуются крупнейшие компании и организации, у которых сайты с многотысячной аудиторией посетителей;

— Colocation — этот тип хостинга заключается в установке сервера в датацентре провайдера. Такой вариант является самым дорогим и предоставляющим широчайшие возможности.

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

Что значит сообщение «веб-страница замедляет браузер»

Часто при просмотре сайтов возникает отображается текст «Веб-страница замедляет ваш браузер». Как правило, замедление происходит из-за того, что браузер автоматически загружает много ненужных скриптов на данной странице. Чтобы решить проблему, необходимо поменять настройки веб-обозревателя с целью быстрой загрузки скриптов. Для этого заходим в меню браузера, ищем «Инструменты», затем жмем пункт «Добавить». Ищем специализированный плагин «Shockwave Flash» и устанавливаем его. Затем в настройках плагина выбираем пункт «Спрашивать перед активацией» и ставим рядом с ним галочку

Обратите внимание, что наименование пунктов может меняться в зависимости от используемого браузера, главное – уловить смысл

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

Метаданные html страницы

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

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

Следующий метатег «meta» сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута «content» тега «meta».

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

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

Как работает веб-сайт

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

Для владельца сайта очевидна необходимость постоянного обновления данных, размещения нового материала, управления ресурсом. С этой целью используется Content Management System (CMS). Это движок, который позволяет формировать страницы, исходя из запросов и потребностей пользователей. Внутри CMS есть 2 интерфейса: пользовательский и администраторский, то есть сторона для посетителей и сторона для администратора. Добавление контента, настройка модулей, рассылка и прочие операции выполняются из блока администратора. Редактирование выполняется специальным WYSIWYG-редактором, который очень схож с Word.

Для администратора важно наличие CMS и системы управления базами данных. Именно здесь будет сохраняться вся информация и содержимое ресурса

Система CMS работает на языке программирования php.

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

Что такое официальный сайт

Любой вид домена может быть использован официальными сайтами. Домены верхнего уровня, такие как ru, .com, .org или .edu, являются наиболее распространенными. Официальный веб-сайт для правительственной организации часто идентифицирует себя, как санкционированное этим правительством с определенным доменом второго уровня.

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

Тип HTML документа (doctype)

Осталось рассмотреть один тег нашей первой WEB-страницы, который находится в самом начале html-кода: «!doctype html». Данный тег задает версию языка HTML, на котором написана страница, и его версию.

Он необходим, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. Метатегов doctype существует несколько видов, и они различаются в зависимости от версии языка, на котором написан html-код. Так, наш тег !doctype html указывает на версию языка HTML5.

Итак, подведем итоги:

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

2. HTML — это язык, который используется для создания web-страниц. HTML — это аббревиатура HyperText Markup Language (язык гипертекстовой разметки).

3. WEB-страницы состоят из html-тегов и их содержимого. Теги состоят из символов и имени внутри них. Имена тегов можно писать как прописными(большими), так и строчными(маленькими) буквами. Между символами и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк. Теги бывают парные и одиночные, а также теги могут быть вложенными друг в друга.

4. Открывающий тег + содержимое + закрывающий тег образуют элемент. Бывают также элементы состоящие из одного открывающего тега. В HTML есть блочные элементы и строчные. Блочные элементы всегда выводятся с новой строки и имеют отступ сверху и снизу от соседних элементов. Строчные элементы осуществляют логическое форматирование текста.

5. Открывающие HTML-теги могут содержать атрибуты, которые помещаются между именем тега и символом и отделяются от имени тега пробелом. Если в теге несколько атрибутов, то они отделяются друг от друга пробелами. Атрибуты бывают обязательные и необязательные.

6. Любая WEB-страница должна содержать в себе две секции: секция заголовков head и секция тела body. Эти секции должны находиться внутри тега html. Это основные теги html, без которых не обходится ни одна html-страница.

7. Вначале HTML-кода должен идти метатег doctype, указывающий версию языка.

На этом мы закончим знакомиться с основами html. Чтобы научится применять язык HTML на практике необходимо изучить конкретные теги, их особенности и свойства. Для создания простейших веб-страниц необходимо изучить следующие вопросы:

• Как создавать заголовки и абзацы в html;
• Как вставить изображение в html;
• Как вставить таблицу на сайт;
• Как создать гиперссылку.

Для того, чтобы придать вашим страницам красочности и привлекательности вам понадобиться заняться более сложным вопросом — изучением CSS.

На этом у меня все!!! До встречи в следующих постах!

Что такое адаптивный сайт

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

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

Адаптивный дизайн сайта состоит из следующих трех основных компонентов:

• Гибкие макеты: использование гибкой сетки для создания макета сайта, который будет динамически изменяться до любой ширины;
• Медиа-запросы: расширение типов медиа при таргетинге и включении стилей. Медиа-запросы позволяют дизайнерам указывать разные стили для конкретных вариаций браузера и устройства;
• Гибкое мультимедиа — позволяет масштабировать мультимедиа (изображения, видео и другие форматы), изменяя размер по мере изменения размера области просмотра.

Адаптивные сайты используют жидкостные сетки. Все элементы страницы имеют размеры пропорционально, а не пиксели. Таким образом, если у вас есть три столбца, вы не скажете точно, насколько широкими они должны быть, а скорее, насколько они должны быть шире по отношению к другим столбцам. Столбец 1 должен занимать половину страницы, столбец 2 должен занимать 30%, а столбец 3 должен занимать, например, 20%.

История создания и разработки веб-сайтов

Создателем первого в мире электронного ресурса является ученый Европейской лаборатории элементарных частиц Тим Бернерс-Ли. Именно им в декабре 1990 был разработан первый веб-браузер, который носил название World Wide Web. Сервер был основан на базе NeXTcube.

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

9 августа 1991 года появился первый онлайн-ресурс. При создании сайта была использована технология World Wide Web (WWW) и протокол передачи данных Hyper Text Transfer Protocol (HTTP), разработанный с помощью системы адресации Uniform Resource Identifier на языке программировании Hyper Text Markup Language (HTML).

На страницах первого интернет-ресурса были размещены настройки установки и работы браузеров и серверов. Ученый Тим Бернерс-Ли был уверен в том, что гипертекст может быть базой для сетей обмена данных. Свой первый проект Enquire (– гипертекстовое программное обеспечение) Тим Бернерс-Ли разработал в 1980 году.

Стандарт WWW был утвержден в мае 1991 года членами Европейского Центра ядерных исследований в Женеве (CERN). Спецификации HTTP, HTML, URI утверждены были в 1993 году. В 1993 году World Wide Web стала официально бесплатной и свободной для всего мира.

Какие элементы содержит веб-страница?

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

Название сайта, логотип или название компании почти всегда находятся в верхнем левом углу каждой веб-страницы. Также неплохо использовать слоган или краткое описание страницы, чтобы дать новым посетителям представление о сайте. Этот элемент веб-страницы обычно является ссылкой, которая ведет на главную страницу;
Панель поиска позволяет посетителям быстро найти веб-страницу. Она должна присутствовать на каждой странице;
Панель или меню навигации обычно находится в верхней или левой части каждой веб-страницы. Она и должна включать в себя ссылки на каждый из основных разделов сайта;
Рекламные баннеры могут отображаться в разных местах на веб-странице. Обычно они отображаются в верхней, левой, правой или нижней части веб-страницы или включены в основной контент;
Социальные кнопки позволяют посетителям делиться ссылкой на веб-страницу на сайтах социальных сетей;
В созданных web страницах хлебные крошки помогают посетителю понять, где он находится, а также перейти к другим разделам сайта;
Заголовок должен находиться в верхней части каждой веб-страницы. Он создается с использованием HTML-тега

.
Начальный абзац является одним из наиболее важных элементов веб-страницы. Он должен заинтересовать посетителя ознакомиться с содержимым веб-страницыОдин из способов привлечь внимание посетителей — вставить изображение рядом с начальным абзацем;
Каждая веб-страница должна быть разбита на заголовки более низкого уровня, которые позволяют посетителю легко просматривать контент и находить на странице то, что ему наиболее интересно. При создании веб-страницы это можно сделать с помощью HTML-тегов

…

;
Хорошая идея — предоставить посетителям ссылку или кнопку, перенаправляющую на форму обратной связи, чтобы они могли сообщить, была ли полезна им данная веб-страница или нет;
Дополнительная информация и инструменты, такие как кнопка для вывода страницы на печать, также могут быть полезны для пользователей;
Футер должен включать в себя дополнительную информацию, которая важна для компании или сайта

А также ссылки на другие веб-страницы;
Копирайт и любое юридическое или конфиденциальное уведомление также должны быть размещены на всех веб-страницах. В основах проектирования web страниц этот элемент не только может ссылаться на соответствующую юридическую информацию. Он также указывает, что посетители достигли конца веб-страницы;
Кнопка «Вверх страницы» может помочь посетителям быстро вернуться к верхней части веб-страницы, чтобы получить доступ к ссылкам меню.

И что в итоге

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

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

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

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

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

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

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