Quick Reference Study Notes for HTML 4.x (Advanced)

HTML 4.X

 

 

1) Introduction: HTML 4 extends HTML with mechanisms for style sheets, scripting, frames, embedding objects, improved support for the right to left and mixed direction text, richer tables, and enhancements to forms, offering improved accessibility for people with disabilities. Some of the features of this version include:

  • Internationalization: This version of HTML is designed to support writing documents in all languages and can be transported all over the world. IT has adopted ISO/IEC:10646 as the character set for HTML. It can easily deal with all kinds of language issues of all the languages used all around the world.

  • Accessibility: It is easily accessible to those who have some physical limitations. 

i)  It allows a better distinction between document structure and presentation. It boosts the use of style sheets.

ii)  It allows authors to integrate image and text links.

iii) Long descriptions of tables, images, frames, etc.

iv) Support for the title and lang attributes on all elements.

v)  Support for the ABBR and ACRONYM elements.

  • The OBJECT element provides a mechanism for including images, video, sound, mathematics, specialized applications, and other objects in a document.

  • Style sheets offer more powerful presentation mechanisms

  • Through scripts, authors may create dynamic Web pages and use HTML as a means to build networked applications.

a) Basic Structure of HTML tag:

<!DOCTYPE html>

<html>

    <head>

       <title>This is document title</title>

    </head>

    <body>

       <h1>This is a heading</h1>

       <p>Document content goes here.....</p>

    </body>

</html>

 

b) Basic Tags and description:

 

Tag

Description

<!DOCTYPE...>

This tag defines the document type and HTML version.

<html>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.

<head>

This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.

<title>

The <title> tag is used inside the <head> tag to mention the document title.

<body>

This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.

<h1>

This tag represents the heading.

<p>

This tag represents a paragraph.


 

2) Basic tags used in HTML 4:

 

  • Heading Tags: <h1> to <h6> . <h1> with largest font and <h6> with smallest font.

  • Paragraph tag: It writes your text in the form of a paragraph enclosed between <p> and </p>

  • Break tag: Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

  • Center tag: To put the tag in the center you can use this tag. <center>-----</center>

  • Horizontal Line: The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.<hr/>. It is also an empty element.

  • Preserve formatting: If you want your code to be displayed as it is written in HTML code, you can use this tag. <pre>------</pre>

  • Non Breaking spaces: Sometimes you don’t want to split your phrase into two lines in that case  &nbsp can be used. 

  • The following Example includes all the tags explained above:

<!DOCTYPE html>

<html>

    <head>

       <title>Heading Example</title>

    </head>

<body>

      <h1>Study Section</h1>

       <h2>Study Section</h2>

       <h3>Study Section</h3>

       <h4>Study Section</h4>

       <h5>Study Section</h5>

      <h6>Study Section</h6>

       <center> Introduction about Study Section </center>

       <p> Study Section provides Free Online Certification and Diploma Certificate Exams in Software Development, MS Office, Web Design, Graphic Design, English, Aptitude, Personal Development, Business, Accounting and more. Pass and get a Free Test Record. Get a soft copy of your certificate at a nominal fee.

</p>

     <hr/>

     <pre>

          Study Section Provides three levels of Certifications:<br/>

          Foundation Level<br/>

          Advanced Level <br/>

          Expert Level<br/>

     <pre>

     <p>You can get a lots of Education related stuff from this Website. It provides "Good&nbsp;Technical&nbsp;Stuff."</p>

         </body>

</html>

 

a) All the HTML elements can be categorized into two categories:

 

i) Block Elements: Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.

ii) Inline Elements: Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

 

b) HTML attributes: Most of the HTML tags carry some extra bit of information. That information is called attributes of tags. All attributes are made up of two parts: name and value. 

  • The name is the property you want to set. For Example, In a <p> tag how you want the alignment of your content. You can give align attribute to your paragraph.

  • The value is what you want the value of the property to be set and always put within quotations. Like, If you want to align your paragraph you can align it in the following ways: left, center and right. 

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

For Example, 

<!DOCTYPE html> 

<html>

     <head> 

       <title>Align Attribute  Example</title> 

    </head>

<body> 

       <p align = "left">This is left aligned</p> 

       <p align = "center">This is center aligned</p> 

       <p align = "right">This is right aligned</p> 

    </body>

