Introduction To HTML
Uploaded by
Aftab PopatiaIntroduction To HTML
Uploaded by
Aftab PopatiaIntroduction to HTML
Web Technology
A Brief History
IBM wanted to set a documentation system in which we can mark the title, headings, paragraphs and font type selections in the 1980s. They came out with a set of markup system called it General Markup Language (GML).
In 1986, International Standard Organization (ISO) took up this concept and standardized it as Standard Generalized Markup Language (SGML).
In 1989 Tim Berners Lee and his team designed the present form of the documentation language and called it Hyper Text Markup Language (HTML).
Web Technology
What is HTML?
HTML stands for Hyper Text Markup Language Basic tool for designing a web page. Documentation language to mark the headings, title, table and forms. An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor (notepad)
3
Web Technology
The Anatomy of a Web Site:
URLs Uniform Resource Locator : A web address. Ex. www.nirmauni.ac.in Web Servers: A computer, running special software, which always connected to the Internet. Pages: ex. www.nirmauni.ac.in/index.html Web Browsers: Is a piece of software that runs on your PC and enables you to view web pages. Ex. Microsoft Internet Explorer, Mozilla based browsers, Netscape Navigator, etc.
HTML Tags and Basic Page Structure
Web Technology
HTML Tags
HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same
as <B>
6
Web Technology
HTML Elements
Example:1 This is an HTML element: <b>This text is bold</b> Example:2 This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.
Web Technology
Tags Summary
Opening Tag Closing Tag Description <!-<html> <head> --> </html> </head> To put a comment in a HTML document. It will not display in the output. Frames the entire HTML page. Frames the identification information for the page, such as the title, that is transferred to the browser
<body>
<title>
</body>
</title>
Frames the content of the page to be displayed in the browser window
Gives the name of the page that will appear at the top of the browser window. Is contained within <head> and </head>
Web Technology
Headings
Defined with the <h1> to <h6> tags <h1> defines the largest heading <h6> defines the smallest heading <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>
9
Web Technology
Paragraphs
Defined with the <p> tag <p>This is a paragraph</p> <p>This is another paragraph</p> Note: Paragraphs can be written without end tags </p> <p>This is a paragraph <p>This is another paragraph
10
Web Technology
Line Breaks
<br> tag is used when you want to break a line, but don't want to start a new paragraph <p>This <br> is a para<br>graph with line breaks</p> The <br> tag is an empty tag. It has no end tag br> tag written like this: <br /> Because the <br> tag has no end tag
11
Web Technology
Horizontal Rule
The <hr> tag is used to insert a horizontal rule (line) <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph</p>
12
Web Technology
Single Space
The is used when you want to insert a space between words. <p>The hr tag defines a horizontal rule:</p> Example:3
13
Web Technology
Tags Summary
Tag <h1> to <h6> </h1> to </h6> <p></p> <br> <hr> <!--> Description Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule To put a space between words Defines a comment
14
HTML Attributes
Web Technology
HTML Tag Attribute
Provides additional information to an HTML element Attributes always come in name/value pairs like this: name="value". Attributes are always specified in the start tag of an HTML element Example:4 Example:5
16
HTML Text Formatting
Web Technology
HTML Text Formatting
HTML defines a lot of elements for formatting output, like bold or italic text. Example:6 Preformatted Text Example:7 Computer Output Tags Example:8 Address Example:9
18
Web Technology
HTML Text Formatting
Abbreviations and Acronyms Example:10 Text Direction Example:11 Quotation Example:12 Deleted and Inserted Text Example:13
19
Web Technology
Text Formatting Tags
Tag <b> Description Defines bold text
<big>
<em> <i>
Defines big text
Defines emphasized text Defines italic text
<small>
<sub> <sup> <ins> <del>
Defines small text
Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text
20
<strong> Defines strong text
Web Technology
Computer Output Tags
Tag <code> Description Defines computer code text
<kbd> <samp> <tt> <var> <pre>
Defines Defines Defines Defines Defines
keyboard text sample computer code teletype text a variable preformatted text
21
Web Technology
Citations, Quotations, and Definition Tags
Tag Description
<abbr> <acronym> <address> <bdo> <blockquote> <q>
Defines Defines Defines Defines Defines Defines
an abbreviation an acronym an address element the text direction a long quotation a short quotation
22
HTML Fonts
Web Technology
The HTML <font> Tag
You can specify both the size and the type of fonts Example:14 Font Attributes
Attribute size="number" size="+number" size="-number" face="face-name" color="color-value" Example size="2" size="+1" size="-1" face="Times" color="#eeff00" Purpose Defines the font size Increases the font size Decreases the font size Defines the font-name Defines the font color
color="color-name"
color="red"
Defines the font color
24
Web Technology
Font Style and Font Size
Example:15 Example:16
Font Colors
Example:17 Example:18
25
HTML Character Entities
Web Technology
Character Entities
Characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign (<) in HTML, we have to use a character entity. A character entity has three parts: an amp WEersand (&), an entity name or a # and an entity number, and finally a semicolon (;) To display a less than sign in an HTML document we must write: < or < Note that the entities are case sensitive.
27
Web Technology
The Most Common Character Entities
Result Description Entity Name Entity Number   non-breaking space
<
> & " '
less than
greater than ampersand quotation mark apostrophe
<
> & "
<
> & "
' (does not work in IE) '
Example:19
28
Web Technology
Some Other Commonly Used Character Entities
Result Description Entity Name Entity Number
Cent Pound Yen Euro Section copyright registered trademark multiplication division
¢ £ ¥ € § © ® × ÷
¢ £ ¥ € § © ® × ÷
29
HTML Lists
Web Technology
Types of List
Unordered List Ordered Lists Definition lists
31
Web Technology
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>Coffee</li> <li>Milk</li> </ul>
32
Web Technology
Unordered Lists
Here is how it looks in a browser: Coffee Milk Example:27
33
Web Technology
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>Coffee</li> <li>Milk</li> </ol> Here is how it looks in a browser: 1. Coffee 2. Milk
34
Web Technology
Ordered Lists
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Example:28
35
Web Technology
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
36
Web Technology
Definition Lists
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink
37
Web Technology
Definition Lists
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc. Example:29 Example:30 Example:31 Example:32
38
Web Technology
List Tags
Tag <ol> <ul> <li> <dl> <dt> <dd> Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description
39
HTML Background
Web Technology
Background and Text Color
A good background can make a Web site look really great. Example:43 Example:44
41
Web Technology
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
42
Web Technology
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> The lines above all set the background-color to black.
43
Web Technology
Background
The background attribute specifies a backgroundimage for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
44
Web Technology
Background (cont)
<body background="clouds.gif"> <body background="http://www.w3schools.com/clouds. gif"> The URL can be relative (as in the first line above) or absolute (as in the second line above). Example:45 Example:46 Example:47
45
HTML Colors
Web Technology
Color Values
Colors are displayed combining RED, GREEN, and BLUE light sources. HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF).
47
Web Technology
Color Values (cont)
The table below shows the result of combining Red, Green, and Blue light sources.
Color Color HEX Color RGB #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255)
#FF00FF
#C0C0C0 #FFFFFF
rgb(255,0,255)
rgb(192,192,192) rgb(255,255,255)
48
Web Technology
Color Names
The table below provides a list of the color names that are supported by all major browsers. Color Names
49
Web Technology
Color Values
The table below provides a list of the color values that are supported by all major browsers. Color Values
50
HTML Links
Web Technology
Hyperlinks
HTML uses a hyperlink to link to another document on the Web. It is used to create links in an HTML document. Example:20 Images as a link Example:21
52
Web Technology
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: <a href="url">Text to be displayed</a>
53
Web Technology
The Anchor Tag and the Href Attribute (cont)
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This anchor defines a link to Nirma University: <a href="http://www.nirmauni.ac.in">Visit Nirma University!</a>
54
Web Technology
The Target Attribute
With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.nirmauni.ac.in"target="_blank">Vi sit Nirma University!</a>
55
Web Technology
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor: <a name="label">Text to be displayed</a> The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
56
Web Technology
The Anchor Tag and the Name Attribute (cont)
The line below defines a named anchor: <a name="tips">Useful Tips Section</a> You should notice that a named anchor is not displayed in a special way. To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this: <a href="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a> A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: <a href="#tips">Jump to the Useful Tips Section</a>
57
Web Technology
Open a link in a new browser window
Example:22 Link to a location on the same page Example:23 Break out of a frame Example:24 Create a mailto link Example:25 Example:26
58
HTML Images
Web Technology
The Image Tag and the Src Attribute
With HTML you can display images in a document. In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
60
Web Technology
The Image Tag and the Src Attribute
The syntax of defining an image: <img src="url"> The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
61
Web Technology
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat"> The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
62
Web Technology
Example:33 Insert Images from different locations Example:34
63
Web Technology
Background Image
Example:35 Aligning images Example:36 Let the image float Example:37 Adjust images to different sizes Example:38 Display an alternate text for an image Example:39
64
Web Technology
Make a hyperlink of an image Example:40 Create an image map Example:41 Turn an image into an image map Example:42
65
Web Technology
Image Tags
Tag <img> <map> <area> Description Defines an image Defines an image map Defines a clickable area inside an image map
66
HTML Tables
Web Technology
HTML Tables
With HTML you can create tables. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. Example:48
68
Web Technology
Tables and Border Attributes
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute. Example:49
69
Web Technology
Headings in a Table
Headings in a table are defined with the <th> tag Example:50
70
Web Technology
Empty Cells in Table
Table cells with no content are not displayed very well in most browsers. Example:51 Note that the borders around the empty table cell are missing To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible Example:52 Example:53 Example:54
71
Web Technology
More Examples
Table with no borders Example:55 Headings in Table Example:56 Empty Cells Example:57 Table with a caption Example:58
72
Web Technology
More Examples
Table cells that span more than one row/column Example:59 Tags inside a table Example:60 Cell padding Example:61 Cell spacing Example:62
73
Web Technology
More Examples
Add a background color or a background image to a table Example:63 Add a background color or a background image to a table cell Example:64 Align the content in a table cell Example:65 The frame attribute Example:66 The frame and border attributes Example:67
74
Web Technology
Summary of Table Tags
Tag <table> Description Defines a table
<th> <tr> <td> <caption> <colgroup>
<col> <thead> <tbody> <tfoot>
Defines Defines Defines Defines Defines
a table a table a table a table groups
header row cell caption of table columns
Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer
75
HTML Frames
Web Technology
Frames
With frames, you can display more than one Web page in the same browser window. With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page
77
Web Technology
The Frameset Tag
The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy
78
Web Technology
The Frame Tag
The <frame> tag defines what HTML document to put into each frame In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window.
79
Web Technology
The Frame Tag
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").
80
Web Technology
Frameset
Vertical Frameset Example:68 Horizontal Frameset Example:69
81
Web Technology
How to use the <noframes> tag
Example:70
82
Web Technology
Mixed frameset
Example:71
83
Web Technology
Frameset with noresize="noresize"
Example:72
84
Web Technology
Navigation frame
This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. Example:73
85
Web Technology
Inline Frame
Example:74 Jump to a specified section within a frame Example:75 Jump to a specified section with frame navigation Example:76
86
Web Technology
Frame Tags
Tag Description <frameset> Defines a set of frames Defines a sub window <frame> (a frame) Defines a noframe section for browsers <noframes> that do not handle frames <iframe> Defines an inline frame
87
HTML Forms
Web Technology
Form
Form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. <form> <input> <input> </form>
89
Web Technology
Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
90
Web Technology
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
91
Web Technology
Text Fields
How it looks in a browser: First name: Last name: Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.
92
Web Technology
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>
93
Web Technology
Radio Buttons
How it looks in a browser: Male Female Note that only one option can be chosen.
94
Web Technology
Check Boxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> 95 </form>
Web Technology
Check Boxes
<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>
96
Web Technology
Check Boxes
How it looks in a browser: I have a bike: I have a car: I have an airplane:
97
Forms Action Attribute and Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
Web Technology
98
Forms Action Attribute and Submit Button
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> How it looks in a browser: Submit Username:
Web Technology
99
Web Technology
More Examples
Checkboxes Example:77 Radio Buttons Example:78 Simple Drop Down Box Example:79 Example:80 Text Area Example:81
100
Web Technology
More Examples
Create Button Example:82 Input Fields and Submit button Example:83 Form with Checkbox Example:84 Form with Radio Buttons Example:85 Send E-Mail from a form Example:86
101
Cascading Style Sheet
Web Technology
What is CSS?
CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one
103
Web Technology
What is CSS? (cont)
With CSS, your HTML documents can be displayed using different output styles: Example without Style Sheet Example with Style Sheet Example With Style Sheet
104
Web Technology
Style Sheet Types
Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. There are three types of style sheet. Linked Style sheet Embedded Style Sheet Inline Style Sheet
105
Web Technology
Linked Style Sheet
Linked style sheet exist as separate files that are linked to a page with the <link> tag. They have the .css extension and reference with an URL. Inside the CSS file, only the style rules are included. The <link> tag is included within the <Head> tag. Ex. <link rel=stylesheet href=style.css type=text/css> Where rel=stylesheet attribute value explains that the lined file is stylesheet. Type tells the MIME type being used. HREF contains the name of the URL you are targeting to.
106
Web Technology
Embedded Style Sheet
Embedded style sheets are placed within the HTML code of the page where you want to apply it. The style sheet comes between opening and closing <style> tags. These tags are placed either in the <head> section or between the </head> and <body> tags. Ex. <style> <!-BODY {font-family:arial;font-size:20pt} --> </style>
107
Web Technology
Inline Style Sheet
Inline style sheet can be included with most tags as STYLE attribute values. The syntax is to list all style sheet properties in quote marks and each style sheet property is followed by a colon and its value. Several style sheet properties are separated using semicolon. Ex. <p style=font-size:16pt; color:red
108
Web Technology
Cascading Order
What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. Browser default 2. External style sheet (linked style sheet) 3. Internal style sheet (inside the <head> tag) (embedded style sheet) 4. Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
109
Web Technology
CSS Syntax
The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value} The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces: body {color: black}
110
Web Technology
CSS Syntax (cont)
Note: If the value is multiple words, put quotes around the value: p {font-family: "sans serif"} Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color: p {text-align:center;color:red}
111
Web Technology
CSS Syntax (cont)
To make the style definitions more readable, you can describe one property on each line, like this: P { text-align: center; color: black; font-family: arial }
112
Web Technology
CSS Syntax (cont)
Grouping You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 { color: green }
113
Web Technology
CSS Syntax (cont)
CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
114
Web Technology
How to insert Style Sheet
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet: External Style Sheet (Linked) Internal Style Sheet (Embedded) Inline Style Sheet
115
Web Technology
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet type="text/css"href="mystyle.css" /> </head>
116
Web Technology
External Style Sheet (cont)
The browser will read the style definitions from the file mystyle.css, and format the document according to it. An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
117
Web Technology
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this: <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
118
Web Technology
Internal Style Sheet
The browser will now read the style definitions, and format the document according to it. <head> <style type="text/css"> <!--hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}--> </style> </head>
119
Web Technology
Inline Style Sheet
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color: sienna; margin-left: 20px">This is a paragraph</p>
120
Web Technology
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color: red; text-align: left; font-size: 8pt }
121
Web Technology
Multiple Style Sheet
And an internal style sheet has these properties for the h3 selector: h3 { text-align: right; font-size: 20pt } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color: red; text-align: right; font-size: 20pt The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
122
Web Technology
Multiple Style Sheet
<html> <head> <title>style sheet</title> <link rel=stylesheet href=style.css type=text/css> <!-- Linked Style Sheet --> <style> .different style rules will come here.<!-Embedded Style Sheet --> </style> </head> <body> .different html elements come here </body> </html>
123
Web Technology
Style Sheet Examples
Example:90 Example:91
124
Web Technology
CSS Background
Set the background color Set an image as the background How to repeat a background image How to repeat a background image only vertically How to repeat a background image only horizontally How to display a background image only one time How to place the background image How to position a background image using % How to position a background image using pixels How to set a fixed background image All the background properties in one declaration
125
Web Technology
CSS Text
Set the color of the text Set the background-color of the text Specify the space between characters Specify the space between lines Align the text Decorate the text Indent text Control the letters in a text Set the text direction of an element Increase the white space between words Disable text wrapping inside an element
126
Web Technology
CSS Font
Set the font of a text Set a paragraph font using the "caption" value Set the size of the font Set the size of the font using font-size-adjust Set the style of the font Set the variant of the font Set the boldness of the font All the font properties in one declaration
127
Web Technology
CSS Border
All the border properties in one declaration Set different borders on each side All the top border properties in one declaration All the bottom border properties in one declaration All the left border properties in one declaration All the right border properties in one declaration
128
Web Technology
CSS Margin
All the margin properties in one declaration Set the top margin of a text using a cm value Set the top margin of a text using a percent value
129
Web Technology
CSS Padding
All the padding properties in one declaration Set the top padding using a cm value Set the top padding using a percent value
130
Web Technology
CSS Lists
The different list-item markers in unordered lists The different list-item markers in ordered lists Place the list-item marker
131
Web Technology
CSS Table
Set the layout of a table Show empty cells in a table Collapse a table border
132
Web Technology
JAVA SCRIPT
133
Web Technology
Introduction
JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, and Opera.
134
Web Technology
What is JavaScript?
JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license
135
Web Technology
Are Java and JavaScript the Same?
NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
136
Web Technology
What can a JavaScript Do?
JavaScript gives HTML designers a programming tool JavaScript can put dynamic text into an HTML page JavaScript can react to events JavaScript can read and write HTML elements JavaScript can be used to validate data JavaScript can be used to detect the visitor's browser JavaScript can be used to create cookies
137
Web Technology
JavaScripts How To
<script> tag is used to insert a JavaScript into an HTML page. To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we use the "type=" attribute to define the scripting language. So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends. Example JS1
138
Web Technology
<html> <body> <script type="text/javascript"> ... </script> </body> </html>
The word document.write is a standard JavaScript command for writing output to a page. By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line.
139
Web Technology
Write HTML with JavaScript
Example JS2
140
Web Technology
Where to put the JavaScript
JavaScripts in the body section will be executed WHILE the page loads. JavaScripts in the head section will be executed when CALLED Scripts in the Head Section Scripts in the Body Section Scripts in both the Head and Body Section
141
Web Technology
Scripts in the Head Section
Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it. <html> <head> <script type="text/javascript"> ....</script> </head>
142
Web Technology
Scripts in the Body Section
Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page. <html> <head> </head> <body> <script type="text/javascript"> .... </script> </body>
143
Web Technology
Scripts in both Head and Body Section
You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.
<html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript"> .... </script> </body>
144
Web Technology
External JavaScripts
Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page. To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension. Note: The external script cannot contain the <script> tag! To use the external script, point to the .js file in the "src" attribute of the <script> tag.
145
Web Technology
External JavaScripts
<html> <head> <script src="xxx.js"> </script> </head> <body> </body> </html>
Example JS3 Example JS4 Example JS5
146
Web Technology
JavaScripts Statement
JavaScript is a sequence of statements to be executed by the browser. JavaScript is Case Sensitive Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions. A JavaScript statement is a command to the browser. The purpose of the command is to tell the browser what to do.
147
Web Technology
JavaScripts Statement
This JavaScript statement tells the browser to write "Hello World" to the web page: document.write("Hello World") It is normal to add a semicolon at the end of each executable statement. Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web. The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Because of this you will often see examples without the semicolon at the end. Note: Using semicolons makes it possible to write multiple statements on one line.
148
Web Technology
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will write a header and two paragraphs to a web page: <script type="text/javascript"> document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); </script>
149
Web Technology
JavaScripts Blocks
JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and ends with a right curly bracket}. The purpose of a block is to make the sequence of statements execute together. This example will write a header and two paragraphs to a web page:
150
Web Technology
JavaScripts Blocks
<script type="text/javascript"> { document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); } </script> Example JS6 Example JS7
151
Web Technology
JavaScripts Comments
JavaScript comments can be used to make the code more readable. Comments can be added to explain the JavaScript, or to make it more readable. Single line comments start with //. This example uses single line comments to explain the code:
152
Web Technology
<script type="text/javascript"> // This will write a header: document.write("<h1>This is a header</h1>"); // This will write two paragraphs: document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); </script>
153
Web Technology
JavaScripts Multiline Comments
Multi line comments start with /* and end with */. This example uses a multi line comment to explain the code: <script type="text/javascript"> /*The code below will writeone header and two paragraphs*/ document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is anotherparagraph</p>"); </script>
154
Web Technology
In this example the comment is placed at the end of a line: <script type="text/javascript"> document.write("Hello"); // This will write "Hello" document.write("Dolly"); // This will write "Dolly" </script>
155
Web Technology
JavaScript Variable
Variables are "containers" for storing information: x=5; carname="Volvo"; A variable can have a short name, like x, or a more descriptive name like carname. Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter or the underscore character NOTE: Because JavaScript is case-sensitive, variable names are case-sensitive Example JS8
156
Web Technology
Declaration of Variable
Creating variables in JavaScript is most often referred to as "declaring" variables. You can declare JavaScript variables with the var statement: var x; var carname; After the declaration shown above, the variables have no values, but you can assign values to the variables while you declare them: var x=5; var carname="Volvo"; Note: When you assign a text value to a variable, you use quotes around the value.
157
Web Technology
Declaration of Variable
If you assign values to variables that have not yet been declared, the variables will automatically be declared. These statements: x=5; carname="Volvo"; have the same effect as: var x=5; var carname="Volvo"; If you redeclare a JavaScript variable, it will not lose its original value. var x=5; var x; After the execution of the statements above, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it.
158
Web Technology
JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables: y=x-5; z=y+5;
159
Web Technology
JavaScript Operators
The operator = is used to assign values. The operator + is used to add values. The assignment operator = is used to assign values to JavaScript variables. The arithmetic operator + is used to add values together. y=5; z=2; x=y+z;
160
Web Technology
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values. Given that y=5, the table below explains the arithmetic operators:
Operator Description + * / Addition Subtraction Multiplication Division Example Result x=y+2 x=y-2 x=y*2 x=y/2 x=7 x=3 x=10 x=2.5
%
++ --
Modulus (division remainder)
Increment Decrement
x=y%2
x=++y x=--y
x=1
x=6 x=4
161
Web Technology
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5, the table below explains the assignment operators:
Operator Example Same As Result
=
+= -= *=
x=y
x+=y x-=y x*=y x=x+y x=x-y x=x*y
x=5
x=15 x=5 x=50
/=
%=
x/=y
x%=y
x=x/y
x=x%y
x=2
x=0
162
Web Technology
The + Operator Used on Strings
The + operator can also be used to add string variables or text values together. To add two or more string variables together, use the + operator. txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; After the execution of the statements above, the variable txt3 contains "What a verynice day".
163
Web Technology
The + Operator Used on Strings
To add a space between the two strings, insert a space into one of the strings: txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; or insert a space into the expression: txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; After the execution of the statements above, the variable txt3 contains: "What a very nice day"
164
Web Technology
Adding Strings and Numbers
Look at these examples: x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); The rule is: If you add a number and a string, the result will be a string. Example JS9
165
Web Technology
JavaScript Comparisons and Logical Operators
Comparison and Logical operators are used to test for true or false. Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operators:
166
Web Technology
Comparison Operators
Operator Description == === is equal to is exactly equal to (value and type) is not equal Example x==8 is false x===5 is true x==="5" is false x!=8 is true
!=
>
< >= <=
is greater than
is less than is greater than or equal to is less than or equal to
x>8 is false
x<8 is true x>=8 is false x<=8 is true
167
Web Technology
Logical Operators
Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators:
Operator Description Example
&&
|| !
and
or not
(x < 10 && y > 1) is true
(x==5 || y==5) is false !(x==y) is true
168
Web Technology
Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax variablename=(condition)?value1:value2 Example greeting=(visitor=="PRES")?"Dear President ":"Dear "; If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President " else it will be assigned "Dear".
169
Web Technology
JavaScript ifelse statements
Conditional statements in JavaScript are used to perform different actions based on different conditions. Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript we have the following conditional statements: if statement if...else statement if...else if....else statement switch statement
170
Web Technology
If Statement
You should use the if statement if you want to execute some code only if a specified condition is true. Syntax: if (condition) { code to be executed if condition is true } Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!
171
Web Technology
If...else Statement
If you want to execute some code if a condition is true and another code if the condition is not true, use the if....else statement. Syntax: if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }
172
Web Technology
If...else if...else Statement
You should use the if....else if...else statement if you want to select one of many sets of lines to execute. Syntax:
if (condition1) {
} else if (condition2) {
} else { }
code to be executed if condition1 is true
code to be executed if condition2 is true
code to be executed if condition1 andcondition2 are not true
173
Web Technology
Switch Statement
Switch statement in JavaScript is used to perform different actions based on different conditions. You should use the switch statement if you want to select one of many blocks of code to be executed.
switch(n) { case 1:
break; case 2: break; default: }
execute code block 1 execute code block 2 code to be executed if n is different from case 1 and 2
174
Web Technology
Examples
Example JS10 Example JS11 Example JS12 Example JS13 Example JS14
175
Web Technology
JavaScript Popup Boxes
In JavaScript we can create three kinds of popup boxes Alert box Confirm box Prompt box.
176
Web Technology
Alert Box
An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Syntax: alert("sometext");
177
Web Technology
Confirm Box
A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax: confirm("sometext");
178
Web Technology
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax: prompt("sometext","defaultvalue");
179
Web Technology
Example JS15 Example JS16 Example JS17 Example JS18
180
Web Technology
JavaScript Functions
A function is a reusable code-block that will be executed by an event, or when the function is called. To keep the browser from executing a script when the page loads, you can put your script into a function. A function contains code that will be executed by an event or by a call to that function. You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file). Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the <head> section.
181
Web Technology
How to Define a Function
The syntax for creating a function is: function functionname(var1,var2,...,varX) { some code } var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of the function. Note: A function with no parameters must include the parentheses () after the function name: function functionname() {some code}
182
Web Technology
The return Statement
The return statement is used to specify the value that is returned from the function. So, functions that are going to return a value must use the return statement. Example The function below should return the product of two numbers (a and b): function prod(a,b) { x=a*b;return x; }
183
Web Technology
The Lifetime of JavaScript Variables
When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared. If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.
184
Web Technology
Example JS19 Example JS20 Example JS21 Example JS22 Example JS23
185
Web Technology
JavaScript Loop
Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true. Very often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this. In JavaScript there are two different kind of loops: for - loops through a block of code a specified number of times while - loops through a block of code while a specified condition is true
186
Web Technology
The for Loop
The for loop is used when you know in advance how many times the script should run. Syntax for(var=startvalue;var<=endvalue;var=var+increment) { code to be executed }
187
Web Technology
The while loop
The while loop is used when you want the loop to execute and continue executing while the specified condition is true. Syntax: while (var<=endvalue) { code to be executed }
188
Web Technology
The do...while Loop
The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will repeat the loop as long as the specified condition is true. This loop will always be executed at least once, even if the condition is false, because the code is executed before the condition is tested. Syntax: do { code to be executed }while (var<=endvalue);
189
Web Technology
Example JS24 Example JS25 Example JS26 Example JS27
190
Web Technology
JavaScript Break and Conitinue Statement
There are two special statements that can be used inside loops: break and continue. The break command will break the loop and continue executing the code that follows after the loop (if any). The continue command will break the current loop and continue with the next value. Example JS28 Example JS29
191
Web Technology
JavaScript forin statement
The for...in statement is used to loop (iterate) through the elements of an array or through the properties of an object. The code in the body of the for ... in loop is executed once for each element/property. Syntax for (variable in object) { code to be executed } Example JS30
192
Web Technology
JavaScript Events
Events are actions that can be detected by JavaScript. By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
193
Web Technology
Events
Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke
194
Web Technology
Onload and Onunload
The onload and onUnload events are triggered when the user enters or leaves the page. The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".
195
Web Technology
onFocus, onBlur and onChange
The onFocus, onBlur and onChange events are often used in combination with validation of form fields. Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field: <input type="text" size="30"id="email" onchange="checkEmail()">
196
Web Technology
onSubmit
The onSubmit event is used to validate ALL form fields before submitting it. Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled: <form method="post" action="xxx.htm"onsubmit="return checkForm()">
197
Web Technology
onMouseOver and onMouseOut
onMouseOver and onMouseOut are often used to create "animated" buttons. Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected: <a href=http://www.w3schools.com onmouseover="alert('An onMouseOver event'); return false"> <img src="w3schools.gif" width="100 height="30"></a>
198
Web Technology
JavaScript Special Characters
In JavaScript you can add special characters to a text string by using the backslash sign. The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string. Look at the following JavaScript code: var txt="We are the so-called "Vikings" from the north."; document.write(txt);
199
Web Technology
JavaScript Special Characters
In JavaScript, a string is started and stopped with either single or double quotes. This means that the string above will be chopped to: We are the so-called To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal: var txt="We are the so-called \"Vikings\" from the north."; document.write(txt);
200
Web Technology
JavaScript Special Characters
Here is another example: document.write ("You \& I are singing!"); The example above will produce the following output: You & I are singing!
201
Web Technology
JavaScript Special Characters
Code
\' \" \& \\ \n \r \t \b
Outputs
single quote double quote ampersand backslash new line carriage return tab backspace
\f
form feed
202
Web Technology
JavaScript Guidelines
JavaScript is Case Sensitive A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar". JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions.
203
Web Technology
White Space
JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent: name="Hege"; name = "Hege";
204
Web Technology
Break up a Code Line
You can break up a code line within a text string with a backslash. The example below will be displayed properly: document.write("Hello \World!"); However, you cannot break up a code line like this: document.write \("Hello World!");
205
Web Technology
JavaScript String Objects
JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types. JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types.
206
Web Technology
Properties
Properties are the values associated with an object. In the following example we are using the length property of the String object to return the number of characters in a string: <script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script> The output of the code above will be: 12
207
Web Technology
Methods
Methods are the actions that can be performed on objects. In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters: <script type="text/javascript"> var str="Hello world!"; document.write(str.toUpperCase()); </script> The output of the code above will be: HELLO WORLD!
208
Web Technology
JavaScript String Object
String object is used to manipulate a stored piece of text. The following example uses the length property of the String object to find the length of a string: var txt="Hello world!"; document.write(txt.length); The code above will result in the following output: 12
209
Web Technology
JavaScript String Object
The following example uses the toUpperCase() method of the String object to convert a string to uppercase letters: var txt="Hello world!"; document.write(txt.toUpperCase()); The code above will result in the following output: HELLO WORLD!
210
Web Technology
JavaScript String Object
Example JS31 Example JS32 Example JS33 Example JS34 Example JS35
211
Web Technology
JavaScript Date Object
The Date object is used to work with dates and times. The Date object is used to work with dates and times. The following code create a Date object called myDate: var myDate=new Date()
212
Web Technology
Set Date
We can easily manipulate the date by using the methods available for the Date object. In the example below we set a Date object to a specific date (14th January 2010): var myDate=new Date(); myDate.setFullYear(2010,0,14); And in the following example we set a Date object to be 5 days into the future: var myDate=new Date(); myDate.setDate(myDate.getDate()+5);
213
Web Technology
Comparing Two Dates
The Date object is also used to compare two dates. The following example compares today's date with the 14th January 2010:
var myDate=new Date(); myDate.setFullYear(2010,0,14); var today = new Date(); if (myDate>today) { alert("Today is before 14th January 2010"); } Else { alert("Today is after 14th January 2010"); }
214
Web Technology
Date Object
Example 36 Example 37 Example 38 Example 39
215
Web Technology
JavaScript Array Object
The Array object is used to store multiple values in a single variable.
216
Web Technology
Create an Array
The following code creates an Array object called myCars: var myCars=new Array() There are three ways of adding values to an array (you can add as many values as you need to define as many variables you require).
217
Web Technology
Create an Array
1:
var myCars=new Array(); mycars[0]="Saab"; mycars[1]="Volvo"; mycars[2]="BMW";
2:
var myCars=new Array(3); mycars[0]="Saab"; mycars[1]="Volvo"; mycars[2]="BMW";
3: var myCars=new Array("Saab","Volvo","BMW");
218
Web Technology
Access an Array
You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. The following code line: document.write(myCars[0]); will result in the following output: Saab
219
Web Technology
Modify Values in an Array
To modify a value in an existing array, just add a new value to the array with a specified index number: myCars[0]="Opel"; Now, the following code line: document.write(myCars[0]); will result in the following output: Opel
220
Web Technology
Array Object
Example JS40 Example JS41 Example JS42 Example JS43 Example JS44 Example JS45
221
Web Technology
JavaScript Boolean Object
The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false). The Boolean object represents two values: "true" or "false". The following code creates a Boolean object called myBoolean: var myBoolean=new Boolean();
222
Web Technology
Boolean Object
All the following lines of code create Boolean objects with an initial value of false: var myBoolean=new Boolean(); var myBoolean=new Boolean(0); var myBoolean=new Boolean(null); var myBoolean=new Boolean(""); var myBoolean=new Boolean(false); var myBoolean=new Boolean(NaN);
223
Web Technology
Boolean Object
And all the following lines of code create Boolean objects with an initial value of true: var myBoolean=new Boolean(true); var myBoolean=new Boolean("true"); var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard"); Example JS46
224
Web Technology
JavaScript Math Object
The Math object allows you to perform mathematical tasks. The Math object includes several mathematical constants and methods. Syntax for using properties/methods of Math: var pi_value=Math.PI; var sqrt_value=Math.sqrt(16);
225
Web Technology
Mathematical Constants
JavaScript provides eight mathematical constants that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E. You may reference these constants from your JavaScript like this: Math.E Math.PI Math.SQRT Math.LN2 Math.LOG2E
226
Web Technology
Mathematical Methods
In addition to the mathematical constants that can be accessed from the Math object there are also several methods available. The following example uses the round() method of the Math object to round a number to the nearest integer: document.write(Math.round(4.7)); The code above will result in the following output: 5
227
Web Technology
Mathematical Methods
The following example uses the random() method of the Math object to return a random number between 0 and 1: document.write(Math.random()); The code above can result in the following output: 0.6667798225151624 The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10: document.write(Math.floor(Math.random()*11)); The code above can result in the following output: 3
228
Web Technology
Math Object
Example JS47 Example JS48 Example JS49 Example JS50
229
Web Technology
JavaScript RegExp object
RegExp, is short for regular expression. When you search in a text, you can use a pattern to describe what you are searching for. RegExp IS this pattern. A simple pattern can be a single character. A more complicated pattern consists of more characters, and can be used for parsing, format checking, substitution and more. You can specify where in the string to search, what type of characters to search for, and more.
230
Web Technology
Defining RegExp
The RegExp object is used to store the search pattern. We define a RegExp object with the new keyword. The following code line defines a RegExp object called patt1 with the pattern "e": var patt1=new RegExp("e"); When you use this RegExp object to search in a string, you will find the letter "e".
231
Web Technology
Methods of the RegExp Object
The RegExp Object has 3 methods: test(), exec(), and compile().
232
Web Technology
test() method
The test() method searches a string for a specified value. Returns true or false Example: var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); Since there is an "e" in the string, the output of the code above will be: True Example JS51
233
Web Technology
exec() method
The exec() method searches a string for a specified value. Returns the text of the found value. If no match is found, it returns null Example: var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free")); Since there is an "e" in the string, the output of the code above will be: E Example JS52 Example JS53
234
Web Technology
compile() method
The compile() method is used to change the RegExp. compile() can change both the search pattern, and add or remove the second parameter. Example: var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); patt1.compile("d"); document.write(patt1.test("The best things in life are free")); Since there is an "e" in the string, but not a "d", the output of the code above will be: Truefalse Example JS54
235
Web Technology
JavaScript DOM
In addition to the built-in JavaScript objects, you can also access and manipulate all of the HTML DOM objects with JavaScript.
Object Window Description The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag Contains information about the client's browser Contains information about the client's display screen Contains the visited URLs in the browser window Contains information about the current URL
236
Navigator Screen History Location
Web Technology
HTML DOM
The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a treestructure (a node tree), with elements, attributes, and text.
237
Web Technology
238
Web Technology
JavaScript Browser Detection
The Navigator Object The JavaScript Navigator object contains all information about the visitor's browser. There are two properties of the Navigator object: appName - holds the name of the browser appVersion - holds, among other things, the version of the browser Example JS55 Example JS56 Example JS57 Example JS58
239
Web Technology
JavaScript Cookies
A cookie is often used to identify a user. A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values
240
Web Technology
JavaScript Cookies
Name cookie - The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like "Welcome John Doe!" The name is retrieved from the stored cookie Password cookie - The first time a visitor arrives to your web page, he or she must fill in a password. The password is then stored in a cookie. Next time the visitor arrives at your page, the password is retrieved from the cookie
241
Web Technology
Create and Store Cookies
Example JS59
242
Web Technology
JavaScript Form Validation
JavaScript can be used to validate input data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: has the user left required fields empty? has the user entered a valid e-mail address? has the user entered a valid date? has the user entered text in a numeric field? Example JS60 Example JS61
243
Web Technology
VB Script
244
Web Technology
Introduction
What is VBScript?
VBScript is a scripting language A scripting language is a lightweight programming language VBScript is a light version of Microsoft's programming language Visual Basic
How Does it Work?
When a VBScript is inserted into a HTML document, the Internet browser will read the HTML and interpret the VBScript. The VBScript can be executed immediately, or at a later event.
245
Web Technology
How to Put VBScript Code in an HTML Document
<html> <head> </head> <body> <script type="text/vbscript"> document.write("Hello from VBScript!") </script> </body> </html> And it produces this output: Hello from VBScript!
246
Web Technology
Where to put the VB Script
Scripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.
247
Web Technology
Scripts in the head section:
Scripts to be executed when they are called or when an event is triggered go in the head section. When you place a script in the head section you will assure that the script is loaded before anyone uses it: <html> <head> <script type="text/vbscript"> some statements </script> </head>
248
Web Technology
Scripts in the body section:
Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page: <html> <head> </head> <body> <script type="text/vbscript"> some statements </script> </body>
249
Web Technology
Variable in VB Script
What is a Variable?
A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. In VBScript, all variables are of type variant, that can store different types of data.
What is a Variable? Must begin with a letter Cannot contain a period (.) Cannot exceed 255 characters
250
Web Technology
Declaring Variables
You can declare variables with the Dim, Public or the Private statement. Like this: dim namename=some value You can also declare variables by using its name in your script. Like this: name=some value
251
Web Technology
you can misspell the variable name later in your script, and that can cause strange results when your script is running. This is because when you misspell for example the "name" variable to "nime" the script will automatically create a new variable called "nime". To prevent your script from doing this you can use the Option Explicit statement. When you use this statement you will have to declare all your variables with the dim, public or private statement. option explicit dim name name=some value
252
Web Technology
Assigning Values to Variables
You assign a value to a variable like this: name="Hege i=200 The variable name is on the left side of the expression and the value you want to assign to the variable is on the right.
253
Web Technology
Lifetime of Variables
When you declare a variable within a procedure, the variable can only be accessed within that procedure. When the procedure exits, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different procedures, because each is recognized only by the procedure in which it is declared. If you declare a variable outside a procedure, all the procedures on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.
254
Web Technology
Array Variable
you can create a variable that can contain a series of values. This is called an array variable. The declaration of an array variable uses parentheses ( ) following the variable name. dim names(2) You assign data to each of the elements of the array like this: names(0)="Tove names(1)="Jani names(2)="Stale"
255
Web Technology
VBScript Procedures
We have two kinds of procedures Sub procedure Function procedure.
256
Web Technology
A Sub procedure
is a series of statements, enclosed by the Sub and End Sub statements can perform actions, but does not return a value can take arguments that are passed to it by a calling procedure without arguments, must include an empty set of parentheses ()
Sub mysub() some statements End Sub or Sub mysub(argument1,argument2) some statements End Sub
257
Web Technology
A Function procedure
is a series of statements, enclosed by the Function and End Function statements can perform actions and can return a value can take arguments that are passed to it by a calling procedure without arguments, must include an empty set of parentheses () returns a value by assigning a value to its name
258
Web Technology
Function myfunction() some statements myfunction=some value End Function or Function myfunction(argument1,argument2) some statements myfunction=some value End Function
259
Web Technology
Call a Sub or Function Procedure
When you call a Function in your code, you do like this: name = findname() or msgbox "Your name is " & findname() When you call a Sub procedure you can use the Call statement, like this: Call MyProc(argument) or MyProc argument
260
Web Technology
Conditional Statements
In VBScript we have four conditional statements: if statement if...then...else statement if...then...elseif statement select case statement
261
Web Technology
If....Then.....Else
If you want to execute only one statement if i=10 Then msgbox "Hello" If you want to execute more than one statement if i=10 Then msgbox "Hello" i = i+1 end If
262
Web Technology
If you want to execute a statement if a condition is true and execute another statement if the condition is not true, you must add the "Else" keyword: if i=10 then msgbox "Hello else msgbox "Goodbye end If
263
Web Technology
If....Then.....Elseif
You can use the if...then...elseif statement if you want to select one of many blocks of code to execute:
if payment="Cash" then msgbox "You are going to pay cash!" elseif payment="Visa" then msgbox "You are going to pay with visa." elseif payment="AmEx" then msgbox "You are going to pay with American Express." else msgbox "Unknown method of payment. end If
264
Web Technology
Select Case
You can also use the SELECT statement if you want to select one of many blocks of code to execute:
select case payment case "Cash" msgbox "You are going to pay cash" case "Visa" msgbox "You are going to pay with visa" case "AmEx" msgbox "You are going to pay with American Express" case Else msgbox "Unknown method of payment end select
265
Web Technology
Looping Statements
In VBScript we have four looping statements: For...Next statement For Each...Next statement Do...Loop statement While...Wend statement
266
Web Technology
For...Next Loop
You can use a For...Next statement to run a block of code For i=1 to 10 some code Next Using the Step keyword, you can increase or decrease the counter variable by the value you specify For i=2 To 10 Step 2 some code Next You can exit a For...Next statement with the Exit For keyword.
267
Web Technology
For Each...Next Loop
A For Each...Next loop repeats a block of code for each item in a collection, or for each element of an array.
dim cars(2) cars(0)="Volvo cars(1)="Saab cars(2)="BMW For Each x in cars document.write(x & "<br />") Next
268
Web Technology
Do...Loop
You can use Do...Loop statements to run a block of code when you do not know how many repetitions you want. The block of code is repeated while a condition is true or until a condition becomes true. Repeating Code While a Condition is True You use the While keyword to check a condition in a Do...Loop statement. Do While i>10 some code Loop
269
Web Technology
If i equals 9, the code inside the loop above will never be executed. Do some code Loop While i>10 The code inside this loop will be executed at least one time, even if i is less than 10.
270
Web Technology
Repeating Code Until a Condition Becomes True
You use the Until keyword to check a condition in a Do...Loop statement. Do Until i=10 some code Loop If i equals 10, the code inside the loop will never be executed. Do some code Loop Until i=10 The code inside this loop will be executed at least one time, even if i is equal to 10.
271
Web Technology
Exit a Do...Loop
You can exit a Do...Loop statement with the Exit Do keyword. Do Until i=10 i=i-1 If i<10 Then Exit Do Loop
272
Web Technology
VB Script Functions and Keywords
See VB Script Functions See VB Script Keywords
273
Web Technology
Active Server Pages
274
Web Technology
Introduction
An ASP file can contain text, HTML tags and scripts. Scripts in an ASP file are executed on the server What is ASP? ASP stands for Active Server Pages ASP is a program that runs inside IIS IIS stands for Internet Information Services IIS comes as a free component with Windows XP ,Windows 2000 The Option Pack can be downloaded from Microsoft PWS is a smaller - but fully functional - version of IIS PWS can be found on your Windows 95/98 CD
275
Web Technology
ASP Compatibility ASP is a Microsoft Technology To run IIS you must have Windows NT 4.0 or later To run PWS you must have Windows 95 or later What is an ASP File? An ASP file is just the same as an HTML file An ASP file can contain text, HTML, XML, and scripts Scripts in an ASP file are executed on the server An ASP file has the file extension ".asp"
276
Web Technology
How Does ASP Differ from HTML? When a browser requests an HTML file, the server returns the file When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP engine reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file is returned to the browser as plain HTML
277
Web Technology
What can ASP do for you? Dynamically edit, change or add any content of a Web page Respond to user queries or data submitted from HTML forms Access any data or databases and return the results to a browser Customize a Web page to make it more useful for individual users The advantages of using ASP instead of CGI and Perl, are those of simplicity and speed Provide security since your ASP code can not be viewed from the browser Clever ASP programming can minimize the network traffic
278
Web Technology
Run ASP on Your PC
You can run ASP on your own PC without an external server. To do that, you must install Microsoft's Personal Web Server (PWS) or Internet Information Services (IIS) on your PC. you should have at least Windows 98, Second Edition install ASP. You should go for Windows XP or Windows 2000.
279
Web Technology
How to install IIS and run ASP on Windows XP Professional
1. Insert the Windows XP Professional CD-Rom into your CD-Rom Drive 2. From your Start Button, go to Settings, and Control Panel 3. In the Control Panel window select Add/Remove Programs 4. In the Add/Remove window select Add/Remove Windows Components 5. In the Wizard window check Internet Information Services, click OK 6. An Inetpub folder will be created on your harddrive 7. Open the Inetpub folder, and find a folder named wwwroot 8. Create a new folder, like "MyWeb", under wwwroot. 9. Use a text editor to write some ASP code, save the file as "test1.asp" in the "MyWeb" folder 10. Make sure your Web server is running - its status can be checked by going into the Control Panel, then Administrative Tools, and double-click the "IIS Manager" icon 11. Open your browser and type in "http://localhost/MyWeb/test1.asp", to view your first ASP page
280
Web Technology
ASP Syntax
You cannot view the ASP source code by selecting "View source" in a browser, you will only see the output from the ASP file, which is plain HTML. This is because the scripts are executed on the server before the result is sent back to the browser. In our ASP tutorial, every example displays the hidden ASP source code. This will make it easier for you to understand how it works.
281
Web Technology
The Basic Syntax Rule
An ASP file normally contains HTML tags, just like an HTML file. However, an ASP file can also contain server scripts, surrounded by the delimiters <% and %>. Server scripts are executed on the server, and can contain any expressions, statements, procedures, or operators valid for the scripting language you prefer to use.
282
Web Technology
Write Output to a Browser
The response.write command is used to write output to a browser.
<html> <body> <%response.write("Hello World!")%> </body> </html> <html> <body> <%="Hello World!"%> </body> </html>
283
Web Technology
VBScript
You can use several scripting languages in ASP. However, the default scripting language is VBScript: Example 1.asp Example 2.asp
284
You might also like
- Comparative Analysis of Management Strategies Adopted by European & American CompaniesNo ratings yetComparative Analysis of Management Strategies Adopted by European & American Companies1 page
- Report On Analysis On Management StrategiesNo ratings yetReport On Analysis On Management Strategies1 page
- Board of Technical Education Khyber Pakhtunkhwa Dit Project by100% (1)Board of Technical Education Khyber Pakhtunkhwa Dit Project by46 pages
- Lab Manual Of: Static Web Page Development (3320703)No ratings yetLab Manual Of: Static Web Page Development (3320703)51 pages
- Introduction To Programming: Engr. Rashid Farid Chishti100% (1)Introduction To Programming: Engr. Rashid Farid Chishti64 pages
- Active Directory Rights Delegation - OverviewNo ratings yetActive Directory Rights Delegation - Overview18 pages
- Explain Different Types of Data Structures and Their Applications…No ratings yetExplain Different Types of Data Structures and Their Applications…11 pages
- Cosc 2022 (First Semester) - Class Schedule-New (Current)No ratings yetCosc 2022 (First Semester) - Class Schedule-New (Current)9 pages
- Manufacturing Enterprise Systems: Submitted byNo ratings yetManufacturing Enterprise Systems: Submitted by28 pages
- Chinhoyi University of Technology: School of Business Sciences and Management Department of Business ManagementNo ratings yetChinhoyi University of Technology: School of Business Sciences and Management Department of Business Management17 pages
- How To Access GPIO Pins On A Cubieboard 2No ratings yetHow To Access GPIO Pins On A Cubieboard 23 pages
- S.S.S. SAMITI's S.A.M. D. Higher Secondary School of ScienceNo ratings yetS.S.S. SAMITI's S.A.M. D. Higher Secondary School of Science5 pages
- C Program To Implement Infix To Postfix Expression Conversion Algorithm100% (2)C Program To Implement Infix To Postfix Expression Conversion Algorithm3 pages
- Course Code: CSE 326 Internet Programming LaboratoryNo ratings yetCourse Code: CSE 326 Internet Programming Laboratory62 pages
- HTML, CSS, & JavaScript All-In-One For Dummies Cheat SheetNo ratings yetHTML, CSS, & JavaScript All-In-One For Dummies Cheat Sheet8 pages
- 09 Power Logic EGX Ethernet Gateway Instruction EngNo ratings yet09 Power Logic EGX Ethernet Gateway Instruction Eng17 pages
- Project Profile:: Title Online Accounto & Profito Mngmt. SystemNo ratings yetProject Profile:: Title Online Accounto & Profito Mngmt. System4 pages
- Kimberly Carter - Resume - 2 Page 091109No ratings yetKimberly Carter - Resume - 2 Page 0911093 pages
- HTML 101: Introduction To HTML: LC Notebook Tab VIINo ratings yetHTML 101: Introduction To HTML: LC Notebook Tab VII18 pages
- Module 6 - Introduction To Hypertext PreprocessorNo ratings yetModule 6 - Introduction To Hypertext Preprocessor19 pages
- CS2223: Algorithms Greedy Algorithms 1 Greedy Algorithm FundamentalsNo ratings yetCS2223: Algorithms Greedy Algorithms 1 Greedy Algorithm Fundamentals4 pages
- Introduction To Web Technology: Unit 3 HTMLNo ratings yetIntroduction To Web Technology: Unit 3 HTML49 pages
- A Powerful Solution at A Predictable Price: Pricing Information For Sap® Business Bydesign™No ratings yetA Powerful Solution at A Predictable Price: Pricing Information For Sap® Business Bydesign™2 pages
- Bridging The Gap: A Study of Hybrid Web Application (Web 2.0 + Web 3.0) and User Perspective On It.100% (1)Bridging The Gap: A Study of Hybrid Web Application (Web 2.0 + Web 3.0) and User Perspective On It.7 pages
- Oracle R12 Apps - Order Management Tables & Descriptions: EnteredNo ratings yetOracle R12 Apps - Order Management Tables & Descriptions: Entered3 pages
- EN 1993-1:2005/AC:2009, Eurocode 3: Design of Steel StructuresNo ratings yetEN 1993-1:2005/AC:2009, Eurocode 3: Design of Steel Structures3 pages
- Outcomes-Based Teaching and Learning Plan For Web Design: Binangonan Catholic CollegeNo ratings yetOutcomes-Based Teaching and Learning Plan For Web Design: Binangonan Catholic College6 pages
- MKTG 201-Principles of Marketing-Sarah Suneel SarfrazNo ratings yetMKTG 201-Principles of Marketing-Sarah Suneel Sarfraz6 pages
