INFSCI 1052

 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.: s.asp s.asp

 Welcome to Pitt  Welcome to Pitt – This is the text the user sees  ……….. - This is the actual opening and closing anchor tag  href=" - 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

 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

 A common directory structure scheme is to put all of your images into an image directory.  html directory  is 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

 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

 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:   

 ename=tryhtml_hr 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.

 ename=tryhtml_poem ename=tryhtml_poem  This demonstrates that browsers pay attention to the initial space in our html code but ignore multiple spaces.  ename=tryhtml_pre ename=tryhtml_pre  But we have a way of fixing the space problem if we want to.

 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

 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: ties.html ties.html

 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.

 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: 

 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.

 There are many websites dedicated to teaching CSS  W3C Schools is very popular:   Tizag is good too   Code Academy is a little different style   Code school is another site:   They charge after the into sessions(s)  LYNDA.com- Free and Great videos on everything IT: login.html login.html

 Here are some CSS examples to learn from:   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. .

 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

 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.

 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;}

 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.