HTML & JAVA Script


Published on

There are also a lot of work of animation in this slide.....I hope you'll all like it.

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML & JAVA Script

  1. 1. 1
  2. 2. 3
  3. 3. Introduction Of html 4
  4. 4. HTML is a language for describing web pages:HTML stands for Hyper Text Markup Language. HTML is not a programming language, it is a markup language. A markup language is a set of markup tags. HTML uses markup tags to describe web pages. HTML documents contain HTML tags and plain text. HTML documents are also called web pages. HTML Documents = Web Pages
  5. 5. In 1980, physicist Tim BernersLee, who was a contractor at CERN. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in the last part of 1990. In that year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN.
  6. 6. First specifications:The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991. It describes 20 elements comprising the initial, relatively simple design of HTML. Berners-Lee considered HTML to be an application of SGML. It was formally defined as such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the first proposal for an HTML specification: "Hypertext Markup Language (HTML)" Internet-Draft by Berners-Lee and Dan Connolly, which included an SGML Document Type Definition to define the grammar. 7
  7. 7. Brief HTML Background:HTML has not been around for many years. November 1990 marks the day of the first web page and back then there were little to no HTML standards to be followed. A group called the World Wide Web Consortium(W3C) was then formed and have since set the standards that are widely accepted. Preparation for HTML:Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and the dedication ! Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it.
  8. 8. Tag :- Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. Tags look like this: <tag> Element :- A complete tag, having an opening <tag> and a closing </tag>. Attribute :- Used to modify the value of the HTML element. Elements will often have multiple attributes.
  9. 9. HTML markup tags are usually called HTML tags:HTML tags are keywords surrounded by angle brackets like <html>. HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag, the second tag is the end tag. Start and end tags are also called opening tags and closing tags. Although some tags, known as empty elements, are unpaired like <br>.
  10. 10. Element examples:Header of the HTML document:<head>...</head>. Usually the title should be included in the head, for example: <html> <head> <title>The title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  11. 11. A Hyperlink (or link) 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. Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways:To create a link to another document, by using the href attribute. To create a bookmark inside a document, by using the name attribute.
  12. 12. Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML.
  13. 13. HTML forms are used to pass data to a server. The <form> tag is used to create an HTML form Text Fields:<input type="text" /> defines a one-line input field that a user can enter text into. Password Field:<input type="password" /> defines a password field. Radio Buttons:<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices. Checkboxes :<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. Submit Button :<input type="submit" /> defines a submit button.
  14. 14. EXAMPLE :<html> <head> <p> <font size="9" face="Times new Roman" color="red"> <h1>NIIT</h1> </font> </p> <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /><br/><br/> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female<br/><br/> <input type="checkbox" name="course" value=“DIFA" /> DIFA student<br /> <input type="checkbox" name="course" value="GNIIT" /> GNIIT student <form name="input" action="html_form_action.asp" method="get"><br/> <br/> Username: <input type="text" name="user" /><br/> Password: <input type="password" name="pwd" /> <input type="submit" value="Submit" /> </form> <p>If Want to go NIIT Home page then <a href="">click here</a> </head> </html>
  15. 15. An HTML Application (HTA; file extension “.hta") is a Microsoft Windows application that uses HTML and Dynamic HTML in a browser to provide the application's graphical interface. A regular HTML file is confined to the security model of the web browser, communicating only to web servers and manipulating only webpage objects and site cookies. An HTA runs as a fully trusted application and therefore has more privileges, like creation/editing/removal of files and Windows Registry entries. Because they operate outside the browser's security model, HTAs cannot be executed via HTTP, but must be downloaded (just like an EXE file) and executed from local file system.
  16. 16. “Now we are moving on JAVA Script.” 19
  17. 17. 20
  18. 18. Introduction Of Java Script 21
  19. 19. JavaScript is a prototype-based scripting language that is dynamic, weakly typed. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. JavaScript is an Object Based Programming language. An Object Based Programming language allows you to define your own objects and make your own variable types. JavaScript = ECMAScript JavaScript is an implementation of the ECMAScript language standard. JavaScript was formalized in the ECMAScript language standard and is primarily used in the form of client-side JavaScript, implemented as part of a Web browser in order to provide enhanced user interfaces and dynamic websites. JavaScript's use in applications outside Web pages — for example in PDF documents, site-specific browsers, and desktop widgets — is also significant. 22
  20. 20. JavaScript is a scripting language. A scripting language is a lightweight programming language. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. JavaScript is an interpreted language (means that scripts execute without preliminary compilation). JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. 23
  21. 21.  JavaScript gives HTML designers a programming tool.  JavaScript can react to events .  JavaScript can read and write HTML elements.  JavaScript can be used to validate data.  JavaScript can be used to detect the visitor's browser .  JavaScript can be used to create cookies 24
  22. 22. NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++. It is true that both have a C-like syntax, the C language being their most immediate common ancestor language. They are both objectoriented and are widely used in client-side Web applications. JavaScript also has many functional features based on the Scheme language. However, the similarities end there: Java has static typing.   Java is more strongly typed.   Java is loaded from compiled bytecode.  Java's objects are class-based.   JavaScript's typing is dynamic (meaning a variable can hold an object of any type and cannot be restricted). JavaScript is weakly typed. JavaScript is loaded as human-readable source code. JavaScript's are prototype-based. 25
  23. 23. JavaScript was originally developed by Brendan Eich of Netscape under the name Mocha, which was later renamed to Live Script, and finally to JavaScript mainly because it was more influenced by the Java programming language. JavaScript very quickly gained widespread success as a client-side scripting language for web pages. In November 1996, Netscape announced that it had submitted JavaScript to Ecma International for consideration as an industry standard, and subsequent work resulted in the standardized version named ECMAScript. JavaScript has become one of the most popular programming languages on the web. Initially, however, many professional programmers denigrated the language because its target audience was web authors and other such "amateurs", among other reasons. 26
  24. 24. Brendan Eich was a major part of the JavaScript development for the Netscape Browser, and the chief architect for the Project. He has been Chief Technology Officer (CTO) for Mozilla since 2005. He currently servers on the board of directors for the Mozilla Foundation. 27
  25. 25. The HTML <script> tag is used to insert a JavaScript into an HTML page that means to insert a JavaScript into an HTML page, use the <script> tag. Inside the <script> tag use the type attribute to define the scripting language. The <script> and </script> tells where the JavaScript starts and ends. JavaScript’s can be put in the <body> and in the <head> sections of an HTML page. Unlike HTML, JavaScript is case sensitive – therefore we watch capitalization closely when we write JavaScript statements, create or call variables, objects and functions. 28
  26. 26. Example of JAVA Script :<html> <body> <h1>My First Web Page</h1> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script> </body> </html> 29
  27. 27. JavaScript Statements:JavaScript is a sequence of statements to be executed by the browser. A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do. JavaScript Code:JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will write a heading and two paragraphs to a web page: <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> Note: Using semicolons makes it possible to write multiple statements on one line. 30
  28. 28. JavaScript Blocks:JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket “{“, and end with a right curly bracket “}”. The purpose of a block is to make the sequence of statements execute together. This example will write a heading and two paragraphs to a web page: <script type="text/javascript"> { document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); } </script> This example is just demonstrates the use of a block. Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met). 31
  29. 29. Some Browsers do Not Support JavaScript:Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement, like this: <script type="text/javascript"> <!-document.getElementById("demo").innerHTML=Date(); //--> </script> The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag. Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. Multi line comments start with /* and end with */. 32
  30. 30. JavaScript Variables:Variables are "containers" for storing information. As with algebra, JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. We can use variable with use “var”. Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables). Variable names must begin with a letter, the $ character, or the underscore character. Example:var x; var carname; OR var x=5; var carname="Volvo"; Note: When we assign a text value to a variable, use quotes around the value. Note: If we redeclare a JavaScript variable, it will not lose its value. 33
  31. 31. JavaScript Operators:“= “is used to assign values.”+”is used to add values. y=5; z=2; x=y+z; JavaScript Arithmetic Operators:Arithmetic operators are used to perform arithmetic between variables and/or values. 34
  32. 32. JavaScript Assignment Operators:Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5, the table below explains the assignment operators:- The + Operator Used on Strings:The + operator can also be used to add string variables or text values together. txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; x="5"+"5"; document.write(x); 35
  33. 33. JavaScript Comparison and Logical Operators:Comparison and Logical operators are used to test for true or false. Comparison Operators:Comparison operators are used in logical statements to determine equality or difference between variables or values. if (age<18) document.write("Too young"); 36
  34. 34. Logical Operators:Logical operators are used to determine the logic between variables or values. Conditional Operator:- JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax variablename=(condition)?value1:value2 Conditional Statements:- are used to perform different actions based on different conditions. if statement if...else statement if...else if....else statement switch statement 37
  35. 35. JavaScript Events:Events are actions that can be detected by JavaScript. By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript. Example:<html> <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First Web Page</h1> <p id="demo"></p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html> 38
  36. 36. JavaScript Popup Boxes JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box. Alert Box:- An alert box is often used if you want to make sure information comes through to the user. Syntax alert("sometext"); Confirm Box:- A confirm box is often used if you want the user to verify or accept something. Syntax confirm("sometext"); Prompt Box:- A prompt box is often used if you want the user to input a value before entering a page. Syntax prompt("sometext","defaultvalue"); 39
  37. 37. 40
  38. 38. 42