Building a basic web page
======================================================================
- Code: Select all
<html>
<head>
<title>Web Page Title Here</title>
</head
<body>
<div>
<div>
</div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>
============== 1.0
Shown above is the structure of a basic website.
Everything is 'contained' within the html tags, the first turning html 'on' and the last turning it "off".
The first thing within the <html> tags is to be the <head>. This will contain things like the page title, internal styling and metatags where these are applicable..
AFterwards the head is 'turned off' or ended by the </head> tag. Nothing between the head tags will show in your browser.
Next is the <body>. This is the content of your webpage.
Inside the <body> are <div> (division/divider) that are basically containers for your content, like little boxes of a sort that you put your images and text in.
Each <div> must, as with everything else, also have a corrsponding </div> to end that particular <div>.
IMPORTANT NOTE: A <div>...</div> division CAN reside within another.
For example you can have a wrapper that is a division that contains all the other <divs> in your website as seen in the example above.
============== 2.0
Next comes styling of your site.
Here is some basic "inline" CSS styling (we can get to external CSS later) for a <div> which, if it contains all the rest of your <div>'s as in the IMPORTANT NOTE above, can be used as your page wrapper.
This particular <div> is 980 pixels wide, 600 high and will have a blue background.
- Code: Select all
<div style="width:980px; height:600px; background:blue;">
</div>
Want to see something neat ?
Copy that whole <div> above (both lines) then Open Notepad on your PC, paste it and save it as 'index.html' to your desktop.
Now open it with Internet Explorer or another browser and see what you have with just that little bit of code.
Now, lets say you want to center the box in the window.
All you have to do is put in the code to make the right and left margins equal, which are these;
- Code: Select all
margin-left:auto; margin-right:auto;
So your new <div> would look like this;
- Code: Select all
<div style="width:980px; height:600px; background:blue; margin-left:auto; margin-right:auto;">
</div>
Copy that, and in your index.html file you created, replace ALL of the existing <div> there with this new <div> code, then view it in your browser again.
YOur blue box should now be centered no matter how wide you drag your browser window as long as its more than the 980pixel width we set for the <div>.
This <div> can be used for your page wrapper. YOu can make it any length youd like by changing the 'height:600px;' to a longer number like 'height:1200px;'
============== 3.0
Adding more <div>'s within the wrapper.
One point to remember here is that your browser, by default, will read from top to bottom and render your web page in the order it is give in your html file.
You can use that knowledge to place your <div> so that it falls where you want it to.
Here is our current <div>;
- Code: Select all
<div style="width:980px; height:600px; background:blue; margin-left:auto; margin-right:auto;">
</div>
Now, lets add another <div> inside it and see what happens.
We'll have to make sure to give this new <div> size and color or we wont be able to see it.
Here is what we'll use;
- Code: Select all
<div style="width:300px; height:200px; background:red;">
</div>
Notice its smaller and the background is red.
Our new <div> will look like this;
- Code: Select all
<div style="width:980px; height:600px; background:blue; margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red;">
</div>
</div>
Copy all 4 lines of that and replace ALL of the code in your index.html file on your desktop with this new code, then open it in your browser again.
You should have something that looks a bit like a poorly designed U.S. flag.
============== 3.1
Now, we'll tell that red <div> to always try to go to the right as far as it can within the blue <div> by adding our 'float'code after the 'background:red;' ...
- Code: Select all
<div style="width:980px; height:600px; background:blue; margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red; float:right;">
</div>
</div>
Copy and paste this newer <div> over your old one and you'll see that the red box now is sitting all the way to the right instead of the left.
============== 3.2
Next we'll drop the red <div> down a bit within the blue <div> by giving it a top margin of 25pixels, which will look like this'
- Code: Select all
margin-top:25px;
So our whole <div> now looks like this;
- Code: Select all
<div style="width:980px; height:600px; background:blue; margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red; float:right; margin-top:25px;">
</div>
</div>
Copy and paste this newer <div> over your old one and you'll see that the red box just dropped 25pixels from the top right corner.
============== 3.3
Now we'll move your red box 50pixels from the right side there with this code;
- Code: Select all
margin-right:50px;
Heres what we end up with;
- Code: Select all
<div style="width:980px; height:600px; background:blue; margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red; float:right; margin-top:25px; margin-right:50px;">
</div>
</div>
Copy and paste this newer <div> over your old one and you'll see that the red box just moved 50pixels away from the right side of the blue box.
You could have also told the red <div> to instead 'float:left' then given it a 'margin-left:50px;' and it would be sitting 50 pixels from the left side.
- Code: Select all
<div style="width:980px; height:600px; background:blue; margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red; float:left; margin-top:25px; margin-left:50px;">
</div>
</div>
Copy and paste this newer <div> over your old one and you'll see the difference.
=========================================================
You can also ad background textures by changing the code to something like 'background:blue url(image.jpg);' to any of your <divs>.
- Code: Select all
<div style="width:980px; height:600px; background:blue url(image.jpg); margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red; float:right; margin-top:25px; margin-right:50px;">
</div>
</div>
With the 'background:blue url(image.jpg);' as is, you'll have to put your image in the same place as your index.html file
You could change the where the background image is being drawn from by adding an absolute url, such as....
- Code: Select all
'background:blue url(http://mywebsite/images/image.jpg);'
...or something to that effect to tell the browser where the image file is located.
Using the code for your <div> as we have it, the browser will look to the same location as your html file for the image.jpg.
- Code: Select all
<div style="width:980px; height:600px; background:blue url(image.jpg); margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red; float:right; margin-top:25px; margin-right:50px;">
</div>
</div>
Google search for "website backgrounds", find one you like and save it to your desktop then rename the 'image.jpg' in our code to whatever the file name is.
It can be a .gif file too.
And remember, ALL of your <div>'s can have their own unique background images.
============== 4.0
Adding text.
Lets add some text to our <div>.
Heres what we have so far.
We'll put some text in the red <div> just so see what it looks like.
- Code: Select all
<div style="width:980px; height:600px; background:blue url(image.jpg); margin-left:auto; margin-right:auto;">
<div style="width:300px; height:200px; background:red; float:right; margin-top:25px; margin-right:50px;">
Put some text here so we can see what the page will look like.
</div>
</div>
You can also change the color of your text by adding the code 'color:blue;' (or any valid html color).
In general your page color will be set either by browser default (black) or in your wrapper <div> or header CSS styling, or
even in an external CSS (which would be a file called 'style.css', but thats for another day)
We'll make all text in the entire <div> green by adding it to the outer <div>.
- Code: Select all
<div style="width:980px; height:600px; background:blue url(image.jpg); margin-left:auto; margin-right:auto; color:blue;">
<div style="width:300px; height:200px; background:red; float:right; margin-top:25px; margin-right:50px;">
Put some text here so we can see what the page will look like.
</div>
</div>
============== 5.0
Remember, this has all just been about the <div>, so we have to inclose the <div> in the body of our html page.
- Code: Select all
<html>
<head>
<title>Web Page Title Here</title>
</head
<body>
<div style="width:980px; height:600px; background:blue url(image.jpg); margin-left:auto; margin-right:auto; color:blue;">
<div style="width:300px; height:200px; background:red; float:right; margin-top:25px; margin-right:50px;">
Put some text here so we can see what the page will look like.
</div>
</div>
</body>
</html>
============== final notes
And there you have some basics for building a website.
Theres a lot more to learn and here are some sites you can check out...
http://www.w3schools.com/