Что такое web страница и какие существуют способы ее создания. Основные термины HTML

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

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

Как создать страничку

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

Откройте документ.

Вставьте в него вот этот код.

Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

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

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

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

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

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

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

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

Теги

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

Она не единственная и я могу предложить вам еще несколько если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части.

Основные

Начинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.

Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

Именно теги отвечают за начало и конец основной информации о страничке.

Тег

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

Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4.

В этой же строчке есть открывающийся и закрывающийся

. Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.

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

Картинка

Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.

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

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

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

отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

помогает выделить текст жирным.

---

рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете

---

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

Ссылки

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

После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html .

Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.

Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

Сегодня вы сделали много, ведь первый шаг самый сложный.

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

До новых встреч и удачи!

06.09.17 1.5K

Что такое web страница ? Это документ, написанный на языке разметки гипертекста (HTML ), который можно просмотреть с помощью браузера. Доступ к веб-странице осуществляется путем ввода URL-адреса .

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

Как открыть веб-страницу

Для просмотра веб-страницы требуется браузер (например, Internet Explorer , Edge , Safari , Firefox или Chrome ). В браузере можно открыть веб-страницу, указав в адресной строке URL-адрес . Например, введя «https://www.computerhope.com/esd.htm », вы откроете страницу ESD Computer Hope .

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

Когда была создана первая веб-страница?

Первая веб-страница была создана в CERN Тимом Бернерсом-Ли 6 августа 1991 года. Перед тем, вы можете посетить и просмотреть первый сайт и первую веб-страницу по адресу http://info.cern.ch/ .

В чем разница между сайтом и веб-страницей?

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

В приведенном выше примере URL-адреса «url.htm» — веб-страница, это всегда последняя часть URL-адреса . Для URL , которые не имеют окончаний .htm , .html , .php , .cgi , .pl или другого расширения файла, сервер загружает веб-страницу index.htm по умолчанию. Например, для URL-адреса страницы контактов нет веб-страницы. В этом случае загружается индексный файл по умолчанию из каталога /contact .

Примеры веб-страницы

Мы уже упоминали, что для просмотра web страниц используются браузеры. Веб-страница состоит из нескольких элементов, включая CSS , изображения и JavaScript . Тело веб-страницы создается с использованием HTML . Этот код может быть создан с использованием HTML-редактора, написан человеком или сгенерирован с использованием серверных скриптов. Обычно веб-страница, созданная человеком, заканчивается расширением .htm или .html . Например, эта страница имеет имя файла «webpage.htm ». Страницы, сгенерированные скриптом, могут заканчиваться на .cgi , .php , .pl и т.д.

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

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

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

   .

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

   …

   ;

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

Что пользователи могут сделать на веб-странице?

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

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

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

Примечание : Так же советую ознакомиться со статьей что такое веб .

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

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

Чаще всего веб-страницы разделяют по двум видам:

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

2. Динамические веб-страницы . В отличии от предыдущего типа веб-страниц, данный тип предусматривает, что содержимое одной и той же страницы может меняться. Например, страницы в форумах, где люди оставляют свои комментарии. Различные страницы поиска и многие другие примеры. Стоит отметить, что эти страницы так же представляют собой html-документ с сопутствующими файлами, однако их содержимое генерируется отдельным компьютером, который обычно называется сервер. Хотя бы раз, но, вероятно, слышали о таких языках как PHP, Asp.Net C#, Java и прочие. Именно с помощью них и осуществляется генерация страниц.

Так же страницы могут разделять по их назначению (приведу несколько вариантов):

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

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

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

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

2016-11-06

Создаем веб-страницу и размещаем ее на локальном веб-сервере

Здравствуйте уважаемый посетитель!

Эта статья о том, как создать веб-страницу и разместить ее на виртуальном хосте локального веб-сервера.

А, понадобится нам для этого, как показано на картинке: локальный веб-сервер, текстовый редактор, язык описания структуры веб-страниц HTML и язык стилей CSS.

