1. INFSCI 0010

2.  Last time we built a doggie web page in class following the instructions in the slide deck: Build Web Page with HTML – see week 3 The topics included starting with a template, H1 tag, div tag, inline style, paragraph tag, img tag, unordered list tag, embedded style tags, centering a page, use of ID's, floats, clear property and margins.

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

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

5.  For example, you have a directory called html and in this directory you have a another directory called is10 and a web page (html file) called index.html. So if anyone types www.pitt.edu/~username/is10 they will see your index.html page. www.pitt.edu/~username/is10  Your index.html should be your homework page. And, it should consist of links to your homework. Funny, because it starts with HW2 because you already emailed me your HW1 which was your interface project.

6.  Here is a snippet of your HTML for your homework page Homework page for John Smith HW2 My personal web page HW3 Javascript HW4 Database Homework

7.  What does your directory structure look like for your homework page?  html directory  is10 directory  index.html  webpage.html  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.

8.  A different html directory structure  is10 directory  index.html  homework – This is another directory inside of is10 directory. And, inside of it are the three files  webpage.html  javascript.xxx  database.xxx  Now, an anchor tag in the index.html page referencing webpage.html would look like: 

9.  A common directory structure scheme is to put all of your images into an image directory.  html directory  is10 directory  index.html  image directory  collie.jpg  pug.jpg Path to the pug file: html/is10/image/pug.jpg Full address: http://www.pitt.edu/~username/html/is10/imag e/pug.jpg html directory i s10 directory image dir: collie.jpg pug.jpg

10.  Lets go to : http://www.w3schools.com/html/html_basic.asp  Practice adding a header tag, paragraph tag, a link and an image.  Lets review how to obtain and use images  You can search the web using Google or visit a free image repository such as:  http://www.sxc.hu/http://www.sxc.hu/  http://www.deviantart.com/ http://www.deviantart.com/  Be conscious of copyright.

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

12.  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.   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/

13.  Lastly save your resized images to the same directory as your webpage.html file or create an image directory and use a path to you images  Try to choose images that match the theme of your website and ones that create the right mood.  Look for good photography: clarity, light vs dark and subject of the photo. Stock photos can look rehearsed and not real.

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

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

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

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

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

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

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

21.  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:  https://www.codeschool.com/ https://www.codeschool.com/  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