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 also be able to use this approach.
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 if the document is 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 in W3C.
For my website content, I use the HTML 4.01 Transitional DTD because I am comfortable with its syntax.
The best way to ensure that you are starting with a standards-based web page is to first copy a good skeleton web page and paste it into a basic text editor. Then save the code as a text file with the extension “.txt”. You can name the file my-HTML-template.txt.
You can also paste the code into the W3C Markup Validation Service to check that it’s up to par: if the code passes the “green” validator, you know your code is good. Simple skeleton web pages can be found at W3 Schools. Other code can also be found there, such as the DTD for HTML and XHTML.
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 outdated code. By starting with a valid basic template and correcting 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 head tags.
Normally, I don’t use hard carriage returns within a paragraph. All the editors I use have a “wrap text” 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 styling the page display.
I 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 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’ll see is all the content running together. This is because browsers look for line feed tags and not carriage returns. You can fix this by doing a search and replace with your editor: just find each carriage return and replace it with a break tag. When you reopen the HTML document, the various pieces of 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, such as a WordPress editor or the article content box in EzineArticles, you don’t have to worry about 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 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 parenthesis characters with “”, respectively.
[link title=”Template Style Sheet” rel=”stylesheet” href=”my-template.css”type=”text/css”]
If you’ve added some content to your my-HTML-template.txt file, when you open the file in a browser, you’ll start to see a pretty nice format. The page content is now centered in the middle half of the page, there’s a nice background color, and the text is Verdana. This is all because of the CSS code specifications 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 into the validator text box and click the “Verify” button. You’ll find that the above code passes “in green”, as it should.
To apply the display format, the content that will receive the format must be identified. 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 up 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 the content. If you’re publishing your content online, you’ll probably be able to put 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 “in the green.”