Introduction to Web Technology by Mahesh Sharma

“Kindly Switch off your phone or silent mode”

Web Technology (3 Cr.)
Mr. Mahesh Sharma
Computer Facilitator, BSc IT (L.M.U), MBS Financial Technology ( T.U.)
Nesfield International College (T.U), Lagankhel
Course Code: CACS205, III Sem
Class Load: 6 hrs Theory/Practial per week
© Copyright, Mahesh Sharma 2022
Welcome to PowerPoint Presentation on:

Agendas Today
1. Introduction
2. Course Description
3. Course Objectives
4. Course Content: Unites I to 5
5. LAB Works
6. Teaching Method
7. Evaluation
8. Text Books
9. Reference Books

Course Description
• This course Web Technology (CACS205) covers different aspects of web
development and tools such as HTML, CSS, issue of web technology, client tier,
server tier, advanced server side issues, etc.
Course Objectives
• The general objective of this course is to provide fundamental concepts of
internet, web technology and web programming

Course contents
• Unit 1: HTML CSS Basics with Image, Tables, Frames, Lists Forms, Stylesheets
• Unit 2: Issue of Web Technology with architectural issues of web layers, tier technology,
2-Tier, 3-Tier (web server, database and application)
• Unit 3: The Client Tier with client programs and consoles that are used for
development, administration, and other tasks
• Unit 4: The Server Tier with web server, dynamic content, error handling
• Unit 5: Introduction to Advanced Server Side Issues with database connectivity, File
Handling, Form Handling

LAB Works
• Laboratory work is done covering
all topics listed in units of Course
content with coding, browsing,
database, demo, presentation etc.
• A small project work is carried
out using concept learned in this
course of Web Technology.
• Project work is assigned on
individual basis

Teaching Methods
• The general technology use with class
lectures, group works, case studies,
guest lecturer, research work, project
works, assignments, theoretical and
practical, tutorials, and examinations
• Teaching methods will be based on the
need of topics.
• Basically, Lecture, Tutorial and
Workshop (Effective L.T.W method)
Evaluation
• Internal Assessment
• Theory (20 marks)
• Practical (null )
• External Assessment
• Theory (60 marks)
• Practical (20 marks)
Total marks: 100

Text Books
• Harvey M. Deitel, Paul J. Deitel & Abbey Deitel, “Interent and World Wide Web: How
to Program”, 5 th Ed. Pearson Education, 2012, ISBN: 9780273764021
• Thomas A. Powell, “HTML & CSS: The Complete Reference”, McGraw Hill, Fifth Ed.
2010 ISBN: 980-0-07-174170-5
Reference Book
• Matt J, Crouch “ASP.NET and VB.NET Web Programming”, Pearson Education
Asia, 2002
• Thomas A. Powell, “HTML & CSS: The Complete Reference”, McGraw Hill, Fifth Ed.
2010 ISBN: 980-0-07-174170-5
Other reference : W3schools.com, Youtube.com/codewithharry, https://edx.com
Class notes, Slides, Case Studies

Introduction to Web Technology
WHAT IS Web Technology?
Web Technology is the tools and techniques for web development.
Web technologies related to the interface between web servers and their clients. This
information includes markup languages, programming interfaces and languages, and
standards for document identification and display.
Reference: Jagdish Bhatta, T.U.
Central Department of Computer Science & Information Technology

Web Development is a broad term for the work involved in developing a web site for World Wide Web
or Internet.
• This can include web design, web content development, client liaison,
client-side/server-side scripting, web server and network security configuration, and e-commerce
development.
• However, among web professionals, "web development" usually refers to the main non-design
aspects of building web sites: writing markup and coding.
• Different web development tools are used such as: Notepad++, Visual Code Studio, Sublime Text,
Apache Server, Windows Server, Web browsers such as Internet Explorer, Google Chrome, Mozilla
Firefox, Safari
• Web development can range from developing the simplest static website of plain text to the most
complex web-based internet applications, electronic businesses, or social network services.
Web Development

