< Combine flag and country into one image
Creating a <div> based Template using CSS (part 1 - 12)
5 Jan 2009 > 4 Comments
A <div>/CSS based Template Tutorial.
Tutorial Contents
- Part One (Creating a <div> based Template)
- Part Two (Adding Headings, Paragraphs, and Blockquotes)
- Part Three (Ordered and unordered lists (create a horizontal menu/navi bar))
- Part Four (Displaying Images)
- Part Five (Styling Horizontal Rules)
- Part Six (Styling Tables)
- Part Seven (Fonts)
- Part Eight (Margin and Padding)
- Part Nine (Styling the Background and Foreground)
- Part Ten (Styling Links)
- Part Eleven (Bullet images for list items)
- Part Twelve (Some template modifications)
Choosing a <doctype>
Before starting this tutorial you need to choose a <!DOCTYPE> that informs the browser what type of mark up language you are using. I recommend using either a HTML 4 (Strict) or XHTML (strict) doctype.
HTML 4 (strict) Doctype
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<title>html document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<link rel=”stylesheet” type=”text/css” href=”" media=”screen” >
</head>
<body>
</body>
</html>XHTML (strict) Doctype
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>html document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
</head>
<body>
</body>
</html>Validate your mark up
It’s good practice to check your HTML and CSS documents using the online validators.
Related Posts
4 Comments (Have your say)
-
Momotaro
Comment on May 3, 2009 at 5:50 pm
Awesome tutorial. It really helped me. How’s this? http://www.majhost.com/gallery/Ultimate-Collector/stuff/div-css_template.txt I had to do .txt, the host doesnt allow .html.
-
Pele
Comment on August 2, 2009 at 2:52 am
Your still alive Mahud?
-
mahud
Comment on August 6, 2009 at 8:17 pm
nah, im dead
-
оригинальные подарки
Comment on April 24, 2010 at 2:17 am
Потрясающе! Хочется перечитывать снова и снова… Такие авторы сегодня большая редкость.
Menu
- Paint Shop Pro Tutorials: Tutorials and downloads for PSP (versions, 8, 9, X, XI, X2) users
- ProBoards Templates: Downloadable Version Four ProBoard skins
- HTML and CSS: The stuff that Websites are made of
- Microsoft Paint Tutorials: Make nifty graphics using Microsoft Paint
- Wordpress Themes: Wordpress designs, pre-made templates and tutorials
- Downloads: Icons and other gifties
- ProBoards Tutorials: Customize your ProBoards forum
- Portfolio: My Web design and digital Art stuff
- Digital art: Messing around with my image editor
- Journal: Typical blog stuff really
- Various Stuff: Stuff that doesn't fit anywhere else
Recently Commented on...
September 4, 2010
August 24, 2010
July 14, 2010
May 3, 2010
April 24, 2010
Mahud Version 5 © 2006-2008 > powered by Mr Whippy Wordpress