HTML

Science and Commerce Section

HTML

Tags Summary Part - 1

 



Tags Summary - Part 2 

  Short Question Answers

  • List the advantages of HTML.        
  • List the disadvantages of HTML.        
  • Explain <body> tag and list its attributes.        
  • List any 4 physical style tags and state uses of each.        
  • Explain the <OL> tag and its attributes.        
  • Explain the <UL> tag and its attributes.        
  • Explain the <img> tag along with its attributes.        
  • List and give the use of tags used to create Tables.      






HTML
HTML stands for Hyper Text Markup Language. It is the basic markup language for creating
web pages and websites. A HTML web page contains markups or tags that defines how to display information on the browser’s window.

Advantages of HTML   -  Refer Textbook
Disadvantages of HTML  - Refer Textbook

Tag 
A tag in HTML document is a html element surrounded by angular brackets which has a specific meaning and task in HTML.
E.g.   <html>, <body>, <head>, <h1>, <br>, etc.

Structure of HTML document:
<html>
    <head>
               
    </head>
   <body>
              
   </body>
</html>

A HTML document has two sections
1) HEAD section       and   2) BODY section
A HTML file is saved with    .html   or    .htm  extension

<html> tag :
The <html> tag represents the root of an HTML document. It is the starting tag of web page.
It is the container for all other HTML elements, which are enclosed in <html> …… </html>

<head> tag:
The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles, meta information, and more. E.g.<title>, <style>, <base>, <link>, <meta>, <script>, <noscript>

<body> tag:
The <body> tag defines the document's body. This is the section which is displayed on the web page.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
which are enclosed in <body> …… </body>.

<title> tag: It defines the title for the web page. It is written in Head section. The title will be displayed on the browser window’s title bar.

Formatting Tags  (Physical Style tags)
<b> ...  </b>    -  To display text in bold.
<i> ...  </i>   - Displays text in  italics
<u> …  </u>   -   To underline the text.

<br>   -    stands for break rule.  It is used to start a new line. It has no closing tag.
<tt> ... </tt> – Displays text in mono spaced font style.
<strong> ... </strong> – Displays text bold style.
<em> ... </em> – Defines emphasized text.(browsers displays in italics style).
<mark> ... </mark> – Displays marked or highlighted text
<del> ... </del> – Displays deleted or removed text.
<ins> ... </ins> – Defines inserted(added) text.
 
<sub> ... </sub> – Defines subscripted text.
<sup> ... </sup> – Defines superscripted text.
<small> ... </small> – Reduces the font size of text by 1 unit.
<big>... </big> – Increases the font size of text by 1 unit.
<blockquote>... </blockquote> – Defines a quoted section.

<font> ... </font> – Changes the font of the text.
  Attributes of <font> tag:
       Face – specifies the name of the font
       Size – specifies the size of the letters values: 1 to 7
        Color – specifies the color name or color code

E.g.   <font face=”Arial Black” size=5  color=blue>
               Good Morning
          </font>

Heading tags (H1 to H6)
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading.
<h6> defines the least important heading.
<h1> heading is big in size about 1 inch  (72 pixels).
Attribute of Heading tag:  
Align – specifies the alignment for the heading values: left, center, right
The heading tags are block level HTML elements which means they begin with a new line.

<p> tag:
It is used to indicate a paragraph in a web page. It is a block level html element. It has the following attributes:
a)                 Align  - to specify alignment – left, center, right
b)                Style   -  to specify css style commands.
c)                 Width  - to specify horizontal dimension of the paragraph in pixels.
E.g.
<p align=center width=200>
      ………. …. …..paragraph  ……………..
</p>
<p style="color:blue;">
………….. paragraph …………….
</p>


<body> tag
Attributes of <body> tag:
background – contains the source URL of image file to be displayed in the background.
bgcolor – specifies the color name or color code for the background color of the web page.
text – specifies the color for the text in the web page.
link – specifies the color for the links in the web page.
alink - specifies the color of an active link in the web page.
vlink - specifies the color of an visited link in the web page.
E.g.  <body bgcolor=cyan  link=green vlink=red>

