To HTML and Javascript: Session 1

Introduction
To
HTML and JavaScript
Session 1
Session Objectives
 Discuss the usage and services provided by Internet
 Describe different browsers
 Describe the URL
 Differentiate between web server, web page and web
site
 Discuss Hyper Text Markup Language
 Identify the need for Java Scripts
 Explain the scope of Java Scripts
 Explain various HTML tags
 Format text in a HTML document
 Change the background colour of a HTML document
Internet and World wide web
Clie
Local internet
nt
Server
s
Server
LAN #1
LAN #2
An internet is a collection of
two or more distinct networks
joined together.
Internet and World wide web [Contd...]
Internet provides variety of Services :

1. Electronic Mail (E-Mail)
2. File Transfer Protocol (FTP)
3. World Wide Web (WWW)
To gather information through Internet one has to browse the

Web.
The web is an ocean of information and this system has made
possible to access any document on the net.
Internet and world wide web [Contd...]
On WWW, Web pages can hold various components and browser
is used to view them.
HyperLink
Picture
Text
Internet and world wide web [Contd…]
 Browser are of following types:
• Text based browsers – Shows only textual

information.
‘Lynx’ is a Text based browser.
• Graphical browsers – Supports hypermedia i.e.

sound, movies formatted text and graphics.
Internet Explorer, Netscape.
‘Opera’ is the most popular Graphical browser.
Uniform Resource Locator (URL)
<HTML> URL
…. Other HTML code
<A HREF=“http://www.indiamp3.com”>
… </A>
.htm file – test.htm
…. Other HTML code
</HTML> Domain Name
 HTTP defines how messages are formatted and transmitted
and actions that the Web servers and browsers should take in
response to various commands.
 Every Computer has an unique Internet Protocol (IP) address.
For example : 192.9.200.104 – four 8 bits (octets).
 The English name is resolved into corresponding IP address
by DNS – Domain Name Services.
Uniform Resource Locator (URL) [Contd…]
Web
Server
Request to
Web server
.HTM file – test.htm
<HTML>
….. HTML code
<A HREF=“http://www.indiamp3.com”>
….. Other HTML code

</HTML>
Getting Started with JavaScript [Contd…]
 Java Script is an interpreted, object-based scripting
language, developed by Sun Microsystems and
Netscape.
 JavaScript makes it easier to create interactive Web
Pages.
 Common Gateway Interface was considered as the
standard for processing the forms. It was time consu-
ming process because form validation used to take
place on the server side.
 JavaScript made the entire work easier by validating
the form at the client side.
Getting Started with JavaScript [Contd…]
 JavaScript statements can easily be added to HTML Code:
<HTML>
<HEAD>
<TITLE>HTML containing
JAVASCRIPT</TITLE>
</HEAD> WEB
<BODY> browser
<SCRIPT LANGUAGE=“JavaScript”>
document.write(“First
JavaScript Statement”);
</SCRIPT> HTML
</BODY> JAVA
<HTML> SCRIPT
// document.write(“This is C++ Style comment”)
HTML
/*document.write(“This is C style comment”) */
<SCRIPT>
Client-Side and Server-Side Applications
Script retrieves and Files accessible
returned requested to server
files
Web URLs that address
files
Browser
HTML File
URL Web
requests Server
Scrip
t
HTML files with Script receives
embedded JavaScript URLs that browser information,
User address script performs required
executes locally with
browser and interacts processing and return
with user. the results to the
Scrip browser.
t
Client-Side and Server-Side Applications[Contd…]
 Both Client and Server application can be written

using JavaScript.
 On the client side, JavaScript can be used to develop
web pages that are executed by the web browser.
 On sever side JavaScript programs, known as server-
side script, can process information submitted by a web
browser .
Client-Side and Server-Side Applications [ Contd…]
 Server-side JavaScript application also update the

browser’s display as and when required.
 Client browser reads the HTML files and identifies
elements of the file and then displays accordingly.
 So when a JavaScript code element is encountered the
browser executes the same and displays the results.

Client-Side and Server-Side Applications [Contd…]
Events
Mouse /
Web Browser Keyboard
Server JavaScript Action
URL Events Interpreter
HTTP Response Changes to
Browser
Computer always responds to keyboard and (Feedback)
mouse action by the user – known as events.
 The browser with JavaScript interpreter responds to the
events occurred due to Keyboard or Mouse action.
Server responds when browser request for an URL or when
any server side script is executed.
JavaScript interpreter sends the feedback to the user through
a pre-written code
JavaScript in a Browser
Server sends entire contents of document to the client
browser as and when client request for a page that
contain JavaScript statements .
<HTML>
<HEAD>
<TITLE>BUZZ OFF !!!</TITLE>

