SlideShare a Scribd company logo

Overview HTML, HTML5 and Validations

•Download as PPTX, PDF•
•
Yaowaluck Promdee
Yaowaluck Promdee

The document provides an overview of HTML, HTML5, and validations for web design. It discusses the basics of HTML including elements like headings, paragraphs, links, tables and divs. It also covers new semantic elements introduced in HTML5 like header, nav, article and section. The document recommends validating code for browser compatibility, rendering speed, accessibility and to satisfy web standards. It provides a link to an online HTML validator and assigns students to write HTML code based on a figure using divs and HTML5 elements.

Related slideshows

Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Lab#5 style and selector
Lab#5 style and selectorLab#5 style and selector
Lab#5 style and selector
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
1 of 24
Overview of HTML, HTML5 and Validations Yaowaluck Promdee, Dr. Sumonta Kasemvilas http://deltabrasil.com/ 19/08/58 03:34 น. Web Design Technology 1
Index www.kindredtechnology.com • Overview of Web design technology • Introduction of HTML • HTML5 • Validations • Assignment 19/08/58 03:34 น. Web Design Technology 2
Overview of Web design What is Web design ? www.befound.media 19/08/58 03:34 น. Web Design Technology 3
catseyemarcom.com 19/08/58 03:34 น. Web Design Technology 4
http://static.wixstatic.com/ • This includes both the design principles: balance, contrast, emphasis and unity • the design element: lines, shapes, texture, color and direction What is web design? 19/08/58 03:34 น. Web Design Technology 5
Steps of Web design Plan Design Develop Deploy Research Observe Understand Analyze Use Cases Wireframes Design Concepts Communicate Visual design Coding Usability testing Verification 19/08/58 03:34 น. Web Design Technology 6
http://strongdesign.co/what-can-i-expect-from-my-website- redesign-project/19/08/58 03:34 น. Web Design Technology 7
Introduction to HTML • HTML stands for Hyper Text Markup Language • HTML is a markup language that is a set of markup tags • HTML documents are also called web pages. • Start and end tags are also called opening tags and closing tags 19/08/58 03:34 น. Web Design Technology 8
HTML Page Structure Below is a visualization of an HTML page structure: 19/08/58 03:34 น. Web Design Technology 9
HTML Links A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. HTML Link Syntax <a href=“url”>Link text</a> Example Link to Google <a href=“http://www.google.com/”>Google</a> If new tab use Google <a href=http://www.google.com/ target=“_blank”>Google</a> Link id Attribute < a id=“link”> Test link</a> Inside the same document: <a href="#link">Go to link</a> 19/08/58 03:34 น. Web Design Technology 10
Table HTML table: Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for table data) A row can also be divided into headings with the <th> tag. (th stands for table heading) Example: <table style="width:400px" border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 19/08/58 03:34 น. Web Design Technology 11
Table Try it! How is HTML code above will produce the following result? Subject Name Room 322432 Web design 6601 322793 Research Methodology 8504 19/08/58 03:34 น. Web Design Technology 12
HTML Blocks HTML Block Elements Examples: <h1>, <p>, <ul>, <table> HTML Inline Elements Examples: <b>, <td>, <a>, <img> HTML Grouping Tags <div> : block-level <span> : inline Example div: This is<div style=“color:blue”>blue</div>color Span: This is<span style=“color:blue”>blue</span>color This is Blue Color This is blue color 19/08/58 03:34 น. Web Design Technology 13
HTML with div 19/08/58 03:34 น. Web Design Technology 14
Example HTML Layout • <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background- color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br>HTML<br>CSS<br>JavaScript</div> <div id="content" style="background- color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text- align:center;"> Copyright © W3Schools.com</div> </div> </body> </html> 19/08/58 03:34 น. Web Design Technology 15
http://www.s3computers.com/images/html5.jpg 19/08/58 03:34 น. Web Design Technology 16
19/08/58 03:34 น. Web Design Technology 17
New Elements 19/08/58 03:34 น. Web Design Technology 18 <header> <sidebar> or <aside> <footer> <nav> <section> <article>
New Semantic/Structural Elements Tag Description <article> Defines an article in the document <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window <figcaption> Defines a caption for a <figure> element <figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer> Defines a footer for the document or a section <header> Defines a header for the document or a section <main> Defines the main content of a document http://www.w3schools.com/ 19/08/58 03:34 น. Web Design Technology 19
Elements Removed in HTML5 19/08/58 03:34 น. Web Design Technology 20 The following HTML4 elements have been removed from HTML5: Element Use instead <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <abbr> <object> CSS CSS CSS <ul> CSS
Problem with IE 19/08/58 03:34 น. Web Design Technology 21 Internet Explorer 8 and earlier, does not allow styling of unknown elements. Sjoerd Visscher created the "HTML5 Enabling JavaScript", "the shiv"
Validation HTML 19/08/58 03:34 น. Web Design Technology 22 A validator is a software program that can check your web pages against the web standards. Why validate, what are the benefits? 1.Non uniform browser correction 2. Rendering time 3. Future proofing 4. Google prefers valid code 5. Accessibility 6. Self satisfaction
Web Validations 19/08/58 03:34 น. Web Design Technology 23 https://validator.w3.org/nu/
Assignment#1 Write HTML Code following the figure in notepad or notepad++. 1. Using div 2. Using HTML5 19/08/58 03:34 น. Web Design Technology 24

