 |
 |
|
|
|
|
 |
|
|
Tips and Tricks
Discussion of the popular 'Tips and Tricks' from the Newsletter. Questions or comments regarding the provided tips, or other general tricks of the trade.
| You are not authorized to post a reply. |
|
| |
|
contactdp
Posts:475
 |
| 06/10/2008 11:15 AM |
 Alert
|
Writing XHTML, you are really writing XML code, but restricting yourself to a predetermined set of elements. This gives you all the benefits of XML, while avoiding the complications of true XML; bridging the gap for developers who might not fancy taking on something as tricky as full-on XML. As you're coding under the guise of XHTML, all of the tags available to you should be familiar. Writing XHTML requires that you follow the rules of conformant XML, such as correct syntax and structure. As XHTML looks so much like classic HTML, it faces no compatibility problems as long as some simple coding guidelines are followed.
Using the standard settings of DotNetNuke and a table based skin while also ensuring you have XHTML compliant code will not make any difference. If however you wish to improve the performance, accessibility, search engine results and reduce the bandwidth of your DotNetNuke skins, you can create CSS layout skins which do not use any tables.
Step By Step:
1. DOCTYPE: Whether you use the XML declaration or not, every XHTML document must be defined as such by a line of code at the start of the page, and some attributes in the main <html> tag, which tell the browser what language the text is in. The opening line is the DTD (Document Type Declaration). This tells your browser and validators the nature of your page.
A DTD is the file your browser reads with the names and attributes of all of the possible tags that you can use in your markup defined in it.
In DotNetNuke this can be accomplished in skin level by just creating skinname.doctype.xml with a node containing doc type definition… like
<SkinDocType><![CDATA[<!DOCTYPE XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">]]></SkinDocType>
A DTD is the file your browser reads with the names and attributes of all of the possible tags that you can use in your markup defined in it.
Ex:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2. XHTML CODING: Changing over to XHTML as the new standard is that there really isn't much new to learn. No new tags or attributes have been added into your repertoire, like HTML 4 (although a few have been deprecated); this is just a move towards good, valid and efficient coding. XHTML documents stress logical structure and simplicity, and use CSS for nearly all presentational concerns. It just means you have to change the way you write code. Even if you always wrote great code before, there're a few new practices you need to add in.
3. NAVIGATION: Once you begin using CSS with DotNetNuke, you need to ensure that your code is following the XHTML standards. You may find that solpart menu is not xhtml standard so we recommend using custom navigation we at r2integrated typically use our ListX for creating the navigation; please refer to “Create XHTML and SEO Friendly Navigation, Sitemap and Breadcrumb” (http://www.bi4ce.com/Support/Forums/tabid/106/forumid/22/postid/7127/view/topic/Default.aspx) on our forums.
4. XHTML Coding Practices: The different styles of coding used by an XHTML author compared to the old HTML methods. You shouldn't have many problems adopting these new techniques, so long as you work carefully. It should be noted, even if it is an obvious point, that you really must hand code to be able to write valid XHTML. No current visual editor comes close to the compliance required.
1. Tags and attributes have to be lowercase
Whereas before it used to come down to preference whether you used <B> or <b>, now all of your tags and attributes have to be in lowercase. This is because XML is case-sensitive — i.e. a tag in capitals is a different tag to one in small letters.
2. All tags must be closed
Now all of those once-optional </p> and </li> tags are essential for your XHTML documents to validate. Even empty elements like img, hr, and br must now be closed. You can use a standard forward-slashed end tag, or just add in a forward slash to the end of the tag.
<br />
or
</br>
It's recommended that you use the former method here, and leave a space before the slash so older browsers aren't confused. They'll just ignore the trailing slash as an unrecognised attribute.
3. Documents must be well-formed
'Well-formedness' is a dream that you were meant to try and make real from the start, but many coders write badly-syntaxed code. You have to open and close tags correctly in XHTML, and nest them properly.
Bad: <p>My coding is <b>bad</p></b>
Good: <p>But my coding is <b>good</b></p>
Remember the simple rule you should have been taught at the very start: The first tag you open is the last tag you close.
4. Attribute values must be quoted
Back in HTML you could leave out the quotes on a number value, like HEIGHT=3, but now all values have to have quotation marks around them, so that would become height="3".
5. Attribute Minimization
Some HTML tags had one-word attributes, like HR's NOSHADE. You can't use these anymore, and must add the attribute in as its own value, like so:
<hr noshade="noshade" />
<input type="checkbox" checked="checked" />
Any browser compatible with HTML 4 shouldn't have a problem with markup like this.
6. Internal Links
Internal links in HTML were made using a combination of the <a> tag and the name attribute. In XHTML, to go along with XML, you use the id attribute to make these links instead of the name attribute. For a while you should probably include both so that your links still work on older browsers, but this will be the method used in future. The name attribute has been deprecated.
<a href="#section">link</a>
<p id="section" name="section"></p>
Since all tags can take the id attribute, you can now make links to any element on your page. Most helpful if you add the link to a heading or specific paragraph.
7. Alternative text in images
While it has always been good practice to add the alt="..." attribute to your images, now you must add some alternate text to every image on your page. If your image is purely decorative you can give it a null alt attribute with a space:
<img src="header.gif" alt=" " />
You could also try adding the title="..." attribute to as many elements as possible. It's a good accessibility aid, especially on links.
8. Ampersands in URLs
Ampersand characters are frequently used in page addresses to carry variables, like in PHP. When coding these addresses into your XHTML, you must escape them using the entity value &. They'll be displayed as ampersand characters (&) on screen, of course.
<a href="reviews.aspx?page=27&style=blue">link</a> becomes
<a href="reviews.aspx?page=27&style=blue">link</a>
9. Content must be wrapped in a block-level element
In XHTML Strict, when you add text to your page, you can’t add it directly into the body element. All text needs to be within a suitable containing block-level element, such as a p, a ul or a div.
10. Validate
As you should always have done before, be sure to validate your document to certify that there are no errors. There is absolutely no point in writing XHTML if you don't make sure it is free of mistakes. The online » W3C validator (http://validator.w3.org/) will check your code for mistakes and give you a full report back. Once you can » understand its occasionally unhelpful error messages, it is an excellent utility. Make use of it.
|
|
Durga Prasad(DP) | Senior Web Engineer
R2integrated |
|
|
| You are not authorized to post a reply. |
|
|
|
ActiveForums 3.6
|
|
| Latest Post
|
 |
|
At R2integrated (formerly Bi4ce), we take support seriously. That's why we support our customers and DNN community with daily monitoring from our experienced engineering team. We ask that the first step taken is to read the relevant documentation and support forums prior to submitting any questions that may already be available or have been answered. We ask that you review the documentation that we provide for our products before posting a question.
The Forums are for our customers to chat, exchange ideas and strategies, and submit feedback. Please be sure to perform keyword searches for previous related forum responses.
To be helpful when submitting a new item, please include the following:
- DNN Version
- Module Version
- Admin Log Viewer Information
- Environment detail: Operating system, .NET framework version, database and version, IIS version, Browser version (if appropriate)
We always try to respond quickly and monitor the forums daily during business hours (EST). Occasionally, requests for a specific project requirement may not apply for the free support offered. For project specific support please submit via our Information Request form.
Thank you for using our Forums.
Click here to register for the Forums
|
|
|
|
| © 2008 by R2integrated (formerly Bi4ce) | DNN® is a registered trademark of DotNetNuke Corporation
|
 |
|
|
|
 |
|