Scribd
Upload
14 views85 pages

HTML Web Development Basics Guide

The document provides an introduction to HTML, explaining its purpose as a markup language for web pages and detailing the latest standard, HTML5. It covers basic concepts such as HTML structure, tags, and elements, as well as practical examples for creating web pages using text editors. Additionally, it includes exercises and examples for implementing various HTML features like headings, paragraphs, links, images, and tables.

Uploaded by

mhmoudyasser40
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views85 pages

HTML Web Development Basics Guide

The document provides an introduction to HTML, explaining its purpose as a markup language for web pages and detailing the latest standard, HTML5. It covers basic concepts such as HTML structure, tags, and elements, as well as practical examples for creating web pages using text editors. Additionally, it includes exercises and examples for implementing various HTML features like headings, paragraphs, links, images, and tables.

Uploaded by

mhmoudyasser40
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Web Development Using

HTML

Anjan Mahanta
LCCT - International Education Institute
anjan_mahanta@[Link] 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.

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


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


[Link]

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


4
Start Notepad
To start Notepad go to:

Start
All Programs
Accessories
Notepad

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


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

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


6
Lesson 1
Example 1.1
• Create a New File
• Save as, [Link]
• Write the following codes

• Save again
• Open the saved file, [Link] in any browser

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


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

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


8
Web Browsers
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:

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


9
HTML Page Structure

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


10
HTML Tags
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>

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


11
HTML 5 Declaration
<!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.

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


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

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


13
HTML 5 Headings
HTML headings are defined with the
<h1> to <h6> tags.
OUTPUT
Example
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


14
HTML Paragraphs
HTML paragraphs are defined with the
<p> tag OUTPUT
Example

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


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 = "[Link] Click here </a>
</body> OUTPUT

16
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Comment

• Comments can be inserted into the HTML code


to make it more readable and understandable.
<!DOCTYPE html> OUTPUT
<html>
<body>

<!--This comment will not be displayed-->


<p>This is a regular paragraph</p>

</body>
</html>
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>


OUTPUT
</body>
</html>

Copyright: LCCT International Education Institute :: Anjan Mahanta ::


18
HTML Images
HTML images are defined with the <img> tag.
Example:
<!DOCTYPE html>
<html>
<body>
<img src="[Link]" width="104" height="142">
</body>
</html>
OUTPUT Note:
The picture file should be saved
in the same folder
Copyright: LCCT International Education Institute :: Anjan Mahanta :: 19
Exercise 2
Output
LCCT
Lampang College of Commerce and Technology
[Link]

Welcome to LCCT !!

Copyright: LCCT International Education Institute :: Anjan Mahanta :: 20


HTML Lines

• The <hr>tag creates a horizontal line in an HTML page.


<!DOCTYPE html> OUTPUT
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>
Copyright: LCCT International Education Institute :: Anjan Mahanta :: 21
HTML Text Formatting
<!DOCTYPE html>
<html> OUTPUT
<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> 22
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Links
• The Target Attributes
<!DOCTYPE html>
<html>
<body>

<a href="[Link] 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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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>.

Copyright: LCCT International Education Institute :: Anjan Mahanta :: 25


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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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> OUTPUT
<h1> My Website</h1>
<p> Some text...</p>
</body>
</html>

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

29
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Table Header
<!DOCTYPE html>
<html>
<body>

<table border="1">
<tr>
<th>Header 1</th> OUTPUT
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

</body>
</html>
30
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Tables Without Borders
<!DOCTYPE html>
<html>
<body> OUTPUT
<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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Table Headers
• Example: <h4>Vertical headers:</h4>
<!DOCTYPE html> <table border="1">
<html> <tr>
<body> <th>First Name:</th> OUTPUT
<td>Bill Gates</td>
<h4>Table headers:</h4> </tr>
<table border="1"> <tr>
<tr> <th>Telephone:</th>
<th>Name</th> <td>555 77 854</td>
<th>Telephone</th> </tr>
<th>Telephone</th> <tr>
</tr> <th>Telephone:</th>
<tr> <td>555 77 855</td>
<td>Bill Gates</td> </tr>
<td>555 77 854</td> </table>
<td>555 77 855</td>
</tr> </body>
</table> </html>

