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.

Overview HTML, HTML5 and Validations

1,905 views

Published on

Introduction to HTML and HTML5, how to validate code and Assignment by Web design technology.

Published in: Technology
  • The Scrambler Unlock Her Legs | 95% Off by Bobby Rio-Rob Judge? ➤➤ http://t.cn/AijLRbnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ■■■ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Overview HTML, HTML5 and Validations

  1. 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. 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. 3. Overview of Web design What is Web design ? www.befound.media 19/08/58 03:34 น. Web Design Technology 3
  4. 4. catseyemarcom.com 19/08/58 03:34 น. Web Design Technology 4
  5. 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. 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
  7. 7. http://strongdesign.co/what-can-i-expect-from-my-website- redesign-project/19/08/58 03:34 น. Web Design Technology 7
  8. 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. 9. HTML Page Structure Below is a visualization of an HTML page structure: 19/08/58 03:34 น. Web Design Technology 9
  10. 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. 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. 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. 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. 14. HTML with div 19/08/58 03:34 น. Web Design Technology 14
  15. 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
  16. 16. http://www.s3computers.com/images/html5.jpg 19/08/58 03:34 น. Web Design Technology 16
  17. 17. 19/08/58 03:34 น. Web Design Technology 17
  18. 18. New Elements 19/08/58 03:34 น. Web Design Technology 18 <header> <sidebar> or <aside> <footer> <nav> <section> <article>
  19. 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. 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. 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. 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. 23. Web Validations 19/08/58 03:34 น. Web Design Technology 23 https://validator.w3.org/nu/
  24. 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

×