IntroductionToWebPart1

Understanding the concepts of basic HTML and CSS

Html page ➢ index.html

<!-- Comments in html //-->
<!Doctype html>
<html>
      <head>
              <title>Online tutorials</title>
              <link rel="stylesheet" href="csssheet.css" type="text/css"/>
      </head>
<body>
        HTML stands for Hyper Text Markup Language
        HTML describes the structure of Web pages using markup
        HTML elements are the building blocks of HTML pages
        HTML elements are represented by tags.<!-- Main important Thing we  Remember //-->      
       There are huge number of tags in html if you want to learn then my chocie is to prefer w3schools.com to learn all tags.

         In this Tutorial i will explain some of the commonly used important Tags

        1.We discuss about heading tag which reperesents with <h1>Hello h1</h1>
                   we have 6 heading tags upto <h6>hello h6</h6>
        2.Paragraph tag <p> This is paragaraph tag</p>
        3.Image tag: if we want to embedded image into browser we use img tag
                     <img src="boy.png" width="200" height="200"/>
                     <br> <!-- Used to break the line and starts in new line //-->
                     <hr> <!-- draws the horizontal Line //-->
        4.Link tag : use to transfer from one page to another page
                     <a href="http://www.google.com">Google</a>
                     <center>Text displyed in center</center>
        5.Table Tag :if You want to dispalys the table in browser use table tag
                     <table border="1">
                                     <tr><!-- Table Row //-->
                                            <th><!-- table Heading //-->This is heading1 </th>
                                            <th><!-- table Heading //-->This is heading2 </th>
                                     </tr>
                                     <tr>
                                            <td><!-- Table Data //-->This is table data1</td>
                                            <td><!-- Table Data //-->This is table data2</td>
                                     </tr>
                     </table>
         6.lists tag:
                  <b><i>Unordered HTML List</i></b> <!-- Which bolds the text and also italic //-->
                  <!-- An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
                  The list items will be marked with bullets (small black circles) by default: //-->
                  <ul> 
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                 </ul>
                 <b>Ordered HTML List</b>
                 <!-- An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
                 The list items will be marked with numbers by default: //-->
                 <ol>
                       <li>Coffee</li>
                       <li>Tea</li>
                       <li>Milk</li>
                 </ol>
                 <b>HTML Description Lists</b>
                 <!--  A description list is a list of terms, with a description of each term.
                  The <dl> tag defines the description list, the <dt> tag defines the term (name)
                 <dd>
                 <dl>
                        <dt>Coffee</dt>
                         <dd>- black hot drink</dd>
                          <dt>Milk</dt>
                          <dd>- white cold drink</dd>
                          <dt>ILO</dt>
                           <dd>-Indain Labour Organization</dd>
                  </dl>

        7. <p>The Most important tag is Div Tag</p>
              <!-- which divides the blocks in html page //-->
              <div id="div1" ><!-- First div tag //-->
                          <h2>London</h2>
                          <p>London is the capital city of England</p> 
              </div>
              <div id="div2"><!-- Second div tag //-->
                           <h2>India</h2>
                           <p>Delhi is the capital city of India</p> 
              </div>
               <br>
         8. span tag: Which is inline block tag
                     <!-- It is used to heignlight the particular Character or text in a sentence //-->
                      <span class="this">This</span>is Span tag.
                      <!-- You didnt see any change in div and span tags we modify in Css sheet //-->
                      <!-- these are the some of the imporatnt tags in html //-->
                      <center><h1>Its time for css</h1></center>
        CSS stands for Cascading Style Sheets
        CSS describes how HTML elements are to be displayed on screen, paper, or in other media
        CSS saves a lot of work. It can control the layout of multiple web pages all at once
        <hr>
               <p> can import the css in html by 3 ways</p>
          <ul>
                <li>By using Inline sheet </li>
                <li>By using Internal style sheet</li>
                <li>By using External style sheet</li>
          </ul>
         <h3>Inline style sheet</h3>
          <p> The css code is embedded in html tag itself</p>
          <p style="color:#CC0000; font-style:italic;"> Example how this text changes</p>
          <h3>Internal style Sheets</h3>
           <p>We declare the total css code in bewtween 
           <style type="text/css">
           <!-- In between We write the code//-->
           </style>
           This is most placed in between head tags for uderstanding  purpose.</p>
          <h3>External Style Sheets</h3>
           <p>We write one seperate code and give extension as .css
                  and we import that css sheet in html file</p>
           <b>syntax:</b>
           <!-- <link rel="stylesheet" href="csssheet.css" type="text/css" /> //-->
            How we Apply the css to tags in 3 ways
            <ul>
                  <li>By applying directly to tags</li>
                 <li>We have another two attributes called id and class by this we can use css to tags </li>
                  <li> id tag syntax is #id{ } and for class .class{} </li>
          </ul>                                
      </body>
</html>

StyleSheet ➣ cssSheet.css

/* apply css for body tag */
body{
          background-color:#CCCCCC;
          margin:0;
          padding:0;
}
ul{
          list-style-type:none;
          background-color:#660066;
          color:#FFFFFF;
}
ol{
         list-style-type:none;
         background-color:#FFFF00;
}
dl{
          background-color:#993300;
          color:#FFFFFF;
}
#div1{
          width:47%;
          height:200px;
          float:left;
          background-color:#FFFFCC;
          margin-left:2%;
          border-radius:5%;
}
#div2{
          width:47%;
          height:200px;
          float:left;
          background-color:#6699FF;
          margin-left:2%;
          margin-right:1%;
          border-radius:5%;
}
.this{
          color:#999900;
          font-size:24px;
          font-family:cursive;
} 

If you want to see how its runs in actual browser.

Next➱