Scribd
Upload
39 views75 pages

Chapter 2 HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, and other elements. The basic structure of an HTML document includes <html>, <head>, and <body> tags. The <head> contains the <title> tag, while the <body> holds the visible page content. HTML offers various tags for structuring content, including <h1>-<h6> headings, <p> paragraphs, and different list types like <ul> unordered and <ol> ordered lists. Attributes provide additional information about elements.

Uploaded by

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

Chapter 2 HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, and other elements. The basic structure of an HTML document includes <html>, <head>, and <body> tags. The <head> contains the <title> tag, while the <body> holds the visible page content. HTML offers various tags for structuring content, including <h1>-<h6> headings, <p> paragraphs, and different list types like <ul> unordered and <ol> ordered lists. Attributes provide additional information about elements.

Uploaded by

elias ferhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 75

Chapter-two

Web Page development using HTML

1
 HTML

2
HTML
What is HTML?
HTML stands for Hypertext Markup Language.
HTML is a language for describing web pages
 A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

3
HTML markup tags are usually called HTML tags
HTM L Tags

HTML tags normally come in pairs like <b> and </b>


The first tag in a pair is the start tag, the second tag is
the end tag
The end tag is written like the start tag, with a
forward slash before the tag name
Start and end tags are also called opening tags and
closing tags

<tagname>content</tagname >

4
The structure of WEB Page
The basic structure for all HTML documents is simple
and should include the following minimum elements
or tags:
 <html>-This is the main container for HTML pages.
 <head>-This is the container for page header
information.
 <title>-The is used for the title of the page .
 <body>-This is a container of the main body of the
page.

5
Main HTML Elements
1. DOCTYPE
2. HTML
3. HEAD
- TITLE element required
- Optional elements:
• BASE
• META
• BGSOUND
•SCRIPT, NOSCRIPT
• STYLE
• LINK
4.Body
5.Element
6
The Basic Web Page structure

<html> Head section

<head>
<title> My page </title>
Body section
</head>
<body>
Hello this is my page
</body>
</html>

7
The <HTML> Element
The HTML element is considered the root and
container element for the whole HTML document.
 The purpose is to encapsulate all the HTML code and
describe the HTML document to the web browser.
Each HTML document should have one starting
<html> tag and another closing(ending) </html>
tag.
Example 1: HTML Code:
<html>…………….</html>

8
The <HEAD> Element
The HEAD tag marks the beginning of the document
head element.

its contains the title of the pages and other


parameters that the browser will use.

Thus, each <head> element should contain


A. a <title> element indicating the title of the document,
and may also contain any combination of the following
elements, in any order: •

9
Conti….
Example 2: Codes for HEAD element
<head>
<meta name="Keywords" content="NOUN,Web
Pages" />
<meta name="description" content="HTMLBasic
Tags" />
<base href="http://www.nou.edu.ng " /> <link
rel="stylesheet" type="text/css" href="noun.css" />
<script type="text/javascript">
</script>
</head>

10
Conti….
A. The <style> tag. used for declaring or including
Cascading Style Sheets(CSS) codes inside your HTML
document.
B. The <script> tag This tag is used to declare
JAVAScript or VBScript inside the document.
C. The <meta> tag contain information about the
document such as keywords and a description, which
are particularly helpful for search applications.

11
The <title> Element
The <title> tag is usually placed within the <head> element
to title your page.

It must be written between the opening and closing


<title>………….</title> tags and it will be displayed in the
title bar of the WEB browser.
Example 3: Code for Title element
<html>
<head>
<title>WOLDIA UNIVERSITY</title>
</head>
</html>
12
The <Body> Element
The <body> element appears after the <head>
element.

The purpose of the <body> element is to contain the


text and HTML element that will display in the
browser window.

A <body> element may contain anything from a


couple of paragraphs, links, images under a heading to
more complicated layouts containing forms and
tables.

13
Conti…
Example 4: Codes for Body Element
<html>
<head>
<title>woldia University Website!</title>
</head>
<body>
Welcome to the official Website of the woldia University.
</body>
</html>

14
How to Create and Run HTML codes
 Creating an HTML document is easy.
To begin coding HTML you need a standard text editor.
Example:Note pad ,Note pad ++ and Dreamweaver are the
best editors.
Steps to use note pad application.
 Steps 1. start All program Accessories notepad
Steps 2.Launch Notepad application on your computer
Steps 3. Type in your HTML codes
Steps 4. Save the document onto a location in your
computer drive with a name and the extension “html” (for
example IP.html or htm)
Steps 5. Click on the filename created.

15
HTML Attributes
used to define the characteristics of an HTML element
placed inside the element's opening tag.
All attributes are made up of two parts: a name and a value:
Core Attributes
The four core attributes that can be used on the majority of
HTML elements are:
Id: uniquely identify any element within an HTML page
Title: gives a suggested title for the element
Class: used to associate an element with a style sheet, and
specifies the class of element.
Style: allows you to specify CSS rules within the element

16
Measurement units
Code Unit Description
 
px Pixel Pixl units are relative to the monitor
resolution.
In Inch Standard unit of measurement in the U.S.
Em Em A relative unit of measurement that
traditionally equals the width of the capital
letter M in the current font.

Mm millimet Metric measurement


er
cm Centime Metric measurement.
ters

17
HTML Lists
HTML has three basic forms of lists:
 Lists may contain:

I. <ul> - An unordered list. list items using plain bullets.

II. <ol> - An ordered list. This will use different schemes of


numbers to list your items.
III. <dl> - A definition list. This arranges your items in the same
way as they are arranged in a dictionary.

18
HTML Unordered Lists
An unordered list is a collection of related items that have no
special order or sequence.

created by using HTML <ul> tag. Each item in the list is marked


with a bullet.
use type attribute for <ul> tag to specify the type of bullet you like.
By default it is a disc.
The Following are the possible options:

 square
• disc
o circle
19
HTML Ordered Lists
If you are required to put your items in a numbered list then
ordered list will be used.
created by using <ol> tag.
It is numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.
The <OL> element has three basic attributes, These are
COMPACT, START, and TYPE.
Example of type attribute
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
20
1. COMPACT attribute list
The COMPACT attribute requires no value.
 It simply suggests that the browser attempt to compact
the list, to use less space onscreen.
In reality, most browsers ignore the COMPACT
attribute.
2. The TYPE attribute of <OL> can be set to
 “a” for lowercase letters, “A” for uppercase letters,
“i” for lowercase roman numerals, “I” for uppercase
Roman numerals, or 1 for regular numerals.
The numeral 1 is the default value.

21
Conti…
 Remember that the TYPE attribute within the <OL> element sets the
numbering scheme for the whole list, unless it is overridden by a
TYPE value in an <LI> element.

 Each <LI> element may have a local TYPE attribute set to a, A, i, I,


or 1.
 Once an <LI> element is set with a new type, it overrides the numbering
style for the rest of the list..

 unless another <LI> sets the TYPE attribute.

22
3. Start attribute Lists
Example of type and start attribute
<ol type="1" start=“4” >
<li type="1" > - Default-Case Numerals.</li>
< li type="I“ start =“IV”> - Upper-Case Numerals.</li>
< li type="i“ start=“iv” > - Lower-Case Numerals.</li>
< li type="a“ start =“f”> - Lower-Case Letters. .</li>
< li type="A" start =“F”> - Upper-Case Letters.</li>
</ol>

23
The start Attribute
You can use start attribute for <ol> tag to specify the
starting point of numbering you need.
The Following are the possible options:
<li type="1" start="4"> - Numerals starts with 4.
< li type="I" start="4"> - Numerals starts with IV.
< li type="i" start="4"> - Numerals starts with iv.
< li type="a" start="4"> - Letters starts with d.
< li type="A" start="4"> - Letters starts with D.

24
HTML Definition Lists
HTML and XHTML support a list style which is called definition
lists.
Definition lists are enclosed within <DL> and</DL> tags.
Each term being defined is indicated by a <DT> element, which is
derived from definition term.
Each definition itself is defined by <DD>.
Neither the <DT> nor the <DD> element requires a close tag,
The following is a basic example using <DL>,
Definition List makes use of the following three tags.
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list
25
HTML Text Formatting
Bold Text
Anything that appears within <b>...</b> element, is
displayed in bold
Italic Text
Anything that appears within <i>...</i> element is
displayed in italicized
Underlined Text
Anything that appears within <u>...</u> element, is
displayed with underline
Strike Text: Anything that appears thin  <strike>..
.</strike> element is displayed with strikethrough, which is
a thin line through the text

26
Cont..
Superscript txt:The content of a <sup>..</sup>  element is
written in superscript.
Subscript Text The content of a <sub>...</sub> element is
written in subscript.
Larger Text: The content of the <big>...</big> element is
displayed one font size larger than the rest of the text
surrounding it.
Smaller Text
The content of the <small>...</small> element is displayed one
font size smaller than the rest of the text surrounding it as
shown below:

27
HTML Fonts
you can use HTML <font> tag to add style, size, and
color to the text on your website.

The font tag has three attributes called size, color,


and face to customize your fonts.

You can change one or all of the font attributes


within one <font> tag.

28
HTML tables
Allow web authors to arrange data like text, images,
links, other tables, etc. into rows and columns of
cells.
 Tables are created using the <table> tag
<th>Table heading can be defined using  tag
<tr> table row tag is used to create table rows
 <td>  table data tag is used to create data cells.
border is an attribute of <table> tag and it is used to
put a border across all the cells.
 If you do not need a border then you can use
border="0".
29
Table attributes
cellspacing : defines the width of the border,
 cellpadding: represents the distance between cell borders
and the content within a cell.
 colspan :merge two or more columns into a single
column.
 rowspan :merge two or more rows.
bgcolor : set background color for whole table or just for
one cell.
background :set background image for whole table or just
for one cell.
 bordercolor : set border color

30
Cont..
 Height and Width :set a table width and height using width
and height attribute
 caption tag will serve as a title or explanation for the table and
it shows up at the top of the table.
The three elements for separating the head, body, and foot of a
table 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>

31
HTML frames
HTML frames are used to divide your browser window into
multiple sections where each section can load a separate HTML
document.
A collection of frames in the browser window is known as a
frameset
There are few drawbacks with using frames, so it's never
recommended to use frames in your webpages
Some smaller devices cannot cope with frames often because
their screen is not big enough to be divided up.
Sometimes your page will be displayed differently on different
computers due to different screen resolution.
The browser's back button might not work as the user hopes.
There are still few browsers that do not support frame technology.

32
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.
Example
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
</frameset>
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
33
The <frameset> Tag Attributes
cols specifies how many columns are contained in the frameset and the size
of each column.
 You can specify the width of each column in different ways:
Absolute values in pixels. -cols="100, 500,100".
A percentage of the browser window :cols="10%, 80%,10%".
wildcard symbol.:cols="10%, *,10%".
Rows: it is used to specify the rows in the frameset. For example to create
two horizontal frames, use rows="10%, 90%".
Border:This attribute specifies the width of the border of each frame in
pixels. For example border="5". A value of zero means no border.
Frameborder: This attribute specifies whether a three-dimensional border
should be displayed between frames.
The value is either 1 (yes) or 0 (no). For example frameborder="0" specifies no
border.
Framespacing: This attribute specifies the amount of space between frames
in a frameset. This can take any integer value. For example framespacing="10"
means there should be 10 pixels spacing between each frames.
34
The <frame> Tag Attributes
Src: used to give the file name that should be loaded in the
frame. Its value can be any URL. example,
src="/html/top_frame.htm" will load an HTML file available in
html directory.
Name: to give a name to a frame. It is used to indicate which
frame a document should be loaded into. This is especially
important when you want to create links in one frame that load
pages into an another frame, in which case the second frame
needs a name to identify itself as the target of the link.
Marginwidth:This attribute allows you to specify the width of
the space between the left and right of the frame's borders and
the frame's content. The value is given in pixels. For example
marginwidth="10".
35
Cont..
Marginheight: This attribute allows you to specify the
height of the space between the top and bottom of the
frame's borders and its contents.
The value is given in pixels. For example
marginheight="10".
Noresize: By default you can resize any frame by clicking
and dragging on the borders of a frame.
prevents a user from being able to resize the frame. For
example noresize="noresize".
Scrolling: controls the appearance of the scrollbars that
appear on the frame.
values can be either "yes", "no" or "auto". For example
scrolling="no" means it should not have scroll bars.
36
HTML Backgrounds
By default, your webpage background is white in color.
Two good ways to decorate your webpage background.
Html Background with Colors
Html Background with Images
The bgcolor attribute is used to control the background of
an HTML element, specifically page body and table
backgrounds
The background  attribute used to control the
background of an HTML element, specifically page body
and table backgrounds.
You can specify an image to set background of your HTML
page or table.

37
HTML Colors
Colors are very important to give a good look and feel
There are three different methods to set colors in your web
page:
Color names - You can specify color names directly
like green, blue or red.
Hex codes - A six-digit code representing the amount of
red, green, and blue that makes up the color.i.e.
#FF0000
Color decimal or percentage values - This value is
specified using the rgb( ) property ie. rgb(255,0,0)//red

38
HTML Form
Forms are required when you want to collect some data from
the site visitor.
take input from the site visitor and then post it to a back-end
application such as CGI, ASP Script or PHP script etc.
There are various form elements available like text fields,
textarea fields, drop-down menus, radio buttons, checkboxes,
etc.
The HTML <form> tag is used to create an HTML form and it
has following syntax:

39
Cont..
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc. </form>
Form Attributes
Most frequently used form attributes.

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.
40
HTML Form Controls
There are different types of form controls that you can use to
collect data using HTML form:
o Text Input Controls
o Checkboxes Controls
o Radio Box Controls

o Select Box Controls


o File Select boxes

o Hidden Controls
o Clickable Buttons

o Submit and Reset Button

41
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. they are created using
HTML <input> tag.
Password input controls - This is also a single-line text input
but it masks the character as soon as a user enters it. They are
also created using HTMl <input> tag.
Multi-line text input controls –used for  longer than a single
sentence. Multi-line input controls are created using
HTML <textarea> tag

42
Input tag Attributes
Attributes for <input> tag for creating text field
 Type: Indicates the type of input control and for text input
control it will be set to text /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.

43
Multiple-Line Text Input Controls
Multi-line input controls are created using HTML <textarea> tag
list of attributes for <textarea> tag.
Name: Used to give a name to the control
rows :the number of rows of text area box.
Cols:the number of columns of text area box
Checkbox Control
Checkboxes are used when more than one option is required to be
selected.
They are also created using HTML <input> tag but type attribute
is set to checkbox

44
Cont..
list of attributes for <checkbox> tag.
Type:Indicates the type of input control
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.

45
Radio Button Control
Radio buttons are used when out of many options, just one
option is required to be selected.
They are also created using HTML <input> tag but type
attribute is set to radio.
Attributes are similar with checkbox except the value of
type attribute
The name of radio button should be the same

46
Select Box Control
Also called drop down box which provides option to list down
various options in the form of drop down list, from where a user
can select one or more options.
Attributes
attributes of <select> tag:
Name: Used to give a name to the control
Size: used to present a scrolling list box.
Multiple:If set to "multiple" then allows a user to select multiple
items from the menu.

47
Cont..
Attributes of <option> tag
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

48
File Upload Box
allow a user to upload a file to your web site
also known as a file select box.
Created using the <input> element but type attribute is set
to file.
Name:Used to give a name to the control
Accept:Specifies the types of files that the server accepts.

49
Button Controls
You can create a clickable button using <input> tag by
setting its type attribute to button. The type attribute can
take the following values:
Submit: creates a button that automatically submits a form.
reset : creates a button that automatically resets form
controls to their initial values.
Button: This creates a button that is used to trigger a client-
side script when the user clicks that button.
Image:This creates a clickable button but we can use an
image as background of the button.

50
HTML Marquees
An HTML marquee is a scrolling piece of text displayed either
horizontally across or vertically down your webpage depending on
the settings.
created by using <marquee> tag
<marquee> tag may not be supported by various browsers so its
not recommended to use it.
The <marquee> Tag Attributes
Width: This specifies the width of the marquee. This can be a value
like 10 or 20% etc.
Height: This specifies the height of the marquee. This can be a value
like 10 or 20% etc.
Direction : This specifies the direction in which marquee should
scroll. This can be a value like up, down, left or right.
behavior :This specifies the type of scrolling of the marquee. This
can have a value like scroll, slide and alternate.
51
Cont..
Scrolldelay:This specifies how long to delay between each
jump. This will have a value like 10 etc.
Scrollamount: This specifies the speed of marquee text. This
can have a value like 10 etc.
Loop:This specifies how many times to loop. The default
value is INFINITE, which means that the marquee loops
endlessly.
bgcolor This specifies background color in terms of color
name or color hex value.
hspace This specifies horizontal space around the
marquee. This can be a value like 10 or 20% etc.
vspace This specifies vertical space around the marquee.
This can be a value like 10 or 20% etc.
52
The HTML Heading Tags
The HTML <meta> Tag is used to include either
external script file or to define internal script for the
HTML document
i.e.
<!-- Author information -->
<meta name="author" content="Tutorials Point">
 <!-- Page content type -->
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
 <!-- Page refreshing delay -->
<meta http-equiv="refresh" content="30">
53
Cont..
The HTML <link> Tag is used to specify
relationships between the current document and
external resource
i.e <link rel="stylesheet" type="text/css“
href= "/css/style.css">
The HTML <style> Tag is used to specify style
sheet for the current HTML document.
The HTML <script> Tag is used to include either
external script file or to define internal script for
the HTML document

54
HTML Embed Multimedia
The easiest way to add video or sound to your web site is
to include the special HTML tag called <embed>.
The <embed> Tag Attributes
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)

55
Cont..
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 shown
on the page. A false value means no and true values means
yes.
Width: Width of the object in pixels
Height: Height of the object in pixels
name A name used to reference the object.
srcURL of the object to be embedded.
Volume: Controls volume of the sound. Can be from 0 (off )
to 100 (full volume).

56
Example
<embed src="/html/yourfile.mid"
width="100%" height="60" >
<noembed>
<img src="yourimage.gif" alt="Alternative
Media" >
</noembed>
</embed>

57
Block Elements
Block elements appear on the screen as if they
have a line break before and after them.
For example the
<p>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<ul>, <ol>, <dl>,
<pre>, <hr />, <blockquote>, and <address>
They all start on their own new line, and anything
that follows them appears on its own new line.

58
Inline Elements
Inline elements, on the other hand, can appear
within sentences and do not have to appear on a
new line of their own.
 The <b>, <i>, <u>, <em>, <strong>, <sup>,
<sub>, <big>, <small>, <li>, <ins>, <del>,
<code>, <cite>,elements are all inline elements.

59
Creating Links
<a>
Defines an anchor within the document.
An anchor is used to link to another document.
 It can also serve to label a fragment within a
document (also called a named anchor), which is used
as a reference for linking to a specific point in an
HTML document.
Attributes
href=url: Specifies the URL of the target destination.
 name=text: Places a fragment identifier within an HTML
document.
60
Cont..
title=text :Specifies a title for the target document.
target=text : Specifies the name of the window or frame in
which the target document should be displayed.
tabindex=number: Specifies the position of the current element in the
tabbing order for the current document.
The value must be between 0 and 32767.
It is used for tabbing through the links on a page
Linking to a local files
<A HREF="filename.html">...</A>
Linking to section of a page
<A HREF="#fragment">...</A>
Linking the world: Internet sites
<A HREF="http://server/path/file.html">...</A>
61
THE
END!!! 62
CSS Classification
clear
You can control if an element allows floated elements to its
sides with the clear property
clear: value;
Values:
 none

 both
 left
 Right

63
cont..
None
This is the default setting, floated elements can appear on either
side of the element set to clear: none;
Both
Setting the value to both, causes no floated elements to appear
on either side of the element set to clear: both;
Left
Setting the value to left, causes no floated elements to appear to
the left side of the element set to clear: left;
Right
Setting the value to right, causes no floated elements to appear
to the right side of the element set to clear: right;

64
Cursor
You can control the style of cursor to be used in an element with
the cursor property
cursor: value;
Values:
auto

crosshair

default

help

move

pointer

text

url

wait
65
Display
You can control how an element is displayed with the display property
display: value;
Values:
 block

 inline

 list-item

 none

Block
Creates a line break before and after the element
Inline
No line break is created
List Item
Creates a line break before and after the element and adds a list item marker
None
Makes an element not display on the page
66
Float
The float property changes how text and or images within an
element are displayed
float: value;
Values:
 left
 right
 none

Left
The image/text is displayed to the left of the parent element
Right
The image/text is displayed to the right of the parent element
None
There is no change in the way the image/text is displayed
67
Overflow
You can control what an elements contents will do if it
overflows it boundaries with the overflow property
overflow: value;
Values:
auto
hidden

visible
scroll

68
Visibility
You can control if an element is visible or not with the visibility
property
visibility: value;
Values:
 hidden
 Visible

Z-Index
You can control the layer order of positioned elements with the z-
index property
z-index: value;
Values:
 auto
 number
The higher the number the higher the level.
Negative numbers are allowed 69
CSS Positioning
Position
changes how elements are positioned on your webpage.
position: value;
Values:
 static
 relative
 absolute
 fixed

 Static
by default the way an element will appear in the normal flow of your
(X)HTML file.

70
Cont..
Relative
Positioning an element relatively places the element in the normal
flow of your (X)HTML file and then offsets it by some amount
using the properties left, right, top and bottom.
This may cause the element to overlap other elements that are on
the page, which of course may be the effect that is required.
Absolute
Positioning an element absolutely, removes the element from the
normal flow of your (X)HTML file, and positions it to the top left
of it’s nearest parent element that has a position declared other
than static. If no parent element with a position other than static
exists then it will be positioned from the top left of the browser
window.

.
71
Cont..
Fixed
Positioning an element with the fixed value
the same as absolute except the parent element is
always the browser window.
 It makes no difference if the fixed element is nested
inside other positioned elements.
Furthermore, an element that is positioned with a
fixed value, will not scroll with the document. It will
remain in it’s position regardless of the scroll
position of the page.

.
72
XML
XML was designed to transport and store data.
HTML was designed to display data.
XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry data, not to display data
XML tags are not predefined. You must define your
own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation

73
XML Usage
XML can be used to exchange of information between
organizations and systems.
XML can be used for offloading and reloading of databases.
XML can be used to store and arrange data in a way that is
customizable for your needs.
Virtually any type of data can be expressed as an XML
document.

74
Thanks

75

You might also like