Scribd
Upload
14 views63 pages

HTML Notes

This document provides an overview of HTML5 topics that will be covered in a lesson, including headings, linking, images, lists, tables and forms. The first slide lists the topics and structure. The second slide outlines the learning outcomes, which are to understand HTML5 components, create web pages using HTML5, and use various HTML5 elements. The third slide defines key terms like HTML and HTML5.

Uploaded by

nallamal1006
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
14 views63 pages

HTML Notes

This document provides an overview of HTML5 topics that will be covered in a lesson, including headings, linking, images, lists, tables and forms. The first slide lists the topics and structure. The second slide outlines the learning outcomes, which are to understand HTML5 components, create web pages using HTML5, and use various HTML5 elements. The third slide defines key terms like HTML and HTML5.

Uploaded by

nallamal1006
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 63

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

Module Code & Module Title Slide Title SLIDE 2


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

Module Code & Module Title Slide Title SLIDE 3


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

Module Code & Module Title Slide Title SLIDE 4


Introduction to HTML

• HTML structure
I speak HTML

head

body

Module Code & Module Title Slide Title SLIDE 5


Introduction to HTML

• 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.

Module Code & Module Title Slide Title SLIDE 6


Introduction to HTML

Tag Attribute Attribute


Name Name Value

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


Attribute Affected Content End Tag

Start Tag

HTML Element

Module Code & Module Title Slide Title SLIDE 7


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).

Module Code & Module Title Slide Title SLIDE 8


Introduction to HTML5

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

Module Code & Module Title Slide Title SLIDE 9


Introduction to HTML5

• 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

Module Code & Module Title Slide Title SLIDE 10


New Elements in HTML5

Module Code & Module Title Slide Title SLIDE 11


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>

Module Code & Module Title Slide Title SLIDE 12


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

Module Code & Module Title Slide Title SLIDE 13


First HTML5 Example

• HTML5 comments
– Start with <!-- and end 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

Module Code & Module Title Slide Title SLIDE 14


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>

Module Code & Module Title Slide Title SLIDE 15


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>

Module Code & Module Title Slide Title SLIDE 16


HEADERS
Six headers ( header elements)
 h1 through h6

Module Code & Module Title Slide Title SLIDE 17


Headers

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Header</title>
</head>
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
<h4>Level 4 Header</h4>
<h5>Level 5 Header</h5>
<h6>Level 6 Header</h6>
</body>
</html>

Module Code & Module Title Slide Title SLIDE 18


Headers

<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
<h4>Level 4 Header</h4>
<h5>Level 5 Header</h5>
<h6>Level 6 Header</h6>

Module Code & Module Title Slide Title SLIDE 19


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

Module Code & Module Title Slide Title SLIDE 20


Linking
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>

Module Code & Module Title Slide Title SLIDE 21


Linking

Module Code & Module Title Slide Title SLIDE 22


Linking

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linking</title>
</head>
<body>
Click <a href="mailto:name@email.com">here</a> to send an email to me.

</body>
</html>

Module Code & Module Title Slide Title SLIDE 23


Linking

Module Code & Module Title Slide Title SLIDE 24


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

Module Code & Module Title Slide Title SLIDE 25


Images

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>

Module Code & Module Title Slide Title SLIDE 26


Images

Module Code & Module Title Slide Title SLIDE 27


Images

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linking</title>
</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>

Module Code & Module Title Slide Title SLIDE 28


Images

Module Code & Module Title Slide Title SLIDE 29


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)

Module Code & Module Title Slide Title SLIDE 30


Special Characters and More Line Breaks

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Special Characters and More Line Breaks</title>
</head>
<body>
<p>Special Characters and More Line Breaks</p>
<hr /> <!-- inserts a horizontal rule -->

Module Code & Module Title Slide Title SLIDE 31


Special Characters and More Line Breaks

<!-- to strike through text use <del> tags -->


<!-- to subscript text use <sub> tags -->
<!-- to superscript text use <sup> tags -->
<!-- these tags are nested inside other tags -->
<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>
<!-- special characters are entered using the form &code; -->
<p>Half: <strong> &frac12;</strong></p>
<p>Quater: <strong> &frac14;</strong></p>
<p>Copyright: <strong>&copy;</strong></p>
<hr /> <!-- inserts a horizontal rule -->
</body>
</html>

Module Code & Module Title Slide Title SLIDE 32


Special Characters and More Line Breaks

Module Code & Module Title Slide Title SLIDE 33


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

Module Code & Module Title Slide Title SLIDE 34


Unordered Lists

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unordered Lists</title>
</head>
<body>
Here are my favorite fruits<br />
<ul>
<li>Banana</li>
<li>Coconut</li>
<li>Papaya</li>
</ul>

Module Code & Module Title Slide Title SLIDE 35


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>

