GUVI
Back

ALL HTML SOLUTION HERE. (1 TO 57) AND ALSO YOU CHECK ON YT ALLTECHINFO NA

Created 2 years ago
4336 Views
2 Comments
narendra7770
@narendra7770
narendra7770
@narendra7770Profile is locked. Login
1. Display "Hello Everyone!!!" in a paragraph tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
  <p>
      Hello Everyone!!!
  </p>  
  </body>
</html>

2. Display 'GUVI GEEK' in a h1 tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body> 
  <h1> GUVI GEEK </h1>
 </body>
</html>

3. Display "Hello From Guvian" using a paragraph tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
      <p>Hello From Guvian</p>
  </body>
</html>

4. Display ''Hello from Guvian" in red colour in H1 tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
      <h1 style="color:red;">
Hello from Guvian
</h1>
  </body>
</html>

5. Display "Hello from guvian" with background colour. (red) in paragraph tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <p style="background-color:red;">Hello from guvian</p>
  </body>
</html>

6. Display a text "Hi, How are you?" in bold tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<b>Hi, How are you?</b>
</body>
</html>

7. Display an ordered list with coffee,milk,tea items.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
   <ol>
       <li>coffee</li>
       <li>milk</li>
       <li>tea </li>
   </ol>       
  </body>
</html>

8. Display an unordered list as inline with elements HTML, CSS, JS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
   </head>
  <body>
     <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JS</li>
     </ul>         
  </body>
</html>

9. Underline the given text "Cookies" using html tag.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <u>Cookies</u>
  </body>
</html>

10. Display the text "GUVI GEEK" ranging from h1 to h6 tags in html.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
  <h1>GUVI GEEK</h1>
  <h2>GUVI GEEK</h2>
  <h3>GUVI GEEK</h3>
  <h4>GUVI GEEK</h4>
  <h5>GUVI GEEK</h5>
  <h6>GUVI GEEK</h6>
  </body>
</html>

11. Mark the word 'Google' in the given paragraph 'Google more to explore the things' use p tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
 <p> <mark>Google</mark> more to explore the things</p>
  </body>
</html>

12. Superscript the word 'Well' in the given paragraph 'All is Well'.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
 <p>All is <sup>Well</sup></p>
  </body>
</html>

13. Subscript the word 'Hard' in the paragraph 'Work Hard'.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
 <p>Work<sub>Hard</sub></p>
  </body>
</html>

14. Separate the given two paragraphs 'I am first' and 'I am second' with a line between them using a tag in html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
  <p>I am first</p>
  <hr>
  <p>I am second</p>
  </body>
</html>

15. Create a table of width 100% and table header's Firstname, Lastname, Age.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
        
   </head>
  <body>
  <table>
        <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        </tr>
    </table>
  </body>
</html>

16. Display "This is a paragraph" in a bold tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <b>This is a paragraph</b>
  </body>
</html>

17. Display an ordered list with text ONE, TWO, and THREE as list elements.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
 <ol>
     <li>ONE</li>
     <li>Two</li>
     <li>Three</li>
 </ol>
  </body>
</html>


18. Display an ordered list with text ONE, TWO, and THREE as list elements and ordered with alphabet characters like a, b, c....

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>

<ol id="lists" type="a"> 
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol> 
</body>
</html>

19. Display an ordered list with text ONE, TWO, and THREE as list elements and ordered with roman characters like I, II, III, IV, ....(use id as 'lists')

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>

 <ol id='lists' type="I">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
 </ol></body>
</html>

20. 
Display an ordered list with text ONE, TWO, and THREE as list elements and ordered with roman characters like i, ii, iii, iv.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
 <ol id='lists' type="i">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
 </ol>
  </body>
</html>

21. 
Display an unordered list with text ONE, TWO and THREE with list-style-type as "disc" using inline CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
<ul id='lists' style="list-style-type: disc;">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
 </ul>

 </body>
</html>

22.
Display an unordered list with text ONE, TWO and THREE with list-style-type as "circle" using inline CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
<ul id='lists' style="list-style-type: circle;">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
 </ul>
  </body>
</html>

23. Display an unordered list with text ONE, TWO and THREE with list-style-type as "square" using inline CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
<ul id='lists' style="list-style-type: square;">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
 </ul>
  </body>
</html>

24. Display the given unordered list with text ONE, TWO and THREE without any list style using inline CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
      <ul id='lists'>
         <li>ONE</li>
         <li>TWO</li>
         <li>THREE</li>
       </ul>
</body>
</html>

25. Edit the given anchor tag to make the link open on new tab using HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <a href="https://www.google.com" target="_blank">Google</a>
  </body>
</html>

26. Display "This is a italic paragraph" in a italic tag using HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <i>This is a italic paragraph</i>
  </body>
</html>

27. Display "This is a underlined paragraph" with an underline using HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <u>This is a underlined paragraph</u>
  </body>
</html>

28. Display a Button showing "Click Me" using HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
   <button>Click Me</button>
  </body>
</html>

29. Display "Hello from guvian" with 😀 emojis front and back in a h1 tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
 
  <body>
      <h1>😀 Hello from guvian😀</h1>
  </body> 
</html>

30. Display "Hello World!" by using a p tag which is already present with id 'demo' in JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
<body>
  <p id="demo"></p>
</body> 
</html>

document.getElementById("demo").innerHTML = "Hello World!";

31. Display "Hello from Guvian" in red colour, aligned center using CSS selector in paragraph tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  
<style>
p {
color:red;
text-align: center;
} 
</style>
</head>
  <body>
<p>Hello from Guvian</p>
</body>
</html>

32.
Display "Hello from Guvian" in a margin of 20px with pink background in a paragraph tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
 <style>
p {
margin:20px;
background:pink;
} 
</style>
</head>
<body>
<p>Hello from Guvian</p>
</body>
</html>

33. Display an statement "Hello From Guvian!" in a h1 tag and underline it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
    <title>Static Template</title>
    <style>
  h1{
  text-decoration: underline;
}
</style>
</head>
  <body>
<body>
<h1>
    Hello From Guvian!
</h1>
</body>
</html>

34. Display "Hello from guvian" using padding on all four sides, 10px, with light blue background in a paragraph tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <style>
  p{
      padding-top:10px;
      padding-bottom:10px;
      padding-left:10px;
      padding-right:10px;
      background:lightblue;
  }
  </style>
  <body>
<p>
    Hello from guvian
</p>
  </body>
</html>

35.  
Create a Unordered list with a id "unorderList" and the elements (HTML, CSS, Javascript) in HTML.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
 <body>

<h2>Unordered List</h2>

<ul id='unorderList'>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>  
</body>
</html>

36. Create a ordered list with a id "orderedList" and the elements (HTML, CSS, Javascript) in HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
 <body>

<h2>Ordered List</h2>

<ol id= "orderedList">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>  
</body>
</html>

37. Align the given text "Code well" to center and give a green border to it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  
  <body>
  <p class="center">Code well</p>
  </body>
</html>

    p{
      text-align:center;
      border-color: green;
  }

38. Draw a rectangle of width 200 and height 100 with a border of 1px black color.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  
  <body>
   <canvas width="200" height="100" style="border:1px black solid">   
   </canvas> 

  </body>
</html>

39. Form a checkbox with options as I am an extrovert, I am an introvert, I am polite.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
   <form>
   <input type="checkbox"><lable>I am an extrovert</lable>
   <input type="checkbox"><lable>I am an extrovert</lable>
   <input type="checkbox"><lable>I am an extrovert</lable>

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

40. Form radio buttons with values Male, Female, Other

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
  <form>
      <input type="radio"><lable>Male</lable>
      <input type="radio"><lable>Female</lable>
      <input type="radio"><lable>Other</lable>
  </form>
    
  </body>
</html>

41. Create an iframe of width 300 and height 200 using iframe tag in html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  
   </head>
  <body>
  <iframe widht="300"  height= "200"></iframe>
  </body>
</html>

42. Form a SVG stroke of width 600, height 80 of pink color.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
  <svg height="80" width="600" stroke="pink">
  
  </svg>
    
  </body>
</html>


