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 Local internet Server Server LAN #1 LAN #2 An internet is a collection of two or more distinct networks joined together.

File Transfer Protocol (FTP) 3..Internet and World wide web [Contd.. Electronic Mail (E-Mail) 2. The web is an ocean of information and this system has made possible to access any document on the net.] Internet provides variety of Services : 1. World Wide Web (WWW) To gather information through Internet one has to browse the Web. .

Internet and world wide web [Contd.. HyperLink Picture Text .] On WWW. Web pages can hold various components and browser is used to view them..

e. movies formatted text and graphics. . Netscape. ‡ Graphical browsers ± Supports hypermedia i. sound. Internet Explorer. µOpera¶ is the most popular Graphical browser. µLynx¶ is a Text based browser.Internet and world wide web [Contd«]  Browser are of following types: ‡ Text based browsers ± Shows only textual information.

 The English name is resolved into corresponding IP address by DNS ± Domain Name Services. Other HTML code <A HREF=³http://www. .htm file ± test.com´> « </A> .htm «.Uniform Resource Locator (URL) <HTML> URL «.  Every Computer has an unique Internet Protocol (IP) address. Other HTML code Domain Name </HTML>  HTTP defines how messages are formatted and transmitted and actions that the Web servers and browsers should take in response to various commands.9.104 ± four 8 bits (octets).200. For example : 192.indiamp3.

.. HTML code <A HREF=³http://www.com´> «.Uniform Resource Locator (URL) [Contd«] Web Server Request to Web server .htm <HTML> «. Other HTML code </HTML> .HTM file ± test.indiamp3.

developed by Sun Microsystems and Netscape.  JavaScript made the entire work easier by validating the form at the client side. .  JavaScript makes it easier to create interactive Web Pages. It was time consuming process because form validation used to take place on the server side.  Common Gateway Interface was considered as the standard for processing the forms. object-based scripting language.Getting Started with JavaScript [Contd«]  Java Script is an interpreted.

Getting Started with JavaScript [Contd«]  JavaScript statements can easily be added to HTML Code: <HTML> <HEAD> <TITLE>HTML containing JAVASCRIPT</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=³JavaScript´> document.write(³This is C style comment´) */ <SCRIPT> WEB browser HTML JAVA SCRIPT HTML .write(³This is C++ Style comment´) /*document. </SCRIPT> </BODY> <HTML> <SCRIPT LANGUAGE=³JavaScript´> // document.write(³First JavaScript Statement´).

performs required processing and return the results to the browser. URLs that address script Scrip t Script receives browser information.Client-Side and Server-Side Applications Script retrieves and returned requested files Files accessible to server URLs that address files Web Browser HTML File Scrip t URL requests Web Server User HTML files with embedded JavaScript executes locally with browser and interacts with user. .

 On the client side. can process information submitted by a web browser .Client-Side and Server-Side Applications[Contd«]  Both Client and Server application can be written using JavaScript. known as serverside script.  On sever side JavaScript programs. JavaScript can be used to develop web pages that are executed by the web browser. .

.  So when a JavaScript code element is encountered the browser executes the same and displays the results.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.

Client-Side and Server-Side Applications [Contd«] Web Server URL Events HTTP Response Mouse / Keyboard Action Changes to Browser (Feedback) JavaScript Interpreter Computer always responds to keyboard and mouse action by the user ± known as events. JavaScript interpreter sends the feedback to the user through a pre-written code . Server responds when browser request for an URL or when any server side script is executed.  The browser with JavaScript interpreter responds to the events occurred due to Keyboard or Mouse action.

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 LANGUAGE=³JavaScript´> <!--Hide from older browsers alert(³Press Ok to start formatting your hard disk´). //end hiding --> </SCRIPT> </HEAD> </HTML> .

JavaScript code must be embedded within these tags. . <BODY> </BODY> tags defines the body of the document. These tags makes the document structural and easily readable.Understanding Basic HTML Tags <HTML> <HEAD> <TITLE> First Web Page </TITLE> </HEAD> <BODY> <P>This is My First Web Page</P> </BODY> </HTML> Every HTML document may contain sections : (a) HEAD <HEAD> </HEAD> (b) BODY <BODY> </BODY> <HTML> </HTML> contains all HTML tags and qualifies the Document as a web page. All other HTML tags. <HEAD> </HEAD> tags defines the header of a document.

<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> .Formatting Text The text that appears in the browser can be formatted to appear as : Text Style Examples of Tags Bold Italics Underline <B>This Text Appears In Bold </B> <I> This Text Appears In Italics </I> <U>This Text Appears Underlined</U> <STRONG> </STRONG> tags can be used instead of <B> and </B>.

<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 <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.

Horizontal Line [Contd«]  Colours can be Colour Hexadecimal Value specified either by the Red #FF0000 name or by the Green #00FF00 hexadecimal value. #0000FF <HR COLOR =³#FF0000´> Blue 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. <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> . Certain Formatting attributes¶ values can be set with these tags.

 For specifying the colour of the text.Text Colours. Size and Font To change the colour. size and font of the text <FONT> tag is used. 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> . <FONT SIZE=³3´> The Text For Which Formatting Is Required </FONT> This is will display the text in 12 pt size.

<BODY BGCOLOR = "#FFFF00"> This will change the background colour of the window to yellow.BackGround Colour <HTML> <HEAD> You can specify background colour by including "BGCOLOR" attribute in the <BODY> tag. . <BODY TEXT = "#FF0000" > <BODY> tag can specify </HEAD> the background color and </HTML> text color attributes.

Headings <HTML> <HEAD> </HEAD> <BODY> <H1> Heading 1 Text </H1> <H2> Heading 2 Text</H2> <H3> Heading 3 Text</H3> <H4> Heading 4 Text</H4> <H5> Heading 5 Text</H5> <H6> Heading 6 Text</H6> </BODY> </HTML> .

gif´ WIDTH=³300´ HEIGHT=³200´> <IMG SRC = ³Person.gif´ BORDER = ³3´ WIDTH=³50´ HEIGHT=³50´> .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. <IMG SRC = ³Person.gif´> . <IMG SRC = ³Person.

bmp´>This is a person </BODY> </HTML> .Inserting Images [Contd«] <HTML> <HEAD> </HEAD> <BODY> <IMG SRC=³Person.

Inserting Background Images <HTML> <HEAD> </HEAD> <BODY> <BODY BACKGROUND="FOREST.BMP"> </BODY> </HTML> .

Sign up to vote on this title
UsefulNot useful