blog banner
 

1. Explain The float property of css ?

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable.

The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element.

Specifications:

  • A left-floated box will shift to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box
  • If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down
  • Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in relation to other block elements
  • Margins of floated boxes do not collapse with margins of adjacent boxes
  • The root element (<html>) cannot be floated
  • An inline element that is floated is converted to a block-level element

Example :

<h3> With out any float </h3>

<div class="container">

<div class="child" style="width:50px;height:50px;background-color:red;"></div>
<div class="child" style="width:50px;height:50px;background-color:green"></div>

</div>

<h3> applying float:right to child red block </h3>

<div class="container">

<div class="child" style="float:right;width:50px;height:50px;background-color:red"></div>
<div class="child" style="width:50px;height:50px;background-color:green"></div>

</div>

<h3> applying float:right to wrapper container class </h3>

<div class="container" style="float:right;">

<div class="child" style="width:50px;height:50px;background-color:red"></div>
<div class="child" style="width:50px;height:50px;background-color:green"></div>

</div>

Output :

 

2. Explain the usage of clear property in css?

The clear property is directly related to floats. If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the float. Then the element will move down below the floated element.

For example Lets imagine there is a dive which has been floated right and this div has plenty of spaces left on left side. Then you declare another div which has no float property assigned. So the 2nd div should come beneath the 1st one (on left side), but in realty it would appear differently, the 2nd div will go to left side of first one. To avoid this, we use clear property.

clear can have any one of three values

  • left - to clear float: left
  • right - to clear float: right
  • both

Example

<h3 > With out clear</h3>

<div class="container" style="float:right">

<div class="child" style="width:50px;height:50px;background-color:red;"></div>
<div class="child" style="width:50px;height:50px;background-color:green"></div>

</div>

<div class="container">

<div class="child" style="width:50px;height:50px;background-color:blue;"></div>
<div class="child" style="width:50px;height:50px;background-color:yellow"></div>

</div>

Output :

Here the the blue & yellow boxes should have come under red & green. Now see the what will happen if we use clear:both

<h3 style="clear:both" > With clear</h3>

<div class="container" style="float:right">

<div class="child" style="width:50px;height:50px;background-color:red;"></div>
<div class="child" style="width:50px;height:50px;background-color:green"></div>

</div>

<div class="container" style="clear:both">

<div class="child" style="width:50px;height:50px;background-color:blue;"></div>
<div class="child" style="width:50px;height:50px;background-color:yellow"></div>

</div>

Output :

 

3. Explain the display: inline & display:block property in css?

Display : inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:

in style of head if we write :

ul li {

display: inline;
margin: 10px;

}

then in body if we create a list like :

<ul>

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

</ul>

then output will be something like :

Display : block

The block value of the display property forces an element to behave like block-level element, like a <div> or <p> 
 

4. Explain display: inline-block property of css?

You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it's even easier. inline-block elements are like inline elements but they can have a width and height. Let's look at examples of both approaches.

The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content.
 

5. Explain display table, table-row and table cell property of css ?

If you want to gibe table like structure and looks to a non-table elements then you will need these properties. most important usage of this property is, If you need equal height of boxes then you will use this. For example, lets imagine there are some floated boxes with unknown content and you have to make all them with equal height. Simply apply the display: table (or table-row) property to the container and the display: table-cell property to inner boxes. Take care to remove any float property (otherwise the table-cell property doesn't take effect).

 

6. What are the differences between Inline , block & inline-block ?

Inline elements:

  • respect left & right margins and padding, but not top & bottom
  • cannot have a width and height set
  • allow other elements to sit to their left and right.

Block elements:

  • respect all of those
  • force a line break after the block element

Inline-block elements:

  • allow other elements to sit to their left and right
  • respect top & bottom margins and padding
  • respect height and width

 

7. In how many ways you can keep two divs side by side using html & css ?

It can be done in many ways. Among them most popular ways are using float or using inline-block or using table properties.

Output :

 

7. What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

1. HTML is application of Standard Generalized Markup Language(SGML) whereas XML is application of Extensible Markup Language(XML).
2. HTML is a static Web Page whereas XHTML is dynamic Web Page.
3. HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
4. HTML is about displaying information whereas XHTML is about describing the information.

 

8. What is difference between HTML and HTML5?

The differences between HTML and HTML5 are:

1. Document of HTML is very large as compare to the HTML5.
2. Audio and Video tags are not present in HTML whereas HTML5 contains audio and video tags.
3. Vector technology is not integral part of HTML whereas HTML5 Vector technology is the integral part of it.
4. HTML supported by all old browsers whereas HTML5 is supported by new browser.
5. In HTML web sockets are not available whereas in HTML5 Full duplex communication channel is present.

 
9. What is definition of CSS?

CSS stands for Cascading Style Sheets. By using CSS with HTML we can change the look of the web page by changing the font size and color of the font. CSS plays an important role in building the website. Well written CSS file can be used to change the presentation of each web page. By including only one CSS file. It gives web site developer and user more control over the web pages.

 

10. What are the different way in which website layout can be made?

Website layout describes how the webpage of the website will look. It describes the content that has to be placed in columns i.e. it can be either one or many columns. There are two ways in which different layout can be created and these are called as using table method or using div method.

 

 

11. What is the difference between the application model of HTML and HTML5?

Trick question, there is no difference. HTML5 is a continuum of HTML and just a souped up version of the original HTML. There has been no major paradigm shift.
 

12. What are some new HTML5 markup elements?

There are several: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>, and <wpr>.
 

13. What elements have disappeared?

As mentioned above, <frame> and <frameset> have been eliminated. Other elements that are no longer supported include: <noframe>, <applet>, <bigcenter> and<basefront>.
 

14. What are the new media-related elements in HTML5?

HTML5 has strong support for media. There are now special <audio> and <video> tags. There are additional A/V support tags as well: <embed> is a container for 3rd party applications. <track> is for adding text tracks to media. <source> is useful for A/V media from multiple sources.
 

15. What are the new image elements in HTML5?

Canvas and WebGL. <Canvas> is a new element that acts as a container for graphical elements like images and graphics. Coupled with JavaScript, it supports 2D graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for generating 3D graphics in web browsers.
 

16. What is the difference between SVG and <Canvas>?

<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, <Canvas> is to SVG as Photoshop is to Illustrator.
 

17. What are some new input attributes in HTML5?

There are many new form elements including: datalist, datetime, output, keygen, date, month, week, time, number, range, email, and url.
 

18. What are data- attributes good for?

The HTML5 data- attribute is a new addition that assigns custom data to an element. It was built to store sensitive or private data that is exclusive to a page or application, for which there are no other matching attributes or elements.
 

19. Describe the difference between cookies, sessionStorage, and localStorage.

Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Of the two, localStorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.
 

20. What are some of the major new API’s that come standard with HTML5?

To name a few: Media API, Text Track API, Application Cache API, User Interaction, Data Transfer API, Command API, Constraint Validation API, and the History API.

 

21. What is the difference in caching between HTML5 and the old HTML?

An important feature of HTML5 is the Application Cache. It creates an offline version of a web application. and stores website files such as HTML files, CSS, images, and JavaScript, locally. It is a feature that speeds up site performance.
 

22. How to restore the default property value using CSS?

In short, there’s no easy way to restore to default values to whatever a browser uses . The closest option is to use the ‘initial’ property value, which will restore it to the default CSS values, rather than the browser’s default styles.
 

23. How are inline and block elements different from each other?

A block element is an element that takes up the full width available, and has a line break before and after it. <h1>, <p>, <li>, and <div> are all examples of block elements.

An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <span> are examples of inline elements.
 

24. What is the purpose of the z-index and how is it used?

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number. An element with a higher z-index is always stacked above one with a lower index.

Z-Index can take the following values:

Auto: Sets the stack order equal to its parents.

Number: Orders the stack order.

Initial: Sets this property to its default value (0).

Inherit: Inherits this property from its parent element.
 

25. What are the advantages and disadvantages of External Style Sheets?

The biggest advantages of external style sheets are that they can be applied to multiple documents while being managed from a single style sheet. This keeps code DRY and improves efficiency and convenience.

The disadvantages are that it may decrease loading time in some situations. It may also not be practical if there are not enough styling conditions to justify an external sheet.

 

26. How do I link to a location in the middle of an HTML document?

We can link to a location in the middle of an HTML document. Using Following steps:

1. Label the destination of the link :

There are two ways of labeling destination using Anchor:

- NAME attribute:

Example:

<h2><a name="destination">Destination: Explanation</a></h2>

- ID attribute:

Example:

<h2 id="Destination_ID"> Destination: Explanation </h2>

2. Link to the labeled destination :

We can link with the destination in the same URL page and with Different URL page.

Example:

Same URL:

<a href="#Destination_ID"> Visit to destination</a> 

Different URL:

<a href="another_url.html#Destination_ID">go to destination</a>

 

27. Explain Non Breaking space in HTML.

When we add many spaces in the content then HTML remove all space except one space this is Non Breaking Space. To overcome this problem we use '&nbsp;'(without space between & and nbsp;). Suppose we want to add 3 space between two words then we have to use &nbsp; three time.

Example :

<p> We Are ArrayPeers </p>
<p> We &nbsp;&nbsp;&nbsp; Are &nbsp;&nbsp;&nbsp; ArrayPeers </p>

Output :

 

28. Create a nested table design ?

<table cellpadding="15px"; cellspacing="15px;" style="border : 3px solid blue; ">

<tr>

<td style="border : 3px solid blue;">first cell of the outer table</td>

<td style="border : 3px solid blue;" >second cell of the outer table, creating second table inside the first table

<table cellpadding="15px"; cellspacing="15px;" style="border : 3px solid green;">

<tr>

<td style="border : 3px solid green;">first cell of the second table</td>
<td style="border : 3px solid green;">second cell of the second table</td>

</tr>

</table>

</td>

</tr>

</table>

Output :

 

29. You want only a vertical scrollbar and no horizontal scrollbar on your page. How would you do it?

<style type="text/css">

body{

overflow-y: scroll;
overflow-x: hidden;

}

</style>

 

30. How would you automatically transfer your visitors to a new web page?

- You can do it with the help of meta tag mentioned below:

<META HTTP-EQUIV="Refresh" CONTENT="2"; URL="http://www.yoursite.com/new_page">

- Place this tag between <HEAD></HEAD> .

- It will start loading yoursite.com/new_page in 2 seconds. The number in content specify the amount of time in seconds.

 

31. How will you align a table to the right or left?

- To align the table to the right, you can use <TABLE ALIGN="right">
- To align the table to the left, you can use <TABLE ALIGN="left">
 

32. Why doesn't <TABLE WIDTH="100%"> use the full browser width?

- This is because the graphical browser is designed to leave a margin between the display area and actual content.
- The navigator also leaves some space for the scroll bar on the right side of the display area. Though, if the page is not long enough, the scroll bar doesn’t appear.

 

33. Explain the difference between visibility:hidden and display:none

o visibility:hidden simply hides the element, while it will still take up space and affect the layout of the document.

o display:none also hides the element, but will not take up space and the page will appear as if the element is not present.

 

34. How to upload files using HTML to website?

The uploading of files requires some necessary configuration like :An HTTP server that acts as a transaction between the user and the server. Access to the directory of cgi-bin that consists of the receiving script.

To upload form you must mention enctype="multipart/form-data" with in form tag. The enctype="multipart/form-data" is needed to tell the browser to expect to receive binary data, means it will tell the browser that this form can upload files.

The form that has to be uploaded will be done by the following given code:

<form method="post" enctype="multipart/form-data" action="up.cgi">

<!-- This tag will contain the file name that has to be uploaded on the website -->
<input type=file name="upload">

<input type=submit value="Upload File">

</form>

 

Output:

 

35 : How will you be able to upload many files at a time in HTML ?

For uploading multiple files , The input type field for the files will have an attribute of multiple="multiple" this enables uploading of multiple files, give the input a name with [] like upload[], this will form an array of files when processing the form.

<form method="post" enctype="multipart/form-data" action="up.cgi">

<input type=file  name="upload[]" multiple="multiple">

<input type=submit value="Upload File">

</form>

Admin Team


0 Respond



Written
Exam Questions
BLOG Posts
For study materials
Job Walk-In
Updates across India
Interview round
Questions
Interview or procedure
Experiences
Files
For study materials
Please LIKE our page to Get regular JOB WALK-IN UPDATES across India and STUDY MATERIALS on facebook news feed.