Web development using html 5

Web Development Using
HTML
Anjan Mahanta
LCCT - International Education Institute
anjan_mahanta@hotmail.com 1

What’s HTML?
• HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language.
• HTML5 is the latest standard for HTML.
• HTML5 is a cooperation between the World Wide
Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
2
Copyright: LCCT International Education Institute :: Anjan Mahanta ::

W3C
• World Wide Web Consortium (W3C)
• The World Wide Web Consortium (W3C) is an
international community that develops open standards
to ensure the long-term growth of the Web.
3

Text Editor
We can develop HTML program using the following text editors
– Windows Note Pad
– Mac Text Edit
– Adobe Dreamweaver
– Komodo Edit
Komodo edit can be downloaded free from
http://komodoide.com/komodo-edit
4

Start Notepad
To start Notepad go to:
Start
All Programs
Accessories
Notepad
5

Lesson 1
Hello World
• Open the text editor
• Create a New File
• Save as, hello_world.html
• Write the following codes
• Save again
• Open the saved file, hello_world.html in any browser
6

Lesson 1
Example 1.1
• Create a New File
• Save as, example1.html
• Write the following codes
• Save again
• Open the saved file, example1.html in any browser
7

Explanation
Example 1.1
•The DOCTYPE declaration defines the document type
•The text between <html> and </html> describes the web page
•The text between <head> and </head> is the visible head page
content
•The text between <title> and </title> is the visible title of the
browser
•The text between <h1> and </h1> is displayed as a heading
•The text between <body> and </body> is the visible page
content
•The text between <p> and </p> is displayed as a paragraph
8

Web Browsers
9
The purpose of a web browser (such as Google Chrome, Internet
Explorer, Firefox, Safari) is to read HTML documents and display
them as web pages. The browser does not display the HTML tags,
but uses the tags to interpret the content of the page:

HTML Page Structure
10

HTML Tags
11
HTML markup tags are usually called HTML tags
• HTML tags are keywords (tag names) surrounded by angle
brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the
end tag
• The end tag is written like the start tag, with a forward
slash before the tag name
• Start and end tags are also called opening tags and
closing tags
<tagname>content</tagname>

HTML 5 Declaration
12
<!DOCTYPE html>
The <!DOCTYPE> declaration helps the browser to
display a web page correctly.
There are many different documents on the web, and a
browser can only display an HTML page 100%
correctly if it knows the HTML type and version used.

Lab Exercise 1
13
The Web browser should display the followings,

HTML 5 Headings
14
HTML headings are defined with the
<h1> to <h6> tags.
Example
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
OUTPUT

HTML Paragraphs
HTML paragraphs are defined with the
<p> tag
Example
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
15

HTML Links
HTML links are defined with the <a> tag.
Example:
<!DOCTYPE HTML>
<html>
<head>
<title> Hyperlink </title>
<h1> Please Visit My College Website </h1>
</head>
<body>
<a href = "http://www.lcct.ac.th"> Click here </a>
</body> OUTPUT
16

HTML Comment
• Comments can be inserted into the HTML code
to make it more readable and understandable.
<!DOCTYPE html>
<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>
OUTPUT
Copyright: LCCT International Education Institute :: Anjan Mahanta :: 17

HTML Line Breaks
Use the <br> tag if you want a line break (a new line)
without starting a new paragraph:
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>
OUTPUT
18

HTML Images
HTML images are defined with the <img> tag.
Example:
<!DOCTYPE html>
<html>
<body>
<img src="w3schools.jpg" width="104" height="142">
</body>
</html>
OUTPUT Note:
The picture file should be saved
in the same folder

Exercise 2
Output
LCCT
Lampang College of Commerce and Technology
www.lcct.ac.th
Welcome to LCCT !!

HTML Lines
• The <hr>tag creates a horizontal line in an HTML page.
<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<hr>
<hr>
</body>
</html>
OUTPUT

HTML Text Formatting
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
OUTPUT
22

HTML Links
• The Target Attributes
<!DOCTYPE html>
<html>
<body>
<a href="http://www.lcct.ac.th" target="_blank">Visit LCCT!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser
window/tab.</p>
</body>
</html> OUTPUT
23

HTML Links – The ID Attribute
• The id attribute can be used to create a bookmark inside
an HTML document
<!DOCTYPE html>
<html>
<body>
<p><a id="tips">Useful Tips Section</a></p>
<p><a href="#tips">Visit the Useful Tips Section</a></p>
</body>
</html>
OUTPUT
24

HTML Head
• The HTML <head> Element
• The <head> element is a container for all the head elements.
• Elements inside <head> can include scripts, instruct the
browser where to find style sheets, provide meta
information, and more.
• The following tags can be added to the head section: <title>,
<style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML Title
• The HTML <title> Element
• The <title> tag defines the title of the document.
• The <title> element is required in all HTML/XHTML documents.
• The <title> element:
• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
26

HTML Meta Tags
• <meta> Tags - Examples of Use
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
• Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
• Define the author of a page:
<meta name="author" content=“Anjan Mahanta">
• Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
27

HTML Meta Tags
• <meta> Tags - Examples of Use
<!DOCTYPE html>
<html>
<head>
<meta name="description" content ="Free Web Toturials">
<meta name ="keywords" content="HTML, CSS, Javascript">
<meta name ="author" content ="Anjan Mahanta">
<meta charset="UTF-8">
</head>
<body>
<h1> My Website</h1>
<p> Some text...</p>
</body>
</html>
28
OUTPUT

HTML Tables
• Tables are defined with the <table> tag
• A table is divided into rows (with the <tr>
tag), and each row is divided into data cells
(with the <td> tag).
• td stands for "table data," and holds the
content of a data cell.
• A <td> tag can contain text, links, images,
lists, forms, other tables, etc.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
OUTPUT
29

HTML Table Header
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
30
OUTPUT

Tables Without Borders
<!DOCTYPE html>
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
</tr>
</table>
</body>
</html>
31
OUTPUT

Table Headers
• Example:
<!DOCTYPE html>
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
32
OUTPUT

Table with Caption
• Example:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
33
OUTPUT

Table cells that span more than one
row or one column
• Example:
<!DOCTYPE html>
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
34
OUTPUT

Tags inside a table
• Example:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
35
OUTPUT

Cell Padding
• Example:
<!DOCTYPE html>
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
36
OUTPUT

Cell Spacing
• Example:
<!DOCTYPE html>
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
37
OUTPUT

HTML LISTS
• The most common HTML lists are ordered and unordered lists:
38

Ordered List
• An ordered list starts with the <ol> tag.
• Each list item starts with the <li> tag.
• The list items are marked with numbers.
39
EXAMPLE OUTPUT

Ordered List
40
EXAMPLE: Numbered List OUTPUT
<!DOCTYPE html>
<HTML>
<title> Ordered List</title>
<body>
<h4> Numbered List:</h4>
<ol>
<li> Apples </li>
<li> Bananas </li>
<li> Lemons </li>
<li> Oranges </li>
</ol>
</body>
</HTML>

Ordered List
41
EXAMPLE: Letters List OUTPUT
<!DOCTYPE html>
<HTML>
<body>
<h4> Letters List:</h4>
<ol type="A">
<li> Apples </li>
<li> Bananas </li>
<li> Lemons </li>
<li> Oranges </li>
</ol>
</body>
</HTML>

Ordered List
42
EXAMPLE: Lower Case List OUTPUT
<!DOCTYPE html>
<HTML>
<body>
<h4> Lower Case List:</h4>
<ol type=“a”>
<li> Apples </li>
<li> Bananas </li>
<li> Lemons </li>
<li> Oranges </li>
</ol>
</body>
</HTML>

Ordered List
43
EXAMPLE: Roman Number List OUTPUT
<!DOCTYPE html>
<HTML>
<body>
<h4> Roman Number List:</h4>
<ol type=“I”>
<li> Apples </li>
<li> Bananas </li>
<li> Lemons </li>
<li> Oranges </li>
</ol>
</body>
</HTML>

Ordered List
44
EXAMPLE: Lowercase Roman Number List OUTPUT
<!DOCTYPE html>
<HTML>
<body>
<h4> LowercaseRoman Number List:</h4>
<ol type=“i”>
<li> Apples </li>
<li> Bananas </li>
<li> Lemons </li>
<li> Oranges </li>
</ol>
</body>
</HTML>

Unordered List
• An ordered list starts with the <ul> tag.
• Each list item starts with the <li> tag.
• The list items are marked with bullets.
45
EXAMPLE OUTPUT

Unordered List
46
EXAMPLE: Disc Bullet List OUTPUT
<!DOCTYPE html>
<HTML>
<title> Unordered List</title>
<body>
<h4> Disc Bullet List:</h4>
<ul style="list-style-type:disc">
<li> Apples </li>
<li> Bananas </li>
<li> Lemons </li>
<li> Oranges </li>
</ul>
</body>
</HTML>

Unordered List
47
EXAMPLE: Disc Bullet List OUTPUT
<!DOCTYPE html>
<HTML>
<title> Unordered List</title>
<body>
<h4> Disc Bullet List:</h4>
<ul style="list-style-type:disc">
<li> Apples </li>
<li> Bananas </li>
<li> Lemons </li>
<li> Oranges </li>
</ul>
</body>
</HTML>
Other Types: Circle, Square

Nested List - 1
48
EXAMPLE: Nested List OUTPUT
<!DOCTYPE html>
<HTML>
<title> Nested List</title>
<body>
<h4> A Nested List:</h4>
<ul>
<li> Coffee </li>
<li> Tea
<ul>
<li> Green Tea</li>
<li> Black Tea</li>
</ul>
</li>
<li> Milk</li>
</ul>
</body>
</HTML>

Nested List - 2
49
OUTPUT
<!DOCTYPE html>
<HTML>
<title> Nested List</title>
<body>
<h4> A Nested List:</h4>
<ul>
<li> Coffee </li>
<li> Tea
<ul>
<li> Green Tea</li>
<ul>
<li> Chinese </li>
<li> African </li>
</ul>
</li>
</ul>
<li> Milk</li>
</ul>
</body>
</HTML>

Description List
• A description list is a list of terms/names, with a description of each
term/name.
• The <dl> tag defines a description list.
• The <dl> tag is used in conjunction with <dt> (defines
terms/names) and <dd> (describes each term/name):
50
EXAMPLE OUTPUT

The HTML <div> Element
• The HTML <div> element is a block level element that can be used as a
container for grouping other HTML elements.
• It is used for document layout.
• The <div> tag defines a division or a section in an HTML document.
51
EXAMPLE
OUTPUT
<!DOCTYPE html>
<html>
<title> DIV Example </title>
<h1> This is an example of Div</h1>
<body>
<p>Hello! Welcome to IEI</p>
<div style="color:#0000FF">
<h1> We love to study here..</h1>
<p> We speak english..</p>
</div>
<p> Come join us!</p>
</body>
</html>

The HTML <div> Element
52
EXAMPLE
OUTPUT
<!DOCTYPE html>
<html>
<title> DIV Example With Border </title>
<h1> This is an example of div with border and
alignment</h1>
<body>
<div align="center" style="border:1px solid red">
<h1> We love to study here..</h1>
<p> We speak english..</p>
</div>
<p> Come join us!</p>
</body>
</html>

The HTML <span> Element
• The <span> tag is used to group inline-elements in a document.
• The <span> tag provides no visual change by itself.
• The <span> tag provides a way to add a hook to a part of a text or a
part of a document.
53
EXAMPLE
<!DOCTYPE html>
<html>
<title>:: Example of Span ::</title>
<body>
<p> Welcome to study at the <span style="color:blue;
font-weight:bold">IEI</span>. It is the best
<span style="color:red; font-weight:bold">
internationalprogram </span>
in the north of Thailand.</p>
</body>
</html> OUTPUT

HTML Layouts
• Web page layout is very important to make your website look
good.
• Multiple columns are created by using <div> or <table>
elements.
• Most websites have put their content in multiple columns
(formatted like a magazine or newspaper).
• CSS are used to position elements, or to create backgrounds or
colorful look for the pages.
54

HTML Layouts
• Example
55

HTML Layouts
• Code :: Part I ::
56
<!DOCTYPE html>
<html>
<title> :: Website Layout ::</title>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#0066FF";>
<h1 style="margin-bottom:0;">International Education Institute</h1></div>
<div id="menu" style="background-color:#00FFFF; height:200px; width:100px;float:left;">
<b> MENU</b> <br>
About Us <br>
Our Programs <br>
Photogallery <br>
Contact Us
</div>

HTML Layouts
• Code :: Part II ::
57
<div id="content" style="background-color:#EEEEEE; height:200px; width:400px;float:left;">
Main Content
</div>
<div id="footer" style="background-color:#0066FF; clear:both; text-align:center;">
Copyright © Anjan Mahanta
</div>
</div>
</body>
</html>

HTML Iframes
• An iframe is used to display a web page within a web page.
58
<!DOCTYPE html>
<html>
<title> :: Example of iframe :: </title>
<body>
<h4> iframe</h4>
<iframe src="http://www.lcct.ac.th" width="500" height="300"></iframe>
</body>
</html>
EXAMPLE
OUTPUT

HTML Iframes
• Using iframe as a target for a link
59
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.lcct.ac.th" name="iframe_a" width="300"
height="200" frameborder="0"></iframe>
<p><a href="http://www.lcct.ac.th" target="iframe_a">LCCT</a></p>
<p><a href="http://www.lit.ac.th" target="iframe_a">LIT</a></p>
</body>
</html>
EXAMPLE
OUTPUT

HTML Colors
• Colors are displayed combining RED, GREEN, and BLUE light.
• The lowest value that can be given to one of the light sources is 0 (hex 00).
The highest value is 255 (hex FF).
• Hex values are written as 3 double digit numbers, starting with a # sign.
60

HTML Color Name
• 140 color names are defined in the HTML
61

HTML Entities
• Reserved characters in HTML must be replaced with character entities.
62
<!DOCTYPE html>
<html>
<title> :: Example of Entities :: </title>
<body>
<h4> Entities</h4>
<p> à</p>
<p> &copy</p>
</body>
</html>
EXAMPLE
OUTPUT

HTML Entities
63
Useful HTML Character Entities

HTML Entities
64
Useful HTML Character Entities

HTML Multimedia
65
• Multimedia on the web is sound, music, videos, movies, and
animations.
• The support for sounds, animations, and videos is handled in
different ways by various browsers.
• Multimedia files have their own formats and different
extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

HTML Plug-ins
66
• A helper application is a small computer program that extends
the standard functionality of the browser.
• Helper applications are also called plug-ins.
• Examples of well-known plug-ins are Java applets and Adobe
Flash Player.
• Plug-ins can be added to web pages with the <object> tag or the
<embed> tag.

The <object> Element
67
• The <object> element is supported in all major browsers .
• The <object> element defines an embedded object within an HTML
document.
• It is used to embed plug-ins (like Java applets, ActiveX, PDF, and Flash) in web
pages.
<!DOCTYPE html>
<html>
<title> :: Example of Plug-Ins ::</title>
<body>
<object width="500" height="300" data="cherry.swf"> </object>
</body>
</html>
EXAMPLE
Note : Save a file as cherry with .swf extension in the same folder as the html file

The <embed> Element
68
• The <embed> element is supported in all major browsers .
• The <embed> element defines a container for an external application or
interactive content (a plug-in).
• The <embed> element will validate in an HTML5 page, but not in an HTML 4
page.
<!DOCTYPE html>
<html>
<title> :: Example of Plug-Ins ::</title>
<body>
<embed width="400" height="400" src="cherry.swf">
</body>
</html>
EXAMPLE
Note : Save a file as cherry with .swf extension in the same folder as the html file

HTML Sounds/Audio
69
HTML Audio - Using <embed>
• The <embed> tag defines a container for external (non-HTML) content.
Problems
• Different browsers support different audio formats
• If a browser does not support the file format, the audio will not play without a
plug-in
• If the plug-in is not installed on the users' computer, the audio will not play
<!DOCTYPE html>
<html>
<title> :: Example of Audio ::</title>
<body>
<embed width="300" height="100" src="song.mp3">
</body>
</html>
EXAMPLE
Note : Save a file as song with .mp3 extension in the same folder as the html file

HTML Sounds/Audio
70
HTML Audio - Using <object>
• The <object> tag can also define a container for external (non-HTML) content.
Problems
• Different browsers support different audio formats
• If a browser does not support the file format, the audio will not play without a
plug-in
• If the plug-in is not installed on the users' computer, the audio will not play
<!DOCTYPE html>
<html>
<body>
<object height="50" width="100" data="song.mp3"></object>
</body>
</html>
EXAMPLE

HTML Sounds/Audio
71
The HTML5 <audio> Element
• The HTML5 <audio> tag defines sound, such as music or other audio streams.
• The <audio> element works in all modern browsers.
• MP3 file (for Internet Explorer, Chrome, Firefox 21+, and Safari)
• OGG file (for older Firefox and Opera).
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser doesn't support this audio format
</audio>
</body>
</html>
EXAMPLE
Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file

HTML Sounds/Audio
72
The HTML5 <audio> The Best Solution
• The best solution is to use the HTML5 <audio> element + the <embed> element.
• First it tries to play the audio either as MP3 or OGG. If that fails, the code "falls back"
to try the <embed> element.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
<embed height="50" width="100" src="song.mp3">
</audio>
</body>
</html>
EXAMPLE
Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file

HTML Sounds/Audio
73
HTML Audio - Using A Hyperlink
• If a web page includes a hyperlink to a media file, most browsers will use a
"helper application" to play the file.
<!DOCTYPE html>
<html>
<title> :: Example of Audio :: </title>
<body>
<a href="song.mp3"> play the song</a>
</body>
</html>
EXAMPLE