• Создание виртуального хоста на локальном веб-сервере
• Создание файла веб-страницы с проверкой работы локального веб-сервера
• Составление каркаса HTML-страницы
• Исходные файлы сайта

Создание виртуального хоста на локальном веб-сервере

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

Здесь, будет рассматриваться работа с локальным веб-сервером на примере сборки программ Denwer (Денвер). Но, это не принципиально, так как все это можно делать и на других аналогичных программных продуктах.

После установки Денвера в директории "WebServers/home/" уже имеются сконфигурированные виртуальные хосты, такие как, "localhost", "test1.ru", "custom". Создадим для нашего сайта новый хост и назовем его, к примеру, "newsite.local", подразумевая под этим именем то, что это новый сайт и размещен он на локальном сервере (не стоит из-за возможной путаницы в дальнейшем, присваивать именам хоста реальные доменной зоны, такие как "ru", "com" и т.п.

В этой папке "newsite.local" создадим новую папку "www", в которой и будем размещать файлы сайта, а также, скопируем сюда же из существующих хостов, вспомогательные папки "subdomain" и "cgi".

После проделанных операций, необходимо перезапустить сервер для того, чтобы он внес в свою работу соответствующие изменения. Это можно сделать через ярлык "Restart Denwer", который может быть создан при установке Денвера, либо (если его не оказалось) через специальный файл Restart.exe в папке "denwer".

Создание файла веб-страницы с проверкой работы локального веб-сервера

Ну, а теперь перейдем к созданию веб-страницы. Для этого, в первую очередь, с помощью текстового редактора Notepad++ создадим файл "index.html", в котором будет находиться код нашей главной страницы. О том, как установить текстовый редактор показано в статье Устанавливаем текстовый редактор nodepad++ .

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

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

Это можно сделать следующим образом: через меню "Опции" открыть окно "Настройки" и в параметрах "Новый документ" проверить, чтобы была установлена универсальная кодировка "UTF-8 без метки BOM", как показано ниже.

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

Теперь сохраним этот файл в папке "www" вновь созданного хоста "newsite.local". Для этого, через меню "Файл" выберем "Сохранить как", введем имя файла "index.html", укажем нужную папку и нажмем "Сохранить".

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

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

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

Для того, чтобы это сделать, надо аналогичным образом, как и с "index.html", в редакторе Notepad++ создать новый файл и сохранить его в той же папке под именем ".htaccess". При этом в самом файле необходимо написать следующую строку "AddDefaultCharset UTF-8", как показано на скриншоте.

Ну, а теперь, если снова обновить браузер с адресом нашего хоста "newsite.local", то можно убедиться в появлении на странице того текста, который изначально был написан нами в файле "index.html".

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

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

Составление каркаса HTML-страницы

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

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

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

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

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

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

От себя, могу посоветовать такой информационный ресурс, как онлайн справочник "http://www.puzzleweb.ru/html/all_tags.php" . Особенность его в том, что он дает не только достаточно подробную справочную информацию по основным языкам, используемых в сайтостроении, таким, как HTML, CSS, JavaScript, PHP, но в нем имеются разделы самоучителя, в которых очень сжато, но в то же время довольно познавательно объясняются основы этих языков с приведением наглядных примеров.

Также, можно отметить справочный интернет-ресурс "https://webref.ru/" , в котором имеется довольно полная информация по современным версиям HTML5 и CSS3, куда также включены учебные курсы по веб-технологиям. К этому, можно добавить справочник "http://htmlbook.ru/html/" , из которого тоже можно подчерпнуть немало полезной информации и он также может быть полезен при написании веб-страниц.

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

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

2. "utf-8" />

   "Description" content ="Краткое описание содержания страницы" >

4. "wrapper" >

   Шапка

   Ротатор

   Основное содержание

   Сайдбар

Для того, чтобы записать HTML-код каркаса в файл "index.html", его нужно открыть в текстовом редакторе Notepad++ и набрать код, пользуясь приведенным примером, либо его туда скопировать.

Кроме того, в конце каждой статьи, начиная с этой, будет прилагаться архив исходных файлов папки "www", создаваемого сайта на текущее состояние. Поэтому, можно просто воспользоваться этими дополнительными материалами и скачать файл "index.html" по ссылке, приведенной в конце этой статьи.

Вот так должен выглядеть HTML-код файла "index.html" в текстовом редакторе Notepad++, составленный в соответствии с приведенным примером.

Рассмотрим, более подробно то, что изображено на рисунке.

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

Поэтому, если не будет такого указания, то браузер, попросту "запутается" при обработке страницы. В данной строке, в частности указано, что документ создан на языке html версии 5.

Более подробно об элементе можно посмотреть в справочнике htmlbook.ru по ссылке "http://htmlbook.ru/html/!doctype" .

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

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

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

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

Таким образом, во 2-ой и 17-ой строках указан тег "html", который, по существу представляет контейнер со всем содержимом страницы. Этот тег всегда указывается в таком порядке, что любой HTML-код должен быть внутри этого контейнера.

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

В качестве таких специальных тегов в строке 4 размещен метатег с атрибутом "charset", указывающий на кодировку "utf-8", в строке 5 - тег "title", определяющий заголовок документа, а в 6-ой строке - метатег с атрибутами "name" и "content", предназначенный для краткого описания содержания страницы.

В дальнейшем, по мере выполнения верстки, область "head" будет дополнена и другими специальными элементами.

Следующая область "body", охватывающая строки с 8 по 16, предназначена для размещения форматирующих элементов, отвечающих за создание видимой части веб-страниц.

В соответствии с дизайн-макетом, в нашем случае, область "body" состоит из пяти основных блоков: "Шапка", "Ротатор", "Основное содержание", "Сайдбар" и "Подвал", где:

• в 10-ой строке содержится блок "Шапка" (элемент "header");
• в 11-ой строке - блок "Ротатор" (эл-т "section");
• в 12-ой строке - блок "Основное содержание" (эл-т "main");
• в 13-ой строке - блок "Сайдбар" (эл-т "aside");
• в 14-ой строке - блок "Подвал" (эл-т "footer");

При этом, размещенные здесь блоки показаны в очень укрупненном виде. Например, "header" и "footer" будут включать в себя также (в соответствии с дизан-макетом) навигационное меню, а "main", в свою очередь, будет разбиваться на блоки, содержащие статьи и комментарии. И такое деление на более мелкие блоки будет продолжаться до тех пор, пока полностью не будет выполнена вся разметка HTML-страницы.

Что касается парного тега

, находящегося в 9 и 15 строках, то он здесь выполняет функцию блока "обвертки" для задания минимальной и максимальной ширины страницы в заданных пределах резиновой верстки. Этому тегу присвоен атрибут класса "wrapper" для возможности в дальнейшем назначать ему соответствующие стили CSS.

Следует обратить внимание на то, что раньше, до появления 5-ой версии HTML, для создания каркаса обычно использовались блочные элементы "div". Можно и сейчас использовать их для этих целей, в таком виде сайты по-прежнему смогут нормально работать.

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

Если сейчас в браузере открыть созданную страницу, то можно увидеть только слова, которые содержатся в тегах, размещенных в контейнере "body". Текст же, находящийся в области "head", как было отмечено выше, отображаться не будет. Исключением является заголовок "title" (в нашем случае "Заголовок страницы"), который будет виден на вкладке браузера.

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

Исходные файлы сайта

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

Веб-сайт, часто называют сокращённо сайт - это не что иное, как совокупность логически связанных между собой веб-страниц, или просто одна страница. Страницы сайта доступны в Интернете средствами протоколов 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.