Htmlcss Snap

HTML & CSS In A Snap | Copyright 2010 Solomon Cheah. All rights reserved worldwide.
1

Squeeze Page Step By Step
Bonus:

http://www.SqueezePageStepByStep.com

_________________________________________________________________________________________________________

Discover A New Listbuilding
Bombshell That Can Grow
Your List To 10,000 Then Up
To 100,000 Subscribers Faster
And Easier Than You Ever
Dreamed Possible:
http://goo.gl/Sbiqe

HTML & CSS In A Snap | Copyright 2010 Solomon Cheah. All rights reserved worldwide. 2

Legal Notice

While all attempts have been made to verify the information provided in this publication,
the Author assumes any responsibility for errors, omissions, or contrary interpretation
of the subject matter herein. The Author disclaim any warranties (express or implied),
merchantability or fitness for any purpose.

This publication is not intended for use as a source of legal or accounting advice. The
Author wants to stress that the information contained herein may be subject to varying
state and/or local laws or regulations. All users are advised to retain competent counsel
to determine what state and/or local laws or regulations may apply to the user's
particular business.

The Reader of this publication assumes responsibility for the use of these materials and
information. The Author does not warrant the performance or effectiveness of any sites
stated in this book. All links are for informational and educational purposes only and are
not warranted for content, accuracy or any other implied or explicit purpose. Adherence
to all applicable laws and regulations, federal, state, and local, governing professional
licensing, business practices, advertising, and all other aspects of doing business in the
United States or any other jurisdiction is the sole responsibility of the Reader.

The Author assumes no responsibility or liability whatsoever on the behalf of any
Readers of these materials. Any perceived slights of specific people or organizations are
unintentional.

All Rights Reserved

No part of this report may be reproduced or transmitted in any form whatsoever,
electronic, or mechanical, including photocopying, recording, or by any informational
storage or retrieval without express written, dated and signed permission from the
Author.


TABLE OF CONTENTS

Page

1.0 Instructions 5

2.0 Troubleshooting 7

3.0 Web Page Structure
3.1 Standard Web Page Structure 8
3.2 HTML DOCTYPE Declaration 8
3.3 Meta Tags 9
3.4 The Title Tag 10

4.0 HTML (Hypertext Markup Language)
4.1 What is HTML? 11
4.2 HTML Formatting 12
4.3 HTML Comments 13

5.0 CSS (Cascading Stylesheets)
5.1 What is CSS? 14
5.2 CSS Styling 15
5.3 Power of CSS Styling 16
5.4 CSS Comments 17
5.5 CSS Syntax 17
5.6 CSS Type Selector 19
5.7 CSS ID Selector 19
5.8 CSS Class Selector 21
5.9 Types of CSS Styling 22

6.0 HTML Elements With Start & End Tags (Box Default) 27

7.0 The Box Model 32

8.0 Positioning
8.1 Block-Level Elements and Inline Elements 39
8.2 Centralizing a HTML Block 46
8.3 Floating HTML Elements 48
8.4 Absolute Positioning 51
8.5 Relative Positioning 52
8.6 CSS Text-Align Property 52


TABLE OF CONTENTS (Contd)

9.0 CSS Background
9.1 Background Color 54
9.2 Background Header Image using CSS 55
9.3 Background Header Image Using HTML 58
9.4 Repeat Body Background Images using CSS 59
9.5 Single Body Background Image using CSS 61

10.0 HTML
10.1 List 62
10.2 Forms 70
10.3 Hyperlink(s) 72
10.4 Tables 81

11.0 Miscellaneous Formatting
11.1 Horizontal Lines 91
11.2 Line Break 92

12.0 Definitions
12.1 HTML Elements Syntax 93
12.2 HTML Attributes 93

13.0 CSS Properties 95

14.0 Resources 99


1.0 INSTRUCTIONS

This e-Book has a lot of exercises which are aimed at fully illustrating the
concepts and principles of web designing using HTML (Hypertext Markup
Language) and CSS (Cascading Style Sheets).

Before we begin, youll need to create a folder on your desktop (or any other place
in your computers hard drive). Once done, unzip your downloaded zip folder
(SnapImages) and copy the following unzipped files into the newly created folder:
1. image.jpg
2. header.jpg
3. logo.jpg
4. background.jpg
5. checkbox.gif

The exercises in this eBook require the use of the Notepad application (Windows).
Do not use Microsoft Word as they have a lot of default settings that will affect
the results of the exercises.

The exercises require you to paste the example codes (HTML & CSS) onto the
Notepad screen. To enable browsers to display the web page, you must
subsequently save the Notepad file with .html (or .htm) extension e.g.
testpage.html (or any other name that you wish). Remember to save the file into
your newly created folder. This is the HTML file which will show a web page
when you open it with a browser.

To see how the above is carried out, open the Notepad application by clicking the
Start button / All Programs / Accessories / Notepad. Copy the following codes
and paste the same onto your Notepad screen.

<html>
<head>
<title>My first web page</title>
</head>
<body>
<p> This is my first web page! Yipee!</p>
</body>
</html>

Action: Save the file (with a .html extension) into your newly created folder.
Then, go to your folder and youll see the newly created html file.

Important: You will be using this html file for all your exercises!


To display your web page, right-mouse click the HTML file and select your
preferred browser to open the file. Your browser will display the web page with
the title My first web page! (on the top left of your browser window) and the
text paragraph This is my first web page! Yipee!.

Yes, you have created your first web page!

Using Notepad application is one of the ways to create a web page by saving the
file with a .html extension which can then be displayed by a browser. You can
also use web designing software like Macromedia Dreamweaver or Microsoft
FrontPage to do the same. For creating squeeze pages or sales pages, it would be
sufficient to use the Notepad application.

Close your browser and your Notepad file.

After closing the Notepad file, you may be wondering where the html file is now
residing in your computer. In actual fact, there is no Notepad file in your
computer! You can only get back the Notepad file when you open the HTML file
with a browser.

How to retrieve your Notepad file

Right-mouse click the saved html file and select the browser to open the same.
Youll see the web page that you have created earlier.

When the web page is displayed, go to:
Windows Explorer: View / Source
Firefox: View / Page Source
Google Chrome: View page source. You must right-mouse click the screen to
get the View page source link.

The screen will open the Notepad application and display the web page source
codes. This is the same way which you can use to view the source codes of web
sites or blogs via your browser.

Recap:
You can retrieve your Notepad file via your browser when you open your HTML
file. Any changes that you make to the HTML and CSS codes will affect the web
page after you have saved the file and refresh your browser.


2.0 TROUBLESHOOTING

In web designing, the prescribed CSS and HTML coding must be exact so that
browsers can display the web page with the expected results. In cases where you
cannot get the results while doing the exercises, you must check your coding
again.
A missing or wrongly applied signs e.g. colon (:), semi-colon (;), inverted commas
(), comma (,) period (.), angle brackets (<>), hash key (#), open parenthesis ( ( ),
closing parenthesis ( ) ), equal sign (=), open brace ( { ), close brace ( } ) or
forward slash (/) will not give you the expected results.
Below are the most common mistakes made by web designers:
Example:
Missing period (.) as highlighted in red below:
<style type="text/css">
.test {
border:3px solid #ffe87c;
margin-left: 20px;
width: 200px;
background-color:#cccccc;
padding:5px;
}

Example:

Missing semi-colons (;) as highlighted in red below :
.test {
border: 3px solid #ffe87c;
margin-left: 20px;
width: 200px;
background-color:#cccccc;
padding:5px;
}

Example:
Missing inverted commas () or semi-colons (;) as highlighted in red below :

<p style="font-weight:bold; margin-top: 20px;margin-left:10px;
font-family:verdana;">Signs highlighted in blue are common mistakes</p>

Remember: In cases when you cannot get the expected results, you
should carefully check your codes again.

3.0 WEB PAGE STRUCTURE

3.1 Standard Web Page Structure

Below is the standard web page coding that is used as a starting point to
build squeeze pages, sales pages or even a full blown website:

Example:

<!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=iso-8859-
1" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Insert your web page title here</title>
<meta name="description" content="Summary description of your web
page contents">
<meta name="keywords" content="You web page content keywords">
</head>
<body>
</body>
</html>

Explanatory Notes:
At this point in time, I would like to explain only the body tags (<body>
</body>). The rest will be covered shortly. The body tag is the holder of
the web page contents. Therefore, all coding with regard to the contents
are placed between the opening (<body>) and closing (/body>) body tags.

3.2 HTML DOCTYPE Declaration:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE stands for Document Type Declaration and must appear at the
top of every web page (on top of the <html> tag). It is important to specify
a DOCTYPE that refers to a Document Type Definition (DTD) which
specifies the markup language rules so that browsers can render the web
page content correctly.


3.3 Meta Tags:

<meta http-equiv="Content-type" conte nt="text/html;
charset=iso-8859-1" />

The specification of the charset allows browsers to know the type of fonts
to use. The charset=iso-8859-1 is specifically catered for Western-
European languages and is the default character set in most browsers.

The content=en-us declares the primary language of the document
which in this case is US English.
<meta name="description" content="..">

This is the place to put a summary of the description of your web page.
Some search engines may index the meta description tag and display the
description content as a summary of the search results. It is therefore a
good idea to craft attractive description content to entice web surfers to
click on the search results.
<meta name="keywords" content="">
This is where your list of keywords and keyword phrases are inserted that
are relevant to your web page. Should there be more than one keyword or
keyword phrases that are relevant to your web page content, they must be
separated by a comma. E.g. squeeze page, build squeeze page, squeeze
page step by step etc.

Even though most search engines do not place emphasis on such keywords
when determining web page ranking, it is advisable to put in the relevant
keywords that are commonly search for by web users as some search
engines (Yahoo) do take into account such keywords when ranking a web
page (not site).


3.4 The Title Tag
Any text that you place between the <title> and </title> tags will appear
on the top left hand corner of your browser. In search engine results, the
title of the web page will appear as an underlined title at the top of each
search result. The title text will also be used to describe your page when
someone bookmark or add to their Favorites list.
The title of the web page is an important factor in determining search
engine rankings. Web pages that get listed high in Googles search results
often have keywords that are search for by web users. You may want to use
Googles Keyword Tool:

https://adwords.google.com/o/Targeting/Explorer?__u=1000000000&_
_c=1000000000&ideaRequestType=KEYWORD_IDEAS#search.none)

to check on keywords that are commonly searched for by web users so that
you can craft your web page title accordingly. At the same time, most
major search engines will display the web page title at the top of each
search results. Similar to description meta tags, it would be a good idea to
try to craft your web page title in an eye grabbing way to entice web users
to click on the search results.


4.0 HTML (HYPERTEXT MARKUP LANGUAGE)

4.1 What is HTML?

HTML is a formatting language using tags for browsers to format web
pages. The HTML code structure consist of a series of opening tags (<>)
and closing tags (</>). It is in between these two tags that will contain the
web page contents e.g. headings, paragraphs, texts, images and links etc.

Below is an example of a simple web page written in HTML tags with some
web page content on it:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>This is the heading </h1>
<p> This is the first text paragraph </p>
<p> This is the second text paragraph </p>
<br/>
<p> This is the third text paragraph which has a larger paragraph spacing
because of the line break </p>
</body>
</html>

Explanatory Notes:
Each HTML tag has a certain meaning to browsers. For example, when a
browser encounters a <h1> tag, the browser will treat the contents inside
the opening <h1> and closing </h1> tag as a text heading. Similarly,
browsers will treat the contents inside the <p> tag as paragraph text.

Some HTML elements have no contents e.g. a line break tag (<br>) or
horizontal line (<hr>). In these cases, the tags are closed at the start tag
itself e.g. <br/> or <hr/>. We will cover this later.

Action:
To see how the web page would look like, copy the above codes onto your
Notepad screen. Save the file and refresh your browser. Youll see four text
paragraphs on your browser screen.


4.2 HTML formatting

Lets look at an example to see how HTML is used to format web pages.

<html>
<head>
<title> </title>
</head>
<body>
<h1><font size="5" face="arial">The text in red are the formatting
attributes</font></h1>
<p>
<i><b> This text paragraph is enclosed by the formatting tags </b></i>
</p>
<h2><font size="5" face="Arial">This is the second heading</font></h2>
<p>
<font size="3" face="verdana">
This is a font size 3 text paragraph in <i><b>"Verdana"</b></i>font.
</font>
</p>
</body>
</html>

Explanatory Notes:
Youll notice that the formatting of the web page contents is done using
special tags e.g. <font size> consisting of formatting instructions or tags
that denote a specific meaning e.g. <i> (italics) or <b> (bold).

Such formatting tags enclosing the web page contents will tell browsers to
display the contents accordingly. This method of formatting web page
content is very tedious as you need to put in the formatting tags in each of
the web page content e.g. headers and paragraphs etc.. Imagine the time
and effort needed to change your header (e.g. to a bigger font etc.) when
there are hundreds of pages in a web site changes will have to be made in
each of the web pages.

The above method of formatting web page content is now out of date.
Nowadays, web designers use the CSS (Cascading Stylesheets) method to
format web pages which I will cover in Section 5.0. However, HTML tags
are still being used but not the formatting attributes or tags.


4.3 HTML Comments
HTML Comments are used to explain the HTML codes. They can be very helpful
especially if you revisit your codes after a few months where you may have
forgotten the purpose of your coding. HTML Comments are not displayed by
browsers.

HTML comments are written like this: 

Example:

<p style="font-weight:bold; font-size:20px;">Free Money-Making Report
Reveals</p>


5.0 CSS (CASCADING STYLESHEETS)

5.1 What is CSS?

CSS is used to style web pages written in HTML. It is specifically designed
with the aim to separate web page content from presentation. The
following exercise will make this clear.

Action:
Copy the following onto your Notepad screen:

<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1> This is the first heading</h1>
<p>
This is a text paragraph.
</p>
<h2> This is the second heading</h2>
<p>
This is a text paragraph.
</p>
</body>
</html>

Action:
Save the file and refresh your browser. Youll see two headings with their
respective text paragraphs.

So far, the headings and text paragraphs (web page contents) are without
any presentation formatting (styling). Now lets proceed to Section 5.2
where well look at CSS styling.


5.2 CSS Styling

In the earlier section, you have seen an example of a web page that has no
styling. Now, lets us look at example of a web page that has been styled
using CSS.

Action:
Copy the following codes onto your Notepad screen (overriding the
previous codes):

<html>
<head>
.headingtest {
font-family: arial;
font-size: 25px;
font-weight: bold;
text-decoration: underline;
}
.fonttest {
font-size: 20px;
font-family: arial;
color: #dd2600;
}
</style>
</head>
<body>
<h1 class="headingtest"> This is the first heading</h1>
<p class="fonttest">
This is a font size 2 text paragraph in Arial font.
</p>
<h2 class="headingtest"> This is the second heading</h2>
</p>
</body>
</html>

Action:
Save the file and refresh your browser. Youll see two underlined
headings with their respective text paragraphs (red).

In the example above, CSS styling is done between the opening <head> tag
and closing </head> tag. With just an addition of a single line of styling
codes, you can format several paragraphs of text/headers. As compared
with HTML formatting (Section 4.2 HTML Formatting), CSS formatting

looks much cleaner and with less coding.

Important: Any contents that are put between the HTML opening and
closing tags will have NO presentation style (i.e. there are no instructions
to the browser on how to display the contents (e.g. borders, margins,
padding, width, height, font-size or font color etc), unless it is styled with
CSS.

5.3 Power of CSS Styling

Lets look at the ease of making changes to web pages that are styled using
CSS.

Using the codes in the previous example in Section 5.2 CSS Styling,
change the font-size property from 15px to 25px (in blue) as follows:

<html>
<head>
.headingtest {
font-family: arial;
font-size: 25px;
font-weight: bold;
text-decoration: underline;
}
.fonttest {
font-size: 25px;
font-family: arial;
color:#dd2600;
}
</style>
</head>
<body>
<h1 class="headingtest"> This is the first heading</h1>
</p>
<h2 class="headingtest"> This is the second heading</h2>
</p>
</body>
</html>


Action:
Save the file and refresh your browser. Youll notice that the font size for
both the text paragraphs are now 25 pixels by just making one single
change to the CSS declaration.

This is one of the main benefits of CSS styling where a single change in the
CSS property value will affect several content items of the web page or
even the whole web site.

5.4 CSS Comments

CSS Comments are used to explain CSS codes when you are designing your
web site. They will indicate what your codes are all about when you come
back to edit them later. Like HTML Comments, CSS Comments are
ignored by browsers and are not displayed.

A CSS comment begins with "/*" and ends with "*/".

Below is an example of CSS comments (in red):

/* Container holding the header, footer and contents box */
#container {
border: 1px solid #cccccc;
width:760px;
margin-top: 20px;
margin-bottom:10px;
}

5.5 CSS Syntax

CSS styling has the following syntax:

Selector { Property: Value;}

Below is an example of CSS styling terms:

Selector Declaration Declaration

h1 {font-size: 35px; font-family: arial;}


In the above example, h1 is called the selector and the curly bracket ( { )
contains the Declaration, which in turn comprised of the Property
(font-size) and a Value (35px). Remember all these terms as you will
encounter them later.

Selectors are used to tell browsers how the contents should be styled.
In the above example, the selector h1 tells the browser to display the
heading according to the CSS Declaration (property: value). In this case,
the CSS Declaration tells browsers to display an Arial font size 35 pixels.

Types of Selectors:
Type Purpose:
Type selectors Select a specific HTML tag (e.g. <h1>, <p> etc.) to
style
Class selectors Select one or more HTML tags with an assigned
class to style
ID selectors Select only one HTML tag (with one specific ID on
the same page) to style

Section 5.6 to 5.8 below will to provide examples on how these different
types of selectors work.


5.6 CSS Type Selectors

A CSS type selector names a specific HTML tag to style.

Action:
To illustrate this, copy the following onto your Notepad screen:

<html>
<head>
p {
color: blue;
font-size: 28px;
}
h1, h2 {
color:red;
font-size: 28px;
}
</style>
</head>
<body>
<h1> This is a header with red text </h1>
<p>This is a blue text paragraph </p>
<h2> This is a header with red text </h1>
<p>This is a blue text paragraph </p>
</body>
</html>

Explanatory Notes:
In the above example, youll notice that the CSS styling selector selects
those HTML tags in the <body> tag to style. For example, the content
inside the <p> tag is styled in blue color font with font-size 28 pixels.
Similarly, the h1 and h2 headers are styled in red font with font-size 28
pixels.

Action:
Save the file and refresh your browser. Youll see the headers in red font
color and the text paragraphs in blue.


5.7 CSS ID Selector
If you want to format the contents of a particular HTML tag, you can place
an ID identifier (normally words relevant to the HTML content) inside the
tag e.g. <h1 id=mainheadline> This is the Main Headline</h1>.
To style the Main Headline, you use the same id name (#mainheadline) as
the name of the ID selector together with the formatting instructions in
the <head> tag section.
When browsers encounter the id name <h1 id=mainheadline>, they will
look for the selector with same id name (e.g. #mainheadline) and display
the contents according to the formatting instructions in the selector.
Note: If you want to use CSS ID selector, the ID name can only be used
once on the same web page.
The example below will illustrate how ID selectors work.
Action:
Copy the following onto your Notepad screen and save the file.

<html>
<head>
#box {
background-color:#8ee5ee;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="box">
<p> Text paragraph inside a div box </p>
</div>
</body>
</html>

Explanatory Notes: In this example, when browsers encounters an id
name (e.g. <div id="box">), it will go and look for the selector with the
same id name (e.g. #box) and style the <div> tag according to the
selectors declarations (e.g. blue background color with 1 pixel border).
When styling a web page using CSS ID selector, a # (hash symbol) is used.

Action: Save the file and refresh your browser to display the web page.

5.8 CSS Class Selector
Unlike CSS ID selectors (ID name can only be used once on the same web
page), the same CSS class name can be used more than one time. In other
words, the name of each CSS classes can appear more than once on a given
web page

Action:

<html>
<head>
.test {
color: #cd2626;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<h1>This is a header </h1>
<p class=test>This is a red text paragraph</p>
<p class=test>This is a red text paragraph</p>
</body>
</html>

Explanatory Notes:
CSS classes are very useful as you can set up different presentation
templates e.g. one class name to highlight a block of text with a
background color and another class for small fonts e.g. for disclaimer links
etc. All you need to do is to insert the class name into the HTML tags (e.g.
<p class=example>) and you are set to go.

Action:
Save the file and refresh your browser. You should see a header with two
text paragraphs in red.


5.9 Types of CSS Styling

We will cover three common methods of styling web pages using CSS.

Linked CSS Styling:
In this method of styling web pages, all the styling instructions are in a file
(normally saved as stylesheet.css). A link is placed inside the <head> tag
as follows:

<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<head>

When a browser encounters this <link href="stylesheet.css"
rel="stylesheet" type="text/css"/> code on a web page, it will search for a
separate document named stylesheet.css which will tell the browser to
display the contents according to the styles listed therein.

The styling instructions are exactly the same as those used in embedded
styling except that it is placed inside an external file. Below is what you
will see inside a stylesheet:

body {
margin:0px;
padding:0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 15px;
}
#head {
width: 801px;
height: 244px
}

A stylesheet will have rows of styling codes. The above example is only a
small portion of it.

Any changes made to the stylesheet will affect all the web pages linked to
the stylesheet. For example, if you have a website with 100 pages and you
want to change the default font-size, all you have to do is to change font-
size value (e.g. 15px to 18px) and all the web pages will be changed
accordingly. Similarly, you can change the background color of your web
pages for your whole site (with hundreds of pages or more) by just
changing one piece of code (just six letters) in your stylesheet!


Embedded CSS Styling:
The CSS embedded styling codes are inserted between the opening <head>
tag and closing </head> tag of a web page as show in the example below.
Example:

<head>
1" />
p {
color:#262500;
font-size: 25px;
font-weight: bold;
</style>
</head>
<body>
<p>This is a text paragraph</p>
</body>
</html>

Embedded styling only affects a particular web page with the embedded
style coding. For linked styles, it will affect all the pages that are linked to
the stylesheet.

Three Methods of Writing CSS Embedded and Linked Styling:

Method 1:
#container {border: 1px solid #cccccc; width:760px; margin-top: 20px;
margin-bottom:10px; margin-left: auto ; margin-right: auto ;}

Method 2:
#container {
width:760px;
margin-top: 20px;
margin-bottom:10px;
margin-left: auto ;
margin-right: auto ;
}


Method 3:
#container
{
width:760px;
margin-top: 20px;
margin-bottom:10px;
margin-left: auto ;
}

Methods 2 and 3 are preferred as it is easy to read the CSS
properties/values and spot for any missing colons or semi-colons.

Inline CSS Styling:
Inline CSS styling are similar to HTML formatting (see Section 4.2) as they
are inserted inside each HTML tags. Inline styling only affect the contents
with the inline styling codes.

Example:

<p style="font-size: 12px; font-weight: bold; color: red;">This is an inline
styling </p>

In this example, the inline styling specifies how the text paragraph should
be displayed by browsers. For inline styling, the styling instructions are
placed inside each HTML tag.


CSS Styling Sample

Below is an example of the three types (in red) of CSS styling in action:

<head>
1" />
<link href="my_style_sheet.css" rel="stylesheet" type="text/css" />
#idtest {
font-size: 25px;
color: #9172ec;
text-transform: uppercase;
}
.test {
font-size: 15px
}
</style>
</head>
<body>
<h1 id="idtest">This text paragraph is styled using embedded CSS
styling</h1>
<p class="classtest">This text paragraph is styled using embedded CSS
styling</p>
<p style="font-weight: bold; font-size:15px; color: blue;">This text
paragraph is styled using inline CSS styling</p>
</body>
</html>


Explanatory Notes:
Below is the different styling used in the above example:

Linked styling:
<link href="my_style_sheet.css" rel="stylesheet" type="text/css" />

Embedded styling:
#idtest {
font-size: 25px;
color: #9172ec;
text-transform: uppercase;
}
.test {
font-size: 15px
}
</style>

Inline styling:
<p style="font-weight: bold; font-size:15px; color: blue;">This text
paragraph is styled using inline CSS styling</p>

Action:
Save the file and refresh browser. You should see the heading in capital
letters with two text paragraphs.

Linked Style vs Embedded Style

If you are using linked styling (stylesheets) for all your web pages and you
want a particular page to have a different styling than those specified in
the stylesheets, you can use embedded styling as the latter type of styling
overrides the stylesheet styling.

Similarly, inline styles in turn will override the embedded styles. For
example, if a particular text paragraph of a web page has a black color text
(as set by the embedded or linked (stylesheet) styles), you can use inline
styling to change the text to a different color.


6.0 HTML ELEMENTS WITH START & END TAGS

This is an important principle to know - HTML elements with an opening tag (<>)
and closing tag (</>) has a default box-like feature. This is the Aha thing in
web designing.

Remember:
Such boxes, by default have invisible borders until you turn it on with
CSS styling.

Here are some of the HTML elements that have start and end tags:

<body> </body>
<div> </div>
<p> </p>
<span> </span>
<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>,
<ul> </ul>
<li> </li>
<table> </table>
<tr> </tr>
<td> </td>
<form> </form>

You can turn the border of such boxes on using the following CSS properties:

border: 1px solid #cccccc

When designing web pages, it is good practice to make the border of your HTML
elements visible so that you can see their position and help you to make
adjustments along the way.

Extremely important: Making the border visible should always be the first
step to take when troubleshooting your web page layout.

The <Div> Tag

The <div> tag is very useful as it can be used to create boxes (containers) to hold
anything e.g. header, footer, horizontal menus, images and text paragraphs etc.

The <div> tag can also be used to create web page columns (sidebars) and page
sections. As it has a box like feature, we can move the boxes around the web
page using CSS styling (margins, padding, CSS positioning etc.) which we will
cover later.


Below is an example of a <div> box holding a paragraph text.
Copy the following onto your notepad screen:
<html>
<head>
<title>Div Tag</title>
#divbox {
border-top: 1px solid #000000;
border-right: 5px dotted #000000;
border-bottom: 5px dashed #000000;
border-left: 5px double #000000;
width: 320px;
height: 120px;
background-color: #cccccc;
margin-top:30px;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="divbox">
<p> This is a text paragraph in a div box
</div>
</body>
</html>

Explanatory Notes:
You can style the div box in terms of its border thickness/color/type (solid,
dotted, dashed etc.) or box height/width/background color or placement on the
web page etc.

Action:
Save your HTML file and refresh browser. Youll see a 320 x 120 pixels grey
box with different border types.

As earlier mentioned, you can move the div box around by just changing the
margin-top and margin-left property values. Try changing the two values, save
the file and refresh your browser. You should see the position of the div box has
shifted.

Tip: It is very common to put a <div> tag inside another div box so that you can
create a spacing between the two div boxes.


Action: Copy the following onto your Notepad screen:

Example:

<html>
<head>
<title>Div Tag</title>
#outerbox {
border:1px solid #000000;
width:360px;
padding:15px;
}
#innerbox {
width: 350px;
border:1px solid #cccccc;
background-color:red;
}
</style>
</head>
<body>
<div id="outerbox">
<div id="innerbox">
<h1> This is a heading </h1>
<p> This is the first text paragraph</p>
<p> This is the second text paragraph</p>
<p> This is the third text paragraph</p>
</div>
</body>
</html>

Explanatory Notes:
By putting a 15 pixels padding to the outerbox, there is a spacing created. At
the same time, the heading and text paragraphs are all vertically align. This
padding trick is very useful if you want to vertically align your HTML elements.


The <P> Tag

The <p> tag also has a default box because it has an opening and closing tag.
You can style the <p> box in terms of its border thickness/color/type, box
height/width/, background color and layout position.

Action:

<html>
<head>
<title>The <p> Tag</title>
#divbox {
width: 320px;
height: 120px;
background-color: #00b2ee;
padding: 10px;
}
.test1 {
background-color: #ffffff;
}
.test2 {
}
</style>
</head>
<body>
<div id="divbox">
<p class="test1"> Test 1: This is a text paragraph inside a blue div box </p>
</div>
<p class="test2"> Test 2: This is a standalone text paragraph with a grey
background</p>
</body>
</html>

Action:
Save the Notepad file and refresh browser. Youll see a text paragraph (box-like
feature) inside a div box and a standalone text paragraph (box-like feature).


The <Span> Tag

You can use the <span> tag to style a portion of a text paragraph. In the
following illustration, you would also see a box-like feature which you can use
to highlight a portion of text.

Action:

<html>
<head>
<title>Span Tag</title>
.paragraphtest {
font-size: 20px;
}
.spantest {
background-color: #ffff00;
font-size: 20px;
}
</style>
</head>
<body>
<p class="paragraphtest"> This is a text paragraph with <span
class="spantest">a yellow box using the span tag</span> as an example.
</p>
</body>
</html>

Explanatory Notes:
You can use the <span> tag to highlight a portion of any text paragraph by
putting a background color to it.

Action: Save the file and refresh browser. Youll see a yellow box enclosing a
portion of the text paragraph.


7.0 THE BOX MODEL

In the previous section, we looked at the box like feature of HTML tags (those
which have opening and closing tags).

In this section, we will look at the box model, i.e. the box component itself. It is
extremely important to understand how the box model works as it will greatly
help you to design your web page layout. This is another Aha thing in web
designing.

The above diagram shows a typical HTML box where it has a border and inside
the same is the HTML content. Then, there is a padding area where the thicker
the padding area, the further away will the contents be away from the border and
vice versa. This is important thing to know as you can use this knowledge to
position your HTML content (heading, images, text paragraphs etc.)

Outside the box border will be the margin. The margin determines the distance of
the box from its adjacent HTML elements (div box, images, text paragraphs,
headings etc.) according to their HTML tags). The larger the margin, the further
away will be the box from its adjacent elements and vice versa.


The following are examples to show how the box model works.
Lets look at an example where we turn on the border of the HTML elements.

Action:
Copy the following codes onto your Notepad screen:

<html>
<head>
<title>The Box Model</title>
div {
border: 5px solid #cd2626;
width: 300px;
}
p {
font-size: 35px;
}
</style>
</head>
<body>
<div>
<p> Paragraph text inside a div box</p>
</div>
</body>
</html>

Explanatory Notes:
In this example, we have a div box (<div>) holding a text paragraph box (<p>)
and we have placed a 5 pixels border on both the div and text paragraph boxes.

Action:
Save the file and refresh browser. Youll see a red border box (div box) enclosing
the text paragraph box.


Lets look at styling the spacing between the div box and the text paragraph box
using the:

Div box padding property;


<html>
<head>
div {
width:300px;
padding: 10px;
}
p {
font-size:35px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

Explanatory Notes:
We have added a 10 pixels padding to the div box.

Action:
Save the file and refresh browser. Youll see that the text paragraph is now
pushed 10 pixels away from the div box border because of the 10 pixels padding
given to the div box.


Text paragraph box margin property:
<html>
<head>
div {
width:300px;
}
p {
font-size:35px;
margin: 10px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

Explanatory Notes:
Instead of adding a 10 pixels padding to the div box, we can also put in a 10 pixels
margin to the text paragraph box to get the same result. I would suggest you take
a look at the box model diagram again and understand its principles.

Action:
Save the file and refresh browser. Youll see that the text paragraph remains at 10
pixels away from the div box border as you can either use the padding property
(div box) or the margin property (text paragraph box) to get the same result.


Below are two examples to show how we can use the <div> tags and the
margin/padding properties to manage the layout. Play around with the CSS
properties and values to see its effects:

Example 1:

<html>
<head>
#outerdivbox {
width:500px;
padding:10px;
}
#innerdivbox {
}
.sidebartext {
font-size:20px;
margin-top:0px;
}
</style>
</head>
<body>
<div id="outerdivbox">
<div id="innerdivbox">
<p class="sidebartext"> Paragraph text inside a div box</p>
</div>
</div>
</body>
</html>

Explanatory Notes:
In this example, we have a div box which holds three text paragraphs (boxes).
This div box is placed inside another div box. There is a padding of 10 pixels that
separates the two div box. Note: We have turn on the borders of the inner div box
and the text paragraph boxes.


Action:
Save the file and refresh browser to view the result. You should see the inner div
box (with borders turned on) holding the three text paragraphs (borders turned
on) enclosed by the outer div box. You may wish to turn off the border by deleting
the border property (in red below), save the file and refresh your browser to view
the result:

#innerdivbox {
}

.sidebartext {
font-size:20px;
margin-top:0px;
}

Remember:
HTML elements with opening and closing tags, by default have
invisible borders until you turn it on with CSS styling.

Now, add a background color property (in red) to the innerdivbox selector as
follows:
#innerdivbox {
background-color:#fff8c6;
}

Action:
Save the file and refresh browser. Youll see that the inner div box background is
now light yellow in color.


Example 2:

<html>
<head>
#outerdivbox {
width:500px;
padding:10px;
}
#innerdivbox {
background-color:#fff8c6;
padding-top:25px;
padding-left:15px;
padding-bottom:10px;
}
.sidebartext {
font-size:20px;
margin-top:0px;
}
</style>
</head>
<body>
<div id="outerdivbox">
<div id="innerdivbox">
</div>
</div>
</body>
</html>

Explanatory Notes:
In example 2, we added the padding property to the innerdivbox selector to
create some spacing for the text paragraphs.

I hope the above examples have given you some insights on how the box model
works. Learn this well and it will help you to manipulate the positioning of the
HTML elements, whatever way you want.

8.0 POSITIONING
8.1 Block-Level Elements & Inline Elements

Important principle: With block-level HTML tags (HTML elements
with opening and closing tags that has a box like feature), their box-like
feature will default to 100% of the screen width with an automatic
line break separating each other when displayed by browsers.

To demonstrate how block-level elements work, copy the following into
your Notepad screen:

<html>
<head>
body {
font-size: 20px;
}
#outerdivbox {
heightL20px;
}
.sidebartext {
font-size:20px;
}
h1{
font-size:20px;
span{
font-size:20px;
}
#encloseparagraph {
border:1px solid #cccccc;
width: 400px;
}
</style>
</head>
<body>
<div id="outerdivbox">This is a div box </div>
<h1> This is a header</h1>
<p class="sidebartext"> This is a text paragraph</p>
<img src='x' alt="image"/>
<ul style="border: 2px solid #000000">
<li style="border:1px solid #ff0000;"> hello</li>

<li> hello </li>
</ul>
<form style="border: 1px solid #cccccc">This is a form tag
</form>
<table style="border: 1px solid #cccccc;">
<tr>
<td>This is a table cell</td>
</tr>
</table>
<div id="encloseparagraph">
<p style="border:4px solid #fff8c6;">This is a paragraph enclosed by div
box</div>
</body>
</html>

Action:
Save the file and refresh your browser. You will see that the <div>, <h1>,
<p>, <img>, <ul>, <li>, <form> and <table> tags all have defaulted line
breaks. This means is that when you put two HTML block-level elements
one after another (as in the above example), browsers will automatically
provide a line break separating the two block-level elements.

At the same time, all the above mentioned tags (except for the <table> tag
and <image> tag) will default to 100% width of the:
a) Screen; or
b) any HTML elements (e.g. div boxes) enclosing it as show in the above
example:
<div id="encloseparagraph">
<p style="border:4px solid #fff8c6;">This is a paragraph enclosed by
div box</div>

unless you specify a width (in pixels or in percentages) to the
HTML tags.

Question: What if I want to put the HTML elements side by side instead of
having a default line break? No problem as you can use the float property
as covered in Section 8.3.


Now, let us look at some examples to learn the finer points of the 100%
default screen width for HTML elements (those with opening and closing
tags).

Important Principle: You have to give a width (less than 100% width)
property to the block-level HTML tags if you want to adjust the horizontal
position of the HTML elements (using the margin property). Why is this so?
At 100% default width, the HTML element cannot move!

Besides giving a width property of less than 100% (e.g. width:50%), you
can also specific the width in pixels (e.g. width:300px) provided the width
in pixels is not more than the screen width.

Lets look at some examples:

Action:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<head>
<meta http-equiv="Content-type" content="text/html;
<meta name="description" content="Insert the description of your web
page here">
<meta name="keywords" content="Insert your web page keywords here">
#maincontainer {
width: 760px;
height:300px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.test {
}
</style>
</head>
<body>

<div id="maincontainer">
<p class="test"> This is my first web page! </p>
</div>
</body>
</html>

Explanatory Notes:
In this example, we have put a paragraph text (with box like feature) inside
a div box (called main container). As you would expect, the text paragraph
is default 100% of the width (760 pixels) of the div box (we have specified
a width of 760 pixels or else it will default to 100% of screen width).
Furthermore, we have specified the height of the div box at 300 pixels.

Action:
Save the file and refresh browser. Youll see that the text paragraph (box in
yellow color) is enclosed by the div box (box in black color). The paragraph
text, by default, is aligned to the left side of the text paragraph box.

If you want to move the text paragraph to the center of the main container,
you can either:

a) use the text-align: center property value or

b) specify a width to the text paragraph box in percentages (must be less
than 100% width value) or in pixels (pixel value must be less than the
width of the div box) AND specifying a margin-left property value

c) specify a width to the text paragraph box in percentages (must be less
than 100% width value) or in pixels (pixel value must be less than the
width of the div box) AND specifying a margin-left: auto and
margin-right: auto property value

To center the paragraph text using the text-align property:

Insert the text-align property (in red) to the test selector as follows:

.test {
text-align: center;
}

Action:
Save the file and refresh your browser. Youll see that the text paragraph
(not text paragraph box) is now centralized.


To center the paragraph text using margin-left property value:

To do this, you must specify the width of the text paragraph box (must be
less than the width of the enclosing div box) and then put in the margin-
left property value (both of them in red below) s follows:

Transitional//EN"
transitional.dtd">
<head>
page here">
#maincontainer {
width: 760px;
height:300px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.test {
margin-left: 270px;
width: 200px;
}
</style>
</head>
<body>
</div>
</body>
</html>

Action:
box is now centralized. With the margin-left property method, you must
experiment with the property value to get the centralized position.

To center the paragraph text using margin-left: auto and
margin-right: auto property value:

As usual, you must specify the width of the text paragraph box (must be
less than the width of the enclosing div box) and then put in the margin-
left: auto and margin-right: auto property values (both of them in red
below) as follows:

Transitional//EN"
transitional.dtd">
<head>
page here">
#maincontainer {
width: 760px;
height:300px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.test {
width: 200px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
</div>
</body>
</html>


Action:
box remains centralized. With the margin-left: auto and margin-right:
auto property method, you do not need to experiment with the property
value to get the centralized position.

Note:
You must use this DOCTYPE in order for this method to work:

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> (Parenthesis excluded).

Anyway, this DOCTYPE is a standard DOCTYPE.

After finishing this section, you should have an idea on how block-level
elements work especially.

Inline Elements and line breaks:

Inline elements do not have auto line breaks unlike block-level elements.

Two common inline elements are the <span> and <img> tags.

Action:

<html>
<head>
body {
font-size; 20px;
}
.spantest {
font-size:20px;
}
</style>
</head>
<body>
<p class="paragraphtest"> This is a text paragraph with <span
class="spantest">a yellow box using the span tag</span> as an example.
</p>
<img src="pic1.jpg" height="180px" width="180px" alt="pic 1"/>

<img style="margin-left: 20px;" src="pic2.jpg" height="180px"
width="180px" alt="pic 2"/>
<img style="margin-left: 20px;" src="pic3.jpg" height="180px"
width="180px" alt="pic 3"/></body>
</html>

Explanatory Notes:
As we did not use any images in the example, youll to see a blank square
image box with image title.

Action:
Save the file and refresh your browser. Youll see that the <span> and
<img> tags (not block-level elements) did not create a new line break and
they just fit into the flow of the page.

8.2 Centralizing a HTML Block (Box)

As mentioned in the previous section, you can use CSS auto margins to
center a HTML block element. Since HTML block elements (e.g. div box or
text paragraph box) have a default 100% width (see Section 8.1), there is
nothing to centralize (already 100% width) unless you give a width to
the block elements which must be smaller than the containing
block (body or div box) that is enclosing it or you use the text-
align: center property value (in this case, the block element
(box) is still defaulted to 100% in width of the containing block
(e.g. body, div box etc.) except that the text (always align to the
left by default) inside the block element is now centralized.

IMPORTANT TIP: When you are not able to centralize your div
box, it is most likely that you have not given a width to the same.

Below is an example to illustrate this.

Action:
Copy the following onto your Notepad screen.

Transitional//EN"
transitional.dtd">

<head>
#container {
margin-left: auto ;
width: 500px;
font-size:25px;
}
</style>
</head>
<body>
<div id="container">
<p style="margin-left: auto; margin-right: auto;width:400px;border:1px
solid #cccccc;">This is a text paragraph</p>
</div>
</body>
</html>

Explanatory Notes:
For this to work (centralizing a HLML block), your HTML file must have
the following DOCTYPE above the <html> tag as follows:

Action:
Save the file and refresh your browser. Youll see a centralized div box
container AND a text paragraph box that is centralized inside the div
box. .

Take a look at the text paragraph box. Even though the box is centralized,
the text itself is not. As previously covered, a centralized box is different
from its contents inside (text paragraph in this case). To centralized the
text paragraph, you need to add the text-align: center property as follows:

<p style="margin-left: auto; margin-right:auto;width:400px;border:1px
solid #cccccc; text-align: center;">This is a text paragraph</p>


8.3 Floating HTML Elements

We learnt from Section 8.1 that HTML block-elements (except for inline
elements line like the <span> and <img/> tags) have default line breaks
separating each other. If you want HTML elements to be displayed side by
side, you need to use the CSS float property. You can float any HTML
elements to the left or right.

Action:

<html>
<head>
#divbox {
width: 450px;
padding: 10px;
}
.test {
font-size:14px;
font-family: verdana;
text-align: justify;
}
</style>
</head>
<body>
<div id="divbox">
<img src="image.jpg" height="180px" width="180px" alt="pic 1"/>
<p class=test>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean at purus nec quam luctus dignissim. Vivamus aliquet. In
ullamcorper lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean at purus nec quam luctus dignissim. Vivamus aliquet. In
ullamcorper lorem.Quisque convallis lacus luctus quam. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Nunc scelerisque, leo vulputate
imperdiet suscipit, arcu tortor</p>
<div>
</body>
</html>

Explanatory Notes:
When a <p> tag is placed after the <img> tag (as above), the paragraph
text (<p> tag), which is a block-level element, as expected, will have a
default line break. This is already covered in Section 8.1.


Action:
Save the file and refresh your browser. Youll see a line break separating
the image and paragraph text.
In order to place the image and text paragraph side by side, we need to put
a CSS float: left property to the image. When a HTML element (image)
specifies the side to be floated, it will allow other elements (text paragraph)
to flow around the floated element.
Action:
To illustrate this, copy the following inline styling (in red) to the <img> tag
as follows:

<img style="float:left; margin-right: 10px; margin-bottom: 5px; "
src="image.jpg" height="180px" width="180px" alt="pic 1"/>

Note:
We have added the "margin-right: 10px; margin-bottom: 5px" properties
to the image in order to create a margin between the image and paragraph
text.

Action:
Save the file and refresh browser. Youll see that the paragraph text is now
wrapped around the image with a margin separating them. This is a useful
technique to know and remember.

Play around:
Change the placement of the image from the left to the right. To do this,
change the float direction from left to right by inserting the float:right;
margin-left:10px property values (in red) to the <image/> tag as follows:

<html>
<head>
#divbox {
width: 450px;
padding: 10px;
}
.test {
font-size:14px;
font-family: verdana;
text-align:justify;

}
</style>
</head>
<body>
<div id="divbox">
<img style=float:right; margin-left:10px; margin-bottom: 5px;
src="image.jpg" height="180px" width="180px" alt="pic 1"/>
<p class=test>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean at purus nec quam luctus dignissim. Vivamus aliquet. In
<div>
</body>
</html>

Explanatory Notes:
We have change the margin-right: 10px to margin-left: 10px
as the text paragraph is now wrapping around the image on the left
side.

Action:
Save the file and refresh your browser. Youll see that the image is now
displayed on the right side of the div box with the text wrapping around
the left side of the image.


8.4 Absolute Positioning
Using absolute positioning to position a HTML element (image, table, div
box etc,) on a web page, the same will appear at the exact location
according to the pixel values that you specify.

Action:
To illustrate the above, copy the following onto your Notepad screen:

<html>
<head>
div {
position: absolute;
top: 50px;
left: 280px;
border: 1px solid #cb2626;
}
</style>
</head>
<body>
<div> This is a div box with absolute positioning</div>
<p style="border: 1px solid #cccccc; font-size: 30px; margin-top: 50px;">
This is a text paragraph</p>
</body>
</html>

Action:
Save the file and refresh your browser. Youll see a red div box that is 50
pixels from the top and 280 pixels from the left side of the screen.

The absolute positioning of the div box is not affected by the position of
any other elements around (in this example, the text paragraph box). The
location will solely depend on the pixels (top and left) that you specify.
Furthermore, it does not matter where you place the <div> tag in the
coding as the div box will display 280 pixels from the left and 50 pixels
from the top.


Play around:

Try to change the position from left: 280px to left:180px and see
the result. .

8.5 Relative Positioning
When you use relative positioning to position an element, the new position
is calculated from its original position (the position where it would have
been if you hadnt made the changes). You can move the element either to
the right, left, up or down.
Action:
To illustrate how the relative positioning works, copy the following onto
your screen:

<html>
<head>
</head>
<body>
<p>Text paragraph 1</p>
<p>Text Paragraph 2</p>
<p style="position: relative; left: 100px;">Text paragraph 3</p>
</body>
</html></body>
</html>

Action:
Save the file and refresh your browser. Youll notice that only the 3
rd

paragraph has shifted 100 pixels left from its original position.

8.6 CSS Text-Align Property
You can use CSS text-align property to center the text, shift the text to the
right or left or justify the text.
Examples of text-align property values:
text-align: center;
text-align: left;
text-align: right;
text-align: justify


Action:

<html>
<head>
<title></title>
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<p class="center"> This text is aligned center</p>
<p class="left"> This text is aligned left</p>
<p class="right"> This text is aligned right</p>
<p class="justify"> This text is justified. This text is justified. This text is
justified. This text is justified. This text is justified. This text is justified.
This text is justified. This text is justified. This text is justified. This text is
justified. This text is justified. This text is justified. This text is justified.
This text is justified. This text is justified. This text is justified. This text is
justified </p>
</body>
</html>

Action:
Save the file and refresh your browser. Youll see that the text paragraphs
are aligned center, left, right and justified.


9.0 CSS BACKGROUND
9.1 Background Color
You can apply background color to HTML tags that have opening and
closing tags e.g. <body>, <p>, <h1>, <span>, <table>, <tr>, <td>, <span>,
<div>, <ul>, <li> etc. As these tags have box like properties, we just need
to put a background color to these boxes.
Action:

<html>
<head>
#header {background-color: #cccccc;
width: 760px;
height: 60px;
font-size: 28px;
padding-top: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="header">
<p>My SpecialHeader</p>
</div>
<p> This is a text paragraph </p>
</body>
</html>

Action:
Save the file and refresh your browser. Youll see a grey background
header with text on it.

Important: When you set any image as a background, you can put text,
images or even text links on it.


9.2 Background Header Image Using CSS
You can use CSS to put a background image as the header of your web
page.

Action:

<html>
<head>
#headerbox {
height: 150px;
width: 760px;
background-image: url('header.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="headerbox">
</div>
</body>
</html>

Explanatory Notes:
The headerbox selectors width: 760px; height: 120px; property values
sets the size of the header div box (not the image size). The image
displayed on the browser is the actual size of the image which should be
the same as the header div box.

The background-repeat: no-repeat; property value prevents the image
from displaying more than once.

Action:
Save the file and refresh browser. Youll see a header image being
displayed.


Put a Logo on Header Image (Using Float Property)

Action:
To put a logo image on the header image using the float property, copy the
following onto your Notepad screen:

<html>
<head>
#header {
width: 760px;
height:150px;
}
</style>
</head>
<body>
<div id="header">
<img style="float: left; margin-top:20px; margin-left:20px; margin-right:
20px;" src="logo.jpg" height="100px" width:"120px" alt="image_name"/>
<h1 style="color:ffffff;margin-top:50px;"> Header Text</h1>
</div>
</body>
</html>

Explanatory Notes:
When you put a logo image on a header background image, the former will
automatically move to the left edge of the header background image. To
create a top and left spacing between the header border and the logo image,
you specify a margin-top: 20px; margin-left: 20px to the logo image.

As the <h1> tag (header text) is a block-level element, the browser will
automatically create a line break. As we want the logo image and the h1
text to be side by side, we specify a float: left property to the logo image to
float the image to the left of the header box, resulting in the header text
nesting on the right side of the image.

To create a spacing between the logo image and the header text, we add
the margin-right: 10px; property to the image, thus pushing the header
text 10 pixels away from the image.

You can change the logo size by changing its width and height (in red):
<img style="float: left; margin-top:20px; margin-left:20px; margin-right:
20px;" src="logo.jpg" height="100px" width:"80px" alt="image_name"/>

The alt="image_name attribute is useful in cases where an image could
not be displayed (maybe wrong URL link), the browser will instead display
the text specified in the alt attribute. At the same time, it also provides
search engines spiders with keywords relating to the image for them to
index.

Action:
Save the file and refresh browser. Youll see that the logo image and header
text and nesting side by side each other.

Put a Logo on Header Image (Using Absolute Positioning)

Action:
To put a logo image on top of the header image using absolute positioning,
copy the following onto your Notepad screen:

<html>
<head>
#header {
height:150px;
width:760px;
}
#logo {
position: absolute;
left: 30px;
top:40px;
}
</style>
</head>
<body>
<div id="header">
<img id="logo" src="logo.jpg" height="100px" width="120px"
alt="image_name"/>
</div>
</body>
</html>


Explanatory Notes:
You can change the position of the logo by changing the left and right
property values (in red) as follows:

#logo {
position: absolute;
left: 30px;
top:40px;
}

You can change the logo size by changing its width and height (in red):
<img id="logo" src="logo.jpg" height="100px" width:"120px"
alt="image_name"/>.

Action:
Save the file and refresh your browser. Youll see the logo image nesting on
top of the header image.

9.3 Background Header Image Using HTML (Instead of CSS)

In the Section 9.2 example, the header image fits in nicely into the div
header box as they have the same height and width dimensions. There are
times when the size of the header image is slightly bigger or small in
dimension to the header div box.

To overcome this problem, you have to set the background image to fit the
size of the header container.

<html>
<head>
#headerbox {
height:150px;
width:760px;
}
</style>
</head>
<body>
<div id="headerbox">
<img src='header.jpg' height="150px" width= "760px"
alt="image_name"/>
</div>
</body>
</html>

Explanatory Notes:
You can easily change the width and height of the image size to fit into the
header div box by adjusting the height and width of the image as shown
here in red:

<img src='header.jpg height="150px" width: "760px" alt="image_name"/>

Action:
Save your file and refresh your browser. Youll see the header
image exactly fits the header div box.

9.4 Repeat Body Background Images using CSS
We can put small images (that repeats itself) as the web page body
background using the CSS Repeat property.

Action:

<head>
body {
background-image: url('logo.jpg');
}
#maincontainer {
background-color:#ffffff;
width: 760px;
margin-left: auto;
margin-right: auto;
}
#header {
height: 150px;
width: 760px;
}
#logo {
position: absolute;

left: 150px;
top: 40px;
}
</style>
</head>
<body>
<div id="header">
</div>
<p style="font-size:50px;color:#000000;margin-top: 40px;
margin-left:20px;"> This is the first text paragraph</p>
<p style="font-size:50px; color:#000000; margin-left: 20px;"> This is the
second text paragraph</p>
<p style="font-size:50px; color:#000000;margin-left:20px;"> This is the
third text paragraph</p>
<p style="font-size:50px;color:#000000;margin-left:20px;"> This is the
fourth text paragraph</p>
<p style="font-size:50px;color:#000000;margin-left:20px;margin-
bottom:40px;"> This is the fourth text paragraph</p>
</div>
</body>
</html>

Explanatory Notes:
To put a background image on the web page body, you have to insert the
background-image: url('logo.jpg') property value into the body selector.
Make sure you do not put in the background-repeat: no-repeat property
value and the logo image will repeat itself.

Action:
Save the file and refresh your browser. Youll see the logo image
repeating itself on the web page background.


9.5 Single Body Background Image using CSS
Insert a large image as the web page body background.
Action:

Transitional//EN"
transitional.dtd">
<head>
body {
margin:0px;
padding:0px;
background-image:url('background.jpg');
margin-top: 5px;
}
#maincontainer {
background-color:#ffffff;
width: 760px;
margin-left: auto;
margin-right: auto;
}
#header {
height: 150px;
width: 760px;
}
#logo {
position: absolute;
left: 150px;
top: 30px;
}
</style>
</head>
<body>
<div id="header">
<img src="header.jpg" height="150px" width="760px"
alt="image_name"/>
<img id="logo" src='logo.jpg' height="100px" width:"120px"
alt="image_name"/>

</div>
<p style="font-size: 50px; color:#000000;margin-top: 40px;margin-
left: 20px;"> This is the first text paragraph</p>
<p style="font-size: 50px; color:#000000; margin-left: 20px;"> This is
the second text paragraph</p>
<p style="font-size: 50px; color:#000000;margin-left:20px;"> This is the
third text paragraph</p>
<p style="font-size: 50px;color:#000000;margin-left:20px;"> This is the
fourth text paragraph</p>
<p style="font-size: 50px;color:#000000;margin-left:20px;margin-
bottom:40px;"> This is the fourth text paragraph</p>
</div>
</body>
</html>

Explanatory Notes:
To put a background image on the web page body, you have to insert the
background-image:url('background.jpg') property value into the body
selector. You must use a background image that is large enough to cover
the web page body. You should have noticed that the background-repeat:
repeat property is not used as the background image is large enough to fill
the whole web page body.


10.0 HYPERTEXT MARKUP LANGUAGE (HTML)
10.1 List
Unordered Lists
The use of <ul> tag denotes an unordered list.
Each list item uses the <li> tag.

Action:

<html>
<head>
<title></title>
</head>
<body>
<p> This is an unordered list </p>
<ul>
<li>Eagle</li>
<li>Sparrow</li>
</ul>
</body>
</html>

Action:
Save your Notepad file and refresh your browser. Youll see the following
on your screen:

[This is an unordered list.
Eagle
Sparrow]


Using CSS, you can change the list style to a circle, square or a disc.

Action:

<html>
<head>
<title></title>
ul.circle {
list-style-type:circle;
}
ul.square {
list-style-type:square;
}
ul.disc {
list-style-type:disc;
}
</style>
</head>
<body>
<p> This is a circle unordered list </p>
<ul class="circle">
<li>Eagle</li>
<li>Sparrow</li>
</ul>
<p> This is a square unordered list </p>
<ul class="square">
<li>Eagle</li>
<li>Sparrow</li>
</ul>
<p> This is a disc unordered list </p>
<ul class="disc">
<li>Eagle</li>
<li>Sparrow</li>
</ul>
</body>
</html>

Action:
Save the file and refresh your browser. Youll see a circle, square and
disc as bullet points.


List item vertical spacing:

You can adjust the spacing between the list items using the margin
property.

Action:

<html>
<head>
<title></title>
.verticalspace {
}
</style>
</head>
<body>
<p> The list items have10 pixels spacing </p>
<ul>
<li class=verticalspace>Eagle</li>
<li class=verticalspace>Sparrow</li>
<li class=verticalspace>Pigeon</li>
</ul>
</ul>
</body>
</html>

Explanatory Notes:
To adjust the spacing between the list items, we insert the margin-bottom
property in each of the <li> tags via the class selector (verticalspace).

Action:
Save the file and refresh browser. Youll see that the spacing
between the list items is now 10 pixels wide. You can adjust the pixel value
to see the new spacing between the list items.


Bullet Point Horizontal Spacing:
You can adjust the bullet points horizontal spacing to align with the top
main text (not list items) . To do this, just add both the following margin
and padding properties to the <ul> as shown below (in red).

Action:
Copy the following onto your Notepad:

<html>
<head>
<title></title>
.verticalspace {
}
#bulletpoints {
margin-left: 0;
padding-left:20px;
}
</style>
</head>
<body>
<p> The list items have10 pixels spacing </p>
<ul id="bulletpoints">
<li class="verticalspace">Eagle</li>
<li class="verticalspace">Sparrow</li>
<li class="verticalspace">Pigeon</li>"
</ul>
</ul>
</body>
</html>

Explanatory Notes:
To align the bullet points and the top main text (not list items) , you need
to only adjust the padding-left property value in the <ul> tag.

Action:
Save the file and refresh browser. Youll see that the bullet points are
aligned to the top main text.


Ordered Lists
The use of <ol> tag denotes an ordered list.
Each list item uses the <li> tag.

Action:

<html>
<head>
<title></title>
</head>
<body>
<p> This is an ordered list </p>
<ol>
<li>Eagle</li>
<li>Sparrow</li>
</ol>
</body>
</html>

Action:
Save your Notepad file and refresh your browser. Youll see the following
on your screen:

[This is an ordered list.

1. Eagle
2. Sparrow]


Using CSS, you can change the style to different types of numeral styles

Action:

<html>
<head>
<title></title>
.upper-roman {list-style-type:upper-roman;}
.lower-roman {list-style-type:lower-roman;}
.upper-alpha {list-style-type:upper-alpha;}
.lower-alpha {list-style-type:lower-alpha;}
</style>
</head>
<body>
<ul class="upper-roman">
<li>Eagle</li>
<li>Sparrow</li>
</ul>
<ul class="lower-roman">
<li>Eagle</li>
<li>Sparrow</li>
</ul>
<ul class="upper-alpha">
<li>Eagle</li>
<li>Sparrow</li>
</ul>
<ul class="lower-alpha">
<li>Eagle</li>
<li>Sparrow</li>
</ul>
</body>
</html>

Action:
Save the file and refresh your browser. Youll see a I, i, A, a as bullet points.


Bullet Image

You can use images as bullet points instead of a normal list bullet point
using the CSS list-style-image property.

Action:

<html>
<head>
<title></title>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-image: url(checkbox.gif);
padding-left: 25px;
margin-top: 5px;
}
</style>
</head>
<body>
<ul>
<li>This is a eagle. This is a eagle. This is a eagle. This is a eagle. This is a
eagle. This is a eagle. This is a eagle. This is a eagle. This is a eagle. This is
a eagle. This is a eagle. This is a eagle.</li>
<li>Sparrow</li>
<li>Sparrow</li>
</ul>
</body>
</html>


Explanatory Notes:
The ul {list-style-type: none; } removes the list bullets.

The CSS property padding: 0; margin: 0; removes all the defaults of the
different browsers to ensure display consistency.

The CSS property background-image: url (checkbox.gif); adds the
background image to the "li" element. Use the background-repeat: no-
repeat; to stop the background image from repeating.

The CSS property padding-left: 25px; determines the distance between
the image and text.

The CSS property margin-top: 5px; determines the distance between the
list items.

Action:
Save the Notepad file and refresh your browser. Youll see the checkbox
images on the left of the list items.

10.2 Forms
The <form> tag is used to create an HTML form for web visitors to key in
their particulars which are then passed to a server when they click the
Submit button.
Below is a sample of Awebers form codes:
<form style="border:1px solid #cccccc;margin-top:0px; margin-
bottom:0px; " method="post"
action="http://www.aweber.com/scripts/addlead.pl">
<input type="hidden" name="listname" value="[your list name here]" />
<input type="hidden" name="redirect"
value="http://www.yoursite.com/thankyou.htm" />
<input type="hidden" name="meta_adtracking" value="custom form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_forward_vars" value="1" />
<p>First Name
<input type="text" name="name" value="" /></p>
<p>Best Email
<input type="text" name="email" value="" /></p>
<p style="margin-left:50px;"><input type="submit" name="submit"
value="Subscribe" /></p>
</form>

Below will explain the important attributes for the form tag:

method ="post
The method=post means that the information keyed in by the user will
be sent to the server.

action="http://www.aweber.com/scripts/addlead.pl)
This attribute specifies the page which handles the input from the user.
The page will usually be a script which processes the data keyed in by the
user. (e.g.storing the information in database etc.)

<input type="text" name="name" value="" />
The text input type is used to collect single line of text from the user like
name and email address etc.

The name =name is the name of a specific field at the server side which
holds the data.

The value="default value". Whatever text you specify in the default value
will be displayed in the text box by default. For example, <input
type="text" name="Name" value="Type your Name here"> will display the
text 'Type your Name here' in the text box. The text box will be blank if
you specify value=.

Note:
In case the Name and Email boxes are not aligned vertically, your can add
the &nbsp code after the Name or Email label which will create a spacing
to push the input boxes to the right. You can add as many &nbsp as you
wish to create more spacing. For example:

<p style="margin-top: 20px;">First Name:&nbsp
<input type="text" name="name" value="" /></p>

or

<p>Best Email:&nbsp
<input type="text" name="email" value="" /></p>

You can adjust the length of the input box by inserting the size attribute.

<p>First Name
<input type="text" name="name" size=18 value="" /></p>
<p>Best Email
<input type="text" name="email" size=18 value="" /></p>


The Submit Button:
After the date is entered, the user clicks the Submit button which tells the
browser to send the data to the server. The Submit button usually has the
following codes:

<input type="submit" name="submit" value="Subscribe">

The string Subscribe in the value attribute is displayed as the name of
the submit button in the form. You can change the value according to your
requirements.

10.3 Hyperlink(s)
A hyperlink is a word or image that a web visitor click with a mouse to go
to another web page on your site (or section of your current page) or other
external sites. When you move your mouse over a hyperlink, you will see a
little hand appearing.

Anatomy of a hyperlink:

Here is an example of a URL hyperlink:

http://www.yoursitename.com/tutorial/hyperlink.html

URL stands for Uniform Resource Locator and is the address of your
hyperlink's target destination.

Lets look at the elements of a hyperlink:
http://
Stand for HyperText Transfer Protocol. HTTP is the protocol
between your computer/web browser and the web server on how
information is exchanged. Another type of protocol is the FTP (File
Transfer Protocol) which is a protocol on how files are transferred between
two computers on the internet.

www.
Known as the World Wide Web which is a system of interlinked hypertext
web pages


Yoursitename
This is the name of your domain

.com
It is a generic top-level domain (TLD) in the Internet Domain Name
System. It can be country specific (e.g. .us) or for a specific use (e.g. net
or .biz)

/tutorial/
It is a sub-folder of the root (main) directory in which the hyperlink.html
file resides.

hyperlink.html
It is the file name of the web page.

Text hyperlink:

To open in the same window:

Example Code:
<p> Please go to <a href="http://www.your sitename.com/">this site</a>
to view the sample.</p>

Browser will display the following: Please go to this site to view the
sample. The linked web page will open in the same window when
hyperlink text is clicked

To open in a new window:

Example Code:
<p> Please go to <a href=http://www.squeezepagestepbystep.com/
target="_blank">this site</a> to view the sample.</p>

Browser will display the following: Please go to this site to view the
sample. When you add the code: target=_blank, the linked web page
will open in a new window when the hyperlink text is clicked.


Link to a specific area on the same web page

If you have a long web page, it would be good idea to create a list of
hyperlinks at the top of the page which take users to a specific location on
the same web page when the hyperlinks are clicked.

Action:

<html>
<head>
<title>Test Page</title>
</head>
<body>
<a href="#goldplan"> Gold Plan</a><br>
<a href="#silverplan"> Silver Plan</a><br>
<p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean at purus nec quam luctus dignissim. Vivamus
aliquet. In ullamcorper lorem. Lorem ipsum dolor sit amet, consectetuer
aliquet. In ullamcorper lorem.Quisque convallis lacus luctus quam. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Nunc scelerisque, leo
vulputate imperdiet suscipit, arcu tortor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean at purus nec quam luctus
dignissim. Vivamus aliquet.In ullamcorper lorem. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Aenean at purus nec quam luctus
dignissim. Vivamus aliquet. In ullamcorper lorem.Quisque convallis lacus
luctus quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc scelerisque, leo vulputate imperdiet suscipit, arcu tortor. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean at purus nec
quam luctus dignissim. Vivamus aliquet. In ullamcorper lorem. Lorem
quam luctus dignissim. Vivamus aliquet. In ullamcorper lorem.Quisque
convallis lacus luctus quam. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc scelerisque, leo vulputate imperdiet suscipit, arcu
tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean at
purus nec quam luctus dignissim. Vivamus aliquet. In ullamcorper lorem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean at purus
nec quam luctus dignissim. Vivamus aliquet. In ullamcorper lorem.
Quisque convallis lacus luctus quam. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc scelerisque, leo vulputate imperdiet

suscipit, arcu tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing
imperdiet suscipit, arcu tortor. Lorem ipsum dolor sit amet, consectetuer
consectetuer adipiscing elit. Aenean at purus nec quam luctus dignissim.
Vivamus aliquet. In ullamcorper lorem. Lorem ipsum dolor sit amet,
Vivamus aliquet. In ullamcorper lorem.Quisque convallis lacus luctus
quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
scelerisque, leo vulputate imperdiet suscipit, arcu tortor. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Aenean at purus nec quam
luctus dignissim. Vivamus aliquet. In ullamcorper lorem. Lorem ipsum
luctus dignissim. Vivamus aliquet. In ullamcorper lorem.Quisque convallis
lacus luctus quam. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nunc scelerisque, leo vulputate imperdiet suscipit, arcu tortor </p>
<a name="goldplan"></a>
<h1> Gold Plan</h1>
<p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetuer
ipsum dolor sit amet, consectetuer adipiscing elit. Nunc scelerisque,
leo vulputate imperdiet suscipit, arcu tortor. Lorem ipsum dolor sit amet,

elit. Nunc scelerisque, leo vulputate imperdiet suscipit, arcu tortor</p>
<a name="silverplan"></a>
<h1> Silver Plan</h1>
<p style="font-size:20px;"> Lorem ipsum dolor sit amet, consectetuer
elit. Nunc scelerisque, leo vulputate imperdiet suscipit, arcu tortor. Lorem
quam luctus dignissim. Vivamus aliquet. In ullamcorper lorem. Lorem
quam luctus dignissim. Vivamus aliquet. In ullamcorper lorem.Quisque
convallis lacus luctus quam. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc scelerisque, leo vulputate imperdiet suscipit, arcu
tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean at
purus nec quam luctus dignissim. Vivamus aliquet. In ullamcorper lorem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean at purus
nec quam luctus dignissim. Vivamus aliquet. In ullamcorper
lorem.Quisque convallis lacus luctus quam. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc scelerisque, leo vulputate imperdiet
suscipit, arcu tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing

</body>
</html>

Action:
Click on one of the hyperlinks and the browser will bring you to the
relevant section within the page.

Image hyperlink:

To open in the same window:

Example Code:
<a href="http://www.squeezepagestepbystep.com/"><img
src="http://www.squeezepagestepbystep.com/images/imagename.gif"
alt="imagename" /></a>

Browser will display a hyperlinked image where a little hand is shown
when the mouse hovers over the image. The linked web page will open in
the same window when hyperlink image is clicked.

To open in a new window:
Code:
<a href=http://www.squeezepagestepbystep.com/
target="_blank/"><img
src="http://www.squeezepagestepbystep.com/images/imagename.gif"
alt="imagename" /></a>
<p>Click image</p>

Browser will display a hyperlinked image where a little hand is shown
when the mouse hovers over the image

When you add the code: target=_blank, the linked web page will open
in a new window when hyperlink image is clicked.


Link Colors:
You would have noticed that hyperlink text is usually underlined and they
have a default color to indicate the current status of the hyperlink. The
following describes the four basic hyperlink states:
Unvisited : Hyperlink that has not been visited by the sites visitor
Visited : Hyperlink that has been visited by the sites visitor
Hover : A hyperlink whereby a mouse is currently over it
Active : A hyperlink that is being clicked but not released yet

Link Styling:
Links can be styled in a Stylesheet or embedded between the <head> tag
as follows:
<head>
<title></title>

a:link {
color: #0000ff;
}

a:visited {
color: #cc33cc;
}

a:hover {
color: #000000;
text-decoration: none;
}

a:active {
color: #333333;
}
</style>


Explanatory Notes:
Styling: Effects:
a:link { An unvisited hyperlink in blue color
color: #0000ff;
}

a:visited { The hyperlink will turn to maroon
color: #cc33cc; color when it has been visited
}

a:hover { When a mouse hovers over the
color: #000000; hyperlink, the text will turn to black with
background-color: #ffff00; a yellow background and not underlined
text-decoration: none;
}

a:active { A hyperlink will turn to dark green when
color: #333333; clicked but not released yet
}

Relative and Absolute Links:
An absolute link specifies the full path to the location of a web page.
The full path will include the protocol, the domain name, the sub-directory
(if any) and the file name itself.

Below is an example of an absolute link in red:

<a href="http://www.yoursitename.com/articles/page.html">This is an
absolute link</a>


Unlike an absolute link, a relative link does not specify the full path to the
web page location.

Below are examples of a relative link:

Relative Link: Explanation:

<a href="page.html">Link</a> page.html is located in the same
directory as your current page.

<a href="help/page.html">Link</a> page.html is located in a folder
(directory) called help. The help
folder is located in the same
directory as your current
page.

<a href="help/intro/page.html">Link page.html is located in a folder
</a> called intro which is located in a
folder called help that is in turn
located in the same directory
as your current page.

<a href="../page.html">Link </a> page.html is located in a folder
one level up from the current
directory which holds your
current page. For example, folder
A has a sub-folder B. The current
page is in sub-folder B where the
link destination page.html is in
folder A.

<a href="../../page.html"> page.html is located in a folder
two levels up from the current
directory which holds your
current page. For example, folder
A has a sub-folder B which in
turn has a sub-folder C. The
current page is in sub-folder C
where the link destination
page.html is in folder A.

Note:
If you're linking to a target destination off your site, then you must use
absolute link.


10.4 Tables
Tables are represented by the <table> tag. A table is divided into rows
(<tr>), and each row is sub-divided into table cells (<td>) which can
contain text, images, forms or even tables, etc. It is the <td> cells that hold
the contents.

The above table is represented by the following HTML tags:
<table>
<tr>
<td> cell 1</td> <td> cell 2</td>
</tr>
</table>
Explanatory Notes:
A table has at least one table row (tr) and inside every table row (tr) has
one or more table cells (tb).

Lets us look at how the table tags looks like and the styling using CSS.

Action:

<head>
<title></title>
table {

border-collapse: collapse;
width:600px;
}
.cellborder{
border:1px solid #55cccc;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td class="cellborder">Row 1, Cell 1</td> <td class="cellborder">Row 1,
Cell 2</td>
</tr>
<tr>
<td class="cellborder">Row 2, Cell 1</td> <td class="cellborder">Row 2,
Cell 2</td>
</tr>
</table>
</body>
</html>

Explanatory Notes:
The CSS property: border-collapse: collapse collapsed the table cell
borders into a single border. You may want to delete the border-collapse:
collapse property if you want to see the border separating each cell.

The property: text-align:center property centers the cell text. The
property: width: 600px sets the table width..

The table border is set by the following:

table {
width:600px;
}


The cell border (td) is set by the following:
.cellborder{
text-align: center;
}

Action:
Save the file and refresh browser. Youll see a table with two rows and
table cells in each row.

Centering a table:
You can use the CSS properties margin-left: auto; margin-right: auto; to
centralize a table.
Action:

<head>
<title></title>
table {
margin-left:auto;
margin-right:auto;
width:600px;
}
.cellborder{
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>

<td class="cellborder">row 1, cell 1</td> <td class="cellborder">row 1,
cell 2</td>
</tr>
<tr>
<td class="cellborder">row 2, cell 1</td> <td class="cellborder">row 2,
cell 2</td>
</tr>
</table>
</body>
</html>

Explanatory Notes:
In order to center a table, your HTML file must have the following
DOCTYPE above the <html> tag:
Action:
Save the file and refresh your browser. Youll see that the table is now
centralized.

Background color:
You can set the background color of the table rows or columns using CSS.
Below is an example on how to set a background color for table rows.
Action:
Copy the following onto your Notepad file:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<head>
<title></title>
table {
margin-left:auto;
margin-right:auto;

width:600px;
}
.cellborder{
text-align:center;
}
.background {
}
</style>
</head>
<body>
<table>
<tr class="background">
<td class="cellborder">row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>

Explanatory Notes:
We use the CSS class in the <tr> tag to put a grey color background on the
first table row.

Action:
Save the file and refresh browser. Youll see the first row of the table
cells has a grey background.


Aligning Table Cell Contents

By default, the contents of td cells are left-aligned. Using CSS, you can
style the alignment of the td cell contents as follows:

a) text-align: left
b) text-align: center
c) text-align: right.

Similarly, you can style the contents of td cells to be vertically aligned to
the top, center and bottom using the following CSS properties:

a) vertical-align: top
b) vertical-align: center
c) vertical-align: bottom

Action:

<head>
<title></title>
table {
margin-left:auto;
margin-right:auto;
width:270px;
}
.column1{
width:30px;
vertical-align: top;
}
.column2{
text-align: center;
width:200px;

}
</style>
</head>
<body>
<table>
<tr>
<td class="column1">1.</td>
<td class="column2">Content is centered using text-align: center</td>
</tr>
<tr>
<td class="column2"> Content is centered using text-align: center</td>
</tr>
<tr>
<td class="column2"> Content is centered using text-align: center</td>
</tr>
</table>
</body>
</html>

Action:
Save the file and refresh browser. Youll see that the content(numbering)
of the first td cell (first column) is aligned to the top while the td content of
the second column is centered.

To see the effects of the different horizontal and vertical alignments using
CSS, you may want to change the values of the column1 and column2
properties.


Row and Column Span:

Column Span

The number of columns in a table depends on the number of table cells
(<td> in a table row <tr>. To merge the table cells for a particular table
row, we use the colspan attribute where we specify the colspan value on
how many columns a table cell will span.

For example, a <td> tag using a colspan="2" attribute-value will indicate
that two columns of table cells to be merged together.

Action:

<head>
<title></title>
table {
margin-left: auto;
margin-right: auto;
width:600px;
}
.cellborder{
text-align: center;
}
.background {
}
</style>
</head>
<body>
<table>
<tr class="background">

<td class="cellborder" colspan="2">Row 1</td>
</tr>
<tr>
<td class="cellborder">Row 2, Cell 1</td>
<td class="cellborder">Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>

Explanation Notes:
When we use colspan to merge two td cells into one, we only use one
<td> tag in the first row.

Action:
Save the file and refresh browser. Youll see that the two td cells in the
first row have been merged into one td cell.

Row Span

To merge the td cells for a table column, we use the rowspan attribute
where we specify the rowspan value on how many rows a table column will
span.

For example, a <td> tag using a rowspan="2" attribute-value will
indicate that two rows of table columns to be merged together.

Action:

<head>
<title></title>
table {
margin-left: auto;
margin-right: auto;

width:600px;
}
.cellborder{
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td class="cellborder" rowspan="2">Title</td>
<td class="cellborder">Item 1</td>
</tr>
<tr>
<td class="cellborder">Item 2</td>
</tr>
</table>
</body>
</html>

Explanatory Notes:
When we use rowspan to merge two td cells into one, we only use one <td>
tag in the second row.

Action:
Save the file and refresh browser. Youll see the first column of the table
cells have been merged together.


11.0 MISCELLANEOUS FORMATTING

11.1 Horizontal Lines:

To draw a horizontal line across a web page, you can use the <hr/> tag.
You may want to use CSS to style the horizontal line in terms of its line
color, thickness and width.

Action:
To see how this is done, copy the following onto your Notepad screen:

<html>
<head>
hr {
height:1px;
color:#000000;
width: 100%;
}
</style>
</head>
<body>
<hr/>
</body>
</html>

Explanatory Notes:
The height property determines the thickness of the horizontal line and
the width, if set lower than 100% will shorten the length of the horizontal
line.

As the <hr> tag has no element contents, there is no closing tag. We
have to insert a forward slash after the HTML element, e.g. <hr/> to close
off the tag.

Action:
Save the file and refresh browser. Youll see a horizontal line that span
across the browser screen.


11.2 Line Break:

You can use the <br> tag to force a line break in between the HTML
elements. This is a useful tag to use if you want to have more spacing
between e.g. two text paragraphs.

Action:

<html>
<head>
</head>
<body>
<p> This is the first paragraph</p>
<p> This is the second paragraph</p>
<br/>
<p> This is the third paragraph with wider spacing</p>
</body>
</html>

Explanatory Notes:
Similar to a <hr/> tag, where they have no element contents and no
closing tag, we will have to insert a forward slash after the HTML element
e.g. <br/> to close off the tag.

Action:
Save the file and refresh browser. Youll see that the spacing between the
second and third text paragraph is wider due to the <br/> tag.


12.0 DEFINITIONS
12.1 HTML Element Syntax
An HTML element is like an instruction to browsers on which part of the
web page to work on. HTML elements are enclosed in angled brackets <>.
HTML elements together with the angled brackets are called HTML tags.
For example, the <p> tag tells browsers to work on all the text paragraphs
on the web page.

Most HTML elements have an opening tag (<>) and a closing tag (</>).

Example:

<p> This is a text paragraph. </p>

When browsers come across a <p> tag, they will display the text This is a
text paragraph with a line break.

Element content is anything between the opening <> and the closing tag
</>.

12.2 HTML Attributes
HTML attributes provide additional information about a HTML element
and they are always specified inside the opening tag, e.g. <p style=font-
weight: bold>. Compared with HTML elements which tells browsers
which part of the web page to work on, HTML attributes tell browsers how
to display that particular part of the web page.

Attributes have a name/value pair like: name="value" e.g. font-weight:
bold etc. Remember to always enclose attribute values in quotes.

Example 1:

<p style="font-weight: bold; text-align: center;">Yes! Send my Free
eBook</p>

In this example, the HTML attributes tells browsers to display the text
paragraph in bold and center the same.


Attributes are placed inside the opening tag e.g. <p> tag with the following
syntax:

<element attribute="value" attribute="value">

When coding your web page, you would need to follow the prescribed
syntax or it will not work.


13.0 CSS PROPERTIES
Background:
Background: A shorthand property for setting all background properties
in one declaration
Example:
body {
background:#cccccc url ('header.jpg') no-repeat;
}

background-color: Sets the background color of an element
background-image: Sets an image as the background
background-repeat: Sets if or how (repeat, repeat-x, repeat-y or no-repeat) a
background image will be repeated

Border:

Border: A shorthand property for setting the top border, right border,
bottom border and left border properties in one declaration.

Example:
table {
border: 1 px solid #cccccc;
}

border-top: Sets the top border of an element
border-right: Sets the right border of an element
border-bottom: Sets the bottom border of an element
border-left: Sets the left border of an element
border-color: Sets the color of the four borders in one declaration
border-style: Sets the style (none, dotted, dashed, solid, double, groove,
ridge, inset, outset) of the four borders in one declaration.
border-width Sets the width (thin, medium, thick) of the four borders in
one declaration

Dimension:
Height: Sets the height of an element
Width: Sets the width of an element


Font:
Font: A shorthand property for setting all of the properties for a
font in one declaration
Example:
h1 {
font: arial, verdana, times new roman bold 12px;
}

font-family: Set the font type priority
font-size: Set the size of a font
font-style: Set the font-style (normal, italics, oblique)
font-weight Set the weight (bold, bolder) of a font

Notes:
You can list the fonts that you want the browser to use, in order of preference.

Example:

body {
font-family: verdana, arial, helvetica, sans-serif;
}

In this example, the font-family property is telling the browser to display the
Verdana font first. If the Verdana font is not available in the visitors computer,
then use the Arial font etc.

If your font type has more than one words eg. Trebuchet MS, you must put in
quotes:

body {
font-family: verdana, arial, trebuchet ms, sans-serif;
}


Margins:
margin: A shorthand property for setting the top margin, right
margin, bottom margin and left margin properties in one
declaration.
Example:
div {
margin:100px 50px 20px 50px;
}
It means that the top margin is 100px, right margin 50px,
bottom margin 20px and left margin 50px

div {
margin:100px 50px 60px;
}
It means that the top margin is 100px, right and left margins
are 50px and bottom margin 60px

div {
margin:100px 50px ;
}
It means that top and bottom margins are 100px, right and
left margins are 50px

div {
margin: 20px ;
}
It means that top, right, bottom and left margins are all 20px

margin-top: Sets the top margin of an element
margin-right: Sets the right margin of an element
margin-bottom: Sets the bottom margin of an element
margin-left: Sets the left margin of an element


Padding:
padding: A shorthand property for setting the top padding, right
padding, bottom padding and left padding properties in one
declaration.
Example:
h1 {
padding:100px 50px 20px 50px;
}
It means that top padding is 100px, right padding 50px,
bottom padding 20px and left padding 50px

h1 {
padding:100px 50px 50px;
}
It means that the top padding is 100px, right and left
padding are 50px and bottom padding 50px

h1 {
padding:100px 50px ;
}
It means that top and bottom padding are 100px, right and
left padding are 50px

h1 {
padding: 20px ;
}
It means that top, right, bottom and left padding are all 20px

padding-top: Sets the top padding of an element
padding-right: Sets the right padding of an element
padding-bottom: Sets the bottom padding of an element
padding-left: Sets the left padding of an element

Positioning
Vertical-align: Sets the vertical alignment (top, middle, bottom) of an
element


Tables
border-collapse: Sets the border of a table by collapsing 2 table cell border
into one.
Text
color: Set the color of a text
text-align: Align (left, right, center, justify) the texts in an element
text-decoration: Adds decoration (normal, underline, line-through, blink) to
text
text-indent Indents (e.g. in px) the first line of text in an element
text-transform Controls the letters (capitalize, uppercase, lowercase) in an
element

Note: Capitalize means to transform the first character of
each word to uppercase

14.0 RESOURCES
Online web tutorials by w3schools.com: http/www. http://www.w3schools.com.
HTML color codes at: http://www.somacon.com/p142.php
Headers templates at http://www.qualityheadertemplates.com

Htmlcss Snap

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Htmlcss Snap

Caricato da

Copyright:

Formati disponibili

HTML & CSS In A Snap | Copyright 2010 Solomon Cheah. All rights reserved worldwide.

Potrebbero piacerti anche