Ниже рассмотрим оба этих способа.

Размещение сайта в Панели управления

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

Для размещения сайта через Панель управления используется раздел «Файловый менеджер », предназначенный для работы с файлами на аккаунте. В нем отображается текущее содержимое аккаунта. На каждом новом аккаунте виртуального хостинга изначально находится папка public_html , в которой и следует размещать файлы сайта. Для входа в папку надо нажать на ее имя.

При входе в папку в «Файловом менеджере» будет выведено её содержимое:

• папка cgi-bin , предназначенная для размещения CGI-скриптов;
• файл.htaccess , представляющий собой файл дополнительной конфигурации веб-сервера Apache;
• файл index.html , являющийся индексной (заглавной) страницей сайта (т.е. при входе на сайт посетитель попадет именно на эту страницу).

Содержимое страницы index.html можно видеть по основному или (в случае, если основной домен ещё не работает).

На этой странице приведена общая информация по работе с новым аккаунтом, а также наши контактные данные. Для работы сайта эта страница не понадобится, и перед загрузкой файлов сайта следует удалить файлы .htaccess и index.html из папки public_html .

Для удаления файла index.htmlнеобходимо отметить его галочкой и нажать «Удалить». Это делается для того, чтобы в дальнейшем при загрузке сайта первой страницей открывалась не наша стандартная страница, а страница нового размещённого сайта. Файл.htaccess также следует удалить, либо загружать новый.htaccess с заменой предыдущего.

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

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

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

• Подготовить на компьютере архив из тех файлов, которые требуется загрузить.
• Загрузить этот архив на аккаунт.
• После загрузки разархивировать файл. Для этого нажать на значок папки, расположенный слева от имени загруженного архива. В появившемся окне будет предложено указать путь. По умолчанию там уже задана текущая директория, в которой расположен архив, и в общем случае можно сразу нажимать кнопку «Разархивировать ».

После выполнения этой задачи все файлы из архива будут доступны на аккаунте.

У сайта должна быть индексная (главная) страница. Поэтому надо назвать именем index.html тот файл, который должен открываться первым при загрузке сайта, т.е. сделать этот файл индексным. Например, если требуется, чтобы страница mypage.html открывалась первой при загрузке сайта, то файл mypage.html надо переименовать в index.html . Имя файла обязательно задаётся в нижнем регистре.

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

• Нажать на значок шестеренки («операции»), который появляется в строке файла при наведении на него.
• В выпадающем меню выбрать функцию «Переименовать».
• В появившемся окне написать index.html и нажать кнопку «Переименовать ». Загруженный файл будет переименован в index.html.

Размещение сайта с использованием протокола FTP

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

Подключение производится в окне программы, где указываются хост (имя домена, на котором размещается сайт или IP-адрес сервера, где находится аккаунт, он указан в левом меню Панели управления), логин и пароль основного или дополнительного FTP-аккаунта и порт 21.

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

ftp://login:[email protected]

Подробная информация о работе с FTP представлена в .

Создание базы данных MySQL

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

В созданную базу средствами Панели управления можно загрузить дамп - это содержимое базы данных в виде текстового файла, имеющего расширение «.sql». Дамп базы данных должен быть предварительно размещён на аккаунте. В разделе «Базы MySQL» для загрузки дампа предусмотрена опция «импортировать базу из файла», при нажатии на эту ссылку открывается окно, где кнопкой «Обзор»выбирается файл дампа и имя базы данных из выпадающего списка.

Подробная информация о работе с базами данных представлена в .

Урок №9
Создаём свой сайт из трёх страниц

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

Закиньте в папку Мой сайт , все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,

и две фотографии:
irbis.jpg
polyarnyi-volk.jpg

Сделаем третью страницу, она будет посвящена полярной сове .

Данные третьей страницы

Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html

Название страницы , сделайте:
Страница о полярной сове

Внедрите CSS-код:

Заголовок статьи

:
Полярная сова

Фотография :

Статья состоящая из двух абзацев :

Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия. Полярная сова обитает обычно в открытой местности, в лесах встречается редко. Питается в основном, мелкими грызунами: леммингами, в год может съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие хищники, птицы, рыба и даже падаль.

В итоге, вы должны получить следующую страницу .

Соединяем ссылками страницы сайта

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

Index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .

Снежный барс Полярный волк Полярная сова

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

