UNIVERSITY INSTITUTEOF ENGINEERING

Bachelor of Engineering (Computer

Science & Engineering)
WEB DEVELOPMENT (CSO-417)

an overview of web rad

technologies, Role of
DISCOVER . LEARN .
HTML, CSS, and EMPOWER
JavaScript in web
design, application
and development
tools Created By: Inakshi

University Institute of Engineering(UIE)

 Department of Computer Science and Engineering (CSE)

Content
• an overview of web technologies,
• Role of HTML, CSS,
• JavaScript in web design
• Application and development tools

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Introduction to web technologies:

• Web technologies refer to the collection of tools,
languages, and protocols used for building and delivering
websites and web applications. They enable the creation,
presentation, and interaction with content on the World
Wide Web.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Key components of web technologies

• HyperText Markup Language (HTML): The standard markup language

used for structuring and presenting content on the web.
• Cascading Style Sheets (CSS): A style sheet language used for describing
the look and formatting of a document written in HTML.JavaScript: A
programming language that allows for dynamic and interactive behavior on
web pages.
• Server-side technologies: Backend technologies such as PHP, Ruby, Python,
and Java, used to handle server-side processing and data management.
• Database systems: Software used to store, retrieve, and manage data for
web applications, such as MySQL, PostgreSQL, or MongoDB.
• Web servers: Software that delivers web pages and handles HTTP requests,
such as Apache, Nginx, or Microsoft IIS.
• Client-side frameworks and libraries: Tools like React, Angular, and Vue.js
that simplify the development of web applications by providing pre-built
components and functionality.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Role of HTML, CSS, and JavaScript in Web

Design
HTML (HyperText Markup Language):

• Responsible for the structure and content of a web page.Defines the elements and layout of the
page, including headings, paragraphs, images, links, and more.
• Provides a semantic structure that helps search engines and assistive technologies understand
the content.
CSS (Cascading Style Sheets):

• Handles the presentation and visual styling of a web page.

• Allows designers to define colors, fonts, layouts, and other visual properties of HTML elements.
• Enables responsive design, media queries, and flexible layouts to adapt to different screen sizes
and devices.
JavaScript:

• Adds interactivity and behavior to web pages.

• Enables dynamic updates, animations, form validations, and other client-side functionality.
• Facilitates communication with servers, making asynchronous requests and handling responses
(AJAX).

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Role of HTML, CSS, and JavaScript in Web

Design
HTML (HyperText Markup Language):

• Responsible for the structure and content of a web

page.Defines the elements and layout of the page,
including headings, paragraphs, images, links, and more.
• Provides a semantic structure that helps search engines
and assistive technologies understand the content.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Role of HTML, CSS, and JavaScript in Web

Design
CSS (Cascading Style Sheets):

• Handles the presentation and visual styling of a web page.

• Allows designers to define colors, fonts, layouts, and other visual
properties of HTML elements.
• Enables responsive design, media queries, and flexible layouts to adapt
to different screen sizes and devices.
JavaScript:

• Adds interactivity and behavior to web pages.

• Enables dynamic updates, animations, form validations, and other client-
side functionality.
• Facilitates communication with servers, making asynchronous requests
and handling responses (AJAX).

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Application and development tools for HTML, CSS,

JavaScript, XML, and PHP
1. Integrated Development Environments (IDEs):
- Visual Studio Code: A popular, lightweight, and highly customizable code editor with
excellent support for HTML, CSS, JavaScript, XML, and PHP. It offers numerous extensions
and features for efficient web development.
- Sublime Text: A lightweight and versatile text editor known for its speed and simplicity. It
supports multiple programming languages, including HTML, CSS, JavaScript, XML, and PHP.
- Atom: A hackable text editor developed by GitHub. It provides a user-friendly interface
and extensive customization options, making it suitable for web development projects
involving HTML, CSS, JavaScript, XML, and PHP.

2. Code Editors:
- Notepad++: A free and feature-rich code editor for Windows that supports syntax
highlighting and code folding for various languages, including HTML, CSS, JavaScript, XML,
and PHP.
- Brackets: An open-source code editor specifically designed for web development. It
offers real-time preview, inline editing, and a strong focus on HTML, CSS, and JavaScript.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Application and development tools for HTML, CSS,

JavaScript, XML, and PHP
. Browser Developer Tools:
- Chrome DevTools: A comprehensive set of web development tools built into the
Chrome browser. It allows you to inspect and modify HTML, CSS, JavaScript, and
analyze network requests and performance.
- Firefox Developer Tools: Similar to Chrome DevTools, it provides a range of
debugging and profiling tools for HTML, CSS, JavaScript, and network analysis.
- Safari Web Inspector: A powerful set of development tools integrated into the
Safari browser, allowing you to inspect and debug web content on macOS and iOS.

4. Version Control Systems:

- Git: A widely used distributed version control system that allows for efficient
collaboration and tracking of changes in code repositories. It is well-suited for
managing HTML, CSS, JavaScript, XML, and PHP projects.
- GitHub: A web-based hosting service for version control repositories that utilizes
Git. It provides additional collaboration features and serves as a platform for open-
source projects and code sharing.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Application and development tools for HTML, CSS,

JavaScript, XML, and PHP
5. Package Managers and Task Runners:
- npm (Node Package Manager): The default package manager for
JavaScript, often used to manage dependencies and build scripts for web
projects.
- Yarn: Another popular package manager for JavaScript that offers
improved performance and additional features over npm.
- Gulp: A widely used task runner that helps automate repetitive tasks
during development, such as minification, compilation, and optimization
of HTML, CSS, JavaScript, XML, and PHP files.

These tools can greatly enhance your productivity and streamline the
development process when working with HTML, CSS, JavaScript, XML,
and PHP. It's important to explore and choose the tools that best fit your
workflow and project requirements.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Summary

HTML: Hypertext Markup Language is the standard markup language used for creating the
structure and content of web pages. It provides a set of tags and attributes to define elements such
as headings, paragraphs, images, links, and more.

CSS: Cascading Style Sheets is a style sheet language used for describing the presentation and
visual styling of HTML elements. It allows developers to define colors, fonts, layouts, and other
visual properties to create visually appealing and consistent web pages.

JavaScript: JavaScript is a programming language that adds interactivity and behavior to web
pages. It enables dynamic updates, form validations, animations, and other client-side
functionality. It also facilitates communication with servers and handling asynchronous requests.

XML: Extensible Markup Language is a markup language that defines rules for encoding
documents in a format that is both human-readable and machine-readable. It is commonly used
for storing and exchanging structured data on the web.

PHP: PHP is a server-side scripting language primarily used for web development. It is embedded
in HTML and enables the execution of dynamic web pages, interacting with databases, handling
form submissions, and performing server-side processing.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

REFERENCES
HTML:
• - MDN Web Docs - HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
• - W3Schools HTML Tutorial: https://www.w3schools.com/html/
• - HTML.com: https://html.com/

CSS:
• - MDN Web Docs - CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
• - W3Schools CSS Tutorial: https://www.w3schools.com/css/
• - CSS-Tricks: https://css-tricks.com/

JavaScript:
• - MDN Web Docs - JavaScript:
https://developer.mozilla.org/en-US/docs/Web/JavaScript
• - W3Schools JavaScript Tutorial: https://www.w3schools.com/js/
• - JavaScript.info: https://javascript.info/

University Institute of Engineering (UIE)