0% found this document useful (0 votes)
22 views8 pages

Introduction to Web Design Concepts

This document provides an introduction to web design, covering key concepts such as networks, the internet, and the World Wide Web (WWW). It explains the evolution of the internet, the differences between static and dynamic websites, and the roles of front-end and back-end development. Additionally, it discusses web browsers, search engines, web publishing tools, and the client-server relationship.

Uploaded by

herohitonaorem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
22 views8 pages

Introduction to Web Design Concepts

This document provides an introduction to web design, covering key concepts such as networks, the internet, and the World Wide Web (WWW). It explains the evolution of the internet, the differences between static and dynamic websites, and the roles of front-end and back-end development. Additionally, it discusses web browsers, search engines, web publishing tools, and the client-server relationship.

Uploaded by

herohitonaorem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Chapter-1(Introduction to Web design)[10 marks]

#Network: It is a group of connected devices with each other for communicating and sharing resources.

#Internet: It is WAN networks of computer where different types of computers connected together in all over the
world.

Advantges Disadvantages
Flaws communication Internet Addiction
Online Education Access to wrong information
E-commerce and online service Theft of personal information
Abundant of Information Spams
Entertainment Virus threats
Social Networks Sensitive Information
Online Banking Wastage of time
Video calls and web Conferencing Obesity and other Heath Issues.

History Of Internet:

- In mid-1960’s, The Advanced Research Projects agency (ARPA) in the US Department of Defence (DOD) was
interested in finding a way to connects computer together.
- In 1969, ARPANET was connected 4 major computers at universities in US (UCLA, Standard Research Institute,
UCSB and the university of Utah).
- Vinton Gray Cerf was called “Father of Internet” because co-designed the TCP/IP protocols and helped developed
the architecture and structure of the Internet.
- To connect to the internet, we will typically need the following:
a) Device (computer, tablet, or smartphone)
b) ISP
c) Modem or router
d) Application Software (E.g., Chrome, Brave, WhatsApp, IG, etc)

#WWW (World wide web or W3):

• Simply called web, is a vast collection of digital pages for using information on the internet.
• It u
• In other words, it is a series of servers that are interconnected through hypertext.
• It works on client-server model.
• It was invented by a British scientist, Tim Berners-Lee in 1989.

Evolution of WWW:

- The concept of WWW was developed in Switzerland at the European Particle Research Centre (known as CERN)
in 1989.
- Webservers on the internet are collectively called as the WWW. The W3C is the closest anyone gets to set the
standard for anyone and enforcing rules about the WWW.

#URL
• URL stands for Uniform Resource Locator.
• A URL, short for a uniform resource locator is a web address pointing to a specific website, a web page, or a
document on the internet.
#Web designing:

- Refers to the creating and maintaining websites that are displayed on the internet.
- It is not limited to websites as it includes other such as web apps, mobile apps, and user interface design.

Elements of the Web Design:


- Layout: The arrangement and structure of content on a web page.
- Color : The color scheme used throughout the website.
- Graphics: can include logos, photos, clipart, or icons, all of which enhance the web design.
- Content: Content and design can work together to enhance the message of the site through visuals and text.

#WHAT is Website:

• It is typically a collection of webpages, images and other elements that are linked together to form a larger,
structured document.
• It can be made up of a single page or it could have thousands of pages.
• They are stored on a web server, a special computer that makes web pages available for people to browser.
• the term “website" refers to a collection of related web pages that are typically identified by a common
domain name and are published on web servers. Websites work through a combination of client-side and
server-side technologies to deliver content and functionality to users.
• an HTTP URL uses TCP/IP port number 80 whereas an HTTPs URL uses 443.
How the website works:

Websites are stored on powerful


computers called servers. These servers have the primary purpose of storing and delivering data. Multiple servers
often work together, forming server clusters or data centres, to handle the high demand for website access.
When you visit a website, your device sends a request to the server, and the server responds by sending the
requested data back to your device.

To display your website on the internet, we need:

1) a website 2) a domain name 3) a server

Domain name: Every website has an address known as a domain name. A domain name is a name chosen by the
website owner that redirects users to the website's IP address. For example, "[Link]" is the domain name
for Amazon's website. Domain names are easier to remember than IP addresses, which are a series of numbers
that identify a specific server on the internet.

