Beginners html guide for DotNetNuke

By Lee Sykes

October 2005

When working with the Text / HTML module in DotNetNuke it helps to have a basic understanding of HTML. This is a basic overview to working with HTML.

The Text / HTML module within DotNetNuke allows you to add text to your website without needing a knowledge of HTML, however, to have further control over the layout of the text and images within your website, a basic understanding of HTML will go a long way.

Why?

When you are creating your text, there are occasions when you want to add further elements to your text that the default text editor does not provide for, here are some examples:

• Editing a URL link to open in a new window
• Editing a table, for instance to change the border size of the table, or to join cells
• Adjusting the properties of an image to allow the text to be displayed alongside the image

How?

Using the Text / HTML module, the default display is 'Design mode', click on HTML to view the HTML created by the module.

To begin learning a basic understanding of HTML, keep swapping between the HTML and Design modes when entering text into the Text / HTML module and read how the module is generating the HTML.

HTML Introduction

Tags

All of the content you create is surrounded by HTML Tags. Tags consist of an opening and closing tag. It’s important to ensure that your code is fully formed and that for each opening Tag there is a closing Tag.

An example of this is:
Not all tags use an opening and closing tag, some Tags close themselves, such as the line break tag:
The main element you need to remember is that all tags must be closed.

Attributes

Tags can also have attributes. Attributes provide further instruction, such as in a URL link, you can specify whether or not to open the link in the same window or in a new browser window.

Attributes appear inside the opening tag and their value is always inside quotation marks. A URL link for example will look like this:
The Anchor Tag <a> creates a URL link

The attributes for the <a> tag are href="…" And target="_blank"

These specify the URL for the link and that the link should open in a new window.

HTML Tags

Paragraph

<p></p> (press enter to create a paragraph when editing text in Design mode of the HTML / Text module)

To create a paragraph, surround your text in the paragraph Tags, for example:

Line Break

<br/> (used to create a separate line)(press shift and enter to create a Line Break when editing text in Design mode of the HTML / Text module)

Italics

<em></em>

Bold

<strong></strong> eg:
This displays:

Headings

If you have headings within your text, you can use the following Tags:
h1,h2,h3,h4,h5,h6 – h1 is the largest size and h6 is the smallest, eg:

Links

To create a link, use the anchor tag <a> - you need to specify the href attribute to define the destination, eg:
The main attribute you will use with the anchor tag is:
Target=” … ”

• _blank loads the linked file into a new, unnamed browser window
• _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
• _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it
• _top loads the linked file into the full browser window, thereby removing all frames

Creating a link to another section of the page

You can also link to another section within the same page. First of all, at the section of the page where you wish to link to, add an id attribute to a Tag (you can add this to most tags) for example:
Now link to the Title “Website Design” using:
Clicking on this link will scroll the page to the area that you linked to, ie. The “Website Design” title.

Images

The image tag looks like this: 

src

Src= This is the URL location for where your image is stored. This can be an absolute value, such as:
or the link can be relative, eg:

align

You can also use the align attribute: Top, Bottom, Left, Right, Center, AbsMiddle

Using the align attribute allows you to place text around the image:

alt

Means alternate description. It’s important to enter alt text when you add an image to a page. If an image can not be displayed, then the alt text is displayed in its place. The alt text is also displayed whenever you hover over the image and its also used for accessibility, such as speech recognition software reads out the alt text for a visually impaired person browsing your website.

Tables

If you are using tables within the HTML / Text module, it’s useful to have a basic understanding of how the HTML code for a table is constructed so that you can make any layout adjustments easily.

HTML Dog provides a good introduction to tables
http://www.htmldog.com/guides/htmlbeginner/tables/

Intermediate tables explains how to join cells together using the colspan and rowspan attributes
http://www.htmldog.com/guides/htmlintermediate/tables/

When creating a table within DotNetNuke it will automatically add the following attributes to the table:

width

Can be set in percentage, pixels, or em

align

Can be:

border

The thickness of the border. If you do not wish to display a border you can set this to “0” or delete the border attribute.

cellpadding and cellspacing

Adjust the padding and spacing between the table cells, these values can be set to “0” or delete the attributes if you do not wish to use these elements.

View the HTML Tags definitions from HTML Dog under Table for further information about the attributes available.
http://www.htmldog.com/reference/htmltags/

HTML Resources:

HTML Dog – provides indepth details for HTML from beginner to advanced and also includes a list of HTML Tags and their attributes.
http://www.htmldog.com