Internet tech & web prog. p1,2,3-ver1

Course Title :
Internet Techniques & Web programming
Course Code: CSC 357
PART : 1
Prof. Taymoor Mohamed Nazmy
Dept. of computer science, faculty of computer science, Ain Shams uni.
Ex-vice dean of post graduate studies and research Cairo, Egypt

Course Description
• An overview of connecting to and navigating
within the internet system and the World Wide
Web: Navigation , search engines, advanced
search techniques, design of web pages using
HTML, XML and Java, TCP/IP, Client /Server
architectures, mastering connectivity and security.
• Text Book:
• Gray P.schneider and Jessica Evans The Internet,
3 rd edition, course Technology, 2002.

About the lecturer
- Prof. of computer science since 2006,
- Director of Ain Shams information network,
- Vice dean of post graduate studies and research,
- Vice dean of environmental and social affairs,
- Member in editorial board of many Int. journals,
- Member in Scientific committee of many int. conferences
- Executive chair of int. conf. on information and intelligent systems,
- Published more than 60 scientific papers in int. journals and
conference,
Supervised more than 20 master and Ph. D thesis.

About the course
• The materials of this course were collected from many resources, include the reference
book, other books, online courses, presentations, and web sites.
• There are many details will be given to simplify topics in this course, however at the end of
the course the most important topics will be highlighted.
• The delivered materials through this presentation is your main resource,
• This presentation will be delivered to you, through one ways, such as drop box, the course
consist of 5 parts, we will starts with Part 1,2,3, then continue with Part 4,5.
• There will be term exams 30%
• Lab 30%
• The final exam 40%
• The exam will include subjective and objective questions,
• Through this course try to extends your knowledge by improving your self learning
capabilities.

5
Learning outcomes
Demonstrate an understanding of the concepts, terms,
and technology behind the World Wide Web
Describe how the World Wide Web works
Identify how web browsers work
Define what is a web page
Identify the first steps in web page design
Recognize the elements of a web page
Realize the do’s and don’t’s in web page design
Recognize different web programming languages
Identify different issues of internet security.

Navigation , search engines,
advanced search techniques

Internet history
• 1969*- ARPANET is formed
• 1969 - Number of hosts: 4
• 1971*- Ray Tomlinson invents an email program
• 1986 - NSFNET (high-speed backbone) is created

14
The Internet
• Internet (the international network) is a global
WAN that connects approximately 1 million internal
organizational computer networks in more that 200
countries on all continents.
• ARPANET
– An experimental project started by the U.S.
Department of Defense (DoD) in 1969
– To share data, exchange messages, transfer files.

Copyright 2007 John Wiley &
Sons, Inc.
Chapter 5 15
The Future of the Internet
• Internet2 develops and deploys advanced network
applications such as remote medical diagnosis, digital
libraries, distance education, online simulation and
virtual libraries.
• Next Generation Internet (NGI) government
sponsored initiative aimed at creating an Internet that
is fast, always on, everywhere, natural, intelligent,
easy and trusted.
• vBNS is a high-speed network designed to support
the academic Internet2 and the NGI initiatives.

16
Internet Owners
• Internet made up of thousands of networks
worldwide
• No one in charge of Internet - No governing
body
• Internet backbone owned by private
companies

17
Internet Providers:
• Research and Educational Institutions
• Government and Military Entities
• Businesses
• Private Organizations
• Commercial Providers

Web or Internet?
 They are not the same things.
 The Internet is a collection of computers or
networking devices connected together.
– They have communication between each other.
– Decentralized design that there is no centralized body
controls how the Internet functions.
 The Web is a collection of documents that are
interconnected by hyper-links.
– These documents are accessed by web browsers and
provided by web servers.

19
Web terminologies
The Web relies on these mechanisms:
• Hypertext - provides easy navigation among documents and resources
• Protocols - set of standards used to access resources via the Web
• Universal Resource Locator (URL) - uniform naming scheme for Internet
resources
• Client and server computers - Web access is based on client/server technology
• Internet host the term "host" means any computer that has full two-way access to
other computers on the Internet. A host has a specific "local or host number" that,
together with the network number, forms its unique IP address.

20
Portals
• Portal is a Web-based, personalized gateway
to information and knowledge that provides
relevant information from different IT systems
and the Internet using advanced search and
indexing techniques.
• Commercial (public) portals offer content for
diverse communities and are most popular
portals on the Internet

21
Communication based web
• Internet telephony (VoIP) voice-over IP digitizes
your analog voice signals, sections them into packets,
and sends them over the Internet.
• Weblog is a personal Web site, open to the public,
where the creator expresses feelings or opinions.
• Wiki is a Web site on which anyone can post material
and make changes quickly, without using difficult
commands.

22
Groupware
• Groupware refers to software products that
support groups of people who share a common
task or goal and who collaborate to accomplish
it.
• Teleconferencing is the use of electronic
communication that allows two or more people
at different locations to hold a simultaneous
conference.

23
Web Services
• Web services are applications, delivered over the
Internet, that users can select and combine through
almost any device (from personal computer to mobile
phones).
– It is able to expose and describe itself to other applications,
tell what services it does.
– It can be located by other applications.
– It can be invoked by the originating application by using
standard protocols.

24
What makes the Web work?
HyperText Markup Language (HTML)
• the publishing language of the World Wide Web; the
standard used to create web pages.
• markup language that defines the structure of
information by using a variety of tags and attributes,
which is designed to display text and other information
on a screen and provide hyperlinks to other Web
documents.

25
Protocols
• standard set of rules that governs how computers
communicate with each other, i.e. SMTP, FTP, HTTP is
the underlying protocol used to transmit information over
the Web
• the Web supports several Internet protocols aside from
HTTP such as SMTP, FTP, allowing access to huge
collection of information and services

26
Uniform Resource Locator (URL)
• uniform naming scheme that specifies unique
addresses for web servers, documents, and other
resources, no matter what its access protocol
• the URL points to where the data or service is located
(the host computer and the directory in which it
resides) on the Internet
• web documents and resources are located and linked
through their URL’s

27
Anatomy of a URL
protocol host computer directory path file name
Note: Not all URLs will have the directory and
filename, the directory or file path may have more
than one part, also by deleting part of the URL name,
you may access the previous part.

28
Client and server computers
• computers on the Internet communicate and
share resources are computers that host web
documents and provide information through a
web server program t computers access web
documents using an application program called
web browsers

29
Web browser
• application software that is used to locate and issue a
request for the page on the web server that hosts the
document
• It also interpret the page sent back by the web server
and display it on the monitor of the client computer
• computer program that lets you view and explore
information on the World Wide Web
What is a web browser?

30
Web browsers
• Microsoft Internet Explorer – browser integrated with the
Windows operating system. Mac versions are available.
• Opera – one of the alternatives to the two most popular browser
• Mozilla – open source web browser software
• Lynx - popular Unix text-based browser

31
What is a Web page?
Web page
• electronic document that typically contains several
types of information accessible via the World Wide Web
•
• set of information created, and organized, using HTML
and/or other web page authoring and development tools
•
• Interpreted and displayed on the screen according to the
instructions of the web page authoring tool

32
What is a web site?
Web site
• a collection of related web pages of a certain individual,
group, or organization, connected through a system of
hyperlinks, hosted in a particular domain
• can be a single web page that contains links to related
information located on several web sites

33
What is a home page?
Home page
• the main page of a web site that typically
serves as an index or table of contents to other
web pages
• usually the first web page or the welcome
page the users see when they visit a web site

Web server
• Web server is a computer where the web content is stored. Basically web
server is used to host the web sites but there exists other web servers also
such as gaming, storage, FTP, email etc.
• Web server respond to the client request in either of the following two
ways:
• Sending the file to the client associated with the requested URL.
• Generating response by invoking a script and communicating with
database.
• When client sends request for a web page, the web server search for the
requested page if requested page is found then it will send it to client with
an HTTP response.
• If the requested web page is not found, web server will the send an HTTP
response: Error 404 Not found.

The most leading web servers
available today
• Apache HTTP Server
•
This is the most popular web server in the world developed
by the Apache Software Foundation. Apache web server is
an open source software and can be installed on almost all
operating systems including Linux, UNIX, Windows,
FreeBSD, Mac OS X and more. About 60% of the web
server machines run the Apache Web Server.
• Internet Information Services (IIS)
•
The Internet Information Server (IIS) is a high performance
Web Server from Microsoft, there are many versions that
run IIS on its operating system, specially Window NT/2000.