Как вы уже знаете, каждый HTML-документ начинается с тега , данное объяснение было для новичков. На самом деле, каждый HTML-документ, должен начинаться со строки , а уже под ним ставится тег . Строка даёт понять браузеру, что язык HTML используемый в документе, ориентирован на последнюю, пятую версию языка, т.е. на HTML5.

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

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.

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

Снежный барс Полярный волк Полярная сова

Всегда добавляйте строку , в начале каждого HTML-документа.

Регистрация домена и хостинг

Итак, у вас в папке Мой сайт хранятся три HTML-файла:
index.html
polarnayi-volk.html
polarnaya-sova.html

и три фотографии:
irbis.jpg
polyarnyi-volk.jpg
polyarnaya-sova.jpg

Для того чтобы разместить всё это в интернете, нужно сначала зарегистрировать себе имя сайта (домен) , наиболее качественная компания по регистрации доменов, на данный момент это Вебнеймс :
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU , нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год) .

После регистрации имени сайта, нужно купить себе хостинг , наиболее качественная компания на данный момент это Бегет :
Beget.ru — компания предоставляющая хостинг для сайтов. В компании Бегет, можно разместить сайт бесплатно или платно от 100 до 385 рублей в месяц. Разместить сайт бесплатно!

Хостинг — это размещение сайта в интернете.

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

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

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

Вам понравились уроки? Поддержите проект "Учебники для вебмастера" !
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Статья обновлена: 7 Фев 2016

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

Вы можете написать html код в любом текстовом редакторе (даже в блокноте) но, я вам рекомендую для начало воспользоваться таким замечательным редактором как notepad++ . Он очень удобный и простой в использований. Вы можете скачать его на официальном сайте https://notepad-plus-plus.org .

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

Открываем программу и как вы заметили новый файл с именем new 1 , создался автоматически.

Этапы создания html страницы

Теперь из нового файла создаем html документ следующим образом:
1. Идем в меню файл и выбираем пункт сохранить как… или нажимаем горячие клавиши (Ctrl+Alt+S )

2. В появившемся окне выбираем место, где хотим сохранить файл.

3. В поле имя файла пишем index и выбираем тип файла Hyper Text Markup Language file (*html; *htm; *shtml; *shtm; *xhtml;*hta) .

После того как выбран тип файла, в конце имени файла автоматически вставляется

Закрываем Notepad++ и едем в указанной папке, где сохранили файл. Там создался файл index, с расширением html и со значком браузера который установлен у вас по умолчанию. При двойном щелчке, файл открывается в вашем браузере. У меня браузер по умолчанию выбран опера, поэтому сохраненный файл выглядит так:

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

Файл откроется в редакторе Notepad++. Теперь напишем в файле следующий код:

  

Привет Мир

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

Сайты бывают разные. Самый простой вариант - это сайт-визитка. С него мы и начнем.

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

Собираем материалы

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

Создаем папку специально для файлов своего сайта. Ее можно назвать, на пример, "site"(название может быть другим, но желательно в латинице и короткое).

Создаем простую html-страничку

Страницы сайта могут быть созданы в любом текстовом редакторе при помощи языка разметки документа HTML. Откроем блокнот notepad и напишем:

Это мой первый сайт.

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

Теперь запомним файл под именем index.html в новой папке, которую вы создали.
Откроем файл index.html с помощью броузера (на пример, Microsoft Internet Explorer). Мы увидим такую картинку:

Рис. 1. Наша первая страница.

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

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

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


Это мой первый сайт.

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

Для примера мы скопировали первый попавшийся текст на новостном портале и вставили этот текст в наш файл после тегов . В окне броузера мы видим сплошной неформатированный текст.

Рис. 2 - Неформатированный текст.

Текст гораздо лучше смотрится, если он разбит на абзацы. В html-документах для этого существует тэг

(и парный к нему

).
Тэг

Может задаваться с параметром горизонтального выравнивания align, который может иметь следующие значения:
left - выравнивание по левой границе окна броузера.
center - выравнивание по центру окна броузера.
right - выравнивание по правой границе окна броузера.
justify - выравнивание по ширине (растягивание по двум сторонам окна броузера).

Если параметр align не указан, текст выравнивается по левому краю.

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

После форматирования текста наша страничка будет выглядеть вот так:


Рис. 3 - Форматированный текст.

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

Рис. 4 - Картинка в тексте.

Если вы хотите, чтобы картинка находилась справа или слева от текста, то для этого у тэга существует параметр со следующими значениями:
left - изображение прижимается к левому полю окна, текст обтекает изображение с правой стороны
right - изображение прижимается к правому полю окна, текст обтекает изображение с левой стороны

