Html basic
- 1. By: RNCOE Teacher Trainees 2009-2011 Batch HTML Ruwanpura National College Of Education. Wallandura. Kahawatta. (Basics of HTML) Workshop
- 2. SPECIALLY PRESENTED FOR : R/ GANKANDA CENTRAL COLLEGE (NATIONAL SCHOOL) GRADE 10, 11 STUDENTS 2010 – 10 - 04
- 3. LANGUAGES WE USE IN COMPUTER Language we use to coordinate computer and the human who use the computer. There are so many languages we use to give instructions to computer. Such as; JAVA , VISUAL BASIC , PASCAL , C++ ,C programming Language , C# , HTML
- 4. NOW WE LEARN ABOUT HTML (HYPER TEXT MARKUP LANGUAGE)
- 5. HTML is an evolving standard (as new technology/tools are added) HTML 1 (Sir Tim Berners-Lee, 1989): very basic, limited integration of multimedia in 1993, Mosaic added many new features (e.g., integrated images) HTML 2.0 (IETF, 1994): tried to standardize these & other features, but late in 1994-96, Netscape & IE added many new, divergent features HTML 3.2 (W3C, 1996): attempted to unify into a single standard but didn't address newer technologies like Java applets & streaming video Beginning of HTML
- 6. Beginning of HTML (cont.) HTML 4.0 (W3C, 1997): current standard (but moving towards XHTML) attempted to map out future directions for HTML, not just react to vendors XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standards XHTML 1.1 (W3C, 2001): “Modularization” of XHTML 1.0 HTML 5 ( Web Hypertext Application Technology Working Group, W3C, 2006): New version of HTML4, XHTML 1.0, and DOM 2 (still a work in progress)
- 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. HTML TAGS We use some codes to explain to computer what are we going to do. These codes called as “Tags”. 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(</>).
- 9. SOFTWARE & TEXT EDITORS What You See is What You Get(Software): Dreamweaver, Microsoft FrontPage, Netscape Composer, Adobe Page Mill, ,Hotdog Word (Save As Webpage) Text Editors Notepad Word pad Code View GEdit Nano Editor
- 10. In HTML we use some essential tags. They are <html> <head> Heading Section <title></title> </head> <body></body> Body Section </html>
- 11. HTML TAGS Tag – an HTML code that tells the browser HOW to display something Opening Tag <h3> Closing Tag </h3> Example : < b>This will be bold </b> Tags will not appear in browsers All open tags must have corresponding closing tag.
- 12. ATTRIBUTES Attributes provide additional display information about a tag Attributes appear within the opening tag brackets Attribute values must be contained in quotes You can have more than one attribute in a tag <font size=“-1” color=“green"> This text would be green and smaller </font>
- 13. HTML Tags
- 14. COMMON STRUCTURE AND FORMATTING HTML TAGS
- 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. 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. 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. 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. 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. 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. 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. GRAPHICAL ELEMENTS <img src="name.extention"> Adds an image <img src="name.extention" align=?> Aligns an image: left, right, center; bottom, top, middle <img src="name.extention" 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. TABLE FORMATTING TAGS <table></table> Creates a table <tr></tr> Sets off each row in a table <td></td> Sets off each cell in a row <table border=#> Sets width of border around table cells <table width=“ ? %” or height=“ ? %”> Sets width and height of table - in pixels or as a percentage of document width
- 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. LINKS TAGS <a href="URL"></a> Creates a hyperlink <a href="mailto:e-mail address"></a> Creates a mailto link <a name="NAME"></a> Creates a target location within a document <a href="#NAME"></a> Links to that target location from elsewhere in the document
- 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. NOW !!! SHALL WE MAKE A WEB PAGE ?
- 29. OTHER WEB DEVELOPMENT TOOLS Cascading Style Sheet (CSS) JavaScript VB Sript PHP
- 30. More Info HTML guide in your text Web terms: http://www.imaginarylandscape.com/helpweb/www/www.html HTML intro and tutorials: http://www.w3schools.com/html/default.asp Official HTML tags: http://www.w3.org/TR/html4/http://www.cwru.edu/help/webglossary.html
- 32. SPECIAL THANKS FOR: The Principal of R/ Gankanda National School, ICT Teachers including ICT sectional head, All Teachers of R/ Gankanda National School, All Friends of Ruwanpura National College Of Education 1 st Year Teacher Trainees, All Friends of Ruwanpura National College Of Education 2 nd Year Teacher Trainees, All Friends of Ruwanpura National College Of Education 3 rd Year Teacher Trainees, And Other all helped people for do this project successfully.