Home Page Link Tutorial 02

   Lesson 1    Lesson 2    Lesson 3    Lesson 4    Tutorial 1    Tutorial 2    Contact




No tables today... <div id="up"...>eh!</div>

We begin with just the basic markup for our Basic Web Design page
Remember it looks like this...
<!-- -----------------------------Snip -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Tutorial 22</title>

</head>
<body>
<h1>Basic Web Design</h1>
<h3>Concepts, ideas, tools, and knowledge</h3>
<h5> Summer 2007</h5>
<h1> Create Your Own Web Site</h1>
<p>Syllabus<br>
Lesson 1<br>
Lesson 2<br>
Lesson 3<br>
Lesson 4</p>
<p></p>
<p>Contact </p>
<h2>Explore concepts and ideas to develop a clear, concise, usable and
attractive web site</h2>
</body>
</html>
<!-- -----------------------------Snip -->

Basic Web Design

Concepts, ideas, tools, and knowledge

Summer 2007

Create Your Own Web Site

Syllabus
Lesson 1
Lesson 2
Lesson 3
Lesson 4

Contact

Explore concepts and ideas to develop a clear, concise, usable and attractive web site


Basic CSS

In our document we are using basic HTML 
Paragraph <p></p> and Heading <h1> --- <h6>, etc., Elements

Remember
HTML makes content for the page
CSS makes style, --how the html will look on the page...

For example if we fill a web page with a black background the default black text would be invisible...(black on black)
As a result we need to change the color "style" of the text to be white, in our example some text is orange, some black, let's set up those CSS styles first.

But, before we begin here are the basic CSS rules...

in html we would write the style changes in-line

like this

<h1 style="color: white;" > Basic Web Design</h1>

in css it looks like this for heading h1 (h1 is called the selector)


    h1 {
          color:  white;
          }
 
where:    color: is the property (name) and white; is the value and  color: white;  is a declaration

The property always ends with a colon and the value always ends with a semi-colon
and don't forget to close the parenthesis

Because of the simple statement 
    h1 {
          color:  white;
          }
the value white will be applied to all text that has the selector h1 heading on the web page

so now our markup  looks like this...

note that embedded CSS style goes in the html document header between <head> and </head>
and is always opened with the tag
<style type="text/css">

and is closed with the tag
 </style>

and also Note that in this case the CSS  selector h1 values will only apply to this one web page

Text editor
 Browser
<!-- -----------------------------Snip -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tutorial CSS 01</title>

<style type="text/css">

h1 {
    color: white;
    }
h2 {
   color: black;
     }
h3 {
    color: orange;
    }  
p  {
    color: white;
    }

</style>

 
</head>
<body style="background-image: url( mandarin/bg1b.gif); background-repeat: repeat-x;">
<h1>Basic Web Design</h1>
<h3>Concepts, ideas, tools, and knowledge</h3>
<h5> Summer 2007</h5>
<h1> Create Your Own Web Site</h1>
<p>Syllabus<br>
Lesson 1<br>
Lesson 2<br>
Lesson 3<br>
Lesson 4</p>
<p></p>
<p>Contact </p>
<h2>Explore concepts and ideas to develop a clear, concise, usable and attractive web site</h2>
</html>
<!-- -----------------------------Snip -->

Basic Web Design

Concepts, ideas, tools, and knowledge

Summer 2007

Create Your Own Web Site

Syllabus
Lesson 1
Lesson 2
Lesson 3
Lesson 4

Contact

Explore concepts and ideas to develop a clear, concise, usable and attractive web site
In order to be able to see the white text on a white background, I snuck in a background for the entire page...
If you cut the above markup and Paste it into a text editor and save it as an html file it will look like this CSS-test01.html

Divide <div></div> and Conquor

A <div></div> element is a block of content, it can be text, a colored box, a picture, markup, a movie, a graphic...
The resultant "block of content" can be positioned anywhere on a web page with precision. 
All of the style elements like color, background and font color can be controlled by a simple cascading style sheet
or with inline instructions