</html>

 

c) Formatting Elements in HTML 4:

 

Name

Element

Description

Bold

<b>-------</b>

To make the text bold.

Itallic

<i>------</i>

To make the text itallic.

Undeline

<u>-----</u>

It displays the text as underlined.

Strike Through

<strike>------</strike>

It displays a line through the text.

Monospaced

<tt>----</tt>

It displays the text with the same width in all the letters.

Superscript

<sup>----</sup>

It displays half a character's height above the other characters.

Subscript

<sub>------</sub>

It displays half a character's height beneath the other characters.

Inserted Text

<ins>---</ins>

It displays the text as inserted text.

Deleted Text

<del>----</del>

It displays the text as deleted text.

Larger Text

<big>----</big>

It displays one font size larger than the rest of the text.

Smaller Text

<small>-----</small>

It displays one font size smaller than the rest of the text.

Grouping Content

<div>------</div>

The <div> element allow you to group together several elements to create sections or subsections of a page.

<span>------<span>

The <span> element can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group, you could use the <span> element.

 

For Example, 

<!DOCTYPE html>

<html>

    <head>

       <title>Formatting Elements in HTML 4 Example</title>

    </head>

  <body>

       <p><b>StudySection.com</b></p>

       <p><i>StudySection.com</i></p>

       <p><u>StudySection.com</u></p>

       <p><tt>StudySection.com</tt></p>

       <p><sup>Study</sup> Section.com<p>

       <p><sub>Study</sub> Section.com<p>

       <p><big>Study</big> Section.com<p>

       <p><small>Study</small> Section.com<p>

       <p>Study <del>Tonight</del><ins>Section.com</ins></p>

             <p><strike>StudySection.com<strike></p>

          </body>

</html>

Example of <div> and <span> tag:

 

<!DOCTYPE html>

<html>

    <head>

       <title>Content Grouping in HTML 4 Example</title>

    </head>

  <body>

       <div id="Levels">

                    Study Section provides three levels of Examinations<br/>

                    <ul> Foundation Level<br/>

                     Advanced Level<br/>

                     Expert Level</ul><br/>

                    </div>

 

<div id="Other">

Study Section also provides counselling at different levels:

                    <ul> Career Counselling<br/>

                     Personalized Counselling<br/>

                     Grade 9/10/11 Counselling</ul><br/>

                    </div>

                    <p>This is the example of <span style = "color:green">span   tag</span> and the <span style = "color:red">div tag</span>   alongwith CSS</p>

          </body>

</html>

 

d) Phrase tags in HTML 4:

 

Name

Tag

Description

Emphasized Text

<emp>---------</emp>

Text displayed within this tag is displayed as emphasized.

Marked Text

<mark>-------</mark>

Text that appeared in this tag is displayed as marked with yellow ink.

Strong Text

<strong>----</strong>

The text displayed here is considered important text.

Acronym

<acronym>---- </acronym>

Text that appeared in this tag should be considered as an acronym.

Text Direction

<bdo>-----</bdo>

It is used to override the direction of the text.

Special Term

<def>-----</def>

It defines that you are specifying some special term and it will be displayed in Italic.

Short Quotation

<q>-----</q>

It is used when you want to add a double quotation in your text.

Computer Code

<code>-----</code>

When you want to write a programming language code, the text that appeared here will be in a monospaced font.

Programming Variables

<var>-----</var>

It indicates that the content of the element is variable means changeable.It is used in conjunction with <pre>and <code> tags.

Program Output

<samp>----</samp>

It displays the output of a program.

Address

<address>---- </adddress>

It displays the address in Italic format.

 

For Example,

 

<!DOCTYPE html>

<html>

<head>

       <title>Example of all Phrase tags</title>

    </head>

<body>

       <p><strong>Deleting Variables in Python:</strong> You can    <mark>delete </mark> python variables by using <q> del </q> keyword.</p>

<p> For Example <br/></p>

<p> <code> 

           color = "Orange" <br/>

            print(color)     <br/>

            del (color)      <br/>

            print(color)     <br/>

  </code>

<p> Program Output: <br/> <code> <var> Orange <br/>

Traceback (most recent call last):</br>

  File "<string>", line 7, in <module> <br/>

