Slide 1 : Introduction toHTML and JavaScript Session 1
Slide 2 : Introduction to HTML and Javascript / 2 of 34 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
Compare CGI with 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
Slide 3 : Introduction to HTML and Javascript / 3 of 34 Internet and World Wide Web Server Clients LAN #1 Local internetServer An internet is a collection of two or more distinct networks joined together. LAN #2
Slide 4 : Introduction to HTML and Javascript / 4 of 34 Internet and World Wide Web [Cont...] Internet provides variety of Services :
1. Electronic Mail (E-Mail)
2. Telnet
3. File Transfer Protocol (FTP)
4. 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.
Slide 5 : Introduction to HTML and Javascript / 5 of 34 Internet and World Wide Web [Cont...] Picture On WWW, Web pages can hold various components and browser is used to view them. Text HyperLink
Slide 6 : Introduction to HTML and Javascript / 6 of 34 Internet and World Wide Web [Cont…] 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.
Slide 7 : Introduction to HTML and Javascript / 7 of 34 Uniform Resource Locator (URL) …. Other HTML code … …. Other HTML code URL Domain Name .htm file – test.htm 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.
Slide 8 : Introduction to HTML and Javascript / 8 of 34 Uniform Resource Locator (URL) [Cont…] ….. HTML code ….. Other HTML code
WebServer .HTM file – test.htm Request to Web server
Slide 9 : Introduction to HTML and Javascript / 9 of 34 Getting Started with JavaScript [Cont…] 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.
Slide 10 : Introduction to HTML and Javascript / 10 of 34 Getting Started with JavaScript [Cont…] JavaScript statements can easily be added to HTML Code:
HTML containing JAVASCRIPT JAVASCRIPT WEB browser HTML HTML
Slide 16 : Introduction to HTML and Javascript / 16 of 34 JavaScript - On Web Server Step 1 : Server side JavaScript statements need to be compiled into executable files.
Step 2 : Web server invoke precompiled JavaScript to perform advanced processing such as, database information.
Step 3 : Web server automatically creates JavaScript objects that tell the script how it was invoked, the type of browser requesting its services, ant data supplied by the browser. Step 4 : Server Script processes data provided by the browser.
Step 5 : Server Script returns the information to the browser, via the server.
Step 6 : Browser updates its display using the information received from server. Steps for server-side script execution and feedback to client -
Slide 17 : Introduction to HTML and Javascript / 17 of 34 JavaScript and Perl - comparison JavaScript is more or less a clent side language.
Being a client side langu- age JavaScript features depends on the version of the browser
JavaScript enhances the capabilities to add dynamic effect on the web pages. This is taken care by client browser. Perl scripts processing is done on the server.
Newer versioning of the browser does not affect the Perl script set up on the server, so there is no need to rewrite the code.
In case of Perl any dyna- mic effect on the page will make a server call and load the entire page. JavaScript Perl
Slide 18 : Introduction to HTML and Javascript / 18 of 34 JavaScript and Perl – comparison [Cont…] JavaScript supports dyn- amic effects such as replac- ing image by another one during run time.
JavaScript is executed out of the HTML code and it does not require CGI priv- ilege for database operation and any other server side processing.
JavaScript can not work with server side static files. Perl does not support such type of dynamic effects.
Perl has to be set up on the server and server needs to have CGI priv- ileges to process form data, perform searches.
Perl can read and write static files on the server. JavaScript Perl
Slide 19 : Introduction to HTML and Javascript / 19 of 34 JavaScript and Java – comparison Java is fully object- oriented programming language and is used to create stand-alone applications and applets.
Java code is compiled and downloaded from the server, but executed at the client. JavaScript is Object based scripting language and can not create stand- alone applications or applets.
Client interprets JavaScript but does not compile. Java JavaScript
Slide 20 : Introduction to HTML and Javascript / 20 of 34 JavaScript and Java – comparison [Cont…] Java Applets can be accessed from HTML.
Prior declaration of variable specifying datatype are must in Java.
Object references must exist at compile time. JavaScript statement can be embedded within HTML.
Variables datatypes are not declared in JavaScript.
Object references checked at runtime. Java JavaScript
Slide 21 : Introduction to HTML and Javascript / 21 of 34 Inheritance in Java and JavaScript Name Age AddressCompanySalaryPost EMPLOYEE Person1 Name Age Address Person1 EMPLOYEE Prototype Person1 class-object is inherited from Employee class Person1 is Employee type object, It inherits properties (Name,Age,Address).Prototype is a special type of property which can be copied to every object of Employee type. JavaScript Java
Slide 22 : Introduction to HTML and Javascript / 22 of 34 Inheritance In Java and JavaScript [Cont…] Properties and methods can not be added to Person1 class and instances dynamically. Prototype can be declared as:
Employee.prototype.company=‘APTECH’Employee.prototype.post=‘Faculty’ JavaScript Java Any Object of Employee type contains the properties named ‘company’ , ‘post’ along with other properties like ‘Name’, ‘Age’, ‘Address’. The properties company, post will be added during runtime only.
Slide 23 : Introduction to HTML and Javascript / 23 of 34 Understanding Basic HTML Tags
First Web Page
This is My First Web Page
Every HTML document may contain sections :(a) HEAD
(b) BODY contains all HTML tags and qualifies the Document as a web page. All other HTML tags, JavaScript code must be embedded within these tags. tags defines the header of a document.
tags defines the body of the document. These tags makes the document structural and easily readable.
Slide 24 : Introduction to HTML and Javascript / 24 of 34 The text that appears in the browser can be formatted to appear as :
Bold This Text Appears In Bold
Italics This Text Appears In Italics
Underline This Text Appears Underlined
tags can be used instead of and .
can be used instead of and
Tags can be nested within one another :
This Text Appears In Bold And Italics Formatting Text Text Style Examples of Tags
Slide 25 : Introduction to HTML and Javascript / 25 of 34
tag adds Horizontal line to the HTML document.
The
tag does not have closing tag Horizontal Line The
tag has several attributes, you can specify the width, colour and thickness of the line.
Specifying Width Attribute
Specifying Size Attribute
Width and Size together
Specifying Colour Attribute
Slide 26 : Introduction to HTML and Javascript / 26 of 34 Red #FF0000
Green #00FF00
Blue #0000FF
White #FFFFFF
Black #000000
Gray #808080
Dark Red #800000
Dark Green #008000
Dark Blue #000080
Yellow #FFFF00
Magenta #FF00FF
Cyan #00FFFF Horizontal Line [Cont…] Colours can be specified either by the name or by the hexadecimal value.
Colour Hexadecimal Value
Slide 27 : Introduction to HTML and Javascript / 27 of 34 Text Alignment
This Will Be Centre Aligned
This Will Be Left Aligned
This Will Be Right Aligned
tags used to define the paragraph. Certain Formatting attributes’ values can be set with these tags.
Slide 28 : Introduction to HTML and Javascript / 28 of 34 Text Colours, Size and Font To change the colour, size and font of the text tag is used.
The Text For Which Formatting Is Required
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 tag.
This Text Will Appear In Red Colour
To specify a particular font for the text :
This Text Will Appear In Times Roman
Slide 29 : Introduction to HTML and Javascript / 29 of 34 Background Colour
You can specify background colour by including "BGCOLOR"
attribute in the tag. This will change the background colour of the window to yellow. tag can specify the background color and text color attributes.
Slide 30 : Introduction to HTML and Javascript / 30 of 34 Additional Text Formatting
This Is My 7 th Program Using HTML
H2O Is The Chemical Name For Water
This Text will Appear With Strike Effect
Slide 31 : Introduction to HTML and Javascript / 31 of 34 Headings
Heading 1 Text
Heading 2 Text
Heading 3 Text
Heading 4 Text
Heading 5 Text
Heading 6 Text
Slide 32 : Introduction to HTML and Javascript / 32 of 34 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”. 
- this tag will add an image to the web page.
Slide 33 : Introduction to HTML and Javascript / 33 of 34 Inserting Images [Cont…]
This is a person
Slide 34 : Introduction to HTML and Javascript / 34 of 34 Inserting Background Images