Programming Concepts and Logics Unit 5 … 383
EXERCISE
Short Answer Questions
1. Define programming.
2. Define programs.
3. Define programming language.
4. Define statements in computer programming language.
5. Define program design tools.
6. Define codes in computer.
7. Define BCD code.
8. Define absolute binary code.
9. Define ASCII and EBCDIC.
10. Define Unicode.
11. Define comments.
12. Define identifier, keywords and token used in C language.
13. Define constants.
14. Define variables.
15. Define type specifier.
16. Define expression.
17. Define precedence of operators.
18. Define nested loop.
19. Define array and string.
Long Answer Questions
1. Explain the types of computer programming language.
2. Differentiate between low level and high level language.
3. Differentiate between compiler and interpreter.
4. What is error? Explains the types of errors.
5. Define and explain the programming structures (statements).
6. What is algorithm? Briefly explain the characteristics of algorithm.
7. What is flowchart? Explain the different symbols used in flowchart.
8. Briefly explain the types of flowchart.
9. Mention the advantages and limitation of flowchart.
10. Draw flowchart and write algorithm to find whether enter number is odd or even number.
11. Define and write pseudo code to calculate largest value among three different values.
12. Mention the features of C programming language.
13. Mention the advantages and disadvantages of C language.
14. Briefly explain the structure of C language.
15. Define and explain the preprocessor of C language.
.384 … Computer Science–I
16. Define and explain the header files of C language.
17. Mention the character sets used in C language.
18. Define and explain the data types of C language.
19. Explain constants and variables.
20. Define and explain the operators.
21. Define and explain type casting and conversion of data types.
22. Define and explain library functions of a C language.
23. What is control structure? Explain their types.
24. Explain the different forms of if structure (statement).
25. Differentiate between while and do while loop.
26. Explain the types of array in C language.
27. Explain the string () library function with example.
28. Write an algorithm and draw a flowchart to enter names and ages of 10 different students in
arrays, then arrange them in descending order according to the age and print them. [2057]
29. Describe either in flowchart or algorithm from the steps required to display the multiplication
table of a given number (input by the user). Convert this flowchart/algorithm into program
code of C. The program should use the 'FOR' looping structure to calculate and display the
multiplication table. [2058]
30. What are logical operators? Give two examples of their use. [2058]
31. What is program logic? What are different tools to explain the logic and design of a program?
What is infinite loop? What are symbols used to draw a flow a chart? [2059]
32. Write a program to store a Kathmandu valley's 7 days maximum and minimum temperature (in
centigrade) and calculate average, maximum, minimum temperature using function and print 7
days temperature, maximum minimum and average temperature using any C programming
language. Write an algorithm to solve the above calculations. [2060]
33. Write a program to input a message from keyboard and display the following menu. [2060]
34. Print the message length in terms of characters.
35. Print the message in reverse order.
36. Print the message in reverse order.
37. Copy the message from one location of screen to another location.
38. What do you mean by program, algorithmic? Explain the aims of program design and building
blocks of a structured programming. [2060]
39. The marks obtained by a student in 7 different subjects are entered through the keyboard. The
student gets a division as per the following rules.
Percentage greater or equal to 60 fist divisions
Percentage between 45 and 59 second division
Percentage between 35 and 44 third division
Percentage between 35 and 44 fail
Mark less than 35 in a subject will be declared as fail
Write a program using C language to process result of all students based on the specification
stated above.
Approved by Curriculum Development Centre (CDC), Nepal
Programming Concepts and Logics Unit 5 … 385.
40. Write a program that reads different names and addresses into the computer and rearrange the
names into alphabetical order using the structure variables. [2061]
41. Describe either in flowchart of algorithm the steps required to display the multiplication table
of a series of given number (entered by the user). Convert this flowchart of algorithm into
program code of any of the 4GL or HLL of your choice. The program should use the 'for'
looping structure in calculating and displaying the multiplication table. [2061]
42. Write a program using C language to read the age of 100 persons and count the number of
persons in the age group between 50 and 60. Use ''for'' 'continue' statements. [2061]
43. Different between while and do while loop. What the advantages are of object oriented
programming over structure programming? [2061]
44. Write a program using C language that reads successive records from the new data file and
display each record on the screen in an appropriate format. [2061]
45. Write a C program to print the 10 positive integers and their factorials. [2062]
46. For any integer input through the keyboard, write a C program to find out whether it is an odd
number or even number. [2062]
47. Write a C program to input 'n' numbers and find out greatest and smallest number. [2062]
48. Draw a flowchart and write a C program to read in a positive integer less than 20 and display
its multiplication table. [2062]
49. Write a C program to input names of 'n' numbers of students and sort them in alphabetical
order. [2062]
50. Write an algorithm and C program to read salaries of 200 employees and count the number of
employees getting salary between 5000 –10,000. [2062]
51. Write a C program that will read successive records from the new data file and display each
record on the screen in an appropriate format. [2062]
52. Describe the limitation of using getchar and putchar functions for reading strings. [2062]
53. Write a C program to display the sum of 'n' terms of even numbers. [2063]
54. Write a C program to calculate the factorial of a given number using functions. [2063]
55. What is an operator? Describe different types of operators that are included in C. [2063]
56. What are the difference between break and continue statement? Write a C program to print first
10 items of the following series using FOR loop.
57. What is an array? Write a C program, to sort integer values in descending order. [2063]
58. Write a C program to read age of 40 students and count the number of students of the age
between 15 and 22. [2063]
59. What are the different symbols used to construct a flow chart? Give brief explanation along
with a neat diagram. [2063]
60. What is an operator? Explain assignment, ternary, comma operators with examples.
61. Write the advantage of function. Write a recursive function to calculate the factorial of any
integer number. [2064]
62. Describe the importance of an array. Write a program to store ten different constant variables
in any array and print out the greatest number.
63. Write a program to count the number of vowels and consonants in a given text. [2064]
Approved by Curriculum Development Centre (CDC), Nepal
.386 … Computer Science–I
64. (a)Write an algorithm and a flow chart for a program that checks whether the number entered
by user is exactly divisible by 5 but not by 11.
(b) Write a program that reads three numbers and displays the largest among them.
(c) What is an operator? Explain different types of operators used in programming.
(d) Write a program, to read a four digit number and display it in reverse order. [2065]
65. Write a program to add two matrices.
66. Write a program to enter 'n' numbers into one dimensional array and sort and display them in
ascending order.
67. a. Write an algorithm for a program that input cost price (CP) and selling price (SP) and
determines whether there is gain or loss. Convert this algorithm into program code.
b. Write a program to display the name of day on the basis of entered number? For example,
1 for Sunday.
c. Write a program to input an integer number and check whether it is prime or not.
d. Explain data types used in C-programming with examples.
68. Write a program to store name and mark of 20 students. Sort the data according mark
descending order and display them.
Activities
1. WAP to find smallest value among three different values using C programming language.
2. WAP to print even number less than 100 using looping concepts.
3. WAP to count the odd and even number less than 1000 using looping concepts.
4. WAP to print the sorted names in alphabetical order using strcmp() and strcpy() string function.
5. WAP to calculate arithmetic calculation of two values using switch case.
■■■
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I
LEARNING OBJECTIVES
After studying this chapter, the students will be able to understand to:
Information that we are accessing from web they are store somewhere in the form of page and
created by any programming or scripting language, many of them one is HTML. It is markup
language means the information are remains between tags or starting from tag. It is web page
designing scripting language. With this, we can create attractive customized pages with
........ having minimum knowledge. It can be written sequence of text in any text editor and save ..........
..
with dot (.) html or htm extension file name and runs and supports by any browser. It supports
all the features for making good and attractive pages features supports such as character
formatting, making list, inserting images and objects, linking, forming tables, frames and forms,
graphics (HTML5), CSS etc. With this, learners will have knowledge of HTML scripting
language for making good pages and page designing skills at the end of this unit.
.388 … Computer Science–I
INTRODUCTION TO WEB DEVELOPMENT
Web development refers to building web applications and deploying on the web. Web development
requires use of scripting languages both at the server end as well as at client end. Web programming, also
known as web development, is the creation of static or dynamic web applications. In present scenario,
most of the applications are developed dynamically; it means interactive web application both in client
side as well as server side. Examples of web applications are social networking sites like Facebook or e-
commerce sites like Amazon.
There are several designs and structure based web developing scripting or programming language
available in the market with that each and everyone can easily learn it and enjoy as a developers. In fact,
many argue it is the best form of coding for beginners to learn. It is easy to set up, you get instant results
and there is plenty of online training available.
A lot of people learn web coding because they want to create the next Facebook or find a job in the
industry. But it is also a good choice if you just want a general introduction to coding, since it’s super easy
to get started. No matter whether you’re looking for a career or just want to learn coding, learning how to
develop for the web is for you. It’s one of the smartest decisions you will ever make!
For developing applications need programming or scripting languages, the selection of languages is on the
basis of client’s specific requirements and skill and experience of the programmer of the particular
language of either server side or client side. The server side and client side languages are differ. Some of
the most popular languages are either client or server sides are mention below:
Client-side Languages (Programming or Scripting)
Client-side programming involves writing program (code) that is interpreted by a browser such as
Internet Explorer or Mozilla Firefox or Google Chrome or by any other web client such as a cell phone. The
most common languages and technologies used in client-side programming are HTML, JavaScript, and
Cascading Style Sheets (CSS).
HTML
Hyper Text Markup Language (HTML) is the language behind most web pages. The language is made up
of elements that describe the structure and format of the content on a web page. It is a scripting language.
Cascading Style Sheets
Cascading Style Sheets (CSS) are used in HTML pages to separate formatting and layout from content.
Rules defining color, size, positioning, and other display aspects of elements are defined in the HTML
page or in linked CSS pages. Has a better design features and more effective in design.
JavaScript
JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validate forms,
pop up new windows, and create dynamic effects such as drop-down menus and image rollovers. The
word "JavaScript" is a proprietary name for Netscape's version of ECMAScript. Microsoft's version of this
language is called JScript.
Dynamic HTML
Dynamic HTML is not a language but rather refers to code that uses JavaScript to manipulate CSS
properties on the fly.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 389.
Ajax
The term Ajax was originally a pseudo-acronym for "Asynchronous JavaScript and XML" but is now used
much more broadly to cover all methods of communicating with a server using JavaScript.
The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with
the server without a complete page refresh.
jQuery
It is not a programming language, per se, but is a javascript library, but is an indispensable part of client-
side scripting. The claim of the developers is that jquery runs exactly the same across all browsers.
This is the technology’s greatest advantage. Jquery is a javascript toolkit that simplifies writing code and
enables rapid web development.
Microsoft Silverlight
Silverlight is a powerful development tool for creating engaging, interactive user experiences for Web and
mobile applications. Silverlight is a free plug-in, powered by the .NET framework and compatible with
multiple browsers, devices and operating systems, bringing a new level of interactivity wherever the Web
works.
Server-side Languages (Programming or Scripting)
Server-side programming involves writing program( code) that connects web pages with databases, XML
pages, email servers, file systems, and other systems and software accessible from the web server. The
most common server-side languages and programming frameworks are ColdFusion, Java Enterprise
Edition, ASP.NET, Python, PHP, and Node.js.
ColdFusion
ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-side
languages. It is tag-based, which makes it look a lot like HTML and easier for client-side programmers to
understand than some of the other choices. Because of the relative ease with which it is written,
ColdFusion is sometimes assumed not to be so powerful. In fact, ColdFusion code is compiled to Java byte
code, which means the pages run quickly. Web developers can accomplish virtually any required task
using the ColdFusion Markup Language (CFML). However, as ColdFusion can easily be integrated with
Java applications, developers have the choice of using Java to extend ColdFusion applications.
Java EE
Java EE is used in large web projects. With its power and robustness comes a steep learning curve. Java EE
is defined by its specification and API. A Java Application Server (Java AS) manages servlets, JavaServer
Pages (JSP), Web Services, and Enterprise JavaBeans (EJB). Java EE also includes a number of other APIs
commonly linked to enterprise application development. JDBC, JPA, e-mail, JMS, and XML are some
examples. But that's only part of the picture. There are a number of frameworks built on some of these
technologies that streamlines the development process further. Hibernate offers most of the
object/relational mapping (ORM) without an EJB Container. For this reason it's called a lightweight ORM
technology. JavaServer Faces, Struts, and Spring-MVC build on JSP to do away with scriptlets completely,
relying on HTML style tags and associated JavaBeans.
Approved by Curriculum Development Centre (CDC), Nepal
.390 … Computer Science–I
ASP.NET
Microsoft's ASP.NET is not a language, but a framework for writing websites and software. Like
ColdFusion and JSP (and unlike traditional ASP) ASP.NET pages are precompiled, so they run faster than
traditional ASP pages do. ASP.NET pages can be written in many languages, but the most popular are C#
(pronounced C-sharp) and Visual Basic .NET (VB.NET).
Python
Like Perl, Python is open source. Python has been a popular programming language for a long time; it
runs on commonly used web servers such as Apache.
PHP
Like Python, PHP is open source. It has rapidly become a popular alternative to the proprietary languages
such as ColdFusion and ASP.NET. PHP is lightweight, relatively simple to learn, and runs web servers
such as Apache.
Node.js
Node.js is a JavaScript framework that operates server machines. Therefore, the server side code is
contained in scripts as opposed to compiled programs. Although Node.js can be run on a web server like
Apache, HTTP servers can be written using Node.js.
CGI Script
A CGI script is any program that runs on a web server. CGI stands for Common Gateway
Interface. It defines a standard way in which information may be passed to and from the browser and
server.
Ruby
Ruby is a powerful scripting language. Scripts can be used to automate tasks such as creating and
searching files and managing and organizing subdirectories. Companies like Github, Chef and Puppet
use Ruby for scripting. Devops teams use scripting to combine development and operations.
Both Client and Server side languages
Some of the language that is applicable in both server and client side very effectively. The language which
is easily and frequently communicates between the server and client. Some examples are given below:
Google Web toolkit
Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based
applications. GWT is used by many products at Google, including Google AdWords and Orkut. GWT is
an open source, completely free, and used by thousands of developers around the world. It is licensed
under the Apache License version 2.0.
Dart
Dart is a client-optimized programming language for apps on multiple platforms. It is developed by
Google and is used to build mobile, desktop, server, and web applications. Dart is an object-oriented,
class-based, garbage-collected language with C-style syntax.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 391.
Opa
Opa is an open-source programming language for developing scalable web applications. Opa
subsequently compiled to Node.js on the server together with JavaScript on the client, with the compiler
automating any communication between the two.
Tersus
The Tersus Visual Programming Platform is 100% visual, and requires no coding. It dramatically reduces
the effort, costs and time required for creating and maintaining enterprise web applications, which are
developed by simply drawing visual diagrams instead of writing code.
Web Browsers and Search Engines
Browser itself is an environment. It helps to establish connection with the web server. Simply, a browser is
your access to the internet, and a search engine allows you to search the internet once you have access. We
have to use a browser to get to a search engine. Browser enables us to access web pages from web.
Likewise search engine helps to search the information on the basis of keywords
Web Browsers
The software necessary to access the special media filled pages on the World Wide Web is called a web
browser. Surfing the web is made possible by Web browsers. Therefore, Browsers are basically software
programs runs in client side, that allow searching for and viewing various kinds of information on the
Web, such as web sites, video, audio, pictures, games, animations etc.
It is used for retrieving, presenting, and traversing information resources on the World Wide Web. The
primary purpose of a web browser is to bring information resources to the user. All major web browsers
allow the user to open multiple information resources at the same time, either in different browser
windows or in different tabs of the same window. Major browsers also include pop-up blockers to prevent
unwanted windows from "popping up" without the user's consent. Most web browsers can display a list
of web pages that the user has bookmarked so that the user can quickly return to them. Therefore;
• A Web browser knows how to go to a Web server on the Internet and request a page, so that the
browser can pull the page through the network and into users' machine.
• A Web browser knows how to interpret the set of HTML tags within the page in order to display the
page on users' screen as the page's creator intended it to be viewed.
There are two basic categories of Web browser. They are:
Text-only browsers: A text-only browser such as Lynx allows you to view Web pages without showing art
or page structure. Essentially, you look at ASCII text on a screen. The advantage of a text-only browser is
that it displays Web pages very fast. There's no waiting for multimedia downloads.
Graphical browsers: To enjoy the multimedia aspect of the Web, you must use a graphical browser such
as Netscape Navigator or NCSA Mosaic. Graphical browsers can show pictures, play sounds, and even
run video clips. The drawback is that multimedia files, particularly graphics, often take a long time to
download. Graphical browsers tend to be significantly slower than their text-only counterparts. And this
waiting time can be stretched even further with slow connections or heavy online traffic.
Most major web browsers have these user interface elements in common:
• Back and forward buttons to go back to the previous resource and forward again.
• A refresh or reload button to reload the current resource.
• A stop button to cancel loading the resource. In some browsers, the stop button is merged with the
reload button.
Approved by Curriculum Development Centre (CDC), Nepal
.392 … Computer Science–I
• A home button to return to the user's home page
• An address bar to input the Uniform Resource Identifier (URI) of the desired resource and display it.
• A search bar to input terms into a search engine
• A status bar to display progress in loading the resource and also the URI of links when the cursor
hovers over them, and page zooming capability.
Some examples of common web –browsers are:
• Microsoft Internet Explorer
• Netscape Navigator
• AOL Web Browser
• Mozilla Firefox
• Opera
• Mac Safari
• Lynx browser
• Google Chrome etc
Search Engines
Search engines are the special websites that provide facility to Internet users to search information on the
Internet. A lot of information is available on the Internet in different websites. There are billions of
websites on the Internet. The Internet users only browse the important website addresses. The other
website addresses can be searched through search engines. The search engines keep the record of website
addresses along with important words for description of each web page.
For example, if you want to get information about the “History of Internet”, give these words to any
search engine. The search engine will search the given information and will provide a list of links of
websites along with brief description about each website. Click one of the links of websites after reading
the description.
The commonly used search engines and their URL addresses are:
GOOGLE http://www.google.com
YAHOO http://www.yahoo.com
ALTA VISTA http://www.altavista.com
ASK http://www.ask.com
EXCITE http://www.excite.com
INFOSEEK http://www.infoseek.com
LYCOS http://www.lycos.com
Mamma http://www.mamma.com
Hotbot http://www.hotbot.com
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 393.
It must be noted that we can create our own website and register our page with any search engine (as
mentioned above). Our page can be searched by any Internet user through search engine.
Therefore, In order to find documents on the WWW, we need to use a search engine. There are three
different types of search engines: Directories, Key Word and Meta.
Directories: Directories are used to find general information using general subject headings. If a person is
not quite sure what he is looking for, this type of search engines help them walk through their search.
Example: Open Directory Project: http://www.DMOZ.org
Key Word Search Engines: Search engines are good when we know the exact words or phrases (key
words) necessary to find the information we are looking for. Examples:
• AltaVista http://www.altavista.com
• Google http://www.google.com
• Go.com http://www.go.com
• Excite http://www.excite.com
Meta-Search engines: A meta-search engine uses indexes of other search engines to help find "hard to
find" information. Examples are;
• Ask Jeeves http://www.askjeeves.com
• DogPile http://www.dogpile.com
• Meta Crawler http://www.metacrawler.com
A search engine operates, in the following order
1. Web crawling
2. Indexing
3. Searching
Web search engines work by storing information about many web pages, which they retrieve from the
html itself. These pages are retrieved by a Web crawler (sometimes also known as a spider) — an
automated Web browser which follows every link on the site. When a spider is building its lists, the
process is called Web crawling. In order to build and maintain a useful list of words, a search engine's
spiders have to look at a lot of pages. The contents of each page are then analyzed to determine how it
should be indexed (for example, words are extracted from the titles, headings, or special fields called meta
tags). Data about web pages are stored in an index database for use in later queries. A query can be a
single word. The purpose of an index is to allow information to be found as quickly as possible. When a
user enters a query into a search engine (typically by using key words), the engine examines its index and
provides a listing of best-matching web pages according to its criteria, usually with a short summary
containing the document's title and sometimes parts of the text. The index is built from the information
stored with the data. Most search engines support the use of the Boolean operators AND, OR and NOT to
further specify the search query.
Approved by Curriculum Development Centre (CDC), Nepal
.394 … Computer Science–I
OVERVIEW OF VARIOUS INTERNET AND WEB TECHNOLOGIES
Internet is a network of network, means collection of network. Web technologies give us a way to interact
with hosted information, like websites. Web technology involves the use of hypertext markup language
and cascading style sheets (CSS).Internet and web technologies are elaborated separately below
Introduction of Internet
The Internet is worldwide computer network that interconnects, millions of computing devices
throughout the world. Most of these devices are PC’s, and servers that store and transmit information such
as web pages and e-mail messages. Internet is revolutionizing and enhancing the way we as humans
communicate, both locally and globally. Everyone wants to be a part of it because the Internet literally
puts a world of information and a potential worldwide audience at every ones fingertips. The Internet
evolved from the ARPANET (Advanced Research Projects Agency) to which other networks were added
to form an inter network. The present Internet is a collection of several hundred thousand of networks
rather than a single network. Therefore, Internet is a network of networks that means, it is a web of
networks. From there evolved a high-speed backbone of Internet access for sharing information on
different networks. The end of the decade saw the emergence of the World Wide Web (WWW), which
announces a platform-independent means of communication enhanced with a pleasant and relatively
easy-to-use graphical interface. World Wide Web is an example of an information protocol/service that
can be used to send and receive information over the Internet. It supports:
• Multimedia Information (text, movies, pictures, sound, and programs etc.)
• Hyper Text Information (information that contains links to other information resources).
• Graphic User Interface (users can point and click to request information instead of typing in text
commands).
The World Wide Web model follows Client/Server software design. A service that uses client/server
design requires two pieces of software to work: Client Software, which is used to request information, and
Server Software, which is an Information Provider.
The server software for the World Wide Web is called an HTTP server (or informally a Web server).
Examples are Mac HTTP, CERN HTTP, and NCSA HTTP. The client software for World Wide Web is
called a Web browser. Examples are: Netscape, and Internet Explorer.
To get onto the internet, we need
• A computer or other digital device
• Phone Line or cable line or a wireless connection
• Modem- (Is the device that allows your computer to "talk" to other computers over phone lines or
cable lines in the case of dial up connection)
• Software (like Internet Explorer, Mozilla Firefox etc.) to tell your computer how to "talk" over the
internet
• An account with an ISP (Internet Service Provider lime World Link, Mercantile, Everest Net etc.)
Uses of Internet
The world wide scope of the internet is the single most valuable tool for use in many significant ways by
either non-profit and commercial organization, or individuals. Internet can be used especially as a
cheapest and fastest means for the following four reasons;
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 395.
1. Search and retrieve the useful information.
2. Provide or disseminate information to others.
3. Compile information such as public poll, and survey.
4. direct telecommunication people to people.
Some of the important current strategic uses of the internet can be described as follows:
1. Communication: Computer users around the world extensively use the email, messenger, video-
conferencing or web-conferencing, and face book services on the Internet to communicate with each
other. Instant messaging and chat, peer-to-peer communication, can be used for sharing and
communication. Even the telephone conversation, video phone, and internet radio are also becoming
popular. The emergence of voice over internet protocol posed a threat on standard telephone
communication (PSTN) by bypassing it. Therefore, Internet has become the most popular, effective,
reliable, and fastest tool of communication. Different types of internet based communication tools
are;
• Email
• Messenger and chat
• Internet phone and voip
• Web-conferencing
• News groups
• Facebook and Blogs etc
2. Software Sharing: The Internet provides access to a large number of shareware software,
development tools, and utilities. There are so many free sites which provide facility to download the
needed software like Antivirus, Zip, Messenger, Multimedia file and many more.
3. News and Exchange of Views: The internet has a number of worldwide news groups. News groups
are specialized forums in which users with a common interest can exchange information. News
groups can be on technical or non technical topics including politics, religion, science, history,
entertainment etc. Unlike messenger or chats service, News groups are not real time, and a person
can post a message which can be viewed by others whenever they log in. Each news group has its
own style and customs. For example, comp.os.os2.advocasy contains views about the os/2, Face
book, etc.
4. Posting of information of general interest: Many users use the internet as a large electronic bulletin
board on which information of general interest can be posted to bring it to the attention of interested
users around the world. For example, the information about career opportunities, conference, event
announcements etc are mainly use of internet in present scenario.
5. Product Promotion and Feedback: Several commercial organizations use the internet services for
promoting their products effectively as well as getting feedback from them. Many online
advertisements, product brochures, specifications, price, new arrivals etc can be found online.
6. Customer support service: Many organizations also use the internet to provide timely customer
support. The combined e-mail, ftp, chat, call service and other services on the internet provide
necessary enabling tools for such fast rate customer support.
7. Online journals and magazines: Many online journals, magazines, news papers, articles, reports,
books etc., both free of cost and on payment, can be easily accessed. The internet now has literally
thousands of electronic subscriptions found online both for free and low cost. One can read online or
download into his computer.
Approved by Curriculum Development Centre (CDC), Nepal
.396 … Computer Science–I
8. Electronic Commerce and Online Shopping: The internet has also facilitated the introduction of a
new market concept consisting of virtual shops. These shops remain open 24 hours all the year
round, and are accessible to purchasers all around the world. They provide information about
products or services for sale through www servers. One can order the product online by filling up
the purchase order form, pay online using credit cards, and receive the acknowledgement online; and
get the product delivered to his/her home.
9. World wide videoconference: World wide video conferencing and web conferencing are emerging
services on the internet allowing a group of users located around the globe to talk and interact with
each other as if they were sitting and discussing in a single room, by using a web camera or
conferencing camera, microphone and the computer.
10. Online Banking: Now most of the banks provide the web account so that all the related information
can be easily seen while sitting anywhere around the world, not only seeing the information, even
money can be transferred from one place to another other without going to the bank. The cash
withdraw from any bank anywhere is also possible due to online connection of banks and user
accounts.
11. Online Education: Now days, many universities are providing the formal education and training
through Internet. Universities provide all the information in their web sites. One can get admission
online by filling online application form, send academic credentials in digitized form, get acceptance
letter and pay online, get learning materials, complete assignment and get teachers' feedback online,
and even he or she can appear in exam and get the result online. This has made the worldwide
education possible and, gets the universally recognized degrees from renowned universities and
colleges.
12. Remote Login : It means the service through which the user anywhere on the Internet can log on to
any other computer on which he/she has an account. This can be done using telnet, rlogin or ssh
programs.
13. File Transfer : FTP programs can be used to copy or transfer files from one computer to another on
the Internet. We can upload our files into our websites, hosted on ISPs servers, using FTP.
14. Interactive Entertainment: Interactive entertainment is gaining popularity among all groups of
people. Video on demand, multimedia’s, movies and songs can be accessed in an interactive
environment, take part in live shows or discussions, quizzes, electronic gambling etc.
15. Information anywhere anytime: Any person having Internet access can get any information anytime
from anywhere in the world. Irrespective of the type of user such as home, business, mobile or social
worker, user can access digital libraries, radio or TV programs, music, learning or teaching materials,
information on food and clothing, goods and services, or any other information.
16. World Wide Web: The World Wide Web is simply referred to as Web. It is the latest addition to the
Internet to exchange information. The Web is vast network of HTTP servers (Web servers) that store
documents called Web pages and these are accessible on the Internet. It is abbreviated as www or
3w. It is the easiest way to search and get the desired information on the Internet.
Internet has revolutionized the world by converting it into a small global village. Accessing or
disseminating information is simple, fast, effective and efficient. It is a huge source of information
and its applications are diverse. Despite many advantages, Internet does have few disadvantages or
negative effects as well on social, political, ethical and business sectors. Some of the most serious
disadvantages are;
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 397.
a. Web site hacking, piracy, credit card number and bank account hacking and theft.
b. Virus attacks, spy ware, spasm, email bombing etc
c. Miss-use of news groups, chats and emails like use of offensive messages against race, sex,
religion or politics, sending offensive or abusive photographs, pronographs etc.
d. Children and teenagers are also excessively involved in chatting, messaging, face book, and
others wasting their valuable time and becoming web addicts.
e. Many crimes are committed using online means such as threatening peoples, abusing others, etc.
Concept of protocols
A communication protocol is an agreement between the communicating parties on how communication is
to proceed. The agreement between parties specifies a common language two computers use to exchange
messages. Through the protocol only, the actual transfer of data occurs. There are numerous varieties of
networks which are incompatible with each other. The protocol provides ability to connect multiple
incompatible networks in a seamless way. For example, a protocol specifies the exact format and meaning
of each message that a computer can send. It also specifies the conditions under which a computer should
send a given message and how a computer should respond when a message arrives. Different types of
protocols are used in Internet such as Internet Protocol (IP) and Transmission Control Protocol (TCP). A
computer connected to the Internet needs both TCP and IP software. IP provides a way of transferring a
packet from its source to destination and TCP handles the lost data grams and delivery of data grams.
Together, they provide a reliable way to send data across the Internet. Since IP and TCP are the major
protocols used by networks, especially by the Internet, the following discussion is focused on IP and TCP.
The protocol determines the following;
• The type of error checking to be used.
• Data compression method.
• How the source will indicate that it has finished sending messages.
• Acknowledgement mechanism etc.
Internet Protocol (IP)
The Internet protocol specifies the rules that define the details of how computers communicate across a
packet switched internetworks. IP is the primary protocol in the Internet Layer of the Internet Protocol
Suite and has the task of delivering distinguished protocol datagram (packets) from the source host to the
destination host solely based on their addresses. It specifies exactly how a packet must be formed and how
a router must forward each packet on toward its destination. Internet Protocol (IP) is the protocol by
which data is sent from one computer to another on the Internet. Each computer (known as a host) on the
Internet has at least one IP address that uniquely identifies it from all other computers on the Internet.
When sending or receiving data, the message gets divided into small chunks called packets. Each of these
packets contains both the senders Internet address and the receiver’s address. The packet that follows the
IP specification is called an IP datagram. The Internet sends an IP datagram across a single network by
placing it inside a network packet. For the network, the entire IP datagram is data. When the network
packet arrives at the next computer, the computer opens the packet and extracts the datagram. The
receiver examines the destination address on the datagram to determine how to process it.
When a router, determines that the datagram must be sent across another network, the router creates a
new network packet, encloses the datagram inside the packet and sends the packet across another network
toward its destination. When a packet carrying a datagram arrives at its final destination, local software on
the machine opens the packet and processes the datagram. Because a message is divided into a number of
packets a different route can be used to send each packet across the Internet. Packets can arrive in a
Approved by Curriculum Development Centre (CDC), Nepal
.398 … Computer Science–I
different order than the order they were sent in, but can be regrouped based on their sequence number. IP
is a connectionless protocol, which means that there is no established connection between the end points
that are communicating. Each packet that travels through the Internet is treated as an independent unit of
data without any relation to any other unit of data. The lack of reliability in a connectionless protocol
allows any of the following fault events to occur:
• data corruption
• lost data packets
• duplicate arrival
• out-of-order packet delivery
The IP performs the following;
• Envelopes (packets) and addresses the data.
• Enables the network to read the envelope and forward the data to its destination.
• Defines how much data can fit in a single packet.
Transmission Control Protocol (TCP)
TCP makes the Internet reliable. It is often described as a byte stream, connection-oriented, reliable
delivery transport layer protocol. TCP solves many problems that can occur in a packet switching system.
TCP provides multiplexing, de-multiplexing, and error detection (but not recovery). A TCP connection
provides for full duplex data transfer. That is, application-level data can be transferred in both directions
between two hosts - if there is a TCP connection between process A on one host and process B on another
host, then application-level data can flow from A to B at the same time as application-level data flows from
B to A.
Whereas IP handles lower-level transmissions from computer to computer as the message makes its way
across the Internet, TCP operates at a higher level, concerned only with the two end systems, for example a
Web browser and a Web server. In particular, TCP provides reliable, ordered delivery of a stream of bytes
from a program on one computer to another program on another computer. Besides the Web, other
common applications of TCP include e-mail and file transfer. Among other management tasks, TCP
controls segment size, flow control, and data exchange rate. TCP connection is also always point-to-point.
TCP provide the following facilities:
• TCP eliminates duplicate data.
• TCP ensures that the data is reassembled exactly in the same order as it was sent .
• TCP resends data when a datagram is lost.
• TCP uses acknowledgements and timeouts to handle problem of loss.
The main features of TCP are:
Reliability: TCP ensures that any data sent by a sender arrives at the destination as it was sent. There
cannot be any data loss or change in the order of the data. Reliability at the TCP has four important
aspects:
• Error Control
• Loss control
• Sequence control
• Duplication control
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 399.
Connection-oriented: TCP is connection-oriented. Connection-oriented means a connection is established
between the source and destination machines before any data is sent i.e. a connection is established and
maintained until such time as the message or messages to be exchanged by the application programs at
each end have been exchanged. The connections provided by TCP are called Virtual Connections. It means
that there is no physical direct connection between the computers.
TCP is used along with the Internet Protocol to send data in the form of message units between computers
over the Internet. While IP takes care of handling the actual delivery of the data, TCP takes care of keeping
track of the individual units of data (called Packet), that a message is divided into units for efficient
routing through the Internet. TCP provides a reliable, connection-oriented data transmission channel
between two programs. Reliable means that data sent is guaranteed to reach its destination in the order
sent or an error will be returned to the sender.
For example, when an HTML file is sent to someone from a Web server, the Transmission Control Protocol
(TCP) program layer in that server divides the file into one or more packets, numbers the packets, and
then forwards them individually. Although each packet has the same destination IP address, it may get
routed differently through the network. At the other end (the client program in our computer), TCP
reassembles the individual packets and waits until they have arrived to forward them as a single file.
HTTP and World Wide Web
One of the most commonly used services on the Internet is the World Wide Web (WWW). The application
protocol that makes the web work is Hypertext Transfer Protocol or HTTP. HTTP is the protocol that web
browsers and web servers use to communicate with each other over the Internet. It is an application level
protocol because it sits on top of the TCP layer in the protocol stack and is used by specific applications to
talk to one another. In this case the applications are web browsers and web servers. HTTP is a
connectionless text based protocol. Clients (web browsers) send requests to web servers for web elements
such as web pages and images. After the request is serviced by a server, the connection between client and
server across the Internet is disconnected. A new connection must be made for each request. Most
protocols are connection oriented. This means that the two computers communicating with each other
keep the connection open over the Internet. HTTP does not however. Before an HTTP request can be made
by a client, a new connection must be made to the server.
FTP (File Transfer Protocol)
FTP is a standard Internet protocol, and is the simplest way to exchange files between computers on the
Internet. Like the Hypertext Transfer Protocol which transfers displayable Web pages and related files,
FTP is an application protocol that uses the Internet's TCP/IP protocols. FTP is commonly used to transfer
Web page files from their creator to the computer that acts as their server for everyone on the Internet. It's
also commonly used to downloading programs and other files to the computer from other servers.
However, for such transfer we need an account name on a host and the password. The FTP program will
make connection with the remote host, which will help us to browse its directories and mark files for
transfer. However, we cannot look at the contents of a file while connected via FTP. We have to transfer
the copy and then look at it once it is on our own account.
Telnet
TELNET stands for Terminal Network. Telnet is both a TCP/IP application and a protocol for connecting a
local computer to a remote computer. Telnet is a program that allows an Internet host computer to become
a terminal of another host on the Internet. Telnet is the Internet remote login service. Telnet protocol
specifies exactly how a remote login interacts. The standard specifies how the client contacts the server
and how the server encodes output for transmission to the client. To use the Telnet service, one must
invoke the local application program and specify a remote machine. The local program becomes a client,
which forms a connection to a server on the remote computer. The client passes keystrokes and mouse
Approved by Curriculum Development Centre (CDC), Nepal
.400 … Computer Science–I
movements to the remote machine and displays output from the remote machine on the user’s display
screen. Telnet provides direct access to various services on Internet. Some of these services are available on
users' host, but Telnet is especially useful when these services are not available on users' host. For
example, if the user wants to use graphical interfaces designed by other users, then Telnet allows accessing
their hosts and using their new interfaces. Similarly, whenever someone creates a useful service on his
host, Telnet allows accessing this valuable information resource. This tools Is especially useful for
accessing public services such as library card catalogues, the kind of databases available on the machine tc.
User can also log into any catalogue service of a library and use it.
CONTENT MANAGEMENT SYSTEM (CMS)
A content management system is for creating, managing, and optimizing your customers’ digital
experience. It is an application that is used to manage web content, allowing multiple contributors to
create, edit and publish. Content in a CMS is typically stored in a database and displayed in a presentation
layer based on a set of templates. It is an interactive and dynamic system.
More specifically, a CMS is a software application that allows users to collaborate in the creation, editing,
and production of digital content: web pages, blog posts, etc. The CMS (or WCMS—web content
management system) is evolving from just helping you launch digital content to a more robust system that
is core to managing an overall digital experience across many different channels, such as email, mobile
apps, social media, web sites, and more.
Any basic solution for web content management helps you upload or write content, format it, add
headlines and images, and do a number of backstage things like SEO (Search Engine Optimization). But in
a multi-device, user-centric world, that’s not enough. Digital marketing has evolved, focusing more deeply
on customer experience while incorporating mobile apps, the Internet of Things, and more. It is all that
depends on a web content management system that separates content management from content
presentation.
Generally users can rely on CMS software to run any of these types of sites:
1. Blogs
2. News sites
3. Ecommerce sites
4. Corporate websites
5. Intranets
Key features in a CMS/WCM
The standard CMS/WCM having important efficiency, capacity and capabilities in a content management
system that will include:
1. Content management: How, and how easily, can you create, edit, post, and manage web content
(including text, images, video, and audio)?
2. Presentation: Customers jump from device to device, and no marketing org can put human effort
into optimizing every blog post or catalog page for laptop, tablet, and top smart phone formats. You
want to create it once and have the CMS automate the presentation to suit the device.
3. Integration: Is the solution holistic , like Sitecore’s Experience Platform, or does it rely on APIs to
connect your content to other applications, such as CRM and ERP tools, and to crucial external
platforms such as Facebook? Are the APIs you’re going to need available?
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 401.
4. Commerce: A crucial integration is being able to connect a personalized marketing presentation to
your digital commerce systems. You can’t address the “customer journey” if you leave this
destination off your map.
5. Personalization: Can it target relevant content to unique visitors, by persona, location, or even
individually based on past interaction with your brand?
6. Analytics: You’re serving up content, but is anyone reading it? And what do they do next? Demand
visibility into performance so you can optimize your efforts and define ROI.
7. Governance: Can you find stuff after you post it? Can you strictly control who’s allowed to approve
it, change it, publish it, take it down? Can you tell when content has aged out of usefulness?
8. Multilingual support: Are you translating into other languages and publishing globally? Can the
solution support that?
9. Scalability/Performance/Stability: Is the solution reliable from a fundamental technology
standpoint, and will it grow with your organization’s needs?
10. Training/vendor support: WCM solutions are increasingly complex, with ever-greater promises, but
most teams need help to get up and running beyond a basic level.
There are number of CMS application available in web, here just some popular used CMS present as an
example in this book such as WordPress, Drupal, Joomla, etc.
All three are open-source projects written in PHP and use the MySQL database management system.
WordPress
WordPress was originally conceived as a blogging platform. This day, WordPress still maintains a
preference for a dated-post style of presentation. It is not just the most popular Content Management
System in use. It is one of the most popular and commercially successful open source development
projects in the world. The huge user and developer base mean there are an extremely large number of
themes and plugins, both free and premium, and there is an abundance of online help and tutorial
material available. The variety of themes and plugins makes it extremely customizable and capable of
handling almost any content-driven use case.
Drupal
Drupal is the most popular CMS that does not carry an inherent bias towards blog posts as the primary
form of content (though it can be used for blogs). Drupal is partly inspired by the GNU/Linux project, so
the base installation has only a small “kernel” of functionality.
Almost everything else even the basic features typically used by everyone are built as separate modules.
This means that there is no technical difference between core functionality and added “plugin”
functionality, which helps to put all types of content features on equal footing.
Drupal can be launched and used by anyone, but it is certainly geared toward people with tech skills who
want to create a fully-customized deployment.
Joomla
Joomla provides the inherent flexibility of Drupal with the ease of use of WordPress.
This makes it a very attractive option for many medium-size enterprise deployments where WordPress is
not seen as generally powerful enough.
Even so, the organization simply does not have the ongoing technical resources (or staff) to maintain a
complicated Drupal site. Joomla is definitely considered to be a contender for the most popular CMSs out
there. It is responsible for a large proportion of live websites. Joomla is written in PHP and is statistically
the second most popular CMS globally. According to official sources, there has been an excess of 50
million software downloads of Joomla.
Approved by Curriculum Development Centre (CDC), Nepal
.402 … Computer Science–I
HTML: WEB PAGE DESIGNING LANGUAGE
Today, we have access to a wide variety of information through web sites on the Internet. We can access a
web site, if we have a connection to the Internet and a browser on our computer. A web site contains
information about the business for which it is designed. The information can be in the form of text,
graphics, photos and multimedia but is not always necessary. The basic guideline to be followed while
designing a site is the simplicity of the presentation. The layout of the web site should be such that
information can be easily and quickly accessed.
When we connect to a Web site, our browser is presented with a file in a special format by the Web server
on the remote computer. The contents of the file are stored in a special format using Hyper Text Markup
Language. This format is provided, or interpreted, by the browser and we then see the page of the web site
from our computer.
HTML can be used to display any type of document on the host computer, which can be geographically at
a different location. It is a versatile language and can be used on any platform or desktop. Being platform-
independent, HTML indicates the manner in which the document is to be read by the interpreter. This can
be done by a set of HTML elements, which mark-up the document and inform the browser, like the
Internet Explorer, about the action to be taken when a certain element is specified.
The appearance of a Web page is important, and HTML provides tags to make the document look
attractive. Using graphics, fonts, sizes, and colors, presentation of a document can be enhanced. This
language allows the creation of hypertext links, also known as hyperlinks, to other documents or some
portion of the same document. Any type of information can be published through the Web pages by using
this versatile language.
INTRODUCTION TO HTML
HTML stands for Hyper Text Markup Language. It was invented in 1990 by a scientist called Tim Berners-
Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's
research documents. HTML is one language in a class of markup languages, the most general form of
which is Standard Generalized Markup Language (SGML). SGML was developed to create documents
that could be displayed consistently on computers of different hardware and operating system. Since
SGML was complex, HTML was invented as a simple way of creating web pages that could be easily
accessed by any browsers. HTML is a special case of SGML. HTML consists of tags and data. The tags
serve to define what kind of data follows them, thereby enabling the browser to provide the data in the
appropriate form for the user to see.
HTML provides a way of displaying Web pages with text and images or multimedia content. HTML,
actually, is not a programming language, but a markup language. An HTML file is a text file containing
small markup tags. The markup tags tell the Web browser, such as Google Chrome, Mozilla Firefox,
Internet Explorer or Netscape Navigator, how to display the page. An HTML file must have an .htm or
.html file extension. These files are stored on the web server. So, to see the web page of a company, URL
(Uniform Resource Locator) should be entered, which is the web site address of that company, in the
address bar of the browser. This sends a request to the web server, which in turn responds by returning
the desired web page. The browser then provides the web page and we see it on your computer.
HTML allows Web page publishers to create complex pages of text and images that can be viewed by
anyone on the Web, regardless of what kind of computer or browser is being used. If we want to create
Web pages, we need a tool to write the HTML code for the page. This can be a simple text editor if you are
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 403.
hand-coding HTML. There are sophisticated HTML editors available that automate many (though not all)
of the tasks of coding HTML. We also need a browser to be able to render our code so that we can see the
results.
Basics of HTML are easy to learn and use. However, we can use a simple tool like Microsoft FrontPage
which reduces the need to remember and type in HTML tags. Still, there can cases where we need to hand
code certain parts of the web page.
HTML is just a series of tags that are integrated into a document that can have text, images or multimedia
content. HTML tags are usually English words (such as block quote) or abbreviations (such as p for
paragraph), but they are distinguished from the regular text because they are placed in small angle
brackets. So, the paragraph tag is <p>, and the block quote tag is <blockquote>. Some tags dictate how the
page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words
appear (<b> makes text bold). Still others provide information - such as the title - that doesn’t appear on
the page itself. The first thing to remember about tags is that they appear in pairs. Most of the time when
we use a tag - say <blockquote> - you must also close it with another tag - in this case, </blockquote>.
Note the slash - / - before the word “blockquote”; that is what distinguishes a closing tag from an opening
tag.
The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two
sections - the header and the body.
The header - enclosed by the <head> and </head> tags - contains information about a page that will not
appear on the page itself, such as the title. The body - enclosed by <body> and </body> - is where the
action is written. Everything that appears on the page is contained within these tags.
Therefore, HTML is used to construct formatted pages for the web known as Web Pages. It comprises of:
1. Markup Language: It refers to the tags which specify how to incorporate text, graphics, and sound
and also control visual elements such as fonts, font size, and paragraph spacing. Markup is what
HTML tags do to the text inside them. They mark it as a certain type of text (italicized text, for
example).
2. Web Page Content: It is the actual text information that is displayed on the page. HTML consists of a
series of short codes or tags typed into a text-file and saved as a .html file by the site author This
browser reads the file and translates the text into a visible form, hopefully rendering the page as the
author had intended. The fact that it is hyper just means it is not linear i.e. we can go to any place on
the Internet whenever we want by clicking on links — there is no set order to do things in.
HTML pages are of two types: Static pages and dynamic pages.
a. Static Pages: Static pages, as the name indicates, comprise static content (text or images). So you
can only see the contents of a web page without being able to have any interaction with it.
b. Dynamic Pages : Dynamic pages are those where the content of the web page depend on user
input. So interaction with the user is required in order to display the web page. For example,
consider a web page which requires a number to be entered from the user in order to find out if
it is even or odd. When the user enters the number and clicks on the appropriate button, the
number is sent to the web server, which in turn returns the result to the user in an HTML page.
This feature can be support with the concepts of FORM.
There are many tags in HTML, of which the few most important ones are introduced in this
unit.
Approved by Curriculum Development Centre (CDC), Nepal
.404 … Computer Science–I
The objective of the use and study of this HTML scripting language is to make the formatted
web pages with minimum knowledge and efforts. What can be done, capability and power with
this HTML will know at the end of this unit?
Advantages of HTML
The advantages of HTML are;
• HTML is a simple, easy to learn and use but powerful formatting language. The simplicity of HTML
allows anyone with basic knowledge of computer to create web pages.
• The web pages can be linked using links. Therefore, controlled navigation is possible. Therefore, long
documents can also be easily read.
• The pages can be easily updated and the appropriate links can be used without caring anything
about whether the links will be affected or not.
• It can run in any platform and with any browser.
• HTML codes can be written in any text editor such as Notepad, WordPad, etc.
Disadvantages of HTML
HTML is not a programming language, and hence, it does not have any programming capabilities and
cannot provide anything more than formatted text, pictures and sound. Therefore, it demands for other
programming and scripting languages to be used along with it such as Perl, Java and Java scripts.
STRUCTURE OF HTML
HTML is a structure based web page designing scripting language which has specific structure start from
HTML tag and contains heading part and body part clearly separated with head tag and body tag lastly
ended with closing HTML tag.
Basic Structure of HTML Document
The skeleton of HTML Document is;
<HTML> } Heading Section
<HEAD>
………..
………..
</HEAD> } Actual Text (Contents)
<BODY>
………..
………..
</BODY>
</HTML>
In every HTML document <HTML> and </HTML> tags marks the beginning and the end of the
document. These tags inform the browser that the document is an HTML file. All other HTML tags must
come within <HTML>….</HTML> tags.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 405.
The HTML document can be divided into two sections:
1. Header section, and
2. Body section
1. Header or Header Section: HTML includes a pair of tags, <HTML> and </HTML> to identify the
heading or title of a document.
The tag <TITLE>….</TITLE> can appear only in this section. The text that exists between the title
tags, appears as the title in the browser's window and length of it should not exceed beyond 60
characters.
2. Body Text: The body of an HTML document contains the text that will be displayed on the web page.
It gives a description of the document's layout and structure. The structure of a HTML document is
shown in the figure 6.3.
Figure: 6.1 Structure of HTML
<HTML> HEAD
<HEAD> BODY
<TITLE>Computer Science</TITLE>
<H1>Introduction</H1>
</HEAD>
<BODY>
<P>Computer is an electronic device</P>
<P>It is Versatile in nature</P>
</BODY>
<HTML>
The above code displays the title of the browser window as "Computer Science" and the heading of the
document as Introduction. The actual text in the document will be "Computer is an electronic device" and
"It is versatile in nature". The output of the above code is displayed in the internet browser as shown in
the figure 6.5.
Figure: 6.2 Internet Explorer
HTML files include both control information (HTML tags) and the content (text), which together
describe the appearance and contents of web pages. In addition, each of these tags can have their
own settings called attributes.
Approved by Curriculum Development Centre (CDC), Nepal
.406 … Computer Science–I
PUBLISHED AND HOSTING
Web Publishing
Web publishing, or "online publishing," is the process of publishing content on the Internet. It includes
creating and uploading websites, updating web pages, and posting blogs online. The published content
may include text, images, videos, and other types of media.
Before published we need to first think about sequence of plan and schedule:
1. Plan a web site.
2. Analyze and design a web site.
3. Create a web site.
4. Deploy a web site.
5. Maintain a web site.
In order to publish content on the web, you need three things:
1. Web development software
2. An Internet connection, and
3. A web server.
Web Hosting
Web hosting means, hosting provider allocates space on a web server for a website to store its contents of a
files, they are hosting a website.
Web hosting is an online service that enables you to publish your website or web application on the
Internet. When you sign up for a web hosting service, you basically rent some space on a physical server
where you can store all the files and data necessary for your website to work properly.
In order to get a website active and live on the internet, you need to host a website. If you are seeking to
build a website without taking web hosting services, registering domain names will serve no purpose.
A web hosting company makes it possible for your website to be accessed by everyone on the web.
It means buying the physical space of server for the availability of the individual or organization
information publically around the world. To host the files in web, web hoster takes cost as per the features
and services provided. May host free of cost conditionally.
Types of Web Hosting
Hosting is categorized on the basis of space and facility available. Here are some of the types of hosting
are:
1. Shared hosting: Shared hosting is the sharing of the same resources by multiple users. It is perfect
for small and entry-level website hosting. It offers the most cost-effective way to get a site online. It is
popular because of the most cost-effective option.
2. Virtual private server (VPS) hosting: VPS hosting is one of the most popular hosting services that
can choose for our website. It uses virtualization technology to provide with dedicated (private)
resources on a server with multiple users. Its hosting plan is the ultimate middle ground between a
shared server and a dedicated server.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 407.
3. Dedicated server hosting: Dedicated hosting is a term used to describe web hosting packages that
provide a dedicated server with dedicated resources to a single client. Dedicated hosting plans are
ideal for WordPress websites with very large number of visitors. Dedicated hosting plans are ideal
for large organizations or websites with much higher traffic. The clients get full control of the server
which allows them to configure it to meet their own needs.
4. Cloud hosting: Cloud web hosting is hosting that uses the resources of several clustered servers.
Basically, this means that the websites uses the virtual resources of several servers to accommodate
all the aspects of hosting the site. The load is balanced, security is taken care of and hardware
resources are available virtually so they can be used when needed. The cluster of servers is the cloud.
5. Managed hosting: In managed hosting, a hosting company handles the setup, administration,
management, and support of a server and applications. Management services vary from host to host
but typically include OS updates and patching 24/7/365 support, network infrastructure and
hardware management, basic security measures including virus and spam protection, and
monitoring and remediation of anything that could affect the performance of the server.
The company’s job to ensure their client’s websites and applications stay up and running at all times,
and these guarantees are typically backed by a Service Level Agreement.
6. Colocation: Colocation hosting is a type of service a data center offers, in which it leases space and
provides housing for servers. The clients own the servers and claim full authority over the hardware
and software. However, the storage facility is responsible for maintaining a secure server
environment.
TYPES OF TAGS
Tags are labels that are used to mark up the beginning and end of an element. All tags have the same
format, they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there
are two kinds of tags - opening tags and closing tags; and some content between them. The only difference
between an opening tag and a closing tag is the forward slash "/". We label content by putting it between
an opening tag and a closing tag. Therefore, most of the tags always occur in pairs.
Let us now look at tags in more detail. A <TAG> tells the browser to do something. An ATTRIBUTE goes
inside the <TAG> and tells the browser how to do it. A tag can have several attributes. Tags can also have
default attributes. The default value is a value that the browser assumes if you have not told it otherwise.
A good example is the font size. The default font size is 3. If you say nothing, the size attribute of the font
tag will be taken to have the value 3.
Consider the example shown in Figure. 6.3. Type the code specified in the figure in a text editor such as
notepad and save it as “fig1.html”. To render the file and see your page you can choose one of two ways:
1. Find the icon of the html file you just made (fig1.htm) and double click on it. Or,
2. In Internet Explorer, click on File/Open File and point to the file (fig1.htm).
Approved by Curriculum Development Centre (CDC), Nepal
.408 … Computer Science–I
Figure: 6.3 A Simple Web Page
<HTML>
<!- - This is a comment - - >
<HEAD>
<TITLE> NEB</TITLE>
</HEAD>
<BODY>
This is my first web page.
</BODY>
</HTML>
The different types of basic tags that are used to design a web page are described below.
Html Tag
As shown in Figure.6.3, <HTML> is a starting tag. To delimit the text inside, add a closing tag at the end
by adding a “/” to the starting tag. Most but not all tags have a closing tag. It is necessary to write the code
for an HTML page between <HTML> and </HTML>. Opening tag <HTML> means telling the browser
that 'this is the start of an HTML document' and, </HTML> means 'this is the end of an HTML document'.
Now we need to put some matter in between these two markers.
Every HTML document is segregated into a HEAD and BODY. The information about the document is
kept within <HEAD> tag. The BODY contains the page content.
Head and Title Tag
The headlines tags are used to display headings on the web page in various sizes. These tags can be used
to provide main and sub-headings. HTML document supports six levels of heading tags <H1> to <H6>,
<H1> being the largest and <H6> the smallest in size. Another tag within the HEAD tag is TITLE tag.
<HEAD> <TITLE> Computer Science </TITLE> </HEAD> as shown in fig 6.2 and 6.3. Here, the
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 409.
document has been given the title ' Computer Science'. It is a good practice to give a title to the document
created. This is the minimum required information for a web document and all web documents should
contain these basic components. Secondly, the document title is what appears at the very top of the
browser window, that is, at the title bar.
Each of the headings <H1> to <H6> always begins on a new line. HTML tags have some additional
parameters called arguments or attributes to increase the functionality of the tags.
Body Tag
All the content to be displayed on the web page has to be written within the body tag. So whether text,
headlines, textbox, checkbox or any other possible content, everything to be displayed must be kept within
the BODY tag as shown in Figure 6.2.
Whenever the document is changed, just save it and hit the Reload/Refresh button on the browser. In
some instances just hitting the Reload/Refresh button doesn’t quite work. In that case, it is necessary
clicking Reload/Refresh button while holding down the SHIFT key.
The BODY tag has following attributes:
a. BGCOLOR: It can be used for changing the background color of the page. By default the background
color is white.
b. BACKGROUND: It is used for specifying the image to be displayed in the background of the page.
c. LINK: It indicates the color of the hyperlinks, which have not been visited or clicked on.
d. ALINK: It indicates the color of the active hyperlink. An active link is the one on which the mouse
button is pressed.
e. VLINK: It indicates the color of the hyperlinks after the mouse is clicked on it.
f. TEXT: It is used for specifying the color of the text displayed on the page.
Meta Tag
This is the tag which is used to make the web site or its content searchable in the internet, rather than
creating the content on the web page. Search engines such as Google are used to look for web pages on a
topic of interest. The META Tag comes in useful if we want to make the web page to be easily locatable by
search engines. When we enter a search string, the search engine shows web pages containing that string,
provided the web page has used those in META tag appropriately. The search engine interacts with the
META tag of the HTML page in order to find the required string. Information inside a Meta element
should be such that it should be able to describe the document. Consider the following example.
<HTML>
<HEAD> <TITLE>NEB</TITLE>
<META NAME="author" CONTENT="NEB"> <META NAME="description " CONTENT="This
website shows you the different courses offered by NEB"> <META NAME="keywords "
CONTENT=" Website, different courses offered, NEB,mca,bca"> </HEAD> <BODY> <P> The meta
attributes of this document identify the author and courses offered. </P> </BODY>
</HTML>
Approved by Curriculum Development Centre (CDC), Nepal
.410 … Computer Science–I
Figure: 6.4 Using the META Tag
Meta tags have two attributes;
NAME: This attribute is used for identifying the type of META tag that is included.
CONTENT: This attribute is used to specify the keywords that the search engine catalogs. Consider
the following code of the example shown above;
<META NAME= “description” CONTENT="This website shows you the different courses offered by
NEB">.
The CONTENT attribute provides the list of words in the form of a sentence to the search engine. So
if someone searches for one of the keywords listed in the META tag, then the web site would also
appear in the result of the search. It is useful to include META tags that include as many keywords as
possible. This makes the web page more likely to show up in a search.
We can also specify keywords by separating them by commas as shown in the following code
fragment;
<META NAME= “keywords” CONTENT= “Website, different courses offered, NEB”>
Either the methods of specifying the META tag can be used, as convenient.
This demonstrates how to redirect a user if the site address has changed.
<HTML> <HEAD> <TITLE>NEB</TITLE> <META HTTP-EQUIV="Refresh" CONTENT=>
</HEAD> <BODY> <P> Sorry! We have moved! </p> <p> you will be redirected to the new
address in five seconds. </p> </BODY> </HTML>
Consider the following code <META HTTP-EQUIV= “Refresh” CONTENT=5; URL=”http://
www.NEB.edu.np”> It indicates to the browser that the page has to be refreshed in 5 seconds with
the new URL “http://www.NEB.edu.np”. So, when the user sees this page by specifying its original
URL, the browser is redirected to the webpage “www.NEB.edu.np” after five seconds. This type of
redirection is useful when you want that a user accessing your old website should automatically be
redirected to the new website address.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 411.
CHARACTER FORMATTING
Character formatting, in other words, presenting the text on an HTML page in a desired manner is an
important part of creating a web page. Let us understand how we can manage the text controls to change its
appearance on a page. There are many tags which can be used to format characters on a page. Some of the
commonly used characters formatting tags are concerned with Background color, Background image, font
size, font style, text alignment, horizontal line, line break, font color, multi column text, gutter, width etc. All
of these tags are used for formatting characters related with the Headings, Paragraphs or the body text.
Formatting Heading
Headers are used to specify the headings of sections or sub-sections in a document. Depending on the
desired size of the text, any of six available levels (<H1> to <H6>) of headers can be used. Figure 6.5 shows
the usage and varying size of the rendered text depending upon the tag used.
<HTML>
<HEAD>
<TITLE> NEB</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Header Level 1</H1>
<H2> Header Level 2</H2>
<H3> Header Level 3</H3>
<H4> Header Level 4</H4>
<H5> Header Level 5</H5>
<H6> Header Level 6</H6>
</CENTER>
</BODY>
</HTML>
Figure: 6.5 Rendering of the Six Header Levels
Approved by Curriculum Development Centre (CDC), Nepal
.412 … Computer Science–I
There is no predefined sequence for using the different levels of the header tags, nor any restrictions
on which one can be used. So, the user has the option of using any level of header tag anywhere in
the document.
Attributes of Heading Tag:
The headings are generally left aligned. But, we can change the alignment to right or center by using
ALIGN attribute of the heading tag. The syntax is;
<H1 ALIGN="….">Introduction</H1>
Here, the space within the inverted commas can contain either of LEFT, CENTER or RIGHT.
To center the text on a page, use the CENTER tag. The text written between <CENTER> and
</CENTER> tag gets aligned in the center of the HTML page. As seen in Figure 6.6, the maximum
size of the text is displayed using the <H1> tag. So the size goes in decreasing order with the
increasing order of the level (i.e. From <H1> to <H6>).
Paragraphs Formatting Tags
Whenever we want to organize the text into paragraphs then we should use the paragraph HTML tag i. e.
<P>…</P>. We normally notice in a text document that the paragraphs appear with a blank line on the
top and in the bottom of the paragraphs. All this feature is set by specifying the beginning of the
paragraph by <P> tag and the end by </P> tag.
The paragraph tag by default displays a blank line both on the top and the bottom of the paragraph. But,
the blank lines or the end of line character inserted within a paragraph are ignored. to overcome this, the
<BR> tag can be used to insert a new line.
Attribute of Paragraph Tag:
The paragraph on the web page can be aligned by using "ALIGN" attribute of <P> tag.
The syntax is;
<P ALIGN="Value">
The possible values for ALIGN are LEFT, CENTER, and RIGHT.
Horizontal Line:
HR tag is used to put a horizontal line on the page. This tag does not have any closing tag.
The syntax is;
<HR>
Paragraph specification
<HR>
This code inserts a line above the paragraph and also a line below the paragraph. The <HR> tag has
several attributes, with which we can specify the width, color and thickness of the line. The attributes
of <HR> are;
ALIGN: It is used for aligning the line on the page. The possible values of this attribute are LEFT,
RIGHT, and CENTER. It is useful when the width of the line is less than the width of the page.
NOSHADE: This attribute is used to prevent any shading effect.
SIZE: It is used for specifying the thickness of the line.
WIDTH: You can set the width of a line using this attribute. The value can be specified either in
pixels or as a percentage of the width of the page, e.g., <HR WIDTH = “30%”>.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 413.
Text Formatting Tags
Every text on a web page can be formatted using various tags. They can be related with font setting,
alignment, setting columns, horizontal line, color, superscript, subscript, strike effect etc. The commonly
used text formatting tags will be discussed in this topic.
Font Setting Tag
Font setting tag in HTML can be used for text style specification. It provides the flexibility of changing the
characteristics of the font such as face, size, and color. Every browser has a default font setting that
governs the default font face, size and color. Normally, the default is Times New Roman 12pt with the
color being black.
The tag for font setting is <FONT>…</FONT>. It has three major attributes. They are;
1. FACE: It is used to set the font type of the text. The syntax is;
<FONT FACE="Value">
Text content
</FONT>
Here, the font FACE value can be Arial, Comic Sans, Preeti, Courier etc.
2. SIZE: This attribute is used to specify the size of the text. The syntax is;
<FONT SIZE="Value">
Text content
</FONT>
Font can be displayed in any of the 7 sizes. The possible values can be 1, 2, 3 and so on. Here,
<FONT SIZE="1"> indicates 8 pt size, 2 indicates 10 point, 3 indicates 12 point and so on.
3. COLOR: This attribute is used to specify the color of the text. By default, the color of the text is black.
If we specify the text color in the <FONT> tag then this value overwrite the color value, if any,
specified in the <BODY> tag.
The syntax is
<FONT COLOR="Value">
Text content
</FONT>
The possible colors can be red, green blue, yellow etc. We can specify the color by using name
or the hexadecimal value. The following table shows some of the possible color names and
their corresponding hexadecimal codes.
Approved by Curriculum Development Centre (CDC), Nepal
.414 … Computer Science–I
Color Name Hexadecimal Code
Red #FF0000
Green #00FF00
Blue #0000FF
White #FFFFFF
Table 6.5.1 Black #000000
Gray #808080
Font Color and Dark Red #800000
Hexadecimal code
Dark Green #008000
Dark Blue #000080
Yellow #FFFF00
Magneta #FF00FF
Cyan #00FFFF
<basefont> Tag
The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the
document that are not otherwise contained within a <font> tag. You can use the <font> elements to
override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative font setting by
giving size a value of +1 for a size larger or −2 for two sizes smaller.
For example,
<basefont face =”arial” size = “3” colo r= “red”>
<p> This is the page having default font.</p>
<big> and <small> Tags
With the help of <big> and <small> tags contents within will be increase or decrease the size of font.
For example,
<p> This is a normal text size. </p>
<p><small> The size of text is smaller. </small></p>
<p><big> The size of text is bigger. </big></p>
Consider the following example:
<HTML> <TITLE> NEB</TITLE> <BODY BGCOLOR="#1234567" TEXT = “#FF0000”>
Welcome to NEB </BODY>
</HTML>
The values specified for BGCOLOR and TEXT tags indicate the color of the background of the page and
that of the text respectively. These are specified in hexadecimal format. You also have the option of
specifying the color by giving its name, like:
<BODY TEXT = “WHITE”>.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 415.
We can also specify a background image instead. (Note that the image should be in the same folder as
your HTML file.).
<HTML>
<BODY BACKGROUND="cultivation.gif"> Welcome to NEPAL
</BODY>
</HTML>
The range of allowable values in this format is from “#000000” to “#FFFFFF”. The“#” symbol has to
precede the value of the color so as to indicate to the browser that has to be interpreted as a hexadecimal
value. In this six digit value, the first two digits specify the concentration of the color red, the next two
digits specify the concentration of the color green and the last two digits specify the concentration of the
color blue. So, the value is a combination of the primary colors red, green and blue and that is why it is
called RGB color. If we specify the value “#FF0000”, the color appears to be red.”#000000” gives black and
“#FFFFFF” gives the color white.
Consider the example shown in Figure 6.6.
<HTML>
<HEAD> <TITLE> NEB </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF"> <CENTER> Welcome to <FONT SIZE=6>NEPAL </FONT><BR>
Welcome to <FONT FACE = “ARIAL” SIZE=6>NEPAL </FONT><BR> Welcome to <FONT FACE =
“ARIAL” SIZE=6 COLOR = “BLUE”>NEPAL </FONT><BR> </CENTER> </BODY> </HTML>
Figure: 6.6 Using the FONT Tag
Let us look at the syntax of the <FONT> tag with its different attributes. <FONT FACE = “name” SIZE = n
color = #RGB >. In Figure 10.5, FONT NAME=Arial , SIZE= and COLOR=“Blue” has been used.
The other attributes are;
Approved by Curriculum Development Centre (CDC), Nepal
.416 … Computer Science–I
BOLD: The text can be displayed in boldface by writing it in between the <B> and </B> tags. ITALICS: It
starts with <I> and ends with </I> tag. It is used to display the text in italics. UNDERLINE: It is used for
underlining the text to be displayed. The <U> tag is used for this purpose. These tags can be nested. So in
order to see the text in boldface, in italics and underlined, it should be placed between the <B><I><U> and
</U></I></B> tags. Note that the closing tags are written in reverse order, because any tag used within
some other tag should be closed first.
TT: The <TT> tag is used for displaying text in a fixed width font similar to that of a typewriter.
STRIKE: To mark the text with a strikethrough character, place it within the <S> and </S> tags.
STRONG: There are certain text-based browsers that do not render the text as boldfaced. So we can use
the <STRONG> tag instead of the <B> tag. This displays the text to stand out in the most appropriate
manner for the browser.
EM: Just as the <STRONG> tag corresponds to the <B> tag, the <EM> can be used instead of the <I> tag.
The reason for using it is the same as for the <STRONG> tag. The <EM> tag is used for emphasizing the
text in the manner most appropriate to the browser.
BR: This tag is used for inserting a line break. The text written after the <BR> tag is displayed from the
beginning of the next line onwards. This tag does not need a corresponding terminating tag.
<mark> Tag
This is a tag which is used to highlight the given text of a document.
<p> Ram is a<mark> good </mark> boy. </p>
Output: Ram is a good boy.
<DIV> Tag:
The DIV tag is used for applying alignment and style characteristics to only a section of a document. The
syntax is;
<DIV ALIGN="Value"
Text
</DIV>
The possible values for DIV tag are LEFT, CENTER and RIGHT.
BLOCKQUOTE: This tag indents the left margin of the text. It is used for displaying the text as quoted
text.
Body Attributes:
The BODY tag has attributes that facilitates specifying characteristics features of the document like the
background color or an image. We can also specify the default text color.
<BGCOLOR>: It is used to specify the background color. The syntax is;
<BODY BGCOLOR="Value">
The value can be any of the color described earlier. The <FONT> tag can be used to change the text color.
Alternatively, we can also change the text color by using "TEXT" attribute in the <BODY> tag. This
attribute will help changing the entire text in the window to the same color. For example;
<BODY TEXT="#FFFF00">
The entire text in the window will be yellow.
ADDRESS: This tag, is used to displays the text in italics.
CITE: The text placed in between the <CITE> and </CITE> tags is rendered in italics by the browser.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 417.
Performatted text <PRE> and </PRE> Tag:
This tag is used to present the text exactly as written in the code, including white space characters. It
means, performatted text tag is used to display the text in the browser window in the same format as seen
in the editor without changes. For example;
<HTML>
<HEAD>
<TITLE>NEB</TITLE>
</HEAD>
<BODY>
<PRE>
………
</PRE>
</BODY>
</HTML>
<SUP>…</SUP> Tag: It is used to obtain a super script to some part of the text.
<SUB>…</SUB> Tag: It is used to obtain a sub script to some part of the text. For example;
<P> H<SUB>2</SUB>O is the chemical name of water</P>
Example 1
Let us now consider an example which uses various character formatting tags. The output of the code
below when viewed in a browser window is shown in figure. 6.7.
<HTML>
<HEAD>
<TITLE> NEB</TITLE>
</HEAD>
<BODY>
<B> NEB </B> provides several <I> programmes </I> in the <B><I>Computer </I></B>
stream.
<P>
One of the <I> programmes </I> is <B><U> Plus1</U></B>
</P>
<B>Plus2</B> stands for <TT> Computer </TT>
<BR>
<S>For Plus1</S> <B> NEB </B> is considered to be one of the premier universities.
<BR>
<STRONG>NEB</STRONG> believes in <STRONG><EM> Quality</EM></STRONG>
education
<BR>
<P>
Approved by Curriculum Development Centre (CDC), Nepal
.418 … Computer Science–I
According to <CITE> NEB, </CITE> <B> Plus1<B> is one of its best programmes offering
convenient timings to the student so that s/he can pursue the course while working at a job.
</P>
<BLOCKQUOTE>
For convenience all the courses offered by NEB can be seen on its website. A student has also
been provided the flexibility of seeing all the information regarding admission to the next
semester, examination result etc. on its website.
</BLOCKQUOTE>
<HR NOSHADE>
<B> NEB contact details are:
<ADDRESS>
NEB, <BR>
Sano thimi, <BR>
Bhaktapur <BR>
</ADDRESS>
</BODY>
</HTML>
Figure: 6.7 An Example Showing Various Formatting Tags
Special Characters:
There are certain characters that have special meaning in HTML code. For example, the “<” and “ > ”
characters delimit tags. If you want to display such characters on the web page, you have to take care that
the characters are not interpreted and are displayed literally. To display the “<” character, it can be
specified as “<”. The “&” interprets the “lt” as the “<” symbol and displays it. But now what if you want
to display the & symbol itself? Simply writing “&” in the code will not display it. But first, let us see how
to display some special characters. Consider the example shown in Figure 6.7.
<HTML> <BODY BGCOLOR=″#FFFFFF”> This is
Used for blank space. <BR> < is the
Less Than symbol <BR> > is the Greater Than symbol <BR>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 419.
& is the ampersand symbol <BR> " is the quotation mark symbol <BR> à is small a,
grave accent symbol <BR> À is capital a, grave accent symbol <BR> ñ is small n, tilde
symbol <BR> Ñ is capital n, tilde symbol <BR> ü is the umlaut small u symbol <BR> Ü
is the umlaut <BR>  is the symbol Delta<BR> ¼ is the quarter symbol <BR> ½is the hay
symbol <BR> </BODY> </HTML>
The special characters shown in Figure 6.7 are some of the most frequently used characters displayed on
web pages. Each of the special characters can be displayed by using its character sequence after the “&”.
The browser will display your text in a steady stream unless you tell it to do so otherwise with line breaks.
It will reduce any amount of white space to a single space. If you want more spaces, you must use the
space character ( ). If you hit Return (or Enter) while you are typing, the browser will interpret that
as a space unless there is already a space there. The browser will display your text in a steady stream
unless you tell it to do so otherwise with line breaks. It will reduce any amount of white space to a single
space. If you want more spaces, you must use the space character ( ). If you hit Return (or Enter)
while you are typing, the browser will interpret that as a space unless there is already a space there.
Consider another example, which shows how to display multiple blank lines. Code a space character with
a line break for each blank line you want.
Figure: 6.8 Multiple Blank Lines
<HTML>
<HEAD> <TITLE>NEB</TITLE> </HEAD>
<BODY BGCOLOUR="#FFFFFF"> Welcome to <BR> <BR> <BR> <BR>
<BR> <BR>INDIA </BODY> </HTML>
Approved by Curriculum Development Centre (CDC), Nepal
.420 … Computer Science–I
Listing Tag
Lists are used when the data are to be mentioned in the form of points such as causes of a particular issue,
list of items, name of schools etc. Lists break up the monotony of a long paragraph and direct the reader’s
attention to the essential parts. Lists are segregated basically into two types, namely Ordered lists and
Unordered lists.
Unordered Lists
When we like to display a group of items by adding a bullet to the group of items in the order in which the
items are created, then the list is called bulleted list. This bulleted list is also called unordered list, because
the points in the list have no particular order. These lists are characterized by list items that do not have
numbers and can be presented in any order. <UL> and </UL> tag is used to create and delimit an
unordered list. Each point in the list is delimited by the <LI> and </LI> tags. The syntax of the <UL> tag
is:
<UL TYPE="Value">
<LI> List item1</LI>
<LI> List item2</LI>
<LI> List item3</LI>
</UL>
Here, TYPE is an attribute of <UL> tag that is used to change the bullet style. The value of TYPE attribute
can be "DISC", "SQUARE" or "CIRCLE".
Example 2
<HTML>
<HEAD>
<TITLE>NEB</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
The subjects in Grade 11 are
<UL>
<LI>English </LI>
<LI>Math </LI>
<LI> Physics</LI>
<LI>Chemistry </LI>
<LI>Botany </LI>
<LI> Zoology</LI>
</UL>
</BODY>
</HTML>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 421.
Ordered Lists
Lists having numbered items are known as ordered lists. They are used when the items in the list have a
natural order. They can also be used when the number of items in the list needs to be known at a glance.
To make an ordered list, simply change the <UL> tag in unordered list to <OL>. The syntax of the ordered
list <OL> tag is:
<OL START="Value" TYPE="Value">
<LI>List item1 </LI>
<LI>List item2 </LI>
<LI>List item3 </LI>
</OL>
The attributes of <OL> are;
START: It specifies the start value (number) of the numbering sequence. The possible values are 1, 2, 3,
and so on. The numbering starts from the START attribute’s value.
TYPE: It specifies the numbering sequence and numbering style. The type of the number can be 1,2 or or I,
II or i, ii or A, B or a, b and so on.
Example 3
<HTML>
<HEAD>
<TITLE>NEB</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
What I want for my birthday
<OL>
<LI>a big red truck</LI>
<LI>a toy train</LI>
<LI>a Barbie doll</LI>
<LI>a drum set</LI>
<LI>binoculars</LI>
<LI>a month’s extra pocket money</LI>
</OL>
</BODY>
</HTML>
Definition Lists
Another type of list is a definition list. Definition lists have a heading and the text appears below that. It
can be used to define or describe a term.
Example 4
<HTML>
<HEAD>
<TITLE>NEB</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment </DT>
Approved by Curriculum Development Centre (CDC), Nepal
.422 … Computer Science–I
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to
the States, are reserved to the States respectively, or to the people.
</DD>
</DL>
</BODY>
</HTML>
A definition list is introduced by the <DL> tag and terminated by </DL>. The Definition heading should
be specified between the <DT> and </DT> tags. The Definition should be specified between <DD> and
</DD> tags.
INSERTING IMAGES AND OBJECTS
The document with "only text" is not very attractive and impressive. We can enhance the look and feel and
make our web pages more exciting by putting in images and objects on it. The images put into a web page
are known as In-line images, and can take many forms. Some of the common image and object types found
in the web pages are bullets, icons, buttons, photographs, circuit layouts etc. The images are generally in
one of the two formats- Graphic interchange format or GIF and Joint Photographic Experts Group or JPEG.
The HTML tag to specify an image is <IMG> (image) tag. The syntax for <IMG> tag is;
<IMG SRC="Value" WIDTH="Value" ALT="Value" ALIGN="Value" BORDER="Value">
Earlier in this unit, displaying the images on a page was explained using the BACKGROUND attribute of
the <BODY> tag, which displays the image as the background image. Background images make the page
heavy and hence the page takes a considerable amount of time to load. But the <IMG>tag can be used for
displaying an image with the desired height and width. We can incorporate the GIF or JPEG images in the
document, only if, those files are available in the same directory that contains the HTML document.
Let us look at an example.
<HTML>
<HEAD>
<TITLE>NEB</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="cultivation.doc" WIDTH=130 HEIGHT=101 ALT = "IMAGE IS TURNED OFF"
ALIGN = "BOTTOM" BORDER = 2> This text is placed at the middle of the image. </BODY>
</HTML>
The Attributes of Image Tag
SRC: This attribute specifies the name of the image or pathname to the source file that contains the image.
The value in the above example, "cultivation.gif", means that the browser will look for the image named
image.gif in the same folder (or directory) as the html document itself.
WIDTH: This is used for specifying the desired width of the image.
HEIGHT: This is used for specifying the desired height of the image.
BORDER: An important attribute of the IMG tag is BORDER. This attribute specifies the width of the
border of the image. By default it is 0, i.e. there is no border. As shown in the example above, the image
“image.gif” has been given a border 2 pixel wide. The following code gives a wider border to the above
image.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 423.
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="image.gif" WIDTH=130 HEIGHT=101 BORDER=10>
</BODY>
ALIGN: This attribute is used to display the text description with respect to the image that should be
displayed in the browser. The possible values are TOP, BOTTOM and MIDDLE>
ALT: Another IMG attribute that is important is ALT. ALT is sort of a substitute for the image that is
displayed or used when the user is using a browser that does not display images. Someone may be using a
text only browser, he may have image loading turned off for speed or he may be using a voice browser (a
browser where the web page is read out). In those cases, that ALT attribute could be very important to
your visitor as it could be used (given the proper text) to describe the image that is not on the screen.
HYPERLINKS
Hyperlink or link is one of the most important characteristics of web pages. The key strength of HTML lies
in its feature to link one part of information to another on the same page or on different page and location.
A hyperlink in a page is an area that opens a new site or page. Hyperlinked text can be easily identified as
it will be of different color against the other text in the document and will be underlined. When the mouse
moves over it, the mouse cursor changes its shape. A link moves us from the current page to a destination
that is specified in the HTML page. Clicking on the link will either
• Open a new section within the same page which is called Page Jump.
• Create a link to another page within the web site.
• Create a link to another web page from another website.
Creating hyperlinks is the last step while designing the web site. This is because the links to other section
or pages can be created after completing the document creation.
Anchor Tag
The Anchor tag is used to create links between different objects like HTML pages, files, and web sites. This
is a container element that is used to create a hyperlink. Anchors and hyperlinks can be defined by the tag
opening tag <A> and the closing tag </A>. Anchor can be used for two purposes;
• Create hyperlinks
• Name a target location in a document
HREF is the most common attribute of the ANCHOR tag. It defines the destination of the link. The anchor
graphics generally have a border around them, and text anchors are underlined and are in a different color
from the regular text. The syntax is;
<A HREF="URL"> Text – to – click</A>
<A NAME=Value>….</A>
Here,
HREF refers to Hypertext Reference that contains the URL, which is the address or location of the link.
NAME refers to attribute of the Anchor tag that is used to identify a location within the same HTML
document.
Links can be of two types; Internal and External.
The internal links are those links which have reference to the web pages or section within the interior of
the same web site while the external links have the reference to the web pages on other sites.
Approved by Curriculum Development Centre (CDC), Nepal
.424 … Computer Science–I
Example of hyperlink
<HTML>
<HEAD>
<TITLE>NEB</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.NEB.edu.np/">NEB!</A>
</BODY>
</HTML>
As shown above, the text “NEB” present between the <A> and </A> tags becomes the hyperlink. On
clicking anywhere on this hyperlink, the browser would attempt to connect to the given URL and the
website http://www.NEB.edu.np.in would open.
An email link can be specified in the same way. We just have to specify the email address instead of a page
address as the value of HREF, and a MAILTO tag is used as shown in the following code.
<BODY BGCOLOR="#FFFFFF">
Send me <A HREF="MAILTO:college @yahoo.com">mail</A>
</BODY>
On clicking on the link, the default mail program on the user’s computer opens up with a “To:” address as
specified in the hyperlink. We can then type the message and send e-mail to that address.
It is also possible to make an image a link if desired. This is done using the <IMG> tag. Consider the
following example;
<HTML>
<HEAD>
<TITLE>NEB</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://NEB.edu.np/"><IMG SRC="image.gif" WIDTH=130
HEIGHT=101></A>
</BODY>
</HTML>
So, the image in the above example becomes the link. When the user clicks on the image, the web site
http://www.NEB.edu.np opens up.
TABLES
Tabular representation is the best way to present grouped information. Tables are used to arrange the
layout of a web page. Rather than simply creating the rows and columns, the table organizes and enhances
the look of the content on the page. So, in this section, we will see how to put tables in the web documents.
The basic tags for creating a table are;
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 425.
1. <TABLE>…</TABLE>.
This is the main tag. It tells the browser that a table follows i.e. this marks the beginning and end of
the table.
The syntax is;
<TABLE ALIGN="…"
BORDER="…"
CELL PADDING="…"
CELL SPACING="…"
WIDTH="…"
….
….
</TABLE>
2. <TR>….</TR>
This stands for the table row. It defines a horizontal row that consists of Table Data cells. The syntax
is;
<TABLE>
<TR BGCOLOR="…">
</TR>
</TABLE>
3. <TD>….</TD>
This stands for the table data. This tag specifies an individual block or cell in a table row. The syntax
is;
<TABLE>
<TR>
<TD ALIGN="…"
COLSPAN="…"
ROWSPAN="…"
</TD>
</TR>
</TABLE>
Thus a table is made up of rows, which in turn are made up of cells.
← – – This – – – – – is – – – – – a – – – – – Table – – – – – Row – – – →
Cell
We can use any text editor to write HTML tags. Now let us start creating tables. The following example
shows some tables with different attributes.
<HTML>
<HEAD>
<TITLE> NEB</TITLE>
Approved by Curriculum Development Centre (CDC), Nepal
.426 … Computer Science–I
</HEAD>
<BODY>
<!- - Table with border = 5 - - >
First: Table with border = 5
<TABLE BORDER=5>
<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with width = 50%- - >
Second: Table with width = 50%
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with width = 50 - - >
Third: Table with width = 50
<TABLE BORDER=1 WIDTH=50>
<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with height = 75 and align = center and valign=top - - >
Fourth: Table with height = 75 and align = center and valign=top -
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Ajay</TD>
</TR>
</TABLE>
<!- - Table with an image- - >
Fifth: Table with an image
<TABLE BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="image1.gif"
WIDTH=32
HEIGHT=32></TD>
</TR>
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 427.
</TABLE>
<!- - A complete Table with different sized columns- - >
Sixth: A complete Table with different sized columns
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ajay</TD>
<TD WIDTH=20%>Ramesh</TD>
<TD WIDTH=20%>Vijay</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Vikas</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure: 6.9 Tables with Different Attriibutes
In the first table, the BORDER attribute is given a value of 5. The default is no border i.e. border = 0.
When no sizes are specified, the table is only as big as it needs to be, as shown in the first and third table in
Figure 6.9. Specifying a table size is easy. Let us reduce the table size to 50% of the browser window as has
been done in the second example. See the output in the second table in Figure 6.9. As you can see in the
example there are two ways to specify the table width. Each style has its uses. You can also change the
height of a table. The fourth table in Figure 6.9 shows the effect of the changed height.
Approved by Curriculum Development Centre (CDC), Nepal
.428 … Computer Science–I
You can also control where in the cell the data will appear. For this purpose we use the ALIGN attribute.
In the fourth table in Figure 6.9, we have used a center alignment. Similarly, right and left can be used for
right and left alignment respectively. The default value is ALIGN=left. This is the value that the browser
assumes if you have not told it otherwise.
You can also control where data will appear vertically in a cell. For this purpose, you specify the VALIGN
attribute. In the fourth table, we have used the value center. You can also use top or bottom. Images can
also be placed and manipulated in a table data cell. In the folder that contains the document with the
HTML code, substitute an IMG tag for text. This is shown in the fifth table.
You can also include size attributes with all your image tags. It makes easier for the browser to display the
table and avoids any nasty little surprises while resizing the browser window.
Now, let us look at multiple rows. Suppose we want to add three more rows. Each row can be assigned a
different width for its columns. In the sixth table we have used 60/20/20 as the relative percentage widths
of the three columns.
The last table shows how to create a table with multiple rows and columns. The WIDTH attributes in the
first row carry over to the second row.
Cell Spacing and Cell Padding attributes
Both of these attributes are part of the <TABLE> tag. CELLPADDING is the amount of space between the
border of the cell and the contents of the cell. The default value for this attribute is 1. This is so that any
text in the cells does not appear to be sticking to the border. However, we can specify a value of 0 if you
wish. The CELLSPACING attribute has a somewhat different meaning. It determines the spacing between
adjacent cells. Its default value is 2. The following example shows these and some other important
attributes of the <TABLE> tag.
<HTML>
<HEAD>
<TITLE> NEB</TITLE>
</HEAD>
<BODY>
First: Table with cellspacing and cellpadding
<TABLE BORDER=3 CELLSPACING=7 CELLPADDING=7>
<TR>
<TD>Ajay</TD>
<TD>Vijay</TD>
<TD>Rohan</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Vikas</TD>
<TD>Sanjay</TD>
</TR>
</TABLE>
Approved by Curriculum Development Centre (CDC), Nepal
Second: Table with colspan Web Technology-I Unit 6 … 429.
<TABLE BORDER=1>
<TR> Approved by Curriculum Development Centre (CDC), Nepal
<TD COLSPAN=2>Ajay</TD>
<TD>Vijay</TD>
</TR>
<TR>
<TD>Vikas</TD>
<TD>Pankaj</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
Third: Table with rowspan
<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2>Ajay</TD>
<TD>Vijay</TD>
<TD>Rohan</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Deepak</TD>
</TR>
</TABLE>
Fourth: Table with rowspan and colspan
<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2>Ajay</TD>
<TD COLSPAN=2>Vijay</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
Fifth: Table with strong tag and a link in cell's data
<TABLE BORDER=1>
<TR>
.430 … Computer Science–I
<TD COLSPAN=3
ALIGN=CENTER><STRONG><AHREF="http://NEB.org/">Ajay</STRO
NG>
</TD>
</TR>
<TR>
<TD>Vijay</TD>
<TD>Vikas</TD>
<TD>Pankaj</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure: 6.10 Some Important Attributes of the Table Tag Family
The first table in Figure 6.10 illustrates cell spacing and cell padding.
Colspan and Rowspan attributes:
Now let us see how to work with COLSPAN (Column Span) and ROWSPAN (Row Span). If we want the
cell containing Ajay in Figure 6.10 to be extended to the next cell as well and make that area part of it own,
we can use the COLSPAN attribute. This amounts to merging the two cells into one. This is similar to its
“merge cells” feature in MS Excel. <ROWSPAN> is just like COLSPAN>.
The second table in Figure 6.10 shows COLSPAN, the third table shows ROWSPAN and the fourth table
shows an example featuring both COLSPAN and ROWSPAN.
Approved by Curriculum Development Centre (CDC), Nepal
Web Technology-I Unit 6 … 431.
DESIGNING FRAMES AND FORMS
Frames
We can create a framed page in HTML. The intelligent use of frames can give pages a cleaner look and
make them easier to navigate. Each frame is a regular, complete HTML document. If we want to lay out
the page into two frames placed side by side, then we would put one complete HTML document in the left
frame and another complete HTML document in the right frame. In addition we need to write a third
HTML document. This MASTER PAGE contains the <FRAME> tags that specify what goes where.
There are only two major frame tags that you need to learn: <FRAMESET> and <FRAME>. We will now
need a few HTML documents. We will give each document a name.
Create a new folder somewhere and create the first HTML file as One.htm. Now, make another html
document. Save this in the same folder, as Two.htm. Now do the same for Three, Four, Five, and Six. Save
them just like the others. Now a folder that contains 6 complete standalone HTML documents has been
available.
Frameset
This is the tag used to create a framed page. This tag replaces the BODY tag completely to create frame
style pages.
The syntax is;
<HTML>
<HEAD>
<FRAMESET ROWS=.. OR COLS=..>
Frames and other HTML tags
</FRAMESET>
</HTML>
Now, make a master page in which you write the following code.
<HTML>
<HEAD>
<TITLE>My Frame Page -- The Master Page</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Now, save it in your folder (with all the other files) as index.htm. If you try to open it with your browser
now it will be blank.
Now let us start defining just how things are going to look. Let’s split the main window into 2 columns,
each occupying 50% of the window.
<FRAMESET COLS="50%, 50%">
</FRAMESET>
This will still give a blank output as you have not specified what goes into the windows. We have one
more thing to do before our code displays some output.
Approved by Curriculum Development Centre (CDC), Nepal
.432 … Computer Science–I
Frame Tag
The FRAME tag is defined within the frameset container. This tag is used to specify what actually appears
within a particular frame. It places an HTML file in the frame created. We must now tell the browser what
to put in each frame.
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="One.htm">
<FRAME SRC="Two.htm">
</FRAMESET>
</HTML>
Therefore, <FRAMESET> is a container tag, and <FRAME> is not. A container tag has an opening <TAG>
and a closing </TAG>. So, the <FRAME> tag has no delimiter to terminate it. Everything is in its
attributes. The <FRAMESET> tag does all the dividing of the page into different windows. It also has
attributes that specify how to divide them up. We can divide the page into more than 2 pieces. Look at the
code and the output in Figure 6.11.
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET COLS="20%,20%,20%,20%,20%">
<FRAME SRC="One.htm">
<FRAME SRC="Two.htm">
<FRAME SRC="Three.htm">
<FRAME SRC="Four.htm">
<FRAME SRC="Five.htm">
</FRAMESET>
</HTML>
Figure: 6.11 A Web Page With Five Frames
Approved by Curriculum Development Centre (CDC), Nepal