NOTES DATE: 23 JUNE 2025
1) What is Web Browser?
Answer:
I. A web browser is a software application that allows users to access with other
individuals through world wide web (WWW).
II. It serves as an interface for navigating and displaying webpages or websites as well
as any web-based application.
2) What is Web server?
Answer: A web server is a combination of software and hardware that uses HTTP and other
protocols for responding to the clients those who have made request over WWW.
3) What is Website?
Answer:
I. Website is a collection of webpages which will contain numerous multimedia content
like image, video, audio, text.
II. These websites can be accessed through URL (source link).
III. URL stands for Uniform Resource Locator.
4) Types of Websites:
Answer: There are two types of websites: (A) Static Website (B) Dynamic Website
5) Difference Between Static and Dynamic Website:
Answer:
STATIC:
These are the web pages which
DYNAMIC:
will return the pre-built source
code file by using simple These are the web pages which
languages such as HTML, will return the content which will
CSS, JS. be processed at the run time.
Content will not change. These web pages do not have any
It is faster in processing. pre-built source files rather they
Cheaper development Cost. are built during the run time
Language used are HTML, according to user demand.
CSS, JS. Content will change according to
the requirement.
It is relatively slower than static
website.
More development cost.
Languages used are PHP,
Node.js, etc……
NOTES DATE: 24 JUNE 2025
1) What is HTML?
Answer: HTML stands for Hyper Text Markup Language.
This will help us to construct a basic / fundamental structure for our web page.
HTML mainly consist of tags and their attributes.
2) TAGS IN HTML:
A) What is HTML tag?
Answer: These are the pre define keywords on a web page that will define how the web browser
will be formatted or be displayed. There are two types of tags: (1) paired tag (2) unpaired tag
1)Paired tag: is a tag which will have two pairs of opening tag and closing tag.
example: <html> </html>
<head> </head>
<body> </body> etc.....
2)Unpaired tags: are the tags which will not have any closing tag that is why it is known as self-
closing tags.
example: <br>, <image>, <audio>, <hr>
PAIRED TAGS:
a) <html> </html> TAG: It is the starting tag (first tag) which will be used and within which we are
going to write the entire code. It has two major tags: (a) <head> </head> tag (b) <body>
</body> tag .
b) <head> </head> Tag:
1. It is a tag which will contain the data about data (meta data), which means it will
contain the data about our html document.
2. Head tag mainly consist the information for machine processing and not foe human
readability.
c) <body> </body> Tag:
1. It is the tag which will define the body of our HTML document.
2. We have to make sure that there must be one body tag in our entire HTML document.
UNPAIRED TAGS:
a) Heading TAG: HTML heading tag will be use to provide titles or sub-titles in our HTML
document. IT have 6 types of headings starting from h1....h6.
b) <hr> Tag: it is a tag which will put a horizontal line in our HTML document.
c) <br> Tag: it is a tag which will put a line break in our HTML document.
d) <p> Tag: it is a tag which will define a paragraph in our HTML document.
e) <pre> Tag: It is the tag which will display the content as it is we have written inside the pre
tag.
NOTES DATE: 25 JUNE 2025
UTF-8: Unicode Transformation Format- 8(byte): it’s a process of converting a written text
format into a byte code or binary code for the machine understanding.
Semantic Tags: These are the tags which are define their work behavior in an HTML file.
Asemantic Tags: These are the tags which are not defining their work behavior in an HTML file.
<i> </i> Tag: it is used to convert the text into italic font.
<em></em> Tag: It is used to convert the text into italic font.
<b></b> Tag: It is used to make the word or sentence bold.
<strong></strong> Tag: It is used to make the word or sentence bold.
<mark></mark> Tag: It is used to highlight the sentence or words.
<del></del> or <strike></strike> Tag: These tags are used to create a strike or cross mark above
the sentence or words.
<sub></sub> & <sup></sup> Tags: These Tags are used to write subscript and superscript
respectively.
<u></u> Tag: It is used to underline the word or sentences.
NOTES DATE: 26 JUNE 2025
List Tag: It is a tag which will be used to format our content in list format.
Mainly there are 3 types of list: 1) Ordered List 2) Unordered List 3) Description List
ORDERED LIST:
It is a type of list using which we can arrange our list Items in an Alphabetical or
Numerical order.
Ordered Tag Name is: <ol> </ol>
Attribute for <ol></ol> tag to define type of marking “type” attribute.
<ol></ol> Tag: This tag is used to create a ordered list like “A”, “a”, “1” (default), “i”.
There are 4 Type of Ordered List.
UNORDERED LIST:
Unorder List is used to define list element in non-synchronize form.
The tag Name is : <ul></ul>
<ul></ul> Tag: This tag is used to create a unordered list like default circle, circle, square,
none.
There are 4 types of Unordered List
DESCRIPTION LIST:
Whenever we want to provide description for each list items individually then we will go
for it.
The Tag Name is : <dl></dl>
Within this tag we will define two more tags: (1) <dt>: Description Term (2) <dd>:
Description Data/Details.
<dl><//dl> Tag (Description List): This tag acts as the container for the entire definition
list.
<dt></dt> Tag (Description Term): This tag defines a term or name within the list. It’s
like the title of a description.
<dd></dd> Tag (Description Details): This tag provides the description or definition for
the term defined by the preceding<dt> tag.
ASSIGNMENT1: Create a Layout in the Image using HTML tags.
NOTES DATE: 30 JUNE 2025
1) Anchor Tag: <a></a>
It is a tag using which we can connect all or link one Web page to another. This tag
will contain an attribute which is href (Hyperlink Reference) where we are going to
pass the hyperlink.
There are 4 attribute of anchor tag: “_self”, “_blank”, “_parent”, “_top”.
It contains another attribute which is known as target which will define the nature of
Web page getting open.
2) Audio Tag:
It is a tag which will help a programmer to insert an audio within a HTML Document.
It contains mainly four attributes: (a) controls (b) loop (c)muted (d) autoplay.
3) Video Tag:
It is a tag which will help a programmer to insert a video file in the HTML Document.
OR by using this tag we can enter a video inside our HTML document.
It has all the attributes same as audio tag like: (a) controls (b) loop (c)muted (d)
autoplay.
4) Image Tag:
By using this tag, we can insert an image within our HTML document.
It contains two attributes (a) src (source) (b)alt (alternative)
Assignment 2: Create a web interface where different music sections are
added with their access link and files. (Audio & Video)
NOTES DATE: 1 JULY 2025
5) HTML Tables:
We will use this tag whenever we want to arrange our data in row and column format.
We will use <table></table> Tag to define a table in HTML.
Each row will start with a pair of <tr></tr> Tag.
A <th></th> Tag will define the headers in our HTML table.
The <td></td> tag will define the data under those headings.
NOTES: tr*3>td*3: Basic command to create a same tag multiple time.
Colspan: This is a tag which is used to expand the columns in a table.
Rowspan: This is a tag which is used to expand the rows in a table.
Assignment: 3 – Make a Time Table using Table Tags, colspan and rowspan.
NOTES DATE: 2 JULY 2025
Form Tag:
This Tag will be used to create a HTML form to take inputs from the users.
We have another tag input using which we can take inputs in a fill according to our
requirement. This tag is the most important element in the form tag.
By using different types of attributes, we can take inputs from the user by using input
tag.
Different attributes of input tag are: (1) Text (default attribute) (2) Number (3) E-mail
(4) Date (5) Tel (6) Checkbox (7) Radio Button (8) Range (9) Submit (10) Reset (11) Search
(12) URL (13) Button
NOTES DATE: 3 JULY 2025
CSS (Cascading Style Sheet)
CSS stands for cascading style sheet.
It is not a language rather we can say it is a add on attributes which will be used in order
to beautify our HTML code.
(A) Purpose Of using CSS:
1. Positioning the elements (Layout)
2. Adding Colors (Text, Background, Boarder)
3. Font (Style, Size, Type)
4. Spacing (Margin, Padding)
5. Adding Animation and Transition
(B) How to Add CSS File in HTML File?
There are 3ways we can insert CSS into our HTML document:
1. Inline CSS:
whenever we want to provide styling to an HTML element individually
then we will go for inline CSS.
We will Provide inline CSS by using style attribute.
2. Internal CSS:
whenever we want to provide same styling to multiple elements in
HTML document then we will go for internal CSS.
We will provide internal CSS by using Style Tag Which will be define
inside the head tag.
3. External CSS:
It is the way of inserting CSS where we will create a separate “.CSS” file
and there we will write all the CSS properties.
If we want to insert this external CSS in our HTML document then we
will use link tag inside the head tag.
(C) CSS selectors:
CSS selectors are the pattern which will be used to specify style to our
HTML document targeting particular elements or group of elements.
Types of CSS selectors:
1. Universal Selector
2. Element Selector
3. Class Selector
4. ID Selector
5. Grouping Selector
6. Descendent Selector
7. Pseudo-Element Selector
8. Pseudo Class Selectors
9. Child Selector
10. Adjacent Sibling
11. General Siblings
12. Attributes
(A) Class Selector:
It is a type of attribute using which we can define CSS to that element.
(B) Element Selector:
It is a type of CSS selector where we use HTML element name (tag) to insert or
specify CSS to given element.
(C) ID Selector:
We will insert CSS by using Id given to the HTML element.
(D) Universal Selector:
Whenever we want to apply CSS to all the elements of our HTML tag then we
will go for universal selector.
(E) Grouping Selector: whenever we want to provide same styling for multiple
elements simultaneously then we will go for grouping selector.
(F) Child Selector: It is a type of selectors using which we can provide CSS to the
direct child of an element.
Example:
<div>
<p> ss ssss </p>
</div>
div> p{
statement
}
(G) Descendent Selector: Whenever we want to provide CSS to an element which is
inside another element then we will go for Descendent Selector.
(H) Pseudo-Class Selector: Whenever we want to provide style to an element based on
its state (behavior) like hover, focus, active, visited, link.
(I) Pseudo Element Selector: Whenever we want to provide CSS to a specific part of
element then we will go for pseudo element selector.
P:: first-letter{
color
}
(J) Adjacent Sibling: It is a way of providing CSS to the element those who are
adjacent to each other.
(K) General Sibling Selector: This type of CSS will be given to all the siblings of the
given element.
(L) Attribute Selector: Whenever we want to use styling using attribute then we will
go for attribute selector.
NOTES DATE: 5 JULY 2025
