Select Digitals

Create Your Own HTML and CSS Templates

Organize Content with HTML — Display it with CSS




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 contains valid code. After reading this tutorial, you will be able to use this approach, too.

Below are two types of basic, standards-based documents. The first is a basic XHTML document with a Document Type Definition(DTD) of XHTML 1.0 Transitional, much like WordPress uses. The second is a basic HTML document with a Document Type Definition(DTD) of HTML 4.01 Transitional.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>


Copy the code for either of the basic documents. Open up a browser window and go to the W3C Markup Validation Service. Once on the validator page, paste the code into the text box. Click on the "Check" button to validate the code. The code should pass the check "in the green." W3C Markup Validation Service

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.

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.

If I am writing content for my WordPress blog, I generally use the WordPress editor's "Visual" input mode and WordPress converts my text-only input to valid XHTML code. My WordPress blog also has a "Valid XHMTL" link on the home page for validating the content.

For the articles on my web site, I use the HTML 4.01 Transitional DTD because I am comfortable with its syntax. I will use this DTD for the rest of the tutorial.

The basic HTML document below has some added text. I have replaced the default title, for one thing. In addition, I have added a couple of extra tags in the header. These include tags for a description, and keywords. I have also added comments which are bracked with <!−− and −&minus>.


<!--INSERT THE CORRECT DTD HERE-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--INSERT THE HEADER TITLE HERE-->
<title>My HTML Template</title>
<!--INSERT KEYWORDS HERE-->
<meta name="keywords" content="html, css, template">
<!--INSERT DESCRIPTION HERE-->
<meta name="description" content="This is a basic HTML template that will pass W3C validation--in the green.">
</head>

<body>
<!--START OF CONTENT-->
My HTML Template
<br><br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<br><br>
Ut convallis, velit et convallis feugiat, enim arcu dictum velit.
<br><br>
Morbi a leo faucibus lorem sollicitudin lacinia.
<!--END OF CONTENT-->
<br><br><br>
<!--START OF SIGNITURE BLOCK-->
I hope you enjoyed this article,
<br><br>
Aenean Lacinia
<!--END OF SIGNITURE BLOCK-->
<br><br><br>
<!--START OF FOOTER-->
© Copyright 2008 by Aenean Lacinia. All Rights Reserved.
<!--END OF FOOTER-->
<br><br><br>
</body>

</html>


You can copy and paste this HTML code into a text editor, save it, and then use it as a starting point for your own HTML template. I saved a copy as "my-html-template.txt" and also saved a copy as "my-html-template.html". I created a folder called "my-template" in which to save the HTML files and, later, an associated CSS file. Note that I have added HTML line-break tags, <br>, so that when the HTML file is opened in a browser, the text elements will not run together. If you save the text with a .html file extension and then open it in a browser, the various parts of the body text will be neat and tidy but not very pretty. We'll use CSS to fix this.

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
{
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
background: #fffef2;
color: black;
line-height: normal;
margin: 3% 25% 3% 25%;
min-width: 400px;
}

h1 {
color:maroon;
text-align:center;
}

hr
{
width: 400px;
height: 3px;
background-color: maroon
}

.bold
{
font-weight:bold;
}

.headline
{
font-size: 24px;
color:red;
font-weight:bold;
text-align:center;
}

#copyright
{
text-align:center;
font-size:14px;
}


Copy and then paste the folowing link tag between the <head> </head> tags in the HTML file:

<link title="Template Style Sheet" rel="stylesheet" href="my-template.css" type="text/css">


If you now open the HTML template 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. 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 text to receive the formatting must be identified. For certain HTML tags, like <body> and <h1>, no class or id names are required. The formatting will be applied automatically when a browser sees these tags. The browser will check the CSS file and apply any formatting specified there or use its own defaults.

Other content can be bracketed with HTML tags which contain either the class or id names in the CSS file. Examples of these tags are the <div> and <span> tags.

One way to identify text for special formatting is to use the <span> </span> tags to bracket the text. For example, if you wanted the first few words in the first paragraph of the enhanced template file to be bold, you would place the text between span tags like this:

<span class="bold">Lorem ipsum dolor</span>


The class reference to the name "bold" alerts a browser that there is special display formatting in the CSS file to apply. The Browser checks the CSS file for the class of ".bold" and finds it must use a font-weight of bold for the text display.