Proxy server
• Proxy server is an intermediary server between client and the
internet. Proxy servers offers the following basic functionalities:
• Firewall and network data filtering.
• Network connection sharing
• Data caching
• Proxy servers allow to hide, conceal and make your network id
anonymous by hiding your IP address.
• Following are the reasons to use proxy servers:
• Monitoring and Filtering
• Improving performance
• Accessing services anonymously
• Security

37
Cookies
• Cookies store information on the client by the server
• Application programmers can store information and
retrieve it if needed
• Clients can disable use of cookies
• Mostly insecure, and should be used with care

38
How web page works
Sample web page and its source.
• The source contains the instructions
that define the contents, layout, and
structure of a web page.
• The instructions are written in HTML
or another web authoring tool used in
creating the page.
• The browser uses these instructions to
interpret and display the web page on
the screen.

Internet Technologies
WWW Architecture
Web Server
Client
Server
Request:
http://www.msn.com/default.html
Response:
<html>…</html>
Network
HTTP
TCP/IP
PC/Mac/Unix
+ Browser (IE, FireFox)

The user clicks on a link to indicate which document is
to be retrieved, or write URL address of a web site.
The browser must determine the address that
contains the document. It does this by sending a
query to its local name server.
Once the address is known the browser establishes a
connection to the specified machine, usually a TCP
connection.
The browser runs a client version of HTTP, which issues
a request specifying both the name of the document and
the possible document formats it can handle.
The machine that contains the requested document
runs a server version of HTTP. It reacts to the HTTP
request by sending an HTTP response which contains
the desired document in the appropriate format.
The TCP connection is then closed and the
user may view the document.
1.
2.
3.
4.
5.
6.
Retrieving a Web Page

Web browser architecture
• There are a lot of web browser available in the market.
All of them interpret and display information on the
screen however their capabilities and structure varies
depending upon implementation.
• But the most basic component that all web browser
must exhibit are listed below:
• Controller/Dispatcher
• Interpreter
• Client Programs

• Controller works as a control unit in CPU. It takes input from the
keyboard or mouse, interpret it and make other services to work on the
basis of input it receives.
• Interpreter receives the information from the controller and execute
the instruction line by line. Some interpreter are mandatory while some
are optional For example, HTML interpreter program is mandatory and
java interpreter is optional.
• Client Program describes the specific protocol that will be used to
access a particular service. Following are the client programs that are
commonly used:
• HTTP: Hyper Text Transfer Protocol
• SMTP: Simple Mail Transfer Protocol
• FTP: File Transfer Protocol
• NNTP: Network News Transfer Protocol
• POP: Post Office Protocol

Internet Infrastructure
• The Internet backbone is made up of many large networks which
interconnect with each other.
• These large networks are known as Network Service
Providers or NSPs. Some of the large NSPs are UUNet, CerfNet,
IBM, BBN Planet, SprintNet, PSINet, as well as others.
• These networks peer with each other to exchange packet traffic.
Each NSP is required to connect Network Access
Points or NAPs.
• At the NAPs, packet traffic may jump from one NSP's backbone
to another NSP's backbone. NSPs also interconnect
at Metropolitan Area Exchanges or MAEs.

• NAPs were the original Internet interconnect
points. Both NAPs and MAEs are referred to
as Internet Exchange Points or IXs.
• NSPs also sell bandwidth to smaller networks,
such as ISPs and smaller bandwidth providers.
Below is a picture showing this hierarchical
infrastructure.

A simple diagram for the internet infrastructure

The Internet Routing Hierarchy
• No computer knows where any of the other
computers are.
• The information used to get packets to their
destinations are contained in routing tables
kept by each router connected to the Internet.
• A router is usually connected between networks to
route packets between them.

• Each router knows about it's sub-networks and which IP
addresses they use. The router usually doesn't know what IP
addresses are 'above' it.
• The black boxes connecting the backbones are routers. The
larger NSP backbones at the top are connected at a NAP.
• Under them are several sub-networks, and under them, more
sub-networks. At the bottom are two local area networks with
computers attached.

• When a packet arrives at a router, the router
examines the IP address and checks it's routing
table.
• If the network containing the IP address is found,
the packet is sent to that network.
• If the network containing the IP address is not
found, then the router sends the packet on a
default route, usually up the backbone hierarchy
to the next router.

Domain Names and Address Resolution
• What if the you need to access a web server
referred to as www.anothercomputer.com? How
does your web browser know where on the
Internet this computer lives?
• The answer to all these questions is the Domain
Name Service or DNS. The DNS is a distributed
database which keeps track of computer's names
and their corresponding IP addresses on the
Internet.

• Many computers connected to the Internet host part of
the DNS database and the software that allows others to
access it.
• These computers are known as DNS servers. No DNS
server contains the entire database; they only contain a
subset of it.
• If a DNS server does not contain the domain name
requested by another computer, the DNS server re-
directs the requesting computer to another DNS server.

Domain Name Service hierarchy
• The Domain Name Service is structured as a
hierarchy similar to the IP routing hierarchy.
• The computer requesting a name resolution
will be re-directed 'up' the hierarchy until a
DNS server is found that can resolve the
domain name in the request.

• This way, any Internet applications that need
domain name resolution will be able to function
correctly.
• For example, when you enter a web address into
your web browser, the browser first connects to
your primary DNS server.
• After obtaining the IP address for the domain
name you entered, the browser then connects to the
target computer and requests the web page you
wanted.

Common Codes in Domain Names
edu - higher
education
com - commercial
firms (+22 million)
gov - government
agencies
mil - military (US)
org - general
noncommercial
organizations
net - computer
networks
int - international
organizations
State or Country of
origin:
– uk (United
Kingdom)
– ca (Canada)
– ca.us (California.
United States)

Web search engine
• Is a software system that is designed to search for
information on the World Wide Web.
• The search results are generally presented in a
line of results often referred to as search engine
results pages (SERPs).
• The information may be a mix of web pages,
images, and other types of files. Some search
engines also mine data available
in databases or open directories.

Search Engine Working
• Search Engine Working
• Web crawler, database and the search interface are the
major component of a search engine that actually makes
search engine to work.
• Search engines make use of Boolean expression AND,
OR, NOT to restrict and widen the results of a search.
• Following are the steps that are performed by the
search engine:
• The search engine looks for the keyword in the index
for predefined database instead of going directly to the
web to search for the keyword.

• It then uses software to search for the information in the database.
This software component is known as web crawler.
• Once web crawler finds the pages, the search engine then shows
the relevant web pages as a result. These retrieved web pages
generally include title of page, size of text portion, first several
sentences etc.
• These search criteria may vary from one search engine to the
other.
• The retrieved information is ranked according to various factors
such as frequency of keywords, relevancy of information, links
etc.
• User can click on any of the search results to open it.

Page Rank
1. A page is important when it is referred to a
lot, or referred to from an important page
2. PR is used to prioritize; works well even
with search is just on page titles

62
TF-IDF Ranking Algorithm
Term frequency in the item
Inverse document frequency of term
• Rare words are likely to be more important
wij = weight of Term Tj in Document Di
tfij = frequency of Term Tj in Document Dj
N = number of Documents in collection
n = number of Documents where term Tj
occurs at least once

Key terms related to search engine working
A search engine operates, in the following order
Crawling (spider/robot)
Follow links to find information
Indexing
Record what words appear where
Ranking
What information is a good match to a user
query? What information is inherently good?

A Web crawler
• A Web crawler, sometimes called a spider, is an Internet
bot which systematically browses the World Wide Web,
typically for the purpose of Web indexing (web spidering).
• Web search engines and some other sites use Web crawling
or spidering software to update their web content or indices
of others sites' web content.
• Web crawlers can copy all the pages they visit for later
processing by a search engine which indexes the
downloaded pages so the users can search much more
efficiently.

65
Also about, Crawler
• crawlers, spiders: go out to find content
in various ways go through the web looking for new &
changed sites
periodic, not for each query
 no search engine works in real time
some search engines do it for themselves, others not
 buy content from companies such as Inktomi
for a number of reasons crawlers do not cover all of the web –
just a fraction
All the history of web sites are stored in internet archive site.

