Creating HTML document with Images, Tables and Lists

Introduction

The Aspose.HTML library has an HTMLDocument class. This class is a root of the HTML hierarchy and holds the entire content.

The class contains several methods and properties that can help us create a simple page:

Method	Description
AppendChild	Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, then it is removed.
CreateElement	Creates an element of the type specified. Note that the instance returned implements the Element interface, so attributes can be specified directly on the returned object

Property name	Description
ParentElement	Gets the parent Element of this node.
Body	The element that holds the content for the document.
ChildNodes	A NodeList that contains all children of this node. If there are no children, this is a NodeList containing no nodes.

The methods and properties described above use a NodeList. The NodeList provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. In real cases of usage NodeList represents a list of DOM elements and depends on a query type.

Creating a simple HTML document

Let’s try to create a simple document, which contains one image, one ordered list and a table 3x3. We will use Visual Studio 2017 in this demo:

Step 1: Create a Project in Visual Studio

Open Visual Studio and select File >> New >> Project menu.

In New Project, you will see Installed Templates in the left side templates listing. On the left side, you have a choice to select a language - Visual C#. I selected Visual C#->Windows Classic Desktop->Console App (.NET Framework).

Step 2: Add Aspose.Html library

Go to Tools->Nuget Package Manager->Package Manager Console. Run command:

Install-Package Aspose.Html

Step 3: Create an empty html document

Let’s try to create an empty html document and store it to local file c:\apsdemo\files\demo1.html. You need to create a folder for a demo file. One of the ways to implement this is running the command in the Package Manager Console: New-Item -ItemType Directory C:\asposedemo\files\

Add the following text to the Main method:


    //Create an instance of HTMLDocument
    var document = new Aspose.Html.HTMLDocument();
    //Store document to disk
    document.Save(@"c:\asposedemo\files\demo01.html");

Run the application and examine the results. After the execution in the folder c:\asposedemo\files\ there appears file demo1.html with the initial document structure:


    <html>
        <head>
        </head>
        <body>
        </body>
    </html>

Step 4: Add the image element to the document

First, we need to create an instance of HTMLImageElement using document.CreateElement method and fill its properties with appropriate value. In this example, we set a src, alt and title attributes and call AppendChild method to append this element to the Body.

Add the following code to the Main method before document.Save:


    // Add image
    HTMLImageElement img = document.CreateElement("img") as HTMLImageElement;
    if (img != null)
    {
        img.Src = "http://via.placeholder.com/400x200";
        img.Alt = "Placeholder 400x200";
        img.Title = "Placeholder image";
        document.Body.AppendChild(img);
    }

Run the application and examine the results. Please notice, that the image was stored in folder with tempate name <document>_files. After the execution in the folder c:\asposedemo\files\ there appears file demo01.html with the initial document structure:
```
    <html>
        <head>
        </head>
        <body>
            <img src="./demo01_files/400x200" alt="Placeholder 400x200" title="Placeholder image">
        </body>
    </html>
                
```

Step 5: Add the ordered list to the document

We will use the same strategy as in the previous step:

create an instance of HTMLOListElement as a container for the list items,
create several list items and add them to the container,
add the container to the Body.

We will use TextContent property to save list item value.

Add the following code to the Main method before document.Save:

    // Add ordered list
    HTMLOListElement orderedListElement = document.CreateElement("ol") as HTMLOListElement;
    for (int i = 0; i < 10; i++)
    {
        HTMLLIElement listItem = document.CreateElement("li") as HTMLLIElement;
        listItem.TextContent = $" List Item {i + 1}";
        orderedListElement.AppendChild(listItem);
    }
    document.Body.AppendChild(orderedListElement);

Run the application and examine the results. You will see something like this:


<ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
</ol>

Step 6: Add the table to the document

As in the steps above we need to:

create a table as a container of thead/tfoot/tbody,
create a tbody as a container of rows,
create rows and add cells to each row.

Please notice, that we will create 3 rows with 3 cell each. For each rows we will set an id attribute and for each cells we well set id and a cell's value. It's only for demo purposes.

Add the following text to the Main method:


    // Adding simple table 3x3 
    HTMLTableElement table = document.CreateElement("table") as HTMLTableElement;
    HTMLTableSectionElement tBody = document.CreateElement("tbody") as HTMLTableSectionElement;
    for (var i = 0; i < 3; i++)
    {
        HTMLTableRowElement row = document.CreateElement("tr") as HTMLTableRowElement;
        row.Id = "trow_" + i;
        for (var j = 0; j < 3; j++)
        {
            HTMLTableCellElement cell = document.CreateElement("td") as HTMLTableCellElement;
            cell.Id = $"cell{i}_{j}";
            cell.TextContent = "Cell " + j;
            row.AppendChild(cell);
        }
        tBody.AppendChild(row);
    }
    table.AppendChild(tBody);
    document.Body.AppendChild(table);

Run the application and examine the results. You will see something like this:


    <table><tbody><tr id="trow_0"><td id="cell0_0">Cell 0</td><td
    id="cell0_1">Cell 1</td><td id="cell0_2">Cell 2</td></tr><tr
    id="trow_1"><td id="cell1_0">Cell 0</td><td id="cell1_1">Cell
    1</td><td id="cell1_2">Cell 2</td></tr><tr id="trow_2"><td
    id="cell2_0">Cell 0</td><td id="cell2_1">Cell 1</td><td id="cell2_2">Cell
    2</td></tr></tbody></table>

Additional step

In this example a <head>-element remained empty. We can use FirstChild property twice to get an instance <head>-element and add a<title>-element for example:


    var head = document.FirstChild.FirstChild as HTMLHeadElement;
    var title = document.CreateElement("title") as HTMLTitleElement;
    title.TextContent = "Demo";
    head.AppendChild(title);
    head.Title = "Demo";

So, we have created a simple page with an image, a list and a table. You can see full example here: https://pastebin.com/U877kT4x