Chapter 1 - HTML
Uploaded by
Yenatu Lij BayeChapter 1 - HTML
Uploaded by
Yenatu Lij BayeUNIT ONE
HTML
1.HTML: Hypertext Markup Language
HTML stands for Hypertext Markup Language.
It is the markup language used for creating web pages.
A markup language is a set of markup tags, and HTML uses
markup tags to describe web pages.
HTML tags are keywords surrounded by angle brackets like
<html>
HTML is written in the form of HTML elements consisting of
HTML tags surrounded by angle brackets (e.g. <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.
You can also refer to them as opening tags and closing tags.
1.1 HTML…
HTML elements form the building blocks of all websites.
HTML allows images and objects to be embedded and can be
used to create interactive forms.
It provides a means to create structured documents by
denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items.
It can embed scripts in languages such as JavaScript which
affect the behavior of HTML webpage.
HTML can also be used to include Cascading Style
Sheets (CSS) to define the appearance and layout of text.
1.1 HTML…
Software is required to interpret HTML tags and display the
information.
The software is web browser.
The purpose of a web browser 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
World Wide Web Consortium (W3C) is the organization that
develops guidelines and specifications for many web
technologies including HTML.
The W3C website is found at www.w3.org.
1.2 HTML, HEAD and BODY Tags
The entire web page document is contained within an <html>
tag.
The <html> tag is called the root element because it contains
all the elements in the document, and it cannot not be
contained within any other element.
Every web page starts with <html> tag and ends with </html>
1.2 HTML, HEAD and BODY Tags…
Let us first see how a plain html code looks like.
<html>
<head>
<title>Page title here </title>
</head>
<body>
Our body content here
</body>
</html>
1.2 HTML, HEAD and BODY Tags…
Our web page should start with <html> and end with </html>
The total code is divided into two parts and both the parts are
kept inside <html> tag
The first part inside this html tags is the head and it starts with
<head> and ends with </head>.
????What we put in the head will not be displayed to users.
The second part starts with <body> and ends with </body>
tag.
Inside the <body> tag we keep all our content which we want
to display to our web page users.
Whatever we place in <body> will be displayed by the
browser to the web users.
1.2 HTML, HEAD and BODY Tags…
1.2 HTML, HEAD and BODY Tags…
<HEAD> … </HEAD>
The web page should have only one head tag.
The head tag starts with <head> and ends with </head>.
The text or tags that are inside the head tag will not be displayed in the
browser window.
One of the important tags which is put inside <head> is <title> </title>
tag.
Title tags are used to give title to the browser window.
Title tags are also important for our search engine point of view.
Search engine is an application that searches for and retrieve internet to
access contents of documents in it
We should keep most important keywords inside the title tag.
1.2 HTML, HEAD and BODY Tags…
Example:
<html>
<head>
<title> Nuclear Energy </title>
</head>
<body>
Nuclear energy is one of the clean environment friendly
energy source.
</body>
</html>
1.2 HTML, HEAD and BODY Tags…
It is also possible to put JavaScript code and Cascading Style
Sheets in head section.
If we are adding any JavaScript code here then that will be
loaded when the browser opens the page.
1.2 HTML, HEAD and BODY Tags…
The <title> Element
You should specify a title for every page that you write inside the
<title> element.
This element is a child of the <head> element.
It is used in several ways:
It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers.
Its is used by search engines that use its content to help index pages.
Example: Here is the example of using title tag.
<head>
<title>Nuclear Energy</title>
</head>
1.2 HTML, HEAD and BODY Tags…
<BODY> … </BODY>
This is where we place our content for our visitors.
What we place here will be displayed to our visitors.
The style and other formatting of the text and what you could
do to fill the content of the web page will discuss in different
sections.
A <body> element may contain anything from a couple of
paragraphs under a heading to more complicated layouts
containing forms and tables.
1.2 HTML, HEAD and BODY Tags…
Attributes of HTML Tags
HTML tags can have attributes
Attributes provide additional information about a tag
Tags often have attributes that modify them in some way.
Attributes are always specified in the start tag.
Attributes come in name-value pairs like: name="value"
The syntax for attributes is as follows:
<element attribute-name="value"> Content </element>
or for empty elements:
<element attribute-name="value" />
Example: the background color of HTML document can be changed
using “bgcolor” attribute of the <body> tag.
1.2 HTML, HEAD and BODY Tags…
<html> Tag Attributes
The lang attribute of HTML tag can be used to declare the
language of a Web page or a portion of a Web page.
This is meant to assist search engines and browsers.
According to the W3C recommendation, it is good to declare
the primary language for each Web page with the lang
attribute inside the <html> tag, like this:
<html lang="en">
…
</html>
1.2 HTML, HEAD and BODY Tags…
ISO 639-1 defines abbreviations for languages.
In HTML, they can be used in the lang attributes.
Language ISO Code
Chinese zh
English en
French fr
German de
Russian ru
Local language
Afar aa
Amharic am
Afan Oromo om
Somali so
Tigrinya ti
1.2 HTML, HEAD and BODY Tags…
<html lang=“en"> <html lang=“om">
<head> <head>
<title>Coffee</title> <title> Buna </title>
</head> </head>
<body> <body>
Jimma is origin of Arabica coffee. Jimmi biyya bunaati.
</body> </body>
</html> </html>
1.2 HTML, HEAD and BODY Tags…
<body> Tag Attributes
A. Background Color
You can change background color of your web page by using
<BODY> tag attribute bgcolor
<body bgcolor=”green”>
Color can be specified using color name or RGB value.
The following also sets background color to green:
<body bgcolor=”#00FF00”>
1.2 HTML, HEAD and BODY Tags…
B. Background Image
We can use a background picture for web page instead of
background color.
You must have an image to do this.
Then you can use background attribute of <BODY> tag as follows:
<body background="image1.gif">
C. Text Color
We can also set the text color of the web page just like background
color.
We use text attribute of <BODY> to do this.
<body bgcolor=”yellow” text="red">
Example:
<HTML>
<HEAD>
<TITLE>Page with Back Color</TITLE>
</HEAD>
<BODY bgcolor="yellow" text="#FF0000">
Page with yellow back color and red text color
</BODY>
</HTML>
D. Other <body> Attributes
alink: sets the color for active links or selected links. When a user is clicking on a
link, it is called active link during the clicking process
link: sets a color for link text
vlink: sets a color for visited links. A link that the user has already clicked on is
called visited link
***JIT WIFI 10-140-5-19***
Example:
<html>
<head>
<title> Link Colors </title>
</head>
<body alink="#00A000" link="#00FF00" vlink="#0000FF">
<a href="first.html">first page</a><br>
<a href="first1.html"> second page</a><br>
<a href="first2.html">third page</a><br>
<a href="first3.html">last page</a><br>
</body>
</html>
1.3 Creating Links
A hyperlink or link is a word, group of words, or image that
you can click on to jump to a new document or a new section
within the current document.
Web pages can contain links that take you directly to other
pages or specific parts of the given page.
These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by
clicking on words, phrases, and images.
Thus you can create hyperlinks using text or images available
on your web page.
1.3 Creating Links…
Links are specified in HTML using the <a> tag.
This element is called anchor tag as well.
Anything between the opening <a> tag and the closing </a>
tag becomes part of the link.
The <a> tag can be used in two ways:
To create a link to another document, by using the href
attribute
To create a bookmark inside a document, by using the name
attribute
1.3 Creating Links…
The href Attribute:
A link in HTML is always composed of two parts, the clickable part (the link
text) and the URL (the destination site, page or resource).
The URL is specified using href attribute.
Here is an example:
<a href=”http://mail.yahoo.com”> Yahoo mail</a>
The target attribute
It is used to specify where to display the contents of a selected hyperlink.
If set to:
– _blank then a new window will be opened to display the loaded page
– _top or _parent then same window will be used to display the loaded
document.
– _self then loads the new page in current window. By default its _self.
1.3 Creating Links…
Example: a link that opens on a new window/tab
<a href="first.html" target="_blank"> First Page</a><br>
The name Attribute
The name attribute specifies the name of the anchor.
The name attribute is used to create a bookmark inside an HTML
document.
Bookmarks are invisible to the reader.
Example: a named anchor inside an HTML document:
<a name="example">Sample Examples</a>
Then create a link to the "Sample Examples" inside the same
document:
1.3 Creating Links…
The title attribute
The title attribute is used to type a short description of the link.
If you place the cursor over the link, you will see the text in the title
attribute.
Example:
<a href="http://www.html.net/" title="Visit our website and learn
HTML">Learn HTML </a>
The accesskey attribute:
The accesskey attribute provides a keyboard shortcut to activate the link.
For example, you could make the T key an access key so that when the
user presses either the Alt or Ctrl key on his keyboard along with the T
key, the link gets activated.
Example:
<a href="first.html" target="_blank" accesskey="m">First page</a>
1.3 Creating Links…
Linking to email
It is also possible to make a link to an e-mail address.
It is done in almost the same way as when you link to a document.
To link to an email, you type mailto: followed by an e-mail address.
Example:
<a href="mailto:[email protected]">Send an e-mail to us </a>
When the link is clicked, the default e-mail program opens with a
new blank message addressed to the specified e-mail address.
This function will only work if there is an e-mail program installed
on your computer.
2. HTML Text Formatting Tags
HTML Headings
In HTML, you can create different heading levels in your
document to help you organize the document into sections,
just as you might do when writing a book.
A heading element briefly describes the topic of the section it
introduces.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading and <h6> the smallest
heading.
2. HTML Text Formatting
Tags…
Heading tags are block tags, and you must specify opening
and closing tags.
Example:
<body>
<h1>this is heading level 1.</h1>
<h2>this is heading level 2.</h2>
<h3>this is heading level 3.</h3>
<h4>this is heading level 4.</h4>
<h5>this is heading level 5.</h5>
<h6>this is heading level 6.</h6>
</body>
2. HTML Text Formatting
Tags…
2. HTML Text Formatting
Tags…
HTML Paragraphs
Authors traditionally divide their thoughts and arguments into
sequences of paragraphs.
Along with using headings to structure your Web page, you can add
structure by grouping common text into paragraphs.
Paragraphs are defined with the <p> tag.
Example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Both of the above tags will enforce a new line whenever you write
the tag.
2.HTML Text Formatting Tags…
The <p> element is a block element.
It cannot contain block-level elements including <p> itself.
The align attribute
You can use align attribute to align your paragraphs.
Paragraphs can be aligned left, center, right or justified.
You can do this by using align attribute.
Align attribute can be used also with other tags like headers, etc.
Example:
<p align="center">This is center aligned.</p>
<p align="justify">This is jutified. This works when you have
multiple lines in your paragraph and you want to justify all the lines
so that they can look more nice.</p>
2.HTML Text Formatting Tags…
HTML Fonts
The <font> tag is used to add font type, size, and color to the
text on your site.
The font tag is has three attributes
– size,
– color, and
– face
They are used to customize your fonts.
To change any of the font attributes at any time within your
page, simply use the <font> tag.
The text that follows will remain changed until you close with
the </font> tag.
You can change any or all of font attributes at the one time.
2.HTML Text Formatting Tags…
Font Size:
You can set the size of your font with size attribute.
The range of accepted values is from 1(smallest) to 7(largest).
The default size of a font is 3.
Example:
<font size="1">Font size=1</font>
<font size="2">Font size=2</font>
<font size="3">Font size=3</font>
<font size="4">Font size=4</font>
<font size="5">Font size=5</font>
<font size="6">Font size=6</font>
<font size="7">Font size=7</font>
2.HTML Text Formatting Tags…
2.HTML Text Formatting Tags…
Specify Relative Font Size
You can also specify relative font sizes instead of exact font size.
This can be done like:
<font size="+n">
<font size="-n">
This specifies how many sizes larger or how many sizes smaller than
the preset font size should be.
Example:
<font size="-1">Font size="-1"</font>
<font size="+1">Font size="+1"</font>
<font size="+2">Font size="+2"</font>
<font size="+3">Font size="+3"</font>
2.HTML Text Formatting Tags…
2.HTML Text Formatting Tags…
Font Face:
You can set any font you like using face attribute
But be aware that if the user viewing the page doesn't have the font
installed, they will not be able to see it.
Instead they will default to Times New Roman of your font with size
attribute.
Example:
<font face="Times New Roman" size="5"> Times New Roman </font>
<font face="Verdana" size="5"> Verdana </font>
<font face="Comic sans MS" size="5"> Comic Sans MS </font>
<font face="WildWest" size="5"> WildWest </font>
2.HTML Text Formatting Tags…
A visitor will only be able to see your font if they have that
font installed on their computer.
So, it is possible to specify two or more font face alternatives
by listing the font face names, separated by a comma.
Example:
<font face="arial, helvetica">
<font face="Lucida Calligraphy, Comic Sans MS, Lucida
Console>
2.HTML Text Formatting Tags…
Font Color:
You can set any font color you like using color attribute.
You can specify the color that you want by either the color
name or hexadecimal code for that color.
Check a complete list of HTML Color Name with Codes.
Example:
<font color="#0000FF">This text blue color</font>
<font color="red">This text is red</font>
2.HTML Text Formatting Tags…
Formatting Tags
In HTML, there are many tags that you can use to enhance and
change the look of the text.
You can make text bold, italicized, or underlined; these are just
some of the presentational options available to indicate how
text can appear in HTML.
Bold Text - the <b> Element:
Anything that appears in a <b>...</b> element is displayed in
bold.
The <b> tag makes text to be displayed in bold face.
2.HTML Text Formatting Tags…
Example:
<p>The use of nuclear energy needs <b> safety caution </b> because
of the associated danger.</p>
This will produce following result:
The use of nuclear energy needs safety caution because of the
associated danger.
Italic Text - the <i> Element:
Anything that appears in a <i>...</i> element is displayed in italicized
face.
Example:
<p>The following word uses an <i>italicized</i> typeface.</p>
This will produce following result:
2.HTML Text Formatting Tags…
Underlined Text - the <u> Element:
Anything that appears in a <u>...</u> element is displayed
with underline.
Example:
<p>The following word uses a <u>underlined</u>
typeface.</p>
This will produce following result:
The following word uses a underlined typeface.
2.HTML Text Formatting Tags…
Centering Content - the <center> Element:
You can use <center> tag to put any content in the center of
the page or any table cell.
Example:
<p>This is not in the center.</p>
<center> <p>This is in the center.</p> </center>
2.HTML Text Formatting Tags…
Strike Text - the <strike> Element:
Anything that appears in a <strike>...</strike> element is
displayed with strikethrough, which is a thin line through the
text.
Example
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
This will produce following result:
The following word uses a strikethrough typeface.
2.HTML Text Formatting Tags…
Create Line Breaks - the <br> Element:
The <br> tag inserts a single line break.
You can also use <br /> which does the same.
Whenever you use the <br> element, anything following it starts on
a new line.
This tag is an example of an empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
The <br /> element has a space between the characters br and the
forward slash.
If you omit this space, older browsers will have trouble rendering
the line break, while if you miss the forward slash character and just
use <br> it is not valid XHTML.
2.HTML Text Formatting Tags…
Example
Hello<br>
You come most carefully upon your hour.<br />
Thanks<br>
Mahnaz
This will produce following result:
Hello
You come most carefully upon your hour.
Thanks
Mahnaz
2.HTML Text Formatting Tags…
Preserve Formatting - the <pre> Element:
Sometimes you want your text to follow the exact format of how it is written in the
HTML document.
In those cases, you can use the preformatted tag (<pre>).
The <pre> tag defines preformatted text.
Text in a pre element is displayed in a fixed-width font (usually Courier),
It preserves both spaces and line breaks.
Example:
<pre>
function testFunction( int a, int b ){
int sum = a + b;
alert (sum);
return;
}
2.HTML Text Formatting Tags…
This produces the following output:
function testFunction( int a, int b ){
var sum = a + b;
alert (sum);
return;
}
2. HTML Text Formatting
Tags…
Horizontal Rules - the <hr> Element
<hr> horizontal rules are used to visually break up sections of a document.
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content in an HTML page.
For example you may want to give a line between two paragraphs as
follows:
<p>This is paragraph one and should be on top</p>
<hr>
<p>This is paragraph two and should be at bottom</p>
This produces the following output:
This is paragraph one and should be on top
____________________________________________________________
2. HTML Text Formatting
Tags…
Attribute Value Description
align Left Deprecated. Use styles instead.
Center Specifies the alignment of a hr element
right
noshade noshade Deprecated. Use styles instead.
Specifies that a hr element should render in one solid color
(noshaded), instead of a shaded color
size pixels Deprecated. Use styles instead.
Specifies the height of the hr element
width Pixels Deprecated. Use styles instead.
% Specifies the width of the hr element
Example:
<p>This is paragraph one and should be on top</p>
2. HTML Text Formatting
Tags…
Subscript and Superscript Text:
The <sub> tag defines subscript text.
Subscript text appears half a character below the baseline.
Used for chemical formulas, like H O.
2
The <sup> tag defines superscript text.
Superscript text appears half a character above the baseline.
Used for mathematical expressions like x 2+y or footnotes, like
HTTP[1].
Example:
<p> The chemical formula for water is H<sub>2</sub>O </p>
<p> Solve 5X<sup>2</sup>+6X+10 </p>
2. HTML Text Formatting
Tags…
Big and small Text:
The <big> tag displays texts in big.
The content of the <big> element is displayed one font size
larger than the rest of the text surrounding it.
The <small> tag renders a smaller text.
The content of the <small> element is displayed one font size
smaller than the rest of the text surrounding it.
2. HTML Text Formatting
Tags…
Example:
<html>
<head>
<title>Formatting Tags</title>
</head>
<body>
<font size="5">
<p> The chemical formula for water is H<sub>2</sub>O </p>
<p> Solve 5X<sup>2</sup>+6X+10 </p>
<p>The following word uses a <small>small</small> typeface.</p>
<p>The following word uses a <big>big</big> typeface.</p>
</font>
</body>
2. HTML Text Formatting
Tags…
2. HTML Text Formatting
Tags…
Tag Description
<em> Renders as emphasized text
<strong> Renders as strong (highlighted) text
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample output from computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<q> Defines a short quotation.
<blockquote> To quote a passage from another source
2. HTML Text Formatting
Tags…
<html>
<head> <title>HTML Tags</title>
</head>
<body>
<abbr title="World Health Organization">WHO</abbr> reports that malaria epidemic is
increasing. <br>
Two <acronym title="North Atlantic Treaty Organization">NATO</acronym> troops are
killed in Afghanistan. <br>
<em>Emphasized text</em> <br>
<strong>Strong text</strong> <br>
<dfn>Definition term</dfn> <br>
<code>Computer code text</code> <br>
<samp>Sample computer code text</samp> <br>
<kbd>Keyboard text</kbd> <br>
<var>Variable</var> <br>
<cite>Citation</cite> <br>
</body>
2. HTML Text Formatting
Tags…
2. HTML Text Formatting
Tags…
Special Characters
Characters within HTML documents that are not part of a tag
are rendered as-is by the browser.
However, some characters have special meaning and are not
directly rendered, while other characters can't be typed into
the source document from a conventional keyboard.
Special characters need either a special name or a numeric
character encoding for inclusion in an HTML document.
Character Code Short name Character name
" " " quotation mark
' ' ' apostrophe
& & & ampersand
< < < less-than
> > > greater-than
  non-breaking space
¡ ¡ ¡ inverted exclamation mark
¢ ¢ ¢ cent
£ £ £ pound
¤ ¤ ¤ currency
¥ ¥ ¥ yen
¦ ¦ ¦ broken vertical bar
§ § § section
¨ ¨ ¨ spacing diaeresis
© © © copyright
ª ª ª feminine ordinal indicator
« « « angle quotation mark (left)
¼ ¼ ¼ fraction 1/4
½ ½ ½ fraction 1/2
¾ ¾ ¾ fraction 3/4
¿ ¿ ¿ inverted question mark
× × × multiplication
÷ ÷ ÷ division
¬ ¬ ¬ negation
­ ­ soft hyphen
® ® ® registered trademark
¯ ¯ ¯ spacing macron
° ° ° degree
± ± ± plus-or-minus
² ² ² superscript 2
³ ³ ³ superscript 3
´ ´ ´ spacing acute
µ µ µ micro
¶ ¶ ¶ paragraph
· · · middle dot
¸ ¸ ¸ spacing cedilla
¹ ¹ ¹ superscript 1
º º º masculine ordinal indicator
» » » angle quotation mark (right)
¼ ¼ ¼ fraction 1/4
½ ½ ½ fraction 1/2
¾ ¾ ¾ fraction 3/4
¿ ¿ ¿ inverted question mark
× × × multiplication
÷ ÷ ÷ division
2.HTML Text Formatting Tags…
Tags and Their Attributes
The <p>, <center>, <b>, <i>, <u>, <pre>, <strike>, <s> tags
support the following standard attributes:
attribute value description
dir ltr Specifies the text direction for the content in an
rtl element
lang language_code Specifies a language code for the content in an
element
title text Specifies extra information about an element
HTML Comments
Comments are piece of code which is ignored by any web browser.
It is good practice to comment your code, especially in complex
documents, to indicate sections of a document, and any other notes
to anyone looking at the code.
Comments help you and others understand your code.
HTML comment are indicated by beginning tag <!-- and ending tag
-->
You can comment multiple lines by the special beginning tag <!--
and ending tag --> placed before the first line and end of the last line
to be treated as a comment.
For example: Given line is a valid comment in HTML
<!-- This is commented out -->
3. Inserting Image
Images are very important to depict many concepts on your
web page or to make it visually appealing.
It is often said that an single image is worth than thousands of
words.
In HTML, images are defined with the <img> tag.
The <img> tag has attributes, but not closing tag.
<img> Tag Attributes
The src Attribute
To display an image on a page, you need to use the src
attribute.
The value of the src attribute is the URL of the image you
want to display.
3. Inserting Image…
Syntax for inserting an image:
<img src="url" alt="Alternative Text"/>
The alt attribute
The required alt attribute specifies an alternate text for an
image, if the image cannot be displayed.
The alt attribute provides alternative information for an image
if a user for some reason cannot view it
This could be because of slow connection, an error in the src
attribute.
Example:
<img src="boat.gif" alt="Big Boat" />
3. Inserting Image…
The width and height attributes
To define the height and width of the image, rather than
letting the browser compute the size, use
the height and width attributes.
The attributes:
width: sets width of the image.
This can have a value like 10 or 20% etc.
height: sets height of the image.
This can have a value like 10 or 20% etc.
Example:
<img src=”sunset.jpg” height=”50” width=”100”>
3. Inserting Image…
The border attribute
The border attribute sets a border around the image.
This will have a value like 1 or 2 etc.
The align attribute
The align attribute sets horizontal alignment of the image and
takes value either left, right or center.
Example:
<img src="coffee.gif" alt="Highland coffee" width="100"
height="100" border="2" align="right" title=“Coffee
products" />
3. Inserting Image…
3. Inserting Image…
The valign attribute
The valign attribute sets vertical alignment of the image and takes
value either top, bottom or center.
The hspace and vspace attributes
hspace: sets horizontal space around the image.
This will have a value like 10 or 20% etc.
vspace: sets vertical space around the image.
This will have a value like 10 or 20% etc.
The title attribute
The title attribute specifies a text title.
The browser displays the title when the mouse passes over the link.
3. Inserting Image…
Example:
<html>
<head>
<title>Testing HTML</title>
</head>
<body>
Just checking img tag.
<img src="coffee.png" alt="Highland coffee" align=“right"
hspace="50" vspace="100">
</body>
</html>
3. Inserting Image…
Fig Image insertion
3. Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag
Each row is divided into data cells with the <td> tag.
<td> stands for "table data," and holds the content of a data
cell.
A <td> tag can contain text, links, images, lists, forms, other
tables, etc.
Table headers
Headers in a table are defined with the <th> tag.
The text in a <th> element will be bold and centered.
3. Tables…
If you do not specify a border attribute, the table will be displayed
without borders.
Sometimes this can be useful, but most of the time, we want the borders
to show.
Example:
<table border="1">
<tr>
<th>Header 1</th> <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>
3. Tables…
HTML code above looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Attributes of table:
• The attributes of a table will be applied on the whole table
element which include one or more rows (<tr>), header
cells (<th>) or data cells (<td>).
Attribute Value Description
align Left Specifies the alignment of a table according to
Center surrounding text
right
bgcolor rgb(x,x,x) Specifies the background color for a table
#xxxxxx
colorname
background Image url Sets background image of the table
border pixels Specifies the width of the borders around a table
bordercolor rgb(x,x,x) Specifies the color used for the border
#xxxxxx
colorname
cellpadding pixels Specifies the space between the cell wall and the
cell content
cellspacing pixels Specifies the space between cells
width Pixels Specifies the width of a table
%
height Pixels Specifies the height of a table
%
3. Tables…
Example:
<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
3. Tables…
Table Cellpadding and Cellspacing:
The two attribiutes cellpadding and cellspacing will allow you to
adjust the white space in your table cell.
Cellspacing defines the width of the border, while cellpadding
represents the distance between cell borders and the content within.
3. Tables…
Example:
<table border="1" cellpadding="15" cellspacing="10">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Ramesh Raman</td> <td>5000</td> </tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td> </tr>
</table>
3. Tables…
Attributes of rows and cells:
This attributes will be applicable only to the header cell or the data cell if
it is used with <th> or <td> tag
It will affect the whole content of the row if it is used by the <tr> tag.
Attribute Value Description
align left | right | center | Aligns the content in a cell
justify
bgcolor rgb(x,x,x) | #xxxxxx | Specifies a background color for a cell
Colorname
colspan number Specifies the number of columns a cell should span
rowspan number Sets the number of rows a cell should span
height Pixels | % (percent) Sets the height of a cell
width Pixels | %(percent) Specifies the width of a cell
nowrap nowrap Specifies that the content inside a cell should not wrap
valign top|middle|bottom Vertical aligns the content in a table row
3. Tables…
Spanning rows and cells
<table border="1" cellpadding="2">
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td>
</tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td>
</tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr>
</table>
3. Tables…
Vertical alignment of cell content
If you set your table’s width to a small value, web browsers
vertically align content in the middle of cells.
3. Tables…
You can use the valign attribute to set where the text is
displayed vertically.
The attribute can be added to a row or cell start tag, and set to
the desired value.
3. Tables…
Using a Header, Body, and Footer:
Tables can be divided into three portions: a header, a body, and a foot.
The head and foot remain the same for every page, while the body is
the main content of the table.
The three elements for separating the head, body, and foot are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different
pages or groups of data.
But it is notable that <thead> and <tfoot> tags should appear before
<tbody>.
Example:
<table border="1" width="100%">
<thead>
<tr> <td colspan="4">This is the head of the table</td> </tr>
</thead>
<tfoot>
<tr> <td colspan="4">This is the foot of the table</td> </tr>
</tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td></tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
</table>
3. Tables…
This produces the following output:
Ordered and Unordered List
The most common HTML lists are ordered and unordered
lists.
An ordered list: An unordered list:
1. The first list item List item
2. The second list item List item
3. The third list item List item
Ordered and Unordered List…
Unordered List
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
The “type” attribute can be used to specifies the style of the bullets its value
includes disc, square and circle.
Example:
<ul>
<li>Banana</li>
<li>Orange</li>
</ul>
How the HTML code above looks in a browser:
• Banana
Ordered and Unordered List…
<ul> attributes:
Attribute Value Description
compact compact Specifies that the list should render smaller than
normal
type disc Specifies the style of the bullet points of the list
square items
circle
Ordered and Unordered List…
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:
Types of fruits are:
<ol>
<li>Banana</li>
<li>Orange</li>
<li>Apple</li>
</ol>
How the HTML code above looks in a browser:
Types of fruits are:
1. Banana
2. Orange
3. Apple
Ordered and Unordered List…
The start attribute:
If you want a numbered list to start at a number other than “1,” you can
use the start attribute to specify another starting number.
Example
<ol start="17">
<li>Highlight the text with the text tool.</li>
<li>Select the Character tab.</li>
<li>Choose a typeface from the pop-up menu.</li>
</ol>
The resulting list items would be numbered 17, 18, and 19, consecutively.
Ordered and Unordered List…
The <ol> attributes:
Attribute Value Description
compact compact Specifies that the list should render smaller
than normal
start number Specifies the start point for the list items
type 1 Specifies which kind of bullet points will
I be used
i
A
a
Ordered and Unordered List…
Example:
Types of fruits are:
<ol type=”I”>
<li>Banana</li>
<li>Orange</li>
<li>Apple</li>
</ol>
This produces the following attribute:
Types of fruits are:
I. Banana
II. Orange
III.Apple
Ordered and Unordered List…
Nesting Lists
One list can be put inside another to create nested list.
Example:
<ol>
<li>Super computer</li>
<li>Mainframe computer</li>
<li>Mini computer</li>
<li>Micro computer</li>
<ul>
<li>Desktop computer</li>
<li>Laptop Computer</li>
<li>Palmtop computer</li>
</ul>
</ol>
Ordered and Unordered List…
Definition lists
Definition lists vary only slightly from other types of lists in that list
items consist of two parts: a term and a definition/description.
The term is given by the <dt> element and is restricted to inline
content.
The description is given with a <dd> element that contains block-
level content.
Definition (or dictionary) lists are used for lists of terms with their
respective definitions.
The whole list is marked up as a definition list (<dl>) element.
The content of a <dl> is some number of terms (indicated by the
<dt> element) and definitions (indicated by the <dd> element).
Here is an example of a brief definition list :
<dl>
<dt>Linotype</dt>
<dd>Line-casting allowed type to be selected, used, then recirculated into the
machine automatically. This advance increased the speed of typesetting and
printing dramatically.</dd>
<dt>Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photo-sensitive paper. Lenses
adjust the size of the type.</dd>
<dt>Digital type</dt>
<dd><p>Digital typefaces store the outline of the font shape in a format such as
Postscript. The outline may be scaled to any size for output.</p>
<p>Postscript emerged as a standard due to its support of graphics and its early
support on the Macintosh computer and Apple laser printer.</p>
</dd>
</dl>
Grouping Elements: the DIV and SPAN Elements
The DIV and SPAN elements offer a generic mechanism for adding
structure to documents.
The SPAN element defines the content to be inline and DIV to be
block-level but both impose no other presentational idioms on the
content.
Thus, authors may use these elements in conjunction with style sheets
to tailor HTML to their own needs and tastes.
The div element is used to identify a block-level division of text.
You can use a div like a container around a logical grouping of
elements on the page.
By marking related elements as a div and giving it a descriptive
name, you give context to the elements in the grouping.
That comes in handy for making the structure of your document clear
The DIV and SPAN Elements…
In this example, a div element is used as a container to create group
<div class="listing">
<cite>The Complete Manual of Typography</cite>, James Felici. A
combination of type history and examples of good and bad type.
</div>
Here is another common use of a div used to break a page into sections for
context, structure, and layout purposes.
In this example, a heading and several paragraphs are enclosed in a div
and identified as the “news” section.
<div id="news">
<h1>New This Week</h1>
<p>We've been working on...</p>
<p>And last but not least,... </p>
The DIV and SPAN Elements…
A span offers all the same benefits as the div element.
It is used for inline elements that do not introduce line breaks.
Because spans are inline elements, they can only contain text
and other inline elements (in other words, you cannot put
block-level elements in a span).
Example:
<P><SPAN class="client-title">Client information:</SPAN>
</P>
Frames
Frames can divide the screen into separate windows.
Each of these windows can contain an HTML document.
A file that specifies how the screen is divided into frames is
called a frameset.
The frameset page lacks a <body> element (although it still
requires head and title elements)
instead uses a <frameset> element, which sets the attributes
for how the frames are positioned.
The frameset element houses frame elements, which define
the location and attribute of each frame.
Frames…
When a frameset page is loaded, the browser automatically loads each of
the pages associated with the frames.
Each HTML document is called a frame, and each frame is independent of
the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
Users can’t save frame properly
The frameset element holds two or more frame elements.
Each frame element holds a separate document.
The frameset element sets no of columns or rows in the frameset and it
uses <frameset> tag.
The <frame> tag defines one particular window (frame) within a frameset.
Frames…
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
The frameset column size can also be set in pixels
(cols="200,500"), and one of the columns can be set to use the
remaining space, with an asterisk (cols="25%,*").
You cannot use the body element together with the frameset
element.
However, if you add a <noframes> tag containing some text
for browsers that do not support frames, you will have to
enclose the text in a body element.
Frames…
Attributes of frameset
Attribute Value Description
cols pixels Specifies the number and size of columns in a
% frameset
*
rows pixels Specifies the number and size of rows in a
% frameset
*
Frames…
Example:
<frameset cols="30%,*">
<frame src="frame-one.html">
<frame src="frame-two.html">
</frameset>
Frames…
Attributes of frame
Attribute Value Description
frameborder 0 or 1 Specifies whether or not to display a border around a frame
marginheight pixels Specifies the top and bottom margins of a frame
marginwidth pixels Specifies the left and right margins of a frame
noresize noresize Specifies that a frame cannot be resized
scrolling yes Specifies whether or not to display scrollbars in a frame
no
auto
src URL Specifies the URL of the document to show in a frame
Frames…
You can also nest framesets, to create a combination of
columns and rows:
<frameset rows="120,*">
<frame noresize=”noresize” src="frame-one.html">
<frameset cols="150,*">
<frame src="frame-two.html">
<frame src="frame-three.html">
</frameset>
</frameset>
Frames…
Frames…
Nested Frames
Framesets may be nested to any level.
In the following example, the outer FRAMESET divides the available space into
three equal columns.
The inner FRAMESET then divides the second area into two rows of unequal
height.
Example:
<FRAMESET cols="33%, 33%, 34%">
<frame src=”one.html”>
<FRAMESET rows="40%, 50%">
<frame src=”two.html”>
<frame src=”three.html”>
</FRAMESET>
<frame src=”four.html”>
Frames…
Working with iframes (internal frames)
The <iframe> tag defines an inline frame that contains
another document.
<iframe>s enable you to update a page section without
reloading the rest of it.
In addition, <iframe>s can be handy for enabling users to
update a portion of a site’s design without touching the rest of
the design.
<html>
<head>
<title>Internal Frame</title>
</head>
<body>
<p> Maths is the base of many sciences including engineering, computer science,
physics, etc. </p>
<br> <br>
<iframe src ="test.html" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
<br> <br>
<table border="1">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Chan Li</td> <td>5000</td> </tr>
<tr> <td>Anna Andrey</td> <td>7000</td> </tr>
</table>
</body>
</html>
HTML Forms
HTML forms are used to pass data to a server.
Users generally fill the form and submitting the form for further
processing by server.
Forms are a vital tool for the webmaster to receive information from
the web surfer, such as their name, email address, credit card, etc.
You may store that data into a file, place an order, gather user statistics,
register the person to your web forum, or maybe subscribe them to
your weekly newsletter.
A form will take input from the site visitor and then will post to your
back-end application such as CGI, ASP, PHP script etc.
Then your back-end application will do required processing on that
data in whatever way you like.
HTML Forms…
The <form> tag is used to create an HTML form:
<form>
input elements
</form>
The most important element inside form element is the input element.
The input element is used to accept 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.
The most used input types are described in the next subsections.
HTML Forms…
Text Field
You can create text field by using:
<input type="text">
This defines a one-line input field that a user can enter text into.
Text fields have two important attributes: name and value.
The name attribute gives name to the text field for identification
purpose and to make it easily accessible.
The value attribute sets content of the text field.
<form>
First name: <input type="text" name="firstname"><br />
Last name: <input type="text" name="lastname">
</form>
HTML Forms…
The following is the list of attributes for <input type=”text”> tag.
name: the name attribute is required for identifying the input field
name.
value : the value attribute specifies default text that appears in the field
when the form is loaded.
size: by default, browsers display a text-entry box that is 20 characters
wide, but you can change the number of characters.
maxlength: by default, users can type an unlimited number of
characters in a text field regardless of its size.
You can set a maximum character limit using the maxlength attribute.
Example:
HTML Forms…
Password
A password field works just like a text entry field, except the
characters are obscured from view using asterisk (*) or bullet (•)
characters, or another character determined by the browser.
We can define a password field like:
<input type="password">
Example:
<form>
Password: <input type="password" name="pwd">
</form>
How the HTML code above looks in a browser:
Password:
HTML Forms…
Text Area
At times, you may want your users to be able enter multiple
line of text.
For these instances, use the <textarea> element that is
replaced by a multi-line, scrollable text entry box when
displayed by the browser.
Example:
<textarea name="comment"> Tell us what you feel about our
tutorial with 50 words or less. </textarea>
HTML Forms…
Text Area attributes:
Text area has the following attributes:
name – name is used to identify the text area
rows - specifies the number of lines of text area should display.
Scrollbars will be provided if the user types more text than fits in the
allotted space.
cols - specifies the width of the text area measured in number of
characters.
Example:
<textarea name="comment" rows="5" cols="100"> Tell us what you
feel about our tutorial with 50 words or less. </textarea>
HTML Forms…
Radio Buttons
Radio buttons are a popular form of interaction.
You may have seen them on quizzes, questionnaires, and other
web sites that give the user a multiple choice question.
Below are a couple attributes you should know that relate to
the radio button.
value: specifies what will be sent if the user chooses this radio
button.
Only one value will be sent for a given group of radio buttons.
name: defines which set of radio buttons that it is a part of.
HTML Forms…
Radio buttons let a user select ONLY ONE of a limited
number of choices.
We can define a radio button like:
<input type="radio">
Example
<form>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female
</form>
HTML Forms…
Radio button attributes are:
name: sets name of the radio button
value: sets the value of the radio button. This is the data
sent to server when the user submits the form.
checked: sets whether the radio button is checked by
default or not. It accepts the value checked.
Example:
<form method=”post” action=”register.php”>
<input type="radio" name="sex" value="male"
checked=”checked”> Male <br>
<input type="radio" name="sex" value="female"> Female
</form>
HTML Forms…
Checkboxes
Check boxes allow for multiple items to be selected for a certain group
of choices.
The check box's name and value attributes behave the same as a radio
button.
We can define a checkbox like:
<input type="checkbox">
Checkboxes let a user select ONE or MORE options.
Example:
<form>
<input type="checkbox" name="vehicle" value="Bike"> I have bike
<br>
<input type="checkbox" name="vehicle" value="Car"> I have car
</form>
HTML Forms…
Checkbox attributes are:
name: sets name of the checkbox
value: sets the value of the checkbox. This is the data sent to server when
the user submits the form.
checked: sets whether the checkbox is checked by default or not. It accepts
the value checked.
Example:
What type of food do you like?
<ul>
<li><input type="checkbox" name="genre" value=" spaghetti " checked="checked">
Spaghetti</li>
<li><input type="checkbox" name="genre" value="pizza" checked="checked">
Pizza</li>
<li><input type="checkbox" name="genre" value="sandwich">Sandwich </li>
<li><input type="checkbox" name="genre" value="Burger">Burger</li>
HTML Forms…
Selection lists
Drop down menus are created with the <select> and <option> tags.
<select> is the list itself and each <option> is an available choice for the
user.
Example:
Educational level: <br>
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
</select>
HTML Forms…
Attributes of select
Attribute Value Description
disabled disabled Specifies that a drop-down list should be disabled
multiple multiple Specifies that multiple options can be selected
name text Specifies the name of a drop-down list
size number Specifies the number of visible options in a drop-
down list
Attribute of option
Attribute value Description
selected selected Specifies whether the option is selected or not
when the form loads
HTML Forms…
Scrolling Lists
To make the menu display as a scrolling list, simply specify the number of lines
you’d like to be visible using the size attribute.
Example:
Select the fruits you like:
<select name="fruits" size="6" multiple="multiple">
<option>Orange</option>
<option>Apple</option>
<option selected="selected">Banana</option>
<option selected="selected">Mango</option>
<option> Avocado</option>
<option>Pineapple</option>
<option>Papaya</option>
<option>Strawberry</option>
HTML Forms…
This produces the following output:
HTML Forms…
Button
There are a number of different kinds of buttons that can be added
to web forms.
Some are:
submit button,
reset button, and
client side button.
Submit Button
When clicked, the submit button immediately sends the collected
data in the form to the server for processing.
Submit button is defined as follows:
HTML Forms…
Submit button has the following attributes:
value: this sets the text displayed on the button as a label.
name: used to give name to the submit button
Example:
<input type=”submit” name=”info” value=”Send”>
Reset Button
The reset button returns the form controls to the state they were in
when the form loaded.
This clears the text users typed into text fields, and removes
selections made.
HTML Forms…
Reset button can be defined as follows:
<input type="reset">
Client Side Button
This is a button that is used to trigger a client-side script
when the user clicks on that button.
This is used to execute scripting language such as JavaScript.
It has no predefined function on its own, as submit and reset
buttons do.
Client side button can be defined as follows:
<input type="button">
HTML Forms…
Client side button has the following attributes:
value: this sets the text displayed on the button as a label.
name: used to give name to the button
Example:
<input type=”button” name=”adder” value=”Add”>
Image Button
This type of input control allows you to replace the submit
button with an image of your choice.
The image will appear flat, not like a 3-D button.
HTML Forms…
Image button can be defined as follows:
<input type="image">
Image button attributes:
src: sets the image to be used as the submit button
value: text displayed on the button
name: name of the submit button
Example:
<input type="image" src="didessa.png" value="Submit">
HTML Forms…
The button element
The button element is a flexible element for creating custom buttons similar to
those created with the input element.
The content of the button element (text and/or images) is what gets displayed
on the button.
Attribute:
type = “submit|button|reset” – this attribute declares the type of the button.
submit: Creates a submit button. This is the default value.
reset: Creates a reset button.
button: Creates a push button.
In this example, a button element is used as a submit button.
The button includes a label and a small image.
<button type="submit" name="submit">
<img src="thumbs-up.gif" alt=""> Ready to go.
HTML Forms…
Hidden controls
There may be times when you need to send information to the form
processing application that does not come from the user.
In these instances, you can use a hidden form control that sends data
when the form is submitted, but is not visible to user.
<input type="hidden">
Hidden controls are added using the input element with the type set to
hidden.
Its sole purpose is to pass a name/value pair to the server when the form
is submitted.
Example:
<input type="hidden" name="page"
value="http://www.example.com/littlechair_thankyou.html">
HTML Forms…
File selection control
Web forms can collect more than just data.
They can also be used to transmit external documents from a user’s hard
drive.
For example, a printing company could use a web form to receive artwork
for a business card order.
A magazine could use a form on their site to collect digital photos for a
photo contest.
The file selection control makes it possible for users to select a document
from the hard drive to be submitted with the form data.
It is added to the form using our old friend the input element with its type set
to file.
Example:
<input type="file">
HTML Forms…
The browser displays a “file” input as a text field with a button that
allows the user to navigate the hard drive and select the file for upload.
Example:
<input type="file" name="photo" size="28" id="form-photo">
It is important to note that when a form contains a file selection input
element, you must specify the encoding type (enctype) of the form as
multipart/form-data and use the POST method.
Example:
<form action="client.php" method="post" enctype="multipart/form-data">
<p> Send a photo to be used as your online icon:<br>
<input type="file" name="photo" size="28" id="form-photo" /></p>
</form>
<html>
<head> <title>Form Elements</title> </head>
<body>
<form name="test" method="post">
First name: <input type="text" name="fname"> <br>
Last name: <input type="text" name="lname"> <br>
Sex: <input type="radio" name="sex" value="male" checked> Male
<input type="radio" name="sex" value="female"> Female
<br>
Educational level: <br>
<select name="education" size="6">
<option>Primary School</option> <option>Secondary School</option>
<option>College Diploma</option> <option>First Degree</option>
<option>Masters Degree</option> <option>PhD</option>
</select> <br>
Which fields are you interested in? <br>
<input type="checkbox" name=“choice1" value="Electronics"> Electronics <br>
<input type="checkbox" name=“choice2" value="Software Engineering"> Software Engineering
<br>
<input type="checkbox" name=“choice3" value="Computer Engineering"> Computer Engineering
<br>
<input type="checkbox" name=“choice4" value="Networking"> Networking
<br> <br>
Tell us what you feel about our tutorial with 50 words or less. <br>
<textarea name="comment" rows="10" cols="50"> </textarea> <br>
<input type="submit" name="submit">
</form>
</body>
HTML Forms…
Linking HTML Forms with PHP Scripts
To create a link between PHP scripts and HTML forms, we
need to use the submit button, and the attribute of the <form
tag>, specifically “action” and “method”.
Buttons:
Submit buttons: When activated, a submit button submits a
form.
A form may contain more than one submit button.
HTML Forms…
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action
attribute .
The file defined in the action attribute usually does something
with the received input:
<form name="input" action="action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
HTML Forms…
Automating Processing: Info Forms and Emails
If you would like to provide your web site visitors with a simple way to
contact you from your web site, but really don't want to display your email
address, this HTML form code may be what you're looking for.
You can create a simple form, to enable your visitors to send you comments,
questions, product support requests, or whatever you'd like.
<form action=‘mailto:[email protected]’ method=“post" enctype="text/plain">
Your Name: <input type="text" size="20“ name="VisitorName"> <br><br>
Your Comment: <textarea name="VisitorComment" rows="4" cols="20">
</textarea><br><br>
<input type="submit" value="Email This Form">
</form>
Inserting Multimedia
You can add music or video into your web page.
The easiest way to add video or sound to your web site is to
use <embed> tag.
The src attribute of <embed> tag defines what video/audio file
to embed into the page.
This tag causes the browser itself to include controls for the
multimedia automatically.
Example:
<embed src="example.mpeg" autostart="false" />
Inserting Multimedia…
The following is the list of important attributes for <embed> element.
align - determines how to align the object. It takes either center, left or right.
autostart - Indicates if the media should start playing automatically. Netscape default is
true, Internet Explorer is false.
loop - Specifies if the sound should be played continuously (set loop to true), a certain
number of times (a positive value) or not at all (false). This is supported by Netscape only.
playcount - Specifies the number of times to play the sound. This is alternate option for
loop if you are usiong IE.
hidden - Defines if the object shows on the page. A false value means no and true means
yes.
height – set height of the object.
width – set width of the object.
pluginspage - Specifies the URL to get the plugin software.
name - A name used to reference the object.
src - URL of the object to be embedded. This can be any recognizable by the user's browser.
It could be .mid, .wav, .mp3, .avi and so on).
volume - Controls volume of the sound. Can be from 0 (off) to 100 (full volume). This
attribute is supported by Netscape only.
Inserting Multimedia…
Example:
<embed src="http://www.computerhope.com/issues/ibm-linux.mov"
Pluginspage="http://www.apple.com/quicktime/" width="320" height="250"
CONTROLLER="true" LOOP="false" AUTOPLAY="false" name="IBM
Video">
</embed>
File types that are supported by the embed tag are Flash movies (.swf),
mpeg(.mpg or .mpeg), AVI's (.avi), and MOV's (.mov).
.swf files - are the file types created by Adobe Flash program.
.wmv files - are Microsoft's Window's Media Video file types.
.mov files - are Apple's Quick Time Movie format.
.mpeg files - are movie files created by the Moving Pictures Expert Group.
Macromedia's .swf and .mpeg formats may be the best options for web
because the high compression reduces file size and expedites the download
periods for your page visitors.
You might also like
- Quarter 1 Week 2 - Computer Programming 1No ratings yetQuarter 1 Week 2 - Computer Programming 19 pages
- Tag Attribute.: Html-I Basic HTML ElementsNo ratings yetTag Attribute.: Html-I Basic HTML Elements47 pages
- Hyper Text Markup Language: What Is HTML?No ratings yetHyper Text Markup Language: What Is HTML?15 pages
- Formatting Tags: ............. Tag Contains Information About The DocumentNo ratings yetFormatting Tags: ............. Tag Contains Information About The Document9 pages
- Class 8 Computer worksheet of Introduction to HTMLNo ratings yetClass 8 Computer worksheet of Introduction to HTML8 pages
- Odisha Agricultural Marketing Information System - Project ReportNo ratings yetOdisha Agricultural Marketing Information System - Project Report91 pages
- Practical File: Vaish College of Engineering, RohtakNo ratings yetPractical File: Vaish College of Engineering, Rohtak33 pages
- Rs1043 - Computer Engineering Curriculum Grade 11 and 12100% (1)Rs1043 - Computer Engineering Curriculum Grade 11 and 1225 pages
- WebDesign HTML CSS JS Practical ProgramsNo ratings yetWebDesign HTML CSS JS Practical Programs21 pages
- FileMakr - Download Project File - Vehicle Breakdown Assistance100% (1)FileMakr - Download Project File - Vehicle Breakdown Assistance43 pages
- Cl-8 IT L-10 Images Links and Frames in HTML Answer KeyNo ratings yetCl-8 IT L-10 Images Links and Frames in HTML Answer Key8 pages
- Rich Controls: Calendar Control Adrotator ControlNo ratings yetRich Controls: Calendar Control Adrotator Control10 pages
- Study Guide - Intro To Web 500 2020 PDFNo ratings yetStudy Guide - Intro To Web 500 2020 PDF91 pages
