Editer un document HTML – Editer un fichier HTML en C#

Comme nous l’avons déjà mentionné dans l’article Créer un document HTML, la mise en œuvre de HTMLDocument ainsi que l’ensemble du DOM sont basés sur la norme WHATWG DOM. Il est donc facile d’utiliser Aspose.HTML for .NET en ayant une connaissance de base des langages HTML et JavaScript.

Espace de noms DOM

Un arbre DOM est une représentation en mémoire d’un document. Le DOM est une API permettant d’accéder au contenu des documents et de le manipuler. Les documents HTML consistent en un arbre qui contient plusieurs types de nœuds dont la racine est un Document. L’espace de noms DOM est représenté par les types de données fondamentaux suivants :

Data type	Description
Document	The Document class represents the entire HTML, XML or SVG document. Conceptually, it is the root of the document tree and provides the primary access to the document’s data.
EventTarget	The EventTarget class is implemented by all Nodes in an implementation that supports the DOM Event Model. An EventTarget object represents a target to which an event can be dispatched when something has occurred.
Node	The Node class is the primary datatype for the entire Document Object Model. It represents a single node in the document tree.
Element	The element type is based on node and represents a base class for HTML, XML or SVG DOM.
Attr	The Attr class represents an attribute in an Element object. Typically the allowable values for the attribute are defined in a schema associated with the document.

Voici une brève liste des méthodes API utiles fournies par les principaux types de données :

Method	Description
Document.GetElementById(elementId)	The method, when invoked, must return the first element whose ID is elementId and null if there is no such element otherwise.
Document.GetElementsByTagName(tagname)	The method must return the list of elements with the given name.
Document.CreateElement(localname)	The method creates an element of the type specified, or an HTMLUnknownElement if tagname isn’t recognized.
Node.AppendChild(node)	The method adds a node to the end of the list of children of a specified parent node.
Element.SetAttribute(name, value)	Sets the value of an attribute on the specified element.
Element.GetAttribute(name)	The method returns the value of a specified attribute on the element.
Element.InnerHTML	The property returns a fragment of markup contained within the element.

Pour une liste complète des interfaces et des méthodes représentées dans l’espace de noms DOM, veuillez consulter API Reference Source.

Modifier le HTML

Il existe de nombreuses façons d’éditer du HTML en utilisant notre bibliothèque. Vous pouvez modifier le document en insérant de nouveaux nœuds, en supprimant ou en modifiant le contenu des nœuds existants. Si vous devez créer un nouveau nœud, les méthodes suivantes doivent être invoquées :

Method	Description
Document.CreateCDATASection(data)	Creates a CDATASection node whose value is the specified string.
Document.CreateComment(data)	Creates a Comment node given the specified string.
Document.CreateDocumentFragment()	Creates an empty DocumentFragment object.
Document.CreateElement(localname)	Creates an element of the type specified.
Document.CreateEntityReference(name)	Creates an EntityReference object.
Document.CreateProcessingInstruction(target, data)	Creates an ProcessingInstruction with the specified name and data.
Document.CreateTextNode(data)	Creates a Text node given the specified string.

Une fois que vous avez créé de nouveaux nœuds, il existe plusieurs méthodes dans le DOM qui peuvent vous aider à insérer des nœuds dans l’arbre du document. La liste suivante décrit les méthodes les plus courantes d’insertion de nœuds :

Method	Description
Node.InsertBefore(node, child)	Inserts the node before the reference child node.
Node.AppendChild(node)	Adds the node to the list of children of the current node.
Node.RemoveChild(child)	Removes the child node from the list of children.
Element.Remove()	Removes this instance from the HTML DOM tree.

Vous pouvez télécharger les exemples complets et les fichiers de données sur GitHub.

Modifier une arborescence de documents

Les documents HTML sont constitués d’une arborescence d’éléments. Chaque élément est désigné dans la source par une balise de début, telle que <body>, et une balise de fin, telle que </body>. Les éléments peuvent avoir des attributs, qui contrôlent leur fonctionnement. L’API Aspose.HTML for .NET prend en charge un ensemble d’éléments HTML définis dans la norme HTML, ainsi que des règles sur la manière dont les éléments peuvent être imbriqués.

Examinez les étapes simples de la création et de l’édition du langage HTML. Le document contiendra un paragraphe de texte avec un attribut id :

• Créer une instance d’un document HTML.
• Créez un élément de paragraphe <p>.
• Définit l’attribut id de l’élément paragraphe.
• Créer un nœud de texte.
• Ajouter le texte au paragraphe.
• Ajouter le paragraphe au corps du document.
• Enregistrer le document HTML dans un fichier.

// Edit HTML document using DOM Tree

// Create an instance of an HTML document
using (HTMLDocument document = new HTMLDocument())
{
    HTMLElement body = document.Body;

    // Create a paragraph element
    HTMLParagraphElement p = (HTMLParagraphElement)document.CreateElement("p");

    // Set a custom attribute
    p.SetAttribute("id", "my-paragraph");

    // Create a text node
    Text text = document.CreateTextNode("my first paragraph");

    // Attach the text to the paragraph
    p.AppendChild(text);

    // Attach the paragraph to the document body
    body.AppendChild(p);

    // Save the HTML document to a file
    document.Save(Path.Combine(OutputDir, "edit-document-tree.html"));
}

Voyons maintenant comment créer un document HTML plus complexe. Chaque document HTML est représenté sous la forme d’un arbre de nœuds, et certains des nœuds d’un arbre peuvent avoir des enfants. L’extrait de code suivant montre comment éditer un document HTML en utilisant l’arbre DOM et les fonctions mentionnées ci-dessus :

// Create and add new HTML elements using C#

// Create an instance of an HTML document
using (HTMLDocument document = new HTMLDocument())
{
    // Create a <style> element and assign the green color for all elements with class-name equals 'gr'.
    Element style = document.CreateElement("style");
    style.TextContent = ".gr { color: green }";

    // Find the document <head> element and append the <style> element to it
    Element head = document.GetElementsByTagName("head").First();
    head.AppendChild(style);

    // Create a paragraph element with class-name 'gr'.
    HTMLParagraphElement p = (HTMLParagraphElement)document.CreateElement("p");
    p.ClassName = "gr";

    // Create a text node
    Text text = document.CreateTextNode("Hello World!!");

    // Append the text node to the paragraph
    p.AppendChild(text);

    // Append the paragraph to the document <body> element
    document.Body.AppendChild(p);

    // Save the HTML document to a file 
    document.Save(Path.Combine(OutputDir, "using-dom.html"));

    // Create an instance of the PDF output device and render the document into this device
    using (PdfDevice device = new PdfDevice(Path.Combine(OutputDir, "using-dom.pdf")))
    {
        // Render HTML to PDF
        document.RenderTo(device);
    }
}

Utilisation des propriétés InnerHTML et OuterHTML

Les objets DOM constituent un outil puissant pour manipuler un document HTML. Cependant, il est parfois préférable de travailler avec les propriétés System.String. L’extrait de code suivant montre comment utiliser les propriétés InnerHTML et OuterHTML pour éditer du HTML.

// Edit HTML body content and get modified document as string

// Create an instance of an HTML document
using (HTMLDocument document = new HTMLDocument())
{
    // Write the content of the HTML document into the console output
    Console.WriteLine(document.DocumentElement.OuterHTML); // output: <html><head></head><body></body></html>

    // Set the content of the body element
    document.Body.InnerHTML = "<p>HTML is the standard markup language for Web pages.</p>";

    // Set an html variable for the document content viewing
    string html = document.DocumentElement.OuterHTML;

    // Write the content of the HTML document into the console output
    Console.WriteLine(html); // output: <html><head></head><body><p>HTML is the standard markup language for Web pages.</p></body></html>
}

Modifier le CSS

Les feuilles de style en cascade (CSS) sont un langage de feuille de style utilisé pour décrire l’apparence des pages web dans le navigateur. Les feuilles de style en cascade peuvent être ajoutées aux documents HTML de manière inline, interne et externe. Ainsi, vous pouvez définir le style unique d’un seul élément HTML à l’aide d’une feuille de style CSS en ligne, ou permettre à plusieurs pages web de partager la mise en forme en spécifiant la feuille de style CSS appropriée dans un fichier .css distinct. Aspose.HTML ne se contente pas de prendre en charge les feuilles de style CSS dès le départ, il vous offre également des instruments pour gérer les styles du document à la volée avant de convertir le document HTML dans d’autres formats, comme le montre le schéma ci-dessous.

CSS en ligne

