Html.ppt

608 views

Published on

Full ppt on HTML

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
608
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html.ppt

  1. 1. Created By:- Mr. Sunil Thakur
  2. 2. Overview  HTML  DHTML  JAVA SCRIPT
  3. 3. “Knowledge “ Web server:- A system on the internet congaing one or more web site. Web site:- A collection of one or more web pages Web pages:- Single disk file with a single file name Home pages:- First page in website
  4. 4. HTML:-  HTML(Hypertext markup language) is used to define the different part of page.  Telling the browser what to do, and what props to use.  A series of tags that are integrated into a text document
  5. 5. Creating a HTML File 1. Open Notepad 2. Click on File -> Save as… 3. In the File name pull-down box, type in webpage.html 4. Click on Save 5. Type in content for your file 6. Once you finished the content, click on File -> Save
  6. 6. HTML TAGS What are the basic tag?  <html> </html>  <head> </head>  <title> </title>  <Body> </body>  <p>  <br>  <Center> </Center>  <b></b> e.g. :-<b> APJ</b> result = APJ  <i></i> e.g. :-<i> APJ</i> result = APJ
  7. 7. Tags in head • <HTML>…</HTML>-- All the info web page. Or all tags • <HEAD>...</HEAD>-- contains information about the document • <TITLE>...</TITLE>-- puts text on the browser's title bar.
  8. 8. Tags in body  Heading: <H1> </H1>  Center:<Center> </Center>  Line Break <P> ,<Br>  Phrase Markups: <I></I> ,<B></B>
  9. 9. HTML Document Structure <html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here “THIS IS MY WEB PAGE” </body> </html>
  10. 10. Add Image in web page  Use <IMG SRC=imagefilename> tags e.g. :- <img src=D:wallpaperbad boy
  11. 11. Image Formats  .gif -Graphics Interchange Format  .jpeg or .jpg -Joint Photographic Experts Group  .bmp -bitmap
  12. 12. Image Size  Computer images are made up of “pixels”  <IMG HEIGHT=“100" WIDTH=“150" SRC="image.gif"> Width Height
  13. 13. How to make create color Color names : <Font color=white> • Changing the Background color <BODY BGCOLOR=#19378a> • Changing Text color <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff> • Spot color <FONT COLOR=#66ffcc>WENT'99</FONT> • Image Background <BODY BACKGROUND=bgimg.gif >
  14. 14. Font  To change text size  <font size=“+3”>Hello</font>  Output: Hello  To change text color  <font color=“red”>Hello</font>  Output: Hello  Using both  <font size=“+3” color=“red”>Hello</font>  Output: Hello Tag attribute
  15. 15. Headings  There are 6 heading commands. <H1>This is Heading 1</H1> <H2>This is Heading 2</H2> <H3>This is Heading 3</H3> <H4>This is Heading 4</H4> <H5>This is Heading 5</H5> <H6>This is Heading 6</H6>
  16. 16. List Unordered list -Code: <ul> <li>Coffee</li> <li>Milk</li> </ul> -Output:  Coffee  Milk  Ordered list -Code: <ol> <li>Coffee</li> <li>Milk</li> </ol> -Output: 1. Coffee 2. Milk
  17. 17. Table <table border=“1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Heading Another Heading Row 1, cell 1 Row 1, cell 2 Row 2, cell 1
  18. 18. Create Links  A Hypertext link  < a href=“http://www. apjim.org”>apj Home</a>  Output: APJ Home  A Email link  <a href=“mailto:RAMGOPAL@gmail.com”> Email me</a>  Output: Email me
  19. 19. Forms  A form is an area that can contain form elements.  <form></form>  Commonly used form elements includes:  Text fields  Radio buttons  Checkboxes  Submit buttons
  20. 20. Text Input Fields  Used when you want the user to type letters, number, etc. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>  Output First name: Last name:
  21. 21. Submission Button  When user clicks on the “Submit” button, the content of the form is sent to another file. <form name="input" action="html_form_action. asp" method="get"> Username: <input type="text" name="user"> <br> <input type="submit" value="Submit"> </form>  Output Username:
  22. 22. Text Box  Used when you want to get input from user. <form> <p>Please provide your suggestion in the text box below:</p> <textarea row=“10” cols=“30”> </textarea> </form> • Output Please provide your suggestion in the text box below:
  23. 23. Pull-down Menu  Used when you want user to respond with one specific answer with choices you given. <p>Select a fruit:</p> <select name"Fruit"> <option selected> Apples <option> Bananas < option > Oranges </select> • Output Select a fruit:
  24. 24. How is a HTML File Looks Like
  25. 25. Sample page of Code <html> <head><title>First Page</title></head> <body> Hello! This is my first page of code. I can't believe I'm on my way to being a webmaster. This is so great!!! </body> </html>
  26. 26. What does that look like?
  27. 27. DHTML  Dynamic HTML.  Just as access is dynamic database environment.  Can have control that respond to events.  Can have control code module.  Can be written in VB(script)
  28. 28. INTERNRT EXPLORAL DHTML  Developing for two DHTML environment takes three time the developing time.  IE support active Xcontrol .  IE support VB script.  80% of the world browsing activity is done with IE.
  29. 29. ADVANTAGE OF DHTML  Centralized code for distribution.  Can be secure by using https.  Richer event model higher control are display.  Small foot print  Can monitor usage easier.
  30. 30. DISADVANTAGE.  Use script language that mean:- -All variable are variants. -Error handling is limited. • Debugging can be awkward.
  31. 31. FEATURE  Data binding.  Behaviors or script.  Support for XML.  flexible object.
  32. 32. JAVASCRIPT :-  JavaScript is programming language designed for webpage's .protocols used by the JavaScript is “http://”  Developed by :Netscape. In 1995  Purpose: to Create Dynamic websites.  Widely Used (web designing).
  33. 33. Why Use JavaScript  JavaScript enhances Web pages with dynamic and interactive features.  JavaScript runs in client software.
  34. 34. What Can JavaScript Do?  Common JavaScript tasks can replace server-side scripting.  JavaScript enables shopping carts, form validation, calculations, special graphic and text effects, image swapping, image mapping, clocks, and more.
  35. 35. Operators in JavaScript  Operators are used to handle variables.  Types of operators with examples: -Arithmetic operators, such as plus. -Comparisons operators, such as equals. -Logical operators, such as and. -Control operators, such as if. -Assignment and String operators.
  36. 36. Example Of JavaScript <html> <head> <SCRIPT language = java script> Var name=prompt(“RAMGOPAL”); </SCRIPT> </head> <body> <SCRIPT language =“java script”> Document .write(“<H2>hello RAMGOPAL</H2>) </script> </body> </html>
  37. 37. ADVANTAGE OF JAVASCRIPT  Interpreted language.  Embedded with HTML.  Minimal syntax- easy to use.  Quick development.  Designed for simple and small program.  Easy Debugging and testing.

×