Help & Tutorials - HTML Editor Topics
Answers to questions about our HTML Editor

Editing Other File Types

The editing system goes beyond HTML files and can allow you to access and edit file types on a website such as:
- Cascading Style Sheets (CSS)
- Extensible Markup Language (XML)
- Java Script (JS)

Note:
- The above files are editable by this system but they behave differently than a standard HTML file.
- These file types are ONLY editable with the Professional version of the editing system.


Cascading Style Sheets (CSS)

File extension: .css

Quick Definition:
CSS stands for Cascading Style Sheets and is a supporting file that helps to define how to display HTML elements on web pages.

Common Uses:
A properly designed website often has most if not all of its styles stored in style sheet(s), preferably in an external style sheet (files with extension of .css)

Styles are used to give components of pages structure and formatting. The most common use of styles is applied to text elements but they are also used with objects including tables, layers and DIV tags.

Quick tutorial on CSS formatting:
If an object such as text on your web page contains a style it would show in the styles dropdown menu. In that case you can be aware of the style used and have the option to change the style in the dropdown menu if you wish to do so.

If you wish to make changes to a style, you will need to open the style sheet separately in the editor and make the necessary changes. When saved, your changes will in turn be reflected on any object that uses that style.

Refer to the text below, which is using the style "textlinks".

This sentence has the style "textlinks" applied to it.

img

If needed, this style can actually be edited from within the .css file. In such a case, opening the .css file in the editor will allow you to modify the settings for any specific style(s).

Let's take a deeper look at the style "textlinks" below:
It is a cascading style (meaning it is composed of more than one style designation). For example, it not only has a font style but it also has font size, style, color and even text decoration applied to it.

You can make changes to the standard style by modifying the areas of red in the code. Therefore, if you wanted to reduce the font size and remove the underline you would make the following changes:

- Lower the font-size (ex. change 14 to a smaller number such as 10 or 12)
- Remove "underline" under text-decoration and replace with "normal" which is the default for null/nothing.


img


Example of CSS in action:
Click here to see examples of CSS in action with a simple web page and the CSS code that is used to apply formatting to the web page

Helpful Links to learn more in-depth about XML:

- http://en.wikipedia.org/wiki/CSS
- http://www.w3schools.com/CSS/css_intro.asp

 

Extensible Markup Language (XML)

File extension: .xml

Quick Definition:
XML is a markup language much like HTML. However, XML was designed to carry data, not to display data (HTML is the most common code type used to display website data). XML by itself does not do anything but it is often used in conjunction with HTML or Flash to populate content/data that is then displayed to the end user.

Common Uses:
XML's common purpose is to transport and store data. It is often used to fuel the data and information to web features such as Flash objects that include but are not limited to MP3 players, Video Players, etc.

Example of XML:
Below is an example of a basic XML file used to populate a flash MP3 player. By using the editor, one can update the content of the MP3 player directly from the XML file. For example, if the editor wanted to edit the title of Track 1, they can do so within the tag.

As with any HTML file there is an open tag (Ex. and a close tag ) for each component and must always be maintained.

<?xml version= "1.0" encoding= "UTF-8" ?>

<xml>

<track>

<path> mymusic.mp3 </path>
<title> Track 1 - My Music - Introduction to my CD Mix </title>

</track>
<track>

<path> sound_like_me.mp3 </path>
<title> Track 2 - Sound Like Me</title>

</track>
<track>

<path> Good_times.mp3 </path>
<title> Track 3 - Good Times - With Stuart Savvy </title>

</track>

</xml>


Let's assume the user wanted to add a 4th track to their mp3 player titled "Track 4 - Lean Back - Fat Joe."

In that case, the user can add the following tag after the last and before the line which is the end of the XML file (as updated in xml below)

<track>

<path> Lean_back.mp3 </path>
<title> Track 4 - Lean Back - Fat Joe </title>

</track>

<?xml version= "1.0" encoding= "UTF-8" ?>

<xml>

<track>

<path> mymusic.mp3 </path>
<title> Track 1 - My Music - Introduction to my CD Mix </title>

</track>
<track>

<path> sound_like_me.mp3 </path>
<title> Track 2 - Sound Like Me</title>

</track>
<track>

<path> Good_times.mp3 </path>
<title> Track 3 - Good Times - With Stuart Savvy </title>

</track>
<track>

<path> Lean_back.mp3 </path>
<title> Track 4 - Lean Back - Fat Joe </title>

</track>

</xml>


This is just one simple example of XML usage as there are many others.

Helpful Links to learn more in-depth about XML:
- http://xml.silmaril.ie/basics/whatfor/
- http://en.wikipedia.org/wiki/XML

 

Java Script (JS)

File extension: .js

You can also open javascript files and edit within the editor. Changes to Javascript files requires expertise in javascript and HTML.

The Javascript section is being updated. Please check back later.