LOGO

Internet Programming

Lecture: Khim Rada

 Introduction to HTML

HTML (Hypertext Markup Language) is the

formatting language in which web pages
have been written from the start of the Web.
HTML tags describe how a web page should
look, but they don’t describe what kind of
contents it has.

LOGO
[email protected]
 1- Hypertext
Special instructions in HTML permit lines of
text to point (that is, link) to something else in
cyberspace. Such pointers are called
hyperlinks. Hyperlinks are the glue that holds
the World Wide Web together. In your Web
browser, hyperlinks usually appear in blue
and are underlined. When you click one, it
takes you somewhere else.

LOGO
[email protected]
Hypertext or not, a Web page is a text file,
which means you can create and edit a
Web page in any application that creates
plain text (such as Notepad or TextEdit).
Some software tools offer fancy options
and applications to help you create Web
pages, but they generate the same text
files that you create with plain-text editors.

LOGO
[email protected]
 2- Markup

Web browsers were created specifically for

the purpose of reading HTML instructions
(known as markup) and displaying the
resulting Web page. Markup lives in a text
file (with your content) to give orders to a
browser.

LOGO
[email protected]
For example, look at the page below. You
can see how the page is made up and how it
is formatted by examining its underlying
HTML.

LOGO
[email protected]
 LOGO
[email protected]
This page includes an image, a heading that
describes the page, several paragraphs
of text about one of your authors, and an
address block with links to a résumé and a
list of publications.

LOGO
[email protected]
 3- Website
A website, also written as Web site,[1] web
site, or simply site,[2] is a set of related Web
Pages containing content such as text,
images, video, audio, etc. A website is
hosted on at least one web server,
accessible via a network such as the Internet
or a private local area network through an
Internet address known as a Uniform
Resource Locator.
LOGO
[email protected]
All publicly accessible websites collectively
constitute the World Wide Web.

LOGO
[email protected]
 4- Webpages
Webpages are accessed and transported
with the Hypertext Transfer Protocol (HTTP),
which may optionally employ encryption
(HTTP Secure, HTTPS) to provide security
and privacy for the user of the webpage
content. The user's application, often a web
browser, renders the page content according
to its HTML markup instructions onto a
display terminal.
LOGO
[email protected]
 5- URL

The Web is made up of billions of resources,

each of them linkable. A resource’s exact
location is the key to linking to it. Without an
exact address (a Uniform Resource Locator,
or URL), you can’t use the Address bar in a
Web browser to visit a Web page directly.

LOGO
[email protected]
URLs are the standard addressing system
for Web resources. Each resource
(Web page, site, or individual file) has a
unique URL. URLs work a lot like your
postal address. See below, it identifies
the components of a URL.

LOGO
[email protected]
 Path
http://www.bun.com/developers/evengcentral/bios.html

Protocol Domain name

FileName

LOGO
[email protected]
 6- Browser

A browser is software that is used to access

the internet. A browser lets you visit websites
and do activities within them like login, view
multimedia, link from one site to another, visit
one page from another, print, send and
receive email, among many other activities.

