When starting a fresh HTML site it is very useful to have a basic HTML template to use. This template should include:
- Doctype declaration
- Head and body tags
- Title tags
- Most commonly used meta tags
- Include for a CSS style-sheet
Having an empty template document will save you time, and will ensure that you don't forget to include any of the most important features of the html page structure. This template should serve as a 'blank canvas' as it were, rather than starting with a completely blank document every time. Here is an example of my template for XHTML 1.0, which can also be downloaded from the link at the bottom of this article:
<!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">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
@import url(style.css );
</style>
</head>
<body>
</body>
</html>
DOCTYPE:
The doctype declaration (DTD) is important as it tells the browser what type of HTML you are using, and therefore which conventions you will need to follow when coding the site's content. For more information on this check out this Recommended list of DTDs to use in your Web document.
TITLE:
This is the title that appears at the top of the browser window, it is also the title that appears in the google listing for your page. It is good practice to have a different title for each page of your site. The title can be split into two parts:
- The name of your site
- A description of the page
resulting in something like: UK Diving - The worlds largest internet resource for divers (Site name - Site description) or: UK Diving - Contact Us (Site name - Page description).
STYLE-SHEET:
The stylesheet provides all the colour, layout and text-formatting styles for your html page, it is written in CSS (Cascading Style Sheet). Please refer to this document on Cascading Style Sheets for more info about CSS. The style-sheet can actually be written entirely between the two style tags, but I prefer to include it as a separate document, as this can be easily included in every page of the site, and once it is stored in the users cache it will also save on page loading time. The style-sheet in my example template is called 'style.css'.
META TAGS:
I use three basic meta tags in my HTML template:
- Content type — This tells the browser which character set you are using. In my template I use UTF-8.
- Description — This is the description of your page that appears in search engine listings.
- Keywords — A list of key words and phrases that relate to your page, seperated by commas. This is for search engine purposes too.
ABOUT WRITING XHTML 1.0:
Here are some of the rules of XHTML 1.0.
All nested tags must be closed in the reverse order in which they are opened:
<div><span>Hello</span></div> = Correct
<div><span>Hello</div></span> = Incorrect
All tags that don't have a closing tag must be treated as self-closing with a backslash:
<img src="test.jpg" /> = Correct
<img src="test.jpg"> = Incorrect
<br /> = Correct
<br> = Incorrect
All special characters must be encoded correctly:
& = incorrect
& = correct
Please feel free to use my template as a basis for your HTML pages. You can also test your HTML markup for errors using the online W3 markup validator, or the Web Developer Toolbar for Firefox.
DOWNLOAD TEMPLATE:
[...] Release Page [...]
Simplistix WordPress Theme | Sam Burdge…
The Simplistix WordPress theme is elegant, simple and light. It has a newspaper look and feel, with a typewriter style header. It is a greyscale variation of the 76-digital theme set….
Sam,
Simplistix is a very nice Wordpress Theme. I like it so much I’m using it!
I recommend that you provide a child theme with this distribution. It makes it easier to change the theme and keep your original in place.
I did notice an issue with swfobject.js. I was unable to get the banner to work with the supplied v1.4 file. As a check, I tested the code outside of Wordpress with no success. It could just be the file. My fix was to download the latest version of the swfobject, v2.1 and make a slight change to the code in header.php.
There must be an issue with Advance Search 2.0 with Wordpress 2.7. I was unable to get Search with the latest version. Installed Advanced Search v0.6 and installed with success (your sites plug-ins list v0.6).
I will email you info on the changes.
Rick
Hi Rick,
Glad you like the theme! Please email me your updated header.php. I will also look into getting it working with the latest advanced search plugin, and hopefully make an update within the next few days.
Thanks!
Sam
A comment on sidebar.php in the Simplistix theme. I’ve run into a conflict with WP 2.7 and Jerome’s Keywords. The tagging and cloud function is improved within WP 2.7. The tag section can be replaced with the following:
Code did not post. Contact-form-7 does have some limitations.
Sam,
I emailed you some info on the changes. From what I have read, others have had challenges with WP 2.7 and Advanced Search 2.0.
Rick
Hi there - great theme! I’m really hoping the updated php is coming soon… I similarly couldn’t get the header to work. Downloaded swfobject 2.1 but, as something of a novice, don’t know what I should be changing…
Hi Rick & eggplant64
I’ve updated the code now using swfobject 2.1
Download from the link above.
Thanks!
I thought I posted yesterday, but maybe I didn’t hit submit.
Just to say, thanks for creating a really nice theme! I’m using it on my site http://www.thewherewithal.org.
Just a few thoughts - first, I have some problems with the tagging function. Perhaps there is a conflict as RickHap says. Was wondering whether you could post the code that uses the wordpress 2.7 tagging function?
Also, some have been in touch to say that the site is pretty hard to read on some computers, because of the small font sizes. Perhaps Macs in particular. Maybe relative font sizes instead of absolute might be an idea? I’m going to have a play at customizing this myself, but I’m just learning…
But apart from that, perfect!
Hi JoeD
Thanks for your input. The theme’s looking great on your site!
The tagging problem has been solved with the latest version (version 1.3 available to download above).
The font thing for Mac I’m guessing is possibly to do with the scalability of the courier font on some systems.
I found this info:
I will look into the possibility of setting the font size in em rather than px. I think your suggestion of relative font sizes is most likely the solution.
Sam
Thanks! Look forward to the update
Joe
hi. very elegant theme. thanks for your effort. i’m having trouble with the tabbed navigation. the link to the NAVT plugin you have up this page is dead. I want to be able to link to both an outside site and, of course, the blogurl, which doesn’t count as a page and so is not showing up. help would be appreciated!
Hi Paris
Here is the link for NAVT plugin on wordpress.org:
http://wordpress.org/extend/plugins/wordpress-navigation-list-plugin-navt/
The plugin can do everything you have described!
Sam
Thanks again Sam. I have one more question for you if you would be so kind:
I’m building my own WP theme and I would really like my Comments to behave like yours — when you click Comments in Simplistix, it takes you to the single post page, scrolled down to the comment box.
I notice two things: when you rollover Comments link in Simplistix you see xyz.com/blog/p=123#respond and it takes you to a page #comment, however the standard comments_popup.php on my site on rollover gives me /?comments_popup=9
and takes me to a page with just the comments that looks all screwed up.
I notice your comments.php and comments_popup.php files are different, but if I try replacing mine with yours I just get a blank comments page.
Can you offer any help here? What factor am I missing?
Forgot to add that if you can help me to remedy this I’ll make a donation of a six-pack of imported beer!
Hi Paris
The solution is probably to do with a mix-up between the two files ‘comments.php’ and ‘comments_popup.php’.
Notice in the header of Simplistix the line:
< ?php //comments_popup_script(); // off by default ?>
This means that the comments_popup javascript is not included as the line in php is commented out.
Search your theme’s header and see if the line:
< ?php comments_popup_script(); ?>
is included anywhere. If so remove it, or comment it out with ‘//’ as in simplistix.
I hope this helps, as I like imported beer very much! If this doesn’t solve it, perhaps you could send me a link to look at.
Cheers,
Sam
Hey- great theme! Was just what I was looking for, but I was wondering if there was a way to change the font in the header (the ‘typewritten’ title?)
Another related question- I’ve installed NAVT without any problems, although I am unsure as to many of the configuration options. Is there an easy way to go about changing the “tabs” font to courier as well?
Basically I’d like to have all the fonts, everywhere, be in courier.
Many thanks!
Scratch the last question - I figured out how to change the font on the tab menus- was a matter of finding the right headings in the CSS.
/me is a n00b :/
[...] Demonstration — Download URL [...]
Hello,
Thankyou for your theme, it is just what Im after since I havnt got the technical ability to implement my own designs.
I have just 2 questions which may or may not be possible. Firstly I notice that the flash reloads itself everytime you navigate to a new page. Is it possible to make it so it doesnt refresh everytime. I am good with flash but I know this isnt something Flash can control.
Also, and this is just a minor design tweak…. When a tab is selected it would be great if the line at bottom of the selected tab disappeared so that the white space within the tab becomes part of the main page. That way it is nice and clear what page you are in! I hope you find time to help me out. Thanks again!
congratulations for the theme, i’ve downloaded it and will much likely use it in some geekish project, thanks.
Hello Sam
Thanks very much for this theme. Is there any way to add a link to the header? I just want it to go back to the homepage when you click on it but I’m not sure I can alter that from my end. Please can you help? Thanks in advance!
Jennifer
Like the theme and installed it, but I’d like to change the header font. Where is it in the css?
Thanks