Как найти файл index html

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

---

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

1. Текстовый редактор
2. Браузер

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

Текстовые редакторы

Блокнот – это стандартная программа ОС Windows. Чтобы создать документ в этом редакторе – кликните по рабочему столу правой кнопкой мыши, выберите «создать» «текстовый документ».

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

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

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

Здесь выбирайте подходящую вам систему и качайте. Программой можно пользоваться бесплатно, но, если вам захочется убрать надпись “unregistered” – придётся заплатить $70.

Браузер

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

---

Итак, с рабочим инвентарём мы определились.

Теперь создайте папку с любым названием, например, “HTML_Start” и в ней сохраните свой первый HTML-документ:

1. Открываем Notepad++
2. В левом верхнем углу жмём «Файл» – «сохранить как», выбираем нашу папку
3. Называем файл «index.html», либо просто «index» и в строке «тип файла» выбираем Hyper Text Markup Language file.
4. Жмём «сохранить».

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

Почему именно index.html?

Обычно мы заходим на сайт с главной страницы. Когда у сайта множество страниц, мы подсказываем веб-серверу, которую из них нужно загружать автоматически. В большинстве случаев, адрес сайта указывается кратко, без лишних файлов на конце. Сравните, vertex-academy.com и vertex-academy.com/index.html – это одна и та же страница, но мы конечно же напишем, как в первом варианте. Вот тогда браузер заходит в папку сайта и определяет файл, который нужно показать. Если index.html в этой папке отсутствует, тогда браузер покажет список всех файлов, которые лежат в этой папке.
Теперь мы наконец готовы создать свою первую веб-страницу.

Но прежде буквально пару слов о тегах

HTML-код всегда помещен между угловых скобок.
Например,

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

Бывают также непарные теги, о них расскажем попозже.

Ну давайте же скорее покодим! 😉

Каждый html-документ содержит набор определенных тегов. Эти теги, как Отче наш – запоминайте их, либо просто делайте ctrl+c, ctrl+v этой структуры каждый раз при создании нового HTML-документа

Давайте подробно разберем каждый из этих тегов.

или <!doctype html> , т.к. он не чувствителен к регистру – даёт понять браузеру, на которой из версий HTML написан документ.
Например, для версии HTML 4.01 этот элемент был таким:

С версии 5 это объявление стало гораздо короче, что не может не радовать). Как видите, этот тег непарный.

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

Элементы – они наподобие контейнеров. Мы открываем коробочку (пишем тег), кладём в неё что-то и закрываем (пишем закрывающий тег).

Теги нужно обязательно закрывать. Зачастую браузеры делает нам медвежью услугу и, если мы забыли закрыть тег – сами закрывают его. Поэтому, допустив ошибку в коде, бывает: проверили в браузере, все красиво, профит! Но, браузер ведь пока не настолько умный, чтобы точно знать, где нужно закрыть тот или иной тег. Иногда он «угадывает». Если бы мы, например, забыли закрыть тег <head>, он бы сам закрыл его перед началом тега <body>, т.к. это стандартная структура документа. А когда речь идет о других тегах, тут уже сложнее и он может закрыть его совсем не там, где нужно и от этого «поедет» весь ваш документ. Поэтому, возьмите за правило:

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

Давайте еще раз посмотрим на структуру документа:

Мы сознательно допустили ошибку на картинке. Найдете, где? 🙂

Здесь у нас появился еще один тег

Чтобы понять для чего он, давайте попробуем создать HTML-документ без него. Откройте через notepad++ наш сохраненный index.html и напишите код

Выберите кодировку документа: «Кодировки» – «Преобразовать в UTF-8»

Теперь сохраните. Проще всего это делать либо нажатием клавиш ctrl+s, либо нажав дискетку в левом верхнем углу редактора. Запустите сохраненный index.html в браузере.

Та-дам, вы создали свою первую веб-страницу! 🙂