32
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Table with Caption
• Example:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Monthly savings</caption> OUTPUT
<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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Table cells that span more than one
row or one column
• Example:
<h4>Cell that spans two rows:</h4>
<!DOCTYPE html> <table border="1">
<html> <tr>
<body> <th>First Name:</th>
<td>Bill Gates</td>
<h4>Cell that spans two columns:</h4> </tr>
<table border="1"> <tr>
<tr> <th rowspan="2">Telephone:</th>
<th>Name</th> <td>555 77 854</td> OUTPUT
<th colspan="2">Telephone</th> </tr>
</tr> <tr>
<tr> <td>555 77 855</td>
<td>Bill Gates</td> </tr>
<td>555 77 854</td> </table>
<td>555 77 855</td>
</tr> </body>
</table> </html>
34
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Tags inside a table
• Example: </tr>
<!DOCTYPE html> </table>
<html>
</td>
<body> OUTPUT
</tr>
<table border="1"> <tr>
<tr> <td>This cell contains a list
<td> <ul>
<p>This is a paragraph</p> <li>apples</li>
<p>This is another paragraph</p> <li>bananas</li>
</td> <li>pineapples</li>
<td>This cell contains a table:
</ul>
<table border="1">
<tr> </td>
<td>A</td> <td>HELLO</td>
<td>B</td> </tr>
</tr> </table>
<tr>
<td>C</td> </body>
<td>D</td> </html>

35
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Cell Padding
• Example:
<!DOCTYPE html> <h4>With cellpadding:</h4> OUTPUT
<html> <table border="1"
<body> cellpadding="10">
<tr>
<h4>Without cellpadding:</h4> <td>First</td>
<table border="1"> <td>Row</td>
<tr> </tr>
<td>First</td> <tr>
<td>Row</td> <td>Second</td>
</tr> <td>Row</td>
<tr> </tr>
<td>Second</td> </table>
<td>Row</td>
</tr> </body>
</table> </html>

36
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Cell Spacing
• Example: <tr>
<td>First</td>
OUTPUT
<td>Row</td>
<!DOCTYPE html>
</tr>
<html>
<tr>
<body>
<td>Second</td>
<td>Row</td>
<h4>Without cellspacing:</h4>
</tr>
<table border="1">
</table>
<tr>
<h4>With cellspacing="10":</h4>
<td>First</td>
<table border="1" cellspacing="10">
<td>Row</td>
<tr>
</tr>
<td>First</td>
<tr>
<td>Row</td>
<td>Second</td>
</tr>
<td>Row</td>
<tr>
</tr>
<td>Second</td>
</table>
<td>Row</td>
</tr>
<h4>With cellspacing="0":</h4>
</table>
<table border="1" cellspacing="0">
</body>
</html>

37
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML LISTS
• The most common HTML lists are ordered and unordered lists:

38
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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.
EXAMPLE OUTPUT

39
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Ordered List
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>

40
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Ordered List
EXAMPLE: Letters List OUTPUT

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

41
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Ordered List
EXAMPLE: Lower Case List OUTPUT

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

42
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Ordered List
EXAMPLE: Roman Number List OUTPUT

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

43
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Ordered List
EXAMPLE: Lowercase Roman Number List OUTPUT

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

44
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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.
EXAMPLE OUTPUT

45
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Unordered List
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>

46
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Unordered List
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


47
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Nested List - 1
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>
48
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
Nested List - 2
<!DOCTYPE html>
<HTML> OUTPUT
<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>
49
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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):
EXAMPLE OUTPUT

50
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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.
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>
51
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
The HTML <div> Element
EXAMPLE
<!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> OUTPUT

52
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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.
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

53
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Layouts
• Example

55
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Layouts
• Code :: Part I ::
<!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>

56
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Layouts
• Code :: Part II ::

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

57
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Iframes
• An iframe is used to display a web page within a web page.
EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of iframe :: </title>
<body>
<h4> iframe</h4>
<iframe src="[Link] width="500" height="300"></iframe>
</body>
</html>

OUTPUT

58
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Iframes
• Using iframe as a target for a link
EXAMPLE
<!DOCTYPE html>
<html>
<body>

<iframe src="[Link] name="iframe_a" width="300"


height="200" frameborder="0"></iframe>

