Урок №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

Иногда ошибки 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.

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

Каждый начинающий вебмастер должен знать, как создать 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++. Теперь напишем в файле следующий код:

  

Привет Мир

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

В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )

Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на: 1) для Windows NotePad++ (скачать или ) Intype (скачать) 2) для Mac и Linux Bluefish Editor (скачать) Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в различные цвета как, например, код внизу урока. В обычном редакторе он будет одного цвета.

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

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

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить . Готово!

Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее: Смотрим настройки файлов и папок: Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

3) вставляем в него Весь код (вместе с комментариями), указанный ниже:

Заголовок моей странички

4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

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

Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:

Заголовок моей странички

Это моя первая web-страничка!

В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.

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

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

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

Любой заголовок

Просто текст

Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом

Другой текст

Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).

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

Хочу выделить текст жирным, а этот уже курсивом

Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

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

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

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

Мои поздравления!
Несложно же?)