Создание своей web страницы на тему. Создание html страницы в блокноте: разъяснения для чайников

Веб-сайт, часто называют сокращённо сайт - это не что иное, как совокупность логически связанных между собой веб-страниц, или просто одна страница. Страницы сайта доступны в Интернете средствами протоколов HTTP или HTTPS. Веб-сайт имеет своё место в интернете, определяемое персональным для каждого сайта адресом, который принято называть URL. Любой веб-сайт имеет своего владельца, владельцем может быть как физическое, так и юридическое лицо.

Веб-сайт состоит из страниц

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

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

Язык HTML / XHTML даёт возможность форматировать страницы, помещать на них текст, гиперссылки, таблицы, картинки и другие объекты. Таблица стилей CSS, которую можно использовать в HTML документах даёт дополнительные возможности для создания внешнего вида веб-страниц.

JavaScript и некоторые другие скриптовые языки

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

Страницы сайта

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

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

Немного из истории развития веб-сайтов

Первый в мире сайт был создан 6 августа 1991 г. Американцем Тимом Бернерс-Ли он разместил на сайте публикацию о технологии World Wide Web. Основой технологии World Wide Web является протокол передачи данных HTTP, язык гипертекстовой разметки HTML и система адресации URL. На сайте также были описаны и другие основные принципы работы сети Интернет, такие как работа серверов, веб-браузеров и т.д. Сайт, созданный Тимом Бернерс-Ли, так же стал первым мире Интернет каталогом, т.к. на нём позже были размещены ссылки и на другие ресурсы тогдашнего Интернета.

Необходимые инструменты для работы сайта были подготовлены ещё раньше, в конце 1990 появился первый браузер, который получил название WorldWideWeb, он дополнительно включал функцию гипертекстового редактора. Тим Бернерс-Ли также подготовил первый веб-сервер на базе NeXTcube.

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

В двух словах

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

Мы разберём эти понятия и технологии чуть позже, а сейчас краткие определения ниже станут для Вас очень хорошим началом:

Веб-страница Документ, который может быть отображён веб-браузерами, такими как: Firefox, Google Chrome, Microsoft Internet Explorer / Edge или Safari от Apple. Само понятие "веб-страница" для краткости будем называть просто "страница". Веб-сайт Коллекция веб-страниц, связанных между собой какими-либо способами. Употребление в лексике: "веб-сайт" или просто "сайт". Веб-сервер Компьютер, предоставляющий компьютерное и программное обеспечение, необходимое для функционирования веб-сайта. Поисковая система Веб-сайт, помогающий в поиске других веб-страниц, например такие как: Google, Bing или Yahoo.

Активное изучение

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

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

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

Веб-страница

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

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

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

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

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

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

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

Веб-сервер

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

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

Поисковая система

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

Наиболее популярные поисковые системы: Google , Bing , Yandex , DuckDuckGo , и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определенную область. Используйте тот поисковик, который удобен Вам.

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

Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:

: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).

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

Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").

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

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

Это первая web-страница!

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги и .</p><p> <html> <head> <title>Первая страница Это моя первая web-страница!!!

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

Описание тегов.

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

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

Тег </b> - парный тег (<title> и ), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега !

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

В следующем уроке мы поговорим о видах тегов и правило их написания.

Итак, что же такое Web-сайт и Web-страница? Чтобы разобраться в этом вопросе, давайте подумаем, а какая собственно информация может содержаться на Web-сайте? Ответ очевиден - практически любая. Сайт может содержать информацию о компьютерных играх, автомобилях, аквариумных рыбках, мифических существах, городах и странах мира и т.д. и т.п. Список можно продолжать бесконечно. На сайте даже можно разместить, к примеру, произведения великих русских классиков. Как вам например сайт "Война и мир"? Получается, что сайт это книга, но только не простая, а электронная? Да, Web-сайт, по своей сути, действительно является электронной книгой, журналом или учебником, который может содержать как полезную для вас информацию, так и ту, что вас на данный момент совсем не интересует.

Как и обычная книга, Web-сайт состоит из страниц, которые называются Web-страницами.

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

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

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

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

В "классическом" случае, в качестве гиперссылок используют часть текста (слово или несколько слов) и графические изображения (рисунки и фотографии).

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

Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно. Как же в таком случае определить, является изображение гиперссылкой или нет? На этот случай запомните следующее правило: "Если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой".

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

Контрольные вопросы:

Что такое Web-сайт?

Что такое Web-страница?

Что такое гиперссылка?

Какие элементы Web-страницы могут быть использованы в качестве гиперссылок?

Как определить, является ли элемент страницы гиперссылкой?

Могут ли отдельные Web-страницы сайта не содержать ни одной гиперссылки?

