Scribd
Upload
6 views86 pages

Web System Chapter v2.0

This document provides an overview of HTML, including its definition, structure, and essential tags used for creating web pages. It covers topics such as the <!DOCTYPE> declaration, the <head> and <body> sections, as well as various HTML elements like hyperlinks, images, and formatting tags. Additionally, it distinguishes between HTML and XHTML and explains the importance of attributes within tags.

Uploaded by

bgebre07
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
6 views86 pages

Web System Chapter v2.0

This document provides an overview of HTML, including its definition, structure, and essential tags used for creating web pages. It covers topics such as the <!DOCTYPE> declaration, the <head> and <body> sections, as well as various HTML elements like hyperlinks, images, and formatting tags. Additionally, it distinguishes between HTML and XHTML and explains the importance of attributes within tags.

Uploaded by

bgebre07
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
You are on page 1/ 86

Web Systems and

Services

CHAPTER TWO
HTML

BITS College
Addis Ababa, Ethiopia, 2025

Lecturer Name:

4/4/2025 1
Objectives

Define HTML
Know Basic Tags: Hyperlinks, Images, Formatting
Understand Headings and Paragraphs
Know the <!DOCTYPE> Declaration
Know the <head> Section: Title, Meta, Script, Style
Understand the <body> Section
Know the Lists: <ol>, <ul> and <dl>
Know the <div> and <span> elements
Understand how HTML Tables and HTML Forms are designed

2
3
4
5
6
What is web page?
• A Web page is a document for the World Wide Web that is identified
by URL.

• A Web page can be accessed and displayed on a monitor or mobile


device through a Web browser .

• The data found in a Web page is usually in HTML or XHTML format.

• The Web pages usually also contain other resources such as style
sheets, scripts and images for presentation.
7
What is HTML?
• It is short form of "HyperText Markup Language".
• It is a language for describing web-pages using ordinary text.
• HTML is not a complex programming language.
HTML Files
• Every web page is actually a HTML file.
• HTML file is just a plain-text file, with .html file extension instead
of .txt, and
• A web site will often contain many html files that link to each
other.

8
HTML vs. XHTML

• Extensible Hypertext Markup Language (XHTML) :


• It can be considered as a part of the HTML markup language this is because
of XHTML have features of HTML.
• XHTML is extended from and HTML.
• XHTML can be considered as a better version of HTML.
• HTML :
• It is the most widely used language over the internet.
• HTML is used to create web pages and link them from one to another.
• HTML is not a programming language, it is a markup language.
• We use different other technologies as like CSS and javascript to give a new
look to the pages developed by HTML.
9
HTML Tags
• HTML tags are the hidden keywords within a web page that define
how your web browser must format and display the content
• Most tags must have two parts,
an opening tag
a closing part tag
• There are some tags that are an exception to this rule, and where a
closing tag is not required. Eg <img>

10
Creating HTML Pages
• An HTML file must have .html file extension
• HTML files can be created using text editors:
• NotePad,
• NotePad ++,
• Sublime
• Comodo
• Visual Studio etc..

11
HTML Structure
• HTML is included of “elements” and “tags”
• Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
• Tags have attributes:
• Eg , colore , size , height etc….
• HTML describes structure using two main sections:
<head>
<body>

12
HTML Structure
A graphical overview of the HTML markup syntax shown is presented here:

13
HTML Code Formatting
• The HTML source code should be formatted to increase
readability and facilitate debugging.

• Every block element should start on a new line.

• Every nested (block) element should be indented.

• For performance reasons, formatting can be sacrificed

14
First HTML Page
test.html
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p> Well came to my first HTML page</p>
</body>
</html>

15
The <!DOCTYPE> Declaration
• All HTML documents must start with a <!DOCTYPE> declaration.
• The declaration is not an HTML tag. It is an "information" to the browser about what document type to
expect.
• It informs the web browser about the type and version of HTML
HTML 4.01, XHTML 1.0 XHTML 1.1, HTML 5
• It helps the browser to handle and load it properly.
The declaration is not case sensitive: <!DOCTYPE html>, <!DocType html>, <!Doctype html>, <!doctype html>

• Example: • In HTML 5, the declaration is simple:


<!DOCTYPE html>
• In older documents (HTML 4 or XHTML), the HTML 4.01:
declaration is more complicated because the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
declaration must refer to a DTD (Document Type
Definition).
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
16
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Some Simple Tags
• Hyperlink Tags
<a href="https://www.youtube.com/"
>Link to youtube </a>
• Image Tags
<img src="logo.gif" alt="logo" />

• Text formatting tags


This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more emphasized.</strong>

17
Some Simple Tags – Example
some-tags.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Tags example</title>
</head>
<body>
<a href="https://www.youtube.com/" title= “youtube site">This
is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
18
Tags Attributes
• Tags can have attributes
• Attributes specify properties and behavior
• Example:
Attribute alt with value "logo"
<img src="logo.gif" alt="logo"/>

• Few attributes can apply to every element:


• id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the element
is hovered with the mouse
19
Tags Attributes
</style>
Difference between Id and class </head>
<!DOCTYPE html> <body>
<html> <h2>Difference Between Class and ID</h2>
<head> <p>A class name can be used by multiple HTML elements, while an id name
<style> must only be used by one HTML element within the page:</p>
/* Style the element with the id "myHeader" */
<!-- An element with a unique id -->
#myHeader {
<h1 id="myHeader">My Cities</h1>
background-color: lightblue;
color: black; <!-- Multiple elements with same class -->
padding: 40px; <h2 class="city">London</h2>
text-align: center; <p>London is the capital of England.</p>
}
/* Style all elements with the class name "city" */ <h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
.city {
background-color: tomato; <h2 class="city">Tokyo</h2>
color: white; <p>Tokyo is the capital of Japan.</p>
padding: 10px;
} </body>
</html>

20
Headings and Paragraphs

• Heading Tags (h1 – h6)


<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

• Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
• Sections: div and span
<div style="background: skyblue;">
This is a div</div>
21
Headings and Paragraphs – Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:pink">
This is a div</div>
</body>
</html>

22
Headings and Paragraphs

<!DOCTYPE html>
<div> <html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>

23
Headings and Paragraphs

<div> output

24
The <head> Section
• Contains information that show directly on the
page
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• Can contain some other tags, e.g.
<meta>
<script>
<link>
<style>
<!–- comments -->
25
Header

<!DOCTYPE html>
HTML header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

26
<head> Section: <title> tag
• Title should be placed between <head> and </head> tags
<head>
<title>here is the title section
</title>
</head>
• Used to specify a title in the window title bar
• Search engines and people rely on titles

27
<head> Section: <meta>
• Meta tags additionally describe the content contained within the page
• <meta> tags are typically used to specify character set, page description, author of
the document.
• Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

28
<head> Section: <script>
• The <script> element is used to embed scripts into an HTML
document
• Script are executed in the client's Web browser
• Scripts can live in the <head> and in the <body> sections
• Supported :
• JavaScript (it is not Java!)

29
The <script> Tag – Example
The <script> tag is used to embed a client-side script (JavaScript).
<!DOCTYPE html> scripts-example.html
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!</p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html> 30
<head> Section: <style>
The <style> element embeds formatting information (CSS
styles) into an HTML page
<!DOCTYPE html>
<html> style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html> 31
<body> Section
The <body> section describes the viewable portion of the
page
Starts after the <head> </head> section
Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>

32
Comments: <!-- --> Tag
Comments can exist anywhere between the
<html></html> tags
Comments start with <!-- and end with -->

<!–- Telerik Logo (a JPG file) -->


<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...
33
Text Formatting
Text formatting tags modify the text between the opening
tag and the closing tag
• Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
34
Hyperlinks: <a> Tag

Link to a document called form.html on the same server in


the same directory:
<a href="form.html">Fill Our Form</a>

Link to a document called parent.html on the same server


in the parent directory:
<a href="../parent.html">Parent</a>
Link to a document called cat.html on the same server in
the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
35
Hyperlinks: <a> Tag (2)
<a href="http://www.devbg.org" target="_blank">BASD</a>

Link to an external Web site:


Always use a full URL, including "http://", not just
"www.somesite.com"
Link to an e-mail address:
<a href="mailto:[email protected]">
Please report bugs here (by e-mail only)</a>

36
Hyperlinks: <a> Tag (3)
Link to a document called apply-now.html
On the same server, in same directory
Using an image as a link button:

<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>

37
Hyperlinks and Sections
Link to another location in the same document:
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>

Link to a specific location in another document:


<a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a>
<!–- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>

