Web tehnology


Published on

Published in: Education

Web tehnology

  1. 1. WebTechnology Gurchet
  2. 2. Web Technology• Web technologies are the techniques using which you can access various resources on the web.
  3. 3. What is Internet?• It is a international network of computers.• It connect million of computers.
  4. 4. Web browserFor accessing a data from internet, user requires an interface, which link to the computer of the user to the internet and send his request. For this purpose, we use special software, which is known as web browser. It is a special type of software used to execute web pages .A program used to view, download, upload, surf or otherwise access documents (pages) on the World Wide Web. Web browser is the program that one uses to view and test the HTML documents. They translate HTML encoded files into text, images, sound and other features.
  5. 5. Communication between client and web server • The server and client transfer information between each other through the computer network(such as internet) using a communication protocols(set of rules).
  6. 6. Communication between client and server A web server is responsible for sending web pages to a browser for communication with a web server. It follows four steps.1. connect2. request3. reply4. close Before a client and server can exchange information they must first establish a connection.
  7. 7. request client server response1.Connect :- To communicate with web serverthe client machine must be give the ipaddress of the server along with the subprotocol that must be used http, ftp, etc.Web server supports multiple protocols.
  8. 8. 2. Request :- Client send a request andsends response to server when a browserconnects to a web server using anappropriate protocol name, ip address andport number. The connection is establishedto server for the default web document.
  9. 9. The request for a web page can be twotypes:-1. The web page itself.2. The request for object referenced by theweb page. It may be gif, jpeg, audio file,video file.
  10. 10. 4. Close: - It is the server’s responsibilitiesto terminate the TCP/IP connection withthe browser after it responds to thebrowser. The web server must manage anunexpected closing of a connection.
  11. 11. What is www?• It is a system of interlinking hypertext documents access via the internet with web browser. • OR• It is a graphical internet service used to access the information on the network.
  12. 12. Web site• A site(location) on world wide web• Collection of web pages• Web pages contain related information of specific web site• Every web site has its own address(URL)• A web site is hosted on at least one web server.
  13. 13. Web page Web page is simply a special type of file written in html.1. Store in a central computer(web server) Written in notepad Extension is .html or .htm Web pages can be seen by any one all over the world.
  14. 14. Two types of web page• Static web page• Dynamic web page
  15. 15. Static web page• Content of the static web page doesn’t change.A static web page is delivered to the user exactly as stored.• E.g.• Help page that contain simple information that doesn’t change frequently.
  16. 16. Dynamic web page• The content of the dynamic web pages can change every time they are loaded. (without you having to make those changes)• Dynamic web page is a kind of web page that has been prepared with fresh information(content and/or layout) for each individual viewing.
  17. 17. Basic HTML ToolsThe two basic HTML tools are:-HTML Editor: - It is the program that is use tocreate and save HTML documents. E.g: -Notepad.Web browser : - It is the program that is useto view and test the HTML documents. E.g: -Microsoft Internet Explorer.
  18. 18. History Of HTML• Web pioneers (leader) Tim Berners Lee invented HTML in 1989.• Tim Berners Lee who worked for CERN, the European Lab for particle physics in Geneva, Switzerland.• CERN researchers developed the first world wide web program in 1990 and began releasing program and specification to internet users in 1991.
  19. 19. Tim Berners Lee developed the HTML language to link the research papers by using images and text, in order to save time.The information is represented across the world wide in an electronic form by using computers.Who - Tim Berners LeeWhen - 1989Where - Geneva, Switzerland.Why - Develop the HTML language to share information on the multiple computers at a same time, in order to save time.
  20. 20. Computer in Business Application
  21. 21. Marketing So much of marketing has gone online. Social media marketing, website development, blogging, advertising, e- newsletters have all become fast means of marketing in an increasingly globalize society.
  22. 22. E-learning, web-basedtraining and software packages Electronically supported training programs are made possible by computers. Educational software, web training programs and virtual classrooms are all highly utilized in the business world, enabling professionals to learn new skills advance their careers.
  23. 23. Document processing Word Processing, for letters, manuscripts, proposals, etc has revolutionized the business world. Today, many professionals would actually feel lost without simple editing tools such as spell check.
  24. 24. Organization The ease with which databases, spreadsheets and data can be compiled on a computer has certainly improved the efficiency and management practices of businesses worldwide. Many offices now uses computer programs to handle scheduling, accounting, billing, contact management, etc.
  25. 25. Design and presentation Just a few short decades ago, artists were still creating business documents by hand. The beginning of graphic design, digital photography and printing technology has enabled businesses to display information more clearly and artistically
  26. 26. Storage and retrieval Thousands and thousands of scripts, files, charts or other document types can be stored on a tiny microchip. In the old days, businesses needed file cabinets or warehouses to store important records and data. Today, data management is easy, thanks to computers and computer products that enable businesses to organize, store, and easily retrieve critical information.
  27. 27. Financial transactions/ e-commerce Retail purchases, credit card transactions, automatic debits… can all be processed over computers, and through the internet today. Banks, credit card companies, and other financial institutions are some of the best examples of computer uses in business. E-commerce is a rapidly growing industry, promising to become one of the top computer related professions in the future.
  28. 28. Search engines and browsing Computers have provided us with instant access to a world of information. To stay competitive, businesses must utilize search engines such as Google or yahoo to obtain real time information and news and research.
  29. 29. Communication/networking The world may have grown smaller in the internet age, but only because the power of communication has grown by leaps and bounds. The top computer uses in business include e-mail communication, and networking platforms such as video and web conferencing, social networking, and various other online chat tools.
  30. 30. Telecommuting and remote business Portable laptop computers, smart phones, wireless internet, air cards and hub spots are the beckon of the future when it comes to computer uses in business. Today, business can be conducted remotely from almost anywhere.
  31. 31. IntroducingThe Web Technologies
  32. 32. • Web technologies are the techniques using which you can access various resources on the web.
  33. 33. TelnetTelnet was developed in the beginning of 1969.Telnet is a network protocol used on the Internet or local area network for accessing remote computers.To start a Telnet session, you must have a valid username and password.It is a bidirectional interactive text- oriented communications facility.Through Telnet, an administrator or another user can access someone elses computer remotely.
  34. 34. UsenetUsenet was developed in 1979 by two graduate students (Tom Truscott and Jim Ellis students of Duke University) looking for a new way to communicate via the Internet.That makes Usenet more than 11 years older than the World Wide Web!Usenet is a worldwide network of commercial grade servers where members post and download files and messages to more than 100,000 themed discussion groups called “newsgroups”.Usenet differs from e-mail in such a manner that Usenet is one-to-many communication whereas E-mail is one-to-one communication.
  35. 35. WAISWide Area Information Service• A service used to access text databases or libraries on the Internet. WAIS uses simple language queries and takes advantage of index searches for fast retrieval.• Unlike Gopher, which searches only the names of Gopher resources, WAIS can search the content of all documents retrievable from WAIS databases.
  36. 36. Bulletin Board Service• Bulletin board service is the service provided by the Bulletin Board System.BBS is a software that enables you to dial to system using a modem and a phone line and avail various BBS services like:-• Creating account on internet• Viewing the message using an account that are sent to the account.• Sending message to account.• Download software and data.• Upload data using an account.
  37. 37. GopherGopher is a protocol that is used to search and retrieve information, which is store on various web sites on the internet in a hierarchical manner. Gopher is a text menu interface that enable you to view the hierarchy of information using menus. The goals of gopher are:-– Searching a hierarchical arrangement of information.– Representing information in a familiar manner to users.– Responding quickly to a request.– Creating an inexpensive system.
  38. 38. Naming and Addressing
  39. 39. Internet AddressingUsing the internet has become so common evenamong those who do not belong to the informationtechnology. Let us see how internet address iswritten. Take example of www.google.com. In thiswww stands for World Wide Web, google is thename of the server is google and com is thedomain name.Also www.google.com is not the actual address; itis the text version of the internet address. Whichis basically a binary representation called IP address. It may have a form like
  40. 40. Presently we are using IP address version IPv4.However, IPv6 is in the implementation stage.IPv4:- IPv4 addresses are used as uniqueidentifiers, which works at network layer toidentify the source or destination IP packets.Technically IP addresses are expressed usingbinary notation with 32 bit long strings. In orderto make these strings asy to remember, dotteddecimal notations are used, in which dotsseparate four decimal numbers from 0 to 255representing 32 bits. As there are 32 bitstherefore each decimal number is called a“octet”. E.g. 11000000 10101000 000101000011001 can be written as
  41. 41. IP address classesThere are five classes as given below•Class A- It uses 8 bits (1 Octet) for networkaddress and 24 bits for host id.•Class B- it uses 16 bits for network address and16 bits for host id.•Class C- it uses 24 bits for network address and8 bits for host id.•Class D- Used for multicast addressing. • Class E- Reserved for Scientific research purposes.
  42. 42. IP classes and RangeClass Beginning Ending Address AddressA 0 127B 128 191C 192 223D 224 239E 240 255
  43. 43. HTML (Hyper Text Markup Language)• Hyper Text – Hyper text means which contain link to Other text.• Markup – The ordinary text is marked with some special symbols. Each of symbols used for markup in HTML is a command that tells a browser how to display the text.• Language – Language is a key point to remember about HTML. HTML has its own syntax and rules for proper communication.
  44. 44. HTML• It is used to create web pages. It is not a programming language, it is a markup language. HTML is the basic building-block of web site.• HTML is an official language of the world wide web.
  45. 45. What is Tag?• Tag is a container which contain HTML commands. Tags tells the browser how to display the content, but the browser doesn’t display the tag.• Tag start with a less then-sign (<) sign and end with greater-then (>) sign. These symbols also known as angle brackets.• Tags can be nested within each other. Example - <b> <i> welcome </i> </b>
  46. 46. Types of Tags1. Singular OR Empty Tag (Stand alone)2. Paired OR Container Tag (Companion)
  47. 47. 1. Singular / Empty / stand-alone Tag It has only the opening tag. There is no need to close it. Example: <br>2. Paired / Container / Companion Tag• It has both opening and closing tags. These tags need to be closed.• Opening tags are used to begin the effect and closing tags are used to end that effect. Example: <b> bold tag </b>
  48. 48. What is Element?• A complete tag, having an opening (and its attribute) <tag> and a closing tag </tag> is known as element.• An element is identified by the tag.
  49. 49. What is Attribute?• Element can have attribute.• Attribute provide additional information about element such as size, color, alignment etc.• An attribute is defined in a tag within the angle bracket after the tag name.• Each attribute has a name and a value.• The value of each attribute is specified after the name of the attribute and ‘ =‘ (equal sign)• Example:<body bgcolor=“red”>-</body>
  50. 50. Structure OR syntax of HTML
  51. 51. <html> The Head <head> <title> </title> </head><body> The Body </body></html>
  52. 52. • Every HTML document has two main parts: a head and a body.• HTML also offers the chance to add additional functional components to the page in the form of1. style sheets2. scripts and3. frame sets• These are optional components in the HTML document structure.
  53. 53. 1) HTML – The <html> tag tells the browser that this is a HTML document. It is the root element, all other elements are contained in this. The element has a start tag <html> and an end tag </html>.2) HEAD – The HEAD element includes a variety of information for the browser, including a title for the document, link information and other information. All information placed within the <head> </head> tags is not displayed in the browser.
  54. 54. • In HEAD tag we can use the following tags:-i. Title tagii. Script tagiii. Link tagiv. Meta tagv. Style tag
  55. 55. i. Title - Defines the title of the web page or documentii. Link - Defines the relationship between the current document and other documents or resourcesiii. Script – Contains (or refers to) statements in a scripting language that are to be processed on the client sideiv. Style - Contains CSS style information that’s embedded into a pagev. Meta - Provides general information about a document for indexing and other purposes
  56. 56. 3) BODY - The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>.It Includes text,images,table,list etc along with markup tags to define their structure and relationship to each other. Everything display on the web page is written inside <body> element.
  57. 57. <META> TAG
  58. 58. Meta Tag• Metadata is information about data.• The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.• Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.• The <meta> tag always goes inside the head element.• The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
  59. 59. • Example :-• <head>• <meta name="description" content=“Web development" />• <meta name="keywords“ content="HTML,CSS,JavaScript" />• <meta name="author" content="gurchet" />• </head>
  60. 60. Text formatting tags
  61. 61. Text Formatting Tags• Text formatting, in html, is when you give the browser instructions on how your text should look. These instructions come in the form of tags.• Text formatting tags tells the browser to how to display the text on the web page.
  62. 62. Text Formatting Tags <b>-----------------------Bold <i>------------------------Italic <u>-----------------------Underline <sup>---------------------Super Script <sub>---------------------Sub Script <strike> <blink> <pre>---------------------Preformatted  <strong>  <small>  <big>
  63. 63.  <em>---------------------Emphasize <del>---------------------delete <tt>-----------------------teletype <blockquote>------------formatted the quoted text <basefont> <font>
  64. 64. HTML ElementBlock & Textlevel element
  65. 65. HTML ElementsAn element is a document of component suchAs title tag, paragraph tag so on. E.g title tag is anelement of Head tag.HTML Elements are two types:-1.Text-level elements2.Block-level elements 1.Text-level elements: -This elements are usedeffectupon group of text and single text, word.1.Bold tag: -This tag is used to display the text asbold format. We can use <b>text</b> tag. It is containera tag.2.Italic tag: - This tag is used to display the text as Italic format. We can use <i>text</i> tag. It is container a tag.
  66. 66. 3.Underline tag: -This tag is used to displaythe text as underline format. We can use<u>text</u> tag. It is a container tag.4.Big tag: - This tag is used to change thetext font size. This text display as big sizecomparison as other text size. We can use<big>text</big> tag. It is a container tag.5.Strike: - This tag is used to display the text ascut format. Cut format means a line drawn in themiddle of text. We can use <strike>text</strike>tag. It is container a tag.6.Small tag: - This tag is used to change thetext font size. This text display as small size comparison as other text size. We can use <small>text</small> tag. It is a container tag.
  67. 67. 7.Subscript tag: -This tag is used to displaythe text as subscript format. E.g H2O. In this2 display as subscript format. We can use<sub>text</sub> tag. It is a container tag.8.Superscript tag: -This tag is used to displaythe text as superscript format. E.g 10TH. In thisTH display as superscript format. We can use<sub>text</sub> tag. It is a container tag.9.Strong tag: -This tag is used to display thetext as bold format same as Bold tag. We can use<strong>text</strong> tag. It is container a tag.10.Em tag: - This tag is used to display the textas Italic format same as Italic tag. We can use <em>text</em> tag. It is container a tag.
  68. 68. 11.Teletype tag: - This tag is used to change the font text that of Teletype font. This fontdisplay as monospaced typewriter font. We canuse <tt>text</tt> tag. It is container a tag.12. Extra tag: - All these tags works same asItalic tag.1. <Cite>book</cite>Indicate that the text is from a book or other document.2.<address>HTML</address>This tag is used to display authors address andother related information.3.<dfn> definition<dfn> Indicate that the text is a definition. 4. <var> variable</var> Indicate that the text is a variable.
  69. 69. These tags are used to display data same assmall tag but small tag display data in darkformat.5.<samp>text</samp>Indicate that the text is a sequence of literalcharacters.6. <Code>text</code>Indicate that the text is code.13.Font tag: - This tag is used to change theformat of the text on the web page. If wewant to change the look of the text then weuse font tag like text size, colour, font style. The most important attributes are as follows:
  70. 70. 1.Face attribute: - This attribute is usedto change the font face style(Language Style).Like “Arial”, “Times New Roman” so on.<fontface=“Arial”>HTML</font>2. Size attribute: - This attribute is used tochange the font size. It is range 1 to 7 and bydefault size is 3.<font size=5>Text font Size</font>3. Color attribute: - This attribute is usedto change the font Colour style.<font color=green>Text font Colour</font>
  71. 71. Block level ElementsHeading tags: -Heading tags are used to give the heading to the text.The font size of the heading is bigger/larger then other normal text.In this we can used to <h1> to <h6> Heading level. When heading number is increase then font size is decrease.It is compulsory to close each heading tags. E.g <h1> guchet.orgfree.com</h1>Attributes of Heading tags: -1. Align:- These attribute control the horizontal alignment of the heading. Four types horizontal alignments left, right, center , justify.
  72. 72. E.g :- <h1 align=right> By default alignment is left.2. <pre> tag: - This tag display the text inexactly the same way as it typed. We candisplay data with white spaces. This is aTab tag.3. <Hr> tag: - This tag is used to displayhorizontal line on the document. <hr> tag is used todivide different sections to the document.Attributes of <Hr> tags: -1. Color:- This attribute give the colour of thehorizontal line.2.Width:- This attribute can be specify the widthof the horizontal line. 3.Size:- This attribute is used to give the size of the horizontal line. The default size is 3 pixels.
  73. 73. 4. Noshade:- This attribute renders the as anunshaded dark gray line.5. Align:- This attribute is used to give theposition of the horizontal line. Position are left ,right, center. E.g :-<hr align=center>4. Paragraph tag: - This tag is used to createParagraph format of a given text. We can use <p>tag>. This is a empty tag.Attributes: -1.Align: - This attribute is used to give thealignment to the Paragraph. Position are left ,right, center.
  74. 74. 5.Center tag: - This tag used to display thedata on the center position of the document.<center>Text<center> Some Special TagsComment tag:- Comment tag is used to attachextra information into our program. It makes thestatement non-Executable. <!………………>
  75. 75. &nbsp ; used to give space.&lt ; used to give less than sign (<).&gt ;used to give greater than sign (<).&copy; used to give the sign of copyright(©).&para; used to give pie symbol.&pound; used to display pound symbol n web page&sum ;used to give Summation sign (∑)&radic ; used to give Square root sign (√)&delta;used to give Greek Delta sign (∆)&reg ;used to give Registered trademark sign (®) ¼ ½ ¾ &amp; &trade;
  76. 76. LIST
  77. 77. List• Lists commonly are found in documents, including web pages. They are an easy and effective way to represent information.• In other words, list is a collection of items written in sequence.
  78. 78. Types of list1. Ordered List2. Unordered List3. Definition List
  79. 79. Ordered List It is a collection of items and each item has a number in front of it. Ordered list is also known as numbered list. <ol> tag is used to create ordered list. <Li> tag is used to insert items. <Li> stands for list item. Following number options are used with ordered list1. Plain numbers2. Small alphabets3. Capital alphabets4. Capital roman numbers5. Small roman numbers
  80. 80. Unordered List• It is a collection of items and each item has a bullet in front of it.• <ul> tag is used to create unordered list.• <Li> tag is used to insert items.• Following bullet options are used with unordered list • Disc o Circle  Square
  81. 81. Definition List• Definition list is set with <dl> ... </dl> tags. Definition lists consist of two parts:1. A term2. A description.• Definition list is the container element for dt and dd elements.• <dt> stands for Definition Term.• <dd> stands for Definition Description.
  82. 82. Nested List• Nested - Placing an element inside another element is called nested.• Nested List - Lists can be nested, meaning one list can be placed inside of another. A nested list, for example, can be used to create an outline. The following shows an example of a nested list:• Output Device 1. Speaker 2. Printer• Input Device A. Keyboard B. Mouse
  83. 83. HTML Color
  84. 84. HTML ColorsColor plays very important part for makingweb pages. For this purpose we use differenttype of color in html document. Color is theattribute for html tags it is used to give colorfor the text color and back ground color.E.g: - <font color=“red”>text</font> <body text=“blue”> <body bgcolor=“green”>
  85. 85. Three Color methods1.Color nameIn this method we supply color namedirectly when we want to give color to anytag.Example<body bgcolor=’red’><body text=’green’>
  86. 86. 2.hexadecimal color codes : - In hexadecimalcolor code we give code of particular color inhexadecimal formant. Example of colors Red #FF0000 White #FFFFFF Black #000000 Orange #FF8040 Brown #804000 Yellow #FFFF00 Pastel Green #00FF00 Pink #FF00FF We can create own color using hexadecimal color Code. E.g:- #8F0011
  87. 87. Color Values RGB:- The combination ofRed, Green and Blue values from 0 to 255gives a total of more than 16 million differentcolors. Most modern monitors arecapable of displaying at least 16384 differentcolors. Color name Color RGB Black rgb(0,0,0) Red rgb(255,0,0) Green rgb(0,255,0) Blue rgb(0,0,255) yellow rgb(255,255,0) cyan rgb(0,255,255) pink rgb(255,0,255) silver rgb(192,192,192) white rgb(255,255,255)
  88. 88. Adding Graphics
  89. 89. Adding Graphic to HTML Document• The <IMG> tag is used to embed (insert) graphics in HTML pages. They may be embedded inside other elements such as anchors. When embedded inside an anchor, then the user clicks on the image, they will go to the designated link. The <IMG> element has no ending tag.
  90. 90. Syntax of <img> tag• <img src=“PictureName.WithExtension”>• Example:• <img src=“a.jpg”>
  91. 91. Attribute Of <img> tag• SRC=The path and filename of the image which specifies its location.• ALT=This is a message displayed if the image could not be found.• ALIGN= Sets the image alignment.• VSPACE=The space between the image and the text above and below it in pixels.• HSPACE=The space between the image and the text to the left and right of it in pixels.• BORDER=Sets a border of the specified width in pixels to be drawn around the image.• HEIGHT=The height of the image.• WIDTH=The width of the image.
  92. 92. <Marquee> tag
  93. 93. MARQUEE• If you want your text to move with in the screen, then you can use <marquee> tag.• The HTML <marquee> tag is used for scrolling piece of text or image displayed on your web page.
  94. 94. Attributes of Marquee tag Attribute Attribute Description Name Value1. 1Behavior scroll Defines the type of slide scrolling. alternate2 bgcolor Color name Specifies the background color.3 direction up Defines the direction down of scrolling the left content. right
  95. 95. 4 height pixels or Defines the height of % marquee.5 hspace Pixels or Specifies horizontal space % around the marquee.6 loop number Specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
  96. 96. 7 scrolldelay seconds Defines how long to delay between each jump. This attribute takes the time in milliseconds8 scrollamount number This specifies how far the text in the marquee should move.9 width pixels or Defines the width of % marquee.10 vspace pixels Specifies vertical space around the marquee.
  97. 97. Table
  98. 98. Table• The TABLE element defines a table for data arranged in rows and columns. Current visual browsers will not display anything until the complete table has been downloaded.• A simple HTML table consists of the table element and one or more tr, th, and td elements.• <TR> Stands for Table Row• <TH> Stands for Table Heading• <TD> Stands for Table Data• The <Caption> tags
  99. 99. Attributes of <table> tag
  100. 100. Attribute Attribute Description Name Value1 align left Specifies the center alignment of a table right2 Bgcolor Color name Specifies the background color for a table3 Border Pixels Specifies the width of the borders around a table4 Bordercolo Color name Specifies the color of r the borders around a
  101. 101. 5 cellpaddin pixels Specifies the space g between the cell wall and the cell content6 cellspacin pixels Specifies the space g between cells7 frame void Specifies which parts of above the outside borders that below should be visible hsides lhs rhs vsides box
  102. 102. 8 Rules none Specifies which parts group of the inside borders s that should be visible rows cols9 width all pixels Specifies the width % of a table10 BorderColorDa Color Specifies the color of rk name the border’s shadow11 Background Path Specifies the of background picture pictur for a table
  103. 103. Attributes of the<td> & <th> of the<table>tagAttribute Attribute Value DescriptionNameBgcolor Color name Specifies the background color of cell of tableBackground Path of picture Specifies the background picture of cell of tableColspan Any numeric Merge the value column of table rowspan Any numeric Merge the rows value of table
  104. 104. Link
  105. 105. Link• Link (or hyperlink) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.• When you move the cursor over a link in a Web page, the arrow will turn into a little hand.• By default, links will appear as follows in all browsers:• An unvisited link is underlined and blue• A visited link is underlined and purple• An active link is underlined and red
  106. 106. • Links are specified in HTML using the <a> tag.• Two types of link:1. Internal link2.External link
  107. 107. • Internal Link –Internal link is that you can click on to jump to a new section within the current document.• In other words, an internal link allows you to link to another section on the same web page.• So, it basically scrolls the page up or down to the desired location. This is helpful to the user to quickly jump to the information he/she is looking for.
  108. 108. • External Link –• External HTML links are those HTML links that go to another Web site or a new page.
  109. 109. Image Map
  110. 110. Image Map• Image map is an image where you can click on the particular area of image and redirect to another page.
  111. 111. • <img src=“path of pic” usemap="#a">• <map name=a>• <area href=“destination" shape="rect" coords=“4 coordinates">• </map>
  112. 112. Usemap attribute: - This attribute takes thename of image. usemap attribute create linkbetween map tag and image tag.<img src=“sunset.jpg” usemap=“#vmc”>Usemap tag is used to # symbol.
  113. 113. Frame
  114. 114. Frame• With frames, you can display more than one HTML document in the same browser window.• Frames allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame". the others.
  115. 115. • <Frametset> element• The frameset element holds one or more frame elements. Each frame element can hold a separate document.• <frame> element• The <frame> tag defines one particular window (frame) within a frameset.
  116. 116. Attribute Of<frameset> tag
  117. 117. Attribut Attribute Descriptione Name Valuecols column size Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100%rows row size Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100%
  118. 118. Attribute of <frame> tagAttribute Attribute DescriptionName Valuename frame name Name of the framenoresize noresize When set to noresize the user cannot resize the frame.
  119. 119. scrolling yes Determines no scrollbar auto actionsrc URL Location of the frame contents file
  120. 120. IFrame
  121. 121. IFRAME• An iframe is used to display a web page within a web page. OR• The HTML <iframe> tag is used to create an inline frame.
  122. 122. Attribute of <iframe> tagAttribute Attribute DescriptionName valuesrc URL Location of the (address) frame contents filealign left Specifies how to right align the iframe bottom according to the top surrounding text middle
  123. 123. align left Specifies how to align right the iframe according to bottom the surrounding text top middleframeborder 0 or 1 Specifies whether or not to display border around the frame.height pixels or Specifies the height of % the inline frame. pixels or Specifies the width of Width % the inline frame.
  124. 124. name frame name Name of the framescrolling yes Determines no scrollbar auto action
  125. 125. Form
  126. 126. Form• An HTML form is used to pass data to a server.• The <form> tag is used to create an HTML form for user input.
  127. 127. • How does an HTML form work?• A web form has two parts:• Front End• Back End• the HTML ‘front end’ and a back end form processor. The HTML front end part handles the presentation while the back end handles the form submissions (like saving the form submissions, sending emails etc). The back end form processor script is usually written in languages like PHP, ASP.
  128. 128. The image belowillustrates the concept:
  129. 129. 1. A visitor visits a web page that contains a form.2. The web browser displays the HTML form.3. The visitor fills in the form and submits4. The browser sends the submitted form data to the web server5. A form processor script running on the web server processes the form data6. A response page is sent back to the browser.
  130. 130. Tags used in <form>
  131. 131. • <input> tag• <textarea> tag• <select> tag
  132. 132. Attribute of<input> tag
  133. 133. Attribute Attribute DescriptionName ValueType Text Specifies the type of Password <input> element Radio Checkbox Button Submit Reset file hidden Text image Specifies the value of an
  134. 134. Prologue
  135. 135. Explain the prologue and its use in HTML document.• The prologue appears at the beginning of every HTML page, identifies what follows as an HTML document allowing browsers and other special software to distinguish HTML documents from other types (DTDs) of SGML(STANDARD GENERALISED MARKUP LANGUAGE).• All HTML documents written according to the current HTML specification (Version 4.01) should use the prologue tag displayed ahead.
  136. 136. • <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 Transitional//EN" >1. HTML - The SGML document type being declared: <HTML> ... </HTML>2. PUBLIC - Identifies the information in quotes as a Formal PUBLIC Identifier.3. "-"-The minus sign designates unregistered organization. ISO, registered (+) or unregistered (-) are possible here. W3C is not currently registered with ISO, therefore the (-) is used.4. W3C - identifies the party responsible for creation/maintenance of the DTD. If the DTD comes from IETF, W3C, etc. youll see their ID here.
  137. 137. 5. DTD - describes the type of object, called a Public Text Class. In this case, it is a DTD.6. HTML 4.01 Transitional - is the Public Text Description. Here youll find the DTDs name, plus flavors such as version numbers, "strict", "draft," "transitional," etc.7. EN - identifies the Public Text Language, describing the natural language in which the public text is written, represented by two, uppercase-only characters from ISO 639. "EN"= English.
  138. 138. CSS(Cascading Style Sheet)
  139. 139. What is CSS?• CSS stand for the term "Cascading Style Sheets".• CSS was first developed in 1997• CSS defines how to display the content contained in markup and is stored in style sheets.• Style sheets give you greater control over the presentation of your web documents.• Using style sheets, you can specify many stylistic attributes of your web page, such as text color, margins, and font sizes, font weights and more.
  140. 140. Types of Style Sheet• There are 3 different types of style sheets:1. In-Line Style Sheet2. Internal Style Sheet3. External Style Sheet
  141. 141. CSS of Syntax• Learn how to write a cascading style sheet style.• A CSS style has the syntax:• Selector• {• property : value ;• }
  142. 142. CSS Selectors• Selectors are the way that you define what is going to be styled and what isnt.• There are three basic types of selectors: • Type selectors • Class selectors • Id selectors
  143. 143. • Type selectors That select a specific tag to style • Class selectors That select elements with an assigned class • Id selectors That select the element on the page with that specific ID  Grouping CSS Selectors• You can apply the same style to multiple selectors through grouping.
  144. 144. What is a Comment?• A comment is a string of code within HTML and CSS that is not viewed or acted upon by the browser or parser. It is simply in the code to provide information about the code or other feedback from the code developers.• An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment.• <!--This is a comment. -->• <!-- Comments are not displayed in the browser -->
  145. 145. CSS Comments• You can also comment CSS to provide information for future designers or just remind yourself what you meant when you built the styles.• These are added to the HEAD of a document inside STYLE tags:• <style> <!-- p { color: red; } --> </style>
  146. 146. In-line Stylesheet• In in-line stylesheet, the style attribute is used directly define the style for a particular tag.• By using style attribute in each tag we can define its style.• Inline style sheet is a term that refers to style sheet information being applied to the current element.• By this, we mean that instead of defining the style once, then applying the style against all instances of an element.• <P style="font-size: x-large; color: #ff9900">• Using inline style sheets </p>
  147. 147. Internal Style sheets.• An Embedded Style sheet resides in- between the <head> </head> tags.• The declarations are positioned between <style> </style> tags.• Embedded style sheets are only connected to the page, and can not be used by another file like External Style sheets can.• You can list as many declarations as you wish, but it is recommended that if you have a long list ,that you use an external style sheet as a matter of organization.
  148. 148. • <head>• <style>• body { background: #white; color: black }• p { background: #white; text-align: left; color: #444; font-size: 12px; font-family:• Arial }• h1 { color: #000000; text-align: center}• </style>• </head>
  149. 149. External Stylesheets• External style sheets are the most flexible because they allow you to assign the same styles to multiple Web pages. You can attach external style sheets in this ways:• <link rel="stylesheet" type="text/css" href="styles.css" />
  150. 150. It has a number of advantages over in-line style sheets.1.They reduce the amount of code on the individual HTML page because you no longer need an in-line style sheet.2.Many HTML pages can link to a single external style sheet meaning it is quick and easy to apply the same styles across a whole website.
  151. 151. • Below we can see an example of a small external style sheet:• h1• { color: #C3E7FF;• letter-spacing: 2px;• background-color: transparent;• }• .msgTitle• {• background: #FFFFCC;• color: black;• font-size: 10pt;• font-weight: bold;• }
  152. 152. • This is assuming that your style-sheet is called ‘stylesheet.css’ and is in a folder in the root directory of your site called ‘Styles’.• This link is placed in the <HEAD> of the page. To link to it from points within your page, you use the same process as before for in-line style-sheets.
  153. 153. Java Script
  154. 154. • JavaScript is THE scripting language of the Web.• JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more• The name JavaScript is owned by Netscape• Microsoft calls its version of the language JScript.• The generic name of the language is Ecma Script.
  155. 155. What is JavaScript?• JavaScript is a programming language that is used to make web pages interactive.• It runs on your computer and so does not require constant downloads from your web site.• Java script is mostly used in websites because mostly browser understands java script.• JavaScript can also be used to tie together different web based environments like HTML, plug-ins, and Java.
  156. 156. Are java and java script same?
  157. 157. Are Java and JavaScript the same?• NO! Java and JavaScript are two totally different languages in both idea and design
  158. 158. First program of java script
  159. 159. How to Put a JavaScript into an HTML page• First make this program then understand line by line.• <html> <body> <script> document.write("Hello my name is navjeet"); </script> </body> </html>• The document.write command is a regular JavaScript command for writing output to a page.• It works like printf and cin>> remind c or c++.
  160. 160. JavaScript Comments• Comments are dead line and use for making code readable .it also help to solve error problems. And make program easy to learn. Comments are two types . 1. single line comment 2. multi line comment• Single line comments• <script> // Write a country name document.write("<h1>INDIA</h1>"); // Write COMPANY NAME document.write("<p>INFOSYS.</p>"); </script>
  161. 161. Multi-Line Comments• <script > /* this is my company data */
  162. 162. Variables
  163. 163. JavaScript Variables• Variable are used to give temp name to assign variable name in memory.JavaScript variables are used to hold values or expressions.• A variable can have a short name, like x, or a more expressive name, like product_id.• Rules for JavaScript variable names:• Variable names are case sensitive (B and b are two different variables)• Variable names must begin with a letter or the underscore character• No number values are used as a first char when assign variable.• No Keyword or reserve word are used as variable name.
  164. 164. How to Declaring (Creating) JavaScript Variables• Creating variables in JavaScript is most frequently referred to as "declaring" variables.• JavaScript variables are declared with the var statement:• var car; var age;• However, you can also assign values to the variables when you declare them:• var age=29; var car=“Audi";• After the execution of the statements above, the variable age will hold the value 29, and car will hold the value Audi.
  165. 165. Operators
  166. 166. Arithmetic operators• Operator Description• + Addition• - Subtraction• * Multiplication• / Division• % Modulus• ++ Increment• -- Decrement
  167. 167. Relational Operators• == Equal• != Not Equal• < Less Than• <= Less than or Equal to• > Greater Than• >= Greater than or Equal to
  168. 168. Logical operators• && Logical And• || Logical Or• ! Logical Not Assignment Operators• = Equal to
  169. 169. Conditionalstatements
  170. 170. Conditional Statements• Very frequently when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.• In JavaScript we have the following conditional statements:• if statement - use this statement to execute some code only if a specified condition is true• if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false• if...else if....else statement - use this statement to select one of many blocks of code to be executed• switch statement - use this statement to select one of many blocks of code to be executed
  171. 171. If Statement• Use of if statement to execute some code only if a specified condition is true.• Syntax• if (condition)  {   code to be executed if condition is true  }• Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!
  172. 172. If...else Statement• Use the if....else statement to execute some code if a condition is true and another code if the condition is not true.• Syntax• if (condition)   {   code to be executed if condition is true   } else   {   code to be executed if condition is not true   }
  173. 173. If...else if...else Statement• Use the if....else if...else statement to select one of several blocks of code to be executed.• Syntax• if (condition1)  {   code to be executed if condition1 is true  } else if (condition2)  {   code to be executed if condition2 is true  } else   {   code to be executed if condition1 and condition2 are not true  }
  174. 174. The JavaScript Switch Statement• Use the switch statement to select one of many blocks of code to be executed.• Syntax• switch(n) { case 1:   execute code block 1   break; case 2:   execute code block 2   break; default:   code to be executed if n is different from case 1 and 2 }
  175. 175. JavaScript Loops• Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.• In JavaScript, there are two different kind of loops:• for - loops through a block of code a specified number of times• while - loops through a block of code while a specified condition is true
  176. 176. The for Loop• The for loop is used when you know in advance how many times the script should run.• Syntax• for (var=startvalue;var<=endvalue;var=var+increment) { code to be executed }
  177. 177. The while Loop• The while loop is executed when the condition is true then block of code is executed when the condition is false the loop will terminate.• Syntax• while (var<=endvalue)  {   code to be executed  }• Note: The <= could be any comparing statement.
  178. 178. The do...while Loop• The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE, and then it will repeat the loop as long as the specified condition is true.• Syntax• do  {   code to be executed  } while (var<=endvalue);
  179. 179. Popup ORDialogue boxes
  180. 180. JavaScript Popup Boxes• Three types of popup boxes1. Alert box2. Confirm box3. Prompt box
  181. 181. Alert Box• An alert box is often used if you want to make sure information comes through to the user.• When an alert box pops up, the user will have to click "OK" to proceed.• Syntax• alert("write some text here");
  182. 182. Confirm Box• A confirm box is often used if you want the user to verify or accept something.• When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.• If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.• Syntax• confirm("write text here");
  183. 183. Prompt Box• A prompt box is often used if you want the user to input a value before entering a page.• When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.• If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.• Syntax• prompt("sometext","defaultvalue");
  184. 184. Array
  185. 185. Array• The array elements are accessed by an index value. The elements are stored in a contiguous memory, the first element of an array starts from the 0th index. In java,an array is object it has various properties.• Syntax• Arrayname = new Array(size)
  186. 186. Example of Array• <script>• var a,b• a=new Array(5)• a[0]="Gagan"• a[1]="Summar"• a[2]="Sony"• a[3]=11• a[4]=91• for(i=0;i<5;i++)• document.write(a[i]+"<br>");• </script>
  187. 187. Dense array• Dense array is a special type of array in which the declaration and initialization is done at the same time• Syntax• Arrayname=new Array(value0,value1,…………..valuen)• Example of Dense Array• <script type="text/javascript">• var a,b• a=new Array("Gagan","summar","sharan",6,7)• for(i=0;i<5;i++)• document.write(a[i]+"<br>");• </script>
  188. 188. Array is an object and it provides several methods.• 1 join() The join method joins all elements of an array as a single string.• 2 Reverse() This method reverse the order of array elements.•• Properties of an array• Array provides properties. A property identifies the state of an object• Length The length property returns the numbers of elements in an array.
  189. 189. Examples of join• <script>• var a• a=new Array(10)• for(i=0;i<10;i++)• a[i]=prompt("Enter elements")• b=a.join()• document.write(b);• </script>
  190. 190. Example oh reverse()• <script>• var a,b• a=new Array(5)• a[0]="Gagan"• a[1]="Summar"• a[2]="raj"• a[3]=83• a[4]=85• b=a.reverse()• document.write(b);• </script>
  191. 191. Example of length• <script>• var a,b• a=new Array(5)• a[0]="Gagan"• a[1]="Sonu"• a[2]="Summar"• a[3]=67• a[4]=89• b=a.length• document.write(b);• </script>
  192. 192. Functions
  193. 193. JavaScript Functions• Methods allow the user to perform some actions.• A function contains code that will be executed by an event or by a call to the function.• You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file).• Functions can be defined both in the <head> and in the <body> section of a document.• However, to assure that a function is read/ loaded by the browser before it is called. It could be wise to put functions in the <head> section.
  194. 194. Types of function1. Predefined or library functions2. User defined function
  195. 195. Predefined function• These functions are already defined in java script for example• parseInt()• parseFloat()• Write() etc.
  196. 196. • <script>• function color()• {• document.bgColor="#"+(Math.random()*255)• document.bgColor="#"+(Math.random()*255)• document.bgColor="#"+(Math.random()*255)• }• setInterval("color()",1000)• </script>
  197. 197. DOM(Document Object Model)
  198. 198. Document Object Model• It is a set of objects about windows and related things on the screen. The use of the word object comes from object- oriented programming. These objects have1. Properties2. Methods3. Events
  199. 199. Properties• Properties are pieces of data about the object.• JavaScript objects provide some properties.• Properties allow the user to change JavaScript settings.• To use a property of an object one needs to prefix the property with the object-name followed by dot (.)• For example, A array object has a length property.
  200. 200. Method or Function• A method tells an object what to do.• For example, A Array has a reverse() method, which you use reverse the order of array elements.• There are hundreds of methods available in JavaScript.• Methods allow the user to perform some actions.• For that one only need to know the method calling syntax.
  201. 201. Event• Events are the actions which tells the browser that something can happen to an object.• Events provides various event handlers.• When the event occurs, event handler executes.• Browser informs JavaScript code about events that happen during its activity using events.• The values of these attributes are JavaScript code
  202. 202. DOMHierarchy
  203. 203. The DOM Hierarchy• These objects come in a hierarchy which is like this:
  204. 204. The document object• It represents the actual content displayed in the browser window.• For example –• <script>• document.bgColor="yellow";• document.write("This is some <b>bold text</b>");• </script>
  205. 205. Location object• The location object holds information about the URL (uniform resource locator) of the server that sent the web page.• The href property, which is simply the URL of the server.• Example• <script>• location.href="http://www.google.com/";• </script>• Immediately switches to google.• You can use it to re-direct from one URL to another, newer site.
  206. 206. String object• Every string in java script is an object.• It has number of properties, method which helps to perform a variety of manipulation on a given string. Methods.• Example.• <script>• var a="Jackie Chan"• document.write(a+"<br>")• document.write(a.big()+"<br>")• document.write(a.bold() + "<br>");• document.write(a.fontcolor("red") + "<br>");• </script>
  207. 207. Math Object• The math object provides the methods and properties offered by arithmetic operators.• Methods Description• abs() Calculates the absolute value of anumber• ceil() Returns the next integer greater than or equal to a number• floor() Returns the next integer less than or equal to a number• pow() Calculates the value of one number to the power of another number• Sqrt() Calculates the square root of a number.
  208. 208. • Example• <script>• document.write(Math.abs(-15))• document.write(Math.ceil(15.45))• </script>• Ans: • 15 • 16
  209. 209. Date Object• The date object enables javascript programmers to create an object that contains information about a particular date and provides a set of methods to work with that information.• To create an instance of the object, use the keyword new as follows.• Var my_date= new Date(parameters);
  210. 210. Events• Every element on a web page has certain events which can trigger a JavaScript.• For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button.• We define the events in the HTML tags.• onBlur – This event fires when an element loses the input focus• onChange – It fires when data in an HTML control changes (It includes text fields, buttons, lists, etc).• onClick – It executes when an element is clicked.
  211. 211. • onFocus – It happens when an element gets the focus• onLoad – It executes when the page first loads in the browser.• onMouseOut – It happens when mouse out from any control HTML element.• onMouseOver – It happens when mouse cursor moves over an element.• onReset – It happens when the user clicks the Reset button in an HTML form.• onSelect – It happens when the user makes a selection.• onSubmit – It happens when the user clicks the Submit button in an HTML form.• onUnload – It happens the browser unloads a page.
  212. 212. Form validations
  213. 213. JavaScript Form Validation• JavaScript can be used to validate data in HTML forms before sending of the content to a server.• Form data that typically are checked by a JavaScript could be:• has the user left required fields empty?• has the user entered a valid e-mail address?• has the user entered a valid date?• has the user entered text in a numeric field?
  214. 214. Cookies
  215. 215. What is a Cookie?• A cookie is a variable that is stored on the client computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.• Name cookie• Password cookie• Date cookie