<p><a href="[Link] target="iframe_a">LCCT</a></p>


<p><a href="[Link] target="iframe_a">LIT</a></p>

</body>
</html>

OUTPUT

59
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
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
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Color Name
• 140 color names are defined in the HTML

61
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Entities
• Reserved characters in HTML must be replaced with character entities.
EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Entities :: </title>
<body>

<h4> Entities</h4>
<p> a&#768;</p>
<p> &copy</p>
OUTPUT
</body>
</html>

62
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Entities
Useful HTML Character Entities

63
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Entities
Useful HTML Character Entities

64
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Multimedia
• 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.

65
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Plug-ins
• 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.

66
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
The <object> Element
• 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.
EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Plug-Ins ::</title>
<body>
<object width="500" height="300" data="[Link]"> </object>
</body>
</html>

Note : Save a file as cherry with .swf extension in the same folder as the html file
67
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
The <embed> Element
• 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.
EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Plug-Ins ::</title>
<body>
<embed width="400" height="400" src="[Link]">
</body>
</html>

Note : Save a file as cherry with .swf extension in the same folder as the html file
68
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Sounds/Audio
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

EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Audio ::</title>
<body>
<embed width="300" height="100" src="song.mp3">
</body>
</html>
Note : Save a file as song with .mp3 extension in the same folder as the html file
69
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Sounds/Audio
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

EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Audio ::</title>
<body>
<object height="50" width="100" data="song.mp3"></object>
</body>
</html>
Note : Save a file as song with .mp3 extension in the same folder as the html file
70
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Sounds/Audio
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).
EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Audio ::</title>
<body>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser doesn't support this audio format
</audio>
</body>
</html>
Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file
71
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Sounds/Audio
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.

EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Audio ::</title>
<body>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
<embed height="50" width="100" src="song.mp3">
</audio>
</body>
</html>

Note : Save a file as song with .mp3 / .ogg extension in the same folder as the html file
72
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Sounds/Audio
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.

EXAMPLE

<!DOCTYPE html>
<html>
<title> :: Example of Audio :: </title>
<body>
<a href="song.mp3"> play the song</a>
</body>
</html>

Note : Save a file as song with .mp3 extension in the same folder as the html file

73
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Videos
HTML Video - The Best Solution
• The best solution is to use the HTML5 <video> element + the <embed> element.

EXAMPLE
<!DOCTYPE html>
<html>
<title> :: Example of Video ::</title>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"
<source src="[Link]" type="video/ogg"
<source src="[Link]" type="video/webm"
<object data="movie.mp4" width="320" height="240"></object>
<embed src="[Link]" width="320" height="240"
</video>
</body>
</html>

Note : Save a file as movie with .mp4/ogg/webm/swf extension in the same folder as the html file
74
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML YouTube Videos
Playing a YouTube Video in HTML

EXAMPLE YouTube iFrame

<!DOCTYPE html>
<html>
<title> :: Example of YouTube Videos ::</title>
<body>
<iframe width="420" height="345"
src="[Link]
</iframe>
</body>
</html>

75
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML YouTube Videos
Playing a YouTube Video in HTML

EXAMPLE YouTube Embedded

<!DOCTYPE html>
<html>
<title> :: Example of YouTube Videos ::</title>
<body>
<embed width="420" height="345"
src="[Link]
type = "application/x-shockwave-flash">
</embed>
</body>
</html>

76
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms
• 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>

77
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
• 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

78
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
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>

79
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
Form Layout Using Table
<!DOCTYPE html>
<html>
<title>:: Input Form ::</title>
<body>
<form action="#" method ="post">
<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> 80
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
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

81
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
Form Using Radio Buttons and Check Boxes

82
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
Form Using Radio Buttons and Check Boxes - Code Part 1
<!DOCTYPE html>
<html>
<title>:: Input Form ::</title>
<body>
<form action="#" method ="post">
<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>
83
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
Form Using Radio Buttons and Check Boxes - Code Part 2

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

84
Copyright: LCCT International Education Institute :: Anjan Mahanta ::
HTML Forms - The Input Element
Form Using Radio Buttons and Check Boxes - Code Part 3
<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> 85
Copyright: LCCT International Education Institute :: Anjan Mahanta ::

You might also like