What follows are some <div></div> elements that will become the building blocks of our Non-table web page.

I have placed the styles in-line (that is inside the open  <div> tag.)

(inline always starts with "style=" ) like this

<div  style="padding: 15px; position: absolute; left: 120px; top: 90px; background-color: orange; width: 620px;">
<h1>Basic Web Design</h1></div>

when you are experimenting with a new div element doing the markup inline is convenient...

N.B.
when you write the property (attribute) name and value
it is always written property (attribute) name colon value semi-colon   ie  top: 10px; or background-color: black;  (px btw means the unit is in pixels)

Okay lets add the <div></div> elements... which at this point are selectively sorta random...

What we see in a text editor...
 This is a screen capture from Firefox of our results...
<!-- -----------------------------Snip -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Tutorial DIV 01</title>
<style type="text/css">

h1 {
    color: white;
    }
h2 {
   color: black;
     }
h3 {
    color: orange;
    }  
 p {
    color: white;
    }

</style>
</head>
<body style="background-color: #ff9900; ">
<div <img src="mandarin/web.jpg" /></div>
<div
 style="padding: 15px; position: absolute; left: 120px; top: 90px; background-color: orange; width: 620px;"><h1>Basic Web Design</h1>
</div>
<div
 style="border: 2px dashed red; padding: 10px; z-index: 2; position: absolute; left: 610px; top: 155px; background-color: yellow; width: 100px;"><h3>Concepts, ideas, tools, and knowledge</h3></p>
</div>
 <div
 style="padding: 5px 20px 5px 5px; background-color: rgb(41, 41, 41); color: white; position: absolute; left: 0px; top: 80px; width: 100px; height: 300px;"><p>Syllabus<br>
Lesson 1<br>
Lesson 2<br>
Lesson 3<br>
Lesson 4</p>
<p></p>
<p>Contact </p>
</div>
<div
 style="border: 10px double black; padding: 5px; position: absolute; left: 120px; bottom: 180px; background-color: green; width: 150px; color: white;"><h5> Summer 2007</h5>
<h1> Create Your Own Web Site <img src="create.jpg" /></h1>
</div>

<div
 style="padding: 10px; z-index: 1; position: absolute; right: 10px; bottom: 10px; background-color: rgb(204, 51, 0); width: 280px; color: white;"><h2>Explore concepts and ideas to develop a clear, concise, usable and attractive web site</h2></div>

</body>
</html>
<!-- -----------------------------Snip -->
 a screen capture of the page
You can see the actual results in your browser by clicking here


Let's get organized and fiddle with some numbers...
<!-- -----------------------------Snip -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tutorial CSS & Div 02</title>

<style type="text/css">

h1 {
    color: white;
    }
h2 {
   color: black;
   background: white;
   width: 630px;
   height: 81px;
   padding:20px

     }
h3 {
    color: orange;
    }  
 p {
    color: white;
     }
</style>

  </head>
<body background="mandarin/bg1b.gif">

 <div id="layer2"
style="padding: 15px; z-index: 2; position: absolute; left: 0px; top: 10px; background-color: black; width: 720px; height: 94px; border: #ffffff 28px thin;">
<h1>Basic Web Design
</h1>
</div>

<div id="layer3"
 style="padding:4px; z-index: 3; position: fixed; left: 0px; top: 71px;
 width: 414px; height: 30px;">
 <h3>Concepts, ideas, tools, and knowledge
 </h3>
 </div>
 
<div id="Layer4"
 style="z-index: 4; position:absolute; left:10px; top: 10px;
 background-color: rgb(0,0,0); width:150px; height: 103px; border: #ffffff 20px double;">
  <img src="mandarin/web.jpg" />
 </div>

<div id="layer5"
 style="padding: 15px 20px 5px 5px; background-color: rgb(0, 0, 0);
 color: white; z-index: 5; position: absolute; left: 100px; top: 100px; width: 225px; height: 400px; border: #ffffaa 18px groove;">
<p>Syllabus<br>
Lesson 1<br>
Lesson 2<br>
Lesson 3<br>
Lesson 4</p>
<p></p>
<p>Contact </P>
<p>Tutorial 1</P>
<p>Tutorial 2</p>

