1. Web Program Development1 February 23, 2011 HTML Web Page Development Debbie Bartlett February 23, 2011

2. Web Program Development 2 February 23, 2011 Your website should include Something about you At least one image At least two different web pages that you can traverse between without use of the “back arrow” Some use of color and varied fonts Links to other sites Links or other display of your javascript and applets Some kind of table or form No bad links Have perfect spelling and grammar

3. Web Program Development 3 February 23, 2011 HTML Basics Composed of tags  Always enclosed in angle-brackets, <>  Are case-insensitive  Occur in begin-end pairs in the form of … Text file is white-space insensitive

4. Web Program Development 4 February 23, 2011 Document tags Comes after the HEAD structure Between the BODY tags is all the content that is displayed by the browser … Placed within the HEAD structure Title appears at the top of the browser’s title bar, in the history list, and your bookmark file … Contains all of the document’s header information … First and last tags in a document. Tells web browser where the HTML in your document begins and ends …

5. Web Program Development 5 February 23, 2011 Basic HTML Document Document Title

6. Web Program Development 6 February 23, 2011 Text and Font Tags Sets font size, color, type … Everything between is underlined … Everything between is italicized … Everything between is boldfaced …

7. Web Program Development 7 February 23, 2011 List Tags Each item in the list “Ordered” list, i.e. numbered List begin & end … “Unordered” list, i.e. bullet List begin & end … Bullet item 1 Bullet item 2 Bullet item 3 Numbered item 1 Numbered item 2 Numbered item 3

8. Web Program Development 8 February 23, 2011 Table Tags Table data for a cell Begin & end … “Table Row Begin & End … Table Begin & end … A1 A2 A3 B1 B2 B3

9. Web Program Development 9 February 23, 2011 Reference & Image Tags Link to an image Display image Send email to the link send email to mailto:email_address Hypertext reference web_page

10. CSS: Cascading Style Sheets Purpose: Defines how HTML elements are to be displayed Benefits: Allows you to change the appearance and layout of all pages in your Web by just editing one single CSS document File Name: Typically saved as separate.css files Web Program Development 10 February 23, 2011

11. CSS: Cascading Style Sheets - Syntax Selector {property: value}  Example: body {color: green} Referencing style sheet example Web Program Development 11 February 23, 2011

12. Web Program Development 12 February 23, 2011 Use available references See these class notes in ramct/assignment Talk to a class mate who has experience Come to computer science club or Friday office hours/lab Right click in a browser and click on ‘view source’ See example web pages:  http://www.cs.colostate.edu/~bartlett http://www.cs.colostate.edu/~bartlett  http://www.cs.colostate.edu/~cs192/Examples/index.html http://www.cs.colostate.edu/~cs192/Examples/index.html  http://www.cs.colostate.edu/~cs192/Examples/sample.html http://www.cs.colostate.edu/~cs192/Examples/sample.html  http://www.cs.colostate.edu/~cs192/Examples/SampleForms.html http://www.cs.colostate.edu/~cs192/Examples/SampleForms.html Google HTML & something you want to do like border  Style sheets: http://www.w3schools.com/css/default.asphttp://www.w3schools.com/css/default.asp Start with your current knowledge base and expand it!!!