66
Your
Browser
How Search Engines Work
The Web
URL1 URL2
URL3 URL4
Crawler
Indexer
Search
Engine
Database Eggs?
Eggs.
Eggs - 90%
Eggo - 81%
Ego- 40%
Huh? - 10%
All About
Eggs
by
S. I. Am

Internet archive
Internet archive can display all the history of the web sites, based on the databases of crawled
sites, by just typing the site URL, and specify what time you want to see this site, Also, it
provides free public access to collections of digitized materials, including, software
applications/games, music, movies/videos, moving images, and nearly three million public-
domain books
www.archive-it.org

68
Search and Retrieval
Retrieval: find files with query terms
Not the same as relevance ranking
Recall: find all relevant
items.
Precision: find only
relevant items
Increasing one
decreases the other

Search Engine Optimization
(SEO) is designing, writing, and HTML-coding a
Web site to maximize the chance its pages will
appear at the top of spider-based search engine
results for selected keywords and phrases.
If your page is not optimized it will not get a high
ranking and you will not get results, no matter
how many search engines the site has been
submitted to.

Facts
1. Most search engines have vanished.
2. Every search engine has limitation as to
coverage
3. Google is a big player.
4. Approximately 94 million adults use the
internet on an average day.
5. This means approximately 59.22 MILLION
people use search engines in an average day.

What Search Engines Don’t Search
‘Bots only crawl the visible web which is only
about 20% of everything that is on the Internet.
They don’t look at the “Deep Web”, or “The
Invisible Web.”

73
Meta search engines
• meta engines search multiple engines
– getting combined results from a variety of
engines
• do not have their own databases
– but have their own business models affecting
results
• a number of techniques used
– interesting ones: clustering, statistical analyses

74
Boolean Logic
• Combines search terms in many databases
• AND, OR, and NOT or (+) and (-)
• Must check to see if search engines use
Boolean logic

Basic Boolean
Search Operators - AND
• Using AND narrows a search by combining
terms; it will retrieve documents that use both
the search terms you specify.
• Example: Portland AND Oregon

76
Boolean Logic : AND
Limits your search
“Oral History” & Women
Only returns pages with both of these terms
on them

Basic Boolean
Search Operators - OR
• Using OR broadens a search to include results
that contain either of the words you type in.
OR is a good tool to use when there are several
common spellings or synonyms of a word.
• Example: liberal OR democrat

78
Boolean Logic : OR
Broadens your search
Returns every page with either of these
terms on them
“Oral
History”
OR Women

Basic Boolean
Search Operators - NOT
• Using NOT will narrow a search by excluding
certain search terms. NOT retrieves documents
that contain one, but not the other, of the
search terms you enter.
• Example: Oregon NOT travel

80
Boolean Logic : NOT
Limits your search
Only returns pages that contain one but not
the other term on them
“Oral
History” NOT Women

Google Advanced Search
• Phrase search ("")
• By putting double quotes around a set of words, you are
telling Google to consider the exact words in that exact
order without any change.
• By insisting on phrase search you might be missing good
results accidentally. For example, a search for
• [ "Alexander Bell" ] (with quotes) will miss the pages
that refer to Alexander G. Bell.

• Search within a specific website (site:)
• Google allows you to specify that your search results
must come from a given website. For example, the
query [ iraq site:nytimes.com ] will return pages
about Iraq but only from nytimes.com.
•
• You can also specify a whole class of sites, for
example [ iraq site:.gov ] will return results only from
a .gov domain and [ iraq site:.iq ] will return results
only from Iraqi sites.

• Terms you want to exclude (-)
• Attaching a minus sign immediately before a word
indicates that you do not want pages that contain this
word to appear in your results. The minus sign should
appear immediately before the word and should be
preceded with a space.
• You can exclude as many words as you want by using
the - sign in front of all of them, for example [ jaguar
-cars -football -os ].

• Fill in the blanks (*)
• The *, or wildcard, is a little-known feature that can
be very powerful. If you include * within a query, it
tells Google to try to treat the star as a placeholder for
any unknown term(s) and then find the best matches.
• For example, the search [ Google * ] will give you
results about many of Google's products (go to next
page and next page -- we have many products).

• Search exactly as is (+)
• Google employs synonyms automatically, so that it
finds pages that mention, for example, childcare for
the query [ child care ] (with a space), or California
history for the query [ ca history ].
• By attaching a + immediately before a word
(remember, don't add a space after the +), you are
telling Google to match that word precisely as you
typed it. Putting double quotes around a single word
will do the same thing.

Question
• A piece of icon or image on a web page associated with
another webpage is called
a) url
b) hyperlink
c) plugin
d) none of the mentioned.
• What is a web browser?
a) a program that can display a web page
b) a program used to view html documents
c) it enables user to access the resources of internet
d) all of the mentioned

• URL stands for
a) unique reference label
b) uniform reference label
c) uniform resource locator
d) unique resource locator.
• A web cookie is a small piece of data
a) sent from a website and stored in user’s web browser
while a user is browsing a website
b) sent from user and stored in the server while a user is
browsing a website
c) sent from root server to all servers
d) none of the mentioned.

Course Title :
PART : 2

Design of web pages & web
programming

Creating a web site
• Creating a web site is a multi-task that involves:
• Writing, authoring, page organization ,graphical
design, logical thinking, programing, and
administration, Comparing, testing, updating.

The Basics of Web Design
• Principles of graphic design for the web
• Navigation concepts for the web
• Organization of text on the web
• Links from one page to another
• Content and information
• Editing and maintaining
• Site design plans (graphical presentation)

92
Define the content
• What kind of information will be provided on your
website?
• Is it educational information or entertainment?
• Does the content meet the information needs of your
audience?
• Is it relevant ? interesting?
• Is it current and accurate?
• Will web pages be effective in conveying and
distributing the information?
What are the first steps
in web page design?

93
in web page design?
• State your purpose/objective – why build a website for
your library?
• Determine your audience – who are your target
audience?
• Define the content – what kind of information will be
provided on your site?
• Identify the essential resources – do you have the
budget, personnel, materials, time and other resources?

94
in web page design?
State your purpose
• To publish online information about the library -
collections, services
• To provide extension services – user education, reference
services, tutorials
• To act as a gateway to local and external information
resources on the Web – library catalog, online databases,
e-journals
• To serve as a communication tool - through e-mail,
instant messaging, and other similar software

95
Determine your audience
• Who is your target audience? Students? Faculty? Or
staff?
• What are their interests and needs?
• What kind of information will be provided on your
website?
• Do you have the management’s support?
• Is the allocated budget enough for the creation and
publishing of the web site?
in web page design?

96
What are the elements of a web page?
• Title – title and the icon of the web page
• Web address – URL of the page shown at the browsers address box
• Content – information on the page - text, graphics and other media
types
• Design – style of the page, font, color, background, visual elements
• Structure – layout of the page, title, headings, tables, frames,
navigational tools, footers
• Hyperlinks – links to related resources

97
Table /
Navigational tools
Elements of a web page
Document title
Address (URL)
Banner
Web page title
Footer /
Copyright
Graphic elements
Hyperlinks
Content
Search tool
Navigational
tools
Frames
Hyperlinks

98
What are the design elements of a web page?
• Overall look of the web page – the general look or feel of the page .
• Content – all the information contained within the page i.e. text and
other media types embedded in the page
• Navigational tools – the text links, icons, buttons, bars and other
objects use for exploring the page and any linked pages
• Graphics – the images other graphical elements in the page
• Page layout and structure – organization of the elements in the page

99
Overall look
• Maintain consistency, clarity and simplicity – uniform
color scheme
• Use of colors, images, hyperlinks and web
technology effectively
• Organize the design elements logically and
predictably

Sample of bad design of web page

104
Content
• Match the purpose of the web site and its appropriate
information to the target audience
• Information organized logically and predictably (text and
other media types)
• Ensure information is accurate, current, relevant , useful
complete, interesting, unique
• Employ a concise, easy to read writing style

Text Organization Principles
• Use tables (with border=0) to space the information on the
page.
• Use horizontal lines to separate content, not for visual
organization.
• Use headings (H1 through H6) rather than fonts and font sizes
to organize information.
• .

Editing and Maintaining
• By all means, spell check!
• Frequently check active vs. dead links.
• Show, on the page, the date of the last modifications to the site/page.
• If you have to “take the site down” temporarily, provide an “under
construction page” for the user with an estimated date of return.