</div>

<div id="layer6"
 style="padding: 10px; position: absolute; left: 300px; top: 120px;border: #ffffff 2px ridge;  background-color: white; width: 646px; Z-index: 6;  color: white;">
 <img src="create.jpg" />
</div>

<div id="Layer7"
 style="z-index: 7; position: absolute; left: 300px; top: 320px;">
 <h2>Explore concepts and ideas to develop a clear, concise, usable and
attractive web site
 </h2>
</div>
</body>
</html>
<!-- -----------------------------Snip -->
 web browser 's view
snip, copy, paste = no tables used here!

Okay, now you can see how vesatile it is to "div" it up...

Okay! It's a start---
But first Let's do some defining so it all makes sense

 
DIV Markup

If the <div></div> element has no given dimensions, it is called "fluid" or "liquid." This means that it horizontally fills the container box surrounding it, and expands vertically to enclose whatever content is within it. For the most part, such fluid boxes are quite reliable.

ID and Class
http://css-tricks.com/the-difference-between-id-and-class/

id = A person's Identification (ID) is unique to one person.
class = There are many people or groups in a class.

An id in CSS is unique, as a result an id can only be used once on a page/document
id  eg ) id="easytorememberdescription" (the decriptions commonly used are header, body, container, navigation, leftcolumn, rightcolumn, header, footer, sidebar... )

Id's and classes must be a single word and cannot start with a number
helps you keep track of all your div elements or layers. Makes it easy to have different style attributes and positions for each <div></div> element. You can also overlap <div></div> layers ... so it helps to know what <div></div> element might be getting in the way. an Id can only be used once on an html page.

class ="easydescription"
If you have a div the ocurrs more than one on a page then it is no longer unique and must be labeled as a "class"

top: eg (top: 20px; )
The number of pixels from the top of the page that your <div></div>  element will be positioned. If you give "top" a number value of "20 px" your <div></div> element will be 20 pixels down from the top of your page. (You can also use other measurements espressed in ex, em, in, cm, mm, pt, pc, % and auto)

