Как создать HTML-файл

Обновлено: 06.07.2024

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

Что такое документ HTML

Документ HTML – это обычный текстовый файл с расширением .html или .htm . Между ними почти нет разницы, но .html встречается чаще.

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

Инструменты, которые нам нужны

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

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

Расширенные текстовые редакторы и интегрированные среды разработки, такие как Visual Studio Code, Sublime, Atom или Bracket, могут помочь вам с предложениями по синтаксису и выделением ошибок. Вы можете использовать их для написания сложного HTML-кода и управления им.

Эти расширенные текстовые редакторы можно загрузить и использовать бесплатно, они доступны для всех популярных операционных систем, таких как Windows, Linux и macOS.

Этапы создания HTML-документа

А теперь давайте запачкаем руки. Давайте создадим простой HTML-документ.

Эти шаги следующие:

Запустите текстовый редактор по вашему выбору и создайте новый текстовый документ.
Добавьте в него несколько тегов HTML. Если вы не знакомы с синтаксисом HTML, вы можете скопировать и вставить приведенный ниже код в новый пустой документ. Мы узнаем о тегах позже. На данный момент давайте сосредоточимся на создании документа

После написания кода пришло время сохранить документ. При сохранении документа вы можете дать любое имя, указать .html или .htm в качестве расширения и UTF-8 в качестве системы кодировки символов (если потребуется).

Проверьте документ HTML с помощью браузера

После сохранения файла мы можем убедиться, что он работает.

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

В результате вы должны увидеть черную страницу с заголовком A Sample Webpage и одним абзацем Hello World! в нем.

Спасибо, что прочитали!

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

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

Файл HTML — это просто текстовый файл, сохраненный с расширением .html или .htm.

Начало работы

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

Что ж, приступим к созданию вашей первой HTML-страницы.

Создание вашего первого HTML-документа

Давайте пройдемся по следующим шагам. В конце этого руководства вы создадите HTML-файл, отображающий сообщение «Hello world» в веб-браузере.

Шаг 1. Создание HTML-файла

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

Совет. Для этого мы рекомендуем использовать Блокнот (в Windows), TextEdit (в Mac) или любой другой простой текстовый редактор; не используйте Word или WordPad! Как только вы поймете основные принципы, вы сможете перейти к более продвинутым инструментам, таким как Adobe Dreamweaver.

Шаг 2. Введите код HTML

Начните с пустого окна и введите следующий код:

Пример

Шаг 3. Сохранение файла

Теперь сохраните файл на рабочем столе как "myfirstpage.html".

Примечание. Важно указать расширение .html — в противном случае некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt.

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

Объяснение кода

Вы можете подумать, что это был за код. Что ж, давайте узнаем.

Первая строка — это объявление типа документа. Он указывает веб-браузеру, что этот документ является документом HTML5. Он нечувствителен к регистру.
Элемент представляет собой контейнер для тегов, который предоставляет информацию о документе, например, тег определяет заголовок документа.
Элемент содержит фактическое содержимое документа (абзацы, ссылки, изображения, таблицы и т. д.), которое отображается в веб-браузере и отображается для пользователя.

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

Примечание. Объявление DOCTYPE появляется в верхней части веб-страницы перед всеми остальными элементами; однако само объявление типа документа не является тегом HTML.Каждый HTML-документ требует объявления типа документа, чтобы обеспечить правильное отображение ваших страниц.

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

HTML-теги и элементы

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

и т. д.

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

Открывающий и закрывающий теги идентичны, за исключением косой черты (/) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда выполнена.

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

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

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

Используйте один из следующих двух способов для создания нового HTML-документа.

Способ 1

Запустите Microsoft Word.

На панели задач "Новый документ" нажмите "Пустая веб-страница" в разделе "Создать".

В меню "Файл" нажмите "Сохранить".

ПРИМЕЧАНИЕ. В поле "Тип файла" по умолчанию указано "Веб-страница" (*.htm; *.html).

В поле "Имя файла" введите имя файла документа и нажмите "Сохранить".

Метод 2

Запустите Microsoft Word.

Создайте новый пустой документ.

В меню "Файл" нажмите "Сохранить как веб-страницу".

В поле "Имя файла" введите имя файла документа и нажмите "Сохранить".

Добавьте текст и гиперссылки в HTML-документ

Откройте документ HTML, созданный ранее в этой статье. Для этого выполните следующие действия:

В меню "Файл" нажмите "Открыть".

Перейдите к папке, в которой вы сохранили свою статью, в разделе "Создание HTML-документа" этой статьи.

Выберите файл и нажмите «Открыть».

Введите следующий текст в документ:

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

Чтобы создать гиперссылку, выберите слова "Microsoft Word" в введенном тексте.

В меню "Вставка" нажмите "Гиперссылка".

Сохраните изменения в документе.

Добавьте изображение в свой HTML-документ

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

В меню "Вставка" выберите "Изображение" и нажмите "КлипАрт".

На панели задач "Вставка клипа" нажмите "Поиск".

ПРИМЕЧАНИЕ. Если вы нажмете «Поиск», не вводя ничего в поле «Текст поиска», в результатах поиска будут отображаться все изображения, доступные в настоящее время в вашей системе.

В разделе "Результаты" выберите изображение, которое вы хотите вставить на страницу.

