Html basic
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Html basic

on

  • 2,131 views

FOR YOUR ICT KNOWLEDGE (Meth Prarthana)

FOR YOUR ICT KNOWLEDGE (Meth Prarthana)

Statistics

Views

Total Views
2,131
Views on SlideShare
2,058
Embed Views
73

Actions

Likes
2
Downloads
165
Comments
0

2 Embeds 73

http://blackboard 65
http://blackboard.parkhill.k12.mo.us 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html basic Presentation Transcript

  • 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&quot;> 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=&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. 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=&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. 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 ?
  • 28. BASIC HTML SYNTAX
  • 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
  • 31.  
  • 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.