Но что это за текст на вкладке браузера? Это же путь к нашему файлу…длинно и некрасиво. Для того, чтобы назвать веб-страницу, существует тег <title>. Он всегда помещается внутри элемента <head>. Попробуем теперь с ним:

Сохраните файл, обновите страницу, вуаля! У нашей страницы есть название)

Считается хорошим тоном писать каждый вкладываемый элемент с отступом (клавишей tab, двумя или четырьмя пробелами). В нашем примере <head> и <body> находятся внутри элемента <html>, поэтому они написаны с отступом от него. Элемент <title> вкладывается в <head>, поэтому делаем отступ от этого элемента. Если писать без отступа – браузер все поймет. А вот вы, написав простыню кода – вряд ли. А постороннему веб-разработчику тем более будет сложно разобраться в вашем коде.

Элемент <head>

Что еще можно поместить в голову документа? Туда обычно складывают информацию для поисковых роботов, счетчиков браузера, ключевые слова и прочая служебная информация. Кроме элемента <title>, пользователь не увидит ничего из написанного в <head>. Также есть один важный тег, который сообщает браузеру, в какой кодировке следует читать наш документ:

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

Давайте закрепим в памяти структуру нашего HTML-документа:

В дальнейшем мы будем показывать только код, содержащийся внутри <body>, но никогда не теряйте голову! 😉
Итак, со скелетом нашего документа мы разобрались. Давайте нарастим на него немножко мышц? 😉

Знакомьтесь, заголовки и абзац

<h1></h1>– Заголовок первого уровня, от английского Heading. По умолчанию выделяется браузером жирным шрифтом, размером 24 пункта. Несет смысловую нагрузку как самый главный заголовок на странице, зачастую название страницы. Именно по нему поисковые роботы идентифицируют страничку.

<h2></h2>– заголовок второго уровня, здесь по умолчанию шрифт меньше, чем в <h1>. Размер 18 п. Этим заголовком обозначают названия больших разделов, на которые делится страничка. Имеет меньший смысловой вес, чем h1.

И так далее, до…

<h6></h6> – заголовка шестого уровня. Этот заголовок имеет самый меньший смысловой вес. По умолчанию он имеет самый маленький шрифт.

<p></p> – абзац, от англ. Paragraph. Браузер автоматически добавляет расстояние между абзацами и напишет каждый с новой строки, при использовании нескольких тегов <p>

А теперь посмотрим, как всё это выглядит:

Хм, вышло как-то не очень. Хоть мы и написали каждую фразу с новой строки, браузер почему-то этого не понял. Дело в том, что в HTML-коде пробелы не отображаются, и браузер интерпретировал все, что помещено в контейнер <p> как один абзац. А что если мы каждую фразу заключим в тег <p>?

Примечание: редактор ниже даёт вам возможность посмотреть код на вкладке HTML, увидеть готовый результат на вкладке Result и самим поиграться с кодом при клике на кнопку “Edit in JSFiddle”

Мы использовали несколько тегов <p>, и в итоге браузер написал каждый элемент с новой строки 🙂

Тег <br>

Существует еще тег <br> от англ. Break – разрыв. Это перенос на новую строчку. Кстати, это одиночный тег, его не нужно закрывать, т.к. он ничего в себе не содержит.
Давайте посмотрим, как выглядел бы текст, если бы мы не заключили каждую фразу в <p>, а поставили в конце фраз <br>

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

Тег <pre>

Тег <pre> обозначает какое-то предварительное форматирование текста, чаще всего в формате Courier. Удобнее всего использовать его со стихами. Давайте посмотрим, как он работает:

Тег <hr>

На закуску, еще один тег, который используется для разрыва – тег <hr>.  Он непарный, его не нужно закрывать, как и <br>. В основном он используется, чтобы разделить несколько разных по смыслу текстов (например, его уместно было бы применить между несколькими анекдотами). Хотя также он используется просто для визуального оформления страницы.

Мы выучили структуру HTML-документа и часто употребляемые теги. Дальше будем учиться наводить красоту на наших веб-страницах 🙂

Для тех, кто хочет еще детальней покопаться во всем этом, мы рекомендуем справочники:
webref.ru – это справочник по верстке на русском языке.
w3schools.com – это справочник на английском. Чем он ценен:

• Здесь поданы рекомендации от W3C, т.е. здесь самая корректная информация по HTML5
• Параллельно можно подтянуть свои знания английского, если они пока не совершенны 🙂
• Здесь есть упражнения  для начинающих, где вы сразу же можете проверить правильность кода. Попробуйте, например, это упражнение

До встречи! 🙂

Когда вы создаёте веб-страницы в редакторе кода, таком как Visual Studio Code, Sublime Text, вам необходимо создать index.html, потому что эта страница выполняет важную работу. Создание первой страницы index.html считается лучшим методом веб-разработки.

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

Что такое index.html?

Index.html — это первая HTML-страница, которую вы создаёте при создании веб-сайта. HTML (язык разметки гипертекста) помогает структурировать текст и другие элементы на веб-странице. Страница index.html — это страница по умолчанию, которую видит посетитель веб-сайта, если не указана другая страница, которую часто называют «домашней страницей».

Например, если вы вводите URL-адрес, такой как https://careerkarma.com, вы не указали какую-либо конкретную страницу, которую сервер должен доставить клиенту (компьютеру или мобильному телефону). Во многих случаях вы увидите страницу по умолчанию или страницу index.html.

Если вы знаете точный адрес страницы, которую хотите просмотреть, например https://careerkarma.com/blog, то сервер направит вас на эту страницу, а не на страницу index.html.

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

Как создать страницу index.html

Теперь вы понимаете, что такое страница index.html и почему она важна. Давайте посмотрим, как именно мы можем создать страницу index.html с помощью Visual Studio Code (или VS Code), редактора кода.

Если у вас не установлен VS Code, ознакомьтесь с этим полезным руководством по началу работы с Visual Studio Code.

Начнём с создания нового файла.

На главной панели инструментов VS Code создайте новый файл.

Затем вам будет показан пустой файл кода с таким именем, как «Без названия» или «Без названия-1».

Затем перейдите в «Файл», «Сохранить как» и сохраните имя файла как «index» с типом файла «html».

Теперь вы увидите «index.html» в качестве имени вашего файла.

По умолчанию в файле index.html должно быть несколько элементов. К ним относятся HTML-теги, такие как,и. Вы также должны объявить тип документа, используя «DOCTYPE HTML».

У вас есть страница index.html. Теперь вы можете создавать дополнительные файлы, чтобы оживить ваш сайт.

Вывод

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

Создать страницу index.html в редакторе кода легко. Помните, что вы можете создавать другие HTML-страницы в дополнение к index.html, например, about.html или contact.html.

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

Урок №2
Создание своей первой веб-страницы

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

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

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

Открыть Блокнот в Windows можно следующим образом:

Пуск — Все программы

Стандартные — Блокнот

В Блокноте наберите следующий код:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h1>Заголовок статьи</h1>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Или просто скопируйте его и вставьте в Блокнот:

Затем сохраните получившийся документ на Рабочий стол, в виде файла с названием index и расширением .html

Для этого нажмите на кнопки:
Файл — Сохранить как…

В появившемся окне выберите Рабочий стол, имя файла напишите index.html и нажмите кнопку:
Сохранить

Теперь файл index.html, который вы сохранили на Рабочий стол, можно открыть в браузере и посмотреть на получившуюся HTML-страницу. Для этого, нужно нажать правой кнопкой мыши по файлу index.html и выбрать из имеющихся у вас браузеров, я обычно использую браузер FireFox:
Открыть с помощью — FireFox

Если у вас на компьютере не установлен браузер FireFox, то можете открыть файл index.html любым другим браузером, например: Opera, Google Chrome, Internet Explorer или Safari.

Файл index.html, открытый в браузере FireFox:

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

Читать далее: Разбираем HTML-код