107
Navigational tools
• Can be selected from text links, icons, buttons, bars and other
graphical elements
• Organized them logically and predictably
• Provide clear, quick and consistent method to move within the
site
• Provide easy to use and find links
• Help create the web site’s identity

108
Graphics
• Appropriate, essential, and relevant to the content of the
page
• Functional - serve a purpose and/or provide information
•
• Of size, quality and file format appropriate for the page
content
• Used to add value to the overall design

Principles of Graphical Design
• Keep the file size for the graphics small on the main page (use
thumbnails with links to larger pictures, include file size
information with link.)
• Use colors from the “standard color palette” to reduce file
sizes and increase flexibility.
• Keep backgrounds simple and not “busy”.
• Keep the viewable size of the page in mind so you can avoid
scrolling as much as possible.

110
Page layout and structure
• Follow the overall look guidelines
• Take the technical elements into consideration
– descriptive file name
– descriptive document title
– complete contact information
– effective use of tables and frames
– browser compatibility

Tables, tables, tables!
• Use tables to lay out your pages!
• Make the table borders invisible
• A 2x2 table works well

Areas of a Web Page
Menu
Header
Content
Logo

File Types on the Web
• IMAGES
• MOVIES
• SOUND
• FLASH MOVIE
• STYLE SHEETS
• DATA
• TEXT DOCUMENTS
• Other files
• .gif, .jpg
others exist, but are not
supported*
• .rm, .avi, .mpeg, .mov
• .wav, .mp3
• .fla  .swf
• .css
• .xml
• .doc, .pdf
• .xls, .ppt, etc.

117
Some tips in web page design
Don’t’s in web page design
• Don’t crowd your pages – balance text, graphics and space
• Don’t overuse graphics, animations and other bleeding edge
technology – use them to support and enhance but not to
overpower your work
•
• Don’t use background that distracts the user or makes text
unreadable

118
Some tips in web page design
Don’t’s in web page design
• Don’t use blinking or glowing text for emphasis
•
• Don’t use long paragraphs of text – divide them into
readable chunks
• Don’t create dead end pages, which have no links to
any other local page in the site
• Don’t design for a specific browser

119
How to evaluate web sites?
• Accuracy – free from error and alteration
• Authority – credibility of author / publishing body
• Objectivity – creator’s point of view / bias
• Currency – timeliness of information
• Content – scope and depth of material
• Design – style, structure, and functionality
• Accessibility – availability of the resources

120
Currency
• Is the information dated?
• Is it timely?
•
• Is it up-to-date?
• Are the links current and still available?

121
Design
• Does it follow the design principles?
• Is the site easy to read and navigate?
• Is there a balance between style and
functionality?

122
Accessibility
• Can it be viewed using different browsers?
• Does it require a special program to read the
content?
• Is the information readily available on the web
site?

Web Page Optimization
 Image optimization
 Crop to the smallest area possible that still conveys your visual message
 Choose and apply the image size (in pixels) that you will need for your
final Web page
 Reduce the resolution of the image to no more than 72 ppi (pixels per
inch)
 Reduce the number of colors to the minimum necessary for the particular
image
 GIF or PNG format for graphics JPG for photos.
 Limit the number of multimedia applications
 Javascript, java applets, flash, shockwave
 Use consistent images and style sheets
 Use consistent navigation (text readers)

Site Map
• A site map is designed to show the connections
between pages
• A graphical site map uses lines to connect
linked pages

Site Map
Interior or
Internal
Pages
Splash Page
index.html
Pictures Gallery
gallery.html
Name Page
name.html
Progress Page
progress.html
Canada Trip
canada.html
Christmas Tree
tree.html

126
What are the steps in publishing
a web site
• Secure a domain name
• Acquire web hosting services
• Test the website
• Upload the web pages
• Update the information
• Validate the links
• Promote the site
• Address issues and concerns in web publishing

127
How to get your own domain
• Think of a short name that would best describe your
institution. It can be an acronym or a “nickname” with
the appropriate top level domain (TLD) like:
mylibrary.edu or mylibrary.com or mylibrary.org or
mylibrary.net
• Search on one of the domain registrars to find out if the
name you have chosen is still available

128
• Try it on Network Solutions at
http://www.networksolutions.com for .com, .org, and
.net TLD
• You can also search at InterNIC who is search
http://www.internic.net/whois.html
• You can also search for other domain registrars at the
InterNIC site

129
• Look for accredited registrars in your country if
you want to use your country code TLD
• Find out if the domain you want with your country
code TLD is available by searching at
http://www.uwhois.com
• Register your domain name in any of the domain
registrars by providing the needed information and
pay the necessary fees

130
• If you are part of an organization like a university,
check with your IT department. It is possible that
your organization already have a domain name.
• The person or group responsible can give you a
subdomain name like mylibrary.univ.edu or
mylibrary.digital.com

131
Where to host your web site?
• There are two ways to host your web site:
– Have your own web server
– Host it on commercial web hosting sites for free or
with fees.
• Each option has its advantages and
disadvantages

132
• Having your own web server gives you greater control
over the application programs running on your server
and access to your web site, updating, troubleshooting
and maintenance
• Must meet the hardware and software requirements with
adequate bandwidth Internet connection
• Personnel must have expertise in setting up, updating,
managing and maintaining servers

133
• Free web hosting sites mean that you need not incur the
cost of buying the necessary hardware and software, pay
for Internet connection bandwidth, or hire personnel
• Downside: loaded with advertisements, limited file
storage size, and will be restricted to certain applications
that will run on your web site
• Typically have a slow download capability and weak file
security

134
• Commercial web hosting companies usually offer two
options:
• file storage space for hosting your web site with
support for some application tools like flash or cgi-bin
•
• or all these features plus services such as the
development and design of your web site

135
• High cost relative to the amount of services being
provided
• Weak file security and confidentiality; you must trust an
outside organization with full access to your web site, and
this can be risky even with a non-disclosure agreement
• The risk of becoming overly dependent to the company
providing services and its stability and capability to
continue doing business

136
• Your choice should be based on the purpose of
the web site, the target audience, the
information and services to be provided, and
your organizations human, material and
financial resources
• Provisions should be allotted for the
continuous growth of your institution’s web
site

137
How to upload your web site
• Your web site must be uploaded to a web server
connected to the Internet in order to be accessed
on the Web, the host for your web site
• Use a FTP client program to connect to your host
in order to upload (transfer) your web site (files
and other documents) to the server

138
• One of the most popular FTP program for PC is
WS_FTP LE downloadable at FTPplanet.com
and it is free for personal and educational use
• Test you web site before uploading to the
server, then test it again once it has been
uploaded
How to upload your web site

139
How to manage your web site
• The information in your web site should be updated for
timeliness and accuracy
• Due to the Internet’s dynamic nature, links on you site
should be validated periodically to eliminate or at least
minimize dead links - links to unavailable information
• Make use of your Web site to provide where needed
new information and services

140
• Provide for user feedback through email and/or
forms
• Measure and analyze the web site traffic
• Use the resources available on the Web for
maintaining web sites: HTML validator,
Netmechanic, etc.
How to manage your web site

141
How to promote your web site
• Your web site promotion should be done using all the
available resources at your disposal, tri media, on the Net,
by word of mouth, demonstrations, training sessions,
workshops, etc.
• Aside from press releases and advertisements in
newspapers, radio and television, you can submit your
web site to search engines to establish your presence
online

142
• Search engines require you to submit a description of
your web site, what information, services or products
are available, who is responsible and other related
information
• You can also make posters, flyers and leaflets with a
description of your web site and its URL
• Promote it during workshops and training sessions
How to promote your web site

 Pages typically contain text,
hyper links, photos, and graphics
 Pages may also contain animated or
interactive media such as:
 Movie Clips (YouTube etc.)
 Adobe Flash Presentations
 Microsoft Silverlight
 Other media types
Pages are called Static
because text, photos, and other content will
not change unless the
actual web page file itself is edited.
A web page editing program and
Static Websites -

 Pages are associated with each other by
a menu of links or “Navigation Menu”
 Changes to the main Navigation Menu
will require an edit to every web page
that contains this menu.
 Web development software can
automate Navigation Menu
maintenance, but pages will still need to
be re-published for changes to take
effect.
footer
Static Website Navigation

 Pages are published by uploading files
to a Web Hosting Computer
 Directly from within the development
software
 By transferring individual or groups of
files with a File Transfer program.
 Maintaining a networked folder with the