Lorsque le CSS est écrit en utilisant l’attribut style à l’intérieur d’une balise HTML, on parle de “style CSS en ligne”. Le CSS en ligne vous permet d’appliquer un style individuel à un élément HTML à la fois. Vous définissez le style CSS d’un élément HTML en utilisant l’attribut style avec toutes les propriétés CSS définies à l’intérieur. Dans l’extrait de code suivant, vous pouvez voir comment spécifier des propriétés de style CSS pour un élément HTML <p>.

// How to set inline CSS styles in an HTML element using C#

// Create an instance of an HTML document with specified content
string content = "<p>InlineCSS </p>";
using (HTMLDocument document = new HTMLDocument(content, "."))
{
    // Find the paragraph element to set a style
    HTMLElement paragraph = (HTMLElement)document.GetElementsByTagName("p").First();

    // Set the style attribute
    paragraph.SetAttribute("style", "font-size:250%; font-family:verdana; color:#cd66aa");

    // Save the HTML document to a file 
    document.Save(Path.Combine(OutputDir, "edit-inline-css.html"));

    // Create an instance of PDF output device and render the document into this device
    using (PdfDevice device = new PdfDevice(Path.Combine(OutputDir, "edit-inline-css.pdf")))
    {
        // Render HTML to PDF
        document.RenderTo(device);
    }
}

Dans cet exemple particulier, la couleur, la taille de la police et la famille de la police s’appliquent à l’élément <p>. Le fragment de la page PDF rendue ressemble à ceci :

CSS interne

L’option de style CSS interne est populaire pour appliquer des propriétés à des pages individuelles en encapsulant tous les styles dans l’élément <style> placé dans le <head> des documents HTML.

// Edit HTML with internal CSS using C#

// Create an instance of an HTML document with specified content
string content = "<div><p>Internal CSS</p><p>An internal CSS is used to define a style for a single HTML page</p></div>";
using (HTMLDocument document = new HTMLDocument(content, "."))
{
    Element style = document.CreateElement("style");
    style.TextContent = ".frame1 { margin-top:50px; margin-left:50px; padding:20px; width:360px; height:90px; background-color:#a52a2a; font-family:verdana; color:#FFF5EE;} \r\n" +
                        ".frame2 { margin-top:-90px; margin-left:160px; text-align:center; padding:20px; width:360px; height:100px; background-color:#ADD8E6;}";

    // Find the document header element and append the style element to the header
    Element head = document.GetElementsByTagName("head").First();
    head.AppendChild(style);

    // Find the first paragraph element to inspect the styles
    HTMLElement paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
    paragraph.ClassName = "frame1";

    // Find the last paragraph element to inspect the styles
    HTMLElement lastParagraph = (HTMLElement)document.GetElementsByTagName("p").Last();
    lastParagraph.ClassName = "frame2";

    // Set a color to the first paragraph
    paragraph.Style.FontSize = "250%";
    paragraph.Style.TextAlign = "center";

    // Set a font-size to the last paragraph
    lastParagraph.Style.Color = "#434343";
    lastParagraph.Style.FontSize= "150%";
    lastParagraph.Style.FontFamily = "verdana";

    // Save the HTML document to a file 
    document.Save(Path.Combine(OutputDir, "edit-internal-css.html"));

    // Create the instance of the PDF output device and render the document into this device
    using (PdfDevice device = new PdfDevice(Path.Combine(OutputDir, "edit-internal-css.pdf")))
    {
        // Render HTML to PDF
        document.RenderTo(device);
    }
}

Dans cet exemple, nous utilisons le CSS interne et déclarons également des propriétés de style supplémentaires pour des éléments individuels en utilisant la propriété Style de la classe HTMLElement. La figure illustre le fragment de fichier rendu “edit-internal-css.pdf” :

CSS externe

Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte et enregistrée avec une extension .css. Il s’agit d’un fichier CSS autonome lié à une page web. L’avantage d’une feuille de style CSS externe est qu’elle peut être créée une seule fois et que ses règles peuvent être appliquées à plusieurs pages web.

Exemple 1

Examinons un exemple de réalisation CSS externe dans lequel nous utilisons un lien vers l’adresse URL d’un fichier CSS :

// How to use an external CSS file in HTML using Aspose.HTML for .NET

