Std. XI I.T || Skill Set 2 - HTML5 || SOP 1

-

SOP 1. Write a program using HTML with following specifications.
  • The background color should be green.
  • The text color should be red.
  • The heading should be large in size as ' My First Web Page '.
  • Display a horizontal line after the heading.
  • Display your name in Bold, address in Italics and standard as 11th.
Procedure: HTML code to be typed in notepad and saved with suitable file name e.g - sop1.html

<!DOCTYPE html>
<html>
<head>
<title>SOP1</title>
</head>
<body bgcolor="green" text="red">
<h1>My First Web Page</h1>
<hr size="5" width="100%" color="blue">
<b>Name - Rupali Debnath</b><br>
<i>Address - Boisar</i><br>
<p>Standard - 11<sup>th</sup></p>
</body>
</html>

Output to be executed in Internet explorer web browser


   Steps to perform SOP1
      Start Notepad application. There are several ways to start the notepad, the easiest way is to click on start button and type notepad in search programs and files box.

     Type the basic structure of html and add only one tag inside <body> and </body>, let’s say <h1>tag as given below.
<!DOCTYPE html>
<html>
<head>
<title>SOP1</title>
</head>
<body>
<h1>My First Web Page</h1>
</body>
</html>

I)  Save the notepad with appropriate file name e.g. sop1.html or sop1.htm.
Step 1: Click on File menu -> select Save option. Or use keyboard shortcut Ctrl+S and the select the drive

  


Step 2: Select the folder by double clicking left button of the mouse or a right click -> Select option 



Step 3: Type file name and save

   Before saving the notepad pay attention to the location of folder and the drive.
   Folder name along with drive name must display as shown in 1st point of the image.
   Type file name as shown in 2nd point of the image.
   Click on Save button as shown in 3rd point.



II)            Steps to see the output in Internet explorer web browser

Step 1: Open Internet explorer browser

Step 2: Click on File menu and select Open option


Step 3: Click on Browse button

Step 4: Choose Drive in which you made your folder

Step 5: After clicking on D drive the folders of D drive are shown on right side.

Step 6: Step 2: Select the folder by double clicking left button of the mouse or a right click -> Select option


Step 7: Using left button of the mouse double click on the HTML file name




Step 8: Click on OK button

Step 9: See the output

After getting output of single line 'My First Web page' ,  perform this activity  
·     Minimize browser, add attributes and tags line by line in notepad, save the notepad. You can use shortcut key Ctrl+S to save or select Save option from File menu of Notepad.


·     Click on internet explorer browser from task bar and refresh the web page. Use F5 function key from the keyboard as shortcut to refresh the Internet explorer browser.


Tips:
v For learning HTML use Internet explorer browser as it supports maximum tags and attributes of HTML which makes it easy to understand the behavior of the tags and attributes.

v To adopt a good coding skill always develop the web page part by part. First type the basic structure with only one <p> or any heading tag save the code and see the output to check the browser is responding properly. Then keep adding tags and attributes line by line, save the notepad and keep refreshing the browser to develop the desired web page.

v Do not open multiple copies of a same notepad or browser again and again. A Single notepad and a browser is all that you need. Do not close the notepad or browser again and again. Instead minimize the file or use Alt+Tab key combination to switch from notepad to browser or vice-versa.



Hope you find this guidance helpful. Comment down your thoughts for other step by step tutorial related to HTML. Suggestions are warmly welcome. Thank you.




Location: India

Comments

  1. UnknownJanuary 23, 2022 at 3:08 AM

    It's too helpful for me , thank you so much

    ReplyDelete
  2. UnknownJanuary 24, 2022 at 2:03 AM

    Hello Rupali even i am a blogger and I liked your blog very much , and I wanted to ask something about your blog
    But i cannot contact , as there no contact information of yours
    So could you plz contact me on my Instagram profile - jay_gupta555

    It's really needed , so plz contact me , it would be a really great help for me

    ReplyDelete
  3. UnknownMarch 22, 2022 at 8:47 AM

    It guided me well how to code

    ReplyDelete
  4. samir razaNovember 9, 2023 at 1:09 AM

    I’m a professional SOP Help Online is your solution for crafting compelling Statements of Purpose. Our expert writers offer guidance and support to create standout SOPs for academic admissions, job applications, and more. We tailor your narratives to reflect your unique strengths and aspirations, helping you achieve your goals. For more information contact us:- 8506068585

    ReplyDelete

Post a Comment

Popular posts from this blog

Std XI I.T || Skill Set 3 – JavaScript || SOP1

-
Image
SOP1: Create JavaScript program for the following using appropriate variables, JavaScript inbuilt functions and control structures. ·               To accept integer and display the result by multiplying it with 3. <!DOCTYPE html> <html> <head> <title>sop1</title> </head> <body> <h1>To accept integer and display the result by multiplying it with 3</h1> <script language=javascript> var num,ans num=prompt("Enter a number") ans=num*3 document.write("Answer = "+ans) </script> </body> </html> Type the code in notepad application and save the code as usual in a folder. Provide suitable filename for example sopjs1a.html. In these examples we are embedding JavaScript codes in HTML hence  we provide  .html extensions to the filenames. To see the output as per academic specifications  use Internet Explo...
Read more

Std. XI I.T || Skill Set 2 - HTML5 || SOP 4

-
Image
SOP4: Write a program using HTML with the following specification. ·         Write a program with details about a class with total number of students-100, (Boys-50), Girls-50 in tabular form. ·         Link this page to another page as follows.                                                             Demo.html HTML Code <!DOCTYPE html> <html> <head> <title>sop4A</title> </head> <body> <table border=1 cellspacing=0> <tr bgcolor="gold" align="center"> <th>Number of Students <th>Boys <th>Girls </tr> <tr bgcolor="lightgreen" align="center"> <th>100 <th>50 <th>50 </tr> </table> </body> ...
Read more

Std XI I.T || Skill Set 3 – JavaScript || SOP3

-
SOP3: Create JavaScript program for the following using appropriate variables, JavaScript inbuilt string functions and control structures.        To accept string and calculate its length.          <!DOCTYPE html>          <html>          <head>          <title>sop3</title>          </head>          <body>          <h1> To accept string and calculate its length </h1>          <script language=javascript>           var n           n=prompt("Enter any text")           s=n.length           document.write("Length of the string is "+s)          </script...
Read more