Review 1 csc242 – web programming
World Wide Web Two inventions provided standardization for information sharing Both in content formatting and transmission Developed by Tim Berners-Lee of CERN (European Nuclear Research Organization) HTML HyperText Markup Language Enables hyperlinked text documents HTTP HyperText Transfer Protocol Communication protocol for sending info across the web
Web Technology Web is client/server technology Client (web browser) requests resources from web servers Resource – any object retrieved from a web server, such as an XHTML document, image, video, audio, Database information, etc. Web servers Service the request – provide content Use specialized software (apache, IIS)
XHTML XHTML derived from HTML Tag based Based on XML (Extensible Markup Language) Tag based Must have both open and closing tags <xxx> and </xxx>, content is in between <xxx />, if no content is needed May contain “attributes” Syntax is: <xxx attribute1=“value1” attribute2=“value2”> Web page formatting (rendering) depends on tags Not the format of the html code itself
Some XHTML Tags (note: incomplete!) <html> - main html tag <head> - html header section <body> - web page body <meta> - page keywords/description <h1> thru <h6> - six levels of headers <p> - paragraph <a> - create links with href attribute href, mailto: … <ol> <ul> - ordered, unordered lists <div> - division/section of code <span> - inline section of code <title> - page title <img> - image <hr /> - horizontal rule <br /> - break, new line Various table tags…
More XHTML Tags can have attributes Block vs. inline elements <xxx attribute=“value” … One attribute is an id <xxx id=“something” … Can be linked in an anchor <a href=“#something” … Block vs. inline elements Block: starts a new line, takes up entire width (p, h#, div, …) Inline: no new line, only takes up what’s needed (span, a, img, …) Special characters &em; < © &del; ⊃ ⊂ &#num;
HTML Tables Tags for tables Some attributes <caption> table caption <table> - create a table <thead> - table header <tfoot> - table footer <tbody> - table body <tr> - table row <th> - table header cell <td> - table data cell <(row|column)span> - merge Some attributes align width, border pixels or percent…
CSS – Cascading Style Sheets XHTML defines a web page structure Items and placement CSS defines the appearance Purpose is to separate the structure from the presentation Note: Browsers have default settings than can be overridden!
CSS – three main approaches inline style directives located with the items they affect embedded “style sheet” a style section included in the web page affects elements on just that page external “style sheet” separate file imported into a web page used to share appearance among pages Provide uniformity of appearance among pages in a web site
CSS Inline Style Style attribute is embedded in HTML tag Syntax: style = “attribute1: value; attribute2: value2; …” Example: <p style = "font-size: 20pt; color: red”> Only affects that tag
CSS - Embedded defined with <style type=“text/css”> tag when placed in <head> it applies to all matching elements in document type=“text/css” is MIME format (Multipurpose Internet Mail Extensions) Rules are placed in the style tag section, syntax is: ruleName { attribute1: value1, value2; attribute2: value } rules apply to specified tag or ccs selector types
CSS Selectors (see online examples) Can be an explicit HTML tag .classname Invoked in an HTML tag with the class attribute <xxx class=“classname”… Can be tag specific a.nodec Comma separated to apply to multiple items h1, em { text-decoration: underline } Space separated for embedded items ul ul { font-size: .8em } :pseudoclass (like a:hover)
CSS External Style Sheet CSS rules are placed in a separate file Invoked in the HTML file with a <link> tag <link rel=”stylesheet” type=”text/css” href=”styles.css” /> rel – specifies the relationship between the HTML and other doc type – MIME type style sheet href – URL for the referenced document
CSS Inheritance and Precedence unspecified style elements are inherited from higher level object specificity lower level element styles override higher level definitions Precedence in the following order author (the page itself – person who wrote it) user (person viewing page) user agent (the browser)
Box Model and element positioning All block-level XHTML are rendered based on a “Box Model” Can be controlled with CSS Boxes have (from outside in) margin, border, padding Border is around the element itself Border has a thickness margin defined the distance between the outside of the border and other external elements padding defines the distance between the inside of the border and internal content Positioning and the float element float removes the element from the normal placement flow Element can be “floated” right or left
Javascript Object-oriented, interpreted, programming (scripting) language Interpreted – no compilation step required Code is read, syntax checked, and executed line-by-line Language is “loosely typed” Variables must be declared BUT no there are no explicit variable types Declaration: var x1, x2 , x3; Variable type is inferred based on usage Type may change as program is executed (dynamically typed) Otherwise, language constructs generally follow C/C++ conventions
Javascript general constructs var for variable declarations var x1, x2 , x3; Uninitialized variables have value undefined C/C++ constructs do, for, while, switch, if logical operators: && || ! 0/1 and empty non-empty strings evaluate to Boolean false/true for (i in object) - to loop over members of an object Functions defined with function keyword Local/global variables
Javascript Arrays Two ways to define: Associative Arrays: var n = new Array(3); var n = [3]; Will grow automatically Can be multidimensional Initializing: var n = new Array (1, 2, 3, 4, 5); var n = [ 1, 2, 3, 4, 5 ]; Associative Arrays: Arbitrary array indicies capitals["China"] = "Beijing"; or define with JSON notation var population = { "Beijing": 20693000, "Moscow": 11541000, "Washington": 658893 };
Javascript Objects document object window object Date document.write() and document.writeln() window object window.prompt (also window.alert() and window.confirm()) Date var d= new Date() many methods for getting/formatting dates and time Similar for Arrays X.length, X.sort(), etc…
More methods and functions Methods for variables interpreted as strings indexof(), split(), join(), etc… For numbers X.toString() Global functions: encodeURI, eval, isFinite, isNaN, parseInt, parseFloat, decodeURI