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.

Html5 - Introduction


Published on

HTML 5 Introduction

Published in: Education, Technology
  • Be the first to comment

Html5 - Introduction

  1. 1. Day 1 Richa Goel HTML5
  2. 2. Richa Goel 1/6/2014 CONTENTS – DAY 1 Introduction to HTML  Why HTML?  HTML 4.0 vs HTML 5.0  XHTML vs HTML 5.0  Basic Structure of HTML  Tags, Attributes and Elements - The stuff that makes up HTML  2
  3. 3. Richa Goel 1/6/2014 CONTENTS – DAY 1 Doctype Declaration Updates  <HEAD> section changes  <Body> tag changes  Changes in HTML 5  Obsolete & Deprecated Tags  Day End Exercise  3
  4. 4. Richa Goel 1/6/2014 SMALL QUIZ 4
  5. 5. Richa Goel 1/6/2014 ANSWER THESE… 1. How can you create an e-mail link? Choose one: a) b) c) d) 2. <mail href="xxx@yyy"> <a href="xxx@yyy"> <a href="mailto:xxx@yyy"> </a> <mail>xxx@yyy</mail> Choose the correct HTML to leftalign the content inside a table cell: a) b) c) d) 3. How can you open a link in a new browser window? a) b) c) d) 4. <td leftalign> <td align="left"> <td valign="left"> <tdleft> What is the preferred way for adding a background color in HTML? a) b) c) 5. <a href="url" target="_blank"> <a href="url" new> <a href="url" target="new"> None <background>yellow</background> <body background="yellow"> <body style="backgroundcolor:yellow"> XHTML is based on HTML and XML: a) b) True False 5
  6. 6. Richa Goel 1/6/2014 ANSWER THESE… 6. 7. Correct syntax for Nested tables can be: a) <table><tr><table><tr><td>&nbsp;</td ></tr></table> b) <table><tr><td><table><td>&nbsp;</td ></table></td></tr></table> c) <table><tr><td><table><tr><td>&nbsp; </td></tr></table></td></tr></table> To redirect an HTML page: a) <META HTTP-EQUIV=“Refresh” CONTENT=”5;URL: com”> b) <META HTTP-EQUIV=“Refresh” CONTENT=”5URL=”> c) <META HTTP-EQUIV=“Refresh” CONTENT=”5;”URL= .com”> d) <META HTTP-EQUIV=“Refresh” CONTENT=”5;URL= com”> 8. The correct syntax for IMG tag is: a) <img src=”a.jpg” alt=”image” /> b) <img title=”a.jpg” /> c) <img scr=”a.jpg” alt=”image” /> 9. Meta Data is: a) Displayed in the footer of the page b) Displayed above the footer of the page c) Useless information and waste of time d) Information about the page 10. Valid HTML Link tag is: a) <a href:”a.html” target:”_self”> b) <a name=”a.html” target=”_blank”> c) <a href=”a.html” target=”_blank”> d) <a title=”a.html”> 6
  7. 7. Richa Goel 1/6/2014 The language on which web moves… HTML – HYPERTEXT MARKUP LANGUAGE 7
  8. 8. Richa Goel 1/6/2014 W3C  World Wide Web Consortium (W3C) is the international standards organization that has the responsibility to create and update many languages related to Web. HTML, XHTML, and CSS are part of W3C‟s responsibilities. 8
  9. 9. Richa Goel 1/6/2014 WHAT IS HTML? HyperText Markup Language (HTML)    The publishing language of the World Wide Web. The standard used to create web pages Markup language that defines the structure of information by using a variety of tags and attributes, which is designed to display text and other information on a screen and provide hyperlinks to other Web documents 9
  10. 10. Richa Goel 1/6/2014 WHAT IS HTML? Web Standards    The W3C (World Wide Web Consortium) develops specifications, (called “Recommendations") guidelines, as well as software and tools that enhance interoperability between web browsers, servers, and other web-enabling technologies. Their recommendations on Web technologies and protocols like HTML, CSS, XHTML, XML, and HTTP are considered the Web standards The HTML 5 specification from W3C is the latest HTML standard supported by all the latest browsers 10
  11. 11. Richa Goel 1/6/2014 WHERE WE'RE AT Comfortable with HTML4 or XHTML and CSS2  Hearing talk of HTML5 and CSS3  Rapidly advancing browsers  ...but we've still got IE6  11
  12. 12. Richa Goel 1/6/2014 Invented by Tim-Berners Lee HTML DETERMINES THE STRUCTURE AND MEANING OF CONTENT ON A WEB PAGE. 12
  13. 13. Richa Goel 1/6/2014 WHAT HTML DO? Tells the browser what to do, and what properties to use.  HTML is used to define the structure and layout of a Web page, how a page looks and any special functions. HTML does this by using what are called tags that have attributes.  13
  14. 14. Richa Goel 1/6/2014 WEB PAGES     All web documents use HTML – Hypertext Mark-up Language  With other embedded technologies to enhance display and behaviour The code for a web page – the source code – can be created in many different ways e.g.  Typed into a text editor  Dynamically generated using scripts and programs Source code delivered to a user-agent (browser)  Usually over the web via HTTP Browser processes document and renders display to user  Final appearance is a combination of source construction (by the author)  and rendering capability (in web browser) 14
  15. 15. Richa Goel 1/6/2014 HOW WEBSITE WORKS? 15
  16. 16. Richa Goel 1/6/2014 WHAT IS HTML  HTML describes the content and format of web pages using tags. Ex. Title Tag: <title>A title </title>  It‟s the job of the web browser to interpret tags and display the content accordingly. 16
  17. 17. Richa Goel 1/6/2014 HTML BASICS  HTML documents contain 4 things      Text Tags External Multimedia such as graphics, sound, movies, etc. Scripts Example     <TAG> Your Text Here </TAG> Types, used in pairs, or not in pairs Tags can be nested Tags have Attributes: <FONT size=“+2” face=“Times New Roman”>Hi</FONT> 17
  18. 18. Richa Goel 1/6/2014 WHY HTML? 18
  19. 19. Richa Goel 1/6/2014 WHY HTML IS USED? The web is based on HTML more than anything else.  Anything written carefully in HTML will work on any browser or OS.  It is light in weight and easy to learn.  It is quick to code and compatible with all the browsers and OS.  You cant build any website without HTML in place.  HTML is the skeleton of every web pages.  19
  20. 20. Richa Goel 1/6/2014 WHY WE NEED HTML? HTML was made to allow people to design websites on the internet.  If we did not have HTML we would not have the internet.  All of the tasks in the world that revolve around the internet would not exist.  20
  21. 21. Richa Goel 1/6/2014 HTML SPECIFICATIONS  The specifications for HTML are provided by the W3C (World Wide Web Consortium)  W3C publishes the Document Type Definitions (DTD) for each version of HTML  A DTD contains the rules for a markup language e.g.     Which tags can be used Where they can appear in the document Which attributes they can hold Alongside the DTD are recommendations as to how user-agents (e.g. web browsers) should interpret and render the marked up content 21
  22. 22. A TYPICAL WEBPAGE Richa Goel 1/6/2014 View Source A webpage is a text file containing instructions to tell a computer how the page should look. 22
  23. 23. Richa Goel 1/6/2014 HTML 4.0 VS HTML 5.0 23
  24. 24. Richa Goel 1/6/2014 HTML 4.0 HTML 4.0 became a W3C Recommendation 18. December 1997.  A second release was issued on 24. April 1998 with only some editorial corrections.  The most important feature of HTML 4.0 was the introduction of style sheets (CSS).  HTML 4.01  HTML 4.01 became a W3C Recommendation 24. December 1999.  HTML 4.01 was a minor update of corrections and bug-fixes from HTML 4.0.  24
  25. 25. Richa Goel 1/6/2014 HTML 5.0 On January 22nd, 2008, W3C published a working draft for HTML 5.  HTML 5 improves interoperability, and reduces development costs, by making precise rules on how to handle all HTML elements, and how to recover from errors.  Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents.  HTML 5 also contains new elements like <nav>, <header>, <footer>, and <figure>.  25
  26. 26. Richa Goel 1/6/2014 WHAT HTML5 IS • • • • • HTML5 is the next iteration of web page markup HTML4 -> XHTML 1 -> XHTML 2 -> HTML5 Introduces new tags and attributes o <header>, <footer>, <nav>, <section>... o <input type="email"> Designed for web apps Already understood by all latest browsers o Most of the things does not work in IE 6/ 7/ 8 but only in IE9. 26
  27. 27. Richa Goel 1/6/2014 HTML 5.0  HTML5 is sort of a buffet. You can pick and choose the parts you want to start experimenting with, and roll them into your sites as you see fit. 27
  28. 28. Richa Goel 1/6/2014 HTML5 ≈ HTML 5 + CSS 3 + JAVASCRIPT  HTML5 is a suite of tools for:  Markup (HTML 5)  Presentation (CSS 3)  Interaction (DOM, Ajax, APIs)  Brought on by the evolving use of the web 28
  29. 29. Richa Goel 1/6/2014 HOW HTML5 STARTED? HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).  WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.  29
  30. 30. Richa Goel 1/6/2014 HTML5: GROUND RULES Some rules for HTML5 were established: > New features should be based on HTML, CSS, DOM, and JavaScript > Reduce the need for external plugins > Better error handling > More markup to replace scripting > HTML5 should be device independent 30
  31. 31. Richa Goel 1/6/2014 WHY HTML5?  Cross-platform  Most browsers (read: not IE) conform to the W3C standards  The same code works on PC, Mac, Linux 31
  32. 32. Richa Goel 1/6/2014 WHY HTML5?  Mobile device support 32
  34. 34. Richa Goel 1/6/2014 WHAT’S NEW? New Elements are added for which workaround existed in HTML 4.0  Several new attributes have been introduced.  Some Elements and Attributes have been changed slightly.  Some elements are Obsolete in HTML5 as the purpose can be solved using CSS.  And Some are deprecated.  34
  35. 35. Richa Goel 1/6/2014 WHAT’S NEW IN HTML5 SPEC? Simplified and Loose Syntax  New Elements and Attributes  Embedded Media  Canvas  Offline Storage  Drag and Drop  Geo-Location  35
  36. 36. Richa Goel 1/6/2014 HTML4 TO HTML5  Semantic markup: HTML5 now includes new tags that describe parts of a document. Now there are dedicated tags for navigation elements, articles, sections, headers, and footers.  New form elements: HTML5 forms have some major updates. There are several new versions of the <input> element, allowing users to pick colors, numbers, e-mail addresses, and dates with easy-to-use elements. Made it more user friendly.  Media elements: At long last, HTML5 has native support for audio and video with tags similar to the <img> tag.  canvas tag: The canvas tag allows the programmer to build graphics interactively. This capability will allow for very intriguing capabilities like custom gaming and interface elements. 36
  37. 37. Richa Goel 1/6/2014 CSS AND HTML5     Embedded font support: With this long-awaited tool, you can include a font with a web page, and it will render even if the user doesn't have the font installed on her operating system. New selectors: Selectors are used to describe a chunk of code to be modified. CSS3 now supports new selectors that let you choose every other element, as well as specific sub-elements (different types of input tags, for example). Columns: HTML has never had decent support for columns, and all kinds of hacks have been used to overcome this shortcoming. Finally, CSS includes the ability to break an element into any number of columns easily. Visual enhancements: CSS has a number of interesting new capabilities: transparency, shadows, rounded corners, animations, gradients, and transformations. These provide a profound new level of control over the appearance of a page. 37
  38. 38. Richa Goel 1/6/2014 JAVASCRIPT AND HTML5  If HTML describes what parts of the document are, and CSS describe how these parts look, JavaScript defines how elements act.  Vector graphics support: Vector-based graphics provide an interesting alternative to traditional graphics because they can be created on the fly through code. New selectors: Most JavaScript programming begins by grabbing an element by ID. HTML5 now allows you to select elements by tag name. Local storage mechanisms: HTML5 now allows the developer to store data on the client. There is even a built-in database manager that accepts SQL commands. Geolocation: This interesting feature uses a variety of mechanisms to determine where the user is located.    38
  39. 39. Richa Goel 1/6/2014 HTML5: SUPPORT HTML5 is not yet an official standard, and no browser has full HTML5 support. Darn it. 39
  40. 40. Richa Goel 1/6/2014 HTML5: SUPPORT You may well ask: “How can I start using HTML5 if older browsers don‟t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. You can only detect support for individual features, like canvas, video, or geolocation. 40
  41. 41. Richa Goel 1/6/2014 HTML5: SUPPORT Love it or hate it, you can‟t deny that HTML 4 is the most successful markup format ever. HTML5 builds on that success. You don‟t need to throw away your existing markup. You don‟t need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period. 41
  42. 42. Richa Goel XHTML 1.0 W3C Rec. 1/6/2014 XHTML 2 Draft XHTML 2 Halted HTML 3.2 W3C Rec. HTML 4.01 W3C Rec. HTML 4.0 W3C Rec. XHTML 1.1 W3C Rec. CSS 2.0 W3C Rec. HTML 5 working group HTML 5 Draft HTML 5 Can. Rec. (2012) CSS 3.0 Draft SAF 1 IE 4 IE 5 NS 4 NS 4.7 SAF 2 IE 6 SAF 3 SAF 4 IE 7 NS 6 SAF 5 IE 8 GC 1 FF 1 FF 2 GC 3 FF 3 NS 7 IE 9 GC 8 FF 3.5 GC 10 FF 4 AJAX Web Conferencing Web Commerce 1997 1998 blogging iTunes 1999 2000 2001 2002 Facebook MySpace RSS podcasting youtube 2003 2004 2005 iPhone iPad twitter 2006 2007 2008 2009 2010 2011 42
  43. 43. Richa Goel 1/6/2014 WHY USE HTML5 TODAY?  Pros  Better semantics  Lean code  Improved user experience  Cons  Some work is needed to accommodate older browsers 43
  44. 44. Richa Goel 1/6/2014 ATTRIBUTES ABSENT IN HTML5  Presentational Attributes  align,  background, bgcolor, hspace, vspace Table Attributes  border, char, cellpadding, cellspacing, nowrap, valign, width  Hypertext Attributes  alink,  link, text Frame Attributes  frameborder, scrolling, marginheight, marginwidth 44
  45. 45. Richa Goel 1/6/2014 ELEMENTS ABSENT IN HTML5  Presentational Elements  basefont, big, center, font, strike, tt, u  Frames  frame,  frameset, noframes Redundant Elements  acronym (use abbr)  applet (use object)  dir (use ul) 45
  46. 46. Richa Goel 1/6/2014 OBSOLETE TAG ALTERNATIVES  <font>   <frame>, <noframe>, <frameset>   <iframe>, re-design with <div>s <acronym>   <span> <abbr> tags: <big>, <strike>, <center> attributes: bgcolor, cellspacing, cellpadding, valign  Use CSS 46
  47. 47. Richa Goel 1/6/2014 NEW HTML5 APIS API for playing audio and video  API to enable offline Web applications  API for creating editable content  Drag & Drop API  Canvas API  Web Messaging API  47
  48. 48. Richa Goel 1/6/2014 HTML ENHANCEMENTS TO THE DOM getElementsByClassName()  innerHTML to parse or serialize an HTML or XML document  activeElement to determine which element currently has the focus  48
  49. 49. Richa Goel 1/6/2014 NEW HTML5 WEB FORMS  New input types type="tel" (phone numbers)  type="search" (search boxes)  type="url"  type="email"  type="number" (spin boxes)  type="range" (slider)  type="color" (color picker)  type="date" (calendar picker)   placeholder attribute 49
  50. 50. Richa Goel 1/6/2014 FORM VALIDATION  Attributes to constrain input:  autocomplete  min, max, step  multiple  pattern  required  form validation is on by default (turn off using novalidate attribute) 50
  51. 51. Richa Goel 1/6/2014 HTML4 DIV-ITIS <div id="header"> <div id="links"> <div id="mainContent"> <div id="article"> <div class="sidebar"> <div id="footer"> 51
  52. 52. Richa Goel 1/6/2014 HTML5 STRUCTURAL ELEMENTS <header> … </header> <nav> … </nav> <section> … </section> <article> …</article> <aside> … </aside> <footer> … </footer> 52
  53. 53. Richa Goel 1/6/2014 HTML5 VS XHTML 53
  55. 55. Richa Goel 1/6/2014 XHTML As generic XML as possible  Less presentation, more structure  More usability  More accessibility  Better internationalization  More device independence  Less scripting  Integration with the Semantic Web  55
  56. 56. Richa Goel 1/6/2014 XHTML VS HTML5      New elements: article, aside, audio, bdi, canvas, comma nd, data, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter,nav, output, progre ss, rp, rt, ruby, section, source, summary, time, track, vide o, wbr New types of form controls: dates and times, email, url, search, number, range, tel, color New attributes: charset (on meta), async (on script) Global attributes (that can be applied for every element): id, tabindex, hidden, data-* (custom data attributes) Deprecated elements will be dropped altogether: acronym, applet, basefont, big, center, dir, font, frame, fra meset, isindex, noframes, strike, tt 56
  57. 57. Richa Goel 1/6/2014 HTML VS XHTML VS HTML5      HTML4 has a very loose syntax – for example closing tags are often optional. To counter this problem, XHTML was introduced. The main difference between XHTML and HTML4 is that all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other. HTML5 takes the best features of HTML4 and adds a number of extra tags. The only advantage for XHTML is that it forces you to make the document fully XML-compatible. However, you can still make HTML5 100% XML-compatible 57
  58. 58. Richa Goel 1/6/2014 EXERCISE <!-- basics.html --> <!-- 1. DOCTYPE =========================================================== -> <!-- WHAT!? The DOCTYPE for HTML? --> <!-- 2. update from HTML 4.01 ============================================= --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>simple HTML 4.01 document</title> <p> This is a simple HTML 4.01 document. Turn it into a simple HTML5 document! </p> 58
  59. 59. Richa Goel 1/6/2014 TAGS & ELEMENTS 59
  60. 60. Richa Goel 1/6/2014 WHAT ARE TAGS?  Mark text as headings, paragraphs  formatting (physical, logical)  list  quotations, etc.   Also for creating hyperlinks  including images, making tables  fill-in forms, frames  60
  61. 61. Richa Goel 1/6/2014 HTML DOCUMENT STRUCTURE  Basic Structure <HTML> <HEAD> <TITLE> KFUPM </TITLE> </HEAD> <BODY> ….. ….. …… </BODY> </HTML> 61
  62. 62. Richa Goel 1/6/2014 HTML DOCUMENT STRUCTURE  HTML= head + body    Body elements contain all the text and other material to be displayed Line breaks and indentation exist only for human readability Comment <!-- this is a single-line comment --> <!-also multi-line comment --> 62
  63. 63. Richa Goel 1/6/2014 STUFF THAT MAKES HTML Elements  Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and em.  <a> 63
  64. 64. Richa Goel 1/6/2014 STUFF THAT MAKES HTML Tags  Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as <div>. Closing tags mark the end of an element and begin with a forward slash, such as </div>.  <a>….</a> 64
  65. 65. Richa Goel 1/6/2014 STUFF THAT MAKES HTML Attributes  Attributes are properties used to provide additional instruction to given elements. More commonly, attributes are used to assign an id, class, or title to an element, to give media elements a source (src), or to provide a hyperlink reference (href).  <a href="" title="Shay Howe">Shay Howe</a> 65
  66. 66. Richa Goel 1/6/2014 DOCTYPE DECLARATION 66
  67. 67. Richa Goel 1/6/2014 The DOCTYPE declaration defines the document type  The text between <html> and </html> describes the web page  The text between <body> and </body> is the visible page content  67
  68. 68. Richa Goel 1/6/2014 "A LINE CONTAINING HTML VERSION INFORMATION" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> The DTD (Document Type Definition) declaration  Identifies the document version to the useragent  The URL specifies the location of the markup specification  68
  69. 69. Richa Goel 1/6/2014 IN HTML 5 <!DOCTYPE html>     The <!DOCTYPE> declaration must be the very first thing in your HTML5 document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, all <!DOCTYPE> declarations require a reference to a DTD, because HTML 4.01 was based on SGML. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. 69
  71. 71. Richa Goel 1/6/2014 HTML4: DOCTYPE The DOCTYPE which comes before the beginning <html> tag is much simpler in HTML 5. Here are some examples of what it looks like now... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""> 71
  72. 72. Richa Goel 1/6/2014 HTML5: DOCTYPE Previous versions of HTML defined a lot of doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype: <!DOCTYPE html> 72
  73. 73. Richa Goel 1/6/2014 DEPRECATED & OBSOLETE 73
  74. 74. Richa Goel 1/6/2014 DEPRECATED & OBSOLETE Deprecated feature is something that you should not use, but browsers should keep supporting it.  Obsolete feature is something that is just listed for historical purposes, not defined, and no browser support is required.   For example, the font element is deprecated in HTML 4.01, obsolete in HTML5. So in principle, HTML 4.01 you should not use, HTML5 says you shall not use it. 74
  75. 75. Richa Goel 1/6/2014 HEAD SECTION 75
  76. 76. Richa Goel 1/6/2014 "A DECLARATIVE HEADER SECTION" <head> <title>A Simple Document</title> <meta http-equiv="content-type" content="text/html;charset=utf8"> </head>  Information about the document, used to help process it Must include a <title> and character set info  Optional declarations and references for:     Metadata via <meta> Scripts via <script>…</script> Style sheets via <style>…</style> and/or <link> NO content! 76
  77. 77. Richa Goel 1/6/2014 <HEAD> ELEMENT The <head> element is a container for all the head elements.  The <head> element must include a title for the document, and can include scripts, styles, meta information, and more.  77
  78. 78. Richa Goel 1/6/2014 IN HTML 5 Some attributes have been removed.  In Earlier version of HTML : charset meta tag is like given below: <meta http-equiv="Content-Type" content="text/html; content="text/html; charset=utf-8" />  In HTML5 < meta charset="utf-8" />  No More Types for Scripts and Links.  No need to import type="text/css" in case of CSS and type="text/javascript" in JavaScript.  78
  79. 79. Richa Goel 1/6/2014 <HEAD> ELEMENTS  The following elements can go inside the <head> element:        <title> <style> <base> <link> <meta> <script> <noscript> 79
  80. 80. Richa Goel 1/6/2014 <HEAD> : TITLE The <title> tag is required in all HTML documents and it defines the title of the document.  The <title> element:  defines a title in the browser toolbar  provides a title for the page when it is added to favorites  displays a title for the page in search-engine results   Note: You can NOT have more than one <title> element in an HTML document. 80
  81. 81. Richa Goel 1/6/2014 <HEAD> : STYLE The <style> tag is used to define style information for an HTML document.  Inside the <style> element you specify how HTML elements should render in a browser.  Each HTML document can contain multiple <style> tags.  Attribute Description media Specifies what media/device the media resource is optimized for Specifies that the styles only apply to this element's parent element and that element's child elements Specifies the MIME type of the style sheet scopedNew type 81
  82. 82. Richa Goel 1/6/2014 SCOPED ATTRIBUTE   The scoped attribute is not supported in any browser. The scoped attribute is a boolean attribute, and can be set in the following ways: <style scoped>  <style scoped="scoped">  <style scoped=""> <div>  <style type="text/css" scoped="scoped"> h1 {color:red} p {color:blue} </style> <h1>This is a heading</h1> <p>This is a paragraph.</p> </div> 82
  83. 83. Richa Goel 1/6/2014 <HEAD>: BASE      The <base> tag specifies the base URL/target for all relative URLs in a document. There can be at maximum one <base> element in a document, and it must be inside the <head> element. Tip: Put the <base> tag as the first element inside the <head> element, so that other elements in the head section uses the information from the <base> element. Note: If the <base> tag is present, it must have either an href attribute or a target attribute, or both. No change in HTML5 83
  84. 84. Richa Goel 1/6/2014 <HEAD>: LINK The <link> tag defines the relationship between a document and an external resource.  The <link> tag is most used to link to style sheets.  Note:   The <link> element is an empty element, it contains attributes only.  This element goes only in the head section, but it can appear any number of times. <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head> 84
  85. 85. Richa Goel 1/6/2014 <HEAD>: LINK - ATTRIBUTES Charset and target attributes are not supported in HTML5  Rel attribute is mandatory and has few prominent values like stylesheet, icon, external etc.  type attribute is not required in HTML5  85
  86. 86. Richa Goel 1/6/2014 <HEAD>: LINK - ATTRIBUTES The "sizes" attribute is new in HTML5.  Although it is not supported in any browser yet.  The sizes attribute specifies the sizes of icons for visual media.  This attribute is only used if rel="icon".  Values:   Height X Width  <link rel="icon" href="demo_icon.gif" type="image/gif" any sizes="16x16"> 86
  87. 87. Richa Goel 1/6/2014 <HEAD>: META    The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. 87
  88. 88. Richa Goel 1/6/2014 <HEAD>: META  Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. if none of these are defined, the content attribute CANNOT be defined.  Difference in HTML4 vs HTML5 HTML5 has a new attribute, charset, which makes it easier to define charset:    HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML5: <meta charset="UTF-8"> 88
  89. 89. Richa Goel 1/6/2014 WHAT IS METADATA? • • • • Data about data Information about information Kind of information that helps people find what they are looking for Describes a resource -What it is -What it is about -Where it is -Depend on type of resource and purpose of metadata 89
  90. 90. Richa Goel 1/6/2014 WHAT IS META TAGS? • • • • Tags to describe various aspects about a web page Inform of metadata to be added to web pages All meta tags place within the head section General Syntax <META NAME=“dataname” CONTENT=“datavalue”> 90
  91. 91. Richa Goel 1/6/2014 AN EXAMPLE OF META TAGS <head> <meta name="description" content=“meta tags."> <meta name="keywords" content="meta data, metadata, meta tag, meta-tag, search-engine"> <meta name="author" content="Keith Brooke"> <meta name="reply-to" content="kbrooke"> <meta name="robots" content="all"> <title>Meta Tags-Metadata Elements</title> </head> 91
  92. 92. Richa Goel 1/6/2014 META TAGS TO PROVIDE INFORMATION • Description <META NAME=“description” CONTENT=“Meta tags.”> • Author <META NAME=“author” CONTENT=“Steven Matthiesen”> • Keywords <META NAME=“keywords” CONTENT=“a, list, keywords”> • Robots <META NAME=“robots” CONTENT=“all”> All- Robots can index the pages None- Robots should ignore the page Noindex-Prevents indexing of a page Follow-Robots can follow links from this page Nofollow-Robots cannot follow links from this page 92
  93. 93. Richa Goel 1/6/2014 META TAGS FOR SCRIPTING  EQUIV Type  <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> sets the client-side scripting language for inline scripts to JavaScript.  <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> sets the style language for inline styles to CSS. 93
  94. 94. Richa Goel 1/6/2014 META TAGS TO CONTROL THE BROWSER • Expire <META HTTP-EQUIV=“Expires” CONTENT=“0”> <META HTTP-EQUIV=“Expires” CONTENT="Thu, 29 Nov 2007 16:18:42 GMT"> • Pragma and Cache Control <META HTTP-EQUIV=“Pragma” CONTENT=“no-cache”> <META HTTP-EQUIV=“Cache-Control” CONTENT=“no-cache”> • Refresh <META HTTP-EQUIV=“Refresh” CONTENT=“10;URL=”> 94
  95. 95. Richa Goel 1/6/2014 <HEAD>: SCRIPT    The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. <head> <script> document.write("Hello World!") </script> </head> 95
  96. 96. Richa Goel 1/6/2014 <HEAD>: SCRIPT Differences Between HTML 4.01 and HTML5  The "type" attribute is required in HTML 4, but optional in HTML5.  The "async" attribute is new in HTML5.  The async attribute is a boolean attribute.  When present, it specifies that the script will be executed asynchronously as soon as it is available 96
  97. 97. Richa Goel 1/6/2014 <HEAD>: NOSCRIPT    The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn‟t support client-side scripting. The <noscript> element can contain all the elements that you can find inside the <body> element of a normal HTML page. The content inside the <noscript> element will only be displayed if scripts are not supported, or are disabled in the user‟s browser. <script> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript> 97
  98. 98. Richa Goel 1/6/2014 WE HAVE CREATED A HEAD BUT WHERE IS THE BODY… 98
  99. 99. Richa Goel 1/6/2014 "A BODY, WHICH CONTAINS THE DOCUMENT'S ACTUAL CONTENT"  This is processed into content users actually see!  Final appearance may be influenced by information from the <head> (scripts, style sheets etc) <body> <h1>Creating Web Pages</h1> <p>A <strong>one-day workshop</strong> run by: <br> </p> </body> 99
  100. 100. Richa Goel 1/6/2014 SIMPLE HTML DOCUMENT  A simple HTML Document with minimum required tags: <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> 100
  101. 101. Richa Goel 1/6/2014 <BODY> TAG The <body> tag defines the document's body.  The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.  In HTML5, the attributes are scoped out. Now you can make the similar changes using CSS or style attribute.  101
  102. 102. Richa Goel 1/6/2014 <BODY>: BACKGROUND The background attribute specifies a background image for a document.  The <body> background attribute is not supported in HTML5. Use CSS instead.  <body background="URL">  URL contains the path of the background image. An absolute URL - points to another web site (like href="")  A relative URL - points to a file within a web site (like href="/images/bgimage.gif")  102
  103. 103. Richa Goel 1/6/2014 <BODY>: BGCOLOR The bgcolor attribute specifies the background color of a document.  The <body> background attribute is not supported in HTML5. Use CSS instead.  <body bgcolor="color_name|hex_number|rgb_number"> 103
  104. 104. Richa Goel 1/6/2014 <BODY> ATTRIBUTES Attribute alink Value color Description Not supported in HTML5. Deprecated in HTML 4.01.Specifies the color of an active link in a document background URL Not supported in HTML5. Deprecated in HTML 4.01.Specifies a background image for a document bgcolor color Not supported in HTML5. Deprecated in HTML 4.01.Specifies the background color of a document link color Not supported in HTML5. Deprecated in HTML 4.01.Specifies the color of unvisited links in a document text color Not supported in HTML5. Deprecated in HTML 4.01.Specifies the color of the text in a document vlink color Not supported in HTML5. Deprecated in HTML 4.01.Specifies the color of visited links in a document 104
  105. 105. Richa Goel 1/6/2014 TAGS REMOVED FROM HTML 5 105
  106. 106. Richa Goel 1/6/2014 REMOVED TAGS  <acronym> - It was used to define acronyms in HTML 4.01. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI.  <applet> - It was used to define an embedded applet.  <basefont> - It was used to define a default font-color, font-size, or fontfamily for all the text in a document.  <big> - It was used to make text bigger.  <center> - It was used to center align text and content.  <dir> - It was used to define a directory list.  <font> - It was used to specify font face, font size, and font color of text. 106
  107. 107. Richa Goel 1/6/2014 REMOVED TAGS  <frame> - It was used to define one particular window (frame) within a frameset.  <frameset> - It was used to define a frameset, which organized multiple windows (frames).  <noframes> - It was used to display text for browsers that do not handle frames.  <strike> - It was used to define strikethrough text. (in HTML5 use <del> instead).  <tt> - It was used to define teletype text.  <u> - It was used to define underlined text.  <xmp> - It was used to define preformatted text. 107
  108. 108. Richa Goel 1/6/2014 REMOVED ATTRIBUTES Most of the presentation attributes like bgcolor, align, valign etc.  cellpadding and cellspacing attributes in table.  All the attributes related to frame and frames.  alink, link, vlink and text attributes.  noshade, nowrap, size, height, width attributes.  frameborder, scrolling, marginheight and  108
  109. 109. Richa Goel 1/6/2014 CHANGES IN HTML5 109
  110. 110. Richa Goel 1/6/2014 EMPTY TAGS Void Elements, also known as EMPTY tags, should have a trailing slash.  href attribute on link tag and action attribute on form tag should no longer be empty.  110
  111. 111. Richa Goel 1/6/2014 <HEADINGS> TAG The <h1> to <h6> tags are used to define HTML headings.  It is used to give headings. In the tag <hn>,  h stands for the heading where as,  n can be replaced with any number between 1-6.  Where <h1> is the largest and <h6> is the smallest heading size.  Or you can say that, <h1> defines the most important heading. <h6> defines the least important heading.  Syntax:  <h1 align="left|right|center|justify"> 111
  112. 112. Richa Goel 1/6/2014 <H1-6> ATTRIBUTES Attribute align Value left right center justify Description Not supported in HTML5. Specifies the alignment of the text within a paragraph Description Left-align text Right-align text Center-align text Stretches the lines so that each line has equal width (like in newspapers and magazines) 112
  113. 113. Richa Goel 1/6/2014 PARAGRAPHS The <p> tag defines a paragraph.  Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).  113
  114. 114. Richa Goel 1/6/2014 <P> TAG  The <P> tag breaks the textual information on a page and inserts a single line space, which is useful for defining and separating paragraphs. 114
  115. 115. Richa Goel 1/6/2014 <P> ATTRIBUTES Attribute align Value left right center justify Description Not supported in HTML5. Specifies the alignment of the text within a paragraph Description Left-align text Right-align text Center-align text Stretches the lines so that each line has equal width (like in newspapers and magazines) 115
  116. 116. Richa Goel 1/6/2014 HTML LISTS  The <li> tag defines a list item.  The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).  The "type" attribute was deprecated in HTML 4.01, and is NOT supported in HTML5. Use CSS to define the type of list.  The "value" attribute was deprecated in HTML 4.01, but IS supported in HTML5.  The type attribute was replaced by list-style-type. 116
  117. 117. Richa Goel 1/6/2014 LISTS Definition Lists  Ordered Lists  Unordered Lists  Other Approaches  117
  118. 118. Richa Goel 1/6/2014 DEFINITION LISTS Definition List includes the following terms:  <DT> means definition term  <DD> means Definition description  <DL> Definition List No changes in HTML5. 118
  119. 119. Richa Goel 1/6/2014 <DL> <DT>HTML: <DD>HyperText Markup Language. <DT>XML: <DD>Extensible Markup Language. <DT>DHTML: <DD>Dynamic HyperText Markup Language. </DL> 119
  120. 120. Richa Goel 1/6/2014 UNORDERED LIST Unordered List includes the following terms:  <UL> means unordered list.  <LI> means list. 120
  121. 121. Richa Goel 1/6/2014 UNORDERED LIST  List items are not listed in a particular order. e.g. <ul> <li>item1 </li> <li> Name: Your name </li> <li>item2 </li> <li> Section: ### </li> <li> Instructor: Yuping </li> </ul> 121
  122. 122. Richa Goel 1/6/2014 RESULT 122
  123. 123. Richa Goel 1/6/2014 UNORDERED LIST Unordered list have an option called “type.” With the help of this option you can change the appearance of the bullets that appear on your screen. Following are the types of bullets available in UL.  Circle  Disc  Square This has been removed in HTML5. 123
  124. 124. Richa Goel 1/6/2014 EXAMPLES <ul type=“circle”> <ul type=“disc”> <ul type=“square”> 124
  125. 125. Richa Goel 1/6/2014 ORDERED LIST Ordered Lists includes the following:  <OL> means ordered list  <LI> means list 125
  126. 126. Richa Goel 1/6/2014 ORDERED LIST  Ordered Lists are used to display information in a numeric order. e.g. <ol > <li>item1 </li> <li> Name: Your name </li> <li>item2 </li> <li> Section: ### </li> <li> Instructor: Yuping </li> </ol> 126
  127. 127. Richa Goel 1/6/2014 RESULT 127
  128. 128. Richa Goel 1/6/2014 ORDERED LIST      Ordered list have an option called “type.” With the help of this option you can change the appearance of the bullets that appear on your screen. Following are the types of bullets available in OL. 1 Arabic Numerals A  Uppercase Letters a  Lowercase Letters I  Large Roman i  Small Romans This has been removed in HTML5. 128
  129. 129. Richa Goel 1/6/2014 ORDERED LIST  Apart from type we also have an option called “start.” Start tells HTML what will be the initial value where as type tells HTML what kind of bullet I want to use.  It‟s handy for lists that must be split over several <ol> elements, by allowing us to continue the list item numbering from where the previous list left off.  The related value attribute is used on an <li> element, and lets us manually number list items. value on the first list item also overrides start.  These were earlier deprecated in HTML4 but added again in HTML5 129
  130. 130. Richa Goel 1/6/2014 TRY THIS EXAMPLE: <OL TYPE=1 START=9> <OL TYPE=a START=9> <OL TYPE=A START=9> <OL TYPE=I START=9> <OL TYPE=i START=9> 130
  131. 131. Richa Goel 1/6/2014 EXERCISE  Create a page with an ordered list of 10 items you like to eat and unordered list of your hobbies in HTML5. 131
  132. 132. Richa Goel 1/6/2014 OTHER APPROACHES There are two more methods to achieve unordered list format:  <DIR>  <MENU> There is no difference in the output.  <DIR> is deprecated in HTML5. 132
  133. 133. Richa Goel 1/6/2014 MENU TAG EXAMPLE <menu> <LI>HTML <LI>DHTML <LI>XML <LI>SGML </menu> 133
  134. 134. Richa Goel 1/6/2014 GUESS THE OUTPUT… 134
  135. 135. Richa Goel 1/6/2014 NESTED LISTS Try This: <ol> <li> Paste Tomatoes <li> <ul> <li> Banana Legs </li> <li> Principle Borghese </li> </ul> <li> Cherry Tomatoes </li> <ul> <li>Gold Nugget</li> <li>Small Fry</li> </ul> </ol> 135
  136. 136. Richa Goel 1/6/2014 EXAMPLE   The Great American Novel Introduction    Development     Boy's childhood Girl's childhood Boy meets Girl Boy and Girl fall in love Boy and Girl have fight Climax  Boy gives Girl ultimatum      Girl can't believe her ears Boy is indignant at Girl's indignance Girl tells Boy to get lost Denouement Epilogue 136
  137. 137. Richa Goel 1/6/2014 EXAMPLE 137
  138. 138. Richa Goel 1/6/2014 FONT TAG Font tag is used to set the following font properties:  Size  Color  Face (type) <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font> 138
  139. 139. Richa Goel 1/6/2014 FONT ATTRIBUTES Attribute Value Description color Not supported in HTML5. Deprecated in HTML 4.01. Specifies the color of text face rgb(x,x,x) #xxxxxx colorname font_family size number Not supported in HTML5. Deprecated in HTML 4.01. Specifies the size of text Not supported in HTML5. Deprecated in HTML 4.01. Specifies the font of text 139
  140. 140. Richa Goel 1/6/2014 NEW WEBFONTS @font-face { font-family: 'Tagesschrift'; src: url('tagesschrift.ttf'); } 140
  141. 141. Richa Goel 1/6/2014 ADDING NEW FONT @font-face { font-family: „BL Avenir Black‟; src: url(„fonts/BLAvenirBlack-webfont.eot‟); src: local(„ „), url(„fonts/BLAvenirBlack-webfont.woff‟) format(„woff‟), url(„fonts/BLAvenirBlack-webfont) format(„truetype‟), url(„fonts/BLAvenirBlack-webfont.svg#webfont‟) format(„svg‟); } 141
  142. 142. Richa Goel 1/6/2014 SPECIAL CHARACTERS  In order to display some special characters on your web page we use & sign. Example: To show copyright symbol we use: &copy; And many more…  They always end with (;) symbol. 142
  143. 143. Richa Goel 1/6/2014 A BRIEF LIST: Result Description Entity Name Entity Number non-breaking space &nbsp;   < > & ¢ £ ¥ € § © ® less than greater than ampersand cent pound yen euro section copyright registered trademark &lt; &gt; &amp; &cent; &pound; &yen; &euro; &sect; &copy; &reg; < > & ¢ £ ¥ € § © ® ™ trademark &trade; ™ 143
  144. 144. Richa Goel 1/6/2014 EXERCISE  Create details.html in a notepad in HTML5 Add an ordered list using any 6 special characters.  Try creating nested list.  144
  145. 145. Richa Goel 1/6/2014 HTML 5 CHANGES  The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.  Tip: You can also use the CSS "font-weight" property to set bold text. 145
  146. 146. Richa Goel 1/6/2014 DO YOU KNOW THE DIFFERENCE BETWEEN <BR> AND <P>? 146
  147. 147. Richa Goel 1/6/2014 <BR> TAGS      Break tag <BR> forces line breaks without creating a vertical space, which should be used only for reasons of design or content The <br /> tag inserts a single line break. The <br /> tag is an empty tag which means that it has no end tag. It is a self closing tag. Note: Use the <br /> tag to enter line breaks, not to separate paragraphs This text contains<br>a line break. 147
  148. 148. Richa Goel 1/6/2014 INSERTING AN IMAGE  <img src=“path” />  path:  the location of image file Absolute path: full path <img src = “” /> Relative path: relation of file to the current HTML document. <img src = “./logo.gif” /> The same <img src = “logo.gif” /> 148
  149. 149. Richa Goel 1/6/2014 IMAGES    Use the tag <img /> to include images (or animated GIFs) in your HTML document (no closing tag), example: <img src=“myphoto.jpg” alt=“my photo” /> The following attributes are not supported in HTML5:      Align Border Hspace Longdesc Vspace 149
  150. 150. Richa Goel 1/6/2014 ATTRIBUTES      src: the source file of the image width and height: specify the dimensions of the image, you might want to display it in different dimensions like thumbnails. border: border thickness in pixels around the image. Although not supported in HTML5. usemap: to specify name of the image map associated with this image, ex. usemap=“#navigation” alt: alternate text that will appear when the user points at the image with the mouse 150
  151. 151. Richa Goel 1/6/2014 SOME NOTES ON IMAGES      Loading of images is made faster by telling the browser the size of the image Size is specified in pixels You can link by using images  Can have pictures with no borders You can use thumbnail images to link to larger images Making clickable images (image maps) 151
  152. 152. Richa Goel 1/6/2014 STRUCTURE OF THE IMAGE TAG The alt tag was introduced to assist persons who are visually impaired  Screen readers don‟t know what the image is, but they can read the description of the alt tag  HTML requires alt tags (?)  When an image is not available or loads slow, browsers display the alt information  152
  153. 153. Richa Goel 1/6/2014 INSERTING AN IMAGE Important! file-location or filename is case sensitive!  img.GIF ≠ img.gif  IMg.gif ≠ img.gif  Avoid using blank in the filename  153
  154. 154. Richa Goel 1/6/2014 IMAGE FILE FORMATS  Most common image file formats* for web pages  .gif   .jpg, .jpeg   Graphics Interchange Format Joint Photographic Experts Group is the name of the committee that created the standard .png  Portable Network Graphics 154
  155. 155. Richa Goel 1/6/2014 IMAGE MAPS     Enable users to click on parts of images (e.g., click on a state or country in a map) HTML tag used is <map></map> and <area> is used to specify what are the clickable areas (hotspots) in an image map areas have default shapes of a rectangle, a circle or a polygon Attributes for <map>:  name: specifies name of image map to be referenced in the <img> tag 155
  156. 156. Richa Goel 1/6/2014 IMAGE MAPS – CONT’D  Attributes for <area>:   href: what link should the browser follow when user clicks on this area shape: shape of area   target: where the target site should open        Circle, rectangle, poly or polygon _top _parent _blank _self or name of frame coords: specifies coordinates of area It is advised that you use a special software tool to generate image maps and areas, especially when it comes to computing coordinates 156
  157. 157. Richa Goel 1/6/2014 IMAGE MAPS – CONT’D  Example: <img scr=“imageslogo.gif” alt=“scroll to the bottom for navigation links” height=“300” width=“250” usemap=“#navigation” > <map name=“navigation”> <area shape=“rect” coords=“0,0,100,100” href=“products.html”> <area shape=“rect” coords=“0,100,300,100” href=“support.html”> </map> 157
  158. 158. Richa Goel 1/6/2014 ATTRIBUTES : <AREA> Attribute Value Description alt text Specifies an alternate text for the area. Required if the href attribute is present coords coordinates Specifies the coordinates of the area href URL Specifies the hyperlink target for the area hreflangNew language_code Specifies the language of the target URL mediaNew media query Specifies what media/device the target URL is optimized for nohref nohref Not supported in HTML5. Specifies that an area has no associated link relNew alternate author bookmark help license next prefetch prev search tag Specifies the relationship between the current document and the target URL shape default rect circle poly _blank _parent _self _top framename MIME_type Specifies the shape of the area target typeNew Specifies where to open the target URL Specifies the MIME type of the target URL 158
  160. 160. Richa Goel 1/6/2014 <STRONG> TAG Used to denote strong or important text. Browsers usually display display it in bold font. <strong> I am bold </strong> 160
  161. 161. Richa Goel 1/6/2014 <EM> TAG Used to denote emphasis of the affected text. Browsers usually display emphasis as italics. <EM> I am italicized </EM> 161
  162. 162. Richa Goel 1/6/2014 EXERCISE  Creating a web page in HTML5 with:  Images  Hyperlinks to some websites  Hyperlinks to your email  Information about a company, products, etc. 162
  163. 163. Richa Goel 1/6/2014 <SUB> & <SUP> TAG <SUB> displays your information in subscript. H<SUB>2</SUB> <SUP> displays your information in superscript. H<SUP>2</SUP> 163