Web Development

Benedicto B. Balilo Jr.

 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.

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

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
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.
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.
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.
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 (E-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.
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.
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
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
Concerns About Going Online

• Channel Conflicts
• Competition
• Copyright
• Customer Acceptance
• Legal Issues
• Loyalty
• Security
• Viability
Internet Business Models
Category Desciption Examples
Virtual Store Sells physical Amazon.com
goods or services Virtual
on-line instead of vineyards
through a physical
storefront ore retail
outlet.
Online-service Provides service CyberMedia
provider and support for TuneUp.com
hardware and
software users
Academic Provides www.bicol-u.edu
information on www.upou.org
particular academic
org.
Government Government .gov.ph
agency
Category Description Examples
Marketplace concentrator Concentrates information InternetMail
about products and DealerNet
services from multiple InsureMarket
providers at one central
point
Information Brokers Provide product, pricing, PartNet
and availability Travelocity
information. AutoByTel
Electronic Provides auction-like Bid.com
ClearingHouse settings for products OnSale
where price and
availability are
constantly changing.
Content Provider Creaes revenue by Wall Street
providing content. The Journal
customer may pay to Quote.com
access the content, or Tripod
revenue may be
generated by selling
advertising space
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.
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”
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
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

103.8.35.92

An organization called InterNIC gives IP addresses

to various ISP’s. These ISP’s then distribute these
addresses to computers in their network.
Domain name system (DNS)

192.63.7.45 www.companyx.com

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.
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
Client/Server Concept
Client
A system that accesses a service or a resource request
from another computer or program

Server
A system that fulfills requests or provides services
Client/Server Architecture
2-tier Architecture
processing is done entirely by
the client -> ex. HTML

3-tier Architecture

Business Logic
Tier

volume of processing is in the

Client/Presentation Tier server or in the middle tier

Data Tier
Client-side

Server-side
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>

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>
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.
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
HTML Skeleton
<HTML>
<HEAD>
<TITLE>Page’s Title </TITLE>
</HEAD>
<BODY>
contents here…
</BODY>
</HTML>
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.
•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.

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: vince10@yahoo.com

Different headers concerning sending an email

To:
 From:
 Subject:
 CC:
 BCC
 Attachments:
Uses of the Internet
Acronyms associated with email
SMTP – Simple Mail Transfer Protocol refers to the standard
rules that many e-mail clients use to handle outgoing e-mail
message.

POP3 – Post Office Protocol version 3, the standard rules that

many email clients use to handle incoming email messages.

MIME – Multipurpose Internet Mail Extensions, a format for

turning an email attachment, such as a Word file, into ASCII text
so it can be sent from one email account to another.
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.
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

http://microsoft.com/windows/default.php
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
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

1. Physical layer – lowest level, concern with electrical signals 0,1
2. Data link layer – how bits are sent, detecting and correcting
errors in transmission in the physical layer
3. Network layer – data grouped into packets, correct path
4. Transport layer – make sure packets received from other end
5. Session layer – keeps track which computer is currently talking
6. Presentation layer – concerned with the meaning of bits
7. Application layer – just a collection of protocols email, ftp, etc
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.
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.
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

http://165.220.21.46
http://www.ics.uplb.edu.ph
• port number
• filepath and filename http://www.yahoo.com/index.html
• fragment identifier

http://facultyportal.com/faculty/syllabus.html#it26
• parameter

http://facultyportal.com/it26/exams/quiz1.cgi?
id=123+password=*****
Stages of Web Development
http://www.quality-web-programming.com/blog/stages-of-website-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.
Stages of Web Development
http://www.quality-web-programming.com/blog/stages-of-website-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.
 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.
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.

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.
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.
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.
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 axiom less is more holds particularly true for the web. 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.
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 stylistic 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.
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.
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.
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.
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.
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. It's like an “elevator pitch” or
limited self promotion. The font sizes
of today’s new websites have
increase to improve the readability of
the visitors. More utilization of lower
case fonts and different selection of
comfortable typography could also
be seen to create a casual and
comfortable rapport with the visitors.
Kissmetrics uses different variety of
typography and font sizes to
differentiate the weight of each
statement. Its mission is to "Keep It
Simple" whether it's their design or
application.
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.
Envato present site navigation in a new and interesting dimensional way. Its
navigation bar slides down into an umbrella chain of community sites at the same
time remains firmly on the bottom.
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.
WP Coder boosts a logo that is cleverly
related to it's scope of work. Not only has
the logo been imbued together with the
text, it has shown that logo design could
be bold and adventurous, at the same
time forging a brand with incorporating
attitude, tone of voice, and first
impression.
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.
Two Toasters has shinny icons, gradient background and shadows images to
make the website more visually interactive.
Engaging Icons

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.
Cabomba make uses of intriguing icons and labels to engage their visitors.
Those icons are not only sharp and clear, its also bring out their intended
meaning perfectly without using huge human life pictures.
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

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).
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.
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.
 <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>

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

HTML has two types of styles for individual words or

sentences:
1. Logical. Logical styles tag text
2. physical. indicate the specific appearance of a
section.
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.

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>
 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)
<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.)
Other HTML tags
 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:
#!/bin/csh
rm *
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.
--William Strunk, Jr., 1918
Addresses

The <ADDRESS> tag is generally used to specify the author of a

document, a way to contact the author (e.g., an email 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 /pubs@ncsa.uiuc.edu / revised
April 96
</ADDRESS>

The result is:

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised
April 96

NOTE: <ADDRESS> is not used for postal addresses.

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.
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 61820-5518<BR>

The output is:

National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518
Character Entities
 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 (&quot;).

To use one of the three characters in an HTML document, you

must enter its escape sequence instead:
&lt; the escape sequence for <
&gt; the escape sequence for >
&amp; the escape sequence for &
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>
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>
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>
<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”>
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.
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=http://
www.ncsa.uiuc.edu/General/WWW/HTMLPrimer.html> NCSA's
Beginner's Guide to HTML</A>
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>
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>
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”>
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…
Reference
Reference:
http://www.granneman.com/teaching/washingtonuniv
ersity/webdesign/syllabus.htm

Concepcion, Khan, Bonto-Kane, Marivic, “Web-

based Information Systems”, UPOU