HTML to XML Migration

xml spy
HTML to XML Migration

With your edition of XMLSPY 5 comes HTML to XML Migration for easy editing of content from the Internet. With this feature it is now possible to convert content to XML by simply using drag-and-drop!

Top Next

© 2002 Altova


Overview

Overview

HTML to XML Migration has four main areas: the three panes on the left, and the main window at left.These areas do not much differ from those in Stylesheet Designer.

· The top left pane displays a tree view for the HTML to XML migration

· The Text Style pane consists of several tabs, and allows you to assign HTML properties to the elements in the main window before importing them to XML.

· The Block Style pane consists of several tabs, and allows you to assign HTML properties to blocks, such as tables, in the main window before importing them to XML.

· The main window is where the HTML document is loaded to import its objects into the tree view pane.

migrationovrvw

Previous Top Next


Symbols and Icons

Symbols and Icons

HTML to XML Migration uses easily recognizable symbols to display the various schema elements in the tree view, and uses tag symbols for the XSLT elements in the Design view. Further symbols and icons come from Stylesheet Designer, and are documented int the Reference section of Stylesheet Designer.


HTML to XML Tutorial

HTML to XML Tutorial

The aim of this tutorial is to convert a HTML page into an XML document for easy editing in Stylesheet Designer. In this specific case, we want to convert parts of the Altova homepage from HTML to XML. Once the migration of the document from HTML to XML is done, you can easily edit the XML document. See also the Stylesheet Designer tutorial and references section.


Starting Stylesheet Designer:

Starting Stylesheet Designer:

1. Open your Internet Browser and got to the Altova homepage at http://www.xmlspy.com/company.html

hmpage

2. Click the Edit with XML Spy in the Internet Explorer toolbar.

XML Spy opens, and the Altova homepage is displayed in the main window of an empty environment in XML Spy.

If Your Internet browser toolbar does not show the Edit with XML Spy button:

· Highlight the URL in the Address field of your browser, in this case: http://www.xmlspy.com/company.html.
· Copy it (shortcut CTRL + C).
· Open XML Spy. You are presented with en empty environment.

spyopenfile

· Select Open URL... and paste the URL into the Address field (shortcut CTRL + V). Click OK.

openurl

The URL is retrieved and is shown in the main window of XML Spy.

Please note:
If you use the above mentioned method to import the HTML document, images and animations of any format (.jpg, .gif, .bmp...) are not shown in the HTML document, and are marked with the 'Not Available' icon

In some cases, images or animations are marked by a description (see above).

This is how the Altova homepage is shown in XML Spy:

3. Save the HTML document in the Examples folder, e.g. as altova.html.

saveas

To get the homepage with images and animations, use the following method:

1. Open Internet Explorer, type the address of the URL.
2. Click File | Save as... and save it to your computer. Remember the folder where you saved it to!

The HTML document is now saved and ready for import into XML.


Open HTML document

Open HTML document

1. Start Stylesheet Designer by double clicking on the Stylesheet Designer icon.

You are presented with an empty environment.

2. Select HTML Import | Open HTML file...

openhtmlmenu

3. Open the previously saved file Altova.html. You will find this file in the Examples folder.

At this point You are ready to edit the HTML document and convert it to XML.


Import HTML to XML

Import HTML to XML

1. From the HTML document, mark the HOME entry, drag it into the tree view window, and drop it under the Root element. As soon as you reach a point where you can drop the element, a right-and-down arrow or a down arrow is shown. The entry can be dropped only when an arrow is shown. The right-and-down arrow appends a child, the down arrow appends an element or attribute..

firstelemtent

Release the mouse button. A pop-up window opens. Depending on what you want to do, you have a selection of options. Since we want to insert the node as an element, click on the first option.

addnodes

2. The HOME object is part of a table. At this point a new window opens:
selecttable

Select 'as dynamic table' to import all fields of the table into the tree view. All elements of the table are being imported into the tree view. If you select an object that is not part of a table, the HTML Import selected table does not open.

3. Right click on Table Root and select Rename to change its name to 'Link_to', NewNode under HyperLinkNode to 'Home', NewNode under HyperLinkNode1 to 'Products', NewNode under HyperLinkNode2 to 'Downloads', NewNode under HyperLinkNode3 to 'Order', NewNode under HyperLinkNode4 to 'Support', NewNode under HyperLinkNode5 to 'FAQ', NewNode under HyperLinkNode6 to 'Resources', NewNode under HyperLinkNode7 to 'References',NewNode under HyperLinkNode8 to 'Partners', NewNode under HyperLinkNode9 to 'Company', and NewNode under HyperLinkNode10 to 'Japan'.

renamenode

4. After renaming the elements, the tree view should look like this:

treenodes

The HTML document should look like this:

renamemain

The HTML document now shows the tags of the nodes that have been imported into the tree view.
5. Save the project. Select File / Save as. A window opens:

savealsoas

Click Yes to save all files.
6. Select a name for the W3C Schema. In this case, type 'altova'.

savew3c

The file is saved as altova.xsd.
7. Select a name for the Xslt file. In this case, type 'altova'

savexslt

The file is saved as altova.xslt.
8. Select a name for the XML file. In this case, type 'altova'

savexml

The file is saved as Altova.xml.
9. Select a name for the sps file. In this case, type 'altova'

savesps

The file is saved as Altova.sps. All files have now been saved, and are ready for edit.

You have now successfully imported parts of the Altova homepage HTML file into XML for furteher editing in Stylesheet Designer!


HTML to XML Migration References

HTML to XML Migration References

Migration of HTML to XML documents is done in Stylesheet Designer. For a complete description of all Stylesheet Designer windows and menu commands, please see the Stylesheet Designer Reference section.


Import HTML file

Import HTML file

Before you can import HTML content into XML, you must first save the HTML file in XML Spy.
To open a HTML document in XML Spy:
Open Internet Explorer and type the URL of the page you want to edit.

1. Click, if available, the Edit with XML Spy Button [image] in the Internet Explorer toolbar.

If not available:
· Open XML Spy and select File | Open URL. Type the URL of the document to import.
· Click OK

2. Select File | Save as... and save the file with .html extension.
3. Open Stylesheet Designer.


Open HTML Import

Open HTML Import

HTML to XML Import is a feature included in Stylesheet Designer.
1. Open Stylesheet Designer and click HTML Import in the menu bar. Select the HTML file to import.

openhtmlmenu

2. Select Open HTML file... and choose the HTML file you want to import, then click Open.

openfromdesigner

3. The selected file will be inserted into the main window of Stylesheet Designer.

newovrvw


Content extraction from HTML to XML

Content extraction from HTML to XML

Mark an object in the Stylesheet Designer Main window and drag it into the tree view window.
1. Object is part of a table:
A window opens.

selecttable

See the Stylesheet Designer Reference Section for furter details.

2. Object is stand-alone:
Drag and drop it into the tree view

Add nodes as elements
Dragged object is inserted into the tree view as element.

Add nodes as attributes
Dragged object is inserted into the tree view as attribute.

Add nodes as surrounding template
Dragged object is inserted into the tree view as the template surrounding the object in the HTML document.


HTML Import menu

HTML Import menu

HTML Import menu is opened from the menu bar in Stylesheet Designer.

Open HTML file...
Browse your computer to locate the HTML file to import.

Add Child Schema Nodes
Select this option to add a child to a schema node in XML. You can choose between adding a child as elements, attributes or as surrounding template.

Insert Schema Nodes
Select this option to insert schema nodes as elements, attributes or as surrounding template in XML.

Append Schema Nodes
Select this option to append schema nodes as elemtnes, attributes or as surrounding template.

Settings...
Opens the HTML Import settings window, where you can mark a checkbox to import whitespace texts.


Context menus

Context menus

Context menus are opened after using the drag-and-drop function, or by right clicking objects in the user interface. The pop up menu that opens is dependent on which element you right click.

Right click an object in the HTML document:

ctxinsertcontents

Insert contents
Changes the original text into the Contents placeholder in the HTML document.

Insert Rest of Contents
Changes the original text into the Rest of Contents placeholder in the HTML document.

Hyperlink...
To set hyperlinks or bookmarks in Stylesheet Designer. See also the References Section in Stylesheet Designer.

Please note:
Depending on which object you click, this context menu can have more or less functions. For a complete description of all features, see the referecne section in Stylesheet Designer.

Right click an object in the tree view:

ctxtreeview

Rename
Use this feature to rename objects in the tree view.

Add Child element
Add a child element under the selected object in the tree. Option not available for HyperLink nodes and Table nodes.

Insert element
Inserts an element into the tree.

Append element
Appends an element into the tree under the selected object.

Convert to attribute (greyed out if the selected object is an attribute)
Changes the selected item from element to attribute.

Convert to element (greyed-out if the selected object is an element)
Changes the selected item from attribute to element.

Delete
Delete the selected element and all sub-elements.

Drag-and-drop of an object from the HTML document to the tree view:

ctxinsertas

Add nodes as elements
The object is inserted as element into the tree.

Add nodes as attributes
The object is inserted as attribute into the tree.

Add surrounding template
Use this option to add a template into the tree. No data will be imported, only a template of the selected object(s).


Help

Help

HTML to XML Migration contains a online help system based on the Micsrosoft HTML Help Viewer, and let you currently access the table of contents, index and search functions of the supplied help file.

Previous Top