Lec 01 Web Eng-1

Web Engineering
Lecture 01
Instructor: Shahab Ul Islam

Email: shahab@inu.edu.pk
1
Shahab Ul Islam
 BS(Information Technology) IBMS UAP 2012
 MS(Information Technology) IBMS UAP 2016
 (Gold Medalist)
 Lecturer / IT Incharge (IPS) 2014-2016

 Lecturer Computer Science (INU) 2017
 Visiting Lecturer (IBMS)
2
A Nice Saying
 I keep 6 honest serving men.
 They taught me all I knew.
 Their names are:
 WHAT and WHY and WHEN and HOW and WHERE and
WHO.
 (R. Kipling)
And believe me,

on the road of learning,
these are your best companions.
3
Let start the Course…..
4
Web Engineering
Web Engineering – is the application of systematic,
disciplined and quantifiable approaches to the design,
production, deployment, operation, maintenance and
evolution of Web-based software products.
[IEEE, 1993]
5
6
World Wide Web
 It is a collection of textual documents and other
resources, linked by hyperlinks and URLs,
transmitted by web browsers and web servers.
 It is also an application "running" on the Internet.
 Viewing a web page on the World Wide Web
normally begins either by typing the URL of the
page into a web browser
7
WWW Structure
 Clients use browser application to send URIs via HTTP to

servers requesting a Web page
 Web pages constructed using HTML (or other markup
language) and consist of text, audio or video files
 Servers (or caches) respond with requested Web page
Or with error message
 Client’s browser displays Web page returned by server
 Page is written using Hyper Text Markup Language
(HTML)
 Displaying text, graphics and sound in browser
 Writing data as well
8
Clients and Servers
 HTTP is a Protocol for client/server communication
 The Web is a client/server application: Web browsers are clients

which send requests to Web servers, which send responses back.
9
Uniform Resource Locators (URLs)
 Without a universal addressing mechanism, it

would be impossible to navigate to a site, and page
linking would not be feasible
 Uniform Resource Locators (URLs) are used to
identify Web pages — basically a URL is a web
address
 URLs have 3 components:
 A Prefix (usually http:// )
 A Hostname: (such as www.cityu.edu.hk)
 A Path: (such as /scm/index.htm)
10
Uniform Resource Locators (URLs)
 Example:
 http://www.cityu.edu.hk/scm/index.htm
Path
Identifies a file within a
hierarchical directory
Host name
structure on the server
Identifies a particular
computer somewhere on the
Prefix Internet
The transfer protocol

required to request data
from the server
11
IP Addresses and DNS
 Every computer connected to the Internet must
have a unique IP address, no matter whether it’s a
client or a server (or both)
 An IP address is just a number that identifies a host
on the Internet. Example:
 212.171.218.34 or 144.214.5.218
 The Domain Name System (DNS) is a database that
matches IP addresses to host names
 How many classes of IP addresses exists?

12
Server Software
 Just connecting a computer to the Internet and
giving it an IP address does not make it a web
server. Server computers have to run special web
server software to open TCP connections and
respond to HTTP requests.
 The two most common web server applications are:
 Apache (UNIX-based, open source)
 IIS - Internet Information Services (Microsoft) 36%*
13
WWW Working
 Browser resolves the server-name portion of the URL
(en.wikipedia.org) into an Internet Protocol address using
DNS.
 DNS or Domain Name System (DNS) is a globally
distributed database.
 Returns an IP address such as 208.80.152.2.
 The browser then requests the resource by sending an
HTTP request across the Internet to the computer at that
particular address.
 The computer receiving the HTTP request delivers it to
Web server software listening for requests on port 80.
14
HTML
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup
language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
 HTML tags are keywords surrounded by angle brackets like
<html>
 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
 Start and end tags are also called opening tags and closing
tags
15
Best free web development IDE for JavaScript,
HTML and CSS
 Notepad++
 Dreamweaver
 webuilder
 Light Table
 Netbeans
 Brackets
 Komodo Edit
16
HTML Documents = Web Pages
 HTML documents are also called web pages

 The purpose of a web browser (like Internet Explorer or Firefox)
is to read HTML documents and display them as web pages.
 The browser does not display the HTML tags, but uses the tags
to interpret the content of the page.
Example
<html>
<head>
<title> Page Title Goes Here </title>
</head>
<body>
content goes here
</body>
</html>
17
Creating and saving Webpages
 Open Notepad (notepad++)
 Write your code
 Once you finished the content, click on File ->
Save
 Give a file name e.g myfirstpage.html
 Click on Save
 Run your webpage where it is stored.
18
HTML Tags
 HTML Headings
<h1>This is a heading</h1>
 HTML Paragraphs
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
 HTML Elements
An HTML element is everything from the start tag to the end
tag:
19
HTML Tags
 <b> bold text
 <big> big text
 <small> small
 <i> italic
 <em> emphasized
 <sub> subcripted
 <sup> superscripted
 <img src="smiley.gif" alt="HTML tutorial" width=“20"
height=“20" />
 <a href="http://www.yahoo.com/">Yahoo</a>
20
HTML Attributes
 HTML elements can have attributes

 Attributes provide additional information about an
element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs
like: name="value"
21
HTML Forms
- Forms are used in the creation of interactive features.
- Forms added new features to HTML Page.
- Forms include
- Comment Response Form
- Order entry form
- Subscription Form
- Registration form
22
How Forms are used in HTML
 Once a form is filled , the specified data in different fields are sent to some where
(specified by a URL) .
 A program on remote web server will then parse the submitted information and do
something with it.
 The program that handle the incoming form submitted data usually are Common
Gateway Interface (CGI).
Web server CGI Application

Browser
Request page > Run CGI >
< CGI Output < CGI Output
23
HTML Forms cont….
- Form contain
- regular text
- HTML elements like tables
- Forms elements like check boxes, pull down menus and text field.
- Form elements also called Forms control OR Forms fields.
- HTML forms are used to pass data to a server .

- The <form> tag is used to create an HTML form:
<form>
……
input elements
…...
</form>
24
HTML Forms - The Input Element
 - Most important form element is the input element.
 - The input element is used to select user information.
- An input element can be of type

 - text field
 - checkbox
 - password
 - radio button
 - submit button, and more.
25
Text Fields
 Text field defines a one-line input field that a user can

enter text into:
<html>
<body>
<form>
First name: <input type="text" name=“Firstname" /><br />
Last name: <input type="text" name=“Lastname" />
</form>
</body>
</html>
26
Text Area
<textarea> tag defines a multi line text input.
<html>
<input type ="submit" value ="ok"> <br>
<textarea rows="5" cols="50"> </textarea>
</html>
27
Password Field
 Password Field define password .
 <html>
<body>
<form>
Password: <input type="password" name="pwd" />
</body>
</htm>
 The characters in a password field are masked

(shown as asterisks or circles).
28
Radio Buttons
 Radio buttons allow a user select ONLY ONE of a limited

number of choices:
<form>
<input type="radio" name="s" value="male" /> Male<br />
<input type="radio" name="s" value="female" /> Female
</form>
29
Checkboxes
 Checkboxes allow a user to select ONE or MORE options from a

limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" />
I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" />
I have a car
</form>
30
Drop Down Menu
<html>
<head>
<title>My Page</title>
</head>
<body>
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</body>
</html>
31
Submit Button Cont..
 Submit button is used to send form data to a server.
 <form>
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
32
HTML Multimedia
- Multimedia on the web is sound, music, videos, and

animations.
- Modern web browsers have support for many

multimedia formats.
33
Plugins
- A Plugin is a small computer program that extends the
standard functionality of a web browser.
- Plugins can be used for many purposes. They can be used

to display music, display maps, control your input, and
much more
34
Multimedia Formats
- Multimedia elements also have their own file formats
with different extensions like .swf, .wmv, .mp3,mp4.etc
- Few popular extensions are:
- AVI (.avi) The AVI (Audio Video Interleave) format

was developed by Microsoft. The AVI format is
supported by all computers running Windows.
- WMV (.wmv)The Windows Media format is

developed by Microsoft. Windows Media is a common
format on the Internet.
35
Multimedia Formats Cont..
- MPEG(.mpg):
The MPEG (Moving Pictures Expert Group) format is
the most popular format on the Internet. It is cross-
platform, and supported by all the most popular web
browsers.
- QuickTime (.mov):
The QuickTime format is developed by Apple.
- RealVideo (.rm):
The RealVideo format was developed for the Internet by
Real Media.
36
Multimedia Formats Cont..
 Flash (.swf, .flv):

The Flash (Shockwave) format was developed by
Macromedia. The Shockwave format requires an extra
component to play. But this component comes
preinstalled with web browsers like Firefox and Internet
Explorer
 Mpeg-4 is the new format for the internet. YouTube

accepts multiple formats, and then converts them all to
.flv or .mp4 for distribution
37
Sound Formats
 MIDI (.mid, .midi):
The MIDI (Musical Instrument Digital Interface) is a
format for electronic music devices.
 RealAudio (.rm, .ram)
 Wave (.wav)
 WMA (.wma)
 MP3 (.mp3)
 mpga
38
Add Audio and video to Your Site
 - The Easiest Way to Add Audio and video is ,
 - Audio: <a href="song.mp3">Play Song</a>
 - Video: <a href=“video.mp3">Play video</a>
39
CSS (Cascading Style Sheet)
- CSS is short for Cascading Style Sheets.
- It is a new web page layout method that has been added to

HTML to give web developers more control over their
design and content layout.
- Using CSS allows a designer to create a standard set of

commands (either embedded inside the web page or from
an external page) that controls the style of all subsequent
pages.
40
WHY CSS?
- Web sites designed in CSS are faster to change and
update. Because the coding is reduced the pages are
more efficient and require less bandwidth .
- The main benefit to designers and to companies is that

CSS speeds the time it takes to develop and update site
layouts. Communication is easier among multiple
developers because the workflow is standardized.
41
CSS Cont…
- With CSS you can add style (fonts, colors, spacing, size.
links) to web documents.
- More advanced techniques control the layout of the page

without the use of tables or other cumbersome HTML .
42
CSS Syntax
 A CSS rule has two main parts: a selector, and one or

more declarations:
43
CSS Cont…
 - h1{font-size: 28pt;}
 Rule - {font-size: 28pt;}
 - To add different Rules like

 h1 {font-size: 28pt ;
 color: red ;
 font-family: Impact ;}
44
CSS Cont….
<html>
<head>
<title> First CSS Example</title>
<style>
h1 {font-size: 28pt ;
color: red ;
font-family: Impact ;}
</style>
</head>
<body>
<h1> New HTML with style</h1>
</body>
</html>
45
CSS Example
body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}
46
CSS Example cont…
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
47
CSS Comments
- Comments are used to explain your code, and may help
 you when you edit the source code at a later date.
 - Comments are ignored by browsers.
 - 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;
}

48
CSS cont…
- A CSS declaration always ends with a semicolon.
- Declaration groups are surrounded by curly brackets:
 - p {color:red;text-align:center;}
- To make the CSS more readable, you can put one declaration on
 each line, like this:
 Example
 p
{
color:red;
text-align:center;
}

49
Three Ways to Insert CSS
 - There are three ways of inserting a style sheet:
 - External style sheet
 - Internal style sheet
 - Inline style
50
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>
51
External Style Sheet cont…
- 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.
52
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 of an

HTML page, by using the <style> tag,
53
CSS Cont….
<html>
<head>
<title> First CSS Example</title>
<style>
h1 {font-size: 28pt ;
color: red ;
font-family: Impact ;}
</style>
</head>
<body>
<h1> New HTML with style</h1>
</body>
</html>
54
Inline Styles
- An inline style loses many of the advantages of style
 sheets by mixing content with presentation.
 <html>
 <head>
 <p style="color:blue;margin-left:20px">This is a
 paragraph.</p>
 </head>
 </html>
55
Cascading order
- Browser default
- External style sheet
- Internal style sheet (in the head section)
- Inline style (inside an HTML element)
An inline style (inside an HTML element) has the highest

priority, which means that it will override a style defined
inside the <head> tag, or in an external style sheet, or in
a browser (a default value)..
56
The id and class Selectors
The id and class Selectors In addition to setting a style

for a HTML element.
-
CSS allows you to specify your own selectors called "id“
and "class".
57
The id Selector
- The id selector is used to specify a style for a single,
unique element.
- The id selector uses the id attribute of the HTML element,

and is defined with a "#".
 Do NOT start an ID name with a number! It will not work

in Mozilla/Firefox.
58
The id Selector cont…
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
59
Class Selector
- The class selector is used to specify a style for a group

of elements .
- The class selector uses the HTML class attribute, and is

defined with a ".“
- Do NOT start a class name with a number! This is only

supported in Internet Explorer.
60
Class Selector cont…
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
61
Java Script
62
JavaScript
 JavaScript started life as LiveScript, but Netscape
changed the name, possibly because of the excitement
being generated by Java.to JavaScript.
 JavaScript made its first appearance in Netscape 2.0 in
1995 with a name LiveScript.
63
JavaScript cont..
 JavaScript is a lightweight programming language with
object-oriented capabilities that allows you to build
interactivity into otherwise static HTML pages
64
Advantages of JavaScript
 Less server interaction: You can validate user
input before sending the page off to the server.
This saves server traffic, which means less load on
your server.
 Immediate feedback to the visitors: They don't

have to wait for a page reload to see if they have
forgotten to enter something.
65
Java Script cont….
- The HTML <script> tag is used to insert a javaScript into an
 HTML page.
 <html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
- The document.write command is a standard javaScript

command for writing output to a page
66
General format
<html>
<body>
.....
…..
</script>
</body>
</html>
67
How to Handle Simple Browsers
- Browsers that do not support scripting, will display javaScript

as page content.
- To prevent them from doing this, the HTML comment tag

should be used to "hide" the javaScript.
- Just add an HTML comment tag  (end of comment) after the
last javaScript statement.
68
Simple Browser cont…
 <html>
<body>

</script>
</body>
</html>

69
Case Sensitivity:
 JavaScript is a case-sensitive language. This means that
language keywords, variables, function names, and any
other identifiers must always be typed with a consistent
capitalization of letters.
 So identifiers Time, TIme and TIME will have different
meanings in JavaScript.
 NOTE: Care should be taken while writing your variable
and function names in JavaScript.
70
Comments in JavaScript
 JavaScript supports both C-style and C++-style
comments, Thus:
 Any text between a // and the end of a line is treated
as a comment and is ignored by JavaScript.
 Any text between the characters /* and */ is treated as

a comment. This may span multiple lines.
 JavaScript also recognizes the HTML comment

opening sequence  is not
recognized by JavaScript so it should be written as //--
>.
71
JavaScript cont…
<script language="javascript" type="text/javascript">

</script>
72
JavaScript cont…
 All the modern browsers come with built-in support for
JavaScript. Many times you may need to enable or disable
this support manually.
73
JavaScript in External File
<html>
<head>
<script type="text/javascript" src="filename.js" >
</script>
</head>
<body> ....... </body>
</html>
74
Save as file name.js
function sayHello()
{
alert("Hello World")
}
75
JavaScript Data Types
 JavaScript allows you to work with three primitive data

types:
 Numbers eg. 123, 120.50 etc.
 Strings of text e.g. "This text string" etc.
 Boolean e.g. true or false.
76
JavaScript Variables:
 Like many other programming languages, JavaScript has
variables.
 Variables can be thought of as named containers. You can

place data into these containers and then refer to the data
simply by naming the container.
 Variables are declared with the var keyword
77
Variable Scope:
 Global Variables: A global variable has global scope
which means it is defined everywhere in your JavaScript
code.
 Local Variables: A local variable will be visible only

within a function where it is defined. Function
parameters are always local to that function.
78
var myVar = "global"; // Declare a global variable
function checkscope( )
{
var myVar = "local"; } // Declare a local variable
79
If else Statements
 <script type="text/javascript">
 </script>
80
If else If statements

81
Switch statement
 The switch statement is used to perform different
actions based on different conditions.
 Syntax:
 switch (expression)
case condition 1: statement(s) break;
case condition 2: statement(s) break; ... case condition
n: statement(s) break; default: statement(s)
82
While loop
The while loop loops through a block of code as
long as a specified condition is true.
Syntax:
while (condition) {
code block to be executed
}
Example:
while (i < 10) {
text += "The number is " + i;
i++;
}
83
Do while
This loop will execute the code block once, before checking
if the condition is true, then it will repeat the loop as long
as the condition is true.
Syntax:
do {
code block to be executed
} while (condition);
Example:
do {
text += "The number is " + i;
i++;
}
while (i < 10);
84
The for Loop
<!–
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++)
{
document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!"); //--> </script>
85
Function
 A function is a group of reusable code which can be called
anywhere in your program.
 This eliminates the need of writing same code again and

again. This will help programmers to write modular code.
 You can divide your big program in a number of small and

manageable functions.
86
Function
 The most common way to define a function in
JavaScript is by using the function keyword, followed
by a unique function name, a list of parameters (that
might be empty), and a statement block surrounded
by curly braces.
 The basic syntax is shown here
 function functionname(parameter-list)
 { statements }
 </script>:
87
Calling Function example
 function sayHello(name, age)
 {
 alert( name + " is " + age + " years old.");
 }
 sayHello('Zara', 7 );
 </script>
88
Event
 JavaScript's interaction with HTML is handled
through events that occur when the user or browser
manipulates a page.
 When the page loads, that is an event.

 When the user clicks a button, that click, too, is an
event.
 Another example of events are like pressing any key,

closing window, resizing window etc.
89
onclick Event Type
This is the most frequently used event type which occurs when a user clicks mouse left
button. You can put your validation, warning etc against this event type.
<html>
<head>
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
90
onmouseover and onmouseout
 These two event types will help you to create nice effects
with images or even with text as well. The onmouseover
event occurs when you bring your mouse over any
element and the onmouseout occurs when you take your
mouse out from that element.
91
<html>
<head>

</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()" >
<h2> This is inside the division </h2>
</div>
</body>
</html>
92
HTML 4 Standard Events
Event Value Description
onchange script Script runs when the element change

onsubmit script Script runs when the form is submitted
onreset script Script runs when the form is reset
onselect script Script runs when the element is selected
onblur script Script runs when the element loses focus
onfocus script Script runs when the element gets focus
onkeydown script Script runs when key is pressed
onkeypress script Script runs when key is pressed and released
onkeyup script Script runs when key is released

onclick script Script runs when a mouse click
ondblclick script Script runs when a mouse double-click
onmousedown script Script runs when mouse button is pressed
onmousemove script Script runs when mouse pointer moves
onmouseout script Script runs when mouse pointer moves out of an element
onmouseover script Script runs when mouse pointer moves over an element
onmouseup script Script runs when mouse button is released
93
alert dialog
 An alert dialog box is mostly used to give a warning message to
the users.
 Like if one input field requires to enter some text but user does
not enter that field then as a part of validation you can use
alert box to give warning message.
 <head>
  </script> </head>
 Alert box gives only one button "OK" to select and proceed.
94
Confirmation Dialog Box:
 confirmation dialog box is mostly used to take user's
consent on any option. It displays a dialog box with
two buttons: OK and Cancel.
95
example
 <head>
 </script> </head>
96
Lab Task 01: Marks=02
 Create Your C.V in HTML
E.g
 Name
 SSC, HSSC marks, Board
 Your address
 Semester GPAs
 Advantages of Web Engineering course
97
Assignment # 01
Design a registration form using HTML, CSS and Java
Script.
 Registration form
98

Lec 01 Web Eng-1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec 01 Web Eng-1

Uploaded by

Copyright:

Available Formats

Web Engineering

Instructor: Shahab Ul Islam

 Lecturer / IT Incharge (IPS) 2014-2016

And believe me,

 Clients use browser application to send URIs via HTTP to

 The Web is a client/server application: Web browsers are clients

 Without a universal addressing mechanism, it

The transfer protocol

 How many classes of IP addresses exists?

 HTML documents are also called web pages

 HTML elements can have attributes

Web server CGI Application

Request page > Run CGI >

< CGI Output < CGI Output

- HTML forms are used to pass data to a server .

 - Most important form element is the input element.

 - The input element is used to select user information.

- An input element can be of type

 Text field defines a one-line input field that a user can

 The characters in a password field are masked

 Radio buttons allow a user select ONLY ONE of a limited

<input type="radio" name="s" value="female" /> Female

 Checkboxes allow a user to select ONE or MORE options from a

<input type="checkbox" name="vehicle" value="Bike" />

I have a bike<br />

<input type="checkbox" name="vehicle" value="Car" />

 Submit button is used to send form data to a server.

- Multimedia on the web is sound, music, videos, and

- Modern web browsers have support for many

- Plugins can be used for many purposes. They can be used

- AVI (.avi) The AVI (Audio Video Interleave) format

- WMV (.wmv)The Windows Media format is

 Flash (.swf, .flv):

 Mpeg-4 is the new format for the internet. YouTube

 - Audio: <a href="song.mp3">Play Song</a>

 - Video: <a href=“video.mp3">Play video</a>

- It is a new web page layout method that has been added to

- Using CSS allows a designer to create a standard set of

- The main benefit to designers and to companies is that

- More advanced techniques control the layout of the page

 A CSS rule has two main parts: a selector, and one or

 - To add different Rules like

<h1>This header is 36 pt</h1>

<p>This paragraph has a left margin of 50 pixels</p>

 - Comments are ignored by browsers.

- Declaration groups are surrounded by curly brackets:

 - There are three ways of inserting a style sheet:

 - External style sheet

 - Internal style sheet

- An external style sheet is ideal when the style is applied

- 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 internal style sheet should be used when a single

- You define internal styles in the head section of an

An inline style (inside an HTML element) has the highest

The id and class Selectors In addition to setting a style

- The id selector uses the id attribute of the HTML element,

 Do NOT start an ID name with a number! It will not work

- The class selector is used to specify a style for a group

- The class selector uses the HTML class attribute, and is

- Do NOT start a class name with a number! This is only

 Immediate feedback to the visitors: They don't

- The document.write command is a standard javaScript