Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Web Development using HTML & CSS

28.815 visualizaciones

Publicado el

A simple presentation for anyone who wish to get started with the basics of Web Development using HTML & CSS.

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

Web Development using HTML & CSS

  1. 1. Web Development
  2. 2. A web page, broken down Web Browser Content/Data Client/Server Logic Styling Rules Website
  3. 3. A web page, broken down Web Browser IE/FF/Opera/Chrome HTML PHP/ASP/ JavaScript CSS Website
  4. 4. What is HTML <ul><li>HTML = H yper T ext M arkup L anguage </li></ul><ul><li>A markup language designed for the creation of web pages and other information viewable in a browser. </li></ul><ul><li>The basic language used to write web pages. </li></ul><ul><li>File extension: .htm, .html </li></ul>
  5. 5. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> My first web page </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Hello everyone </h1> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>The basic Tags
  6. 6. <ul><li>A tag is : Non-hierarchical keyword or term assigned to a piece of information </li></ul><ul><li>Document Tags :- The tags that are required for every HTML page we create. </li></ul><ul><li>Tag usually goes with pair: an open tag (<b>) and an end tag (</b>) </li></ul><ul><li>< > - Opening Tag </li></ul><ul><li></ > - Closing Tag </li></ul>HTML Tags
  7. 7. <ul><li>The element content is everything between the start and the end tag ( <p>Hello</p> ) </li></ul><ul><li>Some HTML elements have empty content( <br /> ) </li></ul><ul><li>Most HTML elements can have attributes </li></ul><ul><li>Its not case sensitive - <p> means the same as <P> </li></ul>HTML Syntax
  8. 8. <ul><li>Open a text editor ( e.g. Notepad ) </li></ul><ul><li>Create your HTML document </li></ul><ul><ul><li>Head - not displayed with body </li></ul></ul><ul><ul><li>Body </li></ul></ul><ul><li>Save the HTML (extension of .htm or .html) </li></ul><ul><li>Display your HTML document in WWW browser window. </li></ul><ul><li>Check your work and modify as necessary. </li></ul><ul><li>Upload it on the Web. </li></ul>Steps for creating a HTML file
  9. 9. Working it out…
  10. 10. HTML <body> Tag <ul><li>The body element defines the document's body and contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. </li></ul>
  11. 11. HTML <body> Tag (contd..) output
  12. 12. HTML <body> Tag (contd..) <ul><li>Attributes </li></ul><ul><ul><li>bgcolor - Specifies a background-color for a HTML page. </li></ul></ul><ul><ul><li><body bgcolor=&quot;#000000&quot;> </li></ul></ul><ul><ul><li><body bgcolor=&quot;rgb(0,0,0)&quot;> </li></ul></ul><ul><ul><li><body bgcolor=&quot;black&quot;> </li></ul></ul><ul><ul><li>background - Specifies a background-image for a </li></ul></ul><ul><ul><li>HTML page. </li></ul></ul><ul><li><body background=&quot;clouds.gif&quot;> </li></ul><ul><li><body background=&quot;;> </li></ul>
  13. 13. HTML <img> Tag <ul><li>The <img> tag embeds an image in an HTML page. </li></ul><ul><li>The <img> tag has attributes: src , alt, height, width. </li></ul>output HTML code <img src=&quot;sachin.jpg&quot; alt=&quot;sachin&quot; height = &quot;200&quot; width= &quot;200“>
  14. 14. HTML <p> Tag <ul><li>The <p> tag defines a paragraph. </li></ul>
  15. 15. HTML <li> Tag <ul><li>The <li> tag defines a list item. </li></ul>
  16. 16. HTML <a> Tag - Anchor <ul><li>The <a> tag defines an anchor. </li></ul><ul><li>Attribute for <A ...> HREF = &quot;URL&quot; </li></ul><ul><li>HREF indicates the URL being linked to. </li></ul><ul><li>A Hypertext link </li></ul><ul><ul><li>< a href=“ ”>Google</a> </li></ul></ul><ul><ul><li>Output: Google </li></ul></ul><ul><li>A Email link </li></ul><ul><ul><li><a href=“”>Email me</a> </li></ul></ul><ul><ul><li>Output: Email me </li></ul></ul>
  17. 17. HTML <pre> Tag <ul><li>The <pre> tag defines preformatted text. </li></ul><ul><li>Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks . </li></ul>
  18. 18. HTML <font> Tag <ul><li>The <font> tag specifies the font face, font size, and font color of text. </li></ul>
  19. 19. HTML <table> Tag <ul><li>The <table> tag defines an HTML table. </li></ul><ul><li>A simple HTML table consists of the table element and one or more tr, th, and td elements. </li></ul><ul><li>Attribute Values </li></ul>Specifies the alignment of a table align Specifies the space between cells cellspacing Specifies the space between the cell wall and the cell content cellpadding Specifies the width of a table width Specifies the width of the borders around a table border Description Value
  20. 20. HTML <table> example
  21. 21. HTML <form> Tag <ul><li>A form is an area that can contain form elements . </li></ul><ul><li>Commonly used form elements includes: </li></ul><ul><ul><li>Text fields </li></ul></ul><ul><ul><li>Radio buttons </li></ul></ul><ul><ul><li>Checkboxes </li></ul></ul><ul><ul><li>List Boxes </li></ul></ul><ul><ul><li>Submit buttons </li></ul></ul>
  22. 22. HTML <input> Tag <ul><li>Attribute Values </li></ul>Defines a one-line input field that a user can enter text into. Default width is 20 characters text Defines a submit button. A submit button sends form data to a server submit Defines a reset button. A reset button resets all form fields to their initial values reset Defines a radio button radio Defines a password field. The characters in this field are masked password Defines a checkbox checkbox Defines a clickable button button Description Value
  23. 23. HTML <input> Tag <ul><li>Text Input Fields . </li></ul><ul><ul><li>Used when you want the user to type letters, number, etc. </li></ul></ul>
  24. 24. HTML <input> Tag contd… <ul><li>Submit and Reset button . </li></ul>
  25. 25. HTML <input> Tag contd… <ul><li>Checkboxes and Radio Button . </li></ul>
  26. 26. HTML <select> Tag <ul><li>The <select> tag is used to create a select list (drop-down list) </li></ul>
  27. 27. HTML <marquee> Tag Hi there! Are you guys having fun learning HTML .
  28. 28. HTML Header Tags <ul><li><h1> defines the largest heading and <h6> defines the smallest heading. </li></ul>
  29. 30. What is CSS <ul><li>CSS = C ascading S tyle S heets </li></ul><ul><li>CSS is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document. </li></ul>
  30. 31. <ul><li>Selector  Property Value   </li></ul><ul><li>p { color: red ; } </li></ul><ul><li>The property is followed by a colon (:) and the value is followed by a semicolon(;) </li></ul>A Style
  31. 32. Applying CSS <ul><li>There are three ways to apply CSS to HTML. </li></ul><ul><li>Inline </li></ul><ul><ul><li>Affects only the element applied to. </li></ul></ul><ul><li>Internal or Embedded </li></ul><ul><ul><li>Affects only the elements in a single file. </li></ul></ul><ul><li>External </li></ul><ul><ul><li>Linked to an unlimited number of files. </li></ul></ul>
  32. 33. Applying CSS (Inline) <p style=&quot;color: red&quot;>Hello Pailan !!</p>
  33. 34. Applying CSS (Internal) <style type=&quot;text/css&quot;> body { font-family: Tahoma, Arial, sans-serif; ... } </style>
  34. 35. Applying CSS (External) <link rel= &quot; stylesheet &quot; type= &quot; text/css &quot; href= &quot; web.css &quot; />
  35. 36. Inline Style Sheets <ul><li>Inline styles are applied straight into the HTML tags using the style attribute. </li></ul>
  36. 37. Internal Style Sheets <ul><li>Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. </li></ul>
  37. 38. External Style Sheets <ul><li>Internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. </li></ul>
  38. 39. CSS class example
  39. 41. What is JavaScript ? <ul><li>A scripting language that works with HTML to enhance web pages and make them more interactive. </li></ul><ul><li>Runs in a Web browser (client-side). </li></ul><ul><li>Embedded in HTML files and can manipulate the HTML itself. </li></ul>
  40. 42. Why use JavaScript ? <ul><li>To add dynamic function to your HTML. </li></ul><ul><ul><li>JavaScript does things that HTML can’t—like logic. </li></ul></ul><ul><ul><li>You can change HTML on the fly. </li></ul></ul><ul><ul><li>JavaScript can validate the data the user enters into the form, before it is sent to your Web Application. </li></ul></ul>
  41. 43. Add JavaScript to HTML <ul><li>In the HTML page itself: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><script language=“javascript”> </li></ul></ul><ul><ul><li>// JavaScript code </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><li>As a file, linked from the HTML Page </li></ul><ul><li><head> </li></ul><ul><li><script language=“javascript” src=“ script.js ”> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  42. 44. JavaScript examples
  43. 45. JavaScript examples <ul><li>Image Zoom </li></ul><ul><li>Image Menu </li></ul><ul><li>Shutter Menu </li></ul><ul><li>Tabs </li></ul><ul><li>Contact Form Validation </li></ul>
  44. 46. Questions ?
  45. 47. Thank You ! SANDEEP BAJORIA Email : [email_address] O: (033) 6522 9071 M : 98309 36993