Scribd
Upload
37 views

Web Development Gehu Notes

Uploaded by

JATIN
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

Web Development Gehu Notes

Uploaded by

JATIN
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 81

Q1.

Difference between html4 and html5

Ans

HTML4 HTML5

It is the fifth iteration of


It is the fourth iteration of HTML. HTML – an update over
HTML4.

Lengthy Doctype declaration: <!DOCTYPE HTML PUBLIC


Simple Doctype declaration:
“-//W3C//DTD HTML 4.01//EN”
<!DOCTYPE html>
“http://www.w3.org/TR/html4/strict.dtd”>

Comes with new HTML tags,


including <audio>, <video>,
These tags are not available in HTML4.
<header>, <footer>, <canvas>,
<article>, and more.

Multimedia supporting tags are


Multimedia supporting tags are not available.
available.

It can handle inaccurate syntax


Difficult for developers to handle inaccurate syntax errors.
errors.

HTML5 uses the web SQL


database, web storage, and
To store important data on the client-side, the browser’s cache application cache to store
is used. offline data that can be
accessed through
HTML5’s JavaScript interface.

<div> tag is used for separating two parts. Does not require <div> tag.

Adding a figure with a caption


Adding a figure with a caption to a document is not possible. to a document is semantically
possible.

Q2. explain features of html5 and also explain sementic elements with examples
What is HTML5?
As the name suggests, HTML5 is the 5th version of HTML (Hypertext Markup Language). It is
an upgraded version of HTML4.01. HTML5 comes with a variety of new and advanced features
that make the life of developers more flexible.

Top 10 HTML5 Features


The following are the top 10 features of HTML5 that make it a popular language for website
development.

1. Nav Tag

The <nav> tag helps in defining a set of navigation links. It helps create a website section
containing navigation links (within the current document or to another document). A few
examples of navigation links are the table of contents and indexes.

Example of Nav Tag

<!DOCTYPE html>

<html>

<body>

<h1>Example of HTML nav Tag</h1>

<h2>Online Programming Courses</h2>

<nav>

<a href="#">HTML</a> |

<a href="#">CSS</a> |

<a href="#">JavaScript</a> |

<a href="#">Python</a>

</nav>

</body>
</html>
Copy code

Output

2. Audio & Video Tags

With Audio and Video tags, developers can embed videos or audio into their websites. For
styling the video tag, developers can use CSS and CSS3.

Example of the video tag in HTML

<!DOCTYPE html>

<html>

<body>

<video width="400px" height="300px" controls>

<source src=" movie.mp4 " type="video/mp4">

</video>

</body>

</html>
Copy code

In the above HTML code:

 width and height are for setting the dimensions for the video element
 controls attribute creates buttons for playback (Play, Pause, etc.)
 src (source) tag provides the URL or media source
 type represents the video type

Output
3. Header

The <header> element in HTML5 contains introductory content. It can include a set of
introductory or navigational support on a website. Typically, the header element contains heading
elements, logos or icons, a search form, author’s information, etc.

Example of header element in HTML5

<!DOCTYPE html>

<html>

<body>

<h1>Shiksha Online</h1>

<h3> Find courses that are the best for your career </h3>

<header>

<a href=

"https://www.shiksha.com/online-courses/technology-courses-certification-training-ct139">

Technology</a> |

<a href=

"https://www.shiksha.com/online-courses/data-science-courses-certification-training-ct123">

Data Science</a> |
<a href=

"https://www.shiksha.com/online-courses/management-courses-certification-training-ct135">

Management</a> |

<a href=

"https://www.shiksha.com/online-courses/articles/">

Blog</a> |

</header>

</body>

</html>

Copy code

Output

4. Footer

The <footer> tag defines the footer of a document or a section. Typically, the footer contains
information related to the author, copyright, contact information, sitemap, related documents,
back-to-top links, etc. There can be more than one footer element in one document.

Example of the footer in HTML5

<!DOCTYPE html>

<html>

<body>
<footer>

<p>Posted by: Deepali Sharma</p>

<p>Contact information: <a href="mailto:[email protected]">

[email protected]</a>.</p>

</footer>

</body>

</html>
Copy code

Output

5. Figure and figcaption

These elements help users to insert an image with its caption. The figcaption tag is used to add a
description for the image.

Example of Figcaption

<!DOCTYPE html>

<html>

<body>

<figure>

<img src="red tulips.jpg"

alt="Red Tulips">

<figcaption>Red Tulips in a Garden</figcaption>

</figure>
</body>

</html>
Copy code

Output

6. Canvas Tag

The canvas tag in HTML5 helps users draw graphics or images on the fly using JavaScript. We
can use it for drawing paths, boxes, circles, adding images, etc. The canvas tag has two attributes:
width and height for setting the width and height of the canvas.

Example of canvas tag in HTML5

<!DOCTYPE html>

<html>

<body>

<canvas id="Canvas1" width="400" height="100" style="border:2px solid;">

</canvas>

</body>

</html>
Copy code
Output

7. Mark

The <mark> element highlights a particular text of special interest to the user in an HTML
document.

Example of the mark element

<!DOCTYPE html>

<html>

<body>

<p> Grow your skillset with <mark>Shiksha Online.</mark> Find the <mark>best online
courses</mark> and certifications in management, technology, programming, and data
science.</p>

</body>

</html>
Copy code

Output

8. Main Tag

This tag defines the important content of the <body> of a document.

Example of Main Tag


<!DOCTYPE html>

<html>

<body>

<header>

<p>Header content</p>

</header>

<main>

<p>Main Content</p>

<h2>Shiksha Online</h2>

<p> Find courses that are best for your career </p>

</main>

</body>

</html>
Copy code

Output

9. Progress Tag

The progress tag helps users check the progress of a task during the execution. Users will need to
define the dynamically changing values of the progress bar with the scripts (JavaScript).

Example of progress tag in HTML5


<!DOCTYPE html>

<html>

<body>

<span>Loading:</span>

<progress value="55" max="100"></progress>

</body>

</html>
Copy code

Output

10. Section Tag

The <section> element defines specific sections and subsections in the document.

Example of Section in HTML5

<!DOCTYPE html>

<html>

<body>

<section>

<h1>Section 1</h1>

<p>Section 1 content</p>

</section>

<section>
<h1>Section 2</h1>

<p>Section 2 content</p>

</section>

</body>

</html>
Copy code

Output

11. Media Control

One of the features of HTML 5 is <video> and <audio> tags that make it easier to use. Rather
than just playing media, it helps specify control images for buttons and playback
programmatically. It also comes with the <figure> tag that plays a significant role in rendering
images on browsers. Representing captions using <figcaption> alongside <figure> tag is also
possible.

A figure element is displayed like this:


Change the default CSS settings to see the effect.

Conclusion

So, this is all about the top features of HTML5. But by understanding all these features, we have
only scratched the surface of what is possible with HTML5. Check out our other blogs on HTML
to take your HTML learning and coding journey to the next level.

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-
readable way.

Elements such as <header>, <footer> and <article> are all considered semantic because they
accurately describe the purpose of the element and the type of content that is inside them.

What are Semantic Elements?

HTML was originally created as a markup language to describe documents on the early internet. As
the internet grew and was adopted by more people, its needs changed.

Where the internet was originally intended for sharing scientific documents, now people wanted to
share other things as well. Very quickly, people started wanting to make the web look nicer.

Because the web was not initially built to be designed, programmers used different hacks to get
things laid out in different ways. Rather than using the <table></table> to describe information using
a table, programmers would use them to position other elements on a page.

As the use of visually designed layouts progressed, programmers started to use a generic “non-
semantic” tag like <div>. They would often give these elements a class or id attribute to describe
their purpose. For example, instead of <header> this was often written as <div class="header">.

As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites
today.

List of new semantic elements


The semantic elements added in HTML5 are:

 <article>

 <aside>

 <details>

 <figcaption>

 <figure>

 <footer>

 <header>

 <main>

 <mark>

 <nav>

 <section>

 <summary>

 <time>

Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or less
like <div> elements. They group other elements together into page sections. However where
a <div> tag could contain any type of information, it is easy to identify what sort of information
would go in a semantic <header> region.

An example of semantic element layout by w3schools

Why use semantic elements?

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of
code uses semantic elements:

<header></header>

<section>

<article>

<figure>

<img>

<figcaption></figcaption>

</figure>

</article>

</section>

<footer></footer>
Whilst this second block of code uses non-semantic elements:

<div id="header"></div>

<div class="section">

<div class="article">

<div class="figure">

<img>

<div class="figcaption"></div>

</div>

</div>

</div>

<div id="footer"></div>

First, it is much easier to read. This is probably the first thing you will notice when looking at the first
block of code using semantic elements. This is a small example, but as a programmer you can be
reading through hundreds or thousands of lines of code. The easier it is to read and understand that
code, the easier it makes your job.

It has greater accessibility. You are not the only one that finds semantic elements easier to
understand. Search engines and assistive technologies (like screen readers for users with a sight
impairment) are also able to better understand the context and content of your website, meaning a
better experience for your users.

Overall, semantic elements also lead to more consistent code. When creating a header using non-
semantic elements, different programmers might write this as <div class="header">, <div
id="header">, <div class="head">, or simply <div>. There are so many ways that you can create a
header element, and they all depend on the personal preference of the programmer. By creating a
standard semantic element, it makes it easier for everyone.

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To
this day, some of us might still be confused as to why so many different elements that doesn’t seem
to show any major changes.

Q3. Explain internal and external hyperlink with example

Ans. 1. Internal Link : Internal links are hyperlinks that direct the readers to a target page on your
website. Internal link is a link from one page to another page on the same domain.
Example are website navigation.

Advantages of good internal link are :

 Internal link improves usability through anchor text.

 Internal linking improves page rank.

 Internal linking boots page views.


 Internal link decreases the bounce rate.

 Internal linking improves the indexing of your site.

2. External Link : External links are that which wants customers clicking on links that directs them
away from your website. External links are sometimes called outbound links are an important part of
search engine optimization.
Example of external link are example.com, someplace.com etc.

Advantages of good external linking are :

 External link may helps the readers.

 Good external link helps to improve the authority of your website.

 Linking to outside website will not hurt your page rank .

 External link is just like your giving some extra resources to read that.

 External links help in enhancing credibility.

Difference between external link and internal link :


External link Internal link

It is difficult to control. It is easy, fast and free to control.

It appears in website navigation as well as in


It appears within the body text, in content. the content.

It passes SEO authority pages on your site,


It passes SEO authority from other site to increasing the “page authority” of specific
your site, increasing your “domain authority”. pages.

It has more value. It has less value.

It connects to your external pages. It connects to your internal pages.

Domain 1 A links to Domain 2 b. Domain 1 A links to B.

It helps bots to find other web pages on your


It improves the quality of web pages. site.

It also helps in increasing traffic to your


It helps in increasing traffic to your website. website.

For example of internal and external hyperlink refer to vscode

Q4 Expain image and image map with example

Ans An Image Map refers to the clickable image having a clickable area that can be used to navigate
to the various link to other web pages or the specific section of the same web page. The <map>
tag can be used to define the image map & the clickable area inside the image can be defined with
the <area> tag.

Syntax:

<map name="map-name"></map>

Attribute value:
 name: It is used to associate the map with the image in which it is used.

Note: The name attribute in the map must have the same value as the image’s usemap attribute.

In order to map the image with different image areas, we need to specify the particular shape &
associated coordinate points. Along with this, we also need to link the image using the <img> tag.

Example 1: In this example, the highlighted area is the mapped area, clicking on it will lead to the
website. We can also use an area tag with an image map. It is used to direct the user to different links
after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag.

 HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible"

content="IE=edge">

<meta name="viewport" content=

"width=device-width, initial-scale=1.0">

</head>

<body>

<img src=

"https://media.geeksforgeeks.org/wp-content/uploads/array-2.png"

alt="gfgimage" usemap="#mapID">

<map name="mapID">

<area shape="rect" coords="34, 44, 270, 350"

href="https://www.geeksforgeeks.org/data-structures/?ref=shm">

</map>

</body>

</html>

Output:
Example 2: In this example, we are creating a map of three shapes. If we click on each shape, then an
image map figure is displayed.

 HTML

<!DOCTYPE html>

<html>

<body style="text-align:center">

<h2 style="color:green;">

GeeksforGeeks

</h2>

<img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"

alt="" width="300" height="119" class=

"aligncenter size-medium wp-image-910965"

usemap="#shapemap" />

<map name="shapemap">

<area shape="poly" coords="59, 31, 28, 83, 91, 83" href=


"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"

alt="Triangle">

<area shape="circle" coords="155, 56, 26" href=

"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"

alt="Circle">

<area shape="rect" coords="224, 30, 276, 82" href=

"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"

alt="Square">

</map>

</body>

</html>

Output:
Q5.Explain closed and open tags with examples

Ans. Self closing tags

 A self-closing tag in HTML is a kind of HTML tag that does not need to be closed
manually by its closing tag, which means it does not have a separate closing tag as
</tag>. Some few self-closing tags are <input/>, <hr/>, <br/>, <img/>, etc.
 Self-closing tags in HTML are sometimes also known as empty tags, void
tags, singletons tags, etc. This means that these tags have no content and cannot have
any children.

Complete List of Self-Closing Tags for HTML5


Tag Description

The HTML <area> tag specifies an area within an image map with
predetermined clickable zones based on coordinates, which subsequently
<area> accepts a URL and behaves as a hyperlink. This element can only be used
inside an <map> element.

The HTML <base> tag specifies a base URI, often known as a base URL,
for relative links in a document. A document can only include one <base>
element. For example, you can specify the base URL once in the header
<base>
area of your page, and all subsequent relative links will utilize that URL as
a starting point.

The HTML <br> tag is used to create a line break in the text. It is typically
employed in poems or addresses where line division is required. It is an
empty tag, which means it contains no content and is referred to as a void
<br>
element. Including the <br> tag in the HTML code functions similarly to
pressing the enter key in a word processor.

The HTML <col> tag specifies the attributes for columns contained within
the <colgroup> tag. This allows you to format or add a class to a column or
group of columns rather than each individual cell. It is most commonly
<col>
found within an <colgroup> element. This element specifies the style
property for each column.

The HTML <embed> tag is used to embed external applications, which are
typically multimedia elements such as audio or video, at the specified place
<embed in an HTML document. It serves as a container for plug-ins such as flash
> animations. This is a new tag in HTML 5, and it just requires the beginning
tag.

<hr> The HTML <hr> tag is used to insert a horizontal rule or a paragraph-level
Tag Description

thematic break in a Html document to split or separate document sections. It


is used when the topic of your HTML content abruptly changes. It
divides them by drawing a horizontal line. The <hr> tag is an empty tag that
does not require a closing tag. For example, a change of scene in a story or
a switch of the topic within a segment.

The HTML <img> tag is used to display or embed an image on the web
page. The HTML image element is an inline and empty element that only
<img>
includes attributes; closing tags are not used in the image element.

The HTML <input> tag is used to create interactive controls for web-based
forms to accept data from the user; depending on the device and user agent,
a wide variety of input data and control widgets are accessible. The element
is among the most powerful and complex in all HTML tags due to the vast
<input>
amount of input types and attribute combinations. It is used inside the
<form> element to declare input controls that allow users to enter data.
<label> can be used to define labels for the input element.

The HTML <link> tag is used to establish a connection between a current


document and an external resource. The link tag is mainly used to connect
to external sheets and establish site icons (both "favicon" style icons and
icons for the home screen and apps on mobile devices), among other things.
<link>
This element can appear more than once, but it only appears in the head
section. The link element's values indicate how the item is linked to and is
related to the containing page.

The HTML <meta> tag allows you to add metadata - extra essential
information about a document in a number of ways. The <meta> elements
can be used to incorporate name/value pairs specifying HTML document
features such as expiry date, author, a list of keywords, document author,
<meta> etc. You can include more than one meta tag in your document depending
on the information you wish to maintain. Still, in general, meta tags do not
affect the physical appearance of the document. Thus it makes no difference
whether you include them or not.

The HTML <param> tag is used to pass a parameter to the object associated
with the <object> element for plug-ins. We can use several <param> tags
within an <object> element in any order, but each tag must have a name and
<param
value attribute and should be inserted at the beginning of the content. The
>
parameter tag governs the behavior of the <object> element by specifying a
distinct pair of name and value attributes, such as autoplay, controller, etc.

<source> The HTML <source> tag is used as a child element to define multiple
media resources for the <audio>, <video>, and <image> elements. It is
widely used to provide the same media material in several file formats, such
as mp3, mp4, and so on, in order to enable compatibility with a wide range
of browsers due to their varying support for image and media file
Tag Description

formats. Basically, it is used to attach multimedia assets such as audio,


video, and images.
The HTML <track> tag is used as a child element of <audio> and <video>
elements in order to define time-based text tracks for a media file. It is used
to include a subtitle, caption, or any other type of text that will be rendered
<track> when a media file gets displayed. For example, it allows you to set timed
text tracks (or time-based data) to handle subtitles automatically. WebVTT
(Web Video Text Tracks) format (.vtt files) is used for the tracks.

The HTML <wbr> tag stands for word break opportunity. This tag denotes
a spot within the text where the browser may optionally break a line, even
though its line-breaking rules would not otherwise cause a break at that
<wbr>
location. It is typically used when the employed term is too long, and there
is a risk that the browser would break lines at the incorrect location in order
to fit the content.
Opening and closing tags

HTML code is made up of elements. Many elements (but not all) are made up
of opening and closing tags.

The opening tag is made up of the element’s symbol wrapped in angle brackets, like
this (this example is for a paragraph element):

<p>

The closing tag is made up of the element’s symbol preceded by a forward slash and
wrapped in angle brackets, like this:

</p>

The text you want to display on your web page is placed between the opening and
closing tags, like this:

<p>Text goes between the opening and closing brackets.</p>

By default, browsers will render the text differently depending on which element is
being used. Here are some examples of different elements you can use to wrap text:

<h1>This text will be rendered as big and bold in the browser.</h1>

<p>This text will be rendered in a normal font size.</p>


<small>This text will be rendered in a small font size.</small>

Q6. Explain list and its various types with example

Ans

HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)

3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

1. <ol>

2. <li>Aries</li>

3. <li>Bingo</li>

4. <li>Leo</li>

5. <li>Oracle</li>

6. </ol>

Test it Now

Output:

1. Aries

2. Bingo

3. Leo

4. Oracle

Click here for full details of HTML ordered list. HTML Ordered List

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also.
The Unordered list starts with <ul> tag and list items start with the <li> tag.

1. <ul>
2. <li>Aries</li>

3. <li>Bingo</li>

4. <li>Leo</li>

5. <li>Oracle</li>

6. </ul>

Test it Now

Output:

o Aries

o Bingo

o Leo

o Oracle

Click here for full details of HTML unordered list. HTML Unordered List

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as
definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-
value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.

3. <dd> tag defines the term definition (description).

1. <dl>

2. <dt>Aries</dt>

3. <dd>-One of the 12 horoscope sign.</dd>

4. <dt>Bingo</dt>

5. <dd>-One of my evening snacks</dd>

6. <dt>Leo</dt>

7. <dd>-It is also an one of the 12 horoscope sign.</dd>

8. <dt>Oracle</dt>

9. <dd>-It is a multinational technology corporation.</dd>


10. </dl>

Test it Now

Output:

Aries

-One of the 12 horoscope sign.

Bingo

-One of my evening snacks

Leo

-It is also an one of the 12 horoscope sign.

Oracle

-It is a multinational technology corporation.

Click here for full details of HTML description list. HTML Description List

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a numbered list then
such type of list will called as nested list.

Code:

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>Nested list</title>

5. </head>

6. <body>

7. <p>List of Indian States with thier capital</p>

8. <ol>

9. <li>Delhi

10. <ul>

11. <li>NewDelhi</li>

12. </ul>

13. </li>
14. <li>Haryana

15. <ul>

16. <li>Chandigarh</li>

17. </ul>

18. </li>

19. <li>Gujarat

20. <ul>

21. <li>Gandhinagar</li>

22. </ul>

23. </li>

24. <li>Rajasthan

25. <ul>

26. <li>Jaipur</li>

27. </ul>

28. </li>

29. <li>Maharashtra

30. <ul>

31. <li>Mumbai</li>

32. </ul>

33. </li>

34. <li>Uttarpradesh

35. <ul>

36. <li>Lucknow</li></ul>

37. </li>

38. </ol>

39. </body>

40. </html>

Test it Now

Output:
Q7. Write short note on

Or

Explain form handling and explain various terms

1. Label

Ans. The <label> tag in HTML is used to provide a usability improvement for mouse users i.e, if a user
clicks on the text within the <label> element, it toggles the control. The <label> tag defines the label
for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.

The <label> tag can be used in two ways:

 Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs
a for attribute whose value is the same as input id.

 Alternatively, <input> tag use directly inside the <label> tag. In this case, the for and id
attributes are not needed because the association is implicit.

Syntax:

<label> form content... </label>

Attribute Value:

 for: It refers to the input control that this label is for. Its value must be the same as the value
of the input control’s “id” attribute.

 form: It refers to the form to which the label belongs to.


Example 1: Here we will use the input tag outside the label tag.

 html

<!DOCTYPE html>

<html>

<body>

<h1>GeeksforGeeks</h1>

<strong>HTML label Tag</strong>

<form>

<!-- Starts label tags from here -->

<label for="student">

Student

</label>

<input type="radio" name="Occupation"

id="student" value="student"><br>

<label for="business">

Business

</label>

<input type="radio" name="Occupation"

id="business" value="business"><br>

<label for="other">

Other

</label>

<!-- Ends label tags here -->


<input type="radio" name="Occupation"

id="other" value="other">

</form>

</body>

</html>

Output:

Example 2: Here we will use the input tag inside the label tag.

 html

<!DOCTYPE html>

<html>

<body>

<h1>GeeksforGeeks</h1>

<strong>HTML label Tag </strong>

<form>

<!-- label tag starts from here -->

<label>

Male

<input type="radio" name="gender"

id="male" value="male" />

</label><br/>
<label>

Female

<input type="radio" name="gender"

id="female" value="female" />

</label><br/>

<label>

Other

<input type="radio" name="gender"

id="other" value="other" />

</label>

<!-- label tag ends from here -->

</form>

</body>

</html>

Output:

2. Table

Ans. HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to use div tag over table to manage the layout
of the page .
HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

1. <table>

2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

4. <tr><td>James</td><td>William</td><td>80</td></tr>

5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

7. </table>

Test it Now
Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is not recommended
now.

1. <table border="1">

2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

4. <tr><td>James</td><td>William</td><td>80</td></tr>

5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

7. </table>

Test it Now

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72
2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

1. <style>

2. table, th, td {

3. border: 1px solid black;

4. }

5. </style>

Test it Now

You can collapse all the borders in one border by border-collapse property. It will collapse the
border into one.

1. <style>

2. table, th, td {

3. border: 2px solid black;

4. border-collapse: collapse;

5. }

6. </style>

Test it Now

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML

2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So
let's see the code of CSS.
1. <style>

2. table, th, td {

3. border: 1px solid pink;

4. border-collapse: collapse;

5. }

6. th, td {

7. padding: 10px;

8. }

9. </style>

Test it Now

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table width:

We can specify the HTML table width using the CSS width property. It can be specify in pixels or
percentage.

We can adjust our table width as per our requirement. Following is the example to display table
with width.

1. table{

2. width: 100%;

3. }

Example:

1. <!DOCTYPE html>

2. <html>
3. <head>

4. <title>table</title>

5. <style>

6. table{

7. border-collapse: collapse;

8. width: 100%;

9. }

10. th,td{

11. border: 2px solid green;

12. padding: 15px;

13. }

14.

15. </style>

16. </head>

17. <body>

18. <table>

19. <tr>

20. <th>1 header</th>

21. <th>1 header</th>

22. <th>1 header</th>

23. </tr>

24. <tr>

25. <td>1data</td>

26. <td>1data</td>

27. <td>1data</td>

28. </tr>

29. <tr>

30. <td>2 data</td>

31. <td>2 data</td>

32. <td>2 data</td>

33. </tr>
34. <tr>

35. <td>3 data</td>

36. <td>3 data</td>

37. <td>3 data</td>

38. </tr>

39. </table>

40. </body>

41. </html>

Test it Now

Output:

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

It will divide one cell/row into multiple columns, and the number of columns depend on the
value of colspan attribute.

Let's see the example that span two columns.

CSS code:

1. <style>

2. table, th, td {

3. border: 1px solid black;

4. border-collapse: collapse;
5. }

6. th, td {

7. padding: 5px;

8. }

9. </style>

HTML code:

1. <table style="width:100%">

2. <tr>

3. <th>Name</th>

4. <th colspan="2">Mobile No.</th>

5. </tr>

6. <tr>

7. <td>Ajeet Maurya</td>

8. <td>7503520801</td>

9. <td>9555879135</td>

10. </tr>

11. </table>

Test it Now

Output:

Name Mobile No.

Ajeet Maurya 7503520801 9555879135

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

It will divide a cell into multiple rows. The number of divided rows will depend on rowspan
values.

Let's see the example that span two rows.

CSS code:

1. <style>

2. table, th, td {

3. border: 1px solid black;


4. border-collapse: collapse;

5. }

6. th, td {

7. padding: 10px;

8. }

9. </style>

HTML code:

1. <table>

2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>

3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>

4. <tr><td>9555879135</td></tr>

5. </table>

Test it Now

Output:

Name Ajeet Maurya

7503520801
Mobile No.
9555879135

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.

1. <table>

2. <caption>Student Records</caption>

3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>

5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>

6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>

7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>

8. </table>

Test it Now
Styling HTML table even and odd cells

CSS code:

1. <style>

2. table, th, td {

3. border: 1px solid black;

4. border-collapse: collapse;

5. }

6. th, td {

7. padding: 10px;

8. }

9. table#alter tr:nth-child(even) {

10. background-color: #eee;

11. }

12. table#alter tr:nth-child(odd) {

13. background-color: #fff;

14. }

15. table#alter th {

16. color: white;

17. background-color: gray;

18. }

19. </style>

Test it Now

Output:
3. Text-box

Ans.

A textbox is a common input control in HTML, but it has various hidden attributes. An HTML text box
is an area on the screen wherein the user can enter the text input. It is a common input element
found in many software programs, such as web browsers, email clients, and word processors. When
you click on the text box, a cursor is enabled, indicating the user can begin typing.

What is an HTML Textbox?

The HTML textbox is an input control that allows the user to enter the text input on the web page.
The <input type = “text”> is used to create a textbox.

Here's How to Land a Top Software Developer Job

Full Stack Development-MEANEXPLORE PROGRAM

Setting a Default Value for the Textbox

If you want to set the default value to a textbox, you can use the value attribute. Whenever the form
is loaded, the default value is shown inside the textbox.
Multiline Textbox

The HTML <textarea> is a tag used within a form to declare a multiline textbox that allows the user to
input text over multiple lines.

Specific Attributes of a Textbox

The HTML textbox supports the following attributes:


Attributes Value Description

It specifies that the text box should automatically get


Autofocus Autofocus
focused when the page loads.

Cols Number It specifies the width of the text box.

Rows Number It specifies the height of the text box.

Hard
Wrap It specifies the text to be wrapped in a text box.
soft

It specifies the width of the text box based on the


Disabled Disabled
number of visible characters.

Form Form_id It specifies one or more forms.

It specifies the maximum number of characters in a


Maxlength Number
text box.

Name Text It assigns the name to the text box.

Placeholde
Text It specifies the short hint about the text box.
r

4. Text-area

Ans. The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually
courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be defined
through CSS height and width properties.
HTML Textarea Example

1. <textarea rows="9" cols="70">

2. JavaTpoint textarea tag example with rows and columns.

3. </textarea>

Test it Now

Output:

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<textarea> Yes Yes Yes Yes Yes

New HTML 5 Textarea Attributes

Attribute Description

autofocus It specifies that a text area should be automatically get focused when the page is loaded.

form It specifies one or more forms the textarea belongs to.

maxlength It specifies the maximum number of characters allowed in the text area.

placeholder It specifies a short hint that describes the expected value of a textarea.

required It specifies that textarea must be filled out.

wrap It specifies that how the texts in the textarea are wrapped at the time of the submission of the
form.

HTML Textarea form attribute

The form attribute specifies one or more forms the text area belongs to.

1. <form action="updates.jsp" id="usrform">

2. Name: <input type="text" name="usrname">


3. <input type="submit">

4. </form>

5. <br>

6. <textarea rows="9" cols="70" name="comment" form="usrform">

7. Enter text here...</textarea>

8. <p>The text area above is outside the form element, but should still be a part of the form.</
p>

9. <p><b>Note:</b> The form attribute is not supported in Internet Explorer.</p>

Test it Now

Output:

Name:

The textarea element above is outside the form , but it is still the part of the form.

5. Radio button

Ans. In this article, we are going to learn about HTML <input type=”radio”>, The HTML <input
type=”radio”> is used to define a Radio Button. Radio Buttons are used to let the user select exactly
one option from a list of predefined options. Radio Button input controls are created by using the
“input” element with a type attribute having the value as “radio”.

Syntax:

<input type="radio">

Example: In this example, we simply select the correct option from the given options using the radio
button.

 HTML

<!DOCTYPE html>

<html>

<body>

<h2>Welcome To GeeksforGeeks</h2>

<p>Select a Technology Brand:</p>


<div>

<input type="radio"

id="Netflix"

name="brand"

value="Netflix">

<label for="Netflix">Netflix</label>

</div>

<div>

<input type="radio"

id="Audi"

name="brand"

value="Audi">

<label for="Audi">Audi</label>

</div>

<div>

<input type="radio"

id="Microsoft"

name="brand"

value="Microsoft" checked>

<label for="Microsoft">Microsoft</label>

</div>

</body>

</html>

Output:
<input type=”radio”>

Example: This example explains the HTML input type as radio button by specifying its value as true.

 HTML

<!DOCTYPE html>

<html>

<head>

<title> HTML input type radio </title>

<style>

body {

text-align: center;

h1 {

color: green;

</style>

</head>

<body>

<h1>

GeeksforGeeks

</h1>

<h2>
HTML <Input type="radio">

</h2>

Radio Button:

<input type="radio"

checked=true

id="radioID"

value="Geeks_radio"

name="Geek_radio">

</body>

</html>

Output:

<input type=”radio”>

6. Checkbox

Ans. The HTML <checkbox> tag is used to define the square boxes. It is a form element which allows
users to select one or more options from the given options.

It is created by the type attribute of the <input> element as shown in the following syntax:

1. <input type="checkbox" name="field name" value="Initial value">

If we want to select any checkbox by default, then we have to set the checked attribute with the
"yes" value as described in the following syntax:

1. <input type="checkbox" name="field name" value="Initial value" checked="yes">

Example

1. <html>

2. <head>
3. </head>

4. <body>

5. <form>

6. Programming Languages: <br>

7. <input type="checkbox" id="C" name="C" value="C"/>

8. <label>C</label> <br>

9. <input type="checkbox" id="Java" name="Java" value="Java" checked=?yes?/>

10. <label>Java</label> <br>

11. <input type="checkbox" id="Python" name="Python" value="Python"/>

12. <label>Python</label> <br>

13. <input type="checkbox" id="PHP" name="PHP" value="PHP"/>

14. <label>PHP</label>

15. </form>

16. </body>

17. </html>

Test it Now

Output:
Q8. Explain difference between html and xhtml

Ans.

HTML XHTML

1. HTML is an SGML-based language. That is, it


defines the standard for generalizing the markup 1. XHTML is an XML-based language, which means it
languages for documents. SGML stands for Standard manipulates and processes data using XML technologies.
Generalized Markup Language.

2. HTML is not a case-sensitive language. 2. XHTML is a case-sensitive language.

3. HTML empty elements do not require a closing


3. XHTML empty elements must always be closed; that is,
tag at the end, not even a "/" symbol to signify the
there must be a "/" symbol at the end of the empty element.
end of the tag.

5. The tags and attributes in HTML can be specified


5. All XHTML elements and attributes must be in lowercase
either in lowercase or uppercase since it is not case-
since it is a case-sensitive language.
sensitive.

6. The HTML document requires a minimum of four 6. An XHTML document must contain the <!DOCTYPE>
tags to create an HTML page that is <html>, <head>, declaration followed by the <html>, <head>, <title>, and
<title>, and <body>. The <!DOCTYPE> declaration is <body> tags in its document to create a webpage. Moreover,
not necessary for HTML. the xmlns attribute in <html> tag is also necessary.

7. Some HTML elements may function properly 7. All the XHTML elements must be closed. Even the empty
without a closing tag. elements also require a closing tag.

8. Some elements in HTML may be improperly 8. All XHTML elements, however, must be properly nested
nested; that is, they do not need to be closed in the within each other; that is, they must be closed in the order in
order in which they are opened. which they were opened.

9. It is not mandatory to put quotes while using the


9. It is mandatory to put quotes around an attribute in XHTML.
attributes in HTML.

10. It allows attribute minimization, where boolean


10. It does not allow attribute minimization. All the attributes
attributes can omit their values. For example,
must be written in full attribute-value pairs.
"checked".

11. The webpage is displayed even if the HTML


11. There is a more strict error handling in XHTML.
document has some errors in it.

12. It can have a filename extension of.html or.htm. 12. Its filename extension can be .xhtml,.xht, or .xml.

Q9. explain div and span tag with example

Ans. Both the tags (<div> and <span>) are used to represent the part of the webpage, <div> tag is
used a as block part of the webpage and <span> tag is used as a inline part of the webpage like
below:

<div>A Computer Science Portal for Geeks <span>GeeksforGeeks</span></div>

HTML <div> tag: The div tag is known as Division tag. The div tag is used in HTML to make divisions of
content on the web page like (text, images, header, footer, navigation bar, etc). Div tag has both
opening(<div>) and closing (</div>) tags and it is mandatory to close the tag. As we know Div tag is a
block-level tag. In this example, the div tag contains the entire width. It will be displayed div tag each
time on a new line, not on the same line.

 Example:

 html

<!DOCTYPE html>

<html>

<head>

<title>Div tag</title>

<style>

div {

color: white;

background-color: #009900;

margin: 2px;

font-size: 25px;

</style>

</head>

<body>

<div> div tag </div>

<div> div tag </div>

<div> div tag </div>


<div> div tag </div>

</body>

</html>

 Output:

HTML <span> tag: The HTML span element is a generic inline container for inline elements and
content. It used to group elements for styling purposes (by using the class or id attributes). A better
way to use it when no other semantic element is available. The span tag is very similar to the div tag,
but div is a block-level tag and span is an inline tag.

 Example:

 html

<!DOCTYPE html>

<html>

<head>

<title>span tag</title>

</head>

<body>

<h2>Welcome To GFG</h2>

<!-- Inside paragraph applying span tag

with different style -->


<p><span style="background-color:lightgreen">

GeeksforGeeks</span> is A Computer Science Portal

where you can<span style="color:blue;">

Publish</span> your own <span

style="background-color:lightblue;">articles</span>

and share your knowledge with the world!!

</p>

</body>

</html>

 Output:

Differences between <div> and <span> tag:

<div> <span>

The <div> tag is a block level element. The <span> tag is an inline element.

It is best to attach it to a section of a web It is best to attach a CSS to a small section of a line in
page. a web page.

It accepts align attribute. It does not accept align attribute.

This tag should be used to wrap a section, This tag should be used to wrap any specific word
for highlighting that section. that you want to highlight in your webpage.
Q. Explain css and its various types with examples.

Ans Cascading Style Sheet (CSS) is used to set the style in web pages that contain HTML elements. It
sets the background color, font-size, font-family, color, … etc. properties of elements on a web page.

There are three types of CSS which are given below:

 Inline CSS

 Internal or Embedded CSS

 External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached to the element is known
as inline CSS. This kind of style is specified within an HTML tag using the style attribute.

Example: This example shows the application of inline-css.

 html

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS</title>

</head>

<body>

<p style="color:#009900; font-size:50px;

font-style:italic; text-align:center;">

GeeksForGeeks

</p>

</body>

</html>

Output:
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely.
The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within
the <style> tag inside the head section of the HTML file.

Example: This example shows the application of internal-css.

 html

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS</title>

<style>

.main {

text-align: center;

.GFG {

color: #009900;

font-size: 50px;

font-weight: bold;

.geeks {

font-style: bold;

font-size: 20px;

</style>

</head>

<body>

<div class="main">

<div class="GFG">GeeksForGeeks</div>
<div class="geeks">

A computer science portal for geeks

</div>

</div>

</body>

</html>

Output:

External CSS: External CSS contains separate CSS files that contain only style properties with the help
of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with
a .css extension and should be linked to the HTML document using a link tag. It means that, for each
element, style can be set only once and will be applied across web pages.

Example: The file given below contains CSS property. This file saves with .css extension. For
Ex: geeks.css

body {

background-color:powderblue;

.main {

text-align:center;

.GFG {

color:#009900;

font-size:50px;

font-weight:bold;

#geeks {

font-style:bold;
font-size:20px;

Below is the HTML file that is making use of the created external style sheet.

 link tag is used to link the external style sheet with the html webpage.

 href attribute is used to specify the location of the external style sheet file.

 html

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="geeks.css" />

</head>

<body>

<div class="main">

<div class="GFG">GeeksForGeeks</div>

<div id="geeks">

A computer science portal for geeks

</div>

</div>

</body>

</html>

Output:

Priorities of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by
External CSS which has the least priority. Multiple style sheets can be defined on one page. For
an HTML tag, styles can be defined in multiple style types and follow the below order.
 As Inline has the highest priority, any styles that are defined in the internal and external style
sheets are overridden by Inline styles.

 Internal or Embedded stands second in the priority list and overrides the styles in the
external style sheet.

 External style sheets have the least priority. If there are no styles defined either in inline or
internal style sheet then external style sheet rules are applied for the HTML tags.

CSS is the foundation of webpages and is used for webpage development by styling websites and
web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Q. Explain pseudo classes with examples

Ans

A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS
selector to add an effect to existing elements based on their states. For Example, changing the style
of an element when the user hovers over it, or when a link is visited. All of these can be done using
Pseudo Classes in CSS.

Note that pseudo-class names are not case-sensitive.

Syntax:

selector: pseudo-class{
property: value;
}

There are many Pseudo-classes in CSS but the ones that are most commonly used are as follows:

:hover Pseudo-class: This pseudo-class is used to add a special effect to an element when our mouse
pointer is over it. The below example demonstrates that when your mouse enters the box area, its
background color changes from yellow to orange.

Example: This example shows the hover pseudo-class in CSS.

 HTML

<!DOCTYPE html>

<html>

<head>

<title>CSS transition-property property</title>

<style>

.box {

background-color: yellow;
width: 300px;

height: 200px;

margin: auto;

font-size: 40px;

text-align: center;

.box:hover {

background-color: orange;

h1,

h2 {

color: green;

text-align: center;

</style>

</head>

<body>

<h1>Geeks For Geeks</h1>

<h2>:hover Pseudo-class</h2>

<div class="box">

My color changes if you hover over me!

</div>

</body>

</html>

Output:
:active Pseudo-class: This pseudo-class is used to select an element that is activated when the user
clicks on it. The following example demonstrates that when you click on the box, its background color
changes for a moment.

Example: This example shows the active pseudo-class in CSS.

 HTML

<!DOCTYPE html>

<html>

<head>

<title>CSS transition-property property</title>

<style>

.box{

background-color: yellow;

width: 300px;

height: 200px;

margin: auto;

font-size: 40px;

text-align: center;
}

.box:active{

background-color: orange;

h1, h2{

color: green;

text-align: center;

</style>

</head>

<body>

<h1>Geeks For Geeks</h1>

<h2>:active Pseudo-class</h2>

<div class="box">

My color changes for a moment if you click me!

</div>

</body>

</html>

Output:
:focus Pseudo-class: This pseudo-class is used to select an element that is currently focused by the
user. It works on user input elements used in forms and is triggered as soon as the user clicks on it. In
the following example, the background color of the input field which is currently focused changes.

Example: This example shows the focus pseudo-class in CSS.

 HTML

<!DOCTYPE html>

<html>

<head>

<title>CSS transition-property property</title>

<style>

form{

width: 300px;

height: 200px;

margin: 0 auto;

text-align: center;

line-height: 2rem;

}
label{

width: 30%;

input{

background-color: default;

float: right;

input:focus{

background-color: grey;

h1, h2{

color: green;

text-align: center;

</style>

</head>

<body>

<h1>Geeks For Geeks</h1>

<h2>:focus Pseudo-class</h2>

<form>

<label for="username">Username:</label>

<input type="text" name="username"

placeholder="Enter your username" />

<br>
<label for="emailid">Email-Id:</label>

<input type="email" name="emailid"

placeholder="Enter your email-id" />

<label for="Password">Password:</label>

<input type="password" name="Password"

placeholder="Enter your password" />

</form>

</body>

</html>

Output:

:visited Pseudo-class: This pseudo-class is used to select the links which have been already visited by
the user. In the following example, the color of the link changes once it is visited.

Example: This example shows the visited pseudo-class in CSS.

 HTML

<!DOCTYPE html>

<html>

<head>

<title>CSS transition-property property</title>


<style>

body{

text-align: center;

h1, h2{

color: green;

a:visited{

color: red;

</style>

</head>

<body>

<h1>Geeks For Geeks</h1>

<h2>:visited Pseudo-class</h2>

<p>

<a href="https://www.geeksforgeeks.org/" target="_blank">

My color changes once you visit this link

</a>

</p>

</body>

</html>

Output:
:not pseudo-class: This pseudo-class is used to select elements that do not match a specific
selector.

Example: In the following example, the :not pseudo-class is used to select all h1 elements that do
not have the class “special”. The color of these h1 elements will be set to green.

 HTML

<!DOCTYPE html>

<html>

<head>

<title>:not Pseudo-class Example</title>

<style>

h1:not(.special) {

color: green;

</style>

</head>

<body>

<h1 class>GeeksforGeeks</h1>

<h2>:not Pseudo-class</h2>

<h1 class="special">Special Header</h1>

</body>
</html>

Output:

Q Explain various class selectors with examples

Ans CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector

3. CSS Class Selector

4. CSS Universal Selector

5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <style>

5. p{

6. text-align: center;

7. color: blue;
8. }

9. </style>

10. </head>

11. <body>

12. <p>This style will be applied on every paragraph.</p>

13. <p id="para1">Me too!</p>

14. <p>And me!</p>

15. </body>

16. </html>

Test it Now

Output:

This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <style>

5. #para1 {

6. text-align: center;

7. color: blue;

8. }

9. </style>

10. </head>

11. <body>
12. <p id="para1">Hello Javatpoint.com</p>

13. <p>This paragraph will not be affected.</p>

14. </body>

15. </html>

Test it Now

Output:

Hello Javatpoint.com

This paragraph will not be affected.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <style>

5. .center {

6. text-align: center;

7. color: blue;

8. }

9. </style>

10. </head>

11. <body>

12. <h1 class="center">This heading is blue and center-aligned.</h1>

13. <p class="center">This paragraph is blue and center-aligned.</p>

14. </body>

15. </html>

Test it Now

Output:
This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you should use
the element name with class selector.

Let's see an example.

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <style>

5. p.center {

6. text-align: center;

7. color: blue;

8. }

9. </style>

10. </head>

11. <body>

12. <h1 class="center">This heading is not affected</h1>

13. <p class="center">This paragraph is blue and center-aligned.</p>

14. </body>

15. </html>

Test it Now

Output:

This heading is not affected

This paragraph is blue and center-aligned.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

1. <!DOCTYPE html>

2. <html>
3. <head>

4. <style>

5. * {

6. color: green;

7. font-size: 20px;

8. }

9. </style>

10. </head>

11. <body>

12. <h2>This is heading</h2>

13. <p>This style will be applied on every paragraph.</p>

14. <p id="para1">Me too!</p>

15. <p>And me!</p>

16. </body>

17. </html>

Test it Now

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.

Let's see the CSS code without group selector.

1. h1 {

2. text-align: center;

3. color: blue;

4. }
5. h2 {

6. text-align: center;

7. color: blue;

8. }

9. p {

10. text-align: center;

11. color: blue;

12. }

As you can see, you need to define CSS properties for all the elements. It can be grouped in following
ways:

1. h1,h2,p {

2. text-align: center;

3. color: blue;

4. }

Let's see the full example of CSS group selector.

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <style>

5. h1, h2, p {

6. text-align: center;

7. color: blue;

8. }

9. </style>

10. </head>

11. <body>

12. <h1>Hello Javatpoint.com</h1>

13. <h2>Hello Javatpoint.com (In smaller font)</h2>

14. <p>This is a paragraph.</p>

15. </body>

16. </html>
Test it Now

Output:

Hello Javatpoint.com

Hello Javatpoint.com (In smaller font)

This is a paragraph.

Q Difference between class and id selector

Ans In CSS, class and ID selectors are used to identify various HTML elements. The main benefit of
setting class or ID is that you can present the same HTML element differently, depending on its class or
ID.

Class selector
The class selector selects elements with a specific class attribute. It matches all the HTML elements based
on the contents of their class attribute. The . symbol, along with the class name, is used to select the
desired class.

Syntax
1
2
3
.class-name {
/* Define properties here */
}

ID selector
The ID selector matches an element based on the value of its id attribute. In order for the element to be
selected, its ID attribute must exactly match the value given in the selector. The # symbol and the id of
the HTML element name are used to select the desired element.

Syntax
1
2
3
#idname {
/* Define properties here */
}

The difference between Class and ID selector


The difference between an ID and a class is that an ID is only used to identify one single element in our
HTML. IDs are only used when one element on the page should have a particular style applied to it.
However, a class can be used to identify more than one HTML element.

Code
The following code demonstrates the difference between class and ID selectors, and how to set their
individual properties. The code sets a class for the div and, therefore, all the elements within the div will
have this class. However, one of the paragraphs is assigned an ID which allows individual properties to be
set for this particular paragraph. These properties are set using the appropriate class and ID selectors.

OutputHTMLCSS (SCSS)

Q Explain css box model with block diagram

Ans. The CSS box model is a container that contains multiple properties including borders, margins,
padding, and the content itself. It is used to create the design and layout of web pages. It can be used
as a toolkit for customizing the layout of different elements. The web browser renders every element
as a rectangular box according to the CSS box model.

Box-Model has multiple properties in CSS. Some of them are given below:

 content: This contains the actual data in the form of text, images, or other media forms and
it can be sized using the width & height property.

 padding: This property is used to create space around the element, inside any defined
border.

 border: This property is used to cover the content & any padding, & also allows setting the
style, color, and width of the border.

 margin: This property is used to create space around the element ie., around the border
area.

The following figure illustrates the Box model in CSS.


 Content Area: This area consists of content like text, images, or other media content. It is
bounded by the content edge and its dimensions are given by content-box width and height.

 Padding Area: It includes the element’s padding. This area is actually the space around the
content area and within the border-box. Its dimensions are given by the width of the
padding-box and the height of the padding-box.

 Border Area: It is the area between the box’s padding and margin. Its dimensions are given
by the width and height of the border.

 Margin Area: This area consists of space between the border and the margin. The
dimensions of the Margin area are the margin-box width and the margin-box height. It is
useful to separate the element from its neighbors.

CSS Box Model Working

For setting the width & height properties of an element(for properly rendering the content in the
browser), we need to understand the working of the CSS Box model.

While setting the width and height properties of an element with CSS, we have only set the width
and height of the content area. We need to add padding, borders, and margins in order to calculate
the full size of an element. Consider the below example.

p{
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}

The total width for the element can be calculated as:

Total element width = width + left padding + right padding + left border + right border + left margin +
right margin

The <p> element can have a total width of 94px.

Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) +
0px (left margin + right margin) = 94px.

The total height for the element can be calculated as:

Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin

The <p> element can have a total height of 84px.

Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom
border) + 0px (top margin + bottom margin) = 84px.

Now, We have learned the working of the CSS Box Model in-depth and now we will see Box Model
examples so that we can properly understand it.

Example 1: This example illustrates the use of the CSS Box model for aligning & displaying it properly.

 HTML

<!DOCTYPE html>

<html>

<head>

<title>CSS Box Model</title>

<style>

.main {

font-size: 36px;

font-weight: bold;

Text-align: center;

.gfg {

margin-left: 60px;
border: 50px solid #009900;

width: 300px;

height: 200px;

text-align: center;

padding: 50px;

.gfg1 {

font-size: 42px;

font-weight: bold;

color: #009900;

margin-top: 60px;

background-color: #c5c5db;

.gfg2 {

font-size: 18px;

font-weight: bold;

background-color: #c5c5db;

</style>

</head>

<body>

<div class="main">

CSS Box-Model Property

</div>

<div class="gfg">

<div class="gfg1">
GeeksforGeeks

</div>

<div class="gfg2">

A computer science portal for geeks

</div>

</div>

</body>

</html>

Output:

Example 2: This example illustrates the Box Model by implementing the various properties.

 HTML
<!DOCTYPE html>

<html>

<head>

<style>

.main {

font-size: 32px;

font-weight: bold;

text-align: center;

#box {

padding-top: 40px;

width: 400px;

height: 100px;

border: 50px solid green;

margin: 50px;

text-align: center;

font-size: 32px;

font-weight: bold;

</style>

</head>

<body>

<div class="main">CSS Box-Model Property</div>

<div id="box">GeeksforGeeks</div>

</body>

</html>
Output:

Q Explain javascript and its various features

Ans. What is JavaScript ?

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used
as a part of web pages, whose implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in Netscape
2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded
in Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.

 Complementary to and integrated with Java.

 Complementary to and integrated with HTML.

 Open and cross-platform

Client-Side JavaScript
Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.

It means that a web page need not be a static HTML, but can include programs that interact with the
user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address
in a form field.

The JavaScript code is executed when the user submits the form, and only if all the entries are valid,
they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.

Advantages of JavaScript

The merits of using JavaScript are −

 Less server interaction − You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.

 Immediate feedback to the visitors − They don't have to wait for a page reload to see if they
have forgotten to enter something.

 Increased interactivity − You can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.

 Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It lacks the following important
features −

 Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.

 JavaScript cannot be used for networking applications because there is no such support
available.

 JavaScript doesn't have any multi-threading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.

JavaScript Development Tools

One of major strengths of JavaScript is that it does not require expensive development tools. You can
start with a simple text editor such as Notepad. Since it is an interpreted language inside the context
of a web browser, you don't even need to buy a compiler.

To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Some
of them are listed here −
 Microsoft FrontPage − Microsoft has developed a popular HTML editor called FrontPage.
FrontPage also provides web developers with a number of JavaScript tools to assist in the
creation of interactive websites.

 Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular HTML


and JavaScript editor in the professional web development crowd. It provides several handy
prebuilt JavaScript components, integrates well with databases, and conforms to new
standards such as XHTML and XML.

 Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and JavaScript editor from


Macromedia that can be used to manage personal websites effectively.

Where is JavaScript Today ?

The ECMAScript Edition 5 standard will be the first update to be released in over four years.
JavaScript 2.0 conforms to Edition 5 of the ECMAScript standard, and the difference between the two
is extremely minor.

The specification for JavaScript 2.0 can be found on the following site: http://www.ecmascript.org/

Today, Netscape's JavaScript and Microsoft's JScript conform to the ECMAScript standard, although
both the languages still support the features that are not a part of the standard.

You might also like