</SCRIPT>
</HEAD>
</HTML>
Understanding Basic HTML Tags
<HTML>
<HEAD> Every HTML document
<TITLE> First Web Page may contain sections :
</TITLE>
(a) HEAD <HEAD>
</HEAD>
<BODY> </HEAD>
<P>This is My First Web Page</P>
</BODY>
(b) BODY <BODY>
</HTML> </BODY>
<HTML> </HTML> contains all HTML tags and qualifies
the Document as a web page. All other HTML tags, JavaScript
code must be embedded within these tags.
<HEAD> </HEAD> tags defines the header of a document.
<BODY> </BODY> tags defines the body of the document.
These tags makes the document structural and easily readable.
Formatting Text
The text that appears in the browser can be formatted to
appear as :
Text Style Examples of Tags
Bold <B>This Text Appears In Bold </B>

Italics <I> This Text Appears In Italics </I>
Underline <U>This Text Appears Underlined</U>
<STRONG> </STRONG> tags can be used instead of
<B> and </B>.
<EM> </EM> can be used instead of <I> and </I>
 Tags can be nested within one another :

<B><I>This Text Appears In Bold And Italics </I></B>
Horizontal Line
<HR> tag adds Horizontal line to the HTML
document.

The <HR> tag does not have closing tag
The <HR> tag has several attributes, you can specify the
width, colour and thickness of the line.

<HR WIDTH = “50%” > Specifying Width Attribute
<HR SIZE = “4” > Specifying Size Attribute
<HR SIZE = “5” WIDTH = “50%” > Width and Size together
<HR COLOR = “RED” > Specifying Colour Attribute
Horizontal Line [Contd…]
 Colours can be
specified either by the Colour Hexadecimal Value
name or by the Red #FF0000
hexadecimal value. Green #00FF00
<HR COLOR =“#FF0000”> Blue #0000FF
White #FFFFFF
Black #000000
Grey #808080
Dark Red #800000
Dark Green #008000
Dark Blue #000080
Yellow #FFFF00
Magenta #FF00FF
Cyan #00FFFF
Text Alignment
 <P> </P> tags used to define the paragraph. Certain
Formatting attributes’ values can be set with these tags.
<P ALIGN = “ LEFT” > This Will

Be Left Aligned</P>
<P ALIGN = “ CENTER” > This Will Be Centre

Aligned</P>
<P ALIGN = “ RIGHT” > This Will

Be Right Aligned</P>
Text Colours, Size and Font
To change the colour, size and font of the text <FONT> tag is
used.
<FONT SIZE=“3”> The Text For Which Formatting Is Required </FONT>
This is will display the text in 12 pt size.
 For specifying the colour of the text, the “COLOR” attribute

can be included in the <FONT> tag.
<FONT COLOR = “#FF0000”>This Text Will Appear In Red Colour </FONT>
To specify a particular font for the text :

<FONT FACE = “Times New Roman” >
This Text Will Appear In Times Roman
</FONT>
BackGround Colour
<HTML>
<HEAD>
You can specify background colour by including "BGCOLOR"
attribute in the <BODY> tag.
<BODY BGCOLOR = "#FFFF00">
This will change the background colour of the window to yellow.
<BODY TEXT = "#FF0000" >
</HEAD> <BODY> tag can specify
</HTML> the background color and
text color attributes.
Headings
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1> Heading 1 Text </H1>
<H2> Heading 2 Text</H2>
</BODY>
</HTML>
Inserting Images
 An Image File can be of Type : GIF, JPEG, BMP
 But it is recommended to use images in “GIF” and
“JPEG” formats because they occupy less memory
when compared to “BMP”.
<IMG SRC = “Person.gif”> - this tag will add an
image to the web page.
<IMG SRC = “Person.gif” WIDTH=“300”

HEIGHT=“200”>
<IMG SRC = “Person.gif” BORDER = “3”

WIDTH=“50” HEIGHT=“50”>
Inserting Images [Contd…]
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC=“Person.bmp”>This is a person
</BODY>
</HTML>
Inserting Background Images
<HTML>
<HEAD>
</HEAD>
<BODY>
<BODY
BACKGROUND="FOREST.BMP">
</BODY>
</HTML>

To HTML and Javascript: Session 1

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

To HTML and Javascript: Session 1

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction

Internet provides variety of Services :

To gather information through Internet one has to browse the

• Text based browsers – Shows only textual

• Graphical browsers – Supports hypermedia i.e.

….. Other HTML code

 Both Client and Server application can be written

 Server-side JavaScript application also update the

browser executes the same and displays the results.

Bold <B>This Text Appears In Bold </B>

 Tags can be nested within one another :

<P ALIGN = “ LEFT” > This Will

<P ALIGN = “ CENTER” > This Will Be Centre

<P ALIGN = “ RIGHT” > This Will

This is will display the text in 12 pt size.

 For specifying the colour of the text, the “COLOR” attribute

To specify a particular font for the text :

<IMG SRC = “Person.gif” WIDTH=“300”

<IMG SRC = “Person.gif” BORDER = “3”

Das könnte Ihnen auch gefallen