Если вы планируете разместить много фотографий (на пример, фото с отпуска или примеры своих работ) предлагаем сделать это с помощью готовых программ. Как это сделать описано

Связь между страницами

В предыдущем абзаце в тексте встречалась ссылка (линк) на другой сайт. Для этого используется парный тэг и .

На пример, так: здесь...

С помощью тэга можно также ссылаться не только на другие сайты, но и на страницы своего сайта.
На пример, создадим вторую страницу и назовем ее photo.html. Создавать новые страницы можно просто копированием уже существующего файла, но с другим именем. Главное - аккуратно изменить не только текст новой страницы, но и ее заголовок (заключенный между тэгами и ).

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

Вот что получится:


Рис. 5. Ссылка в тексте.

Здесь стоит отметить, что на сайте только одна страница может называться index.html - главная. Когда посетитель придет на ваш сайт, она загрузится первой.

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

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

ftp://LOGIN@sN.сайт,
где LOGIN - ваш логин, а sN.сайт (s1.сайт, s2.сайт и т.п.) - имя сервера хостинга, на котором расположен ваш сайт.

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

Рис. 6. Доступ по ftp с помощью броузера.

Копировать файлы своего сайта нужно в папку htdocs. Но перед этим рекомендуем прочитать раздел FAQ " ".

Иногда ошибки index.html и другие системные ошибки HTML могут быть связаны с проблемами в реестре Windows. Несколько программ может использовать файл index.html, но когда эти программы удалены или изменены, иногда остаются "осиротевшие" (ошибочные) записи реестра HTML.

В принципе, это означает, что в то время как фактическая путь к файлу мог быть изменен, его неправильное бывшее расположение до сих пор записано в реестре Windows. Когда Windows пытается найти файл по этой некорректной ссылке (на расположение файлов на вашем компьютере), может возникнуть ошибка index.html. Кроме того, заражение вредоносным ПО могло повредить записи реестра, связанные с Microsoft Windows. Таким образом, эти поврежденные записи реестра HTML необходимо исправить, чтобы устранить проблему в корне.

Редактирование реестра Windows вручную с целью удаления содержащих ошибки ключей index.html не рекомендуется, если вы не являетесь специалистом по обслуживанию ПК. Ошибки, допущенные при редактировании реестра, могут привести к неработоспособности вашего ПК и нанести непоправимый ущерб вашей операционной системе. На самом деле, даже одна запятая, поставленная не в том месте, может воспрепятствовать загрузке компьютера!

В связи с подобным риском мы настоятельно рекомендуем использовать надежные инструменты очистки реестра, такие как WinThruster (разработанный Microsoft Gold Certified Partner), чтобы просканировать и исправить любые проблемы, связанные с index.html. Используя очистку реестра , вы сможете автоматизировать процесс поиска поврежденных записей реестра, ссылок на отсутствующие файлы (например, вызывающих ошибку index.html) и нерабочих ссылок внутри реестра. Перед каждым сканированием автоматически создается резервная копия, позволяющая отменить любые изменения одним кликом и защищающая вас от возможного повреждения компьютера. Самое приятное, что устранение ошибок реестра может резко повысить скорость и производительность системы.

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

Перед тем, как вручную восстанавливать реестр Windows, необходимо создать резервную копию, экспортировав часть реестра, связанную с index.html (например, Microsoft Windows):

1. Нажмите на кнопку Начать .
2. Введите "command " в строке поиска... ПОКА НЕ НАЖИМАЙТЕ ENTER !
3. Удерживая клавиши CTRL-Shift на клавиатуре, нажмите ENTER .
4. Будет выведено диалоговое окно для доступа.
5. Нажмите Да .
6. Черный ящик открывается мигающим курсором.
7. Введите "regedit " и нажмите ENTER .
8. В Редакторе реестра выберите ключ, связанный с index.html (например, Microsoft Windows), для которого требуется создать резервную копию.
9. В меню Файл выберите Экспорт .
10. В списке Сохранить в выберите папку, в которую вы хотите сохранить резервную копию ключа Microsoft Windows.
11. В поле Имя файла введите название файла резервной копии, например "Microsoft Windows резервная копия".
12. Убедитесь, что в поле Диапазон экспорта выбрано значение Выбранная ветвь .
13. Нажмите Сохранить .
14. Файл будет сохранен с расширением.reg .
15. Теперь у вас есть резервная копия записи реестра, связанной с index.html.

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