left:  eg (left: 20px;)
This is the number in pixels from the left of your page that your <div></div> element will be positioned a value of  left: 20 px; places the <div></div> block 20 pixels from the left (you can even use negative numbers, but it's hard to track down an errant element if it's off the page.

width: eg  (width: 120px;)
width of your <div></div> element in pixels.

height: (height: 60px;)
The height of your <div></div> element in pixels.

z-index:  eg (z-index: 1;)
This is the order in which your <div></div> elements are stacked 
(z-index: 1;)  is the bottom layer next to the background. z-index: 2; stacks on top of  z-index: 1; etc

Padding: eg (padding: 10px;)
A margin for your <div></div> element text or graphics. It adds to the width of the block; you can also specify padding-width, padding-height, padding-left or padding-right or just use (padding: 15px 20px 5px 7px;) where 15px is top,  20 px is right,  5 px is bottom,  7 px is right. Just remember TRouBLe (Top, Right, Bottom. Left)

Border: eg (border: #ffffff 2px solid;)  same as  (border: white 2px solid; )
You can add a border to your <div></div> element. which also adds to the total size of your box.  The border can be solid, dotted, dashed, double, groove, ridge, inset, or outset, and any color you wish.

Position eg  (position:absolute;)
can be absolute, fixed, static or relative
position: static is the default which means the element is not positioned and occurs where it normally would in the document.
position: absolute; the element is placed exactly where you tell it to go and causes the box to be unaffected by any other layer or <div></div> element
position: fixed (doesn't work with Internet Explorer 6) no matter how you resize the page the box is always fixed... (try it out)
position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative from where it would normally occur in the document.

background-color: eg (background-color: rgb(0, 0, 0); )
You can express the color as an rgb value in our eg)  or hex #000000 or as a word like, black; orange; white; 0

Here's a 3D illustration of a <div></div>  element
The W3C diagram looks like this Houston we have a problem...
IE 6 In quirk mode and IE 5.5 it looks like this
The W3C diagram Box Model differences

More on the is later...




A word about positioning your <div></div>  element "boxes..."  it's trial and error, there are no quick short cuts, remember that you are setting up for a 800 x 600 pixels page or a 1024 x 768 pixel page  Try a large # of pixels like 100 and work your way down...

Come Together Now

Making it all fit...
Note below that id="layer1" is missing... it was a white background for the other <div></div> elements to rest upon but adding solid borders to the other boxed <div></div>  elements was an easier solition...
<!-- -----------------------------Snip -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tutorial CSS & Div 02</title>

<style type="text/css">

h1 {
    color: white;
    }
h2 {
   color: black;
   background: white;
   width: 630px;
   height: 81px;
   padding:20px

     }
h3 {
    color: orange;
    }  
 p {
    color: white;
     }
</style>

 
</head>
<body background="mandarin/bg1b.gif">

 <div id="layer2"
style="padding: 15px; z-index: 2; position: absolute; left: 184px; top: 10px; background-color: black; width: 620px; height: 74px; border: #ffffff 8px solid;">
<h1>Basic Web Design
</h1>
</div>

<div id="layer3"
 style="padding:4px; z-index: 3; position: fixed; left: 205px; top: 71px;
 width: 614px; height: 10px;">
 <h3>Concepts, ideas, tools, and knowledge
 </h3>
 </div>
 
<div id="Layer4"
 style="z-index: 4; position:absolute; left:18px; top: 10px;
 background-color: rgb(0,0,0); width:150px; height: 103px; border: #ffffff 8px solid;">
  <img src="mandarin/web.jpg" />
 </div>

<div id="layer5"
 style="padding: 15px 20px 5px 5px; background-color: rgb(0, 0, 0);
 color: white; z-index: 5; position: absolute; left: 18px; top: 124px; width: 125px; height: 300px; border: #ffffff 8px solid;">
<p>Syllabus<br>
Lesson 1<br>
Lesson 2<br>
Lesson 3<br>
Lesson 4</p>
<p></p>
<p>Contact </P>
<p>Tutorial 1</P>
<p>Tutorial 2</p>

</div>

<div id="layer6"
 style="padding: 10px; position: absolute; left: 180px; top: 120px;border: #ffffff 2px solid;  background-color: white; width: 646px; Z-index: 6;  color: white;">
 <img src="create.jpg" />
</div>

<div id="Layer7"
 style="z-index: 7; position: absolute; left: 180px; top: 320px;">
 <h2>Explore concepts and ideas to develop a clear, concise, usable and
attractive web site
 </h2>
</div>

</body>
</html>
<!-- -----------------------------Snip -->
 Browser View
Nicer! snip, copy, paste = no tables used here!


Converting inline style to embedded

Inline style is written

<p style="font-family: 11px Verdana, Arial, Helvetica, sans-serif; color:#003366;">Inline Styles</p>

Embedded style is place between the <head> </head> element in the header

and starts with

<style type="text/css">

p {  font-family: 11px Verdana, Arial, Helvetica, sans-serif;  color:#003366;   }

</style>

It can asllso be written in the form of a  list ---which is easier to  work with...

<style type="text/css">

p {
    font-family: 11px Verdana, Arial, Helvetica, sans-serif;
    color:#003366;
    }

</style>


Embedded Style sheets can be converted to an external style sheet
(More on this later)

<link rel="stylesheet" href="yourcss.css" type="text/css" />

The CSS styles are saved to a plain text file "yourcss.css"   

Here's the CSS for the web page
I snuck in a label for one of the graphics, can you spot it? Check out how it looks in 4 different browsers!!!
<!-- -----------------------------Snip -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tutorial CSS &amp; Div 02</title>
<style type="text/css">
body {
background-image: url(mandarin/bg1b.gif);
background-repeat: repeat-x;
}

h1 {
font-family: sans-serif;
color: white;
}
h2 {
color: black;
}
h3 {
color: #ffa000;
}
p {
color: white;
}
#layer2 {
padding: 15px;
position:absolute;
z-index: 2;
left: 184px;
top: 10px;
background-color: black;
border: #ffffff 8px solid;
width:666px;
voice-family: "\"}\"";
voice-family:inherit;
width:620px;
}
#layer2 {height:120px;
voice-family: "\"}\"";
voice-family:inherit;
height: 74px;

}
html>body #layer2 {
width:620px;
height: 74;
}