С чего начинается web-страница?
Из каких этапов строится процесс создания Для того чтобы понять, что такое веб-страница, необходимо разобраться в том, как она формируется.
Дизайн
Начинается все с работы дизайнера. Он, в соответствии с требованиями и целями заказчика, разрабатывает макет будущего сайта. Этот макет создается для одной, двух или нескольких страниц. На этом этапе определяется расположение всех необходимых объектов, проводится подбор шрифтов, картинок, оформления в целом. То есть первоначально формируется внешний вид страниц, из которых затем будет собран полноценный сайт.
Верстка
Затем в работу включается верстальщик. На основе разработанного дизайнером макета он делает разметку страницы, оптимизируя ее под различные браузеры. Для этого создается обычный документ, например, в "Блокноте", который сохраняется с расширением.html. Именно на этом языке и пишется простая веб-страница. HTML расшифровывается как HyperText Markup Language и представляет собой набор тегов, служащих для реализации разнообразных задач. Этот язык достаточно прост, но функционален. С его помощью создается логическая структура страницы и происходит ее разделение на отдельные элементы - заголовки, списки, абзацы, таблицы и прочие объекты. Кроме того, теги определяют значение всего контента. Они дают браузеру информацию о том, что нужно выделить, подчеркнуть, где отступить, где вставить картинку, а что преобразовать в ссылку. В результате страница приобретает соответствующий вид. Однако чтобы она полностью соответствовала тому, что придумал дизайнер, необходимо также использовать CSS. Это каскадные таблицы стилей, которые задают внешний вид html-документа, его оформление. С помощью CSS-инструментов можно "покрасить" страничку в нужные цвета, применить тот или иной стиль шрифта, добавить другие элементы дизайна. Использование HTML и CSS дает нам готовую, красиво оформленную страницу. Но ей еще нужно придать динамичности, а это уже дело программиста.
Программирование
На данном этапе у вас уже сформировалось понимание того, что такое веб-страница и как она создается. Однако это еще не все. Страницы бывают нескольких видов - статические, динамические и интерактивные. Первые как раз относятся к тем, которые созданы только с использованием html и css. Для того чтобы сделать страницу динамичной, необходим движок - CMS (или Content Managment System). Это специальная программа, которая по запросам пользователей формирует страницу из данных, хранящихся в базе сервера. То есть страница создается в момент поступления запроса от пользователя. Для ее написания используются такие языки, как ASP, PHP и другие. Что касается интерактивных страниц, то они включают в себя так называемые формы, с помощью которых пользователь и сервер обмениваются данными. Они также пишутся на языках PHP, JavaScript и др. Программирование - более сложный процесс, чем верстка, он требует качественных специфических знаний хотя бы одного (а лучше нескольких) из перечисленных языков.
Как загружается web-страница?
Для того, чтобы страница стала доступна всем пользователям сети Интернет, ее (то есть документ, в котором она описана) помещают на веб-сервер. Это компьютер, непрерывно работающий в ожидании поступления запросов от браузеров. Когда он его получает, то находит требуемый ресурс (например, веб-страницу) и отправляет ее соответствующему браузеру. А тот, в свою очередь, на основе содержащейся в документе информации (сигналов) отображает веб-страницу.
Почему открыть web-страницу не получается?
Бывают ситуации, когда вы вводите запрос (указываете адрес, пишите слово в поисковую строку или кликаете по ссылке), но браузер не может отобразить нужную вам информацию и пишет, что веб-страница не найдена. В чем здесь причина и как решить подобную проблему?
Во-первых, следует проверить url-адрес - правильно ли он указан. Если в какой-то букве или знаке допущена ошибка, тогда сервер не сможет найти адекватную вашему запросу информацию, а браузер, соответственно, отобразить ее. Но если адрес правильный, то почему веб-страница недоступна? Причиной могут быть куки-файлы. Их создают веб-страницы, которые вы посещали ранее, для хранения каких-то настроек и прочего. Если такой файл поврежден, это может помешать нормальной загрузке страницы. Чтобы исправить ситуацию, его нужно удалить. Для этого в найдите раздел "Конфиденциальность", перейдите в настройки контента и в открывшемся окне выберите "Все cookie-файлы и данные сайтов". Нажмите "Удалить все".
Третьей причиной может быть медленная работа браузера в связи с использованием прокси-сервера. Для исправления проблемы необходимо сменить настройки. Сделать это можно в разделе "Подключения к Интернету". Выберите используемую вами сеть, откройте параметры и найдите вкладку "Прокси-сервер". Задайте нужные настройки его использования. Теперь все должно заработать.
Заключение
Из данной статьи вы узнали о том, что такое веб-страница, как она формируется и какие специалисты принимают участие в ее создании. Мы также рассмотрели вопрос о том, как происходит загрузка страниц сайта и их отображение, почему они могут не открываться и как эту проблему решить. Теперь вы чуть больше знаете о том, как функционирует Интернет и что представляют собой его веб-ресурсы.