HTML Videos
74
HTML Video - The Best Solution
• The best solution is to use the HTML5 <video> element + the <embed> element.
<!DOCTYPE html>
<html>
<title> :: Example of Video ::</title>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"
<source src="movie.ogg" type="video/ogg"
<source src="movie.webm" type="video/webm"
<object data="movie.mp4" width="320" height="240"></object>
<embed src="movie.swf" width="320" height="240"
</video>
</body>
</html>
EXAMPLE
Note : Save a file as movie with .mp4/ogg/webm/swf extension in the same folder as the html file

HTML YouTube Videos
75
Playing a YouTube Video in HTML
<!DOCTYPE html>
<html>
<title> :: Example of YouTube Videos ::</title>
<body>
<iframe width="420" height="345"
src="http://www.youtube.com/embed/6zElOFNkbiQ">
</iframe>
</body>
</html>
EXAMPLE YouTube iFrame

HTML YouTube Videos
76
Playing a YouTube Video in HTML
<!DOCTYPE html>
<html>
<title> :: Example of YouTube Videos ::</title>
<body>
<embed width="420" height="345"
src="http://www.youtube.com/v/6zElOFNkbiQ"
type = "application/x-shockwave-flash">
</embed>
</body>
</html>
EXAMPLE YouTube Embedded

HTML Forms
77
• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more.
• A form can also contain select lists, text area, field set, legend, and
label elements.
• The <form> tag is used to create an HTML form
<form>
.
input elements
.
</form>

HTML Forms - The Input Element
78
• The most important form element is the <input> element.
• The <input> element is used to select user information.
• An <input> element can vary in many ways, depending on the
type attribute.
• An <input> element can be of type text field, checkbox, password,
radio button, submit button, and more.
EXAMPLE FORM LAYOUT

79
HTML Code
<!DOCTYPE html>
<html>
<title>:: Input Form ::</title>
<body>
<form action="#" method ="post">
First Name: <input type="text" name="first" id="first"> </br>
Last Name: <input type="text" name="last" id="last"> </br>
Password: <input type="password" name="password" id="password"> </br>
<input type= "reset" value="Clear">
<input type ="submit" value="Send">
</form>
</body>
</html>

80
Form Layout Using Table
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td> First Name:</td>
<td> <input type="text" name="first" id="first"></td>
</tr>
<tr>
<td> Last Name: </td>
<td> <input type="text" name="last" id="last"></td>
</tr>
<tr>
<td> Password: </td>
<td> <input type="password" name="password" id="password"> </td>
</tr>

81
Form Layout Using Table
<tr>
<td> <input type= "reset" value="Clear"> </td>
<td> <input type ="submit" value="Send"> </td>
</tr>
</table>
</form>
</body>
</html> OUTPUT

82
Form Using Radio Buttons and Check Boxes

83
Form Using Radio Buttons and Check Boxes - Code Part 1
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td> First Name:</td>
<td> <input type="text" name="first" id="first"></td>
</tr>
<tr>
<td> Last Name: </td>
<td> <input type="text" name="last" id="last"></td>
</tr>
<tr>
<td> Password: </td>
<td> <input type="password" name="password" id="password">
</td>
</tr>

84
<tr>
<td> Gender: </td>
<td>
<input type="radio" value="male" name="gender"> Male
<input type="radio" value ="female" name="gender"> Female
</td>
</tr>
<tr>
<td valign="top"> Age Range: </td>
<td> <input type ="radio" value="0" name="age"> Under 18 </br>
<input type ="radio" value="1" name="age"> 19 - 39 </br>
<input type ="radio" value="2" name="age"> 40-59 </br>
<input type ="radio" value="3" name="age"> Over 60 </br>
</td>
</tr>
<tr>

85
<tr>
<td valign="top"> Places you like: </td>
<td>
<input type="checkbox" value="bangkok" name="places"> Bangkok </br>
<input type="checkbox" value="chiangmai" name="places"> Chiangmai
</br>
<input type="checkbox" value="phuket" name="places"> Phuket </br>
<input type="checkbox" value="pattaya" name="places"> Pattaya </br>
</td>
</tr>
<tr>
<td> <input type= "reset" value="Clear"> </td>
<td> <input type ="submit" value="Send"> </td>
</tr>
</table>
</form>
</body>
</html>

Web development using html 5

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Web development using html 5 (20)

More from Anjan Mahanta (20)

Recently uploaded (20)

Web development using html 5