NameError: name 'color' is not defined </var> </code>

<p> You can get the exam related to Python on<address> studysection.com</address>

    </body>

</html>

 

e) Adding images in HTML 4: You can add images in HTML document by using <img> tag. <img> tag is an empty tag. It can contain only a list of attributes and it has no closing tag. Following are some of the functionalities you can perform on images:

  • You can set the width and height of an image by using the width and height attribute.

  • You can specify the border thickness around the image in terms of pixels. By default, it is 0, which means no borders at all.

  • You can use align attribute to set the alignment of an image right or center. By default, it is on the left side of the page.

For Example,

<!DOCTYPE html>

<html>

    <head>

       <title>Using Image in Webpage</title>

    </head>

    <body>

       <p>Insert an Image in HTML document</p>

      <img src = “http://www.holemanlandscape.com/wp-content/uploads/2014/08/trees-1080x675.jpg" alt = "Test Image" width = "400" height = "300" border="7" align = "right"/>

    </body>

</html>

 

f) Creating Tables in HTML: The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left-aligned by default. Following are some of the functionalities you can perform with tables:

  • Table heading can be defined using <th> tag.

  • There are two attributes called cellpadding and cellspacing to adjust the white space in your table cells. The cellspacing attribute defines space between table cells while cellpadding defines the distance between cell borders and the content within a cell.

  • You can use the colspan attribute if you want to merge two or more columns into a single column. Similarly, you can use rowspan if you want to merge two or more rows.

  • You can set table background using one of the following two ways:

i) bgcolor attribute − You can set background color for the whole table or just for one cell.

ii) background attribute − You can set the background image for the whole table or just for one cell.

iii) You can also set border color is using bordercolor attribute.

  • You can set a table width and height using width and height attributes.

  • The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. 

  • Tables can be divided into three portions − a header, a body, and a foot.

i) <thead> − to create a separate table header.

ii) <tbody> − to indicate the main body of the table.

iii) <tfoot> − to create a separate table footer.

  • You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.

 

For Example, 

<!DOCTYPE html>

<html>

 

   <head>

      <title>HTML Tables</title>

   </head>

 

   <body>

      <table border = "1" bordercolor = "Purple" bgcolor = "gray" cellpadding = "5" cellspacing = "5" width = "400" height = "150">

         <caption>The table shows some data for an island economy which produces only bus rides and hot chocolate</caption>

         <thead>

            <tr>

               <td colspan = "3">This is the head of the table</td>

            </tr>

         </thead>

         

         <tfoot>

            <tr>

               <td colspan = "3">This is the foot of the table</td>

         <tr>

         </tfoot>

            <td colspan = "3">In 2012</td>

         </tr>

         <tr>

            <th>Item</th>

            <th>Quantity</th>

            <th>Price</th>

         </tr>

         <tr>

            <td>Bus Rides</td>

            <td>97</td>

            <td>$3 each </td>

         </tr>

         <tr>

            <td>Hot Choclate</td>

            <td>60</td>

            <td>$7 each </td>

         </tr>

      </table>

      

   </body>

</html>

g) Lists in HTML 4: HTML offers three ways to represent your data in the form of a list. Lists may contain:

  • <ul>: An unordered list. It will list items using plain bullets. You can specify the types of bullets to be used in the list by using the type attribute. It may be of circle/square/disc type.

  • <ol>: An ordered list. It will use different schemes of numbers or alphabets to list your items. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>. Following are the possible options: Default case numerals, Uppercase numerals, Lowercase numerals, uppercase letters, lowercase letters.

  • <dl>: A definition list. This arranges your items in the same way as they are arranged in a dictionary. Definition List makes use of the following three tags.

i) <dl> − Defines the start of the list

ii) <dt> − A term

iii) <dd> − Term definition

iv) </dl> − Defines the end of the list

  • start attribute can also be used if you want to start the numbering from a specific number.

For Example,

<!DOCTYPE html>

