Category: HTML

Top 50 HTML Interview Questions with Answers

by rahulkrHTMLLeave a Comment on Top 50 HTML Interview Questions with Answers
HTML Interview Questions with Answers

1. What does HTML stand for?

a) Hyper Text Markup Language
b) Higher Text Markup Language
c) Hyperspace Text Markup Language
d) Home Text Marking Language

Answer: a)

2. Which is the use of the img tag?

a) Insert an image
b) Create a hyperlink
c) Create a table
d) None of the above

Answer: a)

3. Which tag is used to define unordered list?

a) ul
b) ol
c) li
d) div

Answer: a)

4. Which is the correct syntax for creating a hyperlink?

a) <a href="https://www.example.com">Example</a>
b) <a src="https://www.example.com">Example</a>
c) <a link="https://www.example.com">Example</a>
d) <a target="https://www.example.com">Example</a>

Answer: a)

5. What is the use of the alt attribute in the img tag?

a) To define the size of the image
b) To define the width of the image
c) To define a description of the image
d) None of the above

Answer: c)

6. Which is the correct way to define a paragraph in HTML?

a) <par>
b) <pt>
c) <p>
d) <para>

Answer: c)

7. What is the use of the tag in HTML?

a) To define the main content of the webpage
b) To define the footer of the webpage
c) To define the title and meta information of the webpage
d) To define the body of the webpage

Answer: c)

8. Which is the correct way to define a table in HTML?

a) <tbl>
b) <tb>
c) <table>
d) <tab>

Answer: c)

9. Which tag defines the header of a table?

a) <thead>
b) <th>
c) <header>
d) <table>

Answer: a)

10. Which tag defines a line break?

a) <br>
b) <lb>
c) <break>
d) <new>

Answer: a)

11. Which tag is used to define a hyperlink?

a) <a>
b) <h>
c) <p>
d) <b>


d) Answer: a)

12. Which tag is used to make text bold?

a)
b)
c)
d) Answer: b)

13. Which tag is used to define a form?

a)
b)
c)
d)

Answer: c)

14. Which attribute is used to define the type of input in the input tag?

a) value
b) type
c) name
d) id

Answer: b)

15. Which input type is used for selecting multiple options?

a) select
b) checkbox
c) radio
d) multi-select

Answer: a)

16. Which tag is used for text input?

a)
b)
c)
d) Answer: d)

17. What is the use of the label tag?

a) To define a title for the webpage
b) To define a title for the form element
c) To define a caption for a table
d) None of the above

Answer: b)

18. Which attribute is used to define the width of a table?

a) width
b) col
c) size
d) table-width

Answer: a)

19. Which attribute is used to merge cells in a table?

a) col
b) colspan
c) row
d) rowspan

Answer: d)

20. Which tag is used to define a list item?

a) <ul>
b) <ol>
c) <li>
d) <list>

Answer: c)

21. Which tag is used to create a dropdown list in a form?

a) <dropdown>
b) <list>
c) <select>
d) <menu>

Answer: c)

22. Which attribute is used to define the height of an image?

a) width
b) height
c) h
d) img-height

Answer: b)

23. Which input type is used for radio buttons?

a) select
b) checkbox
c) radio
d) multi-select

Answer: c)

24. Which tag is used to define an ordered list?

a) <ul>
b) <ol>
c) <li>
d) <list>

Answer: b)

25. Which attribute is used to define a link target in the a tag?

a) target
b) link
c) href
d) src

Answer: a)

26. Which tag defines a horizontal line?

a) <hr>
b) <line>
c) <hline>
d) <horz>

Answer: a)

27. Which tag is used to create a text area in a form?

a) <textarea>
b) <input>
c) <text>
d) <area>

Answer: a)</h4>

28. Which tag is used to define a text heading?

a) <title>
b) <h>
c) <head>
d) <header>

Answer: b)

29. Which attribute is used to define a color in HTML?

a) color
b) col
c) bgcolor
d) background

Answer: c)

30. Which tag is used for italic text?

a) <italic>
b) <i>
c) <em>
d) <italic-text>

