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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
All publicly accessible websites collectively
constitute the World Wide Web.

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 Path
http://www.bun.com/developers/evengcentral/bios.html

Protocol Domain name

FileName

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
- 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>
LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 Numbered lists
 Bulleted lists
 Definition lists

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<body>
<h1>Things to do today</h1>
<ol>
<li>Feed cat</li>
<li>Wash car</li>
<li>Grocery shopping</li>
</ol>
</body>
LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<ol start=”5” type=”I”>
<li>Wash car</li>
<li>Feed cat</li>
<li>Grocery shopping</li>
</ol>

LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<body>
<h1>Things to do today</h1>
<ul>
<li>Feed cat</li>
<li>Wash car</li>
<li>Grocery shopping</li>
</ul>
</body>
LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
Rada_khim@yahoo.com
The following definition list includes three
terms, one of which has two definitions:

LOGO
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 <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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
The following is an example of what a relative link
might look like:

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

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
You can make download markup more user-
friendly by adding supporting text and links,
like this:

LOGO
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<p><img src=” trumpet.jpg” width=”200”
height=”64” alt=”trumpet” />
Brass</p>

LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
The following HTML gives the mouse
graphic 20 pixels of white space on either
side and 25 pixels on the top and bottom:

LOGO
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
Similarly, you can even tell the browser
whether or not to repeat your background
image at all, using the background-repeat
property.

LOGO
rada_khim@yahoo.com
body {background-image: url("picture.gif");
background-attachment: fixed;
background-repeat: no-repeat;}

LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
The file will not sound as good, but visitors to your
website will be able to get it that much more
quickly.

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
People who download the files can listen to
the audio or watch the video as many
times as they like.

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<p>Click
<a href="media/virtual_office_tour.avi">here</a>
to watch our Virtual Office Tour video (AVI format,
12.4MB).
</p>

LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<object type="application/x-shockwave-flash"
data="movie.swf“ height="60" height="200">

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<param name="movie" value="movie.swf" />
<param name="BGCOLOR" value="#ffffff" />

</object>

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<embed height="100" width="100" src=“Song.mp3">

LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
Rada_khim@yahoo.com
 1- The Form Tag
The <form> tag is used to create an HTML
form:

<form>
.
input elements
.
< /form>

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
The values of Attribute Type are:
Text
Password
Checkbox
Radio
Submit

LOGO
rada_khim@yahoo.com
Hidden
Image
Button
Reset
File

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<textarea cols="40" rows="10">Please type
your message here.</ textarea>

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<form>

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

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

< /form>

LOGO
rada_khim@yahoo.com
8- Complete a Form

LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<table>
<tr>
<dt>1 Row Create</td>
</tr>
<tr>
<td>2 Row Create</td>
</tr>
</table>
LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<table >
<tr>
<th>Title1</th>
<th>Titile2</th>
</tr>
</table>

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<table >
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 1.6 The <td> colspan Attribute

The colspan attribute defines the number of

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

LOGO
rada_khim@yahoo.com
 1.7- The <td> rowspan Attribute

The rowspan attribute specifies the number

of rows a cell should span.

Syntax:
<td rowspan="number">

LOGO
rada_khim@yahoo.com
 1.8- The <td> width Attribute

The width attribute specifies the width of a

table cell.
Syntax:

<td width="pixels or %">

LOGO
rada_khim@yahoo.com
 1.9- The <td> height Attribute

The height attribute specifies the height of a

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

LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
<tr>
<td><i>This is the more Lesson</i></td>
<td>Thank you so much</td>
</tr>
</table>

LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
<table border="1">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>

LOGO
rada_khim@yahoo.com
<tr>
<td>Column 1</td>
<td>
<table border="1">
<tr>
<td>Table</td>
<td>nested</td>
</tr>
LOGO
rada_khim@yahoo.com
 <tr>
<td>in a</td>
<td>cell</td>
</tr>
</table>
</td>
<td>Column 3</td>
</tr>
</table> LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
For example:

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

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
SCROLLDELAY="number" → to manage
delay time, it's on second.

LOGO
rada_khim@yahoo.com
LOOP="number" → to manage sum of looping.

WIDTH="number" → to manage width of

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

LOGO
rada_khim@yahoo.com
For example using attributes of marquee:

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

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

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<marquee behavior="scroll" direction="left"
scrollamount="20"
onmouseover="this.stop();"
onmouseout="this.start();">
Go on... hover over me!
</marquee>

LOGO
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
Let’s look at a basic example to see how this
is done. Consider the following HTML
document outline:

LOGO
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<body>
<h1>CSS Heading 1 example!</h1>
<p>This is a paragraph that using CSS.</p>
</body>

LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<p style="font-family: sans-serif; color:
#3366CC;"> Test to using inline. </p>
<h1 style="color: #C7AA8D; font-size: 14;">

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<head>
<style type="text/css">
h1 {
color: #FF7643;
font-family: Arial;
}
p{
color: red;
font-size: 1.5em;
}
</style>
</head> LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
<head> <title>A Simple Page</title>
<link rel="stylesheet" type="text/css"
href="styles.css" />
</head>

LOGO
rada_khim@yahoo.com
<body>
<h1>First Title</h1>
<p>…</p>
<h2>Second Title</h2>
<p>…</p>
<h2>Third Title</h2>
<p>…</p>
</body>
LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
Unlike HTML’s <link> tag, @import is part of
the CSS language and has some definite un-
HTML -like qualities:

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<style type="text/css">
@import url(css/global.css);
@import url(css/forms.css);
p { color:red; }
</style>

LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
The asterisk, however, is a much shorter
way to tell CSS to select all HTML tags on
the page:

* { font-weight: bold; }

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
#banner {
background: #CC0000;
height: 300px;
width: 720px;
}

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
.special {
color:#FF0000;
font-family:"Monotype Corsiva";
}

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
The solution to the <h1> and <strong>
dilemma looks like this:

h1 strong { color: red; }

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
See more example:

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

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
And then use the following selector:

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

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
The full style might look something like this:

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

LOGO
rada_khim@yahoo.com
Thanks

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
This chapter introduces the common
techniques and building blocks used for
laying out HTML content in your pages.

LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
<div id="main">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit...</p>
</div>

LOGO
rada_khim@yahoo.com
<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
rada_khim@yahoo.com
 <div id="footer">
<p>Footer</p>
</div>
</div>

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
#wrap {
width:750px;
margin:0 auto;
background:#99c;
}

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
After that, we give the different sections of
the document different background colors to
make them show up.

LOGO
rada_khim@yahoo.com
#header {
background:#ddd;
}

#nav {
background:#c99;
}

LOGO
rada_khim@yahoo.com
#main {
background:#9c9;
}
#sidebar {
background:#c9c;
}
#footer {
background:#cc9;
}
LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
#main {
float:left;
width:500px;
background:#9c9;
}

LOGO
rada_khim@yahoo.com
#sidebar {
float:right;
width:250px;
background:#c9c;
}

LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
} LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
#header {
padding:5px 10px;
background:#ddd;
}
h1 {
margin:0;
}

LOGO
rada_khim@yahoo.com
#nav {
padding:5px 10px;
background:#c99;
}
#main {
float:left;
width:480px;
padding:10px;
background:#9c9;
} LOGO
rada_khim@yahoo.com
h2 {
margin:0 0 1em;
}
#sidebar {
float:right;
width:230px;
padding:10px;
background:#99c;
}
LOGO
rada_khim@yahoo.com
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
LOGO
rada_khim@yahoo.com
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
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
 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
rada_khim@yahoo.com
Here’s what those elements are used for:
 #body
 #header
 #main
 #content-1
 #content-2
 #content-2-1
 #content-2-2
 #footer
LOGO
rada_khim@yahoo.com
Step 1: The unstyled HTML
Step 2: Overall width and some colors

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

background:#fff; }

LOGO
rada_khim@yahoo.com
#body { width:960px; margin:0 auto;
background:#ddd; }
#header { background:#fdd; }
#content-1 { background:#bfb; }
#content-2-1 { background:#ddf; }

LOGO
rada_khim@yahoo.com
#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
rada_khim@yahoo.com
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
rada_khim@yahoo.com
Step 5: Push the footer down

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

Step 6: Clean things up a bit

LOGO
rada_khim@yahoo.com
#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
rada_khim@yahoo.com
#footer { clear:both; padding:10px;
background:#ff9; }

LOGO
rada_khim@yahoo.com
 LOGO
rada_khim@yahoo.com
LOGO