Empty blank page

How can I have an empty page? How can I have a totally blank page with no theme or template on it? I would like to start with a page with just nothing on it! No styles, nothing!

Sometimes you may want to just have an empty page with nothing on it. This can either be done in an HTML Editor like Dreamweaver or in a Full Text Editor like TextWrangler or Notepad.

Of course this means that you have to use HTML codes to build the structure of the page and to add the content.

This page will teach you how to create a basic page and template in HTML using a full text editor like TextWrangler if you're on a Mac or Notepad if you're using a Windows machine. It is important to use one of these applications because these are full text editors. Other text editors like Microsoft Word or TextEdit on Mac are not full text editor and it may not work to edit HTML with them because they apply their own formatting code which is breaking everything. This page is far from defining itself a complete guide on this topic.

When does coding your own page make sense? When you want to have a basic website with up to 20 pages and you think coding is fun.
Why should I read this page even if I don't want to code my own website by hand? Because most applications to build websites work similarly and because you can learn a lot of useful stuff on how a website works from this page.

The basic HTML page looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page title</title>
</head>
<body>
</body>
</html>

There's the document type declaration, a head part (<head></head>) containing the page title (<title></title>) and the body part (<body></body>) for the page's content. That's the structure we will build upon.

To define the background of the page we add the following code in the head part:

<style type="text/css">
body {
background-color: #cccccc;
background-image:url('URL to the image');
background-repeat:no-repeat;
text-align:center;
}
</style>

If you don't want to use an image as the background you may just want to leave '' empty hence delete URL to the image. Most of the websites nowadays have a fixed width for the content and are centered horizontally. To simulate that we add a <div> in the body of the page

<div id="cotainer">
</div><!-- End Container -->

and the parameters to control its width and background into the style

#container {
width:850px;
background-color: #ffffff;
margin:20px auto;
padding:10px;
}

the margin:20px defines the margin from the top of the page, the auto is used to center the container horizontally. Padding is used to create a margin between the container and its content. <!-- End Container --> after the closing div is used to keep track of what div was opened and whether it's been closed or not. All divs need to be closed. When working with many different divs it comes in handy. So all in all our page now looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {
background-color: #cccccc;
background-image:url('');
background-repeat:no-repeat;
}
#container {
width:850px;
background-color: #ffffff;
margin:20px auto;
padding:10px;
}
</style>
</head>
<body>
<div id="container">
</div><!-- End Container -->
</body>
</html>

This is already good but not good enough. For the content we add another div and in this div we add several other divs like one for the navigation menu, one for the header, one for the content and one for the footer. This results in

<div id="content">
<div id="navmenu">
Menu
</div><!-- End Navmenu -->
<div id="header">
<h1>Header</h1>
</div><!-- End Header -->
<div id="body-content">
Content
</div><!-- End Body-Content -->
<div id="footer">
Footer
</div><!-- End Footer -->
</div><!-- End Content -->

Now we also need to add the style parameters for each of these divs in the appropriate part of the page as previously seen.

#content {
background-color: #ffffff;
text-align:justify;
}
#navmenu {
height:50px;
background-color: #ffffff;
margin-top:20px;
text-align:center;
padding-top:20px;
}
#header {
height:50px;
background-color: #ffffff;
margin-top:30px;
}
#body-content {
background-color: #ffffff;
padding-top:10px;
}
#footer {
height:100px;
background-color: #ffffff;
padding-top:10px;
}

As you see for the navigation menu, the header and the footer we define a certain height while the body-content div adapts its height to its content. This is to give the pages a homogeneous look. Also we centered the alignement of the menu 'cause I like to have it centered. You can define a different code color for each section or even use a background-image as we've seen at the beginning of the tutorial.

For the heading I used <h1>This is my heading</h1> to define that this is the main heading, you may further use <h2></h2>, <h3></h3> up to <h6></h6> for chapters and subchapters. To define the appearance use

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
}

in the style. So the code for the entire page now looks like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {
background-color: #cccccc;
background-image:url('');
background-repeat:no-repeat;
}
#container {
width:850px;
background-color: #ffffff;
margin:20px auto;
padding:10px;
}
#content {
background-color: #ffffff;
text-align:justify;
}
#navmenu {
height:50px;
background-color: #ffffff;
margin-top:20px;
text-align:center;
padding-top:20px;
}
#header {
height:50px;
background-color: #ffffff;
margin-top:30px;
}
#body-content {
background-color: #ffffff;
padding-top:10px;
}
#footer {
height:100px;
background-color: #ffffff;
padding-top:10px;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="navmenu">
Menu
</div><!-- End Navmenu -->
<div id="header">
<h1>Header</h1>
</div><!-- End Header -->
<div id="body-content">
Content
</div><!-- End Body-Content -->
<div id="footer">
Footer
</div><!-- End Footer -->
</div><!-- End Content -->
</div><!-- End Container -->
</body>
</html>

This is what it looks like when seen a browser:

Click here to download this HTML file.

Having all the styles parameters in the HTML file itself is not a good idea if you would have a lot of them. To change something you would have to open each file and modify for example the height of the header or footer part in each of them. That's where style.css files are very useful.

For the sample page of this tutorial this would mean that you would put all the stuff you have between <style type="text/css"> and </style> in another text file hence

body {
background-color: #cccccc;
background-image:url(&#039;&#039;);
background-repeat:no-repeat;
}
#container {
width:850px;
background-color: #ffffff;
margin:20px auto;
padding:10px;
}
#content {
background-color: #ffffff;
text-align:justify;
}
#navmenu {
height:50px;
background-color: #ffffff;
margin-top:20px;
text-align:center;
padding-top:20px;
}
#header {
height:50px;
background-color: #ffffff;
margin-top:30px;
}
#body-content {
background-color: #ffffff;
padding-top:10px;
}
#footer {
height:100px;
background-color: #ffffff;
padding-top:10px;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
}

You would then save it as style.css and in the HTML file add

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

in the head part where style.css has to reflect the right path to the style file hence the top of the page would look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>

And when you want to change something for all your pages you just change it in the style.css file which automatically changes it on all your pages.

Click here to download a folder containing the sample HTML file with its style.css

That's it.

Also read the Basic HTML Codes knowledge base page for more in depth informations on how to use codes, which additional parameters you could add to the styles and the Basic web knowledge page for what concerns uploading the files to your server and defining the right paths.


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.