Lab#2 overview of html


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 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

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

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


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


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.
14

Deprecated Attributes (cont.)
15


HTML5 NewTags (Elements)
The following tags (elements) have been introduced in HTML5:
http://www.tutorialspoint.com/html5/html5_new_tags.htm
16


HTML5 NewTags (Elements) (cont.)
17


New types for <input> tag
The input element's type attribute now has the following new values:
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

Lab#2 overview of html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Lab#2 overview of html

Similar to Lab#2 overview of html (20)

More from Yaowaluck Promdee

More from Yaowaluck Promdee (20)

Recently uploaded

Recently uploaded (20)

Lab#2 overview of html