HTML Notes

CT050-3-1-WAPP
WEB APPLICATIONS
HTML 5
Module Code & Module Title Slide Title SLIDE 1

Topic & Structure of The Lesson
• Introduction to HTML & HTML5

• HTML5 Structure
• Headers
• Linking
• Images
• Special Characters and More Line Breaks
• Unordered Lists
• Nested and Ordered Lists
• Basic Tables
• Basic Forms

Learning Outcomes
• At the end of this topic, You should be able to

• Understand important components of HTML5 documents.
• Use HTML5 to create Web pages.
• Add images to Web pages.
• Understand how to create and use hyperlinks to navigate Web pages.
• Mark up lists of information.
• Write basic codes in HTML5

Key Terms You Must Be Able To Use
• If you have mastered this topic, you should be able to use the following terms correctly in
your assignments and exams:
• HTML
– HyperText Markup Language
– The coded format used for creating hypertext documents on the World Wide Web and
controlling how information is displayed
• HTML5
– Current version of HyperText Markup Language
– Added new elements and features

Introduction to HTML
• HTML structure
I speak HTML
head
body

• Universal standard hypertext language which formats documents and incorporates

hypertext links to other documents stored on the same or different computers.
• Provides a set of tags
– <img>, <font>, <p> , <b>
• Does not provide facility to define new tags.

Tag Attribute Attribute

Name Name Value
<h1 align=“left”>Example Heading</h1>

Attribute Affected Content End Tag
Start Tag
HTML Element

Introduction to HTML5
- HTML5 is the new standard for HTML.

- HTML6 is still a work in progress, but most modern browsers support
HTML5.
- HTML5 is a cooperation between the World Wide Web Consortium (W3C)
and the Web Hypertext Application Technology Working Group
(WHATWG).

Some rules for HTML5 :

> New features should be based on HTML,
CSS, DOM, and JavaScript
> Reduce the need for external plugins
> Better error handling
> More markup to replace scripting
> HTML5 should be device independent

• New features :
> Canvas element for drawing
> Video/audio elements for media playback
> Better support for local offline storage
> New content specific elements like article,
footer, header, nav, section
> New form controls like calendar, date, time,
email, url, search

New Elements in HTML5

DOCTYPE in HTML5
The DOCTYPE declaration in XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Previous versions of HTML defined a lot of doctypes and

choosing the right one could be tricky. In HTML5, there is only
one DOCTYPE :
<!DOCTYPE html>

Editing HTML5
• HTML5 documents
– Source-code form
– Text editor (e.g. Notepad, Wordpad, emacs, etc.)
– .html or .htm file-name extension
– Web server
• Stores HTML5 documents
– Web browser
• Requests HTML5 documents

First HTML5 Example
• HTML5 comments
– Start with 
– html element
• head element
– Head section
» Title of the document
» Style sheets and scripts
• body element
– Body section
» Page’s content the browser displays
– Start tag
• attributes (provide additional information about an element)
– name and value (separated by an equal sign)
– End tag

First HTML5 Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 sure is fun</title>
</head>
<body>
<p>HTML5 is fun!!</p>
</body>
</html>

The Rules of HTML5
• HTML is not case sensitive, HTML5 is

– <b>, <B> are the same under HTML.
– <p ALIGN=“center”> and <p align=“center”> are also the same
• HTML/HTML5 attribute values may be case sensitive

– <img src=“test.gif”> is the same as <img SRC=“test.gif”> under HTML
– <img src=“test.gif”> may not be same as <img src=“TEST.GIF”> in HTML5.
• HTML5 elements should be nested not crossed.

– Nested = Good <b><i>This is bold and italic</i></b>
– Crossed = Bad <b><i>Don’t do this</b></i>

HEADERS
Six headers ( header elements)
 h1 through h6

Headers
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
</head>
<body>
<h1>Level 1 Header</h1>
</body>
</html>

Headers

Linking
• Hyperlink
– References other sources such as XHTML documents and images
– Both text and images can act as hyperlinks
– Created using the a (anchor) element
• Attribute href
– Specifies the location of a linked resource
• Link to e-mail addresses using mailto: URL
• <strong> tag
– Bold
• br element
– Line break

Linking
<!DOCTYPE html>
<html>
<head>
<title>Linking</title>
</head>
<body>
<strong>Click a name to go to that page</strong>
<br />
<br />
<a href="http://www.google.com">Google</a><br />
<a href="http://www.yahoo.com">Yahoo</a><br />
<a href="http://validator.w3.org">W3C Markup Validation Service </a>
</body>
</html>

Linking

Linking
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Click <a href="mailto:[email protected]">here</a> to send an email to me.
</body>
</html>

Linking

Images
• Three most popular formats

