lecture 6 8/11/11. using div elements to create css layout need to identify your documents sections...

Lecture 68/11/11

Using Div Elements to create CSS layout• Need to identify your

documents sections• Header• Content• Footer

#content#container

#header

#footerBasic 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

#container{width: 550px;background-color: #ffffff;}

#header{padding: 10 20px;background-color: #999999;}

#content{padding: 10 20px;background-color: #cccccc;}

#footer{padding: 10 20px;background-color: #999999;}

<!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



</div>

<div id="content">Hello World



</div>

<div id="footer">

Hello World

</div></div>

</body>

</html>

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.

5

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.

6

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

CSS Positioning http://webdesign.about.com/od/advancedcss/a/aa061307.htmhttp://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.

8

http://webdesign.about.com/od/advancedcss/a/aa061307.htm



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> 10

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.

<html><head><style type="text/css">h2.pos_left{position:relative;left:-20px;}

h2.pos_right{position:relative;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>

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

12

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)

13

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

14

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

15

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

16

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

17

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

18

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.

19

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 */

20

Example<html><title>this is the title</title><script language = “JavaScript”></script></html>

21

<html><head><title>First JavaScript

Program</title>

<script language="javascript">

document.writeln("<h1>Welcome to JavaScript Programming!</h1>");

</script></head>

<body></body></html>

22

Example JavaScript code goes into the

HTML <head> tags. The language type is declared

by <script language="javascript"></script>

document.writelnInstructs 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

23

Data Types• Probably the most fundamental aspect of a programming

language

• JavaScript supports three primitive data types: • Numbers• strings of text• Boolean values

24

Data Types• Numbers:• Integers (23 +-)• Floating point (3.18 +-)

• Boolean Values• Any binary value – true/false

25

Data Types• Strings• 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 26

Data TypesFirst character must be a letter or an underscore _

• Examples of VariablestMy first variableIS6116_harvest

27

Reserved Words

• These words have special meanings in themselves

• These should NOT be used as Identifiers.

• For example:

• Break, do, function, case, else, if, for, new…

28

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

29

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 30

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“

31

Variables• It is good programming practice to declare variables before

using themvar t;var sum;Or:var t; var sum;orvar t = 2;

32

Untyped Variables • 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

33

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>

34

lecture 6 8/11/11. using div elements to create css layout need to identify your documents sections...

Documents