By Lee Sykes
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.
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
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.
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:
<strong>This tag makes the text bold</strong>
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.
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:
<a href="http://www.dnncreative.com" target="_blank">DNN Creative Magazine</a>
The Anchor Tag <a>
creates a URL link
The attributes for the <a>
tag are href="…"
These specify the URL for the link and that the link should open in a new window.
(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:
<p>Welcome to DNN Creative Magazine</p>
<p>This is my first attempt at creating a paragraph</p>
(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)
<p><strong>This text is bold </strong><br/>
<em>This text is in Italics </em></p>
<p><strong><em>This text is using bold and Italics</em></strong></p>
This text is bold
This text is in Italics
This text is using bold and Italics
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:
<h1>This is a heading</h1>
To create a link, use the anchor tag <a>
- you need to specify the href attribute to define the destination, eg:
<a href=”http://www.dnncreative.com”>DNN Creative Magazine</a>
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:
<h1 id=”WebsiteDesign”>Website Design</h1>
Now link to the Title “Website Design” using:
<a href=”#WebsiteDesign”>Go to Website Design</a>
Clicking on this link will scroll the page to the area that you linked to, ie. The “Website Design” title.
The image tag looks like this:
<img src="http://www.dnncreative.com/Portals/0/Logo.jpg" alt="DNN Creative Logo" border="0" height="112" width="228"/>
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:
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:
<img src="http://www.dnncreative.com/Portals/0/Logo.jpg" alt="DNN Creative Logo" border="0" height="112" width="228” align="right"/>
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.
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
Intermediate tables explains how to join cells together using the colspan and rowspan attributes
When creating a table within DotNetNuke it will automatically add the following attributes to the table:
<table style="width: 100%;" align="" border="1" cellpadding="1" cellspacing="1">
Can be set in percentage, pixels, or em
left, center, right
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.
HTML Dog – provides indepth details for HTML from beginner to advanced and also includes a list of HTML Tags and their attributes.