lab#2 overview of html
DESCRIPTION
overview to html, html5, new elements, exampleTRANSCRIPT
LAB#2 Overview of HTML and HTML5 322432 Web design technology
By Yaowaluck Promdee, Dr.Sumonta Keamvilas
1
INDEX
Overview of Web design technology
Introduction of HTML
HTML5
Assignment
2
Overview of Web Design Technology
What is web design? • The design principles: balance, contrast,
emphasis and unity and • The design elements: lines, shapes, texture,
color and direction
3
Overview of Web Design Technology
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
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
HTML Page Structure
Below is a visualization of an HTML page structure:
6
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
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
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
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
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
Deprecated Tags 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
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
Deprecated Attributes (cont.)
http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm
15
HTML5 New Tags (Elements) The following tags (elements) have been introduced in HTML5:
http://www.tutorialspoint.com/html5/html5_new_tags.htm
16
HTML5 New Tags (Elements) (cont.)
http://www.tutorialspoint.com/html5/html5_new_tags.htm
17
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
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
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
Assignment Lab#2
Use Notepad to create HTML and HTML5 files to display as the figure
21