Web Hosting Server
Static Web Page Files are
published by physical transfer from
the development PC to a Web Hosting
Computer
Static Websites - Publishing

 Employ Dynamic pages that exist as files with
extensions based on the type of programming
used.
 .jsp , .cfm, .pl, .php, .asp, .aspx
 Pages are Dynamic in that they can draw ever
changing Content from external information
sources
 Pages can provide Create, Retrieve, Update,
and Delete functions for company records
Pages may not require
republishing
Dynamic Websites

 Pages are capable of providing
interactivity such as:
 Forms to request information or
submit sales leads
 Internal searches within your site
 Registration and Login, personal
profile maintenance, and
authenticated/secure access to
protected or premium content
Dynamic Websites - Features

 Dynamic Product Catalogs and online
sales (Ecommerce)
Information that is already
maintained within company I.T. Systems
such as Databases, Spreadsheets, and text
files can be leveraged as Web Content.
Access can be granted to allow
customers to maintain their own
information.
Dynamic Websites - Features (continued)

Web Content Management System (WCMS)
A web content management (WCM) system is a CMS designed to
simplify the publication of Web content to Web sites, in particular
allowing content creators to submit content without requiring
technical knowledge of HTML or the uploading of files.
Dynamic Websites - Content Management Systems

 When new web pages are added, Page
Navigation Menus are maintained
automatically
 Many Common Interactive and Dynamic
Features may be provided such as: forms,
articles, blogs, ecommerce,
event calendars, forums, etc.
 Pages and sub-pages may be created based
on a universal design or template
 Pages may have a modular design featuring
panels/areas for information
of certain types on select pages
No software installation is
necessary, just a web browser.
Dynamic Websites – CMS Features

Static websites are a better choice when you:
 are limited in budget and are starting with a core web presence
 are dealing with 20 pages or less
 are planning to add new pages occasionally
 are assigning maintenance to a provider or have skilled staff and
proper software
 need of portable, physical web page files
Is Static Right for Your Organization

Dynamic websites are a better choice when you:
 need custom programming to accommodate your unique business needs
 need pages that must pull information from sources external to the website proper
 need to be able to easily add and edit web pages (Content) from within a browser
 need web pages that will display and update records from your information systems
 need to give one or more staff members access to edit the site
 need convenient access to setup common interactive features such as Article Publishing,
Event Calendaring, Blogs, Secure Login, Ecommerce, and others.
Is Dynamic Right for Your Organization

What is web programming?
Web programming refers to the writing, markup and
coding involved in Web development, which includes Web
content, Web client and server scripting and network security.
The most common languages used for Web programming are
JavaScript, Asp.Net, PHP etc. Web programming is different from
just programming, which requires interdisciplinary knowledge on
the application area, client and server scripting, and database
technology.

Technologies Overview
List of Technologies
Client Side Technologies
• HTML, CSS, JavaScript, VBScript
• XHTML, DHTML, WML, AJAX
• FLASH
Server Side Technologies
• ASP, PHP, Perl, JSP
• ASP.NET, Java
• MySQL, SQL Server, Access

Technologies Overview
List of Technologies
Some More Advanced Technologies
• XML, XSLT, RSS, Atom
• X-Path, XQuery, WSDL
• XML-DOM, RDF
• Ruby on Rails, GRAIL Framework
• REST, SOAP

How does web site programming work?
• Basically, we embed code within our normal HTML
pages. Something like this:

When we access web page with a browser, the web
server will parse, or read through, the HTML page line by
line and when it comes across a programming language, it
will execute the code. In this case, it writes out the current
date on the page and then sends the page back to web
browser.
The web browser just sees a normal web page with a date
but the server will generate a different web page when it is
loaded on a different date.
How does web site programming work?

What are web programming languages?
All web programming is done with web programming
languages. These languages can include static technologies like
HTML, XHTML, CSS, JavaScript, and XML. However, most
web site programming is done using server-side web
programming languages.
This code runs on the server and then gives static information
back to the web browser. The most popular web programming
languages are: PHP, ASP.NET, Ruby on Rails, Perl, ASP classic,
Python, and JSP.

Hyper Text Markup Language(HTML)
 HTML stands for Hyper Text
Markup Language
 A markup language is a set of
markup tags
 HTML tags are keywords
surrounded by angle brackets
like <html>

CSS
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to
be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the
layout of multiple web pages all at once
 External style sheets are stored in CSS files

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

 JavaScript is a programming language used to
make web pages interactive.
 It is a scripting language.
 It runs on visitor's computer and doesn't
require constant downloads from website.
Are JavaScript and Java the Same?
 No, they are two completely different
computer languages.
 Only their names are similar.
Java Script

 PHP is the coolest web programming language ever.
 PHP is a server-side, scripting language.
 It can be embedded within HTML and it is used to
create dynamic web pages or web applications.
 PHP code is interpreted by the web server which then
outputs a web page to the browsers that access on it
PHP's Capabilities
 PHP can be used on almost any platform
 It can run Windows or Linux and many types of web
servers including Apache and IIS.
 PHP can be used for managing email, connecting to other
web sites or servers
PHP

ASP.NET is the brainchild of Microsoft. It is a server-side web
programming language that allows you to build dynamic web site,
web applications, and web services. ASP.NET can be embedded
within HTML or contained in a separate file. ASP.NET code is
compiled and interpreted by the web server which then outputs the
HTML code to the browser.
ASP.NET's capabilities:
ASP.NET must be used on a Windows IIS server that has the
.NET libraries installed. ASP.NET can be used for managing
email, connecting to other web sites or servers, processing
form information, storing information in a database, creating
cookies in a web browser, and much more. It can connect to
many types of databases but is most commonly used with a
Microsoft SQL database.
ASP.NET

It is the hippest web programming language of the decade. It is a free,
server-side, web application framework that allows you to create
dynamic web pages and web applications very rapidly. Ruby on Rails
code is interpreted by the web server which then outputs a web page to
the browsers that access it. It is becoming more and more popular as
people begin to recognize its power to quickly design and implement
web applications. The fundamental Ruby on Rails principles include
Convention over Configuration (CoC) and Don't repeat yourself (DRY).
Capabilities:
Ruby on Rails uses the Ruby programming language, and can be used on
Windows or Linux variant servers but is particularly loved on Mac OS machines.
Ruby on Rails can be used for any typical web programming function such as
managing email, connecting to other web sites or servers, processing form
information, storing information in a database, creating cookies in a web
browser, and much more. It can connect to almost any type of database in the
world but most commonly is used in conjunction with MySQL.
Ruby on Rails

Python is the web programming language that the Google
search engine was made with! Python is used to create
dynamic web pages or web applications. Python code is
interpreted by the web server which then outputs a web
page to the browsers that access it.
Python is available on multiple platforms. It can be used for
managing email, connecting to other web sites, processing form
information, storing information in a database, creating cookies
in a web browser, and much more. It can connect to almost any
type of database but it has a strong relationship with its free
database buddy, MySQL. Python supports object oriented,
imperative, and functional programming models.
Python's Capabilities:
Python

CSC1720 – Introduction to Internet All copyrights reserved by C.C. Cheung 2003.172
Evolution of the XHTML family
SGML (1986)
HTML 2.0 – 4.0.1
(1990 – 1999)
XML Others
XHTML Basic
(Dec 19, 2000)
Modularization
of XHTML
XHTML 1.0
(Jan 26, 2000)
Others
XHTML 1.1
(May 31, 2001)

HTML, XML, XHTML
• XML (eXtensible Markup Language):
– is a set of rules that lets web designers
classify their data in a way customized to
their needs.
– Extendable by creating new types of tags.
• XHTML (eXtensible HyperText Markup
Language):
– A new version of HTML based on XML
– Inherits strict syntax rules of XML

174
Wireless Markup Language
WML
 Wireless Markup Language
– Formerly called HDML (Handheld Devices
Markup Languages)
– Allows the text portions of web pages to be
displayed on cell phones or PDAs via wireless
media.
– It is part of the Wireless Application Protocol
(WAP).

What Are HTML & CSS?
• HTML, HyperText Markup Language, gives content
structure and meaning by defining that content as, for
example, headings, paragraphs, or images. CSS, or
Cascading Style Sheets, is a presentation language created
to style the appearance of content—using, for example,
fonts or colors.
• The two languages—HTML and CSS—are independent of
one another and should remain that way. CSS should not be
written inside of an HTML document and vice versa. As a
rule, HTML will always represent content, and CSS will
always represent the appearance of that content.