You can copy and paste the final HTML document below into your text editor, save the file as an HTML file, and look at it in your Browser. Study what the Browser displays and determine how the display was achieved through the CSS file.


<!--INSERT THE CORRECT DTD HERE-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--INSERT THE HEADER TITLE HERE-->
<title>My HTML Template</title>
<link title="Template Style Sheet" rel="stylesheet" href="my-template.css" type="text/css">
<!--INSERT KEYWORDS HERE-->
<meta name="keywords" content="html, css, template">
<!--INSERT DESCRIPTION HERE-->
<meta name="description" content="This is a basic HTML template that will pass W3C validation--in the green.">
</head>

<body>
<!--START OF CONTENT-->
<div class="headline">
My HTML Template
</div>
<br>
<hr>
<br>
<span class="bold">Lorem ipsum dolor</span> sit amet, consectetuer adipiscing elit. Phasellus turpis. Nunc sodales nibh sed lectus. Vestibulum rutrum ipsum eget nibh. Vestibulum dapibus. Donec at neque non libero consequat dignissim. Cras eget libero id odio posuere faucibus. Sed sed ipsum. Pellentesque quis dui. Proin nec erat. Duis vel dolor vitae nisl vestibulum tempus. Aenean nibh purus, pellentesque vel, lacinia sed, scelerisque ac, lorem. Nunc at erat nec velit laoreet venenatis. Donec commodo ultricies quam. Suspendisse quis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br><br>
<span class="bold">Vestibulum ante ipsum primis</span> in faucibus orci luctus et ultrices posuere cubilia Curae; Donec in odio pulvinar diam pharetra adipiscing. Donec viverra, sem sed adipiscing elementum, ipsum libero faucibus mi, quis ullamcorper ligula nisi eu neque. Proin in turpis. In commodo. Etiam nisi lorem, fringilla eget, vehicula a, blandit in, lacus. Sed nibh purus, malesuada ut, imperdiet sed, laoreet sit amet, nulla. Nulla est. Nullam metus nisl, tincidunt id, ultrices nec, pulvinar bibendum, sem. Sed eleifend tincidunt quam. Vestibulum lacinia, sapien pellentesque blandit bibendum, velit velit laoreet erat, sed aliquet ante metus vitae purus. Aliquam blandit nibh et urna. Sed turpis lectus, dapibus quis, interdum at, tincidunt quis, leo. Sed ipsum. Donec vel lacus sed risus varius varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras suscipit sollicitudin lorem. Integer commodo, justo sit amet hendrerit elementum, metus sem adipiscing elit, nec vulputate arcu velit in ligula. Nam ut dolor et justo dictum posuere. In luctus tincidunt nisi.
<br><br>
<span class="bold">Vestibulum feugiat posuere felis.</span> Pellentesque pede. Etiam justo. Aliquam at sem ut mi feugiat interdum. Quisque et tortor in magna malesuada porta. Nunc at urna ac dui gravida pretium. Sed id ipsum. Maecenas id odio sit amet ante eleifend sollicitudin. Maecenas sollicitudin. Donec eu est id purus consectetuer vulputate. Fusce ligula turpis, feugiat in, ultrices quis, adipiscing eget, arcu. Sed nisi ipsum, pretium non, luctus et, ornare id, diam. Mauris nec urna. Suspendisse potenti. Aliquam vulputate tortor ut nunc. Curabitur massa tortor, adipiscing in, convallis aliquet, pharetra in, neque. Fusce in augue.

<!--END OF CONTENT-->
<br><br>
<hr>
<br>
<!--START OF SIGNITURE BLOCK-->
I hope you enjoyed this article,
<br><br>
Aenean Lacinia
<!--END OF SIGNITURE BLOCK-->
<br><br><br>
<!--START OF FOOTER-->
<div id="copyright">
© Copyright 2008 by Aenean Lacinia. All Rights Reserved.
</div>
<!--END OF FOOTER-->
<br><br><br>
</body>

</html>


For additional information on HTML and CSS, be sure to visit W3 Schools. A great introductory tutorial on HTML and CSS is "Create Quality Articles With CSS".








 I hope you enjoyed this article,
Royce Tivel


Royce Tivel

 Royce Tivel
rtivel@selectdigitals.com







Select Digitals Home Page


Valid HTML 4.01 Transitional