===============================================================

TOPIC 1 : BASIC CONCEPTS OF HTML

===============================================================

TOPIC OBJECTIVES
----------------
1. Learn the meaning and usage of HTML.
2. Learn the different versions of Web Browsers.
3. Learn the Basics of HTML.

IMPORTANCE OF WEB PAGE DEVELOPMENT

----------------------------------
1. To share or access information world wide, we need to get help
from the internet.

2. To share information over the internet, we need to create or

design a website.

WHY WEB PAGES ARE USEFUL

------------------------
Here are some important facts about why web pages are so useful!
1. They are a low-cost and easy way to spread information to a large audience.
2. The provide yet another medium you can use to market your business!
3. They serve as a platform to let the world know about you!

WHAT IS A WEB SITE?

-------------------
1. Web page is a well formatted document used to share information
over the internet.
2. Website is a collection of inter-linked related web pages.
3. Website is identified with the URL.

WHAT IS HTML? (HyperTExt Markup Language)

----------------------------------------
HTML is a basic language used to develop world wide web page documents.

HTML allows you to format text, add rules, graphics, sound and video and
save it all in a text-only ASCII file that any computer can read.

IMPORTANCE OF HTML
-------------------
1. To create well formatted document (web page), we will use HTML.
2. HTML is the language of the developing or formatting Web pages.
3. HTML is nothing more than a set of codes (tags and attributes).
4. Every Web page in the world is done with HTML in one form or another.
5. To create your own Web pages, you only need two things : a working
knowledge of HTML and access to a computer that's set up as a Web server.

HISTORY OF HTML
---------------
In the late 1980s, ISO (Organization for Standardization) designed
a system of specification (i.e. SGML) for specifying or defining
markup languages that system is known as SGML (Standard Generalized
Markup Language). SGML is a standard set of specifying or building
any markup language.

Markup language is a language consisting of set of tags used format

webpages that are understood by browsers like Internet explorer, firefox,
chrome, and others.

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and

prototyped ENQUIRE, a system for CERN researchers to use and share documents.

In 1989, Timothy Berners-Lee and other researchers at the CERN nuclear researchers
facility near Geneva, Switzerland, laid the foundation of World Wide Web, or the Web.
Berners-Lee wrote a memo proposing an Internet-based hypertext system. They developed
a system of hypertext documents that made it very easy to move from one source of information
to another.

Berners-Lee specified HTML and wrote the browser and server software in late 1990.
That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request
for funding, but the project was not formally adopted by CERN. In his personal notes from 1990
he listed "some of the many areas in which hypertext is used" and put an encyclopedia first.

In the late 1990s, Tim Berner-Lee developed HTML. HTML is built by following or by
referring to SGML's standard set of specifications. Hence we can say HTML is evolved
from SGML. The first web pages began in November 1990, and back then, there were little to no
HTML standards to follow.

As a result, a group called the World Wide Web Consortium formed to set standards for coding HTML.

The first publicly available description of HTML was a document called "HTML Tags", first
mentioned on the Internet by Tim Berners-Lee in late 1991.

It describes 18 elements comprising the initial, relatively simple design of HTML. Except for
the hyperlink tag, these were strongly influenced by SGMLguid, an in-house Standard Generalized
Markup Language (SGML)-based documentation format at CERN. Eleven of these elements still exist
in HTML 4.

THE HTML INTERPRETER - HTML BROWSER

------------------------------------
1. The HTML file just looks a lot of text sprinkled with
greater than and less than signs until you open the file
with a special program called a browser.
2. A browser can interpret the HTML elements and then show the
formatted documents on screen.
3. This way you can test your HTML pages and make sure that
they look the way you want them to.

TWO MOST POPULAR BROWSERS (2000)

--------------------------------
The two most popular browsers in 2000s were NETSCAPE NAVIGATOR
and MICROSOFT INTERNET EXPLORER.

1. NETSCAPE NAVIGATOR
 - During the period of 2000 to 2009, about 70% of the
Web browsing public used netscape navigator.
- Developed by some of the same engineers who created Mosaic,
Netscape has distanced itself from the competition by offering
non-standard features that make Netscape much more attractive to the eye.

2. MICROSOFT INTERNET EXPLORER

- The internet Explore's solid performance and acceptance of all of
HTML tags plus most of Netscape's propriety extensions, Internet
Explorer is quickly becoming a viable alternative to Netscape,
used by some 25% of the Web public.

OTHER KNOWN EARLY WEB BROWSERS

-------------------------------------------------
Other known and alternative browsers are Mosaic, Lynx,
Quarterdeck Mosaic, Emmissary, Mariner and Mac Web.

CURRENT LEADING INTERNET BROWSERS / 2018 TOP BROWSERS

--------------------------------------------------------------------------------

StatCounter Jan. 2018 desktop share

Google Chrome 65.98%

Mozilla Firefox 11.87%
Internet Explore 7.28%
Safari 5.87%
Microsoft Edge 4.11%
Opera 2.35%
UC Browser 0.87%
Yandex Browser 0.52%
Coc Coc 0.22%
QQ Browser 0.2%
Chromium 0.13%
Sogou Explorer 0.12%
Maxthon 0.12%
PhantomJS 0.06%
360 Secure Browser 0.06%
Pale Moon 0.04%
Vivaldi 0.04%
Mozilla Suite 0.03%
SeaMonkey 0.03%
Amigo 0.02%
Naver Whale 0.01%
Other 0.05%

WRITING HTML
-------------
1. You can write an HTML document with any word processor
or text editor.

2. The most common text editor is NOTEPAD or NOTEPAD++.

3. Other text editor includes WORDPAD for Windows.

4. All of which come free with the corresponding system software.

5. You may also use the MS WORD and save the document as text file.

6. For a DOS-BASED text editor, you may use EDIT command.

7. Nevertheless, there are certain tools that may help you create HTML documents.

HTML TAGS
----------
1. The key to HTML is in the tags that indicate what kind of content is coming up.
2. HTML tags are commands written between less than (<) and greater than (>) signs,
also known as angle brackets, that indicate how the browser should display the text.

HTML ELEMENTS
-------------
1. An HTML element is everything from the start tag to the end tag.
2. An HTML element starts with a start tag / opening tag and
ends with an end tag / closing tag
3. The element content is everything between the start and the end tag
<img src="[Link]">Open Facebook</img>

The text Open Facebook is the content of element and will be displayed in the browser.
The scr="[Link]" is an attribute that will display the image [Link].

4. Some HTML elements have empty content

5. Empty elements can be closed in the start tag
<img src="[Link]" \>
6. Most HTML elements can have attributes

OPENING AND CLOSING TAGS

------------------------
1. There are opening and closing versions for many (but not all)
HTML tags, and the affected text is contained within the two tags.
2. Both the opening and closing tags use the same command word by
the closing tag carries an initial extra forward slash symbol (/).

Note :
- For all HTML exercises and examples in this manual, all tags and
attributes are written in SMALL CAPS, and all values are shown in
UPPER case letters.
- HTML does not require this system.
- It use here only to help distinguish the tags, attributes, and
values from the surrounding text in the examples and exercises.

ATTRIBUTES
------------
1. Many tags have special attributes that offer a variety of
options for the contained text.

2. The attribute is entered between the command word and the

 final greater than symbol.

3. Often, you can use a series of attributes in a single tag.

Simply write one after the other.

4. In the example given below, align is the attribute of <h1> tag.

CENTER is the value for attribute ALIGN.

<h1 align="CENTER"> Data Processing Concepts </h1>

VALUES
------
1. Attributes in turn often have values.
2. In some cases, you must pick a value from a small
group of choices.

3. For example, the ALIGN attribute for the <h1> tag can take
values CENTER, RIGHT or LEFT.

4. Any of other value will be ignored.

QUOTATION MARKS FOR VALUES

---------------------------
1. Although in the latesst HTML version, quotation marks are optional for most
of the HTML tags.

2. Still, it is a good idea to use quotes around the value of the attribute.

Example 1.1 : [Link]

----------------------------
<html>
<head>
<title> My First HTML Document </title>
</head>
</html>

Note :
1. In the example above, the opening tags are <html>, <head> and
<title> tags.
2. The contained text is "My First HTML Document".
3. The closing tags are </title>, </head> and </html>.

NESTED TAGS
------------------
1. In some cases, you may want to modify the presentation of your text in the
browser with more than one tag.

2. For nested tags, order is very important. Whenever you use a closing tag, it should
correspond to the last unclosed opening tag. In other words, first <h1> then <u>,
then </u> and then </h1>.
Example 1.2 : [Link]
----------------------------
<html> <head> <title> My Third Example of HTML document </title>
</head>

<body>
<h1><u>The Data Processing Concepts</u></h1>
<p>
<b><i>
Everybody process data. Anyone who makes decisions as an individual, as a head of a family, as a student, or as the
owner of the business - large or small -has to process data. As you begin to read this chapter, you are already
engaged in collecting and storing data and processing them through the brain. The output of the transformation
within the brain takes the form of useful knowledge to help you understand the subject matter.

Data can be defined as unorganized facts or the raw materials of information. Data are represented by symbols, but
they are not information except in a limited sense.
</b></i>
</body>
</html>

CREATING HTML FILE AND VIEWING IN WEB BROWSER

---------------------------------------------
1. Open the FILE EXPLORER and create new TEXT document.
2. Change the file extension from .txt to .html
3. Right click the HTML file and select OPEN with NOTEPAD or NOTEPAD++
4. Type all the HTML commands indicated above.
5. Save your HTML file (Press CONTROL+S). You may store it to any of the existing folder.

C:\HTML_FILE\[Link]

