AWP Chapter 1

Advanced Web Programming
By: Getaneh Melese(BSc ,MSc in Computer Science)

Chapter One
Introduction
Contents
Introduction to HTML
Overview of Java script
Overview of CSS
Introduction to HTML
What is HTML?
 HTML (Hypertext Markup Language) used for describing
web pages and display its files (text, or multimedia).
 HTML is not a programming language, is a markup
language
 Cannot be used to describe computations.
 Use to describe the general form and layout of documents
to be displayed by the browser.
 Tags describe contents of the document
 HTML documents contain HTML tags and plain text
 Telling the browser what to do, and what props to use.
 A series of tags that are integrated into a text document.
HTML Elements/ Tags
 HTML commands or tags are enclosed in angled brackets: <
>.
 Some tags stand alone and some come in pairs. In paired
tags the ending tag starts with a slash: /.
<p align=“right”> </p>
Element Attribute Name Attribute Value
 Not case-sensitive.
Cont’d
Link Tags – Hyperlinks are what the web is all about.
<A> </A> Create Link to another document
HREF = URL URL of document to be linked
text Text to be clicked, usually in blue
Example Tag with Absolute URL:

<A HREF=“http://www.ohiou.edu/mainmenu.html”>Menu</A>
Example Tag with Relative URL:
<A HREF="mainmenu.html">Menu</A>
Cont’d
 Link to a document on the
 same server in the same directory:
<a href="form.html">Fill Our Form</a>
 same server in the parent directory:
<a href="../parent.html">Parent</a>
 same server in the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
 Link to an external Web site:
<a href="http://www.devbg.org" target="_blank">BASD</a>
 Always use a full URL, including "http://"
 Using target="_blank" attribute opens link in new window
 Link to an e-mail address:
<a href="mailto:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
Cont’d
 Link to a document called apply-now.html
 On the same server, in same directory using an image as
a link button:
<a href="apply-now.html"><img src="apply-now-button.jpg"
/></a>
 Link to a document called index.html
 On the same server, in the subdirectory
<a href="../english/index.html">Switch to English version</a>
 Link to another location in the same document:
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>
 Link to a specific location in another document:
<a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a>
Cont’d
HTML Images
 HTML images are defined with the <img> tag.
<img src=“imagefilename.extenssion” alt=“something to be
displayed in the absence of the image” width=“” height=“”>
<img src="/img/basd-logo.png">
 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
Example: <img src="./php.png" alt="PHP Logo" />
HTML Elements
 HTML element is everything from the start tag to end tag:
 Start tag is often called the opening tag <element>
 End tag is often called the closing tag </element>
 Element content is everything between start and end tag
 Some HTML elements have empty content (element
without a content)
<br> defines a new line (line break)
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Eg. <p>this is aparagraph</p>
<a href=“”> this is alink</a>
 Most HTML elements can be nested (can contain other
HTML elements).
HTML Attributes
 Attributes provide additional information about HTML
elements.
 HTML elements can have attributes
 Attributes come in name/value pairs like: name="value“
E.g <a href=“compg2.html”> link text</a>
the link address is specified in the href attribute
 Always cote attribute values
E.g href=“compg2.html”
 Attribute names and attribute values are case-
insensitive.
First HTML Page
<html> firstpage.html
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Exercise One</h1>
<p>This is some text will
appear on web page.</p>
</body>
</html>
HTML Comments
 Comment
 a piece of code which is ignored by any web browser.
 a good practice to add comments into your HTML code,
especially in complex documents, to indicate sections of a
document, and any other notes to anyone looking at code
 help you and others understand your code and increases code
readability
 HTML comments are placed in between  tag.
 Eg.,
<head> 
<title>This is document title</title>
< !-- This is not a valid comment --> b/c there is a space
between the left angle bracket and the exclamation mark
HTML Forms
 Forms are required when you want to collect some data from
the site visitor
 E.g.., during user registration you would like to collect
information such as name, email address, credit card, etc.
 Main application: to provide user input for
 programs and databases located on a web server
 local (client-side) scripts associated with the form
 Server-based programs may return data to the client as a web