– Graphics Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphics (PNG)
– img element
• src attribute
– Specifies the location of the image file
• width and height
• Pixels (“picture elements”)
• Empty elements
– Terminated by character / inside the closing right angle bracket (>), or by explicitly including the
end tag

Images
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="princess.jpg" width="640" height="360" alt="PrincessL"/>
<img src="princess.jpg" width="356" height="200" alt="PrincessM"/>
<img src="princess.jpg" width="228" height="128" alt="PrincessS"/>
</body>
</html>

Images

Images
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<strong>Click a picture to go to that page</strong>
<br />
<br />
<a href="http://www.google.com"><img src="google.gif" /></a><br />
<a href="http://www.yahoo.com"><img src="yahoo.gif" /></a><br />
<a href="http://validator.w3.org"><img src="w3c-valid-xhtml.png" /></a>
</body>
</html>

Images

Special Characters and More Line Breaks
• Character entity references

• Numeric character references
• del
– Strike-out text
• sup
– Superscript text
• sub
– Subscript text
• <hr />
– Horizontal rule (horizontal line)

<!DOCTYPE html>
<html>
<head>
<title>Special Characters and More Line Breaks</title>
</head>
<body>
<p>Special Characters and More Line Breaks</p>
<hr /> 






<p><del>This is strike through</del></p>
<p>Superscript: 3.14 x 10<sup>2</sup></p>
<p>Subscript: H<sub>2</sub>O</p>

<p>Half: <strong> ½</strong></p>
<p>Quater: <strong> ¼</strong></p>
<p>Copyright: <strong>©</strong></p>
<hr /> 
</body>
</html>


Unordered Lists
• Unordered list element ul

– Creates a list in which each item begins with a bullet symbol (called a disc)
– li (list item)
• Entry in an unordered list

Unordered Lists
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
Here are my favorite fruits<br />
<ul>
<li>Banana</li>
<li>Coconut</li>
<li>Papaya</li>
</ul>

Unordered Lists
<p>Here are my favorite sites</p>

<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
</ul>
</body>
</html>

Unordered Lists

Nested and Ordered Lists
• Represent hierarchical relationships

• Ordered lists (ol)
– Creates a list in which each item begins with a number

<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h1>The Best Features of the Internet</h1>

<ul>
<li>You can meet new friend from countries around the world. </li>
<li>You have access to new media as it becomes public:





<ul>
<li>New games </li>
<li>New applications

<ol>
<li>For business </li>
<li>For fun </li>
</ol>
</li>
<li>Around the clock news </li>
<li>Search engines </li>

<li>Shopping </li>
<li>Programming

<ol>
<li>XHTML </li>
<li>C# </li>
<li>Links </li>
<li>XML </li>
<li>Keeping in touch with old friends </li>
<li>JavaScripts </li> <li>It is the technology of the future! </li>
<li>New languages </li> </ul>
</ol>
</body>
</li> </html>
</ul>

</li>


Basic Tables
• Tables
– Present information
• Organize data into rows and columns
• table element
– Attribute border
• Specifies the table’s border width in pixels
– Attribute summary
• Describes the table’s contents
– Attribute caption
• Describes the table’s content and helps text-based browsers interpret table data

Basic Tables
• table element
– Head section (header cell, defined with a thead element)
• Contains header information such as column names
• tr element (defines an individual table row)
• th element (defines the columns in the head section)
– Foot section (defined with a tfoot element)
– Table body (defined with a tbody element)
– Data cells (defined with td element)

Basic Tables
<!DOCTYPE html>
<html>
<head>
<title>Creating a Basic Table</title>
</head>
<body>
<table border="1" summary="This table provides information about the price of fruit" width="40%">
<caption>
Price of Fruit
</caption>



Basic Tables
<thead>

<tr>

<th>Fruit</th>
<th>Price</th>
</tr>
</thead>


<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>

Basic Tables


<tr>

<td>Apple</td>
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>

Basic Tables
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</table>
</body>
</html>

Basic Tables

Intermediate Tables and Formatting
• Element colgroup
– Groups and formats columns
• Element col
– Attribute align
• Determines the alignment of text in the column
– Attribute span
• Determines how many columns the col element formats
• rowspan and colspan
– Specify the number of rows or columns occupied by a cell
– valign
• Aligns data vertically
• One of the four values: “top”, “middle”, “bottom”, “baseline”

<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<h1>Table Example Page</h1>
<table border="1">
<caption> Here is a more complex sample table.</caption>

<colgroup>

<col align="right" />
</colgroup>

<thead>

<tr>
<th rowspan="2"><img src="shrek.gif" height="192" /> </th>
<th colspan="4" valign="top"> 
<h1>Shrek</h1><br />
<p>As for 2007</p>
</th>
</tr>
<tr valign="bottom">
<th>Shrek 1 (2001)</th>
<th>Shrek 2 (2004)</th>
<th>Shrek 3 (2007)</th>
<th>Shrek 4 (?)</th>
</tr>
</thead>

