Lecture 6

Transcript Lecture 6

Lecture 6
8/11/11
Using Div Elements to create
CSS layout
• Need to identify your
documents sections
• Header
• Content
• Footer
#header
#content
#container
Basic div structure used to make a
single column layout
#footer
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 ExampleOne column layout
#container
{
width: 550px;
background-color: #ffffff;
}
#header
{
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

#content
{
padding: 10 20px;
background-color: #cccccc;
}
#footer
{
padding: 10 20px;
background-color: #999999;
}
</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: The absolute units are:
em: the 'font-size' of in: inches -- 1 inch is
the relevant font
equal to 2.54
ex: the 'x-height' of the centimeters.
relevant font
cm: centimeters
px: pixels, relative to mm: millimeters
the viewing device
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.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.
8
9
Z-index Attribute
 Allows you to properly layer overlapping
elements
• <html>
 Elements that have a higher z-index value are • <head><title>Absolute
displayed in front of elements with a lower
positioning</title>
value
• </head>
 If you do not specify this value, elements that • <body>
occur later in the document are displayed in
front of those that occur earlier
• <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; zindex: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.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
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 Types
First character must be a letter or an underscore _
• Examples of Variables
t
My first variable
IS6116
_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 them
var t;
var sum;
Or:
var t; var sum;
or
var 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

Transcript Lecture 6

Directory