HTML Practice Questions
1: How many levels of headings are available in HTML?
Ans: 6
2: What is the default font size for HTML headings?
3: What happens if you skip heading levels, such as going from <h1> to <h3>?
Ans: Skipping heading levels can confuse both users and search engines. It's best
to maintain a proper hierarchical structure for better accessibility and SEO.
4: How many <h1> tags can be used on a single page?
Ans: Traditional Approach: Use only one <h1>tag for the main title or heading of
the entire page.
5: How do you create a paragraph using the <p> tag?
6: Can you nest other HTML elements inside a <p> tag?
Ans: No, the <p> tag is a block-level element, and it cannot contain block-level elements like other paragraphs or headings. However, you can include inline elements like <strong>, <em>, and links. </em></strong> </p>.
7: How can you create a link within the same webpage that takes the user to a specific section or element on the page?
Ans: To create a link that takes the user to a specific section or element within the same webpage, you can use the anchor (a) tag's href attribute along with the id attribute of the target element.
8: What's the difference between relative and absolute URLs in the href attribute?
Ans: Relative URLs are URLs that are relative to the current page's URL.
Absolute URLs are complete URLs, including the protocol (http/https) and domain.
9: How does the download attribute work in the anchor tag?
Ans: The download attribute suggests that the linked resource should be downloaded instead of navigated to, prompting the user to download the file.
10: How do you create an HTML link that opens the user's default email client with a specific email address?
<a href="mailto:example@123.com">Send email to personA</a>
11: How can you create a clickable link in HTML that allows users to directly initiate a phone call when clicked?
Ans: To create a link that enables users to initiate a phone call when clicked, you can use the anchor tag's href attribute with the tel: protocol.
<a href="tel:+1234567890">Call Us</a>
12: When might you use the entity?
Ans: The entity is used to insert a non-breaking space, which prevents the browser from collapsing consecutive spaces into one.
13: How would you display a trademark symbol using an HTML entity?
Ans: You can display a trademark symbol using the ™ entity: ™
14: Why is it important to use HTML entities for special characters?
Ans: Using HTML entities ensures proper rendering of characters and symbols and helps avoid conflicts with HTML syntax.
15: Represent the dollar sign symbol using different HTML entity methods
Ans: Using Named Entity: $ Using Hexadecimal Numeric Reference: #x00024; Using Decimal Numeric Reference: $
16: How would you make an image responsive using the width attribute?
Ans: You can set the width attribute to a percentage value (e.g., width="100%") to make the image adjust its width based on the available space.
17: How do you create an image link using the <img> tag?
Ans: You wrap the <img> tag with an anchor <a> tag and provide the href attribute in the <a> tag.
18: What's the difference between relative and absolute URLs in the href attribute?
Ans: Relative URLs are URLs that are relative to the current page's URL. Absolute URLs are complete URLs, including the protocol (http/https) and domain.
19: Why is providing descriptive alt text for images important? It improves
Ans: Accessibility for users with visual impairments and helps search engines understand image content.
20: What is the significance of the type attribute in ordered lists?
Ans: Decimal Numbers (type="1"): This is the default style. It uses regular decimal numbers. Uppercase Letters (type="A"): It uses uppercase letters (A, B, C) as list item numbers. Lowercase Letters (type="a"): It uses lowercase letters (a, b, c) as list item numbers. Uppercase Roman Numerals (type="I"): It uses uppercase Roman numerals (I, II, III) as list item numbers. Lowercase Roman Numerals (type="i"): It uses lowercase Roman numerals (i, ii, iii) as list item numbers.
21: What is the use of the start attribute in ordered lists?
23: Explain the concept of nested lists?
24: How do you create a horizontal navigation menu using an unordered list?
25: What is the purpose of the <thead>, <tbody>, and <tfoot> elements within a table?
26: How can you create table headers using the <th> element?
27: How is it different from using <td> for data cells?
28: What is the significance of the colspan and rowspan attributes in table cells? Provide an example
29: Difference between ID vs Class attribute?
Ans: Multiple elements in HTML can have the same class value, whereas a value of id attribute must be unique.
30: Difference between Div vs Span Tag?
Ans: <div></div> Element: Stands for "division."
1. Block-level element: It creates a block-level container that typically represents a section or division of content.
2. Creates a new line before and after itself by default
HTML TEXT FORMATTING
HTML formatting involves enhancing the visual presentation of text. It enables text manipulation for improved aesthetics, eliminating the need for CSS. Various formatting tags within HTML facilitate techniques such as bold, italics, and underline, enhancing the text's visual prominence and emphasis.
Bold and Italic:
- <strong>: Represents strong importance. Text inside this tag is typically displayed in bold.
- <em>: Represents emphasized text. Text inside this tag is usually displayed in italics.
<p>This is <strong> important </strong> and <em> emphasized </em> text.</p>
Underline and Strikethrough:
- <u>: Represents underlined text.
- <s>: Represents strikethrough text (crossed out).
<p>This is <u> underlined </u> and <s> strikethrough </s> text.</p>
Subscript and Superscript:
- <sub>: Represents subscript text (lower and smaller).
- <sup>: Represents superscript text (upper and smaller).
<p>the water 👉 H<sub>2</sub>O</p>
<p>Theory of Relativity 👉 e=mc<sup>2</sup></p>
Preformatted Text:
- <pre>: Represents preformatted text, preserving spaces and line breaks.
- <kbd> Tag: The <kbd> tag represents keyboard input, indicating that the enclosed content should be treated as something a user would type on a keyboard. It is often used to show examples of keyboard commands or shortcuts.
- <abbr> Tag: The <abbr> tag stands for "abbreviation" and is used to mark up abbreviations or acronyms in your content.
<pre>
To
The principal
<School Name>
Date : 23 Aug. 2024
Subject : Leave Application for two Days.
Respected sir/madam
With due Respect, I beg to say that I am a student of class 10th in your
school. I am not feeling well today and also have some weakness. Hence I
request you to please grant me two days leave.
I hope you will consider my application. I will definitely try to remain
present after 2 days.
Thanking you.
Yours obediently
Name : <Name>
Class : 10th
</pre>
<hr />
<p>To save a file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<hr />
<p>
<abbr title="World Health Organization">WHO</abbr> is an international
organization.
</p>
- <mark> Tag: The <mark> tag is used to highlight or mark a portion of text to draw attention to it. It typically results in a yellow background color behind the marked text, making it stand out visually.
<p>Highlight <mark>this text</mark> to emphasize it.</p>
- <small> Tag: The <small> tag is used to indicate that the enclosed text should be displayed in a smaller font size. It's often used for fine print, legal disclaimers, or less important information.
<p>This is a <small>smaller font size</small> text.</p>
- <del> Tag: The <del> tag is used to represent deleted or removed text in a document. Browsers typically render the text with a strike-through line to indicate that it has been deleted.
<p><del>My favorite color is green red.</p></del>
- Nesting elements: while using nested tag in one elements never mismatched the tags.
<!--
❌ <p>My cat is <strong>very grumpy.</p></strong>
✅ <p>My cat is <strong>very</strong> grumpy.</p>
-->
HTML ANCHOR TAG ATTRIBUTES
- href: Specifies the URL or destination the link points to.
- target: Specifies where the linked content will be displayed (e.g., _blank for a new window/tab).
- download: Suggests that the target will be downloaded when clicked.
- rel: Describes the relationship between the current page and the linked page.
- title: Provides additional information when hovering over the link.
- id: Assigns a unique identifier to the anchor for linking within the page.
- class: Assigns a class for styling or JavaScript interactions.
- style: Applies inline CSS styling to the anchor.
- tabindex: Specifies the tab order when navigating using the keyboard.
- accesskey: Defines a keyboard shortcut to activate the link.
- aria: Attributes for accessibility purposes (e.g., aria-label).
HTML Entities
HTML entities are codes used to represent special characters and symbols that have reserved meanings in HTML. These entities are especially important when you want to display characters that might conflict with HTML syntax or when you want to display characters that aren't directly available on your keyboard. HTML entities are represented using an ampersand (&) followed by a code and a semicolon (;).
<!-- < 👉 Less than sign (<)
> 👉 Greater than sign (>)
& 👉 Ampersand (&)
" 👉 Double quotation mark (")
' 👉 Single quotation mark or apostrophe (')
👉 Non-breaking space ( )
© 👉 Copyright symbol (©)
® 👉 Registered trademark symbol (®)
™ 👉 Trademark symbol (™)
♥ 👉 Heart symbol (♥) -->
<p>
<: Less than sign (<)<br />
>: Greater than sign (>)<br />
&: Ampersand (&)<br />
": Double quotation mark (")<br />
': Single quotation mark or apostrophe (')<br />
: Non-breaking space ( )<br />
$: Dollar Sign ($) <br />
©: Copyright symbol (©)<br />
®: Registered trademark symbol (®)<br />
™: Trademark symbol (™)<br />
♥: Heart symbol (♥, )
</p>
HTML AUDIO TAG Attributes
<audio controls autoplay muted>
<source src="./audio/audio_thapa.mp3" type="audio/mpeg" />
<source src="./audio/audio_thapa.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
- controls: Adds playback controls (play, pause, volume, etc.).
- autoplay: Starts playback automatically.
- loop: Repeats the media indefinitely. preload: Specifies if the media should be loaded when the page loads.
- poster: Displays an image before the media loads.
- HTML AUDIO TAG - Commonly supported audio formats
- MP3 (audio/mpeg): A widely supported format for audio. Provides good quality with reasonable file size.
- WAV (audio/wav): An uncompressed audio format with excellent quality, but larger file sizes.
- Ogg Vorbis (audio/ogg): A free and open audio format that provides good quality with smaller file sizes compared to MP3.
HTML Image tag
Deprecated attributes of HTML Images
- align
- border
- hspace
- vspace
<img
src="./html.png"
alt="html"
width="250"
height="150"
title="html"
loading="lazy"
/>
<img
src="./html.png"
alt="Clickable Map"
usemap="#map"
width="250"
height="150"
/>
<map name="map">
<area
shape="rect"
coords="150,30,200,80"
target="_blank"
href="#"
alt="youtube channel"
/>
<!--
<area
shape="circle"
coords="200,150,50"
href="#"
alt="Central Area"
/>
<area
shape="poly"
coords="300,100,350,200,250,200"
href="#"
alt="South Area"
/>
-->
</map>
<!-- Responsive image -->
<!-- <img
src="images/html.png"
alt="Responsive Image"
srcset="
images/html-400.jpg 400w,
images/html-600.jpg 600w,
images/html-800.jpg 800w,
images/html-1000.jpg 1000w
"
sizes="(max-width: 600px) 400px,
(max-width: 800px) 600px,
(max-width: 1100px) 1000px,
1200px"
/> -->
HTML Picture Tag
<picture>
<source srcset="./images/html.webp" type="image/webp" />
<source srcset="./images/html.jpg" type="image/jpg" />
<source srcset="./images/html.jpeg" type="image/jpeg" />
<source srcset="./images/html.svg" type="image/svg" />
<img
src="./html.png"
alt=""
width="500"
/>
</picture>
HTML Figure Tag
Note:
- The figure element is particularly useful for images, illustrations, diagrams, videos, audio clips, and other types of media.
- Use the alt attribute for images within the figure element to provide alternative text for accessibility.
- The figure element helps improve accessibility and search engine optimization by indicating the content and its context.
<figure>
<img
src="images/html.webp"
alt="html thumbnail best course"
width="500"
height="auto"
/>
<figcaption>Ever made in earth</figcaption>
</figure>
HTML Order List And Unorder List
Unordered List (<ul>) Styles:
Disc (list-style-type: disc;): Default style - filled circles.
Circle (list-style-type: circle;): Hollow circles.
Square (list-style-type: square;): Squares.
None (list-style-type: none;): No bullet points.
Ordered List (<ol>) Styles:
Decimal (list-style-type: decimal;): Default style - decimal numbers.
Lowercase Letters (list-style-type: lower-alpha;): Lowercase letters (a, b, c).
Uppercase Letters (list-style-type: upper-alpha;): Uppercase letters (A, B, C).
Lowercase Roman Numerals (list-style-type: lower-roman;): Lowercase Roman numerals (i, ii, iii).
Uppercase Roman Numerals (list-style-type: upper-roman;): Uppercase Roman numerals (I, II, III)
HTML Video Tag
<video controls muted loop poster="./images/html.webp" width="500">
<source src="./video/thapatechs.mp4" type="video/mp4" />
<source src="./video/thapatech1.webm" type="video/webm" />
</video>
<!--* Void Elements / EMPTY ELEMENTS -->
<!--? Not all parts of a web page use the usual pattern of having an opening tag, some content, and then a closing tag. Some parts only need a single tag to work. These are called "void elements. -->
<!-- Here are a few more examples of void elements:
<img>: This is used to insert images. You only need to use <img> and provide attributes like src (source) and
alt (alternate text).
<input>: This is used for input fields, like text boxes or checkboxes.
<link>: This is used to connect to external resources like stylesheets or icons.
<hr>: This creates a horizontal line to separate content. -->
compelte html, seo n project and live free me host n paid me host
<!-- *------------------------------------- -->
<!--* 1: DISPLAY KEYWORDS AT BOTTOM JO USE KR RHA HU WO ADD KRNA HAI.. T
<!-- *---------------------------------------- -->
building block of website / How website works
html css n js / ek exmaple & last we can't create website usign css n js .. so HTML is the one we need to master.
when u click on one text of a page1 and it redirects u to onother page then that text of page1 is claled hypertext or hyperlink.
and this defination is writyne in the world first webite ever created non other then tim berner lee .
front end developers create static website
and fully flessehd front end + nbackend + db make fullstack website
<!-- In html markup language means a link to other text which make pages --> first website ka example
<!--* html tips -->
<!-- .html vs .htm bcz back we cna use only 3letters -->
<!-- file name index.html is the defualt n it's has to be present and index.html is the only fiel whihc file name we dont need to right bcz it defualt n remianig pages fiel name must be written -->
<!-- index.html also I can write or simple url is enough -->
<!--* Interview Q 1: -->
<!-- tag vs elements -->
<!-- h1 best html course h1 -->
<!--* simple HTML Documents / Structure -->
<!-- without closing tag => let the browser know it's an HTML5 doc. Appear once, at the top of the page -->
<!-- Root of an HTML Doc -->
<!-- contains the information about the HTML Documnet -->
<!-- contains everything you want to display on the web page -->
<!--* language how -->
<!-- html lang = en => the lang attribute specifies the lang. of hte element content -->
<!-- en value => specifies the language code for the elements content -->
<!-- code likhek dikhan hai . -->
<!-- *------------------------------------- -->
<!--* 1: HTML HEADING ELEMENTS
<!-- *---------------------------------------- -->
<h1> The Best HTML Course on Youtube </h1>
show the same for h2 to h6
<!--! The name of an element inside a tag is case-insensitive. -->
<!--! in one single page only one H1 need to be there -->
<!--! always follow the rule to go from H1 to H6 -->
<!-- *------------------------------------- -->
<!--* INTERVIEW Q: HTML HEADING ELEMENTS
<!-- *---------------------------------------- -->
<!--? 1: How many levels of headings are available in HTML? -->
<!--? 2: What is the default font size for HTML headings? -->
<!--? 3: What happens if you skip heading levels, such as going from <h1> to <h3>? -->
Skipping heading levels can confuse both users and search engines. It's best to maintain a proper hierarchical structure for better accessibility and SEO.
<!--? 4: How many <h1> tags can be used on a single page? -->
Traditional Approach: Use only one <h1> tag for the main title or heading of the entire page.
<!-- *------------------------------------- -->
<!--* 2: HTML PARAGRAPH ELEMENTS
<!-- *---------------------------------------- -->
<p>
Thapa Technical is an amazing YouTube channel for learning web development. Their tutorials are easy to follow and enjoyable. By watching their videos, you can learn the skills needed for a web development job. Check out Thapa Technical to boost your chances of getting hired in this field!
</p>
<!--! interview questions on whitespaces -->
<!-- Whitespace in HTML -->
<p id="noWhitespace">Susbcribe to Thapa Technical</p>
<p id="whitespace">Susbcribe to
Thapa
Technical
</p>
<!--? No matter how much whitespace you use inside HTML element content (which can include one or more space characters, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. -->
<!-- *------------------------------------- -->
<!-- * INTERVIEW Q: HTML PARAGRAPH ELEMENT
<!-- *---------------------------------------- -->
<!--? 1:How do you create a paragraph using the <p> tag? -->
<!--? 2: Can you nest other HTML elements inside a <p> tag? -->
No, the <p> tag is a block-level element, and it cannot contain block-level elements like other paragraphs or headings. However, you can include inline elements like <strong>, <em>, and links.
<!-- *------------------------------------- -->
<!--* 3: HTML comments
<!-- *---------------------------------------- -->
To write an HTML comment, wrap it in the special markers <!-- and -->. For example:
<!-- *------------------------------------- -->
<!--* 2: HTML TEXT FORMATTING
<!-- *---------------------------------------- -->
<!--* Nesting elements -->
<!--? 3: while using nested tag in one elements never mismatched the tags -->
❌ <p>My cat is <strong>very grumpy.</p></strong>
✅ <p>My cat is <strong>very</strong> grumpy.</p>
<!-- *------------------------------------- -->
<!--* HTML Entities
<!-- *---------------------------------------- -->
<!-- H2SO4 -->
<!--* Void Elements / EMPTY ELEMENTS -->
<!--? Not all parts of a web page use the usual pattern of having an opening tag, some content, and then a closing tag. Some parts only need a single tag to work. These are called "void elements. -->
<!-- Here are a few more examples of void elements:
<img>: This is used to insert images. You only need to use <img> and provide attributes like src (source) and alt (alternate text).
<input>: This is used for input fields, like text boxes or checkboxes.
<link>: This is used to connect to external resources like stylesheets or icons.
<hr>: This creates a horizontal line to separate content. -->
<!--* I knw you are like this much only, here is a list of void elements in HTML and HTML5: -->
<!--
<area>: Defines a clickable area within an image map.
<base>: Specifies a base URL for relative URLs in a document.
<br>: Represents a line break.
<col>: Specifies column properties for a table column group.
<embed>: Embeds external content or plugin content.
<hr>: Represents a thematic break or horizontal rule.
<img>: Embeds an image.
<input>: Represents an input field.
<link>: Specifies relationships between a current document and external resources.
<meta>: Provides metadata about the HTML document.
<param>: Defines parameters for plugins.
<source>: Specifies multiple media resources for media elements like <audio> and <video>.
<track>: Specifies text tracks for media elements.
<wbr>: Represents a word break opportunity in text. -->
<!-- *------------------------------------- -->
<!--* 2: HTML PRE TAG
<!-- *---------------------------------------- -->
<!-- application to principal -->
<!-- *------------------------------------- -->
<!--* 2: HTML ANCHOR TAG
<!-- *---------------------------------------- -->
<a href="#" target="_blank">click Me</a>
<!-- INTERVIEW QUESITON HREF FULL FORM
email and phone number
how ot make downlaod pdf zip file wala button
-->
<!-- Dispaly the thapa techncial new website link click krek -->
<!--* 1: How can you create a link within the same webpage that takes the user to a specific section or element on the page? -->
To create a link that takes the user to a specific section or element within the same webpage, you can use the anchor (<a>) tag's href attribute along with the id attribute of the target element. Here's how it works:
<!--* 1: What's the difference between relative and absolute URLs in the href attribute? -->
Relative URLs are URLs that are relative to the current page's URL.
Absolute URLs are complete URLs, including the protocol (http/https) and domain.
<!--* 2: How does the download attribute work in the anchor tag? -->
The download attribute suggests that the linked resource should be downloaded instead of navigated to, prompting the user to download the file.
<!--* 4: How do you create an HTML link that opens the user's default email client with a specific email address? -->
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
<!--* 5: How can you create a clickable link in HTML that allows users to directly initiate a phone call when clicked? -->
"To create a link that enables users to initiate a phone call when clicked, you can use the anchor (<a>) tag's href attribute with the tel: protocol. For example: <a href="tel:+1234567890">Call Us</a>
<!--* ALSO WHEN TO USE QUOTES, WHEN NOT TO -->
✅ <a href=https://www.mozilla.org/>favorite website</a>
❌ <a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
<!-- So the best practice is Always include the attribute quotes. It avoids such problems, and results in more readable code. -->
<!--* Single or double quotes? -->
<a href='https://www.example.com'>A link to my example.</a>
<a href="https://www.example.com">A link to my example.</a>
<!-- mixing both the quotes at the same time is wrong -->
<!-- ❌ <a href="https://www.example.com'>A link to my example.</a> -->
<!-- However, if you use one type of quote, you can include the other type of quote inside your attribute values: -->
<a href="https://www.example.com" title="Isn't this fun?"> A link to my example. </a>
<!-- *------------------------------------- -->
<!--* 2: HTML IMAGE TAG
<!-- *---------------------------------------- -->
<img src="./images/html.png" alt="best html course" width="200" height="500" title="watch html by thapa">
<!-- CHECK THE IAMGE -->
<!-- Interview Question for relative and absolute (complete path from root ) path -->
<!-- make the iamge clickable -->
<!-- *------------------------------------- -->
<!--* HTML NEW TAG PICTURE TAG (WEBP)
<!-- *---------------------------------------- -->
<!-- Tag which are new -->
<!-- <Picture> </Picture> -->
<!-- SQUOOSH.APP For webp format website display -->
<!-- chekc the current source while hovering on the iamge in console part -->
<!-- *------------------------------------- -->
<!--* HTML NEW TAG Figure TAG
<!-- *---------------------------------------- -->
<!--* ATTRIBUTES -->
<!--* BOOLEAN ATTRIBUTES -->
<!-- Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. -->
<!-- Boolean attributes can only have one value, which is generally the same as the attribute name. For example, consider the disabled attribute, which you can assign to form input elements -->
<input type="text" disabled="disabled" />
<!--? As shorthand, it is acceptable to write this as follows: -->
<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" disabled />
<!--* This is the best way to introduce the Entities -->
<!--* Also, we can use HTML Entities for same / Entity references: Including special characters in HTML -->
<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>
<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>
<!-- *------------------------------------- -->
<!--* HTML SEMANTIC ELEMENTS
<!-- *---------------------------------------- -->
<!-- SEMANTIC VS NON SEMANTIC -->
<!-- DIV VS SPAN -->
<!-- DIV AN SPAN LIKHO EK SATH BUT DIV IS COMES UNDER BLOCK ELEMENT N IT WILL TAKE ALL THE LINE AND REST COMENS IN NEXT LINE -->
<!-- ADD WHY WE NEED SEMANTICS SUPPOSE DEVELPER CHANGE N IF WE WRITE FOOTER KE BADLE HEADER THEN IT WILL BE HARD TO FIND IT -->
<!-- *------------------------------------- -->
<!--* HTML LIST
<!-- *---------------------------------------- -->
ORDER VS UNORDERED
<!-- list sytle we can change -->
Unordered List (<ul>) Example:
An unordered list is used to create a list of items that are not in any particular order. Each list item is marked with a bullet point.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
Unordered List (<ul>) Styles:
Disc (list-style-type: disc;): Default style - filled circles.
Circle (list-style-type: circle;): Hollow circles.
Square (list-style-type: square;): Squares.
None (list-style-type: none;): No bullet points.
<ul style="list-style-type: circle;">
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
Ordered List (<ol>) Example:
An ordered list is used to create a list of items in a specific order, typically indicated by numbers.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Ordered List (<ol>) Styles:
Decimal (list-style-type: decimal;): Default style - decimal numbers.
Lowercase Letters (list-style-type: lower-alpha;): Lowercase letters (a, b, c).
Uppercase Letters (list-style-type: upper-alpha;): Uppercase letters (A, B, C).
Lowercase Roman Numerals (list-style-type: lower-roman;): Lowercase Roman numerals (i, ii, iii).
Uppercase Roman Numerals (list-style-type: upper-roman;): Uppercase Roman numerals (I, II, III)
<ol style="list-style-type: lower-alpha">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- *------------------------------------- -->
<!--* INTERVIEW Q: HTML LIST
<!-- *---------------------------------------- -->
<!--? 1: What is the significance of the type attribute in ordered lists? -->
<!-- Decimal Numbers (type="1"): This is the default style. It uses regular decimal numbers. -->
<!-- Uppercase Letters (type="A"): It uses uppercase letters (A, B, C) as list item numbers.
Lowercase Letters (type="a"): It uses lowercase letters (a, b, c) as list item numbers.
Uppercase Roman Numerals (type="I"): It uses uppercase Roman numerals (I, II, III) as list item numbers.
Lowercase Roman Numerals (type="i"): It uses lowercase Roman numerals (i, ii, iii) as list item numbers. -->
<!--? 2: What is the use of the start attribute in ordered lists? -->
<!--!very important we can only use in ol not in ul -->
<ol start="4">
<li style="list-style: lower-alpha"><a href="#">Home</a></li>
<li style="list-style: lower-alpha"><a href="#">About</a></li>
<li style="list-style: lower-alpha"><a href="#">Services</a></li>
<li style="list-style: lower-alpha"><a href="#">Contact</a></li>
</ol>
<!--? 3: Explain the concept of nested lists -->
<ul>
<li>fruit
<ul>
<li>banana</li>
<li>apple
<ul>
<li>green</li>
<li>red</li>
</ul>
</li>
<li>pears</li>
</ul>
<li>vegetables</li>
<li>meat</li>
</li>
</ul>
<!--? 4: How do you create a horizontal navigation menu using an unordered list? -->
<style>
.horizontal-menu { list-style: none; }
.horizontal-menu li { display: inline-block; margin-right: 10px; }
</style>
<body>
<ul class="horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
<!-- *------------------------------------- -->
<!--* HTML TABLES
<!-- *---------------------------------------- -->
<!-- <table> Element: Defines an HTML table, which is used to organize data into rows and columns.
<tbody> Element: Groups the main content (data rows) of an HTML table.
<thead> Element: Groups the header content (table headings) of an HTML table.
<th> Element: Defines a header cell (table heading) within a table.
<td> Element: Represents a data cell within an HTML table.
<tr> Element: Defines a row within an HTML table. -->
<!-- *------------------------------------- -->
<!--* INTERVIEW Q: HTML TABLES
<!-- *---------------------------------------- -->
<!-- 1: What is the purpose of the <thead>, <tbody>, and <tfoot> elements within a table? -->
<!-- 2: How can you create table headers using the <th> element? How is it different from using <td> for data cells? -->
<!-- 3: What is the significance of the colspan and rowspan attributes in table cells? Provide an example. -->
<!-- *------------------------------------- -->
<!--* HTML FORM
<!-- *---------------------------------------- -->
<!-- label is very important for those who cant see -->
<!-- type of input and types of attributes in each input field -->
<!-- auto focus autocomplete='off' -->
<!-- Interview select vs datalist too -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<div>
<label for="username">Enter Your Name</label>
<input type="text" id="username">
</div>
</form>
</body>
</html>
<!-- <fieldset></fieldset> -->
<!--! interview quesiton -->
<!-- id vs class -->
<!-- *------------------------------------- -->
<!--* HTML iframe
<!-- *---------------------------------------- -->
how to create a nested webpage in html
<!-- embed youtube video -->
<!-- I cna even add wikipedia webite, I can add wikipedia website website ke under dusra website -->
<!-- *------------------------------------- -->
<!--* HTML VIDEO
<!-- *---------------------------------------- -->
The HTML <video> tag is used to embed video content directly into a web page. It allows you to play video files supported by various web browsers.
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
1: Embedding a Local Video File:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
2: Embedding a Video from a URL:
<video controls>
<source src="https://example.com/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
3: Multiple Source Formats for Browser Compatibility:
<video controls>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- controls, LOOP, AUTOPLAY , MUTED -->
WHICH TYPE OF VIDEO FOREMAT ARE SUPPORTED
<!--! Interview Questions:
What does the <video> tag do in HTML?
The <video> tag is used to embed video content directly into a web page.
How do you specify the video file to be played using the <video> tag?
You can use the <source> tag within the <video> tag, specifying the src attribute with the video file's URL and the type attribute with the MIME type of the video format.
What does the controls attribute do in the <video> tag?
The controls attribute adds standard video controls (play, pause, volume, etc.) to the video player.
How would you provide fallback content for browsers that do not support the <video> tag?
You can place content between the opening and closing <video> tags. This content will be displayed in browsers that do not support the <video> tag.
Why might you provide multiple <source> elements within a <video> tag?
Multiple <source> elements are provided to offer different video formats (e.g., WebM, MP4) for better browser compatibility. The browser will automatically select and play the first supported format.
What is the purpose of the type attribute in the <source> tag?
The type attribute specifies the MIME type of the video format. It helps the browser determine which video format it can play.
How can you make a video play automatically when the page loads?
You can add the autoplay attribute to the <video> tag, like <video autoplay>.
What are some alternative ways to customize the video player's appearance and behavior?
CSS and JavaScript can be used to customize the appearance and behavior of the video player, such as hiding certain controls or adding custom controls. -->
<!-- *------------------------------------- -->
<!--* HTML AUDIO
<!-- *---------------------------------------- -->
<!-- *------------------------------------- -->
<!--* HTML ENTITIES
<!-- *---------------------------------------- -->
ALWAYS STARTED WITH &, LET'S SAY WE CANT COPY TAG
<!-- *------------------------------------- -->
<!--* SEO
<!-- *---------------------------------------- -->
TOP 5
HEAD TAG, TITLE AND DSCR
ONE H1 TAG only
IMAGE N A TAG USE ALT ATTRIB. AND REDUCE IAMGE FIEL SIZE
og meta Tag
<!-- *------------------------------------- -->
<!--* PROJECT - AWESOME WEBSITE
<!-- *---------------------------------------- -->
HEADER
logo - make real logo
<NAV></NAV>
<!-- hero section -->
heading
para
button
IAMGE
<!-- article -->
VINOD AND DATE
HEADING
SUB HEADING
add audio tag like whre user can listen to the aricle instaead of reading
<!-- <article> link </article> -->
ADD LINK IN BETWEEN THE ARTICLE
BOTTOM ADD THE LINKS TO OTHERS ARTICLE
GOOGLE <MAP></MAP>
CONTACT FORM
FOOTER
WHILE EXPLAING THE VIDEO SIMPY SHOW THE seo part
<!-- *------------------------------------- -->
<!--* PROJECT - Host AWESOME WEBSITE
<!-- *---------------------------------------- -->
<!-- netlify host -->
<!-- *------------------------------------- -->
<!--* SEO FINAL TAG
<!-- *---------------------------------------- -->
<!-- *------------------------------------- -->
<!--* WEBSITE TESTING
<!-- *---------------------------------------- -->
HTML FORM
- Text Input: Allows users to enter a single line of text.
- Password Input: Hides the entered text for secure password entry.
- Email Input: Validates and formats input as an email address.
- Number Input: Accepts numeric input and provides increment/decrement controls.
- Radio Buttons: Allows users to choose a single option from a group of options.
- Checkboxes: Allows users to select multiple options.
- Dropdowns: Provides a list of options for users to choose from.
- <datalist>: Provide a predefined list of options for autocomplete suggestions.
- Textarea: Allows users to enter multiple lines of text.
- File Upload: Lets users choose and upload files from their device.
- Submit Button: Submits the form data to the server.
- Range Input: Allows users to select a value from a specified range using a slider.
- Date Input: Provides a date picker for selecting dates.
- Time Input: Allows users to input a specific time.
- Color Input: Presents a color picker for selecting colors.
- URL Input: Validates and formats input as a URL.
- Search Input: Provides a search input field with a clear button.
- Month Input: Allows users to select a month and year.
- Week Input: Allows users to select a specific week and year.
<form>
<div>
<label for="number">max subject</label>
<input
type="number"
class="sameclass"
id="number"
max="5"
min="1"
value="1"
/>
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
</div>
<div>
<label for="hobbies"> Fav Hobbies: </label>
<input type="checkbox" name="interest" value="music" /> Music
<input type="checkbox" name="interest" value="sports" /> Sports
</div>
<div>
<label for="country">Select a Country:</label>
<input type="text" id="country" name="country" list="countries" />
<datalist id="countries">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</datalist>
</div>
<div>
<label for="comment"> Message Us: </label>
<textarea
name="comments"
rows="10"
cols="100"
placeholder="Enter your comments"
></textarea>
</div>
<div>
<label for="file">Select File</label>
<input type="file" name="fileUpload" />
</div>
<input type="submit" value="Submit" />
<!-- or -->
<button type="submit">Submit</button>
<label for="email">Enter Your Email: </label>
<input
type="email"
placeholder="enter your email"
name="email"
required
autocomplete="off"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
size="30"
value="thapa@thech.com"
readonly
disabled
/>
<div>
<label for="range">Range: </label>
<input type="range" name="volume" min="0" max="100" value="80" />
</div>
<div>
<label for="birthdate">birthdate: </label>
<input type="date" name="birthdate" />
</div>
<div>
<label for="appointmentTime">appointmentTime: </label>
<input type="time" name="appointmentTime" />
</div>
<div>
<label for="favoriteColor">favoriteColor: </label>
<input type="color" name="favoriteColor" />
</div>
<div>
<label for="website">website: </label>
<input type="url" name="website" placeholder="Enter website URL" />
</div>
<div>
<label for="searchQuery">searchQuery: </label>
<input type="search" name="searchQuery" placeholder="Search..." />
</div>
<div>
<label for="expiryDate">Month & Year: </label>
<input type="month" name="expiryDate" />
</div>
<div>
<label for="week">vacationWeek: </label>
<input type="week" name="vacationWeek" />
</div>
</form>
<!-- Semantic HTML5 Form Elements: Semantic HTML5 form elements like <label>, <fieldset>, and
<legend> provide better structure and accessibility to forms.
<label>: Associates text labels with form elements for better user understanding.
<fieldset>: Groups related form elements together, creating a visual and semantic grouping.
<legend>: Provides a caption or title for the <fieldset> element. -->
<form action="/" method="">
<fieldset>
<legend>Contact Info</legend>
<div>
<label for="username">Username</label>
<input type="text" id="username" />
</div>
<div>
<label for="email">Enter your email</label>
<input type="email" id="email" />
</div>
<div>
<label for="textarea">Message</label>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
</div>
<input type="submit" value="submit" />
</fieldset>
</form>
0 Comments