<tr>
<th>VCD</th>
<td>Available</td>
<td>Available</td>
<td>Not Available</td>
</tr>
<tr>
<th>DVD</th>
<td>Available</td>
<td>Available</td>
</tr>
</table>
</body>
</html>


Basic Forms
• Element form
– Attribute method
• Specifies how the form’s data is sent to Web server
• method = “post”
– Appends form data to the browser request
• method = “get”
– Appends form data directly to the end of the URL
– Attribute action
• Specifies the URL of a script on the Web server
– input
• Specifies data to provide to the script that processes the form

Basic Forms
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<h1>
Feedback Form</h1>
<p>
Please fill out this form to help us improve our site.</p>




Basic Forms
<form action=“formmail.html" method="post">

<p>
<label> Name: </label>
<input type = “text” maxlength="30" name=“nm" size="25" />
</p>
<p>



<input type="submit" value="Submit Your Entries" />
<input type="reset" value="Clear Your Entries" />
</p>
</form>
</body>
</html>

Basic Forms

More Complex Form
• Element textarea
– Inserts a multiline text box (text area)
– Attribute rows
• Specifies the number of rows
– Attribute cols
• Specifies the number columns
– Input “password”
• Inserts a password box with the specified size
• Element checkbox
– Enable users to select from a set of options
• Element select
– Provides a drop-down list of items
Element option
– Adds items to the drop-down list

Quick Review Question
• Create the following form

Summary of Main Teaching Points
• HTML5 structure
• HTML5 elements
• Images
• Links
• Table
• Form

WHAT WE WILL COVER NEXT
CSS

Question and answer session
Q&A

HTML Notes

Uploaded by

Copyright:

Available Formats

HTML Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Notes

Uploaded by

Copyright:

Available Formats

CT050-3-1-WAPP

Module Code & Module Title Slide Title SLIDE 1

• Introduction to HTML & HTML5

Module Code & Module Title Slide Title SLIDE 2

• At the end of this topic, You should be able to

Module Code & Module Title Slide Title SLIDE 3

Module Code & Module Title Slide Title SLIDE 4

Module Code & Module Title Slide Title SLIDE 5

• Universal standard hypertext language which formats documents and incorporates

Module Code & Module Title Slide Title SLIDE 6

Tag Attribute Attribute

<h1 align=“left”>Example Heading</h1>

Module Code & Module Title Slide Title SLIDE 7

- HTML5 is the new standard for HTML.

Module Code & Module Title Slide Title SLIDE 8

Some rules for HTML5 :

Module Code & Module Title Slide Title SLIDE 9

Module Code & Module Title Slide Title SLIDE 10

Module Code & Module Title Slide Title SLIDE 11

The DOCTYPE declaration in XHTML :

Previous versions of HTML defined a lot of doctypes and

Module Code & Module Title Slide Title SLIDE 12

Module Code & Module Title Slide Title SLIDE 13

Module Code & Module Title Slide Title SLIDE 14

Module Code & Module Title Slide Title SLIDE 15

• HTML is not case sensitive, HTML5 is

• HTML/HTML5 attribute values may be case sensitive

• HTML5 elements should be nested not crossed.

Module Code & Module Title Slide Title SLIDE 16

Module Code & Module Title Slide Title SLIDE 17

Module Code & Module Title Slide Title SLIDE 18

Module Code & Module Title Slide Title SLIDE 19

Module Code & Module Title Slide Title SLIDE 20

Module Code & Module Title Slide Title SLIDE 21

Module Code & Module Title Slide Title SLIDE 22

Module Code & Module Title Slide Title SLIDE 23

Module Code & Module Title Slide Title SLIDE 24

• Three most popular formats

Module Code & Module Title Slide Title SLIDE 25

Module Code & Module Title Slide Title SLIDE 26

Module Code & Module Title Slide Title SLIDE 27

Module Code & Module Title Slide Title SLIDE 28

Module Code & Module Title Slide Title SLIDE 29

• Character entity references

Module Code & Module Title Slide Title SLIDE 30

Module Code & Module Title Slide Title SLIDE 31

Module Code & Module Title Slide Title SLIDE 32

Module Code & Module Title Slide Title SLIDE 33

• Unordered list element ul

Module Code & Module Title Slide Title SLIDE 34

Module Code & Module Title Slide Title SLIDE 35

<p>Here are my favorite sites</p>

Module Code & Module Title Slide Title SLIDE 36

Module Code & Module Title Slide Title SLIDE 37

• Represent hierarchical relationships

Module Code & Module Title Slide Title SLIDE 38

Module Code & Module Title Slide Title SLIDE 39