LOGO
[email protected]
The most common browser software titles on
the market are: Microsoft Internet Explorer,
Mozilla Firefox, Apple Computer's Safari,
and Opera. Browser availability depends on
the operating system your computer is using
(for example: Microsoft Windows, Linux,
Ubuntu, Mac OS…

LOGO
[email protected]
 HTML and XHTML

1- What’s the difference between HTML

& XHTML?

HTML is Hypertext Markup Language, a

notation developed in the late 1980s and
early 1990s for describing Web pages.

LOGO
[email protected]
HTML is now enshrined in numerous
standard descriptions (specifications) from
the World Wide Web Consortium (W3C). The
last HTML specification was finalized in
1999.

LOGO
[email protected]
When you put an X in front of HTML to get
XHTML, you get a new, improved version of
HTML based on the eXtensible Markup
Language (XML). XML is designed to work
and behave well with computers, software,
and the Internet.

LOGO
[email protected]
The original formulation of HTML has some
irregularities that can cause heartburn for
software that reads HTML documents.
XHTML, on the other hand, uses an
extremely regular and predictable syntax
that’s easier for software to handle. XHTML
will replace HTML someday, but HTML
keeps on ticking.

LOGO
[email protected]
 2- Markup Concept
2.1- Elements

Elements are the building blocks of HTML.

You use them to describe every piece of text
on your page. Elements are made up of tags
and the content within those tags. There are
two main types of elements:

LOGO
[email protected]
- Elements with content made up of a tag
pair and whatever content sits
between the opening and closing tag in the
pair
 - Elements that insert something into the
page, using a single tag

LOGO
[email protected]
Tag pairs
Elements that describe content use a tag
pair to mark the beginning and the
end of the element. Start and end tag pairs
look like this:
<tag>...</tag>

LOGO
[email protected]
such as paragraphs, headings, tables, and
lists — always uses a tag pair:
The start tag (<tag>) tells the browser, “The
element begins here.”

The end tag (</tag>) tells the browser, “The

element ends here.”

LOGO
[email protected]
For example:

<p>
A Macintosh oriented monthly magazine. By
1989 he had contributed to such publications
as LAN Times, Network World, Mac World,
and LAN Magazine.
</p>
LOGO
[email protected]
 Single tags
Elements that insert something into the page
are called empty elements (because they
enclose no content) and use just a single
tag, like this: <tag />
Images and line breaks insert something into
the HTML file, so they use one tag.

LOGO
[email protected]
 2.2- Nesting

Many page structures combine nested

elements. Think of your nested elements
as suitcases that fit neatly inside one
another.
For example, a bulleted list uses two kinds of
elements:

LOGO
[email protected]
 The <ul> element specifies that the list is
unordered (bulleted).
 The <li> elements mark each item in the
list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
LOGO
[email protected]
 2.3- Attributes and Values

Attributes allow variety in how an element

describes content or works. Attributes let you
use elements differently depending on the
circumstances. For example, the <img />
element uses the src attribute to specify the
location of the image you want to include on
your page:

LOGO
[email protected]
<img src=”images/header.gif” alt=”header
graphic” width=”794” height=”160” />

You include attributes within the start tag of

the element you want them with — after the
element name but before the ending sign,
like this:
<tag attribute=”value” attribute=”value”>

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Working With Text

HTML documents consist of text, images,

multimedia files, links, and other by using
markup elements and attributes. You use
blocks of text to create such things as
headings, paragraphs, and lists. The first
step in creating a solid HTML document is
laying a firm foundation that establishes the
document’s structure.

LOGO
[email protected]
 1- Divisions
It’s normal for a web page to have natural
divisions according to the type of content
found in each area of the page. A few
common divisions or sections of a page
might include the navigation, the body copy,
the header, and the footer. The code used to
separate each section might look similar to
the following:

LOGO
[email protected]
<body>
<div id="header">
Header content goes here.
</div>
<div id="bodyCopy">
Body copy goes here.
</div>
<div id="footer">
Footer content goes here.
</div>
</body>
LOGO
[email protected]
 2- Paragraph

Paragraphs appear more often in Web pages

than any other kind of text block. The <p>
tag defines a paragraph. Using this tag
places a blank line above and below the text
of the paragraph. You must use a <p>
element to tell the browser to separate all
contained text up to the closing </p> as a
paragraph.

LOGO
[email protected]
<body>
<p>This is a paragraph. It’s a very simple
structure that you will use time and again in
your Web pages.</p>
<p>This is another paragraph. What could
be simpler to create?</p>
</body>

LOGO
[email protected]
 3- Heading

Heading tags are similar to the headings you

might use in a word processor like Microsoft
Word. They are also like headings in outlines
because they should only be used in the
proper order, from h1 down to h6.

LOGO
[email protected]
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>
LOGO
[email protected]
 LOGO
[email protected]
 4- Formatting Text

HTML allows for different types of formatting

tags to add emphasis. Most of the tags
available can be classified under one of two
styles:
● Logical Format
● Physical Format

LOGO
[email protected]
 4.1-Logical Format

Logical styles define how the affected text is

to be used on the page, not how it will be
displayed. This means the browser ultimately
decides how to display the text (see following
example), if you were writing the HTML for
the first sentence in this paragraph,

LOGO
[email protected]
you could use the dfn tag to tell the browser
the phrase “logical styles” should be
highlighted as a defined term.

<dfn>Logical styles</dfn> define how the

affected text will be used on the page.

LOGO
[email protected]
 LOGO
[email protected]
 4.2- Physical Format

Physical Styles Contrary to logical styles,

physical styles define how to display the
affected text. For the most part, these styles
display the same, regardless of the browser
type. Because they are more reliable with
regard to browser display, physical styles are
more frequently used than logical styles.

LOGO
[email protected]
 LOGO
[email protected]
 5- Break

The <br /> element is the HTML equivalent

of the manual line break that you enter after
paragraphs and other blocks of text when
you’re using a word-processing program.
When a browser sees a <br />, it ends the
line there and starts the next line.

LOGO
[email protected]
<body>
<h1>Shall I compare … to a summer’s day? </h1>
<p>
Shall I compare thee to a summer’s day? <br />
Thou art more lovely and more temperate. <br />
Rough winds do shake the darling buds of May,
<br />
</p>
</body>
LOGO
[email protected]
 6- Preformat

The preformatted text element (<pre>)

instructs browsers to keep all white space
intact as it displays your content (like the
following sample). Use the <pre> element in
place of the <p> element to make the
browser apply all your white space,

LOGO
[email protected]
<body>
<pre>This is a paragraph with a lot of
white space thrown in for fun
(and as a test of course).
</pre>
</body>

LOGO
[email protected]
 LOGO
[email protected]
Thanks

LOGO
[email protected]
 Creating Lists

Lists are everywhere , in schoolbooks, next

to the telephone, on bills, and in all sorts of
other documents. That’s why there’s a
special set of tags just for creating lists.
This lesson focuses on the three different
types of lists possible in HTML:

LOGO
[email protected]
 Numbered lists
 Bulleted lists
 Definition lists

LOGO
[email protected]
 1- Numbered lists

A numbered list consists of at least two

items, each prefaced by a number. Usually,
a person numbers a list when the order of
items is important. For example:

LOGO
[email protected]
<body>
<h1>Things to do today</h1>
<ol>
<li>Feed cat</li>
<li>Wash car</li>
<li>Grocery shopping</li>
</ol>
</body>
LOGO
[email protected]
 LOGO
[email protected]
The default type of ordered list uses Arabic
numbers, but you can use the type attribute
to change that. Example below identifies the
different types of ordered lists you can create
with the type attribute. To change the type of
ordered list, add the type attribute and its
value to the opening ol tag.

LOGO
[email protected]
<ol start=”5” type=”I”>
<li>Wash car</li>
<li>Feed cat</li>
<li>Grocery shopping</li>
</ol>

LOGO
[email protected]
 LOGO
[email protected]
 2- Bulleted lists

A bulleted list consists of one or more items

each prefaced by a bullet. You use this type
of list if the items’ order of presentation isn’t
necessary for understanding the information
presented.

LOGO
[email protected]
<body>
<h1>Things to do today</h1>
<ul>
<li>Feed cat</li>
<li>Wash car</li>
<li>Grocery shopping</li>
</ul>
</body>
LOGO
[email protected]
 LOGO
[email protected]
You can use the type attribute (deprecated)
with the <ul> element to specify what kind of
bullet you want the list to use.
disc: Solid circle bullets (the default)
square: Solid square bullets
circle: Hollow circle bullets

LOGO
[email protected]
The addition of the type attribute to the
bulleted-list markup just given
changes bullets from discs to squares, as
shown in example below.
<ul type=”square”>
<li>Feed cat</li>
<li>Wash car</li>
<li>Grocery shopping</li>
</ul> LOGO
[email protected]
 LOGO
[email protected]
 3- Definition Lists
Definition lists group terms and definitions
into a single list and require three different
elements to complete the list:

<dl>: Holds the list definitions.

 <dt>: Defines a term in the list.
 <dd>: Defines a definition for a term.

LOGO
[email protected]
The following definition list includes three
terms, one of which has two definitions:

LOGO
[email protected]
<body>
<h1>Markup Language Definitions</h1>
<dl>
<dt>SGML</dt>
<dd>The Standard Generalized Markup Language</dd>
<dt>HTML</dt>
<dd>The Hypertext Markup Language</dd>
<dd>The markup language you use to create Web
pages.</dd>
<dt>XML</dt>
<dd>The Extensible Markup Language</dd>
</dl>
</body>
LOGO
[email protected]
 LOGO
[email protected]
 4- Nesting Lists

You can combine any of the three kinds of

lists to create nested lists, such as a
multilevel table of contents or an outline that
mixes numbered headings with bulleted list
items as the lowest outline level

LOGO
[email protected]
The following example starts with a
numbered list that defines a list of things
to created for a term paper, and uses
three bulleted lists to break down those
items further.

LOGO
[email protected]
<h1>Things to do today</h1>
<ol>
<li>Feed cat</li>
<ul>
<li>Rinse bowl</li>
<li>Open cat food</li>
</ul>
<li>Wash car</li>
<ul>
LOGO
[email protected]
 <li>Vacuum interior</li>
<li>Wash exterior</li>
</ul>
<li>Grocery shopping</li>
<ul>
<li>Plan meals</li>
<li>Clean out fridge</li>
</ul>
</ol>
LOGO
[email protected]
 LOGO
[email protected]
Thanks

LOGO
[email protected]
 Working With Links

Hyperlinks, or simply links, connect (X)HTML

pages and other resources on the Web.
When you include a link on your page, you
enable visitors to travel from your page to
another Web site, another page on your site,
or even another location on the same page.

LOGO
[email protected]
Without links, a page stands alone, disconnected
from the rest of the Web. With links, that page
becomes part of an almost boundless collection of
information.

LOGO
[email protected]
 1- Add Links to Other Web Pages

You can add links to other web pages,

whether they are part of your web site or
someone else’s. To do so requires using the
a tag:
<a href="http://www.google.com">Use this
link to search Google.</a>

LOGO
[email protected]
The a tag itself doesn’t serve much purpose
without its attributes. The most common
attribute is href, which is short for hypertext
reference: it tells the browser where to find
the information to which you are linking.

LOGO
[email protected]
The text included in between the opening
and closing a tags is what the person
viewing your web page can click. In most
cases, this text is highlighted as a different
color from the surrounding text and is
underlined

LOGO
[email protected]
 LOGO
[email protected]
 1.1-Absolute links

Absolute links are those that include the

entire pathname. In most cases, you use
absolute links when linking to pages or sites
that are not part of your own web site.

LOGO
[email protected]
You must include the protocol (such as
http://) at the beginning of the link. For
example, if you are linking from your web site
to Yahoo!, you type http://www.yahoo.com
as your link.

<a href="http://www.yahoo.com">Visit Yahoo!</a>

LOGO
[email protected]
 1.2- Relative links

Relative links are so called because you

don’t include the entire pathname of the
page to which you are linking. Instead, the
pathname you use is relative to the current
page. This is similar to saying, “I live in
Suntown Court, about three miles from here,”
which is relative to wherever “here” is.

LOGO
[email protected]
A more absolute way to say this might be “I
live at 2F Suntown Court in Anytown, Phnom
Penh .” The Relative links are most
commonly used when you want to link from
one page in your site to another.

LOGO
[email protected]
The following is an example of what a relative link
might look like:

<a href="contactme.html">Contact Me</a>

LOGO
[email protected]
This link looks for the contactme.html file in
the same folder that contains this page. If you
were linking to a file in another folder below
the current one, the value of your href might
look like the following:

<a href=“New Folder/contactme.html">Contact Me

</a>

LOGO
[email protected]
 2- Add Links to Sections Within
the Same Web Page

When you link to a page, the browser knows

what to look for because each page has a
name. But sometimes you may want to link
to a section of text within a page on your web
site.

LOGO
[email protected]
 2.1- Create an Anchor Name

To link to a section of a web page, you must

first give that section a name. An anchor is a
place within a page that is given a special
name, enabling you to link to it later. Without
first naming a section, you cannot link to it.
The following is an example of an anchor:

<a name=”top”></a>

LOGO
[email protected]
The anchor element that marks the spot
doesn’t affect the appearance of any
surrounding content. You can mark spots
wherever you need them without worrying
about how your pages look (or change) as a
result.

LOGO
[email protected]
 2.2- Link to an Anchor Name

To create the link to an anchor, you also use

the a tag and the href attribute, as you would
when creating any other type of link. To finish
the link, you need to include a hash symbol
(#) and the anchor name as the value of the
href attribute.

LOGO
[email protected]
<a href="#top">Return to the top of the page</a>

The following shows how it all might look when

you code it in an HTML document:

LOGO
[email protected]
<body>
<h1><a name=”top”></a>Web-Based Training</h1>
<p>Given the importance of the Web to businesses and
other organizations, individuals who seek to improve
job skills, or fulfill essential job functions, are
turning to HTML and XML for training. We believe
this provides an outstanding opportunity for
participation in an active and lucrative adult and
continuing education market.</p>
<p><a href=”#top”>Back to top</a></p>
</body>
LOGO
[email protected]
 3- Add Links to E-Mail Addresses
and Downloadable Files

Although links to and within web pages are

the most common types of links you’ll create,
you can also link to other types of content on
the Internet.

LOGO
[email protected]
 3.1- E-Mail Addresses

When you want to give someone easy

access to your e-mail address, you can
include it on your page as a mailto link. This
means instead of using http:// in front of your
link, you use the e-mail protocol mailto: to
preface your e-mail address.

LOGO
[email protected]
 LOGO
[email protected]
 3.2- File downloads

Non-Web files must nevertheless be accessed

via the Internet, so they possess unique URLs,
just like HTML pages. Any file on a Web server
(regardless of its type) can be linked using a
URL.

LOGO
[email protected]
if you want your users to download a PDF
file named doc.pdf and a .zip archive called
software.zip from a Web page, you use this
HTML:
<h1>Download the new version of our
software</h1>
<p><a href=”software.zip”>Software</a></p>
<p><a href=”doc.pdf”>Documentation</a></p>

LOGO
[email protected]
You can make download markup more user-
friendly by adding supporting text and links,
like this:

LOGO
[email protected]
<h1>Download our new software</h1>
<p> <a href=”software.zip”>Software</a> <br />
<b>Note:</b>
You need a zip utility such as
<a href=”http://www.winzip.com”>WinZip</a>
(Windows) or
<a href=”http://www.maczipit.com”>ZipIt</a>
(Macintosh) to open this file.</p>

LOGO
[email protected]
<p><a href=”doc.pdf”>Documentation</a>
<br />
<b>Note:</b>You need the free
<a href=”http://www.adobe.com/products/
acrobat/readstep2.html”>Adobe Reader</a>
to view this file.</p>

LOGO
[email protected]
 LOGO
[email protected]
Thanks

LOGO
[email protected]
 Working with Images and
Multimedia

You can easily add images anywhere on

your web page by using the img tag, where
img is short for image. Add the src attribute
(short for source), supply the appropriate
value, and you’re off and running.

LOGO
[email protected]
When you use the img tag, you’re telling the
browser to display the image right within the
web page, as shown in below.
Your image should be in a web-friendly file
format, such as GIF, JPEG, or PNG.

LOGO
[email protected]
 LOGO
[email protected]
 1- Image File Type

You can create and save graphics in many

ways, but only a few formats are actually
appropriate for images that you intend to use
on the Web. As you create Web-friendly
images, you must account for file formats
and sizes. See the follow file format:

LOGO
[email protected]
 LOGO
[email protected]
 2- Adding an Image to a Web Page

When an image is ready for the Web, you

need to use the correct markup to add it to
your page. But you need to know where to
store your image as well. When you adding
The images to a pages you must be use the
<img/> tag.

LOGO
[email protected]
The image (<img />) element is an empty
element (sometimes called a singleton tag)
that you place on the page where you want
your image to go. An empty element has
only one tag, with neither a distinct opening
nor closing tag.

LOGO
[email protected]
The following markup places an image
named CD.jpg, which is saved in the same
directory as the (X)HTML file, between two
paragraphs:

LOGO
[email protected]
<body>
<h1>CD as a Storage Medium</h1>
<p>CD-ROMs have become a standard storage option in
today’s computing world
because they are inexpensive and easy to use.</p>
<img src=”CD.jpg” />
<p>To read from a CD, you only need a standard CD-ROM
drive, but to create
CDs, you need either a CD-R or a CD-R/W drive.</p>
</body>

LOGO
[email protected]
 LOGO
[email protected]
 3- Adding alternative text

Alternative text describes an image so those

who can’t see the images for some reason
can access that text to learn more about the
image.

LOGO
[email protected]
Most of your users will see your images, but
be prepared for those who won’t. The HTML
specifications require that you provide
alternative text to describe each image on a
Web page. Use the alt attribute with the
<img /> element to add this information to
your markup, like this:

LOGO
[email protected]
<body>
<p>Among the different sections of the orchestra
you will find:</p>
<p><img src=”07fg03-violin.jpg” alt=”violin “ />
Strings</p>
<p><img src=”07fg03-trumpet.jpg” alt=”trumpet” />
Brass</p>
<p><img src=”07fg03-woodwinds.jpg” alt=”clarinet
and saxophone” />
Woodwinds</p>
</body> LOGO
[email protected]
When browsers don’t display an image (or
can’t, as in text-only browsers such as Lynx),
they display the alternative text instead, as
shown in next slide.

LOGO
[email protected]
 LOGO
[email protected]
When browsers show an image, some
browsers — including Internet Explorer,
Netscape, and Opera — show alternative
text as pop-up tooltips when you hover your
mouse pointer over an image for a few
seconds, as shown in the next slide.

LOGO
[email protected]
 LOGO
[email protected]
This means you can use alternative text
either to describe the image to those who
can’t see it or to provide useful information
about the image.

LOGO
[email protected]
 4- Specifying image size

After you start adding several images to your

web pages, you may notice they sometimes
cause the browser to wait a little while before
displaying the page. Because they don’t
know the size of the image, some browsers
actually wait until the images are all loaded
before displaying the web page.

LOGO
[email protected]
You can use the height and width attributes with
the <img /> element to let the browser know just
how tall and wide an image is (in pixels):

<img src="photo.jpg" width="391" height="274" />

LOGO
[email protected]
<p><img src=” trumpet.jpg” width=”200”
height=”64” alt=”trumpet” />
Brass</p>

LOGO
[email protected]
 LOGO
[email protected]
If you don’t know the size of your image, you
can open it in a graphics editor, such as
Adobe Photoshop or Fireworks, to find out.
Or you can use the browser to determine the
size of your images.

LOGO
[email protected]
 5- Setting an image border

By default, every image has a border of 1 —

which doesn’t show up in most browsers until
you turn that image into a link. You can use
the border attribute with the <img /> element
to better control the border the browser
displays around your image.

LOGO
[email protected]
This markup sets the border for the clarinet
image to 10 pixels:

<img src=”woodwinds.jpg” width=”100”

height=”83” alt=”clarinet and saxophone”
border=”10” />

LOGO
[email protected]
 LOGO
[email protected]
 6- Controlling image alignment

The align attribute works with the <img />

element to control how your image appears
relative to the text around it. The possible
values for this attribute are:

top: Aligns the text around the image with

the top of the image.

LOGO
[email protected]
middle: Aligns the text around the image
with the middle of the image.
 bottom: Aligns the text around the image
with the bottom of the image.
 left: The image sits on the left, and text
floats to the right of the image.
 right: The image sits on the right, and text
floats to the left of the image.

LOGO
[email protected]
By default, most browsers align images to
the left and float all text to the right. The
following markup shows how two different
<img /> elements use the align attribute to
change how text floats around an image —
in this case, the Pimouse.jpg image:

LOGO
[email protected]
<p> <img src=”Pimouse.jpg” alt=”mouse with top-
aligned text” height=”63” width=”100”
align=”top” />
This text is aligned with the top of the image.
</p>
<p> <img src=”Pimouse.jpg” alt=”mouse with middle-
aligned text” height=”63” width=”100”
align=”middle” />
This text is aligned with the middle of the image.
</p>
LOGO
[email protected]
 LOGO
[email protected]
 7- Setting image spacing

Most browsers leave about one pixel of

white space between images and text or
other images next to them. You can give
your images breathing room with:
The vspace (vertical space) attribute
for top and bottom
 The hspace (horizontal space)
attribute for left and right
LOGO
[email protected]
The following HTML gives the mouse
graphic 20 pixels of white space on either
side and 25 pixels on the top and bottom:

LOGO
[email protected]
<p>
This text doesn’t crowd the image on top.
<br /> <img src=”Pimouse.jpg” height=”63”
width=”100” hspace=”20” vspace=”25”
alt=”mouse on a white background” />And
this text is a little further away from the sides.
</p>

LOGO
[email protected]
 LOGO
[email protected]
 8- Use Images as the Background
of a Web Page

Images have another role in a web page,

which is in the background. Just as in a
theatrical play, where actors may be moving
in the foreground while scenery moves in the
background, two levels of design also exist in
a web page.

LOGO
[email protected]
The old HTML specifications enabled you
to add a single image to be used as the
“scenery” in the background of your web
page. This was accomplished using the
background attribute of the body tag, as in
<body background="picture.jpg">.

LOGO
[email protected]
However, the W3C retired the background
attribute, in favor of using style sheets to
specify backgrounds. The latter is done by
adding the background-image property to a
style declaration for the body tag:
body {background-image: url("picture.jpg");}

LOGO
[email protected]
to force the background image to remain
stationary is to add the background-
attachment property to the page’s style
sheet. This property allows the background
to stay in place (when set to “fixed”) or to
move when the page is scrolled (when set
to “scroll”).

LOGO
[email protected]
Similarly, you can even tell the browser
whether or not to repeat your background
image at all, using the background-repeat
property.

LOGO
[email protected]
body {background-image: url("picture.gif");
background-attachment: fixed;
background-repeat: no-repeat;}

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Building image maps

Instead of linking a graphic to a single

destination (such as another page or a
mailto link), you can link different areas of
the graphic to different destinations. A
graphic with two or more different links is
called an imagemap.

LOGO
[email protected]
To create an imagemap, you place an image
using the <img/> tag as usual, and then use
the usemap attribute to specify which
imagemap to use. You then use <map> and
</map> tags to define a map that consists of
different areas, each of which is linked to a
different page or to a different anchor on the
same page.

LOGO
[email protected]
The areas are defined by their coordinates
from the upper-left corner of the image,
which has coordinate 0,0. Each area can be
a rectangle (rect), a circle (circle), or a free-
form polygon (poly).

LOGO
[email protected]
To create the imagemap:
1- Open the graphic in your graphics
program, and use the program’s selection
tools to work out the coordinates of the areas
you will need to define within the image. For
example, the coordinates "0,0,320,240"
define the upper-left quarter of the sample
graphic.

LOGO
[email protected]
2-Type the <img/> tag with the src attribute
specifying the graphic file, the alt attribute
specifying the alternative text, and the
usemap attribute specifying the name of the
map you’ll create—for example: <img
src="map1.jpg“ alt=“picture showing Acme
Virtual Industries’ main service areas”
usemap="#map1_map">

LOGO
[email protected]
3- Type the opening <map> tag, and set the name
attribute to the name you used for the usemap
attribute of the <img/> tag—for example:

<map name="map1_map">

LOGO
[email protected]
4- Type an <area> tag with the href attribute
specifying the destination page for the
hyperlink, the alt attribute specifying the
alternative text for the hyperlink (if desired),
the shape attribute specifying the type of
area (rect, circle, or poly), and the coords
attribute specifying the coordinates of the
area.

LOGO
[email protected]
For example,
this code defines a rectangular area 320 pixels
wide by 240 pixels high, starting at the upper-left
corner of the graphic:

<area href="finance.html“ alt="Financial Services"

shape="rect“ coords="0,0,320,240">

LOGO
[email protected]
Enter <area> tags for the other areas in the
graphic— for example:

<area href="offices.html“ alt="Office Services“

shape="rect“ coords="0,240,320,240">

LOGO
[email protected]
<area href="security.html“ alt="Security Services"
shape="rect“ coords="320,0,640,240">
<area href="computing.html“ alt="Computing
Services“ shape="rect“ coords="320,240,640,480">
Type the closing </map> tag:
</map>

LOGO
[email protected]
 Multimedia

Now that broadband is widely available,

more and more people can enjoy audio and
video via the Web. If you have audio or video
content to share, you can put it on your
website.

LOGO
[email protected]
You can create links that allow users to
download audio or video files, play audio or
video files in a separate player, or play audio
or video files within your web page.

LOGO
[email protected]
 1- Audio and Video Formats

To make sure that as many visitors to your

website as possible can enjoy its audio or
video, you need to choose a suitable format.
You must also ensure that the file size of the
audio or video is small enough that the
file can be downloaded over even a dial-up
connection.

LOGO
[email protected]
Use compressed audio formats for all but the
shortest audio files. Most computers can play
MP3 files (which are compressed) and WAV
files (which are not compressed). Also,
consider reducing the complexity of the
audio file—for example, by reducing it from a
16-bit sound to an 8-bit sound, or by using
mono instead of stereo.

LOGO
[email protected]
The file will not sound as good, but visitors to your
website will be able to get it that much more
quickly.

LOGO
[email protected]
 2- Audio and Video Delivery
Methods

The easiest way to provide audio or video to

visitors of your website is to allow
them to download entire files to their
computers and play them when they want
to. This approach has two advantages.

LOGO
[email protected]
People who download the files can listen to
the audio or watch the video as many
times as they like.

LOGO
[email protected]
Downloads work even over a slow or
patchy connection (for example, a modem
connection or a congested broadband
connection), provided the downloader has
enough time and patience to download the
whole file.

LOGO
[email protected]
 3- Create a Link for Downloading
an Audio or Video File

If you have audio or video files that you

can legally offer for download (for
example, music or movies that you have
created yourself), create a link to the file,
and instruct visitors to right-click the link
and choose Save As (or the equivalent
command,
LOGO
[email protected]
depending on the browser) from the shortcut
menu to download the file. (If a visitor simply
clicks the link, the audio or video file will
probably play rather than be downloaded,
although this depends on how the computer
is configured.)

LOGO
[email protected]
This example tells visitors how to download
an MP3 file:

<p>To download the Song, right-click

<a href="media/Song01.mp3"
title="Right-click this link and choose Save
As to download the file.">here</a>.</p>

LOGO
[email protected]
 4- Create a Link to Play an Audio
or Video File

To enable visitors to play an audio or video

file, create a link to the file. This example
links to the AVI video file named
virtual_office_tour.avi in the media folder:

LOGO
[email protected]
<p>Click
<a href="media/virtual_office_tour.avi">here</a>
to watch our Virtual Office Tour video (AVI format,
12.4MB).
</p>

LOGO
[email protected]
 LOGO
[email protected]
 5- Using the object Tag

When you use the object tag, you must tell

the browser what type of file you are
embedding and where to locate that file. The
type and data attributes are used for this
process.

LOGO
[email protected]
<object type="application/x-shockwave-flash"
data="movie.swf“ height="60" height="200">

LOGO
[email protected]
Then, after the opening object tag, you add
any additional properties you want to specify
using the param tag (short for parameters).
(Note that the object tag enables you to
specify the height and width attributes either
in the object tag or in param tags, depending
on the plug-in employed.)

LOGO
[email protected]
<param name="movie" value="movie.swf" />
<param name="BGCOLOR" value="#ffffff" />

</object>

LOGO
[email protected]
 6- Using The <embed> Element

The <embed> tag defines a container for

external (non-HTML) content. (It is an
HTML5 tag, invalid in HTML 4, but works in
all browsers). The following code can
display an MP3 file embedded in a web
page:

LOGO
[email protected]
<embed height="100" width="100" src=“Song.mp3">

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Working With Form

A web form is a web page that contains

fields, areas in which a visitor can enter
information or select from a set of
predefined options. When a visitor accesses
the form, the browser displays the web page
as usual, including the form’s fields.

LOGO
[email protected]
The visitor can interact with the fields—for
example, by typing text into a text field, by
selecting a check box or one option button in
a group of option buttons, or by choosing an
item from a drop-down list.

LOGO
[email protected]
When finished with the form, the visitor clicks
a command button that submits the form,
usually by running a Common Gateway
Interface, or CGI, script written in a
programming language such as JavaScript .

LOGO
[email protected]
 1- The Form Tag
The <form> tag is used to create an HTML
form:

<form>
.
input elements
.
< /form>

LOGO
[email protected]
 2- The Input Elements

The input element is used to select 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…

LOGO
[email protected]
The values of Attribute Type are:
Text
Password
Checkbox
Radio
Submit

LOGO
[email protected]
Hidden
Image
Button
Reset
File

LOGO
[email protected]
 3- Add a Single-Line Textbox

<input type="text" name="firstname"

size="20" value="Type your first name here"
maxlength=20 />

<input type="text" name="firstname"

size="20" value="Type your first name here"
maxlength=20 />

LOGO
[email protected]
 LOGO
[email protected]
 4- Add a Multi-Line Textbox

Single-line text boxes are convenient for

getting short pieces of text from your visitors,
but if you want them to be able to express
themselves more freely, use a multiline text
box instead.

LOGO
[email protected]
<textarea cols="40" rows="10">Please type
your message here.</ textarea>

LOGO
[email protected]
 5- Add a Drop-Down list

If you need to enable visitors to select one

item from a number of items, use a
drop-down list. To add a drop-down list:

LOGO
[email protected]
<select size=1>
<option value="1">AL</option>
<option value="2">AK</option>
<option value="3">AR</option>
<option value="4">AS</option>
<option value="5">AZ</option>
<option value="6">CA</option>
<option value="7">CO</option>
<option value="8">CT</option>
...
<option value="58">WI</option>
<option value="59">WY</option>
</select>
LOGO
[email protected]
 6- Add a Checkbox
For presenting options that are not mutually
exclusive, use check boxes. To add
a check box:
<form>
< input type="checkbox" name=“UseCheck"
value=“Check">Choose 1>
< input type="checkbox" name=“UseCheck"
value=“Check1">Choose 2
< /form>
LOGO
[email protected]
 7- Add Option Buttons

Option buttons enable a visitor to choose

among two or more mutually exclusive
options. Only one option button in a group of
option buttons can be selected at any one
time; selecting an option button clears all the
other option buttons in the group.

LOGO
[email protected]
<form>

< input type="radio" name=“Gender"

value="male"> Male<br>
< input type="radio" name=“Gender"
value="female">Female

< /form>

LOGO
[email protected]
8- Complete a Form

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Creating Tables

An HTML table is an element comprised of

table rows and columns, much like you'd see
when working with an application such as
Excel. Tables may seem difficult at first, but
after working through this lesson, you'll see
that they aren't so horrible.

LOGO
[email protected]
 A table element consists of three different
HTML tags including the <table> tag, <tr>
(table rows), and the <td> (table columns)
tags. For example:

LOGO
[email protected]
 1- The <table> tag
The table tag is a container for every other
tag used to create a table in HTML. The
opening and closing table tags should be
placed at the beginning and end of your
table.
<Table>
…………
</table>

LOGO
[email protected]
 1.1- The <tr> Tag
The tr tag stands for table row. The opening
and closing tr tags surround the cells for that
row.
<table>
<tr>
………………..
</tr>
</table>
LOGO
[email protected]
<table>
<tr>
<dt>1 Row Create</td>
</tr>
<tr>
<td>2 Row Create</td>
</tr>
</table>
LOGO
[email protected]
 1.2-The <th> Tag

The th tag stands for table header. An

optional tag used instead of the td tag,
this tag defines a cell containing header
information. By default, the content in
header cells is bolded and centered.

LOGO
[email protected]
<table >
<tr>
<th>Title1</th>
<th>Titile2</th>
</tr>
</table>

LOGO
[email protected]
 1.3- The <td> Tag

The td tag stands for table data and holds

the actual content for the cell. There are
opening and closing td tags for each cell in
each row.
<table>
<tr>
<td>……….</td>
</tr>
</table> LOGO
[email protected]
<table >
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

LOGO
[email protected]
 1.4- The <td> align Attribute

The align attribute specifies the horizontal

alignment of the content in a cell.
Syntax:

<td align="left or right or center or justify ">

LOGO
[email protected]
 1.5- The <td> bgcolor Attribute

The bgcolor attribute specifies the

background color of a table cell.

Syntax:

<td bgcolor="color_name|hex_number|rgb_number">

LOGO
[email protected]
 1.6 The <td> colspan Attribute

The colspan attribute defines the number of

columns a cell should span.
Syntax:
<td colspan="number">

LOGO
[email protected]
 1.7- The <td> rowspan Attribute

The rowspan attribute specifies the number

of rows a cell should span.

Syntax:
<td rowspan="number">

LOGO
[email protected]
 1.8- The <td> width Attribute

The width attribute specifies the width of a

table cell.
Syntax:

<td width="pixels or %">

LOGO
[email protected]
 1.9- The <td> height Attribute

The height attribute specifies the height of a

cell.
Syntax:
<td height="pixels or %">

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Create a Vertical Line

The <hr> tag (discussed in the last slide) lets

you easily insert a horizontal line in a web
page. To insert a vertical line, create a two-
column table and specify frame="void" and
rules="cols", as shown in this example:

LOGO
[email protected]
<table frame="void" rules="cols"
cellspacing="2" cellpadding="5">
<tr>
<th valign="top" align="left">
Lesson I</th>
<th valign="top" align="left">
Lesson II</th>
</tr>
LOGO
[email protected]
<tr>
<td><i>Thank for your attention to< /i></td>
<td>yes,sir !</td>
</tr>
<tr>
<td><i> Please try yourselt at home for more
!</i></td>
<td>Thank for your advice!</td>
</tr>
LOGO
[email protected]
<tr>
<td><i>This is the more Lesson</i></td>
<td>Thank you so much</td>
</tr>
</table>

LOGO
[email protected]
 LOGO
[email protected]
 Create a Nested Table

Spanning columns, spanning rows, or

spanning both columns and rows gives you
decent flexibility in laying out your tables;
however, if you must create a truly intricate
table design, you may need to nest one table
within another.

LOGO
[email protected]
To nest a table, enter the complete structure
of the nested table within the <td> and </td>
tags for the cell in which you want the nested
table to appear. See the picture for example:

LOGO
[email protected]
 LOGO
[email protected]
<table border="1">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>

LOGO
[email protected]
<tr>
<td>Column 1</td>
<td>
<table border="1">
<tr>
<td>Table</td>
<td>nested</td>
</tr>
LOGO
[email protected]
 <tr>
<td>in a</td>
<td>cell</td>
</tr>
</table>
</td>
<td>Column 3</td>
</tr>
</table> LOGO
[email protected]
Thanks

LOGO
[email protected]
 Using Marquee

Marquee is a HTML code to make an object

can moving or walk. Marquee code is a
popular code because many blogger using
this code at them blog's. Marquee effect can
make by using <marquee>...</marquee> tag .

LOGO
[email protected]
For example:

<body>
<marquee>
This is my text, it is running !
</marquee>
</body>

LOGO
[email protected]
 1- Marquee’s Attributes

BGCOLOR="color" → to manage
background color of an object .

<marquee BGCOLOR=“Red”>
This is my text, it is running !
</marquee>

LOGO
[email protected]
DIRECTION="left/right/up/down“→ to
manage direction of the moving object.

<marquee BGCOLOR=“Red”
DIRECTION=“Right”>
This is my text, it is running !
</marquee>

LOGO
[email protected]
TITLE=“message“→ The title or message
will emerge when the computer mouse at
the marquee object.

SCROLLMOUNT="number" → to manage
the speed of marquee, ever greater of
number is faster his speed.

LOGO
[email protected]
BEHAVIOR="scroll/slide/alternate“→ to
manage behavior of the moving object .
Note:
- Scroll → object moving scroll.
- Slide → object moving 1 time and then
stop.
- Alternate → object moving from left to
right and then right to left .
LOGO
[email protected]
SCROLLDELAY="number" → to manage
delay time, it's on second.

LOGO
[email protected]
LOOP="number" → to manage sum of looping.

WIDTH="number" → to manage width of

marquee object, it's on pixel (px) or percen (%).

LOGO
[email protected]
For example using attributes of marquee:

<font face="georgia" color="White">

<marquee bgcolor="red" width="100%"
scrollamount="3" behavior="alternate">
</marquee>

LOGO
[email protected]
 2- Using Hover Over the Marquee

The Hover allows the user to slow the

marquee down when they hover over it
(onmouseover). The marquee then continues
when the user moves the cursor away from
the marquee (onmouseout). For example:

LOGO
[email protected]
<marquee behavior="scroll" direction="left"
scrollamount="12"
onmouseover="this.setAttribute('scrollamoun
t', 3, 0);"
onmouseout="this.setAttribute('scrollamount',
12, 0);">
Testing hover over me!
</marquee>

LOGO
[email protected]
 3- Using Start() and Stop()

The Start() and Stop() allows the user to stop

and stat the marquee when they put the
mouse over it (onmouseover). The marquee
then continues when the user moves the
cursor or mouse away from the marquee
(onmouseout). For example:

LOGO
[email protected]
<marquee behavior="scroll" direction="left"
scrollamount="20"
onmouseover="this.stop();"
onmouseout="this.start();">
Go on... hover over me!
</marquee>

LOGO
[email protected]
<html><body>
<marquee behavior="scroll" direction="left" id="myrun">
<p>press the button!</p></marquee>
<input type="button" value="Stop Marquee"
onClick="document.getElementById('myrun').stop();">
<input type="button" value="Start Marquee"
onClick="document.getElementById('myrun').start();">
</body></html>

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Working With CSS

 Stands for "Cascading Style Sheet."

Cascading style sheets are used to format
the layout of Web pages. They can be used
to define text styles, table sizes, and other
aspects of Web pages that previously could
only be defined in a page's HTML.

LOGO
[email protected]
CSS helps Web developers create a uniform
look across several pages of a Web site.
Instead of defining the style of each table
and each block of text within a page's HTML,
commonly used styles need to be defined
only once in a CSS document.

LOGO
[email protected]
 1- How CSS Works

If you’ve used styles in word processing

programs like Microsoft Word or page layout
programs like Adobe InDesign, CSS will feel
familiar. A style is simply a rule describing
how to format a particular portion of a web
page. A style sheet is a set of these styles.

LOGO
[email protected]
CSS works with HTML, but it’s not HTML. It’s
a different language altogether. While HTML
provides structure to a document by
organizing information into headers,
paragraphs, bulleted lists, and so on, CSS
works hand-in-hand with the web browser to
make HTML look good.

LOGO
[email protected]
 2- CSS Syntax
A style sheet is a collection of style
definitions. Every CSS style definition, or
rule, has two main components:
A list of one or more selectors
The declaration block

LOGO
[email protected]
 3- How to Define CSS to HTML

The basic purpose of CSS is to allow the

designer to define style declarations and to
apply those styles to selected portions of
HTML pages using selectors—references to
an element or group of elements to which the
style is applied.

LOGO
[email protected]
Let’s look at a basic example to see how this
is done. Consider the following HTML
document outline:

LOGO
[email protected]
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content.</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content.</p>
<h2>Third title</h2>
<p>A paragraph of interesting content.</p>
</body>
LOGO
[email protected]
This document contains three headings,
which have been created using <h1>and
<h2> tags. Without CSS styling, the headings
will be rendered using the browser’s internal
style sheet—the h1 heading will be displayed
in a large font size, and the h2 headings will
be smaller than the h1, but larger than
paragraph text.

LOGO
[email protected]
can use some simple CSS to change the look
of these elements:
<head>
<style type="text/css">
h1, h2 { font-family: sans-serif;
color: yellow; }
</style>
</head>
LOGO
[email protected]
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content.</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content.</p>
<h2>Third title</h2>
<p>A paragraph of interesting content.</p>
</body>
LOGO
[email protected]
See more example:
<head>
<style type="text/css">
Body
{ background-color:Green; }
h1 { color:orange;text-align:center;}
p { font-family:"Times New Roman";font-size:20px;}
</style>
</head>
LOGO
[email protected]
<body>
<h1>CSS Heading 1 example!</h1>
<p>This is a paragraph that using CSS.</p>
</body>

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Understanding Style Sheets

Of course, a single style won’t transform a

web page into a work of art. It may make
your paragraphs red, but to infuse your
websites with great design, you need many
different styles. A collection of CSS styles
comprises a style sheet.

LOGO
[email protected]
A style sheet can be one of two types—
internal or external, depending on whether
the style information is located in the web
page itself or in a separate file linked to the
web page.

LOGO
[email protected]
 1- Inline Style

When you type a CSS rule directly into a

page’s HTML, you’re creating an inline style.
It simplest method of adding CSS styles to
your web pages is to use inline styles. An
inline style is applied to a HTML element via
its style attribute, like this:

LOGO
[email protected]
<p style="font-family: sans-serif; color:
#3366CC;"> Test to using inline. </p>
<h1 style="color: #C7AA8D; font-size: 14;">

LOGO
[email protected]
 2- internal style sheet

An internal style sheet is a collection of

styles that’s part of the web page’s code. It
always appears between opening and
closing HTML <style> tags in the page’s
<head> portion. Here’s an example:

LOGO
[email protected]
<head>
<style type="text/css">
h1 {
color: #FF7643;
font-family: Arial;
}
p{
color: red;
font-size: 1.5em;
}
</style>
</head> LOGO
[email protected]
Internal style sheets are easy to add to a
web page and provide an immediate to
your HTML. But they aren’t the most efficient
method for designing an entire website
composed of many web pages.

LOGO
[email protected]
For one thing, you need to copy and paste
the internal style sheet into each page of
your site—a time-consuming chore that adds
bandwidth-hogging code to each page.

LOGO
[email protected]
But internal style sheets are even more of a
hassle when you want to update the look of a
site. For example, say you want to change
the <h1> tag, which you originally decided
should appear as large, green, bold type. But
now you want small, blue type in the Courier
typeface.

LOGO
[email protected]
Using internal style sheets, you’d need to
edit every page. Who has that kind of time?
Fortunately, there’s a simple solution to
this dilemma—external style sheets.

LOGO
[email protected]
 3- External Style Sheets

An external style sheet is a file (usually

given a .css filename) that contains a web
site’s CSS styles, keeping them separate
from any one web page. Multiple pages can
link to the same .css file, and any changes
you make to the style definitions in that file
will affect all the pages that link to it.

LOGO
[email protected]
 3.1- Link a Style Sheets

The most common method of adding an

external style sheet to a web page is to use
the HTML <link> tag. You write the tag
slightly differently depending on whether
you’re using HTML or XHTML. For example,
here’s HTML:

LOGO
[email protected]
<head> <title>A Simple Page</title>
<link rel="stylesheet" type="text/css"
href="styles.css" />
</head>

LOGO
[email protected]
<body>
<h1>First Title</h1>
<p>…</p>
<h2>Second Title</h2>
<p>…</p>
<h2>Third Title</h2>
<p>…</p>
</body>
LOGO
[email protected]
rel="stylesheet" indicates the type of
link—in this case, a link to a style sheet.
type="text/css" lets the browser know
what kind of data to expect—a text file,
containing CSS.

LOGO
[email protected]
href points to the location of the external
CSS file on the site. The value of this
property is a URL and will vary depending
on where you keep your CSS file. It works
the same as the src attribute you use when
adding an image to a page or the href
attribute of a link pointing to another page.

LOGO
[email protected]
 3.2- Link a Style Sheets Using
CSS
CSS includes a built-in way to add external
style sheets—the @import directive.
You add the directive inside of an HTML
<style> tag, like so:

<style type="text/css">
@import url(css/global.css);
</style> LOGO
[email protected]
Unlike HTML’s <link> tag, @import is part of
the CSS language and has some definite un-
HTML -like qualities:

LOGO
[email protected]
To make the connection to the external
CSS file, you use url instead of href and
enclose the path in parentheses. So in this
example, css/global.css is the path to the
external CSS file. Quotes around the URL
are optional, so url(css/global.css)
and url("css/global.css") both work.

LOGO
[email protected]
As with the <link> tag, you can include
multiple external style sheets using
more than one @import:

<style type="text/css">
@import url(css/global.css);
@import url(css/forms.css);
</style>
LOGO
[email protected]
You can add regular CSS styles after the
@import directives if you want to create a
rule that applies just to that one page, but
still use the site’s global design rules
to format the rest of the page.
For example:

LOGO
[email protected]
<style type="text/css">
@import url(css/global.css);
@import url(css/forms.css);
p { color:red; }
</style>

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Selectors

You use selectors to define the elements on

a page that you want to apply certain
properties to. Elements in the document can
be matched based on the HTML tag used,
based on class or ID attributes, based
on the relationship to other elements,

LOGO
[email protected]
or based on the current status in the
document. You can also combine simple
selectors to form a chain of conditions that
must be met before the style rule is applied.

LOGO
[email protected]
 1- Universal selector

Think of a group selector as shorthand for

applying the same style properties to
several different page elements. CSS also
gives you a sort of group selector—
the universal selector. An asterisk (*) is
universal selector shorthand for selecting
every single tag.

LOGO
[email protected]
For example, say you want all the tags on
your page to appear in bold type. Your
group selector might look something like the
following:

a, p, img, h1, h2, h3, h4, h5 ... { font-weight: bold; }

LOGO
[email protected]
The asterisk, however, is a much shorter
way to tell CSS to select all HTML tags on
the page:

* { font-weight: bold; }

LOGO
[email protected]
 2- Type Selector

The most basic form of selector is a type

selector, which we’ve already seen. By
naming a particular HTML element, you can
apply a style rule to every occurrence of that
element in the document. Type selectors are
often used to set the basic styles that will
appear throughout a web site.

LOGO
[email protected]
For example, the following style rule might
be used to set the default paragraph font for
a web site:
p{
font-family: Tahoma, Verdana, Arial,
Helvetica, sans-serif ; font-size: 1em;
color: #000000;
}

LOGO
[email protected]
 3- ID Selector
An ID selector matches an element that
has a specific id attribute value. Since
id attributes must have unique values,
an ID selector can never match more
than one element in a document.

LOGO
[email protected]
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}

LOGO
[email protected]
 4- Class Selector

The class selector matches elements with

the specified class name. For elements
whose class attribute contains multiple
space-separated words, the class selector
will select an element if any of those words
match the specified class name.

LOGO
[email protected]
.special {
color:#FF0000;
font-family:"Monotype Corsiva";
}

LOGO
[email protected]
 5- Grouping Selector

To work with selectors as a group, simply

create a list of selectors separated by
commas. So to style all of the heading tags
with the same color, you can create the
following rule:
h1, h2, h3, h4, h5, h6 { color: red; }

LOGO
[email protected]
This example consists of only tag selectors,
but you can use any valid selector (or
combination of selector types) in a group
selector. For example, here’s a selector that
applies the same font color to the <h1> tag,
the <p> tag, any tag styled with the .copyright
class, and the tag with the #banner ID.
h1, p, .copyright, #banner { color: red; }

LOGO
[email protected]
Thanks

LOGO
[email protected]
 6- Descendant Selector

Descendent selectors let you take advantage

of the HTML family tree by formatting tags
differently when they appear inside certain
other tags or styles. For example, say you
have an <h1> tag on your web page, and you
want to emphasize a word within that heading
with the <strong> tag. The trouble is, most
browsers display

LOGO
[email protected]
both heading tags and the <strong> tag in
bold, so anyone viewing the page can’t
see any difference between the emphasized
word and the other words in the headline.
A descendent selector lets you do what you
really want—change the color of the <strong>
tag only when it appears inside of an <h1>
tag.

LOGO
[email protected]
The solution to the <h1> and <strong>
dilemma looks like this:

h1 strong { color: red; }

LOGO
[email protected]
 7- Child Selector

Similar to the descendent selectors

described earlier in this chapter, CSS lets
you format the children of another tag with
a child selector. The child selector uses an
additional symbol—an angle bracket (>) to
indicate the relationship between the two
elements.

LOGO
[email protected]
For example, the selector body > h1 selects
any <h1> tag that’s a child of the <body>
tag.
Unlike a descendent selector, which applies
to all descendents of a tag (children,
grandchildren, and so on), the child selector
lets you specify which child of which
parent you mean.

LOGO
[email protected]
See more example:

p{
color: #0000FF;
}
.sidebar>p {
color: #FFFFFF; }

LOGO
[email protected]
 8- Adjacent Sibling Selector
An adjacent selector will only match an
element if it’s adjacent to another specified
element. Therefore, if we have HTML:

<h2>This is a title</h2>
<p>This paragraph will be displayed in white.</p>
<p>This paragraph will be displayed in black.</p>

LOGO
[email protected]
And then use the following selector:

p{
color: #000000; }
h2+p {
color: #FFFFFF; }

LOGO
[email protected]
Only the first paragraph will be displayed in
white. The second p element is not adjacent
to an h2 and therefore its text would be
displayed in the black we have specified for
p elements in the first rule.

LOGO
[email protected]
 9- Attribute Selector

CSS provides a way to format a tag based

on any attributes it has. For example, say
you want to place borders around the images
on your page—but only around the important
photos. You don’t want to include your logo,
buttons, and other little doodads that also
have an <img> tag. images.

LOGO
[email protected]
Fortunately, you realize that you’ve given all
the photos descriptions using the title
attribute, which means you can use an
attribute selector to identify just the important
images.

LOGO
[email protected]
With attribute selectors, you can single out
tags that have a particular property. For
example, here’s how to select all <img> tags
with a title attribute:
img[title]
The first part of the selector is the name of
the tag (img) while the attribute’s name
goes in brackets: [title].
LOGO
[email protected]
To get more specific, you can select
elements that not only share a particular
attribute but also have an exact value set for
that attribute. For example, when you want to
highlight links that point to a particular URL,
create an eye-catching attribute selector, like
so:
a[href="http://www.cosmofarmer.com"]{ color:red; font-
weight:bold; }

LOGO
[email protected]
Similarly, there are times when you want to
select an element with an attribute that
ends in a specific value. Again, links are
handy for this task. Say you want to add a
little document icon next to any links that
point to a PDF file. Since PDF documents
end in .pdf,

LOGO
[email protected]
you know a link pointing to one of those files
will end in .pdf—for example,
<a href="download_instructions.pdf">.
So to select just those types of links, you’d
create a selector like this:
a[href$=".pdf"]

LOGO
[email protected]
The full style might look something like this:

a[href$=".pdf"] {
background-image: url(icon.png) no-repeat;
padding-left: 15px;
};

LOGO
[email protected]
Thanks

LOGO
[email protected]
 Page Layouts

Page layout with HTML and CSS begins with

establishing a layout grid or set of columns to
flow content into, but what you do with
individual content types or items once you
get them into a column is just as important.

LOGO
[email protected]
This chapter introduces the common
techniques and building blocks used for
laying out HTML content in your pages.

LOGO
[email protected]
 1- Two Columns

Now we show how to use CSS to create a

simple two column layout. If you want to
create a three column layout, read on the
next slide to explains a basic concept that
can be used to create as many columns as
you need.

LOGO
[email protected]
The layout consists of a header, a horizontal
navigation bar, a main content column, a
sidebar, and a footer. It is also horizontally
centered in the browser window. A pretty
basic layout, and not at all difficult to create
with CSS once you know how to deal with
the inevitable Internet Explorer bugs.

LOGO
[email protected]
Step 1: First of all, we create the basic HTML
structure:
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
LOGO
[email protected]
After that, we put some content in the different
sections:
<div id="wrap">
<div id="header"><h1>Document Heading</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
...
</ul>
</div>
LOGO
[email protected]
<div id="main">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit...</p>
</div>

LOGO
[email protected]
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>

LOGO
[email protected]
 <div id="footer">
<p>Footer</p>
</div>
</div>

LOGO
[email protected]
Step 2: Now we have a completely unstyled
HTML document which is structured in a way
that lets us use CSS to control its layout. After
that adjust the body and html elements. we
set the margin and padding of the body and
html elements to zero. We also specify colors
for text and background.

LOGO
[email protected]
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}

LOGO
[email protected]
Step 3:On to the main containers
After that it’s time to give the content area a
width and center it horizontally. We do that
by specifying the width and margins of the
main container, #wrap. We also give it a
background color to make it show up on the
page.

LOGO
[email protected]
The method we use to center the content is
based on the fact that when an element’s left
and right margins are set to auto, they will
share whatever is left when the element’s
width has been subtracted from that of its
container. In this case the width of #wrap will
be subtracted from the width of the browser
window.

LOGO
[email protected]
Note: for this method to work in Internet Explorer
(version 6 and later only), the document must use
a DOCTYPE that forces IE to use its standards
mode.

LOGO
[email protected]
#wrap {
width:750px;
margin:0 auto;
background:#99c;
}

LOGO
[email protected]
In case you’re wondering why we’re not using
the body element to control the width and
centering of the layout, it is because doing so
can cause unwanted side-effects in some
versions of Internet Explorer

LOGO
[email protected]
After that, we give the different sections of
the document different background colors to
make them show up.

LOGO
[email protected]
#header {
background:#ddd;
}

#nav {
background:#c99;
}

LOGO
[email protected]
#main {
background:#9c9;
}
#sidebar {
background:#c9c;
}
#footer {
background:#cc9;
}
LOGO
[email protected]
Step4: Place the columns side by side
To make the two columns (#main and
#sidebar) display side by side we float them,
one to the left and the other to the right. We
also specify the widths of the columns.

LOGO
[email protected]
#main {
float:left;
width:500px;
background:#9c9;
}

LOGO
[email protected]
#sidebar {
float:right;
width:250px;
background:#c9c;
}

LOGO
[email protected]
Note that the sum of the widths should be
equal to the width given to #wrap in Step 3.
This will make #sidebar appear to the right of
#main, but the footer is not where it should
be.

LOGO
[email protected]
Step 5: Push the footer down
The footer doesn’t get pushed down to the
bottom of the content because of the way
float works. When you float an element, it is
removed from the document flow and doesn’t
push elements that follow it down. In this
case #footer will start right below #sidebar.

LOGO
[email protected]
To avoid this we use the clear property to tell
the footer that it can’t have any elements
next to it.

#footer {
clear:both;
background:#cc9;
}
LOGO
[email protected]
Step6: Fix the background color
Now we can see that the shorter column
doesn’t continue all the way down to the
footer. To make it look like it does, we use
the same background color for #sidebar and
#wrap.

LOGO
[email protected]
Also, if you take a look at this step in Internet
Explorer 6 you may notice that the
background color of the footer is pushing up
beside the main content. That will be taken
care of later.

LOGO
[email protected]
Step7:Make the navigation bar horizontal

#nav contains a regular unordered list of

links. Since we don’t want it to look like an
unordered list we restyle it.

LOGO
[email protected]
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
} LOGO
[email protected]
Step8. Adjust margins and paddings

Almost done. Time to adjust the margin and

padding of some elements to make the
layout a little less cramped.

LOGO
[email protected]
#header {
padding:5px 10px;
background:#ddd;
}
h1 {
margin:0;
}

LOGO
[email protected]
#nav {
padding:5px 10px;
background:#c99;
}
#main {
float:left;
width:480px;
padding:10px;
background:#9c9;
} LOGO
[email protected]
h2 {
margin:0 0 1em;
}
#sidebar {
float:right;
width:230px;
padding:10px;
background:#99c;
}
LOGO
[email protected]
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
LOGO
[email protected]
One thing to take note of here is that when
we added padding to #main and #sidebar,
we subtracted the width of the left and right
paddings from each element’s width.

LOGO
[email protected]
 LOGO
[email protected]
 2- Three Columns
The HTML structure
<div id="body">
<div id="header"></div>
<div id="main">
<div id="content-1"></div>
<div id="content-2">
<div id="content-2-1"></div>
<div id="content-2-2"></div>
</div> </div>
<div id="footer"></div>
</div>
LOGO
[email protected]
Here’s what those elements are used for:
 #body
 #header
 #main
 #content-1
 #content-2
 #content-2-1
 #content-2-2
 #footer
LOGO
[email protected]
Step 1: The unstyled HTML
Step 2: Overall width and some colors

html, body { margin:0; padding:0; color:#000;

background:#fff; }

LOGO
[email protected]
#body { width:960px; margin:0 auto;
background:#ddd; }
#header { background:#fdd; }
#content-1 { background:#bfb; }
#content-2-1 { background:#ddf; }

LOGO
[email protected]
#content-2-2 { background:#dff; }
#footer { background:#ff9; }
Step 3: Create the first two columns

#content-1 { float:left; width:240px;

background:#bfb; }
#content-2 { float:right; width:720px; }

LOGO
[email protected]
Step 4: Create the nested columns

#content-2-1 { float:left; width:480px;

background:#ddf; }
#content-2-2 { float:right; width:240px;
background:#dff; }

LOGO
[email protected]
Step 5: Push the footer down

#footer { clear:both; background:#ff9; }

Step 6: Clean things up a bit

LOGO
[email protected]
#header { padding:10px; background:#fdd; }
#content-1 { float:left; width:220px;
padding:10px; background:#bfb; }
#content-2-1 { float:left; width:460px;
padding:10px; background:#ddf; }
#content-2-2 { float:right; width:220px;
padding:10px; background:#dff; }

LOGO
[email protected]
#footer { clear:both; padding:10px;
background:#ff9; }

LOGO
[email protected]
 LOGO
[email protected]
LOGO