38
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a> <br
/>
<a href="mailto:[email protected]?subject=Bug Report">Please
report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English version</a>
<br />

39
Links to the Same Document – Example

links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
40
Images: <img> tag
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">

 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
 Example:
<img src="./php.png" alt="PHP Logo" />

41
Miscellaneous Tags
<hr/>: Draws a horizontal rule (line):
<hr size="5" width="70%" />

<center></center>:
<center>Hello World!</center>

<font></font>:
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>

42
Miscellaneous Tags – Example
misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
</body>
</html>

43
Superscript and Subscript

<sup>
The <sup> element is used <p>On the 4<sup>th</sup> of September you will learn
to contain characters that about E=MC<sup>2</sup>.</p>
<p>The amount of CO<sub>2</sub> in the atmosphere grew by 2ppm in
should be superscript such
2009<sub>1</sub>.</p>
as the suffixes of dates or
mathematical concepts like
raising a number to a power such as 22.
<sub>
The <sub> element is used to
contain characters that should
be subscript. It is commonly
used with foot notes or chemical formulas
such as H20.

44
Ordered Lists: <ol> Tag
Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit a. Apple iii. Grapefruit
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefru
45
it
Unordered Lists: <ul> Tag
Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
Attribute values for type are:
disc, circle or square

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear
46
Definition lists: <dl> tag
Create definition lists using <dl>
Pairs of text and associated definition; text is in <dt> tag,
definition in <dd> tag

<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>

Renders without bullets


Definition is indented
47
Lists – Example
lists.html
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
48
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
49
Using <DIV> and <SPAN> Block and
Inline Elements
Block elements add a line break before and after them
<div> is a block element
Other block elements are <table>, <hr>, headings, lists, <p>
and etc.

Inline elements don’t break the text before and after them
<span> is an inline element
Most HTML elements are inline, e.g. <a>
50
The <div> Tag
<div> creates logical divisions within a page
Block style element
Used with CSS
Example:

div-and-span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
51
The <span> Tag
Inline style element
Useful for modifying a specific portion of text
Don't create a separate area
(paragraph) in the document
Very useful with CSS

span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>

52
HTML Tables
HTML Tables
Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns
Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
Tables should not be used for layout. Use CSS floats and
positioning styles instead 54
HTML Tables (2)

Start and end of a table


<table> ... </table>

Start and end of a row


<tr> ... </tr>

Start and end of a cell in a row

<td> ... </td>

55
Simple HTML Tables – Example (2)

<table cellspacing="0" cellpadding="5">


<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table> 56
Complete HTML Tables
Table rows split into three semantic sections: header,
body and footer
 <thead> denotes table header and contains <th>
elements, instead of <td> elements
 <tbody> denotes collection of table rows that
contain the very data
 <tfoot> denotes table footer but comes BEFORE the
<tbody> tag
 <colgroup> and <col> define columns (most often
used to set column widths)

57
Complete HTML Table: Example
<table> columns
<colgroup>
<col style="width:100px" /><col />
</colgroup> header
<thead> th
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead> footer
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot> Last comes the body (data)
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
58
Cell Spacing and Padding
• Tables have two important attributes:

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the empty space  Defines the empty space around


between cells the cell content
59
Cell Spacing and Padding – Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

60
Column and Row Span
• Table cells have two important attributes:
 Colspan  rowspan
colspan="1" colspan="1"
rowspan="2" rowspan="1"

cell[1,1] cell[1,2] cell[1,2]


cell[1,1]
cell[2,1] cell[2,1]

colspan="2" rowspan="1"
 Defines how  Defines how
many columns many rows the
the cell occupies cell occupies 61
Column and Row Span – Example

table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
Cell[1,1] Cell[2,1]
Cell[1,2] Cell[3,2]
Cell[2,2]
Cell[1,3] Cell[2,3]
62
HTML Forms
• Forms are the primary method for gathering data from site
visitors
• Create a form block with
<form></form>
The “method" attribute tells how the form data

• Example: should be sent – via GET or POST request

<form name="myForm" method="post"


action="path/to/some-script.php">
...
</form>
The "action" attribute tells where the form
data should be sent 63
HTML Forms
• There are several types of form controls that you can use to collect
information from visitors to your site.
• ADDING TEXT:
• Text input (single-line):Used for a single line of text such as email addresses and names.

• Password input: Like a single line text box but it masks the characters entered.

• Text area (multi-line): For longer areas of text, such as messages and comments

64
HTML Forms
• With the get method, the values from the form are added to the end of
the URL specified in the action attribute. The get method is ideal for:
• short forms (such as search boxes)
• when you are just retrieving data from the web server (not sending
information that should be added to or deleted from a database)
• With the post method the values are sent in what are known as HTTP
headers. As a rule of thumb you should use the post method if your
form:
• allows users to upload a file
• is very long
• contains sensitive data (e.g. passwords)
• adds information to, or deletes information from, a Database

65
HTML Forms
• <input>
• The <input> element is used to create several different form controls.
The value of the type attribute determines what kind of input they will
be creating
• type="text"
• When the type attribute has a value of text, it creates a singleline text
input.
• name
• When users enter information into a form, the server needs to know which form
control each piece of data was entered into. (For example, in a login form, the server
needs to know what has been entered as the username and what has been given as
the password). Therefore, each form control requires a name attribute. The value of
this attribute identifies the form control and is sent along with the information they
enter to the server.
66
Form Fields
• Single-line text input fields:
<input type="text" name="FirstName"
value="This is a text field" />

• Multi-line textarea fields:


<textarea name="Comments">This is a
multi-line text field</textarea>

• Hidden fields contain data not shown to the user:


<input type="hidden" name="Account"
value="This is a hidden text field" />

• Often used by JavaScript code


67
Form Input Controls
• Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />

• Radio buttons:
<input type="radio" name="title" value="Mr." />

• Radio buttons can be grouped, allowing only one to be


selected from a group:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />

68
Other Form Controls
• Dropdown menus:
<select name=“department">
<option value="Value 1"
selected="selected">cs</option>
<option value="Value 2">IS</option>
<option value="Value 3">IT</option>
</select>
• Submit button:

<input type="submit" name="submitBtn"


value="Apply Now" />

69
Other Form Controls (2)
• Reset button – brings the form to its initial state
<input type="reset" name="resetBtn"
value="Reset the form" />
• Image button – acts like submit but image is displayed and
click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />

• Ordinary button – used for Javascript, no default action

<input type="button" value="click me" />

70
Other Form Controls (3)
• Password input – a text field which masks the entered text with *
signs
<input type="password" name="pass" />

• Multiple select field – displays the list of items in multiple lines,


instead of one
<select name="products" multiple="multiple">
<option value="Value 1“ selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>s

71
Other Form Controls (4)
• File input – a field used for uploading files
<input type="file" name="photo" />
• Form labels are used to associate an explanatory text to a
form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

• Fieldsets are used to enclose a group of related form fields:


• The <legend> is the fieldset's title

72
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset style="width:150px"><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br /> <br>
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
73
form.html (continued)

<fieldset style="width:150px"><legend>Personal Details</legend>


<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br>
<br>
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
<br />
<br>
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br /> <br>
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>

74
Cont..

75
Cont..

76
How Forms Work

• A user fills in a form and then presses a button to submit the


information to the server
• The name of each form control is sent to the server along with the
value the user enters or selects.

77
What is Multimedia?

• Multimedia comes in many different formats. It can be


almost anything you can hear or see, like images, music,
sound, videos, records, films, animations, and more.

78
The HTML <video> Element
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

79
The HTML <audio> Element

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

80
HTML <audio> Autoplay

<audio controls autoplay>


<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

81
HTML Plug-ins
• Plug-ins are computer programs that extend the standard
functionality of the browser.

• plug-ins were designed to be used for many different purposes:


• To run Java applets
• To run Microsoft ActiveX controls
• To display Flash movies
• To display maps
• To scan for viruses
• To verify a bank id

82
HTML Plug-ins

• The <object> element defines an embedded object within


an HTML document.
<object width="100%" height="500px" data="snippet.html"
></object>
• The <embed> element can also be used to include HTML in
HTML:
<embed width="100%" height="500px" src="snippet.html">

83
HTML Plug-ins
• Embedding a video
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<object width="500" height="300"
data="https://www.youtube.com/embed/A_YbrEKA4wI"></object>
</body>
</html>

84
HTML Plug-ins
• Embedding a gif image
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<body>
<object width="500" height="300" data="https://i0.wp.com/www.printmag.com/wp-
content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?fit=476%2C
280&ssl=1"></object>
</body>
</html>

85
Thank You !!!

4/4/2025 86

You might also like