INFSCI 0010

 Start with a skeleton outline: copy and paste:  Warning sometimes copy and paste of quote marks from PowerPoint doesn’t work correctly. After you copy code to your editor replace any quote marks like these: `` with “ from your keyboard. Conforming XHTML 1.0 Transitional Template Your HTML goes here!

 Lets make a website about friendly dogs so lets add a header tag. … Facts About Friendly Dogs

 Lets talk about the tag  The div tag doesn’t really do anything other than organize html tags into a single container. Now, when you look at a web page the containers are like sections which can be the header and the main and the footer or whatever you like.  So, lets add a div tag and put the h1 tag inside of it. Facts About Friendly Dogs

 Some color for the header would be nice.  Lets add a style tag inside of the div tag Facts About Friendly Dogs  Lets follow this div and add a second div tag for the main part of our page and put in a paragraph tag and put some text in it. Right now lets use Lorem Ipsum Sample Lorem Ipsum text….

 Lets add another paragraph tag and put an image and some text in it.  …/ I searched Google for ‘collie dogs’ and saved an image to my hard drive. Then I opened dog.jpg in Photoshop and resized it. I keep the image in the same folder as my html file.

 How about adding a list so we can specify some facts about our collie. … end of img tag Native of Scotland Known for loyalty Great family dog

 Lets add another dog directly below our previous one Sleep nearly 14 hours a day A group of pugs called a grumble Attracted to children

 Lets add our last div.  This will be for our footer. Thank You for visiting my dog page

 Lets encase the whole thing inside of two div tags.   --- our new div tag  Paragraph stuff  Pictures  --- our end/last div tag Now add a in the head section

 Some fancy stuff called Cascading Style Sheets, CSS  Inside this style tag in the head section add the following: #page { width:800px; margin:0 auto; } This centers our whole page and gives it a defined width.

 Lets change how the collie picture and its unordered list looks. We want to treat the picture and the list as a whole so lets put div tags around the whole thing and give the div tag an ID name. Paragraph tag Image tag Unordered list tag In the style section lets add: #collie { float:left; } Float will send something up as high as it will go and to the left or right.

 Add another div and call it pug and put it around the pug paragraph, image and unordered list.   Paragraph tag  Image of pug  Unordered list In the style section lets add: #pug{ float:right; }

 It needs something in the middle Lets find a small picture of a doggie award. Lets add it after the collie div And float it to the left too. #award { float:left; } Is this a good ribbon for our website?

 Lets stop the footer from floating. In order to do this we need to "clear" the float. So we add a with no text in it. And, add it after the second dog div and before the footer div.

 Stop the float. Now add the following style in the head section between the style tags. #stopfloat{ clear:both; }

 There are other CSS properties such as padding and margins that would allow us to move any of our divs or pictures or unordered list any number of pixels.  This would help us in aligning our elements.  For example, our award is not centered between the two dogs and needs some cushion added on the left. #award { float:left; margin-left:30px; margin-top:10px; }

 Cascading Style Sheet Tutorials  W3C Schools  Tizag  More on CSS in the next lecture.