Digital & Technological Solution Class Notes Unit 1
Web Development
Web development is the process of building and maintaining websites. It involves coding,
designing, and structuring content for the internet.
Types of Web Development:
Front-End Development: This involves the creation of the user interface (UI) and the
visual aspects of a website. Front-end developers use technologies like HTML, CSS, and
JavaScript to design the layout, colors, fonts, and interactive elements that users see and
interact with.
Back-End Development: This focuses on the server-side of a website, dealing with
databases, and application functionality. Back-end developers use languages like PHP,
Java, Python, and [Link] to ensure that the website functions correctly and efficiently
behind the scenes.
Full-Stack Development: Full-stack developers handle both front-end and back-end
development, providing a holistic approach to web development. They are proficient in
both client-side and server-side technologies and can manage the entire development
process.
Web Protocols:
HTTP (Hypertext Transfer Protocol): It allows communication between web browsers (like
Google Chrome or Firefox) and websites. When we visit a website, our browser uses HTTP to
send a request to the server hosting that site, and the server sends back the data needed to display
the page.
HTTPS (Hypertext Transfer Protocol Secure): HTTPS is the secure variant of HTTP and is
used to communicate between the user's browser and the website, ensuring that data transfer is
encrypted for added security.
HTML (Hypertext Markup Language)
HTML is a standard language for creating web pages and web applications. It is supported
by all web browsers and it is easy to learn and code.
HTML files are created either in notepad or plain text editors with an extension .htm/.html.
It was invented by Tim Berners-Lee in 1989, it is widely used to interpret and compose text,
images, and other material into visual or audible web pages.
Web browsers receive HTML documents from a web server or from local storage and render
the documents into multimedia web pages.
HTML elements are the building blocks of HTML pages.
1
Digital & Technological Solution Class Notes Unit 1
HTML ELEMENTS: An HTML element is a basic building block to create a webpage. It is
created by a start tag, content, and end tag. In an HTML element, the content is placed between a
start and end tag.
<tag_name> Content </tag_name>
HTML tags
HTML Tags are the keywords that can be used for a specific purpose to display and
format the content on the webpage.
It is used to define elements on the page, like headings, paragraphs, images, links etc.
These are enclosed in angle brackets, like <tag_name>, which tells the browser how to
display content. Each and every tag has its own meaning. There are two types of tags in
HTML:
1. Container Tag
A container tag is also known as a paired tag in HTML. It comes with a pair, which
means it has opening and closing tags.
E.g.:
<p> this is a paragraph tag. </p>
<p>, <a>, <html>, <head>, <title>, etc. are some examples of container tags in HTML.
2. Empty Tag
An empty tag, also called an unpaired HTML tag, has only an opening tag. It doesn’t
require a closing tag. They are used to insert a single element in HTML documents.
E.g.:
<hr>
<img>, <br>, and <hr> are some empty tags in HTML.
Commonly Used Tags in HTML
1. Document Structure Tags
Tag Definition Example
<html> It is the root tag of an HTML document. <html>…</html>
<head> It contains the metadata (data used by <head>…</head>
browsers) like title, links, and scripts.
<title> It is used to set the title of the page. <title>My Webpage</title>
<body> It contains all the tags that are used to display <body>…</body>
the content of the webpage.
2
Digital & Technological Solution Class Notes Unit 1
2. Content Tags
Tag Definition Example
<h1> to It is used to add headings in your <h1>Main Heading</h1>
<h6> document. <h1> is the largest and
<h6> is the smallest heading.
<p> Paragraph <p>This is a paragraph</p>
<br> It is used to break the line. <br>
<hr> It is used to place a horizontal <hr>
line.
<img> Displays an image. <img src="url" width="" height="">
<style> Adds CSS styling within HTML. <tagname style="property:value;">
Interaction of HTML, CSS, and JavaScript:
HTML, CSS, and JavaScript work together to create modern web pages. Each plays a
unique role - HTML gives structure, CSS adds style, and JavaScript brings interactivity.
HTML structures the webpage and defines content elements.
CSS enhances visual appearance like colors, fonts, and layout.
JavaScript adds interactivity and dynamic features.
Together, they make web pages functional, attractive, and user-friendly.
Importance of HTML
HTML is the fundamental building blocks of the World Wide Web. Any page that we visit
on the web contains HTML tags.
HTML defines webpage structure and helps to design websites.
With the help of CSS and JavaScript, HTML helps to create beautiful and interactive
websites.
HTML helps in search engine optimization by optimizing the tags based on the targeted
keywords.
HTML helps to navigate (or browse) different pages and websites from anywhere on the
internet.
CSS:
CSS stands for Cascading Style Sheets. It is a style sheet language used to style and
enhance website presentation.
It allows us to apply styles to HTML documents by prescribing colors, fonts, spacing, and
positioning.
The main advantages are the separation of content (in HTML) and styling (in CSS) and the
same CSS rules can be used across all pages and not have to be rewritten.