6. To view the HTML document; right click the HTML document and select OPEN with CHROME or
INTERNET EXPLORER or FIREFOX.

REFRESHING THE DISPLAY OF YOUR WEB PAGE

---------------------------------------
1. If error has been found or you want to change something in your web page, you may just
go back to NOTEPAD and edit your HTML file to correct the error or make the necessary
change.

2. Save again your HTML file.

3. Go back to your browser (INTERNET EXPLORER) and then REFRESH (VIEW-REFRESH or F5 key)
the display of your HTML file.

The display of the first HTML document is the Window Title. There
are no display on the HTML document.

===============================================================
TOPIC 2 : BASIC HTML TAGS
TOPIC OBJECTIVES
----------------

STARTING AND FINISHING HTML DOCUMENT - THE <html> and </html> TAGS
-------------------------------------------------------------------
1. HTML document must start with the opening tag <html> and end with the
closing tag </html>.
2. The HTML tag identifies the file as HTML code so that it can be recognized
by other applications across the Internet.

THE HEAD AND BODY

-----------------
1. The HEAD section provides information about the URL
(Universal Resource Locator) of your Web Page as well as
its relationship with the other pages at your site.
2. The only element in the HEAD section that is visible to the user
is the TITLE of the WEB Page.
3. The BODY of your HTML document contains the bulk of your Web
page, including all the text, graphics and formatting.

DEFINING HTML TITLE - <title>

-----------------------------
1. Each HTML page must have a title.
2. A title should be short and descriptive.
2. In some browsers, the title appears in the title bar of the window;
in others, the title is centered at the top of the screen.
3. The title is used in indexes as well as in browsers' history lists
and bookmarks.

Example 2.1 : [Link]

---------------------------
<html> <head> <title> My Second Example of HTML document </title>
</head>
<body>

The Data Processing Concepts

</body>
</html>

NOTE:

1. In this example, the text "The Data Processing Concepts" which placed on the BODY
part of the HTML source codes is the only line that you will see when viewing the
HTML document aside from the HTML title.
2. The extra spacing will be ignored by the browser.

SPACING IN HTML TAGS

--------------------
1. HTML browser will ignore any extra spaces that exist between the tags
in your HTML document.
2. If you want space between your text or paragraphs, you can use <P> tag
to begin each new paragraph or <BR> tag to provide line break or
 "carriage return".
3. <BR> tag will be discussed in the succeeding topic.

TAGS WITH AUTOMATIC LINE BREAKS

------------------------------
1. Some tags include automatic, logical line breaks
2. <h1> to <h6> tags automicallly include line break after
diplaying the text. In the LIST tag <li>, it has
also an automatic line break after displaying the item list.

Example 2.3 : [Link]

---------------------------
<html> <head> <title> My Third Example of HTML document </title>
</head>

<body>
<h1>
The Data Processing Concepts
</h1>

Everybody process data. Anyone who makes decisions as an individual, as a head of a family, as a student, or as the
owner of the business - large or small -has to process data. As you begin to read this chapter, you are already
engaged in collecting and storing data and processing them through the brain. The output of the transformation
within the brain takes the form of useful knowledge to help you understand the subject matter.

Data can be defined as unorganized facts or the raw materials of information. Data are represented by symbols, but
they are not information except in a limited sense.
</body>
</html>

ORGANIZING THE PAGE USING HEADERS - The <hn> tag

------------------------------------------------
1. HTML provides for up to six levels of headers in your Web page.
2. You will seldom have to use more than three.

3. Since headers can be used to compile a table of contents of

your Web pages, you should be consistent as possible when
applying them.

General Syntax : <hn [ALIGN=direction]> contained text </Hn>

Notes:
1. The value n is a number from 1 to 6, depending on the level
that you want to create.
2. If desired, include the ALIGN attribute to align the header
where direction is the left, right or center.

Example : <h1 ALIGN=CENTER> Data Processing Concepts </h1>

Example 4 : [Link]
-------------------------
<html>
<head> <title> My Fourth Example of HTML document </title>
</head>

<body>
<!-- The ALIGN attribute will center the first level HEADER -->
<h1 ALIGN = CENTER>
The Data Processing Concepts
</h1>
Everybody process data. Anyone who makes decisions as an individual, as a head of a family, as a student, or as the
owner of the business - large or small -has to process data. As you begin to read this chapter, you are already engaged
in collecting and storing data and processing them through the brain. The output of the transformation within the
brain takes the form of useful knowledge to help you understand the subject matter.
<P>
Data can be defined as unorganized facts or the raw materials of information. Data are represented by symbols, but
they are not information except in a limited sense.
</P>
</body>
</html>

STARTING A NEW PARAGRAPH - The <P> Tag

---------------------------------------
1. HTML does not recognize the returns that you enter in the text editor.
2. To start a new paragraph in your Web page, you must use the <P> tag.
3. If desired, you also include the attribute ALIGN=direction,
where direction is left, right or center. Type the new paragraph.
4. If desired, you may type the closing tag </P> to end the paragraph, but
it is not necessary.

Syntax <p align=value></p>

PARAGRAPH ATTRIBUTES
--------------------
Attribute : align
Description :
Values : left, right or center

CREATING A LINE BREAK - The <BR> Tag

------------------------------------
When to start a new paragraph with the <P> tag, most browsers
insert a large amount of space. To begin a new line without so
much space, use a line break.

The <BR> tag is perfect for poems or other short lines of text
that should appear one after another without a lot of space in
between.

Note :
1. Type the <BR> where the line break should occur.
2. There is no closing BR tag.
Example 5 : [Link]
--------------------------
<html> <head> <title> My Fifth Example of HTML document </title>
</head>

<body>
<!-- The ALIGN attribute will change the alignment of first level HEADER -->
<h1 ALIGN = CENTER>
The Data Processing Concepts
</h1>

Everybody process data. Anyone who makes decisions as an individual, as a head of a family, as a student, or as the
owner of the business - large or small -has to process data. As you begin to read this chapter, you are already engaged
in collecting and storing data and processing them through the brain. The output of the transformation within the
brain takes the form of useful knowledge to help you understand the subject matter.
<P>
Data can be defined as unorganized facts or the raw materials of information. Data are represented by symbols, but
they are not information except in a limited sense.
<P>
Data processing consists of gathering the raw data input, evaluating and bringing order to it, and placing it in
proper perspective so that useful information will be produced. All data processing whether manual, mechanical or
electronic, consists of three basic activities namely : </P>

<P> 1. capturing the input data (INPUT)

<BR> 2. manipulating the data (PROCESS)
<BR> 3. managing the results (OUTPUT)

<P>
Data processing techniques have been undergoing evolutionary changes since the beginning of the human race. This
evolution has advanced through four stages, from manual methods to the development of the computer.
</body>
</html>

=============================================================================
TOPIC 3 : TEXT FORMATTING
=============================================================================

Objectives :
-------------------
1. Learn how to change the font settings of the text.

INTRODUCTION
------------
Formatting a Web Page is much different from formatting any kind of document of desktop publishing for one simple
reason: you cannot completely control how your user will view the document. Users may use different web browsers
according to their preferences. Some may see it with Internet Explorer while others may see with Netscape Navigator.
none of these programs shows text formatting in exactly the same way.

TEXT FORMATTING HTML TAGS

-------------------------
Basic Text formatting Tags

Tags Meaning
--------------------------- -----------------------------
<b> text </b> Making Text BOLD
<i> text </i> Making Text ITALIC
<EM> text </EM> Emphasizing Text Logically
<STRONG> text </STRONG> Making strong text
<STRIKE> text </STRIKE> Striking out text
<U> text </U> Underlining text
<SUB> text </SUB> Creating Subscript text
<SUP> text </SUP> Creating Superscript text
<BLINK> text </BLINK> Making text blink

Other available formatting Tags

<BLOCKQUOTE> text </BLOCKQUOTE> Create a block quote
<PRE> text </PRE> Create Pre-formatted Text
<BIG> text </BIG> Making the text size bigger
<SMALL> text </SMALL> Making the text size smaller
<FONT FACE = fontname> Change the Font
<FONT SIZE = fontsize> Change the Font Size
<FONT COLOR = color> Change the Font Color
<BASEFONT COLOR = color> Change the font color of all
the body text
<BASEFONT SIZE = n> Change the font size of all the
body text (where n = 1 to 7)
<hr> Put Horizontal Line
<BR> Break the Line

COLOR CODES OF SIXTEEN PREDEFINED COLORS

----------------------------------------
Color HEX CODE Color HEX CODE
WHITE FFFFFF PURPLE 800080
RED FF0000 NAVY BLUE 000080
BLUE 0000FF CYAN/AQUA 00FFFF
GREEN 008000 OLIVE 808000
FUCHSIA FF00FF TEAL 008080
YELLOW FFF000 SILVER C0C0C0
BLACK 000000 MAROON 800000
GRAY 808080 LIME 00FF00

Please refer to Appendix A (Color Codes Table) for more colors.

TIPS :
1. Not all browsers can display text in bold or italics.
If they do not recognize the tags, the text will have no formatting at all.
2. To change the color of all of the body text at once, use the TEXT attribute in the BODY tag.
3. Text formatted in SMALL is one size smaller, unless the surrounding text is size 2 or smaller, in which case SMALL
has no effect.
4. Text formatted in BIG is one size bigger, unless the surrounding text is size 7 (maximum), in which case BIG has no
effect.
5. The BASEFONT tag has no effect on headers. Be careful, then, not to make the body text larger than the headers, or
you'll confuse your readers.
 6. Use the FONT marker to change the font size of just a few characters or a few words. Use BASEFONT to change the
font size of the whole document.
7. FONT tag can also be used to change the color and typeface of a word, individual or group of letters.
8. Use SMALL tag or set the FONT size to smaller number in lengthy line to fit more text on line.
9. Use large size text number in short line to give more importance to the line.
10. Don't chose a basefont size or font size that is too large to fit comfortably in your user's screen.
11. Use PRE to format an image' alternative text. This allows you to use an ASCII image as alternative text.

TIPS for INTERNET EXPLORE USERS

1. INTERNET EXPLORER does not recognize the BLINK tag, NETSCAPE
NAVIGATOR does.
2. INTERNET EXPLORER always shows BIG text at size 4 and SMALL text
at size 2.
3. If you've changed the size of the body text with the BASEFONT or
FONT tags, the result may not be "big" or "small" text, but just
the opposite, or perhaps no change at all.

EXAMPLE 6 : [Link]
--------------------------
<html>
<head> <title> Inspirational Collections </title></head>

<!-- You may use the color code FF0000 for RED -->
<body> <h1 ALIGN = CENTER><I><FONT SIZE = 30 COLOR = "RED">
Learn How to Count
</FONT></I></h1>

<BASEFONT COLOR = BLUE>

<P ALIGN=CENTER>
Count your BLESSINGS, instead of your <B>CROSSES</B>
<P ALIGN=CENTER>
Count your GAINS , instead of your <STRONG> LOSSES </STRONG>
<!-- Internet Explorer does not recognize the BLINK tag. -->
<!-- Use NETSCAPE NAVIGATOR to see the effect of BLINK tag. -->
<P ALIGN=CENTER>
Count your JOYS, instead of your <BLINK> WORRIES </BLINK>
<P ALIGN=CENTER>
Count your FRIENDS, instead of your <EM> FOES </EM>
<P ALIGN=CENTER>
Count your COURAGE, instead of your <BIG> FEARS </BIG>
<P ALIGN=CENTER>
Count your FULL YEARS, instead of your <SMALL> LEAN </SMALL>
<P ALIGN=CENTER>
Count your KIND DEEDS, instead of your <STRIKE> MEAN </STRIKE>
<P ALIGN=CENTER>
Count your HEALTH, instead of your <SUB> WEALTH </SUB>
<!-- Add three blank lines -->
<BR>
<BR>
<BR>
<P ALIGN=CENTER>
Count on <SUP><B> GOD, </B></SUP>
instead of <SUB><STRIKE> YOURSELF </STRIKE></SUB>.
</body>
</html>

EXAMPLE 7 : [Link]
-------------------------
<html>
<head><title>PERSONAL DOCUMENT</title></head>

<body>
<!-- Display the HEADING in BLUE color (#0000FF) -->
<FONT FACE="Arial" SIZE=7 COLOR="#0000FF">
<h1 ALIGN="CENTER"><I><U> R E S U M E </U></I> </h1></FONT> <hr>

<!-- First Section - Display the Line in Red (#FF0000) -->

<BR><BR><BR>
<FONT SIZE=5 COLOR="#FF0000">
<P ALIGN="CENTER"> <B> PERSONAL INFORMATION </B> </P></FONT>

<!-- BLACK=#000000", BLUE="#0000FF", RED="#FF0000" -->

<FONT SIZE=6>
<FONT COLOR="#0000FF"> <I> N A M E : </I>
<FONT COLOR="#000000"> <B> JUSTIN PAUL V. MANALO </B> <BR><BR>
<FONT COLOR="#0000FF"> <I> ADDRESS : </I>
<FONT COLOR="#000000"> <B> 507 CALABASH RD. SAMPALOC, MANILA </B> <BR><BR>
<FONT COLOR="#0000FF"> <I> BIRTHDATE : </I>
<FONT COLOR="#000000"> <B> SEPTEMBER 5, 1968 </B> <BR><BR>
<FONT COLOR="#0000FF"> <I> S E X : </I>
<FONT COLOR="#000000"> <B> MALE </B> <BR><BR>
<FONT COLOR="#0000FF"> <I> STATUS : </I>
<FONT COLOR="#000000"> <B> SINGLE </B> <BR><BR>
<FONT COLOR="#0000FF"> <I> NATIONALITY : </I>
<FONT COLOR="#000000"> <B> FILIPINO </B> <BR><BR>
<FONT COLOR="#0000FF"> <I> WEIGHT : </I>
<FONT COLOR="#000000"> <B> 170 LBS. </B> <BR><BR>
<FONT COLOR="#0000FF"> <I> HEIGHT : </I>
<FONT COLOR="#000000"> <B> 5 FEET AND 7 INCHES </B> </FONT>

<BR><BR><BR>
<FONT SIZE=5 COLOR="#FF0000">
<P ALIGN="CENTER"> <B> EDUCATIONAL BACKGROUND </B></P>
</FONT>
<FONT SIZE=6>
<FONT COLOR="#0000FF"> <I> COURSE : </I>
<FONT COLOR="#000000"> <B> COMPUTER ENGINEERING </B><BR><BR>
<FONT COLOR="#0000FF"> <I> DATE GRADUATED : </I>
<FONT COLOR="#000000"> <B> MARCH 22, 1990 </B><BR><BR>
<FONT COLOR="#0000FF"> <I> COLLEGE : </I>
<FONT COLOR="#000000"> <B> MULTILANCE UNIVERSITY </B><BR><BR>
<FONT COLOR="#0000FF"> <I> HIGH SCHOOL : </I>
<FONT COLOR="#000000"> <B> ST. JOHN LAURENCE ACADEMY </B><BR><BR>
<FONT COLOR="#0000FF"> <I> ELEMENTARY : </I>
<FONT COLOR="#000000"> <B> ST. PAUL ACADEMY </B>

<BR><BR><BR>
<FONT SIZE=5 COLOR="#FF0000">
<P ALIGN="CENTER"> <B> S K I L L S </B></P>
<FONT SIZE=6 COLOR="000000">
<B> Five years solid experience in Computer Programming, With working knowledge in Visual Studio, Web Page
Development, and Systems Analysis and Design. </B> </FONT>
</body></html>

EXAMPLE 8 : [Link]
-------------------------
<html> <head> <title> NO SMOKING CAMPAIGN </title> </head>

<body>
<h1><CENTER> THE BENEFITS OF QUITTING </CENTER></h1> <hr>

<B><U><h3> 1. WITHIN ABOUT 2 HOURS OF STOPPING </H3></B></U>

<PRE>
There is no more nicotine in your blood.
</PRE>
<B><U><h3> 2. WITHIN ABOUT 6 HOURS OF STOPPING </H3></B></U>
<PRE>
Your heart beat slows down and your blood pressure drops slightly. It may take 3 to 30 days for blood pressure to
return to your normal level.
</PRE>
<B><U><h3> 3. BETWEEN 12 AND 24 HOURS </H3></B></U>
<PRE>
Carbon monoxide is excreted from your body. Lung efficiency improves. You will be less short of breath when you exert
yourself and your staying power will improve.
</PRE>
<B><U><h3> 4. WITHIN A COUPLE OF DAYS </H3></B></U>
<PRE>
You will start to feel and smell fresher. Your taste buds will come alive and your sense of smell will return. You will also
experience euphoria after achieving something you thought impossible.
</PRE>
<B><U><h3> 5. WITHIN DAYS </H3></B></U>
<PRE>
Accumulated phlegm loosens in your lungs and you will cough it over the next few weeks. CILIA, the body's natural
cleaning mechanism, begin to recover. It may take up to three months before CILIA completely recover to efficiently
sweep clean your lung passages.
</PRE>
<B><U><h3> 6. WITHIN THREE (3) WEEKS </H3></B></U>
<PRE>
Your lungs are working better. Exercising is easier.
</PRE>
<B><U><h3> 7. WITHIN TWO (2) MONTHS </H3></B></U>
<PRE>
Blood flows to limbs is improved. you will have more energy (and feel a sense of pride and satisfaction).
</PRE>
<B><U><h3> 8. WITHIN THREE (3) MONTHS </H3></B></U>
<PRE>
Your lungs cleaning mechanism will be working normally. If you are a male, your sperm will become more normal and
number increase.
</PRE>
<B><U><h3> 9. GRADUALLY </H3></B></U>
<PRE>
Blood components and cells lining in your lungs return to normal. This may take a long time.
</PRE>
<B><U><h3> 10. AFTER TWELVE (12) MONTHS </H3></B></U>
<PRE>
Risk of sudden death from heath attack is almost half that of continuing smokers.
</PRE>
<B><U><h3> 11. WITHIN FIVE (5) YEARS </H3></B></U>
<PRE>
Lung Cancer risk is within half of that smokers.
</PRE>
<B><U><h3> 12. AFTER FIVE (5) YEARS </H3></B></U>
<PRE>
Risk of sudden death from heart attack is almost identical to non-smokers,
</PRE>
<I><h4><CENTER> And ... Think of the MONEY you will SAVE. </CENTER>
</H4></I>

</body> </html>

MOVING THE OBJECT USING MARQUEE <marquee>

-----------------------------------------
1. The <marquee> is a non-standard HTML tag which was used to create a scrolling text
or an image.
2. It was used to make the text/image scroll horizontally across or vertically down
the web page.

ATTRIBUTES
----------
1. behavior
- Sets how the text is scrolled within the marquee.
- Possible values are scroll, slide and alternate.
- If no value is specified, the default value is scroll.

2. bgcolor
- Sets the background color through color name or hexadecimal value.
- It is used to give a background color.

3. direction
- Sets the direction of the scrolling within the marquee.
- Possible values are left, right, up and down.
- If no value is specified, the default value is left.

4. height
- Sets the height in pixels or percentage value.

5. hspace
- Sets the horizontal margin
6. loop
- Sets the number of times the marquee will scroll.
- If no value is specified, the default value is −1, which means the marquee will
scroll continuously.

7. scrollamount
- Sets the amount of scrolling at each interval in pixels.
- The default value is 6.

8. scrolldelay
- Sets the interval between each scroll movement in milliseconds.
- The default value is 85. Note that any value smaller than 60 is ignored and
the value 60 is used instead, unless truespeed is specified.

9. truespeed
- By default, scrolldelay values lower than 60 are ignored.
- If truespeed is present, those values are not ignored.

10. vspace
- Sets the vertical margin in pixels or percentage value.

11. width
- Sets the width in pixels or percentage value.

EXAMPLES :
<html>
<head><title>MARQUEE FOR SCROLLING EFFECTS </title></head>
<marquee>Scroll from right to left</marquee>
<marquee direction="right">Scroll from left to right</marquee>
<marquee behavior="alternate">Scroll alternately</marquee>
<marquee direction="up">Scroll from bottom to top</marquee>
<!-- Bouncing Text -->
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
<!-- Scrolling Image -->
<marquee><image scr="[Link]" direction="right"> </image></marquee>

INSERTING MARQUEES - PAGE 181

[Link]

===================================================================
CHAPTER 3 : PAGE LAYOUT
===================================================================

INTRODUCTION
------------
1. HTML has a number of features that apply to an entire page, instead of
being limited to just few words or paragraphs.
2. These elements are called page layout features.
3. Included among these features are setting margins and columns, controlling
 the spacing between the elements on a page, changing the background color
for the entire page, dividing a page into logical sections, and determining
when line breaks should and shouldn't occur.

PAGE LAYOUT TAGS

Tags Meaning

<BODY BGCOLOR=color> Change the Background Color

(where color is one of the predefined colors)

<BODY BGCOLOR="#rrggbb"> Change the Background Color

(where rrggbb is the hexadecimal representation
of the desired color.

<BODY LEFTMARGIN=x> Change the Left Margin (where x is the width in pixels of the space
between the left border of the window and the contents of the page)

<BODY TOPMARGIN=y> Change the TOP Margin

(where y is the height in pixels of the space
between the top border of the window and the
contents of the page)

<CENTER> element </CENTER> Center the HTML elements on a page

<MULTICOL COLS=c GUTTER=g Divide a page into columns.

WIDTH=w> (where c is the number of columns desired, g is the width of the
space between the columns, in pixels or as a percentage, and w is the width of
the entire column set, including gutter, in pixels or as a percentage of window
size)

<NOBR> elements </NOBR> Keeps elements on one line.

<WBR> elements </WBR> Insert soft line breaks in a nonbreakable line.

<P ALIGN = direction> Align all the text in the paragraph. <direction>
is either LEFT, RIGHT or CENTER.

<P STYLE="MARGIN-direction":n> Insert Indent before or after the text. Direction can be
LEFT or RIGHT and n is the width of the space
between the margin and the text.

<BLOCKQUOTE> text </BLOCKQUOTE> Creates a quaotation block

<SPACER TYPE=horizontal SIZE=n> Create indents for your paragraphs.

(where n is the indent in pixels)

<SPACER TYPE=vertical SIZE=n> Specify the space between paragraphs.

(where n is the space between paragraphs in pixels)

<SPACER TYPE=block WIDTH=w Create Block of Space

HEIGHT=h> (where w and h are the width and height, respectively,
of the block, in pixels)
<SPACER TYPE=block WIDTH=w Create blocks of space and wrap around the
HEIGHT=h ALIGN=left> block on the left side.

<SPACER TYPE=block WIDTH=w Create blocks of space and wrap around the
HEIGHT=h ALIGN=right> block on the right side.

TIPS FOR NETSCAPE USERS

1. Netscape always uses a value of 8 pixels for both the top and left margins. It ignores any instructions given in the
LEFTMARGIN and TOPMARGIN.
2. <MULTICOL> is a special extension tag that only NETSCAPE recognizes.

TIPS FOR INTERNET EXPLORER USERS

1. Internet Explorer does not yet understand the SPACER tag.

EXAMPLE 9 : [Link]
<html><head> <title> BOB GARON COLLECTIONS </title></head>

<BODY BGCOLOR="008000" LEFTMARGIN=100 TOPMARGIN=50 RIGHTMARGIN=200>

<FONT COLOR="FF00FF" SIZE=7><CENTER>
SUCCESS IS WAITING </CENTER></FONT><hr>

<P> <FONT SIZE=5 COLOR="000000">

Samuel Johnson said something once that many of us would do well to heed. He wrote : "Nothing will ever be
attempted if all possible objections must first be removed". When we think about a goal or a noble endeavor, two
things come immediately to mind. First, there is a reward which is what motivates us in the first place. Then, there
are objections which tend to demotivate us.

<P ALIGN=CENTER> <I><FONT SIZE=4 COLOR="FFF000">

I am sure that you have thought up countless good ideas which,
<BR> if carried through, would bring you success, rewards and recognition. </I> </FONT>

<P><FONT SIZE=5 COLOR="000000">

I am also sure that nothing came of most of these ideas. You thought about many problems, the obstacles, the
barriers blocking your way. You thought about all these things and then gave up your dreams.
<P>
All too often, we are "siguristas" when it comes to dreaming dreams. We need to think of all the angles, every
possible objections before we undertake the pursuit of our dream. We say we are merely being prudent when in reality
we are full of fears. We insist that what we are doing is simply playing safe when in fact we are piling up reasons NOT
to proceed with chasing our dream.
<P>
There will always be many reasons for not moving ahead. Every good ideas gives rise to all kinds of valid objections.
You always line up an array of solid arguments for not proceeding. And, if you listen to yourself, you will believe the m
and back down.
<P>
Truly successful men and women have a way of creating a balance between a legitimate objections and creative
problem solving. Sure they see obstacles, but they also believe in their abilities to overcome, their strength to
persevere, and their faith to carry them through. Somehow, their determination to succeed and their self-
confidence are enough to push aside their fears, their doubts and their apprehensions.
<P STYLE="margin-left:50">
So, next time you begin to dream, don't kill your dream prematurely. Give it time and encouragement to be born.
don't allow doubts to poison it. Press on inspite of everything.

<P ALIGN=CENTER><B><BIG>Success is awaiting you.</B></BIG>

</body>
</html>

EXAMPLE 10 : [Link]

<html>
<head><title> BOB GARON COLLECTIONS </title></head>

<!-- View this DOCUMENT in NETSCAPE BROWSER -->

<BODY BGCOLOR="00FFFF" LEFTMARGIN=100 TOPMARGIN=50 RIGHTMARGIN=200>

<FONT COLOR="FF0000" SIZE=7><CENTER>

FAILURE? NO SUCH WORD </CENTER></FONT><hr>

<MULTICOL COLS=3 GUTTEN=30 WIDTH=75%><FONT SIZE = 4>

<P>
Ever feel like giving up? Giving up what? Anything. Your job, your marriage, a new project. Or perhaps you
have thought of simply giving up on life. If so, welcome to the human race. All of us have our moments when we
feel like running up the white flag when surrender seems to be the right thing to do. All of us have our
moments when fatigue of doing battles seems to dictate retreat, at least for a while. In such times, failures
does not seem to be such a bad thing after all.
<P>
It is in moments like these when we need to pause for a time and put things into proper perspective. Because of
our negative state of mind, we tend to see more black on the horizon than blue. We seem to focus on what might go
wrong rather than what will probably go right. The fatigue causes confusion and clutter in our minds. It tends to
distort reality. Like the long shadow your body casts that are two and three times as big as you are.
<P>
What is most important is for you to understand that you are not really yourself; that what your are feeling area, to
a great extent, crazy feelings that have no basis in reality. If you are steady enough to realize that what you are
feeling is caused by a distortion of reality, then, that is good beginning. At least you are forewarned to be careful
in making decisions while in this state of mind.

<P>
If you decide, then, the word is caution. Do not trust your own judgment as much as you did when things were
normal. Seek counsel from persons you believe to be wise and then listen well. They might see things more
clearly than you do. You may be set your focus on the negative while totally ignoring the positive realities
in your life. It is strange how easily we fall into this pattern when feeling negative. We cannot see the
positive in our lives. Or, if we look at the positive, it has little or
no impact on us. It is as we see it, but we don't. It is as though our vision of life around us is warped.
<P>
Most often, we feel like giving up because we see our chances of failing growing while the prospects of victory
seem to be dimming more and more with the passing of each day. It is in times such as these that we need to
talk to ourselves, to shake to go on inspite of the discouragement we feel.
<P>
The words of Marden are specially significant: "There are always reasons for giving up. Arguments for self-pity
are as thick as blackberries. The world is crowded with
thorns and cruelties that are causes for tears. Courage is the divine unreason against which, as against a rock,
the waves of disaster beat in vain. When this happens, say to yourself: I am unconquerable, I shall arrive. In the
center of creation sits not an enemy, but my Friend. I shall arrive. What time, what circuit first, I ask not. In some
time, His good time, I shall arrive. Let come what will, I shall never say I am beaten. I am not negligible molecule, a
mote in the sunbeam, a worm! I am a man, and so help me God! I shall play the man."
</MULTICOL>
<P><B><I>
Failure! There is no such word in all the bright lexicon of speech, unless you yourself have written it there! There is no
such thing as failure except those who accept and believe in
failure.
</B></I>
</FONT>
</body>
</html>