When I write an article, or any web page, I like to start with basic HTML, XHTML, and CSS documents that I know contain valid code. After reading this tutorial, you will be able to use this approach as well.
There are two basic standards-based document types that I use to write web pages. The former has a transitional XHTML 1.0 Document Type Definition (DTD), just like WordPress uses. The second is a basic HTML document with a transitional HTML 4.01 document type definition (DTD). These definitions tell the browser which specification the document uses. For example, the DTD would be used to tell a browser whether the document is HTML or XHTML. The DTD is the first line of code on 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 W3C.
For my website content, I use HTML 4.01 Transitional DTD because I am comfortable with its syntax.
The best way to ensure you’re starting with a standards-based web page is to first copy a good skeleton web page and paste it into a basic text editor. Next, save the code as a text file with the extension “.txt”. You can name the file my-HTML-template.txt.
You can also paste your code into the W3C Markup Validation Service to check that it’s up to par: if your code passes the validator “green”, you know your code is good. Simple skeleton web pages can be found on 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 large number of errors. Sometimes this is because the wrong DTD is specified for a page; at other times, the failure is due to the use of non-standard or obsolete code. If you start with a valid basic template and correct any validation errors that appear, your pages will always be “green” when published to the web.
Once you have a valid basic template, you can start adding your content between the body tags and additional code between the header tags.
Normally, I don’t use hard carriage returns within a paragraph. All the editors I use have a “text wrap” feature that allows me to see all the text I type 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 use a hard carriage return after the last sentence of a paragraph and add an additional one between paragraphs. Hard returns can also be added for extra space between other elements, such as the captcha.
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 the content runs together. This is because browsers look for line break tags and not carriage returns. You can fix this by doing a search and replace with your editor: just search for each carriage return and replace it with a break tag. When you reopen the HTML document, the various parts of the content will be neat and tidy, but not very pretty. CSS styling will fix this.
If you’re just “dropping” the content between the body tags in a visual editor on the web, like a WordPress editor or the article content box on EzineArticles, you don’t have to worry about line breaks, as they’ll 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 where you saved your HTML template file.
Body
{
background: #ffeff2;
black;
line height: normal;
margin: 3% 25% 3% 25%;
minimum width: 400px;
}
The link meta tag associates a CSS file with the HTML document. Copy and paste the link tag shown below between the header tags in the my-HTML-template.txt file you saved. Replace the characters in parentheses with “”, respectively.
[link title=”Template Style Sheet” rel=”stylesheet” href=”my-template.css”type=”text/css”]
If you’ve added any content to your my-HTML-template.txt file, when you open the file in a browser, you’ll start to see some pretty nice formatting. The page content is now centered in the middle half of the page, there is a nice background color, and the text is Verdana. This is all due to the CSS code specifications for “body”. The “body” code determines the general appearance of the page.
You can also validate your CSS code. W3C has a CSS code validator. Simply copy the CSS code and paste it into the validator text box and click the “Verify” button. You’ll find that the code above passes “green”, as it should.
To apply display formatting, you must identify the content that will receive the formatting. Content can be enclosed in parentheses with HTML tags that contain names that refer to style 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 for the style in the CSS file and then applies the style to the web page display. If a style is not referenced in the HTML tags, the browser will use its default values for display.
W3 Schools has comprehensive information and tutorials on CSS.
Creating your own (X)HTML and CSS templates, and then passing them through W3C validators, is a great way to ensure that your web pages are always 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 structure of the web page and add the content. Use CSS to style the display of content. If you’re publishing your content online, you’ll probably be able to place the content of your text file (between the body tags) directly into the editor’s text box without any changes. If you want to view your document in a browser as you create it, you may need to add break tags between content elements and then save the file with an “.HTML” extension. By validating your web pages as you create them, you can always be sure that when they are published online, they will be validated “green.”