// Create an instance of HTML document with specified content
string htmlContent = "<link rel=\"stylesheet\" href=\"https://docs.aspose.com/html/net/edit-html-document/external.css\" type=\"text/css\" />\r\n" +
                     "<div class=\"rect1\" ></div>\r\n" +
                     "<div class=\"rect2\" ></div>\r\n" +
                     "<div class=\"frame\">\r\n" +
                     "<p style=\"font-size:2.5em; color:#ae4566;\"> External CSS </p>\r\n" +
                     "<p class=\"rect3\"> An external CSS can be created once and applied to multiple web pages</p></div>\r\n";                             

using (HTMLDocument document = new HTMLDocument(htmlContent, "."))
{
    // Save the HTML document to a file 
    document.Save(Path.Combine(OutputDir, "external-css.html"));

    // Create the instance of the PDF output device and render the document into this device
    using (PdfDevice device = new PdfDevice(Path.Combine(OutputDir, "external-css.pdf")))
    {
        // Render HTML to PDF
        document.RenderTo(device);
    }
}

Le résultat de l’application externe du CSS ressemble à ceci :

Exemple 2

Vous pouvez écrire le contenu d’un fichier CSS dans une chaîne et l’enregistrer dans un fichier lié distinct, comme le montre l’exemple suivant :

// Edit HTML with external CSS using C#

// Prepare content of a CSS file
string styleContent = ".flower1 { width:120px; height:40px; border-radius:20px; background:#4387be; margin-top:50px; } \r\n" +
                      ".flower2 { margin-left:0px; margin-top:-40px; background:#4387be; border-radius:20px; width:120px; height:40px; transform:rotate(60deg); } \r\n" +
                      ".flower3 { transform:rotate(-60deg); margin-left:0px; margin-top:-40px; width:120px; height:40px; border-radius:20px; background:#4387be; }\r\n" +
                      ".frame { margin-top:-50px; margin-left:310px; width:160px; height:50px; font-size:2em; font-family:Verdana; color:grey; }\r\n";

// Prepare a linked CSS file
File.WriteAllText("flower.css", styleContent);

// Create an instance of an HTML document with specified content
string htmlContent = "<link rel=\"stylesheet\" href=\"flower.css\" type=\"text/css\" /> \r\n" +
                     "<div style=\"margin-top: 80px; margin-left:250px; transform: scale(1.3);\" >\r\n" +
                     "<div class=\"flower1\" ></div>\r\n" +
                     "<div class=\"flower2\" ></div>\r\n" +
                     "<div class=\"flower3\" ></div></div>\r\n" +
                     "<div style = \"margin-top: -90px; margin-left:120px; transform:scale(1);\" >\r\n" +
                     "<div class=\"flower1\" style=\"background: #93cdea;\"></div>\r\n" +
                     "<div class=\"flower2\" style=\"background: #93cdea;\"></div>\r\n" +
                     "<div class=\"flower3\" style=\"background: #93cdea;\"></div></div>\r\n" +
                     "<div style =\"margin-top: -90px; margin-left:-80px; transform: scale(0.7);\" >\r\n" +
                     "<div class=\"flower1\" style=\"background: #d5effc;\"></div>\r\n" +
                     "<div class=\"flower2\" style=\"background: #d5effc;\"></div>\r\n" +
                     "<div class=\"flower3\" style=\"background: #d5effc;\"></div></div>\r\n" +
                     "<p class=\"frame\">External</p>\r\n" +
                     "<p class=\"frame\" style=\"letter-spacing:10px; font-size:2.5em \">  CSS </p>\r\n";

using (HTMLDocument document = new HTMLDocument(htmlContent, "."))
{
    // Save the HTML document to a file 
    document.Save(Path.Combine(OutputDir, "edit-external-css.html"));
}

Cet exemple montre comment créer des graphiques CSS à partir de zéro. La visualisation du fichier “edit-external-css.html” est présentée sur la figure :

Comme nous l’avons mentionné, l’application la plus courante des feuilles de style CSS consiste à styliser les pages web écrites en HTML et dans d’autres langages de balisage. Mais au-delà de la conception de sites web, vous pouvez utiliser CSS pour créer de jolis graphiques, comme celui que nous vous montrons ci-dessus. Le concept essentiel du dessin CSS consiste à utiliser le rayon de la bordure, la rotation et la localisation pour créer des courbes et des formes de manière créative.

Vous pouvez télécharger les exemples complets et les fichiers de données sur GitHub.