CSS, Programming Intro

1. CSS, Programming Intro Week 3 INFM 603

2. Agenda • CSS • Programming Languages Introduction • JavaScript Intro

3. Links • http://www.cs.umd.edu/~nelson/documents/SuggestionsForWritingComputerPrograms.htm • http://www.w3.org/2013/ValidatorSuite/beta/ • http://www.awwwards.com/websites/html5/ • VPN • https://www.itsc.umd.edu/MRcgi/MRTicketPage.pl?USER=&MRP=0&PROJECTID=1&MR=11432 • http://proquest.safaribooksonline.com/

4. CSS • CSS  Cascading Style Sheets • Official W3C standard for controlling presentation • Specification: http://www.w3.org/TR/CSS21/ • Style Sheets • Text file with rules. It includes no html • Style sheets files use a .css extension • Allows you to apply typographic styles (font size, line spacing, etc.) • Allows you to apply spacing instructions • Allows you to have page layout control • Smaller html files by avoiding redundancy in style specification • Easy update a collection of pages by updating only a single file • Example: ExternalFile.css • Why CSS? http://www.csszengarden.com/ • Will discuss CSS2 (also talk about CSS3)

5. CSS • Rule  Basic element of a style sheet • Rule describes the formatting associated with a page element • Rule format selectordeclaration • selector identifies what should be styled in a web document (e.g., h1, p). • declarationwhat and how that portion of the web document should be modified

6. CSS • declaration  consists of property: valuepair(s) enclosed in { } • Examples: h1 {color: green} p { font-size: 2em; color:red; } • Example: ExternalFile.css • Popular properties  color, font-family, font-size, text-decoration • HTML Dog CSS Properties • http://www.htmldog.com/reference/cssproperties/

7. Types of Style Sheets • Inline • Style information applied to specific tag (e.g., <p style=…”) • Avoid if possible • Internal • Using the <style> tag in the header of the html document. • Convenient to provide own style to a specific page • Example: InternalStyle.html • External • External style sheet which web pages link to (see <link> tag) • Preferred approach • Example: ExternalFile.html and ExternalFile.css

8. CSS Validator • http://jigsaw.w3.org/css-validator/ • Notice you have three choices • By URI • By File Upload • By direct input

9. Colors • You can specify colors using one of the following predefined colors: yellow, white, teal, silver, red, purple, orange, olive, navy, maroon, lime, green, gray, fuchsia, blue, black, aqua • Source for colors http://www.w3schools.com/html/html_colors.asp • You can specify a color by indicating the red, green and blue components. For example, all the following are equivalent: • red • rgb(255,0,0) • #ff0000 • Color picker extension for chrome • colorPicker

10. Setting Size • Length units - centimeters (cm), millimeters (mm), etc. • Percentages  size of the font is based on the size of the parent element • Relative • ex  height of the lowercase x in the font • em • Corresponds to the value of the font-size property of the element on which is used. If it appears in the font-size property itself it refers to the font-size of the parent element • If the parent is body tag and no font size is specified then the size is looked in the user’s preferences specified in the browser • Preferred relative and percentages

11. CSS Comments • Comments Surrounded by /* */ • You can use them to disable styles • Inheritance of Properties  A child element inherits the same properties of its parent element (unless otherwise indicated by the CSS specification)

12. Kinds of Selectors • Type Selectors Those based on the name of an HTML tag (e.g., p, table, etc.) • p { color: red; } • Pseudo-classes attached to selectors to specify a state. Four popular pseudo-classes are: • a:link  initial color of a link • a:visited  color for a visited link • a:hover  color when mouse hover over link • a:active color during the clicking of the link • Order is important (LoVeHAte) • Example: Selectors.html, Selectors.css

13. Kinds of Selectors • Class Selectors Allow us to apply the same rules to many elements • Use when you need to apply a style many times in your document • Created with a period (also known as full stop) • Example: Selectors.html, Selectors.css • ID Selectors Similar to class selectors but appear only once in the document • Used when you need to apply a style only once in your document • Created using # • Example: Selectors.html, Selectors.css • Others • Descendant, child, attribute, universal selectors

14. Additional HTML Elements • Tables defined using <thead></thead>, <tfoot></tfoot>,<tbody></tbody> • See class schedule page • <div> • Allow you to delimit a section of the HTML body • In the past used to identify sections of a document (navigation, footer, header). (HTML5 introduces tags for this) • Defines a block-level entity • Browser starts a div element’s content on its own line • <body> also defines a block-level entity • <span> • Used to wrap inline content (e.g., text sequence) • You can apply style to the sections defined by span and div • Nice background effects when nesting div and styling them • The following example divide the document in three main areas • Example: SpanDiv.html, SpanDiv.css

