Tuesday, 7 March 2017

HTML LESSON - 8

     No comments

EIGHTH  LESSON OF HTML

<!DOCTYPE html>
<html>
<head>
<title>Eighth Lesson of HTML</title>
<head>
<body>
<h2>What is CSS?? What role it plays for HTML??</h2>
<h3>CSS, is cascading style sheets. This is the way to decorate or style our html page to make it look more attractive. CSS can be add in 3 ways in HTML element.
1)Inline 
2)Internal
3)External
</h3>

  <p>Inline - This can be use within the HTML element, with style attribute.</p>
For example: 
<h2 style="color:red;">You are learning CSS lesson through JS Informatics!!!</h2>
<!---Above code shows, inline styling---->

<p>Internal - This can be use in the head section of HTML page, with style attribute.</p>

 <p>External - This can be use by making another file or external sheet, which can be linked in the main or index file.</p>

</body>
</html>


Now, Few Key points to remember always:
  • External stylesheet always be saved with .css extension.
  • External stylesheet is a good practice of using  CSS, because with just only one file, we can change the look of complete webpage or website.

Monday, 6 March 2017

HTML Lesson - 7

     No comments

Seventh Lesson of HTML









<!DOCTYPE html>
<html>

 <head>

 <title>Seventh Lesson of HTML</title>

 <style>
.festive h4{
     color: red;
     font-family:calibri;
}
.festive p{
     color: blue;
     font-family:verdana;
}
</style>
</head>

 <body>
<h2>What are classes in HTML ???</h2>
<p>The class is an attribute in HTML, which helps in defining the same style to each element with the same class name. CSS through class can be defined using [ . ] as prefix i.e.  .classname.</p>

 For example:

 <div class="festive">

 <h4>DIWALI </h4>

 <p>Diwali is the festival of lights. It is a five day festival and celebrated with the great joy and happiness.</p>

 </div>
<div class="festive">

 <h4>CHRISTMAS</h4>

 <p>Christmas is the festival of forgiveness mainly celebrated by Christian Community. Lord Jesus, born on this auspicious day. Carols and Cakes make this festival more joyful.</p>
</div>
<div class="festive">

 <h4>HOLI</h4>

 <p>Holi is the festival of colors. It spreads a message of unity for all with different caste and communities, just like different colors merge in each other.</p>
</div>
</body>
</html>
Now, few key points to remember:

  •    A class should always be call with [ . ] or dot as prefix.
  •    Same class can be used for multiple elements.

Tuesday, 28 February 2017

HTML Lesson - 6

     No comments

SIXTH LESSON OF HTML

 

<!DOCTYPE html>
<html>
<head>
<title>Sixth Lesson of HTML</title>
</head>
<body>
<h1>Listing in HTML</h1>
<p> HTML provides a very interesting feature of listing. We can create ordered & unordered lists in HTML.
Ordered list gives numbering to object whereas unordered list gives bullets (circles, squares, disc etc.)
Ordered list can be created using [ <ol> ] tag & unordered list can be created using [ <ul> ] tag.
Further listing in both list can be done with the help of [ <li> ] tag.
 </p>

For example:
<ul>
    <li>SEO</li>
     <li>PHP</li>
     <li>JAVA</li>
</ul> 
[Above example is of Unordered list.]

<ol>
     <li>SEO</li>
     <li>PHP</li>
     <li>JAVA</li>
</ol>
[Above example is of Ordered list.]

</body>
</html>


Now, Few Key points to remember always:
  • In unordered list, disc shape is by default.For other shape like circle or square, you have to define the list-style-type.
  • In ordered list, numbers are by default. For other type like uppercase or lowercase alphabets or roman numbers, you have to define the list-style-type.

Wednesday, 22 February 2017

Saturday, 18 February 2017

HTML LESSON - 4

     No comments

 

FOURTH  LESSON OF HTML

<!DOCTYPE html>
<html>
<head>
<title>Fourth Lesson of HTML</title>
<head>
<body>
<h2>Learn with us in  easy and simple way!!!</h2>
<h3 style="color:blue;">Sky says, I am blue.</h3>
<!-- In above line of code, paragraph text color will be blue--->
<br>
<p style="font-family:verdana;">I am a member of the font-family. Try to use me!</p>
<!-- In above line of code, font will be change from default font to verdana.--->
<br>
<p style="font-size:36px;">My size is bigger, just compare me with default size. </p>
<!-- In above line of code, font will be in bigger size.--->

</body>
</html>




Now, Few Key points to remember always:

  • Always try to use hexadecimal code for defining color of object.

Monday, 13 February 2017

HTML LESSON - 3

     No comments

 

THIRD LESSON OF HTML

<!DOCTYPE html>
<html>
<head>
<title>Third Lesson of HTML</title>
</head>
<body>
<h1>How to add image in webpage?</h1>
<p>Images in HTML can be used with the [ img ] tag. </p>
For example:
<img src="background.jpg" alt="www.google.com" width="100px" height="120px">

<p> In the above code, src is the source from where image is taken, alt is alternate source i.e. if your main image is not found or may not visible for any reason , then this alternate text will be appear. Width and Height decides the size of this image.
</p>
</body>
</html>


Now, Few Key points to remember always:
  • Always remember to define the image type extension like .jpg, .png, .gif etc.
  • Image size should always be greater than or equal to your required area size, where you use image. As, smaller image will be blurred or not visible properly.

Tuesday, 7 February 2017

HTML LESSON - 2

     No comments

SECOND LESSON OF HTML

<!DOCTYPE html>
<html>
<head>
<title>Second Lesson of HTML</title>
</head>
<body>
<h1>Some New Tags</h1>
<p>An a or anchor tag [ < a > < /a > ] is for making hyperlinks in HTML.</p>
For example:
<a href="http://google.com">This is a link</a>
<br> 
<p> A br tag is an empty element without closing tag [ < br > defines a line break. ] </p>
</body>
</html>




Now, Few Key points to remember always:

  • For learning purpose, one can write code in NOTEPAD (PC) or Textedit (MAC).
  • Then, that notepad file should be saved with .html extension.