Answer: b)

31. What does CSS stand for?

a) Computer Style Sheets
b) Creative Style Sheets
c) Cascading Style Sheets
d) Colorful Style Sheets

Answer: c)

32. Which property is used to change the background color in CSS?

a) color
b) background-color
c) bgcolor
d) background

Answer: b)

33. Which property is used to change the font size in CSS?

a) font
b) font-size
c) text-size
d) size

Answer: b)

34. Which property is used to set the border style in CSS?

a) border
b) border-size
c) border-style
d) None of the above

Answer: a)

35. Which property is used to set the text color in CSS?

a) text-color
b) color
c) font-color
d) None of the above

Answer: b)

36. Which property is used to center align text in CSS?

a) center
b) text-center
c) align
d) text-align

Answer: d)

37. Which property is used to set the text decoration in CSS?

a) decoration
b) text-decoration
c) underline
d) None of the above

Answer: b)

38. Which property is used to set the display style in CSS?

a) display
b) style
c) visibility
d) None of the above

Answer: a)

39. Which property is used to set the margin in CSS?

a) margin
b) margin-size
c) size
d) None of the above

Answer: a)

40. Which property is used to set the padding in CSS?

a) padding
b) padding-size
c) size
d) None of the above

Answer: a)

41. Which property is used to set the text alignment in CSS?

a) align
b) text-align
c) center
d) None of the above

Answer: b)

42. Which property is used to set the font-family in CSS?

a) family
b) font
c) font-family
d) None of the above

Answer: c)

43. Which property is used to set the font-style in CSS?

a) style
b) font-style
c) font-family
d) None of the above

Answer: b)

44. Which property is used to set the font-weight in CSS?

a) weight
b) font-weight
c) font-size
d) None of the above

Answer: b)

45. Which property is used to set the background image in CSS?

a) background-image
b) background
c) image
d) None of the above

Answer: a)

46. Which property is used to set the text transform in CSS?

a) transform
b) text-transform
c) None of the above
d) Both a and b

Answer: b)

47. Which property is used to set the font variant in CSS?

a) variant
b) font-variant
c) None of the above
d) Both a and b

Answer: b)

48. What is the use of the float property in CSS?

a) To position an element
b) To adjust the font size
c) To set the background color
d) None of the above

Answer: a)

49. What is the use of the z-index property in CSS?

a) To set the width of an element
b) To set the height of an element
c) To set the position of an element
d) To set the stacking order of an element

Answer: d)

50. What is the use of the position property in CSS?

a) To set the color of an element
b) To set the visibility of an element
c) To set the position of an element
d) None of the above

Answer: c)

How can we understand Django?

by rahulkrCSS / HTML / Python

Hello, my loving friends, today in this article. We are going to deliver a brief description of Django. In this course details, we are covering the prominent part of Django for beginners. If you are a python learner or a seeker then this is the exact place for any individual those have been looking for. In this topic, we have covered all the beneficiary subjects regarding this course. I will really say that this will give you the best experiences of your doing and what you are going to do.

What is Django?

Django

Django is a free and open-source web framework. Now you will say it is ok we don’t know about the free part and its open-source part but what is a framework? Now. The framework is a combination of certain components and packages. Definitely, if you want to build some complex application. There are certain things that you need to make. For example, if you want to make a web application. You don’t want anything from scratch. It will be time-consuming. So, you will be using a framework here. Now, Django is not the only framework that’s only available.            

Why use the Django framework?

Django framework

One of them is and one of the famous ones is Django. Why do we have to learn Django there? Django as we know is a web application framework that means you can build web applications. But hold on, our websites are so important definitely. If you talk about any business, they need their own online presence. In fact, most of the virtual solutions which you use nowadays are web applications. For example, if you want to buy something online, we have amazon, flip kart, and eBay. If you want to book a cab, you have an uber. We have so many applications available which are based on the web. If you want to build them, you will be using Django there. But you talk about the websites, we know that you can build websites with the help of HTML, CSS, & JavaScript. So, basically, we use HTML to design the page. You can think of HTML as makeup for you. Now that you have CSS, if you want to improve your design, if you want to have that uniformity in the design that’s you will use CSS. We have Html, CSS for design. To make your websites interactive, you can use JavaScript.

Static and dynamic website

Yes, you use HTML, CSS, and JavaScript in the front hand. What about the backhand part? What if you want to make a website like a dynamic website? For example, if you go to Facebook, everyone will get influent by the feeds, you will not see the same messages which everyone is seeing. Your Facebook is different from that. If you go to amazon, you can buy stuff online, you can pay, and you can transfer the amount online. All these things need certain operations and certain processing is done on the backhand side. That’s where we need a line base that will work on the backhand but which one? But we have certain options there, we have java using, if you have heard about servlet, you can do that, PHP, Asp, and Python. But hold on, how can you do that python?          

How Django can be used?

That’s where we have Django. So, you can use Django to build a web application in the backhand part in python. As I mentioned before, Django is not the only web framework is available but it’s quite famous there. Now, it comes to web applications one thing that is very famous in MVC. It doesn’t matter which language you learn maybe java, PHP, or asp. We have this thing common in MVC (Model view controller). Now. Basically, we do that you can separate the concerns. We have a model for data, view the Html format that you have seen on the screen and then we have a controller which will control these operations.          

What is MVT in Django?

But in general, when you say MVC, it will help you to build a good web application but in Django, we have something similar to MVC not exactly MVC normally call as MVT. So, MVT is a model view template so basically in MVT we are replacing the controller with a view and replacing the view with the template. But Django basically follows MVT so, if you have worked on MVC in a different language. Don’t worry, it’s almost the same but needs some changes. But why did you choose Django? When you have some other framework is available in python. The first Reason is Django is fast, which simply means if you want to build something, you shouldn’t be spending much time in the configuration so, Django will help you to build applications faster. The second one is the number of components available.

The thing apart from if you record a video, you need some components with you. You need a camera, lights, and mike, in the same way, if you want to build a web application. You need log in, database connectivity, all these things come bundled in Django. Does advantages and drawbacks as well, advantages you have everything with you and drawback, you have everything on you. The third one is security if you are building an application where you use it. Definitely, there will be sending the data and you want to secure them & the users. So, Django will provide you with that security. The fourth one is scalability, what if in future sites scales, you want to have multiple users, & more features and it will give you the options as well. That’s the reason, you should be learning Django. It is interesting so if you have done your python course. This is the very true place and accurate learning path for you.

Tagged : / / / / / / / /

Tutorial for Method Attribute in html for php

by Ashwani KumarHTML / phpLeave a Comment on Tutorial for Method Attribute in html for php

What is Method Attribute?

The HTTP method used to transfer data while submitting the form is specified using the HTML form> method Attribute. The HTTP methods GET and POST are the two types of HTTP methods. With the form> element, the method attribute can be used.

Html 4

Attribute Values:

  • GET:- When using the GET method, the form data are shown in the address bar of the new browser tab once the form is submitted. It is restricted to around 3000 characters in length. It’s just good for non-sensitive data, not for sensitive data.
  • POST:– After submitting a form with the post method, the form values will not appear in the address bar of the new browser tab, as they did with the GET method. The form data is appended to the body of the HTTP request. It is unrestricted in terms of size. The outcome of this technique is not bookmarkable.

Which are the Supported Tags:–

<form>

Syntax:– 

<form method="get|post">

Example 1:– This example illustrates the use of GET method attribute.

Output:-

Example 2: This example illustrates the use of the POST method attribute. This method sends the form-data as an HTTP post-transaction. 

Output:-

Tagged : / / / / / / / / /

Tutorial for Enctype Attribute in html for php

by Ashwani KumarHTML / phpLeave a Comment on Tutorial for Enctype Attribute in html for php

What is  Enctype Attribute?

This Attribute indicates that data in the form should be encoded before being submitted to the server. This sort of property can only be utilised if the method is set to “POST.”

Syntax:

<form enctype = "value">

Element:– The enctype property is only applicable to the form> element.

Attribute Value: There are three values for this characteristic, which are given below:

  • application/x-www-form-urlencoded:– It’s the default setting. Before sending the data to the server, it encodes all of the characters. Spaces are converted to + symbols, while special characters are converted to their hex value.
  • multipart/form-data:– There is no character encoded in this value.
  • text/plain:– This value converts spaces to + symbols, however it does not convert special characters.

Example:–

Output:-

Supported Browsers: The browser supported by enctype Attribute are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

Tagged : / / / / / / /

DOCTYPE Declaration HTML5

by vikashdev kHTMLLeave a Comment on DOCTYPE Declaration HTML5

<!DOCTYPE html>

HTML 5 Tags

  • Header – It specifies a header for a document or section.
  • Nav – It defines navigation links.
  • Section – It defines a section in a document.
  • Article – It defines an article. For example a blog post or forum post etc.
  • Aside – It can define content aside from the page content like a sidebar.
  • Details – It is used to defines additional details that the user can view or hide. It has one attribute-value pair which is open = “open” and that means by default the data will be visible for users/viewers. By default it has False value so the details will be hidden.
  • Summary – It is used to defines a visible heading for a <details> element.
  • Footer – It specifies a footer for a document or section.

Meter Tag

It defines a scalar measurement within a known range or a fraction value. This is also known as a gauge. It should not be used to indicate the progress bar. If the browser doesn’t support the meter tag then it will show text written between the opening meter tag and the closing meter tag.

Ex:-

<meter value=“20” max=“100” min=“10”>Range</meter>

<meter low=”60″ high=”80″ value=”100″ max=”100″>Range</meter>

Meter Tag Attributes

AttributeValueDescription
valueNumberSpecifies the current value of the meter. This must be between the min and max values.
formForm_idIt associates the <meter> with a <form>
highNumberIt specifies the range that is considered to be a high value. This must be less than the max value.
lowNumberIt specifies the range that is considered to be a low value. This must be greater than min value.
maxNumberIt specifies the max value of the range.
minNumberIt specifies min value of the range.
optimumNumberIt specifies what value is the optimal value for the meter.
  • Mark – This tag is used to highlight text or part of the text. Ex: – <p>This is <mark>Geekyshows</mark></p>
  • Dialog – This tag defines a dialog box or window. It can be used to create popup dialogs. It has one attribute-value pair which is open = “open” and that means by default the data will be visible for users/viewers. By default it has False value so the data will be hidden. Ex: – <dialog>Click Here</dialog>
  • Main – This tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element. Ex: – <main><article>This is art</article></main>
  • wbr – The <wbr> (Word Break Opportunity) element specifies a position within text where the browser may optionally break a line if necessary. Ex: – <p>Hello worldddddddddddddddddd<wbr>welcome</wbr></p>
  • Figure – The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.  Ex: – <figure> <img src=“image.jpg“ width=”304″ height=”228″> </figure>
  • figcaption – The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last child of the <figure> element. Ex: – 
     <figure>
       <img src=“image.jpg" width="304" height="228">
       <figcaption>Picture One</figcaption>
     </figure>
  • Progress – The <progress> element represents the completion progress of a task. It has two attributes max which Specifies how much work the task requires in total and value which Specifies how much of the task has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if the max attribute is not present. Ex: –  <progress id=”bar” value=”0″ max=”100″> </progress>
Tagged : / / / / / / / /

HTML: Id Attribute

by vikashdev kHTMLLeave a Comment on HTML: Id Attribute

The id attribute specifies a unique id for an HTML element. The value must be unique within the HTML document.

The id attribute is mostly used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. The id attribute can be used on any HTML element.

Rules

  • Must begin with a letter A-Z or a-z.
  • A class name cannot start with a number.
  • Must not contain any space characters.
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens (“-“), and underscores (“_”).
  • In HTML, all values are case-insensitive.
<html>
	<head>
		<title> id attribute</title>
		<style>
			#top{
				color: blue;
			}
			#imp{
				color: brown;
			}
		</style>
	</head>
	<body>
		<a href="#imp">Important</a>
		<p id="top">
			Once upon a time, all the birds - the swans, cranes, </p>
		<h3 id="imp">
			Goodwill is that unseen force which is </h3>
		<p>He has neither the time, nor the interest to bother </p>
		<a href="#top">Go to Top</a>
	</body>
</html>
Tagged : / / / / / / /

HTML: Class Attribute

by vikashdev kHTMLLeave a Comment on HTML: Class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name. The class attribute specifies one or more class names for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

In HTML5, the class attribute can be used on any HTML element.

Rules

  • Must begin with a letter A-Z or a-z.
  • A class name cannot start with a number.
  • Must not contain any space characters.
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens (“-“), and underscores (“_”).
  • In HTML, all values are case-insensitive.
<html>
	<head>
		<title>class tag</title>
		<style>
			.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	<h2 class=red> Heading line </h2>
	<p class =red>1st paragraph line</p>
	<p> paragraph tag </p>
	</body>
</html>

More than one class name

To specify multiple classes, separate the class names with a space. This allows you to combine several CSS classes for one HTML element. Syntax:- class=“class_name1 class_name2 class_nameN” Ex:- <p class =“red look”>I am first paragraph</p>

<html>
	<head>
		<title>class name twice or max </title>
		<style>
			p.red {color: #FF0000;}
			p.look{font-size: 100px;}
			.algn{text-align: center;}
		</style> 
	</head>
	<body>
	<h2>I am Heading</h2>
	<p class ="red look"> first paragraph</p>
	<p class="red algn">second paragraph</p>
	
	</body>
</html>
Tagged : / / / / / / /

HTML: Style Attribute

by vikashdev kHTMLLeave a Comment on HTML: Style Attribute

The style attribute is used to set the style of an HTML element. In HTML5, the style attribute can be used on any HTML element. Syntax: –

style=“property1: property1-value; property2: property2-value;” Where property is CSS property and Property-value is CSS value.

<html>
	<head>
		<title>Hello CSS</title>
	</head>
	<body>
	<h1 style= color:blue  font-size: 45em; >
                   I am Heading
        </h1>
	<p style= color:rgb(38,226,85) font-size: 40px; > 
                  I am 1st Para
        </p>
	<p>I am second Paragraph</p>
	</body>
</html>
Tagged : / / / / / /

HTML: div tag

by vikashdev kHTMLLeave a Comment on HTML: div tag

The HTML <div>…..</div> tag is used define a section of document. Using div tag, you can group large sections of HTML elements together and format them with CSS. The <div> element is very often used together with CSS, to layout a web page.

By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Inside: Body tag

<html>
	<head> </head>
	<body>
		<p>paragraph outside div tag</p>

		<div style="color: red">
  		         <h3>heading tag is inside div tag</h3>
  		          <p>paragraph tag is inside div tag</p>
		</div>

	</body>
</html>

Outside: Body tag

<html>
	<head>
		<style>
			div {
    				color: red;
			       }
		</style>
	</head>
	<body>
		This is body. 
	<div> inside div tag which is calling form the out side of the body</div>
	</body>
</html>
Tagged : / / / / / / /

HTML: Style Tag

by vikashdev kHTMLLeave a Comment on HTML: Style Tag

The <style> tag is used to declare style sheets within the head of  HTML document. Inside the <style> element you specify how HTML elements should render in a browser. Each HTML document can contain multiple <style> tags.

AttributeValueDescription
mediamedia_querySpecifies what media/device the media resource is optimized for
scopedscopedSpecifies that the styles only apply to this element’s parent element and that element’s child elements
typetext/cssSpecifies the media type of the <style> tag
<html>
	<head>
		<title>html_style</title>
		
		</style>
	</head>
	<body style="background-color: rgb(180, 221, 67);">
	<h1 style="text-align: center;">Style tag</h1>
	<p style="margin-bottom: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, nobis.</p>
  <hr>
  <br>
	<p style="color: blue;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi?</p>
	</body>
</html>
Tagged : / / / / / / /