TeachusHTML - Designing and Developing CSS and XHTML

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:

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.

HTML 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.

HTML Code:

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.

HTML Code:

#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!

HTML Code:

#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.

HTML Code:

<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.

wsg14 · 07-07-2009, 06:14 PM

It's great and all, but we have an exact same tutorial already.

Agnostic Bear · 07-07-2009, 07:11 PM

or if you're on a gecko/webkit based browser you can just do this on the divs class/id:

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

56i, · 08-07-2009, 09:57 AM

I wrote it on another forum, so I thought i'd post it.

Iszak · 08-07-2009, 10:42 AM

Originally Posted by Jewish Bear

or if you're on a gecko/webkit based browser you can just do this on the divs class/id:

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

Why do that when ~60%+ of users use Internet Explorer which I might add doesn't support the border-radius property. Not to mention CSS3 is still in draft and isn't a W3C recommendation. Finally unless you're targeting specifically the Gecko/Webkit browsers there's absolutely no point in using those properties because as developers we're meant to make cross-browser websites.

Agnostic Bear · 08-07-2009, 11:02 AM

Originally Posted by Iszak

Why do that when ~60%+ of users use Internet Explorer which I might add doesn't support the border-radius property. Not to mention CSS3 is still in draft and isn't a W3C recommendation. Finally unless you're targeting specifically the Gecko/Webkit browsers there's absolutely no point in using those properties because as developers we're meant to make cross-browser websites.

I see absolutely no problem with showing IE browsers straight lines whilst showing FF/Safari/Chrome users curves. If you're a good designer you can make a layout that looks good with both.

Thread: TeachusHTML - Designing and Developing CSS and XHTML

Thread Tools

TeachusHTML - Designing and Developing CSS and XHTML

Posting Permissions