They can be categorized into two main types: static websites and dynamic websites:
Static Websites:

• A static website consists of fixed content that remains the same for all users.
• Each individual page of a static website displays the exact same information to every visitor.
• Static websites are typically built using HTML, CSS, and JavaScript.
• They are prebuilt source code files that do not change unless the website developer manually updates
the content.
• They are often used for smaller-scale sites or websites that do not require frequent updates.

Dynamic Websites:

• It is a collection of dynamic web pages web pages whose content changes dynamically.
• It accesses content from a database or Content Management System.
• Therefore, when we alter or update the content of the database, the content of the website is also
altered or updated.
• Dynamic websites are built using server-side scripting languages such as PHP, [Link], [Link], Ruby, etc.

STATIC WEBSITE Vs. Dynamic Website


Static website Dynamic website
1. Prebuilt content is same every time the page is 1. Content is generated quickly and changes
loaded. regularly.
2. It uses the HTML code for developing a 2. It uses server-side scripting languages such
website. as PHP, [Link], [Link], Ruby, etc.

3. It sends exactly the same response for every 3. It may generate different HTML for each of
request. the request.
4. Flexibilty is the main advantage of static 4. Content Management System is the main
website. advantage of dynamic website.
5. Information is change rarely. 5. Information is change frequently.
6. In static Website, database is not used. 6. In dynamic Website, database is used.

Web Pages:

• It is an electronic document written in computer language called HTML (HyperText Markup Language).
• Web pages are the building blocks of a website. A website consists of multiple web pages linked together
under a common domain name. Each web page has its own unique address, known as a URL (Uniform
Resource Locator), which allows users to access and view the specific content of that page.
#Front-End and Back-end Application:

Front End Development:

• Front-end development refers to the process of creating the user interface and visual elements of a website
or web application.
• It is also referred to as “client side” of the application.
• It is built using technologies such as HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and
JavaScript.

o HTML (HyperText Markup Language): Used for structuring the content of web pages.
o CSS (Cascading Style Sheets): Used for styling and formatting the visual appearance of web pages.
o JavaScript: Used for adding interactivity and dynamic functionality to web pages.

• Front end frameworks such as Angular, Ember, React, etc are also popular.

Back-End Development:

• Back-end development refers to the process of building and maintaining the server-side components of a
website or web application.
• It involves working with databases, servers, APIs (Application Programming Interfaces), and other
technologies that handle the behind-the-scenes functionality of a website..

• Writing server-side code using programming languages like Java, Python, PHP, Ruby, or JavaScript (with
[Link]).
# Client and Server Scripting languages:

Client-side scripting refers to the execution of scripts on the client's browser or device. The scripts are written in
programming languages such as JavaScript, HTML, and CSS. When a user visits a webpage, the client-side scripts are
downloaded and executed on their device, allowing for dynamic and interactive web pages.

Server-side scripting involves executing scripts on the web server before sending the response to the client's browser.
The scripts are written in languages such as PHP, Python, Ruby, or JavaScript (with [Link]). Server-side scripts handle
tasks such as processing form data, accessing databases, and generating dynamic content.

Server-Side scripting Vs. Client-Side Scripting


Server-Side scripting Client-Side Scripting
1. It is used to create dynamic pages based a 1. It is used when the user’s browser already has
number of conditions when the user’s all the code and the page is altered on the basis
browser makes a request to the server. of the users input.
2. The web server executes the server-side 2. The web browser executes the client-side
scripting that produces the page to be sent scripting that resides at the user’s computer.
to the browser.
3. Server executes server-side scripts to send 3. The browser receives the page sent by the
out a page but it doesn’t execute client-side server and executes the client-side scripts.
scripts.
4. It is used to connect to the database that 4. It can’t be used to connect to the database on
reside on the web server. the web server.
5. It can access the file system residing on the 5. It can’t access the file system residing on the
web server. web server.
6. It cannot be blocked by the user. 6. It is possible to be blocked by the user.
7. Relatively secure. 7. It is secure.
8. E.g.: PHP, ASP, JSP, Ruby, Pearl, etc. 8. E.g.: HTML, CSS, JavaScript, etc.

# Responsive Web Designing:

