html_css_online

Document Sample
html_css_online Powered By Docstoc
					DREAMWEAVER CS4
   FOUNDATION
   (HTML and CSS)
WEB HOSTING
CPANEL
    cPanel Window




    cPanel Window




2
WEB HOSTING
CPANEL
   cPanel Window




   cPanel Window




                   3
WEB HOSTING
CPANEL
    Contact Information Updates




    Email Accounts Window




4
WEB HOSTING
CPANEL

               File Manager Dialog Box




   File Manager Window




                                         5
WEB HOSTING
CPANEL
    Disk Space Usage




    FTP Accounts Window




6
WEB HOSTING
CPANEL
   Bandwidth Usage Window




   Bandwidth Usage Window




                            7
WEB HOSTING
CPANEL

    Subdomains Window




8
HTML AND
BROWSERS
HTML (HyperText Markup Language) is a language that can be used to define
the elements in a web page. Html pages are read by Browsers.

A browser is an application that can:
• Download images and contents
• Read and interpret the content of a page

Browsers use the HTTP protocol (Hypertext Transfer Protocol) to transfer the
informations on the internet.

A URL (Uniform Resource Locator) is the address of a page and is composed of:
• HTTP > Protocol
• WWW > When accessing to the root
• DOMAIN > Domain name
• COM > Domain type or locator

example: http://www.domain.com/

It is recommended to write a URL without capital letters.




                                                                               9
HTML AND
BROWSERS
Some web site may have sub-domains.
In those cases, “www” would be
substituted by the domain’s folder
name on the server.

example: http://forum.domain.com/
The most common Browser is Internet                       Internet Explorer
Explorer. Although it is popular, it may
not be the right choice if you need
accuracy in your web developing. Many
CSS rules can be misunderstood in
older versions of “IE”. Note that “IE” is
no longer available for Mac users.
                                                        Netscape Navigator
A very popular browser, at the
beginning of the internet era, was
Netscape Navigator. Netscape lost the
challenge against Microsoft, and now it
is no longer popular.

Nowadays there are a number of              Mozilla Firefox                   Flock
browsers to choose from. The up
and coming most used browser has
become Mozilla Firefox. New browsers
are focusing on Social capabilities,
such as Flock.

                                                               Safari
Safari is the default browser for the
Mac, iPad and the iPhone.

Opera integrates a web browser and an
email client in only one application.

When you project a web site, make                              Opera
sure that it will be displayed in the


10
HTML AND
BROWSERS
same way on all the browsers. It would
be risky to project a web site for a
client, relying entirely on Mozilla Firefox,
then realize that your client uses
Internet Explorer.

Browsers temporary save web site files
into a Cache folder. Cache (Temporary
Internet Files) folder in Internet Expoler
v8 it is located at Tools> Internet
Options> General> Browsing
History> Delete                                Internet Explorer 8

In Mozilla Firefox v3.6 it is located at
Tools> Clear Recent History>
Details> Cache

The HTML of a page can be displayed
from the menu View.

• In Internet Explorer is View> Html
                                               Mozilla Firefox 3.6
• In Mozilla Firefox is View> Source

HTML is a passive non-programming
language based on TAGS. It does not
take any decisions. It just execute
what is asked to do. Other program
languages as C++, Java, PHP or ASP,
instead, are able to create interactions.

For this reason, HTML is more
forgivable then programming
languages. You won’t be prompted
with any error window if you forgot to          Source page in
                                               Mozilla Firefox 3.6
close a TAG.


                                                                     11
HTML AND
BROWSERS
W3C (World Wide Web Consortium
- www.w3c.org) is the organization        Example: HTML Code
that is working in order to standardize
HTML.

The latest release of HTML language
was on 24th of December 1999. After
that, HTML developed in XHTML. This
has more particular rules and requires
a little more of understanding.
                                          Example: HTML web address
A HTML page extension is “.html”. A
while ago, some HTML pages used
to have “.htm”. That was because
Windows 3.1 was not able to handle file
names longer than 8 characters and
extensions longer than 3.



      Example: XHTML Code




12
SETTING UP A
WEB SITE
To create your own web site you need
                                          Godaddy.com Hosting Plans
two things first:

• a name (domain)
• a place (host or server)

A domain can be registered on any
web site that offers these services.

For a good deal, you can use
some recommended sites like
                                          Sparkstation.net Hosting Plans
