HTML

HTML
1
What is HTML?
HTML stands for Hyper Text Markup Language

HTML is the standard markup language for
creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display
the content
HTML elements label pieces of content such as
"this is a heading", "this is a paragraph", "this is
a link", etc.
2
MARKUP LANGUAGE
Markup language is a set of markup tags.
HTML uses markup tags to describe web
pages.
Markup language is a text-formatting
language designed to transform raw text into
structured documents,
by inserting procedural and descriptive
markup into the raw text.
Markup languages are used to define elements
within a document.
3
4
Simple HTML code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
5
<!DOCTYPE html>
The HTML document type declaration, also
known as DOCTYPE, is the first line of code
required in every HTML . The DOCTYPE
declaration is an instruction to the web browser
about what version of HTML the page is written
in. This ensures that the web page is parsed the
same way by different web browsers.
6
Example Explained
The <!DOCTYPE html> declaration defines that this document

is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the
HTML page
The <title> element specifies a title for the HTML page (which
is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a
container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
7
Types of tag
There are two types of tags:
1.Paired Tags
2.Unpaired Tags
1.A paired tag consist of two tags, first one is called an opening tag and the second one is called a
closing tag. These tags contains the text in between at which the effect of that tag will be applied.
Example: <b>ABC</b>
 Here <b> is the opening tag, </b> is the closing tag and ABC the text in between which will
result as ABC on the browser screen.
Examples:
<i> </i>
<ul> </ul>
<h1> </h1> , etc.
2.An Unpaired tag is a single tag which does not need a companion tag.
These tags can be written like < > or < /> both works as same, it’s your choice which style you
choose.
Example:
<br> or <br />
<hr> or <hr />
8
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading:
<h1>This is heading 1</h1>
9
10
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
11
LINE BREAK <br>
Empty HTML Elements
HTML elements with no content are called empty

elements.
The <br> tag defines a line break, and is an empty

element without a closing tag:
12
Horizontal Rule, <HR>
 The <HR> element causes the browser to display a

horizontal line (rule) in your document.
 <HR> does not use a closing tag.
13
<PRE>TAG
14
How to add comment In HTML
<! -- Write commented text here -->
 Comments are some text or code written in your code to give an

explanation about the code, and not visible to the user. Comments
which are used for HTML file are known as HTML comments.
Anything written between these tags will be ignored by the
browser, so comments will not be visible on the webpage.
15
HTML Formatting Elements
Formatting elements were designed to display special types of

text:
<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
16
The HTML <i> element defines a part of text in an
alternate voice or mood. The content inside is typically
displayed in italic.
<i>This text is italic</i>
The HTML <strong> element defines text with strong
importance. The content inside is typically displayed in
bold.
<strong>This text is important!</strong>
The HTML <em> element defines emphasized text. The

content inside is typically displayed in italic.
<em>This text is emphasized</em>
17
 The HTML <sub> element defines subscript text.
Subscript text appears half a character below the normal line,
and is sometimes rendered in a smaller font. Subscript text can be
used for chemical formulas, like H2O:
 Example
<p>This is <sub>subscripted</sub> text.</p>
The HTML <sup> element defines superscript text.
Superscript text appears half a character above the normal line,
and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes, like WWW[1]:
Example
<p>This is <sup>superscripted</sup> text.</p>
18
mark
The HTML <mark> element defines text that
should be marked or highlighted:
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark>
today.</p>
</body>
</html>
Do not forget to buy milk today.
19
The <small> tag defines smaller text (like
copyright and other side-comments).
<!DOCTYPE html>
<html>
<body>
<h1>The small element</h1>
<p>This is some normal text.</p>
<p><small>This is some smaller
text.</small></p>
</body>
</html>
20
delete
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> </p>
</body>
</html>
In output blue is strike marked
21
insert
 HTML <ins> Element
 The HTML <ins> element defines a text that has been inserted into a
document.
 Browsers will usually underline inserted text:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<!DOCTYPE html>
<html>
<body>
<p> My favorite color is <del> blue </del> <ins> red </ins> </p>
</body>
</html>
22
The <sub> tag defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript
text can be used for chemical formulas , like H2O.
<!DOCTYPE html>
<html>
<body>
<h1>The sub and sup elements</h1>
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
</body>
</html>
23
HTML Attributes
 All HTML elements can have attributes

 Attributes provide additional information about
elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like:
name="value"
24
image tag
25
HTML ANCHOR TAG
26
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of
the alt attribute describe the image in words. The alt attribute is considered good for
SEO(search engine optimazation) prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height
attribute.
27
Anchor tag to link one image
BY USING ANCHOR TAG WE CAN LINK ONE IMAGE FILE TO HTML FILE
28
ANCHOR TAG
BY USING ANCHOR TAG WE CAN LINK ONE HTML TO ANOTHER HTML FILE
29
ANCHOR TAG TO LINK WEBSITE
BY USING ANCHOR TAG WE CAN LINK ONE WEBSITE FILE TO HTML FILE
30
CHANGING BACKGROUND COLOR IN
HTML
31
1.Background Color
32
33
34
CSS EFFECT
35
The style Attribute
 The HTML Style Attribute

 Setting the style of an HTML element, can be done with the style
attribute.
 The HTML style attribute has the following syntax:

<tagname style="property:value;">
 The style attribute is used to add styles to an element, such as color,

font, size, and more.
 Example-:
 <p style="color:red;">This is a red
paragraph.</p>
36
Text Color
 The CSS color property defines the text color for an HTML element:
Example
 <h1 style="color:blue;">This is a heading</h1>
 <p style="color:red;">This is a paragraph.</p>
37
Color Codes
 Colors are set using “RGB” color codes, which are,
represented as hexadecimal values. Each 2-digit section
of the code represents the amount, in sequence, of red,
green or blue that forms the color. For example, a RGB
value with 00 as the first two digits has no red in the
color.
38
RGB Colour Model
39
Main Colours
40
TEXT Color
The TEXT attribute is used to control the color of all the normal text in the document.
The default color for text is black. The TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red.
41
Without color codes
42
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
15. ORANGE 15. #FF7F00
43
Internal Links
 Internal Links : Links can also be created inside large
documents to simplify navigation. Today’s world wants to be
able to get the information quickly. Internal links can help
you meet these goals.
1. Select some text at a place in the document that you would
like to create a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location
in the document that we link to shortly. All NAME attributes
in a document must be unique.
2. Next select the text that you would like to create as a link to
the location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
44
LINK, VLINK, and ALINK
These attributes control the colors of the different link states:

1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000” LINK=“#0000FF”

VLINK=“#FF00FF” ALINK=“FFFF00”> </BODY>
45
EXAMPLE
46
Fonts
 The CSS font-family property defines the font to be

used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
47
Text Size
 TheCSS font-size property defines the text size for an

HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Example-:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
48
Text Alignment
The CSS text-align property defines the horizontal text

alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
49
EXAMPLE
50
division <div> tag
 <div> tag defines a division or a section in an html document.
 The <div> element is often used as a container for other html elements.
 By default browsers always place a line break before and after the <div> element.
However this can be changed with CSS.
<span> tag
 <span> is a inline tag ,this gives us the text format

 Whenever you use this tag,your text remains in the same line instead of
going to the second line.The formatting that remains between this tag
just applies to it.
Example
<html>
<head></head>
<body>
<p>hello students
<span style=“background-color:yellow ; border:1px solid gray;”>Bibhudatta
Tripathy</span>i am in MITS
</p>
</body>
LIST
 HTML Lists are used to specify lists of information.
 All lists may contain one or more list elements.
 There are three different types of HTML lists:
1.Unordered List or Bulleted List (ul)

2.Ordered List or Numbered List (ol)
3.Description List or Definition List (dl)
53
54
bydefault
55
56
Type=“none”
57
NESTED UNORDERDHTML LISTS
58
59
60
Bydefault
61
EXAMPLE
62
EXAMPLE
63
HTML Description Lists
.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list,

the <dt> tag defines the term (name), and
the <dd> tag describes each term:
64
TABLE
65
Tables
In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
66
67
Example1
68
HTML Table with Border
There are two ways to specify border for HTML tables.
1) By border attribute of table in HTML

2) By border property in CSS
69
Example 1 HTML Border attribute
70
Example 2 CSS Border property
71
TABLE WITH CAPTION
<html>
<head><title>table</title>
</head>
<body>
<table border="1">
<caption>marks</caption>
<tr><th>name</th><th>subject1</th><th>subject2</th></
tr>
<tr><td>bibhu</td><td>50</td><td>60</td></tr>
<tr><td>litu</td><td>70</td><td>65</td></tr>
</table>
</body>
</html>
72
Table Attributes
 CellSpacing: Cell spacing is the space between
each cell.
 CellPadding: Cell Padding is the space between
the cell border and the cell contents and is specified in
pixels.
73
HTML Table with cell padding
You can specify padding for table header and table

data by two ways:
1)By cellpadding attribute of table in HTML

2)By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It

is recommended to use CSS. So let's see the code of CSS.
74
Cell padding property in css
75
Table Data and Table Header Attributes
 Colspan: Specifies how many cell columns of the table this cell
should span.
 Rowspan: Specifies how many cell rows of the table this cell
should span.
 Align: cell data can have left, right, or center alignment.
 Valign: cell data can have top, middle, or bottom alignment.
 Width: you can specify the width as an absolute number of pixels
or a percentage of the document width.
 Height: You can specify the height as an absolute number of pixels
or a percentage of the document height.
76
HTML Table with colspan
If you want to make a cell span more than one column, you can use the colspan attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute.
77
HTML Table with rowspan
If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.
78
EXAMPLE
<html>
</head>
<body>
<table border="1">
<tr>
<th rowspan=2>name</th>
<th colspan=2>marks</th>
</tr>
<tr><th>subject1</th><th>subject2</th></tr>
</table>
</body>
</html>
79
EXAMPLE
<html>
</head>
<body>
<table border="1">
<tr>
<th colspan=2>marks</th>
<th rowspan=2>name</th>
</tr>
<tr><th>subject1</th><th>subject2</th></tr>
</table>
</body>
</html>
80
Special Things to Note
 TH, TD and TR should always have end tags.

Although the end tags are formally optional, many browsers will mess
up the formatting of the table if you omit the end tags. In particular,
you should always use end tags if you have a TABLE within a TABLE
-- in this situation, the table parser gets hopelessly confused if you don't
close your TH, TD and TR elements.
 A default TABLE has no borders
By default, tables are drawn without border lines. You need the
BORDER attribute to draw the lines.
 By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered
tables, You can either: place the table inside a DIV element with
attribute ALIGN="center".
Most current browsers also supports table alignment, using the ALIGN
attribute. Allowed values are "left", "right", or "center", for example:
<TABLE ALIGN="left">. The values "left" and "right" float the table
to the left or right of the page, with text flow allowed around the table.
This is entirely equivalent to IMG alignment
81
EXAMPLE
82
83
Example
84
85
Frames
86
What is frames
 HTML frames are used to divide your browser window into
multiple sections where each section can load a separate HTML
document. A collection of frames in the browser window is known
as a frameset. The window is divided into frames in a similar way
the tables are organized: into rows and columns.
Disadvantages of Frames
 There are few drawbacks with using frames, so it's never
recommended to use frames in your webpages −
 Some smaller devices cannot cope with frames often because their
screen is not big enough to be divided up.
 Sometimes your page will be displayed differently on different
computers due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.
87
Creating Frames
 To use frames on a page we use <frameset> tag instead of
<body> tag. The <frameset> tag defines, how to divide the
window into frames. The rows attribute of <frameset> tag
defines horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it defines
which HTML document shall open into the frame.
 Note − The <frame> tag deprecated in HTML5. Do not use
this element.
88
Frames
Doc1.html Doc2.html
Doc1.html Doc2.html
Frames.html
89
Example
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
90
91
Example 2 Create Horizontal frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">
</frameset>
</html>
92
Frame Page Architecture
<FRAME>: This element defines a single frame within a frameset. There will be a
FRAME element for each division created by the FRAMESET element. This tag has
the following attributes:
 SRC: Required, as it provides the URL for the page that will be displayed in the
frame.
 NAME: Required for frames that will allow targeting by other HTML documents.
Works in conjunction with the target attribute of the <A>, <AREA>, <BASE>, and
<FORM> tags.
 A <FRAMESET> element is placed in the html document before the <BODY>
element. The <FRAMESET> describes the amount of screen real estate given to each
windowpane by dividing the screen into ROWS or COLS.
 The <FRAMESET> will then contain <FRAME> elements, one per division of the
browser window.
 Note: Because there is no BODY container, FRAMESET pages can't have
background images and background colors associated with them.
93
Compound FRAMESET Divisions Example
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>
94
<FRAMESET> Container
<FRAMESET> : The FRAMESET element creates
divisions in the browser window in a single direction.
This allows you to define divisions as either rows or
columns.
 ROWS : Determines the size and number of rectangular
rows within a <FRAMESET>. They are set from top of
the display area to the bottom.
Possible values are:
 Absolute pixel units, I.e. “360,120”.
 A percentage of screen height, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “360,*”.
95
Creating a Frames Page
 FRAMEBORDER : Possible values 0, 1, YES, NO. A
setting of zero will create a borderless frame.
 FRAMESPACING: This attribute is specified in pixels.
If you go to borderless frames you will need to set this
value to zero as well, or you will have a gap between
your frames where the border used to be.
 BORDER(thickness of the Frame): This attribute
specified in pixels. A setting of zero will create a
borderless frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you choose
a color for your border. This attribute is rarely used.
96
<FRAME>
 MARGINWIDTH: Optional attribute stated in pixels.

Determines horizontal space between the <FRAME> contents
and the frame’s borders.
 MARGINHEIGHT: Optional attribute stated in pixels.
Determines vertical space between the <FRAME> contents and
the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame. Possible
values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
97
<NOFRAMES>
<NOFRAMES>: Frame – capable browsers ignore all HTML within this tag including
the contents of the BODY element. This element does not have any attributes.
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
</HEAD>
NORESIZE: Optional – prevents viewers from resizing the frame. By default

the user can stretch or shrink the frame’s display by selecting the frame’s
border and moving it up, down, left, or right.
98
99
100
101
What do the following mean?
1)<FRAMESET COLS="2*, 3*, 5*">
2) <FRAMESET COLS="150, 20%, *, 3*">
So what are the space-allocation priorities? Absolute pixel
values are always assigned space first, in order from
left to right. These are followed by percentage values
of the total space. Finally, proportional values are
divided based upon what space is left.
102
Forms
 Forms add the ability to web pages to not only provide the person
viewing the document with dynamic information but also to
obtain information from the person viewing it, and process the
information.
Objectives:
Upon completing this section, you should be able to
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
 Forms work in all browsers.
 Forms are Platform Independent.
103
Sami Ali
Al al-Bayt University
104
105
HTML FORM
106
HTML FORM TAG
107
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type
attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
108
<input> tag text
 The <input> tag specifies an input field where the user can enter data.
 The <input> element is the most important form element.
 The <input> element can be displayed in several ways, depending on the
type attribute.
<!DOCTYPE html>
<html>
<body>
<form>
Enter your name<br>
<input type="text" name ="username">
</form>
</body>
</html>
109
<!DOCTYPE html>
<html>
<body>
<form>
<br>
<label for="myname">Enter your name</label><br>
<input type="text" id ="myname"name ="text">
</form>
</body>
</html>
110
button
<!DOCTYPE html>
<html>
<body>
<form>
Enter your name<br>
<input type="button" name ="button">
</form>
</body>
</html>
111
submit
 Click the "Submit" button for sending the form-data to a page on
the server.
112
hidden
 Definition and Usage
 The <input type="hidden"> defines a hidden input field.
 A hidden field lets web developers include data that cannot be seen or modified by users when a form is
submitted.
 A hidden field often stores what database record that needs to be updated when the form is submitted.
 Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using
any browser's developer tools or "View Source" functionality. Do not use hidden inputs as a form of
security!
113
file
114
password
115
RADIO BOTTON
<html>
<head>RADIO BOTTON
<HR>
</head>
<body>
<form>
Gender==============================
<br>
<input type="radio" name="Gender" >MALE<br>
<input type="radio" name="Gender" >FEMALE<br>
</form>
</body>
</html>
116
<label> tag
 Definition and Usage
 The <label> tag defines a label for several elements:
 Proper use of labels with the elements above will benefit:
 Screen reader users (will read out loud the label, when the
user is focused on the element)
 Users who have difficulty clicking on very small regions
(such as checkboxes) - because when a user clicks the text
within the <label> element, it toggles the input (this increases
the hit area).
117
118
Radio button with label tag
<html>
<head>RADIO BOTTON
<HR>
</head>
<body>
<form>
Gender==============================
<br>
<label for="MALE">MALE</label>
<input type="radio" name="Gender" id="MALE"><br>
<label for="FEMALE">FEMALE<label>
<input type="radio" name="Gender" id="FEMALE"><br>
</form>
</body>
</html>
119
radio button
120
checkbox
 Checkboxes are used to give multiple options
121
TEXTAREA
122
Other Elements used in Forms
 <TEXTAREA></TEXTAREA>: is an element
that allows for free form text entry.
Browser will display
Textarea has the following attributes:

 NAME: is the name of the variable to be sent to
the CGI application.
 ROWS: the number of rows to the textbox.
 COLS: the number of columns to the textbox.
123
reset
124
select
125
Other Elements used in Forms
 The two following examples are <SELECT></SELECT> elements,
where the attributes are set differently.
The Select elements attributes are:
 NAME: is the name of the variable to be sent to the CGI application.
 SIZE: this sets the number of visible choices.
 MULTIPLE: the presence of this attribute signifies that the user can
make multiple selections. By default only one selection is allowed.
126
<FORM> element attributes
 ACTION: is the URL of the CGI (Common Gateway Interface) program

that is going to accept the data from the form, process it, and send a
response back to the browser.
 METHOD: GET (default) or POST specifies which HTTP method will
be used to send the form’s contents to the web server. The CGI application
should be written to accept the data from either method.
 NAME: is a form name used by VBScript or
JavaScripts.
 TARGET: is the target frame where the response page will show up.
127
Form Elements
<INPUT> Element’s Properties
TYPE= Type of INPUT entry field.
NAME = Variable name passed to CGI application
VALUE= The data associated with the variable

name to be passed to the CGI application
CHECKED= Button/box checked
SIZE= Number of visible characters in text field
MAXLENGHT= Maximum number of characters

accepted.
128
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.
Web pages often contain multimedia elements of different types and
formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a
single color.
Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file
extension.
Multimedia files have formats and different extensions

like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi. 129
HTML <audio> Autoplay
To start an audio file automatically, use
the autoplay attribute:
Example
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
130
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
131
The HTML <video> Element
To show a video in HTML, use
the <video> element:
Example
<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>
132
133
134
Blinking tag in javascript
135

HTML

Uploaded by

Copyright:

Available Formats

You might also like

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

HTML stands for Hyper Text Markup Language

The <!DOCTYPE html> declaration defines that this document

HTML headings are defined with the <h1> to <h6> tags.

HTML paragraphs are defined with the <p> tag:

Empty HTML Elements

HTML elements with no content are called empty

The <br> tag defines a line break, and is an empty

 The <HR> element causes the browser to display a

 Comments are some text or code written in your code to give an

Formatting elements were designed to display special types of

<b> - Bold text

The HTML <em> element defines emphasized text. The

text can be used for chemical formulas , like H2O.

 All HTML elements can have attributes

 The HTML Style Attribute

 The HTML style attribute has the following syntax:

 The style attribute is used to add styles to an element, such as color,

These attributes control the colors of the different link states:

The Format for setting these attributes is:

<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000” LINK=“#0000FF”

 The CSS font-family property defines the font to be

 TheCSS font-size property defines the text size for an

The CSS text-align property defines the horizontal text

<h1 style="text-align:center;">Centered Heading</h1>

 <span> is a inline tag ,this gives us the text format

1.Unordered List or Bulleted List (ul)

The <dl> tag defines the description list,

There are two ways to specify border for HTML tables.

1) By border attribute of table in HTML

You can specify padding for table header and table

1)By cellpadding attribute of table in HTML

The cellpadding attribute of HTML table tag is obselete now. It

 TH, TD and TR should always have end tags.

 MARGINWIDTH: Optional attribute stated in pixels.

NORESIZE: Optional – prevents viewers from resizing the frame. By default

Here are some examples:

Browser will display

Textarea has the following attributes:

 ACTION: is the URL of the CGI (Common Gateway Interface) program

TYPE= Type of INPUT entry field.

NAME = Variable name passed to CGI application

VALUE= The data associated with the variable

CHECKED= Button/box checked

SIZE= Number of visible characters in text field

MAXLENGHT= Maximum number of characters

Multimedia comes in many different formats. It can be almost anything you

Multimedia files have formats and different extensions

You might also like