Html basic


Published on


Published in: Education, Technology

Html basic

  1. 1. By: RNCOE Teacher Trainees 2009-2011 Batch HTML Ruwanpura National College Of Education. Wallandura. Kahawatta. (Basics of HTML) Workshop
  3. 3. LANGUAGES WE USE IN COMPUTER <ul><li>Language we use to coordinate computer and the human who use the computer. </li></ul><ul><li>There are so many languages we use to give instructions to computer. Such as; </li></ul><ul><ul><li>JAVA , VISUAL BASIC , PASCAL , C++ ,C programming Language , C# , HTML </li></ul></ul>
  5. 5. <ul><li>HTML is an evolving standard (as new technology/tools are added) </li></ul><ul><ul><ul><li>HTML 1 (Sir Tim Berners-Lee, 1989): very basic, limited integration of multimedia </li></ul></ul></ul><ul><ul><ul><ul><li>in 1993, Mosaic added many new features (e.g., integrated images) </li></ul></ul></ul></ul><ul><ul><ul><li>HTML 2.0 (IETF, 1994): tried to standardize these & other features, but late </li></ul></ul></ul><ul><ul><ul><ul><li>in 1994-96, Netscape & IE added many new, divergent features </li></ul></ul></ul></ul><ul><ul><ul><li>HTML 3.2 (W3C, 1996): attempted to unify into a single standard </li></ul></ul></ul><ul><ul><ul><ul><li>but didn't address newer technologies like Java applets & streaming video </li></ul></ul></ul></ul>Beginning of HTML
  6. 6. Beginning of HTML (cont.) <ul><ul><ul><li>HTML 4.0 (W3C, 1997): current standard (but moving towards XHTML) </li></ul></ul></ul><ul><ul><ul><ul><li>attempted to map out future directions for HTML, not just react to vendors </li></ul></ul></ul></ul><ul><ul><ul><li>XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standards </li></ul></ul></ul><ul><ul><ul><li>XHTML 1.1 (W3C, 2001): “Modularization” of XHTML 1.0 </li></ul></ul></ul><ul><ul><ul><li>HTML 5 ( Web Hypertext Application Technology Working Group, W3C, 2006): New </li></ul></ul></ul><ul><ul><ul><li>version of HTML4, XHTML 1.0, and DOM 2 (still a work in progress) </li></ul></ul></ul>
  7. 7. HTML HTML means Hyper Text Markup Language . HTML is a language that helps us to create web sites in the Internet . HTML helps to coordinate human and the computer . So we have to use some codes to explain to computer what are we going to do. Therefore we use HTML to give instructions to create web sites.
  8. 8. HTML TAGS <ul><li>We use some codes to explain to computer what are we going to do. These codes called as “Tags”. </li></ul><ul><li>HTML tags must type in the angle brackets(<>) ,it wants to type in a text editor and save with .htm or .html extension. If we use a tag we should close the tag. To close the tag we use closing tags(</>). </li></ul>
  9. 9. SOFTWARE & TEXT EDITORS <ul><li>What You See is What You Get(Software): </li></ul><ul><ul><li>Dreamweaver, Microsoft FrontPage, Netscape Composer, Adobe Page Mill, ,Hotdog </li></ul></ul><ul><ul><li>Word (Save As Webpage) </li></ul></ul><ul><li>Text Editors </li></ul><ul><ul><li>Notepad </li></ul></ul><ul><ul><li>Word pad </li></ul></ul><ul><ul><li>Code View </li></ul></ul><ul><ul><li>GEdit </li></ul></ul><ul><ul><li>Nano Editor </li></ul></ul>
  10. 10. <ul><li>In HTML we use some essential tags. They are </li></ul><ul><li><html> </li></ul><ul><li><head> Heading Section </li></ul><ul><li><title></title> </li></ul><ul><li></head> </li></ul><ul><li><body></body> Body Section </li></ul><ul><li></html> </li></ul>
  11. 11. HTML TAGS <ul><li>Tag – an HTML code that tells the browser HOW to display something </li></ul><ul><ul><li>Opening Tag <h3> </li></ul></ul><ul><ul><li>Closing Tag </h3> </li></ul></ul><ul><ul><li>Example : < b>This will be bold </b> </li></ul></ul><ul><li>Tags will not appear in browsers </li></ul><ul><li>All open tags must have corresponding closing tag. </li></ul>
  12. 12. ATTRIBUTES <ul><li>Attributes provide additional display information about a tag </li></ul><ul><li>Attributes appear within the opening tag brackets </li></ul><ul><li>Attribute values must be contained in quotes </li></ul><ul><li>You can have more than one attribute in a tag </li></ul><ul><li><font size=“-1” color=“green&quot;> This text would be green and smaller </font> </li></ul>
  13. 13. HTML Tags
  15. 15. BASIC TAGS <html></html> Creates an HTML document <head></head> Sets off the title and other information that isn't displayed on the Web page itself <body></body> Sets off the visible portion of the document
  16. 16. HEADER TAGS <title></title> Puts the name of the document in the title bar Things in the header section do not appear in the browser
  17. 17. BODY ATTRIBUTES <body bgcolor=?> Sets the background color, using name or hex value <body text=?> Sets the text color, using name or hex value <body link=?> Sets the color of links, using name or hex value <body vlink=?> Sets the color of followed links, using name or hex value <body alink=?> Sets the color of links on click
  18. 18. TEXT FORMATTING TAGS 1 <hl></hl> Creates the largest header <h6></h6> Creates the smallest header <b></b> Creates bold text <i></i> Creates italic text
  19. 19. TEXT FORMATTING TAGS 2 <strong></strong> Emphasizes a word (with italic or bold) <font size=“?”></font> Sets size of font <font color=“?”></font> Sets font color, using name or hex value
  20. 20. PARAGRAPH FORMATTING TAGS <p></p> Creates a new paragraph <p align=?> Aligns a paragraph to the left, right, or center <br> Inserts a line break <blockquote></blockquote> Indents text from both sides
  21. 21. LIST FORMATTING TAGS <ol></ol> Creates a numbered list <ul></ul> Creates a bulleted list with the use of <li> <li></li> Precedes each list item, and adds a number
  22. 22. GRAPHICAL ELEMENTS <img src=&quot;name.extention&quot;> Adds an image <img src=&quot;name.extention&quot; align=?> Aligns an image: left, right, center; bottom, top, middle <img src=&quot;name.extention&quot; border=?> Sets size of border around an image <hr> Inserts a horizontal rule <hr size=?> Sets size (height) of rule <hr width=?> Sets width of rule, in percentage or absolute value Always use an alt tag for images, eg. <img src=“name.extention” alt=“picture of cat”>
  23. 23. TABLE FORMATTING TAGS <ul><li><table></table> Creates a table </li></ul><ul><li><tr></tr> Sets off each row in a table </li></ul><ul><li><td></td> Sets off each cell in a row </li></ul><ul><li><table border=#> Sets width of border around table cells </li></ul><ul><li><table width=“ ? %” or height=“ ? %”> Sets width and height of table - in pixels or as a percentage of document width </li></ul>
  24. 24. HOW TABLES WORK <tr> </tr> <table> </table> <td> </td> <td> </td> </td> <td> <tr> </tr> <td> </td> <td> </td> </td> <td> <tr> </tr> <td> </td> <td> </td> </td> <td>
  25. 25. LINKS TAGS <a href=&quot;URL&quot;></a> Creates a hyperlink <a href=&quot;mailto:e-mail address&quot;></a> Creates a mailto link <a name=&quot;NAME&quot;></a> Creates a target location within a document <a href=&quot;#NAME&quot;></a> Links to that target location from elsewhere in the document
  26. 26. WEB BROWSERS HTML is the language web browsers use to format the data presented in web pages. All browsers are not equal. What we use and why.
  27. 27. NOW !!! SHALL WE MAKE A WEB PAGE ?
  29. 29. OTHER WEB DEVELOPMENT TOOLS Cascading Style Sheet (CSS) JavaScript <ul><ul><li>VB Sript </li></ul></ul><ul><ul><li>PHP </li></ul></ul>
  30. 30. More Info <ul><li>HTML guide in your text </li></ul><ul><li>Web terms: </li></ul><ul><li>HTML intro and tutorials: </li></ul><ul><li>Official HTML tags: </li></ul>
  31. 32. SPECIAL THANKS FOR: <ul><li>The Principal of R/ Gankanda National School, </li></ul><ul><li>ICT Teachers including ICT sectional head, </li></ul><ul><li>All Teachers of R/ Gankanda National School, </li></ul><ul><li>All Friends of Ruwanpura National College Of Education </li></ul><ul><li>1 st Year Teacher Trainees, </li></ul><ul><li>All Friends of Ruwanpura National College Of Education </li></ul><ul><li>2 nd Year Teacher Trainees, </li></ul><ul><li>All Friends of Ruwanpura National College Of Education </li></ul><ul><li>3 rd Year Teacher Trainees, </li></ul><ul><li>And </li></ul><ul><li>Other all helped people for do this project successfully. </li></ul>