Module Code & Module Title Slide Title SLIDE 36


Unordered Lists

Module Code & Module Title Slide Title SLIDE 37


Nested and Ordered Lists

• Represent hierarchical relationships


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

Module Code & Module Title Slide Title SLIDE 38


Nested and Ordered Lists
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nested List</title>
</head>
<body>
<h1>The Best Features of the Internet</h1>
<!-- create an unordered list -->
<ul>
<li>You can meet new friend from countries around the world. </li>
<li>You have access to new media as it becomes public:

Module Code & Module Title Slide Title SLIDE 39


Nested and Ordered Lists

<!-- this starts a nested list, which uses a -->


<!-- modified bullet. The list ends when you -->
<!-- close the <ul> tag. -->
<ul>
<li>New games </li>
<li>New applications
<!-- nested ordered list -->
<ol>
<li>For business </li>
<li>For fun </li>
</ol>
</li>
<li>Around the clock news </li>
<li>Search engines </li>

Module Code & Module Title Slide Title SLIDE 40


Nested and Ordered Lists

<li>Shopping </li>
<li>Programming
<!-- another nested ordered list -->
<ol>
<li>XHTML </li>
<li>C#&nbsp;</li>
<li>Links </li>
<li>XML&nbsp;</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>
<!-- ends the nested list of line 27 -->
</li>

Module Code & Module Title Slide Title SLIDE 41


Nested and Ordered Lists

Module Code & Module Title Slide Title SLIDE 42


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

Module Code & Module Title Slide Title SLIDE 43


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)

Module Code & Module Title Slide Title SLIDE 44


Basic Tables

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<!-- the <thead> is the first section of a table -->
<!-- it formats the table header area -->

Module Code & Module Title Slide Title SLIDE 45


Basic Tables

<thead>
<!-- <tr> inserts a table row -->
<tr>
<!-- insert a heading cell -->
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<!-- the <tfoot> is the last section of a table -->
<!-- it formats the table footer -->
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>

Module Code & Module Title Slide Title SLIDE 46


Basic Tables

<!-- all table content is enclosed within the <tbody> -->


<tr>
<!-- insert a data cell -->
<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>

Module Code & Module Title Slide Title SLIDE 47


Basic Tables

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

Module Code & Module Title Slide Title SLIDE 48


Basic Tables

Module Code & Module Title Slide Title SLIDE 49


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”

Module Code & Module Title Slide Title SLIDE 50


Intermediate Tables and Formatting

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
</head>
<body>
<h1>Table Example Page</h1>
<table border="1">
<caption> Here is a more complex sample table.</caption>
<!-- <colgroup> and <col> tags are used to format entire columns -->
<colgroup>
<!-- span attribute determines how many columns the <col> tag affects -->
<col align="right" />
</colgroup>

Module Code & Module Title Slide Title SLIDE 51


Intermediate Tables and Formatting

<thead>
<!-- rowspans and colspans merge the specified number of cells vertically or horizontally -->
<tr>
<th rowspan="2"><!-- merge two rows --><img src="shrek.gif" height="192" />&nbsp;</th>
<th colspan="4" valign="top"> <!-- merge four columns -->
<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>

Module Code & Module Title Slide Title SLIDE 52


Intermediate Tables and Formatting

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

Module Code & Module Title Slide Title SLIDE 53


Intermediate Tables and Formatting

Module Code & Module Title Slide Title SLIDE 54


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

Module Code & Module Title Slide Title SLIDE 55


Basic Forms

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
</head>
<body>
<h1>
Feedback Form</h1>
<p>
Please fill out this form to help us improve our site.</p>
<!-- this tag starts the form, gives the -->
<!-- method of sending information and the -->
<!-- location of form scripts -->

Module Code & Module Title Slide Title SLIDE 56


Basic Forms

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


<p>
<label> Name: </label>
<input type = “text” maxlength="30" name=“nm" size="25" />
</p>
<p>
<!-- input types "submit" and "reset" insert -->
<!-- buttons for submitting and clearing the -->
<!-- form's contents -->
<input type="submit" value="Submit Your Entries" />
<input type="reset" value="Clear Your Entries" />
</p>
</form>
</body>
</html>

Module Code & Module Title Slide Title SLIDE 57


Basic Forms

Module Code & Module Title Slide Title SLIDE 58


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

Module Code & Module Title Slide Title SLIDE 59


Quick Review Question

• Create the following form

Module Code & Module Title Slide Title SLIDE 60


Summary of Main Teaching Points

• HTML5 structure
• HTML5 elements
• Images
• Links
• Table
• Form

Module Code & Module Title Slide Title SLIDE 61


WHAT WE WILL COVER NEXT
CSS

Module Code & Module Title Slide Title SLIDE 62


Question and answer session

Q&A
Module Code & Module Title Slide Title SLIDE 63

You might also like