When I write an article--or any web page, for that matter--I like to begin with basic HTML, XHTML, and CSS documents I know contain valid code. After reading this tutorial, you will be able to use this approach, too.
There are two types of basic, standards-based documents that I use to write web pages. The first has a Document Type Definition(DTD) of XHTML 1.0 Transitional, just like WordPress uses. The second is a basic HTML document with a Document Type Definition(DTD) of HTML 4.01 Transitional. These definitions tell the browser which specification the document uses. For example, the DTD would be used to tell a browser if the document was HTML or XHTML. The DTD is the first line of code in a web page.
The syntax rules for HTML and XHTML are different in some ways. You must use the correct syntax for the DTD you use or your code will not pass at W3C.This is so even though the browser you use might display your page as expected: browsers are very forgiving with respect to non-standard code.
For the content on my web site, I use the HTML 4.01 Transitional DTD because I am comfortable with its syntax.
The best way to insure that you are starting with a standards-based web page is to first copy a known good skeletal web page and paste it into a basic text editor. Next, save the code as a text file with the ".txt" extension. You could name the file, my-html-template.txt.
You can also paste the code into the W3C Markup Validation Service to check that it is up to snuff: if the code passes the validator "in the green," you know your code is good. Simple skeletal web pages, can be found at W3 Schools. Other code, such as the DTD for HTML and XHTML, can also be found there.
It is very common to find that online web pages fail W3C validation with a massive number of errors. Sometimes this is because the wrong DTD is specified for a page; at other times, the failure is due to using non-standard or deprecated code. If you start with a valid, basic template and correct any validation errors that show up, your pages will always be "in the green" when they are published to the Web.
Once you have a valid basic template, you can begin to add your content between the body tags and extra code between the head tags.
Normally, I do not use hard carriage returns inside a paragraph. The editors I use all have a "word wrap" feature that enables me to see all the text I write without having to use the horizontal scroll bar. The actual line length of the published content will be determined later when the page display is styled.
I do use a hard carriage return after the last sentence of a paragraph and add an extra one between paragraphs. Hard returns can also be added for extra space between other elements, such as image code.
If you have added content to the my-html-template.txt file, save it again with a ".html" file extension. You can then open it in a browser. What you will see is that all of the content runs together. That is because browsers look for line break tags and not carriage returns. You can fix this by doing a find and replace with your editor: just find every carriage return and replace it with a break tag. When you open the HTML document again, the various parts of the content will be neat and tidy but not very pretty. CSS styling will fix this.
If you are just "dropping" the content between the body tags into a visual editor on the web, such as a WordPress editor or the article content box at EzineArticles, you don't have to worry about the line breaks as they will be added to the HTML code for you.
Copy and paste the CSS code below into your text editor. Save it as "my-template. css" in the same folder in which you saved your HTML template file.
body
{
background: #fffef2;
color: black;
line-height: normal;
margin: 3% 25% 3% 25%;
min-width: 400px;
}
The link meta tag associates a CSS file with the HTML document. Copy and paste the link tag shown below between the head tags in the my-html-template.txt file you saved. Replace the bracket characters with "", respectively.
[link title="Template Style Sheet" rel="stylesheet" href="my-template.css"type="text/css"]
If you have added some content to your my-html-template.txt file, when you now open the file in a browser, you will begin to see some pretty nice formatting. The page content is now centered in about the middle half of the page, there is a nice background color, and the text is Verdana. This is all due to the specifications in the CSS code for "body."The "body" code determines the overall appearance of the page.
You can also validate your CSS code. W3C has a CSS code validator. Just copy the CSS code and paste it in the validator's text box and click the "Check" button. You will find that the code above passes "in the green," as it should.
In order to apply display formatting, the content to receive the formatting must be identified. Content can be bracketed with HTML tags which contain names that reference styling definitions in the CSS file. Examples of these tags are "div" and "span". When a browser encounters an HTML tag and finds a name reference, it looks in the CSS file for the styling and then applies the styling to the web page display. If there is no styling referenced in the HTML tags the browser will use its defaults for the display.
W3 Schools has comprehensive information and tutorials about CSS.
Building your own (X)HTML and CSS templates--and then putting them through the W3C validators--is a great way to insure that your web pages will always be standards-based. You don't need an expensive web-development software package to develop your templates; you can use a basic text editor. Use the text editor to build the web page structure and add the content. Use CSS to style the display of the content. If you are publishing your content online, you will probably be able to drop the content from your text file (between the body tags) right into the editors text box without any changes. If you want to view your document in a browser as you create it, you might have to add break tags between content elements and then save the file with a ".html" extension. If you validate your web pages as you create them, you can always be sure that when they are published online, they will validate "in the green."
An extended HTML version of this article, including lots of HTML and CSS code, can be found at www.selectdigitals.com
Please feel free to visit my WordPress Blog at
www.blog.selectdigitals.com
for additional (X)HTML and CSS tips and tricks.
Article Source: http://EzineArticles.com/?expert=Royce_Tivel
