Download Web Development

Web Development
Benedicto B. Balilo Jr.
Web Development
Benedicto B. Balilo Jr.
This course covers Web site development using three methods: handcoding 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 documentcentric 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 goods Amazon.com
or services on-line Virtual
instead of through a vineyards
physical storefront
ore retail outlet.
Online-service
provider
Provides service
and support for
hardware and
software users
CyberMedia
TuneUp.com
Academic
Provides
information on
particular academic
org.
www.bicol-u.edu
www.upou.org
Government
Government
agency
.gov.ph
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
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
server or in the middle tier
Client/Presentation 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: [email protected]
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+passw
ord=*****
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Internet’
‘father of HTML’, ‘father of the
- 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>…</blocl
quote>
None
Address
<address>…</address> None
Preformatted
<pre>…</pre>
None
Horizontal
Rule
<hr>
Align, size, width
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
<sub>…</sub>
superscript
<sup>…</sup>
<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 /[email protected] / revised
April 96
</ADDRESS>
The result is:
A Beginner's Guide to HTML / NCSA / [email protected] / 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”>
<LI> Chapter 1</LI>
<LI> Chapter 2</LI>
</OL>
<UL type=“desc”>
<LI> Chapter 1</LI>
<LI> Chapter 2</LI>
</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/washingtonunive
rsity/webdesign/syllabus.htm
Concepcion, Khan, Bonto-Kane, Marivic, “Web-based
Information Systems”, UPOU