More Related Content

Overview HTML, HTML5 and Validations

  • 1. Overview of HTML, HTML5 and Validations Yaowaluck Promdee, Dr. Sumonta Kasemvilas http://deltabrasil.com/ 19/08/58 03:34 น. Web Design Technology 1
  • 2. Index www.kindredtechnology.com • Overview of Web design technology • Introduction of HTML • HTML5 • Validations • Assignment 19/08/58 03:34 น. Web Design Technology 2
  • 3. Overview of Web design What is Web design ? www.befound.media 19/08/58 03:34 น. Web Design Technology 3
  • 4. catseyemarcom.com 19/08/58 03:34 น. Web Design Technology 4
  • 5. http://static.wixstatic.com/ • This includes both the design principles: balance, contrast, emphasis and unity • the design element: lines, shapes, texture, color and direction What is web design? 19/08/58 03:34 น. Web Design Technology 5
  • 6. Steps of Web design Plan Design Develop Deploy Research Observe Understand Analyze Use Cases Wireframes Design Concepts Communicate Visual design Coding Usability testing Verification 19/08/58 03:34 น. Web Design Technology 6
  • 8. Introduction to HTML • HTML stands for Hyper Text Markup Language • HTML is a markup language that is a set of markup tags • HTML documents are also called web pages. • Start and end tags are also called opening tags and closing tags 19/08/58 03:34 น. Web Design Technology 8
  • 9. HTML Page Structure Below is a visualization of an HTML page structure: 19/08/58 03:34 น. Web Design Technology 9
  • 10. HTML Links A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. HTML Link Syntax <a href=“url”>Link text</a> Example Link to Google <a href=“http://www.google.com/”>Google</a> If new tab use Google <a href=http://www.google.com/ target=“_blank”>Google</a> Link id Attribute < a id=“link”> Test link</a> Inside the same document: <a href="#link">Go to link</a> 19/08/58 03:34 น. Web Design Technology 10
  • 11. Table HTML table: Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for table data) A row can also be divided into headings with the <th> tag. (th stands for table heading) Example: <table style="width:400px" border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 1 2 3 4 19/08/58 03:34 น. Web Design Technology 11
  • 12. Table Try it! How is HTML code above will produce the following result? Subject Name Room 322432 Web design 6601 322793 Research Methodology 8504 19/08/58 03:34 น. Web Design Technology 12
  • 13. HTML Blocks HTML Block Elements Examples: <h1>, <p>, <ul>, <table> HTML Inline Elements Examples: <b>, <td>, <a>, <img> HTML Grouping Tags <div> : block-level <span> : inline Example div: This is<div style=“color:blue”>blue</div>color Span: This is<span style=“color:blue”>blue</span>color This is Blue Color This is blue color 19/08/58 03:34 น. Web Design Technology 13
  • 14. HTML with div 19/08/58 03:34 น. Web Design Technology 14
  • 15. Example HTML Layout • <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background- color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br>HTML<br>CSS<br>JavaScript</div> <div id="content" style="background- color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text- align:center;"> Copyright © W3Schools.com</div> </div> </body> </html> 19/08/58 03:34 น. Web Design Technology 15
  • 17. 19/08/58 03:34 น. Web Design Technology 17
  • 18. New Elements 19/08/58 03:34 น. Web Design Technology 18 <header> <sidebar> or <aside> <footer> <nav> <section> <article>
  • 19. New Semantic/Structural Elements Tag Description <article> Defines an article in the document <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window <figcaption> Defines a caption for a <figure> element <figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer> Defines a footer for the document or a section <header> Defines a header for the document or a section <main> Defines the main content of a document http://www.w3schools.com/ 19/08/58 03:34 น. Web Design Technology 19
  • 20. Elements Removed in HTML5 19/08/58 03:34 น. Web Design Technology 20 The following HTML4 elements have been removed from HTML5: Element Use instead <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <abbr> <object> CSS CSS CSS <ul> CSS
  • 21. Problem with IE 19/08/58 03:34 น. Web Design Technology 21 Internet Explorer 8 and earlier, does not allow styling of unknown elements. Sjoerd Visscher created the "HTML5 Enabling JavaScript", "the shiv" <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/h tml5.js"></script> <![endif]-->
  • 22. Validation HTML 19/08/58 03:34 น. Web Design Technology 22 A validator is a software program that can check your web pages against the web standards. Why validate, what are the benefits? 1.Non uniform browser correction 2. Rendering time 3. Future proofing 4. Google prefers valid code 5. Accessibility 6. Self satisfaction
  • 23. Web Validations 19/08/58 03:34 น. Web Design Technology 23 https://validator.w3.org/nu/
  • 24. Assignment#1 Write HTML Code following the figure in notepad or notepad++. 1. Using div 2. Using HTML5 19/08/58 03:34 น. Web Design Technology 24

