Lecture 6 8/11/11
Using Div Elements to create CSS layout Need to identify your documents sections Header Content Footer #header #content #container #footer Basic div structure used to make a single column layout
Div The <div> tag defines a division or a section in an xHTML document. The <div> tag is often used to group block-elements to format them with styles. <div id="header"> Specifies a unique id for an element Note: ids are used for the main elements of the page, such as header, main content, sidebar, footer, etc. Classes are used for elements that will appear several times on your page, but can not be covered by standard html elements. For example menus. The easy way to remember which one of the two should be used only once to think of how many people are out there with your id card number.
Div Example- One column layout <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="cssnew.css"/> <title>Divide Your Page</title> </head> <body> <div id="container"> <div id="header"> Hello World <!--This is where the header information is situated--> </div><!--close #header div--> <div id="content"> <!--This is where the main content information is situated--> </div><!--close #content div--> <div id="footer"> <!--This is where the footer information is situated --> </div><!--close #footer div --> </div><!--close #container div--> </body> </html> #container { width: 550px; background-color: #ffffff; } #header padding: 10 20px; background-color: #999999; #content background-color: #cccccc; #footer
Font Absolute and Relative Absolute sizes regardless of what the user does short of turning off style sheets - element's font size is locked If users try to resize text through their browsers, elements with an absolute font size won't change, but non-absolute elements will This prevents users from making your page's text larger if they need to see it more clearly, or smaller if they think it's too big.
Continued… W3C Relative units are: em: the 'font-size' of the relevant font ex: the 'x-height' of the relevant font px: pixels, relative to the viewing device The absolute units are: in: inches -- 1 inch is equal to 2.54 centimeters. cm: centimeters mm: millimeters pt: points -- the points used by CSS2 are equal to 1/72th of an inch. pc: picas -- 1 pica is equal to 12 points.
Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled e.g. watermark
Absolutely positioned elements can overlap other elements. CSS Positioning http://webdesign.about.com/od/advancedcss/a/aa061307.htm http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=relative The Positioning properties allow you to specify the left, right, top, and bottom position of an element It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html> Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements. http://www.w3schools.com/css/css_colors.asp
Z-index Attribute Allows you to properly layer overlapping elements Elements that have a higher z-index value are displayed in front of elements with a lower value If you do not specify this value, elements that occur later in the document are displayed in front of those that occur earlier <html> <head><title>Absolute positioning</title> </head> <body> <img src="gates.gif" style="position: absolute; top: 0px; left: 0px; z-index:1"> <h1 style="position : absolute; top: 50px; left:50px; z-index: 3"> Position My Text</h1> <img src="beatles.gif" style="position: absolute; top:25px; left:600px; z-index:2"> </body> </html>
<html> <head> <style type="text/css"> h2 <html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px; } h2.pos_right left:20px; </style> </head> <body> <h2>This is a heading with no position</h2> <h2 class="pos_left">This heading is moved left according to its normal position</h2> <h2 class="pos_right">This heading is moved right according to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>The style "left:20px" adds 20 pixels to the element's original left position.</p> </body> </html> Relative Positioning A relative positioned element is positioned relative to its normal position. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
What is JavaScript? JavaScript is a scripting language A JavaScript is lines of executable computer code A JavaScript can be inserted into an HTML page JavaScript is an open scripting language that anyone can use without purchasing a license
Javascript Developed by Netscape Communications (Microsoft’s version is called ‘Jscript’) Enables executable content within web pages on the client side Provides an alternative to VBScript for ASP programming on the server side (IIS)
Javascript JavaScript Text is just plain text, as is HTML JavaScript is not Java Can be used as a standalone or embedded in other languages or applications Major browsers contain a JavaScript interpreter
JavaScript When a JavaScript is inserted into an HTML document, the Internet browser will read the XHTML and interpret the JavaScript The JavaScript can be executed immediately or at a later event
Case Sensitivity JavaScript is a case-sensitive language Language keywords, variables, function names, and other identifiers must be typed with consistent capitalisation of letters Variable names script, Script, SCRIPT represent three different variables Note that xHTML is not case-sensitive
Whitespace and line breaks JavaScript ignores white spaces and line breaks with three exceptions If white space is in a value designated by quotes – “” or ‘’ If white space breaks up a token, i.e. a keyword, variable name, function name etc If a line breaks a statement e.g. if return true was put on two separate lines, this would be treated as two separate statements
Ending Statements with a Semicolon With the traditional programming languages C++ and Java, each code statement has to end with a semicolon Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional and are required only if you want to put more than one statement on a single line
Whitespace and line breaks Simple statements in JavaScript are generally followed by a semi-colon barrier A=3; B=7; Or as below. A = 3; B = 7; Use of semi-colons is good programming practice.
Comments Browsers that don’t support JavaScript What happens when they hit the JavaScript code? We need to program around this. Older browsers that do not support scripts will display the script as page content. To prevent them from doing this, you can use the HTML comment tag. Comments are used to document code to increase programmer productivity and help maintenance efforts. // this is comment to the end of the line /* this would be used for a block of comment */
Example <html> <title>this is the title</title> <script language = “JavaScript”> <!--hide the script from non-JavaScript Browsers using an HTML comment SCRIPT GOES HERE // End the hiding comment --> </script> </html>
<title>First JavaScript Program</title> <html> <head> <title>First JavaScript Program</title> <script language="javascript"> document.writeln("<h1>Welcome to JavaScript Programming!</h1>"); </script> </head> <body> </body> </html>
Example JavaScript code goes into the HTML <head> tags. The language type is declared by <script language="javascript"> </script> document.writeln Instructs the browser’s JavaScript interpreter to perform an action, namely to display in the web page the string of characters between the double quotes (“ ”) The document object represents the HTML document currently being displayed in the browser It allows the programmer to specify HTML text to be displayed in the HTML document writeln is a method of the document object It contains the arguments that the method requires to perform it task or action
Data Types Probably the most fundamental aspect of a programming language JavaScript supports three primitive data types: Numbers strings of text Boolean values
Data Types Numbers: Boolean Values Integers (23 +-) Floating point (3.18 +-) Boolean Values Any binary value – true/false
Data Types Strings Other Data types Any sequence of characters in quotes Can be compare, concatenated and manipulated using operators “testing string 1” Other Data types Objects Arrays Exponential numbers Hexadecimal numbers The null value
Data Types First character must be a letter or an underscore _ Examples of Variables t My first variable IS6116 _harvest
Reserved Words Break, do, function, case, else, if, for, new… These words have special meanings in themselves These should NOT be used as Identifiers. For example: Break, do, function, case, else, if, for, new…
JavaScript Objects The browser contains a complete set of objects that allow script programmers to access and manipulate every element of a HTML document These objects reside in the computers memory and contains information used by the script Each object has attributes and behaviours associated with it
Variables A variable is a name associated with a data value A variable contains or stores the value Variables are names that have values assigned to them They provide a way to manipulate values by name
Assign a Value to a Variable You assign a value to a variable like this with the var statement: var strname = “Mary“ Or like this without the var statement: strname = “Mary“
Variables It is good programming practice to declare variables before using them var t; var sum; Or: var t; var sum; or var t = 2;
Untyped Variables T = 10; T = “ten”; int T = 10; String T = “ten”; Unlike other languages JavaScript is untyped Variables can hold data of any variable type T = 10; T = “ten”; In Java you would have to use: int T = 10; String T = “ten”; DataTypes can change accordingly
Example <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>