“Godaddy. com”.

For a good service and Singapore
domains you can use Sparkstation.net,
that offers a $30/year hosting + free
domains for students.

A server or a host plan can be
purchased after accurately reading the
services offered. Most people thinks
that a host plan is just a matter of
space. They measure the quality of a
host plan comparing space / price. So
10Gb is better than 1Gb as long as it
costs just slightly more. Unfortunately
space is just one of the parameters.

Another important thing to keep in
account is the bandwidth. You may
have a small web site such as 400Mb,
that every day consumes 5Gb of
bandwidth.




                                                                           13
SETTING UP A
WEB SITE
Definition:
                                         Bandwidth chart
• A megabyte (Mb) is a unit of
  information or computer storage
  equal to 1,048,576 bytes.
• A gigabyte (Gb) is a unit of
  information or computer storage
  meaning approximately 1.07 billion
  bytes.

                                         Bandwidth exceeded website
Imagine of the bandwidth as a
rechargeable credit account. Every
time your web site receives a visit,
you consume some bandwidth. The
measure of the use depends on the
size of your files.

If you have, for instance, a nice 10Mb
video available for streaming on your
web site, and every day 100 people
watches it, means that everyday you
consume 1Gb of bandwidth. In a month
you would consume 30Gb.

Most of the hosting plans are monthly
based. So, if you purchased a plan
that grants you 20Gb of bandwidth
in a month, following the previous
example your web site won’t be online
anymore from the 20th until the end
of the month. Instead you would see
a discouraging message “Bandwidth
quota exceeded”.




14
SETTING UP A
WEB SITE

Many cheap hosting plans are not
structured to support quick expansions
of web sites. Mostly those who offers
a space as big as a quarter of the
bandwidth.

For example, 5Gb space and 20Gb
bandwidth. Nowadays space is not as
important.
• If you want to publish videos on your
  web sites, you may want to upload
  onto YouTube instead.
• For images, you could use Flickr.

Doing so, it won’t be your website
using the bandwidth, but YouTube and
Flickr.

Bandwidth, instead, can be very
useful. Imagine you published a very
interesting content on your web site.
And there is a 300Kb picture in it. Now
imagine that a huge website finds your
content and decides to link it on the
home page.

If your visitors were just a few hundreds
per month, you might see that your
web statistics will jump in one day from
10 to 10,000. Now, multiply 300Kb by
10,000 users, and here we go, 3Gb
have been consumed in just one day.




                                            15
SETTING UP A
WEB SITE
If this happens for three consecutive days, it means that 9Gb of bandwidth will
be used up.

Well, if your hosting plan was offering 2.5Gb space and 10Gb bandwidth, you
have to hope that the number of visits to your web site will drop the next day.
Otherwise your website will go offline within 3 days of a new month.

In this example you would have left with 2.4Gb free and almost zero bandwidth.

In my opinion, the good proportion is minimum 1 to 10. In example 1Gb space,
10 Gb bandwidth.

For my own website I choose 10Gb space and 120Gb bandwidth. Just 4Gb
space were used, but every month the bandwidth overtook 100Gb.

Study your statistics to better plan the space and the bandwidth you may need.




16
BASIC HTML
TAGS
To use HTML is very easy. There are
just few key rules to understand.

HTML is based on TAGs. A “tag” is a
code that define specific attributes of
your page. Every tag must be included
within the symbols < and >. Once you
open a tag, you have to remember to
close it.

To close a tag, include it within the
symbols “</” and “>”. To better align
a HTML code in the page, is strongly
recommended to use tabulations. The
“parent tag” are opened and closed at
the very left of the page. One tabulation
(tab key) to push to the right the “child
tag”. Two tabulation for the “grandchild
tag” and so on.

Using this kind of hierarchy will make
your HTML page more readable and
understandable.

The following is a list of the most
common and useful tags. The ultimate
resource for HTML can be found at the
following link: http://www.w3schools.
com/html/html_intro.asp

The first tag you need in a HTML page
is the <html> tag.




                                            17
BASIC HTML
TAGS
You open the <html> tag at the beginning of the web page and you close it at
the very end with </html>.

The second key tag is <head>. It contains invisible data. It may set a path to link
CSS files, using the tag <style>. It may also specify page keywords using the
tag <meta>. Style and meta are special tags that do not require to be closed.

In the Head, you may also want to insert a <title> tag to set the title of the web
page.

Once you close the </head> tag, it is time for <body>.

Body contains all the visible parts of your web site. You can still hide content, if
you need it, just using the comment tag: <!-- Text that you want to hide -->

The </body> tag closes almost at the end of the page, right before the </html>.




18
BASIC HTML
TAGS
Although some designer still uses
table to set up a web layout, Web 2.0
set some other standards. The most
important tag in Web 2.0 HTML, is
<div>. With a Division you can set a
unique area of your web page. It may
help you greatly when will be about to
style using CSS.

In CSS, as we will see later, style rules
can be set as Advanced for Divisions.
Assigning a unique ID to each Division,
allows to set up independent advanced
rules. So, in example, the Paragraph in
the Division Main, can be styled as an
independent tag from the Paragraph in
the Division Footnote.

A well structured HTML page has
clearly named Divisions. A good CSS
file define Advanced styling ruled for
each Division.

HTML have some default tags that
help you to organize the structure of
the web page.

Titles have a hierarchy based on the
size of the title. The tag for title is “<h”
followed by a number from 1 to 6”>”.
<h1> Is a big header </h1> while <h2>
is a subtitle </h2> and so on.




                                               19
BASIC HTML
TAGS
You can create a link using a complex
tag. It opens with <a followed by a
specific link. Hyperlink Reference (href)
have to be included within quotes.

The image tag (img) does not require
to be closed by a closing tag. It is
enough to close the opened tag with
/> symbol at the end. You can specify
other settings for the tag right after the
URL.

For example you can see how to set
alignment, size and border. If you
specify width, you may skip height.
The image will be proportionally
scaled. If you do not set any border,
some browsers may use a default 1
pixel border. If you really do not want
any border, it is a good idea to set “0”
rather then omit it.

Using the tags <ol> and <ul> you
can create lists. Ordered lists (ol) will
display a number before each element
of the list. Unordered lists (ul) will
display a bullet instead. Each element
of the list must be enclose within a <li>
tag.




20
BASIC HTML
TAGS
A table in HTML requires at least 3
tags. The opening tag is <table>.
Every row begins with <tr>. Every cell
of the table starts with <td>. All the
tags must be closed as the end. The
Table tag can also contain additional
settings.

For size use the sub-tag Width.

For a border, the self describing tag
Border.

Cellpadding defines the inner margin
of the cells.

Cellspacing defines the outer margin
of the cells.

Table row tag normally does not
contain sub-tags. Some time you may
need a table header. If that is the case,
you can use the tag <th>.

Table data cells can contain sub-tags
as Width and Valign for size and
vertical alignment.




                                            21
BASIC HTML
TAGS
A full list of the table’s specifications can be found at this link: http://www.
w3.org/TR/html401/struct/ tables.html

<html>
<head>
<meta=”keywords here”>
<stlye=”/csspath/cssfile.css”>
<title>My First Page</title>
</head>

<body>
<!-- This is an invisible comment -->
<div id=titles>
<h1>This is a big title</h1>
<h2>This is a smaller title</h2>
<h3>This is a smaller title</h3>
<h4>This is a smaller title</h4>
<h5>This is a smaller title</h5>
<h6>This is a smaller title</h6>
<p>This is a paragraph</p>
</div>

<div id=link>
<a href=”http://www.creativecrew.com.sg”>This is the text that links</a>
</div>

<div id=image>
<!-- The next one is an image aligned left, 150 pixels large -->
<img src=”/images/finalme.jpg” align=”left” width=”150” border=”0” />
</div>

<div id=imagelink>
<!-- The next one is an image that links to a page -->
<a href=”http://www.creativecrew.com.sg”><img src=”/images/finalme.jpg” /></
a>
</div>

22
BASIC HTML
TAGS
<div id=unordered>
<!-- The next one is a list with bullets -->

<ul>
       <li>First item</li>
       <li>Second item</li>
       <li>Third item</li>
</ul>
</div>

<div id=ordered>
<!-- The next one is a list with numbers -->

<ol>
       <li>First item</li>
       <li>Second item</li>
       <li>Third item</li>
</ol>
</div>

<div id=table>
<!-- The next one is a table -->

<table width=”800” border=”0” cellpadding=”3” cellspacing=”3”>
      <tr>
            <td width=”200” valign=”top”>
            <p>This cell contains a paragraph of text aligned to the top. The next
cell contains an image.</p>
            </td>

           <td width=”600” valign=”top”>
           <img src=”/images/finalme.jpg” align=”left” width=”150” border=”0” />
           </td>
</ table> </div>
</body>
</html>

                                                                                 23
STYLE USING
CSS
CSS (Cascade Style Sheet) is a way
to separate the content of a html
document from its presentation.

The term cascading in CSS refers
to how many style sheets can affect
a single document in a cascading
manner. This means that they all come
together to create one single style that
decides the overall presentation of
the page. If styles between sources
conflict, a weighting system is used to
decide which style has precedence.

The html specifies what elements are
on the page and how they are grouped
and then the stylesheet specifies how
the page looks.

This is useful for a couple of reasons.
First and foremost it can save lots of
time and energy. CSS lets you control
aspects of how presentation such as
font color and size that previously took
lots of <font> tags mixed through the
html. If you wanted to change any of
the colors then you had to hunt down
all of the <font> tags and change them
appropriately.

CSS (Cascading style sheets) lets you
specify all the appearance properties
for a document in one place and thus
makes making changes much simpler.




24
STYLE USING
CSS
You can have hundreds of web pages
linked to one stylesheet and so to
change the appearance of all your
webpages you are only required to
change the one CSS file.

CSS rules can reside in the following
locations:

• External CSS style sheets

» Collections of CSS rules stored in
  a separate, external CSS (.css) file
  (not an HTML file). This file is linked
  to one or more pages in a website
  using a link or an @import rule in the
  head section of a document.

• Internal (or embedded) CSS style
  sheets

» Collections of CSS rules included in
  a style tag in the head portion of an
  HTML document.

• Inline styles

» Defined within specific instances
  of tags throughout an HTML
  document. (Using Inline styles is not
  recommended.)




                                            25
STYLE USING
CSS
There are three basic types of selectors used to define CSS styles:

CLASS selectors

Class styles let you apply style properties to any element or elements on the
page. A class of selector that begins with a period “.” and can be applied to any
element in a web page via the class attribute.

For instance, the class named .green would modify these elements:

<span class=”green”></span> and

The class selector is the most versatile selector option. Class styles can be
used to format any element (from text to images to multimedia), and they can
be used as many times as you like on any page in a Web site.

Class style names always begin with a period, and you can create class
styles with any name as long as you don’t use spaces or special characters
(hyphens and underscores are okay).




26
STYLE USING
CSS
Thus you could create a class style called “.caption” for the text that appears
before your pictures, and you could create a style called “.photo-credit” to
format the name of a photographer differently from the caption.

In that case, your class styles would look like this:

.caption
.photo-credit

Dreamweaver helps you with the period (or a dot). If you choose class as
the selector type and forget to include a dot at the beginning of the name,
Dreamweaver adds one for you.

(Note: Don’t include any space between the dot and the style name.)

One other thing that can make styles confusing is that when you apply a class
style to text or another element, the dot doesn’t appear in the name when
it’s added to your HTML code. Thus, if you applied the “.caption” style to a
paragraph tag <p> to format the text under an image, it would look like this:

<span class=”caption”>This is a photo of an Egret in flight.</span>




                                                                                  27
STYLE USING
CSS
Class styles must be applied to an
element, such as the Paragraph tag
shown in the example. Class styles
can even be added to elements that
are already defined by other styles.

When you create a class style in
Dreamweaver, the style is displayed in
the CSS Styles panel, and added to
the CSS drop-down list in the Property
inspector.

You can apply class styles using the
CSS drop-down list, shown in this
figure. It’s common to create styles
to align images and other elements
to the right or left of a page, and
styles with the names .float-right
and .float-left are included in most
of the predesigned CSS layouts in
Dreamweaver.

These styles commonly include margin
spacing to create a little white space
between an image and text when text
is wrapped around the aligned image.




28
STYLE USING
CSS
TAG selectors

HTML tag styles redefine the
formatting for a particular tag, such
as <h1>. When you create or change
a CSS style for the <h1> tag, all
text formatted with the <h1> tag is
immediately updated.

The TAG selector is used to redefine
existing HTML tags. Select this option
if you want to change the formatting
options for an HTML tag, such as
the <h1> (heading 1) tag or the <ul>
(unordered list) tag.

In many cases, redefining existing
HTML tags with CSS has advantages
over creating new styles. For example,
content formatted with the <h1> tag
is well recognized on the Web as the
most important text on a page. For
that reason, many search engines give
priority to text formatted with the <h1>
tag.

Similarly, the hierarchical structure of
the <h1> to <h6> tags helps ensure
that even if a visitor to your site
changes the text size in his or her
Web browser, text formatted with the
<h1> tag is still larger relative to text
formatted with an <h2> tag, which
is larger than text formatted with the
<h3> tag, and so on.


                                            29
STYLE USING
CSS
The ability to change the appearance
of headings and other tags with CSS
makes it possible to retain these
advantages while still being able to use
the font, size, color, spacing, and other
formatting options that you prefer in
your Web design.

When you use the TAG selector, the
style definition is applied automatically
to any text or other element that’s been
formatted with the corresponding tag.

Thus, if you’ve formatted a headline
with the <h1> tag and then create a
new <h1> style, the formatting you
used to define the style will apply
automatically to the headline as soon
as the style is created.




30
STYLE USING
CSS
ID selectors

Advanced (or ID) styles selector
redefine the formatting for a particular
combination of elements, or for other
selector forms as allowed by CSS (for
example, the selector td h2 applies
whenever an <h2> header appears
inside a table cell.) Advanced styles
can also redefine the formatting for
tags that contain a specific id attribute
(for example, the styles defined by
#myStyle apply to all tags that contain
the attribute-value pair id=”myStyle”).

Think of ID styles as the building
blocks of most CSS layouts. ID styles
must begin with a pound “#” sign, and,
similar to class styles, Dreamweaver
adds a pound “#” sign to the beginning
of the style name automatically if you
forget to include it.

(Note: Don’t include any space
between the # and the style name.)

The ID selector option is a new
addition to the CSS Rule dialog box in
Dreamweaver CS4 (in CS3, you had to
choose the Advanced option to create
an ID style). Similar to class styles,
you can name ID styles anything you
like as long as you don’t use spaces or
special characters (again hyphens and
underscores are okay).


                                            31
STYLE USING
CSS
Thus an ID style used to identify the
sidebar section of a page could look
like this:

#sidebar

Similar to class styles, the # sign is not
used in the HTML code when a style is
applied to an element, such as a <div>
tag like this:

<div id=”sidebar”> Between these
tags with the sidebar ID style, you
would include any headlines, text,
or other elements in your sidebar.
</div>

What’s special about ID styles is that
they should be used only once per
page. This makes them ideally suited to
formatting <div> tags and other block-
level elements that are used to create
distinct sections in a page. Thus, ID
styles are great for creating page
layouts where you want to define each
section of a page only once.

In the predesigned CSS layouts
included in Dreamweaver, all the
designs are created by combining a
series of <div> tags with ID styles
using names like #container, #header,
and #footer to identify the main
sections of the design.




32
STYLE USING
CSS
In this figure, you can see how a collection of ID and Class styles are displayed
in the CSS Styles panel after they’re created. ID styles are also added to the
ID drop-down list in the Property inspector, making them easy to apply to a
selected element.




                    Please refer to Vertical Menu Exercise




                                                                                33
VERTICAL MENU
EXERCISE
Vertical Menu Exercise:

The following HTML together with the following CSS, returns a vertical menu.

                                    HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<title>Vertical Menu</title>
<link href=”verticalmenu.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”navigation”>
      <ul>
            <li><a href=”#”>Home page</a></li>
            <li><a href=”#”>Gallery<br /></a>
     </li>
      <ul>
            <li><a href=”#”>Phi Phi <br />
     </a></li>
            <li><a href=”#”>Krabi<br />
            </a></li>
            <li><a href=”#”>Bangkok<br />
            </a></li>
      </ul>
            <li><a href=”#”>Links</a></li>
      <ul>
            <li><a href=”#”>Partners<br />
            </a></li>
            <li><a href=”#”>Sponsors</a></li>
      </ul>
</ul>

34
VERTICAL MENU
EXERCISE
</div>
</body>
</html>




                                        CSS

@charset “utf-8”;
body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: small;
}
#navigation li {
     margin: 0px;
}
#navigation ul {
     font-family: Arial, Helvetica, sans-serif;
     font-size: small;
     margin: 0px;
     padding: 0px;
     width: 159px;
     list-style-type: none;
}
#navigation a {
     font-weight: bold;
     color: #FFF;
     text-decoration: none;
     background-color: #666;
     display: block;
     padding-top: 5px;
     padding-right: 12px;
     padding-bottom: 3px;
     padding-left: 22px;
     border-top-width: 1px;
     border-right-width: 1px;

                                                  35
VERTICAL MENU
EXERCISE
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #CCC;
     border-right-color: #333;
     border-bottom-color: #333;
     border-left-color: #CCC;
     background-image: url(exercise_images/images/menu_bg_metal.jpg);
     background-position: bottom;
}
#navigation a:hover {
     background-image: url(exercise_images/images/menu_bg_metal.jpg);
     background-position: top;
}

#navigation a:active {
     background-color: #F00;
     border-top-width: 1px;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #333;
     border-right-color: #CCC;
     border-bottom-color: #CCC;
     border-left-color: #333;
}
#navigation {
     width: 165px;
}

36
INTRODUCTION
EXERCISE (01)
Introduction Exercise:

                                     HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<title>Design Protein</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
      <div id=”header”><img src=”http://lab.vox.sg/images/banners/banner_
printspecialist.gif” />
      </div>
      <div id=”bodytext”>
 <h1>Welcome to Design Protein</h1>
 <h2>Are you here for more juice?</h2>
 <p>This is the foundation course of the Take Control of Your Photos series.
 Have you ever wondered why your photos don’t turn out the way you
expected? Are you still using the “P” mode or other fully automatic exposure
modes of your camera? Or you don’t quite understand what “exposure” is
about? Then this course is tailored for you regardless you’re a beginner or you’ve
been taking photographs for a long time.</p>
 <p>This course covers the basics of <span class=”bigblue”>photographic</
span> theories, lighting, composition, basic equipment and techniques.
Participants will be able to apply what they’ve learned at the field shooting
session.</p>
 <table>
   <tr>
     <td>
      <a href=”http://lab.vox.sg”><img src=”http://lab.vox.sg/trainers/portfolio/
aaron/aaron1.jpg” width=”150” /></a>
      </td>

                                                                               37
INTRODUCTION
EXERCISE (01)
    <td>
     <a href=”http://lab.vox.sg”>This is what we call paradise.</a>
     </td>
    </tr>
  <tr>
    <td>
     <a href=”http://lab.vox.sg”><img src=”http://lab.vox.sg/trainers/portfolio/
aaron/aaron2.jpg” width=”150” /></a>
     </td>
    <td>
     <a href=”http://lab.vox.sg”>This is where all the birds live and feed.</a>
     </td>
    </tr>
 </table>
     </div>
</div>

<div id=”footer”>
</div>
</body>
</html>

                                       CSS
#header {
    height: 279px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
}
#wrapper {
    height: 900px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;

38
INTRODUCTION
EXERCISE (01)
}
#bodytext {
      width: 700px;
      margin-right: auto;
      margin-left: auto;
}
#footer {
      background-color: #0C0;
      height: 30px;
      width: 900px;
      margin-right: auto;
      margin-left: auto;
}
body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: x-small;
      background-color: #333;
      color: #666;
}
a{
      color: #F0F;
}
td {
      padding: 20px;
}
h1 {
      font-family: “Comic Sans MS”, cursive;
      color: #093;
}
h2 {
      color: #F00;
}
.bigblue {
      color: #009;
      font-size: large;
}

                                                   39
FLOAT BOXES
EXERCISE (02)
Float Boxes Exercise:

                                 HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<title>Untitled Document</title>
<link href=”boxes_styles.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”wrapper”>
 <div id=”one”>1</div>
 <div id=”two”>2</div>
 <div id=”three”>3</div>
 <div id=”four”>4</div>

 <div id=”five”>5</div>
 <div id=”six”>6</div>
 <div id=”seven”>7</div>
 <div id=”eight”>8</div>
</div>
</body>
</html>




40
FLOAT BOXES
EXERCISE (02)
                                        CSS

@charset “utf-8”;
#one {
     font-family: Arial, Helvetica, sans-serif;
     color: #999;
     background-color: #0F0;
     height: 150px;
     width: 150px;
     float: left;
}
#two {
     font-family: Arial, Helvetica, sans-serif;
     color: #999;
     background-color: #F0F;
     height: 150px;
     width: 150px;
     float: left;
}
#three {
     font-family: Arial, Helvetica, sans-serif;
     color: #999;
     background-color: #FF0;
     height: 150px;
     width: 150px;
     float: left;
}
#four {
     font-family: Arial, Helvetica, sans-serif;
     color: #999;
     background-color: #0FF;
     height: 150px;
     width: 150px;
     float: left;
     clear: right;
}

                                                  41
FLOAT BOXES
EXERCISE (02)
#five {
       font-family: Arial, Helvetica, sans-serif;
       color: #999;
       background-color: #00F;
       height: 150px;
       width: 150px;
       float: right;
}
#six {
       font-family: Arial, Helvetica, sans-serif;
       color: #999;
       background-color: #F00;
       height: 150px;
       width: 150px;
       float: right;
}
#seven {
       font-family: Arial, Helvetica, sans-serif;
       color: #999;
       background-color: #9F9;
       height: 150px;
       width: 150px;
       float: right;
}
#eight {
       font-family: Arial, Helvetica, sans-serif;
       color: #999;
       background-color: #F9C;
       height: 150px;
       width: 150px;
       float: right;
}




42
LAYOUT
EXERCISE (03)
Layout Exercise:

                                  HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<title>Untitled Document</title>
<link href=”layout_styles.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”wrapper”>
 <div id=”header”>HEADER</div>
 <div id=”left”>
 <div id=”navigation”>
  <ul>
      <li><a href=”#”>Home Page</a></li>
  </ul>
  <ul>
      <li><a href=”#”>Links</a></li>
  </ul>
  <ul>
      <li><a href=”#”>About Us</a></li>
  </ul>
  <ul>
      <li><a href=”#”>Contact</a></li>
  </ul>
      <ul>
      <li><a href=”#”>Sponsor</a></li>
  </ul>
 </div>
 </div>
 <div id=”main”>

                                                                          43
LAYOUT
EXERCISE (03)
 <img src=”http://www.seroundtable.com/archives/gmail-cartoon.jpg”
width=”440” />
 </div>
 <div id=”right”>RIGHT</div>
 <div id=”footer”>FOOTER</div>
</div>
</body>
</html>




                                        CSS
#header {
       font-family: “Arial Black”, Gadget, sans-serif;
       background-color: #FC3;
       height: 150px;
       width: 800px;
       margin-right: auto;
       margin-left: auto;
}
#wrapper {
       height: 900px;
       width: 800px;
       margin-right: auto;
       margin-left: auto;
}
body {
       background-color: #000;
}
#left {
       font-family: “Arial Black”, Gadget, sans-serif;
       background-color: #F00;
       height: 600px;
       width: 160px;
       float: left;

44
LAYOUT
EXERCISE (03)
}
#main {
      font-family: “Arial Black”, Gadget, sans-serif;
      background-color: #00F;
      height: 600px;
      width: 440px;
      float: left;
}
#right {
      font-family: “Arial Black”, Gadget, sans-serif;
      background-color: #0F0;
      float: left;
      height: 600px;
      width: 200px;
}
#footer {
      font-family: “Comic Sans MS”, cursive;
      background-color: #CCC;
      float: left;
      height: 150px;
      width: 800px;
}
#navigation {
      width: 160px;
}

#navigation li {
     margin: 0px;
}
#navigation ul {
     font-size: small;
     width: 160px;
     margin: 0px;
     padding: 0px;
     font-family: Arial, Helvetica, sans-serif;
     list-style-type: none;

                                                        45
LAYOUT
EXERCISE (03)
     font-weight: bold;
     float: left;
}
#navigation a {
     font-weight: bold;
     color: #FFF;
     text-decoration: none;
     background-color: #666;
     display: block;
     padding-top: 10px;
     padding-right: 12px;
     padding-bottom: 10px;
     padding-left: 22px;
     border-top-width: 1px;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #CCC;
     border-right-color: #333;
     border-bottom-color: #333;
     border-left-color: #CCC;
}

#navigation a:active {
     background-color: #F00;
     border-top-width: 1px;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;

46
LAYOUT
EXERCISE (03)
     border-left-style: solid;
     border-top-color: #CCC;
     border-right-color: #333;
     border-bottom-color: #333;
     border-left-color: #CCC;
}
#navigation a:hover {
     background-color: #099;
     border-top-width: 1px;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #CCC;
     border-right-color: #333;
     border-bottom-color: #333;
     border-left-color: #CCC;
}




                                   47

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:24
posted:4/5/2012
language:English
pages:47