Getting Started

How to Upload Files?

Before beginning, the foundation of the website needs to be in place. The files that dictate a website's appearance and function need to be loaded so they can be later referenced. For example, stylesheets and Javascript files.

Images, videos, and additional assets can also be uploaded to to be used throughout the site.

The HTML code that defines a website can be dissected into separate categories. The following declaration and elements compose a website: < !DOCTYPE html >, < html >, < head >, and < body >. The < !DOCTYPE html > informs the browser which version of HTML is being used. Within the < html > element are the < head > and < body > tags. The < head > tag holds external references and metadata. The contents of the head tag are not visible on the page. The content within the < body > element is visible on the page.

Within the WebTML Page Layout Screen the:

• Body Field holds the attributes of the < body > tag
• Layout Field holds the contents/structure of the < body > tag
• Head Field holds the contents of the < head > tag
• * < !DOCTYPE html >and metadata are automatically applied to the HTML by the WebTML system and do not need to be manually included

Starting with an Existing .html Document?

Copy the entire HTML code and paste it into the the Layout Field of the Page Layout Screen. Click out of the Layout field textbox and WebTML will automatically dissect the HTML code and arrange it into the appropriate field. For example, the contents of the body tag will appear in the Body Tag Field, the contents of the < head > tag will appear in the Head Field, and the content of the body tag will be separated into the Layout Field.

Head:

Within the Layout Field of the Page Layout Screen HTML and inline CSS can be written. In this case, < main >< /main > tags will be used as the container for the sections on the page. The Layout and Head Field can be changed at any time to reflect changes in the layout and design of the site.

Layout:

• Step 1: Click on the Admin button
• Step 2: Once the text cursor is visible, enter the name of the sections, separated by a space or comma, that are going to be included into the page
• Step 3: Press enter to save the sections

The page should now be populated with the recently-entered sections. Each section will also have its own Admin button The Admin button offers a set of features to add, delete, move, and configure settings for each section that it’s associated with.

Section-specific javascript code can be added within the Javascript field, and as well as any section-specific CSS and JavaScript references within the "References” field.

The javascript field comes with a built-in validator. Script tags are also included by default, and do not have to be entered into the field. For javascript in the page layout, script tags are needed.

Further customizations can be applied to section layouts with WebTML’s predefined content tags. Content tags are a great way to replace certain elements within the section to make them easily editable through the edit menu later on. Examples of content tags include ##Header## and ##Body##. Content tags offer tremendous flexibility as they can be used in place of text, links, file names, numbers, and more.

For example, WebTML tags can be used to replace hard-corded elements such as the header.

Original Code

With WebTML Tags

In addition to the traditional and more common tags such as ##Body##, ##Header##, and Adding Dynamic Content, additional ##Generic## and ##Class## tags are provided to ensure greater flexibility.

A full list of WebTML content tags can be viewed above the layout field within the layout editor of a page, section, or item set.

The values of each content tag can be edited through the edit menu of a page, section or item set.

• Step 1: Hover over the Admin menu within the page, section, or item set
• Step 2: Click the Edit button
• Step 3: Enter in the value(s) into the appropriate field(s). Click and toggle between tabs at the top to access different fields.
• Step 4: Press "Save and Close"

(need explanation for this section)

By default, WebTML automatically generates an Item Set with each section that is created. This Item Set shares the same name as the section it’s in.

For example: the first item set within the section labeled "NewsBlock2” can be referred to by the tag ##NewsBlock2##.

When an Item Set has been created, items can be added and edited.

As mentioned earlier, Item Sets only provide the layout of the items associated to them. In order for the items to show, they must be added individually.

• Step 1: Hover over the Admin button of the item set
• Step 2: Click on the Add button
• Step 3: The edit menu will appear, and you can fill in the fields as appropriate
• Step 4: Click Save
• Step 5: Repeat steps to add additional items

• Step 1: Hover over the Admin button of the item set
• Step 2: Click on the Order Items button
• Step 3: Drag and move the items to the preferred order
• Step 4: Refresh the page

• Step 1: Hover over the Admin button of the item set
• Step 2: Click on the Delete button

There may be instances where a section requires more than one item set to complete its layout. A common example would be a footer, in which separate item sets could be made for the social media icons and the contact links. Adding additional item sets is easy and similar to how the first item set would be added.

In order for each Item Set within the same section to have its own unique content and layout, each must be assigned a unique sublist number.

• Step 1: Hover over the Admin button for the item
• Step 2: Select Edit Item Set
• Step 3: In the sublist dropdown, assign a number to the item


• Step 4: Repeat steps for the other items, ensuring that a different number is assigned to each item

The issue and categorization of different sublist numbers for Item Sets only remain true for individual sections. For example, sublist 1 can be used multiple times throughout the page provided that the item sets are in different sections altogether.

It is not necessary to change the sublist numbers for items within the same Item Set.