page
 Client-side scripts can read input data
 To validate the data, prior to sending to server
 To use in local processing which may output web page
content that is displayed on the client
Cont’d
Attribute Description
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are
GET and POST methods.
target Specify the target window or frame where the result of the script
will be displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser
encodes the data before it sends it to the server. Possible values
are:
 application/x-www-form-urlencoded - This is the standard
method most forms use in simple scenarios.
 mutlipart/form-data - This is used when you want to upload
binary data in the form of files like image, word file etc.
HTML Form Controls
There are different types of form controls that you
can use to collect data using HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
Cont’d
Exercise
 Create an HTML page which displays student registration
screen with
– a name field
– an ID field
– a department field {select box with values:
1. Computer Science
2. Information Technology
– a semester field {select box with values:
1. I
2. II
– an academic year field {select box with values: 1998-2000, 2000 default}
– a button to submit the form
– a button to reset the form
HTML Table
HTML table – an element comprised of table rows
and columns: these specify cells of the table
Cells can contain text, images, links, other tables...
Purpose: to house other HTML elements and
arrange them in a tabular fashion -- row by row,
column by column.
Table element consists of three different HTML tags
including
 <table> tag,
 <tr> (table rows), and
 <td> (table columns) tags
Cont’d
Table rows and table columns
 Table can contain an infinite number of table rows
 Each table row is essentially a table element itself, with an
opening and closing tag (<tr> </tr>)
 Table columns are also considered child elements of HTML
tables, and like table rows, an HTML table may contain an
infinite number of table data cells (<td> <td>)
Cont’d
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Alemayehu Bekele</td>
<td>Internet Programming</td>
<td>3</td>
</tr>
<tr>
<td>Helen Getahun</td>
<td>computer Network</td>
<td>2</td>
</tr>
<tr>
</table>
Overview of Cascading Style
Sheets (CSS)
Cascading Style Sheets (CSS)
 An extension (addition) to HTML which allows us to
style our web pages
 Provides more detailed attributes to elements than the
ones defined in standard HTML
 Styles are defined once and used any number of times
and in several contexts
 Clearly separates content from its presentation
 Saves a lot of work - especially in website
maintenance and upgrading
Cont’d
 What is CSS – Cascading Style Sheet?
 style language that defines layout of HTML documents
 supported by all browsers today.
 Difference between CSS and HTML
 HTML
 designed to specify the content and structure of web pages
 CSS
 CSS defines HOW HTML elements are to be displayed
(formatting structured content)
 used to specify the presentation, or styling, of elements on a
web page (e.g., fonts, spacing, sizes, colors, positioning).
 style portable web pages independently of their content &
structure
CoSc 3101 – Internet Programming AMU - CSIT

Cont’d
Benefits
 Web sites designed in CSS are faster to change and
update.
 speeds the time it takes to develop and update site
layouts.
 Typography and page layout can be better controlled
 Style is separable & stored from structure
 document are potentially smaller
 this makes site maintenance easier.
AMU - CSIT
Cont’d
CSS syntax
 Consists of :
• selector
• property
• value
 Format:
selector { property : value }
• selector – tells the browser which part of the
document is affected
• property – specifies what aspect of layout is being set
• value – which gives the value for the style property
 CSS declaration always ends with a semicolon
Cont’d
CSS comments
 Format: /* comment text */
CSS syntax
 Selectors can be grouped (separated by
comma)
Ex. p, div, table { align: center }
 Types of selectors
• HTML tag names – element
• Class selectors
• Id selectors
Cont’d
CSS Selectors – 3
 HTML tag names as selectors
• used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red; text-decoration: overline
}
 Class selector
• used to specify a style for a group of elements
• define generic styles that can be applied to different
HTML elements
• This allows you to set a particular style for many
HTML elements with the same class
Cont’d
CSS syntax
Format:
o Imagine within the body element of our html
page,
<h2 class=”center”>Summary</h2>
o We can then create a CSS rule with the class selector:
.center {
text-align:center;
}
o Eg., all elements with class=“center” will be center-
aligned:
p.center {text-align:center;}
Cont’d
Id selector
 unlike class selector, Id selector always applies to only
one (unique) element
 uses id attribute of HTML element, and defined with "#"
 to define a special style for one special element,
first add an id attribute to the element
Example
<p id="p01">I am different</p>
then define a different style for the (identified) element:
Example
#p01 {
color:blue;
}
Use id to address single elements & class to groups of elements.
Cont’d
 CSS styles can be specified (inserted) in 3 ways:
 Inline – using a style attribute in HTML element
 Internal – using <style> element in HTML <head> section
 External – using one or more external CSS files
 1.Inline styling (Inline CSS)
 useful for applying a unique style to a single HTML element:
 uses the style attribute.