<html>

 

   <head>

      <title>Types of animals</title>

   </head>

   <body>

      <p> Animals—complex, multicellular organisms equipped with nervous systems and the ability to pursue or capture their food—can be divided into six broad categories.</p>

      <ol>

         <li> Examples of Invertibrates</li>

         <ul type= "square">

         <li> insects </li>

         <li> worms </li>

         <li> arthropods </li> 

         <li>sponges</li>

         </ul>

         <li> Examples of Fish</li>

         <ul type= "circle">

         <li> sharks </li>

         <li> rays </li>

         <li> skates </li> 

         <li> jawless fish</li>

         </ul>

         <li> Examples of Amphibians</li>

         <ol type= "i">

         <li> frogs </li>

         <li> toads </li>

         <li> salamanders </li> 

         <li> caecilians</li>

         </ol>

         <li> Examples of Reptiles</li>

         <ol type= "a" start = "4">

         <li> crocodiles </li>

         <li> alligators </li>

         <li> turtles </li> 

         <li> tortoise</li>

         </ol>

         </ol>

   </body>

 </html>

 

h) Text links in HTML: A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach the linked document. Some of the attributes of this tag are:

  • Target tag is used to specify where you want to open your linked document. It has a number of options described below:

 

Option 

Description

_blank

Opens the linked document in a new window or tab.

_self

Opens the linked document in the same frame.

_parent

Opens the linked document in the parent frame.

_top

Opens the linked document in the full body of the window.

targetframe

Opens the linked document in a named targetframe.

 

  • When your document holds links to the same website, you must specify the complete URL for once in the <base> tag. This tag is used to give a base path for all the links. So your browser will concatenate the given relative path to this base path and will make a complete URL. 

  • You can set colors of your links, active links, and visited links using link, alink, and vlink attributes of <body> tag.

For Example,

<!DOCTYPE html>

<html>

   

   <head>

      <title>Hyperlink Example</title>

   </head>

 

   <body alink = "red" link = "blue" vlink = "green">

      <p>Click following link</p>

      <a href = "https://winsurtech.com/" target = "_self">Winsurtech</a><br/>

      <base href = "https://www.studysection.com/" target = "_self">

      <a href = "/free-career-counselling" target = "_self">Career Counselling</a><br/>

      <a href = "/mock-interview" target = "_self">Mock Interview</a><br/>

     </body>

</html>

 

i) Image Links in HTML: We can use an image as a hyperlink just like text.

For Example,

<!DOCTYPE html>

<html>

   

   <head>

      <title>Hyperlink Example</title>

   </head>

 

   <body alink = "red" link = "blue" vlink = "green">

          <a href = "https://www.studysection.com/" target = "_self">

          <img  src = "https://trustedrevie.ws/open.php?site=studysection.com" alt = "Study Section" border = "3" width = "400" height = "300"/> 

          </a><br/>

    </body>

</html>

 

j) Email Link in HTML: HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http. 

For Example,

<a href = "mailto: abc@example.com">Send Email</a> 

 

k) Frames 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.

i) Creating Frames: To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and the cols attribute defines vertical frames. Each frame is indicated by the <frame> tag and it defines which HTML document shall open into the frame.

<frameset > tag attributes:

 

Attribute 

Description

cols

Specifies how many columns are contained in the frameset and the size of each column.

rows

Specifies how many rows are contained in the frameset and the size of each row.

border

This attribute specifies the width of the border of each frame in pixels.

frameborder

specifies whether a three-dimensional border should be displayed between frames. Its value is either 0 or 1.

framespacing

This attribute specifies the amount of space between frames in a frameset. This can take any integer value.

 

<frame > tag attributes:

 

Attribute

Description

src

This attribute is used to give the file name that should be loaded in the frame.

name

This attribute allows you to give a name to a frame.

frameborder

This attribute specifies whether or not the borders of that frame are shown. Its value is either 0 or 1.

marginwidth

This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content.

marginheight

This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents.

noresize

By default, you can resize any frame by clicking and dragging on the borders of a frame.

scrolling

This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto".

longdesc

This attribute allows you to provide a link to another page containing a long description of the contents of the frame.

 

For Example,

<!DOCTYPE html>

<html>

 

   <head>

      <title>HTML Frames</title>

   </head>

 

   <frameset rows = "20%,30%,20%" border="5" frameborder="1" marginwidth="10 n" marginheight= "10" scrolling="yes" >

      <frame name = "top" src = "https://www.studysection.com/" />

      <frame name = "main" src = "https://www.studysection.com/" />

      <frame name = "bottom" src = "https://www.studysection.com/" />

   <noframes>

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

      </noframes>

  </frameset>

</html>

 

l) <iframe> tag in HTML: The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scroll bars and borders. An inline frame is used to embed another document within the current HTML document.


 

Attribute

Description

src

This attribute is used to give the file name that should be loaded in the frame.

name

This attribute allows you to give a name to a frame.

frameborder

This attribute specifies whether or not the borders of that frame are shown. Its value is either 0 or 1.

marginwidth

This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content.

marginheight

This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents.

height

This attribute specifies the height of <iframe>.

scrolling

This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto".

longdesc

This attribute allows you to provide a link to another page containing a long description of the contents of the frame.

width

This attribute specifies the width of <iframe>.

 

For Example, 

<!DOCTYPE html>

<html>

 

   <head>

      <title>HTML Iframes</title>

   </head>

 

   <body>

      <p> <b>Free Online Certification Exams, Pass and Get Your Certificate, Explore Now </b></p>

      

      <iframe src = "https://www.studysection.com/" width = "555" height = "200">

      </iframe>

      

      <p>Free Online Certification and Diploma Certificate Exams in Software Development, MS Office, Web Design, Graphic Design, English, Aptitude, Personal Development, Business, Accounting, and more. Pass and get a Free Test Record. Get a soft copy of your certificate at a nominal fee.</p>

   </body>

 

</html>

 

m) HTML Backgrounds: You can decorate your webpage with background colors and images. 

  • The bgcolor attribute is used to control the background of an HTML element. 

  • The background attribute can also be used to control the background of an HTML element.

 

For Example,

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Background Colors</title>

   </head>

   <body>

      <!-- Format 1 - Use color name -->

      <table bgcolor = "yellow" width = "100%">

         <tr>

            <th bgcolor="sky blue">

               Column1

            </th>

            <th bgcolor="orange">

               Column2

            </th>

            <th bgcolor="red">

               Column3

            </th>

            <th bgcolor="pink">

               Column3

            </th>

         </tr>

      </table>

<!-- Format 2 - Use hex value -->

<table background = https://tse2.mm.bing.net/th?id=OIP.Zo0Xo_qhrdhyRzeyYpWSOgHaEo&pid=Api&P=0&w=248&h=156" width = "100%">

         <tr>

            <th width="25%">

               Row1

            </th>

            <td width="25%">

               Text Here

            </td>

            <td width="25%">

               Text Here

            </td>

            <td width="25%">

               Text Here

            </td>

         </tr>

      </table>

       <!-- Format 3 - Use color value in RGB terms -->

      <table bgcolor = "rgb(255,0,255)" width = "100%">

         <tr>

            <th bgcolor="red" width="25%">

               Row2

            </th>

            <td bgcolor="Gray" width="25%">

               Your Text Here

            </td>

            <td bgcolor="Gray" width="25%">

               Your Text Here

            </td>

            <td bgcolor="Gray" width="25%">

               Your Text Here

            </td>

         </tr>

      </table>

   </body>

</html>

 

n) Forms in HTML: HTML Forms are required, when you want to collect some data from the site visitor. A form will take input from the site visitor and then will post it to a back-end application. <form> tag is used to create HTML forms.

i) Form attributes: Following is the list of attributes to be used to create forms.

 

Attribute

Description

action

Backend script ready to process your passed data.

method

A method is used to upload data. GET and POST are the two frequently used methods.

target

Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent, etc.

enctype

You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:

 

application/x-www-form-urlencoded:  This is the standard method used by most forms in simple scenarios.

 

multipart/form-data: This is used when you want to upload binary data in the form of files like images, word files, etc.

 

ii) HTML Form Controls: There are different types of form controls that you can use to collect data using HTML form:

  • Text Input Controls: There are three types of text input used on forms: 

i) Single-line text input controls: This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

ii) Password input controls: This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag.

iii) Multi-line text input controls: This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

  • Checkboxes Controls: Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but the type attribute is set to a checkbox.

  • Radio Box Controls: Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but the type attribute is set to the radio.

  • Select Box Controls: A select box, also called a drop-down box which provides an option to list down various options in the form of a drop-down list, from where a user can select one or more options.

  • File Select boxes: If you want to allow a user to upload a file to your website, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but the type attribute is set to file.

  • Button Controls: There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting its type attribute to button. The type attribute can take the following values.

  • Hidden Controls: Hidden form controls are used to hide data inside the page which later on can be pushed to the server.