• Most web pages on the internet are written in code called HTML.
HTML stands for HyperText Markup Language, and is fairly easy to
get the hang of. That's because HTML is not a programming
language: it is a language designed to improve the presentation of
text.
• For example, in Microsoft Word, if you want a nice big heading,
you can select a font size from a menu. HTML has an easy way to
change the size of text of headings, too, which you'll see in a
moment.
• But that's basically all you are doing with HTML ' presenting text
and images on a page. The way you do this is with things called
TAGS.

HTML Tags
• HTML is written in something called tags. Tags come in pairs, an opening
one and a closing one. The first pair of tags we'll write are the HTML tags
themselves. You put one HTML tag at the top, and one at the bottom:
• <HTML>
• </HTML>
• This tells a browser like Internet Explorer or Firefox that the code is
HyperText Markup Language.
• Two things to notice here. One, that the word HTML is surrounded by
angle brackets (the Less Than and Greater Than keys on your keyboard);
and two that the second Tag has a forward slash before the HTML.
• All your tags must be surrounded by the angle brackets < >. This tells the
browser that there is some HTML code that needs executing, and that it is
not to be shown on the web page. Miss an angle bracket out and it can
really mess up your web page.
• So add those two tags to your text editor and it will look like this:

• The first Tag tells the browser to start doing something; the second
tag tells the browser to stop doing it. The stop symbol is that
forward slash. So miss that out and, again, your web page can really
be messed up.
• The next pair of tags are the HEAD tags: They go between the two
HTML ones:
• <HTML>
• <HEAD>
• </HEAD>
•
• </HTML>
• Again, notice that both the HEAD tags are surrounded by angle
brackets, and there is a forward slash before the final one </HEAD>.

• DOCTYPE
• One special tag is DOCTYPE. It's not really a HTML tag,
but an instruction to the browser about which version of
HTML is allowed. In version of HTML prior to HTML 5
the DOCTYPE could be very messy. In HTML 5, however,
it's just this:
• <!DOCTYPE HTML>
• DOCTYPE needs to go at the very top of the page. There is
no end tag for DOCTYPE. Note the exclamation mark after
the first angle bracket, and the space between DOCTYPE
and HTML.
• So add a DOCTYPE to the top of your page. Your text
editor will look something like this:

Saving Web Pages
• To save your code as a web page, click the File
menu at the top of Notepad (or whatever Text
Editor you are using.) From the File menu,
select Save As.
• The Save As dialogue box appears (We created
a new folder to store all our web pages in, and
called the folder HTML).

HTML
 HTML – Hyper Text Markup Language
 HTML documents describe web pages (Static Web Page)
 HTML tags are keywords surrounded by angle brackets like
<html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag (opening tags), the
second tag is the end tag(closing tags)

Basic HTML Syntax
• HTML tags range from formatting commands
to controls that allow user input
• Tags are enclosed in brackets (< >), and most
consist of a starting tag and an ending tag that
surround the text or other items they are
formatting or controlling

Common Structure and Formatting
HTML Tags

Basic HTML Syntax
• All HTML documents begin with <html> and
end with </html>
• Two other important HTML tags are the
<head> tag and the <body> tag

Basic HTML Syntax
• The <head> tag contains information that is
used by the Web browser, and you place it at
the start of an HTML document, after the
opening <html> tag

Basic HTML Syntax
• The <head> tag pair and the tags it contains
are referred to as the document head
• Following the document head is the <body>
tag, which contains the document body

Basic HTML Syntax
• The <body> tag pair and the text and tags it
contains are referred to as the document
body
• A Web browser’s process of assembling and
formatting an HTML document is called
parsing or rendering

Basic HTML Syntax
• You use various parameters, called attributes,
to configure many HTML tags
• You place an attribute before the closing
bracket of the starting tag, and separate it
from the tag name or other attributes with a
space

IMPLEMENTATION
• WHERE WE WRITE CODE :
• 1.Text Editor
• 1.Wordpad (In Windows OS)
• 2.Gedit Text Editor (Ubundu in LINUX)
• 2.FrontPage or Dreamweaver
• WHERE WE EXECUTE :
• 1.Double Click that HTML File. (or)
• 2.Right click – Open With Internet Explorer

HTML Syntax
• HTML syntax:
two-sided tag:
<tag attributes>document content</tag>
Starting
tag
Properties of the tag.
Optional!
Actual content appears in webpage.
It could be empty
Closing tag
Examples: <p> CGS 2100 </p>
<body bgcolor = “yellow”> UCF </body>

HTML Syntax
• HTML syntax:
one-sided tag:
<tag />
e.g. Breaking line tag: <br/>
Horizontal line tag: <hr/>

Structure of the web page
• Starting with the tag <html>...</html>
<html>
.......
</html>
Everything about
the web page should
be enclosed here

• Inside the <html></html> tag
– Each web page has a head part described in
<head></head> tag:
<html>
<head>
<title> CGS 2100 </title>
</head>
</html>
The title of the
web page should
be put here

• Inside the <html></html> tag
– Each web page has a body part described in <body></body> tag:
<html>
<head>
<title> CGS 2100 </title>
</head>
<body>
This is a sample HTML file.
</body>
</html>
The content of the
whole web page
should be put here

Create a basic HTML file
• Open your text editor (notepad).
• Type the following lines of code into the document:
<html>
<head>
<title> CGS2100 lab section</title>
</head>
<body>
This is a sample HTML file.
</body>
</html>

Create a basic HTML file (cont)
• Save the file as sample.htm

Introduction to some common tags
• Paragraph tag
• List tag
• Hyperlink tags

Paragraph tags <p>...</p>
• <html>
• <head>
• <title> CGS 2100 </title>
• </head>
• <body>
• <p> Here is the first paragraph. </p>
• <p> Here is the second paragraph. </p>
• </body>
• </html>

result
First paragraph
Second paragraph
Space between
paragraphs

List tags
Ordered list: used to display information in a numeric order. The
syntax for creating an ordered list is:
<ol > e.g. <ol >
<li>item1 </li> <li> Name: Your name </li>
<li>item2 </li> <li> Section: ### </li>
… <li> Instructor: Yuping </li>
</ol> </ol>
• Result:

List tags
Unordered list: list items are not listed in a
particular order. The syntax is:
<ul > e.g. <ul>
<li>item1 </li> <li> Name: Your name </li>
<li>item2 </li> <li> Section: ### </li>
… <li> Instructor: Yuping </li>
</ul> </ul>
• Result

214
<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>
HTML center tag

215
• The <P> tag breaks the textual information on a
page and inserts a single line space, which is
useful for defining and separating paragraphs.
<H2> Mission, Vision and Goals </H2>
<P> MyLibrary aims to be the country's public virtual library with
state-of-the art resources and associated services, accessible to
anyone, anytime, anywhere. </P>
What are the basic
HTML tags?

216
<P> MyLibrary aims to be the country's
public virtual library with state-of-the art
resources and associated services,
available to anyone, anytime, anywhere.
</P>
What are the basic
HTML tags?

217
Use the align attribute of the <P> tag to justify the paragraph:
center, right or left. (left is the default)
<P align=center> MyLibrary aims to be the country's public virtual
library with state-of-the art resources and associated services,
available to anyone, anytime, anywhere. </P>
What are the basic
HTML tags?

218
HTML basic tags
• Format text with tags that make the text bold <B>
and/or italic <I> to put emphasis on some points
<P> <B> MyLibrary </B> aims to be the country's <I> public virtual
library </I> with state-of-the art resources and associated
services, available to anyone, anytime, anywhere. </P>

219
HTML basic tags
• Tags can be nested as long as the first tag open is the
last tag closed with and end tag.
<P> <B> MyLibrary </B> aims to be the country's <B> <I> public
virtual library </I> </B> with state-of-the art resources and
associated services, available to anyone, anytime, anywhere. </P>

220
• Break tag <BR> forces line breaks without creating a
vertical space, which should be used only for reasons
of design or content
<H3> Library Hours </H3>
<P> Monday – Friday </BR>
8:00 a.m. – 5:00 p.m. <P>
<P> *Open on Holidays </P>
What are the basic
HTML tags?