Web design is a broad term used to encompass the way that content (usually hypertext or
hypermedia) is delivered to an end-user through the World Wide Web, using a web
browser or other web-enabled software is displayed.
• The major objective of web design is to create a website—a collection of online content
including documents and applications that reside on a web servers. A website may include text,
images, sounds and other content, and may be interactive.
• For the typical web sites, the basic aspects of design are:
1. Content: the information on the site should be relevant to the site and should target the
area of the public that the website is concerned with.
2. Usability: the site should be user-friendly, with the interface simple and reliable.
3. Appearance: the graphics and text should include a single style that flows
throughout, to show consistency. The style should be professional, appealing and relevant.
4. Structure: of the web site as a whole.
Web Design

Internet is a world wide connection of computer over a networks with special gateways or routers.
The Internet is also often referred to as the Net. The Internet is a massive network of networks, a
networking infrastructure.
• It connects millions of computers together globally, forming a network in which any
computer can communicate with any other computer as long as they are both connected to
the Internet. Information that travels over the Internet does so via a variety of languages
known as protocols.
• The Internet is a globally distributed network comprising many voluntarily interconnected
autonomous networks. It operates without a central governing body. However, to maintain
interoperability, all technical and policy aspects of the underlying core infrastructure and the
principal name spaces are administered by the Internet Corporation for Assigned Names
and Numbers (ICANN).
• In Nepal, Ministry of Communication and Information Technology, MOCIT, governmental
body that manages postal services, telecommunications, broadcasting, press and information.
Internet and its Evolution

• The history of the Internet starts in the 1950s and 1960s
with the development of computers. This began with
point-to-point communication between mainframe
computers and terminals, expanded to point-to-point
connections between computers and then early research
into packet switching.
• Since the mid-1990s the Internet has had a drastic impact
on culture and commerce, including the rise of near instant
communication by electronic mail, instant messaging,
Voice over Internet Protocol (VoIP) "phone calls", two-way
interactive video calls, and the World Wide Web with its
discussion forums, blogs, social networking, and online
shopping sites.
History of Internet

World Wide Web: System of interlinked hypertext documents accessed via the Internet. The
World Wide Web, or simply Web, is a way of accessing information over the medium of
the Internet.
• The World Wide Web uses the HTTP protocol, only one of the languages spoken over the
Internet, to transmit data. to allow applications to communicate.
• The Web also utilizes browsers, such as Internet Explorer or Firefox, to access Web documents
called Web pages that are linked to each other via hyperlinks.
• Web documents also contain graphics, sounds, text, video or animation. It is a collection of
textual documents and other resources, linked by hyperlinks and URLs, transmitted by web
browsers and web servers.
World Wide Web (WWW)

Web Page
WHAT IS A WEB PAGE?
The Internet Page displayed on the website is called A Web Page.
• Web pages may consist of files of static text and other content stored within the web
server's file system (static web pages), or may be constructed by server-side software when they are
requested (dynamic web pages). Client-side scripting can make web pages more responsive to user
input once on the client browser.
• Web pages frequently subsume other resources such as HTML, style sheets, scripts and images into
their final presentation.
• Web pages may be retrieved from a local computer or from a remote web server. The web
server may restrict access only to a private network, e.g. a corporate intranet, or it may
publish pages on the World Wide Web. Web pages are requested and served from web
servers using Hypertext Transfer Protocol (HTTP).

Web Site
WHAT IS A WEBSITE?
A website or simply site, is a collection of related web pages containing images, videos or
other digital assets.
• A website is hosted on at least one web server, accessible via a network such as the Internet or a
private local area network through an Internet address known as a Uniform Resource Locator.
• Web sites can be static or dynamic in type.
Some Examples are:
https://www.facebook.com/ - A Social Networking Site
https://www.google.com.np/- A Search Engine
https://www.nesfield.edu.np - Our College Website

