Как создать файл HTML.
Для того, чтобы начать работать с технологией HTML и изучать основные элементы этого языка, нам понадобится специальный файл, в котором мы будем работать.
Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.
Это будет «полигон», который мы будем наполнять содержимым, расширять и экспериментировать.
Для тех, кто любит видео:
Все мои уроки по HTML и верстке сайтов здесь.
Первый способ, который мы рассмотрим по созданию файла HTML — это способ создания файла в простом текстовом редакторе.
Способ 1. Создаем файл html в программе «Блокнот».
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.html.
Если у Вас не отображается расширение файлов, вот заметка:
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Только что мы с вами создали свой первый HTML-файл, который уже можем заполнять содержимым.
Аналогично html-файл создается с помощью программы Notepad++.
Но, пользоваться таким способом не всегда бывает удобно и, как видите, это не самый быстрый способ по созданию html-файлов. Есть программы, которые позволяют решить эту проблему намного быстрее.
Одной из таких программ является универсальный редактор кода Dreamweaver.
Способ 2. Создание файла HTML в универсальном редакторе кода (на примере Dreamweaver).
После того, как программа загрузиться появляется следующее окно приветствия:
Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.
После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.
Это обязательный код, который должен присутствовать на веб-странице о нем мы еще поговорим. Dreamweaver добавляет этот код автоматически, что экономит нам время.
Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»
Далее выбираете место, где должен будет находиться этот файл, и нажимаете на кнопку сохранить.
Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.
Аналогично можно создать файл HTML и в других программах, я лишь хотел показать общий смысл, как это делается.
Как создать HTML файл
Файлы HTML определяют структуру веб-страницы. Таким образом, чтобы создать веб-страницу, самый первый шаг — написать для нее файл HTML. В этой статье вы узнаете, как создать HTML-файл с нуля.
Что такое HTML-документ
Документ HTML — это простой текстовый файл с расширением .html или .htm . Между ними почти нет разницы, но .html встречается чаще.
Этот текстовый файл содержит информацию, которую браузеры используют для создания структуры веб-страницы.
Инструменты, которые нам нужны
Теперь вопрос в том, какой инструмент нам нужен для создания HTML-файла.
Самый простой способ — использовать обычный текстовый редактор, например текстовый редактор по умолчанию в вашей операционной системе.
Расширенные текстовые редакторы и IDE, такие как Visual Studio Code, Sublime, Atom или Bracket, могут помочь вам с подсказками синтаксиса и выделением ошибок. Вы можете использовать их для написания сложного HTML-кода и управления им.
Эти расширенные текстовые редакторы можно загрузить и использовать бесплатно, и они доступны для всех популярных операционных систем, таких как Windows, Linux и macOS.
Шаги по созданию HTML-документа
А теперь попрактикуемся. Давайте создадим простой HTML-документ.
- Запустите текстовый редактор по вашему выбору и создайте новый текстовый документ.
- Поместите в него несколько HTML-тегов. Если вы не знакомы с синтаксисом HTML, вы можете скопировать и вставить приведенный ниже код в новый пустой документ. О тегах мы узнаем позже. А сейчас давайте сосредоточимся на создании документа
head> title> A Sample Webpage title> head> body> p> Hello World! p> body> html> - Когда вы закончите писать код, самое время сохранить документ. При сохранении документа вы можете дать любое имя, использовать .html или .htm в качестве расширения и UTF-8 в качестве системы кодировки символов (если потребуется).
Проверьте HTML-документ с помощью браузера
После сохранения файла мы можем убедиться, что он работает.
Перейдите в место, где вы сохранили файл. Найдя файл, дважды щелкните его, чтобы открыть веб-браузер по умолчанию в вашей операционной системе.
В результате вы должны увидеть пустую страницу с заголовком «Пример веб-страницы» и одним абзацем в ней «Hello World!» .
Спасибо, что дочитали до конца!
Это все что касается создания HTML-файла. Теперь вы можете начать изучать различные HTML-теги и атрибуты, которые мы можем использовать в HTML-документах.
Как создать HTML документ
Файл HTML — это простой текстовый файл, сохраненный с расширением .html или .htm (второй вариант уже практически не используется).
Из этой статьи вы узнаете, как легко создать HTML-документ (то есть веб-страницу). Чтобы начать создавать HTML-страницы, вам понадобятся только две вещи: простой текстовый редактор и веб-браузер.
Создание вашего первого HTML-документа
В конце урока вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.
Шаг 1. Создание файла HTML
Откройте простой текстовый редактор или редактор кода и создайте новый файл.
Шаг 2. Введите код HTML
В окне редактора введите следующий код:
HTML document Hello World!
Шаг 3. Сохраните HTML документ
Сохраните данный файл как index.html на жестком диске. Важно указать расширение .html — некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt. Если это произошло — переименуйте файл, удалите расширение .txt.
Чтобы открыть файл в браузере, перейдите к своему файлу, затем дважды кликните по нему левой кнопкой мыши. Он откроется в веб-браузере установленным по умолчанию в вашей операционной системе. Если этого не произошло, откройте браузер и перетащите файл в его окно.
Разбор HTML кода
Теперь давайте разберем код, который вы написали, по блокам.
Объявление DOCTYPE — строка определяет тип документа HTML5.
Раздел декларативного заголовка (заключенный в элемент HEAD) — предоставляет информацию о документе, включая его заголовок, информацию о стиле и сценарии.
Тело документа (заключено в элемент BODY). Содержит фактическое содержимое документа, которое отображается в веб-браузере и отображается для пользователя.
Вы узнаете о различных элементах HTML-документа в наших следующих статьях.
HTML-теги и элементы
HTML код написан с использованием HTML-элементов, состоящих из тегов разметки. Эти теги разметки являются фундаментальной особенностью HTML. Каждый тег состоит из ключевого слова, заключенного в угловые скобки, например , , , и т.д.
HTML-теги обычно идут парами, такими как и . Первый тег в паре часто называют открывающим тегом (или начальным тегом), а второй тег называют закрывающим тегом (или конечным тегом).
Открывающий тег и закрывающий тег идентичны, за исключением косой черты (/) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда выполнена. Между этими тегами вы можете добавить заголовки, абзацы текста, таблицы, формы, изображения, видео и т.д. Например, абзац, который представлен элементом p, будет записан как:
Это параграф текста.
Создание HTML-документа – Создать или загрузить HTML на С#
Эта статья предлагает подробное руководство по созданию HTML-документа. Aspose.HTML для .NET API предоставляет класс HTMLDocument, который является корнем иерархии HTML и содержит все содержимое.
HTML-документ
HTMLDocument является отправной точкой для библиотеки классов Aspose.HTML. Вы можете загрузить HTML-страницу в объектную модель документа (DOM) с помощью класса HTMLDocument, а затем программно читать, изменять дерево документа, добавлять и удалять узлы, изменять свойства узла в документе, как это описано в официальных спецификациях.
Класс HTMLDocument обеспечивает представление в памяти HTML DOM и полностью основан на W3C DOM и WHATWG DOM, которые поддерживаются многими современными браузерами. Если вы знакомы с WHATWG DOM, WHATWG HTML и JavaScript, вам будет очень удобно использовать библиотеку Aspose.HTML. В противном случае вы можете посетить www.w3schools.com, где вы можете найти множество примеров и учебных пособий по работе с HTML-документами.
HTML-документы могут быть созданы с нуля как пустой документ со структурой HTML, из строки, из потока памяти или загружены из файла или URL-адреса. HTMLDocument имеет несколько перегруженных конструкторов, позволяющих создавать или загружать HTML-документы.
Создайте пустой HTML-документ
После создания объекта документа его можно позже заполнить элементами HTML. В следующем фрагменте кода показано использование конструктора HTMLDocument() по умолчанию для создания пустого HTML-документа и его сохранения в файл.
1using System.IO; 2using Aspose.Html; 3. 4 // Prepare an output path for a document saving 5 string documentPath = Path.Combine(OutputDir, "create-empty-document.html"); 6 7 // Initialize an empty HTML document 8 using (var document = new HTMLDocument()) 9 10 // Work with the document 11 12 // Save the document to a file 13 document.Save(documentPath); 14 >После создания появляется файл create-empty-document.html с исходной структурой документа: пустой документ включает такие элементы, как , и . Подробнее о сохранении HTML-файлов читайте в статье Сохранить HTML-документ.
Создать новый HTML-документ
Если вы хотите сгенерировать документ программно с нуля, используйте конструктор без параметров, как указано в следующем фрагменте кода:
1using System.IO; 2using Aspose.Html; 3. 4 // Prepare an output path for a document saving 5 string documentPath = Path.Combine(OutputDir, "create-new-document.html"); 6 7 // Initialize an empty HTML document 8 using (var document = new HTMLDocument()) 9 10 // Create a text element and add it to the document 11 var text = document.CreateTextNode("Hello World!"); 12 document.Body.AppendChild(text); 13 14 // Save the document to a disk 15 document.Save(documentPath); 16 >В новом документе мы создали текстовый узел, учитывая указанную строку, используя CreateTextNode() метод и добавил его в элемент body с помощью метода AppendChild(). Как редактировать HTML-файл, подробно описано в статье Редактировать HTML-документ.
Загрузить из файла
Следующий фрагмент кода показывает, как загрузить HTMLDocument из существующего файла:
1using System; 2using Aspose.Html; 3. 4 // Prepare an output path for a file saving 5 var htmlFile = Path.Combine(OutputDir, "load-from-file.html"); 6 7 // Prepare a 'load-from-file.html' document 8 File.WriteAllText(htmlFile, "Hello World!"); 9 10 // Load from the 'load-from-file.html' 11 using (var document = new HTMLDocument(htmlFile)) 12 13 // Write the document content to the output stream 14 Console.WriteLine(document.DocumentElement.OuterHTML); 15 >В приведенном выше примере HTML-документ загружается из файла с помощью конструктора HTMLDocument( string ). Если вам требуется загрузить существующий HTML-файл с диска, обработать и сохранить его, то вам поможет следующий фрагмент кода.
1using System.IO; 2using Aspose.Html; 3. 4 // Prepare a path to a file 5 string documentPath = Path.Combine(DataDir, "Sprite.html"); 6 7 // Initialize an HTML document from a file 8 using (var document = new HTMLDocument(documentPath)) 9 10 // Work with the document 11 12 // Save the document to a disk 13 document.Save(Path.Combine(OutputDir, "Sprite_out.html")); 14 >Загрузить с URL-адреса
Возможность выбирать файлы и взаимодействовать с ними на локальном устройстве пользователя – одна из наиболее часто используемых функций Интернета. В следующем фрагменте кода показано, как загрузить веб-страницу в HTMLDocument.
В случае, если вы передадите неправильный URL-адрес, который недоступен в данный момент, библиотека выдает DOMException со специализированным код «NetworkError», чтобы сообщить вам, что выбранный ресурс не может быть найден.
1using System; 2using Aspose.Html; 3. 4 // Load a document from 'https://docs.aspose.com/html/net/creating-a-document/document.html' web page 5 using (var document = new HTMLDocument("https://docs.aspose.com/html/net/creating-a-document/document.html")) 6 7 // Write the document content to the output stream 8 Console.WriteLine(document.DocumentElement.OuterHTML); 9 >В приведенном выше примере мы указали файл document.html для загрузки с URL-адреса.
Загрузить из HTML-кода
Если вы подготавливаете HTML-код в виде файла [System.String] в памяти ( https://docs.microsoft.com/en-us/dotnet/api/system.string?view=netframework-4.8) или System.IO.Stream, вам не нужно сохранять их в файл, просто передайте ваш HTML-код в специализированные конструкторы.
Если в вашем HTML-коде есть связанные ресурсы (стили, скрипты, изображения и т. д.), вам необходимо передать корректный параметр baseUrl конструктору документа. Он будет использоваться для определения местоположения ресурса во время загрузки документа.
Загрузить из строки
Вы можете создать документ из строкового содержимого, используя конструктор HTMLDocument( string, string ). Если вам нужно создать документ из пользовательской строки непосредственно в вашем коде и сохранить его в файл, вам может помочь следующий пример: мы создаем HTML-документ, который содержит «Hello World!» текст.
1using System IO; 2using Aspose.Html; 3. 4 // Prepare HTML code 5 var html_code = "Hello World!
"; 6 7 // Initialize a document from the string variable 8 using (var document = new HTMLDocument(html_code, ".")) 9 10 // Save the document to a disk 11 document.Save(Path.Combine(OutputDir, "create-from-string.html")); 12 >Загрузка из потока
Чтобы создать HTML-документ из потока, вы можете использовать конструктор HTMLDocument( stream, string ) :
1using System IO; 2using Aspose.Html; 3. 4 // Create a memory stream object 5 using (var mem = new MemoryStream()) 6 using (var sw = new StreamWriter(mem)) 7 8 // Write the HTML code into memory object 9 sw.Write("Hello World! I love HTML!
"); 10 11 // It is important to set the position to the beginning since HTMLDocument starts the reading exactly from the current position within the stream 12 sw.Flush(); 13 mem.Seek(0, SeekOrigin.Begin); 14 15 // Initialize a document from the string variable 16 using (var document = new HTMLDocument(mem, ".")) 17 18 // Save the document to a disk 19 document.Save(Path.Combine(OutputDir, "load-from-stream.html")); 20 > 21 >SVG-документ
Поскольку масштабируемая векторная графика (SVG) является частью стандартов W3C и может быть встроена в HTMLDocument, мы внедрили SVGDocument и все его функциональность. Наша реализация основана на официальной спецификации SVG 2, поэтому вы можете загружать, читать и манипулировать документами SVG так, как это официально описано.
Поскольку SVGDocument и HTMLDocument основаны на одном и том же стандарте WHATWG DOM, все операции, такие как загрузка, чтение, редактирование, преобразование и сохранение, аналогичны для обоих документов. Таким образом, все примеры, где вы видите манипуляции с HTMLDocument, применимы и к SVGDocument.
Вы можете создать документ из строкового содержимого, используя конструктор SVGDocument ( string, string ). Если вы хотите загрузить документ SVG из переменной System.String в памяти и вам не нужно сохранять его в файл; пример ниже показывает, как это сделать:
1using System; 2using Aspose.Html.Dom.Svg; 3. 4 // Initialize an SVG document from a string object 5 using (var document = new SVGDocument("", ".")) 6 7 // Write the document content to the output stream 8 Console.WriteLine(document.DocumentElement.OuterHTML); 9 >В приведенном выше примере мы создали документ SVG, содержащий круг радиусом 40 пикселей. Вы можете узнать больше о работе с документами SVG из статей главы Как работать с Aspose.SVG API.
MHTML-документ
MHTML означает MIME-инкапсуляцию совокупных документов HTML. Файл MHTML – это архив, содержащий все содержимое веб-страницы. Он хранит HTML-код веб-страницы, а также связанные ресурсы на веб-странице, которые могут включать CSS, JavaScript, изображения и аудиофайлы. Это специализированный формат для создания архивов веб-страниц, и веб-разработчики в основном используют файлы MHTML для сохранения текущего состояния веб-страницы в целях архивирования. Библиотека Aspose.HTML поддерживает этот формат, но с некоторыми ограничениями. Мы поддерживаем только операции рендеринга из MHTML в поддерживаемые форматы вывода. Дополнительные сведения вы найдете в статье Преобразование между форматами.
EPUB-документ
EPUB – это формат, поддерживаемый большинством электронных книг и совместимый с большинством устройств, на которых вы читаете: смартфонами, планшетами и компьютерами. Для формата EPUB, представляющего формат электронной публикации, действуют те же ограничения, что и для MHTML. Мы поддерживаем только операции рендеринга из EPUB в поддерживаемые выходные форматы. Дополнительные сведения вы найдете в статье Преобразование между форматами.
Асинхронные операции
Мы понимаем, что загрузка документа может быть ресурсоемкой операцией, поскольку требуется загрузка не только самого документа, но и всех связанных ресурсов и обработки всех скриптов. Итак, в следующих фрагментах кода мы покажем вам, как использовать асинхронные операции и загружать HTMLDocument, не блокируя основной поток:
1using System; 2using Aspose.Html; 3using System.Threading; 4. 5 // Initialize an AutoResetEvent 6 var resetEvent = new AutoResetEvent(false); 7 8 // Create an instance of an HTML document 9 var document = new HTMLDocument(); 10 11 // Create a string variable for OuterHTML property reading 12 var outerHTML = string.Empty; 13 14 // Subscribe to 'ReadyStateChange' event 15 // This event will be fired during the document loading process 16 document.OnReadyStateChange += (sender, @event) => 17 18 // Check the value of the 'ReadyState' property 19 // This property is representing the status of the document. For detail information please visit https://www.w3schools.com/jsref/prop_doc_readystate.asp 20 if (document.ReadyState == "complete") 21 22 // Fill the outerHTML variable by value of loaded document 23 outerHTML = document.DocumentElement.OuterHTML; 24 resetEvent.Set(); 25 > 26 >; 27 28 // Navigate asynchronously at the specified Uri 29 document.Navigate("https://docs.aspose.com/html/net/creating-a-document/document.html"); 30 31 // Here the outerHTML is empty yet 32 Console.WriteLine($"outerHTML = "); 33 34 // Wait 5 seconds for the file to load 35 if (!resetEvent.WaitOne(5000)) 36 37 Console.WriteLine("Thread works too long, more than 5000 ms"); 38 > 39 40 // Here the outerHTML is filled 41 Console.WriteLine("outerHTML = ", outerHTML);ReadyStateChange – не единственное событие, которое может использоваться для обработки операции асинхронной загрузки, вы также можете подписаться на событие Load следующим образом:
1using System; 2using Aspose.Html; 3using System.Threading; 4. 5 // Initialize an AutoResetEvent 6 var resetEvent = new AutoResetEvent(false); 7 8 // Initialize an HTML document 9 var document = new HTMLDocument(); 10 var isLoading = false; 11 12 // Subscribe to the 'OnLoad' event 13 // This event will be fired once the document is fully loaded 14 document.OnLoad += (sender, @event) => 15 16 isLoading = true; 17 resetEvent.Set(); 18 >; 19 20 // Navigate asynchronously at the specified Uri 21 document.Navigate("https://docs.aspose.com/html/net/creating-a-document/document.html"); 22 23 // Here the document is not loaded yet 24 25 // Wait 5 seconds for the file to load 26 if (!resetEvent.WaitOne(5000)) 27 28 Console.WriteLine("Thread works too long, more than 5000 ms"); 29 > 30 31 // Here is the loaded document 32 Console.WriteLine("outerHTML = ", document.DocumentElement.OuterHTML);Вы можете скачать полные примеры и файлы данных с GitHub.