Unit: 6 Web Technology (IT)

## Introduction to web development

Web Technology broadly refers to the task associated with developing website for hosting via, say internet or intranet. The web development can be range from developing or static page to complex web based application like E-commerce or social network website.

There are some different types of web developer each of which focus on different aspects of the certain of website. There are three main types of developer:

1. Front-end developer: It is also known as client side developer who develop client side part of web page. A decent front-end developer will fluently in at least 3 language:
   • CSS
   • JavaScript
   • HTML
2. Back-end developer: It is responsible for server side programming. It includes developing server side application logic as well as its integration with the front-end.
3. Full-stack developer: It understands both front-end and back-end strategies and processes, which means they are perfectly positioned to oversee the entire process. They are involved in designing both front-end & back-end.

→ Internet:

It is a network of networks, means complex network that spans the entire globe data is transferred from computer to computer & network to network using packet switching technology and protocol.

Uses of the Internet:

1. Research
2. Education
3. Entertainment
4. Job search
5. Online shopping
6. Communication
7. Feedback about products
8. Blogging
9. Financial transactions
10. Product promotion
11. Online journals & magazines
12. Real time update

Positive impact

1. The faster, cheaper & easier medium of communication.
2. Information sharing and browsing
3. File transfer facility
4. Reach to world wide viewers
5. Effective, easier, faster & cheaper promotion of a product or service.
6. Source for entertainment
7. Effective supply chain management (SCM)

Negative impact

1. It is the most common medium for spreading malicious software like virus, worm.
2. It has increased privacy, stealing, modifying or destructing authentic
3. It has increased the digital divide.
4. Misuse of data.
5. Affects physical & health.
6. Destroy the time on unnecessary things.

→ Web-page:

The hypertext document on the www. is known as web-page. It is the fundamental unit of the web. It contains links, text, images, audio and video as well as other internet services.

The web page is an electronic document or soft copy that contain a collection of related information founded in the internet. It is developed by using (html). It enables us to embed a hyperlink in a document using the hyperlink. The user can jump from one web to another.

→ Website

A website is a collection of related web pages link through which hyperlinks are published by an organization or an individual. Generally, a website contains home page along with another additional web pages.

→ Web-browser

A software are application used to access information on the www. is called web browser. When a user request some information the web browser fetches the data from the web site server and then display the web pages on the user's screen. The primary function of web browser is render utilize html, css, java script code. Common examples of web browser are google chrome, opera, microsoft edge, safari etc.

→ Search engine

It is a web based tools that enable user to locate information on the world wide web. The main purpose of search engine is to search for information on the internet. They are software programs that search for website that is based on keyboards that the user types in. The search engine goes through their data base of information in order to locate the information you are looking for. The main search engine currently used are yahoo.com, google.com, pinki.com etc.

→ CMS [Content management system]

A CMS is a tool that help user to create, manage and modify content on the website without the need of specialized technical knowledge.

In simple language, CMS is a tool that helps to build a website without needing to write all the code.

Instead of building your own system for creating webpages, strings and images and other function the cms handles all the basic instruction for you. So that you can focus on more forward facing part of your website. Some of the widely used open source cms platform are word press, joomla, drupal, magenta (e-commerce).

→ HTML

It is a hypertext markup language used to create HTML document (web pages) for the internet. It is the set of logical codes or tags (markup) that are used to define the web browser how to present the information in the web page.

HTML is a platform independent language. It is not a programming language like C, C++, Java, and PHP, etc!

Basically, it is a set of markup tags that tells the browser how to display the web page content. Tim Berners-Lee developed HTML in 1990 at CERN (Conseil Européen pour la Recherche Nucléaire) there are different versions of HTML. These are HTML, HTML1, HTML1.0, HTML2.0, HTML3.2, HTML4.01, HTML5.0 (now).

Uses of HTML

1. It is used for basic layout creating or designing the webpage.
2. Without HTML, the WWW will not exist.
3. It allows embedding the text, image, multimedia & other link, document.
4. It provides a means to prepare a structured document by using a paragraph, formatting, links & lists.
5. It can embed script such as CSS, JavaScript which affect behaviour & design of the web page.

Advantage of HTML

1. It is highly flexible & user-friendly.
2. It is easier to maintain any website.
3. It is easily understandable & long term training.
4. It provides a search engine compatible with the web pages.
5. It is efficient and reliable.
6. It is designed with a feature of interaction between the web pages which makes it effective.

Disadvantage of HTML

1. It is complex to design and attractive web page only by using html.
2. It is difficult to develop complete website only by using html.
3. It can't be used to develop dynamic web page.
4. It is only a scripting language. It can't be used as an programming language.
5. There is no complete & acceptable standard for html.
6. It only defines page layout and make possible easy browsing through hyperlinks.

→ HTML tags and attributes

1. Singular tags <br> <hr> <img> <input> etc. stand-alone tag
2. Paired tags (container or closing tag) eg: <H1> <B> <head> <body> etc.

Meta tags

