HTML Practical Class

HTML

(Hyper Text Markup Language)

Notes:-

HTML is used to design a Internet Explorer page and it is create in Notepad using tag. There are two types of tag– I) Pair tag and II) Unpair tag.

Pair tag: – The tags which have starting and closing ends.

Example :- <b> </b>

Unpair tag: – The tags which have only starting end.

Example :- <br>

Main Structure of HTML

<html>

<head>
</head>

<body>



</body>

</html>

<head> tag

The head element can contain information about the document. The browser does not display the “head information” to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.

Example

<html><head>
<title>Title of the document</title>
</head>
<body>



</body>
</html>

   <body> tag

It contains all the contents of the document (like text, images, colors, graphics, etc.).

AttributeValueDescription
alinkRGBSpecifies the color of the active links in the document.
backgroundFile name (“URL”)An image to use as the background.
bgcolorRGBThe background color of the document.
linkRGBSpecifies the color of all the links in the document.
textRGBSpecifies the color of the text in the document.
vlinkRGBSpecifies the color of the visited links in the document.

  <title> tag

This element defines the title of the document.

<b> tag , <u> tag , <i> tag , <s> tag

SourceOutput
<u>Underline</u>
<i>Italic text</i>
<b>Bold text</b>
<s>Strike through</s>
Underline
 Italic text
Bold text
Strike through
<center>center alignment</center>Center alignment

    <br> tag

The <br> tag is use to break a line. 

Example

SourceOutput
This text contains<br />a line breakThis text contains
a line break

   <sub> and <sup> tags

The <sub> tag defines subscript text and the <sup> tag defines superscript text.

Example

SourceOutput
H<sub>2</sub>O
X<sup>3</sup>
H2O
X3

  <p> tag

The <p> tag defines a paragraph.

Example

SourceOutput
<p>This is some text in a very short paragraph</p>This is some text in a very short paragraph
AttributeValueDescription
alignleft
right
center
Specifies the alignment of the text within the paragraph.

 <pre> tag

The <pre> tag is used to set a object anywhere of the page with space and line break.

Example

SourceOutput
<pre>
This   text        is
in a fixed-pitch
font,   and it preserves
both      spaces an  d
line breaks
</pre>
This   text      isin a fixed-pitchfont,   and it preservesboth      spaces an  dline breaks

 <h1> to <h6> tags

The <h1> to <h6> tags define headers. <h1> defines the largest header. <h6> defines the smallest header.

Example

SourceOutput
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>
This is header 1This is header 2This is header 3This is header 4This is header 5This is header 6

 <hr> tag

The <hr> tag inserts a horizontal rule.

SourceOutput
This is first text <hr /> This is second textThis is first textThis is second text
 AttributeValueDescription
Aligncenter
left
right
Specifies the alignment of the horizontal rule.
SizepixelsSpecifies the thickness (height) of the horizontal rule.
WidthpixelsSpecifies the width of the horizontal rule.

    <font> tag

The <font> tag specifies the font face, font size, and font color of text.

AttributeValueDescription
SizeNumberDefines size of the text
colorRGBDefines color of the text
faceFont nameDefines font name

 <marquee> tag

This tag is used for moving any objects (Text, image etc.).

<marquee behavior=Alternate direction=Up loop=4 bgcolor=red width=300 height=400>I am scrolling</marquee>
AttributeValueDescription
behaviorAlternateDefines type of scroll
bgcolorRGBDefines background color of the marquee
HeightPixels or %Defines the height of an marquee
directionUp/down/left/rightDefines direction of the scroll
LoopnumberDefines number of time the scroll will take place
widthPixels or %Sets the width of an marquee

<img> tag

This tag is used to bring a image or video on the document.

SourceOutput
<img src=”the path of the picture” alt=”Angry”>       For picture
<img dynsrc=”the path of the video” loop=2>             For video
AttributeValueDescription
AlttextDefines a short description of the image
SRCURLThe URL of the image which you want to display
DYNSRCURLThe URL of the video which you want to play
LoopNumberHow many times you want to play this video
Aligntop
bottom
middle
left
right
Specifies how to align the image according to surrounding text. Deprecated. Use styles instead
BorderpixelsDefines a border around an image.
HeightpixelsDefines the height of an image
HspacepixelsDefines white space on the left and right side of the image. Deprecated.
VspacepixelsDefines white space on the top and bottom of the image.
WidthpixelsSets the width of  an image

      <dl> tag and <dd> tags

<dl> means definition list and is used to give the title of a definition. <dd> means definition data and is used in the details section of the a definition.

   Source    Output
<dl>Coffee</dl>
<dd>Black hot drink</dd>
   CoffeeBlack hot drink

  &nbsp;

This element is used for giving more than one space.

HTML <embed> tag

The <embed> tag defines use to embed a sound.

Source
<embed src=”C:\WINDOWS\Media\flourish.mid”>

 <ul> tag <ol> tag <li> tag

The <ul> tag defines an unordered list and the <ol> tag defines the start of an ordered list. The <li> tag defines the start of a list item. The <li> tag is used in both ordered (<ol>) and unordered lists (<ul>).

SourceOutput
<ul>
<li>DSA</li>
<li>DFA</li>
</ul>
DSADFA
SourceOutput
<ol>
<li>Impact</li>
<li>Impact Plus</li>
</ol>
1.  Impact2.  Impact Plus
AttributeValueDescription
startNumber (1,2,….)Specifies the number to start on. Only for <ol>
type A ,a ,I , i ,1Specifies the type of the list. Only for <ol>
Circle, Filledcircle, SquareSpecifies the type of the list. Only for <ul>

<select> and <option> tag

The option element defines an option in the drop-down list. 

SourceOutput
<select>
<option>DSA</option>
<option>DFA</option>
<option>CCA</option>
<option>DITA</option>
</select>

     <a> tag

The <a> is used to link another page.

SourceOutput
<a href=”http://www.debarghya.com”>Debarghya</a>     Debarghya

 <Table> tag

The <table> tag is used to insert a table in the document. It contains <tr> , <th> and <td> tags.

<tr> tag is used to create rows of the table. <th> and <td> are both used to create columns of the table,where <th> means table heading and <td> means table data.

 Mains structure of the table.

  <Table>

   <tr>     <tr>   <th>1st heading</th>   <th>2nd heading</th>  </tr>   </tr>
 <td>1st column data</td>   <td>2nd column data</td>  

                                                                                                                              </table>

 AttributeValueDescription
alignleft
center
right
Aligns of the table.
bgcolorRGBSpecifies the background color of the table.
BackgroundURLSet as background picture.
BordercolorRGBSpecifies the border color of the table.
borderpixelsSpecifies the border width.Tip: Set border=0 to display tables with no borders!
cellpaddingpixelsSpecifies the space between the cell walls and contents
cellspacingpixelsSpecifies the space between cells
widthpixelsSpecifies the width of the table

   <Form> tag

The form element creates a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user-data to a specified URL.

 <Input> tag

The <input> tag defines the start of an input field where the user can enter data.

AttributeValueDescription
Aligntop
texttop
middle
absmiddle
baseline
bottom
absbottom
Defines the alignment of text following the image. Deprecated. Use styles instead.Note: Only used with type=”image”
MaxlengthnumberDefines the maximum number of characters allowed in an input field.Note: Only used with type=”text” or type=”password”
NameField nameDefines a unique name for the input element.Note: This attribute is required with type=”button”, type=”checkbox”, type=”file”, type=”hidden”, type=”image”, type=”password”, type=”text”, and type=”radio”
ReadonlyRead onlyIndicates that the value of this field cannot be modified.Note: Only used with type=”text” or type=”password”
SizeNumber of charDefines the size of the input element.Note: Cannot be used with type=”hidden”
Typebutton
checkbox
password
radio
reset
submit
text
Indicates the type of the input element. The default value is “text”Note: This is not a required attribute, but we think you should include it. If omitted, IE 5.5 will still display a text field, but Netscape 4.7 will not.
ValuevalueFor buttons, reset buttons and submit buttons: Defines the text on the button.For checkboxes and radio buttons: Defines the result of the input element when clicked. The result is sent to the form’s action URL.For hidden, password, and text fields: Defines the default value of the element.Note: This attribute is required with type=”checkbox” and type=”radio”



   <Frameset> and <frame> tag

The frameset element defines a frameset. It is used to organize multiple windows (frames). Each frame holds a separate document. In its simplest use, the frameset element states only how many columns or rows there will be in the frameset. You must use the cols or the rows attribute. This is used without <body> tag.

      Source        output
 <frameset rows=60%,40% cols = 50%, *>
     <frame src =”url” >
     <frame src =”url” >
     <frame src =”url” >
     <frame src =”url” > 
 </frameset>
    1st document 2nd document    3rd document4th document           
AttributeValueDescription
Cols%
*
Defines the number and size of columns in a frameset
Rows%
*
Defines the number and size of rows in a frameset

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart