Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web topic 2 html

594 views

Published on

  • Be the first to comment

  • Be the first to like this

Web topic 2 html

  1. 1. Nitec in Social Media & Web Development IT2031PA Web Authoring Topic 2 – HyperText Markup Language
  2. 2. ObjectivesStudents should able to:1. Explain what is HTML.2. Use tools (Notepad) to create a simple webpage with HTML Tags.3. Explain structure of an HTML document
  3. 3. What is Markup Language?In traditional publishing, the manuscriptis annotated with layout instructions forthe typesetter.These hand-written annotations arecalled markup.
  4. 4. What is Markup Language?A Markup language describes the layoutor structure of a document usinginstructions embedded within it.
  5. 5. Hyper Text Markup LanguageHTML is the backbone of the web, theskeleton of your web page.Like the bones in your body, it is thestructure and substance of the Internet,although it is usually unseen except bythe web designer.Without it, the web would not exist.
  6. 6. Hyper Text Markup LanguageYou only need a simple text editor,notepad to create HTML documents.The default file extension is .html
  7. 7. XML/XHTMLXML is used to create structured data.XHTML is written in XML syntaxXHTML lets you check quickly that aweb page is correctly formed and doesnot contain any coding errors.
  8. 8. HTML5HTML5, the fifth edition of HTML, iscurrently in draft form and is expected toremain so for several years while thefinal details are worked out.HTML5 is distinguished in two maincategories: structure and media
  9. 9. HTML5HTML 5 offers specific <header> and<footer> tags, as well as ones forcontent such as <article> and<summary>.HTML5 contains numerous otherstructural elements for handling figures,forms and navigation as well.
  10. 10. HTML5HTML5 includes native support forplaying video and audio through the<video> and <audio> tagsrespectively, as well as static andanimated vector graphics via the<canvas> tag.
  11. 11. DOCTYPESThere are three possible DOCTYPEdeclarations:- Strict<!DOCTYPE html PUBLIC “-//W3C//DTD HTML4.01//EN” http://www.w3.org/TR/html4/strict.dtd>- Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01Transitional//EN”http://www.w3.org/TR/html4/loose.dtd>
  12. 12. DOCTYPESThere are three possible DOCTYPEdeclarations:- Frameset<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01Frameset//EN” http://www.w3.org/TR/html4/frameset.dtd>
  13. 13. HTML TagsTag is the most basic markup element inHTMLHTML uses tags to designate formats,styles or logical and structuralinformation on web pages.Tags are denoted in < >, such as <html>
  14. 14. HTML Tags
  15. 15. HTML Template<html> <head> <Title> An Example </Title> </head> <body> This is a HTML lesson. </body></html>
  16. 16. Tag AttributeTag can takes attributes that defineproperties or special information aboutthe tag.<H1 style="text-align:center">Heading 1</H1>Attributes can only appear in theopening tag of a tag pair.
  17. 17. More TagsParagraphs <p><p> This is my first paragraph</p><p> This is my second paragraph</p>Line Break <br>ITE College West<br>1, Choa Chu Kang Grove<br>
  18. 18. More TagsAttributes are case insensitive. Butsome attributes values are caseinsensitive.<IMG SRC=“filename.gif”><!--Your Comments Here-->
  19. 19. Review Questions1. What programs can open HTML files?HTML is a plain-text language that canbe opened and edited in any text editorand viewed in any web browser.
  20. 20. Review Questions2. What does a markup language do?It places tags contained within brackets< > around plain-text content to passinformation concerning structure andformatting from one application toanother.
  21. 21. Review Questions3. HTML is comprised of how manycode elements?Less than 100 codes are defined in theHTML specifications.
  22. 22. Review Questions4. What are the three main parts of mostweb pages?Most web pages are composed of threesections: a root, head, and body.
  23. 23. Review Questions5. What’s the difference between ablock and inline element?A block element creates a stand-aloneelement. An inline element can existwithin another element.

×