<tag_name style=“property:value; property: value;”> …
</tag_name>
Ex. <table style=“background-color: yellow”>…
</table>
<h1 style="color:blue">This is a Blue
Heading</h1>
Cont’d
2.Internal styling (Internal CSS)
 can be used to define a common style for all HTML
elements on a page
 defined in <head> section, using a <style> element:
<head>
<style type=“text/css”> //says that a style sheet written in CSS
body { //adding style to body element
background-color:lightgrey} //seting background color
h1 {color:blue}
p {color:green}
</style>
</head>
Cont’d
3.External styling (External CSS)
 are ideal when the style is applied to many pages
 With external style sheets, you can change the look of an
entire web site by changing one file
 defined in an external CSS file, and then linked to in
the <head> section of an HTML page using <link> tag:
 <link rel=“stylesheet” type=“text/css” href=“url”>
<head>
<link rel="stylesheet" href="styles.css">
</head>
 The file should not contain any html tags & should be saved
with a .css extension
hr {color:sienna;} p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Cont’d
Some common CSS properties
 Background
• background-color: color
• background-image: url(url)
• background-repeat: repeat_type {repeat, repeat-x, repeat-y, no-
repeat}
• background-attachment: attachment_type {scroll, fixed}
 Text
• color: color
• direction: direction {ltr, rtl} borwser issue??
• letter-spacing: value
• text-align: alignment {left, right, center, justify}
• text-decoration: decoration {none, underline, overline, line-
through, blink}
• text-indent: value
Cont’d
Some common CSS properties
• text-transform: transform {none, capitalize, uppercase,
lowercase}
• word-spacing: value
 Fonts
• font-style: style {normal, italic, oblique}
• font-weight: weight {normal, bold, bolder, lighter, 100, 200,
…}
• font-size: size
• font-family: font_list (in order of precedence, separated by
comma)
 Borders
 Margins
 Padding
 List properties
CSS Fonts
 color property defines text color to be used for HTML element
 font-family property defines font to be used for HTML element
 font-size property defines text size to be used for HTML element
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
Overview of JavaScript
JavaScript
growth of the WWW has resulted in a demand for
dynamic and interactive web sites.
There are many different kinds of scripting
languages – JavaScript, …
JavaScript is a front-end scripting language
developed by Netscape for dynamic content
 can be used as an object-oriented language
Client-side technology
 Embedded in your HTML page
 Interpreted by the Web browser
Simple and flexible
Advantages
JavaScript allows interactivity such as:
 Implementing form validation
 Performing complex calculations
 React to user actions, e.g. handle keys
 Changing an image on moving mouse over it
 Sections of a page appearing and disappearing
 Content loading and changing dynamically
 Custom HTML controls, e.g. scrollable table
Why Java Script?
a web document can consist of up to three layers—
 content,
 presentation, and
 behavior
Content Layer
The content layer is always present
It comprises the information the author wishes to
convey to his or her audience and is embedded
within HTML or XHTML markup that defines its
structure and semantics
Most of the content on the Web today is text, but
content can also be provided through images,
animations, sound, video, and whatever else an
author wants to publish.
Presentation Layer
defines how the content will appear to a human
being who accesses the document in one way or
another
The conventional way to view a web page is with a
regular web browser
 For example, content can also be converted to synthetic