15. Margin Border Margin edge Padding Border edge Content Padding edge Content edge Box Model • Each block element (e.g., p) contains four edges (top, bottom, right, and left) defining a box • Four sections can be identified with a block element • Content what lies in the middle of the box (text, image, etc.) • Padding  surrounds the content • Border surrounds the padding and represents the box border • Margin surrounds the border

16. Box Model (Padding/Margin) • Example:BoxModelTests.html, BoxModelTests.css • You can adjust individual padding/margin properties by using: • padding-bottom, padding-left, padding-top, padding-right • margin-bottom, margin-left, margin-top, margin-right • The margins, borders, padding, and background properties of block elements (e.g., body, p, etc.) are not passed to their child block-level elements

17. Shorthand Property • Shorthand Property allows you to specify several properties by using only one • If you don’t specify one of the properties a default value will be used • Commonly used shorthand properties • background • font • list-style • margin • border • padding • Example: ShorthandProperties.html, ShorthandProperties.css

18. Background • Background properties • background-color • background-image location of image • background-repeat how image repeats • Possible values for repetition • no-repeat one instance of the image • repeat tile • repeat –y  repeats on the y-axis • repeat –x  repeats on the x-axis • background-attachment  indicates attachment of the image to the containing element. Possible values are: • scroll  default value • fixed  image will stay stationary as the scrolling takes place • background-position  Possible values (combination of them are valid) • top, bottom, center, left, right • Background images can be used in elements other than body (e.g., div) • There is a shorthand property for backgrounds • Example:Background.html, Background.css, • BackgroundStretch.html, BackgroundStretch.css

19. Generic Font Families • sans-serif (e.g., Verdana, Helvetica, Arial) • serif (e.g., Times New Roman, Georgia, Times) • monospace(e.g., Courier, MS Courier New) • cursive (e.g., Lucida Handwriting) • fantasy (e.g., Whimsey, Comic Sans) • Let’s see the effect using the Background.html example

20. Selector Examples • a[title] { } • A link with a title attribute • .myPrefStyle{ } • Any elements with the class myPrefStyle (same class name can appear in many elements) • #mySchedule { } • An element with id mySchedule (only one element on the page) • div.myPrefStyle{ } • A div with the class myPrefStyle • div#mySchedule{ } • A div with the id mySchedule • div table { } • A table with a div ancestor • input[type = “submit”] { } • An input with a type attribute that has the value submit

21. jQuery Mobile • jQuery Mobile HTML5-based user interface system for all popular mobile device platforms • http://jquerymobile.com/ • Example • http://www.cs.umd.edu/~nelson/mobile • Let’s take a look at the HTML

22. Programming for the Web • JavaScript [Client-side] • Server embeds a program in HTML • Browser runs the program when it gets to it • PHP “Common Gateway Interface” [Server-side] • HTML form sends field values to the server • Server passes field values to a program • Program generates a Web page as a response • Ruby on Rails [Ajax] • Server sends browser a generic program to run • Browser and server programs exchange XML-encoded data

23. Software • Software models some aspects of reality • Input and output represent the state of the world • Software describes how the two are related • Examples • Ballistic computations • Google • Microsoft Word

24. Programming Languages • Used to specify every detail of the model • Special purpose • Able to specify an entire class of models • Spreadsheets (Excel, ...) • Databases (Access, Oracle, ...) • General purpose • Able to specify any possible model • JavaScript, Java, Ruby, Perl, C, C++, ...

25. History of Programming • Machine language • Language that machine can understand • Assembly language • Assembler translates “symbolic” references to machine instructions and memory locations into machine code • High-level languages • Compiler rewrites everything in machine code OR • Interpreter performs the specified actions at “run time”

26. Programming Languages Ruby PHP Java C++ JavaScript Assembly Language Machine Language Hardware

27. Machine Language • Everything is a binary number • Operations • Data 00001000 ADD 00010101 number to be added (21) 01010110 memory location to add it to (86) 00001000 00010101 01010110

28. Assembly Language • Symbolic instructions and addresses • Symbolic instruction “ADD” • Symbolic address “SUM1” • For instance ADD 21, SUM1

29. High level Languages • Procedural (modular) Programming • Group instructions into meaningful abstractions • C, Pascal, Perl • Object oriented programming • Group “data” and “methods” into “objects” • Naturally represents the world around us • C++, Java, JavaScript, PHP, Ruby