-
OVERVIEW OF HTML
- HTML stands for HyperText Markup Language. HTML is the standard markup language used for creating Web pages.
- HTML was created by Tim Berners-Lee in late 1991. HTML is used to create Web pages which are rendered over the Web.
Features of HTML:
1. HTML is a very easy and simple language and can be easily understood and
modified.
2. It is a markup language so it provides a flexible way to design web pages along
with the text.
3. It is platform-independent because it can be displayed on any platform like
Windows, Linux and Macintosh etc.
-
HTML Page Structure:
- Example for creating an html document:
<!DOCTYPE html>
        <html>
             <head>
                 <title>
                </title>
<body>
          <h1>Nirali Prakashan</h1>
          <p>Textbook Publication Firm.</p>
          </body>
      </head>
</html> - Example for text formatting tags:
<!DOCTYPE html>
      <html>
 <head>
        <title> Example of HTML Text Formatting Tags </title>
  </head>
    <body>
         <p>Nirali Prakashan</p>
   <font size=”4″>Wecome to <b>Nirali Prakashan.</b> <br/></font>
         <font size=”2″><i>Nirali Prakashan</i> is a textbook publicationfirm.<br/></font>
    <font face=”verdana” color=”black”>Nirali Prakashan <u>publised more than 3500 book titles.</u></font>
   </body>
</html>
-
Example for <div> tag:
<!DOCTYPE html>
     <html>
 <head>
                <title> Example of HTML div Tag </title>
        </head>
     <body>
    <div style=”background-color:orange;text-align:center”>
   <p>Nirali Prakashan</p>
  </div>
    <div style=”background-color:pink;text-align:center”>
<p>Pragati Group</p>
           </div>
     </body>
</html>
- Example for <span> tag:
<!DOCTYPE html>
<html>
<head> span tag
<title> HTML span tag Example</title>
</head>
<body>
<p>The <span style=”color:red”>span tag is used with inline
elements</span> and the <span style=”color:purple”>div tag</span>
is used with block-level content.</p>
</body>
</html>
- Example for <hr> tag:
<!DOCTYPE html>
<html>
  <head>
  <title> Example for HTML <hr> Tag</title>
    </head>
   <body>
        <p>This is paragraph one and should be on top</p><hr align=”right” width=”50%”>
  <p>This is paragraph two and should be at middle</p>
 <hr size=”7″>
<p>This is paragraph two and should be at bottom</p>
     <hr width=”80%” size=”12″ noshade>
     </body>
</html> - Example for <font> tag:
<!DOCTYPE html>
              <html>
   <head>
            <title> Example for HTML font Tag </title>
</head>
         <body>
         <p><h2>Nirali Prakashan</h2></p>
            <font size=”4″ color=”red”>Wecome to Nirali Prakashan. <br/></font>
     <fontsize=”2″color=”blue”>NiraliPrakashan is a textbook publication firm.<br/></font>
<font face=”verdana” color=”black”>Nirali Prakashan publised more
  than 3500 book titles.</font>
   </body>
 </html> - 1. Create an html page which will display names of your family members on separate lines in different sizes. State size of each line in its text.
<html> - <body>
- <h1>NR Classes</h1>
- <h2> NR Classes </h2>
- <h3> NR Classes </h3>
- <h4> NR Classes </h4
- <h5> NR Classes </h5>
- <h6> NR Classes </h6>
- </body>
- </html>
- 2. Create an html page which will display names of players of Indian cricket team with all the different text styles (bold, italic and underlined) and its combinations on separate lines. State style of each line in its text.
- <html>
- <center>
- <h2>Indian Cricket Team Players : </h2>
- <br> <center><body><center>
- <b> M.S. DHONI </b><!– (bold) –>
- <p><I> VIRAT KOHLI </I>
- </p><!– (italic) –><p>
- <U> SHIKHAR DHAWAN</U></p><!– (underlined) –><p><U><I> Rishab Pant</I></U></p><!– (italic,underlined) –>
<P><B><I> SANCHIN TANDULKAR </I></B></p>
   <!– (bold,italic) –>
<p><U><B> VIRENDER SEHWAG</B></U>
   <!– (bold,underlined) –><center>
</body>
</html>
- 4. Create an html page with following specifications
- a.    Title should be about MYCOLLEGE
- b.   Put the windows Logo image in the background
- c.    Place your College name at the top of the page in large text followed by address in smaller size
- d.   Add names of courses offered each in a different color, style and typeface
- .e.    Add scrolling text with a message of your choice
- f.     Add college image at the bottom<html><head><title>MY COLLEGE</title></head><body background=”white”>
<center>
<font size=”20″>NR Classes<large> Pune <large><br><br>
<font color=”Blue” size=”5″>BBA(Computer Application)</font><br>
<u><font color=”orange” size=”6″>Bca</font></u></br>
<i><font color=”red” size=”7″>Bcs</font></i>
<marquee >Improve Your Programming With Us</marquee>
<br><br><img src=”NRC.png”height=”100px”></br></br>
</center>
</body>
</html>
5. Create an html5 page with following specifications
- a Title should be about MYCITY
- b Place your City name at the top of the page in large text and in blue color
- c.  Add names of landmarks in your city each in a different color, style and typeface
- d. One of the landmark, your college name should be scrolling
- e.  Add scrolling text with a message of your choice
- f Add some image at the bottom
<html>
<head>
<title>MY CITY</title>
</head>
<body>
 <center><b><large><font color=”blue” size=”10″>PUNE</font></b></large><br>
   <font color=”Orange” FACE=”ARIAL”  size=”4″> Shaniwar Peth</font><br>
     <marquee direction=”right” ><font color=”oranges” size=”5″>NR  CLASSES</font><br></marquee>
   <marquee><font color=”oranges” size=”5″>Improve Your Programming With Us </font> </marquee>
<img src=”nr2.jpg”/>
</center>
</body>
</html>