Meta tags are those tags which are used in the head section of the website which provides relative data about the webpage to the search engine.

eg: <head> <title> </title> <meta> </head>

Basic tags used in HTML

1. <HTML> or <html>
2. <head> or <HEAD>
3. <Title> or <title>
4. <body> or <body>

Heading tags and attributes

<HTML>
<HEAD>
<TITLE> Demonstration of Heading tag </TITLE>
</HEAD>
<BODY>
<H1> This is a heading H1 </H1>
<H2> This is a heading H2 </H2>
<H3> This is a heading H3 </H3>
<H4> This is a heading H4 </H4>
<H5> This is a heading H5 </H5>
<H6> This is a heading H6 </H6>
</BODY>
</HTML>

<FONT> tag & attributes

The <FONT> is used for setting the tag for <FONT> is used for setting the size, colour & face of any text on the web page. This is a paired tag.

The <FONT> has attribute like

1. Size: To set the font size. Its value can be 1 to 7 & 3 being the normal size.
2. Colour: To set the font colour. Its value can be standard colour name like black, white, purple, yellow etc. It also can be specified by using colour code of RRGGBB in the form of Hexa-decimal no. Each colour can have 00 to FF range such as:

   RR	GG	BB	Colour
   00	00	00	Black
   FF	FF	FF	White
   FF	00	00	Red
   00	FF	00	Green
   00	00	FF	Blue

3. Face: To set the font type. The font size of the text also can be specified by using <SMALL> --- </SMALL> It defines small text. <BIG> --- </BIG> It defines larger text.

Paragraph formatting <P>:

Paragraph tag is defined with the <P>. It denotes the paragraph. HTML automatically adds an extra blank line before & after a paragraph.

<P> This is a paragraph </P>
<P> This is another paragraph </P>

Break line:

A tag <BR> can be used to end the line It doesn't add extra line spaces then. <P> tag. It is a singular text.

eg: Types of RAM <BR> SRAM <BR>DRAM

Comment in HTML:

Comment tag is used to insert a comment in HTML.

<HTML>
<HEAD>
<TITLE> comment </TITLE>
</HEAD>
<BODY>
<!-- This will not be displayed -->
</BODY>
</HTML>

Formatting text:

The process of changing appearance of the html document is known as formatting text. The browser only identify the single spaces betn the word or text for giving line break and paragraph break.

Formatting text are:

List tag:

1. Ordered list
2. Unordered list

1. It starts with the tag <OL> & ends with tag </OL>. Each list item starts with tag <LI> & ends with tag </LI>. In this, list are no automatically by the browser.
2. Items in this list start with a list mask such as bullet. Browser will usually change the list mark in the nested list. Unorder list start with the tag <UL> & ends with tag </UL>. One has the choice of three bullets type: disc (default), circle, square.

Address tag

A hyperlink allows to link to any other web pages. It allows linking to other html document as well as image. The following elements represents links to other document:

Syntax

<A HREF = "URL"> </A>

Creating link:

Link to other html document or data object. There are three major types of links:

1. Link to other places in the same html document (intra-document link / intra-hyper link).
2. Link to places in other html document (local link / inter-page hyperlink)
3. External link (linking different website)

1. Internal link

These are links within a doc. which helps in navigation of large doc. For eg: we use "move to top" link on some of the web pages to navigate at the top of the document.

<A Name = "top"> </A>
<A HREF = "#top"> Go to top </A>

2. Local link

<A HREF = "URL"> text to be displayed </A>

Description list

It is also refer as definition list. There are three tags within description:

1. <DL> Defines a description list
2. <Dt> Defines term/name
3. <DD> Used to describes a term/name in a description list

Tables in HTML

A table is 2-dimensional matrices consisting of rows & columns. Table are intended for displaying data in rows & columns on the web pages. All table tags are included bet. the <TABLE> </TABLE>. The table element has 4 sub elements:

Table heading & table data

<table>
<tr>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
<tr>
<td> 100 </td>
<td> 200 </td>
</tr>
<tr>
<td> 300 </td>
<td> 400 </td>
</tr>
</table>

Merging row

<html>
<head>
<title> Row merge </title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3"> Telephone no. </td><td>100</td>
</tr>
<tr>
<td>1001</td>
</tr>
<tr>
<td>103</td>
</tr>
</table>
</body>
</html>

Merging column

<html>
<head>
<title> Column merge </title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3"> Telephone no. </td><td>100</td>
</tr>
<tr>
<td>101</td>
</tr>
</table>
</body>
</html>

Forms in HTML

A form is a collection of fields that are used for gathering information from people visiting the website. HTML forms provides data gathering functionality to the webpage.

Form object

To create a form, we use <form> tags. The rest of the form object (elements) must be inserted in between the form tags.

The attribute (properties) of the form are:

1. Method
2. Action
3. ENCTYPE
4. NAME
5. TARGET

Example: Sign up form

