Web Development Benedicto B. Balilo Jr.. Web Development This course covers Web site development...
101
Web Development Benedicto B. Balilo Jr.
Web Development Benedicto B. Balilo Jr.. Web Development This course covers Web site development using three methods: hand- coding HTML using a text editor;
Web Development 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. Benedicto B. Balilo Jr.
Slide 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
Slide 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
Slide 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.
Slide 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.
Slide 7
The beginning of information system evolution come along in the
1950s which is the change of manual to a computer system come
technical. The 1970s was characterized as the Era of Effectiveness.
Organizations aimed for improved managerial and organizational
effectiveness. In the 1980s, the Era of Competitiveness began. IS
were used as a tool for competitive advantage.
Slide 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 (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.
Slide 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.
Slide 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
Slide 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
Internet Business Models CategoryDesciptionExamples Virtual
StoreSells 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 AcademicProvides
information on particular academic org. www.bicol-u.edu
www.upou.org GovernmentGovernment agency.gov.ph
Slide 14
CategoryDescriptionExamples Marketplace concentrator
Concentrates information about products and services from multiple
providers at one central point InternetMail DealerNet InsureMarket
Information BrokersProvide 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
ProviderCreaes 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
Slide 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.
Slide 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
Slide 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
Slide 18
The Internet Is the worlds 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 ISPs.
These ISPs then distribute these addresses to computers in their
network.
Slide 19
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.
Slide 20
Static vs Dynamic Static content doesnt change until the author
updates it no interaction with visitors Dynamic content changes
depending on the data supplied (customizable actions) there is user
interaction
Slide 21
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
Slide 22
Client/Server Architecture 2-tier Architecture 3-tier
Architecture Business Logic Tier Data Tier Client/Presentation Tier
processing is done entirely by the client -> ex. HTML volume of
processing is in the server or in the middle tier
Slide 23
Client-side Server-side
Slide 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.
Slide 25 Internet Explorer is unable to display this page when
you are not connect"> Internet Explorer is unable to display
this page when you are not connected to the Internet. Make
available offline check box. On the Tools menu, click Synchronize.
Internet Explorer Sample HTML code"> Internet Explorer is unable
to display this page when you are not connect" title="Sample HTML
Tag Internet Explorer is unable to display this page when you are
not connect">
Sample HTML Tag Internet Explorer is unable to display this
page when you are not connected to the Internet. Make available
offline check box. On the Tools menu, click Synchronize. Internet
Explorer Sample HTML code
Slide 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 users 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.
Slide 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
Slide 28
HTML Skeleton Pages Title contents here
Slide 29
Basic elements of the Web HTML the coding language of the www
that informs browsers how to display a documents 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.
Slide 30
Home page the cover of a particular web site. The home page is
the main, or first page of an organizations or persons 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.
Slide 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: [email protected] Different
headers concerning sending an email - To: - From: - Subject: - CC:
- BCC - Attachments:
Slide 32
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.
Slide 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.
Slide 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
http://microsoft.com/windows/default.php
Slide 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
Slide 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 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
Slide 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.
Slide 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.
Slide 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
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=*****
Slide 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.
http://www.quality-web-programming.com/blog/stages-of-website-development/
Slide 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
clients turn to check the site. Following a customers 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.
http://www.quality-web-programming.com/blog/stages-of-website-development/
Slide 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.
Slide 43
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.
Slide 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.
Slide 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.
Slide 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.
Slide 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.
Slide 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.
Slide 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.
Slide 50
Keynotes of Web Design Elements Simplicity of Design The
simplicity of web application functionality is both mirrored in the
design and style of todays 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.
Slide 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 AppCheckout 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.
Slide 52
Choice Of Colours Todays 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.Web 2.0 colour
tools
Slide 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 websites main
objective or mission.
Slide 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.
Slide 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.
Slide 56
Slide 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.
Slide 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.
Slide 59
Slide 60
Slide 61
Slide 62
Slide 63
Slide 64
Slide 65
Slide 66
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 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
Slide 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).
Slide 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.
Slide 75
Basic Elements of HTML - document type declaration - function
is to give information on the name and version of the mark-up
language being used in the document. - Is the single most important
tag to remember when building a web page. - contains descriptive
information about the document like script code, references to
supplementary files. This section includes,,,, etc.
Slide 76
- 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 consist of a
left angle bracket ( ) it is usually paired to start and end
instruction ex: it has attributes ex: HTML Tags
Slide 77
Core HTML elements Headings Align=left,center,right Paragraph
Align=left,center,right Break None Center None Division
Align=left,center,right Blockquote None Address None Preformatted
None Horizontal Rule Align, size, width
Slide 78
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.
Slide 79
Physical formatting elements Bold Italics Strikeout Monospaced
Underline Big Subscript superscript bold text italic text
typewriter text, e.g. fixed-width font.
Logical Styles for a word being defined. Typically displayed in
italics. (NCSA Mosaic is a World Wide Web browser.) for emphasis.
Typically displayed in italics. (Consultants cannot reset your
password unless you call the help line.) for titles of books,
films, etc. Typically displayed in italics. (A Beginner's Guide to
HTML) for computer code. Displayed in a fixed-width font. (The
header file)
Slide 82
for user keyboard entry. Typically displayed in plain
fixed-width font. (Enter passwd to change your password.) for a
sequence of literal characters. Displayed in a fixed-width font.
(Segmentation fault: Core dumped.) for strong emphasis. Typically
displayed in bold. (NOTE: Always check your links.) for a variable,
where you will replace the variable with specific information.
Typically displayed in italics. (rm filename deletes the
file.)
Slide 83
Other HTML tags
Slide 84
Preformatted Text Use the 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:
#!/bin/csh rm * display as: #!/bin/csh rm *
Slide 85
Extended Quotation Use the tag to include lengthy quotations in
a separate block on the screen. In the example: Business newsline
Manufacturing growth slowed down in May. --William Strunk, Jr.,
1918 the result is: Business newsline Manufacturing growth slowed
down in May. --William Strunk, Jr., 1918
Slide 86
Addresses The 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: A
Beginner's Guide to HTML / NCSA /[email protected] / revised April
96 The result is: A Beginner's Guide to HTML / NCSA /
[email protected] / revised April 96 NOTE: is not used for postal
addresses.
Slide 87
Definition Lists A definition list (coded as ) usually consists
of alternating a definition term (coded as ) and a definition
definition (coded as ). The following is an example of a definition
list: BU Bicol University UP University of the Philippines The and
entries can contain multiple paragraphs (indicated by paragraph
tags), lists, or other definition information.
Slide 88
Forced Line Breaks The tag forces a line break with no extra
(white) space between lines. Using elements for short lines of text
such as postal addresses results in unwanted additional white
space. For example, with : National Center for Supercomputing
Applications 605 East Springfield Avenue Champaign, Illinois
61820-5518 The output is: National Center for Supercomputing
Applications 605 East Springfield Avenue Champaign, Illinois
61820-5518
Slide 89
Character Entities
Slide 90 & the escape sequence for &">
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 &
Slide 91
To make an unnumbered, bulleted list, 1. start with an opening
list (for unnumbered list) tag 2. enter the (list item) tag
followed by the individual item; no closing tag is needed 3. end
the entire list with a closing list tag Below is a sample
three-item list: Chapter 1 Chapter 1 Chapter 2 Chapter 2
Slide 92
Presentation and Layout All HTML elements that contain
attributes bgcolor or background can accept color.
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: New York 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.
Slide 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. NCSA's Beginner's Guide to HTML
http://www.ncsa.uiuc.edu/General/WWW/HTMLPrimer.html
Slide 97
Links and Addressing Anchor element implements HTMLs
hyperlinking capabilities. linkable content
Slide 98
Layout with Tables The element allows you to present text,
images and other information objects in table form.
Slide 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
2. animated pictures
Slide 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
Slide 101
Reference Reference:
http://www.granneman.com/teaching/washingtonunive
rsity/webdesign/syllabus.htm Concepcion, Khan, Bonto-Kane, Marivic,
Web-based Information Systems, UPOU