Сохраните изменения и закройте документ.

Открыть HTML-документ в Word

Выполните одно из следующих действий.

Если панель задач "Новый документ" по-прежнему отображается:

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

Если область задач "Новый документ" не отображается:

В меню "Файл" нажмите "Открыть".

В диалоговом окне "Открыть" найдите созданный ранее HTML-документ и выберите его.

ССЫЛКИ

Для получения дополнительных сведений о поддержке HTML в Word 2002 выполните следующие действия:

Откройте Microsoft Word 2002.

В меню "Справка" нажмите "Справка Microsoft Word".

Перейдите на вкладку Мастер ответов.

Введите HTML в поле Что бы вы хотели сделать? и нажмите "Поиск".

Будут отображаться связанные темы. Щелкните любой элемент, чтобы отобразить информацию.

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, вы обнаружите, что вам подходит, а пока стоит попробовать!

Чтобы вставить изображение, используйте один тег img, как в следующем примере:

Здесь name.ext — это имя файла и расширение файла изображения. Расширение будет либо .jpg, либо .jpg. Это два типа изображений. Вы также можете создавать свои собственные изображения с помощью таких продуктов, как Paint Shop Pro или Adobe Photo Shop. Вам просто нужно сохранить файл в формате .jpg или .jpg. Точно так же вы можете использовать эти инструменты, а также Microsoft Photo Editor, чтобы обрезать или изменить размер изображения.

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

Обратите внимание, что текст, следующий за href, заключен в кавычки. Вы также используете теги a> для ссылки на локальные файлы или файлы HTML в том же каталоге на сервере. Формат

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

для перехода к ранее отмеченному месту в файле.

Эти теги самые важные, но есть и много других. Вы можете просмотреть базовый HTML-код любого документа, щелкнув «Просмотр», а затем «Исходный код страницы» в Netscape. Вы можете использовать это, чтобы узнать о новых тегах.

Использование Блокнота

Запустите Блокнот. Обычно это можно сделать, нажав кнопку "Пуск", затем "Стандартные", а затем "Блокнот".
Немедленно вставьте то, что можно назвать базовым шаблоном, введя в редакторе следующее. Вы пропускаете строки, нажимая клавишу ввода. Убедитесь, что он выглядит именно так, и что вы не забыли один из символов < или >.
В вашем примере потребуется более одной строки в основной части файла, но вы всегда можете вставить новые строки. Введите заголовок между тегами и . Это может быть мой первый HTML-файл.
Мы можем сделать так, чтобы основная часть этого примера начиналась с большого заголовка. (Соблазн использовать термин title велик, но мы не будем этого делать, потому что это приведет к путанице заголовка html-документа с заголовком внутри текста.) Прямо под тегом введите

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

Сайт, которым я чаще всего пользуюсь, — это New York Times в Интернете.

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

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

Использование специализированных редакторов HTML

Использование Netscape Composer

Вы также можете редактировать HTML-документ с помощью Netscape Composer, компонента Netscape Communicator. Чтобы отредактировать существующий файл, откройте файл в Netscape Navigator обычным способом, а затем перейдите на страницу «Файл» и затем «Редактировать». Чтобы начать новый файл, вы можете вызвать Netscape Composer напрямую. В Composer нажмите «Создать». Для существующих файлов то, что вы увидите, очень похоже на форму отображения HTML. Есть панель инструментов для добавления тегов. Сюда входят значки для вставки изображений и ссылок. Когда вы решите вставить изображение, появится следующее окно. Вы можете найти изображение с помощью кнопки с пометкой «Выбрать файл». Вы также можете внести другие изменения, если хотите.

Иногда бывает сложно сделать то, что вы хотите, в Composer, и вы можете решить вернуться в Блокнот, где вы можете увидеть все теги. Еще одна проблема, о которой следует помнить, заключается в том, что Composer может помещать адреса файлов в другую форму, чем вы хотите. Например, он может вставить имя локального диска. Это окажется проблематичным, если и когда вы переместите проект на сервер. Композитор может быть полезен для создания таблиц. Требуемый здесь набор тегов может быть запутанным (не сложным, а сложным).

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

Вы можете убедиться в этом сами, нажав "Просмотр", а затем "Исходный код страницы".

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

В Microsoft Word есть возможность сохранить как HTML. Это создает разумную версию документа Word. Когда вы посмотрите на HTML-документ, вы, вероятно, заметите множество, казалось бы, лишних тегов. Файл также будет содержать специальные символы, такие как для непустого места. Если вы очень спешите и сильно отформатировали документ Word, это вариант. Однако другой вариант — просто скопировать и вставить текст документа Word в Блокнот, а затем продолжить. Это облегчит планирование, а затем разработку документа специально для веб-публикации.

Использование PowerPoint

Microsoft PowerPoint также позволяет преобразовать презентацию в HTML-форму для публикации в Интернете. Когда вы нажимаете «Файл», а затем «Сохранить как HTML», эта функция создает большой набор файлов, соответствующим образом связанных, чтобы презентацию PowerPoint можно было просматривать с помощью браузера. Вам, автору, задают несколько вопросов по оформлению просмотра, а также справочную информацию для выхода на первую страницу, которая похожа на оглавление. Вы должны поместить все файлы в совершенно новую папку (каталог) только для этой презентации.

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