Q.1) What is the role of formatting tags in HTML5?

Ans: 
In HTML5, formatting tags are used to define the visual appearance of text and other content on a web page.
These tags are used to add formatting such as bold or italic text, underlining, color, font size, and other styling options.
Some of the common formatting tags in HTML5 include:

<h1> to <h6> tags: These tags are used to create headings of different sizes, with <h1> being the largest and <h6> being the smallest.

<p> tag: This tag is used to create paragraphs of text.

<strong> and <em> tags: These tags are used to add emphasis to text, with <strong> indicating strong emphasis and <em> indicating emphasis.

<ul> and <ol> tags: These tags are used to create unordered and ordered lists, respectively.

<li> tag: This tag is used to define list items within a <ul> or <ol> list.

<br> tag: This tag is used to create line breaks within a block of text.

<hr> tag: This tag is used to create a horizontal rule, which is a visual separator between different sections of a web page.

Formatting tags can be styled using CSS to further customize the appearance of text and other elements on a web page. By using formatting tags in combination with CSS, developers can create visually appealing and well-structured web pages that are easy to read and navigate.

 

Q.2) What is new about the relationship between the <header> and <h1> tags in HTML5?
Ans: 
In HTML5, the relationship between the <header> and <h1> tags has been clarified and updated to provide better semantics and accessibility for web pages.
The <header> tag is used to define a container for introductory or navigational content at the top of a web page or section of a web page. The <h1> tag, on the other hand, is used to define the main heading of a web page or section of a web page.
In previous versions of HTML, it was not clear whether the <h1> tag should be included within the <header> tag or whether it should be the first element after the <header> tag. HTML5 clarifies this relationship by specifying that the <h1> tag should be used as the first heading within the <header> element to provide a clear and consistent hierarchy of content on a web page.
This updated relationship between the <header> and <h1> tags helps to improve the accessibility and usability of web pages by providing a clear structure for content and helping screen readers and other assistive technologies to navigate and understand the content on a web page. It also helps to improve the search engine optimization (SEO) of a web page by making it easier for search engines to understand the structure and purpose of the content on a web page.
 

Q.3)What are some of the most important APIs in HTML5?

Ans: 

HTML5 provides several APIs (Application Programming Interfaces) that allow developers to access and manipulate various aspects of web pages and web applications. Some of the most important APIs in HTML5 include:

Canvas API: The Canvas API allows developers to create and manipulate dynamic, 2D graphics on a web page using JavaScript. This API is commonly used for creating games, visualizations, and other interactive web content.

Web Storage API: The Web Storage API provides a way to store data locally on a user’s device, such as preferences, settings, and other application-specific data. This API includes two types of storage: localStorage and sessionStorage.

Web Workers API: The Web Workers API enables developers to run scripts in the background of a web page, freeing up the main thread to handle user interactions and other tasks. This can help improve the performance and responsiveness of web applications.

Geolocation API: The Geolocation API allows web applications to access a user’s geographic location, if permission is granted. This can be used to provide location-based services, such as directions, weather updates, or local search results.

Web Audio API: The Web Audio API provides a way to create, manipulate, and play back audio in a web browser using JavaScript. This API can be used to build interactive music and sound applications, as well as games and other multimedia content.
 

Q.4) What is metadata in HTML5 and how is it specified?

Ans: 
Metadata in HTML5 refers to information about a web page that is not displayed on the page itself but is embedded in the code. This information can include details like the page’s author, description, keywords, and language, as well as other important data that can be used by search engines, social media platforms, and other tools.
 
Metadata is specified in HTML5 using a set of tags known as the “meta” tags. These tags are placed within the “head” section of an HTML document and provide information about the page in the form of key-value pairs. Some of the most commonly used meta tags include:
  1. “title”: This tag specifies the title of the web page, which is displayed in the browser’s title bar and used by search engines to identify the page.
  2. “description”: This tag provides a brief summary of the page’s content, which is often displayed by search engines in their search results.
  3. “keywords”: This tag lists the keywords that are relevant to the page’s content, which can be used by search engines to help determine the page’s relevance to a particular search query.
  4. “author”: This tag specifies the author of the page.
  5. “viewport”: This tag provides instructions to the browser on how to scale the page for different screen sizes.
There are many other meta tags available in HTML5, each with its own specific purpose. Using these tags effectively can help improve the visibility and usability of any web pages.
 

Q.5)What are the best audio and video formats to use in HTML5?

Ans: 

HTML supports a wide range of media formats for sound, music, videos, movies, and animations. Some of the extensions supported by each media format are:
  • Audio– MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4
  • Video– MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 or MP4

Q.6) How is the Geolocation API implemented in HTML5?

Ans: 
The Geolocation API is a feature of HTML5 that enables web applications to access a user’s location information using JavaScript. Here is an overview of how the Geolocation API is implemented in HTML5:
  1. Check for Geolocation support: Before using the Geolocation API, it’s important to check if the user’s browser supports it. This can be done by checking if the navigator.geolocation property is defined.
  2. Requesting permission: Once you’ve confirmed that the Geolocation API is supported, you can request permission from the user to access their location information. This is typically done using the getCurrentPosition() method of the Geolocation API, which prompts the user to allow or deny location access. If the user grants permission, the getCurrentPosition() method retrieves the user’s location information.
  3. Retrieving location information: Once the user has granted permission, the getCurrentPosition() method can be used to retrieve the user’s location information. This method takes two callback functions as parameters – one to handle a successful location retrieval and another to handle errors.
  4. Handling location data: The location data retrieved by the Geolocation API is typically returned as a Position object, which contains properties such as latitude, longitude, accuracy, and timestamp. You can use this data to perform various tasks, such as displaying a map centered on the user’s location or calculating distances between locations.
The Geolocation API can also be used to track a user’s location over time using the watchPosition() method, which continuously retrieves the user’s location information at a set interval.
 

Q.7) What are some of the key global attributes in HTML5?

Ans:

Global attributes in HTML5 are attributes that can be used with any HTML element and are not specific to any particular element. Here are some of the key global attributes in HTML5:
  1. class: This attribute is used to define one or more classes for an element, which can be used for styling and JavaScript purposes.
  2. id: This attribute is used to uniquely identify an element on a page and can be used for styling and JavaScript purposes.
  3. style: This attribute is used to define inline styles for an element, such as color, font, and layout.
  4. title: This attribute is used to provide additional information about an element, such as a tooltip or description.
  5. tabindex: This attribute is used to define the order in which elements receive focus when using the keyboard to navigate a page.
  6. lang: This attribute is used to specify the language of the element’s content.
  7. accesskey: This attribute is used to define a shortcut key for an element, which can be used to quickly navigate to the element using the keyboard.
  8. contenteditable: This attribute is used to indicate whether an element’s content can be edited by the user.
  9. data-*: This attribute is used to add custom data to an element, which can be used for JavaScript purposes.
These global attributes provide a lot of flexibility and functionality when designing and building web pages, allowing developers to create dynamic and interactive content with ease.

Q.8) Write an HTML code to form a table to show the below values in a tabular form with heading as Roll No., Student name, Subject Name, and values as
1. Amar, Physics
2. Akber, Math
3. Anthony, Chemistry

Ans: <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Roll No.</th>
<th>Student Name</th>
<th>Subject Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Amar</td>
<td>Physics</td>
</tr>
<tr>
<td>2</td>
<td>Akber</td>
<td>Math</td>
</tr>
<tr>
<td>3</td>
<td>Anthony</td>
<td>Chemistry</td>
</tr>
</tbody>
</table>
</body>
</html>
 

Q.9) Define forms in HTML.

Ans: 
Forms in HTML provide a way for users to interact with a web page by entering data, selecting options, and submitting it to the server for processing. A form typically contains various types of input controls such as text boxes, radio buttons, checkboxes, dropdown menus, and buttons.
 
The HTML <form> element is used to create a form. It contains various types of input elements that allow users to enter data and interact with the web page. The form is submitted to the server using the HTTP POST or GET method. When the user submits the form, the browser sends the data entered by the user to the server for processing.
 
Here is an example of an HTML form that contains a text input field and a submit button:
 
<form action=”/submit-form.php” method=”post”>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username”>
<button type=”submit”>Submit</button>
</form>
 
In this example, the action attribute specifies the URL of the server-side script that will handle the form submission. The method attribute specifies the HTTP method to be used for the form submission (in this case, post).
 
The <label> element provides a label for the input field, and the for attribute of the label element is set to the id attribute of the corresponding input field. This is used to associate the label with the input field, making it more accessible.
 
The <input> element is used to create an input field. In this example, the type attribute is set to text, and the name attribute is set to username. This creates a text input field with the name username.
 
Finally, the <button> element is used to create a submit button. When the user clicks the submit button, the form data is sent to the server using the method and action specified in the form tag.
 

Q.10) What is the use of HTML in web-development?

Ans: HTML (Hypertext Markup Language) is a markup language used in web development to create the structure and content of web pages. It provides a set of tags and attributes that allow developers to define and organize the elements of a web page, such as headings, paragraphs, images, links, forms, and more. Here are some of the key uses of HTML in web development:

Creating the structure of web pages: HTML provides a way to define the hierarchy of a web page, such as the overall layout, the placement of different elements, and the organization of content.

Formatting and styling content: HTML allows developers to apply different formatting and styles to text and other elements, such as colors, fonts, sizes, and more, to enhance the appearance of the web page.

Adding multimedia content: HTML provides tags to embed various multimedia elements such as images, audio, and video.

Creating forms: HTML allows developers to create forms for user input, such as contact forms, login forms, and search bars.

Enabling accessibility: HTML provides several attributes and tags that enable accessibility features for users with disabilities, such as alternative text for images and labels for form elements.
 

Q.11) What is HTML5? What are the advantages of HTML5?

Ans:
HTML5 is the latest version of the HyperText Markup Language used for creating web pages and applications. It is designed to improve the functionality of web pages and make them more dynamic and interactive. HTML5 includes new features and elements that allow web developers to create more complex and sophisticated web applications.
Some of the advantages of HTML5 include:
  1. Improved multimedia support: HTML5 provides better support for audio and video playback, eliminating the need for external plugins such as Flash or Silverlight. This makes it easier to integrate multimedia into web pages.
  2. Improved semantics: HTML5 includes new semantic elements such as <header>, <footer>, <nav>, <section>, and <article>. These elements provide more meaning to the content, making it easier for search engines to index and rank web pages.
  3. Improved forms: HTML5 introduces new input types such as email, url, and date that allow developers to create more advanced and user-friendly forms. It also includes new form attributes such as autocomplete and required that help improve the user experience.
  4. Improved performance: HTML5 includes new APIs such as the Web Storage API and the Web Workers API that allow web applications to store data locally and run background tasks without affecting the performance of the main thread.
  5. Improved accessibility: HTML5 includes new elements and attributes that help improve the accessibility of web pages for users with disabilities.
  6. Cross-platform compatibility: HTML5 is designed to work across different devices and platforms, including desktops, laptops, tablets, and smartphones.
Overall, HTML5 provides a more robust and flexible platform for web development, allowing developers to create more dynamic and engaging web applications.

Q.12) How does HTML and CSS work together?

Ans:
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two separate languages that work together to create web pages. HTML is used to create the structure and content of the web page, while CSS is used to add style and layout to the page. Here’s how HTML and CSS work together:
  1. HTML creates the structure of the web page: HTML defines the various elements of a web page, such as headings, paragraphs, images, lists, forms, and more. It uses tags to identify and organize these elements.
  2. CSS adds style and layout to the web page: CSS is used to define how the various HTML elements should be displayed, such as the color, size, font, spacing, and positioning of elements on the page. It uses selectors to target specific HTML elements and apply styles to them.
  3. Separation of concerns: HTML and CSS are separate languages, which means that the structure and content of the web page are kept separate from its style and layout. This makes it easier to maintain and update the web page, as changes to the HTML do not affect the CSS and vice versa.
  4. Cascade and specificity: CSS rules can be cascaded and have different levels of specificity. This means that if multiple CSS rules apply to the same HTML element, the most specific and relevant rule will be applied. This allows developers to create complex and dynamic styles for web pages.
Overall, HTML and CSS work together to create visually appealing and functional web pages. HTML provides the structure and content of the page, while CSS provides the style and layout, creating a seamless and engaging user experience.

Q.13) Explain the structure of the HTML webpage.

Ans:  The structure of an HTML (Hypertext Markup Language) webpage consists of a series of nested elements that define the content and layout of the page. Here is a basic example of the structure of an HTML webpage:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<h1>Heading 1</h1>
<nav>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Heading 2</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</section>
<aside>
<h3>Heading 3</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</aside>
</main>
<footer>
<p>Copyright © 2023</p>
</footer>
</body>
</html>
Here’s a breakdown of the structure:
  • <!DOCTYPE html>: This is the document type declaration, which specifies the version of HTML being used.
  • <html>: This is the root element of the HTML document, which contains all other elements.
  • <head>: This element contains metadata about the document, such as the title, links to CSS stylesheets, and scripts.
  • <title>: This element specifies the title of the webpage, which appears in the browser tab and search engine results.
  • <body>: This element contains the visible content of the webpage, such as text, images, videos, and interactive elements.
  • <header>: This element represents the top section of the webpage, which typically contains the logo, navigation menu, and other key information.
  • <nav>: This element represents a section of the webpage that contains navigation links.
  • <ul>: This element represents an unordered list, which typically contains links.
  • <li>: This element represents a list item within an unordered or ordered list.
  • <a>: This element represents a hyperlink to another webpage or resource.
  • <main>: This element represents the main content of the webpage.
  • <section>: This element represents a section of the webpage, such as a chapter, topic, or area of content.
  • <h1>, <h2>, <h3>: These elements represent different levels of headings, which are used to structure and organize the content.
  • <p>: This element represents a paragraph of text.
  • <aside>: This element represents a section of the webpage that is separate from the main content, such as a sidebar or a section with additional information.
  • <footer>: This element represents the bottom section of the webpage, which typically contains copyright information, contact details, and other legal information.
The structure of an HTML webpage is designed to provide a clear and organized hierarchy of content, making it easy for users to navigate and understand the information presented.

Q.14) Why Meta tags are used in HTML?

 Ans: 
 Meta tags are used in HTML to provide information about a web page to search engines, browsers, and other web services. They are included in the head section of an HTML document and provide information such as the page title, description, keywords, and author.
Some of the reasons why meta tags are used in HTML include:
  1. Search engine optimization (SEO): Meta tags provide important information to search engines about the content of a web page, making it easier for them to index and rank the page in search results.
  2. Social media sharing: Meta tags such as the Open Graph protocol and Twitter Cards provide information to social media platforms about how to display the page when it is shared on their networks. This can help improve the appearance and engagement of the shared content.
  3. Browser behavior: Meta tags can be used to control certain browser behaviors, such as specifying the character encoding, setting the viewport for mobile devices, or disabling caching.
  4. Accessibility: Some meta tags, such as the viewport meta tag, can help improve the accessibility of web pages for users with disabilities.

Q.15) How can we include Google maps on a website?

Ans:

To include a Google Map on a website, you can follow these steps:
  1. Go to the Google Maps website and search for the location you want to display on your website.
  2. Click on the “Share” button in the left panel and then select “Embed a map”.
  3. Customize the map by selecting the size, zoom level, and other options.
  4. Copy the HTML code provided by Google.
  5. Paste the HTML code into your website’s HTML file where you want the map to appear. This can be done by either editing the HTML code directly or by using a CMS or website builder that allows you to embed code.
  6. Save and publish your changes.
Alternatively, we can also use the Google Maps JavaScript API to embed a map on our website. 
To use the Google Maps JavaScript API, we need to create a Google Maps API key and then use it to load the Google Maps JavaScript library. we can then use JavaScript code to create and customize the map, and add it to our website’s HTML file.

Q.16) What is difference between HTML and HTML5?

Ans:
HTML and HTML5 are both markup languages used to create web pages. However, there are several differences between the two:
  1. Structure: HTML5 introduces new structural elements such as <header>, <footer>, <nav>, <article>, and <section>, which provide more semantic meaning to the content of a web page.
  2. Multimedia: HTML5 includes native support for multimedia elements such as <audio> and <video>, which make it easier to embed and manipulate media content on web pages without relying on third-party plugins such as Flash.
  3. Canvas: HTML5 introduces the <canvas> element, which allows developers to create dynamic, interactive graphics and animations on web pages using JavaScript.
  4. Forms: HTML5 introduces new input types such as date, time, email, and number, which make it easier to create user-friendly and accessible forms on web pages.
  5. Local Storage: HTML5 introduces the ability to store data on the client-side using the localStorage and sessionStorage APIs, which can improve performance and reduce server load.
  6. Accessibility: HTML5 includes several new features and attributes that can improve the accessibility of web pages for users with disabilities, such as the aria-* attributes for specifying accessibility information, and the <figure> and <figcaption> elements for adding captions to images.
Overall, HTML5 represents a significant improvement over previous versions of HTML in terms of functionality, flexibility, and accessibility. It is designed to provide a more robust and versatile platform for developing modern web applications and delivering rich multimedia content to users across a wide range of devices and platforms.

Q.17) How many types CSS can be include in HTML?

Ans: 
There are three ways to include CSS in HTML:
1.  Inline CSS: This involves adding CSS code directly to an HTML element using the “style” attribute.  
  •   For example:   <h1 style=”color: red;”>This is a heading</h1>           
  • Inline CSS is generally not recommended for large-scale projects as it can make the HTML code difficult to read and maintain.
2. Internal CSS: This involves adding CSS code to the head section of an HTML document using the “style” tag. 
For example:
<head>
<style>
h1 {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
Internal CSS is useful for small-scale projects, but can also become unwieldy as the project grows larger.
3.  External CSS: This involves creating a separate CSS file and linking it to an HTML document using the “link” tag. For example:
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>This is a heading</h1>
</body>
External CSS is the most recommended approach for large-scale projects, as it allows for more modular and maintainable code.

Q.18) How can we create a hyperlink in HTML?

Ans: To create a hyperlink in HTML, you can use the anchor tag <a> with the href attribute to specify the URL of the page we want to link to. Here is an example:
<a href=”https://www.example.com”>Link Text</a>

In this example, “https://www.example.com” is the URL of the page we want to link to, and “Link Text” is the text that will be displayed on the page as the hyperlink.

we can also create internal links within a page by using the id attribute to specify the target element. For example:

<h2 id=”section1″>Section 1</h2>

<p>Content for Section 1 goes here.</p>
<h2 id=”section2″>Section 2</h2>
<p>Content for Section 2 goes here.</p>
<a href=”#section1″>Link to Section 1</a>
<a href=”#section2″>Link to Section 2</a>
In this example, the id attributes are added to the <h2> elements to create anchor points within the page, and the href attributes of the hyperlinks reference those anchor points using the “#” symbol followed by the id attribute value.

Q.19) What is the Use of SPAN in HTML and give one example?

Ans: 
In HTML, the <span> element is an inline container used to group inline-level elements and apply styles to a specific part of the text. It does not add any semantic meaning to the content, but rather provides a way to apply styles to a specific portion of the text without affecting the rest of the text.
Here’s an example of how to use the <span> element:
<p>This is a <span style="color: red;">red</span> word.</p>
In this example, the word “red” is wrapped in a <span> element with a style attribute that sets the text color to red. This allows us to apply styles to only that word, rather than the entire paragraph.

Q.20) Differentiate different types of Doctypes from one another.

 

Ans:  In HTML, a doctype declaration is used to specify the version of HTML that the document is using and to help the browser to render the document correctly. There are several types of doctype declarations available, and they can be differentiated from each other as follows:
  1. HTML 4.01 Strict: This doctype declaration specifies that the document is using the HTML 4.01 Strict standard, which does not allow the use of deprecated elements or attributes. This doctype is typically used for modern websites that do not require backwards compatibility with older browsers.
  2. HTML 4.01 Transitional: This doctype declaration specifies that the document is using the HTML 4.01 Transitional standard, which allows the use of deprecated elements and attributes for backwards compatibility with older browsers. This doctype is typically used for websites that require compatibility with older browsers.
  3. XHTML 1.0 Strict: This doctype declaration specifies that the document is using the XHTML 1.0 Strict standard, which is an XML-based version of HTML that requires well-formed markup and does not allow the use of deprecated elements or attributes. This doctype is typically used for websites that require strict compliance with web standards.
  4. XHTML 1.0 Transitional: This doctype declaration specifies that the document is using the XHTML 1.0 Transitional standard, which allows the use of deprecated elements and attributes for backwards compatibility with older browsers, but still requires well-formed markup. This doctype is typically used for websites that require some backwards compatibility with older browsers, but also want to adhere to web standards.
  5. HTML5: This doctype declaration specifies that the document is using the HTML5 standard, which is the latest version of HTML that allows the use of new elements and attributes, and does not require closing tags for certain elements. This doctype is typically used for modern websites that want to take advantage of the latest web technologies and features.
Each type of doctype declaration has its own set of rules and requirements, and using the correct doctype declaration is important for ensuring that the document is rendered correctly in different browsers and devices.

Q.21) What does the elements mean in syntax given for URL in HTML?

Ans:  The syntax for a URL in HTML is as follows:
<a href=”protocol://domain/path/filename”>Link text</a>
In this syntax, the elements mean:
  • href: This attribute specifies the URL that the link should point to. It is a required attribute for the <a> element, which is used to create hyperlinks.
  • protocol: This element specifies the protocol that the browser should use to retrieve the resource. Common protocols include http://, https://, ftp://, file://, etc.
  • domain: This element specifies the domain name or IP address of the server that hosts the resource. For example, www.example.com or 192.168.1.100.
  • path: This element specifies the path to the resource on the server. It can include one or more directory names, separated by slashes.
  • filename: This element specifies the name of the file that contains the resource. It can include the file extension, such as .html, .jpg, .pdf, etc.
  • Link text: This element specifies the text that should be displayed as the link. It is the visible part of the hyperlink that the user can click on.

Q.22) What are the different types of frames tags used in HTML?

Ans:
The <frame> tag is used to divide a web page into multiple sections, each of which can display a separate HTML document. There are three types of frame tags used in HTML:
  1. <frame> tag: This tag defines a single frame within a frameset. It is used to specify the source document that should be displayed in the frame.
  2. <frameset> tag: This tag defines a set of frames that are arranged in a specific layout. It is used to create a frameset, which divides the browser window into multiple frames.
  3. <noframes> tag: This tag is used to provide content that is displayed when the browser does not support frames or when the user has disabled frames. It is used to provide an alternative non-framed version of the content.
Here is an example of how frames tags can be used in HTML to create a frameset with two frames:
<html>
<head>
<title>My Frameset Example</title>
</head>
<frameset cols=”30%,70%”>
<frame src=”menu.html”>
<frame src=”content.html”>
<noframes>
<body>
<p>This page requires a browser that supports frames.</p>
</body>
</noframes>
</frameset>
</html>
In this example, the <frameset> tag is used to create a frameset with two columns, which are specified using the cols attribute. The src attribute of the <frame> tags is used to specify the source documents that should be displayed in each frame. The <noframes> tag provides an alternative non-framed version of the content.

Q.23) If you want to display some HTML data in a table in tabular format, which HTML tags will you use?

Ans: 
  • The HTML has a specific tag, i.e., the table tag to display data in tabular form. Below is the list of the HTML tags used to display data in tabular form in HTML:
  • <table>
  • For defining a table.
  • <caption>
  • For mentioning a caption to the table.
  • <tr>
  • For defining a row in a table.
  • <td>
  • For defining a cell in a table.
  • <th>
  • For defining a header cell in a table.
  • <tbody>
  • For grouping the body’s content in a table.
  • <col>
  • For specifying the column properties for each column of the table.

Q.24)What are Attributes in HTML?

 
 
 
Ans:
  • An additional attribute is given to each tag to alter the behavior of the tag. Attributes are defined directly after the tag name, inside the angular brackets. They appear in opening tags and can never appear in closing tags.
  • For example:
  • You can define an attribute for the <input>tag, such as a text field, checkbox, radio button, or many more ways.
  • The properties of tags are called as attributes. These are used to add certain additional information in a tag content. All HTML elements are said to be having the attributes.They are said to be always specified in the start tag.
  • Refer to the below mentioned table to learn about various HTML attributes-
Attributes
Description 
src
Specifies the URL (web address) for an image.
style
Specifies the inline CSS style for an element.
alt
Specifies an alternative style for an image. 
disabled
Specifies for an input element to be disabled. 
href
Specifies the URL (web adress) for a link.
title
Specifies extra information about an element.

Q.25)What is an Anchor tag in HTML?

Ans:
  • An anchor tag is used to link two sections, web pages, or website templates in HTML.The anchor tags are web page elements that are used to link to other location on the same page.  These are also used to hyperlinks to other webpages, emails, applications and items. These anchor tags also allow the users to send emails from their outlook installed on their computers. 
  • Its format is: <a href=”#” target=”link”></a>
  • Where ‘href’ is an attribute of the anchor tag used to identify the sections in a document, the ‘link’ is defined in the target attribute, which is to be linked.

Q.26) What are Lists in HTML?

Ans:
HTML lists are used to group a set of related items in lists. It is defined with an <li> tag.
 
Some commonly used HTML lists:
  • Ordered List (HTML tag: <ol>)
  • Unordered List (HTML tag: <ul>)
  • Description List (HTML tag: <dl>)
  • Menu List (HTML tag: <menu>)
  • Directory List (HTML tag: <dir>)

Q.27) How can you include CSS in a web page?

Ans. 
CSS can be included in a web page using the following methods:
  1. Inline CSS – Inline CSS is applied directly to an HTML element using the style attribute.
  2. Internal CSS – Internal CSS is placed within the <head> section of an HTML document, using the <style> tag.
  3. External CSS – External CSS is defined in a separate .css file and linked to an HTML document using the <link> tag.

Q.28) What is the property that is used to control image scroll?

Ans:
The CSS property used to control image scrolling is called background-attachment. It specifies whether a background image should scroll with the content or remain fixed in place as the content is scrolled.
The background-attachment property can take three different values:
  1. scroll – The background image scrolls along with the content as the user scrolls the page.
  2. fixed – The background image remains fixed in place as the user scrolls the page.
  3. local – The background image scrolls along with the element that contains it.

Q.29) Define z-index.

Ans: 
z-index is a CSS property that is used to control the stacking order of positioned elements on a web page. 
It specifies the z-axis coordinate of an element and determines whether it appears in front of or behind other elements on the page.
The z-index property takes a numeric value, and the higher the value, the closer the element is to the front of the stacking order. If two elements have the same z-index value, the element that appears last in the HTML document will be placed on top.
 
By default, all elements on a web page have a z-index value of auto, which means that they are positioned in the order they appear in the HTML document. However, when you position an element using position: relative, position: absolute, or position: fixed, you can use the z-index property to adjust its stacking order relative to other positioned elements on the page.
 
Here’s an example of how to use z-index to control the stacking order of two overlapping elements:
 
<div class=”box1″ style=”position: absolute; top: 0; left: 0; z-index: 1;”>Box 1</div>
<div class=”box2″ style=”position: absolute; top: 50px; left: 50px; z-index: 2;”>Box 2</div>
 
In this example, the box2 element is positioned on top of the box1 element because it has a higher z-index value.
 

Q.30) How is border-box different from content-box?

Ans: 
In CSS, box-sizing property is used to specify how the width and height of an element should be calculated, taking into account the element’s padding and border.
 
The content-box value is the default value for the box-sizing property, which means that the width and height of an element only includes the content area and does not include the padding or border.
 
 This means that if you specify a width or height for an element with padding or border, the actual size of the element will be larger than the specified size, which can cause layout issues.
 
The border-box value for box-sizing includes the padding and border in the element’s total width and height. This means that if you specify a width or height for an element with padding or border, the padding and border will be included in the specified size, so the actual size of the element will be the same as the specified size.
 

Q.31) How are the CSS selectors matched against the elements by the browser?

Ans:
When a browser renders an HTML page, it uses CSS selectors to determine which CSS rules should be applied to which elements. The browser matches selectors to elements in a process called selector matching, which involves the following steps:
  1. Parsing the CSS file: The browser parses the CSS file to create a CSS object model (CSSOM) that represents the CSS rules.
  2. Creating a render tree: The browser creates a render tree by combining the HTML DOM (Document Object Model) with the CSSOM. The render tree represents the final layout of the web page.
  3. Matching selectors to elements: The browser matches CSS selectors to elements in the HTML DOM. It does this by traversing the DOM tree, starting from the root element, and checking each element against each selector.
  4. Applying styles: Once the browser has matched selectors to elements, it applies the styles specified in the CSS rules to the matched elements.
The selector matching process involves several steps, including:
  1. Selector type: The browser determines the type of the selector (e.g., class, ID, tag name, etc.).
  2. Selector specificity: The browser calculates the specificity of the selector. Specificity is a measure of how specific the selector is in targeting elements. The higher the specificity, the more precedence the selector takes over other selectors.
  3. Selector scope: The browser checks whether the selector applies to the element in question, based on its scope.
  4. Inheritance: The browser checks whether the CSS property is inherited by the element from its parent, and whether there are any conflicting styles from other selectors.
Based on these steps, the browser determines which CSS rules to apply to which elements, and in what order. This process is repeated for every element on the page, resulting in the final rendered layout of the web page.
 

Q.32) What are the advantages of using CSS?

Ans:
CSS (Cascading Style Sheets) has several advantages over using traditional HTML styling attributes such as the “style” attribute. Some of the advantages of using CSS are:
  1. Separation of presentation and content: With CSS, the presentation of a web page is separated from its content. This means that the HTML code can focus on the content of the page, while the CSS code is responsible for the presentation. This makes it easier to update the presentation of a web page without having to modify its content.
  2. Consistency: CSS enables consistent styling across multiple web pages. By defining CSS styles in a single file, you can apply those styles across multiple pages. This ensures that all the pages have a consistent look and feel.
  3. Reusability: CSS styles can be reused across multiple web pages. By defining CSS classes, you can apply the same styles to multiple elements across multiple pages. This reduces the amount of code you need to write, making your web pages more efficient.
  4. Browser compatibility: CSS is supported by all modern web browsers, which means that you can create a consistent look and feel across multiple browsers.
  5. Accessibility: CSS can be used to create accessible web pages. By using CSS to control the layout and presentation of a web page, you can ensure that the page is accessible to users with disabilities.
  6. Easy maintenance: CSS makes it easy to maintain a web page. By separating the presentation from the content, you can make changes to the styling of a web page without having to modify the content. This makes it easier to update a web page, fix styling issues, and ensure that the page remains up-to-date.

Q.33) How can embedded style be linked with HTML documents?

Ans: Embedded styles can be linked with HTML documents by using the <style> tag within the <head> section of an HTML document. The <style> tag is used to define CSS rules that will apply to the HTML elements within the document. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is some sample text</p>
</body>
</html>
In the above example, the <style> tag is used to define two CSS rules: one that sets the background color of the body element to #f0f0f0 and another that sets the color of the h1 element to blue. These styles will apply to all elements of the respective type within the HTML document.
 

Q.34) What is the syntax to link an external style sheet?

Ans:  To link an external style sheet to an HTML document, you can use the <link> tag in the <head> section of the HTML document. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is some sample text</p>
</body>
</html>
 
In the above example, the <link> tag is used to link to an external style sheet called “style.css”. The rel attribute specifies the relationship between the HTML document and the external resource, in this case a style sheet. The type attribute specifies the MIME type of the linked resource, in this case text/css for a style sheet. The href attribute specifies the URL of the external style sheet.
 
The external style sheet must be saved with the .css file extension and should contain only CSS code. The code within the style sheet will apply to the HTML elements that match the selectors defined in the style sheet.
 

Q.35) What is the use of CSS image sprites?

Ans:
CSS image sprites are used to improve the performance and reduce the load time of web pages by reducing the number of HTTP requests made to the server.
 
An image sprite is a collection of images that are combined into a single image file. This single image file is then used as the background image for a particular element on a web page, such as a button or a navigation menu.
 
To display a specific image within the sprite, CSS is used to adjust the position of the background image. 
By using one large image file instead of multiple smaller ones, the web page only needs to make one HTTP request to the server to load the sprite, rather than multiple requests for each individual image.
 
Using image sprites can significantly reduce the load time of a web page, especially on pages that contain many small images, such as navigation menus or social media icons. Additionally, image sprites can improve the user experience by making the page more responsive and reducing the delay between clicks and actions.
 
 

Q.36) What are the differences between adaptive design and responsive design?

Ans:
Adaptive design and responsive design are two different approaches to designing websites for different screen sizes and devices. The main differences between the two are:
  1. Approach: Responsive design uses a fluid grid system and flexible images to adjust to different screen sizes and devices, whereas adaptive design uses multiple fixed layouts and breakpoints to optimize the layout for specific devices.
  2. Flexibility: Responsive design is more flexible than adaptive design because it can adapt to any screen size, regardless of the device type or orientation. Adaptive design, on the other hand, is more rigid and requires more planning and design work to create layouts for different devices.
  3. Load time: Responsive design typically has faster load times because it only loads one set of content for all devices. Adaptive design, on the other hand, can have slower load times because it may need to load multiple sets of content for different devices.
  4. Maintenance: Responsive design is easier to maintain because there is only one set of code to update and manage. Adaptive design requires more maintenance because there may be multiple sets of code to manage for different devices.
In summary, responsive design is more flexible, faster, and easier to maintain, while adaptive design is more rigid and requires more planning and design work but can be more optimized for specific devices.
 

Q.37) What are pseudo elements and pseudo classes?

Ans: 
Pseudo-elements and pseudo-classes are special selectors in CSS that allow you to select and style specific parts of an HTML document based on certain conditions.
Pseudo-classes are used to select and style elements based on their state or position in the document, such as when they are hovered over or clicked. Some common pseudo-classes include:
  • :hover
  • :active
  • :visited
  • :focus
  • :nth-child()
Pseudo-elements, on the other hand, allow you to style specific parts of an element’s content, such as the first letter or line of text. Some common pseudo-elements include:
  • ::before
  • ::after
  • ::first-letter
  • ::first-line
Pseudo-elements and pseudo-classes are denoted by a double colon (::) or a single colon (:), depending on the selector. For example, the :hover pseudo-class is denoted with a single colon, while the ::before pseudo-element is denoted with a double colon.
 

Q.38) What are the different types of selectors in CSS?

Ans:
There are several types of selectors in CSS that allow you to target specific elements in an HTML document:
  1. Type selectors: These are used to target elements based on their HTML tag name, such as h1, p, or div.
  2. Class selectors: These are used to target elements with a specific class attribute value, denoted by a period (.) followed by the class name, such as .my-class.
  3. ID selectors: These are used to target elements with a specific ID attribute value, denoted by a hash (#) followed by the ID name, such as #my-id.
  4. Attribute selectors: These are used to target elements with a specific attribute value, denoted by square brackets and the attribute name and value, such as [type="submit"].
  5. Universal selectors: These are used to target all elements in the document, denoted by an asterisk (*).
  6. Descendant selectors: These are used to target elements that are descendants of other elements, separated by a space, such as ul li.
  7. Child selectors: These are used to target elements that are direct children of other elements, separated by a greater than sign (>), such as ul > li.
  8. Adjacent sibling selectors: These are used to target elements that are immediately adjacent siblings of other elements, separated by a plus sign (+), such as h1 + p.
  9. General sibling selectors: These are used to target elements that are siblings of other elements, separated by a tilde (~), such as h1 ~ p.

Q.39) What is the box model in CSS? Which CSS properties are a part of it?

Ans:
The box model is a fundamental concept in CSS that defines how elements are sized and spaced on a web page. According to the box model, every HTML element is comprised of four components: content, padding, border, and margin. These components combine to form a rectangular box around the content of an element.
The CSS properties that are part of the box model are:
  1. Content: This refers to the actual content of the element, such as text, images, or videos.
  2. Padding: This is the space between the content and the border of the element. Padding can be used to increase the amount of space around the content of an element.
  3. Border: This is a line that surrounds the element’s padding. Borders can be styled with different colors, widths, and styles.
  4. Margin: This is the space between the border of the element and the surrounding elements. Margins are used to create space between elements.
The box model is an essential concept to understand when working with CSS, as it affects how elements are positioned and sized on a web page.
 

Q.40) How can the background color of an element be changed?

Ans:
The background color of an element can be changed in CSS by using the background-color property. The property can be applied to any HTML element, including the body element, using one of the following syntaxes:
 
1. Using a color keyword:  
  background-color: red
 
2. Using a hexadecimal color code:  
 background-color: #ff0000;
 
3. Using an RGB color value:
background-color: rgb(255, 0, 0);
 
4. Using an RGBA color value with an alpha channel (for transparency):
background-color: rgba(255, 0, 0, 0.5);
 
In the above examples, the background color is set to red, but it can be changed to any other color by substituting the appropriate color keyword, hexadecimal code, or RGB/RGBA value.