1. INFSCI 1052

2.  Start with a template base structure  Think about how to structure your document using headers, paragraphs, divs, unordered lists, imgs.  Typically a page has a header section, a main section and a footer section.  Here is a page that lists some different HTML tags and shows how they can be used. Some of this will be a repeat from before but some will be new.: http://www.w3schools.com/html/html_example s.asp http://www.w3schools.com/html/html_example s.asp

3.  Welcome to Pitt  Welcome to Pitt – This is the text the user sees  ……….. - This is the actual opening and closing anchor tag  href="http://www.pitt.edu" - This is the full web address  So the page loads and the user sees a link and clicks on it and goes to a new web page associated with the specified web address

4.  What does your directory structure look like for your homework page?  html directory  is10 52directory  index.html --this is your homework page  webpage.html -- these are homework assignments  javascript.xxx  database.xxx  Because your webpage.html, javascript.xxx and database.xxx all live in the same directory as index.html your anchor tags in the index.html file simply look like What user sees  You don't need the full web address of http://www.pitt.edu/~username/is10/webpage.html.

5.  A common directory structure scheme is to put all of your images into an image directory.  html directory  is1052 --directory  index.html -- homework page  hw1.html –first homework  image --directory  collie.jpg -- picture  pug.jpg -- picture Path to the pug file from an anchor tag in the hw1.html file: My Lovable Pug html directory i s1052 directory image dir: collie.jpg pug.jpg

6.  Unix based system are brutal about two things:  Case  Be careful when using lower case and upper case  For ex: these are two different files:  Index.html and index.html  Spaces  Unix does not like spaces in file names  Good: my_web_page.html  Not so good: my web page.html  File extensions – they tell the computer how to interpret your document .html – for web pages .docx – for Word doc .accdb – Access Database .txt – plain text

7.  Once you have chosen an image right click and choose save as to save the file to your computer. In most cases your image will not be the right size.  You can resize an image by setting the height and width attributes in the img tag. Not good idea.   The measurements are in pixels  Try to keep the height and width proportion equal to the original  There are online image resize websites:  http://www.picresize.com/ http://www.picresize.com/  http://www.shrinkpictures.com/ http://www.shrinkpictures.com/  http://www.resizeyourimage.com/ http://www.resizeyourimage.com/

8.  http://www.w3schools.com/html/tryit.asp?fil ename=tryhtml_hr http://www.w3schools.com/html/tryit.asp?fil ename=tryhtml_hr  This page demos adding the tag  It’s a separator  Also, when looking at a web page if you right click you will see a menu option to view source.

9.  http://www.w3schools.com/html/tryit.asp?fil ename=tryhtml_poem http://www.w3schools.com/html/tryit.asp?fil ename=tryhtml_poem  This demonstrates that browsers pay attention to the initial space in our html code but ignore multiple spaces.  http://www.w3schools.com/html/tryit.asp?fil ename=tryhtml_pre http://www.w3schools.com/html/tryit.asp?fil ename=tryhtml_pre  But we have a way of fixing the space problem if we want to.

10.  Remember that we can create styles and place them in the head section of our document and apply the style to a tag on our page.... styles go here

11.  A style syntax looks like the following:  selector {property: value;}  The selector is the name of the tag such as div, p, ul  The property represents a list of different things we can affect such as color, font, size  The value is how much do want to affect something  P {color:blue;} – here we made the text color of paragraphs blue.  A list of CSS properties: http://www.htmlhelp.com/reference/css/proper ties.html http://www.htmlhelp.com/reference/css/proper ties.html

12.  Start with simple styles  Change the color of the text–  p{color:blue;}  Specify the size of your h1 or h2 or h3 etc  h2{font-size:10px;}  Pick a web safe font to use for your page  p{font-family:"Times New Roman",Georgia,Serif;}  Center your page  #mainpage{width:800px; margin:0 auto;}  Here is an example of a surrounding all of the html between the body tags.

13.  Float a div with an image in it to the left or right  div#collie {float:left;}  Here we have a div tag with an id of collie:   Use margins to create space on top, right, bottom or left of a tag  div#collie{margin-left:10px;}  Create a background color for a tag  p {background-color:#33ccee;}  Check out the link for possible colors:  http://www.hypergurl.com/colormatch.php http://www.hypergurl.com/colormatch.php

14.  When you want to target only one tag then use an id: div#footer {color:blue;} -------------------------------------- <div id = "footer") stuff………….  When you want to apply a style to multiple tags then use a class p.makebig{ font-size:30px;} I look big I look big too I look regular size Notice a # sign for id and a period. for a class.

15.  There are many websites dedicated to teaching CSS  W3C Schools is very popular:  http://www.w3schools.com/css/css_examples.asp http://www.w3schools.com/css/css_examples.asp  Tizag is good too  http://www.tizag.com/cssT/ http://www.tizag.com/cssT/  Code Academy is a little different style  http://www.codecademy.com/tracks/web http://www.codecademy.com/tracks/web  Code school is another site:  http://www.codecademy.com/tracks/web http://www.codecademy.com/tracks/web  They charge after the into sessions(s)  LYNDA.com- Free and Great videos on everything IT: http://technology.pitt.edu/help/lynda/lynda- login.html http://technology.pitt.edu/help/lynda/lynda- login.html

16.  Here are some CSS examples to learn from:  www.w3schools.com/CSS/css_examples.asp www.w3schools.com/CSS/css_examples.asp  This is a good reference list and each week in class we will be learning some of these techniques.  Start with some of the basics before moving onto the more complicated.  Make your own list of techniques and commands that you have begun to master  Success in this class depends upon you taking the time to practice and learn different CSS techniques. .

17.  Universal Selector  Uses the *  Ex: *{color:red;}  All text in the document will be red unless overridden  Affects all elements  Also acts as the reverse of the child selector  p * em { font-size:12px}  All ems that are NOT a direct child of p. They must at least be a grandchild From Stylin by Charles Wyke-Smith

18.  Pseudo Classes  Most often used with hyperlinks  They are called pseudo because they don’t have a direct tag they are attached to in the markup.  Four pseudo classes: ▪ Link – waiting to be clicked ▪ Visited – has been clicked ▪ Hover – cursor over link ▪ Active – currently being clicked  Order is important! – Think LoVeHAte.

19.  Pseudo Classes  You can use elements other than the anchor tag ▪ For example you can make a paragraph change text color or background color when the cursor hovers over it ▪ Caution: IE6 only supports hovers over links  Example: ▪ a:link {color:blue;} ▪ a:visited {color:red;} ▪ a:hover {font-size:22px;} ▪ a:active {color:green;}

20.  Group Exercise: List, describe and write a style exampleof your top ten CSS techniques.  Ex;  1) Select paragraphs and headers and control the color of the text. p { color:#3344CC;} h1 {color:#445533;} 2) Center a web page First wrap the html tags in a div with an id of mainpage. Then apply the following style div#mainpage { width:800px; margin: 0 auto;} Be ready to justify your choices.