HTML



                               Introduction to HTML

                                            INTRODUCTION
            HTML (Hypertext Markup Language) is used to create document
            on the World Wide Web. It is simply a collection of certain key
            words called ‘Tags’ that are helpful in writing the document to be
            displayed using a browser on Internet.
            It is a platform independent language that can be used on any
            platform such as Windows, Linux, Macintosh, and so on. To
            display a document in web it is essential to mark-up the different
            elements (headings, paragraphs, tables, and so on) of the
           document with the HTML tags. To view a mark-up document,
           user has to open the document in a browser. A browser
           understands and interpret the HTML tags, identifies the structure
           of the document (which part are which) and makes decision about
           presentation (how the parts look) of the document.
           HTML also provides tags to make the document look attractive
           using graphics, font size and colors. User can make a link to the
           other document or the different section of the same document
           by creating Hypertext Links also known as Hyperlinks.

           OBJECTIVES
          After going through this lesson, you would be able to :

          Certificate in Web Designing:
  •    create, save and view a HTML document
  •       format a web page using section heading tags
  •       describe Ordered and Unordered lists
  •       explain graphics in HTML document
  •       describe hypertext links and making text/image links

          1.CREATING, SAVING AND VIEWING A HTML DOCUMENT
          2. Creating a HTML document
       
        The essential tags that are required to create a HTML document are:
                      <HTML>.............</HTML>
                      <HEAD>.............</HEAD>             Starting Tag
                      <BODY>.............</BODY>    
         HTML Tag <HTML>
       
        The <HTML> tag encloses all other HTML tags and associated text
        within your document. It is an optional tag. You can create an
        HTML document that omits these tags, and your browser can still
        read it and display it. But it is always a good form to include the
        start and stop tags.
         The format is:
         <HTML>
         Your Title and Document (contains text with HTML tags) goes here
         </HTML>
          The closing tag is the same as the opening tag, except for the slash
 
         Introduction to HTML::
         
          mark e.g </HTML>. The slash mark is always used in closing tags.
         An HTML document has two distinct parts HEAD and BODY.
         The Format is:

                                          <HTML>
                                         <HEAD>
                                           .............
                                           .............

                                           .............
                                         </HEAD>
                                         <BODY>
                                           .............
                                           .............        
                                           .............
                                          </BODY>  
                                          </HTML>



             HEAD Tag <HEAD>
            HEAD tag comes after the HTML start tag. It contains TITLE tag
            to give the document a title that displays on the browsers title bar
            at the top.
           The Format is:
                                              <HEAD>
                                             <TITLE>
                                     Your title goes here
                                             </TITLE>
                                             </HEAD>

           BODY Tag <BODY>
          The BODY tag contains all the text and graphics of the document
          with all the HTML tags that are used for control and formatting
         of the page.
         The Format is:
        <BODY>
         Your Document goes here
        </BODY>
          An HTML document, web page can be created using a text editor,
          Notepad or WordPad. All the HTML documents should have the
          extension .htm or .html. It require a web browser like Internet
          Explorer or Netscape Navigator/Communicator to view the
          document.
          Example: It is my first web page

how to make simple web page:-----

 <html>

 <head>
    <meta http-equiv="content-type" content="text/html"/>
    <meta name="author" content="Love4All"/>
    <title>JAIPUR NATIONAL UNIVERSITY</title>
    
    <style>

 #menu a {
  display: block;
  line-height: 35px;
  padding: 0 14px;
  text-decoration: none;
  color: #eee;
}

 #menu li:hover > a,
