HTML Quiz Exercise Lab

Front End Developers-Lab


HTML
Interview Questions and Anwsers

Practice Before Interview or Quiz

(HTML) HyperText Markup Language is the language used to describe and define the content of a Web page in a well-structured format.


      HTML Quiz Exercise Lab

      HTML stands for?

      HyperText Markup Language is the language used to describe and define the content of a Web page in a well-structured format.


      How many heading styles are there in HTML?

      6 headings, h1..h6


      How images are displayed on web pages in HTML?

      In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:


      Explain Form element used in HTML?

      A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.A form is defined with the form tag.


      How colors are defined in HTML?

      HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.


      Explain about frames used in HTML?

      With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page


      How to use styles in HTML?

      When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

      External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section.

      Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the style tag.


      What is the difference between form get and form post?

      Get
      With GET the form data is encoded into a URL by the browser. The form data is visible in the URL allowing it to be bookmarked and stored in web history. The form data is restricted to ASCII codes. Because URL lengths are limited there can be limitations on how much form data can be sent.

      Post
      With POST all the name value pairs are submitted in the message body of the HTTP request which has no restrictions on the length of the string. The name value pairs cannot be seen in the web browser bar.

      POST and GET correspond to different HTTP requests and they differ in how they are submitted. Since the data is encoded in differently, different decoding may be needed.


      List some common IE6 bugs and how you dealt with them?

      Ie6 is not dead, just ask China which represents a nice chunk of the worlds online population. Your pages should at least be functional on IE6, unless you dont care about half the worlds population. See the links below for a good compilation of ie6 bugs and solutions.

      What is the importance of the HTML DOCTYPE?

      The doctype declaration should be the very first thing in an HTML document, before the html tag.

      The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

      The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.


      <ul class="shopping-list" id="awesome">
          <li><span>Milk</span></li>
          <li class="favorite" 
      id="must-buy"><span class="highlight">Sausage</span></li> </ul>

      CSS:

      ul {
          color: red;
      }
      li {
          color: blue;
      }
      

      What is the color of the text Sausage ?

      • Red
      • Blue
      • Neither

      Blue


      <ul class="shopping-list" id="awesome">
          <li><span>Milk</span></li>
          <li class="favorite" 
      id="must-buy"><span class="highlight">Sausage</span></li> </ul>

      CSS:

      ul li {
          color: red;
      }
      #must-buy {
          color: blue;
      }
      

      What is the color of the text Sausage ?

    1. Red
    2. Blue
    3. Neither
    4. Blue


      <ul class="shopping-list" id="awesome">
          <li><span>Milk</span></li>
          <li class="favorite" 
      id="must-buy"><span class="highlight">Sausage</span></li> </ul>

      CSS:

      .shopping-list .favorite {
          color: red;
      }
      #must-buy {
          color: blue;
      }
      

      What is the color of the text Sausage ?

      • Red
      • Blue
      • Neither

      Blue


      <ul class="shopping-list" id="awesome">
          <li><span>Milk</span></li>
          <li class="favorite" 
      id="must-buy"><span class="highlight">Sausage</span></li> </ul>

      CSS:

      ul#awesome {
          color: red;
      }
      ul.shopping-list li.favorite span {
          color: blue;
      }
      

      What is the color of the text Sausage ?

      • Red
      • Blue
      • Neither

      Blue


      <ul class="shopping-list" id="awesome">
          <li><span>Milk</span></li>
          <li class="favorite" 
      id="must-buy"><span class="highlight">Sausage</span></li> </ul>

      CSS

      ul.shopping-list li .highlight {
          color: red;
      }
      ul.shopping-list li .highlight:nth-of-type(odd) {
          color: blue;
      }
      

      What is the color of the text Sausage ?

      • Red
      • Blue
      • Neither

      Blue


      Given the HTML below:

      <ul class="shopping-list" id="awesome">
          <li><span>Milk</span></li>
          <li class="favorite" 
      id="must-buy"><span class="highlight">Sausage</span></li> </ul>
      #awesome .favorite:not(#awesome) .highlight {
          color: red;
      }
      #awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
          color: blue;
      }
      

      What is the color of the text Sausage ?

      • Red
      • Blue
      • Neither

      Red


      HTML:

      <p id="example">Hello</p>
      

      CSS:

      #example {
          margin-bottom: -5px;
      }
      

      What will happen to the position of #example?

      • It will move 5px downwards
      • All elements succeeding #example with move 5px upwards
      • Neither

      All elements succeeding #example with move 5px upwards


      HTML:

      <p id="example">Hello</p>
      

      CSS:

      #example {
          margin-left: -5px;
      }
      

      What will happen to the position of #example?

      • It will move 5px left
      • All elements preceding #example with move 5px to the right
      • Neither

      It will move 5px left 5px left


      HTML:

      <div id="test1">
          <span id="test2"></span>
      </div>
      

      CSS:

      #i-am-useless {
          background-image: url('mypic.jpg');
      }
      

      Are unused style resources still downloaded by the browser?

      • Yes
      • No
      • Sometimes

      No


      HTML:

      <div id="test1">
          <span id="test2"></span>
      </div>
      

      CSS:

      #test2 {
          background-image: url('mypic.jpg');
          display: none;
      }
      

      On page load, will mypic.jpg get downloaded by the browser?

      • Yes
      • No

      Yes


      HTML:

      <div id="test1">
          <span id="test2"></span>
      </div>
      

      CSS:

      #test1 {
          display: none;
      }
      #test2 {
          background-image: url('mypic.jpg');
          visibility: hidden;
      }
      

      On page load, will mypic.jpg get downloaded by the browser?

      • Yes
      • No

      No


      CSS:

      @media only screen and (max-width: 1024px) {
          margin: 0;
      }
      

      What is the use of the only selector?

      • Stops older browsers from parsing the remainder of the selector
      • Apply the style for screen only and ignore the device max-width
      • It does nothing

      Stops older browsers from parsing the remainder of the selector


      HTML:

      <div>
          <p>I am floated</p>
          <p>So am I</p>
      </div>
      

      CSS:

      div {
          overflow: hidden;
      }
      p {
          float: left;
      }
      

      Does overflow: hidden create a new block formatting context?

      • Yes
      • No

      Yes


      Explain Form element used in HTML?

      A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.A form is defined with the form tag.


      CSS:

      @media only screen and (max-width: 1024px) {
          margin: 0;
      }
      

      Does the screen keyword apply to the device's physical screen or the browser's viewport?

      • Device's physical screen
      • Browser's viewport

      Browser's viewport


      Is <keygen> a valid HTML5 tag?

      • Yes
      • No

      Yes


      Does the <bdo> tag change the direction of text?

      • Yes
      • No

      Yes


      HTML:

      <figure>
      	<img src="myimage.jpg" alt="My image">
      	<figcaption>
      		<p>This is my self portrait.</p>
      	</figcaption>
      </figure>
      

      Is the above HTML valid?

      • Yes
      • No

      Yes


      In what situation should you use the <small> tag?

      • When you want to create subheading after a <h1> element
      • When you want to add copyright information inside a <footer>
      • Both situations

      When you want to add copyright information inside a <footer>


      Explain Form element used in HTML?

      A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.A form is defined with the form tag.


      If a web page contains organic, multiple <h1> tags, will it affect the SEO negativley?

      • Yes
      • No

      No


      If you have a page of search results and want to highlight the search term, what HTML tag would you use?

      • <strong>
      • <mark>
      • <em>
      • <highlight>

      <mark>


      HTML:

      <article>
          <h1>Hello World</h1>
          <style scoped>
              p {
                  color: #FF0;
              }
          </style>
          <p>This is my text</p>
      </article>
      
      <article>
          <h1>This is awesome</h1>
          <p>I am some other text</p>
      </article>
      

      What does the scoped attribute do?

      • Applies style rules to elements succeeding it, but with the same parent element
      • Applies style rules to all children of the scoped parent element
      • Applies style rules to IE browsers only
      • None of the above

      Applies style rules to all children of the scoped parent element


      HTML:

      <article>
          <a href="#">
              <h1>Hello</h1>
              <p>I am some text</p>
          </a>
      </article>
      

      Does HTML5 support block-level links?

      • Yes
      • No

      Yes


      HTML:

      <img src="mypic.jpg" style="visibility: hidden" alt="My picture">
      

      Does the HTML above trigger a http request when the page first loads ?

      • Yes
      • No

      Yes


      HTML:

      <div style="display: none;">
          <img src="mypic.jpg" alt="My photo">
      </div>
      

      Does the HTML above trigger a http request when the page first loads?

      • Yes
      • No

      Yes


      HTML:

      <head>
          <link href="main1.css" rel="stylesheet">
          <script>
              alert('Hello World');
          </script>
      </head>
      

      Does main1.css have to be downloaded and parsed before Hello World is alerted?

      • Yes
      • No

      Yes


      HTML:

      <head>
          <link href="main1.css" rel="stylesheet">
          <link href="main2.css" rel="stylesheet">
      </head>
      

      Does main1.css have to be downloaded and parsed before main2.css can be fetched?

      • Yes
      • No

      No


      HTML:

      <head>
          <link href="main1.css" rel="stylesheet">
      </head>
      <body>
          <p>Paragraph 1</p>
          <p>Paragraph 2</p>
          <link href="main2.css" rel="stylesheet">
      </body>
      

      Does main2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page?

      • Yes
      • No

      Yes


      What are some of the online tools and resources you use when you have a problem? Where do you go to ask questions?

      This question really just looks for how resourceful the candidate is, it also reflects on their problem solving process and may lead you to ask more questions.

      What is web a application?

      A great question to feel out the depth of the applicants knowledge and experience.

      A web application is an application utilizing web and [web] browser technologies to accomplish one or more tasks over a network, typically through a [web] browser.

      Must read: $(document).ready(function(){ $('.loader img').click(function() { $('.loader img').hide(); \\ $('.loader img').hide(); }); });




      Are you sure you're ready for this Quiz ?

      Front End Web Development
      Quiz By David Shariff

      Full HTML page

      Coming up! My E-Book