Tuesday, July 19, 2022

Coding - 

<!DOCTYPE HTML>

<html>

<head><title>image map</title>

</head>

<body>

<h1>An example of Image Map 

</h1>

<img src="C:\Users\kesen\OneDrive\Pictures\th (1).jpg"

usemap="#imagemap"alt="Image of CR7">

<map name="imagemap">

<area href="http://www.google.com" shape="rect" coords="15,114,116,16" alt="google site"/>

<area href="great_wall_china.html" shape="poly"coords="16,10,17" alt="great_wall_china"/>

<area href="http://www.google.com" shape="poly"coords="139,175,208,211,209,176,140,139"alt="google site"/>

</map>

</body></html>

 Output - 


An example of Image Map





 * Creation of a form using various Html tags & attributes


Coding - : 

<!DOCTYPEhtml>

<html>

<head>

<title>Form in html 5</title></head>

<body bgcolor="aqua">

<form>

Name :<input type="text"autocomplete><br><br>

E mail:<input type="email"name="email"><br><br>

Date of inception :<input type="date"name="bday"><br><br>

Office time:<input type="time"name="usr_time"><br><br>

Number of year complete(between 1 and 100):<input type="number"min="1"max="100"><br><BR>

Office phone number :<input type="tel"name="phone"pattern="[0-9]{2}-{0-9]{10}"required><br><br>

Add your home page: 

<input type="url"name="homepage"><br><br>

<input type="color" name="c1">

<Input type="submit" name="submit">

</form></body></html>


Output - :




 <!DOCTYPEhtml>

<html>

<head>

<title>nested list </title>

</head>

</body>

<h3>Multi-level list Nested list </h3>

<ul>

<li>Daily computing</li>

<li>Web design</li>

<ol>

<li>html5</li>

<li>hyperlink</li>

<li>inserting Images</li>

</ol>

<li>Javascript</li>

<ul style="list-style-type:citrcle">

<li>conditional structure</li>

<ul style="list-style-type:square">

<li>If statement</li>

<li>If else statement</li>

<li>case statement </li>

</ul>

<li>loop statement</li>

</ul>

</ul>

</body>

</html>

Output - 

Multi-level list Nested list

  • Daily computing
  • Web design
    1. html5
    2. hyperlink
    3. inserting Images
  • Javascript
    • conditional structure
      • If statement
      • If else statement
      • case statement
    • loop statement

 * Inserting Video in a webpage.

Coding - : 

<!doctypehtml>

<html>

<body>

<video width ="320" height="240"

controls>

<source src="C:\Users\kesen\Music\audio-video\mixkit-stunning-sunset-seen-from-the-sea-4119.mp4" type="video/mp4">

<source src="movie.ogg" type="video/mp4">

</video></body></html>


Output - :




Monday, July 18, 2022

 CSS - Cascading Style Sheet

  • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

To use CSS with HTML document, there are three ways:

  • Inline CSS: Define CSS properties using style attribute in the HTML elements.
  • Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
  • External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.     



<!DOCTYPE HTMl>
<html>
<head>
<style>
.intro{text-align:center;color:blue}
</style>
</head>
<body>
<h1 class="intro">this heading is blue and center-aligned.</h1>
<p class="intro">this paragraph is blue and center-aligned.</p>
</body>
</html>


Output -:

this heading is blue and center-aligned.

this paragraph is blue and center-aligned.

Sunday, July 17, 2022

 Image Map

 an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Two types are-

1) Server side image map

2) Client Side image map

Tags used are - 

1) <img> - > It is used to insert image on the web pages.

2)<map> -> It specifies name of the image used for client side image map.

3) <area> -> It defines the clickable region.



an example of Image Map

Coding - 

<!DOCTYPE HTML>
<html>
<head><title>image map</title>
</head>
<body>
<h1>an example of Image Map</h1>
<img src="C:\Users\kesen\OneDrive\Pictures\th (2).jpg"
usemap="#flowers" alt="Image of flowers">
<map name="flowers">
<area href="https://www.google.com" shape="rect" coords="82,34,204,105" alt="googlesite"/>
<area href="great__wall_china.html" shape="circle" coords="47,146,36" alt="great wall of china"/>
</map>
</body>
</html>

Output - 








 Nested List

<!DOCTYPEhtml>

<html>

<head><title>Nested List</title></head>

<body>

Nested List

<ol>

<li>Science</li>

<ul type=''circle''>

        <li>Physics</li>

        <li>Biology</li>

        <li>Chemistry</li>

        </ul>

<li>Commerce</li>

<ol type=''a''>

        <li>OCM</li>

        <li>Accounts</li>

        <li>Economics</li>

        </ol>

</ol>

</body>

</html>

Output - :

Nested List

  1. Science
    • Physics
    • Biology
    • Chemistry
  2. Commerce
    1. OCM
    2. Accounts
    3. Economics

 Order List

<!DOCTYPEhtml>

<html><head><tittle>Ordered List</title></head>

<body>

<H2>Menucard</H2>

<ol><li>Tea</li>

<li>Coffee</li>

<li>Milk</li>

</ol>

<H2>Subject</H2>

<ol start=''a''>

<li>Maths</li>

<li>Economics</li>

<li>English</li>

</ol>

</body>

</html>

Output -


Ordered List

Menucard

  1. Tea
  2. Coffee
  3. Milk

Subject

  1. Maths
  2. Economics
  3. English




 Lets start with Std 12th.

Ch. 1 Advanced Web Designing

Some Html /CSS programs for you....

<!DOCTYPE HTMl>

<html>

<head>

<style>

.intro{text-align:center;color:blue}

</style>

</head>

<body>

<h1 class="intro">this heading is blue and center-aligned.</h1>

<p class="intro">this paragraph is blue and center-aligned.</p>

</body>

</html>

Output







 Hi,

Here are 11th and 12th Science and commerce  books images are given for your reference purpose.






 Hello Friends, 

Welcome to my blog.....

It's for students who are studying Information Technology specially for std 11th and 12th. I think this is helpful to them. In this you will get all study material like notes, exercise solutions, some programs and many more.

I am trying to give you the best and all you need. I am requesting you to ask your queries and give suggestions to improve my blog.

Your comments, like and share is very much important to me.

So LeT's Start it.....

You are Ready................

Yes........

Coding -  <!DOCTYPE HTML> <html> <head><title>image map</title> </head> <body> <h1>An exampl...