speech for users who have impaired vision or reading
difficulties.
Behavior Layer
 The behavior layer involves real-time user interaction with
the document
 This task is normally handled by JavaScript
 The interaction can be anything from a validation that
ensures a required field is filled in before an order form can
be submitted,
 To sophisticated web applications that work much like
ordinary desktop programs
A Simple Script: Printing a Line of Text in
a Web Page
<html>
<head> <title>First JavaScript Page</title> </head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">

</script>
</body>
</html>
Embedding JavaScript
<html>
<head>
<title>First JavaScript Program</title>
</head>
<body>
<script language=“JavaScript”
src=“your_source_file.js”></script>
</body>
</html>
Embedding scripting
 A <script> tag can be placed either within the <head> or
<body> tag of an HTML document
JavaScript Source File: External
<script language=“JavaScript”
src=“your_source_file.js”></script>
 SRC – specifies the location of an external script
 TYPE – specifies the scripting language of the
script
 LANGUAGE – specifies the scripting language of
the script
 TYPE and LANGUAGE have a similar function,
we use LANGUAGE to specify the language used
in the script
Using the alert() Method
<head>
<script language=“JavaScript”>
alert(“An alert triggered by JavaScript”);
</script>
</head>
 It is the easiest methods to use amongst alert(),
prompt() and confirm().
 You can use it to display textual information to
the user (simple and concise).
 The user can simply click “OK” to close it.
Using the confirm() Method
<head>
confirm(“Are you happy with the class?”);
</script>
</head>
 This box is used to give the user a choice either

OK or Cancel.
 It is very similar to the “alert()” method.
 You can also put your message in the method.
Using the prompt() Method
<head>
prompt(“What is your student id number?”);
prompt(“What is your name?”,”No name”);
</script>
</head>
 This is the only one that allows the user to type in
his own response to the specific question.
 You can give a default value to avoid displaying
“undefined”.
Three methods
<script language="JavaScript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>
Data Types
 JavaScript allows the same variable to contain different
types of data values
 Primitive data types
 Number: integer & floating-point numbers
 Boolean: logical values “true” or “false”
 String: a sequence of alphanumeric characters
 Composite data types (or Complex data types)
 Object: a named collection of data
 Array: a sequence of values
 Special data types
 Null: an initial value is assigned
 Undefined: the variable has been created by not yet
assigned a value
Integer and Floating-point number
example
var integerVar = 100;
var floatingPointVar = 3.0e10;
// floating-point number 30000000000
document.write(integerVar);
document.write(floatingPointVar);
</script>
 The integer 100 and the number 30,000,000,000

will be appeared in the browser window.
Boolean Values
 A Boolean value is a logical value of either true or false.
(yes/no, on/off)
 Often used in decision making and data comparison.
 In JavaScript, you can use the words “true” and “false”
directly to indicate Boolean values.
 Named by the 19th century mathematician “George Boole”.
Strings
 A string variable can store a sequence of alphanumeric
characters, spaces and special characters.
 String can also be enclosed in single quotation marks (‘) or
in double quotation marks (“).
 What is the data type of “100”?
 String but not number type

 Pay attention to the special characters
Strings example
<head>
document.write(“This is a string.”);
document.write(“This string contains ‘quote’.”);
var myString = “My testing string”;
alert(myString);
</script>
</head>
 Unlike Java and C, JavaScript does not have a

single character (char) data type.
Array
An Array contains a set of data represented by a
single variable name.
Arrays in JavaScript are represented by the Array
Object, we need to “new Array()” to construct this
object.
The first element of the array is “Array[0]” until the
last one Array[i-1].
E.g. myArray = new Array(5)
 We have myArray[0,1,2,3,4].
Example
Car = new Array(3);
Car[0] = “Ford”;
Car[1] = “Toyota”;
Car[2] = “Honda”;
document.write(Car[0] + “<br>”);
</script>
 You can also declare arrays with variable length.