Editor's Notes

  1. discussion with students
  2. The site purpose : what is the point of this website? and how? it going fulfill that purpose better than any other site on the web ? The site goal can help you to make it great. Once you know the goals of the sites, you can plan around them.
  3. code show structure html code the character encoding (charset) declaration is simple the default character encoding in HTML5 is UTF-8
  4. The id attribute can be used to create a bookmark inside an HTML document. Tip: Bookmarks are not displayed in any special way. They are invisible to the reader. An anchor with an id inside an HTML document: Link id Attribute Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a>
  5. <table> <tr> <td>Subject</td> <td>Name</td> <td>Room</td> </tr> <tr> <td>322432</td> <td>Web design</td> <td>6601</td> </tr> <tr> <td>322793</td> <td>Research Methodology</td> <td>8504</td> </tr> </table>
  6. HTML Block Elements Most HTML elements are defined as block level elements or as inline elements. Block level elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table> HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img> The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data. The HTML <span> Element The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
  7. Html5 introduces a list of new elements to build a page structure. old structures will be replaced with new elements, such as headers, footers, sections, articles, etc. The idea is to get rid of unnecessary div elements.
  8. New html5 element new semantic like a <header>, <footer> New form control attribute like a number, date, time, calendar New graphic elements: <svg> and <canvas> New multimedia element: <audio> and < video>
  9. New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D Graphics Local Storage Local SQL Database Web Applications 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. Some rules for HTML5 were established: New features should be based on HTML, CSS, DOM, and JavaScript The need for external plugins (like Flash) should be reduced Error handling should be easier than in previous versions Scripting has to be replaced by more markup HTML5 should be device-independent The development process should be visible to the public
  10. new tags will be a more organized and cleaner code. <body> <header>…</header> <nav>…</nav> <article> <section> …</section> </article> <aside>…</aside> <footer>…</footer> </body>
  11. HTML5 offers new elements for better structure:
  12. When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard. Make sure you make it a habit to validate all your web pages before publishing. Why validate, what are the benefits? 1. Non uniform browser correction Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. So if you forget to close a tag, Firefox might ignore this but Safari doesn't and you end up with a broken layout. 2. Rendering time If your code is valid the browser has to do less thinking as it doesn't have to correct any code, therefore the page will render faster. 3. Future proofing You never know what's around the corner in regards to technology but the chances are that if you have valid (X)HTML, you're ensuring that your website will work with future technologies. 4. Google prefers valid code Shaun Anderson conducted an interesting validation test; Does Google like valid code?. This experiment included 4 pages with the same content but a mixture of valid and non-valid HTML and CSS. The result was that Google picked up the page that had valid HTML and valid CSS and indexed this page over the rest. 5. Accessibility A valid site is more likely to be accessible to all types of browsers, platforms and screen readers. 6. Self satisfaction If feels good when you run a validation check on your site and you see the green bar appear :)
  13. What are the common validation errors and how to fix them? a. Ampersands This always catches me out. Ampersands must be written '&amp;' and not just '&'. This is true for writing urls too. b. Quotations Element property values must be put within quotes. c. Closing tags All elements must be closed off, even image tags if you're using a XHTML DTD. Image d. Doctypes Your page must have a valid Document Type Definition (DTD) at the top of the page, and take note that it is case sensitive. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> e. Nesting elements incorrectly Elements must be opened and closed in order.