Lab#2 overview of html
3 likes843 views
The document provides an overview of HTML and HTML5. It introduces basic HTML tags and concepts like links, tables, blocks and layout. It also describes new features in HTML5 like forms, local storage, audio/video embedding and drag and drop. The assignment is to create HTML and HTML5 files using tags and concepts discussed in the document.
Lab#2 overview of html
- 1. LAB#2 Overview of HTML and HTML5 322432 Web design technology By Yaowaluck Promdee, Dr.Sumonta Keamvilas 1
- 2. INDEX Overview of Web design technology Introduction of HTML HTML5 Assignment 2
- 3. Overview ofWeb DesignTechnology What is web design? • The design principles: balance, contrast, emphasis and unity and • The design elements: lines, shapes, texture, color and direction 3
- 4. Overview ofWeb DesignTechnology Step for Web Design 1 2 3 4 Plan Design Develop Deploy Research Observe Understand Analyze Use Cases Wireframes Design Concepts Communicate Visual design Coding Usability Testing Verification 4
- 5. Introduction to HTML HTML stands for HyperText 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 5
- 6. HTML Page Structure Below is a visualization of an HTML page structure: 6
- 7. 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> 7
- 8. 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 8
- 9. Table Try it! How is HTML code above will produce the following result? Subject Name Room 322432 Web design 6601 322793 Research Methodology 8504 9
- 10. 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 10
- 11. 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> 11
- 12. 12
- 13. DeprecatedTags The following elements are not available in HTML5 anymore and their function is better handled by CSS: http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm 13
- 14. Deprecated Attributes HTML5 has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS. Some attributes from HTML4 are no longer allowed in HTML5 at all and they have been removed completely. http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm 14
- 16. HTML5 NewTags (Elements) The following tags (elements) have been introduced in HTML5: http://www.tutorialspoint.com/html5/html5_new_tags.htm 16
- 17. HTML5 NewTags (Elements) (cont.) http://www.tutorialspoint.com/html5/html5_new_tags.htm 17
- 18. New types for <input> tag The input element's type attribute now has the following new values: http://www.tutorialspoint.com/html5/html5_new_tags.htm 18
- 19. New Features in HTML5 HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5. Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag. Persistent Local Storage: To achieve without resorting to third-party plugins. WebSocket : A a next-generation bidirectional communication technology for web applications. Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript. Audio & Video: You can embed audio or video on your web pages without resorting to third- party plugins. Geolocation: Now visitors can choose to share their physical location with your web application. Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Drag and drop: Drag and drop the items from one location to another location on a the same webpage. http://www.tutorialspoint.com/html5/html5_quick_guide.htm 19
- 20. HTML5 Document Tag Description <article> Defines an article in the document, such as a blog entry or newspaper article. <aside> Defines a piece of content that is only slightly related to the rest of the page <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window and can be used to mark up a conversation <figcaption> Defines a caption for a <figure> element <figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, video, 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 <section> Defines a generic document or application section. It can be used together with h1-h6 to indicate the document structure <nav> Defines a section of the document intended for navigation http://www.w3schools.com/ http://www.tutorialspoint.com/html5/html5_quick_guide.htm 20
- 21. Assignment Lab#2 Use Notepad to create HTML and HTML5 files to display as the figure 21