#menu li a:hover {
  background: #111
}

 #menu input {
  display: none;
  margin: 0 0;
  padding: 0 0;
  width: 80px;
  height: 35px;
  opacity: 0;
  cursor: pointer
}

 #menu label {
  font: bold 30px Arial;
  display: none;
  width: 35px;
  height: 36px;
  line-height: 36px;
  text-align: center
}

 #menu label span {
  font-size: 12px;
  position: absolute;
  left: 35px
}

 #menu ul.menus {
  height: auto;
  width: 180px;
  background: #111;
  position: absolute;
  z-index: 99;
  display: none;
  border: 0;
}

 #menu ul.menus li {
  display: block;
  width: 100%;
  font: 12px Arial;
  text-transform: none;
}

 #menu li:hover ul.menus {
  display: block
}

 #menu a.home {
  background: #c00;
}

 #menu a.prett {
  padding: 0 27px 0 14px
}

 #menu a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px
}

 #menu ul.menus a:hover {
  background: #333;
}

 #menu ul.menus .submenu {
  display: none;
  position: absolute;
  left: 180px;
  background: #111;
  top: 0;
  width: 180px;
}

 #menu ul.menus .submenu li {
  background: #111;
}

 #menu ul.menus .has-submenu:hover .submenu {
  display: block;
}

 div.container {
    width: 100%;
    border: 1px solid gray;
  }
  header, footer {
      padding: 1em;
      color: red;
      background-color:blue;
      clear: left;
      text-align: center;
 

 }
nav {
   float: left;
   max-width: 200px;
   margin: 0;
   padding: 1em;
}
nav ul {
   list-style-type:none;
}
nav ul a {
   text-decoration:none;
}
article {
   margin-left: 200px;
   border-left: 1px solid gray;
   padding: 1em;
   overflow: hidden;
}
    </style>
</head>
<div class="container">

 <header><font size="20" color="red">Jaipur National University</font></header>
<marquee><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right><right><img src="photo.jpg"height="75" width="75"></right></marquee>
<header><pre><a href="C:\Users\Ranjan\Downloads"><font size="4"<font color="white">About us</a><a href="C:\Users\Ranjan\Downloads"><font color="white">                  Academics</a><a href="C:\Users\Ranjan\Downloads"><font color="white">                  Programmes</a><a href="C:\Users\Ranjan\Downloads"><font color="white">                  Admission</a><a href="C:\Users\Ranjan\Downloads"><font color="white">                  Help</a><a href="C:\Users\Ranjan\Desktop\www.com"><font color="white">               Contact us</a></font></pre> </header>
<menu>
  <ul id='menu'>
  <ul id='menu'>
    <li><a class='home' href='/'>Home</a></li>
          <li><a class='home' href='/'>Home</a></li>
    <li><a class='prett' href='#' title='Menu'>Menu</a>
      <ul class='menus'>
        <li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
          <ul class='submenu'>
            <li><a href="#" title="Sub Menu">Sub Menu</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
          </ul>
        </li>
        <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
        <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>

       </ul>
    </li>
  </ul>
</menu>


 <nav>

 <ul>
<li><a href="http://www.google.com"><font color="red">About us</a></li>
<li><a href="http://www.google.com"></a><font color="red">Academics</li>Academics</a>/li>
<li><a href="#abc"></a><font color="red">Programmes</li>
<li><a href="#abc"></a><font color="red">Adnussions</li>
<li><a href="#abc"></a>IQAC</li>
</ul>
</nav>
<article>

<form >
<right><img src="photo.jpg"height="75" width="75"></right>
<center><img src="coll.png"height="200" width="500"></center>
<p><center><font size="5" color="red">Registration here</font></center></p>
<center>First name:  <input type="text" name="first_name" />
<br>
Last name:  <input type="text" name="last_name" />
<br>
DOB&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:  <input type="text" name="Date of Birth" />
<br>
Address&nbsp&nbsp&nbsp:  <input type="text" name="Address" />
<br>
Phone&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:  <input type="text" name="phone" />
<br>
Email&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:  <input type="text" name="Email" />
<br>
zip code&nbsp&nbsp:  <input type="text" name="zip code" />
</center>
</form>
<center><button type="button">Submit</button></center>

 </article>
<footer>copyright BY Techovera.com</footer>


</div>


                                              
                                                 

Comments

Post a Comment

Popular posts from this blog

Advance Excel

Simple If Function in Advance Excel Formula:-=IF(C3>=80,1000,2000) S.no Name Marks Fee(2000) 1 A 67 2000 2 B 89 1000 3 C 89 1000 4 D 45 2000 5 E 90 1000 6 F 65 2000 7 G 32 2000 8 H 45 2000                                               formula:-   ...
Read more

Ranjan kumar sharma: TALLY

Ranjan kumar sharma: TALLY :                                                                     Tally sylabous                    1.        Company creation      ...
Read more