Chapter 2 Final.pptx

Chapter 2
Web Page Development
using HTML

Contents
Cascading Style Sheets (CSS)
Forms and Frames
Creating HTML documents
HTML and HTML tags
Introduction to XML
Working with Tables
2

What is HTML?
 WWW – uses hypertext to cross-reference or link related
resources anywhere on the Internet.
 HTML (HyperText Markup Language) used for describing
web pages and display its files (text, or multimedia).
 HTML is not a programming language, is a markup
language
 Cannot be used to describe computations.
 Use to describe the general form and layout of documents
to be displayed by the browser.
 Tags describe document content
 HTML documents contain HTML tags and plain text
 Telling the browser what to do, and what properties to use.
 A series of tags that are integrated into a text document.
 Compose of “Content” and “Controls”
3

What Software is Needed?
 Internet software you will need for web authoring includes:
 Web browser to view a web page, such as Netscape, Internet
Explorer, Mosaic.
 Text editor to create the HTML file; such as Notepad or
WordPad, etc.
 FTP (File Transfer Protocol) program to upload a page.
There are several available for a Mac or a PC.
 Graphics editor to create new graphics. This is optional. If
you decide you need one there are several available.
4

What Steps to Follow?
 Creating a page on the Web can be a simple or complex
process. However, the steps are always the same:
 Decide what information will be on a page and how that
information will be arranged on the page.
 Create the HTML file with the text and commands using
any editor.
 Test the page in various browsers and on various
platforms.
 Finally, upload the HTML file to the Web server.
5

HTML Elements/ Tags
 HTML commands or tags are enclosed in angled brackets: <
>.
 Some tags stand alone and some come in pairs. In paired
tags the ending tag starts with a slash: /.
 Not case-sensitive.
6
Element Attribute Name Attribute Value
<p align=“right”> </p>

Types of HTML Tags
six basic types of commands:
 Structural tags (mandatory)
 Formatting tags
 Separator tags
 Heading tags
 List tags
 Link tags
7

Cont’d
Structural tags – these are at the beginning and end of
an HTML file.
<HTML> </HTML> For an HTML document
<HEAD> </HEAD> For the head section
<TITLE> </TITLE> For the title of the bookmark
<BODY> </BODY> For the body section
 Begins with <html> and ends with </html>
 Elements (tags) are nested one inside another:
Example: <TITLE> My Personal Page </TITLE>
8
<html> <head></head> <body></body> </html>

Cont’d
Heading tags – there are 6 levels of Headings. Level 1
is the largest font size. Defined with <h1> to <h6> tags
<H1> </H1> Heading level 1
Example: <H2> This is My Personal Page </H2>
9

Cont’d
Heading tags
10
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Cont’d
Formatting tags – these tags affect the format of the
word or sentence.
<I> </I> For Italic text
<B> </B> For Bold text
<U> </U> For Underlined text
<STRONG> STRONG </STRONG> For Bold text
<EM> Emphasis </EM> Browsers usually display this as
italics.

11

Cont’d
Formatting tags
12
<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

Cont’d
Formatting tags –
 Bold, Italic and other Character Formatting Elements
<FONT SIZE=“+2”> Two sizes bigger</FONT>
 Normal text size is 3
 Color = “#RRGGBB” COLOR attribute of FONT element
E.g., <FONT COLOR=“#RRGGBB”>this text has color</FONT>
 Font face – use face attribute
<FONT face=“Times New Roman”> Times New Roman </FONT>
 Alignment – some elements have attributes for alignment (ALIGN)
Three alignment values are : LEFT, RIGHT, CENTER.
<CENTER></CENTER> will center elements
13

Cont’d
Formatting tags – special characters & symbols
 recognized in HTML as they begin with an ampersand and
end with a semi-colon
E.g. &value; value, either be an entity name or a standard
ASCII character number
14
Special Character Entity Name Special Character Entity Name
Ampersand & & Greater-than sign > >
Asterisk &lowast; ∗∗ Less-than sign < <
Cent sign ¢ ¢ Non-breaking space  
Copyright © © Quotation mark " "
Fraction one qtr ¼ ¼ Registration mark ® ®
Fraction one half ½ ½ Trademark sign ™ ™