For Example, This Example includes all the attributes of Form tag:

<html>

<head>

<title>Student Registration Form</title>

<style>

   

h2{

 font-family: Times New Roman; 

 font-size: 24px;     

 font-style: normal; 

 font-weight: bold; 

 color: blue;

 text-align: center; 

 text-decoration: underline

}

table{

 font-family: Times New Roman; 

 color:white; 

 font-size: 16px; 

 font-style: normal;

 font-weight: bold;

 background: linear-gradient(to bottom, #008080 0%, #ff99cc 100%);  

 border-collapse: collapse; 

 border: 4px solid #000000;

 border-style: dashed;

  

}

table.inner{

 border: 10px

}

input[type=text], input[type=email], input[type=number]{

 width: 50%;

 padding: 6px 12px;

 margin: 5px 0;

 box-sizing: border-box;

}

input[type=submit], input[type=reset]{

 width: 15%;

 padding: 8px 12px;

 margin: 5px 0;

 box-sizing: border-box;

}

</style>

</head>

<body>

<h2>Student Registration Form </h2>

<table align="center" cellpadding = "10">

<!--------------------- First Name ------------------------------------------>

<tr>

<td>First Name</td>

<td><input type="text" name="FirstName" maxlength="50"/>

</td>

</tr>

<!------------------------ Last Name --------------------------------------->

<tr>

<td>Last Name</td>

<td><input type="text" name="LastName" maxlength="50"/>

</td>

</tr>

<!-------------------------- Email ID ------------------------------------->

<tr>

<td>Email ID</td>

<td><input type="email" name="EmailID" maxlength="100"/></td>

</tr>

<!-------------------------- Mobile Number ------------------------------------->

<tr>

<td>Mobile Number</td>

<td>

<input type="text" name="MobileNumber" maxlength="10"/>

(Only 10 Digits)

</td>

</tr>

<!---------------------- Gender ------------------------------------->

<tr>

<td>Gender</td>

<td>

<input type="radio" name="Gender" value="Male" />

Male

<input type="radio" name="Gender" value="Female" />

Female

</td>

</tr>

<!--------------------------Date Of Birth----------------------------------->

<tr>

<td>Date of Birth(DOB)</td>

<td>

<select name="BirthDay" id="Birthday_Day">

<option value="-1">Day</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

<option value="30">30</option>

<option value="31">31</option>

</select>

<select name="BirthdayMonth" id="Birthday_Month">

<option value="-1">Month</option>

<option value="January">Jan</option>

<option value="February">Feb</option>

<option value="March">Mar</option>

<option value="April">Apr</option>

<option value="May">May</option>

<option value="June">Jun</option>

<option value="July">Jul</option>

<option value="August">Aug</option>

<option value="September">Sep</option>

<option value="October">Oct</option>

<option value="November">Nov</option>

<option value="December">Dec</option>

</select>

<select name="BirthdayYear" id="Birthday_Year">

<option value="-1">Year</option>

<option value="2021">2021</option>

<option value="2020">2020</option>

<option value="2019">2019</option>

<option value="2018">2018</option>

<option value="2017">2017</option>

<option value="2016">2016</option>

<option value="2015">2015</option>

<option value="2014">2014</option>

<option value="2013">2013</option>

<option value="2012">2012</option>

<option value="2011">2011</option>

<option value="2010">2010</option>

<option value="2009">2009</option>

<option value="2008">2008</option>

<option value="2007">2007</option>

<option value="2006">2006</option>

<option value="2005">2005</option>

<option value="2004">2004</option>

<option value="2003">2003</option>

<option value="2002">2002</option>

<option value="2001">2001</option>

<option value="2000">2000</option>

<option value="1999">1999</option>

<option value="1998">1998</option>

<option value="1997">1997</option>

<option value="1996">1996</option>

<option value="1995">1995</option>

<option value="1994">1994</option>

<option value="1993">1993</option>

<option value="1992">1992</option>

<option value="1991">1991</option>

<option value="1990">1990</option>

<option value="1989">1989</option>

<option value="1988">1988</option>

<option value="1987">1987</option>

<option value="1986">1986</option>

<option value="1985">1985</option>

<option value="1984">1984</option>

<option value="1983">1983</option>

<option value="1982">1982</option>

<option value="1981">1981</option>

<option value="1980">1980</option>

</select>

</td>

</tr>

<!------------------------- Address ---------------------------------->

<tr>

<td>Address<br /><br /><br /></td>

<td><textarea name="Address" rows="10" cols="50"></textarea></td>

</tr>

<!-------------------------- City ------------------------------------->

<tr>

<td>City</td>

<td><input type="text" name="City" maxlength="50"/>

</td>

</tr>

<!----- -------------------- Pin Code-------------------------------------->

<tr>

<td>Pin Code</td>

<td><input type="Number" name="PinCode" maxlength="6"/>

</td>

</tr>

<!---------------------------- State ----------------------------------->

<tr>

<td>State</td>

<td><input type="text" name="State" maxlength="50"/>

</td>

</tr>

<!------------------------------ Country --------------------------------->

<tr>

<td>Country</td>

<td><input type="text" name="Country"/></td>

</tr>

<!------------------------- Hobbies -------------------------------------->

<tr>

<td>Hobbies <br /><br /><br /></td>

<td>

<input type="checkbox" name="HobbyDrawing" value="Drawing" />

Drawing

<input type="checkbox" name="HobbySinging" value="Singing" />

Singing

<input type="checkbox" name="HobbyDancing" value="Dancing" />

Dancing

<input type="checkbox" name="HobbyCooking" value="Cooking" />

Sketching

<br />

<input type="checkbox" name="HobbyOther" value="Other">

Others

<input type="text" name="Other_Hobby" maxlength="50" />

</td>

</tr>

<!-----------------------Qualification---------------------------------------->

<tr>

<td>Qualification <br /><br /><br /></td>

<td>

<br/>

<input type="checkbox" name="HighSchool" value="High School" />

High School(10th)<br>

<input type="checkbox" name="HigherSchool" value="Higher School" />

Higher School(12th)<br/>

<input type="checkbox" name="Graduation" value="Graduation" />

Graduation(Bachelors)<br/>

<input type="checkbox" name="PostGraduation" value="Post Graduation" />

Post Graduation(Masters)<br/>

<input type="checkbox" name="Phd" value="Phd">

Phd

</td>

</tr>

<!---------------------------- Courses ----------------------------------->

<tr>

<td>Courses<br />Applied For</td>

<td>

<input type="radio" name="CourseBCA" value="BCA">

BCA(Bachelor of Computer Applications)<br>

<input type="radio" name="CourseBCom" value="B.Com">

B.Com(Bachelor of Commerce)<br>

<input type="radio" name="CourseBSc" value="B.Sc">

B.Sc(Bachelor of Science)<br>

<input type="radio" name="CourseBA" value="B.A">

BA(Bachelor of Arts)<br>

<input type="radio" name="CourseMCA" value="BCA">

MCA(Master of Computer Applications)<br>

<input type="radio" name="CourseMCom" value="B.Com">

M.Com(Master of Commerce)<br>

<input type="radio" name="CourseMSc" value="B.Sc">

M.Sc(Master of Science)<br>

<input type="radio" name="CourseMA" value="B.A">

MA(Master of Arts)<br>

</td>

</tr>

<!----------------------- Submit and Reset ------------------------------->

<tr>

<td colspan="2" align="center">

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</td>

</tr>

</table>

</form>

</body>

</html>

 

o) Embed Media in HTML: The easiest way to add video or sound to your website is to include the special HTML tag called <embed>. You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag.

i) Supported Video Types: You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types inside the embed tag.

  • .swf files − are the file types created by Macromedia's Flash program.

  • .wmv files − are Microsoft's Window's Media Video file types.

  • .mov files − are Apple's Quick Time Movie format.

  • .mpeg files − are movie files created by the Moving Pictures Expert Group.

 

For Example,

<!DOCTYPE html>

<html>

   <head>

      <title>HTML embed Tag</title>

   </head>

   <body>

      <embed height="350" width="600" src="https://youtube.com/embed/SIzDWVc6Tk4">

      </embed>

   </body>

</html>

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree