Как создать индексный HTML-файл

Обновлено: 04.07.2024

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

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

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

Шаг 1. Создайте структуру папок для вашей веб-страницы

Давайте создадим структуру папок для поддержки вашей веб-страницы. Хорошо продуманная структура папок поможет вам быстро перейти к файлам HTML или CSS, содержащим ваш код.

Сначала откройте Finder (в Mac) или Explorer (в Windows). Затем создайте папку (также известную как каталог) с именем DevProject. Эта папка будет содержать все файлы вашего проекта HTML и CSS.

Откройте папку DevProject. Внутри создайте следующие элементы:

Новый файл с именем index.html (используйте предпочитаемый вами текстовый редактор)
Новая папка с именем resources

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

Затем откройте только что созданную папку ресурсов. Внутри этой папки создайте следующее:

Папка css будет содержать файлы CSS, необходимые для оформления вашей веб-страницы.

Наконец, откройте папку css, которую вы только что создали. Внутри этой папки создайте следующее:

Новый файл с именем index.css (используйте предпочитаемый вами текстовый редактор)

Файл index.css будет содержать все правила стилей CSS, которые будут применяться к вашей веб-странице.

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

Шаг 2. Добавьте контент на свою веб-страницу

Отлично! Разместив структуру папок, файлы HTML и CSS в нужном месте, мы можем добавить контент на веб-страницу.

Сначала откройте файл index.html в предпочитаемом вами текстовом редакторе. Затем добавьте требуемый стандартный HTML-код:

После того как вы добавите стандартный HTML-код, не стесняйтесь добавлять следующие элементы:

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

Наконец, откройте файл index.css в предпочитаемом вами текстовом редакторе. Добавьте в файл следующие предварительно написанные правила CSS (не стесняйтесь изменять их по своему усмотрению):

Обязательно сохраните изменения для обоих файлов!

Шаг 3. Свяжите файл HTML и файл CSS

Как оказалось, добавленный вами HTML-контент не будет оформлен в соответствии с правилами CSS, если файлы index.html и index.css не связаны друг с другом. В этом разделе свяжите таблицу стилей с файлом HTML.

Возможно, вам интересно, почему для атрибута href установлено значение ./resources/css/index.css . Это связано с тем, что вы должны точно указать, где находится файл index.css в ваших папках относительно того, где находится index.html (в противном случае эти два файла не будут связаны).

Если у вас возникли проблемы с связыванием HTML и CSS, обратитесь за помощью на форумы сообщества Codecademy.

Опять же, не забудьте сохранить изменения!

Шаг 4. Просмотрите свой проект

Отличная работа! Давайте посмотрим на вашу веб-страницу в браузере.

Откройте предпочитаемый веб-браузер. В строке меню нажмите «Файл», а затем нажмите «Открыть файл…» (или аналогичный). Перейдите к файлу index.html и нажмите «Открыть» (или эквивалент). Браузер должен загрузить вашу веб-страницу. Что вы видите?

На этом этапе не стесняйтесь вносить изменения в код HTML или CSS. Имейте в виду, что для просмотра всех внесенных вами новых изменений вам придется обновить браузер.

Обзор

Поздравляем! За это короткое время вы научились применять то, чему научились на Codecademy, с помощью инструментов, доступных на вашем персональном компьютере. Вы успешно научились:

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

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

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

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

После того, как вы настроите свою IDE, мы можем приступить к созданию нашего первого файла HTML!

Ваша первая веб-страница

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

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

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

Создание index.html

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

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

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

Теперь, когда мы создали наш файл, давайте добавим в него текст и протестируем его в браузере. Внутри index.html введите Hello World .

Это самая простая форма, которую может принять веб-сайт, просто написанный текст.

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

Когда страница загружается в браузере, на ней должно быть написано Hello World!

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

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

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

Чтобы сделать этот HTML-документ правильным, давайте отформатируем его правильно.

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

Теперь ваша первая мысль, скорее всего, будет Что это за странные штуки. Это хорошая мысль, если вы впервые видите HTML-код, вам будет интересно, что это такое.

Символы со знаками < и > называются тегами. Теги HTML используются для структурирования и форматирования HTML-документа и могут использоваться для описания макета веб-сайта.

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

Контейнерные и неконтейнерные теги

В HTML есть два основных типа тегов: теги-контейнеры и теги, не являющиеся контейнерами.

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

Все теги состоят из <. >, с названием тега, напечатанным посередине.Конечные теги особенные, потому что они содержат / прямо перед именем тега (как вы можете видеть в).

Теги-контейнеры инкапсулируют другие теги и обычный текст. Теги-контейнеры также могут вкладываться друг в друга, то есть вы можете иметь тег-контейнер внутри другого тега-контейнера. Эта вложенность уступает место родительско-дочерним отношениям. Как правило, тег HTML-контейнера может иметь тег parent, а также теги child.

Далее следуют неконтейнерные теги (иногда я называю их одиночными тегами). Это теги, у которых нет начального и конечного компонентов, вместо этого они представляют собой один <. />структура. Эти теги будут иметь косую черту рядом со знаком "больше" справа.

В приведенном выше коде нет неконтейнерных тегов (они встречаются реже), но мы рассмотрим их в ходе курса.

Изучение кода

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

Это объявление DOCTYPE. На самом деле технически это не тег HTML, а объявление, которое сообщает веб-браузеру, какой это тип файла. Браузер увидит это и обработает файл как HTML-документ.

После объявления типа документа мы можем разместить весь наш HTML:

Это самая основная структура, которую мы можем иметь в HTML. Все HTML-документы инкапсулируются набором тегов. Они действуют как оболочка для всего документа.

Внутри этих HTML-тегов у нас есть два разных набора тегов-контейнеров. Теги и теги.

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

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

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

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

Внесение изменений

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

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

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Райан Периан — сертифицированный ИТ-специалист, обладатель множества сертификатов в области ИТ и более 12 лет опыта работы на должностях поддержки и управления в сфере ИТ.

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

Главная страница по умолчанию

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

Архитектура сайта и Index.html

Веб-сайты создаются внутри каталогов на веб-сервере. Для вашего веб-сайта вы должны сохранять каждую веб-страницу в виде отдельного файла. Например, ваша страница «О нас» может быть сохранена как about.html, а страница «Свяжитесь с нами» — как contact.html. Ваш сайт будет состоять из этих документов .html.

Иногда, когда кто-то посещает веб-сайт, он делает это, не указывая один из этих конкретных файлов в адресе, который он использует для URL-адреса. Например:

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

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

Другие названия страниц по умолчанию

Помимо index.html, существуют другие имена страниц по умолчанию, используемые некоторыми сайтами, в том числе:

index.htm
default.htm или default.html
home.htm или home.html

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

У вас должна быть страница index.html во всех ваших каталогах

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

Использование имени файла по умолчанию, такого как index.html, также является функцией безопасности

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

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

В установках IIS просмотр каталогов по умолчанию отключен. Если документ по умолчанию не найден и просмотр документа и каталога по умолчанию отключен, пользователь получит сообщение об ошибке 404.

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

Сайты, на которых не используются файлы .HTML

Некоторые веб-сайты, например те, на которых используется система управления контентом, или те, которые используют более надежные языки программирования, такие как PHP или ASP, могут не использовать в своей структуре страницы .html. Для этих сайтов вы по-прежнему хотите убедиться, что указана страница по умолчанию, а для некоторых каталогов на этом сайте по-прежнему желательно иметь страницу index.html (или index.php, index.asp и т. д.) по описанным причинам. выше.

Для веб-разработки вам понадобятся две программы: редактор для создания файлов для веб-сайта и браузер (например, Edge, Firefox, Safari или Chrome) для просмотра и тестирования вашего веб-сайта.

Редактор

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

Среди многих других редакторов мне больше всего нравится Visual Studio Code (бесплатно). Вы можете использовать редактор по своему выбору, но я буду иногда ссылаться на некоторые функции Visual Studio Code (VS Code). Хорошими альтернативами являются Atom или Brackets.

Давай, установи редактор. Если вы не знаете, какой из них, используйте пока Visual Studio Code.

Расширения редактора

Пока мы работаем над этим, мы сделаем расширение для VS Code, которое даст супервозможности нашему редактору: Live Server.

Откройте код Visual Studio.

Откройте меню «Расширения».

Введите «Live Server» в поле поиска и установите расширение.

Перезагрузите Visual Studio Code, чтобы активировать расширение.

Браузер

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

Если на вашем компьютере не установлен Chrome, вы можете установить его здесь.

Создание HTML-документа

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

Создайте папку на своем компьютере для своего проекта. Назовите папку Портфолио (или как хотите).

Откройте меню «Файл» и выберите «Открыть папку…». Найдите созданную папку и откройте ее.

Щелкните правой кнопкой мыши под папкой и выберите «Новый файл». Назовите файл index.html .

Теперь у вас есть пустой текстовый файл с именем index.html .

Почему index.html?

Просмотр и обновление

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

Для просмотра страницы мы будем использовать расширение Live Server, которое мы установили выше. Щелкните правой кнопкой мыши файл index.html (файл под папкой «Портфолио», а не файл выше в разделе «Открыть редакторы»). Затем нажмите «Открыть с помощью Live Server». Окно браузера должно открыться и показать ваш первый веб-сайт. Теперь всякий раз, когда вы сохраняете какие-либо изменения, они автоматически обновляются действующим сервером.

Если страница не обновляется после изменений: сохраните все свои файлы в редакторе, а затем в браузере обновите их с помощью F5 или cmd+r .

Поздравляем! Вы только что создали свой первый сайт!

Отступ

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

Совет 1. Используйте клавиши Shift+Tab, чтобы переместить отступ влево.

Совет 2. Вы можете сделать отступ сразу для нескольких строк, выделив их и нажав Tab или Shift+Tab .

Совет 3 (автоматически). Щелкните правой кнопкой мыши где-нибудь в коде программы и выберите "Форматировать документ" .

HTML-элементы

В приведенном выше примере вы уже видели типичные символы HTML с угловыми скобками. Они называются тегами.

Элементы HTML обычно (но не всегда) состоят из двух тегов: открывающего и закрывающего. В нашем примере — это открывающий тег, а с косой чертой — закрывающий тег.

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

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

Атрибуты

Атрибуты объявляют дополнительную информацию об элементе. Атрибуты являются частью открывающего тега элемента и всегда имеют имя и значение.

В качестве примера рассмотрим элемент HTML для ссылки. Вероятно, это один из самых важных элементов — чем был бы Интернет без ссылок?

< бр />

Основная структура HTML-страницы

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

Структура HTML

Пояснения

Всегда ставьте на первую строку. Он сообщает браузеру о типе документа.
Тег обозначает начало и конец документа.
Элемент содержит дополнительную информацию о странице. В отличие от элемента, эта информация не отображается в основной области браузера.
- В пределах должен быть указан набор символов: . Если вы не укажете набор символов, некоторые специальные символы могут отображаться неправильно. Вы могли заметить, что у элемента нет закрывающего тега. Есть несколько элементов без закрывающих тегов (
  , и т. д.), но они являются исключением.
- Далее вы увидите элемент. Название отображается в строке заголовка в верхней части окна браузера.
- A определяет главный заголовок. Подзаголовки можно создавать с помощью , , , и .
- Текст между
  и
  является абзацем.
Совет 1. Держите под рукой эту базовую структуру HTML. Вы можете использовать его для любой новой HTML-страницы!

Совет 2. Используйте сочетание клавиш Ctrl+S, чтобы сохранить текущий файл.

Совет 3. Используйте сочетание клавиш Ctrl+Z для отмены.

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

Вставка изображения

Элемент имеет только один открывающий, но не закрывающий тег. Он содержит атрибут src и alt. Атрибут src указывает URL-адрес, то есть местоположение и имя файла изображения. Атрибут alt — это «альтернативный текст», описывающий содержимое изображения. Этот текст используется поисковыми системами и в том случае, если по каким-либо причинам изображение не может быть отображено, например, в программе чтения с экрана для слепых.

Относительные и абсолютные URL

URL используются для атрибута src изображений, а также для атрибута href ссылок. URL указывает «адрес» файла (например, другой веб-страницы или изображения). В зависимости от местоположения файла необходимо использовать либо относительный, либо абсолютный URL.

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

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

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

Портфолио с изображением

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

Весь ваш код теперь может выглядеть примерно так (я добавил подзаголовок и немного текста):

index.html с готовым кодом портфолио

Вот как сейчас портфолио выглядит в браузере:

Что дальше?

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

Я только что разместил веб-сайт. Но когда я хочу запустить веб-сайт, он открывает индекс веб-сайта (список файлов, которые я добавил с помощью FTP, а не страницы Index.html). Как это исправить?

5 ответов 5

Корень документа — это папка, в которой хранятся файлы веб-сайта для доменного имени.

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

Они также могут находиться в другом каталоге, например

Ваш основной домен обычно располагается в папке www или public_html.

Когда кто-то пытается загрузить ваш веб-сайт и не вводит вручную имя файла (например, index.php или index.html), сервер пытается загрузить «индекс каталога». Индекс каталога — это список файлов, которые он должен загрузить.
<р>. и, наконец, если ваш сервер не находит ни один из этих файлов, он просто возвращает список всех файлов в каталоге. Посмотреть изображение

Чтобы предотвратить это, необходимо создать файл index.html и загрузить его в корневой каталог документов сервера, как мы упоминали ранее.

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

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

КОГДА ЭТО НЕ РАБОТАЕТ:

Если вы только что поместили файл index.html или index.php в корневую папку документов вашего сервера, например: /public_html/, и вы все еще не можете загрузить эти файлы по запросу к вашему домену, скорее всего, на вашем сервере отсутствует определенная конфигурация для "DirectoryIndex Directive".

Если этого не произошло, вы можете использовать директиву DirectoryIndex в файле .htaccess, чтобы указать пользовательский файл или файлы, которые веб-сервер ищет, когда посетитель запрашивает каталог. Чтобы включить директиву DirectoryIndex, используйте текстовый редактор для создания/изменения файла .htaccess следующим образом. Замените имя файла на файл, который вы хотите отображать всякий раз, когда пользователь запрашивает корневой каталог документов сервера:

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

Откройте текстовый редактор и скопируйте следующий пример директивы, а затем вставьте ее в новый файл:

Сохраните файл как .htaccess

Нет расширения файла, просто назовите его как .htaccess, поставив перед ним точку (.), чтобы убедиться, что это скрытый файл.

В этой директиве, когда посетитель запрашивает имя каталога, веб-сервер сначала ищет файл index.php. Если он не находит файл index.php, он ищет файл index.html и так далее, пока не найдет совпадение или пока не закончатся файлы для поиска.

Теперь загрузите файл .htaccess в корневой каталог документов вашего сервера.

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

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

Читайте также: