-->

HTML page with responsive concept

On different device different looks can be there. So How to make responsive our page?
We can make it using viewport using css.
-------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.menu {
  float:left;
  width:20%;
  text-align:center;
}
.menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}
.main {
  float:left;
  width:60%;
  padding:0 20px;
}
.right {
  background-color:#e5e5e5;
  float:left;
  width:20%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div style="overflow:auto">
  <div class="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>

  <div class="main">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="right">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

</body>
</html>
------------------------------------------------------------------------------------------------------------
                                                                              Credit:-:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query3
No comments:
Labels:

HTL page with coding lines

How can we put codes in same way as we write in real code editor? For this we use code tag.
-------------------------------------------------------------------------------------------------------------------
<html>

<head>
    <title>
        understanding about code tag
    </title>
</head>

<body>
    <code><!--tag to put our code here. it looks like our code terminated by semi-colon-->
    a=3<br><!--assigning 3 to variable a-->
    b-12<br><!--assigning 12 to variable b-->
    c=a+b<br>
    </code>
    <!-- closing of code tag-->
</body>

</html>
No comments:
Labels:

HTML entities/symbols

So, how can we write white space or some other characters/symbols? For this, we use & or # or somewhere both followed by some pre-defined characters.
--------------------------------------------------------------------------------------------------------------------------------
<html>

<head>
    <title>
        understanding about entities tag
    </title>
</head>

<body>
    it is greater than &gt;.
    <!--semi-colon is optional and is case sensitive-->
    <!-- it display a message to display >-->
    it is smaller than &lt;
    <!--to print <-->
    it is diacritical mark O&#780;
    <!--prints letetrs above or below the character-->
    <!---->
</body>

</html>
No comments:
Labels:

HTML symbols

So one questions is, how can we write different symbols in HTML? Answers is using some keywords followed by &.Better we can understand from following example.
--------------------------------------------------------------------------------------------------------------
<html>

<head>
    <title>
        HOW TO WRITE DIFFERENT SYMBOLS IN HTML
    </title>
</head>

<body>
    <!--it prints euro symbol(below)-->
    FOR euro, We write &euro;
    <!--for dollar($)-->
    we have &dollar;
    <!--if we want mathematical symbol then-->
    If we want to use all, &ForAll;<br> if we want to use summation, &sum; <br> If an element is a member of , &isin;
    for sp&nbsp;ace ;
    for greater than, we use &gt;
    for smaller than, we use &lt;
    for copyrights, we use &copy;
</body>

</html>
No comments:
Labels:

HTML page with emoji

If we want to insert emoji symbols or pictures then we can use its decimal number followed by & and # symbols. We do not use hexadecimal numbers.
-------------------------------------------------------------------------------------------------
note:

It is not supported in earlier version of WINDOWS(7 or basic or vista).
It can only be used in WINDOWS 10.
--------------------------------------------------------------------------------------------------------
<html>

<head>
    <title>
        HOW TO WRITE emoji/small pictures IN HTML
    </title>
    <meta charset="UTF-8">
    <!--it is for utf character and for web browser to know this page uses utf-8-->
    <!--for all characters used all over the world-->
    <!-- it is supported by HTML 5.0-->

</head>

<body>
    <!--it prints emoji(below)-->
    SMILING FACE WITH OPEN MOUTH &#128515;for SMILING FACE WITH OPEN MOUTH AND COLD SWEAT &#128517;
    <!--use decimal value, not hexadecimal-->

</body>

</html>
No comments:
Labels:

HTML with meta tag

html with metatag;it is used to have page deescription,keyword,character set,author etc.
------------------------------------------------------------------------------------------------------
1)HTML page with meta tag

                                                                                                    click here

2)HTML page with viewport (for different sized devices).

                                                                                                     click here

No comments:

HTML with meta tag (different size device)

Somewhere we have to display content on different device. How to work with them?
---------------------------------------------------------------------------------------------

<html>          <!--called root tag-->
    <head>      <!--contains meta information of page-->
        <title><!--contains title of page-->
        html with metatag;it is used to have page deescription,keyword,character set,author etc.
        </title>
        <meta charset="utf-8"><!--it is used for chracter set-->
        <meta name="description" content="html examples"><!--it is for description of webpage-->
        <meta name="keywords" content="HTML, C, c++, JavaScript"><!--it is used for keywords for search engines-->
        <meta name="author" content="Krishna"><!--it is used for author name-->
        <meta http-equiv="refresh" content="3"><!--it refreshes the page in every 3 seconds-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--for different devices of different width-->
    </head>  
    <body>
        we have used meta tag in our page as shown inside head tag.
    </body>
</html>
No comments:
Labels: