Web Design & Publishing

• Biblical relationships
• Exo. 20:1-17
• Lk. 4:17
• https://sites.google.com/a/babcock.edu.ng/
• maitanmi-lecture-site/
 Web Design & Publishing
Lesson 2
Introduction
HTML stands for Hyper Text Markup Language,
which is the most widely used language on Web to
develop web pages.
HTML was created by Berners-Lee in late 1991 but
"HTML 2.0" was the first standard of HTML
specification which was published in 1995. HTML
4.01 was a major version of HTML and it was
published in late 1999. Though HTML 4.01 version
is widely used but currently we have HTML-5
version which is an extension to HTML 4.01,
published in 2012.
 Objectives
At the end of this section, you would have learnt the
following:
• What the World Wide Web is, and why it is really
important
• What Web browsers do, and a couple of popular ones
from which to choose
• What a Web server is, and why you need one
• Some information about uniform resource locators (URLs)
• Learn the differences between a Web server, a Web site, a
Web page, and a home page
• Think about the information (content) you want to put on
the Web
• Set the goals for the Web site
• Organize your content into the main topics
• Come up with a general structure for pages and topics
 Prerequisites
• Before proceeding with this course, you should
have a basic working knowledge of Windows or
Linux operating system,
• You must be familiar with any text editor like
notepad, notepad++, or Edit plus etc.
• Also, know how to create directories and files on
your computer.
• Know how to navigate through different
directories and how to type content in a file and
save them on a computer.
• The understanding of images in different formats
like JPEG, PNG format would be an added
advantages.
 Definition of WWW
World Wide Web is a global, interactive, dynamic,
cross-platform, distributed, graphical hypertext
information system that runs over the Internet.
Unless you understand all these words and how they
fit together, this description may not make much
sense.
Further information on Hypertext
•The Web Is a Hypertext Information System. The
idea behind hypertext is that instead of reading text
in a rigid, linear structure (such as a book), you can
skip easily from one point to another.
• Hypertext enables you to read and navigate text
and visual information in a non-linear way, based on
what you want to know next.
 The meaning of graphics
After going through the difficulties of
seeing graphics in the web, the first
graphical Web browser was called
Mosaic. It paved the way for the Web to
display both text and graphics in full
color on the same page. Which includes
the ability to create complex, attractive
pages which looks like those founds in
books, magazines, and newspapers.
 Browser
A browser is used to view and navigate Web pages
and other information on the World Wide Web.
Currently, the most popular browser is Microsoft
Internet Explorer. It’s considered a part of Microsoft
Windows and a version of it is also bundled with Mac
OS.
The meaning of cross-platform
Cross-platform means that you can access Web
information equally well from any computer hardware
running any operating system using any display. More
recently, people began accessing the Internet
through their mobile phones, portable hand-held
PCs, and personal information managers.
 Definitions of web servers, web site and url
A Web server is just a computer that listens to
requests from Web browsers and responds to that
request.
A Web site is a location on the Web that publishes
some kind of information.
The Web is Dynamic If you want a permanent copy
of some information that is stored on the Web. Or
if you want the information to change over time.
Contents on a dynamic server could be changed by
the web administrator at will.
 Characteristics of the web
The web is distributive
A distributive web has its information across
servers globally.
The Web Is Interactive
Interactivity is the capability to “talk back” to
the Web server. More traditional media, such
as television, is not interactive at in the
slightest; all you do is sit and watch as shows
are played at you.
 Characteristics Cont’d
The Web Is Dynamic
• A dynamic web page displays
varieties of information over time.
Mostly such page include the
integration of servers along side the
JavaScript or PhP
 Other Definitions
1. Web site: A collection of one or more Web pages
linked together in a meaningful way that, as a whole,
describes a body of information or creates an overall
effect as shown in Figure 1.1 Each Web site is
stored on a Web server.
2. Web server: A computer on the Internet or an
intranet that delivers Web pages and other files in
response to browser requests.
3.Web page: A single document on a Web site,
usually consisting of an HTML document and any
items that are displayed within that document, such
as inline images.
3. Home page: The entry page for a Web site, which
can link to additional pages on the same Web site or
pages on other sites.
 Home page

Figure 1.1
 Content to display on the web
What you want to put on the Web is what I will refer to
throughout this lecture as your content. Content is a general term
that can refer to text, graphics, media, interactive forms, and so
on. Here are some of the types of content that are popular on the
Web right now:
• Stuff for work
• Personal information
• Hobbies or special interests
• Publications
• Company profiles
• Online documentation
• Shopping catalogs
• Online stores
• Polling and opinion gathering
• Online education
• Anything else that comes to your mind
 Web Site organisation Structures
• Hierarchical structure Figure 1.2
• Linear structure
Figure 1.2
 Linear
A linear structure is illustrated in Figure 1.3,.
Figure 1.3 Linear Organisation
 Linear with alternatives
You can soften the rigidity of a linear
structure by enabling the visitors to deviate
from the main path. You could, for example,
have a linear structure with alternatives that
branch out from a single point Figure 1.4.
Figure 1.4 Linear with alternative
Combination of Linear and Hierarchical
A popular form of document organization
on the Web is a combination of a linear
structure and a hierarchical one, as shown
in Figure 1.5
Figure 1.5 Combination of linear with Hierarchical
 Web

A Web is a set of documents with little or no

actual overall structure; the only thing tying
each page together is a link Figure 1.6 Visitors
drift from document to document, following the
links around.
Figure 1.6 Web
 Quiz
• Question 1. Who runs the Web? Who controls all
these protocols? Who is in charge of all these?
• Question 2. I have heard that the Web changes
so fast and that it is almost impossible to stay
current, is this really true?
• Question 3. What’s a URL?
• Question 4. What’s required to publish
documents on the Web?
• Question 5. What if I don’t like any of the basic
structures discussed today. Can I create my own?
 Test Yourself 1.
1. The “mobile web” complicates our jobs as web designers. List
at least three unknown factors you need to consider when
designing and developing a site.
2. Match the technology or practice on the left with the problem it
best addresses.
1. _______ Progressive enhancement a. Assistive reading and
input devices
2. _______ Server-side detection b. Slow connection speeds
3. _______ Responsive design c. All levels of browser capabilities
4. _______ WAI-ARIA d. Determining which device is being used
5. _______ Site performance optimization e. A variety of screen
sizes
3. Web accessibility strategies take into account four broad
categories of disabilities. Name at least three, and provide a
measure you might take to ensure content is accessible for each.
• 4. When would you use a waterfall chart?
• 5. Responsive web design doesn’t solve
everything. Describe what it is good for and
where it falls short.