<html>
<head>
<title> signup form </title>
</head>
<body>
<h1> sign up </h1>
<form action = "abc.php" method = "post" name = "my form">
Name: <input type = "text" name="fname"/><br>
Email: <input type = "text" name = "eml"/><br>
Phone no: <input type = "text" name = "ph"/><br>
Country <select name = "con"/>
<option value = "1" select> choose your country </option>
<option value = "2"> Nepal </option>
<option value = "3"> India </option>
<option value = "4"> USA </option>
<option value = "5"> Japan </option>
</select>
Gender: <input type = "radio" name="gender" value = "male"/> male
<input type = "radio" name="gender" value = "female"/> female
<input type = "radio" name="gender" value = "other"/> other
Subject: <input type = "check box" name = "subject" value = "Math"/>Math
<input type = "check box" <br>
<input type = "check box" name = "subject" value = "science"/>science <br>
<input type = "check box" name = "subject" value = "Nepali"/> Nepali
<input type = "submit" name = "sub" value = "submit" >
</form>
</body>
</html>

Form Attributes

1. Method: Specifies how to send form-data (GET or POST).
2. Action: Specifies where to send the form-data when the form is submitted.
3. ENCTYPE: Specifies how the form-data should be encoded when submitting it to the server.
4. NAME: Specifies the name of the form.
5. TARGET: Specifies where to display the response after submitting the form.

Form Controls / Input Types

• Text: <input type="text"> – Single-line text input.
• Password: <input type="password"> – Masked text input.
• Radio: <input type="radio"> – Select one option from a group.
• Checkbox: <input type="checkbox"> – Select multiple options.
• Submit: <input type="submit"> – Submits the form.
• Reset: <input type="reset"> – Resets form fields.
• Button: <input type="button"> – Clickable button.
• Number: <input type="number"> – Numeric input.
• Email: <input type="email"> – Email address input.
• URL: <input type="url"> – URL input.
• Date: <input type="date"> – Date picker.
• Select (Dropdown): <select> with <option> tags.
• Textarea: <textarea> – Multi-line text input.

Example: Complete Sign-up Form

<html>
<head>
<title> Sign up form </title>
</head>
<body>
<h1> Sign up </h1>
<form action="abc.php" method="post" name="myform">
Name: <input type="text" name="fname"><br>
Email: <input type="text" name="eml"><br>
Phone no: <input type="text" name="ph"><br>
Country: <select name="con">
<option value="1" selected>Choose your country</option>
<option value="2">Nepal</option>
<option value="3">India</option>
<option value="4">USA</option>
<option value="5">Japan</option>
</select><br>
Gender: <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other<br>
Subject: <input type="checkbox" name="subject" value="Math"> Math
<input type="checkbox" name="subject" value="Science"> Science
<input type="checkbox" name="subject" value="Nepali"> Nepali<br>
<input type="submit" name="sub" value="Submit">
</form>
</body>
</html>

CSS (Cascading Style Sheets)

CSS is a style sheet language used to describe the presentation of a document written in HTML. It describes how HTML elements should be displayed on screen, on paper, or in other media.

Advantages of CSS

1. Separates content from presentation.
2. Improves website maintainability.
3. Reduces code repetition.
4. Faster page loading.
5. Responsive design support.
6. Consistent styling across multiple pages.

Ways to Add CSS

1. Inline CSS: <tag style="property: value;">
2. Internal / Embedded CSS: Inside <style> tag in <head>.
3. External CSS: Separate .css file linked with <link rel="stylesheet" href="style.css">.

CSS Syntax

selector {
    property: value;
    property: value;
}

Common CSS Properties

• Text: color, font-family, font-size, text-align, text-decoration
• Background: background-color, background-image
• Box Model: width, height, margin, padding, border
• Positioning: position, top, left, display, float

Example: Basic CSS

<html>
<head>
<style>
body { background-color: lightblue; }
h1 { color: navy; text-align: center; }
p { font-family: Arial; font-size: 16px; }
</style>
</head>
<body>
<h1>Welcome to Web Technology</h1>
<p>This is a styled paragraph.</p>
</body>
</html>

JavaScript

JavaScript is a high-level, interpreted programming language that makes web pages interactive. It is used for client-side scripting.

Features of JavaScript

• Client-side execution.
• Dynamic HTML manipulation.
• Event handling.
• Form validation.
• Popup boxes (alert, confirm, prompt).

Adding JavaScript

1. Inline: <script> ... </script>
2. Internal: Inside <head> or <body>.
3. External: <script src="script.js"></script>

Basic JavaScript Example

<script>
function greet() {
    alert("Hello, Welcome to Web Technology!");
}
</script>

<button onclick="greet()">Click Me</button>

Web Servers & Hosting

A web server is software that stores and delivers web pages to clients. Examples: Apache, IIS, Nginx.

Domain Name

A domain name is a human-readable address of a website (e.g., example.com).

Web Hosting

Web hosting is a service that allows individuals and organizations to post a website on the internet. Types include Shared, VPS, Dedicated, Cloud hosting.