Lesson 3: Basic page layout and introduction to CSS

You probably know, or have heard about CSS, but it's good to go through the basics of CSS Layout just ot make sure.

Why CSS

In the beginning we had HTML page - which uses tags like <p></p> which meant paragraph. Anything within the <p> tags looked like a paragraph. <h1></h1> meant header, some all text within this looked bigger and bolder. <h2> was a slightly smaller header. It was limited to say the least.

Poeple want to add 'design' to their pages. So more and more tags came along. <font> allowed you add fonts, <b> means bold. But it soon became very confusing, and still quite limited.

CSS. Cascading Style Sheets. CSS sheets are very useful.

How do we use CSS

We still use HTML tags as normal, but then we create sets of styles, and tell the various tags/elements on our page to use these different styles.

DIVs

CSS layout makes extensive use of the <div> tag. A div tag is basically an empty box, or container. It doesn't really do anything! But, we can create style, for example 'PAGE', give this style a width, background colour, tell it what font to use, and the colour of the font. Then, we create a DIV, and tell it to use the style 'PAGE'. The div then takes these sytles, and becomes a certain width, and background colour, and all the text you enter into this box will use the font and colour of font you defined in the style sheet.

Before we start constructing our page, make sure you have created your self a site, and this site is selected in the 'files' window drop down box. You can read how to do that here

Step 1: Creating the files, and linink them together

  1. Create a new file. File: New: Choose HTML, and layout: None
  2. Save the file as myPage.html
  3. Create another new file: File: New: CSS
  4. save the file as myStyles.css

Now, we wan't the HTML page to use this style sheet.

In the HTML file

  1. Click the 'Text' menu, then choose 'CSS Styles' then 'Attach Style Sheet'
  2. Click browse, and choose your css file 'myStyles.css'
  3. Press OK
 Attach CSS

Creating the HTML Page

split viewLets start on the HTML page by splitting the view, to see the visual look, and the source code

You should see the code at the top, with various bits of basic HTML code in, and a plain page in the design window.

If you click in the design window, and then look into the code window, your cursor will now be between the openning and closing <body> tags

Create a DIV tag

Within the Body tags, create a div tag like this:

HTML

 Human Person Language

<body>


<div></div>

 

</body>

within the body tag - eg, it's on the visible page

 

create a DIV tag

If you click back into the design view, you should now see a rectangle. This is the div.

Adding an ID

add an ID to this DIV like this:

HTML

 Human Person Language

<div id = "myHeader"></div>

this div has an id name of 'myPage'

Now add a few more DIVs, like this:

HTML

 Human Person Language

<div id="myHeader"></div>
<div id="myPage"></div>
<div id="myFooter"></div>

this is the header

this is the main page

this is the footer

Creating the CSS Sheet

Lets go over the CSS file. At the moment it will be pretty much empty, if there are some lines at the top, don't worry just carry on below these lines

The Body

CSS

 Human Person Language

body {background-color:#666666; }

this find the element which is a <body> tag, and gives it these styles, widith, and a grey background colour

The DIVS

We've given each DIV a different ID, and we want to each one to have a different set of styles. So, we need to create a style that will be added to a tag with a specif ID

CSS

 Human Person Language

#myHeader { width:800px; background-color:#003333; height:50px; }
#myPage { width:800px; background-color:#FFFFFF; height:300px;}
#myFooter { width:800px; background-color:#CC6600;height:20px;}

this adds styles to the tag with the ID of 'myHeader'

this adds styles to the tag with the ID of 'myPage'

this adds styles to the tag with the ID of 'myFooter'

Notice we put a # before the ID name of each DIV, this tell the style sheet that this style relates to the ID, whereas the body style simply relates to a the <body> tag.

If you go back to the HTML page, you should now see a layout with 3 rows, each a different colour.

Click here to download the files so far

Adding a Menu

Lets add a menu in here now

In the CODE view, add another div, beneath the 'myHeader' div, and give it the id 'myMenu', also create a CSS style for this menu area

HTML

CSS

<div id="myMenu"></div>

#myMenu { width:800px; background-color:#66CCFF; height:20px; }

Back in the design view of the HTML page, you should see a blue menu bar.

Creating the links

In the desing view, or the source view, type a few words (eg Home About Contact) within the Menu div

Select the words, and enter a # into the link box (in the properties window). This makes them into links, but the # means they are blank, and don't go anywhere. We have nowhere for them to go anyway just now!

If you look at the code view again, you'll see the links are now in there on one line. You may find its looks nicer by putting them on multiple lines

HTML

 Human Person Language

<div id="myMenu">

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

</div>

 

this is basically a <a> tag. I means Anchor (but they are links). The A tages have a property HREF="" - this defines where the user goes when they click. # means go nowhere!

Stlying the links

Now, we can add some more code the CSS file to make the links in the menu area look better

CSS

#myMenu a { color:#006666; font-weight:bold; }

This line combines the two CSS methods we used before. The #myMenu target the tag with the ID 'myMenu', and the 'a' looks for any 'a' tags (eg, the links) that are within the #myMenu area. It won't affect any links anywhere else.

If you go back to the HTML page, you should now see that the links are a kind of dark green colour, and bold. Not very pretty, but we'll improve it all later.

 

Comments?

To make the ideal, most useful tutorials, I need your comments. Did you understand everything, did I make any mistakes, or not explain something? Did it simply not work! Let me know