43. Display a link to 'www.google.com' with "Google" as text using HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
   <a href="www.google.com">Google</a>
  </body>
</html>

44. Display addition of 5 and 6 with a paragraph element with id name as "addition" using JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
   <p id="addition"></p>
  </body>
</html>

var number  = document.getElementById("addition");
number.innerHTML = 5+6;

45. Display "Hello from Guvian" in a paragraph tag, where you have to increase the font size of the word 'Guvian' using class named 'note' to 20px in a span tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  <style>
  .note{  
font-size:20px;
  }
  </style>
</head>
<body>
<p>Hello from<span class="note"> Guvian</span></p>
</body>
</html>

46. Assign "Hello" to a string variable, 1 to a variable, print both in same line using Java Script.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>

<p id="demo"></p>

<script>
var string = "Hello";
var number = 1;
document.getElementById("demo").innerHTML = string  + number ;

</script>
</html>

47. Print the numbers from 1 to 5 using Javascript using for loop(give space between each number)).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>

<p id="demo"></p>
</html>

text="";
var i;
for (i = 1; i < 6; i++) 
{
  text += " " + i;
}
document.getElementById("demo").innerHTML = text;

48. Given an array, Print the elements which are greater than 5 in acending order from that numbers using javascript. if input is 45, 4, 9, 16, 25 Use ',' to separate numbers and Print use the fun() function to process !

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>

<body><input id='in1' oninput='fun()'><p id="result"></p>


</body></html>

49. Display "Hello From Guvian" using paragraph tag and by using :after pseudo element add ! after the text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <style>
    p::after {
  content: "!";
}
    </style>
  </head>
  <body>
   <p>Hello From Guvian</p>
  </body>
</html>

50. Given a array, sort the array in Ascending order and print, using Javascript array=[40, 100, 1, 5, 25, 10]; Example(array=[5,4,3,2,1] sorted array 1,2,3,4,5 in p tag).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>

<p id="demo"></p>
 </html>

var points = [40, 100, 1, 5, 25, 10];
points.sort((function(a, b){return a - b}));
document.getElementById("demo").innerHTML = points;

51. Create a input field with a label "Enter the name"
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
  <form>
   <input type="text">
   <label>Enter the name</label>
  </form>

  </body>
</html>

52. Display "Hello From Guvian" in a paragraph and highlight the word "Hello" in italics using internal CSS via class name italic.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <style>
  .italic{
      font:italic small-caps bold 12px/30px Georgia, serif;
  }
  </style>
  <body>
  <p><span class="italic">Hello</span> From Guvian</p>
  </body>
</html>

53. Create a HTML form, With "FirstName" , "LastName" as id to input fields, with a "submit" button and a Heading tag "Guvi Form"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
<body>
<h2>Guvi Form</h2>
<form>
  <label for="FirstName">FirstName</label>
  <input type="text" id="FirstName" name="fname"><br><br>
  <label for="LastName">LastName</label>
  <input type="text" id="LastName" name="lname"><br><br>
  <input type="button" onclick="formSubmit()" value="submit">

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

54. Create a HTML form, With "Firstname", "Password" as id for input fields, with a "submit" button and a Heading tag "Guvi Form", Password field should get only 4 characters as input.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
<body>
<h2>Guvi Form</h2>
<form>
  <label for="Firstname">FirstName</label>
  <input type="text" id="Firstname" name="fname"><br><br>
  <label for="Password">Password</label>
  <input type="password" id="Password" name="password" maxlength="4">
  <input type="button" onclick="formSubmit()" value="submit">
</form>
</body>
</html>

55. Include a image with id 'myImage' where the source is 'https://www.guvi.in/images/guvi-logo.png'.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
<body>

<img src="https://www.guvi.in/images/guvi-logo.png" id="myImage">

</body>
</html>

56. Draw a Circle with radius of 40 with blue colour, black colour stroke using SVG (Width =100 and height =100) x,y 50,50.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
<body>

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /></svg>
 
</body>
</html>

57. Draw HTML canvas, cavas details, width="200" height="100" style is border:1px and solid #d3d3d3.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

</body>
</html>


Comments (2)
Please login to comment.
 
Powered by habitate.io Habitate