Advanced Web Design: Notes

1. What is an HTML form?

An HTML form is used to collect user input. This is then further used for processing. In HTML the <form> element is the container which has different types of input elements.

So each form has one <form> element and has multiple <Input> elements inside it.

e.g.

<form>

              <Input>

             <Input>

…..  more as needed ….

</form>

2. What are the elements that are included in the form, other than <input>?

e.g. usage.

• <label for=”fname”>First name:</label>
  <input type=”text” id=”firstname” name=”firstname”>

• <select id=”cars” name=”cars” size=”4″multiple>
    <option value=”volvo”>Volvo</option>
    <option value=”saab”>Saab</option>
  </select>

• <textarea name=”message” rows=”10″ cols=”30″>
  The cat was playing in the garden.
  </textarea>

• <button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>

• <fieldset>
  <legend>Personalia:</legend>
      <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
      <input type=”submit” value=”Submit”>
    </fieldset>

3. What is an input element?

An input element is used along with the form element.  Depending upon the type attribute, different types of fields can be displayed on the screen.

4. What are different values that type attribute can have in <input> element?

e.g. usage

<form>  

    <label>Enter User name</label><br>  

    <input type=”text” name=”firstname”><br>  

    <label>Enter Password</label><br>  

    <input type=”Password” name=”password”><br>  

  <input type=”radio” name=”color” value=”red”> Red <br>  

  <input type=”checkbox” name=”sport1″ value=”cricket”>Cricket<br>  

  <input type=”file” name=”newfile”>  

 <input type=”image” alt=”Submit” src=”login.png”  width=”100px”>  

    <br><input type=”submit” value=”submit”>

<input type=”button” value=”Click me ” onclick=”alert(‘you are learning HTML’)”>

</form>   

5. What are the different attributes of input element?

e.g.

<input type=”text” id=”cc” name=”country_code”   pattern=”[A-Za-z]{3}” title=”Three letter code”>

<input type=”tel” name=”phone” pattern=”[0-9]{10}” required>

Audio and Video in HTML

6. What is <Audio> Tag?

• The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
• The <audio> tag contains one or more <source>tags with different audio sources. The browser will choose the first source it supports.
• The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

7. What are the supporting audio formats in HTML?

Below are the supported audio formats in HTML:

• MP3 – Audio format from MPEG (Moving/Motion Pictures Experts Group)
• AAC – Advanced Audio Coding
• OGG – An Open container and free audio format

E.g.

<audio controls autoplay>
  <source src=”horse.ogg” type=”audio/ogg”>
  <source src=”horse.mp3″ type=”audio/mpeg”>
  Your browser does not support the audio tag.
</audio>

8. What are the attributes of audio tag?

9. What is the <video> tag?

• The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
• The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.
• The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
• SYNTAX : <video src=”URL” controls></video>

10. What are the supported file formats for video tag?

There are three supported video formats in HTML: MP4, WebM, and OGG.

11. What are the different attributes of video tag?

12. What is an image map in HTML?

• An image with multiple hyperlinks is called an image map.
• An image map is created by marking certain regions on an image clickable. These clickable regions are called as hotspots.
• The HTML <map> tag defines an image map.  The image areas are defined with one or more <area> tags.

13. What are the different tags used to create an image map?

<Img> : It is used to insert an image on a web page. To create image map, usemap attribute of <img> is used with a value which is preceded with a # symbol. The usemap attribute acts as a pointer which indicates that the image is a image map.

<map> : It has only one attribute: name. It specifies name of the image used for client side image map. The value of the name attribute is the value specified in usemap attribute of <img>.

<area> : It defines specific clickable regions. A given <map> element can contain multiple <area>   elements within it. 

e.g.

<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>

<map name=”workmap”>

  <area shape=”rect” coords=”34,44,270,350″ alt=”Computer” href=”computer.htm”>

  <area shape=”circle” coords=”337,300,44″ alt=”Coffee” href=”coffee.htm”>

 <area shape=”poly” coords=”145,187,198,215,245,280,305″  href=”tri.htm “/>

</map>

14. What are the attributes of the <area> tag?

15. What is an <iframe> tag?

• The <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within the current HTML document.
• e.g. when doing advertising.
• Syntax: <iframe src=”https://simplycoding.in” title=“SimplyCoding”></iframe>

16. What are the attributes of <iframe> tag?

17. What is a frameset tag in HTML?

HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

e.g.

<frameset rows = “10%,80%,10%”>

          <frame name = “top” src = “/html/top_frame.htm” />

          <frame name = “bottom” src = “/html/bottom_frame.htm” />

     <noframes>

       <body>Your browser does not support frames.</body>        

     </noframes>

</frameset>

18. What is the <header> element in HTML?

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

• 
  
  • one or more heading elements (<h1> – <h6>)
  • logo or icon
  • authorship information

19. What is the nav element in HTML?

• The <nav> tag defines a set of navigation links.
• NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

20. What is the footer element in HTML?

• The <footer> tag defines a footer for a document or section.
• A <footer> element typically contains:
  • authorship information
  • copyright information
  • contact information
  • sitemap
  • back to top links
  • related documents

21. What is the <article> tag in HTML?

• The <article> tag specifies independent, self-contained content.
• An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
• Potential sources for the <article> element:
  • Forum post
  • Blog post
  • News story

22. What is the <aside> tag in HTML?

• The <aside> tag defines some content aside from the content it is placed in.
• The aside content should be indirectly related to the surrounding content.
• g. The <aside> content is often placed as a sidebar in a document.

23. What is the <div> tag in HTML?

• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements – which is then styled with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.