56i,
07-07-2009, 02:33 PM
xHTML and CSS Maintenance Page designing and developing tutorial:
It's adviced that you create a folder for this as it'll be easier to track the images you use. An example of this is, say you use a background and save it in "My Pictures" and you save your index.html file in "My Documents" your code will be like ".../mypictures/bg.png" whereas if you made a folder called "HTML Testing" and saved your bg.png there, it'll be a simple and neat code "bg.png"
Step 1.
Designing your box can be a piece of cake, quite literally. Draw a decent sized box in Microsoft Paint of any other flashy programmes that you guys might have. The width is essential, but the height does not matter as you'll be coding it in expandables where the Middle of your box will expand!
Here's mine:
http://i30.tinypic.com/1zn3bzo.png
As you can see this is a real simple design. I bet you're wondering, how on earth am I going to code this? Well here's your answer.
Step 2.
Open up Notepad (I'll be doing this on Dreamweaver, but it'll work all the same in Notepad) You're firstly going to have to start your document with this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<title>This'll be the title of your website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
Your document has been started hey presto! Now we've got to add the body. The body is just creating the top/middle/bottom of your box making it available to expand.
We'll start with the text for your webpage.
body {
text-align: center;
background-color: #ffffff;
background-image: url();
}
As you can see, the text is going to be put into the center like below;
this is aligned center
The text is white, and the background path is blank, but you can put in bg.png or whatever you save it as. Now this is set, we must make sure our "mid" image, can allow text to be input. This won't take a few seconds, after your text body (with the font colour and image of background) copy and paste this code in.
#container {
width: 1000px;
}
This is the container, for where the text is put in. The width may be a tad high, so please do experiment around with px's.
Eventually, the top middle and bottom!
#top {
background: url(ENTER PATH OF IMAGE E.G. top.PNG);
height: 7px;
width: 769px;
}
#mid {
background: url(ENTER PATH OF IMAGE E.G. mid.PNG);
width: 769px;
}
#bot {
background: url(ENTER PATH OF IMAGE E.G. bot.PNG);
height: 24px;
width: 769px;
}
.style1 {
font-family: "Trebuchet MS";
color: #FFFFFF;
font-size: small;
-->
</style>
</head>
Now you've got the CSS done for your coded box, horray! What's this it's not showing up when I view it in my Internet? Of course not, we haven't added the HTML to it. The STYLE1 just highlights what fonts will be used in the middle of your box, (where you type)
This is possibly the easiest bit of the whole tutorial (yes, even easier then designing a box!) This is the HTML code for your box, and the last step to do.
<div id="container">
<div id="top"></div>
<div class="style1" id="mid">
<p><span class="style2"></span></p>
</div>
<div id="bot"></div>
Hey presto you've just coded a box! If you can't view your website, that's because you haven't saved it as a .html document, so on notepad, save as INDEX.HTML the .html is crucial and essential otherwise you will not be able to view it.
What's going on with TeachusHTML? - Well, as I've promoted this idea to you, I'll be adding it to my personal website, where I'll be trying all my online projects. This will be up very soon but until then please remember I am here.
One last request I'd like you to rate this tutorial out of /10, and it's been a privilege typing it for you guys. If you'd like any more help with this in particular feel free to post your questions below. This is a real standard coding tutorial.
Regards, Dan
(This was posted by quantum on Clubhabbo) TeachusHTML is a brand new website, that'll show video presentations of how to code/design layouts. Thank-you.
It's adviced that you create a folder for this as it'll be easier to track the images you use. An example of this is, say you use a background and save it in "My Pictures" and you save your index.html file in "My Documents" your code will be like ".../mypictures/bg.png" whereas if you made a folder called "HTML Testing" and saved your bg.png there, it'll be a simple and neat code "bg.png"
Step 1.
Designing your box can be a piece of cake, quite literally. Draw a decent sized box in Microsoft Paint of any other flashy programmes that you guys might have. The width is essential, but the height does not matter as you'll be coding it in expandables where the Middle of your box will expand!
Here's mine:
http://i30.tinypic.com/1zn3bzo.png
As you can see this is a real simple design. I bet you're wondering, how on earth am I going to code this? Well here's your answer.
Step 2.
Open up Notepad (I'll be doing this on Dreamweaver, but it'll work all the same in Notepad) You're firstly going to have to start your document with this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<title>This'll be the title of your website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
Your document has been started hey presto! Now we've got to add the body. The body is just creating the top/middle/bottom of your box making it available to expand.
We'll start with the text for your webpage.
body {
text-align: center;
background-color: #ffffff;
background-image: url();
}
As you can see, the text is going to be put into the center like below;
this is aligned center
The text is white, and the background path is blank, but you can put in bg.png or whatever you save it as. Now this is set, we must make sure our "mid" image, can allow text to be input. This won't take a few seconds, after your text body (with the font colour and image of background) copy and paste this code in.
#container {
width: 1000px;
}
This is the container, for where the text is put in. The width may be a tad high, so please do experiment around with px's.
Eventually, the top middle and bottom!
#top {
background: url(ENTER PATH OF IMAGE E.G. top.PNG);
height: 7px;
width: 769px;
}
#mid {
background: url(ENTER PATH OF IMAGE E.G. mid.PNG);
width: 769px;
}
#bot {
background: url(ENTER PATH OF IMAGE E.G. bot.PNG);
height: 24px;
width: 769px;
}
.style1 {
font-family: "Trebuchet MS";
color: #FFFFFF;
font-size: small;
-->
</style>
</head>
Now you've got the CSS done for your coded box, horray! What's this it's not showing up when I view it in my Internet? Of course not, we haven't added the HTML to it. The STYLE1 just highlights what fonts will be used in the middle of your box, (where you type)
This is possibly the easiest bit of the whole tutorial (yes, even easier then designing a box!) This is the HTML code for your box, and the last step to do.
<div id="container">
<div id="top"></div>
<div class="style1" id="mid">
<p><span class="style2"></span></p>
</div>
<div id="bot"></div>
Hey presto you've just coded a box! If you can't view your website, that's because you haven't saved it as a .html document, so on notepad, save as INDEX.HTML the .html is crucial and essential otherwise you will not be able to view it.
What's going on with TeachusHTML? - Well, as I've promoted this idea to you, I'll be adding it to my personal website, where I'll be trying all my online projects. This will be up very soon but until then please remember I am here.
One last request I'd like you to rate this tutorial out of /10, and it's been a privilege typing it for you guys. If you'd like any more help with this in particular feel free to post your questions below. This is a real standard coding tutorial.
Regards, Dan
(This was posted by quantum on Clubhabbo) TeachusHTML is a brand new website, that'll show video presentations of how to code/design layouts. Thank-you.