<body background="Images/plotters3.jpg">



Comments in HTML
In HTML to write comments the following tag is used:
<!--           comments are written here            -->                              
An HTML comment begins with <!-- and the comment closes with -->.
HTML comments are visible to anyone that views the page source code, but are not rendered by a browser. They are not shown on the window.
E.g.
<!-- Author: Mr. XYZ
    Description :   sample page of showing physical tags
-->

  
LISTS IN HTML

Html provides three types of lists which are as:
1)                 Unordered List
2)                Ordered List
3)                Definition List

Unordered List
It is the simplest list which is shown by bullet points.
Tags:      <UL>      </UL>   -  to define the list
                 <LI>     </LI>    - To define list elements
E.g.
<html>
<head>
       <title>List example</title>
</head>
<body>
        <h3>Fruit Lists </h3>
       <UL>
               <LI>Mango </LI>
               <LI>Apple</LI>
               <LI>Grapes</LI>
    </UL>
</body>
</html>

Type Attribute
It is used to change the shape of the bullets in the unordered list. It is used in <UL> tag.
There are three types :  DISC, SQUARE, CIRCLE
E.g.    <UL TYPE=SQUARE>

Ordered List
It displays the list in number format.   <OL>  and <LI> tag is used to create Ordered list.
It has two attributes:
1)                TYPE     -   specifies the type of numbering format. E.g.   1,2,3,4    or  A,B,C ..   or   I, II, III,    or a,b,c  ..
2)                START – specifies the start number in the list.

E.g.    <OL  TYPE=”A”  START=4>


Definition List
It is used to create a list of definitions of terms.
<DL>,   <DT>   and <DD> tag is used to create.
e.g
       <DL>
            <DT>Computer</DT>
            <DD>Computer is an electronic device which
Is used to store and process information.   </DD>
            <DT>Software</DT>
            <DD>Software is a collection programs. </DD>
      </DL>

<IMG> tag
It is used to insert images in the web page.
It has the following attributes:

Src   -     specifies the URL of the image.
Align   -    specifies the alignment of the image.
                   
Border  -   specifies the width of the border around
                    the image (Value in pixels)
Height  -   specifies the height of the image in pixels.
Width   -   specifies the width of the image in pixels.
Alt  -                     specifies the alternative text for the image. It is displayed instead of image, when image is not displayed on the web page.
LongDesc -   provides URL for the long description of the image.
E.g.
<img   src=”computer.jpg”  height=200 width=400
       Border=1    alt=”Computer image”>



HTML PRACTICAL ASSIGNMENT – 1 (Use different fonts, font styles and colors in Q. No. 1, 3 and 4)
Q1.   Create a web page that will display a heading HTML and a paragraph about HTML from the textbook along with an image.
Q2. Create a web page that contains picture gallery. (Small size images at least 5)
Q3.  Create web page containing an Unordered List showing list of Animals with Heading.
Q4.  Create a web page containing Ordered List of Students from your class with Heading.
        



Creating Tables in Web Page
To create table in a web page <table> tag is used.
<tr>    tag is used to define a row of table.
<td>  tag is used to define a column cell  of a row.
    <caption>   tag is used to give a title to table.
    <th>  tag is used to define column headers.
 E.g.  
<table border=1 align=center>
   <caption> Student List</caption>
     <tr>
           <th>Roll No  </th>
                 <th>Name </th>
     </tr>
     <tr>
            <td> 1  </td>
            <td> Kiran </td>
     </tr>
</table>



Attributes of <table> tag:
Align   - defines the alignment of a table and table cell.   Values – Left, Center, Right.
      -     Used with <td> tag to align cell contents.
Bgcolor   -  specifies the color for the table.
Width - specifies the width for the table in pixels or %
Border – Specifies the  border for the table. Values – 0 or 1
Cellpadding   -   specifies the distance between cell wall and the content given in pixels.
Cellspacing   -   specifies the distance between adjacent cells.

No comments:

Post a Comment