Cont’d
£
£
British Pound
€
€
Euro
"
"
Quotation Mark
¥
¥
Japanese Yen
—
—
Em Dash
 
Non-breaking Space
&
&
Ampersand
>
>
Greater Than
<
<
Less Than
™
™
Trademark Sign
®
®
Registered Trademark Sign
©
©
Copyright Sign
Symbol
HTML Entity
Symbol Name
15

Cont’d
²
²
Superscript two - squared
µ
µ
Micro Sign
"
¾
Fraction three quarters
°
°
Degree Sign
—
¢
Cent Sign
¬
Not Sign
§
§
Selection Sign
'
'
Single Quote
%
%
Percent Sign
$
$
Dollar Sign
#
#
Number Sign
©
!
Exclamation Point
Symbol
HTML Entity
Symbol Name
¬
16

Cont’d
<p>[>>  Welcome
  <<]</p>
<p>►I have the following cards:
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2015 by CS & IT</p>
<p>AMU, AMiT ™ ™ ! ¢ </p>
specialchars.html
17
Example

Cont’d
Separators tags – these tags separate words, or
sentences on a page.
<P> Start printing a new Paragraph
<BR> Break; breaks up text onto two lines
<HR> Make a Horizontal Rule (or line)
Example: <P> This is the beginning of the second paragraph
on my Personal Web page.
19

Cont’d
Types of Lists – are composed of one or more <LI>
(List Item) elements. There are three main types of lists.
 Ordered List (OL) – list of numbered items.
 specify a starting number for an ordered list.
<OL TYPE=“1” START=“3”>
20
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

Cont’d
Types of Lists
 Unordered List (UL) – list of unnumbered items (bullet)
 Browsers will usually change list mark in nested lists.
 Three bullet types: disc(default), circle, square.
<UL TYPE = “square”>
 Definition List (DL) – each item in a DL consists of one or
more Definition Terms (DT elements), followed by one or more
Definition Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>
21
HTML
Hyper Text Markup Language
DOG
A human’s best friend!

Cont’d
Types of Lists
 Lists:
<UL> </UL> Make an Unordered List
<OL> </OL> Make an Ordered List
<DL> </DL> Make a Definition List
<LI> Used for each List Item
22

Cont’d
Example Tags:
<OL> Here is a list of my hobbies:
<LI> swimming
<LI> hiking
<LI> fishing
</OL>
Example List: Here is a list of my hobbies:
1. swimming
2. hiking
3. fishing
23

Cont’d
Links
 Hyperlinks are what the Web is all about. Before you
create Hyperlinks, you need to understand URLs.
 A URL (Uniform Resource Locator) is a Web address.
Just as you can have two forms of E-mail address, a
long and a short one, you can have two forms of a
URL address.
 Absolute URL - complete address. Use this if the link refers
to a page or file on another server (computer).
 Relative URL - shortened address, without server name. Use
this if the link is to a page or file on the same server
(computer).
Example Absolute URL:
http://home.netscape.com/training/chapter1.html
Example Relative URL:
24

Cont’d
Types of Links – there are two main types of
hyperlinks
 Link from the current document to beginning of another
document.
 Link from the current document to a specific spot (anchor)
in another document or in the same document.
25

Cont’d
Link Tags
 <A> </A> Create Link to another
document
HREF = URL URL of document to be linked
text Text to be clicked, usually in blue
Example Tag with Absolute URL:
<A
HREF=“http://www.ohiou.edu/mainmenu.html”>Menu</A>
Example Tag with Relative URL:
<A HREF="mainmenu.html">Menu</A>
26

Cont’d
Link Tags to an Anchor Spot
 To create a link to a specific spot in a 2nd document, there must
be an anchor name in the 2nd document. Then you create a link
in the 1st document that points to the anchor in the 2nd
document.
<A> </A> Create link to a document
id= name Name of the anchor spot
Example Creating an Anchor Name:
<A id=“Start_Place”>Table of Contents</A>
Example Referencing an Anchor:
<A HREF="#Starting_Place”>Go To the Contents</A> in the
same page
<A HREF=“page path#Starting_Place”>Go To the
27

Cont’d
Link to a document on the
 same server in the same directory:
 same server in the parent directory:
 same server in the subdirectory stuff:
Link to an external Web site:
 Always use a full URL, including "http://"
 Using target="_blank" attribute opens link in new
window
Link to an e-mail address:
28
<a href="form.html">Fill Our Form</a>
<a href="../parent.html">Parent</a>
<a href="stuff/cat.html">Catalog</a>
<a href="http://www.devbg.org" target="_blank">BASD</a>
<a href="mailto:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>

Cont’d
Link to a document called apply-now.html
 On the same server, in same directory
 Using an image as a link button:
Link to another location in the same document:
Link to a specific location in another document:
29
<a href="apply-now.html"><img src="apply-now-button.jpg" /></a>
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>
<a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a>

Cont’d
HTML Images
 HTML images are defined with the <img> tag.
<img src=“imagefilename.extenssion” alt=“something
to be displayed in the absence of the image” width=“”
height=“”>
 Image attributes:
Example: 30
<img src="/img/basd-logo.png">
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
<img src="./php.png" alt="PHP Logo" />

HTML Elements
 HTML element is everything from the start tag to end
tag:
 Start tag is often called the opening tag <element>
 End tag is often called the closing tag </element>
 Element content is everything between start and end
tag
 Some HTML elements have empty content (element
without a content)
<br> defines a new line (line break)
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Eg. <p>this is aparagraph</p>
<a href=“”> this is alink</a>
 Most HTML elements can be nested (can contain other
HTML elements). 31

HTML Attributes
Attributes provide additional information about
HTML elements.
HTML elements can have attributes
 Attributes come in name/value pairs like:
name="value“
E.g <a href=“compg2.html”> link text</a>
the link address is specified in the href attribute
Always cote attribute values
E.g href=“compg2.html”
Attribute names and attribute values are case-
insensitive.
32

Testing Your Web Page
 Test the page under various browsers.
 Test the page under various platforms and with
various screen resolutions.
 Also remember to test all the links on the page.
33

First HTML Page
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Exercise One</h1>
<p>This is some text will
appear on web page.</p>
</body>
</html>
firstpage.html
34

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

Cont’d
36
1. WHITE
2. BLACK
3. RED
4. GREEN
5. BLUE
6. MAGENTA
7. CYAN
8. YELLOW
9. AQUAMARINE
10. BAKER’S CHOCOLATE
11. VIOLET
12. BRASS
13. COPPER
14. PINK
15. ORANGE
1. #FFFFFF
2. #000000
3. #FF0000
4. #00FF00
5. #0000FF
6. #FF00FF
7. #00FFFF
8. #FFFF00
9. #70DB93
10. #5C3317
11. #9F5F9F
12. #B5A642
13. #B87333
14. #FF6EC7
15. #FF7F00

Cont’d
In Body element
 To set document’s background color, edit <BODY>
element by adding BGCOLOR attribute
<BODY BGCOLOR=“#FFFFFF”></BODY>
for white background color
 TEXT attribute is used to control the color of all the
normal text in the document.
 Default color for text is black
 The TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”></BODY>
The document’s page color is white and text would be
red.
37

Cont’d
 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= red.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”
LINK=“#0000FF” VLINK=“#FF00FF” ALINK=“FFFF00”>
</BODY>
 An image can be as document’s background
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>
 Color for specific text
<Font color=white>
38

HTML Comments
 Comment
 a piece of code which is ignored by any web browser.
 a good practice to add comments into your HTML code,
especially in complex documents, to indicate sections of
a document, and any other notes to anyone looking at
code
 help you and others understand your code and increases
code readability
 HTML comments are placed in between  tag.
 Eg.,
<head> 
<title>This is document title</title>
< !-- This is not a valid comment --> b/c there is a
space between the left angle bracket and the
39

HTML Forms
 Forms are required when you want to collect some
data from the site visitor
 Eg., during user registration you would like to collect
information such as name, email address, credit card,
etc.
 Main application: to provide user input for
 programs and databases located on a web server
 local (client-side) scripts associated with the form
 Server-based programs may return data to the client as
a web page
 Client-side scripts can read input data
 To validate the data, prior to sending to server
 To use in local processing which may output web page
40

Cont’d
41
Attribute Description
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently
used are GET and POST methods.
target Specify the target window or frame where the result of the
script will be displayed. It takes values like _blank, _self,
_parent etc.
enctype You can use the enctype attribute to specify how the
browser encodes the data before it sends it to the server.
Possible values are:
 application/x-www-form-urlencoded - This is the
standard method most forms use in simple scenarios.
 mutlipart/form-data - This is used when you want to
upload binary data in the form of files like image, word
file etc.

HTML Form Controls
There are different types of form controls that
you can use to collect data using HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
42

Cont’d
i. Text Input Controls
 There are three types of text input used on forms:
 Single-line text input controls - used for items that
require only one line of user input, such as search
boxes or names.
 created using HTML <input> tag.
 Password input controls - is also a single-line text
input but it masks character as soon as a user enters
it.
 created using HTML <input> tag.
 Multi-line text input controls - used when the user is
required to give details that may be longer than a
single sentence.
 created using HTML <textarea> tag.
43

Cont’d
 Single-line text input controls
 Example
<form >
First name: <input type="text“ name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
44

Cont’d
 Single-line text input controls
 Attributes – for <input> tag for creating text field.
CoSc 3101 – Internet Programming AMU - CSIT
45
type Indicates the type of input control and for text input
control it will be set to text.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value Used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in
terms of characters.
maxlength Allows to specify the maximum number of characters a
user can enter into the text box.

Cont’d
 Password input controls
 Example
<form >
User ID : <input type="text" name="user_id" /><br>
Password: <input type="password" name="password"
/>
</form>
46

Cont’d
 Password input controls
 Attributes – for <input> tag for creating password field.
47
type Indicates the type of input control and for password
input control it will be set to password.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value Used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in
terms of characters.
maxlength Allows to specify the maximum number of characters a
user can enter into the text box.

Cont’d
 Multi-line text input controls
<form>
Description : <br /><textarea rows="5" cols="50"
name="description">
Enter description here...
</textarea>
</form>
48

Cont’d
 Multi-line text input controls
 Attributes – for <textarea> tag
49
name Used to give a name to the control which
is sent to the server to be recognized and
get the value.
rows Indicates the number of rows of text area
box
cols Indicates the number of columns of text
area box

Cont’d
 File
<type = “file”>
 provides a file dialogue box to specify a file that
is sent to the server
 Hidden
<type = “hidden”>
 similar to text input, but the value attribute is
used to specify data that is to be sent to the
server. Nothing appears on the screen.
 The data might be set by a server program to
keep track of the details of a particular
transaction.
50

Cont’d
ii. Checkbox Control
 Checkboxes are used when more than one option is
required to be selected.
 created using HTML <input> tag but type attribute is set to
checkbox.
Example
<form>
<input type="checkbox" name="maths“ value="on">
Maths
<input type="checkbox" name="physics" value="on">
Physics
</form>
51

Cont’d
ii. Checkbox Control
 Attributes for checkbox
52
type Indicates the type of input control and for
checkbox input control it will be set to
checkbox.
name Used to give a name to the control which is
sent to the server to be recognized and get
the value.
value The value that will be used if the checkbox is
selected.
checked Set to checked if you want to select it by

Cont’d
iii. Radio Button Control
 Radio buttons are used when out of many options, just
one option is required to be selected.
 created using HTML <input> tag but type attribute is set to
radio.
Example
<form>
<input type=“radio" name=“subject“ value=“maths">
Maths
<input type=“radio" name=“subject" value=“physics">
Physics
</form>
53

Cont’d
iii. Radio Button Control
 Attributes for radio button
54
type Indicates the type of input control and for
checkbox input control it will be set to radio.
name Used to give a name to the control which is
sent to the server to be recognized and get
the value.
value The value that will be used if the checkbox is
selected.
checked Set to checked if you want to select it by
default.

Cont’d
iv. Select Box Control – also called drop down box
 provides option to list down various options in the
form of drop down list, from where a user can select
one or more options.
Example
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
55

Cont’d
 Attributes of <select> tag
 Attributes of <option> tag
56
name Used to give a name to the control which is sent to
the server to be recognized and get the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select
multiple items from the menu.
value The value that will be used if an option in the select
box is selected.
selected Specifies that this option should be the initially
selected value when the page loads.
label An alternative way of labeling options

Cont’d
v. The Submit & Reset Button
 Defines a button for submitting a form to a form-
handler
<input type="submit">
<input type=“reset"> – clears all data entered so far
 form-handler – server page with script for processing input
data
 The form-handler is specified in the form's action attribute:
 To be submitted correctly, each input field must have name
attribute.
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
57

Cont’d
v. The Submit Button
 Action attribute – defines the action to be performed
when the form is submitted
 The common way to submit a form to a server, is by using a
submit button.
 In the example above, server-side script (PHP program) is
specified to handle the submitted form (process the form
data):
<form action="action_page.php">
 If action attribute is omitted, the action is set to current
58

Cont’d
 Method attribute – specifies the way that form data is
sent to the server program
 specifies the HTTP method (GET or POST) to be used
when submitting the forms:
 GET appends the data to the URL
 POST sends the data separately
<form action="action_page.php" method="get">
or
<form action="action_page.php" method="post">
59

Cont’d
When to use GET? – default method
 If the form submission is passive (like a search engine
query), and without sensitive information.
 best suited to short amounts of data. Size limitations are
are set in your browser.
 form data will be visible in the page address:
action_page.php?firstname=Mickey&lastname=M
ouse
When to use POST?
 If the form is updating data, or includes sensitive
information (password).
 offers better security because the submitted data is not
visible in the page address. 60

Cont’d
GET vs POST
61
1.Post method is more secure.
2.Post method sent data to
http response (body).
3.Post method sent more
data.
4.Post method is not good for
search but it is good for
hidden data.
1.Get method is less secure.
2.Get method sent data to
page address.
3.Get method sent less data.
4.Get method is good for
search content in order to
let users to used it again.

Cont’d
vi. Button
 The name attribute uniquely identifies a button
 The value attribute gives a label to the button
 Actions can be associated with buttons- more later
62
Do you want to receive any further
information:<br>
<input type="button" name="yes" value=" Yes ">

Cont’d
Form Attributes
63
accept-
charset
Specifies charset used in submitted form (default: the page
charset).
action
Specifies an address (url) where to submit the form (default:
the submitting page).
autocomplet
e
Specifies if the browser should autocomplete the form
(default: on).
enctype
Specifies encoding of the submitted data (default: is url-
encoded).
method
Specifies HTTP method used when submitting form (default:
GET).
name Specifies a name used to identify the form
novalidate Specifies that the browser should not validate the form.

Cont’d
Exercise
 Create an HTML page which displays student
registration screen with
– a name field
– an ID field
– a department field {select box with values:
1. Computer Science
2. Information Technology
– a semester field {select box with values:
1. I
2. II
– an academic year field {select box with values: 1998-2000, 2000
default}
– a button to submit the form
– a button to reset the form

HTML Table
HTML table – an element comprised of table
rows and columns: these specify cells of the
table
Cells can contain text, images, links, other
tables...
Purpose: to house other HTML elements and
arrange them in a tabular fashion -- row by row,
column by column.
Table element consists of three different HTML
tags including
 <table> tag,
 <tr> (table rows), and
65

Cont’d
 Table attributes
 align alignment relative to the page
 width in pixels or percentage of page width
 border - width of border (pixels)
 cellspacing – separation between cells (pixels)
 cellpadding - space around data inside cell (pixels)
 bgcolor - background colour (inside cells)
66
Furthermore
• The <caption> element puts a title above the
table

Cont’d
Table rows and table columns
Table can contain an infinite number of table
rows
Each table row is essentially a table element
itself, with an opening and closing tag (<tr>
</tr>)
Table columns are also considered child
elements of HTML tables, and like table rows, an
HTML table may contain an infinite number of
table data cells (<td> <tr>)
67

Cont’d
 Table row attributes
align=“alignment” {left, center, right}
bgcolor=“color”
height=“height”
 Table data/heading attributes
align=“alignment”
width=“width”
bgcolor=“color”
 Unless otherwise specified, <tr> and <td> inherit
attributes of <table> whenever it applies.
68

Cont’d
<table border = “1”>
<tr title = “You are looking at Row 1”
bgcolor=“silver”>
<td> Row 1 Cell 1</td>
<td> Row 1 Cell 2 </td>
</tr>
<tr title = “You are looking at Row 2”
bgcolor=“aqua”>
<td> Row 2 Cell 1</td>
<td> Row 2 Cell 2 </td>
</tr>
</table> 69

Cont’d
70
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Alemayehu Bekele</td>
<td>Internet Programming</td>
<td>3</td>
</tr>
<tr>
<td>Helen Getahun</td>
<td>computer Network</td>
<td>2</td>
</tr>
<tr>
</table>

Cont’d
Tables: spanning multiple rows and cells
 Use rowspan to span multiple rows merging together
table rows and colspan to span across multiple
columns.
<table border = “1”>
<tr>
<td> <b> Column 1</b></td>
<td> <b> Column 2</b></td>
</tr>
<tr>
<td colspan=“2”> Row 2 Cell 1</td>
</tr>
</table> 71

Cont’d
72
<table border="1">
<tr>
<th colspan=“2”>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Alemayehu</td>
<td>Bekele</td>
<td rowspan=“2”>Internet
Programming</td>
<td>3</td>
</tr>
<tr>
<td>Helen</td>
<td>Getahun</td>
<td>2</td>
</tr>
<tr>
</table>

Cont’d
Tables: align and width attributes
 Align – determines position
of text within a cell
 Width – determines width
of row relative to table
73
<table border="1" align="center">
<tr>
<th colspan="2"
width="60%">Name</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
<tr>
<td>Helen</td>
<td>Getahun</td>
<td>IP</td>
<td align="center">2</td>
</tr>
<!– etc -->

HTML Embedded Multimedia
 Sometimes you need to add music or video into your
web page using HTML tag called <embed>
 This tag causes the browser itself to include controls
for the multimedia automatically provided browser
supports <embed> tag and given media type.
 You can also include a <noembed> tag for the
browsers which don't recognize the <embed> tag
 Example – to play an embedded midi file:
<embed src="/html/yourfile.mid" width="100%"
height="60" >
<noembed><img src="yourimage.gif" alt="Alternative
Media" ></noembed>
</embed> 74

Cont’d
 The <embedded> Tag Attributes for radio button
75
Align Determines how to align the object. It can be set
to either center, left or right.
autostart This boolean attribute indicates if the media
should start automatically. You can set it either
true or 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)
playcount Specifies the number of times to play the sound.
This is alternate option for loop if you are using
IE.
hidden Specifies if the multimedia object should be

Cont’d
 The <embedded> Tag Attributes for radio button
76
width Width of the object in pixels
height Height of the object in pixels
name A name used to reference the object.
src URL of the object to be embedded.
volume Controls volume of the sound. Can be from 0
(off) to 100 (full volume).

Cont’d
Supported Video Types
various media types like Flash movies (.swf), AVI's
(.avi), and MOV's (.mov) file types inside embed tag.
 .swf files - created by Macromedia's Flash program.
 .wmv files - are Microsoft's Window's Media Video file
types.
 .mov files - are Apple's Quick Time Movie format.
 .mpeg files - created by the Moving Pictures Expert
Group.
<body>
<embed src="/html/yourfile.swf" width="200" height="200"
>
<noembed><img src="yourimage.gif" alt="Alternative
Media" ></noembed>
77

Cont’d
Background Audio
use HTML <bgsound> tag to play a soundtrack in
the background of your webpage
 this tag is supported by Internet Explorer only and most
of the other browsers ignore
 background sound file also will replay whenever the user
refreshes the browser.
 having only two attributes loop and src.
<body>
<bgsound src="/html/yourfile.mid">
<noembed><img src="yourimage.gif"
></noembed>
</bgsound>
78
 produce blank screen
 does not display any component and remains
hidden

Cont’d
Attributes
HTML <bgsound> tag also supports following
attributes:
Browser Support
79
Attribute Value Description
loop number Lets you replay a background
soundtrack a certain number of times.
src URL Specifies the path of the sound file.
Chrome Firefox IE Opera Safari Android
No No Yes No No No

Cont’d
HTML Audio – Browser Support
Currently, there are 3 supported file formats for the
<audio> element: MP3, Wav, and Ogg:
80
Browser Mp3 Wav Ogg
Internet Explorer YES No No
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES No
Opera YES YES YES

Frames & Framesets
 Frames are a way of dividing the browser window
into several independent windows where each
section can load a separate HTML document
 Each frame can be independently loaded a
different url.
 Frameset - collection of frames in the browser
window
 The window is divided into frames in a similar way
the tables are organized: into rows and columns.
 Has advantages and drawbacks
 Advantages
 Improved performance (minimal page refresh)
 Flexibility 81

Cont’d
 Drawbacks
 Fairly complex (for developer)
 May confuse users (if not properly used)
 Some (old) browsers may not support frames
 URL masking, when printing and bookmarking
 Frames are found in Framesets
 Framesets define the ‘layout’ of the frames it
contains
 Framesets can be nested in one another to provide
a more complex layout.
82

Cont’d
 Tag format:
 Single frameset
<frameset>
<frame>
<frame>
…
</frameset>
83
 Nested frameset
<frameset>
<frame>
<frameset>
<frame>
<frame>
…
</frameset>
<frame>
…
</frameset>

Cont’d
Attributes
Frameset
 rows = “row dimensions” { ex. rows=“10%, 90%” }
 cols = “column dimensions” { ex. cols=“20%, *, 30%
}
 border = “value”
 bordercolor = “color”
 frameborder = “value” { 0, 1, no, yes }
 framespacing = “value”
84

Cont’d
Attributes
Frame
 name = “frame_name”
 src = “url” { url can be local or external }
 noresize [= “noresize”]
 scrolling = “value” { auto, yes, no }
 allowtransparency = “value” { in % }
 frameborder = “value” { 0, 1, yes, no }
 bordercolor = “color”
85

Cont’d
Example 1 index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” noresize scrolling=“no”>
<frame name = “viewer” src=“http://www.google.com” noresize>
</frameset>
</html>
nav.html
<html><body>
<a href=“http://www.google.com” target=“viewer”>google</a><br>
<a href=“http://www.yahoo.com” target=“viewer”>yahoo</a><br>
<a href=“http://www.altavista.com” target=“viewer”>altavista</a><br>
<a href=“http://www.msn.com” target=“viewer”>msn</a><br>
</body></html>
86

Cont’d
Example 1 index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” scrolling=“no”>
<frameset rows = “20%, *”>
<frame src=“title.html” noresize>
<frame name = “viewer” src=“http://www.google.com” noresize>
</frameset>
</frameset>
</html>
title.html
<html><body>
<h1>Welcome to My Bookmarks !</h1>
</body></html>
87

Cont’d
Example 2 test.html
<html>
<head><title>HTML Target Frames</title></head>
<frameset cols="200, *">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
88

Cont’d
Example 2 main.html
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed
here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
menu.html
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a><br /><br />
<a href="https://mail.google.com/" target="main_page">G-Mail</a><br /><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
89

Cont’d
 target attribute can also take one of the ff values
90
Option Description
_self Loads the page into the current frame.
_blank Loads a page into a new browser
window.
_parent Loads the page into the parent
window, which in the case of a single
frameset, is the main browser window.
_top Loads the page into the browser
window, replacing any current frames.
targetfram Loads the page into a named

Cont’d
Inline frames (iframe)
 also called floating frames (webpage within
webpage)
 Like frames
 But can occur anywhere in the <body> tag of an
html document
 Unlike frames which should only occur in the
<frameset> tag
 <iframe> tag defines a rectangular region within
the document in which the browser can display a
separate document
Tag format:
91

Cont’d
Inline frames (iframe) – attributes
Attributes
 src = “url”
 name = “name”
 height = “value”
 width = “value”
 scrolling = “value” { auto, yes, no }
 noresize [= “noresize”]
 align = “alignment” { left, right, middle, top,
bottom }
 frameborder – whether or not the borders of that
frame are shown = {1(yes) or 0(no)}
92

Cont’d
Example
<html>
<head>
<title>iFrame sample</title>
</head>
<body>
Below is the google site <br>
<iframe height="600px" width="600px"
src="http://www.google.com"
scrolling="auto">
</iframe>
</body>
</html> 93

Chapter 2 Final.pptx

More Related Content

Similar to Chapter 2 Final.pptx

Recently uploaded

Chapter 2 Final.pptx

Editor's Notes