#layer3 { padding:4px;
z-index: 3;
position: absolute;
left: 205px;
top: 71px;
width: 614px;
height: 10px;
}
#layer4 {
z-index: 4;
position:absolute;
left:18px; top: 10px;
background-color: rgb(0,0,0);
width:150px;
height: 103px;
border: #ffffff 8px solid;
}

#layer5 {
padding: 15px 20px 15px 5px;
background-color: rgb(0, 0, 0);
color: white;
z-index: 5;
position: absolute;
left: 18px;
top: 124px;
width: 125px;
height: 300px;
border: #ffffff 8px solid;
}
#layer6 { padding: 10px;
position: absolute;
left: 180px;
top: 120px;
border: #ffffff 2px solid;
background-color: white;
width: 646px;
Z-index: 7;
}
p.picturename {color:purple

}

#layer7 {
z-index: 6;
position: absolute;
left: 180px;
background: white;
padding: 2px;
top: 390px;
width: 666px;
height: 76px;
}


</style>
</head>
<body
style="color: rgb(255, 102, 0); background-color: rgb(255, 255, 255);"
alink="#000099" link="#ff0000" vlink="#33cc00">
<div id="layer2">
<h1>Basic Web Design
</h1>
</div>
<div id="layer3">
<h3>Concepts, ideas, tools, and knowledge </h3>
</div>
<div id="layer4"> <img src="mandarin/web.jpg"> </div>
<div id="layer5">
<p><a href="syllabus.html">Syllabus</a><br>
<br>
<a href="lesson1.html">Lesson 1</a><br>
<a href="lesson02.html">Lesson 2</a><br>
<a href="lesson03.html">Lesson 3</a><br>
<a href="lesson04.html">Lesson 4</a></p>
<p><a href="mailto:garrystasiuk@comcast.net">Contact</a> </p>
<p><a href="HTML_XHTMLTutorial.html">Tutorial 1</a></p>
<p><a href="tutorial2.html">Tutorial 2</a><br>
</p>
<p><br>
<a href="BWD-Summary.html">More</a><br>
</p>
</div>
<div id="layer6"> <img src="Create.jpg">
<p class="picturename"> Create.jpg</p>
</div>
<div id="layer7">
<h2>Explore concepts and ideas to develop a clear, concise, usable, and
attractive web site. </h2>
</div>
</body>
</html>
 FireFox
FireFox
Appple
Apple Safari
Final version
SeaMonkey
Internet Explorer 7 in standard mode
Internet Explorer 7 Standard
Internet Explorer 7 in quirk mode
Internet Explorer 7 in quirks mode
(emulating IE 6 & 5.5)

Fix it....
Looks good in Seamonkey, looks good in Firefox, looks great in Safari and in Internet Explorer 7 standard mode
page with links

Okay, now you add the search function.


Lucky for us we can use Googles search engine, here's the markup from Google
all you have to do is replace the red text with your domain name and url
<!--SiteSearch Google -->
    <form method="get" action="http://www.google.com/search">
    <div id="search">
      <label for="q">Search:</label>
      <input id="q" name="q" size="20" maxlength="255" value="" type="text" />
      <input name="domains" value="http://uofgts.com/" type="hidden" />
      <input name="sitesearch" value="http://uofgts.com/" checked="checked" id="mysite" type="radio" />
      <label for="mysite">Just this site</label>
      <input name="sitesearch" value="" id="www" type="radio" />
      <label for="www">WWW</label>
      <input name="btnG" value="Go" type="submit" />
    </div>
    </form>
    <!-- SiteSearch Google --> 



and Send your questions and comments

Contact