Static Websites
• This type of website usually displays the same
information to all visitors. Example printed
brochure to customers or clients
• A static website will generally provide
consistent, standard information for an
extended period of time.
• Although the website owner may make
updates periodically, it is a manual process to
edit the text, photos and other content and
may require basic website design skills with
plain, static HTML.
• Visitors are not able to control what
information they receive via a static website,
and must instead settle for whatever content
the website owner has decided to
offer at that time.
Dynamic Website
• This type of website is one that changes or customizes
itself frequently and automatically, based on certain
criteria.
• Dynamic websites can have two types of dynamic activity:
Code and Content.
• Dynamic code is invisible or behind the scenes and
dynamic content is visible or fully displayed.
The first type is a web page with dynamic code. The code
is constructed dynamically on the fly using active
programming language like PHP.
• The second type is a website with dynamic content
displayed in plain view. Variable content is displayed
dynamically on the fly based on certain criteria, usually
by retrieving content stored in a database
Types of Web Pages/Website

Introduction to Web Page Designing
A web page may include different Data and Information based
on:
I. Title, Heading and Paragraph
II. Images, Audios and Videos
III. Tables, Sheets
IV. Schedules of Events
V. Search Forms
VI. Sign Up and Login Forms etc

Unit 1a. HTML Basics
 HTML Stands for Hypertext Markup Language
 The language for building Web Pages
 Describes the structure of Web pages using markup language
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by HTML tags
 Some of the Examples of HTML tags are:
<HTML> </HTML>, <HEAD></HEAD>, <TITLE></TITLE>, <BODY></BODY>, <H1></H1>
<P></P>, <B></B>, <U></U>, <I></I> etc.

HTML Tags
HTML Tags are enclosed in the < and the > symbols.
It has two pairs, an Opening tag e.g. <html> and a closing tag e.g.
</html>.
A closing tag is followed by symbol ‘/’.
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>
Input in Notepad saved as - Nepal.html
Output in a Web browser
- Google Chrome

HTML Tags Explained
I. The <!DOCTYPE html> declaration defines this document to be HTML5
II. The <html> element is the root element of an HTML page
III. The <head> element contains title of document
IV. The <title> element specifies a title for the document
V. The <body> element contains the visible page content
VI. The <h1> element defines a large heading
VII. The <p> element defines a paragraph
VIII.The <b> element defines the bold of text

HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Example: <body BGCOLOR = “green”> changes the background of
webpage to green color

HTML Headings
• Headings are important in HTML documents. They are the title of
HTML pages
• Headings are defined with the <h1> to <h6> tags.
• H1 is the largest heading tag while H6 is the smallest heading tag.
• <h1> headings should be used for main headings, followed by
<h2> headings, then the less important <h3>, and so on

HTML Paragraphs
The HTML <p> element defines a paragraph.
We define <p> tag with attribute and value to change the properties of the
paragraph
For instance:
I. <p align = “left”> - for left alignment of paragraph
II. <p align = “center”> - for center alignment of paragraph
III. <p align = “right”> - for right alignment of paragraph
IV. <p align = “justified”> - for justified alignment of paragraph
I. II. III. IV.

HTML Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="pic_mountain.jpg" alt="Mountain View" width= "340px" height="228px">
For Instance:
Input in Notepad saved as - Mountain.html
Output in Web Browser-
Google Chrome

HTML Images
I. Use the HTML <img> element to define an image
II. Use the HTML src attribute to define the URL of the image
III. Use the HTML alt attribute to define an alternate text for an
image, if it cannot be displayed
IV. Use the HTML width and height attributes to define the size of
the image
Note: Loading images takes time. Large images can slow down your
page. Use images carefully.

References
 (N. Adhikary, 2017). Web Page Designing Using HTML .Oasis Publication. 1st ed.
Pg. 159-168. [Accessed date: 03 Sept 2017]
 (W3schools.com, 2017) Introduction to HTML. W3Schools.com
https://www.w3schools.com/html/html_intro.asp/ [Accessed date: 05 Sept
2017]
 Thomas A. Powell, “HTML & CSS: The Complete Reference”, McGraw Hill, Fifth
Ed. 2010 ISBN: 980-0-07-174170-5
 Bhatta J., T.U.2022, “Web Technology (CSC-353)”, Central Department of Computer
Science & Information Technology. Available at https://CSITtutor.com

Introduction to Web Technology by Mahesh Sharma

More Related Content

What's hot

Similar to Introduction to Web Technology by Mahesh Sharma

More from Ashmita Tuition Center

Recently uploaded

Introduction to Web Technology by Mahesh Sharma