◦ arrayName = new Array();
◦ Length = 0, allows automatic extension of the length.
◦ Car[9] = “Ford”; Car[99] = “Honda”;
Conditional Statement
“if” statement
“if … else” statement
“else if” statement
“if/if … else” statement
“switch” statement
Functions
A function is a block of organized reusable code (a
set of statements) for performing a single or related
action.
Begins with keyword “function” and the function
name and “( … )”
Inside the parentheses
 We can pass parameters to the function
 E.g. function myfuc(arg1, arg2) {…}
 Built-in and user-defined functions
Built-in Functions
 Functions provided by the language and you cannot change
them to suit your needs.
 Some of the built-in functions in JavaScript are shown here:
 eval - eval(expr)
• eval evaluates the expression or statements
 isFinite
• Determines if a number is finite
 isNaN
• Determines whether a value is “Not a Number”
 parseInt
• Converts string literals to integers, no number  NaN.
 parseFloat
• Finds a floating-point value at the beginning of a string.
User-Defined Functions
For some functionality, you cannot achieve by only
using the built-in functions.
You can define a function as follows
function <function_name> (parameters)

{
// code segments;
}
Function Declarations
Declaration Syntax
 Functions – declared using the function reserved word
 return value is not declared, nor types of arguments
Examples:
function square(x) { return(x * x); }
function factorial(n) {
if (n <= 0) {
return(1);
} else {
return(n * factorial(n - 1));
}
}
Events
 are actions that occur as a result of browser activities or
user interactions with the web pages, such as
 user performs an action (mouse click or enters data)
 validate the data entered by a user in a web form
 Communicate with Java applets and browser plug-ins
 Event categories
 Keyboard and mouse events
 Load events
 Form-related events
 onFocus() refers to placing the cursor into the text input
in the form.
 Others
 Errors, window resizing.
User Events, Form Example
<html><head>
<title>Simple JavaScript Button</title>
<script language=“JavaScript"></script>
</head>
<body>
<h1>Simple JavaScript Button</h1>
<form>
<input type=“button“
value="Don't Click Me"
onClick="dontClick()“>
</form></body></html>
Sum of Numbers – Example
sum-of-numbers.html
<html>
<head>
<title>JavaScript Demo</title>
<script type="text/javascript">
function calcSum() {
value1 = parseInt(document.mainForm.textBox1.value);
value2 = parseInt(document.mainForm.textBox2.value);
sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;
alert('Sum = ' + sum);
}
</script>
</head>
Sum of Numbers – Example (2)
<body>
<form name="mainForm">
<input type="text" name="textBox1" /> <br/>
<input type="text" name="textBox2" /> <br/>
<input type="button" value="Process"
onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"
readonly="readonly"/>
</form>
</body>
</html>
Switch Statement
The switch statement works like in C#:
switch (variable) {
case 1: switch-statements.html
// do something
break;
case 'a':
// do something else
break;
case 3.14:
// another code
break;
default:
// something completely different
}
Functions
Code structure – splitting code into parts
Data comes in, processed, result returned
Parameters come in
function average(a, b, here.
c)
{ Declaring variables is
optional. Type is
var total; never declared.
total = a+b+c;
return total/3; Value returned here.
}
Form validation
<script type = "text/javascript">

</script>
Validating Email
function ValidateEmail(inputText)
{ var emailformat =/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\
w{2,3})+$/; if(inputText.value.match(emailformat))
{
alert("Valid email address!"); document.form1.text1.focus();
return true;
}
else
{ alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}}
Any Question?

AWP Chapter 1

Uploaded by

Document Information

Original Description:

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

AWP Chapter 1

Uploaded by

Copyright:

Available Formats

Advanced Web Programming

By: Getaneh Melese(BSc ,MSc in Computer Science)

Overview of Java script

Element Attribute Name Attribute Value

Example Tag with Absolute URL:

CoSc 3101 – Internet Programming AMU - CSIT

 This box is used to give the user a choice either

 The integer 100 and the number 30,000,000,000

 String but not number type

 Unlike Java and C, JavaScript does not have a

function <function_name> (parameters)

if( document.myForm.Name.value == "" ) {

You might also like