1. Web Development
Benedicto B. Balilo Jr.

2. Web Development
Benedicto B. Balilo Jr.
This course covers Web site development using three methods: hand- coding HTML using a text editor; building Web pages using a WYSIWYG editor like Dreamweaver; and using the most modern method, a Content Management System like joomla that separates design from content while making it easy for non-technical users to update a site.
We will cover design principles, Cascading Style Sheets, server-side vs. client-side technologies, Web browsers, and Web servers.
Consideration of XHTML and XML.

3. It is assumed that you… know the fundamentals of HTML
have a general understanding on how Web servers and client browsers works
know at least 1(one) web application tool

4. presentation objectives
introduce the concept of Internet and world wide web
know the difference between static and dynamic web page
be familiar and gain understanding on the different HTML tags

5. Expected output
At the end of the presentation you are expected to design a static web page using Notepad application.
Your design should focus on school information with minimum links covering about, home, profile, contact
The presentation should include pictures, links and appropriate template.

6. The Internet
“The Internet and Web technologies have changed the way we view and interact with information.” – IS226 UPOU
Previously the information is based on document- centric model which is static. But, today we have shifted our concept of information to dynamic model, which is both structured and unstructured information presented in a Web browser.
We have shifted our expectations of the quality of information we interact with. And, information must be timely.

7. The beginning of information system evolution come along in the 1950’s which is the change of manual to a computer system come technical.
The 1970’s was characterized as the Era of Effectiveness. Organizations aimed for improved managerial and organizational effectiveness.
In the 1980’s, the Era of Competitiveness began. IS were used as a tool for competitive advantage.

8. The INTERNET is a global connection of computers, allowing organizations to exchange information internally or to communicate externally with other organizations.
Internet technologies and capabilities allow users to retrieve and offer information.
Electronic Mail ( )
Usenet Newsgroups (Forums) – people share information on a defined topic
Chatting
File Transfer Protocol (FTP) – access a remote computer and retrieve files from it or upload files to it.

9. The World Wide Web consists of:
The pages of information accessed (Web Pages)
The servers on which the pages of information reside (Web Servers)
The client software you use to access the pages (Web Browsers)
The network between your computer and the Web server/s with which you interact.

10. Why GO online?
The strengths of e-Business depend on the strengths of the Internet. E-Business can take advantage of the strengths of the Internet, namely:
Global Accessibility and Sales Reach
Closer Relationships
Free Samples
Reduced Costs
Disintermediation
Time to Market
Customer Loyalty

11. Reasons why a company needs an online presence
Expanding Market reach
Generating visibility
Strengthening business relationships
Responsiveness
Offering new services
Cost reduction
Just-in-Time inventory

12. Concerns About Going Online
Channel Conflicts
Competition
Copyright
Customer Acceptance
Legal Issues
Loyalty
Security
Viability

13. Internet Business Models
Category
Desciption
Examples
Virtual Store
Sells physical goods or services on-line instead of through a physical storefront ore retail outlet.
Amazon.com
Virtual
vineyards
Online-service provider
Provides service and support for hardware and software users
CyberMedia
TuneUp.com
Academic
Provides information on particular academic org.
Government
Government agency
.gov.ph

14. Category
Description
Examples
Marketplace concentrator
Concentrates information about products and services from multiple providers at one central point
InternetMail
DealerNet
InsureMarket
Information Brokers
Provide product, pricing, and availability information.
PartNet
Travelocity
AutoByTel
Electronic ClearingHouse
Provides auction-like settings for products where price and availability are constantly changing.
Bid.com
OnSale
Content Provider
Creaes revenue by providing content. The customer may pay to access the content, or revenue may be generated by selling advertising space
Wall Street
Journal
Quote.com
Tripod

15. Introduction to the Web and the Internet
Objectives:
Understand the basic structure of the networks and the Internet
Define the World Wide Web
Explain the concepts behind some of the common uses of the Internet and the Web.

16. History of Internet
1969 – network of four computers called ARPANET (Advance Research Project Agency)- computer sharing network
1971 – fifteen nodes in ARPANET
1972 – 37 nodes
Throughout the years, the network grew through its decentralized structure, which could accommodate different kinds of machines. Those came the term “Internet”

17. Network and Internetwork
Network is a group of interconnected systems sharing services and interacting by means of shared communication link.
something to share (data)
a physical pathway (transmission media)
rules of communication (protocols)
Internetwork is two or more networks that are connected so that they can exchange messages and share information

18. The Internet
Is the world’s largest Internetwork. Each computer in the Internet has an assigned IP address. An IP address consists of four numbers between 0 and 255 separated by period
An organization called InterNIC gives IP addresses to various ISP’s. These ISP’s then distribute these addresses to computers in their network.

19. Domain name system (DNS)
Cybersquatting an act of owning or grabbing a domain name that technically belongs to or is the trademark of someone else.
Internet uses client-server relationship. All computers connected to the net are the same. Servers are special types of computers that are capable of delivering information and data. Clients are computers that may only receive data.

20. Static vs Dynamic Static
content doesn’t change until the author updates it
no interaction with visitors
Dynamic
content changes depending on the data supplied
(customizable actions)
there is user interaction

21. Client/Server Concept
A system that accesses a service or a resource request from another computer or program
Server
A system that fulfills requests or provides services

22. Client/Server Architecture
2-tier Architecture
3-tier Architecture
processing is done entirely by the client -> ex. HTML
Business Logic Tier
volume of processing is in the server or in the middle tier
Client/Presentation Tier
Data Tier

23. Client-side Server-side

24. HTML
is a way of defining the formats of text in a web page. HTML is a sub-language of SGML, or Standard Generalized Markup Language. SGML is a system that defines and standardizes the structure of documents.
HTML tags
are used to define areas of a document as having certain characteristics. The tags used in HTML usually consists of a code in between two “wickets”. These codes are called container tags because the formatting described by the tag affects only the text contained between the tags.
ex. <B> … </B>

25. Sample HTML code <html>
<head><title>Sample HTML Tag</title></head>
<body bgcolor="white">
<table width="400" cellpadding="3" cellspacing="5">
<tr>
<td id="tablePropsWidth" width="400" colspan="2"><font id="LID1"
style="COLOR: black; FONT: 8pt/11pt verdana">Internet Explorer is unable to display this page when you are not connected to the Internet.</font></td> </tr> <tr><b>Make available offline</b> check box.<br>
</li>
<li id="instructionsText3">On the <b>Tools</b> menu, click <b>Synchronize</b>. </li>
<h2 style="font:8pt/11pt verdana; color:black" id="ietext">Internet Explorer </h2>
</table>
</body>
</html>

26. WEB BROWSERS
A browser is a piece of software that acts as an interface between the user and the inner-workings of the Internet.
also referred to as Web Clients, or Universal Clients because in the client/server model, the browser functions as the client program. The browser acts on behalf of the user.
(1) contacts a web server and sends a request for information
(2) receives the information and then displays it on the user’s computer.
can be graphical or text-based. A text-based browser shows the user only the textual matter. A graphical browser allows the user to see more of what the WWW has offer such as graphics, photographs and multimedia.
text-based browser is Lynx
graphical browsers includes IE, FireFox, Mosaic, Opera, Amaya, HotJava.

27. HTML Basics HyperText Markup Language The language of web pages
Describes the structure of a document
File Extension: html or htm
Not case-sensitive
Its elements are called tags

28. HTML Skeleton <HTML> <HEAD>
<TITLE>Page’s Title </TITLE>
</HEAD>
<BODY>
contents here…
</BODY>
</HTML>

29. Basic elements of the Web
HTML – the coding language of the www that informs browsers how to display a document’s text, links, graphics, and other media
Webmaster – individual responsible for maintaining and updating the content of the www document.
Domain name – name given to any computer registered on the www as an official provider of information and files.
URL – Uniform Resource Locator serves as identification for all www documents.
Web site – a collection of www documents, usually consisting of a home page and several related pages.

30. Home page – the “cover” of a particular web site
Home page – the “cover” of a particular web site. The home page is the main, or first page of an organization’s or person’s web site.
Link – short for “hyperlink”. A link provides a path that connects you from one part of a www document to another part of the same document.
Anchor – a link that takes you to a different part of the same web page.
Image map – enables you to click various locations in a graphic image to link to different documents.
Frame – presents text, links, graphics, and other media in separate portions of the browser display.
Table – presents documents in row and column format.

31. Uses of the Internet email three(3) elements
- user ID – user identification like vince10
- ‘at’ sign connects the user ID with the third element
- Domain
example:
Different headers concerning sending an
To:
From:
Subject:
CC:
BCC
Attachments:

32. Uses of the Internet Acronyms associated with email
SMTP – Simple Mail Transfer Protocol refers to the standard rules that many clients use to handle outgoing message.
POP3 – Post Office Protocol version 3, the standard rules that many clients use to handle incoming messages.
MIME – Multipurpose Internet Mail Extensions, a format for turning an attachment, such as a Word file, into ASCII text so it can be sent from one account to another.

33. Uses of the Internet
chatting – sending and receiving messages directly with another person or group of people.
IRC – Internet Relay Chat, a multiuser version of a program called ‘talk’, allow only one-to-one conversations.
- developed by Jarkko Oikarinen
- using IRC, large groups of people can simultaneously
participate in discussion groups called ‘channels’.
getting files – FTP is one of the most popular methods of obtaining software and documents on the Internet.

34. Navigating the Web
One of the most uses of the Internet is to obtain information.
It is important to know the basic parts of a Web URL or the address of an Internet file.
It consists of four parts:
- protocol
- server (or domain)
- path
- filename

35. Navigating the Web
Search Engine – a service that indexes, organizes, and often rates and reviews web sites.
Some major search engines:
- Yahoo!
- Google
- MSN Web Search
- Infoseek
- Snap
- MetaCrawler
- AltaVista
- Bing

36. Internet Protocols
Protocols are defined as ways in which computers communicate with each other. They determine how data is send, how data is received, what must be done to ensure that data received is correct, what kind of data is sent, and so on.
SEVEN layers of OSI
Physical layer – lowest level, concern with electrical signals 0,1
Data link layer – how bits are sent, detecting and correcting errors in transmission in the physical layer
Network layer – data grouped into packets, correct path
Transport layer – make sure packets received from other end
Session layer – keeps track which computer is currently talking
Presentation layer – concerned with the meaning of bits
Application layer – just a collection of protocols , ftp, etc

37. TCP/IP
was adopted as the standard by the developers of the Internet. TCP/IP is a combination of TCP and IP. TCP resides in the transport layer while IP coincides with the network layer.
IP – a protocol that contains addressing information and some control information that enables packets to be routed.
TCP – provides reliable transmission of data in an IP environment. This means it includes error-detection and correction. TCP is also responsible for sending acknowledgements that data have been received correctly.

38. HyperText transfer protocol - HTTP
HTTP is the WWW application-layer protocol. It is implemented in two programs:
- a client program
- a server program
HTTP defines how Web clients (browser) request pages from Web servers and how Web servers transfer Web pages to Web clients.

39. Internet Addressing
Uniform Resource Locator (URL) – refers to the address of a resource on the Web.
Components of URL
site address (host) – identifies the site address of the computer
port number
filepath and filename
fragment identifier
parameter
ord=*****

40. Stages of Web Development
Analysis of the Project: This is the very basic stage of web development in any web development company. Before starting off it is required to gather some of the basic information about the project. The objectives and purpose of developing a site is to be known. It is also important to know for whom the site is going to be developed.
Documentation: Once the project analysis is complete, it is required to know whether it is feasible to carry out the project. The cost has to be also calculated. Documentation is prepared which is passed on to the clients for their approval.
Designing a Site: Site designing starts once a project and its pricing are approved between the client and a web development company. Now the look and feel of the site is planned and designed.
Developing a Site: This is one of the essential parts of web development. Development of a site comprise designing a database and prepare proper coding for a site. This is a back end coding that helps to run a site.

41. Stages of Web Development
Testing: Once designing and development of a site is complete, it is given for testing. The test engineers are assigned with the duty to check whether the site is properly working or not. On finding errors they are conveyed to the developers of the site for required modifications. The testing process is continuously carried out until the site is completely error free.
Setting it Up: After the testing engineers it is the client’s turn to check the site. Following a customer’s feedback it is either sent back to the developers or if it is approved then preparations are taken to set it up.
Regular Maintenance: This is the last but not the least stage of web development. A site after going live needs regular maintenance. A site should be also regularly updated from time to time.

42. Steps. Web Site development process.
Goal and definition. Understand your audience and know the target software.
Information Architecture. What are your site's functions. Do you want to deliver information or sell a product? Do a storyboard diagram of the pages and their hyperlink structure.
Page architecture. What will the pages look like?
Interface design. How will the pages be linked?
Content creation.
Scripting and programming.
Testing.
Publishing. Publicizing. This might be the most important aspect of the process if you are doing a commercial site.

43. Fluid and user friendly interface.
Elements of Web Design
Factors to consider when creating a Web site
Fluid and user friendly interface.
Remember, only you can make site use easy for your visitors.
Good organization and presentation are important. Site visitors need to scan a page and find the materials offered. Many visitors never scroll down a page. Long pages can have internal links (anchors) to section headings at the top of the page.
Download speed is today's bottleneck. The majority of Web users are downloading on modem connections at 56 Kbps. File sizes and graphic sizes should be kept to the minimum needed for the page. Linked thumbnails can be used to present large graphics.
Web pages are a nonlinear information distribution medium. Links can lead in many directions. You provide the pathways to information. Easy to understand navigation and/or visible site organization assists the user. Make your organization apparent.

44. Attractive graphic design.
This means different things to different audiences. Rock band aficionados will have different expectations than genealogy buffs or auction users. Design should be tailored to the expected audience and site use.
Use of colors. Site purpose will influence choices of colors and graphics. Consider how the page will print if it is likely to be printed. Will the font color appear on white paper? What will your page look like if the client overrides your page colors?
Use of graphics. What purpose do they serve? A picture can communicate a lot of information. Is the graphic appropriate for the purpose? How large is the graphic file size. Are you creating the smallest possible graphics for your purposes?
Image links. Images cannot be altered by the client browser, but they are not always downloaded either.
Fonts. Do your clients have the font on their computer? Fonts can be downloaded. Different default fonts can be specified by the browser, overriding your choice. You can specify a family of fonts instead of just one.
JavaScripting can enhance interactivity, graphic content and conserve space.

45. Layout.  The end user's page layout is not entirely under the control of the page creator. Layout suffers from certain limitations.
Browsers can change font size.
Browsers can change window size.
Computers have differing monitor display sizes: (512 x 384), (640 x 480), (800 x 600), (1024 x 768), and larger.
Monitors have different resolutions and can make pages look smaller or larger.
Some Internet users are displaying the Web on television screens, palmtops, text-only devices or Braille readers. Will your page retain a logical sequence?
Users can turn off graphics for faster downloading and to limit transition time.
Different browsers and different versions of browsers can use different settings for the same HTML tags.

46. File Sizes.  Theoretically, the Web is capable of the same features as a CD-ROM. Because everything on the Web is transmitted on a network, the download time limits what sites actually do? Print graphics might be 20 MB in size. A slow modem can take a minute to download a single Web page. Until bandwidth increases, using the smallest possible files to execute your ideas is best.
HTML.  HTML capabilities are changing. The World Wide Web Consortium (W3C), a standards committee, presides over development of the HTML changes. The current version is HTML 4.0. Browsers might add support for new capabilities faster than they are adopted. This means that the great page you create today may soon be a cyber dinosaur. At the same time, some clients are using old browsers that may not support your 4.0 tags.

47. Elementary Rules of Usage
Make sure your links work.
This will prevent disappointed readers. The best way to make sure this doesn't happen is to test the pages several times - from different domains if possible, at minimum from different machines. Then check the error logs on a regular basis to make sure others aren't finding bad links on your pages that you missed.
Page content should be limited.
The nature of browsing has allowed us to break information into suitably digestible pieces, with a quick link to the next piece in the flow. This also give the reader a chance to change their mind before going on without the necessity of loading a very long document to decide. Exceptions to the rule exist - if the sole reason a document exists on the web is to have someone print it out, then the content being on a single page is quite handy. On the other hand if you're just doing that so you don't have to produce a real html version of the document you're being lazy.

48. Consider white-space balance
As in art, balance between objects, between dark and light, is necessary. Look at the page from a moderate distance - do you mostly see dark or light? If the former, consider modifying the page to lighten it up. Information is easier to absorb if it doesn't saturate the page.
Maintain style coherence with graphics
This is just a common sense design approach - continuity of design elements. Carry it throughout your pages. Another way to say this is that buttons and icons should look like they were created by the same artist.
Avoid dead-end links
Give your readers a "way out" of your pages that is to your advantage. Don't make them dependent on the back button to see more. Perhaps after reading one section of your information the next logical place to go would be to another section, and not necessarily back to the top. Give them a choice to take either path.
Place important information at or near the top of the page
It should be visible when the page first appears. If someone needs to scroll to see it they may miss it. This is particularly true with What's New links and chronological listings - the latest information should be first.

49. Indicate size on large files that will be downloaded
This is a courtesy to modem users in particular!
Place links on the word that describes where the link goes - never on the word "here"
Need any more be said?
Avoid "generic web information"
Don't waste your own space helping users get to NCSA or CERN - they came to your pages to read about you (exception - if you're providing an web indexing service you will certainly include those types of links!)
Make titles very descriptive
Titles show up at the top of browsers, get saved on bookmark lists and hotlists - they need to say more than "stuff" for them to be a good reference back to your pages.
Read Elements of Style
This little book by Strunk and White gives a lot of good advice about writing in particular, but also about style in general. It's short and to the point, but useful in the design of web pages or any other medium of textual information.

50. Keynotes of Web Design Elements
Simplicity of Design
The simplicity of web application functionality is both mirrored in the design and style of today’s webpages. Simplicity of today web design simply means focused, clean and straightforward. Web designers have moved from the stage of squeezing every single pieces of information into our webpages to eliminating the unnecessary, at the same time presenting a clean and simple interface for visitors. They are also attempting to engage the lifespan of visitors by capturing their attention instantly to what is important, rather than trying to overwhelm them with everything under the sun.
Columns Reduction and Centered Design
The ancient layout of floating left and right pages with numerous columns has been replaced by the stylistic centered design trend. Designers are able to present information in a sleeker and self-assured centered orientation. As fewest numbers of columns is used, the simplicity increases simultaneously. It's practical as well in the area of viewing because  it's much more compatible with various screen resolutions and sizes.

51. Arrangement & Whitespace
Readability is a critical factor to bring your message across. Instead of cramping your texts, website designer are keeping a simple and clean layout by increasing line heights and adding lots of whitespace to pages. Web designers are also focusing on the essentials of improving the viewing pleasure of visitors by producing crisply, sharp and fresh pages.
Checkout App has a high level of readability on its site with nice level of spacing. It has also arranged their section neatly to provide organized and clean pages.

52. Choice Of Colours
Today’s websites used a mixture of strong and complementary colours to emphasize important concepts as well as creates distinctness between areas of the site. Certain colours has been perceived to be more effective and safer for designers to adopt. Designers also have a variety of Web 2.0 colour tools available to test-drive and enrich their design.

53. Variation of Fonts Sizes
Bold use of large fonts is often used by new websites to point out their key concepts to visitors, or to convey a focus and clear message about their website’s main objective or mission.

54. Sticky And Simple Navigation
This new trend of navigation set apart from the busyness of the site content and the body of the page. There are usually a hierarchy of navigation bars displayed distinctively with each specifically fulfilling their intention. Web designers has realized the importance of effective navigation so they have built the navigation into something that is simple and could be found on every pages without you trying to look for it.

55. New Age Logos
The designers have restudied the logos design capability and reinvented the logos into something which is daring and confident. Significant large logos are often used to establish a prominent brands business and gave an intriguing feel to visitors.

57. A New Feel And Look
Subtle use of drop shadows, gradients, mirrored images, glossy and shinny surfaces has added a realistic 3D effect and classy edge to the once dull interface. The effect of creating a reflective logo, surface or image could be found on many new websites to make them more engaging. The site not only become more entertaining in visual and life-like but enhances the qualitative feel of the design. These little touches make our visual interface feel more solid and real. Realistic effects of water droplets, shiny plastic surfaces, glass reflections have been very popular and may also remind us of certain tactile or aesthetic qualities of real-world objects.

58. Engaging Icon
The old school of stock photography or marketing images with happy business people shaking hands has gradually been replaced by simple and engaging icons. These impressive and richly detailed icons draw the attention of your visitors and does not put them off by those rigid traditional pictures. These may well include exciting and idiosyncratic shapes or star-shaped labels which has a call to action effect, often utilized to promote and highlight a free or particular service.

72. Introduction to HTML Objectives:
be familiar with the different HTML tags, its attributes and uses
know the structure in creating web page
know the different physical and logical formatting styles

73. Introduction to HTML
developed by Tim Berners Lee ‘father of HTML’, ‘father of the Internet’
a graphical Internet service that provides a network of interactive documents and the software to access them.
It is based on documents called “pages” that combine text, pictures, forms, sound, animation and hypertext links called hyperlinks.
also referred W3 or simply “the Web” is the universe of information available via hypertext transfer protocol (HTTP).

74. A web page is a single unit of information, often called a document that is available via the A web page can be longer than a computer screen and may require more than one piece of paper when it is printed.
A web page is created using HTML, an HTML consists of standardized codes or “tags” that are used to define the structure of information on a web page.

75. Basic Elements of HTML <!doctype> - document type declaration
- function is to give information on the name and version of the mark-up language being used in the document.
<!doctype html public “-//3C//DTD HTML 3.2 Final//EN”>
<!doctype XML 1.0>
<html> - Is the single most important tag to remember when building a web page.
<head> - contains descriptive information about the document like script code, references to supplementary files. This section includes <title>, <link>, <meta>, <style>, etc.

76. <BODY> - contains all the displayable information of the documents like text, literature, graphics, and any other multimedia presentation.
attributes: ALINK, BACKGROUND, BGCOLOR, BGPROPERTIES, CLASS, ID, LEFTMARGIN, LINK, TEXT, TOPMARGIN, VLINK
HTML Tags
consist of a left angle bracket (<), a tag name, and a right angle bracket (>)
it is usually paired to start and end instruction
ex: <HEAD> </HEAD>
it has attributes
ex: <FONT FACE=“Arial” size=10>

77. Core HTML elements Headings <h1>…</h1>
Align=‘left,center,right’
Paragraph
<p>…</p>
Break
<br>
None
Center
<center>…</center>
Division
<div>…</div>
Blockquote
<blockquote>…</bloclquote>
Address
<address>…</address>
Preformatted
<pre>…</pre>
Horizontal Rule
<hr>
Align, size, width

78. Character Formatting
HTML has two types of styles for individual words or sentences:
Logical. Logical styles tag text
physical. indicate the specific appearance of a section.

79. Physical formatting elements
Bold
<b>…</b>
Italics
<i>…</i>
Strikeout
<s>…</s>
Monospaced
<tt>…</tt>
Underline
<u>…</u>
Big
<big>…</big>
Subscript
_…
superscript
^…
<B> bold text
<I> italic text
<TT> typewriter text, e.g. fixed-width font.

80. Logical formatting elements
Abbreviation
<abbr>…</abbr>
Citation
<cite>…</cite>
Code
<code>…</code>
Definition
<dfn>…</dfn>
Emphasis
<em>…<em>
Keyboard
<kbd>…<kbd>
Sample
<samp>…<samp>
strong
<strong>…</strong>
variable
<var>…</var>

81. Logical Styles
<DFN> for a word being defined. Typically displayed in italics. (NCSA Mosaic is a World Wide Web browser.)
<EM> for emphasis. Typically displayed in italics. (Consultants cannot reset your password unless you call the help line.)
<CITE> for titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML)
<CODE> for computer code. Displayed in a fixed-width font. (The <stdio.h> header file)

82. <KBD> for user keyboard entry
<KBD> for user keyboard entry. Typically displayed in plain fixed-width font. (Enter passwd to change your password.)
<SAMP> for a sequence of literal characters. Displayed in a fixed-width font. (Segmentation fault: Core dumped.)
<STRONG>
for strong emphasis. Typically displayed in bold. (NOTE: Always check your links.)
<VAR> for a variable, where you will replace the variable with specific information. Typically displayed in italics. (rm filename deletes the file.)

83. Other HTML tags

84. Preformatted Text
Use the <PRE> tag to generate text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant (multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file).
Example:
<PRE>
#!/bin/csh
rm *
</PRE>
display as:

85. Extended Quotation
Use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen.
In the example:
<BLOCKQUOTE>
<P>Business newsline</P>
<P>Manufacturing growth slowed down in May. </P>
--William Strunk, Jr., 1918
</BLOCKQUOTE>
the result is:
Business newsline
Manufacturing growth slowed down in May.

86. Addresses
The <ADDRESS> tag is generally used to specify the author of a document, a way to contact the author (e.g., an address), and a revision date. It is usually the last item in a file.
For example, the last line of the online version of this guide is:
<ADDRESS>
A Beginner's Guide to HTML / NCSA / revised April 96
</ADDRESS>
The result is:
A Beginner's Guide to HTML / NCSA / / revised April 96
NOTE: <ADDRESS> is not used for postal addresses.

87. Definition Lists
A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>).
The following is an example of a definition list:
<DL>
<DT> BU
<DD> Bicol University
<DT> UP
<DD> University of the Philippines
</DL>
The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P> paragraph tags), lists, or other
definition information.

88. Forced Line Breaks
The <BR> tag forces a line break with no extra (white) space between lines. Using <P> elements for short lines of text such as postal addresses results in unwanted additional white space.
For example, with <BR>:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois <BR>
The output is:
National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois

89. Character Entities

90. Escape Sequences (a.k.a. Character Entities)
Character entities have two functions:
escaping special characters
displaying other characters not available in the plain ASCII character set (primarily characters with diacritical marks)
Three ASCII characters-- (<), (>), and (&)– have special meanings in HTML and therefore cannot be used "as is" in text. (The angle brackets are used to indicate the beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence.) Double quote marks may be used as-is but a character entity may also be used (").
To use one of the three characters in an HTML document, you must enter its escape sequence instead:
< the escape sequence for <
> the escape sequence for >
& the escape sequence for &

91. To make an unnumbered, bulleted list,
1. start with an opening list <UL> (for unnumbered list) tag
2. enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed
3. end the entire list with a closing list </UL> tag
Below is a sample three-item list:
<OL type=“A”> <UL type=“desc”>
<LI> Chapter 1</LI> <LI> Chapter 1</LI>
<LI> Chapter 2</LI> <LI> Chapter 2</LI>
</OL> </UL>

92. Presentation and Layout
All HTML elements that contain attributes bgcolor or background can accept color.
<BODY bgcolor=“english name | #RRGGBB” background=“url to graphic file”
text=“english color name”
link=“english color name”
alink=“english color name”
vlink=“english color name”>
<TABLE bgcolor=“english name | #RRGGBB”
background=“url to graphic file” >
</TABLE>

93. Inserting Table Inserting table <TABLE></TABLE>
<TR> - table row <TD> - table data
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
</TABLE>

94. <FONT color=“english name | #RRGGBB”
face=“font family”
size=“1 to 7 (default 3)”>
… document text
</FONT>
<IMG align=“bottom | left | middle | right | top”
border=“integer pixels”
height=“integer pixels”
hspace=“integer pixels”
src=“URL”
vspace=“integer pixels”
width=“integer pixels”>

95. Relative pathnames versus Absolute Pathnames
You can link to documents in other directories by specifying the relative path from the current document to the linked document.
For example, a link to a file NYStats.html located in the subdirectory AtlanticStates would be:
<A HREF="AtlanticStates/NYStats.html">New York</A>
These are called relative links because you are specifying the path to the linked file relative to the location of the current file. You can also use the absolute pathname (the complete URL) of the file, but relative links are more efficient in accessing a server.

96. In general, you should use relative links because:
1. it's easier to move a group of documents to another location (because the relative path names will still be valid)
2. it's more efficient connecting to the server
3. there is less to type
However use absolute pathnames when linking to documents that are not directly related.
For example, consider a group of documents that comprise a user manual. Links within this group should be relative links.
Links to other documents (perhaps a reference to related software) should use full path names.
<A HREF= NCSA's Beginner's Guide to HTML</A>

97. Links and Addressing
Anchor element <A>…</A> implements HTML’s hyperlinking capabilities.
<A href=“URL”
name=“string”
target=“_blank | _frame_name | _parent | _self | _top”
title=“advisory text” >
… linkable content
</A>

98. Layout with Tables
The <TABLE> element allows you to present text, images and other information objects in table form.
<TABLE aligh=“center|left|right”
background=“url”
bgcolor=“color name”
border=“integer pixels”
cellpadding=“integer pixels”
cellspacing=“integer pixels”
cols=“number”
height=“integer pixels”
width=“percentage”>
</TABLE>

99. Multimedia refers to using various types of media to convey or present information.
Animation refers to the ability to see continuous movement of something that would be stationary. There are two types of animation currently implemented:
1. animated text <MARQUEE>
2. animated pictures <EMBED>
<MARQUEE behavior=“alternate | scroll | slide”
direction=“down | up | left | right”>
<EMBED src=“url with extension .swf”
width=“integer”, height=“integer”
type=“application/x-showckwave-flash”
plugin=“path”>

100. Thank YOU!
Hope you enjoy and understand what really HTML and creating web pages really is all about…
You are now equipped with HTML technologies and ready to control web page design parameters using Cascading style sheets…

101. Reference
Reference:
rsity/webdesign/syllabus.htm
Concepcion, Khan, Bonto-Kane, Marivic, “Web-based Information Systems”, UPOU