Responsive web design refers to the practice of creating websites that can adapt and adjust their layout and content
based on the screen size and device being used to view them. It ensures that websites look good and function
properly on all devices, including desktops, tablets, and smartphones.

The main components of responsive design:

1. Flexible layouts: Using a flexible grid to create the website layout that will dynamically resize to any width.
2. Media queries: An extension to media types when targeting and including styles. It allows designers to
specify different styles for specific browser.
3. Flexible media: Makes media (images, video and other formats) scalable, by changing the size of the media as
the size of the viewport changes.
# what is sublime text and why use sublime text:
- Sublime Text Editor is a full featured Text editor for editing local files or a code base.
- It includes various features for editing code base which helps developers to keep track of changes.
- Various features that are supported by Sublime are as follows −
• Syntax Highlight
• Auto Indentation
• File Type Recognition
• Sidebar with files of mentioned directory
• Macros
• Plug-in and Packages
- Sublime Text editor is used as an Integrated Development Editor (IDE) like Visual Studio code and NetBeans.
- Sublime Text offers its users the following benefits −
• Ability to solve linker errors.
• Keeping track of all files and folders to work with.
• Problem solving capabilities.
• Keeping color combination for syntax combination.

# what is web browser? Name some web browser:


A web browser is a software application for accessing information on the world wide web or local website and display
it.

1. Google Chrome: Google Chrome is currently the most widely used web browser worldwide, with a global
market share of around 65% on all devices.
2. Safari: Safari is the default web browser for Apple devices, such as iPhones, iPads, and Mac computers. It
holds a significant market share, with around 18% globally.
3. Mozilla Firefox: Mozilla Firefox is an open-source web browser known for its privacy features and
customization options. It has a dedicated user base and is available for multiple platforms.
4. Microsoft Edge: Microsoft Edge is the default web browser for Windows 10 and is designed to be fast and
secure. It replaced Internet Explorer as Microsoft's primary browser.
5. Opera: Opera is a feature-rich web browser available for various operating systems, including Windows,
macOS, Android, and iOS. It offers unique features like a built-in ad blocker and free VPN.
# Search Engine:
- It is service that allows users to search for content using” keyword” or “key phrases” from the internet.
# what are Web Publishing tools?
it consists of tools and resource like programming languages, designing software, animation software, etc. which help
to create and develop web pages.
Web publishing tools can serve different needs, including:

• Website creation and design: These tools offer features for designing and customizing the layout,
appearance, and functionality of websites. They may include templates, themes, and visual editors that allow
users to create visually appealing and interactive web pages.
• Content management: Web publishing tools often include content management systems (CMS) that
facilitate the organization, editing, and publishing of website content. They provide features like version
control, collaboration, and workflow management.
• Integration of multimedia: Many web publishing tools support the inclusion of various media types, such as
text, images, videos, and audio, allowing users to create engaging and interactive web experiences.
• Search engine optimization (SEO): Some web publishing tools offer built-in SEO features, helping users
optimize their websites for search engines and improve their visibility in search results.
#client and server relation:

Client:
A client is a device or software application that requests services, resources, or information from a server. In the
context of the internet, a client is typically a user's device (such as a computer, smartphone, or tablet) running a web
browser or a specific application.
Key Characteristics:
• Initiates Requests: Clients initiate requests for services or data from servers.
• User Interface: Clients often have a user interface that allows users to interact with the application or access
content.
• Receives Responses: Clients receive and interpret the responses from servers.
• Examples:
• Web browsers (like Chrome, Firefox, Safari) are clients that request web pages from servers.
• Email clients (such as Outlook, Thunderbird) request and retrieve emails from email servers.
Server:
A server is a powerful computer or software application that provides services, resources, or information to clients in
a network. Servers are designed to handle multiple requests simultaneously and respond to those requests based on
their capabilities.
• Key Characteristics:
• Listens for Requests: Servers are designed to listen for incoming requests from clients.
• Processes Requests: Servers process the requests, perform necessary operations, and return responses to
clients.
• Resource Management: Servers manage and store resources such as files, databases, or applications.
• Examples:
• Web servers (like Apache, Nginx) respond to requests for web pages by serving HTML, CSS, and other files.
• Database servers (such as MySQL, PostgreSQL) store and manage databases, responding to queries from
client applications.

Common questions

Powered by AI

Client-side scripting executes scripts on the client's browser or device after downloading them from a server. It is typically written in HTML, CSS, and JavaScript, and allows for dynamic and interactive web pages to be developed on the user's side of the interface . Server-side scripting occurs on the web server, generating pages based on conditions and processing data requests before sending responses back to the browser. It uses languages like PHP, Python, and Node.js, and handles accessing databases and producing dynamic content on the server-side before delivery to the client . This approach makes client-side scripting highly interactive while server-side scripting is more suited for managing data and executing complex back-end functions.

Static websites differ from dynamic websites primarily in content generation and user interaction. Static websites display the same prebuilt content to all users every time they visit, and are usually built with HTML, CSS, and JavaScript, without changing unless manually updated by developers . Dynamic websites, however, generate content dynamically and may change each time a user visits. They often rely on server-side scripting languages and databases, allowing content to be easily updated based on user interaction or database changes . This makes dynamic websites more interactive and flexible, facilitating personalization and real-time updates.

Flexible layouts and media queries function together in responsive web design to ensure compatibility across devices by dynamically adjusting the website's structure and style based on the screen size and device type. Flexible layouts use a grid system that automatically resizes to fit any screen width, allowing for a seamless viewing experience. Media queries further enhance this by applying specific styles based on device characteristics like screen width, height, and resolution, enabling designers to tailor the appearance and functionality of webpages for optimal usability across all devices .

Online banking represents an advantage of internet technology by offering convenience and accessibility, allowing users to perform banking transactions anytime and anywhere without needing to visit a physical branch . However, it also presents disadvantages, such as security risks and the potential for theft of personal information. This threat arises from issues like phishing scams, data breaches, and insufficiently secured networks, which can lead to unauthorized access to sensitive financial data and fraud . The dual nature of online banking showcases both the transformative benefits and the cybersecurity challenges associated with the widespread adoption of internet technologies.

A domain name plays a crucial role in the functioning of a website by acting as a human-readable address that redirects users to the website's IP address . Domain names are preferred over IP addresses because they are easier to remember and use, given their ability to convey meaning and branding. While IP addresses consist of a series of numbers that uniquely identify a server on the internet, domain names provide an intuitive way for users to access web content without needing to remember complex numerical addresses .

The primary benefits of using Sublime Text as an Integrated Development Editor (IDE) for web development include its various features that support code editing and project management. These features include syntax highlighting, auto indentation, file type recognition, and a sidebar with files of a mentioned directory . Sublime Text also supports macros, plug-ins, and packages, which enhance its functionality. Additionally, its problem-solving capabilities and color combination for syntax help developers maintain organization and efficiency in their coding projects .

Tim Berners-Lee invented the World Wide Web by developing the concept of a system of interlinked hypertext documents that users could access via the internet . He developed the first web browser and web server, and implemented the first successful communication between an HTTP client and server via the Internet at CERN in Switzerland in 1989. This invention was pivotal as it laid the groundwork for the development of the web as a platform for communication, information sharing, and a multitude of applications, transforming the internet into a global information medium accessible to everyone .

Responsive web design improves user experience by ensuring that websites adapt and adjust their layout and content based on the screen size and device being used . It employs flexible layouts, media queries, and scalable media to ensure websites look good and function properly on all devices, including desktops, tablets, and smartphones. This adaptability increases accessibility and usability, providing a consistent and optimized viewing experience, regardless of the device used to access the webpage.

HTTP URLs use TCP/IP port 80 and do not encrypt data, making them vulnerable to interception and eavesdropping . HTTPS URLs, on the other hand, use port 443 and incorporate SSL/TLS protocols to encrypt data between the client and the server, providing a secure channel that protects against data breaches and man-in-the-middle attacks . HTTPS thereby significantly enhances security and data privacy by ensuring that the communication between the client and server cannot be easily intercepted.

Vinton Gray Cerf is referred to as the 'Father of the Internet' because he co-designed the TCP/IP protocols and helped develop the architecture and structure of the Internet . These protocols were fundamental in allowing different networks to connect and communicate with each other, effectively forming the backbone of what we now know as the Internet.

You might also like