Installing Html Tools and creating a simple Html document

0
1476

In this tutorial today we will learn the steps to install Html Tool and will create an simple Html document.

  • Steps For Installing Notepad++ are as follows :
  1. Install the google chrome first and then open the browser.
  2. Specify the address “ www.google.com “ search for notepad++.
  3. You will get the following screen as shown below…
  4. v1

  5. Now click on ” Download current version “.
  6. Open the download folder and double click on it then following window will be displayed,so click on OK.
  7. v3

  8. Click on Next button
  9. v4

  10. Accept the agreement.
  11. v6

  12. Click on the Next button.
  13. v7

  14. Choose the following components and click on Next button .
  15. v8

  16. Select the create Shortcut on Desktop option and click on the Install button.
  17. v9

  18. After the installation is completed click on Finish button.
  19. v10

  20. Run notepad++ i.e open your installed notepad++ and following window will be displayed.
  21. v11

  22. Now go to File -> Click on New
  23. v12

  24. Now write the following code as shown :

  25. v13

  26. Now save your document as Type :html and name it for example test1
  27. v14

  28. Now double click on test1 file which we have created and saved ,the following window will be displayed.
  29. v15

  30. Here is the example which includes heading tag ,

    paragraph tag and some other tag ,so to demonstrate it write the following Code in notepad++ .

  31. After writing the code your window will look like as shown below :
  32. v16

  33. Save it as an html document and open it in google chrome browser it will display the following output
  34. v17

  35. For adding simple css in an html document write the following code in notepad++.
  36. After writing the code you will have the following window.
  37. v18

  38. Now save it as an html document and run it, you will have the following output:
  39. v19

  40. For creating an HTML document following are the steps below:
    1. Create a new folder as shown below :
    2. v20

    3. Open the folder created and create a Text document in it .
    4. v21

    5. Name the Text file as index.html
    6. v22

    7. When we open index.html file it gets open up in the browser and has .txt extension which will look like as shown below :
    8. v23

    9. Now we have to remove that txt extension so go to Organize -> Folder and Search option you will have following window :
    10. v24

    11. Click on view .
    12. v25

    13. Click on view and uncheck Hide extensions for known file types and click on Ok button.
    14. v26

    15. Remove the txt extension click on yes .
    16. v27

    17. It will change the icon of index.html.
    18. v28

    19. Right click on index.html and click on Edit with notepad++
    20. v29

    21. Write the following code in Notepad++ :
    22. After writing the code your window will look like as shown below :
    23. v30

    24. Now save and run your file and you will have the following output:
    25. v31

    26. Now for adding an image and displaying write the following code in Notepad++
    27. After writing the code your window will look like as shown below:
    28. v32

    29. Now save your file and run it you will have following output:
    30. v33

  41. Thus we have successfully installed Html tools and learned to create an simple Html document.

LEAVE A REPLY

Please enter your comment!
Please enter your name here