CONFLUENCE UNIVERSITY OF SCIENCE AND TECHNOLOGY OSARA,

(CUSTECH).

FACULTY OF COMPUTING AND INFORMATICS

COURSE TITTLE: INTRODUCTION TO WEB DEVELOPMENT

(AN OVERVIEW) (CSC132)

LECTURER: MRS. M.ZAINAB

 WHAT IS WEB DEVELOPMENT
Web development is the process of building and maintaining websites and web applications. It involves a range of
tasks, including:

1. Design: creating the visual design and user experience of a website or web application.

2. Front-End Development: Building the user interface and user experience of a website or web application using
programming languages like HTML, CSS, and JAVASCRIPT.

3. Back-End Development: Building the serve-side logic, database integration, and API connectivity of a website
or web application using programming languages like Java, Python, and Ruby.

4. Database Management: Designing, implementing, and maintaining databases to store and manage data for
websites and web applications.

5. Testing and Debugging: Testing and debugging websites and web applications to ensure they work correctly and
are free of errors.

6. Deployment and maintenance: deploying websites and web applications to produce environments and
maintaining them to ensure they continue to work correctly and are secure.
 SERVER AND BROWSER

SERVER: A server can be a physical machine or a virtual machine running on a physical machine.

PURPOSE: A server is designed to provide services, resources, or data to other devices or programs over
a network.

FUNCTIONALITY: A server can perform various tasks, such as hosting websites, managing databases,
handling email, or providing file sharing and storage.

BROWSER: A browser is a software application installed on a client device, such as a computer,

smartphone, or tablet.

PURPOSE: A browser is designed to retrieve, display, and interact with web pages and online content.

FUNCTIONALITY: A browser can perform tasks like rendering web pages, executing JavaScript, and
handling user input.

_ A URL (uniform resource location) is a web address used to locate a specific resources on the internet.it
purpose is to provide a unique identifier for a website or web page.
 What is the Internet?
The internet is a global network of interconnected computers and servers that store and provide
access to vast amounts of information and resources. It's often referred to as the “network of
networks” because it connects millions of smaller networks together.

In summary, the internet is a powerful, global network that has transformed the way we live, work,
and interact with each other.

The internet enables communication, information sharing, and various online activities through
standardized protocols and technologies, such as:
1. TCP (Transmission Control Protocol): Enable reliable, error-free data transfer between
devices.
2. HTTP (Hypertext Transfer Protocol): facilitates communication between web browsers and
servers.
3. SMTP (Simple Mail Transfer Protocol): Enables Email sending and receiving
4. FTP (File Transfer Protocol): Allows for file transfer between devices.
5. DNS (Domain Name System): for website addressing
 HISTORY AND EVOLUTION OF THE INTERNET

The internet has it roots in the 1960s, when the united states department of defense’s advanced research projects agency (ARPA)
funded a project to create a network of computers that could communicate with each other. This project called ARPANET, was the first
operational packet switching network. Over time, other networks were developed and connected to ARPANET, eventually forming the
modern internet.

BENEFITS OF THE INTERNET

The internet has many benefits, including:

1. Proving access to information

2. Enabling communication and collaboration

3. Facilitating e-commerce.

DRAWBACKS OF INTERNET

4. Cyberbullying

5. Online harassment

6. Spread of misinformation
 NETWORK CONNECTION

-Devices talk to each other over the internet using TCP/IP protocol.

-Each computer needs a unique internet protocol address (IP address) to talk to other
computer online.

-The local internet service provider (ISP) provides IP addresses to users.

BASIC COMPONENTS OF NETWORK
1. Devices: Computers, laptops, smartphones, servers, printers, and other devices that connect to the
network.
2. Network Interface Cards (NICs): Hardware components that allow devices to connect to the network.
3. Cables: Physical media that connect devices to the network (e.g., Ethernet cables).
4. Wireless Access Points (WAPs): Devices that allow wireless devices to connect to the network.
5. Routers: Devices that connect multiple networks together and route traffic between them.
6. Switches: Devices that connect multiple devices within a network and forward data packets between
them.
NETWORK FUNDAMENTALS
1. IP Addresses: Unique addresses assigned to each device on a network, used for communication.
2. Subnet Masks: Used to divide an IP address into a network ID and a host ID.
3. Ports: Used to identify specific processes or services running on a device.
4. Protocols: Sets of rules that govern communication between devices on a network (e.g., TCP/IP,
HTTP, FTP).
NETWORK COMMUNICATION
1. Packet Switching: Data is broken into small packets, transmitted independently, and reassembled at
the destination.
2. Routing: Routers forward packets between networks based on their destination IP addresses.
3. Switching: Switches forward packets within a network based on their destination MAC addresses.
 TYPES OF NETWORK
1. Local Area Network (LAN): A network that connects devices within a limited geographical area.
2. Wide Area Network (WAN): A network that connects devices over a larger geographical area.
3. Wireless Network (WLAN): A network that connects devices wirelessly.
4. Virtual Private Network (VPN): A network that uses encryption and other security measures to create a
secure, private connection over the internet.

NETWORK SECURITY
1. Firewalls: Devices or software that control incoming and outgoing network traffic based on
predetermined security rules.
2. Encryption: The process of converting plaintext data into unreadable cipher text to protect it from
unauthorized access.
3. Access Control: Measures that restrict access to network resources based on user identity, role, or
permissions.
What is HTML?

HTML (Hypertext Markup Language) is the standard markup language used to create web
pages . It is the backbone of a websites, providing the structure and content that the web
browser renders to the user.

Basic HTML Concepts

1. Elements: HTML elements are represented by tags, which are surrounded by angle
brackets (<>). Usually in pairs, with the opening tag preceding the content and the
closing tag following the content.

2. Tags: HTML tags are used to define the start and end of an element . They are usually
surrounded by angle brackets (<>).

3. Attributes: HTML attributes provide additional information about an element. They are
added to the opening tag and usually consist of a name and value.
Here is a simple HTML code that contains the head, body, paragraph, link, and image:

<!DOCTYPE html>

<html>

<head>

<title> Simple HTML Page</title>

</head>

<body>

<h1>Welcome to my page</h1>

<p>This is a simple HTML page with link and an image.</p>

<p><a

href=‘’https://wwww.google.com’’>visit google </a></p>

<img scr=‘’ image.jpg’’ alt=‘’My Image’’ width=‘’500’’ height=‘’300’’>

</body>
HTML Structure

1. DOCTYPE: The DOCTYPE declaration is the first line of code in an HTML document. It
tell the web browser which version of HTML is being used.

2. HTML: The <html> tag defines the root of an HTML and contain all other elements.

3. Head: The <head> element contains metadata about the document, such as the title,
character encoding, and links to external stylesheets of scripts.

4. Body: The <body> element contains the content of the HTML document.

Common HTML Elements

5. Headings: <h1>, <h2>, <h3>, etc. it define headings.

6. Paragraphs: <p> defines a paragraph.

7. Links: <a> defines a hyperlink.

4. image: <img> defines an image.

5. list: <ol> define ordered list which create a bullet list.

6. list: <ul> define unordered list which create a numbered list.

7. Tables: <table>, <tr>, <td>, define tables, rows, and cells.

8. Forms: <form>, <input>,<textarea>,<select>, define forms, input fields, text areas, and select menus.

HTML ATTRIBUTES

1. id: Specifies a unique identifier for an element.

2. Class: Specifies a class name for an element.

3. Style: Specifies inline style for an element.

4. Title: Specifies a title for an element.

5. Href: Specifies a hyperlink reference.

6. Src: Specifies the source of an image or script.

7. Alt: Specifies alternative text for an image.

HTML BEST PRACTICES
1. Use lowercase tags and attributes: HTML is case-insensitive, but using lowercase tags and
attributes makes the code more readable.
2. Use meaningful class name and IDs: use descriptive class names and IDs to make the code more
readable and maintainable.
3. Use semantic element: Use HTML semantic elements to provide meaning to the structure of the
web page.
4. Test and validate: Test and validate HTML code to ensure it is correct and compatible with different
browsers.
HTML TOOLS AND RESOURCES
5. HTML EDITORS: Use HTML editors like Visual Studio code, Sublime Text, or Atom to write and edit
HTML code.
6. HTML VALIDATORS: Use HTML validators like W3C validator or HTML tidy to check the syntax and
structure of the HTML code.
7. HTML REFERENCES: Use HTML references like W3C HTML5Specification or Mozilla Developer
network to learn more about HTML elements, attributes, and best practices.
8. HTML TUTORIALS: Use HTML tutorials like W3Schools, Codecademy, or freeCodeCamp to learn
HTML from scratch.