UNESCO ICTLIP Module 6. Lesson 1 221
<H3> Library Hours </H3>
<P> Monday – Friday </BR>
8:00 a.m. – 5:00 p.m. <P>
<P> *Open on Holidays </P>
What are the basic
HTML tags?

222
• Horizontal rule <HR> tag separate major sections of
the page by inserting a bar in between paragraphs or
sections
• Using one or more of its attributes could vary its
appearance
<HR width=50% size=3 align=center>
What are the basic
HTML tags?

223
Common HTML Elements
Monitor resolution determines pixel size
1024 lines
1280 elements per line
500 pixel wide line is less
than half the width of monitor

224
Exercise
• Use the basic tags discussed to create a basic web page about
your library, mission, vision and goals, history, collections,
services, etc. (You can copy and paste the information if they are
already in electronic form. Supply the necessary tags in the
appropriate place.)

225
What are other HTML formatting tags?
• HTML also supports lists; unordered lists, ordered lists and,
definition list, which is sometimes the best way to present
information
• Unordered list is a bulleted list that uses <UL> and <LI> tags
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>

226
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>

227
• Ordered list is a numbered list that uses <OL> and
<LI> tags
<H3> Library Resources </H3>
<OL> <LI> Library Collections </LI>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI> </OL>

228
<H3> Library Resources </H3>
<OL> <LI> Library Collections </LI>
<LI> Electronic Resources </LI> </OL>

• Lists can be nested, one within another
<OL>
<LI> Library Collections </LI>
<UL> <LI> Books </LI>
<LI> Journals </LI>
</UL>
<LI> Electronic Resources </LI>
<UL> <LI> CD-ROMs </LI>
<LI> Abstracts & Indexes </LI>
</UL>
</OL>

230
<OL>
<UL> <LI> Books </LI>
<LI> Journals </LI>
</UL>
<LI> Electronic Resources
</LI>
<UL> <LI> CD-ROMs </LI>
<LI> Abstracts &
Indexes </LI>
</UL>
</OL>

231
• The list item type attribute can be used to change the
bullets in <UL> disc, square or circle, and in <OL> from
number 1 to lowercase (a) or uppercase (A) letters, or
lowercase (i) or uppercase (I) roman numerals
<OL type=I>
<UL type=square> <LI> Books </LI>
<LI> Journals </LI> </UL>
<UL type=disc> <LI> CD-ROMs </LI>
<LI>Abstracts & Indexes</LI> </UL>
</OL>

<OL type=I>
<UL type=square> <LI> Books </LI>
<LI> Journals </LI> </UL>
<UL type=disc> <LI> CD-ROMs </LI>
<LI>Abstracts & Indexes</LI> </UL>
</OL>

233
• Definition list allows listing of terms and definitions.
Uses <DL>, <DT> for the term and <DD> for
definition.
<DL>
<DT> Definition Term </DT>
<DD> Definition </DD>
<DT> Membership Card </DT>
<DD> Users of the library must present their membership
card to avail of the library services and privileges. </DD>
</DL>

234
<DL>
<DT> Definition Term </DT>
<DD> Definition </DD>
<DT> Membership Card </DT>
<DD> Users of the library must present their membership
card to avail of the library services and privileges. </DD>
</DL>

Course Title :
PART : 3

236
• The color of the background and text elements of the web
page can vary using attributes of the <BODY> and <FONT>
tag
• To specify color, HTML uses the color names (16 colors
supported by most browsers), or the numerical equivalent
in RGB hexadecimal codes that correspond to over 14
million possible color, shades, hues and tints
White #ffffff Black #000000 Blue #0000ff
Red #ff0000 Yellow #ffff00 Green #00800
How to add color

237
• bgcolor sets the background color of the whole page
• text defines the text color for the page
• link - unvisited link color
• vlink - visited link color
• alink - activated link color
< BODY bgcolor=“#ffffff” text=“#000000” link=“#0000cc”
vlink=“#00ff00” alink=“#ff0000” >
How to add color

238
< BODY bgcolor=“#8A2BE2”
text=“#ffffff” link=“#0000ff”
vlink=“#00ff00”
alink=“#ff0000” >
How to add color
< BODY bgcolor=“green”
text=“white” link=“#ffffff”
vlink=“#00ff00”
alink=“#ff0000” >

239
How to add color
• Color attribute of <FONT> tag sets the color of selected text
within the page overriding the text attribute on the
<BODY> tag.
<CENTER>
<FONT color=“#000000"><H1> My Library </H1> </FONT>
<H2> Mission, Vision and Goals </H2></CENTER>
<FONT color=“#ffff00”>
</FONT>

How to add color
<CENTER>
<FONT color=“#000000"><H1> My Library </H1> </FONT>
<H2> Mission, Vision and Goals </H2></CENTER>
<FONT color=“#ffff00”>
</FONT>

241
Exercise
• Edit the web pages you have created, you should have
three by now: about.htm, collections.htm and
services.htm
• Add color to your page
• Consult with an HTML reference book or the Internet
for the hexadecimal color codes you can use to add
color
• c:mod6_html

242
How to add images
• Image and other graphical elements can be added
on the web page through the <IMG> tag using the
src (source) attribute that points to the image /
graphics
< IMG src=“mylogo.gif” >

243
How to add images
<IMG src=“mylogo.gif”>
<CENTER>
<H2> Mission, Vision and Goals
</H2> </CENTER>

244
How to add images
<CENTER>
<IMG src=“mylogo.gif”>
<H2> Mission, Vision and Goals
</H2>
</CENTER>

245
How to add images
<IMG src=“mylogo.gif” align=left>

246
How to add images
<IMG src=“mylogo.gif” width=100
height=100 align=left alt=logo>

How to add images
<BODY bgcolor=“#000800”
background=marb.jpg >

How to create hyperlinks
• Hypertext links are created on web pages using the <A>
anchor tag with the HREF (Hypertext Reference) attribute
• Hyperlinks connect your web pages together and point to
other web documents (build your web site)
<A HREF=“collection.htm”>Library Collection</A>
<A HREF= “http://www.unesco.org/webworld/portal_bib/”>
UNESCO Libraries Portal </A>

<A HREF=“collection.htm”> Library
Collection</A>
<A HREF=
“http://www.unesco.org/webworld/
portal_bib/”> UNESCO Libraries
Portal </A>

• Hyperlinks are also used to connect to graphic and other
media
• Icons and other graphic elements can be used as the the
“trigger’ (object) users click on to jump to the referred
document
<A HREF=“mylibrary.jpg”> MyLibrary </A>
<A HREF “mylibrary.jpg”> <IMG src
“mylibrary_sm.jpg”> </A>
<A HREF “mylibrary.jpg” border=0>
<IMG src “mylibrary_sm.jpg”> </A>

<A HREF=“mylibrary.jpg”> MyLibrary </A>
<A HREF “mylibrary.jpg”>
<IMG src “mylibrary_sm.jpg”>
</A>
<A HREF=“mylibrary.jpg”>
<IMG
src=“mylibrary_sm.jpg”
border=0> </A>

• Link to e-mail address can be created to
automatically open the e-mail program on
the system supplying the address
Contact <A
HREF=“mailto:me@mylibrary”>
me@mylibrary.edu </A>

Hyperlink
• Link to another location or file
• Syntax:
<a href= “http://www.ucf.edu”> Link to UCF </a>
Starting
Tag
Attribute of the tag: the address of the
hyperlink
Content displayed on the
page
Ending tag
Result:

Include a Picture
• <img src=“FILENAME” />
• <img src=“FILENAME” alt=“text” />
• E.g.
• <img src=“logo.gif” alt=“Google logo” />
• <img src=“logo.gif” />

Simple Code - 1
First Planet
First Planet
 <html> .... </html> describes the web page
 <body> ..... </body> is the visible page content
<html>
<body>
<h1>First Planet</h1>
<h6>First Planet</h6>
</body>
</html>
O/P :

Link Tag
Html Links :
Html links are defined with the <a> tag
Syntax : <a href="http://www.gmil.com">Gmail</a>
Example : <html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>
GmailO/P :
If we click this link it goes to gmail
account

Image Tag
HTML Images :
HTML images are defined with the <img> tag.
Syntax : <img src "123.jpg" width="104" height="142" />
Example :
<html>
<body>
<img src="word.jpg" width="104" height="142" />
</body>
</html>
O/P:

HTML RULES
HTML Rules (Lines) :
The <hr /> tag is used to create an horizontal
rule (line).
Example: <html><body>
<h3>Exnora</h3>
<hr />
<h3>Safety Exnora</h3>
</body></html>
O/P :
Exnora
Safety Exnora

HTML COMMENTS
HTML Comments :
Comments can be inserted in the HTML code to make
more readable and understandable. Comments are ignored by the browse
and are not displayed.
Syntax : 
<h3>Plant Trees </h3>
</body></html>
Plant Trees
O/P :

HTML TEXT FORMATTING
<html><body>
<b>Confidence</b><br />
<big>Hardwork</big><br />
<i>Preseverance</i><br />
<code>Samsung CRT</code><br />
This is<sub> subscript</sub><br />
This is<sup> superscript</sup>
</body></html>
Some Formatting Tags are 1,b-Bold, 2.i-Italic, 3.code-
Computer code,4.sub-Subscript & 5.sup-Superscript
Implement it as a Exercise
(Practical)

HTML STYLE ATTRIBUTES
Tags Description
<center> Defines centered content
<font> Defines HTML fonts
<s> and <strike> Defines strikeout text
<u> Defines underlined text
Attributes Description
Align Defines the alignment of text
Bgcolor Defines the background color
Color Defines the text color

STYLE EXAMPLE
<html>
<h1 style="text-align:center">NATURE</h1>
<body style="background-color:yellow">
<p style="font-family:Purisa;color:red">Plant Tree</p>
<p style="font-family:times;color:red">Save Our Generation</p>
<p style="font-size:40">Value Our Environment</p>
</body> </html>
NATURE
Plant Tree
Save Our Generation
Value Our Environment
O/P :

HTML TABLES
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag),
 Each row is divided into data cells (with the <td> tag). The letters td
stands for "table data," which is the content of a data cell.
 Headings in a table are defined with the <th> tag.
<table border="1">
<tr> <td>row 1, cell 1</td>
<td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</table>
row1,cell1 row1,cell2
row2,cell1 row2,cell2

TABLE FEATURES
1.Table with a caption :
<caption>My Caption</caption>
2.Table cells that span more than one row/column :
<th colspan="2">Telephone</th>
<th rowspan="2">Telephone:</th>
3.Cell padding :
<table border="1" cellpadding="10">
4.Cell spacing :
<table border="1" cellspacing="10">
5.Add a background color or a background image to a table :
<table border="1" bgcolor="red">

HTML LISTS
HTML supports ordered, unordered and definition lists.
Ordered Lists :
 An ordered list is also a list of items. The list items are marked with numbers.
 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Unordered Lists :
 An unordered list is a list of items. The list items are marked with bullets
(typically small black circles).
 An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.

a. Apple
b. Orange
c. Grapefruit
Ordered Lists: <ol> Tag
 Create an Ordered List using <ol></ol>:
 Attribute values for type are 1, A, a, I, or i
266
1. Apple
2. Orange
3. Grapefruit
A. Apple
B. Orange
C. Grapefruit
I. Apple
II. Orange
III. Grapefruit
i. Apple
ii. Orange
iii. Grapefruit
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

Unordered Lists: <ul> Tag
 Create an Unordered List using <ul></ul>:
 Attribute values for type are:
 disc, circle or square
267
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear
 Apple
 Orange
 Pear
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

HTML Tables (2)
• Start and end of a table
• Start and end of a row
• Start and end of a cell in a row
268
<table> ... </table>
<tr> ... </tr>
<td> ... </td>

Simple HTML Tables – Example
269
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>

<table cellspacing="0" cellpadding="5">
<tr>
</tr>
<tr>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
Simple HTML Tables – Example (2)
270

Complete HTML Tables
• Table rows split into three semantic sections:
header, body and footer
– <thead> denotes table header and contains
<th> elements, instead of <td> elements
– <tbody> denotes collection of table rows that
contain the very data
– <tfoot> denotes table footer but comes BEFORE
the <tbody> tag
– <colgroup> and <col> define columns (most
often used to set column widths)
271

Complete HTML Table: Example
272
<table>
<colgroup>
<col style="width:100px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
</tbody>
</table>
header
footer
Last comes the body (data)
th
columns

<table>
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
</tbody>
</table>
Complete HTML Table:
Example (2)
273
table-full.html
Although the footer is
before the data in the
code, it is displayed last
By default, header text is
bold and centered.

Definition Lists :
 A definition list is not a list of single items. It is a list of items (terms),
with a description of each item (term).
 A definition list starts with a <dl> tag (definition list).
 Each term starts with a <dt> tag (definition term).
 Each description starts with a <dd> tag (definition description).
Unordered List :
 ThinkPositve
 Never Depressed
 Keep Smiling
Ordered List :
1.Fail
2.Work Hard
3.Win
4.Teach
Definition List :
Success
Fail First,
Happy
Smile Always

HTML FORMS
HTML Forms are used to select different kinds of user input.
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information like,
1. text fields,
2. textarea fields,
3. drop-down menus,
4.radio buttons,
5. checkboxes,
6. Action Attribute and the Submit Button,etc.

Text Fields:
Text fields are used when you want the user to type letters,
numbers, etc. in a form.
Example :
<form>
First name: <input type="text" name="firstname" /> <br />
Last name: <input type="text" name="lastname" />
</form>
First name :
Last name :
OUTPUT :

RADIO & CHECK BOX
Radio Buttons :
<form>
<input type="radio" name="sex" value="male" /> Male <br />
<input type="radio" name="sex" value="female" /> Female
</form>
Checkboxes :
<form>
Bike: <input type="checkbox" name="vehicle" value="Bike"/> <br />
Car: <input type="checkbox" name="vehicle" value="Car"/><br />
</form>
Male
Female
Bike
Car

Form Action Attribute
Action Attribute and the Submit Button :
 When the user clicks on the "Submit" button, the content of the form is
sent to the server.
 The form's action attribute defines the name of the file to send the
content to.
 It depends on PHP File.
<form name="input" action="html_form_submit.asp" method="get">
Username:<input type="text" name="user"/>
<input type="submit" value="Submit" />
</form>
Submit
Username :

HTML LAYOUT
 A part of this page is formatted with two columns, like a newspaper page.
 The trick is to use a table without borders, and maybe a little extra cell-
padding.
 No matter how much text you add to this page, it will stay inside its
column borders.

<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is the Time to save Our Earth to Our Future Generation.So
everybody shoud be a Volunteer.
</td>
<td width="50%" valign="top">
For smooth relationship between to us & nature We should do some
activities to Preserve our Earth.
</td>
</tr> </table>
This is the Time to save
Our Earth to Our Future
Generation.So
everybody shoud be a
Volunteer.
For smooth relationship
between to us & nature We
should do some
activities to Preserve our
Earth.

HTML FRAMES
 With frames, you can display more than one HTML document in the
same browser window.
 Each HTML document is called a frame, and each frame is independent of
the others.
The Frameset Tag
* The <frameset> tag defines how to divide the window into frames
* Each frameset defines a set of rows or columns
* The values of the rows/columns indicate the amount of screen area each
row/column will occupy

VERTICAL & HORIZONTAL FRAMESET
<html>
<frameset cols="30%,40%,30%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
<html>
<frameset rows="30%,40%,30>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

• The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration tag is used by
the web browser to understand the version of
the HTML used in the document. Current
version of HTML is 5 and it makes use of the
following declaration:
• <!DOCTYPE html>

HTML EDITORS
There are several software packages to help the tedious business of putting in
all formatting tags. You just have to drag and drop the content/text and the code
will be generated at the backend automatically. These are also sometime
reffered to as WYSIWYG (What You See Is What You Get) Editors. Some
popular ones are mentioned here :
• Adobe Dreamweaver, NetObjects Fusion for Mac and PC.
• iWeb for Mac.
• Nvu for Linux.
• Microsoft FrontPage for PC (Discontinued)
To see a copy of the file that browser reads to generate the information on the
current window, select View Source (or the equivalent) from the browser menu.
The file contents, with all the HTML tags are displayed in a new window.

Online editor
• https://www.tutorialspoint.com/html/index.htm

Internet tech & web prog. p1,2,3-ver1

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Internet tech & web prog. p1,2,3-ver1

Similar to Internet tech & web prog. p1,2,3-ver1 (20)

More from Taymoor Nazmy

More from Taymoor Nazmy (20)

Recently uploaded

Recently uploaded (20)